:root{
  --bleu:#194BBC; --bleu-fonce:#0F2A6F; --bleu-clair:#EAF0FD;
  --texte:#111827; --texte-2:#5B6472; --texte-3:#8A93A3;
  --bordure:#E5E9F0; --fond:#F7F8FA; --carte:#fff;
  --vert:#15803D; --vert-fond:#EAF7EE; --orange:#FF7900;

  --police-affichage:'Bricolage Grotesque',-apple-system,sans-serif;
  --police-texte:'Inter',-apple-system,sans-serif;
  --police-donnees:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;

  --rayon-s:11px; --rayon-m:16px; --rayon-l:20px; --rayon-xl:26px;
  --ombre-s:0 1px 2px rgba(15,23,42,.04);
  --ombre-m:0 3px 10px rgba(15,23,42,.06);
  --ombre-l:0 6px 18px rgba(15,23,42,.08);
  --transition:.22s cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{font-family:var(--police-texte),-apple-system,sans-serif;color:var(--texte);background:var(--carte);line-height:1.55;-webkit-font-smoothing:antialiased;}
/* overflow-x:hidden reste uniquement sur html (pas sur body) : le mettre aussi sur body
   cree un second contexte de defilement qui casse position:sticky du header. */
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
svg{display:block;}
.conteneur{max-width:1180px;margin:0 auto;padding:0 24px;}
#fonctionnalites,#tarifs{scroll-margin-top:92px;}
a:focus-visible,button:focus-visible{outline:2px solid var(--bleu);outline-offset:2px;border-radius:4px;}

.btn-primaire{display:inline-flex;align-items:center;gap:9px;padding:14px 28px;border-radius:var(--rayon-s);background:var(--bleu);color:#fff;font-size:14px;font-weight:700;letter-spacing:-.01em;border:none;cursor:pointer;transition:background var(--transition),transform .12s ease,box-shadow var(--transition);white-space:nowrap;box-shadow:var(--ombre-s);}
.btn-primaire:hover{background:var(--bleu-fonce);box-shadow:var(--ombre-m);}
.btn-primaire:active{transform:scale(.98);}
.btn-secondaire{display:inline-flex;align-items:center;gap:9px;padding:14px 28px;border-radius:var(--rayon-s);background:var(--carte);color:var(--texte);font-size:14px;font-weight:700;border:1.5px solid var(--bordure);cursor:pointer;transition:border-color var(--transition),color var(--transition),background var(--transition);white-space:nowrap;}
.btn-secondaire:hover{border-color:var(--bleu);color:var(--bleu);background:var(--bleu-clair);}

/* ============ HEADER ============ */
header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.86);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--bordure);transition:box-shadow .25s ease;}
header.scrolled{box-shadow:var(--ombre-m);}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:15px 20px 15px 15px;gap:20px;width:100%;}
.marque{display:flex;align-items:center;gap:10px;font-family:var(--police-affichage);font-weight:700;font-size:17px;line-height:1;letter-spacing:-.01em;flex-shrink:0;}
.marque-badge{width:34px;height:34px;border-radius:10px;background:var(--bleu);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--police-affichage);font-size:15px;line-height:1;font-weight:800;flex-shrink:0;}
.logo-header{height:32px;width:auto;display:block;}

.header-droite{display:flex;align-items:center;gap:22px;margin-left:auto;}
nav.nav-principale{display:flex;align-items:center;gap:28px;}
.nav-principale a{position:relative;font-size:13.5px;font-weight:600;color:var(--texte-2);transition:color .15s;white-space:nowrap;padding-bottom:3px;}
.nav-principale a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--bleu);transition:right .2s ease;}
.nav-principale a:hover{color:var(--texte);}
.nav-principale a:hover::after{right:0;}
.header-actions{display:flex;align-items:center;gap:12px;}
.btn-connexion-header{display:inline-flex;align-items:center;padding:10px 20px;border-radius:var(--rayon-s);background:var(--carte);color:var(--texte);font-size:13.5px;font-weight:700;border:1.5px solid var(--bordure);transition:border-color .15s,color .15s;white-space:nowrap;}
.btn-connexion-header:hover{border-color:var(--bleu);color:var(--bleu);}

.selecteur-langue{position:relative;order:99;}
.selecteur-langue-btn{display:flex;align-items:center;gap:7px;padding:9px 13px;border-radius:var(--rayon-s);border:1.5px solid var(--bordure);background:var(--carte);cursor:pointer;font-size:12.5px;font-weight:700;color:var(--texte);transition:border-color .15s;}
.selecteur-langue-btn:hover{border-color:var(--bleu);}
.selecteur-langue-btn .fi{border-radius:3px;width:18px;height:13px;}
.selecteur-langue-panel{position:absolute;top:calc(100% + 10px);right:0;background:var(--carte);border:1px solid var(--bordure);border-radius:var(--rayon-m);box-shadow:var(--ombre-l);padding:6px;min-width:160px;display:none;z-index:50;}
.selecteur-langue.ouvert .selecteur-langue-panel{display:block;animation:apparition .15s ease;}
.selecteur-langue-option{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;font-size:13px;font-weight:600;color:var(--texte);}
.selecteur-langue-option:hover{background:var(--fond);}
.selecteur-langue-option.actif{background:var(--bleu-clair);color:var(--bleu);font-weight:800;}
.selecteur-langue-option .fi{border-radius:3px;width:18px;height:13px;}
@keyframes apparition{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}

.menu-mobile-toggle{display:none;order:100;width:40px;height:40px;border-radius:var(--rayon-s);border:1.5px solid var(--bordure);background:var(--carte);align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
.menu-mobile-toggle span{position:relative;display:block;width:16px;height:2px;background:var(--texte);border-radius:2px;transition:background .2s;}
.menu-mobile-toggle span::before,.menu-mobile-toggle span::after{content:"";position:absolute;left:0;width:16px;height:2px;background:var(--texte);border-radius:2px;transition:transform .25s ease,top .25s ease;}
.menu-mobile-toggle span::before{top:-6px;}
.menu-mobile-toggle span::after{top:6px;}
.menu-mobile-toggle[aria-expanded="true"] span{background:transparent;}
.menu-mobile-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg);}
.menu-mobile-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg);}

.menu-mobile{display:none;position:fixed;inset:0;z-index:200;background:var(--carte);padding:24px 28px 40px;overflow-y:auto;}
.menu-mobile.ouvert{display:block;}
.menu-mobile-entete{display:flex;align-items:center;justify-content:space-between;margin-bottom:36px;}
.menu-mobile-fermer{width:40px;height:40px;border-radius:var(--rayon-s);border:1.5px solid var(--bordure);background:var(--carte);display:flex;align-items:center;justify-content:center;color:var(--texte);cursor:pointer;}
.menu-mobile-liens{display:flex;flex-direction:column;gap:2px;}
.menu-mobile-liens a{font-family:var(--police-affichage);font-size:22px;font-weight:700;color:var(--texte);padding:15px 2px;border-bottom:1px solid var(--bordure);}

@media (max-width:900px){
  .header-droite .btn-primaire{display:none;}
  nav.nav-principale{display:none;}
  .header-droite{gap:10px;}
  .menu-mobile-toggle{display:inline-flex;}
}
@media (max-width:560px){.btn-connexion-header span{display:none;}.btn-connexion-header{padding:10px 12px;}}
@media (max-width:430px){
  .header-droite{gap:6px;}
  .header-droite .btn-primaire{padding:10px 14px;font-size:13px;}
  .selecteur-langue-btn{padding:7px 9px;font-size:11.5px;}
}
@media (max-width:480px){
  .btn-connexion-header{display:none;}
  .logo-header{height:26px;}
}

/* ============ UTILITAIRES DE SECTION (reutilisables sur toutes les pages publiques) ============ */
.section{padding:96px 0;}
.section-fond{background:var(--fond);}
.section-entete{text-align:center;max-width:600px;margin:0 auto 60px;}
.section-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--police-donnees);font-size:11.5px;font-weight:600;color:var(--bleu);text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px;}
.section-tag::before{content:"";width:18px;height:1.5px;background:var(--bleu);}
.section-entete h2{font-family:var(--police-affichage);font-size:clamp(26px,3.4vw,38px);font-weight:800;letter-spacing:-.02em;margin-bottom:16px;}
.section-entete p{font-size:15.5px;color:var(--texte-2);line-height:1.65;}
@media (max-width:640px){.section{padding:60px 0;}}

/* ============ FOOTER ============ */
footer{background:#0B1220;color:rgba(255,255,255,.6);padding:40px 0;max-height:350px;display:flex;align-items:center;}
.footer-liens-simple{display:flex;flex-wrap:wrap;justify-content:center;gap:28px;margin-bottom:22px;}
.footer-liens-simple a{font-size:13.5px;font-weight:600;color:rgba(255,255,255,.6);transition:color .15s;}
.footer-liens-simple a:hover{color:#fff;}
.footer-copyright{text-align:center;font-size:12px;color:rgba(255,255,255,.35);padding-top:22px;border-top:1px solid rgba(255,255,255,.08);}

/* ============ ANIMATIONS D'APPARITION (reutilisables) ============ */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);}
.reveal.visible{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1!important;transform:none!important;transition:none!important;}
}
.lien-tableau-bord{font-size:13.5px;font-weight:700;color:var(--vert);white-space:nowrap; border-bottom: 2px solid var(--vert); }
.lien-tableau-bord:hover{color:#0F6A2E;}