/* ============================================================
   WASHKIT — feuille SOURCE de la coquille. dist/ en est une SORTIE,
   ecrasee a chaque rendu : ne jamais editer dist/style.css.
   Mesures relevees sur la reference EN LIGNE (jamais sur le clone src/) :
     titres     Satoshi 700, -2.5px de chasse, h1 80px / h2 56px
     corps      Inter 18px / 28.8px
     rythme     120px de section, 60px quand deux sections s'enchainent
     rayons     16px (cartes), 31px (grands visuels), 999px (pilules)
     largeur    contenu 1268px
     boutons    pilule pleine (accent) et pastille rectangulaire r10
   Satoshi n'est pas distribue par Google Fonts : Manrope 800 en tient
   lieu — meme grotesque geometrique, meme chasse serree.
   AUCUN hex ici : 8 variables de couleur, posees par render.mjs.
   ============================================================ */

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

/* Pas de defilement anime. Sur une page de plus de trente mille pixels, un
   `scroll-behavior: smooth` fait glisser la page pendant plusieurs secondes
   apres un retour en haut : tout ce qui se juge sur les pixels rendus lit
   alors une page en mouvement, et les boites relevees ne sont plus au meme
   endroit que l ecran capture. Le confort d une animation ne vaut pas une
   page dont on ne peut pas garantir la lisibilite. */
html { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
  font-weight: 800;
  margin: 0;
  letter-spacing: -.035em;
  line-height: 1.06;
}
h1 { font-size: clamp(38px, 5.4vw, 80px); }
h2 { font-size: clamp(30px, 3.9vw, 56px); line-height: 1.12; }

/* 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(30px, 3.9vw, 56px); }
h3 { font-size: 24px; line-height: 1.2; letter-spacing: -.02em; }
h4 { font-size: 16px; letter-spacing: -.01em; }

.body { color: var(--texte-doux); margin: 0; }
.body--just { text-align: justify; }

.wrap { width: 100%; max-width: 1268px; margin: 0 auto; padding: 0 24px; }

/* ---------- rythme vertical ----------
   La reference respire large : 120px de haut et de bas, ramene a 60px
   quand deux sections de meme fond se suivent. */
.section { padding: 120px 0; }
.section--court { padding: 60px 0; }
.section--doux { background: var(--fond-2); }
/* La bande sombre est l'encre du site, jamais une 9e couleur. */
.section--sombre { background: var(--texte); color: var(--fond); }
.section--sombre h2, .section--sombre h3 { color: var(--fond); }
.section--sombre h2 span { color: var(--accent) !important; }
.section--sombre .body { color: var(--fond); opacity: .68; }
.section--sombre .eyebrow { color: var(--accent); }

/* ---------- tetes de section ---------- */
.tete { max-width: 720px; margin-bottom: 56px; }
.tete--centre { margin-left: auto; margin-right: auto; text-align: center; }
.tete--large { max-width: 900px; }

.eyebrow {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--marque);
  margin: 0 0 14px;
}
/* Pastille de rubrique : l'idiome de la reference pour annoncer un bloc. */
.eyebrow--pill {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--fond-2);
  border: 1px solid var(--bordure);
  color: var(--marque);
  margin-bottom: 20px;
}
.section--sombre .eyebrow--pill { background: transparent; border-color: rgba(255,255,255,.18); }

/* ---------- boutons ----------
   Deux formes seulement, relevees telles quelles : la pilule pleine
   (accent) et la pastille rectangulaire r10 pour le second niveau. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--texte);
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.01em;
  border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -12px rgba(0,0,0,.45); }
.btn__fl {
  width: 22px; height: 22px;
  display: inline-grid; place-items: center;
  border-radius: 999px;
  background: var(--texte);
  color: var(--accent);
  font-size: 11px;
}
.btn--marque { background: var(--marque); color: var(--sur-marque); }
.btn--marque .btn__fl { background: var(--sur-marque); color: var(--marque); }
.btn--plat {
  border-radius: 10px;
  background: var(--fond);
  color: var(--texte);
  border-color: var(--bordure);
  padding: 13px 20px;
}
.btn--plat .btn__fl { background: var(--marque); color: var(--sur-marque); }
.btn--clair { background: var(--fond); color: var(--texte); }
.btn--clair .btn__fl { background: var(--marque); color: var(--sur-marque); }

/* ---------- cadres image ----------
   La coquille n'embarque aucun visuel : sans src, le cadre reste visible
   avec son alt — c'est exactement l'etat "coquille". */
.frame {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: var(--fond-2);
  min-height: 220px;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  color: var(--texte-doux);
  font-size: 13px;
  padding: 12px;
}
.frame img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.frame--grand { border-radius: 31px; min-height: 420px; }
.frame--rond { border-radius: 999px; }

/* ---------- pilules et listes ---------- */
.pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--bordure);
  background: var(--fond);
  font-size: 14px;
  color: var(--texte-doux);
}
.pill__p { width: 7px; height: 7px; border-radius: 999px; background: var(--accent); flex: 0 0 auto; }
.section--sombre .pill { background: transparent; border-color: rgba(255,255,255,.2); color: var(--fond); }

.puces li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  color: var(--texte-doux);
  font-size: 16px;
}
.puces li::before {
  content: '';
  position: absolute; left: 0; top: 8px;
  width: 16px; height: 16px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: inset 0 0 0 4px var(--fond);
}
.section--sombre .puces li { color: var(--fond); }
.section--sombre .puces li::before { box-shadow: inset 0 0 0 4px var(--texte); }

/* ---------- grilles ----------
   NORME COQUILLE, R3 — UNE SEULE LARGEUR PAR GRILLE. `flex: 1 1 30%` sur un
   conteneur qui enroule ne donne pas trois pistes : il donne trois cartes sur
   la premiere rangee et une carte ETIREE sur la seconde, 391 px contre
   1220 px. Les pistes se COMPTENT — `repeat(N, minmax(0,1fr))`, le compte pose
   par la classe de grille — et la derniere rangee incomplete garde alors la
   largeur de piste de toutes les autres.
   Deux paliers, et ils ne se replient pas pour la meme raison : 1200 px parce
   que les grilles denses n y tiennent plus leur texte (T5 se groupe a 1024 si
   le seul palier est colle au repli du menu), 640 px parce qu au doigt une
   piste unique est la seule lisible. */
.gr { display: grid; gap: 24px; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.gr > * { min-width: 0; }
.gr--2 { --n: 2; }
.gr--3 { --n: 3; }
.gr--4 { --n: 4; }
.gr--6 { --n: 6; }
@media (max-width: 1200px) {
  .gr--4 { --n: 3; }
  .gr--6 { --n: 4; }
}
@media (max-width: 1000px) {
  .gr--3, .gr--4 { --n: 2; }
  .gr--6 { --n: 3; }
}
@media (max-width: 640px) {
  .gr, .gr--2, .gr--3, .gr--4, .gr--6 { --n: 1; }
}

/* Le compte de duels varie selon la page (1 a plusieurs) : auto-fit evite
   la moitie de rangee vide qu'un --n fixe laisserait sur les pages a 1 item.
   Plancher `min(460px, 100%)` et non `460px` sec : `.ab` fixe sa hauteur en
   `min-height` (pas un `aspect-ratio`), donc son ratio SUIT la largeur de la
   piste — un plancher qui deborde du conteneur sous 460px (tout mobile, R5a)
   etire la piste a 460px quand meme et fausse le ratio mesure a 390px. */
.duels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); gap: 40px; }

/* ---------- carte ---------- */
.carte {
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s ease, transform .2s ease;
}
.carte--douce { background: var(--fond-2); border-color: transparent; }
.carte:hover { box-shadow: 0 12px 26px -14px rgba(0,0,0,.22); }
a.carte:hover { transform: translateY(-3px); }
.carte h3 { margin-top: 20px; }
.carte .body { margin-top: 12px; font-size: 16px; }
.carte__fl {
  margin-top: auto;
  padding-top: 22px;
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 14px;
  color: var(--marque);
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
}

/* ---------- 1. HEADER ----------
   Logo a gauche, navigation dans une barre pilule, CTA en pilule accent. */
/* F1 — l entete de la reference est une barre BASSE posee au-dessus de la
   scene : la premiere fenetre y est de la matiere de haut en bas. Notre
   entete reste dans le flux (elle ne recouvre donc jamais rien, R10), mais
   elle se serre pour rendre la fenetre a la scene. */
.header {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 9px 34px;
  background: var(--fond);
  border-bottom: 1px solid var(--bordure);
}
.header__logo {
  display: flex; align-items: center; gap: 12px;
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
  font-weight: 800; font-size: 20px; letter-spacing: -.03em;
  min-width: 0;
}
.header__goutte {
  width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: 999px 999px 999px 4px;
  background: var(--marque);
  display: inline-block;
}
.header__nav {
  display: flex; align-items: center; gap: 6px;
  padding: 6px;
  border: 1px solid var(--bordure);
  border-radius: 999px;
  background: var(--fond-2);
}
.header__nav > a, .drop__tete {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 15px;
  color: var(--texte-doux);
  white-space: nowrap;
}
.header__nav > a:hover, .drop__tete:hover { color: var(--texte); }
.header__nav > a.is-active, .drop__tete.is-active { background: var(--fond); color: var(--texte); box-shadow: 0 2px 6px -2px rgba(0,0,0,.12); }
.drop { position: relative; }
.drop__chev { font-size: 10px; opacity: .6; }
.drop__panneau {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  /* paddingTop et non marginTop : sans zone morte le survol ne casse pas. */
  padding-top: 14px;
  opacity: 0; visibility: hidden;
  transition: opacity .16s ease;
}
.drop:hover .drop__panneau, .drop:focus-within .drop__panneau { opacity: 1; visibility: visible; }
.drop__grille {
  display: flex; align-items: flex-start; gap: 34px;
  padding: 28px 32px;
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: 16px;
  box-shadow: 0 26px 46px -22px rgba(0,0,0,.3);
  /* `width: max-content` : en position absolue, la largeur est un shrink-to-fit
     calcule sur la place restante A DROITE de `left: 50%` — soit la moitie de la
     tete. Sans lui, la carte retombe a son `min-width` et la vitrine en sort. */
  width: max-content; min-width: 560px; max-width: min(94vw, 900px);
}
.drop__col { min-width: 190px; flex: 0 0 auto; display: block; }
/* 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 des que les colonnes
   s'allongent. 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); justify-self: start; }
.drop__titre {
  display: block;
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
  font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--marque); margin-bottom: 12px;
}
.drop__lien { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 15px; color: var(--texte-doux); }
.drop__lien:hover { color: var(--marque); }
.header__cta { flex: 0 0 auto; }
@media (max-width: 1100px) {
  .header { flex-wrap: wrap; padding: 16px 20px; }
  .header__nav { order: 3; width: 100%; overflow-x: auto; border-radius: 16px; justify-content: flex-start; }
  .drop__panneau { position: static; transform: none; opacity: 1; visibility: visible; padding-top: 0; display: none; }
  .drop__grille { flex-direction: column; gap: 14px; width: auto; min-width: 0; max-width: 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. */
  .drop__vit { display: none; }
}

/* ---------- 2. HERO ----------
   Idiome de la reference : un seul grand visuel plein cadre, arrondi 31,
   le titre pose dessus en bas a gauche. Pas de colonnes de cartes. */
/* F1 — la scene d accueil de la reference part du BORD de la fenetre et la
   remplit jusqu en bas : ni gouttiere, ni arrondi, ni marge haute. Sa hauteur
   se deduit de l entete pour que l affiche tienne dans UN ecran (P1b) sans en
   laisser depasser un morceau de la section suivante. */
.hero { padding: 0; }
.hero > .wrap { max-width: none; padding: 0; }
.hero__scene {
  position: relative;
  min-height: calc(100vh - var(--entete, 72px));
  border-radius: 0;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background: var(--fond-2);
}
.hero__scene .frame { position: absolute; inset: 0; border-radius: 0; min-height: 0; }
.hero__voile {
  position: absolute; inset: 0;
  /* Filtre sombre obligatoire des qu'un texte est pose sur une image. */
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.62) 62%, rgba(0,0,0,.82) 100%);
}
/* Le texte reprend la gouttiere que la scene vient d abandonner : plein bord
   pour la matiere, aligne sur le corps de page pour l ecrit. */
.hero__texte {
  position: relative;
  width: 100%;
  max-width: calc((1268px - 48px) / 2 + 110px);
  padding: 64px 24px 60px max(24px, calc((100vw - 1268px) / 2 + 24px));
  color: #FFFFFF;
}
.hero__texte h1 { color: #FFFFFF; }
/* R4b — l accent de la scene d accueil prend le token eclairci : il garde la
   teinte de la marque et tient 4,5:1 sur le fond le plus sombre. */
.hero__ac { color: var(--accent-clair, #FFFFFF); }
.hero__sous { color: #FFFFFF; opacity: .86; margin: 22px 0 32px; max-width: 620px; }
.hero__pills .pill { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); color: #FFFFFF; }

/* Les deux boutons du hero, cote a cote puis l'un sous l'autre. */
.hero__b { display: flex; flex-wrap: wrap; gap: 14px; }

/* Les atouts du hero : un titre, son propos, ses reperes — jamais reduits
   a une etiquette. Compte pilote par les donnees. */
/* Le bandeau d atouts : pleine largeur sous la scene, son propre sol. Il
   compte ses pistes comme toute grille (R3) — jamais `flex: 1 1 base`. */
.hero__bandeau { background: var(--fond-2); border-bottom: 1px solid var(--bordure); }
.hero__at {
  display: grid; gap: 12px;
  grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
  max-width: 1268px; margin: 0 auto; padding: 26px 24px;
}
.hero__at > * { min-width: 0; }
.hero__at .pill {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 16px 18px; text-align: left;
  background: var(--fond); border-color: var(--bordure); color: var(--texte);
}
@media (max-width: 1200px) { .hero__at { --n: 2; } }
@media (max-width: 640px) { .hero__at { --n: 1; } }
.hero__at .pill b { font-size: 16px; }
.hero__at .pill span { font-size: 14px; color: var(--texte-doux); }
@media (max-width: 1100px) {
  .hero__texte { max-width: 100%; padding: 48px 24px 44px; }
}
@media (max-width: 760px) {
  .hero__scene { min-height: 520px; }
  .hero__texte { padding: 32px 24px 40px; }
}

/* ---------- 3. PROCESS ----------
   Trois visuels, le numero pose en pastille accent sur le coin du cadre. */
.etape { position: relative; }
.etape .frame { min-height: 260px; }
.etape__num {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--accent);
  color: var(--texte);
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
  font-weight: 800; font-size: 17px;
}

/* ---------- 4. BLOC TEXTE + IMAGE ----------
   Deux colonnes, le visuel en grand rayon, alternees par la coquille. */
.duo { display: flex; flex-wrap: wrap; gap: 64px; align-items: center; }
.duo > * { flex: 1 1 46%; min-width: 0; }
.duo--inv { flex-direction: row-reverse; }
.duo__col { display: flex; flex-direction: column; }
@media (max-width: 900px) {
  .duo { gap: 34px; }
  .duo > * { flex: 1 1 100%; }
  .duo--inv { flex-direction: row; }
}

/* ---------- 5. AVANT / APRES ----------
   Un seul panneau, plein largeur : les deux photos superposees, la
   decoupe pilotee par --pos, un input range en overlay (souris, tactile,
   clavier). Deux vignettes cote a cote seraient non conformes. */
.ab {
  position: relative;
  border-radius: 31px;
  overflow: hidden;
  min-height: 520px;
  background: var(--fond-2);
  touch-action: pan-y;
}
.ab__vue { position: absolute; inset: 0; }
.ab__vue .frame { position: absolute; inset: 0; border-radius: 0; min-height: 0; }
.ab__vue--avant { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ab__lab {
  position: absolute; bottom: 24px; z-index: 3;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 14px; font-weight: 700;
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
  background: var(--fond); color: var(--texte);
}
.ab__lab--avant { left: 24px; }
.ab__lab--apres { right: 24px; background: var(--accent); }
.ab__barre {
  position: absolute; top: 0; bottom: 0; z-index: 3;
  left: var(--pos);
  width: 3px; margin-left: -1.5px;
  background: var(--fond);
  pointer-events: none;
}
.ab__poignee {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--fond); color: var(--texte);
  font-size: 18px;
  box-shadow: 0 10px 26px -10px rgba(0,0,0,.5);
}
.ab__range {
  position: absolute; inset: 0; z-index: 4;
  width: 100%; height: 100%;
  margin: 0; padding: 0;
  opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none;
  background: transparent;
}
.ab__range:focus-visible + .ab__barre .ab__poignee { box-shadow: 0 0 0 4px var(--marque); }
.ab__pied { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; margin-top: 28px; }
/* Un plancher, sinon les deux legendes restent cote a cote dans 144px a
   360px et chaque intitule part en un mot par ligne. */
.ab__pied > * { flex: 1 1 46%; min-width: min(100%, 240px); }
@media (max-width: 760px) { .ab { min-height: 380px; } }

/* ---------- 6. BANDEAU DEFILANT ---------- */
.marquee { overflow: hidden; padding: 34px 0; border-top: 1px solid var(--bordure); border-bottom: 1px solid var(--bordure); }
.marquee__piste { display: flex; gap: 64px; white-space: nowrap; animation: defile 26s linear infinite; min-width: 0; }
.marquee__item {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
  font-weight: 800; font-size: 22px; letter-spacing: -.02em;
  color: var(--texte-doux); opacity: .5;
}
@keyframes defile { to { transform: translateX(-50%); } }

/* ---------- 7. CHIFFRES ----------
   Un seul panneau borde, colonnes separees par un filet. Aucun chiffre
   n'est ecrit ici : sans donnee honnete, la bande n'est pas rendue. */
.bande {
  display: flex; flex-wrap: wrap;
  border: 1px solid var(--bordure);
  border-radius: 16px;
  overflow: hidden;
  background: var(--fond);
}
.bande > * { flex: 1 1 22%; min-width: min(100%, 220px); padding: 34px 30px; border-left: 1px solid var(--bordure); }
.bande > *:first-child { border-left: 0; }
.chiffre b {
  display: block;
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
  font-weight: 800; font-size: 46px; line-height: 1; letter-spacing: -.04em;
  color: var(--marque);
}
.chiffre span { display: block; margin-top: 10px; font-size: 15px; color: var(--texte-doux); }

/* ---------- 8. TARIFS ----------
   Quatre colonnes en cartes, le prix en tete, precede d'une pastille
   « A partir de ». La coquille n'ecrit ni TTC ni HT et n'en accepte
   aucune variable. */
.prix {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
  font-weight: 800; font-size: 42px; line-height: 1; letter-spacing: -.04em;
  color: var(--texte); margin: 14px 0 0;
}
/* T5 — l unite n est pas un morceau du prix : collee dans le meme paragraphe,
   elle donnait a un chiffre en corps 42 un compte de mots par ligne de piste
   etroite. Elle prend son propre paragraphe, a son propre corps. */
.prix__u { display: block; margin: 8px 0 0; font-size: 14px; color: var(--texte-doux); }
.tarif__x { margin-top: auto; padding-top: 24px; }

/* ---------- PRODUITS : facettes, grille, fiche, caracteristiques ----------
   Rendus seulement quand la niche porte des produits. Le compte de colonnes
   vient des donnees : flex-wrap + base en pourcent, min-width:0 partout. */
.filtre { display: flex; flex-wrap: wrap; gap: 26px 44px; align-items: flex-end; }
.filtre > * { min-width: 0; }
.filtre__g { flex: 1 1 300px; }
.filtre__d { flex: 2 1 420px; display: flex; flex-wrap: wrap; gap: 10px; }
.filtre__l {
  display: inline-flex; align-items: center; max-width: 100%;
  padding: 11px 20px; border-radius: 999px;
  border: 1px solid var(--bordure); background: var(--fond);
  font-size: 15px; color: var(--texte); text-decoration: none;
  overflow-wrap: anywhere;
}
.filtre__l:hover { border-color: var(--marque); color: var(--marque); }
.filtre__l--ici { background: var(--marque); border-color: var(--marque); color: var(--sur-marque); }

.prod__x {
  display: flex; flex-wrap: wrap; gap: 14px 20px;
  align-items: flex-end; justify-content: space-between;
  margin-top: auto; padding-top: 24px;
}
.prod__x > * { min-width: 0; }
/* T5 — le groupe de prix mis en concurrence avec le bouton sur la meme rangee
   se faisait serrer a 106 px : « A partir de » y tombait a 1,2 mot par ligne.
   Il prend la rangee entiere ; le bouton passe dessous. */
.prod__p { flex: 1 1 100%; }
.prix--menu { font-size: 30px; margin-top: 10px; }
.carac__v {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
  font-weight: 800; font-size: 26px; line-height: 1.1; letter-spacing: -.03em;
  color: var(--texte); margin-top: 12px; overflow-wrap: anywhere;
}
.duo--haut { align-items: flex-start; }
/* Un libelle long ne pousse jamais le bouton hors de sa colonne. */
.btn { max-width: 100%; flex-wrap: wrap; overflow-wrap: anywhere; }

/* ---------- 9. SECTEURS B2B ---------- */
.sect { display: flex; flex-wrap: wrap; gap: 40px; align-items: stretch; margin-bottom: 24px; }
.sect > * { flex: 1 1 46%; min-width: 0; }
.sect--inv { flex-direction: row-reverse; }
.sect .frame { min-height: 100%; border-radius: 31px; }
.sect__c { background: var(--fond-2); border-radius: 31px; padding: 44px; display: flex; flex-direction: column; }
.sect__m {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
  font-weight: 800; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--marque);
}
@media (max-width: 900px) { .sect > * { flex: 1 1 100%; } .sect--inv { flex-direction: row; } .sect .frame { min-height: 260px; } }

/* ---------- 10. CARTE ULTRALOCALE ---------- */
.map { position: relative; }
.map .frame { min-height: 480px; border-radius: 31px; }
.map__carte {
  position: absolute; left: 34px; bottom: 34px; z-index: 2;
  max-width: 380px;
  background: var(--fond);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 22px 42px -22px rgba(0,0,0,.4);
}
@media (max-width: 760px) {
  .map .frame { min-height: 320px; }
  /* Le panneau reste POSITIONNE : en `static` il perdait son z-index et
     passait SOUS le plan, qui est `position: relative` — un element
     positionne peint au-dessus du contenu en flux. La remontee de 40px
     est voulue (le panneau mord sur le plan), le passage dessous non. */
  .map__carte { position: relative; left: 0; bottom: 0; z-index: 2; max-width: none;
    margin-top: -40px; margin-left: 16px; margin-right: 16px; }
}

/* ---------- 11. AVIS (bande sombre) ---------- */
.avis {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  padding: 30px;
  display: flex; flex-direction: column;
  background: rgba(255,255,255,.04);
}
.avis__t { color: var(--fond); }
.avis__texte { color: var(--fond); opacity: .74; margin: 14px 0 0; font-size: 16px; }
.avis__etoiles { color: var(--accent); letter-spacing: 3px; margin-top: 22px; }
.avis__pied { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 24px; }
.avis__av {
  width: 46px; height: 46px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--accent); color: var(--texte);
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
  font-weight: 800;
}
.avis__nom { color: var(--fond); font-weight: 700; font-size: 15px; }
.avis__role { color: var(--fond); opacity: .6; font-size: 14px; }

/* ---------- 12. FAQ ----------
   Sans visuel, en colonne centree : l'idiome de la reference. */
.faq { max-width: 860px; margin: 0 auto; }
/* L'encart de fin de FAQ : une carte a part, jamais une question deguisee. */
.faq__e { max-width: 860px; margin: 26px auto 0; display: grid; gap: 12px; justify-items: flex-start; }
.faq-item {
  border: 1px solid var(--bordure);
  border-radius: 16px;
  padding: 22px 26px;
  margin-bottom: 14px;
  background: var(--fond);
}
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  cursor: pointer; list-style: none;
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
  font-weight: 700; font-size: 19px; letter-spacing: -.02em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item p { color: var(--texte-doux); margin: 16px 0 0; font-size: 16px; }
.rond {
  width: 34px; height: 34px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--fond-2);
  color: var(--marque);
  font-size: 15px;
}
.faq-item[open] .rond { background: var(--accent); color: var(--texte); }

/* ---------- 13. ZONES ---------- */
.zone { position: relative; border-radius: 16px; overflow: hidden; display: block; }
.zone .frame { min-height: 200px; border-radius: 0; }
.zone__voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.72) 100%); }
.zone__n {
  position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2;
  color: #FFFFFF;
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
  font-weight: 700; font-size: 16px; letter-spacing: -.02em;
}
.zone__tag { display: block; font-size: 12px; opacity: .75; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- 14. URGENCE ---------- */
.urg { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; justify-content: space-between; }
.urg > * { flex: 1 1 46%; min-width: 0; }
.urg__tel {
  display: inline-block;
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
  font-weight: 800; font-size: clamp(30px, 4vw, 50px); letter-spacing: -.04em;
  color: var(--accent);
  margin-bottom: 18px;
}

/* ---------- 15. BANDE CTA (marque) ---------- */
.cta {
  background: var(--marque);
  color: var(--sur-marque);
  border-radius: 31px;
  padding: 64px;
  display: flex; flex-wrap: wrap; gap: 48px; align-items: center;
}
.cta > * { flex: 1 1 46%; min-width: 0; }
.cta h2, .cta .eyebrow { color: var(--sur-marque); }
.cta .body { color: var(--sur-marque); opacity: .82; }
/* La bande CTA peut porter sa photo : un pave arrondi sous le propos. */
.cta__v { margin-top: 24px; height: 190px; border-radius: 16px; overflow: hidden; }
.cta__form { display: flex; flex-wrap: wrap; gap: 14px; }
.cta__form input, .cta__form textarea {
  flex: 1 1 100%;
  font: inherit; font-size: 16px;
  padding: 15px 18px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.12);
  color: var(--sur-marque);
}
.cta__form input::placeholder, .cta__form textarea::placeholder { color: var(--sur-marque); opacity: .7; }
@media (max-width: 760px) { .cta { padding: 36px 26px; gap: 30px; } }

/* ---------- 16. FORMULAIRE CONTACT ---------- */
.champs { display: flex; flex-wrap: wrap; gap: 16px; }
.champ { flex: 1 1 46%; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.champ--long { flex: 1 1 100%; }
.champ span { font-size: 14px; font-weight: 600; color: var(--texte); }
.champ input, .champ textarea {
  font: inherit; font-size: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--bordure);
  background: var(--fond-2);
  color: var(--texte);
  width: 100%;
}
.champ input:focus, .champ textarea:focus { outline: 2px solid var(--marque); outline-offset: 1px; }

/* ---------- 17. FIL D'ARIANE ---------- */
.ariane { padding-top: 26px; padding-bottom: 6px; font-size: 14px; color: var(--texte-doux); }
.ariane a:hover { color: var(--marque); }

/* ---------- 18. ARTICLE ---------- */
.art { display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; margin-top: 48px; }
.art__som { flex: 1 1 26%; min-width: min(100%, 250px); position: sticky; top: 110px; }
.art__corps { flex: 1 1 60%; min-width: 0; }
.art__corps p { color: var(--texte-doux); }
.art__hero { min-height: 460px; border-radius: 31px; margin-top: 40px; }
@media (max-width: 900px) { .art__som { position: static; flex: 1 1 100%; } }

/* ---------- 19. PAGES LEGALES ---------- */
.legal { display: flex; flex-wrap: wrap; gap: 30px; }
.legal__b { flex: 1 1 46%; min-width: 0; background: var(--fond-2); border-radius: 16px; padding: 30px; }

/* ---------- 20. PIED NAP ---------- */
.footer { background: var(--texte); color: var(--fond); padding: 90px 0 40px; }
.footer h4 { color: var(--fond); margin-bottom: 18px; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
.footer .body { color: var(--fond); opacity: .62; margin-top: 18px; font-size: 15px; }
.footer li { margin-bottom: 10px; }
.footer a { color: var(--fond); opacity: .75; font-size: 15px; }
.footer a:hover { opacity: 1; color: var(--accent); }
.footer__marque {
  display: flex; align-items: center; gap: 12px;
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
  font-weight: 800; font-size: 21px; letter-spacing: -.03em;
}
.footer__nap div { display: flex; gap: 10px; margin-bottom: 12px; font-size: 15px; opacity: .78; }
.footer__nap i { font-style: normal; color: var(--accent); }
.footer__bas {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
  margin-top: 64px; padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: 14px; opacity: .6;
}

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

/* SIGNATURE — la DECOUPE LATERALE. Le modele ne revele pas par le bas mais
   par le COTE : `clip-path: inset(0 50% 0 0)`, une occurrence, seule
   decoupe de toute la page. La coquille reprend ce geste par un masque a
   coupe NETTE a la moitie, sur ses voiles de vue. */
.carac__v { position: relative; }
.carac__v::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, #000 0 50%, transparent 50%);
  mask-image: linear-gradient(to right, #000 0 50%, transparent 50%);
  background: linear-gradient(90deg, color-mix(in srgb, var(--texte) 18%, transparent) 0%, transparent 100%);
}
.map__carte { position: relative; }
.map__carte::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, #000 0 50%, transparent 50%);
  mask-image: linear-gradient(to right, #000 0 50%, transparent 50%);
  background: linear-gradient(90deg, color-mix(in srgb, var(--texte) 12%, transparent) 0%, transparent 100%);
}

/* SIGNATURE — le CONTOUR INTERNE net d un pixel (`0 0 0 1px inset`, deux
   occurrences) : le modele cerne certains blocs de l interieur, sans jamais
   poser une bordure qui elargirait la boite. Pose par un pseudo pour ne pas
   ecraser les ombres portees du bloc. */
.sect__c { position: relative; }
.sect__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) 8%, transparent);
}

/* SIGNATURE — l ombre TRES HAUTE et etalee : cinq couches qui montent
   jusqu a `0 75px 21px`, relevees cinq fois. Le bloc ne se decolle pas d un
   millimetre, il plane. */
.carte, .sect__c {
  box-shadow:
    0 6px 8px color-mix(in srgb, var(--texte) 3%, transparent),
    0 22px 14px color-mix(in srgb, var(--texte) 2%, transparent),
    0 48px 19px color-mix(in srgb, var(--texte) 1%, transparent),
    0 75px 21px transparent;
}

/* SIGNATURE — l ombre PLATE et courte (`0 4px 12px` a 4 pour cent, trois
   occurrences) coexiste avec la precedente : le modele oppose franchement
   les blocs poses aux blocs qui planent. */
.bande, .avis__av {
  box-shadow: 0 4px 12px color-mix(in srgb, var(--texte) 4%, transparent);
}

/* SIGNATURE — le voile de vue MONTE DU BAS, de rien a 82 pour cent, et il
   est TEINTE (23,23,25 : un noir bleute, pas un noir pur). Trois
   occurrences, toujours sur la moitie basse. */
.hero__voile, .zone__voile {
  background-image: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--texte) 82%, transparent) 100%);
}

/* SIGNATURE — la grande vue APPARAIT PAR LE BAS : masque en degre
   `transparent -> plein`, une occurrence sur le modele. */
.sect .frame {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 100%);
}

/* SIGNATURE — la vignette qui COIFFE un bloc n arrondit que ses deux coins
   hauts (`16px 16px 0 0`, une occurrence). */
.cta__v { border-radius: 16px 16px 0 0; }

/* ---------- REGLE 7 : la paire appel + devis ----------
   Un seul conteneur tient les deux portes, a toutes les largeurs. Elle ne se
   replie jamais dans un menu : sur les pages sans hero ni bande CTA, l en-tete
   est la seule porte du visiteur au telephone. */
.paire { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-width: 0; }
.header__cta { flex: 0 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
.header__cta .btn { padding: 11px 22px; }
.header__cta .btn__fl { width: 20px; height: 20px; }
/* La porte creuse lit son encre au COURANT : posee sur le bleu de marque comme
   sur le fond clair, elle ne cloue jamais sa couleur. */
.btn--creux {
  background: transparent;
  color: inherit;
  border-color: currentColor;
}
.btn--creux .btn__fl { background: transparent; border: 1px solid currentColor; color: inherit; }
/* Le pied du formulaire prend la rangee entiere de la grille du formulaire. */
.cta__form .paire--pied { flex: 1 1 100%; }
.cta__form .btn--creux { color: var(--sur-marque); }
@media (max-width: 560px) {
  .header__cta .btn { padding: 12px 16px; font-size: 14px; }
}

/* >>> 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-22 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="wk--hro"]: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="wk--hro"]:not(:has(img)):not(:has(video)) > * {
  font-size: 0 !important;
}
[data-slot="wk--zon"]: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="wk--zon"]:not(:has(img)):not(:has(video)) > * {
  font-size: 0 !important;
}
/* <<< NORME COQUILLE — teinte des cadres porteurs */


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

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