@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@600;800;900&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap");
*{box-sizing:border-box}
html{height:100%;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100%;background:var(--fond);color:var(--texte);font:400 1rem/1.6 var(--f-texte)}
h1,h2,h3{font-family:var(--f-titre);font-weight:800;line-height:1.12;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,5vw,3.5rem);font-weight:900}h2{font-size:1.5rem}h3{font-size:1.125rem}
a{color:var(--accent-texte)}
:focus-visible{outline:3px solid var(--texte);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saut{position:absolute;left:8px;top:-60px;background:var(--texte);color:var(--fond);padding:10px 14px;z-index:20}
.saut:focus{top:8px}
.ref{font-family:var(--f-ref);font-size:.8125rem}
.plaque{clip-path:polygon(0 0,calc(100% - var(--coupe)) 0,100% var(--coupe),100% 100%,0 100%)}
.hazard{height:10px;background:repeating-linear-gradient(-45deg,var(--rouge) 0 10px,#1C1F23 10px 20px)}
svg.ic{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* boutons : un seul bouton plein par écran (action principale) */
.btn{font:600 .9375rem/1 var(--f-texte);min-height:2.5rem;padding:0 1.1rem;border:2px solid var(--texte);background:var(--texte);color:var(--fond);border-radius:var(--r);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.5rem}
.btn{text-decoration:none}.btn:hover{opacity:.88}
.btn.rouge{background:var(--accent);border-color:var(--accent);color:var(--sur-accent)}
.btn.vide{background:transparent;color:var(--texte);border-color:var(--bord-fort)}.btn.vide:hover{background:var(--puce);opacity:1}
.btn.petit{min-height:2rem;padding:0 .75rem;font-size:.875rem}
.btn[aria-pressed=true]{background:var(--texte);color:var(--fond)}
.champ{display:block;margin-bottom:1rem}
.champ>span{display:block;font-weight:600;font-size:.875rem;margin-bottom:.375rem}
.champ input,.champ textarea,.champ select{width:100%;padding:.7rem .75rem;border:2px solid var(--bord-fort);background:var(--carte);font:inherit;border-radius:var(--r);color:var(--texte)}
.marque{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:inherit}
.marque img{width:2.25rem;height:2.25rem}
.marque b{font:900 1.5rem/1 var(--f-titre);display:block}
.marque small{font:500 .625rem/1.2 var(--f-texte);letter-spacing:.14em;text-transform:uppercase;display:block;margin-top:3px}
.aide{font-size:.875rem;color:var(--texte-2);margin:.75rem 0 0}
.etiq{font:500 .75rem var(--f-ref);background:var(--puce);padding:.2rem .6rem;border-radius:var(--r);color:var(--texte)}

/* connexion : seul endroit où la bande hachurée apparaît */
.login{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.login .gauche{background:#1C1F23;color:#fff;padding:3rem 3.5rem;display:flex;flex-direction:column;justify-content:space-between;position:relative}
.login .gauche .hazard{position:absolute;right:0;bottom:0;width:11rem}
.login .gauche p{max-width:46ch;color:#D7DADE}
.login .gauche h1{max-width:12ch;margin:3.5rem 0 1.25rem}
.login .droite{display:grid;place-items:center;padding:2rem}
.carte{background:var(--carte);width:min(26.5rem,100%);padding:2.25rem;border:1px solid var(--bord)}
.carte h2{margin-bottom:.4rem}.carte .sous{color:var(--texte-2);margin:0 0 1.5rem}
.carte .btn{width:100%;min-height:2.75rem}

/* structure */
.app{height:100vh;display:grid;grid-template-columns:17.5rem 1fr}
.app.replie{grid-template-columns:0 1fr}.app.replie .lat{visibility:hidden}
.lat{background:var(--lat);color:var(--lat-texte);display:flex;flex-direction:column;min-height:0}
.lat .marque{padding:1.25rem;color:#fff}
.lat .nouveau{margin:.25rem .75rem .5rem}
.lat nav{padding:.5rem .75rem;display:flex;flex-direction:column;gap:2px;overflow:auto;flex:1}
.lat .titre-liste{font:600 .75rem var(--f-texte);color:var(--lat-texte-2);padding:1rem .625rem .375rem}
.lat a.item{color:var(--lat-texte);text-decoration:none;padding:.55rem .625rem;border-radius:var(--r);font-size:.9375rem;border-left:3px solid transparent;display:flex;align-items:center;gap:.6rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lat a.rec{display:block}.lat a.item:hover{background:var(--lat-survol)}
.lat a.item[aria-current]{background:var(--lat-survol);border-left-color:var(--rouge);color:#fff}
.lat :focus-visible{outline-color:#fff}
.lat .profil{border-top:1px solid #353a41;padding:.875rem 1.125rem;font-size:.875rem}
.lat .profil small{display:block;color:var(--lat-texte-2)}
.lat .profil a{color:var(--lat-texte);font-size:.8125rem}
.princ{display:flex;flex-direction:column;min-height:0;min-width:0}
.haut{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.75rem 2rem;border-bottom:1px solid var(--bord);background:var(--carte)}
.haut .g{display:flex;align-items:center;gap:.75rem;min-width:0}
.haut h1{font-size:1.25rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icobtn{background:none;border:1px solid transparent;color:var(--texte);width:2.25rem;height:2.25rem;border-radius:var(--r);cursor:pointer;display:grid;place-items:center}
.icobtn:hover{background:var(--puce)}
.fil,.page{flex:1;overflow:auto;padding:2rem}
.col{width:min(48.75rem,100%);margin:0 auto;display:flex;flex-direction:column;gap:1.75rem}
.page>*{max-width:61rem}.page .sous{color:var(--texte-2);margin:.25rem 0 1.5rem}

/* conversation */
.q{align-self:flex-end;background:var(--texte);color:var(--fond);padding:.75rem 1rem;max-width:80%;border-radius:var(--r)}
.r{background:var(--carte);border:1px solid var(--bord)}
.r>header{display:flex;justify-content:space-between;align-items:center;gap:.5rem;flex-wrap:wrap;padding:.625rem 1.125rem;background:var(--puce);font-size:.8125rem;color:var(--texte-2)}
.r .resume{margin:1.125rem;padding:.875rem 1rem;border-left:5px solid var(--accent);background:var(--resume)}
.r .resume h2{font-size:.9375rem;margin-bottom:.25rem}.r .resume p{margin:0}
.r .corps{padding:0 1.125rem .375rem;max-width:68ch}
.r .corps h3{margin:1.125rem 0 .375rem}.r .corps p,.r .corps li{margin:0 0 .625rem}
.sources{padding:.25rem 1.125rem 1rem}
.sources h3{font-size:.9375rem;margin-bottom:.5rem}
.sources details{border:1px solid var(--bord);margin-bottom:.4rem;background:var(--carte)}
.sources summary{cursor:pointer;padding:.55rem .75rem;list-style:none;display:flex;justify-content:space-between;gap:.75rem;align-items:center;min-height:2.25rem}
.sources summary::-webkit-details-marker{display:none}
.sources summary::after{content:"+";font:600 1.1rem var(--f-texte);color:var(--texte-2)}
.sources details[open] summary::after{content:"−"}
.sources details>div{padding:.25rem .75rem .75rem;font-size:.9375rem;color:var(--texte-2)}
.conf{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;color:var(--texte)}
.conf i{width:.7rem;height:.7rem;border-radius:50%;background:var(--ok);display:inline-block}
.conf.moyen i{background:var(--balise);box-shadow:0 0 0 1px #8a6a00}
.conf.bas i{background:transparent;border:2px solid var(--texte);border-radius:0;transform:rotate(45deg)}
.cadrage{border-top:1px solid var(--bord);padding:.875rem 1.125rem;background:var(--attention);border-left:5px solid var(--balise)}
.cadrage p{margin:0 0 .625rem;font-weight:600}
.cadrage .rep{display:flex;gap:.5rem;flex-wrap:wrap}
.pied-r{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;padding:.625rem 1.125rem;border-top:1px solid var(--bord);font-size:.8125rem;color:var(--texte-2)}
.pied-r .sp{flex:1}
.statut{color:var(--texte-2);font-size:.9375rem;display:flex;gap:.6rem;align-items:center}
.statut::before{content:"";width:.7rem;height:.7rem;border:2px solid var(--bord-fort);border-top-color:transparent;border-radius:50%;animation:tourne .9s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}
.saisie{border-top:1px solid var(--bord);background:var(--carte);padding:1rem 2rem}
.saisie form{width:min(48.75rem,100%);margin:0 auto;display:flex;gap:.625rem;align-items:flex-end}
.saisie textarea{flex:1;resize:none;min-height:3rem;max-height:10rem;padding:.7rem .75rem;border:2px solid var(--bord-fort);background:var(--carte);color:var(--texte);font:inherit;border-radius:var(--r)}
.saisie .btn{min-height:3rem}
.saisie .note{width:min(48.75rem,100%);margin:.5rem auto 0;font-size:.8125rem;color:var(--texte-2)}
.accueil{width:min(48.75rem,100%);margin:6vh auto 0}
.accueil h1{margin-bottom:.75rem}.accueil>p{color:var(--texte-2);max-width:56ch;margin:0 0 1.75rem}
.sugg{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.sugg a{display:block;padding:.9rem 1rem;background:var(--carte);border:1px solid var(--bord);color:var(--texte);text-decoration:none;border-left:4px solid var(--bord-fort)}
.sugg a:hover{border-left-color:var(--accent);background:var(--puce)}
.sugg small{display:block;color:var(--texte-2);font-size:.8125rem;margin-top:.15rem}

/* pages */
.depot{border:2px dashed var(--bord-fort);padding:1.5rem;text-align:center;background:var(--carte);color:var(--texte-2)}
.depot.on{border-color:var(--accent);background:var(--attention)}
.prog{height:.4rem;background:var(--puce);margin-top:.75rem}.prog>i{display:block;height:100%;background:var(--accent);width:0}
table{width:100%;border-collapse:collapse;background:var(--carte);border:1px solid var(--bord)}
th,td{text-align:left;padding:.7rem .875rem;border-bottom:1px solid var(--bord);font-size:.9375rem;vertical-align:top}
th{background:var(--puce);font:600 .8125rem var(--f-texte)}
.carte-v{background:var(--carte);border:1px solid var(--bord);padding:1.125rem;margin-bottom:1rem}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:.875rem;margin:.75rem 0}
.compare div{padding:.75rem;background:var(--resume);border:1px solid var(--bord);font-size:.9375rem}
.compare b{display:block;font-size:.8125rem;margin-bottom:.25rem}
.liste-h a{display:block;padding:.9rem 1rem;background:var(--carte);border:1px solid var(--bord);margin-bottom:.5rem;color:var(--texte);text-decoration:none}
.liste-h a:hover{background:var(--puce)}.liste-h small{display:block;color:var(--texte-2)}
dialog{border:2px solid var(--texte);background:var(--carte);color:var(--texte);padding:1.5rem;max-width:26rem;border-radius:var(--r)}
dialog::backdrop{background:rgba(0,0,0,.55)}
dialog .act{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1.25rem}
.toast{position:fixed;left:50%;bottom:5.5rem;transform:translateX(-50%);background:var(--texte);color:var(--fond);padding:.7rem 1.1rem;border-radius:var(--r);font-weight:600;z-index:30}

/* barre d'onglets mobile */
.onglets{display:none}
@media(max-width:860px){
 html{font-size:106.25%}
 .login{grid-template-columns:1fr}.login .gauche{padding:1.75rem}.login .gauche h1{margin:1.75rem 0 .75rem}
 .app{grid-template-columns:1fr;height:100dvh;padding-bottom:0}
 .app.replie{grid-template-columns:1fr}
 .lat{flex-direction:row;align-items:center;min-height:0}.lat nav,.lat .profil,.lat .nouveau{display:none}
 .lat .marque{padding:.625rem 1rem}.lat .marque small{display:none}
 .princ{padding-bottom:calc(3.75rem + env(safe-area-inset-bottom))}
 .haut,.saisie,.fil,.page{padding-left:1rem;padding-right:1rem}
 .compare,.sugg{grid-template-columns:1fr}
 .btn,.btn.petit{min-height:2.75rem}.icobtn{width:2.75rem;height:2.75rem}.sources summary{min-height:2.75rem}
 #menu,.etiq,.saisie .note{display:none}
 .onglets{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;background:var(--lat);padding-bottom:env(safe-area-inset-bottom);z-index:10;border-top:3px solid var(--rouge)}
 .onglets a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;min-height:3.5rem;color:var(--lat-texte-2);text-decoration:none;font-size:.75rem;font-weight:600}
 .onglets a[aria-current]{color:#fff}
 .onglets :focus-visible{outline-color:#fff;outline-offset:-4px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}