/* ==========================================================================
   entete.css — en-tête du site (logo, titre, sous-titre, navigation).
   ==========================================================================

   TOUT ce qui concerne l'en-tête vit ici, et NULLE PART AILLEURS : ni style=
   en ligne dans le gabarit, ni gestionnaire onmouse*, ni réglage laissé au
   JavaScript. Deux conséquences voulues :

     1. l'en-tête s'affiche CORRECTEMENT SANS JAVASCRIPT, à la première
        peinture, à toutes les largeurs. L'ancienne rangée dépendait de
        stretchFullWidthRows() (assets/js/site.js) pour s'étendre jusqu'aux
        bords de l'écran : avant l'exécution du script — et pour toujours si
        jQuery manquait — la bande rouge s'arrêtait à 1140 px, d'où les deux
        bandes blanches sur les côtés. La rangée d'en-tête ne porte donc plus
        `data-full-width` : le script ne la voit plus, la CSS s'en charge ;
     2. le menu mobile est une bascule PUREMENT CSS (case à cocher masquée +
        <label>). Aucun script, donc rien à attendre : fermé au premier rendu,
        ouvert sur action de la personne.

   PRÉCÉDENCE — à ne pas casser. Chaque page porte, PLUS BAS dans <head>, un
   bloc <style data-type="shortcodes-custom-css"> hérité de l'ancien site :

       .c-1{padding-top:10px !important;background-color:#912222 !important;}

   `!important` bat la spécificité : une règle ordinaire ne peut pas
   l'emporter, où qu'elle soit. Les règles `.row.c-1` ci-dessous sont donc
   `!important` ELLES AUSSI, et gagnent alors sur la spécificité (0,2,0 contre
   0,1,0) — l'ordre des feuilles n'entre même pas en jeu. Retirer un seul de
   ces `!important` ferait revenir la bande rouge de 1140 px.

   COULEUR — UNE SEULE (décision humaine, « the two reds are weirds, let's use
   the same red as the red line at the bottom ») :

     --entete-rouge  #912222  titre, sous-titre, bandeau, liens de nav, états

   L'en-tête portait deux rouges : #912222 pour le texte et le filet, #F34747
   pour tout ce qui est interactif. Le second a été RETIRÉ de l'en-tête.
   #F34747 subsiste AILLEURS sur le site (boutons hérités du corps de page) :
   c'est hors sujet ici, on n'y touche pas.

   ==========================================================================
   LE DESSIN : « BANDEAU ROUGE », arbitré par l'humain après deux tours de
   maquettes (« Non, c'est tout bon on valide »).
   ==========================================================================

   L'en-tête est à DEUX ÉTAGES au-dessus de 768 px :

     étage 1  la marque CENTRÉE — logo + titre + slogan, sur fond blanc ;
     étage 2  la NAVIGATION, une bande PLEINE #912222 d'un bord à l'autre de
              la fenêtre, liens BLANCS.

   Il n'y a PLUS DE FILET sous l'en-tête : le bandeau EST le pied de
   l'en-tête, c'est lui qui pose la page. Le `.entete::after` de 4 px qui
   dessinait ce filet a donc disparu de ce fichier — il ferait, sous une bande
   pleine du même rouge, un épaississement sans raison.

   AU TÉLÉPHONE (< 768 px) c'est le BOUTON « MENU » qui devient la bande : il
   passe à la ligne sous la marque, prend toute la largeur, et porte lui-même
   le débord 100vmax (sinon il s'arrêterait aux 15 px de marge posés sous
   576 px). Le menu déroulant s'ouvre en dessous, en liste alignée à gauche,
   entrées séparées par des cheveux.

   HAUTEURS MESURÉES (page d'accueil, Chromium, échelle 1) :
     1440 px  155,3 px   (bandeau compris)
      390 px   99,6 px   fermé — sous le repère de 101,5 px que l'on s'était
                         donné ; 133,6 px avant que le `row-gap: 12px` de
                         `.entete-inner` ne soit annulé (il était compté DEUX
                         fois, marque→bande et bande→nav fermée, soit 24 px
                         pour rien) et que la bande ne soit maigrie.

   RÉPARTITION DE LA NAV — corrigée, mesurée avant/après à 1440 et 1920 px.
   La nav était en `justify-content: space-between` sur une liste large de
   1140 px : les six entrées y laissaient 137,8 px d'air ENTRE CHAQUE PAIRE.
   Le libellé « E & I » n'était pas plus écarté que les autres, mais c'est de
   loin le plus COURT (43,3 px de boîte contre 67 à 110 pour ses voisins) : il
   flottait seul, trois glyphes au milieu de 275 px de vide. Le défaut était
   celui de la RÉPARTITION, pas de ce libellé. D'où une nav CENTRÉE à écart
   BORNÉ (`column-gap: clamp(20px, 2.6vw, 38px)`), qui se serre au lieu de
   s'étaler d'un bord à l'autre : 137,8 px → 37,4 px à 1440 px.
   `word-spacing: -0.09em` sur les liens est un APPOINT, pas la correction :
   il resserre « E & I » et « Le Cerk' » de l'intérieur, pour 2 px environ (les
   deux espaces de « E & I » pèsent 10,7 px, l'interlettrage 5,7 px, sur
   35,3 px de texte).

   POLICE DU TITRE — Roboto Slab 300 aux DEUX largeurs, jamais seulement au
   bureau : la police de la marque ne doit pas changer en franchissant 768 px.
   Un titre slab centré au-dessus du bandeau se lit comme une manchette, ce
   qui est exactement ce que le second étage veut dire. Même chose pour le
   slogan (capitales slab interlettrées) et pour l'interlettrage de la nav,
   0,1em partout.

   MISE EN COLONNE BORNÉE À 768 px — `.entete-inner` ne passe en colonne
   qu'au-dessus de 768 px, et c'est essentiel : en dessous, la marque et le
   bouton « Menu » veulent rester sur la même rangée. Passer en colonne à
   TOUTES les largeurs empilait le bouton SOUS la marque et coûtait 30 px de
   haut au téléphone (107,6 px mesurés au lieu de 77,6).

   FILET PLEINE LARGEUR SANS DÉBORDEMENT : `box-shadow` à étalement 100vmax
   peint la couleur bien au-delà de la boîte sans jamais créer de barre de
   défilement (une ombre ne participe pas au débordement défilable), et
   `clip-path: inset(0 -100vmax)` la retaille EXACTEMENT à la hauteur de la
   boîte tout en laissant filer les côtés. D'où un fond et un bandeau qui vont
   d'un bord à l'autre de la fenêtre sans `100vw` (qui, lui, compte la barre
   de défilement et provoque un défilement horizontal parasite). La ruse sert
   ici TROIS fois : le fond blanc de `.entete`, la bande de `.entete-nav` au
   bureau, le bouton « Menu » au téléphone.
   ========================================================================== */

:root {
	--entete-rouge: #912222;
	/* #912222 à 32 % : les cheveux qui séparent les entrées du menu déroulant */
	--entete-filet: rgba(145, 34, 34, 0.32);
}

/* --- la rangée héritée : on la neutralise, on ne la supprime pas ---------- */
/* La classe `row c-1 row-has-fill` et le repère `.row-full-width` qui suit  */
/* sont un contrat avec layout.css (padding-top:35px du premier bloc de      */
/* contenu de CHAQUE page) : ils restent intacts. Seule leur apparence change.*/
.row.c-1 {
	background-color: #fff !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-left: 0;
	margin-right: 0;
}

/* --- l'en-tête proprement dit --------------------------------------------- */
/* `position: relative` reste : c'est le repère de la case à cocher masquée,  */
/* qui est en `position: absolute`.                                           */
.entete {
	position: relative;
	padding: 12px 0 0;
	background: #fff;
	box-shadow: 0 0 0 100vmax #fff;
	clip-path: inset(0 -100vmax);
	font-family: 'ABeeZee', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

/* `row-gap: 0` : au bureau c'est le `padding-bottom` de la marque qui tient
   l'écart entre les deux étages, au téléphone le `margin-top` du bouton. Un
   `row-gap` en plus serait compté deux fois au téléphone (cf. les 24 px du
   commentaire d'en-tête). */
.entete-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	column-gap: 16px;
	row-gap: 0;
}

/* MARGES LATÉRALES AU TÉLÉPHONE — l'en-tête doit commencer et finir sur la
   MÊME verticale que le corps de la page, à toutes les largeurs.

   Au-dessus de 576 px, `.content--blank .content-wrapper` (layout.css) a une
   `max-width` et se centre : le corps applique -15 px de marge négative sur
   `.row` puis +15 px de `padding` sur `.column-inner`, si bien que son texte
   retombe pile sur le bord du conteneur — là où `.entete-inner` se trouve
   déjà. Rien à corriger.

   SOUS 576 px il n'y a plus de `max-width` : le conteneur touche les bords de
   la fenêtre, le -15/+15 du corps laisse son texte à 15 px du bord… tandis
   que `.entete-inner`, lui, restait collé au bord (mesuré à 390 px : logo et
   bouton Menu à 0 et 375, texte du corps à 15 et 360). D'où l'impression, à
   l'œil, que l'en-tête « déborde » de la page.

   Ces 15 px rendent l'alignement exact. Ils sont posés sur `.entete-inner` et
   PAS sur `.entete` : le fond blanc et son `box-shadow` de 100vmax restent
   portés par `.entete`, qui, elle, va toujours d'un bord à l'autre de la
   fenêtre. Le bouton « Menu », lui, retrouve la pleine largeur par son propre
   débord 100vmax (cf. `.entete-burger`). */
@media (max-width: 575.98px) {
	.entete-inner {
		padding-left: 15px;
		padding-right: 15px;
	}
}

/* --- marque : logo + titre + sous-titre ----------------------------------- */
.entete-marque {
	display: flex;
	align-items: center;
	gap: clamp(10px, 1.2vw, 20px);
	/* base 0 : la marque prend la place QUI RESTE, elle ne la réclame pas.
	   Conséquence voulue — c'est le titre qui se replie quand il s'allonge,
	   jamais le bouton de menu qui se fait pousser à la ligne. */
	flex: 1 1 0%;
	min-width: 0;                 /* sans quoi un titre long déborde du flex */
	text-decoration: none;
	color: inherit;
}

.entete-marque:hover,
.entete-marque:focus {
	text-decoration: none;
	color: inherit;
}

.entete-marque:focus-visible {
	outline: 2px solid var(--entete-rouge);
	outline-offset: 4px;
	border-radius: 4px;
}

/* Le gabarit garde width="200" height="177" (check_site.py les compare au   */
/* fichier réel) ; la taille affichée, elle, est fixée ICI, en CSS.          */
.entete .entete-logo {
	flex: 0 0 auto;
	height: clamp(46px, 5.4vw, 78px);
	width: auto;
	max-width: 100%;
	display: block;
}

.entete-textes {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* TAILLE FLUIDE — aucune valeur en px dans le gabarit. Le titre et le
   sous-titre suivent la largeur de la fenêtre entre deux bornes, et se
   replient (`overflow-wrap`) si on leur donne un texte beaucoup plus long :
   la nav ne bouge pas, rien ne déborde.
   La police est Roboto Slab AUX DEUX LARGEURS (cf. commentaire d'en-tête) ;
   elle est déjà chargée par le gabarit (/assets/fonts/roboto-slab-*.css). */
.entete-titre {
	font-family: 'Roboto Slab', Georgia, 'Times New Roman', serif;
	font-size: clamp(1.15rem, 0.55rem + 2.1vw, 2.3rem);
	line-height: 1.1;
	font-weight: 300;
	letter-spacing: -0.01em;
	color: var(--entete-rouge);
	overflow-wrap: break-word;
	word-break: break-word;
}

.entete-slogan {
	font-family: 'Roboto Slab', Georgia, 'Times New Roman', serif;
	font-size: clamp(0.6rem, 0.45rem + 0.3vw, 0.78rem);
	line-height: 1.3;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--entete-rouge);
	overflow-wrap: break-word;
	word-break: break-word;
	margin-top: 6px;
}

/* --- navigation ----------------------------------------------------------- */
.entete-nav {
	flex: 0 0 100%;
	/* état FERMÉ, celui de la première peinture : ni visible, ni atteignable
	   au clavier. `visibility` retarde son passage pour laisser l'ouverture
	   s'animer, et bascule instantanément à la fermeture. */
	max-height: 0;
	overflow: hidden;
	visibility: hidden;
	transition: max-height 0.25s ease, visibility 0s linear 0.25s;
}

.entete-bascule:checked ~ .entete-nav {
	max-height: 60vh;
	overflow-y: auto;
	visibility: visible;
	transition: max-height 0.25s ease, visibility 0s;
}

.entete-liste {
	display: flex;
	flex-direction: column;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 10px 0 0;
}

.entete-item {
	display: block;
}

/* LIENS DE NAV — au TÉLÉPHONE, du TEXTE, rien d'autre (décision humaine :
   « remove button effects in the mobile view »). Dans le menu déroulant il n'y
   a donc ni pastille, ni fond, ni ombre, ni transition : rien qui puisse
   s'allumer sous le doigt. Un cheveu de séparation, et c'est tout. C'est
   délibéré et pas seulement esthétique — `:hover` ne veut à peu près rien
   dire au toucher (il reste « collé » après l'appui sur beaucoup de
   navigateurs mobiles) et `:active` se déclenche à CHAQUE appui : une
   pastille qui se remplit clignotait donc à chaque navigation. Aucune de ces
   deux pseudo-classes n'est stylée ici.

   `:focus-visible`, lui, RESTE : ce n'est pas de la décoration, c'est la
   seule chose qui montre où se trouve le clavier. Il ne s'affiche pas à la
   souris ni au doigt.

   Au-dessus de 768 px les liens deviennent BLANCS sur le bandeau rouge, dans
   la media query plus bas — là où il y a un vrai pointeur, et où c'est le
   SOULIGNEMENT qui marque le survol. */
.entete-lien {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 9px;
	padding: 10px 0;
	border-radius: 0;
	color: var(--entete-rouge);
	font-size: 13px;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	word-spacing: -0.09em;         /* appoint : resserre « E & I » de l'intérieur */
	text-decoration: none;
	white-space: nowrap;
}

/* NEUTRALISATION DU THÈME HÉRITÉ, sous 768 px seulement. style.min.css (que
   l'on ne touche pas) pose sur TOUS les liens de la page :

       a:active, a:hover { color: #336 }    ... soit du bleu marine
       ...                { transition: all .3s }

   `a:hover` a une spécificité de 0,1,1 : il bat `.entete-lien` (0,1,0). Sans
   les lignes ci-dessous, un simple appui du doigt faisait donc virer le
   libellé au bleu marine en 0,3 s — précisément l'effet de bouton que l'on
   retire. Mesuré avant correction : `color` passait à rgb(51,51,102) et
   `transition-property` valait « all ».

   Les quatre sélecteurs sont énumérés pour atteindre 0,2,0 et l'emporter — et
   le cheveu de séparation est posé ICI, dans la même liste, pour qu'il ne
   disparaisse pas sous le doigt : un `border-bottom` déclaré à part serait
   effacé par le `border: 0` de l'état `:hover`.
   Le bloc est borné à 767,98 px : au-dessus, le bandeau et son soulignement
   reprennent la main sans se battre contre lui. */
@media (max-width: 767.98px) {
	.entete-lien,
	.entete-lien:hover,
	.entete-lien:focus,
	.entete-lien:active {
		color: var(--entete-rouge);
		background-color: transparent;
		border: 0;
		border-bottom: 1px solid var(--entete-filet);
		border-radius: 0;
		box-shadow: none;
		text-decoration: none;
		transition: none;
	}
}

.entete-lien:focus-visible {
	outline: 2px solid var(--entete-rouge);
	outline-offset: 2px;
}

/* PAGE COURANTE — plus AUCUN style (décision humaine : « let's not highlight
   the current page in the navbar »). La règle `.entete-lien[aria-current=
   "page"]` qui remplissait la pastille a été retirée d'ici.

   L'ATTRIBUT, lui, RESTE dans le gabarit (src/_includes/base.njk, variable
   `navActif`), et il ne faut pas l'enlever : `aria-current="page"` ne se voit
   pas, mais c'est par lui qu'un lecteur d'écran annonce « page actuelle » sur
   le bon lien. Le supprimer ferait perdre ce repère à qui n'a que la voix
   pour se situer, sans rien gagner à l'écran. */

.entete-icone {
	flex: 0 0 auto;
	width: 18px;
	height: 14px;
	fill: currentColor;           /* rouge au téléphone, blanc sur le bandeau */
}

/* --- LA BANDE DES RÉSEAUX SOCIAUX, DANS LE MENU DU TÉLÉPHONE --------------
   Elle vit DANS `.entete-nav`, après la liste de navigation (cf. le
   commentaire de src/_includes/base.njk) : c'est ce qui la fait replier avec
   le reste du menu dès la première peinture, `max-height:0; overflow:hidden;
   visibility:hidden`, sans une ligne de JavaScript. La bascule CSS existante
   n'a rien eu à changer.

   ICÔNES SEULES, SANS LIBELLÉ (décision humaine). Le libellé est bien ÉMIS
   dans le HTML, mais masqué ici — voir `.entete-social-libelle` : c'est lui
   qui donne son nom accessible au lien, le dessin étant `aria-hidden`. Le
   masquer par `display:none` le retirerait AUSSI de l'arbre d'accessibilité
   et les six liens seraient annoncés « lien », sans plus ; d'où la recette
   classique du 1×1 px découpé, qui masque à l'œil sans masquer à la voix.

   MESURES (Chromium, échelle 1, page d'accueil, deux réseaux) :
     en-tête FERMÉ à 390 px   99,6 px — INCHANGÉ : la bande est dans une boîte
                              de hauteur nulle, elle ne pousse rien ;
     menu OUVERT à 390 px     329,2 px sans la bande, 393,2 px avec cinq
                              icônes ; le plafond de 60vh vaut 506,4 px sur un
                              écran de 844 px de haut, il reste de la marge.
   Sur UNE ligne : six icônes tiennent à 390 px, cinq à 360 px. Au-delà elles
   passent à la ligne (`flex-wrap`), le menu grandit, rien ne déborde.

   CIBLE TACTILE : 38 px de large sur 42 de haut par lien (18 px de dessin,
   10 px de marge intérieure de chaque côté). C'est en dessous des 44 px
   recommandés en largeur, et c'est un compromis assumé : élargir davantage
   ferait passer la sixième icône à la ligne sur un petit téléphone. La
   hauteur, elle, y est.

   AU-DESSUS DE 768 px LA BANDE DISPARAÎT (décision humaine explicite : pas
   d'icônes dans le bandeau rouge de l'ordinateur). C'est un `display:none`
   dans la media query de fin de fichier, pas ici. */
.entete-social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	column-gap: 4px;
	row-gap: 0;
	list-style: none;
	margin: 0;
	padding: 8px 0 2px;
}

.entete-social-item {
	display: block;
}

.entete-social-lien {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px 10px;
	color: var(--entete-rouge);
	text-decoration: none;
}

/* MÊME NEUTRALISATION DU THÈME HÉRITÉ que `.entete-lien` plus haut, et pour
   la même raison : style.min.css pose `a:active, a:hover { color: #336 }`
   (spécificité 0,1,1) sur TOUS les liens de la page. Sans les quatre
   sélecteurs énumérés ci-dessous — 0,2,0, donc gagnants — un simple appui du
   doigt ferait virer l'icône au bleu marine, `currentColor` la suivant. Pas
   de cheveu de séparation ici, contrairement aux entrées de nav : la bande
   est une rangée, pas une liste. */
.entete-social-lien,
.entete-social-lien:hover,
.entete-social-lien:focus,
.entete-social-lien:active {
	color: var(--entete-rouge);
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	text-decoration: none;
	transition: none;
}

.entete-social-lien:focus-visible {
	outline: 2px solid var(--entete-rouge);
	outline-offset: 2px;
}

.entete-icone-reseau {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	display: block;
}

/* Masqué à l'œil, PAS à la voix (cf. le commentaire de la bande). */
.entete-social-libelle {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- bascule du menu : case à cocher masquée + <label> --------------------- */
/* La case reste FOCALISABLE (opacity:0, pas display:none) : on l'atteint au
   clavier et la barre d'espace ouvre le menu, sans une ligne de JavaScript. */
.entete-bascule {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	opacity: 0;
	pointer-events: none;
}

/* LE BOUTON « MENU » EST LA BANDE, au téléphone. Il passe à la ligne sous la
   marque (`.entete-inner` est en `flex-wrap`), prend toute la largeur, et
   porte SON PROPRE débord 100vmax : sans lui, il s'arrêterait aux 15 px de
   marge que `.entete-inner` pose sous 576 px, et la bande ne toucherait pas
   les bords de l'écran. Au-dessus de 768 px il disparaît (`display: none`),
   et c'est `.entete-nav` qui devient la bande. */
.entete-burger {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	margin-top: 10px;
	padding: 8px 0;
	border: 0;
	border-radius: 0;
	background-color: var(--entete-rouge);
	color: #fff;
	box-shadow: 0 0 0 100vmax var(--entete-rouge);
	clip-path: inset(0 -100vmax);
	font-size: 13px;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	cursor: pointer;
	user-select: none;
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

/* La bande ne change NI de fond NI de couleur quand elle est survolée,
   ouverte ou focalisée : elle est déjà pleine. Ces règles restent écrites
   pour que le contrat soit lisible — et pour qu'aucune règle héritée du thème
   ne vienne repeindre le libellé au passage (cf. `a:hover{color:#336}`). */
.entete-burger:hover,
.entete-bascule:checked + .entete-burger,
.entete-bascule:focus-visible + .entete-burger {
	background-color: var(--entete-rouge);
	color: #fff;
}

.entete-bascule:focus-visible + .entete-burger {
	outline: 2px solid var(--entete-rouge);
	outline-offset: 3px;
}

.entete-barres {
	position: relative;
	display: block;
	width: 20px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}

.entete-barres::before,
.entete-barres::after {
	content: "";
	position: absolute;
	left: 0;
	width: 20px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

.entete-barres::before { top: -6px; }
.entete-barres::after  { top: 6px; }

/* ouvert : les trois barres deviennent une croix */
.entete-bascule:checked + .entete-burger .entete-barres {
	background: transparent;
}

.entete-bascule:checked + .entete-burger .entete-barres::before {
	transform: translateY(6px) rotate(45deg);
}

.entete-bascule:checked + .entete-burger .entete-barres::after {
	transform: translateY(-6px) rotate(-45deg);
}

/* ==========================================================================
   À partir de 768 px : les DEUX ÉTAGES. Plus de bascule, la nav est toujours
   là — et c'est elle qui devient le bandeau rouge.
   Les points de rupture sont ceux du conteneur du corps (layout.css :
   540 / 720 / 960 / 1140), pour que l'en-tête et le contenu s'alignent.

   Il n'y a VOLONTAIREMENT plus de palier à 992 ni à 1200 px : l'ancienne mise
   en page ramenait la nav sur la ligne de la marque à 992 px
   (`justify-content: flex-end`) et rallongeait le `padding` de l'en-tête à
   1200 px. Les deux étages rendent l'un et l'autre sans objet — la nav occupe
   TOUJOURS toute la largeur, à toutes les tailles d'écran, et son écart est
   déjà fluide par le `clamp()`. Mesuré identique à 768, 992, 1200, 1440 et
   1920 px : écarts 20 → 37,4 px, aucun débordement horizontal.
   ========================================================================== */
@media (min-width: 768px) {
	.entete {
		padding: 18px 0 0;        /* 0 en bas : le bandeau ferme l'en-tête */
	}

	.entete-inner {
		flex-direction: column;
		align-items: stretch;
	}

	.entete-bascule,
	.entete-burger {
		display: none;
	}

	/* PAS D'ICÔNES DANS LE BANDEAU ROUGE (décision humaine explicite : les
	   réseaux sociaux ne sont demandés que dans le menu du téléphone). Le
	   HTML les émet sur les quatorze pages — c'est le même gabarit — et c'est
	   cette règle, et elle seule, qui les retire au-dessus de 768 px. Les
	   retirer du gabarit à la place obligerait à décider au BUILD ce qui est
	   une question de LARGEUR DE FENÊTRE, donc à servir deux HTML. */
	.entete-social {
		display: none;
	}

	/* étage 1 — la marque, centrée */
	.entete-marque {
		flex: 0 0 auto;
		justify-content: center;
		gap: 18px;
		padding-bottom: 14px;
	}

	/* étage 2 — LE BANDEAU : la nav elle-même, peinte d'un bord à l'autre. */
	.entete-nav {
		flex: 0 0 auto;
		width: 100%;
		max-height: none;
		overflow: visible;
		visibility: visible;
		transition: none;
		background: var(--entete-rouge);
		box-shadow: 0 0 0 100vmax var(--entete-rouge);
		clip-path: inset(0 -100vmax);
	}

	/* NAV CENTRÉE À ÉCART BORNÉ — la correction de la répartition (137,8 px
	   d'air entre chaque paire en `space-between`, 37,4 px ici à 1440 px).
	   `flex-wrap` reste : si un libellé s'allonge un jour, la nav passe à la
	   ligne au lieu de déborder, et `row-gap` tient alors les deux rangées. */
	.entete-liste {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		column-gap: clamp(20px, 2.6vw, 38px);
		row-gap: 2px;
		width: 100%;
		padding: 8px 0;
	}

	/* Sur la bande, plus de pastille : du texte blanc, sans contour ni fond. */
	.entete-lien {
		display: inline-flex;
		justify-content: center;
		padding: 7px 2px;
		border: 0;
		border-radius: 0;
		background-color: transparent;
		color: #fff;
		transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
	}

	/* Un SEUL rouge : sur la bande, le contraste ne peut plus venir de la
	   teinte. C'est le SOULIGNEMENT blanc qui marque l'état — et le libellé
	   reste lisible, contrairement à l'ancien gestionnaire en ligne qui posait
	   `color:'#FFFFFF00'` (blanc transparent) et faisait disparaître le texte
	   sous le curseur. Blanc sur #912222 : 8,55:1, très au-dessus des 4,5:1. */
	.entete-lien:hover,
	.entete-lien:focus,
	.entete-lien:active {
		background-color: transparent;
		color: #fff;
		text-decoration: underline;
		text-decoration-thickness: 2px;
		text-underline-offset: 7px;
	}

	/* L'anneau de focus passe au blanc : un anneau #912222 sur un fond
	   #912222 ne se verrait pas. */
	.entete-lien:focus-visible {
		outline: 2px solid #fff;
		outline-offset: 2px;
	}
}

/* Mouvement réduit : on garde la bascule, on retire l'animation. */
@media (prefers-reduced-motion: reduce) {
	.entete-nav,
	.entete-lien,
	.entete-burger,
	.entete-barres::before,
	.entete-barres::after {
		transition: none;
	}
}
