/* Tuiles de formats (tvof) — COMPOSANT PARTAGE avec la page d'accueil.
 * Transplante de la home (commit e85c50c), 86 selecteurs identiques de part
 * et d'autre. Toute modification ici change les deux pages : c'est voulu.
 *
 * Extrait de tests/page-cellules/index.html (maquette generee par
 * build-cellules.py). Ne pas editer a la main sans reporter le changement
 * dans la maquette, sinon la prochaine regeneration ecrasera la difference.
 */

/* ══ CSS TRANSPLANTÉ : bloc tuiles (tvof) — home e85c50c ══ */
/* ══ TARIFS « L'OFFRE D'ABORD » ══════════════════════════════════════════════
   Transplante de options/tarifs-v2-offre.html le 2026-08-11. */
.tvof-section {
  --tvof-shadow-card:  0 1px 2px rgba(26,26,26,.05), 0 4px 12px rgba(26,26,26,.06);
  --tvof-shadow-pop:   0 2px 6px rgba(26,26,26,.07), 0 24px 48px -16px rgba(26,26,26,.22);
  --tvof-r:      12px;
  --tvof-r-xl:   16px;
  --tvof-line:   #EFEDE7;   /* bordure de carte — l'ombre porte la profondeur */
  --tvof-plaque: #F0E3B2;   /* bordure de la plaque prix */

  /* --- matière des quatre plans isométriques ------------------------------
     UN SEUL jeu de gris pour les quatre dessins, déclaré ici et nulle part
     ailleurs : quatre jeux pour quatre dessins, c'est la dérive qu'on évite.
     Les parois suivent un modèle d'éclairage constant, et la règle est
     GÉOMÉTRIQUE et non sémantique : la paroi qui part vers la gauche de
     l'écran est toujours la claire, celle qui part vers la droite toujours la
     sombre. C'est ce qui fait que l'angle rentrant se lit pareil dans les
     quatre — y compris sur le box, où la paroi de gauche est la petite alors
     qu'elle est la grande sur les cellules.
     Le jaune saturé ne sert qu'au gilet de la silhouette, c'est-à-dire à
     l'étalon de mesure ; --tvof-band est le seul jaune pâle, et il ne fait
     que renforcer une information déjà portée par les pointillés. Tout le
     reste est de la matière désaturée, pour que le jaune reste le seul point
     saturé du dessin. */
  --tvof-wall-a:  #EFEBE3;   /* paroi de gauche */
  --tvof-wall-b:  #DFDAD1;   /* paroi de droite */
  --tvof-rib:     #C4BFB4;   /* joints de bardage, tous les mètres */
  --tvof-band:    #FAF0D0;   /* la bande 4 → 6 m */
  --tvof-kraft-t: #E3CBA4;   /* carton, dessus */
  --tvof-kraft-a: #C9A87C;   /* carton, face +a */
  --tvof-kraft-b: #AE8D62;   /* carton, face +b */
  --tvof-shelf:   #E2DED6;   /* tablettes du rayonnage */
  --tvof-steel:   #6E6A62;   /* montants du rayonnage, et caisse du camion */
  --tvof-wood:    #D9CDB6;   /* plateau de l'établi, dessus de palette */
  --tvof-car-t:   #EDEAE3;   /* carrosserie vue du dessus */
  --tvof-car-a:   #C6C2B9;   /* carrosserie, faces de normale +a */
  --tvof-car-b:   #ADA89E;   /* carrosserie, faces de normale +b */
  --tvof-glass-a: #6E7A78;   /* vitres latérales, et bas de caisse */
  --tvof-glass-b: #9AA5A2;   /* pare-brise vu du dessus */
  --tvof-tyre:    #2A2A28;
  --tvof-ink-2:  #3A3A3A;   /* 10,4:1 sur blanc — texte d'ancrage du coût */
  background: var(--color-white);
}
.tvof-wrap {
  max-width: var(--max-width);
  margin-inline: auto;
  padding: var(--space-md) var(--space-sm);
}

/* --- LE MASTHEAD DE CATALOGUE ----------------------------------------------
   Un filet sombre de 3 px ouvre la section — le même geste qu'une tête de
   rubrique de catalogue papier : la section ne COMMENCE pas comme les autres,
   elle s'ouvre. Kicker à gauche, méta de catalogue à droite (le compte des
   formats et la promesse de transparence, PAS une promesse de prix bas). */
.tvof-mast {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--space-xs) var(--space-sm);
  border-top: 3px solid var(--color-dark);
  padding-top: var(--space-xs);
  margin-bottom: var(--space-xs);
}
.tvof-kicker {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-size-small);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-primary-text);      /* #7A6200 — 5,87:1 sur blanc */
}
.tvof-kicker::before {
  content: ""; display: inline-block; width: 1.5rem; height: 2px;
  background: var(--color-primary); margin-right: .5rem; vertical-align: .25em;
}
/* `.tvof-mastmeta` a été retirée le 2026-08-12 avec son unique appelant : le
   second paragraphe du masthead, que le proprietaire ne voulait plus. La règle
   est supprimée plutôt que gardée morte — ce fichier n'accumule pas de
   sélecteurs sans balise.
   Le texte retiré n'est PAS recopié ici, et c'est délibéré : ce CSS part dans
   la page, donc un commentaire qui cite une copy supprimée la remet dans les
   octets servis. Le piège s'est déjà refermé deux fois aujourd'hui.
   `.tvof-mast` reste en display:flex ; avec un seul enfant il se cale à gauche. */
/* Pas de paragraphe d'introduction : dans cette charpente, le h2 nomme
   l'offre et les intertitres de famille nomment le besoin — une lede ne
   ferait que les répéter, et elle coûtait ~85 px mesurés à 1280 px. Le méta
   du masthead porte déjà la promesse de transparence des prix. */
.tvof-h2 { margin: 0 0 var(--space-sm); }

/* --- LES INTERTITRES DE GROUPE ----------------------------------------------
   Une plaque sombre numérotée + le besoin en toutes lettres + le nom de la
   famille en gris + un filet qui court jusqu'au bord : la grille cesse d'être
   quatre cartes en vrac, elle devient un catalogue à deux rayons. Le noir
   porte la numérotation (le jaune reste un accent d'ACTION : liseré du
   45 m², plaque prix, CTA). */
.tvof-group {
  display: flex; align-items: center; gap: var(--space-xs);
  /* 24 / 12 et non 32 / 16 : chaque pixel de charpente est payé par la
     suppression du second CTA, et le budget est serré (cf. pied de page). */
  margin: var(--space-smd) 0 .75rem;
  font-family: var(--font-display); font-size: 1rem; font-weight: 700;
  line-height: 1.25; color: var(--color-dark);
}
.tvof-group--first { margin-top: 0; }
.tvof-gnum {
  flex: none; display: inline-grid; place-items: center;
  min-width: 1.75rem; height: 1.75rem; padding: 0 .45rem;
  background: var(--color-dark); color: var(--color-white);   /* 17,4:1 */
  border-radius: var(--radius-sm);
  font-size: var(--font-size-small); font-weight: 700; letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
.tvof-gmeta {
  font-family: var(--font-body); font-size: var(--font-size-small);
  font-weight: 400; color: var(--color-gray);
}
.tvof-group::after {
  content: ""; flex: 1 1 1rem; height: 1px;
  background: var(--color-gray-light); margin-left: var(--space-xs);
}
/* Sous 480 px le méta passe à la ligne plutôt que d'écraser le filet. */
@media (max-width: 479.98px) {
  .tvof-group { flex-wrap: wrap; }
  .tvof-gmeta { flex: 1 1 100%; padding-left: calc(1.75rem + var(--space-xs)); }
}

/* --- grille des trois cellules --------------------------------------------- */
.tvof-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  align-items: stretch;
}
@media (min-width: 768px) {
  .tvof-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-smd) var(--space-sm); }
}

.tvof-tile {
  position: relative;
  background: var(--color-white);
  border: 1px solid var(--tvof-line);
  border-radius: var(--tvof-r);
  box-shadow: var(--tvof-shadow-card);
}

/* < 768 px : deux colonnes, la rangée 1 est [photo | plan], le reste s'écoule
   en pleine largeur dans l'ordre du source — repris de tuile-c-3d-v2.html. */
.tvof-row {
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  column-gap: var(--space-sm);
  padding: var(--space-sm);
  align-content: start;
}
.tvof-row > *             { grid-column: 1 / -1; }
.tvof-row > .tvof-media   { grid-column: 1; grid-row: 1; align-self: start; }
.tvof-row > .tvof-planbox { grid-column: 2; grid-row: 1; }
.tvof-row > .tvof-id      { margin-top: var(--space-xs); }
.tvof-row > .tvof-rest    { margin-top: var(--space-xs); }
.tvof-row > .tvof-ctas    { margin-top: var(--space-xs); }

@media (min-width: 768px) {
  /* Colonne flex : photo en bandeau, plan dessous, `.tvof-rest` absorbe le mou
     pour que les CTA des trois cellules s'alignent. Le `align-self: stretch`
     ANNULE le `start` de la règle de base — en flex colonne ce mot-clé gouverne
     l'axe horizontal et `start` ferait tomber la photo en shrink-to-fit
     (défaut mesuré sur la v2 : 84,7 px de blanc à 1023 px). */
  .tvof-row { display: flex; flex-direction: column; padding: 0; }
  .tvof-row > .tvof-media   { flex: none; align-self: stretch; border-radius: var(--tvof-r) var(--tvof-r) 0 0; }
  .tvof-row > .tvof-planbox { flex: none; margin: var(--space-sm) var(--space-sm) 0; }
  .tvof-row > .tvof-id      { padding: var(--space-xs) var(--space-sm) 0; margin-top: 0; }
  .tvof-row > .tvof-rest    { flex: 1 1 auto; padding: 0 var(--space-sm); margin-top: var(--space-xs); }
  .tvof-row > .tvof-ctas    { margin: var(--space-sm); }
}

/* MOMENT JAUNE 1/3 — le liseré 4 px sur le 45 m², le meilleur vendeur
   (BRIEF-V2 §0.4). Il met en avant sans rien affirmer : pas un badge. */
.tvof-tile--feat { box-shadow: var(--tvof-shadow-pop); }
.tvof-tile--feat::before {
  content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 4px;
  background: var(--color-primary);
  border-radius: var(--tvof-r) var(--tvof-r) 0 0;
}

/* --- la tuile box, développée ---------------------------------------------- */
.tvof-tile--lead {
  display: grid; grid-template-columns: 1fr;
  border-radius: var(--tvof-r-xl);
  box-shadow: var(--tvof-shadow-pop);
  overflow: hidden;
}
@media (min-width: 768px) {
  .tvof-tile--lead { grid-template-columns: minmax(0, 44%) minmax(0, 1fr); align-items: center; }
}
.tvof-tile--lead .tvof-body { padding: var(--space-smd); }
@media (min-width: 1024px) { .tvof-tile--lead .tvof-body { padding: var(--space-md); } }

/* Les trois visuels du box : photo pleine largeur, puis rendu 3D et plan côte
   à côte (44/56 en faveur du plan : lui seul porte du texte). Repris tel quel. */
.tvof-pair {
  display: grid;
  grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: stretch;
  margin: var(--space-xs) var(--space-sm) 0;
}
@media (min-width: 768px) { .tvof-pair { margin-bottom: var(--space-sm); } }
.tvof-rendu {
  position: relative; margin: 0; overflow: hidden; height: 100%;
  background: var(--color-white);
  border: 1px solid var(--tvof-line);
  border-radius: var(--radius-sm);
}
.tvof-rendu > img { width: 100%; height: 100%; object-fit: contain; }

/* --- média 6/5 des trois cellules, `sizes` en formule (cf. tuile-c-3d-v2) --- */
.tvof-media {
  position: relative; margin: 0; overflow: hidden;
  aspect-ratio: 6 / 5;
  background: var(--color-gray-light);
  border-radius: var(--radius-sm);
}
.tvof-media > img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.tvof-media--h45  > img { object-position: 50% 8%; }
.tvof-media--v120 > img { object-position: 45% 50%; }
.tvof-media--pont > img { object-position: 0% 50%; transform: scale(1.03); transform-origin: 0% 50%; }
/* La photo pleine largeur du box garde son ratio de source (4:3). Déclarée
   APRÈS `.tvof-media` : même spécificité, l'ordre tranche. */
.tvof-media--photo { aspect-ratio: 4 / 3; border-radius: 0; }
.tvof-media--photo > img { object-position: 50% 45%; }

/* --- le panneau du plan ------------------------------------------------------ */
.tvof-planbox {
  display: flex; align-items: center; justify-content: center;
  align-self: stretch;
  padding: 5px;
  background: var(--color-bg);
  border: 1px solid var(--tvof-line);
  border-radius: var(--radius-sm);
}
.tvof-plan { display: block; width: 100%; height: auto; max-width: 240px; }

/* --- le dessin : conventions de tuile-c-3d-v2, renommées --------------------- */
.tvof-e, .tvof-c, .tvof-arrow { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.tvof-floor     { fill: var(--color-gray-light); }
.tvof-top       { fill: var(--color-white); }
.tvof-e         { stroke: var(--color-gray); stroke-width: 1.4px; }
.tvof-e--f      { stroke: var(--color-dark);  stroke-width: 1.7px; }
.tvof-e--in     { stroke-width: 1px; }
.tvof-e--max    { fill: none; stroke: var(--color-gray); stroke-width: 1.2px; stroke-dasharray: 7 5; }
.tvof-e--part   { fill: none; stroke: var(--color-gray); stroke-opacity: .7; stroke-width: .9px; stroke-dasharray: 5 4; }
.tvof-arrow     { stroke: var(--color-dark); stroke-width: 1px; stroke-opacity: .75; stroke-linecap: round; }
.tvof-mesh { fill: none; stroke: transparent; stroke-width: 1; }
.tvof-mesh--on { stroke: var(--color-gray); stroke-opacity: .7; }
@media (min-width: 1024px) { .tvof-mesh { stroke: var(--color-gray); stroke-opacity: .7; } }
.tvof-fig { fill: var(--color-dark); stroke: var(--color-dark); stroke-width: .10; stroke-linejoin: round; }
.tvof-c   { stroke: var(--color-dark); stroke-width: 1px; }

/* --- matière et mobilier des plans ------------------------------------------
   Aplats de matière : aucun trait, le trait vient de .tvof-o. */
.tvof-wa    { fill: var(--tvof-wall-a); }
.tvof-wb    { fill: var(--tvof-wall-b); }
.tvof-band  { fill: var(--tvof-band); }
.tvof-rib   { fill: none; stroke: var(--tvof-rib); stroke-width: .8px; vector-effect: non-scaling-stroke; }
.tvof-kt    { fill: var(--tvof-kraft-t); }
.tvof-ka    { fill: var(--tvof-kraft-a); }
.tvof-kb    { fill: var(--tvof-kraft-b); }
.tvof-shelf { fill: var(--tvof-shelf); }
.tvof-wood  { fill: var(--tvof-wood); }
.tvof-cart  { fill: var(--tvof-car-t); }
.tvof-cara  { fill: var(--tvof-car-a); }
.tvof-carb  { fill: var(--tvof-car-b); }
.tvof-gla   { fill: var(--tvof-glass-a); }
.tvof-glb   { fill: var(--tvof-glass-b); }
.tvof-tyre  { fill: var(--tvof-tyre); }
/* LE BAS DE CAISSE — la rupture de valeur entre une carrosserie et le sol.
   Sans elle, le flanc et le sol se touchent en deux gris voisins et l'œil lit
   un aplat posé à plat. Les deux véhicules la portent. */
.tvof-sill  { fill: var(--tvof-glass-a); }
/* LA CAISSE DU CAMION — un porteur est peint en DEUX TONS : cabine claire,
   caisse foncée. Choix de peinture, pas d'éclairage, et c'est lui qui sauve le
   dessin à la taille servie : le bas de caisse seul n'y suffisait pas (mesuré,
   49 pixels changés sur 13 630). Sans cette rupture, cabine et caisse sont deux
   grands aplats de valeur voisine et l'objet se lit comme une dalle. */
.tvof-caisse { fill: var(--tvof-steel); }
/* Le contour des objets : plus fin que le fil de fer du volume (1,4 / 1,7 px),
   pour que le mobilier reste SOUS la géométrie dans la hiérarchie du dessin. */
.tvof-o     { stroke: var(--color-dark); stroke-width: .8px; stroke-opacity: .75;
              vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.tvof-oi    { stroke-width: .7px; stroke-opacity: .55; }
.tvof-post  { fill: none; stroke: var(--tvof-steel); stroke-width: 1.1px;
              vector-effect: non-scaling-stroke; stroke-linecap: round; }
/* Ombres de contact : des aplats, PAS un flou. Un seul feDropShadow par dessin,
   sur le quadrilatère du sol : empiler des filtres sur un dessin de 127 px
   coûte plus qu'il ne rend. */
.tvof-sh    { fill: var(--color-dark); opacity: .09; }
/* La silhouette : trait affiné pour que le gilet ne soit pas mangé par son
   propre contour en petit. Le gilet porte le seul jaune saturé du dessin. */
.tvof-figd  { fill: var(--color-dark); stroke: var(--color-dark); stroke-width: .07; stroke-linejoin: round; }
.tvof-figv  { fill: var(--color-primary); stroke: none; }
/* LES CLOISONS DU PLAN SUR MESURE — elles portent tout le message du dessin,
   « on découpe selon le projet ». En 0,9 px de trait à 70 % d'opacité, ce sont
   les marques les plus pâles du dessin : le message s'efface avant tout le
   reste, précisément là où le dessin est le plus petit. Ces deux classes
   S'AJOUTENT à .tvof-e--part et .tvof-arrow, elles ne les remplacent pas, et
   elles ne renforcent que sous 1024 px — les deux largeurs où le plan est servi
   à 133 puis 178 px. Au-delà, les classes communes suffisaient déjà. */
.tvof-cloison { stroke-opacity: .95; stroke-width: 1.7px; stroke-dasharray: 7 4; }
.tvof-fleche  { stroke-opacity: 1; stroke-width: 1.7px; }
@media (min-width: 1024px) {
  .tvof-cloison { stroke-opacity: .8; stroke-width: 1.1px; stroke-dasharray: 6 4; }
  .tvof-fleche  { stroke-opacity: .85; stroke-width: 1.2px; }
}
.tvof-ct { fill: var(--color-dark); font-family: var(--font-display); font-weight: 600; font-size: 19px;
           paint-order: stroke; stroke: var(--color-bg); stroke-width: 3px; stroke-linejoin: round; }
@media (min-width: 768px) and (max-width: 1023.98px) {
  .tvof-grid .tvof-ct          { font-size: 15px; }   /* cellules, dessin ~191 px */
  .tvof-planbox--lead .tvof-ct { font-size: 19px; }   /* paire du box, dessin ~126 px */
}
@media (min-width: 1024px) {
  .tvof-ct, .tvof-grid .tvof-ct, .tvof-planbox--lead .tvof-ct { font-size: 13px; }
}

/* --- lignes de texte ------------------------------------------------------- */
.tvof-name { margin: 0 0 4px; font-family: var(--font-display); font-weight: 700;
             line-height: 1.2; font-size: var(--font-size-h3); }
.tvof-tile--lead .tvof-name { font-size: var(--font-size-h2); letter-spacing: -.02em; }
/* `.tvof-idx` — l'index « 01 · 02 · 03 · 04 » posé devant le nom du format — a
   été retiré le 2026-08-28 avec son markup, sur les deux pages qui le
   servaient. Il numérotait ce qui a déjà un nom, et le nom se lit plus vite
   qu'un rang. La règle part avec la balise : ce fichier n'accumule pas de
   sélecteurs morts. Les grands numéros de section `.tvof-gnum` restent, eux :
   ils ordonnent les DEUX familles de la page, pas les box. */
.tvof-dims {
  margin: 0 0 var(--space-xs);
  font-size: var(--font-size-xs); line-height: 1.4; color: var(--color-gray);
}
.tvof-dims b { font-family: var(--font-display); font-weight: 600; color: var(--color-dark); }
.tvof-usage { margin: 0 0 var(--space-xs); font-size: var(--font-size-small); line-height: 1.45; }
/* La ligne qui relie le texte aux visuels du box — la « matière » rendue à la
   tuile sans hauteur nouvelle côté carte : la colonne média reste la plus haute. */
.tvof-visnote { margin: 0 0 var(--space-xs); font-size: var(--font-size-xs);
                line-height: 1.45; color: var(--color-gray); }
.tvof-terms {
  margin: 0 0 var(--space-xs);
  font-size: var(--font-size-xs); font-weight: 500; color: var(--tvof-ink-2);
}
.tvof-price {
  margin: 0;
  font-family: var(--font-display); font-size: 1.75rem; font-weight: 700;
  line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  color: var(--color-dark);
}
.tvof-price span {
  font-family: var(--font-body); font-size: var(--font-size-small);
  font-weight: 400; letter-spacing: 0; color: var(--color-gray);
}
.tvof-cond {
  margin: 4px 0 var(--space-xs);
  font-size: var(--font-size-xs); line-height: 1.35; color: var(--color-gray);
}
.tvof-quote {
  margin: 0 0 var(--space-xs);
  padding-left: .6rem;
  border-left: 2px solid var(--color-primary);
  font-family: var(--font-display); font-size: 1.375rem; font-weight: 700;
  line-height: 1.15; letter-spacing: -.01em;
  color: var(--color-dark);
}
.tvof-quote span {
  display: block; margin-top: 2px;
  font-family: var(--font-body); font-size: var(--font-size-xs); font-weight: 400;
  line-height: 1.4; letter-spacing: 0; color: var(--color-gray);
}

/* MOMENT JAUNE 2/3 — la plaque sous le prix, sur la seule tuile développée. */
.tvof-pay {
  margin: 0 0 var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-primary-light);
  border: 1px solid var(--tvof-plaque);
  border-radius: var(--tvof-r);
}
.tvof-pay .tvof-price { font-size: 2.5rem; }
.tvof-guar { list-style: none; display: flex; flex-wrap: wrap; gap: 2px var(--space-sm); margin: 6px 0 0; padding: 0; }
.tvof-guar li { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--font-size-xs); color: var(--tvof-ink-2); }
.tvof-guar svg { flex: none; width: 14px; height: 14px; color: var(--color-dark); }

.tvof-attrs { list-style: none; margin: 0 0 var(--space-sm); padding: 0; font-size: var(--font-size-xs);
              line-height: 1.5; color: var(--tvof-ink-2); }
.tvof-attrs li { display: inline; }
.tvof-attrs li + li::before { content: " · "; color: var(--color-gray); }

/* --- CTA : le gabarit de base, UN bouton par tuile --------------------------
   Base flex de 14 rem : un bouton seul remplit sa colonne, et deux boutons
   s'empilent dès que la colonne descend sous ~28 rem — c'est-à-dire partout
   sur mobile. C'est ce que veut la page Tarifs, qui n'a qu'un CTA par tuile.
   La page d'accueil, elle, sert DEUX actions depuis le 2026-08-28 (« Plus
   d'info » + « Appel ») et redéclare cette base en `1 1 0` dans home.css,
   qui est enfilée après celle-ci. Ne pas changer la valeur ici sans relire
   les tuiles de Tarifs. */
.tvof-ctas { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.tvof-ctas .btn-primary { flex: 1 1 14rem; margin: 0; width: auto; }

/* MOMENT JAUNE 3/3 — le halo du CTA primaire (+ arête lumineuse). */
.tvof-section .tvof-ctas .btn-primary {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 2px rgba(26,26,26,.15),
              0 4px 14px rgba(245,197,24,.40);
}
@media (hover: hover) and (pointer: fine) {
  .tvof-section .tvof-ctas .btn-primary:hover {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 4px rgba(26,26,26,.15),
                0 8px 22px rgba(245,197,24,.50);
  }
}

/* --- badges d'usage : « idéal pour / possible » ----------------------------- */
.tvof-fits { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--space-xs); padding: 0; }
.tvof-fits li {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px 3px 7px;
  background: var(--color-white); border: 1px solid #EFEDE7; border-radius: 999px;
  font-family: var(--font-display); font-size: var(--font-size-xs); font-weight: 600;
  letter-spacing: .01em; color: var(--color-dark);
}
.tvof-fits svg { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--color-primary-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tvof-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.tvof-fits li.is-fit { background: var(--color-primary-light); border-color: #F0E3B2; }
.tvof-fits li.is-fit svg { stroke: var(--color-primary-text); }
.tvof-fits li:not(.is-fit) { color: var(--color-gray); }
.tvof-fits li:not(.is-fit) svg { stroke: var(--color-gray); }

/* --- le téléphone, UNE fois, sous la grille — bloc sombre à lueur ----------- */
.tvof-callout {
  position: relative; overflow: hidden;
  margin-top: var(--space-smd);
  padding: var(--space-smd);
  background: var(--color-dark);
  border-radius: var(--radius-lg);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-sm) var(--space-md);
}
.tvof-callout::before {
  content: ""; position: absolute; left: 50%; top: -30%;
  width: 120%; height: 70%; transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(55% 60% at 50% 0%, rgba(245,197,24,.12), transparent 70%);
}
.tvof-callout > * { position: relative; }
.tvof-callout__ico {
  flex: none; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-primary); color: var(--color-dark);
}
.tvof-callout__ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tvof-callout__txt { flex: 1 1 16rem; }
.tvof-callout__txt strong { display: block; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--color-white); line-height: 1.3; }
.tvof-callout__txt p { margin: 4px 0 0; font-size: var(--font-size-small); color: #CFCCC6; }
.tvof-callout__act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); }
@media (min-width: 900px) { .tvof-callout__act { margin-left: auto; } }
.tvof-callout__act .btn-primary { gap: .5rem; }
.tvof-callout__act .btn-primary svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tvof-callout__mail {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: 0 .5rem;
  font-family: var(--font-display); font-weight: 600;
  color: var(--color-primary);   /* jaune sur #1A1A1A : 10,7:1 — le jaune-texte n'est interdit que sur fond clair */
}
.tvof-callout__mail svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) { .tvof-callout__mail:hover { color: var(--color-white); } }