/* En-tête et pied de page partagés — inclus par inc/commun.php.
   Tout est rangé sous .entete / .volet / .pied : aucune règle ne touche le reste des pages. */

:root {
  --paper:    #f3ede3;
  --paper-2:  #e9e1d3;
  --ink:      #241c18;
  --ink-soft: #5a4e45;
  --line:     #d3c6b4;
  --rose:     #9a6b68;
  --rose-deep:#7a4542;
  --gold:     #c4a35a;
  --night:    #3c4f6a;
  --night-2:  #3c4f6a;
  --sea:      #3c4f6a;
  --site-max: 1120px;
  --entete-h: 72px;
  --c-serif: "Cormorant Garamond", Georgia, serif;
  --c-sans:  "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  --c-ease:  cubic-bezier(.2,.7,.3,1);
}

/* ---------- En-tête ---------- */
.entete {
  position: sticky; top: 0; z-index: 50; height: var(--entete-h);
  background: color-mix(in srgb, var(--paper) 84%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--ink); font-family: var(--c-sans);
  transition: background .5s var(--c-ease), color .5s var(--c-ease);
}
.entete::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--line); opacity: 0; transition: opacity .4s var(--c-ease);
}
.entete.scrolled::after { opacity: 1; }
.entete a { color: inherit; text-decoration: none; }

.entete-dedans {
  max-width: var(--site-max); margin: 0 auto; padding: 0 24px; height: 100%;
  display: flex; align-items: center; gap: 24px;
}
.entete-marque {
  font-family: var(--c-serif); font-size: 20px; font-weight: 500;
  letter-spacing: .01em; line-height: 1.1; margin-right: auto;
}
.entete-marque .long { display: none; }

.entete-nav { display: none; align-items: center; gap: 28px; font-size: 15px; font-weight: 500; }
.entete-nav .lien { position: relative; display: inline-block; }
.entete-nav .lien::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .24s var(--c-ease);
}
.entete-nav .lien:hover::after,
.entete-nav .lien[aria-current="page"]::after { transform: scaleX(1); }

.entete-panier { display: inline-flex; align-items: center; padding: 6px; color: var(--ink-soft); }
.entete-panier:hover { color: var(--ink); }
.entete-panier svg { width: 18px; height: 18px; }
.entete-panier .compte { font-size: 12px; color: var(--rose-deep); margin-left: 2px; }

/* burger */
.burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 10px; margin-right: -10px;
  background: none; border: 0; cursor: pointer;
}
.burger span { display: block; height: 1px; background: currentColor; transition: transform .35s var(--c-ease), opacity .25s var(--c-ease); transform-origin: center; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* la route : ligne de progression + croissant qui avance (accueil) */
.entete .route { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none; }
.entete .route i { position: absolute; left: 0; top: 0; height: 1px; width: 100%; background: var(--gold); transform: scaleX(var(--p, 0)); transform-origin: left; }
.entete .route b {
  position: absolute; top: -5px; left: calc(6px + var(--p, 0) * (100% - 12px)); width: 11px; height: 11px; margin-left: -5px;
  border-radius: 50%; background: var(--paper);
  box-shadow: inset -3px 0 0 0 var(--gold), 0 0 0 1px color-mix(in srgb, var(--gold) 50%, transparent);
  opacity: 0; transition: opacity .4s var(--c-ease);
}
.entete.scrolled .route b { opacity: 1; }

/* passage sur une section de nuit (accueil) */
.entete.on-night { background: color-mix(in srgb, var(--night) 86%, transparent); color: var(--paper); }
.entete.on-night::after { background: color-mix(in srgb, var(--gold) 30%, transparent); }
.entete.on-night .entete-panier { color: color-mix(in srgb, var(--paper) 70%, transparent); }
.entete.on-night .route b { background: var(--night); }

/* ---------- Volet mobile ---------- */
.volet {
  position: fixed; inset: 0; z-index: 40; background: var(--paper); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  opacity: 0; visibility: hidden; transition: opacity .4s var(--c-ease), visibility 0s .4s;
}
.volet.open { opacity: 1; visibility: visible; transition: opacity .4s var(--c-ease); }
.volet a {
  position: relative; color: inherit; text-decoration: none;
  font-family: var(--c-serif); font-size: 28px; font-weight: 500;
  opacity: 0; transform: translateY(14px); transition: opacity .5s var(--c-ease), transform .5s var(--c-ease);
}
.volet a[aria-current="page"] { color: var(--rose-deep); }
.volet.open a { opacity: 1; transform: none; }
.volet.open a:nth-of-type(1) { transition-delay: .08s } .volet.open a:nth-of-type(2) { transition-delay: .14s }
.volet.open a:nth-of-type(3) { transition-delay: .20s } .volet.open a:nth-of-type(4) { transition-delay: .26s }
.volet .lune {
  position: absolute; right: -60px; top: 12%; width: 260px; height: 260px; border-radius: 50%;
  background: var(--paper); box-shadow: inset -70px 0 0 0 var(--paper-2); opacity: .9; pointer-events: none;
}

/* ---------- Pied de page ---------- */
.pied { background: var(--night-2); color: var(--paper); padding: 64px 0 28px; font-family: var(--c-sans); font-size: 15px; line-height: 1.6; }
.pied a { color: inherit; text-decoration: none; }
.pied a:hover { color: var(--gold); }
.pied-dedans { max-width: var(--site-max); margin: 0 auto; padding: 0 24px; }
.pied-cols { display: grid; gap: 36px; opacity: .75; }
.pied-marque { display: block; margin-bottom: 8px; font-family: var(--c-serif); font-size: 20px; font-weight: 500; line-height: 1.1; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pied-bas {
  margin-top: 48px; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--paper) 12%, transparent);
  display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; opacity: .6;
}

/* ---------- Ordinateur ---------- */
@media (min-width: 900px) {
  .entete-marque .long { display: inline; }
  .entete-marque .court { display: none; }
  .entete-nav { display: flex; }
  .entete-panier { margin-left: 4px; }
  .burger, .volet { display: none; }
  .pied-cols { grid-template-columns: 1.4fr 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .entete, .entete *, .volet, .volet a { transition: none !important; }
}