/* ------------------------------------------------------------------ polices
   Polices servies par ce domaine, plus par Google. Trois raisons, dans l ordre
   d importance : le rendu ne depend plus de deux origines tierces qui exigent
   chacune un DNS et un TLS avant le premier pixel ; le navigateur ne telecharge
   plus que le sous-ensemble latin, seul utilise ici ; et la page de
   confidentialite peut dire qu aucune requete ne part vers un tiers, ce qui
   etait faux tant que Google recevait l adresse IP du visiteur.

   Archivo et IBM Plex Sans sont des polices VARIABLES (tables fvar et gvar
   verifiees dans le fichier) : un seul fichier couvre toute la plage de
   graisses, d ou la syntaxe « font-weight: 600 800 ». IBM Plex Mono est
   statique, donc un fichier par graisse.

   font-display: swap : le texte s affiche immediatement dans la police systeme
   et bascule a l arrivee. Jamais de page blanche en attendant une police.
   Licences : Archivo et IBM Plex sont sous SIL Open Font License 1.1, qui
   autorise explicitement l hebergement sur son propre domaine. */
@font-face{
  font-family:'Archivo';
  src:url('/assets/fonts/Archivo.woff2') format('woff2');
  font-weight:600 800; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans';
  src:url('/assets/fonts/IBMPlexSans.woff2') format('woff2');
  font-weight:400 600; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('/assets/fonts/IBMPlexMono-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('/assets/fonts/IBMPlexMono-500.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- tokens
   Fond clair volontaire : le logo BVA est un mot noir sur transparent, et un
   acheteur B2B lit une page de prix plus volontiers sur du clair. Le gris n'est
   pas un gris pur, il tire legerement vers le bleu, choisi et pas herite.
   L'accent et l'echelle vert/ambre/rouge viennent du monde d'ou vient BVA :
   les vumetres. C'est aussi ce que vend le produit : une note d'audit. */
:root{
  --ground:#F5F6F8; --surface:#FFFFFF; --ink:#0A0C10; --muted:#59626F;
  --line:#DEE2E8; --line-strong:#C6CCD6;
  --signal:#FF4F17; --signal-ink:#FFFFFF; --signal-soft:#FFEDE6;
  --ok:#0F9D58; --warn:#D99400; --bad:#D22B2B;
  --display:'Archivo',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --maxw:1140px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0B0D11; --surface:#14171D; --ink:#F2F4F7; --muted:#9AA4B2;
    --line:#242932; --line-strong:#333A46; --signal-soft:#2A1509;
  }
  :root:not([data-theme="light"]) .logo{filter:invert(1)}
}
:root[data-theme="dark"]{
  --ground:#0B0D11; --surface:#14171D; --ink:#F2F4F7; --muted:#9AA4B2;
  --line:#242932; --line-strong:#333A46; --signal-soft:#2A1509;
}
:root[data-theme="dark"] .logo{filter:invert(1)}

*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);line-height:1.08;text-wrap:balance;margin:0}
h1{font-size:clamp(2.1rem,5.6vw,4rem);font-weight:800;letter-spacing:-.025em}
h2{font-size:clamp(1.6rem,3.4vw,2.5rem);font-weight:700;letter-spacing:-.02em}
h3{font-size:1.12rem;font-weight:700;letter-spacing:-.01em}
p{margin:0}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:20px}
section{padding-block:clamp(56px,8vw,104px);border-top:1px solid var(--line)}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.lede{font-size:clamp(1rem,1.7vw,1.22rem);color:var(--muted);max-width:60ch}

/* ------------------------------------------------------------------- nav */
header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--ground) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:26px;min-height:64px}
.logo{height:26px;width:auto}
.nav nav{margin-left:auto;display:flex;gap:24px;align-items:center}
.nav nav a{font-size:.94rem;text-decoration:none;color:var(--muted)}
.nav nav a:hover{color:var(--ink)}
@media(max-width:760px){.nav nav a.hide-sm{display:none}}

.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);
  font-weight:600;font-size:.95rem;padding:11px 18px;border-radius:6px;
  text-decoration:none;border:1px solid transparent;cursor:pointer;transition:.15s}
.btn-primary{background:var(--signal);color:var(--signal-ink)}
.btn-primary:hover{filter:brightness(.93)}
.btn-ghost{border-color:var(--line-strong);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--ink)}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:4px}

/* ----------------------------------------------------------------- hero */
.hero{border-top:0;padding-block:clamp(44px,7vw,84px)}
.hero-grid{display:grid;gap:clamp(32px,5vw,56px);grid-template-columns:1fr}
@media(min-width:940px){.hero-grid{grid-template-columns:1.08fr .92fr;align-items:start}}
.hero h1 span{color:var(--signal)}
.hero .lede{margin-top:20px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-note{font-family:var(--mono);font-size:.76rem;color:var(--muted);margin-top:18px}

/* le dispositif du hero : ce que chaque moteur voit reellement d'un site */
.scan{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.scan-head{display:flex;align-items:center;gap:8px;padding:11px 14px;
  border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.74rem;color:var(--muted)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--line-strong)}
.scan-row{display:grid;grid-template-columns:104px 1fr auto;gap:12px;align-items:center;
  padding:13px 14px;border-bottom:1px solid var(--line)}
.scan-row:last-child{border-bottom:0}
.scan-row b{font-family:var(--mono);font-size:.78rem;font-weight:500}
.meter{height:7px;border-radius:4px;background:var(--line);overflow:hidden}
.meter i{display:block;height:100%;border-radius:4px}
.scan-row em{font-family:var(--mono);font-size:.74rem;font-style:normal;
  color:var(--muted);white-space:nowrap}
.scan-foot{padding:12px 14px;font-size:.84rem;color:var(--muted);background:var(--signal-soft)}
.scan-foot strong{color:var(--ink)}

/* ------------------------------------------------------------- problemes */
.cols3{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:780px){.cols3{grid-template-columns:repeat(3,1fr)}}
.prob{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:24px}
.prob .n{font-family:var(--mono);font-size:.74rem;color:var(--signal);margin-bottom:12px}
.prob h3{margin-bottom:9px}
.prob p{color:var(--muted);font-size:.95rem}

/* --------------------------------------------------------------- methode */
.steps{display:grid;gap:0;margin-top:34px;border:1px solid var(--line);
  border-radius:10px;overflow:hidden;background:var(--surface)}
.step{display:grid;grid-template-columns:52px 1fr;gap:18px;padding:22px 24px;
  border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:0}
.step .k{font-family:var(--mono);font-size:.8rem;color:var(--muted);padding-top:3px}
.step h3{margin-bottom:6px}
.step p{color:var(--muted);font-size:.95rem}

/* ---------------------------------------------------------------- offres */
/* align-items vaut stretch par defaut : les trois cartes font donc la meme
   hauteur. C est volontaire, ne pas remettre align-items:start. */
.plans{display:grid;gap:20px;grid-template-columns:1fr;margin-top:38px}
@media(min-width:900px){.plans{grid-template-columns:repeat(3,1fr)}}
/* Deux formules seulement : deux colonnes, sinon la rangee garde une case
   vide et la derniere carte parait tronquee. */
@media(min-width:900px){.plans.two{grid-template-columns:repeat(2,1fr)}}

.plan{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:26px;display:flex;flex-direction:column;gap:18px}
.plan.featured{border-color:var(--signal);border-width:2px;position:relative}
.badge{position:absolute;top:-11px;left:24px;background:var(--signal);color:var(--signal-ink);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 10px;border-radius:4px}
.plan .name{font-family:var(--display);font-weight:700;font-size:1.15rem}
.price{font-family:var(--display);font-weight:800;font-size:2.15rem;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1}
.price small{font-family:var(--body);font-weight:500;font-size:.88rem;color:var(--muted);
  letter-spacing:0;display:block;margin-top:6px}
.plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;
  font-size:.93rem;color:var(--muted)}
.plan li{display:grid;grid-template-columns:18px 1fr;gap:9px;align-items:start}
.plan li::before{content:"";width:7px;height:7px;margin-top:8px;border-radius:2px;
  background:var(--signal)}
.plan li.carry{color:var(--ink);font-weight:600}
.plan li.carry::before{background:var(--line-strong)}
.plan .btn{justify-content:center;margin-top:auto}
.plan-note{font-size:.82rem;color:var(--muted);border-top:1px solid var(--line);padding-top:14px}
/* Hauteur egale ne suffit pas : il faut aussi que les boutons soient a la
   meme hauteur, ce qui n arrive pas tant que chaque carte empile son contenu
   dans son coin. subgrid fait porter aux cartes les rangees du conteneur, donc
   nom, prix, liste, bouton et note s alignent d une carte a l autre. La liste
   prend 1fr et absorbe l ecart de longueur.

   Le badge « most popular » est en position:absolute : hors flux, il ne compte
   pas comme une rangee, et les trois cartes ont bien cinq rangees chacune.

   Sans subgrid (navigateur ancien), la regle est ignoree, les cartes restent
   en flex et gardent la meme hauteur : le bouton remonte grace au
   margin-top:auto plus bas. Degradation acceptable. */
@supports (grid-template-rows: subgrid){
  @media(min-width:900px){
    .plans{grid-template-rows:auto auto 1fr auto auto}
    .plan{display:grid;grid-row:span 5;grid-template-rows:subgrid}
  }
}


/* ---------------------------------------------------------------- preuve */
.clients{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 12px}
.clients li{font-family:var(--display);font-weight:700;font-size:.95rem;letter-spacing:.02em;
  color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:7px 14px;
  background:var(--surface)}
.proof-grid{display:grid;gap:20px;grid-template-columns:1fr;margin-top:34px}
@media(min-width:780px){.proof-grid{grid-template-columns:1fr 1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:24px}
.card h3{margin-bottom:10px}
.card p{color:var(--muted);font-size:.95rem}
.honest{font-family:var(--mono);font-size:.78rem;color:var(--muted);
  border-left:2px solid var(--signal);padding-left:14px;margin-top:26px;max-width:62ch}

/* ------------------------------------------------------------------- faq */
details{background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:0;margin-bottom:10px}
summary{cursor:pointer;padding:18px 22px;font-weight:600;font-size:1rem;
  list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--mono);color:var(--signal);font-size:1.25rem;flex:none}
details[open] summary::after{content:"\2212"}
details .a{padding:0 22px 20px;color:var(--muted);font-size:.95rem;max-width:68ch}

/* ------------------------------------------------------------------ form */
.form-wrap{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:clamp(24px,4vw,38px);margin-top:32px}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.field label{font-size:.88rem;font-weight:600}
.field input,.field select{font-family:var(--body);font-size:1rem;padding:11px 13px;
  border:1px solid var(--line-strong);border-radius:6px;background:var(--ground);color:var(--ink)}
.field input:focus,.field select:focus{border-color:var(--signal);outline:none}
.row2{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:680px){.row2{grid-template-columns:1fr 1fr}}
.hp{position:absolute;left:-9999px}
.form-note{font-size:.82rem;color:var(--muted);margin-top:14px}

/* ---------------------------------------------------------------- footer */
footer{border-top:1px solid var(--line);padding-block:34px;font-size:.88rem;color:var(--muted)}
.foot{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center}
.foot a{text-decoration:none}
.foot a:hover{color:var(--ink)}
.foot .sp{margin-left:auto}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}