@charset "UTF-8";
/* =========================================================================
   Centre d'Affaires du Parc — feuille de style unique
   Palette dérivée du logo : bleu nuit #253B5A, gris-bleu #DADEE3.
   Accent doré réservé aux actions et aux repères de lecture.
   ====================================================================== */

/* -------------------------------------------------------------------------
   1. Polices auto-hébergées
   ---------------------------------------------------------------------- */

@font-face {
	font-family: 'Manrope';
	src: url('../fonts/manrope-var-latin.woff2') format('woff2-variations'),
	     url('../fonts/manrope-var-latin.woff2') format('woff2');
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -------------------------------------------------------------------------
   2. Jetons
   ---------------------------------------------------------------------- */

:root {
	/* Bleu nuit — #253B5A est la teinte du logo, le reste en dérive. */
	--nuit-900: #0C1725;
	--nuit-800: #13202F;
	--nuit-700: #1A2B41;
	--nuit-600: #1F3350;
	--nuit: #253B5A;
	--nuit-400: #40587A;
	--nuit-200: #93A5BE;
	--nuit-100: #DDE3EC;
	--nuit-050: #F1F4F8;

	/* Doré — accent unique du site. */
	--or: #C9A25F;
	--or-vif: #DDBB7C;
	--or-fonce: #8E6C28;

	/* Gris-bleu du logo, pour les filets et les fonds alternés. */
	--pierre: #DADEE3;
	--brume: #F5F7FA;

	--blanc: #FFFFFF;
	--encre: #21303F;
	--encre-moyenne: #566579;
	--encre-douce: #7B8899;

	--filet: rgba(37, 59, 90, 0.12);
	--filet-fort: rgba(37, 59, 90, 0.2);
	--filet-clair: rgba(255, 255, 255, 0.14);

	--ombre-carte: 0 1px 2px rgba(12, 23, 37, 0.04), 0 12px 32px -20px rgba(12, 23, 37, 0.22);
	--ombre-levee: 0 2px 4px rgba(12, 23, 37, 0.05), 0 28px 60px -28px rgba(12, 23, 37, 0.34);

	--r-xs: 6px;
	--r-sm: 10px;
	--r-md: 14px;
	--r-lg: 20px;
	--r-plein: 999px;

	--largeur: 1320px;
	--largeur-texte: 74ch;
	--gouttiere: clamp(20px, 4vw, 40px);
	--section-y: clamp(4.5rem, 8vw, 7.5rem);

	--titre: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--corps: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--transition: 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* -------------------------------------------------------------------------
   3. Base
   ---------------------------------------------------------------------- */

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

html {
	scroll-behavior: smooth;
	/* L'en-tête collant ne doit pas recouvrir la cible d'une ancre. */
	scroll-padding-top: 96px;
	-webkit-text-size-adjust: 100%;
	/* Le tiroir de navigation est rangé hors écran à droite : sans ce
	   rognage, sa position étend la largeur défilable du document et la page
	   se laisse balayer horizontalement sur tablette. */
	overflow-x: hidden;
}

body {
	margin: 0;
	background: var(--blanc);
	color: var(--encre);
	font-family: var(--corps);
	font-size: 1.0625rem;
	line-height: 1.65;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

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

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

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

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

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

.saut-contenu:focus {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 999;
	width: auto;
	height: auto;
	clip: auto;
	margin: 0;
	padding: 12px 20px;
	background: var(--nuit);
	color: var(--blanc);
	border-radius: var(--r-xs);
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   4. Typographie
   ---------------------------------------------------------------------- */

h1, h2, h3, h4 {
	margin: 0;
	color: var(--nuit);
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

h1, h2 { font-family: var(--titre); }

h3, h4 {
	font-family: var(--corps);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.t-affiche {
	font-family: var(--titre);
	font-size: clamp(2.15rem, 4.6vw, 3.7rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.035em;
}

.t-section {
	font-family: var(--titre);
	font-size: clamp(1.7rem, 2.9vw, 2.5rem);
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -0.03em;
}

.t-sous-section {
	font-size: clamp(1.1rem, 1.5vw, 1.3rem);
	font-weight: 700;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.surtitre {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--or-fonce);
	margin-bottom: 1.1rem;
}

.surtitre::before {
	content: '';
	width: 26px;
	height: 1px;
	background: currentColor;
	flex: none;
}

.chapeau {
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	color: var(--encre-moyenne);
	max-width: 62ch;
}

/* Un chapeau qui suit directement un titre a besoin d'air : les titres
   n'ayant aucune marge, la règle est portée par le chapeau lui-même. */
h1 + .chapeau,
h2 + .chapeau,
.t-affiche + .chapeau,
.t-section + .chapeau { margin-top: 1.25rem; }

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

/* -------------------------------------------------------------------------
   5. Mise en page
   ---------------------------------------------------------------------- */

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

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

.section { padding-block: var(--section-y); }
.section--brume { background: var(--brume); }
.section--pierre { background: var(--nuit-050); }

.section--sombre {
	background: var(--nuit-900);
	color: var(--nuit-100);
}

.section--sombre h2,
.section--sombre h3,
.section--sombre h4 { color: var(--blanc); }

.section--sombre .surtitre { color: var(--or); }
.section--sombre .chapeau { color: rgba(255, 255, 255, 0.72); }

.section__entete { margin-bottom: clamp(2.5rem, 4vw, 3.75rem); }

.section__entete--partage {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: end;
}

/* -------------------------------------------------------------------------
   6. Boutons
   ---------------------------------------------------------------------- */

.bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	padding: 0.95em 1.6em;
	border-radius: var(--r-plein);
	font-family: var(--corps);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.005em;
	border: 1.5px solid transparent;
	text-align: center;
	transition: background var(--transition), border-color var(--transition),
	            color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.bouton .cdp-icone {
	flex: none;
	transition: transform var(--transition);
}

.bouton:hover .cdp-icone--fleche { transform: translateX(3px); }

.bouton--or {
	background: var(--or);
	color: var(--nuit-900);
	box-shadow: 0 1px 2px rgba(12, 23, 37, 0.1);
}

.bouton--or:hover {
	background: var(--or-vif);
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -14px rgba(201, 162, 95, 0.75);
}

.bouton--nuit {
	background: var(--nuit);
	color: var(--blanc);
}

.bouton--nuit:hover {
	background: var(--nuit-700);
	transform: translateY(-2px);
	box-shadow: var(--ombre-carte);
}

.bouton--contour {
	border-color: var(--filet-fort);
	color: var(--nuit);
}

.bouton--contour:hover {
	border-color: var(--nuit);
	background: var(--nuit-050);
}

.bouton--fantome-clair {
	border-color: rgba(255, 255, 255, 0.32);
	color: var(--blanc);
}

.bouton--fantome-clair:hover {
	border-color: var(--blanc);
	background: rgba(255, 255, 255, 0.08);
}

.bouton--petit {
	padding: 0.65em 1.15em;
	font-size: 0.85rem;
}

.lien-fleche {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--or-fonce);
}

.lien-fleche .cdp-icone { transition: transform var(--transition); }
.lien-fleche:hover .cdp-icone { transform: translateX(4px); }
.section--sombre .lien-fleche { color: var(--or); }

.groupe-boutons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
}

/* -------------------------------------------------------------------------
   7. Bandeau de préversion
   ---------------------------------------------------------------------- */

.cdp-bandeau-preversion {
	background: var(--or-fonce);
	color: var(--blanc);
	text-align: center;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 0.5rem 1rem;
	position: relative;
	z-index: 200;
}

/* -------------------------------------------------------------------------
   8. En-tête
   ---------------------------------------------------------------------- */

/* Un en-tête collant sert aussi de référence de positionnement aux panneaux
   déroulants : les ancrer ici plutôt qu'à chaque entrée de menu évite qu'un
   panneau centré sur un item proche du bord ne sorte de l'écran. */
.entete {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.88);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--filet);
	transition: box-shadow var(--transition), background var(--transition);
}

.entete.est-defilee {
	box-shadow: 0 1px 24px -8px rgba(12, 23, 37, 0.18);
	background: rgba(255, 255, 255, 0.96);
}

.entete__interieur {
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 1.6vw, 1.5rem);
	min-height: 82px;
	padding-block: 0.7rem;
}

.entete__logo { flex: none; }

.entete__logo img {
	/* Le fichier est recadré au plus juste : cette hauteur correspond donc à
	   la hauteur réelle du logotype, pas à celle d'un carré à marges vides. */
	height: clamp(40px, 3.4vw, 52px);
	width: auto;
}

.entete__nav {
	display: flex;
	align-items: center;
	gap: clamp(0.6rem, 1.4vw, 1.25rem);
	margin-left: auto;
}

.menu {
	display: flex;
	align-items: center;
	gap: clamp(0.4rem, 0.9vw, 0.95rem);
}

.menu__lien {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.6em 0.1em;
	font-size: 0.885rem;
	font-weight: 600;
	color: var(--nuit);
	position: relative;
	white-space: nowrap;
}

.menu__lien::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.15em;
	height: 1.5px;
	background: var(--or);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--transition);
}

.menu__lien:hover::after,
.menu__item.est-ouvert > .menu__lien::after,
.menu__item.est-active > .menu__lien::after { transform: scaleX(1); }

.menu__item { position: relative; }

/* Les entrées à panneau ne servent pas de référence : le panneau se cale sur
   l'en-tête, donc sur la même largeur que le contenu du site. */
.menu__item--parent { position: static; }

.menu__lien .cdp-icone--chevron {
	transform: rotate(90deg);
	transition: transform var(--transition);
	opacity: 0.6;
}

.menu__item.est-ouvert > .menu__lien .cdp-icone--chevron { transform: rotate(-90deg); }

/* Panneau déroulant des services */
.sous-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	translate: -50% 0;
	width: min(var(--largeur), calc(100vw - 2 * var(--gouttiere)));
	background: var(--blanc);
	border: 1px solid var(--filet);
	border-radius: 0 0 var(--r-lg) var(--r-lg);
	border-top: 0;
	box-shadow: var(--ombre-levee);
	padding: 1.5rem;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 0.35rem 1rem;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

.menu__item.est-ouvert > .sous-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.sous-menu__lien {
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: 0 0.9rem;
	align-items: start;
	padding: 0.8rem;
	border-radius: var(--r-sm);
	transition: background var(--transition);
}

.sous-menu__lien:hover { background: var(--nuit-050); }

.sous-menu__icone {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--r-xs);
	background: var(--nuit-050);
	color: var(--nuit);
	transition: background var(--transition), color var(--transition);
}

.sous-menu__lien:hover .sous-menu__icone {
	background: var(--nuit);
	color: var(--or);
}

.sous-menu__titre {
	font-size: 0.94rem;
	font-weight: 700;
	color: var(--nuit);
	display: block;
}

.sous-menu__texte {
	font-size: 0.83rem;
	color: var(--encre-douce);
	line-height: 1.45;
	margin: 0.15rem 0 0;
}

.entete__actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex: none;
}

/* Lien de contact plutôt qu'un second bouton plein : la barre reste lisible
   et une seule action garde le statut de bouton principal. */
.entete__lien-conseil {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--nuit);
	white-space: nowrap;
}

.entete__lien-conseil .cdp-icone { color: var(--or-fonce); flex: none; }
.entete__lien-conseil:hover { color: var(--or-fonce); }

/* Bouton hamburger */
.bascule-menu {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 46px;
	height: 46px;
	margin-left: auto;
	border: 1px solid var(--filet);
	border-radius: var(--r-xs);
	padding: 0 11px;
}

.bascule-menu span {
	display: block;
	height: 1.5px;
	background: var(--nuit);
	border-radius: 2px;
	transition: transform var(--transition), opacity var(--transition);
}

.bascule-menu[aria-expanded='true'] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.bascule-menu[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.bascule-menu[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.fermer-menu-mobile,
.menu-mobile-fond { display: none; }

/* -------------------------------------------------------------------------
   9. Hero
   ---------------------------------------------------------------------- */

.hero {
	position: relative;
	background:
		radial-gradient(120% 120% at 88% -10%, rgba(201, 162, 95, 0.16) 0%, transparent 52%),
		linear-gradient(158deg, var(--nuit-900) 0%, var(--nuit-700) 48%, var(--nuit-600) 100%);
	color: var(--blanc);
	overflow: hidden;
	isolation: isolate;
}

.hero__skyline {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: clamp(140px, 22vw, 260px);
	color: var(--nuit-200);
	opacity: 0.12;
	pointer-events: none;
	z-index: -1;
}

/* Filet doré sous l'en-tête, rappel discret de l'accent. */
.hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(201, 162, 95, 0.5), transparent);
}

.hero__interieur {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(2.5rem, 5vw, 5rem);
	align-items: center;
	padding-block: clamp(3.5rem, 7vw, 6.5rem);
}

.hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	padding: 0.45em 1em 0.45em 0.75em;
	border: 1px solid var(--filet-clair);
	border-radius: var(--r-plein);
	background: rgba(255, 255, 255, 0.05);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--nuit-100);
	margin-bottom: 1.75rem;
}

.hero__badge .cdp-icone { color: var(--or); }

.hero__titre {
	color: var(--blanc);
	margin-bottom: 1.5rem;
	max-width: 20ch;
}

.hero__titre em {
	font-style: normal;
	color: var(--or);
}

.hero__confiance {
	font-size: clamp(1.05rem, 1.5vw, 1.22rem);
	font-weight: 600;
	color: var(--blanc);
	max-width: 48ch;
	margin-bottom: 0.8rem;
}

.hero__texte {
	font-size: 1.02rem;
	color: rgba(255, 255, 255, 0.7);
	max-width: 54ch;
	margin-bottom: 2.25rem;
}

.hero__actions { margin-bottom: 2.5rem; }

.hero__rassurances {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.6rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--filet-clair);
}

.hero__rassurance {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-size: 0.88rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.82);
}

.hero__rassurance .cdp-icone {
	color: var(--or);
	flex: none;
}

/* --- Visuel : carte de dossier --- */

.hero__visuel {
	position: relative;
	perspective: 1400px;
	/* Réserve la place de la carte flottante, qui déborde sous la maquette. */
	margin-bottom: clamp(1.5rem, 4vw, 3.5rem);
}

.dossier {
	background: var(--blanc);
	border-radius: var(--r-lg);
	box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.6);
	overflow: hidden;
	transform: rotateY(-4deg) rotateX(1.5deg);
	color: var(--encre);
}

.dossier__entete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.15rem 1.4rem;
	border-bottom: 1px solid var(--filet);
	background: var(--brume);
}

.dossier__reference {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--encre-douce);
}

.dossier__titre {
	font-family: var(--corps);
	font-size: 1rem;
	font-weight: 700;
	color: var(--nuit);
	margin-top: 0.15rem;
}

.pastille {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.35em 0.8em;
	border-radius: var(--r-plein);
	font-size: 0.74rem;
	font-weight: 700;
	white-space: nowrap;
}

.pastille--cours {
	background: rgba(201, 162, 95, 0.16);
	color: var(--or-fonce);
}

.pastille__point {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.dossier__corps { padding: 1.3rem 1.4rem 1.5rem; }

.dossier__etapes {
	display: grid;
	gap: 0;
}

.dossier__etape {
	display: grid;
	grid-template-columns: 26px 1fr auto;
	gap: 0 0.85rem;
	align-items: center;
	padding: 0.7rem 0;
	position: relative;
}

.dossier__etape + .dossier__etape { border-top: 1px solid var(--filet); }

.dossier__puce {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1.5px solid var(--pierre);
	color: transparent;
	flex: none;
}

.dossier__etape.est-faite .dossier__puce {
	background: var(--nuit);
	border-color: var(--nuit);
	color: var(--blanc);
}

.dossier__etape.est-active .dossier__puce {
	border-color: var(--or);
	border-style: dashed;
	animation: cdp-pulsation 2.4s ease-in-out infinite;
}

.dossier__etape.est-faite .dossier__libelle { color: var(--encre); }
.dossier__etape.est-active .dossier__libelle { color: var(--nuit); font-weight: 700; }

.dossier__libelle {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--encre-douce);
}

.dossier__note {
	font-size: 0.74rem;
	font-weight: 600;
	color: var(--encre-douce);
}

.dossier__pied {
	margin-top: 1.25rem;
	padding-top: 1.15rem;
	border-top: 1px solid var(--filet);
}

.dossier__jauge {
	height: 5px;
	border-radius: var(--r-plein);
	background: var(--nuit-100);
	overflow: hidden;
	margin-bottom: 0.7rem;
}

.dossier__jauge span {
	display: block;
	height: 100%;
	width: 60%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--nuit), var(--or));
}

.dossier__avancement {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--encre-moyenne);
}

/* Carte flottante secondaire, pour la profondeur.
   Elle chevauche volontairement le bord bas de la carte principale, mais doit
   rester sous la ligne d'avancement : d'où le décalage vertical marqué. */
.hero__carte-flottante {
	position: absolute;
	right: -5%;
	bottom: -13%;
	display: grid;
	grid-template-columns: 38px 1fr;
	gap: 0 0.8rem;
	align-items: center;
	padding: 0.95rem 1.2rem;
	background: var(--blanc);
	border-radius: var(--r-md);
	box-shadow: 0 24px 50px -22px rgba(0, 0, 0, 0.5);
	max-width: 280px;
}

.hero__carte-flottante .cdp-icone {
	color: var(--nuit);
	grid-row: span 2;
	justify-self: center;
}

.hero__carte-titre {
	font-size: 0.86rem;
	font-weight: 700;
	color: var(--nuit);
}

.hero__carte-texte {
	font-size: 0.78rem;
	color: var(--encre-douce);
}

@keyframes cdp-pulsation {
	0%, 100% { box-shadow: 0 0 0 0 rgba(201, 162, 95, 0.5); }
	50% { box-shadow: 0 0 0 5px rgba(201, 162, 95, 0); }
}

/* -------------------------------------------------------------------------
   10. Barre de confiance
   ---------------------------------------------------------------------- */

.barre-confiance {
	background: var(--nuit-900);
	border-top: 1px solid var(--filet-clair);
	color: var(--nuit-100);
}

.barre-confiance__liste {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.barre-confiance__item {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 1.35rem clamp(0.75rem, 2vw, 1.75rem);
	font-size: 0.9rem;
	font-weight: 600;
	border-left: 1px solid var(--filet-clair);
}

.barre-confiance__item:first-child { border-left: 0; }
.barre-confiance__item .cdp-icone { color: var(--or); flex: none; }

/* -------------------------------------------------------------------------
   11. Cartes d'orientation
   ---------------------------------------------------------------------- */

.grille-poles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: clamp(1rem, 1.6vw, 1.4rem);
}

.carte-pole {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	padding: clamp(1.5rem, 2.2vw, 2rem);
	background: var(--blanc);
	border: 1px solid var(--filet);
	border-radius: var(--r-md);
	transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
	position: relative;
	overflow: hidden;
}

.carte-pole::after {
	content: '';
	position: absolute;
	inset: auto 0 0 0;
	height: 2px;
	background: var(--or);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--transition);
}

.carte-pole:hover {
	transform: translateY(-5px);
	box-shadow: var(--ombre-levee);
	border-color: var(--filet-fort);
}

.carte-pole:hover::after { transform: scaleX(1); }

.carte-pole__etape {
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--or-fonce);
}

.carte-pole__icone {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: var(--r-sm);
	background: var(--nuit-050);
	color: var(--nuit);
	transition: background var(--transition), color var(--transition);
}

.carte-pole:hover .carte-pole__icone {
	background: var(--nuit);
	color: var(--or);
}

.carte-pole h3 { font-size: 1.08rem; }

.carte-pole p {
	font-size: 0.92rem;
	color: var(--encre-moyenne);
	margin: 0;
	flex: 1;
}

/* -------------------------------------------------------------------------
   12. Bloc création (texte + étapes)
   ---------------------------------------------------------------------- */

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

.duo--large-gauche { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }

.liste-atouts {
	display: grid;
	gap: 0.85rem;
	margin: 1.75rem 0 2.25rem;
}

.liste-atouts li {
	display: grid;
	grid-template-columns: 22px 1fr;
	gap: 0 0.75rem;
	align-items: start;
	font-size: 0.98rem;
	color: var(--encre-moyenne);
}

.liste-atouts .cdp-icone {
	color: var(--or-fonce);
	margin-top: 0.28em;
}

.section--sombre .liste-atouts li { color: rgba(255, 255, 255, 0.78); }
.section--sombre .liste-atouts .cdp-icone { color: var(--or); }

/* Escalier vertical numéroté */
.escalier {
	counter-reset: marche;
	display: grid;
	gap: 0;
	background: var(--blanc);
	border: 1px solid var(--filet);
	border-radius: var(--r-md);
	padding: clamp(1.25rem, 2vw, 1.75rem);
	box-shadow: var(--ombre-carte);
}

.escalier__marche {
	counter-increment: marche;
	display: grid;
	grid-template-columns: 42px 1fr;
	gap: 0 1.1rem;
	padding: 1.05rem 0;
	position: relative;
}

.escalier__marche + .escalier__marche { border-top: 1px solid var(--filet); }

.escalier__marche::before {
	content: counter(marche, decimal-leading-zero);
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--nuit-050);
	color: var(--nuit);
	font-size: 0.82rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	transition: background var(--transition), color var(--transition);
}

.escalier__marche:hover::before {
	background: var(--nuit);
	color: var(--or);
}

.escalier__titre {
	font-size: 0.98rem;
	font-weight: 700;
	color: var(--nuit);
}

.escalier__texte {
	font-size: 0.89rem;
	color: var(--encre-moyenne);
	margin: 0.2rem 0 0;
}

/* -------------------------------------------------------------------------
   13. Offres
   ---------------------------------------------------------------------- */

.grille-offres {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(1.1rem, 1.8vw, 1.6rem);
	align-items: start;
}

.carte-offre {
	display: flex;
	flex-direction: column;
	background: var(--blanc);
	border: 1px solid var(--filet);
	border-radius: var(--r-md);
	padding: clamp(1.05rem, 1.3vw, 1.3rem);
	position: relative;
	transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
	height: 100%;
}

.carte-offre:hover {
	transform: translateY(-4px);
	box-shadow: var(--ombre-levee);
}

.carte-offre--avant {
	border-color: var(--nuit);
	border-width: 1.5px;
	box-shadow: var(--ombre-levee);
}

.carte-offre__ruban {
	position: absolute;
	top: 0;
	left: 50%;
	translate: -50% -50%;
	padding: 0.4em 1em;
	border-radius: var(--r-plein);
	background: var(--nuit);
	color: var(--or);
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
}

.carte-offre__nom {
	font-size: 1rem;
	font-weight: 700;
	color: var(--nuit);
}

.carte-offre__accroche {
	font-size: 0.82rem;
	line-height: 1.4;
	color: var(--encre-douce);
	margin: 0.25rem 0 0;
	min-height: 2.3em;
}

.carte-offre__prix {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	flex-wrap: wrap;
	margin: 0.75rem 0 0;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--filet);
}

/* Pages d'acquisition : offre lisible immédiatement, sans sacrifier le
   catalogue détaillé plus bas pour les visiteurs qui veulent comparer. */
.entete-page--campagne {
	background:
		radial-gradient(circle at 82% 15%, rgba(201, 162, 95, 0.18), transparent 30rem),
		var(--blanc);
}

.entete-page--campagne .entete-page__interieur {
	align-items: center;
}

.campagne-urgence {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: var(--blanc);
	background: linear-gradient(100deg, #102944, #183f68 55%, #102944);
}

.campagne-urgence::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0 auto 0 -35%;
	width: 28%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
	transform: skewX(-18deg);
	animation: cdp-urgence-lueur 3.8s ease-in-out infinite;
}

.campagne-urgence__interieur {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(1.5rem, 5vw, 4rem);
	min-height: 5.2rem;
	padding-block: 0.75rem;
}

.campagne-urgence p {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin: 0;
}

.campagne-urgence p strong {
	display: inline-flex;
	padding: 0.45rem 0.7rem;
	border-radius: var(--r-plein);
	background: var(--or);
	color: var(--nuit);
	font-size: 0.72rem;
	font-weight: 900;
	letter-spacing: 0.055em;
	text-transform: uppercase;
	animation: cdp-urgence-pulse 1.5s ease-in-out infinite;
}

.campagne-urgence p span {
	font-size: 0.9rem;
	font-weight: 700;
}

.campagne-compteur {
	display: flex;
	align-items: stretch;
	gap: 0.35rem;
}

.campagne-compteur > span {
	display: grid;
	min-width: 3.25rem;
	padding: 0.45rem 0.55rem;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--r-sm);
	background: rgba(255, 255, 255, 0.09);
	text-align: center;
}

.campagne-compteur b {
	font-family: var(--titre);
	font-size: 1.1rem;
	line-height: 1;
}

.campagne-compteur small {
	margin-top: 0.2rem;
	color: rgba(255, 255, 255, 0.74);
	font-size: 0.58rem;
	text-transform: uppercase;
}

@keyframes cdp-urgence-lueur {
	0%, 24% { left: -35%; }
	75%, 100% { left: 125%; }
}

@keyframes cdp-urgence-pulse {
	0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(201, 162, 95, 0.42); }
	50% { transform: scale(1.035); box-shadow: 0 0 0 0.5rem rgba(201, 162, 95, 0); }
}

.campagne-micro {
	max-width: 42rem;
	margin: 0.9rem 0 0;
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--encre-douce);
}

.campagne-offre {
	position: relative;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border: 1px solid rgba(201, 162, 95, 0.55);
	border-radius: var(--r-lg);
	background: var(--blanc);
	box-shadow: 0 20px 60px rgba(24, 49, 79, 0.13);
	overflow: hidden;
}

.campagne-offre::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 5px;
	background: linear-gradient(90deg, var(--or), #efd59d);
}

.campagne-offre__badge {
	display: inline-flex;
	margin: 0 0 1rem;
	padding: 0.45rem 0.75rem;
	border-radius: var(--r-plein);
	background: #f7edd9;
	color: var(--or-fonce);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.campagne-offre__label {
	margin: 0;
	color: var(--encre-douce);
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
}

.campagne-offre h2 {
	margin: 0.35rem 0 0;
	font-size: clamp(1.35rem, 2.4vw, 1.85rem);
	color: var(--nuit);
}

.campagne-offre__ancien {
	margin: 1.25rem 0 0;
	font-size: 1rem;
	color: var(--encre-douce);
	text-decoration: line-through;
	text-decoration-thickness: 2px;
}

.campagne-offre__prix {
	margin: 0.1rem 0 0;
	font-family: var(--titre);
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.045em;
	color: var(--nuit);
}

.campagne-offre__prix small {
	font-family: var(--corps);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--encre-douce);
}

.campagne-offre__economie {
	margin: 0.7rem 0 1.25rem;
	font-size: 0.9rem;
	font-weight: 800;
	color: #26734d;
}

.campagne-offre .bouton {
	width: 100%;
	justify-content: center;
}

.campagne-reperes {
	padding-block: 1rem;
	border-top: 1px solid rgba(201, 162, 95, 0.2);
	border-bottom: 1px solid rgba(201, 162, 95, 0.2);
	background: linear-gradient(135deg, #f6f8fb, #edf2f7);
}

.campagne-reperes__grille {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.75rem;
	padding-block: 0;
}

.campagne-reperes p {
	display: grid;
	grid-template-columns: 2.4rem 1fr;
	gap: 0.25rem 0.8rem;
	align-items: center;
	margin: 0;
	padding: 1rem;
	border: 1px solid rgba(24, 49, 79, 0.08);
	border-radius: var(--r-md);
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 8px 24px rgba(24, 49, 79, 0.055);
}

.campagne-reperes i {
	display: grid;
	grid-row: 1 / span 2;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	background: #f7edd9;
	color: var(--or-fonce);
	font-style: normal;
}
.campagne-reperes strong { color: var(--nuit); line-height: 1.25; }
.campagne-reperes span { grid-column: 2; font-size: 0.76rem; line-height: 1.45; color: var(--encre-douce); }
.campagne-cta-mobile { display: none; }

.carte-offre__promo {
	display: inline-flex;
	margin: 0.7rem 0 0;
	padding: 0.35rem 0.55rem;
	border-radius: var(--r-sm);
	background: #edf8f2;
	color: #26734d;
	font-size: 0.76rem;
	font-weight: 800;
}

.carte-offre__ancien-prix {
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--encre-douce);
	text-decoration: line-through;
}

@media (max-width: 760px) {
	.campagne-urgence__interieur { display: grid; gap: 0.65rem; padding-block: 0.7rem; }
	.campagne-urgence p { display: grid; justify-items: center; gap: 0.4rem; text-align: center; }
	.campagne-urgence p span { font-size: 0.74rem; }
	.campagne-compteur { justify-content: center; }
	.campagne-compteur > span { min-width: 2.85rem; padding: 0.4rem; }
	.campagne-reperes__grille { grid-template-columns: 1fr; }
	.campagne-reperes { padding-block: 0.75rem; }
	.campagne-reperes p { padding: 0.9rem; }
	.campagne-offre { margin-top: 0.5rem; }
	.campagne-cta-mobile {
		display: flex;
		position: fixed;
		z-index: 90;
		left: 0.75rem;
		right: 0.75rem;
		bottom: 0.75rem;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		padding: 0.75rem;
		border: 1px solid rgba(201, 162, 95, 0.55);
		border-radius: var(--r-lg);
		background: rgba(255, 255, 255, 0.96);
		box-shadow: 0 12px 40px rgba(24, 49, 79, 0.2);
		backdrop-filter: blur(12px);
	}
	.campagne-cta-mobile > div { display: grid; min-width: 0; }
	.campagne-cta-mobile strong { color: var(--nuit); font-size: 0.95rem; }
	.campagne-cta-mobile span { overflow: hidden; color: var(--encre-douce); font-size: 0.7rem; text-overflow: ellipsis; white-space: nowrap; }
	body:has(.campagne-cta-mobile) .bulle-contact { bottom: 6.8rem; }
}

@media (prefers-reduced-motion: reduce) {
	.campagne-urgence::before,
	.campagne-urgence p strong { animation: none; }
}

.carte-offre__montant {
	font-family: var(--titre);
	font-size: clamp(1.45rem, 1.8vw, 1.7rem);
	font-weight: 800;
	line-height: 1;
	color: var(--nuit);
	letter-spacing: -0.035em;
}

.carte-offre__suffixe {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--encre-douce);
}

.carte-offre__prefixe {
	flex-basis: 100%;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--encre-douce);
}

.carte-offre__facturation {
	margin: 1.1rem 0 0;
	padding: 0.75rem 0;
	border-top: 1px solid var(--filet);
	border-bottom: 1px solid var(--filet);
	font-size: 0.86rem;
	font-weight: 700;
	color: var(--or-fonce);
}

.carte-offre__inclus {
	display: grid;
	gap: 0.38rem;
	margin: 0.75rem 0 0;
}

.carte-offre__inclus li {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 0 0.65rem;
	align-items: start;
	font-size: 0.84rem;
	line-height: 1.4;
	color: var(--encre-moyenne);
}

.carte-offre__inclus .cdp-icone { margin-top: 0.24em; }
.carte-offre__inclus li .cdp-icone--check { color: var(--or-fonce); }

.carte-offre__inclus li.est-exclu {
	color: var(--encre-douce);
	opacity: 0.75;
}

.carte-offre__inclus li.est-exclu .cdp-icone--moins { color: var(--pierre); }

.carte-offre__delai {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	margin-top: 1.35rem;
	padding: 0.5em 0.9em;
	border-radius: var(--r-xs);
	background: var(--nuit-050);
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--nuit);
	align-self: flex-start;
}

.carte-offre__pied { margin-top: auto; padding-top: 1.6rem; }
.carte-offre__pied .bouton { width: 100%; }

.note-tarifs {
	margin-top: 1.75rem;
	font-size: 0.86rem;
	color: var(--encre-douce);
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.note-tarifs .cdp-icone { flex: none; margin-top: 0.15em; }

/* -------------------------------------------------------------------------
   14. Processus horizontal
   ---------------------------------------------------------------------- */

.process {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0;
	counter-reset: jalon;
}

.process__etape {
	counter-increment: jalon;
	padding: 0 clamp(0.6rem, 1.4vw, 1.35rem);
	position: relative;
}

.process__etape::before {
	content: counter(jalon);
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--nuit-900);
	border: 1.5px solid var(--or);
	color: var(--or);
	font-size: 0.92rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	margin-bottom: 1.35rem;
	position: relative;
	z-index: 1;
}

/* Le trait de liaison s'arrête au dernier jalon. */
.process__etape:not(:last-child)::after {
	content: '';
	position: absolute;
	top: 23px;
	left: calc(clamp(0.6rem, 1.4vw, 1.35rem) + 46px + 12px);
	right: 0;
	height: 1px;
	background: var(--filet-clair);
}

.process__titre {
	font-size: 0.99rem;
	font-weight: 700;
	color: var(--blanc);
	margin-bottom: 0.4rem;
}

.process__texte {
	font-size: 0.88rem;
	color: rgba(255, 255, 255, 0.62);
	margin: 0;
}

/* -------------------------------------------------------------------------
   15. Preuve sociale
   ---------------------------------------------------------------------- */

.preuve__declaration {
	font-family: var(--titre);
	font-size: clamp(1.6rem, 2.8vw, 2.4rem);
	font-weight: 800;
	line-height: 1.16;
	letter-spacing: -0.03em;
	color: var(--blanc);
	max-width: 30ch;
}

.grille-chiffres {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1px;
	background: var(--filet-clair);
	border: 1px solid var(--filet-clair);
	border-radius: var(--r-md);
	overflow: hidden;
	margin-top: clamp(2.5rem, 4vw, 3.5rem);
}

.chiffre {
	background: var(--nuit-900);
	padding: clamp(1.5rem, 2.4vw, 2.1rem);
}

.chiffre__valeur {
	font-family: var(--titre);
	font-size: clamp(2rem, 3.4vw, 2.9rem);
	font-weight: 800;
	line-height: 1;
	color: var(--or);
	letter-spacing: -0.035em;
	font-variant-numeric: tabular-nums;
	display: block;
	margin-bottom: 0.5rem;
}

.chiffre__libelle {
	font-size: 0.88rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.7);
	line-height: 1.4;
}

/* -------------------------------------------------------------------------
   16. Implantations
   ---------------------------------------------------------------------- */

.grille-lieux {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(1.1rem, 1.8vw, 1.6rem);
}

.carte-lieu {
	display: flex;
	flex-direction: column;
	background: var(--blanc);
	border: 1px solid var(--filet);
	border-radius: var(--r-md);
	overflow: hidden;
	transition: transform var(--transition), box-shadow var(--transition);
}

.carte-lieu:hover {
	transform: translateY(-4px);
	box-shadow: var(--ombre-levee);
}

.carte-lieu__entete {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding: clamp(1.4rem, 2.2vw, 1.9rem);
	background: var(--nuit-900);
	color: var(--blanc);
	position: relative;
	overflow: hidden;
}

.carte-lieu__skyline {
	position: absolute;
	inset: auto 0 0 0;
	height: 60px;
	color: var(--nuit-200);
	opacity: 0.16;
	pointer-events: none;
}

.carte-lieu__ville {
	font-family: var(--titre);
	font-size: clamp(1.4rem, 2vw, 1.75rem);
	font-weight: 800;
	color: var(--blanc);
	letter-spacing: -0.03em;
	position: relative;
}

.carte-lieu__tarif {
	text-align: right;
	position: relative;
	flex: none;
}

.carte-lieu__montant {
	display: block;
	font-family: var(--titre);
	font-size: clamp(1.3rem, 1.8vw, 1.6rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--or);
}

.carte-lieu__unite {
	font-size: 0.75rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.65);
}

.carte-lieu__corps {
	padding: clamp(1.4rem, 2.2vw, 1.9rem);
	display: flex;
	flex-direction: column;
	gap: 1rem;
	flex: 1;
}

.carte-lieu__ligne {
	display: grid;
	grid-template-columns: 22px 1fr;
	gap: 0 0.75rem;
	align-items: start;
	font-size: 0.92rem;
	color: var(--encre-moyenne);
}

.carte-lieu__ligne .cdp-icone {
	color: var(--nuit-400);
	margin-top: 0.2em;
}

.carte-lieu__ligne--attente {
	color: var(--encre-douce);
	font-style: italic;
}

.carte-lieu__pied {
	margin-top: auto;
	padding-top: 1.25rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

/* -------------------------------------------------------------------------
   17. Pôle digital
   ---------------------------------------------------------------------- */

.grille-digital {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 1px;
	background: var(--filet);
	border: 1px solid var(--filet);
	border-radius: var(--r-md);
	overflow: hidden;
}

.tuile-digital {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	padding: clamp(1.4rem, 2vw, 1.85rem);
	background: var(--blanc);
	transition: background var(--transition);
}

.tuile-digital:hover { background: var(--brume); }

.tuile-digital .cdp-icone--web,
.tuile-digital .cdp-icone { color: var(--nuit); }

.tuile-digital__titre {
	font-size: 1rem;
	font-weight: 700;
	color: var(--nuit);
}

.tuile-digital__texte {
	font-size: 0.89rem;
	color: var(--encre-moyenne);
	margin: 0;
}

/* -------------------------------------------------------------------------
   18. Réalisations
   ---------------------------------------------------------------------- */

.grille-projets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
	gap: clamp(1.25rem, 2.2vw, 2rem);
}

.carte-projet {
	display: flex;
	flex-direction: column;
	background: var(--blanc);
	border: 1px solid var(--filet);
	border-radius: var(--r-md);
	overflow: hidden;
	transition: transform var(--transition), box-shadow var(--transition);
}

.carte-projet:hover {
	transform: translateY(-6px);
	box-shadow: var(--ombre-levee);
}

.carte-projet__visuel {
	position: relative;
	background: linear-gradient(160deg, var(--nuit-800), var(--nuit-600));
	padding: clamp(1.5rem, 2.5vw, 2.25rem) clamp(1.5rem, 2.5vw, 2.25rem) 0;
	overflow: hidden;
	aspect-ratio: 16 / 10;
}

.carte-projet__capture {
	width: 100%;
	border-radius: var(--r-sm) var(--r-sm) 0 0;
	box-shadow: 0 -2px 0 rgba(255, 255, 255, 0.1), 0 26px 50px -18px rgba(0, 0, 0, 0.55);
	transition: transform var(--transition);
	display: block;
}

.carte-projet:hover .carte-projet__capture { transform: translateY(-8px); }

.carte-projet__mobile {
	position: absolute;
	right: clamp(1rem, 2vw, 1.75rem);
	bottom: 0;
	width: clamp(66px, 15%, 96px);
	border-radius: var(--r-xs) var(--r-xs) 0 0;
	box-shadow: 0 16px 34px -12px rgba(0, 0, 0, 0.6);
	border: 2px solid rgba(255, 255, 255, 0.85);
	border-bottom: 0;
}

.carte-projet__sansvisuel {
	display: grid;
	place-items: center;
	height: 100%;
	color: var(--nuit-200);
	font-size: 0.85rem;
	font-weight: 600;
	text-align: center;
	padding-bottom: 2rem;
}

.carte-projet__corps {
	padding: clamp(1.35rem, 2.2vw, 1.85rem);
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	flex: 1;
}

.carte-projet__nom {
	font-size: 1.18rem;
	font-weight: 700;
	color: var(--nuit);
}

.carte-projet__etiquettes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.etiquette {
	padding: 0.3em 0.7em;
	border-radius: var(--r-xs);
	background: var(--nuit-050);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--nuit);
	letter-spacing: 0.01em;
}

.carte-projet__texte {
	font-size: 0.92rem;
	color: var(--encre-moyenne);
	margin: 0;
	flex: 1;
}

.carte-projet__pied {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-top: 0.4rem;
}

/* -------------------------------------------------------------------------
   19. Témoignages
   ---------------------------------------------------------------------- */

.grille-avis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: clamp(1.1rem, 1.8vw, 1.6rem);
}

.carte-avis {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	padding: clamp(1.6rem, 2.4vw, 2.1rem);
	background: var(--blanc);
	border: 1px solid var(--filet);
	border-radius: var(--r-md);
}

.carte-avis__note {
	display: flex;
	gap: 0.15rem;
	color: var(--or);
}

.carte-avis__texte {
	font-size: 1rem;
	color: var(--encre);
	margin: 0;
	flex: 1;
}

.carte-avis__auteur {
	padding-top: 1.1rem;
	border-top: 1px solid var(--filet);
	font-size: 0.88rem;
}

.carte-avis__nom {
	font-weight: 700;
	color: var(--nuit);
	display: block;
}

.carte-avis__meta { color: var(--encre-douce); }

/* -------------------------------------------------------------------------
   20. FAQ
   ---------------------------------------------------------------------- */

.faq {
	display: grid;
	gap: 0;
	border-top: 1px solid var(--filet);
}

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

.faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	width: 100%;
	padding: 1.4rem 0;
	text-align: left;
	font-family: var(--corps);
	font-size: clamp(1rem, 1.3vw, 1.1rem);
	font-weight: 700;
	color: var(--nuit);
	transition: color var(--transition);
}

.faq__question:hover { color: var(--or-fonce); }

.faq__question .cdp-icone {
	flex: none;
	color: var(--or-fonce);
	transition: transform var(--transition);
}

.faq__item.est-ouvert .faq__question .cdp-icone { transform: rotate(45deg); }

.faq__reponse {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--transition);
}

.faq__item.est-ouvert .faq__reponse { grid-template-rows: 1fr; }

.faq__reponse > div { overflow: hidden; }

.faq__reponse p {
	max-width: 78ch;
	padding-bottom: 1.5rem;
	color: var(--encre-moyenne);
	margin: 0;
}

/* -------------------------------------------------------------------------
   21. Guides
   ---------------------------------------------------------------------- */

.grille-guides {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(1.1rem, 1.8vw, 1.6rem);
}

.carte-guide {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	padding: clamp(1.5rem, 2.2vw, 2rem);
	background: var(--blanc);
	border: 1px solid var(--filet);
	border-radius: var(--r-md);
	transition: transform var(--transition), box-shadow var(--transition);
}

.carte-guide:hover {
	transform: translateY(-4px);
	box-shadow: var(--ombre-levee);
}

.carte-guide__meta {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--or-fonce);
}

.carte-guide__titre {
	font-size: 1.08rem;
	font-weight: 700;
	color: var(--nuit);
}

.carte-guide__texte {
	font-size: 0.92rem;
	color: var(--encre-moyenne);
	margin: 0;
	flex: 1;
}

.etat-vide {
	padding: clamp(2rem, 4vw, 3rem);
	border: 1px dashed var(--filet-fort);
	border-radius: var(--r-md);
	text-align: center;
	color: var(--encre-douce);
	font-size: 0.95rem;
	background: var(--blanc);
}

/* -------------------------------------------------------------------------
   22. Appel final
   ---------------------------------------------------------------------- */

.appel-final {
	position: relative;
	background:
		radial-gradient(90% 140% at 15% 0%, rgba(201, 162, 95, 0.18) 0%, transparent 55%),
		linear-gradient(120deg, var(--nuit-900), var(--nuit-600));
	color: var(--blanc);
	overflow: hidden;
	isolation: isolate;
}

.appel-final__skyline {
	position: absolute;
	inset: auto 0 0 0;
	height: 150px;
	color: var(--nuit-200);
	opacity: 0.1;
	z-index: -1;
	pointer-events: none;
}

.appel-final__interieur {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) auto;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	align-items: center;
	padding-block: clamp(3rem, 6vw, 5rem);
}

.appel-final__titre {
	font-family: var(--titre);
	font-size: clamp(1.65rem, 2.9vw, 2.5rem);
	font-weight: 800;
	line-height: 1.16;
	letter-spacing: -0.03em;
	color: var(--blanc);
	max-width: 26ch;
	margin-bottom: 0.8rem;
}

.appel-final__texte {
	color: rgba(255, 255, 255, 0.7);
	max-width: 52ch;
	margin: 0;
}

/* -------------------------------------------------------------------------
   23. Pied de page
   ---------------------------------------------------------------------- */

.pied {
	background: var(--nuit-900);
	color: rgba(255, 255, 255, 0.66);
	font-size: 0.92rem;
}

.pied__principal {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: clamp(2rem, 4vw, 3.5rem);
	padding-block: clamp(3rem, 5vw, 4.5rem);
}

.pied__logo {
	height: 62px;
	width: auto;
	margin-bottom: 1.25rem;
	/* Le logo est bleu nuit sur fond transparent : on l'éclaircit pour
	   qu'il reste lisible sur le fond sombre du pied de page. */
	filter: brightness(0) invert(1);
	opacity: 0.92;
}

.pied__accroche {
	max-width: 34ch;
	margin-bottom: 1.5rem;
}

.pied__titre {
	font-family: var(--corps);
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--blanc);
	margin-bottom: 1.25rem;
}

.pied__liste { display: grid; gap: 0.7rem; }

.pied__liste a {
	transition: color var(--transition);
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

.pied__liste a:hover { color: var(--or); }
.pied__liste .cdp-icone { color: var(--nuit-200); flex: none; }

.pied__bas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1.5rem;
	border-top: 1px solid var(--filet-clair);
	font-size: 0.84rem;
}

.pied__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
}

.pied__legal a:hover { color: var(--or); }

/* -------------------------------------------------------------------------
   24. Bulle de contact flottante
   ---------------------------------------------------------------------- */

.bulle-contact {
	position: fixed;
	right: clamp(16px, 3vw, 28px);
	bottom: clamp(16px, 3vw, 28px);
	z-index: 150;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.6rem;
}

.bulle-contact__declencheur {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.85em 1.2em;
	border: 0;
	border-radius: var(--r-plein);
	background: var(--nuit);
	color: var(--blanc);
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 16px 34px -14px rgba(12, 23, 37, 0.65);
	transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}

.bulle-contact__declencheur:hover {
	background: var(--nuit-700);
	transform: translateY(-2px) scale(1.02);
	box-shadow: 0 20px 40px -14px rgba(12, 23, 37, 0.75);
}

.bulle-contact__declencheur-icone { display: inline-flex; }
.bulle-contact .cdp-icone { flex: none; }

/* Le déclencheur pivote vers une croix quand le choix est ouvert : le même
   bouton sert à refermer, sans ajouter un second bouton dans le coin. */
.bulle-contact[data-ouvert] .bulle-contact__declencheur-icone {
	transform: rotate(45deg);
	transition: transform var(--transition);
}

.bulle-contact__choix {
	width: min(310px, calc(100vw - 32px));
	padding: 0.85rem;
	border: 1px solid var(--filet);
	border-radius: var(--r-md);
	background: var(--blanc);
	box-shadow: var(--ombre-levee);
	animation: bulle-apparition 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes bulle-apparition {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

.bulle-contact__intro {
	margin: 0 0 0.6rem;
	color: var(--encre-moyenne);
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.bulle-contact__option {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	width: 100%;
	padding: 0.65rem;
	border: 1px solid var(--filet);
	border-radius: var(--r-sm);
	background: var(--blanc);
	color: var(--nuit);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color var(--transition), background var(--transition);
}

.bulle-contact__option + .bulle-contact__option { margin-top: 0.5rem; }

.bulle-contact__option:hover {
	border-color: var(--or);
	background: var(--nuit-050);
}

.bulle-contact__icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	color: var(--blanc);
}

.bulle-contact__icone--agent { background: var(--or); }
.bulle-contact__icone--whatsapp { background: #1FA855; }

.bulle-contact__texte { display: flex; flex-direction: column; gap: 0.1rem; }
.bulle-contact__texte strong { font-size: 0.9rem; font-weight: 700; }
.bulle-contact__texte small { color: var(--encre-douce); font-size: 0.76rem; line-height: 1.3; }

/* Repli sans l'extension du conseiller : lien WhatsApp direct, présentation
   identique à l'ancien bouton flottant. */
.bulle-contact--simple {
	flex-direction: row;
	align-items: center;
	gap: 0.6em;
	padding: 0.85em 1.2em;
	border-radius: var(--r-plein);
	background: #1FA855;
	color: var(--blanc);
	font-size: 0.9rem;
	font-weight: 700;
	box-shadow: 0 16px 34px -14px rgba(31, 168, 85, 0.7);
	transition: transform var(--transition), box-shadow var(--transition);
}

.bulle-contact--simple:hover {
	transform: translateY(-2px) scale(1.02);
	box-shadow: 0 20px 40px -14px rgba(31, 168, 85, 0.8);
}

/* -------------------------------------------------------------------------
   25. Fil d'Ariane, pages internes, WooCommerce
   ---------------------------------------------------------------------- */

.fil-ariane {
	background: var(--brume);
	border-bottom: 1px solid var(--filet);
	font-size: 0.85rem;
}

.fil-ariane ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	padding-block: 0.9rem;
	color: var(--encre-douce);
}

.fil-ariane li + li::before {
	content: '/';
	margin-right: 0.5rem;
	color: var(--pierre);
}

.fil-ariane a { color: var(--nuit); font-weight: 600; }
.fil-ariane a:hover { color: var(--or-fonce); }

.principal--page { padding-block: var(--section-y); }
.principal--boutique { padding-block: var(--section-y); background: var(--brume); }

.principal--page h1 { margin-bottom: 1.5rem; }
.principal--page h2 { margin: 2.5rem 0 1rem; }
.principal--page h3 { margin: 2rem 0 0.75rem; }
.principal--page ul,
.principal--page ol { margin: 0 0 1.25rem 1.25rem; list-style: revert; }
.principal--page li { margin-bottom: 0.4rem; }
.principal--page a { color: var(--or-fonce); text-decoration: underline; text-underline-offset: 2px; }

/* -------------------------------------------------------------------------
   26. Formulaires
   ---------------------------------------------------------------------- */

.formulaire {
	display: grid;
	gap: 1.1rem;
}

.champ { display: grid; gap: 0.4rem; }

.champ--duo {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1.1rem;
}

.champ label,
.champ__legende {
	font-size: 0.86rem;
	font-weight: 700;
	color: var(--nuit);
}

.champ input,
.champ select,
.champ textarea {
	width: 100%;
	padding: 0.85em 1em;
	border: 1px solid var(--filet-fort);
	border-radius: var(--r-xs);
	background: var(--blanc);
	font-family: var(--corps);
	font-size: 0.98rem;
	color: var(--encre);
	transition: border-color var(--transition), box-shadow var(--transition);
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
	outline: none;
	border-color: var(--or);
	box-shadow: 0 0 0 3px rgba(201, 162, 95, 0.18);
}

.champ textarea { resize: vertical; min-height: 120px; }

.alerte {
	padding: 0.95rem 1.15rem;
	border-radius: var(--r-xs);
	font-size: 0.92rem;
	font-weight: 600;
	border: 1px solid transparent;
}

.alerte--succes {
	background: #E8F6EE;
	border-color: #B8E2CB;
	color: #14683C;
}

.alerte--erreur {
	background: #FBECEA;
	border-color: #F0CBC6;
	color: #97281C;
}

/* -------------------------------------------------------------------------
   27. Adaptations
   ---------------------------------------------------------------------- */

@media (max-width: 1080px) {
	.hero__interieur { grid-template-columns: 1fr; }
	.hero__visuel { max-width: 560px; }
	.hero__carte-flottante { right: 0; }
	.process { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); row-gap: 2.25rem; }
	.process__etape:not(:last-child)::after { display: none; }
	.pied__principal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1120px) {
	/* Un backdrop-filter fait de l'en-tête le bloc conteneur de ses
	   descendants en position fixe : le tiroir se retrouvait alors enfermé
	   dans la hauteur de la barre au lieu de couvrir l'écran. On y renonce
	   sous ce seuil, au profit d'un fond opaque. */
	.entete {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		background: var(--blanc);
	}

	.entete__nav {
		position: fixed;
		inset: 0 0 0 auto;
		width: min(380px, 88vw);
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--blanc);
		box-shadow: -20px 0 60px -20px rgba(12, 23, 37, 0.35);
		padding: 1.5rem var(--gouttiere) 2.5rem;
		overflow-y: auto;
		transform: translateX(100%);
		transition: transform var(--transition);
		z-index: 120;
	}

	.entete__nav.est-ouverte { transform: translateX(0); }

	.fermer-menu-mobile {
		display: inline-flex;
		align-items: center;
		gap: 0.55rem;
		align-self: flex-end;
		min-height: 44px;
		padding: 0.35rem 0.2rem;
		font-size: 0.9rem;
		font-weight: 700;
		color: var(--nuit);
	}

	.fermer-menu-mobile__croix {
		display: grid;
		place-items: center;
		width: 36px;
		height: 36px;
		border: 1px solid var(--filet);
		border-radius: 50%;
		font-size: 1.65rem;
		font-weight: 400;
		line-height: 1;
	}

	.menu-mobile-fond {
		display: block;
		position: fixed;
		inset: 0;
		border: 0;
		background: rgba(12, 23, 37, 0.48);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity var(--transition), visibility var(--transition);
		z-index: 110;
	}

	.entete__nav.est-ouverte + .menu-mobile-fond {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.bascule-menu { display: flex; }

	.menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin-top: 0.75rem;
	}

	.menu__item { border-bottom: 1px solid var(--filet); }

	/* Le lien occupe toute la ligne, pas seulement la largeur de son texte.
	   En version bureau il est en inline-flex pour se placer dans la barre de
	   navigation ; sur mobile chaque entrée est une ligne à part entière, et
	   c'est la ligne entière qui doit être tactile — y compris le blanc à droite
	   du libellé et jusqu'au chevron. Sans ce display:flex, le
	   justify-content ci-dessous n'a aucun effet et la zone tactile se limite
	   aux quelques caractères du libellé. */
	.menu__lien {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		min-height: 48px;
		padding: 0.95em 0;
		font-size: 1.02rem;
		white-space: normal;
	}

	.menu__lien::after { display: none; }

	.sous-menu {
		position: static;
		width: auto;
		translate: none;
		transform: none;
		box-shadow: none;
		border: 0;
		border-radius: 0;
		padding: 0 0 1rem;
		grid-template-columns: 1fr;
		gap: 0;
		display: none;
		opacity: 1;
		visibility: visible;
	}

	.menu__item.est-ouvert > .sous-menu { display: grid; }

	/* Même principe pour les entrées de second niveau : ligne pleine largeur et
	   hauteur tactile confortable. */
	.sous-menu__lien {
		width: 100%;
		min-height: 46px;
		padding: 0.7rem 0;
	}

	.sous-menu__texte { display: none; }

	/* En version bureau, l'ordre du balisage place le bouton d'action à droite,
	   là où l'œil le cherche. Empilées sur mobile, ces mêmes entrées mettaient
	   « Créer mon entreprise » tout en bas, après le compte et le conseiller :
	   l'action principale se retrouvait dernière. On rétablit la hiérarchie —
	   commander d'abord, contacter ensuite — sans dupliquer le balisage. */
	.entete__actions {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		margin-top: 1.75rem;
	}

	.entete__actions .bouton {
		order: 1;
		width: 100%;
	}

	.entete__compte { order: 2; }
	.entete__conseil { order: 3; }

	.entete__actions .bouton { width: 100%; }

	.entete__lien-conseil {
		justify-content: center;
		padding: 0.9em 0;
		font-size: 0.95rem;
	}

	.duo,
	.section__entete--partage,
	.appel-final__interieur { grid-template-columns: 1fr; }

	.section__entete--partage { align-items: start; }
	.appel-final__interieur { gap: 2rem; }
}

@media (max-width: 620px) {
	:root { --section-y: 3.5rem; }

	body { font-size: 1rem; }

	/* Le logo reste le seul repère de marque une fois le menu replié : il garde
	   sur petit écran une taille proche de celle du bureau plutôt que d'être
	   réduit à une vignette. */
	.entete__interieur { min-height: 78px; }
	.entete__logo img { height: 52px; }

	.hero__rassurances { gap: 0.6rem 1rem; }
	.hero__carte-flottante { display: none; }
	.dossier { transform: none; }

	.barre-confiance__item {
		border-left: 0;
		border-top: 1px solid var(--filet-clair);
		padding-block: 1.05rem;
	}

	.barre-confiance__item:first-child { border-top: 0; }

	.pied__principal { grid-template-columns: 1fr; gap: 2.25rem; }
	.pied__bas { flex-direction: column; align-items: flex-start; }

	/* Sur téléphone, le déclencheur se réduit à une pastille : la place
	   revient au contenu, et le libellé est déjà repris dans le panneau. */
	.bulle-contact__declencheur,
	.bulle-contact--simple {
		padding: 0.85em;
		border-radius: 50%;
	}

	.bulle-contact__declencheur-libelle,
	.bulle-contact--simple span { display: none; }

	.carte-offre__ruban { font-size: 0.64rem; }
	.grille-projets { grid-template-columns: 1fr; }
}

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

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

@media print {
	.entete, .bulle-contact, .cdp-bandeau-preversion, .appel-final { display: none; }
	body { color: #000; }
}

/* -------------------------------------------------------------------------
   28. Pages internes — en-tête, prose, encarts
   ---------------------------------------------------------------------- */

.entete-page {
	background: linear-gradient(180deg, var(--nuit-050), var(--blanc));
	border-bottom: 1px solid var(--filet);
	padding-block: clamp(2.75rem, 5vw, 4.5rem);
}

.entete-page__interieur {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
	gap: clamp(2rem, 4vw, 4rem);
	align-items: start;
}

.entete-page__texte {
	margin-top: 1.5rem;
	color: var(--encre-moyenne);
}

.encart-atouts {
	background: var(--blanc);
	border: 1px solid var(--filet);
	border-radius: var(--r-md);
	padding: clamp(1.5rem, 2.4vw, 2.1rem);
	box-shadow: var(--ombre-carte);
}

.encart-atouts__titre {
	font-family: var(--corps);
	font-size: 0.98rem;
	font-weight: 700;
	color: var(--nuit);
	margin-bottom: 1.25rem;
}

.encart-atouts .liste-atouts { margin: 0; }

/* Bandeau de réassurance placé sous un appel à l'action */
.reassurance {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.5rem;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--filet);
}

.reassurance li {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-size: 0.87rem;
	font-weight: 600;
	color: var(--encre-moyenne);
}

.reassurance .cdp-icone { color: var(--or-fonce); flex: none; }

/* Deux colonnes de prose sur les pages de service */
.prose-colonnes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: clamp(1.75rem, 3vw, 3rem);
}

.prose-bloc h2 { margin-bottom: 0.75rem; }
.prose-bloc p { color: var(--encre-moyenne); margin: 0; }

.contact-liens {
	display: grid;
	gap: 0.9rem;
	margin-top: 2rem;
}

.contact-liens li {
	display: grid;
	grid-template-columns: 24px 1fr;
	gap: 0 0.75rem;
	align-items: center;
	font-weight: 600;
}

.contact-liens .cdp-icone { color: var(--or-fonce); }
.contact-liens a:hover { color: var(--or-fonce); }

.carte-formulaire {
	background: var(--blanc);
	border: 1px solid var(--filet);
	border-radius: var(--r-md);
	padding: clamp(1.6rem, 2.6vw, 2.25rem);
	box-shadow: var(--ombre-carte);
}

.lien-fleche--discret { color: var(--encre-douce); }
.lien-fleche--discret:hover { color: var(--nuit); }

/* -------------------------------------------------------------------------
   29. Filtres du portfolio
   ---------------------------------------------------------------------- */

.filtres {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: clamp(2rem, 3vw, 2.75rem);
}

.filtre {
	padding: 0.6em 1.15em;
	border-radius: var(--r-plein);
	border: 1px solid var(--filet-fort);
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--nuit);
	background: var(--blanc);
	transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.filtre:hover { border-color: var(--nuit); }

.filtre.est-actif {
	background: var(--nuit);
	border-color: var(--nuit);
	color: var(--blanc);
}

/* -------------------------------------------------------------------------
   30. Fiche projet
   ---------------------------------------------------------------------- */

.projet-visuel {
	position: relative;
	background: linear-gradient(160deg, var(--nuit-800), var(--nuit-600));
	border-radius: var(--r-md);
	padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.25rem, 2.5vw, 2rem) 0;
	overflow: hidden;
}

.projet-visuel__desktop {
	width: 100%;
	border-radius: var(--r-sm) var(--r-sm) 0 0;
	box-shadow: 0 26px 50px -18px rgba(0, 0, 0, 0.55);
}

.projet-visuel__mobile {
	position: absolute;
	right: clamp(1rem, 2vw, 1.75rem);
	bottom: 0;
	width: clamp(64px, 16%, 100px);
	border-radius: var(--r-xs) var(--r-xs) 0 0;
	border: 2px solid rgba(255, 255, 255, 0.85);
	border-bottom: 0;
	box-shadow: 0 16px 34px -12px rgba(0, 0, 0, 0.6);
}

/* -------------------------------------------------------------------------
   31. Parcours « Créer mon entreprise »
   ---------------------------------------------------------------------- */

.principal--parcours { padding-block: clamp(2.5rem, 5vw, 4.5rem); }

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

.parcours__formulaire {
	background: var(--blanc);
	border: 1px solid var(--filet);
	border-radius: var(--r-lg);
	padding: clamp(1.6rem, 3vw, 2.5rem);
	box-shadow: var(--ombre-levee);
}

.parcours--campagne {
	grid-template-columns: minmax(0, 0.7fr) minmax(34rem, 1.3fr);
}

.parcours-offre-selectionnee {
	margin-bottom: 0.9rem;
	padding: 1.25rem;
	border-color: rgba(201, 162, 95, 0.55);
	background: linear-gradient(135deg, #fff, #fbf7ef);
}

.parcours-offre-selectionnee__prix {
	display: flex;
	align-items: baseline;
	gap: 0.7rem;
	margin: 0.45rem 0 0;
}

.parcours-offre-selectionnee__prix del {
	color: var(--encre-douce);
	font-weight: 600;
}

.parcours-offre-selectionnee__prix strong {
	color: var(--nuit);
	font-size: 1.2rem;
}

.parcours-offre-selectionnee__debours {
	display: grid;
	gap: 0.2rem;
	margin: 0.8rem 0 0;
	padding-top: 0.75rem;
	border-top: 1px solid rgba(201, 162, 95, 0.35);
	color: var(--encre-moyenne);
	font-size: 0.82rem;
}

.parcours-offre-selectionnee__debours strong { color: var(--or-fonce); }
.parcours-offre-selectionnee__debours span { color: var(--nuit); font-weight: 800; }

.parcours-garanties {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.45rem;
	margin: 0 0 1.5rem;
}

.parcours-garanties span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.8rem;
	padding: 0.45rem 0.6rem;
	border-radius: var(--r-sm);
	background: var(--nuit-050);
	color: var(--nuit);
	font-size: 0.7rem;
	font-weight: 750;
	line-height: 1.3;
	text-align: center;
}

.parcours__progression { margin-bottom: 2rem; }

.parcours__jauge {
	height: 5px;
	border-radius: var(--r-plein);
	background: var(--nuit-100);
	overflow: hidden;
	margin-bottom: 0.7rem;
}

.parcours__jauge span {
	display: block;
	height: 100%;
	width: 12.5%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--nuit), var(--or));
	transition: width var(--transition);
}

.parcours__compteur {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--encre-douce);
	margin: 0;
	font-variant-numeric: tabular-nums;
}

.parcours__compteur strong { color: var(--nuit); }

.parcours__etape {
	border: 0;
	margin: 0;
	padding: 0;
}

/* Sans JavaScript les huit étapes s'empilent : il leur faut une séparation. */
.parcours__etape + .parcours__etape {
	margin-top: 2.25rem;
	padding-top: 2.25rem;
	border-top: 1px solid var(--filet);
}

.parcours__etape[hidden] { display: none; }

.parcours__question {
	font-family: var(--corps);
	font-size: clamp(1.15rem, 1.7vw, 1.35rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--nuit);
	padding: 0;
	margin-bottom: 0.5rem;
}

.parcours__aide {
	font-size: 0.9rem;
	color: var(--encre-douce);
	margin-bottom: 1.25rem;
}

.parcours__choix {
	display: grid;
	gap: 0.65rem;
	margin-top: 1.25rem;
}

.choix {
	/* L'input est masqué en position absolue : sans référence ici, il se
	   caleraient sur un ancêtre positionné lointain. */
	position: relative;
	display: grid;
	grid-template-columns: 22px 1fr;
	gap: 0 0.85rem;
	align-items: center;
	padding: 0.95em 1.15em;
	border: 1.5px solid var(--filet);
	border-radius: var(--r-sm);
	cursor: pointer;
	transition: border-color var(--transition), background var(--transition);
}

.choix:hover { border-color: var(--nuit-200); background: var(--brume); }

.choix input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.choix__marque {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1.5px solid var(--pierre);
	display: grid;
	place-items: center;
	transition: border-color var(--transition);
}

.choix__marque::after {
	content: '';
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--or);
	transform: scale(0);
	transition: transform var(--transition);
}

.choix__libelle { font-weight: 600; font-size: 0.98rem; }

.choix:has( input:checked ) {
	border-color: var(--nuit);
	background: var(--nuit-050);
}

.choix:has( input:checked ) .choix__marque { border-color: var(--nuit); }
.choix:has( input:checked ) .choix__marque::after { transform: scale(1); }
.choix:has( input:focus-visible ) { outline: 2px solid var(--or); outline-offset: 2px; }

.parcours__pied {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2.25rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--filet);
}

.parcours__pied [hidden] { display: none; }

.parcours__mention {
	margin-top: 1.25rem;
	font-size: 0.82rem;
	color: var(--encre-douce);
}

.mention-confidentialite {
	margin: 1rem 0 0;
	font-size: .78rem;
	line-height: 1.55;
	color: var(--texte-doux);
}

.mention-confidentialite a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.parcours-merci {
	max-width: 900px;
	margin-inline: auto;
	text-align: center;
}

.parcours-merci__icone {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	margin: 0 auto 1.75rem;
	border-radius: 50%;
	background: var(--nuit-050);
	color: var(--nuit);
	border: 1.5px solid var(--filet);
}

.parcours-merci .chapeau { margin-inline: auto; }

@media (max-width: 900px) {
	.entete-page__interieur,
	.parcours { grid-template-columns: 1fr; }
	.parcours--campagne .parcours__formulaire { order: -1; }
	.parcours--campagne .parcours__intro { padding-top: 0.5rem; }
}

@media (max-width: 560px) {
	.principal--parcours:has(.parcours--campagne) { padding-top: 1rem; }
	.parcours--campagne { gap: 1.25rem; }
	.parcours--campagne .parcours__formulaire { padding: 1rem; border-radius: var(--r-md); }
	.parcours-garanties { grid-template-columns: 1fr; gap: 0.35rem; }
	.parcours-garanties span { min-height: 2.25rem; }
	.parcours-offre-selectionnee { padding: 1rem; }
	.parcours--campagne .parcours__pied .bouton { width: 100%; justify-content: center; }
}

/* -------------------------------------------------------------------------
   32. Choix du service et renvois entre formulaires
   ---------------------------------------------------------------------- */

.choix-service__intro {
	max-width: 700px;
	margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}

/* Sur la page de choix, l'intitulé de chaque service est un titre de niveau 2
   et non un h3 : il ne dépend d'aucun titre intermédiaire. */
.carte-pole__titre-h2 {
	font-family: var(--corps);
	font-size: 1.08rem;
	font-weight: 700;
	color: var(--nuit);
	letter-spacing: -0.01em;
	line-height: 1.3;
	margin: 0;
}

.parcours__autre {
	margin-top: 1.75rem;
	font-size: 0.9rem;
	color: var(--encre-douce);
}

.parcours__autre a {
	color: var(--or-fonce);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* -------------------------------------------------------------------------
   33. Dossier client
   ---------------------------------------------------------------------- */

.dossier-client__avancement {
	margin: 2.25rem 0 2rem;
	padding: 1.25rem 1.5rem;
	background: var(--brume);
	border: 1px solid var(--filet);
	border-radius: var(--r-sm);
}

.pieces {
	display: grid;
	gap: 0.9rem;
	margin-top: 1.5rem;
}

.piece {
	background: var(--blanc);
	border: 1px solid var(--filet);
	border-radius: var(--r-md);
	padding: clamp(1.15rem, 2vw, 1.6rem);
	display: grid;
	gap: 1rem;
}

.piece.est-recue { border-color: rgba(30, 122, 70, 0.35); background: #FAFDFB; }

.piece__entete {
	display: grid;
	grid-template-columns: 34px 1fr;
	gap: 0 0.9rem;
	align-items: start;
}

.piece__etat {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--nuit-050);
	color: var(--nuit-400);
}

.piece.est-recue .piece__etat { background: #E8F6EE; color: #1E7A46; }

.piece__titre {
	font-weight: 700;
	color: var(--nuit);
	margin: 0;
	font-size: 1rem;
}

.piece__option {
	display: inline-block;
	margin-left: 0.4em;
	padding: 0.15em 0.55em;
	border-radius: var(--r-plein);
	background: var(--nuit-050);
	color: var(--encre-douce);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: 2px;
}

.piece__aide {
	font-size: 0.88rem;
	color: var(--encre-douce);
	margin: 0.3rem 0 0;
}

.piece__recue {
	font-size: 0.85rem;
	font-weight: 600;
	color: #1E7A46;
	margin: 0.5rem 0 0;
}

.piece__form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--filet);
}

.piece__form input[type='file'] {
	flex: 1 1 220px;
	min-width: 0;
	font-size: 0.88rem;
	padding: 0.5em;
	border: 1px dashed var(--filet-fort);
	border-radius: var(--r-xs);
	background: var(--brume);
}

.piece__form input[type='file']::file-selector-button {
	margin-right: 0.75rem;
	padding: 0.5em 0.9em;
	border: 0;
	border-radius: var(--r-plein);
	background: var(--nuit);
	color: var(--blanc);
	font-family: var(--corps);
	font-weight: 700;
	font-size: 0.82rem;
	cursor: pointer;
}

.dossier-client__acompte,
.dossier-client__aide,
.dossier-invite {
	margin-top: 2.75rem;
	padding-top: 2.25rem;
	border-top: 1px solid var(--filet);
}

.dossier-invite {
	text-align: center;
	margin-top: 3rem;
}

.dossier-invite p { color: var(--encre-moyenne); margin-bottom: 1.5rem; }

/* Entre le point de bascule du menu (1120px) et les grands ecrans, la barre
   n'a pas la place d'afficher trois libelles complets a cote du bouton
   principal : « Mon compte » se reduit alors a son icone, motif largement
   compris, plutot que de sacrifier le lien conseiller ou de laisser le CTA
   deborder. Le libelle reste lu par les lecteurs d'ecran via aria-label. */
@media (min-width: 1121px) {
	/* Le conteneur de l'en-tete est plafonne a 1320px : au-dela, la barre ne
	   s'elargit plus alors que son contenu (7 rubriques + compte + conseiller
	   + bouton principal) reste identique. La compaction doit donc s'appliquer
	   a TOUTES les largeurs desktop, et non dans une bande : sans borne haute,
	   un ecran de 1512px comme un ecran de 1280px reste tenu.
	   « Mon compte » se reduit a son icone, motif largement compris ; son
	   libelle reste annonce aux lecteurs d'ecran via aria-label. */
	.entete__compte-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.entete__actions { gap: 0.6rem; }
	.entete__nav { gap: 0.9rem; }
	.entete__nav ul.menu { gap: 0.5rem; }
	.entete__nav ul.menu > li > a { font-size: 0.845rem; }
}

/* Juste au-dessus du point de bascule vers le menu tiroir, meme compacte le
   contenu ne rentre pas : le lien conseiller passe aussi en icone seule. Son
   libelle reste accessible via aria-label, et le numero comme le formulaire
   de contact demeurent atteignables par le pied de page. */
@media (min-width: 1121px) and (max-width: 1300px) {
	.entete__conseil-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}


/* Les deux icones de la barre d'actions sont les seules a etre presentees sans
   libelle sur une partie des ecrans : elles ont besoin d'un trait plus appuye
   que les icones accompagnees de texte pour rester lisibles a cette taille. */
.entete__compte .cdp-icone,
.entete__conseil .cdp-icone {
	stroke-width: 1.9;
}

/* Formules d'application : quatre colonnes au lieu de trois, et trois lignes
   d'information propres a cette offre (TTC rappele sous le HT, heritage de la
   formule inferieure, profil ideal). */
.grille-offres--quatre {
	grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
}

.carte-offre__ttc {
	flex-basis: 100%;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--encre-douce);
}

.carte-offre__herite {
	margin: 1.1rem 0 0;
	font-size: 0.9rem;
	color: var(--encre-moyenne);
}

.carte-offre__ideal {
	margin: 1.35rem 0 0;
	padding-top: 1.1rem;
	border-top: 1px solid var(--filet);
	font-size: 0.88rem;
	line-height: 1.55;
	color: var(--encre-moyenne);
}

.carte-offre__ideal strong { color: var(--nuit); }

/* -------------------------------------------------------------------------
   Devis express — filet de recuperation dans les tunnels
   ---------------------------------------------------------------------- */

.devis-express {
	margin-top: 2.25rem;
	padding: clamp(1.4rem, 2.2vw, 1.9rem);
	background: var(--blanc);
	border: 1px solid var(--filet);
	border-radius: var(--r-md);
	box-shadow: var(--ombre-carte);
}

.devis-express__surtitre {
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--or-fonce);
	margin: 0;
}

.devis-express__titre {
	font-family: var(--titre);
	font-size: clamp(1.15rem, 1.7vw, 1.4rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--nuit);
	margin: 0.35rem 0 0;
}

.devis-express__texte {
	margin: 0.6rem 0 1.25rem;
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--encre-moyenne);
}

.devis-express__form .champ + .champ { margin-top: 0.85rem; }

.devis-express__form .bouton { margin-top: 1.25rem; }

.bouton--plein-large {
	width: 100%;
	justify-content: center;
}

.devis-express__mention {
	margin: 0.9rem 0 0;
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--encre-douce);
}

/* Champ piege : invisible a l'ecran sans etre retire du DOM, faute de quoi il
   ne remplirait plus son role. */
.devis-express__piege {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* -------------------------------------------------------------------------
   Offres : familles a quatre ou cinq formules, acompte, details replies
   ---------------------------------------------------------------------- */

/* Le nombre de formules n'est plus fige par le code : une famille peut en
   compter trois, quatre ou cinq. La grille se resserre a mesure que les
   formules s'ajoutent, plutot que de laisser une carte orpheline sur une
   deuxieme ligne. */
.grille-offres--quatre {
	grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
}

.grille-offres--cinq {
	grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
	gap: clamp(0.9rem, 1.2vw, 1.15rem);
}

.grille-offres--cinq .carte-offre {
	padding: clamp(1.25rem, 1.7vw, 1.6rem);
}

.grille-offres--cinq .carte-offre__montant {
	font-size: clamp(1.6rem, 2.1vw, 2rem);
}

/* Sous 1120 px, resserrer n'a plus de sens : deux colonnes lisibles, puis une
   seule sur mobile — c'est la largeur de la carte qui commande, pas le nombre
   de formules. */
@media (max-width: 1120px) {
	.grille-offres--quatre,
	.grille-offres--cinq {
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		gap: clamp(1.1rem, 1.8vw, 1.6rem);
	}
}

@media (max-width: 560px) {
	.grille-offres,
	.grille-offres--quatre,
	.grille-offres--cinq {
		grid-template-columns: 1fr;
	}
}

/* Acompte : le montant reellement demande au demarrage, annonce des la carte
   plutot qu'a l'etape de paiement. */
.carte-offre__acompte {
	margin: 0.7rem 0 0;
	padding: 0.55rem 0.7rem;
	background: var(--brume);
	border-radius: var(--r-sm);
	font-size: 0.83rem;
	color: var(--encre-moyenne);
}

.carte-offre__acompte strong {
	color: var(--nuit);
}

.carte-offre__acompte-reste {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.8rem;
	color: var(--encre-douce);
}

/* Débours sur la carte : une seule ligne. Le client doit savoir tout de suite
   s'il y aura un supplément ou non — le détail chiffré et la réserve d'usage
   vivent dans le comparateur, sous les cartes, où ils ont la place d'exister
   sans gonfler chaque formule. */
.carte-offre__debours {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0.55rem 0 0;
	font-size: 0.8rem;
	line-height: 1.3;
	color: var(--encre-douce);
	white-space: nowrap;
}

.carte-offre__debours strong {
	color: var(--encre-moyenne);
	font-weight: 600;
	white-space: nowrap;
}

.carte-offre__debours--inclus {
	color: var(--or-fonce);
}

.carte-offre__debours--inclus strong {
	color: var(--or-fonce);
	font-weight: 700;
}

.carte-offre__debours--inclus svg { flex: none; }

/* Atouts : ce qui distingue la formule, avec un badge explicite. */
.carte-offre__atouts {
	display: grid;
	gap: 0.55rem;
	margin: 1.2rem 0 0;
}

.carte-offre__atouts li {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 0.1rem 0.65rem;
	align-items: start;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--nuit);
}

.carte-offre__atouts .cdp-icone {
	margin-top: 0.24em;
	color: var(--or-fonce);
}

.carte-offre__badge {
	grid-column: 2;
	justify-self: start;
	margin-top: 0.15rem;
	padding: 0.15em 0.6em;
	border-radius: var(--r-plein);
	background: var(--nuit);
	color: var(--or);
	font-size: 0.63rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Detail complet des prestations : replie par defaut pour que la carte reste
   lisible, ouvrable pour ceux qui veulent savoir exactement ce qui est fait. */
.carte-offre__details {
	margin: 1.2rem 0 0;
	border-top: 1px solid var(--filet);
	padding-top: 0.9rem;
}

.carte-offre__details > summary {
	cursor: pointer;
	font-size: 0.86rem;
	font-weight: 700;
	color: var(--or-fonce);
	list-style: none;
}

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

.carte-offre__details > summary::after {
	content: " +";
	font-weight: 800;
}

.carte-offre__details[open] > summary::after {
	content: " –";
}

.carte-offre__details > summary:focus-visible {
	outline: 2px solid var(--nuit);
	outline-offset: 3px;
}

.carte-offre__prestations {
	display: grid;
	gap: 0.55rem;
	margin: 0.9rem 0 0;
}

.carte-offre__prestations li {
	display: grid;
	grid-template-columns: 18px 1fr;
	gap: 0 0.6rem;
	align-items: start;
	font-size: 0.86rem;
	color: var(--encre-moyenne);
}

.carte-offre__prestations .cdp-icone {
	margin-top: 0.24em;
	color: var(--or-fonce);
}

.carte-offre__prestations strong {
	display: block;
	font-weight: 600;
	color: var(--nuit);
}

.carte-offre__prestations em {
	display: block;
	margin-top: 0.1rem;
	font-style: normal;
	font-size: 0.81rem;
	color: var(--encre-douce);
}

.carte-offre__hors {
	margin: 1.1rem 0 0;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--encre-douce);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* -------------------------------------------------------------------------
   Commandes dans l'espace client
   ---------------------------------------------------------------------- */

.dossier-client__commandes {
	margin-top: 2.5rem;
}

.commande-client {
	margin-top: 1.25rem;
	padding: clamp(1.1rem, 2vw, 1.6rem);
	background: var(--blanc);
	border: 1px solid var(--filet);
	border-radius: var(--r-md);
}

.commande-client__entete {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	align-items: baseline;
	justify-content: space-between;
	padding-bottom: 0.85rem;
	border-bottom: 1px solid var(--filet);
}

.commande-client__numero {
	margin: 0;
	font-weight: 700;
	color: var(--nuit);
	letter-spacing: 0.02em;
}

.commande-client__total {
	margin: 0;
	font-family: var(--titre);
	font-size: 1.35rem;
	font-weight: 800;
	color: var(--nuit);
}

.commande-client__total span {
	font-family: var(--corps);
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--encre-douce);
}

.commande-client__lignes {
	display: grid;
	gap: 0.7rem;
	margin: 1rem 0 0;
}

.commande-client__lignes li {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 1rem;
	justify-content: space-between;
	font-size: 0.92rem;
	color: var(--encre-moyenne);
}

.commande-client__designation {
	flex: 1 1 60%;
	color: var(--nuit);
	font-weight: 600;
}

.commande-client__designation em {
	font-style: normal;
	font-weight: 400;
	color: var(--encre-douce);
}

.commande-client__detail {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.83rem;
	font-weight: 400;
	color: var(--encre-douce);
}

.commande-client__montant {
	font-weight: 700;
	color: var(--nuit);
	white-space: nowrap;
}

.commande-client__solde {
	margin: 1.1rem 0 0;
	padding-top: 0.9rem;
	border-top: 1px solid var(--filet);
	font-size: 0.9rem;
	color: var(--encre-moyenne);
}

.commande-client__rib {
	margin-top: 1.1rem;
	padding: 0.9rem 1rem;
	background: var(--brume);
	border-radius: var(--r-sm);
	font-size: 0.9rem;
}

.commande-client__rib-titre {
	margin: 0 0 0.4rem;
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--encre-douce);
}

.commande-client__rib p { margin: 0.2rem 0 0; }

.commande-client__rib-note {
	font-size: 0.83rem;
	color: var(--encre-douce);
}

.commande-client__form {
	margin-top: 1.25rem;
}

.commande-client__choix {
	margin: 0 0 1rem;
	padding: 0;
	border: 0;
}

.commande-client__choix legend {
	padding: 0;
	font-size: 0.86rem;
	font-weight: 700;
	color: var(--nuit);
}

.commande-client__choix label {
	display: flex;
	gap: 0.5rem;
	align-items: baseline;
	margin-top: 0.5rem;
	font-size: 0.92rem;
	color: var(--encre-moyenne);
}

.commande-client__mention {
	margin: 0.85rem 0 0;
	font-size: 0.82rem;
	color: var(--encre-douce);
}

.commande-client__factures {
	display: grid;
	gap: 0.5rem;
	margin: 1.25rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--filet);
}

.commande-client__factures li {
	display: grid;
	grid-template-columns: 18px 1fr;
	gap: 0.5rem;
	align-items: center;
	font-size: 0.9rem;
}

.commande-client__factures .cdp-icone { color: var(--or-fonce); }

/* -------------------------------------------------------------------------
   Carrousel de formules — au-dela de trois packs
   ---------------------------------------------------------------------- */

.carrousel-offres {
	position: relative;
}

/* La piste depasse volontairement le conteneur pour que la carte suivante
   soit devinee : c'est ce qui fait comprendre qu'il y a plus a voir, mieux
   qu'un texte d'explication. */
.carrousel-offres__piste {
	display: flex;
	/* « stretch » et non « start » : toutes les cartes prennent la hauteur de la
	   plus haute, et leur bouton reste aligne grace au margin-top:auto du pied.
	   Deux cartes voisines de hauteurs differentes donnent un rendu bancal. */
	align-items: stretch;
	/* Une largeur de carte FERME, jamais elastique : c'est ce qui force la piste
	   a depasser le conteneur et donc a defiler. Avec une largeur flexible, les
	   cinq cartes se seraient contentees de rapetisser — le defaut que le
	   carrousel doit precisement corriger. */
	gap: clamp(1.1rem, 1.8vw, 1.6rem);
	overflow-x: auto;
	/* « proximity » et non « mandatory » : le calage obligatoire annule les
	   defilements programmes par les fleches (constate en test), pour un confort
	   qui ne justifie pas de casser la navigation. */
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	scroll-padding-left: 2px;
	padding: 6px 2px 1.25rem;
	/* Barre de defilement discrete mais presente : elle indique la position. */
	scrollbar-width: thin;
	scrollbar-color: var(--pierre) transparent;
}

.carrousel-offres__piste::-webkit-scrollbar { height: 6px; }
.carrousel-offres__piste::-webkit-scrollbar-track { background: var(--brume); border-radius: 99px; }
.carrousel-offres__piste::-webkit-scrollbar-thumb { background: var(--pierre); border-radius: 99px; }

.carrousel-offres__piste > * {
	flex: 0 0 clamp(268px, 78vw, 300px);
	scroll-snap-align: start;
	/* `height: 100%` sur la carte empeche l'etirement : une taille croisee doit
	   rester `auto` pour que `align-items: stretch` egalise les hauteurs. */
	height: auto;
}

.carrousel-offres__piste:focus-visible {
	outline: 2px solid var(--nuit);
	outline-offset: 6px;
}

/* Sur grand ecran, trois cartes et un tiers : la quatrieme, coupee par le bord,
   annonce qu'il y a plus a voir sans qu'il faille l'ecrire. */
@media (min-width: 1121px) {
	.carrousel-offres__piste > * {
		flex-basis: calc((100% - 3 * 1.6rem) / 3.3);
	}
}

.carrousel-offres__commandes {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.75rem;
	margin-top: 0.25rem;
}

/* Sur grand ecran, les fleches quittent la barre du bas pour se poser de part et
   d'autre de la piste, a mi-hauteur des cartes : c'est la ou l'oeil les cherche
   quand une carte est coupee par le bord. Le compteur reste en dessous. */
@media (min-width: 1121px) {
	.carrousel-offres {
		position: relative;
	}

	.carrousel-offres__fleche {
		position: absolute;
		/* A mi-hauteur des cartes, moins la barre de defilement et le compteur. */
		top: calc(50% - 1.6rem);
		transform: translateY(-50%);
		z-index: 3;
		width: 48px;
		height: 48px;
		box-shadow: var(--ombre-levee);
	}

	.carrousel-offres__fleche[data-cdp-defiler="-1"] { left: -24px; }
	.carrousel-offres__fleche[data-cdp-defiler="1"] { right: -24px; }

	.carrousel-offres__commandes {
		justify-content: center;
	}
}

.carrousel-offres__mention {
	margin: 0;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--encre-douce);
}

.carrousel-offres__fleche {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--filet);
	border-radius: var(--r-plein);
	background: var(--blanc);
	color: var(--nuit);
	cursor: pointer;
	transition: background var(--transition), color var(--transition), border-color var(--transition), opacity var(--transition);
}

.carrousel-offres__fleche:hover:not([disabled]) {
	background: var(--nuit);
	border-color: var(--nuit);
	color: var(--or);
}

.carrousel-offres__fleche:focus-visible {
	outline: 2px solid var(--nuit);
	outline-offset: 3px;
}

.carrousel-offres__fleche[disabled] {
	opacity: 0.35;
	cursor: default;
}

/* La fleche de gauche est la meme icone, retournee : une seule icone a
   maintenir. */
.carrousel-offres__fleche[data-cdp-defiler="-1"] .cdp-icone {
	transform: scaleX(-1);
}

/* L'ordre visuel place les commandes a droite, mais le premier bouton du DOM
   reste celui du recul : la navigation au clavier suit la logique attendue. */
@media (max-width: 560px) {
	.carrousel-offres__commandes {
		justify-content: space-between;
	}
}

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

/* Une fleche en butee reste visible mais nettement eteinte, et non cliquable :
   la faire disparaitre ferait douter de l'existence du controle. */
.carrousel-offres__fleche[disabled] {
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Comparateur de formules
   ---------------------------------------------------------------------------
   Cinq colonnes ne tiennent pas sur un téléphone. Plutôt que de réduire le
   texte jusqu'à l'illisible, le tableau défile horizontalement et la colonne
   des intitulés reste collée à gauche : on garde toujours sous les yeux la
   prestation qu'on est en train de comparer. */

.comparateur {
	margin-top: clamp(2rem, 4vw, 3rem);
}

.comparateur__defilement {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	/* `overflow-x: auto` fait bien défiler le tableau, mais ne suffit pas à
	   l'empêcher d'élargir le document : la largeur minimale du tableau fuitait
	   dans le débordement de la page, qui passait à 595 px pour un écran de
	   500. Sur iPhone, cela se voyait au fait que la page pouvait être dézoomée
	   et laissait une bande blanche à droite. `contain: paint` isole le contenu
	   du conteneur : il reste défilable, mais ne participe plus au calcul de la
	   largeur du document. Mesuré : 595 px -> 500 px. */
	contain: paint;
	max-width: 100%;
	border: 1px solid var(--filet);
	border-radius: var(--r-md);
	background: var(--blanc);
}

.comparateur__defilement:focus-visible {
	outline: 2px solid var(--or);
	outline-offset: 2px;
}

.comparateur__table {
	/* Largeurs figées : sans cela, chaque colonne se dimensionne sur son
	   contenu le plus long et les colonnes de packs finissent inégales, ce qui
	   donne une grille de coches bancale. Ici toutes les colonnes de packs font
	   exactement la même largeur, quel que soit le texte qu'elles portent. */
	table-layout: fixed;
	width: 100%;
	min-width: 720px;
	border-collapse: collapse;
	font-size: 0.88rem;
}

.comparateur__table th,
.comparateur__table td {
	padding: 0.7rem 0.85rem;
	text-align: center;
	vertical-align: middle;
	border-bottom: 1px solid var(--filet);
}

/* Les coches sont centrées sur l'axe de leur colonne, pas sur leur boîte de
   texte : c'est ce qui fait lire la grille d'un seul coup d'œil. */
.comparateur__table tbody td {
	line-height: 1;
}

.comparateur__table tbody td .cdp-icone {
	display: block;
	margin: 0 auto;
}

/* Colonne des intitulés : figée au défilement horizontal. */
.comparateur__intitule {
	position: sticky;
	left: 0;
	z-index: 2;
	width: 230px;
	text-align: left;
	line-height: 1.35;
	font-weight: 600;
	color: var(--encre-moyenne);
	background: var(--blanc);
	border-right: 1px solid var(--filet);
}

.comparateur__table thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--brume);
	border-bottom: 1.5px solid var(--filet-fort);
}

.comparateur__table thead .comparateur__intitule {
	z-index: 3;
	background: var(--brume);
}

.comparateur__pack {
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.comparateur__pack.est-avant {
	background: var(--or-pale, rgba(191, 155, 76, 0.12));
}

.comparateur__pack-nom {
	display: block;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--nuit);
	line-height: 1.25;
}

.comparateur__pack-prix {
	display: block;
	margin-top: 0.3rem;
	font-family: var(--titre);
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--nuit);
}

.comparateur__pack-acompte {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.76rem;
	font-weight: 600;
	color: var(--encre-douce);
}

/* Intertitres de catégorie : ils découpent un tableau long en sections lisibles. */
.comparateur__groupe th {
	text-align: left;
	background: var(--nuit);
	color: var(--blanc);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.comparateur__table td.est-inclus { color: var(--or-fonce); }
.comparateur__table td.est-absent { color: var(--encre-douce); }
.comparateur__table td.est-inclus strong { color: var(--or-fonce); }

.comparateur__note {
	font-size: 0.8rem;
	color: var(--encre-douce);
}

.comparateur__table tfoot td {
	padding-top: 1rem;
	padding-bottom: 1rem;
	border-bottom: 0;
}

.comparateur__table tfoot .bouton { width: 100%; }

.comparateur__reserve {
	margin: 0.9rem 0 0;
	font-size: 0.8rem;
	line-height: 1.55;
	color: var(--encre-douce);
}

@media (max-width: 780px) {
	.comparateur__table { font-size: 0.82rem; min-width: 620px; }
	.comparateur__intitule { width: 160px; }

	/* Le défilement doit être perceptible : sans cette amorce, rien n'indique
	   qu'il reste des colonnes à droite. */
	.comparateur__defilement { background-image: linear-gradient(to left, rgba(12, 23, 37, 0.06), transparent 28px); }
}

/* Bandeau de rattrapage, sous les formules. Visuellement distinct des cartes
   sans leur voler la vedette : c'est un filet de sécurité, pas une offre. */
.rattrapage {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem 2rem;
	margin-top: clamp(2rem, 4vw, 3rem);
	padding: clamp(1.25rem, 2.4vw, 1.9rem) clamp(1.25rem, 2.6vw, 2.1rem);
	background: var(--blanc);
	border: 1px solid var(--filet);
	border-left: 3px solid var(--or);
	border-radius: var(--r-md);
}

.rattrapage__texte { flex: 1 1 22rem; }

.rattrapage__titre {
	margin: 0;
	font-family: var(--titre);
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	font-weight: 700;
	color: var(--nuit);
}

.rattrapage__sous-titre {
	margin: 0.35rem 0 0;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--encre-douce);
}

@media (max-width: 620px) {
	.rattrapage .groupe-boutons { width: 100%; }
	.rattrapage .bouton { width: 100%; justify-content: center; }
}

/* Réserve attachée au « à partir de » : discrète, mais toujours à côté du prix
   qu'elle qualifie — pas reléguée en bas de page où personne ne la relie au
   montant. */
.carte-offre__reserve {
	margin: 0.5rem 0 0;
	font-size: 0.76rem;
	line-height: 1.45;
	color: var(--encre-douce);
}

/* Prestations sans prix public : cartes courtes, alignées sur la grille des
   offres pour que la page reste homogène, mais volontairement plus sobres —
   ce ne sont pas des formules, ce sont des démarches à chiffrer. */
.grille-devis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: clamp(0.9rem, 1.5vw, 1.25rem);
}

.carte-devis {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1rem;
	padding: clamp(1.05rem, 1.3vw, 1.3rem);
	background: var(--blanc);
	border: 1px solid var(--filet);
	border-radius: var(--r-md);
	transition: border-color var(--transition), box-shadow var(--transition);
}

.carte-devis:hover {
	border-color: var(--filet-fort);
	box-shadow: var(--ombre-levee);
}

.carte-devis__nom {
	margin: 0;
	font-size: 0.98rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--nuit);
}

.carte-devis__texte {
	margin: 0.35rem 0 0;
	font-size: 0.84rem;
	line-height: 1.45;
	color: var(--encre-douce);
}

.carte-devis__pied {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	padding-top: 0.85rem;
	border-top: 1px solid var(--filet);
}

.carte-devis__prix {
	font-size: 0.86rem;
	font-weight: 700;
	color: var(--or-fonce);
}

/* « En option » : ni une coche, ni une absence. Un tiret laisserait croire que
   la prestation est hors de portée de cette formule, alors qu'elle s'ajoute
   contre supplément. */
.comparateur__table td.est-option { color: var(--encre-moyenne); }

.comparateur__option {
	display: inline-block;
	padding: 0.15rem 0.5rem;
	border: 1px dashed var(--filet-fort);
	border-radius: var(--r-plein);
	font-size: 0.72rem;
	font-weight: 600;
	white-space: nowrap;
	color: var(--encre-douce);
}

/* ---------------------------------------------------------------------------
   Dénominations dans l'espace client
   --------------------------------------------------------------------------- */

.bloc-denominations {
	margin-bottom: 2rem;
	padding: clamp(1.1rem, 2vw, 1.6rem);
	background: var(--blanc);
	border: 1px solid var(--filet);
	border-radius: var(--r-md);
}

.bloc-denominations__titre {
	margin: 0 0 1rem;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--nuit);
}

.denom-retenue {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	margin: 0 0 1rem;
	padding: 0.7rem 0.9rem;
	background: var(--or-pale, rgba(191, 155, 76, 0.12));
	border-radius: var(--r-sm);
	color: var(--or-fonce);
}

.denom-serie { margin-bottom: 1.1rem; }

.denom-serie__titre {
	margin: 0 0 0.5rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--encre-douce);
}

.denom-liste { display: grid; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }

.denom-ligne {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.8rem;
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--filet);
	border-radius: var(--r-sm);
	font-size: 0.9rem;
}

.denom-nom { font-weight: 600; color: var(--nuit); }

.denom-statut {
	margin-left: auto;
	padding: 0.12rem 0.6rem;
	border-radius: var(--r-plein);
	font-size: 0.74rem;
	font-weight: 700;
	white-space: nowrap;
}

/* Le statut se lit à la couleur avant même d'être lu au texte. */
.denom-ligne--en_attente .denom-statut { background: var(--brume); color: var(--encre-moyenne); }
.denom-ligne--acceptee { border-color: #2f6f4e; }
.denom-ligne--acceptee .denom-statut { background: #e6f3ec; color: #2f6f4e; }
.denom-ligne--refusee .denom-nom { text-decoration: line-through; color: var(--encre-douce); }
.denom-ligne--refusee .denom-statut { background: #fdecea; color: #b42318; }
.denom-ligne--a_remplacer .denom-statut { background: #fdf3e3; color: #8a5a13; }

.denom-note {
	flex-basis: 100%;
	font-size: 0.8rem;
	color: var(--encre-douce);
}

.denom-formulaire { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--filet); }

.denom-formulaire__aide {
	margin: 0 0 0.9rem;
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--encre-moyenne);
}

.denom-champ { display: grid; gap: 0.3rem; margin: 0 0 0.7rem; }

.denom-champ label {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--encre-moyenne);
}

.denom-champ input {
	width: 100%;
	padding: 0.7em 0.85em;
	border: 1px solid var(--filet-fort);
	border-radius: var(--r-sm);
	font: inherit;
	font-size: 0.95rem;
}

.denom-champ input:focus-visible {
	outline: 2px solid var(--or);
	outline-offset: 1px;
}

.denom-attente {
	margin: 0.8rem 0 0;
	font-size: 0.88rem;
	color: var(--encre-douce);
}

/* ---------------------------------------------------------------------------
   Frise de déroulé : couleurs pilotées par le fond, pas supposées
   ---------------------------------------------------------------------------
   Le composant a été écrit pour la section sombre des pages service : titres en
   blanc, textes en blanc translucide. Réutilisé sur un fond clair — la page des
   applications — il devenait littéralement invisible, blanc sur blanc, ne
   laissant voir que les pastilles numérotées. La couleur claire est désormais
   réservée au contexte sombre, et la valeur par défaut convient au fond clair. */

.process__titre { color: var(--nuit); }
.process__texte { color: var(--encre-douce); }

.section--sombre .process__titre,
.appel-final .process__titre { color: var(--blanc); }

.section--sombre .process__texte,
.appel-final .process__texte { color: rgba(255, 255, 255, 0.62); }

/* Six étapes ne tenaient pas dans une grille figée à cinq colonnes : la
   sixième se retrouvait seule sur une deuxième ligne. La grille s'adapte
   maintenant au nombre réel d'étapes. */
.process { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }