/* ---------------------------------------------------------------------------
   L'Édito — carte en navigation par catégories.

   Deux niveaux de raccourcis en haut (familles, puis catégories de la famille
   choisie) pour que la navigation tienne dans un écran, puis la photo et le
   contenu. Tout le contenu est présent dans la page : le clic ne fait que
   changer ce qui est visible, sans aller-retour serveur — et les moteurs
   voient la carte entière.
   --------------------------------------------------------------------------- */

.edito-nav{
	--u: min(1px, 0.0694444vw);
	/* Rouge de marque, unique sur tout le site. La maquette en porte deux
	   (#FF0000 sur les filets, #EF0000 sur les boutons de la navbar) :
	   on retient celui des boutons, le mieux contrasté. */
	--rouge: #EF0000;
	--gris-fonce: #5F5F5F;
	--creme: #FFFBF8;
	/* Départ vif, arrivée douce : le mouvement se remarque sans traîner. */
	--sortie: cubic-bezier(.2, .7, .3, 1);

	font-family: Barlow, sans-serif;
	background: var(--creme);
	padding: calc(96 * var(--u)) calc(80 * var(--u)) calc(120 * var(--u));
	max-width: calc(1440 * var(--u));
	margin-inline:auto;
}
.edito-nav *,
.edito-nav *::before,
.edito-nav *::after{ box-sizing:border-box }
.edito-nav ul{ margin:0; padding:0; list-style:none }
.edito-nav p{ margin:0 }

/* Elementor cale le widget sur la largeur naturelle de son contenu. */
.edito-nav-hote{ width:100% !important }
.edito-nav-hote .elementor-widget-container{ width:100% }


/* ---------- En-tête ---------- */

.edito-nav__entete{
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap: calc(32 * var(--u));
	flex-wrap:wrap;
	margin-bottom: calc(40 * var(--u));
}
/* 90 px : la taille des titres de section partout ailleurs sur le site
   (« Une brasserie au cœur de Reims », « Le Bouillon de L'Édito »). Le bloc
   remplaçant la carte entière, son titre joue le même rôle — 56 px était une
   valeur isolée, qui n'existait nulle part dans la maquette. */
.edito-nav .edito-nav__titre{
	margin:0;
	font-weight:600;
	text-transform:uppercase;
	font-size: clamp(34px, calc(90 * var(--u)), 90px);
	line-height:1.05;
	color:#000;
}
/* Même grammaire que les boutons de catégorie : angles droits comme tous les
   CTA du site, et même bascule franche au survol — le bloc n'a plus qu'un seul
   type de réaction. */
.edito-nav__lien{
	position:relative;
	flex:0 0 auto;
	padding: calc(13 * var(--u)) calc(22 * var(--u));
	border:1px solid var(--rouge);
	color: var(--rouge);
	text-decoration:none;
	text-transform:uppercase;
	font-weight:600;
	letter-spacing:.8px;
	font-size: clamp(11px, calc(13 * var(--u)), 13px);
	transition: background-color .22s var(--sortie), color .22s var(--sortie);
}
.edito-nav__lien:hover,
.edito-nav__lien:focus-visible{ background: var(--rouge); color:#fff }


/* ---------- Niveau 1 : les familles ---------- */

.edito-nav__barre{
	display:flex;
	flex-wrap:wrap;
	gap: calc(28 * var(--u));
	border-bottom:1px solid #D8D8D8;
}
.edito-nav__fam{
	appearance:none;
	border:0;
	border-radius:0;
	background:none;
	padding: 0 0 calc(14 * var(--u));
	margin-bottom:-1px;
	color: var(--gris-fonce);
	font-family:inherit;
	font-weight:600;
	text-transform:uppercase;
	letter-spacing:1px;
	font-size: clamp(12px, calc(16 * var(--u)), 16px);
	line-height:1.2;
	cursor:pointer;
	white-space:normal !important;
	position:relative;
	transition: color .3s var(--sortie);
}
/* Le filet se déploie depuis la gauche au lieu d'apparaître sec. */
.edito-nav__fam::after{
	content:"";
	position:absolute;
	left:0;
	right:0;
	bottom:-1px;
	height:2px;
	background: var(--rouge);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s var(--sortie), background-color .3s var(--sortie);
}
/* ⚠️ Le thème pose `button:hover, button:focus{ background-color:#CC3366 }` —
   un rose vif. `.edito-nav__fam:hover` (0,2,0) bat bien `button:hover` (0,1,1),
   mais seulement sur les propriétés qu'on déclare : tant qu'on ne parlait que
   de `color`, le fond rose du thème passait. Et comme un bouton garde le focus
   après un clic, il restait affiché. On neutralise le fond sur les trois états. */
.edito-nav__fam:hover,
.edito-nav__fam:focus,
.edito-nav__fam:focus-visible,
.edito-nav__fam:active{ background:none }

/* Survol en noir, comme les boutons de catégorie : le rouge reste réservé à
   la famille ouverte, sinon les deux états se confondent au passage. */
.edito-nav__fam:hover{ color:#000 }
.edito-nav__fam:hover::after{ transform: scaleX(.4); background:#000 }
.edito-nav__fam[aria-selected="true"]{ color:#000 }
.edito-nav__fam[aria-selected="true"]::after{ transform: scaleX(1); background: var(--rouge) }
/* Survoler la famille ouverte ne repasse pas son filet au noir : il resterait
   rouge sur la moitié gauche et noir au-delà. */
.edito-nav__fam[aria-selected="true"]:hover::after{ background: var(--rouge) }


/* ---------- Niveau 2 : les catégories ---------- */

.edito-nav__cats{
	display:flex;
	flex-wrap:wrap;
	gap: calc(10 * var(--u));
	margin: calc(24 * var(--u)) 0 calc(56 * var(--u));
}
.edito-nav__onglet{
	appearance:none;
	border:1px solid #000;
	background:transparent;
	color:#000;
	font-family:inherit;
	font-weight:600;
	text-transform:uppercase;
	letter-spacing:.4px;
	font-size: clamp(11px, calc(13 * var(--u)), 13px);
	line-height:1.2;
	/* Le thème pose white-space:nowrap sur les boutons : sans ce !important,
	   un libellé long déborde au lieu de revenir à la ligne. */
	white-space:normal !important;
	overflow-wrap:break-word;
	padding: calc(12 * var(--u)) calc(18 * var(--u));
	/* Angles droits : la forme de tous les CTA du site (les boutons Elementor
	   sont montés en border-radius 0) et de la maquette. Posé explicitement,
	   car le thème arrondit les <button> à 3 px — retirer notre déclaration ne
	   suffisait pas, elle laissait repasser la sienne. */
	border-radius:0;
	cursor:pointer;
	position:relative;
	transition: background-color .22s var(--sortie), color .22s var(--sortie), border-color .22s var(--sortie);
}
.edito-nav__onglet[hidden]{ display:none }
/* Même précaution que pour les onglets de famille : après un clic à la souris
   le bouton garde le focus, et le rose du thème s'inviterait sur les
   catégories non sélectionnées. */
.edito-nav__onglet:focus:not(:hover):not([aria-selected="true"]){ background:transparent; color:#000 }

/* Le repère clavier ne doit pas disparaître avec le fond : on le rend
   explicite plutôt que de compter sur le style par défaut du navigateur. */
.edito-nav__fam:focus-visible,
.edito-nav__onglet:focus-visible,
.edito-nav__lien:focus-visible{ outline:2px solid #000; outline-offset:3px }

/* Survol : noir plein, texte blanc — la pastille de la référence.
   Le remplissage qui montait par le bas a été retiré : sur une rangée de
   boutons on survole vite plusieurs voisins, et l'animation traînait derrière
   le curseur. Une bascule franche de la couleur de fond se lit mieux.
   Sélection : le rouge de la marque, comme les filets de titre. */
.edito-nav__onglet:hover,
.edito-nav__onglet:focus-visible{
	background:#000;
	border-color:#000;
	color:#fff;
}

.edito-nav__onglet[aria-selected="true"]{
	background: var(--rouge);
	border-color: var(--rouge);
	color:#fff;
}
/* Survoler la catégorie déjà ouverte la passe au noir comme les autres :
   le geste reste lisible, et l'état sélectionné revient dès la sortie. */
.edito-nav__onglet[aria-selected="true"]:hover{ background:#000; border-color:#000 }


/* ---------- Variante « grille » : la proposition d'origine ----------
   Titre, bouton et photo réunis à gauche, raccourcis à plat sur quatre
   colonnes à droite, sans niveau de famille. */

.edito-nav--grille{ padding-top: calc(120 * var(--u)) }
.edito-nav--grille .edito-nav__cats{
	display:grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: calc(12 * var(--u));
	margin: 0 0 calc(56 * var(--u));
}
.edito-nav--grille .edito-nav__famille-titre{ display:none }
.edito-nav--grille .edito-nav__onglet{ text-align:center }

/* La colonne de gauche porte l'en-tête : elle démarre donc plus haut que la
   liste des raccourcis, d'où la grille inversée. */
.edito-nav--grille .edito-nav__interieur{ grid-template-columns: calc(488 * var(--u)) minmax(0, 1fr) }
.edito-nav--grille .edito-nav__entete{
	display:block;
	margin-bottom: calc(48 * var(--u));
}
.edito-nav--grille .edito-nav__titre{ font-size: clamp(34px, calc(72 * var(--u)), 72px) }
.edito-nav--grille .edito-nav__lien{
	display:inline-block;
	margin-top: calc(32 * var(--u));
}
.edito-nav--grille .edito-nav__photos{ aspect-ratio: 1 / 1 }

/* Les raccourcis sont en haut à droite : la colonne de contenu commence
   sous eux, pas au niveau du titre. */
.edito-nav--grille .edito-nav__cats{ grid-column: 2 }
.edito-nav--grille{ display:grid; grid-template-columns: calc(488 * var(--u)) minmax(0, 1fr); column-gap: calc(72 * var(--u)) }
.edito-nav--grille .edito-nav__interieur{ display:contents }
.edito-nav--grille .edito-nav__aside{ grid-column: 1; grid-row: 1 / span 2 }
.edito-nav--grille .edito-nav__panneaux{ grid-column: 2 }


/* ---------- Variante « colonnes » : tout est visible, groupé ---------- */

.edito-nav--colonnes .edito-nav__cats{
	display:grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: calc(10 * var(--u));
	align-items:start;
}
/* L'intertitre occupe toute la ligne et ouvre son groupe. */
.edito-nav--colonnes .edito-nav__famille-titre{
	grid-column: 1 / -1;
	margin: calc(20 * var(--u)) 0 calc(4 * var(--u));
	font-weight:600;
	text-transform:uppercase;
	letter-spacing:1.4px;
	font-size: clamp(11px, calc(13 * var(--u)), 13px);
	color: var(--gris-fonce);
	padding-bottom: calc(8 * var(--u));
	border-bottom:1px solid #D8D8D8;
}
.edito-nav--colonnes .edito-nav__famille-titre:first-child{ margin-top:0 }
.edito-nav--barre .edito-nav__famille-titre{ display:none }


/* ---------- Photo + contenu ---------- */

.edito-nav__interieur{
	display:grid;
	/* minmax(0,…) : sans ça la colonne de droite s'élargit au contenu le plus
	   long et la grille déborde de la page. */
	grid-template-columns: calc(420 * var(--u)) minmax(0, 1fr);
	gap: calc(72 * var(--u));
	align-items:start;
}

/* La photo occupe tout son cadre, sans marge ni ombre.
   ⚠️ Le cadre blanc « tirage » posé le 21/08 (§51) est RETIRÉ à la demande de
   Kevin le 27/08. Il venait pourtant d'un retour client — « effet trop bloc »
   sur la rubrique Moules. Si la question revient, c'est ici qu'elle se rejoue :
   rétablir `background:#fff`, `padding: calc(12 * var(--u))`, le `box-shadow`
   et l'`inset` correspondant sur `.edito-nav__photo`. */
.edito-nav__photos{
	position:sticky;
	top: calc(24 * var(--u));
	width:100%;
	aspect-ratio: 4 / 5;
	overflow:hidden;
	box-sizing:border-box;
}
.edito-nav__photo{
	position:absolute;
	/* `inset:0` et non le padding du cadre : c'est ce qui supprime la marge. */
	inset:0;
	opacity:0;
	transition: opacity .35s ease;
	line-height:0;
}
.edito-nav__photo.est-active{ opacity:1 }
.edito-nav__photo img{
	width:100% !important;
	max-width:none !important;
	height:100% !important;
	object-fit:cover;
	display:block;
}

.edito-nav__panneau[hidden]{ display:none }

/* ⚠️ Le filet rouge au-dessus des titres est RETIRÉ du bloc interactif
   (Kevin, 27/08). Deux traitements, parce qu'il y a deux sources :

   1. le filet du titre de catégorie était un `<span class="edito-nav__filet">`
      propre à ce bloc — il n'est plus émis du tout ;
   2. les filets des SOUS-rubriques (« Risottos », « Pressions », « Bières de
      Reims »…) viennent de `rendu_sous_categorie()`, partagé avec /la-carte/.
      On ne peut donc pas les retirer du balisage sans les perdre là-bas : ils
      sont neutralisés ICI, sous `.edito-nav`.

   Ils étaient invisibles au premier coup d'œil — leur onglet est fermé au
   chargement — et seraient réapparus au premier changement de catégorie.

   /la-carte/ garde les siens : le Figma les prévoit (« Titre de section |
   H3 45, filet rouge au-dessus », §10). La divergence est voulue. */
.edito-nav .edito-carte__filet{ display:none }
/* 45 px : la taille relevée dans Figma pour un titre de catégorie (« Titre de
   section | H3 45 »), la même que sur /la-carte/. Le bloc était à 38, une
   taille qui n'apparaît nulle part dans la maquette. */
.edito-nav .edito-nav__cat{
	margin:0 0 calc(36 * var(--u));
	font-weight:600;
	text-transform:uppercase;
	font-size: clamp(28px, calc(45 * var(--u)), 45px);
	line-height:1;
	color:#000;
}

/* Le contenu réutilise le rendu de la carte : mêmes classes, même style,
   avec un peu plus d'air, la colonne étant plus étroite que sur /la-carte/. */
.edito-nav .edito-carte__grille{ column-gap: calc(56 * var(--u)); row-gap: calc(40 * var(--u)) }
.edito-nav .edito-carte__colonne{ gap: calc(40 * var(--u)) }
.edito-nav .edito-carte__ligne{ gap: calc(20 * var(--u)) }
.edito-nav .edito-carte__desc{ margin-top: calc(8 * var(--u)) }

/* Trois sous-catégories ne tiennent pas dans cette colonne : le nom du plat
   tomberait à une cinquantaine de pixels. On les met deux par ligne. */
.edito-nav .edito-carte__sous-cats{
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: calc(48 * var(--u)) calc(56 * var(--u));
}
@media (max-width: 1280px){
	.edito-nav .edito-carte__sous-cats{ grid-template-columns: minmax(0, 1fr) }
}


/* ---------- Tablette et mobile ---------- */

@media (max-width: 1024px){
	.edito-nav{ --u: 0.09vw; padding:64px 40px 80px }
	.edito-nav__interieur{ grid-template-columns:1fr; gap:40px }
	/* On abandonne le suivi au défilement, mais surtout pas position:static :
	   les photos sont en absolute et s'échapperaient de leur cadre. */
	.edito-nav__photos{ aspect-ratio: 16 / 9; position:relative; top:auto }
}

@media (max-width: 1024px){
	.edito-nav--colonnes .edito-nav__cats,
	.edito-nav--grille .edito-nav__cats{ grid-template-columns: repeat(3, minmax(0, 1fr)) }
	/* En dessous de 1024 px la mise en colonnes n'a plus de sens. */
	.edito-nav--grille{ display:block }
	.edito-nav--grille .edito-nav__interieur{ display:grid; grid-template-columns:1fr }
}

@media (max-width: 767px){
	.edito-nav{ --u: 0.16vw; padding:40px 16px 56px }

	.edito-nav__entete{ margin-bottom:24px; gap:16px }
	/* 34 px : la taille mobile des titres de section du site. */
	.edito-nav .edito-nav__titre{ font-size:34px }
	.edito-nav__lien{ padding:13px 20px; font-size:12px }

	/* Les deux niveaux de raccourcis défilent horizontalement plutôt que
	   d'empiler quatre rangées de boutons : la carte reste à portée de pouce
	   et le contenu commence tout de suite. */
	.edito-nav__barre,
	.edito-nav__cats{
		flex-wrap:nowrap;
		overflow-x:auto;
		/* ⚠️ Indispensable. Déclarer `overflow-x:auto` seul fait passer
		   `overflow-y` de `visible` à `auto` : la barre devenait défilable
		   verticalement de quelques pixels, et bougeait sous le doigt au
		   moindre geste oblique. Signalé à l'usage sur iPhone. */
		overflow-y:hidden;
		overscroll-behavior-x:contain;
		scrollbar-width:none;
		-ms-overflow-style:none;
		/* on déborde des marges du bloc pour que le défilement parte du bord */
		margin-inline:-16px;
		padding-inline:16px;
	}
	.edito-nav__barre::-webkit-scrollbar,
	.edito-nav__cats::-webkit-scrollbar{ display:none }

	.edito-nav__barre{ gap:20px; padding-bottom:0 }
	.edito-nav__fam{
		flex:0 0 auto;
		font-size:13px;
		padding-bottom:12px;
		white-space:nowrap !important;
	}

	.edito-nav__cats{ gap:8px; margin-block:18px 32px }
	.edito-nav__onglet{
		flex:0 0 auto;
		font-size:12px;
		/* 44 px de haut : la cible tactile recommandée */
		min-height:44px;
		padding:12px 16px;
		white-space:nowrap !important;
	}

	.edito-nav__interieur{ gap:28px }
	.edito-nav__photos{ aspect-ratio: 3 / 2 }

	.edito-nav .edito-nav__cat{ font-size:28px; margin-bottom:24px }

	/* Le contenu reprend le rythme mobile de la carte. */
	.edito-nav .edito-carte__grille{ row-gap:26px }
	.edito-nav .edito-carte__colonne{ gap:26px }
	.edito-nav .edito-carte__sous-cats{ gap:36px }
}


/* ---------- Mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce){
	.edito-nav *,
	.edito-nav *::before,
	.edito-nav *::after{ transition-duration: .01ms !important }
}

/* La mention héritée du bandeau (« Tous les jours » sous « Les moules de
   L'Édito »). En rouge, comme sur la carte complète : c'est un argument
   commercial, il doit se lire avant la description. */
.edito-nav__mention{
	margin: calc(6 * var(--u)) 0 0;
	font-weight:600;
	text-transform:uppercase;
	letter-spacing:.6px;
	font-size: clamp(13px, calc(18 * var(--u)), 18px);
	line-height:1.1;
	color:#EF0000;
}

/* ---------- Troisième niveau : les sous-rubriques ----------
   Posé au-delà de trois sous-rubriques (« Nos vins » en a neuf, 65 références).

   La hiérarchie se lit à la FORME, pas à la taille seule :
   famille = texte souligné · catégorie = bouton encadré · sous-rubrique =
   texte discret. Trois rangées de boutons encadrés se vaudraient, et on ne
   saurait plus laquelle commande laquelle. */

.edito-nav__sous{
	display:flex;
	flex-wrap:wrap;
	gap: calc(22 * var(--u));
	margin: calc(6 * var(--u)) 0 calc(34 * var(--u));
	border-bottom:1px solid rgba(0,0,0,.12);
}
.edito-nav__sous-onglet{
	appearance:none;
	border:0;
	border-bottom:2px solid transparent;
	background:transparent;
	color:#6B6560;
	font-family:inherit;
	font-weight:600;
	text-transform:uppercase;
	letter-spacing:.5px;
	/* Mesure a 11,9 px : sous le seuil de lisibilite, comme les etiquettes. */
	font-size: clamp(12px, calc(13 * var(--u)), 13px);
	line-height:1.2;
	padding: 0 0 calc(10 * var(--u));
	margin-bottom:-1px;
	border-radius:0;
	cursor:pointer;
	white-space:normal !important;
	transition: color .22s var(--sortie), border-color .22s var(--sortie);
}
/* ⚠️ `background:transparent` EST NÉCESSAIRE ICI, pas seulement sur la règle
   de base. Le thème pose un `button:hover{background:…}` — spécificité 0,1,1,
   qui bat notre `.edito-nav__sous-onglet` (0,1,0). Au survol, l'onglet se
   remplissait d'un aplat bordeaux. La règle de survol (0,2,0) reprend la main. */
.edito-nav__sous-onglet:hover,
.edito-nav__sous-onglet:focus-visible{
	color:#000;
	background:transparent;
	box-shadow:none;
}
.edito-nav__sous-onglet[aria-selected="true"]{
	color:#000;
	border-bottom-color: var(--rouge);
}

/* ⚠️ INDISPENSABLE. `carte.css` pose `display:flex` sur `.edito-carte__sous-cat`,
   ce qui ÉCRASE le `display:none` que le navigateur attache à l'attribut
   `hidden` : les onglets basculaient bien, et la sous-rubrique ne se masquait
   pas. Vérifié à l'écran — le bouton s'activait, le contenu ne changeait pas.
   La spécificité suffit (0,2,0 contre 0,1,0), pas besoin d'`!important`. */
.edito-carte__sous-cat[hidden]{ display:none }

/* Une seule sous-rubrique est visible : elle prend toute la largeur, et son
   filet de titre ne sert plus à la distinguer de ses voisines. */
.edito-carte__sous-cats.est-filtree{ display:block }

/* Les en-têtes de contenance (« 8 CL · 15 CL ») étaient collés au filet du
   titre au-dessus, et flottaient loin de la première ligne en dessous : ils
   semblaient appartenir au titre plutôt qu'à la colonne qu'ils annoncent.
   On les décolle du haut et on les rapproche de leur liste. */
/* ⚠️ La regle vaut pour TOUTES les sous-rubriques, pas seulement les filtrees.
   Mesure : les en-tetes de « Pressions » et des « Eaux minerales » sortaient a
   `margin-top:0` — colles au filet du titre — quand ceux du mode filtre etaient
   a 34. Deux poids, deux mesures pour le meme composant. */
.edito-nav__panneau .edito-carte__entetes{ margin-top: calc(30 * var(--u)) }
.edito-nav__panneau .edito-carte__sous-cat .edito-carte__colonne{ margin-top: calc(16 * var(--u)) }

/* ⚠️ Une rubrique SANS sous-rubrique collait sa liste au titre : « Aperitifs »
   et « Nos boissons chaudes » demarraient a `margin-top:0`, sans respiration. */
.edito-nav__panneau > .edito-carte__grille{ margin-top: calc(30 * var(--u)) }

/* ⚠️ Le cadrage vient de la rubrique (`image_pos`), pas d'une valeur en dur :
   une photo plus étroite que le cadre 4/5 se fait rogner en haut ET en bas,
   et un sujet placé haut — un verre de vin — s'y retrouve coupé. */
.edito-nav__photo img{ object-position: var(--cadrage, center center) }
.edito-carte__sous-cats.est-filtree .edito-carte__filet{ display:none }

@media (max-width: 768px){
	.edito-nav__sous{
		flex-wrap:nowrap;
		overflow-x:auto;
		/* Même parade que la rangée des catégories : sans `overflow-y:hidden`,
		   la barre devient défilable verticalement de quelques pixels et bouge
		   sous le doigt. */
		overflow-y:hidden;
		overscroll-behavior-x:contain;
		scrollbar-width:none;
		-ms-overflow-style:none;
		gap:18px;
		margin-block:0 24px;
		margin-inline:-16px;
		padding-inline:16px;
	}
	.edito-nav__sous::-webkit-scrollbar{ display:none }
	.edito-nav__sous-onglet{
		flex:0 0 auto;
		font-size:11px;
		/* 44 px de cible tactile, dont 12 de trait sous le texte */
		min-height:44px;
		padding-bottom:12px;
		white-space:nowrap !important;
	}
}

/* ---------- Les onglets ne se sélectionnent pas ----------
   ⚠️ Le « surlignage bordeaux qui reste » après un clic n'était ni un `:hover`
   ni un `:focus` : c'est la SÉLECTION DE TEXTE. Un clic un peu glissé
   sélectionne le libellé, et la couleur de sélection du site est bordeaux —
   d'où un onglet qui semble rester allumé. Mesuré : au repos comme après
   `focus()`, le fond calculé vaut bien `rgba(0,0,0,0)`.

   Un onglet est une commande, pas du texte à copier. */
.edito-nav__fam,
.edito-nav__onglet,
.edito-nav__sous-onglet{
	-webkit-user-select:none;
	user-select:none;
}

/* ⚠️ Et comme le fond ne sert PAS d'indicateur de focus, il en faut un vrai
   pour qui navigue au clavier : sans lui, la tabulation devient invisible. */
.edito-nav__fam:focus-visible,
.edito-nav__onglet:focus-visible,
.edito-nav__sous-onglet:focus-visible{
	outline:2px solid var(--rouge);
	outline-offset:3px;
}

/* ⚠️ Une rubrique qui porte À LA FOIS des articles et des sous-rubriques
   collait son premier sous-titre à la dernière ligne de la liste : « LES
   MÉLANGES » touchait « Kiyokko saké au yuzu ». Mesuré à `margin-top:0`. */
.edito-nav__panneau > .edito-carte__grille + .edito-carte__sous-cats{
	margin-top: calc(46 * var(--u));
}