/* ---------------------------------------------------------------------------
   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;
}