/* ============================================================
   VOLTFLOW — feuille unique de la coquille.
   Ce fichier est la SOURCE ; dist/ n en est qu une copie
   ecrasee a chaque rendu.

   Ce que cette fiche a de propre :
   - le SOMBRE structure la page (sections pleine largeur en
     couleur de marque, entre blanc et gris pale) ;
   - une seule graisse, 500, du titre au pied : la hierarchie
     vient de la taille, jamais du gras ;
   - des cartes de service a largeurs INEGALES et hauteur
     commune, la premiere portant le propos ;
   - une marge de cadre large (144 a pleine largeur) ;
   - l iconographie est en trace inline, jamais en masque.
   ============================================================ */

:root {
  --r-p: 8px;          /* tout cadre ordinaire */
  --r-g: 16px;         /* grandes vues */
  --r-pil: 100px;      /* pilules */
  --r-past: 50px;      /* pastille d etiquette */
  --marge: clamp(20px, 10vw, 144px);
  --anneau: inset 0 0 0 1px rgba(0, 0, 0, .08);
  --lev-1: 0 .6px 1.2px rgba(0, 0, 0, .14);
  --lev-2: 0 .6px 1.2px rgba(0, 0, 0, .14), 0 2.3px 5px rgba(0, 0, 0, .10);
  --lev-3: 0 .6px 1.2px rgba(0, 0, 0, .18), 0 2.3px 5px rgba(0, 0, 0, .14), 0 8px 20px rgba(0, 0, 0, .10);
  --pas: clamp(56px, 6vw, 104px);
  /* Hauteur RENDUE de l entete plus son air. Le retrait de la scene
     d accueil vaut exactement cette valeur : c est de la geometrie, et
     c est ce qui met le haut de la photo au ras de la fenetre au lieu
     de la laisser passer sous une entete transparente (regle 10). */
  --entete: 84px;
}

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

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

body {
  margin: 0;
  font-family: Manrope, 'Segoe UI', system-ui, sans-serif;
  font-weight: 500;               /* une seule graisse sur toute la fiche */
  font-size: 17px;
  line-height: 1.6;
  color: var(--texte);
  background: var(--fond);
  overflow-x: hidden;
}

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

/* -- Cadre : la marge large est la mesure de la fiche ------------- */
.vf-cadre {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--marge);
}

.vf-sec { padding-block: var(--pas); }
.vf-sec--serre { padding-block: clamp(28px, 3vw, 44px); }
.vf-sec--pale { background: var(--fond-2); }

/* Sections sombres : c est le SOMBRE qui rythme la page. */
.vf-nuit { background: var(--marque); color: var(--sur-marque); }
.vf-nuit .vf-prose,
.vf-nuit .vf-chapo { color: color-mix(in srgb, var(--sur-marque) 76%, transparent); }
.vf-nuit .vf-etiq { background: color-mix(in srgb, var(--sur-marque) 12%, transparent); color: var(--sur-marque); }

/* ============================================================
   Ecriture
   ============================================================ */
.vf-tit { font-size: clamp(30px, 3.4vw, 48px); letter-spacing: -.02em; }
.vf-tit--large { font-size: clamp(30px, 3.4vw, 48px); }
.vf-tit--geant { font-size: clamp(36px, 4.6vw, 64px); line-height: 1.1; }
.vf-tit em { font-style: normal; color: var(--accent); }
.vf-h2 { font-size: clamp(24px, 2.4vw, 36px); letter-spacing: -.01em; }
.vf-h3 { font-size: clamp(19px, 1.5vw, 24px); }
.vf-h4 { font-size: 19px; }

.vf-chapo { font-size: 19px; color: var(--texte-doux); max-width: 62ch; }
.vf-prose { color: var(--texte-doux); }
.vf-prose--large { font-size: 19px; max-width: 68ch; }
.vf-mention { display: block; margin-top: 16px; font-size: 13px; color: var(--texte-doux); }

/* Pastille d etiquette : le seul rayon de 50px de la fiche. */
.vf-etiq {
  display: inline-block;
  padding: 6px 16px;
  border-radius: var(--r-past);
  background: var(--fond-2);
  color: var(--marque);
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.vf-tete { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 44px; }
.vf-tete .vf-chapo { margin-top: 4px; }

.vf-ico { flex: none; display: block; }
.vf-ico path, .vf-ico circle, .vf-ico rect, .vf-ico polyline { vector-effect: non-scaling-stroke; }

.vf-vue { width: 100%; border-radius: var(--r-g); object-fit: cover; }
.vf-vue--pleine { height: 100%; border-radius: 0; }

.vf-points { display: flex; flex-direction: column; gap: 10px; }
.vf-points li { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.vf-points li span { min-width: 0; color: var(--texte-doux); }
.vf-points li svg { margin-top: 3px; color: var(--accent); }
.vf-points--fin li span { font-size: 15px; }
.vf-points--file { flex-direction: row; flex-wrap: wrap; gap: 10px 24px; }

.vf-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.vf-tags b {
  padding: 4px 12px;
  border-radius: var(--r-pil);
  border: 1px solid var(--bordure);
  font-size: 13px;
  color: var(--texte-doux);
}

/* -- Appels ------------------------------------------------------- */
.vf-appel {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px;
  border: 0;
  border-radius: var(--r-p);
  background: var(--accent);
  color: var(--sur-marque);
  cursor: pointer;
  box-shadow: var(--lev-1);
}
.vf-appel:hover { background: color-mix(in srgb, var(--accent) 84%, var(--texte)); }
.vf-appel--nu {
  padding: 0;
  background: transparent;
  color: var(--marque);
  box-shadow: none;
}
.vf-appel--nu:hover { background: transparent; color: var(--accent); }
.vf-appel--clair { background: var(--fond); color: var(--marque); }
.vf-appel--clair:hover { background: color-mix(in srgb, var(--fond) 86%, var(--accent)); }
.vf-appel--centre { display: inline-flex; margin-top: 40px; }
.vf-appel--plein { width: 100%; justify-content: center; }
.vf-nuit .vf-appel--nu { color: var(--sur-marque); }

/* ============================================================
   Barre : logo a gauche, navigation CENTREE, appel a droite.
   Elle se pose SUR le hero, sans fond, et ne prend son fond
   qu une fois la page defilee.
   ============================================================ */
.vf-barre {
  position: sticky; top: 0; z-index: 40;
  transition: background .2s ease, box-shadow .2s ease;
}
.vf-barre--posee { background: var(--fond); box-shadow: var(--lev-1); }
.vf-barre__cadre {
  display: flex; align-items: center; gap: 24px;
  width: 100%; max-width: 1440px;
  margin-inline: auto;
  padding: 16px var(--marge);
}
.vf-logo { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; }
.vf-logo svg { color: var(--accent); }

.vf-nav { flex: 1 1 auto; display: flex; justify-content: center; align-items: center; gap: 28px; min-width: 0; }
.vf-nav__entree { position: relative; }
.vf-nav__entree > a:hover, .vf-volet__lien:hover { color: var(--accent); }

/* Chevron : tout lien a volet le porte, tourne a l ouverture. */
.vf-chev {
  display: inline-block;
  width: 8px; height: 8px;
  margin-left: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .18s ease;
}
.vf-volet__lien { display: inline-flex; align-items: center; cursor: pointer; }
.vf-volet:hover .vf-chev, .vf-volet:focus-within .vf-chev { transform: translateY(1px) rotate(-135deg); }

.vf-barre__droite { display: flex; align-items: center; gap: 16px; flex: none; }
.vf-tel { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; }
.vf-tel svg { color: var(--accent); }
.vf-appel--barre { padding: 12px 22px; }

.vf-poussoir { display: none; }

/* -- Volet ---------------------------------------------------------
   Le decalage sous l intitule est un PADDING : la souris reste sur
   le volet en descendant, il ne se referme jamais dans le vide.
   La boite visible est peinte par un pseudo, pour que le padding de
   garde reste hors du cadre. */
.vf-volet__panneau {
  position: absolute;
  left: 50%; top: 100%;
  transform: translateX(calc(-50% + var(--dx, 0px)));
  display: flex; align-items: stretch;
  padding-top: 16px;
  width: min(760px, 92vw);
  opacity: 0; visibility: hidden;
  transition: opacity .16s ease;
}
.vf-volet:hover > .vf-volet__panneau,
.vf-volet:focus-within > .vf-volet__panneau { opacity: 1; visibility: visible; }
.vf-volet__panneau::before {
  position: absolute;
  content: '';
  left: 0; right: 0; top: 16px; bottom: 0;
  border-radius: var(--r-g);
  background: var(--fond);
  box-shadow: var(--anneau), var(--lev-3);
  pointer-events: none;
}
.vf-volet__colonnes {
  position: relative; z-index: 1;
  display: flex; gap: 32px;
  flex: 1 1 320px; min-width: 0;
  padding: 26px 0 26px 26px;
}
.vf-volet__col { display: flex; flex-direction: column; gap: 10px; flex: 1 1 160px; min-width: 0; }
.vf-volet__col b { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux); }
.vf-volet__col ul { display: flex; flex-direction: column; gap: 9px; }
.vf-volet__col a:hover { color: var(--accent); }

/* Vitrine SUR LE COTE : toute entree a volet en porte une. */
.vf-volet__vitrine {
  position: relative; z-index: 1;
  flex: 0 0 216px; min-width: 0;
  display: flex; flex-direction: column; gap: 8px;
  margin: 26px 26px 26px 0;
  padding: 16px;
  border-radius: var(--r-p);
  background: var(--fond-2);
}
.vf-volet__vitrine b { font-size: 15px; }
.vf-volet__vitrine span { font-size: 13px; color: var(--texte-doux); }
.vf-volet__vue {
  width: 100%; height: 124px;
  border-radius: var(--r-p);
  overflow: hidden;
  background: color-mix(in srgb, var(--marque) 12%, transparent);
}
.vf-volet__photo { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   Hero : vue plein ecran, photo voilee, titre ancre a GAUCHE et
   bas de centre, semis de pastilles en diagonale a droite.
   ============================================================ */
.vf-hero {
  position: relative;
  min-height: clamp(560px, 100vh, 1000px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: var(--marque);
  color: var(--sur-marque);
}
.vf-cont > .vf-hero:first-child, main > .vf-hero:first-child {
  margin-top: calc(-1 * var(--entete));
  padding-top: var(--entete);
}
.vf-hero__photo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .6;
}
/* Voile montant : la seule decoupe de la fiche hors comparateur. */
.vf-hero::after {
  position: absolute;
  content: '';
  inset: 0;
  background: rgba(0, 0, 0, .45);
  -webkit-mask-image: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, .35) 62%, rgba(0, 0, 0, .8) 100%);
  mask-image: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, .35) 62%, rgba(0, 0, 0, .8) 100%);
  pointer-events: none;
}
.vf-hero__semis {
  position: absolute;
  right: 6vw; top: 46%;
  width: 180px; height: 220px;
  pointer-events: none;
}
.vf-hero__semis i {
  position: absolute;
  width: 20px; height: 20px;
  border-radius: var(--r-pil);
  background: var(--accent);
  opacity: .9;
}
.vf-hero__semis i:nth-child(1) { left: 0; top: 0; }
.vf-hero__semis i:nth-child(2) { left: 46px; top: 62px; opacity: .6; }
.vf-hero__semis i:nth-child(3) { left: 118px; top: 124px; }
.vf-hero__semis i:nth-child(4) { left: 148px; top: 186px; opacity: .5; }

.vf-hero__cadre {
  position: relative; z-index: 2;
  width: 100%; max-width: 1440px;
  margin-inline: auto;
  padding: 0 var(--marge) clamp(48px, 6vw, 96px);
}
.vf-hero__mot { max-width: 700px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.vf-hero .vf-etiq { background: color-mix(in srgb, var(--sur-marque) 14%, transparent); color: var(--sur-marque); }
.vf-hero__sous { font-size: 19px; color: color-mix(in srgb, var(--sur-marque) 82%, transparent); }
.vf-hero__appels { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 8px; }
/* Regle 7 : les deux portes de conversion vivent dans le MEME parent —
   c est ce voisinage direct qui est exige, pas leur seule presence sur
   la page. Elles se dessinent en bouton dans les deux etats. */
.vf-portes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.vf-appelfinal__portes { justify-content: center; margin-top: 28px; }
.vf-contact__portes { margin-top: 4px; }
.vf-contact__coord a { color: var(--accent); }
.vf-contact__portes a { color: var(--sur-marque); }
.vf-contact__portes .vf-appel--clair { color: var(--marque); }
.vf-hero__appels .vf-appel--nu { color: var(--sur-marque); }
/* Bandeau d atouts : pose SOUS la scene, pleine largeur, sur son propre
   sol. Il ne partage plus la fenetre de l affiche — c est ce qui rend la
   premiere vue lisible comme celle du modele. Pistes COMPTEES, une valeur
   de N par palier : jamais de `flex: 1 1 base`, jamais d `auto-fit`. */
.vf-atouts {
  background: var(--fond-2);
  padding-block: clamp(40px, 4vw, 72px);
  border-bottom: 1px solid color-mix(in srgb, var(--texte) 10%, transparent);
}
.vf-atouts__jeu {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}
.vf-atouts__brique { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.vf-atouts__brique svg { color: var(--accent); }
.vf-atouts__brique b { font-size: 18px; color: var(--texte); }
.vf-atouts__brique span { color: var(--texte-doux); font-size: 15px; }
.vf-atouts .vf-points li span { color: var(--texte-doux); }
@media (max-width: 1100px) { .vf-atouts__jeu { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .vf-atouts__jeu { grid-template-columns: repeat(1, minmax(0, 1fr)); } }

/* ============================================================
   Ruban : des LIENS a icone, pas des logos. La piste deborde
   des deux cotes et se repete.
   ============================================================ */
.vf-ruban {
  position: relative;
  padding-block: 26px;
  border-bottom: 1px solid var(--bordure);
  overflow: hidden;
}
.vf-ruban__piste { display: flex; width: max-content; animation: vf-defile 38s linear infinite; }
.vf-ruban__file { display: flex; align-items: center; gap: 44px; padding-right: 44px; flex: none; }
.vf-ruban__entree { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.vf-ruban__entree svg { color: var(--accent); }
.vf-ruban__entree b { font-size: 17px; color: var(--texte-doux); }
/* Fondu lateral : seconde decoupe de la fiche. */
.vf-ruban::after {
  position: absolute;
  content: '';
  inset: 0;
  background: var(--fond);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 0) 88%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 0) 88%, #000 100%);
  pointer-events: none;
}
@keyframes vf-defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .vf-ruban__piste { animation: none; } }

/* ============================================================
   Services : largeurs INEGALES, hauteur commune. La premiere
   carte porte le propos, les suivantes sont menees par leur vue.
   ============================================================ */
.vf-services__file { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.vf-carte {
  min-width: 0;
  display: flex; flex-direction: column;
  border-radius: var(--r-p);
  background: var(--fond-2);
  overflow: hidden;
}
.vf-carte--maitresse { grid-column: span 2; background: var(--fond); box-shadow: var(--anneau), var(--lev-2); }
.vf-carte__vue { position: relative; height: 220px; overflow: hidden; border-radius: 8px 8px 0 0; }
.vf-carte--maitresse .vf-carte__vue { height: 300px; }
.vf-carte__ico {
  position: absolute;
  left: 20px; bottom: 20px;
  display: grid; place-items: center;
  width: 64px; height: 64px;
  border-radius: var(--r-p);
  background: var(--accent);
  color: var(--sur-marque);
  pointer-events: none;
}
.vf-carte__mot { display: flex; flex-direction: column; gap: 12px; padding: 24px; }

/* -- Intro -------------------------------------------------------- */
.vf-intro__cadre { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }

/* ============================================================
   Blocs de referencement : quatre au minimum, la vue passant
   d un cote a l autre.
   ============================================================ */
.vf-blocs .vf-cadre { display: flex; flex-direction: column; gap: clamp(48px, 5vw, 88px); }
.vf-bloc { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 64px); align-items: center; }
.vf-bloc--inverse { flex-direction: row-reverse; }
.vf-bloc__vue { flex: 1 1 380px; min-width: 0; }
.vf-bloc__vue img { height: clamp(240px, 30vw, 420px); }
.vf-bloc__mot { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }

/* ============================================================
   Colonne laterale : le patron des pages internes. La home ne
   l emploie jamais.
   ============================================================ */
.vf-flanc { display: flex; flex-wrap: wrap; gap: clamp(32px, 4vw, 64px); align-items: flex-start; }
.vf-flanc__corps { flex: 3 1 460px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.vf-flanc__cote { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.vf-flanc__encart {
  display: flex; flex-direction: column; gap: 8px;
  padding: 22px;
  border-radius: var(--r-p);
  border-left: 3px solid var(--accent);
  background: var(--fond-2);
}
.vf-flanc__vue { height: 260px; }

/* ============================================================
   Pourquoi nous : vue a gauche, file d atouts a droite, la
   premiere entree detachee des suivantes.
   ============================================================ */
.vf-pourquoi .vf-etiq { margin-bottom: 14px; }
.vf-pourquoi__duo { display: flex; flex-wrap: wrap; gap: clamp(32px, 4vw, 64px); margin-top: 40px; align-items: flex-start; }
.vf-pourquoi__vue { flex: 1 1 340px; min-width: 0; height: clamp(300px, 36vw, 516px); }
.vf-pourquoi__file { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.vf-pourquoi__file li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 6px 16px; }
.vf-pourquoi__file li > span:not(.vf-pourquoi__ico), .vf-pourquoi__file li > ul { grid-column: 2; }
.vf-pourquoi__file li b { grid-column: 2; font-size: 19px; }
.vf-pourquoi__ico { grid-row: span 2; color: var(--accent); }
.vf-pourquoi__tete { padding-bottom: 26px; border-bottom: 1px solid var(--bordure); }

/* ============================================================
   Secteurs : fiches larges, vue en bandeau haut.
   ============================================================ */
.vf-secteurs__file { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.vf-secteur {
  min-width: 0;
  display: flex; flex-direction: column;
  border-radius: var(--r-p);
  background: var(--fond);
  box-shadow: var(--anneau), var(--lev-1);
  overflow: hidden;
}
.vf-secteur__vue { height: 200px; border-radius: 8px 8px 0 0; }
.vf-secteur__mot { display: flex; flex-direction: column; gap: 12px; padding: 24px; }
.vf-secteur__marque { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }

/* ============================================================
   Zones : des jetons a vue, en file souple.
   ============================================================ */
.vf-zones__file { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.vf-zone {
  min-width: 0;
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px;
  border-radius: var(--r-p);
  border: 1px solid var(--bordure);
  background: var(--fond);
}
.vf-zone:hover { border-color: var(--accent); }
.vf-zone__vue { height: 120px; border-radius: var(--r-p); }
.vf-zone__tag { font-size: 13px; color: var(--texte-doux); }
.vf-zone svg { color: var(--accent); }

/* ============================================================
   Methode : sur fond sombre, le numero est un titre a part.
   ============================================================ */
.vf-methode__file { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.vf-etape { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.vf-etape__rang { font-size: 15px; letter-spacing: .12em; color: var(--accent); }
.vf-etape__vue { height: 170px; margin-top: 6px; }

/* ============================================================
   Chiffres : file plate, separee par des filets, sans carte.
   ============================================================ */
.vf-chiffres__file { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin: 0; }
.vf-chiffre {
  min-width: 0;
  padding-left: 24px;
  border-left: 1px solid var(--bordure);
}
.vf-chiffre dt { font-size: clamp(30px, 3vw, 44px); line-height: 1.1; color: var(--marque); }
.vf-chiffre dd { margin: 8px 0 0; font-size: 15px; color: var(--texte-doux); }
.vf-nuit .vf-chiffre { border-left-color: color-mix(in srgb, var(--sur-marque) 26%, transparent); }
.vf-nuit .vf-chiffre dt { color: var(--sur-marque); }
.vf-nuit .vf-chiffre dd { color: color-mix(in srgb, var(--sur-marque) 76%, transparent); }

/* ============================================================
   Reperage : propos a gauche, vue a droite.
   ============================================================ */
.vf-repere__cadre { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 64px); align-items: center; }
.vf-repere__mot { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.vf-repere__vue { flex: 1 1 380px; min-width: 0; height: clamp(240px, 28vw, 380px); }
.vf-adresse { display: flex; flex-direction: column; gap: 4px; font-style: normal; color: var(--texte-doux); }

/* ============================================================
   Avis : file debordante sur fond sombre.
   ============================================================ */
.vf-avis__piste {
  display: flex; gap: 24px;
  margin-top: 36px;
  padding-inline: var(--marge);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.vf-avis__carte {
  flex: 0 0 clamp(260px, 30vw, 400px);
  min-width: 0;
  margin: 0;
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 12px;
  padding: 26px;
  border-radius: var(--r-p);
  background: color-mix(in srgb, var(--sur-marque) 8%, transparent);
}
.vf-avis__notes { display: flex; gap: 5px; color: var(--accent); }
.vf-avis__carte blockquote { margin: 0; color: color-mix(in srgb, var(--sur-marque) 82%, transparent); }
.vf-avis__carte figcaption { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.vf-avis__carte figcaption span { color: color-mix(in srgb, var(--sur-marque) 68%, transparent); font-size: 13px; }

/* ============================================================
   Questions : accordeon ETROIT et CENTRE dans le cadre.
   ============================================================ */
.vf-questions .vf-etiq { margin-bottom: 14px; }
.vf-questions__colonne {
  width: min(772px, 100%);
  margin: 40px auto 0;
  display: flex; flex-direction: column; gap: 12px;
}
.vf-question {
  border-radius: var(--r-p);
  border: 1px solid var(--bordure);
  background: var(--fond);
  overflow: hidden;
}
.vf-question summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 22px;
  font-size: 19px;
  cursor: pointer;
  list-style: none;
}
.vf-question summary::-webkit-details-marker { display: none; }
.vf-question summary span { min-width: 0; }
.vf-question .vf-chev { flex: none; margin: 0; color: var(--accent); }
.vf-question[open] .vf-chev { transform: translateY(1px) rotate(-135deg); }
.vf-question p { padding: 0 22px 22px; }
.vf-questions__encart {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  margin-top: 12px;
  padding: 26px;
  border-radius: var(--r-p);
  background: var(--fond-2);
}
.vf-questions__encart b { font-size: 19px; }

/* ============================================================
   Urgence : bandeau sombre POSE DANS le cadre, jamais en pleine
   largeur. C est la marque de fabrique de cette fiche.
   ============================================================ */
.vf-urgence {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 30px 34px;
  border-radius: var(--r-p);
  background: var(--marque);
  color: var(--sur-marque);
  overflow: hidden;
}
/* Rayures : la seule trame de la fiche. */
.vf-urgence::before {
  position: absolute;
  content: '';
  right: 0; top: 0; bottom: 0;
  width: 220px;
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--sur-marque) 10%, transparent) 0 2px,
    transparent 2px 12px);
  pointer-events: none;
}
.vf-urgence__mot { position: relative; z-index: 1; flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.vf-urgence__etiq { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.vf-urgence .vf-prose, .vf-urgence .vf-points li span { color: color-mix(in srgb, var(--sur-marque) 78%, transparent); }
.vf-urgence .vf-appel { position: relative; z-index: 1; flex: none; }
.vf-urgence__portes { position: relative; z-index: 1; flex: none; }

/* ============================================================
   Certifications : fiches sobres a filet superieur.
   ============================================================ */
.vf-certifs .vf-prose--large + .vf-prose--large { margin-top: 14px; }
.vf-certifs__file { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.vf-certif {
  min-width: 0;
  display: flex; flex-direction: column; gap: 12px;
  padding-top: 22px;
  border-top: 2px solid var(--accent);
}
.vf-certif svg { color: var(--marque); }

/* ============================================================
   Aides : numero en surtitre, conditions en pied de fiche.
   ============================================================ */
.vf-aides__file { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.vf-aide {
  min-width: 0;
  display: flex; flex-direction: column; gap: 12px;
  padding: 26px;
  border-radius: var(--r-p);
  background: var(--fond);
  box-shadow: var(--anneau), var(--lev-1);
}
.vf-aide__rang { font-size: 13px; letter-spacing: .12em; color: var(--accent); }
.vf-aide__cond { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--bordure); font-size: 13px; color: var(--texte-doux); }

/* ============================================================
   Materiaux : vues coiffees d un intitule.
   ============================================================ */
.vf-materiaux__file { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.vf-materiau { min-width: 0; margin: 0; display: flex; flex-direction: column; }
.vf-materiau__vue { position: relative; height: 220px; overflow: hidden; border-radius: 8px 8px 0 0; }
.vf-materiau figcaption { display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 1px solid var(--bordure); border-top: 0; border-radius: 0 0 var(--r-p) var(--r-p); }

/* ============================================================
   Tarifs : le montant est un surtitre, l appel en pied.
   ============================================================ */
.vf-tarifs__file { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.vf-tarif {
  min-width: 0;
  display: flex; flex-direction: column; gap: 14px;
  padding: 28px;
  border-radius: var(--r-p);
  border: 1px solid var(--bordure);
  background: var(--fond);
}
.vf-tarif__prix { font-size: clamp(26px, 2.4vw, 36px); line-height: 1.1; color: var(--marque); }
.vf-tarif__prix span { margin-left: 6px; font-size: 15px; color: var(--texte-doux); }
.vf-tarif .vf-appel--nu { margin-top: auto; padding-top: 12px; }

/* ============================================================
   Chantiers : file debordante sur fond clair.
   ============================================================ */
.vf-chantiers__piste {
  display: flex; gap: 24px;
  margin-top: 36px;
  padding-inline: var(--marge);
  overflow-x: auto;
  scroll-snap-type: x proximity;
}
.vf-chantier { flex: 0 0 clamp(260px, 32vw, 420px); min-width: 0; margin: 0; scroll-snap-align: start; }
.vf-chantier__vue { position: relative; height: clamp(220px, 26vw, 340px); overflow: hidden; border-radius: 8px 8px 0 0; }
.vf-chantier figcaption { display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 1px solid var(--bordure); border-top: 0; border-radius: 0 0 var(--r-p) var(--r-p); }
.vf-chantier__meta { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }

/* ============================================================
   Avant / apres : deux photos SUPERPOSEES, la seconde decoupee
   par --pos, un curseur natif en surimpression.
   ============================================================ */
.vf-bascule__file { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.vf-bascule__jeu { min-width: 0; margin: 0; }
.ab__scene {
  position: relative;
  height: clamp(240px, 28vw, 380px);
  border-radius: var(--r-g);
  overflow: hidden;
  box-shadow: var(--lev-2);
}
.ab__vue { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ab__vue--apres { clip-path: inset(0 0 0 var(--pos, 50%)); }
.ab__trait {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos, 50%);
  width: 3px; margin-left: -1.5px;
  background: var(--fond);
  pointer-events: none;
}
.ab__etiq {
  position: absolute;
  bottom: 14px;
  padding: 5px 14px;
  border-radius: var(--r-pil);
  background: var(--fond);
  color: var(--texte);
  font-size: 13px;
}
.ab__etiq--g { left: 14px; }
.ab__etiq--d { right: 14px; }
.ab__poignee {
  position: absolute;
  left: 0; top: 50%;
  width: 100%; height: 34px;
  margin: -17px 0 0;
  -webkit-appearance: none; appearance: none;
  background: transparent;
  cursor: ew-resize;
}
.ab__poignee::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 34px; height: 34px;
  border-radius: var(--r-pil);
  background: var(--fond);
  box-shadow: var(--lev-3);
  cursor: ew-resize;
}
.ab__poignee::-moz-range-thumb {
  width: 34px; height: 34px; border: 0;
  border-radius: var(--r-pil);
  background: var(--fond);
  box-shadow: var(--lev-3);
  cursor: ew-resize;
}
.ab__poignee:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.vf-bascule__jeu figcaption { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; }

/* ============================================================
   Maillage : entrees a vue menant aux pages voisines.
   ============================================================ */
.vf-maillage__file { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.vf-lien-carte {
  min-width: 0;
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px;
  border-radius: var(--r-p);
  background: var(--fond-2);
}
.vf-lien-carte:hover { background: color-mix(in srgb, var(--fond-2) 70%, var(--accent)); }
.vf-lien-carte__vue { height: 150px; border-radius: var(--r-p); }
.vf-lien-carte b { font-size: 19px; }
.vf-lien-carte__meta { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.vf-lien-carte__fleche { color: var(--marque); }

/* ============================================================
   Appel final : section PLEINE HAUTEUR sur photo voilee.
   ============================================================ */
.vf-appelfinal {
  position: relative;
  display: flex; align-items: center;
  min-height: clamp(420px, 58vh, 720px);
  padding-block: var(--pas);
  background: var(--marque);
  color: var(--sur-marque);
  overflow: hidden;
}
.vf-appelfinal__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.vf-appelfinal__voile {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  pointer-events: none;
}
.vf-appelfinal__mot {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  text-align: center;
}
.vf-appelfinal__mot .vf-prose { color: color-mix(in srgb, var(--sur-marque) 82%, transparent); max-width: 62ch; }
.vf-appelfinal .vf-etiq { background: color-mix(in srgb, var(--sur-marque) 14%, transparent); color: var(--sur-marque); }
.vf-appelfinal__ligne { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; width: min(720px, 100%); }
.vf-appelfinal__ligne .vf-champ { flex: 1 1 220px; min-width: 0; text-align: left; }
.vf-appelfinal__ligne .vf-champ label { color: color-mix(in srgb, var(--sur-marque) 80%, transparent); }

/* ============================================================
   Fil d ariane : sous la barre, sur toute page hors accueil.
   ============================================================ */
.vf-ariane { padding-block: 20px; border-bottom: 1px solid var(--bordure); }
.vf-ariane ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--texte-doux); }
.vf-ariane li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.vf-ariane a:hover { color: var(--accent); }
.vf-ariane__sep {
  display: inline-block;
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--bordure);
  border-top: 1.5px solid var(--bordure);
  transform: rotate(45deg);
}

/* ============================================================
   Contact : coordonnees a gauche, cadre de formulaire a droite,
   le bouton prend TOUTE la largeur du cadre.
   ============================================================ */
.vf-contact .vf-etiq { margin-bottom: 14px; }
.vf-contact__duo { display: flex; flex-wrap: wrap; gap: clamp(32px, 4vw, 64px); margin-top: 40px; align-items: flex-start; }
.vf-contact__coord { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.vf-coord { display: flex; flex-direction: column; gap: 6px; }
.vf-coord span { color: var(--texte-doux); }
.vf-form {
  flex: 2 1 420px; min-width: 0;
  display: flex; flex-direction: column; gap: 18px;
  padding: clamp(22px, 3vw, 34px);
  border-radius: var(--r-g);
  background: var(--fond-2);
  box-shadow: var(--anneau);
}
.vf-form__file { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.vf-champ { min-width: 0; display: flex; flex-direction: column; gap: 7px; margin: 0; }
.vf-champ--long { grid-column: 1 / -1; }
.vf-champ label { font-size: 13px; color: var(--texte-doux); }
.vf-champ input, .vf-champ select, .vf-champ textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--bordure);
  border-radius: var(--r-p);
  background: var(--fond);
}
.vf-champ textarea { resize: vertical; min-height: 110px; }
.vf-champ input:focus-visible, .vf-champ select:focus-visible, .vf-champ textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ============================================================
   Journal : fiches a vue haute, la mention posee sur la vue.
   ============================================================ */
.vf-journal__file { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.vf-billet {
  min-width: 0;
  display: flex; flex-direction: column; gap: 12px;
  border-radius: var(--r-p);
  background: var(--fond);
  box-shadow: var(--anneau), var(--lev-1);
  overflow: hidden;
}
.vf-billet__haut { position: relative; display: block; }
.vf-billet__haut img { width: 100%; height: 210px; object-fit: cover; border-radius: 8px 8px 0 0; }
.vf-billet__meta {
  position: absolute;
  left: 14px; bottom: 14px;
  padding: 5px 12px;
  border-radius: var(--r-pil);
  background: var(--fond);
  font-size: 12px;
  color: var(--marque);
}
.vf-billet b { padding-inline: 20px; font-size: 19px; }
.vf-billet .vf-prose { padding: 0 20px 22px; }
.vf-journal .vf-appel--nu { margin-top: 32px; }

/* ============================================================
   Article : corps a colonne principale, sommaire en laterale.
   ============================================================ */
.vf-article__meta { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.vf-article__vue { height: clamp(240px, 30vw, 420px); margin-block: 12px; }
.vf-article .vf-flanc__corps > * + * { margin-top: 6px; }
.vf-article .vf-h2 { margin-top: 28px; }
.vf-article .vf-h3 { margin-top: 20px; }
.vf-encadre {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 20px;
  padding: 22px;
  border-radius: var(--r-p);
  border-left: 3px solid var(--accent);
  background: var(--fond-2);
}
.vf-sommaire {
  position: sticky; top: 104px;
  display: flex; flex-direction: column; gap: 12px;
  padding: 22px;
  border-radius: var(--r-p);
  background: var(--fond-2);
}
.vf-sommaire b { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux); }
.vf-sommaire ol { display: flex; flex-direction: column; gap: 9px; counter-reset: som; }
.vf-sommaire li { counter-increment: som; display: flex; gap: 10px; min-width: 0; }
.vf-sommaire li::before { content: counter(som, decimal-leading-zero); flex: none; color: var(--accent); font-size: 13px; padding-top: 3px; }
.vf-sommaire a:hover { color: var(--accent); }

/* ============================================================
   Mentions : colonne unique et etroite, blocs numerotes.
   ============================================================ */
.vf-legal__maj { margin-top: 10px; font-size: 13px; color: var(--texte-doux); }
.vf-legal__colonne { width: min(772px, 100%); margin-top: 40px; display: flex; flex-direction: column; gap: 32px; }
.vf-legal__bloc { display: flex; flex-direction: column; gap: 12px; }
.vf-legal__bloc h2 { display: flex; align-items: baseline; gap: 12px; }
.vf-legal__bloc h2 span { flex: none; font-size: 13px; letter-spacing: .12em; color: var(--accent); }

/* ============================================================
   Facettes : ruban de filtres en pilules.
   ============================================================ */
.vf-facettes { padding-block: 26px; border-bottom: 1px solid var(--bordure); }
.vf-facettes__etiq { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-doux); }
.vf-facettes__tit { margin-top: 8px; }
.vf-facettes__file { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.vf-facette {
  display: inline-block;
  padding: 9px 18px;
  border-radius: var(--r-pil);
  border: 1px solid var(--bordure);
  font-size: 15px;
  color: var(--texte-doux);
}
.vf-facette--actif { border-color: var(--marque); background: var(--marque); color: var(--sur-marque); }
a.vf-facette:hover { border-color: var(--accent); color: var(--accent); }

/* ============================================================
   Produits : vue en tete, montant en surtitre, reperes en pied.
   ============================================================ */
.vf-produits__file { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.vf-produit {
  min-width: 0;
  display: flex; flex-direction: column; gap: 12px;
  padding-bottom: 24px;
  border-radius: var(--r-p);
  background: var(--fond);
  box-shadow: var(--anneau), var(--lev-1);
  overflow: hidden;
}
.vf-produit__vue { height: 210px; border-radius: 8px 8px 0 0; }
.vf-produit > *:not(.vf-produit__vue) { padding-inline: 22px; }
.vf-produit__prix { font-size: 26px; line-height: 1.1; color: var(--marque); }
.vf-produit__prix span { margin-left: 6px; font-size: 15px; color: var(--texte-doux); }
.vf-produit .vf-appel--nu { margin-top: auto; }

/* ============================================================
   Fiche produit : vue a gauche, propos a droite.
   ============================================================ */
.vf-fiche__duo { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 64px); align-items: flex-start; }
.vf-fiche__vue { flex: 1 1 340px; min-width: 0; height: clamp(280px, 34vw, 480px); }
.vf-fiche__mot { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.vf-fiche__prix { font-size: clamp(28px, 2.6vw, 40px); line-height: 1.1; color: var(--marque); }
.vf-fiche__prix span { margin-left: 8px; font-size: 15px; color: var(--texte-doux); }

/* ============================================================
   Caracteristiques : deux colonnes separees par des filets.
   ============================================================ */
.vf-specs__table { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin: 32px 0 0; }
.vf-spec {
  min-width: 0;
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between;
  padding-block: 16px;
  border-bottom: 1px solid var(--bordure);
}
.vf-spec dt { color: var(--texte-doux); min-width: 0; }
.vf-spec dd { margin: 0; min-width: 0; text-align: right; }

/* ============================================================
   Pied : fond sombre, pastilles de reseau EN HAUT a droite,
   credit CENTRE en bas.
   ============================================================ */
.vf-pied { padding-block: clamp(48px, 5vw, 80px) 32px; background: var(--marque); color: var(--sur-marque); }
.vf-pied__haut { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.vf-pied__marque { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.vf-pied__marque b { font-size: 22px; }
.vf-pied__marque .vf-prose { color: color-mix(in srgb, var(--sur-marque) 76%, transparent); max-width: 42ch; }
.vf-pied__nap { display: flex; flex-direction: column; gap: 5px; font-size: 15px; color: color-mix(in srgb, var(--sur-marque) 82%, transparent); }
.vf-pied__naptit { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.vf-pied__colonnes { flex: 2 1 380px; min-width: 0; display: flex; flex-wrap: wrap; gap: 32px; }
.vf-pied__colonne { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.vf-pied__colonne b { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--sur-marque) 66%, transparent); }
.vf-pied__colonne ul { display: flex; flex-direction: column; gap: 9px; font-size: 15px; }
.vf-pied__colonne a:hover { color: var(--accent); }
.vf-pied__pastilles { flex: none; display: flex; gap: 10px; }
.vf-pied__pastilles a, .vf-pied__pastilles span {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: var(--r-pil);
  background: color-mix(in srgb, var(--sur-marque) 12%, transparent);
}
.vf-pied__pastilles a:hover { background: var(--accent); }
.vf-pied__pastilles span:last-child, .vf-pied__pastilles a span {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.vf-pied__pastilles li { position: relative; display: flex; }
.vf-pied__credit {
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid color-mix(in srgb, var(--sur-marque) 20%, transparent);
  text-align: center;
  font-size: 13px;
  color: color-mix(in srgb, var(--sur-marque) 68%, transparent);
}

/* ============================================================
   Etroit : sous 1024, la navigation passe au poussoir et les
   volets se replient A PLAT, vitrine masquee.
   ============================================================ */
@media (max-width: 1023px) {
  .vf-barre { background: var(--fond); box-shadow: var(--lev-1); }
  .vf-barre__cadre { flex-wrap: wrap; row-gap: 0; }
  .vf-poussoir {
    order: 3;
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px;
    margin-left: auto;
    padding: 0 9px;
    border: 1px solid var(--bordure);
    border-radius: var(--r-p);
    background: var(--fond);
    cursor: pointer;
  }
  .vf-poussoir span { display: block; height: 2px; background: var(--texte); }
  .vf-nav {
    order: 5;
    flex: 1 0 100%;
    display: none;
    flex-direction: column; align-items: stretch; gap: 0;
    padding-bottom: 14px;
  }
  .vf-barre--deploye .vf-nav { display: flex; }
  .vf-nav__entree { border-top: 1px solid var(--bordure); padding-block: 12px; }
  .vf-volet__panneau {
    position: static;
    transform: none;
    width: auto;
    padding-top: 10px;
    opacity: 1; visibility: visible;
    display: block;
  }
  .vf-volet__panneau::before { display: none; }
  .vf-volet__colonnes { flex-direction: column; gap: 16px; }
  .vf-volet__panneau > .vf-volet__colonnes { padding: 0; }
  .vf-volet__vitrine { display: none; }
  .vf-chev { display: none; }
  .vf-barre__droite { order: 4; }
  .vf-cont > .vf-hero:first-child, main > .vf-hero:first-child { margin-top: 0; padding-top: 0; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .vf-barre__droite .vf-tel span { display: none; }
  .vf-bloc--inverse { flex-direction: row; }
  .vf-avis__piste, .vf-chantiers__piste { padding-inline: var(--marge); }
  .vf-hero__semis { display: none; }
  .vf-spec dd { text-align: left; }
  .vf-sommaire { position: static; }
}


/* ============================================================
   NORME COQUILLE — R3 : le nombre de pistes est declare a chaque
   palier. Jamais `flex: 1 1 base`, jamais `auto-fit` : une piste
   comptee ne peut pas rendre deux largeurs differentes.
   ============================================================ */
@media (max-width: 1200px) {
  .vf-services__file, .vf-secteurs__file, .vf-zones__file, .vf-methode__file,
  .vf-chiffres__file, .vf-certifs__file, .vf-aides__file, .vf-materiaux__file,
  .vf-tarifs__file, .vf-maillage__file, .vf-journal__file
  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vf-carte--maitresse { grid-column: span 2; }
}

@media (max-width: 720px) {
  .vf-services__file, .vf-secteurs__file, .vf-zones__file, .vf-methode__file,
  .vf-chiffres__file, .vf-certifs__file, .vf-aides__file, .vf-materiaux__file,
  .vf-tarifs__file, .vf-maillage__file, .vf-journal__file, .vf-produits__file,
  .vf-specs__table, .vf-form__file, .vf-bascule__file
  { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .vf-carte--maitresse { grid-column: span 1; }
}

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

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