/* =============================================================================
   SOLUTIONS EXPERT BUREAUTIQUE
   -----------------------------------------------------------------------------
   Direction artistique : éditoriale et industrielle.

   Parti pris explicite — on écarte le vocabulaire visuel devenu générique
   (ombres portées douces, angles très arrondis, gris froid, grilles de cartes
   toutes identiques) au profit d'un registre de mise en page imprimée : filets
   d'1 px, aplats francs, papier chaud, sections numérotées, typographie large
   et assumée. C'est ce qui distingue une identité d'un gabarit.

   Palette issue du logo SEB : bleu #00598F, orange #E56B00 / #F19000.
   Tous les couples texte/fond ont été vérifiés par calcul (WCAG AA minimum).
   Signe récurrent : la barre coupée en biais, reprise du « E » du logo.
   Mobile d'abord : toutes les media queries sont des min-width.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. TYPOGRAPHIE AUTO-HÉBERGÉE
   Archivo variable (axes largeur + graisse), SIL Open Font License 1.1.
   Auto-hébergée : aucune requête vers un tiers, donc aucun transfert d'adresse
   IP hors UE, et un LCP qui ne dépend pas d'un domaine externe.
   -------------------------------------------------------------------------- */

@font-face {
	font-family: "Archivo";
	src: url("../fonts/archivo-latin.woff2") format("woff2");
	font-weight: 300 800;
	font-stretch: 62% 125%;
	font-style: normal;
	font-display: swap;
	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;
}

@font-face {
	font-family: "Archivo";
	src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
	font-weight: 300 800;
	font-stretch: 62% 125%;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
		U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}

/* -----------------------------------------------------------------------------
   2. JETONS
   -------------------------------------------------------------------------- */

:root {
	/* Hauteur de la barre du haut. Mesurée dans le navigateur, pas estimée :
	   85 pixels. Elle sert à plafonner la scène d'accueil pour que celle-ci
	   tienne dans l'écran sans qu'on ait à défiler. */
	--h-entete: 5.3125rem;

	/* Bleu — structure et confiance */
	--c-bleu: #00598f;
	--c-bleu-fonce: #003a5e;
	--c-bleu-vif: #0a6fad;
	--c-bleu-pale: #e2edf5;
	--c-bleu-voile: #f1f7fb;

	/* Orange — accent et conversion */
	--c-orange: #e56b00;
	--c-orange-clair: #f19000;
	--c-cta: #b85400; /* blanc dessus : 4,88:1 */
	--c-cta-appui: #964400;
	--c-orange-voile: #fdf1e4;

	/* Encre et papier — un blanc cassé chaud plutôt qu'un gris froid */
	--c-encre: #14181d;
	--c-encre-douce: #46525e;
	--c-encre-tenue: #6b7785;
	--c-papier: #f7f4f0;
	--c-papier-appui: #efe9e2;
	--c-nuit: #0b1a24;
	--c-blanc: #ffffff;

	/* Filets */
	--c-trait: #e3ded7;
	--c-trait-froid: #dde4ea;
	--c-trait-fort: #c9c1b7;

	/* États */
	--c-focus: #0a6fad;
	--c-succes: #0f6b3f;
	--c-erreur: #a4232a;

	/* Typographie */
	--f: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;

	--t-xs: 0.78rem;
	--t-sm: 0.9rem;
	--t-base: 1.0625rem;
	--t-md: 1.15rem;
	--t-lg: 1.35rem;
	--t-xl: clamp(1.5rem, 1.15rem + 1.5vw, 2.1rem);
	--t-2xl: clamp(1.9rem, 1.35rem + 2.4vw, 3rem);
	--t-3xl: clamp(2.3rem, 1.5rem + 3.6vw, 4.1rem);

	/* Espacements — base 4 px */
	--e-1: 0.25rem;
	--e-2: 0.5rem;
	--e-3: 0.75rem;
	--e-4: 1rem;
	--e-5: 1.5rem;
	--e-6: 2rem;
	--e-7: 2.75rem;
	--e-8: 3.5rem;
	--e-9: 5rem;
	--e-10: 7rem;

	/* Structure */
	--largeur: 1240px;
	--largeur-texte: 66ch;
	--gouttiere: 1.25rem;
	--r: 2px; /* Angles quasi vifs : le registre est imprimé, pas applicatif. */
	--hauteur-entete: 64px;
}

@media (min-width: 48em) {
	:root {
		--gouttiere: 2.5rem;
		--hauteur-entete: 84px;
	}
}

/* -----------------------------------------------------------------------------
   3. RÉINITIALISATION ET BASE
   -------------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* La barre ne flotte plus au-dessus du contenu : une cible d'ancre n'a plus
	   à s'en écarter, seulement à ne pas coller au bord. */
	scroll-padding-top: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background: var(--c-blanc);
	color: var(--c-encre);
	font-family: var(--f);
	font-size: var(--t-base);
	font-weight: 400;
	line-height: 1.62;
	font-variant-numeric: tabular-nums;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
	margin: 0 0 var(--e-4);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.025em;
	color: var(--c-bleu-fonce);
	text-wrap: balance;
}

h1 {
	font-size: var(--t-2xl);
	font-stretch: 108%;
}

h2 {
	font-size: var(--t-xl);
	font-stretch: 104%;
}

h3 {
	font-size: var(--t-lg);
	line-height: 1.2;
}

h4 {
	font-size: var(--t-md);
	line-height: 1.25;
}

p,
ul,
ol {
	margin: 0 0 var(--e-4);
}

a {
	color: var(--c-bleu);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
	transition: color 0.12s ease, text-decoration-color 0.12s ease;
}

a:hover {
	color: var(--c-cta);
	text-decoration-color: currentColor;
}

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

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

strong {
	font-weight: 620;
}

::selection {
	background: var(--c-bleu-fonce);
	color: #fff;
}

.saut-contenu {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	padding: var(--e-3) var(--e-4);
	background: var(--c-bleu-fonce);
	color: #fff;
	font-weight: 600;
}

.saut-contenu:focus {
	left: var(--e-3);
	top: var(--e-3);
	color: #fff;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* -----------------------------------------------------------------------------
   4. STRUCTURE
   -------------------------------------------------------------------------- */

.conteneur {
	width: 100%;
	max-width: var(--largeur);
	margin-inline: auto;
	padding-inline: var(--gouttiere);
}

.conteneur--etroit {
	max-width: 860px;
}

.section {
	padding-block: var(--e-8);
}

@media (min-width: 48em) {
	.section {
		padding-block: var(--e-9);
	}
}

.section--alt {
	background: var(--c-papier);
}

.section--bleu,
.section--nuit {
	background: var(--c-nuit);
	color: #cdd8e1;
}

.section--bleu h1,
.section--bleu h2,
.section--bleu h3,
.section--nuit h2,
.section--nuit h3 {
	color: #fff;
}

.section--bleu a,
.section--nuit a {
	color: var(--c-orange-clair);
}

/* Étiquette de section numérotée — repère de lecture emprunté à l'imprimé */
.etiquette {
	display: flex;
	align-items: center;
	gap: var(--e-3);
	margin-bottom: var(--e-4);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-cta);
}

.etiquette::before {
	content: "";
	width: 26px;
	height: 7px;
	background: currentColor;
	clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
	flex-shrink: 0;
}

.section--bleu .etiquette,
.section--nuit .etiquette {
	color: var(--c-orange-clair);
}

.section__entete {
	max-width: 58ch;
	margin-bottom: var(--e-7);
}

.section--bleu .section__surtitre,
.section--nuit .section__surtitre {
	color: var(--c-orange-clair);
}

/* Chapeau : le paragraphe d'accroche sous un titre */
.chapeau {
	font-size: var(--t-md);
	line-height: 1.55;
	color: var(--c-encre-douce);
	max-width: 56ch;
}

.prose {
	max-width: var(--largeur-texte);
}

.prose > * + * {
	margin-top: var(--e-4);
}

.prose h2 {
	margin-top: var(--e-8);
	padding-top: var(--e-4);
	border-top: 1px solid var(--c-trait);
}

.prose h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.prose h3 {
	margin-top: var(--e-6);
}

.prose li {
	margin-bottom: var(--e-2);
}

/* Grilles */
.grille {
	display: grid;
	gap: var(--e-5);
}

@media (min-width: 34em) {
	.grille--2 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 48em) {
	.grille--3 {
		grid-template-columns: repeat(3, 1fr);
	}

	}

@media (min-width: 62em) {

	/* Colonne principale + colonne d'appui, volontairement asymétriques */
	.grille--2-1 {
		grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr);
		gap: var(--e-8);
		align-items: start;
	}
}

/* Le signe de marque : la barre coupée en biais */
.barre-seb {
	display: block;
	width: 62px;
	height: 9px;
	margin-bottom: var(--e-4);
	background: var(--c-orange);
	clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}

/* -----------------------------------------------------------------------------
   5. BOUTONS
   -------------------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--e-2);
	min-height: 50px;
	padding: 0.8rem 1.6rem;
	border: 1.5px solid transparent;
	border-radius: var(--r);
	font-family: inherit;
	font-size: var(--t-sm);
	font-weight: 650;
	font-stretch: 104%;
	letter-spacing: 0.01em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.14s ease, border-color 0.14s ease,
		color 0.14s ease;
}

.btn svg {
	flex-shrink: 0;
}

.btn--cta {
	background: var(--c-cta);
	border-color: var(--c-cta);
	color: #fff;
}

.btn--cta:hover {
	background: var(--c-cta-appui);
	border-color: var(--c-cta-appui);
	color: #fff;
}

.btn--bleu {
	background: var(--c-bleu);
	border-color: var(--c-bleu);
	color: #fff;
}

.btn--bleu:hover {
	background: var(--c-bleu-fonce);
	border-color: var(--c-bleu-fonce);
	color: #fff;
}

.btn--contour {
	background: transparent;
	border-color: var(--c-trait-fort);
	color: var(--c-bleu-fonce);
}

.btn--contour:hover {
	border-color: var(--c-bleu);
	background: var(--c-bleu-voile);
	color: var(--c-bleu-fonce);
}

/*
 * Le bouton en contour sur fond sombre.
 *
 * Cette liste a été fausse deux fois, et pour la même raison : elle énumère les
 * contextes sombres à la main, alors que rien ne relie l'énumération aux fonds
 * réellement posés. Un fond sombre ajouté ailleurs, et le bouton y redevient
 * bleu foncé sur bleu foncé — invisible, sans que rien ne le dise.
 *
 *   - 25 août 2026 : `.scene` manquait. Le bouton téléphone de l'accueil
 *     s'affichait à 1,44:1.
 *   - 28 août 2026 : `.bandeau-cta` et `.proximite` manquaient. SEB l'a vu
 *     avant nous — « le numéro dans l'encart n'apparaît pas ». C'était le
 *     bouton téléphone du bandeau de bas de page, présent sur **toutes** les
 *     pages du site, et celui de la section « Ce qui se passe quand vous
 *     appelez » sur l'accueil.
 *
 * D'où `reports/recette/qa-contraste-rendu.php`, qui mesure le contraste tel
 * que le navigateur le calcule, sur tous les textes et tous les boutons. Un
 * troisième oubli sera signalé, pas découvert par le client.
 */
.scene .btn--contour,
.hero .btn--contour,
.section--bleu .btn--contour,
.section--nuit .btn--contour,
.bandeau-cta .btn--contour,
.proximite .btn--contour,
.confiance .btn--contour,
.fiche .btn--contour,
.pied .btn--contour {
	border-color: rgba(255, 255, 255, 0.34);
	color: #fff;
}

.scene .btn--contour:hover,
.hero .btn--contour:hover,
.section--bleu .btn--contour:hover,
.section--nuit .btn--contour:hover,
.bandeau-cta .btn--contour:hover,
.proximite .btn--contour:hover,
.confiance .btn--contour:hover,
.fiche .btn--contour:hover,
.pied .btn--contour:hover {
	background: rgba(255, 255, 255, 0.09);
	border-color: rgba(255, 255, 255, 0.6);
	color: #fff;
}

.btn--bloc {
	width: 100%;
}

.btn--petit {
	min-height: 44px;
	padding: 0.5rem 1rem;
	font-size: var(--t-xs);
}

.groupe-btn {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-3);
}

@media (max-width: 33.99em) {
	.groupe-btn .btn {
		width: 100%;
	}
}

/* -----------------------------------------------------------------------------
   6. EN-TÊTE
   -------------------------------------------------------------------------- */

.entete {
	/*
	 * La barre est posée en haut du site, pas en haut de l'écran : elle part
	 * avec la page dès qu'on descend (demande de SEB, 26 août 2026, confirmée).
	 *
	 * Elle a d'abord suivi le défilement, puis s'est effacée à la descente pour
	 * revenir à la montée, puis a été verrouillée à l'écran. C'est la forme la
	 * plus simple des trois, et la seule qui laisse la scène d'accueil occuper
	 * réellement tout l'écran : une barre flottante en recouvrait les
	 * quatre-vingt-cinq premiers pixels.
	 *
	 * Elle a un coût, assumé et signalé : sur une page de prestation de trois
	 * mille mots, le menu et le bouton de devis ne sont plus à portée une fois
	 * qu'on a commencé à lire. Si les demandes de devis venant des pages longues
	 * reculent, c'est la première chose à regarder.
	 */
	/*
	 * `relative` et non `static` : le méga-menu des prestations est un bloc
	 * absolu calé sur `top: 100%` de l'en-tête. Passée en `static`, celle-ci
	 * cessait d'être son repère, et le panneau allait se placer par rapport à la
	 * page entière — donc hors de vue. C'est ce qui l'a fait disparaître le
	 * 26 août 2026.
	 *
	 * `relative` ne change rien au défilement : la barre reste dans le flux et
	 * s'en va avec la page.
	 */
	position: relative;
	z-index: 100;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: saturate(1.6) blur(10px);
	border-bottom: 1px solid var(--c-trait-froid);

	/*
	 * La barre suit le défilement et reste visible : sur une page de prestation
	 * de trois mille mots, la navigation et le bouton de devis doivent rester à
	 * portée jusqu'en bas.
	 *
	 * Elle s'effaçait à la descente et revenait à la montée — une demande de
	 * SEB du 26 août 2026, retirée le même jour.
	 */
}


.entete__barre {
	display: flex;
	align-items: center;
	gap: var(--e-4);
	min-height: var(--hauteur-entete);
}

.logo {
	display: flex;
	align-items: center;
	gap: var(--e-3);
	text-decoration: none;
	color: var(--c-bleu-fonce);
	flex-shrink: 0;
}

.logo img {
	height: 38px;
	width: auto;
}

@media (min-width: 48em) {
	.logo img {
		height: 46px;
	}
}

.logo__texte {
	display: none;
	font-weight: 700;
	font-size: var(--t-sm);
	font-stretch: 96%;
	line-height: 1.15;
	letter-spacing: -0.015em;
	text-transform: uppercase;
}

@media (min-width: 78em) {
	.logo__texte {
		display: block;
	}
}

.nav {
	display: none;
}

@media (min-width: 62em) {
	.nav {
		display: flex;
		align-items: center;
		gap: var(--e-1);
		margin-left: var(--e-6);
	}
}

.nav__lien {
	display: inline-flex;
	align-items: center;
	gap: var(--e-1);
	padding: 0.55rem 0.7rem;
	border: 0;
	border-radius: var(--r);
	background: none;
	font-family: inherit;
	font-size: var(--t-sm);
	font-weight: 580;
	color: var(--c-encre);
	text-decoration: none;
	cursor: pointer;
	position: relative;
}

.nav__lien::after {
	content: "";
	position: absolute;
	left: 0.7rem;
	right: 0.7rem;
	bottom: 0.2rem;
	height: 2px;
	background: var(--c-orange);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.18s ease;
}

.nav__lien:hover,
.nav__lien[aria-expanded="true"] {
	color: var(--c-bleu-fonce);
}

.nav__lien:hover::after,
.nav__lien[aria-expanded="true"]::after,
.nav__lien[aria-current="page"]::after {
	transform: scaleX(1);
}

.nav__chevron {
	width: 11px;
	height: 11px;
	transition: transform 0.2s ease;
}

.nav__lien[aria-expanded="true"] .nav__chevron {
	transform: rotate(180deg);
}

/*
 * Le mot et son chevron : deux commandes distinctes, une seule apparence.
 * Le soulignement de survol appartient au lien, pas au chevron — sans quoi le
 * groupe se lirait comme deux entrées de menu au lieu d'une.
 */
.nav__groupe {
	display: inline-flex;
	align-items: center;
}

.nav__lien--groupe {
	padding-right: 0.25rem;
}

.nav__deplier {
	padding-left: 0.15rem;
	padding-right: 0.5rem;
}

.nav__deplier::after {
	content: none;
}

.entete__actions {
	display: flex;
	align-items: center;
	gap: var(--e-3);
	margin-left: auto;
}

.entete__tel {
	display: none;
	align-items: center;
	gap: var(--e-2);
	font-weight: 680;
	font-size: var(--t-sm);
	color: var(--c-bleu-fonce);
	text-decoration: none;
	white-space: nowrap;
}

.entete__tel:hover {
	color: var(--c-cta);
}

@media (min-width: 48em) {
	.entete__tel {
		display: inline-flex;
	}
}

.entete__devis {
	display: none;
}

@media (min-width: 48em) {
	.entete__devis {
		display: inline-flex;
	}
}

.burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--c-trait-fort);
	border-radius: var(--r);
	cursor: pointer;
	color: var(--c-bleu-fonce);
}

@media (min-width: 62em) {
	.burger {
		display: none;
	}
}

.burger__trait,
.burger__trait::before,
.burger__trait::after {
	display: block;
	width: 19px;
	height: 2px;
	background: currentColor;
	transition: transform 0.2s ease, top 0.2s ease, background-color 0.15s ease;
}

.burger__trait {
	position: relative;
}

.burger__trait::before,
.burger__trait::after {
	content: "";
	position: absolute;
	left: 0;
}

.burger__trait::before {
	top: -6px;
}

.burger__trait::after {
	top: 6px;
}

.burger[aria-expanded="true"] .burger__trait {
	background: transparent;
}

.burger[aria-expanded="true"] .burger__trait::before {
	top: 0;
	transform: rotate(45deg);
}

.burger[aria-expanded="true"] .burger__trait::after {
	top: 0;
	transform: rotate(-45deg);
}

/* Méga-menu */
.mega {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: #fff;
	border-top: 1px solid var(--c-trait-froid);
	border-bottom: 3px solid var(--c-orange);
}

.mega[data-ouvert="true"] {
	display: block;
}

.mega__grille {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
	padding-block: var(--e-5);
	border-left: 1px solid var(--c-trait-froid);
}

.mega__item {
	display: flex;
	gap: var(--e-3);
	padding: var(--e-4);
	text-decoration: none;
	color: var(--c-encre);
	border-right: 1px solid var(--c-trait-froid);
	border-bottom: 1px solid var(--c-trait-froid);
}

.mega__item:hover {
	background: var(--c-bleu-voile);
	color: var(--c-bleu-fonce);
}

.mega__icone {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	color: var(--c-bleu);
}

.mega__titre {
	display: block;
	font-weight: 650;
	font-size: var(--t-sm);
	line-height: 1.25;
	margin-bottom: 3px;
}

.mega__desc {
	display: block;
	font-size: var(--t-xs);
	line-height: 1.4;
	color: var(--c-encre-tenue);
}

.mega__pied {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-3);
	padding-block: var(--e-4);
	font-size: var(--t-sm);
}

/* Panneau mobile */
.panneau {
	position: fixed;
	inset: var(--hauteur-entete) 0 0;
	z-index: 99;
	background: #fff;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--e-5) 0 var(--e-10);
	transform: translateX(100%);
	visibility: hidden;
	transition: transform 0.24s ease, visibility 0.24s;
}

.panneau[data-ouvert="true"] {
	transform: translateX(0);
	visibility: visible;
}

@media (min-width: 62em) {
	.panneau {
		display: none;
	}
}

.panneau__section + .panneau__section {
	margin-top: var(--e-6);
	padding-top: var(--e-5);
	border-top: 1px solid var(--c-trait);
}

.panneau__titre {
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-encre-tenue);
	margin-bottom: var(--e-3);
}

.panneau__liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.panneau__lien {
	display: flex;
	align-items: center;
	gap: var(--e-3);
	min-height: 54px;
	padding: var(--e-2) 0;
	font-weight: 600;
	color: var(--c-encre);
	text-decoration: none;
	border-bottom: 1px solid var(--c-trait);
}

.panneau__lien:hover {
	color: var(--c-bleu);
}

.panneau__lien svg {
	width: 21px;
	height: 21px;
	color: var(--c-bleu);
	flex-shrink: 0;
}

/* Barre d'action mobile */
.barre-mobile {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 95;
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	border-top: 1px solid var(--c-trait-fort);
	padding-bottom: env(safe-area-inset-bottom);
}

@media (min-width: 48em) {
	.barre-mobile {
		display: none;
	}
}

.barre-mobile__lien {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--e-2);
	min-height: 56px;
	background: #fff;
	font-weight: 650;
	font-size: var(--t-sm);
	text-decoration: none;
	color: var(--c-bleu-fonce);
}

.barre-mobile__lien--cta {
	background: var(--c-cta);
	color: #fff;
}

.barre-mobile__lien svg {
	width: 17px;
	height: 17px;
}

body.a-barre-mobile {
	padding-bottom: 56px;
}

@media (min-width: 48em) {
	body.a-barre-mobile {
		padding-bottom: 0;
	}
}

/* -----------------------------------------------------------------------------
   7. FIL D'ARIANE
   -------------------------------------------------------------------------- */

.ariane {
	padding-block: var(--e-3);
	font-size: var(--t-xs);
	color: var(--c-encre-tenue);
	border-bottom: 1px solid var(--c-trait);
	background: var(--c-papier);
}

.ariane__liste {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--e-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ariane__liste li {
	display: flex;
	align-items: center;
	gap: var(--e-2);
}

.ariane__liste li:not(:last-child)::after {
	content: "/";
	color: var(--c-trait-fort);
}

.ariane a {
	color: var(--c-encre-douce);
	text-decoration: none;
}

.ariane a:hover {
	color: var(--c-bleu);
	text-decoration: underline;
}

.ariane [aria-current="page"] {
	color: var(--c-encre);
	font-weight: 600;
}

/* -----------------------------------------------------------------------------
   8. HÉRO
   -------------------------------------------------------------------------- */

.hero {
	position: relative;
	background: var(--c-nuit);
	color: #c6d3dd;
	overflow: hidden;
	border-bottom: 4px solid var(--c-orange);
}

/* Trame de fond discrète : rappel du quadrillage d'un plan technique */
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
	background-size: 68px 68px;
	mask-image: radial-gradient(120% 90% at 20% 0%, #000 15%, transparent 75%);
	pointer-events: none;
}

.hero__grille {
	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--e-7);
	padding-block: var(--e-8);
	align-items: center;
}

@media (min-width: 62em) {
	.hero__grille {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		gap: var(--e-9);
		padding-block: var(--e-9) var(--e-9);
	}
}

.hero__contenu {
	max-width: 42rem;
}

/* Héro sans colonne d'appui : le bloc porte lui-même son rythme vertical. */
.hero > .conteneur > .hero__contenu {
	position: relative;
	z-index: 1;
	padding-block: var(--e-8);
}

@media (min-width: 62em) {
	.hero > .conteneur > .hero__contenu {
		padding-block: var(--e-9) var(--e-8);
	}
}

.hero h1 {
	color: #fff;
	font-size: var(--t-3xl);
	font-stretch: 112%;
	letter-spacing: -0.035em;
	line-height: 1.02;
	margin-bottom: var(--e-5);
}

.hero__accroche {
	font-size: var(--t-md);
	line-height: 1.55;
	color: #b3c4d1;
	margin-bottom: var(--e-6);
	max-width: 40rem;
}

@media (min-width: 40em) {
	.hero__reassurance {
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--e-3) var(--e-6);
	}
}

/* Héro secondaire, pour les pages intérieures */
.hero--interieur .hero__grille {
	padding-block: var(--e-7);
}

@media (min-width: 62em) {
	.hero--interieur .hero__grille {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.85fr);
		/*
		 * Le héros intérieur a maigri de 3,5 à 2,75 rem de respiration.
		 *
		 * SEB, 28 août 2026 : « on est obligé de descendre pour accéder aux
		 * choix et au formulaire ». Mesuré avant correction sur une page
		 * catégorie en 1440 × 900 : le formulaire commençait à 875 px, et à
		 * 903 px sur la plus longue — sous la ligne de flottaison. Un héros qui
		 * repousse hors de l'écran ce que la page est venue faire coûte plus
		 * qu'il ne rapporte.
		 */
		padding-block: var(--e-7);
	}
}

.hero--interieur h1 {
	font-size: var(--t-2xl);
	font-stretch: 106%;
}

/* -----------------------------------------------------------------------------
   9. CARTE DE COUVERTURE (SVG géographique)
   -------------------------------------------------------------------------- */

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

.carte-corse__contour {
	fill: rgba(255, 255, 255, 0.05);
	stroke: rgba(255, 255, 255, 0.42);
	stroke-width: 1.1;
	stroke-linejoin: round;
}

.carte-corse__liaisons path {
	fill: none;
	stroke: var(--c-orange);
	stroke-width: 1;
	stroke-dasharray: 3 4;
	opacity: 0.75;
}

.carte-corse__point {
	fill: #fff;
	opacity: 0.75;
}

.carte-corse__point--siege {
	fill: var(--c-orange);
	opacity: 1;
	stroke: var(--c-nuit);
	stroke-width: 2;
}

.carte-corse__point--active {
	fill: var(--c-orange-clair);
	opacity: 1;
	stroke: var(--c-nuit);
	stroke-width: 2;
}

.carte-corse__libelle {
	fill: #dbe6ee;
	font-family: var(--f);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.carte-corse__libelle--active {
	fill: var(--c-orange-clair);
	font-weight: 700;
}

/* Déclinaison claire, pour les sections sur fond papier */
/* -----------------------------------------------------------------------------
   11. CARTES DE CONTENU
   -------------------------------------------------------------------------- */

.carte {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--e-5);
	background: #fff;
	border: 1px solid var(--c-trait);
	border-radius: var(--r);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.section--alt .carte {
	background: #fff;
}

.carte--lien:hover {
	border-color: var(--c-bleu);
}

.carte__icone {
	width: 30px;
	height: 30px;
	margin-bottom: var(--e-4);
	color: var(--c-bleu);
	stroke-width: 1.6;
}

.carte__titre {
	font-size: var(--t-md);
	margin-bottom: var(--e-2);
	letter-spacing: -0.018em;
}

.carte__titre a {
	color: inherit;
	text-decoration: none;
}

.carte__titre a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.carte__texte {
	font-size: var(--t-sm);
	line-height: 1.55;
	color: var(--c-encre-douce);
	margin-bottom: 0;
}

.carte__pied {
	margin-top: auto;
	padding-top: var(--e-5);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--c-cta);
	display: flex;
	align-items: center;
	gap: var(--e-2);
}

.carte__pied svg {
	width: 15px;
	height: 15px;
	transition: transform 0.16s ease;
}

.carte--lien:hover .carte__pied svg {
	transform: translateX(4px);
}

/* Carte de prestation : numérotée, avec liseré au survol */
.carte--prestation {
	padding-top: var(--e-6);
}

.carte--prestation::before {
	content: "";
	position: absolute;
	top: -1px;
	left: -1px;
	width: 0;
	height: 3px;
	background: var(--c-orange);
	transition: width 0.28s ease;
}

.carte--prestation:hover::before {
	width: 72px;
}

/* -----------------------------------------------------------------------------
   12. LISTES ÉDITORIALES
   -------------------------------------------------------------------------- */

.benefices {
	display: grid;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--c-trait);
}

@media (min-width: 48em) {
	.benefices {
		grid-template-columns: repeat(2, 1fr);
	}
}

.benefice {
	padding: var(--e-5) 0;
	border-bottom: 1px solid var(--c-trait);
}

@media (min-width: 48em) {
	.benefice {
		padding-right: var(--e-6);
	}

	.benefice:nth-child(odd) {
		border-right: 1px solid var(--c-trait);
		padding-right: var(--e-6);
	}

	.benefice:nth-child(even) {
		padding-left: var(--e-6);
		padding-right: 0;
	}
}

.benefice__titre {
	display: flex;
	align-items: baseline;
	gap: var(--e-3);
	font-size: var(--t-base);
	font-weight: 680;
	color: var(--c-bleu-fonce);
	margin-bottom: var(--e-2);
	letter-spacing: -0.01em;
}

.benefice__titre::before {
	content: "";
	flex-shrink: 0;
	width: 18px;
	height: 5px;
	background: var(--c-orange);
	clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}

.benefice p {
	margin: 0;
	color: var(--c-encre-douce);
	font-size: var(--t-sm);
	line-height: 1.55;
}

.liste-check {
	list-style: none;
	margin: 0 0 var(--e-5);
	padding: 0;
}

.liste-check li {
	position: relative;
	padding-left: 1.75rem;
	margin-bottom: var(--e-3);
	color: var(--c-encre-douce);
}

.liste-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 11px;
	height: 4px;
	background: var(--c-orange);
	clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}

/* -----------------------------------------------------------------------------
   13. ENTONNOIR
   -------------------------------------------------------------------------- */

.entonnoir {
	padding: var(--e-5);
	background: #fff;
	border: 1px solid var(--c-trait-fort);
	border-top: 3px solid var(--c-bleu);
	border-radius: var(--r);
}

@media (min-width: 48em) {
	.entonnoir {
		padding: var(--e-6);
	}
}

.section--alt .entonnoir {
	background: #fff;
}

.entonnoir__etape {
	display: flex;
	align-items: center;
	gap: var(--e-2);
	margin-bottom: var(--e-3);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-cta);
}

.entonnoir__jauge {
	display: flex;
	gap: 3px;
	margin-bottom: var(--e-5);
}

.entonnoir__jauge span {
	flex: 1;
	height: 4px;
	background: var(--c-papier-appui);
}

.entonnoir__jauge span[data-actif] {
	background: var(--c-orange);
}

.entonnoir__question {
	font-size: var(--t-lg);
	margin-bottom: var(--e-5);
	letter-spacing: -0.02em;
}

.entonnoir__options {
	display: grid;
	gap: 0;
	list-style: none;
	margin: 0 0 var(--e-5);
	padding: 0;
	border-top: 1px solid var(--c-trait);
}

.option {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 68px;
	padding: var(--e-4) var(--e-5) var(--e-4) var(--e-4);
	border-bottom: 1px solid var(--c-trait);
	text-decoration: none;
	color: var(--c-encre);
	transition: background-color 0.14s ease, padding-left 0.14s ease;
}

.option::after {
	content: "";
	position: absolute;
	right: var(--e-4);
	top: 50%;
	width: 7px;
	height: 7px;
	border-right: 1.5px solid var(--c-trait-fort);
	border-bottom: 1.5px solid var(--c-trait-fort);
	transform: translateY(-50%) rotate(-45deg);
	transition: border-color 0.14s ease, right 0.14s ease;
}

.option:hover {
	background: var(--c-bleu-voile);
	color: var(--c-bleu-fonce);
	padding-left: calc(var(--e-4) + 6px);
}

.option:hover::after {
	border-color: var(--c-cta);
	right: calc(var(--e-4) - 3px);
}

.option__nom {
	font-weight: 640;
	line-height: 1.3;
	margin-bottom: 2px;
	font-size: var(--t-sm);
}

.option__desc {
	font-size: var(--t-xs);
	color: var(--c-encre-tenue);
	line-height: 1.4;
	padding-right: var(--e-4);
}

.entonnoir__pied {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-3);
	font-size: var(--t-xs);
	color: var(--c-encre-tenue);
}

.entonnoir__retour {
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
	color: var(--c-encre-douce);
	text-decoration: none;
	font-weight: 600;
	/* Vingt-trois pixels mesurés : un de moins que le seuil WCAG. La hauteur
	   venait de la ligne de texte seule ; elle est maintenant posée. */
	min-height: 24px;
}

.entonnoir__retour:hover {
	color: var(--c-bleu);
}

.recap {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--e-2);
	padding: var(--e-4);
	margin-bottom: var(--e-5);
	background: var(--c-papier);
	border-left: 3px solid var(--c-orange);
	font-size: var(--t-sm);
}

.recap__etiquette {
	font-weight: 700;
	color: var(--c-bleu-fonce);
	font-size: var(--t-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.recap__valeur {
	color: var(--c-encre);
}

.recap__modifier {
	margin-left: auto;
	font-size: var(--t-xs);
	font-weight: 600;
}

/* -----------------------------------------------------------------------------
   14. FORMULAIRES
   -------------------------------------------------------------------------- */

.form {
	display: grid;
	gap: var(--e-5);
}

.form__ligne {
	display: grid;
	gap: var(--e-5);
}

@media (min-width: 40em) {
	.form__ligne--2 {
		grid-template-columns: repeat(2, 1fr);
	}
}

.champ {
	display: flex;
	flex-direction: column;
	gap: var(--e-2);
}

.champ__label {
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-bleu-fonce);
}

.champ__requis {
	color: var(--c-erreur);
}

.champ__aide {
	font-size: var(--t-xs);
	color: var(--c-encre-tenue);
	line-height: 1.45;
}

.champ input[type="text"],
.champ input[type="email"],
.champ input[type="tel"],
.champ select,
.champ textarea {
	width: 100%;
	min-height: 50px;
	padding: 0.75rem 0.9rem;
	font-family: inherit;
	font-size: var(--t-base);
	color: var(--c-encre);
	background: #fff;
	border: 1px solid var(--c-trait-fort);
	border-radius: var(--r);
	transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.champ textarea {
	min-height: 140px;
	resize: vertical;
	line-height: 1.55;
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
	border-color: var(--c-bleu);
	box-shadow: inset 0 0 0 1px var(--c-bleu);
	outline: none;
}

.champ input[aria-invalid="true"],
.champ textarea[aria-invalid="true"] {
	border-color: var(--c-erreur);
}

.champ__erreur {
	font-size: var(--t-xs);
	font-weight: 600;
	color: var(--c-erreur);
}

.champ--case {
	flex-direction: row;
	align-items: flex-start;
	gap: var(--e-3);
}

.champ--case input {
	flex-shrink: 0;
	width: 21px;
	height: 21px;
	margin-top: 2px;
	accent-color: var(--c-bleu);
}

.champ--case label {
	font-size: var(--t-sm);
	color: var(--c-encre-douce);
	line-height: 1.5;
}

.champ--piege {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.message {
	padding: var(--e-5);
	border: 1px solid;
	border-left-width: 3px;
	font-size: var(--t-sm);
	margin-bottom: var(--e-5);
	line-height: 1.6;
}

.message--succes {
	background: #f1f8f3;
	border-color: var(--c-succes);
	color: #0b4a2c;
}

.message--erreur {
	background: #fdf2f2;
	border-color: var(--c-erreur);
	color: #7d1a20;
}

/* -----------------------------------------------------------------------------
   15. FAQ
   -------------------------------------------------------------------------- */

.faq {
	border-top: 1px solid var(--c-trait);
	max-width: var(--largeur-texte);
}

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

.faq__question {
	display: flex;
	align-items: flex-start;
	gap: var(--e-4);
	padding: var(--e-4) 0;
	font-size: var(--t-base);
	font-weight: 640;
	color: var(--c-bleu-fonce);
	cursor: pointer;
	list-style: none;
	letter-spacing: -0.012em;
}

.faq__question::-webkit-details-marker {
	display: none;
}

.faq__question::after {
	content: "";
	margin-left: auto;
	flex-shrink: 0;
	width: 11px;
	height: 11px;
	margin-top: 0.42em;
	border-right: 1.8px solid var(--c-cta);
	border-bottom: 1.8px solid var(--c-cta);
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.faq__item[open] .faq__question::after {
	transform: rotate(-135deg);
	margin-top: 0.6em;
}

.faq__reponse {
	padding: 0 0 var(--e-5);
	color: var(--c-encre-douce);
	font-size: var(--t-sm);
	line-height: 1.65;
	max-width: 60ch;
}

.faq__reponse p:last-child {
	margin-bottom: 0;
}

/* -----------------------------------------------------------------------------
   16. BANDEAU DE CONVERSION
   -------------------------------------------------------------------------- */

.bandeau-cta {
	position: relative;
	padding-block: var(--e-8);
	background: var(--c-bleu-fonce);
	color: #c6d7e3;
	overflow: hidden;
	border-top: 4px solid var(--c-orange);
}

.bandeau-cta__grille {
	display: grid;
	gap: var(--e-6);
	align-items: center;
}

@media (min-width: 56em) {
	.bandeau-cta__grille {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
		gap: var(--e-8);
	}
}

.bandeau-cta h2 {
	color: #fff;
	margin-bottom: var(--e-3);
	font-stretch: 106%;
}

.bandeau-cta p {
	color: #b6cbd9;
	margin-bottom: 0;
	max-width: 52ch;
}

/* -----------------------------------------------------------------------------
   17. LIENS DE MAILLAGE
   -------------------------------------------------------------------------- */

.puces-liens {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.puce-lien {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.5rem 0.95rem;
	background: #fff;
	border: 1px solid var(--c-trait-fort);
	border-radius: var(--r);
	font-size: var(--t-sm);
	font-weight: 550;
	color: var(--c-encre-douce);
	text-decoration: none;
}

a.puce-lien:hover {
	border-color: var(--c-bleu);
	background: var(--c-bleu-voile);
	color: var(--c-bleu-fonce);
}

/* -----------------------------------------------------------------------------
   18. PIED DE PAGE
   -------------------------------------------------------------------------- */

.pied {
	background: var(--c-nuit);
	color: #9fb1c0;
	padding-block: var(--e-8) var(--e-5);
	font-size: var(--t-sm);
	border-top: 4px solid var(--c-orange);
}

.pied a {
	color: #cddae4;
	text-decoration: none;
}

.pied a:hover {
	color: var(--c-orange-clair);
	text-decoration: underline;
}

.pied__grille {
	display: grid;
	gap: var(--e-7);
}

@media (min-width: 48em) {
	.pied__grille {
		grid-template-columns: 1.5fr 1fr 1fr;
	}
}

@media (min-width: 72em) {
	.pied__grille {
		grid-template-columns: 1.7fr 1fr 1fr 1fr;
	}
}

.pied__titre {
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: var(--e-4);
	padding-bottom: var(--e-2);
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.pied__liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pied__liste li {
	margin-bottom: var(--e-2);
}

.pied__nap {
	font-style: normal;
	line-height: 1.75;
}

.pied__nap strong {
	color: #fff;
	display: block;
	margin-bottom: var(--e-2);
	font-size: var(--t-base);
	font-weight: 680;
}

.pied__bas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-3) var(--e-5);
	align-items: center;
	justify-content: space-between;
	margin-top: var(--e-8);
	padding-top: var(--e-5);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-size: var(--t-xs);
	color: #7e93a5;
}

.pied__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-2) var(--e-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* -----------------------------------------------------------------------------
   19. UTILITAIRES
   -------------------------------------------------------------------------- */

.texte-doux {
	color: var(--c-encre-douce);
}

.tableau-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

@media print {
	.entete,
	.barre-mobile,
	.bandeau-cta,
	.pied,
	.entonnoir {
		display: none !important;
	}

	body {
		color: #000;
	}
}

/* -----------------------------------------------------------------------------
   20. SCÈNE D'ACCUEIL
   La page d'accueil ne cherche pas le référencement : elle installe une
   impression. D'où une scène au rapport de la vidéo, l'image diffusée telle
   qu'elle a été tournée, et un texte posé directement dessus — sans panneau,
   sans halo : SEB veut voir la vidéo, pas un cartouche par-dessus.

   Toute la lisibilité repose donc sur un seul écran, le voile de `.scene::before`.
   Ses opacités ne se règlent pas à l'œil : reports/qa-contraste-scene.php rejoue
   la chaîne pixel par pixel sur les images de la vidéo et cherche la tuile la
   plus claire de la zone couverte par le texte.
   -------------------------------------------------------------------------- */

.scene {
	position: relative;
	/* Colonne depuis que la signature occupe le haut : la scène a deux blocs
	   empilés, la signature en tête et le panneau de texte poussé en bas par
	   `.scene__bas { margin-top: auto }`. */
	display: flex;
	flex-direction: column;
	align-items: stretch;
	min-height: 92svh;

	/* Aucune marge en tête : le panneau doit venir se placer immédiatement sous
	   l'en-tête, pas quatre-vingts pixels plus bas (demande de SEB, 25 août). */
	padding-block: 0 var(--e-7);
	background: var(--c-nuit);
	overflow: hidden;
	isolation: isolate;
}

/* La hauteur en grand écran est déclarée avec la signature, en section 34 :
   posée ici, elle serait écrasée par la règle qui l'y suit — même spécificité,
   source plus tardive. C'est là qu'on aligne la scène sur le rapport de la
   vidéo. */

/*
 * Repli : ce qu'on voit tant qu'aucune vidéo n'est diffusée — pas de fichier,
 * connexion lente, ou mouvement réduit demandé.
 *
 * Il doit rester **sous** la vidéo. Il était au même plan qu'elle (-2) et vient
 * après dans le HTML : à plan égal, c'est l'ordre du document qui tranche, et
 * cet aplat opaque recouvrait donc intégralement la vidéo. Le défaut est resté
 * invisible tant qu'il n'y avait pas de vidéo à masquer ; il a été trouvé le
 * 25 août 2026, quand SEB a signalé ne rien voir en fond (D-54).
 *
 * `reports/qa-empilement-scene.php` vérifie désormais l'ordre des plans.
 */
.scene__fond {
	position: absolute;
	inset: 0;
	z-index: -3;
	background:
		radial-gradient(90% 70% at 78% 18%, rgba(0, 89, 143, 0.55) 0%, transparent 62%),
		radial-gradient(70% 60% at 12% 92%, rgba(229, 107, 0, 0.22) 0%, transparent 58%),
		var(--c-nuit);
}

.scene__fond::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 78px 78px;
	mask-image: radial-gradient(120% 100% at 70% 10%, #000 10%, transparent 78%);
}

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

	/*
	 * La vidéo est diffusée telle quelle : ni flou, ni agrandissement, ni
	 * déformation, ni correction de luminosité ou de couleur.
	 *
	 * Ce filtre neutre est le résultat d'un aller-retour instructif. Pour
	 * éclaircir la scène, la luminosité avait été poussée jusqu'à 1,6 — et
	 * l'image saturait : les zones déjà claires écrêtaient à blanc et perdaient
	 * tout détail. SEB l'a vu immédiatement. Éclaircir une vidéo par ce filtre
	 * ne marche pas ; la seule bonne commande est le voile, et c'est lui qui a
	 * été allégé.
	 *
	 * La règle est conservée plutôt que supprimée : elle documente le choix, et
	 * c'est ici qu'on interviendrait si une autre vidéo était livrée.
	 */
	filter: brightness(1) saturate(1);
}

/* Voile de lisibilité : garantit le contraste quel que soit le plan diffusé. */
.scene::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	/*
	 * Le voile. Il était à 94 % d'opacité à gauche, ce qui revenait à ne pas
	 * diffuser la vidéo du tout de ce côté. Il descend à 62 % côté panneau et
	 * 34 % à droite : assez pour que la scène reste sombre et que tout texte
	 * qui s'y poserait reste lisible, assez peu pour qu'on distingue ce qui est
	 * filmé.
	 */
	/*
	 * Renforcé côté texte le 26 août, quand le panneau a perdu son halo : c'est
	 * désormais le seul écran entre la vidéo et le texte.
	 *
	 * Les valeurs ne sont pas choisies à l'œil, et elles ne viennent plus non
	 * plus d'un calcul sur la luminance moyenne de l'image : cette moyenne
	 * mentait. La vidéo montre un mur clair sur sa droite, exactement là où se
	 * termine le mot « BUREAUTIQUE » ; mesuré sur les pixels réellement rendus,
	 * le contraste y tombait à 3,07:1 quand le calcul en annonçait 4,84.
	 *
	 * Ce sont donc les 56 % gauche de la vidéo — la seule zone que le texte
	 * recouvre — qui fixent ces opacités, et le contrôle se fait désormais sur
	 * une capture d'écran (reports/qa-contraste-scene.php).
	 */
	/*
	 * Voile uniforme : la même intensité d'un bord à l'autre (demande de SEB,
	 * 26 août 2026). Il était en dégradé — dense côté texte, presque
	 * transparent à l'opposé —, ce qui se lisait comme une ombre portée sur la
	 * moitié gauche de l'image.
	 *
	 * C'est la seule commande qui éclaircit vraiment la scène : le filtre de
	 * luminosité de l'élément vidéo écrête les hautes lumières bien avant
	 * d'éclaircir l'ensemble. Le voile est donc descendu à 0,56 — la vidéo
	 * passe presque à nu — et la lisibilité est reprise par l'ombre portée du
	 * texte, déclarée sur .scene__contenu.
	 *
	 * Mesuré sur les pixels rendus autour des lettres : titre 11,35:1,
	 * « BUREAUTIQUE » 7,25:1, paragraphe 6,56:1.
	 * Contrôle : reports/qa-lisibilite-scene.php.
	 */
	background: rgba(11, 26, 36, 0.56);
}

.scene__contenu {
	position: relative;
	width: 100%;
	max-width: 46rem;

	/*
	 * Ombre portée sur le texte, et sur lui seul.
	 *
	 * SEB veut la vidéo la plus claire possible ; or c'est le voile qui tenait
	 * seul la lisibilité, et l'éclaircir revenait à effacer le texte. L'ombre
	 * déplace le problème là où il se pose vraiment : au contact des lettres.
	 * Elle a permis de descendre le voile de 0,75 à 0,60 — l'image y gagne
	 * 85 % de clarté — sans rien perdre en lisibilité.
	 *
	 * Ce n'est pas le panneau ni le halo refusés les 25 et 26 août : il n'y a
	 * aucune boîte, aucune arête, aucun rectangle plus sombre. Seuls les
	 * caractères portent leur propre ombre, et elle s'éteint à quelques pixels.
	 *
	 * Deux couches : une nette et courte qui détache le bord de la lettre, une
	 * large et diffuse qui assombrit l'image immédiatement autour.
	 */
	/*
	 * Quatre ombres de rayons croissants, d'opacités décroissantes.
	 *
	 * La version précédente empilait deux ombres identiques de 4 pixels pour
	 * obtenir un halo dense au contact de la lettre. Elle en obtenait surtout
	 * une **arête** : à quatre pixels, l'assombrissement s'arrêtait net, et SEB
	 * a vu le contour du flou se dessiner autour du titre.
	 *
	 * Le principe est inversé ici : chaque couche va plus loin et pèse moins, si
	 * bien qu'aucune ne finit au même endroit. L'assombrissement décroît sans
	 * jamais s'interrompre, et il n'y a plus de limite à voir.
	 */
	text-shadow:
		0 1px 2px rgba(7, 18, 26, 0.5),
		0 2px 12px rgba(7, 18, 26, 0.5),
		0 4px 32px rgba(7, 18, 26, 0.52),
		0 8px 64px rgba(7, 18, 26, 0.45);
}

/* Le panneau : c'est lui qui rend le texte lisible, pas le voile seul. */
/*
 * Le panneau n'a plus de fond (demande de SEB, 25 août 2026) : l'aplat bleu nuit
 * découpait un rectangle net par-dessus la vidéo, et cachait précisément la
 * partie qu'on venait de rendre visible.
 *
 * Il est remplacé par un halo qui s'éteint avant d'atteindre les bords. Aucune
 * arête n'apparaît — on ne voit pas un panneau, on voit la vidéo un peu plus
 * sombre là où le texte se pose. C'est ce halo qui tient le contraste, vérifié
 * par calcul dans reports/qa-contraste-scene.php sur l'image la plus claire de
 * la vidéo, et non à l'œil.
 *
 * Le flou d'arrière-plan a disparu avec le fond : il aurait brouillé la vidéo
 * derrière le texte, ce qui revenait au même que l'aplat.
 */
.panneau-texte {
	position: relative;
	padding: var(--e-6) var(--e-5);

	/*
	 * La barre verticale s'éteint vers le bas, comme le filet horizontal sous la
	 * signature s'éteint vers la droite. Une bordure ne peut pas porter de
	 * dégradé : c'est `border-image` qui le fait, et seule la bordure gauche a
	 * une épaisseur, donc elle seule se dessine.
	 */
	border-left: 4px solid transparent;
	border-image: linear-gradient(
		180deg,
		var(--c-orange) 0%,
		rgba(229, 107, 0, 0.55) 55%,
		rgba(229, 107, 0, 0) 100%
	) 1;
}

/*
 * Aucun halo, aucun fond : SEB a demandé que seul le texte apparaisse devant
 * la vidéo (D-56). Le panneau n'est plus qu'une boîte de mise en page.
 *
 * La lisibilité repose donc entièrement sur le voile de la scène, qui a été
 * renforcé côté texte en conséquence. C'est un dégradé sur toute la largeur :
 * il assombrit sans dessiner de rectangle.
 */

@media (min-width: 48em) {
	.panneau-texte {
		padding: var(--e-8) var(--e-7);
	}
}

.scene__marque {
	display: block;
	margin-bottom: var(--e-5);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #8fb0c6;
}

/* Le H1 de la scène est la signature, et rien d'autre : ses tailles sont
   définies avec elle, plus bas. Une règle `.scene h1` subsisterait ici avec une
   spécificité supérieure et écraserait silencieusement les siennes. */

.scene__texte {
	font-size: clamp(1.05rem, 1rem + 0.4vw, 1.28rem);
	line-height: 1.6;
	color: #d3e0ea;
	max-width: 34rem;
	margin-bottom: var(--e-6);
}

.scene__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-3);
}

@media (max-width: 33.99em) {
	.scene__actions .btn {
		width: 100%;
	}
}

.scene__pied {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-3) var(--e-6);
	margin: var(--e-7) 0 0;
	padding-top: var(--e-5);
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	list-style: none;
	font-size: var(--t-sm);
	color: #a8bccb;
}

.scene__pied li {
	display: flex;
	align-items: center;
	gap: var(--e-2);
}

.scene__pied svg {
	width: 16px;
	height: 16px;
	color: var(--c-orange-clair);
	flex-shrink: 0;
}

/* -----------------------------------------------------------------------------
   21. MANIFESTE
   Un seul énoncé, composé large. Sa fonction est de faire respirer la page
   entre la scène et l'index, et de dire en clair ce que l'entreprise change.
   -------------------------------------------------------------------------- */

.manifeste {
	padding-block: var(--e-9);
	background: var(--c-papier);
	border-bottom: 1px solid var(--c-trait);
}

@media (min-width: 62em) {
	.manifeste__grille {
		display: grid;
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		gap: var(--e-9);
		align-items: end;
	}
}

.manifeste__texte {
	max-width: 20ch;
	font-size: clamp(1.7rem, 1.15rem + 2.3vw, 2.9rem);
	font-weight: 620;
	font-stretch: 102%;
	line-height: 1.14;
	letter-spacing: -0.03em;
	color: var(--c-bleu-fonce);
	text-wrap: balance;
	margin: 0 0 var(--e-6);
}

.manifeste__texte em {
	font-style: normal;
	color: var(--c-cta);
}

.manifeste__appui {
	max-width: 48ch;
	font-size: var(--t-md);
	line-height: 1.68;
	color: var(--c-encre-douce);
	margin: 0;
}

.manifeste__appui + .manifeste__appui {
	margin-top: var(--e-4);
}

/* -----------------------------------------------------------------------------
   23. BLOC PROXIMITÉ
   Les engagements chiffrés énoncés dans une phrase plutôt qu'en tuiles : même
   information, mais elle se lit au lieu de se compter.
   -------------------------------------------------------------------------- */

.proximite {
	padding-block: var(--e-9);
	background: var(--c-nuit);
	color: #b8c9d6;
	border-top: 4px solid var(--c-orange);
}

@media (min-width: 62em) {
	.proximite__grille {
		display: grid;
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
		gap: var(--e-9);
		align-items: center;
	}
}

.proximite h2 {
	color: #fff;
	font-size: var(--t-2xl);
	font-stretch: 106%;
	margin-bottom: var(--e-5);
}

.proximite__phrase {
	font-size: clamp(1.08rem, 1rem + 0.55vw, 1.38rem);
	line-height: 1.62;
	color: #cddbe5;
	max-width: 46ch;
	margin-bottom: var(--e-6);
}

.proximite__phrase strong {
	color: #fff;
	font-weight: 700;
	white-space: nowrap;
}

.proximite__liste {
	list-style: none;
	margin: 0 0 var(--e-6);
	padding: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/*
 * Les trois intitulés s'alignent, quelle que soit leur longueur.
 *
 * La colonne était posée à `min-width: 6rem`. « Sur site » et « Par écrit »
 * tiennent dedans ; « Achat ou location » non — il débordait et poussait son
 * texte plus à droite que les deux autres. Trois lignes dont une décalée :
 * signalé par SEB le 1er septembre 2026, sur ordinateur comme sur téléphone.
 *
 * Une largeur fixe suppose de connaître le mot le plus long à l'avance. Elle
 * redeviendra fausse au prochain intitulé. La colonne est donc calée sur le
 * plus large des trois, et sur téléphone l'intitulé passe simplement au-dessus
 * de son texte : à 375 px, une colonne de neuf rem laisserait moins de la
 * moitié de la largeur à la phrase.
 */
.proximite__liste li {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--e-2);
	padding: var(--e-4) 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	font-size: var(--t-base);
	line-height: 1.5;
	color: #b8c9d6;
}

@media (min-width: 48em) {
	.proximite__liste li {
		grid-template-columns: 9.5rem 1fr;
		gap: var(--e-4);
		align-items: baseline;
	}
}

.proximite__liste b {
	color: var(--c-orange-clair);
	font-weight: 700;
	font-stretch: 106%;
}


/* -----------------------------------------------------------------------------
   24. APPARITION AU DÉFILEMENT
   L'état masqué n'est posé que par le script (attribut data-reveal="attente").
   Sans JavaScript, rien n'est caché : la page reste entièrement lisible.
   -------------------------------------------------------------------------- */

[data-reveal="attente"] {
	opacity: 0;
	transform: translateY(20px);
}

[data-reveal="vu"] {
	opacity: 1;
	transform: none;
	transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--retard, 0ms);
}

@media (prefers-reduced-motion: reduce) {
	[data-reveal="attente"],
	[data-reveal="vu"] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Dérive très lente du fond de la scène : la page respire même sans vidéo. */
@media (prefers-reduced-motion: no-preference) {
	.scene__fond {
		animation: derive 34s ease-in-out infinite alternate;
	}
}

@keyframes derive {
	from {
		transform: scale(1) translate3d(0, 0, 0);
	}
	to {
		transform: scale(1.08) translate3d(-1.5%, -1%, 0);
	}
}

/* -----------------------------------------------------------------------------
   25. RUBAN DÉFILANT
   Les communes desservies, en continu. C'est la promesse de couverture dite
   par le mouvement plutôt que par une liste de plus.
   -------------------------------------------------------------------------- */

.ruban {
	position: relative;
	overflow: hidden;
	padding-block: var(--e-4);
	background: var(--c-bleu-fonce);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.ruban__piste {
	display: flex;
	width: max-content;
	gap: var(--e-6);
	padding-left: var(--e-6);
	list-style: none;
	margin: 0;
	will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
	/*
	 * L'animation ne démarre qu'une fois la piste doublée.
	 *
	 * Le défilement translate la piste de la moitié de sa largeur : la boucle
	 * n'est invisible que si cette moitié correspond exactement à une copie de
	 * la liste. Or la copie est faite par le script, après le premier rendu —
	 * tandis que l'animation, elle, partait dès l'application de la feuille de
	 * style, sur une piste encore simple.
	 *
	 * Pendant ces quelques centaines de millisecondes, « la moitié » désignait
	 * autre chose. Au moment où le doublon s'insérait, la largeur changeait et
	 * la piste sautait. SEB l'a décrit exactement : « à l'arrivée sur le site,
	 * l'espace entre Espace Diamant et Groupe Miniconi n'est pas le même
	 * qu'ailleurs ; après un tour de boucle, il est bon. » Le défaut ne se
	 * produisait qu'une fois, au tout début, et c'est pour cela qu'aucune
	 * capture ne l'avait montré.
	 *
	 * `[data-double]` est posé par le script juste après le clonage. En
	 * conditionnant l'animation à cet attribut, elle commence sur la bonne
	 * largeur — et sans script, la piste reste simplement immobile, ce qui vaut
	 * mieux qu'un défilement bancal.
	 */
	.ruban__piste[data-double] {
		animation: defile 64s linear infinite;
	}

	/*
	 * Le bandeau ne s'arrête plus au survol (demande de SEB, 25 août 2026).
	 * La pause avait été posée pour laisser le temps de lire un nom ; en
	 * pratique, le défilement s'interrompt dès qu'on traverse la zone avec la
	 * souris, ce qui donne l'impression d'un bandeau cassé plus que d'une
	 * courtoisie.
	 *
	 * Le moyen d'arrêter le mouvement reste offert à qui en a besoin : la règle
	 * `prefers-reduced-motion` ci-dessus ne lance simplement pas l'animation.
	 */
}

@keyframes defile {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(-50%, 0, 0);
	}
}

.ruban__piste li {
	display: flex;
	align-items: center;
	gap: var(--e-6);
	font-size: var(--t-sm);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8fb2cb;
	white-space: nowrap;
}

.ruban__piste li::after {
	content: "";
	flex: none;
	width: 16px;
	height: 5px;
	background: var(--c-orange);
	clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
	opacity: 0.8;
}

/*
 * Le bandeau sur téléphone — mesuré, pas estimé.
 *
 * SEB a signalé deux défauts : « la marque est cachée dès qu'elle arrive à la
 * moitié de la barre » et « les espaces entre les marques sont trop importants
 * sur mobile ». Une première correction faite au jugé n'a rien changé. Le
 * bandeau a donc été instrumenté et observé pendant huit secondes à 375 px,
 * en temps réel. Les chiffres :
 *
 *   largeur utile du bandeau ......... 360 px
 *   logo le plus large (Mufraggi) .... 223 px  — 62 % de la barre
 *   Espace Diamant ................... 195 px
 *   Groupe Miniconi, Laforêt ......... 186 px
 *   écart entre deux logos ............ 80 px  — 22 % de la barre
 *
 * Quatre-vingts pixels d'écart, c'est la somme de trois choses : l'espace de la
 * piste (32), le séparateur (16) et l'espace interne de l'item (32). À cette
 * échelle, un logo de 223 px suivi de 80 px de vide occupe 84 % de la barre :
 * on ne voit jamais qu'un logo et un fragment du suivant, et ce fragment entre
 * aussitôt dans le dégradé de bord. D'où l'impression que la marque est
 * masquée à mi-parcours — le dégradé n'y est pour rien, c'est la place qui
 * manque.
 *
 * Trois réglages, uniquement sous 48em :
 *   1. les logos passent à 120 px de large et 26 px de haut au maximum ;
 *   2. les écarts tombent à 44 px (14 + 16 + 14) ;
 *   3. le dégradé de bord passe de 6 % à 3 %, soit 11 px au lieu de 22.
 *
 * Résultat visé : environ 2,2 logos visibles à la fois au lieu de 1,4.
 */
@media (max-width: 47.99em) {
	.ruban--clients .ruban__piste {
		gap: 14px;
		padding-left: 14px;
	}

	.ruban--clients .ruban__piste li {
		gap: 14px;
	}

	.ruban--clients .confiance__logo {
		max-height: calc(26px * var(--echelle, 1));
		max-width: calc(120px * var(--echelle, 1));
	}

	.ruban--clients .confiance__nom {
		font-size: var(--t-sm);
	}

	/*
	 * Le dégradé de bord est resserré.
	 *
	 * Six pour cent de 360 px font 22 px de fondu de chaque côté. Sur une barre
	 * étroite, c'est autant de place prise à un logo qui n'en a déjà pas assez.
	 */
	.ruban--clients {
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
		mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
	}
}

/* -----------------------------------------------------------------------------
   26. VITRINE DES MÉTIERS
   Le remplacement de la grille de cartes. À gauche, la liste des dix métiers ;
   à droite, une fiche qui se recompose au survol. Les catégories affichées sont
   de vrais liens : depuis l'accueil, on entre directement au deuxième niveau du
   parcours, sans page intermédiaire.
   -------------------------------------------------------------------------- */

.vitrine {
	padding-block: var(--e-9);
	background: var(--c-blanc);
}

.vitrine__grille {
	display: grid;
	gap: var(--e-6);
}

@media (min-width: 64em) {
	.vitrine__grille {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
		gap: var(--e-8);
		align-items: start;
	}
}

.vitrine__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--c-trait);
}

.metier {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: var(--e-4);
	padding: var(--e-4) var(--e-4) var(--e-4) 0;
	border-bottom: 1px solid var(--c-trait);
	text-decoration: none;
	color: inherit;
	transition: padding-left 0.24s cubic-bezier(0.22, 1, 0.36, 1),
		background-color 0.2s ease;
}

.metier::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 0;
	height: 2px;
	background: var(--c-orange);
	transform: translateY(-50%);
	transition: width 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.metier__rang {
	flex-shrink: 0;
	width: 2ch;
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--c-trait-fort);
	transition: color 0.2s ease;
}

.metier__nom {
	font-size: clamp(1.15rem, 0.95rem + 0.85vw, 1.6rem);
	font-weight: 640;
	font-stretch: 104%;
	letter-spacing: -0.028em;
	line-height: 1.1;
	color: var(--c-bleu-fonce);
	margin: 0;
	transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.metier__accroche {
	display: block;
	margin-top: var(--e-2);
	font-size: var(--t-sm);
	line-height: 1.5;
	color: var(--c-encre-douce);
}

@media (min-width: 64em) {
	/* Sur grand écran, l'accroche vit dans la fiche : la liste reste nette. */
	.metier__accroche {
		display: none;
	}
}

.metier[data-actif],
.metier:hover,
.metier:focus-visible {
	padding-left: var(--e-5);
}

.metier[data-actif]::before,
.metier:hover::before,
.metier:focus-visible::before {
	width: var(--e-4);
}

.metier[data-actif] .metier__rang,
.metier:hover .metier__rang {
	color: var(--c-cta);
}

.metier[data-actif] .metier__nom,
.metier:hover .metier__nom {
	color: var(--c-bleu);
}

/* --- La fiche ------------------------------------------------------------ */

.vitrine__scene {
	display: none;
}

@media (min-width: 64em) {
	.vitrine__scene {
		display: block;
		position: sticky;
		top: calc(var(--hauteur-entete) + var(--e-5));
		min-height: 30rem;
	}
}

.fiche {
	display: none;
	padding: var(--e-7);
	background: var(--c-nuit);
	color: #b9cad7;
	border-left: 4px solid var(--c-orange);
}

.fiche[data-actif] {
	display: block;
}

.fiche__signe {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin-bottom: var(--e-6);
}

.fiche__signe span {
	display: block;
	height: 13px;
	background: var(--c-bleu-vif);
	clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 100%, 0 100%);
	width: var(--l);
	transform-origin: left center;
}

.fiche__signe span:nth-child(2n) {
	background: var(--c-orange);
}

.fiche[data-actif] .fiche__signe span {
	animation: barre 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
	animation-delay: calc(var(--i) * 55ms);
}

@keyframes barre {
	from {
		transform: scaleX(0.06);
		opacity: 0;
	}
	to {
		transform: scaleX(1);
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fiche[data-actif] .fiche__signe span {
		animation: none;
	}
}

.fiche__titre {
	color: #fff;
	font-size: var(--t-xl);
	font-stretch: 106%;
	margin-bottom: var(--e-3);
}

.fiche__texte {
	font-size: var(--t-base);
	line-height: 1.6;
	color: #b9cad7;
	margin-bottom: var(--e-6);
	max-width: 42ch;
}

.fiche__label {
	display: block;
	margin-bottom: var(--e-3);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-orange-clair);
}

.fiche__categories {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-2);
	list-style: none;
	margin: 0 0 var(--e-6);
	padding: 0;
}

.fiche__categories a {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 0.35rem 0.85rem;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--r);
	font-size: var(--t-sm);
	font-weight: 550;
	color: #dbe6ee;
	text-decoration: none;
	transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.fiche__categories a:hover {
	background: var(--c-orange);
	border-color: var(--c-orange);
	color: #fff;
}

.fiche__lien {
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
	font-size: var(--t-sm);
	font-weight: 680;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--c-orange-clair);
	text-decoration: none;
}

.fiche__lien svg {
	width: 16px;
	height: 16px;
	transition: transform 0.18s ease;
}

.fiche__lien:hover {
	color: #fff;
}

.fiche__lien:hover svg {
	transform: translateX(4px);
}

/* -----------------------------------------------------------------------------
   27. CARTE ANIMÉE
   Le tracé se dessine, puis les liaisons partent d'Ajaccio, puis les villes
   apparaissent. Sans JavaScript, aucun attribut n'est posé et la carte
   s'affiche telle quelle, complète.
   -------------------------------------------------------------------------- */

.carte-corse[data-anime] .carte-corse__contour {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}

.carte-corse[data-anime] .carte-corse__liaisons path {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	stroke-dasharray: 1;
	opacity: 0;
}

.carte-corse[data-anime] .carte-corse__point {
	opacity: 0;
	transform: scale(0.2);
	transform-origin: center;
	transform-box: fill-box;
}

.carte-corse[data-anime] .carte-corse__libelle {
	opacity: 0;
}

.carte-corse[data-anime="joue"] .carte-corse__contour {
	animation: tracer 1.7s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.carte-corse[data-anime="joue"] .carte-corse__liaisons path {
	animation: tracer-liaison 0.85s ease-out forwards;
	animation-delay: calc(1.15s + var(--rang, 0) * 140ms);
}

.carte-corse[data-anime="joue"] .carte-corse__point {
	animation: surgir 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) forwards;
	animation-delay: calc(0.75s + var(--rang, 0) * 55ms);
}

.carte-corse[data-anime="joue"] .carte-corse__libelle {
	animation: paraitre 0.6s ease forwards;
	animation-delay: 1.8s;
}

@keyframes tracer {
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes tracer-liaison {
	from {
		stroke-dashoffset: 1;
		opacity: 0;
	}
	to {
		stroke-dashoffset: 0;
		opacity: 0.8;
	}
}

@keyframes surgir {
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes paraitre {
	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.carte-corse[data-anime] .carte-corse__contour,
	.carte-corse[data-anime] .carte-corse__liaisons path,
	.carte-corse[data-anime] .carte-corse__point,
	.carte-corse[data-anime] .carte-corse__libelle {
		stroke-dashoffset: 0;
		opacity: 1;
		transform: none;
		animation: none;
	}

	.carte-corse[data-anime] .carte-corse__liaisons path {
		opacity: 0.8;
	}
}

.icone {
	flex-shrink: 0;
}

/* -----------------------------------------------------------------------------
   29. TABLEAUX
   -------------------------------------------------------------------------- */

.tableau {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--t-sm);
	background: #fff;
	border: 1px solid var(--c-trait);
}

.tableau th,
.tableau td {
	padding: var(--e-3) var(--e-4);
	text-align: left;
	border-bottom: 1px solid var(--c-trait);
	vertical-align: top;
}

.tableau thead th {
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #fff;
	background: var(--c-bleu-fonce);
	border-bottom: 0;
	white-space: nowrap;
}

.tableau tbody th {
	font-weight: 640;
	color: var(--c-bleu-fonce);
}

.tableau tbody tr:last-child th,
.tableau tbody tr:last-child td {
	border-bottom: 0;
}

.tableau tbody tr:hover {
	background: var(--c-papier);
}

/* -----------------------------------------------------------------------------
   31. LES VOIES — le choix, en pleine largeur
   Sur une page prestation, orienter le visiteur est le travail principal. Le
   choix passe donc devant l'argumentaire, et occupe toute la largeur.
   -------------------------------------------------------------------------- */

.choix-band {
	padding-block: var(--e-8);
	background: var(--c-papier);
	border-bottom: 1px solid var(--c-trait);
}

@media (min-width: 48em) {
	.choix-band {
		/*
		 * Cinq rem au-dessus, c'était cinq rem de plus avant le formulaire.
		 *
		 * La bande de choix est la seule chose que la page ait à faire : elle
		 * n'a pas besoin d'être annoncée par un écran de blanc. Le bas garde sa
		 * respiration, le haut la rend au visiteur. Avec le héros resserré et la
		 * description passée dessous, le formulaire d'une page catégorie remonte
		 * de 903 px à 665 px en 1440 × 900 — visible sans toucher à la souris,
		 * y compris sur un portable de 768 px de haut.
		 */
		padding-block: var(--e-7) var(--e-9);
	}
}

.choix-band__entete {
	max-width: 58ch;
	margin-bottom: var(--e-5);
}

.voies {
	display: grid;
	gap: var(--e-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 48em) {
	.voies {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 76em) {
	.voies {
		grid-template-columns: repeat(3, 1fr);
	}
}

.voie {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--e-4);
	height: 100%;
	min-height: 128px;
	padding: var(--e-5);
	background: #fff;
	border: 1px solid var(--c-trait-fort);
	border-radius: var(--r);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.16s ease, transform 0.16s ease;
}

.voie:hover,
.voie:focus-visible {
	border-color: var(--c-bleu);
	transform: translateY(-2px);
}

/* La signature de la voie : quatre barres qui se recomposent au survol. */
.voie__signe {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 34px;
	flex-shrink: 0;
	margin-top: 3px;
	color: var(--c-bleu);
}

.voie__signe span {
	display: block;
	height: 7px;
	width: var(--l);
	background: var(--c-bleu-vif);
	clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
	transform-origin: left center;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.2s ease;
	transition-delay: calc(var(--i) * 40ms);
}

.voie__signe span:nth-child(2n) {
	background: var(--c-orange);
}

.voie:hover .voie__signe span {
	transform: scaleX(1.28);
}

@media (prefers-reduced-motion: reduce) {
	.voie,
	.voie__signe span {
		transition: none;
	}

	.voie:hover {
		transform: none;
	}

	.voie:hover .voie__signe span {
		transform: none;
	}
}

.voie__corps {
	flex: 1;
	min-width: 0;
	padding-right: var(--e-5);
}

.voie__nom {
	display: block;
	margin-bottom: var(--e-2);
	font-size: var(--t-md);
	font-weight: 660;
	font-stretch: 102%;
	letter-spacing: -0.022em;
	line-height: 1.18;
	color: var(--c-bleu-fonce);
}

.voie__desc {
	display: block;
	font-size: var(--t-sm);
	line-height: 1.5;
	color: var(--c-encre-douce);
}

.voie__compte {
	display: block;
	margin-top: var(--e-3);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-trait-fort);
}

.voie__fleche {
	position: absolute;
	right: var(--e-5);
	bottom: var(--e-5);
	color: var(--c-trait-fort);
	transition: transform 0.2s ease, color 0.16s ease;
}

.voie:hover .voie__fleche,
.voie:focus-visible .voie__fleche {
	color: var(--c-cta);
	transform: translateX(5px);
}

/* La sortie « être conseillé » ne se confond pas avec les autres voies. */
.voie--conseil {
	background: var(--c-orange-voile);
	border-style: dashed;
	border-color: var(--c-trait-fort);
}

.voie--conseil:hover {
	background: #fbe7d1;
	border-color: var(--c-cta);
	border-style: solid;
}

.voie--conseil .voie__signe {
	color: var(--c-cta);
	align-items: flex-start;
	justify-content: center;
	width: 34px;
}

/* Signature décorative dans le héro d'une page prestation. */
.hero__signe {
	display: none;
}

@media (min-width: 62em) {
	.hero__signe {
		display: flex;
		flex-direction: column;
		gap: 9px;
		justify-content: center;
		opacity: 0.55;
	}

	/*
	 * Le sélecteur exclut le cas du visuel : sans cela, ces règles frappaient
	 * aussi le conteneur `<span class="visuel">` qui a remplacé les barres — la
	 * photographie se retrouvait écrasée à quinze pixels de haut, sur un fond
	 * bleu coupé en biais. Relevé à la capture, le 28 août 2026.
	 */
	.hero__signe:not(.hero__signe--visuel) span {
		display: block;
		height: 15px;
		width: var(--l);
		background: var(--c-bleu-vif);
		clip-path: polygon(0 0, 100% 0, calc(100% - 15px) 100%, 0 100%);
	}

	.hero__signe:not(.hero__signe--visuel) span:nth-child(2n) {
		background: var(--c-orange);
	}
}


/* -----------------------------------------------------------------------------
   32. SCHÉMAS À L'ÉCHELLE
   Le repère SVG est en centimètres réels : une unité vaut un centimètre. Les
   traits sont donc exprimés en unités du repère et non en pixels, ce qui les
   fait grossir avec le dessin — d'où le vector-effect qui les stabilise.
   -------------------------------------------------------------------------- */

.echelle {
	margin: 0;
}

.echelle svg {
	width: 100%;
	height: auto;
	overflow: visible;
}

.echelle__sol {
	stroke: var(--c-trait-fort);
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
}

.echelle__silhouette {
	fill: var(--c-trait-fort);
	opacity: 0.55;
}

.echelle__ecran rect {
	fill: var(--c-bleu-pale, #e2edf5);
	stroke: var(--c-bleu);
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
}

.echelle__ecran--actif rect {
	fill: rgba(229, 107, 0, 0.14);
	stroke: var(--c-orange);
	stroke-width: 2.5;
}

.echelle__pouces {
	fill: var(--c-bleu-fonce);
	font-family: var(--f);
	font-size: 17px;
	font-weight: 700;
	font-stretch: 106%;
}

.echelle__ecran--actif .echelle__pouces {
	fill: var(--c-cta);
}

.echelle__mesure {
	fill: var(--c-encre-tenue);
	font-family: var(--f);
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.echelle figcaption {
	margin-top: var(--e-4);
	font-size: var(--t-sm);
	line-height: 1.5;
	color: var(--c-encre-tenue);
	max-width: 62ch;
}

/* Déclinaison sur fond nuit, dans le verdict du sélecteur. */
.echelle--dynamique {
	margin-bottom: var(--e-5);
}

.echelle--dynamique .echelle__sol {
	stroke: rgba(255, 255, 255, 0.32);
}

.echelle--dynamique .echelle__silhouette {
	fill: #fff;
	opacity: 0.34;
}

.echelle--dynamique .echelle__ecran rect {
	fill: rgba(229, 107, 0, 0.24);
	stroke: var(--c-orange-clair);
	transition: width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
		height 0.32s cubic-bezier(0.22, 1, 0.36, 1),
		x 0.32s cubic-bezier(0.22, 1, 0.36, 1),
		y 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.echelle--dynamique .echelle__mesure {
	fill: #9fb6c6;
}

@media (prefers-reduced-motion: reduce) {
	.echelle--dynamique .echelle__ecran rect {
		transition: none;
	}
}

/* Cadre du schéma : le dessin respire, et défile seul s'il déborde. */
.echelle-cadre {
	padding: var(--e-6) var(--e-5);
	background: #fff;
	border: 1px solid var(--c-trait);
	border-radius: var(--r);
	overflow-x: auto;
}

.section--alt .echelle-cadre {
	background: #fff;
}

/* Retour à l'étape précédente, sous la bande de choix. */
.choix-band__retour {
	margin: var(--e-5) 0 0;
	font-size: var(--t-sm);
}
/* -----------------------------------------------------------------------------
   34. LA SIGNATURE
   Le nom de l'entreprise, en haut de la première page, avant toute autre chose.

   L'animation est entièrement en CSS. Trois raisons, et elles comptent : le nom
   reste dans le document pour un moteur de recherche, il s'affiche même si le
   script échoue, et le navigateur peut composer le mouvement hors du fil
   principal — donc sans saccade au chargement, qui est précisément le moment le
   plus chargé.

   Le masque de chaque mot est coupé en biais : c'est la barre du « E » du logo,
   employée ici comme bord de révélation plutôt que comme ornement.
   -------------------------------------------------------------------------- */

/* Le panneau se cale en haut de la scène sur mobile — le nom de l'entreprise
   doit être lu à l'arrivée, pas après un écran de défilement. En grand écran il
   se recentre verticalement, où la place ne manque pas. */
.scene__bas {
	margin-top: 0;
}

/*
 * Le panneau reste en haut sur toutes les tailles d'écran. Il était centré
 * verticalement en grand écran ; SEB l'a voulu en tête, et la scène a été
 * raccourcie en conséquence pour ne pas laisser de vide sous lui.
 *
 * La hauteur plancher vaut 56,25 % de la largeur, c'est-à-dire exactement le
 * rapport 16/9 de la vidéo : la scène a alors la forme de l'image, et
 * `object-fit: cover` n'a plus rien à rogner. SEB a demandé le 26 août que la
 * vidéo s'affiche à son format d'origine ; c'est ici que ça se joue, pas dans
 * les propriétés de l'élément vidéo.
 *
 * C'est un plancher, jamais un plafond : si le panneau demande plus de place —
 * sur un écran large mais court, ou si le texte s'allonge —, la scène grandit et
 * rien n'est coupé. Le rognage réapparaît alors, mais à la marge, et c'est le
 * seul compromis possible : figer la hauteur couperait le texte.
 */
/* Un écran plein, la barre du haut en plus. */
@media (min-width: 62em) {
	.scene {
		min-height: 100svh;
	}
}

/*
 * Rapport 16/9 strict : la scène prend exactement la forme de la vidéo, qui
 * n'est donc plus rognée du tout. Mesuré à 0,0 % en 1280, 1440 et 1920.
 *
 * Le rapport est calculé sur la largeur réelle de la scène, et non en `vw` :
 * `vw` inclut la barre de défilement et laissait 1 % d'écart.
 *
 * Le seuil est à 80em et non à 62em parce qu'en dessous, le texte demande plus
 * de hauteur que le 16/9 n'en offre : à 1024 px de large, il débordait de 67 px
 * et se faisait couper ; à 1248 il en dépassait encore de 6. `min-height: fit-content` ne protège de rien ici — sur
 * un bloc, `aspect-ratio` l'emporte. Sous 80em, la scène reprend donc sa hauteur
 * pilotée par le contenu, et la vidéo est rognée à la marge.
 */
@media (min-width: 80em) {
	.scene {
		/* La largeur est figée avant le rapport. Sans cette ligne, le plafond de
		   hauteur se reporte sur la largeur — le navigateur rétrécit la scène
		   pour conserver le 16/9 — et le bandeau cesse d'occuper tout l'écran :
		   1769 px de scène sur 1920 mesurés, soit 151 px de fond nu à droite. */
		width: 100%;

		/*
		 * 16/9 strict, sans plafond de hauteur.
		 *
		 * Un plafond avait été posé pour que la scène tienne dans l'écran barre
		 * du haut comprise. SEB a précisé le 26 août : la barre du haut ne
		 * compte pas. La scène occupe donc un écran plein, la barre par-dessus,
		 * et la vidéo garde son rapport exact — zéro rognage à toutes les
		 * tailles mesurées.
		 *
		 * La largeur figée juste au-dessus reste nécessaire : sans elle, le
		 * navigateur reporterait le rapport sur la largeur au moindre autre
		 * plafond, et la scène cesserait d'occuper tout l'écran.
		 */
		/*
		 * Un écran plein, et la barre du haut par-dessus le marché. SEB,
		 * 26 août 2026 : « la vidéo fait la taille d'un écran de navigation,
		 * donc on doit légèrement descendre en dessous de la barre de menu pour
		 * avoir la vidéo qui prend tout l'écran ».
		 *
		 * C'est bien `100svh` et non `100svh` moins la barre : la scène commence
		 * sous celle-ci, si bien qu'à l'arrivée on en voit la hauteur de l'écran
		 * moins la barre, et qu'un défilement de quatre-vingt-cinq pixels suffit
		 * à la faire occuper l'écran entier.
		 *
		 * La hauteur étant imposée par l'écran, le rapport de la vidéo ne l'est
		 * plus : `object-fit: cover` rogne l'écart. Il est faible sur un écran
		 * 16/9 — 0,8 % — et sensible sur un 16/10, dont la forme s'éloigne de
		 * celle de l'image.
		 */
		height: 100svh;
		min-height: 0;
	}
}

/*
 * Il y avait ici un resserrement du texte sur les écrans courts : la scène
 * était alors plafonnée à la hauteur de l'écran moins la barre du haut, et le
 * texte ne tenait pas dans le reste.
 *
 * Il est retiré. La scène fait désormais un écran plein, la place ne manque
 * plus — et le titre réduit s'écrivait sur deux lignes au lieu de trois, ce que
 * SEB n'a pas voulu : « Solutions Expert Bureautique en trois lignes était
 * bien ». Le nom garde donc sa taille pleine, et sa composition avec.
 */

.signature {
	/*
	 * Un mot par ligne, toujours. La composition était laissée au retour
	 * automatique : à 1024 px de large, « SOLUTIONS EXPERT » tenait sur une
	 * seule ligne et le nom se lisait sur deux. SEB tient aux trois lignes —
	 * c'est la composition du logo.
	 */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	row-gap: 0;
	margin: 0;
	color: #fff;
	/* Le mot le plus long — « BUREAUTIQUE », onze caractères — doit tenir dans
	   la largeur du panneau sur un téléphone de 375 px, soit environ 287 px une
	   fois les gouttières et les marges internes retirées. C'est lui qui fixe le
	   plancher de cette échelle, pas la lisibilité. */
	font-size: clamp(1.55rem, 0.85rem + 3.4vw, 4.3rem);
	font-stretch: 116%;
	font-weight: 700;
	letter-spacing: -0.005em;
	line-height: 1;
	text-transform: uppercase;
}

/*
 * L'ombre du titre est portée par le conteneur, et non par le texte.
 *
 * Une `text-shadow` se dessine à l'intérieur de la boîte du mot — donc à
 * l'intérieur du masque de l'animation, qui la coupe net. SEB a vu le résultat
 * le 26 août 2026 : un rectangle plus sombre se dessinait autour de chaque mot,
 * exactement aux limites du masque.
 *
 * `filter: drop-shadow()` s'applique après le découpage, sur ce qui reste
 * visible : l'ombre épouse la forme des lettres et rien d'autre. Trois couches
 * de rayons croissants, comme pour le reste du texte, pour qu'aucune ne
 * s'arrête au même endroit.
 */
.signature {
	text-shadow: none;
	filter:
		drop-shadow(0 1px 2px rgba(7, 18, 26, 0.5))
		drop-shadow(0 3px 18px rgba(7, 18, 26, 0.55))
		drop-shadow(0 8px 48px rgba(7, 18, 26, 0.5));
}

/* Le masque. `overflow: hidden` seul suffirait à cacher le mot ; le clip-path
   lui donne le bord en biais du logo. */
.signature__mot {
	display: inline-block;
	overflow: hidden;
	clip-path: polygon(0 0, 100% 0, calc(100% - 0.16em) 100%, 0 100%);
}

.signature__mot > span {
	display: inline-block;
	will-change: transform;
}

/* Sous 24 em, la largeur étendue coûte plus qu'elle ne rapporte : on revient à
   la largeur normale pour gagner les quelques pixels qui manquent. */
@media (max-width: 24em) {
	.signature {
		font-stretch: 100%;
	}
}

/* Le troisième mot porte l'accent : c'est le métier, pas la raison sociale. */
.signature__mot:nth-child(3) > span {
	color: var(--c-orange-clair);
}

.signature__filet {
	display: block;
	height: 3px;
	margin-top: var(--e-4);
	margin-bottom: var(--e-5);
	background: linear-gradient(90deg, var(--c-orange) 0%, rgba(229, 107, 0, 0) 100%);
	clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
	transform-origin: left center;
}

@media (prefers-reduced-motion: no-preference) {
	.signature__mot > span {
		transform: translateY(108%);
		animation: signature-monte 780ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
		/* 110 ms entre deux mots : assez pour lire la succession, trop court pour
		   qu'on ait le temps de l'attendre. */
		animation-delay: calc(var(--i) * 110ms + 120ms);
	}

	.signature__filet {
		transform: scaleX(0);
		animation: signature-filet 900ms cubic-bezier(0.22, 0.61, 0.36, 1) 420ms forwards;
	}
}

@keyframes signature-monte {
	from { transform: translateY(108%); }
	to   { transform: translateY(0); }
}

@keyframes signature-filet {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/* -----------------------------------------------------------------------------
   35. BANDEAU DE CONFIANCE
   Les clients cités en référence, à la place de la liste des communes. Tant
   qu'un logo n'est pas fourni, le nom est composé typographiquement : onze
   noms alignés dans la même graisse forment une ligne cohérente, là où onze
   logos d'origines différentes formeraient une mosaïque.
   -------------------------------------------------------------------------- */

.confiance {
	background: var(--c-bleu-fonce);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	/* Resserré le 26 août 2026 : l'aplat bleu au-dessus du libellé était trop
	   large et coupait la scène du bandeau de noms qu'elle amène. */
	padding-top: var(--e-3);
}

.confiance__intro {
	margin: 0 auto;
	padding-inline: var(--gouttiere);
	max-width: var(--largeur);
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #7fa3bd;
}

.ruban--clients {
	border-bottom: 0;
	padding-block: var(--e-3) var(--e-4);
}

.confiance__nom {
	font-size: var(--t-md);
	font-stretch: 108%;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: none;
	color: #cfe0ee;
}

/* Un logo fourni est ramené au même poids visuel que les noms composés : sans
   cela, le premier logo déposé écraserait les dix noms restés en texte. */
/*
 * Les logos sont affichés en silhouette blanche : `brightness(0)` puis
 * `invert(1)` ramènent onze identités graphiques à une seule matière. C'est ce
 * qui empêche le bandeau de virer à la mosaïque.
 *
 * Deux réglages viennent d'un défaut signalé par SEB le 27 août 2026.
 *
 * L'opacité était à 0,86. Elle se cumulait avec celle du fichier : un logo
 * livré en semi-transparence — JB Clim — ressortait franchement gris à côté des
 * autres. Elle passe à 1, et c'est le fichier qui a été densifié.
 *
 * La hauteur était fixe, à 34 px. Un logo presque carré s'affichait alors deux
 * fois plus petit qu'un logo très large, et un logo très détaillé — Espace
 * Diamant, 1200 px de large — devenait illisible. On borne désormais les deux
 * dimensions et on laisse chaque logo prendre celle qui le contraint : les très
 * larges butent sur la largeur, les carrés sur la hauteur, et tous portent à peu
 * près la même quantité de dessin.
 */
.confiance__logo {
	display: block;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: brightness(0) invert(1);

	/*
	 * La correction de taille par logo — déclarée dans data/clients.php — agit
	 * sur la boîte, et non plus par `transform: scale()`.
	 *
	 * Une mise à l'échelle par transformation ne change pas la place occupée :
	 * le logo débordait de sa boîte et venait recouvrir le séparateur orange du
	 * voisin. C'est ce qui faisait qu'entre Laforêt et Barnes il n'y avait plus
	 * de séparation, alors qu'elle est posée pour chacun sans exception — signalé
	 * par SEB le 28 août 2026.
	 */
	max-height: calc(38px * var(--echelle, 1));
	max-width: calc(186px * var(--echelle, 1));

	/*
	 * Ni le logo ni son séparateur ne se laissent comprimer.
	 *
	 * Ce sont deux éléments flexibles dans une même ligne : par défaut, ils
	 * cèdent quand la place manque. Mesuré au navigateur, le logo Laforêt était
	 * réduit à 48 px de large et son séparateur à **zéro** — d'où la séparation
	 * manquante entre Laforêt et Barnes que SEB a relevée. Les autres logos, de
	 * définition plus grande, résistaient mieux et masquaient le défaut.
	 */
	flex: none;
}
/* -----------------------------------------------------------------------------
   37. SORTIE DIRECTE DE L'ENTONNOIR
   Le devis avant la liste des options, pas après : celui qui sait déjà ce qu'il
   veut n'a aucune raison de traverser deux écrans de plus.
   -------------------------------------------------------------------------- */

.entonnoir__direct {
	margin-bottom: var(--e-5);
}

.entonnoir__promesse {
	display: flex;
	align-items: center;
	gap: var(--e-2);
	margin: var(--e-3) 0 0;
	font-size: var(--t-sm);
	line-height: 1.45;
	color: var(--c-encre-douce);
}

.entonnoir__promesse svg {
	flex: none;
	color: var(--c-cta);
}

/* Le séparateur « ou » : un filet interrompu par le mot, plutôt qu'un titre. */
.entonnoir__ou {
	display: flex;
	align-items: center;
	gap: var(--e-4);
	margin: 0 0 var(--e-5);
	font-size: var(--t-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-encre-tenue);
}

.entonnoir__ou::before,
.entonnoir__ou::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--c-trait);
}

/* -----------------------------------------------------------------------------
   38. LE REPLI DU FORMULAIRE
   Les champs facultatifs, rangés derrière un seul intitulé. `<details>` fait le
   travail sans une ligne de script : il s'ouvre au clavier, il est annoncé aux
   lecteurs d'écran, et il fonctionne script désactivé.
   -------------------------------------------------------------------------- */

.form__plus {
	margin-bottom: var(--e-5);
	border: 1px solid var(--c-trait);
	border-left: 3px solid var(--c-trait-fort);
	background: var(--c-papier);
}

.form__plus > summary {
	padding: var(--e-4) var(--e-5);
	font-size: var(--t-sm);
	font-weight: 600;
	color: var(--c-bleu);
	cursor: pointer;
	list-style: none;
	user-select: none;
}

/* Le triangle par défaut est remplacé par un signe qui suit l'état ouvert. */
.form__plus > summary::-webkit-details-marker {
	display: none;
}

.form__plus > summary::before {
	content: "+";
	display: inline-block;
	width: 1.1em;
	font-weight: 700;
}

.form__plus[open] > summary::before {
	content: "–";
}

.form__plus > summary span {
	font-weight: 400;
	color: var(--c-encre-tenue);
}

.form__plus > summary:focus-visible {
	outline: 2px solid var(--c-focus);
	outline-offset: -2px;
}

.form__plus-corps {
	padding: 0 var(--e-5) var(--e-5);
	border-top: 1px solid var(--c-trait);
	padding-top: var(--e-5);
}

/* -----------------------------------------------------------------------------
   39. LA PREUVE LOCALE
   Sur une page communale, la référence nommée est l'élément le plus important
   du bloc : elle se distingue du paragraphe de présence, qui décrit, alors
   qu'elle atteste.
   -------------------------------------------------------------------------- */

.preuve-locale {
	display: flex;
	align-items: flex-start;
	gap: var(--e-3);
	margin: var(--e-5) 0 0;
	padding: var(--e-4) var(--e-5);
	background: var(--c-bleu-voile);
	border-left: 3px solid var(--c-bleu);
	font-size: var(--t-base);
	line-height: 1.55;
}

.preuve-locale__marque {
	flex: none;
	margin-top: 0.15em;
	color: var(--c-bleu);
}

/* -----------------------------------------------------------------------------
   40. LA DERNIÈRE VOIE MÈNE AU DEVIS
   Sur la page catégorie, choisir une solution ouvre le formulaire. La fiche
   détaillée reste accessible par un lien discret sous la carte — c'est aussi
   par lui que les 160 pages produit gardent leur lien entrant depuis cette
   page.
   -------------------------------------------------------------------------- */

.voie__action {
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
	margin-top: var(--e-3);
	font-size: var(--t-sm);
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--c-cta);
}

/*
 * La liste des gammes du bandeau de choix a disparu avec l'étape qu'elle
 * portait (26 août 2026), puis le bouton qui l'avait remplacée : c'est le
 * formulaire lui-même qui occupe désormais cette place, déjà ouvert.
 *
 * On le borne en largeur. Un formulaire étalé sur toute la page se lit mal —
 * l'œil perd la ligne entre l'étiquette et le champ — et il ne se lit pas non
 * plus comme quelque chose qu'on remplit en trente secondes.
 */
.choix-band__formulaire {
	max-width: 34rem;
}

.choix-band__formulaire .entonnoir__promesse {
	margin-bottom: var(--e-5);
}

.voie__fiche {
	align-self: flex-start;
	margin-top: var(--e-2);
	padding: var(--e-2) 0;
	font-size: var(--t-sm);
	color: var(--c-encre-tenue);
	text-decoration-color: var(--c-trait-fort);
	text-underline-offset: 3px;
}

.voie__fiche:hover,
.voie__fiche:focus-visible {
	color: var(--c-bleu);
	text-decoration-color: currentColor;
}

/* -----------------------------------------------------------------------------
   41. ENRICHISSEMENT DES PAGES DE RÉFÉRENCEMENT
   Les critères de choix et le « pour qui », ajoutés après l'audit du 24 août.
   Deux blocs qui doivent se distinguer du corps de texte sans le concurrencer :
   ce sont des repères de lecture, pas des encarts publicitaires.
   -------------------------------------------------------------------------- */

.criteres {
	list-style: none;
	counter-reset: none;
	margin: var(--e-5) 0 0;
	padding: 0;
	display: grid;
	gap: var(--e-4);
}

.criteres__item {
	display: flex;
	gap: var(--e-4);
	padding: var(--e-4) 0;
	border-top: 1px solid var(--c-trait);
	line-height: 1.6;
}

.criteres__item:last-child {
	border-bottom: 1px solid var(--c-trait);
}

.criteres__rang {
	flex: none;
	width: 1.9rem;
	font-size: var(--t-lg);
	font-stretch: 112%;
	font-weight: 700;
	line-height: 1.2;
	color: var(--c-orange);
}

/* « Pour qui » : la seule phrase de la fiche produit qui ne soit vraie que
   d'elle. Elle est posée en tête de page, avant les points clés. */
.pour-qui {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--e-2) var(--e-3);
	margin: var(--e-5) 0;
	padding: var(--e-4) var(--e-5);
	background: var(--c-orange-voile);
	border-left: 3px solid var(--c-cta);
	font-size: var(--t-base);
	line-height: 1.6;
}

.pour-qui__etiquette {
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-cta-appui);
}

/* Sur la page catégorie, la même phrase sert de complément à la description :
   plus discrète, elle ne doit pas rivaliser avec le titre de la carte. */
.carte__pour-qui {
	margin: var(--e-3) 0 0;
	padding-top: var(--e-3);
	border-top: 1px solid var(--c-trait);
	font-size: var(--t-sm);
	line-height: 1.55;
	color: var(--c-encre-douce);
}

/* -----------------------------------------------------------------------------
   42. (libre)
   L'index des solutions a été retiré le 1er septembre 2026 : il pointait vers
   des ancres de pages déjà listées plus haut, depuis que les fiches produit
   ont été supprimées (D-49). Ses styles partent avec lui — du CSS qui ne
   correspond plus à aucun élément est du poids que chaque visiteur télécharge.
   -------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   43. SERVICE APRÈS-VENTE
   La page de panne. Elle doit se distinguer du reste du site sans changer de
   registre : quelqu'un dont le copieur est arrêté n'a pas envie d'une page
   commerciale, il veut un formulaire et un numéro.
   -------------------------------------------------------------------------- */

/* Le lien SAV porte un point d'appel : c'est la seule entrée du menu qu'on
   cherche dans l'urgence. */
.nav__lien--sav {
	position: relative;
}

/*
 * Le SAV n'a plus de marque particulière.
 *
 * Il portait une pastille orange en haut à droite, déclarée sur `::after` — le
 * même pseudo-élément que le trait de survol de `.nav__lien`. Elle l'écrasait :
 * le SAV était la seule entrée de la barre sans soulignement, et la seule à
 * afficher une marque en haut. SEB l'a signalé le 27 août 2026.
 *
 * La pastille aurait pu être déplacée sur `::before`. Elle est simplement
 * retirée : une entrée de menu qui se distingue des six autres doit avoir une
 * raison de le faire, et « c'est le SAV » n'en est pas une — la page se trouve
 * aussi bien par son libellé.
 */

/* Choix d'urgence : des boutons pleine largeur plutôt que des ronds minuscules.
   Cibles tactiles de 44 px, comme partout sur le site. */
.choix-radio {
	display: grid;
	gap: var(--e-2);
}

.choix-radio__option {
	display: flex;
	align-items: center;
	gap: var(--e-3);
	min-height: 44px;
	padding: var(--e-3) var(--e-4);
	background: var(--c-blanc);
	border: 1px solid var(--c-trait);
	cursor: pointer;
	line-height: 1.4;
	transition: border-color 140ms ease, background 140ms ease;
}

.choix-radio__option:hover {
	border-color: var(--c-bleu);
}

.choix-radio__option:has(input:checked) {
	border-color: var(--c-cta);
	border-left-width: 3px;
	background: var(--c-orange-voile);
}

.choix-radio__option input {
	flex: none;
	width: 18px;
	height: 18px;
	accent-color: var(--c-cta);
}

/* La carte d'appel d'urgence : la seule du site à porter un fond soutenu. */
.carte--urgence {
	background: var(--c-orange-voile);
	border-color: var(--c-cta);
	border-left-width: 3px;
}

.liste-etapes {
	margin: var(--e-4) 0 0;
	padding-left: 1.2rem;
	display: grid;
	gap: var(--e-3);
	font-size: var(--t-sm);
	line-height: 1.55;
	color: var(--c-encre-douce);
}

.liste-etapes li::marker {
	color: var(--c-orange);
	font-weight: 700;
}

/* Le rappel de service, repris de la scène d'accueil mais sur fond clair. */
.scene__pied--clair li {
	color: var(--c-encre-douce);
}

/* -----------------------------------------------------------------------------
   44. PROFILS OFFICIELS AU PIED DE PAGE
   Ils n'existaient que dans la donnée structurée : un moteur les voyait, pas un
   visiteur. Le client lui-même ne les a pas trouvés — c'est le meilleur test
   qui soit.
   -------------------------------------------------------------------------- */

.pied__reseaux {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-4);
	margin: var(--e-4) 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--t-sm);
}

.pied__externe {
	font-size: 0.8em;
	opacity: 0.7;
}

/* Les points clés remontés sur la page catégorie avec la suppression des fiches
   produit : plus compacts qu'en pleine page, ils accompagnent la description
   sans la noyer. */
.liste-check--compacte {
	margin-top: var(--e-3);
	font-size: var(--t-sm);
	line-height: 1.5;
}


/* -----------------------------------------------------------------------------
   38. SCHÉMAS DE MÉTIER
   Dix dessins au trait, sur la même grille, qui se tracent à l'ouverture de leur
   fiche. Le parti pris est celui du plan d'atelier : une épaisseur unique, aucun
   remplissage sauf l'accent, et des repères de construction apparents.

   Une première version en aplats a été refusée — « ça fait trop IA ». Le vecteur
   plat aux coins arrondis est devenu la langue par défaut de tout ce qui est
   produit en série ; bien exécuté, il ne ressemble plus à personne.
   -------------------------------------------------------------------------- */

.illu {
	display: block;
	width: 100%;
	max-width: 168px;
	height: auto;
	overflow: visible;

	--illu-trait: #cfe0ee;
	--illu-plan: rgba(207, 224, 238, 0.34);
	--illu-accent: var(--c-orange-clair);
}

/* Sur fond clair, deux variables suffisent à faire basculer les dix dessins. */
.section--alt .illu,
.vitrine .fiche--claire .illu {
	--illu-trait: var(--c-bleu-fonce);
	--illu-plan: rgba(0, 58, 94, 0.3);
}

.illu__plan {
	stroke: var(--illu-plan);
	stroke-width: 1.4;
	fill: none;
	stroke-linecap: round;
}

.illu__trace {
	stroke: var(--illu-trait);
	stroke-width: 2.6;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.illu__accent {
	stroke: var(--illu-accent);
	stroke-width: 2.6;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/*
 * Le tracé.
 *
 * `pathLength="1"` est posé sur chaque chemin par la fonction d'affichage : la
 * longueur réelle du dessin devient sans importance, et une seule règle anime
 * aussi bien un cercle qu'une polyligne de trente points. Sans cela il faudrait
 * mesurer chaque chemin en JavaScript.
 *
 * L'état par défaut est **tracé**. C'est délibéré : si le script n'agit pas, ou
 * si la fiche n'est jamais activée, le schéma est visible et complet. Ce n'est
 * qu'à l'ouverture d'une fiche qu'il se redessine.
 */
.illu__trace > * {
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
}

.fiche[data-actif] .illu__trace > * {
	animation: illu-tracer 900ms cubic-bezier(0.65, 0, 0.35, 1) backwards;
}

/* Le retard échelonné donne l'ordre du dessin : la boîte avant ce qu'elle
   contient, l'objet avant ses cotes. */
.fiche[data-actif] .illu__trace > *:nth-child(1) { animation-delay: 40ms; }
.fiche[data-actif] .illu__trace > *:nth-child(2) { animation-delay: 160ms; }
.fiche[data-actif] .illu__trace > *:nth-child(3) { animation-delay: 260ms; }
.fiche[data-actif] .illu__trace > *:nth-child(4) { animation-delay: 340ms; }
.fiche[data-actif] .illu__trace > *:nth-child(5) { animation-delay: 410ms; }
.fiche[data-actif] .illu__trace > *:nth-child(6) { animation-delay: 470ms; }
.fiche[data-actif] .illu__trace > *:nth-child(7) { animation-delay: 520ms; }
.fiche[data-actif] .illu__trace > *:nth-child(8) { animation-delay: 560ms; }
.fiche[data-actif] .illu__trace > *:nth-child(9) { animation-delay: 600ms; }

@keyframes illu-tracer {
	from { stroke-dashoffset: 1; }
	to   { stroke-dashoffset: 0; }
}

/* Le plan se pose avant l'objet, sans se tracer : c'est la feuille, pas le
   dessin. */
.fiche[data-actif] .illu__plan {
	animation: illu-apparaitre 700ms ease backwards;
}

@keyframes illu-apparaitre {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ── L'accent, et son mouvement propre ─────────────────────────────────── */

.illu__accent {
	animation-delay: 900ms;
}

/* Le curseur d'un poste allumé. */
.illu__curseur {
	fill: var(--illu-accent);
	stroke: none;
	animation: illu-clignoter 1.6s steps(1, end) infinite 900ms;
}

@keyframes illu-clignoter {
	0%, 55%  { opacity: 1; }
	56%, 99% { opacity: 0.15; }
}

/* La feuille qui sort du bac de réception, en boucle. */
.illu__feuille {
	fill: var(--illu-accent);
	stroke: none;
	animation: illu-sortir 3.4s ease-in-out infinite 900ms;
}

@keyframes illu-sortir {
	0%, 12%   { transform: translateX(22px); opacity: 0; }
	32%, 74%  { transform: translateX(0); opacity: 1; }
	92%, 100% { transform: translateX(-6px); opacity: 0; }
}

/* Le pointeur qui vient cliquer. */
.illu__pointeur {
	fill: var(--illu-accent);
	stroke: none;
	animation: illu-cliquer 3s ease-in-out infinite 900ms;
}

@keyframes illu-cliquer {
	0%, 40%   { transform: translate(0, 0); }
	52%, 60%  { transform: translate(-3px, -4px); }
	72%, 100% { transform: translate(0, 0); }
}

/* Le triangle de lecture. */
.illu__lecture {
	fill: var(--illu-accent);
	stroke: none;
	transform-origin: 42px 32px;
	animation: illu-battre 2.6s ease-in-out infinite 900ms;
}

@keyframes illu-battre {
	0%, 70%, 100% { transform: scale(1); }
	82%           { transform: scale(1.16); }
}

/* La serrure qui se referme. */
.illu__serrure {
	transform-origin: 60px 46px;
	animation: illu-verrouiller 3.6s ease-in-out infinite 900ms;
}

@keyframes illu-verrouiller {
	0%, 60%, 100% { transform: translateY(0); }
	74%           { transform: translateY(-3px); }
}

/* L'onde qui part — téléphonie et communication. */
.illu__onde {
	animation: illu-emettre 2.4s ease-out infinite 900ms;
}

@keyframes illu-emettre {
	0%        { opacity: 0.15; transform: scale(0.86); }
	45%       { opacity: 1; transform: scale(1); }
	100%      { opacity: 0.15; transform: scale(1.1); }
}

.illu__onde {
	transform-origin: 78px 40px;
}

/* Le document qui descend dans le bac. */
.illu__descente {
	animation: illu-descendre 2.8s ease-in-out infinite 900ms;
}

@keyframes illu-descendre {
	0%, 20%   { transform: translateY(-5px); opacity: 0.35; }
	45%, 70%  { transform: translateY(0); opacity: 1; }
	100%      { transform: translateY(5px); opacity: 0.35; }
}

/* La coche de validation, qui se trace après le reste. */
.illu__coche {
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
}

.fiche[data-actif] .illu__coche {
	animation: illu-tracer 520ms cubic-bezier(0.65, 0, 0.35, 1) backwards 950ms;
}

/* Le siège d'un poste occupé : un pixel de respiration, pas davantage. */
.illu__siege {
	fill: var(--illu-accent);
	stroke: none;
	transform-origin: 67px 60px;
	animation: illu-respirer 4s ease-in-out infinite 900ms;
}

@keyframes illu-respirer {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-1.5px); }
}

/*
 * Mouvement réduit : plus rien ne bouge, et tout reste lisible. Le schéma est
 * déjà tracé, l'accent est à sa place — c'est l'état d'arrivée de chaque
 * animation, pas un état dégradé.
 */
@media (prefers-reduced-motion: reduce) {
	.illu__plan,
	.illu__trace > *,
	.illu__accent,
	.illu__accent > *,
	.fiche[data-actif] .illu__trace > *,
	.fiche[data-actif] .illu__coche,
	.fiche[data-actif] .illu__plan {
		animation: none;
		opacity: 1;
		transform: none;
		stroke-dashoffset: 0;
	}
}

.fiche__illu {
	margin-bottom: var(--e-6);
}
/* -----------------------------------------------------------------------------
   40. CIBLES TACTILES ET LISIBILITÉ SUR ÉCRAN TACTILE
   Relevé le 27 août 2026, en pilotant un cadre de 390 px sur seize pages. Le
   débordement horizontal était nul partout — c'est le principal risque mobile,
   et il était propre. Restaient deux familles de défauts, corrigées ici.
   -------------------------------------------------------------------------- */

@media (pointer: coarse) {
	/*
	 * Un titre de carte qui est un lien mesurait vingt pixels de haut : c'est
	 * la hauteur de son texte, rien de plus. La WCAG 2.2 demande vingt-quatre
	 * pixels au minimum, et n'en dispense que les liens posés au fil d'une
	 * phrase — ce que n'est pas un titre.
	 *
	 * On agrandit la zone touchable sans toucher à l'apparence : le lien passe
	 * en bloc en ligne et gagne de l'air au-dessus et en dessous, absorbé par
	 * la marge du titre.
	 */
	.carte__titre > a,
	.fiche__categories > li > a,
	.liste-liens > li > a {
		display: inline-block;
		padding-block: 7px;
	}

	.carte__titre {
		margin-block: -7px 0;
	}

	/*
	 * Les libellés et aides des formulaires étaient à 12,5 px. C'est lisible sur
	 * un écran de bureau, à cinquante centimètres ; ça ne l'est pas sur un
	 * téléphone tenu à bout de bras, et ce sont précisément les textes qu'il faut
	 * lire pour remplir une demande.
	 */
	.champ__label,
	.champ__aide,
	.form__plus summary {
		font-size: 0.875rem;
	}

	.champ__aide {
		line-height: 1.5;
	}
}

/* Le pied de page descendait à 11,5 px. Deux dixièmes de plus ne changent rien
   à la hiérarchie et rendent la mention lisible. */
.pied__externe {
	font-size: 0.78rem;
}

@media (pointer: coarse) {
	/*
	 * Deux familles de textes restaient sous treize pixels après la première
	 * passe : les étiquettes en capitales des sections, et le pied de page.
	 *
	 * Les capitales espacées se lisent mieux que du bas-de-casse à taille
	 * égale, mais pas au point de justifier douze pixels et demi sur un
	 * téléphone. Le pied porte les mentions légales et les horaires : ce n'est
	 * pas du texte décoratif.
	 */
	.etiquette,
	.pied__titre,
	.pied li,
	.pied p {
		font-size: 0.8125rem;
	}
}

/* -----------------------------------------------------------------------------
   45. LES VISUELS DE MÉTIER — les photographies détourées

   SEB a photographié son propre matériel et l'a détouré : le portable dont
   l'écran porte le nom du métier, le multifonction de l'atelier, le totem, la
   borne tactile à ses couleurs, un siège. C'est la réponse la plus directe au
   reproche qui avait fait retirer les icônes en aplats — « ça fait trop IA » :
   il n'y a plus rien à dessiner, tout a été photographié chez eux.

   Les schémas au trait de la section 38 ne disparaissent pas pour autant. Ils
   restent le repli des métiers non encore photographiés, et les deux cohabitent
   dans la même liste sans la désaligner : c'est le conteneur qui fixe la place,
   jamais son contenu.
   -------------------------------------------------------------------------- */

.visuel {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.visuel__photo {
	position: relative;
	z-index: 1;
	max-width: 100%;
	width: auto;
	object-fit: contain;
}

/* --- Le grand format : dans la fiche, sur le fond nuit -------------------- */

.visuel--grand {
	height: 190px;
}

/*
 * Le halo.
 *
 * Les dix objets ne se valent pas sur fond nuit : un portable argenté s'en
 * détache tout seul, un totem noir s'y fond. Une lueur froide, basse et
 * centrée sous l'objet, décolle les plus sombres sans éclairer le panneau ni
 * ajouter de cadre. Mesuré sur les dix : c'est le totem et l'écran interactif
 * qui en avaient besoin, les sept autres n'y perdent rien.
 */
.visuel--grand::before {
	content: "";
	position: absolute;
	inset: -6% -4% -10%;
	background: radial-gradient(
		56% 58% at 50% 64%,
		rgba(140, 186, 219, 0.22),
		rgba(140, 186, 219, 0) 72%
	);
}

/* L'ombre portée pose l'objet au lieu de le laisser flotter. */
.visuel--grand::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 2px;
	width: 54%;
	height: 16px;
	transform: translateX(-50%);
	background: radial-gradient(
		50% 50% at 50% 50%,
		rgba(0, 0, 0, 0.5),
		rgba(0, 0, 0, 0) 70%
	);
}

.visuel--grand .visuel__photo {
	max-height: 190px;
	filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.34));
}

/*
 * Le repli au trait garde exactement la place et le cadrage qu'il avait avant
 * les photographies : sans halo ni ombre — un schéma n'est pas
 * un objet posé, et l'éclairer comme tel le ferait passer pour raté. La hauteur
 * du bloc, elle, ne change pas : la fiche doit garder la même taille d'un
 * métier à l'autre.
 */
.visuel--grand.visuel--schema {
	align-items: center;
	justify-content: center;
}

.visuel--grand.visuel--schema::before,
.visuel--grand.visuel--schema::after {
	content: none;
}

/* --- La vignette : dans la liste, sur fond blanc -------------------------- */

.visuel--vignette {
	flex: none;
	/*
	 * Alignée en haut, et non centrée : la hauteur d'une ligne varie du simple
	 * au double selon la longueur de l'accroche, et une vignette centrée se
	 * retrouvait alors à flotter au milieu du texte, loin du nom qu'elle
	 * illustre. En haut, elle reste toujours en regard de la première ligne.
	 */
	align-self: flex-start;
	align-items: center;
	width: 56px;
	height: 48px;
}

.visuel--vignette .visuel__photo {
	max-height: 48px;
}

.visuel--vignette .illu {
	max-width: none;
	width: 40px;
	--illu-trait: var(--c-bleu);
	--illu-plan: transparent;
}

/*
 * La vignette est visible sur téléphone seulement.
 *
 * Au-dessus de 64em, le panneau de droite montre le même visuel en grand ; le
 * répéter dans la liste ferait doublon. En dessous, le panneau n'existe pas —
 * sans cette reprise, les dix visuels n'auraient jamais été vus sur un
 * téléphone, qui est pourtant l'écran majoritaire.
 */
@media (min-width: 64em) {
	.metier__visuel {
		display: none;
	}
}

/* --- Le grand format hors de la vitrine ---------------------------------- */

/*
 * Les héros des pages prestation et catégorie.
 *
 * L'emplacement portait le signe de barres, qui disait « SEB » sans dire de
 * quel métier on parle. Il reste le repli ; quand la photographie existe, elle
 * prend la place, un peu plus haute que dans la fiche parce que la colonne y
 * est plus large et le titre plus grand.
 *
 * `.hero__signe` est masqué sous 62em, et le visuel l'est donc aussi : le héros
 * d'un téléphone n'a qu'une colonne, et y glisser deux cents kilooctets
 * au-dessus du titre serait payer cher un ornement.
 */
.hero__signe--visuel {
	opacity: 1;
}

@media (min-width: 62em) {
	.hero__signe--visuel {
		display: block;
	}
}

@media (min-width: 62em) {
	.visuel--hero {
		height: 260px;
	}

	.visuel--hero .visuel__photo {
		max-height: 260px;
	}
}

/* --- Le format carte : l'index des prestations --------------------------- */

/*
 * La carte porte le visuel en tête, aligné à gauche comme l'icône qu'il
 * remplace — le titre qui suit reste le point d'entrée de l'œil.
 *
 * Fond clair : ni halo ni ombre portée. Les deux servent à décoller un objet
 * sombre du panneau nuit ; sur du blanc ils ne feraient que salir le contour.
 */
.visuel--carte {
	height: 120px;
	justify-content: flex-start;
	margin-bottom: var(--e-4);
}

.visuel--carte .visuel__photo {
	max-height: 120px;
}

/* Le schéma de repli, à la taille de l'icône qu'il remplace. */
.visuel--carte.visuel--schema {
	height: auto;
}

.visuel--carte .illu {
	max-width: 92px;
	--illu-trait: var(--c-bleu);
	--illu-plan: rgba(0, 58, 94, 0.24);
}

/* --- La vignette dans une voie : les métiers d'un secteur ----------------- */

/*
 * Même gabarit que le signe qu'elle remplace — 34 px de large, calée en haut —
 * pour que les voies restent alignées quand un métier photographié en côtoie un
 * qui ne l'est pas.
 */
.voie__visuel {
	width: 44px;
	height: 40px;
	flex-shrink: 0;
	margin-top: 1px;
	align-self: flex-start;
	align-items: center;
	justify-content: center;
}

.voie__visuel .visuel__photo {
	max-height: 40px;
}

.voie__visuel .illu {
	max-width: none;
	width: 34px;
	--illu-trait: var(--c-bleu);
	--illu-plan: transparent;
}

/*
 * Le repli d'une voie de secteur occupe la largeur de la vignette qu'il
 * remplace. Sans cela, la carte du seul métier non photographié décalait son
 * texte de dix pixels par rapport aux cinq autres — assez pour se voir.
 */
.voie__signe--large {
	width: 44px;
	align-items: center;
	justify-content: center;
}
/* -----------------------------------------------------------------------------
   47. CONTRASTES — corrections relevées au rendu

   SEB, 28 août 2026 : « attention aux écritures à la couleur de police sombre
   sur des fonds sombres, parfois on ne les voit pas ». Le reproche visait le
   numéro du bandeau de bas de page, corrigé plus haut avec les autres boutons
   en contour. Il en a fait chercher d'autres, et il y en avait.

   Ces valeurs ne sont pas choisies à l'œil : `reports/recette/qa-contraste-rendu.php`
   interroge `getComputedStyle` sur mille six cents textes réels, remonte au
   premier fond opaque et calcule le rapport. Chaque couleur ci-dessous a été
   recalculée jusqu'à passer le seuil AA, puis remesurée.
   -------------------------------------------------------------------------- */

/*
 * Le pied de page : 2,21:1. Le plus grave, parce qu'il était sur **toutes** les
 * pages — horaires et zone d'intervention écrits en gris ardoise sur le fond
 * nuit. C'est précisément ce que SEB décrivait.
 */
.pied .texte-doux,
.pied p.texte-doux {
	color: #9fb3c2; /* 8,17:1 sur --c-nuit */
}

/*
 * Les numéros de la liste des métiers et le compte de solutions des voies :
 * 1,78:1. Ils sont discrets par intention — ils ne doivent pas l'être au point
 * de ne plus se lire.
 */
.metier__rang,
.voie__compte {
	color: #7d7568; /* 4,55:1 sur blanc */
}

/*
 * Les aides de formulaire et les mentions « (facultatif) » : 4,10 à 4,16:1.
 * Passer juste sous le seuil sur un texte d'aide, c'est le rendre pénible
 * exactement à l'endroit où l'on demande un effort au visiteur.
 */
.champ__aide,
.champ__label .champ__option {
	color: #5c6773; /* 5,26:1 sur --c-papier, 5,18:1 sur --c-orange-voile */
}

/* Les étiquettes en capitales : 4,05:1 sur le papier d'appui. */
.etiquette {
	color: #9a4700; /* 5,32:1 sur --c-papier-appui */
}

/* L'intitulé du bandeau de confiance : 4,46:1, à deux centièmes du seuil. */
.confiance__intro {
	color: #9dbdd4; /* 6,04:1 sur --c-bleu-fonce */
}

/* Les deux derniers défauts relevés, une fois les six premiers corrigés. */

/*
 * « (facultatif) » dans le résumé du repli de formulaire : 4,16:1. Le sélecteur
 * précédent visait une classe que ce span n'a pas.
 */
.form__plus summary span {
	color: #5c6773; /* 5,26:1 sur --c-papier */
}

/*
 * Le pied de scène du SAV : 2,21:1. La variante « claire » de ce bloc suppose
 * un fond clair ; sur la page SAV, elle est posée sur le héros nuit. Les trois
 * engagements de service y étaient donc à peine lisibles — et ce sont eux qui
 * décident un visiteur en panne.
 */
.hero .scene__pied--clair li,
.hero .scene__pied li {
	color: #9fb3c2; /* 8,17:1 sur --c-nuit */
}

/* -----------------------------------------------------------------------------
   46. LA SCÈNE SUR TÉLÉPHONE — la vidéo occupe la moitié haute

   SEB, 31 août 2026 : « uniquement dans la version mobile, il faut que la vidéo
   arrive à peu près jusqu'à la moitié de l'écran, pas tout l'écran comme
   l'ordinateur, ce qui va permettre de ne pas trop couper l'image ».

   Le diagnostic est exact, et c'est de la géométrie. La vidéo est en 16/9,
   c'est-à-dire couchée ; la scène d'un téléphone est debout — 375 sur 750. En
   couvrant toute la scène, `object-fit: cover` doit remplir un cadre deux fois
   plus haut que large avec une image deux fois plus large que haute : il ne
   reste à l'écran qu'une bande verticale prise au centre, soit environ le quart
   de la largeur filmée. Les trois quarts de l'image sont perdus.

   En ramenant le cadre vidéo à la moitié haute de l'écran, il redevient presque
   carré, et le rognage tombe de plus des deux tiers à environ un tiers.

   **Rien de tout cela ne s'applique au-dessus de 62em** : la règle vit dans un
   `max-width`, et les deux paliers de grand écran — 62em et 80em — ne sont pas
   touchés. La version ordinateur est verrouillée, comme demandé.
   -------------------------------------------------------------------------- */

@media (max-width: 61.99em) {
	/*
	 * La scène n'a plus de hauteur plancher : elle vaut la bande vidéo plus ce
	 * que le panneau demande. Sans cela, `92svh` la maintenait à un écran plein
	 * et rouvrait sous le texte le vide qu'on vient de refermer.
	 */
	.scene {
		min-height: 0;
	}

	/*
	 * La bande vidéo. `50svh` mesure la moitié de l'écran hors barres du
	 * navigateur — c'est la même unité que celle qui pilote la scène en grand
	 * écran, et la seule qui ne saute pas quand la barre d'adresse d'un
	 * téléphone se rétracte au défilement.
	 */
	.scene__video,
	.scene__fond,
	.scene::before {
		inset: 0 0 auto;
		height: 50svh;
	}

	/*
	 * Le panneau reste **sur** la vidéo, fond transparent, comme en grand écran
	 * (demande de SEB, 31 août 2026 : « il faut que Solutions Expert
	 * Bureautique reste sur la vidéo avec un fond transparent et la vidéo en
	 * arrière-plan »).
	 *
	 * Il avait été descendu sous la bande au premier essai. C'était le confort
	 * de facilité — un texte sur fond uni n'a aucun problème de lisibilité —
	 * mais cela retirait au nom de l'entreprise ce qui fait sa force à
	 * l'ouverture : être posé dans l'image, et non à côté d'elle.
	 *
	 * Le nom et le sous-titre tiennent dans les 50svh de la bande ; le
	 * paragraphe et les boutons débordent dessous, sur le fond nuit. La
	 * transition ne se voit pas : le voile s'y referme en dégradé.
	 */
	.scene__bas {
		margin-top: 0;
	}
}

@media (max-width: 61.99em) {
	/*
	 * Le voile reprend l'intensité mesurée en grand écran — 0,56 —, puisque le
	 * texte est de nouveau posé dessus. C'est la valeur validée en D-56 sur les
	 * pixels réellement rendus : titre à 11,35:1, paragraphe à 6,56:1.
	 *
	 * Il s'y ajoute une seule chose, propre au téléphone : la bande s'éteint sur
	 * son dernier quart pour rejoindre le fond nuit. Sans cela, la vidéo se
	 * termine par un trait net au milieu de l'écran, et le paragraphe qui
	 * traverse cette limite se coupe en deux.
	 */
	.scene::before {
		background: linear-gradient(
			to bottom,
			rgba(11, 26, 36, 0.56) 0%,
			rgba(11, 26, 36, 0.56) 74%,
			rgba(11, 26, 36, 1) 100%
		);
	}
}

/* -----------------------------------------------------------------------------
   48. LA SIGNATURE QUI S'OUVRE

   Le titre arrive replié sur ses initiales — SEB — puis les lettres se déroulent
   jusqu'au nom complet (D-78). Le script pose les enveloppes et mesure les
   largeurs ; la feuille de style ne décrit que le repli lui-même.

   Une lettre se replie par sa largeur, mesurée et posée dans `--w`. C'est la
   seule façon d'obtenir un repli propre : `width: 0` sur un `inline-block` ne
   transitionne pas depuis `auto`, et une largeur en `em` traiterait un « I »
   comme un « M ».
   -------------------------------------------------------------------------- */

.signature__lettre {
	display: inline-block;
	max-width: var(--w, 2em);
	overflow: hidden;
	vertical-align: top;
	white-space: pre;
	transition: max-width 300ms cubic-bezier(0.65, 0, 0.35, 1),
		opacity 200ms ease,
		transform 300ms cubic-bezier(0.65, 0, 0.35, 1);
}

/*
 * L'état replié — celui de départ. La lettre est ramenée contre l'initiale et
 * effacée ; le déroulé la fait ressortir de là.
 */
.signature__lettre.est-replie {
	max-width: 0;
	opacity: 0;
	transform: translateX(-0.18em);
}

/*
 * Le repli initial est posé, pas animé : sans cette classe, le nom complet
 * apparaîtrait une image avant de se replier — un clignotement que l'œil
 * attrape et qui ruine l'effet d'ouverture.
 */
.signature__lettre.sans-transition {
	transition: none;
}

/*
 * Le repli est un mouvement : qui a demandé à en être dispensé n'en verra
 * aucun. Le script s'arrête de lui-même dans ce cas — cette règle est la
 * ceinture par-dessus la bretelle, au cas où l'attribut serait posé autrement.
 */
@media (prefers-reduced-motion: reduce) {
	.signature__lettre {
		transition: none;
	}

	.signature__lettre.est-replie {
		max-width: var(--w, 2em);
		opacity: 1;
		transform: none;
	}
}

/* -----------------------------------------------------------------------------
   49. LES COORDONNÉES — une icône, sa valeur, sur la même ligne

   SEB, 31 août 2026 : « mettre le numéro à côté de l'icône, pas en dessous, même
   chose pour les horaires et la localisation ».

   Les coordonnées vivaient dans un flux de texte séparé par des sauts de ligne :
   le pictogramme ouvrait la ligne, la valeur la suivait, et les deux se
   retrouvaient l'un au-dessus de l'autre dès que la place manquait. Une grille à
   deux colonnes tient la colonne d'icônes alignée quelle que soit la longueur de
   la valeur, et l'adresse peut courir sur deux lignes sans décaler la sienne.
   -------------------------------------------------------------------------- */

.coordonnees {
	display: grid;
	gap: var(--e-3);
	font-style: normal;
	line-height: 1.55;
}

.coordonnees__ligne {
	display: grid;
	grid-template-columns: 17px 1fr;
	align-items: start;
	column-gap: var(--e-3);
}

/*
 * L'icône est calée sur la première ligne de texte, pas sur le haut de la boîte :
 * sur l'adresse, qui court sur deux lignes, elle flotterait sinon au-dessus du
 * premier mot.
 */
.coordonnees__icone {
	width: 17px;
	height: 17px;
	margin-top: 0.24em;
	color: var(--c-bleu);
	flex: none;
}

/*
 * Le fil d'Ariane et le lien « modifier » du récapitulatif : vingt pixels de
 * haut, soit la hauteur de leur texte.
 *
 * Relevé le 31 août 2026 sur seize gabarits en 375 px — c'est le seul défaut de
 * cible tactile qui restait, et il était sur **toutes** les pages, le fil
 * d'Ariane étant universel. La WCAG 2.2 demande vingt-quatre pixels et ne
 * dispense que les liens posés au fil d'une phrase ; un fil d'Ariane est une
 * navigation, pas une phrase.
 *
 * La zone touchable grandit sans que l'apparence change : le lien passe en bloc
 * en ligne et gagne de l'air, absorbé par l'interligne de la barre.
 */
/*
 * Vingt-quatre pixels, quel que soit le pointeur.
 *
 * La règle était d'abord posée sous `pointer: coarse`, comme la section 40. Mais
 * un écran étroit n'est pas forcément tactile — une fenêtre réduite sur un poste
 * de bureau ne déclenche pas cette requête, et le relevé d'audit du 31 août 2026
 * continuait donc de signaler quinze cibles à 20 px. La taille minimale d'une
 * cible ne dépend pas de la façon dont on la vise : elle s'applique partout, et
 * elle ne coûte rien sur grand écran.
 */
.ariane__liste a,
.recap__modifier {
	display: inline-block;
	min-height: 24px;
	padding-block: 2px;
}

/* -----------------------------------------------------------------------------
   50. LA PAGE DE PRESSE

   Le portrait paru dans BARNES Corse, reproduit sur la page À propos. C'est la
   seule preuve extérieure dont le site dispose : ni avis Google, ni témoignage
   client publiable à ce jour.

   La page est montrée à une largeur où elle se lit — un fac-similé illisible
   serait de la décoration. La couverture l'accompagne, plus petite : elle sert à
   reconnaître le titre, pas à être lue.
   -------------------------------------------------------------------------- */

.presse {
	margin: var(--e-6) 0 0;
}

.presse__pages {
	display: flex;
	align-items: flex-start;
	gap: var(--e-5);
	flex-wrap: wrap;
}

.presse__couverture {
	flex: none;
	width: 132px;
	height: auto;
	border: 1px solid var(--c-trait);
	/* La couverture est une photographie de paysage : une ombre douce la
	   détache du papier de la page sans la transformer en vignette d'objet. */
	box-shadow: 0 6px 22px -12px rgba(7, 18, 26, 0.55);
}

.presse__article {
	flex: 1 1 340px;
	min-width: 0;
	/*
	 * `max-width: 100%` avant tout : sans lui, l'image impose sa largeur native
	 * de 742 px et pousse la colonne entière. Mesuré à 375 px de large :
	 * 288 pixels de débordement horizontal sur la page À propos, la seule du
	 * site à en avoir jamais eu.
	 */
	max-width: min(100%, 742px);
	height: auto;
	border: 1px solid var(--c-trait);
	background: var(--c-blanc);
}

.presse figcaption {
	margin-top: var(--e-3);
	font-size: var(--t-sm);
	color: var(--c-encre-douce);
}

/*
 * Sous 48em, la couverture passerait à côté d'une page réduite à la largeur du
 * téléphone, et les deux deviendraient illisibles. On garde l'article seul, en
 * pleine largeur : c'est lui qui porte le contenu.
 */
@media (max-width: 47.99em) {
	.presse__couverture {
		display: none;
	}
}

/* ==========================================================================
   51. PLAN DU SITE
   Le pied de page annonçait « Plan du site » et servait du XML brut. Cette
   page en est la lecture humaine ; le XML reste pour les moteurs.
   ========================================================================== */

.plan__grille {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: var(--e-6) var(--e-5);
	margin: var(--e-5) 0 var(--e-7);
}

.plan__bloc {
	min-width: 0;
}

.plan__titre {
	margin: 0 0 var(--e-3);
	font-size: var(--t-md);
	line-height: 1.3;
}

.plan__titre a {
	color: var(--c-encre);
	text-decoration: none;
}

.plan__titre a:hover,
.plan__titre a:focus-visible {
	color: var(--c-bleu);
	text-decoration: underline;
}

.plan__liste {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--t-sm);
}

.plan__liste li {
	margin: 0 0 var(--e-2);
}

.plan__liste a {
	/*
	 * Vingt-quatre pixels de haut, comme partout ailleurs. Une liste de liens
	 * serrés est le premier endroit où une cible trop petite se paie.
	 */
	display: inline-block;
	min-height: 24px;
	padding-block: 2px;
	color: var(--c-encre-douce);
	text-decoration: none;
}

.plan__liste a:hover,
.plan__liste a:focus-visible {
	color: var(--c-bleu);
	text-decoration: underline;
}

/* Les listes sans sous-titre s'étalent sur toute la largeur disponible. */
.plan__liste--large {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 0 var(--e-5);
	margin-bottom: var(--e-7);
}