/* =========================================================
   BASE.CSS — Fondations
   Police : Inter (chargée depuis Google Fonts)
   Mobile-first. Animations pilotées par le défilement.
   ========================================================= */

/* --- Propriétés animables (CSS moderne) ----------------- */
@property --mx { syntax:"<percentage>"; inherits:false; initial-value:50% }
@property --my { syntax:"<percentage>"; inherits:false; initial-value:50% }

/* --- Transition entre pages (View Transitions API) ------ */
@view-transition { navigation:auto }

:root{
  /* Couleurs */
  --navy:#0B1B3A; --navy-2:#132A55; --navy-3:#1D3462;
  --cyan:#00C2FF; --cyan-dark:#0090BF;
  --orange:#FF6B35; --orange-2:#E85A25;
  --yellow:#FFC542; --green:#0E8A5C; --green-2:#0B6B47; --green-bg:#E6F9F1;
  --mist:#F5F7FA; --background:#F5F7FA; --white:#fff;
  --slate:#64748B; --text:#475569; --ink:#475569;
  --line:#E2E8F2; --border:#E2E8F2;

  /* Typographie — Inter partout */
  --font:"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Échelle typographique — calme, premium */
  --t-hero:clamp(2rem,1.4rem + 3vw,3rem);        /* ~32 → 48px */
  --t-h2:clamp(1.6rem,1.3rem + 1.6vw,2rem);      /* ~26 → 32px */
  --t-h3:clamp(1.2rem,1.05rem + .7vw,1.375rem);  /* ~19 → 22px */
  --t-body:clamp(1rem,.95rem + .3vw,1.125rem);   /* 16 → 18px  */
  --t-lede:clamp(1.125rem,1rem + .55vw,1.25rem); /* 18 → 20px  */
  --t-small:.9375rem;                            /* 15px */
  --t-label:1rem;                                /* 16px — labels type « À FAIRE » */

  /* Espacement */
  --s-1:.5rem;  --s-2:.75rem; --s-3:1rem;  --s-4:1.5rem;
  --s-5:2rem;   --s-6:3rem;   --s-7:4.5rem; --s-8:7rem;

  /* Formes */
  --radius:14px; --radius-lg:20px; --radius-xl:24px; --radius-pill:999px;

  /* Ombres — extrêmement discrètes */
  --shadow-sm:0 1px 2px rgba(11,27,58,.04);
  --shadow:0 4px 16px -6px rgba(11,27,58,.10);
  --shadow-lg:0 12px 32px -14px rgba(11,27,58,.16);

  /* Courbes — ressort, pas linéaire */
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --maxw:1200px; --nav-h:66px;

  /* Grain : la texture qui casse l'effet « aplat » */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* Fond sombre = couleur du pied de page : pas de bande blanche quand la
   barre d'adresse mobile se rétracte (dépassement haut et bas). */
/* overflow-x:clip sur <html> ET <body> : le panneau du menu mobile
   (.nav__links) est en position:fixed et, fermé, décalé de translateX(100%)
   — soit ~354 px HORS de l'écran à droite. Sur Chrome Android cela
   élargissait la page entière (dézoom, bande noire à droite, bouton
   WhatsApp flottant détaché du contenu). « clip » contient ce
   débordement sans créer de conteneur de défilement, donc sans casser
   position:sticky ni le défilement fluide. */
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px);
  background:#08132B;
  overflow-x:hidden;   /* repli navigateurs sans overflow:clip */
  overflow-x:clip;     /* préféré : ne crée pas de conteneur de défilement */
}

body{
  font-family:var(--font);
  font-size:var(--t-body);
  line-height:1.6;
  color:var(--text);
  background:#08132B;
  min-height:100vh;
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  overflow-x:clip;
}

img,picture,video,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
ul,ol{list-style:none}

h1,h2,h3,h4{ font-weight:700; line-height:1.2; letter-spacing:-.02em;
  color:var(--navy); text-wrap:balance }
h1{ font-size:var(--t-hero); line-height:1.15 }
h2{ font-size:var(--t-h2) }
h3{ font-size:var(--t-h3); line-height:1.3; letter-spacing:-.01em }

/* Longs mots composés néerlandais (rijbewijscategorieën, gezondheidsverklaring,
   herexamengarantie…) : jamais de débordement ni de texte coupé. */
h1,h2,h3,h4,p,li,dt,dd,summary,figcaption,label{ overflow-wrap:break-word }

/* --- Structure ------------------------------------------ */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--s-3) }
@media(min-width:768px){ .wrap{ padding-inline:var(--s-5) } }
.wrap--narrow{ max-width:820px }

/* Fond blanc explicite : le body est sombre, les sections neutres ne
   doivent pas le laisser transparaître. --dark / --mist l'emportent. */
.section{ padding-block:var(--s-7); position:relative; background:var(--white) }
@media(min-width:768px){ .section{ padding-block:var(--s-8) } }

.section--dark{ background:var(--navy); color:#B8C9E4 }
.section--dark h2,.section--dark h3{ color:#fff }
.section--mist{ background:var(--mist) }

/* --- Boutons -------------------------------------------- */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:700; font-size:1rem; letter-spacing:-.01em;
  padding:1rem 1.75rem; border-radius:var(--radius-pill); min-height:52px;
  transition:transform .35s var(--ease-spring), box-shadow .35s var(--ease-out);
  will-change:transform;
}
/* Halo qui suit le curseur */
.btn::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(140px circle at var(--mx) var(--my), rgba(255,255,255,.3), transparent 68%);
  opacity:0; transition:opacity .3s;
}
.btn:hover::before{ opacity:1 }
.btn:hover{ transform:translateY(-2px) }
.btn:active{ transform:translateY(0) scale(.98) }

.btn--primary{ background:var(--orange); color:#fff; box-shadow:0 1px 2px rgba(11,27,58,.10) }
.btn--primary:hover{ box-shadow:0 6px 18px -8px rgba(255,107,53,.45) }
.btn--whatsapp{ background:var(--green); color:#fff; box-shadow:0 1px 2px rgba(11,27,58,.10) }
.btn--whatsapp:hover{ box-shadow:0 6px 18px -8px rgba(14,138,92,.4) }
.btn--ghost{ background:rgba(255,255,255,.05); color:var(--navy); box-shadow:inset 0 0 0 1.5px currentColor }
.section--dark .btn--ghost{ color:#fff }

.btn-group{ display:flex; flex-direction:column; gap:var(--s-2) }
.btn-group .btn{ width:100% }
@media(min-width:600px){
  .btn-group{ flex-direction:row; flex-wrap:wrap }
  .btn-group .btn{ width:auto }
  .btn-group--center{ justify-content:center }
}

/* --- Losange de la marque ------------------------------- */
.ruit{ display:inline-block; width:.62em; height:.62em; background:var(--yellow);
  transform:rotate(45deg); border-radius:2px; flex-shrink:0 }

/* --- Barre de progression du défilement ----------------- */
.progress{
  position:fixed; inset:0 0 auto 0; height:3px; z-index:970;
  background:var(--orange);
  transform-origin:0 50%; transform:scaleX(0);
}
@supports (animation-timeline:scroll()){
  .progress{ animation:grow linear both; animation-timeline:scroll(root block) }
  @keyframes grow{ to{ transform:scaleX(1) } }
}

/* --- WhatsApp flottant, mobile uniquement --------------- */
.wa-float{
  position:fixed; right:var(--s-3); bottom:var(--s-3); z-index:900;
  width:58px; height:58px; border-radius:50%;
  background:var(--green); box-shadow:0 10px 30px -6px rgba(22,199,132,.65);
  display:grid; place-items:center;
  animation:pop .55s var(--ease-spring) 1.1s both;
}
@keyframes pop{ from{ transform:scale(0) } to{ transform:scale(1) } }
@media(min-width:1000px){ .wa-float{ display:none } }
/* (Le masquage du bouton flottant menu ouvert est géré dans pages.css
   via .nav__overlay.is-open ~ .wa-float) */

/* --- Accessibilité -------------------------------------- */
:focus-visible{ outline:3px solid var(--green); outline-offset:3px; border-radius:6px }
.skip-link{ position:absolute; left:-9999px; background:var(--navy); color:#fff;
  padding:var(--s-2) var(--s-3); z-index:1000; border-radius:0 0 8px 0 }
.skip-link:focus{ left:0; top:0 }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap }

/* =========================================================
   APPARITION AU DÉFILEMENT
   Natif si le navigateur sait (Chrome, Edge, Safari récents),
   sinon repli JavaScript via la classe .in-view.
   ========================================================= */
.rise{ opacity:0; transform:translateY(34px) }
.rise.in-view{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease-out), transform .85s var(--ease-out);
  /* Décalage en cascade : les éléments d'un même bloc (--i:0,1,2…)
     apparaissent l'un après l'autre, pas tous ensemble. */
  transition-delay:calc(var(--i,0) * 90ms);
}
@supports (animation-timeline:view()){
  .rise{
    opacity:1; transform:none;
    animation:rise-in linear both;
    animation-timeline:view();
    animation-range:entry 4% cover 24%;
  }
  @keyframes rise-in{
    from{ opacity:0; transform:translateY(34px) }
    to  { opacity:1; transform:none }
  }
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .rise{ opacity:1 !important; transform:none !important }
}