/* ============================================================
   SOLVANCE — la source. dist/ n est qu une sortie, ecrasee a
   chaque rendu : on ne l edite jamais.

   Huit variables de couleur, pas une de plus, toutes posees par
   le rendu dans :root. --sur-marque est CALCULE, jamais choisi.
   Aucun hexadecimal en dur ici.

   Le releve EN LIGNE donne l ossature typographique :
     titre 80 / 52 / 32 px, graisse 600, et un interlettrage qui
     vaut -4 % de la taille de police — d ou les em negatifs.
   Les coins : 12px sur les paves, 8px sur la barre, 4px sur les
   boutons. Aucune ombre portee : le filet suffit.
   ============================================================ */

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

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; }

/* ---------- mesures ---------- */

:root {
  --large: 1300px;
  --marge: 24px;
  --coin: 12px;
  --coin-p: 8px;
  --coin-b: 4px;
  --air: clamp(64px, 7vw, 112px);
}

.ct {
  width: 100%;
  max-width: var(--large);
  margin: 0 auto;
  padding: 0 var(--marge);
}
.ct--texte { max-width: 820px; }

.se { padding: var(--air) 0; }
.se--court { padding: clamp(40px, 4vw, 64px) 0; }
.se--sombre { background: var(--texte); color: var(--fond); }
.se--marque { background: var(--marque); color: var(--sur-marque); }

/* ---------- titres ---------- */

.h1, .h2, .h3 {
  font-family: 'Onest', system-ui, sans-serif;
  font-weight: 600;
  margin: 0;
  overflow-wrap: anywhere;
}
.h1 { font-size: clamp(34px, 5.6vw, 80px); line-height: 1.04; letter-spacing: -.04em; }
.h1--page { font-size: clamp(30px, 4.4vw, 58px); }
.h2 { font-size: clamp(27px, 3.6vw, 52px); line-height: 1.1; letter-spacing: -.04em; }
.h2--moyen { font-size: clamp(25px, 2.9vw, 40px); }
.h3 { font-size: clamp(19px, 1.9vw, 26px); line-height: 1.2; letter-spacing: -.04em; }
.h2--clair, .h3--clair { color: var(--fond); }
.h1 em, .h2 em { font-style: normal; color: var(--accent); }
.se--sombre .h1 em, .se--sombre .h2 em, .ap .h2 em { color: var(--accent); }

.p { margin: 0 0 14px; color: var(--texte-doux); overflow-wrap: anywhere; }
.p:last-child { margin-bottom: 0; }
.p--chapo { font-size: clamp(15px, 1.1vw, 18px); max-width: 62ch; }
.p--clair { color: var(--fond); opacity: .82; }
.p--cit { color: var(--texte); font-size: clamp(15px, 1.2vw, 18px); }
.no { font-size: 13px; color: var(--texte-doux); margin: 12px 0 0; }
.no--clair { color: var(--fond); opacity: .6; }

/* ---------- l intitule : un carre plein, puis des capitales ---------- */

.oe {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--texte);
  margin-bottom: 18px;
}
.oe i { width: 10px; height: 10px; background: var(--accent); flex: none; }
.oe--clair { color: var(--fond); }

/* ---------- le bouton : rectangle a peine adouci, pastille a droite ---------- */

.bo {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 8px 8px 8px 18px;
  border: 1px solid var(--bordure);
  border-radius: var(--coin-b);
  background: var(--fond-2);
  color: var(--texte);
  font-weight: 500; font-size: 15px;
  cursor: pointer;
  max-width: 100%;
}
.bo__t { min-width: 0; }
.bo__p {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  border-radius: 2px;
  background: var(--marque); color: var(--sur-marque);
  font-size: 14px; line-height: 1;
}
.bo--accent { background: var(--marque); border-color: var(--marque); color: var(--sur-marque); }
.bo--accent .bo__p { background: var(--accent); color: var(--texte); }
.bo--clair { background: var(--fond); border-color: var(--fond); color: var(--texte); }
.bo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.li { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 15px; border-bottom: 1px solid var(--bordure); padding-bottom: 3px; }

/* ---------- le visuel ---------- */

.im { width: 100%; height: 100%; object-fit: cover; border-radius: var(--coin); }
.im--nu {
  display: grid; place-items: center; min-height: 160px;
  background: var(--fond-2); border: 1px dashed var(--bordure);
  border-radius: var(--coin);
}
.im--nu i { font-style: normal; font-size: 12px; color: var(--texte-doux); padding: 8px; text-align: center; overflow-wrap: anywhere; }

/* ---------- la grille : le compte de cartes vient des donnees ---------- */

/* R3 — PISTES COMPTEES, JAMAIS `flex: 1 1 base`. Une grille en flex donne a
   la derniere rangee incomplete la largeur qui reste : trois cartes puis une
   seule, et la solitaire fait 1252 la ou ses soeurs font 404. La regle 3 lit
   la fratrie et voit deux largeurs pour une meme grille. Le compte de
   colonnes se DECLARE donc, et il se redeclare a chaque palier. */
.gr { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
.gr > li, .gr > figure { min-width: 0; margin: 0; }
.gr--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gr--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gr--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) {
  .gr--3, .gr--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .gr--2, .gr--3, .gr--4 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- la barre ---------- */

.ba { position: sticky; top: 12px; z-index: 40; padding: 0 var(--marge); margin-top: 12px; }
.ba__p {
  max-width: var(--large); margin: 0 auto;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: var(--fond-2);
  border: 1px solid var(--bordure);
  border-radius: var(--coin-p);
  /* La plaque est COMPACTE : le releve du modele donne de la matiere des la
     rangee 0 (y=75), c est a dire que sa barre est deja finie a cette
     hauteur. Six pixels d air au lieu de dix suffisent a l y ramener. */
  padding: 6px 6px 6px 18px;
}
.ba__m { display: inline-flex; align-items: center; gap: 10px; font-family: 'Onest', sans-serif; font-weight: 600; font-size: 18px; letter-spacing: -.03em; min-width: 0; }
.ba__s { width: 14px; height: 14px; background: var(--marque); flex: none; }
.ba__m::after { content: ''; width: 5px; height: 5px; background: var(--accent); flex: none; }

.ba__k { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.ba__b {
  display: none; align-items: center; gap: 8px; margin-left: auto;
  padding: 8px 14px; border: 1px solid var(--bordure); border-radius: var(--coin-b);
  font-size: 14px; font-weight: 500; cursor: pointer;
}
.ba__b span { width: 16px; height: 10px; flex: none; border-top: 2px solid var(--texte); border-bottom: 2px solid var(--texte); }

.nv { margin-left: auto; min-width: 0; }
.nv__u { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
/* Le lien occupe TOUTE la hauteur de son entree : plus court, il laisse entre
   son bas et le haut du volet un vide que la souris traverse en descendant, et
   le volet se referme avant d'y arriver. */
.nv__i { position: relative; display: flex; align-items: stretch; }
.nv__l { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: var(--coin-b); font-size: 15px; }
.nv__l:hover { background: var(--fond); }
.nv__c { width: 0; height: 0; flex: none; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--texte-doux); }

.vo {
  /* `top: 100%` et non `calc(100% + 8px)` : ce decalage etait un vide que la
     souris traversait, et le volet se refermait avant d'y arriver. Le volet est
     CENTRE sous sa tete ; `width: max-content` car en position absolue la
     largeur est un shrink-to-fit calcule sur la place restante a droite de
     `left: 50%`. */
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); z-index: 5;
  display: none; align-items: flex-start; gap: 26px;
  background: var(--fond-2); border: 1px solid var(--bordure);
  border-radius: var(--coin); padding: 22px 26px;
  width: max-content; min-width: 560px; max-width: min(94vw, 900px);
}
.nv__i--v:hover .vo, .nv__i--v:focus-within .vo { display: flex; }
.vo__g { min-width: 190px; flex: 0 1 auto; }
/* La vitrine : le visuel du volet, sur le cote. `flex: 0 0` et non `0 1` — une
   base compressible la reduirait a un mot par ligne. Hauteur FIXE sur le
   visuel, sinon le cadre etire tout le volet. */
.vo__v {
  flex: 0 0 240px; display: grid; gap: 8px; align-content: start;
  /* La vitrine ouvre le volet, a gauche, separee des colonnes de liens
     par un filet : l oeil voit d abord l image, puis la liste. */
  order: -1; padding-right: 26px; border-right: 1px solid var(--bordure);
}
.vo__c { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 26px; }
.vo__vPh { min-height: 0; height: 128px; width: 100%; border-radius: var(--coin-b); overflow: hidden; }
.vo__vPh img { width: 100%; height: 100%; object-fit: cover; }
.vo__vN { font-size: 16px; line-height: 1.3; color: var(--texte); }
.vo__vX { font-size: 14px; color: var(--texte-doux); line-height: 1.5; }
.vo__vZ { font-size: 14px; font-weight: 600; color: var(--marque); justify-self: start; }
.vo__t { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux); margin-bottom: 8px; }
.vo__g li a { display: block; padding: 5px 0; font-size: 14px; }
.vo__g li a:hover { color: var(--marque); }

@media (max-width: 1000px) {
  .ba__b { display: inline-flex; }
  .ba__p .bo { display: none; }
  .nv { flex: 1 1 100%; margin-left: 0; display: none; padding-top: 6px; border-top: 1px solid var(--bordure); }
  .ba__k:checked ~ .nv { display: block; }
  .ba__k:checked ~ .bo { display: inline-flex; margin-top: 4px; }
  .nv__u { display: block; }
  .nv__l { display: flex; padding: 10px 0; }
  .nv__c { margin-left: auto; }
  .nv__i { display: block; }
  .vo { display: flex; position: static; transform: none; border: 0; background: transparent;
    padding: 0 0 10px 14px; width: auto; min-width: 0; max-width: none; flex-wrap: wrap; gap: 14px; }
  /* La vitrine est un confort d'ecran large : au doigt, elle pousserait les
     liens hors de vue. Le volet redescend a la liste seule. */
  .vo__v { display: none; }
}

/* ---------- l affiche ---------- */

/* LA SCENE D OUVERTURE. Le releve du modele (reference.json, rangee 0 pleine
   de matiere) dit que la photo court jusqu au bord haut : la scene remonte
   donc sous la barre, et la barre se pose dessus. Le mot se tient a GAUCHE,
   dans la colonne de lecture — rangee 1 l intitule, rangee 2 le titre large,
   rangee 3 le propos — et la scene s arrete avant la derniere rangee
   echantillonnee pour que la bande suivante y prenne sa place. */
.sc {
  position: relative; background: var(--texte); color: var(--fond); overflow: hidden;
  min-height: min(780px, 100svh);
  display: flex; align-items: flex-start;
}
.sc__v { position: absolute; inset: 0; }
.sc__i { border-radius: 0; height: 100%; }
.sc__f { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,.62) 46%, var(--texte) 100%); }
.sc__t {
  position: relative; width: 100%; max-width: var(--large); margin: 0 auto;
  padding: 208px var(--marge) 72px; text-align: left;
}
.sc__t .h1 { max-width: 780px; }
.sc__t .p { margin: 22px 0 0; max-width: 320px; }
.sc__b { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-start; margin-top: 30px; }

/* LE BANDEAU D ATOUTS — sorti de la scene, il reprend le sol de la page pour
   ne pas rester en verre depoli sur du blanc. Pistes COMPTEES (R3). */
.sq { background: var(--fond-2); padding: 28px 0; }
.sq__u { display: grid; gap: 12px; grid-template-columns: repeat(1, minmax(0, 1fr)); }
.sq__u--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sq__u--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sq__u--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sq__i { min-width: 0; border: 1px solid var(--bordure); border-radius: var(--coin); padding: 14px 18px; }
.sq__n { display: block; font-family: 'Onest', sans-serif; font-size: 15px; font-weight: 600; }
.sq__x { display: block; font-size: 13px; color: var(--texte-doux); }

/* LA BARRE SUR LA SCENE — quand l affiche ouvre la page, la barre ne pousse
   plus le contenu : elle se pose dessus. Sa boite ne prend aucune hauteur de
   flux, sa plaque reste dessinee et opaque. Elle reste `sticky` a top > 0,
   donc R10 ne la regarde pas (elle ne peut pas couvrir sans se voir). */
.ba:has(+ .sc) { height: 0; margin-top: 0; }

/* ---------- l offre ---------- */

.te { max-width: 720px; margin-bottom: clamp(32px, 3.4vw, 52px); }
.te .p { margin-top: 16px; }
.te .bo { margin-top: 22px; }
.te--clair .h2, .te--clair .h3 { color: var(--fond); }
.te--clair .p { color: var(--fond); opacity: .82; }

.of { position: relative; background: var(--fond-2); border: 1px solid var(--bordure); border-radius: var(--coin); padding: 18px; }
.of__n { position: absolute; top: 26px; right: 26px; z-index: 2; background: var(--accent); color: var(--texte); font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 2px; }
.of__v { height: 170px; margin-bottom: 18px; }
.of .p { margin-top: 10px; }
.of .li { margin-top: 14px; }

/* ---------- le chapeau de rubrique ---------- */

.in { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 72px); }
.in__g { flex: 1 1 320px; min-width: min(300px, 100%); }
.in__d { flex: 2 1 420px; min-width: min(300px, 100%); columns: 2 260px; column-gap: 36px; }
.in__d .p { break-inside: avoid; }

/* ---------- les blocs SEO ---------- */

.du { display: flex; flex-wrap: wrap; gap: clamp(24px, 3.6vw, 64px); align-items: center; margin-bottom: clamp(40px, 5vw, 88px); }
.du:last-child { margin-bottom: 0; }
.du--inv { flex-direction: row-reverse; }
.du__v { flex: 1 1 46%; min-width: min(300px, 100%); height: clamp(260px, 32vw, 440px); }
.du__t { flex: 1 1 46%; min-width: min(300px, 100%); }
.du__t .co { margin-top: 18px; }
.du__t .bo { margin-top: 24px; }
.du__t .h2 { margin-bottom: 16px; }

/* ---------- les coches et les etiquettes ---------- */

.co { display: grid; gap: 10px; }
.co li { display: flex; gap: 10px; font-size: 15px; }
.co__m { width: 20px; height: 20px; flex: none; display: grid; place-items: center; background: var(--accent); color: var(--texte); border-radius: 2px; font-size: 12px; }
.se--marque .co li, .se--sombre .co li, .ur .co li { color: var(--fond); }

.et { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.et li { border: 1px solid var(--bordure); border-radius: 999px; padding: 4px 12px; font-size: 12px; color: var(--texte-doux); }

/* ---------- l expertise ---------- */

.ex { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 72px); }
.ex__g { flex: 1 1 40%; min-width: min(300px, 100%); }
.ex__b { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.ex__d { flex: 1 1 48%; min-width: min(300px, 100%); }
.ex__v { height: clamp(200px, 22vw, 300px); margin-bottom: 24px; }
.ex__l li { display: flex; flex-wrap: wrap; gap: 6px 24px; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.16); }
.ex__l b { flex: 0 1 200px; min-width: 0; font-family: 'Onest', sans-serif; font-weight: 600; }
.ex__l span { flex: 1 1 240px; min-width: 0; opacity: .78; font-size: 15px; }

/* ---------- la bande qui defile ---------- */

.de { border-top: 1px solid var(--bordure); border-bottom: 1px solid var(--bordure); padding: 22px 0; overflow: hidden; }
.de__f { display: flex; gap: 0; width: max-content; animation: defile 34s linear infinite; }
.de__p { display: flex; gap: 12px; padding-right: 12px; }
.de__p li { flex: none; }
.de__p span { display: block; border: 1px solid var(--bordure); border-radius: var(--coin-p); padding: 10px 22px; font-family: 'Onest', sans-serif; font-size: 15px; color: var(--texte-doux); white-space: nowrap; }
@keyframes defile { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .de__f { animation: none; } }

/* ---------- les raisons, sur photo voilee ---------- */

.vl { position: relative; background: var(--texte); overflow: hidden; }
.vl__v { position: absolute; inset: 0; }
.vl__v .im { height: 100%; border-radius: 0; opacity: .34; }
.vl__c { position: relative; }
.ra { background: var(--fond-2); border: 1px solid var(--bordure); border-radius: var(--coin); padding: 22px; }
.ra__m { display: block; width: 26px; height: 26px; border: 3px solid var(--accent); border-radius: 2px; margin-bottom: 16px; }
.ra .co { margin-top: 14px; }

/* ---------- les segments ---------- */

/* Des LIGNES a filet, pas des cartes : le nom a gauche, le propos a droite. */
.sb { display: grid; gap: 0; margin-top: 34px; border-top: 1px solid var(--bordure); }
.sb__l { display: flex; flex-wrap: wrap; gap: 24px 40px; padding: 28px 0; border-bottom: 1px solid var(--bordure); }
.sb__g { flex: 1 1 300px; min-width: 0; }
.sb__v { height: 132px; margin-bottom: 14px; }
.sb__v .im { height: 100%; border-radius: var(--coin-p); }
.sb__e { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.sb__d { flex: 2 1 420px; min-width: 0; }
.sb__d .co { margin-top: 14px; }

/* ---------- les zones ---------- */

/* R3 — PISTES COMPTEES. La liste de zones etait en `flex: 1 1 calc(25% - 8px)` :
   six zones donnaient quatre cartes a 305px puis deux a 621px, et la fratrie
   portait deux largeurs pour une meme grille. Le compte de colonnes se
   DECLARE, et il se redeclare a chaque palier.
   T5 — LA COLONNE SE MESURE A SON CORPS. La carte rangeait titre, etiquette
   et fleche sur une SEULE ligne : a 1024 il ne restait que 100px au titre
   pour un corps de 15, soit 6.7em, et « Serrurier — Bagnolet » se cassait a
   un mot et demi par ligne. Le titre prend donc la colonne entiere,
   l etiquette passe dessous, la fleche garde sa propre piste. */
.zo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.zo li { min-width: 0; }
.zo a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; height: 100%; border: 1px solid var(--bordure); border-radius: var(--coin-p); padding: 12px 14px; background: var(--fond-2); }
.zo b { grid-column: 1; font-weight: 500; font-size: 15px; min-width: 0; overflow-wrap: anywhere; }
.zo span { grid-column: 1; font-size: 12px; color: var(--texte-doux); }
.zo i { grid-column: 2; grid-row: 1 / -1; font-style: normal; color: var(--accent); }
@media (max-width: 1000px) { .zo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .zo { grid-template-columns: minmax(0, 1fr); } }
/* La bande de photos des zones : compte pilote par les donnees. */
.zo__bd { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.zo__bd .im { flex: 1 1 30%; min-width: min(240px, 100%); height: 190px; border-radius: var(--coin-p); }

/* ---------- le parcours ---------- */

.pa { position: relative; overflow: hidden; }
.pa__o { position: absolute; top: -18vw; right: -14vw; width: 56vw; height: 56vw; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); pointer-events: none; }
.pa .ct { position: relative; }
.pa__l { display: grid; gap: clamp(28px, 3.4vw, 56px); }
.ma { display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 48px); align-items: center; }
.ma--inv { flex-direction: row-reverse; }
.ma__v { flex: 1 1 42%; min-width: min(280px, 100%); height: clamp(200px, 22vw, 300px); }
.ma__t { flex: 1 1 46%; min-width: min(280px, 100%); }
.ma__n { display: inline-block; font-family: 'Onest', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .1em; background: var(--accent); color: var(--texte); padding: 3px 9px; border-radius: 2px; margin-bottom: 14px; }
.ma__t .p { margin-top: 12px; }
.ma__t .co { margin-top: 16px; }

/* ---------- les chiffres ---------- */

.nb li { border-left: 1px solid rgba(255,255,255,.2); padding-left: 18px; }
.nb b { display: block; font-family: 'Onest', sans-serif; font-size: clamp(30px, 3.4vw, 48px); font-weight: 600; letter-spacing: -.04em; line-height: 1.1; }
.nb span { display: block; font-size: 14px; opacity: .74; margin-top: 6px; overflow-wrap: anywhere; }

/* ---------- la fiche locale ---------- */

/* R5a + R4 — L EMPLACEMENT COMMANDE, LA PHOTO OBEIT. Le cadre de la carte
   ultralocale laissait l image dans le flux : etire par sa rangee, il prenait
   la hauteur NATURELLE de la photo posee. Quatorze pages, quatorze photos,
   quinze formes pour un seul emplacement — 717x843 ici, 717x1049 la — et le
   cadre changeait de dessin entre l etat vide et l etat plein, ce que R4
   refuse. La photo passe donc en couche absolue : elle remplit le cadre sans
   jamais le dicter, et la forme redevient celle de la rangee. */
.lo { display: flex; flex-wrap: wrap; gap: clamp(24px, 3vw, 48px); align-items: stretch; }
.lo__v { position: relative; flex: 1 1 52%; min-width: min(300px, 100%); min-height: 280px; }
.lo__v .im { position: absolute; inset: 0; width: 100%; height: 100%; }
.lo__t { flex: 1 1 34%; min-width: min(280px, 100%); background: var(--fond-2); border: 1px solid var(--bordure); border-radius: var(--coin); padding: 26px; }
.ad { display: grid; gap: 4px; font-style: normal; color: var(--texte-doux); margin-top: 14px; }

/* ---------- la parole ---------- */

.pl { background: var(--fond-2); border: 1px solid var(--bordure); border-radius: var(--coin); padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.pl__n { color: var(--accent); font-size: 15px; letter-spacing: 2px; }
.pl__p { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--bordure); }
.pl__a { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--marque); color: var(--sur-marque); font-family: 'Onest', sans-serif; font-weight: 600; }
.pl__q { min-width: 0; }
.pl__q b { display: block; font-size: 15px; overflow-wrap: anywhere; }
.pl__q i { font-style: normal; font-size: 13px; color: var(--texte-doux); overflow-wrap: anywhere; }

/* ---------- les questions ---------- */

.fa { display: flex; flex-wrap: wrap; gap: clamp(24px, 3.4vw, 64px); align-items: flex-start; }
.fa__g { flex: 1 1 34%; min-width: min(280px, 100%); position: sticky; top: 96px; }
.fa__d { flex: 1 1 52%; min-width: min(300px, 100%); }
.fa__e { margin-top: 24px; background: var(--fond-2); border: 1px solid var(--bordure); border-radius: var(--coin); padding: 22px; }
.fa__e .p { margin: 10px 0 18px; }
.qu { border-bottom: 1px solid var(--bordure); padding: 4px 0; }
.qu summary { display: flex; align-items: center; gap: 16px; padding: 18px 0; cursor: pointer; font-family: 'Onest', sans-serif; font-weight: 500; font-size: clamp(16px, 1.4vw, 19px); list-style: none; min-width: 0; }
.qu summary::-webkit-details-marker { display: none; }
.qu__c { width: 22px; height: 22px; flex: none; margin-left: auto; position: relative; border: 1px solid var(--bordure); border-radius: 2px; }
.qu__c::before, .qu__c::after { content: ''; position: absolute; background: var(--texte); }
.qu__c::before { left: 5px; right: 5px; top: 50%; height: 1px; transform: translateY(-50%); }
.qu__c::after { top: 5px; bottom: 5px; left: 50%; width: 1px; transform: translateX(-50%); }
.qu[open] .qu__c::after { display: none; }
.qu[open] .qu__c { background: var(--accent); border-color: var(--accent); }
.qu > .p { padding: 0 40px 18px 0; }

@media (max-width: 900px) { .fa__g { position: static; } }

/* ---------- le maillage ---------- */

.mi { background: var(--fond-2); border: 1px solid var(--bordure); border-radius: var(--coin); overflow: hidden; }
.mi a { display: block; position: relative; height: 100%; }
.mi__v { height: 160px; }
.mi__v .im { border-radius: 0; }
.mi__t { padding: 20px; }
.mi__m { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-doux); margin-bottom: 8px; }
.mi__t .p { margin-top: 10px; }
.mi__p { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 2px; background: var(--accent); color: var(--texte); }

/* ---------- l appel a l action ---------- */

.ap { position: relative; overflow: hidden; border-radius: var(--coin); background: var(--texte); color: var(--fond); }
.ap__v { position: absolute; inset: 0; }
.ap__v .im { height: 100%; border-radius: 0; opacity: .3; }
.ap__t { position: relative; padding: clamp(36px, 5vw, 76px); max-width: 760px; }
.ap__t .p { margin-top: 16px; }
.ap__b { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
/* R3 — le formulaire de bande etait en `flex: 1 1 220px` : le dernier champ
   d une rangee incomplete avalait la place du bouton et sortait a 479 la ou
   ses jumeaux faisaient 302. Pistes COMPTEES, et le pied — soumission plus
   porte d appel — prend la largeur entiere. */
.ap__f { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 26px; align-items: end; }
.ap__f .ch { min-width: 0; }
.ap__f .ch span { color: var(--fond); opacity: .78; }
.ap__p { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
@media (max-width: 1000px) { .ap__f { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ap__f { grid-template-columns: minmax(0, 1fr); } }

/* ---------- les champs ---------- */

.ch { display: block; min-width: 0; }
.ch span { display: block; font-size: 13px; margin-bottom: 6px; color: var(--texte-doux); }
.ch input, .ch textarea {
  width: 100%; background: var(--fond); border: 1px solid var(--bordure);
  border-radius: var(--coin-b); padding: 12px 14px; color: var(--texte);
}
.ch textarea { resize: vertical; }
.ch input:focus-visible, .ch textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- le fil d Ariane ---------- */

.fi { padding: 18px 0 0; }
.fi__o { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--texte-doux); }
.fi__o li { min-width: 0; overflow-wrap: anywhere; }
.fi__o li:not(.fi__f)::after { content: '\203A'; padding-left: 8px; color: var(--bordure); }
.fi a:hover { color: var(--marque); }
.fi__f span { color: var(--texte); }

/* ---------- l avant / apres ---------- */

.cp { margin: 0; }
.cp__c { position: relative; height: clamp(240px, 30vw, 380px); border-radius: var(--coin); overflow: hidden; touch-action: pan-y; }
.cp__f { position: absolute; inset: 0; }
.cp__f .im { height: 100%; border-radius: 0; }
.cp__f--av { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.cp__e { position: absolute; bottom: 16px; z-index: 3; background: var(--texte); color: var(--fond); font-size: 12px; padding: 4px 10px; border-radius: 2px; }
.cp__e--g { left: 16px; }
.cp__e--d { right: 16px; }
.cp__b { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; background: var(--accent); z-index: 2; pointer-events: none; }
.cp__b::after { content: ''; position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--accent); }
.ab__i {
  position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%;
  margin: 0; padding: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: ew-resize;
}
.ab__i::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100%; background: transparent; cursor: ew-resize; }
.ab__i::-moz-range-thumb { width: 44px; height: 100%; border: 0; background: transparent; cursor: ew-resize; }
.ab__i::-moz-range-track { background: transparent; }
.ab__i:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cp__l { padding: 18px 2px 0; }
.cp__l .p { margin-top: 8px; }

/* ---------- les chantiers : une BANDE chacun, fiche a gauche, rail a droite ---------- */

/* Un chiffre : le libelle en petites capitales dessus, le nombre et son
   unite colles dessous. Aucun cadre — jamais de chiffre en carte. */
.ch { margin: 0; }
.ch__l { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-doux); }
.ch__v { display: block; font-family: 'Onest', sans-serif; font-size: clamp(24px, 2.4vw, 34px); font-weight: 600; letter-spacing: -.04em; line-height: 1.1; margin-top: 4px; }
.ch__v i { font-style: normal; font-size: .5em; font-weight: 500; color: var(--texte-doux); margin-left: 4px; }
.chs { display: flex; flex-wrap: wrap; gap: 22px 34px; margin: 24px 0; }
.chs .ch { flex: 1 1 calc(33.333% - 24px); min-width: min(140px, 100%); }

.pj { display: flex; flex-wrap: wrap; gap: clamp(24px, 3vw, 52px); padding: 34px 0; border-top: 1px solid var(--bordure); align-items: flex-start; }
.pj__f { flex: 1 1 380px; min-width: 0; }
.pj__m { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-doux); margin-bottom: 8px; }
.pj__f .p { margin-top: 12px; }
.pj__r { flex: 1 1 380px; min-width: 0; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.pj__v { flex: 0 0 100%; scroll-snap-align: start; height: clamp(240px, 30vw, 400px); min-width: 0; }
.pj__v .im { height: 100%; border-radius: var(--coin-p); }

/* ---------- les tuiles ---------- */

.tu li { border: 1px solid var(--bordure); border-radius: var(--coin-p); padding: 18px; background: var(--fond-2); }
.tu b { display: block; font-family: 'Onest', sans-serif; font-size: 16px; overflow-wrap: anywhere; }
.tu span { display: block; font-size: 13px; color: var(--texte-doux); margin-top: 6px; }

/* ---------- les aides et les materiaux ---------- */

/* Les aides flottent sur le fond : montant, intitule, propos. Pas de carte. */
.ad { display: flex; flex-wrap: wrap; gap: 34px clamp(24px, 3vw, 48px); margin-top: 34px; }
.ad__u { flex: 1 1 calc(33.333% - 32px); min-width: min(250px, 100%); }
.ad__u .h3 { margin-top: 10px; }
.ad__u .p { margin: 10px 0 0; }
.ad__u .co { margin-top: 14px; }

/* Les materiaux defilent en rail debordant, le nom SOUS la vue. */
.rl { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding: 34px var(--marge) 8px; margin: 0 auto; max-width: var(--large); }
.rl__u { flex: 0 0 min(250px, 72vw); scroll-snap-align: start; min-width: 0; }
.rl__v { height: clamp(300px, 30vw, 414px); }
.rl__v .im { height: 100%; border-radius: var(--coin-p); }
.rl__n { display: block; font-family: 'Onest', sans-serif; font-size: 17px; font-weight: 600; margin-top: 14px; overflow-wrap: anywhere; }
.rl__d { display: block; font-size: 14px; color: var(--texte-doux); margin-top: 6px; }

/* ---------- les formules ---------- */

/* Les formules en LIGNES a filet : nom a gauche, contenu au milieu, montant
   a droite. Aucune formule n est mise en avant sur les autres. */
.fm { margin-top: 34px; border-top: 1px solid var(--bordure); }
.fm__l { display: flex; flex-wrap: wrap; gap: 22px clamp(24px, 3vw, 48px); padding: 30px 0; border-bottom: 1px solid var(--bordure); align-items: flex-start; }
.fm__n { flex: 1 1 240px; min-width: 0; }
.fm__n .bo { margin-top: 16px; }
.fm__c { flex: 2 1 360px; min-width: 0; }
.fm__c .co { margin-top: 14px; }
.fm__p { flex: 0 1 200px; min-width: 0; text-align: right; }
.fm__p .ch__v { text-align: right; }
.pr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 0; }
.pr i { font-style: normal; font-size: 13px; color: var(--texte-doux); flex: 0 0 auto; }
.pr b { font-family: 'Onest', sans-serif; font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; letter-spacing: -.04em; }
.pr span { font-size: 13px; color: var(--texte-doux); }
.pr--grand b { font-size: clamp(30px, 3.4vw, 44px); }

/* ---------- les facettes ---------- */

/* Des jetons de petites capitales poses en ligne, sans pastille ni cadre. */
.fa2 .oe { margin-top: 10px; }
.jts { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--bordure); }
.jt { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux); min-width: 0; overflow-wrap: anywhere; }
.jt:hover { color: var(--texte); }
.jt--ici { color: var(--marque); text-decoration: underline; text-underline-offset: 6px; }

/* ---------- les references ---------- */

/* Une BANDE par reference : image pleine hauteur d un cote, mots de
   l autre, le cote s inversant d une bande a la suivante. */
.bds { margin-top: 34px; }
.bd { display: flex; flex-wrap: wrap; gap: clamp(24px, 3vw, 56px); align-items: center; padding: 30px 0; border-bottom: 1px solid var(--bordure); }
.bd--envers { flex-direction: row-reverse; }
.bd__v { flex: 1 1 380px; min-width: 0; height: clamp(280px, 34vw, 480px); }
.bd__v .im { height: 100%; border-radius: var(--coin-p); }
.bd__t { flex: 1 1 380px; min-width: 0; }
.bd__t .p { margin-top: 12px; }
.bd__t .co { margin-top: 18px; }
.bd__t .ch { margin-top: 20px; }
.bd__t .bo { margin-top: 22px; }

.fp { display: flex; flex-wrap: wrap; gap: clamp(24px, 3.4vw, 60px); align-items: flex-start; }
.fp__v { flex: 1 1 46%; min-width: min(300px, 100%); height: clamp(280px, 34vw, 460px); }
.fp__t { flex: 1 1 44%; min-width: min(300px, 100%); }
.fp__t .pr { margin: 22px 0; }
.fp__t .co { margin-bottom: 24px; }

.sp { margin: 22px 0 0; }
.sp__l { display: flex; flex-wrap: wrap; gap: 6px 24px; padding: 14px 0; border-top: 1px solid var(--bordure); }
.sp dt { flex: 0 1 240px; min-width: 0; color: var(--texte-doux); font-size: 14px; }
.sp dd { flex: 1 1 240px; min-width: 0; margin: 0; font-weight: 500; overflow-wrap: anywhere; }

/* ---------- le rappel ---------- */

.ur { display: flex; flex-wrap: wrap; gap: clamp(22px, 3vw, 48px); align-items: center; background: var(--texte); color: var(--fond); border-radius: var(--coin); border-left: 5px solid var(--accent); padding: clamp(26px, 3.4vw, 48px); }
.ur__g { flex: 1 1 52%; min-width: min(280px, 100%); }
.ur__g .p { margin: 14px 0 18px; }
.ur__b { display: flex; flex-wrap: wrap; gap: 12px; }
.ur__d { flex: 1 1 30%; min-width: min(240px, 100%); display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.tl { font-family: 'Onest', sans-serif; font-size: clamp(24px, 2.6vw, 34px); font-weight: 600; letter-spacing: -.04em; overflow-wrap: anywhere; }

/* ---------- le contact ---------- */

.co__b { display: flex; flex-wrap: wrap; gap: clamp(26px, 3.6vw, 64px); align-items: flex-start; }
.co__g { flex: 1 1 42%; min-width: min(290px, 100%); }
.co__f { flex: 1 1 44%; min-width: min(290px, 100%); display: grid; gap: 14px; background: var(--fond-2); border: 1px solid var(--bordure); border-radius: var(--coin); padding: 26px; }
.co__p { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.co__f .bo { justify-self: start; }
.cd { display: grid; gap: 16px; margin-top: 24px; }
.cd li { border-top: 1px solid var(--bordure); padding-top: 12px; }
.cd b { display: block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-doux); margin-bottom: 4px; }
.cd span { display: block; overflow-wrap: anywhere; }

/* ---------- le journal ---------- */

.un { display: flex; flex-wrap: wrap; gap: clamp(20px, 2.6vw, 44px); align-items: center; background: var(--fond-2); border: 1px solid var(--bordure); border-radius: var(--coin); padding: 18px; margin-bottom: 24px; }
.un__v { flex: 1 1 46%; min-width: min(280px, 100%); height: clamp(220px, 26vw, 320px); }
.un__t { flex: 1 1 44%; min-width: min(280px, 100%); }
.un__t .p { margin: 14px 0 18px; }
.un__t .li i { font-style: normal; }
.bl { margin-top: 0; }

.bi { background: var(--fond-2); border: 1px solid var(--bordure); border-radius: var(--coin); overflow: hidden; }
.bi a { display: block; height: 100%; padding-bottom: 20px; }
.bi__v { height: 180px; margin-bottom: 16px; }
.bi__v .im { border-radius: 0; }
.bi__m, .bi .h3, .bi .p { padding: 0 20px; }
.bi__m { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-doux); margin-bottom: 8px; }
.bi .p { margin-top: 10px; }

/* La tete en vis-a-vis, la vue demarrant plus haut que le titre ; puis le
   corps redescend en colonne unique CENTREE et resserree. Pas de sommaire
   lateral : les reperes se replient en une ligne sous le chapo. */
.ar__tete { display: flex; flex-wrap: wrap; gap: clamp(24px, 3.4vw, 56px); align-items: flex-start; }
.ar__g { flex: 1 1 420px; min-width: 0; padding-top: clamp(0px, 3vw, 50px); }
.ar__g .p--chapo { margin-top: 16px; }
.ar__v { flex: 1 1 420px; min-width: 0; height: clamp(260px, 34vw, 525px); }
.ar__v .im { height: 100%; border-radius: var(--coin-p); }
.rp { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--bordure); }
.rp b { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux); }
.rp a { font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.rp a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ar__corps { max-width: 880px; margin-top: clamp(34px, 4vw, 62px); }
.ar__corps .h2, .ar__corps .h3 { margin: 30px 0 12px; }
.ar__corps .co { margin: 18px 0; }
/* Les images du corps sont plus etroites que le texte. */
.ar__f { width: min(814px, 92%); margin: 26px auto; height: clamp(220px, 28vw, 420px); }
.ar__f .im { height: 100%; border-radius: var(--coin-p); }
.en { border-left: 3px solid var(--accent); background: var(--fond-2); border-radius: var(--coin-p); padding: 20px; margin: 22px 0; }
.en .p { margin-top: 8px; }

.lg { margin-top: 30px; }
.lg .h3 { margin-bottom: 10px; }

/* ---------- le pied ---------- */

.pi { background: var(--texte); color: var(--fond); padding: clamp(48px, 5vw, 84px) 0 32px; margin-top: var(--air); }
.pi__h { display: flex; flex-wrap: wrap; gap: clamp(24px, 3.4vw, 56px); padding-bottom: 34px; border-bottom: 1px solid rgba(255,255,255,.16); }
.pi__m { flex: 1 1 320px; min-width: min(280px, 100%); }
.pi__s { display: inline-block; width: 16px; height: 16px; background: var(--accent); margin-bottom: 12px; }
.pi__m b { display: block; font-family: 'Onest', sans-serif; font-size: 22px; letter-spacing: -.03em; margin-bottom: 10px; }
.pi__i { flex: 1 1 340px; min-width: min(280px, 100%); display: flex; flex-wrap: wrap; gap: 24px; }
.pi__f { flex: 1 1 260px; min-width: min(240px, 100%); display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.pi__f .ch { flex: 1 1 180px; min-width: min(170px, 100%); }
.pi__f .ch span { color: var(--fond); opacity: .74; }
.pi__f .ch input { background: transparent; border-color: rgba(255,255,255,.28); color: var(--fond); }
.pi__n { flex: 1 1 200px; min-width: min(190px, 100%); }
.pi__n b { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; opacity: .7; margin-bottom: 8px; }
.pi__n li { font-size: 14px; opacity: .86; padding: 3px 0; overflow-wrap: anywhere; }

.pi__g { display: flex; flex-wrap: wrap; gap: 24px; padding: 32px 0; }
.pi__c { flex: 1 1 200px; min-width: min(180px, 100%); }
.pi__c b { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; opacity: .7; margin-bottom: 12px; }
.pi__c li a { display: block; padding: 4px 0; font-size: 14px; opacity: .86; overflow-wrap: anywhere; }
.pi__c li a:hover { opacity: 1; color: var(--accent); }

.pi__t { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 26px; }
.pi__t li { border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 5px 14px; font-size: 12px; opacity: .8; }

.pi__b { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.16); }
.pi__b .no { margin: 0; min-width: 0; }
.pi__l { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; opacity: .8; }

/* ================= SIGNATURES DE FORME =================
   Traits releves EN LIGNE sur oma-solvance.framer.website, portes ici en CSS
   pur. Documentation lisible : solvance/signatures.md */

/* SIGNATURE — la COURBURE MINUSCULE ET UNIQUE (12px x183, 8px x51, 4px x16,
   2px x11). La reference courbe a peine : l arete reste lisible partout, et
   l echelle descend jusqu au 2px plutot que de monter. */
.ra__m, .qu__c, .fi__o { border-radius: 2px; }
.jt, .sp__l, .pa__o { border-radius: 4px; }

/* SIGNATURE — le DISQUE PLEIN comme seule rondeur franche (100% x18,
   50% x12) : ce qui porte un pictogramme ou un portrait est totalement rond,
   tout le reste reste presque carre. */
.oe i, .pi__i, .ma__n { border-radius: 100%; }
.co__m, .cd, .no { border-radius: 50%; }

/* SIGNATURE — le VOILE A ARRET HAUT (`transparent 66% -> plein 91%`, x2 ;
   `transparent 0% -> plein 57.6%` x1) : la photo ne s assombrit que dans son
   dernier tiers, jamais des le milieu. */
.sc__v::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 66%,
    color-mix(in srgb, var(--texte) 96%, transparent) 91%);
}
.vo__v::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--texte) 30%, transparent) 30%,
    color-mix(in srgb, var(--texte) 96%, transparent) 80%);
}

/* SIGNATURE — deux ombres opposees : le HALO tres diffus
   (`.02 0 4px 50px 4px`, x6) et l ombre RENTRANTE a etalement negatif fort
   (`.2 0 4px 24px -20px`, x3), qui ne depasse jamais la piece. */
.ra, .pl, .fm__c { box-shadow: 0 4px 50px 4px color-mix(in srgb, var(--texte) 2%, transparent); }
.ba, .of__v, .pj__v { box-shadow: 0 4px 24px -20px color-mix(in srgb, var(--texte) 20%, transparent); }

/* SIGNATURE — le CONTOUR INTERNE net d un pixel (x2), en regles distinctes. */
.ra { position: relative; }
.ra::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--texte) 8%, transparent);
}
.pl { position: relative; }
.pl::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--texte) 7%, transparent);
}

/* SIGNATURE — la file s efface aux DEUX bouts a 6 et 94 pour cent (x2). */
.de {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.rl__u {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.vo__v { position: relative; }

/* NORME COQUILLE R5c — la scene d ouverture est un FOND : son cadre porteur
   reste `position: absolute; inset: 0`. Cette regle vient APRES la ligne de
   signature qui remettait `.sc__v` en `relative` : laissee la, elle sortait la
   photo du fond, la posait dans le flux et repoussait le propos a 1009px, hors
   de la premiere fenetre (F1 : matiere 40%). */
.sc__v { position: absolute; inset: 0; }

/* >>> 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 12 page(s), 1440 et 390 px). Leur etat vide prend
   le sol de leur section, assombri d un cran, pour que cette encre reste
   lisible sans plaquer une dalle etrangere a la palette ; tous les autres
   cadres gardent le clair par defaut. Ne pas editer a la main : remesurer.

   Un cadre porteur SE TAIT. Sa legende est centree ; de l encre repose
   deja dessus, par definition — l ecrire, c est la poser en travers du
   titre. C est la collision qu on voyait sur le hero pleine fenetre de
   template-14 : « EMPLACEMENT VISUEL — ... » ecrit sur le paragraphe.
   Le libelle reste porte en aria-label, il n est pas perdu. */
[data-slot="cta-band-1"]:not(:has(img)):not(:has(video)) {
  --cadre-vide-fond: #040404;
  --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="cta-band-1"]:not(:has(img)):not(:has(video)) > * {
  font-size: 0 !important;
}
[data-slot="sc__i"]:not(:has(img)):not(:has(video)) {
  --cadre-vide-fond: #010101;
  --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="sc__i"]:not(:has(img)):not(:has(video)) > * {
  font-size: 0 !important;
}
/* <<< NORME COQUILLE — teinte des cadres porteurs */


/* === CONTRAT GRILLE (factory, chantier 20/08, #1/#2) — services taille égale + avant/après 3-col === */
.gr--3 > * { flex-grow: 0 !important; }
.gr--2 > * { flex: 0 1 calc(33.333% - 20px) !important; min-width: min(240px, 100%) !important; }

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