/**
 * En-tête et navigation principale — CDOS 30
 *
 * Remplace UberMenu, Max Mega Menu et Mobile Menu.
 *
 * La maquette d'origine tient en trois bandes : les réseaux sociaux
 * alignés à droite, un filet, puis la barre de menu que le logo coupe
 * en son milieu en débordant vers le bas. Sous 1150 px, tout se replie
 * en une bande marine avec le logo réduit au centre.
 */

:root {
  /*
   * Point de bascule barre horizontale / menu déroulant.
   *
   * 1150 et non les 992 de la maquette, parce que la barre ne tient pas
   * à 992 : ses huit entrées et le bloc du logo demandent 1110 px au
   * corps de 13, et il n'y a pas de réglage qui rattrape ça. En dessous,
   * la barre se replie sur deux rangs, l'en-tête grandit de 41 px et le
   * logo ne mord presque plus le hero.
   *
   * 1150 laisse 40 px de marge : un libellé de rubrique peut s'allonger
   * sans que la barre se casse du jour au lendemain. Si les libellés ou
   * le corps changent, c'est cette valeur qu'il faut remesurer.
   *
   * navigation.js lit cette variable plutôt que de la recopier. La
   * règle @media, elle, ne peut pas la lire — une requête de média ne
   * connaît pas les variables CSS : sa valeur est donc écrite en clair
   * plus bas, à un pixel près, et c'est le seul doublon.
   */
  --rupture-menu: 1150px;

  /* Le débord du logo sous la barre : c'est lui qui donne au bloc blanc
     sa hauteur, et à la page son décalage sous l'en-tête. */
  --logo-debord: 5.5rem;

  /*
   * L'en-tête ne suit pas la mesure de lecture du reste du site.
   * La composition est réglée sur 1280 px avec une gouttière de 32 :
   * le menu y tient sur huit colonnes sans se casser, là où les 108 px
   * de gouttière du conteneur courant le comprimaient au point de
   * couper « CDOS 30 » en deux.
   */
  --entete-largeur: 1280px;
  --entete-gouttiere: 1.5rem;

  /* Le bloc blanc du logo : 100 px de logo et 20 px de marge de chaque
     côté. Il sert trois fois — la colonne qu'il réserve dans la barre,
     le bloc lui-même, et la gouttière du panneau de sous-menu, qui doit
     le laisser passer. */
  --logo-bloc: 140px;

  /*
   * Le rythme vertical de l'en-tête, relevé sur la maquette et mesuré
   * depuis le haut de la page :
   *
   *      0   haut du bloc blanc du logo
   *     35   haut du logo lui-même (la marge haute du bloc)
   *     85   le filet
   *    102   haut des capitales du menu (Barlow Condensed 13 px)
   *    142   bas de l'en-tête, donc haut du hero
   *    157   haut du panneau de sous-menu, 15 px sous le hero
   *    190   bas du bloc du logo, qui mord de 48 px sur le hero
   *
   * Trois de ces valeurs sont posées ici, la quatrième s'en déduit.
   * Le décalage de 3,9 px entre le haut d'une boîte de ligne et le haut
   * des capitales vient de la fonte : Barlow monte à 1000/1000 et ses
   * capitales à 700, ce qui laisse 3,6 px au-dessus à 12 px de corps,
   * plus 0,3 px de demi-interligne.
   */
  --bande-reseaux: 85px;

}

.entete .conteneur,
.entete__barre-inner {
  width: 100%;
  max-width: var(--entete-largeur);
  margin-inline: auto;
  padding-inline: var(--entete-gouttiere);
}


.entete {
  position: relative;
  z-index: 10;
  background-color: var(--couleur-fond);
}

/* ---------------------------------------------------------------
 * Les réseaux sociaux, en haut à droite
 * --------------------------------------------------------------- */

/*
 * La bande des réseaux fait 85 px : c'est elle qui pose le filet, et
 * le filet pose tout le reste. Une hauteur déclarée plutôt qu'un
 * calage par les marges, pour que la valeur reste vraie si le
 * pictogramme ou le libellé change de taille — et « min-height »
 * plutôt que « height », pour que la bande s'ouvre au lieu de rogner
 * son contenu si le visiteur grossit le texte.
 */
.entete__reseaux {
  display: flex;
  align-items: center;
  min-height: var(--bande-reseaux);
  padding-block: var(--e-2xs);
}

.reseaux {
  display: flex;
  justify-content: flex-end;
  gap: var(--e-l);
  margin: 0;
  padding: 0;
  list-style: none;
}

.reseaux__lien {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: var(--e-3xs);
  color: var(--couleur-titre);
  font-size: var(--t-reseaux);
  text-decoration: none;
}

.reseaux__picto {
  width: 20px;
  height: 20px;
}

.reseaux__libelle { font-family: var(--police-texte); }

.reseaux__lien:hover .reseaux__libelle,
.reseaux__lien:focus-visible .reseaux__libelle { text-decoration: underline; }

/* ---------------------------------------------------------------
 * La barre de menu et le logo
 * --------------------------------------------------------------- */

/*
 * Le filet court d'un bord à l'autre du contenu, pas de l'écran : il
 * est donc posé sur le conteneur intérieur et non sur la bande.
 */
.entete__barre-inner { border-top: 1px solid var(--couleur-filet); }

/*
 * Trois colonnes : la moitié gauche du menu, le logo, la moitié droite.
 * Le logo occupe une colonne de largeur fixe pour que les deux moitiés
 * se partagent le reste à parts égales, quel que soit le nombre
 * d'entrées de chaque côté.
 *
 * Les colonnes sont assignées une par une, et non laissées à l'ordre du
 * balisage : le logo est écrit en premier pour la tabulation, mais il
 * s'affiche au milieu. Sans ces trois lignes, « display: contents » sur
 * le menu dissout le <nav> et les deux listes tombent dans les deux
 * premières colonnes, le logo dans la troisième.
 */
.entete__barre-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
}

.menu__liste--gauche { grid-column: 1; grid-row: 1; }
.entete__marque      { grid-column: 2; grid-row: 1; }
.menu__liste--droite { grid-column: 3; grid-row: 1; }

/*
 * La colonne du milieu ne contient rien : elle réserve la place du bloc
 * blanc, qui est posé sur l'en-tête entier et non sur cette cellule.
 */
.entete__marque { width: var(--logo-bloc); }

/*
 * Le logo déborde sous la barre, posé sur un fond blanc qui mord sur la
 * page. « position: absolute » plutôt qu'une marge négative : la hauteur
 * de la barre ne doit pas dépendre de la taille du logo.
 */
/*
 * Le bloc blanc va du haut de la page jusqu'à 50 px sous l'en-tête,
 * mordant sur le hero. Il est calé sur l'en-tête entier — pas sur la
 * barre de menu — parce que la maquette le fait commencer au-dessus de
 * la rangée des réseaux sociaux, et non sous elle.
 *
 * Centré par « left: 50 % » plutôt que par sa cellule de grille : la
 * colonne du milieu réserve la place, ce sont les deux « 1fr » qui font
 * qu'elle tombe au centre de la page. Le bloc, lui, s'y aligne
 * directement, sans dépendre de l'équilibre des deux menus.
 *
 * « bottom » négatif plutôt qu'une hauteur fixe : l'en-tête garde la
 * hauteur que lui donnent ses deux bandes, et le débord ne dépend
 * d'aucune mesure devinée.
 */
.entete__logo {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  z-index: 2;   /* au-dessus du panneau de sous-menu, comme la maquette */
  display: grid;

  /*
   * Calé en haut, centré horizontalement — et non centré dans les deux
   * sens. La maquette donne une position, « le logo à 35 px du bord
   * haut » : c'est l'alignement haut qui la rend vraie, quelle que soit
   * la hauteur du dessin.
   *
   * Pas de marge basse : c'est la hauteur du bloc qui fait foi, et ce
   * qui reste sous le logo n'est pas une valeur à tenir mais ce qu'il
   * en reste. Le SVG fait 83 x 107,5, donc 129,5 de haut à 100 de
   * large : il reste 25,5 px, et ce chiffre suivra le dessin si le
   * logo change.
   */
  place-items: start center;
  width: var(--logo-bloc);
  height: 190px;
  padding: 35px 20px 0;
  background-color: var(--couleur-fond);
}

.entete__logo img {
  width: 100px;
  max-width: 100%;
  height: auto;
}

.entete__logo-reduit { display: none; }

/* ---------------------------------------------------------------
 * Le menu — barre horizontale
 * --------------------------------------------------------------- */

/*
 * En barre, le <nav> se dissout pour que ses deux listes deviennent
 * directement des cellules de la grille. Le menu en pile, lui, n'existe
 * pas à cette largeur.
 */
.menu--barre { display: contents; }
.menu--pile  { display: none; }

/*
 * « padding: 0 » et non « padding-block » seul : une liste porte 40 px
 * de retrait à gauche par défaut, et c'est ce retrait qui décalait les
 * deux moitiés du menu vers l'intérieur.
 */
/*
 * Les entrées se répartissent sur toute la largeur plutôt que d'être
 * séparées d'une gouttière fixe : la première touche le bord du
 * contenu, la dernière le bloc du logo, et l'espace restant se partage
 * entre elles. Les deux moitiés se lisent ainsi comme une seule rangée
 * de part et d'autre du logo, quel que soit la longueur des libellés.
 *
 * L'écart déclaré n'est pas une gouttière mais un plancher : il ne se
 * voit que si la rangée est pleine, quand « space-between » n'a plus
 * rien à distribuer.
 *
 * « flex-start » plutôt que « center » : les entrées d'une ligne
 * s'alignent par le haut, sans quoi celles d'une seule ligne
 * flotteraient au milieu de la hauteur des autres.
 */
.menu__liste {
  display: flex;
  flex-wrap: wrap;

  /*
   * Les entrées s'étirent sur la hauteur de la rangée au lieu de se
   * caler en haut. Ce n'est pas un choix d'alignement — le libellé,
   * lui, reste en haut de sa boîte par « vertical-align » — mais une
   * question de survol : le panneau de sous-menu est un descendant de
   * son entrée, et il faut donc que l'entrée descende jusqu'au bas de
   * la barre pour que la souris passe de l'une à l'autre sans sortir.
   * Calées en haut, les entrées laissaient sous elles une bande qui
   * n'appartenait à personne, et le panneau se refermait avant d'être
   * atteint.
   */
  align-items: stretch;
  justify-content: space-between;
  gap: var(--e-2xs);
  margin: 0;

  /*
   * 12 px au-dessus, 11,5 en dessous. Les deux se déduisent des repères
   * de la maquette listés en tête de fichier : le filet à 85, le haut
   * des capitales à 102, le bas de l'en-tête à 142, pour deux lignes de
   * 16,25. Ils se mesurent depuis la boîte de ligne, pas depuis le
   * dessin des lettres.
   *
   * Les 11,5 du bas ne contredisent pas les « 14 px sous le menu » de
   * la maquette : elle les mesure depuis la ligne de base de la
   * dernière ligne, et non depuis le bas de la boîte. À ce corps il y a
   * 2,9 px entre les deux, et 11,5 plus 2,9 font bien 14.
   */
  /*
   * La réserve basse est portée par les entrées et non par la liste :
   * posée ici, elle rouvrirait sous elles la bande morte que
   * « stretch » vient de fermer.
   */
  padding: 12px 0 0;
  list-style: none;
}

/*
 * Volontairement non positionnée : le panneau de sous-menu se cale sur
 * l'en-tête entier. Un « position: relative » ici en ferait le bloc
 * conteneur et redonnerait un menu déroulant sous l'entrée.
 */
.menu__item {
  flex: 0 0 auto;
  padding-bottom: 11.5px;
}

/*
 * La pastille de la rubrique, avant l'intitulé. Elle prend la couleur
 * de la page visée — voir le walker, qui pose la classe de rubrique.
 *
 * Elle est dans le texte et non à côté : posée sur l'élément de liste,
 * elle se collait au bord gauche du lien, tandis que le libellé centré
 * se décalait vers le milieu. L'écart de 2 px devenait dix. Dans le
 * flux, elle suit la première ligne où qu'elle se place.
 */
.menu__lien--niveau-0::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 3px;
  border-radius: var(--rayon-rond);
  background-color: var(--couleur-rubrique);
  vertical-align: middle;
}

/*
 * « inline-block » avec une largeur maximale, plutôt qu'un bloc qui
 * s'étire : l'entrée prend la largeur de son libellé, et les longues
 * se replient sur deux lignes. Sans cette borne, la boîte se laissait
 * comprimer par ses voisines jusqu'à ce que la puce se retrouve seule
 * sur la première ligne, le libellé rejeté sous elle.
 *
 * La borne est calculée sur la plus longue ligne du menu, mesurée dans
 * la fonte réelle : « PUBLIQUES ET HAUT-NIVEAU » fait 117,9 px en
 * Barlow Condensed 12 px. 10 em en font 120, ce qui la tient — en
 * dessous, « HAUT-NIVEAU », devenu insécable, tomberait sur une
 * troisième ligne.
 *
 * En « em » et non en « ch », qui serait pourtant plus naturel ici.
 * « ch » vaut la largeur du zéro de la fonte RÉELLEMENT chargée : tant
 * que Barlow Condensed n'est pas arrivée, c'est celle d'Arial, un quart
 * plus large. La borne passait alors de 124 à 153 px et le menu se
 * repliait sur deux rangs le temps du chargement, y compris en grand
 * écran. « em » ne dépend que du corps, qui, lui, est connu tout de
 * suite.
 *
 * « balance » égalise ensuite les deux lignes plutôt que de laisser un
 * mot seul en bas. Il ne peut pas augmenter le nombre de lignes : là
 * où le navigateur ne le connaît pas, le rendu est simplement celui
 * d'un repli ordinaire.
 *
 * « vertical-align: top » corrige un décalage vertical que rien dans
 * la mise en page ne laissait deviner. Une boîte inline-block s'aligne
 * par sa dernière ligne de base sur celle de la ligne qui la contient.
 * Le <li> porte l'interligne du corps de texte (16 px x 1,55), dont la
 * hauteur au-dessus de la ligne de base — 16,4 px — dépasse celle du
 * libellé — 12,25 px. Une entrée d'une seule ligne se retrouvait donc
 * poussée de 4 px vers le bas, tandis qu'une entrée de deux lignes,
 * plus haute que la réglure, calait au sommet. D'où « CDOS 30 » et
 * « CONTACT » en retrait de leurs voisines.
 */
.menu__lien {
  display: inline-block;
  max-width: 10em;
  text-wrap: balance;
  vertical-align: top;
  font-family: var(--police-label);
  font-size: var(--t-menu);
  font-weight: var(--graisse-normale);   /* 400 — arbitré le 14 septembre */
  line-height: 1.25;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  color: var(--couleur-menu);
  transition: color var(--transition);
}

/*
 * Au survol, l'entrée prend la couleur de sa rubrique. C'est la version
 * assombrie qui sert : sur du blanc, le jaune et les verts de la charte
 * ne passent pas le contraste d'un texte de 12 px.
 */
.menu__item--niveau-0:hover > .menu__lien,
.menu__item--ouvert > .menu__lien,
.menu__lien:focus-visible { color: var(--couleur-rubrique-texte); }

.menu__item--courant > .menu__lien { text-decoration: underline; }

/* Le bouton de dépliage n'existe qu'en mode déroulant. */
.menu__bascule {
  display: none;
  border: 0;
  background: none;
  cursor: pointer;
}

/*
 * Le message d'alerte n'est vu que des personnes qui peuvent affecter
 * un menu. Il occupe la place du menu manquant plutôt que de s'ajouter
 * ailleurs, pour qu'on comprenne tout de suite ce qui est vide.
 */
.menu__alerte {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  padding: var(--e-2xs) 0;
  color: var(--couleur-texte-doux);
  font-size: var(--t-petit);
  font-style: italic;
}

/* ---------------------------------------------------------------
 * Les sous-menus
 *
 * Ce n'est pas un menu déroulant : c'est un bandeau blanc qui prend
 * toute la barre et se pose par-dessus la page, quelle que soit
 * l'entrée qui l'ouvre. Mesures relevées sur les captures de la
 * production, ramenées à la largeur de composition de 1280 px :
 *
 *   largeur du panneau ....... 1338 px, soit la barre débordée d'une
 *                              gouttière de chaque côté
 *   texte des entrées ........ aligné au pixel sur celui du menu
 *   deux colonnes égales ..... remplies en hauteur d'abord : trois
 *                              entrées donnent 2 + 1, cinq donnent 3 + 2
 *   pas entre les entrées .... 32 px
 *   marge haute et basse ..... 36 px du bord au haut des capitales
 *   fond ..................... blanc pur, sans filet ni ombre
 * --------------------------------------------------------------- */

/*
 * Le panneau se cale sur l'en-tête entier, comme le bloc du logo, et
 * non sur la barre de menu : celle-ci ne peut pas devenir bloc
 * conteneur sans voler au logo le sien — il est posé sur l'en-tête
 * pour commencer au-dessus de la rangée des réseaux sociaux.
 *
 * Les bords se calculent donc depuis la fenêtre : le conteneur étant
 * centré, ses bords tombent à 50 % moins la demi-largeur, et le débord
 * d'une gouttière s'ajoute. « max(0px, …) » colle le panneau aux bords
 * de l'écran dès que la fenêtre est plus étroite que la composition.
 */
.menu__panneau {
  /*
   * Où tombe le bord de la barre, vu depuis la fenêtre : la barre est
   * centrée et bornée, son bord est donc à la moitié moins la
   * demi-largeur — et zéro dès que la fenêtre est plus étroite qu'elle.
   */
  --barre-bord: max(0px, calc(50% - var(--entete-largeur) / 2));

  /*
   * Le débord du panneau sur la barre : une gouttière tant qu'il y a la
   * place de la prendre, et ce qu'il en reste ensuite. Sans ce plafond,
   * le panneau sortirait de l'écran entre 1280 et 1328 px de fenêtre,
   * et son texte ne retomberait plus sous celui du menu.
   */
  --panneau-debord: min(var(--entete-gouttiere), var(--barre-bord));

  position: absolute;
  top: 100%;
  left:  calc(var(--barre-bord) - var(--panneau-debord));
  right: calc(var(--barre-bord) - var(--panneau-debord));
  z-index: 1;
  display: none;

  /*
   * Les 15 px de hero qui apparaissent au-dessus du panneau, obtenus
   * par une bordure transparente plutôt qu'en descendant le panneau de
   * 15 px.
   *
   * La raison n'est pas graphique : un panneau décollé laisserait entre
   * la barre et lui une bande qui n'appartient à personne, et la souris
   * qui la traverse sort de la rubrique — le panneau se refermerait
   * avant qu'on l'atteigne. La bordure, elle, fait partie du panneau :
   * elle laisse voir le hero sans ouvrir de trou.
   *
   * « background-clip: padding-box » est ce qui rend la bordure
   * réellement transparente : sans lui, le fond blanc se peint aussi
   * dessous, jusque sous la bordure.
   */
  border-top: 15px solid transparent;
  background-clip: padding-box;

  /*
   * L'ouverture et la fermeture, en fondu descendant de 8 px.
   *
   * « display » reste la propriété qui montre et cache : le panneau
   * doit disparaître de la mise en page, sinon l'accordéon mobile
   * garderait un vide sous chaque rubrique fermée, et la tabulation
   * traverserait des liens invisibles.
   *
   * Une propriété discrète comme « display » ne s'anime pas : elle
   * bascule d'un coup. « allow-discrete » diffère ce basculement à la
   * fin de la transition à la fermeture, et le passe au début à
   * l'ouverture — le fondu a donc le temps de se jouer dans les deux
   * sens. « @starting-style » fournit l'état de départ, sans quoi le
   * panneau apparaîtrait déjà opaque : un élément qui vient d'entrer
   * dans la mise en page n'a pas d'ancienne valeur d'où partir.
   *
   * Là où ce mécanisme n'existe pas encore, tout se réduit à
   * l'affichage direct d'aujourd'hui : rien ne casse, l'effet manque.
   */
  opacity: 0;
  translate: 0 -8px;
  transition:
    opacity   var(--transition),
    translate var(--transition),
    display   200ms allow-discrete;

  /*
   * La gouttière de la barre, plus de quoi rattraper le débord : le
   * texte du sous-menu retombe exactement sous celui du menu, à toutes
   * les largeurs de fenêtre.
   */
  padding: var(--e-m) calc(var(--entete-gouttiere) + var(--panneau-debord));
  background-color: var(--c-blanc);
}

.menu__item--ouvert > .menu__panneau {
  display: block;
  opacity: 1;
  translate: 0 0;
}

@starting-style {
  .menu__item--ouvert > .menu__panneau {
    opacity: 0;
    translate: 0 -8px;
  }
}

/*
 * « columns » plutôt qu'une grille : la répartition en hauteur d'abord
 * est native, et l'équilibrage suit le nombre d'entrées sans qu'on ait
 * à le compter.
 *
 * La gouttière vaut la largeur du bloc du logo, et pas une valeur
 * d'espacement : le bloc descend de 50 px sur le panneau, alors que la
 * première ligne s'écrit 30 px sous son bord. Une gouttière plus étroite
 * ferait commencer la seconde colonne derrière le bloc, et sa première
 * entrée y perdrait ses premières lettres.
 *
 * Le panneau retrouve ainsi le rythme de la barre au-dessus : deux
 * moitiés de part et d'autre du logo.
 */
.menu__sous-liste {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: var(--logo-bloc);
}

/* Une entrée et sa précision ne se coupent pas entre deux colonnes. */
.menu__item--niveau-1 { break-inside: avoid; }

.menu__lien--niveau-1 {
  display: block;
  max-width: none;
  padding-block: 0.32em;   /* 1,25 + 2 x 0,32 = 1,89 em, soit le pas de 32 px */
  text-align: left;
  color: var(--couleur-rubrique-texte);
}

.menu__lien--niveau-1:hover,
.menu__lien--niveau-1:focus-visible { text-decoration: underline; }

/*
 * La précision d'une entrée — le champ « Description » de WordPress,
 * qu'il faut activer dans les options de l'écran des menus. Même
 * corps, même couleur, mais en bas de casse : c'est une glose, pas
 * une seconde entrée.
 */
.menu__precision {
  display: block;
  text-transform: none;
  font-weight: var(--graisse-normale);
}

/* ---------------------------------------------------------------
 * Le bouton du menu déroulant
 * --------------------------------------------------------------- */

.burger {
  display: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  background: none;
  color: var(--couleur-texte-inverse);
  cursor: pointer;
}

.burger__barres,
.burger__barres::before,
.burger__barres::after {
  display: block;
  width: 1.5rem;
  height: 2px;
  background-color: currentcolor;
}

.burger__barres {
  position: relative;
}

.burger__barres::before,
.burger__barres::after {
  content: "";
  position: absolute;
  left: 0;
}

.burger__barres::before { top: -0.45rem; }
.burger__barres::after { top: 0.45rem; }

/* ---------------------------------------------------------------
 * Sous 1150 px — la bande marine et le menu déroulant
 *
 * La largeur est écrite en clair : une requête de média ne sait pas
 * lire --rupture-menu. Les deux valeurs doivent bouger ensemble.
 * --------------------------------------------------------------- */

@media (max-width: 1149px) {

  /*
   * Mesures relevées sur les captures de la maquette, à 1198 px de
   * fenêtre, en pixels CSS :
   *
   *   bande fermée .............. 70 de haut
   *   bloc blanc du logo ........ 120 x 45, logo de 92 dedans
   *   rangée du menu ............ 44, interligne 24, corps 17
   *   retrait du texte .......... 128 du bord du panneau
   *   texte du sous-menu ........ 216 du bord du panneau
   *   haut du panneau ........... 56 avant la première rangée
   *   fond des rangées actives .. #0050b4, le bleu 1 de la charte
   *
   * Les deux retraits sont donnés en clamp : 128 px sur une fenêtre de
   * 1198 valent 10,7 % de sa largeur, ce qui ferait 40 px sur un
   * téléphone de 375. Une valeur fixe y mangerait le tiers de l'écran.
   */
  .entete {
    --menu-rangee: 2.75rem;
    --menu-interligne: 1.5rem;
    --menu-corps: 1.0625rem;
    --menu-retrait: clamp(1.25rem, 10.7vw, 8rem);
    --sous-menu-retrait: clamp(2rem, 18vw, 13.5rem);

    /* Le bleu 1 de la charte : 7,48:1 avec du blanc, le seul bleu de la
       palette qui passe AA en aplat sous du texte courant. */
    --menu-actif: #0050b4;
  }

  /* -------- La bande fermée -------- */

  .entete__reseaux { display: none; }

  .entete__barre {
    border-top: 0;
    background-color: var(--couleur-fond-inverse);
  }

  .entete__barre-inner {
    grid-template-columns: 2.75rem 1fr 2.75rem;
    align-items: center;
    min-height: 70px;
  }

  /* La cellule occupe toute la colonne centrale ; c'est elle qui doit
     recentrer le bloc, sans quoi il se colle au bord gauche. */
  .entete__marque {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    justify-items: center;
    width: auto;
  }

  /*
   * Le logo réduit garde un bloc blanc, comme en grand écran. Ce n'est
   * pas une reprise machinale de la maquette : son cartouche et le mot
   * « GARD » sont dessinés en marine, et poser le fichier directement
   * sur la bande en effacerait la moitié — seul « CDOS », qui est en
   * blanc, resterait lisible.
   *
   * La hauteur du mode bureau doit être remise à « auto » : les 190 px
   * sont ceux du bloc qui déborde sur le hero.
   */
  .entete__logo {
    position: static;
    inset: auto;
    translate: none;
    place-items: center;
    width: 120px;
    height: 45px;
    padding: 0;
    background-color: var(--c-blanc);
  }

  .entete__logo-large { display: none; }

  .entete__logo-reduit {
    display: block;
    width: 92px;
    max-width: 100%;
    height: auto;
  }

  /* -------- Le bouton, puis la croix -------- */

  .burger {
    display: grid;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .burger__barres,
  .burger__barres::before,
  .burger__barres::after {
    width: 30px;
    height: 4px;
    transition: rotate var(--transition), translate var(--transition),
      opacity var(--transition);
  }

  .burger__barres::before { top: -9px; }
  .burger__barres::after  { top: 9px; }

  /*
   * Ouvert, le bouton sort de la bande : le panneau la recouvre. Il se
   * fixe en haut à droite de l'écran et se referme en croix, les trois
   * barres devenant deux — la barre du milieu s'efface, les deux autres
   * se rejoignent au centre. Un seul bouton, donc un seul
   * aria-expanded : rien à synchroniser.
   */
  body.menu-ouvert .burger {
    position: fixed;
    top: 0.25rem;
    right: 0.25rem;
    z-index: 70;
    color: var(--couleur-texte-doux);
  }

  body.menu-ouvert .burger__barres { background-color: transparent; }

  body.menu-ouvert .burger__barres::before {
    top: 0;
    rotate: 45deg;
  }

  body.menu-ouvert .burger__barres::after {
    top: 0;
    rotate: -45deg;
  }

  /* -------- Le panneau plein écran -------- */

  /*
   * Le panneau couvre l'écran entier, bande comprise. « position:
   * fixed » et non « absolute » : le menu doit rester en place si la
   * page défile derrière, et l'écriture bloque ce défilement le temps
   * de l'ouverture.
   */
  body.menu-ouvert { overflow: hidden; }

  body.menu-ouvert .entete { z-index: 60; }

  /* La barre laisse la place à la pile, qui a ses propres intitulés. */
  .menu--barre { display: none; }

  .menu--pile {
    display: none;
    grid-column: 1 / -1;
    grid-row: 2;
  }

  body.menu-ouvert .menu--pile {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 60;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-block: 3.5rem var(--e-2xl);
    background-color: var(--c-blanc);
  }

  .menu__liste {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-block: 0;
  }

  /*
   * L'entrée est une rangée : le libellé à gauche, le bouton de
   * dépliage à droite, et le sous-menu sur toute la largeur dessous.
   *
   * Une grille et non un « flex-wrap ». La différence compte : une
   * boîte flexible fait passer un élément à la ligne AVANT de le
   * comprimer, si bien qu'un intitulé long — « Sport & politiques
   * publiques et haut-niveau », dont le mot composé est insécable —
   * renvoyait le bouton de dépliage seul sous la rangée. Une colonne
   * « minmax(0, 1fr) » se comprime au lieu de renvoyer, et le libellé
   * se replie sur deux lignes comme il doit.
   */
  .menu__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    padding: 0;
    border: 0;
  }

  /*
   * 44 px de haut, l'aire de touche minimale recommandée. Un libellé
   * sur deux lignes en fait 68 : deux interlignes de 24 plus les 20 px
   * de marge, exactement ce que donne la maquette.
   */
  .menu__lien {
    /*
     * Le libellé occupe la première colonne, qui se comprime.
     */
    grid-column: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: var(--menu-rangee);
    max-width: none;
    padding: 0.625rem 0 0.625rem var(--menu-retrait);
    text-align: left;
    text-wrap: wrap;
    line-height: var(--menu-interligne);
    font-size: var(--menu-corps);
    color: var(--couleur-titre);
  }

  /* Pas de pastille en pile : la maquette n'en met pas, et elle
     décalerait le premier mot de chaque rangée. */
  .menu__lien--niveau-0::before { display: none; }

  /*
   * En pile, une rubrique dépliée ne prend pas sa couleur : elle reste
   * marine, et c'est le bloc bleu dessous qui signale l'ouverture. La
   * règle du mode bureau, elle, colore l'entrée ouverte — d'où cette
   * remise à zéro.
   */
  .menu__item--ouvert > .menu__lien,
  .menu__item--courant > .menu__lien { color: var(--couleur-titre); }

  /*
   * La rangée entière passe au bleu, libellé et bouton compris. Le
   * fond ne peut pas être posé sur l'entrée elle-même : le sous-menu
   * en fait partie et prendrait la couleur avec elle. Il est donc posé
   * sur les deux enfants de la première ligne, et « :has » sert à les
   * atteindre ensemble quel que soit celui que la souris survole.
   */
  .menu__item--niveau-0:has(> .menu__lien:hover) > .menu__lien,
  .menu__item--niveau-0:has(> .menu__lien:hover) > .menu__bascule,
  .menu__item--niveau-0:has(> .menu__bascule:hover) > .menu__lien,
  .menu__item--niveau-0:has(> .menu__bascule:hover) > .menu__bascule,
  .menu__lien--niveau-0:focus-visible {
    background-color: var(--menu-actif);
    color: var(--couleur-texte-inverse);
  }

  .menu__bascule {
    grid-column: 2;
    display: grid;
    place-items: center end;
    width: auto;
    min-height: var(--menu-rangee);
    padding-inline: var(--e-s) var(--menu-retrait);
    color: var(--couleur-titre);
  }

  /* Un triangle plein, comme la maquette, et non le chevron tracé au
     filet du premier jet. */
  .menu__chevron {
    width: 14px;
    height: 9px;
    border: 0;
    translate: none;
    rotate: none;
    background-color: currentcolor;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transition: rotate var(--transition);
  }

  .menu__bascule[aria-expanded="true"] .menu__chevron { rotate: 180deg; }

  /* -------- Le sous-menu -------- */

  /* En pile, le panneau pousse le contenu : un glissement vertical y
     lutterait contre le déplacement des rubriques voisines. Le fondu
     seul suffit. */
  .menu__item--ouvert > .menu__panneau { translate: none; }

  /*
   * L'aplat bleu court d'un bord à l'autre de l'écran : la maquette le
   * rentrait de chaque côté, la consigne est de le laisser filer. Seul
   * le texte reste en retrait, plus loin que celui des rubriques — c'est
   * lui, et non le cadre, qui dit que le niveau a changé.
   */
  .menu__panneau {
    position: static;
    left: auto;
    right: auto;
    translate: none;
    grid-column: 1 / -1;
    margin-inline: 0;
    padding: 0;
    border-top: 0;
    background-color: var(--menu-actif);
  }

  /* En pile, deux colonnes n'auraient pas la largeur de se tenir. */
  .menu__sous-liste { columns: auto; }

  .menu__lien--niveau-1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: var(--menu-rangee);
    padding: 0.625rem var(--e-s) 0.625rem var(--sous-menu-retrait);
    line-height: var(--menu-interligne);
    color: var(--couleur-texte-inverse);
  }

  .menu__lien--niveau-1:hover,
  .menu__lien--niveau-1:focus-visible { text-decoration: underline; }
}

@media (prefers-reduced-motion: reduce) {
  .menu__lien,
  .menu__chevron { transition: none; }
}