/* ============================================================
   CARDEALER — feuille SOURCE de la coquille. dist/ n'est qu'une copie
   ecrasee a chaque rendu : ne jamais l'editer.

   8 jetons de couleur, aucun autre. Aucun hex en dur ici, sauf le noir
   et le blanc des voiles poses sur photo (une ombre n'est pas une
   couleur de marque).

   Le geste de la reference : un fond gris tres clair, des cartes
   presque blanches, un rayon de 16px partout, une seule graisse de
   titre tres serree, et une PASTILLE carree arrondie qui porte la
   fleche au bout de chaque bouton.
   ============================================================ */

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

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 500 16px/1.6 'Space Grotesk', 'Inter', system-ui, sans-serif;
  overflow-x: hidden;
}

img { display: block; width: 100%; height: 100%; object-fit: cover; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.03em; line-height: 1.06; }
h1 { font-size: clamp(34px, 6vw, 56px); }
h2 { font-size: clamp(28px, 4.6vw, 48px); line-height: 1.1; }

/* La balise dit le plan du document, la taille dit la mise en page. Quand une
   page n ouvre sur aucun titre de premier rang, le moteur promeut le premier
   titre de sa section de tete : il change de balise, il ne doit pas changer de
   corps. Sans cette regle, un titre de section double de taille et vient
   recouvrir l etiquette posee au-dessus de lui. */
h1[data-rang="2"] { font-size: clamp(28px, 4.6vw, 48px); }
h3 { font-size: clamp(18px, 2.2vw, 22px); letter-spacing: -.02em; }
h4 { font-size: 16px; letter-spacing: -.01em; }
p { margin: 0; }

/* ---------- pieces communes ---------- */
.wrap { width: 100%; max-width: 1424px; margin: 0 auto; padding: 0 24px; }

.section { padding: 88px 0; }
.section--court { padding: 56px 0; }
.section--doux { background: var(--fond-2); }
.section--sombre { background: var(--marque); color: var(--sur-marque); }
.section--sombre .body,
.section--sombre .eyebrow { color: var(--sur-marque); opacity: .78; }

.eyebrow {
  margin: 0 0 14px;
  font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--texte-doux);
}
.eyebrow--clair { color: #FFFFFF; opacity: .82; }

.body { color: var(--texte-doux); font-size: 16px; }
.body--clair { color: #FFFFFF; opacity: .9; max-width: 46ch; }
.body--large { font-size: clamp(17px, 2vw, 20px); max-width: 68ch; margin: 22px 0 32px; }
.body--note { margin-top: 22px; font-size: 14px; }

.menu { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-doux); }

.souligne { color: var(--texte-doux); }
.section--sombre .souligne { color: var(--sur-marque); }

.puces { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.puces li { position: relative; padding-left: 20px; color: var(--texte-doux); font-size: 15px; }
.puces li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 8px; height: 8px; border-radius: 3px; background: var(--marque);
}
.section--sombre .puces li::before { background: var(--accent); }
.section--sombre .puces li { color: var(--sur-marque); opacity: .8; }

.pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.pill {
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--bordure);
  background: var(--fond); font-size: 12px; color: var(--texte-doux);
}

/* La vue est une figure : elle ne porte aucune marge propre, la mise en
   page de la section decide seule de sa place. */
.vue {
  margin: 0;
  position: relative; overflow: hidden; border-radius: 16px;
  background: var(--fond-2); aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
  color: var(--texte-doux); font-size: 13px; text-align: center; padding: 8px;
}
.vue--grand { aspect-ratio: 5 / 4; }
.vue--bande { aspect-ratio: 21 / 8; margin-top: 32px; }

/* ---------- le bouton natif : capsule + pastille a fleche ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 16px;
  padding: 4px 4px 4px 20px; border-radius: 16px; border: 0;
  background: var(--marque); color: var(--sur-marque);
  font: 500 15px/1 'Space Grotesk', system-ui, sans-serif; cursor: pointer;
  max-width: 100%;
}
.btn__t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn__p {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center; font-size: 17px;
  background: var(--fond); color: var(--texte);
}
.btn--clair { background: var(--fond); color: var(--texte); }
.btn--clair .btn__p { background: var(--marque); color: var(--sur-marque); }
.btn--nu { background: transparent; color: var(--texte); padding-left: 0; margin-top: 20px; }
.btn--nu .btn__p { background: var(--fond-2); border: 1px solid var(--bordure); color: var(--texte); }

/* La porte de secours de la regle 7 : CREUSE. Un filet et une pastille, pas
   d aplat — elle accompagne l appel principal, elle ne lui dispute pas le
   regard. Le filet est indispensable : une capsule sans fond NI bordure ne se
   lit pas comme un bouton, et une porte qui ne se lit pas comme un bouton ne
   tient pas la paire. Elle emprunte l encre courante, ce qui la rend lisible
   aussi bien sur le corps de page que sur une scene sombre. */
.btn--creux {
  background: transparent; color: var(--texte);
  border: 1px solid var(--bordure); padding-left: 20px;
}
.btn--creux .btn__p { background: var(--fond-2); border: 1px solid var(--bordure); color: var(--texte); }
/* Le meme creux, pose sur un visuel sombre : l encre passe au clair et le
   filet avec elle. */
.btn--clair-creux { color: #FFFFFF; border-color: rgba(255, 255, 255, .55); }
.btn--clair-creux .btn__p { background: transparent; border-color: rgba(255, 255, 255, .55); color: #FFFFFF; }

/* Les deux portes d un point de conversion vivent dans un MEME contenant :
   c est le voisinage immediat qui fait la paire, pas la proximite a l ecran. */
.bandeau__actes, .form__pied {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
}
.form__pied { margin-top: 4px; }

/* ---------- en-tetes de section ---------- */
.tetec { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: flex-end; justify-content: space-between; margin-bottom: 44px; }
.tetec__g { flex: 1 1 460px; min-width: 0; }
.tetec__d { flex: 0 1 360px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }

.tete1 { max-width: 720px; margin-bottom: 40px; }
.tete1 .body { margin-top: 16px; }

/* ---------- header ---------- */
.header {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 14px 24px; background: var(--fond);
}
.header__nom { font-weight: 700; letter-spacing: .18em; text-transform: uppercase; font-size: 15px; }
.header__nav { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.header__cta { flex: 0 0 auto; margin-left: auto; }

.plink {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 15px; border-radius: 999px; background: var(--fond-2);
  border: 1px solid var(--bordure); font-size: 14px; white-space: nowrap;
}
.plink--ici { background: var(--marque); color: var(--sur-marque); border-color: var(--marque); }
.drop__chev { font-size: 10px; color: var(--texte-doux); }

/* La tete occupe TOUTE la hauteur de son entree : plus courte, elle 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. */
.drop { position: relative; display: inline-flex; align-items: stretch; }
.drop__tete { cursor: pointer; display: inline-flex; align-items: center; align-self: stretch; }
.drop__pan {
  /* `top: 100%` et non `calc(100% + 2px)` : le decalage sous le lien est le
     PADDING du panneau, jamais une marge — sinon la souris traverse un vide. */
  /* `--dx` : le rattrapage horizontal pose par app.js quand un volet centre
     sur son lien sortirait de la fenetre. Zero tant que rien ne depasse. */
  position: absolute; top: 100%; left: 50%; transform: translateX(calc(-50% + var(--dx, 0px)));
  padding-top: 10px; opacity: 0; visibility: hidden; z-index: 40;
}
.drop:hover .drop__pan, .drop:focus-within .drop__pan { opacity: 1; visibility: visible; }
.drop__gr {
  display: flex; align-items: flex-start; gap: 28px; padding: 22px 26px; border-radius: 16px;
  background: var(--fond); border: 1px solid var(--bordure);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .1);
  /* `width: max-content` : en position absolue, la largeur est un shrink-to-fit
     calcule sur la place restante A DROITE de `left: 50%`. Sans lui, le volet
     se replie sur un mot par ligne des que l'entree est du cote droit. */
  width: max-content; min-width: 560px; max-width: min(94vw, 900px);
}
.drop__col { display: flex; flex-direction: column; gap: 8px; min-width: 170px; flex: 0 0 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. */
.drop__vit { flex: 0 0 240px; display: grid; gap: 8px; align-content: start; }
.drop__vitPh { min-height: 0; height: 128px; width: 100%; border-radius: 12px; overflow: hidden; }
.drop__vitPh img { width: 100%; height: 100%; object-fit: cover; }
.drop__vitN { font-size: 16px; line-height: 1.3; color: var(--texte); }
.drop__vitX { font-size: 14px; color: var(--texte-doux); line-height: 1.5; }
.drop__vitZ { font-size: 14px; font-weight: 600; color: var(--marque); text-decoration: none; justify-self: start; }
.drop__titre { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-doux); }
.drop__lien { font-size: 14px; white-space: nowrap; }
.drop__lien:hover { color: var(--marque); }

/* ---------- hero : la bande en gouttiere ---------- */
.hero { padding: 0 8px 8px; }
.hero__scene {
  position: relative; overflow: hidden; border-radius: 16px;
  min-height: 620px; display: flex; flex-direction: column; justify-content: space-between;
  padding: 40px; color: #FFFFFF;
}
.hero__scene > .vue { position: absolute; inset: 0; border-radius: 0; aspect-ratio: auto; }

/* OUVERTURE — la reference ouvre sur une scene qui occupe la FENETRE ENTIERE :
   l entete s y pose PAR-DESSUS, en clair, sans fond. Elle n est ni fixe ni
   collante (R10 ne la vise donc pas), elle est simplement sortie du flux quand
   — et seulement quand — la scene la suit immediatement. Sur toute autre page,
   l entete reste dans le flux et le fil d ariane garde sa place. */
.header:has(+ .hero) {
  position: absolute; top: 0; left: 0; right: 0; z-index: 30; background: transparent;
}
.header:has(+ .hero) .header__nom { color: #FFFFFF; }
.header:has(+ .hero) .plink {
  background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .34); color: #FFFFFF;
}
.header:has(+ .hero) .drop__chev { color: rgba(255, 255, 255, .8); }
.header + .hero { padding-top: 8px; }
/* Le retrait de la scene vaut la hauteur RENDUE de l entete plus son air ;
   la hauteur, elle, se prend sur la fenetre moins la gouttiere. */
.header + .hero .hero__scene { min-height: calc(100vh - 16px); padding-top: 120px; }

.hero__voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,.25) 45%, rgba(0,0,0,.7)); }
.hero__haut, .hero__bas { position: relative; z-index: 2; }
.hero__haut h1 { color: #FFFFFF; max-width: 16ch; }
/* `sous` est une PHRASE, jamais un sur-titre : en capitales letterspacees
   elle devient un pave illisible. Casse normale, posee sous le titre. */
.hero__sous { margin-top: 16px; max-width: 60ch; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.86); }
.hero__bas { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-end; justify-content: space-between; }
.hero__mot { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
/* La base des pastilles tient le titre le plus long sur deux lignes au
   maximum : sous 190px, un intitule de trois mots se casse mot par mot. */
.hero__flot { flex: 0 1 460px; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
.flot {
  min-width: 0; display: flex; gap: 12px; align-items: flex-start;
  padding: 16px; border-radius: 16px; background: var(--fond); color: var(--texte);
}
.flot__p { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--marque); color: var(--sur-marque); font-size: 10px; }
.flot__c { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.flot__c b { font-size: 16px; line-height: 1.3; letter-spacing: -.01em; }
.flot__c span { font-size: 12px; color: var(--texte-doux); }

/* ---------- mosaique de services ---------- */
.mos { display: flex; flex-wrap: wrap; gap: 40px; }
.mos__g { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 24px; align-self: flex-start; position: sticky; top: 24px; }
.mos__pied { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-top: auto; }
.mos__d { flex: 2 1 520px; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }

.tuile {
  position: relative; min-width: 0; overflow: hidden; border-radius: 16px;
  aspect-ratio: 4 / 3; display: block;
}
.tuile--haute { aspect-ratio: 3 / 4; }
.tuile--courte { aspect-ratio: 1 / 1; }
.tuile > .vue { position: absolute; inset: 0; border-radius: 0; aspect-ratio: auto; }
.tuile__voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.72)); }
.tuile__n {
  position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2;
  display: flex; flex-direction: column; gap: 4px; color: #FFFFFF;
  font-size: 17px; font-weight: 700; letter-spacing: -.02em;
}
.tuile__n span { font-size: 13px; font-weight: 500; opacity: .82; }

/* ---------- colonnes de lecture ---------- */
.colonnes { columns: 2; column-gap: 48px; }
.colonnes .body { break-inside: avoid; margin-bottom: 16px; }

/* ---------- blocs SEO en vis-a-vis ---------- */
.face { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; padding: 40px 0; border-top: 1px solid var(--bordure); }
.face:first-child { border-top: 0; padding-top: 0; }
.face--inv { flex-direction: row-reverse; }
.face__t { flex: 1 1 380px; min-width: 0; }
.face > .vue { flex: 1 1 380px; min-width: 0; }
.face__p { display: grid; gap: 14px; margin-top: 18px; }

/* ---------- grilles ---------- */
.gr { display: grid; gap: 20px; }
.gr > * { min-width: 0; }
.gr--2 { grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); }
.gr--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gr--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gr--esc { align-items: start; }
.gr--esc > *:nth-child(even) { margin-top: 56px; }

.point { padding-top: 20px; border-top: 2px solid var(--marque); }
.point__n { font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--texte-doux); }
.point h3 { margin: 10px 0 8px; }

.carte { border-radius: 16px; background: var(--fond-2); overflow: hidden; border: 1px solid var(--bordure); }
.carte--nue { background: transparent; border: 0; }
.carte--pleine { background: var(--fond-2); }
.carte__c { padding: 22px; }
.carte__c h3 { margin: 8px 0 10px; }
.carte__x { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; justify-content: space-between; margin: 14px 0 8px; }

.pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.pastille {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 12px 18px; border-radius: 999px; border: 1px solid var(--bordure);
  background: var(--fond-2); font-size: 15px;
}
.pastille i { font-style: normal; font-size: 12px; color: var(--texte-doux); }
.pastille:hover { background: var(--marque); color: var(--sur-marque); border-color: var(--marque); }
.pastille:hover i { color: var(--sur-marque); opacity: .75; }

.etape { padding-left: 20px; border-left: 1px solid rgba(255, 255, 255, .28); }
.etape__n { font-size: 13px; font-weight: 700; letter-spacing: .12em; opacity: .6; }
.etape h3 { margin: 12px 0 10px; }

.stat { padding: 26px 22px; border-radius: 16px; background: var(--fond-2); border: 1px solid var(--bordure); }
.stat b { display: block; font-size: clamp(34px, 5vw, 52px); letter-spacing: -.04em; color: var(--texte-doux); }
.stat span { display: block; margin-top: 8px; font-size: 14px; }

/* ---------- plan ---------- */
.plan { position: relative; }
.plan > .vue { margin-top: 0; }
.plan__c {
  margin: -80px 24px 0; position: relative; z-index: 2;
  max-width: 460px; padding: 26px; border-radius: 16px;
  background: var(--fond); border: 1px solid var(--bordure);
}
.plan__c .body { margin-top: 6px; }

/* ---------- avis ---------- */
.temoins { display: flex; flex-wrap: wrap; gap: 20px; }
.temoin { flex: 1 1 380px; min-width: 0; position: relative; padding: 20px; border-radius: 16px; background: var(--fond-2); border: 1px solid var(--bordure); }
.temoin__nav { position: absolute; top: -20px; right: 20px; display: flex; gap: 8px; z-index: 2; }
.temoin__nav span { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--marque); color: var(--sur-marque); }
.temoin__c { padding-top: 18px; }
.temoin__x { margin: 12px 0 14px; font-size: clamp(18px, 2.2vw, 22px); letter-spacing: -.02em; }
.temoin__q, .avis__q { font-size: 14px; color: var(--texte-doux); }
.temoin__col { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.avis { padding: 22px; border-radius: 16px; background: var(--fond); border: 1px solid var(--bordure); }
.avis h3 { margin: 10px 0 8px; }
.avis .body { margin-bottom: 12px; }
.etoiles { color: var(--marque); font-size: 14px; letter-spacing: 2px; }

/* ---------- faq en filets ---------- */
.faq { display: flex; flex-wrap: wrap; gap: 48px; }
.faq__g { flex: 1 1 320px; min-width: 0; }
.faq__g .body { margin-top: 16px; }
.faq__d { flex: 2 1 480px; min-width: 0; }
.fq { border-top: 1px solid var(--bordure); padding: 20px 0; }
.fq:last-child { border-bottom: 1px solid var(--bordure); }
.fq summary {
  display: flex; gap: 20px; align-items: center; justify-content: space-between;
  cursor: pointer; list-style: none; font-size: clamp(17px, 2vw, 20px);
  font-weight: 700; letter-spacing: -.02em;
}
.fq summary::-webkit-details-marker { display: none; }
.fq__fl { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: var(--fond-2); border: 1px solid var(--bordure); font-size: 14px; }
.fq[open] .fq__fl { background: var(--marque); color: var(--sur-marque); border-color: var(--marque); }
.fq .body { margin-top: 14px; max-width: 70ch; }

/* ---------- maillage ---------- */
.lien-carte { display: block; padding: 24px; border-radius: 16px; background: var(--fond); border: 1px solid var(--bordure); }
.lien-carte__t { display: flex; gap: 16px; align-items: center; justify-content: space-between; margin: 10px 0 10px; }
.lien-carte__t h3 { min-width: 0; }
.fl { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: var(--fond-2); border: 1px solid var(--bordure); }
.lien-carte:hover .fl { background: var(--marque); color: var(--sur-marque); border-color: var(--marque); }

/* ---------- bandeau CTA ---------- */
.bandeau { padding: 8px; }
.bandeau__scene { position: relative; overflow: hidden; border-radius: 16px; min-height: 420px; display: grid; place-items: center; text-align: center; padding: 56px 24px; }
.bandeau__scene > .vue { position: absolute; inset: 0; border-radius: 0; aspect-ratio: auto; }
.bandeau__c { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 720px; }
.bandeau__c h2 { color: #FFFFFF; }

/* ---------- fil d'ariane ---------- */
/* Des reperes en petites capitales, separes par un tiret : la reference
   n'ecrit jamais un chemin a chevrons. */
.ariane {
  padding-top: 26px; padding-bottom: 2px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux);
}
.ariane__r { text-decoration: none; color: inherit; }
.ariane__r:hover { color: var(--texte); }
.ariane__t { opacity: .5; }
.ariane__ici { color: var(--texte); }

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

.ab { position: relative; overflow: hidden; border-radius: 16px; aspect-ratio: 16 / 9; touch-action: pan-y; }
.ab__vue { position: absolute; inset: 0; }
.ab__vue > .vue { position: absolute; inset: 0; border-radius: 0; aspect-ratio: auto; align-items: flex-end; padding-bottom: 20px; }
.ab__vue--avant { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ab__lab {
  position: absolute; top: 16px; z-index: 3; padding: 7px 13px; border-radius: 999px;
  background: var(--fond); color: var(--texte); font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.ab__lab--avant { left: 16px; }
.ab__lab--apres { right: 16px; }
.ab__barre { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--fond); z-index: 4; pointer-events: none; }
.ab__poignee {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center;
  background: var(--fond); color: var(--texte); font-size: 16px;
}
.ab__range { position: absolute; inset: 0; z-index: 5; width: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent; }
.ab__range::-webkit-slider-thumb { -webkit-appearance: none; width: 56px; height: 100%; }
.ab__range::-moz-range-thumb { width: 56px; height: 100%; border: 0; }
.ab__range:focus-visible { opacity: 1; outline: 3px solid var(--marque); outline-offset: -3px; }
/* Les mots descendent en lignes a filet : l'intitule tient sa largeur, la
   suite s'etale jusqu'au bord oppose. */
.cmp__lignes { margin: 18px 0 0; display: grid; }
.cmp__l {
  display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline;
  padding: 14px 0; border-top: 1px solid var(--bordure);
}
.cmp__l > * { min-width: 0; }
.cmp__l dt { flex: 0 1 auto; font-weight: 600; }
.cmp__l dd { flex: 1 1 320px; margin: 0; color: var(--texte-doux); }

/* ---------- encarts, aides, materiaux ---------- */
.encart { padding: 24px; border-radius: 16px; background: var(--fond); border: 1px solid var(--bordure); }
.encart h3, .encart h4 { margin-bottom: 10px; }
.encart ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.montant { display: inline-block; padding: 8px 14px; border-radius: 999px; background: var(--marque); color: var(--sur-marque); font-weight: 700; font-size: 15px; }

/* ---------- tarifs, prix ---------- */
.offre { display: flex; flex-direction: column; padding: 26px 22px; border-radius: 16px; background: var(--fond); border: 1px solid var(--bordure); }
.apd { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux); margin-top: 16px; }
.prix { font-size: clamp(28px, 4vw, 38px); font-weight: 700; letter-spacing: -.03em; margin-top: 4px; }
.prix__u { font-size: 14px; font-weight: 500; color: var(--texte-doux); margin-left: 6px; letter-spacing: 0; }
.offre .body { margin-top: 12px; }
.offre__x { margin-top: auto; }

/* ---------- produits ---------- */
.facettes { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; }
.facettes__g { flex: 1 1 300px; min-width: 0; }
.facettes__d { flex: 1 1 380px; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

.prod { display: block; }
.prod__v { position: relative; display: block; }
.prod__fl {
  position: absolute; right: -6px; bottom: -6px; z-index: 2;
  width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center;
  background: var(--marque); color: var(--sur-marque); border: 6px solid var(--fond);
}
.prod__fl--haut { top: -6px; bottom: auto; background: var(--fond); color: var(--texte); }
.prod__x { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; justify-content: space-between; margin: 22px 0 6px; }
.prod__x h3 { min-width: 0; }
.prod__p { font-size: 18px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.prod__p i { display: block; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux); }
.prod__p em { font-style: normal; font-size: 13px; font-weight: 500; color: var(--texte-doux); margin-left: 4px; }
.prod__m { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }

.fiche { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.fiche > .vue { flex: 1 1 400px; min-width: 0; }
.fiche__c { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.fiche__c h1 { font-size: clamp(30px, 4.4vw, 44px); }
.fiche__p { display: flex; flex-direction: column; }
.fiche__p .apd { margin-top: 0; }

/* Les caracteristiques se lisent CENTREES sur deux colonnes, chaque paire
   posee sur un filet : le mot dessus, la valeur dessous. */
.specs { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.specs > * { min-width: 0; }
.specs__dit { flex: 1 1 34%; min-width: min(100%, 260px); }
.specs__tab { flex: 1 1 52%; min-width: min(100%, 280px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.carac {
  min-width: 0;
  display: grid; gap: 6px; justify-items: center; text-align: center;
  padding: 22px 12px; border-bottom: 1px solid var(--bordure);
}
.carac__l { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-doux); }
.carac__v { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }

/* ---------- urgence ---------- */
.urg { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: space-between; padding: 32px; border-radius: 16px; background: var(--fond-2); border: 1px solid var(--bordure); }
.urg__g { flex: 1 1 380px; min-width: 0; }
.urg__g .body { margin-top: 14px; }
.urg__d { flex: 0 1 320px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.urg__tel { font-size: clamp(24px, 3.4vw, 34px); font-weight: 700; letter-spacing: -.03em; }

/* ---------- formulaire ---------- */
.paire { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.paire > .vue { flex: 1 1 380px; min-width: 0; }
.paire__c { flex: 1 1 400px; min-width: 0; }
.paire__c .body { margin-top: 16px; }
.lignes { margin-top: 26px; }
.ligne { padding: 20px 0; border-top: 1px solid var(--bordure); }
.ligne:last-child { border-bottom: 1px solid var(--bordure); }
.ligne h3, .ligne h4 { margin-bottom: 8px; }

.formulaire { flex: 1 1 400px; min-width: 0; padding: 28px; border-radius: 16px; background: var(--fond-2); border: 1px solid var(--bordure); }
.champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.champ { min-width: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--texte-doux); }
.champ--long { grid-column: 1 / -1; }
.champ input, .champ textarea {
  width: 100%; padding: 13px 14px; border-radius: 12px;
  border: 1px solid var(--bordure); background: var(--fond); color: var(--texte);
  font: 500 15px/1.5 'Space Grotesk', system-ui, sans-serif; resize: vertical;
}
.champ input:focus, .champ textarea:focus { outline: 2px solid var(--marque); outline-offset: 1px; }

/* ---------- blog ---------- */
.journal { display: flex; flex-wrap: wrap; gap: 48px; }
.journal__g { flex: 1 1 280px; min-width: 0; }
.journal__g .body { margin-top: 16px; }
.journal__d { flex: 2 1 520px; min-width: 0; columns: 2; column-gap: 24px; }
.billet { min-width: 0; display: block; break-inside: avoid; margin-bottom: 24px; }
.billet__v { position: relative; display: block; margin-bottom: 16px; }
.billet h3 { margin: 8px 0 10px; }

/* Le titre et l'image se font face ; le corps descend a DROITE, sous
   l'image, en bande etroite. La colonne de gauche s'arrete au chapo. */
.art { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.art > * { min-width: 0; }
.art__titre { margin: 10px 0 14px; max-width: 20ch; }
.art__g { flex: 1 1 38%; min-width: min(100%, 280px); align-self: flex-start; }
.art__d { flex: 1 1 48%; min-width: min(100%, 300px); display: grid; gap: 34px; }
.art__rep { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; margin-top: 26px; }
.art__rep a { font-size: 13px; text-decoration: none; color: var(--texte-doux); }
.art__rep a:hover { color: var(--texte); }
.art__corps { display: grid; gap: 18px; max-width: 62ch; }
.art__corps h2 { margin-top: 18px; }
.art__corps h3 { margin-top: 10px; }

/* ---------- legal ---------- */
.legal { margin-top: 32px; display: grid; gap: 28px; max-width: 78ch; }
.legal__b h3 { margin-bottom: 12px; }
.legal__p { display: grid; gap: 12px; }

/* ---------- bandeau defilant ---------- */
.rail { overflow: hidden; padding: 26px 0; border-top: 1px solid var(--bordure); border-bottom: 1px solid var(--bordure); }
.rail__piste { display: flex; gap: 56px; width: max-content; animation: defile 34s linear infinite; }
.rail__i { font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--texte-doux); white-space: nowrap; }
@keyframes defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .rail__piste { animation: none; } }

/* ---------- appoints ---------- */
.hero__actes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 22px; }
.hero__actes .btn--nu { margin-top: 0; color: var(--fond); }
.hero__actes .btn--nu .btn__p { background: transparent; border-color: rgba(255, 255, 255, .55); color: var(--fond); }
.bandeau__c .btn--nu { color: var(--fond); }
.bandeau__c .btn--nu .btn__p { background: transparent; border-color: rgba(255, 255, 255, .55); color: var(--fond); }

.tuile__lib { display: block; margin-top: 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .9; }

.vue--puce { width: 26px; height: 26px; flex: none; border-radius: 999px; overflow: hidden; }
.vue--puce img { width: 100%; height: 100%; object-fit: cover; }
.vue--puce span { font-size: 0; }
.pastille { min-width: 0; }

.etape__v { margin: 12px 0 14px; }
.etape__v .vue { min-height: 120px; border-radius: 12px; overflow: hidden; }

.lien-carte__v { display: block; margin-bottom: 14px; }
.lien-carte__v .vue { min-height: 130px; border-radius: 12px; overflow: hidden; }

.encart--appui { margin-top: 26px; display: grid; gap: 10px; justify-items: flex-start; }
.encart--appui .btn { margin-top: 4px; }

.bandeau__form { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 6px; }
.bandeau__form input, .bandeau__form textarea {
  flex: 1 1 200px; min-width: 0; padding: 13px 15px; font: inherit; font-size: 15px;
  color: var(--texte); background: var(--fond); border: 1px solid var(--bordure); border-radius: 10px;
}

.prod__lib { display: block; margin-top: 12px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-doux); }

/* ---------- footer ---------- */
.footer { padding: 72px 0 32px; background: var(--fond-2); border-top: 1px solid var(--bordure); }
.footer__h { display: flex; flex-wrap: wrap; gap: 48px; justify-content: space-between; }
.footer__g { flex: 1 1 340px; min-width: 0; }
.footer__g .body { margin-top: 16px; max-width: 46ch; }
.footer__nap { margin-top: 20px; display: grid; gap: 6px; }
.footer__d { flex: 1 1 420px; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; }
.footer__col { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.footer__col .menu { margin-bottom: 6px; }
.footer__bas { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--bordure); font-size: 13px; color: var(--texte-doux); }
.footer__mini { display: flex; flex-wrap: wrap; gap: 18px; }

/* ============================================================
   ADAPTATION AUX ECRANS. La coquille doit tenir de 320px a 1920px :
   les pastilles du header passent a la ligne (jamais de menu cache),
   et les panneaux deroulants se deplient sur place au doigt.
   ============================================================ */
@media (max-width: 1080px) {
  .colonnes { columns: 1; }
  .gr--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mos__g { position: static; }
  /* T5 — meme ecart que `.mos` juste au-dessus : sans ce palier, la colonne
     de titre `.journal__g` (flex: 1 1 280px) et `.journal__d` (flex: 2 1 520px)
     gardent leur ratio de croissance 1:2 jusqu au plein ecran. A 1024px la
     largeur utile (976px) ne couvre pas la somme des bases + gap (848px) :
     le grow ne redistribue que 128px, `.journal__g` tombe a ~323px pour un
     corps a 47px (clamp 4.6vw) — un mot par ligne. Colonne unique sous ce
     palier, jamais de font-size baisse. */
  .journal { flex-direction: column; }
}

@media (max-width: 900px) {
  .header { justify-content: space-between; }
  .header__nav { order: 3; flex: 1 1 100%; justify-content: flex-start; }
  .header__cta { margin-left: 0; }
  .drop { display: block; flex: 1 1 100%; }
  /* La vitrine est un confort d'ecran large : au doigt, elle pousserait les
     liens hors de vue. Le volet redescend a la liste seule. */
  .drop__vit { display: none; }
  .drop__pan { position: static; transform: none; opacity: 1; visibility: visible; padding-top: 8px; }
  .drop__gr { flex-direction: column; flex-wrap: wrap; gap: 16px; box-shadow: none; padding: 14px 16px;
    width: auto; min-width: 0; max-width: none; }
  .drop__col { min-width: 0; flex: 1 1 100%; }
  .drop__lien { padding: 8px 0; }
  /* R4b — sous 900px le volet de menu repasse en liste A PLAT et TOUJOURS
     visible (`.drop__pan` ci-dessus : position:static, visibility:visible,
     pas de bascule au clic). Empile dans le fil, ce bloc grossit `.header`
     jusqu a couvrir toute la hauteur de la scene hero — et `.header:has(+
     .hero)` restait pose en position:absolute PAR-DESSUS elle, fond clair
     (`--fond` sur `.drop__gr`) peint droit sur le H1/sous-titre/chevron
     blancs censes se lire sur le cadre sombre. Sous ce palier, l entete
     hero-transparente redevient un entete NORMAL, dans le flux, fond clair :
     le volet a plat s empile SOUS elle sans jamais recouvrir la scene. */
  .header:has(+ .hero) { position: static; background: var(--fond); }
  .header:has(+ .hero) .header__nom { color: var(--texte); }
  .header:has(+ .hero) .plink {
    background: var(--fond-2); border-color: var(--bordure); color: var(--texte);
  }
  .header:has(+ .hero) .drop__chev { color: var(--texte-doux); }
  .header + .hero .hero__scene { min-height: 540px; padding: 28px; }
  .section { padding: 64px 0; }
  .section--court { padding: 44px 0; }
  .gr--3, .gr--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gr--esc > *:nth-child(even) { margin-top: 0; }
  .hero__scene { min-height: 540px; padding: 28px; }
  .face { gap: 28px; }
  .plan__c { margin: -40px 16px 0; }
  .facettes__d { justify-content: flex-start; }
}

@media (max-width: 620px) {
  .wrap { padding: 0 16px; }
  .header { padding: 12px 16px; }
  .section { padding: 48px 0; }
  .gr--2, .gr--3, .gr--4, .mos__d, .hero__flot, .champs, .specs__tab, .footer__d {
    grid-template-columns: minmax(0, 1fr);
  }
  .journal__d { columns: 1; }
  .tuile--haute, .tuile--courte { aspect-ratio: 4 / 3; }
  .hero { padding: 0 6px 6px; }
  .hero__scene { min-height: 500px; padding: 22px; }
  .header + .hero .hero__scene { min-height: 500px; padding: 22px; }
  .hero__flot { justify-content: flex-start; }
  .ab { aspect-ratio: 4 / 3; }
  .temoin__nav { position: static; margin-bottom: 12px; justify-content: flex-end; }
  .champ--long { grid-column: auto; }
  .vue--bande { aspect-ratio: 16 / 10; }
  .btn { font-size: 14px; padding-left: 16px; }
  .plan__c { margin: -24px 8px 0; padding: 20px; }
}

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

/* SIGNATURE — la LUMIERE INTERIEURE VENUE DU HAUT-GAUCHE. Vingt-six
   occurrences de `-10px -10px 20px 0 inset` a 25 pour cent de blanc : le
   modele n eclaire pas ses blocs par une ombre portee mais par un lisere
   interne DECENTRE, toujours du meme cote. C est ce qui donne aux surfaces
   leur relief de tole. */
.carte, .tuile, .plan__c, .fiche__c, .pastille {
  box-shadow: inset -10px -10px 20px 0 color-mix(in srgb, var(--fond) 25%, transparent);
}

/* SIGNATURE — le CADRE DECALE PLEIN. Dix occurrences de
   `rgb(242,242,242) -20px -20px 0 4px` et quatre de `-10px -10px 0 0` : une
   ombre SANS flou, d une couleur pleine, poussee vers le haut-gauche. Le bloc
   parait double, comme une plaque posee sur une autre. */
.prod__v, .billet__v { position: relative; }
.prod__v::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  box-shadow: -20px -20px 0 4px var(--fond-2);
}
.billet__v::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  box-shadow: -10px -10px 0 0 var(--fond-2);
}

/* SIGNATURE — l ARRONDI A UN SEUL COIN. Le modele coupe ses angles a la
   piece : `0 0 0 16px` quatre fois (bas-gauche seul), `16px 0 0 0` trois fois
   (haut-gauche seul), `0 0 16px 16px` six fois (les deux du bas). Jamais un
   rayon uniforme sur ces pieces-la : c est l assemblage des coins qui
   raconte comment les blocs s emboitent. */
.mos__g { border-radius: 16px 0 0 0; }
.mos__pied { border-radius: 0 0 0 16px; }
.tuile--courte { border-radius: 0 0 16px 16px; }

/* SIGNATURE — le voile sombre a TROIS ARRETS, jamais deux : `.2` en tete,
   `.5` a 72 pour cent, `.8` en pied (quatre occurrences ; une variante a 64
   pour cent, deux occurrences). L image s assombrit progressivement, pas
   d un coup. */
.hero__voile, .tuile__voile {
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--texte) 20%, transparent) 0%,
    color-mix(in srgb, var(--texte) 50%, transparent) 72%,
    color-mix(in srgb, var(--texte) 80%, transparent) 100%);
}

/* SIGNATURE — le contour INTERNE net d un pixel (`0 0 0 1px inset`, deux
   occurrences), pose par un pseudo pour ne pas ecraser le lisere lumineux. */
.plan__c { position: relative; }
.plan__c::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);
}

/* SIGNATURE — la vue se LEVE par le bas : masque en degre `transparent ->
   plein`, une occurrence, seule decoupe de silhouette du modele (aucun
   `clip-path` sur toute la page). */
.bandeau__scene .vue {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 100%);
}

/* >>> 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 2 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="hors-section-2"]:not(:has(img)):not(:has(video)) {
  --cadre-vide-fond: #171b20;
  --cadre-vide-trame: rgba(255, 255, 255, .05);
  --cadre-vide-encre: rgba(255, 255, 255, .82);
  --cadre-vide-filet: rgba(255, 255, 255, .10);
}
[data-slot="hors-section-2"]:not(:has(img)):not(:has(video)) > * {
  font-size: 0 !important;
}
[data-slot="hors-section-7"]:not(:has(img)):not(:has(video)) {
  --cadre-vide-fond: #171b20;
  --cadre-vide-trame: rgba(255, 255, 255, .05);
  --cadre-vide-encre: rgba(255, 255, 255, .82);
  --cadre-vide-filet: rgba(255, 255, 255, .10);
}
[data-slot="hors-section-7"]:not(:has(img)):not(:has(video)) > * {
  font-size: 0 !important;
}
/* <<< NORME COQUILLE — teinte des cadres porteurs */

/* >>> FIXCOQUILLE cardealer — surcharge manuelle : hors-section-1 (R4b)
   `_lib/teinter-cadres.mjs` ne classe PAS ce cadre porteur alors que le H1,
   le sous-titre .hero__sous et (sur l accueil) le lien "Contact" de l entete
   reposent bien dessus en blanc plein : la mesure du reperage "sol propre"
   (limite a 4 niveaux d ancetres, et une sortie anticipee des que la boite
   d un ancetre depasse 6x celle de la feuille testee) manque le fond opaque
   propre de la carte `.flot` quand son libelle tient sur UNE seule ligne
   (ex. "Materiel certifie", encre --texte #0A0A0A) : cette encre sombre
   tombe alors a tort dans le pool de hors-section-1 et noie au median le
   blanc du H1/sous-titre/nav. Cadre bien porteur en verite, releve outille
   en defaut structurel sur ce gabarit precis (carte-badge courte superposee
   au cadre plein-ecran). Meme teinte que celle deja mesuree par l outil sur
   hors-section-2/hors-section-7 de cardealer — coherence intra-coquille, pas
   une valeur inventee. Ne PAS supprimer si `teinter-cadres.mjs` est relance :
   il ne descend jamais sous ce bloc, et tant que le blind-spot n est pas
   corrige en amont, cette surcharge reste necessaire. */
[data-slot="hors-section-1"]:not(:has(img)):not(:has(video)) {
  --cadre-vide-fond: #171b20;
  --cadre-vide-trame: rgba(255, 255, 255, .05);
  --cadre-vide-encre: rgba(255, 255, 255, .82);
  --cadre-vide-filet: rgba(255, 255, 255, .10);
}
[data-slot="hors-section-1"]:not(:has(img)):not(:has(video)) > * {
  font-size: 0 !important;
}
/* <<< FIXCOQUILLE cardealer — surcharge manuelle : hors-section-1 */


/* === CONTRAT GRILLE (factory, chantier 20/08, #1/#2) — services taille égale + avant/après 3-col === */
.gr--3 > * { flex-grow: 0 !important; }
.gr--4 > * { flex-grow: 0 !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}