/* ============================================================
   Roofivo — feuille SOURCE de la coquille.
   dist/style.css en est une COPIE ecrasee a chaque rendu : ne jamais
   l editer la-bas.

   Huit jetons de couleur, aucun autre, poses par le moteur dans :root.
   Aucun hex en dur ici hors des voiles noirs/blancs de lisibilite sur
   photo, qui ne sont pas des couleurs de marque.

   L idiome : blanc coupe de bandes gris doux, panneaux brun sombre,
   titres display condenses en capitales tres serrees, entete transparente
   qui se resserre en pilule au defilement, ruban sombre defilant, cartes
   a grand rayon, pastilles rondes numerotees, accents oranges.
   ============================================================ */

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

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: Geist, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* Le conteneur de la reference : 1280px utiles, 40px de marge laterale,
   ramenes a 20px sur petit ecran. */
.wr {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: clamp(20px, 3.2vw, 47px);
}
.sct { padding-block: clamp(56px, 7vw, 112px); }

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

.ig { width: 100%; height: 100%; object-fit: cover; }

/* Le cadre d attente : jamais une image cassee, l intitule reste lisible. */
.ig--nu {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: 16px;
  background: var(--fond-2);
  border: 1px dashed var(--bordure);
  color: var(--texte-doux);
}
.ig--nu > b {
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  overflow-wrap: anywhere;
}

/* ---------- ecriture ---------- */

.dt {
  font-family: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.95;
  color: var(--texte);
  overflow-wrap: break-word;
}
.dt--xl { font-size: clamp(44px, 6.4vw, 90px); }
.dt--l  { font-size: clamp(34px, 4.6vw, 64px); }
.dt--m  { font-size: clamp(28px, 3.4vw, 46px); }
.dt--clair { color: #fff; }
.dt__c { font-weight: 400; color: var(--marque); }
/* Le titre est un bloc de MOTS : chaque mot est un jeton insecable, les
   lignes se cassent librement et se retrecissent d une ligne a l autre. */
.dt__m { display: inline-block; }

.ch { color: var(--texte-doux); max-width: 62ch; }
.dt--clair + .ch, .dt--clair ~ .ch { color: rgba(255, 255, 255, .78); }

/* Le label de section : puce etoilee, petites capitales espacees. */
.et {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--marque);
}
/* Le mot est ecrit avant l etoile dans le DOM ; l etoile se remet devant
   par `order` — le sens prime, la decoration suit. */
.et__m { order: 2; min-width: 0; }
.et__s {
  order: 1;
  width: 9px; height: 9px;
  flex: 0 0 auto;
  background: var(--marque);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}

.mn { margin-top: 18px; font-size: 13px; color: var(--texte-doux); }

/* ---------- listes a losange ---------- */

.pt { display: grid; gap: 10px; margin-top: 16px; }
.pt li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  color: var(--texte-doux);
}
/* Le texte est ecrit AVANT le losange ; le losange se remet devant par
   `order`. Sans CSS on lit le contenu, jamais une puce orpheline. */
.pt__d {
  order: 1;
  width: 8px; height: 8px;
  margin-top: 9px;
  flex: 0 0 auto;
  background: var(--marque);
  transform: rotate(45deg);
}
.pt__i > span { order: 2; min-width: 0; overflow-wrap: break-word; }
.pt--serre { gap: 7px; font-size: 15px; }
.pt--clair li { color: rgba(255, 255, 255, .78); }
.pt--2 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ---------- jetons ---------- */

.cp-l { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cp-l li {
  padding: 6px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--marque) 14%, var(--fond));
  color: var(--texte);
  font-size: 13px;
  font-weight: 500;
}

/* ---------- boutons ---------- */

.bt {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 20px 30px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
/* Le libelle se lit toujours en entier ; c est un voile qui balaie le fond
   sous lui au survol. */
.bt__p { position: relative; z-index: 1; display: block; min-width: 0; }
.bt__l { display: block; }
.bt::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .32s ease;
  background: color-mix(in srgb, var(--marque) 18%, transparent);
}
.bt:hover::after, .bt:focus-visible::after { transform: scaleX(1); }
.bt--plein::after, .bt--sombre::after, .bt--tel::after { background: rgb(255 255 255 / .18); }
.bt--plein { background: var(--marque); color: var(--sur-marque); }
.bt--sombre { background: var(--accent); color: #fff; }
/* Le jumeau « verre » du duo de la regle 7. Il se pose partout — sur le hero
   sombre, dans le bandeau, et dans SEPT sections claires. Son encre etait
   blanche en dur : sur les fonds clairs, « Demander un devis » disparaissait
   et il ne restait a l ecran que la pastille d appel orange. La regle 7 etait
   tenue dans le balisage et rompue a l ecran.

   Le verre ne connait pas son sol, donc il ne choisit pas son encre : il
   prend celle de la section qui l accueille (`currentColor`), et son voile et
   son filet sont des dilutions de cette meme encre. Sur un sol sombre l encre
   heritee est blanche et le rendu ne bouge pas d un pixel ; sur un sol clair
   le bouton devient le contour discret des references Framer. Aucune couleur
   n est ecrite ici : la fabrique garde la main. */
.bt--verre {
  background: color-mix(in srgb, currentColor 12%, transparent);
  border-color: color-mix(in srgb, currentColor 38%, transparent);
  backdrop-filter: blur(6px);
}
.bt--mini { margin-top: 0; padding: 11px 18px; font-size: 13px; background: var(--accent); color: #fff; }
.bt--nu { background: var(--fond-2); color: var(--texte-doux); }
/* Pleine largeur : l appel occupe toute la carte, jamais cale a gauche. */
.bt--large { display: flex; justify-content: center; width: 100%; border-radius: 12px; }

/* ---------- en-tete de section : titre a gauche, chapo a droite, filet ---------- */

.hd2__r {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 48px;
  align-items: flex-end;
  justify-content: space-between;
}
.hd2__g { flex: 1 1 340px; min-width: 0; }
.hd2__d { flex: 1 1 300px; min-width: 0; }
.hd2__fi {
  display: block;
  height: 1px;
  margin-top: 32px;
  background: var(--bordure);
}

/* ============================================================
   ENTETE
   ============================================================ */

/* Hauteur de l entete : 14 px de marge haute + 90 px de rangee + 14 px de
   marge basse. Elle est nommee parce que la scene d ouverture doit se glisser
   dessous d exactement cette valeur. */
:root { --hauteur-entete: 118px; }

.rf-hd {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: 14px 0;
  background: transparent;
  transition: background .25s ease, padding .25s ease;
}
.rf-hd--pl {
  background: color-mix(in srgb, var(--fond) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bordure);
}

/* R4b — tant qu elle n est pas posee, l entete FLOTTE sur la scene
   d ouverture, qui est sombre : photo pleine fenetre sous son voile, ou
   cadre vide. Son encre heritait pourtant de `--texte`, presque noir : la
   navigation etait invisible (contraste mesure 1,02). Elle s eclaircit donc
   le temps qu elle survole la scene, et retrouve l encre du corps des que la
   page defile et que le fond opaque revient. Les pages sans scene
   d ouverture — a-propos, contact, blog — ne sont pas concernees. */
:root { --encre-scene: #ffffff; }
body:has(.rf-af) .rf-hd:not(.rf-hd--pl),
body:has(.rf-af) .rf-hd:not(.rf-hd--pl) .rf-nv__tete,
body:has(.rf-af) .rf-hd:not(.rf-hd--pl) .rf-nv__a {
  color: var(--encre-scene);
}
/* La marque, elle, repose sur sa propre pastille de couleur : elle garde
   l encre calculee pour cette pastille, pas celle de la scene. */
body:has(.rf-af) .rf-hd:not(.rf-hd--pl) .rf-hd__mt { color: var(--sur-marque); }
body:has(.rf-af) .rf-hd:not(.rf-hd--pl) .rf-hd__bg i { background: var(--encre-scene); }
.rf-hd__k { position: absolute; opacity: 0; pointer-events: none; }

.rf-hd__in {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: clamp(20px, 3.2vw, 47px);
  display: flex;
  align-items: center;
  gap: 20px;
}
/* L appel est ecrit AVANT la navigation dans le DOM ; `order` le renvoie a
   l extreme droite. Au clavier on l atteint sans traverser le menu. */
.rf-hd__mq { order: 1; }
.rf-nv { order: 2; }
.bt--tel { order: 3; margin-left: auto; }
.rf-hd__bg { order: 4; }

.rf-hd__mq {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--marque);
  color: var(--sur-marque);
  text-decoration: none;
  flex: 0 0 auto;
}
.rf-hd__et {
  width: 12px; height: 12px;
  flex: 0 0 auto;
  background: currentColor;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.rf-hd__mt {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 22px;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1;
}

/* L appel de la barre : haut, plein, cale a l extreme droite. */
.bt--tel {
  margin-top: 0;
  background: var(--marque);
  border-color: transparent;
  color: var(--sur-marque);
  padding: 20px 32px;
  font-size: 15px;
}

/* burger : cache tant que la barre tient sur une ligne */
.rf-hd__bg {
  display: none;
  width: 44px; height: 44px;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid var(--bordure);
  background: var(--fond);
  cursor: pointer;
  padding: 13px 11px;
  flex-direction: column;
  justify-content: space-between;
}
.rf-hd__bg i { display: block; height: 2px; background: var(--texte); }

/* ---------- navigation ---------- */

/* Les liens se groupent au TIERS GAUCHE, jamais centres sur la barre. */
.rf-nv { flex: 0 1 auto; min-width: 0; display: flex; justify-content: flex-start; margin-left: clamp(16px, 5vw, 88px); }
.rf-nv__u { display: flex; align-items: center; gap: 4px; }
.rf-nv__p { position: relative; }

.rf-nv__tete, .rf-nv__p > .rf-nv__a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.rf-nv__a { text-decoration: none; }
.rf-nv__p:hover > .rf-nv__tete, .rf-nv__p:hover > .rf-nv__a { background: var(--fond-2); }

/* Le chevron : tout lien a volet en porte un, toujours. */
.rf-nv__ch {
  width: 7px; height: 7px;
  flex: 0 0 auto;
  margin-top: -3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.rf-nv__p--v:hover .rf-nv__ch, .rf-nv__p--v:focus-within .rf-nv__ch { transform: rotate(-135deg) translate(-3px, -3px); }

/* ---------- volets ----------
   Le volet est colle a la tete (top:100%) : aucune marge entre le lien et
   le panneau, sinon il se refermerait des que la souris descend. Le
   recentrage passe par --dx, pose par app.js. */
.rf-vo {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 70;
  padding-top: 10px;
  transform: translateX(var(--dx, 0px));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .16s ease, visibility .16s ease;
}
.rf-nv__p--v:hover > .rf-vo,
.rf-nv__p--v:focus-within > .rf-vo { opacity: 1; visibility: visible; pointer-events: auto; }

.rf-vo__carte {
  display: flex;
  gap: 28px;
  min-width: 620px;
  max-width: min(860px, calc(100vw - 32px));
  padding: 26px;
  border-radius: 22px;
  background: var(--fond);
  border: 1px solid var(--bordure);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .14);
}
.rf-vo__piles {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 22px 28px;
}
.rf-vo__pile { min-width: 0; }
.rf-vo__pt {
  margin-bottom: 10px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--marque);
}
.rf-vo__u { display: grid; gap: 4px; }
.rf-vo__u a {
  display: block;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 15px;
  text-decoration: none;
  color: var(--texte);
  overflow-wrap: break-word;
}
.rf-vo__u a:hover { background: var(--fond-2); color: var(--marque); }

/* La vitrine du volet : la version ordinateur montre toujours un visuel
   sur le cote. */
.rf-vo__vt {
  flex: 0 0 236px;
  min-width: 0;
  padding: 16px;
  border-radius: 18px;
  background: var(--fond-2);
}
.rf-vo__cadre {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--fond);
}
.rf-vo__ve { margin-top: 12px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--marque); }
.rf-vo__vt2 { margin-top: 4px; font-family: 'Bebas Neue', Impact, sans-serif; font-size: 22px; line-height: 1.05; text-transform: uppercase; }
.rf-vo__vx { margin-top: 6px; font-size: 13px; color: var(--texte-doux); }

/* ============================================================
   AFFICHE
   ============================================================ */

.rf-af { position: relative; }
/* F1 — LA FIDELITE. Le modele (roofivo.framer.website) ouvre sur une SCENE
   QUI PREND TOUTE LA FENETRE : l entete transparente flotte dessus, le mot est
   ecrit en haut a gauche, et les quatre rangees du bas appartiennent entierement
   a la matiere. La coquille tenait une scene de 648 px, texte cale EN BAS, et
   rendait la derniere rangee de la fenetre au fond de page et aux cartes de
   reperes : F1 matiere 26 %, seuil 25 %. La scene prend donc la fenetre entiere
   et le mot remonte en haut, la ou le modele le pose. */
.rf-af__sc {
  position: relative;
  min-height: min(900px, 100svh);
  display: flex;
  align-items: flex-start;
  border-radius: 0 0 34px 34px;
  overflow: hidden;
  /* Le retrait doit valoir la hauteur REELLE de l entete, sinon il reste une
     bande de fond de page au-dessus de la scene. L entete mesure 14 + 90 + 14
     = 118 px : a -76 px il en restait 42 de blanc mort au-dessus du hero. */
  margin-top: calc(-1 * var(--hauteur-entete));
  padding-top: var(--hauteur-entete);
}
/* Le retrait de 76px n existe que pour glisser l affiche SOUS l entete
   transparente, en haut d accueil. Des qu un fil d Ariane la precede, ce
   meme retrait viendrait recouvrir le fil : l affiche redescend alors dans
   le flux et devient une carte pleinement arrondie. */
.rf-fi + .rf-af .rf-af__sc {
  margin-top: 18px;
  padding-top: 0;
  border-radius: 34px;
  /* F1 ne juge que la premiere fenetre de l ACCUEIL : la fenetre pleine est la
     signature de l affiche d accueil, pas celle des pages internes, ou le fil
     d Ariane est deja passe et ou le lecteur vient chercher un contenu, pas une
     entree en matiere. L affiche interne garde donc sa mesure d origine. */
  min-height: clamp(400px, 52vh, 560px);
}
.rf-af__vs { position: absolute; inset: 0; }
.rf-af__vs::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .52) 0%, rgba(0, 0, 0, .30) 42%, rgba(0, 0, 0, .74) 100%);
}
.rf-af__ig { position: absolute; inset: 0; }
.rf-af__in { position: relative; z-index: 2; padding-block: clamp(44px, 6vw, 88px); }
/* La scene est sombre dans les deux etats — photo sous un voile a 52-74 pour
   cent, ou l aplat du cadre vide. Son encre se declare donc UNE fois, ici, au
   lieu d etre reecrite « blanc » en dur dans chaque enfant : tout ce qui
   arrive dans le bloc de texte de l affiche herite d une encre qui tient sur
   ce sol. Sans cette ligne, le jumeau verre du duo de la regle 7 heritait de
   l encre du body et se posait presque-noir sur presque-noir.
   Le retrait est volontaire : `--encre-scene` ne descend que sur `__tx`, pas
   sur `__in`, parce que les quatre cartes de reperes remontees de 46 px ont
   leur propre aplat clair et gardent l encre de page. */
.rf-af__tx { max-width: 780px; min-width: 0; color: var(--encre-scene); }
.rf-af__tx .et { color: #fff; }
.rf-af__tx .et__s { background: var(--marque); }
.rf-af__s { margin-top: 20px; max-width: 56ch; color: rgba(255, 255, 255, .84); }
.rf-af__b { display: flex; flex-wrap: wrap; gap: 12px; }

/* Les cartes de reperes debordent sur le bas de l affiche. */
/* R3 — une seule largeur par grille. `flex: 1 1 <base>` etire la carte
   orpheline du dernier rang : trois cartes sur une rangee de quatre, et la
   troisieme prend la place des deux manquantes. Des pistes COMPTEES donnent la
   meme largeur a toutes les cartes, quel que soit leur nombre. */
.rf-af__ats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: -46px;
  position: relative;
  z-index: 3;
}
.rf-af__at {
  min-width: 0;
  padding: 24px;
  border-radius: 20px;
  background: var(--fond);
  border: 1px solid var(--bordure);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .08);
}
.rf-af__atn {
  display: inline-block;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 26px;
  color: var(--marque);
  line-height: 1;
}
.rf-af__att { margin-top: 8px; font-weight: 500; font-size: 17px; }
.rf-af__atx { margin-top: 6px; font-size: 14px; color: var(--texte-doux); }

/* ============================================================
   INTRO
   ============================================================ */

.rf-io { background: var(--fond-2); }
.rf-io__in { display: flex; flex-wrap: wrap; gap: 32px 56px; }
.rf-io__h { flex: 1 1 380px; min-width: 0; }
.rf-io__tx { flex: 1 1 380px; min-width: 0; display: grid; gap: 16px; color: var(--texte-doux); }
.rf-io .bt { flex: 0 0 auto; align-self: flex-start; }

/* ============================================================
   PRESTATIONS
   ============================================================ */

/* R3 — une seule largeur par grille. `flex: 1 1 <base>` etire la carte
   orpheline du dernier rang : trois cartes sur une rangee de quatre, et la
   troisieme prend la place des deux manquantes. Des pistes COMPTEES donnent la
   meme largeur a toutes les cartes, quel que soit leur nombre. */
.rf-sv__l { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.rf-sv__c {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 24px;
  border-radius: 22px;
  border: 1px solid var(--bordure);
  background: var(--fond);
}
.rf-sv__ct { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.rf-sv__n { font-family: 'Bebas Neue', Impact, sans-serif; font-size: 20px; color: var(--marque); flex: 0 0 auto; }
.rf-sv__t {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.05;
  text-transform: uppercase;
  min-width: 0;
  overflow-wrap: break-word;
}
.rf-sv__vs { margin-top: 18px; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 10; }
.rf-sv__x { margin-top: 14px; color: var(--texte-doux); }

/* ============================================================
   BLOCS SEO
   ============================================================ */

.rf-bs__l { display: grid; gap: clamp(40px, 5vw, 76px); }
.rf-bs__b {
  display: flex;
  flex-wrap: wrap;
  gap: 28px clamp(28px, 4vw, 64px);
  align-items: center;
}
.rf-bs__b--r { flex-direction: row-reverse; }
.rf-bs__vs {
  position: relative;
  flex: 1 1 340px;
  min-width: 0;
  aspect-ratio: 4 / 3;
  border-radius: 26px;
  overflow: hidden;
  background: var(--fond-2);
}
.rf-bs__n {
  position: absolute;
  left: 18px; bottom: 18px;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--marque);
  color: var(--sur-marque);
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 20px;
  line-height: 1.2;
}
.rf-bs__tx { flex: 1 1 380px; min-width: 0; }
.rf-bs__p { display: grid; gap: 14px; margin-top: 18px; color: var(--texte-doux); }

/* ============================================================
   EXPERTISE — panneau brun
   ============================================================ */

.rf-ex { padding-block: clamp(24px, 3vw, 48px); }
.rf-ex__pan {
  display: flex;
  flex-wrap: wrap;
  gap: 36px clamp(32px, 4vw, 64px);
  padding: clamp(32px, 4.4vw, 68px);
  border-radius: 30px;
  background: var(--accent);
  /* Un bloc qui peint son propre sol declare sa propre encre. Le panneau
     posait un aplat sombre et laissait chacun de ses enfants ecrire « blanc »
     en dur : tout ce qui arrivait sans cette precaution — le jumeau verre du
     duo — heritait de l encre du body et se posait sombre sur sombre. */
  color: #fff;
}
.rf-ex__g { flex: 1 1 340px; min-width: 0; }
.rf-ex__x { margin-top: 18px; color: rgba(255, 255, 255, .78); }
.rf-ex__d { flex: 1 1 360px; min-width: 0; }
.rf-ex__l { display: grid; gap: 20px; }
.rf-ex__p { display: flex; gap: 16px; min-width: 0; }
.rf-ex__n {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--marque);
  color: var(--sur-marque);
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 18px;
}
.rf-ex__p > div { min-width: 0; }
.rf-ex__pt { font-size: 18px; font-weight: 500; color: #fff; }
.rf-ex__p p { color: rgba(255, 255, 255, .72); font-size: 15px; }
.rf-ex__vs { margin-top: 24px; border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 9; }

/* ============================================================
   CHIFFRES
   ============================================================ */

.rf-cf { padding-block: clamp(32px, 4vw, 60px); }
.rf-cf__u {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding-block: 28px;
  border-top: 1px solid var(--bordure);
  border-bottom: 1px solid var(--bordure);
}
/* Un repere = un couple valeur / definition ; la valeur ouvre, son
   intitule se lit dessous. */
.rf-cf__r { flex: 1 1 180px; min-width: 0; }
.rf-cf__v {
  display: block;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: clamp(38px, 4.6vw, 64px);
  line-height: 1;
  color: var(--marque);
}
.rf-cf__v { margin: 0; }
.rf-cf__l { display: block; margin-top: 8px; font-size: 14px; color: var(--texte-doux); }

/* ============================================================
   CONFIANCE
   ============================================================ */

.rf-wu { background: var(--fond-2); }
.rf-wu__in { display: flex; flex-wrap: wrap; gap: 36px clamp(32px, 4vw, 64px); align-items: center; }
.rf-wu__g { flex: 1 1 400px; min-width: 0; }
.rf-wu__l { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; margin-top: 30px; }
.rf-wu__c { display: flex; gap: 14px; min-width: 0; }
.rf-wu__ic {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--marque) 18%, var(--fond));
  position: relative;
}
.rf-wu__ic::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 12px; height: 12px;
  background: var(--marque);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.rf-wu__tx { min-width: 0; }
.rf-wu__t { font-size: 18px; font-weight: 500; }
.rf-wu__x { margin-top: 5px; font-size: 15px; color: var(--texte-doux); }
.rf-wu__vs { flex: 1 1 320px; min-width: 0; border-radius: 26px; overflow: hidden; aspect-ratio: 3 / 4; }

/* ============================================================
   ETAPES — panneau brun, pastilles rondes
   ============================================================ */

.rf-pc { background: var(--accent); padding-block: clamp(56px, 7vw, 112px); }
.rf-pc__h { max-width: 720px; }
.rf-pc__l {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 44px;
}
.rf-pc__e {
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 26px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
}
.rf-pc__rd {
  width: 62px; height: 62px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--marque);
  color: var(--sur-marque);
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 26px;
  line-height: 1;
}
.rf-pc__tx { min-width: 0; margin-top: 18px; }
.rf-pc__t {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 26px;
  line-height: 1.05;
  text-transform: uppercase;
  color: #fff;
}
.rf-pc__x { margin-top: 10px; color: rgba(255, 255, 255, .74); font-size: 15px; }
.rf-pc__vs { width: 100%; margin-top: 18px; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 10; }

/* ============================================================
   MATIERE
   ============================================================ */

/* R3 — une seule largeur par grille. `flex: 1 1 <base>` etire la carte
   orpheline du dernier rang : trois cartes sur une rangee de quatre, et la
   troisieme prend la place des deux manquantes. Des pistes COMPTEES donnent la
   meme largeur a toutes les cartes, quel que soit leur nombre. */
.rf-mt__l { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.rf-mt__c { min-width: 0; }
.rf-mt__vs { border-radius: 20px; overflow: hidden; aspect-ratio: 1 / 1; background: var(--fond-2); }
.rf-mt__tx { padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--bordure); min-width: 0; }
.rf-mt__n { font-family: 'Bebas Neue', Impact, sans-serif; font-size: 16px; color: var(--marque); }
.rf-mt__t { margin-top: 4px; font-size: 18px; font-weight: 500; overflow-wrap: break-word; }
.rf-mt__x { margin-top: 6px; font-size: 15px; color: var(--texte-doux); }

/* ============================================================
   RUBAN DEFILANT
   ============================================================ */

.rf-mq { background: var(--accent); padding-block: 20px; display: flex; flex-direction: column; }
/* Le ruban est ecrit en premier ; l intitule remonte au-dessus par `order`. */
.rf-mq__t { order: 1; }
.rf-mq__ru { order: 2; }
.rf-mq__t {
  max-width: 1440px;
  margin: 0 auto 12px;
  padding-inline: clamp(20px, 3.2vw, 47px);
  width: 100%;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
/* Le ruban clippe volontairement : gate-debordement le connait comme un
   faux positif, d ou la classe .marquee. */
.rf-mq__ru { overflow: hidden; }
.rf-mq__u {
  display: flex;
  align-items: center;
  gap: 44px;
  width: max-content;
  animation: rf-def 34s linear infinite;
}
.rf-mq__i {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: clamp(24px, 2.6vw, 38px);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
/* Chaque marque porte son rang EN CLAIR, jamais une pastille. */
.rf-mq__n {
  flex: 0 0 auto;
  font-size: .52em;
  font-weight: 400;
  color: var(--marque);
}
@keyframes rf-def { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .rf-mq__u { animation: none; } }

/* ============================================================
   PUBLICS
   ============================================================ */

/* R3 — pistes comptees : voir la note plus haut. */
.rf-b2__l { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.rf-b2__c {
  min-width: 0;
  border-radius: 24px;
  overflow: hidden;
  background: var(--fond-2);
}
/* Le public s annonce DANS la vue : la marque en tete, les jetons en pied ;
   l intitule et le propos se lisent SOUS elle. */
.rf-b2__vs {
  position: relative;
  margin: 0;
  min-height: clamp(210px, 24vw, 320px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  overflow: hidden;
}
.rf-b2__vs::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(0 0 0 / .38) 0%, rgb(0 0 0 / .08) 42%, rgb(0 0 0 / .62) 100%);
}
.rf-b2__ig { position: absolute; inset: 0; }
/* Le repere de cadrage se tient dans la bande centrale, entre la marque et
   les jetons — jamais sous eux. */
.rf-b2__vs .ig--nu { padding-block: 46px; }
.rf-b2__m, .rf-b2__vs .cp-l { position: relative; z-index: 2; }
.rf-b2__m { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.rf-b2__vs .cp-l { margin-top: 0; }
.rf-b2__vs .cp-l li { background: rgb(255 255 255 / .18); color: #fff; }
.rf-b2__t {
  margin: 24px 24px 0;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 28px;
  line-height: 1.05;
  text-transform: uppercase;
  overflow-wrap: break-word;
}
.rf-b2__x { margin: 10px 24px 0; color: var(--texte-doux); font-size: 15px; }
.rf-b2__c > .pt { margin: 14px 24px 24px; }

/* ============================================================
   COMMUNES AUTOUR
   ============================================================ */

/* R3 — une seule largeur par grille. `flex: 1 1 <base>` etire la carte
   orpheline du dernier rang : trois cartes sur une rangee de quatre, et la
   troisieme prend la place des deux manquantes. Des pistes COMPTEES donnent la
   meme largeur a toutes les cartes, quel que soit leur nombre. */
.rf-za__l { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 36px; }
.rf-za__c { min-width: 0; }
/* La vignette est ecrite en DERNIER ; `grid-row` la remet a gauche, sur
   toute la hauteur du rang. */
.rf-za__a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  height: 100%;
  padding: 12px 18px 12px 12px;
  border-radius: 999px;
  border: 1px solid var(--bordure);
  background: var(--fond);
  text-decoration: none;
  min-width: 0;
}
a.rf-za__a:hover { border-color: var(--marque); background: var(--fond-2); }
.rf-za__vs .ig--nu { min-height: 100%; height: 100%; padding: 5px; }
/* R4 dit que le cadre VIDE est un etat tenable ; T5 dit qu une colonne trop
   etroite pour son texte est un accident. Les deux se rencontrent sur cette
   pastille de 74 px : elle portait le meme libelle d attente que les grands
   cadres, rapetisse jusqu a 9 px pour tenir — et « Emplacement visuel —
   Fontenay-sous-Bois » y tombait a un mot par ligne. Rapetisser le corps
   n est pas faire tenir le texte, c est cacher qu il ne tient pas. Un cadre
   de cette taille ne porte pas de phrase : il tient son aplat. Le libelle
   reste dans le balisage — il est deja porte en aria-label, il ne servait
   qu a l oeil. */
.rf-za__vs .ig--nu > b { font-size: 0; }
.rf-za__vs {
  grid-column: 1;
  grid-row: 1 / -1;
  width: 74px; height: 74px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--fond-2);
}
.rf-za__n, .rf-za__g, .rf-za__t, .rf-za__lb { grid-column: 2; min-width: 0; }
.rf-za__n { font-family: 'Bebas Neue', Impact, sans-serif; font-size: 15px; color: color-mix(in srgb, var(--marque) 62%, var(--fond)); }
.rf-za__t { font-weight: 500; overflow-wrap: break-word; }
.rf-za__g { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--marque); }
.rf-za__lb { font-size: 13px; color: var(--texte-doux); }

/* ============================================================
   ANCRAGE LOCAL
   ============================================================ */

.rf-ul__carte {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 420px;
  border-radius: 30px;
  overflow: hidden;
  background: var(--accent);
}
.rf-ul__vs { position: absolute; inset: 0; }
.rf-ul__vs::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .30) 0%, rgba(0, 0, 0, .78) 100%);
}
.rf-ul__ig { position: absolute; inset: 0; }
.rf-ul__d { position: relative; z-index: 2; padding: clamp(26px, 3.4vw, 48px); max-width: 620px; min-width: 0; }
.rf-ul__d .et { color: #fff; }
.rf-ul__adp {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.05;
  text-transform: uppercase;
  color: #fff;
}
.rf-ul__ad { display: grid; gap: 4px; margin: 0 0 16px; font-style: normal; color: rgba(255, 255, 255, .82); }
.rf-ul__d .cp-l li { background: rgba(255, 255, 255, .14); color: #fff; }

/* ============================================================
   AVIS
   ============================================================ */

.rf-av { background: var(--fond-2); }
.rf-av__l { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 40px; }
.rf-av__c {
  flex: 1 1 280px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 26px;
  border-radius: 24px;
  background: var(--fond);
  border: 1px solid var(--bordure);
}
.rf-av__gu {
  width: 34px; height: 26px;
  background: var(--marque);
  clip-path: polygon(0 0, 42% 0, 22% 100%, 0 100%, 0 0, 58% 0, 100% 0, 80% 100%, 58% 100%);
}
.rf-av__e { display: block; margin-top: 14px; color: var(--marque); letter-spacing: .28em; font-size: 15px; }
.rf-av__t { margin-top: 10px; font-size: 18px; font-weight: 500; overflow-wrap: break-word; }
.rf-av__x { margin-top: 10px; color: var(--texte-doux); font-size: 15px; }
.rf-av__n { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 20px; min-width: 0; }
.rf-av__pt {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 999px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--marque) 18%, var(--fond));
  color: var(--marque);
}
.rf-av__pt i { font-style: normal; font-family: 'Bebas Neue', Impact, sans-serif; font-size: 20px; }
.rf-av__nm { min-width: 0; display: grid; font-weight: 500; overflow-wrap: break-word; }
.rf-av__r { font-weight: 400; font-size: 13px; color: var(--texte-doux); }

/* ============================================================
   QUESTIONS
   ============================================================ */

.rf-fq__in { display: flex; flex-wrap: wrap; gap: 32px clamp(32px, 4vw, 64px); align-items: flex-start; }
.rf-fq__h { flex: 1 1 320px; min-width: 0; }
.rf-fq__d2 { flex: 2 1 420px; min-width: 0; display: grid; gap: 12px; }
.rf-fq__d { border: 1px solid var(--bordure); border-radius: 18px; background: var(--fond); }
.rf-fq__q {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
  min-width: 0;
}
.rf-fq__q::-webkit-details-marker { display: none; }
.rf-fq__n { flex: 0 0 auto; font-family: 'Bebas Neue', Impact, sans-serif; font-size: 17px; color: var(--marque); }
.rf-fq__qt { flex: 1 1 auto; min-width: 0; font-weight: 500; overflow-wrap: break-word; }
.rf-fq__pl {
  flex: 0 0 auto;
  position: relative;
  width: 26px; height: 26px;
  border-radius: 999px;
  background: var(--fond-2);
}
.rf-fq__pl::before, .rf-fq__pl::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  background: var(--texte);
}
.rf-fq__pl::before { width: 11px; height: 2px; }
.rf-fq__pl::after { width: 2px; height: 11px; }
.rf-fq__d[open] .rf-fq__pl::after { display: none; }
.rf-fq__r { padding: 0 22px 20px 50px; display: grid; gap: 12px; color: var(--texte-doux); }
.rf-fq__en {
  flex: 1 1 320px;
  min-width: 0;
  padding: 26px;
  border-radius: 22px;
  background: var(--fond-2);
}
.rf-fq__ent { font-family: 'Bebas Neue', Impact, sans-serif; font-size: 26px; text-transform: uppercase; line-height: 1.05; }
.rf-fq__enx { margin-top: 10px; color: var(--texte-doux); font-size: 15px; }

/* ============================================================
   AVANT / APRES
   ============================================================ */

.rf-ab__l { display: grid; gap: clamp(32px, 4vw, 56px); margin-top: 40px; }
/* La comparaison est ecrite EN TETE ; le commentaire la legende a cote. */
.rf-ab__c {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 14px clamp(28px, 4vw, 56px);
  align-items: center;
}
.rf-ab__cp { grid-column: 1; grid-row: 1 / -1; }
.rf-ab__t, .rf-ab__c > .cp-l, .rf-ab__x { grid-column: 2; min-width: 0; }
.rf-ab__n { margin-right: 12px; font-family: 'Bebas Neue', Impact, sans-serif; font-weight: 400; color: var(--marque); }
.rf-ab__t {
  margin-top: 6px;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.05;
  text-transform: uppercase;
  overflow-wrap: break-word;
}
.rf-ab__x { margin-top: 12px; color: var(--texte-doux); }

/* Les deux photos sont SUPERPOSEES, decoupees par --pos, et le curseur
   est un input range en surimpression : souris, doigt, clavier. */
.cp {
  position: relative;
  flex: 1 1 360px;
  min-width: 0;
  aspect-ratio: 4 / 3;
  border-radius: 26px;
  overflow: hidden;
  background: var(--fond-2);
  touch-action: none;
}
.cp__f { position: absolute; inset: 0; display: block; }
.cp__f--ap { clip-path: inset(0 0 0 var(--pos, 50%)); }
.cp__f--av { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.cp__ig { position: absolute; inset: 0; }
.cp__tr {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos, 50%);
  width: 3px;
  margin-left: -1.5px;
  background: #fff;
  pointer-events: none;
  z-index: 3;
}
.cp__tr i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px; height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 999px;
  background: var(--marque);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}
.cp__tr i::before, .cp__tr i::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 8px; height: 8px;
  margin-top: -4px;
  border-top: 2px solid var(--sur-marque);
  border-left: 2px solid var(--sur-marque);
}
.cp__tr i::before { left: 12px; transform: rotate(-45deg); }
.cp__tr i::after { right: 12px; transform: rotate(135deg); }
.cp__lb {
  position: absolute;
  bottom: 16px;
  z-index: 4;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .62);
  color: #fff;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  pointer-events: none;
}
.cp__lb--av { left: 16px; }
.cp__lb--ap { right: 16px; }

.ab__i {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.ab__i::-webkit-slider-thumb { -webkit-appearance: none; width: 48px; height: 100%; cursor: ew-resize; }
.ab__i::-moz-range-thumb { width: 48px; height: 100%; border: 0; background: transparent; cursor: ew-resize; }
.ab__i:focus-visible { outline: 3px solid var(--marque); outline-offset: -3px; opacity: 1; }

/* ============================================================
   CHANTIERS — colonne collante, cartes numerotees
   ============================================================ */

.rf-rz { background: var(--fond-2); }
.rf-rz__in { display: flex; flex-wrap: wrap; gap: 36px clamp(32px, 4vw, 64px); align-items: flex-start; }
.rf-rz__g { flex: 1 1 300px; min-width: 0; position: sticky; top: 96px; }
.rf-rz__l { flex: 2 1 460px; min-width: 0; display: grid; gap: 20px; }
/* Le NUMERO ouvre la fiche, en tres grand ; la vue ferme et se colle au
   bord DROIT sur toute la hauteur. Jamais de pastille de rang. */
.rf-rz__c {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 244px);
  align-items: start;
  column-gap: 24px;
  border-radius: 24px;
  overflow: hidden;
  background: var(--fond);
}
.rf-rz__n, .rf-rz__t, .rf-rz__m, .rf-rz__x { grid-column: 1; min-width: 0; padding-left: 24px; }
.rf-rz__n {
  padding-top: 24px;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: clamp(44px, 4.4vw, 68px);
  line-height: 1;
  color: color-mix(in srgb, var(--marque) 46%, var(--fond));
}
.rf-rz__x { padding-bottom: 24px; }
.rf-rz__vs { grid-column: 2; grid-row: 1 / -1; align-self: stretch; margin: 0; min-height: 220px; overflow: hidden; }
.rf-rz__m { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--marque); }
.rf-rz__t {
  margin-top: 6px;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 26px;
  line-height: 1.05;
  text-transform: uppercase;
  overflow-wrap: break-word;
}
.rf-rz__x { margin-top: 10px; color: var(--texte-doux); font-size: 15px; }

/* ============================================================
   GARANTIES
   ============================================================ */

.rf-ce__h { max-width: 760px; }
.rf-ce__xx { margin-top: 14px; color: var(--texte-doux); }
/* R3 — une seule largeur par grille. `flex: 1 1 <base>` etire la carte
   orpheline du dernier rang : trois cartes sur une rangee de quatre, et la
   troisieme prend la place des deux manquantes. Des pistes COMPTEES donnent la
   meme largeur a toutes les cartes, quel que soit leur nombre. */
.rf-ce__l { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 36px; }
.rf-ce__i {
  min-width: 0;
  padding: 24px;
  border-radius: 22px;
  background: var(--fond-2);
}
.rf-ce__pd {
  display: block;
  width: 46px; height: 46px;
  border-radius: 999px;
  border: 2px solid var(--marque);
  position: relative;
}
.rf-ce__pd::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px; height: 18px;
  background: var(--marque);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.rf-ce__t { margin-top: 16px; font-size: 18px; font-weight: 500; overflow-wrap: break-word; }
.rf-ce__x { margin-top: 8px; font-size: 15px; color: var(--texte-doux); }

/* ============================================================
   DISPOSITIFS
   ============================================================ */

.rf-ad__l { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 40px; }
.rf-ad__c {
  flex: 1 1 260px;
  min-width: 0;
  padding: 26px;
  border-radius: 22px;
  border: 1px solid var(--bordure);
}
/* Le numero se pose AU-DESSUS de l intitule, les conditions se lisent juste
   apres — c est ce qui decide — et le propos ferme, en retrait. */
.rf-ad__n { font-family: 'Bebas Neue', Impact, sans-serif; font-size: 20px; color: var(--marque); }
.rf-ad__t { margin-top: 6px; font-size: 19px; font-weight: 500; overflow-wrap: break-word; }
.rf-ad__x { margin-top: 12px; padding-left: 18px; color: var(--texte-doux); font-size: 15px; }

/* ============================================================
   REPERES DE PRIX
   ============================================================ */

.rf-tf { background: var(--fond-2); }
.rf-tf__l { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 40px; }
.rf-tf__c {
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 28px;
  border-radius: 24px;
  background: var(--fond);
  border: 1px solid var(--bordure);
}
/* Le nom et le PRIX se lisent sur la meme ligne, le prix cale a l extreme
   droite ; l appel suit, pleine largeur. */
.rf-tf__hd { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 18px; }
.rf-tf__t { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--texte-doux); }
/* T5 — le prix est en display, mais la carte ne fait que 260 px de piste : un
   corps 46 dans une colonne de 207 px, c est quatre fois et demie sa propre
   taille, et l unite posee EN LIGNE derriere le chiffre y retombait a un mot
   et demi par ligne. Le prix garde donc une mesure que la piste peut porter,
   et l unite prend SA LIGNE, sous le chiffre : c est la ou le regard la
   cherche de toute facon. */
.rf-tf__p {
  margin-top: 0;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: clamp(30px, 2.8vw, 38px);
  line-height: 1;
  color: var(--marque);
  overflow-wrap: break-word;
  text-align: right;
}
.rf-tf__u {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-family: Geist, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.3;
  color: var(--texte-doux);
}
.rf-tf__x { margin-top: 12px; color: var(--texte-doux); font-size: 15px; }
.rf-tf__c .bt { margin-top: 18px; }
.rf-tf__c .pt { margin-top: 18px; }

/* ============================================================
   APPEL DIRECT — bandeau orange
   ============================================================ */

.rf-ug { background: var(--marque); padding-block: clamp(40px, 5vw, 72px); }
/* Le NUMERO ouvre le bandeau : c est le seul geste attendu. Le titre
   l explique dessous, les garanties courent en pied. */
.rf-ug__in { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.rf-ug__g { width: 100%; min-width: 0; }
.rf-ug__g .et, .rf-ug__g .dt, .rf-ug .dt__c { color: var(--sur-marque); }
.rf-ug__g .et__s { background: var(--sur-marque); }
.rf-ug__x { margin-top: 14px; color: var(--sur-marque); opacity: .82; }
.rf-ug .pt__i { color: var(--sur-marque); opacity: .88; }
.rf-ug .pt__d { background: var(--sur-marque); }
.rf-ug__tel {
  margin-top: 0;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1;
  color: var(--sur-marque);
  overflow-wrap: break-word;
}
.rf-ug__tel a { text-decoration: none; }
/* Le numero est desormais pose en lien DIRECT (REGLE 7) : il doit garder
   l allure de bloc qu il avait dans son paragraphe. */
a.rf-ug__tel { display: block; text-decoration: none; }

/* REGLE 7 — la boite qui tient la paire appel + devis, partout ou une section
   n a pas deja sa propre rangee d actions. */
.ac { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ac > * { min-width: 0; }
/* REGLE 7 dans une barre ORDONNEE. Les quatre enfants de `.rf-hd__in` portent
   un `order` explicite (marque 1, nav 2, appel 3, devis 4). Le duo de
   conversion pose par le fixcoquille remplace l appel et le devis par un seul
   bloc — et ce bloc, faute d `order`, valait 0 : il passait DEVANT la marque.
   Le duo herite donc du rang qu il remplace, et de son calage a droite. */
.ac--hd { flex: none; order: 3; margin-left: auto; }
/* `.bt` porte 22px de marge haute — la respiration qu il lui faut quand il
   suit un paragraphe. Dans la barre il n a rien au-dessus de lui, et cette
   marge, dans un `align-items: center`, decale le bouton de 11px vers le bas :
   le devis descendait sous l appel, cote a cote mais desalignes. Le duo de
   conversion de la barre ne prend pas de marge verticale. */
.ac--hd .bt { margin-top: 0; margin-bottom: 0; }

/* ============================================================
   FACETTES — une facette = une adresse
   ============================================================ */

.rf-fa { padding-block: clamp(40px, 5vw, 72px) 0; }
.rf-fa__bar { display: grid; gap: 22px; }
.rf-fa__h { min-width: 0; max-width: 760px; }
.rf-fa__fi { display: block; height: 1px; background: var(--bordure); }
.rf-fa__ra { min-width: 0; }
.rf-fa__u { display: flex; flex-wrap: wrap; gap: 10px; }
.rf-fa__i { min-width: 0; display: flex; }
.rf-fa__t {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 18px 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--bordure);
  background: var(--fond);
  font-size: 14px;
  text-decoration: none;
}
.rf-fa__nb {
  flex: 0 0 auto;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 13px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 7px;
  background: var(--fond-2);
  color: var(--marque);
}
.rf-fa__lb { min-width: 0; overflow-wrap: break-word; }
a.rf-fa__t:hover { border-color: var(--marque); color: var(--marque); }
.rf-fa__t--on { background: var(--accent); border-color: var(--accent); color: #fff; }
.rf-fa__t--on .rf-fa__nb { background: color-mix(in srgb, #fff 18%, transparent); color: #fff; }

/* ============================================================
   GRILLE DE REFERENCES
   ============================================================ */

/* R3 — pistes comptees : voir la note plus haut. */
.rf-gp__l { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.rf-gp__c {
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  overflow: hidden;
  background: var(--fond-2);
}
.rf-gp__vs { position: relative; aspect-ratio: 4 / 3; background: var(--fond); }
.rf-gp__bd {
  position: absolute;
  top: 14px; left: 14px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--marque);
  color: var(--sur-marque);
  font-size: 12px;
  font-weight: 500;
}
.rf-gp__tx { display: flex; flex-direction: column; flex: 1 1 auto; padding: 20px; min-width: 0; }
.rf-gp__t { font-size: 18px; font-weight: 500; overflow-wrap: break-word; }
.rf-gp__t a { text-decoration: none; }
.rf-gp__x { margin-top: 8px; font-size: 14px; color: var(--texte-doux); }
.rf-gp__pi {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 18px;
}
/* T5 — le prix et l appel se partagent la ligne du bas de la carte. Le bloc
   du prix etait dimensionne sur son CHIFFRE seul (87 px) : l unite, posee
   dessous, n avait plus la place de tenir sur une ligne. Il prend donc la
   place laissee libre par l appel, et l unite s y ecrit d un trait. */
.rf-gp__p { flex: 1 1 auto; font-family: 'Bebas Neue', Impact, sans-serif; font-size: 28px; line-height: 1; min-width: 0; overflow-wrap: break-word; }
/* T5 — comme sur les reperes de prix : l unite posee EN LIGNE derriere le
   chiffre partage une piste de 142 px avec le lien de la carte, et retombait a
   un mot et demi par ligne. Elle prend SA LIGNE, sous le chiffre. */
.rf-gp__u {
  display: block;
  margin-left: 0;
  margin-top: 4px;
  font-family: Geist, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.3;
  color: var(--texte-doux);
}

/* ============================================================
   FICHE D UNE REFERENCE
   ============================================================ */

.rf-fp__tt { max-width: 900px; margin-bottom: clamp(26px, 3vw, 44px); }
.rf-fp__in { display: flex; flex-wrap: wrap; gap: 32px clamp(32px, 4vw, 60px); align-items: flex-start; }
.rf-fp__vs {
  position: relative;
  flex: 1 1 360px;
  min-width: 0;
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--fond-2);
}
/* Le prix se pose sur la photo, en cartouche : c est la fiche de Roofivo,
   pas une colonne de texte surmontee d un chiffre. */
.rf-fp__pv {
  position: absolute;
  left: 18px;
  bottom: 18px;
  max-width: calc(100% - 36px);
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--fond) 92%, transparent);
  backdrop-filter: blur(8px);
}
.rf-fp__p {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1;
  color: var(--marque);
  overflow-wrap: break-word;
}
.rf-fp__u { font-family: Geist, Arial, sans-serif; font-size: 13px; color: var(--texte-doux); }
.rf-fp__tx { flex: 1 1 340px; min-width: 0; }
.rf-fp__pl { display: grid; gap: 10px; margin-top: 24px; }
.rf-fp__pi {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-width: 0;
  padding-block: 12px;
  border-top: 1px solid var(--bordure);
}
.rf-fp__pn { flex: 0 0 auto; font-family: 'Bebas Neue', Impact, sans-serif; font-size: 14px; color: var(--marque); }
.rf-fp__pt { min-width: 0; overflow-wrap: break-word; }
.rf-fp__ac { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 26px; }
.rf-fp__ac .mn { margin: 0; flex: 1 1 200px; min-width: 0; }

/* ============================================================
   CARACTERISTIQUES
   ============================================================ */

.rf-sp { background: var(--fond-2); }
/* Tuiles : la valeur d abord, en display, le libelle dessous. La cadence de
   colonnes vient des donnees (flex-wrap + base), jamais d un nombre fige. */
/* R3 — pistes comptees : voir la note plus haut. */
.rf-sp__u { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 38px; }
.rf-sp__c {
  position: relative;
  min-width: 0;
  padding: 24px 22px 22px;
  border-radius: 20px;
  border: 1px solid var(--bordure);
  background: var(--fond);
}
.rf-sp__n {
  position: absolute;
  top: 18px;
  right: 20px;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 13px;
  color: var(--marque);
}
.rf-sp__vl {
  margin: 0;
  min-width: 0;
  padding-right: 34px;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.05;
  text-transform: uppercase;
  overflow-wrap: break-word;
}
.rf-sp__lb { margin-top: 8px; min-width: 0; font-size: 14px; color: var(--texte-doux); overflow-wrap: break-word; }

/* ============================================================
   MAILLAGE INTERNE
   ============================================================ */

/* Des RANGS pleine largeur : l intitule ouvre a gauche, sa mention se lit
   SOUS lui, le propos occupe le milieu, la vignette ferme a droite. */
.rf-mi__l { display: grid; gap: 16px; margin-top: 36px; }
.rf-mi__c { min-width: 0; }
.rf-mi__a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
  align-items: center;
  column-gap: clamp(18px, 2.6vw, 40px);
  height: 100%;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid var(--bordure);
  text-decoration: none;
  min-width: 0;
}
a.rf-mi__a:hover { border-color: var(--marque); background: var(--fond-2); }
/* R5a — la largeur suit le viewport ; avec une hauteur FIXE la forme derivait
   d un palier a l autre (1.76 a 1440, 1.33 a 1024). La forme se DECLARE. */
.rf-mi__vs { grid-column: 3; grid-row: 1 / -1; width: clamp(110px, 14vw, 190px); aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: var(--fond-2); }
.rf-mi__t { grid-column: 1; grid-row: 1; min-width: 0; font-family: 'Bebas Neue', Impact, sans-serif; font-size: 24px; line-height: 1.05; text-transform: uppercase; overflow-wrap: break-word; }
.rf-mi__m { grid-column: 1; grid-row: 2; display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--marque); }
.rf-mi__pc {
  width: 12px; height: 12px;
  flex: 0 0 auto;
  border-radius: 3px;
  border: 2px solid currentColor;
}
.rf-mi__x { grid-column: 2; grid-row: 1 / -1; min-width: 0; font-size: 14px; color: var(--texte-doux); }

/* ============================================================
   BANDEAU D APPEL
   ============================================================ */

.rf-cb__in { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }
.rf-cb__g {
  position: relative;
  flex: 1 1 340px;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  min-height: 320px;
  padding: clamp(26px, 3.2vw, 44px);
  border-radius: 28px;
  overflow: hidden;
  background: var(--accent);
}
.rf-cb__vs { position: absolute; inset: 0; }
.rf-cb__vs::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, .76) 100%); }
.rf-cb__ig { position: absolute; inset: 0; }
.rf-cb__tx { position: relative; z-index: 2; min-width: 0; }
.rf-cb__tx .et { color: #fff; }
.rf-cb__x { margin-top: 14px; color: rgba(255, 255, 255, .8); }
.rf-cb__f {
  flex: 1 1 340px;
  min-width: 0;
  padding: clamp(24px, 3vw, 36px);
  border-radius: 28px;
  background: var(--fond-2);
}

/* ---------- formulaires ---------- */

.fm { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.fm__c { min-width: 0; display: grid; gap: 6px; }
.fm__c--l { grid-column: 1 / -1; }
.fm__lb { font-size: 13px; color: var(--texte-doux); }
.fm__i {
  width: 100%;
  min-width: 0;
  padding: 13px 16px;
  border-radius: 14px;
  border: 1px solid var(--bordure);
  background: var(--fond);
  color: var(--texte);
  font: inherit;
  font-size: 15px;
  resize: vertical;
}
.fm__i:focus-visible { outline: 2px solid var(--marque); outline-offset: 1px; }
/* Le pied du formulaire porte DEUX portes — l appel et l envoi, cote a cote
   (regle 7) — et se replie a plat quand la carte se resserre. */
.fm__b { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.fm__b .bt { margin-top: 0; }

/* ============================================================
   CONTACT
   ============================================================ */

/* La tete tient sa propre rangee ; DESSOUS seulement, les coordonnees
   empilees a gauche font face au formulaire cale a droite. */
.rf-ct__h { max-width: 640px; margin-bottom: clamp(32px, 4vw, 56px); }
.rf-ct__in { display: flex; flex-wrap: wrap; gap: 36px clamp(32px, 4vw, 64px); align-items: flex-start; }
.rf-ct__x { margin-top: 16px; color: var(--texte-doux); max-width: 54ch; }
.rf-ct__cos { flex: 1 1 260px; min-width: 0; display: grid; gap: 28px; margin: 0; }
.rf-ct__co { min-width: 0; padding-top: 16px; border-top: 2px solid var(--marque); }
.rf-ct__cot { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--marque); }
.rf-ct__col { margin: 10px 0 0; display: grid; gap: 4px; color: var(--texte-doux); overflow-wrap: break-word; }
.rf-ct__col a { text-decoration: none; }
.rf-ct__f {
  flex: 1.7 1 420px;
  min-width: 0;
  padding: clamp(24px, 3vw, 36px);
  border-radius: 28px;
  background: var(--fond-2);
}

/* ============================================================
   JOURNAL
   ============================================================ */

/* R3 — pistes comptees : voir la note plus haut. */
.rf-bl__l { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.rf-bl__c { min-width: 0; }
.rf-bl__a {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
  background: var(--fond-2);
  text-decoration: none;
  min-width: 0;
}
/* R5a — un cadre pose en item de flex-COLONNE a `min-height: auto`, et cette
   taille minimale automatique vaut la hauteur intrinseque de la photo : elle
   ecrase l `aspect-ratio` du cadre des que la photo est plus haute que lui
   (ici 1.5 au lieu de 1.6 des l epreuve pleine). `min-height: 0` rend au
   cadre la commande de sa forme — c est le cousin vertical du `min-width: 0`
   de R3. */
.rf-bl__vs { display: block; aspect-ratio: 16 / 10; min-height: 0; }
.rf-bl__tx { display: grid; gap: 8px; padding: 22px; min-width: 0; }
.rf-bl__m { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--marque); }
.rf-bl__t {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 26px;
  line-height: 1.05;
  text-transform: uppercase;
  overflow-wrap: break-word;
}
.rf-bl__x { font-size: 15px; color: var(--texte-doux); }
.rf-bl__fl {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--fond);
}
.rf-bl__fl::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 9px; height: 9px;
  border-top: 2px solid var(--marque);
  border-right: 2px solid var(--marque);
  transform: rotate(-45deg);
}

/* ============================================================
   ARTICLE
   ============================================================ */

/* La date ouvre, CENTREE, avant le titre ; le corps se cale a gauche et la
   grande vue se pose EN PLEIN MILIEU de la lecture, jamais en tete. */
.rf-ba__in {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  gap: 32px clamp(32px, 4vw, 60px);
  align-items: start;
}
.rf-ba__hd { grid-column: 1 / -1; text-align: center; }
.rf-ba__hd .et { justify-content: center; }
.rf-ba__m { margin: 0 0 16px; font-size: 14px; color: var(--texte-doux); }
.rf-ba__vs { margin-block: 16px; border-radius: 28px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--fond-2); }
.rf-ba__so {
  grid-column: 2;
  min-width: 0;
  position: sticky;
  top: 96px;
  padding: 22px;
  border-radius: 20px;
  background: var(--fond-2);
}
.rf-ba__sot { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--marque); margin-bottom: 10px; }
.rf-ba__so ul { display: grid; gap: 6px; }
.rf-ba__so a { font-size: 15px; color: var(--texte-doux); text-decoration: none; overflow-wrap: break-word; }
.rf-ba__so a:hover { color: var(--marque); }
.rf-ba__tx { grid-column: 1; min-width: 0; display: grid; gap: 16px; color: var(--texte-doux); }
.rf-ba__h2 {
  margin-top: 16px;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: clamp(26px, 2.8vw, 36px);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--texte);
}
.rf-ba__h3 { margin-top: 8px; font-size: 19px; font-weight: 500; color: var(--texte); }
.rf-ba__en { padding: 22px; border-radius: 18px; background: var(--fond-2); border-left: 3px solid var(--marque); }
.rf-ba__ent { font-weight: 500; color: var(--texte); margin-bottom: 8px; }

/* ============================================================
   MENTIONS
   ============================================================ */

.rf-lg__in { max-width: 900px; }
.rf-lg__m { margin-top: 12px; font-size: 14px; color: var(--texte-doux); }
.rf-lg__so { margin-top: 34px; padding: 22px 24px; border-radius: 20px; background: var(--fond-2); }
.rf-lg__su { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.rf-lg__si { display: flex; align-items: baseline; gap: 10px; flex: 1 1 260px; min-width: 0; font-size: 14px; }
.rf-lg__sn { flex: 0 0 auto; font-family: 'Bebas Neue', Impact, sans-serif; font-size: 13px; color: var(--marque); }
.rf-lg__bs { margin-top: 12px; }
.rf-lg__b { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: flex-start; }
.rf-lg__bn { flex: 0 0 auto; font-family: 'Bebas Neue', Impact, sans-serif; font-size: 16px; line-height: 1.6; color: var(--marque); }
.rf-lg__bx { flex: 1 1 420px; min-width: 0; display: grid; gap: 12px; color: var(--texte-doux); }
.rf-lg__t {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--texte);
}

/* ============================================================
   FIL D ARIANE
   ============================================================ */

.rf-fi { padding-top: 22px; }
.rf-fi__in { display: flex; align-items: center; gap: 12px; }
.rf-fi__pc {
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-radius: 3px;
  background: var(--marque);
}
.rf-fi__l { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; color: var(--texte-doux); }
.rf-fi__i { display: inline-flex; align-items: center; min-width: 0; }
.rf-fi__sp { display: inline-flex; align-items: center; flex: 0 0 auto; }
.rf-fi__sp i {
  display: block;
  width: 5px; height: 5px;
  border-top: 1.5px solid var(--bordure);
  border-right: 1.5px solid var(--bordure);
  transform: rotate(45deg);
}
.rf-fi__a { text-decoration: none; }
.rf-fi__a:hover { color: var(--marque); }
.rf-fi__ac { color: var(--texte); min-width: 0; overflow-wrap: break-word; }

/* ============================================================
   PIED
   ============================================================ */

.rf-pd { padding-block: clamp(48px, 5vw, 76px) 32px; border-top: 1px solid var(--bordure); }
.rf-pd__in { display: flex; flex-wrap: wrap; gap: 32px 40px; }
.rf-pd__mq { flex: 1.4 1 260px; min-width: 0; }
.rf-pd__mt {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 28px;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--marque);
}
.rf-pd__ds { margin-top: 14px; color: var(--texte-doux); font-size: 15px; max-width: 40ch; }
.rf-pd__col, .rf-pd__nap { flex: 1 1 180px; min-width: 0; }
.rf-pd__ct { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--texte); margin-bottom: 12px; }
.rf-pd__col ul, .rf-pd__nap ul { display: grid; gap: 8px; font-size: 15px; color: var(--texte-doux); }
.rf-pd__col a, .rf-pd__nap a { text-decoration: none; overflow-wrap: break-word; }
.rf-pd__col a:hover, .rf-pd__nap a:hover { color: var(--marque); }
.rf-pd__fi { display: block; height: 1px; margin-block: 36px 22px; background: var(--bordure); }
.rf-pd__bas { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.rf-pd__lg { font-size: 13px; color: var(--texte-doux); min-width: 0; }
.rf-pd__ls { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--texte-doux); }
.rf-pd__ls a { text-decoration: none; }
.rf-pd__pcs { display: flex; gap: 8px; margin-left: auto; }
.rf-pd__pcs i {
  width: 32px; height: 32px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--marque) 18%, var(--fond));
}

/* ============================================================
   ADAPTATION
   ============================================================ */

/* T5 — R3 dit combien de pistes ; T5 demande si le texte y TIENT. Entre 1024 et
   1200 px, les grilles les plus denses tenaient encore leur compte de grand
   ecran : quatre services donnaient une piste de 147 px a un titre en corps 23,
   cinq zones une piste de 60 px a un intitule en corps 16 — un mot par ligne.
   Le compte baisse donc AVANT le palier du menu, qui lui se replie a 1023 :
   les pistes et le tiroir ne changent pas pour la meme raison, ils n ont pas a
   changer au meme endroit. */
@media (max-width: 1200px) {
  .rf-sv__l { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rf-za__l { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Sous 1200, la carte produit n a plus de quoi loger le prix ET l appel sur
     la meme ligne : le prix y tombait a 99 px pour un corps 28. Ils s empilent,
     le prix prend la piste entiere, l appel suit. */
  .rf-gp__pi { flex-direction: column; align-items: flex-start; gap: 14px; }
  .rf-gp__p { width: 100%; }
}

@media (max-width: 1023px) {
  .rf-b2__l, .rf-gp__l, .rf-sp__u, .rf-bl__l { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* R3 — le nombre de pistes se DECLARE a chaque palier. */
  .rf-af__ats, .rf-sv__l, .rf-mt__l, .rf-ce__l { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rf-za__l { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Le menu se replie A PLAT : le volet rentre dans le flux, plus rien a
     caler, et app.js le detecte par position:static. */
  .rf-hd__bg { display: flex; }
  .bt--tel { order: 2; margin-left: auto; }
  .rf-hd__bg { order: 3; margin-left: 12px; }

  .rf-nv {
    order: 4;
    margin-left: 0;
    flex: 1 1 100%;
    display: none;
    justify-content: flex-start;
    max-height: 72vh;
    overflow-y: auto;
    margin-top: 12px;
    padding: 12px;
    border-radius: 22px;
    background: var(--fond);
    border: 1px solid var(--bordure);
  }
  .rf-hd__k:checked ~ .rf-hd__in .rf-nv { display: flex; }
  .rf-hd__k:checked ~ .rf-hd__in { flex-wrap: wrap; }
  .rf-hd__in { flex-wrap: wrap; }
  .rf-hd { background: color-mix(in srgb, var(--fond) 94%, transparent); backdrop-filter: blur(10px); }

  .rf-nv__u { flex-direction: column; align-items: stretch; width: 100%; gap: 2px; }
  .rf-nv__p { position: static; }
  .rf-nv__tete { justify-content: space-between; width: 100%; }

  .rf-vo {
    position: static;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    padding-top: 4px;
  }
  .rf-vo__carte {
    flex-direction: column;
    min-width: 0;
    max-width: none;
    padding: 12px;
    border-radius: 16px;
    box-shadow: none;
    background: var(--fond-2);
  }
  .rf-vo__vt { flex: 1 1 auto; }

  .rf-af__sc { margin-top: 0; padding-top: 0; }
  .rf-rz__g, .rf-ba__so { position: static; }
  .rf-ba__in { grid-template-columns: minmax(0, 1fr); }
  .rf-ba__so, .rf-ba__tx { grid-column: 1; }
}

@media (max-width: 767px) {
  .rf-b2__l, .rf-gp__l, .rf-sp__u, .rf-bl__l { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rf-af__ats, .rf-sv__l, .rf-mt__l, .rf-ce__l { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rf-za__l { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wr, .rf-hd__in, .rf-mq__t { padding-inline: 20px; }
  .sct { padding-block: clamp(44px, 9vw, 64px); }
  .rf-af__ats { margin-top: 22px; }
  .rf-af__sc { border-radius: 0 0 22px 22px; }
  .rf-fi + .rf-af .rf-af__sc { border-radius: 22px; }
  .rf-bs__b, .rf-bs__b--r { flex-direction: column; }
  .rf-ab__c { grid-template-columns: minmax(0, 1fr); }
  .rf-ab__cp { grid-row: auto; }
  .rf-ab__t, .rf-ab__c > .cp-l, .rf-ab__x { grid-column: 1; }
  .rf-fp__pv { left: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 10px 14px; }
  .rf-rz__c { grid-template-columns: minmax(0, 1fr); }
  .rf-rz__vs { grid-column: 1; grid-row: auto; min-height: 200px; }
  .rf-pd__pcs { margin-left: 0; }
}

@media (max-width: 479px) {
  .rf-b2__l, .rf-gp__l, .rf-sp__u, .rf-bl__l { grid-template-columns: minmax(0, 1fr); }
  .rf-af__ats, .rf-sv__l, .rf-mt__l, .rf-ce__l { grid-template-columns: minmax(0, 1fr); }
  /* T5 — deux pistes sur un telephone laissaient 52 px a l intitule pour un
     corps 16 : moins d un mot par ligne. Une seule piste, et la pastille garde
     son intitule en entier. */
  .rf-za__l { grid-template-columns: minmax(0, 1fr); }
  .rf-hd__mt { font-size: 18px; }
  .bt--tel { padding: 14px 18px; font-size: 14px; }
  .rf-mi__a { grid-template-columns: minmax(0, 1fr); }
  .rf-mi__x, .rf-mi__vs { grid-column: 1; grid-row: auto; }
  .rf-mi__vs { width: 100%; margin-top: 12px; }
  .rf-za__a { padding-right: 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 12 page(s), 1440 et 390 px). Leur etat vide prend
   le sol de leur section, assombri d un cran, pour que cette encre reste
   lisible sans plaquer une dalle etrangere a la palette ; tous les autres
   cadres gardent le clair par defaut. Ne pas editer a la main : remesurer.

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