/* ============================================================================
   KIDIBOOK — IDENTITÉ DE MARQUE : header & footer, tout le site.
   ----------------------------------------------------------------------------
   Chargé EN DERNIER dans le <head> : prime sur les <style> inline des pages
   sans avoir à les réécrire une par une.

   Périmètre : header.nav / header.kb-header / header.hero,
               footer.footer, .kb-footer, et les pieds simplifiés <footer>.
   Volontairement HORS périmètre : .kb-fiche-footer (pied clair, thémé par
   niveau, géré par assets/kidibook-fiche.css) — on ne le contredit pas.

   Contraintes : aucune balise de titre ajoutée, animations en transform /
   opacity uniquement, prefers-reduced-motion respecté, focus-visible net,
   cibles tactiles >= 44 px, contrastes AA.
   ========================================================================== */

:root{
  --kbi-petrol:#0D4C5C;
  --kbi-ink:#17323B;
  --kbi-accent:#FF4081;
  --kbi-gold:#FFD24F;                 /* 6,6:1 sur pétrole */
  --kbi-gold-hi:#FFE388;              /* 7,8:1 sur pétrole */
  --kbi-onfoot:#EAF4F6;               /* 8,5:1 sur pétrole */
  --kbi-onfoot-soft:rgba(234,244,246,.80);
  --kbi-title:"Baloo 2","Fredoka",system-ui,-apple-system,sans-serif;

  /* Signature de marque : les 6 couleurs de niveau, GS -> CM2.
     Le pétrole GS est éclairci (#1E8FA6) : sur un pied pétrole, la couleur
     d'origine serait invisible — le bandeau perdrait son premier sixième. */
  --kbi-strip:linear-gradient(90deg,
    #1E8FA6 0 15.2%, #FFD23F 18.1% 32.0%, #FF8A00 34.8% 48.6%,
    #7B61FF 51.4% 65.2%, #36B24A 68.0% 81.9%, #3E82E8 84.8% 100%);

  --kbi-nav-y:12px;                   /* hauteur du header, compactée au défilement */
}

/* ==========================================================================
   1. MOT-MARQUE
   ========================================================================== */
.kb-wm{
  font-family:var(--kbi-title);font-weight:800;letter-spacing:.4px;
  color:var(--kbi-petrol);
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .kb-wm{
    background:linear-gradient(90deg,#FF7A1A 0 14%,#F03D7C 14% 20%,#57A639 20% 33%,
      #19B4D1 33% 39%,#EF4056 39% 52%,#F8B500 52% 67%,#7B61FF 67% 82%,#2D6FE0 82% 100%);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
  }
  /* Variante fond sombre : mêmes teintes éclaircies, chacune >= 4,4:1 sur le
     pétrole #0D4C5C — le mot-marque reste lisible dans le pied de page. */
  footer.footer .kb-wm,.kb-footer .kb-wm{
    background:linear-gradient(90deg,#FFB25E 0 14%,#FF9EBC 14% 20%,#8FE0A0 20% 33%,
      #7FE3F5 33% 39%,#FF9A93 39% 52%,#FFD86B 52% 67%,#BCAEFF 67% 82%,#8FC0FF 82% 100%);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
  }
}

/* Utilitaire : présent pour les lecteurs d'écran et l'indexation, invisible
   à l'œil (jamais display:none — le texte doit rester dans le document). */
.kb-vh{
  position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ==========================================================================
   2. HEADER
   ========================================================================== */
/* CORRECTIF : `body{overflow-x:hidden}` (design system) fait du <body> un
   conteneur de défilement — le header `position:sticky` ne collait donc PAS,
   il disparaissait dès le premier scroll sur tout le site. `overflow:clip`
   coupe le débordement horizontal SANS créer de conteneur de défilement.
   Sous @supports pour ne rien changer sur les navigateurs anciens. */
@supports (overflow:clip){
  html{overflow-x:clip}
  body{overflow-x:clip;overflow-y:visible}
}

header.nav,header.kb-header,header.kb-header.kb-header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid rgba(23,50,59,.07);
  box-shadow:0 0 0 0 rgba(23,50,59,0);
  transition:box-shadow .28s ease,background .28s ease,border-color .28s ease;
}
/* L'ombre portée n'apparaît qu'au défilement. */
header.nav.is-scrolled,header.nav.scrolled,
header.kb-header.is-scrolled,header.kb-header.scrolled{
  background:rgba(255,255,255,.95);
  border-bottom-color:rgba(23,50,59,.04);
  box-shadow:0 16px 36px -26px rgba(13,76,92,.85),0 1px 0 0 rgba(23,50,59,.05);
}
/* …et le header se compacte légèrement. */
header.nav .nav-inner,header.nav .nav-in,header.kb-header .kb-header-inner{
  padding-top:var(--kbi-nav-y);padding-bottom:var(--kbi-nav-y);
  transition:padding .28s ease;
}
header.nav.is-scrolled,header.nav.scrolled,
header.kb-header.is-scrolled,header.kb-header.scrolled{--kbi-nav-y:7px}

/* — Mot-marque — */
header .brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-height:44px}
header.nav .brand .brand-logo,header.nav .brand>img{
  width:38px;height:38px;border-radius:11px;object-fit:contain;
  transition:transform .28s ease;
}
header.nav.is-scrolled .brand .brand-logo,header.nav.scrolled .brand .brand-logo,
header.nav.is-scrolled .brand>img,header.nav.scrolled .brand>img{transform:scale(.88)}
header .brand .kb-wm{font-size:1.4rem;line-height:1.1}
header .brand:focus-visible{outline:3px solid var(--kbi-accent);outline-offset:4px;border-radius:12px}

/* — Liens : soulignement animé qui se déroule depuis la gauche — */
header .nav-links{display:flex;align-items:center;gap:22px;margin-left:auto}
header .nav-links a{
  position:relative;text-decoration:none;font-weight:800;font-size:.95rem;
  color:var(--kbi-ink);opacity:.82;
  transition:opacity .16s ease,color .16s ease;
}
header .nav-links a:not(.cta):not(.nav-cta):not(.btn):not(.kb-btn)::after{
  content:"";position:absolute;left:0;right:0;bottom:-7px;height:3px;width:auto;
  border-radius:3px;
  background:linear-gradient(90deg,var(--kbi-accent),#FF8A00);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .24s cubic-bezier(.34,1.32,.5,1);
}
header .nav-links a:hover,header .nav-links a:focus-visible{opacity:1;color:var(--kbi-petrol)}
header .nav-links a:not(.cta):not(.nav-cta):not(.btn):not(.kb-btn):hover::after,
header .nav-links a:not(.cta):not(.nav-cta):not(.btn):not(.kb-btn):focus-visible::after{transform:scaleX(1)}
header .nav-links a:focus-visible{outline:3px solid var(--kbi-accent);outline-offset:5px;border-radius:8px}

/* — Pilule CTA : micro-rebond au survol — */
@keyframes kbi-bounce{
  0%{transform:translateY(0) scale(1)}
  38%{transform:translateY(-5px) scale(1.045)}
  64%{transform:translateY(0) scale(.988)}
  100%{transform:translateY(-2px) scale(1.02)}
}
header .nav-cta,header .nav-links a.cta,header .nav-links a.btn{
  min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  opacity:1;will-change:transform;
}
header .nav-cta:hover,header .nav-cta:focus-visible,
header .nav-links a.cta:hover,header .nav-links a.cta:focus-visible,
header .nav-links a.btn:hover,header .nav-links a.btn:focus-visible{
  animation:kbi-bounce .44s cubic-bezier(.34,1.56,.64,1) forwards;
}

/* — Burger : 44x44, se transforme en croix — */
header .burger{
  display:none;position:relative;width:44px;height:44px;flex:none;
  align-items:center;justify-content:center;gap:0;
  background:none;border:0;border-radius:13px;cursor:pointer;padding:0;
  transition:background .16s ease;
}
header .burger span{
  position:absolute;left:11px;width:22px;height:2.6px;border-radius:3px;
  background:var(--kbi-petrol);
  transition:transform .26s cubic-bezier(.4,1.3,.5,1),opacity .16s ease;
}
header .burger span:nth-child(1){transform:translateY(-7px)}
header .burger span:nth-child(3){transform:translateY(7px)}
header .burger[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg)}
header .burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.35)}
header .burger[aria-expanded="true"] span:nth-child(3){transform:rotate(-45deg)}
header .burger:hover{background:rgba(13,76,92,.07)}
header .burger:focus-visible{outline:3px solid var(--kbi-accent);outline-offset:2px}

/* — Bouton « retour » des pages légales / du jeu — */
header .back{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--kbi-title);font-weight:700;font-size:.92rem;
  color:var(--kbi-petrol);text-decoration:none;background:#fff;
  border:2px solid rgba(13,76,92,.16);border-radius:999px;padding:8px 20px;
  box-shadow:0 4px 14px rgba(23,50,59,.06);
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
}
header .back:hover{transform:translateY(-2px);border-color:var(--kbi-petrol);
  box-shadow:0 12px 26px -14px rgba(13,76,92,.6)}
header .back:focus-visible{outline:3px solid var(--kbi-accent);outline-offset:3px}

/* — En-tête « hero » des pages offre : on aligne le bloc de marque — */
header.hero .brand{display:flex;align-items:center;justify-content:center;gap:11px;margin-bottom:16px}
header.hero .brand img{width:46px;height:46px;border-radius:13px}
header.hero .brand .bname{
  font-family:var(--kbi-title);font-weight:800;font-size:1.45rem;letter-spacing:.4px;color:#fff;
}

/* ==========================================================================
   3. MENU MOBILE
   ========================================================================== */
@media (max-width:860px){
  header .burger{display:flex}

  header .nav-links{
    position:absolute;top:100%;left:0;right:0;z-index:5;
    display:none;flex-direction:column;align-items:stretch;gap:0;margin:0;
    background:#fff;padding:8px 16px 16px;
    border-radius:0 0 24px 24px;
    box-shadow:0 28px 46px -28px rgba(13,76,92,.6);
    border-top:1px solid rgba(23,50,59,.06);
  }
  header .nav-links.open{display:flex;animation:kbi-drop .22s ease both}
  @keyframes kbi-drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

  header .nav-links a{
    display:flex;align-items:center;min-height:52px;
    padding:0 8px;font-size:1.05rem;opacity:.92;
    border-bottom:1px solid rgba(23,50,59,.07);
  }
  header .nav-links a:last-child{border-bottom:0}
  header .nav-links a:not(.cta):not(.nav-cta):not(.btn):not(.kb-btn)::after{
    left:8px;right:auto;width:26px;bottom:11px;
  }
  header .nav-links a.cta,header .nav-links a.btn,header .nav-links a.nav-cta{
    justify-content:center;margin:14px 0 0;width:100%;
    border-bottom:0;min-height:52px;
  }
  /* la pilule posée dans la barre (hors panneau) reste à droite */
  header .nav-inner>.nav-cta,header .nav-in>.nav-cta{margin-left:auto;width:auto}
}
@media (max-width:420px){
  header .brand .kb-wm{font-size:1.18rem}
  header.nav .brand .brand-logo,header.nav .brand>img{width:32px;height:32px}
  header .nav-cta{padding:9px 14px;font-size:.86rem}
}

/* ==========================================================================
   4. FOOTER — signature 6 couleurs, hiérarchie, colonnes alignées
   ========================================================================== */
footer.footer,.kb-footer,footer:not([class]){position:relative}
footer.footer::before,.kb-footer::before,footer:not([class])::before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:var(--kbi-strip);pointer-events:none;
}

footer.footer{
  background:
    radial-gradient(1100px 380px at 12% 0%,rgba(255,210,63,.10),transparent 62%),
    radial-gradient(900px 340px at 88% 4%,rgba(255,64,129,.09),transparent 62%),
    var(--kbi-petrol);
  color:var(--kbi-onfoot);
  padding:62px 0 20px;
}
footer.footer a{color:var(--kbi-onfoot)}
footer.footer .foot-grid,.kb-footer .kb-footer-inner{
  display:grid;
  grid-template-columns:minmax(252px,1.05fr) 1.5fr .88fr;
  gap:38px 48px;align-items:start;
}
/* Colonne à liste longue : deux colonnes typographiques, le bloc reste carré */
footer.footer .foot-col--wide{columns:2 168px;column-gap:30px}
footer.footer .foot-col--wide h4{column-span:all}

/* — Bloc identité : le grand logo EST l'élément d'identité — */
footer.footer .foot-brand,.kb-footer .foot-brand{
  display:flex;flex-direction:column;align-items:flex-start;
}
footer.footer .kb-footlogo,.kb-footer .kb-footlogo{
  display:block;width:min(252px,86%);height:auto;
  background:#fff;border-radius:20px;padding:12px 16px;margin:0 0 16px;
  box-shadow:0 16px 34px -16px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.07);
  transition:transform .22s ease,box-shadow .22s ease;
}
/* Le grand logo devient le lien d'identité : la petite ligne « hibou +
   Kidibook » est absorbée dedans (son texte reste le nom accessible du lien). */
footer.footer .foot-identity{display:block;text-decoration:none;width:100%}
footer.footer .foot-identity:hover .kb-footlogo{
  transform:translateY(-3px);box-shadow:0 22px 40px -18px rgba(0,0,0,.66),0 0 0 1px rgba(255,255,255,.12);
}
footer.footer .foot-identity:focus-visible{outline:none}
footer.footer .foot-identity:focus-visible .kb-footlogo{
  outline:3px solid var(--kbi-gold);outline-offset:4px;
}
footer.footer .foot-brand p,.kb-footer .foot-brand p{
  margin:0 0 18px;max-width:300px;font-size:.95rem;line-height:1.65;
  color:var(--kbi-onfoot-soft);
}
footer.footer .foot-brand p b,.kb-footer .foot-brand p b{color:#fff}

/* — Réseaux : pastilles — */
footer.footer .foot-social,.kb-footer .foot-social{display:flex;flex-wrap:wrap;gap:9px}
footer.footer .foot-social a,.kb-footer .foot-social a{
  display:inline-flex;align-items:center;min-height:40px;
  padding:8px 15px;border-radius:999px;font-size:.86rem;font-weight:700;
  text-decoration:none;opacity:1;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  transition:transform .15s ease,background .15s ease,border-color .15s ease,color .15s ease;
}
footer.footer .foot-social a:hover,.kb-footer .foot-social a:hover{
  transform:translateY(-2px);background:rgba(255,255,255,.16);
  border-color:rgba(255,214,110,.7);color:var(--kbi-gold-hi);
}

/* — Titres de colonne : micro-titres dorés, même règle partout — */
footer.footer .foot-col h4,.kb-footer .kb-footer-col-titre{
  display:block;margin:0 0 14px;padding-bottom:9px;position:relative;
  font-family:var(--kbi-title);font-weight:800;font-size:.82rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--kbi-gold);
}
footer.footer .foot-col h4::after,.kb-footer .kb-footer-col-titre::after{
  content:"";position:absolute;left:0;bottom:0;width:26px;height:2px;border-radius:2px;
  background:currentColor;opacity:.55;
}
footer.footer .foot-col a,.kb-footer .kb-footer-links a{
  display:block;margin:0;padding:7px 0;font-size:.95rem;
  text-decoration:none;opacity:1;color:var(--kbi-onfoot-soft);
  transition:color .15s ease,transform .15s ease;
}
footer.footer .foot-col a:hover,.kb-footer .kb-footer-links a:hover{
  color:var(--kbi-gold-hi);transform:translateX(3px);text-decoration:none;
}
.kb-footer .kb-footer-links{gap:0}
.kb-footer .foot-links{margin:0;color:var(--kbi-onfoot-soft);font-size:.95rem;line-height:2}
.kb-footer .foot-links a{color:var(--kbi-onfoot-soft);text-decoration:none;transition:color .15s ease}
.kb-footer .foot-links a:hover{color:var(--kbi-gold-hi)}

/* — Séparateur fin + barre de bas de page sobre — */
footer.footer .foot-bottom,.kb-footer .kb-footer-bottom{
  margin-top:40px;padding-top:20px;border-top:0;
  background-image:linear-gradient(90deg,transparent,rgba(255,255,255,.2) 8%,
    rgba(255,255,255,.2) 92%,transparent);
  background-size:100% 1px;background-repeat:no-repeat;background-position:top left;
}
footer.footer .foot-bottom{
  display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;
  font-size:.84rem;letter-spacing:.02em;color:rgba(234,244,246,.80);opacity:1;
}
.kb-footer .kb-footer-bottom-inner{padding:0 22px;font-size:.84rem;letter-spacing:.02em}

/* Focus visible sur fond sombre */
footer a:focus-visible,.kb-footer a:focus-visible{
  outline:3px solid #FFD86B;outline-offset:3px;border-radius:8px;
}

/* ==========================================================================
   5. PIEDS SIMPLIFIÉS (offres, pages légales)
   ========================================================================== */
footer:not([class]){
  background:var(--kbi-petrol);color:var(--kbi-onfoot);
  padding-top:34px;
}
footer:not([class]) .f{
  font-family:var(--kbi-title);font-weight:800;letter-spacing:.4px;color:#fff;
}
footer:not([class]) a{
  color:var(--kbi-gold-hi);text-decoration:none;
  border-bottom:1px solid rgba(255,227,136,.35);
  transition:border-color .15s ease,color .15s ease;
}
footer:not([class]) a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.8)}

/* ==========================================================================
   6. RESPONSIVE FOOTER
   ========================================================================== */
@media (max-width:900px){
  footer.footer .foot-grid,.kb-footer .kb-footer-inner{grid-template-columns:1fr 1fr;gap:32px 36px}
  footer.footer .foot-brand,.kb-footer .foot-brand{grid-column:1 / -1}
}
@media (max-width:640px){
  footer.footer{padding:46px 0 18px}
  footer.footer .foot-grid,.kb-footer .kb-footer-inner{grid-template-columns:1fr;gap:30px}
  footer.footer .kb-footlogo,.kb-footer .kb-footlogo{width:min(228px,76%)}
  footer.footer .foot-col a,.kb-footer .kb-footer-links a{
    min-height:44px;display:flex;align-items:center;padding:4px 0;
  }
  footer.footer .foot-bottom,.kb-footer .kb-footer-bottom{margin-top:30px}
}

/* ==========================================================================
   7. MOUVEMENT RÉDUIT
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  header .nav-cta:hover,header .nav-cta:focus-visible,
  header .nav-links a.cta:hover,header .nav-links a.cta:focus-visible,
  header .nav-links a.btn:hover,header .nav-links a.btn:focus-visible{animation:none}
  header .nav-links.open{animation:none}
  header .nav-links a::after,header .burger span,
  header.nav .nav-inner,header.nav .nav-in,header.kb-header .kb-header-inner{transition:none}
  header .back:hover{transform:none}
  footer.footer .foot-col a:hover,footer.footer .foot-social a:hover,
  .kb-footer .kb-footer-links a:hover,.kb-footer .foot-social a:hover,
  footer.footer .foot-identity:hover .kb-footlogo{transform:none}
}
