/**
 * Simulateur d'aides W2S pour Cobatis SM
 *
 * Identite reprise du site cobatis-sm.fr (kit Elementor) :
 *   teal #008B8C, teal profond #3E6B64, vert nuit #23423D, dore #C6B34C,
 *   Montserrat pour les titres, Open Sans pour le texte.
 * Les polices sont deja chargees par le theme : on ne les recharge pas.
 *
 * Tout est prefixe .w2s- pour ne jamais entrer en conflit avec le theme.
 *
 * SYSTEME
 *   Rayons     8 / 12 / 18 / 26 / pilule. Un seul choix par role, jamais melange.
 *   Ombres     toujours teintees vert nuit, jamais du noir pur.
 *   Accent     un seul, le teal. Le dore ne sert qu'au reste a charge.
 *   Mouvement  courbes fortes, moins de 300 ms, coupe sous prefers-reduced-motion.
 */

/* =====================================================================
 *  1. JETONS
 * ================================================================== */

.w2s-page,
.w2s-sim {
	/* Marque */
	--w2s-teal: #008b8c;
	--w2s-teal-texte: #007677;      /* teal assombri : 5,5:1 sur blanc */
	--w2s-teal-fonce: #3e6b64;
	--w2s-teal-nuit: #23423d;
	--w2s-teal-pale: #e4f2f2;
	--w2s-teal-voile: #f4faf9;
	--w2s-or: #c6b34c;
	--w2s-or-fonce: #8a7620;
	--w2s-or-pale: #faf6e6;

	/* Encres */
	--w2s-encre: #2b3937;           /* 12:1  */
	--w2s-encre-2: #4b5f5e;         /* 6,9:1 */
	--w2s-encre-3: #5f7573;         /* 5,0:1 */
	--w2s-ligne: #dfe9e8;
	--w2s-ligne-forte: #c4d8d5;
	--w2s-blanc: #ffffff;
	--w2s-fond: #f4f9f8;

	/* Etats */
	--w2s-alerte: #a5301c;
	--w2s-alerte-fond: #fbeeeb;
	--w2s-attention: #8a6212;
	--w2s-attention-fond: #fdf5e3;

	/* Rayons : une echelle, quatre roles */
	--w2s-r-xs: 8px;                /* puces, pastilles          */
	--w2s-r-sm: 12px;               /* champs, boutons           */
	--w2s-r-md: 18px;               /* cartes, panneaux          */
	--w2s-r-lg: 26px;               /* conteneurs de premier plan */
	--w2s-r-pill: 999px;

	/* Ombres teintees */
	--w2s-sh-1: 0 1px 2px rgba(35, 66, 61, .05), 0 2px 8px rgba(35, 66, 61, .05);
	--w2s-sh-2: 0 2px 6px rgba(35, 66, 61, .06), 0 14px 34px rgba(35, 66, 61, .09);
	--w2s-sh-3: 0 4px 12px rgba(35, 66, 61, .08), 0 30px 70px rgba(35, 66, 61, .16);

	/* Courbes : les easings natifs sont trop mous */
	--w2s-out: cubic-bezier(.23, 1, .32, 1);
	--w2s-inout: cubic-bezier(.77, 0, .175, 1);

	/* Rythme */
	--w2s-section: clamp(64px, 7.5vw, 104px);
	--w2s-page-max: 1240px;
	--w2s-mesure: 66ch;

	--w2s-titre: 'Montserrat', system-ui, -apple-system, sans-serif;
	--w2s-texte: 'Open Sans', system-ui, -apple-system, sans-serif;
}

/* =====================================================================
 *  2. SOCLE
 * ================================================================== */

.w2s-page {
	/* Le theme hote est clair : on empeche les controles natifs de basculer
	   en sombre au milieu d'une carte blanche. */
	color-scheme: light;

	/* clip et non hidden : les elements sticky continuent de fonctionner. */
	overflow-x: clip;

	font-family: var(--w2s-texte);
	font-size: 17px;
	line-height: 1.7;
	color: var(--w2s-encre);
	box-sizing: border-box;
}

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

.w2s-page [hidden] { display: none !important; }

.w2s-page h1,
.w2s-page h2,
.w2s-page h3,
.w2s-page h4 {
	font-family: var(--w2s-titre);
	color: var(--w2s-teal-nuit);
	line-height: 1.15;
	letter-spacing: -.02em;
	text-wrap: balance;
	margin: 0;
}

.w2s-page :where(p) { margin: 0 0 1em; }
.w2s-page :where(p:last-child) { margin-bottom: 0; }

/* Les boutons portent leur propre couleur : sans :not(), cette regle
   l'emporterait sur .w2s-btn--primaire et repeindrait le libelle. */
.w2s-page a:not(.w2s-btn) { color: var(--w2s-teal-texte); }

/* Fonds sombres uniquement. On ne vise pas .w2s-hero en entier : la carte
   blanche du simulateur vit dedans, et ses liens deviendraient invisibles. */
.w2s-hero__texte a:not(.w2s-btn),
.w2s-cta-final__corps a:not(.w2s-btn) { color: #ffffff; }

/* Un seul anneau de focus pour tout le composant. */
.w2s-page :focus-visible {
	outline: 3px solid rgba(0, 139, 140, .45);
	outline-offset: 3px;
	border-radius: 4px;
}

/* --- pleine largeur -------------------------------------------------
 * Le shortcode vit dans le conteneur du theme, souvent etroit. Ce bloc
 * l'en fait sortir pour retrouver la respiration d'une vraie page.
 * Neutralise par .w2s-page--contenu quand le client prefere rester dans
 * la grille du theme (attribut pleine_largeur="0").
 * ------------------------------------------------------------------ */

.w2s-band {
	margin-inline: calc(50% - 50vw);
	padding-inline: max(24px, calc(50vw - 50%));
	padding-block: var(--w2s-section);
}

.w2s-page--contenu .w2s-band {
	margin-inline: 0;
	padding-inline: 0;
}

.w2s-band--voile { background: #eef6f4; }
.w2s-band--sombre { background: var(--w2s-teal-nuit); }

.w2s-shell {
	max-width: var(--w2s-page-max);
	margin-inline: auto;
}

.w2s-shell--texte { max-width: 880px; }

/* =====================================================================
 *  3. TETE DE SECTION
 * ================================================================== */

.w2s-tete {
	max-width: var(--w2s-mesure);
	margin: 0 0 clamp(32px, 4vw, 56px);
}

/* Le fichier du logo porte une large marge transparente : 20,1 % a gauche,
   18,3 % a droite, 3,5 % en haut, 10,6 % en bas. Non corrigee, elle
   decale la marque vers la droite et la fait flotter loin au-dessus du
   titre. On decoupe la marge, puis on la compense en marges negatives :
   la marque s'aligne alors exactement sur le bord gauche du titre, a une
   distance choisie et non subie. */
.w2s-tete__logo {
	display: block;
	width: 100px;              /* la marque visible mesure ~62px */
	height: auto;
	clip-path: inset(3.5% 18.3% 10.6% 20.1%);
	margin: 0 0 6px -20px;     /* -20px = 20,1 % de 100px */
	object-fit: contain;
}

.w2s-tete h2 {
	font-size: clamp(29px, 3.4vw, 42px);
	font-weight: 700;
	line-height: 1.1;
}

.w2s-tete__chapo {
	margin: 18px 0 0;
	font-size: clamp(16px, 1.6vw, 18.5px);
	line-height: 1.65;
	color: var(--w2s-encre-2);
}

.w2s-band--sombre .w2s-tete h2 { color: #fff; }
.w2s-band--sombre .w2s-tete__chapo { color: rgba(255, 255, 255, .82); }

/* Renvoi editorial en fin de section. */
.w2s-note {
	position: relative;
	margin: clamp(26px, 3vw, 38px) 0 0;
	padding: 19px 24px 19px 58px;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--w2s-encre-2);
	background: #f8fbfa;
	border: 1px solid var(--w2s-ligne);
	border-radius: var(--w2s-r-md);
	box-shadow: var(--w2s-sh-1);
}

.w2s-note::before {
	content: "";
	position: absolute;
	left: 20px;
	top: 50%;
	width: 26px;
	height: 26px;
	border-radius: var(--w2s-r-xs);
	background: var(--w2s-teal-pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007677' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E") center / 15px no-repeat;
	transform: translateY(-50%);
}

.w2s-note a { font-weight: 600; }

.w2s-band--voile .w2s-note { background: var(--w2s-blanc); }

/* Ces deux notes suivent des grilles visuellement denses. Leur marge plus
   genereuse les fait lire comme un complement editorial, pas comme une
   carte supplementaire collee a la precedente. */
#deux-voies .w2s-note,
#prix .w2s-note {
	margin-top: clamp(42px, 5vw, 62px);
}

/* =====================================================================
 *  4. BOUTONS
 * ================================================================== */

.w2s-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 28px;
	font-family: var(--w2s-titre);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	border: 1.5px solid transparent;
	border-radius: var(--w2s-r-sm);
	cursor: pointer;
	transition: transform 160ms var(--w2s-out),
	            background-color 180ms ease,
	            border-color 180ms ease,
	            color 180ms ease,
	            box-shadow 180ms var(--w2s-out);
}

/* Retour tactile : l'interface doit repondre a la pression. */
.w2s-btn:active { transform: scale(.97); }

.w2s-btn--primaire {
	background: var(--w2s-teal-texte);
	color: #fff;
	box-shadow: 0 2px 6px rgba(0, 139, 140, .22), 0 10px 24px rgba(0, 139, 140, .22);
}

.w2s-btn--secondaire {
	background: var(--w2s-blanc);
	color: var(--w2s-teal-nuit);
	border-color: var(--w2s-ligne-forte);
}

.w2s-btn--fantome {
	background: transparent;
	color: var(--w2s-encre-2);
	border-color: var(--w2s-ligne);
}

.w2s-btn--large {
	padding: 18px 32px;
	font-size: 17px;
}

.w2s-btn--pleine { width: 100%; }

@media (hover: hover) and (pointer: fine) {
	.w2s-btn--primaire:hover {
		background: var(--w2s-teal-fonce);
		color: #fff;
		transform: translateY(-2px);
		box-shadow: 0 4px 10px rgba(0, 139, 140, .24), 0 16px 34px rgba(0, 139, 140, .28);
	}
	.w2s-btn--primaire:active { transform: translateY(0) scale(.97); }

	.w2s-btn--secondaire:hover {
		border-color: var(--w2s-teal);
		color: var(--w2s-teal-nuit);
		background: var(--w2s-teal-voile);
	}

	.w2s-btn--fantome:hover {
		border-color: var(--w2s-ligne-forte);
		color: var(--w2s-teal-nuit);
		background: var(--w2s-blanc);
	}
}

/* Etat occupe : on garde le contraste du libelle, on ne baisse pas l'opacite. */
.w2s-btn[aria-busy="true"],
.w2s-btn[disabled] {
	cursor: default;
	transform: none;
	box-shadow: none;
}

.w2s-btn--primaire[aria-busy="true"],
.w2s-btn--primaire[disabled] {
	background: var(--w2s-teal-fonce);
	color: #fff;
}

.w2s-btn__spin {
	width: 15px;
	height: 15px;
	flex: none;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .35);
	border-top-color: #fff;
	animation: w2s-spin .6s linear infinite;
}

@keyframes w2s-spin { to { transform: rotate(360deg); } }

/* =====================================================================
 *  5. HERO
 * ================================================================== */

.w2s-hero {
	position: relative;
	isolation: isolate;
	background: var(--w2s-teal-nuit);
	padding-block: clamp(44px, 5vw, 72px) clamp(34px, 4vw, 56px);

	/* clip et non hidden : hidden laisse le navigateur faire defiler le
	   hero de l'interieur quand un champ du simulateur prend le focus,
	   ce qui donne l'impression que la carte se replace toute seule. */
	overflow: clip;

	/* Le hero ne sert jamais d'ancre de defilement : sans cela, la moindre
	   variation de hauteur de la carte decale la position de lecture. */
	overflow-anchor: none;
}

.w2s-page--contenu .w2s-hero { border-radius: var(--w2s-r-lg); }

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

/* Voile : le texte blanc doit rester au-dessus de 10:1 quelle que soit la photo. */
.w2s-hero__voile {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(103deg, rgba(35, 66, 61, .92) 0%, rgba(35, 66, 61, .86) 46%, rgba(35, 66, 61, .5) 100%),
		linear-gradient(180deg, rgba(35, 66, 61, .28), rgba(35, 66, 61, .44));
}

.w2s-hero__grille {
	position: relative;
	max-width: var(--w2s-page-max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(340px, .88fr) minmax(500px, 1.12fr);
	gap: clamp(36px, 4vw, 60px);

	/* start et non center : la carte grandit vers le bas quand une etape
	   est plus haute, sans jamais deplacer la colonne de texte. */
	align-items: start;
}

.w2s-hero__texte {
	padding-top: clamp(8px, 1.6vw, 26px);
	overflow-anchor: none;
}

.w2s-hero__outil {
	min-width: 0;
	overflow-anchor: none;
}

.w2s-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 22px;
	padding: 7px 16px 7px 11px;
	border-radius: var(--w2s-r-pill);
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .18);
	font-family: var(--w2s-titre);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .04em;
	color: #fff;
}

.w2s-hero__eyebrow::before {
	content: "";
	width: 16px;
	height: 16px;
	flex: none;
	border-radius: 50%;
	background: var(--w2s-or) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323423d' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 10px no-repeat;
}

.w2s-hero h1 {
	/* Taille calee sur la largeur reelle de la colonne : au-dela de 36px
	   le titre passe a quatre lignes et ecrase la mise en page. */
	font-size: clamp(28px, 2.7vw, 36px);
	font-weight: 700;
	line-height: 1.08;
	color: #fff;
	margin: 0 0 20px;
}

.w2s-hero h1 em {
	font-style: normal;
	color: var(--w2s-or);
}

.w2s-hero__lede {
	margin: 0 0 30px;
	max-width: 46ch;
	font-size: clamp(17px, 1.8vw, 19.5px);
	line-height: 1.6;
	color: rgba(255, 255, 255, .88);
}

.w2s-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 20px;
}

.w2s-hero__actions .w2s-btn--secondaire {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, .42);
}

@media (hover: hover) and (pointer: fine) {
	.w2s-hero__actions .w2s-btn--secondaire:hover {
		background: rgba(255, 255, 255, .12);
		border-color: rgba(255, 255, 255, .7);
		color: #fff;
	}
}

.w2s-hero__tel {
	margin: 0;
	font-family: var(--w2s-titre);
	font-size: 15.5px;
	font-weight: 600;
	color: rgba(255, 255, 255, .82);
}

.w2s-hero__tel a {
	color: #fff;
	white-space: nowrap;
}

/* =====================================================================
 *  6. BANDEAU DE CONFIANCE
 *
 *  Les garanties et certifications ferment le hero sans alourdir sa
 *  hierarchie. Le fond clair restitue les couleurs reelles des logos.
 * ================================================================== */

.w2s-preuves {
	padding-block: clamp(28px, 3.5vw, 42px);
	background: var(--w2s-blanc);
	border-bottom: 1px solid var(--w2s-ligne);
}

.w2s-preuves__corps {
	width: 100%;
	max-width: var(--w2s-page-max);
	margin-inline: auto;
}

.w2s-sim-notes {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(18px, 3vw, 34px);
	margin: 0 0 clamp(24px, 3vw, 34px);
	padding: 0 0 clamp(24px, 3vw, 34px);
	border-bottom: 1px solid var(--w2s-ligne);
}

.w2s-sim-notes li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	font-weight: 600;
	color: var(--w2s-encre-2);
}

.w2s-sim-notes li::before {
	content: "";
	flex: none;
	width: 19px;
	height: 19px;
	margin-top: 1px;
	border-radius: 50%;
	background: rgba(0, 118, 119, .1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007677' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.w2s-preuves__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(24px, 4.6vw, 62px);
}

.w2s-preuves__liste li { margin: 0; }

.w2s-preuves__liste img {
	display: block;
	width: auto;
	height: clamp(40px, 4vw, 54px);
	max-width: 150px;
	object-fit: contain;
	filter: saturate(.94);
}

/* =====================================================================
 *  7. LE SIMULATEUR
 * ================================================================== */

.w2s-sim {
	position: relative;
	background: var(--w2s-blanc);
	border-radius: var(--w2s-r-lg);
	box-shadow: var(--w2s-sh-3);
	overflow: hidden;
	scroll-margin-top: 96px;
	border: 1px solid rgba(196, 216, 213, .72);
}

/* Dans le hero, la carte est posee sur du sombre : un liseré clair
   evite qu'elle ne flotte sans arete. */
.w2s-hero .w2s-sim {
	border-color: rgba(255, 255, 255, .22);
	box-shadow: 0 24px 64px rgba(17, 47, 43, .28);
}

.w2s-page--outil .w2s-sim {
	max-width: 760px;
	margin-inline: auto;
	border: 1px solid var(--w2s-ligne);
	box-shadow: var(--w2s-sh-2);
}

.w2s-sim__entete {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 18px 26px;
	background: linear-gradient(180deg, var(--w2s-teal-voile), var(--w2s-blanc));
	border-bottom: 1px solid var(--w2s-ligne);
}

/* Meme correction dans l'entete de l'outil : sans elle, la marque parait
   enfoncee dans la carte et l'ecart avec la barre de progression double. */
.w2s-sim__logo {
	flex: none;
	width: 118px;              /* la marque visible mesure ~73px */
	height: auto;
	clip-path: inset(3.5% 18.3% 10.6% 20.1%);
	margin: 0 -21px 0 -24px;
	object-fit: contain;
}

.w2s-sim__progression {
	flex: 1;
	min-width: 0;
}

.w2s-sim__barre {
	height: 6px;
	border-radius: var(--w2s-r-pill);
	background: var(--w2s-ligne);
	overflow: hidden;
}

.w2s-sim__barre span {
	display: block;
	height: 100%;
	width: 100%;
	border-radius: var(--w2s-r-pill);
	background: linear-gradient(90deg, var(--w2s-teal), var(--w2s-or));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 260ms var(--w2s-out);
}

.w2s-sim__compteur {
	margin: 9px 0 0;
	font-family: var(--w2s-titre);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .03em;
	color: var(--w2s-encre-3);
}

.w2s-sim__compteur b {
	color: var(--w2s-teal-nuit);
	font-weight: 700;
}

.w2s-sim__form { padding: clamp(24px, 3vw, 36px) clamp(20px, 2.6vw, 34px) 0; }

/* Les etapes conservent une hauteur stable pour eviter que le hero et sa
   photographie ne se recadrent a chaque reponse. */
.w2s-sim__form .w2s-etape { min-height: 330px; }

.w2s-sim__mention {
	margin: 0;
	padding: 16px clamp(20px, 2.6vw, 34px) 20px;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--w2s-encre-3);
	border-top: 1px solid var(--w2s-ligne);
	background: var(--w2s-teal-voile);
}

/* --- etapes --------------------------------------------------------- */

.w2s-etape {
	display: none;
	border: 0;
	margin: 0;
	padding: 0;
	min-inline-size: 0;
	scroll-margin-top: 84px;
}

.w2s-etape.is-active { display: block; }

/* Transition d'etat discrete : aucun deplacement du contenu dans le hero. */
.w2s-etape.is-entrante {
	animation: w2s-etape-fondu 180ms var(--w2s-out) both;
}

@keyframes w2s-etape-fondu {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.w2s-q {
	display: block;
	float: none;
	width: 100%;
	font-family: var(--w2s-titre);
	font-size: clamp(21px, 2.4vw, 27px);
	font-weight: 700;
	color: var(--w2s-teal-nuit);
	line-height: 1.2;
	letter-spacing: -.02em;
	margin: 0 0 10px;
	padding: 0;
	text-wrap: balance;
}

.w2s-aide {
	margin: 0 0 22px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--w2s-encre-2);
}

.w2s-label {
	display: block;
	font-family: var(--w2s-titre);
	font-size: 15px;
	font-weight: 600;
	color: var(--w2s-teal-nuit);
	margin-bottom: 12px;
}

/* --- cartes de reponse ---------------------------------------------- */

.w2s-cartes {
	display: grid;
	gap: 12px;
	margin-bottom: 24px;
}

.w2s-cartes--2 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.w2s-cartes--3 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.w2s-carte {
	position: relative;
	display: block;
	margin: 0;
	cursor: pointer;
}

.w2s-carte input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.w2s-carte__corps {
	display: flex;
	flex-direction: column;
	gap: 7px;
	height: 100%;
	padding: 19px 19px 19px 50px;
	background: var(--w2s-blanc);
	border: 1.5px solid var(--w2s-ligne-forte);
	border-radius: var(--w2s-r-md);
	transition: border-color 180ms ease, background-color 180ms ease,
	            transform 180ms var(--w2s-out), box-shadow 180ms var(--w2s-out);
}

.w2s-carte__corps::before {
	content: "";
	position: absolute;
	left: 18px;
	top: 20px;
	width: 21px;
	height: 21px;
	border-radius: 50%;
	border: 1.5px solid var(--w2s-ligne-forte);
	background: var(--w2s-blanc);
	transition: border-color 180ms ease, background-color 180ms ease;
}

.w2s-carte--compacte .w2s-carte__corps {
	padding: 16px 16px 16px 48px;
	justify-content: center;
}

.w2s-carte--compacte .w2s-carte__corps::before {
	top: 50%;
	transform: translateY(-50%);
}

.w2s-carte__titre {
	font-family: var(--w2s-titre);
	font-size: 15.5px;
	font-weight: 600;
	color: var(--w2s-teal-nuit);
	line-height: 1.3;
}

/* Emphase dans la meme famille, jamais en changeant de police. */
.w2s-carte__titre em {
	font-style: italic;
	color: var(--w2s-teal-texte);
}

.w2s-carte__texte {
	font-size: 14px;
	line-height: 1.5;
	color: var(--w2s-encre-2);
}

.w2s-carte:active .w2s-carte__corps { transform: scale(.985); }

@media (hover: hover) and (pointer: fine) {
	.w2s-carte:hover .w2s-carte__corps {
		border-color: var(--w2s-teal);
		transform: translateY(-2px);
		box-shadow: 0 8px 22px rgba(0, 139, 140, .12);
	}
}

.w2s-carte input:checked + .w2s-carte__corps {
	border-color: var(--w2s-teal);
	background: var(--w2s-teal-voile);
	box-shadow: inset 0 0 0 1px var(--w2s-teal);
}

.w2s-carte input:checked + .w2s-carte__corps::before {
	border-color: var(--w2s-teal);
	background: var(--w2s-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.w2s-carte input:focus-visible {
	outline: none;
}

.w2s-carte input:focus-visible + .w2s-carte__corps {
	border-color: var(--w2s-teal);
	box-shadow: 0 0 0 4px rgba(0, 139, 140, .2);
}

/* --- champs --------------------------------------------------------- */

.w2s-duo {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
	margin-bottom: 22px;
}

.w2s-champ { margin-bottom: 22px; }
.w2s-duo .w2s-champ { margin-bottom: 0; }

.w2s-champ > label {
	display: block;
	font-family: var(--w2s-titre);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--w2s-teal-nuit);
	margin-bottom: 8px;
}

.w2s-optionnel {
	font-weight: 400;
	color: var(--w2s-encre-3);
}

.w2s-champ input[type="text"],
.w2s-champ input[type="number"],
.w2s-champ input[type="email"],
.w2s-champ input[type="tel"],
.w2s-champ select,
.w2s-champ textarea {
	width: 100%;
	padding: 14px 16px;
	font-family: var(--w2s-texte);
	font-size: 16px;
	line-height: 1.4;
	color: var(--w2s-encre);
	background: var(--w2s-blanc);
	border: 1.5px solid var(--w2s-ligne-forte);
	border-radius: var(--w2s-r-sm);
	transition: border-color 180ms ease, box-shadow 180ms ease;
	-webkit-appearance: none;
	appearance: none;
}

/* Contraste du texte d'exemple : 5:1, jamais le gris par defaut. */
.w2s-champ ::placeholder {
	color: var(--w2s-encre-3);
	opacity: 1;
}

.w2s-champ select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5f5e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
	background-size: 17px;
	padding-right: 44px;
}

.w2s-champ input:focus,
.w2s-champ select:focus,
.w2s-champ textarea:focus {
	outline: none;
	border-color: var(--w2s-teal);
	box-shadow: 0 0 0 3px rgba(0, 139, 140, .18);
}

.w2s-champ input[aria-invalid="true"],
.w2s-champ select[aria-invalid="true"] {
	border-color: var(--w2s-alerte);
	box-shadow: 0 0 0 3px rgba(165, 48, 28, .12);
}

.w2s-champ input[type="number"] { -moz-appearance: textfield; }

.w2s-champ input[type="number"]::-webkit-outer-spin-button,
.w2s-champ input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.w2s-champ .w2s-aide {
	margin: 8px 0 0;
	font-size: 13.5px;
}

/* --- depliants ------------------------------------------------------ */

.w2s-details {
	margin: 0 0 22px;
	border: 1px solid var(--w2s-ligne);
	border-radius: var(--w2s-r-md);
	background: var(--w2s-teal-voile);
	padding: 0 18px;
}

.w2s-details > summary {
	cursor: pointer;
	list-style: none;
	padding: 15px 0;
	font-family: var(--w2s-titre);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--w2s-teal-texte);
	display: flex;
	align-items: center;
	gap: 10px;
}

.w2s-details > summary::-webkit-details-marker { display: none; }

.w2s-details > summary::before {
	content: "";
	flex: none;
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background: var(--w2s-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") center / 12px no-repeat;
	transition: transform 200ms var(--w2s-out);
}

.w2s-details[open] > summary::before {
	transform: rotate(135deg);
}

.w2s-details > *:not(summary) {
	margin-bottom: 16px;
	font-size: 15px;
	color: var(--w2s-encre-2);
}

/* --- etiquettes DPE ------------------------------------------------- */

.w2s-dpe {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-bottom: 24px;
}

.w2s-dpe__item {
	position: relative;
	cursor: pointer;
	margin: 0;
}

.w2s-dpe__item input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.w2s-dpe__item span {
	display: grid;
	place-items: center;
	min-width: 54px;
	padding: 14px;
	border-radius: var(--w2s-r-sm);
	border: 2px solid transparent;
	font-family: var(--w2s-titre);
	font-size: 17px;
	font-weight: 700;
	color: #fff;
	transition: transform 160ms var(--w2s-out), box-shadow 160ms var(--w2s-out);
}

.w2s-dpe__item--a span { background: #2b7d2e; }
.w2s-dpe__item--b span { background: #3f8b2f; }
.w2s-dpe__item--c span { background: #6d9b1f; color: #14210a; }
.w2s-dpe__item--d span { background: #f2d900; color: #3d3400; }
.w2s-dpe__item--e span { background: #e59700; color: #3a2700; }
.w2s-dpe__item--f span { background: #d4581c; }
.w2s-dpe__item--g span { background: #c02a22; }

.w2s-dpe__item--inconnu span {
	background: var(--w2s-blanc);
	color: var(--w2s-encre-2);
	border-color: var(--w2s-ligne-forte);
	font-size: 14px;
	font-weight: 600;
}

.w2s-dpe__item:active span { transform: scale(.96); }

@media (hover: hover) and (pointer: fine) {
	.w2s-dpe__item:hover span { transform: translateY(-2px); }
}

.w2s-dpe__item input:checked + span {
	border-color: var(--w2s-teal-nuit);
	box-shadow: 0 0 0 3px rgba(35, 66, 61, .22);
	transform: translateY(-2px);
}

.w2s-dpe__item input:focus-visible {
	outline: none;
}

.w2s-dpe__item input:focus-visible + span {
	box-shadow: 0 0 0 4px rgba(0, 139, 140, .28);
}

/* --- navigation ----------------------------------------------------- */

.w2s-nav {
	display: flex;
	gap: 12px;
	justify-content: space-between;
	align-items: center;
	margin-top: 8px;
	padding: 22px 0 26px;
	border-top: 1px solid var(--w2s-ligne);
}

.w2s-erreur {
	margin: 0 0 20px;
	padding: 13px 16px;
	border-radius: var(--w2s-r-sm);
	background: var(--w2s-alerte-fond);
	border: 1px solid rgba(165, 48, 28, .3);
	color: #7c2415;
	font-size: 15px;
}

/* =====================================================================
 *  8. RESULTAT
 * ================================================================== */

.w2s-resultat { padding: clamp(24px, 3vw, 36px) clamp(20px, 2.6vw, 34px) 0; }

.w2s-res__entete { margin-bottom: 26px; }

.w2s-res__profil {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 15px;
	border-radius: var(--w2s-r-pill);
	background: var(--w2s-teal-pale);
	font-family: var(--w2s-titre);
	font-size: 13px;
	font-weight: 600;
	color: var(--w2s-teal-nuit);
	margin-bottom: 14px;
}

.w2s-res__titre {
	font-family: var(--w2s-titre);
	font-size: clamp(22px, 2.6vw, 29px);
	font-weight: 700;
	color: var(--w2s-teal-nuit);
	margin: 0 0 8px;
	letter-spacing: -.02em;
}

.w2s-res__titre:focus { outline: none; }

.w2s-res__sous {
	margin: 0;
	font-size: 15.5px;
	color: var(--w2s-encre-2);
}

/* --- chiffre principal ---------------------------------------------- */

.w2s-res__vedette {
	position: relative;
	overflow: hidden;
	background: linear-gradient(150deg, var(--w2s-teal-nuit), var(--w2s-teal-fonce));
	border-radius: var(--w2s-r-md);
	padding: 30px 26px;
	color: #fff;
	margin-bottom: 24px;
}

.w2s-res__vedette-label {
	font-family: var(--w2s-titre);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	color: rgba(255, 255, 255, .78);
	margin: 0 0 10px;
}

.w2s-res__montant {
	font-family: var(--w2s-titre);
	font-size: clamp(29px, 4.4vw, 42px);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
	color: #fff;
	margin: 0;
}

.w2s-res__vedette-note {
	margin: 12px 0 0;
	font-size: 15px;
	color: rgba(255, 255, 255, .84);
}

.w2s-res__vedette-note b {
	color: var(--w2s-or);
	font-weight: 700;
}

/* --- repartition ----------------------------------------------------- */

.w2s-jauge { margin-bottom: 26px; }

.w2s-jauge__barre {
	display: flex;
	height: 38px;
	border-radius: var(--w2s-r-xs);
	overflow: hidden;
	background: var(--w2s-ligne);
	clip-path: inset(0 100% 0 0 round var(--w2s-r-xs));
	transition: clip-path 620ms var(--w2s-out);
}

.w2s-jauge__barre.is-remplie {
	clip-path: inset(0 0 0 0 round var(--w2s-r-xs));
}

.w2s-jauge__part {
	display: grid;
	place-items: center;
	font-family: var(--w2s-titre);
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
}

/* Teal assombri : le libelle blanc doit passer 4,5:1 a cette taille. */
.w2s-jauge__part--aides { background: var(--w2s-teal-texte); color: #fff; }
.w2s-jauge__part--reste { background: var(--w2s-or); color: #3a3210; }

.w2s-jauge__legende {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin: 12px 0 0;
	font-size: 14px;
	color: var(--w2s-encre-2);
}

.w2s-jauge__legende span { display: inline-flex; align-items: center; gap: 8px; }

.w2s-jauge__puce {
	width: 12px;
	height: 12px;
	border-radius: 3px;
	flex: none;
}

/* --- detail des aides ------------------------------------------------ */

.w2s-res__aides {
	list-style: none;
	margin: 0 0 26px;
	padding: 0;
	border: 1px solid var(--w2s-ligne);
	border-radius: var(--w2s-r-md);
	overflow: hidden;
}

.w2s-res__aide {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 5px 18px;
	padding: 18px 20px;
	background: var(--w2s-blanc);
	margin: 0;
}

.w2s-res__aide + .w2s-res__aide { border-top: 1px solid var(--w2s-ligne); }

.w2s-res__aide-nom {
	font-family: var(--w2s-titre);
	font-size: 15.5px;
	font-weight: 600;
	color: var(--w2s-teal-nuit);
}

.w2s-res__aide-montant {
	font-family: var(--w2s-titre);
	font-size: 16.5px;
	font-weight: 700;
	color: var(--w2s-teal-texte);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	text-align: right;
}

.w2s-res__aide-note {
	grid-column: 1 / -1;
	font-size: 14px;
	line-height: 1.55;
	color: var(--w2s-encre-2);
	margin: 0;
}

.w2s-res__ligne-cout {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 18px;
	padding: 18px 20px;
	background: var(--w2s-teal-voile);
	border-bottom: 1px solid var(--w2s-ligne);
}

.w2s-res__ligne-cout strong {
	font-family: var(--w2s-titre);
	font-size: 15.5px;
	color: var(--w2s-teal-nuit);
}

.w2s-res__ligne-cout span {
	font-family: var(--w2s-titre);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* --- alertes ---------------------------------------------------------- */

.w2s-alerte {
	display: flex;
	gap: 14px;
	padding: 16px 18px;
	border-radius: var(--w2s-r-md);
	margin-bottom: 12px;
	font-size: 15px;
	line-height: 1.55;
	border: 1px solid;
}

.w2s-alerte strong {
	display: block;
	font-family: var(--w2s-titre);
	font-size: 15.5px;
	margin-bottom: 4px;
}

.w2s-alerte p { margin: 0; }

.w2s-alerte::before {
	content: "";
	flex: none;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.w2s-alerte--bloquant {
	background: var(--w2s-alerte-fond);
	border-color: rgba(165, 48, 28, .28);
	color: #6d2314;
}

.w2s-alerte--bloquant::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a5301c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='6.3' y1='6.3' x2='17.7' y2='17.7'/%3E%3C/svg%3E");
}

.w2s-alerte--attention {
	background: var(--w2s-attention-fond);
	border-color: rgba(138, 98, 18, .3);
	color: #5f4409;
}

.w2s-alerte--attention::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a6212' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.6 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.6a2 2 0 0 0-3.4 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}

.w2s-alerte--info {
	background: var(--w2s-teal-voile);
	border-color: var(--w2s-ligne);
	color: var(--w2s-encre-2);
}

.w2s-alerte--info::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007677' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='12' y1='11' x2='12' y2='16'/%3E%3Cline x1='12' y1='7.6' x2='12.01' y2='7.6'/%3E%3C/svg%3E");
}

/* --- eco-PTZ ---------------------------------------------------------- */

.w2s-ecoptz {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 12px;
	padding: 18px 20px;
	border-radius: var(--w2s-r-md);
	background: var(--w2s-or-pale);
	border: 1px solid rgba(198, 179, 76, .5);
	margin-bottom: 24px;
	font-size: 15px;
	color: #4b4110;
}

.w2s-ecoptz strong {
	font-family: var(--w2s-titre);
	font-size: 18px;
	color: #3a3210;
	font-variant-numeric: tabular-nums;
}

.w2s-res__recap {
	margin: 0 0 24px;
	font-size: 14px;
	color: var(--w2s-encre-3);
}

.w2s-res__recap button {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--w2s-teal-texte);
	text-decoration: underline;
	cursor: pointer;
}

/* --- squelette de chargement ------------------------------------------
 * Il epouse la forme du resultat final : la page ne saute pas quand les
 * vrais chiffres arrivent.
 * ------------------------------------------------------------------ */

.w2s-skel > * {
	border-radius: var(--w2s-r-md);
	background: linear-gradient(100deg, var(--w2s-fond) 30%, #eaf3f2 50%, var(--w2s-fond) 70%) 0 0 / 220% 100%;
	animation: w2s-chatoiement 1.1s linear infinite;
}

.w2s-skel__titre { height: 30px; width: min(60%, 320px); margin-bottom: 12px; border-radius: var(--w2s-r-sm); }
.w2s-skel__sous  { height: 17px; width: min(80%, 420px); margin-bottom: 26px; border-radius: var(--w2s-r-sm); }
.w2s-skel__bloc  { height: 152px; margin-bottom: 24px; }
.w2s-skel__jauge { height: 38px; margin-bottom: 26px; border-radius: var(--w2s-r-xs); }
.w2s-skel__liste { height: 210px; }

@keyframes w2s-chatoiement {
	from { background-position: 220% 0; }
	to   { background-position: -220% 0; }
}

/* =====================================================================
 *  9. CONTACT
 * ================================================================== */

.w2s-contact {
	padding: clamp(26px, 3vw, 34px) clamp(20px, 2.6vw, 34px);
	border-top: 1px solid var(--w2s-ligne);
	background: var(--w2s-teal-voile);
}

.w2s-contact__titre {
	font-size: clamp(21px, 2.4vw, 26px);
	font-weight: 700;
	margin-bottom: 10px;
}

.w2s-contact__lede {
	margin: 0 0 24px;
	font-size: 15.5px;
	color: var(--w2s-encre-2);
}

.w2s-consentement {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 6px 0 22px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--w2s-encre-2);
	cursor: pointer;
}

.w2s-consentement input {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	accent-color: var(--w2s-teal);
}

.w2s-pot-de-miel {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.w2s-contact__ou {
	margin: 16px 0 0;
	text-align: center;
	font-size: 15px;
	color: var(--w2s-encre-2);
}

.w2s-contact__ou a {
	font-family: var(--w2s-titre);
	font-weight: 700;
	white-space: nowrap;
}

.w2s-merci { padding: 22px 0 8px; }
.w2s-merci h2 { font-size: 24px; margin-bottom: 12px; }
.w2s-merci p { margin: 0; color: var(--w2s-encre-2); }

/* =====================================================================
 *  10. CE QUI CHANGE  composition asymetrique
 *  Un fait dominant, deux faits secondaires. Jamais trois cartes egales.
 * ================================================================== */

.w2s-change {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: 18px;
	align-items: stretch;
}

.w2s-change__secondaires {
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: 18px;
}

.w2s-change__item {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: clamp(26px, 3vw, 40px);
	background: var(--w2s-blanc);
	border: 1px solid var(--w2s-ligne);
	border-radius: var(--w2s-r-md);
	box-shadow: var(--w2s-sh-1);
}

.w2s-change__item--phare {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--w2s-teal-nuit);
	border-color: transparent;
	color: rgba(255, 255, 255, .88);
	box-shadow: var(--w2s-sh-2);
	min-height: clamp(300px, 30vw, 380px);
}

/* La photographie donne une matiere a la carte. Elle reste sous un voile
   dense : le texte blanc ne descend jamais sous 10:1. */
.w2s-change__item--phare::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: var(--w2s-fond, none);
	background-size: cover;
	background-position: 50% 42%;
	filter: grayscale(.3) contrast(1.06);
	opacity: .42;
}

.w2s-change__item--phare::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(158deg, rgba(35, 66, 61, .38) 0%, rgba(35, 66, 61, .78) 54%, rgba(35, 66, 61, .94) 100%);
}

.w2s-change__secondaires .w2s-change__item {
	background: #f8fbfa;
}

.w2s-change__item--phare h3 { color: #fff; }

.w2s-change__marque {
	font-family: var(--w2s-titre);
	font-size: clamp(44px, 6vw, 76px);
	font-weight: 700;
	line-height: .9;
	letter-spacing: -.04em;
	color: var(--w2s-or);
	font-variant-numeric: tabular-nums;
	margin: 0 0 18px;
}

.w2s-change__item h3 {
	font-size: clamp(19px, 1.9vw, 24px);
	font-weight: 700;
	margin-bottom: 12px;
}

.w2s-change__item p:not(.w2s-change__marque) {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--w2s-encre-2);
}

.w2s-change__item--phare p:not(.w2s-change__marque) { color: rgba(255, 255, 255, .86); }

/* =====================================================================
 *  11. LES DEUX VOIES  deux panneaux compares, pas un tableau
 * ================================================================== */

.w2s-voies {
	display: grid;
	grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
	gap: 22px;
	align-items: stretch;
}

.w2s-voie {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(26px, 3vw, 38px);
	background: var(--w2s-blanc);
	border: 1px solid var(--w2s-ligne-forte);
	border-top: 4px solid #9fc5c2;
	border-radius: var(--w2s-r-md);
	box-shadow: var(--w2s-sh-1);
}

.w2s-voie--recommandee {
	border-color: var(--w2s-teal);
	border-top-color: var(--w2s-teal);
	background: #fbfdfd;
	box-shadow: var(--w2s-sh-2);
}

.w2s-voie__badge {
	align-self: flex-start;
	margin-bottom: 16px;
	padding: 6px 14px;
	border-radius: var(--w2s-r-pill);
	background: var(--w2s-teal-pale);
	font-family: var(--w2s-titre);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .03em;
	color: var(--w2s-teal-nuit);
}

.w2s-voie h3 {
	font-size: clamp(22px, 2.2vw, 27px);
	font-weight: 700;
	margin-bottom: 10px;
}

.w2s-voie__aide {
	margin: 0 0 18px;
	font-family: var(--w2s-titre);
	font-size: 16px;
	font-weight: 600;
	color: var(--w2s-teal-texte);
}

.w2s-voie__chiffre {
	margin: 0 0 24px;
	padding: 18px 20px;
	border-radius: var(--w2s-r-sm);
	background: var(--w2s-teal-voile);
	border: 1px solid var(--w2s-ligne);
	font-family: var(--w2s-titre);
	font-size: clamp(21px, 2.4vw, 27px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--w2s-teal-nuit);
	letter-spacing: -.02em;
}

.w2s-voie__chiffre small {
	display: block;
	margin-top: 6px;
	font-family: var(--w2s-texte);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--w2s-encre-2);
}

.w2s-voie dl {
	margin: auto 0 0;
	padding: 20px;
	display: grid;
	gap: 18px;
	background: #f6faf9;
	border-radius: var(--w2s-r-sm);
}

.w2s-voie--recommandee dl { background: var(--w2s-blanc); }

.w2s-voie dl > div {
	display: grid;
	grid-template-columns: 128px 1fr;
	gap: 4px 18px;
	align-items: baseline;
}

.w2s-voie dt {
	margin: 0;
	font-family: var(--w2s-titre);
	font-size: 13px;
	font-weight: 600;
	color: var(--w2s-encre-3);
	line-height: 1.4;
}

.w2s-voie dd {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--w2s-encre);
}

/* =====================================================================
 *  12. CAS CHIFFRES
 * ================================================================== */

.w2s-cas-grille {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
}

.w2s-cas {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: var(--w2s-blanc);
	border: 1px solid var(--w2s-ligne);
	border-top: 4px solid #9fc5c2;
	border-radius: var(--w2s-r-md);
	padding: clamp(24px, 2.6vw, 32px);
	box-shadow: var(--w2s-sh-1);
}

.w2s-cas:first-child {
	grid-column: 1 / -1;
	background: var(--w2s-teal-voile);
	border-color: var(--w2s-ligne-forte);
	border-top-color: var(--w2s-teal);
	padding: clamp(28px, 3.4vw, 42px);
	box-shadow: var(--w2s-sh-2);
}

.w2s-cas:nth-child(3) { background: #f8fbfa; }

.w2s-cas:first-child .w2s-cas__chiffres {
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 18px 28px;
}

.w2s-cas:first-child h3 { font-size: clamp(21px, 2.2vw, 26px); }
.w2s-cas:nth-child(3) { border-top-color: #6fa9a5; }

.w2s-cas h3 {
	font-size: clamp(18px, 1.8vw, 22px);
	font-weight: 700;
	margin-bottom: 8px;
}

.w2s-cas__contexte {
	font-size: 14px;
	line-height: 1.55;
	color: var(--w2s-encre-3);
	margin: 0 0 22px;
}

.w2s-cas__chiffres {
	margin: 0 0 20px;
	display: grid;
	gap: 12px;
}

.w2s-cas__chiffres > div {
	display: grid;
	gap: 3px;
}

.w2s-cas__chiffres dt {
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--w2s-encre-2);
}

.w2s-cas__chiffres dd {
	margin: 0;
	font-family: var(--w2s-titre);
	font-size: 16px;
	font-weight: 700;
	color: var(--w2s-teal-nuit);
	font-variant-numeric: tabular-nums;
}

/* Un seul filet sur toute la liste : celui qui isole le total. */
.w2s-cas__reste {
	margin-top: 6px;
	padding: 14px 16px;
	border: 1px solid rgba(198, 179, 76, .38);
	border-radius: var(--w2s-r-sm);
	background: var(--w2s-or-pale);
}

.w2s-cas__reste dt {
	font-family: var(--w2s-titre);
	font-weight: 700;
	color: var(--w2s-teal-nuit);
}

.w2s-cas__reste dd {
	font-size: clamp(21px, 2vw, 25px);
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--w2s-or-fonce);
}

.w2s-cas__lecon {
	margin: auto 0 0;
	padding-top: 18px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--w2s-encre-2);
}

/* =====================================================================
 *  13. PRIX  tuiles conduites par le chiffre, pas un tableau
 * ================================================================== */

.w2s-prix {
	display: grid;
	grid-template-columns: 1.12fr .94fr .94fr;
	gap: 0;
	border: 1px solid var(--w2s-ligne);
	border-radius: var(--w2s-r-md);
	overflow: hidden;
	background: var(--w2s-blanc);
	box-shadow: var(--w2s-sh-2);
}

.w2s-prix__item {
	padding: clamp(26px, 3vw, 38px);
	border-top: 4px solid transparent;
}

.w2s-prix__item + .w2s-prix__item { box-shadow: inset 1px 0 0 var(--w2s-ligne); }

.w2s-prix__item--a { border-top-color: #8fc4c4; }
.w2s-prix__item--b { border-top-color: var(--w2s-teal); }
.w2s-prix__item--c { border-top-color: var(--w2s-or); }

.w2s-prix__montant {
	display: block;
	font-family: var(--w2s-titre);
	font-size: clamp(30px, 3.6vw, 42px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--w2s-teal-nuit);
	font-variant-numeric: tabular-nums;
	margin-bottom: 6px;
}

.w2s-prix__unite {
	display: block;
	font-family: var(--w2s-titre);
	font-size: 13px;
	font-weight: 600;
	color: var(--w2s-encre-3);
	margin-bottom: 18px;
}

.w2s-prix__item h3 {
	font-size: 17.5px;
	font-weight: 700;
	margin-bottom: 10px;
}

.w2s-prix__item p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--w2s-encre-2);
}

/* =====================================================================
 *  14. CONDITIONS  media a gauche, liste a droite
 * ================================================================== */

.w2s-conditions {
	display: grid;
	grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}

.w2s-conditions__media {
	position: sticky;
	top: clamp(24px, 8vh, 96px);
	align-self: start;
	margin: 0;
	border-radius: var(--w2s-r-md);
	overflow: hidden;
	background: var(--w2s-fond);
	border: 1px solid var(--w2s-ligne);
	box-shadow: var(--w2s-sh-2);
}

.w2s-conditions__media img {
	display: block;
	width: 100%;
	height: auto;
	/* Le fichier est en 1024x840. Recadre en 4/5 avec le point de mire a
	   57 %, l'artisan et son logo RGE Qualibat tiennent entiers dans le
	   cadre, et la colonne se remplit sur toute la hauteur de la liste. */
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 57% 50%;
}

.w2s-conditions__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(26px, 3vw, 38px);
}

.w2s-conditions__liste li {
	position: relative;
	margin: 0;
	padding: clamp(22px, 2.4vw, 30px) 0 0 42px;
	border-top: 1px solid var(--w2s-ligne);
}

.w2s-conditions__liste li:first-child {
	padding-top: 0;
	border-top: 0;
}

/* Une puce validee par condition : la section est une liste de controle,
   la marque le dit avant meme la lecture. */
.w2s-conditions__liste li::before {
	content: "";
	position: absolute;
	left: 0;
	top: clamp(24px, 2.5vw, 32px);
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--w2s-teal-pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007677' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 14px no-repeat;
	box-shadow: 0 0 0 1px rgba(0, 139, 140, .16);
}

.w2s-conditions__liste li:first-child::before { top: 2px; }

.w2s-conditions__liste h3 {
	font-size: clamp(18px, 1.8vw, 21px);
	font-weight: 700;
	margin-bottom: 10px;
	color: var(--w2s-teal-nuit);
}

.w2s-conditions__liste p {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--w2s-encre-2);
}

/* =====================================================================
 *  15. ZONE D'INTERVENTION
 * ================================================================== */

.w2s-zone {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

.w2s-zone__media {
	margin: 0;
	border-radius: var(--w2s-r-md);
	overflow: hidden;
	background: var(--w2s-fond);
	border: 1px solid var(--w2s-ligne);
	box-shadow: var(--w2s-sh-2);
}

.w2s-zone__media img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.w2s-departements {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 26px 0 0;
	padding: 0;
}

.w2s-departements li { margin: 0; }

.w2s-departements a {
	display: inline-block;
	padding: 10px 17px;
	border-radius: var(--w2s-r-sm);
	background: var(--w2s-blanc);
	border: 1px solid var(--w2s-ligne-forte);
	font-family: var(--w2s-titre);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--w2s-teal-nuit);
	text-decoration: none;
	transition: border-color 180ms ease, background-color 180ms ease, transform 160ms var(--w2s-out);
}

.w2s-departements a:active { transform: scale(.96); }

@media (hover: hover) and (pointer: fine) {
	.w2s-departements a:hover {
		border-color: var(--w2s-teal);
		background: var(--w2s-teal-pale);
		transform: translateY(-2px);
	}
}

/* =====================================================================
 *  16. FAQ
 * ================================================================== */

.w2s-faq {
	border: 1px solid var(--w2s-ligne);
	border-radius: var(--w2s-r-md);
	background: var(--w2s-blanc);
	overflow: hidden;
	box-shadow: var(--w2s-sh-1);
}

.w2s-faq__item + .w2s-faq__item { border-top: 1px solid var(--w2s-ligne); }

.w2s-faq__item > summary {
	cursor: pointer;
	list-style: none;
	padding: 22px 62px 22px 26px;
	position: relative;
	font-family: var(--w2s-titre);
	font-size: 17px;
	font-weight: 600;
	color: var(--w2s-teal-nuit);
	line-height: 1.4;
	transition: background-color 180ms ease;
}

.w2s-faq__item > summary::-webkit-details-marker { display: none; }

.w2s-faq__item > summary::after {
	content: "";
	position: absolute;
	right: 24px;
	top: 50%;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007677' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 240ms var(--w2s-out);
}

.w2s-faq__item[open] > summary::after { transform: rotate(180deg); }

.w2s-faq__item[open] > summary { background: var(--w2s-teal-voile); }

@media (hover: hover) and (pointer: fine) {
	.w2s-faq__item > summary:hover { background: var(--w2s-teal-voile); }
}

.w2s-faq__reponse {
	padding: 0 26px 24px;
	font-size: 16px;
	line-height: 1.7;
	color: var(--w2s-encre-2);
	max-width: var(--w2s-mesure);
}

.w2s-faq__reponse p { margin: 0; }

/* Deploiement continu du panneau. Sans le support de interpolate-size,
   le navigateur ouvre d'un coup, comme aujourd'hui : rien ne casse. */
@supports (interpolate-size: allow-keywords) {
	@media (prefers-reduced-motion: no-preference) {
		.w2s-faq { interpolate-size: allow-keywords; }

		.w2s-faq__item::details-content {
			block-size: 0;
			overflow: hidden;
			opacity: 0;
			transition: block-size 280ms var(--w2s-out),
			            opacity 200ms ease,
			            content-visibility 280ms allow-discrete;
			transition-behavior: allow-discrete;
		}

		.w2s-faq__item[open]::details-content {
			block-size: auto;
			opacity: 1;
		}
	}
}

/* =====================================================================
 *  17. APPEL FINAL
 * ================================================================== */

.w2s-cta-final {
	position: relative;
	isolation: isolate;
	text-align: left;
	overflow: clip;
}

/* Une forme de marque tres diffuse donne de la profondeur sans concurrencer
   le message ni creer un halo artificiel autour du titre. */
.w2s-cta-final::before {
	content: "";
	position: absolute;
	right: -130px;
	top: -210px;
	width: 520px;
	height: 520px;
	z-index: -1;
	border-radius: 50%;
	background: rgba(0, 139, 140, .16);
	pointer-events: none;
}

.w2s-cta-final__corps {
	position: relative;
	max-width: 1100px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
	grid-template-areas:
		"titre actions"
		"texte actions"
		"telephone actions";
	column-gap: clamp(42px, 7vw, 96px);
	align-items: center;
}

.w2s-cta-final h2 {
	grid-area: titre;
	color: #fff;
	font-size: clamp(28px, 3.5vw, 42px);
	font-weight: 700;
	margin-bottom: 16px;
}

.w2s-cta-final p:not(.w2s-cta-final__tel) {
	grid-area: texte;
	margin: 0;
	max-width: 58ch;
	color: rgba(255, 255, 255, .84);
	font-size: 17px;
	line-height: 1.65;
}

.w2s-cta-final__boutons {
	grid-area: actions;
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: stretch;
}

.w2s-cta-final__boutons .w2s-btn { width: 100%; }

.w2s-cta-final__boutons .w2s-btn--primaire {
	background: var(--w2s-blanc);
	color: var(--w2s-teal-nuit);
	box-shadow: 0 12px 30px rgba(17, 47, 43, .24);
}

.w2s-cta-final__boutons .w2s-btn--secondaire {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, .45);
}

@media (hover: hover) and (pointer: fine) {
	.w2s-cta-final__boutons .w2s-btn--primaire:hover {
		background: var(--w2s-teal-pale);
		color: var(--w2s-teal-nuit);
	}

	.w2s-cta-final__boutons .w2s-btn--secondaire:hover {
		background: rgba(255, 255, 255, .08);
		border-color: rgba(255, 255, 255, .72);
		color: #fff;
		transform: translateY(-2px);
	}

	.w2s-cta-final__boutons .w2s-btn:active {
		transform: scale(.97);
	}
}

.w2s-cta-final__tel {
	grid-area: telephone;
	margin: 20px 0 0;
	font-size: 16px;
	color: rgba(255, 255, 255, .8);
}

.w2s-cta-final__tel a { color: #fff; font-weight: 700; white-space: nowrap; }

/* =====================================================================
 *  18. ENTREE DU HERO
 *
 *  Une seule sequence, au chargement, qui conduit l'oeil du badge au
 *  bouton puis a l'outil. Moins de 700 ms au total, jamais rejouee.
 * ================================================================== */

@media (prefers-reduced-motion: no-preference) {
	.w2s-hero__eyebrow,
	.w2s-hero h1,
	.w2s-hero__lede,
	.w2s-hero__actions,
	.w2s-hero__outil {
		animation: w2s-hero-entree 480ms var(--w2s-out) both;
	}

	.w2s-hero__eyebrow        { animation-delay: 20ms; }
	.w2s-hero h1              { animation-delay: 65ms; }
	.w2s-hero__lede           { animation-delay: 110ms; }
	.w2s-hero__actions        { animation-delay: 155ms; }
	.w2s-hero__outil          { animation-delay: 90ms; }
}

@keyframes w2s-hero-entree {
	from { opacity: 0; transform: translateY(9px); }
	to   { opacity: 1; transform: none; }
}

/* =====================================================================
 *  19. ADAPTATION
 * ================================================================== */

@media (max-width: 1024px) {
	.w2s-hero__grille { grid-template-columns: minmax(0, 1fr); }
	.w2s-hero__texte { padding-top: 0; }
	.w2s-hero__lede { max-width: 60ch; }
	.w2s-hero__outil { width: min(100%, 780px); }
	.w2s-conditions,
	.w2s-zone { grid-template-columns: minmax(0, 1fr); }
	.w2s-conditions__media { position: static; }
	.w2s-conditions__media img { aspect-ratio: 16 / 10; }
	.w2s-zone__media { order: -1; }
}

@media (max-width: 860px) {
	.w2s-change,
	.w2s-change__secondaires { grid-template-columns: minmax(0, 1fr); }
	.w2s-voies,
	.w2s-cas-grille,
	.w2s-prix { grid-template-columns: minmax(0, 1fr); }
	.w2s-cas:first-child { grid-column: auto; }
	.w2s-cas:first-child .w2s-cas__chiffres { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.w2s-prix__item + .w2s-prix__item {
		box-shadow: none;
		border-top: 1px solid var(--w2s-ligne);
	}
	.w2s-cta-final__corps {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "titre" "texte" "actions" "telephone";
		row-gap: 0;
	}
	.w2s-cta-final__boutons { margin-top: 28px; max-width: 420px; }
}

@media (max-width: 640px) {
	.w2s-page { font-size: 15.5px; }
	.w2s-band { padding-inline: 18px; }
	.w2s-page--contenu .w2s-band { padding-inline: 0; }
	.w2s-tete__logo { width: 84px; margin: 0 0 5px -17px; }
	.w2s-tete h2 { font-size: clamp(26px, 8.2vw, 32px); }
	.w2s-tete__chapo { font-size: 15.5px; line-height: 1.6; }
	.w2s-hero { border-radius: 0; }
	.w2s-sim__form .w2s-etape { min-height: 0; }
	.w2s-preuves { padding-block: 24px 30px; }
	.w2s-sim-notes { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.w2s-sim-notes li { font-size: 13.5px; }
	.w2s-preuves__liste { gap: 20px 26px; }
	.w2s-preuves__liste img { height: 40px; max-width: 122px; }
	.w2s-conditions__liste li { padding-left: 36px; }
	.w2s-conditions__liste li::before { width: 23px; height: 23px; background-size: 12px; }
	.w2s-note { padding: 15px 16px 15px 50px; font-size: 13.5px; line-height: 1.55; }
	.w2s-note::before { left: 16px; width: 24px; height: 24px; background-size: 14px; }
	#deux-voies .w2s-note,
	#prix .w2s-note { margin-top: 34px; }
	.w2s-voie,
	.w2s-cas { padding: 22px; }
	.w2s-cas:first-child { padding: 22px; }
	.w2s-cas:first-child h3 { font-size: 19px; }
	.w2s-voie h3 { font-size: 22px; }
	.w2s-voie__chiffre { font-size: 21px; padding: 16px; }
	.w2s-voie dl { padding: 17px; gap: 15px; }
	.w2s-voie dd { font-size: 14.5px; }
	.w2s-cas h3 { font-size: 18px; }
	.w2s-cas__contexte { font-size: 13.5px; }
	.w2s-cas__lecon { font-size: 14px; }
	.w2s-sim__entete { padding: 15px 18px; gap: 14px; }
	.w2s-sim__logo { width: 96px; margin: 0 -17px 0 -19px; }
	.w2s-sim__form,
	.w2s-resultat { padding: 22px 18px 0; }
	.w2s-contact { padding: 24px 18px; }
	.w2s-sim__mention { padding: 14px 18px 18px; }
	.w2s-nav { flex-direction: column-reverse; align-items: stretch; }
	.w2s-nav .w2s-btn { width: 100%; }
	.w2s-res__aide { grid-template-columns: minmax(0, 1fr); }
	.w2s-res__aide-montant { text-align: left; }
	.w2s-res__ligne-cout { flex-direction: column; gap: 4px; }
	.w2s-dpe__item span { min-width: 44px; padding: 13px 10px; }
	.w2s-voie dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
	.w2s-cta-final h2 { font-size: clamp(27px, 8vw, 34px); }
	.w2s-cta-final p:not(.w2s-cta-final__tel) { font-size: 15.5px; }
	.w2s-faq__item > summary { padding: 20px 52px 20px 20px; font-size: 16px; }
	.w2s-faq__reponse { padding: 0 20px 22px; }
}

@media (max-width: 420px) {
	.w2s-band { padding-inline: 14px; }
	.w2s-hero { padding-block: 36px 30px; }
	.w2s-hero__eyebrow { font-size: 11.5px; }
	.w2s-hero__actions { flex-direction: column; align-items: stretch; }
	.w2s-hero__actions .w2s-btn { width: 100%; }
	.w2s-hero__tel { text-align: center; font-size: 14px; }
	.w2s-btn--large { padding: 16px 18px; font-size: 15px; }
	.w2s-dpe { gap: 6px; }
	.w2s-dpe__item span { min-width: 40px; padding: 11px 8px; }
	.w2s-prix__item { padding: 22px; }
	.w2s-cta-final__boutons { max-width: none; }
}

/* =====================================================================
 *  20. MOUVEMENT REDUIT
 *  On garde l'opacite et la couleur, on supprime tout deplacement.
 * ================================================================== */

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

	.w2s-skel > * { animation: none; }
}

/* =====================================================================
 *  21. IMPRESSION
 * ================================================================== */

@media print {
	.w2s-sim__form,
	.w2s-contact,
	.w2s-nav,
	.w2s-hero__actions,
	.w2s-cta-final__boutons { display: none !important; }

	.w2s-band { margin-inline: 0; padding-inline: 0; }
	.w2s-hero__photo,
	.w2s-hero__voile,
	.w2s-preuves { display: none; }
	.w2s-hero { background: none; }
	.w2s-hero h1,
	.w2s-hero__lede { color: #000; }
	.w2s-sim { box-shadow: none; border: 1px solid #999; }
}

/* =====================================================================
 *  22. REVELATION AU DEFILEMENT
 *
 *  .w2s-rev est pose sur presque tous les blocs du contenu editorial et
 *  n'avait aucune regle : les sections arrivaient donc d'un bloc. Le
 *  mouvement ne porte que sur opacity et transform, jamais sur la
 *  hauteur : rien ne se decale pendant la lecture.
 *
 *  L'etat cache depend de .is-anime, ajoutee par le script uniquement
 *  quand l'observateur est disponible et que le mouvement est autorise.
 *  Sans JavaScript, tout reste visible.
 * ================================================================== */

.w2s-page.is-anime .w2s-rev {
	opacity: 0;
	transform: translateY(9px);
	transition: opacity 440ms var(--w2s-out) var(--w2s-d, 0ms),
	            transform 440ms var(--w2s-out) var(--w2s-d, 0ms);
}

.w2s-page.is-anime .w2s-rev.is-vu {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.w2s-page.is-anime .w2s-rev {
		opacity: 1;
		transform: none;
	}
}

@media print {
	.w2s-page.is-anime .w2s-rev {
		opacity: 1;
		transform: none;
	}
}