/* Composants (UI §5, DESIGN §5, §7, §8, CORRECTIONS §A, lot D). Couleurs par variables
   seulement (jetons.css). Marges et retraits logiques (inline/block), jamais left/right. */

/* ---- boutons : 56 (action principale) / 44 (le reste), pilule ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:0 20px;text-decoration:none;font-weight:600;white-space:nowrap;background:transparent;color:var(--primary);flex:none}
.btn-56{min-height:56px;font-size:16px;line-height:20px;padding:0 24px}
.btn-44{min-height:44px;font-size:14px;line-height:20px}
.btn-plein{background:var(--primary);color:var(--onPrimary);box-shadow:var(--btnBombe),var(--e1)}
.btn-tonal{background:var(--secondaryCont);color:var(--onSecondaryCont)}
.btn-contour{border:1px solid var(--outline);color:var(--primary)}
.btn-texte{padding:0 12px;color:var(--primary)}
.btn-fait{background:var(--okCont);color:var(--onOk)}
.btn-icone{width:44px;min-width:44px;height:44px;padding:0;color:var(--inkSoft)}
.barre-mobile .btn-icone{width:48px;min-width:48px;height:48px}
.btn-icone.ink{color:var(--ink)}
.btn[aria-disabled=true],.btn:disabled{cursor:default;background:var(--surfHigh);color:var(--inkSoft);box-shadow:none}
.btn-danger{background:var(--errCont);color:var(--onErr)}
.lien-retour{align-self:flex-start;margin-inline-start:-12px}

/* ---- puces de statut (jamais cliquables) ---- */
.chip{display:inline-flex;align-items:center;gap:4px;min-height:24px;padding:0 8px;border-radius:8px;font-size:13px;line-height:16px;font-weight:500;white-space:nowrap;flex:none}
.chip-fait{color:var(--okInk);padding-inline:0}
.chip-en_cours{background:var(--primaryCont);color:var(--onPrimaryCont)}
.chip-echec{background:var(--errCont);color:var(--onErr)}
.chip-manque{background:var(--warnCont);color:var(--onWarn)}
.chip-attente,.chip-non_suivi,.chip-inconnu{color:var(--inkSoft);padding-inline:0}
.chip-ok{background:var(--okCont);color:var(--onOk)}
.chip-neutre{background:var(--surfHigh);color:var(--ink)}
.chip-nouveau{background:var(--secondaryCont);color:var(--onSecondaryCont)}

/* ---- la touche de שלוחה (DESIGN §7) ---- */
.key{display:inline-flex;align-items:center;justify-content:center;flex:none;font-family:'Rubik',sans-serif;font-weight:600;font-variant-numeric:tabular-nums;box-shadow:var(--keySh);transition:transform .16s cubic-bezier(.2,0,0,1),box-shadow .16s cubic-bezier(.2,0,0,1)}
.key.down{transform:translateY(1px);box-shadow:var(--keyShDown)}
.key-s{width:32px;height:32px;border-radius:10px;font-size:18px}
.key-m{width:40px;height:40px;border-radius:12px;font-size:20px}
.key-l{width:56px;height:56px;border-radius:16px;font-size:28px}
.cat1{background:var(--cat1-bg);color:var(--cat1-fg)}.ink1{color:var(--cat1-ink)}
.cat2{background:var(--cat2-bg);color:var(--cat2-fg)}.ink2{color:var(--cat2-ink)}
.cat3{background:var(--cat3-bg);color:var(--cat3-fg)}.ink3{color:var(--cat3-ink)}
.cat0{background:var(--cat0-bg);color:var(--cat0-fg)}.ink0{color:var(--cat0-ink)}
.pastille-cat{display:inline-flex;align-items:center;min-height:24px;padding:0 8px;border-radius:8px;font-size:13px;line-height:16px;font-weight:500}

/* ---- cartes, sections, listes groupées ---- */
.carte{background:var(--surf);border-radius:22px;box-shadow:var(--e1);padding:24px;min-width:0}
.carte > * + *{margin-top:16px}
.carte-tete{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.section > * + *{margin-top:12px}
.liste{background:var(--surf);border-radius:16px;box-shadow:var(--e1);overflow:hidden}
.carte .liste{box-shadow:none;border-radius:0;background:transparent;margin-inline:-24px}
.liste > li{position:relative}
.liste > li + li::before{content:"";position:absolute;top:0;inset-inline:68px 0;height:1px;background:var(--outlineSoft)}
.rangee{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-height:56px;padding:8px 16px;color:inherit;text-decoration:none;min-width:0}
.carte .rangee{padding-inline:24px}
.rangee-corps{flex:1 1 9em;min-width:0;display:flex;flex-direction:column;gap:2px}
.rangee-valeur{flex:0 1 auto;margin-inline-start:auto;text-align:end;display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:0}
.rangee-valeur.large{max-width:none}
.rangee-pleine{flex-wrap:wrap}
/* Texte hébreu (dir=rtl) dans une rangée : collé au début de la rangée dans les deux langues
   (sinon, élément étiré dans la colonne, il s'alignait à l'autre bord en français). */
.rangee-corps > [dir=rtl],.rangee-corps > .chip{align-self:flex-start}
.rond{width:40px;height:40px;border-radius:999px;background:var(--surfHigh);color:var(--inkSoft);display:inline-flex;align-items:center;justify-content:center;flex:none}
.rond-ok{color:var(--okInk)}
.rond-err{background:var(--errCont);color:var(--onErr)}
.rond-warn{background:var(--warnCont);color:var(--onWarn)}
.etat-ok{color:var(--okInk)}
.etat-err{color:var(--errInk)}
.etat-mot{display:inline-flex;align-items:center;gap:4px}

/* ---- bandeaux et bannière ---- */
.bandeau{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-radius:12px;background:var(--warnCont);color:var(--onWarn)}
.bandeau-err{background:var(--errCont);color:var(--onErr)}
.bandeau-neutre{background:var(--surfHigh);color:var(--ink)}
.banniere{display:flex;gap:16px;align-items:flex-start;padding:16px 24px;border-radius:16px;background:var(--surf);box-shadow:var(--e1)}
.banniere-err{background:var(--errCont);color:var(--onErr);box-shadow:none}
.banniere ul{display:flex;flex-direction:column;gap:4px;margin-top:4px}

/* ---- squelette de chargement (sans animation) ---- */
.squelette{display:flex;flex-direction:column;gap:16px}
.squelette span{display:block;height:20px;border-radius:8px;background:var(--surfHigh)}
.squelette span.haut{height:160px;border-radius:28px}
.squelette span.court{width:40%}

/* ---- sélecteur segmenté, menu Apparence, feuille ---- */
.seg{display:inline-flex;margin:0;padding:0;min-inline-size:0;border:1px solid var(--outline);border-radius:999px;overflow:hidden;flex:none}
.seg label{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:64px;padding:0 14px;cursor:pointer;font-size:14px;line-height:20px;font-weight:500}
.seg label + label{border-inline-start:1px solid var(--outline)}
.seg label:focus-within{outline:3px solid var(--focus);outline-offset:-3px}
.seg label.choisi{background:var(--secondaryCont);color:var(--onSecondaryCont);font-weight:600}
.seg-large{display:flex}
.seg-large label{flex:1 1 0}
.menu-ancre{position:relative}
.voile{position:fixed;inset:0;background:transparent;z-index:40}
.voile-barre{z-index:19}   /* sous la barre (20) : le menu Apparence, dans la barre, reste cliquable */
.menu{position:absolute;inset-inline-end:0;top:calc(100% + 8px);z-index:41;width:224px;background:var(--surf);border-radius:16px;box-shadow:var(--e2);padding:8px 0}
.rail .menu{top:auto;bottom:0;inset-inline-start:calc(100% + 8px);inset-inline-end:auto}
.menu [role=menuitemradio],.menu [role=menuitem]{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:0 16px;border:0;background:transparent;text-align:start;color:var(--ink);text-decoration:none}
.menu .coche{width:18px;height:18px;color:var(--primary);visibility:hidden}
.menu [aria-checked=true] .coche{visibility:visible}
.menu [aria-checked=true]{font-weight:600}
.feuille{position:fixed;inset-inline:0;bottom:0;z-index:41;background:var(--surf);border-radius:28px 28px 0 0;box-shadow:var(--e3);padding:12px 16px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:16px}
.feuille:focus{outline:none}   /* focus posé par le script pour le lecteur d'écran, pas un contrôle */
.feuille-poignee{width:32px;height:4px;border-radius:999px;background:var(--outline);align-self:center}
.feuille .seg{display:flex}
.feuille .seg label{flex:1 1 0;min-width:0}
.cloche{position:relative}
.cloche-pastille{position:absolute;top:4px;inset-inline-end:4px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:var(--errInk);color:var(--onErrBadge);font-size:13px;line-height:18px;font-weight:700;box-shadow:0 0 0 2px var(--bg);text-align:center}

/* ---- onglets ---- */
.onglets{display:flex;gap:4px;border-bottom:1px solid var(--outlineSoft);overflow-x:auto;scrollbar-width:none}
.onglets [role=tab]{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 16px;border:0;background:transparent;color:var(--inkSoft);font-size:14px;line-height:20px;font-weight:600;white-space:nowrap;border-radius:12px 12px 0 0}
.onglets [role=tab][aria-selected=true]{color:var(--primary)}
.onglets [role=tab][aria-selected=true]::before{content:"";position:absolute;inset-inline:12px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--primary)}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--warnCont);color:var(--onWarn);font-size:13px;line-height:20px;font-weight:700}
[role=tabpanel]{padding-top:24px}
[role=tabpanel]:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:8px}

/* ---- tableaux ---- */
/* position:relative : les textes .sr (position absolue) des en-têtes restent DANS la zone qui
   défile ; sans cela ils élargissaient toute la page sur téléphone (recette du lot F). */
.defile{overflow-x:auto;min-width:0;position:relative}
.defile:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.tableau{width:100%;border-collapse:collapse}
.tableau caption{text-align:start}
.tableau th{font-size:13px;line-height:18px;font-weight:600;color:var(--inkSoft);text-align:start;padding:8px 12px;white-space:nowrap;border-bottom:1px solid var(--outlineSoft)}
.tableau td{padding:10px 12px;border-bottom:1px solid var(--outlineSoft);vertical-align:middle}
.tableau tr:last-child td,.tableau tbody tr:last-child th{border-bottom:0}
.tableau .num{white-space:nowrap}
.tableau td.detail{min-width:13em}
.tableau .centre{text-align:center}
.tableau .fin{text-align:end}
.cellule-st{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:999px}
.cellule-st.fait{color:var(--okInk)}
.cellule-st.echec{background:var(--errCont);color:var(--onErr)}
.cellule-st.manque{background:var(--warnCont);color:var(--onWarn)}
.cellule-st.en_cours{background:var(--primaryCont);color:var(--onPrimaryCont)}

/* ---- anneau segmenté (8 étapes) ---- */
.anneau{position:relative;width:96px;height:96px;flex:none}
.anneau svg{width:96px;height:96px}
.anneau-centre{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:24px;line-height:28px;font-weight:700;font-variant-numeric:tabular-nums}
.seg-fait{stroke:var(--okInk)}.seg-echec,.seg-manque{stroke:var(--errInk)}.seg-en_cours{stroke:var(--primary)}
.seg-attente,.seg-non_suivi,.seg-inconnu{stroke:var(--surfHighest)}
@media (max-width:639px){.anneau,.anneau svg{width:64px;height:64px}.anneau-centre{font-size:18px}}

/* ---- frise des étapes (verticale ; horizontale dans Cours ≥ 640 px) ---- */
.frise{display:flex;flex-direction:column}
.frise > li{position:relative;display:flex;gap:16px;padding-bottom:16px}
.frise > li:last-child{padding-bottom:0}
.frise-pastille{position:relative;width:40px;height:40px;border-radius:999px;display:flex;align-items:center;justify-content:center;flex:none;z-index:1;background:var(--surfHigh);color:var(--okInk)}
.frise-pastille.en_cours{background:var(--primaryCont);color:var(--onPrimaryCont)}
.frise-pastille.echec{background:var(--errCont);color:var(--onErr)}
.frise-pastille.manque{background:var(--warnCont);color:var(--onWarn)}
.frise-pastille.attente,.frise-pastille.non_suivi,.frise-pastille.inconnu{background:transparent;border:1.5px dashed var(--outline);color:var(--inkSoft)}
.frise > li::before{content:"";position:absolute;top:40px;bottom:0;inset-inline-start:19px;width:2px;background:var(--outlineSoft)}
.frise > li.trait-fait::before{background:var(--okInk)}
.frise > li:last-child::before{display:none}
.frise-ligne{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 16px;flex:1 1 auto;min-width:0;padding-top:8px}
.frise-nom{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:2px}
.frise-puce{flex:0 0 132px}
.frise-heure{flex:0 0 118px;display:flex;flex-direction:column;text-align:end}
.frise-plein{flex-basis:100%}
.frise-plein pre,.journal pre{background:var(--codeBg);color:var(--codeInk);border-radius:12px;padding:12px 16px;font-size:13px;line-height:20px;white-space:pre-wrap;overflow-wrap:anywhere;margin-top:8px;max-height:420px;overflow:auto}
.frise-h{flex-direction:row;overflow-x:auto;gap:0}
.frise-h > li{flex-direction:column;align-items:flex-start;min-width:132px;flex:1 1 0;padding:0 8px 0 0;gap:8px}
.frise-h > li::before{top:19px;bottom:auto;height:2px;width:auto;inset-inline:40px 0}
.frise-h .frise-ligne{flex-direction:column;padding-top:0;gap:4px}
.frise-h .frise-puce,.frise-h .frise-heure{flex:none;text-align:start}
@media (max-width:639px){
  .frise-h{flex-direction:column}
  .frise-h > li{flex-direction:row;min-width:0;padding:0 0 16px}
  .frise-h > li::before{top:40px;bottom:0;width:2px;height:auto;inset-inline:19px auto}
  .frise-puce,.frise-heure{flex:0 0 auto;text-align:start}
}

/* ---- tâches ---- */
.taches{display:flex;flex-direction:column;gap:8px}
.tache{display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 16px;border-radius:12px;text-decoration:none;color:var(--ink);background:var(--surf);border:1px solid var(--outlineSoft)}
.tache-prete{background:var(--warnCont);color:var(--onWarn);border-color:transparent}
.tache-bloquee{background:var(--surfHigh);color:var(--inkSoft);border-color:transparent}
.tache .rangee-corps{gap:2px}

/* ---- raccourcis ---- */
.raccourcis{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:8px}
.raccourci{display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 12px;border-radius:12px;background:var(--surfLow);color:var(--ink);text-decoration:none;min-width:0}
/* Libellé en un seul texte qui passe à la ligne (pas la colonne flexible de .rangee-corps, qui
   empilait « Dossier / ToShare » et cassait « (Google Doc) » en hébreu). */
.raccourci .rangee-corps{display:block;flex:0 1 auto;font-size:14px;line-height:18px;font-weight:500}
@media (max-width:639px){.raccourcis{grid-template-columns:repeat(3,minmax(0,1fr))}.raccourci{flex-direction:column;text-align:center;gap:4px;padding:8px 4px}.raccourci .rangee-corps{font-size:13px}}

/* ---- snackbar ---- */
.snackbar{position:fixed;bottom:24px;inset-inline-start:max(24px, calc(96px + 24px));z-index:50;max-width:min(560px, calc(100vw - 48px));display:flex;align-items:center;gap:12px;padding-block:12px;padding-inline:16px 8px;border-radius:14px;background:var(--inverseSurf);color:var(--inverseInk);box-shadow:var(--e3)}
.snackbar .btn{color:var(--inverseInk)}
@media (max-width:639px){.snackbar{inset-inline-start:16px;bottom:96px;max-width:calc(100vw - 32px)}}

/* ---- champs ---- */
.champ{display:flex;flex-direction:column;gap:6px}
.saisie{width:100%;min-height:52px;padding:0 16px;border-radius:16px;border:1px solid var(--outline);background:var(--surf);color:var(--ink)}
.saisie::placeholder{color:var(--inkSoft)}
.aide{color:var(--inkSoft)}
.recherche{position:relative;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.recherche .saisie{flex:1 1 280px;padding-inline-start:44px}
.recherche-icone{position:absolute;inset-inline-start:14px;top:16px;color:var(--inkSoft);pointer-events:none}

/* ---- lecteur audio ---- */
.lecteur{display:flex;flex-wrap:wrap;align-items:center;gap:12px;min-width:0}
.lecteur .btn-lire{width:56px;height:56px;min-width:56px;padding:0;border-radius:999px}
.piste{flex:1 1 200px;min-width:160px;height:44px;display:flex;align-items:center;cursor:pointer;border-radius:999px}
.piste-fond{position:relative;width:100%;height:6px;border-radius:999px;background:var(--surfHighest);overflow:hidden}
.piste-plein{position:absolute;inset-block:0;inset-inline-start:0;width:var(--pct,0%);background:var(--primary);border-radius:999px}
.piste:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* ---- barre de progression simple (disque) ---- */
.jauge{position:relative;height:6px;border-radius:999px;background:var(--surfHighest);overflow:hidden;min-width:96px}
.jauge > span{position:absolute;inset-block:0;inset-inline-start:0;width:var(--pct,0%);background:var(--primary);border-radius:999px}

/* ---- aperçu WhatsApp ---- */
.wa{background:var(--waWall);border-radius:16px;padding:16px;font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
.wa-bulle{background:var(--waBulle);color:var(--waInk);border-radius:12px;padding:8px 12px;max-width:520px;margin-inline-start:auto;white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px;line-height:21px}
.wa-lien{color:var(--waLien)}
.wa-texte{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:22px;background:var(--surfLow);border-radius:12px;padding:12px 16px;max-height:520px;overflow:auto}

/* ---- questions ---- */
.questions{display:flex;flex-direction:column;gap:4px}
.question{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border-radius:12px;cursor:pointer;min-height:48px}
.question:hover{background:var(--surfLow)}
.question input{position:absolute;opacity:0;width:1px;height:1px}
.question-case{width:28px;height:28px;border-radius:8px;border:2px solid var(--outline);display:inline-flex;align-items:center;justify-content:center;flex:none;font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}
.question input:checked + .question-case{background:var(--primary);border-color:var(--primary);color:var(--onPrimary)}
.question input:focus-visible + .question-case{outline:3px solid var(--focus);outline-offset:2px}

/* ---- gestes numérotés ---- */
.gestes > li{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 0}
.gestes > li + li{border-top:1px solid var(--outlineSoft)}
.geste-num{width:28px;height:28px;border-radius:999px;background:var(--secondaryCont);color:var(--onSecondaryCont);display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;flex:none}

/* ---- transcription ---- */
.transcription > li{display:flex;gap:12px;align-items:baseline;padding:4px 0}
.minute{flex:none;border:0;background:transparent;color:var(--primary);padding:2px 6px;border-radius:8px;font-size:14px;min-height:32px}
button.minute{min-height:44px;min-width:44px}
mark{background:var(--warnCont);color:var(--onWarn);border-radius:4px;padding:0 2px}

/* ---- graphique en barres ---- */
.graph{display:flex;align-items:flex-end;gap:4px;height:200px;padding-top:8px;border-bottom:1px solid var(--outlineSoft)}
/* 30 colonnes de 6 px au moins : écart réduit sous 400 px pour tenir dans 320 px (recette du lot F) */
@media (max-width:400px){.graph{gap:2px}}
.graph-col{flex:1 1 0;min-width:6px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;position:relative}
.graph-col .pile{display:flex;flex-direction:column-reverse;gap:2px;height:var(--h,0%);min-height:2px}
.graph-col .pile > span{display:block;flex:var(--v,1) 1 0;border-radius:3px;min-height:2px}
.graph-vide{flex:1 1 0;min-width:6px;height:100%;display:flex;align-items:flex-end;justify-content:center;color:var(--inkSoft);font-size:12px}
.plat-ligne{background:var(--plat-ligne)}.plat-youtube{background:var(--plat-youtube)}.plat-telegram{background:var(--plat-telegram)}
.plat-spotify{background:var(--plat-spotify)}.plat-podcast{background:var(--plat-podcast)}.plat-liens{background:var(--plat-liens)}
.legende{display:flex;flex-wrap:wrap;gap:8px 16px}
.legende li{display:inline-flex;align-items:center;gap:6px}
.puce-plat{display:inline-block;width:12px;height:12px;border-radius:4px;flex:none}
.graph-axe{display:flex;justify-content:space-between;color:var(--inkSoft)}