/* ==========================================================
   GARAGE F36 — thème commun à toutes les pages
   D'après l'intérieur du véhicule :
     NOIR 40 %   planche de bord, surfaces
     CORAL 30 %  cuir — panneaux pleins, actions, données
     SILVER 20 % joncs aluminium brossé — filets, chiffres
   Le reste : blanc cassé du texte et couleurs d'état.
   ========================================================== */

:root {
    /* --- ZONES DE SECURITE (encoche, coins arrondis, barre de geste) ---
       Passer par des variables permet de les forcer dans un navigateur de
       bureau pour verifier le rendu d'un iPhone sans en avoir un. */
    --sat: env(safe-area-inset-top);
    --sab: env(safe-area-inset-bottom);
    --sal: env(safe-area-inset-left);
    --sar: env(safe-area-inset-right);

    /* --- NOIR (40 %) --- */
    --bg: #08080a;
    --bg-2: #0d0d10;
    --card: #131316;
    --card-2: #1b1b1f;
    --card-3: #292a2f;

    /* --- CORAL RED (30 %) --- */
    --accent: #e8443c;
    --accent-2: #ff6a5e;
    --accent-3: #b32a24;
    --accent-tint: rgba(232, 68, 60, .16);
    --accent-line: rgba(232, 68, 60, .38);
    --accent-glow: rgba(232, 68, 60, .55);
    /* Surfaces en cuir : coral posé sur le noir */
    --leather: linear-gradient(158deg, #e8443c 0%, #c9332c 55%, #a8271f 100%);
    --leather-soft: linear-gradient(158deg, rgba(232,68,60,.20), rgba(168,39,31,.10));
    --leather-dark: #241414;

    /* --- SILVER (20 %) --- */
    --silver: #c9ced4;
    --silver-hi: #eef0f2;
    --silver-2: #9aa0a6;
    --silver-3: #6e747a;
    /* Jonc alu brossé : bandeau horizontal */
    --trim: linear-gradient(90deg, transparent 0%, #8b9199 12%, var(--silver-hi) 50%, #8b9199 88%, transparent 100%);
    /* Jonc alu vertical / bord de pièce */
    --trim-v: linear-gradient(180deg, var(--silver-hi), var(--silver-2) 45%, var(--silver) 55%, var(--silver-3));

    --line: rgba(201, 206, 212, .14);
    --line-2: rgba(201, 206, 212, .26);

    --text: #eceef0;
    --muted: rgba(236, 238, 240, .55);
    --muted-2: rgba(236, 238, 240, .26);

    --ok: #5eb98a;
    --warn: #e0a33d;
    --bad: #e8443c;
    --ok-tint: rgba(94, 185, 138, .14);
    --bad-tint: rgba(232, 68, 60, .14);

    --glass: rgba(11, 11, 14, .82);

    --r-xl: 30px; --r-lg: 22px; --r-md: 15px; --r-sm: 10px;
    --sh-1: 0 2px 6px -2px rgba(0,0,0,.65);
    --sh-2: 0 16px 40px -18px rgba(0,0,0,.92);
    --sh-3: 0 34px 70px -24px rgba(0,0,0,.96);
    --sh-red: 0 12px 30px -10px var(--accent-glow);

    --spring: cubic-bezier(.22,1,.36,1);
    --snap: cubic-bezier(.34,1.56,.64,1);

    --f-display: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --f-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

    /* Ordre d'empilement : sans ça la barre du haut passe sous le contenu */
    --z-hero: 1;
    --z-body: 2;
    --z-nav: 60;
    --z-tab: 70;
    --z-sheet: 100;

    /* alias hérités des anciennes feuilles */
    --separator: var(--line);
    --blur-bg: var(--glass);
    --radius: var(--r-lg);
    --danger: var(--bad);
    --danger-tint: var(--bad-tint);
    --green: var(--ok);
    --orange: var(--warn);
    --spring-old: var(--spring);
}

[data-theme="light"] {
    --bg: #e4e7eb; --bg-2: #dce0e5;
    --card: #ffffff; --card-2: #f3f5f7; --card-3: #d8dce1;

    --accent: #c8322c; --accent-2: #a82720; --accent-3: #8d1e18;
    --accent-tint: rgba(200, 50, 44, .12); --accent-line: rgba(200, 50, 44, .3);
    --accent-glow: rgba(200, 50, 44, .35);
    --leather: linear-gradient(158deg, #d3382f 0%, #b62b24 55%, #96201a 100%);
    --leather-soft: linear-gradient(158deg, rgba(200,50,44,.14), rgba(150,32,26,.07));
    --leather-dark: #f7e9e8;

    --silver: #6e747a; --silver-hi: #4b5157; --silver-2: #636970; --silver-3: #a9aeb4;
    --trim: linear-gradient(90deg, transparent 0%, #b6bbc0 12%, #7d838a 50%, #b6bbc0 88%, transparent 100%);
    --trim-v: linear-gradient(180deg, #b6bbc0, #7d838a 45%, #9aa0a6 55%, #6e747a);
    --line: rgba(22, 24, 28, .16); --line-2: rgba(22, 24, 28, .3);

    --text: #16181c; --muted: rgba(22, 24, 28, .62); --muted-2: rgba(22, 24, 28, .45);
    --ok: #46855f; --warn: #a2741d; --bad: #c8322c;
    --ok-tint: rgba(70, 133, 95, .12); --bad-tint: rgba(200, 50, 44, .12);
    --glass: rgba(248, 249, 250, .86);
    --sh-1: 0 1px 3px rgba(30, 35, 45, .09);
    --sh-2: 0 16px 40px -20px rgba(30, 35, 45, .3);
    --sh-3: 0 34px 70px -26px rgba(30, 35, 45, .34);
}

/* ==========================================================
   PRIMITIVES PARTAGÉES
   ========================================================== */

/* --- Jonc aluminium : la pièce de trim, visible et assumée --- */
.trim-bar {
    height: 3px; border-radius: 3px; background: var(--trim);
    opacity: .9; flex-shrink: 0;
}
.trim-rule {
    height: 2px; border-radius: 2px; background: var(--trim);
    opacity: .75; margin: 0; border: none;
}
/* Filet fin sur l'arête haute d'une carte */
.has-trim { position: relative; }
.has-trim::before {
    content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 2px;
    background: var(--trim); opacity: .8; pointer-events: none; border-radius: 0 0 2px 2px;
}

/* --- Chiffres : toujours en aluminium --- */
.num {
    font-family: var(--f-mono); font-weight: 700; letter-spacing: -.05em;
    color: var(--silver); font-variant-numeric: tabular-nums;
}
.num-hi { color: var(--text); }
.num-red { color: var(--accent); }

/* --- Panneau cuir : grande surface coral --- */
.leather-panel {
    background: var(--leather); color: #fff;
    border-radius: var(--r-lg); position: relative; overflow: hidden;
    box-shadow: var(--sh-red);
}
.leather-panel::before {
    content: ''; position: absolute; top: 0; left: 8%; right: 8%; height: 2px;
    background: var(--trim); opacity: .85; border-radius: 0 0 2px 2px;
}
/* Grain fin du cuir */
.leather-panel::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .16;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23g)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}

/* --- Boutons --- */
.btn-red {
    border: none; border-radius: 100px; padding: 16px 22px;
    background: var(--leather); color: #fff;
    font-family: var(--f-display); font-size: 15px; font-weight: 750; letter-spacing: -.2px;
    cursor: pointer; box-shadow: var(--sh-red);
    transition: transform .22s var(--snap), box-shadow .25s, filter .25s;
}
.btn-red:hover { filter: brightness(1.08); }
.btn-red:active { transform: scale(.96); }

/* Bouton cerclé aluminium, comme les molettes de la console */
.btn-alu {
    border: 1px solid var(--line-2); border-radius: 100px; padding: 11px 18px;
    background: var(--card-2); color: var(--silver);
    font-family: var(--f-display); font-size: 13.5px; font-weight: 650;
    cursor: pointer; text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    transition: border-color .22s, color .22s, background .22s, transform .2s var(--snap);
}
.btn-alu:hover { border-color: var(--silver-2); color: var(--text); background: var(--card-3); }
.btn-alu:active { transform: scale(.95); }

/* --- Jonc alu de la barre d'onglets ---
   Le bouton + deborde au-dessus de la barre : le jonc s'interrompt au centre
   pour le contourner, au lieu de sembler le traverser. */
.tabbar::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
    pointer-events: none; opacity: .8;
    background: linear-gradient(90deg,
        transparent 0%, #8b9199 7%, var(--silver-hi) 24%, #8b9199 36%, transparent 41%,
        transparent 59%, #8b9199 64%, var(--silver-hi) 76%, #8b9199 93%, transparent 100%);
}
[data-theme="light"] .tabbar::before {
    background: linear-gradient(90deg,
        transparent 0%, #b6bbc0 7%, #7d838a 24%, #b6bbc0 36%, transparent 41%,
        transparent 59%, #b6bbc0 64%, #7d838a 76%, #b6bbc0 93%, transparent 100%);
}

/* --- Bouton + de la barre d'onglets ---
   Defini ici une seule fois : il doit etre identique sur toutes les pages. */
.tab-add {
    width: 58px; height: 58px; border-radius: 21px; flex-shrink: 0; margin: -22px 12px 0;
    background: var(--accent); border: none; color: #fff; cursor: pointer;
    /* Le bouton deborde au-dessus de la barre : il doit peindre par-dessus
       le filet du haut, sinon une ligne semble le traverser. */
    position: relative; z-index: 2; isolation: isolate;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .7);
    transition: transform .32s var(--snap), box-shadow .3s;
}
.tab-add:hover { box-shadow: 0 14px 32px -10px rgba(0, 0, 0, .8); }
.tab-add:active { transform: scale(.88) rotate(90deg); }
.tab-add svg { width: 25px; height: 25px; }

/* Bouton + en ligne (formulaire To-Do) : meme couleur et meme ressenti,
   taille reduite car il accompagne un champ de saisie. */
.btn-add {
    width: 50px; height: 50px; border-radius: 17px; flex-shrink: 0;
    background: var(--accent); border: none; color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .7);
    transition: transform .32s var(--snap), box-shadow .3s;
}
.btn-add:hover { box-shadow: 0 12px 26px -8px rgba(0, 0, 0, .8); }
.btn-add:active { transform: scale(.88) rotate(90deg); }
.btn-add svg { width: 22px; height: 22px; }

/* --- Titre de section : rappel du jonc --- */
.sec-title {
    display: flex; align-items: center; gap: 14px; margin: 36px 0 16px;
}
.sec-title h2 {
    font-family: var(--f-display); font-size: 20px; font-weight: 700;
    letter-spacing: -.6px; white-space: nowrap;
}
.sec-title::after {
    content: ''; flex: 1; height: 2px; border-radius: 2px;
    background: var(--trim); opacity: .55;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Barres de defilement aux couleurs de l'app (25/09/2026) : fines, argent
   discret, rouge au survol ; au lieu de la barre grise du navigateur. */
:root { scrollbar-color: var(--line-2) transparent; }
.side-scroll, .gd, .ntf-panel .ntf-list, .pl-right, .pl-drawer, .mk-list, .pl-zlist, .pl-sug, dialog {
    scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.side-scroll:hover, .gd:hover, .ntf-panel .ntf-list:hover, .pl-right:hover, .pl-drawer:hover {
    scrollbar-color: var(--accent-line) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); background-clip: padding-box; }

/* Plaque d'immatriculation : fond clair, contour bleu, chiffres en gras, comme la vraie (theme clair ou sombre). */
.plate { display: inline-block; font: 700 13px/1.3 var(--f-mono); letter-spacing: .5px; color: #12141a; background: #f4f4f1;
         border: 2.5px solid #1f3f99; border-radius: 8px; padding: 2px 10px; white-space: nowrap; vertical-align: middle;
         text-decoration: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); direction: ltr; unicode-bidi: isolate; }
.plate.sm { font-size: 11px; border-width: 2px; border-radius: 6px; padding: 1px 7px; }
.plate.lg { font-size: 17px; border-width: 3px; border-radius: 10px; padding: 5px 16px; }
a:hover > .plate, a.plate:hover { filter: brightness(.96); }
.plate-none { color: var(--muted-2); }

/* Logo de la marque d'un vehicule : toujours dans un carre (1:1), centre, sans deformer ;
   fond transparent ; en theme sombre, sa version sombre (.dk) si elle existe. */
.mk-logo { display: inline-block; flex: none; width: 40px; height: 40px; aspect-ratio: 1 / 1; object-fit: contain;
           object-position: center; vertical-align: middle; margin-inline-end: 8px; }
.mk-logo.xs { width: 24px; height: 24px; margin-inline-end: 6px; }
.mk-logo.sm { width: 34px; height: 34px; }
.mk-logo.lg { width: 64px; height: 64px; margin-inline-end: 12px; }
.mk-logo.dk { display: none; }
html:not([data-theme="light"]) .mk-logo.lt { display: none; }
html:not([data-theme="light"]) .mk-logo.dk { display: inline-block; }