/* ============================================================
   ROOFPRO — identite visuelle du template (coquille vide)
   AUCUNE couleur en dur ici hors voiles neutres. Uniquement les
   8 roles injectes par render.mjs dans :root.
   Roles : --marque --accent --fond --fond-2 --texte
           --texte-doux --bordure --sur-marque

   ADN releve a l'ingestion (src/app/globals.css + 22 composants) :
     conteneur 1200, section 96/0 ;
     entete FIXE en pilule blanche rayon 100px, ombre qui s'epaissit
       au-dela de 20px de defile ;
     hero sombre a trame de points, deux colonnes, carte blanche
       flottante posee sur le visuel ;
     titres de section CENTRES et bornes ;
     cartes rayon 14 qui remontent de 4px au survol ;
     pastilles d'icone carrees rayon 13/14 sur teinte froide ;
     services a QUATRE colonnes en cartes-icones, sans photo ;
     etapes a TROIS colonnes centrees, icone 74px en degrade, badge
       numerote decale, filet pointille de liaison ;
     chiffres a QUATRE colonnes, ligne icone 48px + valeur + libelle,
       poses entre deux filets ;
     atouts a DEUX colonnes en cartes horizontales a coches vertes ;
     avis a trois colonnes, etoiles a remplissage PARTIEL, citation,
       avatar rond 44px ;
     projets : image 4/3 qui zoome au survol, categorie en pilule
       posee dessus, carte qui remonte de 5px ;
     blocs de service : 1fr 1fr gap 56, alternance, atouts a coches
       sur deux colonnes, image rayon 18 a forte ombre portee, et
       quand il y a deux visuels le premier est decale de 28px ;
     bandes d'appel pleine largeur en degrade, titre et action sur la
       meme ligne ;
     pied sombre a colonnes inegales (marque large, liens etroits,
       NAP large), puce chaude sur les coordonnees, barre du bas.

   Le compte de cartes vient TOUJOURS des donnees : la reference
   cablait `repeat(4, 1fr)`, la coquille pose une base en pourcentage
   et laisse flex-wrap decider. A quatre cartes, le rendu est le meme.
   ============================================================ */

@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-900.woff2") format("woff2"); font-weight: 900; font-display: swap; }

:root {
  --r-card: 14px;
  --r-img: 18px;
  --r-pill: 10px;
  --f-titre: "Satoshi", system-ui, sans-serif;
  --f-texte: "Inter", system-ui, sans-serif;
  --pad-section: 96px;
  --max: 1200px;
  --ombre: 0 24px 50px rgba(2, 6, 23, .14);
  --ombre-legere: 0 1px 3px rgba(2, 6, 23, .06);
  --ombre-carte: 0 12px 30px rgba(2, 6, 23, .10);
  /* La reference oppose une couleur FROIDE (icones, pastilles, tags)
     a une couleur CHAUDE (actions, badges, chiffres). La palette du
     socle ne porte que deux teintes : --accent tient le role froid,
     --marque le role chaud. Les fonds de pastille en sont derives —
     aucun hexadecimal n'est ecrit ici. */
  --teinte: color-mix(in srgb, var(--accent) 10%, var(--fond));
  --teinte-chaude: color-mix(in srgb, var(--marque) 14%, var(--fond));
  --coche: color-mix(in srgb, var(--accent) 55%, var(--marque));
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-font-smoothing: antialiased; } /* auto, jamais smooth : le gate mesure sur une page qui doit etre immobile (defilement anime = boites relevees a un offset, capture a un autre) */
body {
  margin: 0;
  font-family: var(--f-texte);
  color: var(--texte);
  background: var(--fond);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  /* Pas de decalage haut : dans la reference, le bandeau translucide
     FLOTTE au-dessus du contenu, qui passe dessous — c'est ce qui donne
     son sens au verre depoli. Les deux blocs d'ouverture (hero sombre,
     bande de fil d'ariane) reservent eux-memes la hauteur du bandeau. */
  padding-top: 0;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ---------- primitives ---------- */
.rp-wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.rp-sec { padding: var(--pad-section) 0; }
.rp-sec--doux { background: var(--fond-2); }
/* L'entete est fixe : une ancre intra-page doit s'arreter SOUS elle. */
[id] { scroll-margin-top: 108px; }

.eyebrow {
  display: block;
  font-family: var(--f-texte);
  font-size: 14px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--marque); margin: 0 0 12px;
}

h1, h2, h3, h4 { font-family: var(--f-titre); font-weight: 700; margin: 0; }
h1 { font-size: clamp(38px, 5.2vw, 60px); line-height: 1.06; letter-spacing: -.02em; }
h2 { font-size: clamp(28px, 3.4vw, 38px); line-height: 1.15; letter-spacing: -.015em; }

/* La balise dit le plan du document, la taille dit la mise en page. Quand une
   page n ouvre sur aucun titre de premier rang, le moteur promeut le premier
   titre de sa section de tete : il change de balise, il ne doit pas changer de
   corps. Sans cette regle, un titre de section double de taille et vient
   recouvrir l etiquette posee au-dessus de lui. */
h1[data-rang="2"] { font-size: clamp(28px, 3.4vw, 38px); }
h3 { font-size: 20px; line-height: 1.3; letter-spacing: -.01em; }
h4 { font-size: 16px; }
.h-accent { color: var(--marque); }
.rp-hero .h-accent { color: color-mix(in srgb, var(--marque) 78%, #ffffff); }

/* La reference CENTRE ses titres de section et borne leur largeur —
   c'est ce qui donne son rythme a la page. */
.rp-tete { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.rp-tete h2, .rp-tete h1 { margin-bottom: 14px; }
.rp-tete p { color: var(--texte-doux); margin: 0; font-size: 17px; line-height: 1.7; }

.rp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 26px;
  /* Rayon 10px, mesure sur les trois boutons de la reference Framer
     (Book Free Quote, Get a Free Roof Inspection, View Our Work). Le
     template n'a AUCUN bouton en pilule : le 100px est reserve aux
     etiquettes d'avis et aux marqueurs poses sur photo. */
  border-radius: var(--r-pill);
  font-family: var(--f-texte); font-weight: 600; font-size: 15px;
  border: 1px solid transparent; cursor: pointer;
  background: var(--marque); color: var(--sur-marque);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.rp-btn:hover { transform: translateY(-2px); box-shadow: var(--ombre-carte); }
.rp-btn--contour { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .32); }
.rp-btn--contour:hover { background: rgba(255, 255, 255, .10); }
.rp-btn--clair { background: var(--fond); color: var(--accent); }
.rp-btn--sombre { background: var(--accent); color: var(--sur-marque); }

.rp-card {
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: var(--r-card);
  padding: 30px 26px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.rp-card:hover { transform: translateY(-4px); box-shadow: var(--ombre-carte); }

/* Pastille d'icone : le carre a fort rayon sur teinte froide, marque
   visuelle la plus repandue de la reference. */
.rp-pastille {
  width: 56px; height: 56px; border-radius: var(--r-card); flex: none;
  background: var(--teinte); color: var(--accent);
  display: grid; place-items: center; font-size: 21px;
}
.rp-pastille--sm { width: 48px; height: 48px; border-radius: 12px; font-size: 18px; }

.rp-filet { height: 1px; background: var(--bordure); border: 0; margin: 20px 0; }
.rp-mention { color: var(--texte-doux); font-size: 13px; line-height: 1.6; margin: 22px 0 0; }

.rp-fleche {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: auto; padding-top: 16px;
  font-weight: 600; font-size: 15px; color: var(--accent);
}
.rp-fleche svg { transition: transform .2s ease; }
a:hover .rp-fleche svg { transform: translateX(5px); }

.rp-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.rp-chip {
  display: inline-flex; align-items: center;
  padding: 6px 14px; border-radius: 100px;
  background: var(--teinte); color: var(--accent);
  font-size: 13px; font-weight: 600;
  max-width: 100%; overflow-wrap: anywhere;
}

/* La liste a coches de la reference : petit chevron colore, jamais une
   puce de navigateur. */
.rp-coches { margin: 16px 0 0; padding: 0; display: grid; gap: 11px; }
.rp-coches li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 15px; color: var(--texte-doux); min-width: 0;
}
.rp-coche { color: var(--coche); flex: none; margin-top: 4px; }
.rp-coches--duo { grid-template-columns: 1fr 1fr; gap: 12px 22px; }

/* cadre image : la coquille n'embarque aucun visuel, seulement le cadre */
.frame {
  border-radius: var(--r-img);
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg, transparent 0 12px, rgba(2, 6, 23, .04) 12px 24px),
    var(--fond-2);
  display: grid; place-items: center;
  color: var(--texte-doux);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  text-align: center; padding: 18px;
  min-height: 190px;
}
.frame img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- grilles a nombre variable ----------
   La reference cable `repeat(N, 1fr)` : le compte de colonnes vient du
   GABARIT, pas des donnees. Une base en pourcentage avec `flex-grow`
   laissait la derniere rangee incomplete s'etirer — une carte seule a
   1152px a cote de ses soeurs a 270px. Des pistes comptees tiennent la
   meme largeur quel que soit le nombre de cartes ; le compte est redit a
   chaque palier plus bas. */
.rp-g2, .rp-g3, .rp-g4 { display: grid; gap: 24px; align-items: stretch; }
.rp-g2 > *, .rp-g3 > *, .rp-g4 > * { min-width: 0; }
.rp-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rp-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rp-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.rp-bandeau { margin-bottom: 44px; }
.rp-bandeau .frame { aspect-ratio: 21 / 6; min-height: 0; }

/* ---------- entete : bandeau blanc translucide, colle en haut ----------
   Mesure sur la reference Framer : le NAV fait 1100 de large, 70 de haut,
   rayon 10px, fond rgba(255,255,255,.6) donc verre depoli, padding 20,
   AUCUNE bordure ni ombre au repos, sticky a top 0 (pas de marge haute).
   Le clone Next.js avait derive vers une pilule 100px : la source fait foi. */
.rp-hd { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 0 24px; }
.rp-hd__pilule {
  max-width: 1100px; margin: 0 auto; flex-wrap: nowrap;
  background: color-mix(in srgb, var(--fond) 60%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 0; border-radius: var(--r-pill); padding: 10px 10px 10px 20px;
  display: flex; align-items: center; gap: 24px;
  box-shadow: none;
  transition: box-shadow .25s ease, background .25s ease;
}
.rp-hd.is-defile .rp-hd__pilule { box-shadow: 0 10px 34px rgba(2, 6, 23, .12); }
/* Le logo reste sur UNE ligne : passe a deux, la pilule fixe double de
   hauteur et vient recouvrir le contenu, que le padding-top du body ne
   compense plus. */
.rp-hd__logo { display: flex; align-items: center; gap: 10px; font-family: var(--f-titre); font-weight: 900; font-size: 19px; letter-spacing: -.02em; white-space: nowrap; min-width: 0; }
.rp-hd__mark { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; background: #fff; display: inline-block; flex: none; }
.rp-hd__nav { display: flex; align-items: center; gap: 26px; margin-left: auto; font-size: 15px; font-weight: 500; }
.rp-hd__lien:hover, .rp-hd__lien.is-active { color: var(--accent); }
.rp-hd__cta { flex: none; }
/* Commande de menu : absente au bureau, elle remplace la nav sous 1000px. */
.rp-hd__bascule { display: none; margin-left: auto; width: 40px; height: 40px; padding: 0; flex: none;
  border: 1px solid var(--bordure); border-radius: 12px; background: var(--fond);
  cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.rp-hd__bascule i { display: block; width: 17px; height: 2px; border-radius: 2px; background: var(--texte); transition: transform .18s ease, opacity .18s ease; }
.rp-hd--ouvert .rp-hd__bascule i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.rp-hd--ouvert .rp-hd__bascule i:nth-child(2) { opacity: 0; }
.rp-hd--ouvert .rp-hd__bascule i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.rp-drop { position: relative; }
.rp-drop__tete { display: inline-flex; align-items: center; gap: 6px; cursor: default; }
.rp-drop__chev { transition: transform .18s ease; }
.rp-drop:hover .rp-drop__chev { transform: rotate(180deg); }
.rp-drop__panneau { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: 20px; opacity: 0; visibility: hidden; transition: opacity .18s ease; z-index: 40; }
.rp-drop:hover .rp-drop__panneau, .rp-drop:focus-within .rp-drop__panneau { opacity: 1; visibility: visible; }
.rp-drop__grille {
  background: var(--fond); border: 1px solid var(--bordure); border-radius: 20px;
  box-shadow: var(--ombre); padding: 22px 26px;
  display: flex; align-items: flex-start; gap: 32px; white-space: nowrap;
  min-width: 600px; max-width: min(94vw, 880px);
}
/* Les colonnes gardent leur largeur naturelle : un `min-width: 0` ici
   ecraserait les libelles les uns sur les autres, le nowrap les faisant
   deborder de leur colonne. */
.rp-drop__cols { display: flex; align-items: flex-start; gap: 32px; flex: 0 1 auto; }
.rp-drop__col { display: grid; gap: 2px; align-content: start; flex: 0 0 auto; }
/* La vitrine : la carte roofpro en reduction. Son visuel a une hauteur FIXE,
   sinon le `min-height` du cadre etire tout le volet. `flex: 0 0` et non
   `0 1` : une base compressible la reduirait a un mot par ligne. */
.rp-drop__vit { flex: 0 0 240px; display: grid; gap: 8px; align-content: start; white-space: normal; }
.rp-drop__vitPh { min-height: 0; height: 128px; width: 100%; border-radius: 14px; }
.rp-drop__vitN { font-size: 16px; line-height: 1.3; }
.rp-drop__vitX { font-size: 14px; color: var(--texte-doux); line-height: 1.5; }
.rp-drop__vitZ { font-size: 14px; font-weight: 600; color: var(--accent); }
.rp-drop__titre { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--marque); margin: 0 0 8px; }
.rp-drop__lien { display: block; padding: 6px 10px; border-radius: 10px; font-size: 15px; }
.rp-drop__lien:hover { color: var(--accent); background: var(--teinte); }

/* ---------- hero sombre a trame de points, deux colonnes ---------- */
.rp-hero { position: relative; overflow: hidden; background: var(--accent); color: var(--sur-marque); }
/* La trame de fond de la reference n'est pas faite de points ronds mais de
   petites CROIX espacees de 60px. Deux traits croises de 8px, dessines en
   SVG inline : c'est le seul moyen d'obtenir un motif borne dans les deux
   axes en une seule couche. Aucune requete, aucune dependance. */
.dot-grid::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 26v8M26 30h8' stroke='rgba(255,255,255,0.10)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 60px 60px;
}
.rp-hero__inner {
  position: relative; z-index: 2;
  /* 150px en tete : la hauteur du bandeau flottant plus l'air de la ref
     (.rp-pagehero de la source : padding 150px 0 72px). */
  max-width: var(--max); margin: 0 auto; padding: 150px 24px 96px;
  display: flex; flex-wrap: wrap; gap: 56px; align-items: center;
}
.rp-hero__txt { flex: 1 1 520px; min-width: 0; }
.rp-hero__media { flex: 1 1 420px; min-width: 0; position: relative; }
.rp-hero__img { aspect-ratio: 4 / 3.2; min-height: 0; border-radius: 24px; box-shadow: 0 30px 70px rgba(0, 0, 0, .4); }
.rp-hero__pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; margin-bottom: 24px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  font-size: 14px; font-weight: 500;
}
.rp-hero__pill-point { width: 7px; height: 7px; border-radius: 50%; background: var(--marque); flex: none; }
.rp-hero h1 { color: var(--sur-marque); }
.rp-hero__sous { color: rgba(255, 255, 255, .78); margin: 22px 0 32px; font-size: 18px; line-height: 1.65; max-width: 560px; }
.rp-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.rp-hero__reperes { display: flex; flex-wrap: wrap; gap: 20px 28px; margin-top: 34px; }
.rp-hero__repere { min-width: 0; max-width: 100%; }
.rp-hero__repere-tete { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .82); }
.rp-hero__repere-tete i { color: var(--marque); font-style: normal; }
.rp-hero__repere em { display: block; margin-top: 5px; padding-left: 21px; font-style: normal; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .55); overflow-wrap: anywhere; }
.rp-hero__flottant {
  position: absolute; left: 22px; bottom: 22px; z-index: 3;
  background: var(--fond); color: var(--texte);
  border-radius: var(--r-card); padding: 14px 18px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .25);
  max-width: calc(100% - 44px);
}
.rp-hero__flottant .rp-pastille { width: 42px; height: 42px; border-radius: 11px; font-size: 17px; }
.rp-hero__flottant strong { display: block; font-family: var(--f-titre); font-size: 15px; }
.rp-hero__flottant em { font-style: normal; font-size: 12px; color: var(--texte-doux); }

/* ---------- services : cartes-icones, QUATRE colonnes ----------
   La reference ne met PAS de photo dans cette grille : l'icone porte le
   service, le visuel vit sur la page dediee. */
.rp-svc { display: flex; flex-direction: column; text-align: left; }
.rp-svc:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--bordure)); }
.rp-svc h3 { margin: 20px 0 10px; }
.rp-svc p { margin: 0; color: var(--texte-doux); font-size: 15px; line-height: 1.7; }

/* ---------- intro : chapeau centre, corps en deux colonnes ---------- */
.rp-colonnes { columns: 2; column-gap: 56px; max-width: 980px; margin: 0 auto; }
.rp-colonnes p { margin: 0 0 18px; color: var(--texte-doux); line-height: 1.8; break-inside: avoid; }

/* ---------- blocs de service alternes : texte + image ---------- */
.rp-bloc { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.rp-bloc > * { flex: 1 1 380px; min-width: 0; }
.rp-bloc--inv .rp-bloc__media { order: -1; }
.rp-bloc__sur { font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin: 18px 0 10px; }
.rp-bloc__txt h2 { margin-bottom: 18px; }
.rp-bloc__p { color: var(--texte-doux); line-height: 1.8; margin: 0 0 16px; }
.rp-bloc__txt .rp-btn { margin-top: 28px; }
.rp-bloc__img { aspect-ratio: 4 / 3.4; min-height: 0; border-radius: var(--r-img); box-shadow: var(--ombre); }
/* Deux visuels : cote a cote, le premier decale — le decrochage est
   dans la reference, il n'est pas decoratif ici non plus. */
.rp-bloc__paire { display: flex; gap: 18px; }
.rp-bloc__paire .frame { flex: 1 1 50%; min-width: 0; aspect-ratio: 3 / 4; min-height: 0; border-radius: var(--r-img); box-shadow: var(--ombre); }
.rp-bloc__paire .frame:first-child { margin-top: 28px; }

/* ---------- expertise : arguments a pastille ---------- */
.rp-args { display: grid; gap: 20px; margin-top: 26px; }
.rp-arg { display: flex; gap: 16px; align-items: flex-start; }
.rp-arg h3 { font-size: 17px; margin-bottom: 5px; }
.rp-arg p { margin: 0; color: var(--texte-doux); font-size: 15px; }

/* ---------- marques (bandeau defilant) ---------- */
.marquee { background: var(--fond-2); padding: 28px 0; overflow: hidden; border-block: 1px solid var(--bordure); }
.marquee__track { display: flex; gap: 56px; align-items: center; white-space: nowrap; animation: defile 40s linear infinite; }
.marquee__item { font-family: var(--f-titre); font-weight: 700; font-size: 18px; letter-spacing: -.01em; color: var(--texte-doux); flex: none; opacity: .8; }
@keyframes defile { to { transform: translateX(-50%); } }

/* ---------- atouts : DEUX colonnes de cartes horizontales ---------- */
.rp-why { display: flex; gap: 18px; align-items: flex-start; padding: 30px; }
.rp-why__txt { min-width: 0; }
.rp-why h3 { margin-bottom: 9px; }
.rp-why p { margin: 0; color: var(--texte-doux); font-size: 15px; line-height: 1.7; }

/* ---------- secteurs B2B : rangees alternees ---------- */
.rp-b2b { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; margin-bottom: 24px; }
.rp-b2b > * { min-width: 0; }
/* base en % + garde-fou en px : sans le second, l'element ne repasse
   jamais a la ligne et pousse le document a scroller. */
.rp-b2b__carte { flex: 1 1 55%; min-width: min(100%, 320px); display: flex; flex-direction: column; padding: 34px 30px; }
.rp-b2b__carte:hover { transform: none; box-shadow: none; }
.rp-b2b__media { flex: 1 1 35%; min-width: min(100%, 260px); display: flex; }
.rp-b2b__media .frame { width: 100%; min-height: 300px; }
.rp-b2b--inv .rp-b2b__media { order: -1; }
.rp-b2b__haut { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.rp-b2b__num { font-family: var(--f-titre); font-weight: 900; font-size: 26px; color: var(--teinte-chaude); }
.rp-b2b__carte p { color: var(--texte-doux); margin: 10px 0 0; line-height: 1.7; }

/* ---------- communes : pastilles de liens ---------- */
.rp-zones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.rp-zone {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 20px; border-radius: 100px;
  border: 1px solid var(--bordure); background: var(--fond);
  font-weight: 600; font-size: 15px;
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.rp-zone:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.rp-zone em { font-style: normal; font-weight: 400; font-size: 13px; color: var(--texte-doux); }
.rp-zone-bande { margin-top: 44px; }

/* ---------- etapes : TROIS colonnes centrees, reliees ---------- */
.rp-etapes { display: flex; flex-wrap: wrap; gap: 30px; }
.rp-etape { flex: 1 1 30%; min-width: min(100%, 260px); text-align: center; }
.rp-etape__ic { position: relative; width: 74px; margin: 0 auto 22px; }
.rp-etape__rond {
  width: 74px; height: 74px; border-radius: 20px;
  background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 78%, #ffffff), var(--accent));
  color: var(--sur-marque);
  display: grid; place-items: center; font-size: 27px;
  box-shadow: 0 14px 30px color-mix(in srgb, var(--accent) 30%, transparent);
}
.rp-etape__num {
  position: absolute; top: -8px; right: -10px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--marque); color: var(--sur-marque);
  border: 3px solid var(--fond);
  display: grid; place-items: center;
  font-family: var(--f-titre); font-weight: 700; font-size: 12px;
}
/* Le filet pointille qui relie une etape a la suivante : la signature
   la plus reconnaissable de la reference. */
.rp-etape__filet {
  position: absolute; top: 37px; left: calc(100% + 14px);
  width: calc(100% + 120px); height: 2px;
  background: repeating-linear-gradient(90deg, var(--bordure) 0 8px, transparent 8px 16px);
}
.rp-etape h3 { margin-bottom: 9px; }
.rp-etape p { margin: 0; color: var(--texte-doux); font-size: 15px; line-height: 1.7; }
.rp-etapes__cta { text-align: center; margin-top: 52px; }

/* ---------- chiffres : QUATRE colonnes entre deux filets ---------- */
.rp-stats { padding: 44px 0; border-block: 1px solid var(--bordure); }
.rp-stats__grille { display: flex; flex-wrap: wrap; gap: 28px; }
.rp-stat { flex: 1 1 23%; min-width: min(100%, 210px); display: flex; align-items: center; gap: 14px; }
.rp-stat > div { min-width: 0; }
.rp-stat strong { display: block; font-family: var(--f-titre); font-weight: 900; font-size: 30px; line-height: 1.1; letter-spacing: -.02em; color: var(--texte); }
.rp-stat__label { display: block; font-size: 14px; font-weight: 600; color: var(--texte-doux); }
.rp-stat__sous { display: block; font-size: 13px; color: var(--texte-doux); opacity: .8; }

/* ---------- implantation ---------- */
.rp-loc { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }
.rp-loc > * { min-width: 0; }
.rp-loc__media { flex: 1 1 55%; min-width: min(100%, 300px); display: flex; }
.rp-loc__media .frame { width: 100%; min-height: 380px; }
.rp-loc__carte { flex: 1 1 32%; min-width: min(100%, 280px); padding: 32px 28px; }
.rp-loc__carte:hover { transform: none; box-shadow: none; }
.rp-loc__carte p { margin: 0 0 8px; color: var(--texte-doux); }

/* ---------- avis : etoiles a remplissage PARTIEL ---------- */
.rp-avis { display: flex; flex-direction: column; margin: 0; }
.rp-etoiles { display: inline-flex; gap: 3px; margin-bottom: 16px; }
.rp-etoile { position: relative; display: inline-block; width: 17px; height: 17px; color: var(--bordure); }
.rp-etoile__plein { position: absolute; inset: 0; overflow: hidden; color: var(--marque); }
.rp-etoile__plein svg { display: block; }
.rp-avis h3 { font-size: 18px; margin-bottom: 10px; }
.rp-avis blockquote { margin: 0 0 24px; color: var(--texte-doux); line-height: 1.75; font-size: 15px; }
.rp-avis figcaption { display: flex; align-items: center; gap: 13px; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--bordure); }
.rp-avis__av { width: 44px; height: 44px; border-radius: 50%; flex: none; background: var(--accent); color: var(--sur-marque); display: grid; place-items: center; font-family: var(--f-titre); font-weight: 700; font-size: 16px; }
/* La colonne d'identite prend la place qui reste : laissee en
   « largeur du contenu », elle se serrait a 111px et cassait le nom et le
   quartier sur deux lignes de 1,3 mot. Le serrage se corrige par la
   STRUCTURE — la piste, pas la typographie. */
.rp-avis__qui { flex: 1 1 auto; min-width: 0; }
.rp-avis figcaption strong { display: block; font-family: var(--f-titre); font-size: 15px; }
.rp-avis figcaption em { font-style: normal; font-size: 13px; color: var(--texte-doux); }

/* ---------- FAQ : details/summary, sans JS ---------- */
.rp-faq { display: grid; gap: 12px; max-width: 860px; margin: 0 auto; }
.rp-faq__item { border: 1px solid var(--bordure); border-radius: 12px; background: var(--fond); padding: 2px 20px; transition: border-color .25s ease, box-shadow .25s ease; }
.rp-faq__item[open] { border-color: var(--accent); box-shadow: 0 8px 28px color-mix(in srgb, var(--accent) 10%, transparent); }
.rp-faq__item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 16px;
  padding: 18px 0;
  font-family: var(--f-titre); font-weight: 700; font-size: 17px;
}
.rp-faq__item summary::-webkit-details-marker { display: none; }
.rp-faq__signe {
  margin-left: auto; flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--teinte); color: var(--accent);
  display: grid; place-items: center;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.rp-faq__signe::before { content: "+"; font-size: 18px; font-weight: 400; line-height: 1; }
.rp-faq__item[open] .rp-faq__signe { transform: rotate(45deg); background: var(--accent); color: var(--sur-marque); }
.rp-faq__item p { color: var(--texte-doux); margin: 0 0 20px; padding-right: 46px; line-height: 1.75; }

/* ---------- expertise : intitule, bande d'image, colonnes cloisonnees ------
   Patron natif du « pourquoi nous » de la reference. Les colonnes se comptent
   d'apres les donnees : base en pourcentage, repli a plat, et le filet de
   separation disparait au repli (il ne separerait plus rien). */
.rp-exp__tete { max-width: 720px; }
.rp-exp__p { margin-top: 16px; color: var(--texte-doux); }
.rp-exp__bande { margin-top: 40px; }
.rp-exp__bande .frame { aspect-ratio: 21 / 9; min-height: 0; border-radius: 18px; }
.rp-exp__cols { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 44px; }
.rp-exp__col { flex: 1 1 22%; min-width: min(100%, 240px); padding-left: 24px; border-left: 1px solid var(--bordure); }
.rp-exp__col h3 { margin: 18px 0 10px; }
.rp-exp__col p { color: var(--texte-doux); }
.rp-exp__pied { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
@media (max-width: 640px) { .rp-exp__col { padding-left: 0; border-left: 0; } }

/* ---------- materiel : rangees pleine largeur, vignette a gauche ----------
   Le compte de rangees vient des donnees : la liste s'empile, chaque rangee
   se replie a plat des que la vignette et le texte ne tiennent plus cote a
   cote. min-width:0 sur le corps, sans quoi un mot long pousse la rangee. */
.rp-mats { display: flex; flex-direction: column; gap: 16px; margin-top: 44px; }
.rp-mat {
  display: flex; flex-wrap: wrap; gap: 24px; align-items: center; margin: 0;
  padding: 20px; background: var(--fond);
  border: 1px solid var(--bordure); border-radius: 16px;
}
.rp-mat__vue { flex: 0 1 260px; min-width: min(100%, 220px); }
.rp-mat__vue .frame { aspect-ratio: 4 / 3; min-height: 0; border-radius: 12px; }
.rp-mat__corps { flex: 1 1 55%; min-width: min(100%, 260px); }
.rp-mat__rang { margin-bottom: 8px; font-size: 13px; font-weight: 600; letter-spacing: .12em; color: var(--accent); }
.rp-mat__corps h3 { margin-bottom: 10px; }

/* ---------- cartes-projet (realisations, maillage, blog, materiaux) ---------- */
.rp-proj {
  display: flex; flex-direction: column; margin: 0;
  background: var(--fond); border: 1px solid var(--bordure);
  border-radius: 16px; overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.rp-proj:hover { transform: translateY(-5px); box-shadow: var(--ombre-carte); }
.rp-proj__img { position: relative; overflow: hidden; }
.rp-proj__img .frame { aspect-ratio: 4 / 3; min-height: 0; border-radius: 0; }
.rp-proj__img--carre .frame { aspect-ratio: 1 / 1; }
.rp-proj__img img { transition: transform .45s ease; }
.rp-proj:hover .rp-proj__img img { transform: scale(1.05); }
/* Dans la reference, la categorie n'est PAS posee sur la photo : elle
   ouvre le corps de carte, en pilule bleu pale, sur la meme ligne que le
   lieu, lui en gris avec son marqueur. La photo reste nue. */
.rp-proj__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; }
.rp-proj__tag {
  padding: 5px 13px; border-radius: var(--r-pill);
  background: var(--teinte); color: var(--accent);
  font-size: 13px; font-weight: 600;
}
.rp-proj__corps { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.rp-proj__loc { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--texte-doux); }
.rp-proj__corps h3 { font-size: 18px; margin-bottom: 8px; }
.rp-proj__corps p { margin: 0; color: var(--texte-doux); font-size: 15px; line-height: 1.7; }

/* ---------- certifications / aides ---------- */
.rp-cert { text-align: center; }
.rp-cert .rp-pastille { margin: 0 auto 18px; }
.rp-cert h3 { font-size: 17px; margin-bottom: 8px; }
.rp-cert p { margin: 0; color: var(--texte-doux); font-size: 15px; line-height: 1.7; }
.rp-aide__haut { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.rp-aide__montant { font-family: var(--f-titre); font-weight: 900; font-size: 22px; color: var(--marque); text-align: right; overflow-wrap: anywhere; }
.rp-aide h3 { margin-bottom: 9px; }
.rp-aide p { margin: 0; color: var(--texte-doux); font-size: 15px; line-height: 1.7; }

/* ---------- bande d'appel : pleine largeur, en degrade ---------- */
.rp-band {
  position: relative; overflow: hidden;
  padding: 64px 0;
  background: linear-gradient(100deg, color-mix(in srgb, var(--marque) 72%, #ffffff), var(--marque));
  color: var(--sur-marque);
}
.rp-band__bg { position: absolute; inset: 0; z-index: 0; opacity: .18; }
.rp-band__bg .frame { height: 100%; min-height: 0; border-radius: 0; }
.rp-band__inner { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.rp-band__txt { flex: 1 1 460px; min-width: 0; }
.rp-band__txt .eyebrow { color: var(--sur-marque); opacity: .78; }
.rp-band h2 { color: var(--sur-marque); margin-bottom: 8px; }
.rp-band p { margin: 0; font-size: 16px; opacity: .92; }
.rp-band .rp-form { flex: 1 1 420px; min-width: 0; }

/* ---------- urgence : encart sombre, numero en grand ---------- */
.rp-urg {
  display: flex; flex-wrap: wrap; gap: 40px; align-items: center;
  background: var(--accent); color: var(--sur-marque);
  border-radius: var(--r-img); padding: 48px 44px;
}
.rp-urg > * { flex: 1 1 340px; min-width: 0; }
.rp-urg h2 { color: var(--sur-marque); margin-bottom: 12px; }
.rp-urg p { margin: 0; color: rgba(255, 255, 255, .78); line-height: 1.75; }
.rp-urg .rp-coches li { color: rgba(255, 255, 255, .78); }
.rp-urg .rp-coche { color: var(--marque); }
.rp-urg__act { text-align: right; }
.rp-urg__tel { display: block; font-family: var(--f-titre); font-weight: 900; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; letter-spacing: -.02em; color: var(--marque); margin-bottom: 18px; word-break: break-word; }

/* ---------- formulaires ---------- */
.rp-contact { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.rp-contact > * { min-width: 0; }
.rp-contact__form { flex: 1 1 55%; min-width: min(100%, 320px); border-radius: 16px; padding: 32px; }
.rp-contact__form:hover { transform: none; box-shadow: none; }
.rp-contact__col { flex: 1 1 32%; min-width: min(100%, 280px); display: grid; gap: 16px; }
.rp-coord { display: flex; gap: 14px; align-items: flex-start; padding: 22px; }
.rp-coord:hover { transform: none; box-shadow: none; }
.rp-coord h4 { margin-bottom: 6px; }
.rp-coord p { margin: 0 0 4px; color: var(--texte-doux); font-size: 15px; overflow-wrap: anywhere; }

/* Deux pistes comptees : un nombre impair de champs laissait le dernier
   s'etirer sur toute la rangee (630px contre 307px). */
.rp-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rp-champ { min-width: 0; display: grid; gap: 7px; font-size: 13px; font-weight: 600; color: var(--texte-doux); }
.rp-champ--long, .rp-form__pied { grid-column: 1 / -1; }
.rp-champ input, .rp-champ textarea {
  padding: 12px 14px; border-radius: var(--r-pill); border: 1px solid var(--bordure);
  background: var(--fond); font-family: var(--f-texte); font-size: 15px; font-weight: 400;
  color: var(--texte); resize: vertical; width: 100%;
}
.rp-champ input:focus, .rp-champ textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Dans la bande, le formulaire est pose sur le degrade : les etiquettes
   passent en clair, les champs perdent leur bordure. */
.rp-form--band .rp-champ { color: var(--sur-marque); }
.rp-form--band .rp-champ input, .rp-form--band .rp-champ textarea { border-color: transparent; }
/* Regle 7 : les deux portes se tiennent dans le meme pied. */
.rp-form__pied { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.rp-band__act { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.rp-footer__portes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 20px; }
/* La porte creuse : meme dessin de bouton, encre du panneau. Elle est
   declaree APRES les regles de panneau sombre qui la suivent, sinon la
   bande et le pied de page la repeindraient (specificite egale, l'ordre
   du fichier tranche). */
.rp-btn--creux { background: transparent; color: var(--accent); border-color: var(--bordure); }
.rp-form--band .rp-btn { background: var(--accent); color: var(--sur-marque); }
.rp-form--band .rp-btn--creux,
.rp-band__act .rp-btn--creux {
  background: transparent; color: var(--sur-marque); border-color: rgba(255, 255, 255, .42);
}

/* ---------- article : bande sombre d'ouverture, vue debordante, reperes ----
   Patron natif de la reference : le titre est annonce dans la bande a trame
   de croix (la meme que le hero et le fil d'ariane, sans couture entre les
   trois), la photo de tete deborde sous la bande et remonte dessus, puis le
   corps est ouvert par un bandeau de reperes pose en travers — jamais une
   colonne collante a gauche. */
.rp-art-bandeau { position: relative; overflow: hidden; background: var(--accent); color: var(--sur-marque); padding: 150px 0 132px; }
.rp-art-bandeau > .rp-wrap { position: relative; z-index: 2; max-width: 820px; }
.rp-art-bandeau h1 { margin-top: 14px; }
.rp-art-bandeau__meta { margin-top: 16px; color: rgba(255, 255, 255, .62); font-size: 15px; }
/* Le fil d'ariane porte deja la reserve du bandeau flottant : quand il
   precede, la bande n'a plus a la reserver une seconde fois. */
.rp-fil + .rp-art-bandeau { padding-top: 44px; }
/* La vue remonte sur la bande : c'est ce chevauchement qui fait la tete de
   la reference. La remontee ne depasse jamais la reserve basse de la bande. */
.rp-art-vue { margin-top: -100px; position: relative; z-index: 2; }
.rp-art__hero { aspect-ratio: 21 / 8; min-height: 0; border-radius: var(--r-img); box-shadow: var(--ombre); }
/* Reperes : le compte vient des donnees — repli a plat, jamais de colonnes
   fixes. min-width:0 pour qu'un intitule long ne pousse pas le bandeau. */
.rp-art__reperes {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
  padding: 20px 24px; margin-bottom: 48px;
  background: var(--fond); border: 1px solid var(--bordure); border-radius: var(--r-card);
  font-size: 15px;
}
.rp-art__reperes > * { min-width: 0; }
.rp-art__reperes-titre { font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: 13px; color: var(--accent); }
.rp-art__reperes a:hover { color: var(--accent); }
.rp-art__corps { min-width: 0; max-width: 780px; margin: 0 auto; }
.rp-art__corps h2 { font-size: 27px; margin: 40px 0 16px; }
.rp-art__corps h3 { margin: 30px 0 12px; }
.rp-art__corps p { color: var(--texte-doux); line-height: 1.85; margin: 0 0 18px; }
.rp-art__img { margin: 30px 0; }
.rp-encadre { background: var(--fond-2); border-left: 3px solid var(--marque); border-radius: 0 12px 12px 0; padding: 22px 24px; margin: 30px 0; }
.rp-encadre h4 { margin-bottom: 8px; }
.rp-encadre p { margin: 0; }

/* ---------- corps legal ---------- */
.rp-legal { display: grid; gap: 16px; max-width: 900px; margin: 0 auto; }
.rp-legal__bloc { background: var(--fond); border: 1px solid var(--bordure); border-radius: var(--r-card); padding: 30px; }
.rp-legal__bloc h3 { margin-bottom: 12px; }
.rp-legal__bloc p { color: var(--texte-doux); line-height: 1.8; margin: 0 0 14px; }

/* ---------- fil d'ariane : bande sombre d'ouverture de page ----------
   Le composant PageHero de la reference ouvre chaque page interne sur du
   navy a trame de croix. Le fil vit dedans. Quand un hero sombre suit,
   les deux fonds se rejoignent sans couture.
   Le 150px de tete est celui de .rp-pagehero dans la source : il reserve
   la hauteur du bandeau flottant. Quand un hero suit, c'est lui qui porte
   l'air et le fil se contente de sa reserve. */
.rp-fil { position: relative; overflow: hidden; background: var(--accent); color: rgba(255, 255, 255, .62); font-size: 14px; padding: 150px 0 24px; }
.rp-fil nav { position: relative; z-index: 2; }
.rp-fil ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rp-fil li + li::before { content: "/"; margin-right: 8px; color: rgba(255, 255, 255, .28); }
.rp-fil strong { color: var(--sur-marque); font-weight: 600; }
.rp-fil a:hover { color: var(--marque); }
/* Le fil colle au hero : pas de double bande sombre visible. */
.rp-fil + .rp-hero .rp-hero__inner { padding-top: 52px; }

/* ---------- avant / apres : curseur glissant ----------
   Les deux vues sont superposees, `--pos` decoupe celle d'avant.
   Le controle est un <input type=range> : clavier, tactile et souris
   marchent sans une ligne de JS specifique a l'appareil. */
/* L'avant/apres est servi dans la carte-projet native : le cadre glissant
   prend la place de la photo, la legende celle du corps de carte. */
.rp-ab-fig .ab { margin: 0; border-radius: 0; box-shadow: none; }
.rp-ab-fig:hover { transform: none; box-shadow: var(--ombre-carte); }
.rp-ab-fig .rp-chips { margin-top: 14px; }
.ab {
  position: relative; margin-bottom: 20px;
  aspect-ratio: 4 / 3; border-radius: var(--r-img); overflow: hidden;
  box-shadow: var(--ombre);
  --pos: 50%; touch-action: pan-y;
}
.ab__vue { position: absolute; inset: 0; }
.ab__vue .frame { height: 100%; min-height: 0; border-radius: 0; }
.ab__vue--avant { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ab__lab {
  position: absolute; top: 14px; z-index: 3; padding: 6px 13px; border-radius: 100px;
  background: var(--fond); color: var(--texte); font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; pointer-events: none;
}
.ab__lab--avant { left: 14px; }
.ab__lab--apres { right: 14px; background: var(--marque); color: var(--sur-marque); }
.ab__barre {
  position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 4;
  width: 3px; margin-left: -1.5px; background: var(--fond);
  box-shadow: 0 0 0 1px rgba(2, 6, 23, .10); pointer-events: none;
  display: grid; place-items: center;
}
.ab__poignee {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--marque); color: var(--sur-marque);
  display: grid; place-items: center; font-size: 18px;
  box-shadow: var(--ombre-carte); transition: transform .15s ease;
}
.ab:hover .ab__poignee { transform: scale(1.08); }
.ab__range {
  position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: ew-resize; appearance: none; background: transparent;
  /* La piste occupe tout le cadre : sans cette regle, un doigt pose dessus
     ne pourrait plus faire defiler la page verticalement. pan-y rend le
     defilement au navigateur et laisse le geste horizontal au curseur. */
  touch-action: pan-y;
}
.ab__range::-webkit-slider-thumb { appearance: none; width: 46px; height: 100%; cursor: ew-resize; }
.ab__range::-moz-range-thumb { width: 46px; height: 100%; border: 0; cursor: ew-resize; }
.ab__range:focus-visible ~ .ab__barre { outline: 2px solid var(--marque); outline-offset: 2px; }

/* ---------- pied sombre, colonnes INEGALES ----------
   La reference cadence 1.6fr 1fr 1fr 1.4fr : la marque et le NAP
   respirent, les colonnes de liens restent etroites. Le compte de
   colonnes venant des donnees, on reproduit ce rapport en bases flex. */
.rp-footer { background: var(--accent); color: var(--sur-marque); padding: 72px 0 26px; }
.rp-footer__grille { display: flex; flex-wrap: wrap; gap: 48px; }
.rp-footer__grille > * { min-width: 0; }
.rp-footer__marque { flex: 1.6 1 300px; }
.rp-footer__col { flex: 1 1 160px; }
.rp-footer__nap { flex: 1.4 1 250px; }
.rp-footer h4 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 18px; color: var(--sur-marque); }
.rp-footer a, .rp-footer li, .rp-footer p { color: rgba(255, 255, 255, .68); }
.rp-footer a:hover { color: var(--marque); }
.rp-footer ul { margin: 0; padding: 0; display: grid; gap: 11px; font-size: 14px; }
.rp-footer__logo { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.rp-footer__logo strong { font-family: var(--f-titre); font-weight: 900; font-size: 19px; letter-spacing: -.02em; color: var(--sur-marque); }
.rp-footer__marque p { font-size: 14px; line-height: 1.7; max-width: 320px; margin: 0; }
.rp-footer__nap li { display: flex; gap: 11px; align-items: flex-start; }
.rp-footer__nap i { color: var(--marque); font-style: normal; flex: none; }
.rp-footer__nap span { min-width: 0; overflow-wrap: anywhere; }
.rp-footer__bas { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .10); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; font-size: 13px; }
.rp-footer__bas p { margin: 0; }
.rp-footer__legal { display: flex; flex-wrap: wrap; gap: 20px; }
/* Les portes du pied : `.rp-footer a` (0,2,0) l'emporterait sur la classe
   de bouton (0,1,0), il faut la meme portee pour lui reprendre l'encre. */
.rp-footer .rp-btn--clair { background: var(--fond); color: var(--accent); }
.rp-footer .rp-btn--creux { background: transparent; color: var(--sur-marque); border-color: rgba(255, 255, 255, .38); }
.rp-footer .rp-btn:hover { color: inherit; }

/* ---------- facettes / produits / specs ----------
   Aucun compte de colonnes fige : flex-wrap + flex-basis, et min-width:0
   sur les enfants pour qu'un libelle long ne pousse pas la grille. */
.rp-fac { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.rp-fac__i {
  display: inline-flex; align-items: center; gap: 9px; min-width: 0;
  padding: 12px 22px; border-radius: 999px; border: 1px solid var(--bordure);
  background: var(--fond); color: var(--texte); font-size: 15px; font-weight: 600;
}
a.rp-fac__i:hover { border-color: var(--marque); color: var(--marque); }
.rp-fac__i--ici { background: var(--marque); border-color: var(--marque); color: var(--sur-marque); }
.rp-fac__i--ici .rp-coche { color: var(--sur-marque); }

.rp-prod__prix { margin-top: 16px; }
.rp-prod__prix strong { display: block; font-family: var(--f-titre); font-weight: 900; font-size: 30px; line-height: 1.1; letter-spacing: -.02em; }
.rp-prod .rp-fleche { margin-top: 18px; }

.rp-fiche { display: flex; flex-wrap: wrap; gap: 32px; align-items: stretch; }
.rp-fiche > * { min-width: 0; }
.rp-fiche__img { flex: 1 1 44%; min-width: min(100%, 300px); position: relative; min-height: 340px; border-radius: var(--r-card); overflow: hidden; }
.rp-fiche__img .frame { position: absolute; inset: 0; }
.rp-fiche__txt { flex: 1 1 48%; min-width: min(100%, 320px); padding: 34px; }
.rp-fiche__txt h1 { margin: 14px 0 0; }
.rp-fiche__txt > p { margin-top: 14px; }

.rp-specs { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; }
.rp-spec {
  flex: 1 1 46%; min-width: min(100%, 300px);
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 20px 24px;
}
.rp-spec dt { display: flex; align-items: center; gap: 10px; color: var(--texte-doux); font-size: 15px; min-width: 0; }
.rp-spec dd { margin: 0; text-align: right; min-width: 0; }
.rp-spec dd strong { font-weight: 800; }

/* ---------- appoints : les pieces montees par la coquille ---------- */
.rp-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; margin-top: 40px; }
.rp-actions > * { min-width: 0; }
.rp-svc__vig { width: 100%; border-radius: 14px; overflow: hidden; margin-bottom: 18px; }
.rp-svc__vig .frame { aspect-ratio: 16 / 10; }
.rp-svc__vig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rp-etape__vue { width: 100%; border-radius: 14px; overflow: hidden; margin: 14px 0 4px; }
.rp-etape__vue .frame { aspect-ratio: 8 / 5; }
.rp-etape__vue img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rp-lecture { max-width: 74ch; margin: 0 auto 34px; text-align: center; color: var(--texte-doux); }
.rp-lecture p + p { margin-top: 12px; }
.rp-rappel { margin: 34px auto 0; max-width: 760px; padding: 26px 30px; text-align: center; }
.rp-rappel h3 { margin: 0; }
.rp-rappel p { margin-top: 10px; color: var(--texte-doux); }
.rp-rappel .rp-actions { margin-top: 22px; }

/* ---------- points d'arret natifs RoofPro : 1000, 860, 620, 560 ---------- */
@media (max-width: 1000px) {
  .rp-hero__inner { padding: 76px 24px 84px; gap: 40px; }
  .rp-hero__txt, .rp-hero__media { flex-basis: 100%; }
  .rp-art__som { position: static; }
  .rp-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* La nav se replie sous la pilule au lieu de disparaitre. Le panneau se
     pose en absolu sur .rp-hd (la pilule garderait sinon sa hauteur
     ouverte) et deplie les deroulants en flux : au doigt, pas de survol. */
  .rp-hd__bascule { display: flex; }
  .rp-hd__nav { display: none; position: absolute; top: calc(100% + 8px); left: 24px; right: 24px;
    flex-direction: column; align-items: stretch; gap: 2px; margin: 0; padding: 14px 20px 18px;
    background: var(--fond); border: 1px solid var(--bordure); border-radius: 20px;
    box-shadow: var(--ombre); max-height: calc(100vh - 110px); overflow-y: auto; }
  .rp-hd--ouvert .rp-hd__nav { display: flex; }
  .rp-hd__lien, .rp-drop__tete { padding: 9px 0; }
  .rp-drop { position: static; }
  .rp-drop__chev { display: none; }
  .rp-drop__panneau { position: static; transform: none; opacity: 1; visibility: visible; padding: 0 0 6px 14px; }
  .rp-drop__grille { display: block; gap: 6px; padding: 0; background: none;
    border: 0; box-shadow: none; white-space: normal; min-width: 0; max-width: none; }
  .rp-drop__cols { display: block; }
  /* La vitrine est un confort d ecran large : au doigt, elle pousserait les
     liens hors de vue. Le volet redescend a la liste seule. */
  .rp-drop__vit { display: none; }
  .rp-drop__lien { display: block; padding: 6px 0; }
}

@media (max-width: 860px) {
  :root { --pad-section: 72px; }
  .rp-bloc { gap: 36px; }
  .rp-colonnes { columns: 1; }
  /* Une etape par ligne : le filet de liaison n'a plus de sens. */
  .rp-etape { flex-basis: 100%; }
  .rp-etape__filet { display: none; }
  .rp-g2 { grid-template-columns: minmax(0, 1fr); }
  .rp-b2b__carte, .rp-b2b__media { flex-basis: 100%; }
  .rp-b2b--inv .rp-b2b__media { order: 0; }
  .rp-loc__media, .rp-loc__carte { flex-basis: 100%; }
  .rp-urg { padding: 36px 30px; }
  .rp-urg__act { text-align: left; }
  .rp-band__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 620px) {
  :root { --pad-section: 56px; }
  body { padding-top: 84px; }
  .rp-wrap, .rp-hd { padding-left: 16px; padding-right: 16px; }
  .rp-hd__pilule { padding: 8px 8px 8px 16px; gap: 12px; }
  .rp-hero__inner { padding: 56px 16px 64px; }
  .rp-g3, .rp-g4, .rp-form { grid-template-columns: minmax(0, 1fr); }
  .rp-stat { flex-basis: 100%; }
  .rp-coches--duo { grid-template-columns: 1fr; }
  .rp-bloc__paire .frame:first-child { margin-top: 0; }
  .rp-card, .rp-why, .rp-loc__carte, .rp-b2b__carte, .rp-legal__bloc, .rp-contact__form { padding: 22px; }
  .rp-faq__item { padding: 2px 16px; }
  .rp-faq__item p { padding-right: 0; }
  /* Le panneau du deroulant reste AFFICHE : replie dans le menu, il porte
     le seul acces aux pages enfants. */
  .marquee { padding: 22px 0; }
  .rp-bandeau .frame, .rp-art__hero { aspect-ratio: 16 / 9; }
  .rp-hd__logo { font-size: 15px; gap: 8px; overflow: hidden; text-overflow: ellipsis; }
  .rp-hd__mark { width: 30px; height: 30px; font-size: 10px; }
  .rp-hd__cta .rp-btn { font-size: 12px; padding: 9px 15px; }
  .rp-hero__flottant { left: 14px; bottom: 14px; padding: 12px 14px; }
  .rp-hero__reperes { gap: 14px 22px; margin-top: 26px; }
  .rp-hero__sous { font-size: 16px; margin: 18px 0 26px; }
  .rp-band { padding: 44px 0; }
  .rp-footer__bas { flex-direction: column; align-items: flex-start; }
}

/* ================= SIGNATURES DE FORME =================
   Traits releves EN LIGNE sur la reference, portes ici en CSS pur.
   Documentation lisible : roofpro/signatures.md */

/* SIGNATURE — la vignette de projet est un COUVERCLE : deux coins hauts
   arrondis, deux coins bas vifs, la photo coiffe la carte au lieu d y
   flotter. C est l unite de forme dominante du modele (relevee neuf
   fois), et elle ne se retrouve nulle part ailleurs dans la coquille. */
.rp-proj__img .frame {
  border-radius: var(--r-card) var(--r-card) 0 0;
}

/* SIGNATURE — l image de la bande d appel ne s arrete pas net en haut :
   elle se DISSOUT vers le haut par un masque en degre, le degrade de
   marque reprenant seul le tiers superieur. Voile decoratif, donc
   pointer-events: none. */
.rp-band__bg {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 65%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 65%, #000 100%);
  pointer-events: none;
}

/* SIGNATURE — le halo des cartes est LARGE, BAS et retracte : un flou de
   30px tire vers l interieur par un etalement negatif, jamais une ombre
   franche collee au bord. Sept occurrences sur le modele. */
.rp-proj, .rp-card, .rp-why {
  box-shadow: 0 1px 30px -10px color-mix(in srgb, var(--texte) 25%, transparent);
}
.rp-proj:hover, .rp-card:hover {
  box-shadow: 0 1px 50px 0 color-mix(in srgb, var(--texte) 25%, transparent);
}

/* SIGNATURE — la pastille d icone porte une ENTAILLE ronde au coin haut
   droit, evidee par un masque radial : le carre arrondi est mordu, jamais
   plein. Seule marque evidee de la coquille. */
.rp-pastille {
  -webkit-mask-image: radial-gradient(circle 9px at 100% 0, transparent 0 100%, #000 100%);
  mask-image: radial-gradient(circle 9px at 100% 0, transparent 0 100%, #000 100%);
}

/* SIGNATURE — la fleche de lien est doublee d un CHEVRON decoupe qui la
   precede en filigrane : la meme pointe que le sigle du modele, posee en
   pseudo-element, jamais un glyphe dans le texte lu. */
.rp-fleche { position: relative; padding-left: 13px; }
.rp-fleche::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 7px; height: 10px;
  margin-top: -5px;
  background: color-mix(in srgb, var(--accent) 45%, transparent);
  clip-path: polygon(0 0, 26% 0, 100% 50%, 26% 100%, 0 100%, 60% 50%);
  pointer-events: none;
}
a:hover .rp-fleche::before { background: var(--accent); }

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


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

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