/* ══ ArtiZi·OM BUREAU · L'EN-TÊTE (menu du haut et son 2e étage) ══════════════════════════════
   Le même sur toutes les pages du bureau (pages refaites ET anciennes pages). Le HTML vient de outils/entete.py.
   AUTONOME : il ne touche que ses propres classes (az-…) et ne définit rien sur :root ni sur les balises de la page ;
   ses couleurs sont posées sur l'en-tête lui-même, pour ne jamais changer celles d'une ancienne page.
   Un changement de ce fichier = changer le numéro ?v= dans les pages qui l'appellent.
   v1 (14 octobre) : sorti de socle.css v5 (mêmes règles), rendu autonome pour les anciennes pages.
   v2 (14 octobre) : pages sombres (Stages, Philosophie) : en haut de page transparent à texte clair, noir ensuite ; logo doré
   sur l'en-tête noir (comme l'accueil). Rien ne change pour l'accueil ni pour la Boutique.
   v3 (17 octobre, Boris : « le bandeau ne change pas de couleur quand on survole » ; « qu'il se rétracte dans sa couleur du moment ») :
   un en-tête transparent le reste au survol, son étage aussi (les liens s'écrivent sur la page, dans la couleur de l'en-tête) ;
   « sans-fondu » (socle.js v9) : la couleur change d'un coup quand l'en-tête est caché, seule sa glissade reste animée. */
.az-entete{--or:#c8a96e;--or-clair:#e8d5aa;--or-fonce:#a8843e;--creme:#f7f3ec;--brun:#2a1f10;--gris:#8a7d6a;--entete:76px;
  box-sizing:border-box;margin:0;font-family:'Jost',sans-serif;font-weight:300;line-height:normal;letter-spacing:normal;text-align:left;
  -webkit-font-smoothing:antialiased;}
/* remise à zéro limitée à l'en-tête ; :where() = priorité nulle, les règles ci-dessous passent toujours devant */
:where(.az-entete) *,:where(.az-entete) *::before,:where(.az-entete) *::after{box-sizing:border-box;margin:0;padding:0;}
:where(.az-entete) a{color:inherit;text-decoration:none;}

.az-entete{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--entete);display:flex;align-items:center;gap:clamp(24px,3vw,46px);
  padding:0 clamp(28px,4.4vw,64px);background:rgba(247,243,236,.97);border-bottom:1px solid rgba(200,169,110,.28);
  transition:background .5s ease,border-color .5s ease,opacity .9s ease,transform .5s cubic-bezier(.2,.7,.2,1);}
.az-entete.transparent{background:rgba(247,243,236,0);border-bottom-color:rgba(200,169,110,0);}
.az-entete.cache{opacity:0;transform:translateY(-12px);pointer-events:none;}
.az-entete.replie{transform:translateY(-100%);}          /* on descend : le menu se cache ; on remonte : il revient */
.az-logo{flex:none;font-family:'Cinzel',serif;font-weight:500;font-size:25px;letter-spacing:3px;color:var(--brun);white-space:nowrap;line-height:1;}
.az-logo .pt{color:var(--or);padding:0 .05em;}
/* le menu : chaque mot est dans une case (.az-item) haute comme l'en-tête, les cases se touchent (pas de trou au survol) ;
   l'écart entre les mots (2 × --pi) est le même qu'avant (v4 : gap clamp(16px,2.1vw,32px)), la marge négative garde leur place */
.az-nav{--pi:clamp(8px,1.05vw,16px);display:flex;align-self:stretch;align-items:stretch;min-width:0;margin:0 calc(-1 * var(--pi));}
.az-item{display:flex;align-items:center;padding:0 var(--pi);}
.az-haut{position:relative;font-family:'Jost',sans-serif;font-weight:400;font-size:11.5px;letter-spacing:2.6px;text-transform:uppercase;color:var(--brun);
  white-space:nowrap;padding:6px 0;opacity:.86;transition:opacity .3s ease,color .3s ease;}
.az-haut::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--or);transition:width .45s cubic-bezier(.16,1,.3,1);}
.az-haut:hover,.az-haut.actif,.az-item.a-etage:hover>.az-haut,.az-item:focus-within>.az-haut{opacity:1;}
.az-haut:hover::after,.az-haut.actif::after,.az-item.a-etage:hover>.az-haut::after,.az-item:focus-within>.az-haut::after{width:100%;}

/* ── 2e étage du menu (14 octobre) : au survol d'un mot (ou au clavier), une bande s'ouvre sous l'en-tête, sur toute la largeur.
   Ses liens commencent sous le mot survolé (socle.js règle --x). Elle reste ouverte tant que la souris est sur le mot ou sur
   la bande ; en partant, elle attend un court instant (on peut passer d'un mot à la bande sans qu'elle se ferme). ── */
.az-etage{position:absolute;left:0;right:0;top:100%;background:var(--creme);          /* plein : rien ne transparaît dessous */
  border-top:1px solid rgba(200,169,110,.28);border-bottom:1px solid rgba(200,169,110,.28);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .22s ease .14s,transform .3s ease .14s,visibility 0s linear .36s;}
.az-item.a-etage:hover>.az-etage,.az-item:focus-within>.az-etage,.az-item.ouvert>.az-etage{opacity:1;visibility:visible;transform:none;
  transition:opacity .28s ease .07s,transform .4s cubic-bezier(.16,1,.3,1) .07s,visibility 0s linear .07s;}
.az-item:focus-within>.az-etage{transition-delay:0s;}
.az-etage-in{--g:clamp(30px,2.8vw,44px);display:flex;align-items:center;gap:var(--g);height:56px;
  padding:0 clamp(28px,4.4vw,64px);padding-left:var(--x,clamp(28px,4.4vw,64px));white-space:nowrap;}
.az-etage a{position:relative;font-family:'Cormorant Garamond',serif;font-weight:400;font-size:19.5px;letter-spacing:.3px;line-height:1;
  color:var(--brun);opacity:.9;padding:5px 0;transition:color .3s ease,opacity .3s ease;}
.az-etage a::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--or);transition:width .45s cubic-bezier(.16,1,.3,1);}
.az-etage a:hover,.az-etage a:focus-visible{opacity:1;color:var(--or-fonce);}
.az-etage a:hover::after,.az-etage a:focus-visible::after{width:100%;}
/* entre deux liens : un point doré, comme celui du logo */
.az-etage a+a::before{content:'';position:absolute;left:calc(var(--g) / -2 - 2px);top:50%;width:4px;height:4px;margin-top:-1px;border-radius:50%;background:rgba(200,169,110,.75);}
/* Livre, Formation : pas de lien, une information */
.az-info p{display:flex;align-items:baseline;font-family:'Cormorant Garamond',serif;font-weight:400;font-size:19.5px;letter-spacing:.3px;line-height:1;color:var(--brun);}
.az-info-texte{font-style:italic;color:var(--gris);}
.az-info-date{font-family:'Jost',sans-serif;font-weight:400;font-size:10.5px;letter-spacing:2.4px;text-transform:uppercase;color:var(--or-fonce);}
.az-info-texte::before,.az-info-date::before{content:'';display:inline-block;width:4px;height:4px;border-radius:50%;background:rgba(200,169,110,.75);
  margin:0 18px;vertical-align:middle;position:relative;top:-2px;}
/* un lien de l'étage vient d'être choisi (socle.js) : l'étage se referme */
.az-nav .az-item.a-etage.clos>.az-etage{opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s linear .2s;}
.az-droite{margin-left:auto;display:flex;align-items:center;gap:clamp(18px,2vw,28px);}
.az-langue{font-family:'Jost',sans-serif;font-weight:400;font-size:11.5px;letter-spacing:2px;text-transform:uppercase;color:var(--gris);white-space:nowrap;}
.az-langue b{font-weight:400;color:var(--brun);}
.az-langue a:hover{color:var(--brun);}
.az-langue i{font-style:normal;padding:0 6px;color:rgba(138,125,106,.6);}
.az-panier{position:relative;display:block;width:22px;height:24px;color:var(--brun);}
.az-panier svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.3;}
.az-panier:hover{color:var(--or-fonce);}
.az-panier .az-compte{position:absolute;right:-9px;top:-6px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--or);color:#fff;
  font-family:'Jost',sans-serif;font-weight:400;font-size:10px;line-height:17px;text-align:center;display:none;}
.az-panier.plein .az-compte{display:block;}

/* en-tête sombre (pages sur fond noir : <body data-entete-sombre>) */
.az-entete.sombre{background:#000;border-bottom-color:rgba(200,169,110,.2);}
.az-entete.sombre .az-haut,.az-entete.sombre .az-panier{color:var(--creme);}
.az-entete.sombre .az-panier:hover{color:var(--or);}
.az-entete.sombre .az-langue{color:rgba(232,213,170,.55);}
.az-entete.sombre .az-langue b,.az-entete.sombre .az-langue a:hover{color:var(--creme);}
.az-entete .az-logo{transition:color .5s ease;}
/* logo doré sur l'en-tête noir, comme sur l'accueil */
.az-entete.sombre .az-logo{color:#cea24a;}
/* PAGES SOMBRES (<body data-entete-transparent data-entete-sombre data-entete-nuit>, socle.js) : en haut de page l'en-tête est
   transparent mais garde son texte clair (classes transparent + sombre ensemble) */
.az-entete.transparent.sombre{background:rgba(0,0,0,0);border-bottom-color:rgba(200,169,110,0);}
/* l'étage sous un en-tête noir : noir aussi */
.az-entete.sombre .az-etage{background:#000;border-color:rgba(200,169,110,.2);}
.az-entete.sombre .az-etage a,.az-entete.sombre .az-info p{color:var(--creme);}
.az-entete.sombre .az-etage a:hover,.az-entete.sombre .az-etage a:focus-visible{color:var(--or);}
.az-entete.sombre .az-info-texte{color:rgba(232,213,170,.6);}
.az-entete.sombre .az-info-date{color:var(--or);}

/* v3 : en-tête transparent (dans un hero) : son étage n'a pas de fond non plus, rien ne change de couleur au survol */
.az-entete.transparent .az-etage{background:transparent;border-color:transparent;}
/* v3 : sans fond, les mots de l'étage gardent une ombre douce pour rester lisibles sur une photo claire */
.az-entete.transparent.sombre .az-etage a,.az-entete.transparent.sombre .az-info p{text-shadow:0 1px 2px rgba(0,0,0,.55),0 0 16px rgba(0,0,0,.55);}
.az-entete.transparent:not(.sombre) .az-etage a,.az-entete.transparent:not(.sombre) .az-info p{text-shadow:0 0 12px rgba(247,243,236,.9);}
/* v3 : couleur posée sans fondu (socle.js v9), le temps de deux images : seuls la glissade et l'apparition restent animées */
.az-entete.sans-fondu{transition-property:opacity,transform !important;}
.az-entete.sans-fondu *,.az-entete.sans-fondu *::before,.az-entete.sans-fondu *::after{transition:none !important;}

/* le menu se cache en descendant : l'étage part avec lui, tout de suite */
.az-entete.replie .az-item.a-etage>.az-etage{opacity:0;visibility:hidden;transition:none;}
@media (prefers-reduced-motion:reduce){ .az-etage{transform:none;} }

/* écrans de bureau étroits (petits portables, tablettes en paysage) */
@media (max-width:1180px){
  .az-nav{--pi:8px;} .az-haut{letter-spacing:1.8px;font-size:11px;}
  .az-logo{font-size:22px;letter-spacing:2px;}
  .az-etage-in{--g:26px;} .az-etage a,.az-info p{font-size:18px;}
}