/* ============================================================
   VENTRO — feuille unique. SOURCE : ce fichier. dist/ est une
   sortie, jamais editee a la main.
   Huit jetons de couleur, aucun autre ; aucune couleur en dur
   hors les noirs d ombre et le noir de masque, qui ne sont pas
   des couleurs de marque.
   ============================================================ */

*, *::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.62;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
h1, h2, h3 { margin: 0; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
p { margin: 0; }

/* -- Reglages de la coquille --------------------------------- */
:root {
  --cadre: 1200px;
  --marge: 24px;
  --hd-h: 76px;       /* hauteur de la tete — le retrait de l affiche s y accroche */
  --r-p: 8px;         /* rayon des cartes ordinaires */
  --r-g: 16px;        /* rayon des grandes cartes flottantes */
  --r-pil: 999px;     /* pilule */
  --pente: 126deg;    /* l inclinaison du degrade de marque */
  --nappe: linear-gradient(var(--pente), var(--accent) 0%, var(--marque) 100%);
  --lev-1: 0 12px 36px rgba(0, 0, 0, .05);
  --lev-2: 16px 28px 52px rgba(0, 0, 0, .05);
  --lev-3: 0 12px 28px rgba(0, 0, 0, .11);
  --anneau: inset 0 0 0 1px var(--bordure);
}

.vt-cadre {
  width: 100%;
  max-width: var(--cadre);
  margin: 0 auto;
  padding: 0 var(--marge);
}

/* Alternance stricte : blanc, puis bleu tres pale. Aucune section
   sombre hors le pied et les deux surfaces de marque. */
.vt-sec { padding: 96px 0; background: var(--fond); }
.vt-sec--pale { background: var(--fond-2); }
.vt-sec--serre { padding: 48px 0; }

/* -- Textes --------------------------------------------------- */
.vt-h1 {
  font-size: clamp(34px, 5.4vw, 62px);
  max-width: 18ch;
  margin: 0 0 20px;
}
.vt-h1--art { max-width: 22ch; }
.vt-h2 { font-size: clamp(26px, 3.2vw, 40px); }
.vt-h2--art { font-size: clamp(22px, 2.4vw, 28px); margin: 32px 0 12px; }
.vt-h2 em, .vt-h1 em {
  font-style: normal;
  background: var(--nappe);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.vt-h3 { font-size: 19px; line-height: 1.28; margin: 0 0 8px; }
.vt-txt { color: var(--texte-doux); font-size: 16px; }
.vt-meta { display: block; font-size: 13px; color: var(--texte-doux); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px; }
.vt-mention { margin-top: 20px; font-size: 13px; color: var(--texte-doux); }
.vt-coulee { display: grid; gap: 16px; }

/* Etiquette : la pilule de la coquille, avec un point de marque
   colle en tete. */
.vt-sur {
  position: relative;
  display: inline-block;
  margin: 0 0 14px;
  padding: 6px 16px 6px 30px;
  border-radius: var(--r-pil);
  background: color-mix(in srgb, var(--marque) 8%, transparent);
  color: var(--marque);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.vt-sur::before {
  position: absolute;
  left: 14px; top: 50%;
  width: 7px; height: 7px;
  margin-top: -3.5px;
  border-radius: var(--r-pil);
  background: var(--nappe);
  content: '';
  pointer-events: none;
}

/* -- Boutons -------------------------------------------------- */
.vt-act {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--r-p);
  background: var(--nappe);
  color: var(--sur-marque);
  font-size: 15px;
  font-weight: 600;
  box-shadow: var(--lev-3);
}
.vt-act--nu {
  background: transparent;
  color: var(--texte);
  box-shadow: var(--anneau);
}
.vt-act--bloc { width: 100%; justify-content: center; border: 0; cursor: pointer; font-family: inherit; }
.vt-act__pt {
  width: 9px; height: 9px;
  border-radius: var(--r-pil);
  background: currentColor;
}
.vt-fl {
  width: 14px; height: 14px;
  background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 11h11.2l-4.6-4.6L13 5l7 7-7 7-1.4-1.4 4.6-4.6H5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 11h11.2l-4.6-4.6L13 5l7 7-7 7-1.4-1.4 4.6-4.6H5z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  flex: 0 0 auto;
}
.vt-lien {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px;
  color: var(--marque); font-weight: 600; font-size: 14px;
}

/* Icone : un carre de couleur decoupe par un masque, jamais une
   image de couleur figee. */
.vt-ic {
  display: block;
  width: 40px; height: 40px;
  margin-bottom: 14px;
  border-radius: var(--r-p);
  background: var(--nappe);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect x='2' y='2' width='36' height='36' rx='11' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect x='2' y='2' width='36' height='36' rx='11' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.vt-ic--gros { width: 52px; height: 52px; }

/* -- Points --------------------------------------------------- */
.vt-points { display: grid; gap: 8px; margin-top: 12px; }
.vt-points li {
  position: relative;
  padding-left: 26px;
  color: var(--texte-doux);
  font-size: 15px;
}
.vt-points li::before {
  position: absolute;
  left: 0; top: 7px;
  width: 14px; height: 14px;
  background: var(--marque);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.6 16.2 5.4 12l-1.4 1.4 5.6 5.6L20.4 8.2 19 6.8z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.6 16.2 5.4 12l-1.4 1.4 5.6 5.6L20.4 8.2 19 6.8z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  content: '';
  pointer-events: none;
}
.vt-points li b { color: var(--texte); font-weight: 600; }
.vt-points--clair li, .vt-points--clair li b { color: var(--sur-marque); }
.vt-points--clair li::before { background: var(--sur-marque); }

.vt-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.vt-tags li {
  padding: 5px 12px;
  border-radius: var(--r-pil);
  box-shadow: var(--anneau);
  font-size: 12px;
  color: var(--texte-doux);
}

/* -- Vues ----------------------------------------------------- */
.vt-vue {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-g);
  background: var(--fond-2);
  box-shadow: var(--anneau);
  min-height: 80px;
}
.vt-vue img { width: 100%; height: 100%; object-fit: cover; }
.vt-vue > span {
  display: flex;
  align-items: flex-end;
  min-height: 180px;
  padding: 16px;
  color: var(--texte-doux);
  font-size: 12px;
  letter-spacing: .04em;
  /* fondu montant : le libelle reste lisible quel que soit le fond */
  background-image: linear-gradient(rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, .10) 100%);
}

/* -- Enveloppes souples --------------------------------------
   Le compte de colonnes vient des donnees : enveloppe souple,
   base en pixels, et min-width:0 pour que rien ne deborde. */
/* NORME COQUILLE, R3 — UNE SEULE LARGEUR PAR GRILLE, ET LES COLONNES SE
   COMPTENT. La rangee flexible a repli (`flex: 1 1 base` + `wrap`) donne des
   cartes egales tant que la derniere rangee est pleine, et deux largeurs des
   qu elle ne l est plus : zonesAutour rendait 270 puis 564. Ce n est pas la
   donnee qui est en tort, c est le gabarit — il ne declarait aucune colonne,
   il laissait le reste s etirer. On compte donc les pistes, palier par palier,
   et `minmax(0, 1fr)` interdit a une piste de grossir sous son contenu. */
.vt-lot { display: grid; gap: 24px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vt-lot > * { min-width: 0; }
.vt-lot--220 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.vt-lot--240 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vt-lot--280 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vt-lot--300 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vt-lot--320 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vt-lot--340 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vt-lot--420 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vt-lot--440 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* -- Tete de section : centree, propos sous le titre ---------- */
.vt-tete { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.vt-tete .vt-h2 { margin-bottom: 14px; }
.vt-tete .vt-act { margin-top: 22px; }

/* ============================================================
   Entete
   ============================================================ */
/* La tete est POSEE SUR la scene tant que la page n a pas bouge — c est ce que
   fait le modele : le decor de l affiche passe DERRIERE la tete. Des que la
   page defile (`vt-hd--pose`, pose par app.js a 24px), elle reprend son fond
   plein et sa ligne : plus rien ne passe dessous en transparence.
   NORME COQUILLE, R10 — le retrait est tenu par le gabarit : l affiche se
   deporte vers le haut de la hauteur de tete et rend cette hauteur en padding,
   de sorte qu aucun mot ne passe sous la tete. */
.vt-hd {
  position: sticky; top: 0; z-index: 40;
  background: transparent;
  box-shadow: none;
}
.vt-hd--pose {
  background: var(--fond);
  box-shadow: inset 0 -1px 0 var(--bordure), var(--lev-1);
}
.vt-hd__rang { display: flex; align-items: center; gap: 20px; min-height: 76px; }
.vt-hd__logo {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 700; font-size: 19px; letter-spacing: -.02em;
  flex: 0 0 auto;
}
.vt-hd__sceau {
  position: relative;
  width: 28px; height: 28px;
  border-radius: 12px 12px 12px 4px;
  background: var(--nappe);
  flex: 0 0 auto;
}
.vt-hd__sceau::after {
  position: absolute;
  inset: 8px 8px auto auto;
  width: 8px; height: 8px;
  border-radius: var(--r-pil);
  background: var(--fond);
  content: '';
  pointer-events: none;
}
.vt-hd__nav { display: flex; align-items: center; gap: 4px; margin-left: auto; min-width: 0; }
.vt-hd__mot {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 12px;
  border-radius: var(--r-p);
  font-size: 15px; font-weight: 500;
  cursor: pointer;
}
.vt-chev {
  width: 9px; height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  flex: 0 0 auto;
}
.vt-hd__flanc { display: flex; align-items: center; gap: 14px; margin-left: 8px; flex: 0 0 auto; }
/* NORME COQUILLE, regle 7 — la porte d appel de l entete est DESSINEE COMME
   UN BOUTON : un numero pose en simple mot est une mention, pas une porte. */
.vt-hd__tel {
  display: inline-flex; align-items: center;
  padding: 9px 16px;
  border: 1px solid var(--bordure);
  border-radius: var(--r-p);
  font-weight: 600; font-size: 15px; white-space: nowrap;
}
.vt-hd__poussoir { display: none; }

/* -- Volet ---------------------------------------------------
   Le decalage sous l intitule est un PADDING : la souris reste
   sur le volet pendant la descente, il ne se ferme pas. */
.vt-volet { position: relative; }
.vt-volet__panneau {
  position: absolute;
  left: 50%; top: 100%;
  transform: translateX(calc(-50% + var(--dx, 0px)));
  padding-top: 14px;
  width: min(880px, 92vw);
  opacity: 0; visibility: hidden;
  transition: opacity .16s ease;
}
.vt-volet:hover > .vt-volet__panneau,
.vt-volet:focus-within > .vt-volet__panneau { opacity: 1; visibility: visible; }
.vt-volet__rang {
  display: flex; gap: 28px;
  padding: 26px;
  border-radius: var(--r-g);
  background: var(--fond);
  box-shadow: var(--anneau), var(--lev-2);
}
.vt-volet__col { display: flex; flex-direction: column; gap: 10px; flex: 1 1 180px; min-width: 0; }
.vt-volet__titre { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-doux); }
.vt-volet__col a, .vt-volet__col span:not(.vt-volet__titre) { font-size: 15px; font-weight: 500; }
.vt-volet__col a:hover { color: var(--marque); }
.vt-volet__vit {
  flex: 0 0 236px; min-width: 0;
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px;
  border-radius: var(--r-p);
  background: var(--fond-2);
}
.vt-volet__vue { height: 128px; border-radius: var(--r-p); }
.vt-volet__sur { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--marque); }
.vt-volet__nom { font-size: 15px; }
.vt-volet__txt { font-size: 13px; color: var(--texte-doux); }
.vt-volet__act { font-size: 13px; font-weight: 600; color: var(--marque); }

/* ============================================================
   Tete de page : le visuel est INSERE dans la ligne du titre.
   ============================================================ */
/* L affiche remonte SOUS la tete — mais seulement quand elle ouvre vraiment la
   page. Sur les pages internes, le fil d Ariane la precede : la remonter la
   ferait chevaucher le fil, et le decor passerait sous la tete transparente
   sans etre le decor pleine fenetre que R10 admet. Le retrait est donc rendu
   en padding, jamais rattrape en z-index. */
.vt-hero { position: relative; padding: 72px 0 0; overflow: hidden; }
main > .vt-hero:first-child {
  margin-top: calc(-1 * var(--hd-h));
  padding-top: calc(72px + var(--hd-h));
}
.vt-hero::before {
  position: absolute;
  right: -180px; top: -220px;
  width: 620px; height: 620px;
  border-radius: var(--r-pil);
  background: conic-gradient(from 140deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--marque) 16%, transparent), transparent 62%);
  content: '';
  pointer-events: none;
}
/* NORME COQUILLE, F1 — l affiche du modele est une SCENE PLEINE FENETRE.
   Le correctif est additif : un cadre de fond derriere la rangee, jamais le
   detournement du cadre de la bande basse. Le voile n est pose que lorsqu une
   photo est versee, pour ne pas assombrir deux fois l aplat de l etat vide. */
.vt-hero__fond {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  margin: 0; border-radius: 0; box-shadow: none;
}
.vt-hero__fond img { width: 100%; height: 100%; object-fit: cover; }
.vt-hero:has([data-slot="vt-hero__fond"] img)::after {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--fond) 88%, transparent), color-mix(in srgb, var(--fond) 66%, transparent));
  content: '';
  pointer-events: none;
}
.vt-hero > .vt-cadre { position: relative; z-index: 1; }

.vt-hero .vt-h1 { max-width: 20ch; }
.vt-h1__pil {
  display: inline-block;
  vertical-align: middle;
  width: clamp(72px, 11vw, 132px);
  height: clamp(38px, 5.4vw, 62px);
  margin: 0 6px;
  border-radius: var(--r-pil);
  overflow: hidden;
  background: var(--nappe);
  box-shadow: var(--lev-1);
}
.vt-h1__pil img { width: 100%; height: 100%; object-fit: cover; }
.vt-hero__txt { max-width: 56ch; font-size: 17px; }
.vt-hero__actes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.vt-hero__bas { position: relative; z-index: 1; margin-top: 56px; padding-bottom: 76px; }
.vt-hero__vue { border-radius: 0; height: clamp(280px, 42vw, 520px); box-shadow: none; }
.vt-hero__flot {
  position: relative;
  margin-top: -76px;
  display: flex; flex-wrap: wrap; gap: 20px;
}
.vt-flot {
  flex: 1 1 220px; min-width: 0;
  padding: 22px;
  border-radius: var(--r-g);
  background: var(--fond);
  box-shadow: var(--anneau), var(--lev-2);
}
.vt-flot b { display: block; font-size: 17px; margin-bottom: 4px; }
.vt-flot span { color: var(--texte-doux); font-size: 14px; }

/* ============================================================
   Services
   ============================================================ */
.vt-srv {
  display: block;
  padding: 24px;
  border-radius: var(--r-g);
  background: var(--fond);
  box-shadow: var(--anneau), var(--lev-1);
}
.vt-srv__vue { height: 168px; border-radius: var(--r-p); margin-bottom: 18px; box-shadow: none; }

/* -- Propos --------------------------------------------------- */
.vt-intro { max-width: 820px; }
.vt-intro .vt-h2 { margin-bottom: 18px; }
.vt-intro .vt-act { margin-top: 22px; }

/* -- Blocs texte + image -------------------------------------- */
.vt-blocs .vt-bloc + .vt-bloc { margin-top: 88px; }
.vt-bloc { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.vt-bloc__mot { flex: 1 1 340px; min-width: 0; }
.vt-bloc__mot .vt-txt + .vt-txt { margin-top: 14px; }
.vt-bloc__mot .vt-h2 { margin-bottom: 16px; }
.vt-bloc__mot .vt-act { margin-top: 22px; }
.vt-bloc__vue { flex: 1 1 340px; min-width: 0; height: clamp(240px, 30vw, 400px); box-shadow: var(--lev-2); }
.vt-bloc--inv { flex-direction: row-reverse; }

/* -- Lamelles inegales ---------------------------------------- */
.vt-lam { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 40px; align-items: stretch; }
.vt-lam__mot { flex: 1.6 1 320px; min-width: 0; }
.vt-lam__mot .vt-txt + .vt-txt { margin-top: 14px; }
.vt-lam__mot .vt-act { margin-top: 22px; }
.vt-lam__pan {
  flex: 1 1 200px; min-width: 0;
  padding: 22px;
  border-radius: var(--r-g);
  background: var(--fond-2);
}
.vt-lam__pan b { display: block; margin-bottom: 6px; font-size: 16px; }
.vt-lam__pan span { color: var(--texte-doux); font-size: 14px; }
.vt-lam__vue { flex: 2 1 300px; min-width: 0; }

/* -- Marques : file debordante -------------------------------- */
.vt-marq__mot { text-align: center; color: var(--texte-doux); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 22px; }
.vt-marq__piste { overflow: hidden; width: 100%; }
.vt-marq__file { display: flex; gap: 56px; width: max-content; animation: vt-file 34s linear infinite; }
.vt-marq__nom {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 700; font-size: 20px;
  color: var(--texte-doux);
  white-space: nowrap;
  opacity: .62;
}
@keyframes vt-file { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .vt-marq__file { animation: none; } }

/* -- Bloc fendu ----------------------------------------------- */
.vt-fendu { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.vt-fendu__vue { flex: 1 1 320px; min-width: 0; height: clamp(260px, 32vw, 440px); box-shadow: var(--lev-2); }
.vt-fendu__mot { flex: 1 1 320px; min-width: 0; }
.vt-fendu__mot .vt-h2 { margin-bottom: 14px; }
.vt-fendu__mot .vt-act { margin-top: 22px; }
.vt-fendu--inv { flex-direction: row-reverse; }
.vt-rais { display: flex; gap: 16px; margin-top: 24px; }
.vt-rais .vt-ic { margin-bottom: 0; flex: 0 0 auto; }
.vt-rais b { font-size: 16px; }

/* -- Secteurs -------------------------------------------------- */
.vt-b2b {
  position: relative;
  padding: 20px;
  border-radius: var(--r-g);
  background: var(--fond-2);
}
.vt-b2b__vue { height: 190px; margin-bottom: 18px; border-radius: var(--r-p); }
.vt-b2b__marq {
  position: relative;
  display: inline-block;
  margin-bottom: 10px;
  padding-left: 16px;
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--marque);
}
.vt-b2b__marq::before {
  position: absolute;
  left: 0; top: 50%;
  width: 9px; height: 2px;
  background: var(--marque);
  content: '';
  pointer-events: none;
}

/* -- Zones ----------------------------------------------------- */
.vt-zone {
  display: block;
  padding: 14px;
  border-radius: var(--r-g);
  background: var(--fond);
  box-shadow: var(--anneau), var(--lev-1);
}
.vt-zone__vue { height: 148px; border-radius: var(--r-p); margin-bottom: 14px; box-shadow: none; }
.vt-zone__tag { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--marque); margin-bottom: 4px; }

/* -- Marche a suivre inversee --------------------------------- */
.vt-proc { display: flex; flex-wrap: wrap-reverse; gap: 56px; align-items: flex-start; }
.vt-proc__file { flex: 1 1 320px; min-width: 0; display: grid; gap: 28px; }
.vt-proc__mot { flex: 1 1 320px; min-width: 0; }
.vt-proc__mot .vt-h2 { margin-bottom: 14px; }
.vt-proc__vue { margin-top: 24px; height: clamp(220px, 26vw, 340px); box-shadow: var(--lev-2); }
.vt-proc__mot .vt-act { margin-top: 22px; }
.vt-etape { position: relative; padding-left: 60px; }
.vt-etape__n {
  position: absolute;
  left: 0; top: 0;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px 14px 14px 4px;
  background: var(--nappe);
  color: var(--sur-marque);
  font-weight: 700; font-size: 14px;
}
.vt-etape__n::after {
  position: absolute;
  left: 21px; top: 52px;
  width: 1px; height: calc(100% + 10px);
  background: var(--bordure);
  content: '';
  pointer-events: none;
}
.vt-etape:last-child .vt-etape__n::after { display: none; }
.vt-etape b { display: block; font-size: 17px; margin-bottom: 6px; }

/* -- Chiffres : surface de marque, cartes flottantes ---------- */
.vt-chif { background: var(--nappe); color: var(--sur-marque); }
.vt-chif .vt-h2, .vt-chif .vt-txt { color: var(--sur-marque); }
.vt-chif .vt-sur { background: color-mix(in srgb, var(--sur-marque) 16%, transparent); color: var(--sur-marque); }
.vt-chif .vt-sur::before { background: var(--sur-marque); }
.vt-tete--sur { color: var(--sur-marque); }
.vt-chif__c {
  padding: 26px 22px;
  border-radius: var(--r-g);
  background: var(--fond);
  box-shadow: var(--lev-3);
  text-align: center;
}
.vt-chif__c b {
  display: block;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1;
  color: var(--marque);
}
.vt-chif__c span { display: block; margin-top: 8px; font-size: 14px; color: var(--texte-doux); }
.vt-chif__vue { margin-top: 40px; height: clamp(200px, 24vw, 320px); box-shadow: var(--lev-3); }

/* -- Adresse --------------------------------------------------- */
.vt-adr { display: grid; gap: 4px; margin: 18px 0; font-style: normal; color: var(--texte-doux); }

/* -- Avis ------------------------------------------------------ */
.vt-avis {
  padding: 24px;
  border-radius: var(--r-g);
  background: var(--fond);
  box-shadow: var(--anneau), var(--lev-1);
  display: flex; flex-direction: column;
}
.vt-avis > b { margin-bottom: 8px; font-size: 16px; }
.vt-avis .vt-txt { flex: 1 1 auto; }
.vt-avis__note {
  position: relative;
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 4px 12px 4px 26px;
  border-radius: var(--r-pil);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--marque);
  font-size: 13px; font-weight: 600;
}
.vt-avis__note::before {
  position: absolute;
  left: 10px; top: 50%;
  width: 10px; height: 10px;
  margin-top: -5px;
  background: var(--marque);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m12 2 3 6.6 7 .8-5.2 4.8 1.4 7L12 17.8 5.8 21.2l1.4-7L2 9.4l7-.8z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m12 2 3 6.6 7 .8-5.2 4.8 1.4 7L12 17.8 5.8 21.2l1.4-7L2 9.4l7-.8z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  content: '';
  pointer-events: none;
}
.vt-avis__pied { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.vt-avis__ini {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-pil);
  background: var(--nappe);
  color: var(--sur-marque);
  font-weight: 700;
  flex: 0 0 auto;
}
.vt-avis__pied b { display: block; font-size: 15px; }
.vt-avis__pied i { font-style: normal; font-size: 13px; color: var(--texte-doux); }

/* -- Questions ------------------------------------------------- */
.vt-faq { max-width: 860px; }
.vt-faq__file { display: grid; gap: 12px; }
.vt-q {
  padding: 18px 22px;
  border-radius: var(--r-g);
  background: var(--fond);
  box-shadow: var(--anneau);
}
.vt-q summary { cursor: pointer; font-weight: 600; font-size: 16px; list-style: none; }
.vt-q summary::-webkit-details-marker { display: none; }
.vt-q[open] summary { color: var(--marque); }
.vt-q .vt-txt { margin-top: 10px; }

/* -- Cartes horizontales -------------------------------------- */
.vt-hcarte {
  display: flex; align-items: center; gap: 18px;
  padding: 16px;
  border-radius: var(--r-g);
  background: var(--fond);
  box-shadow: var(--anneau), var(--lev-1);
}
.vt-hcarte--haut { align-items: stretch; }
.vt-hcarte__vue { flex: 0 0 132px; min-width: 0; height: 116px; border-radius: var(--r-p); box-shadow: none; }
.vt-hcarte__mot { min-width: 0; }

/* -- Piste debordante ----------------------------------------- */
.vt-piste { overflow-x: auto; padding: 4px 0 12px; scrollbar-width: thin; }
.vt-piste__file { display: flex; gap: 24px; padding: 0 max(var(--marge), calc((100vw - var(--cadre)) / 2 + var(--marge))); width: max-content; }
.vt-real { flex: 0 0 300px; min-width: 0; }
.vt-real__vue { height: 220px; margin-bottom: 16px; }

/* -- Certifications ------------------------------------------- */
.vt-cert { text-align: left; }
.vt-cert b { display: block; margin-bottom: 6px; font-size: 16px; }
.vt-cert span { color: var(--texte-doux); font-size: 14px; }

/* -- Aides ------------------------------------------------------ */
.vt-aide {
  padding: 24px;
  border-radius: var(--r-g);
  background: var(--fond);
  box-shadow: var(--anneau), var(--lev-1);
}
.vt-aide b { display: block; margin-bottom: 8px; font-size: 17px; }

/* -- Materiaux -------------------------------------------------- */
.vt-mat__vue { height: 190px; margin-bottom: 14px; }
.vt-mat b { display: block; margin-bottom: 6px; font-size: 16px; }

/* -- Tarifs ------------------------------------------------------ */
.vt-tarif {
  display: flex; flex-direction: column;
  padding: 26px;
  border-radius: var(--r-g);
  background: var(--fond);
  box-shadow: var(--anneau), var(--lev-2);
}
.vt-tarif__prix {
  display: block;
  margin: 6px 0 12px;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 30px; font-weight: 700;
  color: var(--marque);
}
.vt-tarif__prix i { font-style: normal; font-size: 14px; color: var(--texte-doux); margin-left: 6px; }
.vt-tarif .vt-act { margin-top: 20px; justify-content: center; }

/* -- Urgence ---------------------------------------------------- */
.vt-urg { background: var(--nappe); color: var(--sur-marque); }
.vt-urg .vt-h2, .vt-urg .vt-txt { color: var(--sur-marque); }
.vt-urg .vt-sur { background: color-mix(in srgb, var(--sur-marque) 16%, transparent); color: var(--sur-marque); }
.vt-urg .vt-sur::before { background: var(--sur-marque); }
.vt-urg__rang { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.vt-urg__rang > * { flex: 1 1 320px; min-width: 0; }
.vt-urg__flanc { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.vt-urg__tel {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: clamp(26px, 3.4vw, 38px); font-weight: 700;
}
.vt-urg .vt-act { background: var(--fond); color: var(--marque); }

/* -- Formulaire -------------------------------------------------- */
.vt-form { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 24px; }
.vt-champ { display: flex; flex-direction: column; gap: 8px; flex: 1 1 220px; min-width: 0; }
.vt-champ--large { flex-basis: 100%; }
.vt-champ__mot { font-size: 13px; font-weight: 600; }
.vt-champ input, .vt-champ select, .vt-champ textarea {
  width: 100%;
  padding: 13px 14px;
  border: 0;
  border-radius: var(--r-p);
  box-shadow: var(--anneau);
  background: var(--fond);
  color: var(--texte);
  font-family: inherit;
  font-size: 15px;
}
.vt-champ textarea { resize: vertical; }
.vt-form .vt-act--bloc { flex: 1 1 100%; }
.vt-form--rang { max-width: 640px; margin-inline: auto; }

/* NORME COQUILLE, regle 7 — LA PORTE D APPEL SE TIENT A COTE DU DEVIS.
   Un formulaire de deux champs est un point de conversion : le visiteur qui ne
   veut pas ecrire doit avoir quelque chose a toucher. La porte est donc posee
   par le gabarit dans le meme conteneur que le bouton de soumission, jamais
   par la fiche. Elle est CREUSE — le devis garde le plein, l appel prend le
   trait — et son trait est en `currentColor`, ce qui la tient lisible aussi
   bien sur le blanc des sections que sur le degrade de la bande d appel.
   Ce bloc vient APRES `.vt-form .vt-act--bloc` : a specificite egale, c est la
   position qui tranche. */
.vt-form__actes { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; flex: 1 1 100%; }
.vt-form__actes .vt-act--bloc { flex: 1 1 220px; width: auto; }
.vt-act--creux {
  flex: 0 0 auto;
  justify-content: center;
  background: transparent;
  color: currentColor;
  border: 1px solid currentColor;
  box-shadow: none;
}

/* -- Bandeau d appel ---------------------------------------------- */
.vt-cta {
  position: relative;
  overflow: hidden;
  background: var(--nappe);
  color: var(--sur-marque);
  padding-top: 128px;
}
.vt-cta__vague { position: absolute; left: 0; top: -1px; width: 100%; height: 120px; transform: scaleY(-1); pointer-events: none; }
.vt-cta__vague path { fill: var(--fond); }
.vt-cta__mot { position: relative; max-width: 700px; text-align: center; }
.vt-cta .vt-h2, .vt-cta .vt-txt { color: var(--sur-marque); }
.vt-cta .vt-mention { color: var(--sur-marque); opacity: .8; }
.vt-cta .vt-sur { background: color-mix(in srgb, var(--sur-marque) 16%, transparent); color: var(--sur-marque); }
.vt-cta .vt-sur::before { background: var(--sur-marque); }
.vt-cta .vt-champ__mot { color: var(--sur-marque); }
.vt-cta .vt-act--bloc { background: var(--fond); color: var(--marque); }
.vt-cta .vt-champ input, .vt-cta .vt-champ select, .vt-cta .vt-champ textarea { background: var(--fond); color: var(--texte); }

/* -- Fil d Ariane -------------------------------------------------- */
.vt-fil { padding: 18px 0; background: var(--fond); box-shadow: inset 0 -1px 0 var(--bordure); }
.vt-fil ol { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--texte-doux); }
.vt-fil li + li::before { content: '/'; margin-right: 8px; color: var(--bordure); }
.vt-fil a:hover { color: var(--marque); }

/* -- Avant / apres ------------------------------------------------- */
.vt-ab__scene {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-g);
  box-shadow: var(--lev-2);
  margin-bottom: 18px;
}
.vt-ab__fond { height: clamp(220px, 26vw, 320px); border-radius: 0; box-shadow: none; }
.vt-ab__volet {
  position: absolute;
  inset: 0;
  width: var(--pos, 50%);
  overflow: hidden;
  pointer-events: none;
}
.vt-ab__dessus { height: 100%; width: max(100%, 1px); border-radius: 0; box-shadow: none; }
.vt-ab__volet .vt-vue img { width: 100%; height: 100%; object-fit: cover; }
.vt-ab__trait {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos, 50%);
  width: 3px;
  margin-left: -1.5px;
  background: var(--fond);
  pointer-events: none;
}
.vt-ab__et {
  position: absolute;
  bottom: 12px;
  padding: 5px 12px;
  border-radius: var(--r-pil);
  background: var(--fond);
  font-size: 12px; font-weight: 600;
}
.vt-ab__et--g { left: 12px; }
.vt-ab__et--d { right: 12px; }
.vt-ab__range {
  position: absolute;
  left: 0; bottom: 50%;
  width: 100%;
  margin: 0;
  height: 30px;
  -webkit-appearance: none; appearance: none;
  background: transparent;
  cursor: ew-resize;
}
.vt-ab__range::-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;
}
.vt-ab__range::-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;
}
.vt-ab__range:focus-visible { outline: 3px solid var(--fond); outline-offset: 2px; }

/* -- Article ------------------------------------------------------- */
.vt-art__tete { max-width: 760px; margin-bottom: 28px; }
.vt-art__vue { height: clamp(220px, 28vw, 380px); margin-bottom: 40px; box-shadow: var(--lev-2); }
.vt-art { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.vt-somm {
  flex: 1 1 240px; min-width: 0;
  position: sticky; top: 100px;
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px;
  border-radius: var(--r-g);
  background: var(--fond-2);
}
.vt-somm b { font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.vt-somm a, .vt-somm span { font-size: 14px; color: var(--texte-doux); }
.vt-somm a:hover { color: var(--marque); }
.vt-art__corps { flex: 3 1 420px; min-width: 0; }
.vt-art__corps .vt-txt + .vt-txt { margin-top: 14px; }

/* -- Mentions -------------------------------------------------------- */
.vt-legal { max-width: 820px; }
.vt-legal article + article { margin-top: 12px; }
.vt-legal .vt-txt + .vt-txt { margin-top: 12px; }

/* -- Facettes -------------------------------------------------------- */
.vt-facet__mot { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.vt-facet { display: flex; flex-wrap: wrap; gap: 10px; }
.vt-facet li a, .vt-facet li span {
  display: inline-block;
  padding: 9px 16px;
  border-radius: var(--r-pil);
  box-shadow: var(--anneau);
  font-size: 14px;
}
.vt-facet li span[aria-current] { background: var(--nappe); color: var(--sur-marque); box-shadow: none; }

/* -- Produits ---------------------------------------------------------- */
.vt-prod {
  display: block;
  padding: 14px;
  border-radius: var(--r-g);
  background: var(--fond);
  box-shadow: var(--anneau), var(--lev-1);
}
.vt-prod__vue { position: relative; margin-bottom: 16px; }
.vt-prod__vue .vt-vue { height: 210px; border-radius: var(--r-p); box-shadow: none; }
.vt-prod__prix {
  position: absolute;
  left: 12px; bottom: 12px;
  padding: 6px 14px;
  border-radius: var(--r-pil);
  background: var(--fond);
  box-shadow: var(--lev-1);
  font-weight: 700; font-size: 15px;
  color: var(--marque);
}
.vt-prod__prix i { font-style: normal; font-size: 12px; color: var(--texte-doux); margin-left: 4px; }
.vt-fiche__prix {
  display: block;
  margin: 10px 0 14px;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 34px; font-weight: 700;
  color: var(--marque);
}
.vt-fiche__prix i { font-style: normal; font-size: 14px; color: var(--texte-doux); margin-left: 6px; }
.vt-specs { display: flex; flex-wrap: wrap; gap: 14px; }
.vt-spec {
  flex: 1 1 260px; min-width: 0;
  display: flex; justify-content: space-between; gap: 16px;
  padding: 16px 20px;
  border-radius: var(--r-p);
  background: var(--fond);
  box-shadow: var(--anneau);
}
.vt-spec dt { color: var(--texte-doux); font-size: 14px; }
.vt-spec dd { margin: 0; font-weight: 600; font-size: 14px; text-align: right; }

/* -- Pied a filigrane --------------------------------------------------- */
.vt-ft { position: relative; padding: 80px 0 0; background: var(--fond-2); }
.vt-ft__rang { display: flex; flex-wrap: wrap; gap: 40px; }
.vt-ft__marque { flex: 1.6 1 280px; min-width: 0; }
.vt-ft__marque .vt-txt { margin-top: 14px; max-width: 42ch; }
.vt-ft__col { flex: 1 1 170px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.vt-ft__col b { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.vt-ft__col a, .vt-ft__col span { font-size: 14px; color: var(--texte-doux); }
.vt-ft__col a:hover { color: var(--marque); }
.vt-ft__bas {
  display: flex; flex-wrap: wrap; gap: 18px;
  margin-top: 48px; padding-top: 22px;
  box-shadow: inset 0 1px 0 var(--bordure);
  font-size: 13px; color: var(--texte-doux);
}
.vt-ft__bas a:hover { color: var(--marque); }
.vt-ft__filig { position: relative; margin-top: 32px; overflow: hidden; }
.vt-ft__filig::before {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .06) 100%);
  content: '';
  pointer-events: none;
  z-index: 1;
}
.vt-ft__vue { height: clamp(120px, 17vw, 250px); border-radius: 0; box-shadow: none; }
.vt-ft__nom {
  display: block;
  padding-bottom: 8px;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(46px, 15vw, 200px);
  line-height: .9;
  letter-spacing: -.04em;
  text-align: center;
  color: transparent;
  background: linear-gradient(var(--bordure), color-mix(in srgb, var(--bordure) 20%, transparent));
  -webkit-background-clip: text;
  background-clip: text;
}

/* ============================================================
   T5 — LE PALIER INTERMEDIAIRE. Les pistes et le tiroir du menu ne se
   replient pas pour la meme raison, ils n ont donc aucune raison de se
   replier au meme endroit. Le seul palier desktop etant colle a 1023, la
   grille tournait encore avec son compte de grand ecran a 1024 : trois
   pistes de 309px dans une carte horizontale ne laissaient que 127px au
   titre, soit 1,3 mot par ligne. Chaque grille perd donc UNE piste des
   1200px, avant le repli du menu. Le suffixe de la classe dit la largeur
   que la carte demande : c est lui qui commande le compte a chaque palier,
   jamais un repli automatique.
   ============================================================ */
@media (max-width: 1200px) {
  .vt-lot { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vt-lot--220 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vt-lot--240, .vt-lot--280, .vt-lot--300 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .vt-lot--320, .vt-lot--340, .vt-lot--420, .vt-lot--440 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================================================
   Menu compact — sous 1024, la barre se replie derriere un
   poussoir ; la nav se deroule a plat, volets deplies.
   ============================================================ */
@media (max-width: 1023px) {
  :root { --hd-h: 142px; }   /* la tete tient deux rangees : le rang et le flanc */
  /* R3 — le nombre de colonnes se DECLARE a chaque palier ; sans quoi le
     repli automatique reprend la main et rend a nouveau deux largeurs. */
  .vt-lot, .vt-lot--220, .vt-lot--240, .vt-lot--280, .vt-lot--300,
  .vt-lot--320, .vt-lot--340, .vt-lot--420, .vt-lot--440 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vt-hd__rang { flex-wrap: wrap; }
  .vt-hd__poussoir {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px;
    margin-left: auto;
    padding: 0 10px;
    border: 0;
    border-radius: var(--r-p);
    background: transparent;
    box-shadow: var(--anneau);
    cursor: pointer;
  }
  .vt-hd__poussoir i { display: block; height: 2px; background: var(--texte); }
  .vt-hd__nav {
    display: none;
    flex: 1 1 100%;
    flex-direction: column;
    align-items: stretch;
    margin: 0 0 16px;
    gap: 2px;
  }
  .vt-hd--ouvert .vt-hd__nav { display: flex; }
  /* NORME COQUILLE, regle 7 — la porte d appel ne se replie PAS dans le menu.
     Un visiteur de telephone est celui qui appelle le plus ; ranger le numero
     derriere un poussoir, c est retirer la porte a 390px et la rendre a
     1440px. Le flanc descend donc sur sa propre rangee, toujours visible, et
     la hauteur de tete du palier en tient compte (`--hd-h`). */
  .vt-hd__flanc { flex: 1 1 100%; margin: 6px 0 12px; display: flex; }
  .vt-hd__flanc > * { flex: 1 1 0; justify-content: center; }
  .vt-hd__mot { padding: 12px 0; }
  .vt-chev { display: none; }
  .vt-volet__panneau {
    position: static;
    transform: none;
    width: auto;
    padding-top: 0;
    opacity: 1; visibility: visible;
  }
  .vt-volet__rang { flex-direction: column; gap: 16px; padding: 12px 0; box-shadow: none; background: transparent; }
  .vt-volet__vit { display: none; }
}

@media (max-width: 720px) {
  .vt-lot, .vt-lot--220, .vt-lot--240, .vt-lot--280, .vt-lot--300,
  .vt-lot--320, .vt-lot--340, .vt-lot--420, .vt-lot--440 {
    grid-template-columns: minmax(0, 1fr);
  }
  .vt-sec { padding: 64px 0; }
  .vt-blocs .vt-bloc + .vt-bloc { margin-top: 56px; }
  .vt-bloc, .vt-fendu, .vt-proc, .vt-art { gap: 28px; }
  .vt-hero__flot { margin-top: -40px; }
  .vt-hero__bas { padding-bottom: 40px; }
  .vt-somm { position: static; }
  .vt-hcarte { flex-direction: column; align-items: stretch; }
  .vt-hcarte__vue { flex: 0 0 auto; height: 170px; }
  .vt-piste__file { padding: 0 var(--marge); }
}

/* --- recuperations de socle : champs du contrat qui n avaient pas
   encore de place dans la mise en page native --------------------- */
.vt-hero__meta { margin: 6px 0 0; font-size: 14px; color: var(--texte-doux); }
.vt-etape__vue { margin-top: 14px; border-radius: var(--r-p); overflow: hidden; }
.vt-etape__vue img { display: block; width: 100%; height: 120px; object-fit: cover; }
.vt-cert__mot { max-width: 64ch; margin: -8px auto 28px; text-align: center; }
.vt-faq__encart {
  position: relative; margin-top: 28px; padding: 26px 28px;
  border-radius: var(--r-g); background: var(--fond);
  box-shadow: var(--anneau), var(--lev-2);
}
.vt-faq__encart b { display: block; font-size: 19px; margin-bottom: 8px; }
.vt-cta__vue {
  max-width: var(--cadre); margin: 28px auto 0; border-radius: var(--r-g);
  overflow: hidden; box-shadow: var(--lev-3);
}
.vt-cta__vue img { display: block; width: 100%; height: 280px; object-fit: cover; }
.vt-h3--art { margin: 22px 0 8px; font-size: 20px; }
.vt-art__encadre {
  margin: 22px 0; padding: 20px 22px; border-radius: var(--r-g);
  background: var(--fond-2); box-shadow: var(--anneau);
}
.vt-art__encadre b { display: block; margin-bottom: 6px; }
@media (max-width: 720px) {
  .vt-cta__vue img { height: 190px; }
  .vt-faq__encart { padding: 20px; }
}

/* --- materiaux : rangees a filet, vignette carree et numero ------ */
.vt-mats { list-style: none; margin: 0; padding: 0; }
.vt-mats__l {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
  padding: 18px 4px; border-bottom: 1px solid var(--bordure);
}
.vt-mats__l:first-child { border-top: 1px solid var(--bordure); }
.vt-mats__n { flex: 0 0 auto; min-width: 34px; font-weight: 700; color: var(--marque); }
.vt-mats__vig {
  flex: 0 0 auto; width: 84px; height: 84px; border-radius: var(--r-p);
  overflow: hidden; background: var(--fond-2); box-shadow: var(--anneau);
  display: block;
}
.vt-mats__vig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vt-mats__vig i { display: block; width: 100%; height: 100%; background: var(--nappe); opacity: .18; }
.vt-mats__t { flex: 0 0 220px; min-width: 0; font-size: 18px; }
.vt-mats__p { flex: 1 1 260px; min-width: 0; color: var(--texte-doux); font-size: 15px; }

/* --- tarifs : intitule fendu a gauche, lignes de prix a droite --- */
.vt-prix { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.vt-prix__mot { flex: 1 1 320px; min-width: 0; }
.vt-prix__file { flex: 2 1 520px; min-width: 0; list-style: none; margin: 0; padding: 0; }
.vt-prix__l {
  display: block; padding: 22px 24px; border-radius: var(--r-g);
  background: var(--fond); box-shadow: var(--anneau), var(--lev-1);
}
.vt-prix__l + .vt-prix__l { margin-top: 14px; }
.vt-prix__tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; justify-content: space-between; }
.vt-prix__val { font-size: 22px; font-weight: 700; color: var(--marque); }
.vt-prix__val i { font-style: normal; font-size: 13px; color: var(--texte-doux); margin-left: 4px; }
.vt-prix__p { display: block; margin-top: 8px; color: var(--texte-doux); font-size: 15px; }

/* --- grille de produits : piste debordante a plaque de verre ----- */
.vt-gp__file > * { flex: 0 0 clamp(260px, 30vw, 360px); }
.vt-gp__c { position: relative; display: block; }
.vt-gp__vue { border-radius: var(--r-g); overflow: hidden; box-shadow: var(--lev-2); }
.vt-gp__vue img { display: block; width: 100%; height: 320px; object-fit: cover; }
.vt-gp__verre {
  position: relative; display: block; margin: -56px 14px 0; padding: 18px;
  border-radius: var(--r-p); background: color-mix(in srgb, var(--fond) 92%, transparent);
  backdrop-filter: blur(8px); box-shadow: var(--lev-1), var(--anneau);
}
.vt-gp__prix { display: inline-block; margin-top: 4px; font-weight: 700; color: var(--marque); }
.vt-gp__prix i { font-style: normal; font-size: 13px; color: var(--texte-doux); margin-left: 4px; }
.vt-gp__p { display: block; margin-top: 6px; color: var(--texte-doux); font-size: 14px; }
@media (max-width: 720px) {
  .vt-mats__vig { width: 62px; height: 62px; }
  .vt-mats__t { flex-basis: 100%; }
  .vt-gp__vue img { height: 260px; }
}

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