/* =========================================================================
   Panier de Région — feuille de style unique

   Montserrat est hébergée sur le serveur : aucune requête vers Google, donc
   aucun transfert de données personnelles et une dépendance externe de moins.
   Un seul fichier variable couvre toutes les graisses de 400 à 800.
   ========================================================================= */

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/montserrat-variable.woff2") format("woff2-variations");
	/* Sous-ensemble latin : les glyphes au-delà retombent sur la police système. */
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
		U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Jetons -------------------------------------------------------------- */

:root {
	/*
	 * Bleu blanc rouge, repris de l'identité existante plutôt qu'inventé :
	 * le marine et le brique sont échantillonnés dans le logo, le bleu vif et
	 * le crème sont ceux de la V1. Le marine porte la structure, le brique
	 * n'intervient qu'en accent — un aplat des trois couleurs à parts égales
	 * ferait drapeau, pas marque.
	 */
	--bleu: #002050;        /* logo, marine profond */
	--bleu-vif: #004aad;    /* V1, liens et survols */
	--bleu-pale: #e6ecf5;
	--bleu-brume: #f4f7fb;
	--rouge: #a02828;       /* logo, brique */
	--rouge-vif: #bd3232;
	--rouge-pale: #fdf1f1;
	/* Deux teintes réservées au fond marine : le gris et la brique y tombent
	   sous le seuil AA, l'or et le bleu clair passent respectivement à 7,3:1
	   et 11,4:1 sur #002050. */
	--bleu-clair: #cfe0f7;
	--or: #e2b06a;
	--creme: #f5f5ef;       /* V1, fond de section */
	--encre: #1c1c1c;
	--gris: #656c7a;      /* 4.82:1 sur crème, 5.28:1 sur blanc — WCAG AA */
	--gris-pale: #9aa0a8;
	--bord: #e3e5e8;
	--blanc: #fff;

	--sans: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	/* Serif système pour l'accent en italique des titres : le contraste entre
	   la grotesque et l'italique est la signature typographique reprise de la
	   référence, et une police système ne coûte aucune requête. */
	--serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;

	--largeur: 1240px;
	--gouttiere: clamp(1rem, 4vw, 2.5rem);

	--r-s: 8px;
	--r-m: 12px;
	--r-l: 18px;
	--r-pilule: 999px;

	/* Ombres teintées de marine plutôt que de noir : elles se fondent dans la
	   palette au lieu de grisailler les fonds crème. */
	--ombre-s: 0 1px 2px rgb(0 32 80 / 6%);
	--ombre-m: 0 4px 16px rgb(0 32 80 / 9%);
	--ombre-l: 0 12px 40px rgb(0 32 80 / 14%);

	--t: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Base ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

/*
 * L'en-tête est collant : sans cette réserve, sauter à #faq ou #carte amène
 * la cible sous la barre, et le titre de section reste caché.
 */
[id] { scroll-margin-top: 7rem; }

body {
	margin: 0;
	font-family: var(--sans);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--encre);
	background: var(--blanc);
	-webkit-font-smoothing: antialiased;
}

img, picture, video, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--bleu); text-underline-offset: 3px; }
a:hover { color: var(--rouge); }

h1, h2, h3, h4 {
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0 0 0.5em;
	color: var(--encre);
	text-wrap: balance;
}

h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.125rem); }
h3 { font-size: clamp(1.0625rem, 2vw, 1.25rem); }

p { margin: 0 0 1rem; }

:focus-visible {
	outline: 2px solid var(--bleu);
	outline-offset: 3px;
	border-radius: 2px;
}

.saut-contenu {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--bleu);
	color: var(--blanc);
	border-radius: var(--r-s);
}

.saut-contenu:focus { left: 1rem; top: 1rem; }

/* --- Mise en page -------------------------------------------------------- */

.contenant {
	width: min(100% - (var(--gouttiere) * 2), var(--largeur));
	margin-inline: auto;
}

.section { padding-block: clamp(3rem, 7vw, 5rem); }
.section--creme { background: var(--creme); }
.section--brume { background: var(--bleu-brume); }
.section--bleu { background: var(--bleu); color: var(--blanc); }
.section--bleu h1, .section--bleu h2, .section--bleu h3 { color: var(--blanc); }

.section__intro { max-width: 58ch; margin-bottom: 2.5rem; }

.section__intro p {
	font-size: 1.0625rem;
	color: var(--gris);
	margin: 0;
}

.section--bleu .section__intro p { color: rgb(255 255 255 / 78%); }

.surtitre {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--rouge);
	margin-bottom: 0.6rem;
}

/* --- Boutons ------------------------------------------------------------- */

/*
 * Le « display » écrit ici l'emporte sur le « display: none » que le navigateur
 * applique à un élément masqué : un bouton passé en hidden par le script
 * restait visible. La règle rend l'attribut à nouveau opérant.
 */
.bouton[hidden] { display: none; }

.bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.8rem 1.5rem;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	border: 1.5px solid transparent;
	border-radius: var(--r-s);
	cursor: pointer;
	transition: background var(--t), color var(--t), border-color var(--t), transform var(--t);
}

.bouton:active { transform: translateY(1px); }

.bouton--principal { background: var(--rouge); color: var(--blanc); }
.bouton--principal:hover { background: var(--rouge-vif); color: var(--blanc); }

.bouton--bleu { background: var(--bleu); color: var(--blanc); }
.bouton--bleu:hover { background: var(--bleu-vif); color: var(--blanc); }

.bouton--secondaire {
	background: transparent;
	border-color: var(--bord);
	color: var(--encre);
}

.bouton--secondaire:hover {
	border-color: var(--bleu);
	color: var(--bleu);
	background: var(--bleu-brume);
}

/*
 * Bouton posé sur une bande de couleur. Il portait ses couleurs en style en
 * ligne, qui l'emportait sur la règle de survol : le fond s'éclaircissait, le
 * texte restait blanc, et le numéro de téléphone disparaissait. En classe, le
 * survol reprend la main et le texte passe à l'encre.
 */
.bouton--sur-fonce {
	background: transparent;
	border-color: rgb(255 255 255 / 45%);
	color: var(--blanc);
}

.bouton--sur-fonce:hover,
.bouton--sur-fonce:focus-visible {
	background: var(--blanc);
	border-color: var(--blanc);
	color: var(--encre);
}

.bouton--discret {
	padding: 0.55rem 1rem;
	font-size: 0.875rem;
	background: var(--bleu-pale);
	color: var(--bleu);
}

.bouton--discret:hover { background: var(--bleu); color: var(--blanc); }

.section--bleu .bouton--secondaire { border-color: rgb(255 255 255 / 35%); color: var(--blanc); }
.section--bleu .bouton--secondaire:hover { background: var(--blanc); color: var(--bleu); border-color: var(--blanc); }

.bouton.est-ajoute { background: var(--bleu); color: var(--blanc); }

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

/* Utilitaire d'accessibilité : visible des seuls lecteurs d'écran. */
.ecran-lecteur {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Ligne 1 : bande d'information, en trois zones. */

.barre-info {
	background: var(--creme);
	border-bottom: 1px solid var(--bord);
	color: var(--gris);
	font-size: 0.8125rem;
}

.barre-info__contenu {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 40px;
}

/*
 * Trois mentions de même rang : même graisse, même couleur, aucun
 * pictogramme. La bande énonce des conditions de vente, elle ne hiérarchise
 * rien ; une seule d'entre elles en gras faisait passer les deux autres pour
 * des notes de bas de page.
 */
.barre-info__item {
	display: inline-flex;
	align-items: center;
	color: var(--gris);
	font-weight: 500;
}

/* Ligne 2 : barre principale. */

.entete {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--blanc);
	box-shadow: var(--ombre-s);
}

.entete__barre {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2rem);
	min-height: 84px;
}

.entete__logo {
	display: inline-flex;
	align-items: center;
	/* Le logo est panoramique : sans marge verticale sa zone cliquable ne
	   fait que 26 px de haut, sous le seuil confortable au doigt. */
	padding-block: 0.6rem;
	font-size: 1.1875rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--bleu);
	text-decoration: none;
	white-space: nowrap;
	flex: none;
}

/*
 * Le logo mesure 500x100 : on le borne en largeur, un logo panoramique se
 * dimensionnant par sa largeur. La règle cible aussi .custom-logo, la classe
 * que WordPress pose sur l'image quelle que soit la structure alentour.
 */
.entete__logo img,
.entete__logo .custom-logo {
	width: auto;
	max-width: 210px;
	max-height: 54px;
	object-fit: contain;
}

/* Recherche */

.recherche {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	max-width: 520px;
}

.recherche__icone {
	position: absolute;
	left: 1rem;
	width: 18px;
	height: 18px;
	color: var(--gris-pale);
	pointer-events: none;
}

.recherche input[type="search"] {
	width: 100%;
	padding: 0.75rem 1.1rem 0.75rem 2.85rem;
	font-family: inherit;
	font-size: 0.9375rem;
	color: var(--encre);
	background: var(--blanc);
	border: 1.5px solid var(--bord);
	border-radius: var(--r-pilule);
	transition: border-color var(--t), box-shadow var(--t);
	-webkit-appearance: none;
	appearance: none;
}

.recherche input[type="search"]:focus {
	outline: none;
	border-color: var(--bleu-vif);
	box-shadow: 0 0 0 3px var(--bleu-pale);
}

.recherche input::placeholder { color: var(--gris-pale); }

/*
 * Seize pixels sur tous les champs, sans condition.
 *
 * En dessous de cette taille, iOS agrandit la page dès qu'un champ reçoit le
 * focus et ne la remet jamais à l'échelle : la recherche était à 15 px. La
 * règle n'est pas conditionnée à une requête média — ni la largeur ni
 * « pointer: coarse » ne décrivent exactement les appareils concernés, et
 * l'écart d'un pixel ne se voit pas au clavier-souris.
 */
.recherche input[type="search"],
.devis__champ input,
.devis__champ select,
.devis__champ textarea,
.demande__quantite input {
	font-size: 16px;
}

/* Actions */

.entete__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-left: auto;
	flex: none;
}

.pilule {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	padding: 0.7rem 1.35rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	border-radius: var(--r-pilule);
	transition: background var(--t), color var(--t), transform var(--t);
}

.pilule:active { transform: translateY(1px); }
.pilule svg { width: 16px; height: 16px; flex: none; }

.pilule--rouge { background: var(--rouge); color: var(--blanc); }
.pilule--rouge:hover { background: var(--rouge-vif); color: var(--blanc); }

.pilule--bleu { background: var(--bleu); color: var(--blanc); }

/*
 * Pilule de contour : présente sans peser. La brochure est une sortie
 * secondaire, elle ne doit pas rivaliser avec l'appel au devis, seul aplat
 * coloré de la barre.
 */
.pilule--contour {
	background: transparent;
	border: 1.5px solid var(--bord);
	color: var(--bleu);
}

.pilule--contour:hover {
	border-color: var(--bleu);
	background: var(--bleu-brume);
	color: var(--bleu);
}

/*
 * Le lien de brochure du menu déplié ne sert que sous 820 px.
 *
 * Le sélecteur est qualifié par le conteneur : « .nav-principale a » pèse une
 * classe et un élément, soit plus qu'une classe seule, et l'emportait sur
 * « .nav-brochure » quel que soit l'ordre des règles.
 */
.nav-principale .nav-brochure { display: none; }

/*
 * Lien téléphone hors en-tête (encadré de devis, pied de page). Une classe
 * dédiée plutôt que la réutilisation de celle de l'en-tête, qui lui donnait sa
 * hauteur par la barre et le laissait à 19 px ailleurs.
 */
.lien-tel {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 36px;
	padding-block: 0.4rem;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--bleu);
	text-decoration: none;
}

.lien-tel:hover { color: var(--rouge); }
.pied .lien-tel { color: rgb(255 255 255 / 72%); font-size: 0.9375rem; }
.pied .lien-tel:hover { color: var(--rouge-vif); }
.pilule--bleu:hover { background: var(--bleu-vif); color: var(--blanc); }

/*
 * Panier de devis : icône isolée dans un carré plutôt qu'un bouton texte, pour
 * ne pas concurrencer visuellement l'appel à l'action « Devis rapide ».
 */
.badge-devis {
	position: relative;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	color: var(--bleu);
	text-decoration: none;
	background: var(--creme);
	border-radius: var(--r-m);
	transition: background var(--t), color var(--t);
}

.badge-devis:hover { background: var(--bleu-pale); color: var(--bleu); }
.badge-devis__icone svg { width: 21px; height: 21px; }
.badge-devis__texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.badge-devis__compte {
	position: absolute;
	top: -5px;
	right: -5px;
	display: grid;
	place-items: center;
	min-width: 21px;
	height: 21px;
	padding-inline: 5px;
	font-size: 0.6875rem;
	font-weight: 700;
	color: var(--blanc);
	background: var(--gris-pale);
	border: 2px solid var(--blanc);
	border-radius: var(--r-pilule);
	transition: background var(--t);
}

.badge-devis.est-rempli .badge-devis__compte { background: var(--rouge); }

/* Ligne 3 : barre de navigation. */

.barre-nav { border-top: 1px solid var(--bord); }

.barre-nav__contenu {
	display: flex;
	align-items: stretch;
	gap: 1.5rem;
	min-height: 50px;
}

.barre-nav__bloc { display: flex; flex: none; }

.barre-nav__catalogue {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0 1.5rem;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--blanc);
	text-decoration: none;
	background: var(--bleu);
	border-radius: var(--r-s) var(--r-s) 0 0;
	transition: background var(--t);
}

.barre-nav__catalogue:hover { background: var(--bleu-vif); color: var(--blanc); }
.barre-nav__catalogue svg { width: 17px; height: 17px; flex: none; }

/*
 * Deux onglets marine accolés en un seul bloc : seuls les angles extérieurs
 * sont arrondis, et un filet clair tient lieu de séparation. Un simple écart
 * les aurait fait lire comme deux boutons sans rapport.
 */
.barre-nav__bloc > :first-child { border-radius: var(--r-s) 0 0 0; }
.barre-nav__bloc > :last-child { border-radius: 0 var(--r-s) 0 0; }
.barre-nav__bloc > :only-child { border-radius: var(--r-s) var(--r-s) 0 0; }

.nav-regions {
	position: relative;
	display: flex;
}

.barre-nav__catalogue--regions {
	cursor: pointer;
	list-style: none;
	border-left: 1px solid rgb(255 255 255 / 20%);
	border-radius: 0 var(--r-s) 0 0;
}

/* Le marqueur natif de <summary> doublerait le chevron dessiné. */
.barre-nav__catalogue--regions::-webkit-details-marker { display: none; }
.barre-nav__catalogue--regions::marker { content: ""; }

.nav-regions__chevron {
	width: 14px;
	height: 14px;
	margin-left: -0.15rem;
	transition: transform var(--t);
}

.nav-regions[open] > .barre-nav__catalogue--regions { background: var(--bleu-vif); }
.nav-regions[open] .nav-regions__chevron { transform: rotate(180deg); }

.nav-regions__panneau {
	position: absolute;
	z-index: 40;
	top: 100%;
	left: 0;
	width: max-content;
	max-width: min(46rem, calc(100vw - 2 * var(--gouttiere)));
	padding: 1.25rem 1.5rem 1rem;
	background: var(--blanc);
	border: 1px solid var(--bord);
	border-top: 0;
	border-radius: 0 var(--r-m) var(--r-m) var(--r-m);
	box-shadow: var(--ombre-l);
}

.nav-regions__liste {
	columns: 3;
	column-gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav-regions__liste li { break-inside: avoid; }

.nav-regions__liste a {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.35rem 0.5rem;
	margin-left: -0.5rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--encre);
	text-decoration: none;
	border-radius: var(--r-s);
	transition: background var(--t), color var(--t);
}

/*
 * Vignette du coffret devant chaque région. Le fond très clair lui donne le
 * cadre que le détourage ne fournit pas ; « contain » garde le couvercle
 * entier, c'est lui qui identifie la région d'un coup d'oeil.
 */
.nav-regions__vignette {
	flex: 0 0 auto;
	width: 44px;
	height: 33px;
	border-radius: 5px;
	overflow: hidden;
	background: linear-gradient(160deg, var(--blanc), var(--creme));
	border: 1px solid var(--bord);
}

.nav-regions__vignette img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.nav-regions__liste a:hover,
.nav-regions__liste a:focus-visible {
	background: var(--bleu-brume);
	color: var(--bleu-vif);
}


/*
 * Sous 1100 px, le panneau ancré sous son onglet sort de l'écran : sa largeur
 * est bornée par la fenêtre, mais son bord gauche part déjà à 240 px. Il est
 * donc rattaché à la barre entière plutôt qu'à l'onglet, et s'étend d'un bord
 * à l'autre.
 */
@media (max-width: 1100px) {
	.barre-nav { position: relative; }
	.nav-regions { position: static; }

	.nav-regions__panneau {
		left: var(--gouttiere);
		right: var(--gouttiere);
		width: auto;
		max-width: none;
		border-top: 1px solid var(--bord);
		border-radius: 0 0 var(--r-m) var(--r-m);
		/* Au-dessus du menu mobile, qui occupe la même place et le masquait :
		   les clics tombaient alors sur les liens du menu. */
		z-index: 101;
	}

	.nav-regions__liste { columns: 2; column-gap: 1.25rem; }
}

@media (max-width: 1100px) {
	/*
	 * Treize régions empilées dépassent la fenêtre, et le panneau est ancré à
	 * une barre fixe : la page ne le fait pas défiler, il est simplement coupé.
	 * Il défile donc lui-même.
	 */
	.nav-regions__panneau {
		max-height: 62svh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}
}

@media (max-width: 420px) {
	.nav-regions__liste { columns: 1; }
	.barre-nav__catalogue { padding: 0 1rem; font-size: 0.875rem; }
}

/*
 * Défilement horizontal plutôt que masquage : entre la disparition du menu
 * déroulant (820 px) et la largeur où tous les liens tiennent (~1200 px),
 * overflow:hidden les rendait purement inaccessibles.
 */
.nav-principale {
	display: flex;
	align-items: center;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
}

.nav-principale::-webkit-scrollbar { display: none; }
.nav-principale li { scroll-snap-align: start; }

.nav-principale ul {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-principale a {
	display: block;
	padding: 0.45rem 0.8rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--encre);
	text-decoration: none;
	white-space: nowrap;
	border-radius: var(--r-s);
	transition: background var(--t), color var(--t);
}

.nav-principale a:hover {
	background: var(--bleu-brume);
	color: var(--bleu);
}

/*
 * Page courante. Deux signaux plutôt qu'un : la couleur et la graisse pour
 * l'œil, un filet brique sous le lien pour ceux qui distinguent mal les
 * teintes. Les classes de WordPress et la nôtre sont traitées ensemble, le
 * menu venant tantôt de wp_nav_menu, tantôt du repli.
 */
.nav-principale .est-actif,
.nav-principale .current-menu-item > a,
.nav-principale .current-menu-ancestor > a,
.nav-principale .current-menu-parent > a,
.nav-principale .current_page_item > a {
	position: relative;
	font-weight: 700;
	color: var(--bleu);
	background: var(--bleu-brume);
}

.nav-principale .est-actif::after,
.nav-principale .current-menu-item > a::after,
.nav-principale .current-menu-ancestor > a::after,
.nav-principale .current-menu-parent > a::after,
.nav-principale .current_page_item > a::after {
	content: "";
	position: absolute;
	right: 0.8rem;
	bottom: 0.15rem;
	left: 0.8rem;
	height: 2px;
	border-radius: 2px;
	background: var(--rouge);
}

/*
 * Contact, seule entrée de la barre qui n'est pas un guide. Elle se distingue
 * par la couleur seule, celle de la brique du logo. Pas de cadre ni d'aplat :
 * la barre resterait une rangée de liens avec un bouton posé au bout, et il y
 * en a déjà un, rouge, à quelques centimètres au-dessus.
 */
.nav-principale .nav-contact {
	color: var(--rouge);
	font-weight: 600;
}

.nav-principale .nav-contact:hover,
.nav-principale .nav-contact:focus-visible {
	color: var(--rouge-vif);
	background: var(--rouge-pale);
}

/* Page courante : le fond bleu pâle des autres entrées effacerait la couleur
   qui distingue celle-ci. */
.nav-principale .nav-contact.est-actif {
	color: var(--rouge);
	background: var(--rouge-pale);
}

/* Onglet marine courant : il s'éclaircit, comme au survol mais en permanence. */
.barre-nav__catalogue.est-actif { background: var(--bleu-vif); }

.nav-regions__liste .est-actif {
	background: var(--bleu-brume);
	color: var(--bleu-vif);
	box-shadow: inset 2px 0 0 var(--rouge);
}

.nav-bascule {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: none;
	background: none;
	border: 1px solid var(--bord);
	border-radius: var(--r-s);
	cursor: pointer;
	color: var(--encre);
}

.nav-bascule svg { width: 20px; height: 20px; }

/* --- Héros --------------------------------------------------------------- */

/*
 * Héros en deux colonnes plutôt qu'un texte posé sur une photo assombrie :
 * les visuels produit sont verticaux et de bonne qualité, les écraser sous un
 * voile coloré les rendait ternes alors qu'ils sont l'argument de vente.
 */
.heros {
	position: relative;
	background: var(--creme);
	overflow: hidden;
}

.heros__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
	min-height: min(72vh, 600px);
	padding-block: clamp(3rem, 6vw, 4.5rem);
}

/*
 * Largeur exprimée en rem et non en ch : l'unité ch dépend de la largeur du
 * glyphe « 0 », étroit dans Montserrat, ce qui rabotait la colonne à ~300 px
 * et faisait casser le titre sur quatre lignes.
 */
.heros__contenu { max-width: 34rem; }
.heros .surtitre { color: var(--rouge); }

.heros h1 {
	margin-bottom: 1rem;
	font-size: clamp(2.125rem, 3.4vw, 3rem);
	line-height: 1.06;
}

.heros h1 em { font-style: normal; color: var(--bleu); }

.heros__accroche {
	font-size: clamp(1rem, 1.6vw, 1.125rem);
	color: var(--gris);
	margin-bottom: 1.75rem;
}

.heros__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.heros__preuves {
	flex-direction: row;
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--bord);
	font-size: 0.875rem;
	color: var(--gris);
}

.heros__preuve { display: inline-flex; align-items: center; gap: 0.4rem; }
.heros__preuve svg { width: 16px; height: 16px; color: var(--bleu); flex: none; }

.heros__visuel { position: relative; }

.heros__image {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	/* Le sujet est dans la moitié basse des photos produit : cadrer au centre
	   couperait le cageot plutôt que le fond. */
	object-position: 50% 62%;
	border-radius: var(--r-l);
	box-shadow: var(--ombre-l);
}

/* Pastille de prix : ancre le discours dans le concret dès l'accueil. */
.heros__pastille {
	position: absolute;
	left: -1.25rem;
	bottom: 1.75rem;
	padding: 0.9rem 1.25rem;
	background: var(--blanc);
	border-radius: var(--r-m);
	box-shadow: var(--ombre-l);
	text-align: center;
}

.heros__pastille small {
	display: block;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gris-pale);
}

.heros__pastille strong { font-size: 1.375rem; color: var(--bleu); }

/* --- Cartes -------------------------------------------------------------- */

.grille {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 285px), 1fr));
	gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

.carte {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--blanc);
	border: 1px solid var(--bord);
	border-radius: var(--r-l);
	overflow: hidden;
	transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}

.carte:hover {
	transform: translateY(-4px);
	box-shadow: var(--ombre-l);
	border-color: transparent;
}

.carte__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--bleu-pale);
	overflow: hidden;
}

.carte__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/*
 * Les couvertures d'articles portent leur titre : rognées au format 4:3 des
 * fiches produit, elles perdaient un quart de leur largeur et le texte se
 * retrouvait coupé aux deux bouts. Elles gardent donc leur format d'origine.
 */
.carte--article .carte__media { aspect-ratio: 16 / 9; }

.carte:hover .carte__media img { transform: scale(1.04); }

.carte__etiquette {
	position: absolute;
	top: 0.85rem;
	left: 0.85rem;
	padding: 0.3rem 0.7rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bleu);
	background: rgb(255 255 255 / 94%);
	border-radius: var(--r-pilule);
	backdrop-filter: blur(4px);
}

.carte__corps { display: flex; flex-direction: column; flex: 1; padding: 1.25rem; }

.carte__titre { font-size: 1.0625rem; margin-bottom: 0.3rem; }
.carte__titre a { color: inherit; text-decoration: none; }
.carte__titre a::after { content: ""; position: absolute; inset: 0; z-index: 1; }

.carte__extrait {
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--gris);
	margin-bottom: 1rem;
}

/*
 * Prix et bouton empilés plutôt que côte à côte : dans une carte de 285 px,
 * les mettre sur une même ligne cassait « À partir de » et le montant sur
 * trois lignes chacun.
 */
.carte__pied {
	display: grid;
	gap: 0.75rem;
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid var(--bord);
}

.carte__prix {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--encre);
	white-space: nowrap;
}

.carte__prix small {
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--gris-pale);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.carte__pied .ajout-devis,
.carte__pied .bouton { width: 100%; }

/* Le bouton doit passer au-dessus du lien qui couvre la carte. */
.carte .ajout-devis { position: relative; z-index: 2; }

/* --- Facettes ------------------------------------------------------------ */

.facettes {
	display: grid;
	gap: 1rem;
	margin-bottom: 2.5rem;
}

.facettes__groupe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

.facettes__label {
	flex-basis: 100%;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gris-pale);
	margin-bottom: 0.15rem;
}

.facette {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.45rem 0.95rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--encre);
	text-decoration: none;
	background: var(--blanc);
	border: 1px solid var(--bord);
	border-radius: var(--r-pilule);
	transition: all var(--t);
}

.facette:hover { border-color: var(--bleu); color: var(--bleu); background: var(--bleu-brume); }
.facette[aria-current="true"] { background: var(--bleu); border-color: var(--bleu); color: var(--blanc); }
.facette span { color: var(--gris-pale); font-size: 0.8125rem; }
.facette[aria-current="true"] span { color: rgb(255 255 255 / 65%); }

/* --- Fiche panier -------------------------------------------------------- */

.fiche {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

.fiche__media img { width: 100%; border-radius: var(--r-l); }

.fiche__prix { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.2rem; }
.fiche__mention { font-size: 0.875rem; color: var(--gris); }

.fiche__contenu {
	margin: 1.75rem 0;
	padding: 1.35rem 1.5rem;
	background: var(--bleu-brume);
	border-radius: var(--r-m);
}

.fiche__contenu h2 { font-size: 1rem; margin-bottom: 0.75rem; }
.fiche__contenu ul { margin: 0; padding-left: 1.15rem; font-size: 0.9375rem; }
.fiche__contenu li { margin-bottom: 0.3rem; }

.fiche__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.fiche__actions .ajout-devis { display: contents; }

/* --- Fil d'Ariane -------------------------------------------------------- */

.fil-ariane { padding-block: 1.15rem; font-size: 0.8125rem; color: var(--gris); }
.fil-ariane ol { display: flex; flex-wrap: wrap; gap: 0.45rem; list-style: none; margin: 0; padding: 0; }
.fil-ariane a {
	display: inline-block;
	/* 0.55rem porte la zone tactile à 37 px : à 0.35rem elle plafonnait à 32,
	   sous le seuil confortable au doigt. */
	padding-block: 0.55rem;
	color: var(--gris);
	text-decoration: none;
}
.fil-ariane a:hover { color: var(--bleu); }
.fil-ariane li::after { content: "/"; margin-left: 0.45rem; color: var(--bord); }
.fil-ariane li:last-child::after { content: ""; }
.fil-ariane [aria-current] { color: var(--encre); font-weight: 500; }

/* --- Réassurance --------------------------------------------------------- */

.reassurance {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
	gap: 1.5rem;
}

.reassurance__item {
	padding: 1.5rem;
	background: var(--blanc);
	border: 1px solid var(--bord);
	border-radius: var(--r-m);
}

.reassurance__icone {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-bottom: 0.9rem;
	color: var(--bleu);
	background: var(--bleu-pale);
	border-radius: var(--r-s);
}

.reassurance__icone svg { width: 20px; height: 20px; }
.reassurance__item h3 { font-size: 0.9375rem; margin-bottom: 0.3rem; }
.reassurance__item p { font-size: 0.875rem; line-height: 1.5; color: var(--gris); margin: 0; }

/* --- Panier de devis ----------------------------------------------------- */

.demande__vide {
	padding: 3rem 2rem;
	text-align: center;
	background: var(--bleu-brume);
	border-radius: var(--r-l);
}

.demande__lignes { display: grid; gap: 0.75rem; margin-bottom: 2rem; }

.demande__ligne {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 1.25rem;
	padding: 0.9rem;
	background: var(--blanc);
	border: 1px solid var(--bord);
	border-radius: var(--r-m);
}

.demande__vignette { width: 88px; height: 70px; object-fit: cover; border-radius: var(--r-s); }
.demande__titre { font-size: 1rem; font-weight: 600; margin: 0 0 0.15rem; }
.demande__titre a { color: inherit; text-decoration: none; }
.demande__titre a:hover { color: var(--bleu); }
.demande__meta { font-size: 0.8125rem; color: var(--gris); margin: 0; }

.demande__quantite { display: flex; align-items: center; gap: 0.5rem; }
.demande__quantite label { font-size: 0.8125rem; color: var(--gris); }

.demande__quantite input {
	width: 82px;
	padding: 0.5rem 0.6rem;
	font-family: inherit;
	font-size: 0.9375rem;
	text-align: center;
	border: 1px solid var(--bord);
	border-radius: var(--r-s);
}

.demande__retirer {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	background: none;
	border: 1px solid var(--bord);
	border-radius: var(--r-s);
	color: var(--gris);
	cursor: pointer;
	transition: all var(--t);
}

.demande__retirer:hover { border-color: #c0392b; color: #c0392b; background: #fdf2f2; }
.demande__retirer svg { width: 15px; height: 15px; }

.demande__barre {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.15rem 1.35rem;
	margin-bottom: 2.5rem;
	background: var(--bleu-brume);
	border-radius: var(--r-m);
}

.demande__total { font-size: 0.9375rem; }
.demande__total strong { font-size: 1.25rem; }

/* --- Formulaire ---------------------------------------------------------- */

.devis__colonnes {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 3rem);
	align-items: start;
}

.devis__carte {
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--blanc);
	border: 1px solid var(--bord);
	border-radius: var(--r-l);
	box-shadow: var(--ombre-s);
}

.devis__grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 1.15rem;
}

.devis__champ--large { grid-column: 1 / -1; }

.devis__champ label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	margin-bottom: 0.4rem;
}

.devis__champ input[type="text"],
.devis__champ input[type="email"],
.devis__champ input[type="tel"],
.devis__champ input[type="number"],
.devis__champ select,
.devis__champ textarea {
	width: 100%;
	padding: 0.75rem 0.9rem;
	font-family: inherit;
	font-size: 0.9375rem;
	color: var(--encre);
	background: var(--blanc);
	border: 1.5px solid var(--bord);
	border-radius: var(--r-s);
	transition: border-color var(--t), box-shadow var(--t);
}

.devis__champ input:focus,
.devis__champ select:focus,
.devis__champ textarea:focus {
	outline: none;
	border-color: var(--bleu);
	box-shadow: 0 0 0 3px var(--bleu-pale);
}

.devis__champ textarea { resize: vertical; min-height: 110px; }

.devis__radios { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.devis__radio {
	display: inline-flex !important;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 1.15rem;
	margin-bottom: 0 !important;
	font-size: 0.9375rem;
	font-weight: 500 !important;
	background: var(--blanc);
	border: 1.5px solid var(--bord);
	border-radius: var(--r-s);
	cursor: pointer;
	transition: all var(--t);
}

.devis__radio:hover { border-color: var(--bleu); }
.devis__radio:has(input:checked) { border-color: var(--bleu); background: var(--bleu-brume); color: var(--bleu); }

.devis__requis { color: var(--rouge); }
.devis__aide { display: block; font-size: 0.8125rem; color: var(--gris-pale); margin-top: 0.3rem; }

.devis__erreurs {
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
	background: #fdf3f2;
	border: 1px solid #f3c9c4;
	border-radius: var(--r-m);
	color: #8c2b1f;
}

.devis__erreurs p { margin: 0; font-weight: 600; }
.devis__erreurs ul { margin: 0.5rem 0 0; padding-left: 1.15rem; font-size: 0.9375rem; }

.devis__consentement { margin-top: 1.5rem; font-size: 0.875rem; }
.devis__consentement label { display: flex; align-items: flex-start; gap: 0.6rem; cursor: pointer; }
.devis__consentement input { margin-top: 0.2rem; flex: none; }

.devis__legende { font-size: 0.8125rem; color: var(--gris-pale); }
.devis form > button[type="submit"] { width: 100%; margin-top: 0.75rem; padding-block: 1rem; font-size: 1rem; }

.devis__aparte {
	padding: 1.75rem;
	background: var(--bleu-brume);
	border-radius: var(--r-l);
}

.devis__aparte h2 { font-size: 1.0625rem; }

.devis__etapes { list-style: none; margin: 0; padding: 0; counter-reset: etape; }

.devis__etapes li {
	position: relative;
	counter-increment: etape;
	padding-left: 2.35rem;
	margin-bottom: 1.1rem;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--gris);
}

.devis__etapes li::before {
	content: counter(etape);
	position: absolute;
	left: 0;
	top: -1px;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--blanc);
	background: var(--bleu);
	border-radius: var(--r-pilule);
}

.devis__succes {
	max-width: 58ch;
	margin-inline: auto;
	padding: clamp(2rem, 4vw, 3rem);
	text-align: center;
	background: var(--bleu-brume);
	border-radius: var(--r-l);
}

.devis__succes-icone {
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	margin: 0 auto 1.25rem;
	color: var(--blanc);
	background: var(--bleu);
	border-radius: var(--r-pilule);
}

.devis__succes-icone svg { width: 30px; height: 30px; }

/* --- Notification d'ajout ------------------------------------------------ */

.toast {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 200;
	display: flex;
	align-items: center;
	gap: 1rem;
	max-width: min(calc(100vw - 2.5rem), 420px);
	padding: 1rem 1.15rem;
	background: var(--blanc);
	border: 1px solid var(--bord);
	border-radius: var(--r-m);
	box-shadow: var(--ombre-l);
	transform: translateY(140%);
	opacity: 0;
	transition: transform 260ms cubic-bezier(0.2, 0.9, 0.3, 1), opacity 200ms;
}

.toast.est-visible { transform: translateY(0); opacity: 1; }

.toast__icone {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	flex: none;
	color: var(--blanc);
	background: var(--bleu);
	border-radius: var(--r-pilule);
}

.toast__icone svg { width: 18px; height: 18px; }
.toast__texte { flex: 1; font-size: 0.875rem; line-height: 1.35; }
.toast__texte strong { display: block; font-size: 0.9375rem; }
.toast__lien { font-size: 0.8125rem; font-weight: 700; color: var(--rouge); text-decoration: none; white-space: nowrap; }
.toast__lien:hover { text-decoration: underline; }

/* --- Pied de page -------------------------------------------------------- */

.pied {
	background: var(--encre);
	color: rgb(255 255 255 / 62%);
	padding-block: 3.5rem 1.5rem;
	font-size: 0.9375rem;
}

.pied a { color: rgb(255 255 255 / 62%); text-decoration: none; }
.pied a:hover { color: var(--rouge-vif); }

.pied__colonnes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
	gap: 2.5rem;
	padding-bottom: 2.5rem;
	border-bottom: 1px solid rgb(255 255 255 / 10%);
}

.pied h3 {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--blanc);
	margin-bottom: 1rem;
}

.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: 0.15rem; }

/* Zone tactile confortable : les liens du pied ne faisaient que 19 px de haut. */
.pied li a {
	display: inline-block;
	padding-block: 0.4rem;
	min-height: 32px;
}

.pied__bas {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 1.5rem;
	font-size: 0.8125rem;
	color: rgb(255 255 255 / 45%);
}

/* --- Pagination ---------------------------------------------------------- */

.pagination { display: flex; justify-content: center; gap: 0.4rem; margin-top: 3rem; }

.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding-inline: 0.65rem;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--encre);
	text-decoration: none;
	border: 1px solid var(--bord);
	border-radius: var(--r-s);
	transition: all var(--t);
}

.pagination .page-numbers:hover { border-color: var(--bleu); color: var(--bleu); }
.pagination .page-numbers.current { background: var(--bleu); border-color: var(--bleu); color: var(--blanc); }

/* --- Adaptatif ----------------------------------------------------------- */

@media (max-width: 940px) {
	.fiche, .devis__colonnes { grid-template-columns: 1fr; }
	.demande__ligne { grid-template-columns: 70px minmax(0, 1fr) auto; row-gap: 0.75rem; }
	.demande__quantite { grid-column: 2 / -1; }
}

/* La recherche passe sous le logo avant que la barre ne soit à l'étroit. */
@media (max-width: 1080px) {
	.entete__barre { flex-wrap: wrap; padding-bottom: 0.9rem; min-height: 0; padding-top: 0.9rem; }
	.recherche { order: 3; flex-basis: 100%; max-width: none; }
	.entete__actions { margin-left: auto; }
	.pilule--bleu span { display: none; }
	.pilule--bleu { padding: 0.7rem 0.85rem; }
	.pilule--brochure span:not(.ecran-lecteur) { display: none; }
	.pilule--brochure { padding: 0.7rem 0.85rem; }
}

@media (max-width: 820px) {
	.nav-bascule { display: inline-flex; order: -1; }

	/*
	 * Le bandeau d'annonces disparaît sur téléphone. Réduit à une mention
	 * centrée, il ne disait plus grand-chose et repoussait vers le bas le
	 * premier écran, qui est déjà court.
	 */
	.barre-info { display: none; }

	.barre-nav__contenu { min-height: 46px; }
	.barre-nav__catalogue { padding-inline: 1rem; font-size: 0.875rem; }

	.nav-principale {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 99;
		background: var(--blanc);
		border-bottom: 1px solid var(--bord);
		box-shadow: var(--ombre-m);
	}

	.nav-principale.est-ouvert { display: block; }
	.nav-principale ul { flex-direction: column; align-items: stretch; gap: 0; padding: 0.75rem var(--gouttiere) 1rem; }
	.nav-principale a { padding: 0.85rem 0.5rem; border-radius: 0; border-bottom: 1px solid var(--bord); }

	/* La barre n'a plus la place : la brochure passe dans le menu déplié. */
	.pilule--brochure { display: none; }

	.nav-principale .nav-brochure {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		margin: 0 var(--gouttiere) 1rem;
		padding: 0.85rem 1rem;
		font-size: 0.875rem;
		font-weight: 700;
		color: var(--bleu);
		text-decoration: none;
		background: var(--bleu-brume);
		border-radius: var(--r-s);
	}

	.nav-principale .nav-brochure svg { width: 17px; height: 17px; flex: none; }

	.nav-principale .nav-brochure__poids {
		margin-left: auto;
		font-size: 0.6875rem;
		font-weight: 600;
		color: var(--gris);
	}
}

@media (max-width: 560px) {
	/*
	 * Sur un écran de 390 px, bouton d'ouverture, logo, appel à l'action,
	 * téléphone et panier ne tiennent pas ensemble : la barre débordait
	 * horizontalement. Le téléphone disparaît — il reste joignable depuis la
	 * page de devis et le pied de page — et l'appel à l'action est conservé.
	 */
	.pilule--bleu { display: none; }
	.pilule--rouge { padding: 0.7rem 0.85rem; font-size: 0.6875rem; letter-spacing: 0.02em; }
	.entete__logo img, .entete__logo .custom-logo { max-width: 132px; }
	.badge-devis { width: 42px; height: 42px; }
	.nav-bascule { width: 42px; height: 42px; }
	.entete__barre { gap: 0.6rem; }
	.barre-nav__catalogue { font-size: 0.8125rem; padding-inline: 0.85rem; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* --- Section équipe ------------------------------------------------------ */

.equipe {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

/*
 * La photo d'équipe est un panoramique 1900x600 : affichée à son ratio dans
 * une colonne, elle ne faisait qu'un bandeau de quelques centimètres. On la
 * recadre en 5/4 et on ancre le cadrage sur les visages, situés au tiers haut.
 */
.equipe__visuel img {
	width: 100%;
	aspect-ratio: 5 / 4;
	object-fit: cover;
	object-position: 50% 32%;
	border-radius: var(--r-l);
	box-shadow: var(--ombre-m);
}
.equipe__texte { max-width: 46ch; }

.equipe__chiffres {
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem;
	margin-top: 2rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--bord);
}

.equipe__chiffre strong {
	display: block;
	font-size: 2rem;
	line-height: 1;
	color: var(--bleu);
	letter-spacing: -0.02em;
}

.equipe__chiffre span { font-size: 0.875rem; color: var(--gris); }

/* --- Bandeau d'appel ----------------------------------------------------- */

.appel {
	position: relative;
	padding: clamp(2.5rem, 5vw, 3.75rem);
	background: var(--bleu);
	border-radius: var(--r-l);
	color: var(--blanc);
	text-align: center;
	overflow: hidden;
}

.appel h2 { color: var(--blanc); margin-bottom: 0.75rem; }

.appel p {
	max-width: 52ch;
	margin-inline: auto;
	color: rgb(255 255 255 / 78%);
}

.appel__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 1.75rem; }

/*
 * Le bandeau est marine sans porter la classe .section--bleu : sans ces
 * règles, le bouton secondaire garde son texte foncé et devient illisible.
 */
.appel .bouton--secondaire {
	border-color: rgb(255 255 255 / 40%);
	color: var(--blanc);
}

.appel .bouton--secondaire:hover {
	background: var(--blanc);
	border-color: var(--blanc);
	color: var(--bleu);
}

/* --- Adaptatif du héros et de l'équipe ----------------------------------- */

@media (max-width: 900px) {
	.heros__inner { grid-template-columns: 1fr; min-height: 0; gap: 2.5rem; }
	.heros__contenu { max-width: none; }
	.heros__visuel { order: -1; }
	.heros__image { aspect-ratio: 16 / 10; }
	.heros__pastille { left: auto; right: 1rem; bottom: 1rem; }
	.equipe { grid-template-columns: 1fr; }
	.equipe__visuel { order: -1; }
}

/* --- Carte de France ----------------------------------------------------- */

.carte-france {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
}

.carte-france__svg {
	width: 100%;
	max-width: 620px;
	height: auto;
	margin-inline: auto;
	overflow: visible;
}

.carte-france__region path {
	/* Assez soutenu pour que le découpage se lise sur un fond clair : le bleu
	   pâle des jetons se confondait avec le fond de section. */
	fill: #ccd9ea;
	stroke: var(--blanc);
	stroke-width: 2.5;
	stroke-linejoin: round;
	transition: fill var(--t), fill-opacity var(--t);
	cursor: pointer;
}

/*
 * Survol : bleu de marque en aplat partiel plutôt qu'à pleine intensité, pour
 * que la région voisine reste lisible et que le contraste du trait blanc tienne.
 */
.carte-france__region:hover path,
.carte-france__region:focus-visible path {
	fill: var(--bleu);
	fill-opacity: 0.62;
}

/*
 * Aucun cadre autour du tracé, ni au clic ni au clavier.
 *
 * Un contour se dessine sur la boîte englobante du lien : sur une région, cela
 * donne un rectangle qui n'épouse rien et barre les régions voisines. « :focus »
 * doit être visé en plus de « :focus-visible » — au clic, les navigateurs
 * n'appliquent pas tous la même règle, et certains peignent quand même leur
 * anneau par défaut. L'indication de focus est reportée sur le tracé lui-même,
 * juste en dessous, où elle épouse la forme.
 */
.carte-france__region:focus,
.carte-france__region:focus-visible {
	outline: none;
}

.carte-france__region:focus-visible path {
	stroke: var(--rouge);
	stroke-width: 3.5;
}

/* Région sans panier rattaché : présente mais visiblement en retrait. */
.carte-france__region.est-vide path { fill: var(--bord); }
.carte-france__region.est-vide:hover path { fill: var(--gris-pale); fill-opacity: 0.55; }

/*
 * Variante du hero : fond marine. Les valeurs s'inversent — le remplissage
 * clair devient un voile blanc, et le survol prend la brique, qui « allume »
 * la région bien plus nettement qu'un bleu sur du bleu.
 */
/*
 * Le panneau est sorti du flux et sa place réservée en bas du bloc.
 *
 * Il passait de 53 à 128 px selon la région survolée, et la grille du hero
 * étant centrée verticalement, le titre de gauche sautait de 38 px à chaque
 * passage de souris. Un simple min-height aurait suffi aujourd'hui, mais un
 * nom de coffret plus long l'aurait fait sauter de nouveau ; hors du flux, sa
 * hauteur ne peut plus rien déplacer, quel que soit le texte.
 */
.carte-france--hero {
	position: relative;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	padding-bottom: 7.5rem;
}

/*
 * La carte se plafonne sur la hauteur de fenêtre, pour que tout le bloc tienne
 * sans défilement.
 *
 * Deux inconnues sont retranchées. Ce qui surmonte le bloc, publié en
 * --pdr-barres par le script après mesure : cette hauteur varie avec la barre
 * de favoris, la mise à l'échelle du système et le repli de l'en-tête, et une
 * constante tombait juste sur un poste et faux sur le suivant. Puis ce que le
 * bloc contient autour de la carte : 80 px de marges, 120 px réservés au
 * panneau, et 24 px de respiration — un calcul exact au pixel près se retrouve
 * en défaut au moindre écart.
 *
 * L'unité svh et non vh : sur mobile, vh compte la fenêtre barres du
 * navigateur rétractées, donc plus grande qu'elle ne l'est au chargement. La
 * ligne en vh sert de repli aux navigateurs qui ignorent svh.
 *
 * La largeur passe en automatique : sans cela, une hauteur plafonnée écraserait
 * le dessin au lieu de le réduire.
 */
:root { --pdr-barres: 190px; }

.carte-france--hero .carte-france__svg {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: calc(100vh - var(--pdr-barres) - 224px);
	max-height: max(18rem, calc(100svh - var(--pdr-barres) - 224px));
	margin-inline: auto;
	filter: drop-shadow(0 18px 40px rgb(0 8 24 / 45%));
}

.carte-france--hero .carte-france__region path {
	fill: rgb(255 255 255 / 14%);
	stroke: rgb(255 255 255 / 45%);
	stroke-width: 2;
}

.carte-france--hero .carte-france__region:hover path,
.carte-france--hero .carte-france__region:focus-visible path {
	fill: var(--rouge);
	fill-opacity: 1;
	stroke: var(--blanc);
}

.carte-france--hero .carte-france__region.est-vide path { fill: rgb(255 255 255 / 6%); }
.carte-france--hero .carte-france__region.est-vide:hover path { fill: rgb(255 255 255 / 22%); }

/*
 * Focus au clavier : le liseré or épouse la région, là où un contour de focus
 * dessinerait un rectangle. Sur le marine, le rouge du survol ne suffirait pas
 * à distinguer « survolé » de « atteint au clavier ».
 */
.carte-france--hero .carte-france__region:focus-visible path {
	stroke: var(--or);
	stroke-width: 4;
}

.carte-france--hero .carte-france__panneau {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	/* Hauteur du contenu le plus long, mesuré : aucune croissance au survol. */
	min-height: 6.5rem;
	padding: 0.7rem 1.1rem;
	text-align: center;
	color: var(--blanc);
	background: rgb(255 255 255 / 8%);
	border-color: rgb(255 255 255 / 18%);
	box-shadow: none;
}

.carte-france--hero .carte-france__panneau * { color: inherit; }

/*
 * Typographie resserrée dans le hero. La hauteur du panneau est fixe, pour
 * qu'il ne bouge pas au survol ; elle doit donc couvrir son contenu le plus
 * long. Réduire le texte réduit cette réserve, et rend d'autant de place à la
 * carte sur les écrans peu hauts.
 */
.carte-france--hero .carte-france__panneau strong {
	font-size: 1rem;
	line-height: 1.25;
}

.carte-france--hero .carte-france__panneau-actif > span {
	font-size: 0.875rem;
	line-height: 1.3;
}

.carte-france--hero .carte-france__panneau-prix {
	font-size: 0.8125rem;
	line-height: 1.3;
}

.carte-france--hero .carte-france__panneau-defaut {
	font-size: 0.9375rem;
	line-height: 1.35;
}

.carte-france__panneau {
	padding: 1.75rem;
	background: var(--blanc);
	border: 1px solid var(--bord);
	border-radius: var(--r-l);
	box-shadow: var(--ombre-m);
	min-height: 150px;
	display: grid;
	align-content: center;
}

.carte-france__panneau-defaut { color: var(--gris); font-size: 0.9375rem; }

.carte-france__panneau-actif strong {
	display: block;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--bleu);
	margin-bottom: 0.35rem;
}

.carte-france__panneau-actif span { font-size: 0.9375rem; color: var(--gris); }

.carte-france__panneau-prix {
	display: block;
	margin-top: 0.35rem;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--encre);
}

@media (max-width: 900px) {
	.carte-france { grid-template-columns: 1fr; }
	.carte-france__panneau { min-height: 0; text-align: center; }
}


/* =========================================================================
   Blocs de composition
   Repris de la structure de la référence : titres centrés à double
   typographie, rangées de tuiles à texte incrusté, bandes pleine largeur et
   blocs duo image/texte.
   ========================================================================= */

/* --- Titre de bloc ------------------------------------------------------- */

.titre-bloc {
	max-width: 44rem;
	margin-inline: auto;
	margin-bottom: clamp(2rem, 4vw, 3rem);
	text-align: center;
}

.titre-bloc h2 { margin-bottom: 0.6rem; }

/*
 * L'accent en italique serif : la moitié du titre change de voix. La règle
 * vise tous les titres et non les seuls .titre-bloc — dans les blocs duo et
 * les bandes, l'accent retombait sinon en italique de la grotesque grasse.
 */
h1 em, h2 em, h3 em {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	letter-spacing: 0;
}

.titre-bloc em { color: var(--bleu-vif); }

.titre-bloc p {
	font-size: 1.0625rem;
	color: var(--gris);
	margin: 0;
}

.bande .titre-bloc p,
.bande .titre-bloc em { color: rgb(255 255 255 / 80%); }

.titre-bloc__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	margin-top: 1.75rem;
}

/* --- Bouton à flèche ----------------------------------------------------- */

.bouton--fleche { border-radius: var(--r-pilule); padding-inline: 1.75rem; }
.bouton--fleche svg { width: 17px; height: 17px; transition: transform var(--t); }
.bouton--fleche:hover svg { transform: translateX(3px); }

/* --- Tuiles à texte incrusté --------------------------------------------- */

/*
 * La rangée déborde du conteneur jusqu'aux bords de l'écran, et défile au
 * doigt. C'est le procédé de la référence : il donne de l'ampleur sans
 * rétrécir les visuels sur les petits écrans.
 */
.tuiles {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(230px, 1fr);
	gap: 1rem;
	overflow-x: auto;
	scrollbar-width: none;
	padding-inline: var(--gouttiere);
	margin-inline: calc(50% - 50vw);
	scroll-snap-type: x proximity;
	scroll-padding-inline: var(--gouttiere);
}

.tuiles::-webkit-scrollbar { display: none; }

/* Au-delà de la largeur maximale, on recentre pour ne pas étirer à l'infini. */
@media (min-width: 1340px) {
	.tuiles {
		margin-inline: auto;
		padding-inline: 0;
		max-width: var(--largeur);
	}
}

.tuile {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	border-radius: var(--r-l);
	overflow: hidden;
	scroll-snap-align: start;
	text-decoration: none;
	isolation: isolate;
}

.tuile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.tuile:hover img { transform: scale(1.05); }

/*
 * Voile dégradé : sans lui le texte blanc devient illisible dès que la photo
 * s'éclaircit. Il part du bas, là où le texte est posé.
 */
.tuile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgb(0 32 80 / 88%) 0%,
		rgb(0 32 80 / 55%) 32%,
		rgb(0 32 80 / 8%) 62%,
		transparent 100%
	);
}

.tuile__texte {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 1;
	padding: 1.35rem;
	color: var(--blanc);
}

.tuile__titre {
	display: block;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.tuile__titre em {
	display: block;
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	letter-spacing: 0;
}

.tuile__legende {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.875rem;
	color: rgb(255 255 255 / 82%);
}

/* --- Bande pleine largeur ------------------------------------------------ */

.bande {
	position: relative;
	padding-block: clamp(3.5rem, 8vw, 6rem);
	background: var(--bleu);
	color: var(--blanc);
	overflow: hidden;
	isolation: isolate;
}

.bande h1, .bande h2, .bande h3 { color: var(--blanc); }

.bande__fond {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Voile de lecture, indispensable dès qu'une photo passe sous du texte. */
.bande--photo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient( 100deg, rgb(0 32 80 / 92%) 0%, rgb(0 32 80 / 74%) 55%, rgb(0 32 80 / 55%) 100% );
}

.bande__contenu { position: relative; text-align: center; }
.bande__contenu p { max-width: 54ch; margin-inline: auto; color: rgb(255 255 255 / 82%); }

.bande__chiffres {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
	gap: 2rem;
	margin-top: 3rem;
	padding-top: 2.5rem;
	border-top: 1px solid rgb(255 255 255 / 18%);
}

.bande__chiffre strong {
	display: block;
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
}

.bande__chiffre span {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.875rem;
	color: rgb(255 255 255 / 72%);
}

/* --- Bloc duo image / texte ---------------------------------------------- */

.duo {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
	min-height: min(60vh, 520px);
}

.duo__visuel { position: relative; overflow: hidden; }

.duo__visuel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Photo montrée entière, sans recadrage ni agrandissement : elle est déjà
 * cadrée sur la personne, et l'agrandir n'aurait fait qu'étirer ses pixels.
 * C'est donc elle qui donne sa hauteur au bloc, le texte se centrant en face.
 */
.duo--portrait .duo__visuel {
	display: grid;
	align-items: center;

	/* La photo entière est moins haute que la colonne de texte : le fond crème
	   prolonge le bloc au lieu de laisser deux bandes blanches. */
	background: var(--creme);
}

/* Colonne de texte resserrée pour approcher la hauteur de la photo. */
.duo--portrait .duo__texte { padding-block: clamp(1.75rem, 3.5vw, 3rem); }

.duo--portrait .duo__visuel img {
	height: auto;
	object-fit: contain;
}

.duo__texte {
	display: grid;
	place-content: center;
	padding: clamp(2.5rem, 6vw, 5rem);
	text-align: center;
	background: var(--creme);
}

.duo__texte > * { max-width: 44ch; margin-inline: auto; }
.duo__texte p { color: var(--gris); }

/* Alternance : le visuel passe à droite pour rythmer la page. */
.duo--inverse .duo__visuel { order: 2; }

.duo--brume .duo__texte { background: var(--bleu-brume); }
.duo--bleu .duo__texte { background: var(--bleu); color: var(--blanc); }
.duo--bleu .duo__texte h2 { color: var(--blanc); }
.duo--bleu .duo__texte p { color: rgb(255 255 255 / 80%); }
.duo--bleu .duo__texte em { color: var(--blanc); }

@media (max-width: 900px) {
	.duo { grid-template-columns: 1fr; min-height: 0; }
	.duo__visuel { order: -1 !important; aspect-ratio: 16 / 9; }
	.duo--inverse .duo__visuel { order: -1; }
}


/* --- Motif décoratif ----------------------------------------------------- */

/*
 * Motif maison (épis, rameaux, grappes), dessiné pour ce site. Appliqué en
 * masque et non en image de fond : un SVG appelé en background-image n'a
 * aucun contexte CSS, currentColor y reste donc non résolu. Le masque laisse
 * au contraire la couleur au conteneur.
 */
.motif::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: currentColor;
	opacity: 0.11;
	-webkit-mask: url("../img/motif-terroir.svg") repeat;
	mask: url("../img/motif-terroir.svg") repeat;
	pointer-events: none;
}

.motif > * { position: relative; z-index: 1; }

.motif--clair::before { opacity: 0.28; }

/* --- Héros pleine largeur ------------------------------------------------ */

.heros--banniere {
	position: relative;
	display: grid;
	place-items: center;
	min-height: min(78vh, 660px);
	padding-block: clamp(3.5rem, 9vw, 6rem);
	background: var(--bleu);
	color: var(--blanc);
	text-align: center;
	overflow: hidden;
	isolation: isolate;
}

.heros--banniere .heros__image {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
	object-position: 50% 45%;
}

/*
 * Double voile : un dégradé vertical pour asseoir le texte, et un aplat
 * marine léger pour unifier des photos aux dominantes très différentes.
 */
.heros--banniere::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient( 180deg, rgb(0 32 80 / 62%) 0%, rgb(0 32 80 / 78%) 55%, rgb(0 32 80 / 90%) 100% ),
		linear-gradient( 90deg, rgb(0 32 80 / 45%), rgb(0 32 80 / 25%) );
}

.heros--banniere .heros__contenu {
	max-width: 40rem;
	margin-inline: auto;
}

.heros--banniere h1 { color: var(--blanc); }
.heros--banniere h1 em { color: var(--blanc); opacity: 0.92; }
.heros--banniere .surtitre { color: var(--blanc); opacity: 0.75; }
.heros--banniere .heros__accroche { color: rgb(255 255 255 / 86%); }
.heros--banniere .heros__actions { justify-content: center; }

.heros--banniere .heros__preuves {
	justify-content: center;
	border-top-color: rgb(255 255 255 / 22%);
	color: rgb(255 255 255 / 80%);
}

.heros--banniere .heros__preuve svg { color: var(--blanc); }

/* Pastille de prix, recentrée sous les preuves plutôt qu'en surimpression. */
.heros__prix-mini {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5rem;
	margin-top: 1.5rem;
	padding: 0.6rem 1.15rem;
	background: rgb(255 255 255 / 12%);
	border: 1px solid rgb(255 255 255 / 22%);
	border-radius: var(--r-pilule);
	font-size: 0.875rem;
	color: rgb(255 255 255 / 82%);
}

.heros__prix-mini strong { font-size: 1.125rem; color: var(--blanc); }


/* Bouton secondaire sur la bannière : son texte sombre se perdait sur la photo. */
.heros--banniere .bouton--secondaire {
	border-color: rgb(255 255 255 / 45%);
	color: var(--blanc);
	background: rgb(255 255 255 / 8%);
}

.heros--banniere .bouton--secondaire:hover {
	background: var(--blanc);
	border-color: var(--blanc);
	color: var(--bleu);
}

/* Le texte du corps de la section reste lisible malgré le motif en filigrane. */
.section.motif { position: relative; }


/* --- Tuiles en bichromie ------------------------------------------------- */

/*
 * Les photos disponibles se ressemblent toutes : même cageot, même paille,
 * mêmes bocaux. Les traiter en bichromie, une teinte par tuile, les rend
 * distinctes sans exiger de nouvelles prises de vue.
 *
 * Procédé : l'image est désaturée, puis un aplat coloré est fondu en
 * « multiply » — les noirs prennent la teinte, les blancs restent clairs.
 */
.tuile__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	isolation: isolate;
}

.tuile__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.12) brightness(1.06);
	transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.tuile:hover .tuile__media img { transform: scale(1.05); }

.tuile__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--teinte, var(--bleu));
	mix-blend-mode: multiply;
}

/* Voile de lecture au-dessus de la bichromie. */
.tuile::after {
	background: linear-gradient(
		to top,
		rgb(0 0 0 / 62%) 0%,
		rgb(0 0 0 / 28%) 38%,
		transparent 72%
	);
}

/* Teintes : deux marines, deux briques, un bleu vif — la famille reste lisible. */
.tuile--t1 { --teinte: #002050; }
.tuile--t2 { --teinte: #a02828; }
.tuile--t3 { --teinte: #004aad; }
.tuile--t4 { --teinte: #7a2436; }
.tuile--t5 { --teinte: #123a5e; }

/* Filet d'accent en bas de tuile, rappel discret du drapeau. */
.tuile__texte::before {
	content: "";
	display: block;
	width: 34px;
	height: 3px;
	margin-bottom: 0.85rem;
	background: var(--blanc);
	border-radius: 2px;
	opacity: 0.9;
}


/* --- Bande compacte, en-tête de page ------------------------------------- */

.bande--compacte { padding-block: clamp(2.5rem, 5vw, 3.75rem); }
.bande--compacte h1 { margin-bottom: 0.75rem; }

.bande--compacte .bande__contenu p {
	font-size: 1.0625rem;
	margin-bottom: 0;
}


/* --- Hero d'accueil ------------------------------------------------------- */

/*
 * La carte occupe la moitié droite du premier écran. C'est la seule chose du
 * site qu'un visiteur puisse manipuler, et treize régions sont ce qui
 * distingue l'offre : placée un écran plus bas, elle ne servait qu'à ceux qui
 * faisaient défiler. Le bloc n'est plus une affiche, c'est une entrée.
 */
.hero {
	position: relative;
	overflow: hidden;
	color: var(--blanc);
	background: var(--bleu);
}

/* Le motif reste une texture de fond : à l'opacité commune il brouillait le tracé. */
.hero::before { opacity: 0.05; }

/* Halo derrière la carte, qui la décolle du fond sans cadre ni bordure. */
.hero::after {
	content: "";
	position: absolute;
	z-index: 0;
	top: 50%;
	right: 4%;
	width: min(760px, 62%);
	aspect-ratio: 1;
	transform: translateY(-50%);
	background: radial-gradient(circle, rgb(0 74 173 / 42%), rgb(0 32 80 / 0%) 70%);
	pointer-events: none;
}

.hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
	padding-block: clamp(1.5rem, 3vw, 2.5rem);
}

.hero__texte { max-width: 34rem; }

/*
 * Un seul bloc de texte, d'une seule voix.
 *
 * Le titre n'est plus scindé par une italique serif : ce contraste de deux
 * familles au milieu d'une phrase est le signe le plus reconnaissable des
 * gabarits, et il transformait une affirmation en slogan. Une seule graisse,
 * une seule couleur, la phrase porte toute seule.
 */
.hero h1 {
	font-size: clamp(2.125rem, 4vw, 3.5rem);
	line-height: 1.02;
	letter-spacing: -0.03em;
	color: var(--blanc);
	margin-bottom: 1.25rem;
}

/*
 * Second membre en serif italique, comme les titres des autres sections. Un
 * rien moins blanc que le premier : l'italique porte déjà la différence, une
 * couleur franche en ferait deux titres au lieu d'une phrase.
 */
.hero h1 em { color: rgb(255 255 255 / 90%); }

.hero__accroche {
	max-width: 32rem;
	font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
	line-height: 1.6;
	color: rgb(255 255 255 / 82%);
	margin-bottom: 1.75rem;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Ligne de faits, sans coches ni filet : une mention, pas un argumentaire. */
.hero__faits {
	margin: 1.5rem 0 0;
	font-size: 0.875rem;
	color: rgb(255 255 255 / 58%);
}

.hero__carte { min-width: 0; }

/*
 * Sous 900 px, deux colonnes donnent 170 px chacune : le titre déborde de la
 * sienne et passe sous la carte. Le bloc s'empile, la carte sous le texte —
 * l'accroche doit se lire avant qu'on ait à choisir une région.
 */
@media (max-width: 900px) {
	.hero__inner { grid-template-columns: minmax(0, 1fr); }
	.hero__texte { max-width: none; }
	.hero::after { display: none; }

	.hero__carte {
		width: min(100%, 26rem);
		margin-inline: auto;
	}

}

@media (max-width: 560px) {
	.hero__actions .bouton { flex: 1 1 14rem; }
}

/* --- Fiche de région dépliée --------------------------------------------- */

/*
 * Prolonge le hero plutôt que de s'en détacher : même fond marine, un filet
 * or pour marquer que quelque chose vient de s'ouvrir. Un bloc clair aurait
 * lu comme une nouvelle section, et la carte aurait semblé avoir mené
 * ailleurs alors qu'on n'a pas quitté la page.
 */
.selection {
	background: var(--bleu);
	border-top: 2px solid var(--or);
	color: var(--blanc);
}

.selection[hidden] { display: none; }

/*
 * Le coffret est une vignette de confirmation, pas la fiche produit : elle
 * dit quelle région vient d'être choisie, le reste se lit à côté. À 380 px il
 * prenait le tiers de la bande et poussait le texte contre le bord droit.
 */
.selection__inner {
	display: grid;
	grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	padding-block: clamp(2rem, 4vw, 3rem);
}

.selection__visuel img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--r-l);
	box-shadow: 0 24px 50px rgb(0 8 24 / 45%);
}

.selection__titre {
	font-size: clamp(1.5rem, 2.6vw, 2.125rem);
	line-height: 1.1;
	color: var(--blanc);
	margin-bottom: 0.5rem;
}

.selection__prix {
	margin: 0 0 0.875rem;
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--bleu-clair);
}

.selection__extrait {
	max-width: 54ch;
	margin: 0 0 1.5rem;
	line-height: 1.6;
	color: rgb(255 255 255 / 80%);
}

.selection__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

/* Le bouton secondaire est ici sur fond marine : il lui faut un bord clair. */
.selection__actions .bouton--secondaire {
	border-color: rgb(255 255 255 / 40%);
	color: var(--blanc);
}

.selection__actions .bouton--secondaire:hover {
	background: var(--blanc);
	border-color: var(--blanc);
	color: var(--bleu);
}

.selection__mention {
	margin: 1.25rem 0 0;
	font-size: 0.8125rem;
	color: rgb(255 255 255 / 62%);
}

/*
 * Le lien est petit et posé au milieu d'une mention en petits caractères. La
 * marge intérieure lui donne les 32 px de haut qu'il faut pour être atteint au
 * doigt sans erreur ; la marge négative annule le décalage qu'elle créerait.
 */
.selection__mention a {
	display: inline-block;
	padding: 0.5rem 0.3rem;
	margin: -0.5rem -0.3rem;
	color: var(--bleu-clair);
	font-weight: 700;
}

/* Région retenue : elle reste allumée pendant qu'on lit sa fiche. */
.carte-france__region.est-choisie path {
	fill: var(--rouge);
	fill-opacity: 1;
	stroke: var(--blanc);
	stroke-width: 2.5;
}

@media (max-width: 720px) {
	.selection__inner { grid-template-columns: minmax(0, 1fr); }

	/* Bornée en largeur, la vignette restait ferrée à gauche pendant que le
	   texte se centrait sous elle. */
	.selection__visuel {
		max-width: 16rem;
		margin-inline: auto;
	}

	.selection__actions .bouton { flex: 1 1 13rem; }
}

/* --- Bande de gamme ------------------------------------------------------- */

/*
 * Le texte est posé sur un bleu qui prolonge celui de la photo.
 *
 * Le bord haut du plan studio a été relevé à rgb(0, 33, 85) — à trois unités
 * du marine de la marque. Le dégradé part donc d'un bleu plus profond derrière
 * le titre et rejoint exactement cette valeur à la jonction : l'aplat et la
 * photo n'en font qu'un, là où un fond crème aurait donné une image collée sur
 * la page.
 */
/*
 * Fond clair, et non le bleu du studio.
 *
 * Les coffrets sont désormais détourés : ils se posent sur n'importe quelle
 * couleur. La bande passe donc en crème, ce qui rompt l'enchaînement de bleu
 * qui courait sur près de deux mille pixels depuis le hero. Toute la mécanique
 * de raccord chromatique avec le fond de la photo devient sans objet.
 */
.gamme {
	background: var(--creme);
	overflow: hidden;
}

/*
 * Deux colonnes, texte à côté de la photo. En pleine largeur, la pyramide
 * occupait un écran entier pour un rôle d'illustration ; à côté du texte elle
 * garde sa force et rend sa place.
 */
.gamme__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

.gamme__texte { text-align: left; }

.gamme__surtitre {
	display: inline-block;
	margin-bottom: 1rem;
	padding-bottom: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--rouge);
	border-bottom: 2px solid rgb(160 40 40 / 30%);
}

.gamme__texte h2 {
	font-size: clamp(1.75rem, 3.4vw, 3rem);
	line-height: 1.06;
	letter-spacing: -0.02em;
	margin-bottom: 1rem;
}

.gamme__texte p {
	max-width: 46ch;
	margin: 0 0 2rem;
	font-size: clamp(1rem, 1.4vw, 1.0625rem);
	line-height: 1.6;
	color: var(--gris);
}

.gamme__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

@media (max-width: 860px) {
	.gamme__inner { grid-template-columns: minmax(0, 1fr); }
	.gamme__texte { text-align: center; }
	.gamme__texte p { margin-inline: auto; }
	.gamme__actions { justify-content: center; }
}

/*
 * Sans fond, les coffrets flotteraient sur le crème comme des vignettes
 * collées. L'ombre portée les repose, et suit leur découpe plutôt qu'un
 * rectangle : c'est ce que « drop-shadow » fait, à la différence de
 * « box-shadow », qui aurait cerné la boîte de l'image.
 */
.gamme__photo {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 18px 26px rgb(0 16 42 / 20%));
}

@media (max-width: 560px) {
	.gamme__actions .bouton { flex: 1 1 14rem; }
}

/* --- Bandeau à bord déchiré ---------------------------------------------- */

/*
 * Deux photos du site partagent le même dispositif : un sujet à gauche, un
 * bord de papier déchiré, un panneau de couleur à droite qui sert de zone de
 * texte. Le texte doit se poser dans ce panneau et jamais sur le sujet, ce qui
 * demande une géométrie précise — mutualisée ici plutôt que recopiée, deux
 * erreurs de calage ayant déjà été corrigées sur la seule page d'accueil.
 *
 * Chaque bandeau règle quatre variables, mesurées par preparer-banniere.mjs :
 *   --bandeau-colonne  départ du texte, au-delà du bord déchiré
 *   --bandeau-fond     teinte du panneau, pour un raccord invisible
 *   --bandeau-hauteur  tranche visible de la photo
 *   --bandeau-ancrage  point d'ancrage vertical du recadrage
 */
.bandeau {
	--bandeau-colonne: 58vw;
	--bandeau-fond: var(--bleu);
	--bandeau-hauteur: 22rem;
	--bandeau-ancrage: center;

	position: relative;
	overflow: hidden;
	color: var(--blanc);
	background: var(--bandeau-fond);
	/*
	 * Hauteur imposée, jamais dictée par le contenu. C'est ce qui rend la
	 * position du bord déchiré invariante : tant que la section est plus large
	 * que le format de la photo, « cover » ajuste celle-ci sur la largeur et le
	 * bord tombe toujours au même pourcentage. Laissée libre, la section
	 * grandissait avec son texte, la photo était agrandie pour couvrir, et le
	 * bord filait de 55,7 % à 67 % — le texte se posait sur les coffrets.
	 */
	height: var(--bandeau-hauteur);
	display: grid;
	align-items: center;
}

.bandeau__photo {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.bandeau__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Ancrée à gauche : le bord garde ainsi une position prévisible. */
	object-position: left var(--bandeau-ancrage);
}

.bandeau__inner {
	position: relative;
	z-index: 1;
	display: grid;
	/*
	 * En vw et non en pourcentage : un pourcentage se calcule sur la boîte de
	 * contenu, déjà amputée du padding droit, et plaçait le texte 38 px trop à
	 * gauche — sur le papier. La photo, elle, se cale sur le viewport.
	 */
	grid-template-columns: var(--bandeau-colonne) minmax(0, 1fr);
	padding-block: clamp(1.25rem, 2.5vw, 2rem);
	/* Le bord droit s'aligne sur le conteneur du site sans en dépendre. */
	padding-right: max(var(--gouttiere), (100vw - var(--largeur)) / 2);
}

.bandeau__texte { grid-column: 2; }

/* --- Bannière d'accueil --------------------------------------------------- */

/*
 * Photo des treize coffrets, 2172 x 724. Bord déchiré mesuré à 55,7 %, d'où
 * une colonne à 58vw. Seuls 560 des 724 px de haut sont montrés : au-dessus
 * des coffrets il n'y a que le mur, en dessous que le sol.
 */
.banniere {
	--bandeau-colonne: 58vw;
	--bandeau-fond: #0e2338;
	--bandeau-hauteur: clamp(23rem, calc(100vw * 600 / 2172), 520px);
	--bandeau-ancrage: 55%;
}

/* --- En-tête des pages intérieures --------------------------------------- */

/*
 * L'artisan en veste brodée, 1916 x 821. Bord déchiré mesuré à 45 %, d'où une
 * colonne à 48vw. Le panneau est d'un bleu parfaitement uni — rgb(1, 53, 117) —
 * ce qui rend le raccord avec le fond CSS invisible quel que soit l'écran.
 *
 * La tranche montrée est courte : c'est un en-tête, pas une bannière, et le
 * point d'ancrage à 45 % garde le logo brodé dans le cadre.
 */
.bandeau--artisan {
	--bandeau-colonne: 48vw;
	--bandeau-fond: #013575;
	--bandeau-hauteur: clamp(15rem, calc(100vw * 430 / 1916), 360px);
	--bandeau-ancrage: 45%;
	--bandeau-format-reduit: 887 / 620;
	--bandeau-ancrage-reduit: 0%;
}

.bandeau--artisan h1 {
	font-size: clamp(1.625rem, 2.6vw, 2.5rem);
	margin-bottom: 0.75rem;
}

.bandeau--artisan .bandeau__texte p {
	max-width: 46ch;
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.55;
	color: rgb(255 255 255 / 82%);
}

.bandeau__surtitre {
	display: block;
	margin-bottom: 1.25rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--or);
}

.bandeau h1 {
	/* Le coefficient en vw est volontairement bas : au-dessus de 1280 px le
	   titre partage une hauteur fixée par le format de la photo, et un titre
	   qui grandit plus vite qu'elle finirait par la déborder. */
	font-size: clamp(1.75rem, 2.9vw, 2.75rem);
	line-height: 1.05;
	letter-spacing: -0.025em;
	color: var(--blanc);
	margin-bottom: 1rem;
}

.bandeau h1 em {
	display: block;
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--bleu-clair);
}

.bandeau__accroche {
	font-size: clamp(1rem, 1.5vw, 1.125rem);
	line-height: 1.55;
	color: rgb(255 255 255 / 80%);
	margin-bottom: 1.75rem;
}

.bandeau__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Ancre de prix, fondue dans l'accroche : elle y tient sans coûter de ligne. */
.bandeau__prix {
	color: var(--blanc);
	white-space: nowrap;
}

/* Le poids du fichier fait partie du libellé : il tient sur une deuxième ligne. */
.bouton--brochure {
	flex-direction: column;
	gap: 0.15rem;
	padding-block: 0.6rem;
	line-height: 1.2;
	text-align: center;
}

.bouton--brochure svg { width: 17px; height: 17px; }

.bouton__poids {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	opacity: 0.72;
}

/* Le pied est sombre : le bouton fantôme y trouve son contraste. */
.pied .bouton--brochure { margin-top: 1.25rem; }

/* Bouton fantôme : lisible sur le marine, sans concurrencer l'appel principal. */
.bouton--fantome {
	background: transparent;
	border-color: rgb(255 255 255 / 40%);
	color: var(--blanc);
}

.bouton--fantome:hover {
	background: var(--blanc);
	border-color: var(--blanc);
	color: var(--bleu);
}

/* --- Devis rapide sur l'accueil ------------------------------------------- */

/*
 * Le formulaire est posé sur la page d'accueil plutôt que renvoyé à une autre
 * page : une demande qui tient sous les yeux part bien plus souvent. L'envoi
 * vise malgré tout la page de devis, où le traitement et l'écran de
 * confirmation existent déjà.
 */
.devis-rapide {
	background: var(--blanc);
	border-top: 1px solid var(--bord);
}

.devis-rapide__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

.devis-rapide__intro h2 {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	line-height: 1.08;
	margin-bottom: 1rem;
}

.devis-rapide__intro p {
	max-width: 34ch;
	color: var(--gris);
	line-height: 1.6;
}

.devis-rapide__tel { font-size: 0.9375rem; }

/* Choix binaire présenté en segments : deux radios empilés se lisent moins
   vite qu'un interrupteur, alors que le balisage reste le même. */
.devis-rapide__segments {
	display: inline-flex;
	margin: 0 0 1rem;
	padding: 0.25rem;
	border: 1.5px solid var(--bord);
	border-radius: var(--r-pilule);
	background: var(--bleu-brume);
}

.devis-rapide__segment {
	position: relative;
	padding: 0.5rem 1.25rem;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--gris);
	border-radius: var(--r-pilule);
	cursor: pointer;
	transition: background var(--t), color var(--t);
}

.devis-rapide__segment input {
	position: absolute;
	opacity: 0;
	inset: 0;
	cursor: pointer;
}

.devis-rapide__segment:has(input:checked) {
	background: var(--blanc);
	color: var(--bleu);
	box-shadow: var(--ombre-s);
}

.devis-rapide__segment:has(input:focus-visible) {
	outline: 2px solid var(--bleu);
	outline-offset: 2px;
}

.devis-rapide__grille {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}

.devis-rapide__champ { margin: 0; }
.devis-rapide__champ--large { grid-column: 1 / -1; }

.devis-rapide__champ input,
.devis-rapide__champ textarea {
	width: 100%;
	padding: 0.75rem 1rem;
	font-family: inherit;
	font-size: 16px;
	color: var(--encre);
	background: var(--blanc);
	border: 1.5px solid var(--bord);
	border-radius: var(--r-m);
	transition: border-color var(--t), box-shadow var(--t);
}

.devis-rapide__champ textarea { resize: vertical; min-height: 84px; }

.devis-rapide__champ input:focus,
.devis-rapide__champ textarea:focus {
	outline: none;
	border-color: var(--bleu-vif);
	box-shadow: 0 0 0 3px var(--bleu-pale);
}

.devis-rapide__consentement {
	display: flex;
	gap: 0.5rem;
	margin: 1rem 0 1.25rem;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--gris);
}

.devis-rapide__consentement input { margin-top: 0.15rem; flex: none; }

.devis-rapide__legende {
	margin: 0.75rem 0 0;
	font-size: 0.75rem;
	color: var(--gris-pale);
}

@media (max-width: 860px) {
	.devis-rapide__inner { grid-template-columns: minmax(0, 1fr); }
	.devis-rapide__intro p { max-width: none; }
}

@media (max-width: 520px) {
	.devis-rapide__grille { grid-template-columns: minmax(0, 1fr); }
	.devis-rapide__segments { display: flex; }
	.devis-rapide__segment { flex: 1; text-align: center; }
}

/* --- Article de blog ------------------------------------------------------ */

.article__entete {
	background: var(--bleu);
	color: var(--blanc);
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

.article__entete-inner { max-width: 46rem; }

.article__entete h1 {
	font-size: clamp(1.75rem, 3.4vw, 2.75rem);
	line-height: 1.1;
	color: var(--blanc);
	margin-bottom: 1rem;
}

.article__chapeau {
	font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
	line-height: 1.6;
	color: rgb(255 255 255 / 82%);
	margin-bottom: 1.25rem;
}

.article__reperes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	font-size: 0.875rem;
	color: rgb(255 255 255 / 62%);
}

.article__corps { max-width: 46rem; padding-block: clamp(2rem, 4vw, 3rem); }

/*
 * Sommaire encadré : il sert de repère de lecture autant que de navigation,
 * et gagne à se distinguer nettement du corps de l'article.
 */
.article__sommaire {
	margin: 0 0 2.5rem;
	padding: 1.5rem 1.75rem;
	background: var(--bleu-brume);
	border-left: 3px solid var(--bleu);
	border-radius: 0 var(--r-m) var(--r-m) 0;
}

.article__sommaire-titre {
	margin: 0 0 0.75rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gris);
}

.article__sommaire ol {
	margin: 0;
	padding-left: 1.2rem;
	display: grid;
	gap: 0.4rem;
	font-size: 0.9375rem;
}

.article__sommaire a { color: var(--bleu); font-weight: 600; }

.article__texte { font-size: 1.0625rem; line-height: 1.7; }

.article__texte h2 {
	margin: 2.5rem 0 1rem;
	font-size: clamp(1.375rem, 2.4vw, 1.75rem);
	line-height: 1.2;
}

.article__texte h3 {
	margin: 2rem 0 0.75rem;
	font-size: 1.125rem;
}

.article__texte p { margin: 0 0 1.25rem; }
.article__texte ul, .article__texte ol { margin: 0 0 1.5rem; padding-left: 1.4rem; }
.article__texte li { margin-bottom: 0.5rem; }

.article__texte a {
	color: var(--bleu-vif);
	text-underline-offset: 3px;
}

.article__texte img {
	border-radius: var(--r-m);
	margin-block: 1.5rem;
}

/*
 * Encadré de synthèse. Repéré par le titre plutôt que par une classe :
 * l'éditeur écrit un titre normal, la mise en forme suit toute seule.
 */
.article__texte h2#ce-quil-faut-retenir {
	margin-bottom: 0;
	padding: 1.25rem 1.5rem 0;
	background: var(--creme);
	border-radius: var(--r-m) var(--r-m) 0 0;
	font-size: 1.125rem;
}

.article__texte h2#ce-quil-faut-retenir + ul {
	margin: 0 0 2rem;
	padding: 1rem 1.5rem 1.5rem 3rem;
	background: var(--creme);
	border-radius: 0 0 var(--r-m) var(--r-m);
	font-size: 1rem;
}

/* Citation ou mise en exergue au fil du texte. */
.article__texte blockquote {
	margin: 2rem 0;
	padding: 0.25rem 0 0.25rem 1.5rem;
	border-left: 3px solid var(--rouge);
	font-family: var(--serif);
	font-style: italic;
	font-size: 1.1875rem;
	color: var(--bleu);
}


/* --- Sélecteur de paniers -------------------------------------------------- */

/*
 * Fenêtre superposée bâtie sur <dialog>. L'élément natif apporte le fond
 * assombri, le piège à focus et la fermeture par Échap sans une ligne de
 * script ; il faut seulement lui retirer ses marges par défaut, qui le
 * centrent mal dès qu'on lui donne une taille.
 */
.selecteur {
	width: min(64rem, 100vw - 2rem);
	max-width: none;
	max-height: min(46rem, 100svh - 3rem);
	padding: 0;
	border: 0;
	border-radius: var(--r-l);
	background: var(--blanc);
	color: var(--encre);
	box-shadow: 0 32px 80px rgb(0 16 42 / 35%);
	overflow: hidden;
}

/*
 * Le display ne se pose que sur la fenêtre ouverte. Écrit sur « .selecteur »,
 * il l'emporte sur le « display: none » que le navigateur applique à un
 * <dialog> fermé, et le catalogue s'affiche alors en bas de page en
 * permanence, comme un second bloc surgi de nulle part.
 *
 * La grille interne défile, pas la fenêtre : l'en-tête et le pied restent
 * visibles pendant qu'on parcourt le catalogue.
 */
.selecteur[open] {
	display: flex;
	flex-direction: column;
}

.selecteur::backdrop { background: rgb(0 16 42 / 62%); }

.selecteur__entete {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.5rem 1.5rem 1rem;
	border-bottom: 1px solid var(--bord);
}

.selecteur__titre { margin: 0 0 0.15rem; font-size: 1.375rem; }
.selecteur__compte { margin: 0; font-size: 0.875rem; color: var(--gris); }

.selecteur__fermer {
	display: grid;
	place-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	padding: 0;
	color: var(--gris);
	background: var(--bleu-brume);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background var(--t), color var(--t);
}

.selecteur__fermer:hover { background: var(--bleu-pale); color: var(--bleu); }
.selecteur__fermer svg { width: 18px; height: 18px; }

.selecteur__filtre {
	position: relative;
	padding: 1rem 1.5rem;
	border-bottom: 1px solid var(--bord);
}

.selecteur__filtre svg {
	position: absolute;
	left: 2.35rem;
	top: 50%;
	transform: translateY(-50%);
	width: 17px;
	height: 17px;
	color: var(--gris-pale);
	pointer-events: none;
}

.selecteur__filtre input {
	width: 100%;
	padding: 0.7rem 1rem 0.7rem 2.6rem;
	font-family: inherit;
	font-size: 16px;
	color: var(--encre);
	background: var(--blanc);
	border: 1.5px solid var(--bord);
	border-radius: var(--r-pilule);
}

.selecteur__filtre input:focus {
	outline: none;
	border-color: var(--bleu-vif);
	box-shadow: 0 0 0 3px var(--bleu-pale);
}

/*
 * Les rangées suivent leur contenu, et la grille défile.
 *
 * Sans « align-content: start », une grille à hauteur imposée répartit la
 * place entre ses rangées : les vingt-quatre cartes se partageaient la
 * hauteur visible et tombaient à soixante pixels, ne montrant qu'une bande
 * d'image. Le contenu était bien là, simplement rogné.
 */
.selecteur__grille {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
	grid-auto-rows: min-content;
	align-content: start;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
}

.selecteur__item {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--bord);
	border-radius: var(--r-m);
	overflow: hidden;
	transition: border-color var(--t), box-shadow var(--t);
}

.selecteur__item:hover { border-color: var(--bleu-pale); box-shadow: var(--ombre-s); }

.selecteur__media { aspect-ratio: 4 / 3; background: var(--bleu-pale); }
.selecteur__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.selecteur__corps {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 0.75rem 0.85rem 0.85rem;
	flex: 1;
}

.selecteur__nom { margin: 0; font-size: 0.9375rem; line-height: 1.3; }
.selecteur__prix { margin: 0; font-size: 0.875rem; font-weight: 700; color: var(--bleu); }

/*
 * Le bouton se colle en bas, quelle que soit la longueur du nom au-dessus.
 * Son libellé peut passer à la ligne : les boutons du site tiennent sur une
 * seule ligne par défaut, et dans une carte de cent-soixante pixels le texte
 * débordait de sa pastille.
 */
.selecteur__corps .ajout-devis { margin-top: auto; }

.selecteur__corps .ajout-devis button {
	width: 100%;
	white-space: normal;
	padding-inline: 0.6rem;
	font-size: 0.8125rem;
	line-height: 1.25;
}

.selecteur__vide {
	margin: 0;
	padding: 2rem 1.5rem;
	text-align: center;
	color: var(--gris);
}

.selecteur__pied {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
	padding: 1rem 1.5rem;
	border-top: 1px solid var(--bord);
	background: var(--creme);
}

/* Assez épais pour être visé au doigt, sans devenir un second bouton. */
.selecteur__lien {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: 0.25rem;
	font-size: 0.875rem;
	font-weight: 600;
}

@media (max-width: 560px) {
	/*
	 * La fenêtre occupe l'écran entier, mais son contenu restait à l'échelle du
	 * bureau : deux cartes tenaient dans la hauteur, chaque nom passait sur
	 * trois lignes et le libellé des boutons sur deux. Tout est resserré pour
	 * qu'on voie ce qu'on choisit, c'est-à-dire plusieurs coffrets à la fois.
	 */
	/*
	 * La fenêtre occupe exactement l'écran. Avec une simple hauteur maximale,
	 * elle restait dimensionnée par son contenu : le navigateur la centrait au
	 * milieu de l'écran et la zone défilante, qui n'a pas de hauteur propre,
	 * s'écrasait entre le filtre et le pied. « inset: 0 » lui donne les quatre
	 * bords, et la colonne flex distribue enfin ce qui reste à la liste.
	 */
	.selecteur {
		inset: 0;
		width: auto;
		max-width: none;
		height: auto;
		max-height: none;
		margin: 0;
		border-radius: 0;
	}

	.selecteur__entete { padding: 1rem 1rem 0.75rem; }
	.selecteur__titre { font-size: 1.125rem; }
	.selecteur__compte { font-size: 0.8125rem; }
	.selecteur__filtre { padding: 0.75rem 1rem; }
	.selecteur__filtre input { padding-block: 0.6rem; }

	/*
	 * Une colonne, et la carte se couche : vignette à gauche, nom, prix et
	 * bouton à droite. En deux colonnes, chaque carte prenait un tiers de
	 * l'écran pour un seul coffret, et le libellé du bouton passait à la
	 * ligne. En liste, on en voit cinq d'un coup.
	 */
	.selecteur__grille {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.5rem;
		padding: 0.85rem 1rem 1rem;
	}

	.selecteur__item { flex-direction: row; }

	.selecteur__media {
		flex: 0 0 5.25rem;
		aspect-ratio: 1;
		align-self: center;
	}

	/*
	 * Nom, prix et bouton empilés à droite de la vignette. Mis côte à côte, le
	 * bouton prenait cent quatre-vingts pixels et le nom des régions à trait
	 * d'union tombait sur quatre lignes.
	 */
	.selecteur__corps {
		gap: 0.3rem;
		padding: 0.6rem 0.7rem;
	}

	.selecteur__nom { font-size: 0.875rem; line-height: 1.25; }
	.selecteur__prix { font-size: 0.8125rem; }

	.selecteur__corps .ajout-devis button {
		white-space: nowrap;
		padding: 0.5rem 0.6rem;
		font-size: 0.8125rem;
	}

	.selecteur__pied {
		padding: 0.85rem 1rem;
		gap: 0.5rem;
		justify-content: center;
	}

	.selecteur__pied .bouton { width: 100%; }
}

/* --- Page de contact ------------------------------------------------------ */

.contact {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

.contact h2 { margin-bottom: 1.25rem; }

.contact__liste {
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 1.25rem;
}

.contact__liste li {
	display: flex;
	gap: 0.9rem;
	align-items: flex-start;
}

.contact__liste strong {
	display: block;
	margin-bottom: 0.15rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gris-pale);
}

.contact__icone {
	display: grid;
	place-content: center;
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--bleu-brume);
	color: var(--bleu);
}

.contact__icone svg { width: 20px; height: 20px; }

/* La carte prend un format fixe : sans hauteur déclarée, une iframe retombe
   sur 150 px, ce qui ne montre plus rien d'utile. */
.contact__plan {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--bord);
	border-radius: var(--r-l);
	/*
	 * Le cadre porte le fond, et non l'iframe : si la carte tarde ou ne vient
	 * pas, le visiteur voit une surface tenue plutôt qu'un rectangle blanc.
	 */
	background: var(--bleu-brume);
}

.contact__carte {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	height: auto;
	border: 0;
}

.contact__itineraire {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.85rem 1rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--bleu);
	text-decoration: none;
	background: var(--blanc);
	border-top: 1px solid var(--bord);
}

.contact__itineraire svg { width: 18px; height: 18px; flex: none; }

.contact__itineraire:hover,
.contact__itineraire:focus-visible {
	color: var(--blanc);
	background: var(--bleu);
}

.contact__intro {
	margin-bottom: 1.5rem;
	color: var(--gris);
}

.contact__form {
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--creme);
	border-radius: var(--r-l);
}

.contact__form .devis-rapide__champ input,
.contact__form .devis-rapide__champ textarea { background: var(--blanc); }

@media (max-width: 860px) {
	.contact { grid-template-columns: minmax(0, 1fr); }
}

/* --- Foire aux questions -------------------------------------------------- */

/*
 * Accordéon en <details> natifs. Le contenu replié reste dans le document,
 * donc lisible par les moteurs et trouvable par la recherche du navigateur —
 * ce qu'un accordéon monté en JavaScript ne garantit pas.
 */
.faq {
	max-width: 52rem;
	margin-inline: auto;
	border-top: 1px solid var(--bord);
}

.faq__item { border-bottom: 1px solid var(--bord); }

.faq__question {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	padding: 1.25rem 0;
	list-style: none;
	cursor: pointer;
	font-weight: 700;
	color: var(--bleu);
	transition: color var(--t);
}

.faq__question::-webkit-details-marker { display: none; }
.faq__question::marker { content: ""; }
.faq__question:hover { color: var(--bleu-vif); }

.faq__numero {
	flex: none;
	font-size: 0.875rem;
	font-weight: 800;
	color: var(--rouge);
	font-variant-numeric: tabular-nums;
}

.faq__intitule {
	flex: 1;
	font-size: clamp(1rem, 1.4vw, 1.125rem);
	line-height: 1.4;
}

.faq__chevron {
	flex: none;
	align-self: center;
	width: 18px;
	height: 18px;
	color: var(--gris);
	transition: transform var(--t);
}

.faq__item[open] .faq__question { color: var(--bleu-vif); }
.faq__item[open] .faq__chevron { transform: rotate(180deg); }

.faq__reponse {
	padding: 0 0 1.5rem calc(0.875rem + 1rem);
	color: var(--gris);
	line-height: 1.65;
}

.faq__reponse p { margin: 0; max-width: 62ch; }

.faq__reste {
	max-width: 52rem;
	margin: 2rem auto 0;
	text-align: center;
	font-size: 0.9375rem;
	color: var(--gris);
}

/* Liens au fil du texte, mais assez épais pour être visés au doigt. */
.faq__reste a {
	display: inline-block;
	padding-block: 0.45rem;
	font-weight: 700;
}

@media (max-width: 520px) {
	.faq__reponse { padding-left: 0; }
}

/* --- Équipe -------------------------------------------------------------- */

.equipe-grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
	gap: clamp(1.25rem, 3vw, 2rem);
	max-width: 62rem;
	margin-inline: auto;
}

.equipe-membre { text-align: center; }

/*
 * Les portraits sont détourés en cercle avec des angles transparents : un
 * cadrage carré laisserait apparaître les coins vides.
 */
.equipe-membre img {
	width: 100%;
	max-width: 160px;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--r-pilule);
	margin: 0 auto 0.85rem;
	background: var(--bleu-pale);
}

.equipe-membre strong {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	color: var(--encre);
}

.equipe-membre span {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--gris);
}

/*
 * Sous 1280 px, le bord déchiré remonterait au-delà des deux tiers de l'écran
 * et ne laisserait plus qu'un filet de texte. La photo repasse donc en flux,
 * dans son recadrage resserré sur le sujet, et le texte prend toute la largeur.
 */
@media (max-width: 1279px) {
	.bandeau {
		display: block;
		height: auto;
	}

	.bandeau__photo {
		position: static;
		display: block;
	}

	.bandeau__photo img {
		width: 100%;
		height: auto;
		object-fit: fill;
	}

	.bandeau__inner {
		grid-template-columns: 1fr;
		max-width: var(--largeur);
		margin-inline: auto;
		padding-inline: var(--gouttiere);
		padding-block: clamp(2rem, 5vw, 3rem);
	}

	.bandeau__texte { grid-column: 1; }
	.bandeau h1 em { display: inline; }
}

/*
 * Empilé, le recadrage resserré occuperait à lui seul tout l'écran et
 * repousserait le titre sous la ligne de flottaison. On le rogne donc
 * verticalement, via un format que chaque bandeau ajuste à son sujet : les
 * coffrets sont au centre de leur photo, le logo brodé et le drapeau sont
 * dans le haut de la sienne.
 */
@media (max-width: 1279px) {
	.bandeau__photo img {
		aspect-ratio: var(--bandeau-format-reduit, 1233 / 560);
		object-fit: cover;
		object-position: center var(--bandeau-ancrage-reduit, 60%);
	}
}

@media (max-width: 640px) {
	.bandeau h1 em { display: block; }
	.bandeau__actions .bouton { flex: 1 1 14rem; }
}

/* --- Visuels détourés ------------------------------------------------------ */

/*
 * Les treize coffrets régionaux sont détourés : le fichier ne contient que le
 * coffret, entouré de transparence. Ils ne s'affichent donc pas comme une
 * photo.
 *
 * Trois différences, et une raison pour chacune :
 *
 * - « contain » au lieu de « cover ». Un détourage rogné perd un coin de
 *   couvercle, et c'est justement le couvercle qui porte le nom de la région.
 * - une marge intérieure. Sans elle le coffret touche le bord du cadre et le
 *   cadeau perd son air ; la marge est un pourcentage, elle suit donc la taille
 *   du cadre au lieu d'être fixée pour une seule vignette.
 * - « drop-shadow » au lieu de « box-shadow ». L'ombre suit la silhouette. Une
 *   box-shadow dessinerait le rectangle du cadre, c'est-à-dire une forme que le
 *   visuel n'a pas.
 *
 * Le fond est posé par le conteneur, très clair et légèrement dégradé : c'est
 * ce qui fait lire le coffret comme un produit photographié en studio plutôt
 * que comme une découpe collée sur un aplat.
 */
.est-detoure {
	background-color: var(--blanc);
	background-image:
		radial-gradient(ellipse 68% 52% at 50% 64%, rgb(0 32 80 / 8%), transparent 72%),
		linear-gradient(168deg, var(--blanc) 0%, var(--creme) 100%);
}

.est-detoure > img,
img.est-detoure {
	object-fit: contain;
	padding: var(--detoure-marge, 7%);
	filter: drop-shadow(0 14px 20px rgb(0 16 42 / 22%));
}

/* Le zoom au survol reste, mais posé : un coffret qui grandit de 4 % suffit. */
.carte:hover .carte__media.est-detoure img { transform: scale(1.03); }

/* Vignette du sélecteur : cadre étroit, marge réduite en conséquence. */
.selecteur__media.est-detoure { --detoure-marge: 4%; }

/* Ligne de demande : 88 px de large, la marge n'y a plus sa place. */
img.demande__vignette.est-detoure {
	--detoure-marge: 2px;
	filter: drop-shadow(0 4px 6px rgb(0 16 42 / 20%));
}

/*
 * Fiche produit : le visuel occupe la moitié de l'écran. La marge passe sur le
 * conteneur, qui devient un vrai panneau bordé, et l'image perd son arrondi :
 * il n'y a pas de rectangle à arrondir.
 */
.fiche__media.est-detoure {
	padding: clamp(1.25rem, 4vw, 2.5rem);
	border: 1px solid var(--bord);
	border-radius: var(--r-l);
}

.fiche__media.est-detoure img {
	padding: 0;
	border-radius: 0;
	filter: drop-shadow(0 20px 30px rgb(0 16 42 / 22%));
}

/*
 * Panneau de la carte : le fond est déjà marine. Un panneau clair y ferait une
 * tache ; le coffret est posé directement sur le bleu, avec une ombre plus
 * marquée pour le décoller.
 */
.selection__visuel.est-detoure {
	background: none;
}

.selection__visuel.est-detoure img {
	padding: 0;
	border-radius: 0;
	box-shadow: none;
	filter: drop-shadow(0 24px 34px rgb(0 0 0 / 55%));
}

/* --- Décors de la page d'accueil ------------------------------------------ */

/*
 * Composition de produits sous le formulaire rapide. La colonne s'arrêtait sur
 * le numéro de téléphone et laissait un vide en face du formulaire ; les
 * bocaux et la bouteille le remplissent avec ce dont la page parle.
 *
 * L'ombre est portée par la silhouette : l'image est détourée, un cadre
 * rectangulaire n'aurait rien à border.
 */
.devis-rapide__produits {
	margin: 1.75rem 0 0;
	max-width: 20rem;
}

/*
 * Pas d'ombre ajoutée : les bocaux portent déjà la leur, celle du studio. En
 * remettre une par-dessus étale un voile gris sur tout le rectangle.
 */
.devis-rapide__produits img {
	display: block;
	width: 100%;
	height: auto;
}

/* La colonne de gauche est plus haute que le formulaire : le centrer répartit
   le blanc des deux côtés au lieu de le laisser tout entier en bas. */
.devis-rapide__inner { align-items: center; }

/*
 * Feuilles de la V1. Décor et rien d'autre : hors du flux, sans effet au
 * survol, et insensible au clic pour ne jamais gêner ce qui est dessous.
 *
 * Elles débordent volontairement de leur section, ce qui les fait entrer dans
 * la page plutôt que d'y flotter au milieu.
 */
.gamme,
.devis-rapide {
	position: relative;
}

.feuilles {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	user-select: none;
}

.feuilles img {
	display: block;
	width: 100%;
	height: auto;
}

/* La bande de gamme masque ce qui dépasse : la touffe est coupée par le bord. */
.feuilles--gamme {
	top: -1.5rem;
	left: -2.5rem;
	width: clamp(7rem, 11vw, 10.5rem);
	transform: rotate(12deg);
	opacity: 0.85;
}

/*
 * Posées derrière la composition de produits plutôt qu'au milieu du blanc :
 * un bouquet isolé dans une zone vide a l'air tombé là, adossé aux bocaux il
 * fait partie de la même nature morte.
 */
.feuilles--devis {
	left: 0.5vw;
	bottom: 2rem;
	width: clamp(5.5rem, 8vw, 8rem);
	transform: rotate(-14deg);
	opacity: 0.85;
}

/* Le contenu passe devant le décor, jamais l'inverse. */
.gamme__inner,
.devis-rapide__inner {
	position: relative;
	z-index: 1;
}

@media (max-width: 900px) {
	/*
	 * En colonne, la place manque : les feuilles se retrouveraient derrière le
	 * texte. Seule celle de la gamme reste, calée dans un coin libre.
	 */
	.feuilles--devis { display: none; }

	.feuilles--gamme {
		top: -1rem;
		left: -2rem;
		width: 6.5rem;
	}
}

@media (max-width: 860px) {
	/* Colonne unique : la composition se centre plutôt que de rester collée au
	   bord gauche sous un texte qui occupe toute la largeur. */
	.devis-rapide__produits {
		margin-inline: auto;
		max-width: 18rem;
	}
}

@media (max-width: 720px) {
	/*
	 * Sur téléphone, la composition de produits s'intercale entre le texte et
	 * le formulaire : elle sépare la promesse de son bouton au lieu de
	 * l'illustrer. Elle disparaît, et l'image n'est même pas téléchargée, un
	 * chargement différé ne s'exécutant pas pour un élément non affiché.
	 */
	.devis-rapide__produits { display: none; }
}

/* --- Carrousel de cartes -------------------------------------------------- */

/*
 * Même procédé que la rangée de tuiles : la piste déborde du conteneur jusqu'aux
 * bords de l'écran et défile au doigt. Elle s'y ajoute des flèches, parce que
 * treize cartes débordent toujours et qu'à la souris, sans barre de défilement
 * visible, rien n'indiquerait qu'il y a une suite.
 */
.carrousel { position: relative; }

.carrousel__piste {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(min(76vw, 285px), 1fr);
	gap: clamp(1.25rem, 2.5vw, 1.75rem);
	overflow-x: auto;
	scrollbar-width: none;
	padding-inline: var(--gouttiere);
	margin-inline: calc(50% - 50vw);
	scroll-snap-type: x proximity;
	scroll-padding-inline: var(--gouttiere);

	/* Les cartes portent une ombre au survol : sans cette marge, elle est
	   coupée net par le bord de la zone de défilement. */
	padding-block: 0.5rem;
}

.carrousel__piste::-webkit-scrollbar { display: none; }
.carrousel__piste > * { scroll-snap-align: start; }

/* Au-delà de la largeur maximale, on recentre pour ne pas étirer à l'infini. */
@media (min-width: 1340px) {
	.carrousel__piste {
		margin-inline: auto;
		padding-inline: 0;
		scroll-padding-inline: 0;
		max-width: var(--largeur);
	}
}

.carrousel__fleche {
	position: absolute;
	top: 8.5rem;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: var(--bleu);
	background: var(--blanc);
	border: 1px solid var(--bord);
	border-radius: 50%;
	box-shadow: 0 8px 20px rgb(0 16 42 / 18%);
	cursor: pointer;
	transition: background var(--t), color var(--t), opacity var(--t);
}

/* « display: grid » l'emporterait sur le masquage natif de l'attribut. */
.carrousel__fleche[hidden] { display: none; }

.carrousel__fleche svg { width: 20px; height: 20px; }
.carrousel__fleche:hover { background: var(--bleu); color: var(--blanc); border-color: var(--bleu); }

/* Bout de course : la flèche reste en place, elle s'éteint. */
.carrousel__fleche:disabled {
	opacity: 0.3;
	cursor: default;
	background: var(--blanc);
	color: var(--bleu);
	border-color: var(--bord);
}

.carrousel__fleche--avant { left: -0.75rem; }
.carrousel__fleche--apres { right: -0.75rem; }

/*
 * Au doigt, le glissement suffit et la flèche mange le visuel. Deux conditions
 * plutôt qu'une : « hover: none » vise l'appareil tactile quelle que soit sa
 * taille, la largeur vise les écrans où la carte occupe déjà presque toute la
 * place et où une pastille de 44 px lui passerait dessus.
 */
@media (hover: none) {
	.carrousel__fleche { display: none; }
}

@media (max-width: 860px) {
	.carrousel__fleche { display: none; }
}

/* --- Compositions d'un coffret -------------------------------------------- */

/*
 * Trois compositions, un seul formulaire. Les onglets sont les boutons radio
 * eux-mêmes : ils changent de panneau par « :checked » et partent avec le
 * formulaire. Rien à synchroniser, et cela fonctionne sans JavaScript.
 *
 * Les règles sont écrites clé par clé plutôt qu'avec « nth-of-type » : le
 * formulaire contient d'autres <input> (jeton, identifiant, action), qui
 * fausseraient le comptage.
 */
.offres { margin-top: 1.75rem; }

.offres__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.offres__onglets {
	display: flex;
	gap: 0.5rem;
	padding: 0.35rem;
	background: var(--bleu-brume);
	border-radius: var(--r-l);
}

.offres__onglet {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.7rem 0.6rem;
	text-align: center;
	border-radius: var(--r-s);
	cursor: pointer;
	transition: background var(--t), color var(--t);
}

.offres__onglet:hover { background: rgb(255 255 255 / 60%); }

.offres__nom {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--bleu);
	line-height: 1.2;
}

.offres__prix {
	font-size: 0.8125rem;
	color: var(--gris);
}

.offres__panneau { display: none; }

.offres__resume {
	margin: 1.25rem 0 0;
	font-size: 0.9375rem;
	color: var(--gris);
}

.offres__titre {
	margin: 1.25rem 0 0.6rem;
	font-size: 1rem;
	letter-spacing: 0;
}

.offres__liste {
	margin: 0;
	padding-left: 1.1rem;
	line-height: 1.7;
}

.offres__liste li { margin-bottom: 0.15rem; }

/* Onglet retenu : fond blanc, prix en brique. Une clé par règle. */
.offres__radio[value="decouverte"]:checked ~ .offres__onglets .offres__onglet[data-offre="decouverte"],
.offres__radio[value="premium"]:checked ~ .offres__onglets .offres__onglet[data-offre="premium"],
.offres__radio[value="vege"]:checked ~ .offres__onglets .offres__onglet[data-offre="vege"] {
	background: var(--blanc);
	box-shadow: var(--ombre-s);
}

.offres__radio[value="decouverte"]:checked ~ .offres__onglets .offres__onglet[data-offre="decouverte"] .offres__prix,
.offres__radio[value="premium"]:checked ~ .offres__onglets .offres__onglet[data-offre="premium"] .offres__prix,
.offres__radio[value="vege"]:checked ~ .offres__onglets .offres__onglet[data-offre="vege"] .offres__prix {
	font-weight: 700;
	color: var(--rouge);
}

.offres__radio[value="decouverte"]:checked ~ .offres__panneau[data-offre="decouverte"],
.offres__radio[value="premium"]:checked ~ .offres__panneau[data-offre="premium"],
.offres__radio[value="vege"]:checked ~ .offres__panneau[data-offre="vege"] {
	display: block;
}

/* Le radio est invisible : c'est l'onglet qui doit montrer le focus clavier. */
.offres__radio[value="decouverte"]:focus-visible ~ .offres__onglets .offres__onglet[data-offre="decouverte"],
.offres__radio[value="premium"]:focus-visible ~ .offres__onglets .offres__onglet[data-offre="premium"],
.offres__radio[value="vege"]:focus-visible ~ .offres__onglets .offres__onglet[data-offre="vege"] {
	outline: 3px solid var(--bleu-vif);
	outline-offset: 2px;
}

.offres .ajout-devis__bouton { margin-top: 1.5rem; }

.fiche__mention--offres { margin-top: 0.75rem; }

.fiche__lien-demande {
	margin-top: 0.75rem;
	font-size: 0.9375rem;
}

/* Lien secondaire sous le bouton d'ajout : la marge intérieure lui donne les
   32 px de haut qu'il faut pour être atteint au doigt. */
.fiche__lien-demande a {
	display: inline-block;
	padding: 0.5rem 0.3rem;
	margin: -0.5rem -0.3rem;
}

@media (max-width: 480px) {
	/* Trois onglets côte à côte deviennent illisibles : ils s'empilent. */
	.offres__onglets { flex-direction: column; }

	.offres__onglet {
		flex-direction: row;
		justify-content: space-between;
		align-items: baseline;
		text-align: left;
	}
}

/* Composition retenue, rappelée sur la ligne de demande. */
.demande__offre {
	display: inline-block;
	margin-top: 0.2rem;
	padding: 0.1rem 0.5rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--bleu);
	background: var(--bleu-pale);
	border-radius: var(--r-pilule);
}

/* Lien Instagram du pied de page. */
.pied__reseau {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	margin-top: 1rem;
	padding: 0.6rem 0.9rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--blanc);
	text-decoration: none;
	border: 1px solid rgb(255 255 255 / 22%);
	border-radius: var(--r-pilule);
	transition: background var(--t), border-color var(--t);
}

.pied__reseau:hover,
.pied__reseau:focus-visible {
	background: rgb(255 255 255 / 10%);
	border-color: rgb(255 255 255 / 45%);
}

.pied__reseau-icone { display: inline-flex; }
.pied__reseau-icone svg { width: 18px; height: 18px; }

/* --- Centrage des premiers blocs sur téléphone ---------------------------- */

/*
 * Au-dessus de la bande de gamme, les blocs sont bâtis en deux colonnes :
 * texte à gauche, visuel à droite. Empilés sur téléphone, ce texte reste ferré
 * à gauche alors qu'il occupe désormais toute la largeur, et le regard n'a plus
 * de colonne où s'accrocher. Il se centre, comme le reste de la page.
 *
 * S'arrête à la gamme : au-delà, les blocs sont déjà centrés ou faits pour être
 * lus au fil du texte.
 */
@media (max-width: 900px) {
	.hero__texte,
	.selection__corps,
	.reassurance__item {
		text-align: center;
	}

	.hero__accroche,
	.selection__extrait,
	.selection__mention,
	.reassurance__item p {
		margin-inline: auto;
	}

	.hero__actions,
	.selection__actions {
		justify-content: center;
	}

	/* L'icône est un bloc dans une carte ferrée à gauche : elle se recentre
	   avec le texte qu'elle annonce. */
	.reassurance__icone { margin-inline: auto; }
}

/*
 * Recherche hors en-tête, sur la page 404. La barre de l'en-tête est bornée
 * par sa colonne de grille ; posée dans le flux d'une page, elle s'étirerait
 * sur toute la largeur.
 */
.recherche--page {
	max-width: 26rem;
	margin: 1.5rem auto 0;
}

/*
 * Choix de composition sur la ligne de demande. Trois boutons plutôt qu'un
 * menu déroulant : le panneau d'un <select> est dessiné par le système et
 * aucune règle ne l'atteint. Ici les trois prix se comparent d'un regard, et
 * c'est le même dispositif que les onglets de la fiche.
 */
.demande__compositions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin-top: 0.45rem;
}

.demande__compositions input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.demande__compositions label {
	display: flex;
	flex-direction: column;
	gap: 0.05rem;
	padding: 0.35rem 0.7rem;
	font-size: 0.75rem;
	line-height: 1.25;
	color: var(--gris);
	background: var(--bleu-brume);
	border: 1px solid transparent;
	border-radius: var(--r-s);
	cursor: pointer;
	transition: background var(--t), color var(--t), border-color var(--t);
}

.demande__compositions label strong {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--encre);
}

.demande__compositions label:hover { border-color: var(--bleu-clair); }

.demande__compositions input:checked + label {
	color: var(--blanc);
	background: var(--bleu);
	border-color: var(--bleu);
}

.demande__compositions input:checked + label strong { color: var(--blanc); }

/* Le bouton radio est masqué : c'est l'étiquette qui montre le focus. */
.demande__compositions input:focus-visible + label {
	outline: 3px solid var(--bleu-vif);
	outline-offset: 2px;
}

/*
 * Cadre de hauteur fixe dans le panneau de la carte, l'image centrée dedans.
 *
 * Les coffrets fermés sont en 4:3, le coffret ouvert en portrait. Laissées à
 * leur largeur de colonne, la première faisait 188 px de haut et la seconde
 * 313 : le panneau changeait de taille d'une région à l'autre. Bornées par la
 * hauteur, les deux tiennent dans le même cadre, et la photo verticale y est
 * bien plus grande qu'inscrite dans un rectangle horizontal.
 */
.selection__visuel {
	display: grid;
	place-items: center;
	min-height: var(--selection-cadre, 15.5rem);
}

.selection__visuel img {
	width: auto;
	max-width: 100%;
	max-height: var(--selection-cadre, 15.5rem);
}

@media (max-width: 720px) {
	/* Empilé, le panneau a la place : le cadre peut monter. */
	.selection { --selection-cadre: 18rem; }
}

/* Ligne en cours d'enregistrement : elle s'estompe le temps de l'aller-retour. */
.demande__ligne.est-en-cours {
	opacity: 0.55;
	pointer-events: none;
}

/* --- Pages WooCommerce du flux Merchant Center ---------------------------- */

/*
 * WooCommerce n'est gardé que pour alimenter le flux Google Shopping : ces
 * pages sont des arrivées de publicité, donc du trafic payé. Elles héritent de
 * l'en-tête et du pied du site ; il reste à leur donner ses couleurs, sans
 * réécrire les gabarits de l'extension.
 */
.boutique { padding-block: clamp(1.5rem, 4vw, 2.5rem); }

.boutique .product_title {
	font-size: clamp(1.75rem, 3.2vw, 2.5rem);
	line-height: 1.1;
	margin-bottom: 0.75rem;
}

.boutique .price,
.boutique .woocommerce-Price-amount {
	color: var(--encre);
	font-size: 1.5rem;
	font-weight: 700;
}

.boutique .woocommerce-product-details__short-description {
	color: var(--gris);
	line-height: 1.6;
}

/* Bouton d'achat : la couleur par défaut de WooCommerce est un violet qui
   n'appartient à aucune charte. */
.boutique .button,
.boutique button.button,
.boutique .button.alt {
	font-family: inherit;
	font-weight: 600;
	color: var(--blanc);
	background: var(--bleu);
	border-radius: var(--r-s);
	padding: 0.8rem 1.5rem;
}

.boutique .button:hover,
.boutique button.button:hover,
.boutique .button.alt:hover { background: var(--bleu-vif); color: var(--blanc); }

.boutique .quantity input {
	padding: 0.7rem 0.5rem;
	font-family: inherit;
	font-size: 1rem;
	border: 1.5px solid var(--bord);
	border-radius: var(--r-s);
}

.produit__vers-coffret { margin: 1.25rem 0 0; }

.boutique .product_meta {
	margin-top: 1.25rem;
	font-size: 0.875rem;
	color: var(--gris);
}

.boutique .woocommerce-tabs ul.tabs li.active a { color: var(--bleu); }
.boutique .woocommerce-tabs .panel h2 { font-size: 1.25rem; }

.boutique .woocommerce-message,
.boutique .woocommerce-info {
	border-top-color: var(--bleu);
	background: var(--bleu-brume);
}

.boutique .woocommerce-message::before,
.boutique .woocommerce-info::before { color: var(--bleu); }

/* Formulaire court : rappel des erreurs et confirmation, en place. */
.devis-rapide__erreurs {
	margin-bottom: 1.25rem;
	padding: 0.9rem 1.1rem;
	color: var(--rouge);
	background: var(--rouge-pale);
	border-left: 3px solid var(--rouge);
	border-radius: var(--r-s);
}

.devis-rapide__erreurs ul { margin: 0; padding-left: 1.1rem; font-size: 0.9375rem; }
.devis-rapide__erreurs li { margin-bottom: 0.2rem; }
.devis-rapide__erreurs li:last-child { margin-bottom: 0; }

.devis-rapide__form [aria-invalid="true"] {
	border-color: var(--rouge);
	box-shadow: 0 0 0 3px var(--rouge-pale);
}

.devis-rapide__confirmation {
	display: grid;
	justify-items: center;
	gap: 0.4rem;
	padding: clamp(1.75rem, 4vw, 2.5rem);
	text-align: center;
	background: var(--bleu-brume);
	border-radius: var(--r-l);
}

.devis-rapide__confirmation strong { font-size: 1.125rem; color: var(--bleu); }
.devis-rapide__confirmation span:last-child { color: var(--gris); }

.devis-rapide__coche {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-bottom: 0.35rem;
	color: var(--blanc);
	background: var(--bleu);
	border-radius: 50%;
}

.devis-rapide__coche svg { width: 22px; height: 22px; }

/* --- Bandeau de consentement CookieYes ------------------------------------ */

/*
 * Le bandeau n'est pas servi par le site : Tag Manager charge le script de
 * CookieYes, qui construit son balisage et pose ses couleurs en style en
 * ligne, depuis un tableau de bord tiers. Il arrivait donc en bleu roi, celui
 * que la charte réserve aux liens et aux survols, posé sur une page dont tous
 * les aplats sont en marine.
 *
 * Le « !important » n'est pas ici un aveu de faiblesse : une déclaration
 * importante d'une feuille d'auteur l'emporte sur un attribut style ordinaire,
 * et c'est le seul moyen de reprendre la main sur un balisage qu'on ne rend
 * pas soi-même.
 */

.cky-btn-accept,
.cky-btn-reject,
.cky-btn-preferences {
	color: var(--blanc) !important;
	background-color: var(--bleu) !important;
	border-color: var(--bleu) !important;
}

.cky-btn-accept:hover,
.cky-btn-reject:hover,
.cky-btn-preferences:hover {
	background-color: var(--bleu-vif) !important;
	border-color: var(--bleu-vif) !important;
}

/* Bouton de contour, à l'image de .bouton--secondaire. */
.cky-btn-customize {
	color: var(--bleu) !important;
	background-color: var(--blanc) !important;
	border-color: var(--bleu) !important;
}

.cky-btn-customize:hover {
	background-color: var(--bleu-brume) !important;
}

/*
 * Interrupteurs des catégories facultatives. Leur état actif portait le même
 * bleu roi que les boutons, appliqué par une règle et non en ligne.
 */
.cky-switch input[type="checkbox"]:checked {
	background-color: var(--bleu) !important;
	border-color: var(--bleu) !important;
}

/* « Afficher plus » est un lien : il garde donc la couleur des liens du site. */
.cky-show-desc-btn {
	color: var(--bleu-vif) !important;
}

/*
 * Anneau de mise au point. CookieYes n'en dessine pas, si bien qu'un visiteur
 * au clavier traversait le bandeau sans voir où il se trouvait.
 */
.cky-btn:focus-visible,
.cky-show-desc-btn:focus-visible,
.cky-accordion-btn:focus-visible,
.cky-btn-close:focus-visible {
	outline: 2px solid var(--bleu) !important;
	outline-offset: 2px !important;
}