/* ============================================================
   LA MARQUE : en-tete et pied communs aux trois sites publics
   Magazine, Radio, Academie.

   Ces trois sites sont l'image d'une meme entreprise. Ce qui touche
   a la marque (le sceau, le titre, la barre de navigation, le pied)
   doit etre identique partout, au pixel. Le reste appartient a
   chaque site.

   SOURCE UNIQUE : ce fichier.
   Il est COPIE dans les trois sites par `poser-la-marque.py`, jamais
   modifie sur place. Une retouche se fait ici, puis on relance le
   script : les trois sites suivent.

   Les couleurs viennent des variables du site (--or, --or-clair,
   --texte, --texte-doux) : la charte reste declaree une fois chez lui.
   ============================================================ */

/* ---------- l'en-tete ---------- */
header{
  display:flex;align-items:center;justify-content:space-between;
  padding:26px clamp(28px,5vw,80px);position:relative;z-index:5;
}
.marque{display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit}
.sceau{
  width:54px;height:54px;border-radius:50%;flex:none;
  border:1px solid rgba(var(--or-rgb),.5);
  background:radial-gradient(circle at 32% 26%,var(--sceau-fond) 0%,var(--noir) 72%);
  display:grid;place-items:center;
}
.phenix{
  display:block;width:27px;height:39px;
  background:linear-gradient(155deg,var(--or-pale) 0%,var(--or) 55%,var(--or-brule) 100%);
  -webkit-mask:var(--phenix) center / contain no-repeat;
  mask:var(--phenix) center / contain no-repeat;
}
.marque b{font:700 16px/1 "Segoe UI",sans-serif;letter-spacing:3.4px;text-transform:uppercase}
.marque b em{
  font:italic 400 17px/1 Georgia,serif;letter-spacing:0;text-transform:none;margin-right:1px;
}
.marque i{
  display:block;font:italic 11px/1.4 Georgia,serif;color:var(--texte-doux);
  letter-spacing:.6px;margin-top:5px;
}
/* Le numero de version sous le logo a ete RETIRE le 2026-08-02, une fois Radio et
   Magazine valides pour la production : c'etait un temoin de chantier, il n'avait
   rien a faire sur des sites publics qui vendent. Le champ `version` reste dans
   sites.json et dans la balise meta (invisible), et il pilote toujours les `?v=`
   des scripts. Pour le reafficher : remettre la ligne .version dans entete.html,
   ce bloc de style, et relancer poser-la-marque.py + poser-le-style.py. */
.marque i strong{
  font:italic 400 21px/1 Georgia,serif;letter-spacing:.3px;
  background:linear-gradient(100deg,var(--or-pale),var(--or) 52%,var(--or-fonce));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- la barre de navigation ---------- */
nav{display:flex;align-items:center;gap:34px}
nav a{
  color:rgba(var(--texte-rgb),.75);text-decoration:none;
  font-size:12.5px;letter-spacing:2.4px;text-transform:uppercase;
  padding:6px 0;position:relative;transition:color .25s ease;
}
nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--or);transition:right .3s ease;
}
nav a:hover,nav a.actif{color:var(--blanc)}
nav a.actif::after{right:0}
nav a:hover::after{right:0}
.cta-nav{
  /* En pilule comme tous les autres boutons : il etait le seul carre. */
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 22px;border:1px solid rgba(var(--or-rgb),.5);border-radius:999px;
  color:var(--or-clair);font-size:11.5px;letter-spacing:2.2px;text-transform:uppercase;
  text-decoration:none;transition:all .25s ease;
}
.cta-nav:hover{background:rgba(var(--or-rgb),.12);border-color:var(--or)}
.cta-nav::after{display:none}

/* ---------- le bouton du menu, sur telephone ---------- */
/* 37 px comme les autres boutons. C'est sous la cible tactile de 44 px
   habituellement recommandee : signale a Alex, sa decision. */
.bouton-menu{
  display:none;width:37px;height:37px;flex:none;padding:12px 11px;cursor:pointer;
  background:none;border:1px solid rgba(var(--or-rgb),.42);border-radius:3px;
  flex-direction:column;justify-content:space-between;
  /* Sans ce z-index, un panneau lateral passe par-dessus le bouton : la croix
     reste invisible et il n'y a plus rien a toucher pour fermer. */
  position:relative;z-index:70;
}
.bouton-menu span{
  display:block;height:2px;width:100%;border-radius:2px;background:var(--or-clair);
  transition:transform .28s ease,opacity .2s ease;
}
/* LE CONTRAT D'OUVERTURE, et pourquoi il en accepte trois.

   Les trois sites signalent l'ouverture du menu de trois facons differentes, chacune
   ecrite avant ce socle :
     - Magazine : la classe `ouvert` sur le <nav> et sur le bouton ;
     - Academie : la classe `menu-ouvert` sur le <body> ;
     - Radio    : `aria-expanded="true"` sur le bouton.

   Le socle les accepte TOUTES les trois. Il aurait ete plus court d'en imposer une,
   mais ce socle est arrive apres les sites : imposer aurait casse deux menus sur
   trois, et c'est exactement ce qui est arrive a l'Academie, 19 pages devenues
   injoignables au doigt sans que rien ne le signale.

   Un site neuf prend la premiere : classe `ouvert` sur le nav et sur le bouton.

   La translation vaut 4,5 px et pas 7 : elle depend de la HAUTEUR du bouton, passe
   de 44 a 37. Mesure a l'ecran, traits au repos a 14, 18,5 et 23 du haut du bouton.
   Avec 7, les deux traits se croisaient 5 px trop loin et la croix etait fausse. */
.bouton-menu.ouvert span:nth-child(1),
.bouton-menu[aria-expanded="true"] span:nth-child(1),
body.menu-ouvert .bouton-menu span:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
.bouton-menu.ouvert span:nth-child(2),
.bouton-menu[aria-expanded="true"] span:nth-child(2),
body.menu-ouvert .bouton-menu span:nth-child(2){opacity:0}
.bouton-menu.ouvert span:nth-child(3),
.bouton-menu[aria-expanded="true"] span:nth-child(3),
body.menu-ouvert .bouton-menu span:nth-child(3){transform:translateY(-4.5px) rotate(-45deg)}

/* ---------- les boutons ---------- */
/* 37 px de haut partout, decide par Alex le 2026-08-02. C'est la mesure du bouton
   d'appel de la barre de navigation, la plus fine des trois sites : tout s'aligne
   dessus. Ils sortaient a 44, 46, 48 et 51 avant l'unification. */
.bouton-or,.bouton-vide,.cta-nav{min-height:37px;line-height:1;box-sizing:border-box}
/* position:relative et overflow:hidden ne servent a rien tant que le bouton n'a pas
   d'effet interne, mais ils protegent ceux qui en ont un : sans eux, un reflet anime
   se cale sur le premier ancetre positionne et balaie la page. Mesure du 2026-08-02
   sur l'Academie : un bouton de 198 px avec un reflet de 810 px. Ils restent ici pour
   que le socle ne casse jamais un effet qu'un site ajoute. */
.bouton-or{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  padding:0 30px;border:none;border-radius:999px;cursor:pointer;text-decoration:none;
  background:linear-gradient(120deg,var(--or-tendre),var(--or) 42%,var(--or-bronze) 78%,var(--or-miel));
  color:var(--sur-or);font:600 13.5px/1 "Segoe UI",sans-serif;letter-spacing:1.2px;
  box-shadow:0 12px 30px rgba(var(--ombre-or-rgb),.3);transition:transform .2s ease;
}
.bouton-or:hover{transform:translateY(-2px)}
.bouton-or svg{width:14px;height:14px;fill:var(--sur-or)}
.bouton-vide{
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  padding:0 30px;border:1px solid rgba(var(--or-rgb),.5);border-radius:999px;
  color:var(--or-clair);text-decoration:none;
  font-size:12px;letter-spacing:2.6px;text-transform:uppercase;transition:all .3s ease;
}
.bouton-vide:hover{background:rgba(var(--or-rgb),.12);border-color:var(--or);color:var(--blanc)}

/* ---------- le retour en haut ---------- */
/* Il reste visible JUSQU'EN BAS : c'est au pied de s'ecarter, pas a la fleche de
   disparaitre. Elle sert encore une fois le bas atteint. */
.remonter{
  position:fixed;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);z-index:20;
  width:37px;height:37px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(var(--or-rgb),.45);background:rgba(var(--noir-6-rgb),.86);
  backdrop-filter:blur(6px);color:var(--or-clair);
  display:grid;place-items:center;
  opacity:0;pointer-events:none;transform:translateY(8px);
  transition:opacity .3s ease,transform .3s ease;
}
.remonter.visible{opacity:1;pointer-events:auto;transform:none}
.remonter:hover{border-color:var(--or)}
.remonter svg{width:18px;height:18px;fill:currentColor}

/* ---------- le pied ---------- */
.pied{
  background:var(--noir-profond);border-top:1px solid rgba(var(--clair-rgb),.07);
  padding:clamp(48px,6vw,68px) clamp(28px,5vw,80px) 0;
}
.pied-haut{
  display:grid;gap:clamp(28px,4vw,54px);max-width:1180px;margin:0 auto;
  /* Le nombre de colonnes vient du site : le magazine en a 3, l'Academie 4. */
  grid-template-columns:1.4fr repeat(var(--colonnes,3),1fr);
}
.pied .marque{margin-bottom:18px}
.pied-mot{font-size:13.4px;line-height:1.72;color:var(--texte-gris);max-width:290px}
.pied-col h4{
  font-size:10.5px;letter-spacing:2.6px;text-transform:uppercase;color:var(--or);
  margin-bottom:15px;font-weight:600;
}
.pied-col a{
  display:block;padding:5px 0;color:var(--texte-doux);text-decoration:none;font-size:13.4px;
  transition:color .25s ease;
}
.pied-col a:hover{color:var(--blanc)}
.pied-col a.externe::after{content:" ↗";color:rgba(var(--or-rgb),.7);font-size:11px}
/* 74 px a droite : la place de la fleche de remontee. */
.pied-bas{
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  max-width:1180px;margin:clamp(36px,4vw,52px) auto 0;
  padding:22px 74px 40px 0;border-top:1px solid rgba(var(--clair-rgb),.06);
  font-size:11.5px;letter-spacing:1.4px;color:var(--texte-sourd);
}
.pied-bas .signature{color:var(--texte-doux)}
.pied-bas .legal{display:inline-flex;gap:18px;flex-wrap:wrap}
.pied-bas .signature b{color:var(--or-clair);font-weight:400}
/* Sans cette regle, le lien du bas sort en bleu souligne : la couleur n'est
   heritee que dans les colonnes. */
.pied-bas a{color:inherit;text-decoration:none;transition:color .25s ease}
.pied-bas a:hover{color:var(--or-clair)}

@media(max-width:900px){
  header{position:relative}
  .bouton-menu{display:flex}
  /* La barre s'ouvre en panneau sous l'en-tete, au lieu de disparaitre : sinon le
     lecteur n'a plus acces a rien au doigt. */
  nav{
    position:absolute;left:0;right:0;top:100%;z-index:6;
    display:none;flex-direction:column;align-items:stretch;gap:0;
    padding:8px clamp(20px,5vw,36px) 18px;
    background:var(--noir-2,var(--noir-encre));border-bottom:1px solid rgba(var(--or-rgb),.28);
    box-shadow:0 26px 44px rgba(var(--sombre-rgb),.6);
  }
  /* Les trois signaux d'ouverture, voir LE CONTRAT plus haut. */
  nav.ouvert,
  body.menu-ouvert nav,
  .bouton-menu[aria-expanded="true"] ~ nav{display:flex}
  nav a{padding:14px 0;font-size:13px;border-bottom:1px solid rgba(var(--clair-rgb),.06)}
  nav a::after{display:none}
  nav a:last-child{border-bottom:none}
  .cta-nav{margin-top:14px;text-align:center;border-radius:999px}
  .pied-haut{grid-template-columns:1fr 1fr}
}
/* Les paliers du pied. Un pied a quatre colonnes se serre bien avant 900 px : a
   1100 la colonne tombe a 175 px et trois libelles passent sur deux lignes. Le socle
   n'avait que deux paliers, hérités d'un pied a trois colonnes. */
@media(max-width:1300px){
  .pied-haut{grid-template-columns:1.2fr repeat(var(--colonnes,3),1fr);gap:clamp(22px,2.4vw,34px)}
}
@media(max-width:1100px){
  .pied-haut{grid-template-columns:repeat(var(--colonnes,3),1fr)}
  /* Le bloc de la marque passe sur toute la largeur, au-dessus des colonnes. */
  .pied-haut>:first-child{grid-column:1/-1}
  .pied-mot{max-width:none}
}
@media(max-width:560px){
  .pied-haut{grid-template-columns:1fr}
}