:root{
  --maxw: 880px;
  --fg: #0e0f10; --muted:#6b7280; --bg:#f6f7fb; --card:#ffffff;
  --border: rgba(15,17,19,0.08); --shadow: 0 8px 24px rgba(15,17,19,0.08);
  --r: 18px; --accent1:#00c2ff; --accent2:#6d5efc; --accent3:#43e6a5;
}
@media (prefers-color-scheme: dark){
  :root{ --fg:#e7e9ee; --muted:#9aa3b2; --bg:#0b0f14; --card:#0e141b;
         --border: rgba(255,255,255,0.10); --shadow: 0 12px 28px rgba(0,0,0,0.35); }
}
*{box-sizing:border-box}
html{font-size:18px}
body{
  margin:0; color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,ui-sans-serif;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1200px 900px at 10% -10%, rgba(0,194,255,0.08), transparent 60%),
    radial-gradient(900px 700px at 110% 10%, rgba(109,94,252,0.08), transparent 60%),
    radial-gradient(800px 600px at 30% 120%, rgba(67,230,165,0.08), transparent 60%),
    linear-gradient(var(--bg), var(--bg));
  min-height:100vh; overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:-20vmax;
  background:
    radial-gradient(60px 30px at 20% 35%, rgba(0,194,255,.10), transparent 70%),
    radial-gradient(30px 60px at 24% 38%, rgba(109,94,252,.10), transparent 70%),
    radial-gradient(50px 25px at 28% 42%, rgba(67,230,165,.10), transparent 70%),
    radial-gradient(80px 40px at 70% 60%, rgba(0,194,255,.08), transparent 70%),
    radial-gradient(40px 80px at 74% 63%, rgba(109,94,252,.08), transparent 70%),
    radial-gradient(70px 35px at 78% 67%, rgba(67,230,165,.08), transparent 70%);
  filter: blur(30px) saturate(110%); opacity:.55; pointer-events:none;
  animation: drift 60s linear infinite;
}
@keyframes drift{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(2%,-1%,0) scale(1.02)}100%{transform:translate3d(0,0,0)}}

/* Conteneurs et mesure typographique */
.wrap{max-width:var(--maxw); margin:88px auto 72px; padding:0 20px}
.content{max-width:66ch; margin:0} /* ≈ 66 CPL */
.content > ul{margin:24px 0} /* listes d’actions */
.content > ul > li + li{margin-top:12px}

/* Titrage fluide via clamp() */
h1,h2{line-height:1.15; letter-spacing:-.02em}
h1{font-size:clamp(2rem, 4vw, 2.6rem); margin:0 0 1rem}
h2{font-size:clamp(1.2rem, 2.5vw, 1.5rem); color:var(--muted); margin:0 0 1.5rem}
p{margin:0 0 1rem}

/* Liens et cartes */
a{color:inherit; text-decoration:none; position:relative}
a::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:linear-gradient(90deg,var(--accent1),var(--accent2),var(--accent3));
  transform-origin:left; transform:scaleX(.2); opacity:.6; transition:transform .25s ease, opacity .25s ease}
a:hover::after{transform:scaleX(1); opacity:1}
ul{list-style:none; padding:0}
li > a{display:block; padding:16px 18px; background:var(--card);
  border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease}
li > a:hover{ transform: translateY(-1px); box-shadow: 0 12px 28px rgba(15,17,19,0.12) }

/* En-tête flottant */
.header-wrap{margin:0 auto; padding:12px 20px; max-width:var(--maxw); display:flex; align-items:center; gap:20px}
.site-header{position:sticky; top:0; z-index:10; backdrop-filter:saturate(140%) blur(8px);
  background: color-mix(in oklab, var(--bg) 85%, transparent); border-bottom:1px solid var(--border);}
.brand{font-weight:600; letter-spacing:.01em}
.nav{margin-left:auto; display:flex; gap:12px; flex-wrap:wrap}
.nav a{padding:8px 12px; border-radius:999px; border:1px solid var(--border)}
.nav a:hover{background:color-mix(in oklab, var(--card) 70%, transparent)}

/* Focus visible et skip-link (a11y) */
:focus-visible{outline:2px solid currentColor; outline-offset:3px;
  box-shadow:0 0 0 4px color-mix(in oklab, var(--card) 70%, transparent)}
.skip{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip:focus{left:16px; top:16px; width:auto; height:auto; padding:8px 12px;
  background:var(--card); border:1px solid var(--border); border-radius:10px}

/* Pied */
.site-footer{color:var(--muted); font-size:.9rem; margin-top:16px}

/* Réduction de mouvement */
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important} }

/* === full-gradient hover fill on buttons ================================ */
li > a{
  position:relative;
  overflow:hidden;                  /* masque le ::before animé           */
}
li > a::before{
  content:"";
  position:absolute; inset:0;
  border-radius:var(--r);
  background:linear-gradient(90deg,var(--accent1),var(--accent2),var(--accent3));
  transform-origin:left;            /* point de départ à gauche           */
  transform:scaleX(.15);            /* fine bande au repos                */
  transition:transform .35s ease;
  z-index:-1;                       /* passe sous le texte                */
}
li > a:hover::before{
  transform:scaleX(1);              /* remplit toute la largeur           */
}
/* on cache la fine barre existante quand le fond s'affiche               */
li > a:hover::after{opacity:0;}

/* 🔥 blue-flame logo ********************************************************/
header .brand{
  position:relative;
  font-weight:700!important;
  background:linear-gradient(120deg,#7dd3fc 0%,#38bdf8 25%,#1e40af 60%,#0b1020 90%);
  background-size:200% 200%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:flameShift 9s ease-in-out infinite alternate;
}
/* halo derrière le texte */
header .brand::after{
  content:"";
  position:absolute; inset:-6px;
  border-radius:32px;
  background:radial-gradient(circle at 50% 60%,rgba(56,189,248,.35)0%,rgba(56,189,248,.15)40%,transparent 75%);
  filter:blur(12px) saturate(1.3);
  pointer-events:none;
  animation:haloPulse 4.5s ease-in-out infinite;
  z-index:-1;
}

  50% {background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes haloPulse{
  0%,100%{transform:scale(.95);opacity:.6}
  50%    {transform:scale(1.06);opacity:1}
}
/* *********************************************** */

/* 🌌 hero flame ************************************************************/
.hero-flame{
  display:inline-block;
  position:relative;
  font-size:clamp(3rem,6vw,4.5rem);
  font-weight:800;
  background:linear-gradient(120deg,#60a5fa 0%,#2563eb 25%,#1e3a8a 60%,#0b1020 90%);
  background-size:250% 250%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:heroShift 14s ease-in-out infinite alternate,
           heroRise 4s ease-in-out infinite;
}
@keyframes heroShift{
  0%  {background-position:0% 50%}
  50% {background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes heroRise{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-4px)}
}
@keyframes heroPulse{
  0%,100%{transform:scale(.9);opacity:.65}
  50%    {transform:scale(1.1);opacity:1}
}
/* *********************************************************************** */

/* 🌿 spacing system — respire ! ********************************************/
:root{
  --space-s:12px;
  --space-m:24px;
  --space-l:48px;
}
main.wrap > * + *{margin-top:var(--space-l);}
h2{margin-bottom:var(--space-m);}
ul{margin-top:var(--space-m);}
li + li{margin-top:var(--space-m);}
footer{margin-top:var(--space-l);}

/* 📱 responsive ************************************************************/
@media (max-width:640px){
  .wrap{padding:0 14px;}

  /* nav hamburger **********************************************************/
  .hamburger{
    display:inline-block;
    font-size:2rem; cursor:pointer; user-select:none;
    margin-left:auto; line-height:1;
  }
  .menu{                       /* nav ul */
    display:flex; flex-direction:column;
    gap:12px; padding-top:var(--space-m);
    max-height:0; overflow:hidden;
    transition:max-height .3s ease;
  }
  #nav-toggle:checked + .hamburger + .menu{
    max-height:300px;          /* assez pour trois liens */
  }
  header .brand{font-size:1.4rem;}

  /* boutons / cartes *******************************************************/
  li>a{
    padding:18px 20px;
    font-size:1rem;
  }

  /* hero titre *************************************************************/
  .hero-flame{
    font-size:clamp(2rem,8vw,3rem);
  }

  /* espaces ajustés ********************************************************/
  :root{
    --space-s:10px;
    --space-m:18px;
    --space-l:36px;
  }
}
/* *********************************************************************** */