/* ═══════════════════════════════════════════════════════════════════════════
   carte.css — le gabarit commun des cartes de projet
   ---------------------------------------------------------------------------
   Une carte n'est pas une page de présentation : c'est un PLAN. Elle répond
   dans cet ordre, et le lecteur décide où il s'arrête :

     strate 00 · 30 secondes  → ce que c'est, pour qui, à quelle échelle
     strate 01 · 5 minutes    → le geste : par où entre la donnée, par où elle sort
     strate 02 · 15 minutes   → la structure : les organes, les décisions, les limites

   Les tokens et le grain viennent de /gestion-projet/ — c'est la carte de
   référence, tout le reste doit avoir exactement la même densité.
   ═══════════════════════════════════════════════════════════════════════════ */

*{margin:0;padding:0;box-sizing:border-box}

:root{
  --fond:#0a0a0a;
  --encre:rgba(255,255,255,.88);
  --demi:rgba(255,255,255,.46);
  --faible:rgba(255,255,255,.24);
  --trait:rgba(255,255,255,.08);
  --vif:#4ade80;              /* ce qui tourne, ce qui est à moi */
  --tiers:#c9773f;            /* ce qui vient d'ailleurs, ce qui coûte de la main */
  --rouge:#f87171;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
}

body{
  min-height:100vh;background:var(--fond);color:var(--encre);
  font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  line-height:1.62;overflow-x:hidden;
}
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% -10%,#1a1a2e 0%,#0a0a0a 68%);
}
/* Le grain. Quarante octets de CSS, et l'écran cesse d'être une surface propre. */
body::after{
  content:'';position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;
  background-image:repeating-linear-gradient(0deg,#fff 0,#fff 1px,transparent 1px,transparent 3px);
}

.page{position:relative;z-index:2;max-width:960px;margin:0 auto;padding:82px 24px 110px}

/* ── l'en-tête ───────────────────────────────────────────────────────────── */
.fil{font-family:var(--mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;
     color:var(--faible);margin-bottom:26px}
.fil a{color:var(--faible);text-decoration:none;border-bottom:1px solid transparent;
       transition:color .25s,border-color .25s}
.fil a:hover{color:var(--demi);border-bottom-color:var(--trait)}

h1{font-family:'Bebas Neue',sans-serif;font-size:clamp(42px,8vw,78px);line-height:.94;
   letter-spacing:.012em;font-weight:400}
h1 em{font-style:normal;color:var(--vif)}
.chapo{margin-top:18px;font-size:16.5px;font-weight:300;color:var(--demi);max-width:66ch}
.chapo b{color:var(--encre);font-weight:600}

/* ── LE RAIL DE LECTURE ────────────────────────────────────────────────────
   Le seul mouvement de la page, et il porte une information qu'aucune barre
   de défilement ne donne : pas « combien de page reste-t-il » mais « combien
   de MINUTES ai-je déjà accepté de donner ». Le trait se remplit, le compteur
   monte, le palier courant s'allume. On sait à tout instant qu'on peut
   s'arrêter là sans avoir raté l'essentiel — c'est le contrat de la carte.  */
/* Le calage : la page fait 960 de large, centrée — il reste une gouttière de
   chaque côté. Le rail doit tenir DEDANS. 600 = 480 (demi-page) + 120 (sa
   propre largeur, tige + espace + le plus long libellé). Un pixel de moins et
   « LA STRUCTURE » vient s'asseoir sur le premier paragraphe. */
.railL{
  position:fixed;left:max(12px,calc(50vw - 600px));top:50%;transform:translateY(-50%);
  z-index:5;display:flex;gap:11px;pointer-events:none;max-width:118px;
}
.railL .tige{position:relative;width:1px;background:var(--trait);height:168px;flex:0 0 1px}
.railL .jus{position:absolute;left:0;top:0;width:1px;background:var(--vif);height:0;
            transition:height .45s cubic-bezier(.2,.8,.3,1)}
.railL ol{list-style:none;display:flex;flex-direction:column;justify-content:space-between;height:168px}
.railL li{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
          color:var(--faible);position:relative;transition:color .35s;line-height:1.35}
.railL li::before{
  content:'';position:absolute;left:-17px;top:6px;width:7px;height:7px;border-radius:50%;
  border:1px solid var(--faible);background:var(--fond);transition:border-color .35s,background .35s;
}
.railL li.on{color:var(--encre)}
.railL li.on::before{border-color:var(--vif);background:var(--vif)}
.railL li.vu::before{border-color:var(--vif)}
.railL .min{display:block;color:var(--faible);font-size:10px;letter-spacing:.1em;margin-top:2px;font-weight:700}
.railL li.on .min{color:var(--vif)}
@media (max-width:1180px){.railL{display:none}}

/* ── les strates ─────────────────────────────────────────────────────────── */
.strate{margin-top:66px;scroll-margin-top:40px}
.strate>.tete{display:flex;align-items:baseline;gap:14px;padding-bottom:14px;
              border-bottom:1px solid var(--trait);margin-bottom:26px;flex-wrap:wrap}
.strate .num{font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:var(--faible)}
.strate h2{font-family:'Bebas Neue',sans-serif;font-size:clamp(24px,4.4vw,34px);
           font-weight:400;line-height:1;letter-spacing:.015em}
.strate .cout{margin-left:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
              text-transform:uppercase;color:var(--faible)}

/* Le geste porte une direction : en descendant, les blocs entrent par la
   droite ; en remontant, par la gauche. On ne voit pas « quelque chose a
   bougé », on voit DANS QUEL SENS on avance dans le document.

   ⚠ TOUT est sous `.anim`, une classe posée par une ligne de script dans le
     <head>. Sans elle, les blocs sont VISIBLES. Mesuré le 27/08 : en cachant
     par défaut, une carte dont le script ne part pas (erreur, extension,
     vieux navigateur) n'affiche plus que ses titres — une page de CV muette,
     et personne pour le dire. Le défaut d'une amélioration progressive doit
     être la page qui marche. */
.anim .glisse{opacity:0;transform:translateX(16px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.3,1)}
.anim .remonte .glisse{transform:translateX(-16px)}
.anim .glisse.la{opacity:1;transform:none}

/* ── strate 00 : la fiche ────────────────────────────────────────────────── */
.fiche{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:1px;
       background:var(--trait);border:1px solid var(--trait);border-radius:2px;overflow:hidden}
.fiche div{background:var(--fond);padding:18px 20px 20px}
.fiche .k{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.2em;
          text-transform:uppercase;color:var(--faible);margin-bottom:7px}
.fiche .v{display:block;font-size:14px;color:var(--encre);font-weight:500;line-height:1.45}
.fiche .v small{display:block;font-weight:300;font-size:12.5px;color:var(--demi);margin-top:3px}

.marque{display:flex;align-items:baseline;gap:16px;margin:34px 0 0;
        padding-bottom:16px;border-bottom:1px solid var(--trait)}
.marque .x{font-family:'Bebas Neue',sans-serif;font-size:clamp(48px,9vw,86px);line-height:.8;
           color:var(--vif);letter-spacing:.01em}
.marque .q{font-family:var(--mono);font-size:11.5px;line-height:1.7;color:var(--demi);max-width:44ch}

/* ── strate 01 : le geste, en maillons ───────────────────────────────────── */
.rail{list-style:none;position:relative;padding-left:24px;margin-top:6px}
.rail::before{content:'';position:absolute;left:4.5px;top:7px;bottom:16px;width:1px;background:var(--trait)}
.rail li{position:relative;padding:0 0 20px}
.rail li::before{content:'';position:absolute;left:-24px;top:6px;width:10px;height:10px;border-radius:50%;
                 border:1px solid var(--vif);background:var(--fond)}
.rail li.ext::before{border-color:var(--tiers)}
/* <span> = en ligne par défaut : sans display:block le titre du maillon et sa
   glose se suivent dans la même phrase et le rail perd sa lecture verticale. */
.rail .q{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
         text-transform:uppercase;color:var(--faible);margin-bottom:2px}
.rail .t{display:block;font-size:14.5px;color:var(--encre);font-weight:500}
.rail .c{display:block;font-size:12.5px;color:var(--demi);font-weight:300;margin-top:3px}
.rail b{font-weight:600;color:var(--encre)}
.rail .main{color:var(--tiers)}
.rail .auto{color:var(--vif)}

/* ── le schéma : des nœuds et des flèches, sans SVG à la main ────────────── */
.flux{margin-top:22px;border:1px solid var(--trait);border-radius:2px;
      padding:20px 20px 16px;background:rgba(255,255,255,.014)}
.flux figcaption{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
                 color:var(--faible);margin-bottom:16px}
.chaine{display:flex;align-items:stretch;gap:0;flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px}
.noeud{flex:1 1 0;min-width:118px;border:1px solid var(--trait);border-radius:2px;
       padding:12px 12px 13px;background:rgba(255,255,255,.015);text-align:center}
.noeud.moi{border-color:rgba(74,222,128,.5)}
.noeud.tiers{border-color:rgba(201,119,63,.55)}
.noeud .n{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
          text-transform:uppercase;font-weight:700;color:var(--encre)}
.noeud.moi .n{color:var(--vif)}
.noeud.tiers .n{color:var(--tiers)}
.noeud .s{display:block;font-size:11px;color:var(--demi);font-weight:300;margin-top:5px;line-height:1.45}
/* La flèche est un caractère, pas une image : elle se redimensionne, elle
   s'imprime, et elle ne coûte pas une requête. */
.fl{flex:0 0 30px;display:flex;align-items:center;justify-content:center;
    font-family:var(--mono);font-size:13px;color:var(--faible)}
.fl.vif{color:rgba(74,222,128,.75)}
.fl.tiers{color:rgba(201,119,63,.75)}
.flux .leg{font-size:12px;color:var(--demi);font-weight:300;margin-top:14px;max-width:74ch}
.flux .leg .ok{color:var(--vif)}
.flux .leg .ko{color:var(--rouge)}
.flux .leg b{color:var(--encre);font-weight:600}

/* ── strate 02 : les organes ─────────────────────────────────────────────── */
.organes{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:1px;
         background:var(--trait);border:1px solid var(--trait);border-radius:2px;overflow:hidden}
.organe{background:var(--fond);padding:18px 20px 20px}
.organe h3{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
           font-weight:700;color:var(--vif);margin-bottom:7px}
.organe p{font-size:12.5px;color:var(--demi);font-weight:300}
.organe p b{color:var(--encre);font-weight:600}
.organe code{font-family:var(--mono);font-size:11.5px;color:var(--encre);background:rgba(255,255,255,.05);
             padding:1px 5px;border-radius:2px}

.cle{margin:34px 0 0;padding:26px 28px;border-left:2px solid var(--vif);background:rgba(74,222,128,.035)}
.cle p{font-size:16.5px;font-weight:300;color:var(--encre);max-width:64ch}
.cle p b{font-weight:600}
.cle .src{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
          text-transform:uppercase;color:var(--faible);margin-top:14px}

.limites{margin-top:34px;padding:22px 24px;border:1px dashed var(--trait);border-radius:2px}
.limites h3{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
            color:var(--tiers);margin-bottom:10px}
.limites li{list-style:none;font-size:13px;color:var(--demi);font-weight:300;padding-left:16px;
            position:relative;margin-top:6px}
.limites li::before{content:'—';position:absolute;left:0;color:var(--faible)}

/* ── la porte : vers l'outil, vers la maison ─────────────────────────────── */
.portes{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:14px;margin-top:52px}
.porte{display:block;text-decoration:none;color:inherit;position:relative;
       padding:22px 24px 24px;border:1px solid var(--trait);border-radius:2px;
       background:rgba(255,255,255,.014);overflow:hidden;
       transition:border-color .3s,background .3s,transform .3s cubic-bezier(.2,.8,.3,1)}
/* Un sens par porte : ce qui sort du site avance, ce qui y revient recule.
   Le survol ne dit pas « il y a un lien », il dit dans quelle direction. */
.porte.sort:hover{transform:translateX(5px);border-color:rgba(74,222,128,.42);background:rgba(74,222,128,.05)}
.porte.rentre:hover{transform:translateX(-5px);border-color:rgba(201,119,63,.42);background:rgba(201,119,63,.05)}
.porte .k{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;
          text-transform:uppercase;color:var(--faible)}
.porte .n{display:block;font-family:'Bebas Neue',sans-serif;font-size:27px;line-height:1.1;margin-top:6px}
.porte.sort .n{color:var(--vif)}
.porte.rentre .n{color:var(--tiers)}
.porte .d{display:block;font-size:12.5px;color:var(--demi);font-weight:300;margin-top:6px}
.porte .a{font-family:var(--mono);font-size:12px;color:var(--faible);margin-top:16px;display:block;
          transition:transform .3s cubic-bezier(.2,.8,.3,1)}
.porte.sort:hover .a{transform:translateX(4px)}
.porte.rentre:hover .a{transform:translateX(-4px)}

.avert{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--faible);
       margin-top:20px;line-height:1.8}

footer{margin-top:74px;padding-top:20px;border-top:1px solid var(--trait);
       font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--faible)}
footer a{color:var(--faible);text-decoration:none}
footer a:hover{color:var(--demi)}

@media (max-width:760px){
  .page{padding:56px 18px 80px}
  .marque{flex-direction:column;gap:8px}
  .chaine{flex-direction:column}
  .fl{flex:0 0 26px;transform:rotate(90deg)}
  .noeud{min-width:0}
}
@media (prefers-reduced-motion:reduce){
  .anim .glisse{opacity:1;transform:none;transition:none}
  .porte,.porte .a{transition:none}
  .porte:hover,.porte:hover .a{transform:none}
  .railL .jus{transition:none}
}