/*
 * Cyprès des Villes — feuille du thème enfant.
 *
 * Source : Design System « Le Relevé » (02.MAQUETTES). Les valeurs viennent du
 * bloc :root de la maquette ; ne pas les écrire en dur ailleurs.
 *
 * Sommaire
 *   01. Jetons
 *   02. Base
 *   03. Utilitaires
 *   04. En-tête
 *   05. Hero
 *   06. Figure
 *   07. Défilé
 *   08. Sections
 *   09. Quatre temps
 *   10. Cartouche
 *   11. Bouton
 *   12. Pied de page et barre mobile
 *   13. Animations
 */

/* 01. Jetons ============================================================== */

html {
	font-size: clamp(14px, 0.4167vw + 8px, 16px);
	scroll-padding-top: 5.5rem;
}

:root {
	/* Couleurs */
	--cdv-paper: #EDEAE3;
	--cdv-paper-card: #FCFBF8;
	--cdv-ink: #22251F;
	--cdv-ink-80: rgba(34, 37, 31, .80);
	/* Alias historiques : les petits textes partagent un contraste accessible. */
	--cdv-ink-muted: rgba(34, 37, 31, .68);
	--cdv-ink-55: var(--cdv-ink-muted);
	--cdv-ink-45: var(--cdv-ink-muted);
	--cdv-line: rgba(34, 37, 31, .18);
	--cdv-line-20: rgba(34, 37, 31, .2);
	--cdv-line-25: rgba(34, 37, 31, .25);
	--cdv-line-30: rgba(34, 37, 31, .3);
	--cdv-line-40: rgba(34, 37, 31, .4);
	/* Les deux beiges de filet vivent dans le Kit depuis D-033. Ces valeurs sont
	   les replis ; le branchement sur le Kit se fait plus bas, sur `body`. */
	--cdv-line-strong: rgba(201, 193, 177, .55);
	--cdv-line-strong-28: rgba(201, 193, 177, .4);
	--cdv-green: #B2BF6A;
	--cdv-green-text: #8C9360;
	--cdv-green-medium: #9EAA6B;
	--cdv-white: #fff;

	/* Typographies */
	--cdv-font-display: 'Archivo', system-ui, sans-serif;
	--cdv-font-mono: 'IBM Plex Mono', ui-monospace, monospace;

	/* Échelle
	   Six de ces jetons sont lus par le Kit Elementor lui-même — `--cdv-fs-h1`,
	   `-h2`, `-h3`, `-body`, `-btn` et `--cdv-content-max` : les typographies
	   globales sont saisies dans l'éditeur sous la forme `var(--cdv-fs-h1)`.
	   Le flux n'est donc pas à sens unique, contrairement à ce que dit D-033 :
	   supprimer l'un de ces six jetons casse la typographie du site, même
	   lorsque plus aucune règle du thème ne le consomme. Vérifié : sans
	   `--cdv-fs-h1`, le H1 retombe à 14 px. */
	/* Un `clamp()` par rôle, aucune surcharge par palier : la taille varie en
	   continu au lieu de sauter d'un point de rupture à l'autre (D-044).

	   Recalibrés le 8 septembre 2026 après relevé par palier (D-046). Le terme
	   médian était un `vw` seul et la borne haute un `rem` : deux fuites qui se
	   cumulaient sous 1440 px, où la racine est plafonnée à 14 px. Un titre
	   perdait donc 12,5 % de sa borne haute *et* toute la pente — mesuré à
	   45,6 px à 1366 contre 54,4 au-delà de 1920, pour le même rôle. D'où :
	     · borne haute en pixels — c'est un plafond absolu, il n'a pas à suivre
	       une racine qui, elle, se rétracte : les valeurs reprennent au pixel
	       près celles servies aujourd'hui au-delà de 2200 px (96 / 65,6 / 54,4),
	       le grand écran ne bouge pas ;
	     · terme médian en `rem + vw`, calé pour que la valeur mobile à 390 px
	       reste exactement celle d'aujourd'hui (33,6 / 28 / 25,2).
	   Entre les deux, la bande 768 → 1440 remonte de 13 à 40 % — c'est là que
	   les titres étaient jugés trop petits, et là seulement que ça change.

	   `--cdv-fs-h1` et `--cdv-fs-h2` sont aussi saisis dans le Kit (« Titres »,
	   « Intertitres ») : les deux côtés du pont disent la même chose.
	   `--cdv-fs-h3` sert le style H3 par défaut du Kit et n'a pas d'équivalent
	   dans les typographies globales — la typographie « Heading/H2/S » du Kit
	   (231bc1b), qui porte les titres de section, est un quatrième rôle qui
	   vit dans le Kit seul. */
	--cdv-fs-h1: clamp(2.4rem, 0.84rem + 5.62vw, 96px);
	--cdv-fs-h2: clamp(2rem, 1.08rem + 3.29vw, 65.6px);
	--cdv-fs-h3: clamp(1.71rem, 2.3vw, 2.14rem);
	/* `--cdv-fs-lead` a été retiré le 6 septembre 2026 : il servait `.cdv-lead`
	   et `.cdv-lead-block`, retirées le 5. Mesuré sur le rendu servi — aucune
	   règle, aucun contrôle Elementor et aucun champ du Kit ne le lisait. */
	/* En `rem` : la racine vaut 14 px de 320 à 1920, puis monte jusqu'à 16 —
	   ces cinq jetons grandissent donc avec elle au-delà de 1920 px, ce que les
	   anciennes valeurs en pixels ne faisaient pas. Voulu : le palier
	   « widescreen » du Kit commence à 2200. */
	--cdv-fs-body: clamp(1.21rem, 1.3vw, 1.29rem);
	--cdv-fs-label: 0.8rem;
	--cdv-lh-body: 1.62;
	--cdv-fs-caption: 0.72rem;
	--cdv-fs-btn: 0.93rem;

	/* Espacements
	   Une seule gouttière, `--cdv-l-gutter`, pour tous les blocs de premier
	   niveau — en-tête, hero, illustration, sections, cartouche, pied de page :
	   une seule largeur de contenu sur toute la page (D-029).
	   Un seul rythme vertical, deux paliers dérivés de `--cdv-u-section-space` :
	   `--cdv-section` (la moitié) entre deux blocs, `--cdv-figure-space` et
	   `--cdv-body-space` (le quart) pour les liaisons internes — D-030.

	   Relevé du 6 septembre 2026, sur le rendu servi en production (D-035) —
	   aucune règle de cette feuille ne consomme ces jetons, c'est la base qui
	   les lit dans ses contrôles Elementor :
	     lus par la base  : --cdv-l-gutter, --cdv-u-section-space, --cdv-col-gap,
	                        --cdv-card-pad, --cdv-cell-pad, --cdv-row-pad,
	                        --cdv-hero-gap, --cdv-button-pad, --cdv-max,
	                        --cdv-content-max
	     lus par personne : --cdv-section, --cdv-stack, --cdv-figure-space,
	                        --cdv-body-space, --cdv-header-meta-gap
	   Les cinq derniers restent définis : ils portent le vocabulaire de D-030 et
	   se saisissent dans l'éditeur au besoin. Ne pas les supprimer sans avoir
	   refait la mesure — un jeton lu et absent casse silencieusement (D-036). */
	/* 93 rem jusqu'à 1920 px — soit exactement ce qui était servi avant le
	   8 septembre 2026 : le plancher du `clamp()` gagne sur toute cette plage,
	   rien ne bouge en deçà. Au-delà, la mesure suivait la racine, qui plafonne
	   à 16 px : le contenu restait figé à 1488 px pendant que la fenêtre gagnait
	   900 px, et les marges latérales enflaient. Le terme médian reprend la main
	   à partir de 1920 px et rend au contenu une part de cette largeur — 1580 px
	   à 2200, 1650 à 2400 — sans jamais dépasser 110 rem (D-046). */
	--cdv-content-max: clamp(93rem, 810px + 35vw, 110rem);
	--cdv-l-gutter: clamp(1.25rem, 5vw, 7.5rem);
	--cdv-u-section-space: 13vh;
	--cdv-section: calc(var(--cdv-u-section-space) / 2);
	--cdv-col-gap: clamp(2rem, 8vw, 12rem);
	--cdv-stack: 22px;
	--cdv-card-pad: clamp(5rem, 6.5vw, 7rem);
	--cdv-cell-pad: clamp(1.6rem, 2.2vw, 1.8rem);
	--cdv-row-pad: clamp(1.15rem, 1.25vw, 1.20rem);
	--cdv-hero-gap: calc(var(--cdv-u-section-space) / 2);
	--cdv-figure-space: calc(var(--cdv-u-section-space) / 4);
	--cdv-body-space: calc(var(--cdv-u-section-space) / 4);
	--cdv-button-pad: clamp(1.6rem, 2.6vw, 2rem);
	/* Écart interne de l'en-tête entre statut, téléphone et e-mail : plus serré
	   que le gap logo ↔ groupe, qui reste sur l'échelle générale. */
	--cdv-header-meta-gap: clamp(8px, 1.2vw, 18px);

	/* Structure */
	--cdv-max: var(--cdv-content-max);
	/* Mesure du bloc centré de « 02 Présentation ». Le paragraphe n'a plus de
	   mesure propre depuis qu'il partage la colonne du titre : sa largeur de
	   lecture se règle sur le widget, dans Elementor. */
	--cdv-measure-titre: 900px;
	--cdv-border: 1px;

	/* Mouvement */
	--cdv-t-fast: 200ms;
	--cdv-t-base: 300ms;
	--cdv-t-slow: 800ms;
	--cdv-anim-duree: 700ms;
	--cdv-anim-decalage: 40ms; /* décalage d'un mot au suivant */
	--cdv-ease: cubic-bezier(.2, .7, .2, 1);
}

@media (max-width: 1366px) {
	:root {
		--cdv-l-gutter: clamp(1rem, 4vw, 6rem);
		--cdv-col-gap: clamp(1.5rem, 6vw, 10rem);
		--cdv-u-section-space: 15vh;
		/* Plus de surcharge de `--cdv-fs-body` ici : son `clamp()` général
		   donne déjà ~17 px sous 1366, la ligne ne faisait que le répéter. */
		/* La mesure est plus courte ici : le même interlignage qu'en grand
		   écran y paraissait trop aéré. */
		--cdv-lh-body: 1.52;
	}
}

@media (max-width: 1024px) {
	:root {
		--cdv-u-section-space: 8vh;
	}
}

@media (max-width: 767px) {
	:root {
		/* Le corps de texte se resserre en mobile : mesure plus courte, donc
		   interlignage plus court aussi. */
		--cdv-fs-body: clamp(1.15rem, 1.25vw, 1.25rem);
		--cdv-lh-body: 1.4;
		--cdv-u-section-space: 7.2vh;
	}
}

/* 02. Base ================================================================ */

body {
	/* Le pont, et le seul (D-033). Le Kit décide, cette feuille consomme : ce
	   bloc est le seul endroit du thème qui lise une variable Elementor.
	   Les replis ne servent qu'à un rendu sans Elementor et doivent recopier la
	   valeur réelle du Kit — un repli qui ment est pire que pas de repli.
	   Pont sur body : les variables du Kit ne sont pas définies sur :root. */
	--cdv-paper: var(--e-global-color-secondary, #EDEAE3);
	--cdv-paper-card: var(--e-global-color-cdvpapc, #FCFBF8);
	--cdv-ink: var(--e-global-color-primary, #22251F);
	--cdv-ink-80: var(--e-global-color-text, #22251FDE);
	--cdv-ink-55: var(--e-global-color-cdvlibe, #22251FB8);
	--cdv-ink-45: var(--e-global-color-cdvment, #22251FA6);
	--cdv-green: var(--e-global-color-accent, #B2BF6A);
	--cdv-green-text: var(--e-global-color-cdvgrnt, #8C9360);
	--cdv-green-medium: var(--e-global-color-e7663d4, #9EAA6B);
	--cdv-line-strong: var(--e-global-color-cdvfilt, rgba(201, 193, 177, .55));
	--cdv-line-strong-28: var(--e-global-color-cdvfili, rgba(201, 193, 177, .4));
	--cdv-fs-h2: var(--e-global-typography-secondary-font-size, clamp(2rem, 1.08rem + 3.29vw, 65.6px));
	--cdv-fs-label: var(--e-global-typography-accent-font-size, 0.8rem);
	--cdv-font-display: var(--e-global-typography-primary-font-family, 'Archivo'), system-ui, sans-serif;
	--cdv-font-mono: var(--e-global-typography-accent-font-family, 'IBM Plex Mono'), ui-monospace, monospace;
	background: var(--cdv-paper);
	color: var(--cdv-ink);
	font-family: var(--cdv-font-display);
	-webkit-font-smoothing: antialiased;
}

/* Sans cela WordPress colore les liens en bleu par-dessus le Kit. */
a {
	color: inherit;
	text-decoration: none;
	transition: color var(--cdv-t-fast) var(--cdv-ease), border-color var(--cdv-t-fast) var(--cdv-ease);
}

a:hover {
	color: var(--cdv-green-text);
}

:focus-visible {
	outline: 2px solid var(--cdv-green);
	outline-offset: 4px;
}

/* 03. Utilitaires ========================================================= */

.elementor .cdv-page {
	width: 100%;
	max-width: none;
}

/* En-tête, hero, figure, sections et pied de page partagent un seul et même
   gabarit : la largeur plafonne quand le contenu atteint `--cdv-content-max`,
   gouttière comprise, de sorte que la colonne de texte est identique à toutes
   les largeurs de fenêtre. Seule la largeur se règle ici ; la gouttière
   elle-même est posée en remplissage dans Elementor, où elle reste
   administrable — D-022, D-029, et D-033 pour la suite.
   `--contact` désigne les deux racines du gabarit de pied de page : elles vivent
   hors de `cdv-page`, donc le sélecteur d'enfant direct ne les atteignait pas et
   elles couraient jusqu'au bord de l'écran. La classe `cdv-footer`, qu'on
   trouvait ici, n'existe plus sur aucun conteneur. */
.elementor .cdv-header,
.elementor .cdv-hero,
.elementor .cdv-figure,
.elementor .cdv-section-wrap,
.elementor .cdv-section--contact,
.elementor .cdv-page > .cdv-section {
	width: 100%;
	max-width: calc(var(--cdv-content-max) + 2 * var(--cdv-l-gutter));
	margin-inline: auto;
}

/* Section imbriquée : son parent porte déjà la gouttière, elle s'aligne donc
   d'elle-même sur la colonne de contenu. */
.elementor .cdv-section-wrap > .cdv-section {
	width: 100%;
	max-width: var(--cdv-content-max);
	margin-inline: auto;
}

/* Bloc « boîte » : il n'a pas de gouttière propre — son fond de carte tiendrait
   la pleine largeur du gabarit et déborderait de la colonne de texte. On la lui
   retire des deux côtés pour qu'il s'aligne au pixel sur les autres blocs. */
.elementor .cdv-page > .cdv-section--boxed {
	width: calc(100% - 2 * var(--cdv-l-gutter));
	max-width: var(--cdv-content-max);
	margin-inline: auto;
}

/* Un retour à la ligne saisi dans Elementor sert une composition de grand
   écran ; en mobile, la même coupure casse un titre déjà étroit. La classe se
   pose sur le widget, à côté de `cdv-anim-word` : le `<br>` reste dans le
   contenu — il n'y a rien à ressaisir pour changer d'avis — et disparaît sous
   768 px. Le découpage animé des titres recopie les `<br>` à leur place
   (D-043), la règle s'applique donc au balisage produit comme au balisage
   saisi. */
@media (max-width: 767px) {
	.br-hide-mob br {
		display: none;
	}
}

.cdv-label {
	font-family: var(--cdv-font-mono);
	font-size: var(--cdv-fs-label);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--cdv-ink-55);
}

.cdv-label .cdv-label__num {
	color: var(--cdv-green-text);
	font-weight: inherit;
}

.cdv-link {
	font-family: var(--cdv-font-mono);
	font-size: var(--cdv-fs-label);
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* Le filet suit le texte, jamais la boîte : sur un widget Elementor la classe se
   pose sur l'enveloppe du widget, le lien est produit à l'intérieur. Les deux
   formes cohabitent — `<a class="cdv-link">` en balisage, `.cdv-link a` en widget.
   Souligné par `text-decoration`, plus par `border-bottom` : la bordure se pose au
   bas de la boîte, et cette boîte est étirée par le plancher tactile — le filet
   tombait donc bien en dessous d'un texte de 11 px, à tous les paliers. Le
   soulignement, lui, suit la ligne de base ; `text-underline-offset` règle
   l'écart au texte, jamais à la boîte. */
a.cdv-link,
.cdv-link a {
	text-decoration: underline;
	text-decoration-color: var(--cdv-line-30);
	text-decoration-thickness: 1px;
	text-underline-offset: .42em;
}

/* Deux planchers, pas un.

   Le plancher général était à 44 px — le niveau AAA de WCAG (2.5.5). Il aérait
   trop les liens de service, en-tête et pied surtout : ramené à 24 px, qui est
   le minimum du niveau AA (2.5.8, « Target Size (Minimum) »), celui que le
   site vise partout ailleurs. La hauteur visible du texte ne change pas dans
   un cas comme dans l'autre : seule la zone cliquable est concernée.

   Les boutons gardent 44 px : ce sont les actions principales, elles se
   touchent au pouce et rien ne les serre. Descendre un appel à l'action au
   minimum réglementaire n'apporterait rien de visible. */
.elementor .cdv-link a,
.elementor .cdv-cell__value a,
a[href="#content"] {
	align-items: center;
	display: inline-flex;
	min-height: 24px;
}

.elementor .cdv-btn a,
.elementor .cdv-btn .elementor-button {
	align-items: center;
	display: inline-flex;
	min-height: 44px;
}

a.cdv-link:hover,
.cdv-link a:hover {
	text-decoration-color: var(--cdv-green);
}

/* 04. En-tête ============================================================= */

/* Aucun filet inférieur : c'est un choix de la maquette, pas un oubli. La mise
   en flex, l'alignement et l'écart viennent d'Elementor, où ils restent
   administrables — les redéclarer ici masquait les réglages (D-024, D-030). */

/* Groupe de droite : téléphone et e-mail. Ici, la seule typographie. */
.cdv-header__meta {
	font-family: var(--cdv-font-mono);
	font-size: var(--cdv-fs-label);
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* `.cdv-header__status` retirée le 8 septembre 2026 : mesurée sur le rendu
   servi, elle ne stylait aucun élément (D-035). L'en-tête ne porte plus de
   pastille de statut depuis que « Site en construction » a rejoint le
   cartouche du pied de page. */

/* Le logo de l'en-tête est un widget Image réglé dans Elementor depuis que le
   verrou composé en HTML a été retiré — D-034. Sa taille se règle donc dans
   l'éditeur, et non ici. */

/* 05. Hero ================================================================ */

/* Le H1 n'a plus de classe : sa typographie vient du Kit Elementor. */

.cdv-hero__notes {
	border-left: 1px solid var(--cdv-line-20);
	font-family: var(--cdv-font-mono);
	font-size: var(--cdv-fs-label);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--cdv-ink-55);
}

.cdv-hero__verbs {
	font-size: clamp(0.93rem, 1.4vw, 1.14rem);
	font-weight: 400;
	line-height: 1.85;
	color: var(--cdv-ink);
}

/* Seule ligne qui continue pendant la refonte : accent identitaire. Elle
   respire un cran de plus que les verbes qui la précèdent. */
.cdv-hero__accent {
	color: var(--cdv-green-text);
	line-height: 2.05;
}

/* 06. Figure ============================================================== */

/* Le cadre de l'illustration est un conteneur Elementor sans classe : sa
   hauteur et son débordement se règlent dans l'éditeur. */

.cdv-figure__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 64%;
	display: block;
}

.cdv-figure__caption {
	margin-top: 0;
	font-family: var(--cdv-font-mono);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--cdv-ink-55);
}

/* 07. Défilé ============================================================== */

/* Défilé horizontal des spécialités : le ruban est construit par `cypres.js`
   à partir du seul texte saisi dans Elementor, qui reste administrable. Sans
   JS, la ligne s'affiche telle quelle, sans animation — rien ne disparaît. */
.cdv-marquee {
	--cdv-marquee-vitesse: 70; /* pixels par seconde */
	font-size: clamp(1rem, 1.4vw, 1.57rem);
	font-weight: 100;
	letter-spacing: .1em;
	color: var(--cdv-green-medium);
	padding-block: clamp(14px, 1.4vw, 20px);
	overflow: hidden;
	/* Les mots s'effacent au lieu d'être tranchés net par le bord du bloc. Le
	   fondu vaut la gouttière du contenu, pour rester dans la même échelle. */
	--cdv-marquee-fondu: clamp(22px, 4.8vw, 78px);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--cdv-marquee-fondu),
		#000 calc(100% - var(--cdv-marquee-fondu)),
		transparent 100%
	);
}

.cdv-marquee__piste {
	display: flex;
	width: max-content;
	/* Sans base fixe, le container Elementor (flex ligne) rétrécirait le ruban
	   à sa propre largeur et la boucle sauterait à chaque tour. */
	flex: 0 0 auto;
	animation: cdv-marquee var(--cdv-marquee-duree, 26s) linear infinite;
	will-change: transform;
}

.cdv-marquee:hover .cdv-marquee__piste {
	animation-play-state: paused;
}

.cdv-marquee__jeu {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
}

/* La jointure entre deux jeux doit se lire comme les séparateurs internes de la
   ligne. Un simple remplissage laissait un trou tous les quatre mots, à un
   endroit où l'œil attend un point : on répète le séparateur, à l'identique. */
.cdv-marquee__jeu::after {
	content: ' · ';
	white-space: pre;
}

@keyframes cdv-marquee {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(calc(-100% / var(--cdv-marquee-jeux, 3)), 0, 0);
	}
}

/* 08. Sections ============================================================ */

.cdv-section--card {
	background: var(--cdv-paper-card);
}

/* `.elementor` en tête : le Kit pose `.elementor-kit-4 h2` (0,1,1) et sa feuille
   passe après celle-ci. Sans ce cran de spécificité, la taille du Kit gagnait et
   le jeton `--cdv-fs-h2` n'était jamais appliqué — voir D-012. */
.elementor .cdv-section h2 {
	font-size: var(--cdv-fs-h2);
	font-weight: 500;
	letter-spacing: -.03em;
	line-height: 1.02;
	margin: 0;
}

/* Dernier titre de la page : même taille et même interligne que les autres H2,
   un seul cran de graisse en plus. Deux points de taille d'écart ne se voyaient
   pas et coûtaient un jeton, une exception et une marge en dur — l'écart de
   respiration sous ce titre revient à l'écart du container (D-030). */
.elementor .cdv-section--contact h2 {
	font-weight: 600;
}

.cdv-section p {
	margin: 0;
	font-size: var(--cdv-fs-body);
	line-height: var(--cdv-lh-body);
	color: var(--cdv-ink-80);
}

/* 09. Quatre temps ======================================================== */

/* Le conteneur des quatre temps ne porte plus de classe : son filet supérieur
   se règle dans Elementor (Style › Bordure). Seules les lignes restent ici,
   parce qu'elles réagissent au survol. */

.cdv-step {
	border-bottom: 1px solid var(--cdv-line);
	transition: color var(--cdv-t-fast) var(--cdv-ease);
}

.cdv-step:hover {
	color: var(--cdv-green-text);
}

/* Le nom avance de quelques pixels au survol : la ligne se désigne sans qu'on
   ait à lui ajouter un fond ni une bordure. */
.cdv-step__name {
	transition: transform var(--cdv-t-base) var(--cdv-ease);
}

.cdv-step:hover .cdv-step__name {
	transform: translateX(6px);
}

/* La 4e ligne reste verte : c'est l'étape qui continue pendant la refonte. */
.cdv-step--active {
	color: var(--cdv-green-text);
}

.cdv-step__num {
	font-family: var(--cdv-font-mono);
	font-size: clamp(0.86rem, 1.3vw, 1.07rem);
	letter-spacing: .2em;
	color: var(--cdv-ink-45);
}

.cdv-step--active .cdv-step__num {
	color: inherit;
}

.cdv-step__name {
	font-size: var(--cdv-fs-h3);
	font-weight: 500;
	letter-spacing: -.025em;
}

/* Les icônes sont en trait, pas en aplat : Elementor colorise en fill et les
   ferait disparaître. Le stroke est forcé ici, une fois pour toutes. */
.cdv-step svg {
	flex: none;
	width: 32px;
	height: 32px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.2;
	stroke-linecap: round;
}

/* Chaque icône porte un détail en vert : accent identitaire, indépendant du
   survol de la ligne. La couleur reste dans le jeton, jamais dans le fichier SVG.
   Ne vaut que pour un SVG inline — via <img> le trait resterait en currentColor. */
.cdv-step .cdv-icon__accent {
	stroke: var(--cdv-green);
}

.cdv-step .cdv-icon__accent[stroke="none"] {
	fill: var(--cdv-green);
}

/* 10. Cartouche =========================================================== */

/* Les filets internes viennent du gap sur fond sombre : jamais de border-right
   ni border-bottom par cellule, qui laisserait des bordures orphelines au repli.
   L'éditeur Grid d'Elementor ne propose pas auto-fit/minmax : la règle est ici. */
.cdv-cartouche {
	background: var(--cdv-line-strong-28);
	border: var(--cdv-border) solid var(--cdv-line-strong);
	/* La grille est plus haute que son contour d'un pixel de filet : sans ceci,
	   la dernière rangée de cellules mordrait la bordure. */
	overflow: hidden;
}

.cdv-cell {
	background: var(--cdv-paper);
}

.cdv-cell__value {
	font-size: clamp(1.15rem, 1.54vw, 1.57rem);
	font-weight: 500;
}

.cdv-cell__value--email {
	font-size: clamp(1rem, 1.26vw, 1.29rem);
	word-break: break-word;
}

/* `.cdv-cell--pending` retirée le 8 septembre 2026 : mesurée sur le rendu
   servi, elle ne stylait aucun élément (D-035). Elle décrivait une cellule
   « en attente » que la page ne comporte plus. */

/* Encadré tireté : maquette de travail uniquement. En production, la cellule
   est masquée si le champ ACF cdv_sap_logo est vide. */
.cdv-cell__sap-slot {
	border: 1px dashed var(--cdv-line-40);
	padding: 12px 16px;
	font-family: var(--cdv-font-mono);
	font-size: var(--cdv-fs-caption);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--cdv-ink-45);
	line-height: 1.5;
}

.cdv-cell--rev {
	font-family: var(--cdv-font-mono);
	font-size: var(--cdv-fs-caption);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--cdv-ink-45);
}

/* 11. Bouton ============================================================== */

.cdv-btn {
	min-height: 62px;
	background: var(--cdv-ink);
	color: var(--cdv-paper);
	font-family: var(--cdv-font-mono);
	font-size: var(--cdv-fs-btn);
	letter-spacing: .2em;
	text-transform: uppercase;
	transition: background var(--cdv-t-base) var(--cdv-ease), color var(--cdv-t-base) var(--cdv-ease);
}

.cdv-btn:hover {
	background: var(--cdv-green-text);
	color: var(--cdv-white);
}

/* La flèche avance avec le survol : le seul mouvement du cartouche. */
.cdv-btn__arrow {
	transition: transform var(--cdv-t-base) var(--cdv-ease);
}

.cdv-btn:hover .cdv-btn__arrow {
	transform: translateX(6px);
}

/* 12. Pied de page et barre mobile ======================================== */

/* Le pied de page ne porte plus `cdv-footer` : c'est un `cdv-section
   cdv-section--contact`, et sa typographie mono vient d'Elementor. Structure,
   marge et remplissage y restaient déjà (D-030). */

/* Mentions du bas de page — le « © » et la ligne des pages légales. Sans
   classe, ces deux textes retombaient sur la taille du corps : 19,6 px en
   grand écran et 14,7 px en mobile, mesurés sur le rendu servi (D-035). Ils
   partagent désormais l'échelle des libellés. */
.cdv-mention {
	font-family: var(--cdv-font-mono);
	font-size: var(--cdv-fs-label);
	line-height: 1.6;
	color: var(--cdv-ink-45);
}

/* Toujours dans le DOM, masquée en CSS dès le breakpoint desktop Meetch : la maquette la
   rendait conditionnellement en JS, ce qui provoquait un saut de mise en page. */
.cdv-mobilebar {
	position: sticky;
	bottom: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-top: 1px solid var(--cdv-line-30);
	padding-bottom: env(safe-area-inset-bottom, 0px);
	background: var(--cdv-paper);
	z-index: 10;
}

.cdv-mobilebar a {
	min-height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--cdv-font-mono);
	font-size: 0.86rem;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.cdv-mobilebar__call {
	background: var(--cdv-ink);
	color: var(--cdv-paper);
	transition: background var(--cdv-t-base) var(--cdv-ease);
}

.cdv-mobilebar__call:hover {
	background: var(--cdv-green-text);
	color: var(--cdv-white);
}

.cdv-mobilebar__write {
	background: var(--cdv-paper);
	color: var(--cdv-ink);
	border-left: 1px solid var(--cdv-line-25);
}

@media (min-width: 768px) {
	.cdv-mobilebar {
		display: none;
	}
}

/* 13. Animations ========================================================== */

/* Trois mouvements, pas un de plus, et jamais deux sur le même élément : le
   titre se révèle mot à mot, ce qui l'accompagne entre en fondu, l'illustration
   se dévoile de haut en bas. Le hero portait en plus une montée d'ensemble qui
   doublait celle de son titre — retirée (D-030). */

@keyframes cdv-fade {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes cdv-wipe {
	from {
		clip-path: inset(0 0 100% 0);
	}
	to {
		clip-path: inset(0 0 0 0);
	}
}

/* Le retard vaut la traversée du titre : le sous-bloc entre une fois les mots
   posés, jamais en même temps qu'eux. */
.cdv-anim-fade {
	animation: cdv-fade var(--cdv-t-slow) var(--cdv-ease) both 320ms;
}

.cdv-anim-wipe {
	animation: cdv-wipe 1100ms var(--cdv-ease) both 250ms;
}

/* Révélation mot à mot des titres, reprise du socle Meetch : le découpage et
   le déclenchement sont posés par `cypres.js`. Sans JS, le titre reste lisible
   et immobile — aucune opacité nulle n'est écrite en CSS seul. */
.cdv-anim-word .cdv-anim__mask {
	display: inline-block;
	overflow: hidden;
	padding-block: .14em;
	margin-block: -.14em;
}

.cdv-anim-word .cdv-anim__piece {
	display: inline-block;
	transform: translateY(130%);
	transition: transform var(--cdv-anim-duree) var(--cdv-ease);
	transition-delay: calc(var(--cdv-anim-i, 0) * var(--cdv-anim-decalage));
}

.cdv-anim-word.cdv-anim-in .cdv-anim__piece {
	transform: none;
}

/* Posé par cypres.js : sans JS, rien n'est masqué et tout reste lisible. Fondu
   seul, sans translation : ces blocs contiennent un titre qui monte déjà mot à
   mot, et deux montées superposées faisaient bouger la page deux fois. */
[data-reveal].cdv-is-hidden {
	opacity: 0;
}

[data-reveal] {
	transition: opacity var(--cdv-t-slow) var(--cdv-ease);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}

	[data-reveal].cdv-is-hidden {
		opacity: 1;
		transform: none;
	}
}

/* 14. Adaptations Elementor =============================================== */

/* Les feuilles d'Elementor (`.e-con`, `.elementor-kit-4`) se chargent après
   celle-ci : à spécificité égale, elles gagnent. Chaque règle ci-dessous ajoute
   donc `.elementor` en ascendant pour passer à (0,2,x) — jamais de `!important`.
   Ne mettre ici que ce qu'Elementor ne sait pas régler : les bases flex des
   colonnes, la grille du cartouche, et la descente d'un style de l'enveloppe
   d'un widget vers la balise qu'il produit. Tout le reste — direction, écart,
   marge, remplissage — se règle dans Elementor et reste administrable (D-019). */

/* Les enfants flex/grid doivent pouvoir rétrécir, comme le socle Meetch. */
.elementor .cdv-page .e-con,
.elementor .cdv-page .elementor-widget {
	min-width: 0;
}

.elementor .cdv-hero__notes {
	flex: 0 1 300px;
}

/* La colonne de texte qui faisait face à celle-ci ne porte aucune classe : sa
   base flex se règle dans Elementor. Seule la colonne titre est nommée ici. */
.elementor .cdv-section__title-col {
	flex: 40 1 300px;
	max-width: 560px;
}

/* Base 0 % : les deux colonnes grandissent au seul prorata 60/40, sans que
   leurs bases px respectives (heritees de la variante impaire) ne faussent
   le ratio annonce. */
.elementor .cdv-section--even .cdv-section__title-col {
	flex: 60 1 0%;
	max-width: none;
}

/* « 02 Présentation » n'a pas de bloc carte : une seule colonne, centrée. */
.elementor .cdv-section-wrap .cdv-section__title-col {
	flex: 1 1 100%;
	margin-inline: auto;
	max-width: var(--cdv-measure-titre);
	text-align: center;
}

/* `.e-con` impose `display: var(--display)` : la grille doit monter d'un cran. */
.elementor .cdv-cartouche {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Au-delà de l'ordinateur portable, `auto-fit` glissait à cinq colonnes dès que
   le contenu dépassait ~1405 px — le cartouche se lisait en 4+4+1 à 1440 et en
   5+4 à 2400 : deux grilles différentes pour le même bloc. Quatre colonnes
   fixes à partir de 1367 px : la grille des grands écrans est celle de la
   version classique. En deçà, `auto-fit` continue de gérer la descente
   (4 → 3 → 2 → 1) sans qu'aucun palier n'ait à être écrit. */
@media (min-width: 1367px) {
	.elementor .cdv-cartouche {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* L'illustration : la classe se pose sur l'enveloppe du widget, l'image est
   deux niveaux plus bas. Le cadrage doit redescendre jusqu'à la balise. */
.elementor .cdv-figure__img,
.elementor .cdv-figure__img .elementor-widget-container {
	height: 100%;
}

.elementor .cdv-figure__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 64%;
}

/* Libellé de cellule : un cran plus petit que le libellé de section. */
.elementor .cdv-cell__label {
	font-size: var(--cdv-fs-caption);
}

/* Un widget Titre enveloppe son texte ; le lien d'une cellule doit prendre
   toute la valeur et hériter de sa taille. */
.elementor .cdv-cell__value a,
.elementor .cdv-step__name a {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	transition: color var(--cdv-t-fast) var(--cdv-ease);
}

.elementor .cdv-cell__value a:hover {
	color: var(--cdv-green-text);
}

/* Bouton. Le contrôle Lien d'un container n'accepte pas de balise dynamique :
   le lien est porté par le libellé et étiré sur toute la cellule. Le survol se
   déclenche donc sur la cellule, la cible reste le `<a>` — le focus clavier
   dessine son propre liseré. */
.elementor .cdv-btn {
	position: relative;
}

.elementor .cdv-btn__label a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.elementor .cdv-btn__label a:focus-visible::after {
	outline: 2px solid var(--cdv-green);
	outline-offset: 4px;
}

.elementor .cdv-btn__label a,
.elementor .cdv-btn__arrow {
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
}

/* Barre mobile : deux colonnes, et des liens qui prennent la couleur de leur
   cellule plutôt que celle des liens du Kit. */
.elementor .cdv-mobilebar {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.elementor .cdv-mobilebar a {
	color: inherit;
}

/* Le masquage au breakpoint desktop doit repasser devant la règle ci-dessus. */
@media (min-width: 768px) {
	.elementor .cdv-mobilebar {
		display: none;
	}
}

/* Icône d'étape : le widget HTML ne doit pas s'étirer dans la rangée. */
.elementor .cdv-step__icon {
	flex: none;
	line-height: 0;
}

.elementor .cdv-step__icon svg {
	width: 24px;
	height: 24px;
}

/* Le retour à la ligne des annotations vient du balisage : les paragraphes
   d'Elementor ne doivent pas ajouter de marge par-dessus l'écart. */
.elementor .cdv-hero__verbs p,
.elementor .cdv-hero__notes p,
.elementor .cdv-section p,
.elementor .cdv-cell p {
	margin: 0;
}

/* 15. Accessibilité : liens, contrastes et aperçu Elementor ================ */

.elementor .cdv-btn__label a:hover,
.elementor .cdv-mobilebar a:hover {
	color: inherit;
}

/* Le widget ne doit pas capturer le positionnement du lien étendu. */
.elementor .cdv-btn__label,
.elementor .cdv-btn__label .elementor-widget-container {
	position: static;
}

/* Double liseré lisible sur les fonds papier et encre, sans débordement. */
body a:focus-visible,
.elementor a:focus-visible {
	outline: 2px solid var(--cdv-ink);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--cdv-paper);
}

.elementor .cdv-btn__label a:focus-visible::after {
	outline: 2px solid var(--cdv-paper);
	outline-offset: -4px;
	box-shadow: inset 0 0 0 2px var(--cdv-ink);
}

.elementor .cdv-mobilebar a:focus-visible {
	outline-offset: -4px;
	outline-color: var(--cdv-paper);
	box-shadow: inset 0 0 0 2px var(--cdv-ink), inset 0 0 0 6px var(--cdv-ink);
}

@media (max-width: 767px) {
	.elementor .cdv-link a,
	.elementor .cdv-cell__value a {
		display: inline-flex;
		align-items: center;
		min-height: 20px;
		max-width: 100%;
	}

}

/* L'aperçu de l'éditeur ne dépend pas de l'ordre des événements JS. */
body.elementor-editor-active [data-reveal],
body.elementor-editor-preview [data-reveal] {
	opacity: 1;
	transform: none;
	transition: none;
}

/* 16. Pages légales ======================================================= */

/* Mentions légales et politique de confidentialité. Ce sont des pages de texte
   suivi : elles n'ont ni conteneur Elementor, ni widget, ni réglage à tenir à
   jour — le contenu se saisit dans l'éditeur de WordPress, la mise en forme
   vient d'ici. Une seule colonne de lecture, les jetons du site, rien de neuf :
   même gouttière, même largeur de contenu, mêmes rôles typographiques que la
   page d'accueil. Le gabarit de page est « Elementor Pleine largeur » : l'en-tête
   et le pied de page du site s'affichent, `the_content` s'insère entre les deux.

   Trois classes seulement, posées dans le balisage de la page : `cdv-legal`
   (l'enveloppe), `cdv-legal__meta` (la ligne de mise à jour) et `cdv-legal__todo`
   (une valeur que le client doit encore fournir). Rien d'autre à administrer. */

.cdv-legal {
	max-width: var(--cdv-content-max);
	margin-inline: auto;
	padding: calc(var(--cdv-u-section-space) / 2) var(--cdv-l-gutter);
}

.cdv-legal h1 {
	font-family: var(--cdv-font-display);
	font-size: var(--cdv-fs-h2);
	font-weight: 500;
	line-height: 1.05;
	margin: 0 0 var(--cdv-body-space);
	max-width: var(--cdv-measure-titre);
}

.cdv-legal h2 {
	font-family: var(--cdv-font-display);
	font-size: var(--cdv-fs-h3);
	font-weight: 500;
	line-height: 1.15;
	margin: calc(var(--cdv-u-section-space) / 3) 0 0.6em;
	max-width: var(--cdv-measure-titre);
}

.cdv-legal h3 {
	font-family: var(--cdv-font-mono);
	font-size: var(--cdv-fs-label);
	font-weight: 400;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--cdv-ink-55);
	margin: 2em 0 0.8em;
}

/* La colonne de lecture est plus étroite que la colonne de titre : au-delà,
   l'œil perd la ligne. `ch` suit la taille du texte, qui suit la fenêtre. */
.cdv-legal p,
.cdv-legal ul,
.cdv-legal ol,
.cdv-legal dl {
	font-size: var(--cdv-fs-body);
	line-height: var(--cdv-lh-body);
	color: var(--cdv-ink-80);
	max-width: 72ch;
	margin: 0 0 1.1em;
}

.cdv-legal ul,
.cdv-legal ol {
	padding-left: 1.4em;
}

.cdv-legal li {
	margin-bottom: 0.45em;
}

/* Les liens d'une page de texte se lisent comme des liens : le filet du site,
   pas de couleur en plus. Le survol reprend le vert de `a:hover`. */
.cdv-legal p a,
.cdv-legal li a {
	border-bottom: 1px solid var(--cdv-line-30);
}

.cdv-legal p a:hover,
.cdv-legal li a:hover {
	border-color: var(--cdv-green);
}

/* Ligne de mise à jour, sous le titre : même échelle que les mentions du pied.
   Deux classes, parce qu'un seul `.cdv-legal__meta` perdait contre
   `.cdv-legal p` — même poids, et la règle du corps arrive après : la ligne
   était mesurée à 16,94 px au lieu de 11,2 (D-035). */
.cdv-legal .cdv-legal__meta {
	font-family: var(--cdv-font-mono);
	font-size: var(--cdv-fs-label);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cdv-ink-45);
	margin-bottom: calc(var(--cdv-u-section-space) / 3);
}

/* Valeur en attente du client. Volontairement voyante : elle ne doit pas passer
   inaperçue à la relecture, et l'étape 8/8 de `validate-local.ps1` refuse la
   recette tant qu'il en reste une sur une page publiée. */
.cdv-legal__todo {
	font-family: var(--cdv-font-mono);
	font-size: 0.9em;
	letter-spacing: .1em;
	background: var(--cdv-green);
	color: var(--cdv-ink);
	padding: 0 .4em;
}