/* ==========================================================================
   SITE VISIBLE — feuille de style principale
   Palette : Encre · Graphite · Sable · Papier
   ========================================================================== */

:root {
	--encre:      #111317;
	--graphite:   #2F3941;
	--sable:      #DFDBCF;
	--papier:     #FAF9F6;
	--blanc:      #FFFFFF;

	--gris-clair: #EDECE7;
	--gris-ligne: #E2E0D9;

	/* Texte secondaire — lisible sur papier, blanc ET gris-clair (4,75:1 mini). */
	--gris-texte: #63686E;
	/* Libellés discrets sur fond CLAIR — 4,54:1 mini. */
	--gris-doux: #6E7379;
	/* Gris atténué réservé aux fonds SOMBRES, où il atteint 7:1.
	   Ne jamais l'employer sur fond clair : il y tombe à 2,5:1. */
	--gris-faible:#9AA0A6;
	/* Contour des champs de saisie — 3,5:1, exigence WCAG 1.4.11. */
	--bordure-champ: #8C8980;

	--encre-contraste: #F4F3EF;

	/* ---- Couleurs sémantiques ---- */
	--succes-fond:  #EDF3EE;
	--succes-bord:  #C6DACB;
	--succes-texte: #24513A;
	--erreur:       #B4462F;
	--erreur-fond:  #FBEFEC;
	--erreur-bord:  #EBC9C0;
	--erreur-texte: #8E3522;

	/* ---- Voiles clairs sur fond sombre ---- */
	--sur-sombre-fort:   rgba(244, 243, 239, .86);
	--sur-sombre:        rgba(244, 243, 239, .68);
	--sur-sombre-trait:  rgba(244, 243, 239, .16);
	--sur-sombre-voile:  rgba(244, 243, 239, .05);

	/* ---- Échelle typographique ----
	   Treize crans, et rien en dehors. Toute nouvelle page pioche ici. */
	--txt-3xs:  10px;
	--txt-2xs:  11px;
	--txt-xs:   12px;
	--txt-sm:   13px;
	--txt-base: 14px;
	--txt-md:   15px;
	--txt-lg:   17px;
	--txt-xl:   19px;
	--txt-2xl:  22px;
	--txt-3xl:  25px;
	--txt-4xl:  30px;
	--txt-5xl:  34px;
	--txt-6xl:  46px;

	/* ---- Grille d'espacement — multiples de 4 ---- */
	--esp-1:  4px;
	--esp-2:  8px;
	--esp-3:  12px;
	--esp-4:  16px;
	--esp-5:  20px;
	--esp-6:  24px;
	--esp-7:  28px;
	--esp-8:  32px;
	--esp-9:  36px;
	--esp-10: 40px;
	--esp-12: 48px;
	--esp-13: 52px;
	--esp-14: 56px;
	--esp-16: 64px;
	--esp-18: 72px;
	--esp-24: 96px;

	--rayon:      14px;
	--rayon-xs:   6px;
	--rayon-sm:   10px;
	--rayon-pill: 999px;

	--largeur:    1200px;
	--gouttiere:  24px;

	--ombre:      0 1px 2px rgba(17, 19, 23, .04), 0 8px 24px rgba(17, 19, 23, .04);
	--ombre-forte:0 2px 4px rgba(17, 19, 23, .06), 0 18px 48px rgba(17, 19, 23, .10);

	--transition:        180ms cubic-bezier(.4, 0, .2, 1);
	--transition-lente:  320ms cubic-bezier(.4, 0, .2, 1);
	--transition-douce:  620ms cubic-bezier(.22, .61, .36, 1);

	--police:     'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* --------------------------------------------------------------------------
   Réinitialisation
   -------------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 96px;
}

body {
	margin: 0;
	font-family: var(--police);
	font-weight: 300;
	font-size: var(--txt-lg);
	line-height: 1.62;
	color: var(--encre);
	background: var(--papier);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

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

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
	margin: 0;
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -.022em;
}

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

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

::selection { background: var(--sable); color: var(--encre); }

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

/* Lien d'évitement pour la navigation au clavier */
.sv-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--encre);
	color: var(--papier);
	padding: 12px 20px;
	border-radius: 0 0 var(--rayon-sm) 0;
}
.sv-skip:focus { left: 0; }

/* --------------------------------------------------------------------------
   Grille et blocs communs
   -------------------------------------------------------------------------- */

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

.sv-section { padding-block: var(--esp-24); }
.sv-section--serre { padding-block: var(--esp-18); }

.sv-eyebrow {
	font-size: var(--txt-xs);
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gris-texte);
	margin: 0 0 18px;
}

.sv-titre {
	font-size: clamp(34px, 5vw, 52px);
	max-width: 30ch;
	text-wrap: balance;
}

.sv-lede {
	margin-top: 22px;
	max-width: 62ch;
	font-size: var(--txt-xl);
	color: var(--gris-texte);
}

.sv-note {
	font-size: var(--txt-md);
	color: var(--gris-texte);
}

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */

.sv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 17px 30px;
	font-size: var(--txt-lg);
	font-weight: 600;
	letter-spacing: -.005em;
	border: 1px solid var(--encre);
	border-radius: var(--rayon-sm);
	background: var(--encre);
	color: var(--papier);
	cursor: pointer;
	transition: background var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
	text-align: center;
}

.sv-btn:hover {
	background: var(--graphite);
	border-color: var(--graphite);
	transform: translateY(-1px);
	box-shadow: var(--ombre-forte);
}

.sv-btn:active { transform: translateY(0); }

/* Désactivé — le JavaScript passe le bouton d'envoi dans cet état pendant
   la soumission. Sans style dédié, le bouton reste visuellement cliquable
   et la personne clique deux fois. */
.sv-btn:disabled,
.sv-btn[aria-disabled="true"] {
	opacity: .55;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.sv-btn:disabled:hover,
.sv-btn[aria-disabled="true"]:hover {
	background: var(--encre);
	border-color: var(--encre);
	transform: none;
	box-shadow: none;
}

.sv-btn--ghost:disabled:hover { background: transparent; border-color: var(--gris-ligne); }
.sv-btn--clair:disabled:hover { background: var(--papier); border-color: var(--papier); }

.sv-input:disabled,
.sv-textarea:disabled,
.sv-pastille input:disabled + span {
	opacity: .55;
	cursor: not-allowed;
	background: var(--gris-clair);
}

.sv-btn--ghost {
	background: transparent;
	color: var(--encre);
	border-color: var(--gris-ligne);
}
.sv-btn--ghost:hover {
	background: var(--blanc);
	border-color: var(--encre);
	color: var(--encre);
}

.sv-btn--clair {
	background: var(--papier);
	color: var(--encre);
	border-color: var(--papier);
}
.sv-btn--clair:hover {
	background: var(--blanc);
	border-color: var(--blanc);
	color: var(--encre);
}

.sv-btn--bloc { width: 100%; }
.sv-btn--sm { padding: 12px 22px; font-size: var(--txt-md); }

/* --------------------------------------------------------------------------
   Bandeau annonce
   -------------------------------------------------------------------------- */

.sv-bandeau {
	background: var(--encre);
	color: var(--encre-contraste);
	font-size: var(--txt-sm);
	font-weight: 300;
}

.sv-bandeau__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--esp-5);
	min-height: 46px;
	padding-block: 10px;
}

.sv-bandeau__droite {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-shrink: 0;
}

.sv-bandeau__mail {
	font-weight: 600;
	border-bottom: 1px solid rgba(244, 243, 239, .35);
	transition: border-color var(--transition);
}
.sv-bandeau__mail:hover { border-color: var(--papier); }

/* --------------------------------------------------------------------------
   En-tête
   -------------------------------------------------------------------------- */

.sv-header {
	position: sticky;
	top: 0;
	z-index: 90;
	background: rgba(250, 249, 246, .92);
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid transparent;
	transition: border-color var(--transition), box-shadow var(--transition);
}

.sv-header.est-colle {
	border-bottom-color: var(--gris-ligne);
	box-shadow: 0 1px 24px rgba(17, 19, 23, .05);
}

.sv-header__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--esp-7);
	min-height: 84px;
	padding-block: 14px;
}

/* Logo */
.sv-logo {
	display: inline-flex;
	align-items: center;
	gap: 13px;
	flex-shrink: 0;
}

.sv-logo__marque {
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border: 2px solid var(--encre);
	border-radius: 50%;
	display: grid;
	place-items: center;
}

.sv-logo__marque::after {
	content: '';
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--encre);
}

.sv-logo__nom {
	display: block;
	font-size: var(--txt-2xl);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.025em;
}

.sv-logo__baseline {
	display: block;
	margin-top: 2px;
	font-size: var(--txt-3xs);
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gris-texte);
}

/* Navigation */
.sv-nav { margin-left: auto; }

.sv-nav__liste {
	display: flex;
	align-items: center;
	gap: 30px;
}

.sv-nav__lien {
	position: relative;
	white-space: nowrap;
	font-size: var(--txt-md);
	font-weight: 400;
	color: var(--encre);
	padding-block: 6px;
	transition: color var(--transition);
}

.sv-nav__lien::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 1.5px;
	background: var(--encre);
	transition: width var(--transition);
}

.sv-nav__lien:hover::after,
.sv-nav__lien.est-actif::after { width: 100%; }

.sv-header__cta { flex-shrink: 0; }

/* Le CTA du menu déroulant n'existe que sur mobile. */
.sv-nav__cta-mobile { display: none; }

/* Bouton menu mobile */
.sv-burger {
	display: none;
	width: 46px;
	height: 46px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--gris-ligne);
	border-radius: var(--rayon-sm);
	cursor: pointer;
	position: relative;
}

.sv-burger span {
	position: absolute;
	left: 50%;
	width: 20px;
	height: 1.5px;
	background: var(--encre);
	transform: translateX(-50%);
	transition: transform var(--transition), opacity var(--transition);
}

.sv-burger span:nth-child(1) { top: 17px; }
.sv-burger span:nth-child(2) { top: 22.5px; }
.sv-burger span:nth-child(3) { top: 28px; }

.sv-burger[aria-expanded="true"] span:nth-child(1) { transform: translateX(-50%) translateY(5.5px) rotate(45deg); }
.sv-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.sv-burger[aria-expanded="true"] span:nth-child(3) { transform: translateX(-50%) translateY(-5.5px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Héros
   -------------------------------------------------------------------------- */

.sv-hero { padding-block: 84px 72px; }

.sv-hero__grille {
	display: grid;
	grid-template-columns: 1.42fr .85fr;
	gap: var(--esp-14);
	align-items: start;
}

.sv-hero__h1 {
	font-size: clamp(38px, 5.4vw, 62px);
	font-weight: 700;
	letter-spacing: -.032em;
	line-height: 1.02;
}

.sv-surligne {
	position: relative;
	display: inline;
	background-image: linear-gradient(var(--sable), var(--sable));
	background-repeat: no-repeat;
	background-size: 100% .28em;
	background-position: 0 88%;
}

.sv-hero__texte {
	margin-top: 28px;
	font-size: var(--txt-xl);
	color: var(--gris-texte);
	max-width: 54ch;
}

.sv-hero__texte strong {
	font-weight: 600;
	color: var(--encre);
}

.sv-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 34px;
}

/* Carte devis du héros */
.sv-carte-devis {
	background: var(--encre);
	color: var(--encre-contraste);
	border-radius: var(--rayon);
	padding: 36px 34px;
	box-shadow: var(--ombre-forte);
}

.sv-carte-devis__label {
	font-size: var(--txt-2xs);
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gris-faible);
	margin: 0 0 14px;
}

.sv-carte-devis__titre {
	font-size: var(--txt-4xl);
	font-weight: 700;
	line-height: 1.12;
	color: var(--blanc);
	margin-bottom: 26px;
}

.sv-carte-devis__liste { margin-bottom: 28px; }

.sv-carte-devis__item {
	display: flex;
	gap: var(--esp-4);
	padding-block: var(--esp-4);
	border-top: 1px solid rgba(244, 243, 239, .14);
	font-size: var(--txt-md);
	line-height: 1.5;
	color: rgba(244, 243, 239, .86);
}

.sv-carte-devis__item:last-child { border-bottom: 1px solid rgba(244, 243, 239, .14); }

.sv-carte-devis__num {
	flex-shrink: 0;
	font-size: var(--txt-xs);
	font-weight: 600;
	letter-spacing: .08em;
	color: var(--gris-faible);
	padding-top: 3px;
}

.sv-carte-devis__note {
	margin-top: 16px;
	font-size: var(--txt-sm);
	color: var(--gris-faible);
	text-align: center;
}

/* Bandeau des prestations sous le héros */
.sv-strip {
	background: var(--encre);
	color: rgba(244, 243, 239, .8);
	padding-block: 22px;
}

.sv-strip__liste {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0 26px;
	font-size: var(--txt-base);
}

.sv-strip__item {
	display: flex;
	align-items: center;
	gap: 26px;
	padding-block: 5px;
}

.sv-strip__item::after {
	content: '';
	width: 1px;
	height: 14px;
	background: rgba(244, 243, 239, .22);
}

.sv-strip__item:last-child::after { display: none; }

.sv-strip a { transition: color var(--transition); }
.sv-strip a:hover { color: var(--blanc); }

/* --------------------------------------------------------------------------
   Cartes de prestations
   -------------------------------------------------------------------------- */

.sv-grille-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--esp-6);
	margin-top: 54px;
}

.sv-carte {
	background: var(--blanc);
	border: 1px solid var(--gris-ligne);
	border-radius: var(--rayon);
	padding: 32px 30px;
	transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.sv-carte:hover {
	transform: translateY(-3px);
	box-shadow: var(--ombre-forte);
	border-color: #D3D0C7;
}

.sv-carte__num {
	font-size: var(--txt-xs);
	font-weight: 600;
	letter-spacing: .14em;
	color: var(--gris-doux);
	margin-bottom: 16px;
}

.sv-carte__titre {
	font-size: var(--txt-3xl);
	font-weight: 700;
	margin-bottom: 14px;
}

.sv-carte__texte {
	font-size: var(--txt-lg);
	color: var(--gris-texte);
	margin-bottom: 22px;
}

.sv-liste-tirets { border-top: 1px solid var(--gris-ligne); padding-top: 20px; }

.sv-liste-tirets li {
	position: relative;
	padding-left: 20px;
	margin-bottom: 11px;
	font-size: var(--txt-md);
	color: var(--graphite);
}

.sv-liste-tirets li:last-child { margin-bottom: 0; }

.sv-liste-tirets li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .72em;
	width: 9px;
	height: 1.5px;
	background: var(--encre);
}

/* --------------------------------------------------------------------------
   Secteurs
   -------------------------------------------------------------------------- */

.sv-secteurs { background: var(--gris-clair); }

.sv-grille-secteurs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--esp-5);
	margin-top: 50px;
}

.sv-secteur {
	display: flex;
	flex-direction: column;
	background: var(--papier);
	border: 1px solid var(--gris-ligne);
	border-radius: var(--rayon);
	padding: 28px 26px;
	transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}

.sv-secteur:hover {
	transform: translateY(-3px);
	background: var(--blanc);
	box-shadow: var(--ombre-forte);
}

.sv-secteur__titre {
	font-size: var(--txt-2xl);
	font-weight: 700;
	margin-bottom: 12px;
}

.sv-secteur__texte {
	font-size: var(--txt-md);
	color: var(--gris-texte);
	margin-bottom: 18px;
	flex-grow: 1;
}

.sv-secteur__metiers {
	font-size: var(--txt-sm);
	line-height: 1.6;
	color: var(--gris-doux);
	padding-top: 16px;
	border-top: 1px solid var(--gris-ligne);
}

.sv-secteurs__pied {
	margin-top: 40px;
	text-align: center;
	font-size: var(--txt-lg);
	color: var(--gris-texte);
}

.sv-secteurs__pied strong { font-weight: 600; color: var(--encre); }

/* --------------------------------------------------------------------------
   Triptyque SEO · AEO · GEO (section sombre)
   -------------------------------------------------------------------------- */

.sv-sombre {
	background: var(--encre);
	color: var(--encre-contraste);
}

.sv-sombre .sv-eyebrow { color: var(--gris-faible); }
.sv-sombre .sv-titre { color: var(--blanc); }
.sv-sombre .sv-lede { color: rgba(244, 243, 239, .68); }

/* La liste numérotée a été dessinée pour un fond clair : sur fond sombre,
   ses couleurs tombent à 1,6:1. On les reprend ici plutôt que de dupliquer
   le composant. */
.sv-sombre .sv-liste-numerotee { border-top-color: rgba(244, 243, 239, .22); }
.sv-sombre .sv-liste-numerotee li {
	color: rgba(244, 243, 239, .86);
	border-bottom-color: rgba(244, 243, 239, .16);
}
.sv-sombre .sv-liste-numerotee li strong { color: var(--blanc); }
.sv-sombre .sv-liste-numerotee__num { color: var(--gris-faible); }

.sv-triptyque {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin-top: 52px;
	border: 1px solid rgba(244, 243, 239, .16);
	border-radius: var(--rayon);
	overflow: hidden;
}

.sv-tript {
	padding: 38px 34px;
	border-right: 1px solid rgba(244, 243, 239, .16);
}

.sv-tript:last-child { border-right: none; }

.sv-tript__sigle {
	font-size: var(--txt-6xl);
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1;
	color: var(--blanc);
	margin-bottom: 10px;
}

.sv-tript__soustitre {
	font-size: var(--txt-xl);
	font-weight: 600;
	color: var(--blanc);
	margin-bottom: 16px;
}

.sv-tript__texte {
	font-size: var(--txt-md);
	color: rgba(244, 243, 239, .66);
	margin-bottom: 24px;
}

.sv-tript__exemple {
	border-left: 2px solid rgba(244, 243, 239, .3);
	background: rgba(244, 243, 239, .05);
	padding: 14px 18px;
	font-size: var(--txt-base);
	font-style: italic;
	color: rgba(244, 243, 239, .78);
	border-radius: 0 var(--rayon-sm) var(--rayon-sm) 0;
}

.sv-triptyque__pied {
	margin-top: 34px;
	text-align: center;
	font-size: var(--txt-lg);
	color: rgba(244, 243, 239, .66);
}

.sv-triptyque__pied strong { color: var(--blanc); font-weight: 600; }

/* --------------------------------------------------------------------------
   Réalisations
   -------------------------------------------------------------------------- */

.sv-realisations { background: var(--gris-clair); }

.sv-realisation {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--esp-14);
	align-items: center;
	padding-block: var(--esp-14);
	border-top: 1px solid var(--gris-ligne);
}

.sv-realisation:first-of-type { margin-top: 44px; }

.sv-realisation--inverse .sv-fenetre { order: 2; }

.sv-realisation__visuel {
	position: relative;
	background: var(--sable);
	border-radius: var(--rayon);
	aspect-ratio: 4 / 3;
	overflow: hidden;
	display: grid;
	place-items: center;
}

.sv-realisation__visuel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.sv-realisation__vide {
	font-size: var(--txt-xs);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gris-texte);
	text-align: center;
	padding: 20px;
}

.sv-realisation__badge {
	position: absolute;
	top: 18px;
	left: 18px;
	z-index: 2;
	background: var(--encre);
	color: var(--papier);
	font-size: var(--txt-2xs);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 8px 14px;
	border-radius: var(--rayon-xs);
}

.sv-realisation__domaine {
	font-size: var(--txt-base);
	color: var(--gris-texte);
	margin-bottom: 8px;
}

.sv-realisation__titre {
	font-size: clamp(28px, 3.4vw, 38px);
	margin-bottom: 16px;
}

.sv-realisation__texte {
	font-size: var(--txt-lg);
	color: var(--gris-texte);
	margin-bottom: 22px;
}

.sv-realisation .sv-liste-tirets li { font-size: var(--txt-md); }
.sv-realisation .sv-liste-tirets strong { font-weight: 600; color: var(--encre); }

.sv-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--esp-2);
	margin-top: 24px;
}

.sv-tag {
	font-size: var(--txt-2xs);
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--graphite);
	background: var(--papier);
	border: 1px solid var(--gris-ligne);
	border-radius: var(--rayon-xs);
	padding: 8px 13px;
}

/* Tag cliquable : sert de maillage interne vers les pages secteur. */
a.sv-tag {
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}

a.sv-tag:hover,
a.sv-tag:focus-visible {
	background: var(--encre);
	border-color: var(--encre);
	color: var(--papier);
}

.sv-realisation__liens {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}

/* --------------------------------------------------------------------------
   Formules
   -------------------------------------------------------------------------- */

.sv-grille-formules {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--esp-5);
	margin-top: 52px;
	align-items: stretch;
}

.sv-formule {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--blanc);
	border: 1px solid var(--gris-ligne);
	border-radius: var(--rayon);
	padding: 30px 26px;
	transition: transform var(--transition), box-shadow var(--transition);
}

.sv-formule:hover { transform: translateY(-3px); box-shadow: var(--ombre-forte); }

.sv-formule--vedette {
	border: 2px solid var(--encre);
	box-shadow: var(--ombre-forte);
}

.sv-formule__badge {
	position: absolute;
	top: -13px;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	background: var(--encre);
	color: var(--papier);
	font-size: var(--txt-2xs);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 7px 15px;
	border-radius: var(--rayon-xs);
}

.sv-formule__num {
	font-size: var(--txt-2xs);
	font-weight: 600;
	letter-spacing: .14em;
	color: var(--gris-doux);
	margin-bottom: 14px;
}

.sv-formule__titre {
	font-size: var(--txt-2xl);
	font-weight: 700;
	line-height: 1.14;
	margin-bottom: 2px;
}

.sv-formule__prix {
	font-size: var(--txt-2xl);
	font-weight: 700;
	line-height: 1.14;
	margin-bottom: 6px;
}

.sv-formule__detail {
	font-size: var(--txt-base);
	color: var(--gris-texte);
	padding-bottom: 20px;
	border-bottom: 1px solid var(--gris-ligne);
	margin-bottom: 20px;
}

.sv-formule__points { flex-grow: 1; margin-bottom: 26px; }

.sv-formule__points li {
	position: relative;
	padding-left: 19px;
	margin-bottom: 11px;
	font-size: var(--txt-base);
	color: var(--graphite);
	line-height: 1.5;
}

.sv-formule__points li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .68em;
	width: 9px;
	height: 1.5px;
	background: var(--encre);
}

.sv-formules__pied {
	margin-top: 36px;
	text-align: center;
	font-size: var(--txt-md);
	color: var(--gris-texte);
	max-width: 88ch;
	margin-inline: auto;
}

.sv-formules__pied strong { font-weight: 600; color: var(--encre); }

/* --------------------------------------------------------------------------
   Méthode
   -------------------------------------------------------------------------- */

.sv-methode { background: var(--gris-clair); }

.sv-grille-methode {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--esp-8);
	margin-top: 50px;
}

.sv-etape { padding-top: 22px; border-top: 2px solid var(--encre); }

.sv-etape__num {
	font-size: var(--txt-5xl);
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1;
	margin-bottom: 12px;
}

.sv-etape__titre {
	font-size: var(--txt-xl);
	font-weight: 600;
	margin-bottom: 10px;
}

.sv-etape__texte {
	font-size: var(--txt-md);
	color: var(--gris-texte);
}

/* --------------------------------------------------------------------------
   Formulaire de devis
   -------------------------------------------------------------------------- */

.sv-devis__grille {
	display: grid;
	grid-template-columns: .68fr 1.32fr;
	gap: var(--esp-13);
	align-items: start;
}

.sv-devis__argu { position: sticky; top: 118px; }

.sv-checklist { margin-top: 30px; }

.sv-checklist li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding-block: 15px;
	border-bottom: 1px solid var(--gris-ligne);
	font-size: var(--txt-md);
	color: var(--graphite);
}

.sv-checklist li::before {
	content: '✓';
	flex-shrink: 0;
	font-size: var(--txt-base);
	color: var(--encre);
	line-height: 1.5;
}

/* Carte du formulaire */
.sv-form {
	background: var(--blanc);
	border: 1px solid var(--gris-ligne);
	border-radius: var(--rayon);
	padding: 38px 36px;
	box-shadow: var(--ombre);
}

.sv-form__entete {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 30px;
}

.sv-form__etape-label,
.sv-form__etape-nom {
	font-size: var(--txt-2xs);
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gris-texte);
	white-space: nowrap;
}

.sv-form__barre {
	flex-grow: 1;
	height: 3px;
	background: var(--gris-ligne);
	border-radius: var(--rayon-pill);
	overflow: hidden;
}

.sv-form__barre span {
	display: block;
	height: 100%;
	width: 33.33%;
	background: var(--encre);
	border-radius: var(--rayon-pill);
	transition: width var(--transition-lente);
}

.sv-champ { margin-bottom: 26px; }

.sv-label {
	display: block;
	font-size: var(--txt-2xs);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--encre);
	margin-bottom: 13px;
}

.sv-label__aide {
	font-weight: 400;
	letter-spacing: .02em;
	text-transform: none;
	color: var(--gris-texte);
	font-size: var(--txt-sm);
	margin-left: 8px;
}

/* Pastilles à choix */
.sv-pastilles {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.sv-pastille { position: relative; }

.sv-pastille input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.sv-pastille span {
	display: inline-block;
	padding: 12px 21px;
	font-size: var(--txt-md);
	border: 1px solid var(--bordure-champ);
	border-radius: var(--rayon-pill);
	background: var(--blanc);
	cursor: pointer;
	transition: all var(--transition);
	user-select: none;
}

.sv-pastille span:hover { border-color: var(--graphite); }

.sv-pastille input:checked + span {
	background: var(--encre);
	border-color: var(--encre);
	color: var(--papier);
	font-weight: 500;
}

.sv-pastille input:focus-visible + span {
	outline: 2px solid var(--encre);
	outline-offset: 3px;
}

/* Champs texte */
.sv-duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.sv-input,
.sv-textarea {
	width: 100%;
	padding: 15px 17px;
	font-size: var(--txt-lg);
	font-weight: 300;
	background: var(--blanc);
	border: 1px solid var(--bordure-champ);
	border-radius: var(--rayon-sm);
	transition: border-color var(--transition), box-shadow var(--transition);
}

.sv-input::placeholder,
.sv-textarea::placeholder { color: var(--gris-doux); }

.sv-input:focus,
.sv-textarea:focus {
	outline: none;
	border-color: var(--encre);
	box-shadow: 0 0 0 3px rgba(17, 19, 23, .07);
}

.sv-textarea { min-height: 112px; resize: vertical; }

.sv-input.est-en-erreur,
.sv-textarea.est-en-erreur { border-color: var(--erreur); }

.sv-erreur-champ {
	display: block;
	margin-top: 7px;
	font-size: var(--txt-sm);
	color: var(--erreur);
}

/* Curseur de budget */
.sv-slider { margin-top: 20px; }

.sv-slider input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 3px;
	background: var(--gris-ligne);
	border-radius: var(--rayon-pill);
	outline: none;
	margin: 12px 0;
}

.sv-slider input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--blanc);
	border: 2px solid var(--encre);
	cursor: pointer;
	transition: transform var(--transition);
}

.sv-slider input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.14); }

.sv-slider input[type="range"]::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--blanc);
	border: 2px solid var(--encre);
	cursor: pointer;
}

.sv-slider__legende {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--esp-3);
	font-size: var(--txt-sm);
	color: var(--gris-texte);
}

.sv-slider__valeur { font-weight: 600; color: var(--encre); font-size: var(--txt-md); }

.sv-slider__aide {
	margin-top: 12px;
	font-size: var(--txt-sm);
	color: var(--gris-texte);
}

/* Consentement */
.sv-consent {
	display: flex;
	gap: 13px;
	align-items: flex-start;
	margin-block: 28px 24px;
	font-size: var(--txt-base);
	color: var(--gris-texte);
	line-height: 1.55;
}

.sv-consent input {
	flex-shrink: 0;
	width: 19px;
	height: 19px;
	margin: 2px 0 0;
	accent-color: var(--encre);
	cursor: pointer;
}

/* Pied du formulaire */
.sv-form__pied {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
}

.sv-form__pied .sv-note { font-size: var(--txt-base); }

.sv-honeypot {
	position: absolute !important;
	left: -9999px !important;
	opacity: 0;
	height: 0;
	width: 0;
	overflow: hidden;
}

/* Messages */
.sv-message {
	margin-top: 22px;
	padding: 16px 20px;
	border-radius: var(--rayon-sm);
	font-size: var(--txt-md);
	display: none;
}

.sv-message.est-visible { display: block; }

.sv-message--succes {
	background: var(--succes-fond);
	border: 1px solid var(--succes-bord);
	color: var(--succes-texte);
}

.sv-message--erreur {
	background: var(--erreur-fond);
	border: 1px solid var(--erreur-bord);
	color: var(--erreur-texte);
}

.sv-form.est-envoye .sv-form__corps,
.sv-form.est-envoye .sv-form__pied,
.sv-form.est-envoye .sv-form__entete { display: none; }

.sv-merci { text-align: center; padding-block: var(--esp-6); }

.sv-merci__titre { font-size: var(--txt-4xl); margin-bottom: 14px; }

.sv-merci__texte { font-size: var(--txt-lg); color: var(--gris-texte); max-width: 46ch; margin-inline: auto; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.sv-grille-faq {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 56px;
	margin-top: 50px;
}

.sv-faq {
	padding-block: 26px;
	border-top: 1px solid var(--gris-ligne);
}

.sv-faq__q {
	font-size: var(--txt-xl);
	font-weight: 600;
	margin-bottom: 10px;
	letter-spacing: -.012em;
}

.sv-faq__r {
	font-size: var(--txt-md);
	color: var(--gris-texte);
}

.sv-faq__r strong { font-weight: 600; color: var(--encre); }

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */

.sv-footer {
	background: var(--encre);
	color: rgba(244, 243, 239, .72);
	padding-block: 72px 0;
}

.sv-footer__grille {
	display: grid;
	grid-template-columns: 1.55fr 1fr 1fr 1fr;
	gap: 44px;
}

.sv-footer .sv-logo__nom { color: var(--blanc); }
.sv-footer .sv-logo__baseline { color: var(--gris-faible); }
.sv-footer .sv-logo__marque { border-color: var(--papier); }
.sv-footer .sv-logo__marque::after { background: var(--papier); }

.sv-footer__texte {
	margin-top: 22px;
	font-size: var(--txt-md);
	max-width: 38ch;
}

.sv-footer__contact { margin-top: 16px; font-size: var(--txt-md); }

.sv-footer__contact a {
	border-bottom: 1px solid rgba(244, 243, 239, .3);
	transition: border-color var(--transition), color var(--transition);
}

.sv-footer__contact a:hover { color: var(--blanc); border-color: var(--papier); }

.sv-footer__titre {
	font-size: var(--txt-2xs);
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gris-faible);
	margin-bottom: 18px;
}

.sv-footer__liste li { margin-bottom: 11px; font-size: var(--txt-md); }

.sv-footer__liste a { transition: color var(--transition); }
.sv-footer__liste a:hover { color: var(--blanc); }

.sv-footer__bas {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--esp-4);
	margin-top: 56px;
	padding-block: 26px;
	border-top: 1px solid rgba(244, 243, 239, .14);
	font-size: var(--txt-sm);
	color: var(--gris-faible);
}

.sv-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
}

.sv-footer__legal a { transition: color var(--transition); }
.sv-footer__legal a:hover { color: var(--papier); }

/* --------------------------------------------------------------------------
   Animations d'apparition
   -------------------------------------------------------------------------- */

.sv-anim {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity var(--transition-douce), transform var(--transition-douce);
}

.sv-anim.est-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Pages internes simples
   -------------------------------------------------------------------------- */

.sv-page { padding-block: 72px 96px; }

.sv-page__titre { font-size: clamp(34px, 5vw, 52px); margin-bottom: 28px; }

.sv-prose { max-width: 72ch; font-size: var(--txt-lg); }
.sv-prose h2 { font-size: var(--txt-4xl); margin-block: 42px 16px; }
.sv-prose h3 { font-size: var(--txt-2xl); margin-block: 32px 12px; }
.sv-prose ul { list-style: disc; padding-left: 22px; margin-bottom: 1em; }
.sv-prose li { margin-bottom: .5em; }
.sv-prose a { border-bottom: 1px solid var(--gris-ligne); }
.sv-prose a:hover { border-color: var(--encre); }

/* --------------------------------------------------------------------------
   Articles
   -------------------------------------------------------------------------- */

.sv-prose p { margin-bottom: 1.1em; }
.sv-prose p:last-child { margin-bottom: 0; }
.sv-prose h2:first-child { margin-top: 0; }
.sv-prose strong { font-weight: 600; color: var(--encre); }

/* Encadré de réponse directe : c'est ce bloc que les moteurs et les
   assistants citent, il doit se distinguer du corps du texte. */
.sv-prose .sv-reponse {
	border-left: 3px solid var(--encre);
	background: var(--gris-clair);
	padding: var(--esp-6) var(--esp-7);
	margin-block: var(--esp-8);
	font-size: var(--txt-lg);
	border-radius: 0 var(--rayon-sm) var(--rayon-sm) 0;
}

.sv-article { padding-block: var(--esp-12) var(--esp-10); }
.sv-article__tete { max-width: 72ch; }

.sv-article__titre {
	font-size: var(--txt-6xl);
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1.08;
	text-wrap: balance;
	margin-block: var(--esp-4) var(--esp-6);
}

.sv-article__chapo {
	font-size: var(--txt-xl);
	color: var(--gris-texte);
	margin-bottom: var(--esp-10);
}

.sv-grille-articles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--esp-6);
	margin-top: var(--esp-10);
}

.sv-article-carte {
	display: flex;
	flex-direction: column;
	gap: var(--esp-3);
	padding: var(--esp-7);
	background: var(--blanc);
	border: 1px solid var(--gris-ligne);
	border-radius: var(--rayon-md);
	transition: border-color .2s ease, transform .2s ease;
}

.sv-article-carte:hover,
.sv-article-carte:focus-visible {
	border-color: var(--encre);
	transform: translateY(-2px);
}

.sv-article-carte__date {
	font-size: var(--txt-2xs);
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--gris-doux);
}

.sv-article-carte__titre {
	font-size: var(--txt-2xl);
	font-weight: 600;
	line-height: 1.22;
	text-wrap: balance;
}

.sv-article-carte__texte {
	font-size: var(--txt-md);
	color: var(--gris-texte);
	flex-grow: 1;
}

@media (max-width: 1024px) {
	.sv-grille-articles { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
	.sv-grille-articles { grid-template-columns: 1fr; }
	.sv-article__titre { font-size: var(--txt-4xl); }
	.sv-article__chapo { font-size: var(--txt-lg); }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1180px) and (min-width: 1025px) {
	.sv-nav__liste { gap: var(--esp-5); }
	.sv-nav__lien { font-size: var(--txt-base); }
	.sv-logo__nom { font-size: var(--txt-2xl); }
}

@media (max-width: 1100px) {
	.sv-hero__grille { grid-template-columns: 1fr; gap: var(--esp-12); }
	.sv-devis__grille { grid-template-columns: 1fr; gap: var(--esp-10); }
	.sv-devis__argu { position: static; }
	.sv-grille-formules { grid-template-columns: repeat(2, 1fr); gap: 20px 20px; }
	.sv-grille-methode { grid-template-columns: repeat(2, 1fr); gap: 34px 28px; }
	.sv-footer__grille { grid-template-columns: 1fr 1fr; gap: var(--esp-10); }
}

@media (max-width: 980px) {
	.sv-grille-3,
	.sv-grille-secteurs { grid-template-columns: repeat(2, 1fr); }
	.sv-triptyque { grid-template-columns: 1fr; }
	.sv-tript { border-right: none; border-bottom: 1px solid rgba(244, 243, 239, .16); }
	.sv-tript:last-child { border-bottom: none; }
	.sv-realisation { grid-template-columns: 1fr; gap: var(--esp-8); }
	.sv-realisation--inverse .sv-fenetre { order: 0; }
	.sv-grille-faq { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 1024px) {
	/* Navigation mobile */
	.sv-burger { display: block; }

	.sv-nav {
		position: fixed;
		inset: 0 0 auto;
		top: var(--hauteur-header, 84px);
		background: var(--papier);
		border-bottom: 1px solid var(--gris-ligne);
		padding: 20px var(--gouttiere) 28px;
		transform: translateY(-14px);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
		box-shadow: 0 18px 40px rgba(17, 19, 23, .1);
		max-height: calc(100dvh - var(--hauteur-header, 84px));
		overflow-y: auto;
	}

	.sv-nav.est-ouvert { transform: none; opacity: 1; visibility: visible; }

	.sv-nav__liste { flex-direction: column; align-items: stretch; gap: 0; }

	.sv-nav__lien {
		display: block;
		padding-block: var(--esp-4);
		font-size: var(--txt-lg);
		border-bottom: 1px solid var(--gris-ligne);
	}

	.sv-nav__lien::after { display: none; }

	.sv-nav__cta-mobile { display: block; margin-top: 22px; }

	.sv-header__cta { display: none; }

	.sv-bandeau__in { flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; }
	.sv-bandeau { font-size: var(--txt-xs); }
}

@media (max-width: 700px) {
	:root { --gouttiere: 16px; }

	.sv-section { padding-block: var(--esp-16); }
	.sv-section--serre { padding-block: var(--esp-13); }
	.sv-hero { padding-block: 52px 48px; }

	.sv-grille-3,
	.sv-grille-secteurs,
	.sv-grille-formules,
	.sv-grille-methode { grid-template-columns: 1fr; }

	.sv-grille-3, .sv-grille-secteurs { margin-top: 36px; }

	.sv-carte, .sv-secteur { padding: 26px 22px; }
	.sv-carte-devis { padding: 30px 24px; }
	.sv-form { padding: 28px 20px; }
	.sv-tript { padding: 30px 24px; }

	.sv-duo { grid-template-columns: 1fr; }

	.sv-footer__grille { grid-template-columns: 1fr; gap: 34px; }
	.sv-footer { padding-top: 56px; }

	.sv-hero__actions .sv-btn { width: 100%; }

	.sv-form__entete { flex-wrap: wrap; gap: 10px 14px; }
	.sv-form__barre { order: 3; width: 100%; flex-basis: 100%; }

	/* Pastilles assez grandes pour le pouce — c'est là que se gagne un devis. */
	.sv-pastille span { padding: 14px 20px; font-size: var(--txt-md); }

	.sv-slider__legende { flex-wrap: wrap; }
	.sv-slider__legende .sv-slider__valeur { order: -1; flex-basis: 100%; text-align: center; margin-bottom: 4px; }

	.sv-form__pied { flex-direction: column; align-items: stretch; }
	.sv-form__pied .sv-btn { width: 100%; }
	.sv-form__pied .sv-note { text-align: center; }

	.sv-strip__liste { gap: 0 16px; font-size: var(--txt-sm); }
	.sv-strip__item { gap: var(--esp-4); }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
	.sv-anim { opacity: 1; transform: none; }
}

@media print {
	.sv-header, .sv-bandeau, .sv-strip, .sv-footer, .sv-form { display: none; }
	body { background: #fff; }
}

/* --------------------------------------------------------------------------
   Ajustements de finition
   -------------------------------------------------------------------------- */

/* Les champs d'un duo s'alignent par le haut : sinon celui qui porte
   un message d'erreur étire son voisin. */
.sv-duo { align-items: start; }

/* Dans une carte de formule, le libellé du bouton doit tenir sur une ligne. */
.sv-formule .sv-btn {
	font-size: var(--txt-md);
	padding-inline: var(--esp-4);
}

@media (max-width: 700px) {
	/* Sur téléphone, le paragraphe du héros respire mieux un cran plus bas. */
	.sv-hero__texte { font-size: var(--txt-lg); }
	.sv-hero__h1 { letter-spacing: -.028em; }
	.sv-eyebrow { font-size: var(--txt-2xs); letter-spacing: .15em; }
}

/* --------------------------------------------------------------------------
   Fenêtre de navigateur — aperçu des réalisations
   Reprend le motif de la maquette : une capture montée dans un cadre.
   -------------------------------------------------------------------------- */

.sv-fenetre {
	margin: 0;
	border: 1px solid var(--gris-ligne);
	border-radius: var(--rayon);
	overflow: hidden;
	background: var(--blanc);
	box-shadow: var(--ombre-forte);
	transition: transform var(--transition), box-shadow var(--transition);
}

.sv-fenetre:hover { transform: translateY(-3px); }

.sv-fenetre__barre {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	background: var(--papier);
	border-bottom: 1px solid var(--gris-ligne);
}

.sv-fenetre__points {
	display: flex;
	gap: 6px;
	flex-shrink: 0;
}

.sv-fenetre__points i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--gris-ligne);
}

.sv-fenetre__points i:first-child { background: #D8CFC4; }

.sv-fenetre__url {
	flex-grow: 1;
	font-size: var(--txt-sm);
	color: var(--gris-texte);
	background: var(--blanc);
	border: 1px solid var(--gris-ligne);
	border-radius: var(--rayon-pill);
	padding: 5px 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sv-fenetre__badge {
	flex-shrink: 0;
	font-size: var(--txt-2xs);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--papier);
	background: var(--encre);
	border-radius: var(--rayon-xs);
	padding: 6px 11px;
}

.sv-fenetre__ecran {
	background: var(--sable);
	min-height: 180px;
	display: grid;
	place-items: center;
}

.sv-fenetre__ecran img {
	width: 100%;
	height: auto;
	display: block;
}

.sv-fenetre__vide {
	font-size: var(--txt-xs);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gris-texte);
	text-align: center;
	padding: 64px 20px;
}

@media (max-width: 700px) {
	.sv-fenetre__badge { display: none; }
	.sv-fenetre__barre { padding: 10px 12px; gap: 10px; }
}

/* ==========================================================================
   PAGES SECTEUR
   Construites uniquement avec les jetons déclarés dans :root.
   ========================================================================== */

/* -------------------------------------------------- Fil d'Ariane */

.sv-fil {
	border-bottom: 1px solid var(--gris-ligne);
	background: var(--papier);
}

.sv-fil__liste {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--esp-2);
	padding-block: var(--esp-3);
	font-size: var(--txt-sm);
	color: var(--gris-texte);
}

.sv-fil__liste li { display: flex; align-items: center; gap: var(--esp-2); }

.sv-fil__liste li + li::before {
	content: '›';
	color: var(--gris-doux);
}

.sv-fil__liste a { transition: color var(--transition); }
.sv-fil__liste a:hover { color: var(--encre); text-decoration: underline; }
.sv-fil__liste [aria-current] { color: var(--encre); font-weight: 500; }

/* -------------------------------------------------- Héros de page secteur */

.sv-hero--secteur { padding-block: var(--esp-16) var(--esp-14); }

.sv-hero--secteur .sv-hero__h1 { font-size: clamp(34px, 4.6vw, 54px); }

.sv-secteur-metiers {
	margin-top: var(--esp-6);
	padding-top: var(--esp-5);
	border-top: 1px solid var(--gris-ligne);
	font-size: var(--txt-sm);
	line-height: 1.7;
	color: var(--gris-doux);
	max-width: 58ch;
}

.sv-carte-devis__item em { font-style: italic; }

/* -------------------------------------------------- Bloc deux colonnes large */

.sv-duo-large {
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	gap: var(--esp-14);
	align-items: start;
}

/* -------------------------------------------------- Liste numérotée */

.sv-liste-numerotee {
	border-top: 1px solid var(--gris-ligne);
}

.sv-liste-numerotee li {
	display: flex;
	gap: var(--esp-5);
	align-items: baseline;
	padding-block: var(--esp-5);
	border-bottom: 1px solid var(--gris-ligne);
	font-size: var(--txt-lg);
	color: var(--graphite);
}

.sv-liste-numerotee__num {
	flex-shrink: 0;
	min-width: 28px;
	font-size: var(--txt-2xs);
	font-weight: 600;
	letter-spacing: .12em;
	color: var(--gris-doux);
}

/* -------------------------------------------------- Appel final */

.sv-final {
	display: grid;
	grid-template-columns: 1.3fr .7fr;
	gap: var(--esp-12);
	align-items: center;
}

.sv-final__actions {
	display: flex;
	flex-direction: column;
	gap: var(--esp-3);
}

.sv-btn--fantome-clair {
	background: transparent;
	color: var(--encre-contraste);
	border-color: var(--sur-sombre-trait);
}

.sv-btn--fantome-clair:hover {
	background: var(--sur-sombre-voile);
	border-color: var(--encre-contraste);
	color: var(--blanc);
}

/* -------------------------------------------------- Responsive */

@media (max-width: 1100px) {
	.sv-duo-large { grid-template-columns: 1fr; gap: var(--esp-10); }
	.sv-final { grid-template-columns: 1fr; gap: var(--esp-8); }
}

@media (max-width: 700px) {
	.sv-hero--secteur { padding-block: var(--esp-10) var(--esp-8); }
	.sv-liste-numerotee li { font-size: var(--txt-md); gap: var(--esp-4); }
	.sv-final__actions .sv-btn { width: 100%; }
	.sv-fil__liste { font-size: var(--txt-xs); }
}

/* Carte secteur devenue lien vers sa page dédiée */
a.sv-secteur { color: inherit; }

.sv-secteur__lien {
	display: block;
	margin-top: var(--esp-4);
	font-size: var(--txt-sm);
	font-weight: 600;
	color: var(--encre);
}

a.sv-secteur:hover .sv-secteur__lien { text-decoration: underline; }