/* Logiciel 7G — charte des outils 7G (bleu 7G, Lexend, couleurs des outils) */
:root{
  --bleu:#0C3D63; --bleu-2:#15507F;
  --fond:#EEF2F6; --surface:#FFFFFF; --surface-2:#F6F8FB; --rail:#F7F9FB;
  --encre:#0E2233; --doux:#5C6F83; --trait:#DDE4EC; --trait-fort:#C9D4DE;
  --accent:#0C3D63; --accent-doux:#DCE8F2; --focus:#2E6DA4;
  --ok:#1F8A55; --attention:#B8741A; --danger:#C23A3E; --info:#2E6DA4;
  --ombre:0 1px 0 rgba(12,61,99,.04), 0 10px 24px -14px rgba(12,61,99,.22);
  --ombre-forte:0 2px 6px rgba(6,26,43,.08), 0 30px 60px -28px rgba(6,26,43,.45);
  --f:"Lexend","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-large:"Lexend Exa","Lexend","Segoe UI",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
  font-size:15px;
}
:root[data-taille="grand"]{font-size:17px}
:root[data-taille="tres-grand"]{font-size:19px}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --fond:#0A1724; --surface:#112233; --surface-2:#0E1D2C; --rail:#0C1A28;
    --encre:#E6EEF5; --doux:#93A5B7; --trait:#1B2F43; --trait-fort:#27405A;
    --accent:#8DC0EA; --accent-doux:#16304A; --focus:#8DC0EA;
    --ok:#4CC486; --attention:#E3A450; --danger:#F07378; --info:#8DC0EA;
    --ombre:0 1px 0 rgba(0,0,0,.25), 0 12px 26px -14px rgba(0,0,0,.65);
    --ombre-forte:0 2px 6px rgba(0,0,0,.3), 0 30px 60px -24px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --fond:#0A1724; --surface:#112233; --surface-2:#0E1D2C; --rail:#0C1A28;
  --encre:#E6EEF5; --doux:#93A5B7; --trait:#1B2F43; --trait-fort:#27405A;
  --accent:#8DC0EA; --accent-doux:#16304A; --focus:#8DC0EA;
  --ok:#4CC486; --attention:#E3A450; --danger:#F07378; --info:#8DC0EA;
  --ombre:0 1px 0 rgba(0,0,0,.25), 0 12px 26px -14px rgba(0,0,0,.65);
  --ombre-forte:0 2px 6px rgba(0,0,0,.3), 0 30px 60px -24px rgba(0,0,0,.8);
  color-scheme:dark;
}
[hidden]{display:none!important}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--fond);color:var(--encre);font:400 1rem/1.5 var(--f);-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
kbd{font:500 .72rem/1 var(--f-mono);border:1px solid var(--trait-fort);border-bottom-width:2px;border-radius:5px;padding:.2rem .35rem;color:var(--doux);background:var(--surface)}

/* icônes : SVG à traits insérés par app.js, ils prennent la couleur du texte */
[data-ic]{display:inline-grid;place-items:center;width:1.15rem;height:1.15rem;flex:none}
[data-ic] svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- boutons ---------- */
.btn{height:2.6rem;padding:0 1.1rem;border-radius:.6rem;border:1px solid var(--trait-fort);background:var(--surface);font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:.5rem}
.btn:hover{border-color:var(--doux)}
.btn.principal{background:var(--bleu);border-color:var(--bleu);color:#fff}
.btn.principal:hover{background:var(--bleu-2)}
.btn.large{width:100%;height:3rem;font-size:1.02rem}
.btn[disabled]{opacity:.6;cursor:progress}
.lien{border:0;background:none;color:var(--accent);font-weight:500;font-size:.9rem;padding:.25rem .1rem}
.lien:hover{text-decoration:underline}
.icone-btn{position:relative;width:2.6rem;height:2.6rem;border-radius:.6rem;border:1px solid var(--trait);background:var(--surface);display:grid;place-items:center}
.icone-btn:hover{border-color:var(--trait-fort)}
.icone-btn [data-ic]{width:1.2rem;height:1.2rem}
.discret{color:var(--doux);font-size:.88rem}

/* ---------- chargement ---------- */
.chargement{position:fixed;inset:0;display:grid;place-items:center;background:var(--fond);z-index:50;transition:opacity .3s}
.chargement svg{width:64px;height:54px;animation:souffle 1.4s ease-in-out infinite}
.chargement.fini{opacity:0;pointer-events:none}
@keyframes souffle{50%{transform:scale(.92);opacity:.7}}

/* ---------- connexion ---------- */
.connexion{min-height:100%;display:grid;place-items:center;padding:1.5rem 1rem;background:
  radial-gradient(90rem 40rem at 50% -10%, color-mix(in srgb,var(--bleu) 14%,transparent), transparent 60%), var(--fond)}
.cx-carte{width:min(27rem,100%);background:var(--surface);border:1px solid var(--trait);border-radius:1.1rem;box-shadow:var(--ombre-forte);padding:2rem 1.75rem 1.5rem;display:grid;gap:1.4rem}
.cx-marque{display:flex;align-items:center;gap:1rem}
.cx-logo{width:4rem;height:3.4rem;flex:none}
.cx-logo .trace path{stroke-dasharray:1;stroke-dashoffset:1;animation:trace .9s var(--ease) forwards}
.cx-logo .trace path:nth-child(2){animation-delay:.35s}
.cx-logo .trace path:nth-child(3){animation-delay:.8s;animation-duration:.3s}
@keyframes trace{to{stroke-dashoffset:0}}
.cx-marque h1{margin:0;font:600 1.6rem/1.1 var(--f);letter-spacing:-.015em}
.cx-marque p{margin:.3rem 0 0;color:var(--doux)}
#form-connexion{display:grid;gap:1rem}
.cx-aide{margin:0;font-size:.93rem;color:var(--doux)}
.cx-aide strong{color:var(--encre);font-weight:600}
.champ{display:grid;gap:.4rem}
.champ > span:first-child{font-weight:500;font-size:.92rem}
.champ input{height:3rem;width:100%;border-radius:.6rem;border:1px solid var(--trait-fort);background:var(--surface-2);padding:0 .9rem;font-size:1.02rem}
.champ input:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 22%,transparent);background:var(--surface)}
.mdp{position:relative;display:block}
.mdp input{padding-right:6.2rem}
.voir{position:absolute;right:.4rem;top:50%;transform:translateY(-50%);height:2.2rem;padding:0 .7rem;border-radius:.45rem;border:0;background:none;color:var(--accent);font-weight:500;font-size:.88rem}
.voir:hover{background:var(--accent-doux)}
.cx-erreur{margin:0;padding:.7rem .85rem;border-radius:.6rem;background:color-mix(in srgb,var(--danger) 12%,var(--surface));color:var(--encre);font-size:.93rem;border:1px solid color-mix(in srgb,var(--danger) 35%,transparent)}
.cx-pied{margin:0;font-size:.85rem;color:var(--doux);border-top:1px solid var(--trait);padding-top:1rem}

/* ---------- application ---------- */
.app{display:grid;grid-template-columns:15.5rem minmax(0,1fr);height:100%}
.rail{background:var(--rail);border-right:1px solid var(--trait);display:flex;flex-direction:column;gap:2px;padding:.9rem .65rem;overflow:auto}
.rail-marque{display:flex;align-items:center;gap:.6rem;padding:.35rem .6rem .9rem;font:600 1.05rem/1 var(--f)}
.rail-marque svg{width:1.9rem;height:1.6rem}
.dans-logiciel .rail-marque{display:none}
.rail-titre{font:500 .68rem/1 var(--f-large);letter-spacing:.14em;text-transform:uppercase;color:var(--doux);padding:1rem .65rem .55rem}
.rail-outils{display:grid;gap:2px}
.rl{position:relative;display:flex;align-items:center;gap:.7rem;width:100%;padding:.5rem .6rem;border:0;border-radius:.55rem;background:none;text-align:left;font-weight:500;font-size:.93rem;line-height:1.2}
.rl:hover{background:color-mix(in srgb,var(--trait) 70%,transparent)}
.rl.on{background:var(--accent-doux)}
.ri{width:1.75rem;height:1.75rem;border-radius:.45rem;display:grid;place-items:center;flex:none;color:var(--doux)}
.ri [data-ic]{width:1.05rem;height:1.05rem}
.ri[data-ic]{padding:.33rem}
.ri-accueil svg{width:1.75rem;height:1.5rem}
.rl .ti{width:1.75rem;height:1.75rem;border-radius:.45rem}
.rl .ti [data-ic]{width:1rem;height:1rem}
.rail-bas{margin-top:auto;display:grid;gap:2px;padding-top:.8rem}
.pastille{width:.5rem;height:.5rem;border-radius:50%;background:var(--danger);margin-left:auto}
.moi{display:flex;align-items:center;gap:.65rem;padding:.8rem .6rem .3rem;margin-top:.5rem;border-top:1px solid var(--trait)}
.avatar{width:2.1rem;height:2.1rem;border-radius:50%;background:var(--bleu);color:#fff;display:grid;place-items:center;font-weight:600;font-size:.85rem;flex:none}
.moi-t{min-width:0}
.moi-t b{display:block;font-weight:600;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.moi-t small{display:block;color:var(--doux);font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.ti{display:grid;place-items:center;background:var(--tc);color:#fff;flex:none}

.principal-zone{display:flex;flex-direction:column;min-width:0;min-height:0}
.entete{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding:1.4rem 2rem 1rem}
.salut h2{margin:0;font:600 1.75rem/1.1 var(--f);letter-spacing:-.015em}
.salut p{margin:.35rem 0 0;color:var(--doux);font-size:.93rem}
.entete-actions{display:flex;gap:.6rem;align-items:center}
.recherche-btn{display:flex;align-items:center;gap:.65rem;height:2.6rem;min-width:22rem;padding:0 .6rem 0 .8rem;border-radius:.6rem;border:1px solid var(--trait);background:var(--surface);color:var(--doux);font-size:.92rem;text-align:left}
.recherche-btn:hover{border-color:var(--trait-fort)}
.recherche-btn kbd{margin-left:auto}
.compteur{position:absolute;top:-.4rem;right:-.4rem;min-width:1.25rem;height:1.25rem;border-radius:1rem;background:var(--danger);color:#fff;font:600 .72rem/1.25rem var(--f);text-align:center;padding:0 .3rem}

.defile{flex:1;overflow:auto;padding:.4rem 2rem 2rem;display:grid;gap:1.8rem;align-content:start}
.bloc{display:grid;gap:.75rem}
.bloc-tete{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.bloc-tete h3{margin:0;font:500 .72rem/1 var(--f-large);letter-spacing:.14em;text-transform:uppercase;color:var(--doux)}

.bandeau{display:flex;gap:.8rem;align-items:center;padding:.85rem 1rem;border-radius:.75rem;background:var(--accent-doux);font-size:.95rem}

.liste{background:var(--surface);border:1px solid var(--trait);border-radius:.85rem;overflow:hidden}
.ligne{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.85rem;align-items:center;padding:.8rem 1rem;border-bottom:1px solid var(--trait)}
.ligne:last-child{border-bottom:0}
.ligne .niv{width:.6rem;height:.6rem;border-radius:.2rem;background:var(--nc,var(--info))}
.ligne.danger{--nc:var(--danger)} .ligne.warn{--nc:var(--attention)} .ligne.info{--nc:var(--info)} .ligne.ok{--nc:var(--ok)}
.ligne .txt{min-width:0}
.ligne .txt b{display:block;font-weight:500}
.ligne .txt small{display:block;color:var(--doux);font-size:.85rem;margin-top:.1rem}
.ligne .act{display:flex;gap:.4rem;align-items:center}
.ligne .act .btn{height:2.2rem;padding:0 .8rem;font-size:.88rem}
.ligne.lue{opacity:.62}
.vide{padding:1.3rem 1rem;display:flex;gap:.8rem;align-items:center;color:var(--doux)}
.vide [data-ic]{color:var(--ok);width:1.4rem;height:1.4rem}

.tuiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.85rem}
.tuile{position:relative;display:grid;gap:.75rem;align-content:start;padding:1rem 1rem .9rem;border-radius:.85rem;border:1px solid var(--trait);background:var(--surface);box-shadow:var(--ombre);text-align:left;transition:transform .2s var(--ease),border-color .2s}
.tuile:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--tc) 55%,var(--trait))}
.tuile-ouvrir{position:absolute;inset:0;border:0;background:none;border-radius:inherit;z-index:0}
.tuile > *:not(.tuile-ouvrir){position:relative;z-index:1;pointer-events:none}
.tuile .raccourcis{pointer-events:auto}
.tuile-tete{display:flex;align-items:center;gap:.75rem}
.tuile .ti{width:2.5rem;height:2.5rem;border-radius:.65rem}
.tuile .ti [data-ic]{width:1.3rem;height:1.3rem}
.tuile-nom{font-weight:600;font-size:1rem;line-height:1.25}
.tuile-adr{display:block;color:var(--doux);font:400 .74rem/1.3 var(--f-mono);margin-top:.15rem}
.tuile-desc{margin:0;color:var(--doux);font-size:.88rem;line-height:1.45}
.etat{justify-self:start;font:500 .66rem/1 var(--f-large);letter-spacing:.08em;text-transform:uppercase;padding:.3rem .45rem;border-radius:.35rem;background:var(--surface-2);color:var(--doux);border:1px solid var(--trait)}
.raccourcis{display:flex;flex-wrap:wrap;gap:.35rem}
.raccourcis button{height:1.9rem;padding:0 .65rem;border-radius:1rem;border:1px solid var(--trait);background:var(--surface-2);font-size:.8rem;font-weight:500}
.raccourcis button:hover{border-color:var(--tc);color:var(--encre)}

.nouveaute{background:var(--surface);border:1px solid var(--trait);border-radius:.85rem;padding:1rem 1.1rem;display:grid;gap:.35rem}
.nouveaute .quand{font:500 .7rem/1 var(--f-large);letter-spacing:.1em;text-transform:uppercase;color:var(--doux)}
.nouveaute b{font-weight:600;font-size:1.02rem}
.nouveaute p{margin:0;color:var(--doux);font-size:.93rem;line-height:1.55;max-width:70ch}

.barre-etat{display:flex;justify-content:space-between;gap:1rem;padding:.45rem 2rem;text-overflow:ellipsis;border-top:1px solid var(--trait);background:var(--rail);font-size:.78rem;color:var(--doux);white-space:nowrap;overflow:hidden}
.point{display:inline-block;width:.45rem;height:.45rem;border-radius:50%;background:var(--ok);margin-right:.45rem;vertical-align:.1rem}
.app.hors-ligne .barre-etat{background:color-mix(in srgb,var(--attention) 16%,var(--rail));color:var(--encre)}
.app.hors-ligne .point{background:var(--attention)}

/* ---------- panneau latéral ---------- */
.voile{position:fixed;inset:0;background:rgba(6,20,32,.35);z-index:20}
.panneau{position:fixed;top:0;right:0;bottom:0;width:min(28rem,100%);background:var(--surface);border-left:1px solid var(--trait);box-shadow:var(--ombre-forte);z-index:21;display:flex;flex-direction:column;animation:glisse .3s var(--ease)}
@keyframes glisse{from{transform:translateX(30px);opacity:0}}
.panneau-tete{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.2rem;border-bottom:1px solid var(--trait)}
.panneau-tete h3{margin:0;font:600 1.15rem/1.2 var(--f)}
.panneau-corps{flex:1;overflow:auto;padding:1.1rem 1.2rem 1.5rem;display:grid;gap:1rem;align-content:start}
.panneau-corps h4{margin:.4rem 0 0;font-weight:600;font-size:1rem}
.panneau-corps p{margin:0;color:var(--doux);line-height:1.6}
.qr{border:1px solid var(--trait);border-radius:.75rem;background:var(--surface-2)}
.qr summary{padding:.85rem 1rem;font-weight:500;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.qr summary::after{content:"+";color:var(--doux);font-weight:400}
.qr[open] summary::after{content:"−"}
.qr p{padding:0 1rem .95rem}
.reglage{display:grid;gap:.5rem}
.reglage > span{font-weight:500}
.reglage small{color:var(--doux)}
.segment{display:inline-flex;flex-wrap:wrap;background:var(--surface-2);border:1px solid var(--trait);border-radius:.65rem;padding:.2rem;gap:.15rem}
.segment button{height:2.3rem;padding:0 .9rem;border:0;border-radius:.5rem;background:none;font-weight:500;font-size:.9rem;color:var(--doux)}
.segment button[aria-pressed="true"]{background:var(--bleu);color:#fff}
.interrupteur{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.interrupteur input{width:2.6rem;height:1.5rem;accent-color:var(--bleu)}
.infos{font:400 .82rem/1.6 var(--f-mono);color:var(--doux);border-top:1px solid var(--trait);padding-top:.9rem}

/* ---------- recherche ---------- */
.palette{position:fixed;inset:0;background:rgba(6,20,32,.35);z-index:30;display:flex;justify-content:center;align-items:flex-start;padding:12vh 1rem 1rem}
.pal{width:min(38rem,100%);background:var(--surface);border:1px solid var(--trait);border-radius:1rem;box-shadow:var(--ombre-forte);overflow:hidden}
.pal-champ{display:flex;align-items:center;gap:.7rem;padding:0 1rem;border-bottom:1px solid var(--trait);color:var(--doux)}
.pal-champ input{flex:1;height:3.4rem;border:0;background:none;font-size:1.08rem;outline:none;min-width:0;color:var(--encre)}
.pal-res{max-height:22rem;overflow:auto;padding:.4rem}
.pal-groupe{font:500 .66rem/1 var(--f-large);letter-spacing:.12em;text-transform:uppercase;color:var(--doux);padding:.8rem .7rem .4rem}
.pal-ligne{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.8rem;align-items:center;width:100%;padding:.55rem .7rem;border:0;border-radius:.55rem;background:none;text-align:left}
.pal-ligne.sel,.pal-ligne:hover{background:var(--accent-doux)}
.pal-ligne .ti{width:1.9rem;height:1.9rem;border-radius:.45rem}
.pal-ligne .ti [data-ic]{width:1rem;height:1rem}
.pal-ligne small{display:block;color:var(--doux);font-size:.8rem;margin-top:.1rem}
.pal-ligne em{font-style:normal;color:var(--doux);font-size:.78rem}
.pal-vide{padding:1.2rem 1rem;color:var(--doux)}
.pal-pied{display:flex;gap:1.2rem;flex-wrap:wrap;padding:.6rem 1rem;border-top:1px solid var(--trait);font-size:.78rem;color:var(--doux)}

/* ---------- bienvenue ---------- */
.bienvenue{position:fixed;inset:0;background:rgba(6,20,32,.45);z-index:40;display:grid;place-items:center;padding:1rem}
.bv-carte{width:min(32rem,100%);background:var(--surface);border-radius:1.1rem;box-shadow:var(--ombre-forte);overflow:hidden}
.bv-etape{padding:2rem 1.8rem 1.2rem;display:grid;gap:.8rem;min-height:15rem;align-content:start}
.bv-illu{width:3.4rem;height:3.4rem;border-radius:.9rem;background:var(--accent-doux);color:var(--accent);display:grid;place-items:center}
.bv-illu [data-ic]{width:1.7rem;height:1.7rem}
.bv-etape h3{margin:.3rem 0 0;font:600 1.35rem/1.2 var(--f);letter-spacing:-.01em}
.bv-etape p{margin:0;color:var(--doux);line-height:1.6}
.bv-pied{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.4rem;border-top:1px solid var(--trait);background:var(--surface-2)}
.bv-points{display:flex;gap:.4rem}
.bv-points i{width:.5rem;height:.5rem;border-radius:50%;background:var(--trait-fort)}
.bv-points i.on{background:var(--bleu);width:1.3rem;border-radius:.3rem}
.bv-btns{display:flex;gap:.5rem}

.toast{position:fixed;left:50%;bottom:3rem;transform:translateX(-50%);background:var(--encre);color:var(--fond);padding:.75rem 1.1rem;border-radius:.7rem;box-shadow:var(--ombre-forte);z-index:60;font-size:.93rem;max-width:calc(100% - 2rem)}

@media (max-width:640px){
  .ligne{grid-template-columns:auto minmax(0,1fr)}
  .ligne .act{grid-column:2}
}
@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr)}
  .rail{display:none}
  .entete,.defile{padding-inline:1rem}
  .barre-etat{padding-inline:1rem}
  .recherche-btn{min-width:0;flex:1}
  .recherche-btn .rb-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .recherche-btn kbd{display:none}
  .entete-actions{width:100%}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}