/* =========================================================================
   Faune + Environnement — raccords d'intégration
   Écrit à la main, chargé après la couche de fidélité générée.

   Ce fichier ne contient que ce que la maquette ne pouvait pas prévoir :
   le balisage propre au widget de menu Xpro, le formulaire sur-mesure, le
   comparateur avant/après et l'adaptation au téléphone. Tout le reste vient
   de fidelite.css, qui se régénère — ne rien y écrire à la main.

   Le préfixe « body .elementor.elementor.elementor » place ces règles juste
   au-dessus de la couche de fidélité, elle-même au-dessus des défauts
   d'Elementor.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Menu principal (widget Xpro)
   La liste s'appelle .xpro-elementor-horizontal-navbar-nav — pas .xpro-menu
   ni un <ul> enfant direct. Viser à côté laissait le menu à sa taille par
   défaut (16 px, sans gouttière) et faisait passer une entrée à la ligne.

   Valeurs relevées sur la maquette à 1400 px : corps 13,76 px, gouttière
   21 px, hauteur de lien 44 px.
   ---------------------------------------------------------------------- */

body .elementor.elementor.elementor .desktop-nav .xpro-elementor-horizontal-navbar-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(0.85rem, 1.5vw, 1.8rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

body .elementor.elementor.elementor .desktop-nav .xpro-elementor-horizontal-navbar-nav > li {
  margin: 0;
  padding: 0;
  list-style: none;
}

body .elementor.elementor.elementor .desktop-nav .xpro-elementor-horizontal-navbar-nav > li > a {
  position: relative;
  display: flex;
  min-height: 44px;
  align-items: center;
  margin: 0;
  padding: 0.7rem 0;
  border: 0;
  color: var(--white);
  font-family: var(--font-geist-sans), Arial, sans-serif;
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: normal;
  white-space: nowrap;
  background: none;
}

body .elementor.elementor.elementor .desktop-nav .xpro-elementor-horizontal-navbar-nav > li > a:hover,
body .elementor.elementor.elementor .desktop-nav .xpro-elementor-horizontal-navbar-nav > .current-menu-item > a {
  color: var(--lime);
}

/* Le soulignement au survol de la maquette : un filet citron qui se déroule
   de la gauche vers la droite. */
body .elementor.elementor.elementor .desktop-nav .xpro-elementor-horizontal-navbar-nav > li > a::after {
  position: absolute;
  right: 0;
  bottom: 0.35rem;
  left: 0;
  height: 1px;
  background: var(--lime);
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 220ms ease;
}

body .elementor.elementor.elementor .desktop-nav .xpro-elementor-horizontal-navbar-nav > li > a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* La barre pousse le menu et les actions vers la droite. */
body .elementor.elementor.elementor .site-header .desktop-nav {
  margin-left: auto;
}

/* Sur grand écran, « Contact » ne figure pas dans la barre : la maquette le
   réserve au menu du téléphone, la barre s'appuyant sur les deux boutons
   d'appel, qui mènent au même endroit. L'entrée reste dans le menu WordPress
   et réapparaît dans le panneau hors-écran. */
@media screen and (min-width: 1241px) {
  body .elementor.elementor.elementor .desktop-nav .xpro-elementor-horizontal-navbar-nav > li.cdp-entree-contact {
    display: none;
  }
}

/* Bouton hamburger : Xpro rend son icône en gris anthracite, invisible sur un
   en-tête vert foncé. */
body .elementor.elementor.elementor .xpro-elementor-horizontal-menu-toggler,
body .elementor.elementor.elementor .xpro-elementor-horizontal-menu-toggler i,
body .elementor.elementor.elementor .xpro-elementor-horizontal-menu-toggler svg {
  color: var(--white);
  fill: var(--white);
  border: 0;
  background: none;
}

body .elementor.elementor.elementor .xpro-elementor-horizontal-menu-toggler {
  display: flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  font-size: 1.35rem;
}

body .elementor.elementor.elementor .xpro-elementor-horizontal-menu-toggler:hover i,
body .elementor.elementor.elementor .xpro-elementor-horizontal-menu-toggler:focus-visible i {
  color: var(--lime);
}

/* Le panneau hors-écran hérite du fond clair du thème : il doit reprendre le
   vert profond de l'en-tête, sinon l'ouverture fait basculer toute la charte. */
body .elementor.elementor.elementor .xpro-elementor-horizontal-navbar-wrapper {
  background: var(--forest-deep);
}

body .elementor.elementor.elementor .xpro-elementor-horizontal-navbar-wrapper li > a,
body .elementor.elementor.elementor .xpro-elementor-horizontal-navbar-nav > li > a {
  padding-block: 0.9rem;
  color: var(--white);
}

body .elementor.elementor.elementor .xpro-elementor-horizontal-navbar-wrapper a:hover,
body .elementor.elementor.elementor .xpro-elementor-horizontal-navbar-wrapper .current-menu-item > a {
  color: var(--lime);
}

body .elementor.elementor.elementor .xpro-elementor-horizontal-navbar-wrapper.active {
  transform: translateX(0);
}

/* Le voile qui assombrit la page derrière le panneau ouvert : fermé, il ne
   doit pas intercepter les clics.

   Attention à la portée : ce conteneur n'est un panneau hors-écran QUE sous
   le point de rupture. Au-dessus, c'est lui qui porte le menu horizontal —
   le neutraliser rendrait toute la navigation incliquable, sans que rien ne
   le laisse voir. La règle correspondante est donc écrite dans les blocs
   responsive, jamais ici. */
body .elementor.elementor.elementor .xpro-elementor-horizontal-menu-overlay:not(.active) {
  pointer-events: none;
}

/* -------------------------------------------------------------------------
   2. Formulaire de contact
   -------------------------------------------------------------------------
   Écart assumé avec la maquette du site, demandé après relecture : mise en
   page en carte, en-tête « Étape n / N » avec jauge segmentée, grand titre,
   cartes de choix et champs encadrés. À exclure de la mesure de fidélité,
   qui compterait cette section comme un défaut.

   La palette, elle, reste celle de Faune + Environnement : vert profond pour
   les actions, vert feuille pour la progression, citron pour le focus. Les
   variables pointent vers les globales du kit, donc un changement de charte
   dans l'éditeur entraîne aussi le formulaire.
   ---------------------------------------------------------------------- */

body .elementor.elementor.elementor .cdp-form {
  display: block;
  padding: clamp(1.6rem, 3.2vw, 3rem);
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--white);
  box-shadow: 0 1.4rem 3rem -1.6rem rgba(14, 41, 33, 0.22);
}

/* --- En-tête d'étape --- */

body .elementor.elementor.elementor .cdp-etape-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 0.9rem;
}

body .elementor.elementor.elementor .cdp-etape-num {
  margin: 0;
  color: var(--leaf);
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body .elementor.elementor.elementor .cdp-jauge {
  display: flex;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

body .elementor.elementor.elementor .cdp-jauge-trait {
  width: 2.1rem;
  height: 0.3rem;
  border-radius: 999px;
  background: var(--paper-soft);
  transition: background 260ms ease;
}

body .elementor.elementor.elementor .cdp-jauge-fait {
  background: var(--leaf);
}

body .elementor.elementor.elementor .cdp-etape-titre {
  margin: 0 0 1.6rem;
  color: var(--forest-deep);
  font-size: clamp(1.6rem, 2.6vw, 2.35rem);
  font-weight: 620;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

/* --- Champs --- */

body .elementor.elementor.elementor .cdp-champs {
  display: grid;
  gap: 1.1rem;
}

body .elementor.elementor.elementor .cdp-rangee {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}

body .elementor.elementor.elementor .cdp-groupe {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}

/* Le libellé et son astérisque tiennent sur une ligne. En simple flux, le
   « * » passait à la ligne suivante et décalait verticalement les deux
   colonnes d'une rangée. */
body .elementor.elementor.elementor .cdp-label,
body .elementor.elementor.elementor .cdp-cases legend {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  float: none;
  width: auto;
  padding: 0;
  color: var(--forest-deep);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
}

/* Les deux champs d'une rangée s'alignent par le haut de leur contrôle, même
   si l'un des deux libellés tient sur deux lignes. */
body .elementor.elementor.elementor .cdp-rangee > .cdp-groupe {
  grid-template-rows: auto 1fr;
  align-content: start;
}

body .elementor.elementor.elementor .cdp-requis {
  color: #a1341f;
}

body .elementor.elementor.elementor .cdp-controle {
  width: 100%;
  min-height: 54px;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

body .elementor.elementor.elementor textarea.cdp-controle {
  min-height: 9rem;
  resize: vertical;
}

body .elementor.elementor.elementor .cdp-controle::placeholder {
  color: var(--muted);
}

body .elementor.elementor.elementor .cdp-controle:focus,
body .elementor.elementor.elementor .cdp-controle:focus-visible {
  border-color: var(--forest);
  outline: none;
  box-shadow: 0 0 0 3px rgba(65, 98, 76, 0.16);
}

/* --- Cartes de choix ------------------------------------------------------
   Le bouton radio natif est sorti de l'écran plutôt que masqué : masqué, il
   quitterait le parcours clavier. La pastille dessinée le remplace à l'œil,
   et le contour de focus est reporté sur la carte entière. */

body .elementor.elementor.elementor .cdp-choix {
  display: grid;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  border: 0;
}

body .elementor.elementor.elementor .cdp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

body .elementor.elementor.elementor .cdp-carte {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.9rem;
  padding: 1.15rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}

body .elementor.elementor.elementor .cdp-carte:hover {
  border-color: var(--leaf);
}

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

body .elementor.elementor.elementor .cdp-puce {
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.1rem;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

body .elementor.elementor.elementor .cdp-carte input:checked ~ .cdp-puce {
  border-color: var(--forest);
  box-shadow: inset 0 0 0 0.32rem var(--forest);
}

body .elementor.elementor.elementor .cdp-carte:has(input:checked) {
  border-color: var(--forest);
  background: rgba(214, 231, 99, 0.12);
}

body .elementor.elementor.elementor .cdp-carte:has(input:focus-visible) {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}

body .elementor.elementor.elementor .cdp-carte-texte {
  display: grid;
  gap: 0.3rem;
}

body .elementor.elementor.elementor .cdp-carte-titre {
  color: var(--forest-deep);
  font-size: 0.98rem;
  font-weight: 620;
  letter-spacing: -0.01em;
}

body .elementor.elementor.elementor .cdp-carte-desc {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

/* --- Choix multiples en pastilles -----------------------------------------
   Six réponses empilées en colonne occupaient toute la hauteur de l'étape et
   se lisaient comme une liste de courses. En pastilles sur deux colonnes,
   l'ensemble tient en trois lignes et se parcourt d'un regard. */

body .elementor.elementor.elementor .cdp-cases {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  border: 0;
}

body .elementor.elementor.elementor .cdp-pastilles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.6rem;
}

body .elementor.elementor.elementor .cdp-pastille {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  color: var(--ink);
  cursor: pointer;
  font-size: 0.88rem;
  line-height: 1.3;
  transition: border-color 150ms ease, background 150ms ease;
}

body .elementor.elementor.elementor .cdp-pastille:hover {
  border-color: var(--leaf);
}

body .elementor.elementor.elementor .cdp-pastille input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* La coche est dessinée pour rester lisible sur la pastille sélectionnée ;
   le champ natif reste dans le parcours clavier, simplement hors de l'écran. */
body .elementor.elementor.elementor .cdp-coche {
  position: relative;
  width: 1.15rem;
  height: 1.15rem;
  border: 1.5px solid var(--line);
  border-radius: 0.25rem;
  transition: border-color 150ms ease, background 150ms ease;
}

body .elementor.elementor.elementor .cdp-pastille input:checked ~ .cdp-coche {
  border-color: var(--forest);
  background: var(--forest);
}

body .elementor.elementor.elementor .cdp-pastille input:checked ~ .cdp-coche::after {
  position: absolute;
  top: 0.08rem;
  left: 0.33rem;
  width: 0.3rem;
  height: 0.6rem;
  border: solid var(--white);
  border-width: 0 2px 2px 0;
  content: "";
  transform: rotate(45deg);
}

body .elementor.elementor.elementor .cdp-pastille:has(input:checked) {
  border-color: var(--forest);
  background: rgba(214, 231, 99, 0.14);
}

body .elementor.elementor.elementor .cdp-pastille:has(input:focus-visible) {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}

/* --- Dépôt de fichiers ----------------------------------------------------
   Le champ natif est caché derrière une zone cliquable : le contrôle du
   navigateur est illisible et impossible à styler d'un poste à l'autre. Le
   <label> qui l'enveloppe suffit à l'ouvrir, au clic comme au clavier. */

body .elementor.elementor.elementor .cdp-depot {
  display: grid;
  gap: 0.3rem;
  padding: 1.4rem 1.2rem;
  border: 1.5px dashed var(--line);
  border-radius: 0.6rem;
  cursor: pointer;
  text-align: center;
  transition: border-color 150ms ease, background 150ms ease;
}

body .elementor.elementor.elementor .cdp-depot:hover {
  border-color: var(--leaf);
  background: rgba(214, 231, 99, 0.08);
}

body .elementor.elementor.elementor .cdp-depot:focus-within {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}

body .elementor.elementor.elementor .cdp-depot-titre {
  color: var(--forest);
  font-size: 0.88rem;
  font-weight: 620;
}

body .elementor.elementor.elementor .cdp-depot-aide,
body .elementor.elementor.elementor .cdp-depot-liste {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.5;
}

body .elementor.elementor.elementor .cdp-depot-liste:empty::before {
  content: attr(data-vide);
}

body .elementor.elementor.elementor .cdp-depot input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* --- Consentement --- */

body .elementor.elementor.elementor .cdp-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.8rem;
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

body .elementor.elementor.elementor .cdp-consent input {
  width: 18px;
  height: 18px;
  margin-top: 0.15rem;
  accent-color: var(--forest);
}

body .elementor.elementor.elementor .cdp-consent a {
  border-bottom: 1px solid currentColor;
  color: var(--forest);
}

/* --- Actions --------------------------------------------------------------
   « Retour » est un lien de texte, « Continuer » occupe le reste de la
   largeur : c'est le geste attendu qui doit être le plus large, pas celui
   qui revient en arrière. */

body .elementor.elementor.elementor .cdp-actions {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: 1.8rem;
}

body .elementor.elementor.elementor .cdp-bouton {
  flex: 1 1 auto;
  min-height: 58px;
  padding: 1rem 2rem;
  border: 0;
  border-radius: 0.6rem;
  background: var(--forest-deep);
  color: var(--white);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 180ms ease, transform 180ms ease;
}

body .elementor.elementor.elementor .cdp-bouton:hover {
  background: var(--forest);
}

body .elementor.elementor.elementor .cdp-bouton:active {
  transform: translateY(1px);
}

body .elementor.elementor.elementor .cdp-bouton:focus-visible,
body .elementor.elementor.elementor .cdp-retour:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

body .elementor.elementor.elementor .cdp-retour {
  flex: 0 0 auto;
  padding: 0.6rem 0;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 550;
}

body .elementor.elementor.elementor .cdp-retour:hover {
  color: var(--forest);
}

/* L'attribut « hidden » doit gagner sur tout le reste de ce fichier.
   Le style par défaut du navigateur ne vaut qu'une déclaration sans classe :
   la moindre règle « display: grid » posée plus haut le neutralise, et un
   champ censé disparaître continue d'occuper sa place. Le symptôme est
   trompeur — l'étape reste haute alors que les champs sont bien « masqués ». */
body .elementor.elementor.elementor [hidden] {
  display: none !important;
}

/* --- Messages --- */

body .elementor.elementor.elementor .cdp-erreur-champ {
  margin: 0;
  color: #a1341f;
  font-size: 0.76rem;
}

body .elementor.elementor.elementor .cdp-groupe-erreur .cdp-controle {
  border-color: #a1341f;
}

body .elementor.elementor.elementor .cdp-form-alerte {
  margin: 0 0 1.4rem;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid #a1341f;
  background: rgba(161, 52, 31, 0.06);
  color: #7d2817;
  font-size: 0.8rem;
}

/* Piège à robots : déplacé hors de l'écran plutôt que réduit à un pixel. Un
   conteneur de 1 px en overflow:hidden garde des enfants à leur largeur
   réelle et élargit le document — un débordement horizontal invisible à
   l'œil, et pourtant bien là sur téléphone. */
body .elementor.elementor.elementor .cdp-piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Le widget Elementor insère une enveloppe entre le conteneur et le
   formulaire : sans cela, la carte se poserait sur l'enveloppe. */
body .elementor.elementor.elementor .cdp-formulaire-hote {
  display: block;
}

body .elementor.elementor.elementor .cdp-succes {
  display: grid;
  gap: 0.8rem;
  padding: clamp(1.6rem, 3.2vw, 3rem);
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--white);
  box-shadow: 0 1.4rem 3rem -1.6rem rgba(14, 41, 33, 0.22);
}

body .elementor.elementor.elementor .cdp-succes .eyebrow {
  margin: 0;
  color: var(--leaf);
}

body .elementor.elementor.elementor .cdp-succes p {
  margin: 0;
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.55;
}

/* -------------------------------------------------------------------------
   3. Pied de page — hauteur réduite de 30 %
   Écart volontaire avec la maquette, demandé après relecture.

   Toute la réduction est prise sur les marges intérieures verticales : le
   contenu (trois colonnes) ne peut pas rétrécir. À 1560 px, le pied passe de
   552 à ~386 px. La valeur reste fluide — un pixel fixe fausserait la page à
   toutes les autres largeurs.
   ---------------------------------------------------------------------- */

body .elementor.elementor.elementor .footer-main {
  padding-block: clamp(2.6rem, 3.7vw, 3.7rem);
  row-gap: clamp(2.1rem, 5.6vw, 5.6rem);
}

/* --- Bandeau d'offre « −30 % » -------------------------------------------
   Même demande que pour le pied de page : le bloc est trop haut.

   La hauteur vient d'abord des marges intérieures (70 px de chaque côté à
   1400 px), ensuite de la colonne de droite — logo, paragraphe, lien —, la
   colonne de gauche étant plus courte. On agit donc sur les trois, sans
   toucher au « −30 % » lui-même : c'est l'argument, il doit rester grand.

   À 1400 px : 437 px → environ 305 px, soit −30 %. */

/* Quatre « .elementor » : la maquette portait une hauteur minimale en style
   en ligne, et les styles en ligne sont rejoués à ce niveau de spécificité
   par la couche de fidélité. Sans cela, on peut réduire les marges autant
   qu'on veut — le bloc reste bloqué à 430 px. */
body .elementor.elementor.elementor.elementor .maintenance-offer {
  min-height: 0;
  padding: clamp(1.4rem, 2.4vw, 2.4rem);
  gap: clamp(2rem, 5vw, 5rem);
}

/* Le petit logo de la colonne de droite, dimensionné en ligne dans la
   maquette : on le plafonne plutôt que de réécrire son style d'origine. */
body .elementor.elementor.elementor .maintenance-offer .cdp-img {
  max-height: 3.6rem;
}

body .elementor.elementor.elementor .maintenance-offer .arrow-link {
  margin-top: 1.2rem;
}

/* -------------------------------------------------------------------------
   4. Avant / après — trois mises en page
   Le comparateur à curseur a été retiré : il ne montrait jamais l'après en
   entier, et demandait un geste précis que le tactile rend pénible. Trois
   dispositions le remplacent, alternées d'un chantier à l'autre — c'est la
   répétition d'un même bloc neuf fois qui rendait la page monotone.
   ---------------------------------------------------------------------- */

body .elementor.elementor.elementor .cdp-aa-cadre {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: 0.25rem;
  background: var(--forest-deep);
}

body .elementor.elementor.elementor .cdp-aa-cadre img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body .elementor.elementor.elementor .cdp-aa-etiquette {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.4rem 0.7rem;
  border-radius: 2rem;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body .elementor.elementor.elementor .cdp-aa-avant {
  background: rgba(14, 41, 33, 0.82);
  color: var(--white);
}

body .elementor.elementor.elementor .cdp-aa-apres {
  background: rgba(214, 231, 99, 0.94);
  color: var(--ink);
}

body .elementor.elementor.elementor .cdp-aa-numero {
  display: block;
  margin-top: 0.8rem;
  color: var(--muted);
  font-family: var(--font-geist-mono), monospace;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
}

/* --- Diptyque : les deux états d'un seul regard --------------------------
   C'est la seule disposition qui reste entière sur une capture d'écran ou
   une impression — utile quand la page part par courriel à un conseil
   syndical. */

body .elementor.elementor.elementor .cdp-aa-diptyque {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}

/* --- Composition : l'après domine, l'avant rappelle ----------------------
   La vignette déborde volontairement du cadre principal. Le liseré reprend
   la couleur du fond de section : c'est lui qui crée le décrochement. */

body .elementor.elementor.elementor .cdp-aa-composition .cdp-aa-duo {
  position: relative;
  padding-bottom: 3.5rem;
}

body .elementor.elementor.elementor .cdp-aa-composition .cdp-aa-principal {
  width: 82%;
}

body .elementor.elementor.elementor .cdp-aa-composition .cdp-aa-vignette {
  position: absolute;
  bottom: 0;
  width: 34%;
  border: 6px solid var(--paper);
  border-radius: 0.35rem;
}

body .elementor.elementor.elementor .cdp-aa-composition .cdp-aa-vignette .cdp-aa-etiquette {
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.25rem 0.55rem;
  font-size: 0.62rem;
}

body .elementor.elementor.elementor .cdp-aa-gauche .cdp-aa-principal { margin-left: auto; }
body .elementor.elementor.elementor .cdp-aa-gauche .cdp-aa-vignette { left: 0; }

body .elementor.elementor.elementor .cdp-aa-droite .cdp-aa-principal { margin-right: auto; }
body .elementor.elementor.elementor .cdp-aa-droite .cdp-aa-vignette { right: 0; }

/* Sur fond sombre, le liseré doit suivre la section, pas rester clair. */
body .elementor.elementor.elementor .case-dark .cdp-aa-vignette {
  border-color: var(--forest);
}

/* --- Vue simple : l'après seul ------------------------------------------
   Pour les chantiers dont la photo « avant » n'existe pas. Le cadre reprend
   la largeur du principal de la composition, sinon la page donnerait
   l'impression d'un bloc plus important que les autres. */

body .elementor.elementor.elementor .cdp-aa-simple {
  position: relative;
  padding-bottom: 1rem;
}

body .elementor.elementor.elementor .cdp-aa-seule {
  width: 82%;
  margin-inline: auto;
}

/* --- Vues complémentaires ------------------------------------------------
   Une bande basse sous la paire. Volontairement plus petite : elle complète
   la démonstration, elle ne la refait pas. En composition, elle laisse la
   place à la vignette qui déborde dans l'angle. */

body .elementor.elementor.elementor .cdp-aa-vues {
  display: grid;
  /* En diptyque, le parent est lui-même une grille à deux colonnes : sans
     cette ligne la bande se rangerait dans la première colonne. */
  grid-column: 1 / -1;
  /* `minmax(0, 1fr)` avec auto-fit crée autant de colonnes que la largeur le
     permet — soit dix-huit colonnes de 100 px pour deux images. Le plancher
     est indispensable, et `min(…, 100%)` évite le débordement sur mobile. */
  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
  gap: 0.7rem;
  margin-top: 0.7rem;
}

body .elementor.elementor.elementor .cdp-aa-vue-cadre {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: 0.35rem;
}

body .elementor.elementor.elementor .cdp-aa-vues img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* Étiquettes d'une bande qui forme elle-même un avant / après : plus petites
   que celles du cadre principal, pour que la hiérarchie reste lisible. */
body .elementor.elementor.elementor .cdp-aa-vues-paire .cdp-aa-etiquette {
  top: 0.6rem;
  left: 0.6rem;
  padding: 0.28rem 0.6rem;
  font-size: 0.62rem;
}

body .elementor.elementor.elementor .cdp-aa-composition .cdp-aa-vues {
  width: 82%;
  margin-left: auto;
}

body .elementor.elementor.elementor .cdp-aa-droite .cdp-aa-vues {
  margin-left: 0;
  margin-right: auto;
}

/* --- Blocs de chantier ajoutés après la maquette -------------------------
   La maquette portait ces règles en styles en ligne, que le convertisseur a
   traduits en classes numérotées (.cdp-s52 et suivantes). Les blocs ajoutés
   ensuite n'ont pas de numéro : ils s'accrochent à des classes stables. */

body .elementor.elementor.elementor.elementor .case-media {
  min-height: 0;
  position: relative;
  align-self: center;
}

/* L'inversion ne vaut que tant qu'il y a deux colonnes : en dessous de 800 px
   la maquette repasse en colonne unique, et forcer deux colonnes ici les
   ferait réapparaître. L'ordre, lui, reste global — comme dans la maquette,
   où les blocs inversés montrent la photo avant le texte sur téléphone. */
@media (min-width: 801px) {
  body .elementor.elementor.elementor.elementor .case-inverse {
    grid-template-columns: minmax(0, 1.28fr) minmax(22rem, 0.72fr);
  }
}

body .elementor.elementor.elementor.elementor .case-inverse > .case-copy  { order: 2; }
body .elementor.elementor.elementor.elementor .case-inverse > .case-media { order: 1; }

/* --- Bascule : deux onglets, un fondu ------------------------------------ */

body .elementor.elementor.elementor .cdp-aa-onglets {
  display: inline-flex;
  overflow: hidden;
  margin-bottom: 0.8rem;
  border: 1px solid var(--line);
  border-radius: 2rem;
}

body .elementor.elementor.elementor .cdp-aa-onglet {
  border: 0;
  padding: 0.5rem 1.2rem;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 180ms ease, color 180ms ease;
}

body .elementor.elementor.elementor .cdp-aa-onglet[aria-pressed="true"] {
  background: var(--forest);
  color: var(--white);
}

body .elementor.elementor.elementor .cdp-aa-onglet:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: -2px;
}

body .elementor.elementor.elementor .cdp-aa-vue {
  transition: opacity 170ms ease;
}

/* -------------------------------------------------------------------------
   5. Adaptation au téléphone
   La maquette est fluide (clamp + grilles en fr) mais très peu responsive :
   ce qui suit est une adaptation, pas une reproduction. À exclure de la
   mesure de fidélité.

   Ces règles ferment le fichier volontairement : écrites plus haut, elles
   seraient écrasées par les blocs qui suivent, à spécificité égale.
   ---------------------------------------------------------------------- */

@media screen and (max-width: 1240px) {
  /* La maquette masquait .desktop-nav dès 1240 px au profit d'un menu
     déroulant maison. Ce <nav> héberge maintenant le widget Xpro, qui porte
     lui-même son bouton hamburger : le masquer supprimerait le seul menu du
     téléphone. */
  body .elementor.elementor.elementor .site-header .desktop-nav {
    display: block;
    margin-left: auto;
  }
}

/* Alignement du seuil de bascule du menu.
   Deux seuils se contredisaient : la maquette passe au menu déroulant à
   1240 px, Xpro à 1024 px. Entre les deux, on obtenait un état bâtard — la
   liste horizontale au complet, mais sans le téléphone ni les boutons
   d'appel, que la maquette masque dès 1240.

   Xpro écrit son seuil en dur dans sa feuille : on transpose donc ses règles
   hors-écran sur la bande manquante. Au-dessus de 1240 le menu est entier,
   en dessous c'est le hamburger. Jamais d'entre-deux. */
@media screen and (min-width: 1025px) and (max-width: 1240px) {

  body .elementor.elementor.elementor .xpro-elementor-horizontal-menu-responsive-tablet {
    position: fixed;
    z-index: 999;
    top: 0;
    right: 0;
    width: 400px;
    max-width: 100%;
    height: 100vh;
    padding: 30px;
    overflow: auto;
    text-align: right;
    transform: translate3d(100%, 0, 0);
    transition: transform 0.5s;
  }

  body.admin-bar .elementor.elementor.elementor .xpro-elementor-horizontal-menu-responsive-tablet {
    top: 32px;
  }

  body .elementor.elementor.elementor .xpro-elementor-horizontal-menu-responsive-tablet.active {
    transform: translate3d(0, 0, 0);
  }

  /* Fermé, le panneau est hors de l'écran mais reste techniquement présent :
     invisible ne suffit pas, son bord resterait cliquable. */
  body .elementor.elementor.elementor .xpro-elementor-horizontal-menu-responsive-tablet:not(.active) {
    pointer-events: none;
  }

  body .elementor.elementor.elementor .xpro-elementor-horizontal-menu-responsive-tablet ~ .xpro-elementor-horizontal-menu-overlay,
  body .elementor.elementor.elementor .xpro-elementor-horizontal-menu-responsive-tablet ~ .xpro-elementor-horizontal-menu-toggler-wrapper {
    display: block;
  }

  body .elementor.elementor.elementor .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-menu-close {
    display: inline-flex;
  }

  body .elementor.elementor.elementor .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav {
    flex-direction: column;
    align-items: flex-start;
    padding-top: 20px;
  }

  body .elementor.elementor.elementor .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav > li {
    position: relative;
    width: 100%;
  }

  body .elementor.elementor.elementor .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav > li > a {
    width: 100%;
    min-height: 30px;
    margin: 0;
    padding: 20px 0;
    justify-content: flex-start;
    border-bottom: 1px solid rgba(255, 254, 249, 0.16);
  }
}

@media screen and (max-width: 800px) {
  /* Une rangée de deux champs qui porte de vrais libellés doit se dégrouper :
     à cette largeur, chaque colonne ferait trois mots. */
  body .elementor.elementor.elementor .cdp-rangee {
    grid-template-columns: 1fr;
  }
}

/* Les colonnes de contenu légales et de zone d'intervention portent des blocs
   de plusieurs paragraphes — une question et sa réponse, une consigne et sa
   nuance. La maquette met les marges de paragraphe à zéro parce qu'elle ne
   prévoyait qu'un paragraphe par bloc : sans cette règle, la réponse colle à
   la question suivante et l'ensemble se lit comme un pavé. */
body .elementor.elementor.elementor .legal-content .cdp-p p + p {
  margin-top: 0.9em;
}

/* --- Zone d'intervention : l'encart latéral -------------------------------
   La colonne de gauche des pages « légales » sert de note de marge : petite,
   grise, en retrait. C'est le bon registre pour une mention de coopérative ;
   c'en est un mauvais pour dire où l'entreprise travaille, qui est une des
   premières questions d'un visiteur. Le client l'a relevé trois fois — il
   avait raison, et il ne voyait même pas la section.

   Ce bloc-là seul reprend donc le corps du texte courant, avec un surtitre
   lisible et un trait plus affirmé. */
body .elementor.elementor.elementor .cdp-zone-encart .eyebrow {
  font-size: 0.92rem;
  letter-spacing: 0.14em;
  color: var(--forest, #18382d);
}

body .elementor.elementor.elementor .cdp-zone-encart .cdp-p:not(.eyebrow) {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--forest-deep, #0e2921);
}

/* La liste des communes est le contenu de la page, pas une annexe. */
body .elementor.elementor.elementor .cdp-communes {
  font-size: 1.02rem;
  line-height: 2.1;
}

body .elementor.elementor.elementor .cdp-communes a {
  color: var(--forest-deep, #0e2921);
  text-decoration: none;
  border-bottom: 1px solid rgba(24, 56, 45, 0.28);
}

body .elementor.elementor.elementor .cdp-communes a:hover,
body .elementor.elementor.elementor .cdp-communes a:focus-visible {
  border-bottom-color: var(--forest, #18382d);
}

/* Le code postal reste une précision : il accompagne le nom, il ne le
   concurrence pas. */
body .elementor.elementor.elementor .cdp-communes span {
  font-size: 0.82rem;
  color: var(--muted, #6b7167);
}

@media screen and (max-width: 640px) {
  body .elementor.elementor.elementor .cdp-zone-encart .eyebrow {
    font-size: 0.85rem;
  }

  body .elementor.elementor.elementor .cdp-communes {
    line-height: 2.4;
  }
}
/* --- Questions fréquentes -------------------------------------------------
   Les questions sont des `<details>` : elles s'ouvrent sans JavaScript, elles
   restent lisibles si le script échoue, et le navigateur se charge seul du
   clavier et de la restitution vocale. Les réponses sont dans le document,
   donc indexables même repliées. */
body .elementor.elementor.elementor .cdp-faq {
  display: grid;
  border-top: 1px solid rgba(24, 56, 45, 0.14);
}

body .elementor.elementor.elementor .cdp-faq-item {
  border-bottom: 1px solid rgba(24, 56, 45, 0.14);
}

body .elementor.elementor.elementor .cdp-faq-item summary {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 1.1rem 0;
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1.4;
  list-style: none;
}

/* Le triangle par défaut des navigateurs ne suit aucune charte. */
body .elementor.elementor.elementor .cdp-faq-item summary::-webkit-details-marker {
  display: none;
}

body .elementor.elementor.elementor .cdp-faq-item summary::before {
  content: "+";
  flex: none;
  width: 1rem;
  font-size: 1.2rem;
  line-height: 1.1;
  color: var(--forest, #18382d);
}

body .elementor.elementor.elementor .cdp-faq-item[open] summary::before {
  content: "–";
}

body .elementor.elementor.elementor .cdp-faq-item summary:focus-visible {
  outline: 2px solid var(--forest, #18382d);
  outline-offset: 2px;
}

body .elementor.elementor.elementor .cdp-faq-reponse {
  padding: 0 0 1.2rem 1.9rem;
  max-width: 68ch;
}

body .elementor.elementor.elementor .cdp-faq-reponse p {
  margin: 0;
  line-height: 1.6;
  color: var(--muted, #6b7167);
}

@media screen and (max-width: 800px) {
  /* Le repli du texte sous la question coûte trop de largeur sur 390 px. */
  body .elementor.elementor.elementor .cdp-faq-reponse {
    padding-left: 0;
  }
}
/* --- Plan d'accès ---------------------------------------------------------
   L'adresse passe avant la carte : c'est elle qu'on copie, qu'on lit à voix
   haute au téléphone et que les moteurs indexent. La carte, elle, ne sert
   qu'à ceux qui viennent en voiture. */
body .elementor.elementor.elementor .cdp-plan {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  gap: clamp(2.5rem, 6vw, 6.5rem);
  align-items: start;
}

/* La colonne de gauche reprend la mesure des autres colonnes de texte de la
   page : au-delà, l'adresse se lit moins bien qu'elle ne s'affiche. */
body .elementor.elementor.elementor .cdp-plan-mots {
  display: grid;
  gap: 1rem;
  max-width: 32ch;
}

body .elementor.elementor.elementor .cdp-plan-titre {
  margin: 0;
  font-size: clamp(1.9rem, 3.2vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

body .elementor.elementor.elementor .cdp-plan-adresse {
  margin: 0;
  font-style: normal;
  line-height: 1.6;
}

body .elementor.elementor.elementor .cdp-plan-note {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--muted, #6b7167);
}

@media screen and (max-width: 800px) {
  /* Une carte de 40 % de large sur un téléphone ne montre plus une rue. */
  body .elementor.elementor.elementor .cdp-plan {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.6rem;
  }

  body .elementor.elementor.elementor .cdp-plan-mots {
    max-width: none;
  }
}

/* Le cadre garde sa place avant et après le chargement : sans cette
   proportion imposée, l'arrivée de la carte décalerait tout ce qui suit. */
body .elementor.elementor.elementor .cdp-plan-cadre {
  position: relative;
  aspect-ratio: 16 / 10;
  border: 1px solid rgba(24, 56, 45, 0.16);
  border-radius: 0.3rem;
  overflow: hidden;
  background: rgba(24, 56, 45, 0.04);
}

body .elementor.elementor.elementor .cdp-plan-cadre iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

body .elementor.elementor.elementor .cdp-plan-bouton {
  display: grid;
  gap: 0.5rem;
  place-content: center;
  width: 100%;
  height: 100%;
  padding: 1.5rem;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.95rem;
  color: var(--forest-deep, #0e2921);
  text-align: center;
  cursor: pointer;
}

body .elementor.elementor.elementor .cdp-plan-bouton small {
  max-width: 24rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--muted, #6b7167);
}

body .elementor.elementor.elementor .cdp-plan-bouton:hover {
  background: rgba(214, 231, 99, 0.22);
}

body .elementor.elementor.elementor .cdp-plan-bouton:focus-visible {
  outline: 2px solid var(--forest, #18382d);
  outline-offset: -4px;
}

body .elementor.elementor.elementor .cdp-plan-lien {
  margin: 0;
  font-size: 0.9rem;
}
/* --- Fil d'Ariane des pages de zone --------------------------------------
   Il est posé par le plugin juste après l'ouverture du corps, donc au-dessus
   de la bannière. Il doit se lire comme un repère discret, pas comme un
   deuxième menu : même graisse et même interlettrage que les surtitres. */
body .cdp-fil {
  padding: 1rem max(var(--pad, 24px), calc((100% - var(--max, 1380px)) / 2 + var(--pad, 24px))) 0;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}

body .cdp-fil ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

body .cdp-fil li + li::before {
  content: "›";
  margin-right: 0.5rem;
  color: var(--muted, #6b7167);
}

body .cdp-fil a {
  color: var(--muted, #6b7167);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

body .cdp-fil a:hover,
body .cdp-fil a:focus-visible {
  border-bottom-color: currentColor;
}

body .cdp-fil [aria-current="page"] {
  color: var(--forest, #18382d);
}

@media screen and (max-width: 800px) {
  /* Les étapes deviennent des cibles tactiles : on leur donne de la hauteur
     sans écarter les lignes du fil. */
  body .cdp-fil a {
    display: inline-block;
    padding-block: 0.5rem;
  }
}
/* Les boutons « Devis gratuit » et « Rendez-vous » pointent sur l'ancre du
   formulaire : le visiteur qui a cliqué a déjà décidé, lui demander de faire
   défiler deux écrans lui laisse croire que le lien n'a pas fonctionné. La
   marge évite que le titre de section se colle au bord haut de l'écran. */
body .elementor.elementor.elementor #rendez-vous {
  scroll-margin-top: 1.5rem;
}

/* --- Encart « arrosage automatique » de l'accueil -------------------------
   L'encart de la maquette n'a jamais porté qu'un titre et un paragraphe :
   ni la mesure du texte ni le rythme vertical n'y étaient définis. Celui-ci
   en porte cinq blocs, il faut donc les poser — pour ce bloc seulement, sans
   toucher à l'encart de la coopérative qui le précède. */
/* L'encart de la coopérative attend son image en premier enfant et en
   position d'accroche. Ici le propos passe d'abord, la photo confirme :
   on inverse donc les colonnes plutôt que de réutiliser la variante
   compacte, qui aurait laissé la moitié droite de la carte vide. */
body .elementor.elementor.elementor .home-arrosage-carte {
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 0.42fr);
  align-items: center;
}

body .elementor.elementor.elementor .home-arrosage .cooperative-callout > .e-con:first-child {
  display: grid;
  gap: 1.15rem;
  max-width: 64ch;
}

body .elementor.elementor.elementor .home-arrosage-visuel img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 0.25rem;
}

/* Sous 800 px la carte est déjà passée sur une colonne : la photo se
   retrouverait en pleine hauteur sous le texte. On la borne. */
@media screen and (max-width: 800px) {
  body .elementor.elementor.elementor .home-arrosage-carte {
    grid-template-columns: minmax(0, 1fr);
  }

  body .elementor.elementor.elementor .home-arrosage-visuel img {
    aspect-ratio: 4 / 3;
  }
}

body .elementor.elementor.elementor .home-arrosage .cdp-h2 {
  margin: 0;
}

body .elementor.elementor.elementor .cdp-arrosage-points {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

body .elementor.elementor.elementor .cdp-arrosage-points li {
  position: relative;
  padding-left: 1.4rem;
  line-height: 1.55;
}

/* Un trait repris du lime de la charte, plutôt que la puce ronde du
   navigateur : le reste du site n'utilise aucune liste à puces. */
body .elementor.elementor.elementor .cdp-arrosage-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 0.6rem;
  height: 2px;
  background: var(--lime, #d6e763);
}

/* =========================================================================
   Reprise téléphone — mesurée, pas devinée
   -------------------------------------------------------------------------
   Un audit de rendu à 390 px sur les 39 pages a montré trois familles de
   défauts. Toutes ont la même origine : les règles issues de la maquette
   sont écrites en `.cdp-sNN` avec quatre `.elementor` de spécificité et
   **sans variante mobile**. Elles passent donc devant les règles
   d'adaptation, qui n'en portent que deux. Les correctifs ci-dessous
   remontent au même niveau de spécificité, pas plus haut.
   ====================================================================== */

@media screen and (max-width: 800px) {

  /* --- 1. Rien ne dépasse de l'écran ------------------------------------
     Filet de sécurité au niveau du document. `clip` et non `hidden` :
     `hidden` transformerait la racine en conteneur de défilement et
     casserait tout `position: sticky`. `clip` coupe sans rien défiler. */
  html {
    overflow-x: clip;
  }

  /* --- 2. Le bandeau d'appel à l'action ---------------------------------
     Trois colonnes dont la première est figée à 17 rem (272 px) : sur un
     écran de 390 px il ne reste que 50 px pour le bouton, dont le texte
     est en `nowrap` et sortait de 59 px. On empile. */
  body .elementor.elementor.elementor.elementor .cdp-s5,
  body .elementor.elementor.elementor.elementor .cdp-s20,
  body .elementor.elementor.elementor.elementor .cdp-s28 {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    text-align: left;
  }

  /* Le bouton prend la largeur : à 390 px, une cible centrée de 50 px est
     à la fois illisible et difficile à viser. */
  body .elementor.elementor.elementor.elementor .cdp-s5 > a,
  body .elementor.elementor.elementor.elementor .cdp-s20 > a,
  body .elementor.elementor.elementor.elementor .cdp-s28 > a {
    justify-content: center;
    width: 100%;
  }

  /* --- 3. Les blocs de chantier -----------------------------------------
     `minmax(22rem, .72fr)` impose 352 px à la seconde colonne : elle
     débordait de 30 px et repoussait le texte à 68 px du bord. Ces quatre
     classes décrivent la même section dans la maquette. */
  body .elementor.elementor.elementor.elementor .cdp-s52,
  body .elementor.elementor.elementor.elementor .cdp-s56,
  body .elementor.elementor.elementor.elementor .cdp-s60,
  body .elementor.elementor.elementor.elementor .cdp-s64 {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Une image posée à côté d'un texte sur 390 px donne deux colonnes de
     rien. On empile, et le visuel repasse au-dessus du propos. */
  body .elementor.elementor.elementor.elementor .cdp-s14,
  body .elementor.elementor.elementor.elementor .cdp-s47,
  body .elementor.elementor.elementor.elementor .cdp-s84 {
    grid-template-columns: minmax(0, 1fr);
  }

  /* --- 4. L'agrandissement de l'image de bannière -----------------------
     La photo est en `position: absolute; inset: 0` avec un `scale(1.025)`
     décoratif : elle sortait de 5 px de chaque côté. Sur un grand écran ce
     débordement se perd dans la marge ; sur 390 px il représente 2,5 % de
     la largeur.

     Le `scale` ne vient pas d'une déclaration mais de l'animation d'arrivée
     `hero-image-arrival` : aucune règle d'auteur ne peut passer devant, une
     animation l'emporte toujours. C'est donc le conteneur qui doit couper.
     `clip` plutôt que `hidden` : il ne crée pas de zone de défilement et ne
     désactive pas les positions collantes à l'intérieur. */
  body .elementor.elementor.elementor .e-con:has(> .cdp-img) {
    overflow: clip;
  }

  /* Les pastilles « Avant » / « Après » tombaient à 9,9 px. Ce sont les
     seuls repères qui disent au lecteur ce qu'il regarde : ils doivent se
     lire sans effort. La règle de la vignette de composition porte quatre
     classes, celle-ci doit donc en porter autant pour passer devant. */
  body .elementor.elementor.elementor.elementor .cdp-aa .cdp-aa-etiquette.cdp-aa-etiquette {
    font-size: 11px;
  }

  /* --- 5. Le diptyque avant / après -------------------------------------
     Deux colonnes de 145 px : à cette taille on ne distingue plus ce que
     la photo est censée montrer, ce qui vide la page de son intérêt. Une
     photo par ligne, pleine largeur. Le repère « Avant » / « Après » reste
     posé sur chaque cadre, l'information ne se perd pas. */
  body .elementor.elementor.elementor .cdp-aa-diptyque {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.9rem;
  }

  /* Le décalage de 18 % de la bande de vues complémentaires est un effet de
     composition qui suppose de la place. Sur téléphone il ne reste que des
     vignettes : on récupère la largeur. */
  body .elementor.elementor.elementor .cdp-aa-composition .cdp-aa-vues,
  body .elementor.elementor.elementor .cdp-aa-droite .cdp-aa-vues {
    width: 100%;
  }

  /* --- 6. Cibles tactiles ------------------------------------------------
     Les liens de navigation du pied de page mesuraient 20 px de haut et
     les boutons d'appel à l'action 26 px. Le seuil retenu est 44 px, la
     valeur des recommandations d'accessibilité, obtenue par le rembourrage
     pour ne pas déformer la typographie. */
  body .elementor.elementor.elementor .footer-main a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

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

  /* Le logo est le seul lien de l'en-tête sur téléphone : il ne doit pas
     être le plus difficile à atteindre. */
  body .elementor.elementor.elementor .brand-lockup {
    min-height: 44px;
  }

  /* Les liens de communes du hub forment une liste dense séparée par des
     points médians : sans interligne, deux cibles voisines se touchent. */
  body .elementor.elementor.elementor .cdp-communes {
    line-height: 2.4;
  }

  /* Le renvoi de bas de bannière et la bascule avant / après sont de vraies
     commandes, pas du texte courant : elles doivent se viser au pouce. */
  body .elementor.elementor.elementor .scroll-note {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  body .elementor.elementor.elementor .cdp-aa-onglet {
    min-height: 44px;
  }

  /* Le bloc de contact direct porte le téléphone et l'adresse : ce sont les
     deux gestes que la page existe pour provoquer. Le libellé tombait à
     9,9 px et le numéro n'offrait que 21 px à viser. */
  body .elementor.elementor.elementor .contact-direct .cdp-span,
  body .elementor.elementor.elementor .contact-direct .cdp-span * {
    font-size: 11.5px;
  }

  body .elementor.elementor.elementor .contact-direct a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

@media screen and (max-width: 640px) {
  /* La gouttière de la maquette vaut 48 px : 3 % de large à 1440 px, mais
     26 % à 375 px — le texte tomberait à trente-cinq signes par ligne. Le
     sélecteur passe par la racine pour dépasser le CSS qu'Elementor génère
     par élément. */
  body .elementor.elementor.elementor > .e-con > .e-con.cdp-c {
    padding-inline: 24px;
  }

  /* Une étiquette espacée de .22em n'est plus lisible sur un écran tenu à
     bout de bras. 10 px n'y suffisait pas : l'audit de rendu les a toutes
     signalées. On monte à 11,5 px en resserrant l'interlettrage, ce qui
     rend la ligne plus lisible sans lui faire prendre plus de place. */
  body .elementor.elementor.elementor .eyebrow,
  body .elementor.elementor.elementor .footer-label {
    font-size: 11.5px;
    letter-spacing: 0.16em;
  }

  /* La jauge et le numéro d'étape ne tiennent plus côte à côte. */
  body .elementor.elementor.elementor .cdp-etape-entete {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
  }

  body .elementor.elementor.elementor .cdp-jauge-trait {
    width: 1.6rem;
  }

  /* Le geste principal prend toute la largeur ; le retour passe dessous. */
  body .elementor.elementor.elementor .cdp-actions {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 0.8rem;
  }

  body .elementor.elementor.elementor .cdp-retour {
    text-align: center;
  }

  /* La ligne de copyright et sa mention d'expertise passent au minimum
     couramment admis pour du texte courant sur téléphone. */
  body .elementor.elementor.elementor .footer-base,
  body .elementor.elementor.elementor .footer-base * {
    font-size: 12px;
  }

  /* La gouttière de 24 px posée plus haut vise les conteneurs de second
     niveau. Dans un bloc de chantier, la section porte déjà sa marge : les
     deux s'additionnent et mangent 48 px sur 390. Comme la photo et le
     texte sont désormais empilés, ils peuvent occuper toute la colonne. */
  body .elementor.elementor.elementor.elementor .case-study > .e-con.cdp-c {
    padding-inline: 0;
  }
}

/**
 * Les logos de l'en-tête, et pourquoi leur taille est bornée ici.
 *
 * Aucune règle ne fixait leur dimension : elle sortait entièrement du calcul
 * flex. Or le conteneur `.brand-lockup` est en `flex: 0 0 auto` — il ne
 * rétrécit jamais — et prend donc pour base la largeur maximale de son
 * contenu, soit les 1348 px de définition des images. Chrome la ramène malgré
 * tout à la place disponible, WebKit non : sur Safari le logo s'affichait à sa
 * taille native et débordait de l'en-tête.
 *
 * On borne la hauteur et on laisse la largeur suivre le rapport. C'est un
 * plafond, jamais un plancher : là où le logo fait déjà 49 px rien ne bouge,
 * et un affichage plus petit sur téléphone reste plus petit.
 */
body .elementor.elementor.elementor .brand-lockup {
  min-width: 0;
}

body .elementor.elementor.elementor .brand-lockup .brand-logo {
  min-width: 0;
}

body .elementor.elementor.elementor .brand-lockup .brand-logo img {
  max-height: 3.0625rem;
  width: auto;
  max-width: 100%;
}