/* ==========================================================================
   SDE : design system
   Valeurs relevées sur le template Framer « Consulting ».
   S'applique via les classes CSS renseignées sur les conteneurs Elementor.
   ========================================================================== */

:root {
	/* Platine, choisi le 02/09/2026 pour remplacer le bleu roi, qui dominait
	   trop le site. Un graphite chaud plutôt qu'un platine clair : ce dernier
	   n'aurait pas tenu le contraste en aplat avec du texte blanc. Tient
	   14,9:1 sur blanc, contre 9,5:1 pour l'ancien bleu. */
	--sde-brand: #2c2c2a;

	/* Dorés. Deux valeurs, pas une : aucun doré ne tient le contraste à la
	   fois sur un fond clair et sur un fond sombre. Mesuré le 23/09/2026.

	   --sde-or-sombre #806017 sur les fonds clairs du site : 5,83 sur blanc,
	   5,21 sur #F2F2F2, 5,54 sur #FAF9F7, 5,22 sur le crème #F5F2EC et 5,02
	   sur le #EEE de l'extension sivtc. Le plus tentant, #8A6A1E, tombait à
	   4,35 sur ce dernier, sous le seuil de 4,5.

	   --sde-or-clair #D4AF37 sur les fonds sombres : 6,65 sur la marque,
	   9,42 sur le noir, 8,19 sur le #1B1B1B du kit. */
	--sde-or-sombre: #806017;
	--sde-or-clair: #d4af37;
	--sde-brand-hi: #5f5e5a;

	/* Reflet du platine en aplat, pour les sections et cartes où il sert de
	   fond. Un dégradé diagonal discret autour de la même teinte, pas un
	   nouveau ton. */
	--sde-brand-sheen: linear-gradient(135deg, #383734 0%, #201f1d 100%);
	--sde-brand-sheen-hi: linear-gradient(135deg, #726f6a 0%, #4a4945 100%);
	/* Grain métal brossé, réservé aux boutons : sans lui l'aplat platine est
	   monotone sur une grande surface pleine. Superposé au reflet, jamais
	   utilisé seul. */
	--sde-brand-grain: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0, rgba(255, 255, 255, 0.06) 1px, transparent 1px, transparent 3px);

	--sde-ink: #000;
	--sde-body: #333;
	/* Gris secondaire. Passé de #A1A1A1 à #696969 le 24/09/2026 : l'ancienne
	   valeur ne donnait que 2,58 sur blanc et 2,23 sur le #EEE de l'extension
	   sivtc, très en dessous des 4,5 exigés pour du texte courant. Elle a été
	   relevée en défaut sur deux textes réellement rendus, le libellé des
	   chiffres clés de l'accueil et la croix de fermeture de la fenêtre d'arrêt
	   supplémentaire, et sur cinq usages dormants qui auraient produit le même
	   défaut le jour où ils s'afficheraient.

	   #696969 tient sur les cinq surfaces claires du site : 5,49 sur blanc,
	   4,90 sur #F2F2F2, 5,22 sur #FAF9F7, 4,91 sur le crème #F5F2EC et 4,73 sur
	   le #EEE de sivtc. #6E6E6E, plus clair, retombait à 4,39 sur ce dernier.

	   Le jeton n'est utilisé que pour des couleurs de texte, jamais pour un
	   fond ni une bordure : l'assombrir ne déplace rien d'autre. */
	--sde-muted: #696969;
	--sde-ondark: #d6d6d6;
	--sde-surface: #f2f2f2;
	--sde-hairline: rgba(0, 0, 0, 0.05);

	--sde-font: "Figtree", system-ui, -apple-system, sans-serif;
	--sde-font-ui: "Inter", system-ui, -apple-system, sans-serif;

	--sde-ease: cubic-bezier(0.44, 0, 0.56, 1);
	--sde-container: 1240px;
	--sde-radius-card: 15px;
	--sde-radius-box: 10px;
}

body {
	font-family: var(--sde-font);
	color: var(--sde-ink);
	-webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Typographie
   -------------------------------------------------------------------------- */
.sde-display,
.sde-h1 {
	font-size: clamp(42px, 5.6vw, 80px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-weight: 500;
	margin: 0;
}

.sde-h2 {
	font-size: clamp(32px, 3.5vw, 50px);
	line-height: 1.2;
	letter-spacing: -0.02em;
	font-weight: 500;
	margin: 0;
}

.sde-h3 {
	font-size: clamp(20px, 1.6vw, 22px);
	line-height: 1.5;
	letter-spacing: -0.02em;
	font-weight: 500;
	margin: 0;
}

.sde-eyebrow {
	font-size: 20px;
	line-height: 1.3;
	letter-spacing: -0.02em;
	font-weight: 500;
	color: var(--sde-brand);
	margin: 0;
}

.sde-body,
.sde-body p {
	font-size: clamp(16px, 1.25vw, 18px);
	line-height: 1.7;
	letter-spacing: -0.01em;
	font-weight: 400;
	color: var(--sde-body);
	margin: 0;
}

.sde-caption,
.sde-caption p {
	font-size: 14.4px;
	line-height: 1.8;
	color: var(--sde-body);
	margin: 0;
}

/* Couleur des titres sur fond clair.

   Elle manquait. Les classes ci-dessus ne fixaient une couleur que dans la
   variante `.sde-on-dark` juste en dessous : sur fond clair, le titre
   héritait donc du <body>. Or le kit Elementor de l'ancien site est toujours
   en place et y pose `color: #D8D6CA`, un beige très pâle qui allait avec
   son fond `#1B1B1B`. La refonte posant des sections claires par-dessus, ces
   titres devenaient presque invisibles.

   Relevé sur l'accueil le 23/09/2026 : 12 titres à #D8D6CA sur #F2F2F2, soit
   un contraste de 1,3 pour 4,5 exigé. « Des véhicules de dernière
   génération » était à la limite du lisible. Tous sur fond clair, aucun sur
   fond sombre, d'où une correction qui ne touche que ce cas. */
.sde-display,
.sde-h1,
.sde-h2,
.sde-h3 { color: var(--sde-ink); }

/* Variantes sur fond sombre ou coloré */
.sde-on-dark .sde-display,
.sde-on-dark .sde-h1,
.sde-on-dark .sde-h2,
.sde-on-dark .sde-h3,
.sde-on-dark .sde-eyebrow { color: #fff; }

.sde-on-dark .sde-body,
.sde-on-dark .sde-body p { color: var(--sde-ondark); }

.sde-on-dark .sde-caption,
.sde-on-dark .sde-caption p { color: rgba(255, 255, 255, 0.75); }

/* Liens à l'intérieur d'un texte courant : le numéro de téléphone et
   l'adresse e-mail y sont cliquables, il faut que cela se voie. Un simple
   changement de couleur ne suffirait pas, elle n'est pas le seul indice
   admissible : on souligne. */
.sde-body a,
.sde-prose a {
	color: var(--sde-brand);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color 0.3s var(--sde-ease, ease);
}

.sde-body a:hover,
.sde-prose a:hover {
	color: var(--sde-brand-hi);
	text-decoration-thickness: 2px;
}

/* Sur fond sombre ou bleu, le bleu de marque disparaîtrait. */
.sde-on-dark .sde-body a,
.sde-on-dark .sde-prose a {
	color: #fff;
}

.sde-on-dark .sde-body a:hover,
.sde-on-dark .sde-prose a:hover {
	color: #fff;
	text-decoration-thickness: 2px;
}

/* --------------------------------------------------------------------------
   Boutons : pilule 50px, libellé Inter 14px
   -------------------------------------------------------------------------- */
.sde-btn .elementor-button,
a.sde-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 30px;
	border-radius: 50px;
	border: 0;
	font-family: var(--sde-font-ui);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	transition:
		background-color 0.3s var(--sde-ease),
		color 0.3s var(--sde-ease),
		border-color 0.3s var(--sde-ease),
		transform 0.3s var(--sde-ease);
}

.sde-btn .elementor-button:hover,
a.sde-btn:hover { transform: translateY(-2px); }

.sde-btn--accent .elementor-button,
a.sde-btn--accent {
	background-color: var(--sde-brand);
	/* !important : certains widgets Bouton portent une couleur de fond posée
	   dans Elementor plutôt que par notre feuille, sa CSS générée arrive
	   après la nôtre et gagne à spécificité égale. Sans quoi le grain
	   disparaît sur ces boutons précis (« En savoir plus »). */
	background-image: var(--sde-brand-grain), var(--sde-brand-sheen) !important;
	color: #fff;
}
.sde-btn--accent .elementor-button:hover,
a.sde-btn--accent:hover {
	background-color: var(--sde-brand-hi);
	background-image: var(--sde-brand-grain), var(--sde-brand-sheen-hi) !important;
	color: #fff;
}

.sde-btn--light .elementor-button,
a.sde-btn--light { background: #fff; color: var(--sde-ink); }
.sde-btn--light .elementor-button:hover,
a.sde-btn--light:hover { background: var(--sde-surface); }

/* `:visited` ici aussi. Le libellé du bouton est un `<span>` sans couleur
   propre, à l'intérieur d'un lien : une fois la page de destination visitée,
   il aurait pris la couleur des liens visités, comme le titre des panneaux de
   services.

   C'est la règle `:visited` sur le lien lui-même qui règle le cas : le
   navigateur n'applique la couleur des liens visités que sur le lien, et les
   descendants en héritent. Poser `color: inherit` sur le libellé ne
   protégerait de rien, il hériterait au contraire. */
.sde-btn--ghost .elementor-button,
.sde-btn--ghost .elementor-button:visited,
a.sde-btn--ghost,
a.sde-btn--ghost:visited {
	background: transparent;
	color: var(--sde-ondark);
	border: 1px solid rgba(255, 255, 255, 0.28);
}
.sde-btn--ghost .elementor-button:hover,
a.sde-btn--ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* --------------------------------------------------------------------------
   Rythme des sections
   -------------------------------------------------------------------------- */
.sde-section {
	padding-top: 125px;
	padding-bottom: 125px;
}

.sde-section--tight {
	padding-top: 100px;
	padding-bottom: 100px;
}

/* Bandeau de marque à fond photo, voile sombre translucide par-dessus.

   Jusqu'au 03/09/2026 ce bandeau était un aplat platine avec juste le reflet
   dégradé `--sde-brand-sheen`. Demande du client : y poser une vraie photo,
   « avec une transparence », plutôt qu'un ton uni. La photo elle-même vient
   du gabarit (`bgImage()` dans `build/*.mjs`, différente à chaque bandeau
   pour ne jamais répéter deux fois le même visuel sur une seule page) ;
   Elementor l'écrit directement sur cet élément, dans le CSS de la page,
   chargé après cette feuille, elle gagne donc sans qu'on ait à s'en occuper
   ici.

   Le voile, lui, vit sur un pseudo-élément et non sur cet arrière-plan
   direct : poser une opacité sur le conteneur aurait fait pâlir le texte
   blanc en même temps que la photo. Il reprend le reflet et le grain de la
   marque, à la manière des boutons, pour que le bandeau garde son
   identité même quand la photo change. Le réglage transparence/opacité
   décide combien de la photo transparaît. */
.sde-band--accent {
	position: relative;
	isolation: isolate;
	background-color: var(--sde-brand);
}

.sde-band--accent::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: var(--sde-brand);
	background-image: var(--sde-brand-grain), var(--sde-brand-sheen);
	/* 0,55, valeur mesurée et non choisie à vue.

	   Le voile n'ayant jamais été rendu (voir la note sur `content` plus
	   haut), son 0,82 d'origine n'avait jamais été éprouvé. Mesuré le
	   23/09/2026 sur les neuf photos qui portent cette classe : leur 95e
	   centile de luminosité va de 145 à 194, et non 255 comme le supposerait
	   un pire cas théorique. À 0,55 le composite le plus clair tombe à 111,
	   soit 5,00 de contraste pour du texte blanc, au-dessus des 4,5 exigés,
	   et il reste 45 % de la photo visible. À 0,70 le contraste montait à
	   7,0 mais la photo disparaissait, ce qui vidait de son sens la
	   superposition « transparente » demandée par le client. */
	opacity: 0.55 !important;
}

.sde-band--accent > .e-con-inner,
.sde-band--accent > .e-con-inner > *,
.sde-band--accent > * {
	position: relative;
	z-index: 1;
}

.sde-band--surface { background: var(--sde-surface); }

/* Bande à image de fond tenue en retrait par un voile clair.

   Posée le 03/09/2026 sur la bande d'estimation de la page contact, à la
   demande du client, à la place d'un gris plat. Le voile est un dégradé et
   non un aplat : légèrement plus dense en haut, où la titraille et la carte
   blanche du formulaire ont besoin de contraste, plus transparent en bas, où
   l'image peut respirer.

   Le voile passe par un pseudo-élément et non par un `background-blend-mode`
   ou une opacité sur le conteneur : l'opacité aurait fait pâlir le contenu
   avec le fond, et Elementor pose déjà son propre `background-image` sur ce
   conteneur, qu'on ne veut pas avoir à reprendre. */
.sde-band--veil {
	position: relative;
	isolation: isolate;
}

.sde-band--veil::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(
		180deg,
		rgba(247, 245, 243, 0.9) 0%,
		rgba(247, 245, 243, 0.82) 100%
	);
}

/* Le contenu repasse devant le voile. Elementor enveloppe les enfants d'une
   bande « boxed » dans `.e-con-inner` : c'est cet élément-là qu'il faut
   relever, les enfants directs ne suffisent pas. */
.sde-band--veil > .e-con-inner,
.sde-band--veil > .e-con-inner > *,
.sde-band--veil > * {
	position: relative;
	z-index: 1;
}

/* Texte secondaire posé à même la bande, hors de la carte blanche du
   formulaire : la phrase indiquant que la réservation reste en français, sur
   les pages traduites. Le gris `--sde-muted` (#7a7a7a à l'époque, #696969 depuis) n'y tient pas le
   contraste.

   Mesuré le 03/09/2026, sur le pixel le plus sombre de l'image de fond passé
   sous le voile le plus transparent (fond effectif #cbc9c7) : #7a7a7a n'y
   atteint que 2,60:1, très en dessous des 4,5:1 exigés pour du texte courant.
   #4e4e4e y atteint 5,04:1.

   À noter : l'ancien fond gris plat ne passait pas non plus (3,83:1). Le
   défaut préexistait au changement de fond, il est corrigé pour de bon ici. */
.sde-band--veil .sde-caption,
.sde-band--veil .sde-muted {
	color: #4e4e4e;
}

/* --------------------------------------------------------------------------
   Héros : image plein cadre assombrie à 0.4
   -------------------------------------------------------------------------- */
/* Les héros occupent toute la hauteur de l'écran, sur toutes les pages et
   sur tous les appareils. Demandé par le client le 01/09/2026.

   `100dvh` et non `100vh` seul : sur téléphone, `vh` compte la barre
   d'adresse du navigateur, si bien qu'un héros à 100vh dépasse toujours de
   la zone réellement visible et se fait couper en bas. L'unité dynamique
   suit la barre quand elle se rétracte. La ligne `100vh` reste en secours
   pour les navigateurs qui ignorent `dvh`.

   La hauteur ne vient plus des gabarits : Elementor y produisait une règle
   plus spécifique que la nôtre, qui l'aurait emporté. */
.sde-hero {
	position: relative;
	min-height: 100vh;
	min-height: 100dvh;
	overflow: hidden;
}

/* Voile sombre. On ne réutilise pas `background-image: inherit` + `filter`
   comme sur le template Framer : Elementor pose l'image de fond au moment du
   lazy-load, et l'héritage sur un pseudo-élément n'est pas fiable dans ce
   cas. Un aplat noir à 60 % donne le même rendu que brightness(0.4). */
.sde-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: 0;
	pointer-events: none;
}

.sde-hero > .e-con-inner,
.sde-hero > .elementor-container { position: relative; z-index: 1; }

/* Sur l'accueil seulement, le voile plat devient un dégradé de gauche à
   droite : le titre et le texte vivent à gauche et réclament le fond le plus
   sombre, tandis que la photo de la flotte respire à droite, derrière la
   carte de réservation qui est de toute façon opaque.

   Le dégradé ne descend pas sous 0,42 : plus clair que cela, l'indice de
   défilement en bas du héros et le bouton « Contactez-nous », tous deux en
   gris clair, repassaient sous le seuil de lisibilité.

   Demandé par le client le 23/09/2026. */
/* Deux calques au lieu d'un : un voile d'ambiance très clair sur toute la
   largeur, et un écran localisé derrière le seul bloc de texte.

   Un voile uniforme oppose deux exigences contraires : la photo veut peu de
   noir, le texte en veut beaucoup. Mesuré le 24/09/2026, le voile uniforme
   plafonnait à 0,72 à gauche, sans quoi le paragraphe passait sous 4,5. En
   séparant les deux rôles, le fond général descend à 0,52 et l'écran ne
   s'applique qu'où il sert.

   Les deux calques se composent comme 1-(1-a1)(1-a2), ce qui a servi au
   calcul. Résultats, sur la photo réelle, colonne par colonne :

     voile                      titre   paragraphe   photo à droite   moyenne
     0,72/0,64/0,12 uniforme     4,00    5,42           78 %            n/d
     0,52/0,40/0,05 + écran      4,03    6,20           88 %           51 %
     0,20/0,13/0,02 + écran      3,29    5,34           96 %           62 %

   Deuxième allègement demandé le 24/09/2026. Le gain plafonne ici : plus le
   fond général s'éclaircit, plus l'écran doit s'élargir pour tenir le titre,
   ce qui reprend une partie du terrain. Quatre réglages encore plus clairs,
   testés jusqu'à 0,08/0,05/0,00 avec un écran à 0,93, ne dépassaient pas
   65 % de moyenne tout en donnant un écran beaucoup plus voyant.

   L'écran est plus large et plus haut que le bloc de texte, et s'éteint
   progressivement : il ne doit pas se voir comme une tache. Son centre est
   remonté à 47 % parce que le titre, haut de 264 px, déborde au-dessus du
   milieu du bloc. */
body.home .sde-hero::before {
	background-color: transparent;
	background-image:
		radial-gradient(
			ellipse 52% 68% at 27% 43%,
			rgba(0, 0, 0, 0.86) 0%,
			rgba(0, 0, 0, 0) 100%
		),
		linear-gradient(
			to right,
			rgba(0, 0, 0, 0.20) 0%,
			rgba(0, 0, 0, 0.13) 55%,
			rgba(0, 0, 0, 0.02) 100%
		);
}

/* Sur téléphone, le texte n'occupe plus la gauche mais toute la largeur, et
   l'écran elliptique tomberait à côté. On revient à un voile plat, réglé sur
   la valeur qui tenait avant ce chantier. */
@media (max-width: 1024px) {
	body.home .sde-hero::before {
		background-image: none;
		background-color: rgba(0, 0, 0, 0.6);
	}
}

/* Paragraphe du héros en blanc, et non en `--sde-ondark`.

   C'est ce qui rend le voile plus clair possible. Mesuré le 24/09/2026 sur la
   photo réelle, colonne par colonne, en prenant le 95e centile de luminosité
   de chaque colonne (le pire cas) :

     voile          titre   paragraphe   photo visible à droite
     0,80/0,66/0,42  4,68    3,72 (gris)   54 %
     0,72/0,64/0,12  4,01    4,87 (blanc)  78 %

   Le paragraphe était donc **déjà sous le seuil de 4,5 avant ce changement**,
   en `#D6D6D6`. Passer au blanc le fait remonter à 4,87 tout en laissant
   éclaircir le voile. Le titre, à 80 px, relève du seuil de 3 réservé aux
   grands caractères ; il est à 4,01.

   Réglage limité à l'accueil : les héros des pages intérieures ont leur
   propre voile, plat et plus sombre, et n'ont pas besoin de ce rattrapage. */
body.home .sde-hero .sde-body,
body.home .sde-hero .sde-body p { color: #fff; }

/* Carte de réservation du héros. Sortie de `hero.grid` le 02/09/2026 à la
   demande du client : sur téléphone elle suivait tout de suite les boutons,
   avant que le visiteur ait rien vu d'autre du site. Elle vit maintenant à
   côté du héros, pas dedans, ce qui la fait retomber après lui en flux
   normal sur mobile et tablette, à sa vraie place dans le document.

   Sur bureau, `.sde-hero-wrap` et `.sde-hero-booking` se replacent en
   grille (`display: grid`), le héros et la carte partageant la même case
   (`grid-area: 1 / 1`) pour se superposer, `align-self: center` centrant la
   carte sur la hauteur réelle du héros. Pas de `position: absolute` avec un
   `top` et une marge calculés sur une hauteur mesurée une fois pour toutes :
   un premier essai à 900 px de haut (bureau habituel) donnait une carte
   bien centrée mais beaucoup trop haute sur un écran plus haut, signalé par
   le client avec sa propre capture. La grille centre juste, quelle que soit
   la hauteur du héros, sans rien mesurer ni recalculer. */
.sde-hero-booking {
	margin: 40px auto 0;
	padding: 0 20px;
}

/* SURIMPRESSION SUSPENDUE, 23/09/2026, après la mise en ligne.

   Deux raisons, toutes deux constatées sur la production et invisibles au
   banc, qui n'avait pas de clé Google valide :

   1. L'étape 2 du formulaire (choix du véhicule, carte, résumé de course)
      ne tient pas dans 420 px : les libellés tombent à un mot par ligne et
      le bouton de sélection déborde de sa pastille. Elle n'avait jamais pu
      s'afficher ailleurs qu'en production, faute d'estimation calculable.
   2. `.sde-hero-wrap` recevait `display: flex` d'Elementor (`.e-con.e-flex`,
      deux classes) qui bat notre `.sde-hero-wrap` à une seule. La grille ne
      s'appliquait donc pas, la carte retombait sous le héros. Corrigé
      ci-dessous par `.e-con.sde-hero-wrap`, même remède que pour les cartes
      véhicule.

   La carte reste donc sous le héros, sur toute la largeur du contenu. Le
   formulaire y est lisible à ses deux étapes. La surimpression revient
   quand l'étape 2 saura s'élargir toute seule : il faudra guetter
   `#sivtc-vehicle-with-estimation` et rendre la largeur à la carte à ce
   moment-là, ce qui ne peut se vérifier qu'en production. */
/* La largeur de 420 px vient du gabarit, portée par la variable `--width`
   d'Elementor : elle convenait à la carte posée dans le héros, elle écrase
   l'étape 2. On surcharge la variable plutôt que de reconstruire les 52
   gabarits pour un réglage qu'on remettra le jour où la surimpression
   reviendra.

   Deux classes et non une : Elementor pose `--width` depuis la feuille de la
   page (`post-51.css`), sur `.elementor-element-<id>`, soit la même
   spécificité que `.sde-hero-booking` mais chargée après. Une seule classe
   perdait. */
.e-con.sde-hero-booking {
	max-width: 1240px;
}

@media (min-width: 1025px) {
	/* SURIMPRESSION DU HÉROS, rétablie le 23/09/2026 à la demande du client.

	   Deux corrections par rapport à la première version, toutes deux
	   mesurées sur la production :

	   1. Elementor rend `display: var(--display)` sur ses conteneurs. Notre
	      `display: grid` ne pouvait donc rien : la variable valait `flex` et
	      la propriété la relisait. C'est `--display` qu'il faut poser.
	   2. La largeur vient de `--width`, qu'Elementor écrit depuis
	      `post-51.css` avec trois classes, chargée après le thème. D'où le
	      `!important`, assumé faute de pouvoir gagner en spécificité. */
	.e-con.sde-hero-wrap {
		/* Même `!important` que pour `--width`, et pour la même raison
		   mesurée : `post-51.css` écrit
		   `.elementor-51 .elementor-element.elementor-element-75be321
		   { --display: flex }`, trois classes, chargée après le thème. */
		--display: grid !important;
	}

	.sde-hero-wrap > .sde-hero,
	.sde-hero-wrap > .sde-hero-booking {
		grid-area: 1 / 1;
	}

	.e-con.sde-hero-booking {
		--width: 420px !important;
		/* Elementor pose `position: relative; z-index: 1` sur le conteneur
		   intérieur du héros (`.e-con-inner`), qui couvre 1240x900. La carte
		   partageant la même case de grille et restant à `z-index: auto`,
		   elle passait dessous : les champs d'adresse recevaient bien le
		   pointeur d'après leur position, mais `elementFromPoint` rendait
		   `.e-con-inner`, et on ne pouvait plus écrire dedans. Signalé par
		   le client le 23/09/2026, mesuré, corrigé ici. */
		z-index: 2;
		align-self: center;
		justify-self: end;
		/* Calée sur le bord droit du contenu boxé à 1240 px. */
		margin: 0 calc((100% - 1240px) / 2) 0 0;
		padding: 0;
	}

	/* ÉTAPE 2 : la carte s'élargit mais **reste sur le héros**, demandé par
	   le client le 23/09/2026. Elle basculait sous lui dans la première
	   version, ce qui faisait sauter la page à la section suivante au
	   moment du calcul.

	   La classe est posée par `initEtapesReservation()` dans `sde-ui.js`,
	   qui guette le remplissage de `#sivtc-vehicle-with-estimation`.

	   Sans risque de rognage : le héros est en `min-height: 100dvh`, donc
	   la case de grille grandit si l'étape 2 dépasse la hauteur d'écran, et
	   la page défile normalement. */
	.e-con.sde-hero-booking.sde-hero-booking--large {
		--width: 100% !important;
		max-width: 1240px;
		justify-self: center;
		margin: 0 auto;
		padding: 0 20px;
	}
}

@media (min-width: 1025px) {
	.sde-hero-booking {
		margin: 40px auto 60px;
		padding: 0 20px;
	}

	/* Sans la carte pour se le partager, `hero.txt` reprenait toute la
	   largeur de la rangée (`.sde-col` est `flex: 1 1 0`) et son texte
	   passait sous la carte, maintenant hors du flux. 740 px = 1240 (contenu
	   du héros) − 420 (largeur de la carte) − 80 (espace qui les séparait
	   dans l'ancienne rangée).

	   Le titre porte la même limite. Il vit hors de `hero.grid`, sur toute
	   la largeur du héros (1240 px) : sans elle, à une largeur d'écran
	   moyenne (autour de 1100-1300 px, ni tablette ni bureau large), un
	   titre qui tient sur une seule ligne passe sous la carte. Signalé par
	   le client le 02/09/2026 avec une capture prise sur son propre écran,
	   plus large que celui utilisé pour vérifier ce chantier.

	   `!important` sur le titre seulement : c'est un widget, pas un
	   conteneur, et Elementor pose sur tout widget un `max-width: 100%` à
	   quatre classes de spécificité (`frontend.min.css`), largement devant
	   notre seule classe. `hero.txt` y échappe, c'est un conteneur. */
	.sde-hero-txt { max-width: 740px; }
	.sde-hero-title { max-width: 740px !important; }
}

/* Repère vers la carte de réservation, posé par `sde-ui.js` quelques
   secondes après l'arrivée : sur téléphone comme sur bureau elle n'est plus
   visible au premier écran depuis qu'elle est sortie du héros (demande du
   client, 02/09/2026). Centré en bas du héros, sur `.sde-hero` et non sur
   `.sde-hero-wrap` : sur bureau la carte occupe déjà tout l'espace à droite,
   le repère doit rester sous le texte, pas sous la carte. */
.sde-hero-hint {
	position: absolute;
	left: 50%;
	bottom: 32px;
	transform: translateX(-50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	border-radius: 50px;
	background-color: var(--sde-brand);
	background-image: var(--sde-brand-grain), var(--sde-brand-sheen);
	color: #fff;
	font-family: var(--sde-font-ui);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: -0.02em;
	text-decoration: none;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.6s var(--sde-ease);
}

.sde-hero-hint.is-in {
	opacity: 1;
	pointer-events: auto;
}

.sde-hero-hint__icon {
	flex: none;
	animation: sde-hint-bounce 1.6s ease-in-out infinite;
}

@keyframes sde-hint-bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(4px); }
}

/* Variante « bande » : dégradé bas pour poser un titre */
.sde-band-image {
	position: relative;
	overflow: hidden;
}
.sde-band-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.65) 100%),
		rgba(0, 0, 0, 0.35);
	z-index: 0;
	pointer-events: none;
}
.sde-band-image > .e-con-inner { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   Carte média : image plein cadre, dégradé, titre et flèche en bas
   -------------------------------------------------------------------------- */
.sde-card {
	position: relative;
	overflow: hidden;
	border-radius: var(--sde-radius-card);
	min-height: 400px;
	display: flex;
	align-items: flex-end;
	text-decoration: none;
	background-size: cover;
	background-position: center;
	transition: transform 0.7s var(--sde-ease);
}

/* Le dégradé doit assombrir assez haut pour que le libellé, placé au-dessus
   du titre, reste lisible sur les visuels clairs. Avec un simple 0 → 0.7 il
   descendait à 4,6:1 de contraste sur la carte la plus lumineuse, au ras du
   minimum, et perceptiblement pâle à 14,4 px en blanc translucide. Le palier
   intermédiaire remonte le pire cas à 8,2:1. */
.sde-card::after {
	content: "";
	position: absolute;
	inset: 0;
	/* Voile renforcé le 24/09/2026, en même temps que le passage du libellé
	   au blanc. Le blanc seul ne suffisait pas : mesuré sur la carte Berline
	   de l'accueil (600 x 325, photo de studio claire), le libellé de
	   14,4 px n'atteignait que 3,12 avec l'ancien voile, sous les 4,5 exigés.
	   Le titre, plus gros, passait déjà à 5,57.

	   Avec ce réglage : libellé 4,93 et titre 8,22. Le dégradé commence plus
	   haut (15 % au lieu de 25 %) et monte plus vite, ce qui concentre
	   l'assombrissement là où le texte se pose sans noircir le haut de la
	   photo. */
	background: linear-gradient(
		rgba(0, 0, 0, 0) 15%,
		rgba(0, 0, 0, 0.62) 50%,
		rgba(0, 0, 0, 0.94) 100%
	);
	z-index: 0;
}

/* Le contenu doit passer AU-DESSUS du voile, sinon le dégradé noir se pose
   sur le texte et le blanc vire au gris.

   Le conteneur de texte est un `.e-con`, et Elementor lui impose
   `z-index: var(--z-index)` dans `frontend.min.css`. La variable n'étant pas
   définie, le z-index tombait à `auto` ; à spécificité égale notre règle
   perdait. Le texte se retrouvait donc au même rang que le `::after`, qui est
   le dernier enfant et passe devant en ordre d'arbre.

   Diagnostiqué le 24/09/2026 en forçant le voile en rouge opaque : il
   masquait entièrement les libellés, ce qui a montré le vrai empilement là où
   la lecture des styles calculés ne disait rien d'anormal. Le client avait
   signalé le défaut sur les cartes véhicule de l'accueil.

   On fixe la variable d'Elementor, qui est faite pour cela, et on double d'un
   `!important` pour les éléments qui ne sont pas des conteneurs. */
.sde-card > * {
	position: relative;
	--z-index: 1;
	z-index: 1 !important;
}

.sde-card:hover { transform: scale(1.01); }

/* Deux classes, pas une.

   Le blanc était déjà écrit ici, mais `.sde-card__label` (une classe) et
   `.elementor-widget-text-editor` de la feuille de page (une classe aussi)
   s'égalaient, et celle d'Elementor se charge après le thème : elle
   l'emportait. Le libellé sortait donc en `var(--e-global-color-text)`, soit
   #333, du texte sombre posé sur une photo sombre. Relevé sur les cartes
   véhicule de l'accueil le 24/09/2026, signalé par le client.

   La correction vaut aussi pour les cartes de service, qui utilisent le même
   libellé et souffraient du même défaut.

   Blanc plein et non 90 % : demande explicite du client. Le bas de la carte
   porte un voile à 0,88, le contraste y est largement tenu. */
.sde-card .sde-card__label,
.sde-card .sde-card__label p {
	font-size: 14.4px;
	line-height: 1.6;
	color: #fff;
	margin: 0 0 4px;
}

.sde-card__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-size: 22px;
	line-height: 1.5;
	letter-spacing: -0.02em;
	font-weight: 500;
	color: #fff;
	margin: 0;
}

.sde-card__title .sde-arrow { transition: transform 0.4s var(--sde-ease); }
.sde-card:hover .sde-arrow { transform: translateX(6px); }

.sde-card--tall { min-height: 670px; }
.sde-card--half { min-height: 325px; }

/* Carte véhicule de l'accueil : la photo est une vraie couche `<img>` posée
   sous le dégradé et sous le texte, et non le fond du conteneur, pour pouvoir
   pivoter seule. `.sde-card > .sde-card__img` l'emporte sur `.sde-card > *`
   (qui force `position: relative; z-index: 1`) par sa spécificité. */
.sde-card > .sde-card__img {
	position: absolute;
	inset: 0;
	--z-index: 0;
	z-index: 0 !important;
	margin: 0;
}
.sde-card__img .elementor-widget-container,
.sde-card__img img {
	display: block;
	width: 100%;
	height: 100%;
}
.sde-card__img img { object-fit: cover; }

.sde-card__img picture { display: block; width: 100%; height: 100%; }

/* Sous 768 px la carte véhicule est carrée, comme la photo servie à cet
   endroit (`<image>-carre`) : le cadrage est celui du visuel, sans rognage. */
@media (max-width: 767px) {
	/* `!important` : Elementor écrit un `min-height` propre à l'élément dans le
	   CSS de page, chargé après le thème et plus spécifique. */
	.e-con.sde-card.sde-card--vehicle {
		min-height: 0 !important;
		aspect-ratio: 1 / 1;
		/* Empilée en colonne, la carte porte `flex: 1 1 0` (`flexible()`) :
		   sa hauteur retombait à celle de son contenu et le ratio n'agissait
		   plus. Base automatique, sans croissance. */
		flex: 0 0 auto !important;
		/* Largeur explicite, à spécificité supérieure à `.e-con.sde-col`
		   (`width: auto`) : un ratio calculé sur une largeur provisoire
		   donnait 320×245 en arabe. */
		width: 100% !important;
	}
	/* Voiture centrée dans un carré : le libellé tombe sur son bas de caisse.
	   Le voile démarre plus haut et monte plus vite pour qu'il reste lisible. */
	.sde-card--vehicle::after {
		background: linear-gradient(
			rgba(0, 0, 0, 0) 38%,
			rgba(0, 0, 0, 0.55) 66%,
			rgba(0, 0, 0, 0.9) 100%
		);
	}
}


/* --------------------------------------------------------------------------
   Colonnes séparées par un filet (« Ce que nous vous proposons »)
   -------------------------------------------------------------------------- */
/* La première colonne gardait les 10px de retrait qu'Elementor pose par défaut
   sur tout conteneur, alors que les suivantes étaient remises à zéro puis
   repoussées de 30px après leur filet. Résultat : un décalage de 10px de la
   première colonne, visible dès que la rangée passe sur deux lignes. On remet
   donc toutes les colonnes à zéro avant de traiter les suivantes. */
.sde-divided > .e-con-inner > .e-con,
.sde-divided > .e-con {
	padding-left: 0;
}

.sde-divided > .e-con-inner > .e-con:not(:first-child),
.sde-divided > .e-con:not(:first-child) {
	border-left: 1px solid var(--sde-hairline);
	padding-left: 30px;
}

/* Visuel de véhicule. L'image est dans le flux, pas en fond : elle porte sa
   propre hauteur, ce qui évite les deux pièges rencontrés avec un fond. Une
   hauteur fixe faisait tomber le remplissage à 42 % de la largeur en tablette,
   la boîte s'élargissant sans grandir ; un rapport d'image faisait s'effondrer
   la boîte sur mobile, le `flex-basis: 0` d'Elementor devenant la hauteur dès
   que la rangée s'empile. Le sélecteur porte `.e-con` pour passer devant la
   marge par défaut qu'Elementor pose sur ses conteneurs. */
/* Véhicules de la page « Nos véhicules ».

   Le panneau gris qui encadrait l'image a sauté le 03/09/2026 à la demande
   du client : il enfermait le véhicule sans rien apporter. L'image est
   maintenant posée directement sur le fond de page et porte son propre
   relief, une ombre large et basse qui la fait décoller de la page plutôt
   qu'un contour qui la cerne.

   Les visuels sont des prises de vue studio sur fond crème : l'ombre est
   donc portée par le rectangle de l'image, pas par la découpe du véhicule.
   D'où une ombre volontairement très diffuse et décalée vers le bas, qui se
   lit comme une profondeur et non comme un bord. */
.e-con.sde-vehicle__visual {
	padding: 0;
	justify-content: center;
}

/* La colonne du visuel prend un quart de plus que celle du texte : ces prises
   de vue studio portent une marge crème généreuse autour du véhicule, et à
   colonnes égales la voiture paraissait plus petite qu'elle ne l'est.
   Le réglage vit dans le gabarit (`_flex_grow` dans build/pages.mjs) et non
   ici : Elementor écrit sa propre règle `flex-grow` par élément dans le CSS
   de page, chargé après le thème, qui gagnait contre cette feuille. */

.sde-vehicle__visual img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 14px;
	box-shadow:
		0 2px 6px rgba(24, 22, 20, 0.06),
		0 30px 60px -28px rgba(24, 22, 20, 0.45);
	transition: transform 0.5s var(--sde-ease), box-shadow 0.5s var(--sde-ease);
}

/* Léger relèvement au survol : le même geste que les cartes de service,
   assez discret pour ne pas transformer la page en carrousel. */
.sde-vehicle__visual img:hover {
	transform: translateY(-6px);
	box-shadow:
		0 2px 6px rgba(24, 22, 20, 0.06),
		0 42px 74px -30px rgba(24, 22, 20, 0.5);
}

@media (prefers-reduced-motion: reduce) {
	.sde-vehicle__visual img,
	.sde-vehicle__visual img:hover {
		transition: none;
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Étapes numérotées et chiffres clés
   -------------------------------------------------------------------------- */
.sde-step__number {
	font-size: clamp(32px, 3.5vw, 50px);
	line-height: 1.2;
	letter-spacing: -0.02em;
	font-weight: 500;
	color: #fff;
	margin: 0;
}

.sde-keynumber {
	border-radius: var(--sde-radius-box);
	padding: 30px 20px;
}
.sde-keynumber--accent {
	background-color: var(--sde-brand);
	background-image: var(--sde-brand-sheen);
	color: #fff;
}
.sde-keynumber--light { background: #fff; color: var(--sde-ink); }

/* --------------------------------------------------------------------------
   Cartes blanches (véhicules, témoignages, formulaire)
   -------------------------------------------------------------------------- */
.sde-box {
	background: #fff;
	border-radius: var(--sde-radius-box);
	padding: 40px;
}

.sde-box--floating {
	border-radius: var(--sde-radius-card);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
	padding: 30px;
}

.sde-chip {
	display: inline-block;
	background: var(--sde-surface);
	border-radius: 999px;
	padding: 10px 20px;
	font-size: 14px;
	color: var(--sde-body);
}

/* --------------------------------------------------------------------------
   Bandeau témoignages défilant
   -------------------------------------------------------------------------- */
.sde-marquee-wrap {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.sde-marquee {
	display: flex;
	gap: 20px;
	width: max-content;
	animation: sde-marquee 46s linear infinite;
}

.sde-marquee-wrap:hover .sde-marquee { animation-play-state: paused; }

@keyframes sde-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(calc(-50% - 10px)); }
}

/* --------------------------------------------------------------------------
   Apparition au scroll : reprise du comportement Framer
   -------------------------------------------------------------------------- */
.sde-reveal {
	opacity: 0;
	transform: perspective(1200px) translateY(75px);
	transition:
		opacity 0.8s var(--sde-ease),
		transform 0.8s var(--sde-ease);
	will-change: transform, opacity;
}

.sde-reveal.is-in {
	opacity: 1;
	transform: none;
}

.sde-reveal--d1 { transition-delay: 80ms; }
.sde-reveal--d2 { transition-delay: 160ms; }
.sde-reveal--d3 { transition-delay: 240ms; }

/* --------------------------------------------------------------------------
   Adaptatif
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.sde-section { padding-top: 80px; padding-bottom: 80px; }
	.sde-section--tight { padding-top: 70px; padding-bottom: 70px; }
	.sde-card--tall { min-height: 420px; }
	.sde-card--half { min-height: 280px; }
	.sde-divided > .e-con-inner > .e-con:not(:first-child),
	.sde-divided > .e-con:not(:first-child) {
		border-left: 0;
		padding-left: 0;
	}
}

@media (max-width: 767px) {
	.sde-box { padding: 30px; }
	.sde-card { min-height: 320px; }
}

@media (prefers-reduced-motion: reduce) {
	.sde-reveal { opacity: 1; transform: none; transition: none; }
	.sde-marquee { animation: none; }
	.sde-card, .sde-arrow { transition: none; }
	.sde-hero-hint__icon { animation: none; }
}

/* --------------------------------------------------------------------------
   Pont Elementor
   Les classes ci-dessus sont posées sur l'enveloppe du widget (c'est le seul
   endroit qu'Elementor expose). On répercute la typographie sur l'élément
   réellement rendu à l'intérieur, et on passe devant les styles d'Elementor
   et de hello-elementor en ajoutant .elementor-widget au sélecteur.
   -------------------------------------------------------------------------- */
.elementor-widget.sde-display .elementor-heading-title,
.elementor-widget.sde-h1 .elementor-heading-title,
.elementor-widget.sde-h2 .elementor-heading-title,
.elementor-widget.sde-h3 .elementor-heading-title,
.elementor-widget.sde-eyebrow .elementor-heading-title,
.elementor-widget.sde-card__title .elementor-heading-title,
.elementor-widget.sde-step__number .elementor-heading-title,
/* Ajoutés le 24/09/2026 : sans eux, « TARIF » et « Sur devis » de la carte de
   tarif sortaient en #6EC1E4, le bleu resté dans le kit de l'ancien site.
   Leur couleur était bien déclarée, mais sur l'enveloppe du widget, alors
   qu'Elementor colore l'élément interne par
   `.elementor-widget-heading .elementor-heading-title` : deux classes, contre
   une seule pour l'héritage, donc Elementor l'emportait. Signalé par le
   client sur la page véhicules. */
.elementor-widget.sde-vrate__label .elementor-heading-title,
.elementor-widget.sde-vrate__value .elementor-heading-title,
/* Même défaut, même page : les badges « BERLINE » et « VAN » des fiches. */
.elementor-widget.sde-vfiche__badge .elementor-heading-title {
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
	margin: 0;
}

.elementor-widget.sde-card__label p,
.elementor-widget.sde-body p,
.elementor-widget.sde-caption p {
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
	margin: 0;
}

.elementor-widget.sde-btn--accent .elementor-button {
	background-color: var(--sde-brand);
	background-image: var(--sde-brand-grain), var(--sde-brand-sheen) !important;
	color: #fff;
}
.elementor-widget.sde-btn--accent .elementor-button:hover {
	background-color: var(--sde-brand-hi);
	background-image: var(--sde-brand-grain), var(--sde-brand-sheen-hi) !important;
	color: #fff;
}

.elementor-widget.sde-btn--light .elementor-button {
	background-color: #fff;
	color: var(--sde-ink);
}
.elementor-widget.sde-btn--light .elementor-button:hover {
	background-color: var(--sde-surface);
	color: var(--sde-ink);
}

.elementor-widget.sde-btn--ghost .elementor-button {
	background-color: transparent;
	color: var(--sde-ondark);
	border: 1px solid rgba(255, 255, 255, 0.28);
}
.elementor-widget.sde-btn--ghost .elementor-button:hover {
	background-color: rgba(255, 255, 255, 0.12);
	color: #fff;
}

.elementor-widget.sde-btn .elementor-button {
	padding: 15px 30px;
	border-radius: 50px;
	font-family: var(--sde-font-ui);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.2;
}

/* Un widget ne doit pas imposer sa largeur dans les cartes et les entêtes. */
.elementor-widget.sde-card__title,
.elementor-widget.sde-card__label { width: auto; }

/* --------------------------------------------------------------------------
   Passage devant Elementor sur les conteneurs
   Elementor écrit padding / display / width / gap sur `.e-con` avec la même
   spécificité que nos classes : le résultat dépendrait de l'ordre des
   feuilles. On préfixe `.e-con` pour trancher une fois pour toutes.
   -------------------------------------------------------------------------- */
.e-con.sde-section { padding-top: 125px; padding-bottom: 125px; }
.e-con.sde-section--tight { padding-top: 100px; padding-bottom: 100px; }
.e-con.sde-hero {
	min-height: 100vh;
	min-height: 100dvh;
}

.e-con.sde-card {
	display: flex;
	border-radius: var(--sde-radius-card);
	min-height: 400px;
	overflow: hidden;
}
.e-con.sde-card--tall { min-height: 670px; }
.e-con.sde-card--half { min-height: 325px; }

.e-con.sde-box { padding: 40px; border-radius: var(--sde-radius-box); }
.e-con.sde-box--floating { padding: 30px; border-radius: var(--sde-radius-card); }
.e-con.sde-keynumber { padding: 30px 20px; border-radius: var(--sde-radius-box); }

.e-con.sde-marquee-wrap { overflow: hidden; }
.e-con.sde-marquee { display: flex; width: max-content; gap: 20px; }

@media (max-width: 1024px) {
	.e-con.sde-section { padding-top: 80px; padding-bottom: 80px; }
	.e-con.sde-section--tight { padding-top: 70px; padding-bottom: 70px; }
	.e-con.sde-card--tall { min-height: 420px; }
	.e-con.sde-card--half { min-height: 280px; }
}

@media (max-width: 767px) {
	.e-con.sde-box { padding: 30px; }
	.e-con.sde-card { min-height: 320px; }
}

/* --------------------------------------------------------------------------
   Compléments
   -------------------------------------------------------------------------- */
.sde-muted,
.sde-muted p { color: var(--sde-muted); }

/* Liste à puce cochée : section « Notre approche » */
.sde-checklist { display: flex; flex-direction: column; gap: 15px; }

.sde-checklist__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: clamp(16px, 1.25vw, 18px);
	line-height: 1.7;
	letter-spacing: -0.01em;
	color: var(--sde-body);
}

.sde-check {
	flex: 0 0 auto;
	margin-top: 7px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background-color: var(--sde-brand);
	background-image: var(--sde-brand-sheen);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.sde-check svg { width: 10px; height: 10px; }

/* Carte flottante « Réservation en ligne » */
.sde-stat__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}
.sde-stat__label { font-size: 14.4px; color: var(--sde-muted); margin: 0; }
.sde-stat__value {
	font-size: 22px;
	line-height: 1.5;
	letter-spacing: -0.02em;
	font-weight: 500;
	color: var(--sde-brand);
	margin: 0;
}
.sde-stat__bars {
	display: flex;
	align-items: flex-end;
	gap: 6px;
	height: 100px;
	margin-top: 20px;
	padding: 20px 20px 0;
	border-radius: var(--sde-radius-box);
	background: var(--sde-surface);
}
.sde-stat__bars span {
	flex: 1;
	border-radius: 3px 3px 0 0;
	background-color: var(--sde-brand);
	background-image: var(--sde-brand-sheen);
}

/* Véhicules */

.sde-vehicle__name .elementor-heading-title,
.sde-vehicle__name { text-transform: uppercase; letter-spacing: 0.08em; }

.sde-chips { display: flex; flex-wrap: wrap; gap: 10px; }

.sde-vehicle__list {
	list-style: none;
	margin: 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--sde-hairline);
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 14.4px;
	line-height: 1.8;
	color: var(--sde-body);
}

/* --------------------------------------------------------------------------
   Colonnes de rangée
   Elementor pose `width: 100%` sur tout conteneur, y compris ceux placés côte
   à côte dans une rangée : sans ces deux règles, deux colonnes voisines font
   chacune toute la largeur et débordent. Son réglage « flex-basis » ne permet
   pas de corriger le tir, une valeur 0 étant ignorée à la génération du CSS.

   ATTENTION : `sde-col` et une largeur explicite ne vont pas ensemble. Le
   `width: auto` ci-dessous annule tout `--width` réglé dans le gabarit. Une
   colonne qui doit faire une largeur donnée ne passe donc pas par
   `flexible()`, elle pose `css_classes: 'sde-reveal'` et sa largeur. Ce piège
   a coûté deux fois : la carte du formulaire de contact sur téléphone, puis
   les colonnes visuelles de la page à propos et des six pages de service,
   écrasées à 20 px sur bureau.
   -------------------------------------------------------------------------- */
/* Le `flex-grow` reste réglable depuis le gabarit. Elementor n'écrit pas une
   déclaration `flex-grow` mais une variable `--flex-grow` sur l'élément, que
   notre raccourci `flex: 1 1 0` écrasait en silence : une colonne réglée à
   1,25 dans le gabarit restait à 1 à l'écran. Relevé le 03/09/2026 en
   élargissant la colonne des visuels de véhicule. Les valeurs de repli
   gardent le comportement d'origine pour toutes les colonnes qui ne règlent
   rien. */
.e-con.sde-col {
	flex: var(--flex-grow, 1) var(--flex-shrink, 1) 0;
	width: auto;
	min-width: 0;
}
.e-con.sde-col--hug { flex: 0 0 auto; width: auto; }

/* Le héros des pages intérieures ne fixe plus sa hauteur : elle vaut 100 dvh
   comme celui de l accueil, voir la règle .sde-hero plus haut. */

/* Sur-titre posé sur un visuel sombre : le bleu de marque n'y ressort pas. */
.sde-on-dark .sde-eyebrow--muted { color: rgba(255, 255, 255, 0.7); }

@media (max-width: 1024px) {
}

/* --------------------------------------------------------------------------
   Pages de texte (CGV, mentions légales)
   Tout le texte tient dans un seul widget : le client le reprend d'un bloc
   dans l'éditeur plutôt que paragraphe par paragraphe.
   -------------------------------------------------------------------------- */
.elementor-widget.sde-prose h2 {
	font-size: clamp(20px, 1.6vw, 22px);
	line-height: 1.5;
	letter-spacing: -0.02em;
	font-weight: 500;
	color: var(--sde-brand);
	margin: 30px 0 0;
}

.elementor-widget.sde-prose > *:first-child,
.elementor-widget.sde-prose .elementor-widget-container > *:first-child {
	margin-top: 0;
}

.elementor-widget.sde-prose p,
.elementor-widget.sde-prose li {
	font-size: clamp(16px, 1.25vw, 18px);
	line-height: 1.7;
	letter-spacing: -0.01em;
	color: var(--sde-body);
	margin: 0;
}

.elementor-widget.sde-prose p + p,
.elementor-widget.sde-prose h2 + p,
.elementor-widget.sde-prose ul { margin-top: 22px; }

.elementor-widget.sde-prose ul {
	list-style: disc;
	padding-left: 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* ==========================================================================
   Voiles posés en ::before sur un conteneur Elementor
   ==========================================================================
   Elementor 4.2.4 pose dans `frontend.min.css` :

       :is(.e-con, …)::before {
           content: var(--background-overlay);
           opacity: var(--overlay-opacity);
       }

   `:is()` prend la spécificité de son argument le plus fort, la nôtre à une
   classe ne peut donc pas l'égaler.

   La variable n'étant pas définie, `content` tombe à `none` et le
   pseudo-élément n'est jamais engendré. Notre règle a la même spécificité et
   perdait l'égalité. Résultat : tous nos voiles en `::before` ne peignaient
   rien. Relevé le 23/09/2026 sur l'accueil, `content` calculé à `none` sur
   `.sde-band--accent` comme sur `.sde-hero`, alors que la déclaration était
   bien présente dans la feuille.

   C'est ce qui rendait « Notre fonctionnement » illisible : la photo passait
   à pleine lumière sous du texte blanc. Les `::after` ne sont pas touchés,
   d'où des cartes qui fonctionnaient et des bandes qui non.

   `!important` est ici le remède qui tient : viser une spécificité
   supérieure obligerait à accrocher `.e-con`, que nos classes de bande ne
   portent pas toutes. */
.sde-band--accent::before,
.sde-band--veil::before,
.sde-hero::before { content: "" !important; }

/* --------------------------------------------------------------------------
   Coordonnées de la page contact
   -------------------------------------------------------------------------- */
.sde-contact__list {
	list-style: none;
	margin: 0;
	padding: 30px 0 0;
	border-top: 1px solid var(--sde-hairline);
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sde-contact__list li {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.sde-contact__label {
	font-size: 14.4px;
	line-height: 1.6;
	color: var(--sde-muted);
}

.sde-contact__value {
	font-size: 22px;
	line-height: 1.5;
	letter-spacing: -0.02em;
	font-weight: 500;
	color: var(--sde-ink);
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: color 0.3s var(--sde-ease);
}

a.sde-contact__value:hover { color: var(--sde-brand); }

/* --------------------------------------------------------------------------
   Page véhicules : bloc « Services » sous les pastilles
   -------------------------------------------------------------------------- */
.sde-vehicle__services {
	margin-top: 10px;
	padding-top: 20px;
	border-top: 1px solid var(--sde-hairline);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sde-vehicle__services ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sde-vehicle__services li {
	font-size: clamp(16px, 1.25vw, 18px);
	line-height: 1.7;
	color: var(--sde-body);
}

/* Trois cartes par rangée sur la page d'index des services. */
.e-con.sde-card--tiers {
	flex: 0 0 auto;
	width: calc(33.333% - 14px);
}

@media (max-width: 1024px) {
	.e-con.sde-card--tiers { width: 100%; }
}

/* ==========================================================================
   Formulaire de contact
   Écrit dans le thème, sans extension. Les champs reprennent exactement les
   proportions du formulaire de réservation sivtc, hauteur de 50 px et rayon
   de 10 px, pour que les deux se ressemblent sur la page contact.
   ========================================================================== */
.sde-form {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: var(--sde-radius-card, 15px);
	padding: 30px;
	scroll-margin-top: 110px;
}

.sde-form__grille {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 16px;
}

/* Le nom prend toute la largeur, l'e-mail et le téléphone se partagent la
   ligne suivante : une adresse a besoin de place, un numéro non. */
.sde-form__grille > .sde-champ:first-child { grid-column: 1 / -1; }

.sde-champ {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 18px;
}

.sde-champ label {
	font-family: var(--sde-font-ui, "Inter", sans-serif);
	font-size: 13px;
	font-weight: 500;
	color: var(--sde-ink, #000);
}

/* Mention « (facultatif) ». Elle avait reçu une valeur explicite le
   23/09/2026 parce que `--sde-muted` valait alors #A1A1A1, soit 2,58 sur
   blanc. Le jeton ayant été corrigé depuis, elle le reprend. */
.sde-champ__option {
	font-weight: 400;
	color: var(--sde-muted);
}

.sde-champ input,
.sde-champ textarea {
	width: 100%;
	padding: 0 16px;
	height: 50px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: var(--sde-radius-box, 10px);
	font-family: var(--sde-font, "Figtree", sans-serif);
	font-size: 15px;
	color: var(--sde-ink, #000);
	transition: border-color 0.3s var(--sde-ease, ease), box-shadow 0.3s var(--sde-ease, ease);
}

.sde-champ textarea {
	height: auto;
	padding: 14px 16px;
	line-height: 1.6;
	resize: vertical;
}

.sde-champ input:focus-visible,
.sde-champ textarea:focus-visible {
	outline: none;
	border-color: var(--sde-brand, #002fa7);
	box-shadow: 0 0 0 3px rgba(0, 47, 167, 0.15);
}

/* L'erreur ne se signale pas par la seule couleur : le message écrit la
   double, et il est rattaché au champ pour les lecteurs d'écran. */
.sde-champ--erreur input,
.sde-champ--erreur textarea {
	border-color: #ce2529;
	box-shadow: 0 0 0 3px rgba(206, 37, 41, 0.12);
}

.sde-champ__erreur {
	font-family: var(--sde-font-ui, "Inter", sans-serif);
	font-size: 13px;
	line-height: 1.5;
	color: #ce2529;
}

.sde-form__succes,
.sde-form__echec {
	margin: 0 0 22px;
	padding: 14px 18px;
	border-radius: var(--sde-radius-box, 10px);
	font-family: var(--sde-font-ui, "Inter", sans-serif);
	font-size: 14px;
	line-height: 1.6;
}

.sde-form__succes {
	background: #e8f2ec;
	border: 1px solid #0f6b3f;
	color: #0f6b3f;
}

.sde-form__echec {
	background: #fbeaea;
	border: 1px solid #ce2529;
	color: #a01c20;
}

.sde-form__envoi {
	width: 100%;
	padding: 15px 30px;
	background-color: var(--sde-brand, #2c2c2a);
	background-image: var(--sde-brand-grain), var(--sde-brand-sheen);
	border: 0;
	border-radius: 50px;
	color: #fff;
	font-family: var(--sde-font-ui, "Inter", sans-serif);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.3s var(--sde-ease, ease), transform 0.3s var(--sde-ease, ease);
}

.sde-form__envoi:hover {
	background-color: var(--sde-brand-hi, #5f5e5a);
	background-image: var(--sde-brand-grain), var(--sde-brand-sheen-hi);
	transform: translateY(-2px);
}

.sde-form__envoi:focus-visible {
	outline: 2px solid var(--sde-brand, #2c2c2a);
	outline-offset: 3px;
}

/* Le champ piège. Sorti de la vue sans `display: none` : certains robots
   ignorent ce qui est ainsi masqué, et le piège ne prendrait plus. */
.sde-form__piege {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	clip-path: inset(50%);
}

@media (max-width: 767px) {
	.sde-form { padding: 24px; }
	.sde-form__grille { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.sde-champ input,
	.sde-champ textarea,
	.sde-form__envoi,
	.sde-form__envoi:hover { transition: none; transform: none; }
}

/* Le cadre bleu qui apparaît au clic sur un bouton ou un lien est l'anneau de
   focus du navigateur. Le retirer purement et simplement rendrait le site
   inutilisable au clavier : plus rien n'indiquerait où l'on se trouve en
   naviguant par tabulation, ce qui est un vrai problème d'accessibilité et
   non un détail d'esthétique.

   `:focus:not(:focus-visible)` fait exactement la distinction voulue : le
   navigateur pose `:focus-visible` quand le focus vient du clavier, pas
   quand il vient d'un clic de souris. L'anneau disparaît donc à la souris et
   reste au clavier.

   Demandé par le client le 23/09/2026. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}

/* Et au clavier, un anneau qui suit la marque plutôt que le bleu du système. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--sde-brand);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Neutralisation du kit Elementor de l'ancien site
   --------------------------------------------------------------------------
   Le kit d'origine n'a jamais été remplacé et pose toujours sur le <body> :

       .elementor-kit-5 { background-color: #1B1B1B;
                          color: #D8D6CA;
                          --e-global-color-text: #7A7A7A; }

   Ce couple se tenait sur l'ancien site, entièrement sombre. La refonte pose
   des sections claires par-dessus, si bien que tout widget Elementor auquel
   nos classes typographiques ne sont pas appliquées récupère l'un ou l'autre
   de ces gris sur un fond clair.

   Relevé sur l'accueil le 23/09/2026 : 19 paragraphes à #7A7A7A, contraste
   3,8 sur #F2F2F2 et 4,3 sur blanc, pour 4,5 exigé. Tous sur fond clair.

   On corrige à la racine, pas widget par widget : les couleurs qu'Elementor
   pose explicitement page par page gardent l'avantage, leur sélecteur à
   quatre classes étant bien plus spécifique que celui-ci.

   Le fond suit la même logique. La règle `body` du thème, en haut de ce
   fichier, pose `color: var(--sde-ink)` et aucun fond : elle visait donc un
   fond clair, mais elle ne portait qu'une spécificité de 0,0,1 et perdait
   contre `.elementor-kit-5`. Le `#1B1B1B` de l'ancien site restait en place,
   invisible tant que les sections peignaient le leur. Les pages qui n'en
   peignent pas, véhicules en tête, étaient en réalité restées sombres, et le
   beige hérité les rendait lisibles par accident.

   La dernière règle est le garde-fou du changement : en remplaçant un défaut
   clair par un défaut sombre, on casserait les sections sombres où un texte
   sans couleur propre comptait sur l'héritage. Elle le leur rend. */
body.elementor-kit-5 {
	background-color: #fff;
	color: var(--sde-body);
	--e-global-color-text: var(--sde-body);
}

.sde-on-dark { color: var(--sde-ondark); }


/* ==========================================================================
   Section contact, reprise de la maquette de référence
   ==========================================================================
   Toutes les valeurs ci-dessous (crème du fond, rayons, tailles, graisses,
   interlettrage, écarts) sont relevées au pixel sur la maquette, pas
   estimées. Le balisage, lui, ne change pas de nature : la section reste
   deux conteneurs Elementor côte à côte, le travail est fait ici.
   -------------------------------------------------------------------- */

/* Bande crème. Elementor ne pose aucun fond sur ce conteneur tant que rien
   n'est réglé dans l'éditeur : une règle simple suffit, sans !important. */
.e-con.sde-contact { background-color: #f5f2ec; }

/* Contrastes de la section contact, corrigés le 24/09/2026.

   Les couleurs venaient telles quelles de la maquette de référence. J'en
   avais relevé la géométrie au pixel mais repris les teintes sans les
   mesurer : quatre d'entre elles passaient sous le seuil de 4,5.

   Mesuré sur la page : sur-titre 3,72 sur le crème, libellés des pastilles
   3,31 sur blanc, pastille verte 2,95 sur son fond vert pâle, « (facultatif) »
   2,58 sur blanc.

   Le client demandait du blanc. Ce serait l'inverse du remède : ces quatre
   textes sont tous sur fond clair, en blanc ils disparaîtraient. On assombrit
   donc en gardant la teinte. */

/* --- Colonne de gauche ------------------------------------------------- */

/* Le sur-titre de la maquette est bien plus petit et bien plus espacé que
   celui du reste du site : 12 px contre 20 px, interlettré à 1,8 px. On ne
   touche qu'à l'intérieur de la section. */
.sde-contact .sde-eyebrow {
	font-size: 12px;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: #70614c; /* 5,36 sur le crème, contre 3,72 pour le #8A7A64 d'origine */
}

.sde-contact .sde-h2 {
	font-size: clamp(32px, 3.4vw, 44px);
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 1.1;
}

.sde-contact .sde-body,
.sde-contact .sde-body p {
	font-size: 16px;
	line-height: 28px;
	color: #5a5a5a;
}

/* --- Les quatre coordonnées, en pastilles ------------------------------ */

/* La liste perdait son filet et son retrait : dans la maquette les pastilles
   se suffisent, elles portent déjà le fond blanc. */
.sde-contact .sde-contact__list {
	padding: 0;
	border-top: 0;
	gap: 10px;
}

/* Deux classes, pour repasser devant `.sde-contact__list li` qui empile en
   colonne : ici l'icône et le texte vont côte à côte. */
.sde-contact__list .sde-contact__item {
	flex-direction: row;
	align-items: center;
	gap: 14px;
	min-height: 64px;
	padding: 14px 18px;
	background: #fff;
	border-radius: 14px;
}

.sde-contact__texte {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

/* Le carré noir de l'icône. Le dessin est un masque, pas une image : la
   couleur reste donc réglable d'une seule déclaration. */
.sde-contact__icon {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: #0a0a0a;
	display: grid;
	place-items: center;
}

.sde-contact__icon::before {
	content: "";
	width: 18px;
	height: 18px;
	background: #fff;
	-webkit-mask: var(--sde-icone) center / contain no-repeat;
	mask: var(--sde-icone) center / contain no-repeat;
}

.sde-contact__item--phone { --sde-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); }
.sde-contact__item--email { --sde-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpolyline points='22,7 12,14 2,7'/%3E%3C/svg%3E"); }
.sde-contact__item--area { --sde-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
.sde-contact__item--availability { --sde-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12,6 12,12 16,14'/%3E%3C/svg%3E"); }

.sde-contact .sde-contact__label {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.66px;
	text-transform: uppercase;
	color: #726a5c; /* 5,34 sur blanc, contre 3,31 pour le #968C7D d'origine */
}

.sde-contact .sde-contact__value {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: normal;
	line-height: 1.2;
	color: #0a0a0a;
}

/* Cible tactile du téléphone et de l'e-mail dans les pastilles. Ce sont des
   liens autonomes, pas des liens posés dans une phrase : l'exception de la
   règle AA ne s'applique pas à eux, et ils ne donnaient à cliquer que 18 px.
   Relevé le 24/09/2026. La pastille fait 64 px de haut, le remplissage y tient
   sans rien déplacer. */
.sde-contact a.sde-contact__value {
	display: inline-block;
	padding: 4px 0;
}

/* --- La carte du formulaire -------------------------------------------- */

/* Le remplissage passe par !important : Elementor rend le sien à partir de
   variables (`padding: var(--padding-...)`), qu'une déclaration ordinaire ne
   déloge pas. Même remède que pour la carte du héros. */
.e-con.sde-contact__card {
	padding: 40px !important;
	background: #fff;
	border-radius: 22px;
	box-shadow: 0 4px 32px rgba(0, 0, 0, 0.06);
	align-self: start;
}

/* Trois classes, pas deux. Elementor pose
   `.elementor-widget-heading .elementor-heading-title { color: var(--e-global-color-primary) }`
   dans la feuille de la page : même spécificité que la nôtre, mais chargée
   après, donc elle l'emportait. Le titre et la pastille sortaient en
   #6EC1E4, le bleu resté dans le kit de l'ancien site. */
.sde-contact .sde-contact__cardtitle .elementor-heading-title {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.5px;
	color: var(--sde-ink);
}

/* Pastille de délai de réponse. Le vert est celui de la maquette. */
.sde-contact .sde-contact__badge .elementor-heading-title {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.24px;
	color: #136c34; /* 5,85 sur son fond vert pâle, contre 2,95 pour le #16A34A */
	background: rgba(22, 163, 74, 0.1);
	white-space: nowrap;
}

/* Le formulaire est désormais posé dans la carte : il abandonne son propre
   cadre, qui ferait une carte dans une carte. */
.sde-contact .sde-form {
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}

/* Nom et e-mail se partagent la première ligne, le téléphone prend la
   seconde en entier : c'est la disposition de la maquette. L'ancienne règle
   donnait au contraire toute la largeur au nom, il faut la défaire. */
.sde-contact .sde-form__grille > .sde-champ:first-child { grid-column: auto; }
.sde-contact .sde-form__grille > .sde-champ:nth-child(3) { grid-column: 1 / -1; }

.sde-contact .sde-champ label {
	font-size: 13px;
	font-weight: 500;
	color: #3c3c3c;
}

.sde-contact .sde-champ input,
.sde-contact .sde-champ textarea {
	height: 48px;
	background: #faf9f7;
	border: 0;
	border-radius: 12px;
}

.sde-contact .sde-champ textarea {
	height: auto;
	min-height: 112px;
	padding: 14px 16px;
}

.sde-contact .sde-form__envoi {
	width: 100%;
	height: 50px;
	border-radius: 999px;
	background: #0a0a0a;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
}

/* En dessous de 1 025 px la section passe en colonne, et `align-self` change
   alors d'axe : posé à `start` pour le bureau, où il empêche la carte de
   s'étirer sur toute la hauteur, il l'empêchait en colonne de s'étirer sur
   toute la **largeur**.

   Mesuré le 24/09/2026 sur un écran de 375 px : la carte faisait 286 px avec
   10 px à gauche et 79 à droite, pendant que la colonne des coordonnées
   occupait bien ses 355 px. C'est ce décalage que le client a vu.

   `width: 100%` est nécessaire en plus : notre propre règle `.e-con.sde-col`
   pose `width: auto`, ce qui laissait la carte se dimensionner sur son
   contenu. */
@media (max-width: 1024px) {
	.e-con.sde-contact__card {
		align-self: stretch;
		width: 100%;
	}
}

@media (max-width: 767px) {
	.e-con.sde-contact__card { padding: 24px !important; }
	.sde-contact__list .sde-contact__item { padding: 12px 14px; }
}

/* --------------------------------------------------------------------------
   Fiche véhicule
   --------------------------------------------------------------------------
   Reprise du gabarit de référence fourni par le client le 23/09/2026
   (roventra.framer.website, page « car-details »), relevée au navigateur à
   1 426 px de large : conteneur 1 100, en-tête sur deux colonnes, carte de
   tarif de 300 x 250 à droite, puis une galerie de trois photos, une de
   1 100 x 560 au-dessus de deux de 544 x 320, gouttière de 12 px, rayons de
   20 px en haut et 16 px en bas.

   Deux fiches sont produites, une par véhicule de `content/*.mjs`. */

.sde-vfiche__badge {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sde-body);
	margin: 0;
}

.sde-vfiche__tagline { max-width: 62ch; }

/* Carte de tarif. Le rayon de 20 px est celui du gabarit de référence et non
   le `--sde-radius-card` du site, qui vaut 15 : le client a demandé le
   report exact de ce bloc. */
.e-con.sde-vrate {
	background: #fff;
	border-radius: 20px;
	padding: 28px;
	box-shadow: 0 4px 28px rgba(0, 0, 0, 0.07);
	align-self: flex-start;
}

.sde-vrate__label {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sde-body);
	margin: 0;
}

.sde-vrate__value {
	font-size: 26px;
	line-height: 1.2;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--sde-ink);
	margin: 0;
}

.sde-vrate__btn .elementor-button {
	width: 100%;
	justify-content: center;
}

.sde-vrate__note,
.sde-vrate__note p {
	font-size: 12px;
	line-height: 1.5;
	color: var(--sde-body);
	text-align: center;
}

/* Galerie. Elementor rend l'affichage du conteneur par la variable
   `--display`, une déclaration `display:` ordinaire resterait sans effet
   (voir la même précaution sur `.sde-hero-wrap`). */
.e-con.sde-vgallery {
	--display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.sde-vgallery > .elementor-element:first-child { grid-column: 1 / -1; }

.sde-vgallery .elementor-widget-image,
.sde-vgallery .elementor-widget-container { height: 100%; }

.sde-vgallery > .elementor-element img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 16px;
}

.sde-vgallery > .elementor-element:first-child img {
	aspect-ratio: 1100 / 560;
	border-radius: 20px;
}

.sde-vgallery > .elementor-element:not(:first-child) img { aspect-ratio: 544 / 320; }

/* Sur téléphone la galerie s'empile : à deux colonnes, les deux photos du bas
   tombaient sous 160 px de large, le véhicule n'y était plus lisible. */
@media (max-width: 767px) {
	.e-con.sde-vgallery { grid-template-columns: 1fr; }
	.sde-vgallery > .elementor-element:not(:first-child) img { aspect-ratio: 16 / 10; }
}

/* --------------------------------------------------------------------------
   Second recours du formulaire de contact : WhatsApp
   --------------------------------------------------------------------------
   Repris du gabarit de référence (roventra.framer.website, section contact),
   demandé par le client le 23/09/2026 : sous le bouton d'envoi, un séparateur
   « ou » puis un second bouton de même forme.

   Le bloc n'est rendu que si sde_whatsapp_href() retourne une adresse, voir
   inc/contact-form.php : décocher l'affichage WhatsApp dans la
   personnalisation le fait disparaître, séparateur compris. */
.sde-form__ou {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 4px 0;
	font-size: 12px;
	color: var(--sde-body);
}
.sde-form__ou::before,
.sde-form__ou::after {
	content: "";
	flex: 1;
	height: 1px;
	background: rgba(0, 0, 0, 0.1);
}

.sde-form__whatsapp {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 50px;
	border-radius: 999px;
	background: #0a0a0a;
	color: #fff;
	font-family: var(--sde-font-ui, "Inter", sans-serif);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.02em;
	/* Le soulignement des liens de texte courant n'a rien à faire sur un
	   bouton : la forme suffit à dire qu'on peut cliquer. */
	text-decoration: none;
	transition: background-color 0.3s var(--sde-ease, ease);
}
.sde-form__whatsapp:hover,
.sde-form__whatsapp:focus-visible {
	background: var(--sde-brand-hi, #5f5e5a);
	color: #fff;
}

/* ==========================================================================
   Services : panneaux dépliants
   ==========================================================================
   Reprise du gabarit de référence fourni par le client le 23/09/2026. Une
   rangée de six visuels : celui qui est ouvert occupe la place restante, les
   autres se replient en bandes étroites ne portant que leur numéro.

   Tout se fait en CSS, sans JavaScript. Le dépli repose sur `flex-basis` et
   `flex-grow`, qui s'animent, et non sur `width`, qui obligerait à figer des
   largeurs en pixels et casserait dès que le nombre de services change.
   -------------------------------------------------------------------- */
.sde-panneaux {
	display: flex;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
	height: 520px;
}

.sde-panneau {
	position: relative;
	flex: 0 0 96px;
	min-width: 0;
	border-radius: 10px;
	overflow: hidden;
	transition:
		flex-grow 0.6s var(--sde-ease, ease),
		flex-basis 0.6s var(--sde-ease, ease);
}

/* Au repos le premier panneau est ouvert : la rangée doit montrer quelque
   chose sans attendre un geste du visiteur. */
.sde-panneau:first-child { flex: 1 1 0; }

/* Le premier panneau ne se referme que si le curseur est sur un AUTRE
   panneau, d'où le `:not(:first-child)` dans le `:has()`.

   La version précédente disait « dès que la rangée est survolée », en
   comptant sur l'ordre d'écriture pour rattraper le cas du premier panneau.
   Mauvais compte : `.sde-panneaux:hover .sde-panneau:first-child` vaut 0,4,0
   et `.sde-panneaux .sde-panneau:hover` seulement 0,3,0, si bien que le
   premier panneau se refermait sous le curseur au lieu de rester ouvert.
   Signalé par le client le 24/09/2026.

   Poser la condition dans `:has()` supprime le conflit au lieu de l'arbitrer :
   les deux règles ne peuvent plus s'appliquer en même temps.

   L'alternative survol/focus vit à l'intérieur du `:has()`, via `:is()`, et
   non en deux sélecteurs séparés par une virgule. Écrite en deux sélecteurs,
   la première branche s'arrêtait au conteneur et ne descendait pas jusqu'au
   premier panneau : la règle ne s'appliquait qu'au focus clavier, et à la
   souris les deux panneaux se partageaient la largeur à 403 px chacun. */
.sde-panneaux:has(.sde-panneau:not(:first-child):is(:hover, :focus-within)) .sde-panneau:first-child { flex: 0 0 96px; }
.sde-panneaux .sde-panneau:hover,
.sde-panneaux .sde-panneau:focus-within { flex: 1 1 0; }

/* `:visited` explicite, et pas seulement l'état par défaut.

   Le panneau est un lien. Sur un lien déjà visité, le navigateur remplace la
   couleur par celle des liens visités, et les descendants qui n'ont pas de
   couleur propre en héritent. Signalé par le client le 24/09/2026 : le titre
   « Gares » sortait en bleu après une visite de la page, alors que la
   description restait blanche, parce qu'elle a une couleur explicite et lui
   non.

   À noter pour les diagnostics futurs : `getComputedStyle` ne sert à rien
   ici. Les navigateurs renvoient délibérément la couleur de l'état non
   visité, par protection de la vie privée. La mesure annonçait donc du blanc
   sur les six titres, y compris celui qui s'affichait en bleu. */
.sde-panneau__lien,
.sde-panneau__lien:visited {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	color: #fff;
	text-decoration: none;
}

/* Deux classes, pas une. Elementor pose `.elementor img { height: auto }`,
   soit une classe et un élément : à une seule classe notre `height: 100%`
   perdait, et l'image retombait à sa hauteur naturelle (96 x 65 au lieu de
   96 x 520), d'où des bandes à moitié vides sous les panneaux repliés. */
.sde-panneau .sde-panneau__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

/* Voile. Les légendes sont blanches et les photos ont des zones claires :
   sans lui, le texte passerait par endroits sous le seuil de lisibilité. */
.sde-panneau__lien::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.78) 0%,
		rgba(0, 0, 0, 0.18) 55%,
		rgba(0, 0, 0, 0.38) 100%
	);
}

/* Double cadrage. Le panneau ouvert fait 710 x 520 (rapport 1,37), replié
   96 x 520 (rapport 0,18) : aucun cadrage unique ne sert les deux. Quand le
   service dispose d'un visuel vertical, il tient la bande repliée et laisse
   l'horizontal au panneau ouvert. Les règles sont enfermées dans
   `.sde-panneau--deux` : sans cette garde, un panneau à visuel unique
   verrait sa seule image passer à l'opacité zéro et resterait vide. */
.sde-panneau--deux .sde-panneau__img {
	transition: opacity 0.45s var(--sde-ease, ease);
}

.sde-panneau--deux .sde-panneau__img--large { opacity: 0; }
.sde-panneau--deux .sde-panneau__img--etroit { opacity: 1; }

.sde-panneau--deux:first-child .sde-panneau__img--large { opacity: 1; }
.sde-panneau--deux:first-child .sde-panneau__img--etroit { opacity: 0; }

.sde-panneaux:has(.sde-panneau:not(:first-child):is(:hover, :focus-within)) .sde-panneau--deux:first-child .sde-panneau__img--large { opacity: 0; }
.sde-panneaux:has(.sde-panneau:not(:first-child):is(:hover, :focus-within)) .sde-panneau--deux:first-child .sde-panneau__img--etroit { opacity: 1; }

.sde-panneaux .sde-panneau--deux:hover .sde-panneau__img--large,
.sde-panneaux .sde-panneau--deux:focus-within .sde-panneau__img--large { opacity: 1; }
.sde-panneaux .sde-panneau--deux:hover .sde-panneau__img--etroit,
.sde-panneaux .sde-panneau--deux:focus-within .sde-panneau__img--etroit { opacity: 0; }

.sde-panneau__num,
.sde-panneau__corps { position: relative; z-index: 1; }

/* Propriétés logiques : en arabe la page passe en RTL et le numéro doit
   suivre le bord de début, pas rester à gauche. */
.sde-panneau__num {
	position: absolute;
	top: 20px;
	inset-inline-start: 20px;
	font-family: var(--sde-font-ui, "Inter", sans-serif);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.85);
}

/* La légende attend que le panneau soit large avant de se montrer.

   Sans ce délai, elle apparaissait pendant que la largeur s'animait encore :
   pendant un instant le texte se retrouvait dans une bande de 96 px et se
   mettait en colonne, une lettre par ligne. La largeur met 0,6 s, l'apparition
   part donc à 0,35 s. À la fermeture, aucun délai : la légende doit
   disparaître tout de suite, avant que le panneau ne se rétrécisse. */
.sde-panneau__corps {
	position: absolute;
	inset-inline: 20px;
	bottom: 20px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	opacity: 0;
	transition: opacity 0.2s var(--sde-ease, ease) 0s;
}

/* La légende suit exactement le même enchaînement que le dépli. */
.sde-panneau:first-child .sde-panneau__corps {
	opacity: 1;
	transition-delay: 0.35s;
}
.sde-panneaux:has(.sde-panneau:not(:first-child):is(:hover, :focus-within)) .sde-panneau:first-child .sde-panneau__corps {
	opacity: 0;
	transition-delay: 0s;
}
.sde-panneaux .sde-panneau:hover .sde-panneau__corps,
.sde-panneaux .sde-panneau:focus-within .sde-panneau__corps {
	opacity: 1;
	transition-delay: 0.35s;
}

/* Cadrage horizontal, service par service.

   Replié, le panneau ne montre que 96 px de large sur 520 de haut : d'une
   image en paysage, il ne reste qu'une tranche de 12 % de la largeur. Centrée
   par défaut, cette tranche tombe souvent à côté du véhicule.

   Les valeurs viennent d'un relevé fait le 23/09/2026 : pour chaque image, on
   cherche la fenêtre de la largeur visible qui contient le plus de pixels
   sombres dans la bande où vivent les véhicules, puis on convertit ce centre
   en `object-position`. Chaque résultat a ensuite été rendu et regardé, et
   `longue-distance` a été écarté : le calcul proposait 71 %, qui ne donnait
   qu'une masse sombre, là où le cadrage centré montre le van en entier. Le
   calcul propose, l'œil tranche.

   Le cadrage vaut aussi pour le panneau ouvert, mais sans conséquence : à
   710 px de large il ne reste que 64 px de jeu, vérifié en rendu.

   `aeroports` et `mise-a-disposition` ne sont pas listés : ils ont une
   variante verticale qui tient la bande repliée, leur paysage n'est vu
   qu'ouvert, et un panneau ouvert montre 710 px sur 938, soit un recadrage
   trop faible pour que le réglage compte.

   Le 43 % qui figurait ici pour `mise-a-disposition` a été retiré le
   24/09/2026 : il avait été calculé sur la photo de vignoble, remplacée
   depuis par une scène urbaine. Un cadrage calculé sur une image ne vaut
   rien sur une autre. */
.sde-panneau--gares .sde-panneau__img--large { object-position: 14% center; }
.sde-panneau--professionnel .sde-panneau__img--large { object-position: 74% center; }
.sde-panneau--tourisme .sde-panneau__img--large { object-position: 52% center; }

/* Écarté du calcul, laissé au centre à dessein : voir la note ci-dessus. */
.sde-panneau--longue-distance .sde-panneau__img--large { object-position: 50% center; }

/* Couleur propre et non héritée : c'est ce qui met le titre hors d'atteinte
   de l'état visité du lien, quelle que soit la règle du navigateur. */
.sde-panneau__titre {
	font-size: 22px;
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.3;
	color: #fff;
}

.sde-panneau__texte {
	font-size: 14.4px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82);
}

/* Sur tablette et téléphone il n'y a pas de survol : les panneaux
   s'empilent, tous ouverts. Un dépli au toucher obligerait à toucher une
   fois pour ouvrir et une seconde pour suivre le lien, ce qui se retourne
   contre le visiteur. */
@media (max-width: 1024px) {
	.sde-panneaux {
		flex-direction: column;
		height: auto;
		gap: 12px;
	}

	.sde-panneau,
	.sde-panneau:first-child,
	.sde-panneaux:has(.sde-panneau:not(:first-child):is(:hover, :focus-within)) .sde-panneau:first-child,
	.sde-panneaux .sde-panneau:hover,
	.sde-panneaux .sde-panneau:focus-within {
		flex: 0 0 auto;
		height: 220px;
	}

	.sde-panneau__corps,
	.sde-panneau:first-child .sde-panneau__corps,
	.sde-panneaux:has(.sde-panneau:not(:first-child):is(:hover, :focus-within)) .sde-panneau:first-child .sde-panneau__corps { opacity: 1; }

	/* Empilés, les panneaux sont larges (355 x 220) : c'est le cadrage
	   horizontal qui convient, le vertical se retire. */
	.sde-panneau--deux .sde-panneau__img--large,
	.sde-panneau--deux:first-child .sde-panneau__img--large,
	.sde-panneaux:has(.sde-panneau:not(:first-child):is(:hover, :focus-within)) .sde-panneau--deux:first-child .sde-panneau__img--large { opacity: 1; }

	.sde-panneau--deux .sde-panneau__img--etroit,
	.sde-panneau--deux:first-child .sde-panneau__img--etroit,
	.sde-panneaux:has(.sde-panneau:not(:first-child):is(:hover, :focus-within)) .sde-panneau--deux:first-child .sde-panneau__img--etroit { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.sde-panneau,
	.sde-panneau__corps { transition: none; }
}

/* Lien d'évitement. Il vient de hello-elementor, qui le laisse au rose
   #CC3366 : 3,47 de contraste sur l'en-tête sombre, sous le seuil. Invisible
   tant qu'on ne navigue pas au clavier, mais c'est précisément là qu'il doit
   être lisible. Mis aux couleurs du site, mesuré à 12,6. */
.skip-link,
.skip-link:focus,
.skip-link:visited {
	background: #fff !important;
	color: var(--sde-ink) !important;
	text-decoration: underline;
}

/* ==========================================================================
   Kit Elementor de l'ancien site, neutralisé à la source
   ==========================================================================
   Le kit d'origine est toujours actif et pose sur le <body> ses couleurs et
   ses polices globales. Les feuilles de page d'Elementor s'en servent pour
   tout widget de titre ou de texte :

       .elementor-widget-heading .elementor-heading-title {
           color: var(--e-global-color-primary); }
       .elementor-widget-text-editor {
           font-family: var(--e-global-typography-text-font-family), …;
           color: var(--e-global-color-text); }

   Ces règles ont la même spécificité que les nôtres et se chargent après :
   elles gagnent l'égalité. Corrigé composant par composant le 23 et le
   24/09/2026, quatre fois de suite (titre et pastille du contact, libellés
   des cartes véhicule, carte de tarif, badges des fiches). Chaque nouveau
   widget serait retombé dans le même piège.

   Redéfinir les variables du kit règle la famille entière d'un coup, sans
   toucher à la spécificité : les règles d'Elementor continuent de gagner,
   mais elles pointent désormais vers nos valeurs.

   Relevé qui a motivé ce correctif, sur l'accueil le 24/09/2026 :
   87 éléments en Figtree, 17 en Inter, et **24 en Roboto**. Ces 24 étaient
   le texte courant du site, accroche du héros comprise.

   `--e-global-color-accent` (#61CE70) n'est pas touché : il ne colore aucun
   texte, il sert de fond à des boutons qui portent déjà nos couleurs. */
body.elementor-kit-5 {
	--e-global-color-primary: var(--sde-ink);
	--e-global-color-secondary: var(--sde-brand);
	--e-global-color-text: var(--sde-body);
	--e-global-typography-primary-font-family: "Figtree";
	--e-global-typography-secondary-font-family: "Figtree";
	--e-global-typography-text-font-family: "Figtree";
	--e-global-typography-accent-font-family: "Inter";
}