/* ==========================================================================
   Journée — socle commun des maquettes (HTML et CSS statiques)
   Spécification : ../04-spec.md § 3. Barre : ../_socle/CONTEXTE.md § 8 et 9.
   Jetons repris de ../_socle/vendor/app.css (mêmes noms --color-*), clair
   l. 11 et suivantes, sombre l. 1261 et suivantes. Aucun hexadécimal hors de
   ce bloc de jetons. Mode d'emploi : GUIDE.md.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Jetons — thème clair (et .force-clair pour un écran clair dans une page
   sombre). Chaque jeton est écrit en valeur explicite : une variable qui en
   référence une autre serait figée là où elle est déclarée et ne suivrait pas
   .force-sombre / .force-clair.
   -------------------------------------------------------------------------- */
:root,
.force-clair {
    --color-primary:       #204B75;
    --color-primary-hover: #2B5E8F;
    --color-primary-dark:  #163654;
    --color-primary-ultra: #F3F7FB;
    --color-primary-soft:  #E2EBF4;
    --color-primary-text:  #163654;
    --color-focus-ring:    #204B75;

    --color-accent:        #C8623A;   /* réservé au filet de 4 px du temps fort */

    --color-success:       #2E8B57;
    --color-success-dark:  #1E7842;
    --color-success-soft:  #E5F4EA;
    --color-warning:       #C99A2E;
    --color-warning-dark:  #7D5E15;
    --color-warning-soft:  #FBF2DF;
    --color-danger:        #B33A3A;
    --color-danger-dark:   #7E2828;
    --color-danger-soft:   #F9E5E5;
    --color-info:          #1E78C2;
    --color-info-dark:     #13547F;
    --color-info-soft:     #E1F0FB;

    --color-on-solid:      #FFFFFF;   /* texte sur le bouton primaire : 9,03:1 */

    --color-text:          #1A2332;
    --color-text-soft:     #4A5566;
    --color-text-muted:    #626F80;   /* 5,12 sur surface, 4,77 sur fond, 4,75 sur ultra */
    --color-border:        #E2E6EC;
    --color-border-soft:   #EEF0F4;
    --color-control-border:#808A99;   /* 3,49:1 sur surface (contour de contrôle) */
    --color-bg:            #F5F7FA;
    --color-bg-subtle:     #FAFBFC;
    --color-surface:       #FFFFFF;
    --color-field-bg:      #FFFFFF;
    --color-overlay:       rgba(15, 23, 42, 0.55);

    /* Jeton propre à Journée (§ 3.1) : légende dans une zone « ce qui sort ». */
    --color-legende-sort:  #626F80;   /* 4,75:1 sur #F3F7FB */

    --shadow-xs: 0 1px 2px rgba(22, 54, 84, 0.04);
    --shadow-lg: 0 16px 32px rgba(22, 54, 84, 0.10), 0 4px 8px rgba(22, 54, 84, 0.05);

    color-scheme: light;
}

/* --------------------------------------------------------------------------
   2. Jetons — thème sombre, défini deux fois avec les mêmes valeurs :
   (a) réglage de l'iPhone, sauf si la page force le clair ;
   (b) attribut data-theme="dark" (comme Tao) ; plus .force-sombre pour
   montrer un écran sombre dans une page claire.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-primary:       #4A90C7;
        --color-primary-hover: #5FA4D8;
        --color-primary-dark:  #6BB5E5;
        --color-primary-ultra: #1A2F44;
        --color-primary-soft:  #243A52;
        --color-primary-text:  #6BB5E5;
        --color-focus-ring:    #6BB5E5;

        --color-accent:        #C8623A;   /* 4,00 sur surface, 4,63 sur fond */

        --color-success:       #4FB979;
        --color-success-dark:  #A6E3BD;
        --color-success-soft:  #1A3424;
        --color-warning:       #E0B864;
        --color-warning-dark:  #F2D89C;
        --color-warning-soft:  #3A2E16;
        --color-danger:        #E66C6C;
        --color-danger-dark:   #F4B0B0;
        --color-danger-soft:   #3A1F1F;
        --color-info:          #5FA4D8;
        --color-info-dark:     #B0D4EF;
        --color-info-soft:     #1F2E40;

        --color-on-solid:      #0F141B;   /* sur #4A90C7 : 5,37:1 */

        --color-text:          #E5E9EE;
        --color-text-soft:     #B8C0CC;
        --color-text-muted:    #8892A0;   /* 5,07 sur surface, 5,87 sur fond */
        --color-border:        #2E3742;
        --color-border-soft:   #232A33;
        --color-control-border:#748399;
        --color-bg:            #0F141B;
        --color-bg-subtle:     #161C24;
        --color-surface:       #1A2230;
        --color-field-bg:      #161C24;
        --color-overlay:       rgba(0, 0, 0, 0.62);

        --color-legende-sort:  #B8C0CC;   /* 7,46:1 sur #1A2F44 (#8892A0 n'y fait que 4,35) */

        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.4);

        color-scheme: dark;
    }
}

:root[data-theme="dark"],
.force-sombre {
    --color-primary:       #4A90C7;
    --color-primary-hover: #5FA4D8;
    --color-primary-dark:  #6BB5E5;
    --color-primary-ultra: #1A2F44;
    --color-primary-soft:  #243A52;
    --color-primary-text:  #6BB5E5;
    --color-focus-ring:    #6BB5E5;

    --color-accent:        #C8623A;

    --color-success:       #4FB979;
    --color-success-dark:  #A6E3BD;
    --color-success-soft:  #1A3424;
    --color-warning:       #E0B864;
    --color-warning-dark:  #F2D89C;
    --color-warning-soft:  #3A2E16;
    --color-danger:        #E66C6C;
    --color-danger-dark:   #F4B0B0;
    --color-danger-soft:   #3A1F1F;
    --color-info:          #5FA4D8;
    --color-info-dark:     #B0D4EF;
    --color-info-soft:     #1F2E40;

    --color-on-solid:      #0F141B;

    --color-text:          #E5E9EE;
    --color-text-soft:     #B8C0CC;
    --color-text-muted:    #8892A0;
    --color-border:        #2E3742;
    --color-border-soft:   #232A33;
    --color-control-border:#748399;
    --color-bg:            #0F141B;
    --color-bg-subtle:     #161C24;
    --color-surface:       #1A2230;
    --color-field-bg:      #161C24;
    --color-overlay:       rgba(0, 0, 0, 0.62);

    --color-legende-sort:  #B8C0CC;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.4);

    color-scheme: dark;
}

/* .force-clair / .force-sombre portent leur propre fond et leur propre texte. */
.force-clair,
.force-sombre {
    background: var(--color-bg);
    color: var(--color-text);
}

/* --------------------------------------------------------------------------
   3. Échelle, grille, police (indépendants du thème)
   -------------------------------------------------------------------------- */
:root {
    --font-body: "Geist", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;

    /* 4 tailles au plus par écran (§ 3.1) ; interlignes sur la grille de 4/8 px */
    --t-corps: 14px;  --l-corps: 20px;   /* corps, légendes */
    --t-carte: 18px;  --l-carte: 24px;   /* titre de carte, valeur importante */
    --t-ecran: 22px;  --l-ecran: 28px;   /* titre d'écran */
    --t-heros: 28px;  --l-heros: 34px;   /* héros (2 × corps) */
    --t-chrome: 12px;                    /* barre d'état simulée et libellés d'onglets seulement */

    /* Grille de 8 px */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;
    --sp-6: 24px; --sp-8: 32px; --sp-12: 48px;

    --radius: 6px;       /* boutons */
    --radius-md: 8px;    /* cartes */
    --radius-2xl: 12px;  /* feuilles, fenêtres */

    --h-statut: 20px; --h-tete: 44px; --h-action: 64px; --h-onglets: 49px;
    --h-poste-tete: 48px;
    --cible: 44px;       /* iPhone */

    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font: 400 var(--t-corps)/var(--l-corps) var(--font-body);
    font-feature-settings: "ss01", "ss02", "cv11";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-wrap: break-word;   /* jamais coupé au milieu d'un mot, sauf mot plus large que la colonne */
    hyphens: manual;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--color-primary-text); }

/* Chiffres tabulaires pour heures et montants : partout dans l'app. */
.ecran, .ecran-poste, .chiffres { font-variant-numeric: tabular-nums; }

/* Utilitaires de texte (n'ajoutent aucune taille hors échelle) */
.t-corps   { font-size: var(--t-corps); line-height: var(--l-corps); }
.t-carte   { font-size: var(--t-carte); line-height: var(--l-carte); font-weight: 600; }
.t-ecran   { font-size: var(--t-ecran); line-height: var(--l-ecran); font-weight: 600; letter-spacing: -0.01em; }
.t-heros   { font-size: var(--t-heros); line-height: var(--l-heros); font-weight: 600; letter-spacing: -0.02em; }
.doux      { color: var(--color-text-soft); }
.muted     { color: var(--color-text-muted); }
.gras      { font-weight: 600; }
.coupe-3, .coupe-6 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.coupe-3 { -webkit-line-clamp: 3; }
.coupe-6 { -webkit-line-clamp: 6; }
.vh {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Icônes au trait : <svg class="ico" aria-hidden="true"><use href="#i-pause"/></svg> */
.ico {
    width: 24px; height: 24px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.75;
    stroke-linecap: round; stroke-linejoin: round;
}
.ico--20 { width: 20px; height: 20px; }

/* Focus visible partout */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   4. Écran iPhone : .ecran
   statut 20 · en-tête 44 · contenu qui défile · barre d'action 64 · onglets 49
   -------------------------------------------------------------------------- */
.ecran {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: var(--color-bg);
    color: var(--color-text);
}

/* Barre d'état simulée (chrome iOS, hors application : 12 px admis) */
.ecran-statut {
    flex: none;
    height: var(--h-statut);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--sp-4);
    font-size: var(--t-chrome);
    line-height: var(--h-statut);
    font-weight: 600;
    color: var(--color-text);
    background: var(--color-bg);
}
.ecran-statut-batterie {
    position: relative;
    width: 22px; height: 11px;
    border: 1px solid currentColor; border-radius: 3px;
    margin-right: 3px;
}
.ecran-statut-batterie::before {   /* charge */
    content: ""; position: absolute; inset: 1px 6px 1px 1px;
    background: currentColor; border-radius: 1px;
}
.ecran-statut-batterie::after {    /* téton */
    content: ""; position: absolute; right: -3px; top: 3px;
    width: 2px; height: 4px; background: currentColor; border-radius: 0 1px 1px 0;
}

/* En-tête 44 px : titre d'écran 22 px à gauche, bouton libellé à droite */
.ecran-tete {
    flex: none;
    height: var(--h-tete);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0 var(--sp-2) 0 var(--sp-4);
    background: var(--color-bg);
}
.ecran-tete-titre {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--t-ecran);
    line-height: var(--l-ecran);
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}
.ecran-tete:has(.btn-retour) { padding-left: var(--sp-1); }

/* Contenu qui défile */
.ecran-corps {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--sp-4) var(--sp-4) var(--sp-8);
}

/* Barre d'action fixe 64 px, au-dessus des onglets (pouce) */
.ecran-action {
    flex: none;
    height: var(--h-action);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0 var(--sp-4);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
}
.ecran-action .btn-principal { flex: 1 1 auto; width: 100%; }  /* pleine largeur admise ici seulement */

/* Barre d'onglets 49 px : 5 entrées, icône au trait + mot, aucune pastille */
.ecran-onglets {
    flex: none;
    height: var(--h-onglets);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
}
.ecran-onglets a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: var(--cible);
    padding: 3px 0 2px;
    font-size: var(--t-corps);    /* 14 px : « rien sous 14 px dans l'application » (spec § 3.1) ; seule la barre d'état simulée reste à 12 px */
    line-height: 18px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--color-text-soft);
    text-decoration: none;
    white-space: nowrap;
}
.ecran-onglets a[aria-current="page"] { color: var(--color-primary-text); font-weight: 600; }
.ecran-onglets a:focus-visible { outline-offset: -2px; }

/* --------------------------------------------------------------------------
   5. Écran ordinateur : .ecran-poste (en-tête 48 px + grille)
   -------------------------------------------------------------------------- */
.ecran-poste {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: var(--color-bg);
    color: var(--color-text);
    --cible: 36px;   /* ≥ 24 px exigés sur ordinateur */
}
.poste-tete {
    flex: none;
    height: var(--h-poste-tete);
    display: flex;
    align-items: stretch;
    gap: var(--sp-6);
    padding: 0 var(--sp-6);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}
.poste-marque {
    display: flex; align-items: center;
    font-size: var(--t-carte); line-height: var(--l-carte); font-weight: 600;
}
.poste-nav { flex: 1 1 auto; display: flex; align-items: stretch; gap: var(--sp-1); }
.poste-nav a {
    display: flex; align-items: center;
    padding: 0 var(--sp-3);
    color: var(--color-text-soft);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.poste-nav a[aria-current="page"] {
    color: var(--color-text);
    font-weight: 600;
    border-bottom-color: var(--color-primary);
}
.poste-nav-fin { margin-left: auto; }   /* « Semaine », « Réglages » à droite */
.poste-grille {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr) 360px;
}
.poste-col {
    min-height: 0;
    overflow-y: auto;
    padding: var(--sp-6);
    border-right: 1px solid var(--color-border);
}
.poste-col:last-child { border-right: 0; background: var(--color-bg-subtle); }
.raccourcis { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); color: var(--color-text-soft); }
kbd {
    display: inline-block; min-width: 24px; padding: 0 var(--sp-1);
    border: 1px solid var(--color-control-border); border-radius: 4px;
    font: 500 var(--t-corps)/var(--l-corps) var(--font-body); text-align: center;
    color: var(--color-text); background: var(--color-surface);
}

/* --------------------------------------------------------------------------
   6. Mise en page : groupes, légendes, valeurs
   écart interne 8 · entre groupes 24 · entre sections 32
   -------------------------------------------------------------------------- */
.pile    { display: flex; flex-direction: column; gap: var(--sp-2); }
.groupe  { margin-top: var(--sp-6); }
.section { margin-top: var(--sp-8); }
.pile > .groupe, .pile > .section { margin-top: 0; }

/* Légende : 14 px muted AU-DESSUS de la valeur (jamais « Libellé : valeur ») */
.legende {
    display: block;
    margin: 0 0 var(--sp-1);
    font-size: var(--t-corps);
    line-height: var(--l-corps);
    font-weight: 400;
    color: var(--color-text-muted);
}
.valeur { display: block; font-size: var(--t-corps); line-height: var(--l-corps); font-weight: 600; }
.valeur--grande { font-size: var(--t-carte); line-height: var(--l-carte); }
.raison { font-size: var(--t-corps); line-height: var(--l-corps); color: var(--color-text-soft); }
.titre-section { font-size: var(--t-corps); line-height: var(--l-corps); font-weight: 400; color: var(--color-text-muted); margin-bottom: var(--sp-2); }

/* Héros : la donnée « ce que je fais maintenant » */
.heros { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-1) 0; }
.heros .legende { margin: 0; }
.heros-titre {
    font-size: var(--t-heros); line-height: var(--l-heros);
    font-weight: 600; letter-spacing: -0.02em;
    margin-top: var(--sp-1);
}
.heros-raison { font-size: var(--t-corps); line-height: var(--l-corps); color: var(--color-text-soft); margin-top: var(--sp-1); }
.heros-fin { font-size: var(--t-carte); line-height: var(--l-carte); font-weight: 600; margin-top: var(--sp-2); }
/* Filet terre cuite 4 px à gauche : UNIQUEMENT le temps fort (et la 1re priorité du plan) */
.heros--temps-fort,
.temps-fort {
    border-left: 4px solid var(--color-accent);
    padding-left: var(--sp-3);
}

/* Ligne d'état sous le héros (« 3 propositions attendent 13 h 30 ») */
.etat-ligne { font-size: var(--t-carte); line-height: var(--l-carte); font-weight: 600; }
.etat-sous { font-size: var(--t-corps); line-height: var(--l-corps); color: var(--color-text-muted); }

/* Liste à lignes (« Ensuite », tâches, courrier) */
.liste { display: flex; flex-direction: column; }
.ligne {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--sp-4);
    align-items: start;
    min-height: var(--cible);
    padding: var(--sp-3) 0;
    border-top: 1px solid var(--color-border);
}
.ligne:first-child { border-top: 0; padding-top: var(--sp-1); }
/* Ligne cliquable dans un <li> (<li><a class="ligne">) : seul le 1er <li> perd son filet */
li:not(:first-child) > .ligne:first-child { border-top: 1px solid var(--color-border); padding-top: var(--sp-3); }
.ligne--simple { grid-template-columns: minmax(0, 1fr); }
.ligne-heure { min-width: 56px; font-weight: 600; white-space: nowrap; }
.ligne-titre { font-weight: 400; }
.ligne-detail { color: var(--color-text-muted); }
a.ligne, button.ligne { width: 100%; text-align: left; background: none; border-left: 0; border-right: 0; border-bottom: 0; color: inherit; text-decoration: none; }

/* Compteurs (I9, I10) : 3 blocs, légende au-dessus, valeur 18 px */
.compteurs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.compteur {
    padding: var(--sp-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

/* Ligne de service (mode économie, boîte non lue…) */
.ligne-service { display: flex; gap: var(--sp-2); align-items: flex-start; color: var(--color-text-soft); }
.ligne-service .ico { width: 20px; height: 20px; margin-top: 0; }

/* --------------------------------------------------------------------------
   7. Carte de proposition (anatomie § 3.3)
   légende type · société → titre 18 → interlocuteur → raison → ce qui sort
   → À vérifier → action principale → Corriger · Plus tard · Écarter
   -------------------------------------------------------------------------- */
.carte {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.carte .legende { margin: 0; }
.carte-titre { font-size: var(--t-carte); line-height: var(--l-carte); font-weight: 600; }
.carte-qui { font-size: var(--t-corps); line-height: var(--l-corps); }
.carte-raison { font-size: var(--t-corps); line-height: var(--l-corps); color: var(--color-text-soft); }
.carte > .sort,
.carte > .a-verifier,
.carte > .carte-action { margin-top: var(--sp-2); }
.carte-action { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.carte-boutons { display: flex; flex-wrap: wrap; gap: 0 var(--sp-2); margin: 0 calc(-1 * var(--sp-2)); }
.carte--suivante { opacity: 1; }   /* aperçu de la carte suivante : même carte, contenu réduit */
.a-verifier {
    padding: var(--sp-2) var(--sp-3);
    border-left: 2px solid var(--color-control-border);
    background: var(--color-bg-subtle);
}
.a-verifier .legende { margin-bottom: 0; color: var(--color-text-soft); }

/* --------------------------------------------------------------------------
   8. Ce qui sort (B5) : 3 signaux — fond ultra, pointillé 1,5 px, titre
   -------------------------------------------------------------------------- */
.sort {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4) var(--sp-4);
    background: var(--color-primary-ultra);
    border: 1.5px dashed var(--color-primary);
    border-radius: var(--radius-md);
}
.sort-titre {
    display: flex; align-items: center; gap: var(--sp-2);
    font-size: var(--t-corps); line-height: var(--l-corps); font-weight: 600;
    color: var(--color-primary-text);
}
.sort-titre .ico { width: 20px; height: 20px; }
.sort .legende { color: var(--color-legende-sort); margin-bottom: 0; }
.sort-champ + .sort-champ { margin-top: 0; }
.sort-texte { white-space: pre-line; }
.sort-suite { margin-top: var(--sp-2); color: var(--color-text-soft); }

/* --------------------------------------------------------------------------
   9. Boutons — 44 px sur iPhone, 36 px sur ordinateur ; graisse 500
   -------------------------------------------------------------------------- */
.btn-principal,
.btn-contour,
.btn-texte,
.btn-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: var(--cible);
    border-radius: var(--radius);
    font-size: var(--t-corps);
    line-height: var(--l-corps);
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}
.btn-principal {
    padding: var(--sp-2) var(--sp-6);
    border: 0;
    background: var(--color-primary);
    color: var(--color-on-solid);
    box-shadow: var(--shadow-xs);
}
.btn-principal:hover { background: var(--color-primary-hover); }
.btn-contour {
    padding: var(--sp-2) var(--sp-6);
    border: 1px solid var(--color-primary);
    background: var(--color-surface);
    color: var(--color-primary-text);
}
.btn-contour:hover { background: var(--color-primary-ultra); }
.btn-texte {
    padding: 0 var(--sp-2);
    border: 0;
    background: none;
    color: var(--color-primary-text);
}
.btn-texte:hover { text-decoration: underline; }
/* Bouton d'en-tête : icône au trait + mot (ex. « Réglages », « Maintenant ») */
.btn-icone {
    flex: none;
    min-width: var(--cible);
    padding: 0 var(--sp-2);
    border: 0;
    background: none;
    color: var(--color-primary-text);
}
.btn-retour { padding-left: 0; }
/* Boutons de même poids (I6 : « Il est d'accord » · « Il refuse » · « Je dicterai après ») */
.btn-egal {
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 52px; padding: var(--sp-2) var(--sp-4);
    border: 1px solid var(--color-control-border); border-radius: var(--radius);
    background: var(--color-surface); color: var(--color-text);
    font-size: var(--t-corps); line-height: var(--l-corps); font-weight: 500;
}
/* Désactivé : toujours avec sa raison écrite dessous (.raison) */
.btn-principal:disabled, .btn-contour:disabled, .btn-texte:disabled { opacity: .55; cursor: not-allowed; }
/* Ordinateur : jamais pleine largeur */
.ecran-poste .btn-principal, .ecran-poste .btn-contour { width: auto; padding: 0 var(--sp-6); }

/* Puces de filtre (I9) : 44 px, état par aria-pressed */
.puces { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-1); }
.puce {
    flex: none;
    display: inline-flex; align-items: center; gap: var(--sp-1);
    min-height: var(--cible); padding: 0 var(--sp-4);
    border: 1px solid var(--color-control-border); border-radius: var(--radius);
    background: var(--color-surface); color: var(--color-text);
    font-size: var(--t-corps); line-height: var(--l-corps); font-weight: 500;
    white-space: nowrap;
}
.puce[aria-pressed="true"] {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    color: var(--color-primary-text);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   10. Champs (I8) — 18 px sur iPhone pour éviter le zoom d'iOS sous 16 px
   -------------------------------------------------------------------------- */
.champ { display: flex; flex-direction: column; }
.champ .legende { margin-bottom: var(--sp-2); }
.champ input,
.champ textarea {
    width: 100%;
    min-height: var(--cible);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius);
    background: var(--color-field-bg);
    color: var(--color-text);
    font-size: var(--t-carte);
    line-height: var(--l-carte);
    resize: vertical;
}
.ecran-poste .champ input, .ecran-poste .champ textarea { font-size: var(--t-corps); line-height: var(--l-corps); }
.champ input::placeholder, .champ textarea::placeholder { color: var(--color-text-muted); opacity: 1; }   /* sinon gris du navigateur #757575 : 3,72:1 sur le champ sombre (B12) */

/* Interrupteur (I7 « Garder ») : <label class="interrupteur"><input type="checkbox" role="switch" checked><span>Garder</span></label> */
.interrupteur { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--cible); cursor: pointer; }
.interrupteur input {
    appearance: none; -webkit-appearance: none; margin: 0;
    position: relative; flex: none;
    width: 44px; height: 28px; border-radius: 999px;
    background: var(--color-control-border);
    transition: background .15s var(--ease-out);
}
.interrupteur input::before {
    content: ""; position: absolute; top: 3px; left: 3px;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--color-surface);
    transition: transform .15s var(--ease-out);
}
.interrupteur input:checked { background: var(--color-primary); }
.interrupteur input:checked::before { transform: translateX(16px); }

/* Repliable (« Lire tout », « Ce que Journée a utilisé », « 9 autres, moins sûres ») */
.replie > summary {
    display: flex; align-items: center; gap: var(--sp-2);
    min-height: var(--cible);
    color: var(--color-primary-text); font-weight: 500;
    list-style: none; cursor: pointer;
}
.replie > summary::-webkit-details-marker { display: none; }
.replie > summary::after {   /* chevron de repli, en trait */
    content: ""; width: 7px; height: 7px; margin-left: 2px;
    border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
}
.replie[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }

/* Barre neutre (I11 « Où est allé ton temps ») : style="--part: 62%" */
.barre-neutre { height: 8px; border-radius: 4px; background: var(--color-border); overflow: hidden; }
.barre-neutre::before { content: ""; display: block; width: var(--part, 0%); height: 100%; background: var(--color-text-muted); }

/* Squelette de chargement (aucune animation) */
.squelette { display: block; border-radius: 4px; background: var(--color-border); }
.squelette--ligne { height: 20px; }
.squelette--titre { height: 34px; }

/* --------------------------------------------------------------------------
   11. Statut technique (connexion, échec) : texte + icône, couleurs de statut seulement
   -------------------------------------------------------------------------- */
.statut {
    display: inline-flex; align-items: flex-start; gap: var(--sp-2);
    font-size: var(--t-corps); line-height: var(--l-corps); font-weight: 500;
}
.statut .ico { width: 20px; height: 20px; }
.statut--ok        { color: var(--color-success-dark); }
.statut--attention { color: var(--color-warning-dark); }
.statut--echec     { color: var(--color-danger-dark); }
.statut--info      { color: var(--color-info-dark); }
.statut--fond { padding: var(--sp-2) var(--sp-3); border-radius: var(--radius); }
.statut--fond.statut--ok        { background: var(--color-success-soft); }
.statut--fond.statut--attention { background: var(--color-warning-soft); }
.statut--fond.statut--echec     { background: var(--color-danger-soft); }
.statut--fond.statut--info      { background: var(--color-info-soft); }

/* --------------------------------------------------------------------------
   12. Bandeau réversible de 8 s : « [ce qui s'est passé] · Annuler »
   -------------------------------------------------------------------------- */
.bandeau {
    position: absolute;
    z-index: 15;
    left: var(--sp-4); right: var(--sp-4);
    bottom: calc(var(--h-action) + var(--h-onglets) + var(--sp-2));
    display: flex; align-items: center; gap: var(--sp-2);
    min-height: 48px;
    padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-4);
    border-radius: var(--radius-md);
    background: var(--color-text);
    color: var(--color-surface);
    box-shadow: var(--shadow-lg);
}
.bandeau-texte { flex: 1 1 auto; min-width: 0; }
.bandeau .btn-texte { flex: none; }
.bandeau .btn-texte { color: var(--color-primary-soft); font-weight: 600; }
.ecran:not(:has(.ecran-action)) .bandeau { bottom: calc(var(--h-onglets) + var(--sp-2)); }
.ecran-poste .bandeau { left: auto; right: var(--sp-6); bottom: var(--sp-6); max-width: 480px; position: fixed; }

/* --------------------------------------------------------------------------
   13. Feuille du bas (iPhone) avec voile
   -------------------------------------------------------------------------- */
.feuille-voile {
    position: absolute; inset: 0; z-index: 20;
    background: var(--color-overlay);
}
.feuille {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 21;
    display: flex; flex-direction: column; gap: var(--sp-4);
    max-height: calc(100% - var(--h-statut) - var(--h-tete));
    overflow-y: auto;
    padding: var(--sp-2) var(--sp-4) var(--sp-6);
    background: var(--color-surface);
    color: var(--color-text);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    box-shadow: var(--shadow-lg);
}
.feuille::before {   /* poignée */
    content: ""; flex: none; align-self: center;
    width: 36px; height: 5px; border-radius: 3px;
    background: var(--color-control-border);
}
.feuille-titre { font-size: var(--t-ecran); line-height: var(--l-ecran); font-weight: 600; }
/* Actions de la feuille : zone du pouce, boutons empilés pleine largeur */
.feuille-actions { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); }
.feuille-actions .btn-principal, .feuille-actions .btn-contour { width: 100%; }

/* --------------------------------------------------------------------------
   14. Fenêtre de confirmation .qe-dlg (copie de ../_socle/vendor/dialogs.css)
   + surcharge iPhone : titre 18, message 14, boutons 44 px
   -------------------------------------------------------------------------- */
.qe-dlg {
    width: 420px; max-width: calc(100vw - 32px); padding: 0; border: 0; border-radius: 12px;
    background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-lg);
    font: 14px/1.45 var(--font-body);
}
.qe-dlg::backdrop { background: var(--color-overlay); }
.qe-dlg[open] { animation: qe-pop var(--qe-dur, 120ms) var(--ease-out); }
.qe-dlg-b { padding: 20px 20px 16px; }
.qe-dlg-t { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.qe-dlg-m { margin: 6px 0 0; font-size: 13px; color: var(--color-text-soft); }
.qe-dlg-f {
    display: flex; justify-content: flex-end; gap: 10px; padding: 12px 20px;
    border-top: 1px solid var(--color-border); background: var(--color-bg-subtle); border-radius: 0 0 12px 12px;
}
.qe-bp, .qe-bs {
    height: 36px; padding: 0 16px; border-radius: 6px; cursor: pointer;
    font: 600 13.5px/1 var(--font-body); white-space: nowrap; display: inline-flex; align-items: center; gap: 8px;
}
.qe-bp { border: 0; background: var(--color-primary); color: var(--color-on-solid); box-shadow: var(--shadow-xs); }
.qe-bp:hover { background: var(--color-primary-hover); }
.qe-bs { padding: 0 14px; border: 1px solid var(--color-control-border); background: var(--color-surface); color: var(--color-text); font-weight: 500; }
.qe-bs:hover { background: var(--color-primary-ultra); }
.qe-bp:focus-visible, .qe-bs:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.qe-bp:disabled, .qe-bs:disabled { opacity: .55; cursor: not-allowed; }
.qe-dlg-m.is-note { margin-top: 10px; font-size: 12.5px; color: var(--color-text-muted); }
.qe-dlg-m b { color: var(--color-text); font-weight: 600; }
.qe-dlg-err { margin: 10px 0 0; font-size: 12.5px; color: var(--color-danger-dark); }
@keyframes qe-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Surcharge Journée : tenir l'échelle 14 / 18 (rien sous 14 px), graisse 500 des boutons */
.qe-dlg-m, .qe-dlg-m.is-note, .qe-dlg-err { font-size: var(--t-corps); line-height: var(--l-corps); }
.qe-dlg-m, .qe-dlg-m.is-note { margin-top: var(--sp-2); }   /* grille de 8 px, y compris la note */
.qe-bp, .qe-bs { font: 500 var(--t-corps)/var(--l-corps) var(--font-body); }
.qe-dlg-t { font-size: var(--t-carte); line-height: var(--l-carte); }
.ecran .qe-dlg-f, .qe-dlg--iphone .qe-dlg-f { flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); gap: var(--sp-2); }
.ecran .qe-dlg-b, .qe-dlg--iphone .qe-dlg-b { padding: var(--sp-6) var(--sp-4) var(--sp-4); }
.ecran .qe-bp, .ecran .qe-bs,
.qe-dlg--iphone .qe-bp, .qe-dlg--iphone .qe-bs {
    flex: 1 1 auto; justify-content: center;
    height: auto; min-height: 44px; padding: var(--sp-2) var(--sp-4);
    white-space: normal; text-align: center;
}
.ecran-poste .qe-dlg-t { font-size: var(--t-carte); }

/* --------------------------------------------------------------------------
   15. Verrou (I0) : contenu précédent flouté et illisible derrière un voile
   -------------------------------------------------------------------------- */
.verrou-fond {
    position: absolute; inset: var(--h-statut) 0 0; z-index: 0;
    overflow: hidden;
    filter: blur(12px);
    pointer-events: none;
    user-select: none;
}
.verrou-voile {
    position: absolute; inset: var(--h-statut) 0 0; z-index: 1;
    background: color-mix(in srgb, var(--color-bg) 66%, transparent);
}
.verrou {
    position: relative; z-index: 2;
    flex: 1 1 auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-6) var(--sp-4);
    text-align: center;
}
.verrou .ico { width: 32px; height: 32px; color: var(--color-text-soft); margin-bottom: var(--sp-2); }
.verrou ~ .ecran-action, .verrou + .ecran-action { position: relative; z-index: 2; background: transparent; border-top: 0; }

/* --------------------------------------------------------------------------
   16. Mouvement réduit
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .qe-dlg[open] { animation: none; }
}