/* ============================================================
   ELECTR — habillage.

   Ce que la fiche native impose et qu on ne retrouve nulle part
   ailleurs dans le parc :
     · un cadre de 32 seulement, les vues frolent le bord ;
     · un fond clair de bout en bout, UNE seule surface pleine ;
     · aucune bordure dessinee : un anneau interieur d un pixel ;
     · les extremites des files defilantes fondues en masque ;
     · une lueur radiale, seul degrade de la fiche ;
     · les services empiles par bandes, jamais en grille ;
     · les avis poses en quinconce ;
     · une barre qui FLOTTE a distance du haut.
   ============================================================ */

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

:root {
  --cadre: 1368px;
  --bord: 32px;
  --pas: 96px;
  --rayon: 12px;
  --anneau: inset 0 0 0 1px var(--bordure);
  --pose: 0 .84px 2px rgba(0, 0, 0, .13), 0 .6px 6px rgba(0, 0, 0, .08);
  --titre-police: 'Familjen Grotesk', 'Inter', system-ui, sans-serif;
  --texte-police: 'Inter', system-ui, sans-serif;
}

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 400 17px/1.65 var(--texte-police);
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--titre-police); font-weight: 600; letter-spacing: -.02em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* Le cadre : une marge etroite, la plus etroite du parc. */
.el-rail {
  width: 100%;
  max-width: var(--cadre);
  margin: 0 auto;
  padding: 0 var(--bord);
}

.el-sec { padding: var(--pas) 0; }
.el-sec--serre { padding: calc(var(--pas) / 2) 0; }

/* ---- Pieces communes ---------------------------------------- */

.el-marque {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 12px/1 var(--texte-police);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--texte-doux);
  margin-bottom: 18px;
  position: relative; padding-left: 16px;
}
.el-marque::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 8px; height: 8px; margin-top: -4px;
  border-radius: 999px; background: var(--marque);
  pointer-events: none;
}

.el-titre { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; }
.el-titre--geant { font-size: clamp(38px, 5.2vw, 68px); }
.el-titre--large { font-size: clamp(32px, 4vw, 52px); }
.el-titre--centre { text-align: center; margin-inline: auto; }
.el-titre em { font-style: normal; color: var(--texte-doux); }
.el-appel__bandeau .el-titre em { color: var(--sur-marque); }

.el-h2 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.2; margin-top: 34px; }
.el-h3 { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.25; }
.el-h4 { font-size: 18px; line-height: 1.3; }

.el-intro { color: var(--texte-doux); font-size: clamp(17px, 1.3vw, 19px); margin-top: 18px; max-width: 62ch; }
.el-texte { color: var(--texte-doux); margin-top: 14px; }
.el-texte--large { font-size: 18px; max-width: 74ch; }
.el-mention { display: block; margin-top: 18px; font-size: 13px; color: var(--texte-doux); }

.el-entete { max-width: 720px; }
.el-entete--centre { max-width: 760px; margin-inline: auto; text-align: center; }
.el-entete--centre .el-marque { justify-content: center; }
.el-entete--centre .el-intro { margin-inline: auto; }

.el-signe { flex: none; }

.el-image { width: 100%; height: auto; border-radius: var(--rayon); object-fit: cover; }

.el-bouton {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border: 0; border-radius: 999px;
  background: var(--marque); color: var(--sur-marque);
  font: 600 15px/1 var(--texte-police);
  text-decoration: none; cursor: pointer;
  box-shadow: var(--pose);
  transition: transform .18s ease, box-shadow .18s ease;
}
.el-bouton:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .17); }
.el-bouton--nu {
  background: transparent; color: var(--texte);
  box-shadow: var(--anneau);
  padding: 12px 20px;
}
.el-bouton--nu:hover { box-shadow: inset 0 0 0 1px var(--texte-doux); }
.el-bouton--gauche { align-self: flex-start; margin-top: 20px; }

.el-puces { margin-top: 16px; display: grid; gap: 10px; }
.el-puces li { display: flex; gap: 10px; align-items: flex-start; color: var(--texte-doux); font-size: 15px; }
.el-puces li .el-signe { color: var(--marque); margin-top: 3px; }
.el-puces--fin li { font-size: 14px; }
.el-puces--file { display: flex; flex-wrap: wrap; gap: 8px 20px; }

.el-jetons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.el-jetons b {
  font: 500 13px/1 var(--texte-police);
  padding: 8px 12px; border-radius: 999px;
  background: var(--fond-2); color: var(--texte-doux);
}

.el-adresse { font-style: normal; display: grid; gap: 4px; color: var(--texte-doux); }

/* ---- 1. Barre flottante ------------------------------------- */

.el-barre {
  position: sticky; top: 0; z-index: 60;
  padding: 19px var(--bord);
}
.el-barre__rail {
  max-width: calc(var(--cadre) + 64px);
  margin: 0 auto;
  display: flex; align-items: center; gap: 18px;
  background: var(--fond-2);
  border-radius: var(--rayon);
  padding: 14px 20px;
  transition: box-shadow .2s ease;
}
.el-barre--posee .el-barre__rail { box-shadow: var(--pose); }

.el-logo {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; font: 700 19px/1 var(--titre-police);
  letter-spacing: -.02em; color: var(--texte);
}
.el-logo .el-signe { color: var(--marque); }

.el-nav { display: flex; align-items: center; gap: 4px; margin-left: 26px; }
.el-nav__case { position: relative; }
.el-nav__case > a, .el-nav__case > span, .el-volet__tete {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 12px; border-radius: 999px;
  font: 500 15px/1 var(--texte-police);
  text-decoration: none; color: var(--texte); cursor: pointer;
}
.el-nav__case > a:hover, .el-volet__tete:hover { background: var(--fond); }

.el-chev {
  width: 8px; height: 8px; display: inline-block;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease;
}
.el-volet:hover .el-volet__tete .el-chev { transform: rotate(225deg) translate(-1px, -1px); }

.el-barre__bout { margin-left: auto; display: flex; align-items: center; gap: 14px; }
/* NORME COQUILLE, REGLE 7 — la porte d appel de la BARRE est une porte, pas
   une mention : elle porte une bordure et une hauteur de clic, sinon la mesure
   ne la voit pas (elle juge la forme rendue, jamais la classe). */
.el-tel {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 999px;
  border: 1.5px solid var(--bordure);
  text-decoration: none; white-space: nowrap;
  font: 600 15px/1 var(--texte-police); color: var(--texte);
}
.el-tel .el-signe { color: var(--marque); }
.el-tel--vide { opacity: .55; }

/* NORME COQUILLE, REGLE 7 — la porte d APPEL.
   Deux etats tenables : REMPLIE, elle mene au numero ; VIDE, elle garde la
   meme empreinte, creuse, tracee en `currentColor` — la place est tenue, la
   destination reste a venir. */
.el-porte-appel {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 999px;
  font: 600 15px/1 var(--texte-police); color: var(--texte);
  text-decoration: none; white-space: nowrap;
  border: 1.5px solid currentColor;
}
.el-porte-appel .el-signe { color: currentColor; }
.el-porte-appel--vide { opacity: .55; }
.el-porte-appel--cote { color: inherit; }

/* La commande de devis et la porte d appel se rendent PAR PAIRE. */
.el-form__paire {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 22px;
}
.el-form__paire .el-bouton { margin-top: 0; }
.el-bouton--barre { padding: 12px 20px; }

.el-poussoir {
  display: none; margin-left: auto;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 999px; background: var(--fond); cursor: pointer;
  box-shadow: var(--anneau);
}
.el-poussoir span {
  display: block; width: 18px; height: 1.6px; margin: 4px auto;
  background: var(--texte); transition: transform .2s ease, opacity .2s ease;
}

/* Volets : le decalage sous l intitule est un PADDING, jamais une
   marge — sinon le survol tombe dans le vide entre les deux. */
.el-volet__panneau {
  position: absolute; top: 100%; left: var(--dx, 0px);
  padding-top: 16px;
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 70;
}
.el-volet:hover .el-volet__panneau,
.el-volet:focus-within .el-volet__panneau { opacity: 1; visibility: visible; transform: none; }

.el-volet__surface {
  display: flex; gap: 28px;
  min-width: 460px;
  padding: 24px;
  background: var(--fond);
  border-radius: var(--rayon);
  box-shadow: var(--anneau), 0 18px 44px rgba(0, 0, 0, .13);
}
.el-volet__colonnes { display: flex; gap: 32px; flex: 1 1 auto; min-width: 0; }
.el-volet__col { min-width: 150px; }
.el-volet__col b { display: block; font: 600 12px/1 var(--texte-police); letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux); margin-bottom: 12px; }
.el-volet__col ul { display: grid; gap: 8px; }
.el-volet__col a, .el-volet__col span {
  display: block; padding: 6px 8px; border-radius: 8px;
  font-size: 15px; text-decoration: none; color: var(--texte);
}
.el-volet__col a:hover { background: var(--fond-2); }

.el-volet__vitrine { flex: 0 0 190px; display: grid; gap: 10px; align-content: start; }
.el-volet__cadre {
  display: block; width: 100%; aspect-ratio: 4 / 3;
  border-radius: 10px; background: var(--fond-2); overflow: hidden;
  box-shadow: var(--anneau);
}
.el-volet__photo { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.el-volet__vitrine b { font-size: 15px; }
.el-volet__mot { font-size: 13px; color: var(--texte-doux); }

/* ---- 2. Hero ------------------------------------------------- */

.el-hero { padding: 40px 0 var(--pas); }
.el-hero__rail { display: flex; align-items: flex-start; gap: 60px; }
.el-hero__mot { flex: 1 1 560px; min-width: 0; padding-top: 96px; }
.el-hero__sous { margin-top: 22px; color: var(--texte-doux); font-size: 19px; max-width: 52ch; }
.el-hero__boutons { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* NORME COQUILLE, R3 — une grille tient UNE largeur : pistes COMPTEES,
   jamais `flex: 1 1 base` dont la derniere rangee s etire. */
.el-hero__atouts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px; margin-top: 52px;
}
.el-hero__atouts li { min-width: 0; display: grid; gap: 6px; align-content: start; }
.el-hero__atouts .el-signe { color: var(--marque); }
.el-hero__atouts b { font: 600 16px/1.3 var(--titre-police); }
.el-hero__atouts span { color: var(--texte-doux); font-size: 15px; }

/* La vue depasse le texte vers le haut, et une lueur radiale se
   pose derriere elle : le seul degrade de la fiche. */
.el-hero__vue { flex: 0 1 515px; min-width: 0; position: relative; }
.el-hero__vue::before {
  content: ''; position: absolute; inset: -14% -10% 20% -10%;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--marque) 55%, transparent) 0%,
    color-mix(in srgb, var(--marque) 18%, transparent) 58%,
    transparent 100%);
  filter: blur(6px); pointer-events: none;
}
.el-hero__photo { position: relative; aspect-ratio: 515 / 480; }

/* ---- 3. Bande defilante ------------------------------------- */

.el-bande { padding: 26px 0; overflow: hidden; }
.el-bande__piste {
  display: flex; width: max-content;
  animation: el-glisse 34s linear infinite;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 11%, #000 89%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 11%, #000 89%, transparent 100%);
}
.el-bande__file { display: flex; align-items: center; gap: 56px; padding-right: 56px; }
.el-bande__case {
  font: 600 20px/1 var(--titre-police);
  color: var(--texte-doux); white-space: nowrap; opacity: .78;
}
.el-bande__case--t1 { font-size: 26px; }
.el-bande__case--t2 { font-size: 17px; letter-spacing: .1em; text-transform: uppercase; }
.el-bande__case--t3 { font-size: 23px; font-style: italic; }
@keyframes el-glisse { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .el-bande__piste { animation: none; } }

/* ---- 4. Services empiles par bandes -------------------------- */

.el-services__duo { display: flex; align-items: flex-start; gap: 56px; }
.el-services__tete { flex: 0 1 480px; min-width: 0; position: sticky; top: 120px; }
.el-services__tete .el-bouton { margin-top: 28px; }
.el-services__pile { flex: 1 1 560px; min-width: 0; display: grid; gap: 36px; }

.el-service { display: flex; align-items: flex-start; gap: 26px; }
.el-service__vue { flex: 0 0 298px; max-width: 42%; }
.el-service__vue .el-image { aspect-ratio: 298 / 250; }
.el-service__mot { flex: 1 1 auto; min-width: 0; padding-top: 6px; }
.el-service__mot .el-bouton--nu { margin-top: 18px; }

/* ---- 5. Amorce ---------------------------------------------- */

.el-amorce__rail { max-width: 980px; }
.el-amorce .el-texte--large + .el-texte--large { margin-top: 20px; }

/* ---- 6. Blocs de referencement ------------------------------- */

.el-bloc { display: flex; align-items: center; gap: 64px; }
.el-bloc + .el-bloc { margin-top: var(--pas); }
.el-bloc--retourne { flex-direction: row-reverse; }
.el-bloc__vue { flex: 1 1 520px; min-width: 0; }
.el-bloc__vue .el-image { aspect-ratio: 4 / 3; }
.el-bloc__mot { flex: 1 1 480px; min-width: 0; }
.el-bloc__mot .el-bouton--nu { margin-top: 22px; }

/* ---- 7. Expertise et colonne laterale droite ----------------- */

.el-flanc { display: flex; align-items: flex-start; gap: 48px; }
.el-flanc__corps { flex: 1 1 780px; min-width: 0; }
.el-flanc__cote { flex: 0 0 397px; max-width: 100%; min-width: 0; display: grid; gap: 20px; }
.el-flanc__encart { padding: 22px; border-radius: var(--rayon); background: var(--fond-2); }
.el-flanc__vue { aspect-ratio: 4 / 3; }
.el-flanc__corps .el-bouton { margin-top: 26px; }

/* ---- 8. Pourquoi nous --------------------------------------- */

.el-pourquoi__duo { display: flex; align-items: flex-start; gap: 56px; }
.el-pourquoi__vue { flex: 1 1 644px; min-width: 0; aspect-ratio: 644 / 415; }
.el-pourquoi__mot { flex: 1 1 600px; min-width: 0; }
.el-pourquoi__file { display: grid; gap: 22px; margin-top: 32px; }
.el-pourquoi__file li {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: baseline;
  padding-top: 20px; position: relative;
}
.el-pourquoi__file li::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--bordure); pointer-events: none;
}
.el-pourquoi__rang { grid-row: span 3; font: 600 15px/1 var(--titre-police); color: var(--marque); }
.el-pourquoi__file b { font: 600 17px/1.3 var(--titre-police); }
.el-pourquoi__file .el-texte { margin-top: 4px; }

/* ---- 9. Secteurs -------------------------------------------- */

.el-secteurs__file { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 46px; }
.el-secteur { flex: 1 1 320px; min-width: 0; }
.el-secteur--d1 { margin-top: 28px; }
.el-secteur--d2 { margin-top: 14px; }
.el-secteur__cadre { position: relative; display: block; margin-bottom: 18px; }
.el-secteur__vue { aspect-ratio: 4 / 5; }
.el-secteur__ref {
  display: block; font: 600 12px/1 var(--texte-police);
  letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux); margin-bottom: 8px;
}

/* ---- 10. Zones ---------------------------------------------- */

/* R3 + T5 — pistes comptees : la derniere rangee ne s etire plus,
   et chaque jeton garde une colonne de lecture tenable. */
.el-zones__file {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px; margin-top: 40px;
}
.el-zone {
  min-width: 0;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px 12px 12px; border-radius: 999px;
  background: var(--fond-2); text-decoration: none;
  transition: background .18s ease;
}
.el-zone:hover { background: color-mix(in srgb, var(--marque) 22%, var(--fond-2)); }
.el-zone__vue { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 999px; }
.el-zone b { flex: 1 1 auto; min-width: 0; font: 600 15px/1.2 var(--titre-police); }
.el-zone__tag { font-size: 13px; color: var(--texte-doux); }
.el-zone .el-signe { margin-left: auto; color: var(--texte-doux); }

/* ---- 11. Methode -------------------------------------------- */

.el-methode__file { display: grid; gap: 28px; margin-top: 46px; }
.el-etape {
  display: flex; align-items: flex-start; gap: 28px;
  padding-top: 28px; position: relative;
}
.el-etape::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--bordure); pointer-events: none;
}
.el-etape__rang {
  flex: 0 0 auto; font: 600 34px/1 var(--titre-police);
  color: color-mix(in srgb, var(--texte) 22%, transparent);
}
.el-etape__mot { flex: 1 1 auto; min-width: 0; }
.el-etape__cadre { flex: 0 0 240px; max-width: 34%; display: block; }
.el-etape__vue { aspect-ratio: 4 / 3; }

/* ---- 12. Chiffres ------------------------------------------- */

.el-chiffres__file { display: flex; flex-wrap: wrap; gap: 24px; margin: 0; }
.el-chiffre { flex: 1 1 200px; min-width: 0; padding-top: 20px; position: relative; }
.el-chiffre::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--marque); pointer-events: none;
}
.el-chiffre dt { font: 600 clamp(30px, 3vw, 42px)/1 var(--titre-police); }
.el-chiffre dd { margin: 8px 0 0; color: var(--texte-doux); font-size: 15px; }

/* ---- 13. Reperage ------------------------------------------- */

.el-repere__vue { aspect-ratio: 1368 / 420; }
.el-repere__duo { display: flex; flex-wrap: wrap; gap: 40px; margin-top: 36px; }
.el-repere__duo > * { flex: 1 1 380px; min-width: 0; }

/* ---- 14. Avis en quinconce ---------------------------------- */

.el-avis__quinconce { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 48px; }
.el-avis__fiche {
  flex: 1 1 300px; min-width: 0; margin: 0;
  padding: 26px; border-radius: var(--rayon);
  background: var(--fond); box-shadow: var(--anneau), var(--pose);
}
.el-avis__fiche:nth-child(3n + 2) { transform: translateY(15px); }
.el-avis__fiche:nth-child(3n + 3) { transform: translateY(31px); }
.el-avis__notes { display: flex; gap: 3px; color: var(--marque); margin-bottom: 12px; }
.el-avis__fiche b { font: 600 17px/1.3 var(--titre-police); }
.el-avis__fiche blockquote { margin: 10px 0 0; color: var(--texte-doux); font-size: 15px; }
.el-avis__fiche figcaption {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 20px; font: 600 15px/1 var(--texte-police);
}
.el-avis__fiche figcaption span:not(.el-avis__pastille) { font-weight: 400; color: var(--texte-doux); }
.el-avis__pastille {
  width: 38px; height: 38px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--marque); color: var(--sur-marque);
  font: 600 15px/1 var(--texte-police);
}

/* ---- 15. Questions ------------------------------------------ */

.el-questions .el-marque { justify-content: center; display: flex; width: max-content; margin-inline: auto; }
.el-questions__colonne { max-width: 840px; margin: 44px auto 0; }
.el-question { padding: 20px 0; border-top: 1px solid var(--bordure); }
.el-question summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  cursor: pointer; list-style: none;
  font: 600 18px/1.35 var(--titre-police);
}
.el-question summary::-webkit-details-marker { display: none; }
.el-question__rang { font: 600 13px/1 var(--titre-police); color: var(--marque); }
.el-question[open] summary .el-chev { transform: rotate(225deg) translate(-1px, -1px); }
.el-questions__encart {
  margin-top: 34px; padding: 26px; border-radius: var(--rayon);
  background: var(--fond-2); display: grid; gap: 6px; justify-items: start;
}
.el-questions__encart b { font: 600 18px/1.3 var(--titre-police); }
.el-questions__encart .el-bouton { margin-top: 14px; }

/* ---- 16. Urgence -------------------------------------------- */

.el-urgence {
  display: flex; align-items: center; flex-wrap: wrap; gap: 26px;
  padding: 28px; border-radius: var(--rayon);
  background: var(--fond-2); box-shadow: var(--anneau);
}
.el-urgence__mot { flex: 1 1 420px; min-width: 0; }
.el-urgence__etiq {
  display: inline-block; margin-bottom: 10px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--marque); color: var(--sur-marque);
  font: 600 12px/1 var(--texte-police); letter-spacing: .12em; text-transform: uppercase;
}

/* ---- 17. Certifications ------------------------------------- */

.el-certifs__duo { display: flex; align-items: flex-start; gap: 56px; }
.el-certifs__tete { flex: 0 1 520px; min-width: 0; }
.el-certifs__file { flex: 1 1 560px; min-width: 0; display: flex; flex-wrap: wrap; gap: 24px; }
.el-certif { flex: 1 1 260px; min-width: 0; padding: 24px; border-radius: var(--rayon); box-shadow: var(--anneau); }
.el-certif .el-signe { color: var(--marque); margin-bottom: 14px; }

/* ---- 18. Aides ---------------------------------------------- */

.el-aides__file { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 40px; }
.el-aide { flex: 1 1 300px; min-width: 0; padding: 26px; border-radius: var(--rayon); background: var(--fond-2); }
.el-aide__tete { display: flex; align-items: baseline; gap: 12px; }
.el-aide__rang { font: 600 14px/1 var(--titre-police); color: var(--marque); }
.el-aide__mot { margin-top: 12px; }
.el-aide__cond { margin-top: 14px; font-size: 13px; color: var(--texte-doux); }

/* ---- 19. Materiaux ------------------------------------------ */

/* NORME COQUILLE, R3 — une grille tient UNE largeur : pistes COMPTEES a
   chaque palier. `flex: 1 1 base` laissait la derniere rangee s etirer des
   que le compte ne tombait pas juste (4 fiches, 3 par rangee : la quatrieme
   prenait toute la largeur). */
.el-materiaux__file {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px; margin-top: 44px;
}
.el-materiau { min-width: 0; margin: 0; }
.el-materiau__cadre { display: block; margin-bottom: 16px; }
.el-materiau__vue { aspect-ratio: 3 / 4; }

/* ---- 20. Tarifs --------------------------------------------- */

.el-tarifs__file { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 44px; }
.el-tarif { flex: 1 1 300px; min-width: 0; padding: 28px; border-radius: var(--rayon); box-shadow: var(--anneau); }
.el-tarif__tete { display: grid; gap: 8px; margin-bottom: 12px; }
.el-tarif__prix { font: 600 30px/1 var(--titre-police); }
.el-tarif__prix span { font-size: 15px; font-weight: 400; color: var(--texte-doux); margin-left: 6px; }

/* ---- 21. Realisations : collage asymetrique ------------------ */

/* R3 — pistes comptees ; le collage garde son decalage par la marge haute,
   plus par une largeur de base qui laisserait la derniere rangee s etirer. */
.el-chantiers__collage {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start; gap: 30px; margin-top: 48px;
}
.el-chantier { min-width: 0; margin: 0; }
.el-chantier__vue { border-radius: var(--rayon); }
/* R1 — chaque variante de cadre porte SON nom : trois formats, trois
   emplacements declares, jamais un nom pour trois ratios. */
.el-chantier__vue--r0 { aspect-ratio: 315 / 408; }
.el-chantier__vue--r1 { aspect-ratio: 4 / 3; }
.el-chantier__vue--r2 { aspect-ratio: 241 / 266; }
.el-chantier--r1 { margin-top: 46px; }
.el-chantier figcaption { margin-top: 16px; }
.el-chantier__meta { display: block; margin-top: 10px; font-size: 13px; color: var(--texte-doux); }

/* ---- 22. Avant / apres -------------------------------------- */

.el-bascule__file { display: flex; flex-wrap: wrap; gap: 36px; margin-top: 44px; }
.el-bascule__jeu { flex: 1 1 420px; min-width: 0; margin: 0; }

.ab__scene {
  position: relative; width: 100%; aspect-ratio: 3 / 2;
  border-radius: var(--rayon); overflow: hidden; box-shadow: var(--anneau);
  touch-action: pan-y;
}
.ab__vue { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.ab__vue--apres { clip-path: inset(0 0 0 var(--pos)); }
.ab__trait {
  position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 2px; margin-left: -1px; background: var(--fond);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18); pointer-events: none;
}
.ab__trait::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 38px; height: 38px; margin: -19px 0 0 -19px;
  border-radius: 999px; background: var(--fond);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .28); pointer-events: none;
}
.ab__barre { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 12px; margin: 0 0 12px; }
.ab__etiq { flex: 1 1 auto; }
.ab__etiq {
  padding: 6px 12px; border-radius: 999px;
  background: var(--fond-2); color: var(--texte);
  font: 600 12px/1 var(--texte-police); letter-spacing: .08em; text-transform: uppercase;
}
.ab__etiq--d { color: var(--texte-doux); }
.ab__poignee {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; background: transparent; border: 0;
  -webkit-appearance: none; appearance: none; cursor: ew-resize;
}
.ab__poignee::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 44px; height: 100%; background: transparent; cursor: ew-resize;
}
.ab__poignee::-moz-range-thumb { width: 44px; height: 100%; background: transparent; border: 0; cursor: ew-resize; }
.ab__poignee:focus-visible { outline: 3px solid var(--marque); outline-offset: 3px; }
.el-bascule__mot { margin: 0 0 20px; }
.el-bascule__rang { display: block; font: 600 14px/1 var(--titre-police); color: var(--marque); margin-bottom: 8px; }

/* ---- 23. Maillage ------------------------------------------- */

.el-maillage__file { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 44px; }
.el-passage {
  flex: 1 1 300px; min-width: 0; text-decoration: none;
  display: grid; gap: 10px; padding-bottom: 20px;
  border-bottom: 1px solid var(--bordure);
}
.el-passage__vue { aspect-ratio: 16 / 10; margin-bottom: 6px; }
.el-passage b { font: 600 18px/1.3 var(--titre-police); }
.el-passage__meta { font-size: 13px; color: var(--texte-doux); }
.el-passage__fleche { color: var(--marque); }

/* ---- 24. Appel de pied : LA surface pleine ------------------- */

.el-appel__bandeau {
  position: relative; overflow: hidden;
  border-radius: var(--rayon);
  background: var(--marque); color: var(--sur-marque);
  padding: 34px 36px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 28px;
}
.el-appel__photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .16; pointer-events: none;
}
.el-appel__mot { position: relative; flex: 1 1 460px; min-width: 0; }
.el-appel__mot .el-marque, .el-appel__mot .el-texte { color: inherit; opacity: .86; }
.el-appel__mot .el-marque::before { background: currentColor; }
.el-appel__bandeau .el-bouton {
  position: relative;
  background: var(--sur-marque); color: var(--marque);
}
.el-appel__ligne { position: relative; display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.el-appel__ligne .el-case { flex: 1 1 200px; min-width: 0; }
.el-appel__ligne .el-case label { color: inherit; }

/* ---- 25. Fil d ariane --------------------------------------- */

.el-ariane { padding: 22px 0 6px; }
.el-ariane ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--texte-doux); }
.el-ariane li { display: inline-flex; align-items: center; gap: 8px; }
.el-ariane a { text-decoration: none; }
.el-ariane a:hover { text-decoration: underline; }
.el-ariane__pas + .el-ariane__pas::before {
  content: ''; width: 5px; height: 5px; border-radius: 999px;
  background: var(--bordure); margin-right: 8px;
}
.el-ariane__sep {
  width: 6px; height: 6px; display: inline-block;
  border-right: 1.4px solid currentColor; border-top: 1.4px solid currentColor;
  transform: rotate(45deg);
}

/* ---- 26. Contact -------------------------------------------- */

.el-contact__duo { display: flex; align-items: flex-start; gap: 56px; }
.el-contact__tete { flex: 0 1 485px; min-width: 0; }
.el-coord { margin-top: 26px; display: grid; gap: 4px; color: var(--texte-doux); font-size: 15px; }
.el-coord .el-h4 { color: var(--texte); margin-bottom: 4px; }

.el-form { flex: 1 1 600px; min-width: 0; display: flex; flex-direction: column; }
.el-form__grille { display: flex; flex-wrap: wrap; gap: 18px; }
.el-case { flex: 1 1 260px; min-width: 0; display: grid; gap: 8px; margin: 0; }
.el-case--pleine, .el-case--haute { flex: 1 1 100%; }
.el-case label { font: 500 14px/1 var(--texte-police); color: var(--texte-doux); }
.el-case input, .el-case select, .el-case textarea {
  width: 100%; max-width: 100%;
  font: 400 15px/1.4 var(--texte-police); color: var(--texte);
  background: var(--fond-2); border: 0; border-radius: 10px;
  padding: 13px 14px; box-shadow: var(--anneau);
}
.el-case textarea { min-height: 124px; resize: vertical; }
.el-case input:focus-visible, .el-case select:focus-visible, .el-case textarea:focus-visible {
  outline: 2px solid var(--marque); outline-offset: 1px;
}

/* ---- 27. Journal -------------------------------------------- */

.el-journal .el-bouton--nu { display: flex; width: max-content; margin: 24px auto 0; }
/* R3 — pistes comptees : trois fiches egales, a toutes les largeurs. */
.el-journal__file {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px; margin-top: 44px;
}
.el-billet {
  min-width: 0; text-decoration: none;
  display: grid; gap: 12px;
}
.el-billet__haut { position: relative; display: block; border-radius: var(--rayon); overflow: hidden; }
.el-billet__haut > .el-billet__vue { width: 100%; aspect-ratio: 440 / 312; object-fit: cover; }
.el-billet__meta {
  position: absolute; left: 12px; bottom: 12px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--fond); color: var(--texte);
  font: 600 12px/1 var(--texte-police);
}
.el-billet__lien { text-decoration: none; margin-top: 16px; }
.el-billet b { font: 600 19px/1.3 var(--titre-police); }
.el-billet__lien:hover b { text-decoration: underline; }

/* ---- 28. Article -------------------------------------------- */

.el-article__tete { padding-bottom: 6px; }
.el-article__meta { margin-top: 12px; color: var(--texte-doux); font-size: 14px; }
.el-article__corps > * + * { margin-top: 18px; }
.el-article__vue { margin-top: 26px; aspect-ratio: 16 / 9; }
.el-encadre {
  margin-top: 26px; padding: 22px; border-radius: var(--rayon);
  background: var(--fond-2); display: grid; gap: 6px;
}
.el-sommaire { padding: 22px; border-radius: var(--rayon); box-shadow: var(--anneau); position: sticky; top: 120px; }
.el-sommaire b { display: block; font: 600 12px/1 var(--texte-police); letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux); margin-bottom: 14px; }
.el-sommaire ol { display: grid; gap: 10px; counter-reset: el-som; }
.el-sommaire li { counter-increment: el-som; display: flex; gap: 10px; font-size: 15px; }
.el-sommaire li::before { content: counter(el-som, decimal-leading-zero); color: var(--marque); font-weight: 600; }
.el-sommaire a { text-decoration: none; }
.el-sommaire a:hover { text-decoration: underline; }

/* ---- 29. Mentions ------------------------------------------- */

.el-legal__rail { max-width: 860px; }
.el-legal__maj { margin-top: 12px; color: var(--texte-doux); font-size: 14px; }
.el-legal__index { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 28px; font-size: 14px; }
.el-legal__index a { color: var(--texte-doux); text-decoration: none; }
.el-legal__index a:hover { color: var(--texte); text-decoration: underline; }
.el-legal__bloc { margin-top: 40px; }
.el-legal__mot { margin-top: 16px; }
.el-legal__bloc h2 { display: flex; gap: 14px; align-items: baseline; }
.el-legal__bloc h2 span { color: var(--marque); font-size: 15px; }
.el-legal__bloc .el-texte:first-of-type { margin-top: 16px; }

/* ---- 30. Facettes ------------------------------------------- */

.el-facettes { padding: 18px 0 0; }
.el-facettes__etiq { font: 600 12px/1 var(--texte-police); letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux); }
.el-facettes__rail { display: grid; gap: 16px; }
.el-facettes__tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.el-facettes__tit { font: 600 18px/1.3 var(--titre-police); }
.el-facettes__compte { font: 600 12px/1 var(--texte-police); color: var(--marque); }
.el-facettes__file { display: flex; flex-wrap: wrap; gap: 10px; }
.el-facette {
  display: inline-block; padding: 9px 16px; border-radius: 999px;
  background: var(--fond-2); color: var(--texte);
  font: 500 14px/1 var(--texte-police); text-decoration: none;
}
.el-facette--courant { background: var(--marque); color: var(--sur-marque); font-weight: 600; }

/* ---- 31 et 32. Produits ------------------------------------- */

/* R3 — pistes comptees. Ici le compte de fiches VARIE d une page a l autre
   (deux, trois ou quatre) : les pistes se comptent donc sur la matiere rendue,
   sinon une page a deux produits garderait deux pistes vides a sa droite. Les
   surcharges par compte vivent APRES la regle generique, et les paliers plus
   bas les reprennent une a une — meme specificite, c est la position qui
   tranche. */
.el-produits__file {
  --pistes: 2;
  display: grid; grid-template-columns: repeat(var(--pistes), minmax(0, 1fr));
  gap: 26px; margin-top: 44px;
}
.el-produits__file:has(> :nth-child(3)) { --pistes: 3; }
.el-produits__file:has(> :nth-child(4)) { --pistes: 4; }
.el-produit { min-width: 0; padding-bottom: 22px; border-bottom: 1px solid var(--bordure); }
.el-produit__vue { aspect-ratio: 1 / 1; margin-bottom: 18px; }
.el-produit__prix { margin-top: 8px; font: 600 22px/1 var(--titre-police); }
.el-produit__prix span { font-size: 14px; font-weight: 400; color: var(--texte-doux); margin-left: 6px; }
.el-produit h3 a { text-decoration: none; }

.el-fiche__duo { display: flex; align-items: flex-start; gap: 56px; }
.el-fiche__tete { max-width: 820px; margin-bottom: 40px; }
.el-fiche__cadre { flex: 1 1 560px; min-width: 0; display: block; }
.el-fiche__vue { aspect-ratio: 4 / 3; }
.el-fiche__mot { flex: 1 1 460px; min-width: 0; }
.el-fiche__prix { margin-top: 22px; font: 600 34px/1 var(--titre-police); }
.el-fiche__prix span { font-size: 15px; font-weight: 400; color: var(--texte-doux); margin-left: 8px; }
.el-fiche__mot .el-bouton { margin-top: 26px; }

/* ---- 33. Caracteristiques ----------------------------------- */

.el-specs__table {
  margin: 36px 0 0; display: grid; gap: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
}
.el-spec__cle {
  padding: 16px 24px 16px 0; border-top: 1px solid var(--bordure);
  color: var(--texte-doux); font-size: 15px; min-width: 0;
}
.el-spec__cle span { color: var(--marque); font-weight: 600; margin-right: 10px; }
.el-spec__val {
  margin: 0; padding: 16px 0; border-top: 1px solid var(--bordure);
  font-weight: 500; text-align: right; min-width: 0;
}

/* ---- 34. Pied ----------------------------------------------- */

.el-pied { background: var(--fond-2); padding: var(--pas) 0 34px; margin-top: var(--pas); }
.el-pied__haut { display: flex; flex-wrap: wrap; gap: 56px; }
.el-pied__signature { flex: 1 1 473px; min-width: 0; display: grid; gap: 12px; justify-items: start; }
.el-pied__vue { width: 100%; max-width: 473px; aspect-ratio: 473 / 132; object-fit: contain; object-position: left center; }
.el-pied__signature b { font: 700 22px/1 var(--titre-police); }
.el-pied__nap { display: grid; gap: 4px; font-size: 15px; color: var(--texte-doux); }
.el-pied__naptit { font-weight: 600; color: var(--texte); }
.el-pied__colonnes { flex: 1 1 480px; min-width: 0; display: flex; flex-wrap: wrap; gap: 32px; }
.el-pied__col { flex: 1 1 160px; min-width: 0; }
.el-pied__col b { display: block; font: 600 12px/1 var(--texte-police); letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux); margin-bottom: 14px; }
.el-pied__col ul { display: grid; gap: 9px; font-size: 15px; }
.el-pied__col a { text-decoration: none; }
.el-pied__col a:hover { text-decoration: underline; }
.el-pied__bas {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--bordure);
}
.el-pied__credit { font-size: 14px; color: var(--texte-doux); }
.el-pied__reseaux { display: flex; flex-wrap: wrap; gap: 16px; font-size: 14px; }
.el-pied__reseaux a { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; color: var(--texte-doux); }
.el-pied__reseaux a:hover { color: var(--texte); }

/* ============================================================
   Adaptations — la fiche native ne descend pas sous 1440, le
   repli est notre affaire : on desempile dans l ordre de lecture.
   ============================================================ */

@media (max-width: 1180px) {
  :root { --pas: 76px; }
  .el-hero__rail, .el-services__duo, .el-pourquoi__duo, .el-certifs__duo,
  .el-contact__duo, .el-fiche__duo, .el-flanc { gap: 36px; }
  .el-hero__mot { padding-top: 40px; }
  .el-volet__surface { min-width: 420px; }
  /* R3 — le nombre de pistes se declare a CHAQUE palier. */
  .el-hero__atouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .el-zones__file { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .el-materiaux__file { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .el-produits__file,
  .el-produits__file:has(> :nth-child(3)),
  .el-produits__file:has(> :nth-child(4)) { --pistes: 3; }
}

@media (max-width: 1023px) {
  :root { --pas: 64px; --bord: 20px; }

  .el-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    margin: 0; padding: 12px;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: var(--fond); border-radius: var(--rayon);
    box-shadow: var(--anneau), 0 18px 40px rgba(0, 0, 0, .15);
    max-height: 74vh; overflow-y: auto;
  }
  .el-barre__rail { position: relative; flex-wrap: wrap; }
  .el-barre--deploye .el-nav { display: flex; }
  .el-poussoir { display: block; }
  .el-barre--deploye .el-poussoir span:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
  .el-barre--deploye .el-poussoir span:nth-child(2) { opacity: 0; }
  .el-barre--deploye .el-poussoir span:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }
  /* La porte d appel ne se replie JAMAIS, et la commande de devis non plus :
     la paire de la regle 7 vaut a TOUT palier. Elle se resserre, elle ne
     disparait pas — replier une porte dans un menu n est pas la tenir. */
  .el-barre__bout { margin-left: 0; gap: 10px; }
  .el-barre__bout .el-tel,
  .el-barre__bout .el-bouton--barre { padding: 10px 15px; font-size: 14px; }

  /* Sur appareil compact le volet se replie A PLAT : il se deroule
     sous son intitule au lieu de flotter au-dessus du contenu. */
  .el-volet__panneau {
    position: static; opacity: 1; visibility: visible; transform: none;
    padding: 0 0 8px;
  }
  .el-volet__surface {
    flex-direction: column; min-width: 0; gap: 14px;
    padding: 12px; background: var(--fond-2); box-shadow: none;
  }
  .el-volet__colonnes { flex-direction: column; gap: 12px; }
  .el-volet__vitrine { flex: 1 1 auto; }
  .el-volet__cadre { max-width: 220px; }
  .el-chev { display: none; }

  .el-hero__rail, .el-services__duo, .el-pourquoi__duo, .el-bloc,
  .el-bloc--retourne, .el-contact__duo, .el-fiche__duo, .el-flanc,
  .el-certifs__duo, .el-repere__duo { flex-direction: column; }
  .el-hero__mot, .el-hero__vue, .el-services__tete, .el-services__pile,
  .el-pourquoi__vue, .el-pourquoi__mot, .el-bloc__vue, .el-bloc__mot,
  .el-contact__tete, .el-form, .el-fiche__cadre, .el-fiche__mot,
  .el-flanc__corps, .el-flanc__cote, .el-certifs__tete,
  .el-certifs__file { flex: 1 1 auto; width: 100%; max-width: 100%; }
  .el-services__tete, .el-sommaire { position: static; }
  .el-service__vue { flex: 0 0 200px; }
  .el-avis__fiche:nth-child(3n + 2), .el-avis__fiche:nth-child(3n + 3) { transform: none; }
  .el-secteur--d1, .el-secteur--d2 { margin-top: 0; }
  .el-chantier--r1 { margin-top: 0; }
  .el-chantiers__collage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .el-hero__atouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .el-zones__file { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .el-materiaux__file { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .el-journal__file { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .el-produits__file,
  .el-produits__file:has(> :nth-child(3)),
  .el-produits__file:has(> :nth-child(4)) { --pistes: 2; }
}

@media (max-width: 700px) {
  .ab__barre { flex-direction: column; }
  .ab__etiq { text-align: center; }
  :root { --pas: 52px; --bord: 16px; }
  body { font-size: 16px; }
  .el-barre { padding: 12px var(--bord); }
  .el-service, .el-etape { flex-direction: column; gap: 16px; }
  .el-service__vue, .el-etape__cadre { flex: 1 1 auto; width: 100%; max-width: 100%; }
  .el-etape__vue { aspect-ratio: 16 / 10; }
  .el-specs__table { grid-template-columns: minmax(0, 1fr); }
  .el-spec__val { text-align: left; padding-top: 0; border-top: 0; }
  .el-hero__atouts { gap: 18px; grid-template-columns: minmax(0, 1fr); }
  .el-zones__file { grid-template-columns: minmax(0, 1fr); }
  .el-materiaux__file { grid-template-columns: minmax(0, 1fr); }
  .el-journal__file { grid-template-columns: minmax(0, 1fr); }
  .el-produits__file,
  .el-produits__file:has(> :nth-child(3)),
  .el-produits__file:has(> :nth-child(4)) { --pistes: 1; }
  .el-appel__bandeau { padding: 24px 20px; }
  .el-pourquoi__file li { grid-template-columns: 1fr; }
  .el-pourquoi__rang { grid-row: auto; }
  .el-bande__case { font-size: 17px; }
  .el-bande__case--t1 { font-size: 20px; }
  .el-bande__case--t3 { font-size: 18px; }
  .el-question summary { font-size: 16px; }
}

/* >>> 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 */

/* === LOGO MARQUE (factory) : vrai logo.svg en lockup avec le nom dans le header === */
.zx-brandlogo{height:1.7em;width:auto;max-height:40px;vertical-align:middle;margin-right:.5em;object-fit:contain;border-radius:6px;flex:0 0 auto}
.zx-send{display:inline-block;margin-top:.6rem;padding:.85em 1.7em;border:0;border-radius:8px;background:var(--accent,var(--marque,#141414));color:var(--sur-marque,#fff);font:inherit;font-weight:700;line-height:1;cursor:pointer}
.zx-send:hover{filter:brightness(1.08)}
.zx-marques{padding:1.5rem 1rem;background:var(--fond,#f6f6f6);border-top:1px solid rgba(0,0,0,.06);border-bottom:1px solid rgba(0,0,0,.06)}
.zx-marques__in{max-width:1100px;margin:0 auto;text-align:center}
.zx-marques__t{margin:0 0 .9rem;font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--texte,#333);opacity:.55}
.zx-marques__u{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1.6rem 2.4rem}
.zx-marques__u img{height:34px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.7;transition:.2s}
.zx-marques__u img:hover{filter:none;opacity:1}
.zx-marques__u span{font-weight:700;color:var(--texte,#333);opacity:.55}
.zx-certs{padding:3rem 1rem;background:var(--sur-marque,#fff)}
.zx-certs__in{max-width:1100px;margin:0 auto}
.zx-certs__e{margin:0 0 .3rem;font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--accent,#c62828);font-weight:700}
.zx-certs__h{margin:0 0 1.6rem;font-size:1.9rem;color:var(--texte,#1a1a1a)}
.zx-certs__u{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.1rem}
.zx-certs__i{display:flex;gap:.8rem;align-items:flex-start;padding:1.1rem;background:var(--fond,#f7f7f7);border-radius:12px}
.zx-certs__ic{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--accent,#c62828);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700}
.zx-certs__t{margin:0 0 .2rem;font-weight:700;color:var(--texte,#1a1a1a)}
.zx-certs__x{margin:0;font-size:.9rem;line-height:1.4;color:var(--texte,#555);opacity:.8}

/* === GARDE-FOU débordement horizontal mobile (factory, audit 04/09) === */
html,body{overflow-x:clip;max-width:100%}
img,video,iframe,table,svg{max-width:100%}