/* ============================================================
   TEMPLATE-8 (cyclix) — feuille unique. SOURCE : dist/ n est
   qu une sortie, jamais editee a la main.
   Huit jetons de couleur, aucun hexadecimal en dur.
   Traits de forme : dalles pleines a rayon 20 contenant texte ET
   vue, libelles doubles qui roulent, bandes de service a disque
   de fleche, colonne centree a quatre vignettes en debord,
   bandeaux image a colonne interne etroite, voiles noirs a 121
   et 113 degres, aucune bordure de couleur, graisse 500 au plus.
   ============================================================ */

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

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.01em;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* ---- 1. Cadres imbriques (trait 9) --------------------------- */
.cx-cadre {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 24px;
}
.cx-aire { padding: 88px 0; }
.cx-aire--serre { padding: 40px 0; }
.cx-main > .cx-aire + .cx-aire { padding-top: 0; }
.cx-main > .cx-aire:first-child { padding-top: 40px; }

/* ---- 2. Encre et titres (trait 11 : graisse 500 au plus) ----- */
.cx-h1, .cx-titre {
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 1.02;
  text-wrap: balance;
}
.cx-h1 { font-size: clamp(38px, 6.2vw, 80px); }
.cx-titre { font-size: clamp(28px, 3.6vw, 52px); }
.cx-accent { font-style: normal; color:var(--encre-marque,var(--marque)); }
.cx-dalle .cx-accent, .cx-bandeau .cx-accent { color: inherit; opacity: .62; }
.cx-chapo { max-width: 62ch; margin-top: 16px; color: var(--texte-doux); }
.cx-para { margin-top: 14px; color: var(--texte-doux); max-width: 68ch; }
.cx-para--contre { color:var(--sur-bande,var(--sur-marque)); opacity: .84; }
.cx-mention { margin-top: 14px; font-size: 13px; color: var(--texte-doux); }
.cx-mention--contre { color:var(--sur-bande,var(--sur-marque)); opacity: .7; }

.cx-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--texte) 7%, transparent);
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 18px;
}
.cx-dalle .cx-eyebrow, .cx-bandeau .cx-eyebrow {
  background: color-mix(in srgb, var(--sur-marque) 16%, transparent);
  color:var(--sur-bande,var(--sur-marque));
}

/* Fleche montante : la source pose un trait vectoriel, pas une image
   de fond ; la coquille sert donc un <svg> inline coloré au courant. */
.cx-fleche {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex: 0 0 auto; color: currentColor;
}
.cx-fleche svg { display: block; width: 100%; height: 100%; }
.cx-fleche--mini { width: 11px; height: 11px; }

/* Chevron bas : tout lien a volet le porte (contrat). La glyphe est
   DECOUPEE dans la couleur courante par un masque, jamais dessinee
   avec des bordures : la silhouette reste nette a toute taille. */
.cx-chev {
  display: inline-block; width: 10px; height: 10px; margin-left: 6px;
  flex: 0 0 auto; background: currentColor;
  transition: transform .18s ease;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.6 4 6 8.4 10.4 4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.6 4 6 8.4 10.4 4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
}

/* ---- 3. Trait 2 : le libelle double qui roule ---------------- */
.cx-roule {
  position: relative; display: inline-grid; overflow: hidden;
  vertical-align: bottom;
}
.cx-roule__a, .cx-roule__b {
  grid-area: 1 / 1; display: block; white-space: nowrap;
  transition: transform .28s cubic-bezier(.22, .61, .36, 1);
}
.cx-roule__b { transform: translateY(112%); }
a:hover > .cx-roule > .cx-roule__a,
button:hover > .cx-roule > .cx-roule__a,
a:hover .cx-roule > .cx-roule__a { transform: translateY(-150%); }
a:hover > .cx-roule > .cx-roule__b,
button:hover > .cx-roule > .cx-roule__b,
a:hover .cx-roule > .cx-roule__b { transform: translateY(0); }

/* ---- 4. Boutons --------------------------------------------- */
.cx-bt {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 24px; border: 0; border-radius: 999px;
  background: color-mix(in srgb, var(--texte) 8%, transparent);
  color: var(--texte); font-size: 15px; cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.cx-bt:hover { background: color-mix(in srgb, var(--texte) 15%, transparent); }
.cx-bt--marque { background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque)); }
.cx-bt--marque:hover { background: color-mix(in srgb, var(--marque) 82%, var(--texte)); }
.cx-bt--plein { background:var(--texte);--sur-bande:var(--sur-texte,var(--fond)); color: var(--fond); }
.cx-bt--plein:hover { background: color-mix(in srgb, var(--texte) 84%, var(--fond)); }
.cx-bt--contre { background: color-mix(in srgb, var(--sur-marque) 18%, transparent); color:var(--sur-bande,var(--sur-marque)); }
.cx-bt--contre:hover { background: color-mix(in srgb, var(--sur-marque) 28%, transparent); }
.cx-bt--fin { padding: 10px 18px; font-size: 14px; }
.cx-appels { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.cx-appels--hero { margin-top: 32px; }

/* ---- 5. Vues (rayon 12 dans les dalles) ---------------------- */
.cx-vue {
  display: block; width: 100%; border-radius: 12px;
  object-fit: cover; background: var(--fond-2);
}
.cx-vue--attente {
  position: relative; min-height: 120px;
  background:
    repeating-linear-gradient(135deg,
      color-mix(in srgb, var(--texte) 5%, transparent) 0 10px,
      transparent 10px 22px),
    var(--fond-2);
}
.cx-vue__ini {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 34px; font-weight: 500; color: color-mix(in srgb, var(--texte) 32%, transparent);
}

/* ---- 6. Icone -------------------------------------------------*/
.cx-icone {
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  border-radius: 999px; margin-bottom: 12px; font-size: 15px;
  background: color-mix(in srgb, var(--marque) 22%, transparent);
}
.cx-dalle .cx-icone, .cx-bandeau .cx-icone {
  background: color-mix(in srgb, var(--sur-marque) 18%, transparent);
}

/* ---- 7. Listes a puce ---------------------------------------- */
.cx-points { margin-top: 16px; display: grid; gap: 9px; }
.cx-points > li { position: relative; padding-left: 24px; color: var(--texte-doux); }
.cx-points > li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 10px;
  border-radius: 999px; background:var(--marque);--sur-bande:var(--sur-marque);
}
.cx-points--fin > li { font-size: 15px; }
.cx-dalle .cx-points > li, .cx-bandeau .cx-points > li { color:var(--sur-bande,var(--sur-marque)); opacity: .86; }
.cx-dalle .cx-points > li::before, .cx-bandeau .cx-points > li::before { background: var(--sur-marque); }
.cx-points--contre > li { color:var(--sur-bande,var(--sur-marque)); }

.cx-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cx-tag {
  padding: 6px 12px; border-radius: 999px; font-size: 13px;
  background: color-mix(in srgb, var(--texte) 7%, transparent);
}
.cx-tag--contre { background: color-mix(in srgb, var(--sur-marque) 18%, transparent); color:var(--sur-bande,var(--sur-marque)); }

/* ---- 8. Trait 1 : la DALLE de couleur pleine ------------------ */
.cx-dalle {
  position: relative; overflow: hidden;
  display: flex; flex-wrap: wrap; gap: 32px;
  padding: 44px; border-radius: 20px;
  background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque));
}
.cx-dalle--accent { background: var(--accent); color: var(--sur-accent, var(--fond)); }
.cx-dalle--accent { color: var(--fond); }
/* Voile 121deg : le seul assombrissement de la fiche, jamais un degrade
   de couleur (trait 8). */
.cx-dalle::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(121deg, rgba(0, 0, 0, .16) 0%, rgba(0, 0, 0, 0) 58%);
}
.cx-dalle > * { position: relative; z-index: 1; min-width: 0; }
.cx-dalle .cx-titre--dalle { color: inherit; }
.cx-dalle__vue { border-radius: 12px; aspect-ratio: 4 / 3; object-fit: cover; }
.cx-dalle .cx-vue--attente {
  background:
    repeating-linear-gradient(135deg,
      color-mix(in srgb, var(--sur-marque) 12%, transparent) 0 10px,
      transparent 10px 22px),
    color-mix(in srgb, var(--sur-marque) 8%, transparent);
}
.cx-dalle .cx-vue__ini { color: color-mix(in srgb, var(--sur-marque) 55%, transparent); }

/* ---- 9. Trait 7 : le BANDEAU image a colonne interne ---------- */
.cx-bandeau {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 20px; padding: 76px 44px; min-height: 340px;
  background:var(--texte);--sur-bande:var(--sur-texte,var(--fond)); color: var(--fond);
  display: flex; align-items: center;
}
.cx-bandeau--serre { padding: 52px 44px; min-height: 260px; }
.cx-bandeau__fond {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 0; object-fit: cover; z-index: -2;
}
.cx-bandeau::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(113deg, rgba(0, 0, 0, .74) 0%, rgba(0, 0, 0, .28) 100%);
}
.cx-bandeau__dedans { width: 100%; max-width: 445px; min-width: 0; }
.cx-bandeau .cx-titre--bandeau { color: var(--fond); }
.cx-bandeau .cx-eyebrow { background: color-mix(in srgb, var(--fond) 18%, transparent); color: var(--fond); }
.cx-bandeau .cx-para--contre, .cx-bandeau .cx-points > li { color: var(--fond); }
.cx-bandeau .cx-points > li::before { background: var(--fond); }
.cx-bandeau .cx-bt--contre { background: color-mix(in srgb, var(--fond) 20%, transparent); color: var(--fond); }
.cx-bandeau .cx-vue--attente {
  background:
    repeating-linear-gradient(135deg, rgba(0, 0, 0, .18) 0 12px, rgba(0, 0, 0, .06) 12px 26px),
    var(--fond-2);
}

/* ============================================================
   EN-TETE — trait 4 : nav poussee a droite, volet a vitrine
   ============================================================ */
.cx-tete { position: sticky; top: 0; z-index: 60; background: var(--fond); }
.cx-tete::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: color-mix(in srgb, var(--texte) 10%, transparent); pointer-events: none; }
.cx-tete__in { display: flex; align-items: center; gap: 20px; min-height: 84px; }
.cx-tete__marque { font-size: 22px; font-weight: 500; letter-spacing: -0.05em;
  text-decoration: none; color: var(--texte); flex: 0 0 auto; }
.cx-tete__fin { display: flex; align-items: center; gap: 12px; margin-left: auto; flex: 0 0 auto; }
.cx-nav { margin-left: auto; }
.cx-nav__ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.cx-nav__li { position: relative; display: flex; }
.cx-nav__a { display: inline-flex; align-items: center; gap: 7px; height: 84px; padding: 0 13px;
  font-size: 15px; text-decoration: none; color: var(--texte); }
.cx-nav__a:hover { color: color-mix(in srgb, var(--texte) 62%, transparent); }

.cx-vol { position: absolute; top: calc(100% - 1px); left: 0; z-index: 5;
  width: min(660px, calc(100vw - 48px)); min-width: 400px;
  display: flex; gap: 22px; padding: 22px; border-radius: 20px;
  background: var(--fond); box-shadow: 0 26px 64px rgba(0, 0, 0, .17);
  visibility: hidden; opacity: 0; transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s; }
.cx-nav__li--vol:hover > .cx-vol,
.cx-nav__li--vol:focus-within > .cx-vol,
.cx-nav__li--vol.est-ouvert > .cx-vol { visibility: visible; opacity: 1; transform: none; }
.cx-nav__li:nth-last-child(-n+3) > .cx-vol { left: auto; right: 0; }
.cx-vol__grille { display: flex; flex-wrap: wrap; gap: 20px; flex: 1 1 300px; min-width: 0; }
.cx-vol__col { flex: 1 1 180px; min-width: 0; }
.cx-vol__gt { margin: 0 0 10px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--texte-doux); }
.cx-vol__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cx-vol__lien { display: block; padding: 8px 10px; border-radius: 12px; text-decoration: none;
  color: var(--texte); font-size: 15px; }
.cx-vol__lien:hover { background: color-mix(in srgb, var(--texte) 6%, transparent); }
.cx-vol__sous { display: block; padding: 0 10px 8px; font-size: 13px; color: var(--texte-doux); }
.cx-vol__vit { flex: 0 0 224px; min-width: 0; padding: 16px; border-radius: 16px;
  background: var(--fond-2); display: flex; flex-direction: column; gap: 8px; }
.cx-vol__vue { display: block; width: 100%; height: 132px; border-radius: 12px; object-fit: cover;
  background:var(--marque);--sur-bande:var(--sur-marque); }
.cx-vol__titre { margin: 0; font-size: 17px; font-weight: 500; letter-spacing: -0.02em; }
.cx-vol__texte { margin: 0; font-size: 13px; color: var(--texte-doux); }
.cx-vol__vit .cx-bt { margin-top: auto; }

.cx-burger { display: none; width: 46px; height: 46px; border: 0; border-radius: 999px;
  background: color-mix(in srgb, var(--texte) 7%, transparent); cursor: pointer;
  position: relative; flex: 0 0 auto; }
.cx-burger__t { position: absolute; left: 13px; width: 20px; height: 2px; border-radius: 2px;
  background:var(--texte);--sur-bande:var(--sur-texte,var(--fond)); transition: transform .2s ease, opacity .2s ease; }
.cx-burger__t:nth-child(1) { top: 19px; }
.cx-burger__t:nth-child(2) { top: 26px; }
.cx-burger[aria-expanded="true"] .cx-burger__t:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.cx-burger[aria-expanded="true"] .cx-burger__t:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* ============================================================
   HERO — trait 3 : pilules posees sur la vue
   ============================================================ */
.cx-hero__haut { display: flex; flex-wrap: wrap; gap: 44px; align-items: center; }
.cx-hero__mot { flex: 1 1 470px; min-width: 0; }
.cx-hero__sous { margin: 22px 0 0; max-width: 520px; font-size: 18px; color: var(--texte-doux); }
.cx-appels--hero { margin-top: 30px; }
.cx-hero__vue { flex: 1 1 420px; min-width: 0; position: relative; }
.cx-hero__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 20px; background: var(--fond-2); }
.cx-hero__pill { position: absolute; z-index: 2; padding: 9px 16px; border-radius: 999px;
  background:var(--texte);--sur-bande:var(--sur-texte,var(--fond)); color: var(--fond); font-size: 13px; white-space: nowrap;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .18); }
.cx-hero__pill--1 { top: 18px; left: 18px; }
.cx-hero__pill--2 { bottom: 60px; right: 18px; }
.cx-hero__pill--3 { bottom: 18px; left: 18px; }
.cx-hero__atouts { list-style: none; margin: 40px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 16px; }
.cx-hero__at { flex: 1 1 230px; min-width: 0; padding: 22px; border-radius: 20px;
  background: var(--fond-2); }
.cx-hero__att { margin: 12px 0 4px; font-size: 18px; font-weight: 500; letter-spacing: -0.02em; }
.cx-hero__atx { margin: 0; font-size: 14px; color: var(--texte-doux); }

/* ============================================================
   MARQUES
   ============================================================ */
.cx-marques__mot { margin: 0 0 18px; text-align: center; font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux); }
.cx-marques__ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
  gap: 10px; justify-content: center; }
.cx-marques__li { padding: 10px 20px; border-radius: 999px; background: var(--fond-2);
  font-size: 15px; color: var(--texte-doux); }

/* ============================================================
   SERVICES — trait 5 : quatre bandes a disque de fleche 62
   ============================================================ */
.cx-sg__tete { max-width: 700px; margin-bottom: 34px; }
.cx-bandes { display: grid; gap: 12px; }
.cx-bande { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 20px;
  padding: 26px 28px; min-height: 112px; border-radius: 20px; background: var(--fond-2);
  text-decoration: none; color: var(--texte); transition: background .2s ease; }
.cx-bande:hover { background: color-mix(in srgb, var(--marque) 40%, var(--fond-2)); }
.cx-bande__num { flex: 0 0 54px; font-size: 14px; color: var(--texte-doux); }
.cx-bande__titre { flex: 1 1 250px; min-width: 0; font-size: clamp(21px, 2.1vw, 28px);
  font-weight: 500; letter-spacing: -0.04em; }
.cx-bande__texte { flex: 1 1 280px; min-width: 0; font-size: 15px; color: var(--texte-doux); }
.cx-bande__lire { flex: 0 0 auto; font-size: 14px; color: var(--texte-doux); }
.cx-bande__disque { flex: 0 0 62px; width: 62px; height: 62px; border-radius: 999px;
  background:var(--texte);--sur-bande:var(--sur-texte,var(--fond)); display: grid; place-items: center; margin-left: auto; }
.cx-bande__disque .cx-fleche { color: var(--fond); }

/* ============================================================
   INTRO — trait 6 : colonne centree 690, quatre vignettes 198
   ============================================================ */
.cx-colonne { position: relative; }
.cx-colonne__mot { max-width: 690px; margin: 0 auto; text-align: center; }
.cx-colonne__mot .cx-para { margin: 16px auto 0; }
.cx-colonne__vig { display: none; position: absolute; width: 198px; height: 198px;
  border-radius: 20px; background: var(--fond-2); overflow: hidden; }
.cx-colonne__vig::after { content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--texte) 5%, transparent) 0 9px,
    transparent 9px 18px); }
.cx-colonne__vig--1 { top: 0; left: 0; }
.cx-colonne__vig--2 { bottom: 0; left: 62px; }
.cx-colonne__vig--3 { top: 0; right: 0; }
.cx-colonne__vig--4 { bottom: 0; right: 62px; }

/* ============================================================
   BLOCS SEO / EXPERTISE / WHYUS — sur dalles pleines
   ============================================================ */
.cx-bs__pile { display: grid; gap: 22px; }
.cx-bs__mot { flex: 1 1 420px; min-width: 0; }
.cx-bs__vue { flex: 1 1 340px; min-width: 0; }
.cx-bs .cx-dalle__vue { width: 100%; }
.cx-bs:nth-child(even) .cx-bs__vue { order: -1; }
.cx-exp__mot { flex: 1 1 380px; min-width: 0; }
.cx-exp__ul { list-style: none; margin: 0; padding: 0; flex: 1 1 250px; min-width: 0;
  display: grid; gap: 16px; align-content: center; }
.cx-exp__t { margin: 0 0 4px; font-size: 18px; font-weight: 500; }
.cx-exp__x { margin: 0; font-size: 14px; opacity: .82; }
.cx-exp__vue { flex: 1 1 300px; min-width: 0; width: 100%; }
.cx-why__mot { flex: 1 1 380px; min-width: 0; }
.cx-why__vue { flex: 1 1 300px; min-width: 0; width: 100%; }
/* R3 — pistes comptees : flex-wrap laissait un dernier item seul s etirer
   (284/888 mesures). 4 atouts, 4 pistes en desktop, resserrees aux paliers. */
.cx-why__ul { list-style: none; margin: 0; padding: 0; flex: 1 1 100%;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.cx-why__li { min-width: 0; }
.cx-why__t { margin: 10px 0 6px; font-size: 17px; font-weight: 500; }

/* ============================================================
   SECTEURS · ZONES · MAILLAGE · BLOG — cartes de contenu
   ============================================================ */
.cx-mails, .cx-posts, .cx-reals, .cx-tarifs,
.cx-abs, .cx-avis__rail { display: flex; flex-wrap: wrap; gap: 20px;
  list-style: none; margin: 0; padding: 0; }
/* R3 — pistes comptees : flex-wrap laissait un dernier item seul s etirer
   (298/616 mesures). 6 cartes, 3 pistes en desktop, resserrees aux paliers. */
.cx-zones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
  list-style: none; margin: 0; padding: 0; }
/* R3 — pistes comptees : flex-wrap laissait un dernier item seul s etirer
   (404/1252 et 312/976 mesures). 3 pistes en desktop, resserrees aux paliers. */
.cx-sects, .cx-prods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
  list-style: none; margin: 0; padding: 0; }
.cx-sect { flex: 1 1 300px; min-width: 0; border-radius: 20px; overflow: hidden;
  background: var(--fond-2); }
.cx-sect__vue { display: block; }
.cx-sect .cx-dalle__vue { width: 100%; border-radius: 0; }
.cx-sect__mot { display: block; padding: 22px; }
.cx-sect__marque { display: block; font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--texte-doux); }
.cx-sect__t { margin: 8px 0 8px; font-size: 21px; font-weight: 500; letter-spacing: -0.03em; }

.cx-zone { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 10px;
  padding: 22px; border-radius: 20px; background: var(--fond-2);
  text-decoration: none; color: var(--texte); }
.cx-zone__tag { font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--texte-doux); }
.cx-zone__t { font-size: 20px; font-weight: 500; letter-spacing: -0.03em; }
.cx-zone__x { font-size: 14px; color: var(--texte-doux); }
.cx-zone__lire { font-size: 14px; }
/* R5a — ratio contractuel (slots.json .cx-zone__vue = 2.09) : hauteur fixe
   remplacee par aspect-ratio pour tenir la contrainte a tous les paliers. */
.cx-zone__vue { display: block; width: 100%; aspect-ratio: 2.09; border-radius: 12px;
  object-fit: cover; margin-top: auto; }

.cx-mail { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column;
  padding: 18px; border-radius: 20px; background: var(--fond-2);
  text-decoration: none; color: var(--texte); }
.cx-mail__vue { display: block; width: 100%; height: 158px; border-radius: 12px;
  object-fit: cover; }
.cx-mail__mot { display: block; padding-top: 16px; }
.cx-mail__meta { display: block; font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texte-doux); }
.cx-mail__t { display: block; margin: 8px 0; font-size: 20px; font-weight: 500;
  letter-spacing: -0.03em; }
.cx-mail__x { display: block; font-size: 14px; color: var(--texte-doux); }
.cx-mail__lire { display: inline-block; margin-top: 12px; font-size: 14px; }

.cx-post { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column;
  padding: 18px; border-radius: 20px; background: var(--fond-2);
  text-decoration: none; color: var(--texte); }
.cx-post__vue { display: block; width: 100%; height: 186px; border-radius: 12px;
  object-fit: cover; }
.cx-post__mot { display: block; padding-top: 16px; }
.cx-post__meta { display: block; font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texte-doux); }
.cx-post__t { display: block; margin: 8px 0; font-size: 21px; font-weight: 500;
  letter-spacing: -0.03em; }
.cx-post__x { display: block; font-size: 14px; color: var(--texte-doux); }
.cx-post__lire { display: inline-block; margin-top: 12px; font-size: 14px; }

/* ============================================================
   PROCESS · CHIFFRES · CARTE
   ============================================================ */
.cx-proc__tete { max-width: 700px; margin-bottom: 32px; }
.cx-proc { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 20px; }
.cx-proc__li { flex: 1 1 270px; min-width: 0; position: relative; padding: 22px;
  border-radius: 20px; background: var(--fond-2); }
.cx-proc__vue { display: block; margin-bottom: 16px; }
.cx-proc__img { display: block; width: 100%; height: 168px; object-fit: cover;
  border-radius: 12px; }
.cx-proc__num { display: inline-block; padding: 6px 14px; border-radius: 999px;
  background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque)); font-size: 13px; }
.cx-proc__mot { display: block; margin-top: 12px; }
.cx-proc__t { margin: 0 0 6px; font-size: 20px; font-weight: 500; letter-spacing: -0.03em; }
.cx-proc__x { margin: 0; font-size: 14px; color: var(--texte-doux); }
.cx-proc__fin { margin-top: 24px; }

.cx-chif { display: flex; flex-wrap: wrap; gap: 30px; align-items: center;
  padding: 34px; border-radius: 20px; background: var(--fond-2); }
/* R3 — pistes comptees : flex-wrap laissait 3 items partager la rangee et
   le 4e s etirer seul (206/657 mesures). 4 chiffres, 4 pistes en desktop. */
.cx-chif__ul { list-style: none; margin: 0; padding: 0; flex: 1 1 420px; min-width: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.cx-chif__li { flex: 1 1 150px; min-width: 0; }
.cx-chif__v { display: block; font-size: clamp(30px, 3.6vw, 46px); font-weight: 500;
  letter-spacing: -0.05em; line-height: 1; }
.cx-chif__l { display: block; margin-top: 6px; font-size: 14px; color: var(--texte-doux); }
.cx-chif__vue { flex: 1 1 260px; min-width: 0; width: 100%;
  overflow: hidden; border-radius: 12px; }
.cx-chif__vue .cx-vue { aspect-ratio: 16 / 9; height: auto; }

.cx-map__mot { flex: 1 1 400px; min-width: 0; }
.cx-map__adr { font-style: normal; margin: 18px 0 0; }
.cx-map__ligne { display: block; font-size: 15px; opacity: .88; }
.cx-map__vue { flex: 1 1 340px; min-width: 0; width: 100%; }

/* ============================================================
   AVIS — trait 8 : file d avatars qui pilote les cartes
   ============================================================ */
.cx-avis__tete { max-width: 700px; margin-bottom: 30px; }
.cx-avis__carte { flex: 1 1 300px; min-width: 0; padding: 26px; border-radius: 20px;
  background: var(--fond-2); }
.cx-avis__note { display: block; font-size: 14px; letter-spacing: .16em; color:var(--encre-marque,var(--marque)); }
.cx-avis__t { margin: 12px 0 8px; font-size: 19px; font-weight: 500; letter-spacing: -0.03em; }
.cx-avis__x { margin: 0 0 16px; font-size: 15px; color: var(--texte-doux); }
.cx-avis__qui { display: block; font-size: 15px; font-weight: 500; }
.cx-avis__role { display: block; font-size: 13px; color: var(--texte-doux); }
.cx-avis__file { list-style: none; margin: 28px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 14px; }
.cx-avis__av { display: flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px;
  border: 0; border-radius: 999px; background: var(--fond-2); cursor: pointer;
  font: inherit; color: var(--texte); }
.cx-avis__av[aria-expanded="true"] { background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque)); }
.cx-avis__ini { display: grid; place-items: center; width: 52px; height: 52px;
  border-radius: 999px; background:var(--texte);--sur-bande:var(--sur-texte,var(--fond)); color: var(--fond);
  font-size: 19px; font-weight: 500; }
.cx-avis__nom { font-size: 15px; }

/* ============================================================
   FAQ
   ============================================================ */
.cx-faq { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.cx-faq__tete { flex: 1 1 330px; min-width: 0; }
.cx-faq__liste { flex: 1 1 470px; min-width: 0; display: grid; gap: 10px; }
.cx-faq__d { padding: 18px 22px; border-radius: 20px; background: var(--fond-2); }
.cx-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  cursor: pointer; list-style: none; font-size: 17px; font-weight: 500; letter-spacing: -0.02em; }
.cx-faq__q::-webkit-details-marker { display: none; }
.cx-faq__d[open] .cx-faq__q .cx-chev { transform: rotate(180deg); }
.cx-faq__r { margin-top: 12px; font-size: 15px; color: var(--texte-doux); }
.cx-faq__enc { flex: 1 1 100%; padding: 22px; border-radius: 20px; background:var(--marque);--sur-bande:var(--sur-marque);
  color:var(--sur-bande,var(--sur-marque)); }
.cx-faq__enct { margin: 0 0 6px; font-size: 18px; font-weight: 500; }

/* ============================================================
   URGENCE · APPEL — bandeaux
   ============================================================ */
/* R3 — pistes comptees : flex-wrap laissait le champ impair (3 champs) s
   etirer seul (217/445 mesures). 2 pistes en desktop, le pied et un champ
   long en enjambent la largeur ; une piste sous 767. */
.cx-cta__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  margin-top: 24px; }
.cx-cta__pied { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cx-cta__form .cx-champ--large { grid-column: 1 / -1; }
.cx-champ { display: flex; flex-direction: column; gap: 6px; flex: 1 1 200px; min-width: 0; }
.cx-champ--large { flex: 1 1 100%; }
.cx-champ__l { font-size: 13px; }
.cx-champ__i { width: 100%; padding: 13px 15px; border: 0; border-radius: 12px; font: inherit;
  background: color-mix(in srgb, var(--texte) 6%, transparent); color: var(--texte); }
.cx-champ__i--zone { min-height: 120px; resize: vertical; }
.cx-bandeau .cx-champ__i { background: color-mix(in srgb, var(--fond) 18%, transparent);
  color: var(--fond); }
.cx-bandeau .cx-champ__i::placeholder { color: color-mix(in srgb, var(--fond) 70%, transparent); }

/* ============================================================
   CERTIFICATIONS · AIDES · MATERIAUX · TARIFS · REALISATIONS
   ============================================================ */
.cx-cert__mot { flex: 1 1 340px; min-width: 0; }
/* R3 — pistes comptees : flex-wrap laissait 3 items partager la rangee et
   le 4e s etirer seul (187/596 mesures). 4 certifications, 2 pistes en desktop. */
.cx-cert__ul { list-style: none; margin: 0; padding: 0; flex: 1 1 400px; min-width: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.cx-cert__li { flex: 1 1 170px; min-width: 0; }
.cx-cert__t { margin: 10px 0 4px; font-size: 17px; font-weight: 500; }
.cx-cert__x { margin: 0; font-size: 14px; opacity: .82; }

.cx-aides { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.cx-aide__li { display: flex; flex-wrap: wrap; gap: 20px; padding: 24px; border-radius: 20px;
  background: var(--fond-2); }
.cx-aide__num { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 999px;
  display: grid; place-items: center; background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque));
  font-size: 15px; }
.cx-aide__mot { flex: 1 1 300px; min-width: 0; }
.cx-aide__t { margin: 0 0 6px; font-size: 19px; font-weight: 500; letter-spacing: -0.03em; }

.cx-mat__mot { flex: 1 1 100%; }
/* R3 — pistes comptees : flex-wrap laissait un dernier item seul s etirer
   (284/888 mesures). 4 materiaux, 4 pistes en desktop, resserrees aux paliers. */
.cx-mat__ul { list-style: none; margin: 0; padding: 0; flex: 1 1 100%;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.cx-mat__li { min-width: 0; }
.cx-mat__t { margin: 12px 0 6px; font-size: 18px; font-weight: 500; }
.cx-mat__x { margin: 0; font-size: 14px; opacity: .82; }
.cx-mat__li .cx-dalle__vue { width: 100%; }

.cx-tarif { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column;
  padding: 28px; border-radius: 20px; background: var(--fond-2); }
.cx-tarif__t { margin: 14px 0 10px; font-size: 20px; font-weight: 500; letter-spacing: -0.03em; }
.cx-tarif__p { margin: 0 0 12px; }
.cx-tarif__pv { font-size: 32px; font-weight: 500; letter-spacing: -0.05em; }
.cx-tarif__pu { font-size: 14px; color: var(--texte-doux); }
.cx-tarif__x { margin: 0 0 14px; font-size: 14px; color: var(--texte-doux); }
.cx-tarif .cx-bt { margin-top: auto; }

.cx-real { flex: 1 1 300px; min-width: 0; }
.cx-real__vue { display: block; }
.cx-real__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 20px; }
.cx-real__mot { display: block; padding-top: 16px; }
.cx-real__meta { display: block; font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texte-doux); }
.cx-real__t { display: block; margin: 8px 0 6px; font-size: 20px; font-weight: 500;
  letter-spacing: -0.03em; }
.cx-real__x { display: block; font-size: 14px; color: var(--texte-doux); }

/* ============================================================
   AVANT / APRES — decoupe en polygone pilotee par --pos
   ============================================================ */
.cx-ab { flex: 1 1 420px; min-width: 0; }
.cx-ab__scene { position: relative; overflow: hidden; border-radius: 20px;
  aspect-ratio: 4 / 3; background: var(--fond-2); }
.ab__cote { position: absolute; inset: 0; display: block; }
.ab__cote--apres { clip-path: polygon(var(--pos) 0%, 100% 0%, 100% 100%, var(--pos) 100%); }
.ab__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ab__et { position: absolute; bottom: 14px; padding: 7px 14px; border-radius: 999px;
  background:var(--texte);--sur-bande:var(--sur-texte,var(--fond)); color: var(--fond); font-size: 13px; }
.ab__et--a { left: 14px; }
.ab__et--b { right: 14px; }
.ab__trait { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px;
  margin-left: -1.5px; background: var(--fond); pointer-events: none; }
.cx-ab__barre { padding: 14px 0 4px; }
.ab__range { width: 100%; height: 30px; display: block; accent-color:var(--encre-marque,var(--marque)); cursor: ew-resize; }
.cx-ab__mot { display: block; }
.cx-ab__t { margin: 0 0 6px; font-size: 20px; font-weight: 500; letter-spacing: -0.03em; }

/* ============================================================
   FIL D ARIANE
   ============================================================ */
.cx-fil { padding: 16px 0 0; }
.cx-fil__ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
  gap: 8px; font-size: 14px; }
.cx-fil__li { display: inline-flex; align-items: center; gap: 8px; }
.cx-fil__a { color: var(--texte-doux); text-decoration: none; }
.cx-fil__a:hover { color: var(--texte); }
.cx-fil__ici { color: var(--texte); }
.cx-fil__sep { color: var(--texte-doux); }

/* ============================================================
   CONTACT
   ============================================================ */
.cx-cf { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.cx-cf__mot { flex: 1 1 350px; min-width: 0; }
.cx-cf__form { flex: 1 1 450px; min-width: 0; display: flex; flex-wrap: wrap; gap: 14px;
  padding: 28px; border-radius: 20px; background: var(--fond-2); }
.cx-cf__form .cx-champ__i { background: var(--fond); }
.cx-cf__env { flex: 0 0 auto; }
.cx-cf__pied { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cx-coords { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.cx-coord { padding: 18px; border-radius: 16px; background: var(--fond-2); }
.cx-coord__t { display: block; font-size: 15px; font-weight: 500; margin-bottom: 6px; }
.cx-coord__v { display: block; font-size: 14px; color: var(--texte-doux); text-decoration: none; }

/* ============================================================
   ARTICLE
   ============================================================ */
.cx-bandeau--art { min-height: 300px; }
.cx-art__meta { margin: 14px 0 0; font-size: 14px; opacity: .84; }
.cx-art__corps { display: flex; flex-wrap: wrap; gap: 40px; margin-top: 44px;
  align-items: flex-start; }
.cx-som { flex: 1 1 250px; min-width: 0; padding: 22px; border-radius: 20px;
  background: var(--fond-2); position: sticky; top: 104px; }
.cx-som__t { margin: 0 0 10px; font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--texte-doux); }
.cx-som__ol { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 15px; }
.cx-som__a { color: var(--texte); text-decoration: none; }
.cx-art__texte { flex: 1 1 540px; min-width: 0; max-width: 760px; }
.cx-art__h2 { margin: 34px 0 12px; font-size: clamp(24px, 2.8vw, 34px); font-weight: 500;
  letter-spacing: -0.05em; }
.cx-art__h3 { margin: 26px 0 10px; font-size: 22px; font-weight: 500; letter-spacing: -0.03em; }
.cx-art__ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 9px; }
.cx-art__ul li { position: relative; padding-left: 22px; color: var(--texte-doux); }
.cx-art__ul li::before { content: ""; position: absolute; left: 0; top: 9px; width: 9px;
  height: 9px; border-radius: 999px; background:var(--marque);--sur-bande:var(--sur-marque); }
.cx-art__enc { margin: 22px 0; padding: 22px; border-radius: 20px; background: var(--fond-2); }
.cx-art__enct { margin: 0 0 6px; font-size: 18px; font-weight: 500; }
.cx-art__fig { margin: 24px 0; }
.cx-art__img { display: block; width: 100%; border-radius: 20px; object-fit: cover; }
.cx-art__leg { margin-top: 10px; font-size: 13px; color: var(--texte-doux); }
.cx-art__cite { position: relative; margin: 24px 0; padding: 4px 0 4px 26px;
  font-size: 20px; letter-spacing: -0.02em; }
.cx-art__cite::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  border-radius: 4px; background:var(--marque);--sur-bande:var(--sur-marque); }

/* ============================================================
   MENTIONS · FACETTES · PRODUITS · SPECS
   ============================================================ */
.cx-leg { max-width: 820px; }
.cx-leg__maj { margin: 14px 0 0; font-size: 14px; color: var(--texte-doux); }
.cx-leg__b { margin-top: 30px; }
.cx-leg__t { margin: 0 0 10px; font-size: 25px; font-weight: 500; letter-spacing: -0.04em; }

.cx-fac__t { margin: 10px 0 16px; font-size: 22px; font-weight: 500; letter-spacing: -0.03em; }
.cx-fac__ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.cx-facette { display: inline-block; padding: 10px 18px; border-radius: 999px;
  background: var(--fond-2); font-size: 15px; color: var(--texte); text-decoration: none; }
.cx-facette--ici { background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque)); }

.cx-prod { flex: 1 1 260px; min-width: 0; border-radius: 20px; overflow: hidden;
  background: var(--fond-2); display: flex; flex-direction: column; }
.cx-prod__vue { display: block; width: 100%; height: 200px; object-fit: cover; }
.cx-prod__mot { display: flex; flex-direction: column; flex: 1 1 auto; padding: 20px; }
.cx-prod__t { margin: 0 0 8px; font-size: 19px; font-weight: 500; letter-spacing: -0.03em; }
.cx-prod__x { margin: 0 0 12px; font-size: 14px; color: var(--texte-doux); }
.cx-prod__p { margin: 12px 0; }
.cx-prod__pv { font-size: 26px; font-weight: 500; letter-spacing: -0.04em; }
.cx-prod__pu { font-size: 13px; color: var(--texte-doux); }
.cx-prod .cx-bt { margin-top: auto; }

.cx-fiche { display: flex; flex-wrap: wrap; gap: 36px; align-items: center; }
.cx-fiche__vue { flex: 1 1 400px; min-width: 0; }
.cx-fiche__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 20px; }
.cx-fiche__mot { flex: 1 1 360px; min-width: 0; }
.cx-fiche__p { margin: 18px 0; }
.cx-fiche__pv { font-size: 34px; font-weight: 500; letter-spacing: -0.05em; }
.cx-fiche__pu { font-size: 14px; color: var(--texte-doux); }

.cx-specs__mot { flex: 1 1 320px; min-width: 0; }
/* R3 — pistes comptees : flex-wrap laissait des lignes inegales (3+3+2)
   (212/318 mesures). 8 specs, 3 pistes en desktop, resserrees aux paliers. */
.cx-specs__dl { margin: 0; flex: 1 1 460px; min-width: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.cx-spec { position: relative; min-width: 0; padding: 14px 0; }
.cx-spec::after { content: ""; position: absolute; left: 0; right: 14px; bottom: 0; height: 1px;
  background: color-mix(in srgb, var(--fond) 24%, transparent); }
.cx-spec__l { font-size: 13px; opacity: .78; }
.cx-spec__v { margin: 4px 0 0; font-size: 19px; }

/* ============================================================
   PIED — trait 10 : wordmark geant
   ============================================================ */
.cx-pied { background:var(--texte);--sur-bande:var(--sur-texte,var(--fond)); color: var(--fond); padding: 76px 0 34px; overflow: hidden; }
.cx-pied__haut { display: flex; flex-wrap: wrap; gap: 32px; }
.cx-pied__col--marque { flex: 1 1 300px; min-width: 0; }
.cx-pied__col { flex: 1 1 190px; min-width: 0; }
.cx-pied__nap { flex: 1 1 230px; min-width: 0; }
.cx-pied__marque { margin: 0 0 12px; font-size: 22px; font-weight: 500; letter-spacing: -0.05em; }
.cx-pied__desc { margin: 0; font-size: 15px; opacity: .74; }
.cx-pied__ct { margin: 0 0 12px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  opacity: .62; }
.cx-pied__ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cx-pied__a { color: var(--fond); text-decoration: none; font-size: 15px; opacity: .84; }
.cx-pied__a:hover { opacity: 1; }
.cx-pied__adr { font-style: normal; display: grid; gap: 8px; }
.cx-pied__nl { font-size: 15px; opacity: .84; }
.cx-pied__mot { margin: 46px 0 22px; max-width: 100%; overflow: hidden; white-space: nowrap;
  font-size: clamp(44px, 12vw, 168px); line-height: .84; font-weight: 500;
  letter-spacing: -0.06em; color: color-mix(in srgb, var(--fond) 16%, transparent); }
.cx-pied__bas { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
  font-size: 13px; opacity: .7; }
.cx-pied__nav { display: flex; flex-wrap: wrap; gap: 16px; }
.cx-pied__bas-a { color: var(--fond); text-decoration: none; }

/* ============================================================
   DALLE ACCENT — reprise des jetons sur fond encre
   ============================================================ */
.cx-dalle--accent .cx-eyebrow { background: color-mix(in srgb, var(--fond) 16%, transparent);
  color: var(--fond); }
.cx-dalle--accent .cx-points > li::before,
.cx-dalle--accent .cx-icone { background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque)); }
.cx-dalle--accent .cx-tag { background: color-mix(in srgb, var(--fond) 16%, transparent);
  color: var(--fond); }
.cx-dalle--accent .cx-bt--contre { background: var(--fond); color: var(--texte); }

/* ============================================================
   PALIERS
   ============================================================ */
@media (min-width: 1200px) {
  .cx-colonne { padding: 26px 0; }
  .cx-colonne__vig { display: block; }
}
@media (max-width: 1023px) {
  .cx-burger { display: block; }
  .cx-tete__cta { display: none; }
  .cx-nav { position: fixed; left: 0; right: 0; top: 84px; bottom: 0; margin: 0;
    padding: 18px 24px 40px; background: var(--fond); overflow-y: auto; display: none; }
  .cx-nav.est-ouvert { display: block; }
  .cx-nav__ul { flex-direction: column; align-items: stretch; gap: 4px; }
  .cx-nav__li { display: block; }
  .cx-nav__a { height: auto; padding: 14px 4px; font-size: 18px; justify-content: space-between; }
  .cx-vol { position: static; width: auto; min-width: 0; padding: 4px 4px 16px;
    box-shadow: none; flex-wrap: wrap; visibility: visible; opacity: 1; transform: none;
    display: none; }
  .cx-nav__li--vol.est-ouvert > .cx-vol { display: flex; }
  .cx-vol__vit { flex: 1 1 100%; }
  .cx-som { position: static; }
  .cx-zones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-sects, .cx-prods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-why__ul, .cx-mat__ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-specs__dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .cx-aire { padding: 56px 0; }
  .cx-cadre { padding: 0 18px; }
  .cx-dalle { padding: 26px; }
  .cx-bandeau { padding: 48px 26px; min-height: 260px; }
  .cx-bande { padding: 20px; }
  .cx-bande__disque { flex: 0 0 48px; width: 48px; height: 48px; }
  .cx-bande__lire { display: none; }
  .cx-chif { padding: 24px; }
  .cx-hero__pill--2 { bottom: 58px; }
  .cx-zones { grid-template-columns: 1fr; }
  .cx-sects, .cx-prods { grid-template-columns: 1fr; }
  .cx-why__ul, .cx-mat__ul { grid-template-columns: 1fr; }
  .cx-specs__dl { grid-template-columns: 1fr; }
  .cx-chif__ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-cert__ul { grid-template-columns: 1fr; }
  .cx-cta__form { grid-template-columns: 1fr; }
}

/* Vignette de bande de service : la bande porte sa vue a droite, juste
   avant le disque de fleche, sans casser la ligne. */
.cx-bande__vue { flex: 0 0 auto; width: 96px; height: 62px; overflow: hidden;
  border-radius: 10px; display: block; }
.cx-bande__vue .cx-vue { width: 100%; height: 100%; }
.cx-appels--fin { margin-top: 30px; }
@media (max-width: 767px) { .cx-bande__vue { display: none; } }

/* MOBILE — debordement mesure le 7 septembre 2026 (gate-debordement rendu honnete :
   un overflow-x sur le body ne compte plus comme un rognage, largeurs 360/390/430). */
/* Volets a 1024 : `width: min(660px, 100vw - 48px)` ancre a gauche de l entree Services
   (382px) sortait de la fenetre (1042px) ; l entree Zones, ancree a droite de son entree,
   sortait a gauche (-75px). Entre 1024 et 1180 la nav est le bloc conteneur et tout volet
   s ancre a son bord droit (726px) : 66..726, dans la fenetre. */
@media (min-width: 1024px) and (max-width: 1180px) {
  .cx-nav { position: relative; }
  .cx-nav__li { position: static; }
  .cx-vol, .cx-nav__li:nth-last-child(-n+3) > .cx-vol { left: auto; right: 0; }
}

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

/* contraste-bandes (14/09/2026) — regles PORTEES PAR LA DALLE SOMBRE, et par elle seule.
   .cx-dalle est la plaque de MARQUE (lime clair ici) : son encre --sur-marque, quasi noire, y est
   juste. .cx-dalle--accent est la plaque de NUIT et declare son encre claire (color: var(--fond),
   ligne 189). Deux enfants ne la suivaient pas, et la feuille avait deja ecrit le meme remede pour
   son jumeau .cx-bandeau (lignes 227-228) :

   1. .cx-para garde --texte-doux : 1,76 sur la plaque de nuit (il passe sur la plaque lime, d ou le
      scope strict a --accent). Meme encre et meme opacite que .cx-para--contre (ligne 59). */
.cx-dalle--accent .cx-para { color: inherit; opacity: .84; }
/* 2. .cx-points > li prend --sur-marque (ligne 170), c est-a-dire l encre calculee contre la MARQUE :
      #101010 sur une plaque de nuit #0F0F0F, ratio 1,01 — l encre mesuree contre la mauvaise
      couleur. Sur la plaque lime elle reste juste, donc on ne touche qu a la plaque de nuit. */
.cx-dalle--accent .cx-points > li { color: inherit; opacity: .86; }
.cx-dalle--accent .cx-points > li::before { background: var(--fond); }

/* >>> 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="ab__img"]:not(:has(img)):not(:has(video)) {
  --cadre-vide-fond: #171b20;
  --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="cx-bandeau__fond"]:not(:has(img)):not(:has(video)) {
  --cadre-vide-fond: #070707;
  --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="cx-bandeau__fond"]:not(:has(img)):not(:has(video)) > * {
  font-size: 0 !important;
}
[data-slot="cx-bandeau__fond"]:not(:has(img)):not(:has(video)) > *:not(:empty) {
  background: transparent !important;
  padding: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
[data-slot="cx-hero__img"]:not(:has(img)):not(:has(video)) {
  --cadre-vide-fond: #171b20;
  --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="cx-hero__img"]:not(:has(img)):not(:has(video)) > * {
  font-size: 0 !important;
}
[data-slot="cx-hero__img"]: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 */