/* ============================================================
   ESTATOO — feuille unique. Source ; dist/style.css en est une
   copie ecrasee a chaque rendu.

   Huit jetons de couleur, pas un de plus, et aucune valeur de
   couleur ecrite en dur : tout descend de var(--...), les seules
   exceptions etant les melanges color-mix.

   Traits tenus ici : cadre de 1280 a 80 (1380 a 30 pour la seule
   bande d avis) · deux rayons, 10 et 5, la pilule restant aux
   boutons et aux champs · aucun degrade, aucune ombre portee, le
   contour est un trait d un pixel · les intitules sont precedes
   d un DOUBLE OBLIQUE decoupe · les cartes ouvrent par leur vue.
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: 'Figtree', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
p, figure, address, blockquote { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: 'Plus Jakarta Sans', 'Figtree', sans-serif; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
button { font: inherit; }

:focus-visible { outline: 2px solid var(--marque); outline-offset: 3px; }

/* ---- Rail --------------------------------------------------- */
.es-rail { width: min(100% - 40px, 1280px); margin-inline: auto; }
.es-rail--large { width: min(100% - 20px, 1380px); }

@media (min-width: 900px) {
  .es-rail { width: min(100% - 160px, 1280px); }
  .es-rail--large { width: min(100% - 60px, 1380px); }
}

.es-b { padding-block: clamp(48px, 7vw, 104px); }
.es-b--hero, .es-b--appel, .es-b--faq { padding-block: 0; }
.es-b--sombre { background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque)); }
.es-b--sombre .es-lbl, .es-b--sombre p { color: color-mix(in srgb, var(--sur-marque) 78%, transparent); }

/* ---- Intitule : le double oblique est DECOUPE, jamais ecrit -- */
.es-lbl {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px; font-size: 13px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--texte-doux);
}
.es-lbl i {
  position: relative; display: block; width: 16px; height: 12px; flex: none;
  background: var(--accent); pointer-events: none;
  clip-path: polygon(4px 0, 7px 0, 3px 12px, 0 12px);
}
.es-lbl i::after {
  content: ''; position: absolute; inset: 0; background: var(--accent);
  clip-path: polygon(12px 0, 15px 0, 11px 12px, 8px 12px);
}

/* ---- Titres ------------------------------------------------- */
.es-t { font-size: clamp(28px, 3.4vw, 44px); }
.es-t--moyen { font-size: clamp(24px, 2.6vw, 34px); }
.es-t--geant { font-size: clamp(34px, 5.4vw, 62px); line-height: 1.04; }
.es-t em { font-style: normal; color:var(--encre-marque,var(--marque)); }
.es-b--sombre .es-t em, .es-appel__dedans .es-t em { color: var(--accent); }

.es-chapo { margin: 0; color: var(--texte-doux); max-width: 62ch; }
.es-prose p { margin: 0 0 14px; color: var(--texte-doux); }
.es-prose p:last-child { margin-bottom: 0; }
.es-mention { display: block; margin-top: 16px; font-size: 13px; color: var(--texte-doux); }

/* ---- Tete de bande ------------------------------------------ */
.es-tete {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 20px 32px; margin-bottom: clamp(24px, 3vw, 44px);
}
.es-tete__g { flex: 1 1 380px; min-width: 0; }
.es-tete__d { flex: 0 1 400px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }

/* ---- Boutons : la pilule leur est reservee ------------------- */
.es-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px;
  border-radius: 100px; border: 1px solid var(--bordure); background: var(--fond);
  color: var(--texte); font-weight: 600; font-size: 15px; line-height: 1;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.es-btn::after {
  content: ''; width: 14px; height: 14px; flex: none; background: currentColor;
  pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M9 7h8v8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M9 7h8v8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.es-btn--plein { background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque)); border-color:var(--encre-marque,var(--marque)); }
.es-btn--plein:hover { background: color-mix(in srgb, var(--marque) 84%, var(--texte)); }
.es-btn--clair { background: var(--fond); color: var(--texte); border-color: var(--fond); }
.es-btn--nu { background: transparent; border-color: transparent; padding-inline: 0; color:var(--encre-marque,var(--marque)); }
.es-btn--nu:hover { color: color-mix(in srgb, var(--marque) 70%, var(--texte)); }
a.es-btn:hover { border-color:var(--encre-marque,var(--marque)); }

/* ---- Points : repere carre, jamais une coche ---------------- */
.es-points { display: grid; gap: 10px; margin: 16px 0 0; }
.es-points li { position: relative; padding-left: 22px; color: var(--texte-doux); font-size: 15px; }
.es-points li::before {
  content: ''; position: absolute; left: 0; top: 8px; width: 8px; height: 8px;
  background: var(--accent); border-radius: 5px; pointer-events: none;
}
.es-points--fin li { font-size: 14px; }

.es-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.es-tags span {
  padding: 5px 12px; border: 1px solid var(--bordure); border-radius: 100px;
  font-size: 13px; color: var(--texte-doux);
}

/* ---- Vues --------------------------------------------------- */
.es-vue { position: relative; overflow: hidden; border-radius: 10px; background: var(--fond-2); }
.es-vue img { width: 100%; height: 100%; object-fit: cover; }
.es-vue--nue { min-height: 120px; }
.es-vue figcaption {
  position: absolute; left: 14px; bottom: 14px; padding: 6px 14px; border-radius: 100px;
  background: var(--fond); color: var(--texte); font-size: 13px; font-weight: 600;
}

/* ============================================================
   BARRE — posee sur le hero, sans fond, jusqu au premier defilement
   ============================================================ */
.es-barre {
  position: sticky; top: 0; z-index: 60;
  background: transparent;
  transition: background .2s ease, border-color .2s ease;
  border-bottom: 1px solid transparent;
}
.es-barre__rail { display: flex; align-items: center; gap: 24px; min-height: 86px; }
.es-barre--pose { background: var(--fond); border-bottom-color: var(--bordure); }
/* Sur la home, l entete flotte SANS fond au-dessus du hero (retrait negatif
   plus haut) : son encre heritee de --texte y est aussi sombre que le voile
   du cadre vide qu elle recouvre (R4b). Tant qu elle n a pas pose son fond,
   elle porte la meme encre claire que le reste de la scene. */
body:has(main > .es-b--hero:first-child) .es-barre:not(.es-barre--pose) {
  color: var(--fond);
}

/* LOGO À GAUCHE DU NOM (14 sept 2026). `.es-logo` n'etait qu'un style TYPOGRAPHIQUE : quand la
   fabrique y injecte l'image de marque (`zx-brandlogo`), l'<img> et le nom s'empilaient faute de
   mise en ligne, et le rail sans retrait collait le logo au bord (x=0, image rognee). */
.es-logo { margin: 0; display: inline-flex; align-items: center; gap: 11px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 21px; letter-spacing: -0.03em; text-decoration: none; color: inherit; }
.es-logo img, .es-logo .zx-brandlogo { height: 38px; width: auto; flex: none; display: block; border-radius: 8px; }
.es-logo > span { white-space: nowrap; }
/* Retrait du rail : sans lui le logo touche le bord de la fenetre. */
.es-barre__rail { padding-inline: clamp(16px, 3vw, 40px); }
@media (max-width: 640px) { .es-logo { font-size: 18px; gap: 9px; } .es-logo img, .es-logo .zx-brandlogo { height: 32px; } }
.es-logo em { font-style: normal; color: var(--accent); }

.es-nav { margin-left: auto; }
.es-nav__l1 { display: flex; align-items: center; gap: 4px; }
.es-nav__e { position: relative; }
.es-nav__l {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px;
  border-radius: 5px; font-size: 15px; font-weight: 500; color: inherit;
}
.es-nav__l:hover { color:var(--encre-marque,var(--marque)); }
.es-barre--pose .es-nav__l:hover { background: var(--fond-2); }

/* Le chevron dit qu un volet existe ; il pivote a l ouverture. */
.es-chev {
  display: block; width: 9px; height: 9px; flex: none; pointer-events: none;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .18s ease;
}
.es-nav__e:hover .es-chev, .es-nav__e:focus-within .es-chev { transform: translateY(1px) rotate(225deg); }

/* ---- Volet ---------------------------------------------------
   Le decalage sous le lien est un PADDING, jamais une marge : la
   souris ne doit jamais traverser un trou entre le lien et le
   panneau, sinon le volet se referme en route. */
.es-vol {
  position: absolute; top: 100%; left: 0; z-index: 70;
  padding-top: 14px; width: max-content; max-width: min(760px, calc(100vw - 48px));
  opacity: 0; visibility: hidden; transform: translate(var(--dx, 0px), 6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.es-nav__e:hover > .es-vol, .es-nav__e:focus-within > .es-vol {
  opacity: 1; visibility: visible; transform: translate(var(--dx, 0px), 0);
}
.es-vol__dedans {
  display: flex; gap: 28px; padding: 24px;
  min-width: 420px; border: 1px solid var(--bordure); border-radius: 10px;
  background: var(--fond); color: var(--texte);
}
.es-vol__cols { display: flex; gap: 28px; flex: 1 1 auto; min-width: 0; }
.es-vol__col { min-width: 190px; }
.es-vol__ct {
  margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--texte-doux);
}
.es-vol__col li + li { margin-top: 2px; }
.es-vol__col a { display: block; padding: 7px 10px; margin-left: -10px; border-radius: 5px; font-size: 15px; }
.es-vol__col a:hover { background: var(--fond-2); color:var(--encre-marque,var(--marque)); }

.es-vol__vitrine { flex: 0 0 210px; min-width: 0; }
.es-vol__vue { height: 132px; margin-bottom: 12px; }
.es-vol__vitrine b { display: block; font-size: 15px; }
.es-vol__vitrine span { display: block; margin-top: 4px; font-size: 13px; color: var(--texte-doux); }

.es-barre__fin { display: none; }
@media (min-width: 1080px) { .es-barre__fin { display: block; } }

/* ---- Poussoir ------------------------------------------------ */
.es-poussoir {
  margin-left: auto; display: grid; gap: 5px; padding: 12px;
  border: 1px solid var(--bordure); border-radius: 100px; background: transparent;
  cursor: pointer;
}
.es-poussoir i { display: block; width: 20px; height: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
.es-barre--ouverte .es-poussoir i:first-child { transform: translateY(3.5px) rotate(45deg); }
.es-barre--ouverte .es-poussoir i:last-child { transform: translateY(-3.5px) rotate(-45deg); }

@media (max-width: 1079px) {
  .es-nav {
    position: fixed; inset: 86px 0 auto; z-index: 55;
    max-height: calc(100dvh - 86px); overflow-y: auto;
    padding: 16px 20px 28px; background: var(--fond);
    border-top: 1px solid var(--bordure);
    display: none;
  }
  .es-barre--ouverte { background: var(--fond); border-bottom-color: var(--bordure); }
  .es-barre--ouverte .es-nav { display: block; }
  .es-nav__l1 { flex-direction: column; align-items: stretch; gap: 0; }
  .es-nav__l { padding: 13px 0; font-size: 17px; border-bottom: 1px solid var(--bordure); }
  .es-vol {
    position: static; opacity: 1; visibility: visible; transform: none;
    padding-top: 8px; width: auto; max-width: none;
  }
  .es-vol__dedans { flex-direction: column; min-width: 0; padding: 14px; background: var(--fond-2); }
  .es-vol__cols { flex-direction: column; gap: 14px; }
  .es-vol__vitrine { flex: none; }
  .es-vol__vue { height: 110px; }
}
@media (min-width: 1080px) { .es-poussoir { display: none; } }

/* ---- Fil d ariane -------------------------------------------- */
.es-fil { padding: 18px 0 0; font-size: 13px; color: var(--texte-doux); }
.es-fil ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.es-fil li + li::before { content: '/'; margin-right: 6px; color: var(--bordure); }
.es-fil a:hover { color:var(--encre-marque,var(--marque)); }

/* ============================================================
   HERO — vue plein cadre, contenu ancre a gauche
   ============================================================ */
main > .es-b--hero:first-child { margin-top: -86px; }
.es-hero__scene { position: relative; isolation: isolate; min-height: min(900px, 100svh); }
.es-hero__vue { position: absolute; inset: 0; border-radius: 0; z-index: -2; }
.es-hero__voile {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: color-mix(in srgb, var(--texte) 58%, transparent);
}
/* Etat VIDE : le voile normal (58%) laisse un fond gris moyen qui n offre
   de contraste suffisant a AUCUNE encre claire ni sombre (R4b). Sur cadre
   plein, une vraie photo assombrit deja la scene ; sur cadre vide, seul le
   voile porte le fond — on l epaissit alors pour tenir 4.5:1. */
.es-hero__scene:has(.es-vue--nue) .es-hero__voile {
  background: color-mix(in srgb, var(--texte) 74%, transparent);
}
.es-hero__dedans {
  position: relative; padding: clamp(120px, 14vw, 200px) 0 clamp(56px, 7vw, 96px);
  color: var(--fond);
}
.es-hero__dedans .es-lbl { color: color-mix(in srgb, var(--fond) 82%, transparent); }
.es-hero__dedans .es-t { max-width: 17ch; }
/* L accent de titre reste dans le meme registre clair que le reste du H1 :
   --accent n est pas garanti lisible sur un cadre sombre (R4b) — seul
   --marque/--accent choisi CLAIR par le client le serait, ce que le
   contrat de palette ne verifie pas. */
.es-hero__dedans .es-t em { color: var(--fond); }
.es-hero__sous { max-width: 56ch; margin-top: 18px; color: color-mix(in srgb, var(--fond) 84%, transparent); }
.es-hero__appels { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Le rond du bas de hero : un pur repere, il ne prend pas la souris. */
.es-hero__rond {
  position: absolute; right: 28px; bottom: 28px; width: 130px; height: 130px;
  border-radius: 100px; border: 1px solid color-mix(in srgb, var(--fond) 45%, transparent);
  pointer-events: none;
}
.es-hero__rond::before {
  content: ''; position: absolute; inset: 50% auto auto 50%; width: 14px; height: 14px;
  margin: -7px 0 0 -7px; border-radius: 5px; background: var(--accent);
}
@media (max-width: 900px) { .es-hero__rond { display: none; } }

.es-hero__atouts {
  display: flex; flex-wrap: wrap; gap: 10px 32px;
  padding: 22px 0 0; border-top: 1px solid var(--bordure);
  margin-top: clamp(28px, 4vw, 48px);
}
.es-hero__atouts li { position: relative; padding-left: 18px; font-size: 15px; color: var(--texte-doux); }
.es-hero__atouts li::before {
  content: ''; position: absolute; left: 0; top: 9px; width: 7px; height: 7px;
  border-radius: 5px; background:var(--marque);--sur-bande:var(--sur-marque); pointer-events: none;
}

/* ============================================================
   MARQUES — file continue, deux exemplaires pour la boucle
   ============================================================ */
.es-marques__t { margin: 0 0 20px; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux); }
.marquee { display: flex; overflow: hidden; gap: 0; }
.marquee > ul {
  display: flex; align-items: center; gap: 56px; flex: none; min-width: 0;
  padding-right: 56px; animation: es-file 34s linear infinite;
}
.marquee > ul > li { flex: none; font-size: 19px; font-weight: 600; color: var(--texte-doux); white-space: nowrap; }
.marquee img { height: 34px; width: auto; object-fit: contain; }
@keyframes es-file { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .marquee > ul { animation: none; } }

/* ============================================================
   CARTES — la vue OUVRE la carte, l intitule vient dessous
   Le nombre de colonnes descend des donnees : base en pixels,
   report a la ligne libre, jamais de compte fige dans la coquille.
   ============================================================ */
.es-cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 23px; }
.es-cartes > li { min-width: 0; }
@media (max-width: 1024px) { .es-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 500px) { .es-cartes { grid-template-columns: repeat(1, minmax(0, 1fr)); } }

.es-carte__dedans {
  position: relative; display: block; height: 100%; overflow: hidden;
  border: 1px solid var(--bordure); border-radius: 10px; background: var(--fond);
  transition: border-color .18s ease;
}
a.es-carte__dedans:hover { border-color:var(--encre-marque,var(--marque)); }
.es-carte__vue { border-radius: 0; aspect-ratio: 411 / 320; }
.es-carte__dedans > :not(.es-carte__vue) { padding-inline: 24px; }
.es-carte__dedans > :not(.es-carte__vue):first-of-type { padding-top: 22px; }
.es-carte__dedans > :last-child { padding-bottom: 24px; }
.es-carte__no {
  display: block; margin-top: 20px; font-size: 13px; font-weight: 700;
  letter-spacing: .1em; color: var(--accent);
}
.es-carte__dedans h3 { margin: 8px 0 8px; font-size: 21px; }
.es-carte__dedans p { margin: 0; color: var(--texte-doux); font-size: 15px; }
.es-carte__lien {
  display: block; margin-top: 18px; font-size: 14px; font-weight: 600;
  color:var(--encre-marque,var(--marque)); text-decoration: underline; text-underline-offset: 4px;
}
.es-carte--sombre .es-carte__lien { color:var(--sur-bande,var(--sur-marque)); }
.es-carte__date { display: block; margin-top: 20px; font-size: 13px; color: var(--texte-doux); }

.es-carte--sombre .es-carte__dedans {
  background: color-mix(in srgb, var(--sur-marque) 8%, transparent);
  border-color: color-mix(in srgb, var(--sur-marque) 22%, transparent);
}
.es-carte--sombre h3 { color:var(--sur-bande,var(--sur-marque)); }
.es-carte--sombre p, .es-carte--sombre .es-points li { color: color-mix(in srgb, var(--sur-marque) 76%, transparent); }
.es-carte--sombre .es-tags span { border-color: color-mix(in srgb, var(--sur-marque) 28%, transparent); color: color-mix(in srgb, var(--sur-marque) 80%, transparent); }
.es-carte__marque { display: block; margin-top: 20px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }

/* ---- introSeo ------------------------------------------------ */
.es-intro { display: flex; flex-wrap: wrap; gap: 24px 56px; }
.es-intro__g { flex: 1 1 420px; min-width: 0; }
.es-intro__d { flex: 1 1 480px; min-width: 0; }

/* ---- blocsSeo : l alternance est tenue par la coquille -------- */
.es-bloc {
  display: flex; flex-wrap: wrap; align-items: center; gap: 28px 56px;
  padding-block: clamp(28px, 4vw, 52px);
}
.es-bloc + .es-bloc { border-top: 1px solid var(--bordure); }
.es-bloc__mot { flex: 1 1 440px; min-width: 0; }
.es-bloc__vue { flex: 1 1 420px; min-width: 0; aspect-ratio: 5 / 4; }
.es-bloc--inverse .es-bloc__vue { order: -1; }
@media (max-width: 760px) { .es-bloc--inverse .es-bloc__vue { order: 0; } }
.es-bloc__mot .es-t { margin-bottom: 14px; }
.es-bloc__mot .es-btn { margin-top: 18px; }

/* ---- expertiseSeo -------------------------------------------- */
.es-exp { display: flex; flex-wrap: wrap; gap: 28px 56px; align-items: center; }
.es-exp__vue { flex: 1 1 420px; min-width: 0; aspect-ratio: 4 / 3; }
.es-exp__mot { flex: 1 1 440px; min-width: 0; }
.es-exp__reperes { display: flex; flex-wrap: wrap; gap: 20px; margin-top: clamp(24px, 3vw, 40px); }
.es-exp__reperes li {
  flex: 1 1 300px; min-width: 0; padding: 20px 22px;
  border: 1px solid var(--bordure); border-radius: 10px;
}
.es-exp__reperes span { display: block; font-size: 13px; font-weight: 700; letter-spacing: .1em; color: var(--accent); }
.es-exp__reperes b { display: block; margin: 8px 0 6px; font-size: 18px; }
.es-exp__reperes p { margin: 0; font-size: 15px; color: var(--texte-doux); }

/* ---- whyUs --------------------------------------------------- */
.es-why { display: flex; flex-wrap: wrap; gap: 32px 56px; }
.es-why__g { flex: 1 1 440px; min-width: 0; }
.es-why__vue { margin-top: 24px; aspect-ratio: 16 / 10; }
.es-why__d { flex: 1 1 380px; min-width: 0; display: grid; gap: 18px; align-content: start; }
.es-why__d li { display: flex; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--bordure); }
.es-why__d li:last-child { border-bottom: 0; padding-bottom: 0; }
.es-why__no { flex: none; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--accent); padding-top: 4px; }
.es-why__d b { display: block; font-size: 18px; }
.es-why__d p { margin: 6px 0 0; color: var(--texte-doux); font-size: 15px; }

/* ---- zonesAutour --------------------------------------------- */
.es-communes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.es-communes > li { min-width: 0; }
@media (max-width: 1024px) { .es-communes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 500px) { .es-communes { grid-template-columns: repeat(1, minmax(0, 1fr)); } }
.es-commune {
  display: flex; align-items: center; gap: 12px; height: 100%; padding: 12px 16px;
  border: 1px solid var(--bordure); border-radius: 10px; font-size: 15px; font-weight: 500;
}
a.es-commune:hover { border-color:var(--encre-marque,var(--marque)); color:var(--encre-marque,var(--marque)); }
.es-commune__vue { flex: none; width: 48px; height: 48px; border-radius: 5px; }

/* ---- process ------------------------------------------------- */
.es-etapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 23px; }
.es-etapes > li { min-width: 0; }
@media (max-width: 1024px) { .es-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 500px) { .es-etapes { grid-template-columns: repeat(1, minmax(0, 1fr)); } }
.es-etape__haut { position: relative; margin-bottom: 16px; }
.es-etape__vue { aspect-ratio: 4 / 3; }
.es-etape__no {
  position: absolute; left: 14px; bottom: 14px; padding: 6px 14px; border-radius: 100px;
  background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque)); font-size: 13px; font-weight: 700; letter-spacing: .08em;
}
.es-etapes h3 { font-size: 19px; }
.es-etapes p { margin: 8px 0 0; color: var(--texte-doux); font-size: 15px; }

/* ---- chiffres ------------------------------------------------ */
.es-nb { display: flex; flex-wrap: wrap; gap: 28px 56px; align-items: center; }
.es-nb__vue { flex: 1 1 420px; min-width: 0; aspect-ratio: 628 / 350; }
.es-nb__d { flex: 1 1 440px; min-width: 0; }
.es-nb__l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px; margin-top: 24px; }
.es-nb__l li { min-width: 0; }
@media (max-width: 500px) { .es-nb__l { grid-template-columns: repeat(1, minmax(0, 1fr)); } }
.es-nb__l b { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(30px, 3.4vw, 44px); line-height: 1; letter-spacing: -0.03em; }
.es-nb__l span { display: block; margin-top: 8px; font-size: 14px; color: var(--texte-doux); }

/* ---- ultralocalMap ------------------------------------------- */
.es-loc { display: flex; flex-wrap: wrap; gap: 28px 48px; }
.es-loc__vue { flex: 1 1 460px; min-width: 0; aspect-ratio: 16 / 10; }
.es-loc__carte {
  flex: 1 1 360px; min-width: 0; padding: 28px;
  border: 1px solid var(--bordure); border-radius: 10px; background: var(--fond-2);
}
.es-loc__carte address { margin-top: 16px; font-style: normal; display: grid; gap: 4px; }
.es-loc__carte address span { display: block; color: var(--texte-doux); }

/* ============================================================
   AVIS — deux rangees superposees, la seconde en sens inverse
   ============================================================ */
.es-avis__piste { margin-top: 20px; }
.es-avis__piste--arriere > ul { animation-direction: reverse; animation-duration: 44s; }
.es-avis__piste > ul { gap: 23px; padding-right: 23px; align-items: stretch; }
/* LA CARTE D'AVIS REPREND LA MAIN SUR LE RAIL DE MARQUES (14 sept 2026). Les deux bandes partagent
   la mecanique `.marquee`, mais `.marquee > ul > li` (specificite 0,1,2) est ecrit pour une FILE DE
   LOGOS : `flex: none`, `white-space: nowrap`, 19px gras. Il battait `.es-avis__c` (0,1,0) : chaque
   temoignage tenait sur UNE ligne et la carte mesurait 1 200 px au lieu de 380. Le selecteur
   descendant (0,2,2) rend a la carte sa largeur et son retour a la ligne. */
.es-avis__piste > ul > .es-avis__c {
  flex: 0 0 380px; min-width: 0; white-space: normal; padding: 24px;
  border: 1px solid var(--bordure); border-radius: 10px; background: var(--fond);
  display: flex; flex-direction: column; gap: 10px;
  font-size: 17px; font-weight: 400; color: var(--texte);
}
.es-avis__note { display: flex; gap: 3px; }
.es-avis__note span {
  width: 13px; height: 13px; background: var(--accent); pointer-events: none;
  clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 61%, 81% 100%, 50% 76%, 19% 100%, 30% 61%, 0 38%, 38% 36%);
}
.es-avis__c > b { font-size: 17px; }
.es-avis__c > p { color: var(--texte-doux); font-size: 15px; }
.es-avis__c footer { margin-top: auto; display: flex; align-items: center; gap: 11px; padding-top: 12px; border-top: 1px solid var(--bordure); }
/* Le visage du client : photo reelle quand le contenu en fournit une, pastille a initiale sinon. */
.es-avis__av {
  width: 40px; height: 40px; flex: none; border-radius: 100px;
  object-fit: cover; display: block; background: var(--fond-2);
}
.es-avis__av--lettre { display: grid; place-items: center; font-weight: 700; font-size: 15px; }
.es-avis__id { min-width: 0; display: grid; gap: 2px; }
.es-avis__q { font-size: 14px; font-weight: 700; line-height: 1.2; }
.es-avis__r { font-size: 13px; color: var(--texte-doux); line-height: 1.2; }

/* ============================================================
   FAQ — posee sur une vue pleine, le propos tient la moitie droite
   ============================================================ */
.es-faq__scene { position: relative; isolation: isolate; padding-block: clamp(48px, 7vw, 104px); }
.es-faq__vue { position: absolute; inset: 0; z-index: -2; border-radius: 0; }
.es-faq__scene::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: color-mix(in srgb, var(--texte) 62%, transparent);
}
.es-faq__d {
  margin-left: auto; width: min(100%, 640px); padding: 32px;
  border-radius: 10px; background: var(--fond); color: var(--texte);
}
/* FAQ EN ACCORDÉON (14 sept 2026). La section servait un <dl> TOUJOURS DÉPLIÉ : cinq réponses
   longues empilées d'un bloc, illisible. Les trois autres coquilles du pool utilisent <details> —
   estatoo était la seule à ne pas le faire. Première question ouverte, le reste replié. */
.es-faq__q { border-top: 1px solid var(--bordure); }
.es-faq__q summary { list-style: none; cursor: pointer; padding: 18px 36px 18px 0; position: relative; font-weight: 700; font-size: 17px; }
.es-faq__q summary::-webkit-details-marker { display: none; }
.es-faq__q summary::after { content: ''; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; margin-top: -7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .18s ease; }
.es-faq__q[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.es-faq__r { padding: 0 0 18px; color: var(--texte-doux); font-size: 15px; line-height: 1.65; }

.es-faq__l dd { margin: 8px 0 0 40px; color: var(--texte-doux); font-size: 15px; }
.es-faq__encart { margin-top: 24px; padding: 18px 20px; border-radius: 10px; background: var(--fond-2); }
.es-faq__encart b { display: block; font-size: 16px; }
.es-faq__encart p { margin: 6px 0 0; font-size: 15px; color: var(--texte-doux); }
@media (max-width: 700px) { .es-faq__d { padding: 22px; } .es-faq__l dd { margin-left: 0; } }

/* ---- urgence ------------------------------------------------- */
.es-b--appel-court .es-rail { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: center; justify-content: space-between; }
.es-court { flex: 1 1 460px; min-width: 0; }
.es-court__d { flex: 0 1 320px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.es-court__tel { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; letter-spacing: -0.02em; }
.es-court__tel:hover { color:var(--encre-marque,var(--marque)); }

/* ---- certifications ------------------------------------------ */
.es-gar { display: flex; flex-wrap: wrap; gap: 28px 56px; }
.es-gar__g { flex: 1 1 380px; min-width: 0; }
.es-gar__l { flex: 2 1 520px; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-content: start; }
.es-gar__l li { min-width: 0; padding: 20px; border: 1px solid var(--bordure); border-radius: 10px; }
@media (max-width: 500px) { .es-gar__l { grid-template-columns: repeat(1, minmax(0, 1fr)); } }
.es-gar__l b { display: block; font-size: 17px; }
.es-gar__l p { margin: 6px 0 0; font-size: 15px; color: var(--texte-doux); }

/* ---- aides --------------------------------------------------- */
.es-disp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.es-disp li {
  min-width: 0; padding: 22px;
  border: 1px solid var(--bordure); border-radius: 10px; background: var(--fond-2);
}
@media (max-width: 1024px) { .es-disp { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 500px) { .es-disp { grid-template-columns: repeat(1, minmax(0, 1fr)); } }
.es-disp b { display: block; font-size: 18px; }
.es-disp p { margin: 8px 0 0; font-size: 15px; color: var(--texte-doux); }
.es-disp__cond { display: block; margin-top: 12px; font-size: 13px; color: var(--texte-doux); }

/* ---- materiaux : l intitule se lit SOUS la vue ---------------- */
.es-mat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 23px; }
.es-mat li { min-width: 0; }
@media (max-width: 1024px) { .es-mat { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 500px) { .es-mat { grid-template-columns: repeat(1, minmax(0, 1fr)); } }
.es-mat__vue { aspect-ratio: 1 / 1; margin-bottom: 14px; }
.es-mat b { display: block; font-size: 17px; }
.es-mat p { margin: 6px 0 0; font-size: 15px; color: var(--texte-doux); }

/* ---- tarifs : la pastille de prix est DECOUPEE ---------------- */
.es-tar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 23px; }
.es-tar > li {
  min-width: 0; display: flex; flex-direction: column;
  padding: 26px; border: 1px solid var(--bordure); border-radius: 10px;
}
@media (max-width: 1024px) { .es-tar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 500px) { .es-tar { grid-template-columns: repeat(1, minmax(0, 1fr)); } }
.es-tar__prix {
  align-self: flex-start; display: inline-flex; align-items: baseline; gap: 6px;
  padding: 10px 18px 10px 16px; margin-bottom: 16px;
  background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.es-tar__prix b { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 24px; font-weight: 800; }
.es-tar__prix i { font-style: normal; font-size: 13px; opacity: .8; }
.es-tar__t { font-size: 19px; }
.es-tar p { margin: 8px 0 0; color: var(--texte-doux); font-size: 15px; }
.es-tar .es-btn { margin-top: auto; padding-top: 20px; }

/* ---- realisations : un premier item MAITRE ------------------- */
.es-real { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 23px; }
.es-real > li { min-width: 0; }
.es-real__maitre { grid-column: 1 / -1; }
@media (max-width: 1024px) { .es-real { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 500px) { .es-real { grid-template-columns: repeat(1, minmax(0, 1fr)); } }
.es-real__maitre .es-real__vue { aspect-ratio: 1280 / 520; }
.es-real__vue { aspect-ratio: 4 / 3; margin-bottom: 14px; }
.es-real__meta { display: block; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.es-real__mot b { display: block; margin: 8px 0 6px; font-size: 19px; }
.es-real__mot p { margin: 0; color: var(--texte-doux); font-size: 15px; }

/* ============================================================
   AVANT / APRES — deux vues superposees, decoupe par --pos,
   commandee par un curseur en surimpression : souris, doigt,
   clavier. Jamais deux vignettes cote a cote.
   ============================================================ */
.es-ab { display: flex; flex-wrap: wrap; gap: 32px; }
.es-ab > li { flex: 1 1 460px; min-width: 0; }
.ab {
  position: relative; overflow: hidden; border-radius: 10px;
  aspect-ratio: 3 / 2; background: var(--fond-2); touch-action: none;
}
.ab__vue { position: absolute; inset: 0; margin: 0; }
.ab__vue img { width: 100%; height: 100%; object-fit: cover; }
.ab__vue--avant { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ab__trait {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px;
  margin-left: -1px; background: var(--fond); pointer-events: none; z-index: 3;
}
.ab__trait::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px;
  margin: -22px 0 0 -22px; border-radius: 100px;
  background: var(--fond); border: 2px solid var(--marque);
}
.ab__et {
  position: absolute; top: 14px; z-index: 5; padding: 5px 12px; border-radius: 100px;
  background: var(--fond); color: var(--texte); font-size: 12px; font-weight: 600;
}
.ab__et--a { left: 14px; }
.ab__et--b { right: 14px; }
.ab__poignee {
  position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%;
  margin: 0; padding: 0; background: transparent; border: 0;
  -webkit-appearance: none; appearance: none; cursor: ew-resize;
}
.ab__poignee::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.ab__poignee::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 44px; height: 44px; border-radius: 100px; background: transparent; cursor: ew-resize; }
.ab__poignee::-moz-range-track { height: 100%; background: transparent; }
.ab__poignee::-moz-range-thumb { width: 44px; height: 44px; border: 0; border-radius: 100px; background: transparent; cursor: ew-resize; }
.ab__poignee:focus-visible { outline: 2px solid var(--marque); outline-offset: 2px; }
.es-ab__mot { margin-top: 16px; }
.es-ab__mot b { display: block; font-size: 18px; }
.es-ab__mot p { margin: 6px 0 0; color: var(--texte-doux); font-size: 15px; }

/* ---- maillageInterne ----------------------------------------- */
.es-mail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.es-mail > li { min-width: 0; }
@media (max-width: 1024px) { .es-mail { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 500px) { .es-mail { grid-template-columns: repeat(1, minmax(0, 1fr)); } }
.es-mail__l {
  display: flex; align-items: center; gap: 14px; height: 100%; padding: 14px 16px;
  border: 1px solid var(--bordure); border-radius: 10px;
}
a.es-mail__l:hover { border-color:var(--encre-marque,var(--marque)); }
.es-mail__vue { flex: none; width: 62px; height: 62px; border-radius: 5px; }
.es-mail__vue--nue { display: block; background: var(--fond-2); }
.es-mail__mot { min-width: 0; flex: 1 1 auto; }
.es-mail__mot b { display: block; font-size: 16px; }
.es-mail__mot span { display: block; margin-top: 3px; font-size: 14px; color: var(--texte-doux); }
.es-mail__meta { flex: none; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }

/* ============================================================
   BANDEAU D APPEL — le titre est decoupe mot par mot
   ============================================================ */
.es-appel__scene { position: relative; isolation: isolate; }
.es-appel__vue { position: absolute; inset: 0; z-index: -2; border-radius: 0; }
.es-appel__voile {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: color-mix(in srgb, var(--texte) 70%, transparent);
}
.es-appel__dedans {
  position: relative; padding-block: clamp(56px, 8vw, 112px); text-align: center; color: var(--fond);
}
.es-appel__dedans .es-lbl { justify-content: center; color: color-mix(in srgb, var(--fond) 82%, transparent); }
.es-appel__dedans .es-t { max-width: 20ch; margin-inline: auto; }
.es-appel__dedans .es-t span { display: inline-block; opacity: .35; transition: opacity .4s ease; }
.es-appel__dedans .es-t span.es-mot--vif { opacity: 1; }
.es-appel__mot { max-width: 60ch; margin: 18px auto 0; color: color-mix(in srgb, var(--fond) 84%, transparent); }
.es-appel__pied { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 28px; }
.es-appel__form { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.es-appel__form input {
  flex: 1 1 260px; max-width: 320px; min-width: 0; padding: 14px 20px;
  border: 1px solid var(--bordure); border-radius: 100px; background: var(--fond); color: var(--texte); font: inherit;
}
@media (prefers-reduced-motion: reduce) { .es-appel__dedans .es-t span { opacity: 1; } }

/* ============================================================
   FORMULAIRE — cadre gris dont le bouton DEBORDE par le bas
   ============================================================ */
.es-ct { display: flex; flex-wrap: wrap; gap: 40px 56px; }
.es-ct__g { flex: 2 1 520px; min-width: 0; }
.es-ct__cadre {
  margin-top: 24px; margin-bottom: 26px; padding: 32px;
  border-radius: 10px; background: var(--fond-2); position: relative;
}
.es-ct__d { flex: 1 1 300px; min-width: 0; display: grid; gap: 20px; align-content: start; }
.es-ct__d li { padding-bottom: 18px; border-bottom: 1px solid var(--bordure); }
.es-ct__d li:last-child { border-bottom: 0; }
.es-ct__d b { display: block; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux); }
.es-ct__d span { display: block; margin-top: 6px; font-size: 17px; }

.es-form__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.es-case { min-width: 0; }
.es-case--haute { grid-column: 1 / -1; }
@media (max-width: 500px) { .es-form__grille { grid-template-columns: repeat(1, minmax(0, 1fr)); } }
.es-case label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 600; }
.es-case input, .es-case select, .es-case textarea {
  width: 100%; padding: 13px 18px; font: inherit; color: var(--texte);
  background: var(--fond); border: 1px solid var(--bordure); border-radius: 100px;
}
.es-case textarea { border-radius: 10px; resize: vertical; }
.es-case input:focus, .es-case select:focus, .es-case textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
}
.es-form__pied {
  display: flex; flex-wrap: wrap; width: 100%; justify-content: center; align-items: center; gap: 12px;
  margin-top: 24px; margin-bottom: -52px; position: relative; z-index: 2;
}
.es-btn--deborde {
  background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque)); border-color:var(--encre-marque,var(--marque)); cursor: pointer;
}
/* La mention se range SOUS le pied qui deborde, jamais dessous au sens
   de l empilement : sans ce retrait elle passerait derriere lui. */
.es-form .es-form__pied + .es-mention { margin-top: 68px; }
@media (max-width: 620px) { .es-ct__cadre { padding: 22px; } }

/* ============================================================
   ARTICLE — sommaire en colonne laterale GAUCHE
   ============================================================ */
.es-art__tete { max-width: 780px; }
.es-art__meta { margin-top: 12px; font-size: 14px; color: var(--texte-doux); }
.es-art__vue { margin: 28px 0 36px; aspect-ratio: 16 / 7; }
.es-art__corps { display: flex; flex-wrap: wrap; gap: 32px 56px; align-items: flex-start; }
.es-art__som {
  flex: 0 1 300px; min-width: 0; position: sticky; top: 110px;
  padding: 22px; border: 1px solid var(--bordure); border-radius: 10px;
}
.es-art__som b { display: block; margin-bottom: 12px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux); }
.es-art__som li + li { margin-top: 8px; }
.es-art__som a { font-size: 15px; color: var(--texte-doux); }
.es-art__som a:hover { color:var(--encre-marque,var(--marque)); }
.es-art__flot { flex: 1 1 520px; min-width: 0; }
.es-art__flot h2 { margin: 32px 0 12px; font-size: clamp(23px, 2.4vw, 30px); }
.es-art__flot h3 { margin: 24px 0 10px; font-size: 19px; }
.es-art__flot p { margin: 0 0 14px; color: var(--texte-doux); }
.es-art__encadre { margin: 24px 0; padding: 22px; border-radius: 10px; background: var(--fond-2); }
.es-art__encadre b { display: block; margin-bottom: 8px; font-size: 17px; }
.es-art__encadre p { margin: 0 0 8px; }
@media (max-width: 900px) { .es-art__som { position: static; flex: 1 1 100%; } }

/* ---- Mentions ------------------------------------------------ */
.es-leg { max-width: 780px; }
.es-leg__maj { margin-top: 10px; font-size: 14px; color: var(--texte-doux); }
.es-leg section { margin-top: 28px; }
.es-leg h2 { font-size: 20px; margin-bottom: 8px; }
.es-leg p { margin: 0 0 10px; color: var(--texte-doux); }

/* ---- Filtres ------------------------------------------------- */
.es-filtres { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.es-filtre {
  display: inline-block; padding: 10px 20px; border-radius: 100px;
  border: 1px solid var(--bordure); font-size: 15px; font-weight: 500;
}
a.es-filtre:hover { border-color:var(--encre-marque,var(--marque)); color:var(--encre-marque,var(--marque)); }
.es-filtre--actif { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* ---- Grille de fiches ---------------------------------------- */
.es-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 23px; }
.es-grille > li { min-width: 0; }
@media (max-width: 1024px) { .es-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 500px) { .es-grille { grid-template-columns: repeat(1, minmax(0, 1fr)); } }
.es-fiche__dedans {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  border: 1px solid var(--bordure); border-radius: 10px;
}
a.es-fiche__dedans:hover { border-color:var(--encre-marque,var(--marque)); }
.es-fiche__vue { aspect-ratio: 4 / 3; border-radius: 0; }
.es-fiche__dedans > :not(.es-fiche__vue) { margin-inline: 22px; }
.es-fiche__dedans .es-tar__prix { margin-top: -20px; position: relative; z-index: 2; align-self: flex-start; }
.es-fiche__dedans h3 { font-size: 18px; }
.es-fiche__dedans p { margin: 8px 0 0; font-size: 15px; color: var(--texte-doux); }
.es-fiche__appel { display: block; margin-top: auto; padding: 18px 0 22px; font-weight: 600; color:var(--encre-marque,var(--marque)); }

/* ---- Fiche produit ------------------------------------------- */
.es-fp { display: flex; flex-wrap: wrap; gap: 32px 56px; }
.es-fp__vue { flex: 1 1 460px; min-width: 0; aspect-ratio: 4 / 3; }
.es-fp__mot { flex: 1 1 420px; min-width: 0; }
.es-fp__prix { margin: 18px 0; display: flex; align-items: baseline; gap: 8px; }
.es-fp__prix b { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(28px, 3vw, 38px); }
.es-fp__prix i { font-style: normal; font-size: 14px; color: var(--texte-doux); }
.es-fp__mot .es-btn { margin-top: 22px; }

/* ---- Caracteristiques ---------------------------------------- */
.es-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; margin-top: 24px; }
.es-specs > div {
  min-width: 0; display: flex; justify-content: space-between; gap: 20px;
  padding: 14px 0; border-bottom: 1px solid var(--bordure);
}
.es-specs dt { color: var(--texte-doux); }
.es-specs dd { font-weight: 600; text-align: right; }
@media (max-width: 760px) { .es-specs { grid-template-columns: repeat(1, minmax(0, 1fr)); } }

/* ============================================================
   PIED — quatre colonnes INEGALES sur la surface sombre
   ============================================================ */
.es-pied { background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque)); padding-block: clamp(44px, 6vw, 76px) 28px; }
.es-pied__haut { display: flex; flex-wrap: wrap; gap: 36px 48px; }
.es-pied__marque { flex: 1 1 300px; min-width: 0; }
.es-pied__col { flex: 0 1 190px; min-width: 0; }
.es-pied__col:nth-of-type(3) { flex-basis: 140px; }
.es-pied__nap { flex: 1 1 260px; min-width: 0; }
.es-pied__mot { margin-top: 12px; font-size: 15px; color: color-mix(in srgb, var(--sur-marque) 74%, transparent); }
.es-pied__ct { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--sur-marque) 62%, transparent); }
.es-pied__col li + li { margin-top: 8px; }
.es-pied__col a, .es-pied__liens a { font-size: 15px; color: color-mix(in srgb, var(--sur-marque) 82%, transparent); }
.es-pied__col a:hover, .es-pied__liens a:hover { color: var(--accent); }
.es-pied__nap address { font-style: normal; display: grid; gap: 6px; }
.es-pied__nap span { font-size: 15px; color: color-mix(in srgb, var(--sur-marque) 82%, transparent); }
.es-pied__bas {
  display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; align-items: center;
  margin-top: 40px; padding-top: 22px;
  border-top: 1px solid color-mix(in srgb, var(--sur-marque) 20%, transparent);
}
.es-pied__bas small { font-size: 13px; color: color-mix(in srgb, var(--sur-marque) 66%, transparent); }
.es-pied__liens { display: flex; flex-wrap: wrap; gap: 8px 22px; }

/* ============================================================
   Reprises etroites
   ============================================================ */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .es-tete { flex-direction: column; align-items: flex-start; }
  .es-tete__d { flex: 1 1 auto; }
  .es-hero__dedans { padding-top: clamp(130px, 24vw, 170px); }
  .es-b--appel-court .es-rail { flex-direction: column; align-items: flex-start; }
  .es-specs dd { text-align: left; }
  .es-avis__c { flex-basis: 300px; }
  .es-mail__meta { display: none; }
}
@media (max-width: 420px) {
  .es-carte__dedans > :not(.es-carte__vue) { padding-inline: 18px; }
  .es-tar > li, .es-loc__carte, .es-exp__reperes li, .es-disp li, .es-gar__l li { padding: 20px; }
  .es-avis__c { flex-basis: 250px; padding: 20px; }
  .es-btn { padding: 12px 20px; }
}

/* contraste-source — bandes sombres : chacune declare son encre (--sur-bande) ; marque en texte : --encre-marque. */

/* contraste-bandes (14/09/2026) — le voile EXISTE, la mesure ne le voyait pas.
   .es-hero__voile / .es-appel__voile sont epaissis expres a l'etat vide (74 % / 70 % de --texte,
   commentaire « pour tenir 4.5:1 » plus haut). Mais ils sont en `pointer-events:none` : ils sortent
   du test de pixel, et le check lisait le cadre CLAIR dessous — entete, titre et chapo rendus
   « blancs sur gris clair », 1,12. On rend le voile mesurable A L'ETAT VIDE seulement : il est en
   z-index -1, derriere tout le contenu, donc rien ne change ni a l'oeil ni a la souris. Cadre
   REMPLI, la photo est dans la pile et le check ignore deja le texte sur image. */
.es-hero__scene:has(.es-vue--nue) .es-hero__voile,
.es-appel__scene:has(.es-vue--nue) .es-appel__voile { pointer-events: auto; }

/* >>> NORME COQUILLE — cadre vide (pose par _lib/poser-cadre-vide.mjs) */
/* ============================================================
   NORME COQUILLE — LE CADRE VIDE PORTE SON ENCRE (R4b)
   ------------------------------------------------------------
   R4 dit depuis toujours que le cadre VIDE et le cadre REMPLI sont deux
   etats TENABLES. Seule la moitie basse etait mesuree : « le cadre vide ne
   s effondre pas sous 24 px ». Personne ne mesurait la moitie haute : « le
   cadre vide reste tenable quand il est GRAND ».

   C est la faute qu Angelo a vue le 22 aout 2026. Il n a pas vu une
   composition fausse — les bandes de reference le prouvent : le hero de
   roofer est bien une photo plein cadre avec le texte ecrit dessus, et le
   cadre de plumbfixx mesure 5,5 colonnes sur 12 la ou le modele en prend 7.
   Il a vu l ETAT VIDE : un mur blanc de 800 x 750 px portant une lettre
   perdue. La coquille n embarque aucune photo — c est la regle — donc l
   etat vide n est pas un accident de fixture, c est l etat NORMAL d une
   coquille au repos. Il devait etre dessine, il ne l avait jamais ete.

   Ce fichier le dessine, UNE fois, pour toutes les coquilles. Il ne touche
   ni `display`, ni `position`, ni `overflow`, ni aucune boite : la
   geometrie de chaque modele est deja jugee par F1/F2 et par R2/R3, on n y
   revient pas. Il ne pose que de la peinture et de l encre.

   Le crochet est volontairement AGRAMMATICAL : `[data-slot]` sans image
   dedans. Les sept coquilles nomment leur cadre `kr-vue--nue`, `pf-ph--nu`,
   `ig--nu`, ou ne le nomment pas du tout — s appuyer sur ces noms, c est
   ecrire sept correctifs a la main, puis trente-sept. `data-slot` est pose
   par R1 sur TOUS les cadres de TOUTES les coquilles : c est le seul point
   d appui qui passe a l echelle.

   Les quatre couleurs sont des variables : la fabrique les change comme elle
   change une palette.

   LA TEINTE SE DECIDE PAR CADRE, PAS PAR COQUILLE. C est la faute qu Angelo
   a vue le 22 aout 2026 sur plumfixx : la coquille avait ete teintee SOMBRE
   en bloc, parce que son hero ecrit en blanc — sauf que ce blanc repose sur
   l aplat bleu de la SECTION, pas sur le cadre. Le placeholder lateral, qui
   ne porte aucune encre, devenait une dalle noire de 800 x 750 px au milieu
   d une page claire. Un placeholder qui ne porte rien n a aucune raison
   d etre sombre.

   Le defaut est donc CLAIR : un emplacement en attente se lit comme une
   carte grise, c est la convention de tout le metier, et c est la version
   qu Angelo avait validee. Seuls les cadres PORTEURS — ceux sur lesquels de
   l encre repose vraiment, hero pleine fenetre sous son voile — prennent la
   teinte que leur encre exige. Ces cadres-la sont trouves par la MESURE, pas
   a la main : `_lib/teinter-cadres.mjs` ouvre les pages rendues, regarde
   quelle encre tombe dans quel cadre, et ecrit la liste en queue du
   `style.css` de la coquille. R4b verifie ensuite le resultat sur les pixels.
   ============================================================ */

:root {
  --cadre-vide-fond: #e6e9ec;
  --cadre-vide-trame: rgba(0, 0, 0, .045);
  --cadre-vide-encre: rgba(17, 22, 28, .68);
  --cadre-vide-filet: rgba(0, 0, 0, .10);
}

[data-slot]:not(:has(img)):not(:has(video)) {
  background-color: var(--cadre-vide-fond);
  /* Une trame diagonale : sans elle un aplat sombre se lit comme une panne
     d affichage. Avec elle, il se lit comme un emplacement en attente. */
  background-image: repeating-linear-gradient(135deg,
    transparent 0 13px, var(--cadre-vide-trame) 13px 14px);
  box-shadow: inset 0 0 0 1px var(--cadre-vide-filet);
  color: var(--cadre-vide-encre);
  /* SEULE propriete de boite de cette feuille, et elle ne vit que sur l etat
     VIDE : elle disparait des que la fabrique injecte une photo. Elle sert a
     une chose — permettre a la legende de savoir si son cadre est assez large
     pour la porter (voir le @container plus bas). Sans elle, la meme legende
     s ecrit dans une pastille de zone de 28 px et dans un hero de 800 px. */
  container-type: inline-size;
}

/* L intitule. Les gabarits y mettent tantot l alt complet, tantot la seule
   initiale du sujet — et cette initiale, dans un cadre de hero, sort a
   78 px : une lettre geante a la derive, c est ce qui faisait « casse ».
   On la ramene a la taille d une legende, quelle que soit la taille du
   cadre : une legende ne grandit pas avec son cadre.

   Et par defaut elle se TAIT. Un cadre ne porte une legende que s il est
   assez large pour l ecrire sur une ligne lisible : une pastille de zone de
   28 px, un cadre de maillage de 84 px, ne portent pas de phrase — ils
   tiennent leur aplat. Ecrite quand meme, la legende s y empile en colonne
   d une lettre : c est exactement ce que T5 appelle un serrage, et la pose
   du cadre vide en avait fabrique 306 sur heatfix2, 256 sur roofivo, 220 sur
   electria. Le libelle n est pas perdu pour autant : les gabarits le portent
   deja en `aria-label`, il reste lu par les lecteurs d ecran et par le gate.

   Le seuil est en unites de conteneur, pas de fenetre : c est la largeur du
   CADRE qui decide, pas celle de l ecran. Un hero garde sa legende a 390 px
   de fenetre ; une pastille ne l a jamais, meme a 1440. */
[data-slot]:not(:has(img)):not(:has(video)) > * {
  font-size: 0 !important;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cadre-vide-encre);
  -webkit-text-fill-color: var(--cadre-vide-encre);
  opacity: 1;
  max-width: 34ch;
  text-align: center;
  text-shadow: none;
}

/* 260 px : en dessous, une legende de 34ch a 11 px ne tient pas deux mots par
   ligne — le seuil est celui de T5, pas un gout. Au-dessus, elle s ecrit. */
@container (min-width: 260px) {
  [data-slot]:not(:has(img)):not(:has(video)) > * {
    font-size: clamp(11px, .95vw, 14px) !important;
  }
}
/* <<< NORME COQUILLE — cadre vide */

/* >>> NORME COQUILLE — teinte des cadres porteurs (pose par _lib/teinter-cadres.mjs) */
/* Cadres PORTEURS : de l encre claire repose reellement dessus (mesure du
   2026-09-15 sur 12 page(s), 1440 et 390 px). Leur etat vide prend
   le sol de leur section, assombri d un cran, pour que cette encre reste
   lisible sans plaquer une dalle etrangere a la palette ; tous les autres
   cadres gardent le clair par defaut. Ne pas editer a la main : remesurer.

   Un cadre porteur SE TAIT. Sa legende est centree ; de l encre repose
   deja dessus, par definition — l ecrire, c est la poser en travers du
   titre. C est la collision qu on voyait sur le hero pleine fenetre de
   template-14 : « EMPLACEMENT VISUEL — ... » ecrit sur le paragraphe.
   Le libelle reste porte en aria-label, il n est pas perdu.

   Et il se tait EN ENTIER : une legende dessinee en pastille (fond, padding,
   ombre) laissait, a font-size 0, une plaquette claire vide sur le cadre
   sombre, lue 2,07 puis 4,40 par le gate voile (template-1, 14 et 15 sept).
   Seuls les enfants qui portent du texte perdent leur habillage : la trame
   et les decors vides du cadre restent. */
[data-slot="es-appel__vue"]:not(:has(img)):not(:has(video)) {
  --cadre-vide-fond: #474747;
  --cadre-vide-trame: rgba(255, 255, 255, .05);
  --cadre-vide-encre: rgba(255, 255, 255, .82);
  --cadre-vide-filet: rgba(255, 255, 255, .10);
}
[data-slot="es-appel__vue"]:not(:has(img)):not(:has(video)) > * {
  font-size: 0 !important;
}
[data-slot="es-appel__vue"]:not(:has(img)):not(:has(video)) > *:not(:empty) {
  background: transparent !important;
  padding: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
[data-slot="es-hero__vue"]:not(:has(img)):not(:has(video)) {
  --cadre-vide-fond: #404040;
  --cadre-vide-trame: rgba(255, 255, 255, .05);
  --cadre-vide-encre: rgba(255, 255, 255, .82);
  --cadre-vide-filet: rgba(255, 255, 255, .10);
}
[data-slot="es-hero__vue"]:not(:has(img)):not(:has(video)) > * {
  font-size: 0 !important;
}
[data-slot="es-hero__vue"]:not(:has(img)):not(:has(video)) > *:not(:empty) {
  background: transparent !important;
  padding: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
/* <<< NORME COQUILLE — teinte des cadres porteurs */