/* wip.webelse.fr — design tokens + app shell.
   Mobile d'abord (390 px de référence), cibles tactiles >= 44 px.
   Voir _inspiration/02-ecrans.md pour le langage visuel. */

:root {
    color-scheme: light dark;

    /* Surfaces et texte */
    --c-bg: #f6f7f9;
    --c-surface: #ffffff;
    --c-surface-2: #eef0f4;
    --c-text: #14181f;
    --c-muted: #6b7482;
    --c-border: #dde1e8;
    --c-accent: #2d5bd7;
    --c-accent-contrast: #ffffff;

    /* États d'une demande */
    --etat-recue: #2d6fd7;
    --etat-encours: #17915c;
    --etat-terminee: #8b939f;
    --etat-annulee: #8b939f;
    --etat-reportee: #7a4ed0;

    /* Surcouches : elles se superposent à l'état, elles ne le remplacent pas */
    --alerte-attente: #c9760a;
    --alerte-souffrance: #cf3030;

    /* Responsables d'une attente — doivent rester distincts au coup d'œil */
    --resp-client: #c9760a;
    --resp-collegue: #7a4ed0;
    --resp-moi: #17915c;
    --resp-externe: #b03060;

    --radius: 12px;
    --gap: 12px;
    --tap: 44px;
    --shadow: 0 1px 2px rgb(16 24 40 / 6%), 0 1px 3px rgb(16 24 40 / 10%);
    --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --c-bg: #101317;
        --c-surface: #191d23;
        --c-surface-2: #22272f;
        --c-text: #e8ecf1;
        --c-muted: #99a3b1;
        --c-border: #2c323b;
        --c-accent: #6b93ff;
        --c-accent-contrast: #0b0e12;

        --etat-recue: #6b9cff;
        --etat-encours: #3fc78c;
        --etat-terminee: #79828f;
        --etat-annulee: #79828f;
        --etat-reportee: #a984ff;

        --alerte-attente: #efa441;
        --alerte-souffrance: #ff6b6b;

        --resp-client: #efa441;
        --resp-collegue: #a984ff;
        --resp-moi: #3fc78c;
        --resp-externe: #f07aa4;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0 0 5rem;
    background: var(--c-bg);
    color: var(--c-text);
    font: 16px/1.45 var(--font);
    -webkit-text-size-adjust: 100%;
}

.shell {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 var(--gap);
}

/* —— Entête ————————————————————————————————————————————————— */

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: var(--gap);
    padding: calc(env(safe-area-inset-top, 0px) + 10px) var(--gap) 10px;
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
}

.topbar h1 { margin: 0; font-size: 1.15rem; }
.topbar .spacer { margin-left: auto; }

/* —— Sections ——————————————————————————————————————————————— */

.section { margin: 1.25rem 0; }

.section > h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-muted);
}

.section .count {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

/* —— Cartes ————————————————————————————————————————————————— */

.carte {
    display: block;
    padding: 12px 14px;
    margin-bottom: 8px;
    color: inherit;
    text-decoration: none;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-left: 4px solid var(--etat-terminee);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* —— État vide : c'est l'écran le plus fréquent, il doit être agréable —— */

.vide {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--c-muted);
    background: var(--c-surface);
    border: 1px dashed var(--c-border);
    border-radius: var(--radius);
}

/* —— Icônes ————————————————————————————————————————————————— */

.icon {
    width: 20px;
    height: 20px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* —— Bouton flottant « + » ————————————————————————————————— */

.fab {
    position: fixed;
    right: 16px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    background: var(--c-accent);
    color: var(--c-accent-contrast);
    border-radius: 50%;
    box-shadow: 0 6px 16px rgb(16 24 40 / 25%);
    text-decoration: none;
}

.fab .icon { width: 26px; height: 26px; stroke-width: 2; }

/* —— Formulaires ———————————————————————————————————————————————— */

label {
    display: block;
    margin: 14px 0 4px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--c-muted);
}

input[type="email"],
input[type="password"],
input[type="text"],
input[type="date"],
textarea,
select {
    width: 100%;
    min-height: var(--tap);
    padding: 10px 12px;
    font: inherit;
    color: var(--c-text);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.bouton:focus-visible,
a:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
}

.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: var(--tap);
    margin-top: 20px;
    padding: 0 16px;
    font: inherit;
    font-weight: 600;
    color: var(--c-accent-contrast);
    background: var(--c-accent);
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
}

.connexion {
    max-width: 380px;
    margin: 2rem auto;
    padding: 20px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.erreur {
    margin: 0 0 12px;
    padding: 10px 12px;
    color: var(--alerte-souffrance);
    background: color-mix(in srgb, var(--alerte-souffrance) 12%, transparent);
    border-radius: var(--radius);
}

/* —— Lien discret de la barre du haut ——————————————————————————— */

.lien-icone {
    display: grid;
    place-items: center;
    width: var(--tap);
    height: var(--tap);
    margin: -10px -6px -10px 0;
    color: var(--c-muted);
    border-radius: 50%;
}

/* —— Couleurs de projet ————————————————————————————————————————— */

:root {
    --projet-violet: #7a4ed0;
    --projet-bleu: #2d6fd7;
    --projet-vert: #17915c;
    --projet-ambre: #c9760a;
    --projet-rose: #d0417f;
    --projet-turquoise: #0e8c96;
    --projet-indigo: #4b4fd0;
    --projet-ardoise: #5a6676;
}

@media (prefers-color-scheme: dark) {
    :root {
        --projet-violet: #a984ff;
        --projet-bleu: #6b9cff;
        --projet-vert: #3fc78c;
        --projet-ambre: #efa441;
        --projet-rose: #ff7ab0;
        --projet-turquoise: #3fc3cd;
        --projet-indigo: #8285ff;
        --projet-ardoise: #93a1b2;
    }
}

.couleur-violet { --projet: var(--projet-violet); }
.couleur-bleu { --projet: var(--projet-bleu); }
.couleur-vert { --projet: var(--projet-vert); }
.couleur-ambre { --projet: var(--projet-ambre); }
.couleur-rose { --projet: var(--projet-rose); }
.couleur-turquoise { --projet: var(--projet-turquoise); }
.couleur-indigo { --projet: var(--projet-indigo); }
.couleur-ardoise { --projet: var(--projet-ardoise); }

/* —— Liste des projets —————————————————————————————————————————— */

.liste-projets {
    margin: 1rem 0;
    padding: 0;
    list-style: none;
}

.carte-projet {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--tap);
    padding: 12px 14px;
    margin-bottom: 8px;
    color: inherit;
    text-decoration: none;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-left: 4px solid var(--projet, var(--c-border));
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.carte-projet__icone { color: var(--projet, var(--c-muted)); }
.carte-projet__texte { display: flex; flex-direction: column; min-width: 0; }
.carte-projet__nom { font-weight: 600; }
.carte-projet__client { font-size: .8rem; color: var(--c-muted); }
.carte-projet__chevron { margin-left: auto; color: var(--c-muted); }

.badge {
    padding: 2px 8px;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
    border-radius: 999px;
    background: var(--c-surface-2);
    color: var(--c-muted);
}

.badge--en_pause { color: var(--alerte-attente); }
.badge--termine,
.badge--archive { color: var(--c-muted); }
.badge--actif { color: var(--etat-encours); }

/* —— Fiche projet ——————————————————————————————————————————————— */

.lien-retour {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: var(--tap);
    margin-right: 2px;
    color: var(--c-muted);
    vertical-align: middle;
}

.lien-retour .icon { transform: rotate(180deg); }

.entete-projet {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    margin-top: 1rem;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-left: 4px solid var(--projet, var(--c-border));
    border-radius: var(--radius);
}

.entete-projet__icone { width: 28px; height: 28px; color: var(--projet); }
.entete-projet__client { margin: 0 0 6px; color: var(--c-muted); }
.bloc-texte { margin: 0; padding: 12px 14px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); }

/* —— Formulaire de projet ——————————————————————————————————————— */

.formulaire {
    margin: 1rem 0;
    padding: 16px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
}

.choix-couleurs,
.choix-icones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pastille {
    position: relative;
    width: var(--tap);
    height: var(--tap);
    margin: 0;
    background: var(--projet);
    border: 3px solid transparent;
    border-radius: 50%;
    cursor: pointer;
}

.pastille:has(input:checked) { border-color: var(--c-text); }
.pastille input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }

.choix-icone {
    display: grid;
    place-items: center;
    width: var(--tap);
    height: var(--tap);
    margin: 0;
    color: var(--c-muted);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    cursor: pointer;
}

.choix-icone:has(input:checked) { color: var(--c-accent); border-color: var(--c-accent); }
.choix-icone input { position: absolute; opacity: 0; width: 0; height: 0; }

.visuellement-cache {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* —— Navigation basse ——————————————————————————————————————————— */

.barre-onglets {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    display: flex;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--c-surface);
    border-top: 1px solid var(--c-border);
}

.barre-onglets a {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    font-size: .7rem;
    color: var(--c-muted);
    text-decoration: none;
}

.barre-onglets a.actif { color: var(--c-accent); }

/* Le bouton flottant remonte au-dessus de la barre d'onglets. */
.fab { bottom: calc(env(safe-area-inset-bottom, 0px) + 72px); }

/* —— Cartes de demande ————————————————————————————————————————— */

.icon--petite { width: 15px; height: 15px; }

.carte-demande {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.carte__projet {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 1px 8px;
    margin-bottom: 2px;
    font-size: .72rem;
    font-weight: 600;
    color: var(--projet);
    background: color-mix(in srgb, var(--projet) 14%, transparent);
    border-radius: 999px;
}

.carte__titre { font-weight: 600; }

.carte__meta {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: .8rem;
    color: var(--c-muted);
}

/* —— Fiche demande ————————————————————————————————————————————— */

.titre-demande { margin: 1rem 0 2px; font-size: 1.3rem; }

.sous-titre {
    display: flex;
    gap: 6px;
    align-items: center;
    margin: 0 0 1rem;
    font-size: .85rem;
    color: var(--c-muted);
}

.etat-courant {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px 14px;
    margin: 0;
    font-weight: 600;
    color: var(--etat, var(--c-text));
    background: color-mix(in srgb, var(--etat, var(--c-border)) 12%, var(--c-surface));
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
}

.etat--recue { --etat: var(--etat-recue); }
.etat--en_cours { --etat: var(--etat-encours); }
.etat--terminee { --etat: var(--etat-terminee); }
.etat--annulee { --etat: var(--etat-annulee); }
.etat--reportee { --etat: var(--etat-reportee); }

.carte--recue { border-left-color: var(--etat-recue); }
.carte--en_cours { border-left-color: var(--etat-encours); }
.carte--terminee { border-left-color: var(--etat-terminee); }
.carte--annulee { border-left-color: var(--etat-annulee); }
.carte--reportee { border-left-color: var(--etat-reportee); }

.actions-etat {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 1rem;
}

.actions-etat form {
    display: flex;
    flex: 1 1 calc(50% - 8px);
    gap: 6px;
    align-items: center;
    min-width: 150px;
}

.actions-etat input[type="date"] { flex: 1; min-width: 0; }

.bouton-etat {
    display: inline-flex;
    flex: 1;
    gap: 6px;
    align-items: center;
    justify-content: center;
    min-height: var(--tap);
    padding: 0 12px;
    font: inherit;
    font-weight: 600;
    color: var(--c-text);
    cursor: pointer;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
}

.bouton-etat--demarrer { color: var(--etat-encours); }
.bouton-etat--terminer { color: var(--etat-encours); }
.bouton-etat--annuler { color: var(--alerte-souffrance); }
.bouton-etat--reporter { color: var(--etat-reportee); }
.bouton-etat--rouvrir { color: var(--etat-recue); }

/* —— Journal ——————————————————————————————————————————————————— */

.journal {
    margin: 0;
    padding: 0;
    list-style: none;
}

.journal__entree {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 10px;
    padding: 10px 14px;
    margin-bottom: 6px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-left: 3px solid var(--c-border);
    border-radius: var(--radius);
}

.journal__entree--changement_etat { border-left-color: var(--c-accent); }
.journal__entree--relance { border-left-color: var(--alerte-attente); }
.journal__quand { font-size: .78rem; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.journal__qui { font-size: .78rem; color: var(--c-muted); }
.journal__texte { grid-column: 1 / -1; }

/* —— Choix du projet à la capture ——————————————————————————————— */

.choix-projets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.puce {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    min-height: var(--tap);
    padding: 0 14px;
    margin: 0;
    font-size: .88rem;
    color: var(--c-text);
    cursor: pointer;
    border: 1px solid var(--c-border);
    border-radius: 999px;
}

.puce:has(input:checked) {
    color: var(--projet);
    background: color-mix(in srgb, var(--projet) 14%, transparent);
    border-color: var(--projet);
}

.puce input { position: absolute; width: 0; height: 0; opacity: 0; }
.puce .icon { color: var(--projet); }

.repliable { margin-top: 14px; }
.repliable summary { min-height: var(--tap); padding: 12px 0; font-size: .85rem; font-weight: 600; color: var(--c-muted); cursor: pointer; }