/* Jetons de couleur : clair par défaut, sombre selon le système ou selon le
   thème de Teams (data-theme posé par app.js), contraste élevé pour le mode
   « contraste » de Teams. */
:root{
  color-scheme:light;
  --navy:#14274A;--navy-texte:#fff;--navy-doux:#D8E0EC;--marque:#B9D9C8;--souligne:#9ED7BA;
  --green:#2E7D5B;--green-soft:#E3F1EA;--amber:#8A560F;--amber-soft:#FCF1DD;--red:#9B2C2C;--red-soft:#FBE4E4;
  --blue:#1F4E9C;--blue-soft:#E4ECFA;--paper:#F2F4F7;--card:#fff;--champ:#fff;--ink:#1B2230;--muted:#5A6474;--line:#DCE1E8;
  --focus:#1F4E9C;--sur-principal:#fff;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --navy:#0F2244;--navy-doux:#B8C4D6;
    --green:#5DBB8E;--green-soft:#16352A;--amber:#E9B45E;--amber-soft:#3A2A10;--red:#F08A8A;--red-soft:#3D1A1A;
    --blue:#8AB4F8;--blue-soft:#172A4A;--paper:#0C1422;--card:#151F33;--champ:#0F1828;--ink:#E6EAF0;--muted:#9BA7B9;--line:#2A3650;
    --focus:#8AB4F8;--sur-principal:#08140E;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --navy:#0F2244;--navy-doux:#B8C4D6;
  --green:#5DBB8E;--green-soft:#16352A;--amber:#E9B45E;--amber-soft:#3A2A10;--red:#F08A8A;--red-soft:#3D1A1A;
  --blue:#8AB4F8;--blue-soft:#172A4A;--paper:#0C1422;--card:#151F33;--champ:#0F1828;--ink:#E6EAF0;--muted:#9BA7B9;--line:#2A3650;
  --focus:#8AB4F8;--sur-principal:#08140E;
}
:root[data-theme="contrast"]{
  color-scheme:dark;
  --navy:#000;--navy-doux:#fff;--marque:#fff;--souligne:#FFFF00;
  --green:#3FF23F;--green-soft:#000;--amber:#FFFF00;--amber-soft:#000;--red:#FF6B6B;--red-soft:#000;
  --blue:#1AEBFF;--blue-soft:#000;--paper:#000;--card:#000;--champ:#000;--ink:#fff;--muted:#fff;--line:#fff;
  --focus:#FFFF00;--sur-principal:#000;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 -apple-system,"Segoe UI",Helvetica,Arial,sans-serif}
a{color:var(--blue)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
h2:focus,h2:focus-visible{outline:none}

/* Barre de chargement : visible seulement si une requête traîne. */
.charge{position:fixed;top:0;left:0;right:0;height:3px;z-index:10;background:linear-gradient(90deg,transparent,var(--souligne),transparent);background-size:40% 100%;background-repeat:no-repeat;animation:glisse 1s linear infinite}
@keyframes glisse{from{background-position:-40% 0}to{background-position:140% 0}}
@media (prefers-reduced-motion:reduce){.charge{animation:none;background:var(--souligne)}}

header{background:var(--navy);color:var(--navy-texte);padding:1.4rem 1rem 0}
.entete{max-width:66rem;margin:0 auto;display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}
header .marque{margin:0 0 .3rem;font-size:.8rem;color:var(--marque);font-weight:700}
header h1{margin:0 0 .6rem;font-size:1.25rem;line-height:1.2}
.moi{text-align:right;color:var(--navy-doux);font-size:.9rem}
.moi p{margin:0}
button.lien-clair{background:none;border:0;padding:.2rem 0;color:var(--navy-doux);text-decoration:underline;font-size:.85rem}
nav{max-width:66rem;margin:0 auto;display:flex;gap:1.2rem}
nav a{color:var(--navy-texte);text-decoration:none;padding:.6rem 0;border-bottom:3px solid transparent;font-weight:600}
nav a.actif{border-bottom-color:var(--souligne)}
/* Dans Teams, l'application a déjà son nom en haut : l'en-tête se fait discret. */
body.teams header{padding-top:.6rem}
body.teams header .marque{display:none}
body.teams header h1{font-size:1rem;margin-bottom:.3rem}

main{max-width:66rem;margin:0 auto;padding:1.25rem 1rem}
.carte{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:1.1rem 1.25rem;margin:0 0 1rem}
.carte.etroite{max-width:34rem}
h2{font-size:1.15rem;margin:0 0 .6rem}
h3{font-size:1rem;margin:0 0 .5rem}
h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:1.3rem 0 .4rem}
.titre-ligne{display:flex;justify-content:space-between;align-items:center;gap:.8rem;flex-wrap:wrap;margin:0 0 .6rem}
.titre-ligne h2{margin:0}
.retour{font-size:.9rem;text-decoration:none;font-weight:600}
main > section > p:first-child{margin:0 0 .6rem}

label{display:block;margin:0 0 .9rem;font-weight:600}
label .aide{display:block;font-weight:400;font-size:.86rem;margin:.1rem 0 .3rem}
input,textarea,select{display:block;width:100%;margin-top:.25rem;padding:.5rem .6rem;border:1px solid var(--line);border-radius:6px;font:inherit;color:var(--ink);background:var(--champ)}
textarea{min-height:4.5rem;resize:vertical}
[aria-invalid="true"]{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}
.champ-msg{display:block;color:var(--red);font-weight:400;font-size:.86rem;margin:.25rem 0 0}
.oblig{color:var(--red)}
.aide{color:var(--muted);font-size:.9rem}

button,.bouton{display:inline-block;font:inherit;line-height:1.3;padding:.55rem .95rem;border-radius:6px;border:1px solid var(--navy);background:var(--card);color:var(--ink);cursor:pointer;text-decoration:none;font-weight:600}
:root[data-theme="dark"] button,:root[data-theme="dark"] .bouton{border-color:var(--muted)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) button,:root:not([data-theme="light"]) .bouton{border-color:var(--muted)}}
button.principal,.bouton.principal{background:var(--green);border-color:var(--green);color:var(--sur-principal)}
button.attention{border-color:var(--amber);color:var(--amber)}
button.danger{background:var(--red);border-color:var(--red);color:var(--card)}
button.discret{border-color:var(--line);color:var(--muted);font-weight:400}
button:disabled{opacity:.45;cursor:not-allowed}
button[aria-busy="true"]{cursor:progress;opacity:.7}
.actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:.8rem 0 0}
.actions.haut{margin:0}
.actions.collant{position:sticky;bottom:0;background:var(--card);padding:.6rem 0 .2rem;border-top:1px solid var(--line)}
.statut{color:var(--muted);font-size:.86rem}
.statut.sale{color:var(--amber);font-weight:600}

.types{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
.types button{text-align:left;padding:.9rem 1rem;font-weight:400}
.types button strong{display:block;margin:0 0 .15rem}
.types button span{color:var(--muted);font-size:.88rem}

.groupe{margin:0 0 1.2rem}
.groupe h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0 0 .45rem}
.liste{display:grid;gap:.5rem}
.liste a{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.8rem 1rem;border:1px solid var(--line);border-radius:8px;color:inherit;text-decoration:none}
.liste a:hover{border-color:var(--blue)}
.liste .compte{color:var(--muted);font-size:.88rem;text-align:right}
.liste .prochaine{font-size:.72rem;font-weight:700;color:var(--green);background:var(--green-soft);padding:.1rem .45rem;border-radius:99px;margin-left:.5rem;vertical-align:middle}

.tbl{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.93rem}
th,td{text-align:left;padding:.55rem .6rem;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
td a{font-weight:600;text-decoration:none}
tbody tr:hover{background:var(--paper)}
td.quand{white-space:nowrap;color:var(--muted)}

.pastille{display:inline-block;margin:0 0 .3rem;padding:.15rem .6rem;border-radius:99px;font-size:.78rem;font-weight:700;background:var(--paper);color:var(--muted);white-space:nowrap}
.pastille.complet{background:var(--blue-soft);color:var(--blue)}
.pastille.valide{background:var(--green-soft);color:var(--green)}
.pastille.a_reprendre{background:var(--amber-soft);color:var(--amber)}
.pastille.approuve{background:var(--green);color:var(--sur-principal)}
:root[data-theme="contrast"] .pastille{border:1px solid currentColor}

.dossier-entete{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.dossier-entete h2{margin:.1rem 0 .2rem}
.dossier-entete p{margin:0}

/* Le cycle du dossier, en quatre étapes ; « À reprendre » est un détour. */
.etapes{list-style:none;display:flex;gap:.3rem;margin:1rem 0 .4rem;padding:0;counter-reset:etape;flex-wrap:wrap}
.etapes li{flex:1 1 8rem;font-size:.82rem;color:var(--muted);border-top:4px solid var(--line);padding:.35rem .1rem 0}
.etapes li.faite{border-top-color:var(--green);color:var(--ink)}
.etapes li.courante{border-top-color:var(--green);color:var(--ink);font-weight:700}
.etapes li.detour{border-top-color:var(--amber);color:var(--amber);font-weight:700}

.colonnes{display:grid;gap:1rem}
@media(min-width:900px){.colonnes{grid-template-columns:1fr 1fr;align-items:start}}
.msg{padding:.6rem .85rem;border-radius:6px;margin:.5rem 0 0;font-size:.92rem}
.msg.erreur{background:var(--red-soft);color:var(--red)}
.msg.avert{background:var(--amber-soft);color:var(--amber)}
.msg.ok{background:var(--green-soft);color:var(--green)}
.msg.info{background:var(--blue-soft);color:var(--blue)}
:root[data-theme="contrast"] .msg{border:1px solid currentColor}
.msg ul{margin:.3rem 0 0;padding-left:1.2rem}
pre.apercu{white-space:pre-wrap;background:var(--paper);color:var(--ink);padding:.9rem;border-radius:6px;font:.92rem/1.55 Georgia,"Times New Roman",serif;max-height:26rem;overflow:auto;margin:0}
pre.apercu.vide{font-family:inherit;color:var(--muted);font-size:.9rem}
.sommaire{margin:0;display:grid;grid-template-columns:minmax(7rem,auto) 1fr;gap:.3rem .8rem;font-size:.92rem}
.sommaire dt{color:var(--muted)}
.sommaire dd{margin:0;white-space:pre-line}
#liens{margin:.6rem 0 0}
#liens a{display:block;margin:.35rem 0;font-weight:600;color:var(--green)}
.commentaires{list-style:none;margin:0 0 .8rem;padding:0}
.commentaires li{border-left:3px solid var(--line);padding:.3rem .7rem;margin:0 0 .5rem;font-size:.92rem;white-space:pre-line}
.commentaires li.renvoi{border-left-color:var(--amber)}
.commentaires li.approbation{border-left-color:var(--green)}
.commentaires .qui{color:var(--muted);font-size:.82rem;white-space:normal}
footer{max-width:66rem;margin:0 auto;padding:1rem 1rem 2rem;color:var(--muted);font-size:.85rem}
[hidden]{display:none!important}
@media (max-width:560px){
  .entete{flex-direction:column;gap:.2rem}
  .moi{text-align:left}
  .carte{padding:1rem}
}