/* AI First — design system, feuille « core ».
   Fichier assemblé : ne pas l'éditer. La source est design-system/src/,
   couche par couche (01-tokens.css, 02-base.css, 03-primitives.css, 04-prose.css).
   Assemblage : node design-system/build.mjs */

/* ==========================================================================
   AI FIRST — 01 · Jetons
   La source unique des couleurs, des fontes et des rayons. Tout ce qui change
   d'un thème à l'autre est ici, et seulement ici : aucune couche plus bas n'a
   le droit d'écrire une couleur en dur.

   Les valeurs de marque sont relevées au pixel sur la bannière du groupe Meetup
   (website/elements_graphique/banniere-meetup-1600x900.jpg). Refaire la bannière
   un jour : changer les deux en même temps, sinon Meetup et les pages divergent.

   Trois blocs : le commun et le réglage clair dans :root, puis le réglage nuit
   répété pour la préférence système et pour le choix explicite. La répétition
   est voulue — CSS ne sait pas faire autrement sans reporter le choix sur une
   classe posée par JavaScript, et la page clignoterait au chargement.
   ========================================================================== */

:root{
  /* --- indépendant du thème ------------------------------------------- */
  --white:#ffffff;
  /* Les illustrations sont des objets posés sur la page, pas des surfaces de
     la page : leur papier et leur trait ne bougent pas d'un thème à l'autre. */
  --ill-paper:#ffffff;
  --ill-ink:#0f1115;

  /* Marque */
  --night:#04020f;
  --brand-violet:#9a55ff;
  --brand-azure:#3b95ff;
  --brand-soft:#a6beff;
  --grad:linear-gradient(100deg,#9a55ff,#6f74ff 46%,#3b95ff);
  /* Variante assombrie, pour les aplats et les textes posés sur du clair. */
  --grad-deep:linear-gradient(100deg,#7b3fe0,#5340ee 46%,#2b6fd0);
  --night-glow:radial-gradient(70% 130% at 10% 55%,rgba(124,77,255,.22),transparent 62%);
  --sheen:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0) 58%);

  /* Les quatre lumières. Un bloc teinté ne reçoit pas un fond coloré mais un
     halo posé dans un coin : c'est de là que vient la couleur, pas des aplats.
     --glow-l dépend de --halo, donc du thème ; les trois autres sont absolus,
     assez discrets pour tenir sur les deux réglages. */
  --glow-tl:radial-gradient(85% 115% at 12% 0%,rgba(124,77,255,.2),transparent 58%);
  --glow-tr:radial-gradient(80% 120% at 88% 12%,rgba(59,149,255,.19),transparent 60%);
  --glow-b:radial-gradient(95% 110% at 55% 100%,rgba(154,85,255,.17),transparent 62%);
  --glow-l:radial-gradient(80% 130% at 12% 50%,var(--halo),transparent 62%);

  /* Fontes : Inter pour le texte, JetBrains Mono pour tout ce qui doit avoir
     l'air technique (surtitres, étiquettes, tableaux de règles, commandes). */
  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* L'ombre d'un élément qui se soulève au survol : le violet de la marque,
     jamais du noir. Deux portées, le bouton et la carte. */
  --lift:0 10px 24px -14px rgba(154,85,255,.55);
  --lift-card:0 18px 32px -20px rgba(154,85,255,.55);

  /* Rayons et tempo */
  --r-lg:28px;
  --r:18px;
  --r-sm:14px;
  --ease:cubic-bezier(.16,1,.3,1);

  /* --- réglage clair, valeur par défaut -------------------------------- */
  color-scheme:light;
  --theme-color:var(--page);       /* barre du navigateur, lue par js/theme.js */
  --page:#eef0f4;      /* derrière la carte de page */
  --surface:#ffffff;   /* la carte de page elle-même */
  --ink:#0f1115;
  --ink-rev:#ffffff;   /* l'inverse de --ink, là où --ink sert de fond */
  --ink-hover:#000000;
  --grey:#63637a;
  --line:rgba(15,17,21,.1);        /* filets et séparateurs */
  --rule:var(--ink);               /* filets épais de structure (documents) */
  --edge:rgba(15,17,21,.45);       /* contours de contrôle : 3:1, exigé par WCAG 1.4.11 */
  --edge-hover:rgba(15,17,21,.62);
  --soft:rgba(15,17,21,.05);       /* aplats discrets : flèches, champs, survols */
  --soft-2:rgba(15,17,21,.08);
  --menu-on:#ffffff;
  --dim:rgba(15,17,21,.7);         /* texte secondaire posé sur une surface */
  --ph:#e3e0ee;                    /* emplacement photo vide */
  --disc:rgba(255,255,255,.62);    /* disque derrière les illustrations */
  --code-bg:#15131f;
  --code-ink:#f3f1f9;
  --todo-ink:#8a4415;
  --halo:rgba(124,77,255,.14);
  /* --accent : la marque posée sur du texte (surtitres, puces, filets actifs).
     --link : les liens, les coches et les contours de focus. Les deux anciens
     noms restent valides, le site les emploie encore. */
  --accent:#6d4aff;
  --link:#4b45e8;
  --violet:var(--accent);
  --blue:var(--link);
  --grad-word:var(--grad-deep);    /* le mot-symbole, lisible sur son fond */
  --word-sheen:linear-gradient(#0000,#0000);
  /* Les cinq surfaces, toutes d'une même teinte à peine décalée. */
  --lime:#ece6fb;   /* violet clair (dominante) */
  --lilac:#efeafc;
  --sky:#e5eefc;
  --mint:#e4effb;
  --peach:#f0eafa;
}

/* --- réglage nuit ------------------------------------------------------ */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --page:#05030d;
    --surface:#0b0818;
    --ink:#f3f1f9;
    --ink-rev:#0b0716;
    --ink-hover:#ffffff;
    --grey:#9b93b4;
    --line:rgba(255,255,255,.1);
    --rule:rgba(255,255,255,.22);
    --edge:rgba(255,255,255,.36);
    --edge-hover:rgba(255,255,255,.55);
    --soft:rgba(255,255,255,.07);
    --soft-2:rgba(255,255,255,.12);
    --menu-on:rgba(255,255,255,.1);
    --dim:rgba(243,241,249,.66);
    --ph:#141029;
    --disc:rgba(255,255,255,.1);
    --code-bg:#05030d;
    --code-ink:#f3f1f9;
    --todo-ink:#ffc9a6;
    --halo:rgba(124,77,255,.16);
    --accent:#9a7cff;
    --link:#6fb0ff;
    --grad-word:var(--grad);
    --word-sheen:var(--sheen);
    --lime:#171233;
    --lilac:#181236;
    --sky:#141d38;
    --mint:#111e36;
    --peach:#1a1433;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --page:#05030d;
  --surface:#0b0818;
  --ink:#f3f1f9;
  --ink-rev:#0b0716;
  --ink-hover:#ffffff;
  --grey:#9b93b4;
  --line:rgba(255,255,255,.1);
  --rule:rgba(255,255,255,.22);
  --edge:rgba(255,255,255,.36);
  --edge-hover:rgba(255,255,255,.55);
  --soft:rgba(255,255,255,.07);
  --soft-2:rgba(255,255,255,.12);
  --menu-on:rgba(255,255,255,.1);
  --dim:rgba(243,241,249,.66);
  --ph:#141029;
  --disc:rgba(255,255,255,.1);
  --code-bg:#05030d;
  --code-ink:#f3f1f9;
  --todo-ink:#ffc9a6;
  --halo:rgba(124,77,255,.16);
  --accent:#9a7cff;
  --link:#6fb0ff;
  --grad-word:var(--grad);
  --word-sheen:var(--sheen);
  --lime:#171233;
  --lilac:#181236;
  --sky:#141d38;
  --mint:#111e36;
  --peach:#1a1433;
}

/* ==========================================================================
   AI FIRST — 02 · Socle
   Remise à zéro, échelle typographique, et les deux services rendus au clavier :
   le lien d'évitement et le libellé réservé aux lecteurs d'écran.
   ========================================================================== */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--font-sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;letter-spacing:-.025em;line-height:1.12;text-wrap:balance}
h1{font-weight:700;font-size:clamp(2.3rem,5.5vw,3.9rem)}
h2{font-weight:700;font-size:clamp(1.7rem,3.6vw,2.5rem)}
h3{font-weight:600;font-size:1.15rem;letter-spacing:-.01em}
p{margin:0}
a{color:inherit}
svg{display:block}

/* Le contour de focus est le même partout : trois pixels de --link, décollés.
   Les couches suivantes ne le redéfinissent que pour rapprocher l'offset. */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--link);outline-offset:3px}

/* lien d'évitement : visible seulement au clavier */
.skip{position:absolute;left:-999px;top:0;z-index:20;background:var(--ink);color:var(--ink-rev);padding:.7rem 1.1rem;border-radius:0 0 14px 0;font-weight:600;text-decoration:none}
.skip:focus{left:0}

/* Libellé réservé aux lecteurs d'écran : l'icône seule ne dit rien. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ==========================================================================
   AI FIRST — 03 · Primitives
   Les briques qu'on repose telles quelles d'une page à l'autre : le bloc de
   marque, les boutons, les pastilles, les surfaces teintées, les champs.
   Rien ici ne suppose une page en particulier.
   ========================================================================== */

/* ---------- marque -------------------------------------------------------
   Le bloc de la bannière Meetup, rejoué en HTML/CSS : net à toute taille.
   Tout est proportionnel à --bm, la taille du mot « AI FIRST » : changer --bm
   suffit à le passer d'une tuile de bento à un bandeau pleine largeur.

   <div class="brandmark">
     <span class="word"><i>AI</i><span>First</span></span>
     <span class="rule"></span>
     <p class="base">Réunir les builders qui créent avec <b>l'IA</b></p>
   </div>

   .brandmark        le bloc complet, sur son fond nuit
   .brandmark.bare   le lockup seul, posé sur un bloc déjà sombre
   .word             le mot-symbole seul, sur n'importe quel fond
   ------------------------------------------------------------------------ */
.brandmark{--bm:3rem;padding:.4rem .8rem;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;background-color:var(--night);background-image:var(--night-glow);overflow:hidden}
.word{display:flex;align-items:baseline;gap:.3em;text-transform:uppercase;font-size:var(--bm);font-weight:800;line-height:.9;letter-spacing:.015em;white-space:nowrap}
/* « AI » porte le dégradé ; le reflet vertical reproduit l'éclairage de la bannière. */
.word i{font-style:normal;background-image:var(--word-sheen),var(--grad-word);-webkit-background-clip:text;background-clip:text;color:transparent}
.brandmark .rule{font-size:var(--bm);width:.545em;height:max(2px,.018em);margin-top:.1em;border-radius:2px;background:linear-gradient(90deg,var(--brand-violet),var(--brand-azure))}
.brandmark .rule + .base{margin-top:calc(var(--bm) * .15)}
/* La bannière d'origine fait 1600 px de large : sa baseline vaut 13 % du mot-symbole.
   En tuile, ce ratio tomberait sous 8 px, d'où le plancher de lisibilité. */
.brandmark .base{font-size:max(.7rem,calc(var(--bm) * .13));font-weight:600;text-transform:uppercase;letter-spacing:.1em;line-height:1.35;max-width:32em;text-wrap:balance}
.brandmark .base b{font-weight:inherit;color:var(--brand-soft)}
.brandmark.bare{background:none;display:inline-flex}
/* Sur un fond nuit permanent, le mot-symbole prend sa variante claire quel que
   soit le thème : sans ça, le « AI » virerait au violet sombre en réglage clair. */
.night .word i,.brandmark:not(.bare) .word i{background-image:var(--sheen),var(--grad)}
@media(max-width:560px){.brandmark .base{font-size:.62rem;letter-spacing:.06em}}

/* ---------- boutons ------------------------------------------------------
   .btn-ink    l'action principale, pleine
   .btn-blue   la même en dégradé de marque
   .btn-line   l'action secondaire, en contour
   .btn-invert claire, réservée aux blocs nuit
   ------------------------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.2rem;border-radius:999px;font-weight:600;font-size:.95rem;text-decoration:none;border:1.5px solid transparent;line-height:1.2;white-space:nowrap;transition:transform .18s var(--ease),background .18s,border-color .18s,box-shadow .18s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn svg{width:15px;height:15px;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translate(2px,-2px)}
.btn-ink{background:var(--ink);color:var(--ink-rev)}
.btn-ink:hover{background:var(--ink-hover);box-shadow:var(--lift)}
.btn-blue{background:var(--grad-deep);color:#fff}
.btn-line{border-color:var(--edge);background:transparent;color:var(--ink)}
.btn-line:hover{border-color:var(--ink)}
/* Posé sur un bloc nuit, qui ne change pas avec le thème : valeurs absolues. */
.btn-invert{background:#fff;color:#0b0716}
.btn-invert:hover{background:#fff}
.night .btn-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.22)}
.night .btn-line:hover{border-color:#fff}

/* ---------- pastilles, chapeaux, flèches -------------------------------- */
.pill{display:inline-block;padding:.2rem .65rem;border:1.5px solid var(--ink);border-radius:999px;font-size:.78rem;font-weight:600;line-height:1.5;text-decoration:none}
.pill.soft{border-color:transparent;background:var(--soft-2)}
.pill.inv{background:var(--ink);color:var(--ink-rev)}
.lead{color:var(--grey);font-size:1.05rem;max-width:56ch}
.arrow{width:38px;height:38px;border-radius:50%;background:var(--soft);display:grid;place-items:center;flex:none;border:1px solid var(--line)}
.arrow svg{width:16px;height:16px;transition:transform .25s var(--ease)}
a:hover .arrow svg{transform:translate(2px,-2px)}

/* Liste cochée : la coche est un masque, elle prend la couleur du lien. */
.checks{list-style:none;padding:0;margin:.3rem 0 0;display:grid;gap:.45rem}
.checks li{display:flex;gap:.6rem;align-items:flex-start;font-size:.95rem}
.checks li::before{content:"";flex:none;width:18px;height:18px;margin-top:.2rem;background:var(--link);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3 3 7-7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3 3 7-7'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---------- surfaces et lumières ----------------------------------------
   Les cinq teintes ont gardé leurs noms de l'époque pastel. Elles ne sont
   presque plus qu'une même teinte décalée : la couleur vient du halo.
   ------------------------------------------------------------------------ */
.lime{background:var(--lime)}.sky{background:var(--sky)}.lilac{background:var(--lilac)}.peach{background:var(--peach)}.mint{background:var(--mint)}
.glow{background-image:var(--glow-tl)}
.glow-tr{background-image:var(--glow-tr)}
.glow-b{background-image:var(--glow-b)}
.glow-l{background-image:var(--glow-l)}
/* La carte : une surface, un filet intérieur, un grand rayon. Les cartes du
   site (édition, portrait, pilier) en descendent toutes. */
.card{border-radius:var(--r-lg);padding:1.5rem;box-shadow:inset 0 0 0 1px var(--line)}
/* Le bloc nuit reste nuit dans les deux thèmes. Les composants posés dedans
   basculent avec lui : le mot-symbole reprend le dégradé clair, le bouton en
   contour passe au blanc (deux règles .night, plus haut). */
.night{background-color:var(--night);background-image:var(--night-glow);color:#fff;box-shadow:inset 0 0 0 1px rgba(168,107,255,.22)}
.night p{color:#a29ab8}

/* ---------- barre de navigation -----------------------------------------
   Le logo et le groupe de liens en pilule. Le site les pose dans sa barre,
   un document dans la sienne ; les liens marchent en <a> comme en <button>.
   ------------------------------------------------------------------------ */
.logo{--bm:1.05rem;display:flex;align-items:center;text-decoration:none;color:var(--ink);background:none;border:0;padding:0;cursor:pointer;transition:opacity .18s}
.logo:hover{opacity:.75}
.menu{display:flex;gap:.25rem;background:var(--page);border-radius:999px;padding:.3rem}
.menu a,.menu button{font:inherit;text-decoration:none;font-size:.9rem;font-weight:500;padding:.45rem .9rem;border-radius:999px;color:var(--ink);background:none;border:0;cursor:pointer;transition:background .15s}
.menu a:hover,.menu button:hover{background:var(--soft)}
.menu a.on,.menu button.on{background:var(--menu-on)}

/* ---------- sélecteur de thème ------------------------------------------
   Deux états visibles côte à côte plutôt qu'une bascule dont l'icône se lit
   dans les deux sens. Le script qui l'anime est dans design-system/js/theme.js.
   ------------------------------------------------------------------------ */
.theme{display:flex;gap:.15rem;background:var(--soft);border-radius:999px;padding:.22rem;flex:none}
.theme button{width:30px;height:30px;border:0;border-radius:999px;background:none;color:var(--grey);cursor:pointer;display:grid;place-items:center;padding:0;transition:background .18s,color .18s}
.theme button svg{width:16px;height:16px}
.theme button:hover{color:var(--ink)}
.theme button[aria-pressed="true"]{background:var(--menu-on);color:var(--ink)}
.theme button:focus-visible{outline:3px solid var(--link);outline-offset:2px}

/* ---------- formulaires -------------------------------------------------- */
.form{max-width:40rem;display:grid;gap:1rem}
.form .fields{display:grid;gap:1.1rem}
.field{display:grid;gap:.4rem}
.field label{font-weight:600;font-size:.92rem}
.field label span{color:var(--grey);font-weight:400;margin-left:.3rem}
.field input,.field select,.field textarea{font:inherit;color:inherit;background:var(--soft);border:1.5px solid var(--edge);border-radius:var(--r-sm);padding:.75rem .95rem;width:100%;transition:border-color .15s}
.field textarea{resize:vertical;min-height:9rem}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--edge-hover)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink);outline:none}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid var(--link);outline-offset:2px}
.form .btn{justify-self:start}
.form .privacy{color:var(--grey);font-size:.85rem;max-width:52ch}
/* États du SDK Bailey : le formulaire se met en attente, puis s'efface. */
.form[data-bailey-state="sending"] .btn{opacity:.6;pointer-events:none}
.form[data-bailey-state="sent"] .fields{display:none}
.form-msg{border-radius:var(--r);padding:1.1rem 1.3rem;font-weight:500;margin:0}
/* Réussite et échec : deux teintes qui tiennent sur les deux réglages. */
.form-msg.ok{background:rgba(52,199,123,.15);box-shadow:inset 0 0 0 1px rgba(52,199,123,.38)}
.form-msg.ko{background:rgba(255,120,90,.15);box-shadow:inset 0 0 0 1px rgba(255,120,90,.4)}
.form-msg a{color:inherit}

@media(prefers-reduced-motion:reduce){
  .btn,.btn svg,.arrow svg,.theme button,.logo,.menu a,.menu button{transition:none}
}

/* ==========================================================================
   AI FIRST — 04 · Prose
   Le rendu d'un texte long : comptes rendus, portraits, notes. Une seule
   classe, .article, posée sur le conteneur — tout ce qu'il contient suit.
   ========================================================================== */

.article{max-width:68ch;font-size:1.05rem}
.article > :first-child{margin-top:0}
.article h2{font-size:clamp(1.4rem,2.6vw,1.8rem);margin:2.4rem 0 .8rem}
.article h3{font-size:1.15rem;margin:1.6rem 0 .5rem}
.article h4{font-size:1rem;margin:1.2rem 0 .4rem}
.article p{margin:0 0 1rem}
.article ul,.article ol{padding-left:1.3rem;margin:0 0 1rem}
.article li{margin:.3rem 0}
.article blockquote{margin:1.5rem 0;padding:1.2rem 1.4rem;background:var(--page);box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--r);font-weight:500}
.article blockquote p:last-child{margin:0}
.article a{color:var(--link)}
.article hr{border:0;border-top:1px solid var(--line);margin:2rem 0}
.article img{max-width:100%;height:auto;border-radius:var(--r)}
.article code{font-family:var(--font-mono);font-size:.9em;background:var(--page);box-shadow:inset 0 0 0 1px var(--line);padding:.1em .35em;border-radius:6px}
.article pre{background:var(--code-bg);color:var(--code-ink);box-shadow:inset 0 0 0 1px var(--line);padding:1rem 1.2rem;border-radius:var(--r);overflow-x:auto;font-size:.9rem;line-height:1.5}
.article pre code{background:none;padding:0;color:inherit}

/* Un [à compléter] laissé dans un texte ressort surligné, pour ne pas l'oublier. */
.todo{background:rgba(255,160,90,.16);box-shadow:inset 0 0 0 1px rgba(255,160,90,.34);padding:.05em .3em;border-radius:.25em;color:var(--todo-ink)}
/* Ce qui n'a pas encore été écrit : une boîte en pointillés, jamais un vide. */
.empty{border:1px dashed var(--line);border-radius:var(--r);padding:1.5rem;color:var(--grey)}

/* ==========================================================================
   Site AI First — couche de page.

   Les jetons, les primitives (marque, boutons, pastilles, champs) et le rendu
   des textes longs ne sont plus ici : ils vivent dans le design system,
   ../design-system/src/, et build.mjs les pose devant ce fichier au moment de
   produire dist/styles.css. Ce qui reste est la mise en page du site, et elle
   seule : la barre de navigation, le hero, les cartes, la frise, le pied.

   Règle : aucune couleur en dur. Si une règle a besoin d'un gris, d'un aplat
   ou d'une lumière, elle le prend dans les jetons (--grey, --soft, --glow-l…).
   ========================================================================== */

/* overflow:clip plutôt que hidden : les deux découpent les angles arrondis,
   mais hidden fait de .page un conteneur de défilement, ce qui neutralise le
   position:sticky de la barre. La déclaration hidden reste devant en secours :
   un navigateur qui ignore clip la garde, et la barre défile avec la page. */
.page{max-width:76rem;margin:1.25rem auto;background:var(--surface);border-radius:var(--r-lg);overflow:hidden;overflow:clip}
@media(max-width:700px){.page{margin:.6rem;border-radius:20px}}

/* nav */
/* La barre suit le défilement. Elle reprend le fond de .page, sinon le contenu
   défilerait au travers, et passe sous .skip (z-index 20) pour que le lien
   d'évitement garde la main au clavier. */
.nav{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:1.25rem 2.5rem;position:sticky;top:0;z-index:10;background:var(--surface)}
@media(max-width:700px){.nav{padding:1rem 1.25rem}}
/* Le filet n'arrive qu'une fois la barre décollée : au repos elle est posée sur
   la même surface que le hero, une ligne n'aurait rien à séparer. La classe est
   posée par le script ; sans lui la barre colle quand même, sans son filet. */
.nav::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:var(--line);opacity:0;transition:opacity .2s}
.nav.stuck::after{opacity:1}
@media(prefers-reduced-motion:reduce){.nav::after{transition:none}}
/* .logo et .menu viennent du design system ; ne reste ici que la décision de
   les escamoter quand la barre devient trop étroite. */
@media(max-width:860px){.menu{display:none}}
/* Le sélecteur de thème et l'action principale forment le bloc de droite. Posé
   seul, le sélecteur devenait le troisième d'une rangée de quatre écartés par
   space-between : il flottait entre le menu et le bouton sans rien pour
   l'accrocher. La barre se lit maintenant en trois temps, logo, menu,
   commandes, et ça tient aussi une fois le menu escamoté. */
.navend{display:flex;align-items:center;gap:.6rem;flex:none}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:2.5rem;align-items:center;padding:3rem 2.5rem 3rem}
@media(max-width:900px){.hero{grid-template-columns:1fr;padding:2rem 1.25rem 2.5rem}}
.hero h1{max-width:14ch}
.hero h1 mark{background:none;color:inherit;padding:0;margin:0}
.hero .lead{margin:1.3rem 0 1.8rem}
.hero .cta{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.trust{display:flex;align-items:center;gap:.7rem;margin-top:1.4rem;color:var(--grey);font-size:.9rem}
.faces{display:flex}
.faces span{width:30px;height:30px;border-radius:50%;border:2px solid var(--surface);margin-left:-8px;background:#cbd2de;overflow:hidden}
.faces span img{width:100%;height:100%;object-fit:cover;display:block}
.faces span:first-child{margin-left:0}
.faces span:nth-child(2){background:#b7c6e8}.faces span:nth-child(3){background:#dcd0f2}.faces span:nth-child(4){background:#f2cdb9}

.mosaic{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:120px;gap:.7rem}
.tile{border-radius:var(--r);position:relative;overflow:hidden}
/* Le fond générique ne vise que les emplacements photo : il passerait sinon
   devant .lime / .sky, déclarés par le design system, et effacerait les tuiles
   de chiffres. */
.tile:not(.color):not(.brand){background:var(--ph)}
.tile img{width:100%;height:100%;object-fit:cover;display:block}
/* Emplacements photo : dégradés tant qu'aucune image n'est renseignée dans config.json */
.tile.ph{background-image:radial-gradient(120% 90% at 25% 15%,rgba(255,255,255,.6),transparent 60%),linear-gradient(160deg,var(--a),var(--b))}
.tile.ph-1{--a:var(--lilac);--b:var(--sky)}
.tile.ph-2{--a:var(--peach);--b:var(--lilac)}
.tile.ph-3{--a:var(--sky);--b:var(--mint)}
.tile.ph-4{--a:var(--lime);--b:var(--mint)}
.tile.ph-5{--a:var(--peach);--b:var(--lime)}
.tile.tall{grid-row:span 2}
.tile.wide{grid-column:span 2}
.tile.color{padding:1.1rem;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:inset 0 0 0 1px var(--line)}
.tile.color b{font-size:2.2rem;font-weight:800;letter-spacing:-.04em;line-height:1}
.tile.color span{font-size:.85rem;color:var(--dim);margin-top:.3rem}
.tile.color svg{position:absolute;top:.9rem;right:.9rem;width:26px;height:26px}
.tile .cap{position:absolute;left:.8rem;bottom:.7rem;font-size:.75rem;color:#fff;background:rgba(15,17,21,.6);padding:.2rem .55rem;border-radius:999px}
@media(max-width:900px){.mosaic{grid-auto-rows:100px}}

section{padding:3.5rem 2.5rem}
@media(max-width:700px){section{padding:2.75rem 1.25rem}}
.head{margin-bottom:2rem;max-width:48ch}
.head .lead{margin-top:.8rem}
.head.center{margin-left:auto;margin-right:auto;text-align:center}
.head.center .lead{margin-left:auto;margin-right:auto}
.head.row{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;max-width:none;flex-wrap:wrap}
.head.row > div{max-width:48ch}

/* piliers */
/* auto-fit plutôt que trois colonnes en dur : si un pilier est retiré (le Discord
   tant qu'il n'a pas d'invitation), les cartes restantes occupent toute la largeur
   au lieu de laisser une colonne vide. */
.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1rem}
@media(max-width:900px){.cards3{grid-template-columns:1fr}}
.pcard{border-radius:var(--r-lg);padding:1.5rem;min-height:21rem;display:flex;flex-direction:column;gap:.5rem;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
/* Chacune reçoit sa lumière : les trois positions du design system. */
.pcard.lime{background-image:var(--glow-tl)}
.pcard.sky{background-image:var(--glow-tr)}
.pcard.peach{background-image:var(--glow-b)}
.pcard .top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:auto}
.pcard .photo{width:min(52%,220px);aspect-ratio:1/1;border-radius:40% 60% 55% 45%/50% 45% 55% 50%;background:var(--disc);margin-left:auto;margin-top:-1rem;display:grid;place-items:center;transition:transform .35s var(--ease)}
.pcard:hover .photo{transform:rotate(-4deg) scale(1.03)}
.pcard .photo svg{width:72%;height:72%}
.pcard h3{font-size:1.35rem;margin-top:1rem}
.pcard p{color:var(--dim);font-size:.95rem}
.pcard a.more{margin-top:.6rem;font-weight:600;font-size:.9rem}
.pcard:hover .arrow svg{transform:translate(2px,-2px)}

/* prochaine édition */
.next{display:grid;grid-template-columns:1fr 1.4fr;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
@media(max-width:800px){.next{grid-template-columns:1fr}}
.next .left{background-color:var(--lilac);background-image:var(--glow-l);padding:2rem;display:flex;flex-direction:column;gap:.8rem;align-items:flex-start}
.next .left .date{font-size:clamp(2rem,4vw,2.8rem);font-weight:700;letter-spacing:-.03em;line-height:1}
.next .left .sub{color:var(--dim)}
.next .right{padding:2rem;display:flex;flex-direction:column;gap:.9rem}
.next .right p{color:var(--grey)}
.next .right .cta{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.4rem}

/* éditions */
.egrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:900px){.egrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.egrid{grid-template-columns:1fr}}
.ecard{border-radius:var(--r-lg);padding:1.4rem;display:flex;flex-direction:column;gap:.6rem;text-decoration:none;min-height:15rem;box-shadow:inset 0 0 0 1px var(--line);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
a.ecard:hover{transform:translateY(-3px);box-shadow:var(--lift-card)}
.ecard .top{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.ecard h3{font-size:1.15rem;margin-top:auto}
.ecard p{color:var(--dim);font-size:.92rem}
.ecard.feat{grid-column:span 2;grid-row:span 1}
.ecard.feat h3{font-size:1.5rem;max-width:22ch}
.ecard.grey{background:var(--page)}
.ecard.grey h3,.ecard.grey p{color:var(--grey)}
@media(max-width:560px){.ecard.feat{grid-column:span 1}}

/* déroulé : timeline */
.timeline{--fig:150px;--dot:14px;--tgap:1.5rem;--draw:.45s;--hold:.75s;--step:calc(var(--draw) + var(--hold));--travel:cubic-bezier(.65,0,.35,1);list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--tgap)}
.tstop{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.tfig{width:100%;height:var(--fig);border-radius:var(--r-lg);display:grid;place-items:center;overflow:hidden}
.tfig svg{width:118px;height:118px}
.tdot{width:var(--dot);height:var(--dot);border-radius:50%;border:3px solid var(--ink);background:var(--ink);margin:.75rem 0;position:relative;z-index:2}
/* Le trait part du centre d'un point et rejoint le centre du suivant : rien ne dépasse à droite. */
.tstop::before,.tstop::after{content:"";position:absolute;left:50%;top:calc(var(--fig) + .75rem + var(--dot) / 2 - 1.5px);height:3px;width:calc(100% + var(--tgap));border-radius:2px}
.tstop::before{background:var(--line)}
.tstop::after{background:var(--ink);transform-origin:left top}

/* --- l'animation, posée par le script seulement : voir TIMELINE_SCRIPT --- */
.timeline.anime .tstop{opacity:.3;transition:opacity .4s var(--ease);transition-delay:calc(var(--i) * var(--step))}
.timeline.anime.on .tstop{opacity:1}
.timeline.anime .tfig{transform:translateY(14px) scale(.97);transition:transform .55s var(--ease);transition-delay:calc(var(--i) * var(--step))}
.timeline.anime.on .tfig{transform:none}
.timeline.anime .tdot{background:var(--surface);transform:scale(.5);transition:background .3s var(--ease),transform .3s var(--ease);transition-delay:calc(var(--i) * var(--step))}
.timeline.anime.on .tdot{background:var(--ink);transform:none}
.timeline.anime .tstop::after{transform:scale(0,1);transition:transform var(--draw) var(--travel);transition-delay:calc(var(--i) * var(--step) + var(--hold))}
.timeline.anime.on .tstop::after{transform:scale(1,1)}
/* Le texte ne se contente pas de s'éclaircir : il se découvre par la gauche,
   sous un masque à bord fondu, pastille puis titre puis phrase. */
.timeline.anime .tstop .pill,.timeline.anime .tstop h3,.timeline.anime .tstop p{-webkit-mask-image:linear-gradient(90deg,#000 52%,transparent);mask-image:linear-gradient(90deg,#000 52%,transparent);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:0% 100%;mask-size:0% 100%;transition:-webkit-mask-size .5s var(--ease),mask-size .5s var(--ease)}
.timeline.anime .tstop .pill{transition-delay:calc(var(--i) * var(--step) + .05s)}
.timeline.anime .tstop h3{transition-delay:calc(var(--i) * var(--step) + .13s)}
.timeline.anime .tstop p{transition-delay:calc(var(--i) * var(--step) + .21s)}
.timeline.anime.on .tstop .pill,.timeline.anime.on .tstop h3,.timeline.anime.on .tstop p{-webkit-mask-size:230% 100%;mask-size:230% 100%}
.tstop:last-child::before,.tstop:last-child::after{display:none}
.tstop h3{font-size:1.2rem;margin-top:.55rem}
.tstop p{color:var(--grey);font-size:.95rem;margin-top:.35rem}
.tstop .hand{transform-origin:90px 74px;transition:transform .9s var(--ease)}
.tstop:hover .hand{transform:rotate(360deg)}
@media(max-width:860px){
  .timeline{grid-template-columns:1fr;gap:1.75rem;--fig:88px}
  .tstop{display:grid;grid-template-columns:var(--fig) 1fr;column-gap:1.1rem;align-items:start;text-align:left}
  .tfig{grid-row:1/4;width:var(--fig);height:var(--fig);border-radius:22px}
  .tfig svg{width:68px;height:68px}
  .tdot{display:none}
  .tstop::before,.tstop::after{left:calc(var(--fig) / 2 - 1.5px);top:var(--fig);width:3px;height:calc(100% - var(--fig) + 1.75rem)}
  .tstop::after{transform:scale(1,0)}
  .tstop .pill{grid-column:2;margin-top:.1rem;justify-self:start}
  .tstop h3{grid-column:2;margin-top:.45rem}
  .tstop p{grid-column:2}
}

/* portraits */
.voices{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:900px){.voices{grid-template-columns:1fr}}
.vcard{border-radius:var(--r-lg);padding:1.5rem;display:flex;flex-direction:column;gap:1rem;min-height:18rem;text-decoration:none;box-shadow:inset 0 0 0 1px var(--line);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
a.vcard:hover{transform:translateY(-3px);box-shadow:var(--lift-card)}
.vcard .q{font-size:1.2rem;font-weight:600;letter-spacing:-.01em;line-height:1.35}
.vcard .who,.who{margin-top:auto;display:flex;gap:.7rem;align-items:center}
.vcard .ph,.who .ph{width:46px;height:46px;border-radius:50%;background:var(--soft-2);flex:none;overflow:hidden}
.who .ph img{width:100%;height:100%;object-fit:cover}
.vcard .who b,.who b{display:block;font-weight:600;font-size:.95rem}
.vcard .who span,.who span{color:var(--dim);font-size:.85rem}
.vcard .link{font-weight:600;font-size:.9rem;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:.9rem;margin-top:.2rem}
.vcard .link svg{width:16px;height:16px;transition:transform .25s var(--ease)}
a.vcard:hover .link svg{transform:translate(2px,-2px)}

/* partenaires */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.5rem}
@media(max-width:900px){.pgrid{grid-template-columns:1fr}}
.pc{border-top:1px solid var(--line);padding:1.3rem 0 0;display:flex;flex-direction:column;gap:.5rem}
.pc h3{display:flex;align-items:center;gap:.6rem}
.pc h3 svg{width:19px;height:19px;flex:none;color:var(--blue)}
.pc p{color:var(--grey);font-size:.93rem}

/* entreprise */
.corp{background-color:var(--sky);background-image:var(--glow-l);box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--r-lg);padding:2.5rem;display:grid;grid-template-columns:1.3fr 1fr;gap:2rem;align-items:center}
@media(max-width:800px){.corp{grid-template-columns:1fr;padding:1.75rem}}
.corp .pill{margin-bottom:.9rem}
.corp p{color:var(--dim);margin-top:.8rem}

/* bloc final — le fond, le mot-symbole et le bouton en contour viennent de .night */
.final{border-radius:var(--r-lg);padding:3.5rem 2rem;text-align:center;margin:0 2.5rem 2.5rem}
@media(max-width:700px){.final{margin:0 1.25rem 1.25rem;padding:2.5rem 1.25rem}}
.final .brandmark{--bm:clamp(2.1rem,4.2vw,3.2rem);margin-bottom:1.8rem}
.final h2{max-width:22ch;margin:0 auto}
.final p{max-width:46ch;margin:1rem auto 1.8rem}
.final .cta{display:flex;justify-content:center;flex-wrap:wrap;gap:.6rem}

footer{padding:1.5rem 2.5rem 2rem;border-top:1px solid var(--line);color:var(--grey);font-size:.9rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem}
footer a{text-decoration:none}
@media(max-width:700px){footer{padding:1.25rem}}

/* pages intérieures : éditions, portraits */
.phead{padding:1rem 2.5rem 0}
@media(max-width:700px){.phead{padding:.5rem 1.25rem 0}}
.phead .card{padding:2.5rem;display:grid;gap:1rem;background-image:var(--glow-l)}
@media(max-width:700px){.phead .card{padding:1.6rem}}
.phead h1{font-size:clamp(1.9rem,4.2vw,3rem);max-width:22ch}
.phead .lead{color:var(--dim);max-width:60ch}
.phead .meta{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.phead .quote{font-size:clamp(1.4rem,3vw,2.1rem);font-weight:600;letter-spacing:-.02em;line-height:1.3;max-width:28ch;text-wrap:balance}
.phead .who{margin-top:.5rem}
.article-wrap{display:grid;grid-template-columns:minmax(0,1fr) 19rem;gap:3rem;padding:3rem 2.5rem}
@media(max-width:900px){.article-wrap{grid-template-columns:1fr;gap:2rem;padding:2.5rem 1.25rem}}
.aside{display:grid;gap:1rem;align-content:start}
.fiche{border:1px solid var(--line);border-radius:var(--r-lg);padding:1.4rem;display:grid;gap:1rem}
.fiche.tint{border-color:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.fiche dl{margin:0;display:grid;gap:.7rem}
.fiche dt{font-size:.75rem;color:var(--grey);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.fiche.tint dt{color:var(--dim)}
.fiche dd{margin:0;font-weight:500}
.fiche .btn{justify-self:start}
.fiche ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.fiche ul a{text-decoration:none;font-weight:500;display:flex;justify-content:space-between;gap:.5rem}
.fiche ul a:hover{text-decoration:underline}
.fiche ul span{color:var(--grey);font-size:.85rem;white-space:nowrap}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:0 2.5rem 3rem}
@media(max-width:700px){.pager{grid-template-columns:1fr;padding:0 1.25rem 2.5rem}}
.pager a{border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.2rem;text-decoration:none;display:grid;gap:.2rem;transition:border-color .15s}
.pager a:hover{border-color:var(--ink)}
.pager a.next{text-align:right}
.pager span{font-size:.8rem;color:var(--grey)}
.pager b{font-weight:600}

/* questions fréquentes */
.faq{display:grid;grid-template-columns:repeat(2,1fr);gap:0 3rem}
@media(max-width:800px){.faq{grid-template-columns:1fr}}
.faq > div{border-top:1px solid var(--line);padding:1.3rem 0 1.4rem}
.faq h3{font-size:1.1rem;margin-bottom:.45rem}
.faq p{color:var(--grey);font-size:.97rem;max-width:52ch}

@media(prefers-reduced-motion:reduce){
  /* La frise n'a plus rien à neutraliser ici : le script ne l'arme pas du tout
     en mouvement réduit, donc elle reste dans son état de repos, tout visible. */
  .ecard,.vcard,.pcard .photo,.tstop .hand{transition:none}
}