/* ============================================================
   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:#F2B10A; /* = 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:1150px){ 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(242,177,10,.14);color:#ffd889;
  border:1px solid rgba(242,177,10,.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(242,177,10,.65)}
  70%,100%{box-shadow:0 0 0 9px rgba(242,177,10,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}

/* .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(242,177,10,.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(242,177,10,.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(242,177,10,.55)}
  55%    {box-shadow:0 0 0 16px rgba(242,177,10,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(242,177,10,.16);color:#ffd889;border:1px solid rgba(242,177,10,.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(242,177,10,.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(242,177,10,.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(242,177,10,.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:1500px){
  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;
}

/* ============================================================
   ÉCOSYSTÈME — les trois marques et le cycle qui les relie
   (ajouté le 2026-08-19)
   ------------------------------------------------------------
   Pourquoi une section de plus alors que #pitch montre déjà les
   trois logos : #pitch dit QUI ils sont, pas ce qu'ils se passent
   entre eux. Un visiteur qui arrive pour un CACES ne devine pas
   qu'il peut louer l'engin sur lequel il forme, ni recruter le
   conducteur déjà certifié. C'est le parcours complet qui vend,
   pas la juxtaposition de trois logos.

   Le code couleur n'est pas décoratif : il reprend, sans en
   inventer un quatrième, les trois accents déjà porteurs de sens
   dans tout le site — --form (bleu, formation), --loc (ambre,
   matériel), --emploi (vert, emploi). Une étape du cycle porte
   donc la couleur de la marque qui l'exécute, et le lecteur fait
   le lien sans légende.
   ============================================================ */

/* ------------------------------------------------------------
   Une section par structure — FORMAFORCE, REVALOCA, IDPPE
   ------------------------------------------------------------
   Remplace les trois cartes côte à côte (.eco-card), retirées le
   même jour : à largeur égale et gabarit égal, elles se lisaient
   comme un tableau comparatif, et aucune des trois n'avait la
   place de dire ce qu'elle fait.

   La colonne d'identité est FIXE (330px) et le discours occupe le
   reste : c'est ce qui garde les trois blocs alignés entre eux
   malgré des textes de longueurs différentes. Le sens s'inverse
   sur le bloc du milieu (.soc--rev) pour que trois sections
   successives ne forment pas un seul pavé.
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   Les couleurs viennent des LOGOS, pas de la palette du site.
   Échantillonnées sur les trois fichiers réellement servis
   (assets/*.webp), teinte dominante hors blanc et hors encre :
     FORMAFORCE  #F0B418  l'éclair doré
     REVALOCA    #E46C30  le chevron du R
     IDPPE       #5454D8  le pétale violet
   Aucune n'est utilisable telle quelle pour du texte sur blanc
   (1,87:1 · 3,24:1 · 5,77:1) : --m-txt est la même teinte
   assombrie jusqu'à 4,5:1, --m-doux la même éclaircie en lavis
   de fond, et --m-sur la couleur lisible SUR la teinte pleine.
   Les valeurs ont été calculées, pas choisies à l'œil.
   ------------------------------------------------------------ */
.soc--form  {--m:#F0B418;--m-txt:#936D0A;--m-doux:#FDF8EA;--m-sur:var(--encre,#14181B)}
.soc--loc   {--m:#E46C30;--m-txt:#C35219;--m-doux:#FCF1EB;--m-sur:var(--encre,#14181B)}
.soc--emploi{--m:#5454D8;--m-txt:#4A4CD0;--m-doux:#ECECFB;--m-sur:#fff}

/* Chaque structure porte son propre lavis, du haut vers le blanc : c'est ce
   qui les distingue au premier coup d'œil, là où l'alternance grise/blanche
   les rendait interchangeables. */
.soc{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--m-doux) 0%,#fff 58%)}

/* Le numéro d'ordre, en filigrane. Décoratif — aria-hidden côté balisage —
   il donne à chaque section un repère visuel unique sans une ligne de texte
   de plus. */
/* Il vit DANS la carte d'identité, coin haut-droit. Posé en fond de section,
   il tombait derrière cette même carte sur les blocs inversés et par-dessus le
   titre sur les autres — invisible d'un côté, gênant de l'autre. */
.soc__aside{position:relative}
.soc__num{
  position:absolute;right:16px;top:10px;pointer-events:none;user-select:none;
  font-size:54px;font-weight:900;line-height:1;letter-spacing:-.05em;
  color:var(--m);opacity:.18;
}
.soc .wrap{position:relative;z-index:1}

.soc__grid{display:grid;grid-template-columns:330px minmax(0,1fr);gap:46px;align-items:start}
.soc--rev .soc__grid{grid-template-columns:minmax(0,1fr) 330px}
.soc--rev .soc__aside{order:2}

.soc__aside{
  background:var(--blanc,#fff);border:1px solid var(--vf-line,#e2e6ea);
  border-radius:16px;border-top:4px solid var(--vf-line,#e2e6ea);
  padding:24px 22px;box-shadow:0 1px 2px rgba(16,20,24,.05);
  transition:transform .28s var(--ease-out),box-shadow .28s var(--ease-out);
}
.soc__aside:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(18,33,47,.12)}
.soc__aside{border-top-color:var(--m)}

.soc__logo{height:38px;width:auto;max-width:190px;object-fit:contain;object-position:left center;display:block}
/* Le lettrage IDPPE est presque carré là où les deux autres sont des bandeaux
   très allongés : à hauteur égale il rend deux fois plus petit. Accordé à l'œil. */
.soc--emploi .soc__logo{height:48px;max-width:210px}   /* lettrage presque carré : accordé à l'œil */

.soc__role{
  display:inline-flex;align-items:flex-start;gap:7px;margin-top:14px;
  font-family:"IBM Plex Mono",monospace;font-size:.67rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;line-height:1.5;
}
.soc__role::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none;margin-top:.3em}
.soc__role{color:var(--m-txt)}

.soc__claim{margin:14px 0 0;font-size:.95rem;font-style:italic;color:var(--encre);line-height:1.45}

.soc__facts{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--vf-line,#e2e6ea);display:grid;gap:14px}
.soc__facts li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:baseline}
.soc__facts b{
  font-size:1.45rem;font-weight:900;line-height:1;letter-spacing:-.02em;white-space:nowrap;
}
.soc__facts b{color:var(--m-txt)}
.soc__facts span{font-size:.82rem;color:var(--vf-muted,#5c6672);line-height:1.4}

.soc__body h2{margin:0 0 12px}
.soc__body .lead{margin-bottom:20px}
.soc__list{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:11px}
.soc__list li{position:relative;padding-left:26px;font-size:.93rem;line-height:1.5;color:var(--encre)}
/* Coche dessinée en CSS : le pied de page proscrit les émojis comme
   pictogrammes (style.css 195-199), la même règle vaut ici. */
.soc__list li::before{
  content:"";position:absolute;left:4px;top:.4em;width:10px;height:5px;
  border-left:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg);opacity:.9;
}
.soc__list li::before{color:var(--m-txt)}
.soc__cta{display:flex;flex-wrap:wrap;gap:10px;margin:0}

/* L'intro de l'écosystème n'est plus qu'un chapeau : ses 72px de bas la
   détachaient de la première structure qu'elle annonce. */
#ecosysteme{padding-bottom:0}

/* ------------------------------------------------------------
   Le cycle. Six étapes, reliées par un filet qui se dessine à
   l'arrivée à l'écran. Le filet est un pseudo-élément en
   `scaleX`, pas un SVG : rien à charger, rien à mesurer, et il
   suit la largeur réelle de la grille à toutes les tailles.
   ------------------------------------------------------------ */
.eco-cycle{position:relative}
.eco-cycle__t{
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--vf-muted,#5c6672);
  display:flex;align-items:center;gap:10px;margin:0 0 22px;
}
.eco-cycle__t::before{content:"";width:26px;height:2px;background:var(--vf-accent,#F2B10A);flex:none}

/* ------------------------------------------------------------
   La chaîne — refonte du 2026-08-19 (soir).

   Six colonnes sur une seule ligne donnaient 186 px par étape :
   les titres passaient à deux lignes, les descriptions à cinq,
   et le filet qui les reliait ne survivait à aucun repli. Trois
   colonnes sur deux rangées laissent ~390 px par étape — une
   vraie carte lisible — et le même découpage tient de 1440 px à
   390 px sans changer de logique, seulement de nombre de
   colonnes.

   Le sens de lecture ne repose plus sur un trait continu (qui
   mentait dès qu'il y avait deux rangées) mais sur le numéro,
   la couleur de la structure qui exécute l'étape, et un chevron
   entre deux cartes d'une même rangée.
   ------------------------------------------------------------ */
.eco-steps{
  list-style:none;margin:0;padding:0;position:relative;
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
}
.eco-step{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--vf-line,#e2e6ea);border-radius:16px;
  border-top:3px solid var(--et);padding:20px 22px 22px;
  box-shadow:0 1px 2px rgba(16,20,24,.05);
  transition:transform .24s var(--ease-out),box-shadow .24s var(--ease-out);
}
/* Les couleurs des étapes sont celles des LOGOS, comme les sections de
   structure plus haut : sans quoi la même marque aurait deux couleurs à deux
   endroits de la même page. --et-sur est la couleur lisible SUR la pastille
   pleine — l'or et l'orange demandent de l'encre (9,6:1 et 5,5:1), le violet
   et le vert du blanc. */
.eco-step--form  {--et:#F0B418;--et-sur:var(--encre,#14181B)}   /* FORMAFORCE */
.eco-step--loc   {--et:#E46C30;--et-sur:var(--encre,#14181B)}   /* REVALOCA   */
.eco-step--idppe {--et:#5454D8;--et-sur:#fff}                   /* IDPPE      */
.eco-step--emploi{--et:var(--emploi);--et-sur:#fff}             /* REVALO — CVthèque */
.eco-step:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(18,33,47,.12)}

/* Chevron entre deux cartes d'une même rangée. Le :nth-child(3n) ne l'a pas :
   il termine sa rangée, la suite est en dessous. */
.eco-step::after{
  content:"";position:absolute;right:-13px;top:34px;z-index:2;
  width:9px;height:9px;border-right:2px solid var(--vf-line,#e2e6ea);border-bottom:2px solid var(--vf-line,#e2e6ea);
  transform:rotate(-45deg);
}
.eco-step:nth-child(3n)::after,.eco-step:last-child::after{display:none}

.eco-step__n{
  width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:"IBM Plex Mono",monospace;font-weight:700;font-size:.92rem;
  background:#fff;border:2px solid var(--et);color:var(--encre);margin:0 0 12px;
  transition:background .4s var(--ease-out),color .4s var(--ease-out),transform .4s var(--ease-spring);
}
.eco-steps.is-drawn .eco-step__n{background:var(--et);color:var(--et-sur,#fff)}
.eco-step:hover .eco-step__n{transform:scale(1.08)}

.eco-step__who{
  font-family:"IBM Plex Mono",monospace;font-size:.66rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:7px;display:block;
}
/* Sur blanc, ni l'or ni l'orange ne passent : on reprend les variantes
   assombries à 4,5:1 calculées pour les sections de structure. */
.eco-step--form   .eco-step__who{color:#936D0A}
.eco-step--loc    .eco-step__who{color:#C35219}
.eco-step--idppe  .eco-step__who{color:#4A4CD0}
.eco-step--emploi .eco-step__who{color:var(--emploi-txt)}
.eco-step__t{font-size:1.02rem;font-weight:800;margin:0 0 8px;line-height:1.25}
.eco-step__d{font-size:.89rem;color:var(--vf-muted,#5c6672);margin:0;line-height:1.55}

.eco-loop{
  margin-top:26px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:16px 20px;border:1px dashed var(--vf-line,#e2e6ea);border-radius:14px;
  background:rgba(242,177,10,.06);
}
.eco-loop__i{
  width:34px;height:34px;flex:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--vf-accent,#F2B10A);color:var(--encre);
}
.eco-loop__i svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.eco-cycle.is-drawn .eco-loop__i svg{animation:eco-turn .9s var(--ease-out) .5s both}
@keyframes eco-turn{from{transform:rotate(-180deg)}to{transform:rotate(0)}}
.eco-loop__x{margin:0;font-size:.92rem;color:var(--encre)}

@media (max-width:1000px){
  /* La colonne d'identité passe au-dessus du discours : à moins de
     1000px, 330px de fixe ne laissent plus de largeur lisible au texte. */
  .soc__grid,.soc--rev .soc__grid{grid-template-columns:1fr;gap:26px}
  .soc--rev .soc__aside{order:0}
  /* Deux colonnes : le chevron ne sépare plus que les rangs impairs. */
  .eco-steps{grid-template-columns:repeat(2,1fr)}
  .eco-step:nth-child(3n)::after{display:block}
  .eco-step:nth-child(2n)::after{display:none}
}
@media (max-width:620px){
  /* Une seule colonne : le chevron passe SOUS la carte et pointe vers le bas,
     puisque l'étape suivante n'est plus à droite. */
  .eco-steps{grid-template-columns:1fr;gap:14px}
  .eco-step::after,.eco-step:nth-child(3n)::after,.eco-step:nth-child(2n)::after{display:block}
  .eco-step:last-child::after{display:none}
  .eco-step::after{right:auto;left:50%;top:auto;bottom:-12px;transform:translateX(-50%) rotate(45deg)}
  .soc__aside{padding:20px 18px}
}

@media (prefers-reduced-motion:reduce){
  .soc__aside,.eco-step__n{transition:none}
  .eco-cycle.is-drawn .eco-loop__i svg{animation:none}
}

/* ============================================================
   Catalogue allégé — la barre d'actions sous les familles
   (2026-08-19)
   ------------------------------------------------------------
   Deux gestes de nature différente côte à côte : dérouler les
   trois familles restantes (secondaire, reste sur la page) et
   partir vers le catalogue détaillé (primaire, change de page).
   Le second porte donc l'ambre de la marque, le premier non.
   ============================================================ */
.cat-more{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
/* `hidden` est un attribut, pas une classe : sans ce rappel, le
   `display:grid` des rangées le remporterait sur le display:none
   par défaut du navigateur et le tiroir resterait ouvert. */
#cat-extra[hidden]{display:none}
#cat-extra>.catrow:first-child{margin-top:18px}
@media (max-width:620px){
  .cat-more{flex-direction:column;align-items:stretch}
  .cat-more .btn{width:100%}
}

/* ============================================================
   Sommaire de page (/entreprises) — 2026-08-19
   ------------------------------------------------------------
   La page est passée de six à huit rubriques et de 47 à ~99 Ko
   en accueillant le catalogue détaillé. Sans sommaire, la
   moitié de son contenu n'existe que pour qui fait défiler
   jusqu'au bout.

   <nav> et non une simple liste de liens : c'est un moyen de
   navigation, il doit s'annoncer comme tel aux lecteurs
   d'écran, d'où le aria-label côté balisage.
   ============================================================ */
.sommaire{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.sommaire a{
  display:inline-flex;align-items:center;
  padding:7px 14px;border:1px solid var(--vf-line,#e2e6ea);border-radius:999px;
  background:#fff;color:var(--encre);text-decoration:none;
  font-size:.82rem;font-weight:650;line-height:1.2;
  transition:border-color .18s ease,transform .18s ease,background .18s ease;
}
.sommaire a:hover,.sommaire a:focus-visible{
  border-color:var(--vf-accent,#F2B10A);background:var(--vf-accent-soft,#FDF3D8);transform:translateY(-1px);
}
@media (prefers-reduced-motion:reduce){.sommaire a{transition:none}}
@media (max-width:520px){.sommaire a{font-size:.78rem;padding:6px 11px}}

/* Le chapeau « Tarifs à la catégorie » introduit les sept sections .vfs qui
   le suivent immédiatement : les 72px de bas de section, ajoutés aux 34px de
   haut de la première .vfs et aux 38px du .section__head, ouvraient ~110px de
   vide entre une phrase et ce qu'elle annonce. Un chapeau doit toucher son
   contenu. */
#catalogue-unitaire{padding-bottom:0}
#catalogue-unitaire .section__head{margin-bottom:0}


/* ============================================================
   Certifications & garanties — trois colonnes compactes
   (2026-08-19, soir)
   ------------------------------------------------------------
   Le bloc était en deux colonnes plus une carte pleine largeur,
   avec des logos de 200×134 : trois marques de confiance
   occupaient plus de place que la section qui les explique.
   Elles passent sur une seule ligne de trois colonnes, logo à
   gauche du texte, bouton de téléchargement en pied de carte.
   Les logos gardent object-fit:contain — les trois fichiers
   n'ont pas le même rapport et aucun ne doit être recadré.
   ============================================================ */
@media (min-width:861px){
  .certs{grid-template-columns:repeat(3,1fr);gap:16px}
  /* La carte « Prévention des risques » ne traverse plus la grille :
     elle est la troisième colonne. */
  .cert--wide{grid-column:auto}
}

/* Logo EN HAUT, texte DESSOUS — et non plus côte à côte. Le logo est ce que
   le visiteur reconnaît d'un coup d'œil : il occupe toute la largeur de la
   carte, sur son propre aplat, et le texte se lit dessous d'un seul tenant
   au lieu d'être poussé dans une colonne de 140 px.
   `overflow:hidden` sur la carte : sans lui, l'aplat du logo déborderait des
   16 px d'arrondi. */
.cert{padding:0 0 18px;overflow:hidden;display:flex;flex-direction:column}
.cert:has(.cert__logo){display:flex;flex-direction:column;align-items:stretch;gap:0}
.cert__logo{
  width:100%;height:128px;padding:22px 26px;margin:0;
  background:var(--vf-panel,#f6f8fa);border:0;border-bottom:1px solid var(--vf-line,#e2e6ea);
  border-radius:0;object-fit:contain;
}
.cert__body{flex:1 1 auto;min-width:0;padding:18px 20px 0}
.cert__body b{font-size:1.02rem;line-height:1.25}
.cert__d{margin:8px 0 0;color:var(--vf-muted,#5c6672);font-size:.86rem;line-height:1.5}
.cert .valid{font-size:.79rem;margin-top:10px}
.cert-dl{flex:none;margin:14px 0 0;padding:0 20px}
.cert-dl a{width:100%;justify-content:center;padding:10px 14px;font-size:12.5px}
@media (max-width:860px){
  .cert__logo{height:112px;padding:18px 22px}
}

/* ============================================================
   Le cycle — mise en mouvement (2026-08-19, soir)
   ------------------------------------------------------------
   Le filet se traçait, mais les six pastilles s'allumaient
   toutes au même instant : le trait racontait un parcours, les
   étapes non. Elles s'allument maintenant DANS L'ORDRE, chacune
   décalée de son rang (--i, posé sur le <li>), et un point
   parcourt le filet une fois pour donner le sens de lecture.

   Le décalage est en `animation-delay` et le remplissage en
   `animation-fill-mode: backwards` — pas `both` : avec `both`,
   la dernière image de l'animation resterait imposée et le
   survol (scale 1.08) n'aurait plus aucun effet ensuite.
   ============================================================ */
.eco-step{transition:transform .25s var(--ease-out)}
.eco-step:hover{transform:translateY(-3px)}

/* Remplissage de la pastille, décalé par rang. */
.eco-steps.is-drawn .eco-step__n{
  transition-delay:calc(var(--i,0) * .14s);
  animation:eco-pop .5s var(--ease-spring) calc(var(--i,0) * .14s) 1 backwards;
}
@keyframes eco-pop{
  0%{transform:scale(.8)}
  60%{transform:scale(1.07)}
  100%{transform:scale(1)}
}
/* Le texte de l'étape suit sa pastille. */
.eco-steps.is-drawn .eco-step__who,
.eco-steps.is-drawn .eco-step__t,
.eco-steps.is-drawn .eco-step__d{
  animation:eco-monte .55s var(--ease-out) calc(.06s + var(--i,0) * .14s) 1 backwards;
}
@keyframes eco-monte{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* Le point qui parcourait le filet a été retiré avec le filet lui-même
   (refonte du 2026-08-19 au soir) : il n'avait plus de rail à suivre. La
   progression est désormais portée par le remplissage échelonné des
   pastilles et par les chevrons entre les cartes. */

/* La carte de bouclage respire une fois, après le passage du point. */
.eco-cycle.is-drawn .eco-loop{animation:eco-respire 1.2s var(--ease-out) 2.2s 1 both}
@keyframes eco-respire{
  0%{transform:none;box-shadow:0 0 0 0 rgba(242,177,10,0)}
  40%{transform:translateY(-3px);box-shadow:0 0 0 7px rgba(242,177,10,.16)}
  100%{transform:none;box-shadow:0 0 0 0 rgba(242,177,10,0)}
}

@media (prefers-reduced-motion:reduce){
  .eco-step,.eco-step:hover{transition:none;transform:none}
  .eco-steps.is-drawn .eco-step__n,
  .eco-steps.is-drawn .eco-step__who,
  .eco-steps.is-drawn .eco-step__t,
  .eco-steps.is-drawn .eco-step__d,
  .eco-cycle.is-drawn .eco-loop{animation:none}
}


/* Coche de validité : l'emoji ✅ a été retiré du balisage — il change de
   dessin d'une plateforme à l'autre, n'hérite d'aucune couleur, et s'affiche
   en carré vide partout où la police d'emoji manque. Même règle que les
   pictogrammes du pied de page (style.css §195). */
.cert .valid{display:flex;align-items:flex-start;gap:7px}
.cert .valid::before{
  content:"";flex:none;width:9px;height:5px;margin-top:.42em;
  border-left:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg);
}

/* Le chapeau et la liste d'une section « structure » se calent sur la même
   largeur : .lead est plafonné à 62ch par style.css, la liste ne l'était pas,
   et le paragraphe rendait donc plus étroit que les puces sous lui. */
.soc__body .lead{max-width:72ch}
.soc__list{max-width:76ch}

/* Le cycle a maintenant un chapeau de section complet : sa marge basse
   remplace celle du titre mono qu'il remplace. */
#cycle .section__head{margin-bottom:30px}


/* ------------------------------------------------------------
   Bouton « couleur de marque » + lien sortant
   ------------------------------------------------------------ */
.btn--marque{
  background:var(--m);border-color:var(--m);color:var(--m-sur);
  box-shadow:0 1px 0 rgba(20,24,27,.06);
}
.btn--marque:hover,.btn--marque:focus-visible{
  background:var(--m-txt);border-color:var(--m-txt);color:#fff;
}
/* Ces deux liens QUITTENT le site (forma-force.fr, idppe.com). Le dire est
   une politesse élémentaire ; la flèche est décorative, l'intitulé porte
   déjà le nom du domaine visité. */
.btn .ext{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;margin-left:-2px;
  transition:transform .2s var(--ease-out)}
.btn:hover .ext,.btn:focus-visible .ext{transform:translate(2px,-2px)}

/* ------------------------------------------------------------
   Raccourci vers les trois structures
   ------------------------------------------------------------ */
.soc-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px}
.soc-nav__i{
  display:flex;flex-direction:column;gap:3px;padding:14px 16px;text-decoration:none;
  background:#fff;border:1px solid var(--vf-line,#e2e6ea);border-radius:12px;
  border-left:4px solid var(--m);color:var(--encre);
  transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out),background .2s var(--ease-out);
}
.soc-nav__i b{font-size:.92rem;font-weight:800}
.soc-nav__i span{font-size:.79rem;color:var(--vf-muted,#5c6672)}
.soc-nav__i:hover,.soc-nav__i:focus-visible{transform:translateY(-2px);box-shadow:0 12px 26px rgba(18,33,47,.11);background:var(--m-doux)}
.soc-nav__i--form  {--m:#F0B418;--m-doux:#FDF8EA}
.soc-nav__i--loc   {--m:#E46C30;--m-doux:#FCF1EB}
.soc-nav__i--emploi{--m:#5454D8;--m-doux:#ECECFB}
@media (max-width:760px){.soc-nav{grid-template-columns:1fr}}

/* ------------------------------------------------------------
   Ancres : la barre d'en-tête est COLLANTE (69 px). Sans cette
   marge, tout saut d'ancre — les six familles, le sommaire de
   /entreprises, `entreprises#formation` cité par neuf pages —
   déposait la cible SOUS l'en-tête, invisible. Défaut présent
   depuis toujours, corrigé ici pour tout le site.
   :where() garde une spécificité nulle : n'importe quelle règle
   existante continue de l'emporter.
   ------------------------------------------------------------ */
:where([id]){scroll-margin-top:88px}


/* ============================================================
   Catalogue — la barre d'actions (2026-08-19, soir)
   ------------------------------------------------------------
   C'étaient deux boutons de même gabarit posés côte à côte :
   rien ne disait que l'un déplie trois lignes de plus et que
   l'autre ouvre dix-huit fiches sur une autre page. Le premier
   devient un bouton-tiroir avec son chevron et son compteur ;
   le second, une vraie carte d'appel qui annonce ce qu'on y
   trouve.
   ============================================================ */
.cat-more{display:flex;flex-wrap:wrap;align-items:stretch;gap:14px}

/* --- le tiroir --- */
.cat-plus{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 18px;border:1.5px solid var(--vf-line,#e2e6ea);border-radius:12px;
  background:#fff;color:var(--encre);cursor:pointer;
  font-family:inherit;font-size:.92rem;font-weight:700;line-height:1;
  transition:border-color .2s var(--ease-out),background .2s var(--ease-out),transform .2s var(--ease-out);
}
.cat-plus:hover,.cat-plus:focus-visible{border-color:var(--vf-accent,#F2B10A);background:var(--vf-accent-soft,#FDF3D8);transform:translateY(-1px)}
.cat-plus__chev{
  width:9px;height:9px;flex:none;border-right:2.2px solid currentColor;border-bottom:2.2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .28s var(--ease-spring);
}
.cat-plus[aria-expanded="true"] .cat-plus__chev{transform:rotate(-135deg) translate(-3px,-3px)}
.cat-plus__n{
  display:inline-flex;align-items:center;justify-content:center;min-width:21px;height:21px;padding:0 6px;
  border-radius:999px;background:var(--vf-accent,#F2B10A);color:var(--encre);
  font-family:"IBM Plex Mono",monospace;font-size:.7rem;font-weight:700;
}
.cat-plus[aria-expanded="true"] .cat-plus__n{background:var(--vf-line,#e2e6ea);color:var(--vf-muted,#5c6672)}

/* --- la carte d'appel --- */
.cat-go{
  position:relative;overflow:hidden;flex:1 1 380px;
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;
  padding:14px 20px;border-radius:12px;text-decoration:none;
  background:var(--vf-accent,#F2B10A);color:var(--encre);
  border:1.5px solid var(--vf-accent,#F2B10A);
  transition:transform .2s var(--ease-out),box-shadow .25s var(--ease-out);
}
.cat-go:hover,.cat-go:focus-visible{transform:translateY(-2px);box-shadow:0 14px 30px rgba(242,177,10,.34)}
.cat-go__t{grid-column:1;font-weight:800;font-size:1rem;line-height:1.25}
.cat-go__s{grid-column:1;font-size:.8rem;opacity:.72;line-height:1.3}
.cat-go__fl{
  grid-column:2;grid-row:1/3;display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;background:rgba(20,24,27,.12);
  transition:transform .25s var(--ease-spring),background .2s var(--ease-out);
}
.cat-go__fl svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cat-go:hover .cat-go__fl,.cat-go:focus-visible .cat-go__fl{transform:translateX(4px);background:rgba(20,24,27,.2)}
/* Un reflet traverse la carte au survol — une seule fois, dans le sens de
   lecture, comme la flèche. */
.cat-go::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  background-size:250% 100%;background-position:130% 0;
}
.cat-go:hover::after,.cat-go:focus-visible::after{animation:cat-reflet .85s var(--ease-out) 1 both}
@keyframes cat-reflet{to{background-position:-40% 0}}

@media (max-width:620px){
  .cat-more{flex-direction:column;align-items:stretch}
  .cat-plus{justify-content:center}
  .cat-go{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){
  .cat-plus,.cat-plus__chev,.cat-go,.cat-go__fl{transition:none}
  .cat-go:hover::after,.cat-go:focus-visible::after{animation:none}
}

/* ============================================================
   Sommaire COLLANT des pages longues (2026-08-19, soir)
   ------------------------------------------------------------
   /entreprises fait 99 Ko et huit rubriques. Un sommaire posé
   une fois en haut ne sert qu'à la première seconde ; celui-ci
   suit, et dit en permanence où l'on se trouve.

   Il se colle SOUS l'en-tête (69 px), d'où le top:69px. Le fond
   est opaque à 96 % plutôt que transparent : les rangées du
   catalogue passent dessous, et un fond translucide sans flou
   les rendrait lisibles à travers la barre.
   ============================================================ */
.sommaire-bar{
  position:sticky;top:69px;z-index:40;
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  border-bottom:1px solid var(--vf-line,#e2e6ea);
  box-shadow:0 1px 0 rgba(20,24,27,.03);
}
.sommaire-bar .sommaire{margin:0;padding:11px 0;gap:7px;flex-wrap:nowrap;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none}
.sommaire-bar .sommaire::-webkit-scrollbar{display:none}
.sommaire-bar .sommaire a{flex:none}

/* Rubrique en cours. Calculée au défilement, jamais écrite dans le HTML. */
.sommaire a.is-here{
  background:var(--vf-navy,#14181B);border-color:var(--vf-navy,#14181B);color:#fff;
}
.sommaire a.is-here:hover{background:var(--vf-navy,#14181B);color:#fff}

/* La barre ajoute 47 px au-dessus de tout : sans cela, une ancre déposerait sa
   cible derrière elle exactement comme elle le faisait derrière l'en-tête. */
.p-longue :where([id]){scroll-margin-top:136px}

@media (max-width:620px){
  .sommaire-bar .sommaire{padding:9px 0}
  /* Le défilement horizontal doit atteindre le bord de l'écran, sinon la
     dernière puce reste coincée sous la gouttière du conteneur. */
  .sommaire-bar .wrap{padding-right:0}
  .sommaire-bar .sommaire{padding-right:20px}
}
@media (prefers-reduced-motion:reduce){
  .sommaire-bar{backdrop-filter:none;background:#fff}
}

/* L'en-tête ne fait pas la même hauteur partout : 69 px au-delà de 1150 px,
   71 px en dessous (la barre de confiance passe à la ligne). Une valeur unique
   laissait donc 2 px de contenu défiler entre les deux barres — mesuré, pas
   supposé. */
@media (max-width:1150px){
  .sommaire-bar{top:71px}
  .p-longue :where([id]){scroll-margin-top:140px}
}

/* ------------------------------------------------------------
   Saut direct vers un référentiel, dans la rubrique qui en
   contient sept d'affilée. La barre collante garde ses huit
   rubriques ; ces puces-ci sont contextuelles, là où on en a
   besoin, et n'encombrent rien ailleurs.
   ------------------------------------------------------------ */
.ref-jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.ref-jump__l{
  font-family:"IBM Plex Mono",monospace;font-size:.7rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--vf-muted,#5c6672);
  align-self:center;margin-right:4px;
}
.ref-jump a{
  display:inline-flex;align-items:center;gap:7px;padding:7px 13px;
  border:1px solid var(--vf-line,#e2e6ea);border-radius:999px;background:#fff;
  color:var(--encre);text-decoration:none;font-size:.82rem;font-weight:700;
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
.ref-jump a:hover,.ref-jump a:focus-visible{
  border-color:var(--vf-accent,#F2B10A);background:var(--vf-accent-soft,#FDF3D8);transform:translateY(-1px);
}
.ref-jump a small{font-weight:500;color:var(--vf-muted,#5c6672);font-size:.76rem}
@media (prefers-reduced-motion:reduce){.ref-jump a{transition:none}}

/* Le raccourci porte les LOGOS et non les noms écrits : c'est la marque qu'on
   reconnaît d'un coup d'œil, et les trois lettrages sont déjà servis par la
   page. Hauteur commune, largeur libre — les trois fichiers n'ont pas le même
   rapport, et object-position:left les aligne sur leur bord gauche plutôt que
   sur leur centre, sinon les trois puces paraissent décalées. */
.soc-nav__i{gap:9px}
.soc-nav__logo{
  height:23px;width:auto;max-width:150px;display:block;
  object-fit:contain;object-position:left center;
}
/* Lettrage presque carré : à hauteur égale il rendrait deux fois plus petit. */
.soc-nav__logo--idppe{height:30px;max-width:110px}
@media (max-width:760px){
  .soc-nav__logo{height:21px}
  .soc-nav__logo--idppe{height:27px}
}

/* ============================================================
   PANIER DE DEVIS — panneau du catalogue, barre flottante,
   tiroir (2026-08-19)
   ============================================================ */

/* ---- le chevron du bouton qui déplie ---- */
.catbtn.has-cpan{position:relative}
.catbtn__chev{
  position:absolute;right:12px;top:50%;width:8px;height:8px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-70%) rotate(45deg);opacity:.75;
  transition:transform .25s var(--ease-spring);
}
.catbtn.is-open .catbtn__chev{transform:translateY(-25%) rotate(-135deg)}

/* ---- le panneau ----
   `grid-template-rows:0fr → 1fr` anime une hauteur inconnue sans la mesurer
   en JavaScript : c'est la seule façon d'ouvrir proprement un contenu dont on
   ignore la taille, et elle laisse le contenu accessible au clavier. */
.cpan{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .34s var(--ease-out);
  margin:0;
}
.cpan.is-open{grid-template-rows:1fr;margin:10px 0 4px}
.cpan__in{overflow:hidden;min-height:0}
.cpan.is-open .cpan__in{
  border:1px solid var(--vf-line,#e2e6ea);border-left:4px solid var(--vf-accent,#F2B10A);
  border-radius:14px;background:#fff;padding:20px 22px;box-shadow:0 10px 26px rgba(18,33,47,.07);
}

/* ---- la combinaison recommandée, en tête ---- */
.cpan__reco{
  display:grid;gap:5px;width:100%;text-align:left;cursor:pointer;
  padding:14px 16px;margin:0 0 16px;border-radius:12px;
  border:1.5px solid var(--vf-accent,#F2B10A);background:var(--vf-accent-soft,#FDF3D8);
  font-family:inherit;color:var(--encre);
  transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out);
}
.cpan__reco:hover,.cpan__reco:focus-visible{transform:translateY(-2px);box-shadow:0 12px 26px rgba(242,177,10,.28)}
.cpan__reco-b{
  font-family:"IBM Plex Mono",monospace;font-size:.68rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--vf-accent-dark,#906909);
}
.cpan__reco b{font-size:.98rem;font-weight:800}
.cpan__reco-d{font-size:.83rem;color:var(--vf-muted,#5c6672)}
.cpan__reco-go{font-size:.82rem;font-weight:700;text-decoration:underline}

.cpan__t{margin:0 0 12px}
.cpan__t b{display:block;font-size:.96rem;font-weight:800}
.cpan__t span{font-size:.84rem;color:var(--vf-muted,#5c6672)}

/* ---- les catégories ----
   auto-fill + minmax : une seule règle couvre 11 catégories sur un écran
   large et une colonne sur un téléphone, sans point de rupture à maintenir. */
.cpan__cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:8px}
.cpan__c{
  display:grid;grid-template-columns:auto 1fr;gap:3px 10px;align-items:center;
  padding:9px 12px;border:1.5px solid var(--vf-line,#e2e6ea);border-radius:10px;
  background:#fff;cursor:pointer;transition:border-color .16s ease,background .16s ease;
}
.cpan__c:hover{border-color:var(--vf-accent,#F2B10A)}
.cpan__c.is-on{border-color:var(--vf-accent,#F2B10A);background:var(--vf-accent-soft,#FDF3D8)}
.cpan__c input{grid-row:1/3;width:17px;height:17px;accent-color:var(--vf-accent-dark,#906909);margin:0}
.cpan__c b{font-family:"IBM Plex Mono",monospace;font-size:.8rem;font-weight:700}
.cpan__c span{grid-column:2;font-size:.78rem;color:var(--vf-muted,#5c6672);line-height:1.3}

.cpan__opts{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin-top:14px}
.cpan__opts label{display:grid;gap:5px;font-size:.78rem;font-weight:650;color:var(--vf-muted,#5c6672)}
.cpan__opts select{
  padding:8px 10px;border:1px solid var(--vf-line,#e2e6ea);border-radius:8px;
  font:inherit;font-size:.86rem;background:#fff;color:var(--encre);
}
.cpan__tout{
  padding:8px 14px;border:1px dashed var(--vf-line,#e2e6ea);border-radius:8px;background:#fff;
  font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;color:var(--encre);
}
.cpan__tout:hover{border-color:var(--vf-accent,#F2B10A);background:var(--vf-accent-soft,#FDF3D8)}

.cpan__pied{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--vf-line,#e2e6ea);
}
.cpan__res{font-size:.9rem;color:var(--encre)}
.cpan__res .cpan__ht{color:var(--vf-accent-dark,#906909)}
.cpan__rem{font-size:.78rem;color:var(--emploi-txt,#146B46);font-weight:700}
.cpan__sub{display:block;font-size:.76rem;color:var(--vf-muted,#5c6672);margin-top:3px}
.cpan__act{display:flex;gap:10px;flex-wrap:wrap}
.cpan__add{
  padding:11px 18px;border-radius:10px;border:1.5px solid var(--vf-navy,#14181B);
  background:var(--vf-navy,#14181B);color:#fff;font:inherit;font-size:.88rem;font-weight:700;cursor:pointer;
  transition:background .18s ease,transform .18s ease;
}
.cpan__add:hover:not(:disabled){background:var(--vf-accent-dark,#906909);border-color:var(--vf-accent-dark,#906909);transform:translateY(-1px)}
.cpan__add:disabled{opacity:.42;cursor:not-allowed}
.cpan__add.is-ok{background:var(--emploi-txt,#146B46);border-color:var(--emploi-txt,#146B46)}
.cpan__conf{
  display:inline-flex;align-items:center;padding:11px 18px;border-radius:10px;
  border:1.5px solid var(--vf-line,#e2e6ea);background:#fff;color:var(--encre);
  text-decoration:none;font-size:.88rem;font-weight:700;
}
.cpan__conf:hover{border-color:var(--vf-navy,#14181B)}

/* ---- bouton d'ajout sur une rangée de catégorie (/entreprises) ---- */
.vf-add{
  display:inline-flex;align-items:center;gap:6px;margin-top:7px;
  padding:7px 12px;border:1.5px solid var(--vf-line,#e2e6ea);border-radius:9px;background:#fff;
  font:inherit;font-size:.79rem;font-weight:700;color:var(--encre);cursor:pointer;white-space:nowrap;
  transition:border-color .16s ease,background .16s ease;
}
.vf-add:hover{border-color:var(--vf-accent,#F2B10A);background:var(--vf-accent-soft,#FDF3D8)}
.vf-add.is-ok{border-color:var(--emploi-txt,#146B46);color:var(--emploi-txt,#146B46);background:var(--emploi-soft,#DFF0E7)}

/* ---- barre flottante ----
   En BAS À GAUCHE : la bulle WhatsApp occupe déjà le coin bas-droit sur
   toutes les pages publiques, et deux pastilles superposées seraient
   impossibles à viser au pouce. */
.pnr{position:fixed;left:18px;bottom:18px;z-index:60;display:none}
.pnr.is-on{display:block}
.pnr__btn{
  display:flex;align-items:center;gap:10px;padding:12px 18px;
  border:0;border-radius:999px;background:var(--vf-navy,#14181B);color:#fff;
  font:inherit;font-size:.9rem;font-weight:700;cursor:pointer;
  box-shadow:0 10px 28px rgba(18,33,47,.3);
  transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out);
}
.pnr__btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(18,33,47,.36)}
.pnr__n{
  display:inline-flex;align-items:center;justify-content:center;min-width:23px;height:23px;
  border-radius:999px;background:var(--vf-accent,#F2B10A);color:var(--encre);
  font-family:"IBM Plex Mono",monospace;font-size:.76rem;font-weight:700;
}
.pnr__ht{font-weight:600;opacity:.82;font-size:.84rem}
.pnr__tiroir{
  position:absolute;left:0;bottom:calc(100% + 12px);width:min(94vw,390px);
  background:#fff;border:1px solid var(--vf-line,#e2e6ea);border-radius:16px;
  box-shadow:0 24px 60px rgba(18,33,47,.26);overflow:hidden;
}
.pnr__head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--vf-line,#e2e6ea)}
.pnr__x{border:0;background:none;font-size:1.5rem;line-height:1;cursor:pointer;color:var(--vf-muted,#5c6672);padding:0 4px}
.pnr__liste{list-style:none;margin:0;padding:6px 0;max-height:44vh;overflow-y:auto}
.pnr__l{display:flex;align-items:start;gap:10px;padding:10px 16px;border-bottom:1px solid var(--vf-line,#e2e6ea)}
.pnr__l:last-child{border-bottom:0}
.pnr__l b{display:block;font-size:.85rem;font-weight:700;line-height:1.3}
.pnr__l span{display:block;font-size:.78rem;color:var(--vf-muted,#5c6672);margin-top:2px}
.pnr__l-x{margin-left:auto;border:0;background:none;font-size:1.2rem;line-height:1;cursor:pointer;color:var(--vf-muted,#5c6672);padding:0 4px}
.pnr__l-x:hover{color:var(--alerte,#B93A22)}
.pnr__pied{padding:14px 16px;background:var(--vf-panel,#f6f8fa)}
.pnr__tot{display:flex;justify-content:space-between;align-items:baseline;font-size:.86rem}
.pnr__tot b{font-size:1.15rem;font-weight:900}
.pnr__note{margin:6px 0 12px;font-size:.72rem;color:var(--vf-muted,#5c6672);line-height:1.4}
.pnr__go{
  display:block;text-align:center;padding:12px;border-radius:10px;
  background:var(--vf-accent,#F2B10A);color:var(--encre);text-decoration:none;font-weight:800;font-size:.92rem;
}
.pnr__go:hover{background:#ffc63a}
.pnr__vider{display:block;width:100%;margin-top:8px;border:0;background:none;font:inherit;font-size:.78rem;color:var(--vf-muted,#5c6672);cursor:pointer;text-decoration:underline}

@media (max-width:620px){
  .pnr{left:12px;right:12px;bottom:12px}
  /* La bulle WhatsApp tient le coin droit : la barre s'arrête avant. */
  .pnr__btn{width:calc(100% - 74px)}
  .pnr__tiroir{width:100%}
  .cpan.is-open .cpan__in{padding:16px 14px}
  .cpan__pied{flex-direction:column;align-items:stretch}
  .cpan__act{flex-direction:column}
  .cpan__add,.cpan__conf{width:100%;justify-content:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .cpan{transition:none}
  .catbtn__chev,.cpan__reco,.cpan__add,.pnr__btn{transition:none}
}

/* ============================================================
   Rappel de sélection sur la page d'inscription (2026-08-19)
   ------------------------------------------------------------
   Le seul élément de cette page qui explique POURQUOI on
   remplit ce formulaire. Il porte donc l'ambre de la marque et
   se place avant tout le reste.
   ============================================================ */
.pnr-rap{
  border:1.5px solid var(--vf-accent,#F2B10A);border-radius:14px;
  background:var(--vf-accent-soft,#FDF3D8);padding:16px 18px;margin:0 0 22px;
}
.pnr-rap__h{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:10px}
.pnr-rap__b{
  font-family:"IBM Plex Mono",monospace;font-size:.68rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--vf-accent-dark,#906909);
}
.pnr-rap__h b{font-size:1rem;font-weight:800;margin-left:auto}
.pnr-rap__l{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.pnr-rap__l li{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:space-between;
  font-size:.86rem;line-height:1.35;padding-bottom:7px;border-bottom:1px dashed rgba(20,24,27,.14)}
.pnr-rap__l li:last-child{border-bottom:0;padding-bottom:0}
.pnr-rap__l span{color:var(--vf-accent-dark,#906909);font-weight:700;white-space:nowrap}
.pnr-rap__p{margin:12px 0 0;font-size:.82rem;color:var(--encre);line-height:1.5}
@media (max-width:620px){
  .pnr-rap__h b{margin-left:0}
}

/* ---- vignettes des catégories dans le panneau ----
   Un code de catégorie (« 2B », « C1 ») ne dit rien à qui n'est pas du métier ;
   la machine, si. Les puces avec photo passent sur trois lignes, celles qui
   n'en ont pas gardent leur mise en page à deux — d'où le modificateur plutôt
   qu'une règle commune qui laisserait un trou. */
.cpan__c--img{grid-template-columns:auto 1fr;grid-template-rows:auto auto auto}
.cpan__img{
  grid-column:1/-1;grid-row:1;width:100%;height:82px;object-fit:contain;
  background:var(--vf-panel,#f6f8fa);border-radius:8px;padding:6px;margin-bottom:2px;
}
.cpan__c--img input{grid-row:2}
.cpan__c--img b{grid-row:2}
.cpan__c--img span{grid-row:3;grid-column:1/-1}

/* ---- panneau de location ---- */
.cpanl{display:grid;grid-template-columns:230px minmax(0,1fr);gap:22px;align-items:start}
.cpanl__media{background:var(--vf-panel,#f6f8fa);border-radius:12px;padding:10px;display:flex;align-items:center;justify-content:center;min-height:150px}
.cpanl__img{width:100%;height:auto;max-height:190px;object-fit:contain;display:block}
.cpanl__corps{min-width:0}
.cpan--loc.is-open .cpan__in{border-left-color:var(--loc,#F2B10A)}
.cpanl__qte{
  padding:8px 10px;border:1px solid var(--vf-line,#e2e6ea);border-radius:8px;
  font:inherit;font-size:.86rem;background:#fff;color:var(--encre);width:110px;
}
@media (max-width:760px){
  .cpanl{grid-template-columns:1fr;gap:14px}
  .cpanl__media{min-height:0;padding:8px}
  .cpanl__img{max-height:150px}
}


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