/* ============ Hélie — feuille de style commune ============ */
:root{
  --panel:rgba(24,32,70,.70);
  --line:rgba(150,165,215,.22);
  --text:#eae8df;
  --muted:#a9b0c9;
  --gold:#f2b134;
  --gold-soft:#ffd57a;
  --ok:#7fd6a0;
  --maxw:1020px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;color:var(--text);line-height:1.65;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:#0a0e22 linear-gradient(180deg,#070a1a,#0c1230 40%,#161e46 75%,#20285a);
  background-attachment:fixed;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.55;
  background-image:
    radial-gradient(1px 1px at 12% 18%,#fff,transparent 60%),
    radial-gradient(1px 1px at 27% 63%,#fff,transparent 60%),
    radial-gradient(1.6px 1.6px at 41% 31%,#ffe9b0,transparent 60%),
    radial-gradient(1px 1px at 56% 11%,#fff,transparent 60%),
    radial-gradient(1px 1px at 66% 77%,#fff,transparent 60%),
    radial-gradient(1.6px 1.6px at 79% 42%,#fff,transparent 60%),
    radial-gradient(1px 1px at 88% 20%,#ffe9b0,transparent 60%),
    radial-gradient(1px 1px at 95% 66%,#fff,transparent 60%);
}
h1,h2,h3{font-family:"Fraunces",Georgia,serif;font-weight:520;line-height:1.15;letter-spacing:.2px;margin:0 0 .6rem}
h1{font-size:clamp(2rem,6vw,3.1rem)}
h2{font-size:clamp(1.35rem,3.5vw,1.7rem);margin-top:2.4rem;position:relative;padding-bottom:.45rem}
h2::after{content:"";position:absolute;left:0;bottom:0;width:46px;height:2px;background:var(--gold);border-radius:2px}
h3{font-size:1.12rem}
p{margin:.4rem 0 1rem}
a{color:var(--gold-soft)}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
img{max-width:100%}
main{max-width:var(--maxw);margin:0 auto;padding:1rem 1.1rem 2.5rem;position:relative}

/* ---------- en-tête ---------- */
.site-header{position:sticky;top:0;z-index:20;background:rgba(8,11,26,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header-inner{max-width:var(--maxw);margin:0 auto;padding:.55rem 1.1rem;display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .8rem}
.brand{order:1;display:inline-flex;align-items:center;gap:.45rem;font-family:"Fraunces",Georgia,serif;font-size:1.3rem;color:var(--text);text-decoration:none}
.brand-sun{flex:none}
.lang-switch{order:2;margin-left:auto;display:flex;gap:.3rem}
.lang-switch a{font-size:.78rem;font-weight:600;letter-spacing:.4px;padding:.18rem .5rem;border:1px solid var(--line);border-radius:7px;color:var(--muted);text-decoration:none}
.lang-switch a.current{background:var(--gold);border-color:var(--gold);color:#191507}
nav.main{order:3;flex-basis:100%;display:flex;flex-wrap:wrap;gap:.05rem .1rem;padding:.15rem 0 .2rem;font-size:.87rem}
nav.main a{padding:.32rem .55rem;border-radius:8px;color:var(--muted);text-decoration:none}
nav.main a:hover{color:var(--text)}
nav.main a.active{color:var(--gold-soft);background:rgba(255,255,255,.06)}
@media(min-width:820px){
  nav.main{order:2;flex-basis:auto;margin-left:auto}
  .lang-switch{order:3;margin-left:1rem}
}

/* ---------- héros / têtes de page ---------- */
.hero{text-align:center;padding:3rem 0 1rem;position:relative}
.hero::before{content:"";position:absolute;top:-60px;left:50%;transform:translateX(-50%);width:min(580px,92%);height:280px;border-radius:50%;background:radial-gradient(closest-side,rgba(242,177,52,.30),rgba(242,177,52,.06) 55%,transparent 78%);filter:blur(4px);pointer-events:none}
.hero>*{position:relative}
.kicker{font-size:.78rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0 0 .7rem}
.lede{color:var(--muted);font-size:1.05rem;max-width:640px;margin:.6rem auto 1.3rem}
.lede.left{margin-left:0;text-align:left;max-width:720px}
.page-head{padding:2rem 0 .2rem}
.hero-cta{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:1.2rem}

/* ---------- boutons ---------- */
.btn{display:inline-block;background:var(--gold);color:#191507;font-weight:600;padding:.68rem 1.25rem;border-radius:999px;text-decoration:none;border:1px solid var(--gold)}
.btn:hover{filter:brightness(1.07)}
.btn.secondary{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn.soon{background:transparent;color:var(--muted);border:1px dashed var(--line);pointer-events:none}

/* ---------- cartes ---------- */
.cards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));margin-top:1.1rem}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1.05rem 1.1rem;display:flex;flex-direction:column;gap:.15rem}
.card p{color:var(--muted);font-size:.94rem;margin:.15rem 0 .7rem;flex:1}
.card h3 a{color:var(--text);text-decoration:none}
.card h3 a:hover{color:var(--gold-soft)}
.card .more{font-size:.9rem;font-weight:600;text-decoration:none}
.soon{align-self:flex-start;font-size:.75rem;font-weight:600;letter-spacing:.4px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:.2rem .6rem}

/* ---------- statuts ---------- */
.status{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.4px;border-radius:999px;padding:.24rem .7rem;margin:.2rem 0 .9rem}
.status.available{color:var(--ok);background:rgba(127,214,160,.12);border:1px solid rgba(127,214,160,.45)}
.status.soon{color:var(--muted);background:rgba(169,176,201,.10);border:1px solid var(--line)}
.card .status{align-self:flex-start;margin:.1rem 0 .55rem}

/* ---------- listes de fonctionnalités ---------- */
.features{list-style:none;margin:.4rem 0 1.4rem;padding:0;display:grid;gap:.5rem}
.features li{position:relative;padding-left:1.45rem}
.features li::before{content:"✦";position:absolute;left:0;top:0;color:var(--gold)}

/* ---------- encarts ---------- */
.callout{background:linear-gradient(135deg,rgba(242,177,52,.12),rgba(242,177,52,.03));border:1px solid rgba(242,177,52,.38);border-radius:14px;padding:1rem 1.2rem;margin:2.2rem 0 0}
.callout p{margin:.2rem 0}
.notice{border-left:3px solid var(--gold);background:rgba(255,255,255,.045);border-radius:0 10px 10px 0;padding:.75rem 1rem;color:var(--muted);font-size:.93rem;margin:1.4rem 0}

/* ---------- pages application ---------- */
.app-head{padding:2.2rem 0 .4rem}
.tagline{font-size:1.15rem;color:var(--gold-soft);font-family:"Fraunces",Georgia,serif;margin:.1rem 0 .8rem}
.cta{margin:1.4rem 0 .4rem}
.cta .note{display:block;color:var(--muted);font-size:.9rem;margin-top:.55rem}
.backlink{display:inline-block;margin-top:1.6rem;color:var(--muted);text-decoration:none;font-size:.92rem}
.backlink:hover{color:var(--text)}

/* ---------- glossaire ---------- */
.glossary{margin-top:1.4rem}
.glossary .entry{break-inside:avoid;margin-bottom:1.15rem}
.glossary dt{font-family:"Fraunces",Georgia,serif;font-size:1.08rem;color:var(--gold-soft)}
.glossary dd{margin:.15rem 0 0;color:var(--muted);font-size:.96rem}
@media(min-width:820px){.glossary{columns:2;column-gap:3rem}}

/* ---------- pied de page ---------- */
footer{border-top:1px solid var(--line);margin-top:3rem;padding:1.5rem 1.1rem 2.3rem;text-align:center;color:var(--muted);font-size:.85rem}
footer .apps-line{margin-top:.35rem}
footer a{color:var(--muted)}
footer a:hover{color:var(--gold-soft)}

/* ---------- articles ---------- */
.figure{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.1rem .9rem;margin:1.9rem 0}
.figure svg{width:100%;height:auto;display:block}
.figure figcaption{color:var(--muted);font-size:.85rem;margin-top:.7rem;text-align:center}
.keyfigs{background:linear-gradient(135deg,rgba(242,177,52,.13),rgba(242,177,52,.03));border:1px solid rgba(242,177,52,.38);border-radius:14px;padding:1rem 1.2rem;margin:2rem 0}
.kf-title{margin:0 0 .55rem;font-family:"Fraunces",Georgia,serif;color:var(--gold-soft);font-size:1.05rem}
.keyfigs ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.keyfigs li{position:relative;padding-left:1.4rem;font-size:.95rem}
.keyfigs li::before{content:"✦";position:absolute;left:0;top:0;color:var(--gold)}
.sources{color:var(--muted);font-size:.83rem;border-top:1px solid var(--line);margin-top:2.4rem;padding-top:1rem}
.art-nav{display:flex;justify-content:space-between;align-items:center;gap:.8rem;flex-wrap:wrap;margin-top:1.6rem}
.art-nav a{text-decoration:none;color:var(--muted);font-size:.92rem;border:1px solid var(--line);border-radius:999px;padding:.45rem .95rem}
.art-nav a:hover{color:var(--text);border-color:var(--gold)}
.art-nav .hubl{color:var(--gold-soft)}

/* ---------- compléments 19/08/2026 : fiches apps, Hélie parle ---------- */
.cta .btn{margin:.25rem .45rem .25rem 0}
.cta .btn.secondary{font-weight:600}
.helie-line{color:var(--muted);font-size:.92rem;margin:1rem 0 0}
.card .helie{font-size:.86rem;color:var(--muted);margin:-.35rem 0 .6rem}
.card .helie a{text-decoration:none;font-weight:600}
.helie-box{background:linear-gradient(135deg,rgba(242,177,52,.14),rgba(242,177,52,.03));border:1px solid rgba(242,177,52,.38);border-radius:14px;padding:1rem 1.2rem;margin:1.6rem 0 .4rem}
.helie-box h2{margin-top:0;padding-bottom:0;font-size:1.15rem}
.helie-box h2::after{display:none}
.helie-box p{margin:.3rem 0 .7rem;color:var(--muted);font-size:.95rem}
.helie-box .btn{margin:.2rem .45rem .2rem 0}
.helie-box .sub{display:block;font-size:.85rem;color:var(--muted);margin-top:.5rem}
.pathways{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));margin:1.2rem 0 1.6rem}
.pathways div{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.8rem .9rem;font-size:.93rem}
.pathways strong{display:block;color:var(--gold-soft);font-family:"Fraunces",Georgia,serif;font-size:1.02rem;margin-bottom:.2rem}

/* ---------- v2 26/08/2026 : mascotte, sous-rubriques, accueil ---------- */
.mascot{width:clamp(120px,26vw,170px);height:auto;display:block;margin:0 auto 1.1rem;
  filter:drop-shadow(0 12px 34px rgba(242,177,52,.38));animation:helie-float 5.5s ease-in-out infinite}
@keyframes helie-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media (prefers-reduced-motion:reduce){.mascot{animation:none}}
.helie-says{display:flex;align-items:flex-start;gap:.8rem;margin:1.1rem 0 0}
.helie-says svg{flex:0 0 auto;width:46px;height:46px;filter:drop-shadow(0 4px 12px rgba(242,177,52,.35))}
.helie-says p{margin:0;background:var(--panel);border:1px solid rgba(242,177,52,.4);border-radius:4px 14px 14px 14px;
  padding:.6rem .9rem;color:var(--muted);font-size:.95rem;line-height:1.55}
.helie-says p strong{color:var(--gold-soft)}
.srub{margin-top:2.4rem}
.srub>h2{font-size:1.28rem}
.srub .cards{margin-top:.9rem}
.subrubs{display:flex;flex-wrap:wrap;gap:.35rem .5rem;margin:.55rem 0 .75rem;padding:0;list-style:none}
.subrubs a{font-size:.8rem;color:var(--gold-soft);text-decoration:none;border:1px solid rgba(242,177,52,.35);
  border-radius:999px;padding:.22rem .6rem;white-space:nowrap}
.subrubs a:hover{border-color:#f2b134}
.rub-emoji{font-size:1.05rem;margin-right:.35rem}
.figure{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1rem 1rem .7rem;margin:1.6rem 0}
.figure svg{display:block;width:100%;height:auto}
.figure figcaption{color:var(--muted);font-size:.86rem;line-height:1.55;margin-top:.6rem;text-align:left}
.disclaimer{color:var(--muted);font-size:.85rem;border-left:3px solid rgba(242,177,52,.5);padding-left:.8rem;margin:1rem 0}

/* ---------- v3 20/09/2026 : réseaux sociaux, dix applications ---------- */
footer .social-line{margin:.35rem 0 .5rem}
footer .social-line a{margin:0 .15rem;font-weight:600}