/* ==========================================================================
   PARKEEYZ — Design System v4 « clair »
   Baloo 2 (titrage) + Inter (labeur)
   Fond papier, encre navy, accents cyan. Sections sombres en respiration.
   ========================================================================== */

/* Le € de Baloo 2 est peu lisible aux grandes tailles : on ne remplace que ce
   glyphe par celui d'une grotesque, via unicode-range. Le reste du texte garde
   sa police. */
@font-face{
  font-family:'PkzEuro';
  src:local('Inter'), local('Inter Regular'), local('Helvetica Neue'), local('Arial'), local('Segoe UI'), local('Roboto');
  unicode-range:U+20AC;
  font-display:swap;
}

:root{
  /* Surfaces */
  --paper:#FBFAF6;         /* fond principal, crème chaud */
  --paper-2:#FFFFFF;       /* cartes, surfaces surélevées */
  --paper-3:#F2F0EA;       /* zones alternées */
  --sand:#EFEADF;          /* aplats doux */

  /* Encre */
  --ink:#0B1B3A;           /* titres, texte fort */
  --ink-2:#4A5B78;         /* texte courant */
  --ink-3:#8593AB;         /* légendes */
  --line:#E4E0D6;          /* filets */

  /* Marque */
  --cyan:#00B4D8;          /* aplats, dégradés */
  --cyan-ink:#00778F;      /* cyan lisible sur fond clair (AA) */
  --blue:#1A5FD0;
  --navy:#0B1B3A;
  --navy-2:#122A55;
  --gold:#C98A16;
  --gold-soft:#F2C14E;
  --green:#00875A;

  --grad:linear-gradient(120deg,#1A5FD0 0%,#00B4D8 100%);
  --grad-soft:linear-gradient(120deg,rgba(26,95,208,.09),rgba(0,180,216,.09));
  --grad-gold:linear-gradient(120deg,#C98A16 0%,#F2C14E 100%);

  --sh-1:0 1px 2px rgba(11,27,58,.05), 0 4px 16px rgba(11,27,58,.05);
  --sh-2:0 2px 4px rgba(11,27,58,.05), 0 12px 34px rgba(11,27,58,.09);
  --sh-3:0 8px 20px rgba(11,27,58,.08), 0 30px 70px rgba(11,27,58,.13);

  --r:18px; --r-sm:12px; --r-lg:30px; --r-xl:44px;
  --nav-h:74px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
  --maxw:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink-2);
  font-family:'PkzEuro','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.68;
  /* clip plutôt que hidden : empêche le débordement horizontal sans créer
     de conteneur de défilement (ce qui casserait position:sticky). */
  overflow-x:clip;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
body.pkz-locked{overflow:hidden}
img,svg,video{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer}
h1,h2,h3,h4{font-family:'PkzEuro','Baloo 2',cursive,sans-serif; font-weight:700; line-height:1.06; margin:0 0 .5em; color:var(--ink); letter-spacing:-.025em}
h1{font-size:clamp(2.7rem,6.4vw,5.4rem)}
h2{font-size:clamp(2rem,4.4vw,3.4rem)}
h3{font-size:clamp(1.2rem,2vw,1.5rem); letter-spacing:-.015em}
p{margin:0 0 1.1em}
strong{color:var(--ink); font-weight:600}
::selection{background:var(--cyan); color:#fff}

::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--paper-3)}
::-webkit-scrollbar-thumb{background:#C9C3B4; border-radius:10px; border:3px solid var(--paper-3)}
::-webkit-scrollbar-thumb:hover{background:var(--cyan-ink)}

/* Layout ------------------------------------------------------------------ */
.wrap{width:min(100% - 44px,var(--maxw)); margin-inline:auto}
.wrap-lg{width:min(100% - 44px,1380px); margin-inline:auto}
section{position:relative; padding:clamp(76px,10vw,148px) 0}
.sec-head{max-width:720px; margin:0 0 clamp(44px,6vw,76px)}
.sec-head.center{margin-inline:auto; text-align:center}
.sec-head p{color:var(--ink-2); font-size:clamp(1.02rem,1.4vw,1.16rem)}

.eyebrow{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:20px;
  font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cyan-ink);
}
.eyebrow::before{content:''; width:26px; height:2px; border-radius:2px; background:var(--grad)}
.eyebrow.solo::before{display:none}

.grad-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.gold-text{background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent}

/* Sections sombres, en respiration ---------------------------------------- */
.dark{background:var(--navy); color:rgba(255,255,255,.74)}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff}
.dark strong{color:#fff}
.dark .eyebrow{color:#5FE0F5}
.dark .sec-head p{color:rgba(255,255,255,.68)}
.dark .card{background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.1); box-shadow:none}
.dark .card p{color:rgba(255,255,255,.62)}
.dark .card:hover{background:rgba(255,255,255,.07); border-color:rgba(95,224,245,.4)}
.dark .btn-ghost{background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.2)}
.dark .btn-ghost:hover{background:rgba(255,255,255,.12); border-color:rgba(95,224,245,.5)}

/* Boutons ------------------------------------------------------------------ */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 30px; border-radius:100px; border:1px solid transparent; font-weight:600; font-size:.97rem;
  letter-spacing:-.005em; overflow:hidden; isolation:isolate; text-align:center;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
/* Remplissage qui monte au survol, au lieu d'un simple changement de teinte */
.btn::after{
  content:''; position:absolute; inset:0; z-index:-1; transform:translateY(101%);
  transition:transform .5s var(--ease);
}
.btn:hover::after{transform:translateY(0)}
.btn:active{transform:scale(.985)}

.btn-primary{background:var(--navy); color:#fff; box-shadow:var(--sh-2)}
.btn-primary::after{background:var(--grad)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:var(--sh-3)}

.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost::after{background:var(--ink)}
.btn-ghost:hover{color:#fff; border-color:var(--ink); transform:translateY(-2px)}

.btn-gold{background:var(--navy); color:#fff; box-shadow:var(--sh-2)}
.btn-gold::after{background:var(--grad-gold)}
.btn-gold:hover{transform:translateY(-2px); box-shadow:var(--sh-3)}

.btn-lg{padding:19px 38px; font-size:1.03rem}
.btn-block{width:100%}

/* Lien souligné animé ------------------------------------------------------ */
/* Lien dans le texte : hauteur de cible d'au moins 24 px sans casser le flux. */
.link-u{position:relative; display:inline-block; padding-block:3px; min-height:24px; color:var(--cyan-ink); font-weight:600}
.link-u::after{content:''; position:absolute; left:0; right:0; bottom:-2px; height:1.5px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease)}
.link-u:hover::after{transform:scaleX(1); transform-origin:left}

/* Navigation --------------------------------------------------------------- */
.nav{
  /* sticky et non fixed : avec un bandeau d'annonce qui défile, un header fixe
     laissait apparaître une bande de page au-dessus de lui. En sticky, le header
     suit le flux puis se colle en haut — aucun interstice possible. */
  position:sticky; top:0; z-index:900; height:var(--nav-h);
  display:flex; align-items:center; border-bottom:1px solid transparent;
  background:var(--paper);
  transition:background .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.nav.scrolled{
  background:rgba(251,250,246,.9); backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-bottom-color:var(--line); box-shadow:0 4px 24px rgba(11,27,58,.05);
}
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:26px; width:min(100% - 44px,1380px); margin-inline:auto}
.nav-logo img{height:31px; width:auto}
.nav-links{display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0}
.nav-links a{
  position:relative; display:block; padding:9px 16px; border-radius:100px;
  font-size:.93rem; font-weight:500; color:var(--ink); transition:color .3s;
}
.nav-links a::before{
  content:''; position:absolute; inset:0; border-radius:100px; background:var(--ink);
  transform:scale(.82); opacity:0; z-index:-1;
  transition:transform .45s var(--ease), opacity .35s var(--ease);
}
.nav-links a:hover{color:#fff}
.nav-links a:hover::before{transform:scale(1); opacity:1}
.nav-links a.is-active{color:var(--cyan-ink); font-weight:600}
.nav-cta{display:flex; align-items:center; gap:11px}
.nav-burger{
  display:none; width:44px; height:44px; border:1px solid var(--line); background:var(--paper-2);
  border-radius:13px; color:var(--ink); align-items:center; justify-content:center; font-size:1.05rem;
}

.mobile-menu{
  position:fixed; inset:0; z-index:899; background:var(--paper);
  display:flex; flex-direction:column; justify-content:center; gap:2px; padding:96px 34px 40px;
  clip-path:circle(0% at calc(100% - 46px) 44px); transition:clip-path .8s var(--ease-io);
  overscroll-behavior:contain;
}
.mobile-menu.open{clip-path:circle(150% at calc(100% - 46px) 44px)}
.mobile-menu a{
  font-family:'Baloo 2',cursive,sans-serif; font-size:2rem; font-weight:600; color:var(--ink);
  padding:13px 0; border-bottom:1px solid var(--line);
  opacity:0; transform:translateY(26px); transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.mobile-menu.open a{opacity:1; transform:none}
.mobile-menu .btn{margin-top:28px}

/* Cartes -------------------------------------------------------------------- */
.card{
  position:relative; padding:34px; border-radius:var(--r);
  background:var(--paper-2); border:1px solid var(--line); box-shadow:var(--sh-1);
  transition:transform .6s var(--ease), box-shadow .6s var(--ease), border-color .6s var(--ease);
}
.card:hover{transform:translateY(-5px); box-shadow:var(--sh-2); border-color:#D3CEC0}
.card h3{margin-bottom:.42em}
.card p{color:var(--ink-2); font-size:.97rem; margin:0}
.card-icon{
  width:52px; height:52px; border-radius:15px; display:grid; place-items:center;
  font-size:1.25rem; color:var(--cyan-ink); margin-bottom:22px;
  background:var(--grad-soft); border:1px solid rgba(0,180,216,.18);
  transition:transform .6s var(--ease);
}
.card:hover .card-icon{transform:scale(1.07) rotate(-4deg)}

.grid{display:grid; gap:22px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,228px),1fr))}

/* Bento : cartes de tailles inégales, plus vivant qu'une grille régulière ---- */
.bento{display:grid; gap:20px; grid-template-columns:repeat(6,1fr)}
.bento > *{grid-column:span 2}
.bento > .b-wide{grid-column:span 3}
.bento > .b-full{grid-column:span 6}
@media (max-width:900px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento > *,.bento > .b-wide,.bento > .b-full{grid-column:span 2}
}

/* Marquee -------------------------------------------------------------------- */
.marquee{
  overflow:hidden; padding:26px 0; border-block:1px solid var(--line); background:var(--paper-3);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.marquee-track{display:flex; width:max-content; animation:pkz-marquee 40s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-item{
  display:inline-flex; align-items:center; gap:15px; padding:0 30px;
  font-family:'Baloo 2',cursive,sans-serif; font-weight:600; font-size:clamp(1.05rem,1.9vw,1.4rem);
  color:var(--ink); white-space:nowrap;
}
.marquee-item::after{content:''; width:7px; height:7px; border-radius:50%; background:var(--cyan); flex:none}
@keyframes pkz-marquee{to{transform:translateX(-50%)}}

/* Révélations ---------------------------------------------------------------- */
[data-reveal]{opacity:1; transform:none}
.pkz-js [data-reveal]{opacity:0; transform:translateY(30px); transition:opacity 1s var(--ease), transform 1s var(--ease)}
.pkz-js [data-reveal].in{opacity:1; transform:none}
.pkz-js [data-reveal="left"]{transform:translateX(-40px)}
.pkz-js [data-reveal="right"]{transform:translateX(40px)}
/* Sur petit écran, un décalage horizontal élargit la page avant révélation :
   on retombe sur une montée verticale, qui ne déborde jamais. */
@media (max-width:900px){
  .pkz-js [data-reveal="left"],.pkz-js [data-reveal="right"]{transform:translateY(30px)}
}
.pkz-js [data-reveal="scale"]{transform:scale(.95)}

/* Dévoilement d'image par masque, façon rideau */
.reveal-img{position:relative; overflow:hidden; border-radius:var(--r-lg)}
.reveal-img > img{transform:scale(1.14); transition:transform 1.5s var(--ease)}
.reveal-img::after{
  content:''; position:absolute; inset:0; background:var(--sand); transform-origin:bottom;
  transition:transform 1.15s var(--ease-io);
}
.pkz-js .reveal-img.in > img{transform:scale(1)}
.pkz-js .reveal-img.in::after{transform:scaleY(0)}
body:not(.pkz-js) .reveal-img::after{display:none}

/* Titres qui montent, mot à mot */
.split-line{display:block; overflow:hidden; padding-bottom:.06em}
.pkz-js .split-line > span{display:block; transform:translateY(108%); transition:transform 1.15s var(--ease)}
.pkz-js .in .split-line > span,.pkz-js .split-line.in > span{transform:none}
.pkz-js .w-rise{display:inline-block; overflow:hidden; vertical-align:bottom}
.pkz-js .w-rise > i{display:inline-block; font-style:inherit; transform:translateY(110%); transition:transform .95s var(--ease)}
.pkz-js .in .w-rise > i{transform:none}

/* Parallaxe ------------------------------------------------------------------- */
[data-parallax]{will-change:transform}

/* Curseur : plus de pastille qui suit. Une étiquette n'apparaît que sur
   les zones qui le méritent (visuels, vidéo, galerie). --------------------- */
.pkz-label{
  position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  display:flex; align-items:center; gap:7px;
  padding:11px 19px; border-radius:100px; background:var(--ink); color:#fff;
  font-size:.78rem; font-weight:600; letter-spacing:.04em; white-space:nowrap;
  transform:translate(-50%,-50%) scale(.5); opacity:0;
  transition:opacity .32s var(--ease), transform .32s var(--ease);
}
.pkz-label.on{opacity:1; transform:translate(-50%,-50%) scale(1)}

/* Chiffres --------------------------------------------------------------------- */
.stats{
  display:grid; gap:0; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--paper-2);
  box-shadow:var(--sh-1);
}
.stat{position:relative; padding:40px 22px 34px; text-align:center; border-right:1px solid var(--line); transition:background .45s var(--ease)}
.stat:last-child{border-right:0}
.stat:hover{background:var(--paper-3)}
/* Le chiffre porte la section : très grand, en dégradé de marque, chiffres
   tabulaires pour que le compteur ne fasse pas sautiller la mise en page. */
.stat b{
  display:block; font-family:'PkzEuro','Baloo 2',cursive,sans-serif;
  font-size:clamp(3.2rem,6vw,4.6rem); line-height:.92; font-weight:700;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  font-variant-numeric:tabular-nums; letter-spacing:-.04em;
}
/* L'unité reste lisible mais ne concurrence pas le chiffre. */
.stat .u{
  display:inline-block; font-size:.3em; font-weight:600; letter-spacing:.02em;
  vertical-align:.62em; margin-left:.12em; -webkit-text-fill-color:var(--cyan-ink); color:var(--cyan-ink);
}
.stat span.lbl{
  display:block; margin-top:14px; font-size:.78rem; color:var(--ink-3);
  text-transform:uppercase; letter-spacing:.14em; font-weight:700;
}
.stat::after{
  content:''; position:absolute; left:50%; bottom:0; width:0; height:3px;
  background:var(--grad); transform:translateX(-50%); transition:width .55s var(--ease);
}
.stat:hover::after{width:56px}
.dark .stats{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12)}
.dark .stat{border-right-color:rgba(255,255,255,.12)}
.dark .stat:hover{background:rgba(255,255,255,.07)}
.dark .stat b{background:linear-gradient(120deg,#8FE9FB,#5FE0F5); -webkit-background-clip:text; background-clip:text}
.dark .stat .u{-webkit-text-fill-color:#5FE0F5; color:#5FE0F5}
.dark .stat span.lbl{color:rgba(255,255,255,.55)}
@media (max-width:640px){
  .stats{grid-template-columns:1fr 1fr}
  .stat{border-right:0; border-bottom:1px solid var(--line); padding:30px 14px 26px}
  .stat:nth-child(odd){border-right:1px solid var(--line)}
  .dark .stat:nth-child(odd){border-right-color:rgba(255,255,255,.12)}
}

/* Filet lumineux ---------------------------------------------------------------- */
.hr-glow{height:1px; border:0; margin:0; background:var(--line)}

/* Accordéon ---------------------------------------------------------------------- */
.acc{border-bottom:1px solid var(--line); background:transparent}
.acc summary{
  list-style:none; cursor:pointer; padding:26px 4px; display:flex; align-items:center; justify-content:space-between; gap:22px;
  font-family:'Baloo 2',cursive,sans-serif; font-weight:600; font-size:1.14rem; color:var(--ink);
  transition:color .3s;
}
.acc summary:hover{color:var(--cyan-ink)}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{
  content:''; flex:none; width:26px; height:26px; border-radius:50%; border:1.5px solid var(--line);
  background:
    linear-gradient(currentColor,currentColor) center/9px 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) center/1.5px 9px no-repeat;
  color:var(--cyan-ink); transition:transform .45s var(--ease), border-color .35s;
}
.acc[open] summary::after{transform:rotate(135deg); border-color:var(--cyan)}
.acc-body{padding:0 4px 28px; color:var(--ink-2); font-size:.99rem; max-width:76ch}

/* Vidéo ---------------------------------------------------------------------------- */
.video-frame{
  position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--navy);
  box-shadow:var(--sh-3); aspect-ratio:16/9;
}
.video-frame video{width:100%; height:100%; object-fit:cover; display:block}
.video-frame.is-portrait{aspect-ratio:9/16; max-width:400px; margin-inline:auto}
.video-poster{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.video-play{
  position:absolute; inset:0; display:grid; place-items:center; border:0; background:rgba(11,27,58,.24);
  transition:background .45s var(--ease); width:100%;
}
.video-play:hover{background:rgba(11,27,58,.12)}
.video-play span{
  display:grid; place-items:center; width:84px; height:84px; border-radius:50%;
  background:rgba(255,255,255,.94); color:var(--ink); font-size:1.35rem; padding-left:5px;
  box-shadow:0 14px 40px rgba(11,27,58,.28); transition:transform .5s var(--ease);
}
.video-play:hover span{transform:scale(1.09)}
.video-frame.playing .video-play,.video-frame.playing .video-poster{opacity:0; pointer-events:none; transition:opacity .4s}

/* Étapes en colle : le visuel reste, le texte défile ------------------------------- */
.sticky-col{position:sticky; top:calc(var(--nav-h) + 40px)}

/* Pied de page ---------------------------------------------------------------------- */
.footer{background:var(--navy); color:rgba(255,255,255,.62); padding:86px 0 34px}
.footer h4{font-size:.76rem; letter-spacing:.15em; text-transform:uppercase; color:#5FE0F5; margin-bottom:20px; font-family:'Inter',sans-serif; font-weight:700}
.footer-grid{display:grid; gap:48px; grid-template-columns:1.7fr repeat(auto-fit,minmax(148px,1fr))}
.footer-logo img{height:34px; margin-bottom:22px; filter:brightness(0) invert(1)}
.footer p{color:rgba(255,255,255,.6); font-size:.93rem; max-width:340px}
.footer ul{list-style:none; margin:0; padding:0}
.footer li{margin-bottom:2px}
.footer li a{display:inline-block; padding:6px 0; min-height:24px; color:rgba(255,255,255,.6); font-size:.93rem; transition:color .3s, padding-left .35s var(--ease)}
.footer li a:hover{color:#5FE0F5; padding-left:6px}
.footer-social{display:flex; gap:11px; margin-top:24px}
.footer-social a{width:41px; height:41px; border-radius:13px; display:grid; place-items:center; background:rgba(255,255,255,.07); color:rgba(255,255,255,.7); transition:.4s var(--ease)}
.footer-social a:hover{background:var(--cyan); color:var(--navy); transform:translateY(-3px)}
.footer-bottom{margin-top:58px; padding-top:28px; border-top:1px solid rgba(255,255,255,.11); display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center; color:rgba(255,255,255,.42); font-size:.85rem}
.footer-bottom nav{display:flex; flex-wrap:wrap; gap:8px 22px}
.footer-bottom nav a{display:inline-block; padding:6px 0; min-height:24px}
.footer-bottom a:hover{color:#5FE0F5}
.origin-badge{
  display:inline-flex; align-items:center; gap:9px; margin-top:18px; padding:7px 15px; border-radius:100px;
  font-size:.81rem; font-weight:600; color:#5FE0F5; background:rgba(95,224,245,.09); border:1px solid rgba(95,224,245,.22);
}

/* Barre de progression --------------------------------------------------------------- */
.pkz-progress{position:fixed; top:0; left:0; height:2px; width:0; z-index:950; background:var(--grad); transition:width .1s linear}

/* Bandeau d'annonce -------------------------------------------------------------------- */
.topbar{
  position:relative; z-index:901; background:var(--navy); color:#fff; text-align:center;
  padding:10px 20px; font-size:.84rem; font-weight:500; letter-spacing:.005em;
}
.topbar a{color:#5FE0F5; display:inline-block; padding:4px 2px; min-height:24px; text-decoration:underline; text-underline-offset:3px}


/* Tableaux ------------------------------------------------------------------------------- */
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--paper-2)}
.table-wrap table{width:100%; min-width:660px; border-collapse:collapse; font-size:.95rem}
.table-wrap th,.table-wrap td{padding:16px 22px; text-align:left}
.table-wrap thead th{font-family:'Baloo 2',cursive,sans-serif; font-size:1.05rem; color:var(--ink); border-bottom:1px solid var(--line)}
.table-wrap tbody tr{border-bottom:1px solid var(--line)}
.table-wrap tbody tr:last-child{border-bottom:0}
.table-wrap tbody tr:hover{background:var(--paper-3)}
.grp-row th{font-size:.73rem !important; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan-ink); background:var(--paper-3); font-family:'Inter',sans-serif !important; font-weight:700}

/* Formulaires ------------------------------------------------------------------------------ */
.fld{display:block}
.fld > span{display:block; font-size:.85rem; font-weight:600; color:var(--ink); margin-bottom:8px}
.fld input,.fld select,.fld textarea{
  width:100%; padding:14px 17px; border-radius:var(--r-sm); background:var(--paper-2);
  border:1px solid var(--line); color:var(--ink); font:inherit; font-size:.97rem;
  transition:border-color .3s, box-shadow .3s;
}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none; border-color:var(--cyan); box-shadow:0 0 0 4px rgba(0,180,216,.13);
}
.fld textarea{resize:vertical; min-height:110px}

/* Accessibilité ------------------------------------------------------------------------------ */
.skip-link{position:absolute; left:-9999px; top:0; z-index:9999; padding:12px 20px; background:var(--ink); color:#fff; font-weight:600; border-radius:0 0 10px 0}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--cyan-ink); outline-offset:3px; border-radius:6px}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* Responsive ----------------------------------------------------------------------------------- */
@media (max-width:1024px){
  .nav-links{display:none}
  .nav-burger{display:flex}
  .nav-cta .btn-ghost{display:none}
  .footer-grid{grid-template-columns:1fr 1fr}
  .sticky-col{position:static}
}
@media (max-width:640px){
  body{font-size:16px}
  .footer-grid{grid-template-columns:1fr}
  .btn{width:100%}
  .nav-cta .btn{width:auto; padding:12px 20px; font-size:.88rem}
  section{padding:66px 0}
  .wrap,.wrap-lg{width:min(100% - 32px,var(--maxw))}
}
@media (hover:none){.pkz-label{display:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  [data-reveal]{opacity:1 !important; transform:none !important}
  .split-line > span,.w-rise > i{transform:none !important}
  .reveal-img::after{display:none}
  .reveal-img > img{transform:none !important}
  .marquee-track{animation:none}
}


/* Visuels produit : cadre net plutôt qu'une image détourée qui flotte -------- */
.hero-shot{
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  background:linear-gradient(160deg,var(--sand),var(--paper-3));
  aspect-ratio:4/5; max-width:520px; margin-inline:auto;
  box-shadow:var(--sh-2); padding:34px;
}
/* contain plutôt que cover : le produit doit être vu en entier, jamais rogné */
.hero-shot > img{width:100%; height:100%; object-fit:contain}
.hero-tag{
  position:absolute; left:22px; bottom:22px; display:inline-flex; align-items:center; gap:9px;
  padding:11px 18px; border-radius:100px; background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font-size:.86rem; font-weight:600; color:var(--ink); box-shadow:var(--sh-1);
}
.hero-tag i{color:var(--cyan-ink)}

.shot-frame{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(160deg,var(--sand),var(--paper-3));
  aspect-ratio:1/1; box-shadow:var(--sh-1); padding:30px;
}
.shot-frame > img{object-fit:contain !important}
@media (max-width:640px){
  .hero-shot{aspect-ratio:1/1; border-radius:var(--r-lg); padding:22px}
  .hero-tag{left:14px; bottom:14px; font-size:.8rem; padding:9px 15px}
}


/* Cartes « Pour qui ? » : au survol, la carte grossit et son texte avec elle,
   pour être lue sans effort. Les voisines s'effacent légèrement. */
.zoom-grid{display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.zoom-card{
  transition:transform .55s var(--ease), box-shadow .55s var(--ease),
             border-color .55s var(--ease), opacity .45s var(--ease);
  transform-origin:center;
}
@media (hover:hover) and (min-width:900px){
  .zoom-grid:hover .zoom-card{opacity:.62}
  .zoom-grid .zoom-card:hover{
    opacity:1; transform:scale(1.075); z-index:5;
    box-shadow:var(--sh-3); border-color:var(--cyan);
  }
  .zoom-card:hover .card-icon{transform:scale(1.1) rotate(-4deg)}
}
.zoom-card:hover h3{color:var(--cyan-ink)}
.zoom-card h3{transition:color .4s var(--ease)}
@media (prefers-reduced-motion:reduce){
  .zoom-grid:hover .zoom-card,.zoom-grid .zoom-card:hover{opacity:1; transform:none}
}

/* Pages légales : colonne de lecture étroite, sommaire collant ------------- */
.legal{display:grid; gap:clamp(30px,4vw,58px); grid-template-columns:minmax(0,1fr) 240px; align-items:start}
@media (max-width:900px){.legal{grid-template-columns:1fr}}
.legal-body{max-width:72ch; font-size:1rem}
.legal-body h2{
  font-size:clamp(1.35rem,2.4vw,1.75rem); margin:2.4em 0 .6em; padding-top:.5em;
  border-top:1px solid var(--line); scroll-margin-top:110px;
}
.legal-body h2:first-of-type{margin-top:0; border-top:0; padding-top:0}
.legal-body h3{font-size:1.08rem; margin:1.8em 0 .5em}
.legal-body p,.legal-body li{color:var(--ink-2)}
.legal-body ul,.legal-body ol{padding-left:1.15em; margin:0 0 1.2em}
.legal-body li{margin-bottom:.5em}
/* Lien dans un texte légal : cible d'au moins 24 px sans casser le flux. */
.legal-body a{
  display:inline-block; padding-block:3px; min-height:24px;
  color:var(--cyan-ink); text-decoration:underline; text-underline-offset:3px;
}
.legal-id a{display:inline-block; padding-block:2px; min-height:24px}

/* Identité de l'éditeur : lisible sans ressembler à un tableau de données */
.legal-id{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--paper-2); margin:0 0 1.6em}
.legal-id dl{margin:0; display:grid; grid-template-columns:minmax(150px,34%) 1fr}
.legal-id dt{padding:13px 20px; font-weight:600; color:var(--ink); font-size:.92rem; border-bottom:1px solid var(--line); background:var(--paper-3)}
.legal-id dd{margin:0; padding:13px 20px; color:var(--ink-2); font-size:.94rem; border-bottom:1px solid var(--line)}
@media (max-width:560px){
  .legal-id dl{grid-template-columns:1fr}
  .legal-id dt{border-bottom:0; padding-bottom:2px; background:transparent}
  .legal-id dd{padding-top:2px}
}

/* Information manquante signalée franchement, plutôt qu'un blanc trompeur */
.legal-todo{
  display:inline-flex; align-items:center; gap:7px; padding:2px 10px; border-radius:6px;
  background:#FDF3D9; color:#8A6100; font-size:.84rem; font-weight:600; border:1px solid #F0DCA8;
}

.legal-toc{position:sticky; top:calc(var(--nav-h) + 26px); font-size:.9rem}
.legal-toc strong{display:block; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan-ink); margin-bottom:14px}
.legal-toc ol{list-style:none; margin:0; padding:0; counter-reset:toc}
.legal-toc li{counter-increment:toc; margin-bottom:2px}
.legal-toc a{display:block; padding:7px 0 7px 26px; position:relative; color:var(--ink-2); transition:color .3s, padding-left .3s var(--ease)}
.legal-toc a::before{content:counter(toc); position:absolute; left:0; color:var(--ink-3); font-variant-numeric:tabular-nums; font-size:.85em}
.legal-toc a:hover{color:var(--cyan-ink); padding-left:31px}
@media (max-width:900px){.legal-toc{position:static; padding-top:26px; border-top:1px solid var(--line)}}

.legal-note{
  padding:20px 24px; border-radius:var(--r); background:var(--paper-3);
  border-left:3px solid var(--cyan); margin:1.6em 0; font-size:.95rem;
}
.legal-note p:last-child{margin-bottom:0}

/* Complément d'achat : proposer l'abonnement sans parasiter le bouton principal */
.addon{
  margin-top:26px; padding:24px; border-radius:var(--r);
  background:linear-gradient(150deg,rgba(242,193,78,.1),rgba(255,255,255,0));
  border:1px solid rgba(201,138,22,.28);
}
.addon-head{display:flex; gap:15px; align-items:flex-start; margin-bottom:14px}
.addon-icon{
  flex:none; width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:var(--grad-gold); color:#fff; font-size:1rem;
}
.addon-head strong{display:block; font-family:'PkzEuro','Baloo 2',cursive,sans-serif; font-size:1.12rem; color:var(--ink); margin-bottom:3px}
.addon-head span{display:block; font-size:.93rem; color:var(--ink-2); line-height:1.5}
.addon-note{font-size:.87rem; color:var(--ink-3); margin:0 0 18px}
.addon-actions{display:flex; flex-wrap:wrap; gap:11px}
.addon-actions .btn{flex:1 1 auto; padding:13px 22px; font-size:.93rem}
.addon-save{
  margin-left:7px; padding:2px 8px; border-radius:100px; font-size:.72rem; font-weight:700;
  background:var(--grad-gold); color:#fff;
}
.addon-more{display:inline-block; margin-top:14px; font-size:.87rem}
@media (max-width:520px){
  .addon-actions{flex-direction:column}
  .addon-actions .btn{width:100%}
}

/* Plan gratuit : état, pas action — rien à acheter, donc pas de bouton */
.plan-included{
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 22px; border-radius:100px; font-weight:600; font-size:.95rem;
  color:var(--green); background:rgba(0,135,90,.08); border:1px solid rgba(0,135,90,.22);
}