/* ==========================================================
   LOGITEN — feuille SOURCE. dist/style.css en est une copie
   ecrasee a chaque rendu : ne jamais editer la copie.

   Huit jetons, aucun autre ; --sur-marque est calcule par le
   moteur, jamais choisi ici. Aucune couleur en dur : seuls des
   melanges de jetons, les ombres noires et les masques.

   Deux rayons pour tout le systeme : 10 pour un cadre, 100 pour
   une pilule. Aucune asymetrie, aucun angle vif.
   ========================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font: 400 16px/1.6 Inter, system-ui, sans-serif;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-family: 'Bricolage Grotesque', Inter, sans-serif; font-weight: 700; }
p, ul, ol, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }

/* ---- cadre : 1200 centres, marge de flanc de 120 au-dela ---- */
.lg-cadre { width: min(1200px, 100% - 48px); margin-inline: auto; }
.lg-sec { padding: 96px 0; }
.lg-sec--mince { padding: 56px 0; }
/* La bande pale porte une rayure fine : la seule texture du systeme. */
.lg-sec--pale { position: relative; background: var(--fond-2); }
.lg-sec--pale::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 6px; pointer-events: none;
  background: repeating-linear-gradient(90deg,
    color-mix(in srgb, var(--marque) 55%, transparent) 0 22px,
    transparent 22px 44px);
}

/* ---- vues : rayon de cadre, anneau interieur au lieu de bordure ---- */
.lg-vue {
  position: relative; overflow: hidden; border-radius: 10px;
  background: color-mix(in srgb, var(--marque) 8%, var(--fond-2));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bordure) 92%, transparent);
}
.lg-vue img { width: 100%; height: 100%; object-fit: cover; }
.lg-vue > span {
  display: block; padding: 24px; font-size: 13px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--texte-doux);
}

/* ---- textes ---- */
.lg-h1 {
  font-size: clamp(34px, 5vw, 62px); line-height: 1.05; letter-spacing: -.02em;
  color: var(--sur-marque);
}
.lg-h1--sombre { color: var(--texte); }
.lg-h1 em, .lg-h2 em { font-style: normal; color: var(--accent); }
.lg-h1 em { color: inherit; opacity: .82; }
.lg-h2 {
  font-size: clamp(26px, 3.2vw, 42px); line-height: 1.1; letter-spacing: -.015em;
}
.lg-h2--petit { font-size: 22px; }
.lg-txt { color: var(--texte-doux); font-size: 16px; }
.lg-txt + .lg-txt { margin-top: 14px; }
.lg-txt--fort { color: var(--texte); font-size: 18px; }
.lg-txt--sur { color: color-mix(in srgb, var(--sur-marque) 84%, transparent); }
.lg-meta { font-size: 13px; color: var(--texte-doux); }
.lg-sur {
  display: inline-block; margin-bottom: 14px; padding: 7px 16px; border-radius: 100px;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  color: var(--marque);
  background: color-mix(in srgb, var(--marque) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marque) 22%, transparent);
}
.lg-adresse { margin-top: 12px; font-size: 18px; font-weight: 600; color: var(--sur-marque); }

/* Puce de liste dessinee par un masque, jamais un caractere. */
.lg-points { display: grid; gap: 10px; margin-top: 18px; }
.lg-points li { position: relative; padding-left: 30px; color: var(--texte-doux); }
.lg-points li::before {
  content: ''; position: absolute; left: 0; top: 6px; width: 16px; height: 16px;
  pointer-events: none; background: var(--marque);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1 14.5l-4-4 1.5-1.5 2.5 2.5 5-5L17.5 10z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1 14.5l-4-4 1.5-1.5 2.5 2.5 5-5L17.5 10z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

/* ---- pilules : l unique forme d action ---- */
.lg-pil {
  display: inline-flex; align-items: center; gap: 10px; justify-content: center;
  min-height: 50px; padding: 0 26px; border-radius: 100px; border: 0;
  font: 600 15px/1 Inter, sans-serif; cursor: pointer;
  color: var(--sur-marque); background: var(--marque);
}
.lg-pil--contour {
  color: var(--marque); background: transparent;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--marque) 55%, transparent);
}
.lg-pil--clair { color: var(--marque); background: var(--fond); }
.lg-pil--anneau {
  color: var(--sur-marque); background: transparent;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--sur-marque) 55%, transparent);
}
.lg-pil--bloc { width: 100%; }
.lg-pil--appel { padding: 8px 26px; }
.lg-pil__pt {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: color-mix(in srgb, var(--sur-marque) 80%, transparent);
}
.lg-pil__pile { display: grid; text-align: left; line-height: 1.25; }
.lg-pil__haut { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.lg-pil__bas { font-size: 15px; }
.lg-centre { display: flex; justify-content: center; margin-top: 40px; }

/* Fleche de suite : glyphe en masque, aligne sur la ligne de texte. */
.lg-fleche {
  position: relative; display: inline-flex; align-items: center; gap: 26px;
  margin-top: 16px; font-weight: 600; font-size: 15px; color: var(--marque);
}
.lg-fleche::after {
  content: ''; position: absolute; right: 0; top: 50%; margin-top: -7px;
  width: 14px; height: 14px; pointer-events: none; background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 11h11.2l-4.6-4.6L13 5l7 7-7 7-1.4-1.4 4.6-4.6H5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 11h11.2l-4.6-4.6L13 5l7 7-7 7-1.4-1.4 4.6-4.6H5z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

/* Voile HORIZONTAL de marque : opaque a gauche, clair a droite. */
.lg-voile {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--marque) 92%, transparent) 0%,
    color-mix(in srgb, var(--marque) 30%, transparent) 78%,
    color-mix(in srgb, var(--marque) 12%, transparent) 100%);
}

/* ---------------- entete ---------------- */
/* La hauteur RENDUE de la barre est nommee une fois : elle sert au retrait
   de l affiche comme a son air de compensation, les deux ne peuvent plus
   diverger. */
:root { --tete-h: 98px; }
.lg-hd {
  position: sticky; top: 0; z-index: 40; background: var(--fond);
  box-shadow: inset 0 -1px 0 0 color-mix(in srgb, var(--bordure) 90%, transparent);
}
/* F1 — le modele fait monter la scene jusqu au bord haut de la fenetre. Une
   barre opaque en tete de flux vide la premiere bande de toute matiere. Sur
   la seule page qui ouvre par une affiche, et tant que la page n a pas
   defile, la barre s efface : la scene passe DERRIERE elle. C est un fond
   pose expres, pas une collision (R10, condition 3) — le bloc porteur, lui,
   reste sous la barre grace au retrait mesure plus bas. */
body:has(main > .lg-hero:first-child) .lg-hd:not(.lg-hd--pose) {
  background: transparent;
  box-shadow: none;
  color: var(--sur-marque);
}
body:has(main > .lg-hero:first-child) .lg-hd:not(.lg-hd--pose) .lg-hd__mot:hover {
  background: color-mix(in srgb, var(--sur-marque) 18%, transparent);
}
.lg-hd--pose { box-shadow: 0 6px 24px rgba(0, 0, 0, .08), inset 0 -1px 0 0 color-mix(in srgb, var(--bordure) 90%, transparent); }
.lg-hd__rang { display: flex; align-items: center; gap: 24px; min-height: 98px; }
.lg-hd__logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; }
.lg-hd__sceau {
  width: 34px; height: 34px; border-radius: 50%; flex: none; display: block;
  background: var(--marque);
  box-shadow: inset 0 0 0 6px color-mix(in srgb, var(--fond) 100%, transparent),
              inset 0 0 0 8px var(--marque);
}
.lg-hd__nav { display: flex; align-items: center; gap: 8px; margin-left: auto; min-width: 0; }
.lg-hd__mot {
  display: inline-flex; align-items: center; gap: 7px; padding: 12px 14px;
  border-radius: 100px; font-size: 15px; font-weight: 500; cursor: pointer;
}
.lg-hd__mot:hover { background: var(--fond-2); }
.lg-hd__flanc { display: flex; align-items: center; }
.lg-hd__poussoir { display: none; }

/* Chevron bas : marqueur de volet, present sur tout lien deroulant. */
.lg-chev {
  width: 9px; height: 9px; flex: none; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px);
}

/* ---- volet : pont sous l intitule, vitrine sur le cote ---- */
.lg-volet { position: relative; }
.lg-volet__panneau {
  position: absolute; left: 50%; top: 100%; transform: translateX(calc(-50% + var(--dx, 0px)));
  padding-top: 14px; width: min(860px, 92vw); opacity: 0; visibility: hidden;
}
.lg-volet:hover > .lg-volet__panneau,
.lg-volet:focus-within > .lg-volet__panneau { opacity: 1; visibility: visible; }
.lg-volet__rang {
  display: flex; gap: 32px; padding: 28px; border-radius: 10px;
  background: var(--fond); color: var(--texte); box-shadow: 0 24px 60px rgba(0, 0, 0, .16),
    inset 0 0 0 1px color-mix(in srgb, var(--bordure) 92%, transparent);
}
.lg-volet__col { display: grid; gap: 10px; align-content: start; flex: 1 1 190px; min-width: 0; }
.lg-volet__titre {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux);
}
.lg-volet__col a, .lg-volet__col span:not(.lg-volet__titre) { font-size: 15px; font-weight: 500; }
.lg-volet__col a:hover { color: var(--marque); }
.lg-volet__vit {
  flex: 0 0 240px; min-width: 0; display: grid; gap: 8px; padding: 16px;
  border-radius: 10px; background: var(--fond-2);
}
.lg-volet__vue { height: 130px; }
.lg-volet__nom { font-size: 15px; }
.lg-volet__txt { font-size: 13px; color: var(--texte-doux); }
.lg-volet__act { font-size: 13px; font-weight: 600; color: var(--marque); }

/* ---------------- hero : plein cadre, contenu ancre en bas ---------------- */
.lg-hero { position: relative; min-height: 640px; display: flex; align-items: flex-end; padding: 120px 0 72px; }
/* Le retrait vaut la hauteur RENDUE de l entete ; l air perdu est aussitot
   rendu en padding, donc le mot ne remonte pas d un pixel sous la barre.
   Portee `main > .lg-hero:first-child` : la seule affiche qui ouvre une
   page. Ecrit sur `.lg-hero` tout court, il decalerait toutes les pages
   internes et R10 tirerait. */
main > .lg-hero:first-child {
  margin-top: calc(-1 * var(--tete-h));
  padding-top: calc(120px + var(--tete-h));
}
.lg-hero__fond { position: absolute; inset: 0; }
/* R5c — l exemption `forme: "fond"` se merite : c est l element PORTEUR de
   `data-slot` qui doit couvrir sa section sur les deux axes, pas son
   enveloppe. */
.lg-hero__fond .lg-vue {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 0; box-shadow: none;
}
.lg-hero__fond .lg-vue img { width: 100%; height: 100%; object-fit: cover; }
.lg-hero__rang { position: relative; }
.lg-hero__mot { max-width: 620px; }
.lg-hero .lg-sur {
  color: var(--sur-marque);
  background: color-mix(in srgb, var(--sur-marque) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sur-marque) 34%, transparent);
}
.lg-hero__sous { margin-top: 20px; font-size: 18px; color: color-mix(in srgb, var(--sur-marque) 82%, transparent); }
.lg-hero__act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.lg-hero__jetons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.lg-jeton {
  flex: 1 1 220px; min-width: 0; padding: 18px; border-radius: 10px;
  background: color-mix(in srgb, var(--sur-marque) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sur-marque) 26%, transparent);
  color: var(--sur-marque);
}
.lg-jeton b { display: block; font-size: 16px; }
.lg-jeton span { display: block; margin-top: 6px; font-size: 14px; opacity: .8; }
.lg-jeton .lg-points li { color: color-mix(in srgb, var(--sur-marque) 80%, transparent); }
.lg-jeton .lg-points li::before { background: var(--sur-marque); }

/* ---------------- tete de section fendue ---------------- */
.lg-tete { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-end; margin-bottom: 44px; }
.lg-tete__mot { flex: 1 1 480px; min-width: 0; }
.lg-tete__flanc { flex: 1 1 320px; min-width: 0; display: grid; gap: 18px; justify-items: start; }

/* ---------------- services empiles en bandes ---------------- */
.lg-bandes { display: grid; gap: 28px; }
.lg-bande {
  display: flex; flex-wrap: wrap; gap: 40px; align-items: center;
  padding: 24px; border-radius: 10px; background: var(--fond-2);
}
.lg-bande--mire { flex-direction: row-reverse; }
.lg-bande__vue { position: relative; flex: 1 1 460px; min-width: 0; }
.lg-bande__vue .lg-vue { height: 300px; }
.lg-bande__no {
  position: absolute; left: 18px; top: 18px; display: inline-flex; align-items: center;
  height: 34px; padding: 0 16px; border-radius: 100px; font-size: 13px; font-weight: 700;
  color: var(--sur-marque); background: var(--marque);
}
.lg-bande__mot { flex: 1 1 380px; min-width: 0; }
.lg-bande__nom { font-size: 26px; margin-bottom: 12px; }

/* ---------------- duo : intitule colle a gauche ---------------- */
.lg-duo { display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; }
.lg-duo__mot { flex: 1 1 380px; min-width: 0; }
.lg-duo__coulee { flex: 1 1 620px; min-width: 0; }
.lg-duo--large > .lg-duo__mot { flex: 1 1 340px; }
.lg-colle { position: sticky; top: 130px; }

/* Propos d intro : aucune colonne a gauche, le texte se pose seul sur
   la moitie droite du cadre et garde un maximum de 690. */
.lg-propos { width: min(690px, 100%); margin-inline-start: auto; }
.lg-propos__tete { position: relative; padding-left: 22px; margin-bottom: 26px; }
.lg-propos__filet {
  position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; border-radius: 100px;
  pointer-events: none; background: var(--marque);
}
.lg-propos__ouv { font-size: 19px; }
.lg-propos__cols { columns: 2; column-gap: 40px; }
.lg-propos__cols > .lg-txt { break-inside: avoid; max-width: 100%; }
@media (max-width: 860px) { .lg-propos__cols { columns: 1; } }

/* ---------------- blocs SEO ---------------- */
.lg-pave { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.lg-pave--mire { flex-direction: row-reverse; }
.lg-pave__vue { flex: 1 1 480px; min-width: 0; height: 420px; }
.lg-pave__mot { flex: 1 1 440px; min-width: 0; }
.lg-pave__mot .lg-h2 { margin-bottom: 18px; }
.lg-pave__mot .lg-pil { margin-top: 24px; }

/* ---------------- scene : titre pose sur la vue ---------------- */
.lg-scene { position: relative; border-radius: 10px; overflow: hidden; }
.lg-scene__vue { height: 460px; border-radius: 10px; }
.lg-scene--basse .lg-scene__vue { height: 380px; }
.lg-scene__mot { position: absolute; left: 40px; bottom: 40px; right: 40px; max-width: 620px; color: var(--sur-marque); }
.lg-scene__mot .lg-h2 { color: var(--sur-marque); }
.lg-scene__mot .lg-sur {
  color: var(--sur-marque);
  background: color-mix(in srgb, var(--sur-marque) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sur-marque) 34%, transparent);
}
.lg-scene__pied { display: flex; flex-wrap: wrap; gap: 48px; margin-top: 40px; }
.lg-scene__coulee { flex: 1 1 600px; min-width: 0; display: grid; gap: 16px; }
.lg-scene__cote { flex: 1 1 300px; min-width: 0; }
.lg-repere b { display: block; margin-bottom: 6px; }

/* ---------------- file de logos ---------------- */
.lg-file { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.lg-file__pce { flex: 1 1 150px; min-width: 0; display: flex; align-items: center; justify-content: center; }
.lg-file__pce .lg-vue { width: 100%; height: 64px; background: transparent; box-shadow: none; }
.lg-file__pce .lg-vue img { object-fit: contain; }
.lg-file__pce > span { font-weight: 600; color: var(--texte-doux); }
.lg-file--vues { margin-bottom: 36px; }
.lg-file--vues .lg-vue { flex: 1 1 220px; min-width: 0; height: 160px; }

/* ---------------- mosaique ---------------- */
.lg-mosaique { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.lg-mos__grande { flex: 1 1 420px; min-width: 0; min-height: 320px; }
.lg-mos__tuile {
  flex: 1 1 260px; min-width: 0; padding: 24px; border-radius: 10px; background: var(--fond);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bordure) 92%, transparent);
}
.lg-mos__tuile--1 { flex: 1 1 340px; }
.lg-mos__tuile--2 { flex: 1 1 300px; }
.lg-mos__tuile b { display: block; margin-bottom: 8px; font-size: 18px; }
.lg-mos__vue { height: 150px; margin-bottom: 16px; }

/* ---------------- secteurs ---------------- */
.lg-secteurs { display: grid; gap: 20px; }
.lg-secteur {
  display: flex; flex-wrap: wrap; gap: 28px; padding: 24px; border-radius: 10px;
  background: var(--fond-2);
}
.lg-secteur__vue { flex: 0 1 300px; min-width: 0; height: 200px; }
.lg-secteur__mot { flex: 1 1 420px; min-width: 0; }
.lg-secteur__nom { font-size: 22px; margin-bottom: 10px; }
.lg-etiqs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.lg-etiq {
  display: inline-flex; align-items: center; height: 32px; padding: 0 14px;
  border-radius: 100px; font-size: 13px; color: var(--marque);
  background: color-mix(in srgb, var(--marque) 10%, transparent);
}

/* ---------------- zones ---------------- */
.lg-zones { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.lg-zone {
  flex: 1 1 220px; min-width: 0; display: grid; gap: 6px; padding: 16px 20px;
  border-radius: 10px; background: var(--fond);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bordure) 92%, transparent);
}
.lg-zone:hover { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--marque) 45%, transparent); }
.lg-zone__vue { height: 110px; margin-bottom: 6px; }
.lg-zone__t, .lg-zone__note { font-size: 13px; color: var(--texte-doux); }

/* ---------------- etapes ---------------- */
.lg-etapes { flex: 1 1 620px; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.lg-etape { flex: 1 1 300px; min-width: 0; }
.lg-etape__vue { position: relative; margin-bottom: 16px; }
.lg-etape__vue .lg-vue { height: 220px; }
.lg-etape__no {
  position: absolute; right: 16px; top: 16px; display: inline-flex; align-items: center;
  justify-content: center; width: 44px; height: 44px; border-radius: 50%;
  font-weight: 700; color: var(--sur-marque); background: var(--marque);
}
.lg-etape__no--nu { position: static; margin-bottom: 14px; }
.lg-etape__nom { font-size: 19px; margin-bottom: 8px; }

/* ---------------- chiffres : vue a gauche, disque en recouvrement ---------------- */
.lg-nombres { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.lg-nombres__vue { position: relative; flex: 1 1 420px; min-width: 0; }
.lg-nombres__vue .lg-vue { height: 340px; }
.lg-nombres__pt {
  position: absolute; right: -18px; bottom: -18px; width: 120px; height: 120px;
  border-radius: 50%; pointer-events: none;
  background: color-mix(in srgb, var(--marque) 88%, transparent);
}
.lg-nombres__liste { flex: 1 1 420px; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.lg-nombre { position: relative; flex: 1 1 180px; min-width: 0; padding-bottom: 20px; }
.lg-nombre::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px;
  pointer-events: none; border-radius: 100px; background: var(--marque);
}
.lg-nombre b {
  display: block; font-family: 'Bricolage Grotesque', Inter, sans-serif;
  font-size: clamp(34px, 4vw, 52px); line-height: 1;
}
.lg-nombre span { display: block; margin-top: 8px; font-size: 14px; color: var(--texte-doux); }

/* ---------------- avis ---------------- */
.lg-avis { flex: 1 1 600px; min-width: 0; display: grid; gap: 20px; }
.lg-avi {
  position: relative; padding: 28px; border-radius: 10px; background: var(--fond);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bordure) 92%, transparent);
}
.lg-avi::before {
  content: ''; position: absolute; right: 24px; top: 24px; width: 56px; height: 56px;
  border-radius: 50%; pointer-events: none;
  background: color-mix(in srgb, var(--marque) 12%, transparent);
}
.lg-note { position: relative; font-size: 13px; font-weight: 700; color: var(--marque); }
.lg-avi__nom { position: relative; font-size: 19px; margin: 10px 0; }
.lg-avi__pied { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.lg-avi__face {
  width: 52px; height: 52px; flex: none; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.lg-avi__face--lettre { font-weight: 700; color: var(--sur-marque); background: var(--marque); }
.lg-avi__qui b { display: block; }
.lg-avi__qui span { font-size: 13px; color: var(--texte-doux); }

/* ---------------- questions ---------------- */
.lg-qs { flex: 1 1 620px; min-width: 0; display: grid; gap: 12px; }
.lg-q {
  padding: 20px 24px; border-radius: 10px; background: var(--fond-2);
}
.lg-q summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  cursor: pointer; font-weight: 600; font-size: 17px; list-style: none;
}
.lg-q summary::-webkit-details-marker { display: none; }
.lg-q[open] summary .lg-chev { transform: rotate(-135deg) translate(-3px, -3px); }
.lg-q .lg-txt { margin-top: 14px; }
.lg-encart {
  padding: 26px; border-radius: 10px; color: var(--sur-marque); background: var(--marque);
}
.lg-encart b { display: block; margin-bottom: 10px; font-size: 19px; }
.lg-encart .lg-txt { color: color-mix(in srgb, var(--sur-marque) 82%, transparent); margin-bottom: 18px; }
.lg-encart .lg-pil { color: var(--marque); background: var(--fond); }

/* ---------------- cartes ---------------- */
.lg-cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.lg-carte {
  flex: 1 1 340px; min-width: 0; display: grid; gap: 12px; align-content: start;
  padding: 16px; border-radius: 10px; background: var(--fond);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bordure) 92%, transparent);
}
.lg-carte--nue { background: var(--fond); }
.lg-carte__vue { height: 220px; }
.lg-carte__nom { font-size: 20px; }
.lg-carte__pied { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lg-carte__pied .lg-fleche { margin-top: 0; }
.lg-une { display: flex; flex-wrap: wrap; gap: 32px; margin-bottom: 28px; align-items: center; }
.lg-une__vue { flex: 1 1 520px; min-width: 0; height: 320px; }
.lg-une__mot { flex: 1 1 360px; min-width: 0; }
.lg-une__nom { font-size: 28px; margin: 10px 0 12px; }

/* ---------------- realisations : legende posee sur la vue ---------------- */
.lg-tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.lg-tuile { position: relative; flex: 1 1 340px; min-width: 0; border-radius: 10px; overflow: hidden; }
.lg-tuile__vue { height: 380px; border-radius: 10px; }
.lg-tuile::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 60%; pointer-events: none;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--marque) 0%, transparent) 0%,
    color-mix(in srgb, var(--marque) 88%, transparent) 100%);
}
.lg-tuile__mot { position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 1; color: var(--sur-marque); }
.lg-tuile__nom { font-size: 20px; }
.lg-tuile__mot .lg-meta { color: color-mix(in srgb, var(--sur-marque) 76%, transparent); }

/* ---------------- mentions, aides, materiaux, tarifs ---------------- */
.lg-mentions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lg-mention {
  flex: 1 1 260px; min-width: 0; padding: 20px; border-radius: 10px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bordure) 92%, transparent);
}
.lg-mention b { display: block; margin-bottom: 8px; }
.lg-mention__bas { margin-top: 24px; font-size: 13px; color: var(--texte-doux); }
.lg-aides { display: flex; flex-wrap: wrap; gap: 20px; }
.lg-aide {
  flex: 1 1 300px; min-width: 0; padding: 24px; border-radius: 10px; background: var(--fond-2);
}
.lg-aide__val {
  display: inline-flex; align-items: center; height: 36px; padding: 0 16px; margin-bottom: 14px;
  border-radius: 100px; font-weight: 700; color: var(--sur-marque); background: var(--marque);
}
.lg-aide__nom { font-size: 19px; margin-bottom: 8px; }
.lg-tarifs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.lg-tarif {
  flex: 1 1 320px; min-width: 0; display: grid; gap: 14px; align-content: start;
  padding: 26px; border-radius: 10px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bordure) 92%, transparent);
}
.lg-tarif__tete { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; justify-content: space-between; }
.lg-tarif__nom { font-size: 20px; }
.lg-tarif__val { font-family: 'Bricolage Grotesque', Inter, sans-serif; font-size: 26px; color: var(--marque); }
.lg-tarif__val i, .lg-prod__prix i, .lg-fiche__prix i { font-style: normal; font-size: 13px; opacity: .75; }

/* ---------------- urgence ---------------- */
.lg-urg {
  display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: space-between;
  padding: 36px; border-radius: 10px; color: var(--sur-marque); background: var(--marque);
}
.lg-urg__mot { flex: 1 1 480px; min-width: 0; }
.lg-urg__mot .lg-h2 { color: var(--sur-marque); }
.lg-urg__mot .lg-sur {
  color: var(--sur-marque);
  background: color-mix(in srgb, var(--sur-marque) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sur-marque) 34%, transparent);
}
.lg-urg__mot .lg-points li { color: color-mix(in srgb, var(--sur-marque) 82%, transparent); }
.lg-urg__mot .lg-points li::before { background: var(--sur-marque); }
.lg-urg__act { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------------- formulaire ---------------- */
.lg-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lg-champ { min-width: 0; display: grid; gap: 8px; align-content: start; }
.lg-champ--large { grid-column: 1 / -1; }
.lg-champ__mot { font-size: 13px; font-weight: 600; }
.lg-champ input, .lg-champ select, .lg-champ textarea {
  width: 100%; padding: 16px 20px; border: 0; border-radius: 10px;
  font: 400 15px/1.4 Inter, sans-serif; color: var(--texte); background: var(--fond);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bordure) 92%, transparent);
}
.lg-champ textarea { resize: vertical; min-height: 150px; }
.lg-form .lg-pil--bloc { flex: 1 1 auto; width: auto; }
.lg-form__pied { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.lg-form__pied .lg-pil--bloc { flex: 1 1 240px; }
.lg-band__act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
/* Porte creuse : le contour est une VRAIE bordure, pas une ombre interne.
   Une porte d appel sans fond ni bordure rendue n est pas un bouton — elle
   ne compte pas, et la regle 7 tire a vide. */
.lg-pil--creux {
  color: inherit; background: transparent;
  border: 2px solid color-mix(in srgb, currentColor 45%, transparent);
}
.lg-form--band .lg-champ__mot { color: var(--sur-marque); }

/* ---------------- contact ---------------- */
.lg-contact { display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; }
.lg-contact__mot { flex: 1 1 360px; min-width: 0; }
.lg-contact__form { flex: 1 1 560px; min-width: 0; display: grid; gap: 14px; }
.lg-coords { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 28px; }
.lg-coord { min-width: 0; display: grid; gap: 4px; }
.lg-coord b { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-doux); }

/* ---------------- bande d appel ---------------- */
.lg-band { position: relative; border-radius: 10px; overflow: hidden; padding: 64px 48px; }
.lg-band__fond { position: absolute; inset: 0; border-radius: 10px; }
.lg-band::after {
  content: ''; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px;
  border-radius: 50%; pointer-events: none;
  background: color-mix(in srgb, var(--sur-marque) 12%, transparent);
}
.lg-band__mot { position: relative; z-index: 1; max-width: 720px; color: var(--sur-marque); }
.lg-band__mot .lg-h2 { color: var(--sur-marque); margin-bottom: 16px; }
.lg-band__mot .lg-sur {
  color: var(--sur-marque);
  background: color-mix(in srgb, var(--sur-marque) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sur-marque) 34%, transparent);
}
.lg-band .lg-form { margin-top: 26px; }

/* ---------------- fil d ariane ---------------- */
.lg-fil { padding: 20px 0; background: var(--fond-2); }
.lg-fil ol { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.lg-fil li { display: flex; align-items: center; gap: 10px; color: var(--texte-doux); }
.lg-fil li + li::before { content: '/'; color: var(--texte-doux); }
.lg-fil a:hover { color: var(--marque); }

/* ---------------- avant / apres interactif ---------------- */
.lg-ab__img--vide {
  background: var(--fond-2);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bordure) 92%, transparent);
}
.lg-ab__lot { display: flex; flex-wrap: wrap; gap: 28px; }
.lg-ab { flex: 1 1 460px; min-width: 0; margin: 0; }
.lg-ab__cadre {
  position: relative; height: 380px; border-radius: 10px; overflow: hidden;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bordure) 92%, transparent);
}
.lg-ab__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lg-ab__img--ap { clip-path: polygon(var(--pos) 0, 100% 0, 100% 100%, var(--pos) 100%); }
.lg-ab__barre {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1px;
  pointer-events: none; background: var(--fond);
}
.lg-ab__et {
  position: absolute; bottom: 16px; z-index: 2; display: inline-flex; align-items: center;
  height: 32px; padding: 0 14px; border-radius: 100px; font-size: 12px; font-weight: 600;
  color: var(--sur-marque); background: color-mix(in srgb, var(--marque) 88%, transparent);
}
.lg-ab__et--g { left: 16px; }
.lg-ab__et--d { right: 16px; }
.lg-ab__range {
  position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent;
}
.lg-ab__range::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 380px; }
.lg-ab__range::-moz-range-thumb { width: 44px; height: 380px; border: 0; }
.lg-ab__mot { margin-top: 18px; }
.lg-ab__nom { font-size: 19px; margin-bottom: 8px; }

/* ---------------- facettes et produits ---------------- */
.lg-facettes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.lg-facette {
  display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 100px;
  font-size: 14px; font-weight: 500; color: var(--texte);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bordure) 92%, transparent);
}
.lg-facette--active { color: var(--sur-marque); background: var(--marque); box-shadow: none; }
.lg-cartes--prod { gap: 24px; }
.lg-prod {
  flex: 1 1 320px; min-width: 0; display: grid; gap: 10px; align-content: start;
}
.lg-prod__vue { position: relative; }
.lg-prod__vue .lg-vue { height: 260px; }
.lg-prod__prix {
  position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: baseline; gap: 6px;
  height: 38px; padding: 0 16px; border-radius: 100px; font-weight: 700;
  color: var(--sur-marque); background: var(--marque);
}
.lg-prod__nom { font-size: 20px; }
.lg-fiche { display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; }
.lg-fiche__vue { flex: 1 1 520px; min-width: 0; }
.lg-fiche__vue .lg-vue { height: 480px; }
.lg-fiche__mot { flex: 1 1 400px; min-width: 0; }
.lg-fiche__prix {
  margin: 18px 0; font-family: 'Bricolage Grotesque', Inter, sans-serif;
  font-size: 30px; color: var(--marque);
}
.lg-fiche__mot .lg-pil { margin-top: 24px; }
.lg-specs { display: flex; flex-wrap: wrap; gap: 0 48px; margin: 0; }
.lg-spec {
  flex: 1 1 420px; min-width: 0; display: flex; justify-content: space-between; gap: 24px;
  padding: 16px 0; box-shadow: inset 0 -1px 0 0 color-mix(in srgb, var(--bordure) 92%, transparent);
}
.lg-spec dt { color: var(--texte-doux); }
.lg-spec dd { margin: 0; font-weight: 600; text-align: right; }

/* ---------------- article et mentions ---------------- */
.lg-art__tete { max-width: 820px; margin-bottom: 32px; }
.lg-art__tete .lg-h1 { margin-bottom: 12px; }
.lg-art__vue { height: 460px; margin-bottom: 48px; }
.lg-duo--art { gap: 64px; }
.lg-somm {
  flex: 1 1 280px; min-width: 0; padding: 24px; border-radius: 10px; background: var(--fond-2);
}
.lg-somm b { display: block; margin-bottom: 12px; }
.lg-somm ul { display: grid; gap: 8px; font-size: 14px; }
.lg-somm a:hover { color: var(--marque); }
.lg-art__corps { flex: 1 1 700px; min-width: 0; max-width: 750px; }
.lg-art__h2 { font-size: 26px; margin: 32px 0 14px; }
.lg-art__fig { height: 360px; margin: 28px 0; }
.lg-legal { max-width: 820px; }
.lg-legal .lg-h1 { margin-bottom: 10px; }
.lg-legal__bloc { margin-top: 28px; }

/* ---------------- pied : bandeau debordant, file de disques ---------------- */
.lg-ft {
  position: relative; margin-top: 0; padding: 64px 0 36px; overflow: hidden;
  color: var(--sur-marque); background: var(--marque);
}
.lg-ft__file { overflow: hidden; margin-bottom: 56px; }
.lg-ft__ruban { display: flex; gap: 28px; width: max-content; animation: lg-defile 38s linear infinite; }
.lg-ft__ruban span {
  width: 168px; height: 168px; flex: none; border-radius: 50%;
  background: color-mix(in srgb, var(--sur-marque) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sur-marque) 22%, transparent);
}
@keyframes lg-defile { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .lg-ft__ruban { animation: none; } }
.lg-ft__rang { display: flex; flex-wrap: wrap; gap: 40px; }
.lg-ft__marque { flex: 1 1 320px; min-width: 0; }
.lg-ft__marque b { display: block; margin-bottom: 14px; font-size: 22px; font-family: 'Bricolage Grotesque', Inter, sans-serif; }
.lg-ft__col { flex: 1 1 190px; min-width: 0; display: grid; gap: 10px; align-content: start; font-size: 14px; }
.lg-ft__col a, .lg-ft__col span { color: color-mix(in srgb, var(--sur-marque) 82%, transparent); }
.lg-ft__col a:hover { color: var(--sur-marque); }
.lg-ft__titre {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  color: var(--sur-marque);
}
.lg-ft__bas {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
  margin-top: 48px; padding-top: 24px; font-size: 13px;
  box-shadow: inset 0 1px 0 0 color-mix(in srgb, var(--sur-marque) 20%, transparent);
  color: color-mix(in srgb, var(--sur-marque) 76%, transparent);
}
.lg-ft__legaux { display: flex; flex-wrap: wrap; gap: 18px; }

/* ---------------- adaptations ---------------- */
@media (max-width: 1024px) {
  .lg-colle { position: static; }
  .lg-zones { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg-tarifs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg-cartes, .lg-tuiles, .lg-mentions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg-scene__mot { left: 24px; right: 24px; bottom: 24px; }
}
@media (max-width: 900px) {
  .lg-sec { padding: 64px 0; }
  .lg-hd__poussoir {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 46px; height: 46px; margin-left: auto; padding: 0 12px; border: 0;
    border-radius: 100px; cursor: pointer; background: var(--fond-2);
  }
  .lg-hd__poussoir i { display: block; height: 2px; background: var(--texte); }
  .lg-hd__nav {
    position: absolute; left: 0; right: 0; top: 100%; margin: 0; display: none;
    flex-direction: column; align-items: stretch; gap: 4px; padding: 16px 24px 28px;
    background: var(--fond);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .14);
    max-height: 78vh; overflow-y: auto;
  }
  .lg-hd--ouvert .lg-hd__nav { display: flex; }
  .lg-hd__flanc { display: none; }
  .lg-hd--ouvert .lg-hd__flanc { display: flex; order: 3; width: 100%; padding: 12px 24px 20px; background: var(--fond); }
  .lg-volet__panneau {
    position: static; transform: none; width: auto; padding: 8px 0 0;
    opacity: 1; visibility: visible;
  }
  .lg-volet__rang { flex-direction: column; padding: 16px; box-shadow: none; background: var(--fond-2); }
  .lg-volet__vit { flex: 1 1 auto; }
  .lg-hero { min-height: 520px; padding: 80px 0 56px; }
  .lg-pave__vue, .lg-fiche__vue .lg-vue { height: 300px; }
  .lg-band { padding: 40px 24px; }
}
@media (max-width: 620px) {
  .lg-cadre { width: calc(100% - 32px); }
  .lg-zones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg-cartes, .lg-tuiles, .lg-mentions, .lg-etapes, .lg-nombres__liste,
  .lg-tarifs, .lg-form, .lg-coords { grid-template-columns: minmax(0, 1fr); }
  .lg-sec { padding: 48px 0; }
  .lg-bande, .lg-secteur { padding: 16px; }
  .lg-bande__vue .lg-vue, .lg-carte__vue, .lg-tuile__vue, .lg-ab__cadre { height: 240px; }
  .lg-art__vue, .lg-scene__vue, .lg-scene--basse .lg-scene__vue { height: 260px; }
  .lg-ft__ruban span { width: 110px; height: 110px; }
  .lg-band { padding: 32px 20px; }
  .lg-urg { padding: 24px; }
}

/* >>> 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-08-23 sur 3 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. */
[data-slot="hero-1"]: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="hero-1"]:not(:has(img)):not(:has(video)) > * {
  font-size: 0 !important;
}
[data-slot="lg-scene__vue"]: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="lg-scene__vue"]:not(:has(img)):not(:has(video)) > * {
  font-size: 0 !important;
}
[data-slot="lg-tuile__vue"]: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="lg-tuile__vue"]:not(:has(img)):not(:has(video)) > * {
  font-size: 0 !important;
}
/* <<< NORME COQUILLE — teinte des cadres porteurs */

/* === 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%}