/* ============================================
   TABLEAU DE BORD — CARROSSERIE DES FOURNELS
   ============================================ */

:root {
    --ink:       #1D1D1F;
    --ink-2:     #1B1F26;
    --line:      rgba(60, 60, 67, .13);
    --line-dark: rgba(255, 255, 255, .09);
    --muted:     rgba(60, 60, 67, .5);
    --bg:        #F2F2F7;
    --panel:     #FFFFFF;
    --accent:    #FF3B30;
    --accent-dark: #E22C22;
    --green:     #16A34A;
    --amber:     #F59E0B;
    --red:       #EF4444;
    --blue:      #2563EB;
    --radius:    18px;
    --ease:      cubic-bezier(.22, .61, .36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--ink);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .login-logo, .stat-num, .brand-mark { letter-spacing: -.03em; font-weight: 700; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

/* ============ CONNEXION ============ */
.login-screen {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(700px 380px at 70% 0%, rgba(255, 59, 48, .18), transparent 60%),
        var(--ink);
}
.login-box {
    width: 100%;
    max-width: 380px;
    padding: 36px 32px;
    background: var(--panel);
    border-radius: var(--radius);
    border: 1px solid var(--line);
}
.login-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.15rem;
    font-weight: 800;
}
.login-logo img { height: 30px; width: auto; }
.login-sub { margin: 8px 0 26px; font-size: .9rem; color: var(--muted); }
.login-box label {
    display: block;
    margin-bottom: 7px;
    font-size: .84rem;
    font-weight: 600;
    color: var(--ink);
}
.login-box input {
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font: inherit;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.login-box input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(255, 59, 48, .16);
}
.login-box button[type="submit"] {
    width: 100%;
    padding: 14px;
    background: var(--accent);
    color: #fff;
    border-radius: 999px;
    font-weight: 600;
    transition: background .2s var(--ease);
}
.login-box button[type="submit"]:hover { background: var(--accent-dark); }
.login-error { display: block; margin-top: 14px; font-size: .87rem; color: var(--red); font-weight: 500; }

/* ============ STRUCTURE ============ */
.admin {
    display: grid;
    grid-template-columns: 248px 1fr;
    min-height: 100vh;
    min-height: 100dvh;      /* iOS : 100vh ignore la barre d'outils de Safari */
}

.sidebar {
    display: flex;
    flex-direction: column;
    background: var(--ink);
    color: rgba(255, 255, 255, .72);
    padding: 22px 16px;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
}
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 8px 22px;
    border-bottom: 1px solid var(--line-dark);
    margin-bottom: 18px;
}
/* Le monogramme du logo, sur le fond sombre de la barre latérale. */
.brand-logo { height: 30px; width: auto; flex: none; }
.sidebar-brand strong { color: #fff; font-size: .9rem; line-height: 1.25; }
.sidebar-nav { display: grid; gap: 4px; }
.nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 11px 13px;
    border-radius: var(--radius);
    font-size: .92rem;
    color: rgba(255, 255, 255, .68);
    text-align: left;
    transition: background .2s var(--ease), color .2s var(--ease);
}
.nav-item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.nav-item.active { background: var(--accent); color: #fff; font-weight: 600; }
.nav-badge {
    margin-left: auto;
    min-width: 22px;
    padding: 2px 7px;
    background: var(--amber);
    color: #1B1200;
    border-radius: var(--radius);
    font-size: .75rem;
    font-weight: 700;
    text-align: center;
}
.nav-item.active .nav-badge { background: #fff; color: var(--accent-dark); }

.sidebar-foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line-dark); }
.sidebar-user { display: flex; align-items: center; gap: 11px; padding: 0 8px 14px; }
.avatar {
    display: grid; place-items: center;
    width: 36px; height: 36px;
    background: rgba(255, 255, 255, .1);
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
}
.sidebar-user strong { display: block; color: #fff; font-size: .88rem; }
.sidebar-user small { font-size: .76rem; color: rgba(255, 255, 255, .45); }
.logout {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 10px 13px;
    border-radius: var(--radius);
    font-size: .88rem;
    color: rgba(255, 255, 255, .6);
    transition: background .2s var(--ease), color .2s var(--ease);
}
.logout:hover { background: rgba(239, 68, 68, .14); color: #FCA5A5; }

.main { min-width: 0; }
.topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 30px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 20;
}
.topbar h1 { font-size: 1.3rem; font-weight: 800; }
.topbar-date { margin-left: auto; font-size: .86rem; color: var(--muted); }
.topbar-date::first-letter { text-transform: uppercase; }
.menu-toggle { display: none; }

.view { display: none; padding: 26px 30px 60px; }
.view.active { display: block; }

/* ============ STATISTIQUES ============ */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    margin-bottom: 32px;
}
.stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    background: var(--panel);
    box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.05);
    border: none;
    border-radius: var(--radius);
}
.stat-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius); flex: none; }
.stat-card.amber .stat-icon { background: #FEF3C7; color: #B45309; }
.stat-card.green .stat-icon { background: #DCFCE7; color: #15803D; }
.stat-card.red   .stat-icon { background: #FEE2E2; color: #B91C1C; }
.stat-card.blue  .stat-icon { background: #DBEAFE; color: #1D4ED8; }
.stat-num { display: block; font-size: 1.7rem; font-weight: 800; line-height: 1; }
.stat-label { display: block; font-size: .84rem; color: var(--muted); margin-top: 4px; }

.block-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 16px; }

/* ============ FILTRES ============ */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.filter {
    padding: 9px 18px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: .88rem;
    color: var(--muted);
    transition: all .2s var(--ease);
}
.filter:hover { border-color: #C9CED8; color: var(--ink); }
.filter.active { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600; }

/* ============ CARTES RENDEZ-VOUS ============ */
.appointments, .messages { display: grid; gap: 14px; }
.appt {
    padding: 22px;
    background: var(--panel);
    border: none;
    border-left: 4px solid var(--line);
    border-radius: var(--radius);
}
.appt.pending   { border-left-color: var(--amber); }
.appt.confirmed { border-left-color: var(--green); }
.appt.refused   { border-left-color: var(--red); opacity: .78; }
.appt-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.appt-name { font-size: 1.05rem; font-weight: 700; }
.appt-meta { font-size: .82rem; color: var(--muted); }
.appt-top-right { display: flex; align-items: center; gap: 8px; }
.appt-status {
    padding: 5px 12px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .02em;
}
.appt-status.pending   { background: #FEF3C7; color: #B45309; }
.appt-status.confirmed { background: #DCFCE7; color: #15803D; }
.appt-status.refused   { background: #FEE2E2; color: #B91C1C; }
.appt-trash {
    display: grid; place-items: center;
    width: 32px; height: 32px;
    border-radius: var(--radius);
    color: var(--muted);
    transition: background .2s var(--ease), color .2s var(--ease);
}
.appt-trash:hover { background: #FEE2E2; color: var(--red); }

.appt-slot {
    margin: 14px 0;
    padding: 11px 15px;
    background: #F8F9FB;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-weight: 600;
    font-size: .93rem;
}
/* Majuscule sur la seule première lettre (« mardi 8 septembre »). */
.appt-slot::first-letter { text-transform: uppercase; }
.appt-slot.none { color: var(--muted); font-weight: 500; font-style: italic; text-transform: none; }

.appt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 8px 22px;
    max-width: 940px;
    font-size: .9rem;
}
.appt-grid span { color: var(--muted); }
.appt-grid a:hover { color: var(--accent); }
.plate {
    display: inline-block;
    padding: 1px 8px;
    border: 1.5px solid var(--ink);
    border-radius: 4px;
    font-weight: 700;
    letter-spacing: .06em;
}
.appt-presta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.chip {
    padding: 5px 11px;
    background: rgba(255, 59, 48, .1);
    color: var(--accent-dark);
    border-radius: var(--radius);
    font-size: .8rem;
    font-weight: 500;
}
.appt-msg {
    margin-top: 14px;
    padding: 13px 15px;
    background: #F8F9FB;
    border-left: 3px solid var(--line);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: .9rem;
    color: #3F444F;
    white-space: pre-wrap;
}
.appt-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.btn-confirm, .btn-refuse, .btn-restore {
    display: inline-block;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 999px;
    font-size: .88rem;
    font-weight: 600;
    transition: all .2s var(--ease);
}
.btn-confirm { background: var(--green); color: #fff; }
.btn-confirm:hover { background: #12833C; }
.btn-refuse { background: #fff; border: 1px solid var(--line); color: var(--red); }
.btn-refuse:hover { background: #FEF2F2; border-color: #FCA5A5; }
.btn-restore { background: #fff; border: 1px solid var(--line); color: var(--ink); }
.btn-restore:hover { border-color: var(--ink); }

.empty-state {
    padding: 46px 20px;
    background: var(--panel);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    text-align: center;
    color: var(--muted);
}


/* ============ TABLEAU DE CARTES ============ */
.kanban {
    display: grid;
    grid-template-columns: repeat(4, minmax(230px, 1fr));
    gap: 14px;
    align-items: start;
}
.col {
    background: rgba(120, 120, 128, .08);
    border-radius: var(--radius);
    padding: 12px;
    min-height: 180px;
    transition: background .15s var(--ease), box-shadow .15s var(--ease);
}
/* Colonne survolée pendant le glisser : on montre où la carte va tomber. */
.col-visee { background: rgba(255, 59, 48, .1); box-shadow: inset 0 0 0 2px var(--accent); }
.col-tete {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 4px 12px;
    font-size: .88rem;
    font-weight: 600;
}
.col-pastille { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.col-pastille.pending { background: var(--amber); }
.col-pastille.rappel { background: var(--blue); }
.col-pastille.confirmed { background: var(--green); }
.col-pastille.refused { background: var(--red); }
.col-compte {
    margin-left: auto;
    min-width: 22px;
    padding: 1px 7px;
    background: rgba(120, 120, 128, .16);
    border-radius: 999px;
    font-size: .78rem;
    text-align: center;
}
.col-liste { display: grid; gap: 10px; }
.col-vide { padding: 14px 4px; font-size: .85rem; color: var(--muted); }

.carte {
    padding: 13px 14px;
    background: var(--panel);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 6px 16px rgba(0, 0, 0, .05);
    cursor: grab;
    touch-action: none;   /* sinon le geste fait défiler la page au lieu de prendre la carte */
    user-select: none;
}
.carte:active { cursor: grabbing; }
/* Carte en cours de déplacement : détachée du flux, elle suit le pointeur. */
.carte-vol {
    position: fixed;
    z-index: 200;
    margin: 0;
    transform: rotate(-1.5deg) scale(1.02);
    box-shadow: 0 20px 44px rgba(0, 0, 0, .22);
    pointer-events: none;
}
.carte-tete { display: flex; align-items: baseline; gap: 8px; }
.carte-tete strong { font-size: .95rem; font-weight: 600; }
.carte-quand { margin-left: auto; font-size: .74rem; color: var(--muted); white-space: nowrap; }
.carte-slot {
    margin-top: 8px;
    padding: 6px 10px;
    background: rgba(120, 120, 128, .1);
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 500;
}
.carte-slot::first-letter { text-transform: uppercase; }
.carte-veh { margin-top: 8px; font-size: .84rem; color: var(--muted); }
.carte-veh .plate { margin-left: 6px; font-size: .78rem; }
.carte-presta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.carte-presta .chip { font-size: .74rem; padding: 3px 9px; }
.chip-reste { background: rgba(120, 120, 128, .14); color: var(--muted); }
.carte-pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}
.carte-lien { font-size: .84rem; font-weight: 500; }
.carte-lien:hover { color: var(--accent); }
.carte-detail {
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(120, 120, 128, .12);
    font-size: .78rem;
    color: var(--ink);
}
.carte-detail:hover { background: var(--ink); color: #fff; }

/* Fiche complète, ouverte depuis « Détail ». */
.modale-fond {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(20, 20, 24, .45);
    backdrop-filter: blur(4px);
}
.modale {
    width: min(660px, 100%);
    max-height: 86vh;
    overflow-y: auto;
    background: var(--bg);
    border-radius: 20px;
    padding: 16px;
}
.modale-fermer {
    width: 100%;
    margin-top: 12px;
    padding: 12px;
    border-radius: 999px;
    background: rgba(120, 120, 128, .14);
    font-weight: 500;
}
.modale-fermer:hover { background: var(--ink); color: #fff; }

@media (max-width: 980px) {
    .kanban { grid-template-columns: repeat(2, minmax(200px, 1fr)); }
}
@media (max-width: 620px) {
    .kanban { grid-template-columns: 1fr; }
    /* Au doigt on ne glisse pas : la consigne change. */
    .legende-souris { display: none; }
    .legende-doigt { display: inline; }
}


/* Fenêtre de refus : confirmation et motif avant d'écrire au client. */
.modale-refus { width: min(520px, 100%); padding: 26px; background: var(--panel); }
.modale-refus h2 { font-size: 1.3rem; letter-spacing: -.03em; }
.refus-qui { margin-top: 8px; font-size: .95rem; }
.refus-qui strong { font-weight: 600; }
.refus-info {
    margin-top: 12px;
    padding: 11px 14px;
    background: rgba(255, 149, 0, .1);
    border-radius: 12px;
    font-size: .86rem;
    color: #9A5B00;
}
.refus-rapides { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0 14px; }
.refus-rapide {
    padding: 8px 13px;
    border-radius: 999px;
    background: rgba(120, 120, 128, .12);
    font-size: .82rem;
    color: var(--ink);
    transition: background .15s var(--ease), color .15s var(--ease);
}
.refus-rapide:hover { background: rgba(120, 120, 128, .2); }
.refus-rapide.actif { background: var(--ink); color: #fff; }
.refus-label { display: block; font-size: .84rem; font-weight: 600; margin-bottom: 6px; }
.refus-label span { font-weight: 400; color: var(--muted); }
.modale-refus textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg);
    border: 1.5px solid transparent;
    border-radius: 12px;
    font: inherit;
    font-size: .92rem;
    resize: vertical;
}
.modale-refus textarea:focus { outline: none; background: #fff; border-color: var(--accent); }
.refus-actions { display: flex; gap: 10px; margin-top: 18px; }
.refus-annuler, .refus-valider {
    flex: 1;
    padding: 13px;
    border-radius: 999px;
    font-size: .93rem;
    font-weight: 600;
}
.refus-annuler { background: rgba(120, 120, 128, .14); color: var(--ink); }
.refus-annuler:hover { background: rgba(120, 120, 128, .22); }
.refus-valider { background: var(--red); color: #fff; }
.refus-valider:hover { background: #C9302A; }



/* ============ VUE D'ENSEMBLE ============ */
/* Une liste de choses à faire, pas un tableau de chiffres : en arrivant le
   matin, on doit savoir quoi traiter sans lire quoi que ce soit d'autre. */
.accueil { max-width: 880px; }
.acc-tete { margin-bottom: 22px; }
.acc-tete h2 { font-size: 1.9rem; }
.acc-tete p { margin-top: 4px; font-size: 1rem; color: var(--muted); }

.acc-taches { display: grid; gap: 10px; }
.acc-tache {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--panel);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 6px 18px rgba(0, 0, 0, .05);
}
.acc-icone {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    flex: none;
    border-radius: 12px;
}
/* Trois niveaux : ce qui presse, ce qui attend, ce qui peut patienter. */
.acc-urgent    .acc-icone { background: rgba(255, 59, 48, .12); color: var(--accent-dark); }
.acc-attention .acc-icone { background: rgba(245, 158, 11, .14); color: #B45309; }
.acc-calme     .acc-icone { background: rgba(37, 99, 235, .12); color: var(--blue); }
.acc-texte { display: grid; gap: 2px; min-width: 0; flex: 1; }
.acc-texte strong { font-size: .98rem; font-weight: 600; }
.acc-texte span { font-size: .85rem; color: var(--muted); }
.acc-action {
    flex: none;
    padding: 9px 18px;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    font-size: .87rem;
    font-weight: 600;
    transition: background .15s var(--ease);
}
.acc-action:hover { background: #000; }

.acc-vide {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 38px 24px;
    background: var(--panel);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 6px 18px rgba(0, 0, 0, .05);
    text-align: center;
}
.acc-vide-coche {
    display: grid;
    place-items: center;
    width: 52px; height: 52px;
    margin-bottom: 8px;
    background: rgba(22, 163, 74, .12);
    color: var(--green);
    border-radius: 50%;
}
.acc-vide p { font-size: .92rem; color: var(--muted); }
.acc-vide strong { color: var(--ink); font-weight: 600; }

.acc-jours { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 26px; }
.acc-jour {
    padding: 16px 18px;
    background: var(--panel);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 6px 18px rgba(0, 0, 0, .05);
}
.acc-jour h3 { display: flex; align-items: center; gap: 8px; font-size: .95rem; font-weight: 600; }
.acc-jour h3 span {
    min-width: 20px;
    padding: 1px 7px;
    background: rgba(120, 120, 128, .14);
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 500;
    color: var(--muted);
    text-align: center;
}
.acc-planning { list-style: none; margin-top: 12px; }
.acc-planning li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 0;
    border-top: 1px solid var(--line);
    font-size: .88rem;
}
.acc-planning li:first-child { border-top: none; padding-top: 2px; }
.acc-heure { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.acc-nom { font-weight: 500; }
.acc-veh { color: var(--muted); font-size: .82rem; }
.acc-tel { margin-left: auto; flex: none; font-size: .82rem; color: var(--muted); }
.acc-tel:hover { color: var(--accent); }
.acc-jour-vide { margin-top: 10px; font-size: .85rem; color: var(--muted); }

@media (max-width: 760px) {
    .acc-jours { grid-template-columns: 1fr; }
    .acc-tache { flex-wrap: wrap; }
    .acc-action { width: 100%; }
}


/* ============ AGENDA ============ */
/* Le mois donne la charge d'un coup d'œil (une pastille par rendez-vous),
   la colonne de droite détaille le jour choisi, créneau par créneau. */
.ag-day { position: relative; }
.ag-points { display: flex; align-items: center; gap: 3px; margin-top: 4px; }
.ag-points i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.ag-points b { font-size: .62rem; font-weight: 600; color: var(--accent); }
/* Aujourd'hui reste repérable même quand un autre jour est sélectionné. */
.ag-auj .blk-num { position: relative; font-weight: 700; }
.ag-auj .blk-num::after {
    content: '';
    position: absolute;
    left: 50%; bottom: -3px;
    width: 14px; height: 2px;
    transform: translateX(-50%);
    border-radius: 2px;
    background: var(--ink);
}

.ag-tete {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}
.ag-resume { font-size: .85rem; color: var(--muted); }
.ag-lignes { display: grid; gap: 2px; margin-top: 6px; }

.ag-ligne {
    display: flex;
    gap: 14px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--line);
}
.ag-ligne:last-child { border-bottom: none; }
.ag-heure {
    flex: none;
    width: 48px;
    padding-top: 1px;
    font-size: .88rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
/* Un créneau libre ne doit pas attirer l'œil autant qu'un rendez-vous. */
.ag-libre { align-items: center; padding: 9px 4px; }
.ag-libre .ag-heure, .ag-vide { color: var(--muted); font-weight: 400; }
.ag-vide { font-size: .84rem; }

.ag-quoi { flex: 1; min-width: 0; display: grid; gap: 5px; }
.ag-qui { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ag-qui strong { font-size: .95rem; font-weight: 600; }
.ag-etat {
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
}
.ag-etat.pending   { background: rgba(245, 158, 11, .16); color: #B45309; }
.ag-etat.rappel    { background: rgba(37, 99, 235, .12);  color: var(--blue); }
.ag-etat.confirmed { background: rgba(22, 163, 74, .13);  color: var(--green); }
.ag-veh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .85rem; color: var(--muted); }
.ag-alerte {
    padding: 2px 8px;
    background: rgba(255, 59, 48, .12);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    color: var(--accent-dark);
}
.ag-presta { display: flex; flex-wrap: wrap; gap: 5px; }
.ag-presta .chip { font-size: .75rem; padding: 3px 9px; }
.ag-mot { font-size: .84rem; font-style: italic; color: var(--muted); }
.ag-assur { font-size: .8rem; color: var(--muted); }
.ag-actions { flex: none; display: grid; gap: 6px; justify-items: end; align-content: start; }
.ag-tel { font-size: .84rem; font-weight: 500; }
.ag-tel:hover { color: var(--accent); }
.ag-ferme { padding: 20px 4px; font-size: .88rem; color: var(--muted); }

@media (max-width: 700px) {
    .ag-ligne { flex-wrap: wrap; }
    .ag-actions { justify-items: start; }
}

/* ============ MESSAGERIE ============ */
/* Deux panneaux comme une boîte mail : les fils à gauche, la conversation à
   droite. La hauteur est calée sur l'écran pour que chaque panneau défile de
   son côté, sans faire descendre toute la page. */
.boite {
    display: grid;
    grid-template-columns: minmax(260px, 340px) 1fr;
    gap: 14px;
    height: calc(100dvh - 162px);  /* topbar + marges de la vue : chaque panneau défile seul */
    min-height: 460px;
}
.boite-liste {
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 6px 18px rgba(0, 0, 0, .05);
    overflow: hidden;
}
.boite-onglets { display: flex; gap: 6px; padding: 12px; border-bottom: 1px solid var(--line); }
.boite-onglet {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 500;
    color: var(--muted);
    transition: background .15s var(--ease), color .15s var(--ease);
}
.boite-onglet:hover { background: rgba(120, 120, 128, .1); color: var(--ink); }
.boite-onglet.actif { background: var(--ink); color: #fff; }
.boite-compte {
    min-width: 19px;
    padding: 0 6px;
    background: var(--accent);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    color: #fff;
    text-align: center;
}
.boite-onglet.actif .boite-compte { background: var(--accent); }
.boite-fils { flex: 1; overflow-y: auto; padding: 8px; }
.boite-vide { padding: 22px 12px; font-size: .87rem; color: var(--muted); text-align: center; }

.fil {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 11px 12px;
    border-radius: 12px;
    text-align: left;
    transition: background .15s var(--ease);
}
.fil:not(.fil-ouvert):hover { background: rgba(120, 120, 128, .08); }
.fil-ouvert { background: rgba(120, 120, 128, .13); }
.fil-avatar {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    flex: none;
    background: var(--ink);
    color: #fff;
    border-radius: 50%;
    font-size: .95rem;
    font-weight: 600;
}
.fil-avatar.grand { width: 44px; height: 44px; font-size: 1.05rem; }
.fil-corps { display: grid; gap: 2px; min-width: 0; flex: 1; }
.fil-tete { display: flex; align-items: baseline; gap: 8px; }
.fil-tete strong { font-size: .92rem; font-weight: 500; }
.fil-neuf .fil-tete strong { font-weight: 700; }
.fil-date { margin-left: auto; flex: none; font-size: .74rem; color: var(--muted); }
.fil-apercu {
    font-size: .82rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Un point suffit à repérer un non-lu : pas de bandeau coloré sur la ligne. */
.fil-point { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--accent); }

.boite-fil {
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 6px 18px rgba(0, 0, 0, .05);
    overflow: hidden;
}
.fil-rien { display: grid; place-items: center; height: 100%; color: var(--muted); font-size: .9rem; }
.fil-entete {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
}
.fil-qui { display: grid; line-height: 1.35; min-width: 0; }
.fil-qui strong { font-size: 1rem; font-weight: 600; }
.fil-qui span { font-size: .8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fil-outils { display: flex; gap: 4px; margin-left: auto; }
.fil-outil {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    color: var(--muted);
    transition: background .15s var(--ease), color .15s var(--ease);
}
.fil-outil:hover { background: rgba(120, 120, 128, .14); color: var(--ink); }
.fil-outil-suppr:hover { background: rgba(255, 59, 48, .12); color: var(--red); }

.fil-echanges {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
}
.bulle { max-width: 78%; padding: 13px 16px; border-radius: 18px; }
/* Reçu à gauche, envoyé à droite : on lit le sens de l'échange sans étiquette. */
.bulle-recu { align-self: flex-start; background: rgba(120, 120, 128, .1); border-bottom-left-radius: 6px; }
.bulle-envoye { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 6px; }
.bulle-texte { font-size: .93rem; line-height: 1.55; overflow-wrap: anywhere; }
.bulle-date { display: block; margin-top: 6px; font-size: .72rem; color: var(--muted); }
.bulle-envoye .bulle-date { color: rgba(255, 255, 255, .7); }

/* Réponses toutes prêtes : une bande de puces au-dessus du champ. Elle défile
   horizontalement plutôt que de passer à la ligne — sur téléphone, la zone de
   saisie doit rester à sa place. */
.fil-modeles {
    display: flex;
    gap: 8px;
    padding: 12px 20px 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.fil-modeles::-webkit-scrollbar { display: none; }
.fil-modele {
    flex: none;
    padding: 7px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg);
    color: var(--ink-2);
    font-size: .82rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.fil-modele:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}
.fil-repondre {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 14px 20px 18px;
    border-top: 1px solid var(--line);
}
.fil-repondre textarea {
    flex: 1;
    padding: 12px 16px;
    background: var(--bg);
    border: 1.5px solid transparent;
    border-radius: 20px;
    font: inherit;
    font-size: .92rem;
    line-height: 1.5;
    resize: none;
    max-height: 260px;
}
.fil-repondre textarea:focus { outline: none; background: #fff; border-color: var(--accent); }
.fil-envoyer {
    flex: none;
    padding: 12px 22px;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    font-size: .9rem;
    font-weight: 600;
    transition: background .15s var(--ease);
}
.fil-envoyer:hover { background: #000; }
.fil-envoyer:disabled { opacity: .5; cursor: default; }
.fil-sansmail { font-size: .87rem; color: var(--muted); }

@media (max-width: 860px) {
    /* Sur petit écran, la conversation passe sous la liste. */
    .boite { grid-template-columns: 1fr; height: auto; }
    .boite-fils { max-height: 300px; }
    .boite-fil { min-height: 420px; }
    .bulle { max-width: 88%; }
}

/* Fenêtre de refus : confirmation et motif avant d'écrire au client. */
.modale-refus { width: min(520px, 100%); padding: 26px; background: var(--panel); }
.modale-refus h2 { font-size: 1.3rem; letter-spacing: -.03em; }
.refus-qui { margin-top: 8px; font-size: .95rem; }
.refus-qui strong { font-weight: 600; }
.refus-info {
    margin-top: 12px;
    padding: 11px 14px;
    background: rgba(255, 149, 0, .1);
    border-radius: 12px;
    font-size: .86rem;
    color: #9A5B00;
}
.refus-rapides { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0 14px; }
.refus-rapide {
    padding: 8px 13px;
    border-radius: 999px;
    background: rgba(120, 120, 128, .12);
    font-size: .82rem;
    color: var(--ink);
    transition: background .15s var(--ease), color .15s var(--ease);
}
.refus-rapide:hover { background: rgba(120, 120, 128, .2); }
.refus-rapide.actif { background: var(--ink); color: #fff; }
.refus-label { display: block; font-size: .84rem; font-weight: 600; margin-bottom: 6px; }
.refus-label span { font-weight: 400; color: var(--muted); }
.modale-refus textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg);
    border: 1.5px solid transparent;
    border-radius: 12px;
    font: inherit;
    font-size: .92rem;
    resize: vertical;
}
.modale-refus textarea:focus { outline: none; background: #fff; border-color: var(--accent); }
.refus-actions { display: flex; gap: 10px; margin-top: 18px; }
.refus-annuler, .refus-valider {
    flex: 1;
    padding: 13px;
    border-radius: 999px;
    font-size: .93rem;
    font-weight: 600;
}
.refus-annuler { background: rgba(120, 120, 128, .14); color: var(--ink); }
.refus-annuler:hover { background: rgba(120, 120, 128, .22); }
.refus-valider { background: var(--red); color: #fff; }
.refus-valider:hover { background: #C9302A; }


/* ============ MESSAGES ============ */
.messages { display: grid; gap: 12px; max-width: 780px; }
.msg {
    padding: 18px 20px;
    background: var(--panel);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 6px 18px rgba(0, 0, 0, .05);
}
/* Un message non lu se repère au premier coup d'œil, sans relire les dates. */
.msg-neuf { box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 6px 18px rgba(0, 0, 0, .05), inset 3px 0 0 var(--accent); }
.msg-tete { display: flex; align-items: center; gap: 12px; }
.msg-avatar {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    flex: none;
    background: var(--ink);
    color: #fff;
    border-radius: 50%;
    font-size: 1rem;
    font-weight: 600;
}
.msg-neuf .msg-avatar { background: var(--accent); }
.msg-qui { display: grid; line-height: 1.3; }
.msg-qui strong { font-size: .98rem; font-weight: 600; }
.msg-qui span { font-size: .78rem; color: var(--muted); }
.msg-neuf-tag {
    margin-left: auto;
    padding: 4px 11px;
    background: rgba(255, 59, 48, .12);
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    color: var(--accent-dark);
}
.msg-suppr {
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    color: var(--muted);
}
.msg-neuf-tag + .msg-suppr { margin-left: 4px; }
.msg-tete .msg-suppr:only-of-type { margin-left: auto; }
.msg-suppr:hover { background: rgba(255, 59, 48, .12); color: var(--red); }

.msg-texte {
    margin: 14px 0 0;
    padding-left: 14px;
    border-left: 2px solid var(--line);
    font-size: .95rem;
    line-height: 1.6;
    color: var(--ink);
    white-space: pre-wrap;
}
.msg-pied { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.msg-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    border-radius: 999px;
    background: rgba(120, 120, 128, .12);
    font-size: .86rem;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    transition: background .15s var(--ease), color .15s var(--ease);
}
.msg-action:hover { background: var(--ink); color: #fff; }
.msg-etat { margin-left: auto; }

/* ============ FERMETURES ============ */
.block-legend { margin-bottom: 20px; font-size: .9rem; color: var(--muted); max-width: 78ch; }
.legend-red   { color: var(--red); font-weight: 600; }
.legend-amber { color: #B45309; font-weight: 600; }

.block-layout { display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: 20px; align-items: start; }
.block-cal, .block-detail {
    padding: 18px;
    background: var(--panel);
    box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.05);
    border: none;
    border-radius: var(--radius);
}
.block-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.block-month { font-weight: 700; }
.blk-nav {
    display: grid; place-items: center;
    width: 32px; height: 32px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--muted);
    transition: all .2s var(--ease);
}
.blk-nav:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); }
.blk-nav:disabled { opacity: .35; cursor: default; }
.block-weekdays, .block-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.block-weekdays span {
    text-align: center;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--muted);
    padding-bottom: 8px;
}
/* Jours du calendrier : pastilles rondes, comme dans le tunnel. */
.blk-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    aspect-ratio: 1;
    background: #F8F9FB;
    border: 1px solid transparent;
    border-radius: 50%;
    font-size: .9rem;
    font-weight: 500;
    transition: all .18s var(--ease);
}
.blk-day.empty { background: none; }
.blk-day:not(:disabled):hover { border-color: var(--ink); }
.blk-day:disabled { cursor: default; color: #B9BEC8; background: transparent; }
.blk-day.closed  { background: #F1F2F5; }
.blk-day.blocked { background: #FEE2E2; color: #B91C1C; }
.blk-day.partial { background: #FEF3C7; color: #B45309; }
.blk-day.selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(225, 80, 42, .2); }
.blk-tag { font-size: .55rem; text-transform: uppercase; letter-spacing: .02em; }

.bd-empty { color: var(--muted); font-size: .92rem; }
.bd-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.bd-date { font-weight: 700; }
.bd-date::first-letter { text-transform: uppercase; }
.bd-allday {
    padding: 9px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: .85rem;
    font-weight: 600;
    color: var(--red);
    transition: all .2s var(--ease);
}
.bd-allday:hover { background: #FEF2F2; border-color: #FCA5A5; }
.bd-allday.on { background: var(--green); border-color: var(--green); color: #fff; }
.bd-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.bd-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 11px 6px;
    background: #F8F9FB;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: .92rem;
    font-weight: 600;
    transition: all .18s var(--ease);
}
.bd-slot span { font-size: .7rem; font-weight: 500; color: var(--muted); }
.bd-slot.free:hover { border-color: var(--red); background: #FEF2F2; }
.bd-slot.blocked { background: #FEE2E2; border-color: #FCA5A5; color: #B91C1C; }
.bd-slot.blocked span { color: #B91C1C; }
.bd-slot.blocked:hover { background: #DCFCE7; border-color: #86EFAC; color: #15803D; }
.bd-slot.booked { background: #EFF6FF; border-color: #BFDBFE; color: #1D4ED8; cursor: default; }
.bd-slot.booked span { color: #1D4ED8; }
.bd-slot:disabled { opacity: .5; cursor: default; }

/* ============ RESPONSIVE ============ */
.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 40;
}

@media (max-width: 980px) {
    .block-layout { grid-template-columns: 1fr; }
}

/* ============ TÉLÉPHONE ============ */
/* Le tiroir latéral n'a pas de sens sur un téléphone tenu à une main : la
   barre latérale devient une barre d'onglets en bas, toujours visible et à
   portée du pouce. Le reste des vues passe sur une colonne. */
@media (max-width: 780px) {
    /* Rien ne défile au niveau de la page : c'est ce qui empêche l'interface
       de « glisser » sous les barres du navigateur. */
    html, body { height: 100%; overflow: hidden; }
    .admin {
        display: flex;
        flex-direction: column;
        /* Trois écritures, de la plus ancienne à la plus juste : le navigateur
           retient la dernière qu'il comprend. `100dvh` suit la hauteur réellement
           visible quand la barre d'outils de Safari apparaît ou se rétracte ;
           `-webkit-fill-available` rend le même service aux Safari plus anciens. */
        height: 100vh;
        height: -webkit-fill-available;
        height: 100dvh;
        min-height: 0;
    }
    .main {
        order: 1;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    /* La barre d'onglets n'est PAS en position:fixed, et c'est volontaire.
       Sur iPhone, un élément fixé en bas se place au bas du « layout viewport »,
       qui s'étend sous la barre d'outils de Safari : la barre se retrouve à
       moitié cachée derrière les boutons du navigateur. En la laissant dans le
       flux, au bas d'un conteneur qui fait exactement la hauteur visible
       (100dvh), elle reste toujours au-dessus — et elle suit quand la barre de
       Safari se rétracte au défilement.

       L'aspect est celui de la barre de navigation du site : une pilule de
       verre dépoli posée sur le contenu, même flou, même ombre en couches. */
    .sidebar {
        position: static;
        order: 2;
        flex: none;
        height: auto;
        flex-direction: row;
        align-items: stretch;
        gap: 4px;
        width: auto;
        margin: 0 12px calc(10px + env(safe-area-inset-bottom, 0px));
        padding: 8px;
        background: rgba(255, 255, 255, .72);
        backdrop-filter: blur(24px) saturate(180%);
        -webkit-backdrop-filter: blur(24px) saturate(180%);
        border: 1px solid rgba(255, 255, 255, .85);
        border-top: 1px solid rgba(255, 255, 255, .85);
        border-right: none;
        border-radius: 999px;
        box-shadow:
            0 .5px .7px rgba(0, 0, 0, .018),
            0 2px 2.6px rgba(0, 0, 0, .022),
            0 5.8px 7.3px rgba(0, 0, 0, .026),
            0 16px 20px rgba(0, 0, 0, .03),
            0 28px 35px rgba(0, 0, 0, .034);
    }
    /* Le verre laisse voir ce qui passe dessous : les libellés doivent donc
       être sombres, comme sur la barre du site. */
    .nav-item { color: var(--ink-2, rgba(60,60,67,.74)); }
    .nav-item:hover { background: rgba(0, 0, 0, .04); color: var(--ink); }
    .nav-item.active { background: var(--accent); color: #fff; }

    .sidebar-brand { display: none; }
    .sidebar-nav { flex: 1; display: flex; gap: 2px; }
    .nav-item {
        flex: 1;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        /* 52 px de haut : la taille de cible recommandée pour le pouce. */
        min-height: 52px;
        padding: 9px 2px;
        border-radius: 999px;
        font-size: .69rem;
        line-height: 1.1;
        text-align: center;
    }
    .nav-item svg { width: 21px; height: 21px; }
    .nav-item span:not(.nav-badge) { display: block; }
    /* Les libellés longs ne tiennent pas sous une icône : chaque onglet porte
       une version courte, qu'on substitue ici plutôt que de la dupliquer. */
    .nav-item span[data-court], .logout span[data-court] { font-size: 0; }
    .nav-item span[data-court]::after, .logout span[data-court]::after {
        content: attr(data-court);
        font-size: .66rem;
    }
    /* Dans un onglet vertical, la pastille se pose sur l'icône. */
    .nav-item { position: relative; }
    .nav-badge {
        position: absolute;
        top: 3px; left: 50%;
        margin: 0 0 0 4px;
        min-width: 16px;
        padding: 0 5px;
        font-size: .62rem;
        line-height: 16px;
    }
    .sidebar-foot { display: none; }
    .logout {
        flex: none;
        flex-direction: column;
        justify-content: center;
        gap: 3px;
        width: 54px;
        padding: 7px 2px;
        border-radius: 13px;
        font-size: .66rem;
        text-align: center;
    }
    .menu-toggle { display: none; }
    .sidebar-backdrop { display: none; }

    .topbar { padding: 14px 16px; }
    .topbar-date { display: none; }
    .topbar h1 { font-size: 1.15rem; }
    .view { padding: 18px 16px 24px; }
    .appt-grid { grid-template-columns: 1fr; }

    /* -- Agenda -- */
    .block-cal { padding: 14px; }
    .ag-heure { width: 44px; }
    /* Au doigt, il n'y a pas de survol : l'action reste visible. */
    .ag-bascule { opacity: 1; }
    .ag-actions { flex-direction: row; align-items: center; gap: 10px; margin-top: 4px; }

    /* -- Messagerie : un panneau à la fois -- */
    .boite { grid-template-columns: 1fr; height: auto; min-height: 0; }
    .boite-fils { max-height: none; }
    .boite-fil { min-height: calc(100dvh - 210px); }
    /* Une conversation ouverte prend tout l'écran ; la liste revient avec « Retour ». */
    .boite-ouverte .boite-liste { display: none; }
    .boite:not(.boite-ouverte) .boite-fil { display: none; }

    /* Fil ouvert : en-tête en haut, échanges qui défilent, zone de réponse
       toujours visible en bas. Sans cela, il fallait faire défiler toute la
       conversation pour atteindre le champ de saisie — impensable dans une
       messagerie. */
    /* Pour qu'un fil occupe la hauteur, il faut la lui donner de bout en bout :
       le contenu cesse de défiler, la vue devient une colonne, et c'est la
       liste des échanges qui défile à l'intérieur. */
    /* Colonne : la barre de titre garde sa taille, la vue prend ce qui reste.
       Avec `height: 100%`, la vue reprenait la hauteur totale sans déduire la
       barre de titre — et la zone de saisie tombait hors de l'écran. */
    .main:has(.boite-ouverte) {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .main:has(.boite-ouverte) .topbar { flex: none; }
    #view-messages.active:has(.boite-ouverte) {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        padding: 0;
    }
    #view-messages.active:has(.boite-ouverte) .boite { flex: 1; min-height: 0; }
    .boite-ouverte { height: 100%; }
    .boite-ouverte .boite-fil {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
    }
    .boite-ouverte .fil-entete { flex: none; }
    .boite-ouverte .fil-echanges {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .boite-ouverte .fil-modeles,
    .boite-ouverte .fil-repondre { flex: none; }
    .fil-entete .fil-retour { display: grid; }
    .bulle { max-width: 90%; }
}

/* Bouton « Retour » de la messagerie : seulement quand la liste est masquée. */
.fil-retour {
    display: none;
    place-items: center;
    width: 34px; height: 34px;
    flex: none;
    margin-right: 2px;
    border-radius: 50%;
    color: var(--muted);
}
.fil-retour:hover { background: rgba(120, 120, 128, .14); color: var(--ink); }

/* ============ TABLEAU DE CARTES AU DOIGT ============ */
/* Sur téléphone, quatre colonnes empilées seraient impraticables : on affiche
   une colonne à la fois, choisie dans une barre d'onglets, et le déplacement
   se fait par un bouton plutôt qu'en glissant sur 2 000 pixels. */
.kan-onglets { display: none; }
.carte-deplacer { display: none; }
@media (max-width: 780px) {
    .kan-onglets {
        display: flex;
        gap: 6px;
        margin-bottom: 14px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .kan-onglets::-webkit-scrollbar { display: none; }
    .kan-onglet {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        flex: none;
        padding: 9px 15px;
        border-radius: 999px;
        background: rgba(120, 120, 128, .1);
        font-size: .85rem;
        font-weight: 500;
        color: var(--muted);
        white-space: nowrap;
    }
    .kan-onglet.actif { background: var(--ink); color: #fff; }
    .kan-onglet b { font-weight: 600; }
    .kanban { grid-template-columns: 1fr; }
    /* Au doigt on ne glisse pas : la consigne change. */
    .legende-souris { display: none; }
    .legende-doigt { display: inline; }
    /* Seule la colonne choisie reste à l'écran. */
    .kanban .col { display: none; background: none; padding: 0; min-height: 0; }
    .kanban .col.col-visible { display: block; }
    .col-tete { display: none; }
    .carte { cursor: default; }
    .carte-deplacer {
        display: inline-flex;
        padding: 5px 12px;
        border-radius: 999px;
        background: rgba(255, 59, 48, .1);
        font-size: .78rem;
        font-weight: 500;
        color: var(--accent-dark);
    }
    .carte-pied { flex-wrap: wrap; gap: 8px; }
}

.legende-doigt { display: none; }

/* Feuille de choix : où déplacer la carte. */
.feuille-fond {
    position: fixed;
    inset: 0;
    z-index: 320;
    display: flex;
    align-items: flex-end;
    background: rgba(20, 20, 24, .45);
    backdrop-filter: blur(3px);
}
.feuille {
    width: 100%;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    background: var(--bg);
    border-radius: 22px 22px 0 0;
    animation: feuilleMonte .24s var(--ease);
}
@keyframes feuilleMonte { from { transform: translateY(100%); } to { transform: none; } }
.feuille h2 { font-size: 1.05rem; font-weight: 600; }
.feuille p { margin-top: 2px; font-size: .84rem; color: var(--muted); }
.feuille-choix { display: grid; gap: 8px; margin-top: 16px; }
.feuille-choix button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--panel);
    border-radius: 14px;
    font-size: .95rem;
    font-weight: 500;
    text-align: left;
}
.feuille-choix button:disabled { opacity: .4; }
.feuille-annuler {
    width: 100%;
    margin-top: 10px;
    padding: 14px;
    border-radius: 14px;
    background: rgba(120, 120, 128, .14);
    font-weight: 600;
}

/* Objet du mail et nombre d'échanges dans la liste des fils. */
.fil-sujet {
    font-size: .84rem;
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fil-neuf .fil-sujet { font-weight: 600; }
.fil-nb { margin-top: 2px; font-size: .72rem; color: var(--muted); }
.bulle-sujet { margin-bottom: 6px; font-size: .86rem; font-weight: 600; }
/* Séparation de date : repère l'ancien du récent dans un long historique. */
.fil-jour {
    align-self: center;
    margin: 6px 0;
    padding: 4px 12px;
    background: rgba(120, 120, 128, .1);
    border-radius: 999px;
    font-size: .74rem;
    color: var(--muted);
}
.fil-jour::first-letter { text-transform: uppercase; }

/* Jour de fermeture dans l'agenda : le chiffre s'efface aussi. */
.ag-day.closed:not(.selected) .blk-num { color: #A9AEB8; }

/* Fermer un créneau depuis l'agenda : l'action reste discrète tant qu'on ne
   survole pas la ligne, pour ne pas encombrer la lecture du planning. */
.ag-libre { justify-content: flex-start; }
.ag-bascule {
    margin-left: auto;
    padding: 5px 13px;
    border-radius: 999px;
    background: rgba(120, 120, 128, .1);
    font-size: .78rem;
    color: var(--muted);
    opacity: 0;
    transition: opacity .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
}
.ag-ligne:hover .ag-bascule, .ag-bascule:focus-visible { opacity: 1; }
.ag-bascule:hover { background: var(--ink); color: #fff; }
.ag-off .ag-vide { color: #B91C1C; }
.ag-off .ag-bascule { opacity: 1; background: rgba(255, 59, 48, .1); color: #B91C1C; }
.ag-off .ag-bascule:hover { background: var(--ink); color: #fff; }

.ag-tete { justify-content: space-between; }
.ag-titre { display: grid; gap: 2px; }
.ag-journee {
    flex: none;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(120, 120, 128, .12);
    font-size: .84rem;
    font-weight: 500;
    transition: background .15s var(--ease), color .15s var(--ease);
}
.ag-journee:hover { background: var(--ink); color: #fff; }
.ag-journee.on { background: rgba(255, 59, 48, .12); color: #B91C1C; }
.ag-journee.on:hover { background: var(--ink); color: #fff; }

/* ============ RÉGLAGES ============ */
.reglages {
    max-width: 620px;
    padding: 26px 28px 30px;
    background: #fff;
    border-radius: var(--r-lg, 20px);
    box-shadow: var(--shadow);
}
.reglages h2 { font-size: 1.15rem; letter-spacing: -.02em; }
.reglages-intro { margin-top: 10px; font-size: .92rem; line-height: 1.6; color: var(--muted); }
.reglages-label {
    display: block;
    margin-top: 22px;
    font-size: .85rem;
    font-weight: 600;
}
.reglages-ligne { display: flex; gap: 10px; margin-top: 8px; }
.reglages-ligne input {
    flex: 1;
    padding: 12px 16px;
    background: var(--bg);
    border: 1.5px solid transparent;
    border-radius: 14px;
    font: inherit;
    font-size: .92rem;
}
.reglages-ligne input:focus { outline: none; background: #fff; border-color: var(--accent); }
.reglages-etat { margin-top: 12px; font-size: .88rem; }
.reglages-etat.est-ok { color: #15803D; }
.reglages-etat.est-ko { color: var(--accent); }
.reglages-note { margin-top: 18px; font-size: .84rem; line-height: 1.6; color: var(--muted); }

@media (max-width: 640px) {
    .reglages { padding: 20px; }
    .reglages-ligne { flex-direction: column; }
}

.reglages-trait { margin: 28px 0 4px; border: 0; border-top: 1px solid var(--line); }
.reglages-bascule {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
}
.reglages-bascule label { display: block; }
.reglages-bascule strong { display: block; font-size: .93rem; }
.reglages-bascule span { display: block; margin-top: 3px; font-size: .84rem; line-height: 1.5; color: var(--muted); }
.reglages-bascule input[type="checkbox"] { flex: none; width: 20px; height: 20px; accent-color: var(--accent); cursor: pointer; }
.reglages-bascule .btn-confirm:disabled { opacity: .55; cursor: default; }
.reglages-essai {
    margin-top: 20px;
    padding: 10px 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg);
    font-size: .86rem;
    font-weight: 500;
}
.reglages-essai:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.reglages-actuelle {
    margin-top: 16px;
    padding: 12px 16px;
    background: var(--bg);
    border-radius: 14px;
    font-size: .9rem;
}
.reglages-code {
    margin-top: 18px;
    padding: 16px 18px 12px;
    background: var(--bg);
    border-radius: 16px;
}
.reglages-code .reglages-label { margin-top: 0; }
.reglages-code input {
    letter-spacing: .3em;
    font-weight: 600;
    text-align: center;
}
.reglages-lien {
    margin-top: 10px;
    padding: 0;
    background: none;
    font-size: .85rem;
    color: var(--muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.reglages-lien:hover { color: var(--accent); }

/* ============================================================
   TENUE SUR TÉLÉPHONE — le tableau de bord doit se comporter
   comme une application, pas comme une page web.
   ============================================================ */
@media (max-width: 780px) {
    /* iOS zoome automatiquement dès qu'un champ a une police inférieure à
       16 px, et la page reste zoomée après la saisie. C'est la première chose
       qui trahit une page web sur un téléphone. */
    input, textarea, select { font-size: 16px !important; }

    /* Pas de flash gris au toucher, pas de délai de 300 ms. */
    button, .nav-item, .logout, a { -webkit-tap-highlight-color: transparent; }
    button, .nav-item, .logout { touch-action: manipulation; }

    /* Le rebond élastique en bout de course donne l'impression que la page
       « décolle » du bas de l'écran. */
    body { overscroll-behavior-y: none; }

    /* La barre d'onglets ne doit jamais passer sous la barre d'outils de
       Safari : le retrait est repris de la zone sûre déclarée par l'appareil
       (encoche, barre gestuelle). Sans viewport-fit=cover dans le <head>,
       cette valeur reste à zéro — les deux vont ensemble. */
    /* Le retrait du bas est déclaré avec le reste de la barre, plus haut :
       ici, une seconde déclaration de `background` écrasait le verre dépoli et
       remettait un fond noir, sur lequel les libellés sombres disparaissaient. */

    /* La zone de réponse de la messagerie remonte au-dessus de la barre. */
    .fil-repondre { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }

    /* En mode application (ajouté à l'écran d'accueil), l'en-tête touche la
       barre d'état : on lui rend sa place. */
    .topbar { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
}

/* Lancé depuis l'écran d'accueil : plus de barre d'adresse, l'application
   occupe tout l'écran. On rend alors la sélection de texte au seul endroit où
   elle sert vraiment — lire et recopier un message — pour que le reste réagisse
   comme une interface, pas comme un document. */
@media (display-mode: standalone) {
    body { user-select: none; }
    .bulle-texte, .fil-qui, input, textarea, .appt-card p { user-select: text; }
}

.reglages-sortir {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 14px;
    padding: 11px 20px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg);
    font-size: .9rem;
    font-weight: 500;
    color: var(--ink-2);
    transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.reglages-sortir:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}