/* ============================================================
   REVALOCA — ventes-flash visual system (round 3, sitewide since round 7)
   Loaded by every page, after style.css. This is a full visual reskin
   to actually look like forma-force.fr/ventes-flash/ (white/panel
   backgrounds, navy chrome, real photo cards, bold pricing) instead
   of REVALOCA's usual béton/atelier look — while keeping site.js's
   structural hooks (#burger, #nav, header.top, .reveal, #rgpd-banner,
   .obj accordion) working untouched, since nothing here renames or
   removes those elements/classes, only recolors and reshapes them.
   Page-specific selectors (#tarifs, #packs, #certificat-exemple,
   .cat-card, .vf-row, .pack-card, hero__*) only exist in index.html's
   markup, so they no-op harmlessly everywhere else — the shared rules
   (typography, header.top, footer.bas, .card, .btn, .catbtn, .bande)
   are what give every page the same look.
   REVALOCA's own per-family référentiel colors are kept (already
   defined in style.css's .catrow[data-fam=...] rules) instead of
   FormaForce's orange — same call as round 2, just applied harder.
   Adapted from the real forma-force.fr/ventes-flash export already
   sitting in this repo's parent folder (page_offre_flash_v2_embed.html).
   ============================================================ */

:root{
  --vf-panel:#f6f8fa;
  --vf-line:#e2e6ea;
  --vf-muted:#5c6672;
  --vf-navy:#14181B;   /* = REVALOCA's --encre, reused for brand cohesion */
  --vf-accent:#E3772F; /* = REVALOCA's --loc, standing in for FormaForce's orange as THE brand accent on this page's chrome (topbar CTA, eyebrow dot, hero span) */
  --vf-accent-dark:#906909;
  --vf-accent-soft:#FDF3D8;
}

body{background:#fff;font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.wrap{max-width:1240px}

/* ---- Typography: the reference uses a clean mixed-case system-sans
   scale with tight negative letter-spacing, NOT REVALOCA's uppercase
   Barlow Condensed. This is the single biggest visual-fidelity gap —
   fixed here, page-scoped, pure styling (no accuracy concern the way
   pricing/certs/legal content is). ---- */
h1,h2,h3,h4,.cond,.catrow__t,.cat-card .t,.cert__body b,.cert-mock__head,
.plaque__t,.plaque__row .v,.etape h4,.pack-price,.footer-logo span,
.btn,.catbtn,.card--espace h3{
  font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  text-transform:none;
  letter-spacing:-.02em;
}
h1{font-size:40px;line-height:1.08;font-weight:900;letter-spacing:-1px}
.section__head h2{font-size:21px;font-weight:900;letter-spacing:-.3px}
#parc-photos h2{font-size:clamp(22px,3vw,30px)}
h3,h4{font-weight:800}
.btn,.catbtn{font-weight:700;letter-spacing:0}

/* Pricing flagged as too small/hard to read — this number is what sells
   the page, it should dominate the card, not blend into the body text. */
.pack-price{font-size:clamp(2rem,4.4vw,2.7rem);font-weight:900;line-height:1.15}
.pack-price small{font-size:.8rem;margin-top:6px}
#tarifs .card{padding:30px 26px}
.hero__stats b{font-size:2.9rem}

/* ---- hazard stripe is REVALOCA's own motif, not part of the
   ventes-flash chassis — dropped on this page only. ---- */
.bande{display:none}

/* ---- header / topbar: navy, white text, accent phone chip ---- */
header.top{background:var(--vf-navy);border-bottom:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:none;backdrop-filter:none}
header.top.is-scrolled{box-shadow:0 6px 20px -10px rgba(0,0,0,.5)}
header.top .logo__icon{background:transparent;padding:0}
header.top .logo__lockup{background:transparent;padding:0}
header.top .logo__txt{color:#fff}
header.top .logo__txt small{color:rgba(255,255,255,.55)}
header.top nav.main a{color:rgba(255,255,255,.82)}
header.top nav.main a:hover{background:rgba(255,255,255,.08);color:#fff}
header.top nav.main a.is-active{color:#fff}
header.top nav.main a::after{background:var(--vf-accent)}
/* 1150 et non 820 : le menu deroulant du burger existe des 1150px depuis le
   correctif de rangee (style.css). Laisse a 820, le panneau serait retombe
   sur le beton clair de style.css entre 821 et 1150, avec du texte blanc
   dessus — illisible. */
@media (max-width:1000px){ header.top nav.main{background:var(--vf-navy);border-color:rgba(255,255,255,.1)} }
.top__phone{background:var(--vf-accent);color:var(--vf-navy);padding:8px 14px;border-radius:8px;font-weight:700}
.top__badge{color:rgba(255,255,255,.7)}
header.top .top__cta .btn--ghost{border-color:rgba(255,255,255,.4);color:#fff}
header.top .top__cta .btn--ghost:hover{background:#fff;color:var(--vf-navy)}
header.top .top__cta .btn:not(.btn--ghost){background:var(--vf-accent);border-color:var(--vf-accent);color:var(--vf-navy)}
header.top .burger{border-color:rgba(255,255,255,.4);color:#fff;background:transparent}

/* ---- hero: real warehouse photo background + dark overlay, matching
   ventes-flash's dramatic photo hero, instead of a flat béton block. ---- */
/* Hero plus haut : il ne faisait que 56px+32px de marges autour du contenu,
   et le resserrement du bandeau de chiffres l'avait encore raccourci.
   min-height plutot qu'un padding enorme : la hauteur suit l'ecran, et si le
   contenu depasse (mobile, ou bandeau empile sur 6 rangees) c'est lui qui
   commande — rien n'est jamais coupe. Le plafond a 900px evite qu'un ecran
   tres haut n'etire le hero au point que le contenu flotte au milieu du vide.
   Colonne + justify-content:center : le contenu reste centre verticalement
   quelle que soit la hauteur retenue. */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  padding:88px 0 56px;
  min-height:min(86vh,900px);
  display:flex;flex-direction:column;justify-content:center;
  background:#0b1620 url('machines/r489.jpg?v=r47') center/cover no-repeat;
}
/* Sous 820px, la hauteur vient du contenu : imposer 86vh sur un telephone
   ajouterait du vide sous un hero deja long (bandeau de chiffres empile). */
@media (max-width:820px){
  .hero{min-height:auto;padding:60px 0 40px}
}
.hero__video{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(9,16,24,.92) 0%,rgba(9,16,24,.82) 42%,rgba(9,16,24,.55) 72%,rgba(9,16,24,.3) 100%);
}
/* width:100% est OBLIGATOIRE depuis que .hero est un conteneur flex colonne.
   Sur l'axe transversal (horizontal ici), un `margin:0 auto` — que .wrap
   porte — ANNULE l'etirement : l'element se dimensionne alors sur son
   contenu (848px mesures au lieu de 1240px) et les marges auto le recentrent.
   Le hero se retrouvait rentre de ~300px a gauche au lieu d'etre aligne sur
   le reste de la page. Avec une largeur explicite, max-width:1240px reprend
   la main et les marges auto ne font plus que centrer ce conteneur-la. */
.hero > .wrap{position:relative;z-index:2;width:100%}
/* Respect prefers-reduced-motion: hide the moving video, keep the static
   photo (already set as .hero's own background + the video's poster
   frame) so the hero still reads correctly, just without motion. */
@media (prefers-reduced-motion:reduce){ .hero__video{display:none} }
/* Pastille d'accroche du hero : agrandie et retravaillee.
   Le tiret ::before de l'idiome .eyebrow etait simplement masque ici ; il est
   remplace par une PUCE ambre qui respire lentement (2,6 s). Elle fait deux
   choses qu'un tiret ne fait pas : elle signale une plateforme vivante, et
   elle donne un point d'entree a l'oeil avant le titre. L'animation ne touche
   que box-shadow, donc pas de recalcul de mise en page, et la regle globale
   prefers-reduced-motion la neutralise deja.
   Le texte reste #ffd889 sur un fond ambre a 14 % pose sur l'encre du hero :
   contraste inchange, seule l'echelle bouge (.82rem au lieu du corps de base,
   padding 10/20). */
.hero .eyebrow{
  background:rgba(227,119,47,.14);color:#ffd889;
  border:1px solid rgba(227,119,47,.42);
  border-radius:100px;padding:10px 20px 10px 16px;
  display:inline-flex;align-items:center;gap:11px;
  font-size:.82rem;font-weight:600;letter-spacing:.11em;
}
.hero .eyebrow::before{
  display:block;content:"";width:8px;height:8px;border-radius:50%;
  background:var(--vf-accent);flex:none;
  animation:rvl-dot 2.6s ease-out infinite;
}
@keyframes rvl-dot{
  0%      {box-shadow:0 0 0 0 rgba(227,119,47,.65)}
  70%,100%{box-shadow:0 0 0 9px rgba(227,119,47,0)}
}
@media (max-width:560px){
  .hero .eyebrow{font-size:.74rem;padding:9px 16px 9px 13px;letter-spacing:.08em}
}
.hero h1{color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.4)}
.hero h1 span{color:var(--vf-accent)}
.hero__sub{color:rgba(233,240,247,.86)}

/* Le widget de devis a été retiré du hero : sans lui, .hero__grid gardait ses
   deux colonnes 1.15fr / .85fr et laissait 45 % de vide à droite. Une seule
   colonne, bornée : le texte ne doit pas non plus s'étaler sur toute la
   largeur du conteneur (~1425 px), ce qui donnerait des lignes de titre
   illisibles. .hero__sub garde son propre max-width:52ch. Modificateur plutôt
   que retouche de .hero__grid : remettre le widget = retirer cette classe. */
.hero__grid--solo{grid-template-columns:minmax(0,760px);align-items:start}

/* ---- hero : le formulaire, a gauche ----
   Une seule colonne bornee a 460px et alignee au debut de la grille : le
   formulaire occupe donc la gauche du hero, la video reste lisible a droite.
   .hero__grid--solo (accroche seule) est conserve juste au-dessus : les deux
   variantes coexistent, il suffit de changer la classe pour revenir en arriere. */
.hero__grid--form{grid-template-columns:minmax(0,340px);align-items:start}

/* ---- v2 (2026-08-18) : accroche A GAUCHE + formulaire A DROITE ----
   Troisieme variante, a cote de --solo et --form qui restent intactes.
   La colonne texte est bornee a 640px (lignes de titre lisibles), le
   formulaire garde ses 340-380px. align-items:center : les deux blocs
   n'ont pas la meme hauteur, un alignement en haut laisserait le titre
   flotter au-dessus du milieu du formulaire. Sous 1000px la regle de base
   .hero__grid{grid-template-columns:1fr} de style.css NE reprend PAS la
   main toute seule : home.css est charge apres style.css, la regle --duo
   ci-dessous gagnerait la cascade meme sous 1000px. D'ou la media query
   jumelle juste en dessous, obligatoire. */
.hero__grid--duo{grid-template-columns:minmax(0,640px) minmax(0,380px);justify-content:space-between;align-items:center;gap:56px}
@media (max-width:1000px){
  .hero__grid--duo{grid-template-columns:1fr;gap:32px}
}
.hero__pitch .eyebrow{margin-bottom:18px}
.hero__pitch h1{margin:0 0 18px}
.hero__pitch .hero__sub{margin:0}
.hero__pitch .hero__actions{margin-top:26px}
/* Les deux boutons de style.css sont penses pour fond clair : le .btn plein
   est encre-sur-encre (il se fond dans la video sombre), le fantome est
   encre-sur-transparent (invisible). Deux variantes, portee limitee au hero :
   primaire = ambre de marque (meme accent que la carte de rappel),
   secondaire = fantome blanc. */
.hero__actions .btn:not(.hero__ghost){background:var(--vf-accent);border-color:var(--vf-accent);color:#10151b}
.hero__actions .btn:not(.hero__ghost):hover{background:#ffc63a;border-color:#ffc63a;color:#10151b}
.hero__ghost{color:#fff;border-color:rgba(255,255,255,.55)}
.hero__ghost:hover{background:#fff;color:#10151b;border-color:#fff}

/* .94 et non .70 comme l'ancien widget : on saisit dans ces champs. La
   lisibilite d'un formulaire ne se negocie pas contre un effet de fond — la
   video reste visible tout autour, ce qui suffit a l'effet. */
/* ---- Carte de rappel du hero -------------------------------------------
   Refonte 2026-08-09 sur le modele fourni par le proprietaire. Le gain de
   hauteur ne vient pas de marges rognees mais d'une decision de structure :
   LES INTITULES SONT VISUELLEMENT MASQUES et le placeholder porte le nom du
   champ. On economise une ligne de texte + sa marge par champ (~23 px x 5),
   sans rien retirer a l'arbre d'accessibilite — chaque <label for> existe
   toujours et reste lu par un lecteur d'ecran.
   `clip-path` + 1px : le motif « sr-only » sur. Surtout PAS `display:none`
   ni `visibility:hidden`, qui retireraient l'intitule de l'accessibilite,
   ni `height:0;opacity:0` seul, que certains lecteurs sautent aussi. */
.hero-form{
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(10px) saturate(1.05);backdrop-filter:blur(10px) saturate(1.05);
  border:1px solid rgba(255,255,255,.6);border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.36);
  padding:16px 18px 14px;color:var(--vf-navy);
}
.hero-form__head{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.hero-form__ico{width:18px;height:18px;flex:none;stroke:var(--vf-accent-dark)}
.hero-form__t{margin:0;font-size:1.05rem;font-weight:800;color:var(--vf-navy);letter-spacing:-.01em}
.hero-form__d{margin:0 0 11px;font-size:.8rem;line-height:1.4;color:#3a444f}
.hero-form__lbl{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}
.hero-form__field{width:100%;height:40px;margin-bottom:8px;padding:0 11px;
  border:1.5px solid var(--vf-line);border-radius:8px;font:inherit;font-size:.9rem;
  font-weight:600;color:var(--vf-navy);background:#fff}
select.hero-form__field{cursor:pointer}
.hero-form__field:focus-visible{outline:2px solid var(--vf-accent);outline-offset:1px;border-color:var(--vf-accent)}
.hero-form__field[aria-invalid="true"]{border-color:#a3251b}
.hero-form__field::placeholder{color:#6b7480;opacity:1;font-weight:500}
.hero-form__err{margin:0 0 8px;font-size:.78rem;font-weight:600;color:#a3251b}
.hero-form__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.hero-form__cta{width:100%;margin-top:4px;height:42px;padding:0;border:0;border-radius:8px;
  background:var(--vf-accent);color:var(--vf-navy);font:inherit;font-size:.95rem;font-weight:800;
  cursor:pointer;transition:background .15s ease,transform .15s ease}
.hero-form__cta:hover:not(:disabled){background:#ffc63a;transform:translateY(-1px)}
.hero-form__cta:disabled{opacity:.65;cursor:progress}
.hero-form__note{display:flex;align-items:center;gap:6px;margin:9px 0 0;
  font-size:.72rem;line-height:1.4;color:#5a6470}
.hero-form__note svg{width:13px;height:13px;flex:none;stroke:currentColor}
.hero-form__tel{margin:7px 0 0;font-size:.74rem;line-height:1.4;color:#5a6470;text-align:center}
.hero-form__tel a{color:var(--vf-navy);font-weight:700;text-decoration:none;border-bottom:1.5px solid rgba(227,119,47,.9)}
.hero-form__tel a:hover{color:var(--vf-accent-dark)}
.hero-form__tel span{color:#9aa3ad}
.hero-form__ok{text-align:center;padding:10px 0 6px}
.hero-form__ok svg{width:32px;height:32px;stroke:var(--vf-accent-dark);margin-bottom:8px}
.hero-form__ok p{margin:0;font-size:.88rem;line-height:1.5}
.hero-form__ok strong{display:block;font-size:1rem;margin-bottom:3px}
@media (max-width:560px){
  .hero-form{padding:14px 14px 12px}
}

/* ---- #pitch : les trois univers ----
   Les logos sont de rapports tres differents (480x70, 760x123, 1011x349).
   Une hauteur commune avec object-fit:contain les met a la meme echelle
   optique sans jamais en deformer un seul. */
/* L'ambre des trois verbes etait porte par `.hero h1 span`. Le titre ayant
   quitte le hero pour #pitch, la regle ne le touchait plus et les verbes
   etaient repasses en encre. On la redeclare pour sa nouvelle adresse.
   Le titre reprend aussi l'echelle du hero : c'est toujours le titre de
   niveau 1 de la page, il ne doit pas se lire comme un titre de section. */
#pitch h1{font-size:clamp(30px,4vw,42px);line-height:1.1;letter-spacing:-1px;font-weight:900;margin-bottom:14px}
#pitch h1 span{color:var(--vf-accent)}
#pitch .section__head{margin-bottom:30px}
#pitch h1{text-wrap:balance}
#pitch .lead{max-width:none;text-wrap:pretty}

/* Accroche de #pitch — agrandie le 2026-08-09.
   Elle annonce la promesse de la page et se lisait en 11,5 px (.72rem),
   graisse 500, gris #5c6672 : 5,8:1, conforme mais fluet, juste au-dessus du
   seul <h1> du site. Elle passe a ~15,7 px, graisse 700 et encre pleine
   (#14181B sur blanc = 17,9:1), et son tiret ambre grandit avec elle
   (26x2 -> 38x3, arrondi) pour rester a l'echelle du texte.
   PORTEE A #pitch VOLONTAIREMENT : le site compte cinq autres familles de
   .eyebrow (sections, comparatif, #reperes-band, ventes-flash, hero) qui ont
   chacune leur echelle mesuree — les agrandir toutes ferait dix regressions
   pour une demande. Pas de flex-wrap ici : .eyebrow est un flex, le texte est
   un item anonyme qui se replie deja tout seul ; autoriser le retour a la
   ligne ferait descendre le TIRET sur sa propre ligne. */
#pitch .eyebrow{
  font-size:clamp(.86rem,1.05vw,.98rem);font-weight:700;letter-spacing:.12em;
  color:var(--vf-navy);gap:13px;margin-bottom:22px;
}
#pitch .eyebrow::before{width:38px;height:3px;border-radius:2px}
@media (max-width:560px){
  #pitch .eyebrow{font-size:.8rem;letter-spacing:.09em;gap:10px;margin-bottom:18px}
  #pitch .eyebrow::before{width:28px}
}
.univers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.univers__item{display:flex;flex-direction:column;background:#fff;border:var(--trait);border-radius:16px;padding:24px 22px;text-decoration:none;color:var(--encre);box-shadow:0 2px 10px rgba(18,33,47,.05);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.univers__item:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(18,33,47,.14);border-color:var(--vf-accent)}
.univers__logo{height:46px;width:auto;max-width:190px;object-fit:contain;object-position:left center;margin-bottom:16px}
.univers__t{margin:0 0 8px;font-size:1.08rem;font-weight:800;color:var(--vf-navy);letter-spacing:-.01em}
.univers__d{margin:0;font-size:.9rem;line-height:1.5;color:var(--encre-60)}
@media (max-width:900px){ .univers{grid-template-columns:1fr;gap:14px} .univers__logo{height:40px} }
@media (prefers-reduced-motion:reduce){ .univers__item:hover{transform:none} }
.hero__stats{border-color:rgba(255,255,255,.16)}
.hero__stats b{color:#fff}
.hero__stats span{color:rgba(233,240,247,.65)}

/* ---- bandeau de chiffres du hero : panneau, plus filets nus ----
   Portée volontairement à `.hero .hero__stats` : le MÊME bloc .hero__stats
   est réutilisé par #reperes-band, qui est déjà sur un aplat navy et n'a
   rien à recevoir de tout ceci.
   Le voile sombre n'est pas décoratif. Avant, le texte blanc reposait
   directement sur la vidéo : sur une image claire il n'avait plus aucun
   contraste garanti. À .68 d'encre, même sur une vidéo devenue BLANCHE, le
   fond effectif retombe à 95 — soit 6,4:1 pour les chiffres et 5,7:1 pour
   les libellés remontés à 92 % d'opacité. Le flou laisse la vidéo vivre
   derrière sans rendre la mesure caduque (il ne change pas la luminance
   moyenne).
   tabular-nums : pendant le comptage, les chiffres ne changent plus de
   largeur à chaque image, donc le libellé en dessous ne tremble pas. */
/* Compacte : le bandeau prenait trop de hauteur de page sur 2 rangees.
   Rien n'est supprime, tout est resserre — marge, gouttieres, corps du
   chiffre, tiret ambre : la hauteur du bloc tombe d'environ un tiers. */
.hero .hero__stats{
  margin-top:26px;padding:0;
  border:1px solid rgba(255,255,255,.14);border-radius:16px;
  background:rgba(20,24,27,.68);
  -webkit-backdrop-filter:blur(10px) saturate(1.05);backdrop-filter:blur(10px) saturate(1.05);
  overflow:hidden;
}
/* 6 chiffres, donc 3 colonnes sur 2 rangees (6 se divise proprement par 3
   puis par 2, aucune rangee orpheline a aucun palier).
   Les filets NE sont plus poses par des bordures + nth-child : a chaque
   changement du nombre de statistiques il fallait recalculer quel enfant
   termine sa rangee, et un filet restait plante au milieu du bandeau des
   qu'on se trompait. Ici chaque cellule dessine sa propre ligne a droite et
   en bas via box-shadow ; celles qui tombent sur le bord du panneau sont
   rognees par l'overflow:hidden du conteneur. Le rendu est donc correct
   quel que soit le nombre de cellules et le nombre de colonnes : ajouter ou
   retirer une statistique ne demande plus AUCUNE retouche CSS. */
.hero .hero__stats{grid-template-columns:repeat(3,1fr);padding:0}
.hero .hero__stats div{padding:13px 18px 12px;border:0;box-shadow:1px 0 0 rgba(255,255,255,.12),0 1px 0 rgba(255,255,255,.12)}
/* Le tiret ambre repris de l'idiome .eyebrow::before, masqué dans le hero
   (.hero .eyebrow::before{display:none}) : le repère revient ici. */
.hero .hero__stats div::before{content:"";display:block;width:18px;height:3px;border-radius:2px;background:var(--vf-accent);margin-bottom:7px}
.hero .hero__stats b{font-size:2.1rem;line-height:1.05;font-variant-numeric:tabular-nums;letter-spacing:-.01em;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.hero .hero__stats span{color:rgba(255,255,255,.92)}
/* Cette cellule-là seule : « R400 » n'est pas une quantité mais un code, et
   c'est le libellé qui porte l'information — « R400 et autorisation de
   conduite » se lit comme une phrase coupée en deux corps. Le libellé est
   donc agrandi pour rééquilibrer la cellule, et l'interlettrage réduit en
   compensation pour qu'il tienne toujours sur une ligne (27 caractères).
   Ciblé par une classe et non par nth-child : le jeu de statistiques a déjà
   changé trois fois aujourd'hui, un rang n'est pas une adresse stable. */
/* Le libellé passe dans le corps du CHIFFRE, pas dans celui des libellés :
   « R400 » n'est pas une quantité mais un code, et « R400 et autorisation de
   conduite d'engins » se lit comme une seule phrase — la couper en 2,9rem
   puis 0,7rem en cassait le sens. Même famille, même graisse, même blanc que
   le <b>, à une taille qui tient dans la cellule (~427px utiles) : au corps
   du <b> lui-même, la phrase déborderait sur quatre lignes et étirerait
   toute la rangée. Casse normale conservée : une phrase de 35 signes en
   capitales ne se lit plus. */
.hero .hero__stats .stat--phrase span{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;
  font-size:1.12rem;line-height:1.2;letter-spacing:0;text-transform:none;
  color:#fff;margin-top:2px;
}
@media (max-width:900px){ .hero .hero__stats .stat--phrase span{font-size:1.05rem} }
@media (max-width:900px){ .hero .hero__stats{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .hero .hero__stats{grid-template-columns:1fr} }

.hero .btn--ghost{border-color:rgba(255,255,255,.5);color:#fff}

/* ---- l'unique appel a l'action du hero : plus gros, et pulsant ----
   Pulsation par HALO qui s'ecarte, pas par clignotement d'opacite : un vrai
   clignotement du texte le rend illisible par intermittence et tombe sous le
   critere WCAG 2.3.1 des que la frequence monte. Ici le libelle reste opaque
   et parfaitement stable, seule l'aureole bouge, a ~0,4 Hz.
   Le survol met la pulsation en pause : une fois le visiteur dessus, elle a
   fait son travail et ne fait plus que distraire.
   La regle globale @media (prefers-reduced-motion:reduce){*{animation:none}}
   de style.css desactive deja tout ceci pour qui l'a demande — le bouton
   garde alors sa taille et son contraste, il ne perd rien d'utile. */
/* Capitales posées par le CSS, pas écrites dans le HTML : le libellé reste
   « Créer mon compte entreprise et générer mon devis » dans le document, donc
   c'est cette forme-là qui est annoncée par un lecteur d'écran et copiée par
   le visiteur — les capitales ne sont qu'un rendu. text-transform gère les
   accents (é → É), contrairement à une saisie manuelle où ils se perdent
   souvent. Le letter-spacing est indispensable : une longue chaîne en
   capitales sans interlettrage se lit comme un bloc.
   Taille légèrement réduite (1.18 → 1.06rem) parce que les capitales sont
   ~10 % plus larges : à 1.18rem la ligne débordait le conteneur du hero. */
.hero .hero__actions .btn--loc{
  font-size:1.06rem;font-weight:800;padding:19px 34px;line-height:1.2;
  text-transform:uppercase;letter-spacing:.045em;
  animation:rvl-cta-pulse 2.4s ease-in-out infinite;
}
/* Trois couches de mouvement, toutes sur des proprietes composees (transform,
   opacity, box-shadow) : aucune ne declenche de recalcul de mise en page, donc
   aucune ne fait tomber d'images.
   1. le halo qui s'ecarte, deja en place ;
   2. un reflet qui traverse le bouton toutes les 5 s — c'est lui qui accroche
      l'oeil sans repeter la meme pulsation ;
   3. au survol, une legere elevation, et les deux boucles se mettent en pause :
      une fois le visiteur dessus, l'animation a fait son travail.
   overflow:hidden borne le reflet au bouton ; position:relative ancre le
   pseudo-element. */
.hero .hero__actions .btn--loc{position:relative;overflow:hidden;isolation:isolate}
.hero .hero__actions .btn--loc::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;z-index:-1;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);
  transform:skewX(-18deg);
  animation:rvl-cta-shine 5s ease-in-out infinite;
}
@keyframes rvl-cta-shine{
  0%,62%  {left:-60%}
  92%,100%{left:130%}
}
.hero .hero__actions .btn--loc:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(227,119,47,.85)}
.hero .hero__actions .btn--loc:hover,
.hero .hero__actions .btn--loc:focus-visible{animation-play-state:paused}
.hero .hero__actions .btn--loc:hover::after,
.hero .hero__actions .btn--loc:focus-visible::after{animation-play-state:paused}
.hero .hero__actions .btn--loc:active{transform:translateY(0)}
@keyframes rvl-cta-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(227,119,47,.55)}
  55%    {box-shadow:0 0 0 16px rgba(227,119,47,0)}
}
@media (max-width:560px){
  .hero .hero__actions .btn--loc{font-size:.92rem;padding:17px 18px;width:100%;text-align:center;letter-spacing:.03em}
}
.hero .btn--ghost:hover{background:#fff;color:var(--vf-navy)}
/* ---- quick-quote: hero-embedded location quote widget, matching the
   real forma-force.fr/entreprises/ "Votre besoin en location" card —
   lets visitors start a devis without leaving the page. Submits by
   prefilling devis.html via URL params (?u=location&ref=&duree=&op=),
   reusing the real existing quote engine — no new backend needed. ---- */
/* Translucide : la carte masquait entièrement la vidéo du hero derrière elle.
   .70 — descendu depuis .86 sur demande. Le plancher n'est pas esthétique, il
   se calcule sur le PIRE cas : si la vidéo passe au noir sous la carte, le fond
   effectif vaut 0.70×255 = 178, et c'est le petit texte secondaire qui décide.
   À ce fond, il faut une couleur de luminance ≤ 0.061 pour tenir 4,5:1 ; d'où
   #3a444f, redéclaré plus bas (4,7:1 dans ce pire cas, 7,4:1 sur vidéo claire).
   Le flou ne change rien à ce calcul — il ne modifie pas la luminance moyenne
   du fond — il empêche seulement un détail contrasté de traverser le texte.
   Descendre encore imposerait de passer TOUT le texte en navy : à .51 le navy
   lui-même atteint sa limite, et il n'y a plus de marge du tout. */
.quick-quote{background:rgba(255,255,255,.70);-webkit-backdrop-filter:blur(9px) saturate(1.08);backdrop-filter:blur(9px) saturate(1.08);color:var(--vf-navy);border:1px solid rgba(255,255,255,.5);border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.3);padding:26px 26px 22px}
.quick-quote__tag{display:inline-block;background:var(--vf-accent);color:var(--vf-navy);font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:5px 11px;border-radius:999px;margin-bottom:14px}
.quick-quote__t{margin:0 0 4px;font-size:1.25rem;font-weight:900;color:var(--vf-navy)}
.quick-quote__d{margin:0 0 18px;font-size:.85rem;color:var(--vf-muted)}
.quick-quote__label{display:block;font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--vf-muted);margin:14px 0 6px}
.quick-quote__select{width:100%;padding:11px 12px;border:1.5px solid var(--vf-line);border-radius:10px;font-size:.92rem;font-weight:600;color:var(--vf-navy);background:#fff;cursor:pointer}
.quick-quote__toggle{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.quick-quote__toggle button{padding:10px 8px;border:1.5px solid var(--vf-line);border-radius:10px;background:#fff;color:var(--vf-navy);font-size:.85rem;font-weight:700;cursor:pointer;transition:all .15s ease}
.quick-quote__toggle button.is-active{background:var(--vf-accent-soft);border-color:var(--vf-accent);color:var(--vf-accent-dark)}
.quick-quote__cta{width:100%;margin-top:20px;padding:14px;border:0;border-radius:10px;background:var(--vf-accent);color:var(--vf-navy);font-size:.95rem;font-weight:800;cursor:pointer;transition:background .15s ease,transform .15s ease}
.quick-quote__cta:hover{background:#ffc63a;transform:translateY(-1px)}
.quick-quote__note{margin:12px 0 0;text-align:center;font-size:.72rem;color:var(--vf-muted)}
/* Doit rester APRÈS les trois règles ci-dessus : même spécificité, c'est la
   dernière déclarée qui gagne. Voir le calcul de contraste sur .quick-quote. */
.quick-quote__d,.quick-quote__label,.quick-quote__note{color:#3a444f}
/* Les champs suivent la carte au lieu de rester des blocs blancs opaques
   posés dessus, mais à .92 : ils restent lisibles comme des champs, et le
   texte saisi conserve un fond quasi blanc (249 sur vidéo noire). */
.quick-quote__select,.quick-quote__toggle button{background:rgba(255,255,255,.92)}
@media (max-width:980px){ .quick-quote{margin-top:24px} }

/* ---- sections: white/panel throughout, drop béton entirely ---- */
.section{background:transparent}
.section--pale{background:var(--vf-panel)}
.eyebrow{color:var(--vf-muted)}
.eyebrow::before{background:var(--vf-accent)}
.lead{color:var(--vf-muted)}
h2,h3,h4{color:var(--vf-navy)}

/* ---- cards ("trois univers", tarifs): rounder, lighter-bordered, ventes-flash card language ---- */
.card{border-radius:16px;border-color:var(--vf-line);box-shadow:0 1px 2px rgba(16,20,24,.05)}
.card--espace:hover{box-shadow:0 16px 40px rgba(16,20,24,.10);border-color:#d3d9df}

/* ---- catalogue rows: full ventes-flash .row treatment (rounder, bigger radius/shadow, hover lift) ---- */
.catrow{border-radius:16px;border-color:var(--vf-line);box-shadow:0 1px 2px rgba(16,20,24,.05);padding:20px 24px}
.catrow:hover{box-shadow:0 16px 40px rgba(16,20,24,.10);border-color:#d3d9df}
.catrow__media{width:160px;height:130px;border-radius:14px}
.catrow:has(.catrow__media){grid-template-columns:160px 1fr auto;gap:24px}
.catrow__id{color:var(--vf-muted)}
.catrow__t{color:var(--vf-navy);text-transform:none;font-size:1.3rem}
.catrow__sub{color:var(--vf-muted)}
.catbtn{border-radius:10px;border-width:0}
@media (max-width:820px){
  .catrow:has(.catrow__media){grid-template-columns:1fr}
  .catrow__media{width:100%;height:150px;border-radius:14px 14px 0 0}
}

/* ---- category photo cards: the full-bleed ventes-flash "cats" pattern,
   using REVALOCA's own real machine photos + per-family colors. ---- */
/* 3-col fixed grid (not auto-fit) so 6 cards form clean 2 rows of 3
   instead of an awkward 5+1 leftover row; bigger min-height per explicit
   "bigger pics" feedback. */
.cat-grid{display:grid;gap:20px;grid-template-columns:repeat(3,1fr)}
.cat-card{position:relative;display:block;overflow:hidden;border-radius:16px;min-height:340px;text-decoration:none;color:#fff;box-shadow:0 10px 26px rgba(18,33,47,.16);isolation:isolate;transition:transform .3s ease,box-shadow .3s ease}
@media (max-width:980px){ .cat-grid{grid-template-columns:repeat(2,1fr)} .cat-card{min-height:300px} }
@media (max-width:620px){ .cat-grid{grid-template-columns:1fr} }
.cat-card .ph{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.02);transition:transform .5s ease}
/* R485/486/487/490 are isolated product renders on white (not full-scene
   photos like R482/489) — cover+center crops the machine out entirely on a
   wide card. Show the whole product instead, matching how ventes-flash's
   own .thumb rows treat these same source images. */
.cat-card[data-fam=r485] .ph,.cat-card[data-fam=r486] .ph,.cat-card[data-fam=r487] .ph,.cat-card[data-fam=r490] .ph{background-size:contain;background-position:center 40%;background-repeat:no-repeat;background-color:#eef1f4;transform:scale(1)}
.cat-card[data-fam=r485]:hover .ph,.cat-card[data-fam=r486]:hover .ph,.cat-card[data-fam=r487]:hover .ph,.cat-card[data-fam=r490]:hover .ph{transform:scale(1.06)}
@media (prefers-reduced-motion:reduce){ .cat-card[data-fam=r485]:hover .ph,.cat-card[data-fam=r486]:hover .ph,.cat-card[data-fam=r487]:hover .ph,.cat-card[data-fam=r490]:hover .ph{transform:scale(1)} }
.cat-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,20,30,.10) 0%,rgba(11,20,30,.32) 45%,rgba(11,20,30,.88) 100%)}
.cat-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(18,33,47,.24)}
.cat-card:hover .ph{transform:scale(1.09)}
.cat-card .body{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:18px;gap:6px}
.cat-card .ref{align-self:flex-start;color:#fff;font-weight:800;font-size:13px;letter-spacing:.4px;padding:5px 11px;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.cat-card[data-fam=r482] .ref{background:#A96727}
.cat-card[data-fam=r485] .ref{background:#2F6FED}
.cat-card[data-fam=r486] .ref{background:#1B8666}
.cat-card[data-fam=r487] .ref{background:#8655F6}
.cat-card[data-fam=r489] .ref{background:var(--vf-accent);color:var(--vf-navy)}
.cat-card[data-fam=r490] .ref{background:#0F8577}
.cat-card .t{font-size:18px;font-weight:800;line-height:1.2;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.cat-card .d{font-size:13px;color:rgba(255,255,255,.85);text-shadow:0 1px 6px rgba(0,0,0,.5)}
@media (prefers-reduced-motion:reduce){ .cat-card .ph{transition:none} .cat-card:hover .ph{transform:scale(1.02)} .cat-card{transition:none} }

/* NOTE 2026-08-09 : la section #parc-photos qui utilisait .cat-grid /
   .cat-card a été retirée d'index.html. Le bloc ci-dessus est donc
   INUTILISÉ pour l'instant — conservé tel quel pour que la remise en
   place de la section soit un copier-coller, sans rien réécrire. */

/* ---- tarif cards: give the same rounded/lifted product-card feel ---- */
#tarifs .card{padding:26px}

/* ---- comparatif: dark card matching the real forma-force.fr comparison
   table (navy bg, amber-highlighted "FORMAFORCE® Intra" column, green
   checkmarks) instead of a plain white HTML table. ---- */
.comparatif{background:var(--vf-navy);border-radius:20px;padding:36px 32px}
.comparatif__head{max-width:60ch;margin:0 auto 28px;text-align:center}
.comparatif__head .eyebrow{background:rgba(227,119,47,.16);color:#ffd889;border:1px solid rgba(227,119,47,.35);border-radius:100px;padding:6px 13px;display:inline-flex;font-size:.68rem}
.comparatif__head .eyebrow::before{display:none}
.comparatif__head h3{color:#fff;margin:14px 0 10px}
.comparatif__head .lead{color:rgba(233,240,247,.7)}
.comparatif table.tbl{background:transparent;border:1px solid rgba(255,255,255,.12);border-radius:14px}
.comparatif table.tbl th,.comparatif table.tbl td{border-color:rgba(255,255,255,.1)}
.comparatif table.tbl thead th{background:rgba(255,255,255,.04);color:rgba(233,240,247,.55);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.comparatif table.tbl tbody td:first-child{color:#fff;font-weight:600}
.comparatif table.tbl tbody td:not(:first-child){color:rgba(233,240,247,.55)}
.comparatif table.tbl thead th:nth-child(2),.comparatif table.tbl tbody td:nth-child(2){background:rgba(227,119,47,.14);color:#ffd889;font-weight:800}
.comparatif table.tbl thead th:nth-child(2){color:var(--vf-navy);background:var(--vf-accent)}
.comparatif__note{font-size:.75rem;color:rgba(233,240,247,.45);margin-top:14px;text-align:center}

/* ---- certs: 2-col grid + wide third row, matching the real ventes-flash
   cert-grid layout, download button using ventes-flash's cert-dl treatment ---- */
.certs{grid-template-columns:1fr 1fr}
.cert{border-radius:16px;padding:20px 22px}
.cert--wide{grid-column:1/-1}
/* Logos nettement agrandis (110x74 -> 200x134, +82 %) : ce sont des marques
   de confiance officielles, c'est ce que le visiteur cherche a reconnaitre
   d'un coup d'oeil, et elles etaient reduites a une vignette.
   object-fit:contain : les trois fichiers n'ont pas le meme rapport (Qualiopi
   et AFNOR sont presque carres, Assurance Maladie est tres large) — la boite
   est commune, l'image se loge dedans sans jamais etre etiree ni recadree.
   Le fond blanc et le padding viennent de style.css et restent : les trois
   logos sont concus pour du blanc, pas pour le gris du panneau. */
.cert__logo{width:200px;height:134px;border-radius:12px;object-fit:contain;padding:10px}
@media (max-width:900px){ .cert__logo{width:170px;height:114px} }
@media (max-width:560px){ .cert__logo{width:100%;height:120px} }
.cert__ref{display:inline-block;font-size:.75rem;font-weight:700;color:var(--vf-accent-dark);background:var(--vf-accent-soft);padding:3px 10px;border-radius:6px;margin-top:4px}
.cert-dl{flex:none;margin-left:auto}
.cert-dl a{display:inline-flex;align-items:center;gap:7px;background:var(--vf-navy);color:#fff;text-decoration:none;font-size:13px;font-weight:700;padding:11px 16px;border-radius:9px;transition:background .15s ease;white-space:nowrap}
.cert-dl a:hover{background:var(--vf-accent-dark)}
@media (max-width:860px){
  .certs{grid-template-columns:1fr}
  .cert-dl{margin-left:0;width:100%}
  .cert-dl a{width:100%;justify-content:center}
}

/* ---- certificate example: the real FORMAFORCE® template images (recto/
   verso), already hazard-striped and clearly non-nominative ("M. Stagiaire
   Modeste") — same real document a REVALOCA Formation-univers stagiaire
   actually receives, so no extra framing needed beyond a lift/shadow. ---- */
/* #certificat-exemple n'existe plus : son contenu a rejoint #certifications
   le 2026-08-09 (bloc unique certifications + specimen CACES). Les regles
   ci-dessous suivent le nouvel id ; .cert-mock-grid / .cert-mock plus bas
   servent toujours, elles habillent le specimen. */
#certifications .cert-mock-grid{margin-top:24px}
#certifications .certs__sub{font-size:clamp(19px,2.2vw,25px);margin:0 0 8px}
.cert-mock-grid{display:grid;gap:22px;grid-template-columns:1fr 1fr}
.cert-mock{position:relative}
.cert-mock img{width:100%;height:auto;display:block;border-radius:14px;box-shadow:0 10px 26px rgba(18,33,47,.16)}
.cert-mock__badge{position:absolute;top:-10px;left:16px;z-index:2;background:var(--vf-navy);color:#fff;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:4px 11px;border-radius:999px}
@media (max-width:700px){ .cert-mock-grid{grid-template-columns:1fr} }

/* ---- repères tarifaires band: navy, matches ventes-flash's trust "band" ----
   Anciennement ciblée par "#certificat-exemple + .section". L'exemple de
   certificat a été remonté au-dessus de #catalogue : le sélecteur adjacent
   habillait donc la mauvaise section (il aurait passé #catalogue en navy et
   rendu la bande blanche). On cible désormais la bande par son propre id. */
#reperes-band{background:var(--vf-navy);padding:32px 0}
#reperes-band .eyebrow{color:rgba(255,255,255,.6)}
#reperes-band .eyebrow::before{background:var(--vf-accent)}
#reperes-band .hero__stats{border-color:rgba(255,255,255,.14)}
#reperes-band .hero__stats b{color:#fff}
#reperes-band .hero__stats span{color:rgba(255,255,255,.6)}

/* ---- Détail par catégorie: full sub-category breakdown (all "singles"),
   matching the reference's exact row card (square badge, photo, tag,
   CTA). One deliberate substitution: the reference shows a per-category
   "tarif barré / vente flash" discount price — that's FormaForce's D2C
   per-person exam-booking model. REVALOCA prices per DAY regardless of
   how many categories are trained (999€/1500€ HT, up to 8-10 stagiaires),
   so a fake per-category discount would misrepresent the real pricing.
   Shown instead: an honest "inclus dans le tarif jour" badge, same visual
   weight/color as the reference's price column. ---- */
.cat-fam-head{display:flex;align-items:center;gap:14px;margin:36px 0 16px}
.cat-fam-head:first-of-type{margin-top:8px}
.cat-fam-badge{display:inline-flex;align-items:center;justify-content:center;min-width:64px;height:36px;padding:0 12px;border-radius:8px;color:#fff;font-weight:800;font-size:.95rem}
.cat-fam-badge[data-fam=r482]{background:#A96727}
.cat-fam-badge[data-fam=r485]{background:#2F6FED}
.cat-fam-badge[data-fam=r486]{background:#1B8666}
.cat-fam-badge[data-fam=r487]{background:#8655F6}
.cat-fam-badge[data-fam=r489]{background:var(--vf-accent);color:var(--vf-navy)}
.cat-fam-badge[data-fam=r490]{background:#0F8577}
.cat-fam-head h3{margin:0;font-size:1.3rem}

.vf-rows{display:flex;flex-direction:column;gap:14px}
.vf-row{display:grid;grid-template-columns:64px 176px 1fr auto auto;gap:20px;align-items:center;background:#fff;border:1px solid var(--vf-line);border-radius:16px;padding:18px 22px;box-shadow:0 1px 2px rgba(16,20,24,.05);transition:box-shadow .2s ease,transform .2s ease}
.vf-row:hover{box-shadow:0 16px 40px rgba(16,20,24,.10);transform:translateY(-2px)}
.vf-row__badge{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;height:64px;border-radius:12px;color:#fff;font-weight:800}
.vf-row__badge .pre{font-size:.6rem;letter-spacing:.12em;opacity:.85}
.vf-row__badge .ref{font-size:1.05rem}
.vf-row[data-fam=r482] .vf-row__badge{background:#A96727}
.vf-row[data-fam=r485] .vf-row__badge{background:#2F6FED}
.vf-row[data-fam=r486] .vf-row__badge{background:#1B8666}
.vf-row[data-fam=r487] .vf-row__badge{background:#8655F6}
.vf-row[data-fam=r489] .vf-row__badge{background:var(--vf-accent);color:var(--vf-navy)}
.vf-row[data-fam=r490] .vf-row__badge{background:#0F8577}
.vf-row__thumb{width:176px;height:124px;border-radius:12px;overflow:hidden;background:#fff;border:1px solid var(--vf-line)}
.vf-row__thumb img{width:100%;height:100%;object-fit:contain;display:block;padding:6px;box-sizing:border-box}
.vf-row__thumb.is-empty{display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;text-align:center;color:var(--vf-muted);background:var(--vf-panel);border:1px dashed var(--vf-line);text-transform:uppercase;letter-spacing:.03em;padding:8px}
.vf-row__name{font-size:1.05rem;font-weight:800;color:var(--vf-navy)}
.vf-row__name .tag{display:inline-block;font-size:.72rem;font-weight:700;color:var(--vf-accent-dark);background:var(--vf-accent-soft);padding:3px 9px;border-radius:6px;margin-left:8px;vertical-align:middle}
.vf-row__desc{font-size:.85rem;color:var(--vf-muted);margin:5px 0 0;max-width:46ch}
.vf-row__incl{text-align:right;font-size:.78rem;font-weight:700;color:var(--emploi-txt);white-space:nowrap;padding-left:16px;border-left:1px solid var(--vf-line)}
.vf-row__cta a{display:inline-block;background:var(--vf-navy);color:#fff;text-decoration:none;font-size:13.5px;font-weight:700;padding:11px 18px;border-radius:10px;white-space:nowrap;transition:background .15s ease}
.vf-row__cta a:hover{background:var(--vf-accent-dark)}
.vf-combo-note{background:var(--vf-accent-soft);border:1px solid rgba(227,119,47,.4);border-radius:12px;padding:12px 18px;font-size:.86rem;color:var(--vf-accent-dark);margin:6px 0 0}
@media (max-width:900px){
  .vf-row{grid-template-columns:56px 1fr;grid-template-areas:"badge thumb" "info info" "incl cta";row-gap:12px}
  .vf-row__badge{grid-area:badge}
  .vf-row__thumb{grid-area:thumb;width:100%;height:140px}
  .vf-row__info{grid-area:info}
  .vf-row__incl{grid-area:incl;text-align:left;border-left:0;padding-left:0}
  .vf-row__cta{grid-area:cta}
}

/* ---- packs multi-catégories: ventes-flash's multi-photo pack cards,
   adapted to REVALOCA's real day-rate model (no fake per-pack discount —
   same 999 €/jour flat regardless of how many categories are combined).
   Sizing/animation language matched to the real ventes-flash export
   (page_offre_flash_v2_embed.html): 218×150 photo boxes, pulsing featured
   row, full-width recommended ribbon — only the price mechanic differs,
   since REVALOCA has no per-pack discount to show. ---- */
.pack-rows{display:flex;flex-direction:column;gap:18px}
.pack-card{position:relative;display:grid;grid-template-columns:64px 218px 1fr auto auto;gap:22px;align-items:center;background:#fff;border:1px solid var(--vf-line);border-radius:16px;padding:20px 24px;box-shadow:0 1px 2px rgba(16,20,24,.05);transition:box-shadow .2s ease,transform .2s ease}
.pack-card:hover{box-shadow:0 16px 40px rgba(16,20,24,.10);transform:translateY(-2px)}
.pack-card--reco{border:2px solid var(--vf-accent);padding-top:46px;animation:pack-reco-pulse 3.2s cubic-bezier(.45,0,.55,1) infinite}
@keyframes pack-reco-pulse{0%,100%{border-color:var(--vf-accent);box-shadow:0 1px 2px rgba(16,20,24,.04)}50%{border-color:#ffd889;box-shadow:0 14px 38px rgba(246,180,25,.38)}}
.pack-reco{position:absolute;top:0;left:0;right:0;overflow:hidden;text-align:center;background:linear-gradient(120deg,#e8930a 0%,#f6b419 35%,#ffd889 65%,#f6b419 100%);color:#3a2600;font-size:.85rem;font-weight:900;letter-spacing:.02em;padding:10px 12px;border-radius:14px 14px 0 0;box-shadow:0 2px 10px rgba(232,147,10,.25)}
.pack-reco::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.7) 50%,rgba(255,255,255,0) 60%);background-size:220% 100%;background-position:220% 0;animation:pack-reco-shimmer 3.4s cubic-bezier(.45,0,.55,1) infinite;pointer-events:none}
.pack-reco .star{display:inline-block;color:#e8511d;animation:pack-reco-twinkle 2.4s ease-in-out infinite}
@keyframes pack-reco-shimmer{0%{background-position:220% 0}100%{background-position:-220% 0}}
@keyframes pack-reco-twinkle{0%,100%{transform:scale(1) rotate(0deg)}50%{transform:scale(1.3) rotate(14deg)}}
.pack-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;height:64px;border-radius:12px;color:#fff;font-weight:800;background:linear-gradient(155deg,#1c2126,var(--vf-navy));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 3px 10px rgba(20,24,27,.25)}
.pack-badge .pre{font-size:.6rem;letter-spacing:.12em;opacity:.85}
.pack-badge .ref{font-size:1.05rem}
.pack-card[data-fam=r482] .pack-badge{background:linear-gradient(155deg,#A96727,#905821);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 3px 10px rgba(201,122,46,.35)}
.pack-card[data-fam=r485] .pack-badge{background:linear-gradient(155deg,#2F6FED,#1358DE);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 3px 10px rgba(47,111,237,.35)}
.pack-card[data-fam=r486] .pack-badge{background:linear-gradient(155deg,#1B8666,#177257);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 3px 10px rgba(39,192,147,.35)}
.pack-card[data-fam=r487] .pack-badge{background:linear-gradient(155deg,#8655F6,#6426F4);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 3px 10px rgba(139,92,246,.35)}
.pack-card[data-fam=r489] .pack-badge{background:linear-gradient(155deg,#ffc63a,var(--vf-accent));color:var(--vf-navy);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 3px 10px rgba(227,119,47,.35)}
.pack-card[data-fam=r490] .pack-badge{background:linear-gradient(155deg,#0F8577,#0D7165);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 3px 10px rgba(18,165,148,.35)}
.pack-thumb{width:218px;height:150px;border-radius:12px;overflow:hidden;background:#eef1f4;border:1px solid var(--vf-line);cursor:zoom-in;display:grid;gap:4px;padding:4px}
.pack-thumb img{width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;background:#fff;display:block;padding:3px;box-sizing:border-box}
.pack-thumb.is-empty{display:flex;align-items:center;justify-content:center;font-size:2.6rem;color:var(--vf-line);background:var(--vf-panel);cursor:default}
.pg2{grid-template-columns:1fr 1fr}
.pg3{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.pg3 img:nth-child(3){grid-column:1/3}
.pg4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.pg5{grid-template-columns:repeat(6,1fr);grid-template-rows:1fr 1fr}
.pg5 img:nth-child(1){grid-column:1/3}.pg5 img:nth-child(2){grid-column:3/5}.pg5 img:nth-child(3){grid-column:5/7}
.pg5 img:nth-child(4){grid-column:1/4}.pg5 img:nth-child(5){grid-column:4/7}
.pack-info__t{font-size:1.05rem;font-weight:800;color:var(--vf-navy)}
.pack-info__t .tag{display:inline-block;font-size:.72rem;font-weight:700;color:var(--vf-accent-dark);background:var(--vf-accent-soft);padding:3px 9px;border-radius:6px;margin-left:8px;vertical-align:middle}
.pack-card[data-fam=r489] .pack-info__t .tag{color:var(--vf-accent-dark);background:var(--vf-accent-soft)}
.pack-card[data-fam=r482] .pack-info__t .tag{color:#9A5E23;background:rgba(201,122,46,.14)}
.pack-card[data-fam=r485] .pack-info__t .tag{color:#1C62EB;background:rgba(47,111,237,.12)}
.pack-card[data-fam=r486] .pack-info__t .tag{color:#157D60;background:rgba(39,192,147,.14)}
.pack-card[data-fam=r487] .pack-info__t .tag{color:#7A45F5;background:rgba(139,92,246,.12)}
.pack-card[data-fam=r490] .pack-info__t .tag{color:#0D796D;background:rgba(18,165,148,.14)}
.pack-info__d{font-size:.85rem;color:var(--vf-muted);margin:5px 0 0;max-width:52ch}
.pack-cta{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.pack-cta__k{font-size:.65rem;text-transform:uppercase;letter-spacing:.04em;color:var(--vf-muted);font-weight:700}
.pack-cta__price{font-size:2.15rem;font-weight:900;line-height:1;white-space:nowrap;color:#B06308;animation:pack-price-pop 1.3s ease-in-out infinite;will-change:transform}
.pack-cta__unit{font-size:.68rem;color:var(--vf-muted);white-space:nowrap;margin-top:2px}
@keyframes pack-price-pop{0%,100%{color:#B06308;text-shadow:0 0 0 rgba(216,121,10,0);transform:scale(1)}50%{color:#D8790A;text-shadow:0 0 18px rgba(216,121,10,.55);transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){ .pack-cta__price{animation:none} .pack-card--reco{animation:none} .pack-reco::after,.pack-reco .star{animation:none} }
.pack-book{display:flex;flex-direction:column;gap:7px;align-items:stretch}
.pack-book a{display:inline-block;background:var(--vf-navy);color:#fff;text-decoration:none;font-size:13.5px;font-weight:700;padding:11px 20px;border-radius:10px;white-space:nowrap;text-align:center;box-shadow:0 3px 10px rgba(20,24,27,.18);transition:background .2s ease,box-shadow .2s ease,transform .15s ease}
.pack-book a:hover{background:#B06308;box-shadow:0 6px 18px rgba(194,106,8,.32);transform:translateY(-1px)}
.pack-book a.soft{background:#fff;color:var(--vf-navy);border:1.5px solid var(--vf-line);font-size:12px;padding:8px 14px;box-shadow:none}
.pack-book a.soft:hover{border-color:#B06308;color:#906909;background:var(--vf-accent-soft);transform:translateY(-1px)}
@media (max-width:900px){
  .pack-card{grid-template-columns:56px 1fr;grid-template-areas:"badge thumb" "info info" "cta cta";row-gap:12px}
  .pack-badge{grid-area:badge}
  .pack-thumb{grid-area:thumb;width:100%;height:170px}
  .pack-info{grid-area:info}
  .pack-cta{grid-area:cta;text-align:left;align-items:flex-start;flex-direction:row;justify-content:space-between}
}

/* ---- pack photo lightbox: click a pack's thumb grid to see every
   combined machine full-size, matching ventes-flash's own click-to-zoom. ---- */
.ff-lb{position:fixed;inset:0;background:rgba(11,20,30,.88);z-index:9999;display:none;align-items:center;justify-content:center}
.ff-lb.is-open{display:flex}
.ff-lb-box{display:flex;gap:16px;flex-wrap:wrap;max-width:92vw;max-height:88vh;align-items:center;justify-content:center}
.ff-lb-box img{max-width:min(40vw,420px);max-height:80vh;background:#fff;border-radius:16px;padding:12px;object-fit:contain;box-shadow:0 24px 70px rgba(0,0,0,.5)}
.ff-lb-x{position:absolute;top:18px;right:24px;width:48px;height:48px;padding:0;border-radius:50%;border:0;background:#fff;color:var(--vf-navy);font-size:28px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.3)}
.ff-lb-x:hover{background:var(--vf-accent-dark);color:#fff}
@media (max-width:700px){ .ff-lb-box img{max-width:82vw} }

/* ---- footer: already dark/4-col, just align type scale a touch ---- */
footer.bas{background:var(--vf-navy)}

/* ============================================================
   PORTAGE « ventes-flash » — round 9 (2026-08-09)
   Source lue : idppe.com/ventes-flash (compte adminidppe, NON modifié).
   Objet : donner à la moitié basse de l'accueil — #catalogue,
   #categories-detail, #packs, #tarifs, puis la bande et le pied déjà
   conformes — la MISE EN FORME et les EFFETS de cette page-là.
   Rien du CONTENU d'IDPPE n'est repris : ni prix (IDPPE vend des places
   de formation à l'unité, REVALOCA facture un forfait jour, loue du
   matériel et vend des accès CVthèque), ni téléphone, ni WhatsApp, ni
   lien .html / forma-force.fr / idppe.com. Les libellés, tarifs,
   référentiels et mentions légales de REVALOCA sont intacts.

   PORTÉE — tout est préfixé « .vflash », classe que seules les quatre
   sections de index.html portent. Surtout PAS l'id de section :
   entreprises.html a lui aussi un #catalogue et un #packs, et partage
   .catrow / .catbtn / .pack-card / .pack-thumb / .pack-badge /
   .pack-book / .pack-cta / .pg2-5 / .ff-lb. Une règle sur ces
   sélecteurs nus, ou sur ces ids, aurait repeint entreprises.html.
   Les règles d'origine plus haut dans ce fichier ne sont donc PAS
   retouchées : elles continuent d'habiller entreprises.html à
   l'identique, et ce bloc-ci ne fait que passer par-dessus sur
   l'accueil (spécificité supérieure + déclaré après).
   ============================================================ */

/* ---- 1. intertitres de section : la pastille pleine posée EN LIGNE
   avec le titre, idiome .sec-head de la source (chip 11,5px/900 blanc
   sur aplat, rayon 7px, puis h2 21px/900). Le chapeau .lead repasse à
   la ligne (flex-basis:100%) : il ne fait pas partie de l'idiome de la
   source mais c'est du contenu REVALOCA, il reste. ---- */
/* Grille et NON flex : en flex, `flex-basis:100%` sur le chapeau ne suffit
   pas à le renvoyer à la ligne — la taille hypothétique est d'abord bornée
   par son propre max-width (78ch ≈ 629px), donc il retenait sur la ligne du
   titre. Deux rangées explicites : pastille + titre en 1, chapeau en 2. */
.vflash .section__head{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:center;column-gap:11px;max-width:none;margin-bottom:22px;
}
.vflash .section__head h2{grid-column:2;grid-row:1;justify-self:start;margin:0}
.vflash .section__head .lead{grid-column:1/-1;grid-row:2;margin:8px 0 0;font-size:14.5px;max-width:78ch}
.vflash .section__head .eyebrow,
.vflash .section__head .badge{
  grid-column:1;grid-row:1;justify-self:start;
  display:inline-block;margin:0;
  font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:11.5px;font-weight:900;letter-spacing:.4px;text-transform:uppercase;
  line-height:1.35;padding:5px 10px;border-radius:7px;white-space:nowrap;
  background:var(--vf-navy);color:#fff;
}
/* le tiret ambre de l'idiome .eyebrow n'a plus de sens dans une pastille pleine */
.vflash .section__head .eyebrow::before{display:none}
/* #packs porte l'accent de la marque, comme la pastille orange « PACKS » de
   la source ; les autres restent en encre pour ne pas saturer la page. */
#packs.vflash .section__head .badge{background:var(--vf-accent);color:var(--vf-navy)}

/* ---- 2. intertitres de famille (.cat-fam-head) : mêmes proportions que
   la pastille .sec-tag de la source (elle était nettement plus grosse ici). ---- */
.vflash .cat-fam-head{gap:11px;margin:34px 0 14px}
.vflash .cat-fam-badge{min-width:0;height:auto;padding:5px 10px;border-radius:7px;font-size:11.5px;font-weight:900;letter-spacing:.4px}
.vflash .cat-fam-head h3{font-size:21px;font-weight:900;letter-spacing:-.3px}

/* ---- 3. LE trait de la source : le filet de 4 px aux couleurs du
   référentiel, collé au bord gauche de la carte et rogné par ses
   angles arrondis (.row::before + overflow:hidden). #catalogue l'a déjà
   sous forme de border-left, on n'y touche pas ; #categories-detail et
   #packs ne l'avaient pas du tout. ---- */
.vflash .vf-row,.vflash .pack-card{position:relative;overflow:hidden}
.vflash .vf-row::before,.vflash .pack-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;z-index:1;
  background:var(--vf-line);
}
.vflash .vf-row[data-fam=r482]::before,.vflash .pack-card[data-fam=r482]::before{background:#A96727}
.vflash .vf-row[data-fam=r485]::before,.vflash .pack-card[data-fam=r485]::before{background:#2F6FED}
.vflash .vf-row[data-fam=r486]::before,.vflash .pack-card[data-fam=r486]::before{background:#1B8666}
.vflash .vf-row[data-fam=r487]::before,.vflash .pack-card[data-fam=r487]::before{background:#8655F6}
.vflash .vf-row[data-fam=r489]::before,.vflash .pack-card[data-fam=r489]::before{background:var(--vf-accent)}
.vflash .vf-row[data-fam=r490]::before,.vflash .pack-card[data-fam=r490]::before{background:#0F8577}

/* ---- 4. géométrie des rangées, alignée sur la source :
   colonnes 84 / 218 / 1fr / auto / auto, gouttière 26, padding 22/28,
   et le survol qui éclaircit AUSSI la bordure (il ne faisait que lever). ---- */
.vflash .vf-row,.vflash .pack-card{
  grid-template-columns:84px 218px minmax(0,1fr) auto auto;gap:26px;padding:22px 28px;
  transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease;
}
.vflash .vf-row:hover,.vflash .pack-card:hover{border-color:#d3d9df}
.vflash .vf-rows,.vflash .pack-rows{gap:14px}

/* pastille de catégorie : 84 px de large, « CAT » minuscule très espacé
   au-dessus d'un chiffre de 22 px — c'est elle qui donne son rythme à la
   colonne de gauche de la source. */
.vflash .vf-row__badge,.vflash .pack-badge{
  min-width:84px;height:auto;padding:12px 8px;gap:2px;
  box-shadow:0 4px 12px rgba(16,20,24,.14);
}
.vflash .vf-row__badge .pre,.vflash .pack-badge .pre{font-size:9px;letter-spacing:1.8px;opacity:.8;line-height:1}
.vflash .vf-row__badge .ref,.vflash .pack-badge .ref{font-size:22px;font-weight:900;line-height:1.05}

/* vignette machine : 218×150, cadre clair, image entière (jamais recadrée) */
.vflash .vf-row__thumb{width:218px;height:150px;cursor:zoom-in}
.vflash .vf-row__thumb img{padding:8px}
/* collage de pack : dans la source les machines flottent sur le blanc de la
   carte, sans cadre ni gouttière visible — d'où fond blanc, bordure retirée,
   2 px d'écart et zéro rembourrage d'image. */
.vflash .pack-thumb{width:218px;height:150px;background:#fff;border:0;gap:2px;padding:0;grid-auto-rows:1fr}
.vflash .pack-thumb img{padding:0;background:#fff}
.vflash .pack-thumb.is-empty{background:var(--vf-panel);border:1px solid var(--vf-line)}

/* texte de rangée : titre 18 px, description 13,8 px sur 62 caractères */
.vflash .vf-row__name,.vflash .pack-info__t{font-size:18px;letter-spacing:-.2px}
.vflash .vf-row__desc,.vflash .pack-info__d{font-size:13.8px;line-height:1.55;max-width:62ch;margin-top:7px}

/* colonne des prix : la source la sépare par un filet vertical, pas par du
   vide — c'est ce filet qui fait lire « fiche produit » plutôt que « ligne ». */
.vflash .pack-cta{padding-left:24px;border-left:1px solid var(--vf-line)}
.vflash .vf-row__incl{padding-left:24px}
.vflash .pack-cta__k{font-size:10.5px;letter-spacing:.6px}
.vflash .pack-cta__price{font-size:38px}
.vflash .pack-cta__unit{font-size:11px}

/* boutons de rangée : 14,5 px sur 13/26 de rembourrage dans la source */
.vflash .pack-book a,.vflash .vf-row__cta a{font-size:14.5px;padding:13px 26px}
.vflash .pack-book a.soft{font-size:12px;padding:8px 14px}

/* ---- 5. la rangée « recommandée » : bandeau pleine largeur rogné par la
   carte (donc plus d'angles arrondis à lui), libellé de 17 px, et le texte
   qui bat en rouge comme dans la source. ---- */
.vflash .pack-card--reco{padding-top:66px}
.vflash .pack-reco{border-radius:0;font-size:17px;padding:12px}
.vflash .pack-reco__txt{color:#d81212;animation:vf-reco-text-flash 1.1s ease-in-out infinite}
@keyframes vf-reco-text-flash{
  0%,100%{color:#d81212;text-shadow:0 0 0 rgba(216,18,18,0)}
  50%    {color:#ff4136;text-shadow:0 0 12px rgba(216,18,18,.6)}
}
@media (prefers-reduced-motion:reduce){ .vflash .pack-reco__txt{animation:none;color:#d81212} }

/* ---- 6. #catalogue : mêmes proportions de carte et même survol que les
   rangées ci-dessus. Le filet de couleur y est déjà (border-left de
   style.css), on ne le double pas. ---- */
.vflash .catrow{padding:22px 28px;transition:box-shadow .25s ease,transform .2s ease,border-color .2s ease}
.vflash .catrow:hover{border-color:#d3d9df;box-shadow:0 16px 40px rgba(16,20,24,.10)}
/* Les trois actions passent EN COLONNE, comme le bloc .book de la source
   (display:flex;flex-direction:column;gap:7px). Côte à côte elles occupaient
   692 px des 1 132 px de piste disponibles : la colonne de texte tombait à
   217 px et le titre partait sur trois lignes dès qu'on agrandissait la photo.
   Empilées, elles tiennent dans 300 px et rendent ~620 px au texte — la
   proportion même des rangées de la source. */
.vflash .catrow:has(.catrow__media){grid-template-columns:218px minmax(0,1fr) 300px;gap:26px}
.vflash .catrow__media{width:218px;height:150px;cursor:zoom-in}
.vflash .catrow__actions{flex-direction:column;align-items:stretch;justify-content:center;gap:8px;flex-wrap:nowrap}
.vflash .catrow__actions .catbtn{align-items:flex-start;text-align:left}
/* « Trouver un collaborateur » : .catbtn{border-width:0} plus haut dans ce
   fichier privait la variante verrouillée (fond blanc) de sa bordure — elle
   se lisait comme du texte nu à côté de deux vrais boutons. On lui rend le
   traitement « a.soft / a.pdf » de la source : blanc, bordé, qui se colore
   au survol. Portée .vflash : la même anomalie sur entreprises.html n'est
   PAS touchée ici, ce n'était pas la demande. */
.vflash .catbtn--emploi.is-locked{background:#fff;border:1.5px solid var(--vf-line);color:var(--emploi-txt)}
.vflash .catbtn--emploi.is-locked:hover{border-color:var(--emploi);background:var(--emploi-soft)}

/* ---- 7. #tarifs : la même carte que la source (lift + bordure qui
   s'éclaircit au survol). Les trois cartes gardent leur filet de couleur
   d'univers, leurs prix et leurs mentions — rien d'IDPPE n'y entre. ---- */
.vflash .grid.g3 > .card{transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease}
.vflash .grid.g3 > .card:hover{box-shadow:0 16px 40px rgba(16,20,24,.10);transform:translateY(-2px);border-color:#d3d9df}

/* ---- 8. téléphones / tablettes — reprise de la bascule de la source à
   860 px : deux colonnes (pastille + texte), la photo passe pleine largeur
   sous le texte, puis le prix, puis le bouton en pleine largeur.
   Le bloc de texte des .vf-row est un <div> SANS classe dans le markup
   (l'ancienne règle .vf-row__info ne ciblait donc rien) : il est adressé
   ici par :not([class]), qui ne peut désigner que lui. ---- */
@media (max-width:900px){
  .vflash .vf-row,.vflash .pack-card{
    grid-template-columns:84px minmax(0,1fr);
    grid-template-areas:"badge info" "thumb thumb" "price price" "cta cta";
    gap:14px 18px;padding:20px 22px;
  }
  .vflash .vf-row__badge,.vflash .pack-badge{grid-area:badge;align-self:start}
  .vflash .vf-row > div:not([class]),.vflash .pack-info{grid-area:info}
  /* Photo unique : pleine largeur mais BORNÉE. Sans borne, un rendu produit
     sur fond clair (R485, R487, R490) s'étalait sur 800 px de vide à 900 px
     de fenêtre. La source travaille à 860 px et en dessous, où la question
     ne se pose pas. */
  .vflash .vf-row__thumb{grid-area:thumb;width:100%;max-width:440px;height:200px}
  /* Collage de pack : la source abandonne la grille sur petit écran et met
     les machines en RANGÉE souple, à hauteur fixe (sinon chaque case de la
     grille s'étire sur toute la largeur et une machine occupe un demi-écran). */
  .vflash .pack-thumb{
    grid-area:thumb;width:100%;height:auto;min-height:130px;
    display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
    gap:6px 14px;padding:8px 4px;
  }
  .vflash .pack-thumb img{height:110px;width:auto;max-width:30%}
  .vflash .vf-row__incl,.vflash .pack-cta{
    grid-area:price;padding:14px 0 0;border-left:0;border-top:1px solid var(--vf-line);
    text-align:left;align-items:baseline;flex-direction:row;justify-content:flex-start;
    flex-wrap:wrap;gap:2px 12px;
  }
  .vflash .pack-cta__unit{flex:1 0 100%;margin-top:0}
  .vflash .vf-row__cta,.vflash .pack-book{grid-area:cta}
  .vflash .vf-row__cta a,.vflash .pack-book a{display:block;text-align:center}
  .vflash .catrow:has(.catrow__media){grid-template-columns:minmax(0,1fr);gap:18px}
  .vflash .catrow__media{width:100%;max-width:440px;height:200px;border-radius:14px}
  .vflash .catrow__actions{align-items:stretch}
  .vflash .catrow__actions .catbtn{align-items:center;text-align:center}
  .vflash .pack-card--reco{padding-top:62px}
}
@media (max-width:560px){
  .vflash .vf-row,.vflash .pack-card{grid-template-columns:72px minmax(0,1fr);gap:12px 14px;padding:18px 16px}
  .vflash .vf-row__badge,.vflash .pack-badge{min-width:72px;padding:10px 6px}
  .vflash .vf-row__badge .ref,.vflash .pack-badge .ref{font-size:19px}
  .vflash .vf-row__name,.vflash .pack-info__t{font-size:16px}
  .vflash .pack-cta__price{font-size:32px}
  .vflash .pack-thumb img{height:88px;max-width:46%}
  .vflash .pack-reco{font-size:14px;padding:10px 8px}
  .vflash .pack-card--reco{padding-top:54px}
  .vflash .section__head .lead{font-size:14px}
}
/* Sous 640 px la pastille et le titre ne tiennent plus côte à côte : la
   pastille mangeait la moitié de la largeur et le titre partait sur trois
   lignes à côté d'elle. Elle repasse AU-DESSUS, comme le .sec-head en
   colonne de la source sur petit écran. */
@media (max-width:640px){
  .vflash .section__head{grid-template-columns:minmax(0,1fr)}
  .vflash .section__head .eyebrow,.vflash .section__head .badge{grid-column:1;grid-row:1}
  .vflash .section__head h2{grid-column:1;grid-row:2;margin-top:12px}
  .vflash .section__head .lead{grid-column:1;grid-row:3}
  .vflash .cat-fam-head{align-items:flex-start}
  .vflash .cat-fam-badge{margin-top:3px}
}


/* ============================================================
   Correctifs d'accessibilite — audit du 2026-08-09
   Places en fin de home.css, qui charge apres style.css : c'est
   la seule position ou ces regles gagnent sans avoir a monter
   artificiellement leur specificite.
   ============================================================ */

/* 1. BLOQUANT — la derniere section d'appel a l'action d'entreprises.html
   etait ILLISIBLE. style.css pose `.section--ink{background:var(--encre);
   color:var(--beton)}`, mais `.section{background:transparent}` plus haut
   dans CE fichier arrive apres, a specificite egale, et emportait le fond
   sans emporter la couleur du texte : creme sur blanc, mesure a 1,14:1.
   On rend son fond a la variante encre, sans toucher .section. */
/* 2026-08-21 — le correctif ci-dessus rendait le FOND mais pas la COULEUR du
   texte, et `h2,h3,h4{color:var(--vf-navy)}` plus haut dans ce fichier repeint
   les titres en encre. Resultat mesure sur /entreprises : le h2 « Vos engins.
   Vos equipes. Vos delais. » sortait a #14181B sur #14181B, soit 1,00:1 —
   litteralement invisible (le paragraphe, lui, etait a 14,33:1, ce qui rendait
   le trou difficile a voir en relisant le code). Il faut les DEUX declarations :
   la couleur heritee ne bat pas la regle h2,h3,h4, qui est plus specifique. */
.section--ink{background:var(--encre);color:var(--beton)}
.section--ink h1,.section--ink h2,.section--ink h3,.section--ink h4{color:var(--beton)}

/* 2. BLOQUANT — le contour de focus du burger etait invisible.
   Les correctifs existants ne visaient que `a` ; le burger est un <button>,
   et c'est precisement le controle qui compte au clavier sur mobile.
   Mesure : #1D4E89 sur #14181B = 2,13:1, sous le minimum de 3:1 (WCAG
   1.4.11). var(--loc) donne 9,4:1. Meme correctif pour le bouton
   « Refuser » du bandeau RGPD, pose sur la meme encre. */
header.top button:focus-visible,
#rgpd-banner button:focus-visible{outline-color:var(--loc)}

/* 3. BLOQUANT — `prefers-reduced-motion` ne coupait PAS mes deux animations.
   La regle globale de style.css est `*{animation:none!important}` : le
   selecteur universel ne matche pas ::before / ::after. Or la puce qui
   respire (.hero .eyebrow::before) et le reflet du bouton (.btn--loc::after)
   vivent tous les deux dans un pseudo-element. Deux commentaires de ce
   fichier affirmaient le contraire — ils avaient tort. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* 4. Debordement horizontal a 320px sur /collaborateurs : style.css fait
   retomber `.g3,.g2` sur une colonne a 820px mais a OUBLIE `.g4`, qui
   restait donc a deux colonnes jusqu'a 0px (cartes a 146px + 140px + 18px
   de gouttiere dans un parent de 280px). */
@media (max-width:820px){ .g4{grid-template-columns:1fr} }

/* 5. `.pack-cta__unit` gardait `white-space:nowrap` sur 172px : c'est le
   debordement de 12px d'entreprises.html a 320px, anterieur a ce lot. */
@media (max-width:400px){ .pack-cta__unit{white-space:normal} }


/* ---- en-tete : WhatsApp + acces au compte (2026-08-09) ----
   Le badge « Compte gratuit · Reponse sous 24 h » a ete retire du markup :
   il faisait ~300px et n'apparaissait qu'au-dessus de 1700px, ou il rendait
   justement la rangee la plus serree du site (25px de marge mesures). Sa
   disparition finance les deux boutons d'acces au compte ajoutes ici.

   La pastille telephone devient une pastille WhatsApp : vert officiel
   #25D366, texte encre (8,9:1), icone en SVG inline plutot qu'un emoji —
   un emoji change de dessin selon la plateforme et ne peut pas heriter
   d'une couleur. Le NUMERO reste ecrit en toutes lettres : sur un poste
   fixe, on veut pouvoir le lire sans ouvrir WhatsApp Web. */
header.top .top__wa{display:inline-flex;align-items:center;gap:8px;background:#25D366;color:#0b2e18;padding:8px 14px;border-radius:8px;font-weight:700;font-size:.92rem;text-decoration:none;white-space:nowrap;transition:background .15s ease}
header.top .top__wa:hover{background:#1fbe5b}
header.top .top__wa-i{flex:none}
/* CORRECTIF immediat : la premiere version chevauchait. Mesure a 1440 :
   la pastille WhatsApp en toutes lettres (~230px) + les deux boutons de
   compte (~200px) + le co-branding (~190px) + la nav (~550px) + le logo
   (~205px) depassent la rangee, la nav passait a la ligne et la pastille
   passait SOUS le bouton « Se connecter ».
   Ordre de sacrifice, du moins couteux au plus couteux :
   1. le numero en toutes lettres dans la pastille (l'icone suffit a
      identifier WhatsApp, et le numero reste dans le pied de page) ;
   2. le co-branding (present au pied de page sur toutes les pages) ;
   3. le libelle « Se connecter » — jamais l'acces lui-meme.
   Le bouton « Creer un compte » n'est jamais retire : c'est la conversion. */
header.top .top__wa{gap:7px}
@media (max-width:1700px){
  header.top .top__wa-n{display:none}
  header.top .top__wa{padding:9px 11px}
}
@media (max-width:1300px){
  /* 1300 et non 1500 : le seuil datait du header surcharge (bouton
     WhatsApp + numero) ; sans lui, « par FORMAFORCE » tient jusqu'ici. */
  header.top .cobrand__by{display:none}
}
@media (max-width:1240px){
  header.top .top__auth{font-size:.8rem;padding:7px 11px}
}

/* Les deux acces au compte. .btn--ghost est deja repeint en blanc sur
   l'encre du header par une regle plus haut ; on ne redeclare que la taille
   pour qu'ils restent secondaires face au co-branding et a la nav. */
header.top .top__auth{font-size:.85rem;padding:8px 14px;white-space:nowrap}



/* ============================================================
   PORTAGE « ventes-flash » — round 10 (2026-08-09)
   Les SEPT sections catalogue de idppe.com/ventes-flash reprises
   telles quelles dans index.html : #packs-caces, #r489, #r485,
   #r482, #r486, #r487, #r490.

   Pourquoi un bloc de règles neuf plutôt qu'une simple réutilisation
   du bloc « round 9 » ci-dessus : celui-ci habille les classes
   REVALOCA (.vf-row, .pack-card, .pack-badge, .pack-thumb, .pack-cta,
   .pack-book, .pack-reco). Le balisage porté, lui, est repris VERBATIM
   et porte donc les classes de la source (.row, .badge, .thumb, .info,
   .prices, .book, .sec-head, .reco-ribbon). Aucun sélecteur existant ne
   les atteint : il fallait bien les déclarer. Ce qui pouvait être
   réutilisé l'est et n'est PAS redéclaré ici :
     · .pg2 / .pg3 / .pg4 / .pg5   (collages — mêmes noms de classe,
       mêmes valeurs que la source, déjà présents plus haut) ;
     · .ff-lb / .ff-lb-box / .ff-lb-x  (la visionneuse ; une seule par
       page, celle qui existe déjà, simplement étendue aux .thumb) ;
     · @media (prefers-reduced-motion:reduce){*,*::before,*::after{
       animation:none!important}} en fin de fichier, qui neutralise
       déjà les cinq animations déclarées ici.

   PORTÉE — tout est préfixé « .vfs », classe que seules ces sept
   sections portent. entreprises.html partage .catrow / .pack-* /
   .ff-lb ET a son propre #catalogue et son propre #packs : aucun
   sélecteur ci-dessous n'utilise d'id, ni de nom de classe nu. Les
   noms de la source (.row, .badge, .info, .name, .base, .flash…)
   sont bien trop génériques pour être laissés nus — style.css a par
   exemple son propre .badge (pastille mono en capitales), qui aurait
   été repeint par ce bloc, et réciproquement.

   Les valeurs ci-dessous sont RELEVÉES sur la page source
   (getComputedStyle à 1440 px puis à 390 px), pas recopiées de sa
   feuille de style : celle-ci empile une dizaine de correctifs
   successifs en !important dont seul le résultat compte.
   ============================================================ */

/* Palette de la source. Déclarée sur les sections elles-mêmes (et non
   sur :root) : ces noms — --logi, --btp, --brand… — sont ceux d'IDPPE
   et n'ont pas à exister ailleurs sur revaloca.com. */
.vfs{
  --vfs-ink:#101418;
  --vfs-muted:#5c6672;
  --vfs-line:#e2e6ea;
  --vfs-brand:#e8511d;
  --vfs-brand-dark:#c23e10;
  --vfs-brand-soft:#fdeee7;
  --vfs-navy:#12212f;
  --vfs-panel:#f6f8fa;
  --vfs-logi:#1f6feb;
  --vfs-btp:#8a5800;  /* etait #d98a00 : blanc dessus mesure a 2,77:1 (2026-08-21) */
  --vfs-nacelle:#1f8a53;
  --vfs-grue:#7b3fe4;
  --vfs-gold:#f6b419;
}

/* ---- intertitre de section : pastille de référentiel + titre, en ligne ---- */
.vfs .sec-head{display:flex;align-items:center;gap:10px;margin:0 0 16px}
.vfs .sec-tag{
  display:block;font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:11.5px;font-weight:900;line-height:1.5;letter-spacing:.4px;
  color:#fff;background:var(--vfs-muted);padding:5px 10px;border-radius:7px;
  text-transform:none;white-space:nowrap;
}
.vfs .sec-tag.logi{background:var(--vfs-logi)}
.vfs .sec-tag.btp{background:var(--vfs-btp)}
.vfs .sec-tag.nacelle{background:var(--vfs-nacelle)}
.vfs .sec-tag.grue{background:var(--vfs-grue)}
.vfs .sec-tag.pack{background:var(--vfs-brand)}
.vfs .sec-head h2{margin:0;font-size:21px;font-weight:900;color:var(--vfs-navy);letter-spacing:-.3px;line-height:1.5;text-transform:none}

/* ---- la rangée ---- */
.vfs .rows{display:flex;flex-direction:column;gap:14px}
.vfs .row{
  position:relative;overflow:hidden;display:grid;
  grid-template-columns:84px 226px minmax(0,1fr) auto auto;
  align-items:center;gap:26px;
  background:#fff;border:1px solid var(--vfs-line);border-radius:16px;
  padding:22px 28px;box-shadow:0 1px 2px rgba(16,20,24,.04);
  transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease;
}
.vfs .row:hover{box-shadow:0 16px 40px rgba(16,20,24,.10);transform:translateY(-2px);border-color:#d3d9df}
/* le filet de 4 px aux couleurs du référentiel, rogné par les angles */
.vfs .row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--vfs-line);transition:background .2s ease}
.vfs .row.r-logi::before{background:var(--vfs-logi)}
.vfs .row.r-btp::before{background:var(--vfs-btp)}
.vfs .row.r-nacelle::before{background:var(--vfs-nacelle)}
.vfs .row.r-grue::before{background:var(--vfs-grue)}
.vfs .row.r-pack::before{background:var(--vfs-brand)}

/* ---- pastille de catégorie. style.css a son propre .badge (pastille
   mono, capitales, rayon 999px, fond béton) : tout ce qu'il pose est
   réécrit ici, sinon la pastille arrivait en capitales espacées. ---- */
.vfs .row .badge{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  align-self:center;justify-self:start;gap:2px;min-width:84px;
  font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:16px;
  letter-spacing:normal;text-transform:none;text-align:center;
  color:#fff;background:var(--vfs-muted);padding:12px 8px;border-radius:12px;
  box-shadow:0 4px 12px rgba(16,20,24,.14);
}
.vfs .row .badge .pre{font-size:9px;font-weight:800;letter-spacing:1.8px;opacity:.8;line-height:1}
.vfs .row .badge .ref{font-size:22px;font-weight:900;line-height:1.05;letter-spacing:normal}
.vfs .row .badge.logi{background:var(--vfs-logi)}
.vfs .row .badge.btp{background:var(--vfs-btp)}
.vfs .row .badge.nacelle{background:var(--vfs-nacelle)}
.vfs .row .badge.grue{background:var(--vfs-grue)}
.vfs .row .badge.pack{background:var(--vfs-brand)}
/* pastilles de pack recolorées à la famille couverte, comme la source */
.vfs .row.r-pack.fam-r489 .badge.pack{background:var(--vfs-logi)}
.vfs .row.r-pack.fam-r482 .badge.pack{background:var(--vfs-btp)}
.vfs .row.r-pack.fam-r486 .badge.pack{background:var(--vfs-nacelle)}
.vfs .row.r-pack.fam-r487 .badge.pack{background:var(--vfs-grue)}

/* ---- vignette machine : 218×150, image entière, jamais recadrée ---- */
.vfs .row .thumb{
  width:218px;height:150px;margin-right:2px;border-radius:12px;overflow:hidden;
  background:#fff;display:flex;align-items:center;justify-content:center;cursor:zoom-in;
}
/* .prod = rendu produit détouré, il respire de 6 px dans son cadre ;
   .photo = photo réelle, elle va bord à bord. C'est la distinction de la
   source (relevée : padding 6px sur .prod, 0 sur .photo). */
.vfs .row .thumb.prod{border:1px solid var(--vfs-line);padding:6px}
.vfs .row .thumb.photo{border:1px solid var(--vfs-line);padding:0}
.vfs .row .thumb img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;display:block;padding:0}
/* collage de pack : les machines flottent sur le blanc, sans cadre.
   Le découpage des cases vient de .pg2–.pg5, déjà définis plus haut. */
.vfs .row .thumb.pgrid{display:grid;gap:2px;padding:0;border:0;background:#fff;grid-auto-rows:1fr}
.vfs .row .thumb.pgrid img{min-width:0;min-height:0;background:#fff}

/* ---- texte ---- */
.vfs .row .info{min-width:0}
.vfs .row .name{font-size:18px;font-weight:800;color:var(--vfs-navy);letter-spacing:-.2px;line-height:1.5;text-transform:none}
.vfs .row .name .cap{
  display:inline-block;font-size:11.5px;font-weight:700;line-height:1.5;
  color:var(--vfs-brand-dark);background:var(--vfs-brand-soft);
  padding:3px 10px;border-radius:6px;margin-left:10px;vertical-align:middle;
}
.vfs .row.r-pack.fam-r489 .name .cap{color:var(--vfs-logi);background:rgba(31,111,235,.12)}
.vfs .row.r-pack.fam-r482 .name .cap{color:var(--vfs-btp);background:rgba(217,138,0,.12)}
.vfs .row.r-pack.fam-r486 .name .cap{color:var(--vfs-nacelle);background:rgba(31,138,83,.12)}
.vfs .row.r-pack.fam-r487 .name .cap{color:var(--vfs-grue);background:rgba(123,63,228,.12)}
.vfs .row .desc{font-size:13.8px;font-weight:400;color:var(--vfs-muted);margin:7px 0 0;line-height:1.55;max-width:62ch}

/* ---- colonne des prix : tarif barré en gris, vente flash en orange ---- */
.vfs .row .prices{display:flex;align-items:center;gap:22px;padding-left:24px;border-left:1px solid var(--vfs-line)}
.vfs .row .base,.vfs .row .flash{text-align:right}
.vfs .row .base .k{font-size:10.5px;font-weight:700;line-height:1.5;text-transform:uppercase;letter-spacing:.6px;color:#5c6672;margin-bottom:3px}
.vfs .row .base .v{
  font-size:19px;font-weight:900;line-height:1.5;color:#8a939c;white-space:nowrap;
  text-decoration:line-through;text-decoration-thickness:2.5px;text-decoration-color:rgba(138,147,156,.85);
}
.vfs .row .flash .k{font-size:10.5px;font-weight:800;line-height:1.5;text-transform:uppercase;letter-spacing:.6px;color:var(--vfs-brand-dark);margin-bottom:2px}
.vfs .row .flash .v{font-size:38px;font-weight:900;line-height:1;color:var(--vfs-brand);white-space:nowrap;animation:vfs-flash-price-pop 1.3s ease-in-out infinite}
.vfs .row .flash .na{font-size:13px;font-weight:600;font-style:italic;line-height:1.5;color:#5c6672}
@keyframes vfs-flash-price-pop{
  0%,100%{color:#e8511d;text-shadow:0 0 0 rgba(232,81,29,0);transform:scale(1)}
  50%    {color:#ff7a3d;text-shadow:0 0 18px rgba(232,81,29,.55);transform:scale(1.06)}
}

/* ---- boutons de rangée ---- */
.vfs .row .book{display:flex;flex-direction:column;gap:7px;align-items:stretch;justify-self:end;align-self:center}
.vfs .row .book a{
  display:block;background:var(--vfs-navy);color:#fff;text-decoration:none;
  font-size:14.5px;font-weight:700;line-height:1.5;padding:13px 26px;border-radius:10px;
  white-space:nowrap;text-align:center;box-shadow:0 4px 12px rgba(18,33,47,.18);
  transition:background .15s ease,box-shadow .15s ease,border-color .15s ease,color .15s ease;
}
.vfs .row .book a:hover{background:var(--vfs-brand);box-shadow:0 6px 18px rgba(232,81,29,.32)}
.vfs .row .book a.soft{background:var(--vfs-panel);color:var(--vfs-navy);border:1px solid var(--vfs-line);box-shadow:none}
.vfs .row .book a.soft:hover{background:var(--vfs-navy);color:#fff}
.vfs .row .book a.pdf{
  background:#fff;color:var(--vfs-navy);border:1px solid #cdd5dc;box-shadow:none;
  font-size:12px;font-weight:700;line-height:1.1;padding:8px 10px;border-radius:10px;
}
.vfs .row .book a.pdf:hover{border-color:var(--vfs-brand);color:var(--vfs-brand);background:#fff7f3}

/* ---- la rangée « fortement recommandé » : bandeau doré pleine largeur
   rogné par la carte, bordure qui bat, texte rouge qui clignote ---- */
.vfs .row.featured{border-width:2px;border-color:var(--vfs-gold);padding-top:66px;animation:vfs-reco-row-pulse 2.8s ease-in-out infinite}
.vfs .row.featured::before{background:var(--vfs-gold)}
.vfs .row .reco-ribbon{
  position:absolute;top:0;left:0;right:0;z-index:2;overflow:hidden;display:block;text-align:center;
  background:linear-gradient(90deg,#f6b419,#ffd889);color:#3a2600;
  font-size:17px;font-weight:900;letter-spacing:.3px;line-height:1.5;padding:12px;
}
.vfs .row .reco-ribbon::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.6) 50%,rgba(255,255,255,0) 60%);
  background-size:220% 100%;background-position:220% 0;
  animation:vfs-reco-ribbon-shimmer 3s ease-in-out infinite;
}
.vfs .row .reco-ribbon .star{display:inline-block;transform-origin:center;animation:vfs-reco-star-twinkle 2.2s ease-in-out infinite}
.vfs .row .reco-ribbon .ribbon-text{color:#d81212;animation:vfs-reco-text-flash 1.1s ease-in-out infinite}
@keyframes vfs-reco-row-pulse{
  0%,100%{border-color:#f6b419;box-shadow:0 1px 2px rgba(16,20,24,.04)}
  50%    {border-color:#ffd889;box-shadow:0 10px 34px rgba(246,180,25,.48)}
}
@keyframes vfs-reco-ribbon-shimmer{0%{background-position:220% 0}100%{background-position:-220% 0}}
@keyframes vfs-reco-star-twinkle{0%,100%{transform:scale(1) rotate(0deg)}50%{transform:scale(1.25) rotate(12deg)}}
@keyframes vfs-reco-text-flash{
  0%,100%{color:#d81212;text-shadow:0 0 0 rgba(216,18,18,0)}
  50%    {color:#ff4136;text-shadow:0 0 12px rgba(216,18,18,.6)}
}

/* ---- téléphones et tablettes : la bascule de la source, à 860 px.
   Deux colonnes (pastille + texte), puis la photo pleine largeur, puis
   les prix séparés par un filet horizontal, puis le bouton pleine
   largeur. Relevé sur la source à 390 px. ---- */
@media (max-width:860px){
  .vfs .row{grid-template-columns:64px minmax(0,1fr);gap:16px 18px;padding:20px}
  .vfs .row .badge{align-self:start}
  .vfs .row .info{grid-column:2/-1}
  .vfs .row .thumb{grid-column:1/-1;width:100%;max-width:100%;height:240px;margin:2px 0 4px}
  .vfs .row .thumb.pgrid{
    display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
    height:auto;min-height:130px;gap:2px 4px;padding:4px 2px;
  }
  .vfs .row .thumb.pgrid img{width:auto;height:120px;max-width:49%}
  .vfs .row .prices{grid-column:1/-1;padding:16px 0 0;border-left:0;border-top:1px solid var(--vfs-line);justify-content:space-between}
  .vfs .row .book{grid-column:1/-1;justify-self:stretch}
  .vfs .row.featured{padding-top:70px}
}

/* ---- rythme vertical de la source : les sections de ventes-flash sont
   serrées (34 px au-dessus, 6 px au-dessous) là où .section de REVALOCA
   donne 72 px de part et d'autre. Sept sections d'affilée à 72 px
   creusaient 144 px de vide entre chaque référentiel, là où la source
   en laisse 40. Relevé sur la source (padding:34px 0 6px). ---- */
.vfs.section{padding:34px 0 6px}


/* ---- bouton WhatsApp flottant (2026-08-09) ----
   Coin bas-droit, present sur toutes les pages publiques. Il s'elargit au
   survol pour reveler son libelle plutot que d'occuper la place en
   permanence : sur mobile, une pastille de 56px laisse la page lisible.
   z-index 60 = celui du header sticky, et il est le dernier element du
   <body>, donc il passe devant sans surenchere.
   Il remonte au-dessus du bandeau RGPD tant que celui-ci est affiche —
   sinon il le recouvrait exactement dans le coin. */
.wa-fab{
  position:fixed;right:20px;bottom:20px;z-index:60;
  display:inline-flex;align-items:center;gap:0;overflow:hidden;
  width:56px;height:56px;padding:0 15px;border-radius:999px;
  background:#25D366;color:#0b2e18;text-decoration:none;
  box-shadow:0 10px 26px rgba(0,0,0,.28);
  transition:width .28s var(--ease-out,ease),gap .28s ease,background .15s ease,transform .15s ease;
}
.wa-fab svg{flex:none}
.wa-fab__lbl{white-space:nowrap;font-weight:800;font-size:.95rem;opacity:0;transition:opacity .2s ease}
.wa-fab:hover,.wa-fab:focus-visible{width:172px;gap:11px;background:#1fbe5b;transform:translateY(-2px)}
.wa-fab:hover .wa-fab__lbl,.wa-fab:focus-visible .wa-fab__lbl{opacity:1}
.wa-fab:focus-visible{outline:3px solid #0b2e18;outline-offset:3px}
#rgpd-banner.is-visible ~ .wa-fab{bottom:132px}
@media (max-width:560px){ .wa-fab{right:14px;bottom:14px} #rgpd-banner.is-visible ~ .wa-fab{bottom:168px} }
@media (prefers-reduced-motion:reduce){ .wa-fab,.wa-fab__lbl{transition:none} .wa-fab:hover{transform:none} }
@media print{ .wa-fab{display:none} }

/* ============================================================
   Accès au compte dans le menu déroulant (2026-08-12)
   ------------------------------------------------------------
   « Se connecter » et « Créer un compte » vivent dans .top__cta,
   que style.css masque sous 820 px (`.top__cta .btn{display:none}`)
   parce que la rangée n'a plus la place de les porter. Rien ne les
   remplaçait : sous 820 px — c'est-à-dire sur tout téléphone — le
   menu déroulant ne contenait QUE les quatre pages publiques, et
   il n'existait aucun chemin vers l'espace client depuis l'en-tête.
   Le seul accès restant était un lien du pied de page, à 47 000 px
   de défilement sur l'accueil.

   On les repose donc dans le tiroir, et seulement là où la barre
   les a perdus : entre 821 et 1150 px le tiroir existe déjà mais
   les deux boutons sont encore dans la barre, et les afficher aux
   deux endroits ferait doublon.
   ============================================================ */
.nav__sep,.nav__auth{display:none}

@media (max-width:820px){
  /* Filet de séparation : les quatre premières entrées naviguent
     dans le site, les deux suivantes engagent un compte. Ce n'est
     pas la même nature d'action. */
  header.top nav.main .nav__sep{
    display:block;height:1px;margin:9px 4px 7px;border:0;
    background:rgba(255,255,255,.14);
  }
  header.top nav.main .nav__auth{
    display:flex;align-items:center;justify-content:center;
    width:100%;padding:13px;border-radius:var(--r,3px);
    font-weight:700;font-size:.95rem;text-align:center;text-decoration:none;
    border:1.5px solid rgba(255,255,255,.42);color:#fff;background:transparent;
  }
  header.top nav.main .nav__auth:hover,
  header.top nav.main .nav__auth:focus-visible{
    background:#fff;color:var(--vf-navy);border-color:#fff;
  }
  /* L'inscription est l'action primaire : elle porte l'ambre de la
     marque, sur lequel l'encre donne 9,6:1. */
  header.top nav.main .nav__auth--pri{
    background:var(--vf-accent);border-color:var(--vf-accent);color:var(--vf-navy);
  }
  header.top nav.main .nav__auth--pri:hover,
  header.top nav.main .nav__auth--pri:focus-visible{
    background:#ffc63a;border-color:#ffc63a;color:var(--vf-navy);
  }
  /* Le tiroir est plafonné à 480 px de haut par style.css ; deux
     entrées et un filet de plus le portent à ~330 px, mais la marge
     serait mince si une septième arrivait. */
  header.top nav.main.is-open{max-height:620px}
}

/* ============================================================
   Titres de colonne du pied de page — invisibles (2026-08-12)
   ------------------------------------------------------------
   « Nos univers », « Mon compte » et « Contact entreprises » sont
   des <h3 class="cond">, alors que la seule règle de couleur du
   pied de page vise `footer.bas h4`. Les trois titres héritaient
   donc de la couleur de titre par défaut — var(--encre) #14181B —
   sur un pied de page peint du MÊME #14181B : contraste 1:1,
   c'est-à-dire trois intertitres rigoureusement invisibles, sur
   les dix pages publiques et à toutes les largeurs. Le trou blanc
   au-dessus de chaque groupe de liens, sur mobile, était eux.

   On vise les deux niveaux, pour que le correctif tienne si le
   balisage repasse un jour en h4.
   ============================================================ */
footer.bas h3,footer.bas h4,footer.bas .cond{
  color:var(--blanc,#E9E6E0);
  font-size:.95rem;letter-spacing:.06em;margin-bottom:14px;
}


/* ============================================================
   ACCORDÉON CATALOGUE — « Former mes équipes » (2026-08-19)
   Le clic sur le bouton formation d'une rangée du catalogue
   déroule SOUS elle les sous-catégories de la famille, clonées
   par site-v2.js depuis #categories-detail. Tout est préfixé
   .vflash : entreprises.html partage .catrow/.catbtn et ne doit
   pas hériter de ces règles.
   ============================================================ */

/* Le bouton devient un déclencheur : chevron rond à droite, qui
   pivote à l'ouverture. La classe has-panel n'est posée que par
   le script — sans JS le bouton reste le lien devis d'origine,
   sans chevron orphelin. */
.vflash .catbtn--form.has-panel{position:relative;padding-right:46px}
.vflash .catbtn--form .catbtn__chev{
  position:absolute;right:12px;top:50%;width:24px;height:24px;margin-top:-12px;
  border-radius:50%;background:rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;line-height:1;
  transition:transform .3s ease,background .2s ease,color .2s ease;
}
.vflash .catbtn--form.is-open{background:var(--vf-navy);border-color:var(--vf-navy)}
.vflash .catbtn--form.is-open .catbtn__chev{transform:rotate(180deg);background:var(--vf-accent);color:var(--vf-navy)}

/* Le panneau : 4e enfant de la .catrow (grille), il occupe toute
   la largeur sur sa propre ligne. Dépliage par grid-template-rows
   0fr -> 1fr : la hauteur réelle est animée sans la mesurer en JS. */
.vflash .catrow__panel{
  grid-column:1/-1;display:grid;grid-template-rows:0fr;opacity:0;margin-top:0;
  transition:grid-template-rows .45s cubic-bezier(.4,0,.2,1),opacity .3s ease,margin-top .45s cubic-bezier(.4,0,.2,1);
}
.vflash .catrow__panel.is-open{grid-template-rows:1fr;opacity:1;margin-top:16px}
.vflash .catrow__panel-inner{overflow:hidden;min-height:0}

.vflash .catpanel{border-top:1px dashed var(--vf-line);padding-top:16px}
.vflash .catpanel__head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.vflash .catpanel__title{display:flex;flex-direction:column;gap:2px}
.vflash .catpanel__title b{font-size:.98rem;color:var(--vf-navy)}
.vflash .catpanel__title span{font-size:.78rem;color:var(--vf-muted)}
/* Le devis, cible du bouton avant que le clic ne devienne un
   déroulé, reste à un clic : bouton plein en tête de panneau. */
.vflash .catpanel__cta{
  margin-left:auto;background:var(--form);color:#fff;text-decoration:none;
  font-weight:700;font-size:13.5px;padding:10px 18px;border-radius:10px;
  white-space:nowrap;transition:background .15s ease,transform .12s ease;
}
.vflash .catpanel__cta:hover{background:var(--vf-navy);transform:translateY(-1px)}

/* Rangées clonées : posées sur un lé gris pâle pour se détacher du
   blanc de la carte, gabarit resserré (pastille 64, vignette 150)
   pour marquer la hiérarchie avec la section détail pleine page. */
.vflash .catpanel .vf-rows{background:var(--vf-panel);border:1px solid var(--vf-line);border-radius:14px;padding:12px;gap:10px}
.vflash .catpanel .vf-row{grid-template-columns:64px 150px minmax(0,1fr) auto auto;gap:18px;padding:14px 18px;border-radius:12px}
.vflash .catpanel .vf-row__badge{min-width:64px;padding:9px 6px}
.vflash .catpanel .vf-row__badge .ref{font-size:17px}
.vflash .catpanel .vf-row__thumb{width:150px;height:104px}
.vflash .catpanel .vf-row__cta a{padding:9px 14px;font-size:12.5px}

/* Entrée en cascade des rangées à l'ouverture. Une animation (et
   pas une transition) : elle ne se mélange pas au transform du
   survol une fois jouée, et `backwards` masque chaque rangée
   pendant son délai. */
.vflash .catrow__panel.is-open .vf-row{animation:catpanel-row .45s cubic-bezier(.2,.7,.3,1) backwards;animation-delay:calc(var(--i,0)*55ms + 90ms)}
@keyframes catpanel-row{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.vflash .catpanel__foot{margin-top:10px;text-align:right}
.vflash .catpanel__foot a{font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--vf-muted);text-decoration:none;border-bottom:1px dotted currentColor}
.vflash .catpanel__foot a:hover{color:var(--vf-navy)}

/* Les gabarits resserrés ci-dessus (3 classes) battent les bascules
   mobiles génériques (2 classes) : on les redéclare aux mêmes
   points de rupture que le reste de la section. */
@media (max-width:900px){
  .vflash .catpanel .vf-row{grid-template-columns:84px minmax(0,1fr);gap:12px 14px;padding:16px 18px}
  .vflash .catpanel .vf-row__thumb{width:100%;max-width:440px;height:170px}
  .vflash .catpanel__cta{margin-left:0;flex:1 1 100%;text-align:center}
}
@media (max-width:560px){
  .vflash .catpanel .vf-row{grid-template-columns:72px minmax(0,1fr);padding:14px 14px}
  .vflash .catpanel .vf-rows{padding:8px}
}
@media (prefers-reduced-motion:reduce){
  .vflash .catrow__panel{transition:opacity .2s ease}
  .vflash .catrow__panel.is-open .vf-row{animation:none}
  .vflash .catbtn--form .catbtn__chev{transition:none}
}

/* ============================================================
   BOUTON + PANNEAU « Exemple de certificat CACES® » (2026-08-19)
   Remplace le raccourci « Voir chaque catégorie en détail » en
   pied de catalogue. Le recto/verso du certificat, retiré de
   #certifications, se déplie ici — même mécanique 0fr -> 1fr
   que les panneaux .catrow__panel plus haut.
   ============================================================ */
.vflash #cert-mock-btn{cursor:pointer}
#cert-mock-btn .btn__chev{display:inline-flex;font-size:.8em;line-height:1;transition:transform .3s ease}
#cert-mock-btn.is-open .btn__chev{transform:rotate(180deg)}
/* état ouvert = même inversion que le survol du bouton fantôme */
#cert-mock-btn.is-open{background:var(--encre);color:var(--blanc)}

.revpanel{display:grid;grid-template-rows:0fr;opacity:0;margin-top:0;transition:grid-template-rows .45s cubic-bezier(.4,0,.2,1),opacity .3s ease,margin-top .45s cubic-bezier(.4,0,.2,1)}
.revpanel.is-open{grid-template-rows:1fr;opacity:1;margin-top:18px}
.revpanel__inner{overflow:hidden;min-height:0}
.revpanel .certbox{background:var(--vf-panel);border:1px solid var(--vf-line);border-radius:16px;padding:24px 28px}
/* l'intertitre gardait sa taille de #certifications, qu'il a quitté */
.certbox .certs__sub{font-size:clamp(19px,2.2vw,25px);margin:0 0 8px}
.certbox .lead{margin:0;max-width:70ch}
.certbox .cert-mock-grid{margin-top:22px}
/* zoom via la visionneuse #ff-lb (délégation) — même affordance
   que les vignettes machines */
#cert-mock-panel .cert-mock{cursor:zoom-in}

@media (max-width:560px){ .revpanel .certbox{padding:18px 16px} }
@media (prefers-reduced-motion:reduce){ .revpanel{transition:opacity .2s ease} }

/* ============================================================
   FINITIONS UI / RESPONSIVE — audit du 2026-08-19
   ============================================================ */

/* 1. #pitch et #catalogue portent `section` ET `wrap` sur le MÊME
   élément : .section{padding:72px 0} (style.css:142) arrive après
   .wrap{padding:0 20px} (style.css:54) à spécificité égale et
   écrasait le padding LATÉRAL — contenu collé aux bords sous
   1280 px, et 40 px plus large que les sections à wrap interne
   au-dessus. Deux classes = spécificité supérieure aux deux. */
.section.wrap{padding-left:20px;padding-right:20px}

/* 2. Entre ~1000 et 1240 px la colonne d'actions (300 px) coupait
   « 999 € HT / jour » après la barre oblique — « jour » orphelin.
   Le prix est insécable : la ligne casse proprement AVANT lui. */
.vflash .catbtn small b{white-space:nowrap}

/* 3. Sous la bascule 1 colonne du catalogue, la vignette machine
   (bornée à 440 px) restait collée à gauche avec un lé de vide à
   droite : centrée, comme la photo l'est déjà dans son cadre. */
@media (max-width:1150px){
  .vflash .catrow__media{margin-left:auto;margin-right:auto}
}

/* 4. Les deux boutons du pied de catalogue étaient espacés par
   l'espace typographique inline : gouttière stable, même empilés. */
#catalogue p.mt24{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:0}

/* ============================================================
   BANDEAU VENTES FLASH (2026-08-19)
   Premier enfant du header sticky : ambre pleine largeur, texte
   encre, mono — visible dès l'arrivée et pendant tout le scroll.
   ============================================================ */
.flashbar{display:flex;align-items:center;gap:10px;background:var(--vf-accent);color:var(--vf-navy);padding:0 14px;min-height:40px}
.flashbar[hidden]{display:none}
.flashbar__link{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;padding:9px 0;color:inherit;text-decoration:none;font-family:"IBM Plex Mono",monospace;font-size:.78rem;font-weight:600;letter-spacing:.02em}
.flashbar__t{text-transform:uppercase;letter-spacing:.08em;font-weight:800;white-space:nowrap}
.flashbar__long{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flashbar__long s{opacity:.55}
.flashbar__long b{font-weight:800}
.flashbar__cta{white-space:nowrap;font-weight:800;border-bottom:2px solid currentColor;padding-bottom:1px;transition:border-color .15s ease}
.flashbar__link:hover .flashbar__cta{border-color:transparent}
.flashbar__zap{display:inline-block;animation:flashbar-zap 2s ease-in-out infinite}
@keyframes flashbar-zap{0%,100%{transform:none}50%{transform:scale(1.25)}}
.flashbar__x{flex:0 0 auto;width:26px;height:26px;border:0;border-radius:50%;background:rgba(20,24,27,.12);color:inherit;font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s ease}
.flashbar__x:hover{background:rgba(20,24,27,.24)}
/* la cible de l'ancre ne doit pas se glisser SOUS le header sticky
   (nav + bandeau ≈ 112 px) */
#packs-caces{scroll-margin-top:124px}
@media (max-width:720px){
  .flashbar__long{display:none}
  .flashbar__link{font-size:.72rem;gap:6px}
}
@media (prefers-reduced-motion:reduce){ .flashbar__zap{animation:none} }


/* Ouverture du panneau certificat AU CHARGEMENT (2026-08-19) : la
   classe est posée puis retirée par site-v2.js le temps du premier
   rendu, pour déplier sans jouer la transition 0fr -> 1fr. */
.revpanel--noanim{transition:none !important}
/* le h3 du panneau colle à la grille depuis le retrait du paragraphe
   descriptif (2026-08-19) */
.certbox .certs__sub{margin-bottom:2px}

/* Rangée de logos cliquables du panneau « Nos certifications »
   (2026-08-19) — remplace le paragraphe descriptif retiré. */
.certbox__logos{display:flex;flex-wrap:wrap;gap:12px;margin:14px 0 6px}
.certbox__logo{flex:1 1 160px;max-width:230px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;background:#fff;border:1px solid var(--vf-line);border-radius:12px;padding:14px 16px;text-decoration:none;transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease}
.certbox__logo:hover{box-shadow:0 12px 30px rgba(16,20,24,.10);transform:translateY(-2px);border-color:#d3d9df}
.certbox__logo img{height:42px;width:auto;max-width:100%;object-fit:contain}
.certbox__logo small{font-family:"IBM Plex Mono",monospace;font-size:.66rem;font-weight:600;color:var(--vf-muted);white-space:nowrap}
.certbox__logo:hover small{color:var(--vf-navy)}
@media (max-width:560px){ .certbox__logo{flex:1 1 100%;max-width:none} }

/* Logos remontés AU-DESSUS du titre du panneau (2026-08-19) :
   les marges suivent — logos d'abord, puis le titre contre sa grille. */
.certbox__logos{margin:0 0 16px}
.certbox .certs__sub{margin:0 0 10px}

/* Logos mis en évidence (2026-08-19) : les trois tuiles occupent
   toute la largeur du panneau en tête, logos 64px, libellé encre,
   survol souligné à l'ambre — c'est la rangée de preuve du panneau. */
.certbox__logos{gap:14px;margin:0 0 20px}
.certbox__logo{flex:1 1 220px;max-width:none;padding:20px 22px;gap:10px;border-radius:14px}
.certbox__logo img{height:64px}
.certbox__logo small{font-size:.74rem;color:var(--vf-navy)}
.certbox__logo:hover{border-color:var(--vf-accent);box-shadow:0 14px 34px rgba(16,20,24,.12)}
.certbox__logo:hover small{color:var(--vf-accent-dark)}

/* ============================================================
   #stats-band (2026-08-19) : les six repères du hero, déplacés
   dans leur propre bande sous #reperes-band — mêmes règles que
   lui (aplat navy, eyebrow claire, stats blanches), plus un
   filet clair pour séparer les deux bandes adjacentes.
   ============================================================ */
#stats-band{background:var(--vf-navy);padding:32px 0;border-top:1px solid rgba(255,255,255,.14)}
#stats-band .eyebrow{color:rgba(255,255,255,.6)}
#stats-band .eyebrow::before{background:var(--vf-accent)}
#stats-band .hero__stats{border-color:rgba(255,255,255,.14)}
#stats-band .hero__stats b{color:#fff}
#stats-band .hero__stats span{color:rgba(255,255,255,.6)}

/* Accroche remontée (2026-08-19) : le hero centre son contenu en
   flex ; en donnant plus d'air en bas qu'en haut, le bloc titre +
   boutons (et le formulaire, alignés ensemble) glisse d'environ
   60 px vers le haut — placement légèrement au-dessus du centre,
   plus élégant depuis que le sous-titre et les chiffres sont partis.
   Le mobile (≤820px) garde ses paddings courts : hauteur au contenu. */
@media (min-width:821px){
  /* Contenu ancré au BAS du hero (demande du 2026-08-19) : le flex
     colonne pousse tout vers la fin, la vidéo respire au-dessus. */
  .hero{padding:88px 0 64px;justify-content:flex-end}
}

/* Accroche alignée sur le HAUT du formulaire (2026-08-19) : la
   grille duo centrait les deux colonnes l'une sur l'autre, le
   formulaire étant le plus haut, le titre flottait à mi-hauteur.
   En dessous de 1000px la grille est en 1 colonne : sans objet. */
@media (min-width:1001px){
  /* Bas alignés : le bloc étant ancré en bas du hero, pitch et
     formulaire terminent sur la même ligne d'horizon. */
  .hero__grid--duo{align-items:end}
}

/* ============================================================
   SECTION « TROIS UNIVERS » — zigzag éditorial (2026-08-19),
   variante retenue parmi 3 aperçus. Une rangée par société,
   visuel/texte en alternance. .ph-visual = placeholder hachuré
   en attendant les images (1200×800, 3:2, WebP).
   ============================================================ */

/* ---- éléments partagés ---- */
.ph-visual{position:relative;border:2px dashed #cfd6dd;border-radius:16px;display:flex;align-items:center;justify-content:center;min-height:280px;background:repeating-linear-gradient(45deg,#f6f8fa 0 14px,#edf0f3 14px 28px)}
.ph-visual span{font-family:"IBM Plex Mono",monospace;font-size:.72rem;font-weight:600;color:var(--vf-muted);background:#fff;border:1px solid var(--vf-line);padding:7px 14px;border-radius:999px;white-space:nowrap}
.pv-logo{height:34px;width:auto;align-self:flex-start}
.pv-points{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.pv-points li{font-size:.88rem;color:var(--vf-muted);padding-left:22px;position:relative}
.pv-points li::before{content:"✓";position:absolute;left:0;font-weight:800;color:var(--vf-accent-dark)}
.pv-cta{display:inline-flex;align-self:flex-start;padding:11px 18px;border-radius:10px;font-weight:700;font-size:.92rem;text-decoration:none;transition:transform .12s ease,filter .15s ease}
.pv-cta:hover{transform:translateY(-2px);filter:brightness(1.08)}
.pv-cta--form{background:#FABA20;color:var(--encre)} /* jaune demandé 2026-08-19 (ex --form bleu) */
.pv-cta--loc{background:var(--loc);color:var(--encre)}
.pv-cta--emploi{background:#163777;color:#fff} /* bleu nuit demandé 2026-08-19 (ex --emploi vert) */

/* ---- V1 : zigzag éditorial ---- */
.pv1-row{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center;padding:36px 0}
.pv1-row + .pv1-row{border-top:1px solid var(--vf-line)}
.pv1-row--rev .pv1-media{order:2}
.pv1-body{display:flex;flex-direction:column;gap:12px}
.pv1-body h3{margin:0;font-size:1.6rem;color:var(--vf-navy)}
.pv1-body p{margin:0;color:var(--vf-muted);font-size:.95rem}
@media (max-width:900px){
  .pv1-row{grid-template-columns:1fr;gap:20px;padding:28px 0}
  .pv1-row--rev .pv1-media{order:0}
  .pv1-media{min-height:200px}
}


/* Cases visuels du zigzag au ratio DÉFINITIF 3:2 (2026-08-19) : le
   placeholder montre les proportions exactes des futures images, et
   une <img> déposée dedans remplit la case, recadrée au centre. */
.pv1-media{aspect-ratio:3/2;min-height:0}
.pv1-media img{width:100%;height:100%;object-fit:cover;border-radius:14px;display:block}

/* ============================================================
   PACK VEDETTE — cadre « Halo dégradé » (2026-08-19), retenu
   parmi 8 aperçus commutables. S'applique aux DEUX packs
   vedettes (« Le plus choisi » de #packs et « Fortement
   recommandé » des ventes flash) et REMPLACE l'habillage doré
   animé d'origine, défini plus haut dans ce fichier et
   neutralisé ici (texte rouge clignotant, étoile, shimmer,
   pulsation) : bordure en dégradé conique ambre→orange→bleu en
   rotation lente, libellé en texte dégradé, le reste immobile.
   ============================================================ */
@property --rvl-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes rvl-border-spin{to{--rvl-angle:360deg}}
.vfs .row.featured,
.pack-card--reco{
  border:2px solid transparent;border-color:transparent;
  background:linear-gradient(#fff,#fff) padding-box,
    conic-gradient(from var(--rvl-angle),var(--vf-accent),#ff8a3d,var(--form),var(--vf-accent)) border-box;
  animation:rvl-border-spin 7s linear infinite;
  box-shadow:0 16px 44px rgba(227,119,47,.20);
}
.vfs .row.featured::before{display:none}
.pack-card--reco::before{display:none}
.vfs .row .reco-ribbon,
.pack-reco{background:#fff;color:var(--vf-navy);border-bottom:1px solid var(--vf-line);box-shadow:none}
.vfs .row .reco-ribbon::after,
.pack-reco::after{animation:none;background:none}
.vfs .row .reco-ribbon .ribbon-text,
.vflash .pack-reco__txt{animation:none;text-shadow:none;background:linear-gradient(90deg,#D8790A,var(--form));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:900}
.vfs .row .reco-ribbon .star{animation:none}
.pack-reco .star{animation:none;color:#ff8a3d}
@media (prefers-reduced-motion:reduce){
  .vfs .row.featured,
  .pack-card--reco{animation:none}
}

/* ============================================================
   OFFRES À LA UNE (#alaune) — v2 du 2026-08-19 : les cartes
   vedettes réelles (pack-card--reco + 3 rows featured des ventes
   flash) sont CLONÉES ici par site-v2.js. Leurs styles viennent
   de leurs classes d'origine (.vflash / .vfs) ; ne reste que la
   respiration entre les deux blocs. Le CSS « tickets » a été
   retiré avec le système du même nom.
   ============================================================ */
#alaune{padding-top:10px;padding-bottom:6px}
#alaune .eyebrow{margin-bottom:14px}
#alaune > .vflash + .vflash{margin-top:14px}

/* ============================================================
   RACCOURCI AVIS GOOGLE dans le hero (2026-08-19) : pastille
   verre dépoli sous les boutons, logo G, étoiles ambre, lien
   vers le panneau d'avis officiel de la fiche FORMAFORCE.
   Chiffres relevés en direct le 2026-08-19 : 4,8 — 258 avis.
   ============================================================ */
.hero__gscore{display:inline-flex;align-items:center;gap:10px;margin-top:20px;padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-decoration:none;color:#fff;transition:background .15s ease,transform .12s ease}
.hero__gscore:hover{background:rgba(255,255,255,.18);transform:translateY(-1px)}
.hero__gscore svg{width:18px;height:18px;flex:none}
.hero__gscore-stars{color:var(--vf-accent);font-size:.85rem;letter-spacing:2px;line-height:1}
.hero__gscore b{font-weight:800;font-size:.95rem}
.hero__gscore small{font-family:"IBM Plex Mono",monospace;font-size:.68rem;color:rgba(255,255,255,.75);white-space:nowrap}
@media (max-width:560px){
  .hero__gscore{gap:8px;padding:8px 13px}
  .hero__gscore small{white-space:normal}
}


/* ============================================================
   HEADER UNE SEULE LIGNE EN DESKTOP (2026-08-19) : la nav reste
   horizontale jusqu'a 1000px (burger en dessous — le seuil 1150
   datait du header surcharge d'avant), interdiction de replier
   les liens sur deux lignes, et compaction douce sous 1240px
   pour que logo + nav + boutons tiennent sans deborder.
   ============================================================ */
@media (min-width:1001px){
  header.top nav.main{flex-wrap:nowrap}
  header.top nav.main a{white-space:nowrap}
}

/* Le logo FORMAFORCE du header etait taille 170px pour un co-branding
   visible seulement au-dessus de 1500px ; reaffiche des 1301px, il doit
   tenir dans le wrap de 1240 avec la nav et les boutons : 130px, la
   meme taille que le pied de page. */
header.top .cobrand__ff img{width:130px}
header.top .cobrand__by{padding-left:12px}

/* La rangée mesurait 1257px pour un conteneur de 1200 : elle n'a
   jamais tenu, le débordement était simplement masqué par les marges
   des très grands écrans. Compaction desktop globale : gouttières du
   conteneur 22->14, liens nav resserrés, boutons compte resserrés —
   la rangée passe à ~1165px, co-branding compris. */
@media (min-width:1001px){
  header.top .top__in{gap:14px}
  header.top nav.main{gap:2px}
  header.top nav.main a{font-size:.88rem;padding:8px 9px}
  header.top .top__auth{font-size:.82rem;padding:7px 12px}
}
/* Marche 1001-1100 : sans le co-branding (masqué <=1300) il reste
   moins de 980px utiles — un cran de plus. */
@media (min-width:1001px) and (max-width:1100px){
  header.top nav.main a{font-size:.84rem;padding:8px 7px}
  header.top .top__auth{padding:7px 10px;font-size:.78rem}
}

/* Logo IDPPE du zigzag (2026-08-19) : son dessin est bien plus compact
   que les lettrages FORMAFORCE/REVALOCA — à hauteur égale (34px) ses
   lettres paraissaient minuscules. 62px aligne la taille de lettre
   perçue sur celle des deux autres maisons. */
.pv-logo--idppe{height:62px}

/* Logo officiel FORMAFORCE dans le zigzag (2026-08-19, repris du site
   forma-force.fr : éclair + lettrage bleu + baseline). Même logique
   que le logo IDPPE : plus compact que l'ancien lettrage seul, on
   compense en hauteur pour une taille de lettre perçue équivalente.
   Header et footer gardent la version blanche (fond encre). */
.pv-logo--ff{height:56px}

/* Badge Google DANS la rangée des boutons (2026-08-19) : même ligne
   que « Générer un devis » et « Voir le catalogue ». */
.hero__actions{align-items:center}
.hero__actions .hero__gscore{margin-top:0}

/* Sur la ligne des boutons, le badge complet (369px) faisait passer
   la rangée à 768px pour une colonne de 640 : en desktop il se
   compacte (G + étoiles + note, détail en infobulle/aria) ; en
   mobile la rangée se replie et le libellé complet réapparaît. */
@media (min-width:821px){
  .hero__actions .hero__gscore small{display:none}
}

/* H1 du hero : chaque phrase sur SA ligne (br), TAILLE 40px PARTOUT
   (demande du 2026-08-19). Entre 1001 et 1120px la colonne pitch
   descendait sous les ~615px que demande « Trouvez vos futurs
   collaborateurs. » : plutôt que de réduire la police, on garantit la
   largeur du pitch (>=620px) en resserrant la gouttière et en laissant
   le formulaire absorber le reste. Sous 1001px la grille est en une
   colonne : la place revient d'elle-même. */
@media (min-width:1001px) and (max-width:1120px){
  .hero__grid--duo{grid-template-columns:minmax(620px,640px) minmax(0,1fr);gap:28px}
}


/* ============================================================
   Barre d'informations + Parcours (2026-08-21)
   ============================================================ */

/* --- barre utilitaire, AVANT le header, donc non collante --------------
   Elle defile : le header est deja sticky et porte le bandeau ventes flash.
   #1D242B se distingue du navy (#14181B) sans introduire une 4e couleur. */
.infobar{background:#1D242B;border-bottom:1px solid rgba(255,255,255,.07);
  font-family:"IBM Plex Mono",monospace;font-size:.735rem;letter-spacing:.015em}
.infobar__in{max-width:var(--max);margin:0 auto;padding:0 20px;display:flex;
  align-items:center;justify-content:space-between;gap:10px 24px;flex-wrap:wrap}
.infobar ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;
  gap:6px 22px;flex-wrap:wrap}
.infobar li{display:flex;align-items:center;gap:7px;color:rgba(255,255,255,.72);
  white-space:nowrap;min-height:38px}
.infobar a{color:rgba(255,255,255,.72);text-decoration:none;display:inline-flex;
  align-items:center;gap:7px;border-bottom:1px solid transparent;
  transition:color .15s ease,border-color .15s ease}
.infobar a:hover{color:#fff;border-bottom-color:var(--vf-accent)}
.infobar a:focus-visible{outline:2px solid var(--vf-accent);outline-offset:3px;border-radius:2px}
.infobar b{font-weight:600;color:rgba(255,255,255,.55)}
.infobar__i{width:14px;height:14px;flex:none;stroke:var(--vf-accent);stroke-width:1.9;
  fill:none;stroke-linecap:round;stroke-linejoin:round}
/* Les libelles courts ne servent qu'au mobile ; l'un des deux est toujours
   masque, donc jamais de doublon lu par un lecteur d'ecran. */
.infobar .ib-short{display:none}

@media (max-width:1120px){ .infobar .ib-adr{display:none} }
@media (max-width:900px){  .infobar .ib-hrs{display:none} }
@media (max-width:620px){
  /* Les trois coordonnees completes prendraient 3 lignes et pousseraient le
     hero de ~90 px. On bascule sur des verbes courts, une seule ligne. */
  .infobar__in{justify-content:center}
  .infobar .ib-long{display:none}
  .infobar .ib-short{display:inline}
  .infobar ul{gap:0 18px}
  .infobar li{min-height:36px}
}

/* --- parcours en 5 etapes ---------------------------------------------
   Remplace la liste verticale bordee (.etapes) : meme contenu, mais chaque
   etape porte desormais une icone et le jalon qui la conclut, et l'etape
   « acceptation -> commande + facture » — qui existe dans le produit depuis
   commande_accepter_devis() — n'y figurait pas du tout. */
.proc{list-style:none;margin:0;padding:0;counter-reset:p;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(212px,1fr))}
.proc__s{position:relative;counter-increment:p;background:#fff;
  border:1px solid var(--vf-line);border-radius:14px;padding:20px 18px;
  display:flex;flex-direction:column;gap:9px;
  box-shadow:0 1px 2px rgba(16,20,24,.05);
  transition:transform .2s ease,box-shadow .25s ease,border-color .2s ease}
.proc__s:hover{transform:translateY(-3px);border-color:var(--vf-accent);
  box-shadow:0 16px 32px -20px rgba(16,20,24,.55)}
.proc__hd{display:flex;align-items:center;gap:11px}
.proc__i{width:38px;height:38px;border-radius:10px;background:var(--vf-accent-soft);
  display:grid;place-items:center;flex:none}
.proc__i svg{width:20px;height:20px;stroke:var(--vf-accent-dark);stroke-width:1.8;
  fill:none;stroke-linecap:round;stroke-linejoin:round}
.proc__n{font-family:"IBM Plex Mono",monospace;font-size:.68rem;font-weight:600;
  letter-spacing:.14em;color:var(--vf-accent-dark)}
.proc__n::before{content:counter(p,decimal-leading-zero)}
.proc__s h3{margin:0;font-size:1rem;line-height:1.28}
.proc__s p{margin:0;color:var(--encre-60);font-size:.885rem;line-height:1.5}
.proc__tag{margin-top:auto;padding-top:11px;border-top:1px dashed var(--vf-line);
  font-family:"IBM Plex Mono",monospace;font-size:.645rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--encre-40)}
/* Connecteur : seulement quand les 5 cartes tiennent reellement sur UNE ligne.
   En dessous la grille se replie et un trait horizontal pointerait dans le vide. */
@media (min-width:1180px){
  .proc{grid-template-columns:repeat(5,1fr)}
  .proc__s:not(:last-child)::after{content:"";position:absolute;top:39px;right:-12px;
    width:12px;height:1px;background:var(--vf-line)}
}
@media (prefers-reduced-motion:reduce){ .proc__s:hover{transform:none} }


/* WCAG 1.4.11 (2026-08-21) — la bordure des champs du formulaire hero etait
   #E2E6EA (= --vf-line) sur un champ blanc dans une carte blanche : 1,25:1,
   donc aucune limite visible. On NE touche PAS --vf-line, qui dessine 28
   autres traits (cartes, separateurs, .proc) ou 1.4.11 ne s'applique pas :
   c'est une limite de COMPOSANT INTERACTIF, qui doit atteindre 3:1, et non
   un filet decoratif. #8A9199 mesure 3,19:1 sur blanc. */
.hero-form__field,
.hero-form select,
.hero-form input{border-color:#8A9199}


/* Liens legaux au pied de page (2026-08-21).
   `mentions-legales` et `confidentialite` n'avaient AUCUN lien entrant sur le
   site : on ne pouvait les atteindre qu'en tapant l'URL. Au-dela du referencement
   c'est une exigence — LCEN art. 6-III pour les mentions legales, RGPD art. 13
   pour la politique de confidentialite : les deux doivent etre directement
   accessibles depuis le site. */
.bas__liens{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0 0 12px;
  padding-top:16px;border-top:1px solid rgba(255,255,255,.10)}
.bas__liens a{color:rgba(255,255,255,.62);text-decoration:none;font-size:.82rem;
  border-bottom:1px solid transparent;transition:color .15s ease,border-color .15s ease}
.bas__liens a:hover{color:#fff;border-bottom-color:var(--vf-accent)}
.bas__liens a:focus-visible{outline:2px solid var(--vf-accent);outline-offset:3px;border-radius:2px}