/* =========================================================================
   EN-TÊTE FIXE (2 rangées)
   L'en-tête entier est fixe et se déplace en translateY : à 0 les deux
   rangées sont visibles, à -(hauteur rangée 1) la rangée 1 sort par le haut
   et la rangée 2 reste collée. Aucun décalage de mise en page.
   ========================================================================= */
.entete {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transform: translateY(0);
  transition: transform .25s ease;
  will-change: transform;
}
.entete.escamote { transform: translateY(calc(-1 * var(--hauteur-rangee-1))); }

/* -------------------------------------------------------------------------
   LA BARRE D'ADMINISTRATION DE WORDPRESS

   Elle est fixe elle aussi, et en haut de l'écran : sans ces trois règles,
   notre en-tête se glisse DESSOUS. Et comme WordPress décale tout le document
   de la hauteur de sa barre, la compensation de `body` part 32 px trop bas :
   une bande blanche s'ouvre entre la rangée 2 et le début du contenu.

   Ces règles ne concernent qu'un utilisateur connecté à l'administration.
   Pour un lecteur, `body` ne porte pas `admin-bar` et rien ne s'applique.
   Le panneau burger est fixe lui aussi : il se cale sur la même hauteur,
   sinon son bandeau noir passe derrière la barre d'administration.

   ⚠ Les seuils sont ceux de WordPress, pas les nôtres : 32 px au-delà de
     782 px, 46 px en dessous. Sous 600 px, WordPress cesse de fixer sa barre
     mais garde les 46 px de décalage : elle recouvrait la rangée du logo, et
     un vide de 46 px s'ouvrait sous l'en-tête (Ludovic, 30/09). On la garde
     donc fixe à toutes les largeurs.
   ---------------------------------------------------------------------- */
body.admin-bar .entete,
body.admin-bar .burger { top: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar .entete,
  body.admin-bar .burger { top: 46px; }
}
@media screen and (max-width: 600px) {
  body.admin-bar #wpadminbar { position: fixed; }
}

/* ELLE S'ESCAMOTE AVEC LA RANGÉE 1 (Ludovic, 30/09) : on descend, la barre
   d'administration sort par le haut et l'en-tête remonte d'autant ; on
   remonte, les deux reviennent. `body.entete-escamote` est posé par
   js/entete.js en même temps que `.escamote`. */
body.admin-bar { --hauteur-barre-admin: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar { --hauteur-barre-admin: 46px; }
}
@media screen {
  #wpadminbar { transition: transform .25s ease; }
  body.admin-bar.entete-escamote #wpadminbar { transform: translateY(-100%); }
  body.admin-bar.entete-escamote .entete {
    transform: translateY(calc(-1 * (var(--hauteur-rangee-1) + var(--hauteur-barre-admin))));
  }
  body.admin-bar.entete-escamote .burger { top: 0; }
}

/* -------------------------------------------------------------------------
   LES DEUX RANGÉES — planche 3b au bureau, 2b en tablette et au téléphone
   (Ludovic, 30/09 ; canevas « Design Antithèse 2 », page « En-tête »,
   recopiées dans outils/design-entete/planches/). Simplon 500 à 15 px dans
   les deux rangées, sans points, des icônes au lieu du « ☰ » et de l'émoji.
   ---------------------------------------------------------------------- */
.entete-r1 { background: var(--gris-noir); color: var(--gris-clair-sur-sombre); }
.entete-r1 .conteneur { display: flex; align-items: center; justify-content: space-between; height: var(--hauteur-rangee-1); }
/* LE LOGO — un SVG depuis le 20/08, à la place du texte « ANTI|THÈSE » qui
   tenait sa place. La hauteur est fixée et la largeur suit : un SVG sans
   dimension prend celle de son conteneur, et le logo remplirait la barre. */
.logo-lien { display: inline-flex; align-items: center; }
.logo { height: 26px; width: auto; display: block; }
.entete-actions { display: flex; align-items: center; gap: 22px; }
.entete-compte {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--taille-barre); font-weight: 500;
  color: var(--gris-clair-sur-sombre);
}
/* L'icône est celle du téléphone : au-dessus, le mot suffit. */
.entete-compte .icone-compte { display: none; }
/* Le bouton de la barre est plus court que les autres : 40 px. */
.entete-actions .bouton { min-height: 40px; padding: 0 22px; font-size: var(--taille-barre); }

.entete-r2 {
  background: var(--gris-noir-2); color: var(--gris-clair-sur-sombre); border-top: 1px solid #2f2f2f;
  /* Le fondu du manchon se dégrade vers le fond de la rangée, pas vers le
     blanc de la page. */
  --fond-manchon: var(--gris-noir-2);
  --fond-manchon-nul: rgb(30 30 30 / 0);
}
/* AU BUREAU, TROIS COLONNES : le groupe de gauche, les quatre entrées, et un
   vide. Les deux colonnes de côté se partagent la place qui reste : les
   entrées tombent au centre de la barre — donc de la fenêtre — quelle que soit
   la largeur du groupe de gauche, et si la place vient à manquer, elles
   glissent à droite au lieu de passer sur « Rechercher ». Le conteneur est le
   repère du menu des dossiers. */
.entete-r2 .conteneur {
  position: relative;
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-24);
  height: calc(var(--hauteur-rangee-2) - 1px); /* le filet du dessus compte dans la rangée */
  font-size: var(--taille-barre); font-weight: 500;
  white-space: nowrap;
}
.entete-r2 .barre { width: 1px; height: 18px; background: #3a3a3a; display: inline-block; }

/* Groupe de gauche : Menu, Rechercher, puis le filet qui clôt le groupe. */
.r2-gauche { display: flex; align-items: center; gap: var(--space-24); justify-self: start; }

/* Ce qui se clique dans la rangée — lien ou bouton — a la même allure, et
   une cible de 44 px. */
.r2-lien,
.r2-bouton-menu {
  font: inherit;
  color: var(--gris-clair-sur-sombre);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px;
}
.r2-icone { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; }
.r2-recherche .r2-icone { width: 15px; height: 15px; }

/* Les quatre entrées : la bande d'un manchon, centrée au bureau. Sans fondu
   ni espace de fin tant qu'elle tient, pour rester au centre exact. */
.r2-nav { grid-column: 2; }
.entete-r2 .manchon-barre { column-gap: 36px; }
.entete-r2 .manchon-barre::after { content: none; }
.entete-r2 .manchon-deborde .manchon-barre::after { content: ""; }

/* Le chevron pivote quand le menu est ouvert — même durée que l'en-tête. */
.r2-chevron {
  width: 13px; height: 13px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  transition: transform .25s ease;
}
.r2-lien[aria-expanded="true"] .r2-chevron { transform: rotate(180deg); }

/* Le panneau, sous « Dossiers » : il est posé par js/entete.js, parce qu'il
   vit hors de la bande — une bande qui défile rogne ce qui dépasse d'elle. */
.menu-dossiers {
  position: absolute;
  top: 100%;
  left: 0;
  width: 300px;
  max-width: 100%;
  background: var(--gris-noir-2);
  border: 1px solid #3a3a3a;
  border-radius: var(--rayon);
  box-shadow: 0 8px 20px rgba(17, 17, 17, .45); /* --gris-noir en transparence */
  padding: 6px 0;
  z-index: 60;
}
.menu-dossiers[hidden] { display: none; }
.menu-dossiers a {
  display: flex; align-items: center; gap: 10px;
  min-height: 48px;              /* hauteur de clic confortable */
  padding: 0 16px;
  color: var(--gris-clair-sur-sombre);
  font-size: var(--taille-barre);
  font-weight: 500;
  white-space: nowrap;
}
.menu-dossiers a:hover { background: var(--gris-fonce); }
.menu-dossiers .filet-menu { height: 1px; background: #3a3a3a; margin: 6px 0; }
.carre-chaud { display: inline-block; flex: none; width: 7px; height: 7px; background: var(--gris-boite); }

.r2-lien:hover,
.r2-bouton-menu:hover,
.entete-compte:hover,
.entete-r2 .manchon-fondu:hover { color: #fff; }

/* TABLETTE (2b) — les quatre entrées suivent le filet sous leur nom court :
   « Édition », « Entretiens ». Elles tiennent à 768 ; plus étroit, la bande
   défile et le fondu le dit (js/manchon.js mesure, pas la largeur). */
@media (max-width: 991px) {
  .entete-r2 .conteneur { display: flex; align-items: center; }
  .r2-nav { flex: 1 1 auto; align-self: stretch; display: flex; align-items: center; }
  .r2-long { display: none; }
  /* La bande prend toute la place qui reste : ajustée à ses entrées, WebKit
     la mesurait plus large que sa boîte et posait le fondu sans suite. */
  .entete-r2 .manchon-barre { flex: 1 1 auto; column-gap: var(--space-32); }
  .entete-r2 .manchon-barre::after { content: ""; }
  /* Le fondu déborde un peu dans la marge : son chevron tombe au bord. */
  .entete-r2 .manchon-fondu { width: 64px; right: -12px; padding-right: 15px; }
  .entete-r2 .manchon-fondu-debut { right: auto; left: 0; padding-right: 0; padding-left: 3px; }
  .entete-r2 .manchon-fondu .r2-icone { width: 14px; height: 14px; stroke-width: 1.8; }
}

/* TÉLÉPHONE (2b) — « Se connecter » et « Menu » en icône, le libellé gardé
   pour un lecteur d'écran ; « Rechercher » n'est plus qu'au burger ; 28 px
   entre les entrées, la suite sous le fondu. */
@media (max-width: 767px) {
  .logo { height: 22px; }
  .entete-actions { gap: 8px; }
  .entete-compte { width: 44px; height: 44px; }
  .entete-compte .icone-compte { display: block; width: 22px; height: 22px; flex-basis: 22px; }
  .entete-compte-libelle,
  .r2-libelle-menu {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .entete-actions .bouton { padding: 0 16px; }
  .r2-gauche { gap: 12px; }
  .r2-recherche { display: none; }
  .r2-bouton-menu { width: 40px; min-height: 40px; height: 40px; justify-content: center; margin-left: -10px; }
  .r2-icone-menu { width: 18px; height: 18px; }
  .entete-r2 .manchon-barre { column-gap: 28px; }
}


/* =========================================================================
   MENU BURGER
   Il porte toute la navigation, à toutes les largeurs, et la profondeur.
   Le panneau glisse depuis la gauche ; il n'apparaît jamais en fondu, un
   mouvement dit d'où vient l'objet et où il retournera.
   Ses règles de petit écran sont écrites ICI, à la fin du fichier, et non
   dans responsive.css : aucun autre fichier ne stylise .burger, le composant
   porte donc tout son comportement au même endroit.
   Le bouton d'ouverture, `.r2-bouton-menu`, a l'allure des entrées de la
   rangée 2 : il est écrit avec elles, plus haut.
   ========================================================================= */

.burger-voile {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0, 0, 0, .45);
}

.burger {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 100;
  width: var(--largeur-burger);
  max-width: 100%;
  background: var(--gris-fond);
  display: flex;
  flex-direction: column;
  /* Le panneau défile seul, sans entraîner la page derrière lui. */
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: burger-entre .22s ease-out;
}
/* ⚠ Indispensable : l'attribut hidden pose display:none via la feuille du
   navigateur, dont la priorité est plus faible que celle d'une règle d'auteur.
   Sans cette ligne, le display:flex ci-dessus l'emporte et le panneau reste
   affiché par-dessus la page alors qu'il se croit fermé. */
.burger[hidden] { display: none; }

@keyframes burger-entre { from { transform: translateX(-100%); } to { transform: translateX(0); } }

/* --- Bandeau noir, à la hauteur de la rangée 1 de l'en-tête -------------- */
.burger-entete {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--hauteur-rangee-1);
  flex: 0 0 var(--hauteur-rangee-1);
  padding: 0 var(--padding-burger);
  background: var(--gris-noir);
  color: var(--gris-clair-sur-sombre);
  position: sticky; top: 0; z-index: 1;
}
.burger-fermer {
  font: inherit;
  font-size: var(--taille-meta);
  color: inherit;
  background: none; border: 0; padding: 0;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
}
.burger-fermer span { font-size: 15px; }

.burger-corps { padding: 0 var(--padding-burger) 30px; }

/* --- Rythme : un filet entre chaque bloc, jamais avant le premier -------- */
.burger-bloc { padding: var(--espace-burger-bloc) 0; }
.burger-bloc + .burger-bloc { border-top: 1px solid var(--gris-filet); }

/* --- Les deux décisions du lecteur --------------------------------------- */
/* Un bouton contre chaque bord : « S'abonner » ancré à gauche, « Se connecter »
   à droite. L'espace entre les deux n'est pas une valeur à régler, c'est ce
   qui reste — la ligne tient donc à n'importe quelle largeur de panneau. */
.burger-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.burger-cta .bouton { padding: 12px 26px; }
.burger-compte {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--taille-rubrique-burger);
}
.icone-compte {
  width: 19px; height: 19px; flex: 0 0 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}

/* --- Titres et entrées ---------------------------------------------------- */
/* `.burger-tout` habillait « Tous nos contenus », retiré le 01/09 : la page
   n'existe plus, elle est devenue la recherche. */
.burger-contenus { display: flex; flex-direction: column; }
.burger-entree {
  font-family: var(--police-meta); /* la navigation parle en police d'interface, pas en police de titre (08/09) */
  font-size: var(--taille-entree-burger);
  font-weight: 700;
  padding: 11px var(--padding-burger);
  /* Le padding latéral déborde du corps pour que le surlignage de l'entrée
     courante file jusqu'aux deux bords du panneau, comme dans la maquette. */
  margin: 0 calc(var(--padding-burger) * -1);
  border-left: var(--largeur-marque-active) solid transparent;
}
/* La page courante : fond gris et filet rouge. Le rouge ne sert qu'à ça et
   aux boutons d'action — ici il dit « vous êtes là », pas « cliquez ». */
.burger-entree.est-actif {
  background: var(--gris-fond-clair);
  border-left-color: var(--accent);
}

/* Les formats de faible volume tiennent sur deux lignes partagées : leur
   donner à chacun une ligne pleine leur prêterait un poids qu'ils n'ont pas. */
/* Ces formats tiennent sur une seule liste qui se replie d'elle-même : à
   largeur confortable ils logent sur une ligne, et dès que la place manque
   c'est le dernier qui descend, pas une répartition décidée d'avance.
   Le séparateur est posé en ::after et non entre deux éléments : il reste
   ainsi collé au mot qui le précède, et ne peut jamais ouvrir une ligne. */
.burger-inline {
  display: flex;
  flex-wrap: wrap;
  row-gap: 7px;
  font-size: var(--taille-rubrique-burger);
  color: var(--gris-texte-secondaire);
  margin-top: 18px;
}
.burger-inline a:not(:last-child)::after {
  content: "·";
  margin: 0 9px;
  color: var(--gris-filet);
}

/* --- Rubriques, repliables ------------------------------------------------ */
.burger-pliable {
  font-family: var(--police-meta);
  font-size: var(--taille-entree-burger);
  font-weight: 700;
  color: inherit;
  background: none; border: 0; padding: 0;
  cursor: pointer;
  display: flex; align-items: center; gap: 9px;
  width: 100%;
}
/* Le chevron pointe vers le bas au repos et se retourne à l'ouverture :
   l'état est porté par aria-expanded, que le CSS lit comme le script. */
.burger-pliable .chevron { font-size: 13px; transition: transform .18s ease; }
.burger-pliable[aria-expanded="true"] .chevron { transform: rotate(180deg); }

.burger-liste { display: flex; flex-direction: column; margin-top: 14px; }
.burger-liste a { font-size: var(--taille-rubrique-burger); padding: 8px 0; }
.burger-liste[hidden] { display: none; }

/* --- Recherche : un champ, pas un lien ------------------------------------ */
.burger-recherche {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid var(--gris-texte);
  border-radius: var(--rayon);
  padding: 15px;
  font-size: 17px;
}

/* --- Groupes secondaires --------------------------------------------------- */
.burger-groupe { display: flex; flex-direction: column; }
.burger-groupe-titre {
  font-size: var(--taille-meta);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gris-texte-secondaire);
  margin-bottom: 14px;
}
.burger-groupe a { font-size: var(--taille-rubrique-burger); padding: 7px 0; }
.burger-groupe .bouton {
  align-self: flex-start;
  margin-top: 14px;
  padding: 9px 16px;
}

/* --- Pied du panneau -------------------------------------------------------- */
.burger-legal {
  font-size: var(--taille-meta);
  color: var(--gris-texte-secondaire);
  line-height: 2;
}
.burger-legal .sep { margin: 0 7px; color: var(--gris-filet); }
.burger-pied .reseaux { margin-top: 18px; margin-left: -7px; } /* le logo s'aligne au texte, pas sa cible */

/* Sous cette largeur, le panneau prend l'écran entier : viser un panneau
   étroit au pouce est pénible, et le public visé est âgé. */
@media (max-width: 620px) {
  .burger { width: 100%; }
  .burger-voile { display: none; }
}

/* -------------------------------------------------------------------------
   SURVOLS
   Tous portés par .burger : le reste de la maquette n'en prend aucun, et la
   page d'accueil reste donc strictement inchangée.
   Deux vocabulaires, jamais mélangés : ce qui est une DESTINATION change de
   fond ou se souligne ; ce qui est une ACTION fonce. Rien ne bouge de place
   au survol — un déplacement au passage de la souris est hostile au public
   visé, qui vise déjà difficilement.
   ------------------------------------------------------------------------- */

.burger a,
.burger button { transition: background-color var(--duree-survol) ease,
                             color var(--duree-survol) ease,
                             border-color var(--duree-survol) ease; }

/* Les grandes entrées prennent le fond gris : le survol annonce l'état actif,
   dont il ne se distingue que par l'absence du filet rouge. */
.burger-entree:hover { background: var(--gris-fond-clair); }

.burger-liste a:hover,
.burger-groupe a:not(.bouton):hover,
.burger-compte:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Les liens déjà gris n'ont pas de gris plus sombre à prendre : ils passent
   au noir du texte courant. Le soulignement leur est refusé, il déborderait
   sur le séparateur posé en ::after. */
.burger-inline a:hover,
.burger-legal a:hover { color: var(--gris-texte); }

.burger-pliable:hover { color: var(--gris-texte-secondaire); }

.burger-recherche:hover { background: var(--gris-fond-clair); }

.burger .bouton-plein:hover   { background: var(--accent-fonce); }
.burger .bouton-contour:hover { background: var(--gris-texte); color: var(--gris-fond); }

.burger-fermer:hover { color: #fff; }