/* Coquille NETTOYAGE-FACADE — SOURCE unique du style.
   dist/style.css est une SORTIE, ecrasee a chaque rendu : ne jamais l'editer.

   Style releve sur la reference en ligne (rennox.framer.website, 1440x900) :
     - titres en condensee, CAPITALES, interlettrage negatif, interligne 0.95 ;
     - boutons a rayon 6px, cartes et photos a rayon 10px ;
     - fond clair, blocs sombres en --marque, un seul accent ;
     - filets fins partout, aucune ombre portee franche.

   Huit variables de couleur, aucune autre. Aucun hex en dur : les nuances
   intermediaires sont calculees en color-mix a partir des huit. --sur-marque
   est calcule par render.mjs, jamais choisi ici. */

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

:root {
  --pas: 24px;
  --large: 1240px;
  --r-b: 6px;    /* boutons  — mesure sur la reference */
  --r-c: 10px;   /* cartes et photos */
  --filet: 1px solid var(--bordure);
  /* Condensee : la reference compose ses titres en Bebas Neue. La coquille
     ne charge aucune police distante (dist/ doit rester autonome et
     hors-ligne) : pile condensee locale, meme dessin, memes proportions. */
  --titre: "Bebas Neue", "Oswald", "Haettenschweiler", "Arial Narrow", "Liberation Sans Narrow", sans-serif;
  --corps: "Inter", "Helvetica Neue", system-ui, -apple-system, sans-serif;
}

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

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--fond);
  color: var(--texte);
  font: 16px/1.65 var(--corps);
  letter-spacing: -0.005em;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* Cadre : tant qu'aucune photo n'est fournie, il tient sa place et affiche
   son intitule en petit. C'est le rendu attendu d'une coquille vide. */
.frame {
  position: relative;
  min-height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  text-align: center;
  overflow: hidden;
  background: color-mix(in srgb, var(--texte) 7%, var(--fond));
  border: var(--filet);
  color: var(--texte-doux);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.02em;
}
.frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame--r10 { border-radius: var(--r-c); }
.frame--plein { min-height: 100%; height: 100%; border: 0; border-radius: 0; }
.frame--haut { min-height: 520px; height: 100%; }
.frame--carte { min-height: 380px; }

/* ------------------------------------------------------------ typographie */
.nf-t {
  margin: 0 0 16px;
  font-family: var(--titre);
  font-weight: 400;
  text-transform: uppercase;
  line-height: .95;
  letter-spacing: -0.02em;
  font-size: clamp(30px, 4.2vw, 60px);
  overflow-wrap: anywhere;
}
/* Le titre geant porte le mot d'accent souligne : en petit ecran il passe sur
   plusieurs lignes et l'interligne serre du grand format ferait toucher le
   trait a la ligne suivante. L'interligne se desserre donc avec la casse. */
.nf-t--geant { font-size: clamp(32px, 4.6vw, 64px); line-height: 1.04; }
@media (min-width: 861px) { .nf-t--geant { line-height: .98; } }
.nf-t--moyen { font-size: clamp(26px, 3vw, 40px); }
.nf-t--carte {
  display: block;
  margin: 0 0 8px;
  font-size: clamp(19px, 1.7vw, 24px);
}
.nf-acc { font-style: normal; color: var(--accent); }
/* Sur un fond de marque, --accent n'est pas garanti lisible : la seule paire
   mesuree par le gate est sur-marque / marque. Le mot d'accent garde donc
   l'encre garantie et porte l'accent en soulignement, jamais en remplissage.
   Aucune 9e variable n'est introduite pour cela. */
.nf-hero .nf-acc,
.nf-why__c--sombre .nf-acc,
.nf-cta__in .nf-acc,
.nf-ft .nf-acc {
  color:var(--sur-bande,var(--sur-marque));
  text-decoration: underline;
  /* Le trait porte l'accent, mais accent sur marque n'est garanti nulle part :
     il est donc eclairci vers l'encre garantie pour rester visible sur toute
     palette. Calcul, pas 9e variable. A .1em sous un titre geant il venait
     toucher la ligne suivante — fin et decale, il souligne sans coller. */
  text-decoration-color: color-mix(in srgb, var(--accent) 60%, var(--sur-marque));
  text-decoration-thickness: .05em;
  text-underline-offset: .16em;
}

/* Pastille-photo inline : l'idiome de titre de la reference. */
.nf-past {
  display: inline-block;
  vertical-align: middle;
  width: 1.35em;
  height: .82em;
  margin: 0 .18em 0 .06em;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--accent) 22%, var(--fond));
}
.nf-past img { width: 100%; height: 100%; object-fit: cover; }
.nf-past--nu { background: color-mix(in srgb, var(--accent) 30%, var(--fond)); }

.nf-oeil {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.nf-oeil i { width: 18px; height: 1px; background: var(--accent); }

/* ---------------------------------------------------------------- boutons */
.nf-b {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px 14px;
  border: 1px solid transparent;
  border-radius: var(--r-b);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s;
}
.nf-b + .nf-b { margin-left: 10px; }
.nf-b__f { width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }
.nf-b--accent { background: var(--accent); color: var(--fond); }
.nf-b--accent:hover { background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque)); }
.nf-b--sombre { background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque)); }
.nf-b--sombre:hover { background: var(--accent); color: var(--fond); }
.nf-b--contour { background: transparent; color: var(--texte); border-color: var(--bordure); }
.nf-b--contour:hover { border-color: var(--accent); color: var(--accent); }
.nf-b--plein { width: 100%; justify-content: center; margin-top: 6px; }

/* ------------------------------------------------------- rythme de section */
.nf-sec {
  max-width: var(--large);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 104px) var(--pas);
}
.nf-sec--doux {
  max-width: none;
  background: var(--fond-2);
}
.nf-sec--doux > * { max-width: var(--large); margin-left: auto; margin-right: auto; }

.nf-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 44px;
}
.nf-tete__g { flex: 1 1 460px; min-width: 0; }
.nf-tete__d { flex: 0 0 auto; }
.nf-tete__c { max-width: 62ch; color: var(--texte-doux); }
.nf-tete--centre { flex-direction: column; align-items: center; text-align: center; }
.nf-tete--centre .nf-tete__g { flex: 1 1 auto; }
.nf-tete--centre .nf-tete__c { margin-inline: auto; }

/* --------------------------------------------------------------- 1. header */
.nf-hd {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--fond) 92%, transparent);
  border-bottom: var(--filet);
  backdrop-filter: blur(10px);
}
.nf-hd.is-defile { border-bottom-color: color-mix(in srgb, var(--texte) 22%, transparent); }

/* Bande de service : fond de marque, encre CALCULEE. Elle ne fixe aucune
   largeur de colonne — les renseignements s enroulent selon leur nombre. */
.nf-hd__sv { background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque)); }
.nf-hd__svin {
  max-width: var(--large);
  margin: 0 auto;
  padding: 9px var(--pas);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 32px;
  font-size: 13.5px;
}
.nf-hd__svi {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  color: color-mix(in srgb, var(--sur-marque) 88%, transparent);
}
a.nf-hd__svi:hover { color:var(--sur-bande,var(--sur-marque)); }
.nf-hd__svi .nf-ic { width: 17px; height: 17px; font-size: 15px; }

/* Appel direct : la pastille porte le glyphe, le numero reste lisible seul.
   Sous 900px le numero s efface et la pastille suffit. */
.nf-hd__tel { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.nf-hd__telP {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 999px; flex: 0 0 auto;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}
.nf-hd__telL { font-weight: 700; white-space: nowrap; }
.nf-hd__tel:hover .nf-hd__telL { color: var(--accent); }
.nf-hd__in {
  max-width: var(--large);
  margin: 0 auto;
  padding: 14px var(--pas);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.nf-hd__m {
  flex: 0 0 auto;
  font-family: var(--titre);
  font-size: 26px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.nf-hd__nav {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
}
.nf-hd__l {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}
.nf-hd__l i { width: 5px; height: 5px; border-bottom: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.nf-hd__l:hover, .nf-hd__l.est-actif { color: var(--accent); }
.nf-hd__sm { position: relative; }
/* Le volet est CENTRE sous sa tete et son decalage est le `padding-top` du
   conteneur, jamais une marge : la souris ne traverse aucun vide entre le
   lien et le panneau. Fond, filet et rayon descendent sur `.nf-hd__pin`. */
.nf-hd__pan {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  padding-top: 14px;
}
.nf-hd__pin {
  display: flex; align-items: flex-start; gap: 26px;
  min-width: 560px; max-width: min(94vw, 820px);
  padding: 20px 22px;
  background: var(--fond);
  border: var(--filet);
  border-radius: var(--r-c);
}
.nf-hd__cols { flex: 1 1 auto; min-width: 0; }
/* La vitrine : la carte nettoyage-facade en reduction. Visuel a hauteur FIXE,
   sinon le `min-height` du cadre etire tout le volet ; `flex: 0 0` pour qu une
   colonne de liens longue ne la reduise pas a un mot par ligne. */
.nf-hd__vit { flex: 0 0 240px; display: grid; gap: 8px; align-content: start; }
.nf-hd__vitPh { min-height: 0; height: 126px; width: 100%; border-radius: var(--r-c); }
.nf-hd__vitE { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux); }
.nf-hd__vitN { font-size: 15px; line-height: 1.35; }
.nf-hd__vitX { font-size: 13px; color: var(--texte-doux); line-height: 1.5; }
.nf-hd__vitZ { font-size: 14px; font-weight: 600; color: var(--accent); justify-self: start; }
.nf-hd__sm:hover .nf-hd__pan,
.nf-hd__sm:focus-within .nf-hd__pan { display: block; }
.nf-hd__gr + .nf-hd__gr { margin-top: 12px; padding-top: 12px; border-top: var(--filet); }
.nf-hd__gr b { display: block; margin-bottom: 6px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux); }
.nf-hd__gr a, .nf-hd__gr span { display: block; padding: 4px 0; font-size: 14px; }
.nf-hd__gr a:hover { color: var(--accent); }
.nf-hd__d {
  flex: 0 0 auto; margin-left: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
}
/* Le bouton de menu et sa case n'existent qu'en dessous de 860px. */
.nf-hd__chk { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nf-hd__bt { display: none; }

/* ----------------------------------------------------------------- 2. hero */
.nf-hero { position: relative; background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque)); }
.nf-hero__in {
  position: relative;
  max-width: var(--large);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 110px) var(--pas) clamp(40px, 5vw, 70px);
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 32px;
}
.nf-hero__txt { flex: 1 1 460px; min-width: 0; align-self: flex-end; }
/* Le mot a gauche, la case photo a droite, dans la meme rangee : la scene
   sombre est portee par la SECTION (background ci-dessus), jamais par la
   photo — qui n'est plus qu'une case bornee tenue par le flex de la rangee,
   etiree a la hauteur du mot via align-items:stretch. */
.nf-hero__fond {
  position: relative;
  flex: 1 1 420px;
  min-width: 0;
  min-height: 660px;
  border-radius: var(--r-c);
  overflow: hidden;
}
.nf-hero__pill {
  display: inline-block;
  margin-bottom: 18px;
  padding: 8px 14px;
  border: 1px solid color-mix(in srgb, var(--sur-marque) 35%, transparent);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.nf-hero__s { max-width: 56ch; margin-bottom: 26px; color: color-mix(in srgb, var(--sur-marque) 75%, transparent); }
.nf-hero__act { display: flex; flex-wrap: wrap; gap: 10px; }
.nf-hero__act .nf-b + .nf-b { margin-left: 0; }
.nf-hero .nf-b--contour { color:var(--sur-bande,var(--sur-marque)); border-color: color-mix(in srgb, var(--sur-marque) 40%, transparent); }
.nf-hero__c {
  flex: 0 1 330px;
  min-width: 0;
  padding: 26px 24px;
  background: var(--fond);
  color: var(--texte);
  border-radius: var(--r-c);
}
.nf-hero__ct { margin: 14px 0 8px; font-family: var(--titre); font-weight: 400; text-transform: uppercase; font-size: 24px; line-height: 1; }
.nf-hero__c p { color: var(--texte-doux); font-size: 14px; }
.nf-hero__rang {
  position: relative;
  max-width: var(--large);
  margin: 0 auto;
  padding: 0 var(--pas) clamp(40px, 5vw, 64px);
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.nf-hero__r {
  flex: 1 1 23%;
  min-width: min(100%, 220px);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--sur-marque) 25%, transparent);
}
.nf-hero__r > div { min-width: 0; }
.nf-hero__r b { display: block; font-size: 15px; }
.nf-hero__r span { font-size: 13px; color: color-mix(in srgb, var(--sur-marque) 70%, transparent); }

/* ---------------------------------------------------------------- icones */
.nf-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  font-size: 15px;
  line-height: 1;
  color: var(--accent);
}
.nf-ic i { display: block; width: 16px; height: 2px; background: currentColor; box-shadow: 0 5px 0 currentColor, 0 -5px 0 currentColor; }
.nf-ic--accent { color: var(--accent); }
/* Le glyphe repose sur son filet. Sa taille est celle de la case, pas celle
   du texte courant : a 15px dans une case de 44px il se lisait comme une
   poussiere posee au-dessus d'un trait, pas comme un pictogramme. */
.nf-ic--filet { width: 44px; height: 44px; border-bottom: 2px solid var(--accent); align-items: flex-end; padding-bottom: 6px; font-size: 26px; }
.nf-ic--carre { width: 42px; height: 42px; border: var(--filet); border-radius: var(--r-b); background: color-mix(in srgb, var(--accent) 10%, var(--fond)); }

/* ------------------------------------------------------------- 3. services */
/* Regle 3 : pistes comptees, jamais de flex-grow. Le compte vient des
   donnees, mais la largeur de carte est fixee par la grille — une carte
   orpheline en fin de ligne garde la largeur de ses soeurs, elle ne s'etire
   plus jamais pour comber la ligne. */
.nf-serv__g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) { .nf-serv__g { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .nf-serv__g { grid-template-columns: 1fr; } }
.nf-serv__c {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 56px;
  min-height: 290px;
  padding: 22px;
  border: var(--filet);
  border-radius: var(--r-c);
  transition: border-color .18s, background .18s;
}
a.nf-serv__c:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--fond)); }
.nf-serv__h { display: block; }

/* Une carte de service peut porter sa photo : elle prend alors la place
   du grand vide, l'espacement se resserre. */
.nf-serv__c:has(.nf-serv__v) { gap: 18px; }
.nf-serv__v { display: block; }
.nf-serv__v .frame { min-height: 150px; }

/* La photo d'une etape du parcours. */
.nf-pro__v { display: block; margin: 12px 0; }
.nf-pro__v .frame { min-height: 150px; }

/* L'encart de fin de FAQ : une carte a part, jamais une question deguisee. */
.nf-faq__e { margin-top: 22px; padding: 22px; border: var(--filet); border-radius: var(--r-c); }
.nf-faq__e p { margin: 8px 0 14px; }
.nf-serv__b { display: block; min-width: 0; }
.nf-serv__x { display: block; color: var(--texte-doux); font-size: 14px; }
.nf-serv__l { display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }

/* ---------------------------------------------------------------- 4. intro */
.nf-intro { display: flex; flex-wrap: wrap; gap: 28px 48px; }
.nf-intro__t { flex: 1 1 40%; min-width: min(100%, 300px); }
.nf-intro__p { flex: 1 1 52%; min-width: min(100%, 300px); columns: 2 260px; column-gap: 34px; color: var(--texte-doux); }
.nf-intro__p p { break-inside: avoid; }

/* ------------------------------------------------------------- 5. blocsSeo */
.nf-bloc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px 48px;
}
.nf-bloc--inv { flex-direction: row-reverse; }
.nf-bloc__v { position: relative; flex: 1 1 44%; min-width: min(100%, 300px); }
.nf-bloc__v .frame { min-height: 340px; }
.nf-bloc__v2 { margin-top: 14px; min-height: 150px !important; }
.nf-bloc__n {
  position: absolute;
  top: -14px;
  left: -8px;
  font-family: var(--titre);
  font-size: clamp(46px, 6vw, 82px);
  line-height: 1;
  color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.nf-bloc__t { flex: 1 1 44%; min-width: min(100%, 300px); color: var(--texte-doux); }
/* Le corps du bloc est en texte-doux ; le H2, lui, reste a l'encre pleine :
   herite tel quel, un titre de bloc SEO se lisait plus pale qu'un paragraphe. */
.nf-bloc__t .nf-t { color: var(--texte); }
.nf-bloc__t .nf-b { margin-top: 16px; }

/* --------------------------------------------------------------- 6. expertise */
.nf-exp { display: flex; flex-wrap: wrap; gap: 32px 44px; align-items: stretch; }
.nf-exp__v { flex: 1 1 42%; min-width: min(100%, 300px); }
.nf-exp__p { flex: 1 1 48%; min-width: min(100%, 300px); }
.nf-exp__p > p { color: var(--texte-doux); }
.nf-exp__l { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 18px; }
.nf-exp__l li { flex: 1 1 46%; min-width: min(100%, 230px); display: flex; gap: 12px; }
.nf-exp__l li > div { min-width: 0; }
.nf-exp__l b { display: block; font-size: 15px; }
.nf-exp__l span { font-size: 13px; color: var(--texte-doux); }
.nf-exp__p .nf-b { margin-top: 24px; }

/* ---------------------------------------------------- reperes et etiquettes */
.nf-rep { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.nf-rep li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
/* Carre coche. Vide, il se lisait comme une case a cocher non cochee : la
   coche est donc dessinee dedans, sans image ni glyphe. */
.nf-rep__c { position: relative; flex: 0 0 auto; width: 14px; height: 14px; margin-top: 4px; border: 1px solid var(--accent); border-radius: 3px; background: color-mix(in srgb, var(--accent) 22%, transparent); }
.nf-rep__c::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 7px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(42deg); }
.nf-rep--2 { flex-direction: row; flex-wrap: wrap; }
.nf-rep--2 li { flex: 1 1 44%; min-width: min(100%, 210px); }
.nf-rep--rang { flex-direction: row; flex-wrap: wrap; gap: 10px 22px; }

.nf-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.nf-tag {
  padding: 6px 11px;
  border: var(--filet);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

/* -------------------------------------------------------------- 7. marques */
/* Clippe volontairement : un debordement apparent ici est un faux positif. */
.nf-mq { overflow: hidden; padding: 22px 0; border-block: var(--filet); }
.nf-mq__p { display: flex; width: max-content; gap: 54px; animation: nf-def 34s linear infinite; }
.nf-mq__i { font-family: var(--titre); font-size: 26px; text-transform: uppercase; color: color-mix(in srgb, var(--texte) 40%, var(--fond)); white-space: nowrap; }
@keyframes nf-def { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .nf-mq__p { animation: none; } }

/* --------------------------------------------------------------- 8. whyUs */
.nf-why__d { display: flex; flex-wrap: wrap; gap: 16px; }
.nf-why__c, .nf-why__v { flex: 1 1 30%; min-width: min(100%, 260px); }
.nf-why__c {
  padding: 26px 24px;
  border: var(--filet);
  border-radius: var(--r-c);
  background: var(--fond);
}
.nf-why__c p { color: var(--texte-doux); font-size: 14px; }
.nf-why__c--sombre { background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque)); border-color: transparent; }
.nf-why__c--sombre p { color: color-mix(in srgb, var(--sur-marque) 75%, transparent); }
.nf-why__c--sombre .nf-ic { color: var(--accent); }
.nf-why__v .frame { min-height: 100%; }
/* En dessous de 640px, .nf-why__d n a plus qu une colonne : .nf-why__v perd
   le voisin dont il empruntait la hauteur via min-height:100%, un pourcentage
   qui se resout a rien contre un parent a hauteur automatique. Le cadre
   retombe alors a la hauteur de son seul contenu (quelques dizaines de
   pixels) — un plancher fixe rend la case au cadre. */
@media (max-width: 640px) { .nf-why__v .frame { min-height: 260px; } }

/* ----------------------------------------------------------------- 9. b2b */
/* Regle 3 : pistes comptees. */
.nf-b2b__g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) { .nf-b2b__g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .nf-b2b__g { grid-template-columns: 1fr; } }
.nf-b2b__c {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: var(--fond);
  border: var(--filet);
  border-radius: var(--r-c);
}
.nf-b2b__c > header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.nf-b2b__m { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.nf-b2b__c p { color: var(--texte-doux); font-size: 14px; }
.nf-b2b__v { margin-top: auto; padding-top: 20px; min-height: 160px; }

/* -------------------------------------------------------------- 10. zones */
.nf-zon__b { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }
.nf-zon__b .frame { flex: 1 1 30%; min-width: min(100%, 230px); min-height: 210px; }
/* Regle 3 : pistes comptees. */
.nf-zon__g { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1100px) { .nf-zon__g { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .nf-zon__g { grid-template-columns: 1fr; } }
.nf-zon__z {
  padding: 14px 16px;
  border: var(--filet);
  border-radius: var(--r-b);
  transition: border-color .18s, color .18s;
}
a.nf-zon__z:hover { border-color: var(--accent); color: var(--accent); }
.nf-zon__z b { display: block; font-size: 15px; }
.nf-zon__z span { display: block; font-size: 13px; color: var(--texte-doux); }
.nf-zon__t { display: inline-block; margin-top: 6px; font-style: normal; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }

/* ------------------------------------------------------------- 11. process */
.nf-pro__r { display: flex; flex-wrap: wrap; gap: 20px; }
.nf-pro__e {
  flex: 1 1 23%;
  min-width: min(100%, 230px);
  padding-top: 22px;
  border-top: 2px solid var(--bordure);
}
.nf-pro__n {
  display: block;
  margin-bottom: 12px;
  font-family: var(--titre);
  font-size: 34px;
  line-height: 1;
  color: var(--accent);
}
.nf-pro__e p { color: var(--texte-doux); font-size: 14px; }
.nf-pro__e .nf-ic { margin-bottom: 8px; }

/* ------------------------------------------------------------ 12. chiffres */
.nf-ch { position: relative; }
.nf-ch__f { position: absolute; inset: 0; opacity: .07; pointer-events: none; }
.nf-ch__g { position: relative; display: flex; flex-wrap: wrap; gap: 24px; }
.nf-ch__c { flex: 1 1 23%; min-width: min(100%, 200px); }
.nf-ch__n {
  display: block;
  font-family: var(--titre);
  font-size: clamp(48px, 6.4vw, 86px);
  line-height: .9;
  letter-spacing: -0.03em;
}
.nf-ch__n em { font-style: normal; color: var(--accent); }
.nf-ch__c b { display: block; margin-top: 10px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux); }
.nf-ch__c p { margin-top: 6px; font-size: 14px; color: var(--texte-doux); }

/* ----------------------------------------------------------------- 13. map */
.nf-map { position: relative; display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.nf-map__v { flex: 1 1 60%; min-width: min(100%, 300px); }
.nf-map__c {
  flex: 1 1 30%;
  min-width: min(100%, 260px);
  align-self: center;
  padding: 26px 24px;
  background: var(--fond);
  border: var(--filet);
  border-radius: var(--r-c);
}
.nf-map__c address { font-style: normal; display: flex; flex-direction: column; gap: 4px; color: var(--texte-doux); }

/* ---------------------------------------------------------------- 14. avis */
.nf-av { display: flex; flex-wrap: wrap; gap: 30px 48px; align-items: flex-start; }
.nf-av__g { flex: 1 1 32%; min-width: min(100%, 260px); position: sticky; top: 96px; }
.nf-av__c { color: var(--texte-doux); }
.nf-av__d { flex: 1 1 56%; min-width: min(100%, 300px); display: flex; flex-direction: column; gap: 18px; }
.nf-av__b { margin: 0; padding: 26px 24px; border: var(--filet); border-radius: var(--r-c); }
.nf-av__b blockquote {
  margin: 0 0 16px;
  font-family: var(--titre);
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.nf-av__e { display: block; width: 92px; height: 16px; margin-bottom: 14px; background: color-mix(in srgb, var(--texte) 18%, var(--fond)); border-radius: 3px; overflow: hidden; }
.nf-av__e i { display: block; height: 100%; width: var(--part, 0%); background: var(--accent); }
.nf-av__b figcaption b { display: block; font-size: 14px; }
.nf-av__b figcaption span { font-size: 13px; color: var(--texte-doux); }

/* ----------------------------------------------------------------- 15. faq */
.nf-faq { display: flex; flex-wrap: wrap; gap: 30px 48px; align-items: flex-start; }
.nf-faq__g { flex: 1 1 34%; min-width: min(100%, 260px); }
.nf-faq__g p { color: var(--texte-doux); }
.nf-faq__d { flex: 1 1 54%; min-width: min(100%, 300px); display: flex; flex-direction: column; gap: 12px; }
.nf-faq__q { border: var(--filet); border-radius: var(--r-c); background: var(--fond); }
.nf-faq__q summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 15px;
}
.nf-faq__q summary::-webkit-details-marker { display: none; }
.nf-faq__q summary i {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}
.nf-faq__q summary i::before,
.nf-faq__q summary i::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background: var(--accent);
  transition: transform .2s;
}
.nf-faq__q summary i::after { transform: rotate(90deg); }
.nf-faq__q[open] summary i::after { transform: rotate(0deg); }
.nf-faq__r { padding: 0 20px 18px; color: var(--texte-doux); font-size: 15px; }

/* ------------------------------------------------------------ 16. maillage */
.nf-mail__g { display: flex; flex-direction: column; }
.nf-mail__l {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  padding: 20px 0;
  border-top: var(--filet);
}
.nf-mail__l:last-child { border-bottom: var(--filet); }
.nf-mail__v { flex: 0 0 auto; width: 130px; min-height: 92px !important; }
.nf-mail__t { flex: 1 1 300px; min-width: 0; }
.nf-mail__m { display: block; margin-bottom: 6px; font-style: normal; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.nf-mail__t > span { color: var(--texte-doux); font-size: 14px; }
.nf-mail__f { flex: 0 0 auto; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
a.nf-mail__l:hover .nf-t--carte { color: var(--accent); }

/* ------------------------------------------------------------- 17. ctaBand */
.nf-cta { max-width: var(--large); }
.nf-cta__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px 40px;
  padding: clamp(26px, 3vw, 40px);
  background:var(--marque);--sur-bande:var(--sur-marque);
  color:var(--sur-bande,var(--sur-marque));
  border-radius: var(--r-c);
}
.nf-cta__v { flex: 1 1 34%; min-width: min(100%, 260px); }
.nf-cta__v .frame { min-height: 260px; background: color-mix(in srgb, var(--marque) 82%, var(--texte)); color:var(--sur-bande,var(--sur-marque)); border-color: color-mix(in srgb, var(--sur-marque) 22%, transparent); }
.nf-cta__t { flex: 1 1 46%; min-width: min(100%, 280px); }
.nf-cta__t > p { color: color-mix(in srgb, var(--sur-marque) 76%, transparent); }
.nf-cta__act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.nf-cta__act .nf-b + .nf-b { margin-left: 0; }
.nf-cta .nf-b--contour { color:var(--sur-bande,var(--sur-marque)); border-color: color-mix(in srgb, var(--sur-marque) 40%, transparent); }
.nf-cta .nf-f span { color: color-mix(in srgb, var(--sur-marque) 72%, transparent); }
.nf-cta .nf-f input, .nf-cta .nf-f textarea { background: transparent; color:var(--sur-bande,var(--sur-marque)); border-color: color-mix(in srgb, var(--sur-marque) 30%, transparent); }
.nf-cta .nf-b--sombre { background: var(--accent); color: var(--fond); }

/* ----------------------------------------------------------- 18. fil d'ariane */
.nf-fil { max-width: var(--large); margin: 0 auto; padding: 18px var(--pas) 0; }
.nf-fil ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-doux); }
.nf-fil li { display: inline-flex; align-items: center; gap: 8px; }
.nf-fil a:hover { color: var(--accent); }
.nf-fil i { width: 4px; height: 4px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }

/* -------------------------------------------------------- 19. avant / apres */
/* Regle 2 du contrat : photos SUPERPOSEES, decoupe par --pos, un vrai
   <input type=range> en overlay — souris, tactile et clavier d'office. */
.nf-aa__g { display: flex; flex-wrap: wrap; gap: 22px; }
.nf-aa__c { flex: 1 1 46%; min-width: min(100%, 280px); margin: 0; }
.ab {
  position: relative;
  border-radius: var(--r-c);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--fond-2);
  touch-action: pan-y;
}
.ab__vue { position: absolute; inset: 0; }
.ab__vue .frame { height: 100%; min-height: 100%; border: 0; border-radius: 0; }
.ab__vue--avant { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.ab__lab {
  position: absolute;
  bottom: 14px;
  padding: 6px 11px;
  border-radius: var(--r-b);
  background: color-mix(in srgb, var(--marque) 82%, transparent);
  color:var(--sur-bande,var(--sur-marque));
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ab__lab--avant { left: 14px; }
.ab__lab--apres { right: 14px; }
.ab__barre { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; background: var(--fond); transform: translateX(-1px); }
.ab__poignee {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42px;
  height: 42px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: var(--fond);
  border: 2px solid var(--accent);
}
.ab__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.ab__range:focus-visible { opacity: 1; outline: 2px solid var(--accent); outline-offset: 2px; }
.nf-aa__c figcaption { padding-top: 16px; }
.nf-aa__c figcaption i { font-style: normal; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.nf-aa__c figcaption p { margin-top: 8px; color: var(--texte-doux); font-size: 14px; }

/* -------------------------------------------------------- 20. realisations */
.nf-rea__g { display: flex; flex-direction: column; }
.nf-rea__l {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 28px;
  padding: 26px 0;
  border-top: var(--filet);
}
.nf-rea__l:last-child { border-bottom: var(--filet); }
.nf-rea__n {
  flex: 0 0 auto;
  font-family: var(--titre);
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1;
  color: var(--accent);
}
.nf-rea__t { flex: 1 1 320px; min-width: 0; }
.nf-rea__t p { color: var(--texte-doux); font-size: 14px; max-width: 62ch; }
.nf-rea__g2 { display: inline-block; margin-bottom: 8px; font-style: normal; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux); }
.nf-rea__m { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--texte-doux); }
.nf-rea__v { flex: 0 1 300px; min-width: min(100%, 240px); }
.nf-rea__v .frame { min-height: 190px; }

/* --------------------------------------------------------- 21. certifications */
.nf-cert__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 40px;
  padding: clamp(24px, 3vw, 36px);
  border: var(--filet);
  border-radius: var(--r-c);
}
.nf-cert__g { flex: 1 1 40%; min-width: min(100%, 280px); }
.nf-cert__g p { color: var(--texte-doux); }
.nf-cert__d { flex: 1 1 48%; min-width: min(100%, 280px); display: flex; flex-wrap: wrap; gap: 12px; }
.nf-cert__j {
  flex: 1 1 46%;
  min-width: min(100%, 190px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: var(--filet);
  border-radius: var(--r-b);
  background: var(--fond-2);
}
.nf-cert__j b { font-size: 14px; }
.nf-cert__j > span { font-size: 12px; color: var(--texte-doux); }

/* ---------------------------------------------------------------- 22. aides */
.nf-aid__g { display: flex; flex-wrap: wrap; gap: 16px; }
.nf-aid__c {
  flex: 1 1 30%;
  min-width: min(100%, 250px);
  padding: 24px;
  background: var(--fond);
  border: var(--filet);
  border-radius: var(--r-c);
}
.nf-aid__m {
  display: block;
  margin: 14px 0 8px;
  font-family: var(--titre);
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1;
  color: var(--accent);
}
.nf-aid__c p { color: var(--texte-doux); font-size: 14px; }
.nf-aid__x { margin-top: 20px; font-size: 12px; color: var(--texte-doux); }

/* ------------------------------------------------------------ 23. materiaux */
/* Regle 3 : pistes comptees, memes proportions que servicesGrid. */
.nf-mat__g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) { .nf-mat__g { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .nf-mat__g { grid-template-columns: 1fr; } }
.nf-mat__v { margin-bottom: 16px; min-height: 200px !important; }
.nf-mat__c p { color: var(--texte-doux); font-size: 14px; }

/* -------------------------------------------------------------- 23b. tarifs */
/* Paliers en rangees pleines largeur : la reference aligne le libelle a
   gauche et le chiffre a droite, jamais en grille de cartes. */
.nf-tar__g { display: flex; flex-direction: column; gap: 14px; }
.nf-tar__c {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: flex-start;
  padding: 26px;
  background: var(--fond);
  border: var(--filet);
  border-radius: var(--r-c);
}
.nf-tar__t { flex: 1 1 58%; min-width: min(100%, 260px); }
.nf-tar__p { flex: 0 1 220px; min-width: 0; text-align: right; }
.nf-tar__d {
  display: block;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.nf-tar__m {
  display: block;
  font-family: var(--titre);
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1;
  color: var(--accent);
}
.nf-tar__u { display: block; font-size: 13px; color: var(--texte-doux); }
.nf-tar__c p { color: var(--texte-doux); font-size: 14px; margin-top: 8px; }
.nf-tar__x { margin-top: 20px; font-size: 12px; color: var(--texte-doux); }

/* -------------------------------------------------------------- 24. urgence */
.nf-urg { max-width: var(--large); }
.nf-urg__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  padding: clamp(26px, 3vw, 40px);
  border: 2px solid var(--accent);
  border-radius: var(--r-c);
  background: color-mix(in srgb, var(--accent) 6%, var(--fond));
}
.nf-urg__g { flex: 1 1 46%; min-width: min(100%, 280px); }
.nf-urg__g > p { color: var(--texte-doux); }
.nf-urg__d { flex: 0 1 auto; min-width: 0; text-align: right; }
.nf-urg__tel {
  display: block;
  margin-bottom: 14px;
  font-family: var(--titre);
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1;
  overflow-wrap: anywhere;
}
.nf-urg__tel a:hover { color: var(--accent); }

/* ------------------------------------------------------------- 25. contact */
.nf-ct { display: flex; flex-wrap: wrap; gap: 30px 48px; align-items: flex-start; }
.nf-ct__g { flex: 1 1 40%; min-width: min(100%, 280px); }
.nf-ct__g > p { color: var(--texte-doux); }
.nf-ct__co { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.nf-ct__co li { display: flex; gap: 12px; align-items: flex-start; }
.nf-ct__co li > div { min-width: 0; }
.nf-ct__co b { display: block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-doux); }
.nf-ct__co a, .nf-ct__co div > span { display: block; font-size: 16px; overflow-wrap: anywhere; }
.nf-ct__co a:hover { color: var(--accent); }
.nf-ct__d { flex: 1 1 48%; min-width: min(100%, 280px); }
.nf-ct__x { margin-top: 14px; font-size: 12px; color: var(--texte-doux); }

/* ------------------------------------------------------------ formulaires */
/* Regle 3 : pistes comptees — 2 colonnes fixes, jamais de flex:1 1 46%
   (un champ impair etirait le dernier). Le champ long et le bouton
   traversent les deux pistes via grid-column. */
.nf-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 640px) { .nf-form { grid-template-columns: 1fr; } }
.nf-form--carte { padding: clamp(22px, 2.6vw, 32px); background: var(--fond); border: var(--filet); border-radius: var(--r-c); }
.nf-f { display: flex; flex-direction: column; gap: 6px; }
.nf-f--long { grid-column: 1 / -1; }
.nf-f span { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-doux); }
.nf-f input, .nf-f textarea {
  width: 100%;
  padding: 13px 14px;
  border: var(--filet);
  border-radius: var(--r-b);
  background: var(--fond);
  color: var(--texte);
  font: inherit;
  font-size: 15px;
  resize: vertical;
}
.nf-f input:focus, .nf-f textarea:focus { outline: none; border-color: var(--accent); }
.nf-form .nf-b--plein { grid-column: 1 / -1; }

/* ------------------------------------------------------------- 26. blogList */
.nf-bl__g { display: flex; flex-wrap: wrap; gap: 18px; }
.nf-bl__c { flex: 1 1 30%; min-width: min(100%, 260px); }
.nf-bl__v { margin-bottom: 16px; min-height: 210px !important; }
.nf-bl__m { display: block; margin-bottom: 8px; font-size: 12px; color: var(--texte-doux); }
.nf-bl__m::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 999px; background: var(--accent); vertical-align: middle; }
.nf-bl__x { display: block; color: var(--texte-doux); font-size: 14px; }
.nf-bl__l { display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
a.nf-bl__c:hover .nf-t--carte { color: var(--accent); }

/* ---------------------------------------------------------- 27. blogArticle */
.nf-art__h { max-width: 900px; margin-bottom: 34px; }
.nf-art__m { display: block; margin-bottom: 22px; font-size: 13px; color: var(--texte-doux); }
.nf-art__c { min-height: 320px !important; }
.nf-art__in { display: flex; flex-wrap: wrap; gap: 30px 48px; align-items: flex-start; }
.nf-art__s {
  flex: 1 1 26%;
  min-width: min(100%, 230px);
  position: sticky;
  top: 96px;
  padding: 20px;
  border: var(--filet);
  border-radius: var(--r-c);
  background: var(--fond-2);
}
.nf-art__s b { display: block; margin-bottom: 10px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux); }
.nf-art__s ol { counter-reset: nf-s; display: flex; flex-direction: column; gap: 7px; }
.nf-art__s li { counter-increment: nf-s; font-size: 14px; }
.nf-art__s li::before { content: counter(nf-s, decimal-leading-zero) " "; color: var(--accent); }
.nf-art__s a:hover { color: var(--accent); }
/* Section lue : classe posee par app.js (IntersectionObserver). */
.nf-art__s a.est-lu { color: var(--texte); font-weight: 600; }
.nf-art__s li:has(a.est-lu)::before { color: var(--texte); }
.nf-art__p { flex: 1 1 60%; min-width: min(100%, 300px); max-width: 72ch; color: var(--texte-doux); }
.nf-art__p h2 { margin: 34px 0 14px; color: var(--texte); }
.nf-art__p h3 { margin: 24px 0 10px; font-size: 19px; color: var(--texte); }
.nf-art__l { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; }
.nf-art__l li { padding-left: 18px; position: relative; }
.nf-art__l li::before { content: ""; position: absolute; left: 0; top: 10px; width: 7px; height: 2px; background: var(--accent); }
.nf-art__v { margin: 22px 0; min-height: 260px !important; }
.nf-art__e { margin: 22px 0; padding: 20px 22px; border-left: 3px solid var(--accent); background: var(--fond-2); border-radius: 0 var(--r-b) var(--r-b) 0; }
.nf-art__e b { display: block; margin-bottom: 6px; color: var(--texte); }

/* ------------------------------------------------------------- 28. mentions */
.nf-leg { max-width: 860px; }
.nf-leg__m { display: block; margin-bottom: 30px; font-size: 13px; color: var(--texte-doux); }
.nf-leg__b { margin-top: 30px; color: var(--texte-doux); }
.nf-leg__b h2 { color: var(--texte); }

/* ------------------------------------------------- 29-32. produits & specs
   Regle 3 partout : le compte vient des donnees — flex-wrap + flex-basis,
   min-width:0 sur les enfants pour qu'un libelle long ne pousse rien. */
.nf-fac__g { display: flex; flex-wrap: wrap; gap: 12px; }
.nf-fac__i {
  display: inline-flex; align-items: center; gap: 10px; min-width: 0;
  padding: 12px 20px; border: 1px solid var(--bordure); border-radius: 6px;
  background: var(--fond); color: var(--texte); font-size: 15px; font-weight: 600;
}
a.nf-fac__i:hover { border-color: var(--accent); }
.nf-fac__i--ici { background:var(--marque);--sur-bande:var(--sur-marque); border-color:var(--encre-marque,var(--marque)); color:var(--sur-bande,var(--sur-marque)); }
.nf-fac__i--ici .nf-rep__c { border-color:var(--sur-bande,var(--sur-marque)); background: var(--sur-marque); }

/* Regle 3 : pistes comptees. */
.nf-prod__g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) { .nf-prod__g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .nf-prod__g { grid-template-columns: 1fr; } }
.nf-prod__c {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--bordure); border-radius: 10px; background: var(--fond); color: inherit;
}
.nf-prod__v { position: relative; display: block; aspect-ratio: 4 / 3; }
.nf-prod__v .frame { position: absolute; inset: 0; height: 100%; }
.nf-prod__b { display: flex; flex-direction: column; gap: 10px; padding: 22px; flex: 1; min-width: 0; }
.nf-prod__x { color: var(--texte-doux); }
.nf-prod__p { display: block; margin-top: 4px; }
.nf-prod__c .nf-serv__l { margin-top: auto; padding-top: 12px; }

.nf-fic { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 52px); align-items: center; }
.nf-fic > * { min-width: 0; }
.nf-fic__v { position: relative; flex: 1 1 44%; min-width: min(100%, 300px); min-height: 360px; border-radius: 10px; overflow: hidden; }
.nf-fic__v .frame { position: absolute; inset: 0; height: 100%; }
.nf-fic__t { flex: 1 1 44%; min-width: min(100%, 300px); }
.nf-fic__c { margin-top: 16px; color: var(--texte-doux); }
.nf-fic__p { margin-top: 24px; }
.nf-fic__a { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }

.nf-spec__g { display: flex; flex-wrap: wrap; column-gap: 52px; margin: 0; }
.nf-spec__l {
  flex: 1 1 44%; min-width: min(100%, 290px);
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 16px 0; border-bottom: 1px solid var(--bordure);
}
.nf-spec__l dt { min-width: 0; color: var(--texte-doux); }
.nf-spec__l dd { margin: 0; min-width: 0; text-align: right; font-weight: 700; color: var(--texte); }

/* ---------------------------------------------------------------- 33. pied */
.nf-ft {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 6vw, 88px) var(--pas) 0;
  background:var(--marque);--sur-bande:var(--sur-marque);
  color:var(--sur-bande,var(--sur-marque));
  background-image: radial-gradient(120% 80% at 15% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%);
}
.nf-ft__in {
  position: relative;
  z-index: 1;
  max-width: var(--large);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 30px 48px;
}
.nf-ft__g { flex: 1 1 34%; min-width: min(100%, 260px); }
.nf-ft__m { display: block; margin-bottom: 14px; font-family: var(--titre); font-size: 32px; text-transform: uppercase; }
.nf-ft__g p { color: color-mix(in srgb, var(--sur-marque) 72%, transparent); font-size: 14px; max-width: 46ch; }
.nf-ft__nap { margin-top: 22px; display: flex; flex-direction: column; gap: 9px; }
.nf-ft__nap li { display: flex; align-items: center; gap: 10px; font-size: 14px; overflow-wrap: anywhere; }
.nf-ft__nt { font-size: 11px !important; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--sur-marque) 60%, transparent); }
.nf-ft__nap a:hover { color: var(--accent); }
.nf-ft__d { flex: 1 1 54%; min-width: min(100%, 260px); display: flex; flex-wrap: wrap; gap: 24px; }
.nf-ft__c { flex: 1 1 30%; min-width: min(100%, 160px); display: flex; flex-direction: column; gap: 7px; }
.nf-ft__c b { margin-bottom: 6px; font-family: var(--titre); font-size: 17px; letter-spacing: .04em; text-transform: uppercase; color: color-mix(in srgb, var(--sur-marque) 70%, transparent); }
.nf-ft__c a, .nf-ft__c span { font-size: 14px; }
.nf-ft__c a:hover { color: var(--accent); }
.nf-ft__bas {
  position: relative;
  z-index: 1;
  max-width: var(--large);
  margin: 44px auto 0;
  padding: 20px 0 28px;
  border-top: 1px solid color-mix(in srgb, var(--sur-marque) 20%, transparent);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  font-size: 13px;
  color: color-mix(in srgb, var(--sur-marque) 66%, transparent);
}
.nf-ft__l { display: flex; flex-wrap: wrap; gap: 18px; }
.nf-ft__l a:hover { color: var(--accent); }
.nf-ft__fil {
  position: absolute;
  left: 50%;
  bottom: -0.28em;
  transform: translateX(-50%);
  z-index: 0;
  font-family: var(--titre);
  font-size: clamp(70px, 17vw, 240px);
  line-height: .8;
  white-space: nowrap;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--sur-marque) 7%, transparent);
  pointer-events: none;
}

/* ---------------------------------------------------------------- ecrans */
@media (max-width: 900px) {
  .nf-av__g, .nf-art__s { position: static; }
  .nf-tete { align-items: flex-start; }
  .nf-urg__d { text-align: left; }
}
/* Menu compact. Sans burger, la nav complete se deplie sous le logo et mange
   un tiers du premier ecran avant meme le H1. Le bouton est une case a cocher
   pilotee en CSS : aucun JS de plus (regle 5), le clavier et le tactile
   fonctionnent d'office. Le CTA rejoint le menu, le hero portant deja le sien. */
@media (max-width: 860px) {
  .nf-hd__bt {
    display: flex; order: 2; margin-left: auto; width: 42px; height: 42px;
    align-items: center; justify-content: center;
    border: var(--filet); border-radius: var(--r-b); cursor: pointer;
  }
  .nf-hd__bt i { display: block; width: 18px; height: 2px; background:var(--texte);--sur-bande:var(--sur-texte,var(--fond));
    box-shadow: 0 6px 0 var(--texte), 0 -6px 0 var(--texte); }
  .nf-hd__chk:checked ~ .nf-hd__bt i { box-shadow: 0 6px 0 var(--accent), 0 -6px 0 var(--accent); background: var(--accent); }
  .nf-hd__chk:focus-visible ~ .nf-hd__bt { outline: 2px solid var(--accent); outline-offset: 2px; }
  .nf-hd__nav, .nf-hd__d { display: none; order: 3; flex-basis: 100%; }
  .nf-hd__chk:checked ~ .nf-hd__nav { display: flex; flex-direction: column; align-items: flex-start; }
  .nf-hd__chk:checked ~ .nf-hd__d { display: block; }
  /* Le panneau se deroule dans le flux, mais reste FERME tant qu'on n'a pas
     touche son bouton : deplie d'office, le menu faisait 1500px de haut.
     L'ouverture reste celle du desktop (:focus-within), aucun JS de plus. */
  .nf-hd__pan { position: static; transform: none; padding: 4px 0 4px 12px; border: 0; box-shadow: none; background: none; min-width: 0; }
  .nf-hd__pin { display: block; padding: 0; border: 0; background: none; min-width: 0; max-width: none; }
  /* La vitrine est un confort d ecran large : au doigt, elle pousserait les
     liens hors de vue. Le volet redescend a la liste seule. */
  .nf-hd__vit { display: none; }
}
@media (max-width: 640px) {
  :root { --pas: 18px; }
  .nf-hd__nav { order: 3; flex-basis: 100%; }
  .nf-hd__d { margin-left: 0; order: 4; flex-basis: 100%; }
  .nf-mail__v { width: 100%; }
  .nf-serv__c { gap: 28px; min-height: 0; }
}

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

/* SIGNATURE — le RAYON UNIQUE. Le modele ne connait qu une seule courbure :
   10px, releve 163 fois, devant 6px (13 fois) et le disque plein (10 fois).
   Aucune valeur intermediaire, aucun rayon de 16, 20 ou 32. La coquille tient
   cette echelle par --r-c / --r-b et n en ouvre pas une troisieme. */
.nf-serv__c, .nf-map__c, .nf-bl__c, .nf-aid__c { border-radius: var(--r-c); }

/* SIGNATURE — le CONTOUR INTERNE net d un pixel (`0 0 0 1px inset`, deux
   occurrences sur le modele). Le bloc est cerne par l interieur, jamais par
   une bordure qui elargirait la boite. Pose par un pseudo, une regle par
   famille, pour ne pas ecraser l ombre portee du bloc. */
.nf-serv__c { position: relative; }
.nf-serv__c::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--texte) 9%, transparent);
}
.nf-map__c { position: relative; }
.nf-map__c::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--texte) 8%, transparent);
}
.nf-bl__c { position: relative; }
.nf-bl__c::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--texte) 8%, transparent);
}
.nf-aid__c { position: relative; }
.nf-aid__c::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--texte) 7%, transparent);
}

/* SIGNATURE — l ombre en PILE FRACTIONNAIRE a forte opacite : le modele
   empile des couches au dixieme de pixel (`.602187px .421531px -1px`) a 28 et
   29 pour cent d encre, deux occurrences. C est une ombre dense et TRES
   courte, tout l oppose des halos a 4 pour cent des autres modeles. */
.nf-serv__c, .nf-bl__c {
  box-shadow:
    0 .6px .4px -1px color-mix(in srgb, var(--texte) 29%, transparent),
    0 2.3px 1.6px -2px color-mix(in srgb, var(--texte) 28%, transparent),
    0 10px 7px -3px color-mix(in srgb, var(--texte) 20%, transparent);
}

/* SIGNATURE — la SEULE decoupe du modele : la vue apparait par le bas, d un
   masque en degre `transparent -> plein` (une occurrence relevee). Portee ici
   sur la texture de tete et sur la vue d appel, les deux grandes surfaces
   d image de la coquille. */
.nf-hero__fond {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 26%, #000 100%);
}
.nf-cta__v .frame {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 20%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 20%, #000 100%);
}

/* contraste-source — bandes sombres : chacune declare son encre (--sur-bande) ; marque en texte : --encre-marque. */

/* contraste-bandes (14/09/2026) — chaque regle est PORTEE PAR LA BANDE qui peint le fond mesure.
   1. L'etiquette Avant / Apres porte l'encre --sur-marque, calculee contre --marque PLEINE ; son fond a 82 %
      laissait passer le --fond-2 du cadre vide : blanc sur bleu delave, 4,13. Pleine, elle retrouve la paire
      que son encre suppose. */
.ab .ab__lab { background: var(--marque); }
/* 2. La bande d'appel (.nf-cta__in, --marque) adoucit ses textes par transparence : 3,81 et 3,58 ; son
      intitule, reste en --texte-doux gris, 1,43. Encre douce CALCULEE par palette (--texte-doux-sur-marque). */
.nf-cta__in .nf-oeil,
.nf-cta__in .nf-cta__t > p,
.nf-cta__in .nf-f span { color: var(--texte-doux-sur-marque, var(--sur-marque)); }
/* 3. Le sous-titre du hero, adouci a 75 % sur la marque : 3,74. Meme encre douce calculee. */
.nf-hero .nf-hero__s { color: var(--texte-doux-sur-marque, var(--sur-bande, var(--sur-marque))); }
/* 4. Meme adoucissement par transparence sous les reperes du hero (pages categorie) : 3,47 sur la marque.
      Meme encre douce calculee. */
.nf-hero .nf-hero__r span { color: var(--texte-doux-sur-marque, var(--sur-marque)); }
/* 5. La pastille-photo VIDE incrustee dans un titre se peint en accent 30 % sur --fond (gris clair) : sur les
      bandes sombres ou le titre s'ecrit en --sur-bande, il etait mesure sur ce gris, 1,93 (titre du hero des
      pages service). Vide sur bande sombre, elle garde son dessin en filet et laisse voir la bande ; remplie,
      la photo la couvre comme avant. */
.nf-hero .nf-past--nu,
.nf-cta__in .nf-past--nu,
.nf-ft .nf-past--nu { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sur-marque) 45%, transparent); }

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

   Et il se tait EN ENTIER : une legende dessinee en pastille (fond, padding,
   ombre) laissait, a font-size 0, une plaquette claire vide sur le cadre
   sombre, lue 2,07 puis 4,40 par le gate voile (template-1, 14 et 15 sept).
   Seuls les enfants qui portent du texte perdent leur habillage : la trame
   et les decors vides du cadre restent. */
[data-role="avantApres"] [data-slot="frame--plein"]: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);
}
/* <<< NORME COQUILLE — teinte des cadres porteurs */