/*
 * The Relaunch Tool — charte visuelle CHARTE-DESIGN.md v1.0.
 * Les variables ci-dessous reprennent EXACTEMENT la table sémantique (§3) :
 * elles sont la seule source des couleurs de l'appli. Grille de 8 (§4),
 * Inter (§2, importée depuis app.js via l'importmap), une action principale
 * bleue par écran (§1).
 */
:root {
    --c-fond: #ffffff;
    --c-surface: #f2f2f7;
    --c-texte: #000000;
    --c-texte-2: #3c3c4399;
    --c-succes: #34c759;
    --c-retard: #ff9500;
    --c-danger: #ff3b30;
    --c-action: #007aff;
    --c-bordure: #3c3c4333;

    --r-carte: 12px;
    --r-bouton: 12px;
    --r-feuille: 16px;

    --grille: 8px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --c-fond: #000000;
        --c-surface: #1c1c1e;
        --c-texte: #ffffff;
        --c-texte-2: #ebebf599;
        --c-succes: #30d158;
        --c-retard: #ff9f0a;
        --c-danger: #ff453a;
        --c-action: #0a84ff;
    }
}

/* Bascule manuelle (M0-4) : le choix explicite prime sur la préférence
   du système — mêmes jetons que la table §3, aucune couleur nouvelle. */
:root[data-theme="sombre"] {
    --c-fond: #000000;
    --c-surface: #1c1c1e;
    --c-texte: #ffffff;
    --c-texte-2: #ebebf599;
    --c-succes: #30d158;
    --c-retard: #ff9f0a;
    --c-danger: #ff453a;
    --c-action: #0a84ff;
}

:root[data-theme="clair"] {
    --c-fond: #ffffff;
    --c-surface: #f2f2f7;
    --c-texte: #000000;
    --c-texte-2: #3c3c4399;
    --c-succes: #34c759;
    --c-retard: #ff9500;
    --c-danger: #ff3b30;
    --c-action: #007aff;
}

* {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    background: var(--c-fond);
    color: var(--c-texte);
    font-family: 'Inter Variable', system-ui, sans-serif;
    font-size: 17px; /* corps mobile — jamais sous 17 (§2) */
    line-height: 1.4;
}

@media (min-width: 768px) {
    body {
        font-size: 16px; /* desktop : corps 16, rien d'autre ne change (§2) */
    }
}

h1 {
    margin: 0 0 calc(2 * var(--grille));
    font-size: clamp(28px, 6vw, 34px); /* titre d'écran 34 mobile (§2) */
    line-height: 1.25;
    font-weight: 600;
}

@media (min-width: 768px) {
    h1 {
        font-size: clamp(34px, 4vw, 40px); /* desktop : titres 40 (§2) */
    }
}

a {
    color: var(--c-action);
    text-decoration: none;
}

/* --- Écrans -------------------------------------------------------------- */

.screen,
.auth-screen {
    max-width: 480px;
    margin: 0 auto;
    padding: calc(2 * var(--grille));
}

@media (min-width: 768px) {
    .screen,
    .auth-screen {
        max-width: 640px;
        padding: calc(4 * var(--grille)) calc(2 * var(--grille));
    }
}

.auth-screen {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.screen-subtitle {
    margin: 0 0 calc(3 * var(--grille));
    color: var(--c-texte-2);
    font-size: 15px;
    line-height: 20px;
}

/* --- Cartes (surface, séparation par l'espace — §4) ---------------------- */

.card-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: calc(2 * var(--grille));
}

.card {
    background: var(--c-surface);
    border-radius: var(--r-carte);
    padding: calc(2 * var(--grille));
}

.card-link {
    display: flex;
    flex-direction: column;
    gap: calc(0.5 * var(--grille));
    min-height: 44px; /* zone tactile ≥ 44 (§4) */
    justify-content: center;
    color: inherit;
}

.card-title {
    font-weight: 500;
}

.card-subtitle {
    color: var(--c-texte-2);
    font-size: 15px;
    line-height: 20px;
}

.empty-state {
    color: var(--c-texte-2);
    padding: calc(3 * var(--grille)) 0;
    text-align: center;
}

.back-link {
    margin: 0 0 calc(2 * var(--grille));
    font-size: 15px;
}

/* --- Formulaires ---------------------------------------------------------- */

.field {
    display: flex;
    flex-direction: column;
    gap: calc(1 * var(--grille));
    margin-bottom: calc(2 * var(--grille));
}

.field label {
    font-weight: 500;
    font-size: 15px;
}

.field input {
    appearance: none;
    background: var(--c-surface);
    color: var(--c-texte);
    border: none;
    border-radius: var(--r-carte);
    padding: calc(1.5 * var(--grille));
    min-height: 44px; /* zone tactile (§4) */
    font: inherit;
}

.field input:focus-visible {
    outline: 2px solid var(--c-action);
    outline-offset: 1px;
}

.form-error {
    color: var(--c-danger);
    background: var(--c-surface);
    border-radius: var(--r-carte);
    padding: calc(1.5 * var(--grille));
    margin: 0 0 calc(2 * var(--grille));
}

/* --- Action principale : bleu, h≥50, pleine largeur mobile (§1, §4) ------- */

.btn-action {
    display: block;
    width: 100%;
    min-height: 50px;
    margin-top: calc(1 * var(--grille));
    background: var(--c-action);
    color: var(--c-fond);
    border: none;
    border-radius: var(--r-bouton);
    padding: calc(1.5 * var(--grille));
    font: inherit;
    font-weight: 700; /* 700 réservé à l'action principale (§2) */
    cursor: pointer;
}

.btn-action:focus-visible {
    outline: 2px solid var(--c-action);
    outline-offset: 2px;
}

/* --- FileConversation (§5.7) : bulles pleine largeur, sans avatar ----- */

.conversation {
    display: flex;
    flex-direction: column;
    gap: calc(2 * var(--grille));
    margin-bottom: calc(3 * var(--grille));
}

.bulle-systeme {
    margin: 0;
    color: var(--c-texte-2);
    font-size: 15px;
    line-height: 20px;
    text-align: center;
}

.bulle {
    border-radius: var(--r-carte);
    padding: calc(1.5 * var(--grille));
}

.bulle-question {
    background: var(--c-surface);
}

.bulle-reponse {
    background: var(--c-fond);
    border: 1px solid var(--c-bordure); /* 1px max (§4) */
}

.reponses {
    display: flex;
    flex-direction: column;
    gap: calc(1 * var(--grille));
}

.puce-reponse {
    min-height: 44px; /* zone tactile (§4) */
    background: var(--c-fond);
    color: var(--c-texte);
    border: 1px solid var(--c-bordure);
    border-radius: var(--r-bouton);
    padding: calc(1.5 * var(--grille));
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.puce-reponse:focus-visible {
    outline: 2px solid var(--c-action);
    outline-offset: 2px;
}

.champ-libre {
    display: flex;
    flex-direction: column;
    gap: calc(1 * var(--grille));
}

.champ-libre input {
    appearance: none;
    background: var(--c-fond);
    color: var(--c-texte);
    border: 1px solid var(--c-bordure);
    border-radius: var(--r-carte);
    min-height: 44px;
    padding: calc(1.5 * var(--grille));
    font: inherit;
}

.champ-libre input:focus-visible {
    outline: 2px solid var(--c-action);
    outline-offset: 1px;
}

/* --- Plan qui se devine (aperçu pendant la conversation, F7bis) -------- */

.plan-apercu {
    background: var(--c-surface);
    border-radius: var(--r-carte);
    padding: calc(2 * var(--grille));
    margin-bottom: calc(3 * var(--grille));
}

.plan-apercu h2 {
    margin: 0 0 calc(1.5 * var(--grille));
    font-size: 22px; /* sous-titres 22 (§2) */
    line-height: 28px;
    font-weight: 600;
}

.plan-etapes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: calc(1 * var(--grille));
}

.plan-etapes li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: calc(1 * var(--grille));
    font-size: 15px;
    line-height: 20px;
}

.etape-jour {
    min-width: calc(6 * var(--grille));
    font-variant-numeric: tabular-nums; /* compteurs/dates (§2) */
    font-weight: 500;
}

.etape-canal {
    color: var(--c-texte-2);
    font-size: 13px; /* légende : métadonnées uniquement (§2) */
}

.plan-etapes-dense {
    margin-top: calc(1.5 * var(--grille));
}

/* --- Démo qui se joue seule : apparitions échelonnées CSS (§6) --------- */

@keyframes apparition {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.conversation-demo .demo-item {
    opacity: 0;
    animation: apparition 300ms ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
    .conversation-demo .demo-item {
        opacity: 1;
        animation: none;
    }

    .card-list .card {
        animation: none;
    }
}

/* --- ZoneDepot (§5.9) : dépôt de fichier, l'exception formulaire (F0) -- */

.zone-depot {
    display: flex;
    flex-direction: column;
    gap: calc(1 * var(--grille));
    align-items: center;
    border: 1px dashed var(--c-bordure);
    border-radius: var(--r-carte);
    padding: calc(4 * var(--grille)) calc(2 * var(--grille));
    margin-bottom: calc(2 * var(--grille));
    color: var(--c-texte-2);
    text-align: center;
    cursor: pointer;
}

.zone-depot input[type="file"] {
    min-height: 44px; /* zone tactile (§4) */
    font: inherit;
}

/* --- ChampCapture (§5.3) : saisie en parlant + micro ------------------- */

.champ-capture {
    margin-bottom: calc(3 * var(--grille));
}

.champ-capture-ligne {
    display: flex;
    gap: calc(1 * var(--grille));
    align-items: stretch;
}

.champ-capture-ligne textarea {
    flex: 1;
    appearance: none;
    background: var(--c-fond);
    color: var(--c-texte);
    border: 1px solid var(--c-bordure);
    border-radius: var(--r-carte);
    min-height: 60px;
    padding: calc(1.5 * var(--grille));
    font: inherit;
    resize: vertical;
}

.champ-capture-ligne textarea:focus-visible {
    outline: 2px solid var(--c-action);
    outline-offset: 1px;
}

/* Bouton micro (pro) à droite : zone tactile 44, trait plein, rouge
   SEULEMENT pendant l'écoute (couleur = sens, §3). */
.btn-micro {
    width: 60px;
    min-height: 44px;
    background: var(--c-fond);
    color: var(--c-action);
    border: 1px solid var(--c-bordure);
    border-radius: var(--r-bouton);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.btn-micro[aria-pressed="true"] {
    color: var(--c-danger); /* enregistrement en cours */
    border-color: var(--c-danger);
}

.btn-micro:focus-visible {
    outline: 2px solid var(--c-action);
    outline-offset: 2px;
}

/* --- Files d'attente rapides (clics, F4b) ------------------------------- */

.queues-clics {
    margin-bottom: calc(3 * var(--grille));
}

.queues-clics .titre-section,
.champ-capture .titre-section {
    margin-bottom: calc(1.5 * var(--grille));
}

/* Bouton nud : lien discret envoie un formulaire (abandon). */
.bouton-nu {
    background: none;
    border: none;
    width: 100%;
    cursor: pointer;
    font: inherit;
}

/* --- Éléments discrets et secondaires ---------------------------------- */

.lien-discret {
    display: block;
    margin-top: calc(2 * var(--grille));
    color: var(--c-texte-2);
    font-size: 15px;
    text-align: center;
    min-height: 44px; /* zone tactile (§4) */
    line-height: 44px;
}

.note-discrete {
    margin: calc(2 * var(--grille)) 0 0;
    color: var(--c-texte-2);
    font-size: 13px; /* légende : métadonnées uniquement (§2) */
    text-align: center;
}

.bouton-secondaire {
    display: block;
    width: 100%;
    min-height: 44px;
    background: var(--c-surface);
    color: var(--c-texte);
    border: none;
    border-radius: var(--r-bouton);
    padding: calc(1.5 * var(--grille));
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

.form-secondaire {
    margin-top: calc(3 * var(--grille));
    padding-top: calc(3 * var(--grille));
    border-top: 1px solid var(--c-bordure);
}

/* --- Cartes à ligne titre + montant (dashboard / import) --------------- */

.card-ligne {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: calc(2 * var(--grille));
}

.card-montant {
    font-variant-numeric: tabular-nums; /* montants (§2) */
    font-weight: 500;
    white-space: nowrap;
}

/* --- Vitrine tarifs ----------------------------------------------------- */

.tarifs-offres {
    display: flex;
    flex-direction: column;
    gap: calc(2 * var(--grille));
    margin-bottom: calc(3 * var(--grille));
}

@media (min-width: 768px) {
    .tarifs-offres {
        flex-direction: row; /* desktop : mêmes cartes élargies (§1.4) */
        align-items: stretch;
    }

    .tarifs-offres .offre {
        flex: 1;
    }
}

.offre h2 {
    margin: 0 0 calc(1 * var(--grille));
    font-size: 22px;
    line-height: 28px;
    font-weight: 600;
}

.offre-prix {
    margin: 0 0 calc(2 * var(--grille));
    font-size: 28px; /* nombre-compteur (§2) */
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.compteur {
    font-variant-numeric: tabular-nums;
}

.offre-details {
    list-style: none;
    margin: 0 0 calc(2 * var(--grille));
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: calc(1 * var(--grille));
    font-size: 15px;
    line-height: 20px;
}

/* --- Fiche chose (§5.8) -------------------------------------------------- */

.chip-statut {
    display: inline-block;
    background: var(--c-surface);
    color: var(--c-texte-2);
    border-radius: 999px; /* pill (§4) */
    padding: calc(0.5 * var(--grille)) calc(2 * var(--grille));
    font-size: 15px;
    margin: 0 0 calc(3 * var(--grille));
}

.chip-succes {
    display: inline-block;
    background: var(--c-surface);
    color: var(--c-succes); /* vert = confirmé (§3) */
    border-radius: 999px;
    padding: calc(0.5 * var(--grille)) calc(2 * var(--grille));
    font-size: 15px;
    font-weight: 500;
}

/* --- Résultat d'import ---------------------------------------------------- */

.titre-section {
    margin: 0 0 calc(1.5 * var(--grille));
    font-size: 22px;
    line-height: 28px;
    font-weight: 600;
}

.liste-exclues {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: calc(1 * var(--grille));
    color: var(--c-texte-2);
    font-size: 15px;
}

.apercu-pdf {
    margin: calc(1.5 * var(--grille)) 0 0;
    padding: calc(1.5 * var(--grille));
    background: var(--c-fond);
    border-radius: var(--r-carte);
    white-space: pre-wrap;
    font-size: 15px;
    line-height: 20px;
    max-height: 300px;
    overflow-y: auto;
}

/* --- Messages flash -------------------------------------------------------- */

.flash {
    max-width: 480px;
    margin: calc(1 * var(--grille)) auto 0;
    background: var(--c-surface);
    border-radius: var(--r-carte);
    padding: calc(1.5 * var(--grille));
    font-size: 15px;
    color: var(--c-texte-2);
    text-align: center;
}

@media (min-width: 768px) {
    .flash {
        max-width: 640px;
    }
}

/* --- BandeauCompteurs (§5.2, mission M0-4) : chips scrollables, valeur
       28 tabular-nums — la vérité vient du journal, jamais des statuts. - */

.compteurs {
    list-style: none;
    margin: 0 0 calc(3 * var(--grille));
    padding: 0;
    display: flex;
    gap: calc(1 * var(--grille));
    overflow-x: auto;
    scrollbar-width: none;
}

.compteurs::-webkit-scrollbar {
    display: none;
}

.compteur-chip {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(0.5 * var(--grille));
    background: var(--c-surface);
    border-radius: var(--r-carte);
    padding: calc(1.5 * var(--grille)) calc(2 * var(--grille));
    min-width: calc(11 * var(--grille));
}

.compteur-val {
    font-size: 28px; /* nombre-compteur (§2) */
    line-height: 34px;
    font-weight: 600;
    font-variant-numeric: tabular-nums; /* compteurs (§2) */
    white-space: nowrap;
}

.compteur-lib {
    font-size: 13px; /* légende : métadonnées uniquement (§2) */
    line-height: 18px;
    color: var(--c-texte-2);
    white-space: nowrap;
}

/* --- CarteTache (§5.1) : l'action courte de la carte, bleue, 44 de haut - */

.btn-action-court {
    display: inline-block;
    min-height: 44px; /* zone tactile (§4) */
    margin-top: calc(1.5 * var(--grille));
    background: var(--c-action);
    color: var(--c-fond);
    border: none;
    border-radius: var(--r-bouton);
    padding: calc(1 * var(--grille)) calc(2.5 * var(--grille));
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: transform 200ms ease-out; /* feedback tactile (F-UX 2) */
}

.btn-action-court:active {
    transform: scale(0.97);
}

.btn-action-court:focus-visible {
    outline: 2px solid var(--c-action);
    outline-offset: 2px;
}

.card-title-lien {
    color: inherit;
    font-weight: 500;
}

/* Retard (mission M0-4) : accent orange — couleur de sens (§3), jamais
   de rouge hors perte. */
.accent-retard {
    color: var(--c-retard);
    font-weight: 600;
}

.accent-succes {
    color: var(--c-succes); /* vert = gagné, encaissé, confirmé (§3) */
}

.accent-danger {
    color: var(--c-danger); /* rouge = perte uniquement (§3) */
}

.chip-statut-inline {
    font-weight: 500;
}

/* Apparition des cartes du dashboard (§6 : 200-300 ms, ease-out). */
.card-list .card {
    animation: apparition 200ms ease-out both;
}

.guide {
    margin: 0 0 calc(2 * var(--grille));
    background: var(--c-surface);
    border-radius: var(--r-carte);
    padding: calc(1.5 * var(--grille));
    color: var(--c-texte-2);
    font-size: 15px;
    line-height: 20px;
}

.etat-vide {
    display: flex;
    flex-direction: column;
    gap: calc(1.5 * var(--grille));
    align-items: center;
    text-align: center;
}

/* --- BarreNavigation bas (§5.10, F-UX 2) : 3 entrées, texte seul ------ */

.nav-bas {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    background: var(--c-fond);
    border-top: 1px solid var(--c-bordure);
    padding-bottom: env(safe-area-inset-bottom); /* safe areas iOS */
    z-index: 10;
}

.nav-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px; /* zone tactile ≥ 44 (§4) */
    color: var(--c-texte-2);
    font-size: 15px;
    font-weight: 500;
    transition: color 200ms ease-out, transform 200ms ease-out;
}

.nav-item:active {
    transform: scale(0.97); /* feedback tactile (F-UX 2) */
}

.nav-item-actif {
    color: var(--c-action);
}

/* La barre est fixe : le contenu respire au-dessus d'elle. */
body.avec-nav {
    padding-bottom: calc(7 * var(--grille) + env(safe-area-inset-bottom));
}

/* --- ChampCapture, version M0 (F-UX 4) : l'entrée en un geste — un
       lien habillé en barre de saisie, le vrai champ arrive en M1-2. --- */

.champ-capture-lien {
    position: fixed;
    left: calc(2 * var(--grille));
    right: calc(2 * var(--grille));
    bottom: calc(14 * var(--grille) + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    background: var(--c-surface);
    border: 1px solid var(--c-bordure);
    border-radius: var(--r-bouton);
    color: var(--c-texte-2);
    font-size: 17px;
    z-index: 9;
}

@media (min-width: 768px) {
    .champ-capture-lien {
        max-width: 640px;
        margin: 0 auto;
    }
}