/* ============================================================================
   ventes-flash.css — complément de assets/home.css pour /ventes-flash
   ---------------------------------------------------------------------------
   La page réutilise TELS QUELS les composants « ventes flash » déjà présents
   dans home.css (.vflash, .vf-row, .pack-card, .cat-fam-head…) : ils portent
   déjà le filet de couleur par référentiel, la géométrie des rangées et la
   colonne de prix. Ce fichier n'ajoute que ce que /ventes-flash introduit et
   qui n'existait nulle part :
     1. la colonne PRIX d'une rangée catégorie (ailleurs, elle affiche
        « ✓ Inclus dans le tarif jour » — ici il y a un vrai montant) ;
     2. la famille « hab » (SST, AIPR, échafaudage, H0B0, harnais), qui n'est
        pas un référentiel CACES® et n'a donc ni couleur ni photo ;
     3. la modale CGV d'avant-paiement.
   Aucune règle ici ne touche une classe utilisée par une autre page.
   ========================================================================== */

/* ---- 1. colonne prix d'une rangée catégorie --------------------------- */
.vflash .vf-price{display:flex;flex-direction:column;gap:2px;justify-content:center;text-align:right}
.vflash .vf-price__k{
  font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:10.5px;font-weight:900;letter-spacing:.6px;text-transform:uppercase;
  color:var(--vf-muted);
}
.vflash .vf-price__v{font-size:30px;font-weight:900;line-height:1.05;letter-spacing:-.5px;color:var(--vf-navy)}
.vflash .vf-price__u{font-size:11px;color:var(--vf-muted);line-height:1.35}

/* ---- 2. famille « hab » : ni référentiel CACES®, ni photo ------------- */
.vflash .vf-row[data-fam=hab]::before,
.vflash .pack-card[data-fam=hab]::before{background:#B93A22}
.vflash .cat-fam-badge[data-fam=hab]{background:#B93A22;color:#fff}
.vflash .vf-row[data-fam=hab] .vf-row__badge{background:#B93A22;color:#fff}
/* vignette de remplacement : jamais la photo d'un autre engin (cf. les 9
   catégories CACES® sans cliché) — un aplat hachuré portant le code. */
.vflash .vf-row__thumb.is-empty{
  display:flex;align-items:center;justify-content:center;cursor:default;
  background:
    repeating-linear-gradient(135deg,var(--vf-panel) 0 9px,#eef1f4 9px 18px);
  border:1px solid var(--vf-line);
}
.vflash .vf-row__thumb.is-empty span{
  font-family:"Barlow Condensed","Segoe UI",Arial,sans-serif;
  font-size:26px;font-weight:700;letter-spacing:1px;color:var(--vf-muted);
  text-transform:uppercase;
}

/* ---- 3. encadré « à lire avant votre achat » -------------------------- */
.vf-notice{
  border:1px solid var(--vf-line);border-left:4px solid var(--vf-accent);
  background:#fff;border-radius:var(--r);padding:20px 24px;
}
.vf-notice h2{font-size:19px;margin:0 0 10px}
.vf-notice p{margin:0 0 10px;font-size:14px;line-height:1.6;color:var(--encre-60)}
.vf-notice p:last-child{margin-bottom:0}
.vf-notice a{color:var(--form);text-decoration:underline}

/* ---- 4. modale CGV d'avant-paiement ----------------------------------- */
.cgvm-overlay{
  position:fixed;inset:0;z-index:9999;display:none;
  align-items:flex-start;justify-content:center;padding:48px 24px;
  background:rgba(20,24,27,.62);overflow-y:auto;
}
.cgvm-overlay.open{display:flex}
.cgvm-box{
  background:#fff;border-radius:14px;max-width:520px;width:100%;position:relative;
  box-shadow:0 30px 80px rgba(16,20,24,.4);
}
.cgvm-head{padding:26px 28px 16px;border-bottom:1px solid var(--vf-line)}
.cgvm-head h3{margin:0;font-size:20px;font-weight:900;letter-spacing:-.3px;color:var(--vf-navy)}
.cgvm-head p{margin:6px 0 0;font-size:14px;color:var(--vf-muted)}
.cgvm-body{padding:20px 28px}
.cgvm-item{
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:12px 14px;margin:0 0 16px;border-radius:8px;background:var(--vf-panel);
}
.cgvm-item b{font-size:14.5px;color:var(--vf-navy)}
.cgvm-item span{font-size:19px;font-weight:900;color:var(--vf-navy);white-space:nowrap}
.cgvm-info{margin:0 0 14px;font-size:14px;line-height:1.6;color:var(--encre-60)}
.cgvm-docs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.cgvm-docs a{
  font-size:12.5px;font-weight:700;text-decoration:none;padding:9px 13px;
  border:1px solid var(--vf-line);border-radius:8px;color:var(--vf-navy);background:#fff;
}
.cgvm-docs a:hover{border-color:var(--vf-navy)}
.cgvm-check{display:flex;gap:12px;align-items:flex-start;padding:16px 0 2px}
.cgvm-check input{width:20px;height:20px;margin:1px 0 0;flex:0 0 auto;accent-color:var(--vf-navy)}
.cgvm-check label{font-size:14.5px;line-height:1.5;color:var(--encre)}
.cgvm-check label a{color:var(--form);text-decoration:underline}
.cgvm-foot{display:flex;gap:10px;justify-content:flex-end;padding:16px 28px 24px}
.cgvm-btn-cancel,.cgvm-btn-go{
  font:700 14px/1 "Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  padding:13px 20px;border-radius:8px;cursor:pointer;border:1px solid var(--vf-line);
  background:#fff;color:var(--vf-navy);
}
.cgvm-btn-go{background:var(--vf-navy);color:#fff;border-color:var(--vf-navy);font-weight:900;opacity:.4;cursor:not-allowed}
.cgvm-btn-go.ready{opacity:1;cursor:pointer}
.cgvm-btn-go.ready:hover{background:#000}
.cgvm-close{
  position:absolute;top:14px;right:18px;width:30px;height:30px;border:0;background:transparent;
  font-size:24px;line-height:1;color:var(--vf-muted);cursor:pointer;
}
.cgvm-close:hover{color:var(--vf-navy)}
@media (max-width:560px){
  .cgvm-overlay{padding:16px;align-items:center}
  .cgvm-foot{flex-direction:column-reverse;padding:14px 20px 20px}
  .cgvm-btn-cancel,.cgvm-btn-go{width:100%;padding:14px 18px;font-size:15px}
  .cgvm-head,.cgvm-body{padding-left:20px;padding-right:20px}
  .vflash .vf-price{text-align:left}
}

/* ---- 5. photos des formations sécurité (2026-08-27) -------------------
   Le manager a fourni plusieurs clichés pour certaines rangées. La vignette
   n'en montre QU'UN — la colonne fait 218×150 et deux photos côte à côte y
   sont illisibles — mais les autres restent dans le DOM : la visionneuse
   (#ff-lb) ouvre tous les <img> de la vignette cliquée, donc un clic donne
   bien toutes les vues. `data-plus` annonce combien sont en réserve.
   ------------------------------------------------------------------- */
.vflash .vf-row__thumb--multi{cursor:zoom-in;position:relative}
.vflash .vf-row__thumb--multi img ~ img{display:none}
.vflash .vf-row__thumb--multi[data-plus]::after{
  content:"+" attr(data-plus);
  position:absolute;right:6px;bottom:6px;
  font:900 11px/1 "Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  padding:4px 7px;border-radius:6px;
  background:rgba(20,24,27,.82);color:#fff;letter-spacing:.3px;
  pointer-events:none;
}

/* ---- 6. pastille des formations sécurité ------------------------------
   Elle portait « FORM. » au-dessus du code, par mimétisme avec le « CAT »
   des rangées CACES®. Deux défauts : « FORM. » n'apprend rien (la section
   s'appelle déjà « formations sécurité »), et le code seul déborde — la
   colonne est figée à 84 px par la grille, or « HARNAIS » mesure 100 px à
   22 px. La pastille étant `overflow:visible` dans une carte
   `overflow:hidden`, le mot était rogné par le bord de la carte.
   Correctif : plus de surtitre, un seul code centré, et une taille qui
   tient le plus long libellé (« HARNAIS » = 68 px à 15 px, pour 72 px
   utiles). La hauteur est forcée à celle d'une pastille CACES® à deux
   lignes (58 px) pour que les rangées gardent le même rythme.
   ------------------------------------------------------------------- */
.vflash .vf-row[data-fam=hab] .vf-row__badge{
  min-height:58px;padding:12px 6px;justify-content:center;
}
.vflash .vf-row[data-fam=hab] .vf-row__badge .ref{
  font-size:15px;letter-spacing:0;line-height:1.15;
  white-space:nowrap;text-align:center;
}

/* ---- 7. remplissage des vignettes sécurité (2026-08-27) ---------------
   Le cadre fait 218×150, soit un ratio de 1,45. Mesuré : SST 1,60,
   H0-B0 1,58 et HARNAIS 1,50 le remplissent presque exactement ; AIPR et
   l'échafaudage sont CARRÉS (1,00) et flottaient au centre de 42 px de
   blanc de chaque côté — d'où « certaines ne rentrent pas ».

   Aucun recadrage automatique n'est appliqué aveuglément : `cover` est
   réservé aux vraies scènes déjà en format paysage, où il ne rogne
   quasiment rien. Ce qui ne PEUT pas être recadré sans perdre son sujet —
   le panneau H0-B0 (son texte), l'échafaudage détouré (sa tour), le
   composite AIPR (l'opérateur en haut, les réseaux enterrés en bas) —
   reste en `contain`, mais posé sur un fond neutre plutôt que sur du
   blanc : le cadre est alors rempli par un aplat assumé, pas par du vide.
   ------------------------------------------------------------------- */
.vflash .vf-row__thumb--photo img{object-fit:cover;padding:0}
.vflash .vf-row__thumb--doc{background:var(--vf-panel)}
.vflash .vf-row__thumb--doc img{object-fit:contain;padding:10px}

/* Sous le point de bascule, home.css passe la vignette en pleine largeur
   (max 440 px) sur 200 px de haut : le ratio grimpe à 2,2 et une photo en
   `cover` y serait rognée de moitié. On rend la hauteur proportionnelle et
   on garde l'image entière sur mobile, où l'espace vertical ne manque pas. */
@media (max-width:860px){
  .vflash .vf-row__thumb--photo,
  .vflash .vf-row__thumb--doc{height:auto;aspect-ratio:3/2;max-width:440px}
  .vflash .vf-row__thumb--photo img{object-fit:cover}
}