/* ============================================================
   TEMPLATE-14 (roofer) — la SOURCE du dessin. dist/ n est qu une
   sortie ecrasee a chaque rendu : ce fichier seul fait foi.

   Grammaire native relevee en ligne :
   - cadre de 1280 ancre a 80 ;
   - DEUX familles strictement separees : Plus Jakarta Sans 700
     pour tous les titres, Inter pour tout le corps ;
   - l elevation est une ombre PLEINE SANS FLOU, 0 4px 0 0 a 15
     pour cent : la surface repose sur une lame, elle ne flotte pas ;
   - aucune bordure sur toute la fiche : le contour est un anneau
     interieur d un pixel ;
   - les vues MAJEURES debordent du cadre et passent sous la barre ;
   - les appels vont par PAIRES de 83 de haut ;
   - les puces sont une coche PLATE de 17x12, jamais un disque ;
   - le pied est un bandeau image de 706 avec un filigrane qui
     deborde a gauche.
   Aucun degrade de couleur, aucune connaissance de metier.
   ============================================================ */

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

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
p, h1, h2, h3, h4, figure, blockquote { margin: 0; }
button, input, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4, .kr-hro__t, .kr-hrp__t {
  font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
}

/* ---- cadre et sections -------------------------------------- */

.kr-cadre {
  width: min(100% - 40px, 1280px);
  margin-inline: auto;
}

.kr-s { padding: 96px 0; position: relative; }
.kr-s--pale { background: var(--fond-2); }
.kr-s--creme { background: var(--fond-2); }

/* ---- signes de tete ----------------------------------------- */

.kr-lab {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 1px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--texte-doux);
}

.kr-em { font-style: normal; color: var(--marque); position: relative; }
/* Le SOULIGNEMENT natif : un masque de 97x10, jamais un trait plein. */
.kr-em::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -.12em;
  height: 10px;
  background: var(--marque);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 97 10' preserveAspectRatio='none'%3E%3Cpath d='M1 7C22 2 62 1 96 5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 97 10' preserveAspectRatio='none'%3E%3Cpath d='M1 7C22 2 62 1 96 5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}

/* Sur une scene photographique, le mot souligne ne peut pas prendre la
   couleur de marque : la fabrique versera parfois un bleu nuit, et le mot
   disparaitrait dans le voile. Il garde le trait a la main — la signature du
   gabarit — mais en blanc, lisible quelle que soit la palette. */
.kr-s--hero .kr-em { color: var(--sur-image); }
.kr-s--hero .kr-em::after { background: var(--sur-image); }

.kr-tete { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: flex-end; }
.kr-tete__g { flex: 1 1 480px; min-width: 0; }
.kr-tete__d { flex: 0 1 auto; min-width: 0; }
.kr-tete__t { font-size: clamp(30px, 3.4vw, 40px); letter-spacing: -.038em; }
.kr-tete__p { margin-top: 18px; color: var(--texte-doux); max-width: 620px; }

.kr-tete--flanc .kr-tete__g { flex: 1 1 520px; max-width: 620px; }
.kr-tete--large { display: block; text-align: left; }
.kr-tete--large .kr-tete__t { max-width: none; }
.kr-tete--large .kr-tete__p { margin-inline: 0; max-width: 660px; }
.kr-tete--duo { align-items: flex-start; justify-content: space-between; }
.kr-tete--duo .kr-tete__d { flex: 0 1 360px; color: var(--texte-doux); }

.kr-txt { color: var(--texte-doux); }
.kr-txt + .kr-txt { margin-top: 16px; }

/* ---- appels : pilules de 83, par paires ---------------------- */

.kr-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 55px;
  padding: 14px 30px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  text-align: center;
  transition: transform .16s, box-shadow .16s;
}
.kr-btn--plein {
  background: var(--marque);
  color: var(--sur-marque);
  box-shadow: 0 4px 0 0 rgba(0, 0, 0, .15);   /* l ombre PLEINE, sans flou */
}
.kr-btn--clair {
  background: var(--fond);
  color: var(--texte);
  box-shadow: inset 0 0 0 1px var(--bordure), 0 4px 0 0 rgba(0, 0, 0, .15);
}
.kr-btn:hover { transform: translateY(2px); box-shadow: 0 2px 0 0 rgba(0, 0, 0, .15); }
.kr-btn:focus-visible { outline: 2px solid var(--marque); outline-offset: 3px; }

.kr-paire { display: flex; flex-wrap: wrap; gap: 16px; }
.kr-paire--hro { margin-top: 24px; }
.kr-paire--hro .kr-btn { min-height: 74px; padding-inline: 40px; font-size: 18px; }
.kr-paire--hrp { margin-top: 28px; }
.kr-paire--hrp .kr-btn { min-height: 66px; }
/* Bandeau de tete : le couple appel + devis (regle 7) remplace le bouton
   unique d origine. Il tient dans la meme place que lui — donc boutons plus
   courts, sans retour a la ligne qui casserait la hauteur du bandeau. */
/* REGLE 7 en format de CARTE : la paire tient sur une ligne, deux boutons
   courts a hauteur commune. Une carte de prix ou de produit est un point de
   conversion — l appel y va a cote du devis comme partout ailleurs, mais sans
   prendre la place de deux boutons pleins. */
.kr-paire--crt { gap: 8px; flex-wrap: nowrap; }
.kr-paire--crt .kr-btn {
  flex: 1 1 0; min-width: 0;
  min-height: 46px; padding-inline: 12px;
  font-size: 14px; justify-content: center; text-align: center;
}
.kr-paire--hd { order: 3; gap: 10px; flex-wrap: nowrap; }
.kr-paire--hd .kr-btn { min-height: 52px; padding-inline: 22px; font-size: 15px; white-space: nowrap; }

/* ---- vues --------------------------------------------------- */

.kr-vue {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: var(--fond-2);
  min-height: 180px;
}
.kr-vue img { width: 100%; height: 100%; object-fit: cover; }
.kr-vue--nue {
  display: flex; align-items: center; justify-content: center;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 40px; font-weight: 700;
  color: var(--texte-doux);
  background: var(--fond-2);
}

/* ---- coches et jetons --------------------------------------- */

.kr-coche { width: 17px; height: 12px; flex: 0 0 17px; color: var(--marque); margin-top: 8px; }
.kr-chv { width: 18px; height: 18px; flex: 0 0 18px; }
.kr-flc { width: 18px; height: 18px; flex: 0 0 18px; }

.kr-pts { display: grid; gap: 12px; margin-top: 20px; }
.kr-pts li { display: flex; gap: 14px; align-items: flex-start; }
.kr-pts li span { min-width: 0; }
.kr-pts--min { gap: 8px; margin-top: 14px; font-size: 15px; }
.kr-pts--art { margin: 18px 0; }

.kr-jts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.kr-jts li {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--texte-doux);
  background: var(--fond-2);
}

/* T4 — chaque bloc a SON marqueur. La coche ambre reste la signature de
   whyUs ; les inclus d une carte de prix prennent un filet court, l encadre
   « a retenir » prend un trait de marge. Trois listes, trois lectures. */
.kr-inc { display: grid; gap: 10px; margin-top: 20px; }
.kr-inc li { display: flex; gap: 12px; align-items: baseline; }
.kr-inc__f {
  flex: 0 0 14px; height: 1px; margin-top: 11px;
  background: var(--marque); opacity: .85;
}
.kr-inc__x { min-width: 0; font-size: 15px; color: var(--texte-doux); }

.kr-ret {
  margin-top: 20px; padding: 14px 18px;
  border-left: 3px solid var(--marque);
  background: var(--fond-2);
  border-radius: 0 10px 10px 0;
}
.kr-ret__t {
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700;
  font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--marque);
}
.kr-ret__l { margin-top: 10px; display: grid; gap: 6px; }
.kr-ret__l li { font-size: 15px; color: var(--texte-doux); }

.kr-jts--prd { margin-top: 10px; padding: 0 8px; }

/* ---- barre de tete ------------------------------------------ */

.kr-hd { position: relative; z-index: 40; background: var(--fond); }
.kr-hd__in {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  /* F1 — l entete du modele fait QUATRE-VINGT-HUIT EN TOUT. Les liens de la
     barre portaient deja cette hauteur en padding (c est d eux que pend le
     volet), et la barre y ajoutait ses douze de marge : cent huit au total,
     assez pour que la pilule d appel descende sous la premiere rangee de la
     fenetre et vole a la matiere une rangee que le modele lui donne. La
     hauteur est donc portee une seule fois, ici. */
  min-height: 88px;
}
.kr-hd__mq {
  order: 1;
  margin-right: auto;
  min-width: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -.03em;
}
.kr-nav { order: 2; min-width: 0; position: relative; }
.kr-hd__cta { order: 3; }
.kr-hd__cle {
  order: 4;
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0 11px;
  border-radius: 8px;
  background: var(--fond-2);
  box-shadow: 0 4px 0 0 rgba(0, 0, 0, .15);
  cursor: pointer;
}
.kr-hd__cle > span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: var(--texte);
}
.kr-hd__int {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* F1 — la HAUTEUR DE LA BARRE est portee par les articles de la liste, le
   MOT ne prend que sa ligne. Quand le lien lui-meme faisait les quatre-vingt-
   huit, sa boite mordait sur la premiere rangee de la fenetre et la mesure y
   lisait du texte la ou le modele ne montre que le fond de l entete. L
   article reste plein cadre : c est de lui que pend le volet, la souris ne
   traverse aucun vide en descendant. */
.kr-nav__l { display: flex; align-items: stretch; gap: 26px; flex-wrap: wrap; }
/* `align-items: center` centrait la LISTE dans la barre : l article ne faisait
   plus que la hauteur du mot, cinquante-deux au lieu de quatre-vingt-huit, et
   le volet — qui pend a `top: 100%` de `.kr-nav` — s ouvrait dix-huit pixels
   sous lui. La souris traversait ce vide et le volet se fermait. La liste prend
   la barre entiere ; le mot, lui, reste centre dans son article et ne grandit
   pas : F1 lit toujours du fond dans la premiere rangee de la fenetre. */
.kr-nav { align-self: stretch; display: flex; align-items: stretch; }
.kr-nav__e { position: relative; display: flex; align-items: center; }
.kr-nav__a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 14px 0;
  font-size: 14px;
  letter-spacing: 1px;
  font-weight: 600;
  text-transform: uppercase;
}
.kr-nav__a:hover { color: var(--marque); }
.kr-nav__a--vol .kr-chv { transition: transform .18s; }

/* Le volet illustre. Le decalage sous le lien est pris en PADDING,
   jamais en marge : la souris ne quitte pas le volet en descendant. */
.kr-nav__e--vol { position: static; }
.kr-vol {
  position: absolute;
  right: 0; left: auto;
  top: 100%;
  padding-top: 10px;
  z-index: 50;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.kr-vol__in {
  display: flex;
  gap: 28px;
  width: max-content;
  max-width: min(92vw, 920px);
  min-width: 480px;
  padding: 26px;
  border-radius: 16px;
  background: var(--fond);
  box-shadow: inset 0 0 0 1px var(--bordure), 0 4px 32px rgba(0, 0, 0, .12);
}
.kr-nav__e--vol:hover > .kr-vol,
.kr-nav__e--vol:focus-within > .kr-vol,
.kr-nav__e--vol[data-ouvert] > .kr-vol {
  visibility: visible; opacity: 1; pointer-events: auto;
}
.kr-nav__e--vol:hover > .kr-nav__a .kr-chv { transform: rotate(180deg); }
.kr-vol__vt { flex: 0 0 244px; min-width: 0; }
.kr-vue--vt { height: 152px; min-height: 0; }
.kr-vol__vtt { margin-top: 12px; font-weight: 600; font-size: 15px; }
.kr-vol__vtx { font-size: 13px; color: var(--texte-doux); line-height: 1.6; }
.kr-vol__cs { display: flex; gap: 28px; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
.kr-vol__c { flex: 1 1 170px; min-width: 0; }
.kr-vol__c li + li { margin-top: 9px; }
.kr-vol__c a { font-size: 15px; color: var(--texte-doux); }
.kr-vol__c a:hover { color: var(--marque); }

/* ---- fil d ariane -------------------------------------------- */

.kr-ari { padding: 20px 0 0; font-size: 14px; color: var(--texte-doux); }
.kr-ari ol { display: flex; flex-wrap: wrap; gap: 8px; }
.kr-ari li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.kr-ari i { font-style: normal; opacity: .5; }
.kr-ari a:hover { color: var(--marque); }

/* ---- hero : le mot a gauche, la CASE a droite -------------------
   La scene sombre est portee par la SECTION, pas par la photo : elle tient
   donc l encre blanche meme quand aucune vue n est versee. Voir la note de
   `hero()` dans sections.mjs. */

.kr-s--hero {
  /* Le SOL de l affiche, tenu a vide. Le modele (roofer.framer.website) ouvre
     sur une scene pleine fenetre AVEC une case a droite : ce n est pas l un ou
     l autre. Le sol est donc double — cet aplat profond, qui existe seul quand
     la fabrique n a verse aucune photo, et par-dessus lui le cadre porteur
     `kr-vue--herofond` quand elle en verse une. Quelle que soit la teinte
     versee, 26 % melanges dans du presque-noir restent sombres. */
  background:
    linear-gradient(100deg,
      color-mix(in srgb, var(--marque) 26%, #0C0E10) 0%,
      #0C0E10 62%);
  /* L encre du hero ne vient PAS de la palette : elle est posee sur un voile
     sombre fixe, elle est donc blanche quelle que soit la couleur de marque
     que la fabrique versera. */
  --sur-image: #FFFFFF;
  --sur-image-doux: rgba(255, 255, 255, .84);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  /* La fenetre entiere, moins l entete : c est la mesure du modele. */
  min-height: min(812px, calc(100svh - 88px));
  /* Le retrait ne se pose plus sur la rangee entiere mais sur le MOT SEUL : le
     modele fait monter sa scene jusqu au bord haut de la fenetre, derriere
     l entete, et n abaisse que la colonne de texte. Une rangee qui descend les
     deux colonnes ensemble ouvre l affiche sur une bande vide et perd la
     premiere rangee de matiere a la mesure (F1). */
  padding: 0 0 48px;
}

/* ---- le cadre porteur de l affiche (R5c) --------------------- */

/* Pose hors flux en `inset: 0` : il n a pas de forme a lui, sa forme est celle
   de la section. Il passe SOUS la rangee (z-index 1 sur `.kr-hro`) et sous un
   voile, pour que l encre blanche du mot tienne sur n importe quelle photo que
   la fabrique versera. */
.kr-vue--herofond { position: absolute; inset: 0; z-index: 0; }
/* Le voile ne se pose QUE quand une photo est versee : a vide il n y a rien a
   assombrir, et l aplat de la section resterait sinon ecrase de deux crans. */
.kr-s--hero:has([data-slot="kr-vue--herofond"] img)::after,
.kr-s--hero:has([data-slot="kr-vue--herofond"] video)::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(100deg,
    rgba(8, 10, 12, .86) 0%, rgba(8, 10, 12, .72) 46%, rgba(8, 10, 12, .58) 100%);
  pointer-events: none;
}
/* A VIDE, le cadre porteur SE TAIT : il reprend l aplat presque-noir de sa
   section et n ecrit pas sa legende — elle passerait en travers du titre (c est
   exactement la collision « EMPLACEMENT VISUEL » qu on avait ici). Le libelle
   reste porte par le `title` et l `aria-label`.
   L etat VIDE de ce cadre se peint plus bas, dans la section « teinte des
   cadres porteurs » : a specificite egale c est le dernier qui gagne, et la
   regle generique `[data-slot]:not(:has(img))` y vit. Ecrite ici, elle etait
   ecrasee et le cadre repassait en gris clair — R4b declarait alors l encre
   blanche du hero illisible a 1.22 sur un sol qui est en fait presque noir. */
.kr-vue--herofond img { width: 100%; height: 100%; object-fit: cover; }

.kr-hro__g { padding-top: clamp(88px, 8vw, 116px); }
.kr-hro__d { padding-top: clamp(20px, 2vw, 28px); }
.kr-hro__d { position: relative; z-index: 1; min-width: 0; }
.kr-hro {
  position: relative; z-index: 1; width: min(100% - 40px, 1280px);
  display: grid;
  /* Les sept douziemes de droite : le modele n a pas une vignette posee a cote
     du mot, il a une scene large. C est la meme mesure que plumfixx. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 52%);
  gap: clamp(28px, 4vw, 52px);
  /* La case prend EXACTEMENT la hauteur du mot : c est ainsi qu elle ne peut
     jamais faire deborder l affiche, quelle que soit la longueur du titre que
     la fabrique versera. Une forme fixe, elle, aurait tot ou tard depasse. */
  align-items: stretch;
}
.kr-hro__g { min-width: 0; max-width: 760px; color: var(--sur-image); }
/* Entre le palier et le grand ecran, la case rend deux douziemes au mot : a
   1024px la colonne de texte tombait sous 420px, le titre y passait a cinq
   lignes et l affiche cessait de tenir dans une fenetre. */
@media (max-width: 1240px) {
  .kr-hro { grid-template-columns: minmax(0, 1fr) minmax(0, 44%); }
  /* Le corps suit la colonne, il ne la subit pas : a 1024px un titre de huit
     mots passait a cinq lignes et poussait la bande de preuve hors de la
     fenetre. Meme raison qu au grand ecran, un cran plus bas. */
  .kr-hro__t { font-size: clamp(30px, 2.9vw, 44px); }
  .kr-hro__g { padding-top: 72px; }
  /* Le duo appeler + devis reste cote a cote (regle 7) : a ce corps-la il
     passait a la ligne et volait quatre-vingt-dix pixels a l affiche. */
  .kr-paire--hro .kr-btn { min-height: 60px; padding-inline: 26px; font-size: 16px; }
}

/* T5 — le titre partage desormais la rangee avec la case : soixante-quatre
   pixels de corps, pas soixante-dix-huit, sinon le mot seul mange l ecran. */
.kr-hro__t { font-size: clamp(34px, 3.4vw, 50px); line-height: 1.06; letter-spacing: -.01em; }
.kr-hro__s { margin-top: 12px; font-size: 18px; line-height: 1.65; color: var(--sur-image-doux); max-width: 620px; }

/* La case n a PAS de forme propre : elle epouse la hauteur du mot. Le plancher
   garantit qu elle reste une case meme derriere un titre tres court. */
.kr-vue--hro {
  width: 100%;
  height: 100%;
  min-height: 340px;
  border-radius: 8px;
}

/* La file d avatars se CHEVAUCHE, puis la preuve se lit a cote. */
/* La preuve se resserre : c est le dernier bloc de l affiche, et c est lui
   qui decidait jusqu ici du debordement sous la ligne de flottaison. */
/* L encre sur sol sombre appartient au GABARIT, pas a la colonne : `--sur-image`
   etait pose sur `.kr-hro__g` seul, or la bande de preuve est sa SOEUR (elle
   traverse la rangee en `grid-column: 1 / -1`). Son libelle gras heritait donc
   de l encre presque-noire du corps de page et se posait sur l aplat
   presque-noir de l affiche — illisible a 1.24 (R4b). C est la section qui est
   sombre, c est donc a la rangee de porter l encre claire. */
.kr-hro__pr { grid-column: 1 / -1; color: var(--sur-image); display: flex; flex-wrap: wrap; gap: 16px 26px; align-items: center; margin-top: clamp(24px, 2.6vw, 36px); }
.kr-hro__av { display: flex; flex: 0 0 auto; }
.kr-hro__av li {
  width: 55px; height: 55px;
  border-radius: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  color: var(--sur-marque);
  background: var(--marque);
  box-shadow: inset 0 0 0 3px var(--fond);
}
.kr-hro__av li + li { margin-left: -24px; }
.kr-hro__prt { display: flex; flex-wrap: wrap; gap: 18px 34px; flex: 1 1 260px; min-width: 0; }
.kr-hro__at { flex: 1 1 200px; min-width: 0; }
.kr-hro__att { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 17px; line-height: 1.3; }
.kr-hro__atx { margin-top: 2px; font-size: 14px; line-height: 1.5; color: var(--sur-image-doux); }
/* Regle 7 sur une photo : le second appel ne peut pas etre un fantome. Il
   garde son anneau, mais en blanc, sur un fond translucide qui tient sur une
   scene claire comme sur une scene sombre. */
.kr-s--hero .kr-btn--clair {
  background: rgba(255, 255, 255, .14);
  color: var(--sur-image);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .72), 0 4px 0 0 rgba(0, 0, 0, .22);
}

/* ---- page interne : AUCUN bandeau, titre pleine largeur ------ */

.kr-s--heroplat { padding: 36px 0 56px; }
.kr-hrp__t { font-size: clamp(30px, 4.4vw, 64px); line-height: 1.15; letter-spacing: -.008em; }
.kr-hrp__s { margin-top: 20px; font-size: 18px; color: var(--texte-doux); max-width: 760px; }
.kr-hrp__at { display: flex; flex-wrap: wrap; gap: 22px 36px; margin-top: 34px; }
.kr-hrp__at > li { flex: 1 1 240px; min-width: 0; }
.kr-hrp__att { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 18px; }
.kr-hrp__atx { font-size: 15px; color: var(--texte-doux); }
.kr-vue--hrp { margin-top: 40px; height: clamp(200px, 30vw, 400px); }

/* ---- intro ---------------------------------------------------- */

.kr-itr { display: flex; flex-wrap: wrap; gap: 24px 64px; }
.kr-itr__t { flex: 1 1 420px; min-width: 0; font-size: clamp(26px, 3vw, 40px); letter-spacing: -.038em; }
.kr-itr__x { flex: 1 1 480px; min-width: 0; color: var(--texte-doux); }
.kr-itr__x .kr-txt + .kr-txt { margin-top: 16px; }

/* ---- services : tete a GAUCHE, grille a DROITE ---------------- */

.kr-svcs { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.kr-svcs__g { flex: 1 1 520px; min-width: 0; max-width: 560px; }
.kr-svcs__g .kr-btn { margin-top: 34px; }
.kr-svcs__d { flex: 1 1 520px; min-width: 0; display: flex; flex-wrap: wrap; gap: 26px 50px; }
.kr-svc { flex: 0 1 calc((100% - 50px) / 2); min-width: 0; display: block; }

/* Au-dela de six prestations, la colonne de droite passe en RAIL : deux
   cartes visibles, calage par scroll-snap, deux fleches. Meme carte, meme
   colonne — c est la mise en ligne qui change, pas le dessin. */
.kr-svcs__d--rail { display: block; }
.kr-rail__p {
  display: flex; flex-wrap: nowrap; gap: 26px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; padding-bottom: 4px;
}
.kr-rail__p::-webkit-scrollbar { display: none; }
.kr-rail__p > .kr-svc { flex: 0 0 calc((100% - 26px) / 2); scroll-snap-align: start; }
.kr-rail__b { display: flex; align-items: center; gap: 24px; margin-top: 22px; }
.kr-rail__j { flex: 1 1 auto; height: 2px; background: var(--bordure); border-radius: 2px; overflow: hidden; }
.kr-rail__ji { display: block; height: 100%; width: 50%; background: var(--marque); border-radius: 2px; transition: width .25s ease, margin-left .25s ease; }
.kr-rail__f { display: flex; gap: 10px; flex: 0 0 auto; }
.kr-rail__fb {
  width: 44px; height: 44px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--bordure);
  background: var(--fond); color: var(--texte);
  font-size: 20px; line-height: 1; display: grid; place-items: center; cursor: pointer;
}
.kr-rail__fb:hover { background: var(--marque); color: var(--sur-marque); }
.kr-rail__fb[disabled] { opacity: .35; cursor: default; }
.kr-rail__fb[disabled]:hover { background: var(--fond); color: var(--texte); }
/* La reference posait ici une ICONE de 32 px. La fabrique, elle, ne livre pas
   d icones : elle livre des PHOTOS, minimum 900 px de large — c est ce que dit
   le contrat, `kr-vue--svc` : ratio 1.5, min 900. Les deux se contredisaient,
   et la contradiction ne se voyait pas : la fixture de demo ne portait aucune
   photo de service, donc le cadre restait vide et gardait sa taille d icone.
   En production la photo arrivait et se faisait ecraser dans 32 px.
   L emplacement commande : il devient une bande de carte, a la largeur de la
   carte, au ratio declare. */
.kr-vue--svc {
  width: 100%; height: auto; aspect-ratio: 3 / 2; min-height: 0;
  border-radius: 8px;
  background: var(--fond-2);
}
.kr-vue--svc.kr-vue--nue { font-size: 34px; }
.kr-svc__t { margin-top: 18px; font-size: 20px; letter-spacing: -.02em; }
.kr-svc__x { margin-top: 10px; font-size: 15px; color: var(--texte-doux); }
.kr-svc__l { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-weight: 600; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: var(--marque); }
.kr-svc:hover .kr-svc__t { color: var(--marque); }

/* ---- blocs SEO : alternance imposee par la coquille ----------- */

/* L ecart entre blocs se resserre : c est desormais la bascule de fond qui
   separe, pas le vide. */
.kr-bsqs { display: grid; gap: 44px; }
.kr-bsq { display: flex; flex-wrap: wrap; gap: 32px 64px; align-items: center; }
.kr-bsq__g { flex: 1 1 440px; min-width: 0; }
.kr-bsq__d { flex: 1 1 400px; min-width: 0; }
.kr-bsq--inv .kr-bsq__g { order: 2; }
.kr-bsq--inv .kr-bsq__d { order: 1; }
.kr-bsq__t { font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -.035em; }

/* DESSIN DE LECTURE DU PAVE SEO — le texte n est jamais raccourci, il est
   rendu lisible. Colonne bornee a 34em : au-dela, l oeil rate le retour a la
   ligne suivante et le bloc se lit comme un mur. */
.kr-bsq__p { margin-top: 18px; max-width: 34em; color: var(--texte-doux); }
/* Attaque : le premier paragraphe porte la voix du bloc, les suivants
   redescendent. Chaque bloc a ainsi un point d entree au lieu d un pave egal. */
.kr-bsq__p--att { font-size: 17px; line-height: 1.72; color: var(--texte); }
.kr-bsq__g .kr-btn { margin-top: 26px; }
/* Bascule de fond un bloc sur deux : la longue coulee se lit alors en
   morceaux tenables au lieu d une seule descente. Le creme est la variable de
   palette de la fabrique, jamais une couleur ecrite en dur. */
.kr-bsq--creme {
  padding: 26px 32px;
  background: var(--fond-2);
  border-radius: 18px;
}
/* Sur le fond creme, l encadre inverse : sans cela il disparait dans son
   propre fond et la respiration ne se voit plus. */
.kr-bsq--creme .kr-ret { background: var(--fond); }
.kr-vue--bsq { height: clamp(240px, 30vw, 420px); }

/* ---- expertise : vue a gauche, propos a droite ---------------- */

.kr-exp { display: flex; flex-wrap: wrap; gap: 36px 64px; align-items: center; }
.kr-exp__d { flex: 1 1 420px; min-width: 0; order: 1; }
.kr-exp__g { flex: 1 1 460px; min-width: 0; order: 2; }
.kr-exp__t { font-size: clamp(26px, 3vw, 40px); letter-spacing: -.038em; }
.kr-exp__x { margin-top: 18px; color: var(--texte-doux); }
.kr-exp__x + .kr-exp__x { margin-top: 14px; }
.kr-exp__l { display: grid; gap: 18px; margin-top: 26px; }
.kr-exp__pt { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 18px; }
.kr-exp__px { font-size: 15px; color: var(--texte-doux); }
.kr-exp__g .kr-btn { margin-top: 30px; }
.kr-vue--exp { height: clamp(260px, 34vw, 500px); }

/* ---- chiffres : poses a meme le fond, sans carte -------------- */

.kr-chf { display: flex; flex-wrap: wrap; gap: 32px 56px; }
.kr-chf li { flex: 1 1 200px; min-width: 0; }
.kr-chf__v { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: clamp(34px, 4vw, 56px); letter-spacing: -.04em; color: var(--marque); }
.kr-chf__l { font-size: 15px; color: var(--texte-doux); }

/* ---- process : collage de trois vues INEGALES ---------------- */

.kr-prc { display: flex; flex-wrap: wrap; gap: 48px 64px; align-items: flex-start; }
.kr-prc__clg {
  flex: 1 1 460px; min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.kr-vue--clg { min-height: 0; }
.kr-vue--clg1 { grid-column: 1 / -1; height: clamp(180px, 22vw, 291px); }
.kr-vue--clg2 { height: clamp(220px, 28vw, 404px); }
.kr-vue--clg3 { height: clamp(160px, 20vw, 290px); align-self: end; }
.kr-prc__d { flex: 1 1 460px; min-width: 0; }
.kr-prc__l { display: grid; gap: 30px; margin-top: 36px; }
.kr-prc__e { display: flex; gap: 22px; align-items: flex-start; }
.kr-prc__n {                                    /* le numero est NU */
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: var(--marque);
  flex: 0 0 auto;
  min-width: 28px;
}
.kr-prc__c { min-width: 0; }
.kr-prc__t { font-size: 20px; letter-spacing: -.02em; }
.kr-prc__x { margin-top: 8px; font-size: 15px; color: var(--texte-doux); }

/* ---- urgence : une seule ligne -------------------------------- */

.kr-s--urgence { padding: 56px 0; }
.kr-urg {
  display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: center;
  padding: 34px 40px;
  border-radius: 16px;
  background: var(--fond-2);
  box-shadow: 0 4px 0 0 rgba(0, 0, 0, .15);
}
.kr-urg__g { flex: 1 1 420px; min-width: 0; }
.kr-urg__d { flex: 0 1 auto; min-width: 0; }
.kr-urg__t { font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -.035em; }
.kr-urg__x { margin-top: 10px; color: var(--texte-doux); }
.kr-pts--urg { margin-top: 0; margin-bottom: 18px; }

/* ---- avis : deux cartes larges, sceau au bord droit ---------- */

.kr-avi__cp { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: clamp(34px, 4vw, 56px); letter-spacing: -.04em; }
.kr-avi__cl { font-size: 15px; letter-spacing: 1px; text-transform: uppercase; color: var(--texte-doux); }
.kr-avi { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 44px; }
.kr-avi__c {
  flex: 1 1 460px; min-width: 0;
  padding: 30px 34px;
  border-radius: 16px;
  background: var(--fond-2);
}
.kr-avi__h { display: flex; align-items: center; gap: 16px; }
.kr-avi__av {
  width: 70px; height: 70px; flex: 0 0 70px;
  border-radius: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 24px;
  color: var(--sur-marque);
  background: var(--marque);
}
.kr-avi__id { min-width: 0; margin-right: auto; }
.kr-avi__nm { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 18px; }
.kr-avi__rl { font-size: 15px; color: var(--texte-doux); }
.kr-avi__sc { flex: 0 0 auto; letter-spacing: 3px; color: var(--marque); }
.kr-avi__t { margin-top: 20px; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 18px; }
.kr-avi__x { margin-top: 10px; color: var(--texte-doux); }

/* ---- whyUs : la vue sort du cadre par la GAUCHE -------------- */

.kr-s--why { overflow: hidden; }
.kr-why { display: flex; flex-wrap: wrap; gap: 40px 64px; align-items: center; }
.kr-why__g { flex: 1 1 420px; min-width: 0; position: relative; }
.kr-why__d { flex: 1 1 520px; min-width: 0; }
.kr-vue--why { height: clamp(280px, 36vw, 584px); }
.kr-why__l { display: grid; gap: 22px; margin-top: 34px; }
.kr-why__l > li { display: flex; gap: 16px; align-items: flex-start; }
.kr-why__l > li > div { min-width: 0; }
/* Titre et phrase courent SUR LE MEME FIL (forme relevee sur la reference) :
   le gras porte le rythme, la coche ne se repete qu une fois par atout. */
.kr-why__p { min-width: 0; font-size: 16px; line-height: 1.65; }
.kr-why__t { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 18px; }
.kr-why__x { font-size: 16px; color: var(--texte-doux); }

/* ---- file de marques ----------------------------------------- */

.kr-s--marques { padding: 40px 0; overflow: hidden; }
.kr-mrq { display: flex; gap: 56px; width: max-content; }
.kr-mrq__f { display: flex; gap: 56px; flex: 0 0 auto; min-width: 0; }
.kr-mrq__f li {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -.02em;
  color: var(--texte-doux);
  white-space: nowrap;
}

/* ---- secteurs ------------------------------------------------- */

.kr-scts { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 44px; }
.kr-sct {
  flex: 1 1 300px; min-width: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--fond-2);
}
.kr-vue--sct { height: 220px; border-radius: 0; }
.kr-sct__c { padding: 24px 26px 28px; }
.kr-sct__m { font-size: 14px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; color: var(--marque); }
.kr-sct__t { margin-top: 8px; font-size: 20px; letter-spacing: -.02em; }
.kr-sct__x { margin-top: 10px; font-size: 15px; color: var(--texte-doux); }

/* ---- certifications ------------------------------------------- */

.kr-cer { display: flex; flex-wrap: wrap; gap: 40px 64px; align-items: flex-start; }
.kr-cer__g { flex: 1 1 420px; min-width: 0; }
.kr-cer__p { margin-top: 18px; color: var(--texte-doux); }
.kr-cer__l { flex: 1 1 480px; min-width: 0; display: flex; flex-wrap: wrap; gap: 20px; }
.kr-cer__i {
  flex: 1 1 220px; min-width: 0;
  padding: 22px 24px;
  border-radius: 16px;
  background: var(--fond);
  box-shadow: inset 0 0 0 1px var(--bordure), 0 4px 0 0 rgba(0, 0, 0, .15);
}
.kr-cer__t { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 18px; }
.kr-cer__x { margin-top: 6px; font-size: 15px; color: var(--texte-doux); }

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

.kr-zons { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 44px; }
.kr-zon { flex: 1 1 240px; min-width: 0; }
.kr-zon a { display: block; }
.kr-vue--zon { height: 180px; }
.kr-zon__t { display: block; margin-top: 14px; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 18px; }
.kr-zon__g { display: block; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: var(--texte-doux); }
.kr-zon a:hover .kr-zon__t { color: var(--marque); }

/* ---- plaque d adresse POSEE SUR la vue ------------------------ */

.kr-map { position: relative; }
.kr-vue--map { height: clamp(300px, 34vw, 480px); }
.kr-map__pl {
  position: absolute;
  left: 24px; bottom: 24px;
  max-width: min(92%, 420px);
  padding: 24px 26px;
  border-radius: 16px;
  background: var(--fond);
  box-shadow: 0 4px 0 0 rgba(0, 0, 0, .15);
}
.kr-map__t { display: block; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 20px; }
.kr-map__a { font-size: 15px; color: var(--texte-doux); }
.kr-jts--map { margin-top: 12px; }

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

.kr-mais { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 44px; }
.kr-mai { flex: 1 1 300px; min-width: 0; }
.kr-mai a { display: block; }
.kr-vue--mai { height: 200px; }
.kr-mai__m { display: block; margin-top: 14px; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: var(--marque); }
.kr-mai__t { display: block; margin-top: 6px; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 20px; }
.kr-mai__x { display: block; margin-top: 8px; font-size: 15px; color: var(--texte-doux); }
.kr-mai__l { display: inline-flex; margin-top: 14px; color: var(--marque); }

/* ---- facettes : file de pilules filtrantes -------------------- */

.kr-fct__t { font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -.038em; }
.kr-fct__l { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.kr-fct__a {
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding: 8px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  background: var(--fond);
  box-shadow: inset 0 0 0 1px var(--bordure), 0 4px 0 0 rgba(0, 0, 0, .15);
}
.kr-fct__a--on { background: var(--marque); color: var(--sur-marque); box-shadow: 0 4px 0 0 rgba(0, 0, 0, .15); }

/* ---- catalogue : cartes de produit --------------------------- */

.kr-prds__t { font-size: clamp(30px, 3.4vw, 40px); letter-spacing: -.038em; }
.kr-prds__c { margin-top: 16px; color: var(--texte-doux); max-width: 680px; }
.kr-prds { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 44px; }
.kr-prd {
  flex: 1 1 300px; min-width: 0;
  display: flex; flex-direction: column;
  padding: 16px 16px 22px;
  border-radius: 16px;
  background: var(--fond);
  box-shadow: inset 0 0 0 1px var(--bordure), 0 4px 0 0 rgba(0, 0, 0, .15);
}
.kr-vue--prd { height: 220px; }
.kr-prd__t { margin-top: 18px; padding: 0 8px; font-size: 20px; letter-spacing: -.02em; }
.kr-prd__x { margin-top: 8px; padding: 0 8px; font-size: 15px; color: var(--texte-doux); }
.kr-prd .kr-pts { padding: 0 8px; }
.kr-prd__pr { margin-top: auto; padding: 18px 8px 0; display: flex; align-items: baseline; gap: 8px; }
.kr-prd__prv { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 24px; letter-spacing: -.02em; }
.kr-prd__pru { font-size: 14px; color: var(--texte-doux); }
.kr-prd .kr-paire--crt { margin: 16px 8px 0; }

/* ---- fiche produit : bloc d achat POSE sur la vue ------------- */

.kr-fch { position: relative; display: flex; flex-wrap: wrap; gap: 28px 40px; align-items: flex-start; }
.kr-fch__g { flex: 1 1 560px; min-width: 0; }
.kr-vue--fch { height: clamp(280px, 40vw, 560px); }
.kr-fch__d {
  flex: 1 1 380px; min-width: 0;
  padding: 30px 32px;
  border-radius: 16px;
  background: var(--fond);
  box-shadow: 0 4px 0 0 rgba(0, 0, 0, .15);
}
.kr-fch__t { font-size: clamp(26px, 2.8vw, 36px); letter-spacing: -.038em; }
.kr-fch__c { margin-top: 14px; color: var(--texte-doux); }
/* Un prix est un chiffre, pas une phrase : il ne se coupe pas. Pose en
   element de rangee souple, il se laissait serrer a 110px et « 2 450 € »
   partait sur deux lignes. La rangee se replie (l unite passe dessous)
   et le chiffre garde son bloc. */
.kr-fch__pr { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.kr-fch__prv { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 34px; letter-spacing: -.03em; color: var(--marque); white-space: nowrap; }
.kr-fch__pru { font-size: 15px; color: var(--texte-doux); }
.kr-fch__d .kr-paire--fch { margin-top: 22px; }
.kr-fch__d .kr-paire--fch .kr-btn { flex: 1 1 160px; justify-content: center; }
.kr-fch__m { margin-top: 12px; font-size: 14px; color: var(--texte-doux); }

/* ---- specs : table de definitions ---------------------------- */

.kr-spc__t { font-size: clamp(26px, 2.8vw, 36px); letter-spacing: -.038em; }
.kr-spc { display: flex; flex-wrap: wrap; gap: 0; margin-top: 30px; }
.kr-spc__i {
  flex: 1 1 320px; min-width: 0;
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  padding: 18px 4px;
  box-shadow: inset 0 -1px 0 0 var(--bordure);
}
.kr-spc__i dt { flex: 1 1 160px; min-width: 0; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: var(--texte-doux); }
.kr-spc__i dd { flex: 1 1 140px; min-width: 0; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; }

/* ---- realisations : collage a trois hauteurs ----------------- */

.kr-reas { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 44px; }
.kr-rea { flex: 1 1 300px; min-width: 0; }
.kr-vue--rea { height: 300px; }
.kr-rea--1 .kr-vue--rea { height: 340px; }
.kr-rea--3 .kr-vue--rea { height: 262px; }
.kr-rea__c { margin-top: 18px; }
.kr-rea__m { font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: var(--marque); }
.kr-rea__t { margin-top: 6px; font-size: 20px; letter-spacing: -.02em; }
.kr-rea__x { margin-top: 8px; font-size: 15px; color: var(--texte-doux); }

/* ---- materiaux ------------------------------------------------ */

.kr-mats { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 44px; }
.kr-mat { flex: 1 1 240px; min-width: 0; }
.kr-vue--mat { height: 190px; }
.kr-mat__t { margin-top: 16px; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 18px; }
.kr-mat__x { margin-top: 6px; font-size: 15px; color: var(--texte-doux); }

/* ---- avant / apres : vues SUPERPOSEES et curseur en overlay --- */

.kr-abs { display: flex; flex-wrap: wrap; gap: 34px; margin-top: 44px; }
.kr-ab { flex: 1 1 420px; min-width: 0; }
.kr-ab__v { position: relative; border-radius: 16px; overflow: hidden; }
.kr-ab__f { position: relative; margin: 0; }
.kr-ab__f--b { position: absolute; inset: 0; clip-path: polygon(var(--pos) 0, 100% 0, 100% 100%, var(--pos) 100%); }
.kr-vue--ab { height: clamp(240px, 32vw, 420px); border-radius: 0; }
.kr-ab__f figcaption {
  position: absolute;
  top: 16px;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  background: var(--fond);
  color: var(--texte);
}
.kr-ab__f--a figcaption { left: 16px; }
.kr-ab__f--b figcaption { right: 16px; }
.kr-ab__ax {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos);
  width: 3px;
  margin-left: -1.5px;
  background: var(--fond);
  pointer-events: none;
}
.kr-ab__ax::after {                      /* la poignee ronde sur l axe */
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 46px; height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 100%;
  background: var(--fond);
  box-shadow: 0 4px 0 0 rgba(0, 0, 0, .15);
}
.kr-ab__lb {
  position: absolute;
  left: 16px; bottom: 16px;
  max-width: calc(100% - 32px);
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 14px; font-weight: 600;
  background: var(--marque);
  color: var(--sur-marque);
}
.kr-ab__r {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.kr-ab__r:focus-visible { outline: none; }
.kr-ab__v:focus-within .kr-ab__ax::after { box-shadow: 0 0 0 4px var(--marque); }
.kr-ab__t { margin-top: 18px; }
.kr-ab__x { color: var(--texte-doux); }

/* ---- tarifs --------------------------------------------------- */

.kr-trfs { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 44px; }
.kr-trf {
  flex: 1 1 300px; min-width: 0;
  display: flex; flex-direction: column;
  padding: 30px 32px;
  border-radius: 16px;
  background: var(--fond);
  box-shadow: inset 0 0 0 1px var(--bordure), 0 4px 0 0 rgba(0, 0, 0, .15);
}
.kr-trf__t { font-size: 20px; letter-spacing: -.02em; }
.kr-trf__x { margin-top: 10px; font-size: 15px; color: var(--texte-doux); }
.kr-trf__pr { margin-top: 20px; display: flex; align-items: baseline; gap: 8px; }
.kr-trf__prv { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 34px; letter-spacing: -.03em; color: var(--marque); }
.kr-trf__pru { font-size: 14px; color: var(--texte-doux); }
.kr-trf .kr-paire--crt { margin-top: auto; }
.kr-trf .kr-pts { margin-bottom: 24px; }
.kr-trfs__m { margin-top: 22px; font-size: 14px; color: var(--texte-doux); }

/* ---- aides ---------------------------------------------------- */

.kr-aids { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 44px; }
.kr-aid {
  flex: 1 1 300px; min-width: 0;
  padding: 26px 28px;
  border-radius: 16px;
  background: var(--fond-2);
}
.kr-aid__t { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 18px; }
.kr-aid__x { margin-top: 10px; font-size: 15px; color: var(--texte-doux); }
.kr-aid__c { margin-top: 12px; font-size: 14px; color: var(--texte-doux); }
.kr-aids__m { margin-top: 22px; font-size: 14px; color: var(--texte-doux); }

/* ---- faq : entetes en RETRAIT, chevron au bord droit --------- */

.kr-faq { margin-top: 44px; }
.kr-faq__i { padding: 0 0 0 0; }
.kr-faq__i + .kr-faq__i { box-shadow: inset 0 1px 0 0 var(--bordure); }
.kr-faq__i > summary {
  display: flex; align-items: center; gap: 24px;
  padding: 26px clamp(0px, 4vw, 138px) 26px clamp(0px, 6vw, 200px);
  cursor: pointer;
  list-style: none;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -.02em;
}
.kr-faq__i > summary::-webkit-details-marker { display: none; }
.kr-faq__i > summary > span { flex: 1 1 auto; min-width: 0; }
.kr-faq__i > summary .kr-chv { flex: 0 0 18px; width: 18px; height: 18px; transition: transform .2s ease; }
.kr-faq__i[open] > summary .kr-chv { transform: rotate(180deg); }
.kr-faq__r { padding: 0 clamp(0px, 4vw, 138px) 26px clamp(0px, 6vw, 200px); color: var(--texte-doux); }
.kr-faq__r .kr-txt + .kr-txt { margin-top: 12px; }
.kr-faq__e {
  display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: center;
  margin-top: 34px;
  padding: 28px 32px;
  border-radius: 16px;
  background: var(--fond-2);
}
.kr-faq__et { flex: 1 1 320px; min-width: 0; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 20px; }
.kr-faq__ex { flex: 1 1 280px; min-width: 0; color: var(--texte-doux); }
.kr-faq__e .kr-btn { flex: 0 0 auto; }

/* ---- bande d appel : vue en PLEINE largeur derriere ----------- */

.kr-s--cta {
  position: relative; padding: 120px 0; overflow: hidden;
  /* Le SOL SOMBRE de la bande appartient au GABARIT, pas a la donnee.
     Il etait porte par `.kr-vue--cta`, un cadre rendu seulement `if
     (d.visuel)` — et toute l encre de la bande est blanche en dur. Sans
     visuel dans la fixture, la section retombait sur le blanc du body :
     l eyebrow, le titre, le propos et les trois libelles de champ
     disparaissaient, et il ne restait a l ecran que deux boutons flottant
     dans le vide. Mesure : 1 contre 1.

     Meme faute que la regle 7 sous un autre habit — ce qui rend un bloc
     LISIBLE se tient dans le gabarit, jamais dans ce que le site versera.
     R4 le disait deja : le cadre vide et le cadre plein doivent tous deux
     tenir. Ici c est la SECTION qui doit tenir vide.

     La teinte reste celle que la fabrique injecte : `--marque` a 26 pour
     cent dans un presque-noir. Quelle que soit la couleur versee, le
     melange reste sombre et le blanc garde plus de 13 contre 1. Quand un
     visuel EST verse, il se pose par-dessus (`inset: 0`) avec son voile a
     55 pour cent, et rien ne change. */
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--marque) 26%, #0C0E10) 0%,
    #0C0E10 72%);
}
.kr-vue--cta { position: absolute; inset: 0; height: 100%; border-radius: 0; }
.kr-vue--cta::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .55);
}
.kr-cta { position: relative; display: flex; flex-wrap: wrap; gap: 32px 48px; align-items: center; }
.kr-cta__g { flex: 1 1 520px; min-width: 0; }
.kr-cta__d { flex: 0 1 auto; min-width: 0; }
.kr-s--cta .kr-lab, .kr-s--hero .kr-lab { color: rgba(255, 255, 255, .72); }
.kr-cta__t { font-size: clamp(30px, 4vw, 56px); letter-spacing: -.03em; color: #FFFFFF; }
.kr-cta__x { margin-top: 18px; max-width: 700px; color: rgba(255, 255, 255, .82); }
.kr-cta__f { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.kr-cta__ch { flex: 1 1 220px; min-width: 0; display: grid; gap: 6px; }
.kr-cta__ch label { font-size: 14px; color: rgba(255, 255, 255, .82); }
.kr-cta__ch input {
  width: 100%;
  min-height: 55px;
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  background: var(--fond);
  color: var(--texte);
}

/* ---- formulaire de contact : POSE SUR la vue ----------------- */

.kr-frm { display: flex; flex-wrap: wrap; gap: 40px 64px; align-items: flex-start; }
.kr-frm__g { flex: 1 1 420px; min-width: 0; }
.kr-frm__t { font-size: clamp(28px, 3.2vw, 40px); letter-spacing: -.038em; }
.kr-frm__x { margin-top: 16px; color: var(--texte-doux); }
.kr-frm__cds { display: flex; flex-wrap: wrap; gap: 24px 40px; margin-top: 34px; }
.kr-frm__cd { flex: 1 1 220px; min-width: 0; }
.kr-frm__cd p { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 17px; }
.kr-frm__d {
  flex: 1 1 452px; min-width: 0;
  padding: 30px 32px;
  border-radius: 16px;
  background: var(--fond);
  box-shadow: inset 0 0 0 1px var(--bordure), 0 4px 0 0 rgba(0, 0, 0, .15);
}
.kr-frm__f { display: flex; flex-wrap: wrap; gap: 16px; }
.kr-frm__ch { flex: 1 1 200px; min-width: 0; display: grid; gap: 6px; }
.kr-frm__ch label { font-size: 14px; color: var(--texte-doux); }
.kr-frm__ch input, .kr-frm__ch textarea {
  width: 100%;
  padding: 12px 18px;
  border: 0;
  border-radius: 10px;
  font: inherit;
  background: var(--fond-2);
  color: var(--texte);
}
.kr-frm__ch input { min-height: 50px; }
.kr-frm__ch textarea { min-height: 120px; resize: vertical; }
.kr-frm__ch:has(textarea) { flex: 1 1 100%; }
/* Le pied du formulaire porte DEUX portes — l appel et l envoi, cote a cote
   (regle 7). L envoi garde son rang de bouton principal ; l appel occupe la
   place qu il lui faut a sa gauche, et les deux se replient a plat quand la
   colonne est trop etroite. */
.kr-frm__pied { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.kr-frm__b { flex: 1 1 200px; justify-content: center; }
.kr-frm__m { flex: 1 1 100%; font-size: 14px; color: var(--texte-doux); }

/* ---- blog : cartes a vue en tete ----------------------------- */

.kr-blgs { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 44px; }
.kr-blg { flex: 1 1 340px; min-width: 0; }
.kr-blg a { display: block; }
.kr-vue--blg { height: 240px; }
.kr-blg__m { display: block; margin-top: 18px; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: var(--marque); }
.kr-blg__t { display: block; margin-top: 8px; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -.02em; }
.kr-blg__x { display: block; margin-top: 10px; font-size: 15px; color: var(--texte-doux); }
.kr-blg a:hover .kr-blg__t { color: var(--marque); }
.kr-blgs__c { margin-top: 40px; }

/* ---- article : sommaire a gauche, coulee a droite ------------ */

.kr-art__h { max-width: 900px; }
.kr-art__t { font-size: clamp(30px, 4vw, 56px); letter-spacing: -.02em; line-height: 1.12; }
.kr-art__m { margin-top: 14px; font-size: 15px; color: var(--texte-doux); }
.kr-vue--art { margin-top: 36px; height: clamp(220px, 32vw, 440px); }
.kr-art__b { display: flex; flex-wrap: wrap; gap: 40px 64px; margin-top: 44px; align-items: flex-start; }
.kr-art__sm {
  flex: 1 1 280px; min-width: 0;
  padding: 26px 28px;
  border-radius: 16px;
  background: var(--fond-2);
  position: sticky; top: 24px;
}
.kr-art__sm ol { display: grid; gap: 10px; margin-top: 10px; counter-reset: kr-sm; }
.kr-art__sm li { counter-increment: kr-sm; position: relative; padding-left: 30px; font-size: 15px; }
.kr-art__sm li::before {
  content: counter(kr-sm) ".";
  position: absolute;
  left: 0; top: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  color: var(--marque);
}
.kr-art__c { flex: 1 1 560px; min-width: 0; }
.kr-art__h2 { margin-top: 40px; font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -.035em; }
.kr-art__h3 { margin-top: 30px; font-size: 20px; letter-spacing: -.02em; }
/* Meme colonne de lecture bornee que le pave SEO : la colonne d article fait
   plus de 900 px de large sur grand ecran, soit 110 signes par ligne. */
.kr-art__p { margin-top: 16px; max-width: 34em; color: var(--texte-doux); }
.kr-pts--art { margin-top: 18px; }
.kr-art__en {
  position: relative;
  margin-top: 26px;
  padding: 24px 26px 24px 30px;
  border-radius: 16px;
  background: var(--fond-2);
  overflow: hidden;
}
.kr-art__en::before {                    /* liseré de marque, pas une bordure */
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: var(--marque);
}
.kr-art__ent { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 18px; margin-bottom: 8px; }

/* ---- pages legales : colonne etroite ------------------------- */

.kr-lgl { max-width: 820px; }
.kr-lgl__ti { font-size: clamp(28px, 3.6vw, 48px); letter-spacing: -.03em; }
.kr-lgl__m { margin-top: 12px; font-size: 14px; color: var(--texte-doux); }
.kr-lgl__b { margin-top: 40px; }
.kr-lgl__t { font-size: 22px; letter-spacing: -.02em; }
.kr-lgl__p { margin-top: 14px; color: var(--texte-doux); }

/* ---- pied : bandeau a FILIGRANE debordant -------------------- */

.kr-pd {
  position: relative;
  margin-top: 96px;
  padding: 88px 0 40px;
  background: var(--fond-2);
  overflow: hidden;
}
.kr-pd__fil {                            /* le filigrane deborde par la gauche */
  position: absolute;
  left: -33%; bottom: -18%;
  width: 82%;
  padding-top: 39%;
  border-radius: 100%;
  background: var(--marque);
  opacity: .10;
  pointer-events: none;
}
.kr-pd > .kr-cadre { position: relative; }
.kr-pd__h { max-width: 720px; }
.kr-pd__mq { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -.035em; }
.kr-pd__ds { margin-top: 14px; color: var(--texte-doux); }
.kr-pd__cs { display: flex; flex-wrap: wrap; gap: 32px 48px; margin-top: 56px; }
.kr-pd__c { flex: 1 1 200px; min-width: 0; }
.kr-pd__c ul { display: grid; gap: 10px; margin-top: 14px; }
.kr-pd__c a, .kr-pd__c li { font-size: 15px; color: var(--texte-doux); }
.kr-pd__c a:hover { color: var(--marque); }
.kr-pd__c--nap li { color: var(--texte); }
.kr-pd__b {
  display: flex; flex-wrap: wrap; gap: 14px 32px; align-items: center;
  margin-top: 56px;
  padding-top: 26px;
  box-shadow: inset 0 1px 0 0 var(--bordure);
  font-size: 14px;
  color: var(--texte-doux);
}
.kr-pd__b > p { flex: 1 1 260px; min-width: 0; }
.kr-pd__ls { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.kr-pd__ls a:hover { color: var(--marque); }

/* ============================================================
   R3 — UN RATIO PAR GRILLE

   Les grilles de cartes etaient en `flex: 1 1 <base>` : la derniere
   rangee, quand elle est incomplete, etirait ses cartes orphelines sur
   toute la largeur restante. Une seule zone en fin de liste passait de
   304 a 629 px, un seul produit de 376 a 1248 px — la meme carte, deux
   fois a cinq fois plus large que ses voisines, avec une photo etiree
   au meme endroit. C est la « section grosse pour rien ».

   Le nombre de colonnes est donc COMPTE, jamais deduit du remplissage :
   toutes les cartes d une grille font la meme largeur, qu il y en ait
   trois ou treize. `--cols` porte le compte, `--ecart` l ecart reel de
   la grille — les deux doivent rester en accord avec le `gap` declare
   plus haut, sinon la derniere colonne deborde.
   ============================================================ */

.kr-zons, .kr-mats { --cols: 4; --ecart: 26px; }
.kr-zons { --ecart: 22px; }
.kr-blgs, .kr-mais { --cols: 3; --ecart: 26px; }
.kr-scts, .kr-prds { --cols: 3; --ecart: 28px; }
.kr-abs { --cols: 2; --ecart: 34px; }

.kr-zon, .kr-mat, .kr-blg, .kr-sct, .kr-mai, .kr-prd, .kr-ab {
  flex: 0 1 calc((100% - (var(--cols) - 1) * var(--ecart)) / var(--cols));
  min-width: 0;
}

/* Les sept grilles ci-dessus avaient ete comptees ; les sept suivantes
   avaient ete oubliees. Elles etaient vertes par CHANCE — le nombre
   d elements de la vitrine tombait juste. Un avis de plus, un tarif de
   moins, et la meme carte doublait de largeur : le gate l a pris en
   flagrant delit sur « avis » (626 px pour deux cartes, 1280 pour la
   troisieme). Une grille verte par accident de comptage n est pas une
   grille tenue : sur du volume, chaque niche change le compte. */
.kr-avi { --cols: 2; --ecart: 28px; }
.kr-reas { --cols: 3; --ecart: 28px; }
.kr-trfs { --cols: 3; --ecart: 26px; }
.kr-aids { --cols: 3; --ecart: 24px; }
.kr-chf { --cols: 4; --ecart: 56px; }
.kr-cer__l { --cols: 2; --ecart: 20px; }
.kr-pd__cs { --cols: 4; --ecart: 48px; }
.kr-hrp__at { --cols: 3; --ecart: 36px; }
.kr-spc { --cols: 3; --ecart: 0px; }

.kr-avi__c, .kr-rea, .kr-trf, .kr-aid, .kr-chf > li, .kr-cer__i, .kr-pd__c,
.kr-hrp__at > li, .kr-spc__i {
  flex: 0 1 calc((100% - (var(--cols) - 1) * var(--ecart)) / var(--cols));
  min-width: 0;
}

/* ============================================================
   ADAPTATION — la coquille se plie a toutes les largeurs
   ============================================================ */

@media (max-width: 1100px) {
  /* Le compte descend par paliers : c est lui qui remplace le
     recalcul automatique que faisait le flex, sans son effet de bord. */
  .kr-zons, .kr-mats { --cols: 3; }
  .kr-abs { --cols: 1; }
  .kr-reas, .kr-trfs, .kr-aids, .kr-spc { --cols: 2; }
  .kr-faq__i > summary, .kr-faq__r { padding-left: 0; padding-right: 0; }
  .kr-hro__t { font-size: clamp(36px, 6vw, 72px); }
}

@media (max-width: 900px) {
  .kr-zons, .kr-mats, .kr-blgs, .kr-mais, .kr-scts, .kr-prds { --cols: 2; }
  /* R2 — sous neuf cents pixels le mot n a plus de quoi vivre a cote de la
     case : l affiche repasse en une colonne, la case descend sous la parole. */
  .kr-hro { grid-template-columns: minmax(0, 1fr); }
  /* Sous le palier, la case n est plus etiree par la rangee : elle reprend sa
     forme declaree. Le plancher du grand ecran doit donc tomber, sinon il
     l emporte sur le 16/10 et la case s allonge en portrait sur telephone. */
  .kr-vue--hro { aspect-ratio: 16 / 10; max-height: 54svh; min-height: 0; }
  .kr-svc { flex-basis: 100%; }
  .kr-rail__p > .kr-svc { flex: 0 0 100%; }
  .kr-s { padding: 64px 0; }
  .kr-cadre { width: min(100% - 32px, 1280px); }

  /* Le menu passe en tiroir, commande par la pastille a trois traits. */
  .kr-hd__cle { display: inline-flex; }
  .kr-hd__cta { display: none; }
  /* Le bouton unique disparaissait en tiroir : sur un site local c est
     precisement la ou l appel compte le plus. Le couple reste donc pose, en
     format compact, a cote de la pastille de menu. */
  .kr-paire--hd { gap: 8px; }
  .kr-paire--hd .kr-btn { min-height: 46px; padding-inline: 16px; font-size: 14px; }
  .kr-nav {
    display: none;
    flex: 1 1 100%;
    order: 4;
    padding: 8px 0 20px;
  }
  .kr-hd__int:checked ~ .kr-nav { display: block; }
  .kr-nav__l { flex-direction: column; align-items: stretch; gap: 0; }
  .kr-nav__a { padding: 14px 0; }
  .kr-nav__e { width: 100%; }
  .kr-nav__e--vol { position: relative; }
  .kr-vol {
    position: static;
    visibility: visible; opacity: 1; pointer-events: auto;
    display: none;
    padding-top: 0;
  }
  .kr-nav__e--vol[data-ouvert] > .kr-vol { display: block; }
  .kr-nav__e--vol:hover > .kr-vol { display: none; }
  .kr-nav__e--vol[data-ouvert]:hover > .kr-vol { display: block; }
  .kr-vol__in {
    flex-direction: column;
    width: 100%;
    min-width: 0;
    max-width: none;
    padding: 18px;
    box-shadow: inset 0 0 0 1px var(--bordure);
  }
  .kr-vol__vt { flex: 1 1 auto; }
  .kr-vue--vt { height: 140px; }

  /* La scene du hero est un fond hors flux : elle n a plus d ordre a prendre
     dans une pile. Elle se contente de respirer moins haut. */
  .kr-s--hero { min-height: min(640px, calc(100svh - 88px)); padding: 44px 0; }
  .kr-exp__d, .kr-why__g { order: 0; }
  .kr-bsq--inv .kr-bsq__g, .kr-bsq--inv .kr-bsq__d { order: 0; }
  .kr-bsq--creme { padding: 24px 22px; }
  .kr-art__sm { position: static; }
  .kr-prc__clg { grid-template-columns: 1fr; }
  .kr-vue--clg2, .kr-vue--clg3 { height: clamp(180px, 34vw, 260px); }
  .kr-s--cta { padding: 80px 0; }
}

@media (max-width: 768px) {
  .kr-s { padding: 52px 0; }
  .kr-tete, .kr-svcs, .kr-bsq, .kr-exp, .kr-why, .kr-prc, .kr-urg, .kr-frm, .kr-cta, .kr-fch, .kr-art__b {
    gap: 26px;
  }
  .kr-hro__pr { margin-top: 30px; }
  .kr-map__pl { position: static; margin-top: -34px; margin-inline: 16px; max-width: none; }
  .kr-faq__i > summary { font-size: 18px; gap: 16px; }
  .kr-ab__lb { font-size: 13px; padding: 6px 14px; }
}

@media (max-width: 480px) {
  .kr-zons, .kr-mats, .kr-blgs, .kr-mais, .kr-scts, .kr-prds { --cols: 1; }
  .kr-avi, .kr-reas, .kr-trfs, .kr-aids, .kr-cer__l, .kr-hrp__at, .kr-spc { --cols: 1; }
  .kr-chf, .kr-pd__cs { --cols: 2; }
  .kr-cadre { width: min(100% - 24px, 1280px); }
  .kr-hro__t { font-size: clamp(30px, 9vw, 44px); }
  .kr-hrp__t { font-size: clamp(26px, 8vw, 38px); }
  .kr-paire { flex-direction: column; align-items: stretch; }
  .kr-paire .kr-btn { justify-content: center; }
  /* Sauf au bandeau : deux boutons empiles y doubleraient la hauteur de la
     tete de page. Ils restent cote a cote, en tres compact. */
  .kr-paire--hd { flex-direction: row; gap: 6px; }
  .kr-paire--hd .kr-btn { min-height: 42px; padding-inline: 12px; font-size: 13px; }
  .kr-paire--hro .kr-btn { min-height: 62px; padding-inline: 24px; font-size: 16px; }
  .kr-btn { padding-inline: 22px; }
  .kr-avi__c, .kr-trf, .kr-frm__d, .kr-fch__d, .kr-aid, .kr-faq__e { padding-inline: 20px; }
  .kr-urg { padding: 24px 20px; }
  .kr-hro__av li { width: 46px; height: 46px; }
  .kr-hro__av li + li { margin-left: -20px; }
  .kr-avi__av { width: 58px; height: 58px; flex-basis: 58px; font-size: 20px; }
  .kr-ab__ax::after { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* >>> 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.

   La legende du hero avait ete MUETTE le temps ou la vue servait de fond
   pleine fenetre : ecrite, elle tombait en travers du titre. La vue est
   redevenue une case posee a cote du mot — plus aucune encre ne repose
   dessus, la legende reparle (R4b) et le filet se renforce pour que le
   cadre se detache de la scene sombre qui l entoure. */
[data-slot="kr-vue--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, .22);
}
/* Le cadre porteur PLEINE FENETRE, lui, se tait et reprend le sol de sa
   section : de l encre repose dessus par definition, l ecrire c est la poser
   en travers du titre. Il prend l aplat presque-noir du hero pour que la
   marche de fond de R4b trouve un vrai sol sous l encre blanche, un filet nul
   pour ne pas dessiner un rectangle en travers de l affiche, et sa legende
   passe a zero — elle reste portee par le `title` et l `aria-label`. */
[data-slot="kr-vue--herofond"]:not(:has(img)):not(:has(video)) {
  --cadre-vide-fond: color-mix(in srgb, var(--marque) 14%, #0C0E10);
  --cadre-vide-trame: rgba(255, 255, 255, .04);
  --cadre-vide-encre: rgba(255, 255, 255, .82);
  --cadre-vide-filet: transparent;
}
[data-slot="kr-vue--herofond"]:not(:has(img)):not(:has(video)) > * {
  font-size: 0 !important;
}
/* <<< NORME COQUILLE — teinte des cadres porteurs */

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

/* === GARDE-FOU débordement horizontal mobile (factory, audit 04/09) === */
html,body{overflow-x:clip;max-width:100%}
img,video,iframe,table,svg{max-width:100%}