/* ════════════════════════════════════════════════════════════════
   bandeaux-v1.css — BANDEAUX ET FENÊTRES SYSTÈME, partie F v2 de la maquette « Parcours du coach » (tâche 11.97, lot F2a,
   24/10/2026). Dépôt de Mathis du 23/10/2026 : design-ref/Parcours coach - export/ (sha épinglés dans
   outil/maquettes/bandeaux.mjs). COPIE VERBATIM de systeme2.css (les règles du décor des planches — .s2-wf, .s2-mini,
   .s2-pop, .p2-hello… — restent inertes : l'app n'en pose jamais les classes). GÉNÉRÉE par
   python3 outil/maquettes/bandeaux-portage.py, jamais éditée à la main : parité `node outil/harnais-parite.mjs bandeaux`.
   Retouches de l'app : bandeaux-v1-colle.css (chaque règle déclarée dans la config).
   ════════════════════════════════════════════════════════════════ */

/* ── systeme2.css ── */
/* MARX · PARTIE F v2 — bandeaux et fenêtres « système », charte v2. Une seule famille : .s2-bar (haut), .s2-bb (bas), .s2-modal (fenêtre). Aucune animation. */
.s2-bar,.s2-bb{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"i t a x";align-items:center;column-gap:12px;row-gap:8px;flex:0 0 auto;padding:10px 20px;background:var(--mx-surface);color:var(--mx-ink);font-size:13.5px;line-height:1.4}
.s2-bar{border-bottom:1px solid var(--mx-line)}
.s2-i{grid-area:i;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--mx-bg-2);color:var(--mx-ink-2)}
.s2-t{grid-area:t;display:flex;flex-direction:column;gap:1px;min-width:0}.s2-t b{font-weight:600}.s2-t>span{color:var(--mx-ink-2)}
.s2-a{grid-area:a;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}.s2-a:empty{display:none}
.s2-x{grid-area:x;display:grid;place-items:center;width:44px;height:44px;margin:-6px -12px -6px -4px;border-radius:50%;color:var(--mx-ink-2)}
.s2-x:hover{background:color-mix(in oklab,currentColor 8%,transparent)}
.s2-link{min-height:44px;text-decoration:underline;text-underline-offset:3px;color:var(--mx-ink)}
.s2-bar--info{background:var(--mx-info-soft)}.s2-bar--info .s2-i{background:var(--mx-surface);color:var(--mx-info-text)}
.s2-bar--warn{background:var(--mx-warn-soft)}.s2-bar--warn .s2-i{background:var(--mx-surface);color:var(--mx-warn-text)}
.s2-bar--red{background:var(--mx-red-soft)}.s2-bar--red .s2-i{background:var(--mx-surface);color:var(--mx-red-text)}
.s2-bar--ink{background:var(--mx-ink);color:var(--mx-on-ink);border-bottom-color:var(--mx-ink)}.s2-bar--ink .s2-t>span{color:var(--mx-on-ink)}.s2-bar--ink .s2-i{background:color-mix(in oklab,var(--mx-on-ink) 16%,transparent);color:var(--mx-on-ink)}
.s2-more{display:grid;place-items:center;min-width:44px;min-height:44px;color:inherit}
.s2-more>span{display:grid;place-items:center;min-width:32px;height:26px;padding:0 8px;border-radius:999px;border:1.5px solid currentColor;font-size:12.5px;font-weight:700}
.s2-bb{border-top:1px solid var(--mx-line);box-shadow:0 -10px 24px -18px rgba(15,14,12,.35);padding:12px max(20px,calc((100% - 1240px)/2))}
.s2-bb .s2-i{background:var(--mx-surface-2)}
.s2-kb .s2-bb{display:none}
@media (max-width:767.98px){
 .s2-bar{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"i t x" ". a a";padding:8px 12px 8px 14px}
 .s2-bar .s2-a{justify-content:flex-start}
 .s2-bb{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"i t x" "a a a";padding:12px 14px}
 .s2-bb .s2-a{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
 .s2-bb .s2-a .mx-btn{padding:0 8px}
 .s2-dk{display:none}
}
/* Ligne cookies posée dans le bas d'un formulaire : au-dessus du bouton, jamais par-dessus */
.s2-bb--in{margin:-12px -16px 8px;padding:10px 16px 12px;border-top:0;border-bottom:1px solid var(--mx-line);box-shadow:none}
.s2-bb--in,.s2-bb--card{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"i t x" "a a a"}
.s2-bb--in .s2-a,.s2-bb--card .s2-a{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.s2-bb--card{position:sticky;bottom:16px;z-index:5;margin-top:16px;border:1px solid var(--mx-line-2);border-radius:16px;padding:12px 16px;box-shadow:var(--mx-e-2)}
/* File d'attente (+1 ouvert) */
.s2-queue{display:flex;flex-direction:column;gap:8px;flex:0 0 auto;padding:12px 20px 14px;background:var(--mx-surface);border-bottom:1px solid var(--mx-line)}
.s2-queue>p{margin:0;font-size:12.5px;font-weight:600;color:var(--mx-muted)}
.s2-queue .s2-bar{border:1px solid var(--mx-line);border-radius:12px}
/* Fenêtre */
.s2-scrim{position:fixed;inset:0;z-index:80;background:var(--mx-overlay)}
.s2-modal{position:fixed;z-index:81;left:0;right:0;bottom:0;max-height:calc(100% - 28px);display:flex;flex-direction:column;background:var(--mx-surface);color:var(--mx-ink);border-radius:20px 20px 0 0;box-shadow:var(--mx-e-3)}
.s2-mh{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px 20px 6px}
.s2-mh h2{margin:0;font-family:var(--mx-font-display);font-weight:700;font-size:28px;line-height:1.02}
.s2-mh h2:focus{outline:none}
.s2-mh .s2-x{margin:-8px -10px 0 0}
.s2-mb{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding:6px 20px 18px}
.s2-mf{display:flex;flex-direction:column;gap:8px;padding:12px 20px 18px;border-top:1px solid var(--mx-line)}
.s2-mf--2{flex-direction:row}.s2-mf--2>.mx-btn{flex:1 1 0}
.s2-mf .pc-h{text-align:center}
@media (min-width:768px){.s2-modal{left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);width:min(600px,calc(100% - 48px));max-height:min(800px,calc(100% - 64px));border-radius:20px}.s2-mh{padding:26px 28px 8px}.s2-mb{padding:6px 28px 20px}.s2-mf{padding:14px 28px 22px}}
.s2-lead{margin:0;font-size:15px;line-height:1.5;color:var(--mx-ink-2)}
.s2-box{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border:1px solid var(--mx-line);border-radius:14px;background:var(--mx-surface-2)}
.s2-box>p{margin:0;font-size:13px;font-weight:600;color:var(--mx-ink-2)}
.s2-chg{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.s2-chg li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;font-size:14.5px;line-height:1.45}.s2-chg .mx-ico{margin-top:2px;color:var(--mx-green-text)}
.s2-docs{display:flex;flex-direction:column;gap:8px}
.s2-docs details{border:1px solid var(--mx-line);border-radius:12px;background:var(--mx-surface)}
.s2-docs summary{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:56px;padding:6px 14px;cursor:pointer;list-style:none}
.s2-docs summary::-webkit-details-marker{display:none}
.s2-docs summary>span{display:flex;flex-direction:column}.s2-docs summary b{font-size:15px;font-weight:600}
.s2-docs summary>.mx-ico:last-child{color:var(--mx-muted)}.s2-docs details[open] summary>.mx-ico:last-child{transform:rotate(180deg)}
.s2-docs summary:focus-visible{outline:2px solid var(--mx-focus);outline-offset:2px;border-radius:12px}
.s2-dtx{padding:0 14px 14px 44px;font-size:14px;line-height:1.55;color:var(--mx-ink-2)}.s2-dtx p{margin:0 0 6px}
.s2-dtx mark{background:var(--mx-warn-soft);color:var(--mx-ink);padding:0 2px;border-radius:3px}
/* Listes de réglages (cookies, consentements) */
.s2-rows{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.s2-rows li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;min-height:64px;padding:10px 0;border-top:1px solid var(--mx-line)}
.s2-rows li:first-child{border-top:0}
.s2-rows li>span:first-child{display:flex;flex-direction:column;gap:2px;font-size:14.5px}.s2-rows b{font-weight:600}
.s2-rows--ic li{grid-template-columns:36px minmax(0,1fr) auto}
.s2-ric{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--mx-surface-2);color:var(--mx-ink-2)}
.s2-rows li>span.s2-rt{display:flex;flex-direction:column;gap:2px;font-size:14.5px}
.s2-sw{display:flex;align-items:center;min-height:44px}
/* Pas à pas illustré (iPhone, notifications bloquées) */
.s2-steps{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.s2-steps li{display:grid;grid-template-columns:24px 44px minmax(0,1fr);align-items:center;gap:12px;min-height:56px;padding:6px 12px;border:1px solid var(--mx-line);border-radius:12px;background:var(--mx-surface-2);font-size:14.5px;line-height:1.4}
.s2-steps .n{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--mx-ink);color:var(--mx-on-ink);font-size:12px;font-weight:700}
.s2-steps .ill{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;background:var(--mx-surface);border:1px solid var(--mx-line);color:var(--mx-info-text)}
.s2-safari{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;height:56px;padding:0 8px;border-radius:14px;background:var(--mx-bg-2);color:var(--mx-muted)}
.s2-safari span{display:grid;place-items:center;height:40px}
.s2-safari .on{margin:0 auto;width:48px;border-radius:10px;background:var(--mx-surface);color:var(--mx-info-text);box-shadow:0 0 0 2px var(--mx-info-text)}
.s2-cap{margin:-6px 0 0;font-size:12.5px;color:var(--mx-muted);text-align:center}
/* Page hors ligne */
.s2-offp{display:grid;place-items:center;height:100dvh;padding:20px;background:var(--mx-bg)}
.s2-offc{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(420px,100%);padding:32px 24px;border:1px solid var(--mx-line);border-radius:20px;background:var(--mx-surface);text-align:center}
.s2-offc .pc-logo{font-size:24px}
.s2-big{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--mx-surface-2);border:1px solid var(--mx-line);color:var(--mx-ink)}
/* Tableau de bord des cas */
.s2-ag{display:flex;flex-direction:column;margin:4px 0 0;padding:0;list-style:none}
.s2-ag li{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:56px;border-top:1px solid var(--mx-line);font-size:14.5px}
.s2-ag li>span:nth-child(2){display:flex;flex-direction:column}.s2-ag .tm{font-weight:600}
.s2-ag li:first-child{border-top:0}
.s2-sess{display:flex;flex-direction:column;gap:6px}
.s2-sess .mx-btn{align-self:flex-start;margin-top:6px}
.s2-gap{display:flex;flex-direction:column;gap:16px}
/* Planche système */
.s2-lv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:1100px){.s2-lv{grid-template-columns:minmax(0,1fr)}}
.s2-lvc{display:flex;flex-direction:column;gap:10px;padding:16px;border:1px solid var(--mx-line);border-radius:16px;background:var(--mx-surface)}
.s2-lvc h3{margin:0;font-size:16px;font-weight:600}.s2-lvc p{margin:0;font-size:14px;line-height:1.5;color:var(--mx-ink-2)}
.s2-lvc .s2-bar{border:1px solid var(--mx-line);border-radius:12px}
.s2-mini{position:relative;height:150px;border:1px solid var(--mx-line);border-radius:12px;background:var(--mx-bg);overflow:hidden}
.s2-mini .s2-scrim,.s2-mini .s2-modal{position:absolute}
.s2-mini .s2-modal{left:12%;right:12%;top:18px;bottom:auto;transform:none;width:auto;padding:12px 14px;border-radius:12px;gap:8px}
.s2-mini .s2-modal b{font-size:14px}
.s2-places{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:1100px){.s2-places{grid-template-columns:minmax(0,1fr)}}
.s2-wf{display:flex;flex-direction:column;width:200px;height:360px;margin:0 auto;border:1.5px solid var(--mx-line-2);border-radius:22px;background:var(--mx-bg);overflow:hidden;font-size:11.5px;font-weight:600;color:var(--mx-ink-2)}
.s2-wf>i{display:flex;align-items:center;justify-content:center;font-style:normal;flex:0 0 auto}
.s2-wf .nav{height:30px;background:var(--mx-surface);border-bottom:1px solid var(--mx-line)}
.s2-wf .tab{height:34px;background:var(--mx-surface);border-top:1px solid var(--mx-line)}
.s2-wf .main{flex:1 1 auto;flex-direction:column;gap:6px;padding:10px;color:var(--mx-muted)}
.s2-wf .main::before,.s2-wf .main::after{content:"";display:block;width:100%;height:48px;border-radius:8px;background:var(--mx-surface);border:1px solid var(--mx-line)}
.s2-wf .hi{height:34px;background:var(--mx-info-soft);color:var(--mx-info-text);outline:2px solid var(--mx-info-text);outline-offset:-2px}
.s2-wf .lo{height:44px;background:var(--mx-surface);color:var(--mx-ink);outline:2px solid var(--mx-ink);outline-offset:-2px}
.s2-wf--m{position:relative}
.s2-wf--m::after{content:"";position:absolute;inset:0;background:var(--mx-overlay)}
.s2-wf--m .mo{position:absolute;z-index:1;left:8px;right:8px;bottom:0;height:62%;border-radius:14px 14px 0 0;background:var(--mx-surface);color:var(--mx-ink)}
.s2-place{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--mx-line);border-radius:16px;background:var(--mx-surface)}
.s2-place h3{margin:0;font-size:16px;font-weight:600}.s2-place p{margin:0;font-size:14px;line-height:1.5;color:var(--mx-ink-2)}
.s2-ord{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;border:1px solid var(--mx-line);border-radius:16px;background:var(--mx-surface)}
.s2-ord li{display:grid;grid-template-columns:32px minmax(0,1fr) 110px 90px;align-items:center;gap:12px;min-height:56px;padding:8px 16px;border-top:1px solid var(--mx-line);font-size:14.5px}
.s2-ord li:first-child{border-top:0}
.s2-ord .n{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--mx-ink);color:var(--mx-on-ink);font-size:12px;font-weight:700}
.s2-ord li>span:nth-child(2){display:flex;flex-direction:column}.s2-ord b{font-weight:600}
.s2-ord .mx-tag{justify-self:start}
@media (max-width:700px){.s2-ord li{grid-template-columns:32px minmax(0,1fr);row-gap:6px}.s2-ord .mx-tag{grid-column:2}}
.s2-ex{display:flex;flex-direction:column;border:1px solid var(--mx-line);border-radius:16px;overflow:hidden;background:var(--mx-bg)}
.s2-ex .s2-bar:last-child{border-bottom:0}
.s2-rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
@media (max-width:900px){.s2-rules{grid-template-columns:minmax(0,1fr)}}
.s2-rules li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;padding:12px 14px;border:1px solid var(--mx-line);border-radius:12px;background:var(--mx-surface);font-size:14px;line-height:1.5}
.s2-rules .mx-ico{margin-top:2px;color:var(--mx-green-text)}.s2-rules li.no .mx-ico{color:var(--mx-red-text)}
.s2-sec{display:flex;flex-direction:column;gap:12px}
.s2-sec>h3{margin:8px 0 0;font-size:13px;font-weight:600;color:var(--mx-red-text)}
/* Centre de notifications */
.s2-navr{display:flex;align-items:center;gap:6px;margin-left:auto}
.s2-bell{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--mx-ink)}
.s2-bell:hover,.s2-bell[aria-expanded="true"]{background:var(--mx-bg-2)}
.s2-bell .s2-dot{position:absolute;top:9px;right:10px;box-shadow:0 0 0 2px var(--mx-surface)}
.s2-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--mx-red)}
.s2-nl{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.s2-nl li{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:start;gap:12px;padding:12px 0;border-top:1px solid var(--mx-line)}
.s2-nl li:first-child{border-top:0}
.s2-nl .s2-rt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:14.5px}.s2-nl b{font-weight:600}
.s2-nl .s2-rt .mx-btn{margin-top:8px}
.s2-nl li.is-new .s2-ric{background:var(--mx-info-soft);color:var(--mx-info-text)}
.s2-nh{display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:12.5px}
.s2-nlc{display:flex;flex-direction:column;gap:4px}
.p2-hello .pc-tl{min-height:44px;font-size:14px;color:var(--mx-ink-2)}
.s2-pop{position:fixed;z-index:60;top:60px;right:24px;width:400px;max-height:calc(100% - 84px);overflow-y:auto;padding:16px 20px 8px;border:1px solid var(--mx-line);border-radius:16px;background:var(--mx-surface);box-shadow:var(--mx-e-3)}
.s2-poph{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}.s2-poph h2{margin:0}.s2-poph .pc-tl{min-height:44px;font-size:13.5px;color:var(--mx-ink-2)}
/* 22/10 · boutons compacts dans les bandeaux (mx-btn--xs de la charte), un peu plus hauts sur ordinateur */
@media (min-width:768px){.s2-a .mx-btn--xs{min-height:36px;padding:0 14px}}
/* Bandeau cookies : vert pastel, toute la largeur, tout en bas */
/* Vert sauge (direction B, choisie le 23/10) */
.s2-bb--ck{--ck-bg:#E3EBE2;--ck-bd:#CAD6C8;--ck-ic:#3E5B43;background:var(--ck-bg);border-top:1px solid var(--ck-bd);box-shadow:none}
.mx-dark .s2-bb--ck{--ck-bg:#1A211B;--ck-bd:#2A352B;--ck-ic:#9DB8A0}
.s2-bb--ck .s2-i{background:var(--mx-surface);color:var(--ck-ic)}
.s2-bb--ck .mx-btn--secondary{--b-bg:var(--mx-surface)}
.s2-bb--ck .s2-a .mx-btn--ghost{text-decoration:underline;text-underline-offset:3px}
body.s2-ckpage{display:flex;flex-direction:column;height:100dvh;margin:0;overflow:hidden}
body.s2-ckpage>#app{flex:1 1 auto;min-height:0;overflow-y:auto}
/* Consentements : sur téléphone, l'action passe sous le texte */
@media (max-width:767.98px){.s2-rows--ic li{grid-template-columns:36px minmax(0,1fr);align-items:start;row-gap:8px}.s2-rows--ic li>.p2-row{grid-column:2;justify-self:start;flex-wrap:wrap}}
/* Lecture d'un document, changements surlignés */
@media (min-width:768px){.s2-modal--read{width:min(760px,calc(100% - 48px))}}
.s2-back{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;min-height:44px;margin:-8px 0 -10px -4px;padding:0 4px;font-size:14px;font-weight:500;color:var(--mx-ink-2)}
.s2-rtools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding-bottom:12px;border-bottom:1px solid var(--mx-line)}
.s2-leg{display:flex;gap:14px;margin:0;font-size:13px;color:var(--mx-ink-2)}
.s2-doc{display:flex;flex-direction:column;gap:18px;font-size:15px;line-height:1.6}
.s2-doc section{display:flex;flex-direction:column;gap:6px}
.s2-doc section.is-chg{padding-left:12px;box-shadow:inset 3px 0 0 var(--mx-warn-text)}
.s2-doc h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0;font-size:15.5px;font-weight:600}
.s2-doc p{margin:0;color:var(--mx-ink-2)}
.s2-doc mark,.s2-leg mark{background:var(--mx-warn-soft);color:var(--mx-ink);padding:1px 3px;border-radius:3px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.s2-doc del,.s2-leg del{color:var(--mx-muted);text-decoration-thickness:1.5px}