/* Cas d'usage IA — feuille de style unique.
   Base : maquette fournie (composants .app, .sidebar, .page-head, .table, .steps, .panel, .login…).
   Ajouts : badges, étapes qui glissent, détail, REX, messages, responsive.
   Aucune ressource distante : les polices Barlow / Barlow Condensed sont utilisées si elles sont installées
   sur le poste, sinon une police système proche prend le relais. */

:root{
  --marine:#0A2240; --marine-2:#13305A; --marine-line:#24416A;
  --ocean:#6BABC5; --ocean-dark:#1F6E8C;
  --bg:#F6F8FA; --white:#fff; --line:#E1E6EC; --input:#C3CCD6;
  --muted:#5B6B80; --muted-light:#8FA3BB; --on-marine:#C9D3DF;
  --amber-bg:#FBEBC8; --amber:#6E4300; --neutral-bg:#E8EDF2;
  --green-bg:#DDF0E4; --green:#14532D; --ocean-bg:#DCEBF3; --ocean-ink:#0F4C66;
  --error-bg:#FCEDEC; --error:#8C1D18; --error-line:#B3261E;
  --sans:'Barlow','Helvetica Neue',Arial,sans-serif;
  --cond:'Barlow Condensed','Arial Narrow','Helvetica Neue',Arial,sans-serif;
  --pad:48px; --barre-mobile:72px; --ligne:56px; --champ:36px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);font-family:var(--sans);color:var(--marine)}
a{color:var(--ocean-dark);text-decoration:none}
a:hover{color:var(--marine);text-decoration:underline}
input::placeholder,textarea::placeholder{color:#8A97A8}
h1,h2,h3{margin:0}
[hidden]{display:none !important}
:focus-visible{outline:3px solid rgba(107,171,197,.7);outline-offset:2px}

/* Brand */
.brand{display:flex;flex-direction:column;line-height:1}
.brand__kicker{font:600 10px var(--sans);letter-spacing:.22em;color:var(--ocean);text-transform:uppercase}
.brand__name{font:700 26px var(--cond);letter-spacing:.06em;text-transform:uppercase;margin-top:6px;color:#fff;white-space:nowrap}

/* Titles */
.title{font:700 40px var(--cond);text-transform:uppercase;letter-spacing:.02em;text-wrap:balance}
.title small{display:block;font:500 16px var(--sans);text-transform:none;letter-spacing:0;color:var(--muted);margin-top:8px}
.title-bar{width:56px;height:4px;background:var(--ocean);margin-top:14px}
.eyebrow{font:600 12px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ocean-dark)}

/* App shell */
.app{display:grid;grid-template-columns:280px minmax(0,1fr);min-height:100vh}
/* Le défilement est porté par le panneau, pas par la barre : un `overflow` sur `.sidebar` couperait le menu du compte (23). */
.sidebar{background:var(--marine);color:#fff;display:flex;flex-direction:column;padding:32px 24px;gap:36px;position:sticky;top:0;height:100vh}
.sidebar__bar{display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative}
.sidebar__panel{display:flex;flex-direction:column;gap:36px;flex:1;min-height:0;overflow-y:auto;margin:-6px;padding:6px} /* marge rendue : le contour de focus n'est pas coupé */
.nav-toggle{display:none;height:40px;padding:0 14px;border:1px solid var(--marine-line);background:transparent;color:#fff;font:600 13px var(--sans);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;border-radius:4px}
.nav{display:flex;flex-direction:column;gap:2px;font:500 15px var(--sans)}
.nav a{color:var(--on-marine);padding:9px 14px;text-decoration:none}
.nav a:hover{background:var(--marine-2);color:#fff}
.nav a.is-active{background:var(--ocean);color:var(--marine);font-weight:600}
.avatar{width:36px;height:36px;flex:none;border-radius:50%;background:var(--ocean);color:var(--marine);display:flex;align-items:center;justify-content:center;font:700 13px var(--sans)}
/* Menu du compte derrière l'avatar (23) : <details>, utilisable sans JavaScript ; app.js le ferme (clic dehors, Échap, lien).
   Sur mobile, le panneau se place par rapport à `.sidebar__bar` (sous « Menu ») ; en bureau, sous l'avatar (voir plus bas). */
.user-menu{flex:none;margin-left:auto}
.user-menu summary{display:block;list-style:none;cursor:pointer;border-radius:50%}
.user-menu summary::-webkit-details-marker{display:none}
.user-menu summary:hover .avatar,.user-menu[open] .avatar{box-shadow:0 0 0 3px var(--marine),0 0 0 5px var(--ocean)}
.user-menu__panel{position:absolute;top:calc(100% + 10px);right:0;z-index:30;width:230px;background:#fff;border:1px solid var(--line);border-radius:4px;box-shadow:0 12px 32px rgba(10,34,64,.22);padding:6px 0;color:var(--marine)}
.user-menu__panel::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px} /* (29) pont sur l'espace sous l'avatar : le survol ne se perd pas */
.user-menu__head{display:flex;flex-direction:column;gap:2px;padding:12px 16px;border-bottom:1px solid var(--line);line-height:1.2}
.user-menu__head b{font:600 14px var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-menu__head small{font:400 12px var(--sans);color:var(--muted)}
.user-menu__item{display:block;width:100%;padding:10px 16px;font:500 14px var(--sans);color:var(--marine);background:none;border:0;text-align:left;cursor:pointer;text-decoration:none}
.user-menu__item:hover{background:var(--bg);color:var(--marine);text-decoration:none}
.user-menu__sep{height:1px;border:0;background:var(--line);margin:6px 0}
.user-menu form{margin:0}
/* Bureau (23) : le titre garde toute la largeur de la barre. Au-dessus de 1100 px, l'avatar est sur la ligne du surtitre ;
   de 821 à 1100 px (barre de 240 px), il passe seul sur une ligne au-dessus. Le menu s'ouvre alors sous l'avatar. */
@media (min-width:821px){
  .sidebar__bar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 10px}
  .brand{display:contents}
  .brand__kicker,.brand__name{line-height:1}
  .brand__kicker{grid-column:1;grid-row:1;min-width:0;white-space:nowrap}
  .user-menu{grid-column:2;grid-row:1;position:relative}
  .brand__name{grid-column:1/-1;grid-row:2}
}
@media (min-width:1101px){
  .brand__kicker{margin-right:-.22em} /* l'espacement après la dernière lettre ne compte pas */
}
@media (min-width:821px) and (max-width:1100px){
  .user-menu{grid-column:1/-1;grid-row:1;justify-self:end;margin-bottom:10px}
  .brand__kicker{grid-column:1/-1;grid-row:2}
  .brand__name{grid-row:3}
  .user-menu__panel{width:204px} /* barre de 240 px : le menu ne sort pas de l'écran */
}
}
.main{display:flex;flex-direction:column;min-width:0}
.page-head{padding:36px var(--pad) 48px;background:#fff;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.page-head__actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.page-head__meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;align-items:center}
.content{padding:32px var(--pad);display:flex;flex-direction:column;gap:24px}
.notices{padding:20px var(--pad) 0;display:flex;flex-direction:column;gap:8px}
.notices:empty{display:none}
.notice{border-left:3px solid var(--ocean);background:var(--ocean-bg);color:var(--ocean-ink);padding:10px 14px;font:500 14px var(--sans)}
.notice--success{border-color:#2E8B57;background:var(--green-bg);color:var(--green)}
.notice--error{border-color:var(--error-line);background:var(--error-bg);color:var(--error)}
.notice--warning{border-color:#C98A00;background:var(--amber-bg);color:var(--amber)}

/* Fiche en cours (barre latérale du formulaire) */
.fiche{border:1px solid var(--marine-line);padding:20px;display:flex;flex-direction:column;gap:16px}
.fiche__head{display:flex;flex-direction:column;gap:4px}
.fiche__label{font:600 11px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted-light);white-space:nowrap}
.fiche__code{font:700 22px var(--cond);letter-spacing:.06em;color:var(--ocean);white-space:nowrap}
.fiche__field{display:flex;flex-direction:column;gap:2px}
.fiche__field small{font:500 12px var(--sans);color:var(--muted-light)}
.fiche__field b{font:600 16px var(--sans);overflow-wrap:anywhere}
.fiche__field span{font:400 13px var(--sans);color:var(--on-marine)}
.fiche__bu{display:flex;align-items:center;gap:10px;font:600 13px var(--sans);flex-wrap:wrap}
.fiche__bu .from,.fiche__bu .to{white-space:nowrap}
.fiche__bu .from{border:1px solid var(--ocean);padding:4px 10px}
.fiche__bu .arrow{color:var(--ocean)}
.fiche__bu .to{background:var(--ocean);color:var(--marine);padding:5px 10px}
.progress{height:4px;background:#1C3558}
.progress__bar{height:4px;background:var(--ocean);width:0;transition:width .2s}
.fiche__pct{font:500 12px var(--sans);color:var(--muted-light)}
.fiche__results{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--marine-line);padding-top:16px}
.fiche__results dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:6px 12px;font:400 13px var(--sans)}
.fiche__results dt{color:var(--muted-light)}
.fiche__results dd{margin:0;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.tag{display:inline-block;padding:2px 8px;border-radius:4px;font:600 12px var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap}
/* État d'un coût (§ 5.4) : la couleur est toujours doublée d'un mot */
.tag--rouge{background:var(--error-line);color:#fff}
.tag--orange{background:#B45309;color:#fff}
.tag--vert{background:#2E8B57;color:#fff}
.tag__mot{font-weight:500;opacity:.92}

/* Buttons */
.btn{height:46px;padding:0 24px;border-radius:4px;font:600 15px var(--sans);cursor:pointer;white-space:nowrap;flex:none;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.btn--primary{background:var(--marine);border:1px solid var(--marine);color:#fff}
.btn--primary:hover{background:var(--ocean-dark);border-color:var(--ocean-dark);color:#fff;text-decoration:none}
.btn--outline{background:#fff;border:1px solid var(--marine);color:var(--marine)}
.btn--outline:hover{background:#F3F5F7;text-decoration:none}
.btn--ghost{background:#fff;border:1px solid var(--input);color:var(--marine)}
.btn--ghost:hover{border-color:var(--marine);text-decoration:none}
.btn--danger{background:#fff;border:1px solid var(--error-line);color:var(--error)}
.btn--danger:hover{background:var(--error-bg);text-decoration:none}
.btn--sm{height:42px;padding:0 22px}
.btn--lg{height:54px;font:700 17px var(--cond);letter-spacing:.14em;text-transform:uppercase;width:100%}
.link-btn{background:none;border:0;padding:0;font:inherit;color:var(--ocean-dark);cursor:pointer}
.link-btn:hover{color:var(--marine);text-decoration:underline}
.link-btn--danger{color:var(--error-line)}

/* Form fields */
.field{display:flex;flex-direction:column;gap:8px;font:600 14px var(--sans);min-width:0}
.field > label,.field__label{font:600 14px var(--sans)}
.field--caps{gap:6px;font:600 12px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.input,.select,.textarea{border:1px solid var(--input);border-radius:4px;padding:0 14px;font:400 15px var(--sans);color:var(--marine);background-color:#fff;letter-spacing:0;text-transform:none;width:100%}
.input,.select{height:var(--champ)}
.textarea{padding:12px 14px;min-height:112px;line-height:1.5;resize:vertical}
.select{appearance:none;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230A2240' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.select--multiple{height:auto;padding:8px 10px;background-image:none}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--marine);box-shadow:0 0 0 3px rgba(107,171,197,.35)}
.field--caps .select{height:var(--champ);padding-left:12px}
.field__help{margin:0;font:400 13px/1.5 var(--sans);color:var(--muted)}
.field__help--info{background:var(--ocean-bg);color:var(--ocean-ink);padding:8px 12px;border-left:3px solid var(--ocean)}
.field__help--alert{background:var(--amber-bg);color:var(--amber);padding:8px 12px;border-left:3px solid #C98A00}
.field__frozen{margin:0;font:500 13px var(--sans);color:var(--amber)}
.field__error{margin:0;font:500 13px var(--sans);color:var(--error)}
.field.has-error .input,.field.has-error .select,.field.has-error .textarea,.field.has-invalid .input{border-color:var(--error-line)}
.field.has-error > label,.field.has-error > .field__label{color:var(--error)}
.field.is-readonly .input,.field.is-readonly .select,.field.is-readonly .textarea{background-color:#EEF1F5;color:var(--muted);border-style:dashed}
/* Cases à cocher et boutons radio (widgets Django : <div id><div><label><input>) */
.field .choices > div[id]{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px}
.field .choices > div[id] > div > label{display:flex;gap:10px;align-items:center;font:400 15px var(--sans);border:1px solid var(--line);background:#fff;padding:11px 14px;border-radius:4px;cursor:pointer;min-height:46px}
.field .choices > div[id] > div > label:hover{border-color:var(--input)}
.field .choices > div[id] > div > label:has(input:checked){border-color:var(--marine);background:#F1F6FA;font-weight:600}
.field .choices input{width:18px;height:18px;margin:0;accent-color:var(--marine);flex:none}
.field.is-readonly .choices > div[id] > div > label{background:#EEF1F5;color:var(--muted);cursor:default}

/* Filters + table */
.filters{background:#fff;border:1px solid var(--line);padding:20px 24px;display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap}
.filters .select{min-width:170px}
.filters__actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.table-wrap{background:#fff;border:1px solid var(--line);overflow-x:auto}
.table{width:100%;border-collapse:collapse;min-width:860px}
.table th{background:var(--marine);color:#fff;text-align:left;font:600 12px var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:0 20px;height:var(--ligne);vertical-align:middle;white-space:nowrap}
.table th a{color:#fff;text-decoration:none}
.table th a:hover{color:var(--ocean);text-decoration:none}
.table td{padding:0 20px;height:var(--ligne);border-bottom:1px solid var(--line);font:400 15px var(--sans);vertical-align:middle}
.table tbody tr:hover{background:var(--bg)}
.table tbody tr[data-href]{cursor:pointer}
.table tr.is-archived{opacity:.6}
.table .num{text-align:right;white-space:nowrap}
.table .subject{min-width:200px;text-wrap:pretty;padding-top:10px;padding-bottom:10px}
.table .unknown{color:var(--muted);font-style:italic}
.table .empty{color:#AEB9C6}
.code-link{font:700 17px var(--cond);letter-spacing:.06em;color:var(--marine);border-bottom:2px solid var(--ocean);white-space:nowrap}
.code-link:hover{text-decoration:none;color:var(--ocean-dark)}
.table-foot{padding:14px 20px;font:500 13px var(--sans);color:var(--muted)}
.badge{display:inline-block;padding:4px 10px;font:600 13px var(--sans);white-space:nowrap}
.badge--neutral{background:var(--neutral-bg);color:var(--marine)}
.badge--amber{background:var(--amber-bg);color:var(--amber)}
.badge--green{background:var(--green-bg);color:var(--green)}
.badge--ocean{background:var(--ocean-bg);color:var(--ocean-ink)}
.badge--red{background:var(--error-bg);color:var(--error)}
.badge--large{font-size:15px;padding:6px 14px}
.rex-todo{color:var(--amber);font:600 13px var(--sans);white-space:nowrap}
.rex-ok{color:var(--green);font:600 13px var(--sans);white-space:nowrap}

/* Info + empty state */
.step-mark{flex:none;width:26px;height:26px;display:flex;align-items:center;justify-content:center;font:700 14px var(--cond);background:var(--marine);color:#fff}
.step-mark--off{background:transparent;color:inherit;border:1px solid #AEB9C6}
.info{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);padding:20px 24px}
.info p{margin:0;font:400 15px/1.55 var(--sans);color:#3D4E63;text-wrap:pretty}
.info b{color:var(--marine)}
.empty-state{border:1.5px dashed var(--input);padding:72px 24px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.empty-state strong{font:700 26px var(--cond);text-transform:uppercase;letter-spacing:.04em}
.empty-state span{font:400 15px var(--sans);color:var(--muted)}
.empty-state a{font:600 15px var(--sans);margin-top:4px}

/* Formulaire — étapes, panneaux */
.form-page{background:#fff;flex:1;display:flex;flex-direction:column;min-width:0}
/* Barre unique du formulaire : étapes à gauche, boutons à droite, collée en haut */
.form-bar{position:sticky;top:0;z-index:8;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:stretch;justify-content:space-between;gap:20px;padding:0 var(--pad);min-height:64px}
.form-bar__progress{display:none;position:absolute;left:0;right:0;top:0;height:3px;background:var(--line)}
.form-bar__progress .progress__bar{height:3px;background:var(--marine)}
.form-bar__actions{display:flex;align-items:center;gap:10px;flex:none}
.form-bar__actions .btn{height:40px;padding:0 18px;font-size:14px}
.steps{display:flex;gap:26px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;align-items:stretch}
.steps::-webkit-scrollbar{display:none}
.step{display:flex;gap:10px;align-items:center;padding:0;margin-bottom:-1px;font:500 15px var(--sans);color:var(--muted);white-space:nowrap;flex:none;background:none;border:0;border-bottom:3px solid transparent;cursor:pointer;position:relative}
.step:hover{color:var(--marine)}
.step.is-locked{opacity:.55}
.step.is-active.is-locked{opacity:1}
.step.is-locked .step-mark{border-style:dashed}
.js .form-page [data-suivant][aria-disabled="true"]{opacity:.6}
.step.is-active{border-bottom-color:var(--marine);font-weight:600;color:var(--marine)}
.step.is-done .step-mark{background:var(--ocean-dark);border-color:var(--ocean-dark);color:#fff}
.step.is-done .step-mark--off{background:var(--ocean-dark)}
.step.has-error .step-mark{background:var(--error-line);border-color:var(--error-line);color:#fff}
.step.has-error::after{content:"";position:absolute;top:14px;right:-7px;width:8px;height:8px;border-radius:50%;background:var(--error-line)}
.form-body{background:var(--bg);flex:1;min-width:0}
.slide{padding:32px var(--pad) 40px;display:flex;flex-direction:column;gap:32px;min-width:0}
.slide:focus{outline:none}
.panel{background:#fff;border:1px solid var(--line);padding:32px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px}
.panel h3{font:700 20px var(--cond);text-transform:uppercase;letter-spacing:.04em}
.panel p{margin:8px 0 0;font:400 14px/1.5 var(--sans);color:var(--muted)}
.panel__fields{grid-column:span 2;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px 24px;align-content:start}
.panel__fields > .field[hidden]{display:none}
.span-all{grid-column:1/-1}
.form-errors{margin:0 var(--pad);background:var(--error-bg);border-left:3px solid var(--error-line);color:var(--error);padding:10px 14px;font:500 14px var(--sans)}
.form-errors:first-child{margin-top:24px}

/* Le glissement d'une étape à l'autre (uniquement quand JavaScript est disponible) */
[data-precedent],[data-suivant]{display:none}
.js [data-precedent],.js [data-suivant]{display:inline-flex}
.js [data-precedent][hidden],.js [data-suivant][hidden]{display:none !important}
.js .slides{overflow:hidden;overflow:clip;position:relative;transition:height .45s cubic-bezier(.65,0,.35,1)}
.js .slides__track{display:flex;align-items:flex-start;transition:transform .5s cubic-bezier(.65,0,.35,1);will-change:transform}
.js .slide{flex:0 0 100%;width:100%;transition:opacity .35s ease}
.js .slide[aria-hidden="true"]{opacity:0;pointer-events:none}
.js .form-page:not(.is-last) [data-derniere]{display:none}
.form-page:not(.js-ready) [data-derniere]{display:inline-flex}
@media (prefers-reduced-motion:reduce){
  .js .slides,.js .slides__track,.js .slide{transition:none}
}

/* Détail d'un cas, REX, mot de passe */
.card{background:#fff;border:1px solid var(--line);padding:28px 32px;display:flex;flex-direction:column;gap:20px}
.card h2{font:700 24px var(--cond);text-transform:uppercase;letter-spacing:.04em}
.card h3{font:600 12px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.card__step{display:flex;align-items:center;gap:12px}
.card--muted{background:var(--bg)}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px}
.kv{display:grid;grid-template-columns:minmax(180px,300px) minmax(0,1fr);gap:10px 24px;margin:0}
.kv dt{color:var(--muted);font:500 14px/1.45 var(--sans)}
.kv dd{margin:0;font:400 15px/1.5 var(--sans);overflow-wrap:anywhere}
.kv dd.is-empty{color:#AEB9C6}
.kv dd.is-zero{font-weight:700}
.kv--derived{grid-template-columns:minmax(150px,220px) minmax(0,1fr)}
.panel-block{border-top:1px solid var(--line);padding-top:20px;display:flex;flex-direction:column;gap:12px}
.panel-block:first-of-type{border-top:0;padding-top:0}
.panel-block__hint{margin:-6px 0 0;font:400 13px var(--sans);color:var(--muted)}
.inline-form{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0}
.inline-form .select{width:auto;min-width:220px}
.upstream{background:var(--bg);border-left:3px solid var(--line);padding:12px 16px}
.upstream .kv{grid-template-columns:minmax(150px,260px) minmax(0,1fr)}
.warn{color:var(--amber);font:600 14px var(--sans)}
.history{width:100%;border-collapse:collapse;font:400 14px var(--sans)}
.history th{text-align:left;color:var(--muted);font:600 12px var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:0 12px;height:44px;border-bottom:1px solid var(--line)}
.history td{padding:0 12px;height:44px;border-bottom:1px solid var(--line)}

/* Login */
.login{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));min-height:100vh;background:#fff}
.login__hero{background:var(--marine);color:#fff;padding:48px 56px;display:flex;flex-direction:column;justify-content:space-between;gap:64px}
.login__pitch{display:flex;flex-direction:column;gap:24px;max-width:520px}
.login__pitch h1{font:700 76px/.92 var(--cond);text-transform:uppercase;letter-spacing:.01em;text-wrap:balance}
.login__pitch h1 span{color:var(--ocean)}
.login__pitch .bar{width:64px;height:4px;background:var(--ocean)}
.login__pitch p{margin:0;font:400 18px/1.55 var(--sans);color:var(--on-marine);text-wrap:pretty}
.waterline{display:flex;flex-direction:column;gap:10px}
.waterline i{display:block;height:1px;background:var(--marine-line)}
.waterline i:nth-child(2){margin-right:18%}
.waterline i:nth-child(3){margin-right:40%}
.waterline span{font:500 12px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted-light);margin-top:10px}
.login__side{display:flex;align-items:center;justify-content:center;padding:48px 32px;background:var(--bg)}
.login__form{width:100%;max-width:420px;display:flex;flex-direction:column;gap:32px}
.login__title{display:flex;flex-direction:column;gap:10px}
.login__title h2{font:700 44px/1 var(--cond);text-transform:uppercase;letter-spacing:.02em}
.login__fields{display:flex;flex-direction:column;gap:20px}
.login .input{height:50px;padding:0 16px;font-size:16px}
.pw-row{display:flex;justify-content:space-between;align-items:baseline;font:600 14px var(--sans)}
.pw{position:relative;display:flex}
.pw .input{padding-right:90px}
.pw button{position:absolute;right:6px;top:6px;height:38px;padding:0 12px;border:none;background:transparent;color:var(--ocean-dark);font:600 13px var(--sans);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.pw button:hover{color:var(--marine)}
.alert{border-left:3px solid var(--error-line);background:var(--error-bg);color:var(--error);padding:10px 14px;font:500 14px var(--sans)}
.login__note{margin:0;font:400 13px/1.5 var(--sans);color:var(--muted);border-top:1px solid var(--line);padding-top:20px}

/* Tablette et mobile */
@media (max-width:1100px){
  :root{--pad:32px}
  .app{grid-template-columns:240px minmax(0,1fr)}
  .sidebar{padding:28px 18px}
}
@media (max-width:820px){
  :root{--pad:24px}
  .app{grid-template-columns:1fr}
  .sidebar{position:sticky;top:0;z-index:20;height:auto;max-height:100vh;padding:14px var(--pad);gap:0}
  .sidebar__bar{min-height:44px}
  .brand__name{font-size:22px;margin-top:4px}
  .nav-toggle{display:inline-flex;align-items:center}
  .sidebar__panel{display:none;padding:18px 0 8px;margin:0;gap:22px}
  .sidebar.is-open .sidebar__panel{overflow-y:auto;max-height:calc(100vh - var(--barre-mobile))}
  .sidebar.is-open .sidebar__panel{display:flex}
  .title{font-size:32px}
  .page-head{padding-top:24px;padding-bottom:40px}
  .content{padding-top:24px;padding-bottom:32px}
  .panel{grid-template-columns:1fr;gap:20px;padding:24px}
  .panel__fields{grid-column:auto}
  .slide{padding-top:28px;padding-bottom:28px}
  .login__pitch h1{font-size:52px}
  .login__hero{padding:32px 24px;gap:32px}
  .login__side{padding:32px 24px}
  .kv{grid-template-columns:1fr;gap:2px 0}
  .kv dt{margin-top:12px}
  .card{padding:22px 20px}
}
@media (max-width:640px){
  /* Le tableau devient une liste de fiches */
  .table{min-width:0}
  .table thead{display:none}
  .table,.table tbody,.table tr,.table td{display:block;width:100%}
  .table tr{padding:14px 16px;border-bottom:1px solid var(--line)}
  .table td{height:auto;padding:4px 0;border:0;display:flex;gap:12px;justify-content:space-between;align-items:baseline}
  .table td::before{content:attr(data-label);flex:none;font:600 11px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  .table td.subject{min-width:0;display:block;font-weight:600;padding:6px 0}
  .table td.subject::before{display:block;margin-bottom:2px}
  .table .num{text-align:right}
  .filters{padding:16px}
  .filters .field,.filters .select{width:100%}
  .filters__actions{width:100%;justify-content:space-between}
}
@media (max-width:560px){
  :root{--pad:16px}
  .title{font-size:28px}
  .page-head__actions,.page-head__actions .btn{width:100%}
  .step:not(.is-active) .step__label{display:none}
  .steps{gap:18px}
  .form-bar__actions .btn--annuler{display:none}
  .login__pitch h1{font-size:42px}
  .btn--lg{font-size:16px}
}
/* La barre du formulaire selon la largeur */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:1360px){
  .step:not(.is-active) .step__label{display:none} /* le libellé complet reste dans l'infobulle */
}
@media (max-width:1760px){
  /* Cinq à sept étapes + trois boutons : on replie plus tôt pour que la dernière étape reste visible */
  .form-page--longue .step:not(.is-active) .step__label{display:none}
}
@media (max-width:820px){
  .form-bar{top:var(--barre-mobile);min-height:56px;gap:12px}
  .form-bar__progress{display:block}
  /* Les boutons passent dans une barre basse, à portée du pouce */
  .form-bar__actions{position:fixed;left:0;right:0;bottom:0;z-index:9;background:#fff;border-top:1px solid var(--line);padding:10px var(--pad);gap:8px;justify-content:stretch}
  .form-bar__actions .btn{flex:1 1 0;min-width:0;height:46px;padding:0 10px;white-space:normal;text-align:center;line-height:1.1}
  .form-bar__actions .btn--retour{flex:0 0 auto;min-width:50px}
  .form-bar__actions .btn--retour .btn__text{display:none}
  .form-page{padding-bottom:78px}
  .slide{padding-top:24px}
}
@media print{
  .sidebar,.user-menu,.form-bar,.nav-toggle{display:none}
  .app{display:block}
}

/* Compléments du formulaire */
.form-page.is-last .btn-save{background:var(--marine);border-color:var(--marine);color:#fff}
.form-page.is-last .btn-save:hover{background:var(--ocean-dark);border-color:var(--ocean-dark)}
.kv-empty{color:var(--muted);font-style:italic}

/* Code + nom du cas ; compteur de caractères */
.case-name{display:block;margin-top:6px;font:600 14px var(--sans);letter-spacing:.06em;color:var(--muted)}
.title__name{color:var(--ocean-dark)}
.fiche__hint{font:400 12px/1.4 var(--sans);color:var(--muted-light)}
.field__meta{display:flex;justify-content:flex-end;margin-top:-4px}
.field__counter{font:500 12px var(--sans);color:var(--muted);font-variant-numeric:tabular-nums}
.field__counter.is-full{color:var(--amber);font-weight:700}
.field input[name="nom"]{text-transform:uppercase;letter-spacing:.04em}
.table--compact{min-width:720px}

/* Tableaux de cas (§ 8.2, (18)) : Code et Nom en deux colonnes, chacune lien vers la fiche ; aucun lien souligné
   dans un tableau, même au survol (le pointeur et la couleur suffisent). */
.table td a,.table td a:hover{text-decoration:none;border-bottom:0}
.col-code{width:1%;white-space:nowrap}
.col-nom{min-width:160px}
.lien-code{font:700 17px var(--cond);letter-spacing:.06em;color:var(--marine);white-space:nowrap}
.lien-nom{font:600 14px var(--sans);letter-spacing:.04em;color:var(--ocean-dark);overflow-wrap:anywhere}
.lien-code:hover{color:var(--ocean-dark)}
.lien-nom:hover{color:var(--marine)}

/* Les blocs principaux d'une page ont tous la même longueur */
.content > *{width:100%;min-width:0}

/* « Pas de date » : la case s'aligne sur la hauteur du champ date */
.field--check{justify-content:flex-end}
.check{display:flex;align-items:center;gap:10px;height:46px;font:600 14px var(--sans);cursor:pointer}
.check input{width:18px;height:18px;margin:0;accent-color:var(--marine);flex:none}

/* Résumé de la demande (détail d'un cas) */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px 28px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fact{display:flex;flex-direction:column;gap:3px;min-width:0}
.fact small{font:600 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.fact b{font:600 16px var(--sans);overflow-wrap:anywhere}
.fact b.is-empty{font-weight:400;font-style:italic;color:var(--muted)}
.fact span{font:400 13px var(--sans);color:var(--muted);overflow-wrap:anywhere}
.inline-form--referent label{font:600 14px var(--sans)}

/* Confirmation après l'enregistrement d'un cas par un demandeur / métier */
.card--confirmation{flex-direction:row;align-items:center;gap:24px;padding:36px 40px}
.confirmation__icone{flex:none;width:56px;height:56px;border-radius:50%;background:var(--green-bg);color:var(--green);display:flex;align-items:center;justify-content:center;font:700 28px var(--sans)}
.confirmation__message{margin:0;font:400 18px/1.6 var(--sans);text-wrap:pretty}
@media (max-width:640px){.card--confirmation{flex-direction:column;align-items:flex-start;padding:24px}}

/* Mise et enjeu — potentiel (§ 7.4) : barre latérale et fiche */
.mise{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--marine-line);padding-top:12px}
/* Le libellé au-dessus, puis « N j · N € » sur une même ligne (en flex, le « · » prenait une ligne à lui) */
.mise__ligne{margin:0;font:600 13px/1.4 var(--sans)}
.mise__ligne small{display:block;margin-bottom:2px;font:500 12px var(--sans);color:var(--muted-light)}
.mise__phrase{margin:0;font:400 13px/1.45 var(--sans);color:var(--on-marine)}
.encart-mise{border-top:1px solid var(--line);padding-top:16px;display:flex;flex-direction:column;gap:10px}
.encart-mise .mise__phrase{color:var(--muted);font-size:14px}

/* Fiche en cours de la barre latérale : un nom trop long est coupé sur une ligne avec « … » (le texte entier est dans
   `title`). Aucun espacement ici : ceux de la barre sont les mêmes que sur les autres pages (mise à jour (25)). */
@media (min-width:821px){
  .fiche__code{overflow:hidden;text-overflow:ellipsis}
  .fiche__field b,.fiche__hint{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* Panneau « Prochaines actions » de la fiche (§ 8.3) */
.card--actions{border-left:4px solid var(--ocean)}
.actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.action{display:flex;flex-direction:column;gap:10px;border:1px solid var(--line);padding:16px;margin:0;min-width:0}
.action__tete{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.action .btn{white-space:normal;height:auto;min-height:42px;text-align:left}
.action--bloquee{background:var(--bg)}
.action--bloquee .btn{cursor:not-allowed;opacity:.75}
.action__manque{margin:0;padding-left:18px;font:400 13px/1.5 var(--sans);color:var(--error)}
.action__ecart{margin:0;font:500 13px/1.45 var(--sans);color:var(--amber)}
.action__champ,.action__motif{font:600 13px var(--sans)}
.action__oblig{font-weight:400;color:var(--muted)}
.action .textarea{min-height:64px}
/* Avis consultatif du référent (§ 5.7, (24)) : « Donner mon avis » dans le panneau, et la ligne que lit le pilote. */
.action__avis{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;border:0;min-width:0}
.action__avis legend{padding:0;margin-bottom:6px;font:600 13px var(--sans)}
.action__facultatif{font-weight:400;color:var(--muted)}
.action__avis .radio{display:flex;gap:10px;align-items:center;font:400 15px var(--sans);cursor:pointer}
.action__avis .radio input{width:18px;height:18px;margin:0;accent-color:var(--marine);flex:none}
.avis-referent{margin:0 0 12px;padding:10px 14px;border-left:3px solid var(--ocean);background:var(--ocean-bg);font:400 15px/1.5 var(--sans);overflow-wrap:anywhere}
.avis-referent small{color:var(--muted)}
.qui-a-la-main{margin:0;padding-left:18px;font:400 15px/1.6 var(--sans);color:#3D4E63}

/* Assignations du résumé (référent IA, pilote, responsable DSI) */
.fact--assignation{gap:6px}
.inline-form--assigner{gap:8px}
.inline-form--assigner .select{min-width:0;flex:1 1 160px}
.decision__motif{color:var(--muted);font-size:14px}
.table-wrap--plat{border:0}
.history__motif{max-width:360px;white-space:normal;padding-top:8px !important;padding-bottom:8px !important;height:auto !important}

/* Champs : 36 px sur ordinateur, 46 px au doigt (mobile) */
@media (max-width:767px){:root{--champ:46px}}

/* Tableau de bord (§ 8.6) : « À faire », « Mes cas en cours », « Sorties de triage » */
.dash-block{display:flex;flex-direction:column;gap:14px}
.dash-block__head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.dash-block__title{font:700 24px var(--cond);text-transform:uppercase;letter-spacing:.04em}
.dash-block__note{margin:0;font:400 14px var(--sans);color:var(--muted);flex-basis:100%}
.dash-filter .select{min-width:200px}
.dash-main{display:block}
.empty-state--compact{padding:28px 24px}
@media (max-width:767px){.dash-filter,.dash-filter .field,.dash-filter .select{width:100%}}
/* Tableaux serrés (tableau de bord, « Mes demandes ») : ils tiennent sans défilement à 1100 px. */
@media (min-width:641px){
  .table--serree th,.table--serree td{padding-left:14px;padding-right:14px}
  .table--serree .col-date{white-space:nowrap}
}
/* Sur mobile, les tableaux passent en fiches (≤ 640 px) : `.table--compact` et `.col-code` ne doivent plus imposer
   leur largeur minimale (sinon la fiche déborde et le code du cas est coupé). */
@media (max-width:640px){.table--compact{min-width:0}.col-code{min-width:0;width:auto}}

/* Fiche d'un cas (§ 8.3, (18)) — frise d'avancement : huit rectangles, la couleur toujours doublée d'un mot.
   Vert « fait », marine « en cours », rouge « à faire », gris « — » (non atteinte, après une sortie). L'étape de
   sortie (« sans suite », « enterré ») : bord rouge sur fond blanc. Les étapes passent à la ligne : jamais de
   défilement horizontal de la page. */
.frise-wrap{flex-basis:100%;display:flex;flex-direction:column;gap:8px;min-width:0}
.frise{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}
.frise__etape{display:flex;flex-direction:column;gap:0;padding:0;min-height:0;min-width:0;border:1px solid transparent}
.frise__libelle{font:700 13px/1.2 var(--cond);letter-spacing:.02em;text-transform:uppercase;overflow-wrap:break-word;hyphens:manual}
.frise__ligne{font:500 12px/1.3 var(--sans);overflow-wrap:break-word}
.frise__mot{font-weight:600}
.frise__precision{opacity:.9}
.frise__etape--fait{background:#2E8B57;color:#fff}
.frise__etape--en_cours{background:var(--marine);color:#fff;box-shadow:inset 0 -4px 0 var(--ocean)}
.frise__etape--a_faire{background:var(--error-line);color:#fff}
.frise__etape--non_atteinte{background:var(--neutral-bg);color:var(--muted)}
.frise__etape--eventuel{background:var(--neutral-bg);color:var(--muted);border-style:dashed;border-color:var(--input)}
.frise__etape--sortie{background:#fff;color:var(--error);border-color:var(--error-line)}
@media (max-width:1100px){.frise{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:560px){.frise{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Résumé repliable, replié par défaut : le bouton bascule « Afficher » / « Masquer le détail » (sans JS) */
.repli{display:flex;flex-direction:column}
.repli__bouton{list-style:none;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 22px;border:1px solid var(--marine);border-radius:4px;background:#fff;color:var(--marine);font:600 15px var(--sans);cursor:pointer;width:max-content;max-width:100%}
.repli__bouton::-webkit-details-marker{display:none}
.repli__bouton::before{content:"▸";font-size:13px}
.repli[open] > .repli__bouton::before{content:"▾"}
.repli__bouton:hover{background:#F3F5F7}
.repli[open] .repli__ouvrir,.repli:not([open]) .repli__fermer{display:none}
.repli__contenu{display:flex;flex-direction:column;gap:20px;margin-top:20px}
.repli__contenu .panel-block__hint{margin:0}
.facts--assignations{padding-top:18px}

/* Tableaux question / réponse de la fiche : une question tient sur une ligne en bureau
   (« Où se trouvent les données pour pouvoir créer une solution ? » à 1280 px) ; sur mobile, elles s'empilent. */
.kv--questions{grid-template-columns:minmax(180px,440px) minmax(0,1fr)}
@media (max-width:820px){.kv.kv--questions{grid-template-columns:1fr}}

/* Panneau « Prochaines actions » expliqué : rappel de la tâche, phrase d'introduction, deux groupes, ligne d'effet,
   où compléter ce qui manque, correction de l'administrateur à part */
.rappel-tache{border-left:3px solid var(--marine);background:var(--ocean-bg);padding:10px 14px;display:flex;flex-direction:column;gap:4px}
.rappel-tache small{font:600 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ocean-ink)}
.rappel-tache ul{margin:0;padding-left:18px;font:600 15px/1.5 var(--sans)}
.actions__intro{margin:-8px 0 0;font:400 15px/1.5 var(--sans);color:#3D4E63;max-width:72ch}
.actions-groupe{display:flex;flex-direction:column;gap:12px}
.actions-groupe--bloquees{border-top:1px solid var(--line);padding-top:18px}
.action__effet{margin:0;font:400 14px/1.45 var(--sans);color:var(--muted)}
.action__manque-titre{margin:0;font:600 13px var(--sans);color:var(--error)}
.action__completer{margin:0;display:flex;flex-wrap:wrap;gap:8px}
.action__completer .btn{white-space:normal;height:auto;min-height:36px;padding:6px 14px;font-size:14px;gap:6px}
.action__etape{font-weight:400;color:var(--muted)}
.correction{border-top:1px solid var(--line);padding-top:16px}
.correction > summary{cursor:pointer;font:600 12px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);width:max-content;max-width:100%}
.correction[open] > summary{margin-bottom:14px}

/* En-têtes des pages de liste (§ 8.6, (19)) — « Mes demandes », « Liste des cas d'usage », « Brouillons » : le bouton
   est sur la ligne de grille du titre, centré verticalement sur son texte ; la barre bleue passe dessous. Sur mobile
   (≤ 560 px), le bouton passe sous le titre. La fiche d'un cas et le tableau de bord gardent `.page-head` seul. */
.page-head--centre{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:24px;row-gap:0}
.page-head--centre > div:first-child{display:contents}
.page-head--centre .title{grid-column:1;grid-row:1}
.page-head--centre .title-bar{grid-column:1;grid-row:2}
.page-head--centre .page-head__actions{grid-column:2;grid-row:1}
@media (max-width:560px){
  .page-head--centre{grid-template-columns:minmax(0,1fr)}
  .page-head--centre .page-head__actions{grid-column:1;grid-row:3;margin-top:24px}
}

/* « Mes demandes » (§ 8.6, (19), option C du 2026-10-02) : « Changé le » à la largeur d'une date jj/mm/aaaa, sans plus
   (la colonne se réduit à son contenu, l'en-tête passe sur deux lignes au besoin) ; « Nom » à celle de 40 caractères
   moyens (`NOM_LONGUEUR_MAX`), comptés en `ch` dans la police condensée du nom (pile `--cond`, polices locales
   seulement) — un nom fait de lettres larges passe sur deux lignes, sans déborder ; pas de colonne « Reprendre » (le
   lien d'un brouillon est dans la cellule du statut) ; le reste va au sujet et au statut. Sur mobile (≤ 640 px), le
   tableau passe en fiches : ces largeurs ne s'appliquent pas. */
.table--mes-demandes{--nom-max:40;--nom-largeur:calc(var(--nom-max) * (1ch + .03em) + 28px)}
.table--mes-demandes .lien-nom{font:600 16px var(--cond);letter-spacing:.03em}
.lien-reprendre{font:600 13px var(--sans);white-space:nowrap;margin-left:6px}
@media (min-width:641px){
  .table--mes-demandes .col-nom{font:600 16px var(--cond);letter-spacing:.03em;width:var(--nom-largeur);min-width:var(--nom-largeur);max-width:var(--nom-largeur)}
  .table--mes-demandes th.col-nom{font:600 12px var(--sans);letter-spacing:.14em}
  .table--mes-demandes .col-date{width:1%;font-variant-numeric:tabular-nums;white-space:nowrap}
  .table--mes-demandes th.col-date{white-space:normal}
  .table--mes-demandes .subject{min-width:0}
  .table--mes-demandes .badge{white-space:normal}
}

/* Pilotage — liste, colonnes et consultation (§ 8.6). */
.nav__pastille{margin-left:auto;background:var(--ocean);color:white;border-radius:99px;padding:2px 7px;font-size:12px}
/* Fiche par étapes — lot 23 */
.fiche-page {min-width:0;padding:24px var(--pad) 32px}
.fiche-page .page-head {padding:12px 0 24px;align-items:flex-start}
.fiche-page .page-head__actions {max-width:100%}
.fiche-page .page-head__actions .badge {flex-basis:100%;width:max-content}
.fiche-page .title {overflow-wrap:anywhere}
/* (29, § 8.3.6) En-tête : code en gras et nom en bleu sur une ligne, en majuscules ; le besoin dessous, en plus petit. */
.fiche-titre {display:flex;flex-direction:column;gap:4px;padding:4px 0 8px}
.fiche-titre__tete {display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px}
.fiche-titre__ligne {margin:0;text-transform:uppercase;overflow-wrap:anywhere}
.fiche-titre__code {font-weight:800}
.fiche-titre__pastilles {display:inline-flex;flex-wrap:wrap;gap:6px}
.fiche-titre__pastilles .badge {font-size:12px;padding:2px 10px}
.fiche-besoin {margin:0;font:400 13.5px/1.4 var(--sans);color:var(--muted);overflow-wrap:anywhere}
.fiche-page__ariane {font-size:13px;color:var(--muted)}
.fiche-situation {background:var(--ocean-bg);border-left:4px solid var(--ocean);padding:18px 24px;margin:24px 0}
.fiche-situation h2,.fiche-situation p {margin:6px 0}
.fiche-layout {display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:24px;margin-top:24px}
.fiche-stack {display:flex;flex-direction:column;gap:24px;min-width:0}
.fiche-page .frise__etape a {display:flex;flex-direction:column;text-decoration:none;color:inherit;padding:4px 8px;min-height:0}
/* (39) Fenêtre affichée : option A de docs/maquettes/frise-selection.html — une pointe sous la tuile et le libellé souligné
   (plus de contour blanc). La pointe sort de la tuile : la frise garde de la place dessous, et entre ses lignes quand elle se replie. */
.fiche-page .frise{margin-bottom:14px}
.fiche-page .frise__etape{position:relative}
.fiche-page .frise__etape a[aria-current="page"]::after{content:"";position:absolute;left:50%;bottom:-11px;width:0;height:0;margin-left:-8px;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:9px solid var(--marine)}
.fiche-page .frise__etape a[aria-current="page"] .frise__libelle{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
@media (max-width:1100px){.fiche-page .frise{row-gap:16px}}
.fiche-page .card {overflow-wrap:anywhere;min-width:0}
.fiche-page .inline-form--assigner {display:flex;flex-wrap:wrap}
.fiche-page .inline-form--assigner select {min-width:0;width:100%}
.fiche-entree {border-bottom:1px solid var(--line);padding:12px 0}
.fiche-dossier {display:grid;grid-template-columns:180px minmax(0,1fr);gap:24px}
.fiche-dossier__sommaire {position:sticky;top:24px;align-self:start;display:flex;flex-direction:column;gap:12px}
@media(max-width:1100px){.fiche-layout{grid-template-columns:minmax(0,1fr)}}
@media(max-width:560px){.fiche-dossier{grid-template-columns:minmax(0,1fr)}.fiche-dossier__sommaire{position:static}.fiche-situation{padding:16px}.fiche-page .kv{grid-template-columns:minmax(0,1fr)}}
@media print {.sidebar,.fiche-page .page-head__actions,.fiche-page .frise-wrap,.fiche-page__ariane,.fiche-dossier__sommaire {display:none!important}.main {margin:0!important;padding:0!important}.fiche-dossier {display:block}.fiche-page .card{break-inside:avoid;border:1px solid #aaa}}
/* La liste tient dans sa colonne, y compris avec les destinataires de l’administrateur. */

/* Saisie et décisions des fenêtres — lot 25 */
.fenetre-form { display:grid; gap:16px; min-width:0; }
.fenetre-form__actions { display:flex; gap:10px; flex-wrap:wrap; }
/* Saisie par encart (29, § 8.3.8) : un petit formulaire par encart, son bouton « Mettre à jour » au bas de la carte. */
.encart-form { display:grid; gap:16px; min-width:0; }
.encart__actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.encart__ok { font:600 14px var(--sans); color:#2E8B57; }
.encart__alerte { padding:10px 14px; border-left:3px solid var(--error-line); background:var(--error-bg); color:var(--error); font:500 14px var(--sans); }
/* Un champ conditionnel masqué ne garde pas sa place dans la grille : les champs suivants restent alignés à gauche. */
.panel__fields > div:has(> .field[hidden]) { display:none; }
/* « Ce que ça coûte » : tous les champs visibles sur une seule ligne ; repli sur plusieurs lignes en mobile. */
.panel__fields--ligne { display:flex; flex-wrap:nowrap; align-items:flex-start; gap:20px 24px; }
.panel__fields--ligne > div { flex:1 1 0; min-width:0; }
@media(max-width:820px){ .panel__fields--ligne { flex-wrap:wrap; } .panel__fields--ligne > div { flex:1 1 220px; } }
.decision-pieces { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:12px; }
.decision-pieces article { padding:12px; border:1px solid var(--line); border-radius:6px; overflow-wrap:anywhere; }
.decision-colonnes { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.decision-colonnes > div { min-width:0; }
.decision-colonnes--unique { grid-template-columns:1fr; }
.action-confirmation { max-width:min(560px,calc(100vw - 32px)); border:1px solid var(--line); border-radius:8px; padding:24px; color:var(--marine); }
.action-confirmation::backdrop { background:rgba(19,48,90,.45); }
.action-confirmation__boutons { display:flex; flex-wrap:wrap; gap:10px; }
@media(max-width:1100px) { .decision-colonnes { grid-template-columns:1fr; } }

/* (29, lot 35, § 8.3.9) « Voir tout le dossier » : dans chaque encart, les libellés prennent un tiers de la largeur et les
   données les deux tiers ; sur mobile, les colonnes s'empilent. (Les règles d'impression viennent en dernier.) */
.fiche-dossier .kv, .kv--dossier {grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.fiche-dossier__sommaire .dossier-lien {display:flex;align-items:center;gap:8px}
.dossier-puce {flex:none;width:10px;height:10px;border-radius:50%;background:var(--muted-light, #AEB9C6)}
@media (max-width:820px){.fiche-dossier .kv, .kv.kv--dossier {grid-template-columns:minmax(0,1fr)}}
@media print {.fiche-dossier .kv, .kv--dossier {grid-template-columns:minmax(0,1fr) minmax(0,2fr)} .dossier-puce {display:none}}