/* ==========================================================================
   Gautier Audio — feuille de style unique
   --------------------------------------------------------------------------
   Identité reprise du site d'origine, relevée dans le CSS généré par Astra
   (sauvegardes/configuration-visuelle/astra-configuration.css) :

     #fbbd14  jaune de la marque        --ast-global-color-0
     #dca309  jaune foncé (survol)      --ast-global-color-1
     #2b2f38  anthracite (en-tête)      --ast-global-color-2
     #5d6167  gris de texte             --ast-global-color-3
     #f9f9f9  fond clair                --ast-global-color-4
     #ffffff  blanc                     --ast-global-color-5
     Poppins  typographie

   Une seule requête CSS, aucune ressource externe. Poppins est auto-hébergée
   (voir @font-face plus bas) : c'est ce qui règle le grief RGPD de l'audit,
   où trois requêtes partaient vers Google Fonts avant tout consentement.

   Organisation : 1 jetons · 2 réinitialisation · 3 éléments · 4 mise en page
   5 composants · 6 emplacements médias · 7 utilitaires · 8 préférences
   ========================================================================== */

/* ══ 1. Jetons ═══════════════════════════════════════════════════════════ */

:root {
	--jaune:        #fbbd14;
	--jaune-fonce:  #dca309;
	/* Le jaune de marque sur blanc plafonne à 1,61:1 — très en dessous du
	   4,5:1 exigé par le RGAA/WCAG AA. Cette déclinaison sombre est réservée
	   au TEXTE sur fond clair : 5,0:1 sur blanc, 4,8:1 sur --fond. Le jaune
	   d'origine reste utilisé partout ailleurs (aplats, bordures, fonds
	   sombres où il atteint 7,9:1). */
	--jaune-texte:  #8f6900;
	--anthracite:   #2b2f38;
	--anthracite-2: #23262d;
	--gris:         #5d6167;
	--gris-clair:   #6b6f76;   /* 5,05:1 sur blanc — était #8a8e95, 3,29:1 */
	--fond:         #f9f9f9;
	--blanc:        #ffffff;   /* blanc franc — ne jamais redéfinir */
	--page:         #ffffff;   /* fond de page — c'est LUI que le thème sombre inverse */
	--ligne:        rgba(43, 47, 56, 0.12);
	--ligne-sombre: rgba(255, 255, 255, 0.14);

	--police: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	          "Helvetica Neue", Arial, sans-serif;

	/* Échelle fluide : le texte s'adapte en continu, sans point de rupture. */
	--t-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
	--t-s:    clamp(0.87rem, 0.84rem + 0.16vw, 0.95rem);
	--t-base: clamp(1rem,    0.97rem + 0.18vw, 1.08rem);
	--t-m:    clamp(1.12rem, 1.03rem + 0.42vw, 1.35rem);
	--t-l:    clamp(1.4rem,  1.15rem + 1.15vw, 2rem);
	--t-xl:   clamp(1.9rem,  1.4rem + 2.4vw,   3rem);
	--t-xxl:  clamp(2.3rem,  1.5rem + 4vw,     4.2rem);

	--marge:   clamp(1.1rem, 0.8rem + 1.3vw, 2rem);
	--section: clamp(3.5rem, 2.2rem + 5.5vw, 7rem);
	--largeur: 1200px;

	--radius: 6px;
	--radius-pilule: 999px;
	--transition: 200ms cubic-bezier(0.2, 0, 0.2, 1);
	--ombre: 0 2px 18px rgba(43, 47, 56, 0.08);
}

/* --------------------------------------------------------------------------
   Poppins auto-hébergée
   --------------------------------------------------------------------------
   Les quatre graisses sont dans le pack (src/static/fonts/), sous-ensemble
   latin, 31 Ko au total. Licence SIL Open Font 1.1 : l'auto-hébergement et la
   redistribution sont expressément autorisés.

   Le site d'origine chargeait Poppins depuis fonts.googleapis.com, ce qui
   transmettait l'adresse IP de chaque visiteur à Google avant tout
   consentement. Servis depuis le domaine du site, ces fichiers suppriment le
   problème : plus aucune requête vers un tiers, donc plus rien à consentir.

   font-display: swap — le texte s'affiche immédiatement dans la police
   système, puis bascule sur Poppins. Jamais de texte invisible au chargement.
   -------------------------------------------------------------------------- */

@font-face {
	font-family: "Poppins";
	src: url("/fonts/poppins-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Poppins";
	src: url("/fonts/poppins-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Poppins";
	src: url("/fonts/poppins-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Poppins";
	src: url("/fonts/poppins-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ══ 2. Réinitialisation ═════════════════════════════════════════════════ */

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

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

body {
	min-height: 100vh;
	background: var(--page);
	color: var(--gris);
	font-family: var(--police);
	font-size: var(--t-base);
	line-height: 1.7;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, li { overflow-wrap: break-word; }

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--jaune);
	outline-offset: 2px;
	border-radius: var(--radius);
}

/* ══ 3. Éléments ═════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5 {
	color: var(--anthracite);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

h1 { font-size: var(--t-xxl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-l); }
h4 { font-size: var(--t-m); }
h5 { font-size: var(--t-base); }

p + p, p + ul, ul + p { margin-top: 1.1em; }
h2 + p, h3 + p, h4 + p { margin-top: 0.7em; }

a { color: inherit; text-decoration-color: rgba(43, 47, 56, 0.3); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--jaune); }

strong { font-weight: 600; color: var(--anthracite); }

ul, ol { padding-left: 1.2em; }
li + li { margin-top: 0.55em; }

/* ══ 4. Mise en page ═════════════════════════════════════════════════════ */

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

.section { padding-block: var(--section); }
.section--fond   { background: var(--fond); }
.section--sombre { background: var(--anthracite); color: rgba(255,255,255,0.82); }
.section--sombre :is(h1,h2,h3,h4,h5) { color: var(--blanc); }

.section__titre { margin-bottom: 0.5em; }
.section__chapo { max-width: 68ch; font-size: var(--t-m); }
.section--centre { text-align: center; }
.section--centre .section__chapo { margin-inline: auto; }

.surtitre {
	display: block;
	margin-bottom: 0.9rem;
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--jaune);
}

.deux-colonnes {
	display: grid;
	gap: clamp(2rem, 1rem + 4vw, 4.5rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	align-items: center;
}
.deux-colonnes--haut { align-items: start; }

/* ══ 5. Composants ═══════════════════════════════════════════════════════ */

/* --- Lien d'évitement (absent du site d'origine) ----------------------- */
.lien-evitement {
	position: absolute; left: -9999px; top: 0; z-index: 200;
	padding: 0.8rem 1.3rem; background: var(--jaune); color: var(--anthracite);
	font-weight: 600; text-decoration: none;
}
.lien-evitement:focus { left: 0; }

/* --- En-tête ------------------------------------------------------------ */
.entete {
	position: sticky; top: 0; z-index: 100;
	background: var(--anthracite);
	border-bottom: 1px solid var(--ligne-sombre);
}
.entete__inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--marge); min-height: 5rem;
}

.logo { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--blanc); }
.logo__marque { width: 42px; height: 42px; flex: none; }
.logo__nom { font-size: 1.28rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1; }

.navigation { display: flex; align-items: center; gap: clamp(0.3rem, 1vw, 1rem); }
.navigation__liste { display: flex; align-items: center; gap: clamp(0.2rem, 0.8vw, 0.9rem); list-style: none; margin: 0; padding: 0; }
.navigation__item { margin: 0; }

.navigation__lien {
	display: inline-flex; align-items: center; min-height: 44px;
	padding-inline: 0.55rem;
	color: rgba(255,255,255,0.86);
	font-size: var(--t-s); font-weight: 500;
	text-decoration: none; white-space: nowrap;
	transition: color var(--transition);
}
.navigation__lien:hover { color: var(--jaune); }
.navigation__lien.est-actif { color: var(--jaune); }

.bouton-menu { display: none; }

@media (max-width: 1279px) {
	.bouton-menu {
		display: inline-flex; align-items: center; gap: 0.55rem;
		min-height: 44px; padding: 0.4rem 0.7rem;
		background: none; border: 1px solid var(--ligne-sombre);
		border-radius: var(--radius); color: var(--blanc);
		font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase;
		cursor: pointer;
	}
	.bouton-menu__barres { display: grid; gap: 4px; width: 18px; }
	.bouton-menu__barres i { display: block; height: 2px; background: currentColor; transition: transform var(--transition), opacity var(--transition); }
	.bouton-menu[aria-expanded="true"] .bouton-menu__barres i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
	.bouton-menu[aria-expanded="true"] .bouton-menu__barres i:nth-child(2) { opacity: 0; }
	.bouton-menu[aria-expanded="true"] .bouton-menu__barres i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

	.navigation {
		position: fixed; inset: 5rem 0 auto 0;
		flex-direction: column; align-items: stretch; gap: 0;
		padding: var(--marge) var(--marge) calc(var(--marge) * 1.5);
		background: var(--anthracite-2);
		border-bottom: 1px solid var(--ligne-sombre);
		max-height: calc(100dvh - 5rem); overflow-y: auto;
		transform: translateY(-10px); opacity: 0; visibility: hidden;
		transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
	}
	.navigation.est-ouvert { transform: none; opacity: 1; visibility: visible; }
	.navigation__liste { flex-direction: column; align-items: stretch; gap: 0; }
	.navigation__lien { min-height: 54px; padding-inline: 0; font-size: var(--t-m); border-bottom: 1px solid var(--ligne-sombre); }

	html.no-js .navigation { position: static; opacity: 1; visibility: visible; transform: none; }
	html.no-js .bouton-menu { display: none; }
}

/* --- Boutons ------------------------------------------------------------ */
.bouton {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 50px; padding: 0.85rem 2rem;
	border: 2px solid transparent; border-radius: var(--radius-pilule);
	font-size: var(--t-xs); font-weight: 600;
	letter-spacing: 0.13em; text-transform: uppercase;
	text-align: center; text-decoration: none; cursor: pointer;
	transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.bouton--principal { background: var(--jaune); border-color: var(--jaune); color: var(--anthracite); }
.bouton--principal:hover, .bouton--principal:focus-visible { background: var(--jaune-fonce); border-color: var(--jaune-fonce); }

.bouton--contour { background: transparent; border-color: var(--anthracite); color: var(--anthracite); }
.bouton--contour:hover { background: var(--anthracite); color: var(--blanc); }

.section--sombre .bouton--contour, .heros .bouton--contour { border-color: rgba(255,255,255,0.5); color: var(--blanc); }
.section--sombre .bouton--contour:hover, .heros .bouton--contour:hover { background: var(--blanc); color: var(--anthracite); border-color: var(--blanc); }

.actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.2rem; }
.section--centre .actions { justify-content: center; }

/* --- Héros -------------------------------------------------------------- */
.heros {
	position: relative; isolation: isolate;
	display: flex; align-items: center;
	min-height: clamp(28rem, 62vh, 40rem);
	padding-block: var(--section);
	background: var(--anthracite);
	color: var(--blanc);
	overflow: hidden;
}
.heros :is(h1, h2) { color: var(--blanc); }
.heros__inner { position: relative; z-index: 2; max-width: 46rem; }
.heros__titre { margin-bottom: 0.45em; }
.heros__chapo { font-size: var(--t-m); color: rgba(255,255,255,0.85); max-width: 44rem; }

/* Voile assurant la lisibilité du texte au-dessus d'une vidéo ou d'une image. */
.heros__voile {
	position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(100deg, rgba(35,38,45,0.94) 0%, rgba(35,38,45,0.78) 45%, rgba(35,38,45,0.45) 100%);
}

/* --- Cartes de gamme (accueil) ------------------------------------------ */
.grille-gammes {
	display: grid; gap: clamp(1.5rem, 1rem + 2.5vw, 2.5rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	margin-top: 3rem;
}
.carte-gamme {
	display: flex; flex-direction: column;
	background: var(--page); border: 1px solid var(--ligne);
	border-radius: var(--radius); overflow: hidden;
	transition: transform var(--transition), box-shadow var(--transition);
}
.carte-gamme:hover { transform: translateY(-3px); box-shadow: var(--ombre); }
.carte-gamme__media { aspect-ratio: 4 / 3; background: var(--fond); }
.carte-gamme__media img { width: 100%; height: 100%; object-fit: cover; }
.carte-gamme__corps { display: flex; flex-direction: column; flex-grow: 1; padding: clamp(1.3rem, 1rem + 1vw, 1.9rem); }
.carte-gamme__titre { margin-bottom: 0.6rem; }
.carte-gamme__texte { flex-grow: 1; font-size: var(--t-s); }
.carte-gamme__lien { margin-top: 1.4rem; }

/* --- Arguments ---------------------------------------------------------- */
.grille-arguments {
	display: grid; gap: clamp(1.5rem, 1rem + 2.5vw, 3rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	margin-top: 3rem;
}
.argument__titre { font-size: var(--t-m); margin-bottom: 0.5rem; }
.argument__texte { font-size: var(--t-s); }

/* --- Les trois piliers -------------------------------------------------- */
.piliers {
	display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.pilier { padding-top: 1.4rem; border-top: 3px solid var(--jaune); }
.pilier__titre { font-size: var(--t-m); margin-bottom: 0.6rem; }
.pilier__texte { font-size: var(--t-s); }

/* --- Modèles ------------------------------------------------------------ */
.grille-modeles {
	display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	margin-top: 2.5rem;
}
.modele {
	display: flex; flex-direction: column;
	background: var(--page); border: 1px solid var(--ligne); border-radius: var(--radius);
	overflow: hidden;
}
.modele__media { aspect-ratio: 4 / 3; background: var(--fond); }
.modele__media img { width: 100%; height: 100%; object-fit: cover; }
.modele__corps { display: flex; flex-direction: column; flex-grow: 1; padding: clamp(1.2rem, 1rem + 1vw, 1.8rem); }
.modele__format { font-size: var(--t-xs); letter-spacing: 0.13em; text-transform: uppercase; color: var(--jaune); font-weight: 600; }
.modele__titre { margin: 0.5rem 0 0.4rem; }
.modele__accroche { font-weight: 600; color: var(--anthracite); font-size: var(--t-s); }
.modele__texte { flex-grow: 1; font-size: var(--t-s); margin-top: 0.5rem; }
.modele__prix { margin-top: 1.3rem; font-size: var(--t-m); font-weight: 700; color: var(--anthracite); white-space: nowrap; }
.modele__unite { display: block; font-size: var(--t-xs); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gris-clair); }
.modele__lien { margin-top: 1.2rem; }

/* --- Fiche produit ------------------------------------------------------ */
.fiche__entete { padding-block: clamp(2.5rem, 2rem + 3vw, 4rem); background: var(--fond); border-bottom: 1px solid var(--ligne); }
.fil-ariane { font-size: var(--t-xs); color: var(--gris-clair); margin-bottom: 1.1rem; }
.fil-ariane a { text-decoration: none; }
.fil-ariane a:hover { color: var(--jaune); }
.fiche__prix { margin-top: 1.6rem; font-size: var(--t-l); font-weight: 700; color: var(--anthracite); }
.fiche__unite { display: block; font-size: var(--t-xs); font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gris-clair); margin-top: 0.3rem; }

/* --- Bloc revendeur ----------------------------------------------------- */
.revendeur { padding-block: var(--section); background: var(--anthracite); color: rgba(255,255,255,0.85); }
.revendeur :is(h2) { color: var(--blanc); }
.revendeur__inner { max-width: 60ch; }
.revendeur__mention { margin-top: 1.4rem; font-size: var(--t-xs); color: rgba(255,255,255,0.6); }
.revendeur__mention a { color: inherit; }

/* --- Bloc Informations (repris du site d'origine) ----------------------- */
.informations { display: grid; gap: clamp(1.5rem, 1rem + 2.5vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); margin-top: 2.5rem; }
.information__libelle { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--jaune); margin-bottom: 0.7rem; }
.information__valeur { font-size: var(--t-s); font-style: normal; }
.information__valeur a { text-decoration: none; }
.information__valeur a:hover { text-decoration: underline; text-underline-offset: 0.25em; }

.reseaux { display: flex; flex-wrap: wrap; gap: 0.6rem 1.1rem; list-style: none; margin: 0; padding: 0; font-size: var(--t-s); }
.reseaux li { margin: 0; }
.reseaux a { text-decoration: none; }
.reseaux a:hover { color: var(--jaune); }

/* --- Références ---------------------------------------------------------
   Les règles de mise en page vivent maintenant dans la section « Nos
   références », en fin de feuille : les cartes portent logo ET citation, ce
   que l'ancienne bande de logos en `flex` ne savait pas faire. Elles étaient
   restées ici et l'emportaient sur les nouvelles par spécificité
   (`.references li` bat `.reference`), ce qui posait les quatre éléments de
   chaque carte côte à côte au lieu de les empiler. */

/* --- Newsletter : voir la section « bandeaux sur vidéo » en fin de feuille -- */

/* --- Formulaire --------------------------------------------------------- */
.formulaire { margin-top: 2rem; max-width: 34rem; }
.champ { margin-bottom: 1.3rem; }
.champ label { display: block; margin-bottom: 0.4rem; font-size: var(--t-s); font-weight: 500; color: var(--anthracite); }
.champ input, .champ select, .champ textarea {
	width: 100%; padding: 0.75rem 1rem;
	background: var(--page); border: 1px solid var(--ligne); border-radius: var(--radius);
	color: var(--anthracite);
}
.champ textarea { resize: vertical; min-height: 8rem; }
.champ :is(input, select, textarea):focus { border-color: var(--jaune); }
.champ--consentement { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start; }
.champ--consentement input { width: 1.1rem; height: 1.1rem; margin-top: 0.35rem; accent-color: var(--jaune); }
.champ--consentement label { font-size: var(--t-xs); color: var(--gris); font-weight: 400; margin: 0; }
.cache { position: absolute; left: -9999px; }

/* --- Liste à puces jaune ------------------------------------------------ */
.liste-avantages { list-style: none; padding-left: 0; }
.liste-avantages li { position: relative; padding-left: 1.7rem; font-size: var(--t-s); }
.liste-avantages li::before {
	content: ""; position: absolute; left: 0; top: 0.62em;
	width: 0.7rem; height: 3px; background: var(--jaune); border-radius: 2px;
}

/* --- Pied de page ------------------------------------------------------- */
/* --- Pied de page ---------------------------------------------------------
   Quatre colonnes alignées à gauche. Il n'y en avait que deux, rejetées aux
   deux bords avec un vide au milieu, et celle de droite alignée à droite : en
   français, un paragraphe ferré à droite se lit mal et passe pour un défaut.
   La colonne d'identité est plus large que les trois autres (2fr contre 1fr) :
   elle porte une phrase, les autres portent des listes de liens.
   ------------------------------------------------------------------------ */

.pied {
	background: var(--anthracite-2);
	color: rgba(255, 255, 255, .68);
	padding-top: clamp(3rem, 2rem + 4vw, 4.5rem);
	font-size: var(--t-s);
}
.pied :is(h2, p.pied__titre) { color: var(--blanc); }

.pied__grille {
	display: grid;
	gap: clamp(2rem, 1rem + 3vw, 3.2rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
	align-items: start;
}

.pied__titre {
	margin-bottom: 1rem;
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--jaune);
}

.pied address { font-style: normal; }
.pied a:not(.bouton) { color: inherit; text-decoration: none; }
.pied a:not(.bouton):hover,
.pied a:not(.bouton):focus-visible { color: var(--jaune); text-decoration: underline; text-underline-offset: .25em; }

/* Colonne d'identité : logo, nom, baseline, distinction. */
.pied__logo { width: 40px; height: 40px; display: block; }
.pied__nom {
	margin-top: .8rem;
	font-family: var(--titre, inherit);
	font-size: var(--t-m);
	font-weight: 700;
	color: var(--blanc);
	letter-spacing: .01em;
}
.pied__baseline { margin-top: .5rem; max-width: 34ch; }

/* La distinction était du jaune nu au fil du texte, qu'on prenait pour un lien
   mort. Elle devient une pastille discrète, avec sa médaille. */
.pied__distinction {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-top: 1.2rem;
	padding: .45rem .8rem .45rem .65rem;
	border: 1px solid rgba(251, 189, 20, .32);
	border-radius: var(--radius-pilule);
	font-size: var(--t-xs);
	line-height: 1.35;
	color: var(--jaune);
}
.pied__medaille { width: 18px; height: 18px; flex: none; }

/* Colonnes de liens. */
.pied__liens { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.pied__liens li { margin: 0; }
.pied__liens a { display: inline-block; padding-block: 2px; }

/* `strong { color: var(--anthracite) }` s'applique partout : dans le pied, qui
   est anthracite, le nom du distributeur devenait quasi invisible. Même famille
   de bug que sur les bandeaux sombres et la page Home cinéma. */
.pied strong { color: var(--blanc); font-weight: 600; }

/* Bouton de pied de page : format réduit. À taille normale, « Voir la
   boutique » ne tient pas dans une colonne de 210 px et passait sur deux
   lignes — dans une pilule, deux lignes se voient. */
.pied__action { margin-top: 1.3rem; }
.pied__colonne .bouton {
	max-width: 100%;
	min-height: 42px;
	padding: .6rem 1.25rem;
	letter-spacing: .09em;
}

/* Barre du bas : liens obligatoires d'un côté, mention de copyright de
   l'autre — sur une seule ligne dès qu'il y a la place. */
.pied__bas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .8rem var(--marge);
	padding-block: 1.4rem;
	border-top: 1px solid var(--ligne-sombre);
}
.pied__legal { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; list-style: none; margin: 0; padding: 0; font-size: var(--t-xs); }
.pied__legal li { margin: 0; }
.pied__credit { margin: 0; font-size: var(--t-xs); color: rgba(255, 255, 255, .5); }

/* --- Pages de texte ----------------------------------------------------- */
.entete-page { padding-block: clamp(3rem, 2rem + 4vw, 5rem) clamp(2rem, 1.5rem + 2vw, 3rem); background: var(--fond); border-bottom: 1px solid var(--ligne); }
.page-texte { padding-block: clamp(2.5rem, 2rem + 3vw, 4rem) var(--section); }
.page-texte .conteneur { max-width: 74ch; }
.page-texte h2 { font-size: var(--t-l); margin-top: 2.2em; }
.page-texte h2:first-child { margin-top: 0; }
.page-texte table { width: 100%; border-collapse: collapse; font-size: var(--t-s); margin-block: 1.5rem; }
.page-texte :is(th, td) { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--ligne); text-align: left; vertical-align: top; }
.encadre { padding: 1.2rem 1.5rem; background: var(--fond); border-left: 3px solid var(--jaune); border-radius: 0 var(--radius) var(--radius) 0; margin-block: 1.5rem; }

/* ══ 6. Emplacements médias ══════════════════════════════════════════════ */
/* --------------------------------------------------------------------------
   Le site d'origine utilise six vidéos d'arrière-plan et une trentaine
   d'images. Elles ne sont pas dans ce pack : chaque emplacement est balisé,
   dimensionné et visible tant qu'il est vide, pour qu'aucun ne soit oublié.
   Dès qu'un fichier est déposé au bon nom, l'emplacement s'efface.
   -------------------------------------------------------------------------- */

.media-attente {
	position: relative;
	display: grid; place-items: center;
	background: repeating-linear-gradient(45deg, #eceef1 0 12px, #e4e7ec 12px 24px);
	color: var(--gris);
	text-align: center;
	border: 2px dashed rgba(43,47,56,0.28);
	border-radius: var(--radius);
	padding: 1.5rem;
	min-height: 8rem;
}
.media-attente__etiquette { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.media-attente__detail { font-size: var(--t-xs); margin-top: 0.4rem; color: var(--gris-clair); }
.media-attente--video { aspect-ratio: 16 / 9; min-height: 0; }
.media-attente--carre { aspect-ratio: 1 / 1; }
.media-attente--produit { aspect-ratio: 4 / 3; }

/* Emplacement de vidéo de fond dans un héros : l'habillage sombre reste
   correct même sans le fichier. */
.heros__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.heros__media video, .heros__media img { width: 100%; height: 100%; object-fit: cover; }
.heros__media .media-attente {
	height: 100%;
	aspect-ratio: auto;      /* sinon --video impose 16/9 et le héros se troue */
	min-height: 0;
	border: 0;
	border-radius: 0;
	opacity: 0.22;
}

/* ══ 7. Utilitaires ══════════════════════════════════════════════════════ */

.visuellement-cache {
	position: absolute !important; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
[data-marqueur] { background: rgba(251,189,20,0.3); outline: 1px dashed var(--jaune-fonce); padding: 0 0.2em; border-radius: 2px; }

/* ══ 8. Préférences utilisateur ══════════════════════════════════════════ */

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

@media (prefers-contrast: more) {
	:root { --gris: #3d4148; --gris-clair: #5d6167; --ligne: rgba(43,47,56,0.3); }
}

@media print {
	.entete, .pied, .lien-evitement, .bouton, .revendeur, .media-attente { display: none !important; }
	body { color: #000; background: #fff; font-size: 11pt; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BANDEAUX SUR VIDÉO
   Le site d'origine posait deux vidéos de fond identiques sur cinq pages : le
   bandeau des trois piliers et celui de la newsletter. Le voile sombre n'est
   pas décoratif — sans lui, le texte blanc passe sous 3:1 dès que la vidéo
   éclaircit, et devient illisible. La vidéo n'est lue que si l'écran est
   large et que l'utilisateur ne demande pas moins d'animations (voir site.js).
   ═══════════════════════════════════════════════════════════════════════════ */

.bandeau {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--anthracite);
	color: #fff;
	padding: clamp(3.5rem, 8vw, 6rem) 0;
}

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

.bandeau__media video,
.bandeau__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* L'emplacement rayé remplit le bandeau tant que la vidéo n'est pas fournie. */
.bandeau__media .media-attente {
	height: 100%;
	aspect-ratio: auto;
	border-radius: 0;
}

.bandeau__voile {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(23, 26, 32, .82), rgba(23, 26, 32, .9));
}

.bandeau__inner { position: relative; }
.bandeau__inner--etroit { max-width: 46rem; margin-inline: auto; text-align: center; }

.bandeau h2 { color: #fff; margin-top: 0; }
.bandeau p  { color: rgba(255, 255, 255, .84); }

.bandeau--newsletter h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); }

/* ═══ Bouton clair — sur fond sombre uniquement ═══════════════════════════ */

.bouton--clair {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .55);
}

.bouton--clair:hover,
.bouton--clair:focus-visible {
	background: #fff;
	color: var(--anthracite);
	border-color: #fff;
}

/* ═══ Newsletter ══════════════════════════════════════════════════════════ */

.newsletter {
	display: flex;
	flex-wrap: wrap;
	gap: .7rem;
	justify-content: center;
	margin-top: 1.8rem;
}

.newsletter input[type="email"] {
	flex: 1 1 18rem;
	min-width: 0;                 /* sans ça, le champ déborde en flex */
	max-width: 24rem;
	padding: .85rem 1.1rem;
	font: inherit;
	color: var(--anthracite);
	background: #fff;
	border: 1px solid transparent;
	border-radius: var(--radius);
}

.newsletter input[type="email"]:focus-visible {
	outline: 3px solid var(--jaune);
	outline-offset: 2px;
}

.newsletter .bouton { flex: 0 0 auto; }

.newsletter__mention {
	margin-top: 1rem;
	font-size: .82rem;
	color: rgba(255, 255, 255, .62);
}

/* Le pot de miel : invisible à l'écran, mais pas pour un robot. Ni display:none
   ni hidden — certains robots les détectent et remplissent quand même. */
.cache {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ═══ En-tête de page centré (404, merci) ═════════════════════════════════ */

.entete-page--centre { text-align: center; }
.entete-page--centre .section__chapo { margin-inline: auto; }
.entete-page--centre .actions { justify-content: center; }

/* ═══ Héros d'accueil — plus haut que celui des gammes ════════════════════ */

.heros--accueil { min-height: min(78vh, 640px); }

/* ═══════════════════════════════════════════════════════════════════════════
   PAGES DE TEXTE LONG (CGV, mentions, confidentialité, livraison, home cinéma)
   Une colonne mesurée : au-delà de ~70 caractères par ligne, l'œil perd la
   ligne suivante en revenant à la marge. C'est la seule raison du max-width.
   ═══════════════════════════════════════════════════════════════════════════ */

.page-texte .conteneur { max-width: 46rem; }

.page-texte h2 {
	margin-top: 2.6em;
	padding-top: 1.4rem;
	border-top: 1px solid var(--ligne);
	font-size: clamp(1.25rem, 2.4vw, 1.5rem);
}

.page-texte h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.page-texte h3 { margin-top: 2em; font-size: 1.08rem; }
.page-texte p, .page-texte li { line-height: 1.75; }
.page-texte ul, .page-texte ol { margin: 1.1em 0; padding-left: 1.3em; }
.page-texte li + li { margin-top: .5em; }
.page-texte a { color: var(--jaune-fonce); }

/* Les marqueurs [[À COMPLÉTER]] doivent sauter aux yeux en recette : une page
   légale incomplète n'a aucune valeur juridique. Ils sont surlignés tant qu'ils
   sont là, et disparaissent d'eux-mêmes une fois le texte remplacé. */
.marqueur {
	background: rgba(251, 189, 20, .28);
	outline: 1px dashed var(--jaune-fonce);
	border-radius: 2px;
	padding: 0 .25em;
	font-style: normal;
	font-weight: 600;
}

.encadre {
	padding: 1.5rem 1.7rem;
	background: var(--fond);
	border-left: 3px solid var(--jaune);
	border-radius: var(--radius);
}

.encadre > :first-child { margin-top: 0; }
.encadre > :last-child  { margin-bottom: 0; }

.encadre--sombre {
	background: var(--anthracite);
	color: #fff;
	border-left-color: var(--jaune);
}

.encadre--sombre .section__titre,
.encadre--sombre h2, .encadre--sombre h3 { color: #fff; }

.encadre--action { background: #fff; box-shadow: 0 2px 20px rgba(0, 0, 0, .07); }
.encadre--choix  { background: #fff; border-left-width: 3px; }

.maj { text-transform: none; font-size: .88rem; color: var(--gris); font-style: italic; }
.legende { font-size: .85rem; color: var(--gris); }
.visuel img { border-radius: 6px; }

.tableau { width: 100%; overflow-x: auto; display: block; }
.tableau table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tableau th, .tableau td { padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--ligne); }
.tableau th { background: var(--fond); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════════
   CORRECTIONS DE CONTRASTE ET DE CADRAGE
   Relevées à la recette visuelle (captures 1440 px et 390 px).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Les titres des trois piliers héritaient de --anthracite sur fond sombre :
   texte quasi invisible. Même traitement que .section--sombre. */
.bandeau :is(h1, h2, h3, h4, h5) { color: var(--blanc); }
.bandeau .pilier__texte { color: rgba(255, 255, 255, .8); }
.bandeau .surtitre { color: var(--jaune); }
.bandeau a:not(.bouton) { color: inherit; }

/* L'emplacement rayé doit remplir le bandeau, pas s'y afficher en 16/9. */
.bandeau__media .media-attente {
	height: 100%;
	aspect-ratio: auto;
	min-height: 0;
	border: 0;
	opacity: .22;
}

/* Emplacement en attente à la place d'un logo de référence : au gabarit du
   logo, pas à celui d'une photo produit. */
.reference .media-attente {
	width: 150px;
	height: 72px;
	aspect-ratio: auto;
	min-height: 0;
	margin-inline: auto;
	padding: .7rem;
}
.reference .media-attente__detail { display: none; }

/* Le champ e-mail du bandeau newsletter garde la forme pilule des boutons. */
.bandeau .newsletter input[type="email"] { border-radius: var(--radius-pilule); }

/* La grille des quatre arguments de l'accueil : deux colonnes dès qu'il y a
   la place, une seule en dessous. */
.grille-arguments {
	display: grid;
	gap: clamp(1.4rem, 1rem + 1.6vw, 2.4rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	margin-top: 2rem;
}
.argument__titre { font-size: var(--t-base); margin-bottom: .4rem; }
.argument__texte { font-size: var(--t-s); }

/* strong est en anthracite par défaut : sur les fonds sombres, le nom du
   revendeur disparaissait purement et simplement. Vu à la recette visuelle. */
.section--sombre strong,
.bandeau strong,
.revendeur strong,
.encadre--sombre strong,
.heros strong { color: var(--blanc); }

/* ═══════════════════════════════════════════════════════════════════════════
   CONTRASTE — RGAA / WCAG 2.1 niveau AA
   ---------------------------------------------------------------------------
   Le site d'origine posait le jaune de marque (#fbbd14) en texte sur fond
   blanc : 1,61:1, contre 4,5:1 exigés. Illisible en plein soleil, sur un
   écran mal réglé, ou pour une bonne partie des plus de 60 ans — c'est-à-dire
   une part non négligeable de la clientèle d'enceintes à 9 000 €.

   Le jaune de marque n'est pas abandonné : il reste identique sur les aplats,
   les bordures, les boutons et tous les fonds sombres, où il atteint 7,9:1.
   Seul le TEXTE sur fond clair bascule sur --jaune-texte.

   Vérifié par outils/verifier-contraste.mjs, qui échoue si un texte repasse
   sous le seuil.
   ═══════════════════════════════════════════════════════════════════════════ */

.surtitre        { color: var(--jaune-texte); }
.modele__format  { color: var(--jaune-texte); }
.page-texte a    { color: var(--jaune-texte); }
.fil-ariane a:hover { color: var(--jaune-texte); }

/* Sur fond sombre, le jaune de marque reprend sa place. */
.section--sombre .surtitre,
.bandeau .surtitre,
.revendeur .surtitre,
.heros .surtitre,
.encadre--sombre .surtitre { color: var(--jaune); }

/* Les emplacements médias sont temporaires, mais ils doivent rester lisibles
   pour la personne qui relit la liste de ce qu'il reste à fournir. */
.media-attente { color: #4a4e55; }
.media-attente__detail { color: #5d6167; }

/* Le bouton contour héritait de --anthracite sur les bandeaux et sur le
   renvoi revendeur, tous deux sur fond anthracite : bouton invisible.
   La règle d'origine ne couvrait que .section--sombre et .heros. */
:is(.section--sombre, .heros, .bandeau, .revendeur, .encadre--sombre) .bouton--contour {
	border-color: rgba(255, 255, 255, .5);
	color: var(--blanc);
}
:is(.section--sombre, .heros, .bandeau, .revendeur, .encadre--sombre) .bouton--contour:hover,
:is(.section--sombre, .heros, .bandeau, .revendeur, .encadre--sombre) .bouton--contour:focus-visible {
	background: var(--blanc);
	color: var(--anthracite);
	border-color: var(--blanc);
}

/* Emplacement média posé sur un fond sombre : texte clair, sinon illisible. */
:is(.bandeau, .heros, .section--sombre, .revendeur) .media-attente { color: rgba(255, 255, 255, .85); }
:is(.bandeau, .heros, .section--sombre, .revendeur) .media-attente__detail { color: rgba(255, 255, 255, .7); }

/* Mention discrète réutilisable sur fond CLAIR — .revendeur__mention est,
   elle, calibrée pour le fond anthracite. */
.mention {
	margin-top: .8rem;
	font-size: var(--t-xs);
	color: var(--gris);
}

/* Animations de finitions — anciens GIF de 14,2 Mo, servis en MP4 (1,4 Mo).
   L'affiche s'affiche immédiatement ; la lecture ne démarre que si l'écran est
   large et que l'utilisateur n'a pas demandé moins d'animations (voir site.js). */
.animation {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--radius);
	background: var(--fond);
}

/* Le logo officiel est clair : il vit sur l'en-tête anthracite. */
.logo__marque { width: 46px; height: 46px; flex: none; }

/* Les quatre logos de références ont des cadrages très différents (médaille
   ronde, logo large, carré). Une hauteur commune les aligne visuellement ; la
   largeur maximale évite qu'un logo large n'écrase les autres. */
.reference__logo img { max-height: 72px; max-width: 150px; object-fit: contain; }

/* ═══════════════════════════════════════════════════════════════════════════
   THÈME SOMBRE — page Home cinéma uniquement
   ---------------------------------------------------------------------------
   Une salle de cinéma se regarde lumière éteinte. C'est le seul endroit du site
   où le sujet EST l'obscurité, donc le seul où le fond sombre se justifie
   autrement que par un goût du moment.

   Le thème n'écrase pas les règles une par une : il redéfinit les JETONS sur
   .page-sombre. Tout ce qui lit --fond, --ligne ou la couleur de texte suit
   automatiquement, y compris les composants ajoutés plus tard. Une seule
   exception explicite : les titres, dont la couleur est posée en dur sur
   l'élément.
   ═══════════════════════════════════════════════════════════════════════════ */

.page-sombre {
	--fond:        #1a1d23;   /* fond des sections « bande » */
	--page:        #14171c;   /* fond de page ; --blanc reste le blanc franc */
	--gris:        #b6bac2;   /* texte courant — 9,2:1 sur le fond de page */
	--gris-clair:  #8f949d;   /* texte secondaire — 5,1:1 */
	--ligne:       rgba(255, 255, 255, 0.13);
	--ombre:       0 2px 24px rgba(0, 0, 0, 0.5);

	background: var(--page);
	color: var(--gris);
}

.page-sombre :is(h1, h2, h3, h4, h5) { color: #f2f3f5; }
.page-sombre strong { color: #f2f3f5; }
.page-sombre .surtitre { color: var(--jaune); }
.page-sombre .section__chapo { color: #cfd3d9; }
/* Liens de texte courant seulement. Le :not(.bouton) n'est pas décoratif :
   les boutons vivent dans des <p class="actions">, donc « p a » les attrapait
   et leur imposait la couleur du texte — libellé blanc sur aplat jaune. */
.page-sombre :is(p, li, address, figcaption, dd, td) a:not(.bouton) {
	color: inherit;
	text-decoration-color: rgba(255, 255, 255, 0.35);
}
.page-sombre .page-texte a:not(.bouton) { color: var(--jaune); }

/* .section--fond vaut « une nuance à côté du fond » : en sombre, plus clair. */
.page-sombre .section--fond,
.page-sombre .section--bande { background: var(--fond); }

.page-sombre .encadre {
	background: rgba(255, 255, 255, 0.04);
	border-left-color: var(--jaune);
}
.page-sombre .encadre--choix { background: rgba(255, 255, 255, 0.05); }

/* Le bouton contour passe en clair, comme sur les autres fonds sombres. */
.page-sombre .bouton--contour {
	border-color: rgba(255, 255, 255, .5);
	color: #f2f3f5;
}
.page-sombre .bouton--contour:hover,
.page-sombre .bouton--contour:focus-visible {
	background: #f2f3f5;
	color: var(--anthracite);
	border-color: #f2f3f5;
}

/* Section légèrement détachée du fond de page, avec un filet de séparation. */
.section--bande {
	background: var(--fond);
	border-block: 1px solid var(--ligne);
}

.conteneur--etroit { max-width: 52rem; margin-inline: auto; }

/* ── Héros photo ──────────────────────────────────────────────────────────
   Le voile n'est pas décoratif. La photo est une prise de vue de salon, pas
   un fond conçu pour porter du texte : sans voile dense, le titre blanc passe
   sous 3:1 dès qu'un mur clair arrive derrière. Le dégradé est plus dense en
   bas à gauche, là où se trouve le texte, et laisse respirer la droite.
   ───────────────────────────────────────────────────────────────────────── */

.heros--photo { min-height: min(72vh, 620px); }

.heros__voile--dense {
	background:
		linear-gradient(100deg, rgba(10, 12, 16, .90) 0%,  rgba(10, 12, 16, .78) 40%,
		                        rgba(10, 12, 16, .52) 68%, rgba(10, 12, 16, .22) 100%),
		linear-gradient(180deg, rgba(10, 12, 16, .38) 0%,  rgba(10, 12, 16, .10) 45%,
		                        rgba(10, 12, 16, .62) 100%);
}

/* ── Schéma de placement ──────────────────────────────────────────────────── */

.schema {
	margin-top: 2.6rem;
	padding: clamp(1rem, 3vw, 2.2rem);
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid var(--ligne);
	border-radius: var(--radius);
	overflow-x: auto;            /* le schéma défile plutôt que de déborder */
}

.schema__svg {
	display: block;
	width: 100%;
	min-width: 460px;            /* en dessous, les libellés se chevauchent */
	max-width: 720px;
	height: auto;
	margin-inline: auto;
	color: #cfd3d9;              /* currentColor : murs et écran */
}

.schema__hp rect  { fill: var(--jaune); fill-opacity: .92; }
.schema__caisson  { fill: none; stroke: var(--jaune); stroke-opacity: .75; stroke-width: 2; }
.schema__plafond  { fill: none; stroke: var(--jaune); stroke-opacity: .6; stroke-width: 2; stroke-dasharray: 4 4; }
.schema__canape   { fill: currentColor; fill-opacity: .16; stroke: currentColor; stroke-opacity: .3; }

.schema__note {
	font-size: 12px;
	font-weight: 500;
	fill: currentColor;
	fill-opacity: .82;
	letter-spacing: .04em;
}
.schema__angle {
	font-size: 12px;
	font-weight: 600;
	fill: var(--jaune);
	letter-spacing: .04em;
}

/* ── Étapes numérotées ───────────────────────────────────────────────────── */

.etapes {
	list-style: none;
	margin: 2.4rem 0 0;
	padding: 0;
	counter-reset: etape;
	display: grid;
	gap: 1.6rem;
}

.etapes li {
	counter-increment: etape;
	position: relative;
	margin: 0;
	padding: 0 0 1.6rem 4.2rem;
	border-bottom: 1px solid var(--ligne);
}
.etapes li:last-child { border-bottom: 0; padding-bottom: 0; }

.etapes li::before {
	content: counter(etape, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: -0.1em;
	font-size: 1.7rem;
	font-weight: 700;
	line-height: 1;
	color: var(--jaune);
	font-variant-numeric: tabular-nums;
}

.etapes h3 { font-size: var(--t-base); margin-bottom: .35rem; }
.etapes p  { font-size: var(--t-s); }

/* ── Figure légendée ─────────────────────────────────────────────────────── */

.visuel { margin: 0; }
.visuel img, .visuel picture { border-radius: var(--radius); }
.visuel .legende { margin-top: .8rem; font-size: var(--t-xs); color: var(--gris-clair); }

.media-attente--paysage { aspect-ratio: 2 / 1; }


/* ── Corrections relevées à la recette visuelle ──────────────────────────── */

/* « Emplacement des évents » se coupait en « Emplaceme / nt » : le h3 par
   défaut est trop grand pour une colonne de 19 rem. On réduit et on autorise
   la césure typographique française plutôt que la coupure brutale. */
.encadre--choix h3 {
	font-size: var(--t-m);
	hyphens: auto;
	-webkit-hyphens: auto;
	margin-bottom: .5rem;
}
.encadre--choix p { font-size: var(--t-s); }

/* Six cartes tombaient en 4 + 2, ce qui laisse une ligne bancale.
   Un pas plus large force 3 + 3 sur écran large, 2 + 2 + 2 sur tablette. */
.grille-arguments--trois {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

/* La photo du héros doit cadrer sur l'installation, pas sur le plafond. */
.heros--photo .heros__media img { object-position: 50% 42%; }

/* Le texte du héros repose sur une photo de salon, pas sur un fond conçu pour
   lui. Deux protections plutôt qu'une, parce qu'aucune ne suffit seule :
   le voile (qui, trop dense, efface la photo qu'on est venu montrer) et une
   ombre portée douce, qui suit le texte où qu'il tombe. */
.heros--photo :is(.heros__titre, .heros__chapo, .surtitre) {
	text-shadow: 0 2px 14px rgba(8, 10, 14, .75), 0 1px 3px rgba(8, 10, 14, .6);
}

/* Pied de page : la colonne d'identité porte une phrase, les trois autres des
   listes courtes — elle a donc besoin de plus de largeur. À partir de 62 em on
   fixe la répartition ; en dessous, `auto-fit` reprend la main et les colonnes
   se replient d'elles-mêmes (4 → 2 → 1) sans jamais laisser d'orpheline. */
@media (min-width: 75em) {
	.pied__grille { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }
}

/* Entre 48 et 75 em, quatre colonnes laisseraient 174 px à chacune — trop peu
   pour le bouton « Voir la boutique », qui débordait. L'identité prend donc la
   ligne entière et les trois autres colonnes se partagent la suivante. */
@media (min-width: 48em) and (max-width: 74.99em) {
	.pied__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pied__marque { grid-column: 1 / -1; }
}

/* Deux colonnes : l'identité prend la ligne entière, les trois autres suivent. */
@media (min-width: 34em) and (max-width: 47.99em) {
	.pied__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pied__marque { grid-column: 1 / -1; }
}

/* ═══ Carte de situation, chargée au clic ═══════════════════════════════════
   L'aperçu n'est pas une image : c'est un motif SVG dessiné sur place. Une
   capture de carte serait une œuvre de Google, qu'on n'a pas le droit de
   redistribuer, et un fichier de plus à charger. Le motif dit « carte » sans
   rien emprunter et pèse trois lignes.
   ═══════════════════════════════════════════════════════════════════════════ */

.carte {
	margin-top: 1.6rem;
	border: 1px solid var(--ligne);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--fond);
}

.carte__apercu {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	color: var(--anthracite);
}

.carte__motif {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.carte__panneau {
	position: relative;
	max-width: 20rem;
	margin: 0 1rem;
	padding: 1.3rem 1.4rem;
	text-align: center;
	background: var(--page);
	border-radius: var(--radius);
	box-shadow: var(--ombre);
}

.carte__adresse { font-weight: 600; color: var(--anthracite); margin-bottom: 1rem; }
.carte__mention { margin-top: .9rem; font-size: var(--t-xs); color: var(--gris); }

/* Une fois chargée, la carte occupe tout le bloc. */
.carte.est-chargee { aspect-ratio: 4 / 3; display: block; }
.carte__cadre { width: 100%; height: 100%; border: 0; display: block; }

.page-sombre .carte__apercu { color: #cfd3d9; }
.page-sombre .carte__adresse { color: #f2f3f5; }

/* ═══════════════════════════════════════════════════════════════════════════
   CONFIGURATEUR VISUEL
   ---------------------------------------------------------------------------
   Reprise du configurateur du site d'origine : des calques transparents
   empilés, dont un seul change au clic. La scène tient un carré strict — les
   rendus sont des carrés de 720 px et tout décalage se verrait immédiatement
   sur l'ombre portée de l'enceinte.
   ═══════════════════════════════════════════════════════════════════════════ */

.config { margin-top: 2.4rem; }

.config__corps {
	display: grid;
	gap: clamp(1.6rem, 1rem + 3vw, 3rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
	align-items: start;
}

/* --- Onglets de modèle --- */
.config__modeles {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: 1.6rem;
}
.config__modele {
	padding: .55rem 1.1rem;
	font-size: var(--t-s);
	font-weight: 600;
	color: var(--gris);
	background: transparent;
	border: 1px solid var(--ligne);
	border-radius: var(--radius-pilule);
	cursor: pointer;
	transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.config__modele:hover { border-color: var(--jaune); }
.config__modele[aria-selected="true"] {
	color: var(--anthracite);
	background: var(--jaune);
	border-color: var(--jaune);
}
.page-sombre .config__modele[aria-selected="true"] { color: var(--anthracite); }

/* --- Scène --- */
.config__scene { position: sticky; top: 6.5rem; }

.config__pile {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--page);
}

.config__calque {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: opacity 160ms linear;
}
/* Pendant le chargement du nouveau calque, on estompe l'ancien plutôt que de
   le faire disparaître : sans ça, l'enceinte clignote à chaque clic. */
.config__calque.est-en-charge { opacity: .45; }

.config__apercu {
	margin-top: .9rem;
	font-size: var(--t-s);
	font-weight: 600;
	color: var(--anthracite);
	text-align: center;
}
.page-sombre .config__apercu { color: #f2f3f5; }

/* --- Panneau de choix --- */
.config__titre { font-size: var(--t-l); margin-bottom: .5rem; }
.config__intro { font-size: var(--t-s); margin-bottom: 1.8rem; }

.config__famille { border: 0; padding: 0; margin: 0 0 1.6rem; }
.config__legende {
	padding: 0;
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gris);
	margin-bottom: .7rem;
}

.config__pastilles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
	gap: .6rem;
}

/* --- Pastille --- */
.pastille { position: relative; cursor: pointer; display: block; }

/* Le radio reste dans le flux du clavier : c'est lui qui porte la sélection,
   le focus et la navigation aux flèches. On le rend invisible, pas absent. */
.pastille input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}

.pastille img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--radius);
	border: 2px solid transparent;
	box-shadow: 0 0 0 1px var(--ligne);
	transition: border-color var(--transition), transform var(--transition);
}
.pastille:hover img { transform: translateY(-2px); }
.pastille input:checked ~ img { border-color: var(--jaune); box-shadow: 0 0 0 2px var(--jaune); }
.pastille input:focus-visible ~ img { outline: 3px solid var(--jaune); outline-offset: 3px; }

.pastille__nom {
	display: block;
	margin-top: .35rem;
	font-size: 11px;
	line-height: 1.3;
	text-align: center;
	color: var(--gris);
}
.pastille input:checked ~ .pastille__nom { color: var(--anthracite); font-weight: 600; }
.page-sombre .pastille input:checked ~ .pastille__nom { color: #f2f3f5; }

/* --- Mention RAL : c'est l'information commerciale la plus importante du
       bloc, elle ne doit pas se lire comme une note de bas de page. --- */
.config__ral {
	margin: 1.8rem 0 0;
	padding: 1.1rem 1.3rem;
	font-size: var(--t-s);
	background: rgba(251, 189, 20, .12);
	border-left: 3px solid var(--jaune);
	border-radius: var(--radius);
}

@media (max-width: 60em) {
	.config__scene { position: static; }
}

/* ═══ Galerie de fiche produit ══════════════════════════════════════════════
   Quelques vues supplémentaires sous la fiche, quand le modèle en a. Sur une
   édition dont chaque exemplaire est différent — le bois massif de la
   VISION2 5TH ne se reproduit pas d'une paire à l'autre — une seule photo
   ne rend pas compte du produit.
   ═══════════════════════════════════════════════════════════════════════════ */

.galerie {
	display: grid;
	gap: clamp(1rem, .8rem + 1.2vw, 1.6rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	margin-top: 2.4rem;
}

.galerie__vue {
	margin: 0;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--blanc);
}

.galerie__vue img,
.galerie__vue picture { display: block; width: 100%; height: auto; }

/* ═══ Nos références ════════════════════════════════════════════════════════
   Un logo seul ne dit rien : le lecteur ne sait pas ce que vaut une médaille
   dont on ne précise ni le rang ni l'année. Une citation seule ne dit pas
   beaucoup plus. Les deux sont donc dans la MÊME carte, comme sur le site
   d'origine — le logo authentifie la citation, la citation donne sa raison
   d'être au logo, et le lecteur n'a aucun rapprochement à faire lui-même.

   Les cartes sont en `grid` avec `align-items: stretch` et une colonne interne
   `1fr auto` : les logos s'alignent, les intitulés s'alignent, et les citations
   partent toutes de la même ligne quelle que soit leur longueur.
   ═══════════════════════════════════════════════════════════════════════════ */

.references {
	list-style: none;
	margin: 2.8rem 0 0;
	padding: 0;
	display: grid;
	gap: clamp(1.2rem, 1rem + 1.5vw, 2rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.reference {
	margin: 0;
	text-align: center;
	display: grid;
	grid-template-rows: auto auto auto 1fr;
	padding: clamp(1.4rem, 1rem + 1vw, 1.9rem) clamp(1.1rem, .8rem + 1vw, 1.5rem);
	background: var(--fond);
	border-radius: var(--radius);
	border-top: 3px solid var(--jaune);
}

.reference__logo { display: block; height: 72px; margin-bottom: 1rem; }
.reference__logo img,
.reference__logo picture { height: 72px; width: auto; margin-inline: auto; object-fit: contain; }

.reference__intitule { font-weight: 700; color: var(--anthracite); line-height: 1.25; }
.reference__detail   { font-size: var(--t-s); color: var(--jaune-texte); font-weight: 600; margin-top: .15rem; }

/* La citation, sous son logo. */
.reference__citation {
	margin: 1.1rem 0 0;
	padding-top: 1.1rem;
	border-top: 1px solid var(--ligne);
	display: flex;
	flex-direction: column;
	gap: .7rem;
	text-align: left;
}
.reference__citation blockquote { margin: 0; }
.reference__citation blockquote p {
	font-size: var(--t-s);
	line-height: 1.55;
	color: var(--anthracite);
	text-wrap: pretty;
}
/* Les guillemets français font le travail sans image ni pseudo-élément lourd. */
.reference__citation blockquote p::before { content: '\00AB\00A0'; }
.reference__citation blockquote p::after  { content: '\00A0\00BB'; }

.reference__citation figcaption {
	margin-top: auto;
	font-size: var(--t-xs);
	color: var(--gris);
}

/* Témoignage sans logo associé : en clôture, pleine largeur. */
.reference-finale {
	margin: clamp(2.4rem, 2rem + 2vw, 3.4rem) auto 0;
	max-width: 46rem;
	padding: 1.6rem 1.8rem;
	background: var(--fond);
	border-radius: var(--radius);
	border-left: 3px solid var(--jaune);
	text-align: left;
}
.reference-finale blockquote { margin: 0; }
.reference-finale blockquote p {
	font-size: var(--t-m);
	line-height: 1.5;
	color: var(--anthracite);
	text-wrap: pretty;
}
.reference-finale blockquote p::before { content: '\00AB\00A0'; }
.reference-finale blockquote p::after  { content: '\00A0\00BB'; }
.reference-finale figcaption { margin-top: .9rem; font-size: var(--t-xs); color: var(--gris); }
.reference-finale__source { font-size: var(--t-s); font-weight: 700; color: var(--anthracite); }

.page-sombre .reference,
.page-sombre .reference-finale { background: rgba(255,255,255,.04); }
.page-sombre .reference__intitule,
.page-sombre .reference__citation blockquote p,
.page-sombre .reference-finale blockquote p,
.page-sombre .reference-finale__source { color: #f2f3f5; }
.page-sombre .reference__detail { color: var(--jaune); }

/* ═══════════════════════════════════════════════════════════════════════════
   CIBLES TACTILES — RGAA / WCAG 2.2 « Target Size (Minimum) », 24 × 24 px
   ---------------------------------------------------------------------------
   Relevé à 320, 360, 390 et 768 px. La règle exempte les liens insérés dans
   une phrase — les agrandir casserait l'interlignage du paragraphe pour rien.
   Sont donc traités ici les seuls liens ISOLÉS et les contrôles de formulaire,
   pour lesquels l'exemption ne joue pas : listes du pied de page, réseaux
   sociaux, coordonnées du bloc Informations, cases à cocher.
   ═══════════════════════════════════════════════════════════════════════════ */

.pied__legal a,
.reseaux a,
.information__valeur a {
	display: inline-block;
	padding-block: 5px;          /* 17 px de ligne + 10 = 27 px de cible */
	min-height: 24px;
}

/* L'espacement entre deux cibles compte autant que leur taille : deux liens
   collés restent difficiles à viser même s'ils font 24 px chacun. */
.pied__legal { gap: .35rem 1.4rem; }
.reseaux { gap: .2rem 1.1rem; }

/* Case à cocher du consentement : 18 px de série, insuffisant au doigt. */
.champ--consentement input[type="checkbox"] {
	width: 24px;
	height: 24px;
	flex: none;
	accent-color: var(--jaune-fonce);
	cursor: pointer;
}

/* Libellé des pastilles : 11 px passe sous le seuil de confort de lecture. */
.pastille__nom { font-size: 12px; }

/* ═══ Confort mobile ════════════════════════════════════════════════════════
   Corrections relevées à la recette 320-768 px.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 46em) {

	/* Un héros qui occupe tout l'écran donne l'impression que la page est vide :
	   on laisse voir le début de la section suivante. */
	.heros, .heros--accueil, .heros--photo { min-height: min(66vh, 520px); }

	/* Les boutons passent pleine largeur : au pouce, viser un bouton centré de
	   200 px dans un écran de 360 est inutilement exigeant. */
	.actions { flex-direction: column; align-items: stretch; }
	.actions .bouton { width: 100%; text-align: center; }

	/* Le libellé long des boutons se coupait en deux lignes serrées. */
	.bouton { line-height: 1.35; padding-block: .85rem; }

	/* Le configurateur : la scène d'abord, les pastilles ensuite, sans coller. */
	.config__corps { gap: 2rem; }
	.config__pastilles { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: .7rem; }

	/* Les cellules de tableau serrées deviennent illisibles sous 400 px. */
	.tableau table { font-size: var(--t-xs); }
	.tableau th, .tableau td { padding: .55rem .6rem; }

	/* Le bloc Informations passait en une colonne très étirée. */
	.informations { gap: 1.6rem; }

	/* Les cartes de référence : moins de rembourrage, plus de texte visible. */
	.reference, .reference-finale { padding: 1.2rem 1.3rem; }
	.reference__logo, .reference__logo img, .reference__logo picture { height: 60px; }
	.reference-finale blockquote p { font-size: var(--t-base); }
}

/* Très petits écrans : on récupère de la largeur utile sur les marges. */
@media (max-width: 22.5em) {
	:root { --marge: .9rem; }
	.config__pastilles { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
	.references { gap: 1.6rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE HOME CINÉMA — TRAITEMENT HAUT DE GAMME
   ---------------------------------------------------------------------------
   Le « haut de gamme » en écran ne vient pas d'ajouter des effets : il vient
   de laisser respirer, de ralentir, et de ne bouger qu'une chose à la fois.
   Tout ce qui suit est donc discret par construction, et intégralement
   désactivé quand l'utilisateur demande moins d'animations.
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- Apparition au défilement ------------------------------------------- *
 * Un décalage de 18 px et une opacité : rien de plus. Les effets d'entrée
 * spectaculaires vieillissent mal et donnent l'impression que la page rame.
 * L'état de départ n'est appliqué QUE si le JS a pris la main (classe .js),
 * sinon un visiteur sans JavaScript verrait une page vide.
 * ---------------------------------------------------------------------- */

.js .page-home-cinema [data-monte] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 700ms cubic-bezier(.22, .61, .36, 1),
	            transform 700ms cubic-bezier(.22, .61, .36, 1);
}
.js .page-home-cinema [data-monte].est-visible { opacity: 1; transform: none; }

/* Décalage en cascade dans une grille : l'œil suit, au lieu de tout recevoir
   d'un bloc. 60 ms suffisent — au-delà, on attend. */
.js .page-home-cinema [data-monte]:nth-child(2) { transition-delay: 60ms; }
.js .page-home-cinema [data-monte]:nth-child(3) { transition-delay: 120ms; }
.js .page-home-cinema [data-monte]:nth-child(4) { transition-delay: 180ms; }
.js .page-home-cinema [data-monte]:nth-child(5) { transition-delay: 240ms; }
.js .page-home-cinema [data-monte]:nth-child(6) { transition-delay: 300ms; }

/* --- Héros : léger recul de l'image au défilement ------------------------ */
.page-home-cinema .heros__media img { transform: scale(1.06); transform-origin: 50% 45%; }

/* --- Filet lumineux en haut des sections -------------------------------- *
 * Une ligne de 1 px qui s'éteint sur les bords. Sépare les sections sans
 * poser de trait franc, qui ferait « tableau » plutôt que « salle ». */
.page-home-cinema .section--bande { position: relative; border-top: 0; }
.page-home-cinema .section--bande::before {
	content: '';
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(251, 189, 20, .5) 20%,
	                            rgba(251, 189, 20, .5) 80%, transparent);
}

/* --- Photo de réalisation : cadre et profondeur -------------------------- */
.page-home-cinema .visuel img,
.page-home-cinema .visuel picture {
	border-radius: var(--radius);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.page-home-cinema .visuel { position: relative; }
/* Un liseré doré très fin sur le bord haut : la lumière d'une salle. */
.page-home-cinema .visuel::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: var(--radius);
	pointer-events: none;
	box-shadow: inset 0 1px 0 rgba(251, 189, 20, .28);
}

/* --- Étapes : le filet vertical qui relie les numéros -------------------- */
.page-home-cinema .etapes { position: relative; }
.page-home-cinema .etapes::before {
	content: '';
	position: absolute;
	left: 1.05rem;
	top: .6rem;
	bottom: 2rem;
	width: 1px;
	background: linear-gradient(180deg, var(--jaune), rgba(251, 189, 20, .08));
}
.page-home-cinema .etapes li::before {
	background: var(--page);
	padding-block: .15rem;
	position: absolute;
}

/* --- Schéma : les enceintes s'allument une à une ------------------------- */
.js .page-home-cinema .schema__hp rect,
.js .page-home-cinema .schema__caisson,
.js .page-home-cinema .schema__plafond circle { opacity: 0; transition: opacity 500ms ease; }
.js .page-home-cinema .schema.est-visible .schema__hp rect,
.js .page-home-cinema .schema.est-visible .schema__caisson,
.js .page-home-cinema .schema.est-visible .schema__plafond circle { opacity: 1; }

.js .page-home-cinema .schema.est-visible .schema__hp rect:nth-child(1) { transition-delay: 120ms; }
.js .page-home-cinema .schema.est-visible .schema__hp rect:nth-child(2) { transition-delay: 220ms; }
.js .page-home-cinema .schema.est-visible .schema__hp rect:nth-child(3) { transition-delay: 300ms; }
.js .page-home-cinema .schema.est-visible .schema__hp rect:nth-child(4) { transition-delay: 400ms; }
.js .page-home-cinema .schema.est-visible .schema__hp rect:nth-child(5) { transition-delay: 480ms; }
.js .page-home-cinema .schema.est-visible .schema__caisson { transition-delay: 580ms; }
.js .page-home-cinema .schema.est-visible .schema__plafond circle { transition-delay: 660ms; }

/* Les axes se tracent depuis le point d'écoute. */
.js .page-home-cinema .schema__svg g[stroke] line {
	stroke-dasharray: 400;
	stroke-dashoffset: 400;
	transition: stroke-dashoffset 900ms ease 200ms;
}
.js .page-home-cinema .schema.est-visible .schema__svg g[stroke] line { stroke-dashoffset: 0; }

/* --- Typographie : un cran plus tenue sur cette page --------------------- */
.page-home-cinema .heros__titre { letter-spacing: -.02em; }
.page-home-cinema .section__titre { letter-spacing: -.015em; }
.page-home-cinema .surtitre { letter-spacing: .22em; }

/* --- Respect du choix de l'utilisateur ---------------------------------- *
 * Non négociable : si « animations réduites » est demandé, tout est neutralisé,
 * y compris l'état de départ — sinon la page resterait invisible.
 * ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.js .page-home-cinema [data-monte] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.js .page-home-cinema .schema__hp rect,
	.js .page-home-cinema .schema__caisson,
	.js .page-home-cinema .schema__plafond circle {
		opacity: 1 !important;
		transition: none !important;
	}
	.js .page-home-cinema .schema__svg g[stroke] line {
		stroke-dashoffset: 0 !important;
		transition: none !important;
	}
	.page-home-cinema .heros__media img { transform: none; }
}

/* Quatre références dans une grille à trois colonnes donnent 3 + 1, ce qui
   laisse une carte orpheline. Deux colonnes donnent 2 + 2, quatre en donnent
   quatre : `auto-fit` sur une base de 17 rem passe de 4 à 2 puis à 1 sans
   jamais laisser d'orpheline. On borne seulement la largeur totale pour que
   les cartes ne s'étirent pas sur un très grand écran. */
.references { max-width: 78rem; margin-inline: auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   MENTION « ÉCOUTE SUR RENDEZ-VOUS » DANS L'EN-TÊTE
   ---------------------------------------------------------------------------
   L'en-tête portait le numéro de téléphone. Une fois par page — mais sur 22
   pages, plus une fois par bloc « Informations » : 46 occurrences sur le site.
   Le numéro n'y est plus. Reste la mention, qui dit la seule chose utile à cet
   endroit (on ne pousse pas la porte, on prend rendez-vous) et qui mène à la
   page Contact, où le numéro est écrit.
   ═══════════════════════════════════════════════════════════════════════════ */

.entete__contact {
	display: flex;
	align-items: center;
	margin-left: auto;
	padding-left: 1.6rem;
	border-left: 1px solid var(--ligne-sombre);
	white-space: nowrap;
}

.entete__rdv {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding-block: 6px;             /* cible tactile ≥ 24 px */
	text-decoration: none;
	color: rgba(255, 255, 255, .62);
	transition: color var(--transition);
}
.entete__rdv:hover,
.entete__rdv:focus-visible { color: var(--jaune); }

.entete__mention {
	font-size: var(--t-xs);
	letter-spacing: .06em;
	color: inherit;
}

.entete__icone { width: 17px; height: 17px; flex: none; }

/* Sous 1280 px la navigation bascule en menu déroulant : le contact y descend
   naturellement, en pleine largeur, sans bordure de séparation verticale. */
@media (max-width: 79.99em) {
	.entete__contact {
		margin: 1.2rem 0 0;
		padding: 1.2rem 0 0;
		border-left: 0;
		border-top: 1px solid var(--ligne-sombre);
	}
	.entete__mention { font-size: var(--t-s); }
}

/* Un seul aplat jaune par page : celui de la section revendeur. Partout
   ailleurs, le pied de page compris, le renvoi vers le distributeur passe en
   contour. Quatre boutons jaunes pointant hors du site, c'était l'inverse de
   ce qu'un fabricant doit dire de lui-même. */
.pied .bouton--contour {
	border-color: rgba(255, 255, 255, .45);
	color: var(--blanc);
}
.pied .bouton--contour:hover,
.pied .bouton--contour:focus-visible {
	background: var(--blanc);
	color: var(--anthracite);
	border-color: var(--blanc);
}

/* ═══ En-tête : trois zones, pas deux ═══════════════════════════════════════
   Huit entrées de menu plus un bloc contact ne tiennent pas sur une ligne de
   1 200 px sans se marcher dessus : le logo passait sur deux lignes et le
   numéro était tronqué. Le contact devient donc le troisième élément de
   l'en-tête, avec une largeur qui lui est propre, et la navigation se resserre
   un cran. En dessous de 1 200 px, tout bascule dans le menu déroulant.
   ═══════════════════════════════════════════════════════════════════════════ */

.entete__inner { gap: clamp(1rem, .5rem + 1.4vw, 2rem); }

.logo__nom { white-space: nowrap; }

@media (min-width: 80em) {
	.navigation__liste { gap: clamp(.9rem, .2rem + 1.1vw, 1.6rem); }
	.navigation__lien { font-size: var(--t-s); white-space: nowrap; }
}

.entete__contact { flex: none; margin-left: 0; }

/* En dessous du seuil du menu déroulant, la mention se réduit à une pastille :
   à 390 px, le logo, la mention en clair et le bouton Menu ne tiennent pas
   côte à côte — la mention sortait de l'écran. */
@media (max-width: 79.99em) {
	.entete__contact {
		order: 2;
		margin: 0 0 0 auto;
		padding: 0;
		border: 0;
	}
	.entete__rdv {
		font-size: var(--t-xs);
		border: 1px solid var(--ligne-sombre);
		border-radius: var(--radius-pilule);
		padding: .5rem .95rem;
	}
	.entete__rdv:hover,
	.entete__rdv:focus-visible { border-color: var(--jaune); }
	.bouton-menu { order: 3; }
}

/* Sous 32 em, la pastille garde l'icône seule : « Contact » est de toute façon
   dans le menu, la pastille n'est qu'un raccourci. Le libellé reste dans le
   flux pour les lecteurs d'écran (masqué à l'œil, pas au clavier ni à la voix),
   d'où le retrait de l'espacement : un `gap` s'applique même à un élément de
   largeur nulle et décalait l'icône. */
@media (max-width: 32em) {
	.entete__mention { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.entete__rdv { padding: .5rem .7rem; gap: 0; }
}

/* Sous 26 em (320 px), même la pastille est de trop : logo + pastille + bouton
   Menu ne tiennent pas sur la ligne et le bouton Menu sortait de l'écran.
   Le raccourci disparaît, « Contact » reste dans le menu déroulant — c'est un
   raccourci, pas le seul chemin. */
@media (max-width: 26em) {
	.entete__contact { display: none; }
}

/* La barre d'en-tête peut être plus large que le contenu : c'est une bande
   pleine largeur, pas une colonne de lecture. Lui laisser 1 440 px donne au
   menu et au bloc contact la place de cohabiter sans se chevaucher. */
.entete__inner { width: min(100% - 2 * var(--marge), 1440px); max-width: none; }
.navigation { min-width: 0; }