/* ============================================================
   TickeChic — feuille de style
   Structure : header sticky, barre de soldes, tabs, table de
   tickets (PC), cartes empilées (mobile), FAB.
   ============================================================ */

/* ---------- Variables ---------- */
:root {
    /* Couleurs — surfaces */
    --bg:           #f1f5f9;
    --surface:      #ffffff;
    --surface-2:    #f8fafc;
    --surface-3:    #eef2f7;

    /* Couleurs — texte */
    --texte:        #0f172a;
    --texte-doux:   #475569;
    --texte-faible: #94a3b8;

    /* Couleurs — bordures */
    --bordure:      #e2e8f0;
    --bordure-2:    #cbd5e1;

    /* Couleurs — accent */
    --accent:       #2563eb;
    --accent-fonce: #1d4ed8;
    --accent-pale:  #dbeafe;
    --accent-texte: #1e40af;

    /* Couleurs — états */
    --ok:           #10b981;
    --ok-pale:      #d1fae5;
    --ok-texte:     #047857;

    --attente:      #f59e0b;
    --attente-pale: #fef3c7;
    --attente-texte:#b45309;

    --danger:       #ef4444;
    --danger-pale:  #fee2e2;
    --danger-texte: #b91c1c;

    /* Espacements (rythme 4px) */
    --e1: 4px;
    --e2: 8px;
    --e3: 12px;
    --e4: 16px;
    --e5: 20px;
    --e6: 24px;
    --e8: 32px;
    --e10: 40px;
    --e12: 48px;

    /* Rayons */
    --r-xs: 6px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-full: 9999px;

    /* Ombres */
    --ombre-1: 0 1px 2px rgba(15,23,42,.06);
    --ombre-2: 0 1px 3px rgba(15,23,42,.08), 0 4px 16px rgba(15,23,42,.06);
    --ombre-3: 0 4px 8px rgba(15,23,42,.10), 0 12px 32px rgba(15,23,42,.08);
    --ombre-fab: 0 4px 12px rgba(37,99,235,.35), 0 8px 24px rgba(37,99,235,.25);

    /* Layout */
    --max: 100%;
    --pad: 1rem;
    --header-h: 56px;
}

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

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--texte);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   Layout principal — header sticky + main
   ============================================================ */

.app {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: var(--e3);
    height: var(--header-h);
    padding: 0 var(--pad);
    background: var(--surface);
    border-bottom: 1px solid var(--bordure);
    box-shadow: var(--ombre-1);
}

.app-header .logo {
    display: block;
    height: 32px;
    width: auto;
    margin: 0;
}

.app-header .titre {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--texte);
}

.app-header .espace {
    flex: 1;
}

.app-header .utilisateur {
    font-size: .85rem;
    font-weight: 600;
    color: var(--texte-doux);
    padding: var(--e1) var(--e3);
    background: var(--surface-2);
    border-radius: var(--r-full);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.app-header .lien-deconnexion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 var(--e4);
    font-size: .85rem;
    font-weight: 600;
    color: var(--texte-doux);
    background: transparent;
    border: 1px solid var(--bordure-2);
    border-radius: var(--r-full);
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
    white-space: nowrap;
}

.app-header .lien-deconnexion:hover {
    background: var(--surface-2);
    color: var(--texte);
    border-color: var(--texte-faible);
}

.app-main {
    flex: 1;
    max-width: var(--max);
    width: 100%;
    margin: 0 auto;
    padding: var(--pad);
}

/* ============================================================
   Barre de soldes — 3 tuiles proéminentes
   ============================================================ */

.solde-barre {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--e3);
    margin-bottom: var(--e5);
}

.solde {
    padding: var(--e4) var(--e5);
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--r-md);
    box-shadow: var(--ombre-1);
    display: flex;
    flex-direction: column;
    gap: var(--e1);
}

.solde-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--texte-faible);
}

.solde-valeur {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--texte);
    font-variant-numeric: tabular-nums;
}

.solde--accent { border-left: 4px solid var(--accent); }
.solde--ok     { border-left: 4px solid var(--ok); }
.solde--attente{ border-left: 4px solid var(--attente); }

.solde-action {
    margin-top: var(--e3);
    display: flex;
    justify-content: flex-end;
}

/* ============================================================
   Onglets Complète / Encours
   ============================================================ */

.tabs {
    display: flex;
    gap: var(--e1);
    padding: var(--e1);
    margin-bottom: var(--e5);
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--r-md);
    box-shadow: var(--ombre-1);
}

.tabs form { margin: 0; flex: 1; }

.tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    padding: 0 var(--e4);
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    color: var(--texte-doux);
    background: transparent;
    border: none;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background .15s, color .15s;
}

.tab:hover {
    background: var(--surface-2);
    color: var(--texte);
}

.tab-actif {
    color: var(--accent-texte);
    background: var(--accent-pale);
}

.tab-actif:hover {
    background: var(--accent-pale);
    color: var(--accent-texte);
}

/* ============================================================
   Liste des tickets — table sur PC, cartes sur mobile
   ============================================================ */

.tickets-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--e3);
    gap: var(--e3);
}

.tickets-titre {
    margin: 0;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--texte-faible);
}

/* --- Table (PC) : masquée par défaut, visible à partir de 720px --- */
.tickets-table {
    display: none;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--r-md);
    box-shadow: var(--ombre-1);
    overflow: hidden;
}

.tickets-table thead th {
    padding: var(--e3) var(--e4);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--texte-faible);
    text-align: left;
    background: var(--surface-2);
    border-bottom: 1px solid var(--bordure);
    white-space: nowrap;
}

.tickets-table thead th.col-montant,
.tickets-table tbody td.col-montant { text-align: right; }

.tickets-table thead th.col-actions,
.tickets-table tbody td.col-actions { text-align: right; width: 1%; white-space: nowrap; }

/* Ligne de groupe de date */
.tickets-table tbody tr.groupe-row td {
    padding: var(--e3) var(--e4) var(--e2);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent-texte);
    background: var(--accent-pale);
    border-top: 1px solid var(--bordure);
}

.tickets-table tbody tr.groupe-row:first-child td {
    border-top: none;
}

/* Ligne de ticket */
.tickets-table tbody tr.ticket-row {
    transition: background .12s;
}

.tickets-table tbody tr.ticket-row:hover {
    background: var(--surface-2);
}

.tickets-table tbody td {
    padding: var(--e3) var(--e4);
    font-size: .92rem;
    border-bottom: 1px solid var(--bordure);
    vertical-align: middle;
}

.tickets-table tbody tr.ticket-row:last-child td {
    border-bottom: none;
}

.tickets-table .cell-tiers {
    font-weight: 500;
    color: var(--texte);
}

.tickets-table .cell-montant {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.montant-negatif { color: var(--danger-texte); }
.montant-positif { color: var(--ok-texte); }

.cell-actions {
    display: flex;
    gap: var(--e2);
    justify-content: flex-end;
    flex-wrap: nowrap;
}

.cell-actions form { margin: 0; }

/* --- Cartes (mobile) : visibles par défaut, masquées à partir de 720px --- */
.tickets-cartes {
    display: flex;
    flex-direction: column;
    gap: var(--e3);
}

.ticket-card {
    padding: var(--e4);
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--r-md);
    box-shadow: var(--ombre-1);
    display: flex;
    flex-direction: column;
    gap: var(--e3);
    transition: box-shadow .15s, border-color .15s;
}

.ticket-card:hover {
    border-color: var(--bordure-2);
    box-shadow: var(--ombre-2);
}

.ticket-card-entete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--e3);
}

.ticket-card-tiers {
    font-size: 1rem;
    font-weight: 600;
    color: var(--texte);
    margin: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ticket-card-montant {
    font-size: 1.1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ticket-card-meta {
    display: flex;
    align-items: center;
    gap: var(--e2);
    font-size: .82rem;
    color: var(--texte-faible);
}

.ticket-card-actions {
    display: flex;
    gap: var(--e2);
    flex-wrap: wrap;
    padding-top: var(--e2);
    border-top: 1px solid var(--bordure);
}

.ticket-card-actions form { margin: 0; flex: 1 1 auto; }
.ticket-card-actions .btn { width: 100%; }

/* ============================================================
   Badges de statut
   ============================================================ */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--e1);
    padding: 2px var(--e3);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    border-radius: var(--r-full);
    white-space: nowrap;
}

.badge-ok {
    background: var(--ok-pale);
    color: var(--ok-texte);
}

.badge-attente {
    background: var(--attente-pale);
    color: var(--attente-texte);
}

.badge-ok::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ok);
}

.badge-attente::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--attente);
}

/* ============================================================
   Boutons
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e2);
    padding: var(--e2) var(--e4);
    font: inherit;
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.2;
    min-height: 40px;
    color: #fff;
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: var(--r-sm);
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, border-color .15s, transform .05s, box-shadow .15s;
    white-space: nowrap;
}

.btn:hover  { background: var(--accent-fonce); border-color: var(--accent-fonce); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible {
    outline: 3px solid var(--accent-pale);
    outline-offset: 2px;
}
.btn:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
}

.btn-secondaire {
    color: var(--texte);
    background: var(--surface);
    border-color: var(--bordure-2);
    box-shadow: var(--ombre-1);
}
.btn-secondaire:hover {
    background: var(--surface-2);
    color: var(--texte);
    border-color: var(--texte-faible);
}

.btn-danger {
    color: var(--danger-texte);
    background: var(--surface);
    border-color: var(--bordure-2);
    box-shadow: var(--ombre-1);
}
.btn-danger:hover {
    background: var(--danger-pale);
    border-color: var(--danger);
    color: var(--danger-texte);
}

.btn-petit {
    min-height: 32px;
    padding: var(--e1) var(--e3);
    font-size: .8rem;
    border-radius: var(--r-xs);
}

.btn-large {
    width: 100%;
    min-height: 44px;
    font-size: .95rem;
}

/* ============================================================
   FAB — bouton flottant "Nouveau ticket"
   ============================================================ */

.fab {
    position: fixed;
    right: var(--pad);
    bottom: var(--pad);
    z-index: 90;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e2);
    height: 56px;
    padding: 0 var(--e5);
    font: inherit;
    font-size: .95rem;
    font-weight: 700;
    color: #fff;
    background: var(--accent);
    border: none;
    border-radius: var(--r-full);
    cursor: pointer;
    box-shadow: var(--ombre-fab);
    transition: background .15s, transform .1s, box-shadow .15s;
    text-decoration: none;
}

.fab:hover {
    background: var(--accent-fonce);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(37,99,235,.4), 0 12px 32px rgba(37,99,235,.3);
}

.fab:active { transform: translateY(0); }

.fab-icone {
    font-size: 1.4rem;
    line-height: 1;
    font-weight: 300;
}

.fab-label { display: inline; }

/* ============================================================
   Formulaires
   ============================================================ */

.formulaire {
    display: flex;
    flex-direction: column;
    gap: var(--e3);
    max-width: 480px;
    margin: 0 auto;
}

.formulaire.tout-large {
    max-width: none;
}

.champ {
    display: flex;
    flex-direction: column;
    gap: var(--e1);
}

.champ label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--texte-doux);
}

.champ .aide {
    font-size: .78rem;
    color: var(--texte-faible);
    font-style: italic;
    margin: 0;
}

input[type="text"],
input[type="password"],
input[type="date"],
input[type="email"],
input[type="number"],
select,
textarea {
    display: block;
    width: 100%;
    padding: var(--e2) var(--e3);
    font: inherit;
    font-size: .95rem;
    color: var(--texte);
    background: var(--surface);
    border: 1px solid var(--bordure-2);
    border-radius: var(--r-sm);
    min-height: 44px;
    transition: border-color .15s, box-shadow .15s;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-pale);
}

input::placeholder { color: var(--texte-faible); }

textarea {
    min-height: 90px;
    resize: vertical;
}

/* ============================================================
   Cartes génériques (login, register, formulaire)
   ============================================================ */

.card {
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--r-md);
    padding: var(--e5);
    box-shadow: var(--ombre-1);
    margin-bottom: var(--e4);
}

.card h2 {
    margin: 0 0 var(--e4);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--texte-faible);
}

.card p {
    margin: 0 0 var(--e3);
    color: var(--texte-doux);
    font-size: .92rem;
}

.card-titre {
    margin: 0 0 var(--e5);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--texte);
}

/* ============================================================
   Messages (erreur, succès)
   ============================================================ */

.message-erreur,
.message-succes {
    padding: var(--e3) var(--e4);
    border-radius: var(--r-sm);
    border-left: 4px solid;
    margin-bottom: var(--e4);
    font-size: .92rem;
    line-height: 1.5;
}

.message-erreur {
    background: var(--danger-pale);
    color: var(--danger-texte);
    border-color: var(--danger);
}

.message-succes {
    background: var(--ok-pale);
    color: var(--ok-texte);
    border-color: var(--ok);
}

.message-erreur p,
.message-succes p {
    margin: 0;
    color: inherit;
}

.message-erreur strong,
.message-succes strong {
    font-weight: 700;
}

/* ============================================================
   Placeholder (état vide)
   ============================================================ */

.placeholder {
    padding: var(--e8) var(--e4);
    text-align: center;
    color: var(--texte-faible);
    font-size: .92rem;
    font-style: italic;
    background: var(--surface-2);
    border: 1px dashed var(--bordure-2);
    border-radius: var(--r-md);
    margin: var(--e3) 0;
}

/* ============================================================
   Actions centrées
   ============================================================ */

.actions-centre {
    display: flex;
    justify-content: center;
    gap: var(--e3);
    margin: var(--e4) 0 var(--e2);
    flex-wrap: wrap;
}

.actions-centre form { margin: 0; }

/* ============================================================
   Pied de page
   ============================================================ */

.pied {
    text-align: center;
    color: var(--texte-faible);
    font-size: .78rem;
    margin: var(--e6) 0 0;
    padding-top: var(--e4);
    border-top: 1px solid var(--bordure);
}

/* ============================================================
   Page de login / register (centrée)
   ============================================================ */

.page-auth {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--pad);
}

.page-auth .container {
    width: 100%;
    max-width: 420px;
}

.page-auth .logo {
    display: block;
    height: 56px;
    margin: 0 auto var(--e4);
}

.page-auth .entete {
    text-align: center;
    margin-bottom: var(--e6);
}

.page-auth .entete h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--texte);
}

.page-auth .entete .sous-titre {
    margin: var(--e1) 0 0;
    font-size: .92rem;
    color: var(--texte-doux);
}

/* ============================================================
   Responsive
   ============================================================ */

/* Tablette */
@media (min-width: 720px) {
    :root {
        --pad: 1.5rem;
        --max: 720px;
    }

    .solde-barre {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Bascule cartes -> table */
    .tickets-table { display: table; }
    .tickets-cartes { display: none; }

    /* FAB compact (icône seule) */
    .fab {
        height: 52px;
        padding: 0 var(--e4);
    }
    .fab-label { display: none; }
}

/* PC */
@media (min-width: 1024px) {
    :root {
        --max: 960px;
        --header-h: 64px;
    }

    .app-header .utilisateur { max-width: 220px; }

    .solde-valeur { font-size: 1.8rem; }

    .app-main { padding: var(--e6) var(--pad) var(--e8); }

    /* FAB avec label sur grand écran */
    .fab {
        height: 56px;
        padding: 0 var(--e5);
        right: var(--e6);
        bottom: var(--e6);
    }
    .fab-label { display: inline; }
}

/* ============================================================
   Accessibilité — réduire les animations si demandé
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .fab:hover { transform: none; }
}

/* ============================================================
   Page d'accueil : deux cartes côte à côte sur PC
   ============================================================ */

.page-auth .conteneur-cartes {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--e4);
    margin-bottom: var(--e4);
}

.page-auth .conteneur-cartes > .card {
    margin-bottom: 0;
}

@media (min-width: 900px) {
    .page-auth .container {
        max-width: 900px;
    }
    .page-auth .conteneur-cartes {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}