/* Thème du site, chargé après riviouz.css sur toutes les pages : la vitrine
   (accueil), le guide, les pages légales et les pages connectées. Il définit
   les jetons sur `body.vitrine` ; riviouz.css n'a pas de couleur en propre.
   Allure blanche et épurée, dans l'univers des cartes en ligne.
   Couleurs : quatre teintes vives, chacune portée par un sens et jamais
   réunies en bloc ni dans l'ordre d'un logo - le bleu pour l'action, le rouge
   pour l'épingle et ce qui manque, le jaune pour les étoiles, le vert pour ce
   qui est fait. Pas de « G », pas de police d'une marque : Figtree,
   auto-hébergée (`public/fonts/figtree.woff2`).
   Relief : une trame de points très légère sous la page, des ombres en deux
   couches ; l'ouverture est une scène épinglée, la rue en vidéo sous la
   recherche et la fiche, jouée au défilement ; les cartes du constat et
   les plaques montent chacune à leur vitesse ; la fiche du déroulé reste
   épinglée et se remplit étape par étape. Une section sombre casse le blanc.
   Sans JavaScript ni mouvement, tout est visible et à sa place.
   Pages connectées (`body.vitrine.appli`) : mêmes jetons, titres ramenés à
   l'échelle d'un formulaire (section « Pages connectées » en fin de feuille). */
@font-face {
	font-family: "Figtree";
	src: url("/fonts/figtree.woff2") format("woff2-variations");
	font-weight: 300 900;
	font-display: swap;
}
body.vitrine {
	/* Proportions de la page : contenu jusqu'à 1456 px, marges qui passent de
	   24 px (mobile) à 72 px (1440 px et plus). Le bandeau, décroché du
	   contenu, a ses propres marges (--marge-bandeau). */
	--largeur: 1456px;
	--gouttiere: clamp(24px, 5vw, 72px);
	--marge-bandeau: clamp(24px, 3vw, 44px);
	--fond: #ffffff;
	--carte: #ffffff;
	--champ: #ffffff;
	--encre: #202124;
	--encre-douce: #5f6368;
	--bordure: #dadce0;
	--bordure-forte: #bdc1c6;
	--survol: #f1f3f4;
	--lien: #1a73e8;
	--bleu: #1a73e8;
	--bleu-fonce: #1557b0;
	--bleu-clair: #e8f0fe;
	--rouge: #d93025;
	--rouge-clair: #fce8e6;
	--jaune: #fbbc04;
	--vert: #188038;
	--vert-vif: #34a853;
	--vert-clair: #e6f4ea;
	--ambre: var(--jaune);
	--ambre-clair: #fdd663;
	--ambre-fonce: var(--bleu);
	--encre-fond: #202124;
	--sauge: #ceead6;
	--sauge-fonce: #81c995;
	--ombre:
		0 0 0 1px rgba(60, 64, 67, 0.08),
		0 1px 3px rgba(60, 64, 67, 0.2),
		0 36px 64px -36px rgba(60, 64, 67, 0.4);
	--ombre-recherche: 0 0 0 1px rgba(60, 64, 67, 0.06), 0 1px 3px rgba(60, 64, 67, 0.2), 0 14px 32px -12px rgba(60, 64, 67, 0.35);
	--ombre-action: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(26, 115, 232, 0.45), 0 12px 24px -12px rgba(26, 115, 232, 0.7);
	--ombre-action-survol: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(26, 115, 232, 0.45), 0 16px 28px -12px rgba(26, 115, 232, 0.75);
	--anneau: 0 0 0 4px rgba(26, 115, 232, 0.25);
	--titres: "Figtree", ui-sans-serif, system-ui, sans-serif;
	font-family: var(--titres);
	color: var(--encre);
	overflow-x: hidden;
	/* Une trame de points, comme un fond de carte, qui s'efface vers le bas de l'écran. */
	background-color: var(--fond);
	background-image:
		radial-gradient(70% 50% at 85% -10%, rgba(26, 115, 232, 0.1), transparent 70%),
		radial-gradient(50% 40% at 0% 10%, rgba(52, 168, 83, 0.06), transparent 70%),
		radial-gradient(circle, rgba(60, 64, 67, 0.16) 1px, transparent 1.4px);
	background-size: 100% 100vh, 100% 100vh, 22px 22px;
	background-repeat: no-repeat, no-repeat, repeat;
	background-blend-mode: normal;
}
.vitrine h1, .vitrine h2, .vitrine h3 { font-variation-settings: normal; }
.independant {
	display: inline-flex; align-items: center; gap: 8px; margin: 22px 0 0;
	font-size: 0.86rem; color: var(--encre-douce);
}
.independant::before {
	content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--bordure-forte);
}
.vitrine h1 { font-size: clamp(2.2rem, 4.8vw, 4.25rem); line-height: 1.04; letter-spacing: -0.04em; font-weight: 700; margin-bottom: 20px; }
.grand { font-size: clamp(1.7rem, 4.2vw, 3.75rem); line-height: 1.08; letter-spacing: -0.035em; font-weight: 700; margin-bottom: 26px; }
.vitrine h3 { font-family: var(--titres); font-size: 1.2rem; font-weight: 650; letter-spacing: -0.01em; margin: 0 0 8px; }
.surtitre {
	font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--ambre-fonce); margin-bottom: 14px;
}
.chapeau { font-size: clamp(1.15rem, 1.6vw, 1.25rem); color: #3c4043; max-width: 36em; }
.vitrine section { max-width: calc(var(--largeur) + 2 * var(--gouttiere)); margin: 0 auto; padding: 96px var(--gouttiere); position: relative; }
.vitrine .bouton { margin-top: 0; }
.bouton.secondaire {
	background: var(--carte); color: var(--encre);
	box-shadow: inset 0 0 0 1px var(--bordure), 0 1px 2px rgba(60, 64, 67, 0.12), 0 12px 24px -16px rgba(60, 64, 67, 0.4);
}
.bouton.secondaire:hover { background: var(--survol); }

/* Bandeau : un seul `nav`, deux groupes. Au-delà de 1200 px, deux étages :
   une barre grise (Plaque d'avis, Tarif, Guide), puis une bande blanche
   (marque, les trois métiers, Connexion, « Être rappelé »). À 1200 px et moins, les groupes s'effacent (`display: contents`)
   et menu.js replie les liens dans le panneau. */
.bandeau {
	max-width: calc(var(--largeur) + 2 * var(--gouttiere)); margin: 0 auto; padding: 22px var(--gouttiere);
	display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.bandeau .logo { font-size: 1.3rem; }
.bandeau nav { display: flex; gap: 22px; flex-wrap: wrap; }
.menu-metiers, .menu-reste { display: contents; }
.bandeau nav a { color: var(--encre); font-weight: 600; font-size: 0.93rem; text-decoration: none; }
.bandeau nav a:hover { color: var(--bleu); }
.bandeau nav a[aria-current="page"] { color: var(--bleu); }
/* Menu replié (menu.js) : rien de visible au-delà de 1200 px. */
.menu-bouton, .menu-picto, .bandeau nav a.menu-appel { display: none; }

@media (min-width: 1201px) {
	.bandeau {
		--marge: var(--marge-bandeau);
		max-width: none; padding: 0; gap: 0;
		display: grid; grid-template-columns: var(--marge) auto 1fr auto auto var(--marge);
		grid-template-rows: 46px 76px; align-items: center;
		background: #f8f9fa;
		box-shadow: inset 0 -1px 0 rgba(60, 64, 67, 0.04);
	}
	/* La bande blanche, posée sur la barre grise : un liseré, une ombre courte. */
	.bandeau::before {
		content: ""; grid-row: 2; grid-column: 1 / -1; align-self: stretch;
		background: #ffffff;
		box-shadow: 0 -1px 0 rgba(60, 64, 67, 0.06), 0 -6px 12px -10px rgba(60, 64, 67, 0.18);
	}
	.bandeau .logo { grid-row: 2; grid-column: 2; font-size: 1.22rem; }
	.bandeau nav { display: contents; }
	.menu-reste { display: flex; gap: 26px; grid-row: 1; grid-column: 2 / 6; }
	.bandeau nav .menu-reste a { font-size: 0.88rem; font-weight: 500; color: #3c4043; }
	.menu-metiers { display: flex; gap: 26px; grid-row: 2; grid-column: 3; margin-left: 34px; }
	.bandeau nav .menu-metiers a { font-size: 0.95rem; font-weight: 500; color: var(--encre-douce); }
	.bandeau nav .menu-metiers a:hover, .bandeau nav .menu-reste a:hover { color: var(--encre); }
	.bandeau nav .menu-metiers a[aria-current="page"], .bandeau nav .menu-reste a[aria-current="page"] { color: var(--encre); font-weight: 650; }
	.bandeau nav a.menu-connexion {
		grid-row: 2; grid-column: 4; margin-right: 12px; padding: 11px 24px; border-radius: 999px;
		color: var(--bleu); background: #ffffff;
		box-shadow: inset 0 0 0 1px var(--bordure), 0 1px 2px rgba(60, 64, 67, 0.08);
		transition: background-color 0.15s, box-shadow 0.15s;
	}
	.bandeau nav a.menu-connexion:hover { color: var(--bleu-fonce); background: var(--bleu-clair); box-shadow: inset 0 0 0 1px rgba(26, 115, 232, 0.35); }
	.bandeau nav a.menu-appel { display: inline-block; grid-row: 2; grid-column: 5; padding: 11px 24px; color: #ffffff; }
	.bandeau nav a.menu-appel:hover { color: #ffffff; }
}

@media (max-width: 1200px) {
	/* Le bandeau reste collé en haut ; il prend un fond dès que la page défile.
	   Sans script, il garde ses liens en clair et ne colle pas. */
	.bandeau.menu-pret {
		position: sticky; top: 0; z-index: 60; flex-wrap: nowrap;
		transition: background-color 0.2s, box-shadow 0.2s;
	}
	.bandeau.defile, .bandeau.ouvert {
		background-color: rgba(255, 255, 255, 0.86);
		-webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
		box-shadow: 0 1px 0 rgba(60, 64, 67, 0.1), 0 10px 24px -18px rgba(60, 64, 67, 0.5);
	}
	.bandeau.menu-pret { padding-top: 12px; padding-bottom: 12px; }
	.bandeau.menu-pret .logo { font-size: 1.15rem; }
	.bandeau.menu-pret .menu-bouton {
		display: inline-flex; align-items: center; gap: 10px; flex: none;
		margin: 0; padding: 10px 16px 10px 14px; font-size: 0.95rem;
		color: var(--encre); background: #ffffff;
		box-shadow: inset 0 0 0 1px var(--bordure), 0 1px 2px rgba(60, 64, 67, 0.12), 0 10px 20px -14px rgba(60, 64, 67, 0.5);
	}
	.bandeau.menu-pret .menu-bouton:hover { transform: none; background: var(--survol); }
	.menu-traits { position: relative; width: 18px; height: 12px; }
	.menu-traits span {
		position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor;
		transition: translate 0.25s, rotate 0.25s, opacity 0.2s;
	}
	.menu-traits span:nth-child(1) { top: 0; }
	.menu-traits span:nth-child(2) { top: 5px; }
	.menu-traits span:nth-child(3) { top: 10px; }
	.bandeau.ouvert .menu-traits span:nth-child(1) { translate: 0 5px; rotate: 45deg; }
	.bandeau.ouvert .menu-traits span:nth-child(2) { opacity: 0; }
	.bandeau.ouvert .menu-traits span:nth-child(3) { translate: 0 -5px; rotate: -45deg; }

	/* Le panneau : une carte posée sous le bandeau. Métiers en grand, puis
	   Tarif, Guide, Connexion sur une ligne, puis l'appel. */
	.bandeau.menu-pret nav {
		position: absolute; right: 12px; top: calc(100% + 8px); width: min(420px, calc(100% - 24px));
		display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
		max-height: calc(100dvh - 96px); overflow-y: auto; padding: 12px; border-radius: 26px;
		background: #ffffff;
		box-shadow: 0 0 0 1px rgba(60, 64, 67, 0.08), 0 2px 4px rgba(60, 64, 67, 0.2), 0 40px 70px -28px rgba(60, 64, 67, 0.5);
		opacity: 0; visibility: hidden; translate: 0 -10px; transform-origin: top right;
		transition: opacity 0.2s, translate 0.25s, visibility 0s 0.25s;
	}
	.bandeau.ouvert nav { opacity: 1; visibility: visible; translate: 0 0; transition: opacity 0.2s, translate 0.25s; }
	.bandeau.menu-pret nav a {
		grid-column: 1 / -1; display: flex; align-items: center; gap: 14px;
		min-height: 52px; padding: 6px 12px; border-radius: 16px; font-size: 1.08rem;
		opacity: 0; translate: 0 6px; transition: opacity 0.25s, translate 0.25s, background-color 0.15s;
	}
	.bandeau.ouvert nav a { opacity: 1; translate: 0 0; }
	.bandeau.ouvert .menu-metiers a:nth-child(2) { transition-delay: 0.03s; }
	.bandeau.ouvert .menu-metiers a:nth-child(3) { transition-delay: 0.06s; }
	.bandeau.ouvert .menu-reste a:first-child { transition-delay: 0.09s; }
	.bandeau.ouvert nav a.menu-court, .bandeau.ouvert nav a.menu-appel { transition-delay: 0.12s; }
	.bandeau.menu-pret nav a:hover { color: var(--encre); background: var(--survol); }
	.bandeau.menu-pret nav a[aria-current="page"] { color: var(--bleu-fonce); background: var(--bleu-clair); }
	.bandeau.menu-pret .menu-picto {
		display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px;
		color: var(--bleu); background: var(--bleu-clair);
		box-shadow: inset 0 0 0 1px rgba(26, 115, 232, 0.12), 0 8px 16px -12px var(--bleu);
	}
	.bandeau.menu-pret .menu-reste a:first-child .menu-picto { color: var(--rouge); background: var(--rouge-clair); box-shadow: inset 0 0 0 1px rgba(217, 48, 37, 0.12), 0 8px 16px -12px var(--rouge); }
	.menu-picto svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
	.bandeau.menu-pret nav a.menu-court {
		grid-column: auto; justify-content: center; min-height: 48px; font-size: 0.98rem;
		margin-top: 6px; background: #f8f9fa; box-shadow: inset 0 0 0 1px #eceef0;
	}
	.bandeau.menu-pret nav a.menu-appel {
		display: flex; justify-content: center; margin-top: 8px; color: #ffffff;
		background: linear-gradient(180deg, #2b7de9, var(--bleu)); box-shadow: var(--ombre-action);
	}
	.bandeau.menu-pret nav a.menu-appel:hover { color: #ffffff; background: linear-gradient(180deg, #2b7de9, var(--bleu-fonce)); }
	/* Une ancre ne tombe pas sous le bandeau collé. */
	.vitrine section[id], .article-corps h2, .legal-section h2 { scroll-margin-top: 84px; }
}
@media (max-width: 1200px) and (prefers-reduced-motion: reduce) {
	.bandeau.menu-pret nav, .bandeau.menu-pret nav a, .menu-traits span { transition: none; }
}

/* Ouverture */
.une { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center; padding-top: 40px !important; }
.une h1 { text-wrap: balance; }
.une-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
/* Scène de l'ouverture : la rue en vidéo (`npm run videos`), et par-dessus
   l'interface en HTML - la recherche, la fiche et ses compteurs, les avis.
   Tailles en unités du conteneur : la scène se dessine pareil à toute largeur.
   Sans `anime` (sans script ou mouvement réduit), l'état final, fixe. */
.une-scene {
	position: relative; container-type: inline-size; aspect-ratio: 600 / 640;
	width: min(100%, calc((100svh - 150px) * 600 / 640)); justify-self: center;
}
.une-scene > * { font-size: clamp(10px, 2.15cqw, 14px); }
.une-rue {
	position: absolute; left: 7%; top: 0; width: 93%; aspect-ratio: 1280 / 692; margin: 0;
	border-radius: 4cqw; overflow: hidden; background: #3c3a36 center / cover no-repeat;
	box-shadow: 0 0 0 1px rgba(60, 64, 67, 0.1), 0 2px 4px rgba(60, 64, 67, 0.22), 0 50px 80px -40px rgba(60, 64, 67, 0.55);
}
.une-scene.anime .une-rue { background-image: url("/videos/une/sans.jpg"); }
/* Le nom, posé sur la toile de la marquise : un modèle d'image ne tient pas
   un texte d'une trame à l'autre. Caméra fixe, la toile ne bouge pas ; les
   positions se relèvent sur `sans.jpg` quand la façade change. */
.une-rue { container-type: inline-size; }
.une-enseigne {
	position: absolute; left: 51.5%; top: 24.3%; z-index: 1; translate: -50% -50%;
	font-size: 3.3cqw; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
	color: #f4efe2; opacity: 0.94; text-shadow: 0 1px 0 rgba(0, 40, 20, 0.35);
}
.une-rue-fixe, .une-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.une-clip { display: none; }
.une-scene.anime .une-rue-fixe { display: none; }
.une-scene.anime .une-clip { display: block; }
.une-scene.anime .une-clip[data-clip="avec"] { opacity: 0; }
.une-rue::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(32, 33, 36, 0.35), rgba(32, 33, 36, 0) 40%);
}
.une-rue figcaption { position: absolute; left: 3.5cqw; top: 3.5cqw; right: 30%; z-index: 1; }
.une-legende {
	position: absolute; left: 0; top: 0; display: none;
	padding: 0.55em 1.1em 0.55em 2.3em; border-radius: 999px; font-weight: 600; font-size: 0.95em; line-height: 1.3;
	background: rgba(255, 255, 255, 0.94); color: var(--encre);
	box-shadow: 0 1px 2px rgba(32, 33, 36, 0.25), 0 12px 24px -12px rgba(32, 33, 36, 0.6);
}
.une-legende::before {
	content: ""; position: absolute; left: 0.95em; top: 50%; width: 0.7em; height: 0.7em; margin-top: -0.35em; border-radius: 50%;
	background: var(--vert-vif); box-shadow: 0 0 0 3px rgba(52, 168, 83, 0.2);
}
.une-legende.sans::before { background: var(--rouge); box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.18); }
.une-legende.avec, .une-scene.anime .une-legende { display: block; }
.une-scene.anime .une-legende:not(.sans) { opacity: 0; }

/* Les avis arrivent en haut à droite, l'un sous l'autre : étoiles et prénom, jamais de texte. */
.une-avis { position: absolute; right: -3%; top: 17%; width: 30%; margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5em; }
.une-avis li {
	display: flex; align-items: center; gap: 0.5em; padding: 0.55em 0.85em; border-radius: 0.9em;
	font-size: 0.86em; font-weight: 600; background: #ffffff;
	box-shadow: 0 0 0 1px rgba(60, 64, 67, 0.08), 0 1px 3px rgba(60, 64, 67, 0.2), 0 18px 30px -16px rgba(60, 64, 67, 0.45);
}
.une-avis-etoiles { color: var(--jaune); letter-spacing: 0.04em; }
.une-avis-etoiles span { color: #dadce0; }

/* La recherche : la requête, la carte du quartier, les résultats. */
.une-recherche {
	position: absolute; left: 0; top: 41%; width: 49%; padding: 0.9em; border-radius: 1.4em; background: #ffffff;
	box-shadow: 0 0 0 1px rgba(60, 64, 67, 0.08), 0 2px 4px rgba(60, 64, 67, 0.2), 0 40px 70px -28px rgba(60, 64, 67, 0.45);
}
.une-barre {
	display: flex; align-items: center; gap: 0.6em; margin: 0 0 0.75em; padding: 0.6em 0.9em; border-radius: 999px;
	font-size: 0.95em; background: #f1f3f4;
}
.une-barre svg { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: var(--encre-douce); stroke-width: 2.2; stroke-linecap: round; }
.une-requete { white-space: nowrap; overflow: hidden; }
.une-carte { display: block; width: 100%; height: auto; border-radius: 0.8em; overflow: hidden; }
.une-carte .plan-fond { fill: #f1f3f4; }
.une-carte .ilot { fill: #e3e5e8; }
.une-carte .ilot.ici { fill: #fdf2f1; }
.une-carte .ilot.hachure { fill: url(#hachures-une); stroke: #e8a29b; stroke-dasharray: 4 4; stroke-width: 1.2; }
/* État final fixe : la fiche existe, plus de terrain vide sous l'épingle. */
.une-scene:not(.anime) .une-terrain { display: none; }
.une-carte .rue { stroke: #ffffff; stroke-width: 10; fill: none; }
.une-concurrent path { fill: #9aa0a6; }
.une-concurrent circle, .une-epingle circle { fill: #ffffff; }
.une-epingle path { fill: #ea4335; stroke: #b31412; stroke-width: 1.5; }
.une-resultats { margin: 0.6em 0 0; padding: 0; list-style: none; }
.une-resultat { display: grid; padding: 0.45em 0.6em; border-radius: 0.7em; overflow: hidden; }
.une-resultat + .une-resultat { box-shadow: inset 0 1px 0 #eceef0; }
.une-resultat b { font-size: 0.95em; font-weight: 650; }
.une-resultat span { font-size: 0.82em; color: var(--encre-douce); }
.une-resultat i { font-style: normal; color: var(--jaune); }
.une-resultat.nous { background: var(--rouge-clair); }
.une-resultat.nous + .une-resultat { box-shadow: none; }
.une-absent { display: none; margin: 0.5em 0 0; padding: 0.45em 0.6em; border-radius: 0.7em; font-size: 0.82em; font-weight: 600; color: var(--rouge); background: var(--rouge-clair); }
.une-scene.anime .une-absent { display: block; }

/* La fiche, puis ce qu'elle rapporte : la courbe et trois compteurs. */
.une-fiche { position: absolute; right: -3%; top: 39%; width: 49%; z-index: 3; }
.une-fiche .fiche-photos { height: 5.6em; background: #eceef0; }
.une-fiche .une-photo-1 { background-image: url("/videos/une/avec-fin.jpg"); }
.une-fiche .une-photo-2 { background-image: url("/images/vitrine/restaurant-plats.jpg"); }
.une-fiche .une-photo-3 { background-image: url("/images/vitrine/restaurant.jpg"); }
.une-fiche .fiche-corps { position: relative; padding: 0.9em 1.1em 1em; }
.une-fiche .fiche-exemple { font-size: 0.7em; }
.une-fiche .fiche-nom { font-size: 1.2em; }
.une-fiche .fiche-note, .une-fiche .fiche-ligne { font-size: 0.88em; }
.une-sans-fiche {
	display: none; position: absolute; left: 1.1em; right: 1.1em; top: 2.1em;
	padding: 0.9em; border-radius: 0.8em; text-align: center; font-weight: 650; font-size: 0.92em;
	color: var(--rouge); background: var(--rouge-clair); box-shadow: inset 0 0 0 1px rgba(217, 48, 37, 0.25);
}
.une-scene.anime .une-sans-fiche { display: block; }
.une-stats { margin-top: 0.8em; padding-top: 0.8em; box-shadow: inset 0 1px 0 #eceef0; }
.une-stats-titre { font-size: 0.72em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-douce); }
.une-courbe { display: block; width: 100%; height: auto; margin: 0.3em 0 0.6em; overflow: visible; }
.une-courbe path { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.une-courbe-bas { stroke: var(--rouge); opacity: 0; }
.une-courbe-haut { stroke: var(--vert-vif); }
.une-compteurs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4em; margin: 0; }
.une-compteurs div { padding: 0.5em 0.55em; border-radius: 0.7em; background: #f8f9fa; }
.une-compteurs dt { font-size: 0.68em; line-height: 1.2; color: var(--encre-douce); }
.une-compteurs dd { margin: 0.15em 0 0; font-size: 1.15em; font-weight: 750; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* La création, isolée : un voile sur la rue et la recherche, la fiche au
   premier plan, les quatre étapes du déroulé à côté. N'existe qu'animée. */
.une-fiche .fiche-badge { font-size: 0.78em; margin: 0.35em 0 0.2em !important; }
/* Des étoiles grises sous les jaunes : une fiche sans avis montre cinq étoiles vides. */
.une-fiche .fiche-etoiles::before { content: "★★★★★"; position: absolute; left: 0; top: 0; }
.une-fiche .fiche-etoiles .plein { position: relative; }
.une-voile, .une-creation { display: none; }
.une-scene.anime .une-voile, .une-scene.anime .une-creation { display: block; }
.une-voile {
	position: absolute; inset: -4% -6% -2% -6%; z-index: 2; border-radius: 4cqw; opacity: 0; pointer-events: none;
	background: rgba(255, 255, 255, 0.74);
	-webkit-backdrop-filter: blur(6px) saturate(0.8); backdrop-filter: blur(6px) saturate(0.8);
}
.une-creation {
	position: absolute; left: 0; top: 30%; width: 35%; z-index: 3; opacity: 0; padding: 1.1em 1.2em; border-radius: 1.4em; background: #ffffff;
	box-shadow: 0 0 0 1px rgba(60, 64, 67, 0.08), 0 2px 4px rgba(60, 64, 67, 0.2), 0 40px 70px -28px rgba(60, 64, 67, 0.45);
}
.une-creation-titre { margin: 0 0 0.8em; font-size: 0.72em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-douce); }
.une-creation ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.75em; }
.une-creation li { display: grid; grid-template-columns: auto 1fr; column-gap: 0.7em; align-items: center; font-weight: 650; font-size: 0.95em; }
.une-creation small { grid-column: 2; font-size: 0.82em; font-weight: 500; color: var(--encre-douce); }
.une-coche {
	grid-row: span 2; display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%;
	font-size: 0.9em; font-weight: 800; color: transparent; box-shadow: inset 0 0 0 2px var(--bordure);
}
.une-en-ligne {
	margin: 1em 0 0; padding: 0.55em 1em 0.55em 2.2em; position: relative; border-radius: 999px; font-weight: 700; font-size: 0.95em;
	color: var(--vert); background: var(--vert-clair); box-shadow: inset 0 0 0 1px rgba(24, 128, 56, 0.25);
}
.une-en-ligne::before {
	content: ""; position: absolute; left: 0.95em; top: 50%; width: 0.7em; height: 0.7em; margin-top: -0.35em; border-radius: 50%;
	background: var(--vert-vif); box-shadow: 0 0 0 3px rgba(52, 168, 83, 0.25);
}

@media (max-width: 900px) {
	.une-scene { width: 100%; margin-top: 8px; }
}
/* Téléphone : la recherche et la fiche se relaient au même endroit, sous la rue. */
@media (max-width: 700px) {
	.une-scene { aspect-ratio: 600 / 860; }
	.une-scene > * { font-size: clamp(10px, 3.3cqw, 14px); }
	.une-rue { left: 0; width: 100%; }
	/* La légende passe au pied de la rue : en haut, elle couvrirait l'enseigne. */
	.une-rue figcaption { top: auto; bottom: 3.5cqw; right: 3.5cqw; }
	.une-legende { top: auto; bottom: 0; }
	.une-avis { right: 2%; top: 15%; width: 50%; gap: 0.35em; }
	.une-avis li:nth-child(n + 3) { display: none; }
	.une-recherche, .une-fiche { left: 4%; right: auto; top: 41%; width: 92%; }
	.une-scene:not(.anime) .une-recherche { display: none; }
	.une-creation { left: 4%; top: 3%; width: 92%; }
	.une-creation ol { grid-template-columns: 1fr 1fr; }
}

/* La fiche : un objet du site, pas une capture de Google. */
.fiche {
	background: var(--carte); border-radius: 18px; overflow: hidden;
	box-shadow: 0 0 0 1px rgba(60, 64, 67, 0.08), 0 2px 4px rgba(60, 64, 67, 0.2), 0 40px 70px -28px rgba(60, 64, 67, 0.45);
}
.fiche-une { position: absolute; right: -18px; bottom: -36px; width: 62%; }
.fiche-photos { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3px; height: 92px; }
/* Les trois photos de la fiche (`npm run images`). */
.photo { background: #9aa0a6 center / cover no-repeat; }
.photo-1 { background-image: url("/images/vitrine/devanture.jpg"); }
.photo-2 { background-image: url("/images/vitrine/pains.jpg"); }
.photo-3 { background-image: url("/images/vitrine/interieur.jpg"); }
.fiche-corps { padding: 14px 18px 16px; }
.fiche-corps p { margin: 0 0 4px; }
.fiche-exemple { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--encre-douce); }
.fiche-nom { font-family: var(--titres); font-size: 1.2rem; font-weight: 640; letter-spacing: -0.01em; }
.fiche-note { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; }
.fiche-chiffre { font-weight: 700; }
.fiche-etoiles { position: relative; color: #dadce0; letter-spacing: 1px; }
.fiche-etoiles .plein { color: var(--jaune); }
.fiche-ligne { font-size: 0.9rem; color: var(--encre-douce); }
.ouvert { color: var(--vert); font-weight: 600; }
.fiche-badge {
	display: inline-block; margin: 6px 0 8px !important; padding: 3px 10px; border-radius: 999px;
	background: var(--vert-clair); color: var(--vert); font-size: 0.82rem; font-weight: 600;
}

/* Constat */
.constat .grand { max-width: 22em; }
.constat-photo {
	position: relative; margin: 0; height: 460px; border-radius: 28px; overflow: hidden;
	box-shadow: 0 0 0 1px rgba(60, 64, 67, 0.1), 0 2px 4px rgba(60, 64, 67, 0.22), 0 50px 80px -40px rgba(60, 64, 67, 0.55);
}
.constat-photo img { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; }
.constat-photo::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(32, 33, 36, 0) 45%, rgba(32, 33, 36, 0.45));
}
.constat-photo figcaption {
	position: absolute; left: 28px; top: 28px; z-index: 1;
	padding: 8px 16px 8px 34px; border-radius: 999px; font-weight: 600; font-size: 0.92rem;
	background: rgba(255, 255, 255, 0.94); color: var(--encre);
	box-shadow: 0 1px 2px rgba(32, 33, 36, 0.25), 0 12px 24px -12px rgba(32, 33, 36, 0.6);
}
.constat-photo figcaption::before {
	content: ""; position: absolute; left: 14px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
	background: var(--rouge); box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.18);
}
.constat-cartes {
	position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
	margin-top: -150px; padding: 0 28px; align-items: start;
}
.constat-carte { margin: 0; }
.constat-carte:nth-child(2) { margin-top: 48px; }
.constat-carte:nth-child(3) { margin-top: 96px; }
.constat-numero, .etape-numero {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 50%; margin-bottom: 16px;
	font-family: var(--titres); font-weight: 700;
}
/* Le constat dit ce qui manque : rouge. Le déroulé dit ce qu'on fait : bleu. */
.constat-numero {
	color: #c5221f; background: var(--rouge-clair);
	box-shadow: inset 0 0 0 1px rgba(217, 48, 37, 0.18), 0 6px 14px -8px rgba(217, 48, 37, 0.7);
}
.etape-numero {
	color: var(--bleu-fonce); background: var(--bleu-clair);
	box-shadow: inset 0 0 0 1px rgba(26, 115, 232, 0.18), 0 6px 14px -8px rgba(26, 115, 232, 0.7);
}

/* Déroulé : fiche à gauche, étapes à droite. Au-delà de 900 px, les étapes
   sont un carrousel (défilement horizontal natif, aimanté) : la fiche se
   remplit et le fil se trace selon la carte affichée (vitrine.js). À 900 px
   et moins, liste empilée, fiche masquée. */
.deroule { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center; }
.deroule-fiche { display: flex; gap: 22px; align-items: stretch; }
.fiche-montage { flex: 1; }
.fiche-montage [data-etape] { transition: opacity 0.4s, transform 0.4s, filter 0.4s; }
.fiche-montage.anime [data-etape]:not(.rempli) { opacity: 0.18; filter: blur(2px); transform: translateY(6px); }
.fiche-montage .fiche-corps { min-height: 190px; }
.deroule-fil { width: 24px; height: auto; flex: none; }
.fil-fond { stroke: var(--bordure); stroke-width: 3; fill: none; }
.fil-plein {
	stroke: var(--bleu); stroke-width: 3; fill: none; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(26, 115, 232, 0.5));
	stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 0.5s ease;
}
.deroule-etapes { min-width: 0; }
.deroule-etapes ol { list-style: none; padding: 0; margin: 0; }
.etape-deroule p { color: #3c4043; max-width: 30em; }
/* Flèches des carrousels : déroulé et rail des plaques (`.deroule-fleche`). */
.deroule-commandes, .rail-commandes { display: flex; gap: 10px; margin-top: 6px; }
.deroule-commandes[hidden], .rail-commandes[hidden] { display: none; }
.vitrine .deroule-fleche {
	display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; margin: 0;
	color: var(--encre); background: #ffffff;
	box-shadow: inset 0 0 0 1px var(--bordure), 0 1px 2px rgba(60, 64, 67, 0.12), 0 10px 20px -14px rgba(60, 64, 67, 0.5);
}
.vitrine .deroule-fleche:hover { color: var(--bleu); background: var(--bleu-clair); box-shadow: inset 0 0 0 1px rgba(26, 115, 232, 0.3); }
.vitrine .deroule-fleche:disabled { opacity: 0.35; cursor: default; transform: none; background: #ffffff; color: var(--encre); }
.deroule-fleche svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Déroulé : les quatre étapes sont un carrousel en défilement horizontal
   natif, comme le rail des plaques. Aimanté au doigt (900 px et moins) ; au-delà,
   libre au pavé tactile (l'aimantation y ramène en arrière les petits pas), et
   les flèches ou un clic sur une carte recalent sur une carte (vitrine.js). */
.deroule-etapes ol.deroule-piste {
	display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-behavior: smooth;
	/* Place pour les ombres des cartes, que le défilement rognerait. */
	padding: 18px 4px 64px; margin: -18px -4px -40px;
}
/* Les cartes voisines s'effacent vers les bords au lieu d'y être coupées ;
   rien ne s'efface du côté où la piste est au bout (vitrine.js). */
.deroule-etapes.pret ol.deroule-piste {
	--fondu-gauche: 3%; --fondu-droite: 84%;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fondu-gauche), #000 var(--fondu-droite), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 var(--fondu-gauche), #000 var(--fondu-droite), transparent);
}
.deroule-etapes.pret ol.deroule-piste.debut { --fondu-gauche: 0%; }
.deroule-etapes.pret ol.deroule-piste.fin { --fondu-droite: 100%; }
.deroule-commandes { position: relative; }
.deroule-etapes.pret ol.deroule-piste { scrollbar-width: none; }
.deroule-etapes.pret ol.deroule-piste::-webkit-scrollbar { display: none; }
.etape-deroule {
	flex: 0 0 82%; scroll-snap-align: start; padding: 30px 30px 26px; border-radius: 24px;
	background: var(--carte); transition: opacity 0.3s;
	box-shadow: 0 0 0 1px rgba(60, 64, 67, 0.08), 0 1px 3px rgba(60, 64, 67, 0.18), 0 28px 48px -32px rgba(60, 64, 67, 0.45);
}
.deroule-etapes.pret .etape-deroule { cursor: pointer; opacity: 0.5; }
.deroule-etapes.pret .etape-deroule.actif { cursor: auto; opacity: 1; }
@media (max-width: 900px) {
	.deroule-etapes ol.deroule-piste { scroll-snap-type: x mandatory; padding: 18px 16px 64px; margin: -18px -16px -40px; scroll-padding-left: 16px; }
	.deroule-etapes.pret ol.deroule-piste { --fondu-gauche: 4%; --fondu-droite: 92%; }
	.etape-deroule { flex-basis: 86%; padding: 24px 22px 22px; }
}
@media (prefers-reduced-motion: reduce) {
	.deroule-etapes ol.deroule-piste { scroll-behavior: auto; }
	.fiche-montage [data-etape], .fil-plein, .etape-deroule { transition: none; }
}

/* Engagements : la section à l'encre, avec sa lueur. */
.vitrine section.engagements { max-width: none; padding: 0 12px; }
.engagements-interieur {
	max-width: calc(var(--largeur) + 2 * var(--gouttiere)); margin: 0 auto; padding: 88px var(--gouttiere); border-radius: 32px;
	color: #e8eaed;
	background:
		radial-gradient(60% 70% at 85% 0%, rgba(26, 115, 232, 0.32), transparent 70%),
		radial-gradient(50% 60% at 0% 100%, rgba(52, 168, 83, 0.16), transparent 70%),
		linear-gradient(180deg, #2d2e31, var(--encre-fond));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 4px rgba(32, 33, 36, 0.3), 0 60px 90px -40px rgba(32, 33, 36, 0.7);
}
.engagements .grand { color: #ffffff; }
.engagements-liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.engagements-liste h3 { color: #8ab4f8; }
.engagements-liste p { color: #bdc1c6; margin: 0; }

/* Plaques */
.avis { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.avis-plaques { position: relative; height: 480px; }
.plaque { position: absolute; height: auto; filter: drop-shadow(0 2px 2px rgba(60, 64, 67, 0.25)) drop-shadow(0 30px 34px rgba(60, 64, 67, 0.3)); }
.plaque-1 { width: 54%; left: 0; top: 40px; rotate: -8deg; }
.plaque-2 { width: 44%; left: 34%; top: 150px; rotate: 6deg; z-index: 1; }
.plaque-3 { width: 46%; right: 0; top: 0; rotate: 12deg; }

/* Après le scan, version fixe : les quatre étapes et les quatre écrans côte à
   côte. C'est elle qu'on voit sans script ou en mouvement réduit. */
.apres-statique { display: grid; grid-template-columns: 1fr; gap: 40px; }
.apres-etapes { list-style: none; padding: 0; margin: 0 0 18px; }
.etape-apres { position: relative; padding: 22px 0 22px 54px; border-top: 1px solid #e8eaed; transition: opacity 0.3s; }
.etape-apres:first-child { border-top: 0; padding-top: 4px; }
.etape-apres .etape-numero { position: absolute; left: 0; top: 22px; }
.etape-apres:first-child .etape-numero { top: 4px; }
.etape-apres h3 { margin: 0 0 6px; }
.etape-apres p { margin: 0; color: #3c4043; max-width: 30em; }
.apres-telephones {
	position: relative; display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory;
	padding: 18px 4px 40px; margin: 0 -4px;
}
.apres-telephones::before {
	content: ""; position: absolute; inset: 10% 5% 0; z-index: -1; pointer-events: none;
	background: radial-gradient(50% 50% at 50% 50%, rgba(26, 115, 232, 0.14), transparent 70%);
}
.telephone {
	flex: 0 0 236px; scroll-snap-align: center; aspect-ratio: 9 / 15; box-sizing: border-box;
	padding: 34px 18px 18px; border-radius: 38px; background: #ffffff;
	border: 9px solid #202124; position: relative; overflow: hidden;
	box-shadow: 0 2px 3px rgba(32, 33, 36, 0.35), 0 40px 70px -24px rgba(60, 64, 67, 0.5);
}
.telephone::before {
	content: ""; position: absolute; top: 9px; left: 50%; width: 64px; height: 16px; translate: -50% 0;
	border-radius: 999px; background: #202124;
}
.telephone .fiche-exemple { margin: 0 0 10px; }
.tel-titre { font-family: var(--titres); font-weight: 700; font-size: 1.05rem; line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 12px; }
.tel-reponses { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.tel-bouton {
	display: block; text-align: center; font-weight: 600; font-size: 0.85rem; padding: 9px 10px; margin-top: 8px;
	border-radius: 999px; color: #ffffff; background: linear-gradient(180deg, #2b7de9, var(--bleu)); box-shadow: var(--ombre-action);
}
.tel-reponses .tel-bouton { margin: 0; padding: 12px 10px; }
.tel-bouton.secondaire { background: #ffffff; color: var(--encre); box-shadow: inset 0 0 0 1px var(--bordure); }
.tel-bouton.copie { background: var(--vert-clair); color: var(--vert); box-shadow: inset 0 0 0 1px rgba(24, 128, 56, 0.3); }
.tel-puces { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.tel-puce { font-size: 0.74rem; line-height: 1.3; padding: 6px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--bordure); }
.tel-puce.choisie { background: var(--bleu-clair); color: var(--bleu-fonce); box-shadow: inset 0 0 0 1.5px var(--bleu); }
.tel-avis {
	font-size: 0.8rem; line-height: 1.5; margin: 0 0 6px; padding: 10px 12px;
	border: 1px solid var(--bordure); border-radius: 12px; box-shadow: inset 0 1px 2px rgba(60, 64, 67, 0.06);
}
.tel-case { display: flex; gap: 8px; align-items: flex-start; font-size: 0.78rem; line-height: 1.35; margin: 12px 0 8px; }
.tel-coche {
	flex: none; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 4px;
	background: var(--bleu); color: #ffffff; font-size: 0.65rem; font-weight: 700;
}
.tel-champ { font-size: 0.8rem; margin: 0 0 4px; padding: 8px 12px; border: 1px solid var(--bleu); border-radius: 12px; box-shadow: var(--anneau); }


/* Après le scan, version animée (`.apres-scene`, reprise de la proposition 4 de
   `design/parcours-vitrine/`). vitrine.js pose `anime` sur la section : la scène
   s'affiche et s'épingle, la version fixe ne reste que pour les lecteurs d'écran. */
.apres-scene { display: none; }
.vitrine section.apres-scan.anime { max-width: none; padding: 0; }
.apres-scan.anime .apres-statique {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.apres-scan.anime .apres-scene { display: block; }
.apres-scene .tel {
	position: relative; width: 280px; aspect-ratio: 9 / 18; box-sizing: border-box; border-radius: 44px;
	background: #111214; padding: 10px; will-change: transform;
	box-shadow: 0 0 0 1.5px #3c4043 inset, 0 2px 3px rgba(0, 0, 0, 0.35), 0 50px 90px -30px rgba(0, 0, 0, 0.55);
}
.apres-scene .tel::before { content: ""; position: absolute; z-index: 3; top: 20px; left: 50%; width: 76px; height: 20px; translate: -50% 0; border-radius: 999px; background: #111214; }
.apres-scene .tel-vitre { position: relative; height: 100%; border-radius: 35px; overflow: hidden; background: #fff; }
.apres-scene .tel-ecran { position: absolute; inset: 0; padding: 58px 20px 20px; opacity: 0; }
.apres-scene .tel-ecran.actif { opacity: 1; }
.apres-scene .tel .t-exemple { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--encre-douce); margin: 0 0 10px; }
.apres-scene .tel h4 { font-family: var(--titres); font-size: 1.12rem; line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 14px; color: var(--encre); }
.apres-scene .t-reponses { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
.apres-scene .t-bouton { position: relative; display: block; text-align: center; font-weight: 600; font-size: 0.86rem; padding: 11px 10px; border-radius: 999px; color: #fff; background: linear-gradient(180deg, #2b7de9, var(--bleu)); box-shadow: var(--ombre-action); margin-top: 8px; }
.apres-scene .t-reponses .t-bouton { margin: 0; padding: 14px 10px; }
.apres-scene .t-bouton.sec { background: #fff; color: var(--encre); box-shadow: inset 0 0 0 1px var(--bordure); }
.apres-scene .t-bouton.copie { background: var(--vert-clair); color: var(--vert); box-shadow: inset 0 0 0 1px rgba(24, 128, 56, 0.3); }
.apres-scene .t-puces { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.apres-scene .t-puce { font-size: 0.75rem; line-height: 1.3; padding: 6px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--bordure); color: var(--encre); background: #fff; }
.apres-scene .t-puce.on { background: var(--bleu-clair); color: var(--bleu-fonce); box-shadow: inset 0 0 0 1.5px var(--bleu); }
.apres-scene .t-avis { font-size: 0.8rem; line-height: 1.55; margin: 0 0 6px; padding: 10px 12px; border: 1px solid var(--bordure); border-radius: 12px; color: var(--encre); min-height: 7.5em; }
.apres-scene .t-case { display: flex; gap: 8px; align-items: flex-start; font-size: 0.78rem; line-height: 1.35; margin: 12px 0 8px; color: var(--encre); }
.apres-scene .t-coche { flex: none; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; background: var(--bleu); color: #fff; font-size: 0.65rem; font-weight: 700; }
.apres-scene .t-champ { font-size: 0.8rem; margin: 0 0 4px; padding: 8px 12px; border: 1px solid var(--bleu); border-radius: 12px; box-shadow: var(--anneau); color: var(--encre); }
.apres-scene .doigt { position: absolute; z-index: 4; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgba(32, 33, 36, 0.18); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 6px 14px rgba(0, 0, 0, 0.25); opacity: 0; pointer-events: none; }

.apres-scene .carte-avis { width: 320px; padding: 20px 22px; border-radius: 22px; background: #fff; color: var(--encre); box-shadow: 0 0 0 1px rgba(60, 64, 67, 0.08), 0 2px 4px rgba(60, 64, 67, 0.2), 0 40px 70px -28px rgba(60, 64, 67, 0.45); }
.apres-scene .carte-avis .tete { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.apres-scene .carte-avis .rond { width: 34px; height: 34px; border-radius: 50%; background: var(--sauge); display: grid; place-items: center; font-weight: 700; color: var(--vert); }
.apres-scene .etoiles-svg { display: flex; gap: 3px; }
.apres-scene .etoiles-svg svg { width: 18px; height: 18px; }
.apres-scene .etoiles-svg path { fill: none; stroke: var(--jaune); stroke-width: 1.6; stroke-linejoin: round; }
.apres-scene .etoiles-svg path.plein { fill: var(--jaune); }
.apres-scene .carte-avis p { font-size: 0.92rem; line-height: 1.55; margin: 0; }
.apres-scene .carte-espace { width: 300px; padding: 18px 20px; border-radius: 22px; background: #fff; color: var(--encre); box-shadow: 0 0 0 1px rgba(60, 64, 67, 0.08), 0 2px 4px rgba(60, 64, 67, 0.2), 0 40px 70px -28px rgba(60, 64, 67, 0.45); }
.apres-scene .carte-espace .ligne-espace { display: flex; justify-content: space-between; align-items: center; font-weight: 700; }
.apres-scene .pastille { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--rouge); color: #fff; font-size: 0.78rem; font-weight: 700; display: inline-grid; place-items: center; }
.apres-scene .carte-espace p { margin: 10px 0 0; font-size: 0.88rem; color: var(--encre-douce); }

.apres-scene { position: relative; height: 100vh; overflow: hidden; background: #fbfbfc; }
.apres-scene .decor { position: absolute; inset: 0; will-change: transform; }
.apres-scene .decor img.fond { width: 100%; height: 100%; object-fit: cover; }
.apres-scene .decor::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.1) 40%, rgba(0, 0, 0, 0.25) 100%); }
.apres-scene .decor .plaque-d { position: absolute; z-index: 1; width: 10vw; left: 30vw; bottom: 28vh; filter: drop-shadow(0 20px 24px rgba(0, 0, 0, 0.5)); }
/* Le voile clair : la scène passe de la photo au fond du site. */
.apres-scene .voile { position: absolute; inset: 0; opacity: 0; background-color: #fbfbfc;
	background-image: radial-gradient(55% 50% at 50% 55%, rgba(26, 115, 232, 0.13), transparent 70%), radial-gradient(circle, rgba(60, 64, 67, 0.16) 1px, transparent 1.4px);
	background-size: 100% 100%, 22px 22px; }
.apres-scene .ondes { position: absolute; z-index: 2; width: 200px; height: 200px; margin: -100px 0 0 -100px; overflow: visible; pointer-events: none; }
.apres-scene .ondes circle { fill: none; stroke: #ffffff; stroke-width: 2.5; }
.apres-scene .accroche { position: absolute; z-index: 3; left: 0; right: 0; top: 11vh; text-align: center; padding: 0 6vw; }
.apres-scene .accroche h2 { font-family: var(--titres); font-size: clamp(2.3rem, 5.4vw, 5rem); line-height: 1; letter-spacing: -0.045em; margin: 0; }
.apres-scene .accroche p { color: #3c4043; font-size: 1.15rem; margin: 14px 0 0; }
.apres-scene .legendes { position: absolute; z-index: 4; left: 6vw; top: 16vh; width: 28vw; }
.apres-scene .legende { position: absolute; top: 0; left: 0; right: 0; opacity: 0; }
.apres-scene .legende h2 { font-family: var(--titres); font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.04; letter-spacing: -0.035em; margin: 0 0 14px; }
.apres-scene .legende p { color: #3c4043; font-size: 1.05rem; line-height: 1.55; margin: 0; }
.apres-scene .mots { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.apres-scene .mot { position: absolute; padding: 9px 16px; border-radius: 999px; font-weight: 600; font-size: 0.95rem; white-space: nowrap; color: var(--encre); background: #fff; opacity: 0;
	box-shadow: 0 0 0 1px rgba(60, 64, 67, 0.08), 0 1px 3px rgba(60, 64, 67, 0.2), 0 18px 30px -18px rgba(60, 64, 67, 0.45); }
.apres-scene .mot.cle { color: var(--bleu-fonce); background: var(--bleu-clair); box-shadow: inset 0 0 0 1.5px var(--bleu), 0 16px 30px -14px rgba(26, 115, 232, 0.55); }
.apres-scene .mot.loin { font-size: 0.8rem; filter: blur(1.2px); }
.apres-scene .porte-tel { position: absolute; z-index: 5; left: 50%; top: 52%; translate: -50% -50%; perspective: 1400px; }
.apres-scene .cartes { position: absolute; z-index: 6; right: 5vw; top: 50%; translate: 0 -50%; width: 330px; }
.apres-scene .cartes > * { position: absolute; right: 0; top: 0; width: 100%; box-sizing: border-box; opacity: 0; }
.apres-scene .carte-avis .variante { margin: 0; }
/* Pas de style en ligne (CSP) : les trois variantes se superposent dans la même case. */
.apres-scene .variantes { display: grid; }
.apres-scene .variantes .variante { grid-area: 1 / 1; }
.apres-scene .variante[data-cachee] { opacity: 0; }
.apres-scene .carte-espace .retour-texte { color: var(--encre); }
.apres-scene .t-avis.court { min-height: 0; }
.apres-scene .enveloppe { position: absolute; z-index: 7; width: 64px; height: 46px; margin: -23px 0 0 -32px; opacity: 0; }
.apres-scene .enveloppe path { fill: #fff; stroke: var(--bleu); stroke-width: 2; stroke-linejoin: round; }
.apres-scene .compteurs { position: absolute; z-index: 4; left: 6vw; bottom: 8vh; display: flex; gap: 36px; opacity: 0; }
.apres-scene .compteurs b { display: block; font-family: var(--titres); font-size: 2.6rem; letter-spacing: -0.03em; }
.apres-scene .compteurs span { color: var(--encre-douce); font-size: 0.88rem; }
/* Le choix du client se lit sur le bouton touché ; « Oui » en vert, « Non » en rouge dans les légendes. */
.apres-scene .t-bouton.oui.choisi { background: var(--bleu-fonce); box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.25), var(--ombre-action); }
.apres-scene .t-bouton.non.choisi { background: var(--rouge-clair); color: var(--rouge); box-shadow: inset 0 0 0 1.5px var(--rouge), 0 0 0 4px rgba(217, 48, 37, 0.15); }
.apres-scene .legende[data-l="2"] .surtitre { color: var(--vert); }
.apres-scene .legende[data-l="5"] .surtitre { color: var(--rouge); }
/* Transition de la branche « Non » : une question plein écran avant la suite. */
.apres-scene .chapitre {
	position: absolute; z-index: 6; left: 0; right: 0; top: 50%; translate: 0 -50%; margin: 0; padding: 0 6vw; opacity: 0;
	text-align: center; font-family: var(--titres); font-weight: 700; line-height: 1.02; letter-spacing: -0.045em;
	font-size: clamp(2.4rem, 6vw, 5.4rem); color: var(--encre); pointer-events: none;
}
.apres-scene .chapitre span { color: var(--rouge); }
.apres-scene .titre-final { position: absolute; z-index: 6; left: 0; right: 0; top: 12vh; text-align: center; padding: 0 6vw; margin: 0; opacity: 0; font-family: var(--titres); font-size: clamp(1.8rem, 3.6vw, 3.2rem); letter-spacing: -0.035em; font-weight: 700; line-height: 1.1; }
.apres-scene .t-exemple-carte { margin: 12px 0 0; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--encre-douce); }

/* Mobile : légende en haut, téléphone dessous, cartes qui montent du bas. */
@media (max-width: 700px) {
	.apres-scene .decor .plaque-d { width: 30vw; left: 10vw; bottom: 28vh; }
	.apres-scene .accroche { top: 9vh; }
	.apres-scene .legendes { left: 7vw; right: 7vw; width: auto; top: 7vh; }
	.apres-scene .legende h2 { font-size: 1.75rem; margin-bottom: 8px; }
	.apres-scene .legende p { font-size: 0.95rem; }
	.apres-scene .porte-tel { top: 60%; }
	.apres-scene .porte-tel .tel { width: 220px; }
	.apres-scene .mot { font-size: 0.78rem; padding: 7px 12px; }
	.apres-scene .mot.loin { display: none; }
	.apres-scene .cartes { left: 50%; right: auto; top: auto; bottom: 5vh; translate: -50% 0; width: 86vw; }
	.apres-scene .cartes > * { top: auto; bottom: 0; }
	.apres-scene .compteurs { left: 7vw; right: 7vw; top: 25vh; bottom: auto; gap: 22px; }
	.apres-scene .compteurs b { font-size: 2rem; }
	.apres-scene .compteurs span { font-size: 0.75rem; }
	.apres-scene .titre-final { top: 8vh; }
}

/* Tarif : quatre offres, la création de la fiche surélevée, la suppression d'avis à l'encre. */
.tarif > .grand { max-width: 20em; }
.tarif-offres { display: grid; grid-template-columns: 1fr 1.08fr 1fr 1fr; gap: 20px; align-items: start; margin-top: 12px; }
.tarif-carte { position: relative; margin: 0; padding: 32px 28px; overflow: hidden; display: flex; flex-direction: column; }
.tarif-carte .bouton { align-self: flex-start; }
.tarif-principale {
	margin-top: -18px; padding-top: 40px;
	box-shadow: 0 0 0 2px var(--bleu), 0 2px 4px rgba(26, 115, 232, 0.25), 0 50px 80px -36px rgba(26, 115, 232, 0.55);
}
.tarif-pastille {
	align-self: flex-start; margin: 0 0 14px; padding: 4px 12px; border-radius: 999px;
	font-size: 0.78rem; font-weight: 700; color: var(--bleu-fonce); background: var(--bleu-clair);
}
.tarif-carte h3 { margin-bottom: 4px; }
.tarif-carte::before {
	content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
	background: radial-gradient(70% 45% at 100% 0%, rgba(26, 115, 232, 0.12), transparent 70%);
}
.tarif-prix { font-family: var(--titres); font-size: 2.4rem; font-weight: 750; letter-spacing: -0.035em; margin: 6px 0 2px; }
.tarif-prix small { font-size: 0.95rem; font-weight: 600; letter-spacing: 0; color: var(--encre-douce); }
/* Quatre cartes sur une ligne au-delà de 1200 px, deux par ligne en dessous. */
@media (max-width: 1200px) {
	.tarif-offres { grid-template-columns: 1fr 1fr; row-gap: 64px; }
	.tarif-principale { margin-top: 0; }
}
.coches { list-style: none; padding: 0; margin: 20px 0 26px; flex: 1; font-size: 0.95rem; }
.coches li { position: relative; padding: 8px 0 8px 34px; border-top: 1px solid #e8eaed; }
.coches li::before {
	content: ""; position: absolute; left: 0; top: 10px; width: 20px; height: 20px; border-radius: 50%;
	background: var(--vert-clair) no-repeat center / 12px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.5 2.5L10 3' fill='none' stroke='%23188038' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Questions */
.questions { max-width: 760px !important; }
.questions details {
	margin: 0; padding: 20px 0; border-top: 1px solid #e8eaed; font-size: 1rem; color: #3c4043;
}
.questions details summary {
	list-style: none; display: flex; justify-content: space-between; gap: 16px;
	color: var(--encre); font-family: var(--titres); font-size: 1.12rem; font-weight: 650;
}
.questions details summary::-webkit-details-marker { display: none; }
.questions details summary::after {
	content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; line-height: 27px; text-align: center;
	color: var(--bleu); background: var(--carte); box-shadow: inset 0 0 0 1px var(--bordure), 0 4px 10px -6px rgba(60, 64, 67, 0.4);
	transition: rotate 0.2s;
}
.questions details[open] summary::after { rotate: 45deg; }
.questions details p { margin-top: 10px; }
.questions-guide { margin: 26px 0 0; color: var(--encre-douce); }

/* Contact */
.contact-carte { max-width: 760px; margin: 0 auto; text-align: center; padding: 56px 32px; }
.contact-carte .bouton { margin-top: 12px; font-size: 1.05rem; overflow-wrap: anywhere; }
/* Formulaire de rappel : deux colonnes, champs alignés à gauche dans la carte centrée. */
.rappel { text-align: left; margin-top: 28px; }
.rappel-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.rappel-grille label { margin-top: 16px; }
.rappel-large { grid-column: 1 / -1; }
.rappel textarea {
	width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; resize: vertical;
	border: 1px solid var(--bordure); border-radius: 12px; background: var(--champ, #fff); color: var(--encre);
}
.rappel textarea:focus { outline: none; border-color: var(--bleu); box-shadow: var(--anneau); }
.rappel button { margin-top: 24px; }
.rappel-note { margin-top: 18px; font-size: 0.88rem; }
/* Champ piège : hors de l'écran pour un humain, rempli par un robot. */
.rappel-piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-carte::before {
	content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
	background: radial-gradient(60% 60% at 50% 0%, rgba(26, 115, 232, 0.12), transparent 70%);
}

.pied { max-width: calc(var(--largeur) + 2 * var(--gouttiere)); margin: 0 auto; padding: 40px var(--gouttiere) 64px; border-top: 1px solid #e8eaed; }
.pied p { margin-bottom: 8px; }
.pied-liens { display: flex; flex-wrap: wrap; gap: 6px 20px; }

/* Pages légales (mentions, confidentialité) : une colonne de lecture, des
   sections en cartes posées sur la trame, l'identité de l'éditeur en grille. */
.legal { max-width: 760px; margin: 0 auto; padding: 40px 24px 72px; }
.legal h1 { font-size: clamp(2rem, 4.4vw, 3rem); margin-bottom: 14px; }
.legal-date { font-size: 0.88rem; color: var(--encre-douce); margin: 0 0 32px; }
.vitrine .legal-section { max-width: none; padding: 30px 32px; margin: 0 0 18px; }
.legal-section h2 { font-family: var(--titres); font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 14px; scroll-margin-top: 24px; }
.legal-section p, .legal-section li { color: #3c4043; }
.legal-section p:last-child { margin-bottom: 0; }
.legal-section ul { margin: 0 0 14px; padding-left: 20px; }
.legal-section ul:last-child { margin-bottom: 0; }
.legal-section li + li { margin-top: 8px; }
.legal-sommaire { padding: 22px 32px; margin-bottom: 18px; }
.legal-sommaire ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 32px; }
.legal-sommaire li { padding: 3px 0; break-inside: avoid; }
.identite { display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; margin: 18px 0 0; }
.identite dt { font-size: 0.85rem; font-weight: 600; color: var(--encre-douce); padding-top: 2px; }
.identite dd { margin: 0; color: var(--encre); }
.legal-renvoi { margin-top: 28px; color: var(--encre-douce); }

/* Guide (index et articles) : la colonne de lecture des pages légales, un
   en-tête posé sur un fragment de plan dessiné, l'épingle colorée par thème
   (bleu : créer, rouge : ce qui bloque, jaune : les avis, vert : les réglages). */
/* Index du guide : la largeur des autres pages. Articles et pages légales
   gardent 760 px, une largeur de lecture. */
.vitrine .guide { max-width: calc(var(--largeur) + 2 * var(--gouttiere)); padding-left: var(--gouttiere); padding-right: var(--gouttiere); }
.article { max-width: 760px; }
.vitrine .article section, .vitrine .guide section, .vitrine section.etape { max-width: none; padding: 0; margin: 0; }
.ariane { font-size: 0.86rem; color: var(--encre-douce); margin: 0 0 22px; }
.ariane ol { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; padding: 0; list-style: none; }
.ariane li + li::before { content: "/"; margin: 0 8px; color: var(--bordure-forte); }
.ariane a { color: var(--encre-douce); }
.article-tete {
	position: relative; overflow: hidden; border-radius: 26px; padding: 40px 36px 34px; margin: 0 0 28px;
	background:
		url("/images/guide/plan.svg") right -120px top -70px / 400px auto no-repeat,
		linear-gradient(160deg, #ffffff 30%, var(--teinte-claire, var(--bleu-clair)));
	box-shadow: 0 0 0 1px rgba(60, 64, 67, 0.1), 0 1px 3px rgba(60, 64, 67, 0.18), 0 40px 70px -44px rgba(60, 64, 67, 0.55);
}
/* Le titre laisse à droite la place de l'épingle du filigrane (plan.svg). */
.article-tete h1 { font-size: clamp(1.9rem, 4.2vw, 2.8rem); margin-bottom: 14px; max-width: min(18em, calc(100% - 96px)); }
.article-tete .chapeau { margin-bottom: 18px; }
.signature { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.88rem; color: var(--encre-douce); margin: 0; }
.theme-creer { --teinte: var(--bleu); --teinte-claire: var(--bleu-clair); }
.theme-blocage { --teinte: var(--rouge); --teinte-claire: var(--rouge-clair); }
.theme-avis { --teinte: #e37400; --teinte-claire: #fef7e0; }
.theme-reglage { --teinte: var(--vert); --teinte-claire: var(--vert-clair); }
.article-tete .surtitre, .guide-carte .surtitre { color: var(--teinte, var(--bleu)); display: inline-flex; align-items: center; gap: 8px; }
.article-tete .surtitre::before, .guide-carte .surtitre::before {
	content: ""; width: 10px; height: 10px; border-radius: 50% 50% 50% 0; rotate: -45deg;
	background: var(--teinte, var(--bleu)); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.article-corps { font-size: 1.06rem; line-height: 1.7; color: #3c4043; }
.article-corps h2 { font-family: var(--titres); font-size: 1.55rem; font-weight: 700; letter-spacing: -0.025em; color: var(--encre); margin: 44px 0 14px; scroll-margin-top: 24px; }
.article-corps h3 { margin-top: 26px; }
.article-corps ul, .article-corps ol { padding-left: 22px; margin: 0 0 16px; }
.article-corps li + li { margin-top: 8px; }
.article-corps strong { color: var(--encre); }
.article-corps .etapes { counter-reset: etape; list-style: none; padding: 0; }
.article-corps .etapes > li { counter-increment: etape; position: relative; padding: 2px 0 0 52px; min-height: 36px; }
.article-corps .etapes > li + li { margin-top: 16px; }
.article-corps .etapes > li::before {
	content: counter(etape); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%;
	display: grid; place-items: center; font-weight: 700; font-size: 0.95rem; color: #fff;
	background: linear-gradient(180deg, #2b7de9, var(--bleu));
	box-shadow: 0 1px 2px rgba(26, 115, 232, 0.45), 0 8px 16px -8px rgba(26, 115, 232, 0.7);
}
.encadre {
	border-radius: 18px; padding: 22px 26px; margin: 26px 0; background: var(--teinte-claire, var(--bleu-clair));
	box-shadow: inset 4px 0 0 var(--teinte, var(--bleu)), 0 1px 2px rgba(60, 64, 67, 0.12);
}
.encadre p:last-child, .encadre ul:last-child { margin-bottom: 0; }
.encadre-titre { font-weight: 700; color: var(--encre); margin-bottom: 6px; }
.tableau { width: 100%; border-collapse: collapse; margin: 18px 0 22px; font-size: 0.97rem; }
.tableau th, .tableau td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #e8eaed; vertical-align: top; }
.tableau th { color: var(--encre); font-weight: 650; background: #f8f9fa; }
.tableau-defile { overflow-x: auto; }
.exemple {
	position: relative; margin: 14px 0 22px; padding: 20px 24px 20px 56px; border-radius: 18px;
	background: #fff; color: var(--encre); font-size: 1rem; line-height: 1.6;
	box-shadow: 0 0 0 1px rgba(60, 64, 67, 0.1), 0 1px 2px rgba(60, 64, 67, 0.16), 0 24px 40px -30px rgba(60, 64, 67, 0.5);
}
.exemple::before {
	content: "\201C"; position: absolute; left: 18px; top: 6px; font-size: 3rem; line-height: 1;
	font-weight: 800; color: var(--teinte, var(--bleu)); opacity: 0.7;
}
.article-sources { font-size: 0.9rem; color: var(--encre-douce); margin-top: 40px; }
.article-sources ul { padding-left: 20px; }
.vitrine .article .article-appel { text-align: center; padding: 40px 28px; margin: 44px 0 0; overflow: hidden; }
.article-appel::before {
	content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
	background: radial-gradient(60% 70% at 50% 0%, rgba(26, 115, 232, 0.13), transparent 70%);
}
.article-appel h2 { font-size: 1.5rem; margin: 0 0 10px; }
.article-appel p { color: #3c4043; max-width: 32em; margin: 0 auto 18px; }
.vitrine .article .article-voisins { margin-top: 48px; }
.article-voisins h2 { font-size: 1.2rem; font-weight: 700; margin: 0 0 14px; }

/* Simulateur de note (/guide/calculateur-note-google) : les champs à gauche,
   le résultat à droite sur un papier teinté. Caché sans JavaScript. */
.simulateur[hidden] { display: none; }
.simulateur {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); margin: 8px 0 12px;
	border-radius: 24px; overflow: hidden; background: var(--carte);
	box-shadow: 0 0 0 1px rgba(60, 64, 67, 0.08), 0 1px 2px rgba(60, 64, 67, 0.18), 0 40px 70px -40px rgba(60, 64, 67, 0.55);
}
.sim-champs { border: 0; margin: 0; padding: 26px 28px 28px; min-width: 0; }
.sim-champs legend { float: left; width: 100%; font-weight: 700; color: var(--encre); margin-bottom: 4px; }
.sim-champs label { margin: 14px 0 6px; }
.sim-champs input { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.sim-aide { font-size: 0.86rem; color: var(--encre-douce); margin: 6px 0 0; }
.sim-sortie {
	position: relative; padding: 26px 28px 28px;
	background: radial-gradient(90% 60% at 100% 0%, color-mix(in srgb, var(--teinte) 22%, transparent), transparent 70%), var(--teinte-claire);
	box-shadow: inset 1px 0 0 rgba(60, 64, 67, 0.08);
}
.sim-titre { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-douce); margin: 0; }
.sim-chiffre {
	font-family: var(--titres); font-size: clamp(3.4rem, 8vw, 4.6rem); font-weight: 800; line-height: 1; letter-spacing: -0.05em;
	margin: 6px 0 8px; font-variant-numeric: tabular-nums;
	background: linear-gradient(180deg, color-mix(in srgb, var(--teinte) 70%, #ffffff), var(--teinte)); -webkit-background-clip: text; background-clip: text; color: transparent;
	filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--teinte) 25%, transparent));
}
.sim-phrase { color: var(--encre); margin: 0 0 6px; }
.sim-delai { font-weight: 650; color: var(--encre); margin: 0; }
.sim-delai:empty { display: none; }
.sim-titre-poids { margin-top: 22px; }
.sim-poids { list-style: none; padding: 0; margin: 10px 0 0; font-size: 0.93rem; }
.sim-poids li { display: flex; gap: 12px; align-items: baseline; padding: 7px 0; border-top: 1px solid rgba(60, 64, 67, 0.1); }
.sim-etoiles { flex: none; letter-spacing: 0.06em; color: #f29900; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); }
/* La même mécanique sur /supprimer-avis, en rouge : la note avant, barrée, puis après. */
.retrait-simulation[hidden] { display: none; }
.vitrine section.retrait-simulation { padding-top: 24px; }
.retrait-simulation .simulateur { max-width: 920px; margin-top: 28px; }
.retrait-simulation select { font-size: 1.05rem; }
.ret-avant { color: var(--encre-douce); font-size: 0.55em; text-decoration: line-through; text-decoration-thickness: 3px; opacity: 0.55; }
.retrait-simulation .sim-chiffre span[aria-hidden] { font-size: 0.5em; vertical-align: 0.2em; }
.retrait-simulation .bouton { margin-top: 16px; }
@media (max-width: 700px) {
	.simulateur { grid-template-columns: 1fr; border-radius: 20px; }
	.sim-champs, .sim-sortie { padding: 22px 20px; }
	.sim-sortie { box-shadow: inset 0 1px 0 rgba(60, 64, 67, 0.08); }
}

/* Index du guide : des cartes posées sur la trame, chacune avec son épingle. */
.guide-intro { max-width: 760px; margin-bottom: 36px; }
.vitrine .guide .guide-groupe + .guide-groupe { margin-top: 48px; }
.guide-groupe > h2 { font-family: var(--titres); font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 18px; }
.guide-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.guide-carte { display: flex; flex-direction: column; height: 100%; margin: 0; padding: 28px 28px 24px; transition: translate 0.2s, box-shadow 0.2s; }
.guide-carte:hover { translate: 0 -3px; }
.guide-carte h2, .guide-carte h3 { font-size: 1.2rem; margin: 0 0 10px; line-height: 1.25; }
.guide-carte h2 a, .guide-carte h3 a { color: var(--encre); text-decoration: none; }
.guide-carte h2 a::after, .guide-carte h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.guide-carte h2 a:hover, .guide-carte h3 a:hover { color: var(--bleu); }
.guide-carte p { color: #3c4043; font-size: 0.97rem; flex: 1; }
.guide-carte .surtitre { margin-bottom: 12px; flex: 0 0 auto; }
.guide-lire { font-weight: 600; font-size: 0.9rem; color: var(--bleu); margin: 0; flex: 0; }

/* Page introuvable */
.introuvable { text-align: center; padding-top: 96px; }
.introuvable .chapeau { margin: 0 auto 26px; }

/* Pages connectées (activation, connexion, espace, back-office, prospection) :
   le thème de la vitrine à l'échelle d'un formulaire, l'en-tête à la manière
   du bandeau. */
.appli h1 { font-size: 2rem; line-height: 1.12; letter-spacing: -0.03em; margin-bottom: 10px; }
.appli h2 { letter-spacing: -0.02em; }
.appli header.marque .logo { font-size: 1.3rem; }
.appli header.marque a.discret { color: var(--encre); font-size: 0.93rem; text-decoration: none; }
.appli header.marque a.discret:hover { color: var(--bleu); }
.appli .carte > .bouton { margin-top: 8px; }
.appli .fini::before { background: radial-gradient(70% 55% at 50% 0%, rgba(251, 188, 4, 0.18), transparent 70%); }

/* Schéma du parcours d'avis (espace) : la question, puis ses deux branches.
   Le vert porte le « Oui », le rouge le « Non ». */
.schema-parcours {
	margin: 14px 0 22px; padding: 22px 18px 20px; border-radius: 18px;
	background:
		radial-gradient(60% 70% at 25% 100%, rgba(52, 168, 83, 0.08), transparent 70%),
		radial-gradient(60% 70% at 75% 100%, rgba(217, 48, 37, 0.06), transparent 70%),
		radial-gradient(circle at 1px 1px, rgba(60, 64, 67, 0.13) 1px, transparent 1.4px) 0 0 / 14px 14px,
		var(--survol);
	box-shadow: inset 0 0 0 1px rgba(60, 64, 67, 0.08), inset 0 2px 6px rgba(60, 64, 67, 0.08);
}
.schema-parcours svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.schema-question {
	display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%; margin: 0 auto;
	padding: 10px 16px 10px 12px; border-radius: 999px; background: var(--carte);
	font-family: var(--titres); font-weight: 650; font-size: 0.98rem; color: var(--encre);
	box-shadow: 0 0 0 1px rgba(60, 64, 67, 0.1), 0 1px 2px rgba(60, 64, 67, 0.22), 0 16px 30px -16px rgba(60, 64, 67, 0.45);
}
.schema-question svg { flex: none; width: 26px; height: 26px; padding: 4px; border-radius: 50%; color: var(--bleu); background: var(--bleu-clair); }
.schema-parcours .schema-fourche { display: block; width: 100%; height: 40px; stroke: var(--bordure-forte); stroke-width: 1.6; stroke-dasharray: 4 5; }
.schema-branches { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.schema-branche { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; }
.schema-branche li { position: relative; display: flex; align-items: center; gap: 9px; width: 100%; max-width: 230px; padding: 9px 12px 9px 9px; border-radius: 13px; background: var(--carte); font-size: 0.88rem; line-height: 1.25; color: var(--encre); box-shadow: 0 0 0 1px rgba(60, 64, 67, 0.08), 0 1px 2px rgba(60, 64, 67, 0.18), 0 12px 22px -14px rgba(60, 64, 67, 0.4); }
.schema-branche li + li { margin-top: 16px; }
.schema-branche li + li::before { content: ""; position: absolute; left: 50%; top: -16px; height: 16px; border-left: 1.6px dashed var(--bordure-forte); }
.schema-branche li svg { flex: none; width: 30px; height: 30px; padding: 6px; border-radius: 9px; }
.schema-branche .schema-pastille { width: auto; padding: 4px 14px; border-radius: 999px; font-family: var(--titres); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.01em; }
.schema-branche.oui li svg { color: var(--vert); background: var(--vert-clair); }
.schema-branche.oui .schema-pastille { color: #fff; background: var(--vert-vif); box-shadow: 0 1px 2px rgba(24, 128, 56, 0.45), 0 8px 16px -8px rgba(24, 128, 56, 0.7); }
.schema-branche.non li svg { color: var(--rouge); background: var(--rouge-clair); }
.schema-branche.non .schema-pastille { color: #fff; background: var(--rouge); box-shadow: 0 1px 2px rgba(217, 48, 37, 0.45), 0 8px 16px -8px rgba(217, 48, 37, 0.7); }
@media (max-width: 520px) {
	.schema-parcours { padding: 18px 10px 16px; }
	.schema-question { font-size: 0.9rem; border-radius: 16px; }
	.schema-branches { gap: 8px; }
	.schema-branche li { flex-direction: column; text-align: center; gap: 6px; padding: 10px 8px; font-size: 0.82rem; }
}

@media (max-width: 900px) {
	.vitrine section { padding: 64px 16px; }
	.rappel-grille { grid-template-columns: 1fr; }
	.legal { padding: 24px 16px 56px; }
	.article-tete h1 { max-width: none; }
	.article-tete { padding: 30px 22px 26px; border-radius: 22px; background-position: right -150px top -110px, 0 0; background-size: 300px auto, auto; }
	.encadre { padding: 18px 20px; }
	.exemple { padding: 18px 18px 18px 46px; }
	.exemple::before { left: 12px; }
	.vitrine .article .article-appel { padding: 32px 20px; }
	.vitrine .legal-section, .legal-sommaire { padding: 24px 20px; }
	.legal-sommaire ol { columns: 1; }
	.identite { grid-template-columns: 1fr; gap: 2px; }
	.identite dd { margin-bottom: 10px; }
	.bandeau { padding: 18px 16px; }
	.bandeau nav { gap: 16px; }
	.une, .deroule, .avis { grid-template-columns: 1fr; }
	.fiche-une { right: -8px; bottom: -100px; width: 72%; }
	.constat-cartes, .engagements-liste { grid-template-columns: 1fr; }
	.constat-photo { height: 300px; border-radius: 22px; }
	.constat-photo figcaption { left: 16px; top: 16px; }
	.constat-cartes { margin-top: -70px; padding: 0 12px; }
	.constat-carte:nth-child(n) { margin-top: 0; }
	.deroule-fiche { display: none; }
	.engagements-interieur { padding: 56px 24px; border-radius: 24px; }
	.avis-plaques { height: 380px; }
	.tarif-offres { grid-template-columns: 1fr; }
	.tarif-principale { order: -1; margin-top: 0; }
	.tarif-carte { padding: 28px 22px; }
}
@media (max-width: 480px) {
	.fiche-une { width: 84%; bottom: -110px; }
	.fiche-photos { height: 64px; }
	.avis-plaques { height: 300px; }
}

/* Pages métier (/restaurants, /artisans, /commerces, /plaque) : même allure que
   l'accueil, une photo du métier sous la fiche d'exemple, puis ce que la fiche
   doit montrer pour ce métier. Animées par metier.js, complètes sans lui. */
.metier-scene { position: relative; aspect-ratio: 600 / 540; }
.metier-photo {
	position: absolute; left: 0; top: 0; width: 88%; height: 80%; margin: 0; border-radius: 28px; overflow: hidden;
	box-shadow: 0 0 0 1px rgba(60, 64, 67, 0.1), 0 2px 4px rgba(60, 64, 67, 0.22), 0 50px 80px -40px rgba(60, 64, 67, 0.55);
}
.metier-photo img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; }
.metier-photo::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(32, 33, 36, 0) 55%, rgba(32, 33, 36, 0.35));
}
.metier-scene .fiche-une { right: 0; bottom: 0; width: 58%; }
.metier-plaque {
	position: absolute; z-index: 2; left: -4%; bottom: 2%; width: 30%; height: auto; rotate: -9deg;
	filter: drop-shadow(0 2px 2px rgba(60, 64, 67, 0.25)) drop-shadow(0 30px 34px rgba(60, 64, 67, 0.35));
}
.fiche-puces { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px !important; }
.fiche-puce {
	font-size: 0.78rem; font-weight: 600; padding: 5px 11px; border-radius: 999px;
	color: var(--bleu-fonce); background: var(--bleu-clair); box-shadow: inset 0 0 0 1px rgba(26, 115, 232, 0.2);
}
.fiche-puce.neutre { color: var(--encre); background: #ffffff; box-shadow: inset 0 0 0 1px var(--bordure); }

/* Ce que la fiche montre : six cartes, chacune avec son pictogramme dessiné. */
.metier-points > .grand, .metier-points > .chapeau { max-width: 22em; }
.metier-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; padding: 0; list-style: none; }
.metier-grille .carte { margin: 0; padding: 28px 26px 24px; }
.metier-grille .carte:nth-child(3n + 2) { translate: 0 28px; }
.metier-grille .carte:nth-child(3n + 3) { translate: 0 56px; }
.metier-grille p { margin: 0; color: #3c4043; font-size: 0.97rem; }
.picto {
	display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 16px; border-radius: 14px;
	color: var(--teinte, var(--bleu)); background: var(--teinte-claire, var(--bleu-clair));
	box-shadow: inset 0 0 0 1px rgba(60, 64, 67, 0.06), 0 8px 16px -10px var(--teinte, var(--bleu));
}
.picto svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.picto-etoiles { --teinte: #b06000; --teinte-claire: #fef7e0; }
.picto-epingle { --teinte: var(--rouge); --teinte-claire: var(--rouge-clair); }
.picto-fait { --teinte: var(--vert); --teinte-claire: var(--vert-clair); }

/* Sur place : la photo glisse dans son cadre, la liste à côté. */
.metier-duo { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.metier-duo .constat-photo { height: 520px; }
.metier-duo .coches { margin-bottom: 0; }
.metier-duo .discret { margin-top: 18px; }

/* Bande sombre du prix, reprise des engagements. */
.metier-prix .engagements-interieur { display: grid; grid-template-columns: 1fr auto; gap: 24px 48px; align-items: end; }
.metier-prix .grand { margin: 0; max-width: 19em; }
.metier-prix p { color: #bdc1c6; margin: 12px 0 0; max-width: 34em; }
.metier-prix .une-actions { margin: 0; }
.metier-prix .bouton.secondaire { background: rgba(255, 255, 255, 0.08); color: #ffffff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }

/* Artisans : le SMS de fin d'intervention, dans un téléphone dessiné. */
.sms { position: relative; display: flex; justify-content: center; padding: 20px 0 40px; }
.sms::before {
	content: ""; position: absolute; inset: 0 10%; z-index: -1; pointer-events: none;
	background: radial-gradient(50% 50% at 50% 50%, rgba(26, 115, 232, 0.16), transparent 70%);
}
.telephone-sms { flex: 0 0 270px; background: #f8f9fa; }
.sms-de { font-weight: 700; font-size: 0.9rem; text-align: center; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--bordure); }
.sms-bulle {
	margin: 0; padding: 12px 14px; border-radius: 18px 18px 18px 6px; font-size: 0.86rem; line-height: 1.45;
	background: #ffffff; box-shadow: 0 0 0 1px rgba(60, 64, 67, 0.08), 0 1px 2px rgba(60, 64, 67, 0.2), 0 12px 22px -14px rgba(60, 64, 67, 0.5);
}
.sms-heure { margin: 6px 0 0 6px; font-size: 0.72rem; color: var(--encre-douce); }

/* Les autres métiers, en cartes du guide. */
.metier-voisins > h2 { font-family: var(--titres); font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 18px; }

/* Plaque : la galerie des formes, chacune à sa vitesse. */
.plaque-galerie { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px 22px; margin: 40px 0 0; padding: 0; list-style: none; align-items: end; }
.plaque-galerie figure { margin: 0; text-align: center; }
.plaque-galerie img { width: 100%; height: 170px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(60, 64, 67, 0.25)) drop-shadow(0 24px 26px rgba(60, 64, 67, 0.3)); }
.plaque-galerie figcaption { margin-top: 12px; font-weight: 600; font-size: 0.92rem; }
.metier-plaque-grande { width: 38%; left: -6%; bottom: -2%; }
.metier-grille a { font-weight: 600; }

/* Suppression d'avis (/supprimer-avis) : deux avis d'exemple posés sur la photo,
   l'un barré et retiré, l'autre maintenu et remboursé. Des objets du site, pas
   une capture de Google. */
.retrait-avis {
	position: absolute; z-index: 1; width: 56%; margin: 0; padding: 16px 18px 14px; border-radius: 18px;
	background: var(--carte);
	box-shadow: 0 0 0 1px rgba(60, 64, 67, 0.08), 0 2px 4px rgba(60, 64, 67, 0.2), 0 40px 70px -28px rgba(60, 64, 67, 0.45);
}
.retrait-avis p { margin: 0 0 6px; }
.retrait-retire { right: 0; top: 46%; rotate: 2deg; }
.retrait-maintenu { left: 4%; bottom: -4%; rotate: -2.5deg; z-index: 2; }
.retrait-auteur { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: var(--encre-douce); }
.retrait-initiale {
	display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
	font-weight: 700; color: #ffffff; background: linear-gradient(160deg, #8ab4f8, var(--bleu));
}
.retrait-maintenu .retrait-initiale { background: linear-gradient(160deg, #81c995, var(--vert)); }
.retrait-texte { font-size: 0.95rem; }
.retrait-retire .retrait-texte { text-decoration: line-through; text-decoration-color: var(--rouge); text-decoration-thickness: 2px; color: var(--encre-douce); }
.retrait-etat {
	display: inline-block; margin: 4px 0 0 !important; padding: 3px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 650;
	color: var(--vert); background: var(--vert-clair);
}
.retrait-maintenu .retrait-etat { color: var(--bleu-fonce); background: var(--bleu-clair); }
/* Ce que Google garde : une croix à la place de la coche. */
.coches-non li::before {
	background-color: var(--rouge-clair);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 3l6 6M9 3l-6 6' fill='none' stroke='%23d93025' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* La bande sombre : trois étapes, puis le tableau des prix. */
.suppression-etapes { margin: 36px 0 32px; padding: 0; list-style: none; }
.tableau-sombre { color: #e8eaed; max-width: 46em; }
.tableau-sombre caption { caption-side: bottom; text-align: left; padding-top: 12px; color: #9aa0a6; }
.tableau-sombre th { color: #ffffff; background: rgba(255, 255, 255, 0.06); }
.tableau-sombre th, .tableau-sombre td { border-bottom-color: rgba(255, 255, 255, 0.12); }
.engagements .tableau-defile + .une-actions .bouton.secondaire { background: rgba(255, 255, 255, 0.08); color: #ffffff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }

/* Accueil, section Tarif : la suppression d'avis, quatrième carte, à l'encre pour
   dire un autre geste (réparer, pas créer). L'avis barré déborde au-dessus. */
.tarif-encre {
	overflow: visible; margin-top: 46px; color: #e8eaed;
	background:
		radial-gradient(80% 50% at 0% 100%, rgba(217, 48, 37, 0.3), transparent 70%),
		radial-gradient(70% 40% at 100% 0%, rgba(26, 115, 232, 0.22), transparent 70%),
		linear-gradient(180deg, #2d2e31, var(--encre-fond));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 4px rgba(32, 33, 36, 0.3), 0 50px 80px -36px rgba(32, 33, 36, 0.7);
}
.tarif-encre::before { display: none; }
.tarif-encre h3, .tarif-encre .tarif-prix { color: #ffffff; }
.tarif-encre .tarif-prix small, .tarif-encre .discret { color: #bdc1c6; }
.tarif-encre .coches li { border-top-color: rgba(255, 255, 255, 0.12); color: #e8eaed; }
.tarif-encre .coches li::before {
	background-color: rgba(129, 201, 149, 0.18);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.5 2.5L10 3' fill='none' stroke='%2381c995' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.tarif-encre .bouton { background: #ffffff; color: var(--encre); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 18px 30px -14px rgba(0, 0, 0, 0.6); }
.tarif-lien { margin-top: 14px; font-weight: 600; color: #8ab4f8; }
.tarif-avis { position: relative; width: auto; margin: -78px -14px 20px 8px; padding: 12px 14px 10px; rotate: 3deg; color: var(--encre); }
.tarif-avis .retrait-texte { font-size: 0.86rem; }

@media (max-width: 900px) {
	.metier-scene { margin: 0 8px 40px 0; }
	.metier-scene .fiche-une { width: 70%; bottom: -40px; }
	.metier-plaque, .metier-plaque-grande { left: auto; right: -2%; top: -6%; bottom: auto; width: 26%; rotate: 9deg; }
	.metier-grille { grid-template-columns: 1fr; }
	.metier-grille .carte:nth-child(n) { translate: none; }
	.metier-duo { grid-template-columns: 1fr; gap: 32px; }
	.metier-duo .constat-photo { height: 320px; }
	.metier-prix .engagements-interieur { grid-template-columns: 1fr; }
	.plaque-galerie { grid-template-columns: repeat(3, 1fr); }
	.retrait-avis { width: 72%; }
}
@media (max-width: 480px) {
	.metier-scene .fiche-une { width: 84%; bottom: -60px; }
	.retrait-avis { width: 84%; padding: 12px 14px 10px; }
	.retrait-retire { top: 38%; }
	.retrait-maintenu { bottom: -14%; }
	.plaque-galerie { grid-template-columns: repeat(2, 1fr); }
	.plaque-galerie img { height: 130px; }
}

/* Back-office : le bouton « Traitée » tient dans sa ligne. */
#rappels button { margin: 0; padding: 8px 16px; }

/* Page de commande : prix en grand, cases à cocher lisibles sur deux lignes. */
.commande-prix { font-family: var(--titres); font-size: 1.8rem; font-weight: 700; letter-spacing: -0.02em; margin: 4px 0 6px; }
.case { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; line-height: 1.45; margin-top: 18px; }
.case input { width: 18px; height: 18px; flex: none; margin: 2px 0 0; accent-color: var(--bleu); }
.commande-note { margin-top: 16px; font-size: 0.88rem; }
#commandes button { margin: 0 6px 0 0; padding: 8px 14px; }

/* Catalogue des plaques (/plaques) et son rail sur l'accueil. Chaque plaque
   est posée sur un socle : une trame de points plus serrée, un halo bleu sous
   la plaque, une ombre au sol, et la plaque elle-même en ombre à deux couches
   (contact serré, diffuse large). Les plaques gardent leurs proportions
   réelles : les baguettes restent étroites, l'assiette carrée. */
.catalogue-socle {
	position: relative; margin: 0; display: grid; place-items: center; aspect-ratio: 1; border-radius: 22px; overflow: hidden;
	background:
		radial-gradient(55% 42% at 50% 60%, rgba(26, 115, 232, 0.1), transparent 70%),
		radial-gradient(circle, rgba(60, 64, 67, 0.2) 1px, transparent 1.4px) 0 0 / 14px 14px,
		linear-gradient(180deg, #ffffff, #eef0f2);
	box-shadow: inset 0 0 0 1px rgba(60, 64, 67, 0.08), inset 0 -36px 44px -36px rgba(60, 64, 67, 0.22);
}
.catalogue-socle::after {
	content: ""; position: absolute; left: 24%; right: 24%; bottom: 11%; height: 9%; border-radius: 50%;
	background: radial-gradient(closest-side, rgba(32, 33, 36, 0.3), transparent); filter: blur(5px);
}
.catalogue-socle img {
	position: absolute; z-index: 1; inset: 0; margin: auto; width: 68%; height: 68%; object-fit: contain; rotate: -4deg;
	filter: drop-shadow(0 2px 2px rgba(60, 64, 67, 0.3)) drop-shadow(0 26px 30px rgba(60, 64, 67, 0.34));
	transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.catalogue-article:hover .catalogue-socle img, .rail a:hover .catalogue-socle img { transform: translateY(-10px) rotate(6deg); }
.catalogue-bientot {
	display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 10px 16px; border-radius: 999px;
	font-weight: 600; font-size: 0.9rem; color: var(--encre-douce); background: #f1f3f4; box-shadow: inset 0 0 0 1px var(--bordure);
}
.catalogue-bientot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--jaune); box-shadow: 0 0 0 3px rgba(251, 188, 4, 0.25); }

.catalogue-une { padding-bottom: 32px; }
.catalogue-une h1 { max-width: 13em; }
.catalogue-voies { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 40px; }
.catalogue-voie { margin: 0; padding: 28px 28px 26px; display: flex; flex-direction: column; align-items: flex-start; }
.catalogue-voie h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 8px; }
.catalogue-voie p { color: #3c4043; }
.catalogue-voie .surtitre { margin-bottom: 10px; }
.catalogue-voie > :last-child { margin-top: auto; }
.catalogue-voie-service { background: linear-gradient(155deg, #ffffff 45%, var(--bleu-clair)); }

.catalogue-commun { padding-top: 24px; padding-bottom: 24px; }
.catalogue-commun-titre { font-size: 1.1rem; font-weight: 700; margin: 0 0 18px; }
.catalogue-points { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin: 0; padding: 0; list-style: none; }
.catalogue-points li { display: flex; gap: 14px; align-items: flex-start; }
.catalogue-points .picto { flex: none; margin: 0; }
.catalogue-points p { margin: 0; color: #3c4043; font-size: 0.95rem; }
.catalogue-points strong { color: var(--encre); }

.catalogue-entete { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-bottom: 32px; }
.catalogue-entete .grand { margin: 0; }
.catalogue-filtres { display: flex; gap: 8px; flex-wrap: wrap; }
.catalogue-filtres[hidden] { display: none; }
.catalogue-filtres button {
	margin: 0; padding: 9px 16px; font-size: 0.9rem; background: var(--carte); color: var(--encre);
	box-shadow: inset 0 0 0 1px var(--bordure), 0 1px 2px rgba(60, 64, 67, 0.08);
}
.catalogue-filtres button:hover { background: var(--survol); }
.catalogue-filtres button[aria-pressed="true"] { background: var(--bleu-clair); color: var(--bleu-fonce); box-shadow: inset 0 0 0 1px rgba(26, 115, 232, 0.35); }
.catalogue-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 26px 22px; margin: 0; padding: 0; list-style: none; }
.catalogue-article {
	display: flex; flex-direction: column; gap: 16px; padding: 12px 12px 20px; border-radius: 30px;
	background: var(--carte); box-shadow: var(--ombre); scroll-margin-top: 140px;
}
.catalogue-article[hidden] { display: none; }
.catalogue-article:target { box-shadow: 0 0 0 2px var(--bleu), var(--ombre); }
.catalogue-texte { padding: 0 10px; }
.catalogue-texte .surtitre { margin-bottom: 6px; }
.catalogue-texte h3 { margin: 0 0 2px; }
.catalogue-texte p { margin: 0; color: #3c4043; }
.catalogue-texte .catalogue-mesure { margin-top: 8px; font-size: 0.9rem; color: var(--encre-douce); font-variant-numeric: tabular-nums; }
.catalogue-article > .catalogue-bientot, .catalogue-article > .bouton { margin: auto 10px 0; align-self: flex-start; }
.catalogue-autre { justify-content: center; gap: 22px; padding: 30px 22px; background: transparent; box-shadow: inset 0 0 0 2px var(--bordure); }
.catalogue-renvoi { margin: 34px 0 0; }

/* Accueil : le rail des neuf formes, un carrousel en défilement horizontal
   natif. Aimanté au doigt (900 px et moins) ; au-delà, libre au pavé tactile
   (l'aimantation y ramène en arrière les petits pas d'une molette), et les
   flèches de vitrine.js recalent sur la plaque suivante. Le fondu s'efface du
   côté où le rail est au bout (classes `debut`, `fin`). */
.catalogue-accueil { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.catalogue-accueil .avis-texte .bouton { margin-top: 8px; }
.rail-bloc { min-width: 0; }
.rail-fenetre {
	--fondu-gauche: 3%; --fondu-droite: 86%;
	overflow-x: auto; overscroll-behavior-x: contain; scroll-behavior: smooth;
	scrollbar-width: none; padding: 24px 0 34px;
	margin-right: calc(-1 * var(--gouttiere));
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fondu-gauche), #000 var(--fondu-droite), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 var(--fondu-gauche), #000 var(--fondu-droite), transparent);
}
.rail-fenetre.debut { --fondu-gauche: 0%; }
.rail-fenetre.fin { --fondu-droite: 100%; }
.rail-fenetre::-webkit-scrollbar { display: none; }
.rail { display: flex; gap: 22px; width: max-content; margin: 0; padding: 0 var(--gouttiere) 0 12px; list-style: none; }
.rail li { flex: none; width: 230px; scroll-snap-align: start; scroll-margin-left: 12px; }
.rail a { display: block; color: var(--encre); text-decoration: none; }
.rail .catalogue-socle { box-shadow: inset 0 0 0 1px rgba(60, 64, 67, 0.08), var(--ombre); }
.rail-nom { display: block; margin-top: 14px; font-weight: 650; }
.rail-forme { display: block; font-size: 0.9rem; color: var(--encre-douce); }
.rail-commandes { margin: 0 0 0 12px; }
@media (prefers-reduced-motion: reduce) {
	.rail-fenetre { scroll-behavior: auto; }
}
.plaque-galerie a { display: block; color: var(--encre); text-decoration: none; }
.plaque-galerie a:hover figcaption { color: var(--bleu); }
.plaque-formes-suite { margin: 36px 0 0; }

@media (max-width: 900px) {
	.catalogue-accueil { grid-template-columns: 1fr; }
	.catalogue-voies, .catalogue-points { grid-template-columns: 1fr; }
	.catalogue-points { gap: 16px; }
	.catalogue-grille { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }
	.catalogue-article { padding: 8px 8px 16px; border-radius: 22px; gap: 12px; }
	.catalogue-texte { padding: 0 6px; }
	.catalogue-article > .catalogue-bientot, .catalogue-article > .bouton { margin: auto 6px 0; font-size: 0.74rem; padding: 7px 11px; white-space: nowrap; gap: 7px; }
	.rail-fenetre { margin: 0 -16px; scroll-snap-type: x mandatory; }
	.rail { padding: 0 16px; }
	.rail li { width: 170px; scroll-margin-left: 16px; }
}
@media (max-width: 420px) {
	.catalogue-texte h3 { font-size: 1.05rem; }
	.catalogue-texte p { font-size: 0.88rem; }
}

/* Bandeau de consentement du pixel Meta (`public/js/mesure.js`) : posé au bas
   de l'écran, hors du contenu défilé (ScrollSmoother), sans bloquer la page.
   Deux boutons de même format : refuser coûte le même geste qu'accepter. */
.consentement {
	position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 80;
	max-width: 640px; margin: 0 auto; padding: 18px 20px;
	display: flex; gap: 16px 20px; align-items: center; flex-wrap: wrap;
	background: var(--fond); color: var(--encre);
	border-radius: 16px; box-shadow: var(--ombre);
}
.consentement p { margin: 0; flex: 1 1 280px; font-size: 0.92rem; line-height: 1.45; }
.consentement-actions { display: flex; gap: 10px; flex: 0 0 auto; }
.consentement-actions .bouton { margin: 0; min-width: 112px; justify-content: center; }
@media (max-width: 520px) {
	.consentement-actions { flex: 1 1 100%; }
	.consentement-actions .bouton { flex: 1 1 0; }
}
#mesure-revoir[hidden] { display: none; }