/* =====================================================================
 *  Gestion Couture — feuille de style « thémable »
 *  Tout l'aspect passe par des variables CSS :
 *   - couleurs de l'atelier (--primary, --accent) : injectées par PHP
 *   - thème (data-theme sur <html>)      : classique, moderne, elegant, minimal, doux, wax
 *   - mode  (data-mode)                  : clair, sombre, auto
 *   - police (data-police), arrondis (data-arrondi), taille (data-taille)
 * ===================================================================== */

/* ---------- 1. Valeurs par défaut (thème « Classique », mode clair) ---------- */
:root {
    --primary: #8a3b52;  --primary-dark: #6c2b3f;  --on-primary: #ffffff;
    --accent:  #c9962b;  --accent-dark:  #a57a20;  --on-accent:  #1f1a17;
    --primary-txt: var(--primary);   /* couleur principale utilisée pour du texte */

    --bg: #f6f3ef;
    --bg-image: none;
    --card: #ffffff;
    --card-2: #faf7f4;          /* fonds légers : en-têtes de tableaux, encarts */
    --hover: #fcfaf8;
    --text: #2b2420;
    --muted: #7a6f68;
    --border: #e4ddd5;
    --input-bg: #ffffff;
    --shadow: none;
    --card-border: 1px solid var(--border);

    --danger: #c0392b;  --success: #2e7d4f;  --warning: #b7791f;  --info: #2b5797;

    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-titre: var(--font);
    --titre-poids: 700;
    --titre-casse: none;
    --titre-espacement: normal;
    --taille: 15px;

    --radius: 8px;
    --radius-sm: 6px;

    --header-bg: var(--primary);
    --header-fg: var(--on-primary);
    --header-border: 4px solid var(--accent);
    --header-shadow: none;
    --menu-hover: color-mix(in srgb, var(--header-fg) 18%, transparent);

    --stat-border: 3px solid var(--accent);
    color-scheme: light;
}

/* Miniatures du choix de thème : repartent toujours des valeurs claires par défaut */
.theme-apercu {
    --bg: #f6f3ef; --bg-image: none; --card: #ffffff; --card-2: #faf7f4; --hover: #fcfaf8; --text: #2b2420; --muted: #7a6f68;
    --border: #e4ddd5; --input-bg: #ffffff; --shadow: none; --card-border: 1px solid var(--border);
    --font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-titre: var(--font); --titre-poids: 700;
    --radius: 8px; --radius-sm: 6px; --header-bg: var(--primary); --header-fg: var(--on-primary);
    --header-border: 4px solid var(--accent); --header-shadow: none; --stat-border: 3px solid var(--accent);
}
.theme-apercu[data-mode-apercu="sombre"] {
    --bg: #14161a; --bg-image: none; --card: #1d2026; --card-2: #252932; --text: #ebe7e3; --muted: #a39b94; --border: #343944;
}

/* ---------- 2. Thèmes ---------- */

/* Moderne : épuré, cartes flottantes, menu clair */
[data-theme="moderne"] {
    --bg: #f2f4f7;
    --card-2: #f7f8fa;
    --hover: #f9fafb;
    --text: #1d2330;
    --muted: #667085;
    --border: #e4e7ec;
    --shadow: 0 1px 2px rgba(16,24,40,.05), 0 4px 12px rgba(16,24,40,.06);
    --card-border: 1px solid transparent;
    --radius: 14px;
    --radius-sm: 10px;
    --header-bg: var(--card);
    --header-fg: var(--text);
    --header-border: 1px solid var(--border);
    --header-shadow: 0 1px 8px rgba(16,24,40,.06);
    --menu-hover: color-mix(in srgb, var(--primary) 12%, transparent);
    --stat-border: 1px solid transparent;
}
[data-theme="moderne"] .menu > a.active { color: var(--primary-txt); font-weight: 600; }
[data-theme="moderne"] .stat .value { color: var(--primary-txt); }

/* Élégant : esprit maison de couture, titres à empattements, menu sombre */
[data-theme="elegant"] {
    --bg: #faf8f4;
    --card-2: #f5f1ea;
    --hover: #fbf9f5;
    --text: #23201c;
    --muted: #857b6f;
    --border: #e7e0d4;
    --font-titre: "Didot", "Bodoni MT", "Playfair Display", Georgia, "Times New Roman", serif;
    --titre-poids: 600;
    --radius: 3px;
    --radius-sm: 2px;
    --header-bg: #1f1b18;
    --header-fg: #f5efe6;
    --header-border: 3px solid var(--accent);
    --stat-border: 1px solid var(--border);
}
[data-theme="elegant"] .logo { font-family: var(--font-titre); letter-spacing: .04em; font-weight: 600; }
[data-theme="elegant"] .field > label:not(:has(input)),
[data-theme="elegant"] th { text-transform: uppercase; letter-spacing: .06em; font-size: .74rem; }
[data-theme="elegant"] .stat .label { text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; }
[data-theme="elegant"] .btn:not(.palette) { text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; }

/* Minimal : blanc, noir, lignes fines, aucun arrondi */
[data-theme="minimal"] {
    --bg: #ffffff;
    --card: #ffffff;
    --card-2: #fafafa;
    --hover: #fafafa;
    --text: #111111;
    --muted: #6b6b6b;
    --border: #e6e6e6;
    --radius: 0px;
    --radius-sm: 0px;
    --header-bg: #ffffff;
    --header-fg: #111111;
    --header-border: 1px solid #111111;
    --menu-hover: rgba(0,0,0,.06);
    --stat-border: 1px solid var(--border);
}
[data-theme="minimal"] .menu > a.active { box-shadow: inset 0 -2px 0 var(--primary); background: none; }
[data-theme="minimal"] .card { border-width: 0 0 1px; padding-left: 0; padding-right: 0; }

/* Doux : tons pastel dérivés de vos couleurs, formes arrondies */
[data-theme="doux"] {
    --bg: color-mix(in srgb, var(--primary) 7%, #ffffff);
    --card-2: color-mix(in srgb, var(--primary) 5%, #ffffff);
    --hover: color-mix(in srgb, var(--accent) 6%, #ffffff);
    --border: color-mix(in srgb, var(--primary) 16%, #ffffff);
    --muted: color-mix(in srgb, var(--primary) 45%, #6b6b6b);
    --shadow: 0 6px 18px color-mix(in srgb, var(--primary) 10%, transparent);
    --card-border: 1px solid transparent;
    --radius: 20px;
    --radius-sm: 999px;
    --header-bg: linear-gradient(120deg, var(--primary), var(--accent));
    --header-border: 0;
    --stat-border: 0;
    --font: ui-rounded, "SF Pro Rounded", "Nunito", "Quicksand", "Segoe UI", system-ui, sans-serif;
}

/* Wax : couleurs vives, motif géométrique discret */
[data-theme="wax"] {
    --bg: #fbf6ee;
    --bg-image:
        radial-gradient(circle at 25% 25%, color-mix(in srgb, var(--accent) 14%, transparent) 0 6px, transparent 7px),
        radial-gradient(circle at 75% 75%, color-mix(in srgb, var(--primary) 10%, transparent) 0 6px, transparent 7px);
    --card-2: color-mix(in srgb, var(--accent) 10%, #ffffff);
    --border: color-mix(in srgb, var(--accent) 30%, #e8dfd2);
    --radius: 12px;
    --header-bg:
        repeating-linear-gradient(45deg, color-mix(in srgb, var(--accent) 22%, transparent) 0 10px, transparent 10px 20px),
        var(--primary);
    --header-border: 6px solid var(--accent);
    --stat-border: 5px solid var(--accent);
    --titre-poids: 800;
    --shadow: 4px 4px 0 color-mix(in srgb, var(--accent) 35%, transparent);
}
[data-theme="wax"] body { background-size: 48px 48px; }
[data-theme="wax"] .stat:nth-child(2n) { border-top-color: var(--primary); }

/* ---------- 3. Mode sombre (tous thèmes) ---------- */
[data-mode="sombre"] {
    --bg: #14161a;
    --bg-image: none;
    --card: #1d2026;
    --card-2: #252932;
    --hover: #22262d;
    --text: #ebe7e3;
    --muted: #a39b94;
    --border: #343944;
    --input-bg: #171a1f;
    --shadow: 0 2px 10px rgba(0,0,0,.35);
    --menu-hover: rgba(255,255,255,.08);
    --danger: #ef7466;  --success: #5cc48a;  --warning: #e4b04f;  --info: #7fa8ea;
    --primary-txt: color-mix(in srgb, var(--primary) 45%, #ffffff);
    color-scheme: dark;
}
[data-mode="sombre"][data-theme="moderne"],
[data-mode="sombre"][data-theme="minimal"] { --header-bg: var(--card); --header-fg: var(--text); }
[data-mode="sombre"][data-theme="minimal"] { --header-border: 1px solid var(--border); }
[data-mode="sombre"][data-theme="elegant"] { --header-bg: #0f0e0d; }
@media (prefers-color-scheme: dark) {
    [data-mode="auto"] {
        --bg: #14161a; --bg-image: none; --card: #1d2026; --card-2: #252932; --hover: #22262d;
        --text: #ebe7e3; --muted: #a39b94; --border: #343944; --input-bg: #171a1f;
        --shadow: 0 2px 10px rgba(0,0,0,.35); --menu-hover: rgba(255,255,255,.08);
        --danger: #ef7466; --success: #5cc48a; --warning: #e4b04f; --info: #7fa8ea;
        --primary-txt: color-mix(in srgb, var(--primary) 45%, #ffffff);
        color-scheme: dark;
    }
    [data-mode="auto"][data-theme="moderne"], [data-mode="auto"][data-theme="minimal"] { --header-bg: var(--card); --header-fg: var(--text); }
    [data-mode="auto"][data-theme="elegant"] { --header-bg: #0f0e0d; }
}

/* ---------- 4. Polices, arrondis, taille du texte (réglages indépendants du thème) ---------- */
[data-police="systeme"]  { --font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-titre: var(--font); }
[data-police="serif"]    { --font: Georgia, Cambria, "Times New Roman", serif; --font-titre: "Didot", "Bodoni MT", Georgia, serif; }
[data-police="arrondie"] { --font: ui-rounded, "SF Pro Rounded", "Nunito", "Quicksand", "Segoe UI", system-ui, sans-serif; --font-titre: var(--font); }
[data-police="lisible"]  { --font: Verdana, "Atkinson Hyperlegible", Tahoma, "Segoe UI", sans-serif; --font-titre: var(--font); }
[data-police="condensee"]{ --font: "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", "Segoe UI", sans-serif; --font-titre: var(--font); }

[data-arrondi="carre"]   { --radius: 0px;  --radius-sm: 0px; }
[data-arrondi="leger"]   { --radius: 6px;  --radius-sm: 4px; }
[data-arrondi="arrondi"] { --radius: 18px; --radius-sm: 12px; }

[data-taille="grand"]    { --taille: 17px; }
[data-taille="tres-grand"] { --taille: 19px; }

/* ---------- 5. Base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--taille);
    line-height: 1.5;
    background-color: var(--bg);
    background-image: var(--bg-image);
    color: var(--text);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    overflow-x: hidden;
}
a { color: var(--primary-txt); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
h1, h2, h3 { font-family: var(--font-titre); font-weight: var(--titre-poids); text-transform: var(--titre-casse); letter-spacing: var(--titre-espacement); }
h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; }
h1 small.muted, h2 small.muted { font-size: .75em; font-weight: 500; font-family: var(--font); }
code { background: var(--card-2); padding: .1rem .3rem; border-radius: 4px; }

/* ---------- 6. Barre du haut ---------- */
.topbar {
    background: var(--header-bg);
    color: var(--header-fg);
    border-bottom: var(--header-border);
    box-shadow: var(--header-shadow);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: max(.6rem, env(safe-area-inset-top)) 1.25rem .6rem;
    position: sticky;
    top: 0;
    z-index: 50;
}
.topbar a, .topbar label { color: var(--header-fg); }
.logo { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.1rem; }
.logo:hover { text-decoration: none; }
.logo-img { height: 32px; width: auto; max-width: 120px; border-radius: 4px; background: #fff; object-fit: contain; }
.logo-txt { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-sm);
            background: var(--accent); color: var(--on-accent); font-size: 1.1rem; }
.menu { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; flex: 1; }
.menu > a { padding: .4rem .75rem; border-radius: var(--radius-sm); }
.menu > a:hover, .menu > a.active { background: var(--menu-hover); text-decoration: none; }
.menu .user { margin-left: auto; font-size: .9rem; opacity: .95; }
.burger { display: none; cursor: pointer; font-size: 1.4rem; margin-left: auto; }
.pastille { display: inline-block; min-width: 1.3em; padding: 0 .35em; border-radius: 999px; background: var(--accent); color: var(--on-accent);
            font-size: .75rem; font-weight: 700; text-align: center; }
.btn-installer, .btn-mode { background: var(--accent); color: var(--on-accent); border: 0; border-radius: var(--radius-sm);
                            padding: .4rem .75rem; font: inherit; font-weight: 600; cursor: pointer; }
.btn-mode { background: var(--menu-hover); color: var(--header-fg); padding: .4rem .6rem; }

/* ---------- 7. Mise en page ---------- */
.container { max-width: 1200px; margin: 1.5rem auto; padding: 0 1rem env(safe-area-inset-bottom); }
.footer { text-align: center; color: var(--muted); font-size: .85rem; padding: 2rem 0; }
.page-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.page-head h1 { margin: 0; }
.card {
    background: var(--card);
    border: var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}
.grid { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.inline { display: inline; }
.vide { color: var(--muted); font-style: italic; }
.muted { color: var(--muted); }
.txt-danger { color: var(--danger); font-weight: 600; }
.code { font-family: ui-monospace, Consolas, monospace; font-size: 1.3rem; letter-spacing: .15em; }

/* ---------- 8. Statistiques ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat { background: var(--card); border: var(--card-border); border-top: var(--stat-border); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 1rem 1.25rem; }
.stat .label { color: var(--muted); font-size: .85rem; }
.stat .value { font-size: 1.5rem; font-weight: 700; margin-top: .25rem; font-family: var(--font-titre); }
.stat.alerte { border-top-color: var(--danger); }
.stat.alerte .value { color: var(--danger); }

/* ---------- 9. Tableaux ---------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--card); }
th, td { padding: .6rem .75rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
th { background: var(--card-2); font-size: .85rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
tr:hover td { background: var(--hover); }
tr.retard td { background: color-mix(in srgb, var(--danger) 9%, var(--card)); }
.num { text-align: right; white-space: nowrap; }
.du { color: var(--danger); font-weight: 600; }
dl.infos { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; margin: 0; }
dl.infos dt { color: var(--muted); }
dl.infos dd { margin: 0; }

/* ---------- 10. Formulaires ---------- */
form .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.field { margin-bottom: 1rem; }
.field small.muted { display: block; margin-top: .2rem; font-size: .8rem; }
label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url],
input[type=date], input[type=tel], input[type=search], select, textarea {
    width: 100%;
    padding: .55rem .7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font: inherit;
    color: var(--text);
    background: var(--input-bg);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary); outline-offset: -1px; border-color: transparent; }
input[disabled] { opacity: .7; }
textarea { min-height: 80px; resize: vertical; }
textarea[readonly] { background: var(--card-2); font-size: .9rem; }
input[type=checkbox], input[type=radio] { accent-color: var(--primary); }
.filtres { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.filtres input, .filtres select { width: auto; flex: 1 1 180px; }
.mesures-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .75rem 1rem; }
.choix-couleur { width: 100%; height: 44px; padding: 2px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--input-bg); cursor: pointer; }
.saisie-prefixe { display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--input-bg); }
.saisie-prefixe span { padding: .55rem .6rem; background: var(--card-2); color: var(--muted); font-size: .85rem; white-space: nowrap;
                       overflow: hidden; text-overflow: ellipsis; max-width: 55%; align-self: center; }
.saisie-prefixe input { border: 0; border-radius: 0; min-width: 0; }

/* ---------- 11. Boutons ---------- */
.btn {
    display: inline-block;
    padding: .55rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--primary);
    background: var(--primary);
    color: var(--on-primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
    text-align: center;
}
.btn:hover { background: var(--primary-dark); border-color: var(--primary-dark); text-decoration: none; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn-light { background: transparent; color: var(--primary-txt); border-color: var(--primary-txt); }
.btn-light:hover { background: color-mix(in srgb, var(--primary) 9%, transparent); }
.btn-accent { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-accent:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 82%, #000); }
.btn-sm { padding: .3rem .6rem; font-size: .85rem; }
.btn-large { padding: .8rem 1.4rem; font-size: 1.05rem; }

/* ---------- 12. Alertes et badges (s'adaptent au mode sombre) ---------- */
.alert { padding: .75rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; border: 1px solid; }
.alert ul { margin: 0; padding-left: 1.2rem; }
.alert-success { color: var(--success); background: color-mix(in srgb, var(--success) 11%, var(--card)); border-color: color-mix(in srgb, var(--success) 30%, var(--card)); }
.alert-error   { color: var(--danger);  background: color-mix(in srgb, var(--danger) 10%, var(--card));  border-color: color-mix(in srgb, var(--danger) 30%, var(--card)); }
.alert-info    { color: var(--info);    background: color-mix(in srgb, var(--info) 10%, var(--card));    border-color: color-mix(in srgb, var(--info) 28%, var(--card)); }

.badge { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.badge-en_attente { color: var(--muted);   background: color-mix(in srgb, var(--muted) 16%, var(--card)); }
.badge-en_cours   { color: var(--info);    background: color-mix(in srgb, var(--info) 14%, var(--card)); }
.badge-essayage   { color: var(--warning); background: color-mix(in srgb, var(--warning) 16%, var(--card)); }
.badge-termine    { color: var(--primary-txt); background: color-mix(in srgb, var(--primary) 13%, var(--card)); }
.badge-livre      { color: var(--success); background: color-mix(in srgb, var(--success) 14%, var(--card)); }
.badge-annule     { color: var(--danger);  background: color-mix(in srgb, var(--danger) 13%, var(--card)); }

/* ---------- 13. Pagination, progression, onglets ---------- */
.pagination { display: flex; gap: .25rem; margin-top: 1rem; flex-wrap: wrap; }
.pagination a { padding: .3rem .65rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); }
.pagination a.active { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.progress { height: 8px; background: var(--card-2); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; margin: .5rem 0; }
.progress span { display: block; height: 100%; background: var(--accent); }
.onglets { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: 1rem; border-bottom: 2px solid var(--border); }
.onglets a { padding: .55rem 1rem; border-radius: var(--radius-sm) var(--radius-sm) 0 0; color: var(--muted); margin-bottom: -2px; border-bottom: 2px solid transparent; }
.onglets a.active { color: var(--primary-txt); border-bottom-color: var(--accent); font-weight: 600; }
.onglets a:hover { text-decoration: none; color: var(--primary-txt); }

/* ---------- 14. Connexion, installation ---------- */
.login-page { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 1rem; }
.login-box { width: 100%; max-width: 380px; }
.login-box h1 { text-align: center; color: var(--primary-txt); margin-bottom: 0; }
.login-logo { text-align: center; margin-bottom: .5rem; }
.logo-grand { height: 72px; width: auto; max-width: 200px; object-fit: contain; }
.logo-grand.logo-txt { width: 72px; height: 72px; font-size: 2rem; border-radius: 50%; background: var(--primary); color: var(--on-primary);
                       box-shadow: 0 0 0 4px var(--accent); }
.logo-apercu { height: 48px; width: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.logo-apercu.logo-txt { display: none; }
.install { max-width: 900px; }
.install-box { max-width: 560px; }
.etapes { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0 0 1.25rem; justify-content: center; }
.etapes li { display: flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .9rem; }
.etapes li a { display: flex; align-items: center; gap: .4rem; color: inherit; }
.etapes li span { display: inline-flex; width: 1.7rem; height: 1.7rem; border-radius: 50%; align-items: center; justify-content: center;
                  background: var(--border); color: var(--text); font-weight: 700; font-size: .85rem; }
.etapes li.actuel { color: var(--primary-txt); font-weight: 600; }
.etapes li.actuel span { background: var(--primary); color: var(--on-primary); }
.etapes li.fait span { background: var(--accent); color: var(--on-accent); }
.etapes li + li::before { content: "›"; color: var(--border); margin-right: .1rem; }

/* ---------- 15. Frise d'avancement d'une commande ---------- */
.frise { list-style: none; display: flex; padding: 0; margin: 1rem 0; }
.frise li { flex: 1; text-align: center; position: relative; font-size: .78rem; color: var(--muted); padding-top: 1.4rem; }
.frise li span { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1rem; height: 1rem; border-radius: 50%; background: var(--border); z-index: 1; }
.frise li::before { content: ""; position: absolute; top: .45rem; left: -50%; width: 100%; height: 3px; background: var(--border); }
.frise li:first-child::before { display: none; }
.frise li.fait span, .frise li.fait::before, .frise li.actuel::before { background: var(--accent); }
.frise li.actuel span { background: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 20%, transparent); }
.frise li.actuel { color: var(--text); font-weight: 600; }

/* ---------- 16. Preuves, portail, reçu ---------- */
.preuve-img { max-width: 100%; max-height: 520px; border: 1px solid var(--border); border-radius: var(--radius-sm); display: block; }
.preuve-pdf { width: 100%; height: 520px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.cartes-commandes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; }
.carte-commande h2 { font-size: 1.05rem; }
.moyen { border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem 1rem; margin-bottom: .75rem; background: var(--card-2); }
.moyen .numero { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-family: ui-monospace, Consolas, monospace; font-size: 1.15rem; margin: .25rem 0; }
.mesure { display: flex; flex-direction: column; padding: .5rem .75rem; background: var(--card-2); border-radius: var(--radius-sm); }
.recu { max-width: 720px; margin: auto; }
.recu-entete { display: flex; gap: 1rem; align-items: center; border-bottom: 1px solid var(--border); padding-bottom: 1rem; }
.recu-entete h1 { margin: 0; }

/* ---------- 17. Choix du thème (page Paramètres) ---------- */
.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .9rem; margin-bottom: 1rem; }
.theme-choix { position: relative; cursor: pointer; display: block; margin: 0; font-weight: normal; }
.theme-choix input { position: absolute; opacity: 0; pointer-events: none; }
.theme-apercu { display: block; border: 2px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg); background-image: var(--bg-image);
                background-size: 24px 24px; color: var(--text); font-family: var(--font); transition: transform .12s, border-color .12s; }
.theme-choix:hover .theme-apercu { transform: translateY(-2px); }
.theme-choix input:checked + .theme-apercu { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent); }
.theme-choix input:focus-visible + .theme-apercu { outline: 2px solid var(--primary); outline-offset: 2px; }
.ta-barre { display: block; height: 22px; background: var(--header-bg); border-bottom: var(--header-border); }
.ta-corps { display: block; padding: 10px; }
.ta-carte { display: block; background: var(--card); border: var(--card-border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px; }
.ta-ligne { display: block; height: 6px; border-radius: 3px; background: var(--border); margin-bottom: 5px; }
.ta-ligne.courte { width: 55%; }
.ta-btns { display: flex; gap: 5px; margin-top: 7px; }
.ta-btn { display: block; width: 34px; height: 12px; border-radius: var(--radius-sm); background: var(--primary); }
.ta-btn.acc { background: var(--accent); }
.ta-nom { display: block; padding: .45rem .6rem; font-family: var(--font-titre); font-weight: var(--titre-poids); font-size: .9rem;
          border-top: 1px solid var(--border); background: var(--card); color: var(--text); }
.ta-nom small { display: block; font-family: var(--font); font-weight: 400; color: var(--muted); font-size: .75rem; }
.reglages-apparence { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 1rem; }
textarea.code-css { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; min-height: 140px; }

/* ---------- 18. Écrans tactiles ---------- */
@media (pointer: coarse) {
    .btn, .btn-installer, .btn-mode, select, input[type=text], input[type=email], input[type=password], input[type=number],
    input[type=date], input[type=tel], input[type=search], input[type=url] { min-height: 44px; }
    .btn-sm { min-height: 38px; padding: .45rem .8rem; }
    .pagination a { padding: .55rem .9rem; }
    input[type=checkbox] { width: 22px; height: 22px; }
}

/* ---------- 19. Tablette ---------- */
@media (max-width: 1024px) {
    .container { margin-top: 1rem; }
    .grid-2 { grid-template-columns: 1fr; }
    .menu > a { padding: .4rem .55rem; font-size: .92rem; }
}

/* ---------- 20. Téléphone ---------- */
@media (max-width: 800px) {
    .topbar { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
    .burger { display: block; }
    .menu { display: none; flex-direction: column; align-items: stretch; width: 100%; gap: 0; padding-bottom: .5rem; }
    #menu-toggle:checked ~ .menu { display: flex; flex: 1 1 100%; }
    .menu > a, .btn-installer, .btn-mode { padding: .75rem .5rem; font-size: 1rem; text-align: left; }
    .menu .user { margin: .5rem 0 0; border-top: 1px solid color-mix(in srgb, var(--header-fg) 25%, transparent); padding-top: .75rem; }
    .logo { max-width: calc(100% - 3rem); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}
@media (max-width: 700px) {
    h1 { font-size: 1.3rem; }
    .container { padding: 0 .75rem; margin: .75rem auto; }
    .card { padding: 1rem; }
    input, select, textarea { font-size: 16px !important; }   /* évite le zoom automatique sur iPhone */
    .page-head { align-items: flex-start; }
    .page-head .actions { width: 100%; }
    .actions .btn { flex: 1 1 auto; }
    .stats { grid-template-columns: 1fr 1fr; gap: .6rem; }
    .stat { padding: .75rem; }
    .stat .value { font-size: 1.15rem; }
    .filtres input, .filtres select, .filtres .btn { flex: 1 1 100%; }
    form .row { grid-template-columns: 1fr; gap: 0; }
    .mesures-grid { grid-template-columns: 1fr 1fr; }
    dl.infos { grid-template-columns: 1fr; gap: 0; }
    dl.infos dt { margin-top: .5rem; font-size: .85rem; }
    .cartes-commandes { grid-template-columns: 1fr; }
    .frise li { font-size: .68rem; }
    .preuve-pdf { height: 380px; }
    .recu-entete { flex-direction: column; text-align: center; }
    .etapes { justify-content: flex-start; }
    .etapes li + li::before { display: none; }
    .themes { grid-template-columns: 1fr 1fr; gap: .6rem; }

    /* Tableaux → fiches empilées (libellés ajoutés par app.js) */
    .table-wrap { overflow: visible; }
    table.pile, table.pile tbody, table.pile tr, table.pile td, table.pile tfoot { display: block; width: 100%; }
    table.pile { background: transparent; }
    table.pile thead { display: none; }
    table.pile tbody tr { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: .6rem; padding: .35rem .75rem; background: var(--card); }
    table.pile tbody tr.retard { border-color: color-mix(in srgb, var(--danger) 35%, var(--card)); }
    table.pile tbody tr.retard td { background: transparent; }
    table.pile tr:hover td { background: transparent; }
    table.pile td { border: 0; padding: .35rem 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; text-align: right; }
    table.pile td::before { content: attr(data-label); color: var(--muted); font-size: .8rem; font-weight: 600; text-align: left; flex-shrink: 0; }
    table.pile td:not([data-label])::before, table.pile td[data-label=""]::before { display: none; }
    table.pile td.vide-cellule { display: none; }
    table.pile td.num { white-space: normal; }
    table.pile td > form.inline, table.pile td.actions { justify-content: flex-end; flex-wrap: wrap; }
    table.pile tfoot tr { display: flex; justify-content: space-between; padding: .35rem .75rem; }
    table.pile tfoot th { background: none; border: 0; padding: .2rem 0; }
}
@media (max-width: 380px) {
    .stats { grid-template-columns: 1fr; }
    .mesures-grid { grid-template-columns: 1fr; }
}

/* ---------- 21. Application installée ---------- */
@media (display-mode: standalone) {
    .footer { padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
}

/* ---------- 22. Impression : toujours sur fond blanc ---------- */
@media print {
    :root, [data-mode], [data-theme] { --bg: #fff; --bg-image: none; --card: #fff; --card-2: #f5f5f5; --text: #000; --muted: #555; --border: #ccc; --shadow: none; color-scheme: light; }
    .topbar, .footer, .no-print, .btn, form.inline, .btn-mode, .btn-installer { display: none !important; }
    body { background: #fff; }
    .card { border: none; padding: 0; box-shadow: none; }
    .container { margin: 0; max-width: none; }
}

/* =====================================================================
 *  Version 3 : menus déroulants, agenda, graphiques, vitrine, console
 * ===================================================================== */

/* ---------- Menu : rubriques déroulantes ---------- */
.menu-groupe { position: relative; }
.menu-groupe > summary { list-style: none; cursor: pointer; padding: .4rem .75rem; border-radius: var(--radius-sm); user-select: none; }
.menu-groupe > summary::-webkit-details-marker { display: none; }
.menu-groupe > summary::after { content: " ▾"; font-size: .8em; opacity: .8; }
.menu-groupe[open] > summary, .menu-groupe > summary:hover, .menu-groupe.actif > summary { background: var(--menu-hover); }
.sous-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 210px; display: flex; flex-direction: column;
             background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
             box-shadow: 0 10px 30px rgba(0,0,0,.15); padding: .35rem; }
.topbar .sous-menu a { color: var(--text); padding: .5rem .7rem; border-radius: var(--radius-sm); }
.topbar .sous-menu a:hover, .topbar .sous-menu a.active { background: var(--hover); text-decoration: none; }
.topbar .sous-menu a.active { color: var(--primary-txt); font-weight: 600; }
@media (max-width: 800px) {
    .menu-groupe > summary { padding: .75rem .5rem; font-size: 1rem; }
    .sous-menu { position: static; box-shadow: none; border: 0; background: transparent; padding: 0 0 0 .9rem; min-width: 0; }
    .topbar .sous-menu a { color: var(--header-fg); padding: .6rem .5rem; }
    .topbar .sous-menu a:hover, .topbar .sous-menu a.active { background: var(--menu-hover); color: var(--header-fg); }
}

/* ---------- Divers ---------- */
.bandeau-licence a { font-weight: 600; }
label.case, .case { display: inline-flex; align-items: center; gap: .4rem; font-weight: normal; margin: 0; cursor: pointer; }
label.check { font-weight: normal; display: flex; gap: .5rem; align-items: flex-start; }
.btn.actif { background: var(--primary); color: var(--on-primary); }
.agenda-titre { font-family: var(--font-titre); font-size: 1.1rem; margin: 0 .5rem; }
ul.diff { margin: .3rem 0 0; padding-left: 1.1rem; font-size: .88rem; }
ul.diff del { color: var(--danger); text-decoration: line-through; }
ul.diff ins { color: var(--success); text-decoration: none; font-weight: 600; }
.lignes-devis input { min-width: 70px; }
.lignes-devis td { vertical-align: middle; }
.cartes-profils { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.carte-profil { border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1rem; background: var(--card-2); }
.carte-profil h3 { margin: 0 0 .2rem; font-size: 1rem; }
.mini-mesures { display: flex; flex-wrap: wrap; gap: .3rem .8rem; font-size: .85rem; margin: .5rem 0; }
.onglets-profils { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.chiffre-cle { font-size: 1.6rem; font-weight: 700; font-family: var(--font-titre); }
.moyens-paiement { display: grid; gap: .6rem; margin: .8rem 0 1rem; }
.moyens-paiement > div { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .6rem .8rem; background: var(--card-2); }
.moyens-paiement .num { float: right; font-family: ui-monospace, Consolas, monospace; }
.prefixe-saisie { display: flex; align-items: stretch; }
.prefixe-saisie span { display: flex; align-items: center; padding: 0 .6rem; border: 1px solid var(--border); border-right: 0;
                       border-radius: var(--radius-sm) 0 0 var(--radius-sm); background: var(--card-2); color: var(--muted); font-size: .9rem; white-space: nowrap; }
.prefixe-saisie input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; min-width: 0; }
.pot-de-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Badges supplémentaires (abonnements, ateliers) */
.badge-essai    { color: var(--info);    background: color-mix(in srgb, var(--info) 14%, var(--card)); }
.badge-actif    { color: var(--success); background: color-mix(in srgb, var(--success) 14%, var(--card)); }
.badge-suspendu { color: var(--danger);  background: color-mix(in srgb, var(--danger) 13%, var(--card)); }
.badge-expire   { color: var(--warning); background: color-mix(in srgb, var(--warning) 16%, var(--card)); }
.badge-validee  { color: var(--success); background: color-mix(in srgb, var(--success) 14%, var(--card)); }
.badge-rejetee  { color: var(--danger);  background: color-mix(in srgb, var(--danger) 13%, var(--card)); }

/* ---------- Agenda ---------- */
.agenda-barre { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.calendrier { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--border);
              border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.cal-entete { background: var(--card-2); color: var(--muted); font-size: .8rem; font-weight: 600; text-align: center; padding: .45rem .25rem; }
.cal-jour { background: var(--card); min-height: 108px; padding: .35rem; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.calendrier-semaine .cal-jour { min-height: 300px; }
.cal-jour.hors-mois { background: var(--card-2); }
.cal-jour.hors-mois .cal-num { opacity: .5; }
.cal-num { font-size: .8rem; font-weight: 600; color: var(--muted); margin-bottom: 2px; }
.cal-jour.aujourdhui { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-jour.aujourdhui .cal-num { color: var(--primary-txt); }
.cal-nom-jour { display: none; }
.evt { display: flex; gap: .25rem; align-items: baseline; font-size: .76rem; line-height: 1.25; padding: .2rem .35rem; border-radius: 5px;
       color: var(--text); background: var(--card-2); border-left: 3px solid var(--muted); overflow: hidden; }
.evt:hover { text-decoration: none; filter: brightness(.97); }
.evt-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.calendrier-semaine .evt-txt { white-space: normal; }
.evt-txt small { color: var(--muted); }
.evt-essayage  { border-left-color: var(--warning); background: color-mix(in srgb, var(--warning) 12%, var(--card)); }
.evt-livraison { border-left-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--card)); }
.evt-retard    { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 13%, var(--card)); }
.evt-fait      { opacity: .55; text-decoration: line-through; }
.evt-plus { font-size: .75rem; color: var(--muted); padding-left: .35rem; }
.legende { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.legende .evt { display: inline-flex; }
@media (max-width: 700px) {
    /* Téléphone : liste des jours qui ont des rendez-vous */
    .calendrier { display: block; background: none; border: 0; }
    .cal-entete, .cal-jour.vide, .cal-jour.hors-mois { display: none; }
    .cal-jour { min-height: 0 !important; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: .6rem; padding: .6rem; }
    .cal-nom-jour { display: inline; }
    .cal-num { font-size: .95rem; color: var(--text); }
    .evt { font-size: .9rem; padding: .45rem .55rem; }
    .evt-txt { white-space: normal; }
}

/* ---------- Graphiques (SVG) ---------- */
.graphique { width: 100%; height: auto; display: block; overflow: visible; }
.graphique text { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.graphique .grille { stroke: var(--border); stroke-width: 1; }
.graphique .serie-0 { fill: var(--primary); }
.graphique .serie-1 { fill: var(--accent); }
.graphique rect:hover { opacity: .8; }
.legende-graphique { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .85rem; color: var(--muted); margin: .3rem 0 .8rem; }
.legende-graphique span::before { content: ""; display: inline-block; width: .8em; height: .8em; border-radius: 2px; margin-right: .35em; vertical-align: -.05em; }
.legende-graphique .l0::before { background: var(--primary); }
.legende-graphique .l1::before { background: var(--accent); }
.classement { display: grid; gap: .55rem; margin-bottom: 1rem; }
.classement .ligne-c { display: grid; grid-template-columns: minmax(90px, 32%) 1fr auto; gap: .6rem; align-items: center; font-size: .9rem; }
.classement .barre { height: 14px; border-radius: 999px; background: var(--card-2); overflow: hidden; }
.classement .barre span { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.classement .ligne-c:nth-child(2n) .barre span { background: var(--accent); }
.classement .val { font-weight: 600; white-space: nowrap; }
.classement .lib { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Page de présentation (vitrine) ---------- */
.vitrine .topbar .menu { justify-content: flex-end; }
.hero { background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 70%, var(--accent))); color: var(--on-primary); }
.hero-in { max-width: 1100px; margin: 0 auto; padding: 3.5rem 1rem; display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.5rem; align-items: center; }
.hero h1 { font-size: clamp(1.8rem, 4vw, 2.7rem); line-height: 1.15; margin: 0 0 1rem; color: inherit; }
.hero .lead { font-size: 1.12rem; opacity: .95; margin: 0 0 1.5rem; }
.hero .btn-light { background: transparent; border-color: currentColor; color: inherit; }
.hero .puces { list-style: none; padding: 0; margin: 1.2rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .95rem; opacity: .95; }
.apercu { background: var(--card); color: var(--text); border-radius: 14px; padding: 1rem; box-shadow: 0 20px 50px rgba(0,0,0,.25); transform: rotate(1.5deg); }
.apercu .mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: .8rem; }
.apercu .mini-stats div { background: var(--card-2); border-radius: 8px; padding: .5rem; font-size: .8rem; color: var(--muted); }
.apercu .mini-stats strong { display: block; font-size: 1.3rem; color: var(--primary-txt); }
.apercu .ligne { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .55rem .2rem; border-top: 1px solid var(--border); font-size: .88rem; }
.section-v { max-width: 1100px; margin: 0 auto; padding: 3.5rem 1rem; }
.section-v > h2 { text-align: center; font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: .4rem; }
.section-v .sous { text-align: center; color: var(--muted); max-width: 640px; margin: 0 auto 2rem; }
.bande-v { background: var(--card-2); }
.fonctions { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.fonction { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem; }
.fonction .ico { font-size: 1.6rem; }
.fonction h3 { margin: .4rem 0 .3rem; font-size: 1.05rem; }
.fonction p { margin: 0; color: var(--muted); font-size: .93rem; }
.etapes-v { list-style: none; counter-reset: e; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; }
.etapes-v li { counter-increment: e; background: var(--card); border-radius: var(--radius); padding: 1.2rem 1.2rem 1.2rem 3.6rem; position: relative; color: var(--muted); }
.etapes-v li::before { content: counter(e); position: absolute; left: 1rem; top: 1.1rem; width: 1.9rem; height: 1.9rem; border-radius: 50%;
                       background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.etapes-v strong { display: block; color: var(--text); margin-bottom: .2rem; }
.tarifs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; align-items: stretch; }
.tarif { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.4rem; display: flex; flex-direction: column; position: relative; }
.tarif.vedette { border: 2px solid var(--accent); box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.tarif .prix { font-size: 1.9rem; font-weight: 800; margin-top: .4rem; font-family: var(--font-titre); }
.tarif .par { color: var(--muted); font-size: .88rem; }
.tarif ul { padding-left: 1.1rem; color: var(--muted); flex: 1; }
.tarif .etiquette { position: absolute; top: -.7rem; right: 1rem; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: .8rem; padding: .15rem .55rem; border-radius: 999px; }
.faq details { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1.1rem; margin: 0 auto .6rem; max-width: 760px; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq p { color: var(--muted); margin-bottom: 0; }
.cta-v { text-align: center; }
.form-v { max-width: 620px; margin: 2rem auto; }
.pied-v { text-align: center; color: var(--muted); font-size: .88rem; padding: 2rem 1rem; border-top: 1px solid var(--border); }
@media (max-width: 800px) {
    .hero-in { grid-template-columns: 1fr; padding: 2.2rem 1rem; }
    .apercu { transform: none; }
    .section-v { padding: 2.4rem 1rem; }
}

/* ---------- Console de la plateforme ---------- */
.console-barre { background: #1f1b18; color: #f5efe6; }
.ateliers-liste td small { display: block; }

@media print {
    .menu-groupe, .bandeau-licence, .btn-installer { display: none !important; }
    .aide-sommaire { display: none !important; }
}
.filtres label.case input { flex: none; width: auto; }