/* Charte KappGen 2.0 (docs/DESIGN.md) : neutres chauds + une seule couleur d'accent ; rouge/ambre/vert = problème/attention/fait. */
:root{
  --fond:#f6f6f4; --fond2:#efefec; --surface:#fff; --surface2:#f4f4f2; --bord:#e6e5e1; --bord2:#d8d6d0;
  --texte:#1b1a18; --texte2:#45433f; --pale:#7b7871;
  --accent:#2f5bea; --accent-f:#eaf0ff;
  --rouge:#d92d20; --rouge-f:#fdecea; --ambre:#c27803; --ambre-f:#fdf4e3; --vert:#16803c; --vert-f:#e8f5ec;
  --ombre:0 1px 2px #1b1a180a,0 1px 3px #1b1a1808; --r:12px; --nav:232px; color-scheme:light;
}
[data-theme="sombre"]{
  --fond:#0f1011; --fond2:#141517; --surface:#18191c; --surface2:#1f2023; --bord:#26282c; --bord2:#33363b;
  --texte:#ececea; --texte2:#c3c2bd; --pale:#8d8b85; --accent:#6b8cff; --accent-f:#1a2240;
  --rouge:#f0625a; --rouge-f:#2c1615; --ambre:#e3a23a; --ambre-f:#2a2112; --vert:#4cc479; --vert-f:#13261a; --ombre:none; color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--fond);color:var(--texte);font:14.5px/1.5 -apple-system,"SF Pro Text",Inter,system-ui,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
a{color:inherit}
.muted{color:var(--pale)}
.app{display:flex;min-height:100vh}
.nav{position:fixed;inset:0 auto 0 0;width:var(--nav);background:var(--fond2);border-right:1px solid var(--bord);display:flex;flex-direction:column;padding:16px 12px}
.marque{display:flex;align-items:center;gap:10px;padding:2px 8px 18px}
.logo{width:30px;height:30px;border-radius:8px;background:var(--texte);color:var(--fond);display:grid;place-items:center;font-weight:700;font-size:13px}
.marque b{display:block} .marque small{color:var(--pale);font-size:12px}
.menu{display:flex;flex-direction:column;gap:1px}
.menu a{padding:8px 10px;border-radius:8px;text-decoration:none;color:var(--texte2);font-weight:500;border:1px solid transparent;cursor:pointer}
.menu a:hover{background:var(--surface2)}
.menu a.actif{background:var(--surface);color:var(--texte);border-color:var(--bord);box-shadow:var(--ombre)}
.pied{margin-top:auto;border-top:1px solid var(--bord);padding-top:12px;display:flex;flex-direction:column;gap:8px;font-size:13px}
.principal{margin-left:var(--nav);flex:1;padding:28px 34px 60px;max-width:1280px}
h1{font-size:22px;margin:0 0 4px;letter-spacing:-.2px} h2{font-size:15px;margin:26px 0 10px;color:var(--texte2)}
.sous{color:var(--pale);margin:0 0 22px}
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.carte{background:var(--surface);border:1px solid var(--bord);border-radius:var(--r);padding:14px 16px;box-shadow:var(--ombre)}
.carte.cliquable{cursor:pointer} .carte.cliquable:hover{border-color:var(--bord2)}
.carte h3{margin:0 0 2px;font-size:15px} .carte .groupe{font-size:12px;color:var(--pale)}
.pastilles{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pastille{font-size:12px;padding:2px 8px;border-radius:20px;background:var(--surface2);border:1px solid var(--bord);color:var(--texte2)}
.pastille.publie{background:var(--vert-f);color:var(--vert);border-color:transparent}
.pastille.alerte{background:var(--rouge-f);color:var(--rouge);border-color:transparent}
.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,1fr);gap:12px;overflow-x:auto;padding-bottom:8px}
.colonne{background:var(--fond2);border:1px solid var(--bord);border-radius:var(--r);padding:10px;min-height:120px}
.colonne h4{margin:2px 4px 10px;font-size:12.5px;color:var(--pale);text-transform:uppercase;letter-spacing:.04em;display:flex;justify-content:space-between}
.fiche{background:var(--surface);border:1px solid var(--bord);border-radius:10px;padding:9px 11px;margin-bottom:8px;font-size:13.5px}
.fiche small{display:block;color:var(--pale);margin-top:3px}
.fiche.erreur{border-color:var(--rouge)}
table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--bord);border-radius:var(--r);overflow:hidden}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--bord);font-size:13.5px} th{color:var(--pale);font-weight:500;background:var(--surface2)}
tr:last-child td{border-bottom:0}
input,select{background:var(--surface);border:1px solid var(--bord2);border-radius:8px;padding:8px 10px;min-width:0}
input:focus,select:focus{outline:2px solid var(--accent-f);border-color:var(--accent)}
.btn{background:var(--texte);color:var(--fond);border:0;border-radius:8px;padding:8px 14px;font-weight:600;cursor:pointer}
.btn.second{background:var(--surface);color:var(--texte);border:1px solid var(--bord2)}
.btn.petit{padding:4px 10px;font-size:12.5px}
.btn:disabled{opacity:.45;cursor:default}
.formulaire{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0}
.centre{min-height:100vh;display:grid;place-items:center;padding:20px}
.boite{width:360px;max-width:100%;background:var(--surface);border:1px solid var(--bord);border-radius:16px;padding:26px;box-shadow:var(--ombre)}
.boite h1{margin-bottom:6px} .boite input{width:100%;margin:6px 0}
.erreur-txt{color:var(--rouge);font-size:13px;min-height:18px;margin:6px 0}
.barre{height:8px;background:var(--surface2);border-radius:8px;overflow:hidden;margin:6px 0 2px;border:1px solid var(--bord)}
.barre span{display:block;height:100%;background:var(--accent)} .barre span.chaud{background:var(--ambre)} .barre span.plein{background:var(--rouge)}
@media(max-width:800px){.nav{position:static;width:auto;flex-direction:row;overflow-x:auto}.principal{margin:0;padding:18px}.app{display:block}}
.bandeau-mdp{background:var(--ambre-f);color:var(--ambre);border:1px solid var(--bord);border-radius:10px;padding:8px 14px;margin:0 0 16px;font-size:13.5px}.lien{cursor:pointer;text-decoration:underline}.champ{display:block;margin:8px 0;font-size:13px;color:var(--pale)}.champ input{display:block;width:100%;margin-top:4px}

/* ================= page d'accès : scène « atelier de production » (CSS seul, aucune image) ================= */
.acces{display:grid;grid-template-columns:1.15fr .85fr;min-height:100vh}
.acces-visuel{position:relative;overflow:hidden;background:#101114;color:#ececea;padding:40px 52px;display:flex;flex-direction:column;justify-content:space-between;
  background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:44px 44px}
.acces-visuel::before{content:"";position:absolute;inset:-20% -10% auto auto;width:70%;aspect-ratio:1;background:radial-gradient(circle,#2f5bea40,transparent 62%);pointer-events:none}
.acces-marque{display:flex;align-items:center;gap:10px;position:relative;font-size:17px}
.acces-marque .logo{background:#ececea;color:#101114}
.scene{position:relative;height:420px;margin:24px 0 18px}
.cadre{position:absolute;border:1px solid #ffffff26;border-radius:14px;background:linear-gradient(140deg,#1d2230,#14161c 60%);box-shadow:0 20px 50px #0008;overflow:hidden}
.cadre.h{left:0;top:10px;width:300px;aspect-ratio:16/9;animation:flotte 7s ease-in-out infinite}
.cadre.v{left:250px;top:74px;width:130px;aspect-ratio:9/16;background:linear-gradient(160deg,#25305a,#14161c 70%);animation:flotte 7s ease-in-out -3.5s infinite}
.cadre::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,#ffffff12 50%,transparent 60%);transform:translateX(-120%);animation:reflet 5s ease-in-out infinite}
.lecture{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#ececea;display:grid;place-items:center}
.lecture::after{content:"";border-left:14px solid #101114;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.etiquette{position:absolute;left:10px;bottom:8px;font-size:11px;color:#a9a8a3;letter-spacing:.03em}
.onde{position:absolute;right:0;top:30px;width:300px;height:92px;display:flex;align-items:center;gap:4px}
.onde i{flex:1;height:var(--h);background:#6b8cff;border-radius:3px;opacity:.85;animation:onde 1.3s ease-in-out var(--d) infinite;transform-origin:center}
.piste{position:absolute;left:0;right:0;bottom:70px;height:64px;border-top:1px solid #ffffff1f;display:flex;justify-content:space-between;align-items:flex-end;padding-top:14px}
.piste span{position:relative;font-size:11.5px;text-align:center;color:#8d8c87;display:flex;flex-direction:column;align-items:center;gap:8px;animation:jalon 10s linear infinite;animation-delay:calc(var(--i) * 1.25s - 10s)}
.piste span b{width:10px;height:10px;border-radius:50%;background:#33363b;border:2px solid #101114;box-shadow:0 0 0 1px #ffffff33}
.tete{position:absolute;top:-1px;left:0;width:2px;height:64px;background:#6b8cff;box-shadow:0 0 12px #6b8cff;animation:tete 10s linear infinite}
.acces-visuel h2{position:relative;margin:0 0 10px;font-size:30px;line-height:1.2;letter-spacing:-.4px;max-width:520px}
.acces-visuel p{position:relative;margin:0;color:#a9a8a3;max-width:480px}
.acces-formulaire{background:var(--fond);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 28px}
.acces-formulaire .boite{width:380px;max-width:100%;border:0;box-shadow:none;background:transparent;padding:0}
.acces-formulaire .boite h1{font-size:26px}
.acces-formulaire label{display:block;font-size:13px;color:var(--pale);margin:12px 0}
.acces-formulaire input{display:block;width:100%;margin-top:5px;padding:11px 12px;font-size:15px}
.btn.grand{width:100%;padding:12px;font-size:15px;margin-top:6px}
.astuce{background:var(--accent-f);border-radius:10px;padding:11px 14px;margin:6px 0 4px;font-size:13.5px}
.aide{color:var(--pale);font-size:12.5px;margin:16px 0 0}
.acces-pied{margin:26px 0 0;color:var(--pale);font-size:12px}
code{background:var(--surface2);border:1px solid var(--bord);padding:0 5px;border-radius:5px;font-size:12.5px}
@keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes reflet{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@keyframes onde{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@keyframes tete{from{left:0}to{left:100%}}
@keyframes jalon{0%,11%{color:#ececea}12%,100%{color:#8d8c87}}
@keyframes puce{0%,60%{opacity:.25;transform:translateY(4px)}72%,100%{opacity:1;transform:none}}
@media(max-width:900px){.acces{grid-template-columns:1fr}.acces-visuel{display:none}.acces-formulaire{min-height:100vh}}
@media(prefers-reduced-motion:reduce){.cadre,.onde i,.piste span,.tete,.cadre::after{animation:none}}
.acces-visuel h2{color:#ececea}.acces-visuel h2,.acces-visuel p{text-shadow:0 1px 12px #101114}

.diffusion{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;color:#a9a8a3}
.diffusion span{margin-right:4px}
.diffusion em{font-style:normal;padding:3px 10px;border-radius:20px;border:1px solid #ffffff2b;background:#ffffff0d;color:#ececea;animation:puce 10s ease-out infinite;animation-delay:calc(var(--r) * .12s)}

/* ================= scène de diffusion (v2) : parcours compact + étoile de diffusion ================= */
.acces-visuel{justify-content:flex-start;gap:8px}
.diffusion-svg{width:100%;max-width:640px;height:auto;margin:6px auto 0;overflow:visible;color:#ececea}
.lien-pipeline{fill:none;stroke:#ffffff26;stroke-width:1.5}
.etape circle{fill:#2a2c33;stroke:#ffffff33;stroke-width:1.5;animation:etape 5s linear infinite;animation-delay:calc(var(--i) * .28s)}
.etape text{font-size:10px;fill:#8d8c87;text-anchor:middle;animation:etape-txt 5s linear infinite;animation-delay:calc(var(--i) * .28s)}
.tete-lecture{fill:#6b8cff;filter:drop-shadow(0 0 6px #6b8cff);animation:tete-pipe 5s linear infinite}
.rayon-fond{stroke:#ffffff17;stroke-width:1.2}
.rayon{stroke:#6b8cff;stroke-width:2.4;stroke-linecap:round;fill:none;stroke-dasharray:9 120;stroke-dashoffset:9;filter:drop-shadow(0 0 4px #6b8cff);animation:rayon 5s ease-in infinite;animation-delay:calc(var(--r) * .06s)}
.sat{transform-box:fill-box;transform-origin:center;animation:flotte-sat 6s ease-in-out infinite;animation-delay:calc(var(--r) * -.8s)}
.sat-rond{fill:#1c1e24;stroke:#ffffff2e;stroke-width:1.5;animation:arrive 5s linear infinite;animation-delay:calc(var(--r) * .06s)}
.sat-glyphe{color:#ececea;fill:#ececea}
.sat-nom{font-size:11px;fill:#a9a8a3;text-anchor:middle}
.hub-rond{fill:#ececea} .hub-k{font-size:32px;font-weight:800;fill:#101114;font-family:inherit}
.hub-onde{fill:none;stroke:#6b8cff;stroke-width:2;transform-box:fill-box;transform-origin:center;animation:onde-hub 5s ease-out infinite}
.acces-texte{position:relative;margin-top:auto} .acces-texte h2{margin:0 0 8px;font-size:30px;line-height:1.15;letter-spacing:-.5px}
.acces-texte p{margin:0;color:#a9a8a3;max-width:480px;font-size:14.5px}
@keyframes etape{0%{fill:#2a2c33;stroke:#ffffff33}1%,9%{fill:#6b8cff;stroke:#6b8cff}10%,100%{fill:#ececea;stroke:#ececea}}
@keyframes etape-txt{0%{fill:#8d8c87}1%,9%{fill:#ffffff}10%,100%{fill:#c9c8c3}}
@keyframes tete-pipe{0%{transform:translateX(0);opacity:1}46%{transform:translateX(308px);opacity:1}50%,100%{transform:translateX(308px);opacity:0}}
@keyframes rayon{0%,50%{stroke-dashoffset:9}84%,100%{stroke-dashoffset:-125}}
@keyframes arrive{0%,80%{stroke:#ffffff2e;fill:#1c1e24}86%{stroke:#6b8cff;fill:#232a45}100%{stroke:#ffffff2e;fill:#1c1e24}}
@keyframes onde-hub{0%,48%{opacity:0;transform:scale(1)}52%{opacity:.9}70%,100%{opacity:0;transform:scale(1.9)}}
@keyframes flotte-sat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media(prefers-reduced-motion:reduce){.etape circle,.etape text,.tete-lecture,.rayon,.sat,.sat-rond,.hub-onde{animation:none}}

/* ================= scène v3 : vrai logo, logos officiels des réseaux, icônes d'étapes, routine quotidienne ================= */
.logo-img{width:30px;height:30px;object-fit:contain;display:block}
.acces-marque .logo-img{width:34px;height:34px}
.etape circle{r:15px}
.etape-ico{color:#8d8c87;animation:etape-ico 5s linear infinite;animation-delay:calc(var(--i) * .28s)}
.etape text{font-size:10.5px}
@keyframes etape{0%{fill:#1c1e24;stroke:#ffffff33}1%,9%{fill:#6b8cff;stroke:#6b8cff}10%,100%{fill:#1f2740;stroke:#6b8cff}}
@keyframes etape-ico{0%{color:#8d8c87}1%,9%{color:#ffffff}10%,100%{color:#c9d4ff}}
.sat-rond{stroke:#ffffff2e;stroke-width:2;animation:arrive 5s linear infinite;animation-delay:calc(var(--r) * .06s)}
@keyframes arrive{0%,80%{stroke:#ffffff2e;stroke-width:2}86%{stroke:#6b8cff;stroke-width:5}100%{stroke:#ffffff2e;stroke-width:2}}
.sat-nom{font-size:11.5px}
.hub-halo{fill:#6b8cff1f;stroke:#6b8cff55;stroke-width:1}
.routine{position:relative;margin:18px 0 0;padding:12px 14px;border:1px solid #ffffff1f;border-radius:12px;background:#ffffff08;max-width:560px}
.routine-tete{display:flex;align-items:center;gap:8px;font-size:13.5px;flex-wrap:wrap}
.routine-tete b{color:#ececea;font-weight:600}
.routine-ico{width:15px;height:15px;color:#6b8cff;fill:none;flex:none}
.routine-heure{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#a9a8a3;padding:3px 9px;border-radius:20px;background:#ffffff0d}
.routine-bas{display:flex;align-items:center;gap:14px;margin-top:10px;flex-wrap:wrap}
.jours{display:flex;gap:6px}
.jour{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:11.5px;font-weight:600;color:#8d8c87;border:1px solid #ffffff1f;transition:all .3s}
.jour.actif{color:#fff;border-color:#6b8cff;background:#6b8cff33;box-shadow:0 0 0 3px #6b8cff22;animation:pouls-jour 1.2s ease-in-out infinite}
.jour.fait{color:#101114;background:#3ddc84;border-color:#3ddc84}
.routine-compte{font-size:12.5px;color:#a9a8a3}
.routine-compte b{color:#ececea;font-size:15px;font-variant-numeric:tabular-nums}
@keyframes pouls-jour{0%,100%{box-shadow:0 0 0 3px #6b8cff22}50%{box-shadow:0 0 0 6px #6b8cff11}}
@media(prefers-reduced-motion:reduce){.etape-ico,.jour.actif{animation:none}}
.cle-licence{display:block;width:100%;margin-top:5px;padding:10px 12px;font:12.5px ui-monospace,Menlo,monospace;border:1px solid var(--bord2);border-radius:8px;background:var(--surface);color:var(--texte);resize:vertical;word-break:break-all}
.second-acces{display:block;text-align:center;margin-top:10px;background:transparent;color:var(--texte);border:1px solid var(--bord2);text-decoration:none}

.zone-titre{fill:#a9a8a3;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600}.zone-titre.accent{fill:#6b8cff}
.acces-texte h2 .kapp{color:#6b8cff}

/* ================= scène en thème CLAIR (le thème sombre garde la scène nuit ci-dessus) ================= */
:root:not([data-theme="sombre"]) .acces-visuel{--scene-plus:#ffffff;--scene-plus-texte:#1b1a18;background-color:#f2f4f9;color:#1b1a18;
  background-image:linear-gradient(#1b1a180b 1px,transparent 1px),linear-gradient(90deg,#1b1a180b 1px,transparent 1px)}
:root:not([data-theme="sombre"]) .acces-visuel::before{background:radial-gradient(circle,#2f5bea24,transparent 62%)}
:root:not([data-theme="sombre"]) .acces-visuel h2,:root:not([data-theme="sombre"]) .acces-texte h2{color:#1b1a18;text-shadow:none}
:root:not([data-theme="sombre"]) .acces-visuel p,:root:not([data-theme="sombre"]) .acces-texte p{color:#5f5c56;text-shadow:none}
:root:not([data-theme="sombre"]) .acces-texte h2 .kapp{color:#2f5bea}
:root:not([data-theme="sombre"]) .diffusion-svg{color:#1b1a18}
:root:not([data-theme="sombre"]) .lien-pipeline{stroke:#1b1a1826}
:root:not([data-theme="sombre"]) .etape circle{animation-name:etape-clair}
:root:not([data-theme="sombre"]) .etape text{fill:#5f5c56;animation:none}
:root:not([data-theme="sombre"]) .etape-ico{animation-name:etape-ico-clair}
:root:not([data-theme="sombre"]) .tete-lecture{fill:#2f5bea;filter:drop-shadow(0 0 5px #2f5bea99)}
:root:not([data-theme="sombre"]) .rayon-fond{stroke:#1b1a181c}
:root:not([data-theme="sombre"]) .rayon{stroke:#2f5bea;filter:drop-shadow(0 0 3px #2f5bea88)}
:root:not([data-theme="sombre"]) .sat-rond{stroke:#1b1a1824;filter:drop-shadow(0 4px 10px #1b1a1818);animation-name:arrive-clair}
:root:not([data-theme="sombre"]) .sat-nom{fill:#5f5c56}
:root:not([data-theme="sombre"]) .hub-halo{fill:#2f5bea14;stroke:#2f5bea40}
:root:not([data-theme="sombre"]) .hub-onde{stroke:#2f5bea}
:root:not([data-theme="sombre"]) .zone-titre{fill:#7b7871}:root:not([data-theme="sombre"]) .zone-titre.accent{fill:#2f5bea}
:root:not([data-theme="sombre"]) .routine{border-color:#1b1a1816;background:#ffffffc7;box-shadow:0 8px 24px #1b1a180d}
:root:not([data-theme="sombre"]) .routine-tete b,:root:not([data-theme="sombre"]) .routine-compte b{color:#1b1a18}
:root:not([data-theme="sombre"]) .routine-ico{color:#2f5bea}
:root:not([data-theme="sombre"]) .routine-heure{color:#5f5c56;background:#1b1a180a}
:root:not([data-theme="sombre"]) .routine-compte{color:#5f5c56}
:root:not([data-theme="sombre"]) .jour{color:#7b7871;border-color:#1b1a1822}
:root:not([data-theme="sombre"]) .jour.actif{color:#2f5bea;border-color:#2f5bea;background:#2f5bea14}
:root:not([data-theme="sombre"]) .jour.fait{color:#fff;background:#16a34a;border-color:#16a34a}
@keyframes etape-clair{0%{fill:#ffffff;stroke:#1b1a1826}1%,9%{fill:#2f5bea;stroke:#2f5bea}10%,100%{fill:#eaf0ff;stroke:#2f5bea}}
@keyframes etape-ico-clair{0%{color:#9a978f}1%,9%{color:#ffffff}10%,100%{color:#2f5bea}}
@keyframes arrive-clair{0%,80%{stroke:#1b1a1824;stroke-width:2}86%{stroke:#2f5bea;stroke-width:5}100%{stroke:#1b1a1824;stroke-width:2}}