/* ============================================================
   Bay 1 — tokens extraits du Figma (voir SPECS.md § 5)
   ============================================================ */
@font-face {
	font-family: "Sofia Pro";
	src: url("../fonts/SofiaPro-Light.woff2") format("woff2");
	font-weight: 300;
	font-display: swap;
}
@font-face {
	font-family: "Sofia Pro";
	src: url("../fonts/SofiaPro-Regular.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "Sofia Pro";
	src: url("../fonts/SofiaPro-Semi-Bold.woff2") format("woff2");
	font-weight: 600;
	font-display: swap;
}
@font-face {
	font-family: "Sofia Pro";
	src: url("../fonts/SofiaPro-Bold.woff2") format("woff2");
	font-weight: 700 800;
	font-display: swap;
}

:root {
	/* Couleurs */
	--noir: #111622;          /* Noir Flat */
	--blanc: #FBFBFB;         /* Blanc Flat */
	--gris: #F1F1F3;          /* Gris Flat / Blanc Flat 2 */
	--rose-fade: linear-gradient(180deg, #FF87BC 0%, #F33589 100%);
	--vert-fade: linear-gradient(180deg, #CDE772 0%, #84B226 100%);
	--bleu-fade: linear-gradient(180deg, #87B7FF 0%, #1C60C7 100%);
	--blanc-fade: linear-gradient(180deg, #F9F9F9 0%, #EBEBEB 100%);
	--black-fade: linear-gradient(180deg, #5E5E5E 0%, #3D3D3D 100%);
	--hover-box: rgb(255 255 255 / 36%);
	--ombre: 0 14px 20px -5px rgb(18 18 18 / 10%);

	/* Typo — Sofia Pro (woff2 fournis par le client, assets/fonts/) */
	--font: "Sofia Pro", system-ui, sans-serif;
	--fs-titre-section: clamp(1.5rem, 1.1rem + 1.1vw, 2rem);        /* 32 */
	--fs-titre-sous-section: clamp(1.375rem, 1.05rem + 0.9vw, 1.75rem); /* 28 */
	--fs-titre-detail: clamp(1.75rem, 1.3rem + 1.55vw, 2.375rem);       /* 38 (titres pages détail) */
	--fs-menu: clamp(1.125rem, 0.95rem + 0.62vw, 1.5rem);           /* 24 */
	--fs-titre-card: clamp(1.125rem, 1rem + 0.42vw, 1.375rem);      /* 22 */
	--fs-paragraphe: clamp(1rem, 0.9rem + 0.39vw, 1.25rem);         /* 20 */
	--fs-p-card: clamp(0.9375rem, 0.875rem + 0.28vw, 1.125rem);     /* 18 */

	/* Les tailles atteignent leur maximum à 1440px, largeur de référence des maquettes. */
	--conteneur: 1320px; /* largeur de contenu du design (1440 - 2×60 gouttières) */
	--radius: 12px;
	--radius-tile: 20px;
	--gap-grille: clamp(1.25rem, 3vw, 40px); /* 40px au desktop, comme le design */
}

/* ------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
/* Réserve la place de la scrollbar : pas de décalage entre pages qui scrollent et pages courtes. */
html { scrollbar-gutter: stable; }
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}
/* Ancres (ex. « Le Centre ») : un peu d'air au-dessus à l'arrivée du scroll. */
#le-centre, #acces { scroll-margin-top: clamp(1rem, 4vw, 2.5rem); }
body {
	margin: 0;
	font-family: var(--font);
	font-size: var(--fs-paragraphe);
	color: var(--noir);
	background: var(--blanc);
	line-height: 1.5;
	/* Sticky footer : le body occupe au moins la hauteur de la fenêtre, le <main> grandit
	   pour repousser le footer en bas quand le contenu est plus court que l'écran. */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}
body > main { flex: 1 0 auto; }
body > .site-header, body > .site-footer { flex-shrink: 0; }
/* Barre d'admin WP (connecté) : on retire sa hauteur pour éviter le débordement. */
.admin-bar { min-height: calc(100vh - 32px); min-height: calc(100dvh - 32px); }
@media screen and (max-width: 782px) {
	.admin-bar { min-height: calc(100vh - 46px); min-height: calc(100dvh - 46px); }
}
img { max-width: 100%; height: auto; display: block; }
.img-lien { display: block; height: 100%; } /* enveloppe <a> d'une image liée (bay1_image_liee) : porte la hauteur des slides/bannières */
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6 { line-height: 1; margin: 0; font-weight: 700; }

/* Échelle de titres par défaut, alignée sur les tokens Figma (les titres
   à classe — pill, detail__titre, card__titre… — gardent leur taille propre). */
h1 { font-size: var(--fs-titre-detail); }        /* 38 */
h2 { font-size: var(--fs-titre-section); }       /* 32 */
h3 { font-size: var(--fs-titre-sous-section); }  /* 28 */
h4 { font-size: var(--fs-titre-card); }          /* 22 */
h5 { font-size: var(--fs-paragraphe); }          /* 20 */
h6 { font-size: var(--fs-p-card); }              /* 18 */

/* Conteneur : exactement 1320px au-delà de 1440px de viewport (gouttières 60px,
   comme le design), sinon 100% - 4rem. Pas de padding qui rognerait la largeur. */
main { width: min(100% - 4rem, var(--conteneur)); margin-inline: auto; }
main.home { width: 100%; }
.wrap { width: min(100% - 4rem, var(--conteneur)); margin-inline: auto; }

/* ------------------------------------------------------------ logo */
.logo-bay1 {
	inline-size: clamp(64px, 7vw, 100px);
	block-size: auto;
}
/* Le PNG a des fonds de boîtes BLANCS opaques : sur le footer sombre ils ressortent
   en blanc avec le texte noir (comme le design). Surtout PAS d'invert. */
.logo-bay1--footer { inline-size: 124px; }

/* ------------------------------------------------------------ header
   Mesures du composant Figma : padding 30/30/60 (haut/côtés/bas), logo 100px,
   groupe gauche gap 30, menu gap 10 (items px20 py10 radius50 texte 24), groupe
   droit gap 20, recherche bordure 2px #d8d8d8 radius60, socials cercles noirs 33px. */
.site-header {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 30px);
	padding: 30px clamp(1rem, 3vw, 30px) 60px;
	background: var(--blanc);
}
.site-header__logo { flex: 0 0 auto; }
/* Groupe [nav | recherche+socials] : nav à gauche, outils à droite. */
.site-header__panel {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1rem, 3vw, 2rem);
}
/* Burger : masqué en desktop. */
.site-header__burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	inline-size: 44px;
	block-size: 44px;
	padding: 9px;
	margin-left: auto;
	background: none;
	border: 0;
	cursor: pointer;

	& span { display: block; block-size: 3px; border-radius: 3px; background: var(--noir); transition: transform 0.2s, opacity 0.2s; }
}
.nav-menu {
	display: flex;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--fs-menu);
	font-weight: 800;

	/* Une couleur de section par item : Actualités vert, Enseignes rose,
	   Bons Plans bleu, Le Centre noir — comme les pills de section (node 156:548). */
	& li:nth-child(1) { --nav-couleur: var(--vert-fade); }
	& li:nth-child(2) { --nav-couleur: var(--rose-fade); }
	& li:nth-child(3) { --nav-couleur: var(--bleu-fade); }
	& li:nth-child(4) { --nav-couleur: linear-gradient(180deg, var(--noir), var(--noir)); }

	& a {
		position: relative;
		display: inline-block;
		padding: 10px 20px;
		border-radius: 50px;
		color: var(--noir);
		white-space: nowrap; /* un item de menu ne se coupe jamais en deux lignes */
		transition: color 0.15s, background 0.15s;
	}
	/* Survol : fond blanc, bordure rose (anneau dégradé Rose Fade de 3px). */
	& a::before {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
		padding: 3px;
		background: var(--rose-fade);
		-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
		-webkit-mask-composite: xor;
		mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
		mask-composite: exclude;
		opacity: 0;
		transition: opacity 0.15s;
		pointer-events: none;
	}
	/* texte rose au survol : le dégradé Rose Fade clippé sur le texte */
	& a:hover {
		background: var(--rose-fade);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
	& a:hover::before { opacity: 1; }
	/* Rubrique active (page courante) : fond plein rose, texte blanc, persistant
	   (y compris au survol — pas de bordure). */
	& .est-actif > a,
	& .current-menu-item > a,
	& .est-actif > a:hover,
	& .current-menu-item > a:hover {
		background: var(--rose-fade);
		-webkit-background-clip: border-box;
		background-clip: border-box;
		color: var(--blanc);
	}
	& .est-actif > a::before,
	& .current-menu-item > a::before { opacity: 0; }
}
.site-header__tools {
	display: flex;
	align-items: center;
	gap: 20px;
}
.search-bar input {
	font: inherit;
	font-size: 18px;
	padding: 16px 62px 16px 22px;
	border: 2px solid #d8d8d8;
	border-radius: 60px;
	background: var(--blanc);
	color: var(--noir);

	&::placeholder { color: #d8d8d8; }
}
.social {
	display: inline-grid;
	place-items: center;
	inline-size: 33px;
	block-size: 33px;
	border-radius: 50%;
	background: var(--noir);
	color: var(--blanc);
	transition: background 0.15s;

	& svg { inline-size: 21px; block-size: 21px; }
}
/* Survol : le cercle noir passe en dégradé rose (node 156:630, SN-Icons Hover=true). */
.social:hover { background: var(--rose-fade); }

/* ------------------------------------------------------------ pills
   Texte ET bordure en dégradé : background-clip:text pour le texte,
   masque padding-box/border-box (::before) pour la bordure. */
.pill {
	position: relative;
	display: inline-block;
	padding: 0.42em 1.1em; /* ~57px de haut pour un texte 32px, comme la maquette */
	border-radius: 999px;
	font-size: var(--fs-titre-section);
	font-weight: 800;
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.pill::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 999px;
	padding: 3px; /* bord net (2px laissait un liseré flou) */
	background: var(--grad);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask-composite: exclude;
	pointer-events: none;
}
.pill--vert  { --grad: var(--vert-fade); }
.pill--rose  { --grad: var(--rose-fade); }
.pill--bleu  { --grad: var(--bleu-fade); }
.pill--noir  { --grad: linear-gradient(180deg, var(--noir), var(--noir)); }
.pill--categorie { font-size: var(--fs-p-card); }

/* ------------------------------------------------------------ badge horaires (node 164:271)
   Maquette : padding 12/30, mot 30px, détail 16px — réduit d'un tiers environ
   sur retour client 2026-08-05 (« réduire la taille du widget ouvert/fermé »). */
.badge-horaire {
	position: absolute;
	top: 0;
	left: 50%;
	translate: -50% -50%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 8px 22px;
	border-radius: 90px;
	color: var(--blanc);
	box-shadow: var(--ombre);
	white-space: nowrap;
}
.badge-horaire__mot, .badge-horaire__sep { font-size: clamp(1.125rem, 0.85rem + 1vw, 22px); font-weight: 800; }
.badge-horaire__detail { font-size: clamp(0.8125rem, 0.7rem + 0.35vw, 14px); font-weight: 500; padding-top: 2px; }
.badge-horaire--ouvert { background: linear-gradient(180deg, #BFE771 0%, #83B226 100%); }
.badge-horaire--ferme  { background: linear-gradient(180deg, #FF86BB 0%, #F23488 100%); }

/* ------------------------------------------------------------ hero (pleine largeur) */
.hero {
	position: relative;

	& .hero__image { width: 100%; height: auto; display: block; }
}
/* Slider hero : slides à hauteur uniforme (~3.3:1, comme la bannière du design),
   pagination blanche ; le badge reste sur .hero (hors du .swiper qui clippe). */
.hero--slider {
	--swiper-theme-color: #fff;
	--swiper-pagination-bullet-inactive-color: #fff;
	--swiper-pagination-bullet-inactive-opacity: 0.55;

	& .swiper { width: 100%; }
	& .swiper-slide { aspect-ratio: 1440 / 436; }
	& .hero__image { width: 100%; height: 100%; object-fit: cover; }
	& .swiper-pagination { bottom: clamp(10px, 2vw, 20px); }
}
@media (max-width: 700px) {
	.hero--slider .swiper-slide { aspect-ratio: 2 / 1; }
}

/* ------------------------------------------------------------ sections home */
.home-section { padding-block: clamp(2rem, 6vw, 60px); } /* 60px au desktop (maquette) */
.home-section--grey { background: var(--gris); }
.home-section__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: clamp(1.75rem, 4vw, 2.5rem); /* 40px au desktop, comme la maquette */
}
.voir-plus { font-weight: 800; font-size: var(--fs-p-card); }
.voir-plus:hover { text-decoration: underline; }

/* ------------------------------------------------------------ cards
   Colonnes en auto-fill : à 1320px de contenu, le compte tombe juste
   (4×300 / 6×186.67) avec le gap du design. */
.cards { display: grid; gap: var(--gap-grille); align-items: stretch; }
.cards--5 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: clamp(1.25rem, 3.5vw, 50px); } /* home : gap 50 */
/* Home actus / bons plans : une seule rangée jusqu'au mobile (retour client 2026-09-15) —
   les cards en surplus tombent dans des rangées implicites de hauteur 0, clippées par le
   conteneur : le nombre visible suit la largeur (5 → 2), sans zone blanche. main.js les
   passe en inert (hors tabulation / lecteur d'écran). ≤620px : grille 2 colonnes qui wrappe. */
.home .cards--5 {
	grid-template-rows: auto;
	grid-auto-rows: 0;
	row-gap: 0;
	overflow: clip;
}
.home .cards--5 .card a { padding-bottom: 0.25em; } /* place pour les descendantes (g, q) : line-height 1 + overflow:clip de la rangée unique */
.cards--4 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } /* listing : 4 col, card 300 */
.cards--6 { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } /* listing enseignes : 6 col, card 186 */
.cards--3 { grid-template-columns: repeat(auto-fill, 240px); justify-content: start; gap: 40px; } /* similaires : 240 fixes, alignées à gauche */
/* Home enseignes : carrousel Swiper [data-logos-slider] en desktop (≥621px) —
   défilement continu (marquee) + drag libre, monté par sliders.js (qui clone la
   série de cards si elle ne remplit pas 2 largeurs, exigence de la boucle).
   Cards 186px (largeur du listing). Avant init ou sans JS : file scrollable
   équivalente à l'ancienne rangée. ≤620px : carrousel détruit, la grille 3/2
   colonnes reprend la main sur le .swiper-wrapper (media queries mobiles). */
.cards--logos { overflow: clip visible; } /* clip horizontal du carrousel, ombres des cards visibles verticalement */
.cards--logos.swiper-initialized { cursor: grab; } /* aussi dans les interstices (Swiper ne le pose que sur le wrapper) */
@media (min-width: 621px) {
	.cards--logos .swiper-slide { width: 186px; height: auto; }
	/* Marquee : progression constante, sans à-coups. Spécificité > au ease-out de
	   .swiper-free-mode > .swiper-wrapper du bundle (chargé après ce fichier). */
	.cards--logos.swiper .swiper-wrapper { transition-timing-function: linear; }
	.cards--logos:not(.swiper-initialized) .swiper-wrapper {
		gap: clamp(1.25rem, 3.5vw, 50px); /* home enseignes : gap 50 */
		overflow-x: auto;
		scrollbar-width: thin;
		scrollbar-color: #c9c9cf transparent;
	}
}

.card {
	height: 100%;

	& a { display: block; height: 100%; border-radius: var(--radius); }
}
.card__image {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: 22px; /* maquette */
	overflow: hidden;
	background: var(--blanc-fade);

	& img { width: 100%; height: 100%; object-fit: cover; display: block; }
}
/* Survol actu / bons plans : bord dégradé rose (Rose Fade) de 3px, comme le node 191:1200. */
.card__image::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 3px;
	background: var(--rose-fade);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask-composite: exclude;
	opacity: 0;
	transition: opacity 0.15s;
	pointer-events: none;
}
.card a:hover .card__image::after,
.card a:focus-visible .card__image::after { opacity: 1; }
.card__titre { font-size: var(--fs-titre-card); margin-top: 0.6em; }
.card__meta { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.6em; }
.card__meta .card__titre { margin-top: 0; }
/* Logos bons plans : la tuile carrée est portée par le span (pas par l'img),
   pour rester carrée quel que soit le fichier logo uploadé (retour client 2026-08-05). */
.card__logo {
	display: grid;
	place-items: center;
	width: 55px;
	height: 55px;
	flex: 0 0 auto;
	border-radius: 12px;
	background: #fff;
	box-shadow: var(--ombre);
	overflow: hidden;

	& img { width: 100%; height: 100%; object-fit: contain; }
}
.detail__logo {
	display: grid;
	place-items: center;
	width: 96px; /* maquette bon plan */
	height: 96px;
	flex: 0 0 auto;
	border-radius: var(--radius-tile);
	background: #fff;
	box-shadow: var(--ombre);
	overflow: hidden;

	& a { display: block; width: 100%; height: 100%; }
	& img { width: 100%; height: 100%; object-fit: contain; }
}
/* Carte enseigne : tuile logo carrée arrondie + nom à gauche dessous. */
.card--enseigne a { text-align: left; }
.card__logo-tile {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	width: 100%;
	border-radius: var(--radius-tile);
	background: #fff;
	box-shadow: var(--ombre);
	overflow: hidden;

	& img { width: 100%; height: 100%; object-fit: contain; }
}
/* Survol enseigne : même bord dégradé rose que les cartes actu / bons plans. */
.card__logo-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 3px;
	background: var(--rose-fade);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask-composite: exclude;
	opacity: 0;
	transition: opacity 0.15s;
	pointer-events: none;
}
.card a:hover .card__logo-tile::after,
.card a:focus-visible .card__logo-tile::after { opacity: 1; }
.card--enseigne .card__titre { margin-top: 0.8rem; }

/* ------------------------------------------------------------ listings */
.listing { text-align: center; }
.listing__titre { margin-block: clamp(2.5rem, 5vw, 3.75rem) 0; }
.listing__bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: 800;
	font-size: var(--fs-titre-card);
	margin-block: clamp(1.5rem, 3.5vw, 2.5rem);
	text-align: left;
}
.listing .cards { text-align: left; }
.retour { cursor: pointer; }
.retour:hover { text-decoration: underline; }
.card[hidden] { display: none; }

/* ------------------------------------------------------------ recherche */
.recherche__form {
	position: relative;
	width: min(100%, 640px);
	margin: clamp(1.75rem, 3.5vw, 2.5rem) auto 0;

	& input {
		font: inherit;
		font-size: 18px;
		width: 100%;
		padding: 16px 64px 16px 24px;
		border: 2px solid #d8d8d8;
		border-radius: 60px;
		background: var(--blanc);
		color: var(--noir);
	}
	& input::placeholder { color: #b6b6bd; }
	& input:focus-visible { outline: none; border-color: var(--noir); }

	& button {
		position: absolute;
		inset-inline-end: 6px;
		inset-block: 6px;
		display: inline-grid;
		place-items: center;
		inline-size: 48px;
		border: 0;
		border-radius: 50%;
		background: var(--noir);
		color: var(--blanc);
		cursor: pointer;
		transition: background 0.15s;
	}
	& button:hover { background: var(--rose-fade); }
	& button svg { inline-size: 22px; block-size: 22px; }
}
.recherche__compte { color: #6b6f76; }
.recherche__vide {
	text-align: left;
	font-size: var(--fs-paragraphe);
	margin-block: clamp(1.5rem, 4vw, 2.5rem) clamp(2.5rem, 6vw, 4rem);
}
.recherche__vide-titre { font-size: var(--fs-titre-sous-section); font-weight: 800; margin-bottom: 0.6em; }
.recherche__liens {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 1.25rem;
	list-style: none;
	padding: 0;
	margin-top: 1rem;
	font-weight: 800;

	& a { text-decoration: underline; }
	& a:hover { color: #F33589; }
}
.filtres-categories {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.25rem; /* 20px, comme le design */
	list-style: none;
	padding: 0;
	margin-block: clamp(1.75rem, 3.5vw, 2.5rem) 0;

	& a {
		position: relative;
		display: inline-block;
		padding: 0.4em 1.4em;
		border-radius: 999px;
		border: 1.5px solid #cfcfd6;
		background: var(--blanc);
		color: var(--noir);
		font-weight: 800;
		font-size: var(--fs-p-card);
		transition: color 0.15s, border-color 0.15s;
	}
	/* anneau de bord rose (dégradé), masqué par défaut */
	& a::before {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
		padding: 1.5px;
		background: var(--rose-fade);
		-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
		-webkit-mask-composite: xor;
		mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
		mask-composite: exclude;
		opacity: 0;
		transition: opacity 0.15s;
		pointer-events: none;
	}
	/* Survol : bord + texte en dégradé rose, fond blanc (contour). */
	& a:hover {
		border-color: transparent;
		background: var(--rose-fade);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
	& a:hover::before { opacity: 1; }
	/* Filtre actif : fond plein rose, texte blanc (comme actuellement). */
	& a.actif {
		border-color: transparent;
		background: var(--rose-fade);
		color: var(--blanc);
	}
	& a.actif:hover {
		-webkit-background-clip: border-box;
		background-clip: border-box;
		color: var(--blanc);
	}
	& a.actif::before { opacity: 0; }
}

/* ------------------------------------------------------------ détails */
.detail__bar { margin-block: 1.75rem 1.75rem; font-weight: 800; font-size: var(--fs-titre-card); }
.detail__banniere {
	border-radius: var(--radius-tile); /* 20px, comme la maquette */
	overflow: hidden;
	aspect-ratio: 1320 / 436; /* bannière large du design (~3:1) */

	& img { width: 100%; height: 100%; object-fit: cover; }
}
.detail__titre { font-size: var(--fs-titre-detail); margin-top: clamp(2rem, 5vw, 3.75rem); }
.detail__head { display: flex; align-items: center; gap: 20px; margin-top: clamp(2rem, 5vw, 3.75rem); }
.detail__head .detail__titre { margin-top: 0; }
/* Période bon plan : plus grande que le corps (22px Bold vs 20px Regular). */
.detail__periode { display: block; font-size: var(--fs-titre-card); font-weight: 800; margin-top: 20px; }
.detail__contenu { margin-top: 20px; font-size: var(--fs-paragraphe); }
.detail__contenu > :first-child { margin-top: 0; }
/* Titres saisis dans l'éditeur : de l'air au-dessus/en dessous, interligne lisible sur 2 lignes. */
.detail__contenu :is(h1, h2, h3, h4, h5, h6) { line-height: 1.2; margin: 1.5em 0 0.5em; }

/* Pages (mentions légales, cookies) : le footer suit directement le contenu, sans « Similaire ». */
.detail--page { margin-bottom: clamp(2.5rem, 5vw, 60px); }

/* Bandeau cookies tarteaucitron : police du site, taille lisible (comme grandangle). */
div#tarteaucitronInfo, #tarteaucitron, #tarteaucitronAlertBig { font-family: inherit !important; font-size: 16px !important; }
/* Placeholder carte Google Maps avant consentement : occupe la tuile. */
.le-centre__carte .googlemapsembed { width: 100%; height: 100%; min-height: 300px; }

/* « Similaire » : bande pleine largeur gris clair (maquette), cards 240 alignées à gauche. */
.similaires { background: var(--gris); padding-block: clamp(2.5rem, 5vw, 60px); margin-top: 60px; } /* 60px au-dessus de la bande grise, comme la maquette */
.similaires__inner { width: min(100% - 4rem, var(--conteneur)); margin-inline: auto; }
.similaires__titre { font-size: var(--fs-titre-sous-section); margin-bottom: 1.5rem; }

/* ------------------------------------------------------------ fiche enseigne
   2 colonnes du design : 257px (infos) / reste (carrousel + à propos). */
.fiche-enseigne {
	display: grid;
	grid-template-columns: 257px minmax(0, 1fr);
	gap: 40px;
	margin-top: 1rem;
	align-items: start;
}
.fiche-enseigne__infos, .fiche-enseigne__main { min-width: 0; }
.fiche-enseigne__logo {
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 1; /* tuile carrée 257×257 */
	border-radius: var(--radius-tile);
	background: #fff;
	box-shadow: var(--ombre);
	overflow: hidden;

	& img { width: 100%; height: 100%; object-fit: contain; }
}
.fiche-enseigne__nom { margin-top: 1.1rem; }
.fiche-enseigne__infos .pill--categorie { margin-top: 0.9rem; }
.fiche-enseigne__contact {
	margin-top: 1.5rem;
	font-size: var(--fs-titre-card); /* 22px, comme la maquette */
}
/* reset des marges (p) puis espace maquette de 20px entre Horaires / site / téléphone.
   La règle « + * » passe APRÈS le reset et .fiche-enseigne__lien, donc elle gagne. */
.fiche-enseigne__contact > * { margin-block: 0; }
.fiche-enseigne__lien { display: flex; align-items: center; gap: 10px; }
.fiche-enseigne__contact > * + * { margin-top: 20px; }
.fiche-enseigne__lien a { text-decoration: underline; }
.contact-ico { display: inline-grid; place-items: center; flex: 0 0 auto; }
.contact-ico svg { inline-size: 1.3em; block-size: 1.3em; display: block; }
/* Accordéon horaires : en-tête (horloge + Horaires + flèche) 22px bold ; la flèche
   pivote à l'ouverture, la liste des jours se déplie — jours en bold, heures en
   regular (retour client 2026-08-05). */
.horaires-accordeon {
	font-size: var(--fs-titre-card); /* 22px, comme la maquette */
	font-weight: 800;

	& summary {
		display: flex;
		align-items: center;
		gap: 10px;
		cursor: pointer;
		list-style: none;
	}
	& summary::-webkit-details-marker { display: none; }
	& ul { list-style: none; margin: 0; padding: 0.75rem 0 0; display: flex; flex-direction: column; gap: 6px; font-weight: 400; }
}
.horaires-chevron { display: inline-grid; place-items: center; transition: transform 0.2s; }
.horaires-chevron svg { inline-size: 0.7em; block-size: 0.7em; display: block; }
.horaires-accordeon[open] .horaires-chevron { transform: rotate(180deg); }
/* Photos de la colonne de gauche (maquette 657:669, retour client 2026-09-15) :
   257×155, rayon 10, 40px sous le bloc contact ; plusieurs photos = empilées. */
.fiche-enseigne__photos {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 40px;

	& img { display: block; width: 100%; height: auto; aspect-ratio: 257 / 155; object-fit: cover; border-radius: 10px; }
}
.fiche-enseigne__apropos { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.fiche-enseigne__apropos h2 { font-size: var(--fs-titre-sous-section); margin-bottom: 1rem; }

/* Boutiques similaires : bande grise (via .similaires, marge au-dessus incluse) + cards horizontales. */
.cards-hor { display: flex; flex-wrap: wrap; gap: 20px; }
.card-hor a {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding-right: 1.5rem;
}
.card-hor__logo {
	display: grid;
	place-items: center;
	inline-size: 108px;
	block-size: 108px;
	flex: 0 0 auto;
	border-radius: var(--radius-tile);
	background: #fff;
	box-shadow: var(--ombre);
	overflow: hidden;

	& img { width: 100%; height: 100%; object-fit: contain; }
}
.card-hor__nom { font-size: var(--fs-titre-card); font-weight: 800; }

/* Galerie (Swiper) : image dans .swiper, contrôles sous l'image (comme la maquette). */
.fiche-enseigne__galerie {
	--swiper-theme-color: var(--noir);
	/* min-width:0 : sans ça l'élément grille prend sa largeur min-content
	   (= largeur du contenu Swiper) et l'aspect-ratio de l'image s'emballe. */
	min-width: 0;
	width: 100%;
	align-self: start;
}
.fiche-enseigne__galerie .swiper {
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--blanc-fade);
}
.fiche-enseigne__galerie .swiper-slide { width: 100%; }
.fiche-enseigne__galerie .swiper-slide img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1023 / 440; /* carrousel du design (~2.3:1) */
	object-fit: cover;
}
/* Barre de contrôles : flèches + points, alignés à droite sous l'image. */
.galerie-nav {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 1rem;
	margin-top: 1rem;
}
.galerie-prev, .galerie-next {
	display: inline-grid;
	place-items: center;
	inline-size: 34px;
	block-size: 34px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--noir);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}
.galerie-prev.swiper-button-disabled, .galerie-next.swiper-button-disabled { opacity: 0.3; cursor: default; }
/* width auto !important : Swiper force width:100% via .swiper-pagination-horizontal
   (CSS vendor chargé après le nôtre) ; sans ça les flèches s'écartent au lieu de se grouper. */
.galerie-dots { display: flex; align-items: center; gap: 9px; width: auto !important; }
.galerie-dots .swiper-pagination-bullet {
	inline-size: 9px;
	block-size: 9px;
	border-radius: 50%;
	background: var(--noir);
	opacity: 0.25;
	cursor: pointer;
	transition: opacity 0.15s;
}
.galerie-dots .swiper-pagination-bullet-active { opacity: 1; }

/* ------------------------------------------------------------ le centre
   Mesures maquette (1440) : cartes 319 / 461 / 460, gouttières 40, padding 40, rayon 20 ;
   titres 28 (interligne 22), textes 20 ; icônes services 32 de large, rangées espacées de 40 ;
   carte Accès centrée verticalement, accès espacés de 40, textes 28 gras interligne 25,
   badges 47 de haut (padding 18, gap 20 / 23). Les icônes (SVG de la maquette) s'affichent à
   leur taille intrinsèque ; bus et autoroute intègrent leur marge droite (61 de large). */
.le-centre__grid {
	display: grid;
	grid-template-columns: 319fr 461fr 460fr;
	gap: var(--gap-grille);
	align-items: stretch;
}
.le-centre__bloc {
	background: var(--gris);
	border-radius: var(--radius-tile);
	padding: clamp(1.25rem, 2.8vw, 40px);
}
.le-centre__bloc--acces { display: flex; flex-direction: column; justify-content: center; }
.le-centre__bloc h3 {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: var(--fs-titre-sous-section);
	line-height: 22px;
	margin: 0;
}
.le-centre__bloc h3:not(:first-child) { margin-top: 40px; }
.icone-titre { display: inline-grid; place-items: center; }
.icone-titre svg { inline-size: 26px; block-size: 26px; display: block; }
.horaires-resume, .acces-adresse { margin: 20px 0 0; line-height: 20px; }
.horaires-centre { list-style: none; padding: 0; margin: 20px 0 0; }
.horaires-centre li { display: flex; justify-content: space-between; max-width: 16em; }
.services { list-style: none; padding: 0; margin: 40px 0 0; display: grid; gap: 40px; font-size: var(--fs-p-card); }
.services li { display: flex; align-items: center; gap: 20px; line-height: 1; }
.services__icone { width: auto; height: auto; max-width: 32px; flex: 0 0 auto; }
.acces-liste { margin: 72px 0 3px; display: grid; gap: 40px; }
.acces-rer {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: var(--fs-titre-sous-section);
	font-weight: 700;
	line-height: 25px;
}
.acces-rer__icone { width: auto; height: auto; flex: 0 0 auto; }
/* Badges de lignes (bus) : couleur de fond saisie côté admin (style inline). L'icône est le premier
   élément d'une rangée qui se replie (les badges passent sous l'icône, comme la maquette) ; elle
   déborde de 3,5px de la ligne de 47px des badges. */
.acces-rer:has(.acces-lignes) { flex-wrap: wrap; gap: 23px 20px; margin-top: 2px; }
.acces-rer:has(.acces-lignes) .acces-rer__icone { margin-block: -3.5px; }
.acces-lignes { display: contents; }
.acces-ligne {
	display: inline-flex;
	align-items: center;
	block-size: 47px;
	padding: 0 20px;
	border-radius: 8px;
	font-size: clamp(1.5rem, 1rem + 1.4vw, 34px);
	background: var(--noir);
	color: #fff;
	line-height: 1;
}
.le-centre__carte {
	border-radius: var(--radius);
	overflow: hidden;
	min-height: 260px;
	background: var(--blanc-fade);

	& iframe { width: 100%; height: 100%; border: 0; display: block; }
}

/* ------------------------------------------------------------ footer
   Mesures du composant Figma : padding 60px, logo 124px, « Bay 1 » 28px,
   adresse/nav 20px, socials 35px (gap 14), Newsletter dégradé Blanc Fade 24px. */
.site-footer {
	background: var(--noir);
	color: var(--blanc);
	margin-top: clamp(2.5rem, 7vw, 5rem);
	padding-block: clamp(2.5rem, 5vw, 60px);
}
/* ...sauf quand il suit une bande grise (Similaire / Boutiques) : collé, pas de bande blanche. */
.similaires + .site-footer { margin-top: 0; }
/* Signature agence + mentions légales (maquette 663:574) : bande Blanc Flat 2, Bold, padding 20/60 ; 15px comme l’accroche newsletter (client : 18px « énorme »). */
.site-footer__signature {
	background: var(--gris);
	color: var(--noir);
	margin-top: clamp(2.5rem, 5vw, 60px);
	margin-bottom: calc(-1 * clamp(2.5rem, 5vw, 60px));
	padding: 20px clamp(1rem, 4vw, 60px);
	text-align: center;
	font-weight: 800;
	font-size: 15px; /* comme « Recevez les actus… » (retour Shops 2026-09-18) */

	& p { margin: 0; }
	& a { text-decoration: none; }
	& a:hover, & a:focus-visible { text-decoration: underline; }
}
.site-footer__inner {
	width: min(100% - 4rem, var(--conteneur));
	margin-inline: auto;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: clamp(1.5rem, 4vw, 3rem);
	font-size: var(--fs-paragraphe);
}
.site-footer__coords { display: flex; flex-direction: column; gap: 14px; }
.site-footer__coords p { margin: 0; }
.site-footer__title { font-weight: 800; font-size: var(--fs-titre-sous-section); margin: 0; }
.site-footer__nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.site-footer__nav a:hover { text-decoration: underline; }
.site-footer__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	align-self: stretch;
	gap: 0; /* pas d'espace en desktop (restauré en mobile) */
}
.site-footer__socials { display: flex; gap: 14px; }
.site-footer__socials a {
	display: inline-grid;
	place-items: center;
	inline-size: 35px;
	block-size: 35px;
	border-radius: 50%;
	background: var(--blanc);
	color: var(--noir);

	& svg { inline-size: 60%; block-size: 60%; }
}
.btn-newsletter {
	display: inline-block;
	padding: 10px 20px;
	border-radius: 80px;
	background: var(--blanc-fade);
	color: var(--noir);
	font-weight: 800;
	font-size: var(--fs-menu);
	text-transform: uppercase;
	transition: filter 0.15s;
}
.btn-newsletter:hover { filter: brightness(0.94); }

/* Formulaire newsletter (footer) */
.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.newsletter { width: min(100%, 300px); text-align: left; }
.newsletter__titre { margin: 0; font-size: var(--fs-menu); font-weight: 800; text-transform: uppercase; }
.newsletter__accroche { margin: 0.5rem 0 1rem; font-size: 15px; opacity: 0.8; }
.newsletter__champ { position: relative; }
.newsletter__champ input {
	font: inherit;
	font-size: 16px;
	width: 100%;
	padding: 14px 62px 14px 20px;
	border: 0;
	border-radius: 60px;
	background: var(--blanc);
	color: var(--noir);
}
.newsletter__champ input::placeholder { color: #9a9aa2; }
.newsletter__champ input:focus-visible { outline: 2px solid #F33589; outline-offset: 2px; }
.newsletter__champ button {
	position: absolute;
	inset-inline-end: 5px;
	inset-block: 5px;
	display: inline-grid;
	place-items: center;
	inline-size: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--noir);
	color: var(--blanc);
	cursor: pointer;
	transition: background 0.15s;
}
.newsletter__champ button:hover { background: var(--rose-fade); }
.newsletter__champ button svg { inline-size: 22px; block-size: 22px; }
.newsletter.is-envoi button { opacity: 0.6; pointer-events: none; }
.newsletter__consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 12px;
	font-size: 13px;
	line-height: 1.35;
	opacity: 0.85;
	cursor: pointer;
}
.newsletter__consent input { flex: 0 0 auto; margin-top: 2px; accent-color: #F33589; }
.newsletter__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.newsletter__statut { margin: 10px 0 0; min-height: 1.2em; font-size: 14px; font-weight: 700; }
.newsletter__statut[data-type="ok"] { color: #BFE771; }
.newsletter__statut[data-type="erreur"] { color: #FF9EC6; }

/* ------------------------------------------------------------ responsive
   ⚠️ Pas de maquette mobile fournie — version composée dans l'esprit du desktop, à valider. */

/* Desktop étroit (981–1266px) : la barre de recherche prenait trop de place
   et forçait la nav sur deux lignes. On la rétrécit et on resserre les espaces. */
@media (min-width: 981px) and (max-width: 1266px) {
	.site-header { gap: clamp(1rem, 2vw, 20px); }
	.nav-menu { gap: 4px; }
	.nav-menu a { padding: 10px 14px; }
	.site-header__tools { gap: 12px; }
	.search-bar input {
		width: 170px;
		padding: 12px 18px;
		font-size: 16px;
	}
}

/* Tablette / mobile large : le header passe en menu burger. */
@media (max-width: 980px) {
	.site-header {
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 20px clamp(1rem, 4vw, 30px);
	}
	.logo-bay1 { inline-size: 72px; }
	.site-header__burger { display: flex; }
	.site-header__panel {
		/* Toujours dans le flux (replié) pour permettre une transition fluide. */
		display: flex;
		order: 3;
		flex: 1 0 100%; /* pleine largeur, passe sous le logo+burger */
		flex-direction: column;
		align-items: stretch;
		gap: 1.5rem;
		overflow: hidden;
		max-height: 0;
		padding-top: 0;
		opacity: 0;
		transform: translateY(-8px);
		pointer-events: none;
		transition: max-height .34s ease, opacity .26s ease, transform .34s ease, padding-top .34s ease;
	}
	.site-header.menu-ouvert .site-header__panel {
		max-height: 80vh;
		padding-top: 1.25rem;
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}
	.nav-menu { flex-direction: column; align-items: flex-start; gap: 4px; font-size: 1.5rem; }
	.nav-menu a { display: block; }
	.site-header__tools { flex-wrap: wrap; gap: 1rem; }
	.search-bar { flex: 1 1 12rem; }
	.search-bar input { min-width: 0; width: 100%; }
	.menu-ouvert .site-header__burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
	.menu-ouvert .site-header__burger span:nth-child(2) { opacity: 0; }
	.menu-ouvert .site-header__burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}

@media (prefers-reduced-motion: reduce) {
	.site-header__panel, .site-header__burger span { transition: none; }
}

@media (max-width: 900px) {
	.fiche-enseigne, .le-centre__grid { grid-template-columns: minmax(0, 1fr); }
	.fiche-enseigne__logo { max-inline-size: 257px; }
	/* Footer mobile : tout empilé et centré, gap des actions conservé. */
	.site-footer__inner { flex-direction: column; align-items: center; text-align: center; }
	.site-footer__coords { align-items: center; }
	.site-footer__nav ul { align-items: center; }
	.site-footer__actions { align-items: center; align-self: auto; gap: 44px; }
	.newsletter { text-align: center; }
	.newsletter__consent { justify-content: center; }
}

/* Téléphone : grilles compactes, sections resserrées. */
@media (max-width: 620px) {
	.home-section__head { flex-wrap: wrap; gap: 0.75rem; }
	.cards--4, .cards--5 { grid-template-columns: repeat(2, 1fr); gap: clamp(0.75rem, 3vw, 1.25rem); }
	.home .cards--5 { grid-auto-rows: auto; row-gap: clamp(0.75rem, 3vw, 1.25rem); overflow: visible; }
	.cards--6 { grid-template-columns: repeat(3, 1fr); gap: clamp(0.75rem, 3vw, 1.25rem); }
	/* Enseignes home : le carrousel est détruit ≤620px, la grille vit sur le wrapper. */
	.cards--logos .swiper-wrapper {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: clamp(0.75rem, 3vw, 1.25rem);
		align-items: stretch;
	}
	.cards--logos .swiper-slide { width: auto; height: auto; }
	.similaires .cards--3 { grid-template-columns: repeat(2, 1fr); }
	.cards--3 { gap: clamp(0.75rem, 3vw, 1.25rem); }
	.detail__banniere { aspect-ratio: 3 / 2; }
	.detail__contenu { max-width: none; }
}

@media (max-width: 400px) {
	.cards--6 { grid-template-columns: repeat(2, 1fr); }
	.cards--logos .swiper-wrapper { grid-template-columns: repeat(2, 1fr); }
}