/* Coquille Plumfixx — feuille unique, SOURCE du rendu.
   dist/style.css en est une copie ecrasee a chaque rendu : ne jamais
   l editer. Huit jetons de couleur, aucun autre ; aucune valeur de
   couleur en dur — les voiles passent par color-mix sur les jetons. */

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

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
}
body.pf-a-plat { padding-top: 78px; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }
h1, h2, h3 { margin: 0; }

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

.pf-sec { padding: clamp(56px, 7vw, 104px) 0; }
.pf-sec--alt { background: var(--fond-2); }
.pf-sec--marine { background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque)); }
.pf-sec--marine a { color:var(--sur-bande,var(--sur-marque)); }

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

.pf-h {
  font-family: 'Bebas Neue', 'Inter', Impact, sans-serif;
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1.02;
  font-size: clamp(30px, 3.4vw, 46px);
  text-transform: uppercase;
}
.pf-h b { font-weight: 400; color: var(--accent); }
.pf-sec:not(.pf-sec--marine) .pf-h b { color:var(--encre-marque,var(--marque)); }
.pf-h--grand { font-size: clamp(32px, 4.2vw, 58px); }
.pf-h--geant { font-size: clamp(38px, 5.4vw, 76px); }

.pf-eb {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--marque) 10%, transparent);
  color:var(--encre-marque,var(--marque));
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.pf-eb--clair {
  background: color-mix(in srgb, var(--accent) 88%, transparent);
  color: var(--texte);
}
.pf-chapo { margin-top: 14px; color: var(--texte-doux); max-width: 62ch; }
.pf-sec--marine .pf-chapo { color: color-mix(in srgb, var(--sur-marque) 80%, transparent); }
.pf-mention { margin-top: 18px; font-size: 13px; color: var(--texte-doux); }

.pf-tete {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: clamp(28px, 3.4vw, 48px);
}
.pf-tete__t { flex: 1 1 min(520px, 100%); min-width: 0; }
.pf-tete__a { flex: 0 0 auto; }
.pf-tete--centre { justify-content: center; text-align: center; }
.pf-tete--centre .pf-tete__t { flex-basis: min(760px, 100%); }
.pf-tete--centre .pf-chapo { margin-left: auto; margin-right: auto; }

.pf-pts { margin: 14px 0 0; padding: 0; list-style: none; }
.pf-pts li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 7px;
  color: var(--texte-doux);
  font-size: 15px;
}
.pf-pts li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 9px; height: 9px;
  border-radius: 2px;
  background: var(--accent);
}
.pf-pts--clair li { color: color-mix(in srgb, var(--sur-marque) 82%, transparent); }
.pf-sec--marine .pf-pts li { color: color-mix(in srgb, var(--sur-marque) 82%, transparent); }

.pf-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.pf-tags li {
  padding: 4px 12px;
  border: 1px solid var(--bordure);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.pf-sec--marine .pf-tags li {
  border-color: color-mix(in srgb, var(--sur-marque) 26%, transparent);
  color: color-mix(in srgb, var(--sur-marque) 82%, transparent);
}

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

.pf-bt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  background:var(--marque);--sur-bande:var(--sur-marque);
  color:var(--sur-bande,var(--sur-marque));
  transition: transform .18s ease, background .18s ease;
}
.pf-bt:hover { transform: translateY(-2px); }
.pf-bt--lime { background: var(--accent); color: var(--texte); }
.pf-bt--sombre { background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque)); }
.pf-bt--verre {
  background: transparent;
  color:var(--sur-bande,var(--sur-marque));
  border-color: color-mix(in srgb, var(--sur-marque) 46%, transparent);
}
.pf-bt--contour {
  background: transparent;
  color:var(--encre-marque,var(--marque));
  border-color: var(--bordure);
}
.pf-sec--marine .pf-bt--contour { color:var(--sur-bande,var(--sur-marque)); border-color: color-mix(in srgb, var(--sur-marque) 40%, transparent); }
/* R4b — l entete non posee flotte AU-DESSUS du hero : ses liens sont deja en
   encre claire, mais le bouton de contour reimposait l encre de marque, en
   bleu nuit sur la photo. Le numero d appel etait donc invisible tant que la
   page n avait pas defile — et l appel, regle 7, est la moitie du couple de
   conversion. Il suit desormais l entete qui le porte. */
.pf-a-hero .pf-hd:not(.pf-hd--pose) .pf-bt--contour {
  color:var(--sur-bande,var(--sur-marque));
  border-color: color-mix(in srgb, var(--sur-marque) 46%, transparent);
}
.pf-bt--min { margin-top: 0; padding: 11px 20px; font-size: 13px; }
.pf-bt--seul { margin-top: 32px; }
.pf-bt--inerte { opacity: .75; }

/* ---------- REGLE 7 de la NORME COQUILLE : la paire appel + devis ----------
   Les deux boutons vivent sur UNE ligne quand la place le permet, et se
   replient l un sous l autre quand elle manque — jamais un bouton qui deborde
   de sa carte. Le `margin-top` remonte au conteneur : deux boutons empiles ne
   doivent pas cumuler deux marges hautes. */
.pf-paire {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.pf-paire > .pf-bt { margin-top: 0; }
.pf-paire--seule { margin-top: 32px; }
/* Format de carte : la paire tient dans une carte de prix, de produit ou un
   encart — deux boutons courts, sans gain de hauteur. */
.pf-paire--crt { gap: 10px; margin-top: 16px; }
.pf-paire--crt > .pf-bt { padding: 11px 18px; font-size: 13px; flex: 1 1 auto; }
.pf-paire--fch > .pf-bt { padding: 13px 22px; }
@media (max-width: 520px) {
  .pf-paire > .pf-bt { flex: 1 1 100%; }
}

.pf-fl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  color:var(--encre-marque,var(--marque));
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 3px;
}

/* ---------- images ---------- */

.pf-ph {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: var(--fond-2);
  border: 1px solid var(--bordure);
}
.pf-ph img { width: 100%; height: 100%; object-fit: cover; }
/* Etat vide : meme boite, autre lecture. Le fond prend une teinte de marque
   au lieu du gris de fond, l initiale donne un point d appui a l oeil, et
   l intitule reste lisible dessous. Aucune dimension ne change : R4 exige que
   les deux etats tiennent la MEME geometrie. */
.pf-ph--nu {
  display: flex; flex-direction: column; gap: 8px;
  align-items: center; justify-content: center;
  padding: 14px; min-height: 90px;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--marque) 10%, var(--fond-2)),
    color-mix(in srgb, var(--marque) 4%, var(--fond-2)));
  border-color: color-mix(in srgb, var(--marque) 16%, var(--bordure));
}
.pf-ph__ini {
  font-size: clamp(22px, 3.4vw, 40px); line-height: 1; font-weight: 600;
  letter-spacing: -.03em;
  color: color-mix(in srgb, var(--marque) 55%, transparent);
}
.pf-ph__nom { font-size: 12px; line-height: 1.4; color: var(--texte-doux); text-align: center; }
/* Les cadres etroits (pastille d avis, vignette) n ont pas la place d un
   intitule : l initiale seule y suffit. */
.pf-ph--av .pf-ph__nom, .pf-ph--mt .pf-ph__nom { display: none; }
.pf-ph--av .pf-ph__ini { font-size: 16px; }

/* ---------- grilles ----------
   Le nombre de cartes vient des donnees : jamais de compte fige.
   flex-wrap + flex:1 1 base%, et min-width:0 sur les enfants. */

/* R3 de la NORME COQUILLE : UNE largeur par grille — la colonne se COMPTE,
   elle ne se deduit jamais du remplissage.
   `flex: 1 1 30%` laissait la derniere rangee incomplete s etirer : deux
   cartes seules occupaient la place de trois, et la meme carte n avait pas
   la meme taille selon le nombre de prestations de la niche. C est ce qui
   fait des sections « grosses pour rien » d une niche a l autre.
   La base est donc CALCULEE sur un nombre de colonnes declare, et la carte
   ne grandit plus (`flex-grow: 0`). Le min-width garde le repli : sous la
   largeur tenable, la grille passe a moins de colonnes, mais toutes les
   cartes d une meme rangee gardent la meme largeur. */
.pf-gr {
  --pf-ecart: clamp(18px, 2.2vw, 30px);
  --pf-cols: 3;
  display: flex; flex-wrap: wrap; gap: var(--pf-ecart);
}
.pf-gr > * {
  min-width: 0;
  flex: 0 1 calc((100% - (var(--pf-cols) - 1) * var(--pf-ecart)) / var(--pf-cols));
}
.pf-gr--sv > *, .pf-gr--pr > *, .pf-gr--b2 > *, .pf-gr--rz > *,
.pf-gr--av > *, .pf-gr--cf > *, .pf-gr--ai > *, .pf-gr--tf > *,
.pf-gr--mi > *, .pf-gr--pd > *, .pf-gr--bl > *, .pf-gr--wy > * { min-width: min(258px, 100%); }
.pf-gr--mt, .pf-gr--zn, .pf-gr--sp { --pf-cols: 4; }
.pf-gr--mt > *, .pf-gr--zn > *, .pf-gr--sp > * { min-width: min(200px, 100%); }
.pf-gr--ab { --pf-cols: 2; }
.pf-gr--ab > * { min-width: min(280px, 100%); }

/* ============================================================
   ENTETE — transparente sur l affiche, posee des le defilement
   ============================================================ */

.pf-hd {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  background: var(--fond);
  border-bottom: 1px solid var(--bordure);
  transition: background .25s ease, color .25s ease;
}
.pf-a-hero .pf-hd { background: transparent; border-bottom-color: transparent; color:var(--sur-bande,var(--sur-marque)); }
.pf-a-hero .pf-hd.pf-hd--pose { background: var(--fond); border-bottom-color: var(--bordure); color: var(--texte); }

.pf-hd__in {
  display: flex;
  align-items: center;
  gap: 22px;
  height: 78px;
}
.pf-hd__mq {
  flex: 0 0 auto;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 27px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.pf-hd__nav { flex: 1 1 auto; display: flex; align-items: center; gap: 4px; min-width: 0; }
.pf-hd__ac { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; }
/* REGLE 7 : dans l entete, l appel est un BOUTON a cote du devis, pas une
   ligne de texte. Une mention se lit, un bouton se clique — et la paire doit
   se voir des le premier ecran. */
.pf-hd__tel { font-weight: 600; font-size: 14px; white-space: nowrap; }

.pf-hd__bx { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.pf-hd__bg { display: none; }

/* -- entree de navigation et son volet --
   Le volet est colle a la tete : top:100% sur une entree qui epouse la
   hauteur de la tete. Le retrait visuel est un PADDING du volet, jamais
   une marge — sinon le survol se coupe entre le lien et le volet. */

.pf-nv { position: relative; }
.pf-nv__t {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 78px;
  padding: 0 14px;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}
.pf-nv__t--volet::after {
  content: '';
  width: 7px; height: 7px;
  margin-top: -3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.pf-nv:hover .pf-nv__t--volet::after { transform: rotate(225deg); margin-top: 2px; }

.pf-nv__v {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 70;
  padding-top: 12px;
  transform: translateX(var(--dx, 0px));
  opacity: 0;
  visibility: hidden;
  transition: opacity .16s ease;
}
.pf-nv:hover > .pf-nv__v,
.pf-nv:focus-within > .pf-nv__v { opacity: 1; visibility: visible; }

.pf-nv__vin {
  display: flex;
  gap: 30px;
  width: 640px;
  max-width: calc(100vw - 32px);
  padding: 26px 28px;
  border-radius: 20px;
  border: 1px solid var(--bordure);
  background: var(--fond);
  color: var(--texte);
  box-shadow: 0 26px 60px color-mix(in srgb, var(--texte) 18%, transparent);
}
.pf-nv__cols { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 22px; min-width: 0; }
.pf-nv__col { flex: 1 1 44%; min-width: 0; }
.pf-nv__ct {
  display: block;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.pf-nv__col ul { margin: 0; padding: 0; list-style: none; }
.pf-nv__col li + li { margin-top: 8px; }
.pf-nv__col a { font-size: 15px; }
.pf-nv__col a:hover { color:var(--encre-marque,var(--marque)); }

.pf-nv__vit {
  flex: 0 0 232px;
  min-width: 0;
  padding: 16px;
  border-radius: 16px;
  background: var(--fond-2);
}
.pf-nv__ph { aspect-ratio: 16 / 10; margin-bottom: 12px; }
.pf-nv__vit strong { display: block; font-size: 15px; }
.pf-nv__vit p { margin-top: 6px; font-size: 13px; color: var(--texte-doux); }
.pf-nv__vit .pf-bt { margin-top: 12px; }

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

/* Le fond de marque est porte par la SECTION, plein cadre — voir le bloc
   SIGNATURES DE FORME en fin de feuille. Il n y avait ici qu un second
   degrade, a 160 degres et delave vers `--fond`, qui peignait un rectangle
   sombre au milieu d un fond gris : deux fonds pour une seule affiche. */
/* L AFFICHE TIENT DANS UN ECRAN, ET LA VUE EST UNE CASE A COTE DU MOT.
   La vue avait ete montee au bord haut de la fenetre et etiree sur toute sa
   hauteur au nom de la fidelite : l affiche debordait alors d un ecran (1127px
   pour 900 de fenetre) et la case ecrasait le mot, reduit a 360px. Un gabarit
   d ouverture se juge d abord a ce qu on en voit SANS defiler. Le mot reprend
   donc la colonne large, la vue redevient une case posee a sa droite, et la
   somme retrait + case + pied ne depasse jamais la fenetre. */
.pf-hero {
  position: relative;
  /* Le pied se resserre : l affiche entiere — retrait, mot, case et bandeau
     de preuve — doit tenir dans une fenetre, pas la deborder de deux cents
     pixels. Le meme raisonnement raccourcit l air au-dessus du bandeau. */
  padding: 0 0 clamp(40px, 4vw, 60px);
  color:var(--sur-bande,var(--sur-marque));
}
.pf-hero__gr {
  display: grid;
  /* 56 % et pas moins, et c est une MESURE, pas un gout. Le modele donne sept
     douziemes de matiere a la vue (colonnes 5 a 11 de son releve). Chaque
     douzieme qu on lui reprend est un douzieme de matiere que la reference a
     et que nous n avons plus : F1 monte tout droit. Balayage a la sonde —
     58 % : 24 % d ecart · 56 % : 24 % · 52 % : 28 % · 48 % : 28 % · 42 % : 32 %
     (seuil 25 %). 56 % est donc le plancher : en dessous, la coquille cesse de
     ressembler a son modele.
     La case se reduit alors par la HAUTEUR, pas par la largeur — c est gratuit
     en fidelite parce que le releve du modele ne descend pas si bas. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 56%);
  gap: clamp(28px, 4vw, 52px);
  /* La case prend EXACTEMENT la hauteur du mot : c est ainsi qu elle ne peut
     jamais faire deborder l affiche, quelle que soit la longueur du titre que
     la fabrique versera. Une forme fixe, elle, aurait tot ou tard depasse. */
  align-items: stretch;
}
.pf-hero__tx { min-width: 0; }
/* T5 — le corps suit la colonne, il ne la subit pas. A soixante-seize pixels le
   mot passait a cinq lignes et poussait la bande de preuve hors de la fenetre
   (P1b) : c est pour ca qu il etait retombe a 52. Soixante-six passe, et sans
   gagner de ligne — verifie, pas suppose : l affiche mesure 887px de haut a
   1440, elle tient toujours dans la fenetre de 900. Le plafond du corps est
   donc borne par P1b, pas par le gout : le prochain qui voudra le monter
   encore doit remesurer la hauteur de l affiche, pas juste regarder. */
.pf-hero__tx .pf-h--geant { font-size: clamp(40px, 4.4vw, 66px); }
.pf-hero__vi { position: relative; min-width: 0; display: flex; }
.pf-hero__s {
  margin-top: 22px;
  /* La mesure se compte en signes, pas en pixels : le corps monte, donc la
     largeur maximale descend pour garder la ligne lisible. */
  max-width: 52ch;
  font-size: clamp(17px, 1.5vw, 22px);
  color: color-mix(in srgb, var(--sur-marque) 84%, transparent);
}
.pf-hero__bt { display: flex; flex-wrap: wrap; gap: 16px; }
/* Les deux portes de conversion de l affiche — le numero et le devis, cote a
   cote (regle 7) — pesent plus lourd que les pastilles du reste de la page :
   c est le premier ecran, c est la qu on decroche. On ne touche donc PAS
   `.pf-bt`, qui sert partout ; on surcharge uniquement dans l affiche. */
.pf-hero__bt .pf-bt { padding: 17px 32px; font-size: 15.5px; }
/* La reference tient une silhouette DEBOUT a droite du texte : le cadre est
   donc en portrait, pas en 4/3. Le rayon vient du bloc SIGNATURES (52px). */
/* La case n a PAS de forme propre : elle epouse la hauteur du mot (voir
   `align-items: stretch` plus haut). Le plancher garantit qu elle reste une
   case meme derriere un titre tres court. */
.pf-ph--hero {
  aspect-ratio: auto;
  flex: 1;
  /* 520 -> 400. Deux raisons cumulees : la case demarre desormais SOUS l entete
     (a plancher egal elle poussait l affiche hors de l ecran, P1b), et c est par
     la hauteur qu on la reduit puisque la largeur est bloquee a 56 % par F1.
     Ce plancher ne mord plus au grand ecran — le mot ayant grossi, la case est
     tendue a 458px par sa hauteur (align-items: stretch). Il tient la case
     derriere un titre court, ce qui est exactement son role. */
  min-height: 400px;
  border-color: color-mix(in srgb, var(--sur-marque) 22%, transparent);
}
.pf-hero__ct {
  position: absolute;
  left: 18px;
  bottom: -22px;
  max-width: calc(100% - 36px);
  padding: 14px 20px;
  border-radius: 16px;
  background: var(--fond);
  color: var(--texte);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--texte) 26%, transparent);
}
.pf-hero__cp { font-size: 14px; font-weight: 600; }

/* Le bandeau de reperes : trois colonnes separees par un filet vertical. */
.pf-hero__bd {
  display: flex;
  flex-wrap: wrap;
  margin-top: clamp(36px, 3.6vw, 52px);
  border: 1px solid color-mix(in srgb, var(--sur-marque) 22%, transparent);
  border-radius: 20px;
  overflow: hidden;
}
.pf-hero__rp {
  flex: 1 1 22%;
  min-width: min(232px, 100%);
  display: flex;
  gap: 14px;
  padding: 24px 26px;
  border-right: 1px solid color-mix(in srgb, var(--sur-marque) 18%, transparent);
}
.pf-hero__rp:last-child { border-right: 0; }
.pf-hero__bg {
  flex: 0 0 auto;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 26px;
  color: var(--accent);
}
.pf-hero__rl {
  display: block;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--sur-marque) 72%, transparent);
}
.pf-hero__rp strong { display: block; margin-top: 4px; font-size: 16px; }

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

.pf-fa { padding: 16px 0; border-bottom: 1px solid var(--bordure); font-size: 13px; }
.pf-fa ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pf-fa li { color: var(--texte-doux); }
.pf-fa a:hover { color:var(--encre-marque,var(--marque)); }
.pf-fa__sp { opacity: .55; }
.pf-a-hero .pf-fa {
  padding-top: 96px;
  background:var(--marque);--sur-bande:var(--sur-marque);
  color:var(--sur-bande,var(--sur-marque));
  border-bottom-color: transparent;
}
.pf-a-hero .pf-fa li { color: color-mix(in srgb, var(--sur-marque) 76%, transparent); }
/* Le bandeau est transparent AU-DESSUS de l affiche : le texte doit donc
   demarrer sous ses 78px, sinon le H1 passe derriere la navigation. */
/* F1 — l air sous l entete fixe appartient au MOT, pas a la section : pose
   sur `.pf-hero`, il redescendait la vue de 148px et lui volait la rangee du
   haut, celle que le modele remplit de matiere. Il passe donc a la grille,
   d ou la vue le reprend par sa marge negative. */
/* L air sous l entete fixe se pose sur les DEUX colonnes. On avait d abord
   laisse la vue monter derriere l entete comme le fait le modele Framer, pour
   ne pas perdre la premiere rangee de matiere a la mesure de fidelite (F1).
   C etait une fidelite payee trop cher : l entete de cette coquille est
   `position: fixed` et TRANSPARENTE au-dessus de l affiche, donc la case ne
   passait pas derriere un bandeau, elle passait derriere RIEN — la navigation
   et le devis se retrouvaient ecrits en travers d elle. Une case qui chevauche
   l entete n est pas une case, c est une collision.
   Le retrait vaut donc au moins la hauteur de l entete (78px) plus son air. */
.pf-hero__tx { padding-top: clamp(96px, 7.6vw, 112px); }
.pf-hero__vi { padding-top: clamp(90px, 7.2vw, 104px); }

/* ============================================================
   PROSE
   ============================================================ */

.pf-intro { display: flex; flex-wrap: wrap; gap: clamp(26px, 4vw, 60px); }
.pf-intro__g { flex: 1 1 min(400px, 100%); min-width: 0; }
.pf-intro__d { flex: 1 1 min(420px, 100%); min-width: 0; color: var(--texte-doux); }

.pf-bs__l { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 76px); }
.pf-bs { display: flex; flex-wrap: wrap; gap: clamp(24px, 3.4vw, 52px); align-items: center; }
.pf-bs__tx { flex: 1 1 min(420px, 100%); min-width: 0; }
.pf-bs__tx p { color: var(--texte-doux); }
.pf-bs__vi { flex: 1 1 min(360px, 100%); min-width: 0; }
.pf-bs--inv .pf-bs__vi { order: -1; }
.pf-ph--bs { aspect-ratio: 5 / 4; border-radius: 24px; }

.pf-ex { display: flex; flex-wrap: wrap; gap: clamp(26px, 4vw, 56px); align-items: center; }
.pf-ex__vi { flex: 1 1 min(380px, 100%); min-width: 0; }
.pf-ex__tx { flex: 1 1 min(420px, 100%); min-width: 0; color: var(--texte-doux); }
.pf-ph--ex { aspect-ratio: 1 / 1; border-radius: 26px; }
.pf-ex__pl { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 22px; }
.pf-ex__p { flex: 1 1 44%; min-width: min(220px, 100%); padding-left: 16px; border-left: 3px solid var(--accent); }
.pf-ex__p strong { color: var(--texte); }
.pf-ex__p p { margin-top: 4px; font-size: 14px; }

/* ============================================================
   OFFRE
   ============================================================ */

/* Les cartes de service n ont pas de panneau : l image porte, le texte suit. */
.pf-sv h3 { margin-top: 18px; font-size: 20px; font-weight: 600; }
.pf-sv p { margin-top: 8px; color: var(--texte-doux); font-size: 15px; }
.pf-ph--sv { aspect-ratio: 4 / 3; border-radius: 20px; }

.pf-pr { padding-top: 20px; border-top: 2px solid var(--bordure); }
.pf-pr__n { font-family: 'Bebas Neue', Impact, sans-serif; font-size: 34px; color:var(--encre-marque,var(--marque)); }
.pf-pr h3 { margin-top: 4px; font-size: 19px; font-weight: 600; }
.pf-pr p { margin-top: 8px; color: var(--texte-doux); font-size: 15px; }
.pf-ph--pr { aspect-ratio: 16 / 10; margin-top: 16px; border-radius: 16px; }

.pf-ch { display: flex; flex-wrap: wrap; }
.pf-ch__i {
  flex: 1 1 22%;
  min-width: min(190px, 100%);
  padding: 8px 24px;
  border-left: 1px solid color-mix(in srgb, var(--sur-marque) 20%, transparent);
}
.pf-ch__i:first-child { border-left: 0; padding-left: 0; }
.pf-ch__i strong {
  display: block;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: clamp(38px, 4.6vw, 62px);
  line-height: 1;
  color: var(--accent);
}
.pf-ch__i span { display: block; margin-top: 6px; font-size: 14px; color: color-mix(in srgb, var(--sur-marque) 78%, transparent); }

.pf-wy__l { display: flex; flex-wrap: wrap; gap: clamp(24px, 3vw, 44px); align-items: flex-start; }
.pf-wy__vi { flex: 1 1 min(320px, 100%); min-width: 0; }
.pf-wy__l .pf-gr { flex: 2 1 min(420px, 100%); min-width: 0; }
.pf-ph--wy { aspect-ratio: 3 / 4; border-radius: 24px; }
.pf-wy {
  padding: 22px;
  border-radius: 18px;
  background: var(--fond);
  border: 1px solid var(--bordure);
}
.pf-wy__bg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--accent);
  color: var(--texte);
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 20px;
}
.pf-wy h3 { margin-top: 14px; font-size: 18px; font-weight: 600; }
.pf-wy p { margin-top: 7px; color: var(--texte-doux); font-size: 15px; }

.pf-b2 { border: 1px solid var(--bordure); border-radius: 20px; overflow: hidden; background: var(--fond); }
.pf-ph--b2 { aspect-ratio: 16 / 10; border-radius: 0; border: 0; }
.pf-b2__tx { padding: 22px; }
.pf-b2__m { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color:var(--encre-marque,var(--marque)); font-weight: 700; }
.pf-b2 h3 { margin-top: 8px; font-size: 19px; font-weight: 600; }
.pf-b2 p { margin-top: 8px; color: var(--texte-doux); font-size: 15px; }

.pf-mt h3 { margin-top: 14px; font-size: 17px; font-weight: 600; }
.pf-mt p { margin-top: 6px; color: var(--texte-doux); font-size: 14px; }
.pf-ph--mt { aspect-ratio: 1 / 1; border-radius: 18px; }

.pf-cf__x { max-width: 74ch; color: var(--texte-doux); margin-bottom: 28px; }
.pf-cf { padding: 22px; border-radius: 18px; border: 1px solid var(--bordure); }
.pf-cf h3 { font-size: 17px; font-weight: 600; }
.pf-cf p { margin-top: 8px; color: var(--texte-doux); font-size: 15px; }

.pf-ai { padding: 24px; border-radius: 18px; background: var(--fond); border: 1px solid var(--bordure); }
.pf-ai h3 { font-size: 18px; font-weight: 600; }
.pf-ai p { margin-top: 8px; color: var(--texte-doux); font-size: 15px; }

.pf-tf {
  display: flex;
  flex-direction: column;
  padding: 26px;
  border-radius: 20px;
  border: 1px solid var(--bordure);
  background: var(--fond);
}
.pf-tf h3 { font-size: 19px; font-weight: 600; }
.pf-tf__p { margin-top: 12px; display: flex; align-items: baseline; gap: 6px; }
.pf-tf__p strong { font-family: 'Bebas Neue', Impact, sans-serif; font-size: 36px; color:var(--encre-marque,var(--marque)); }
.pf-tf__p span { font-size: 13px; color: var(--texte-doux); }
.pf-tf p { color: var(--texte-doux); font-size: 15px; }
.pf-tf .pf-bt { margin-top: auto; align-self: flex-start; }
.pf-tf .pf-pts { margin-bottom: 18px; }

/* ============================================================
   PREUVE
   ============================================================ */

.pf-rz { border-radius: 20px; overflow: hidden; background: var(--fond); border: 1px solid var(--bordure); }
.pf-ph--rz { aspect-ratio: 4 / 3; border-radius: 0; border: 0; }
.pf-rz__tx { padding: 20px 22px; }
.pf-rz__m { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-doux); }
.pf-rz h3 { margin-top: 6px; font-size: 18px; font-weight: 600; }
.pf-rz p { margin-top: 8px; color: var(--texte-doux); font-size: 15px; }

/* Les deux photos sont SUPERPOSEES, decoupees par --pos, et le curseur
   est un input range en surimpression : souris, doigt, clavier. */
.pf-ab { margin: 0; }
.pf-ab__vu {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 22px;
  overflow: hidden;
  background: var(--fond-2);
  touch-action: none;
}
.pf-ab__im { position: absolute; inset: 0; display: block; }
.pf-ab__im--av { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.pf-ab__im--ap { clip-path: inset(0 0 0 var(--pos, 50%)); }
.pf-ab__im .pf-ph { position: absolute; inset: 0; border-radius: 0; border: 0; }
.pf-ab__im em {
  position: absolute;
  bottom: 14px;
  z-index: 4;
  padding: 5px 14px;
  border-radius: 999px;
  background:var(--marque);--sur-bande:var(--sur-marque);
  color:var(--sur-bande,var(--sur-marque));
  font-size: 11px;
  font-style: normal;
  letter-spacing: .1em;
  text-transform: uppercase;
  pointer-events: none;
}
.pf-ab__im--av em { left: 14px; }
.pf-ab__im--ap em { right: 14px; }
.pf-ab__tr {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos, 50%);
  width: 3px;
  margin-left: -1.5px;
  z-index: 3;
  background: var(--fond);
  pointer-events: none;
}
.pf-ab__tr::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 42px; height: 42px;
  margin: -21px 0 0 -21px;
  border-radius: 999px;
  background: var(--accent);
  border: 3px solid var(--fond);
}
.ab__i {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
/* poignee FINE (7 sept 2026) : une poignee large decale la valeur du pointeur sur une piste
   etroite (80 % du bloc -> 86 % a 390) ; la piste couvre le cadre, tout reste saisissable. */
.ab__i::-webkit-slider-thumb { -webkit-appearance: none; width: 2px; height: 100%; cursor: ew-resize; }
.ab__i::-moz-range-thumb { width: 2px; height: 100%; border: 0; background: transparent; cursor: ew-resize; }
.ab__i:focus-visible { outline: 3px solid var(--marque); outline-offset: -3px; opacity: 1; }
.pf-ab figcaption { margin-top: 18px; }
.pf-ab figcaption h3 { font-size: 19px; font-weight: 600; }
.pf-ab figcaption p { margin-top: 8px; color: var(--texte-doux); font-size: 15px; }

.pf-av {
  display: flex;
  flex-direction: column;
  padding: 26px;
  border-radius: 20px;
  border: 1px solid var(--bordure);
  background: var(--fond);
}
/* Le lime de la marque est une couleur de FOND : partout ailleurs il porte un
   aplat sous une encre sombre, ou une encre claire sur le marine. Pose en
   ENCRE sur le blanc de la carte d avis, il donnait 1.29 contre 1 — la note se
   devinait plutot qu elle ne se lisait. On garde la teinte que le factory
   injecte et on n en descend que la clarte : la note reste lime, elle devient
   lisible. Meme famille de faute que le bandeau de marques — une couleur juste
   dans un role, reprise dans l autre. */
.pf-av__et {
  color: var(--accent);
  color: hsl(from var(--accent) h calc(s * .92) 26%);
  letter-spacing: .22em;
  font-size: 17px;
}
.pf-av h3 { margin-top: 12px; font-size: 17px; font-weight: 600; }
.pf-av p { margin-top: 10px; color: var(--texte-doux); font-size: 15px; }
.pf-av__pd { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--bordure); }
.pf-av__in {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 999px;
  background:var(--marque);--sur-bande:var(--sur-marque);
  color:var(--sur-bande,var(--sur-marque));
  font-weight: 700;
}
.pf-ph--av { width: 42px; height: 42px; border-radius: 999px; flex: 0 0 auto; }
.pf-av__pd strong { display: block; font-size: 15px; }
.pf-av__pd span { font-size: 13px; color: var(--texte-doux); }

.pf-sec--mq { padding: clamp(30px, 3.4vw, 46px) 0; border-top: 1px solid var(--bordure); border-bottom: 1px solid var(--bordure); }
.pf-mq__t { display: block; margin-bottom: 16px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--texte-doux); }
.pf-mq { overflow: hidden; }
.pf-mq__p { display: flex; gap: 46px; width: max-content; animation: pf-def 34s linear infinite; }
.pf-mq__p span {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 26px;
  letter-spacing: .06em;
  color: var(--texte-doux);
  white-space: nowrap;
}
@keyframes pf-def { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .pf-mq__p { animation: none; } }

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

.pf-zn {
  display: block;
  padding: 16px;
  border-radius: 18px;
  background: var(--fond);
  border: 1px solid var(--bordure);
  transition: transform .18s ease;
}
a.pf-zn:hover { transform: translateY(-3px); }
.pf-ph--zn { aspect-ratio: 16 / 10; margin-bottom: 12px; border-radius: 12px; }
.pf-zn__t { display: block; font-size: 16px; font-weight: 600; }
.pf-zn__g, .pf-zn__l { display: block; margin-top: 4px; font-size: 13px; color: var(--texte-doux); }

.pf-ul { display: flex; flex-wrap: wrap; gap: clamp(26px, 4vw, 52px); align-items: center; }
.pf-ul__tx { flex: 1 1 min(380px, 100%); min-width: 0; }
.pf-ul__vi { flex: 1 1 min(420px, 100%); min-width: 0; }
.pf-ph--ul { aspect-ratio: 16 / 11; border-radius: 24px; }
.pf-ul__ad { margin-top: 18px; font-style: normal; }
.pf-ul__ad span { display: block; color: var(--texte-doux); }

.pf-ug { display: flex; flex-wrap: wrap; gap: clamp(24px, 3vw, 48px); align-items: center; justify-content: space-between; }
.pf-ug__tx { flex: 1 1 min(440px, 100%); min-width: 0; }
.pf-ug__tx p { margin-top: 14px; color: color-mix(in srgb, var(--sur-marque) 82%, transparent); }
.pf-ug__ac { flex: 0 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.pf-ug__tel {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: clamp(30px, 3.4vw, 44px);
  letter-spacing: .02em;
  white-space: nowrap;
}

/* ============================================================
   QUESTIONS, LIENS, APPEL
   ============================================================ */

.pf-fq { display: flex; flex-wrap: wrap; gap: clamp(24px, 3vw, 44px); align-items: flex-start; }
.pf-fq__l { flex: 2 1 min(440px, 100%); min-width: 0; }
.pf-fq__e {
  flex: 1 1 min(280px, 100%);
  min-width: 0;
  padding: 26px;
  border-radius: 20px;
  background:var(--marque);--sur-bande:var(--sur-marque);
  color:var(--sur-bande,var(--sur-marque));
}
.pf-fq__e strong { font-size: 18px; }
.pf-fq__e p { margin-top: 10px; color: color-mix(in srgb, var(--sur-marque) 82%, transparent); font-size: 15px; }
.pf-fq__e .pf-bt { margin-top: 18px; background: var(--accent); color: var(--texte); }
.pf-fq__r { border-bottom: 1px solid var(--bordure); }
.pf-fq__s {
  position: relative;
  display: block;
  padding: 18px 44px 18px 0;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.pf-fq__s::-webkit-details-marker { display: none; }
.pf-fq__s::after {
  content: '+';
  position: absolute;
  right: 6px; top: 50%;
  width: 28px; height: 28px;
  margin-top: -14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--accent);
  color: var(--texte);
  font-size: 20px;
  line-height: 1;
  transition: transform .2s ease;
}
.pf-fq__r[open] .pf-fq__s::after { transform: rotate(45deg); }
.pf-fq__c { padding: 0 44px 20px 0; color: var(--texte-doux); }

.pf-mi {
  display: block;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--bordure);
  background: var(--fond);
}
.pf-ph--mi { aspect-ratio: 16 / 9; border-radius: 12px; }
.pf-mi__tx { margin-top: 12px; }
.pf-mi__m { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-doux); }
.pf-mi__tx strong { display: block; margin-top: 5px; font-size: 16px; }
.pf-mi p { margin-top: 7px; color: var(--texte-doux); font-size: 14px; }

/* L appel est scinde : panneau clair a gauche, panneau de marque a droite. */
.pf-cta { padding: clamp(46px, 6vw, 88px) 0; }
.pf-cta__l {
  display: flex;
  flex-wrap: wrap;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid var(--bordure);
}
.pf-cta__g {
  flex: 1 1 min(420px, 100%);
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 2.6vw, 44px);
  padding: clamp(28px, 3.4vw, 52px);
  background: var(--fond-2);
}
/* Sans panneau de droite, la parole et le formulaire se partagent la
   largeur ; avec panneau, la carte devient trop etroite et ils s empilent
   d eux-memes. Aucun compte de colonnes fige. */
.pf-cta__tx { flex: 1 1 min(340px, 100%); min-width: 0; }
.pf-cta__g .pf-fm { flex: 1 1 min(360px, 100%); min-width: 0; margin-top: 0; align-content: flex-start; }
.pf-cta__g p { margin-top: 14px; color: var(--texte-doux); max-width: 52ch; }
.pf-cta__d { flex: 1 1 min(300px, 100%); min-width: 0; background:var(--marque);--sur-bande:var(--sur-marque); display: flex; }
.pf-ph--cta { flex: 1 1 auto; min-height: 260px; border-radius: 0; border: 0; }

.pf-fm { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; }
.pf-fm__c { flex: 1 1 44%; min-width: min(220px, 100%); margin: 0; }
.pf-fm__c--long { flex-basis: 100%; }
.pf-fm label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.pf-fm input, .pf-fm textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--bordure);
  background: var(--fond);
  color: var(--texte);
  font: inherit;
  font-size: 15px;
}
.pf-fm textarea { resize: vertical; }

.pf-co { display: flex; flex-wrap: wrap; gap: clamp(26px, 4vw, 56px); align-items: flex-start; }
.pf-co__g { flex: 2 1 min(440px, 100%); min-width: 0; }
.pf-co__g > p { margin-top: 14px; color: var(--texte-doux); max-width: 56ch; }
.pf-co__d { flex: 1 1 min(280px, 100%); min-width: 0; }
.pf-co__i { padding: 20px; border-radius: 18px; border: 1px solid var(--bordure); }
.pf-co__i + .pf-co__i { margin-top: 16px; }
.pf-co__t { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux); }
.pf-co__i ul { margin: 10px 0 0; padding: 0; list-style: none; }
.pf-co__i li + li { margin-top: 5px; }

/* ============================================================
   PRODUITS
   ============================================================ */

.pf-fc { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.pf-fc__p {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--bordure);
  font-size: 14px;
  font-weight: 500;
  color: var(--texte-doux);
}
.pf-fc__p--on { background:var(--marque);--sur-bande:var(--sur-marque); border-color:var(--encre-marque,var(--marque)); color:var(--sur-bande,var(--sur-marque)); }

.pf-pd {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid var(--bordure);
  background: var(--fond);
}
.pf-ph--pd { aspect-ratio: 4 / 3; border-radius: 14px; }
.pf-pd__b {
  position: absolute;
  top: 26px; left: 26px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--texte);
  font-size: 12px;
  font-weight: 600;
}
.pf-pd h3 { margin-top: 14px; font-size: 18px; font-weight: 600; }
.pf-pd p { margin-top: 8px; color: var(--texte-doux); font-size: 14px; }
.pf-pd__p { margin-top: 14px; display: flex; align-items: baseline; gap: 6px; }
.pf-pd__p strong { font-family: 'Bebas Neue', Impact, sans-serif; font-size: 30px; color:var(--encre-marque,var(--marque)); }
.pf-pd__p span { font-size: 13px; color: var(--texte-doux); }
.pf-pd .pf-bt { margin-top: auto; align-self: flex-start; }
.pf-pd .pf-pts { margin-bottom: 16px; }

.pf-fp { display: flex; flex-wrap: wrap; gap: clamp(26px, 4vw, 56px); align-items: flex-start; }
.pf-fp__vi { flex: 1 1 min(400px, 100%); min-width: 0; }
.pf-fp__tx { flex: 1 1 min(380px, 100%); min-width: 0; }
.pf-ph--fp { aspect-ratio: 1 / 1; border-radius: 26px; }
.pf-fp__p { margin-top: 18px; display: flex; align-items: baseline; gap: 8px; }
.pf-fp__p strong { font-family: 'Bebas Neue', Impact, sans-serif; font-size: 44px; color:var(--encre-marque,var(--marque)); }
.pf-fp__p span { font-size: 14px; color: var(--texte-doux); }

.pf-sp { padding: 20px; border-radius: 16px; background: var(--fond); border: 1px solid var(--bordure); }
.pf-sp strong { display: block; font-family: 'Bebas Neue', Impact, sans-serif; font-size: 26px; color:var(--encre-marque,var(--marque)); }
.pf-sp span { display: block; margin-top: 4px; font-size: 13px; color: var(--texte-doux); }

/* ============================================================
   JOURNAL ET MENTIONS
   ============================================================ */

.pf-bl { display: block; border-radius: 20px; overflow: hidden; border: 1px solid var(--bordure); background: var(--fond); }
.pf-ph--bl { aspect-ratio: 16 / 10; border-radius: 0; border: 0; }
.pf-bl__tx { padding: 20px 22px; }
.pf-bl__m { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-doux); }
.pf-bl h3 { margin-top: 8px; font-size: 18px; font-weight: 600; }
.pf-bl p { margin-top: 8px; color: var(--texte-doux); font-size: 15px; }

.pf-ar { display: flex; flex-wrap: wrap; gap: clamp(26px, 4vw, 56px); align-items: flex-start; }
.pf-ar__c { flex: 2 1 min(460px, 100%); min-width: 0; }
.pf-ar__m { display: block; margin-top: 12px; font-size: 13px; color: var(--texte-doux); }
.pf-ph--ar { aspect-ratio: 16 / 9; margin-top: 22px; border-radius: 22px; }
.pf-ar__x { margin-top: 26px; }
.pf-ar__x h2 {
  margin-top: 32px;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 30px;
  text-transform: uppercase;
}
.pf-ar__x h3 { margin-top: 24px; font-size: 19px; font-weight: 600; }
.pf-ar__x p { margin-top: 12px; color: var(--texte-doux); }
.pf-ar__e { margin-top: 24px; padding: 20px 22px; border-radius: 16px; background: var(--fond-2); border-left: 4px solid var(--accent); }
.pf-ar__e p { margin-top: 8px; color: var(--texte-doux); }
.pf-ar__s {
  position: sticky;
  top: 96px;
  flex: 1 1 min(250px, 100%);
  min-width: 0;
  padding: 22px;
  border-radius: 18px;
  border: 1px solid var(--bordure);
}
.pf-ar__st { display: block; margin-bottom: 12px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux); }
.pf-ar__s ul { margin: 0; padding: 0; list-style: none; }
.pf-ar__s li + li { margin-top: 8px; }
.pf-ar__s a { font-size: 15px; }
.pf-ar__s a:hover { color:var(--encre-marque,var(--marque)); }

.pf-lg { display: flex; flex-wrap: wrap; gap: clamp(26px, 4vw, 56px); align-items: flex-start; }
.pf-lg__c { flex: 2 1 min(460px, 100%); min-width: 0; }
.pf-lg__s {
  order: 2;
  flex: 1 1 min(240px, 100%);
  min-width: 0;
  padding: 22px;
  border-radius: 18px;
  background: var(--fond-2);
}
.pf-lg__s ul { margin: 0; padding: 0; list-style: none; }
.pf-lg__s li + li { margin-top: 8px; }
.pf-lg__s a { font-size: 14px; color: var(--texte-doux); }
.pf-lg__m { margin-top: 12px; font-size: 13px; color: var(--texte-doux); }
.pf-lg__b { margin-top: 34px; }
.pf-lg__b h2 { font-size: 20px; font-weight: 600; }
.pf-lg__b p { margin-top: 10px; color: var(--texte-doux); }

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

.pf-ft { padding: clamp(48px, 5vw, 76px) 0 26px; background:var(--marque);--sur-bande:var(--sur-marque); color:var(--sur-bande,var(--sur-marque)); }
.pf-ft__gr { display: flex; flex-wrap: wrap; gap: clamp(24px, 3vw, 44px); }
.pf-ft__col { flex: 1 1 20%; min-width: min(190px, 100%); }
.pf-ft__mq { flex: 1.6 1 min(260px, 100%); }
.pf-ft__mq strong { font-family: 'Bebas Neue', Impact, sans-serif; font-size: 28px; letter-spacing: .04em; text-transform: uppercase; }
.pf-ft__mq p { margin-top: 12px; color: color-mix(in srgb, var(--sur-marque) 76%, transparent); font-size: 15px; }
.pf-ft__rx { display: flex; gap: 10px; margin-top: 18px; }
.pf-ft__rx i {
  width: 34px; height: 34px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--sur-marque) 30%, transparent);
}
.pf-ft__ct { display: block; margin-bottom: 12px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.pf-ft__col ul { margin: 0; padding: 0; list-style: none; }
.pf-ft__col li + li { margin-top: 8px; }
.pf-ft__col a, .pf-ft__col li { font-size: 15px; color: color-mix(in srgb, var(--sur-marque) 82%, transparent); }
.pf-ft__col a:hover { color:var(--sur-bande,var(--sur-marque)); }
.pf-ft__bas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  justify-content: space-between;
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--sur-marque) 16%, transparent);
  font-size: 13px;
  color: color-mix(in srgb, var(--sur-marque) 70%, transparent);
}
.pf-ft__liens { display: flex; flex-wrap: wrap; gap: 18px; }

/* ============================================================
   COMPACT — le volet se replie a plat, le menu passe en tiroir
   ============================================================ */

@media (max-width: 1023px) {
  /* R2 — sous mille pixels la colonne du mot n a plus de quoi vivre a cote de
     la case : l affiche repasse en une seule colonne et la case reprend une
     forme lisible en largeur, sous la parole. */
  .pf-hero__gr { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  /* Sous le palier, la case n est plus etiree par la rangee : elle reprend sa
     forme declaree. Le plancher de 520px du grand ecran doit donc tomber, sinon
     il l emporte sur le 4/3 et la case redevient un portrait sur telephone. */
  .pf-ph--hero { aspect-ratio: 4 / 3; max-height: 62svh; min-height: 0; }
  .pf-hero__tx, .pf-hero__vi { padding-top: 0; }
  .pf-hero__gr { padding-top: clamp(96px, 12vw, 118px); }
  .pf-hd__bg {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px; height: 44px;
    padding: 0 9px;
    border-radius: 12px;
    border: 1px solid currentColor;
    cursor: pointer;
  }
  .pf-hd__bg i { display: block; height: 2px; background: currentColor; }
    /* REGLE 7 en petit ecran : l appel ne DISPARAIT pas. C est meme la ou il
     sert le plus. Il se resserre, il ne se cache pas. */
  .pf-hd__tel { padding: 9px 12px; font-size: 12px; letter-spacing: 0; }

  .pf-hd__nav {
    position: absolute;
    top: 78px;
    left: 0; right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100vh - 78px);
    overflow-y: auto;
    padding: 10px 24px 26px;
    background: var(--fond);
    color: var(--texte);
    border-bottom: 1px solid var(--bordure);
  }
  .pf-hd__bx:checked ~ .pf-wrap .pf-hd__nav { display: flex; }

  .pf-nv__t { height: 52px; padding: 0; font-size: 16px; border-bottom: 1px solid var(--bordure); }
  .pf-nv__t--volet { justify-content: space-between; }

  /* A plat : dans le flux, toujours visible, sans ombre ni largeur fixe. */
  .pf-nv__v {
    position: static;
    opacity: 1;
    visibility: visible;
    padding-top: 0;
    transform: none;
  }
  .pf-nv__vin {
    width: auto;
    max-width: none;
    flex-direction: column;
    gap: 18px;
    padding: 14px 0 18px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
  .pf-nv__vit { flex: 0 0 auto; }
  .pf-nv__ph { aspect-ratio: 16 / 7; }
}

@media (max-width: 767px) {
  .pf-hero { padding-top: 128px; }
  .pf-a-hero .pf-fa { padding-top: 92px; }
  .pf-hero__ct { position: static; margin-top: 16px; max-width: none; }
  .pf-ch__i { padding-left: 0; border-left: 0; border-top: 1px solid color-mix(in srgb, var(--sur-marque) 20%, transparent); padding-top: 18px; }
  .pf-ch__i:first-child { border-top: 0; padding-top: 0; }
  .pf-hero__rp { border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--sur-marque) 18%, transparent); }
  .pf-hero__rp:last-child { border-bottom: 0; }
  .pf-ar__s { position: static; }
}

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

/* SIGNATURE — la GRANDE COURBURE GENERALISEE (52px x72, 40px x56). La
   reference courbe fort et courbe partout : ses deux rayons dominants sont
   les plus grands du corpus a ce niveau d emploi. */
.pf-ph--hero, .pf-ph--bs, .pf-ph--ex, .pf-ph--cta, .pf-ph--ul { border-radius: 52px; }
.pf-sv, .pf-ex__pl, .pf-fq__c, .pf-zn__g, .pf-pd, .pf-co__i { border-radius: 40px; }

/* SIGNATURE — le petit rayon de 16px reserve a ce qui se clique, et le
   DISQUE (50%) a ce qui porte un pictogramme. Rien entre 16 et 40.

   `.pf-co__i` etait dans la liste du disque : c est une CARTE de texte
   bordee, 419 x 136 sur la page contact. Cinquante pour cent sur un
   rectangle plat ne fait pas un disque, il fait une ellipse — et le texte,
   lui, reste rectangulaire : « 01 84 60 12 34 » et « Montreuil et communes
   limitrophes » sortaient de l ovale des deux cotes. Le disque va a ce qui
   PORTE un pictogramme, pas a ce qui porte des lignes ; la carte rejoint le
   rayon de panneau.

   `.pf-ch__i` a suivi le meme chemin, une largeur plus bas. La premiere
   ecriture de cette note la laissait dans le disque au motif qu elle n avait
   « ni bordure ni fond » — c etait faux deux fois : elle porte un
   `border-left` de separation des le bureau, et sous 900px ce filet devient un
   `border-top`. R3b l a nommee a 390 : `DIV.pf-ch__i 342x94`, sur les
   quatorze pages et dans les deux etats. Un rayon de 50% sur un bloc de 342
   par 94 courbe le filet en arc d ellipse au-dessus du chiffre. Une colonne
   de chiffre separee par un trait n est pas un pictogramme : elle sort du
   disque. Seul `.pf-pr__n`, une pastille carree qui porte un numero, y reste.

   LA LECON, generique : un rayon « invisible » ne l est que tant que rien
   n est peint dessus, et une media query peint. Le disque ne se donne pas a
   une classe parce qu elle n a pas encore de bordure ; il se donne a ce qui
   est CARRE par construction. */
.pf-fm__c, .pf-fc__p, .pf-tags li { border-radius: 16px; }
.pf-pr__n { border-radius: 50%; }

/* SIGNATURE — l UNIQUE degrade de la reference : une diagonale a 56 degres
   du marine profond vers le bleu vif. Aucun autre degrade sur la page.

   Deux erreurs de portage corrigees le 21 aout 2026 :
   1. il etait pose sur `.pf-hero__gr`, la grille INTERNE de l affiche, alors
      que le fond de marque est celui de la SECTION. Un degrade qui s arrete
      aux 1192px de la grille dessine un rectangle, pas un fond ;
   2. il finissait sur `--marque` en partant d un melange vers `--texte`, donc
      du noir vers le marine : il s assombrissait au lieu de s eclaircir. La
      reference fait l inverse, rgb(0,39,90) vers rgb(9,114,201) — meme teinte,
      meme saturation, la clarte seule change (18% -> 41% en HSL). D ou la
      syntaxe relative : elle tient quelle que soit la palette que le factory
      injecte, alors qu un melange vers `--fond` delave vers le gris. */
.pf-sec--mq, .pf-cta, .pf-hero {
  /* La couleur AVANT le degrade, et pas seulement en repli : un degrade est un
     `background-image`, il ne repond pas de `background-color`. Une bande qui
     ne pose que le degrade se lit donc « fond de page » a la mesure — la
     reference, elle, ouvre sur un aplat franc. La teinte reprise est celle du
     depart du degrade, pour qu on ne voie pas la difference a l oeil. */
  background-color: hsl(from var(--marque) h s 18%);
  background-image: linear-gradient(56deg, var(--marque) 0%, var(--marque) 100%);
  background-image: linear-gradient(
    56deg,
    hsl(from var(--marque) h s 18%) 0%,
    hsl(from var(--marque) h s 41%) 100%);
}

/* Le bandeau de marques a recu le degrade SOMBRE de la signature ci-dessus,
   mais son encre etait restee celle du theme clair : `--texte-doux`, soit
   rgb(74, 86, 102), pose sur un marine allant de 18% a 41% de clarte. Les sept
   noms de fabricants se lisaient a peine. R4b ne pouvait pas le voir : elle
   juge l encre posee sur un CADRE VIDE, et ce bandeau n est pas un cadre, c est
   une SECTION peinte. Meme faute que l ellipse des coordonnees — une signature
   de gabarit portee sur une classe dont le contenu, lui, etait ecrit pour le
   fond clair. L encre suit donc le fond qu on vient de lui donner, et elle le
   suit en `color-mix` sur `--fond` : la teinte reste celle que le factory
   injecte, seule sa presence baisse. */
.pf-sec--mq .pf-mq__t { color: color-mix(in srgb, var(--fond) 62%, transparent); }
.pf-sec--mq .pf-mq__p span { color: color-mix(in srgb, var(--fond) 78%, transparent); }

/* SIGNATURE — l ombre LARGE, DOUCE et DECALEE A DROITE
   (`rgba(0,0,0,.05) 2px 8px 44px 3px`, x4) : un halo, jamais un relief. */
.pf-sv, .pf-fq__c, .pf-pd, .pf-zn__g {
  box-shadow: 2px 8px 44px 3px color-mix(in srgb, var(--texte) 5%, transparent);
}

/* SIGNATURE — le CONTOUR INTERNE net d un pixel (x2), en regles distinctes
   pour que chaque rang de piece garde son intensite. */
.pf-sv { position: relative; }
.pf-sv::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);
}
.pf-fq__c { position: relative; }
.pf-fq__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);
}
.pf-pd { position: relative; }
.pf-pd::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);
}
.pf-ex__pl { position: relative; }
.pf-ex__pl::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 — la vue se LEVE par le bas (masque unique `transparent 65% ->
   plein`, aucun clip-path sur toute la reference).

   Erreur de portage corrigee le 21 aout 2026 : le masque etait pose sur
   `.pf-hero__bg` et `.pf-wy__bg`, qui ne sont pas des fonds mais les BADGES
   chiffres 01/02/03 — le suffixe a ete lu comme « background » alors qu il
   dit « badge ». Il effacait donc le haut des chiffres. La signature parle
   d une VUE : elle appartient au visuel de l affiche, le seul cadre de la
   coquille qui monte du bas de la section. */
/* F1 — le masque est RETIRE. Retourne pour partir du haut (`transparent 0 ->
   #000 12%`), il effacait le bord superieur de la vue — c est-a-dire, depuis
   que la vue monte au bord de la fenetre, exactement la rangee que le modele
   remplit de matiere. La signature d origine parle d une apparition PAR LE
   BAS, relevee sur une autre vue du gabarit ; ici la vue s arrete AVANT le
   bas de la fenetre et commence au bord haut : elle n a pas de bord a faire
   naitre. Une signature posee sur le mauvais cadre, ou a l envers, est une
   faute de portage, pas une fidelite. */


/* MOBILE — debordement mesure le 7 septembre 2026 (gate honnete, 21 pages x 3 largeurs) : sous 480
   la paire d appels + burger (`.pf-hd__ac`) allait a 523px pour 390, le burger hors ecran. La paire
   cede, chaque appel se serre avec ellipse, le burger reste dans la fenetre. */
@media (max-width: 480px) {
  .pf-hd__in { min-width: 0; }
  .pf-hd__ac { flex: 1 1 auto; min-width: 0; justify-content: flex-end; gap: 8px; }
  .pf-hd__ac .pf-bt { min-width: 0; padding-inline: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pf-hd__bg { flex: none; }
}

/* >>> NORME COQUILLE — cadre vide (pose par _lib/poser-cadre-vide.mjs) */
/* ============================================================
   NORME COQUILLE — LE CADRE VIDE PORTE SON ENCRE (R4b)
   ------------------------------------------------------------
   R4 dit depuis toujours que le cadre VIDE et le cadre REMPLI sont deux
   etats TENABLES. Seule la moitie basse etait mesuree : « le cadre vide ne
   s effondre pas sous 24 px ». Personne ne mesurait la moitie haute : « le
   cadre vide reste tenable quand il est GRAND ».

   C est la faute qu Angelo a vue le 22 aout 2026. Il n a pas vu une
   composition fausse — les bandes de reference le prouvent : le hero de
   roofer est bien une photo plein cadre avec le texte ecrit dessus, et le
   cadre de plumbfixx mesure 5,5 colonnes sur 12 la ou le modele en prend 7.
   Il a vu l ETAT VIDE : un mur blanc de 800 x 750 px portant une lettre
   perdue. La coquille n embarque aucune photo — c est la regle — donc l
   etat vide n est pas un accident de fixture, c est l etat NORMAL d une
   coquille au repos. Il devait etre dessine, il ne l avait jamais ete.

   Ce fichier le dessine, UNE fois, pour toutes les coquilles. Il ne touche
   ni `display`, ni `position`, ni `overflow`, ni aucune boite : la
   geometrie de chaque modele est deja jugee par F1/F2 et par R2/R3, on n y
   revient pas. Il ne pose que de la peinture et de l encre.

   Le crochet est volontairement AGRAMMATICAL : `[data-slot]` sans image
   dedans. Les sept coquilles nomment leur cadre `kr-vue--nue`, `pf-ph--nu`,
   `ig--nu`, ou ne le nomment pas du tout — s appuyer sur ces noms, c est
   ecrire sept correctifs a la main, puis trente-sept. `data-slot` est pose
   par R1 sur TOUS les cadres de TOUTES les coquilles : c est le seul point
   d appui qui passe a l echelle.

   Les quatre couleurs sont des variables : la fabrique les change comme elle
   change une palette.

   LA TEINTE SE DECIDE PAR CADRE, PAS PAR COQUILLE. C est la faute qu Angelo
   a vue le 22 aout 2026 sur plumfixx : la coquille avait ete teintee SOMBRE
   en bloc, parce que son hero ecrit en blanc — sauf que ce blanc repose sur
   l aplat bleu de la SECTION, pas sur le cadre. Le placeholder lateral, qui
   ne porte aucune encre, devenait une dalle noire de 800 x 750 px au milieu
   d une page claire. Un placeholder qui ne porte rien n a aucune raison
   d etre sombre.

   Le defaut est donc CLAIR : un emplacement en attente se lit comme une
   carte grise, c est la convention de tout le metier, et c est la version
   qu Angelo avait validee. Seuls les cadres PORTEURS — ceux sur lesquels de
   l encre repose vraiment, hero pleine fenetre sous son voile — prennent la
   teinte que leur encre exige. Ces cadres-la sont trouves par la MESURE, pas
   a la main : `_lib/teinter-cadres.mjs` ouvre les pages rendues, regarde
   quelle encre tombe dans quel cadre, et ecrit la liste en queue du
   `style.css` de la coquille. R4b verifie ensuite le resultat sur les pixels.
   ============================================================ */

:root {
  --cadre-vide-fond: #e6e9ec;
  --cadre-vide-trame: rgba(0, 0, 0, .045);
  --cadre-vide-encre: rgba(17, 22, 28, .68);
  --cadre-vide-filet: rgba(0, 0, 0, .10);
}

[data-slot]:not(:has(img)):not(:has(video)) {
  background-color: var(--cadre-vide-fond);
  /* Une trame diagonale : sans elle un aplat sombre se lit comme une panne
     d affichage. Avec elle, il se lit comme un emplacement en attente. */
  background-image: repeating-linear-gradient(135deg,
    transparent 0 13px, var(--cadre-vide-trame) 13px 14px);
  box-shadow: inset 0 0 0 1px var(--cadre-vide-filet);
  color: var(--cadre-vide-encre);
  /* SEULE propriete de boite de cette feuille, et elle ne vit que sur l etat
     VIDE : elle disparait des que la fabrique injecte une photo. Elle sert a
     une chose — permettre a la legende de savoir si son cadre est assez large
     pour la porter (voir le @container plus bas). Sans elle, la meme legende
     s ecrit dans une pastille de zone de 28 px et dans un hero de 800 px. */
  container-type: inline-size;
}

/* L intitule. Les gabarits y mettent tantot l alt complet, tantot la seule
   initiale du sujet — et cette initiale, dans un cadre de hero, sort a
   78 px : une lettre geante a la derive, c est ce qui faisait « casse ».
   On la ramene a la taille d une legende, quelle que soit la taille du
   cadre : une legende ne grandit pas avec son cadre.

   Et par defaut elle se TAIT. Un cadre ne porte une legende que s il est
   assez large pour l ecrire sur une ligne lisible : une pastille de zone de
   28 px, un cadre de maillage de 84 px, ne portent pas de phrase — ils
   tiennent leur aplat. Ecrite quand meme, la legende s y empile en colonne
   d une lettre : c est exactement ce que T5 appelle un serrage, et la pose
   du cadre vide en avait fabrique 306 sur heatfix2, 256 sur roofivo, 220 sur
   electria. Le libelle n est pas perdu pour autant : les gabarits le portent
   deja en `aria-label`, il reste lu par les lecteurs d ecran et par le gate.

   Le seuil est en unites de conteneur, pas de fenetre : c est la largeur du
   CADRE qui decide, pas celle de l ecran. Un hero garde sa legende a 390 px
   de fenetre ; une pastille ne l a jamais, meme a 1440. */
[data-slot]:not(:has(img)):not(:has(video)) > * {
  font-size: 0 !important;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cadre-vide-encre);
  -webkit-text-fill-color: var(--cadre-vide-encre);
  opacity: 1;
  max-width: 34ch;
  text-align: center;
  text-shadow: none;
}

/* 260 px : en dessous, une legende de 34ch a 11 px ne tient pas deux mots par
   ligne — le seuil est celui de T5, pas un gout. Au-dessus, elle s ecrit. */
@container (min-width: 260px) {
  [data-slot]:not(:has(img)):not(:has(video)) > * {
    font-size: clamp(11px, .95vw, 14px) !important;
  }
}
/* <<< NORME COQUILLE — cadre vide */

/* >>> NORME COQUILLE — teinte des cadres porteurs (pose par _lib/teinter-cadres.mjs) */
/* Cadres PORTEURS : de l encre claire repose reellement dessus (mesure du
   2026-08-22 sur 12 page(s), 1440 et 390 px). Leur etat vide prend
   le sol de leur section, assombri d un cran, pour que cette encre reste
   lisible sans plaquer une dalle etrangere a la palette ; tous les autres
   cadres gardent le clair par defaut. Ne pas editer a la main : remesurer.

   Un cadre porteur SE TAIT. Sa legende est centree ; de l encre repose
   deja dessus, par definition — l ecrire, c est la poser en travers du
   titre. C est la collision qu on voyait sur le hero pleine fenetre de
   template-14 : « EMPLACEMENT VISUEL — ... » ecrit sur le paragraphe.
   Le libelle reste porte en aria-label, il n est pas perdu. */
[data-slot="pf-ph--hero"]:not(:has(img)):not(:has(video)) {
  --cadre-vide-fond: #1d4070;
  --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 */

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

/* contraste-bandes (14/09/2026) — regle portee par la bande qui peint le fond mesure.
   Le bouton citron declare son encre (.pf-bt--lime : color var(--texte)) mais, pose dans une bande
   marine, `.pf-sec--marine a` (plus specifique) le repeignait en --sur-bande : blanc sur citron,
   ratio 1,29. On retablit l'encre que le bouton declare, sur toute bande marine. */
.pf-sec--marine .pf-bt--lime { color: var(--texte); }