/* ══ Bandeau de titre ══ */
/* Effet « qui respire » : haut en haut de page, compact dès qu'on descend.
   SEULE la hauteur change — logo, nom du site et onglets gardent exactement
   la même taille et restent centrés verticalement.
   On redéfinit la VARIABLE --header-h dans html.at-top plutôt que la hauteur
   du header : tout ce qui se positionne dessous (tiroir mobile) suit alors
   automatiquement. */
html.at-top { --header-h: var(--header-h-tall); }

.site-header {
  position:sticky; top:0; z-index:850;
  background:var(--header-bg); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
  height:var(--header-h);
  transition:height .3s ease, box-shadow .3s ease;
  box-shadow:var(--shadow-sm);
}
html.at-top .site-header { box-shadow:none; }

/* Le centrage vertical ne demande rien d'autre que ceci. */
.header-inner {
  height:100%; display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; padding:0 2.5rem; gap:1rem;
}

.hdr-logo {
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--serif); font-size:1.05rem; letter-spacing:.04em;
  cursor:pointer; justify-self:start; min-width:0;
}
.hdr-logo img  {
  height:34px; width:34px; border-radius:50%; object-fit:cover;
  /* Le logo n'a pas de fond transparent : son carré est quasi noir.
     Arrondi en pastille, il se fond dans le thème sombre et se lit comme
     un médaillon volontaire dans le thème clair. */
  border:1px solid var(--border);
  background:var(--logo-bg);
}
.hdr-logo span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.hdr-nav { display:flex; align-items:center; gap:.3rem; justify-self:center; }
.hdr-nav a {
  font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-mid); padding:.4em .75em; transition:color var(--t);
  white-space:nowrap;
}
.hdr-nav a:hover, .hdr-nav a.on { color:var(--accent); }

/* Deux paliers appliqués par mesure de la place réellement disponible
   (js/core/header.js), jamais par devinette de largeur d'écran : le nombre
   d'onglets peut changer depuis l'admin. */
.nav-tight .hdr-nav      { gap:0; }
.nav-tight .hdr-nav a    { font-size:.68rem; letter-spacing:.07em; padding:.4em .45em; }
.nav-collapsed .hdr-nav  { display:none; }
.nav-collapsed .mob-menu-btn { display:flex; align-items:center; }

.admin-btn {
  font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-dim); padding:.3em .7em; white-space:nowrap;
  border:1px solid var(--border); border-radius:var(--r);
  transition:all var(--t); cursor:pointer;
}
.admin-btn:hover { border-color:var(--accent); color:var(--accent); }
.hdr-right { display:flex; align-items:center; gap:.5rem; justify-self:end; }

/* ─── Confort de lecture : ☀/🌙 · A− · A+ ───────────────────── */
.comfort-ctrl { display:flex; align-items:center; gap:.25rem; }
.comfort-btn {
  width:24px; height:24px; border-radius:var(--r);
  border:1px solid var(--accent); color:var(--accent);
  background:none; cursor:pointer; font-family:var(--serif);
  font-size:.78rem; display:flex; align-items:center; justify-content:center;
  transition:all var(--t); padding:0; line-height:1; flex-shrink:0;
}
.comfort-btn:hover:not(:disabled) { border-color:var(--accent2); color:var(--accent2); }
.comfort-btn:disabled { opacity:.35; cursor:default; }
/* Ancien nom conservé : la modale de commande réutilise ces boutons. */
.font-ctrl { display:flex; align-items:center; gap:.25rem; }
.font-btn  { width:24px; height:24px; border-radius:var(--r);
  border:1px solid var(--accent); color:var(--accent); background:none; cursor:pointer;
  font-family:var(--serif); font-size:.78rem; display:flex; align-items:center;
  justify-content:center; transition:all var(--t); padding:0; line-height:1; }
.font-btn:hover:not(:disabled) { border-color:var(--accent2); color:var(--accent2); }
.font-btn:disabled { opacity:.35; cursor:default; }
.modal-font-ctrl { display:flex; justify-content:flex-end; margin-bottom:.8rem; gap:.3rem; }

@media (prefers-reduced-motion: reduce) {
  .site-header { transition:none; }
}

/* ══ Hero ══ */
/* ─── Hero ───────────────────────────────────────────────── */
.hero {
  min-height:70vh; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:8rem 2rem 0.5rem;
  background:radial-gradient(ellipse at 50% 60%, var(--hero-glow) 0%, transparent 65%);
}
.hero-inner { max-width:900px; width:90%; text-align:center; }
.hero h1 {
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.4rem,3.6vw,2.6rem); line-height:1.2;
  letter-spacing:.12em; margin-bottom:1.1rem;
  white-space:nowrap;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.hero h1 em { font-style:normal; font-family:var(--serif); color:var(--accent2); }
.hero-rule { width:44px; height:1px; background:var(--accent); margin:.8rem auto 1.2rem; opacity:.7; }
.hero p { font-size:.88rem; line-height:1.9; color:var(--text-mid); letter-spacing:.04em; }

/* ══ Sections ══ */
/* ─── Section ────────────────────────────────────────────── */
.section { padding:4rem 2.5rem; max-width:1300px; margin:0 auto; }
.section-hdr {
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:2.5rem; padding-bottom:1rem;
  border-bottom:1px solid var(--border);
}
.section-title { font-family:var(--serif); font-size:1.55rem; font-weight:300; letter-spacing:.05em; }
.section-back { font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim); cursor:pointer; transition:color var(--t); }
.section-back:hover { color:var(--accent); }

/* ══ Pied de page ══ */
.site-footer { background:var(--bg2); border-top:1px solid var(--border); padding:2rem; text-align:center; }
.site-footer p { font-size:.72rem; color:var(--text-dim); line-height:2.4; letter-spacing:.03em; }
.site-footer a { color:var(--accent); transition:opacity var(--t); }
.site-footer a:hover { opacity:.75; }

/* ══ Recherche par référence ══ */
/* ─── Loupe nav search ───────────────────────────────────── */
.nav-search-wrap { position:relative; display:flex; align-items:center; }
.nav-search-btn { background:none; border:none; cursor:pointer; color:var(--text-mid); display:flex; align-items:center; padding:.25rem .3rem; transition:color var(--t); }
.nav-search-btn:hover { color:var(--accent); }
.nav-search-box { position:absolute; top:calc(100% + .7rem); right:0; background:var(--bg2); border:1px solid var(--border); border-radius:var(--r2); padding:.75rem .9rem .8rem; width:300px; z-index:400; box-shadow:var(--shadow-md); }
.nav-search-box input { width:100%; box-sizing:border-box; background:transparent; border:none; border-bottom:1px solid var(--border); color:var(--text); font-family:var(--serif); font-size:.88rem; padding:.3rem 0; outline:none; letter-spacing:.05em; }
.nav-search-box input::placeholder { color:var(--text-dim); font-style:italic; }
.nav-search-box input:focus { border-bottom-color:var(--accent); }
#nav-search-result { margin-top:.55rem; font-size:.78rem; color:var(--text-dim); line-height:1.6; min-height:1.2rem; }

/* ══ Menu mobile ══ */
/* ─── Mobile menu ───────────────────────────────────────── */
.mob-menu-btn { display:none; background:none; border:none; cursor:pointer; color:var(--text-mid); padding:.4rem; transition:color var(--t); flex-shrink:0; }
.mob-menu-btn:hover, .mob-menu-btn.open { color:var(--accent); }
#mob-menu { display:none; position:fixed; top:var(--header-h); left:0; right:0; z-index:848; background:var(--mobmenu-bg); border-bottom:1px solid var(--border); backdrop-filter:blur(8px); flex-direction:column; padding:.4rem 0; }
#mob-menu.open { display:flex; }
#mob-menu a { font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-mid); padding:.9rem 1.6rem; transition:color var(--t); border-bottom:1px solid var(--hairline); }
#mob-menu a:last-child { border-bottom:none; }
#mob-menu a:hover { color:var(--accent); }