/* ═══════════════════════════════════════════════════════════════════════════
   LEWIN PROD — pont vers Elementor

   Cette feuille ne sert QUE sur WordPress. La maquette statique n'en a pas
   besoin : elle n'existe que parce qu'Elementor enveloppe chaque widget dans
   deux div, impose ses propres marges et son propre `display`.

   DEUX RÈGLES COMMANDENT TOUT CE FICHIER.

   1. Toute règle visant une classe `.elementor-*` est préfixée par `body`.
      Depuis Elementor 4, chaque widget apporte sa propre feuille
      (`widget-heading.min.css`, `widget-video.min.css`…), mise en file au
      moment du rendu — donc toujours après la nôtre, quoi qu'on fasse. À
      nombre de classes égal, c'est l'ordre qui tranche, et nous perdons. Le
      `body` ajoute un sélecteur de type : nos règles passent devant sans
      `!important` et sans dépendre de l'ordre de chargement.

   2. Tout conteneur s'écrit `.e-con.notre-classe`, jamais `.notre-classe`
      seule. Elementor déclare `.e-con { display: flex; flex-direction: column }`
      — UNE classe, exactement la spécificité de `.rangee` ou `.galerie`. À
      égalité, l'ordre tranche encore. Deux classes, et la question est close.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── Enveloppes neutralisées ─────────────────────────────────────────────── */

body .elementor-widget-container { margin: 0; padding: 0; }

body .e-con,
body .e-con > .e-con-inner {
  --padding-block-start: 0; --padding-block-end: 0;
  --padding-inline-start: 0; --padding-inline-end: 0;
  --margin-block-start: 0; --margin-block-end: 0;
  --margin-inline-start: 0; --margin-inline-end: 0;
}
body .e-con > .e-con-inner { padding: 0; max-width: none; }

/* Le titre interne prend la typographie de la classe posée sur le widget.
   Le sélecteur est répété balise par balise parce qu'Astra écrit
   `.elementor-widget-heading h1.elementor-heading-title { line-height: 1.4em }`
   — deux classes et une balise. Une simple `.elementor-heading-title` perdait,
   et les grands titres s'étiraient. */
body .elementor-heading-title,
body .elementor-widget-heading h1.elementor-heading-title,
body .elementor-widget-heading h2.elementor-heading-title,
body .elementor-widget-heading h3.elementor-heading-title,
body .elementor-widget-heading h4.elementor-heading-title,
body .elementor-widget-heading h5.elementor-heading-title,
body .elementor-widget-heading h6.elementor-heading-title {
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
}

body .elementor-widget-text-editor { color: inherit; font: inherit; }
body .elementor-widget-text-editor p:last-child { margin-bottom: 0; }


/* ── Les blocs redeviennent des blocs ────────────────────────────────────── */
/* Nos sections, enveloppes et cadres étaient des <section>, <div>, <figure> :
   des blocs. En flex, les marges ne fusionnent plus et la page enfle. */

body .e-con.section, body .e-con.enveloppe, body .e-con.bloc,
body .e-con.cadre, body .e-con.embed__cadre, body .e-con.media,
body .e-con.legal, body .e-con.prose,
body .e-con.col-2, body .e-con.col-3, body .e-con.col-4 {
  display: block;
}


/* ── Les rangées retrouvent leur direction ───────────────────────────────── */
/* Nos flex à nous sont en ligne : un titre et sa note côte à côte, une galerie
   qui enroule. Sans ces règles, tout s'empile en colonne. */

body .e-con.rangee, body .e-con.galerie, body .e-con.deroule,
body .e-con.section__tete, body .e-con.ouverture__bas,
body .e-con.ouverture__actions, body .e-con.faits, body .e-con.plateau,
body .e-con.puces, body .e-con.paire, body .e-con.devis__pied,
body .e-con.pied__haut, body .e-con.pied__bas, body .e-con.menu__pied {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

/* Celles qui sont bien en colonne le redisent : la valeur par défaut
   d'Elementor coïncide, mais une classe ajoutée plus tard ne doit pas dépendre
   de cette coïncidence. */
body .e-con.colonne, body .e-con.metier, body .e-con.etape, body .e-con.avis,
body .e-con.chiffre, body .e-con.fait, body .e-con.form, body .e-con.champ,
body .e-con.contact__liens, body .e-con.avis__qui, body .e-con.liste-puces,
body .e-con.pied__reseaux, body .e-con.pied__bloc {
  display: flex;
  flex-direction: column;
}


/* ── Contextes de positionnement ─────────────────────────────────────────── */
/* Le plan de fond et son voile sont posés en absolu sur toute l'ouverture.
   Elementor donne `position: relative` à chaque enveloppe de widget : ils se
   calaient sur une boîte de 0 px de haut et l'ouverture s'effondrait.
   À refaire partout où un élément en `position: absolute` reste dans un bloc
   HTML à l'intérieur d'un conteneur converti. */

body .e-con.ouverture { position: relative; }
body .ouverture > .elementor-widget-html,
body .ouverture > .elementor-widget-html > .elementor-widget-container {
  position: static;
}


/* ── Les médias remplissent leur cadre ───────────────────────────────────── */
/* `.cadre` impose un rapport d'image et `object-fit: cover`. Entre le cadre et
   l'image, Elementor glisse deux div de hauteur automatique : l'image se
   calait sur elles et laissait le cadre à moitié vide. */

/* Le média est SORTI DU FLUX, ce n'est pas un détail de mise en forme.
   `.cadre` tient sa hauteur d'un `aspect-ratio`, et l'image demande
   `height: 100%`. Tant que l'image reste dans le flux, les deux se
   définissent l'une par l'autre : la hauteur du cadre dépend de son contenu,
   qui dépend de la hauteur du cadre. Le navigateur tranche en faveur de la
   taille naturelle — une image de 1 921 px dans un cadre de 536.
   En posant le widget en absolu sur tout le cadre, il ne contribue plus à la
   hauteur : le rapport d'image gouverne seul, et `height: 100%` a enfin une
   référence. */
body .e-con.cadre { position: relative; overflow: hidden; }

body .cadre > .elementor-widget-image,
body .cadre > .elementor-widget-video,
body .cadre > .elementor-widget {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
body .cadre > .elementor-widget > .elementor-widget-container,
body .cadre .elementor-wrapper {
  height: 100%;
}
body .cadre .elementor-widget-image img,
body .cadre video {
  width: 100%; height: 100%; object-fit: cover;
}
/* Le widget Vidéo pose son propre rapport d'image : le nôtre gouverne. */
body .cadre .elementor-wrapper.elementor-open-inline { aspect-ratio: auto; }

/* Le lecteur YouTube garde son 16:9 mais perd le fond noir d'Elementor. */
body .embed__cadre .elementor-widget-video,
body .embed__cadre .elementor-widget-video .elementor-widget-container,
body .embed__cadre .elementor-wrapper { height: 100%; background: transparent; }


/* ── Le bouton natif reprend le dessin du nôtre ──────────────────────────── */
/* Sans ces règles, Astra et Elementor repeignent le bouton en bleu : la classe
   `.bouton` atterrit sur l'enveloppe du widget, jamais sur le <a> lui-même. */

/* UN SEUL RECTANGLE. `.bouton` atterrit sur l'ENVELOPPE du widget, et
   `style.css` y dessine deja un bouton complet — fond, cadre, rembourrage —
   parce que sur la maquette statique `.bouton` EST le <a>. Sous Elementor le
   <a> est deux niveaux plus bas et recoit le meme dessin juste en dessous :
   les deux boites se superposaient et le bouton apparaissait encadre DEUX
   fois, 62 px de haut au lieu de 38. On vide l'enveloppe de tout ce qui
   dessine, et on lui laisse la largeur de son contenu. */
body .elementor-widget.bouton {
  display: inline-flex;
  width: auto;
  padding: 0;
  border: 0;
  background: none;
}
body .elementor-widget.bouton:hover,
body .elementor-widget.bouton:focus-within { background: none; }

/* Meme chose pour le renvoi, dont le filet se doublait sous le libelle.
   La marge haute, elle, reste : c'est de la mise en page, pas du dessin. */
body .elementor-widget.renvoi {
  display: inline-flex;
  width: auto;
  padding-bottom: 0;
  border-bottom: 0;
  background: none;
}

body .bouton .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 0;
  border: 1px solid var(--encre);
  background: var(--encre);
  color: var(--papier);
  font-family: var(--mono);
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: none;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
body .bouton .elementor-button:hover,
body .bouton .elementor-button:focus {
  background: transparent;
  color: var(--encre);
  border-color: var(--encre);
}

/* Dans le HTML d'origine la flèche était un <span aria-hidden> dans le lien.
   Le widget natif ne garde que le libellé : on la redessine en décoration
   pure, muette pour les lecteurs d'écran, comme avant. */
body .bouton .elementor-button::after {
  content: "\2192";
  font-family: var(--mono);
  transition: transform .3s ease;
}
body .bouton .elementor-button:hover::after { transform: translateX(5px); }

body .bouton--2 .elementor-button {
  background: transparent;
  color: var(--encre);
  border-color: rgb(20 21 26 / 0.24);
}
body .bouton--2 .elementor-button:hover {
  background: var(--encre); color: var(--papier); border-color: var(--encre);
}

/* Sur fond noir, les deux boutons s'inversent. */
body .salle .bouton .elementor-button,
body .ouverture .bouton .elementor-button {
  background: var(--papier); color: var(--encre); border-color: var(--papier);
}
body .salle .bouton .elementor-button:hover,
body .ouverture .bouton .elementor-button:hover {
  background: transparent; color: #fff; border-color: #fff;
}
body .salle .bouton--2 .elementor-button,
body .ouverture .bouton--2 .elementor-button {
  background: transparent; color: #fff; border-color: rgb(255 255 255 / 0.3);
}
body .salle .bouton--2 .elementor-button:hover,
body .ouverture .bouton--2 .elementor-button:hover {
  background: #fff; color: var(--encre); border-color: #fff;
}

/* Le renvoi est un lien souligné, pas un bouton plein. */
body .renvoi .elementor-button {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 0 0 6px;
  border: 0; border-radius: 0;
  border-bottom: 1px solid rgb(20 21 26 / 0.24);
  background: transparent; color: var(--encre);
  font-family: var(--mono); font-size: 11px; font-style: normal;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: border-color .3s ease, color .3s ease;
}
body .renvoi .elementor-button:hover {
  background: transparent; border-bottom-color: var(--accent); color: var(--accent);
}
body .renvoi .elementor-button::after { content: "\2192"; transition: transform .3s ease; }
body .renvoi .elementor-button:hover::after { transform: translateX(5px); }
body .salle .renvoi .elementor-button {
  color: #fff; border-bottom-color: rgb(255 255 255 / 0.3);
}
body .salle .renvoi .elementor-button:hover { color: var(--accent); }


/* ── Accordéon natif ─────────────────────────────────────────────────────── */
/* Il reprend le dessin de la FAQ : des filets, pas une boîte. */

body .faq .elementor-accordion,
body .faq .elementor-accordion-item { border: 0; }
body .faq .elementor-accordion-item { border-bottom: var(--filet); }
body .faq .elementor-tab-title {
  padding: clamp(15px, 1.7vw, 22px) 0;
  background: transparent; border: 0;
  font-family: var(--titre-police); font-style: normal;
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  letter-spacing: -0.015em; color: var(--encre);
}
body .faq .elementor-tab-title.elementor-active { color: var(--accent); }
body .faq .elementor-tab-content {
  padding: 0 0 clamp(15px, 1.7vw, 22px);
  background: transparent; border: 0;
  max-width: 68ch; color: var(--sourdine);
}
body .faq .elementor-accordion-icon { color: var(--accent); }
body .salle .faq .elementor-tab-title { color: #fff; }
body .salle .faq .elementor-tab-content { color: rgb(255 255 255 / 0.7); }
body .salle .faq .elementor-accordion-item { border-bottom-color: rgb(255 255 255 / 0.16); }


/* ── Le formulaire WPForms prend le dessin du site ───────────────────────── */
/* Le devis vit dans une section sombre : les champs sont clairs sur le noir. */

body .form .wpforms-field-label {
  font-family: var(--mono); font-size: 10px; font-style: normal; font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgb(255 255 255 / 0.5);
}
body .form input[type=text], body .form input[type=email],
body .form input[type=tel], body .form textarea {
  background: transparent;
  border: 0; border-bottom: 1px solid rgb(255 255 255 / 0.28);
  border-radius: 0; padding: 11px 0;
  color: #fff;
  font-family: var(--texte); font-style: italic; font-size: 16px;
}
body .form input::placeholder, body .form textarea::placeholder {
  color: rgb(255 255 255 / 0.35);
}
body .form input:focus, body .form textarea:focus {
  border-bottom-color: var(--accent); box-shadow: none; outline: none;
}
body .form .wpforms-field-label-inline { color: rgb(255 255 255 / 0.86); font-style: normal; }
body .form button[type=submit] {
  padding: 12px 22px;
  border: 1px solid var(--papier); border-radius: 0;
  background: var(--papier); color: var(--encre);
  font-family: var(--mono); font-size: 11px; font-style: normal;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: background .3s ease, color .3s ease;
}
body .form button[type=submit]:hover {
  background: transparent; color: #fff; border-color: #fff;
}


/* ── L'éditeur reste utilisable ──────────────────────────────────────────── */
/* Le grain est en `position: fixed` par-dessus toute la page : dans l'éditeur
   il se posait sur les poignées de widget et bloquait la sélection. L'en-tête
   fixe masquait la première section. */

body.elementor-editor-active::after { display: none; }
body.elementor-editor-active .tete { position: static; }
body.elementor-editor-active .curseur { display: none; }

/* LE POINT LE PLUS IMPORTANT DE CE BLOC : rendre le contenu visible.

   `style.css` cache tout ce qui doit se révéler au défilement — `.js .reveler
   { opacity: 0 }` — et c'est `main.js` qui le rallume, via `ScrollTrigger`.
   Or le sandbox pose la classe `js` DANS L'ÉDITEUR aussi, et là ScrollTrigger
   ne rallume rien : il observe `window`, alors que l'éditeur fait défiler son
   propre iframe. Les 38 blocs de l'accueil restaient donc à `opacity: 0` et la
   page s'ouvrait VIDE dans Elementor — impossible d'y éditer quoi que ce soit.

   Même raison pour les états posés par GSAP (`[data-suite]`, `[data-monter]`) :
   `.from()` écrit `opacity: 0; visibility: hidden` en style en ligne dès la
   création de la séquence, et si l'horloge ne tourne pas, rien ne les efface.
   `!important` est ici légitime et nécessaire : il faut battre un style en
   ligne, ce qu'aucune spécificité ne permet.

   Ces règles ne concernent QUE l'éditeur : le site public garde ses
   révélations. */
body.elementor-editor-active .reveler,
body.elementor-editor-active [data-suite],
body.elementor-editor-active [data-monter],
body.elementor-editor-active .ligne > span,
body.elementor-editor-active .ligne > em {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}


/* ── Les respirations rendues aux sections ───────────────────────────────── */
/* Le bloc « Enveloppes neutralisées » plus haut remet `--padding-*` à zéro sur
   tout `.e-con`, pour effacer les marges par défaut d'Elementor. Mais
   Elementor calcule ensuite `padding: var(--padding-block-start) …` avec UNE
   seule classe : à égalité avec `.ouverture` ou `.section`, sa feuille charge
   après la nôtre et gagne. Nos rembourrages disparaissaient donc avec les
   siens, et tout le contenu se collait au bord gauche.
   On les redéclare ici, en deux classes. */

/* ON NE COMBAT PAS LE RACCOURCI, ON PILOTE LES VARIABLES.
   Elementor pose ses marges en propriétés LOGIQUES —
   `.e-con-full { padding-inline-start: var(--padding-inline-start) }` — et non
   avec le raccourci `padding`. Entre une physique et une logique visant la
   même face, ce n'est pas la spécificité qui tranche mais l'ordre de cascade :
   `frontend.min.css` charge après le pont, donc il gagne toujours, même contre
   un sélecteur trois fois plus spécifique. Écrire `padding: …` ici est perdu
   d'avance.
   On renseigne donc SES variables. Bénéfice supplémentaire : un rembourrage
   réglé depuis l'éditeur pose un style en ligne sur ces mêmes variables et
   reprend la main — le réglage Elementor reste opérant. */

body .e-con.section {
  --padding-block-start: var(--respire);
  --padding-block-end: var(--respire);
  --padding-inline-start: var(--marge);
  --padding-inline-end: var(--marge);
}
body .e-con.section--serree {
  --padding-block-start: calc(var(--respire) * 0.55);
  --padding-block-end: calc(var(--respire) * 0.55);
}
body .e-con.section--pale { background: var(--papier-pale); }

body .e-con.ouverture {
  --padding-block-start: 118px;
  --padding-block-end: clamp(28px, 4vh, 50px);
  --padding-inline-start: var(--marge);
  --padding-inline-end: var(--marge);
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--noir);
  color: #fff;
}
body .e-con.ouverture--page {
  --padding-block-start: 136px;
  min-height: clamp(350px, 50svh, 490px);
}

body .e-con.salle { background: var(--noir); color: #fff; }

body .e-con.pied {
  --padding-block-start: var(--respire);
  --padding-block-end: 28px;
  --padding-inline-start: var(--marge);
  --padding-inline-end: var(--marge);
  background: var(--noir);
  color: #fff;
}

body .e-con.enveloppe {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
}
body .e-con.ouverture > .enveloppe,
body .e-con.ouverture .ouverture__contenu {
  position: relative;
  z-index: 2;
}

/* ── Les sous-titres des pages légales ───────────────────────────────────── */
/* `style.css` règle ces titres par `.legal h2` — et cette règle ne s'applique
   JAMAIS sur WordPress. La conversion a fait de chaque <h2> un widget Titre
   portant la classe `.titre-moyen` : le <h2> interne prend `font: inherit`, il
   suit donc l'échelle du grand titre de section et sortait à 50 px, huit fois
   de suite, sur une page de texte administratif. On rend ici l'échelle prévue
   par la maquette. À garder synchronisé avec `.legal h2` dans `style.css`.

   NOTE : `.legal h2` ajoute aussi un filet de séparation au-dessus de chaque
   sous-titre. Il n'est PAS repris ici : la bordure et son rembourrage
   rallongeaient la page de plus de 350 px, soit l'inverse du but recherché.
   Si le filet est souhaité un jour, c'est un choix de dessin à assumer comme
   tel, pas un effet de bord d'une réduction d'échelle. */

body .e-con.legal .titre-moyen {
  font-size: clamp(1.2rem, 1.75vw, 1.55rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: clamp(20px, 2.2vw, 30px) 0 9px;
}
body .e-con.legal > .titre-moyen:first-child { margin-top: 0; }


/* ── Les écarts rendus aux rangées ───────────────────────────────────────── */
/* Même cause : `.e-con { gap: var(--gap) }` d'Elementor écrase le nôtre. */

/* Ces valeurs recopient celles de `style.css` : toute réduction d'échelle doit
   être faite DANS LES DEUX FEUILLES, sinon elle ne se voit que sur la maquette
   statique et le site WordPress garde les anciens écarts. */
body .e-con.rangee   { --gap: clamp(20px, 2.4vw, 40px); gap: clamp(20px, 2.4vw, 40px); }
body .e-con.colonne  { gap: clamp(16px, 1.9vw, 26px); }
body .e-con.galerie  { gap: clamp(14px, 1.6vw, 24px); }
body .e-con.deroule  { gap: clamp(20px, 2.4vw, 38px); }
body .e-con.faits    { gap: clamp(20px, 2.8vw, 48px); }
body .e-con.plateau  { gap: 7px 14px; }
body .e-con.puces    { gap: 9px; }
body .e-con.paire    { gap: clamp(18px, 1.9vw, 25px); }
body .e-con.form     { gap: clamp(18px, 1.9vw, 25px); }
body .e-con.champ    { gap: 8px; }
body .e-con.metier   { gap: 13px; }
body .e-con.etape    { gap: 11px; }
body .e-con.avis     { gap: 14px; }
body .e-con.chiffre  { gap: 6px; }
body .e-con.liste-puces  { gap: 7px; }
body .e-con.pied__reseaux { gap: 9px; }
body .e-con.pied__haut { gap: clamp(26px, 3vw, 54px); }
body .e-con.pied__bas  { gap: 14px; }
body .e-con.section__tete { gap: clamp(20px, 3vw, 54px); }
body .e-con.ouverture__bas { gap: clamp(22px, 3vw, 48px); }
body .e-con.ouverture__actions { gap: 12px; }
body .e-con.menu__pied { gap: 16px; }
body .e-con.contact__liens { gap: 6px; }
body .e-con.avis__qui { gap: 3px; }
body .e-con.devis__pied { gap: 18px; }

/* L'ardoise du plan est un <p> devenu widget : ses trois mentions se
   collaient les unes aux autres, faute d'écart. */
body .ouverture__ardoise { display: flex; flex-wrap: wrap; gap: 7px 17px; }
body .elementor-widget.ouverture__ardoise .elementor-widget-container { display: contents; }

/* Le défilé des clients garde sa bande pleine largeur, hors enveloppe. */
body .e-con.section > .defile,
body .e-con.section > .elementor-widget-html > .elementor-widget-container > .defile {
  margin-inline: calc(var(--marge) * -1);
}


/* ── Les colonnes retrouvent leur largeur ────────────────────────────────── */
/* Un conteneur Elementor naît en `width: 100%` (via `--width`). Posé dans une
   galerie ou une rangée, il prend donc toute la ligne et les trois colonnes
   s'empilent : la page de l'accueil montait à 29 000 px de haut.
   On rend la main au `flex-basis` de la feuille du site — en deux classes,
   pour passer devant `.e-con`. */

body .e-con.galerie > .e-con,
body .e-con.galerie > .elementor-widget {
  width: auto;
  flex: 1 1 clamp(240px, 30%, 100%);
  min-width: 0;
}
body .e-con.galerie > .large  { flex: 1 1 clamp(280px, 47%, 100%); }
body .e-con.galerie > .pleine { flex: 1 1 100%; }

body .e-con.rangee > .e-con,
body .e-con.rangee > .elementor-widget { width: auto; min-width: 0; }
body .e-con.rangee > .col-2 { flex: 1 1 clamp(260px, 46%, 100%); }
body .e-con.rangee > .col-3 { flex: 1 1 clamp(240px, 29%, 100%); }
body .e-con.rangee > .col-4 { flex: 1 1 clamp(200px, 21%, 100%); }

body .e-con.deroule > .e-con { width: auto; flex: 1 1 clamp(240px, 29%, 100%); min-width: 0; }

body .e-con.section__tete > .e-con:first-child { flex: 1 1 min(520px, 100%); }
body .e-con.section__tete > .section__note,
body .e-con.section__tete > .elementor-widget.section__note { flex: 1 1 min(360px, 100%); max-width: 42ch; }

body .e-con.paire > .champ { flex: 1 1 clamp(200px, 45%, 100%); }
body .e-con.pied__haut > .e-con { width: auto; flex: 1 1 clamp(190px, 22%, 100%); min-width: 0; }
body .e-con.pied__haut > .pied__bloc--large { flex: 1 1 clamp(260px, 30%, 100%); }

/* Le bas de l'ouverture : le texte a gauche, les chiffres a DROITE.
   Meme cause que ci-dessus, deux fois. Le bloc de gauche naissait en
   `width: 100%` et occupait toute la ligne, ce qui renvoyait les faits a la
   ligne suivante ; et chaque `.fait` faisait a son tour toute la largeur des
   faits, d'ou les trois chiffres empiles les uns sous les autres.
   `space-between` et `flex-end` sont a redire ici : `style.css` les declare sur
   `.ouverture__bas`, une seule classe, exactement la specificite de `.e-con`. */
body .e-con.ouverture__bas {
  justify-content: space-between;
  align-items: flex-end;
}
body .e-con.ouverture__bas > .e-con,
body .e-con.ouverture__bas > .elementor-widget { width: auto; min-width: 0; }
body .e-con.ouverture__bas > .bloc { flex: 1 1 min(520px, 100%); }
body .e-con.ouverture__bas > .faits { flex: 0 1 auto; }

/* Les trois faits cote a cote, chacun a la largeur de son contenu. */
body .e-con.faits > .e-con,
body .e-con.faits > .elementor-widget { width: auto; flex: 0 1 auto; min-width: 0; }

/* Les deux boutons cote a cote, a la largeur de leur libelle. */
body .e-con.ouverture__actions > .e-con,
body .e-con.ouverture__actions > .elementor-widget { width: auto; flex: 0 1 auto; }
body .e-con.ouverture__bas > .e-con { width: auto; }


/* ── WPForms : on vise SES sélecteurs, pas les nôtres ────────────────────── */
/* WPForms écrit `.wpforms-container .wpforms-form input[type=text]` — trois
   classes et un type. Une règle en `.form input` (deux classes) perd, quel que
   soit l'ordre : les champs restaient blancs et le bouton bleu sur la section
   noire. On reprend sa propre chaîne, préfixée de `body`. */

body .wpforms-container .wpforms-form .wpforms-field-label,
body .wpforms-container .wpforms-form legend {
  font-family: var(--mono); font-size: 10px; font-weight: 400; font-style: normal;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgb(255 255 255 / 0.55);
}
body .wpforms-container .wpforms-form .wpforms-field-sublabel {
  color: rgb(255 255 255 / 0.4); font-style: normal;
}

body .wpforms-container .wpforms-form input[type=text],
body .wpforms-container .wpforms-form input[type=email],
body .wpforms-container .wpforms-form input[type=tel],
body .wpforms-container .wpforms-form input[type=url],
body .wpforms-container .wpforms-form textarea,
body .wpforms-container .wpforms-form select {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgb(255 255 255 / 0.28);
  border-radius: 0;
  padding: 11px 0;
  color: #fff;
  font-family: var(--texte); font-style: italic;
  font-size: 16px;   /* 16 px mini : en dessous, iOS zoome au focus */
  box-shadow: none;
}
body .wpforms-container .wpforms-form input::placeholder,
body .wpforms-container .wpforms-form textarea::placeholder {
  color: rgb(255 255 255 / 0.35);
}
body .wpforms-container .wpforms-form input:focus,
body .wpforms-container .wpforms-form textarea:focus {
  border-bottom-color: var(--accent);
  box-shadow: none; outline: none;
}

/* Cases et boutons radio : le libellé reprend le dessin des puces du site. */
body .wpforms-container .wpforms-form .wpforms-field-radio label,
body .wpforms-container .wpforms-form .wpforms-field-checkbox label {
  color: rgb(255 255 255 / 0.86); font-style: normal;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
}
body .wpforms-container .wpforms-form input[type=radio],
body .wpforms-container .wpforms-form input[type=checkbox] { accent-color: var(--accent); }

body .wpforms-container .wpforms-form button[type=submit],
body .wpforms-container .wpforms-submit-container button {
  padding: 12px 22px;
  border: 1px solid var(--papier); border-radius: 0;
  background: var(--papier); color: var(--encre);
  font-family: var(--mono); font-size: 11px; font-style: normal; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: background .3s ease, color .3s ease;
}
body .wpforms-container .wpforms-form button[type=submit]:hover,
body .wpforms-container .wpforms-submit-container button:hover {
  background: transparent; color: #fff; border-color: #fff;
}

/* Les messages d'erreur : le rouge de charte ne passe pas 4,5:1 en petit
   corps sur le noir, on l'éclaircit — lisible avant d'être à la marque. */
body .wpforms-container .wpforms-form .wpforms-error,
body .wpforms-container .wpforms-form label.wpforms-error { color: #FF8FA6; }
body .wpforms-container .wpforms-form input.wpforms-error,
body .wpforms-container .wpforms-form textarea.wpforms-error { border-bottom-color: #FF8FA6; }


/* WPForms pilote son bouton par variables :
   `background-color: var(--wpforms-button-background-color)`. Disputer la
   spécificité ne sert à rien — on renseigne SES variables, comme pour les
   marges d'Elementor. Bénéfice identique : les réglages de l'extension
   restent opérants et une mise à jour ne casse rien. */
body .wpforms-container {
  --wpforms-button-background-color: #E7E6E1;
  --wpforms-button-background-color-alt: #E7E6E1;
  --wpforms-button-text-color: #14151A;
  --wpforms-button-border-color: #E7E6E1;
  --wpforms-button-border-radius: 0px;
  --wpforms-button-border-size: 1px;
  --wpforms-button-border-style: solid;
  --wpforms-button-size-font-size: 11px;
  --wpforms-button-size-height: auto;
  --wpforms-button-size-padding-h: 22px;
  --wpforms-field-border-radius: 0px;
  --wpforms-field-border-color: rgba(255, 255, 255, 0.28);
  --wpforms-field-background-color: transparent;
  --wpforms-field-text-color: #ffffff;
  --wpforms-label-color: rgba(255, 255, 255, 0.55);
  --wpforms-label-sublabel-color: rgba(255, 255, 255, 0.4);
  --wpforms-label-error-color: #FF8FA6;
  --wpforms-container-border-radius: 0px;
}


/* ── Ajustements après relecture du rendu en ligne ───────────────────────── */

/* Le pied : mêmes bases que la feuille du site, sinon la colonne « Contact »
   passe seule à la ligne. */
body .e-con.pied__haut > .e-con { flex: 1 1 clamp(150px, 19%, 100%); }
body .e-con.pied__haut > .pied__bloc--large { flex: 1 1 clamp(220px, 25%, 100%); }

/* Les coordonnées : le convertisseur les regroupe dans un même bloc HTML, où
   un <a> redevient inline. On rétablit la colonne sur l'enveloppe du widget. */
body .contact__liens .elementor-widget-container {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}

/* Les renvois des métiers se calent en bas de colonne. Sous Elementor le
   renvoi est un widget Bouton : la marge automatique se pose sur son
   enveloppe, pas sur le <a> interne. */
body .e-con.metier > .renvoi { margin-top: auto; padding-top: 16px; }

/* `.metier` doit remplir sa colonne pour que le `margin-top: auto` du renvoi
   ait une hauteur contre laquelle pousser. Sous Elementor, `.col-3` est un
   bloc : son enfant ne s'étire pas tout seul. */
body .e-con.col-2 > .metier,
body .e-con.col-3 > .metier,
body .e-con.col-4 > .metier,
body .e-con.col-3 > .avis,
body .e-con.col-3 > .etape { height: 100%; }