/* ============================================================
   FOMIC — feuille SOURCE. dist/ n'est qu'une sortie, ecrasee a
   chaque rendu : on n'y touche jamais.

   Huit variables de couleur, aucune autre, et pas un seul hex en
   dur hors des ombres et voiles (rgba de noir pur, qui ne sont pas
   des couleurs de marque).

   Le releve EN LIGNE (https://fomic.framer.website/) donne :
   contenu 1320px, page a 24px de respiration, rayons 20/24/16/100,
   titres 72 et 56px a graisse 500, texte 18px, intitules en
   capitales. Inter Display n'est pas distribuee par Google Fonts :
   la coquille prend Inter, avec le meme dessin, et resserre
   l'interlettrage des titres pour retrouver la densite du modele.
   ============================================================ */

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

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

body {
  margin: 0;
  padding-top: 120px;                 /* la pilule flotte dans cette marge */
  background: var(--fond);
  color: var(--texte);
  font: 400 18px/1.6 Inter, system-ui, sans-serif;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* ---------- socle typographique ---------- */

.t1 {
  margin: 0;
  font-size: clamp(34px, 6.4vw, 72px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -1.6px;
  color: #FFFFFF;
}
.t1--sombre { color: var(--texte); }
.t1 em { font-style: normal; color: var(--accent); }
.t1--sombre em { color:var(--encre-marque,var(--marque)); }

.t2 {
  margin: 0;
  font-size: clamp(28px, 4.2vw, 56px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -1.12px;
}
.t2--clair { color:var(--sur-bande,var(--sur-marque)); }
.t2 em { font-style: normal; color:var(--encre-marque,var(--marque)); }
.t2--clair em { color:var(--sur-bande,var(--sur-marque)); opacity: .82; }

.t3 {
  margin: 0;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.4px;
}
.t3--clair { color: #FFFFFF; }

.tx { margin: 0; color: var(--texte-doux); }
.tx--clair { color: rgba(255, 255, 255, .88); }
.tx--large { font-size: 20px; }
.bic__t .tx--clair,
.urg .tx--clair { color:var(--sur-bande,var(--sur-marque)); opacity: .9; }

.note { margin: 0; font-size: 14px; color: var(--texte-doux); }

/* L'intitule en capitales : present sur chaque section du modele. */
.oeil {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:var(--encre-marque,var(--marque));
}
.oeil--clair { color: #FFFFFF; opacity: .78; }

.lien { font-weight: 500; color:var(--encre-marque,var(--marque)); text-decoration: none; border-bottom: 1px solid currentColor; }
.lien--clair { color: #FFFFFF; }

/* ---------- le bouton a libelle glissant ---------- */
/* Le libelle est ecrit deux fois ; la fenetre n'en montre qu'un et le
   survol fait monter le second. La pastille flechee est incrustee a
   droite, dans le creux de 4px du bouton. */
.bt {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 4px 4px 4px 20px;
  border: 1px solid var(--bordure);
  border-radius: 16px;
  background: var(--fond);
  color: var(--texte);
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.bt__f { display: block; height: 22px; overflow: hidden; }
.bt__l { display: block; height: 22px; line-height: 22px; transition: transform .28s ease; }
.bt:hover .bt__l, .bt:focus-visible .bt__l { transform: translateY(-22px); }
.bt__r {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background:var(--marque);--sur-bande:var(--sur-marque);
  color:var(--sur-bande,var(--sur-marque));
  font-size: 18px;
}
.bt--marque { background:var(--marque);--sur-bande:var(--sur-marque); border-color:var(--encre-marque,var(--marque)); color:var(--sur-bande,var(--sur-marque)); }
.bt--marque .bt__r { background: var(--fond); color: var(--texte); }
.bt--clair { background: #FFFFFF; border-color: #FFFFFF; color: #101010; }
.bt--clair .bt__r { background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque)); }

/* ---------- la pilule flottante ---------- */

.bar { position: fixed; inset: 24px 0 auto; z-index: 40; padding: 0 24px; }
.bar__p {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  padding: 8px 8px 8px 24px;
  border: 1px solid var(--bordure);
  border-radius: 100px;
  background: var(--fond);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .08);
}
.bar__m { font-size: 20px; font-weight: 700; letter-spacing: -.5px; text-decoration: none; }
.bar .bt { min-height: 48px; padding: 4px 4px 4px 16px; border-radius: 100px; margin-left: auto; }
.bar .bt__r { width: 40px; height: 40px; border-radius: 100px; }

.men { min-width: 0; }
.men__u { display: flex; align-items: center; gap: 22px; margin: 0; padding: 0; list-style: none; }
.men__i { position: relative; }
.men__l {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.men__l:hover { color:var(--encre-marque,var(--marque)); }
/* Le chevron dit qu'un volet se deploie : il est sur CHAQUE entree a volet. */
.men__c {
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.volet {
  position: absolute;
  top: 100%;
  left: -16px;
  z-index: 5;
  display: none;
  gap: 8px 22px;
  /* Un volet de version ordinateur prend de la place : la liste seule
     ecrasait les libelles sur deux lignes. `width: max-content` car en
     position absolue la largeur est un shrink-to-fit calcule sur la place
     restante a droite du point d'ancrage. */
  width: max-content;
  min-width: 560px;
  max-width: min(94vw, 900px);
  align-items: flex-start;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--bordure);
  border-radius: 20px;
  background: var(--fond);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .12);
}
.men__i--v:hover .volet, .men__i--v:focus-within .volet { display: flex; }
/* Chaque colonne garde de quoi porter un libelle entier : sans plancher,
   deux groupes se partagent 290px et les intitules se cassent en trois. */
.volet { flex-wrap: wrap; }
.volet__g { flex: 0 1 auto; min-width: 190px; }
/* 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. */
.volet__v { flex: 0 0 240px; display: grid; gap: 8px; align-content: start; padding: 4px 12px 8px; }
.volet__vPh { min-height: 0; height: 128px; width: 100%; border-radius: 14px; overflow: hidden; }
.volet__vPh img { width: 100%; height: 100%; object-fit: cover; }
.volet__vN { font-size: 16px; line-height: 1.3; color: var(--texte); }
.volet__vX { font-size: 14px; color: var(--texte-doux); line-height: 1.5; }
.volet .volet__vZ { display: inline; padding: 0; font-size: 14px; font-weight: 600; color:var(--encre-marque,var(--marque)); justify-self: start; }
.volet .volet__vZ:hover { background: none; }
.volet__t {
  display: block;
  padding: 4px 12px 6px;
  color: var(--texte-doux);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.volet ul { margin: 0; padding: 0; list-style: none; }
.volet a { display: block; padding: 9px 12px; border-radius: 12px; font-size: 15px; text-decoration: none; }
.volet a:hover { background: var(--fond-2); color:var(--encre-marque,var(--marque)); }

/* ---------- gabarit ---------- */

.sec { padding: 96px 0; }
.sec--serre { padding: 64px 0; }
.in { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 24px; }
.in--texte { max-width: 880px; }

.tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 48px; }
.tete__g { flex: 1 1 420px; min-width: 0; display: grid; gap: 14px; }
.tete__d { flex: 0 1 420px; min-width: 0; display: grid; gap: 20px; justify-items: flex-start; }

.colonnes { columns: 2; column-gap: 40px; margin-top: 20px; }
.colonnes .tx { margin-bottom: 18px; break-inside: avoid; }

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

.aff { padding: 0 24px; margin-top: -120px; }   /* elle remonte sous la pilule */
.fil + .aff { margin-top: 0; }
.aff__c {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;      /* le propos est ancre EN BAS */
  min-height: min(900px, calc(100svh - 24px));
  padding: 180px 48px 40px;
  border-radius: 24px;
  overflow: hidden;
  background:var(--texte);--sur-bande:var(--sur-texte,var(--fond));
}
.aff__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.aff__o { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.72) 100%); }
.aff__t {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 20px 40px;
}
.aff__w { display: grid; gap: 16px; min-width: 0; }
.aff__d {
  display: grid;
  gap: 20px;
  min-width: 0;
  align-self: stretch;              /* le flanc epouse la hauteur du titre */
  align-content: space-between;     /* le propos en tete, les portes au pied */
}
.aff__b { display: flex; flex-wrap: wrap; gap: 12px; }
/* Le bandeau d atouts se pose SOUS la scene : la scene garde sa fenetre
   entiere, le propos reste ancre tout en bas du cadre. */
.aff__a {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.aff__a li {
  display: grid;
  gap: 2px;
  flex: 0 1 auto;
  min-width: 0;
  padding: 12px 20px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .14);
  color: #FFFFFF;
  font-size: 14px;
}
.aff__a li { background: rgba(17, 17, 17, .06); color: var(--texte); }
.aff__a b { font-weight: 500; }
.aff__a span { opacity: .78; }

/* ---------- les rails a accroche ---------- */

.rail {
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0 max(24px, calc((100% - 1320px) / 2));
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.rail > li { flex: 0 0 clamp(268px, 40vw, 548px); min-width: 0; scroll-snap-align: start; }

.carte {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 480px;
  padding: 32px;
  border-radius: 20px;
  overflow: hidden;
  background:var(--texte);--sur-bande:var(--sur-texte,var(--fond));
}
.carte__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.carte__o { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 40%, rgba(0,0,0,.78) 100%); }
.carte__t { position: relative; display: grid; gap: 12px; }

.rail--clair > li {
  padding: 32px;
  border: 1px solid var(--bordure);
  border-radius: 20px;
  background: var(--fond);
}

/* ---------- les panneaux a visuel debordant ---------- */
/* C'est la signature du modele : le panneau est clair et arrondi, la
   photo sort du cadre d'un cran. Elle ne rentre jamais dedans. */

.blocs { display: grid; gap: 32px; }
.pan {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
  padding: 56px;
  border-radius: 20px;
  background: var(--fond-2);
  overflow: hidden;
}
.pan--inv .pan__t { order: 2; }
.pan--inv .pan__v { order: 1; }
.pan__t { display: grid; gap: 18px; justify-items: flex-start; min-width: 0; }
.pan__v { position: relative; min-width: 0; }
.pan__v .vue {
  width: calc(100% + 56px);
  max-width: none;
  height: 420px;
  object-fit: cover;
  border-radius: 16px;
  margin-right: -56px;              /* le debordement */
}
.pan--inv .pan__v .vue { margin: 0 0 0 -56px; }
.pan--fiche .pan__v .vue { height: 520px; }

/* ---------- listes, puces, jetons ---------- */

.puces { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.puces li { position: relative; padding-left: 26px; color: var(--texte-doux); }
.puces li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 10px; height: 10px;
  border-radius: 100px;
  background:var(--marque);--sur-bande:var(--sur-marque);
}
.puces--clair li { color:var(--sur-bande,var(--sur-marque)); opacity: .92; }
.puces--clair li::before { background: var(--sur-marque); }

.jetons { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.jetons li {
  padding: 7px 14px;
  border: 1px solid var(--bordure);
  border-radius: 100px;
  background: var(--fond);
  font-size: 14px;
  color: var(--texte-doux);
}

.listes { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.listes li { display: grid; gap: 4px; padding-left: 20px; border-left: 2px solid var(--marque); }
.listes b { font-weight: 500; }
.listes span { color: var(--texte-doux); font-size: 16px; }

/* ---------- le ruban defilant ---------- */

.ruban { padding: 40px 0; border-top: 1px solid var(--bordure); border-bottom: 1px solid var(--bordure); }
.ruban__f { display: flex; gap: 56px; overflow: hidden; }
.ruban__p {
  display: flex;
  flex: 0 0 auto;
  gap: 56px;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: defile 38s linear infinite;
}
.ruban__p li { font-size: 20px; font-weight: 500; letter-spacing: -.3px; color: var(--texte-doux); white-space: nowrap; }
@keyframes defile { to { transform: translateX(calc(-100% - 56px)); } }
@media (prefers-reduced-motion: reduce) { .ruban__p { animation: none; } }

/* ---------- grilles ---------- */
/* NORME COQUILLE, R3 — LA GRILLE SE COMPTE.
   Un `flex: 1 1 base` laisse la derniere ligne s etirer : trois cartes sur
   deux rangees donnent 408px puis 1272px, et la serie perd son alignement.
   Les pistes sont donc COMPTEES a chaque palier, et `minmax(0, 1fr)` garde
   a chaque piste le droit de retrecir sous son contenu. */

.gr { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.gr > li, .gr > figure { min-width: 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)); }

.seg, .aide, .mat, .ref { display: grid; gap: 14px; align-content: start; padding: 24px; border: 1px solid var(--bordure); border-radius: 20px; background: var(--fond); }
.seg__v, .mat__v, .ref__v { position: relative; border-radius: 16px; overflow: hidden; }
.seg__v .vue, .mat__v .vue, .ref__v .vue { width: 100%; height: 240px; object-fit: cover; }
.seg__p {
  position: absolute;
  left: 14px; top: 14px;
  padding: 7px 14px;
  border-radius: 100px;
  background:var(--marque);--sur-bande:var(--sur-marque);
  color:var(--sur-bande,var(--sur-marque));
  font-size: 13px;
  font-weight: 500;
}

.comm { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.comm > li { min-width: 0; }
.comm a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  border: 1px solid var(--bordure);
  border-radius: 16px;
  background: var(--fond);
  font-weight: 500;
  text-decoration: none;
}
.comm a:hover { border-color:var(--encre-marque,var(--marque)); color:var(--encre-marque,var(--marque)); }
.comm span { font-size: 13px; color: var(--texte-doux); }

/* ---------- l'escalier du parcours ---------- */

.marches { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.marche {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 28px;
  align-items: start;
  padding: 32px 0;
  border-top: 1px solid var(--bordure);
}
.marche:last-child { border-bottom: 1px solid var(--bordure); }
.marche__n { font-size: 40px; font-weight: 500; line-height: 1; color:var(--encre-marque,var(--marque)); letter-spacing: -1.5px; }
.marche > div { display: grid; gap: 10px; min-width: 0; }

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

.nombres > li { display: grid; gap: 6px; padding: 28px; border-radius: 20px; background: var(--fond-2); }
.nombres b { font-size: clamp(30px, 4vw, 46px); font-weight: 500; line-height: 1; letter-spacing: -1.2px; }
.nombres span { font-size: 15px; color: var(--texte-doux); }

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

.fiche { display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: stretch; }
.fiche__v { border-radius: 20px; overflow: hidden; min-width: 0; }
.fiche__v .vue { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.fiche__t { display: grid; gap: 16px; align-content: center; min-width: 0; padding: 40px; border-radius: 20px; background: var(--fond-2); }
.adr { display: grid; gap: 4px; font-style: normal; color: var(--texte-doux); }

/* ---------- temoignages ---------- */

.mot { display: grid; gap: 16px; align-content: start; }
.mot__n { color:var(--encre-marque,var(--marque)); letter-spacing: 3px; }
.mot__p { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 8px; }
.mot__a {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 100px;
  background:var(--marque);--sur-bande:var(--sur-marque);
  color:var(--sur-bande,var(--sur-marque));
  font-weight: 500;
}
.mot__p span { display: grid; min-width: 0; }
.mot__p b { font-weight: 500; }
.mot__p i { font-style: normal; font-size: 14px; color: var(--texte-doux); }

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

.fq { display: grid; grid-template-columns: 1fr .52fr; gap: 32px; align-items: start; }
.fq__l { display: grid; gap: 12px; min-width: 0; }
.qr { padding: 22px 24px; border: 1px solid var(--bordure); border-radius: 20px; background: var(--fond); }
.qr summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 500;
  list-style: none;
}
.qr summary::-webkit-details-marker { display: none; }
.qr__c {
  flex: 0 0 auto;
  width: 10px; height: 10px;
  border-right: 2px solid var(--marque);
  border-bottom: 2px solid var(--marque);
  transform: translateY(-3px) rotate(45deg);
}
.qr[open] .qr__c { transform: translateY(2px) rotate(-135deg); }
.qr .tx { margin-top: 14px; }
.fq__a { display: grid; gap: 16px; justify-items: flex-start; padding: 32px; border-radius: 20px; background: var(--fond-2); min-width: 0; }
.fq__v { width: 100%; border-radius: 16px; overflow: hidden; margin-top: -64px; }
.fq__v .vue { width: 100%; height: 260px; object-fit: cover; }

/* ---------- maillage, billets ---------- */

.lien__c a, .billet a { display: grid; gap: 12px; text-decoration: none; }
.lien__v, .billet__v { border-radius: 20px; overflow: hidden; }
.lien__v .vue, .billet__v .vue { width: 100%; height: 240px; object-fit: cover; }
.lien__c a:hover .t3, .billet a:hover .t3 { color:var(--encre-marque,var(--marque)); }

/* ---------- la bande bicolore, bord a bord ---------- */

.bic { display: grid; grid-template-columns: 1fr 1fr; }
.bic__v { min-width: 0; }
.bic__v .vue { width: 100%; height: 100%; min-height: 380px; object-fit: cover; }
.bic__t { display: grid; gap: 20px; align-content: center; justify-items: flex-start; min-width: 0; padding: 80px 64px; background:var(--marque);--sur-bande:var(--sur-marque); }
.bic__f { display: grid; gap: 14px; width: 100%; max-width: 460px; }

.ch { display: grid; gap: 6px; font-size: 14px; }
.ch span { font-weight: 500; }
.bic__t .ch span { color:var(--sur-bande,var(--sur-marque)); }
.ch input, .ch textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--bordure);
  border-radius: 12px;
  background: var(--fond);
  color: var(--texte);
  font: inherit;
  font-size: 16px;
}

/* ---------- fil d'Ariane ---------- */

.fil { padding: 20px 0 0; }
.fil ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--texte-doux); }
.fil li { display: flex; gap: 8px; }
.fil a { text-decoration: none; }
.fil a:hover { color:var(--encre-marque,var(--marque)); }
.fil [aria-current] { color: var(--texte); }

/* ---------- avant / apres ---------- */
/* Les deux photos sont superposees ; --pos decoupe celle du haut.
   Un seul curseur, en surimpression, pilote la decoupe. */

.ab { display: grid; gap: 16px; margin: 0; }
.ab__c { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--fond-2); }
.ab__f { position: absolute; inset: 0; }
.ab__f .vue { width: 100%; height: 100%; object-fit: cover; }
.ab__f--av { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ab__b {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos);
  width: 3px;
  margin-left: -1.5px;
  background: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
}
.ab__b::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 100px;
  background: #FFFFFF;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}
.ab__e {
  position: absolute;
  bottom: 16px;
  padding: 7px 14px;
  border-radius: 100px;
  background: rgba(0, 0, 0, .58);
  color: #FFFFFF;
  font-size: 13px;
}
.ab__e--g { left: 16px; }
.ab__e--d { right: 16px; }
.ab__i {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: ew-resize;
}
.ab__i::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.ab__i::-moz-range-track { height: 100%; background: transparent; }
.ab__i::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 44px; border-radius: 100px; background: transparent; }
.ab__i::-moz-range-thumb { width: 44px; height: 44px; border: 0; border-radius: 100px; background: transparent; }
.ab__i:focus-visible { outline: 3px solid var(--marque); outline-offset: 3px; }
.ab figcaption { display: grid; gap: 10px; }

/* ---------- realisations, labels ---------- */

.chant { display: grid; gap: 12px; align-content: start; }
.chant__v { border-radius: 20px; overflow: hidden; }
.chant__v .vue { width: 100%; height: 300px; object-fit: cover; }

.labels > li { display: grid; gap: 6px; padding: 24px; border-radius: 20px; background: var(--fond-2); }
.labels b { font-weight: 500; }
.labels span { font-size: 15px; color: var(--texte-doux); }

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

.offres { display: flex; flex-wrap: wrap; gap: 24px; }
.offre {
  flex: 1 1 calc((100% - 48px) / 3);
  min-width: min(100%, 280px);
  display: grid;
  gap: 16px;
  align-content: start;
  justify-items: flex-start;
  padding: 32px;
  border: 1px solid var(--bordure);
  border-radius: 20px;
  background: var(--fond);
}
.offre--une { flex: 1 1 100%; background: var(--fond-2); border-color: transparent; }
.prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0; }
.prix i { font-style: normal; font-size: 14px; color: var(--texte-doux); }
.prix b { font-size: 32px; font-weight: 500; letter-spacing: -1px; }
.prix span { font-size: 15px; color: var(--texte-doux); }
.prix--grand b { font-size: 44px; }
.offres + .note { margin-top: 20px; }

/* ---------- facettes, caracteristiques ---------- */

.fac { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.fac__l, .fac__c { display: inline-block; padding: 11px 20px; border-radius: 100px; font-size: 15px; font-weight: 500; text-decoration: none; }
.fac__l { border: 1px solid var(--bordure); color: var(--texte-doux); }
.fac__l:hover { border-color:var(--encre-marque,var(--marque)); color:var(--encre-marque,var(--marque)); }
.fac__c { background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque)); }

.spec { margin: 24px 0 0; }
.spec__l { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--bordure); }
.spec dt { font-weight: 500; min-width: 0; }
.spec dd { margin: 0; color: var(--texte-doux); min-width: 0; }

/* ---------- urgence ---------- */

.urg { display: grid; grid-template-columns: 1.4fr .6fr; gap: 40px; align-items: center; padding: 56px; border-radius: 20px; background:var(--marque);--sur-bande:var(--sur-marque); }
.urg > div { display: grid; gap: 16px; justify-items: flex-start; min-width: 0; }
.urg__d { justify-items: flex-start; align-content: center; }
.tel { font-size: clamp(24px, 3vw, 34px); font-weight: 500; letter-spacing: -1px; color:var(--sur-bande,var(--sur-marque)); text-decoration: none; }

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

.ct { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.ct__g { display: grid; gap: 20px; min-width: 0; }
.ct__f { display: grid; gap: 16px; justify-items: stretch; min-width: 0; padding: 40px; border-radius: 20px; background: var(--fond-2); }
.ct__f .bt { justify-self: flex-start; }
.coord { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.coord li { display: grid; gap: 3px; }
.coord b { font-weight: 500; }
.coord span { color: var(--texte-doux); }

/* ---------- article, mentions ---------- */

.art { display: grid; gap: 32px; max-width: 980px; }
.art__h { display: grid; gap: 14px; }
.art__v { border-radius: 20px; overflow: hidden; }
.art__v .vue { width: 100%; height: clamp(220px, 40vw, 460px); object-fit: cover; }
.art__c { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: start; }
/* Sans sommaire, la colonne de 260px resterait vide et le texte se
   retrouverait dans la gouttiere : une seule colonne, pleine largeur. */
.art__c--seul { grid-template-columns: 1fr; }
.som { position: sticky; top: 120px; display: grid; gap: 10px; padding: 24px; border-radius: 20px; background: var(--fond-2); font-size: 15px; }
.som ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.som a { color: var(--texte-doux); text-decoration: none; }
.som a:hover { color:var(--encre-marque,var(--marque)); }
.art__t { display: grid; gap: 18px; min-width: 0; }
.encart { display: grid; gap: 10px; padding: 24px; border-left: 3px solid var(--marque); border-radius: 0 16px 16px 0; background: var(--fond-2); }
.lg { display: grid; gap: 12px; margin-top: 32px; }

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

.pied { padding: 0 0 40px; }
.pied__p { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; padding: 56px; border-radius: 20px; background: var(--fond-2); }
.pied__h { display: grid; gap: 14px; align-content: start; min-width: 0; }
.pied__m { font-size: 24px; font-weight: 700; letter-spacing: -.6px; }
.pied__g { display: flex; flex-wrap: wrap; gap: 32px; min-width: 0; }
.pied__c, .pied__n { flex: 1 1 180px; min-width: 0; display: grid; gap: 12px; align-content: start; }
.pied__c b, .pied__n b { font-weight: 500; }
.pied__c ul, .pied__n ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; font-size: 15px; color: var(--texte-doux); }
.pied__c a { text-decoration: none; }
.pied__c a:hover { color:var(--encre-marque,var(--marque)); }
.pied__b { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 28px; }
.pied__l { display: flex; flex-wrap: wrap; gap: 20px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.pied__l a { color: var(--texte-doux); text-decoration: none; }
.pied__l a:hover { color:var(--encre-marque,var(--marque)); }

/* ---------- l'aplat de remplacement ---------- */

.vue--vide {
  display: grid;
  place-items: center;
  min-height: 200px;
  padding: 16px;
  background: var(--fond-2);
  color: var(--texte-doux);
  font-size: 13px;
  text-align: center;
}
.vue--vide i { font-style: normal; }

/* ---------- appoints : les pieces montees par la coquille ---------- */
.aff__b { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.aff__b > * { min-width: 0; }
.actes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 30px; }
.actes > * { min-width: 0; }
.bt--nu { background: transparent; color: var(--texte); border: 1px solid var(--bordure); }
.bt--surClair { color: var(--fond); border-color: rgba(255, 255, 255, .38); }
.aff__a span { display: block; }
.banniere { margin: 0 auto 42px; max-width: 980px; }
.banniere .vue { width: 100%; border-radius: 22px; aspect-ratio: 16 / 7; object-fit: cover; }
.marche__v { margin: 14px 0 6px; }
.marche__v .vue { width: 100%; border-radius: 14px; aspect-ratio: 8 / 5; object-fit: cover; }
.vue--puce { width: 24px; height: 24px; flex: none; border-radius: 999px; object-fit: cover; margin-right: 8px; vertical-align: middle; }
.vue--puce i { font-size: 0; }
.comm a { display: flex; align-items: center; min-width: 0; }
.mention { margin-top: 26px; font-size: 13px; color: var(--texte-doux); }

/* ============================================================
   ADAPTATIONS. Le modele tient de 320 a 1920 : la pilule perd sa
   navigation en ligne, les panneaux se remettent en colonne et le
   visuel debordant reprend sa place dans le cadre.
   ============================================================ */

@media (max-width: 1100px) {
  .sec { padding: 72px 0; }
  .gr--3, .gr--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .comm { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Deux colonnes au pied de l affiche demandent de la place : sous 1100px
     le propos repasse sous le titre, sinon la colonne devient un couloir. */
  .aff__t { grid-template-columns: minmax(0, 1fr); }
  .aff__d { align-self: auto; align-content: start; }
  .pan { grid-template-columns: 1fr; gap: 32px; padding: 40px; }
  .pan--inv .pan__t, .pan--inv .pan__v { order: 0; }
  .pan__v .vue, .pan--inv .pan__v .vue { width: calc(100% + 80px); margin: 0 -40px; height: 320px; border-radius: 12px; }
  .fq { grid-template-columns: 1fr; }
  .fq__v { margin-top: 0; }
  .fiche, .ct, .urg, .bic, .pied__p { grid-template-columns: 1fr; }
  .urg, .pied__p { padding: 40px; }
  .bic__t { padding: 56px 32px; }
  .art__c { grid-template-columns: 1fr; }
  .som { position: static; }
  .colonnes { columns: 1; }
}

@media (max-width: 900px) {
  /* La pilule ne garde que la marque et le contact ; la navigation
     redescend en flux, deja depliee : rien a ouvrir pour l'atteindre. */
  body { padding-top: 0; }
  .bar { position: static; inset: auto; padding: 16px 24px 0; }
  .bar__p { flex-wrap: wrap; padding: 16px; border-radius: 20px; box-shadow: none; }
  .men { flex: 1 1 100%; order: 3; }
  .men__u { flex-wrap: wrap; gap: 6px 18px; }
  .men__c { display: none; }
  /* La vitrine est un confort d'ecran large : au doigt, elle pousserait les
     liens hors de vue. Le volet redescend a la liste seule. */
  .volet__v { display: none; }
  .volet {
    position: static;
    display: block;
    width: auto;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0 0 0 14px;
    border: 0;
    border-left: 1px solid var(--bordure);
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .volet a { padding: 5px 0; font-size: 14px; color: var(--texte-doux); }
  .men__i { width: 100%; }
  .men__i--v { display: grid; gap: 4px; }
  .aff { margin-top: 0; }
  .aff__c { padding: 40px 28px; min-height: 520px; }
  .marche { grid-template-columns: 1fr; gap: 12px; }
  .rail > li { flex: 0 0 min(84vw, 420px); }
}

@media (max-width: 620px) {
  body { font-size: 17px; }
  .gr--2, .gr--3, .gr--4 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .comm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec { padding: 56px 0; }
  .sec--serre { padding: 40px 0; }
  .in, .aff, .bar { padding-left: 16px; padding-right: 16px; }
  .rail { padding-left: 16px; padding-right: 16px; }
  .aff__c { padding: 32px 20px; min-height: 460px; border-radius: 20px; }
  .pan { padding: 28px 20px; }
  .pan__v .vue, .pan--inv .pan__v .vue { width: calc(100% + 40px); margin: 0 -20px; height: 240px; }
  .urg, .pied__p, .ct__f, .fq__a, .fiche__t { padding: 28px 20px; }
  .bic__t { padding: 40px 20px; }
  .rail--clair > li, .offre, .seg, .aide, .mat, .ref, .qr { padding: 20px; }
  .tete { margin-bottom: 32px; }
  .bt { font-size: 15px; }
}

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

/* SIGNATURE — l ECHELLE DE RAYONS COMPLETE (20px x60, 16px x54, 8px x54,
   12px x25, 5px x9, 24px x6, 32px x4). Le modele ne courbe pas au hasard :
   chaque rang de piece a son rayon, et la piece imbriquee courbe moins que
   celle qui la porte. */
.seg, .aide, .mat, .ref, .labels > li, .chant__v, .art__v, .fiche__v { border-radius: 20px; }
.carte, .offre, .fac__c, .qr__c { border-radius: 16px; }
.jetons li, .spec__l, .puces li { border-radius: 8px; }
.bt, .in, .ch { border-radius: 12px; }

/* SIGNATURE — la PILULE et le DISQUE, jamais un rayon moyen (100px x19,
   10000px x4, 100% x13, 999px x1). Ce qui etiquette est file, ce qui compte
   est un disque plein. */
.labels b, .marche__n, .fq__l { border-radius: 10000px; }
.oeil, .men__i, .mot__a { border-radius: 100%; }

/* SIGNATURE — le MODELE EST PLAT : un SEUL degrade sur toute la reference
   (`181deg, rgba(0,0,0,.2) 25% -> rgba(0,0,0,.82) 85%`), et AUCUNE ombre
   portee. Le voile unique est reserve a la banniere de tete. */
.banniere { position: relative; }
.banniere::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: 22px;
  background: linear-gradient(
    181deg,
    color-mix(in srgb, var(--texte) 20%, transparent) 25%,
    color-mix(in srgb, var(--texte) 82%, transparent) 85%);
}

/* SIGNATURE — le CONTOUR NET tient lieu d ombre (`0 0 0 1px inset` x2 et un
   lisere clair `0 0 1px 1px` x1). Quatre regles distinctes, jamais groupees :
   chaque rang de piece a son intensite. */
.seg { position: relative; }
.seg::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) 10%, transparent);
}
.carte { position: relative; }
.carte::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);
}
.fiche__v { position: relative; }
.fiche__v::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);
}
.chant__v { position: relative; }
.chant__v::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  box-shadow: 0 0 1px 1px color-mix(in srgb, var(--bordure) 90%, transparent);
}

/* SIGNATURE — la vue se LEVE par le bas (masque unique `transparent 65% ->
   plein`, aucun clip-path sur toute la reference). */
.aff__v {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 100%);
}
.bic__v .vue {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 100%);
}


/* MOBILE — debordement mesure le 7 septembre 2026 (gate-debordement rendu honnete :
   un overflow-x sur le body ne compte plus comme un rognage, largeurs 360/390/430). */
/* zonesAutour : chaque carte est une ligne flex (puce, nom, departement) ; a deux
   colonnes sur un telephone, le departement sortait de la carte et de la fenetre
   (« Seine-Saint-Denis » a 421px pour 390). La ligne se plie, le departement dessous. */
@media (max-width: 640px) {
  .comm a { flex-wrap: wrap; row-gap: 4px; }
  .comm a > span:last-child { flex: 1 0 100%; }
}


/* MOBILE — menu en tiroir (7 septembre 2026). Angelo : « une coquille doit etre adaptee a tout
   type d appareil ». La matrice d aout posait sous 900px un menu A PLAT et toujours visible : le
   premier ecran d un telephone etait la navigation, l affiche arrivait a 900px. Le menu passe
   en tiroir commande par une case a cocher (label[for], reconnu et clique par gate-nav-mobile),
   la paire d appels reste dans la barre. */
.bar__int { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.bar__cle { display: none; }
@media (max-width: 900px) {
  .bar__cle { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; order: 2;
    width: 42px; height: 38px; padding: 0 11px; box-sizing: border-box; border: 1px solid var(--bordure); border-radius: 10px; cursor: pointer; color: var(--texte); }
  .bar__cle i { display: block; height: 2px; background: currentColor; border-radius: 2px; }
  .bar__p > .bt { order: 1; margin-left: auto; }
  .men { display: none; }
  .bar__int:checked ~ .men { display: block; }
}
@media (max-width: 480px) {
  /* marque, appel et tiroir sur UNE ligne : la fleche de l appel disparait, l appel se serre */
  .bar__p { gap: 10px; padding: 12px; }
  .bar__m { font-size: 18px; }
  .bar__p > .bt { padding: 9px 12px; font-size: 14px; }
  .bar__p > .bt .bt__r { display: none; }
}

/* >>> 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-24 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="carte__v"]:not(:has(img)):not(:has(video)) {
  --cadre-vide-fond: #080808;
  --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="carte__v"]:not(:has(img)):not(:has(video)) > * {
  font-size: 0 !important;
}
/* aff__v ajoute a la main : le heros pleine fenetre couvre 93-94% de la
   fenetre (seuil R4b, fond de fenetre) mais son encre reelle (h1/oeil/tx en
   blanc, ancree en bas de .aff__c via justify-content:flex-end) ne couvre
   jamais 50% de la SURFACE du cadre lui-meme (seuil RECOUVREMENT_MIN de
   teinter-cadres.mjs) : l outil ne le detecte pas et ne le reecrira pas tout
   seul. Meme aplat que carte__v par construction : .aff__c comme .carte
   posent `background: var(--texte)` sous un data-slot plein cadre, avec un
   degrade sombre (.aff__o / .carte__o) qui ne noircit franchement qu en bas.
   Sans ce sol sombre, l etat vide peint la case en gris clair (#e6e9ec, le
   defaut generique) et les lignes hautes d un h1 qui enjambe — surtout a
   1024px, ou le libelle enjambe plus — retombent sous 4.5:1. Si le hero
   change de degrade ou de fond, remesurer et reporter ici a la main : une
   relance de teinter-cadres.mjs sur fomic n ecrit que ce qu il detecte et
   effacerait cette entree. */
[data-slot="aff__v"]:not(:has(img)):not(:has(video)) {
  --cadre-vide-fond: #080808;
  --cadre-vide-trame: rgba(255, 255, 255, .05);
  --cadre-vide-encre: rgba(255, 255, 255, .82);
  --cadre-vide-filet: rgba(255, 255, 255, .10);
}
/* <<< NORME COQUILLE — teinte des cadres porteurs */

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