/* ---------------------------------------------------------------------------
   L'Édito — carte
   Reprise de la maquette Figma « La carte », base 1440 px.

   Toutes les distances sont exprimées en --u, qui vaut 1 px de maquette :
   au-delà de 1440 px la composition ne grandit plus, en dessous elle se
   réduit proportionnellement. Les tailles de texte sont bornées par clamp()
   pour rester lisibles quand --u devient petit.
   --------------------------------------------------------------------------- */

.edito-carte{
	--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-clair: #C5C5C5;   /* descriptions sur fond noir */
	--gris-fonce: #5F5F5F;   /* descriptions sur fond crème */
	--filet: #3F3F3F;
	--creme: #FFFBF8;

	font-family: Barlow, sans-serif;
	background: var(--creme);
}

/* Elementor cale le widget sur la largeur naturelle de son contenu :
   sans ça, les bandes ne sont pas pleine largeur. */
.edito-carte-hote{ width:100% !important }
.edito-carte-hote .elementor-widget-container{ width:100% }

/* Le raccourci est posé dans un conteneur Elementor pleine largeur :
   c'est la carte elle-même qui porte ses marges. */
.edito-carte *,
.edito-carte *::before,
.edito-carte *::after{ box-sizing: border-box }

.edito-carte ul{ margin:0; padding:0; list-style:none }
.edito-carte p{ margin:0 }


/* ---------- En-tête d'une section : filet rouge, titre, prix ---------- */

.edito-carte__tete{ display:flex; flex-direction:column; align-items:flex-start }

.edito-carte__filet{
	display:block;
	width:  calc(64 * var(--u));
	height: calc(2 * var(--u));
	min-height:2px;
	background: var(--rouge);
	margin-bottom: calc(16 * var(--u));
}

.edito-carte .edito-carte__titre{
	margin:0;
	font-family: Barlow, sans-serif;
	font-weight:600;
	text-transform:uppercase;
	letter-spacing:0;
	font-size: clamp(26px, calc(45 * var(--u)), 45px);
	line-height:1;
	color:#000;
}

.edito-carte .edito-carte__prix-menu{
	margin: calc(16 * var(--u)) 0 0;
	font-weight:500;
	font-size: clamp(20px, calc(32 * var(--u)), 32px);
	line-height:1.25;
	color:#000;
}

.edito-carte .edito-carte__mention{
	margin: calc(12 * var(--u)) 0 0;
	font-weight:300;
	font-size: clamp(12px, calc(14 * var(--u)), 14px);
	line-height:1.43;
	color: var(--gris-fonce);
}


/* ---------- Ligne de carte ---------- */

.edito-carte__ligne{
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	gap: calc(16 * var(--u));
}

.edito-carte .edito-carte__nom{
	font-weight:600;
	text-transform:uppercase;
	font-size: clamp(14px, calc(20 * var(--u)), 20px);
	line-height:1.3;
	color:#000;
}

/* Pastilles et prix restent solidaires à droite. */
.edito-carte__fin{
	display:flex;
	align-items:baseline;
	gap: calc(16 * var(--u));
	flex:0 0 auto;
	white-space:nowrap;
}

.edito-carte .edito-carte__prix{
	font-weight:600;
	font-size: clamp(14px, calc(20 * var(--u)), 20px);
	line-height:1.3;
	color:#000;
}
.edito-carte__prix small{ font-weight:400; font-size:.7em }
/* Contenance d'une bouteille, à gauche du prix comme dans la maquette. */
.edito-carte .edito-carte__contenance{
	font-weight:400;
	font-size: clamp(11px, calc(13 * var(--u)), 13px);
	color: var(--gris-fonce);
}

.edito-carte .edito-carte__badge,
.edito-carte .edito-carte__supplement{
	font-weight:600;
	text-transform:uppercase;
	letter-spacing:.02em;
	font-size: clamp(10px, calc(12 * var(--u)), 12px);
	line-height:1;
	color: var(--rouge);
}

.edito-carte .edito-carte__desc{
	margin: calc(4 * var(--u)) 0 0;
	font-weight:300;
	font-size: clamp(12px, calc(14 * var(--u)), 14px);
	line-height:1.43;
	color: var(--gris-fonce);
}

/* Variantes de prix : « Pour 2 personnes 24,9 € » empilées à droite. */
.edito-carte__variantes{
	display:flex;
	flex-direction:column;
	align-items:flex-end;
	gap: calc(4 * var(--u));
}
.edito-carte__variante{
	display:flex;
	align-items:baseline;
	gap: calc(16 * var(--u));
}
.edito-carte .edito-carte__variante-libelle{
	font-weight:400;
	font-size: clamp(12px, calc(14 * var(--u)), 14px);
	color: var(--gris-fonce);
}
.edito-carte .edito-carte__variante-montant{
	font-weight:600;
	font-size: clamp(14px, calc(20 * var(--u)), 20px);
	color:#000;
	min-width: calc(58 * var(--u));
	text-align:right;
}


/* ---------- Bloc crème : catégories en deux colonnes ---------- */

.edito-carte__bloc{
	background: var(--creme);
	padding: calc(144 * var(--u)) calc(80 * var(--u));
}
/* Certaines catégories passent sur fond noir dans la maquette
   (Street food, Les moules de L'Édito). */
.edito-carte__bloc--noir{ background:#000 }
.edito-carte .edito-carte__bloc--noir .edito-carte__titre,
.edito-carte .edito-carte__bloc--noir .edito-carte__sous-titre,
.edito-carte .edito-carte__bloc--noir .edito-carte__nom,
.edito-carte .edito-carte__bloc--noir .edito-carte__prix,
.edito-carte .edito-carte__bloc--noir .edito-carte__variante-montant{ color:#fff }
.edito-carte .edito-carte__bloc--noir .edito-carte__desc,
.edito-carte .edito-carte__bloc--noir .edito-carte__mention,
.edito-carte .edito-carte__bloc--noir .edito-carte__variante-libelle{ color: var(--gris-clair) }
.edito-carte__bloc--noir .edito-carte__soulignement{ background: var(--filet) }
.edito-carte__bloc-interieur{
	max-width: calc(1280 * var(--u));
	margin-inline:auto;
	display:flex;
	flex-direction:column;
	gap: calc(80 * var(--u));
}

.edito-carte__categorie{ display:flex; flex-direction:column; gap: calc(48 * var(--u)) }

.edito-carte__grille{
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap: calc(80 * var(--u));
	align-items:start;
}
.edito-carte__colonne{
	display:flex;
	flex-direction:column;
	gap: calc(32 * var(--u));
}

/* Sous-catégories côte à côte : deux colonnes de 608 séparées de 64. */
.edito-carte__sous-cats{
	display:grid;
	grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr));
	gap: calc(64 * var(--u));
	align-items:start;
}
.edito-carte__sous-cat{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
}
.edito-carte .edito-carte__sous-titre{
	margin: 0;
	font-family: Barlow, sans-serif;
	font-weight:600;
	text-transform:uppercase;
	letter-spacing:1px;
	font-size: clamp(17px, calc(24 * var(--u)), 24px);
	line-height:1.33;
	color:#000;
}
/* Filet gris qui souligne le titre de sous-catégorie, sur toute la colonne. */
.edito-carte__soulignement{
	display:block;
	width:100%;
	height:1px;
	background:#D8D8D8;
	margin-top: calc(8 * var(--u));
}
.edito-carte__sous-cat .edito-carte__mention{ margin-top: calc(16 * var(--u)) }
.edito-carte__sous-cat .edito-carte__colonne{
	width:100%;
	margin-top: calc(32 * var(--u));
}

/* Sous-catégorie en tableau : les prix s'alignent en colonnes sous des
   en-têtes (« 25cl », « Pinte 50cl »), comme sur la carte des bières. */
.edito-carte__entetes{
	display:grid;
	/* auto plutôt qu'une largeur fixe : le nom du plat garde la place
	   qu'il lui faut quand la colonne est étroite. */
	grid-template-columns: minmax(0, 1fr) repeat(var(--cols, 2), minmax(calc(52 * var(--u)), auto));
	gap: calc(12 * var(--u));
	width:100%;
	margin-top: calc(20 * var(--u));
}
.edito-carte .edito-carte__entetes span{
	text-align:right;
	font-weight:600;
	text-transform:uppercase;
	letter-spacing:.5px;
	/* 11 px sur la maquette : illisible à l'écran. On monte à 13 et on
	   assombrit, l'en-tête portant le sens de toute la colonne. */
	font-size: clamp(11px, calc(13 * var(--u)), 13px);
	line-height:1;
	color:#000;
	padding-bottom: calc(8 * var(--u));
	border-bottom:1px solid #D8D8D8;
}
.edito-carte__entetes span:first-child{ border-bottom:0 }
.edito-carte__colonne--tableau .edito-carte__ligne{
	display:grid;
	/* auto plutôt qu'une largeur fixe : le nom du plat garde la place
	   qu'il lui faut quand la colonne est étroite. */
	grid-template-columns: minmax(0, 1fr) repeat(var(--cols, 2), minmax(calc(52 * var(--u)), auto));
	gap: calc(12 * var(--u));
	align-items:baseline;
}
.edito-carte__colonne--tableau .edito-carte__fin{ display:contents }
.edito-carte__colonne--tableau .edito-carte__variantes{
	display:contents;
}
.edito-carte__colonne--tableau .edito-carte__variante{
	display:block;
	text-align:right;
}
.edito-carte__colonne--tableau .edito-carte__variante-libelle{ display:none }
/* Format non proposé : la maquette laisse un tiret dans la colonne. */
.edito-carte .edito-carte__variante--vide{ color: var(--gris-fonce); text-align:right }
.edito-carte__colonne--tableau .edito-carte__variante-montant{ min-width:0 }


/* ---------- Mise en avant centrée au milieu d'un bloc ---------- */

/* La mise en avant « Moules à volonté ».
   `column-reverse` : la description est écrite AVANT le titre dans le HTML
   (c'est un surtitre), mais la maquette la veut EN DESSOUS, en mention. On
   inverse à l'affichage plutôt que de toucher au balisage, qui reste logique
   pour un lecteur d'écran. */
.edito-carte__mise-en-avant{
	display:flex;
	flex-direction:column-reverse;
	align-items:center;
	gap: calc(14 * var(--u));
	text-align:center;
}
/* La mention : rouge, pour qu'on la lise avant tout le reste. C'est la demande
   du client — « tous les jours » est l'argument, pas un détail d'horaire. */
.edito-carte .edito-carte__surtitre{
	margin:0;
	font-weight:600;
	text-transform:uppercase;
	font-size: clamp(20px, calc(45 * var(--u)), 45px);
	line-height:1;
	letter-spacing:-.5px;
	color:#EF0000;
}
.edito-carte .edito-carte__accroche{
	margin:0;
	font-weight:600;
	text-transform:uppercase;
	font-size: clamp(34px, calc(90 * var(--u)), 90px);
	line-height:1;
	color:#000;
}
/* Sur fond noir, seul le titre passe au blanc : la mention garde son rouge,
   sinon elle se fondrait dans le titre et ne signalerait plus rien.
   #EF0000 sur #000 donne 5,25:1 — au-dessus du seuil. */
.edito-carte__bloc--noir .edito-carte__accroche{ color:#fff }
.edito-carte__bloc--noir .edito-carte__surtitre{ color:#EF0000 }


/* ---------- Bande d'un menu : photo + formule, sur fond noir ---------- */

.edito-carte__bande{
	display:grid;
	grid-template-columns: 640fr 800fr;
	background:#000;
}
.edito-carte__bande--photo-droite .edito-carte__bande-photo{ order:2 }
.edito-carte__bande--photo-droite{ grid-template-columns: 800fr 640fr }

.edito-carte__bande-photo{ overflow:hidden; line-height:0 }
.edito-carte__bande-photo img{
	width:100% !important;
	max-width:none !important;
	height:100% !important;
	object-fit:cover;
	display:block;
}

.edito-carte__bande-contenu{
	padding: calc(144 * var(--u)) calc(80 * var(--u));
	display:flex;
	flex-direction:column;
	gap: calc(32 * var(--u));
}

/* Sur fond noir, le texte s'inverse. */
.edito-carte__bande .edito-carte__titre,
.edito-carte__bande .edito-carte__prix-menu,
.edito-carte__bande .edito-carte__nom,
.edito-carte__bande .edito-carte__prix,
.edito-carte__bande .edito-carte__variante-montant{ color:#fff }

.edito-carte__bande .edito-carte__desc,
.edito-carte__bande .edito-carte__mention,
.edito-carte__bande .edito-carte__variante-libelle{ color: var(--gris-clair) }

.edito-carte__choix{ display:flex; flex-direction:column; gap: calc(12 * var(--u)) }

.edito-carte .edito-carte__ou{
	font-weight:300;
	font-size: clamp(12px, calc(14 * var(--u)), 14px);
	line-height:1.43;
	color: var(--gris-clair);
}

/* Le thème remet un fond transparent sur hr : on passe par la bordure,
   qu'il ne touche pas, et on force la couleur. */
.edito-carte .edito-carte__separateur{
	border:0;
	border-top:1px solid var(--filet) !important;
	height:0;
	background:none;
	margin:0;
	width:100%;
}


/* ---------- Respiration photo ---------- */

.edito-carte__respiration{
	position:relative;
	margin:0;
	line-height:0;
	height: calc(var(--haut, 460) * var(--u));
	overflow:hidden;
	/* La figure tombe rarement sur un pixel entier : sans ce fond, le crème
	   du conteneur transparaît sur la fraction de pixel du bord et laisse un
	   liseré clair à la jonction avec le bloc noir. */
	background:#000;
}

/* Après un bloc noir, la photo s'y fond : dégradé du noir opaque en haut
   vers le transparent en bas, posé par-dessus l'image comme dans Figma. */
.edito-carte__respiration--fondu::after{
	content:"";
	position:absolute;
	inset:0;
	/* Palier de noir plein sur les premiers pixels : la transition démarre
	   franchement, sans laisser voir le bord de la photo. */
	background: linear-gradient(180deg, #000 0, #000 3px, rgba(0,0,0,0) 100%);
	pointer-events:none;
}
/* Deux photos côte à côte, comme après les coupes glacées. */
.edito-carte__respiration--double{ display:grid; grid-template-columns:1fr 1fr }
.edito-carte__respiration img{
	width:100% !important;
	max-width:none !important;
	height:100% !important;
	object-fit:cover;
	display:block;
}


/* ---------- Tablette ---------- */

@media (max-width: 1024px){
	.edito-carte{ --u: 0.09vw }
	.edito-carte__bloc{ padding: 72px 40px }
	.edito-carte__bloc-interieur{ gap:64px }
	.edito-carte__grille{ gap:48px }
	.edito-carte__bande-contenu{ padding:72px 40px; gap:28px }
	.edito-carte__respiration{ height: calc(var(--haut, 460) * 0.7px) }
}


/* ---------- Mobile ----------
   Sur un écran de 390 px, --u tombe à 0,62 px : tout ce qui est exprimé en
   unités de maquette devient minuscule. On repasse donc en valeurs fixes,
   choisies pour la lecture à bout de bras plutôt que pour la fidélité au
   Figma, qui est dessiné pour un écran de 1440. */

@media (max-width: 767px){
	.edito-carte{ --u: 0.16vw }

	/* --- Rythme vertical --- */
	.edito-carte__bloc{ padding: 52px 20px }
	.edito-carte__bloc-interieur{ gap:56px }
	.edito-carte__categorie{ gap:26px }
	.edito-carte__filet{ width:48px; height:2px; margin-bottom:14px }

	/* --- Texte --- */
	.edito-carte .edito-carte__titre{ font-size:30px; line-height:1.06 }
	.edito-carte .edito-carte__prix-menu{ font-size:24px; margin-top:12px }
	.edito-carte .edito-carte__mention{ font-size:13px; line-height:1.5; margin-top:10px }
	.edito-carte .edito-carte__nom{ font-size:15px; line-height:1.35 }
	.edito-carte .edito-carte__prix{ font-size:15px }
	.edito-carte .edito-carte__desc{ font-size:13px; line-height:1.55; margin-top:6px; max-width:none }
	.edito-carte .edito-carte__ou{ font-size:13px }
	.edito-carte .edito-carte__badge,
	.edito-carte .edito-carte__supplement{ font-size:11px }
	.edito-carte .edito-carte__contenance{ font-size:12px }
	.edito-carte .edito-carte__variante-libelle{ font-size:13px }
	.edito-carte .edito-carte__variante-montant{ font-size:15px; min-width:0 }

	/* --- Une seule colonne : les <ul> s'effacent et les plats reprennent
	       l'ordre de lecture de la carte grâce à leur rang d'origine. --- */
	/* ⚠️ `align-items:stretch` est INDISPENSABLE ici.
	   La règle de base porte `align-items:start`, écrit pour la GRILLE du
	   desktop où il aligne les deux colonnes en haut. En passant `display`
	   à `flex` + `flex-direction:column`, la même déclaration change de
	   sens : sur l'axe transversal d'une colonne flex, `start` ne veut plus
	   dire « en haut » mais « largeur du contenu ». Chaque plat prenait donc
	   la largeur de sa propre description — 299 px pour la Margherita, 335
	   pour la Queen — et les prix, pourtant bien poussés à droite par
	   `space-between`, se retrouvaient à des abscisses différentes.
	   Visible surtout sur les pizzas et les flammekueches, dont les
	   descriptions sont courtes : ailleurs le texte remplissait la largeur
	   et masquait le défaut. Signalé par Kevin le 27/08. */
	.edito-carte__grille{ display:flex; flex-direction:column; gap:26px; align-items:stretch }



	/* ⚠️ `margin-left:auto` et pas seulement `space-between` sur la ligne.
	   Quand le nom est long et qu'il porte un badge — « Burratina aux tomates
	   cerises » + NOUVEAU — le prix passe à la ligne suivante. Sur cette ligne
	   il est SEUL, et `space-between` aligne alors à gauche : le prix se
	   retrouvait à x=121 au lieu de 355. La marge automatique le pousse à
	   droite dans les deux cas, ligne pleine ou ligne repliée. */
	.edito-carte__colonne:not(.edito-carte__colonne--tableau) .edito-carte__fin{ margin-left:auto }
	/* Seules les colonnes de la grille principale s'effacent : celles des
	   sous-catégories doivent garder leur largeur, sinon les tableaux de prix
	   se retrouvent à 58 px pour le nom du plat. */
	.edito-carte__grille > .edito-carte__colonne{ display:contents }
	.edito-carte__grille > .edito-carte__colonne > .edito-carte__plat{ order: var(--rang, 0) }

	/* --- Sous-catégories --- */
	.edito-carte__sous-cats{ grid-template-columns:1fr; gap:40px }
	.edito-carte .edito-carte__sous-titre{ font-size:19px; line-height:1.3 }
	.edito-carte__soulignement{ margin-top:10px }
	.edito-carte__sous-cat .edito-carte__mention{ margin-top:12px }
	.edito-carte__sous-cat .edito-carte__colonne{ margin-top:22px; gap:26px }
	/* Chaque entrée occupe deux lignes (nom, puis les formats) : il lui faut
	   un peu plus d'air pour qu'on distingue une bière de la suivante. */
	.edito-carte__colonne--tableau .edito-carte__ligne{ row-gap:6px }
	.edito-carte .edito-carte__colonne--tableau .edito-carte__variante-libelle{ font-size:12px }

	/* --- Tableaux de prix : sur un écran de 390 px, deux colonnes de 54 px
	       écrasent le nom et réduisent les en-têtes à l'illisible. On rend le
	       tableau en liste : le nom sur toute la largeur, puis chaque format
	       avec son libellé en clair juste dessous. --- */
	.edito-carte__entetes{ display:none }
	.edito-carte__colonne--tableau .edito-carte__ligne{
		display:flex;
		flex-wrap:wrap;
		align-items:baseline;
		gap:4px 20px;
	}
	.edito-carte__colonne--tableau .edito-carte__nom{ flex:1 0 100% }
	.edito-carte__colonne--tableau .edito-carte__fin{ display:contents }
	.edito-carte__colonne--tableau .edito-carte__variantes{
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		gap:4px 20px;
		align-items:baseline;
	}
	.edito-carte__colonne--tableau .edito-carte__variante{
		display:flex;
		align-items:baseline;
		gap:7px;
		text-align:left;
	}
	/* Le libellé revient : c'est lui qui porte le format, faute d'en-tête. */
	.edito-carte__colonne--tableau .edito-carte__variante-libelle{ display:inline }
	/* Un format non proposé n'a plus à être signalé par un tiret. */
	.edito-carte__colonne--tableau .edito-carte__variante--vide{ display:none }

	/* --- Bande de menu : photo au-dessus, formule en dessous --- */
	.edito-carte__bande,
	.edito-carte__bande--photo-droite{ grid-template-columns:1fr }
	.edito-carte__bande--photo-droite .edito-carte__bande-photo{ order:0 }
	.edito-carte__bande-photo{ height:62vw }
	.edito-carte__bande-contenu{ padding:44px 20px; gap:26px }
	.edito-carte__choix{ gap:14px }
	.edito-carte__separateur{ margin:2px 0 }

	/* --- Mise en avant --- */
	.edito-carte__mise-en-avant{ gap:16px }
	.edito-carte .edito-carte__surtitre{ font-size:20px }
	.edito-carte .edito-carte__accroche{ font-size:34px }

	.edito-carte__respiration{ height: calc(var(--haut, 460) * 0.13vw) }
	.edito-carte__respiration--double{ grid-template-columns:1fr }

	/* Un prix à variantes ne tient plus à côté du nom. */
	.edito-carte__ligne{ flex-wrap:wrap; gap:10px }
	.edito-carte__fin{ white-space:normal }
}

/* ---------- Allergènes ---------- */

/* Notre propre classe plutôt que `screen-reader-text` : le thème peut la
   redéfinir ou la retirer, et c'est le nom en clair de l'allergène qui est
   masqué ici — un pictogramme seul n'est pas une information accessible. */
.edito-carte__sr{
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap; border: 0;
}

.edito-carte__aller{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(8 * var(--u));
	margin: calc(6 * var(--u)) 0 0;
	color: #6B6B6B;
}
/* Le gris des pictogrammes est plus clair que celui d'un texte : ce sont des
   éléments graphiques, dont le seuil est 3:1 et non 4,5:1. Le nom en clair,
   lui, est dans la légende, en gris de lecture. */
.edito-carte__aller-item{ display: inline-flex; line-height: 0 }
.edito-carte__aller .edito-aller__svg{ display: block }

/* Sur fond noir — bandes de menu — le trait doit s'éclaircir. */
.edito-carte__bande .edito-carte__aller{ color: #9E9E9E }

/* ---------- La légende, en fin de carte ---------- */
.edito-carte__legende{
	max-width: 1440px;
	margin: 0 auto;
	padding: calc(48 * var(--u)) calc(80 * var(--u)) calc(96 * var(--u));
	box-sizing: border-box;
	font-family: "Barlow Edito", Barlow, sans-serif;
}
.edito-carte__legende > summary{
	display: flex;
	align-items: baseline;
	gap: calc(14 * var(--u));
	padding: calc(14 * var(--u)) 0;
	cursor: pointer;
	list-style: none;
	border-top: 2px solid #EF0000;
}
.edito-carte__legende > summary::-webkit-details-marker{ display: none }
.edito-carte__legende-titre{
	font-size: calc(24 * var(--u));
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #111;
}
.edito-carte__legende-sous{ font-size: calc(15 * var(--u)); color: #6B6B6B }
.edito-carte__legende > summary::after{
	content: "";
	margin-left: auto;
	width: 0; height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 8px solid #111;
	align-self: center;
	transition: transform .18s ease;
}
.edito-carte__legende[open] > summary::after{ transform: rotate(180deg) }

.edito-carte__legende-corps ul{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: calc(12 * var(--u)) calc(32 * var(--u));
	margin: calc(8 * var(--u)) 0 calc(20 * var(--u));
	padding: 0;
	list-style: none;
}
.edito-carte__legende-corps li{
	display: flex;
	align-items: center;
	gap: calc(10 * var(--u));
	font-size: calc(15 * var(--u));
	color: #2B2B2B;
}
.edito-carte__legende-corps li .edito-aller__svg{ flex: 0 0 auto; color: #111 }
.edito-carte__legende-note{
	margin: 0;
	font-size: calc(13 * var(--u));
	line-height: 1.6;
	color: #6B6B6B;
	max-width: 70ch;
}

@media (max-width: 900px){
	.edito-carte__legende{ padding: 32px 16px 56px }
	.edito-carte__legende-titre{ font-size: 20px }
	.edito-carte__legende-sous{ font-size: 13px }
	.edito-carte__legende-corps ul{ grid-template-columns: 1fr; gap: 10px }
	.edito-carte__legende-corps li{ font-size: 14px }
	.edito-carte__legende-note{ font-size: 12.5px }
}