/* ============================================================
   REVALOCA — feuille de style partagée (site public statique)
   Palette « atelier » : béton, encre, + 1 couleur par espace
   Base : revaloca-pro-v2.html (design system), adaptée statique.
   ============================================================ */
:root{
  --beton:#E9E6E0;
  --beton-2:#DDD9D1;
  --beton-3:#CFCAC0;
  --blanc:#FFFFFF;
  --encre:#14181B;
  --encre-60:#4A5158;
  --encre-40:#5F666D;

  --loc:#E3772F;      /* location & matériel */
  --loc-soft:#FDF3D8;
  --form:#1D4E89;     /* formation */
  --form-soft:#E1EAF4;
  --emploi:#1B8A5A;   /* emploi */
  --emploi-txt:#146B46;
  --emploi-soft:#DFF0E7;
  --alerte:#B93A22;

  --r:3px;
  --ombre:0 1px 0 rgba(20,24,27,.06), 0 8px 24px -18px rgba(20,24,27,.5);
  --trait:1px solid rgba(20,24,27,.14);
  --max:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--beton);color:var(--encre);
  /* "Segoe UI" et non IBM Plex Sans : home.css (charge apres sur les 10 pages
     qui chargent cette feuille) impose deja cette pile partout, donc
     demander IBM Plex Sans a Google Fonts ne servait qu'a payer un
     telechargement jamais rendu. Le <link> a ete retire des 9 pages qui
     l'avaient ; cette declaration est mise a jour pour rester honnete sur
     ce qui s'affiche reellement, sans aucun changement visuel. */
  font-family:"Segoe UI",Roboto,Helvetica,Arial,system-ui,sans-serif;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}

h1,h2,h3,h4,.cond{font-family:"Barlow Condensed",Impact,sans-serif;font-weight:600;letter-spacing:.01em;line-height:1.05;text-transform:uppercase}
h1{font-size:clamp(2.4rem,6vw,4.2rem);margin:0 0 .4em}
h2{font-size:clamp(1.9rem,4vw,2.9rem);margin:0 0 .35em}
h3{font-size:clamp(1.2rem,2.2vw,1.55rem);margin:0 0 .4em}
h4{font-size:1.05rem;margin:0 0 .3em}
p{margin:0 0 1em}
.mono{font-family:"IBM Plex Mono",monospace}

.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.eyebrow{
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--encre-60);
  display:flex;align-items:center;gap:10px;margin-bottom:18px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:currentColor;flex:none}
.lead{font-size:1.08rem;color:var(--encre-60);max-width:62ch}
.grid{display:grid;gap:18px}
.center{text-align:center}
.mt24{margin-top:24px}.mt32{margin-top:32px}.mt40{margin-top:40px}

.bande{height:10px;background:repeating-linear-gradient(115deg,var(--loc) 0 14px,var(--encre) 14px 28px)}
.bande--fine{height:6px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 22px;border:1.5px solid var(--encre);background:var(--encre);color:var(--blanc);
  font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:1.05rem;
  text-transform:uppercase;letter-spacing:.05em;text-decoration:none;cursor:pointer;
  border-radius:var(--r);transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 -2px rgba(20,24,27,.25)}
.btn--ghost{background:transparent;color:var(--encre)}
.btn--ghost:hover{background:var(--encre);color:var(--blanc)}
.btn--loc{background:var(--loc);border-color:var(--loc);color:var(--encre)}
.btn--form{background:var(--form);border-color:var(--form)}
.btn--emploi{background:var(--emploi-txt);border-color:var(--emploi-txt)}
.btn--sm{padding:8px 14px;font-size:.92rem}
.btn--full{width:100%}
:focus-visible{outline:3px solid var(--form);outline-offset:2px}

/* ---------- lien d'evitement (2026-08-09) ----------
   Aucune page publique n'en avait : au clavier il fallait traverser le
   logo, les quatre liens de menu, la pastille WhatsApp et les deux
   boutons de compte avant d'atteindre le contenu, sur CHAQUE page.
   Hors-ecran par defaut, ramene a l'ecran au focus uniquement — il ne
   doit jamais etre `display:none`, qui le sortirait de l'ordre de
   tabulation et le rendrait inatteignable.
   z-index 200 > les 60 de header.top (sticky), sinon il passerait
   dessous. La cible #contenu porte tabindex="-1" : sans lui, Chrome et
   Safari deplacent bien le defilement mais PAS le focus, et la
   tabulation suivante repartait du haut de la page. */
.skip-link{
  position:absolute;top:0;left:-9999px;z-index:200;
  background:var(--encre);color:var(--blanc);
  padding:12px 20px;border:2px solid var(--loc);border-radius:0 0 var(--r) 0;
  font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:1rem;
  letter-spacing:.04em;text-transform:uppercase;text-decoration:none;
}
.skip-link:focus{left:0}
#contenu:focus{outline:none}   /* la cible n'a pas a se dessiner un contour */

/* ---------- en-tête (fond béton clair -> logo icône seule) ---------- */
header.top{position:sticky;top:0;z-index:60;background:rgba(233,230,224,.94);backdrop-filter:blur(8px);border-bottom:var(--trait)}
.top__in{max-width:var(--max);margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:22px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.logo__icon{width:36px;height:auto;display:block}
/* Lockup TRIAXE (2026-08-21) : le logo porte desormais le nom ET la
   baseline, il remplace donc .logo__icon + .logo__txt. Cale sur la
   HAUTEUR (40px) et non la largeur : le ratio 2.4961 est fige par le
   fichier, caler sur la largeur ferait varier la hauteur de l en-tete. */
.logo__lockup{height:40px;width:auto;display:block}
.logo__txt{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:1.3rem;text-transform:uppercase;line-height:1;color:var(--encre)}
.logo__txt small{display:block;font-family:"IBM Plex Mono",monospace;font-size:.6rem;font-weight:400;letter-spacing:.14em;color:var(--encre-60);text-transform:uppercase;margin-top:3px}
nav.main{display:flex;gap:4px;margin-left:auto;align-items:center;flex-wrap:wrap}
nav.main a{text-decoration:none;padding:9px 12px;border-radius:var(--r);font-size:.92rem;font-weight:500;border-bottom:2px solid transparent}
nav.main a:hover{background:rgba(20,24,27,.06)}
nav.main a.is-active{border-bottom-color:var(--encre);font-weight:600}
.top__cta{display:flex;gap:8px;align-items:center;flex:none}

/* ---------- hero ---------- */
.hero{padding:64px 0 0;position:relative;overflow:hidden}
.hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:end}
.hero h1 span{color:var(--encre-40)}
.hero__sub{font-size:1.12rem;color:var(--encre-60);max-width:52ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

.plaque{background:var(--encre);color:var(--beton);border-radius:var(--r);padding:22px 24px 18px;position:relative;box-shadow:var(--ombre)}
.plaque__t{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.2em;color:var(--loc);text-transform:uppercase;margin-bottom:16px}
.plaque__row{display:flex;align-items:baseline;gap:8px;padding:9px 0;border-bottom:1px solid rgba(233,230,224,.14);font-size:.9rem}
.plaque__row:last-of-type{border-bottom:0}
.plaque__row .k{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.08em;color:rgba(233,230,224,.6);text-transform:uppercase}
.plaque__row .dots{flex:1;border-bottom:1px dotted rgba(233,230,224,.3);transform:translateY(-4px)}
.plaque__row .v{font-family:"Barlow Condensed",sans-serif;font-size:1.15rem;font-weight:600;text-transform:uppercase}
.plaque__row .v em{font-style:normal;color:var(--loc)}
.hero__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:48px;border-top:var(--trait);border-bottom:var(--trait)}
.hero__stats div{padding:20px 22px;border-right:var(--trait)}
.hero__stats div:last-child{border-right:0}
.hero__stats b{display:block;font-family:"Barlow Condensed",sans-serif;font-size:2.1rem;line-height:1;margin-bottom:4px}
.hero__stats span{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--encre-60)}

/* ---------- sections ---------- */
.section{padding:72px 0}
.section--pale{background:var(--beton-2)}
.section--ink{background:var(--encre);color:var(--beton)}
.section--ink .lead,.section--ink .eyebrow{color:rgba(233,230,224,.62)}
.section__head{max-width:70ch;margin-bottom:38px}

.espace-head{padding:52px 0 36px;border-bottom:var(--trait)}
.espace-head__grid{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start}
.badge{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:var(--beton-3)}
.badge--loc{background:var(--loc-soft);color:#7a5a00}
.badge--form{background:var(--form-soft);color:var(--form)}
.badge--emploi{background:var(--emploi-soft);color:#0f5c3b}

/* ---------- cartes ---------- */
.card{background:var(--blanc);border:var(--trait);border-radius:var(--r);padding:22px;position:relative;box-shadow:var(--ombre)}
.card--espace{display:flex;flex-direction:column;gap:12px;text-decoration:none;transition:transform .15s ease}
.card--espace:hover{transform:translateY(-4px)}
.card--espace .ref{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.16em;color:var(--encre-40)}
.card--espace ul{margin:0;padding-left:18px;font-size:.93rem;color:var(--encre-60)}
.card--espace li{margin-bottom:5px}
.card--espace .bar{height:5px;border-radius:2px;width:56px}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}

/* ---------- process ---------- */
.etapes{counter-reset:e;display:grid;gap:0;border-top:var(--trait)}
.etape{display:grid;grid-template-columns:76px 1fr;gap:20px;padding:22px 0;border-bottom:var(--trait);align-items:start}
.etape__n{counter-increment:e;font-family:"Barlow Condensed",sans-serif;font-size:2.2rem;font-weight:700;line-height:1;color:var(--encre-40)}
.etape__n::before{content:counter(e,decimal-leading-zero)}

/* ---------- specs / prix ---------- */
.spec{display:flex;align-items:baseline;gap:6px;font-size:.85rem;padding:4px 0}
.spec .k{font-family:"IBM Plex Mono",monospace;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--encre-40)}
.spec .dots{flex:1;border-bottom:1px dotted rgba(20,24,27,.25);transform:translateY(-3px)}
.spec .v{font-weight:600}

/* ---------- tableau comparatif ---------- */
table.tbl{width:100%;border-collapse:collapse;background:var(--blanc);border:var(--trait);border-radius:var(--r);overflow:hidden;font-size:.88rem}
table.tbl th{text-align:left;padding:11px 14px;background:var(--beton-2);font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;font-weight:500}
table.tbl td{padding:12px 14px;border-top:var(--trait);vertical-align:top}

/* ---------- certifications ---------- */
.certs{display:grid;gap:14px}
.cert{background:var(--blanc);border:var(--trait);border-left:4px solid var(--emploi);border-radius:var(--r);padding:16px 18px}
.cert b{display:block;font-family:"Barlow Condensed",sans-serif;font-size:1.15rem;text-transform:uppercase}
.cert .valid{color:var(--emploi-txt);font-size:.82rem;font-weight:600;margin-top:6px}

/* ---------- pied de page ---------- */
footer.bas{background:var(--encre);color:rgba(233,230,224,.72);padding:52px 0 26px;font-size:.9rem}
footer.bas h4{color:var(--blanc);font-size:.95rem;letter-spacing:.06em;margin-bottom:14px}
footer.bas a{color:rgba(233,230,224,.72);text-decoration:none}
footer.bas a:hover{color:var(--loc)}
/* Pictogrammes du pied de page (2026-08-09). Traces SVG en ligne, jamais des
   emoji : un emoji change de dessin selon la plateforme et n'herite pas d'une
   couleur. `stroke:currentColor` fait le travail — l'icone prend la teinte du
   lien, donc l'ambre --loc au survol, sans une seule regle de couleur en plus.
   Ils sont DECORATIFS (`aria-hidden`) : l'intitule est ecrit juste a cote. */
.bas__i{width:15px;height:15px;display:inline-block;vertical-align:-2px;margin-right:8px;
  flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;
  stroke-linejoin:round;opacity:.6;transition:opacity .15s ease}
footer.bas a:hover .bas__i{opacity:1}
.bas__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.bas__legal{margin-top:34px;padding-top:20px;border-top:1px solid rgba(233,230,224,.16);font-size:.78rem;color:rgba(233,230,224,.58)}
.footer-logo{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.footer-logo img{height:34px;width:auto}
.footer-logo span{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:1.2rem;text-transform:uppercase;color:#fff}

/* ---------- notice démonstration ---------- */
.notice-demo{background:var(--loc-soft);border:1px solid rgba(227,119,47,.55);border-left:4px solid var(--loc);border-radius:var(--r);padding:14px 18px;margin-bottom:26px;font-size:.9rem}
.notice-demo b{display:block;margin-bottom:3px}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero__grid{grid-template-columns:1fr;gap:32px}
  .g4{grid-template-columns:repeat(2,1fr)}
  .bas__grid{grid-template-columns:1fr 1fr}
}
/* Le menu horizontal se replie sur le burger a 1000px (1150 avant le
   retrait du bouton WhatsApp du header, 2026-08-19), plus a 820px
   (2026-08-09). Mesure de la barre livree, a la ligne pres :
     logo 203,2 + 22 + nav 550,9 + 22 + acces au compte 261,4 + 40 de
     padding = 1099,5px de besoin MINIMUM.
   Sous ce seuil, nav.main etait le seul enfant retrecissable de .top__in
   (elle porte flex-wrap:wrap) : au lieu de disparaitre elle se comprimait
   et repliait ses quatre liens. Hauteurs mesurees avant correctif :
     1920/1600/1440/1280/1100 -> 68,5px (une rangee, correct)
     1000/950/900             -> 116,1px (DEUX rangees)
     860/830/821              -> 163,6px (TROIS rangees)
     820 et moins             -> 70,6px (le burger reprenait la main)
   Le seuil est pose a 1150 et non a 1100 : a 1100 il ne restait que 0,5px
   de marge, et la largeur de la nav depend des polices web (un fallback
   plus large re-declenchait le repli). ~50px de marge ici.
   Les deux boutons d'acces au compte restent visibles jusqu'a 820px : ils
   ne sont retires que sur la rangee vraiment etroite, bloc suivant. */
@media (max-width:1000px){
  nav.main{display:none;position:absolute;top:100%;left:0;right:0;background:var(--beton);border-bottom:var(--trait);flex-direction:column;padding:10px;gap:2px}
  nav.main.is-open{display:flex}
  nav.main a{width:100%;padding:13px}
  .burger{display:block !important;margin-left:auto}
  /* nav.main sort du flux : plus personne ne porte le margin-left:auto qui
     poussait le groupe de droite au bout de la barre. Sans cette ligne le
     burger se collait au logo (mesure : burger a x=245 sur 820px de large). */
  .top__cta{margin-left:auto}
}
@media (max-width:820px){
  .top__cta .btn{display:none}
  .g3,.g2{grid-template-columns:1fr}
  .hero__stats{grid-template-columns:1fr}
  .hero__stats div{border-right:0;border-bottom:var(--trait)}
  .espace-head__grid{grid-template-columns:1fr;gap:10px}
  table.tbl{font-size:.8rem}
  table.tbl th,table.tbl td{padding:9px 10px}
}
.burger{display:none;background:none;border:var(--trait);border-radius:var(--r);padding:9px 11px;cursor:pointer}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important;scroll-behavior:auto !important}}

/* ---------- logo contrast fix (was 2.31:1 on béton header, now >3:1) ---------- */
.logo__icon{padding:3px;border-radius:6px;background:rgba(20,24,27,.9)}
footer.bas .footer-logo img{padding:0;background:none}

/* ============================================================
   Module 3 — catalogue "une ligne, trois portes" (EX-70/71/72/73)
   ============================================================ */
.catrow{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;background:var(--blanc);border:var(--trait);border-left:4px solid var(--beton-3);border-radius:var(--r);padding:18px 20px;margin-bottom:12px}
.catrow[data-fam=r482]{border-left-color:#A96727}
.catrow[data-fam=r485]{border-left-color:#2F6FED}
.catrow[data-fam=r486]{border-left-color:#1B8666}
.catrow[data-fam=r487]{border-left-color:#8655F6}
.catrow[data-fam=r489]{border-left-color:var(--loc)}
.catrow[data-fam=r490]{border-left-color:#0F8577}
.catrow__id{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.1em;color:var(--encre-40);text-transform:uppercase;margin-bottom:4px}
.catrow__t{font-family:"Barlow Condensed",sans-serif;font-size:1.3rem;font-weight:700;text-transform:uppercase;margin:0 0 3px}
.catrow__sub{font-size:.85rem;color:var(--encre-60);margin:0}
.catrow__actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.catbtn{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;padding:9px 14px;border-radius:var(--r);border:1.5px solid var(--encre);text-decoration:none;font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:.95rem;text-transform:uppercase;letter-spacing:.02em;min-height:44px;justify-content:center;transition:transform .12s ease}
.catbtn:hover{transform:translateY(-2px)}
.catbtn small{font-family:"IBM Plex Mono",monospace;font-size:.62rem;text-transform:none;letter-spacing:0;font-weight:500;opacity:.85}
.catbtn__price{font-size:1.28em;font-weight:800;opacity:1}
.catbtn--form{background:var(--form);border-color:var(--form);color:#fff}
.catbtn--loc{background:var(--loc);border-color:var(--loc);color:var(--encre)}
.catbtn--emploi{background:var(--emploi-txt);border-color:var(--emploi-txt);color:#fff}
.catbtn--emploi.is-locked{background:var(--blanc);color:var(--emploi-txt)}
.catbtn__lock{margin-left:5px}
@media (max-width:820px){
  .catrow{grid-template-columns:1fr}
  .catrow__actions{justify-content:stretch}
  .catbtn{flex:1 1 auto;min-width:0;text-align:center;align-items:center}
}

/* ============================================================
   Module 4 — configurateur de devis
   ============================================================ */
.devis-shell{display:grid;grid-template-columns:1fr 360px;gap:28px;align-items:start}
@media (max-width:980px){.devis-shell{grid-template-columns:1fr}}
.devis-univers{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.devis-tab{flex:1 1 200px;text-align:left;padding:14px 16px;border-radius:var(--r);border:1.5px solid var(--beton-3);background:var(--blanc);cursor:pointer;font:inherit;transition:border-color .2s ease,box-shadow .2s ease,transform .15s var(--ease-spring)}
.devis-tab:hover{border-color:var(--encre-40);transform:translateY(-1px)}
.devis-tab b{display:block;font-family:"Barlow Condensed",sans-serif;font-size:1.05rem;text-transform:uppercase}
.devis-tab span{font-size:.78rem;color:var(--encre-60)}
.devis-tab.is-active{border-color:var(--encre);box-shadow:0 0 0 1px var(--encre) inset}
.devis-panel{display:none;background:var(--blanc);border:var(--trait);border-radius:var(--r);padding:22px}
.devis-panel.is-active{display:block;animation:rvl-panel-in .28s var(--ease-out)}
@keyframes rvl-panel-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.devis-panel.is-active{animation:none}}
.devis-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:14px}
.devis-field label{display:block;font-size:.78rem;font-weight:600;color:var(--encre-60);margin-bottom:6px;text-transform:uppercase;letter-spacing:.03em}
.devis-field select,.devis-field input{width:100%;padding:10px 12px;border:1.5px solid var(--beton-3);border-radius:var(--r);font:inherit;font-size:.95rem;background:var(--beton)}
.devis-add{margin-top:6px}
.devis-lines{border-top:var(--trait);margin-top:8px}
.devis-line{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:12px 0;border-bottom:var(--trait);font-size:.92rem}
.devis-line b{display:block;font-size:.95rem}
.devis-line small{color:var(--encre-60)}
.devis-line .rm{background:none;border:0;color:var(--alerte);cursor:pointer;font-size:1.1rem;line-height:1;padding:6px}
.devis-panier{position:sticky;top:90px;background:var(--encre);color:var(--beton);border-radius:var(--r);padding:22px}
.devis-panier h3{color:#fff}
.devis-panier-empty{font-size:.88rem;color:rgba(233,230,224,.6)}
.devis-panier-line{display:flex;justify-content:space-between;gap:10px;font-size:.86rem;padding:9px 0;border-bottom:1px solid rgba(233,230,224,.14)}
.devis-panier-tot{display:flex;justify-content:space-between;padding-top:14px;margin-top:6px;font-family:"Barlow Condensed",sans-serif;font-size:1.5rem;font-weight:700}
.devis-panier-vat{font-size:.72rem;color:rgba(233,230,224,.55);margin-top:-8px}
.devis-est{background:rgba(227,119,47,.16);border:1px solid rgba(227,119,47,.4);border-radius:var(--r);padding:11px 13px;font-size:.78rem;color:var(--beton);margin-top:16px}

/* ============================================================
   Module 5.4 — CVthèque verrouillée
   ============================================================ */
.cv-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.cv-filters select{padding:9px 12px;border:1.5px solid var(--beton-3);border-radius:999px;background:var(--blanc);font:inherit;font-size:.85rem}
.cv-count{font-family:"IBM Plex Mono",monospace;font-size:.82rem;color:var(--encre-60);margin-bottom:16px}
.cv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.cv-card{background:var(--blanc);border:var(--trait);border-radius:var(--r);padding:18px 20px;position:relative;overflow:hidden}
.cv-card__badge{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--emploi-soft);color:#0f5c3b;margin-bottom:10px}
.cv-card h4{margin:0 0 4px;font-size:1.02rem}
.cv-card__meta{font-size:.85rem;color:var(--encre-60);margin:0 0 12px;display:flex;flex-wrap:wrap;gap:6px 14px}
.cv-blur{filter:blur(6px);user-select:none;-webkit-user-select:none}
.cv-card__locked{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:12px;border-top:var(--trait);margin-top:4px}
.cv-card__lockrow{font-size:.82rem;color:var(--encre-40);display:flex;align-items:center;gap:6px}
.cv-unlock{font-size:.8rem;padding:8px 13px}

/* ============================================================
   Module 7 — financement / OPCO
   ============================================================ */
.opco-picker{background:var(--blanc);border:var(--trait);border-radius:var(--r);padding:20px 22px;margin:24px 0}
.opco-result{margin-top:14px;padding:14px 16px;border-radius:var(--r);background:var(--form-soft);border:1px solid rgba(29,78,137,.25);display:none}
.opco-result.is-visible{display:block}
.opco-result b{font-family:"Barlow Condensed",sans-serif;font-size:1.2rem;text-transform:uppercase;color:var(--form)}
.opco-table{width:100%;border-collapse:collapse;font-size:.86rem}
.opco-table th{text-align:left;background:var(--beton-2);padding:9px 12px;font-family:"IBM Plex Mono",monospace;font-size:.65rem;text-transform:uppercase;letter-spacing:.06em}
.opco-table td{padding:10px 12px;border-top:var(--trait)}
.frise{counter-reset:f;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:24px 0}
@media (max-width:820px){.frise{grid-template-columns:1fr}}
.frise div{background:var(--blanc);border:var(--trait);border-radius:var(--r);padding:16px}
.frise div::before{counter-increment:f;content:counter(f);display:inline-flex;width:26px;height:26px;align-items:center;justify-content:center;background:var(--encre);color:var(--beton);border-radius:50%;font-family:"Barlow Condensed",sans-serif;font-weight:700;margin-bottom:10px}
.warn-box{background:#FDF3D8;border:1px solid rgba(227,119,47,.5);border-left:4px solid var(--loc);border-radius:var(--r);padding:14px 18px;font-size:.86rem;margin:20px 0}

/* ============================================================
   Objections accordion (section 10.3)
   ============================================================ */
.objs{border-top:var(--trait)}
.obj{border-bottom:var(--trait)}
.obj summary{padding:16px 4px;cursor:pointer;font-family:"Barlow Condensed",sans-serif;font-size:1.1rem;font-weight:600;text-transform:uppercase;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
.obj summary::-webkit-details-marker{display:none}
.obj summary::after{content:"+";font-size:1.4rem;font-weight:400;flex:none}
.obj[open] summary::after{content:"–"}
.obj p{padding:0 4px 16px;color:var(--encre-60);font-size:.94rem;max-width:68ch}

/* ============================================================
   Cookie / RGPD banner (EX-183)
   ============================================================ */
#rgpd-banner{position:fixed;left:0;right:0;bottom:0;z-index:200;background:var(--encre);color:var(--beton);padding:16px 20px;display:none}
#rgpd-banner.is-visible{display:flex}
#rgpd-banner{align-items:center;gap:18px;flex-wrap:wrap;box-shadow:0 -8px 24px -12px rgba(0,0,0,.4);max-height:40vh;overflow-y:auto}
/* Pas de max-width ici : le bandeau est une barre pleine largeur, et brider
   le texte a 62ch le cassait en deux lignes alors que ~800 px restaient vides
   a droite sur un ecran 1440 (audit 2026-08-11). Il occupe donc toute la
   place libre jusqu'aux boutons et ne se coupe que quand il le faut vraiment. */
#rgpd-banner p{margin:0;font-size:.84rem;color:rgba(233,230,224,.85);flex:1 1 320px;min-width:0;text-wrap:pretty}
#rgpd-banner .btnrow{display:flex;gap:8px;flex:none}
#rgpd-banner a{color:var(--loc);text-decoration:underline;white-space:nowrap}
@media (max-width:600px){
  #rgpd-banner{padding:12px 16px;gap:10px}
  #rgpd-banner p{font-size:.78rem;flex:1 1 100%}
  /* Mobile : les deux boutons prennent la largeur, a parts egales, avec une
     hauteur de cible tactile correcte (ils faisaient 30 px de haut). */
  #rgpd-banner .btnrow{flex:1 1 100%}
  #rgpd-banner .btnrow .rgpd-btn{flex:1 1 0;min-height:42px}
  .rgpd-btn{padding:7px 12px;font-size:.78rem}
}
.rgpd-btn{padding:9px 16px;border-radius:var(--r);font-family:"Barlow Condensed",sans-serif;font-weight:600;text-transform:uppercase;font-size:.85rem;cursor:pointer;border:1.5px solid var(--beton)}
.rgpd-btn--accept{background:var(--loc);border-color:var(--loc);color:var(--encre)}
.rgpd-btn--refuse{background:transparent;color:var(--beton)}

/* ---------- account status explainer (compte-entreprise.html) ---------- */
.statut-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line,rgba(255,255,255,.09));border:1px solid var(--line,rgba(255,255,255,.09));border-radius:11px;overflow:hidden;margin:16px 0 24px}
.statut-mini div{background:var(--ink,#0d1117);padding:12px 14px}
.statut-mini b{display:block;font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:#f5a623;margin-bottom:4px}
.statut-mini span{font-size:.78rem;color:#9aa4b2;line-height:1.4;display:block}
@media (max-width:700px){.statut-mini{grid-template-columns:1fr}}

/* ============================================================
   Motion system — scroll reveal, micro-interactions, page feel.
   Vanilla CSS + IntersectionObserver only (no build step, no
   dependency) — see assets/site.js. Every animated property here
   is transform/opacity, never layout, so it stays cheap even on
   the low-end phones a chef de chantier is reading this on (§13.2).
   ============================================================ */
:root{
  --ease-out: cubic-bezier(.16,.8,.28,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

html{ -webkit-tap-highlight-color: transparent; }
/* NB: deliberately NO page-level fade-in on <body>. Any opacity < 1 on the
   body delays first paint AND largest-contentful-paint until the fade ends —
   measured at +450 ms on entreprises.html/devis.html. The entrance feel comes
   from the reveal system below, which never hides what is already on screen. */

/* Reveal-on-scroll: site.js adds .is-visible when an element enters the
   viewport. Elements never disappear again once revealed (no jitter on
   scroll-back), and anything already in the first viewport on load is
   revealed immediately, not animated in. */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); will-change:opacity,transform }
.reveal.is-visible{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none } }

/* Sticky header gains depth once the page has actually scrolled — cheap
   visual cue that content is moving underneath it. */
header.top{ transition:box-shadow .25s ease, background-color .25s ease }
header.top.is-scrolled{ box-shadow:0 6px 20px -14px rgba(20,24,27,.35) }

/* Nav underline sweeps in from the left instead of appearing instantly. */
nav.main a{ position:relative; transition:background-color .18s ease, color .18s ease }
nav.main a::after{ content:""; position:absolute; left:12px; right:12px; bottom:5px; height:2px; background:var(--encre); transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease-out) }
nav.main a:hover::after{ transform:scaleX(1) }
nav.main a.is-active::after{ transform:scaleX(1) }
nav.main a.is-active{ border-bottom-color:transparent } /* the animated ::after replaces the static border */

/* Mobile nav slides + fades open instead of snapping visible.
   Seuil aligne sur le repli du menu (1000px depuis le 2026-08-19, voir
   plus haut) : a 820 il n'aurait plus habille le menu deroulant. */
@media (max-width:1000px){
  nav.main{
    display:flex; visibility:hidden; opacity:0; max-height:0; overflow:hidden;
    padding:0 10px; transition:opacity .28s var(--ease-out), max-height .32s var(--ease-out), visibility 0s linear .32s;
  }
  nav.main.is-open{ visibility:visible; opacity:1; max-height:480px; padding:10px; transition:opacity .28s var(--ease-out), max-height .32s var(--ease-out), visibility 0s }
  nav.main a::after{ display:none } /* underline sweep doesn't read well full-width on mobile rows */
}

/* Buttons: a touch more spring on hover, real press feedback on click
   (was hover-only before — nothing acknowledged a tap on mobile). */
.btn,.catbtn,.rgpd-btn{ transition:transform .16s var(--ease-spring), box-shadow .16s ease, background-color .16s ease, border-color .16s ease, filter .16s ease }
.btn:active,.catbtn:active{ transform:translateY(0) scale(.97); box-shadow:none; filter:brightness(.96) }

/* Cards lift a little further and gain a warmer border on hover — was
   transform-only before, felt flat against the flat béton background. */
.card--espace{ transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s ease }
.card--espace:hover{ transform:translateY(-6px); box-shadow:0 22px 40px -22px rgba(20,24,27,.35); border-color:rgba(20,24,27,.28) }
.card{ transition:box-shadow .25s ease, transform .25s ease }
.cv-card,.opco-picker,.frise div{ transition:box-shadow .25s ease, transform .25s ease }
.cv-card:hover{ box-shadow:0 16px 30px -20px rgba(20,24,27,.3); transform:translateY(-3px) }

/* catrow: the whole row gets a subtle lift on hover, not just its buttons —
   makes it read as one interactive unit instead of three floating buttons. */
.catrow{ transition:box-shadow .25s ease, transform .2s ease }
.catrow:hover{ box-shadow:0 14px 28px -20px rgba(20,24,27,.32); transform:translateY(-2px) }

/* Numeric counters (hero stats, CV count, devis totals) — site.js animates
   the count-up; this just keeps digits from jumping around in width while
   it does. */
.rvl-count{ font-variant-numeric:tabular-nums }

/* Accordion (objections, financement dispositifs) — smooth height instead
   of the browser's instant <details> snap. site.js drives max-height. */
.obj summary{ transition:color .18s ease }
.obj summary:hover{ color:var(--form) }
.obj summary::after{ display:inline-block; transition:transform .25s var(--ease-out) }
.obj[open] summary::after{ transform:rotate(180deg) }
.obj__body{ overflow:hidden; max-height:0; transition:max-height .32s var(--ease-out) }
/* 2000px is a ceiling for the animation only — site.js pins the exact height
   inline while opening and clears it to `none` once open, so a panel longer
   than this ceiling can never end up clipped. */
.obj[open] .obj__body{ max-height:2000px }
@media (prefers-reduced-motion:reduce){
  .obj__body{ transition:none }
  .obj[open] .obj__body{ max-height:none }
  .obj summary::after,.obj[open] summary::after{ transition:none }
}

/* Devis panier: a line sliding in, and the total gently pulsing when it
   changes, so adding/removing a line reads as cause-and-effect. */
.devis-panier-line{ animation: rvl-line-in .32s var(--ease-out) }
@keyframes rvl-line-in{ from{ opacity:0; transform:translateX(10px) } to{ opacity:1; transform:none } }
.devis-panier-tot.is-pulsing,.cv-count.is-pulsing{ animation: rvl-pulse .38s var(--ease-out) }
@keyframes rvl-pulse{ 0%{ transform:scale(1) } 40%{ transform:scale(1.045); color:var(--loc) } 100%{ transform:scale(1) } }

/* CVthèque filter results fade+settle instead of instantly appearing/disappearing.
   Two phases, because a card must keep its grid cell WHILE it fades (otherwise
   the grid reflows on frame 1 and there is nothing left to watch fade):
     [data-hidden] -> fades out in place, stops taking clicks
     [data-gone]   -> set by the filter once the fade has finished, drops it
                      out of the grid so the survivors reflow.
   `visibility` is transitioned at 0s but DELAYED to the end of the fade, so the
   card stays painted while it fades out and un-hides instantly on the way in. */
.cv-card{ transition:opacity .22s ease, transform .22s ease, visibility 0s }
.cv-card[data-hidden]{ opacity:0; transform:scale(.97); pointer-events:none; visibility:hidden;
  transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s }
.cv-card[data-gone]{ display:none }
@media (prefers-reduced-motion:reduce){
  .cv-card,.cv-card[data-hidden]{ transition:none }
}

/* OPCO result reveal — was display:none/block, now a real transition. */
.opco-result{ opacity:0; transform:translateY(-6px); transition:opacity .3s var(--ease-out), transform .3s var(--ease-out); display:block; max-height:0; overflow:hidden; padding-top:0; padding-bottom:0; margin-top:0; border-width:0 }
/* 600px, not 200px: the OPCO blurb is ~90px on a desktop column but wraps to
   well over 200px at 360-390px wide, where a tighter cap would clip it. */
.opco-result.is-visible{ opacity:1; transform:none; max-height:600px; padding:14px 16px; margin-top:14px; border-width:1px }

/* Bande (hazard stripe) gets a slow drift — a static repeating-gradient
   reads as a print texture; a very slow pan reads as "in motion", fitting
   an industrial-equipment brand without being distracting. */
.bande{ background-size:200% 100%; animation: rvl-bande-drift 14s linear infinite }
@media (prefers-reduced-motion:reduce){ .bande{ animation:none } }
@keyframes rvl-bande-drift{ from{ background-position:0 0 } to{ background-position:-56px 0 } }

@media (prefers-reduced-motion:reduce){
  .reveal,.card--espace,.card,.cv-card,.catrow,.btn,.catbtn,.opco-result,header.top,nav.main{ transition:none !important; animation:none !important }
}

/* ============================================================
   Homepage — ventes-flash-inspired sections (2026-08-06)
   New markup (index.html) reuses existing components as-is
   (.catrow, .cert/.certs, .card, .badge, .hero__stats, .grid.g3)
   — see ARCHITECTURE.md / index.html comments. Only genuinely new
   pieces are the topbar phone/trust chip and a price-display
   utility, both additive to the tokens above, not a parallel
   design system.
   ============================================================ */
.top__trust{display:flex;align-items:center;gap:14px;flex:none}
.top__phone{display:flex;align-items:center;gap:6px;text-decoration:none;font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:.95rem;white-space:nowrap}
.top__badge{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.06em;color:var(--encre-60);white-space:nowrap}
@media (max-width:1080px){ .top__badge{display:none} }
@media (max-width:820px){ .top__trust{display:none} }

/* --- header fit correction, added at deploy time -------------------------
   As delivered, .top__trust is flex:none inside .top__in — a container capped
   at --max (1180px) whose other three children are ALSO flex:none. Measured
   natural widths at that cap: logo 203 + nav 556 + CTA 374 = 1133 against
   1074px usable (1180 minus 40 padding and 3x22 gap). The header was already
   59px over before this update (that is why the nav wraps to two rows on the
   other pages); the 398px chip took it 457px over, and nav — the only
   shrinkable child — was crushed to 114px and stacked into FOUR rows, a 282px
   tall header, at every width from 820px to 1920px.
   No chip of any size fits at 1180px, so the header gets its own ceiling on
   the pages that carry one (max-width does not force width, so it still
   tracks the viewport below that), and the chip's parts drop out at the
   widths where they would start squeezing the nav again. Content elsewhere
   keeps using --max, so this changes nothing on the other six pages. */
header.top:has(.top__trust) .top__in{ max-width:1720px }
.top__trust{ flex:0 1 auto; min-width:0 }
@media (max-width:1700px){ .top__badge{ display:none } }
@media (max-width:1360px){ .top__trust{ display:none } }

.pack-price{font-family:"Barlow Condensed",sans-serif;font-size:2.2rem;font-weight:700;margin:12px 0 4px}
.pack-price small{display:block;font-family:"IBM Plex Mono",monospace;font-size:.68rem;font-weight:500;letter-spacing:.04em;color:var(--encre-60);text-transform:none;margin-top:4px}

.pack-price--form{color:var(--form)}
.pack-price--loc{color:#7a5a00}
.pack-price--emploi{color:var(--emploi-txt)}

/* ============================================================
   Ventes-flash visual parity pass (2026-08-06, round 2) — real
   machine photos + solid colored badges + real cert logos, using
   REVALOCA's own per-family accent colors (not FormaForce orange).
   Assets: assets/machines/*.jpg|webp, assets/certs/*.webp — pulled
   from forma-force.fr's own CDN (same EGS group, Formation univers
   is literally FORMAFORCE® already) and self-hosted here rather
   than hotlinked. Scoped via :has() so entreprises.html's existing
   .catrow/.cert markup (no photo/logo children) is untouched.
   ============================================================ */
.catrow:has(.catrow__media){grid-template-columns:112px 1fr auto}
.catrow__media{position:relative;flex:none;width:112px;height:84px;border-radius:var(--r);overflow:hidden}
.catrow__media img{width:100%;height:100%;object-fit:cover;display:block}
.catrow__ref{position:absolute;left:6px;bottom:6px;color:#fff;font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:.82rem;letter-spacing:.03em;padding:3px 9px;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.catrow[data-fam=r482] .catrow__ref{background:#A96727}
.catrow[data-fam=r485] .catrow__ref{background:#2F6FED}
.catrow[data-fam=r486] .catrow__ref{background:#1B8666}
.catrow[data-fam=r487] .catrow__ref{background:#8655F6}
.catrow[data-fam=r489] .catrow__ref{background:var(--loc);color:var(--encre)}
.catrow[data-fam=r490] .catrow__ref{background:#0F8577}
/* Toutes les familles portent desormais une DECOUPE produit (les photos de
   forma-force.fr, celles-la memes qu affiche idppe.com), et non plus une scene
   photographique. object-fit:cover recadrerait la machine hors du cadre sur une
   vignette 112x84 : on montre donc le produit entier sur un aplat clair.
   R482 et R489 ont rejoint cette liste le 2026-08-09, quand leurs deux scenes
   generiques (rue en travaux, magasin HYSTER) ont ete remplacees. */
.catrow[data-fam=r482] .catrow__media,.catrow[data-fam=r485] .catrow__media,.catrow[data-fam=r486] .catrow__media,.catrow[data-fam=r487] .catrow__media,.catrow[data-fam=r489] .catrow__media,.catrow[data-fam=r490] .catrow__media{background:#eef1f4}
.catrow[data-fam=r482] .catrow__media img,.catrow[data-fam=r485] .catrow__media img,.catrow[data-fam=r486] .catrow__media img,.catrow[data-fam=r487] .catrow__media img,.catrow[data-fam=r489] .catrow__media img,.catrow[data-fam=r490] .catrow__media img{object-fit:contain;padding:6px;box-sizing:border-box}
@media (max-width:820px){
  .catrow:has(.catrow__media){grid-template-columns:1fr}
  .catrow__media{width:100%;height:140px}
}

.badge--solid{font-weight:600}
.badge--form.badge--solid{background:var(--form);color:#fff}
.badge--loc.badge--solid{background:var(--loc);color:var(--encre)}
.badge--emploi.badge--solid{background:var(--emploi-txt);color:#fff}

.cert:has(.cert__logo){display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cert__logo{flex:none;width:96px;height:64px;object-fit:contain;background:#fff;border:var(--trait);border-radius:var(--r);padding:6px}
.cert__body{min-width:0;flex:1 1 240px}

/* ============================================================
   Co-branding pied de page — « REVALOCA par FORMAFORCE »
   Additif pur : aucune regle existante n'est modifiee. Le bloc
   .footer-logo garde son rendu actuel, y compris le reskin
   Segoe UI que home.css applique a .footer-logo span.
   ============================================================ */
.cobrand{display:flex;align-items:center;flex-wrap:wrap;column-gap:14px;row-gap:9px;margin-bottom:14px;max-width:100%}
.cobrand .footer-logo{margin-bottom:0}

/* Filet vertical : exactement le hairline deja utilise par
   .bas__legal. Il ancre le logo partenaire sans caisson ni aplat
   blanc — un fond clair serait l'objet le plus lumineux du pied de
   page et passerait devant la marque REVALOCA. */
.cobrand__by{display:flex;align-items:center;gap:11px;margin:0;min-width:0;padding:2px 0 2px 14px;border-left:1px solid rgba(233,230,224,.16)}

/* Micro-label mono du site, recolore pour le fond encre :
   rgba(233,230,224,.72) = 7,8:1 sur #14181B. La couleur d'origine
   de l'idiome (var(--encre-60)) ne ferait que 1,6:1. */
.cobrand__par{flex:none;white-space:nowrap;font-family:"IBM Plex Mono",monospace;font-size:.68rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(233,230,224,.72)}

footer.bas .cobrand__ff{display:inline-flex;align-items:center;min-width:0;border-bottom:1px solid transparent;transition:border-color .18s ease}
footer.bas .cobrand__ff:hover{border-bottom-color:var(--loc)}

/* Le :focus-visible global (plus haut dans ce fichier) trace un
   contour var(--form) #1D4E89, soit 2,15:1 sur l'encre du pied de
   page : sous le minimum de 3:1, donc invisible au clavier. On
   corrige pour TOUS les liens du pied de page, pas seulement le
   nouveau. var(--loc) donne 9,4:1. */
footer.bas a:focus-visible{outline-color:var(--loc)}

/* Largeur pilotante, hauteur auto : si l'image ne charge pas, le
   texte alt se compose dans la boite au lieu d'etre ecrase par une
   hauteur fixe. Ces regles de texte ne s'appliquent que dans ce cas. */
.cobrand__ff img{width:130px;height:auto;max-width:100%;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:1rem;line-height:1.1;letter-spacing:.03em;text-transform:uppercase;color:#fff}

/* .bas__grid restait sur 2 colonnes jusqu'a 320px, ou la 1re cellule
   tombe a ~117px alors que .footer-logo seul en reclame 126 : le
   debordement horizontal existait deja avant ce changement. */
@media (max-width:560px){
  .bas__grid{grid-template-columns:1fr;gap:26px}
}
@media (max-width:400px){
  .cobrand__ff img{width:116px}
  .cobrand__by{padding-left:12px;gap:9px}
}
/* Mouvement reduit : deja couvert par la regle globale
   *{transition:none !important} plus haut dans ce fichier. */

/* ============================================================
   Co-branding en-tete — « REVALOCA par FORMAFORCE »
   Exactement le meme idiome qu'au pied de page : filet vertical,
   micro-label mono « par », logo partenaire. On reutilise les
   classes .cobrand__by / __par / __ff telles quelles — home.css
   repeint le header en var(--vf-navy) #14181B, soit le meme fond
   encre que footer.bas, donc les couleurs du pied de page
   (filet blanc 16 %, label blanc 72 %, logo blanc) sont deja les
   bonnes ici. Seuls l'echelle et le comportement responsive
   different, et c'est tout ce que ce bloc declare.
   ATTENTION : le logo doit rester -light.webp (lettrage blanc).
   Le fond navy vient de home.css, pas de style.css — style.css
   seul donnerait un header beton clair.
   ============================================================ */
/* A L'EXTREMITE DROITE de la barre : REVALOCA a gauche, la nav au milieu,
   FORMAFORCE au bout. Le co-branding n'est plus enfant du bloc logo, il est
   le DERNIER enfant de .top__in — le margin-left:auto que porte deja
   nav.main pousse tout le groupe de droite, et ce bloc ferme la marche.
   .brandlock n'existe plus : le logo est redevenu enfant direct.
   Mesure avant de choisir la taille : de 120 a 200 px de logo, la rangee
   reste sur UNE ligne (header 69 px) a 1440, 1280 et 1150 px, sans
   debordement — le retrait des deux CTA du menu avait libere ~400 px.
   170 px retenu : nettement plus lisible, et il reste de la marge pour le
   badge « Compte gratuit » qui reapparait au-dessus de 1700 px. */
header.top .cobrand__by{flex:none;margin-left:4px}
header.top .cobrand__par{font-size:.62rem;letter-spacing:.14em}
header.top .cobrand__ff{display:inline-flex;align-items:center;border-bottom:1px solid transparent;transition:border-color .18s ease}
header.top .cobrand__ff:hover{border-bottom-color:var(--loc)}
header.top .cobrand__ff img{width:170px}

/* Sous 820 px il ne reste que le logo et le burger : y intercaler un second
   logo de 170 px serrerait la barre sans rien apporter, et le co-branding du
   PIED DE PAGE est present sur toutes les pages. On le retire donc de
   l'en-tete a partir de la, plutot que de le comprimer. */
@media (max-width:820px){
  header.top .cobrand__by{display:none}
}

/* Meme correctif que footer.bas : le :focus-visible global trace un
   contour var(--form) #1D4E89, soit 2,15:1 sur l'encre — invisible
   au clavier. Applique a tous les liens du header, pas seulement au
   nouveau : ils sont tous sur ce meme fond navy. var(--loc) = 9,4:1. */
header.top a:focus-visible{outline-color:var(--loc)}

/* Les regles .brandlock (co-branding empile sous le logo) ont ete retirees
   le 2026-08-09 : le bloc est passe a droite de la barre, le wrapper
   .brandlock n'existe plus dans le markup. */