/*
 * Motard&Moi — système de design « Carbone ».
 *
 * Direction artistique : le tableau de bord d'une moto la nuit. Un noir carbone, un blanc os, et une seule couleur,
 * l'ambre du clignotant, réservée à l'action et à la trace (le fil du tracé qui revient sur toutes les pages).
 * Titres en Archivo très large (graisse 800, chasse étendue), texte en Inter, chiffres tabulaires façon compteur.
 *
 * Mobile d'abord : barre d'onglets en bas de l'écran pour les membres, cibles tactiles de 44 px minimum, zones sûres iOS.
 * Mode sombre automatique. L'en-tête, le bandeau d'accueil et la barre d'onglets restent carbone dans les deux modes.
 * Polices auto-hébergées : aucune requête externe.
 */

@font-face {
    font-family: "Inter";
    src: url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Archivo";
    src: url("/assets/fonts/archivo-latin-wdth-normal.woff2") format("woff2");
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-style: normal;
    font-display: swap;
}

/* ---------- Jetons ---------- */
:root {
    /* Carbone (neutres froids) */
    --carbon-950: #0b0c0e;
    --carbon-900: #141619;
    --carbon-850: #1c1f23;
    --carbon-800: #262a2f;
    --carbon-700: #3a3f46;
    --carbon-600: #6a7078;
    --carbon-500: #868b93;
    --carbon-400: #9ba1a9;
    --carbon-200: #d9dbde;
    --bone-200: #e4e2dd;
    --bone-100: #ecebe7;
    --bone-50: #f4f3f0;

    /* Ambre « clignotant » : la seule couleur de la marque */
    --amber-300: #ffc857;
    --amber-400: #ffb21e;
    --amber-700: #8a5200; /* texte ambre sur fond clair : 5,8:1 */
    --amber-soft: #fff3d9;

    /* Rôles — mode clair */
    --color-bg: var(--bone-50);
    --color-surface: #ffffff;
    --color-surface-2: var(--bone-100);
    --color-sunk: #ffffff;
    --color-border: var(--bone-200);
    --color-border-strong: #c9c6bf;
    --color-control: var(--carbon-500);   /* contour des champs : 3,4:1 */
    --color-text: var(--carbon-950);
    --color-muted: #5c6168;               /* 5,6:1 sur le fond */
    --color-accent: var(--amber-700);     /* texte d'accent */
    --color-accent-hover: #6b3f00;
    --color-accent-fill: var(--amber-400); /* aplats, trace, soulignés */
    --color-accent-soft: var(--amber-soft);
    --color-button: var(--amber-400);      /* texte carbone à 10,9:1 */
    --color-button-hover: var(--amber-300);
    --color-button-text: var(--carbon-950);
    --color-accent-contrast: var(--carbon-950);
    --color-focus: #2563eb;
    --color-success: #166534;
    --color-success-soft: #e6f4ea;
    --color-warning: #7a4a00;
    --color-warning-soft: #fff3d9;
    --color-danger: #b42318;
    --color-danger-soft: #fdecea;
    /* SOS : le rouge « danger » déjà utilisé pour les actions destructives, jamais un second accent de marque */
    --color-sos: #b42318;
    --color-sos-hover: #8f1c13;
    --color-sos-ring: rgb(180 35 24 / 0.35);

    /* Habillage carbone (identique dans les deux modes) */
    --chrome: var(--carbon-950);
    --chrome-2: var(--carbon-900);
    --chrome-line: rgb(255 255 255 / 0.09);
    --chrome-text: #f1f0ec;
    --chrome-muted: var(--carbon-400);

    /* Typographie */
    --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: "Archivo", "Inter", system-ui, sans-serif;
    --wide: 125%;
    --text-2xs: 0.6875rem;
    --text-xs: 0.8125rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: clamp(1.75rem, 6.5vw, 2.5rem);
    --text-3xl: clamp(2.5rem, 11vw, 5.25rem);

    /* Espacements (échelle de 4 px) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.5rem;
    --space-8: 3rem;
    --space-10: 4.5rem;
    --space: var(--space-4);
    --gutter: var(--space-4);

    /* Formes, élévation, mouvement */
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 20px;
    --radius-pill: 999px;
    --shadow-1: 0 1px 0 rgb(11 12 14 / 0.04);
    --shadow-2: 0 10px 30px -12px rgb(11 12 14 / 0.25);
    --shadow-3: 0 24px 60px -20px rgb(11 12 14 / 0.45);
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --duration: 180ms;
    --control-height: 3rem;
    --content-width: 72rem;
    --header-height: 3.5rem;
    --tabbar-height: 4rem;
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: var(--carbon-950);
        --color-surface: var(--carbon-900);
        --color-surface-2: var(--carbon-850);
        --color-sunk: #0f1114;
        --color-border: var(--carbon-800);
        --color-border-strong: var(--carbon-700);
        --color-control: var(--carbon-600);
        --color-text: #f1f0ec;
        --color-muted: var(--carbon-400);
        --color-accent: var(--amber-400);
        --color-accent-hover: var(--amber-300);
        --color-accent-soft: #2a2110;
        --color-focus: #8ab4ff;
        --color-success: #86efac;
        --color-success-soft: #0f2618;
        --color-warning: #fcd34d;
        --color-warning-soft: #2a2110;
        --color-danger: #fca5a5;
        --color-danger-soft: #2e1210;
        --shadow-1: 0 1px 0 rgb(0 0 0 / 0.3);
        --shadow-2: 0 12px 32px -12px rgb(0 0 0 / 0.7);
        --shadow-3: 0 24px 60px -20px rgb(0 0 0 / 0.85);
    }
}

@media (min-width: 48rem) {
    :root { --gutter: var(--space-6); --header-height: 4rem; }
}

@media (prefers-reduced-motion: reduce) {
    :root { --duration: 0ms; }
    html { scroll-behavior: auto; }
}

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

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + var(--space-4)); }

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    font-family: var(--font);
    font-size: var(--text-base);
    line-height: 1.55;
    background: var(--color-bg);
    color: var(--color-text);
    font-feature-settings: "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-stretch: var(--wide);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.01em;
    margin: var(--space-7) 0 var(--space-3);
    text-wrap: balance;
}
h1 { font-size: var(--text-2xl); margin-top: var(--space-2); text-transform: uppercase; }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-base); font-weight: 750; font-stretch: 110%; letter-spacing: 0; line-height: 1.25; }
p { margin: 0 0 var(--space-4); }

@media (min-width: 48rem) {
    h2 { font-size: 1.625rem; }
}

a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--color-accent-fill);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.22em;
    transition: color var(--duration) var(--ease), text-decoration-color var(--duration) var(--ease);
}
a:hover { color: var(--color-accent); }

img { max-width: 100%; }

:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }

::selection { background: var(--amber-400); color: var(--carbon-950); }

hr { border: 0; height: 1px; margin: var(--space-7) 0; background: var(--color-border); }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

.pre-line { white-space: pre-line; overflow-wrap: anywhere; }

.skip-link {
    position: absolute;
    left: -999px;
    top: var(--space-2);
    z-index: 200;
    padding: var(--space-3) var(--space-4);
    background: var(--amber-400);
    color: var(--carbon-950);
    border-radius: var(--radius-pill);
    font-weight: 700;
    text-decoration: none;
}
.skip-link:focus { left: var(--space-2); }

/* Libellé « télémétrie » : petites capitales espacées précédées d'un trait ambre */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-muted);
}
.eyebrow::before { content: ""; width: 1.25rem; height: 2px; background: var(--color-accent-fill); border-radius: 2px; flex-shrink: 0; }

.icon { width: 1.375rem; height: 1.375rem; flex-shrink: 0; fill: none; stroke: currentcolor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- En-tête ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-3);
    align-items: center;
    min-height: var(--header-height);
    padding: var(--space-2) var(--gutter);
    padding-top: max(var(--space-2), env(safe-area-inset-top, 0px));
    background: var(--chrome); /* opaque : un filtre d'arrière-plan piégerait le menu plein écran (position fixe) */
    color: var(--chrome-text);
    border-bottom: 1px solid var(--chrome-line);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-right: auto;
    min-height: 2.75rem;
    font-family: var(--font-display);
    font-stretch: var(--wide);
    font-weight: 850;
    font-size: 1.125rem;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--chrome-text);
    text-decoration: none;
    line-height: 1;
}
.brand:hover { color: #fff; }
.brand .amp { color: var(--amber-400); }
.brand-mark { width: 1.75rem; height: 1.75rem; flex-shrink: 0; }
@media (max-width: 24.99rem) { .brand { font-size: 0.95rem; } .brand-mark { width: 1.5rem; height: 1.5rem; } }

.header-cta { display: none; }

.main-nav {
    display: flex;
    gap: var(--space-1);
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none;
    max-width: 100%;
}
.main-nav::-webkit-scrollbar { display: none; }
.main-nav a, .main-nav button.link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 2.75rem;
    padding: 0 var(--space-3);
    border-radius: var(--radius-pill);
    color: var(--chrome-muted);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.main-nav a:hover, .main-nav button.link:hover { color: #fff; background: rgb(255 255 255 / 0.07); }
.main-nav a[aria-current="page"] { color: #fff; background: rgb(255 255 255 / 0.1); }
.main-nav a.button { color: var(--carbon-950); background: var(--amber-400); padding: 0 var(--space-4); }
.main-nav a.button:hover { color: var(--carbon-950); background: var(--amber-300); }
.main-nav .nav-section { display: none; }
.main-nav .icon { display: none; }

.nav-toggle { display: none; }

@media (max-width: 63.99rem) {
    .js .header-cta {
        display: inline-flex;
        min-height: 2.5rem;
        padding: 0 var(--space-4);
        font-size: var(--text-sm);
    }
    .js .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        min-width: 2.75rem;
        min-height: 2.75rem;
        padding: 0 var(--space-3);
        border: 1px solid var(--chrome-line);
        border-radius: var(--radius-pill);
        background: rgb(255 255 255 / 0.04);
        color: var(--chrome-text);
        font: inherit;
        font-weight: 600;
        font-size: var(--text-sm);
        cursor: pointer;
    }
    @media (max-width: 29.99rem) {
        /* Sur petit écran, l'icône seule : le libellé reste lu par les lecteurs d'écran */
        .nav-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
        .js .nav-toggle { padding: 0; }
    }
    .nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after {
        display: block; width: 16px; height: 2px; background: currentcolor; border-radius: 2px; position: relative; content: "";
        transition: transform var(--duration) var(--ease), background-color var(--duration) var(--ease);
    }
    .nav-toggle .bars::before { position: absolute; top: -5px; }
    .nav-toggle .bars::after { position: absolute; top: 5px; }
    .nav-toggle[aria-expanded="true"] .bars { background: transparent; }
    .nav-toggle[aria-expanded="true"] .bars::before { transform: translateY(5px) rotate(45deg); }
    .nav-toggle[aria-expanded="true"] .bars::after { transform: translateY(-5px) rotate(-45deg); }

    /* Menu complet en panneau plein écran sous l'en-tête */
    .js .main-nav {
        display: none;
        position: fixed;
        inset: var(--header-height) 0 0 0;
        z-index: 60;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--space-3) var(--gutter) calc(var(--space-6) + var(--safe-bottom));
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--chrome);
    }
    .js .main-nav.open { display: flex; animation: sheet-in var(--duration) var(--ease); }
    .js .main-nav a, .js .main-nav button.link, .js .main-nav form { width: 100%; }
    .js .main-nav a, .js .main-nav button.link {
        min-height: 3.25rem;
        padding: 0 var(--space-2);
        border-radius: 0;
        border-bottom: 1px solid var(--chrome-line);
        font-family: var(--font-display);
        font-stretch: var(--wide);
        font-size: 1.125rem;
        font-weight: 750;
        color: var(--chrome-text);
        text-transform: uppercase;
        letter-spacing: -0.005em;
    }
    .js .main-nav a:hover, .js .main-nav button.link:hover { background: transparent; color: var(--amber-400); }
    .js .main-nav a[aria-current="page"] { background: transparent; color: var(--amber-400); }
    .js .main-nav .icon { display: block; color: var(--chrome-muted); }
    .js .main-nav a[aria-current="page"] .icon { color: var(--amber-400); }
    .js .main-nav .nav-section {
        display: block;
        margin: var(--space-5) 0 var(--space-1);
        padding: 0 var(--space-2);
        color: var(--chrome-muted);
        font-size: var(--text-2xs);
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
    }
    .js .main-nav .nav-section:first-child { margin-top: var(--space-2); }
    .js .main-nav a.button {
        justify-content: center;
        margin-top: var(--space-5);
        border: 0;
        border-radius: var(--radius-pill);
        color: var(--carbon-950);
        font-family: var(--font);
        font-stretch: 100%;
        font-size: var(--text-base);
        text-transform: none;
    }
    .js body.menu-open { overflow: hidden; }
    .js body.menu-open .site-header { z-index: 120; } /* le menu ouvert passe devant le bandeau cookies */
}
@keyframes sheet-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

@media (min-width: 64rem) {
    .site-header { flex-wrap: nowrap; }
    .main-nav { gap: 0; }
    .main-nav a, .main-nav button.link { padding: 0 var(--space-3); }
    .main-nav .nav-home { display: none; }
    .main-nav .nav-break { margin-left: var(--space-2); position: relative; }
    .main-nav .nav-break::before { content: ""; position: absolute; left: calc(-1 * var(--space-1)); top: 25%; bottom: 25%; width: 1px; background: var(--chrome-line); }
}

/* ---------- Barre d'onglets mobile (membres) ---------- */
.tabbar { display: none; }
@media (max-width: 63.99rem) {
    .tabbar {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 55;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        height: calc(var(--tabbar-height) + var(--safe-bottom));
        padding: 0 var(--space-1) var(--safe-bottom);
        background: color-mix(in srgb, var(--chrome) 94%, transparent);
        -webkit-backdrop-filter: saturate(160%) blur(14px);
        backdrop-filter: saturate(160%) blur(14px);
        border-top: 1px solid var(--chrome-line);
    }
    .tabbar a {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.2rem;
        min-height: 2.75rem;
        color: var(--chrome-muted);
        font-size: var(--text-2xs);
        font-weight: 600;
        letter-spacing: 0.01em;
        text-decoration: none;
    }
    .tabbar a:hover { color: var(--chrome-text); }
    .tabbar a[aria-current="page"] { color: var(--chrome-text); }
    .tabbar a[aria-current="page"] .icon { color: var(--amber-400); }
    .tabbar a[aria-current="page"]::before {
        content: "";
        position: absolute;
        top: 0; left: 30%; right: 30%;
        height: 3px;
        border-radius: 0 0 3px 3px;
        background: var(--amber-400);
    }
    .has-tabbar main { padding-bottom: calc(var(--space-8) + var(--tabbar-height) + var(--safe-bottom)); }
    .has-tabbar .site-footer { padding-bottom: calc(var(--space-6) + var(--tabbar-height) + var(--safe-bottom)); }
    .has-tabbar .cookie-banner { bottom: calc(var(--space-3) + var(--tabbar-height) + var(--safe-bottom)); }
}

/* ---------- Mise en page ---------- */
main { flex: 1; width: 100%; max-width: var(--content-width); margin: 0 auto; padding: var(--space-5) var(--gutter) var(--space-10); }
@media (min-width: 48rem) { main { padding-top: var(--space-7); } }

/* ---------- Pied de page ---------- */
.site-footer {
    padding: var(--space-7) var(--gutter);
    background: var(--chrome);
    color: var(--chrome-muted);
    font-size: var(--text-sm);
    border-top: 1px solid var(--chrome-line);
}
.site-footer .footer-inner { max-width: calc(var(--content-width) - 2 * var(--gutter)); margin: 0 auto; display: grid; gap: var(--space-6); }
.site-footer .footer-brand {
    margin: 0 0 var(--space-2);
    font-family: var(--font-display);
    font-stretch: var(--wide);
    font-weight: 850;
    font-size: 1.5rem;
    text-transform: uppercase;
    color: var(--chrome-text);
    line-height: 1;
}
.site-footer .footer-brand .amp { color: var(--amber-400); }
.site-footer p { margin: 0 0 var(--space-1); }
.footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-4); list-style: none; margin: 0; padding: 0; }
.footer-links a {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--chrome-text);
    text-decoration: none;
    border-bottom: 1px solid var(--chrome-line);
}
.footer-links a:hover { color: var(--amber-400); }
.footer-legal { color: var(--chrome-muted); font-size: var(--text-xs); }
@media (min-width: 48rem) {
    .site-footer .footer-inner { grid-template-columns: 1fr 2fr; align-items: start; }
    .footer-links { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Boutons ---------- */
.button, button.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--control-height);
    padding: 0 var(--space-5);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--color-button);
    color: var(--color-button-text);
    font: inherit;
    font-weight: 700;
    font-size: var(--text-sm);
    letter-spacing: 0.005em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease), transform var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.button:hover { background: var(--color-button-hover); color: var(--color-button-text); }
.button:active { transform: scale(0.98); }
.button.secondary { background: transparent; color: var(--color-text); border-color: var(--color-control); }
.button.secondary:hover { background: var(--color-surface-2); color: var(--color-text); border-color: var(--color-text); }
.button.danger { background: #b42318; color: #fff; }
.button.danger:hover { background: #8f1c13; color: #fff; }
.button[disabled], .button[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
.button.small { min-height: 2.5rem; padding: 0 var(--space-4); font-size: var(--text-xs); }
.button .icon { width: 1.125rem; height: 1.125rem; }

button.link {
    background: none; border: 0; padding: 0;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    text-decoration-color: var(--color-accent-fill);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.22em;
    cursor: pointer;
}
button.link:hover { color: var(--color-accent); }
form.inline { display: inline; }

/* ---------- Formulaires ---------- */
.form-page { max-width: 38rem; }
.field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.field > label, fieldset > legend { font-weight: 650; font-size: var(--text-sm); }
.field.checkbox, label.checkbox, label.radio { flex-direction: row; display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-3); line-height: 1.45; }
input[type="checkbox"], input[type="radio"] { width: 1.25rem; height: 1.25rem; margin: 0.05rem 0 0; accent-color: var(--amber-400); flex-shrink: 0; }
input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="month"], input[type="datetime-local"], input[type="time"],
input[type="number"], input[type="search"], input[type="url"], input[type="tel"], select, textarea {
    width: 100%;
    min-height: var(--control-height);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-control);
    border-radius: var(--radius);
    background: var(--color-sunk);
    color: var(--color-text);
    font: inherit;
    font-size: max(1rem, 16px); /* évite le zoom automatique d'iOS */
    transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
select {
    appearance: none;
    padding-right: 2.25rem;
    background-image: linear-gradient(45deg, transparent 50%, currentcolor 50%), linear-gradient(135deg, currentcolor 50%, transparent 50%);
    background-position: calc(100% - 1.1rem) 50%, calc(100% - 0.75rem) 50%;
    background-size: 0.35rem 0.35rem;
    background-repeat: no-repeat;
}
textarea { min-height: 7rem; resize: vertical; padding-top: var(--space-3); }
input:hover, select:hover, textarea:hover { border-color: var(--color-text); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: none;
    border-color: var(--color-text);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber-400) 55%, transparent);
}
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--color-danger); }
input[type="file"] { font: inherit; font-size: var(--text-sm); max-width: 100%; }
input[type="file"]::file-selector-button {
    margin-right: var(--space-3);
    min-height: 2.5rem;
    padding: 0 var(--space-4);
    border: 1px solid var(--color-control);
    border-radius: var(--radius-pill);
    background: var(--color-surface-2);
    color: var(--color-text);
    font: inherit;
    font-weight: 650;
    cursor: pointer;
}
fieldset { border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin: 0 0 var(--space-5); padding: var(--space-4) var(--space-4) var(--space-2); min-width: 0; }
fieldset > legend { padding: 0 var(--space-2); margin-left: calc(-1 * var(--space-2)); }
.help, .hint { margin: 0; font-size: var(--text-sm); color: var(--color-muted); }
.field-errors { margin: 0; padding: 0; list-style: none; color: var(--color-danger); font-size: var(--text-sm); font-weight: 600; }
.field-errors li::before { content: "! "; font-weight: 800; }
form.boxed, .panel {
    padding: var(--space-5) var(--space-4);
    margin-bottom: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}
@media (min-width: 40rem) { form.boxed, .panel { padding: var(--space-5); } }
.danger-zone { margin-top: var(--space-8); padding: var(--space-5) var(--space-4); border: 1px solid color-mix(in srgb, var(--color-danger) 40%, transparent); border-radius: var(--radius-lg); background: var(--color-danger-soft); }
.danger-zone h2 { margin-top: 0; color: var(--color-danger); }
.form-grid { display: grid; gap: 0 var(--space-4); }
@media (min-width: 40rem) { .form-grid.two { grid-template-columns: 1fr 1fr; } }
form > .button:only-of-type, form > button.button:last-child { margin-top: var(--space-1); }
@media (max-width: 39.99rem) {
    /* Sur téléphone, le bouton principal d'un formulaire prend toute la largeur (plus facile au pouce) */
    .form-page form > button.button, .form-page form > .actions > .button:first-child,
    form.boxed > button.button { width: 100%; }
}

/* ---------- Messages ---------- */
.flash, .notice {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    margin-bottom: var(--space-4);
}
.flash { display: flex; gap: var(--space-3); align-items: flex-start; font-weight: 600; }
.flash::before { content: ""; flex-shrink: 0; width: 0.5rem; height: 0.5rem; margin-top: 0.45rem; border-radius: 50%; background: currentcolor; }
.flash-success { background: var(--color-success-soft); color: var(--color-success); border-color: color-mix(in srgb, currentcolor 30%, transparent); }
.flash-warning, .notice.danger, .notice.warning { background: var(--color-warning-soft); color: var(--color-warning); border-color: color-mix(in srgb, currentcolor 30%, transparent); }
.notice.accent { background: var(--color-accent-soft); border-color: color-mix(in srgb, var(--amber-400) 50%, transparent); }
.notice > :last-child { margin-bottom: 0; }
.notice h2 { margin-top: 0; }

/* ---------- Badges ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.15rem 0.6rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: var(--color-surface-2);
    color: var(--color-text);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.6;
    white-space: nowrap;
    vertical-align: middle;
}
.badge-accent { background: var(--amber-400); border-color: transparent; color: var(--carbon-950); }
.badge-success { background: var(--color-success-soft); border-color: transparent; color: var(--color-success); }
.badge-warning { background: var(--color-warning-soft); border-color: transparent; color: var(--color-warning); }
.badge-danger { background: var(--color-danger-soft); border-color: transparent; color: var(--color-danger); }

/* ---------- Avatars, profils, listes ---------- */
.avatar { border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; flex-shrink: 0; }
.avatar-placeholder { background: var(--carbon-800); color: var(--chrome-text); font-family: var(--font-display); font-stretch: var(--wide); font-weight: 800; }
.avatar-32 { width: 32px; height: 32px; font-size: 0.8rem; }
.avatar-96 { width: 88px; height: 88px; font-size: 2.2rem; box-shadow: 0 0 0 3px var(--color-surface), 0 0 0 5px var(--amber-400); margin: 5px; }
.actions { display: flex; gap: var(--space-2) var(--space-3); align-items: center; flex-wrap: wrap; }
.people, .menu-list, .devices, .codes, .facts, .links { list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.people li, .devices li, .menu-list li {
    display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
}
.people li .actions { margin-left: auto; }
.people li > a:not(.button) { font-weight: 650; text-decoration: none; }
.cards { list-style: none; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.card {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}
.card img { width: 100%; height: auto; border-radius: var(--radius); margin-bottom: var(--space-3); aspect-ratio: 4 / 3; object-fit: cover; }
.card h3 { margin: 0 0 var(--space-1); }
.card p { margin: 0; color: var(--color-muted); }
.qr svg { width: 200px; height: 200px; background: #fff; padding: 8px; border-radius: var(--radius-sm); }
.secret { font-size: 1.1rem; letter-spacing: 0.05em; font-variant-numeric: tabular-nums; }
.codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); font-variant-numeric: tabular-nums; }
.pagination { display: flex; gap: var(--space-4); justify-content: space-between; margin-top: var(--space-5); }
.prose { max-width: 44rem; }
.prose h2 { margin-top: var(--space-8); }
.prose li { margin-bottom: var(--space-1); }

/* ---------- En-tête de page ---------- */
.page-head { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-end; justify-content: space-between; margin-bottom: var(--space-5); padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-border); }
.page-head > div { min-width: 0; flex: 1 1 16rem; }
.page-head h1 { margin-bottom: var(--space-2); }
.page-head p { margin: 0; color: var(--color-muted); }
@media (max-width: 39.99rem) {
    .page-head > .actions, .page-head > .button { width: 100%; }
    .page-head > .actions .button, .page-head > .button { flex: 1 1 auto; }
}
.back-link {
    display: inline-flex; align-items: center; gap: var(--space-2);
    min-height: 2.75rem;
    margin-bottom: var(--space-1);
    color: var(--color-muted);
    font-size: var(--text-sm); font-weight: 650;
    text-decoration: none;
}
.back-link:hover { color: var(--color-text); }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.section-title a { font-size: var(--text-sm); font-weight: 650; white-space: nowrap; }
.lead { font-size: var(--text-lg); color: var(--color-muted); max-width: 44rem; }
.empty {
    padding: var(--space-7) var(--space-4);
    text-align: center;
    color: var(--color-muted);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--amber-400) 8%, transparent), transparent 70%),
        var(--color-surface);
}
.empty p { margin-bottom: var(--space-3); }
.empty > :last-child { margin-bottom: 0; }

/* ---------- Accueil ---------- */
.hero {
    position: relative;
    margin: calc(-1 * var(--space-5)) calc(-1 * var(--gutter)) 0;
    padding: var(--space-8) var(--gutter) var(--space-10);
    background:
        radial-gradient(90% 60% at 100% 0%, rgb(255 178 30 / 0.14), transparent 60%),
        linear-gradient(180deg, var(--carbon-950), var(--carbon-900));
    color: var(--chrome-text);
    overflow: hidden;
    isolation: isolate;
}
.hero-trace { position: absolute; z-index: -1; right: -6rem; bottom: -1rem; width: min(52rem, 140%); height: auto; opacity: 0.9; pointer-events: none; }
.hero-trace .road { fill: none; stroke: rgb(255 255 255 / 0.06); stroke-width: 26; stroke-linecap: round; stroke-linejoin: round; }
.hero-trace .line { fill: none; stroke: var(--amber-400); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: draw 2.4s var(--ease) 0.2s forwards; }
.hero-trace .pin { fill: var(--carbon-950); stroke: var(--amber-400); stroke-width: 3; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .hero-trace .line { animation: none; stroke-dashoffset: 0; } }
.hero-inner { position: relative; max-width: calc(var(--content-width) - 2 * var(--gutter)); margin: 0 auto; }
.hero .eyebrow { color: var(--chrome-muted); }
.hero h1 { font-size: var(--text-3xl); line-height: 0.92; letter-spacing: -0.025em; max-width: 11ch; margin: var(--space-4) 0 var(--space-5); }
.hero h1 em { font-style: normal; color: var(--amber-400); }
.hero p { max-width: 34rem; font-size: var(--text-lg); color: var(--carbon-200); }
.hero .actions { margin-top: var(--space-6); }
.hero .button { min-height: 3.25rem; padding: 0 var(--space-6); font-size: var(--text-base); background: var(--amber-400); color: var(--carbon-950); }
.hero .button:hover { background: var(--amber-300); color: var(--carbon-950); }
.hero .button.secondary { background: transparent; color: var(--chrome-text); border-color: rgb(255 255 255 / 0.3); }
.hero .button.secondary:hover { background: rgb(255 255 255 / 0.08); border-color: #fff; color: #fff; }
@media (max-width: 29.99rem) { .hero .actions .button { flex: 1 1 100%; } }
@media (min-width: 48rem) {
    .hero { margin-top: calc(-1 * var(--space-7)); padding-top: var(--space-10); padding-bottom: 6rem; }
    .hero-trace { right: -2rem; bottom: -2rem; width: 46rem; }
}
@media (min-width: 72rem) {
    .hero { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
}
.trust { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: var(--space-7) 0 0; }
.trust li {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border: 1px solid rgb(255 255 255 / 0.14);
    border-radius: var(--radius-pill);
    color: var(--carbon-200);
    font-size: var(--text-xs); font-weight: 600;
}
.trust li::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--amber-400); }

.home-section { margin: var(--space-10) 0; }
.home-section > h2 { margin: var(--space-3) 0 var(--space-6); font-size: var(--text-2xl); text-transform: uppercase; max-width: 18ch; }
.features { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-top: 1px solid var(--color-border); }
.features li { display: grid; grid-template-columns: 3rem 1fr; gap: 0 var(--space-4); padding: var(--space-5) 0; border-bottom: 1px solid var(--color-border); }
.features .num { grid-row: span 2; font-family: var(--font-display); font-stretch: var(--wide); font-weight: 800; font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; padding-top: 0.2rem; }
.features .num::after { content: ""; display: block; width: 1.25rem; height: 2px; margin-top: var(--space-2); background: var(--amber-400); }
.features h3 { margin: 0 0 var(--space-2); font-size: var(--text-lg); text-transform: uppercase; font-stretch: var(--wide); font-weight: 800; }
.features p { margin: 0; color: var(--color-muted); max-width: 34rem; }
@media (min-width: 48rem) {
    .features { grid-template-columns: 1fr 1fr; column-gap: var(--space-7); border-top: 0; }
    .features li:nth-child(-n + 2) { border-top: 1px solid var(--color-border); }
}

.steps { list-style: none; padding: 0; margin: 0; counter-reset: step; display: grid; gap: 0; }
.steps li { counter-increment: step; position: relative; padding: 0 0 var(--space-6) 3.5rem; }
.steps li::before {
    content: counter(step, decimal-leading-zero);
    position: absolute; left: 0; top: 0;
    display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
    background: var(--carbon-950); color: var(--amber-400);
    font-family: var(--font-display); font-stretch: var(--wide); font-weight: 800; font-size: var(--text-xs);
    box-shadow: 0 0 0 4px var(--color-bg);
}
.steps li::after { content: ""; position: absolute; left: calc(1.25rem - 1px); top: 2.5rem; bottom: 0; width: 2px; background: repeating-linear-gradient(180deg, var(--color-border-strong) 0 8px, transparent 8px 14px); }
.steps li:last-child { padding-bottom: 0; }
.steps li:last-child::after { display: none; }
.steps h3 { margin: 0.55rem 0 var(--space-1); font-size: var(--text-lg); }
.steps p { margin: 0; color: var(--color-muted); max-width: 32rem; }
@media (min-width: 48rem) {
    .steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
    .steps li { padding: 3.5rem 0 0; }
    .steps li::after { left: 3.25rem; right: calc(-1 * var(--space-6) + 0.75rem); top: calc(1.25rem - 1px); bottom: auto; width: auto; height: 2px; background: repeating-linear-gradient(90deg, var(--color-border-strong) 0 8px, transparent 8px 14px); }
}

.cta-band {
    position: relative;
    display: grid; gap: var(--space-5);
    padding: var(--space-7) var(--space-5);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(80% 100% at 100% 100%, rgb(255 178 30 / 0.18), transparent 60%),
        var(--carbon-950);
    color: var(--chrome-text);
    overflow: hidden;
}
.cta-band h2 { margin: 0 0 var(--space-2); font-size: var(--text-2xl); text-transform: uppercase; color: #fff; }
.cta-band p { margin: 0; color: var(--carbon-200); }
.cta-band .button { justify-self: start; min-height: 3.25rem; padding: 0 var(--space-6); font-size: var(--text-base); background: var(--amber-400); color: var(--carbon-950); }
.cta-band .button:hover { background: var(--amber-300); color: var(--carbon-950); }
@media (max-width: 29.99rem) { .cta-band .button { justify-self: stretch; } }
@media (min-width: 48rem) { .cta-band { grid-template-columns: 1fr auto; align-items: center; padding: var(--space-8); } }

/* ---------- Bandeau cookies, pages légales ---------- */
.cookie-banner {
    position: fixed;
    inset: auto var(--space-3) calc(var(--space-3) + var(--safe-bottom)) var(--space-3);
    max-width: 40rem;
    max-height: calc(100dvh - var(--header-height) - var(--space-6));
    overflow-y: auto;
    margin: 0 auto;
    padding: var(--space-5);
    background: var(--carbon-900);
    color: var(--chrome-text);
    border: 1px solid var(--chrome-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-3);
    z-index: 100;
}
.cookie-banner h2 { margin-top: 0; font-size: var(--text-lg); text-transform: uppercase; }
.cookie-banner p { color: var(--carbon-200); font-size: var(--text-sm); }
.cookie-banner a { color: var(--chrome-text); }
.cookie-banner a:hover { color: var(--amber-400); }
.cookie-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.cookie-actions form { display: flex; flex-wrap: wrap; gap: var(--space-2); flex: 1 1 100%; }
/* Les deux choix ont exactement la même apparence (refuser aussi simple qu'accepter). */
.cookie-actions .button { flex: 1 1 9rem; min-width: 9rem; background: var(--amber-400); color: var(--carbon-950); }
.cookie-actions .button:hover { background: var(--amber-300); color: var(--carbon-950); }
.choice-list { list-style: none; padding: 0; }
.choice-list li { padding: var(--space-4); margin-bottom: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.choice-list .state { font-weight: 650; }
.prose table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); }
.prose th, .prose td { border: 1px solid var(--color-border-strong); padding: var(--space-2); text-align: left; vertical-align: top; }
.prose th { background: var(--color-surface-2); }
.table-scroll { position: relative; overflow-x: auto; }
.table-scroll:focus-visible { outline-offset: 4px; }

/* ---------- Autour de moi, cartes géographiques ---------- */
.map { height: 26rem; border-radius: var(--radius-lg); margin: var(--space-4) 0; border: 1px solid var(--color-border); z-index: 0; background: var(--color-surface-2); }
.map.small { height: 16rem; }
@media (max-width: 39.99rem) {
    .map { height: 62vh; min-height: 20rem; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); border-radius: 0; border-left: 0; border-right: 0; }
    .map.small { height: 15rem; min-height: 0; }
}
.map-block .help { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.filters { margin-bottom: var(--space-4); align-items: flex-end; }
.filters label { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-sm); font-weight: 650; }
.filters input[type="search"] { flex: 1 1 14rem; width: auto; }
.nearby-list li { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.leaflet-container { font-family: var(--font) !important; }
.leaflet-container a.leaflet-popup-close-button { color: var(--carbon-600); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { border-radius: var(--radius) !important; }
.leaflet-bar a { color: var(--carbon-950) !important; }

/* ---------- Groupes ---------- */
.group-grid { list-style: none; padding: 0; margin: 0 0 var(--space-6); display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.group-card {
    position: relative;
    display: flex; gap: var(--space-3); align-items: center;
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: border-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.group-card:hover { border-color: var(--color-text); }
.group-card:active { transform: scale(0.99); }
.group-card a { color: var(--color-text); font-weight: 750; text-decoration: none; }
.group-card a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* toute la carte est cliquable */
.group-card .badge { margin-left: auto; position: relative; z-index: 1; }
.group-card .meta { display: block; margin-top: 0.1rem; color: var(--color-muted); font-size: var(--text-sm); }
.group-logo { width: 52px; height: 52px; border-radius: var(--radius); object-fit: cover; flex-shrink: 0; background: var(--color-surface-2); }
.group-logo.placeholder {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--carbon-950); color: var(--amber-400);
    font-family: var(--font-display); font-stretch: var(--wide); font-weight: 850; font-size: 1.3rem;
}
.group-logo.large { width: 84px; height: 84px; border-radius: var(--radius-lg); font-size: 2.3rem; }
.group-header { display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-5); padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-border); }
.group-header > div { min-width: 0; flex: 1 1 14rem; }
.group-header h1 { margin: 0 0 var(--space-2); }
.group-header .meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; color: var(--color-muted); font-size: var(--text-sm); margin: 0; }
.group-layout { display: grid; gap: var(--space-5); }
@media (min-width: 56rem) {
    .group-layout { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
    .group-layout > .group-side { order: 2; position: sticky; top: calc(var(--header-height) + var(--space-4)); }
}
.group-side .panel > :last-child { margin-bottom: 0; }
.group-side h2 { margin-top: 0; font-size: var(--text-base); text-transform: uppercase; }
details.rules { margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); }
details.rules summary { cursor: pointer; font-weight: 700; min-height: 2rem; display: flex; align-items: center; }

/* ---------- Mur ---------- */
.composer textarea { border: 0; padding: 0; min-height: 4.5rem; box-shadow: none; background: transparent; }
.composer textarea:focus-visible { box-shadow: none; }
.composer-foot { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.composer-foot .field { margin: 0; }
.post {
    margin-bottom: var(--space-3);
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}
.post.pinned { border-color: color-mix(in srgb, var(--amber-400) 60%, var(--color-border)); box-shadow: inset 3px 0 0 var(--amber-400); }
.post > header { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-3); font-size: var(--text-sm); }
.post > header a { font-weight: 750; color: var(--color-text); text-decoration: none; }
.post > header time { color: var(--color-muted); }
.post > p { margin-bottom: var(--space-3); }
.post-photo { display: block; width: calc(100% + 2 * var(--space-4)); max-width: none; margin: 0 calc(-1 * var(--space-4)) var(--space-3); max-height: 32rem; object-fit: cover; }
.post-actions { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: var(--text-sm); color: var(--color-muted); padding-top: var(--space-2); border-top: 1px solid var(--color-border); }
.post-actions button.link, .post-actions a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--color-muted); text-decoration: none; font-weight: 650; }
.post-actions button.link:hover, .post-actions a:hover { color: var(--color-text); }
.post-actions button[aria-pressed="true"] { color: var(--color-accent); }
.comments { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.comments li { padding: var(--space-2) var(--space-3); background: var(--color-surface-2); border-radius: var(--radius); font-size: var(--text-sm); }
.comments li > a:first-child { font-weight: 750; color: var(--color-text); text-decoration: none; margin-right: var(--space-1); }
.comments li .tools { display: inline-flex; gap: var(--space-3); margin-left: var(--space-2); }
.comments li .tools a, .comments li .tools button.link { color: var(--color-muted); font-size: var(--text-xs); text-decoration: none; }
.comment-form { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.comment-form input { flex: 1; min-width: 0; }

/* ---------- Sorties ---------- */
.event-list { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: grid; gap: var(--space-2); }
.event-card {
    position: relative;
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3) var(--space-4); align-items: center;
    padding: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: border-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.event-card:hover { border-color: var(--color-text); }
.event-card:active { transform: scale(0.99); }
.event-card.cancelled { opacity: 0.65; }
.event-card .title { font-weight: 750; color: var(--color-text); text-decoration: none; line-height: 1.3; }
.event-card .title::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.event-card .meta { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); color: var(--color-muted); font-size: var(--text-sm); margin-top: 0.15rem; }
.event-card .meta > span + span::before { content: "·"; margin-right: var(--space-2); }
.event-card .badge { position: relative; z-index: 1; margin-left: var(--space-1); }
.date-tile {
    display: grid; place-items: center; align-content: center;
    width: 3.5rem; height: 3.75rem;
    border-radius: var(--radius);
    background: var(--carbon-950); color: #fff;
    line-height: 1;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}
.date-tile .day { font-family: var(--font-display); font-stretch: var(--wide); font-size: 1.5rem; font-weight: 800; }
.date-tile .month { font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.1em; color: var(--amber-400); margin-top: 0.3rem; }
.aside-events .event-card { padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2); }
.aside-events .date-tile { width: 3rem; height: 3.25rem; }
.aside-events .date-tile .day { font-size: 1.25rem; }

.event-hero { display: flex; gap: var(--space-4); align-items: flex-start; margin-bottom: var(--space-5); }
.event-hero > div { min-width: 0; }
.event-hero .date-tile { width: 4.25rem; height: 4.75rem; border-radius: var(--radius-lg); }
.event-hero .date-tile .day { font-size: 2rem; }
.event-hero h1 { margin: 0 0 var(--space-2); }
.event-facts { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); list-style: none; padding: 0; margin: 0 0 var(--space-5); background: var(--color-border); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.event-facts li { padding: var(--space-3) var(--space-4); background: var(--color-surface); }
.event-facts .label { display: block; font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 0.2rem; }
.safety { display: flex; gap: var(--space-3); align-items: flex-start; }
.safety::before { content: "!"; flex-shrink: 0; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; font-weight: 800; font-size: var(--text-sm); color: var(--carbon-950); background: var(--amber-400); }

.rsvp { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rsvp button { flex: 1 1 7rem; }
.rsvp button[aria-pressed="true"] { background: var(--color-button); color: var(--color-button-text); border-color: var(--color-button); }
.rsvp-status { font-weight: 700; }
meter.capacity { display: block; width: 100%; height: 6px; margin: var(--space-2) 0 var(--space-3); border: 0; border-radius: var(--radius-pill); background: var(--color-surface-2); appearance: none; }
meter.capacity::-webkit-meter-bar { background: var(--color-surface-2); border: 0; border-radius: var(--radius-pill); height: 6px; }
meter.capacity::-webkit-meter-optimum-value { background: var(--amber-400); border-radius: var(--radius-pill); }
meter.capacity::-moz-meter-bar { background: var(--amber-400); border-radius: var(--radius-pill); }

.participants { list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.participants li { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.participants li .actions { margin-left: auto; }
.participants li:last-child { border-bottom: 0; }

.photo-grid { list-style: none; padding: 0; display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
.photo-grid li { position: relative; }
.photo-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); display: block; }
.photo-grid .tools { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--text-xs); padding-top: var(--space-1); color: var(--color-muted); }

/* Mode ouvreur / serre-file */
.live-panel { border: 1px solid var(--chrome-line); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-4); background: var(--carbon-950); color: var(--chrome-text); }
.live-panel h2 { margin-top: 0; font-size: var(--text-lg); text-transform: uppercase; display: flex; align-items: center; gap: var(--space-3); }
.live-panel .help, .live-panel p { color: var(--carbon-200); }
.live-panel a { color: var(--chrome-text); }
.live-panel .button.secondary { color: var(--chrome-text); border-color: rgb(255 255 255 / 0.3); }
.live-panel .button.secondary:hover { background: rgb(255 255 255 / 0.08); color: #fff; }
.live-panel label { color: var(--chrome-text); }
.live-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--carbon-600); flex-shrink: 0; }
.live-panel[data-state="sharing"] .live-dot { background: #22c55e; box-shadow: 0 0 0 0 rgb(34 197 94 / 0.6); animation: pulse 1.8s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgb(34 197 94 / 0); } 100% { box-shadow: 0 0 0 0 rgb(34 197 94 / 0); } }
@media (prefers-reduced-motion: reduce) { .live-panel[data-state="sharing"] .live-dot { animation: none; } }
.riders { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: grid; gap: var(--space-2); }
.riders li { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font-size: var(--text-sm); padding: var(--space-2) var(--space-3); background: var(--carbon-850); border-radius: var(--radius); }
.riders li.alert { background: #3a1210; color: #fca5a5; font-weight: 650; }
.rider-marker { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 3px solid #fff; background: var(--carbon-700); color: #fff; font: 700 12px/1 var(--font); box-shadow: 0 2px 8px rgb(0 0 0 / 0.35); }
.rider-marker.opener { background: #16a34a; }
.rider-marker.sweeper { background: #2563eb; }
.rider-marker.me { background: var(--amber-400); color: var(--carbon-950); }
.rider-marker.alert { outline: 3px solid #dc2626; }

/* Grandes pages en deux colonnes */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
@media (min-width: 56rem) { .split { grid-template-columns: minmax(0, 1fr) 21rem; align-items: start; } }
.split > aside > section + section { margin-top: var(--space-4); }
.split aside h2 { margin-top: 0; font-size: var(--text-base); text-transform: uppercase; }
.panel h3 { margin: var(--space-4) 0 var(--space-1); font-size: var(--text-xs); color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.12em; font-family: var(--font); font-stretch: 100%; }
.panel > :last-child { margin-bottom: 0; }
.panel > h2:first-child { margin-top: 0; }

.debug { overflow: auto; font-size: 0.75rem; }

/* ---------- Pages d'authentification ---------- */
.auth-card {
    max-width: 28rem;
    margin: var(--space-2) auto var(--space-6);
    padding: var(--space-6) var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
}
.auth-card::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, var(--amber-400) 0 30%, var(--carbon-950) 30%);
}
@media (prefers-color-scheme: dark) { .auth-card::before { background: linear-gradient(90deg, var(--amber-400) 0 30%, var(--carbon-700) 30%); } }
.auth-card h1 { margin-top: 0; }
.auth-card form .button, .auth-card form button.button { width: 100%; margin-top: var(--space-2); min-height: 3.25rem; font-size: var(--text-base); }
.auth-card > p { margin: var(--space-3) 0 0; font-size: var(--text-sm); text-align: center; }
.auth-card > form + p { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
@media (max-width: 39.99rem) {
    /* Sur téléphone, la carte se fond dans la page : plus de place pour les champs */
    .auth-card { margin-top: 0; padding: var(--space-5) 0 0; border: 0; border-radius: 0; background: transparent; overflow: visible; }
    .auth-card::before { left: 0; right: auto; width: 3rem; border-radius: 3px; background: var(--amber-400); }
}
@media (min-width: 40rem) { .auth-card { padding: var(--space-7); margin-top: var(--space-6); } }

/* ---------- Espace membre ---------- */
.hub-grid { list-style: none; padding: 0; margin: 0 0 var(--space-5); display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.hub-grid li { position: relative; padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); transition: border-color var(--duration) var(--ease); }
.hub-grid li:hover { border-color: var(--color-text); }
.hub-grid a { display: block; padding-right: var(--space-6); color: var(--color-text); font-weight: 750; text-decoration: none; }
.hub-grid a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.hub-grid a::before {
    content: ""; position: absolute; right: var(--space-4); top: 50%;
    width: 0.55rem; height: 0.55rem; margin-top: -0.3rem;
    border-top: 2px solid var(--color-muted); border-right: 2px solid var(--color-muted);
    transform: rotate(45deg);
    transition: transform var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.hub-grid li:hover a::before { transform: translateX(3px) rotate(45deg); border-color: var(--amber-400); }
.hub-grid .help { margin-top: var(--space-1); padding-right: var(--space-6); }
.hub-grid li.danger a { color: var(--color-danger); }
.hub-section { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-muted); margin: var(--space-6) 0 var(--space-3); font-family: var(--font); font-stretch: 100%; }
.hub-section::before { content: ""; width: 1.25rem; height: 2px; background: var(--amber-400); border-radius: 2px; }

/* Listes de liens (menus secondaires) */
.menu-list a { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 2.25rem; color: var(--color-text); font-weight: 650; text-decoration: none; }
.menu-list a::after { content: ""; width: 0.5rem; height: 0.5rem; border-top: 2px solid var(--color-muted); border-right: 2px solid var(--color-muted); transform: rotate(45deg); }
.menu-list a:hover { color: var(--color-accent); }

/* Appareils connectés */
.devices li { display: grid; gap: var(--space-1); }
.devices strong { font-weight: 600; font-size: var(--text-sm); overflow-wrap: anywhere; }
.devices small { color: var(--color-muted); }

/* ---------- Profil ---------- */
.profile-header {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
    padding: var(--space-5) var(--space-4);
    margin-bottom: var(--space-5);
    background:
        radial-gradient(80% 120% at 100% 0%, rgb(255 178 30 / 0.16), transparent 60%),
        var(--carbon-950);
    color: var(--chrome-text);
    border-radius: var(--radius-lg);
}
.profile-header .avatar-96 { box-shadow: 0 0 0 3px var(--carbon-950), 0 0 0 5px var(--amber-400); }
.profile-header > div { min-width: 0; flex: 1 1 14rem; }
.profile-header h1 { margin: 0 0 var(--space-1); }
.profile-header p { margin: 0 0 var(--space-3); color: var(--carbon-200); }
.profile-header p a { color: var(--chrome-text); font-weight: 650; text-decoration: none; }
.profile-header p a:hover { color: var(--amber-400); }
.profile-header .button.secondary { color: var(--chrome-text); border-color: rgb(255 255 255 / 0.3); }
.profile-header .button.secondary:hover { background: rgb(255 255 255 / 0.08); color: #fff; }
.profile-header .badge { background: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.14); color: var(--chrome-text); }
.profile-header button.link { color: var(--chrome-text); }
@media (min-width: 40rem) { .profile-header { padding: var(--space-6); gap: var(--space-5); } }
.bio { font-size: var(--text-lg); max-width: 40rem; }
.facts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.facts li { padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: var(--color-surface); font-size: var(--text-sm); }
.links { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ---------- Membres d'un groupe : contrôles compacts ---------- */
.people .actions select { width: auto; min-height: 2.5rem; padding: 0 2.5rem 0 var(--space-3); font-size: var(--text-sm); }
.people .actions .button { min-height: 2.5rem; padding: 0 var(--space-4); font-size: var(--text-xs); }

/* ---------- Circuits, roadbooks, météo, hors ligne ---------- */
.help.block, .help .block, span.block { display: block; }
.actions.center { justify-content: center; }
@media (min-width: 40rem) { .form-grid.three { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 48rem) { .form-grid.four { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 30rem) and (max-width: 47.99rem) { .form-grid.four { grid-template-columns: 1fr 1fr; } }
.label-spacer { display: block; font-size: var(--text-sm); }

/* Onglets : pastilles défilantes sur téléphone */
.tabs {
    display: flex; gap: var(--space-2);
    margin: 0 calc(-1 * var(--gutter)) var(--space-5);
    padding: 0 var(--gutter) var(--space-1);
    overflow-x: auto;
    scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
    display: inline-flex; align-items: center;
    min-height: 2.5rem;
    padding: 0 var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    color: var(--color-text); font-size: var(--text-sm); font-weight: 650; text-decoration: none; white-space: nowrap;
}
.tabs a:hover { border-color: var(--color-text); color: var(--color-text); }
.tabs a[aria-current="page"] { background: var(--color-text); border-color: var(--color-text); color: var(--color-bg); }
@media (min-width: 48rem) { .tabs { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } }

/* Recherche */
.route-filters {
    display: grid; gap: var(--space-3) var(--space-4); align-items: end;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    padding: var(--space-4); margin-bottom: var(--space-5);
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
}
.route-filters .field { margin: 0; }
.route-filters .field.grow { grid-column: 1 / -1; }
.route-filters .zone { grid-column: 1 / -1; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; padding: var(--space-2) var(--space-3) var(--space-3); }
.route-filters .zone select { width: auto; }
.route-filters .zone .help { flex: 1 1 14rem; }
.route-filters > .actions { grid-column: 1 / -1; }
@media (max-width: 29.99rem) { .route-filters { grid-template-columns: 1fr 1fr; } .route-filters > .actions .button { flex: 1 1 auto; } }

/* Cartes de circuit */
.route-grid { list-style: none; padding: 0; margin: 0 0 var(--space-5); display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.route-card {
    position: relative; display: flex; flex-direction: column; overflow: hidden;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    transition: border-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.route-card:hover { border-color: var(--color-text); }
.route-card:active { transform: scale(0.99); }
.route-thumb { position: relative; aspect-ratio: 16 / 9; }
.route-thumb .badge { position: absolute; top: var(--space-2); left: var(--space-2); background: var(--carbon-950); border-color: transparent; color: #fff; }
.route-thumb, .route-preview {
    /* Fond « carte de nuit » : quadrillage et courbes de niveau discrètes, sans tuiles externes. */
    background-color: var(--carbon-900);
    background-image:
        repeating-radial-gradient(circle at 18% 120%, transparent 0 22px, rgb(255 255 255 / 0.05) 22px 23px),
        repeating-radial-gradient(circle at 92% -20%, transparent 0 30px, rgb(255 255 255 / 0.04) 30px 31px),
        linear-gradient(rgb(255 255 255 / 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgb(255 255 255 / 0.03) 1px, transparent 1px);
    background-size: auto, auto, 24px 24px, 24px 24px;
}
.route-track { display: block; width: 100%; height: 100%; }
.route-track .casing { fill: none; stroke: rgb(255 178 30 / 0.18); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.route-track .line { fill: none; stroke: var(--amber-400); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.route-track .start { fill: #fff; stroke: var(--carbon-950); stroke-width: 2.5; }
.route-track .end { fill: var(--amber-400); stroke: var(--carbon-950); stroke-width: 2.5; }
.route-body { padding: var(--space-3) var(--space-4) var(--space-4); display: grid; gap: var(--space-2); }
.route-card .title { color: var(--color-text); font-family: var(--font-display); font-stretch: 112%; font-weight: 800; font-size: var(--text-lg); text-decoration: none; line-height: 1.2; }
.route-card .title::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.route-card .meta, .roadbook-list .meta, .poi-list .meta, .saved-list .meta {
    display: flex; flex-wrap: wrap; gap: 0 var(--space-2); color: var(--color-muted); font-size: var(--text-sm);
}
.route-card .meta > span + span::before, .roadbook-list .meta > span + span::before, .saved-list .meta > span + span::before { content: "·"; margin-right: var(--space-2); }
.route-card .meta.small { font-size: var(--text-xs); }
.route-figures { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); margin: 0; }
.route-figures div { display: grid; }
.route-figures dt { font-size: var(--text-2xs); color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; }
.route-figures dd { margin: 0; font-family: var(--font-display); font-stretch: var(--wide); font-weight: 800; font-size: 1.25rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.route-card .route-figures { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0 var(--space-5); padding: var(--space-2) 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.route-card .route-figures dd { font-size: 1.125rem; }

/* Fiche */
.route-hero { margin-bottom: var(--space-4); }
.route-hero h1 { margin: var(--space-1) 0 var(--space-2); }
.route-hero .meta { color: var(--color-muted); font-size: var(--text-sm); }
.route-stats {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 0 0 var(--space-4);
    background: var(--chrome-line); border-radius: var(--radius-lg); overflow: hidden;
}
@media (min-width: 40rem) { .route-stats { grid-template-columns: repeat(4, 1fr); } }
.route-stats div { padding: var(--space-3) var(--space-4) var(--space-4); background: var(--carbon-950); color: var(--chrome-text); }
.route-stats dt { font-size: var(--text-2xs); color: var(--chrome-muted); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; }
.route-stats dd { margin: var(--space-1) 0 0; font-family: var(--font-display); font-stretch: var(--wide); font-weight: 800; font-size: 1.75rem; line-height: 1.05; font-variant-numeric: tabular-nums; }
.route-stats dd small { font-size: var(--text-sm); color: var(--amber-400); margin-left: 0.15em; font-stretch: 100%; }
.route-preview { border-radius: var(--radius-lg); padding: var(--space-2); margin: var(--space-4) 0 var(--space-2); }
.route-preview .route-track { aspect-ratio: 2 / 1; height: auto; }
.route-page section + section, .roadbook-page article > section + section { margin-top: var(--space-7); }
.route-profile figure { margin: 0; }
.route-profile svg { display: block; width: 100%; height: 9rem; border-bottom: 1px solid var(--color-border-strong); }
.route-profile .area { fill: color-mix(in srgb, var(--amber-400) 22%, transparent); }
.route-profile .line { fill: none; stroke: var(--amber-400); stroke-width: 2; vector-effect: non-scaling-stroke; }
.route-profile figcaption { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-top: var(--space-2); color: var(--color-muted); font-size: var(--text-sm); }
.poi-list { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: grid; gap: var(--space-2); }
.poi-list li { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); }
.poi-list li > span:nth-child(2) { flex: 1; min-width: 0; }
.poi-kind { width: 0.75rem; height: 0.75rem; margin-top: 0.4rem; border-radius: 50%; background: var(--carbon-500); flex-shrink: 0; }
.kind-carburant { --kind: #2563eb; }
.kind-restaurant { --kind: #b45309; }
.kind-photo { --kind: #7c3aed; }
.kind-garage { --kind: #475569; }
.kind-hebergement { --kind: #0f766e; }
.poi-kind[class*="kind-"] { background: var(--kind, var(--carbon-500)); }
.add-poi summary, .manual-point summary { cursor: pointer; font-weight: 700; min-height: 2.75rem; display: flex; align-items: center; }
.add-poi form { margin-top: var(--space-3); }
.share-once p { margin-bottom: var(--space-2); }
.copy-field { display: flex; gap: var(--space-2); }
.copy-field input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--text-sm); }
.links.stack { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.panel .button { margin-top: var(--space-3); }
.weather-form { display: grid; gap: var(--space-2); }
.rating-form fieldset { border: 0; padding: 0; margin: var(--space-3) 0 var(--space-2); }
.stars { display: flex; gap: var(--space-2); }
.stars label { position: relative; }
.stars input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.stars span:not(.visually-hidden) {
    display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
    border: 1px solid var(--color-control); border-radius: 50%; font-weight: 800; background: var(--color-surface);
    font-variant-numeric: tabular-nums;
}
.stars input:checked + span { background: var(--color-button); color: var(--color-button-text); border-color: var(--color-button); }
.stars input:focus-visible + span { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.button[aria-pressed="true"] { background: var(--color-text); border-color: var(--color-text); color: var(--color-bg); }

/* Choix de la visibilité */
.visibility-choice .option { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-2) 0; cursor: pointer; }
.visibility-choice .option strong { display: block; font-size: var(--text-sm); }

/* Éditeur */
.route-editor { padding-bottom: var(--space-3); }
.route-form { max-width: 48rem; }
.editor-start {
    display: grid; justify-items: center; gap: var(--space-2); text-align: center;
    padding: var(--space-7) var(--space-4); margin: var(--space-2) 0 var(--space-3);
    border-radius: var(--radius-lg);
    background-color: var(--carbon-950);
    background-image:
        repeating-radial-gradient(circle at 18% 120%, transparent 0 22px, rgb(255 255 255 / 0.05) 22px 23px),
        repeating-radial-gradient(circle at 92% -20%, transparent 0 30px, rgb(255 255 255 / 0.04) 30px 31px);
    color: var(--chrome-text);
}
.editor-start .help { max-width: 34rem; margin: 0; color: var(--carbon-200); }
.editor-start-icon { width: 3rem; height: 3rem; color: var(--amber-400); fill: var(--chrome-text); }
.editor-shell { margin-top: var(--space-2); }
.editor-toolbar { margin-bottom: var(--space-2); }
.editor-map { height: min(32rem, 70vh); margin: 0 0 var(--space-3); cursor: crosshair; }
@media (max-width: 39.99rem) { .editor-map { height: 65vh; } }
.route-figures.live { margin-bottom: var(--space-3); }
.waypoint-list { margin: var(--space-3) 0 0; padding-left: 1.5rem; font-size: var(--text-sm); color: var(--color-muted); }
.waypoint-list li { padding: 0.15rem 0; }
/* Fusion de circuits : étapes reliées par un trait pointillé, comme un tracé. */
.merge-steps ol { list-style: none; margin: var(--space-2) 0 var(--space-3); padding: 0; }
.merge-steps li { position: relative; padding: 0 0 var(--space-2) 2rem; }
.merge-steps li::before {
    content: ""; position: absolute; left: 0.3rem; top: 2.15rem;
    width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--color-accent-fill); box-shadow: 0 0 0 3px var(--color-surface);
}
.merge-steps li:not(:last-child)::after {
    content: ""; position: absolute; left: calc(0.675rem - 1px); top: 3.1rem; bottom: -1.9rem; width: 2px;
    background: repeating-linear-gradient(180deg, var(--color-border-strong) 0 6px, transparent 6px 11px);
}
.merge-steps li:has(+ li[hidden])::after { display: none; }
.merge-steps .field { margin-bottom: var(--space-2); }
.merge-steps label.checkbox { margin-bottom: var(--space-2); }
@media (min-width: 40rem) {
    .merge-steps li { display: grid; grid-template-columns: 1fr auto; gap: 0 var(--space-4); align-items: end; }
    .merge-steps label.checkbox { min-height: 3rem; align-items: center; }
}
.merge-steps [data-add-step] { margin-bottom: var(--space-3); }
.list-actions { margin-bottom: var(--space-4); }
.route-marker {
    display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
    border: 3px solid #fff; background: var(--carbon-700); color: #fff; font: 700 11px/1 var(--font); box-shadow: 0 2px 8px rgb(0 0 0 / 0.35);
}
.route-marker.start { background: var(--carbon-950); }
.route-marker.end { background: var(--amber-400); color: var(--carbon-950); }
.route-marker.via { background: var(--carbon-600); }
.route-marker.poi { background: var(--kind, var(--carbon-600)); border-radius: var(--radius-sm); }

/* Tableaux de données (météo) */
.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.data-table th, .data-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.data-table thead th { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-muted); }
.data-table tbody th { font-weight: 700; }
.data-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table .alert { color: var(--color-warning); font-weight: 750; }
.notice.success { background: var(--color-success-soft); color: var(--color-success); border-color: color-mix(in srgb, currentcolor 30%, transparent); }
.weather-alerts ul { margin: 0; padding-left: 1.2rem; }
.weather-page .filters .field { margin: 0; }

/* Roadbook : frise des étapes */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 3.75rem 1.5rem minmax(0, 1fr); gap: 0 var(--space-2); position: relative; }
.timeline .time { text-align: right; padding-top: 0.1rem; font-variant-numeric: tabular-nums; }
.timeline .time strong { font-family: var(--font-display); font-stretch: var(--wide); font-weight: 800; font-size: 1.05rem; }
.timeline .marker { position: relative; display: flex; justify-content: center; }
.timeline .marker::before { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--color-border-strong); }
.timeline li:first-child .marker::before { top: 0.6rem; }
.timeline li:last-child .marker::before { bottom: auto; height: 0.6rem; }
.timeline .marker::after {
    content: ""; position: relative; margin-top: 0.35rem; width: 0.85rem; height: 0.85rem; border-radius: 50%;
    background: var(--kind, var(--carbon-500)); border: 3px solid var(--color-bg); box-sizing: content-box;
}
.timeline .kind-depart, .timeline .kind-arrivee { --kind: var(--amber-400); }
.timeline .kind-pause, .timeline .kind-visite, .timeline .kind-autre { --kind: var(--carbon-500); }
.timeline .body { padding-bottom: var(--space-5); }
.timeline .body p { margin: 0 0 var(--space-1); }
.timeline .title { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.timeline .meta { display: flex; flex-wrap: wrap; gap: var(--space-3); color: var(--color-muted); font-size: var(--text-sm); }
.roadbook-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.roadbook-list li, .saved-list li { padding: var(--space-3) var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); }
.roadbook-list .title, .saved-list .title { font-weight: 750; color: var(--color-text); text-decoration: none; }
.roadbook-list .title:hover, .saved-list .title:hover { color: var(--color-accent); }

/* Hors ligne */
.offline-page { max-width: 40rem; }
.offline-hero { padding: var(--space-6) 0 var(--space-4); }
.saved-list { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: grid; gap: var(--space-2); }
.saved-list li { display: grid; gap: var(--space-1); justify-items: start; }

/* Circuit associé à une sortie */
.event-route {
    display: grid; grid-template-columns: minmax(0, 10rem) 1fr; gap: var(--space-4); align-items: center;
    margin: var(--space-4) 0; padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    background: var(--color-surface); color: var(--color-text); text-decoration: none;
    transition: border-color var(--duration) var(--ease);
}
.event-route:hover { border-color: var(--color-text); color: var(--color-text); }
.event-route .route-thumb { border-radius: var(--radius); overflow: hidden; }
.event-route .body { display: grid; gap: var(--space-1); }
.event-route .eyebrow { margin: 0; }
.event-route strong { font-size: var(--text-lg); line-height: 1.25; }
.event-route .meta { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); color: var(--color-muted); font-size: var(--text-sm); }
.event-route .meta > span + span::before { content: "·"; margin-right: var(--space-2); }
.event-route .more { color: var(--color-accent); font-weight: 700; font-size: var(--text-sm); }
@media (max-width: 30rem) { .event-route { grid-template-columns: 1fr; } }

/* Pages d'erreur */
.error-page { padding: var(--space-8) 0; max-width: 34rem; }
.error-page h1 { font-size: var(--text-3xl); line-height: 0.95; }

/* ---------- Alertes communautaires ---------- */
/* Pastille du danger : le carré ambre arrondi du logo, pictogramme carbone (lisible en plein soleil, dans les deux modes). */
.alert-icon {
    display: inline-grid; place-items: center; flex-shrink: 0;
    width: 2.75rem; height: 2.75rem; border-radius: var(--radius);
    background: var(--amber-400); color: var(--carbon-950);
}
.alert-icon .icon { width: 1.5rem; height: 1.5rem; stroke-width: 2; }
.alert-icon.large { width: 4rem; height: 4rem; border-radius: var(--radius-lg); }
.alert-icon.large .icon { width: 2.25rem; height: 2.25rem; }
.alert-icon.small { width: 2.25rem; height: 2.25rem; border-radius: var(--radius-sm); background: var(--color-surface-2); color: var(--color-text); }
.alert-icon.small .icon { width: 1.25rem; height: 1.25rem; }

.alert-list { list-style: none; padding: 0; margin: 0 0 var(--space-5); display: grid; gap: var(--space-2); }
.alert-card {
    position: relative; display: flex; gap: var(--space-3); align-items: flex-start;
    padding: var(--space-3) var(--space-4); background: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    transition: border-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.alert-card:hover { border-color: var(--color-text); }
.alert-card:active { transform: scale(0.99); }
.alert-card.is-ended .alert-icon { background: var(--color-surface-2); color: var(--color-muted); }
.alert-body { display: grid; gap: var(--space-1); min-width: 0; flex: 1; }
.alert-body p { margin: 0; }
.alert-card .title { color: var(--color-text); font-family: var(--font-display); font-stretch: 112%; font-weight: 800; font-size: var(--text-base); line-height: 1.25; text-decoration: none; }
.alert-card .title::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.alert-card .meta { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); color: var(--color-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.alert-card .meta > span + span::before { content: "·"; margin-right: var(--space-2); }
.alert-card .comment { font-size: var(--text-sm); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.alert-card .tags, .alert-hero .tags { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.alert-list.compact .alert-card { padding: var(--space-2) var(--space-3); }

/* Liste : filtres et mise en page carte + liste */
.alert-filters { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
.alert-filters .actions { align-items: flex-end; }
.alert-filters > .help:empty { display: none; }
.inline-field { margin: 0; }
.inline-field select { width: auto; min-width: 7rem; }
.chips { border: 0; padding: 0; margin: 0; min-width: 0; }
.chips legend { margin-bottom: var(--space-2); font-size: var(--text-sm); font-weight: 650; padding: 0; margin-left: 0; }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
    position: relative; display: inline-flex; align-items: center; gap: var(--space-2);
    min-height: 2.75rem; padding: 0 var(--space-4) 0 var(--space-3);
    border: 1px solid var(--color-control); border-radius: var(--radius-pill);
    background: var(--color-surface); color: var(--color-text);
    font-size: var(--text-sm); font-weight: 650; cursor: pointer;
    transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.chip .icon { width: 1.125rem; height: 1.125rem; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.chip:hover { border-color: var(--color-text); }
.chip:has(input:checked) { background: var(--color-text); border-color: var(--color-text); color: var(--color-bg); }
.chip:has(input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }
@media (max-width: 39.99rem) {
    /* Une seule rangée qui défile au pouce plutôt que quatre lignes de filtres */
    .chip-row { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) var(--space-1); scrollbar-width: none; }
    .chip-row::-webkit-scrollbar { display: none; }
    .chip { flex-shrink: 0; }
}
.js .alert-filters > button[type="submit"] { justify-self: start; }
.alerts-scope { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); align-items: baseline; margin-bottom: var(--space-3); color: var(--color-muted); font-size: var(--text-sm); }
.alerts-scope strong { color: var(--color-text); font-family: var(--font-display); font-stretch: var(--wide); font-weight: 800; font-size: var(--text-lg); }
.alerts-layout { display: grid; gap: var(--space-4); }
.alerts-map .map { margin-top: 0; }
@media (min-width: 64rem) {
    .alerts-layout { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
    .alerts-map { position: sticky; top: calc(var(--header-height) + var(--space-4)); }
    .alerts-map .map { height: min(36rem, 70vh); }
    /* Carte pas encore affichée : un cadre à la place de la carte plutôt qu'une colonne vide */
    .alerts-map [data-map-placeholder]:not([hidden]) {
        min-height: 20rem; flex-direction: column; justify-content: center; text-align: center;
        padding: var(--space-6); border: 1px dashed var(--color-control); border-radius: var(--radius); background: var(--color-surface);
    }
}
.legal-note { margin-top: var(--space-6); }

/* Marqueur de carte */
.alert-marker {
    display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
    background: var(--amber-400); color: var(--carbon-950); border: 2px solid var(--carbon-950);
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.35);
}
.alert-marker .icon { width: 20px; height: 20px; stroke-width: 2.2; }

/* Signalement */
.alert-form fieldset { border: 0; padding: 0; margin: 0 0 var(--space-6); min-width: 0; }
.alert-form legend { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); padding: 0; margin-left: 0; font-family: var(--font-display); font-stretch: 112%; font-weight: 800; font-size: var(--text-lg); }
.alert-form .step {
    display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%;
    background: var(--color-text); color: var(--color-bg); font: 800 var(--text-sm)/1 var(--font); font-stretch: 100%;
}
.type-grid { display: grid; gap: var(--space-2); grid-template-columns: 1fr; }
.type-grid legend, .type-grid .field-errors { grid-column: 1 / -1; }
@media (min-width: 30rem) { .type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.type-option {
    position: relative; display: flex; gap: var(--space-3); align-items: center;
    min-height: 4.5rem; padding: var(--space-3);
    border: 1px solid var(--color-control); border-radius: var(--radius-lg);
    background: var(--color-surface); cursor: pointer;
    transition: border-color var(--duration) var(--ease), background-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.type-option:hover { border-color: var(--color-text); }
.type-option:active { transform: scale(0.99); }
.type-option input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.type-option .text { display: grid; gap: 0.1rem; min-width: 0; flex: 1; }
.type-option strong { font-size: var(--text-base); line-height: 1.25; }
.type-option small { color: var(--color-muted); font-size: var(--text-xs); }
.type-option .life { align-self: flex-start; color: var(--color-muted); font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.type-option:has(input:checked) { border-color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-text); background: var(--color-accent-soft); }
.type-option:has(input:checked) .alert-icon { background: var(--carbon-950); color: var(--amber-400); }
.type-option:has(input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.where-status { margin: 0 0 var(--space-2); font-weight: 650; }
.where-status:empty { display: none; }
.picker-map { height: 18rem; cursor: crosshair; }
@media (max-width: 39.99rem) { .picker-map { height: 50vh; min-height: 16rem; } }
.alert-form details { margin: 0 0 var(--space-4); }
.alert-form details > summary {
    min-height: 2.75rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    font-weight: 650; cursor: pointer; list-style: none; border-top: 1px solid var(--color-border);
}
.alert-form details > summary::-webkit-details-marker { display: none; }
.alert-form details > summary::after {
    content: ""; flex-shrink: 0; width: 0.5rem; height: 0.5rem; margin-right: 0.25rem;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px); transition: transform var(--duration) var(--ease);
}
.alert-form details[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.alert-form details[open] > summary { margin-bottom: var(--space-3); }
.send-alert { width: 100%; min-height: 3.5rem; font-size: var(--text-base); margin-top: var(--space-2); }
@media (max-width: 39.99rem) {
    /* Le bouton d'envoi reste sous le pouce, au-dessus de la barre d'onglets */
    .send-alert { position: sticky; bottom: calc(var(--tabbar-height) + var(--safe-bottom) + var(--space-2)); box-shadow: var(--shadow-2); z-index: 2; }
}

/* Fiche */
.alert-hero { display: flex; gap: var(--space-4); align-items: flex-start; margin-bottom: var(--space-4); }
.alert-hero h1 { margin: var(--space-1) 0 var(--space-2); }
.alert-hero .eyebrow { margin: 0; }
.alert-comment { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-left: 4px solid var(--amber-400); background: var(--color-surface); border-radius: 0 var(--radius) var(--radius) 0; font-size: var(--text-lg); }
.alert-comment p { margin: 0; overflow-wrap: anywhere; }
.alert-photo { margin: 0 0 var(--space-4); }
.alert-photo img { display: block; width: 100%; max-height: 28rem; object-fit: cover; border-radius: var(--radius-lg); }
.alert-stats dd.small-value { font-size: var(--text-lg); line-height: 1.3; }
.vote-block { margin: var(--space-5) 0; padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); }
.vote-block h2 { margin-top: 0; font-size: var(--text-lg); }
.vote-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-bottom: var(--space-3); }
.vote-buttons .button { min-height: 3.5rem; font-size: var(--text-base); white-space: nowrap; padding-inline: var(--space-3); }
.alert-page .route-map .meta { color: var(--color-muted); font-size: var(--text-sm); }

/* Être prévenu */
.watch-grid { display: grid; gap: var(--space-7); }
@media (min-width: 56rem) { .watch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); } }
.watch-grid .poi-list li { align-items: center; }
.watch-grid .poi-list .meta { margin: 0; color: var(--color-muted); font-size: var(--text-sm); }
.watch-grid .poi-list form { margin: 0; }
.watch-grid .poi-list .button { margin: 0; }
.grow { flex: 1; min-width: 0; }
.zone-form h3 { margin-top: 0; }
.zone-form fieldset { border: 0; padding: 0; margin: 0 0 var(--space-3); }
.zone-form legend { font-weight: 650; font-size: var(--text-sm); padding: 0; margin-left: 0; }

/* ---------- Entretien (Phase 7) ---------- */
.maintenance-page section + section, .maintenance-page article > section + section { margin-top: var(--space-7); }
.chip-row.wrap { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
.chips { border: 0; padding: 0; }
.chips > legend, .zone-form legend, fieldset.field > legend { padding: 0; margin: 0 0 var(--space-2); }
fieldset.field { border: 0; padding: 0; }
.optional { font-weight: 500; color: var(--color-muted); }
.muted { color: var(--color-muted); }
.stats-note { margin-bottom: var(--space-5); }
.maintenance-page .route-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.maintenance-page .route-stats dd { font-size: var(--text-xl); }
@media (min-width: 40rem) { .maintenance-page .route-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Dans la colonne latérale, les formulaires restent sur une colonne (libellés sur une ligne) */
.split aside .form-grid.two { grid-template-columns: minmax(0, 1fr); }
.inline-form { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: flex-start; }
.inline-form .field { flex: 1 1 12rem; margin-bottom: 0; }
.inline-form .button { margin-top: 1.8rem; }
.inline-filter, .search-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: flex-end; margin-bottom: var(--space-5); }
.inline-filter .field, .search-row .field { margin-bottom: 0; flex: 1 1 14rem; }
.inline-filter .button, .search-row .button { min-height: var(--control-height); }

/* Échéances : la pastille de statut porte toujours un texte, la bordure ne sert que de renfort */
.due-list { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: grid; gap: var(--space-2); }
.due-list li {
    display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center;
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-border-strong);
    border-radius: var(--radius);
}
.due-list li.is-soon { border-left-color: var(--amber-400); }
.due-list li.is-due { border-left-color: var(--color-danger); }
.due-list li.is-ok { border-left-color: var(--color-success); }
.due-list strong { display: block; }
.due-list .meta { margin: var(--space-1) 0 0; color: var(--color-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.due-list .row-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-left: auto; }
.due-list .row-actions form { margin: 0; }
.due-list .button { margin: 0; }

/* Une carte par moto */
.moto-grid { list-style: none; padding: 0; margin: 0 0 var(--space-5); display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.moto-card {
    position: relative; display: flex; flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.moto-card:hover { border-color: var(--color-text); box-shadow: var(--shadow-2); }
.moto-card-head { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-4); background: var(--carbon-950); color: var(--chrome-text); }
.moto-card-head .title { color: var(--chrome-text); font-family: var(--font-display); font-stretch: var(--wide); font-weight: 800; font-size: var(--text-lg); text-decoration: none; }
.moto-card-head .title::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.moto-card-head .title:focus-visible { outline: none; }
.moto-card:has(.title:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.moto-card-head .meta { margin: 0; color: var(--chrome-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.moto-card-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--carbon-800); color: var(--amber-400); flex-shrink: 0; }
.moto-card-body { padding: var(--space-4); display: grid; gap: var(--space-1); }
.moto-card-body p { margin: 0; }
.moto-card-body .label { font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); }
.moto-card-body .meta { color: var(--color-muted); font-size: var(--text-sm); }
.moto-card-body .badge { margin-left: var(--space-1); }
.moto-card.is-soon { border-top: 4px solid var(--amber-400); }
.moto-card.is-due { border-top: 4px solid var(--color-danger); }

/* Historique */
.entry-list { list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.entry-list li { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.entry-list li:first-child { border-top: 1px solid var(--color-border); }
.entry-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--color-surface-2); color: var(--color-text); flex-shrink: 0; }
.entry-icon .icon { width: 1.125rem; height: 1.125rem; }
.entry-list .title { display: inline-block; min-height: 1.5rem; color: var(--color-text); font-weight: 700; text-decoration: none; }
.entry-list .title:hover { color: var(--color-accent); text-decoration: underline; }
.entry-list .meta { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); margin: var(--space-1) 0 0; color: var(--color-muted); font-size: var(--text-sm); }
.entry-list .meta > span + span::before { content: "·"; margin-right: var(--space-2); }
.entry-list .amount { margin-left: auto; padding-top: 0.1rem; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Tableau de bord : chiffres et fiche technique */
.spec-mini { display: grid; gap: var(--space-2); margin: var(--space-3) 0; }
.spec-mini div { display: flex; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); }
.spec-mini dt { color: var(--color-muted); }
.spec-mini dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.spec-sheet { display: grid; gap: var(--space-5); margin-bottom: var(--space-5); }
@media (min-width: 48rem) { .spec-sheet { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); } }
.spec-sheet h2 { margin-top: 0; font-size: var(--text-lg); }
.spec-sheet .data-table th { width: 55%; font-weight: 600; color: var(--color-muted); }
.spec-sheet .data-table td { font-weight: 700; font-variant-numeric: tabular-nums; }
.spec-form .lead { margin-bottom: var(--space-5); }
.invoice-grid img { aspect-ratio: 3 / 4; object-fit: cover; }
.legal-note { margin-top: var(--space-6); max-width: 44rem; }

/* Check-lists */
.template-grid { list-style: none; padding: 0; margin: 0 0 var(--space-5); display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.template-grid .panel { display: flex; flex-direction: column; margin: 0; }
.template-grid h3 { margin: 0 0 var(--space-1); font-size: var(--text-base); }
.template-grid .meta { margin: var(--space-2) 0 0; color: var(--color-muted); font-size: var(--text-sm); }
.template-grid form { margin-top: auto; }
.check-run { max-width: 38rem; }
.check-run ul { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: grid; gap: var(--space-2); }
.check-run label {
    display: flex; gap: var(--space-3); align-items: center;
    min-height: 3.5rem; padding: var(--space-2) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-control);
    border-radius: var(--radius);
    font-weight: 600; cursor: pointer;
    transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.check-run label:hover { border-color: var(--color-text); }
.check-run input[type="checkbox"] { width: 1.5rem; height: 1.5rem; margin: 0; }
.check-run label:has(input:checked) { background: var(--color-surface-2); border-color: var(--color-border-strong); color: var(--color-muted); }
.check-run label:has(input:checked) span { text-decoration: line-through; text-decoration-thickness: 2px; }
.check-run label:has(input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.check-progress {
    position: sticky; top: calc(var(--header-height) + var(--space-2)); z-index: 1;
    margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    background: var(--carbon-950); color: var(--chrome-text);
    font-weight: 700; font-variant-numeric: tabular-nums;
    display: inline-block;
}
.check-run.is-complete .check-progress { background: var(--amber-400); color: var(--carbon-950); }
.check-points { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
.check-points li + li { margin-top: var(--space-1); }
.offline-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; margin-top: var(--space-5); }

/* Carnet partagé (lecture seule) */
.shared-logbook .page-head { border-bottom-width: 2px; }

/* ---------- Mode SOS ----------
   Une seule couleur ajoutée : --color-sos (= rouge danger). Le reste reprend Carbone (panneaux, badges, carbone). */
.sos-page h2 .icon, .sos-status-card h2 .icon { vertical-align: -0.2em; margin-right: var(--space-2); color: var(--color-muted); }

/* Bouton de l'en-tête : pastille rouge, toujours visible pour les membres */
.header-sos {
    display: inline-flex; align-items: center; gap: var(--space-1);
    min-height: 2.75rem; padding: 0 var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--color-sos); color: #fff;
    font-family: var(--font-display); font-stretch: var(--wide); font-weight: 850; font-size: var(--text-sm); letter-spacing: 0.04em;
    text-decoration: none;
}
.header-sos:hover { background: var(--color-sos-hover); color: #fff; }
.header-sos .icon { width: 1.125rem; height: 1.125rem; }
@media (min-width: 64rem) { .header-sos { order: 3; margin-left: var(--space-2); } }

/* Bouton « Sortie » : même gabarit que le SOS, en ambre de la marque, pour lancer l'enregistrement en un geste */
.header-ride {
    display: inline-flex; align-items: center; gap: var(--space-1);
    min-height: 2.75rem; padding: 0 var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--amber-400); color: #1b1a17;
    font-family: var(--font-display); font-stretch: var(--wide); font-weight: 850; font-size: var(--text-sm); letter-spacing: 0.04em;
    text-decoration: none;
}
.header-ride:hover { background: var(--amber-500, var(--amber-400)); color: #1b1a17; filter: brightness(0.95); }
.header-ride .icon { width: 1.125rem; height: 1.125rem; }
@media (min-width: 64rem) { .header-ride { order: 3; margin-left: var(--space-2); } }

/* Bandeau « alerte reçue » (contact membre), sur toutes les pages */
.sos-banner {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
    margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    background: var(--color-sos); color: #fff; font-weight: 650;
}
.sos-banner a { margin-left: auto; color: #fff; font-weight: 750; text-decoration-color: rgb(255 255 255 / 0.6); }
.sos-banner a:hover { color: #fff; text-decoration-color: #fff; }

.sos-pulse { width: 0.75rem; height: 0.75rem; border-radius: 50%; background: #fff; flex-shrink: 0; box-shadow: 0 0 0 0 rgb(255 255 255 / 0.7); animation: sos-pulse 1.6s infinite; }
@keyframes sos-pulse { 70% { box-shadow: 0 0 0 10px rgb(255 255 255 / 0); } 100% { box-shadow: 0 0 0 0 rgb(255 255 255 / 0); } }

/* Avertissement : pas un service d'urgence */
.sos-disclaimer {
    margin: var(--space-4) 0; padding: var(--space-4);
    border: 1px solid var(--color-border-strong); border-left: 4px solid var(--color-sos);
    border-radius: var(--radius);
    background: var(--color-surface);
    font-size: var(--text-sm);
}
.sos-disclaimer p { margin-bottom: var(--space-3); }
.sos-disclaimer .actions { align-items: center; margin-bottom: 0; }
.sos-disclaimer .actions .button { margin: 0; }
.sos-disclaimer.compact { padding: var(--space-3) var(--space-4); }

/* Étapes numérotées (activation, invitation, trajet) */
.sos-steps { list-style: none; counter-reset: step; padding: 0; margin: 0 0 var(--space-4); display: grid; gap: var(--space-3); }
.sos-steps li { counter-increment: step; display: grid; grid-template-columns: 1.75rem 1fr; gap: var(--space-3); align-items: start; }
.sos-steps li::before {
    content: counter(step);
    display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%;
    background: var(--color-surface-2); color: var(--color-text);
    font: 750 var(--text-xs)/1 var(--font);
}
ul.sos-steps li::before { content: ""; width: 0.5rem; height: 0.5rem; margin: 0.55rem 0 0 0.6rem; background: var(--color-muted); }

.sos-activate { max-width: 44rem; }
.sos-activate .panel > form { margin-top: var(--space-4); }

/* Zone de déclenchement */
.sos-ready {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5);
    margin: 0 0 var(--space-4); padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--carbon-950); color: var(--chrome-text);
}
.sos-ready h2 { margin-top: 0; color: var(--chrome-text); }
.sos-ready p, .sos-ready .help { color: var(--carbon-200); }
.sos-ready a:not(.button) { color: var(--chrome-text); }
.sos-ready-text { flex: 1 1 16rem; min-width: 0; }
.sos-ready-text > p:first-child { font-size: var(--text-lg); color: var(--chrome-text); }
.sos-ready summary { cursor: pointer; font-weight: 650; min-height: 2.75rem; display: flex; align-items: center; color: var(--chrome-text); }
.sos-ready textarea { background: var(--carbon-900); color: var(--chrome-text); border-color: var(--carbon-600); }
.sos-ready label { color: var(--chrome-text); }

.sos-button {
    position: relative;
    display: grid; place-content: center; justify-items: center; gap: var(--space-1);
    width: 11rem; height: 11rem; flex-shrink: 0;
    margin: 0 auto;
    border: 0; border-radius: 50%;
    background: var(--color-sos); color: #fff;
    box-shadow: 0 0 0 10px var(--color-sos-ring), var(--shadow-3);
    cursor: pointer;
    font: inherit;
    transition: transform var(--duration) var(--ease), background-color var(--duration) var(--ease);
    -webkit-tap-highlight-color: transparent;
}
.sos-button:hover { background: var(--color-sos-hover); }
.sos-button:active { transform: scale(0.97); }
.sos-button:focus-visible { outline: 4px solid #fff; outline-offset: 6px; }
.sos-button::after {
    content: ""; position: absolute; inset: -10px; border-radius: 50%;
    border: 2px solid var(--color-sos-ring); animation: sos-ring 2.4s var(--ease) infinite;
}
@keyframes sos-ring { from { transform: scale(1); opacity: 1; } to { transform: scale(1.18); opacity: 0; } }
.sos-button-label { font-family: var(--font-display); font-stretch: var(--wide); font-weight: 900; font-size: 2.75rem; line-height: 1; letter-spacing: 0.04em; }
.sos-button-sub { font-size: var(--text-xs); font-weight: 650; max-width: 8rem; text-align: center; line-height: 1.3; }
.sos-button.is-disabled { background: var(--carbon-700); color: var(--carbon-400); box-shadow: none; cursor: default; }
.sos-button.is-disabled::after { display: none; }
@media (min-width: 40rem) { .sos-button { margin: 0; } }

/* Compte à rebours (5 s) et dialogue « Tout va bien ? » : plein écran, annuler en premier */
.sos-countdown {
    position: fixed; inset: 0; z-index: 200;
    display: grid; place-items: center;
    padding: var(--space-5) var(--gutter) calc(var(--space-5) + var(--safe-bottom));
    background: rgb(11 12 14 / 0.97);
    color: #fff;
}
.sos-countdown-box { width: min(26rem, 100%); display: grid; gap: var(--space-3); text-align: center; }
.sos-countdown-box h2 { margin: 0; color: #fff; font-size: var(--text-xl); }
.sos-countdown-box p { margin: 0; color: var(--carbon-200); }
.sos-countdown-number {
    width: 8.5rem; height: 8.5rem; margin: 0 auto var(--space-2) !important;
    display: grid; place-items: center; border-radius: 50%;
    background: var(--color-sos); color: #fff !important;
    font-family: var(--font-display); font-weight: 900; font-size: 4rem; line-height: 1;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 12px var(--color-sos-ring);
}
.sos-countdown .button { width: 100%; min-height: 3.5rem; font-size: var(--text-base); margin: 0; }
.sos-countdown .button.sos-cancel { min-height: 4rem; margin-top: var(--space-3); background: #fff; color: var(--carbon-950); font-size: var(--text-lg); }
.sos-countdown .button.sos-cancel:hover { background: var(--bone-100); color: var(--carbon-950); }
.button.on-dark, .button.secondary.on-dark { background: transparent; color: #fff; border-color: rgb(255 255 255 / 0.4); }
.button.on-dark:hover, .button.secondary.on-dark:hover { background: rgb(255 255 255 / 0.08); color: #fff; border-color: #fff; }
.js body.sos-locked { overflow: hidden; }

/* Alerte en cours / suivi par un proche */
.sos-live-banner {
    display: flex; gap: var(--space-4); align-items: flex-start;
    margin: var(--space-4) 0 var(--space-5); padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--color-sos); color: #fff;
}
.sos-live-banner .sos-pulse { margin-top: 0.5rem; }
.sos-live-banner h1 { margin: 0 0 var(--space-2); color: #fff; }
.sos-live-banner p { color: rgb(255 255 255 / 0.9); margin-bottom: var(--space-2); }
.sos-live-banner p:last-child { margin-bottom: 0; }
.sos-live-banner .eyebrow { color: #fff; opacity: 0.85; }
.sos-live-banner .eyebrow::before { background: #fff; }
.sos-page .panel > h2, .sos-page .notice > h2 { margin-top: 0; font-size: var(--text-base); text-transform: uppercase; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.sos-page .panel > h2 .icon { margin-right: 0; }
.sos-alert-actions, .sos-track-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin: 0 0 var(--space-3); }
.sos-track-actions form { margin: 0; }
.sos-alert-actions .button, .sos-track-actions .button { min-height: 3.25rem; font-size: var(--text-base); }
@media (max-width: 29.99rem) { .sos-alert-actions .button, .sos-track-actions .button, .sos-track-actions form { flex: 1 1 100%; width: 100%; } }
.sos-track .map { min-height: 18rem; }

/* Contacts de confiance */
.sos-contact-list { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: grid; gap: var(--space-2); }
.sos-contact-list li {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
}
.sos-contact-list strong { display: block; overflow-wrap: anywhere; }
.sos-contact-list .meta { margin: 0; color: var(--color-muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
.sos-contact-list .actions { flex-basis: 100%; justify-content: flex-end; margin: 0; }
.sos-contact-list .actions form { margin: 0; }
.sos-contact-list .actions .button { margin: 0; }
@media (min-width: 40rem) { .sos-contact-list .actions { flex-basis: auto; } }
.sos-avatar {
    display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex-shrink: 0;
    border-radius: 50%; background: var(--carbon-950); color: var(--chrome-text);
    font: 750 var(--text-base)/1 var(--font-display);
}

/* Cartes d'état (accueil SOS) */
.sos-status-card h2 { margin: 0 0 var(--space-2); font-size: var(--text-base); display: flex; align-items: center; }
.sos-status-card p { color: var(--color-muted); font-size: var(--text-sm); }
.sos-status-card a { font-weight: 650; }
aside .sos-status-card + .sos-status-card { margin-top: var(--space-3); }

.sos-history { list-style: none; padding: 0; margin: 0; }
.sos-history li { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.sos-history li:last-child { border-bottom: 0; }
.sos-history a { font-weight: 650; }
.sos-history .meta { color: var(--color-muted); font-size: var(--text-sm); }
.sos-history .badge { margin-left: auto; }

/* Trajet suivi */
.sos-trip-status {
    margin: 0 0 var(--space-4); padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--carbon-950); color: var(--chrome-text);
}
.sos-trip-status .eyebrow { color: var(--amber-400); }
.sos-trip-status h2 { margin: var(--space-1) 0 var(--space-2); color: var(--chrome-text); font-size: var(--text-2xl); text-transform: uppercase; }
.sos-trip-status p { color: var(--carbon-200); }
.sos-trip-status .actions { margin: 0; }
.sos-trip-status form { margin: 0; }
.sos-trip-status .button { min-height: 3.25rem; margin: 0; }
.sos-trip-status .button.secondary { color: var(--chrome-text); border-color: rgb(255 255 255 / 0.3); }
.sos-trip-status .button.secondary:hover { background: rgb(255 255 255 / 0.08); color: #fff; }
.sos-trip-status.is-late { box-shadow: inset 4px 0 0 var(--color-sos); }
.sos-trip-status.is-late .eyebrow { color: #fca5a5; }
@media (max-width: 29.99rem) { .sos-trip-status .actions > form, .sos-trip-status .actions .button { flex: 1 1 100%; width: 100%; } }

.sos-options { margin: var(--space-4) 0; padding: 0; border: 0; min-width: 0; }
.sos-options legend { padding: 0; margin-bottom: var(--space-3); font-weight: 700; }
label.checkbox.indent { margin-left: 2.25rem; }
.sos-fall h2 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.sos-fall details { margin-top: var(--space-3); }
.sos-fall summary, .sos-withdraw summary { cursor: pointer; font-weight: 650; min-height: 2.75rem; display: flex; align-items: center; }
.sos-fall .actions { align-items: center; }
.sos-fall .actions .button { margin: 0; }

/* Fiche santé (page de suivi) */
.sos-health-card { border-left: 4px solid var(--color-sos); }
.sos-health-card h2 { margin-top: 0; display: flex; align-items: center; }
.sos-health-card h2 .icon { color: var(--color-sos); }
.sos-health-card dl { margin: 0 0 var(--space-3); display: grid; gap: var(--space-3); }
.sos-health-card dt { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.sos-health-card dd { margin: var(--space-1) 0 0; font-size: var(--text-lg); font-weight: 600; }

.sos-withdraw { margin-top: var(--space-4); }
.sos-confirm { max-width: 36rem; margin-top: var(--space-5); }
.sos-confirm .actions .button { min-height: 3.5rem; }
.sos-invitation { max-width: 36rem; }
.narrow-form { max-width: 36rem; }

@media (prefers-reduced-motion: reduce) {
    .sos-pulse, .sos-button::after { animation: none; }
}
@media (prefers-color-scheme: dark) {
    .sos-avatar { background: var(--carbon-800); }
    .sos-ready, .sos-trip-status { border: 1px solid var(--chrome-line); }
}

/* ---------- Carnet de bord, position en direct, traceurs (phase 9) ---------- */
/* Pastilles-liens (années) : même rendu que les pastilles cochées des filtres */
a.chip { text-decoration: none; }
a.chip[aria-current="page"] { background: var(--color-text); border-color: var(--color-text); color: var(--color-bg); }
.chip-row.plain { list-style: none; padding: 0; margin: 0 0 var(--space-3); }
.chip.static { cursor: default; padding: 0 var(--space-3); min-height: 2.25rem; }
.chip.static:hover { border-color: var(--color-control); }
.chip.static .help { margin-left: var(--space-1); }
.trips-page > .chip-row { margin-bottom: var(--space-4); }
button.link.danger { color: var(--color-danger); }

.recording-notice { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.live-dot.is-on { background: var(--amber-400); }

/* Enregistreur : compteur façon tableau de bord */
.recorder .recorder-count {
    margin: var(--space-2) 0; font-family: var(--font-display); font-stretch: var(--wide); font-weight: 800;
    font-size: 3rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--amber-400);
}
.recorder form { margin-top: var(--space-4); }
.recorder .button { width: 100%; min-height: 3.5rem; }
@media (min-width: 40rem) { .recorder .button { width: auto; } }

/* Récap annuel : barres par mois, une seule couleur (l'ambre de la trace) */
.recap-stats dd { font-size: 1.5rem; }
.recap-months { margin-bottom: var(--space-6); }
.recap-months figure { margin: 0; }
.month-chart { width: 100%; height: auto; max-height: 14rem; display: block; }
.month-chart .bar { fill: var(--color-accent-fill); }
.month-chart .baseline { stroke: var(--color-border-strong); stroke-width: 1; }
.month-chart .axis { fill: var(--color-muted); font-size: 13px; font-family: inherit; }
.region-list h3 { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-base); }

/* Traceurs */
.tracker-list { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: grid; gap: var(--space-3); }
.tracker-card h3 { margin: 0; font-size: var(--text-lg); }
.tracker-head { display: flex; gap: var(--space-3); align-items: flex-start; }
.tracker-card .meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: var(--space-1) 0; color: var(--color-muted); font-size: var(--text-sm); }
.tracker-card .meta span { display: inline-flex; align-items: center; gap: var(--space-1); }
.tracker-card .meta .icon { width: 1rem; height: 1rem; }
.tracker-card details { margin-top: var(--space-3); }
.tracker-card details form { margin-top: var(--space-3); }

/* Partage en direct */
.live-page fieldset { border: 0; padding: 0; margin: 0 0 var(--space-4); }
.live-page legend { font-weight: 700; margin-bottom: var(--space-2); }
.live-page .choice-list { display: grid; gap: var(--space-1); grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.live-page .live-panel + .panel, .live-page .live-panel + .map-block { margin-top: var(--space-4); }
.live-page section + section { margin-top: var(--space-5); }
/* ---------- Annuaire et motos volées (Phase 10) ----------
   Pictogramme de lieu : tuile carbone (inversée en mode sombre), pour ne pas confondre un lieu avec une alerte
   (l'ambre reste réservé aux dangers et aux actions). Note : étoile ambre décorative, la valeur est écrite. */
.place-list { margin-bottom: var(--space-5); }
.place-card {
    position: relative; display: flex; gap: var(--space-3); align-items: flex-start;
    padding: var(--space-3) var(--space-4); background: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    transition: border-color var(--duration) var(--ease);
}
.place-card:hover { border-color: var(--color-text); }
.place-card > .button { position: relative; z-index: 1; align-self: center; margin: 0; }
.place-body { display: grid; gap: var(--space-1); min-width: 0; flex: 1; }
.place-body p { margin: 0; }
.place-card .title { color: var(--color-text); font-family: var(--font-display); font-stretch: 112%; font-weight: 800; font-size: var(--text-base); line-height: 1.25; text-decoration: none; overflow-wrap: anywhere; }
.place-card .title::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.place-card .title:focus-visible { outline: none; }
.place-card:has(.title:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }
/* Séparateur « · » devant chaque élément ; celui qui ouvre une ligne est masqué (décalage + clip-path), même après un retour à la ligne. */
.place-card .meta { display: flex; flex-wrap: wrap; margin-left: -1.25em; clip-path: inset(0 0 0 1.25em); color: var(--color-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.place-card .meta > span::before { content: "·"; display: inline-block; width: 1.25em; text-align: center; }
.place-card .tags { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: center; }
.place-list.compact .place-card { padding: var(--space-2) var(--space-3); }

.place-icon {
    display: inline-grid; place-items: center; flex-shrink: 0;
    width: 2.75rem; height: 2.75rem; border-radius: var(--radius);
    background: var(--color-text); color: var(--color-bg);
}
.place-icon .icon { width: 1.5rem; height: 1.5rem; stroke-width: 1.9; }
.place-icon.large { width: 4rem; height: 4rem; border-radius: var(--radius-lg); }
.place-icon.large .icon { width: 2.25rem; height: 2.25rem; }

.place-marker {
    display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px;
    background: var(--carbon-950); color: var(--bone-50); border: 2px solid var(--bone-50);
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.35);
}
.place-marker .icon { width: 18px; height: 18px; stroke-width: 2.1; }

.rating { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.rating .icon { width: 1rem; height: 1rem; color: var(--amber-700); fill: var(--amber-400); }
.rating strong { font-weight: 800; }
.rating .count { color: var(--color-muted); }
.rating.is-empty { color: var(--color-muted); }
.review-stars { display: inline-flex; gap: 2px; }
.review-stars .icon { width: 1rem; height: 1rem; }
.review-stars .on { color: var(--amber-700); }
.review-stars .on .icon { fill: var(--amber-400); }
.review-stars .off { color: var(--color-border-strong); }
@media (prefers-color-scheme: dark) {
    .rating .icon, .review-stars .on { color: var(--amber-400); }
}

/* Recherche et filtres */
.directory-filters .search-row { margin-bottom: 0; }
.queue-summary { margin-bottom: var(--space-5); }
.queue-summary .chip { text-decoration: none; }
.queue-summary .chip strong { font-variant-numeric: tabular-nums; }

/* Fiche */
.place-hero .tags { align-items: center; }
.place-description { font-size: var(--text-lg); max-width: 44rem; }
.place-facts { display: grid; gap: var(--space-3) var(--space-5); margin: 0 0 var(--space-5); }
@media (min-width: 40rem) { .place-facts { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); } }
.place-facts dt { font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); }
.place-facts dd { margin: var(--space-1) 0 0; font-weight: 600; overflow-wrap: anywhere; }
.place-facts .num { font-variant-numeric: tabular-nums; }
.place-section { margin: var(--space-6) 0; }
.place-section > h2 { margin-bottom: var(--space-3); }
.section-head { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: flex-end; justify-content: space-between; margin-bottom: var(--space-3); }
.section-head h2 { margin: 0; }

.hours-panel { margin-bottom: var(--space-5); }
.hours { width: 100%; border-collapse: collapse; font-size: var(--text-sm); margin-bottom: var(--space-3); }
.hours th, .hours td { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.hours th { font-weight: 600; width: 45%; }
.hours td { font-variant-numeric: tabular-nums; }
.hours .is-today th, .hours .is-today td { font-weight: 800; }
.hours .is-today .badge { margin-left: var(--space-1); }
.hours-inputs { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.hours-inputs .field { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; gap: var(--space-3); margin: 0; }
@media (max-width: 24rem) { .hours-inputs .field { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); } }

details.inline-details > summary, details.coords > summary, details.review-rules > summary {
    cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.75rem;
    font-weight: 650; font-size: var(--text-sm);
}
details.inline-details > summary .icon { width: 1rem; height: 1rem; }
/* Chevron : la flèche native disparaît avec display: inline-flex. */
details.coords > summary::after, details.review-rules > summary::after {
    content: ""; width: .5rem; height: .5rem; margin-left: var(--space-1);
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg);
}
details.coords[open] > summary::after, details.review-rules[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
details.coords > summary::-webkit-details-marker, details.review-rules > summary::-webkit-details-marker { display: none; }
details.inline-details[open] { flex-basis: 100%; }
details.inline-details[open] > form { margin-top: var(--space-2); padding: var(--space-3); background: var(--color-surface-2); border-radius: var(--radius); }
details.coords { margin-bottom: var(--space-4); }
details.review-rules { margin: 0 0 var(--space-4); font-size: var(--text-sm); }
details.review-rules p { color: var(--color-muted); }
.stack-form fieldset fieldset { border: 0; padding: 0; margin: 0 0 var(--space-3); }

/* Avis */
.review-list { list-style: none; padding: 0; margin: 0 0 var(--space-5); display: grid; }
.review { padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); }
.review:first-child { padding-top: 0; }
.review-head { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); align-items: center; margin: 0 0 var(--space-2); }
.review-head .meta { color: var(--color-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.review-author { font-weight: 700; }
.review-author a { color: inherit; }
.review-body { margin: 0 0 var(--space-3); max-width: 44rem; }
.review-reply { margin: 0 0 var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-surface-2); border-left: 3px solid var(--color-accent-fill); border-radius: 0 var(--radius) var(--radius) 0; }
.review-reply p { margin: 0; }
.review-reply-title { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--space-1) !important; }
.review-actions { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); align-items: center; font-size: var(--text-sm); }
.review-actions button.link, .review-actions a.link { min-height: 2.75rem; display: inline-flex; align-items: center; }
.review-list.compact .review { padding: var(--space-3) 0; }
.small-notice { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); margin-bottom: var(--space-2); }
.review-form-panel { margin-top: var(--space-4); }
.review-form-panel > h3:first-child { margin-top: 0; font-family: var(--font-display); font-stretch: 112%; font-size: var(--text-lg); color: var(--color-text); text-transform: none; letter-spacing: 0; }
.queue-photos li .help { margin: var(--space-1) 0; overflow-wrap: anywhere; }
.queue-photos .actions { gap: var(--space-2); }

/* Formulaires */
.stack-form > .actions { margin-top: var(--space-4); }
.steps-list { margin: 0 0 var(--space-5); padding-left: var(--space-5); display: grid; gap: var(--space-2); color: var(--color-muted); }
.steps-list li::marker { font-weight: 800; color: var(--color-text); }
.prefill-form { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: flex-end; margin-bottom: var(--space-5); }
.prefill-form .help { flex-basis: 100%; }
.prefill-form .button { margin: 0; }
.js .prefill-form .button { display: none; }

/* Motos volées */
.plate {
    display: inline-flex; align-items: center; min-height: 1.75rem; padding: 0 var(--space-2);
    background: var(--color-surface); color: var(--color-text);
    border: 2px solid var(--color-text); border-radius: var(--radius-sm);
    font-family: var(--font-display); font-stretch: var(--wide); font-weight: 800; font-size: var(--text-xs);
    letter-spacing: 0.08em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.plate.large { min-height: 2.25rem; padding: 0 var(--space-3); font-size: var(--text-base); }
.stolen-thumb { width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: var(--radius); flex-shrink: 0; background: var(--color-surface-2); }
.stolen-search { margin-bottom: var(--space-5); }
.stolen-search h2 { margin-top: 0; }
.stolen-search .search-row { margin-bottom: var(--space-2); }
.stolen-search input[type="search"] { text-transform: uppercase; letter-spacing: 0.04em; }
.stolen-search input[type="search"]::placeholder { text-transform: none; }
.stolen-layout { margin-top: var(--space-5); }
.inline-field-form { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-end; }
.inline-field-form input { width: 5rem; }
.inline-field-form .field { margin: 0; }
.inline-field-form .help { flex-basis: 100%; }
.watch-state { margin: var(--space-2) 0 0; }
.stolen-photos { margin-bottom: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }

/* ==========================================================================
   Messagerie et notifications (Phase 11)
   Mêmes jetons que le reste du système : mes bulles reprennent l'inversion des onglets actifs (texte sur fond),
   l'ambre reste réservé à l'action (envoyer) et aux pastilles de nouveauté.
   ========================================================================== */

/* Pastilles de compteur (en-tête, onglets, boîte de réception) */
.count-badge {
    display: inline-grid; place-items: center;
    min-width: 1.25rem; height: 1.25rem; padding: 0 0.35rem;
    border-radius: var(--radius-pill);
    background: var(--amber-400); color: var(--carbon-950);
    font-size: var(--text-2xs); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
}
.header-icon {
    position: relative;
    display: inline-grid; place-items: center;
    width: 2.75rem; height: 2.75rem;
    border-radius: var(--radius-pill);
    color: var(--chrome-text);
}
.header-icon:hover, .header-icon[aria-current="page"] { background: rgb(255 255 255 / 0.08); color: #fff; }
.header-icon .count-badge { position: absolute; top: 0.2rem; right: 0.1rem; box-shadow: 0 0 0 2px var(--chrome); }
@media (min-width: 64rem) {
    .header-icon { order: 2; }
    .main-nav .nav-mobile { display: none; }
}
@media (max-width: 29.99rem) {
    /* Membre sur téléphone : messages, notifications, SOS et menu tiennent sur une ligne ; le logo seul reste visible,
       le nom du site reste lu par les lecteurs d'écran. */
    body[data-realtime] .site-header { gap: 0 var(--space-2); }
    body[data-realtime] .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    body[data-realtime] .brand-mark { width: 2rem; height: 2rem; }
}
@media (max-width: 24.99rem) {
    /* Très petits écrans : le bouton SOS garde son pictogramme et son nom pour les lecteurs d'écran */
    .header-sos > span, .header-ride > span { display: none; }
    .header-sos, .header-ride { padding: 0 var(--space-2); }
}
.tabs a .count-badge { margin-left: var(--space-2); }
.tabs a[aria-current="page"] .count-badge { box-shadow: 0 0 0 2px var(--color-text); }

/* Boîte de réception */
.inbox { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.inbox-item a {
    display: flex; gap: var(--space-3); align-items: center;
    min-height: 4.5rem; padding: var(--space-3) var(--space-2);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text); text-decoration: none;
    transition: background-color var(--duration) var(--ease);
}
.inbox-item a:hover { background: var(--color-surface); }
.inbox-avatar { position: relative; flex-shrink: 0; }
.inbox-avatar .avatar { width: 48px; height: 48px; font-size: 1.1rem; }
.inbox-avatar .avatar-placeholder .icon { width: 1.25rem; height: 1.25rem; }
.presence-dot { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 0 2px var(--color-bg); }
.inbox-avatar .presence-dot { position: absolute; right: 0; bottom: 0; }
.inbox-body { flex: 1; min-width: 0; display: grid; gap: 0.15rem; }
.inbox-top, .inbox-bottom { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.inbox-title { flex: 1; min-width: 0; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-top time { flex-shrink: 0; color: var(--color-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.inbox-preview { flex: 1; min-width: 0; color: var(--color-muted); font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-preview .badge { margin-right: var(--space-1); }
.inbox-muted { color: var(--color-muted); display: inline-flex; }
.inbox-muted .icon { width: 1rem; height: 1rem; }
.is-unread .inbox-title { font-weight: 800; }
.is-unread .inbox-preview { color: var(--color-text); font-weight: 550; }
.is-unread .inbox-top time { color: var(--color-accent); font-weight: 700; }

/* Mode « en roulant » */
.riding-panel { margin-bottom: var(--space-5); }
.riding-panel p { margin-bottom: var(--space-3); }
.riding-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.riding-form select { width: auto; min-width: 8rem; }
.live-panel select { background-color: var(--carbon-900); color: var(--chrome-text); border-color: var(--carbon-600); }
.riding-strip {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2);
    margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3);
    border-radius: var(--radius); background: var(--chrome); color: var(--chrome-text); font-size: var(--text-sm); font-weight: 650;
}
.riding-strip > span { display: inline-flex; align-items: center; gap: var(--space-2); }
.riding-strip button.link { color: var(--amber-400); }

/* Conversation */
.chat { display: flex; flex-direction: column; min-height: calc(100dvh - var(--header-height) - var(--space-10)); }
.chat-head {
    position: sticky; top: var(--header-height); z-index: 20;
    display: flex; align-items: center; gap: var(--space-2);
    margin: calc(-1 * var(--space-5)) calc(-1 * var(--gutter)) var(--space-3);
    padding: var(--space-2) var(--gutter);
    background: color-mix(in srgb, var(--color-bg) 92%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border);
}
@media (min-width: 48rem) { .chat-head { margin-top: calc(-1 * var(--space-7)); } }
.chat-back, .icon-button {
    display: inline-grid; place-items: center; flex-shrink: 0;
    width: 2.75rem; height: 2.75rem; border-radius: var(--radius-pill);
    color: var(--color-text); text-decoration: none; background: transparent; border: 0; cursor: pointer;
}
.chat-back:hover, .icon-button:hover { background: var(--color-surface-2); color: var(--color-text); }
.chat-avatar { width: 40px; height: 40px; font-size: 1rem; }
.chat-title { flex: 1; min-width: 0; }
.chat-title h1 { margin: 0; font-size: var(--text-lg); text-transform: none; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-title p { margin: 0; display: flex; align-items: center; gap: var(--space-1); color: var(--color-muted); font-size: var(--text-xs); min-height: 1.1em; }
.chat-channels { margin-bottom: var(--space-3); }
.chat-pins { display: grid; gap: var(--space-1); margin-bottom: var(--space-3); }
.chat-pin {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-3); border-radius: var(--radius);
    background: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent-fill);
    color: var(--color-text); text-decoration: none; font-size: var(--text-sm);
}
.chat-pin span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-pin .icon { width: 1rem; height: 1rem; color: var(--color-muted); }
.chat-request h2 { font-size: var(--text-lg); }
.chat-older { text-align: center; margin: 0 0 var(--space-3); }
.chat-empty { margin: var(--space-6) 0; text-align: center; color: var(--color-muted); }
.chat-readonly { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); }
.button.danger-text { color: var(--color-danger); }

.thread-log { display: flex; flex-direction: column; flex: 1; }
.thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); flex: 1; }
.thread-day, .thread-unread, .msg-system { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) 0 var(--space-2); color: var(--color-muted); font-size: var(--text-xs); text-align: center; }
.thread-day::before, .thread-day::after, .thread-unread::before, .thread-unread::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
.thread-day span { font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.thread-unread { color: var(--color-accent); font-weight: 700; }
.thread-unread::before, .thread-unread::after { background: var(--color-accent-fill); }
.msg-system { justify-content: center; margin: var(--space-2) 0; }
.msg-system span { max-width: 36rem; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--color-surface-2); }

.msg { position: relative; display: flex; flex-direction: column; align-items: flex-start; max-width: min(36rem, 85%); scroll-margin-top: 8rem; }
.msg.mine { align-self: flex-end; align-items: flex-end; }
.msg + .msg:not(.mine), .msg.mine + .msg.mine { margin-top: 0; }
.msg-author { margin: var(--space-2) 0 0.15rem var(--space-3); font-size: var(--text-xs); font-weight: 700; color: var(--color-muted); }
.msg-bubble {
    position: relative; max-width: 100%;
    padding: var(--space-2) var(--space-3) var(--space-1);
    border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-sm);
    background: var(--color-surface); border: 1px solid var(--color-border);
    overflow-wrap: anywhere;
}
.mine .msg-bubble { border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-lg); background: var(--color-text); border-color: var(--color-text); color: var(--color-bg); }
.mine .msg-bubble a { color: inherit; }
.msg:target .msg-bubble, .msg.is-highlighted .msg-bubble { box-shadow: 0 0 0 3px var(--color-accent-fill); }
.msg-text { margin: 0; white-space: pre-wrap; }
.msg-deleted { font-style: italic; color: var(--color-muted); }
.mine .msg-deleted { color: inherit; opacity: 0.75; }
.is-auto .msg-bubble { border-style: dashed; }
.msg-auto-label { display: flex; align-items: center; gap: var(--space-1); margin: 0 0 var(--space-1); font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }
.msg-auto-label .icon { width: 0.95rem; height: 0.95rem; }
.msg-meta { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-1); margin: 0.1rem 0 0; font-size: var(--text-2xs); opacity: 0.72; font-variant-numeric: tabular-nums; }
.msg-meta .icon { width: 0.85rem; height: 0.85rem; }
.msg-status { display: inline-flex; align-items: center; gap: 0.15rem; }
.msg-status.is-read { opacity: 1; font-weight: 750; }
.msg-status.is-read .icon { color: var(--amber-400); }
.msg-meta-inline { display: block; font-size: var(--text-xs); opacity: 0.8; }
.msg-quote {
    display: grid; margin: 0 0 var(--space-2); padding: var(--space-1) var(--space-2);
    border-left: 3px solid var(--color-accent-fill); border-radius: var(--radius-sm);
    background: color-mix(in srgb, currentcolor 8%, transparent);
    font-size: var(--text-sm); text-decoration: none; color: inherit;
}
.msg-quote-author { font-weight: 700; font-size: var(--text-xs); }
.msg-quote-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.85; }
.msg-media { display: block; max-width: min(100%, 22rem); margin: var(--space-1) 0 var(--space-2); border-radius: var(--radius); overflow: hidden; }
.msg-media img, video.msg-media { display: block; width: 100%; height: auto; max-height: 26rem; object-fit: cover; background: var(--carbon-850); }
.msg-audio { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-1) 0; }
.msg-audio audio { max-width: 15rem; height: 2.5rem; }
.msg-file, .msg-card, .msg-preview {
    display: flex; gap: var(--space-3); align-items: center;
    margin: var(--space-1) 0 var(--space-2); padding: var(--space-2) var(--space-3);
    border-radius: var(--radius); border: 1px solid color-mix(in srgb, currentcolor 18%, transparent);
    background: color-mix(in srgb, currentcolor 5%, transparent);
    color: inherit; text-decoration: none;
}
.msg-file:hover, .msg-card:hover, .msg-preview:hover { border-color: currentcolor; color: inherit; }
.msg-card > span:last-child, .msg-file > span { display: grid; min-width: 0; }
.msg-card-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex-shrink: 0; border-radius: var(--radius-sm); background: var(--amber-400); color: var(--carbon-950); }
.msg-card-type { font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.75; }
.msg-card.is-unavailable { font-style: italic; opacity: 0.8; }
.msg-card.is-static { max-width: 28rem; background: var(--color-surface); }
.msg-preview { display: grid; gap: 0.1rem; }
.msg-location { margin: var(--space-1) 0 var(--space-2); }
.msg-location-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-1); }
.msg-location form { margin-top: var(--space-2); }
.msg-link-blocked { text-decoration: line-through; }
.msg-pin { display: inline-flex; }

.msg-reactions { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-1); margin: -0.35rem var(--space-2) 0; padding: 0; position: relative; z-index: 1; }
.reaction {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.2rem;
    min-width: 2.75rem; min-height: 2rem; padding: 0 var(--space-2);
    border-radius: var(--radius-pill); border: 1px solid var(--color-border-strong);
    background: var(--color-surface); color: var(--color-text);
    font: inherit; font-size: var(--text-sm); font-variant-numeric: tabular-nums; cursor: pointer;
}
.reaction:hover { border-color: var(--color-text); }
.reaction.mine { border-color: var(--color-accent-fill); background: var(--color-accent-soft); }

/* Menu d'actions d'un message : un <details> natif, accessible au clavier */
.msg-menu { position: absolute; top: 0; right: calc(-1 * 2.9rem); }
.msg.mine .msg-menu { right: auto; left: calc(-1 * 2.9rem); }
.msg-menu > summary {
    display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
    border-radius: var(--radius-pill); color: var(--color-muted); cursor: pointer; list-style: none;
}
.msg-menu > summary::-webkit-details-marker { display: none; }
.msg-menu > summary:hover, .msg-menu[open] > summary { background: var(--color-surface-2); color: var(--color-text); }
.msg-menu-panel {
    position: absolute; top: 2.9rem; right: 0; z-index: 30;
    display: grid; min-width: 15rem; padding: var(--space-2);
    border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-3);
}
.msg.mine .msg-menu-panel { right: auto; left: 0; }
.msg-menu-panel > a, .msg-menu-panel button.link {
    display: flex; align-items: center; gap: var(--space-3); width: 100%;
    min-height: 2.75rem; padding: 0 var(--space-2); border-radius: var(--radius-sm);
    color: var(--color-text); font-size: var(--text-sm); font-weight: 600; text-decoration: none; text-align: left;
}
.msg-menu-panel > a:hover, .msg-menu-panel button.link:hover { background: var(--color-surface-2); color: var(--color-text); }
.msg-menu-panel button.link.danger { color: var(--color-danger); }
.msg-menu-panel .icon { width: 1.125rem; height: 1.125rem; color: var(--color-muted); }
.msg-menu-reactions { display: flex; flex-wrap: wrap; gap: 0.15rem; padding-bottom: var(--space-2); margin-bottom: var(--space-1); border-bottom: 1px solid var(--color-border); }
.msg-menu-reactions .reaction { min-width: 2.75rem; min-height: 2.75rem; border-color: transparent; background: transparent; font-size: 1.25rem; }
.msg-menu-reactions .reaction:hover { background: var(--color-surface-2); }
@media (max-width: 39.99rem) {
    .msg { max-width: calc(100% - 3rem); }
    .msg-menu-panel { position: fixed; left: var(--space-3); right: var(--space-3); top: auto; bottom: calc(var(--tabbar-height) + var(--safe-bottom) + var(--space-3)); min-width: 0; }
    .msg.mine .msg-menu-panel { left: var(--space-3); right: var(--space-3); }
}

.chat-typing { min-height: 1.5rem; margin: var(--space-2) 0 0; color: var(--color-muted); font-size: var(--text-sm); font-style: italic; }
.chat-typing:not(:empty)::before { content: ""; display: inline-block; width: 1.4rem; height: 0.5rem; margin-right: var(--space-2); vertical-align: middle;
    background: radial-gradient(circle, currentcolor 45%, transparent 50%) 0 50% / 0.5rem 0.5rem repeat-x; animation: typing 1.2s steps(3) infinite; }
@keyframes typing { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .chat-typing:not(:empty)::before { animation: none; } }

/* Saisie : collée au bas de l'écran, au-dessus de la barre d'onglets */
.composer-wrap {
    position: sticky; bottom: 0; z-index: 25;
    margin: var(--space-3) calc(-1 * var(--gutter)) 0; padding: var(--space-2) var(--gutter) var(--space-3);
    background: color-mix(in srgb, var(--color-bg) 94%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--color-border);
}
@media (max-width: 63.99rem) { .has-tabbar .composer-wrap { bottom: calc(var(--tabbar-height) + var(--safe-bottom)); } }
.chat-composer { display: flex; align-items: flex-end; gap: var(--space-1); }
.composer-field { flex: 1; min-width: 0; }
.chat-composer textarea { min-height: var(--control-height); max-height: 10rem; padding: 0.7rem var(--space-4); border-radius: 1.5rem; resize: none; line-height: 1.4; }
.composer-file { margin: var(--space-1) 0 0 var(--space-3); font-size: var(--text-xs); color: var(--color-muted); }
.composer-attach { position: relative; cursor: pointer; }
.composer-attach:focus-within { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.send-button {
    display: grid; place-items: center; flex-shrink: 0;
    width: var(--control-height); height: var(--control-height);
    border: 0; border-radius: 50%; background: var(--color-button); color: var(--color-button-text); cursor: pointer;
    transition: background-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.send-button:hover { background: var(--color-button-hover); }
.send-button:active { transform: scale(0.94); }
.send-button[disabled] { opacity: 0.5; cursor: progress; }
.composer-context { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin: 0 0 var(--space-2); padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
    border-left: 3px solid var(--color-accent-fill); background: var(--color-surface); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 650; }
.composer-context a { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; color: var(--color-muted); }
.composer-recorder { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-2) 0; font-variant-numeric: tabular-nums; }
.recording-dot { width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--color-sos); animation: pulse-sos 1.2s infinite; }
@keyframes pulse-sos { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .recording-dot { animation: none; } }
.composer-more { margin-top: var(--space-1); }
.composer-more > summary { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.75rem; padding: 0 var(--space-2); color: var(--color-muted); font-size: var(--text-sm); font-weight: 650; cursor: pointer; list-style: none; border-radius: var(--radius-pill); }
.composer-more > summary::-webkit-details-marker { display: none; }
.composer-more > summary:hover { color: var(--color-text); }
.composer-more-panel { display: grid; gap: var(--space-3); padding: var(--space-3) 0 var(--space-1); }
.composer-option fieldset { margin: 0; }
.composer-option .search-row { margin-bottom: 0; }
.msg.is-pending .msg-bubble { opacity: 0.65; }
.msg.is-failed .msg-bubble { box-shadow: 0 0 0 2px var(--color-danger); }
.msg-retry { margin-top: var(--space-1); font-size: var(--text-xs); }

/* Pages autour de la conversation */
.messages-new .panel + .panel, .conversation-settings .panel { margin-top: var(--space-5); }
.chip-row.wrap { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
.search-results { list-style: none; padding: 0; margin: 0; }
.search-results a { display: grid; gap: 0.15rem; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); color: var(--color-text); text-decoration: none; }
.search-results a:hover { color: var(--color-accent); }
.search-meta { font-size: var(--text-xs); color: var(--color-muted); }
.report-quote { margin: 0 0 var(--space-5); padding: var(--space-3) var(--space-4); border-left: 3px solid var(--color-border-strong); background: var(--color-surface); border-radius: var(--radius-sm); }
.report-quote .msg-author { margin: 0 0 var(--space-1); }
.report-quote p:last-child { margin: 0; }
.snapshot { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); margin: 0 0 var(--space-4); font-size: var(--text-sm); }
.snapshot dt { font-weight: 700; color: var(--color-muted); }
.snapshot dd { margin: 0; }

/* Notifications */
.notif-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.notif a { display: flex; align-items: center; gap: var(--space-3); min-height: 4rem; padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--color-border); color: var(--color-text); text-decoration: none; }
.notif a:hover { background: var(--color-surface); }
.notif-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex-shrink: 0; border-radius: 50%; background: var(--color-surface-2); color: var(--color-muted); }
.notif.is-unread .notif-icon { background: var(--color-accent-soft); color: var(--color-accent); }
.notif.is-sos .notif-icon { background: var(--color-danger-soft); color: var(--color-danger); }
.notif-body { flex: 1; min-width: 0; display: grid; gap: 0.1rem; }
.notif-title { font-weight: 550; }
.notif.is-unread .notif-title { font-weight: 750; }
.notif-meta { font-size: var(--text-xs); color: var(--color-muted); }
.notif-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--amber-400); flex-shrink: 0; }
.notifications-page .pagination { align-items: center; }
.channel-table td { text-align: center; width: 6rem; }
.channel-table th[scope="row"] { font-weight: 650; }
.channel-table input[type="checkbox"] { margin: 0 auto; }
.push-panel { margin-bottom: var(--space-5); }

/* ---------- Fil social (Phase 12) ---------- */
.avatar-40 { width: 40px; height: 40px; font-size: 1rem; }
.avatar-64 { width: 60px; height: 60px; font-size: 1.5rem; }

.feed, .post-page { max-width: 40rem; margin-inline: auto; }
.feed-head .actions .button .icon { width: 1.125rem; height: 1.125rem; }
.feed-list { display: grid; gap: var(--space-3); }
.feed-more { display: flex; justify-content: center; margin: var(--space-5) 0 0; }
.feed-end { margin: var(--space-5) 0 0; text-align: center; color: var(--color-muted); font-size: var(--text-sm); }
.actions.center { justify-content: center; }

/* Pastilles de filtre (liens) : même dessin que les puces de formulaire */
.filter-row {
    display: flex; gap: var(--space-2);
    margin: calc(-1 * var(--space-2)) calc(-1 * var(--gutter)) var(--space-4);
    padding: 0 var(--gutter) var(--space-1);
    overflow-x: auto; scrollbar-width: none;
}
.filter-row::-webkit-scrollbar { display: none; }
.filter-pill {
    display: inline-flex; align-items: center; gap: var(--space-2); flex-shrink: 0;
    min-height: 2.75rem; padding: 0 var(--space-4);
    border: 1px solid var(--color-control); border-radius: var(--radius-pill);
    background: var(--color-surface); color: var(--color-text);
    font-size: var(--text-sm); font-weight: 650; text-decoration: none; white-space: nowrap;
}
.filter-pill:hover { border-color: var(--color-text); color: var(--color-text); }
.filter-pill[aria-current="page"] { background: var(--color-text); border-color: var(--color-text); color: var(--color-bg); }
.pill-count { font-variant-numeric: tabular-nums; opacity: 0.7; }
@media (min-width: 48rem) { .filter-row { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; flex-wrap: wrap; } }

/* Bandeau des stories : anneau ambre = story non vue */
.story-rail { margin: calc(-1 * var(--space-2)) calc(-1 * var(--gutter)) var(--space-4); }
.story-rail ul { list-style: none; display: flex; gap: var(--space-3); margin: 0; padding: var(--space-1) var(--gutter) var(--space-2); overflow-x: auto; scrollbar-width: none; }
.story-rail ul::-webkit-scrollbar { display: none; }
.story-bubble { display: grid; justify-items: center; gap: var(--space-1); width: 4.5rem; color: var(--color-text); text-decoration: none; }
.story-ring { position: relative; display: grid; place-items: center; width: 4.25rem; height: 4.25rem; border-radius: 50%; background: var(--color-border-strong); }
.story-ring .avatar { box-shadow: 0 0 0 2px var(--color-bg); }
.story-bubble.is-unseen .story-ring { background: conic-gradient(var(--amber-400), var(--amber-300), var(--amber-400)); }
.story-bubble.is-add .story-ring { background: transparent; border: 2px dashed var(--color-border-strong); }
.story-plus { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--amber-400); color: var(--carbon-950); box-shadow: 0 0 0 2px var(--color-bg); }
.story-plus .icon { width: 0.9rem; height: 0.9rem; stroke-width: 2.6; }
.story-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); font-weight: 600; }
.story-bubble:hover .story-name { color: var(--color-accent); }
@media (min-width: 48rem) { .story-rail { margin-left: 0; margin-right: 0; } .story-rail ul { padding-left: 0; padding-right: 0; } }

/* Carte d'une publication */
.social-post { margin: 0; padding: 0; overflow: hidden; }
.social-post > :not(.post-media, .post-video) { margin-inline: var(--space-4); }
.post-head { display: flex; gap: var(--space-3); align-items: flex-start; margin-block: var(--space-4) var(--space-3); }
.post-who { flex: 1; min-width: 0; }
.post-author { font-weight: 750; color: var(--color-text); text-decoration: none; }
.post-author:hover { color: var(--color-accent); }
.post-meta { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); margin: 0; font-size: var(--text-xs); color: var(--color-muted); }
.post-meta a { color: inherit; text-decoration: none; }
.post-meta a:hover { color: var(--color-text); text-decoration: underline; }
.post-meta > * + *::before { content: "·"; margin-right: var(--space-2); }
.post-audience { display: inline-flex; align-items: center; gap: 0.2rem; }
.post-audience .icon, .post-place .icon { width: 0.95rem; height: 0.95rem; }
.post-place { display: flex; align-items: center; gap: 0.25rem; margin: 0.15rem 0 0; font-size: var(--text-xs); font-weight: 600; color: var(--color-text); }
.post-body { margin-block: 0 var(--space-3); overflow-wrap: anywhere; white-space: normal; }
.social-post .post-media + .post-body, .social-post .post-video + .post-body { margin-top: var(--space-3); }
.rt-mention, .rt-tag { font-weight: 650; color: var(--color-accent); text-decoration: none; }
.rt-mention:hover, .rt-tag:hover { text-decoration: underline; }

/* Menu « … » : <details>, aucun script nécessaire */
.post-menu, .react-more { position: relative; }
.post-menu > summary, .react-more > summary {
    display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: -0.5rem -0.75rem 0 0;
    border-radius: 50%; color: var(--color-muted); cursor: pointer; list-style: none;
}
.post-menu > summary::-webkit-details-marker, .react-more > summary::-webkit-details-marker { display: none; }
.post-menu > summary:hover, .react-more > summary:hover, .post-menu[open] > summary { background: var(--color-surface-2); color: var(--color-text); }
.menu-pop {
    position: absolute; right: 0; top: calc(100% + var(--space-1)); z-index: 20;
    display: grid; min-width: 15rem; padding: var(--space-2);
    background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius); box-shadow: var(--shadow-3);
}
.menu-pop a, .menu-pop button.link {
    display: flex; align-items: center; width: 100%; min-height: 2.75rem; padding: 0 var(--space-3);
    border-radius: var(--radius-sm); color: var(--color-text); font-size: var(--text-sm); font-weight: 600; text-align: left; text-decoration: none;
}
.menu-pop a:hover, .menu-pop button.link:hover { background: var(--color-surface-2); color: var(--color-text); }
.menu-pop button.link.danger { color: var(--color-danger); }

/* Médias : photo pleine largeur, album défilant au pouce, vidéo */
.post-media { position: relative; background: var(--carbon-950); }
.post-media img { display: block; width: 100%; height: auto; max-height: 36rem; object-fit: cover; }
.post-carousel { display: flex; margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.post-carousel::-webkit-scrollbar { display: none; }
.post-carousel li { flex: 0 0 100%; scroll-snap-align: center; }
.post-carousel img { aspect-ratio: 4 / 5; }
.post-carousel:focus-visible { outline-offset: -3px; }
.post-media-count {
    position: absolute; top: var(--space-3); right: var(--space-3);
    display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.5rem;
    border-radius: var(--radius-pill); background: rgb(11 12 14 / 0.72); color: #fff;
    font-size: var(--text-xs); font-weight: 700; font-variant-numeric: tabular-nums;
}
.post-media-count .icon { width: 0.95rem; height: 0.95rem; }
.post-video { background: var(--carbon-950); }
.post-video video { display: block; width: 100%; height: auto; max-height: 36rem; background: var(--carbon-950); }
.social-post.is-reel .post-video video { aspect-ratio: 9 / 16; max-height: min(80vh, 44rem); object-fit: contain; }
.post-processing { display: flex; align-items: center; gap: var(--space-2); }

/* Contenu joint (circuit, sortie) et liens */
.post-card {
    display: flex; gap: var(--space-3); align-items: center; margin-bottom: var(--space-3); padding: var(--space-3);
    border: 1px solid var(--color-border-strong); border-radius: var(--radius);
    color: var(--color-text); text-decoration: none;
}
.post-card:hover { border-color: var(--color-text); color: var(--color-text); }
.post-card > span:last-child { display: grid; min-width: 0; }
.post-card-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex-shrink: 0; border-radius: var(--radius-sm); background: var(--amber-400); color: var(--carbon-950); }
.post-card-type { font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); }
.post-card-sub { font-size: var(--text-xs); color: var(--color-muted); }
.post-link { margin-bottom: var(--space-3); }
.post-embed { margin-bottom: var(--space-3); border-radius: var(--radius); overflow: hidden; background: var(--carbon-950); color: var(--chrome-text); }
.post-embed-play {
    display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 9rem; padding: var(--space-4);
    background: radial-gradient(circle at 20% 30%, rgb(255 178 30 / 0.16), transparent 60%), var(--carbon-900);
    border: 0; color: #fff; font: inherit; font-weight: 700; text-align: left; cursor: pointer;
}
.post-embed-icon { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; flex-shrink: 0; border-radius: 50%; background: var(--amber-400); color: var(--carbon-950); }
.post-embed-icon .icon { fill: currentcolor; }
.post-embed-play:hover .post-embed-icon { background: var(--amber-300); }
.post-embed-note { margin: 0; padding: var(--space-2) var(--space-4) var(--space-3); font-size: var(--text-xs); color: var(--chrome-muted); }
.post-embed-note a { color: var(--chrome-text); }
.post-embed iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

/* Barre d'actions */
.post-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-1); margin-top: var(--space-1); padding-block: var(--space-1); border-top: 1px solid var(--color-border); }
.social-post > .post-bar { margin-inline: var(--space-2); }
.post-action {
    display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.75rem; padding: 0 var(--space-2);
    border: 0; border-radius: var(--radius-pill); background: none;
    color: var(--color-muted); font: inherit; font-size: var(--text-sm); font-weight: 650; text-decoration: none; cursor: pointer;
}
.post-action:hover { background: var(--color-surface-2); color: var(--color-text); }
.post-action[aria-pressed="true"] { color: var(--color-accent); }
.post-action[aria-pressed="true"] .icon { fill: var(--color-accent-fill); stroke: var(--color-accent); }
.post-count { margin-right: auto; padding: 0 var(--space-2); font-size: var(--text-xs); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.react { display: inline-flex; align-items: center; }
.react-more > summary { width: 2.25rem; height: 2.75rem; margin: 0; border-radius: var(--radius-pill); }
.react-more > summary .icon { width: 1rem; height: 1rem; }
.react-menu {
    position: absolute; left: 0; bottom: calc(100% + var(--space-1)); z-index: 20;
    display: flex; gap: var(--space-1); padding: var(--space-1);
    background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); box-shadow: var(--shadow-3);
}
.react-menu button {
    display: inline-flex; align-items: center; gap: 0.3rem; min-height: 2.75rem; padding: 0 var(--space-3);
    border: 0; border-radius: var(--radius-pill); background: none; color: var(--color-text);
    font: inherit; font-size: var(--text-xs); font-weight: 650; white-space: nowrap; cursor: pointer;
}
.react-menu button:hover { background: var(--color-surface-2); }
.react-menu button[aria-pressed="true"] { background: var(--color-text); color: var(--color-bg); }
.react-menu .icon { width: 1.05rem; height: 1.05rem; }
.post-save { display: inline; }
.post-action-num { display: none; font-variant-numeric: tabular-nums; }
@media (max-width: 29.99rem) {
    /* Téléphone : une seule rangée d'actions, libellés lus par les lecteurs d'écran */
    .post-action-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .post-action-num { display: inline; }
    .post-count { order: 10; margin-left: auto; margin-right: 0; }
}
.post-staff { margin: 0 var(--space-4) var(--space-4); font-size: var(--text-sm); }
.post-staff summary { cursor: pointer; min-height: 2.75rem; display: flex; align-items: center; color: var(--color-danger); font-weight: 650; }
.post-staff-form { display: grid; gap: var(--space-2); }
.post-staff-form .field { margin: 0; }

/* Page d'une publication : partage et commentaires */
.post-page .social-post { margin-bottom: var(--space-4); }
.share-panel, .comments-block { margin-bottom: var(--space-4); padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.share-panel h2, .comments-block h2 { margin-top: 0; font-size: var(--text-base); text-transform: uppercase; }
.share-links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.copy-field { display: flex; gap: var(--space-2); }
.copy-field input { flex: 1; min-width: 0; font-size: var(--text-sm); }
.comment-list, .comment-replies { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.comment-replies { margin-top: var(--space-3); }
.comment { display: flex; gap: var(--space-3); align-items: flex-start; scroll-margin-top: calc(var(--header-height) + var(--space-4)); }
.comment:target > .comment-body { box-shadow: 0 0 0 2px var(--amber-400); }
.comment-body { flex: 1; min-width: 0; }
.comment-text { margin: 0; padding: var(--space-2) var(--space-3); background: var(--color-surface-2); border-radius: var(--radius); font-size: var(--text-sm); overflow-wrap: anywhere; }
.comment.is-restricted > .comment-body > .comment-text { border: 1px dashed var(--color-border-strong); background: transparent; }
.comment-author { margin-right: var(--space-1); font-weight: 750; color: var(--color-text); text-decoration: none; }
.comment-note { margin: var(--space-1) 0 0; font-size: var(--text-xs); color: var(--color-muted); }
.comment-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-3); padding-left: var(--space-3); font-size: var(--text-xs); color: var(--color-muted); }
.comment-tools a, .comment-tools button.link { display: inline-flex; align-items: center; min-height: 2.25rem; color: var(--color-muted); font-weight: 650; text-decoration: none; }
.comment-tools a:hover, .comment-tools button.link:hover { color: var(--color-text); }
.comment-tools button.link[aria-pressed="true"] { color: var(--color-accent); }
.comment-compose { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); align-items: end; margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.comment-compose textarea { min-height: 3rem; resize: vertical; }
.comment-replying { grid-column: 1 / -1; margin: 0; font-size: var(--text-sm); color: var(--color-muted); }

/* Formulaire de publication */
.compose-switch { margin: 0 0 var(--space-5); }
.alt-list { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
.alt-list .field { margin: 0; }
.alt-row { display: grid; grid-template-columns: 3.5rem 1fr; gap: var(--space-3); align-items: center; }
.alt-row img { width: 3.5rem; height: 3.5rem; object-fit: cover; border-radius: var(--radius-sm); }
.alt-row label { font-size: var(--text-xs); font-weight: 650; }
.js [data-sticker-for][hidden], .js [data-audience-group-field][hidden] { display: none; }

/* Enregistrements */
.collection-tools { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; margin-bottom: var(--space-4); }
.inline-form { display: flex; gap: var(--space-2); align-items: center; }
.inline-form input { min-height: 2.5rem; width: auto; min-width: 0; flex: 1 1 12rem; }

/* Profil : story, vitrine, grille */
.profile-story { display: inline-flex; border-radius: 50%; }
.profile-header .profile-story .avatar-96 { box-shadow: 0 0 0 4px var(--carbon-950), 0 0 0 8px var(--amber-400); }
.profile-story { transition: transform var(--duration) var(--ease); }
.profile-story:hover { transform: scale(1.03); }
.profile-more { margin-top: var(--space-3); font-size: var(--text-sm); }
.profile-more > summary { display: inline-flex; align-items: center; min-height: 2.75rem; cursor: pointer; font-weight: 650; color: var(--chrome-text); }
.profile-more-body { color: var(--color-text); }
.profile-more-body { display: grid; gap: var(--space-2); padding: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); }
.profile-more-body form { display: grid; gap: 0.1rem; }
.profile-more-body button.link { justify-self: start; min-height: 2.25rem; font-weight: 650; }
.showcase {
    display: grid; gap: var(--space-4); margin: var(--space-5) 0; padding: var(--space-4);
    border-radius: var(--radius-lg); background: var(--chrome); color: var(--chrome-text);
}
@media (min-width: 40rem) { .showcase { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; } }
.showcase-moto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); margin-bottom: var(--space-3); }
.showcase .eyebrow { color: var(--amber-400); margin-bottom: var(--space-1); }
.showcase-name { margin: 0; font-family: var(--font-display); font-stretch: var(--wide); font-weight: 800; font-size: var(--text-xl); line-height: 1.1; }
.showcase-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: var(--space-3); margin: 0; }
.showcase-stats div { padding: var(--space-3); border: 1px solid var(--chrome-line); border-radius: var(--radius); }
.showcase-stats dt { font-size: var(--text-xs); color: var(--chrome-muted); }
.showcase-stats dd { margin: 0; font-family: var(--font-display); font-stretch: var(--wide); font-weight: 800; font-size: var(--text-xl); font-variant-numeric: tabular-nums; color: #fff; }
.profile-posts { margin: var(--space-6) 0; }
.view-switch { display: inline-flex; gap: var(--space-1); padding: 0.2rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); }
.view-switch a { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 2.5rem; padding: 0 var(--space-3); border-radius: var(--radius-pill); color: var(--color-muted); font-size: var(--text-xs); font-weight: 650; text-decoration: none; }
.view-switch a[aria-current="page"] { background: var(--color-text); color: var(--color-bg); }
.view-switch .icon { width: 1rem; height: 1rem; }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin: 0; padding: 0; list-style: none; border-radius: var(--radius); overflow: hidden; }
.post-grid a { position: relative; display: block; aspect-ratio: 1; background: var(--color-surface-2); color: var(--color-text); text-decoration: none; overflow: hidden; }
.post-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration) var(--ease); }
.post-grid a:hover img { transform: scale(1.04); }
.post-grid-text { display: block; padding: var(--space-2); font-size: var(--text-xs); line-height: 1.35; overflow: hidden; height: 100%; }
.post-grid-badge { position: absolute; top: var(--space-2); right: var(--space-2); display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: rgb(11 12 14 / 0.72); color: #fff; }
.post-grid-badge .icon { width: 1rem; height: 1rem; }

/* Lecteur de stories : toujours carbone */
.story-viewer {
    position: relative; max-width: 26rem; margin: 0 auto; padding: var(--space-3);
    border-radius: var(--radius-lg); background: var(--carbon-950); color: var(--chrome-text);
}
.story-progress { display: flex; gap: 3px; margin-bottom: var(--space-2); }
.story-segment { flex: 1; height: 3px; border-radius: 2px; background: rgb(255 255 255 / 0.25); overflow: hidden; }
.story-segment > span { display: block; height: 100%; width: 0; background: #fff; }
.story-segment.is-done > span { width: 100%; }
.story-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.story-owner { flex: 1; display: inline-flex; align-items: center; gap: var(--space-2); color: #fff; font-weight: 700; text-decoration: none; }
.story-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: none; color: #fff; cursor: pointer; }
.story-icon:hover { background: rgb(255 255 255 / 0.1); color: #fff; }
.story-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.story-item { position: relative; }
.js .story-viewer.is-ready .story-item:not(.is-current) { display: none; }
.story-media { display: grid; place-items: center; aspect-ratio: 9 / 16; max-height: 60vh; margin-inline: auto; border-radius: var(--radius); overflow: hidden; background: var(--carbon-900); }
.story-media img, .story-media video { width: 100%; height: 100%; object-fit: contain; }
.story-processing { padding: var(--space-4); text-align: center; color: var(--chrome-muted); }
.story-overlay { display: grid; gap: var(--space-2); justify-items: start; margin-top: var(--space-2); }
.story-time { margin: 0; font-size: var(--text-xs); color: var(--chrome-muted); }
.story-caption { margin: 0; font-size: var(--text-base); overflow-wrap: anywhere; }
.story-caption a { color: var(--amber-300); }
.story-sticker {
    display: inline-flex; align-items: center; gap: var(--space-1); min-height: 2.25rem; padding: 0 var(--space-3);
    border-radius: var(--radius-pill); background: var(--amber-400); color: var(--carbon-950);
    font-size: var(--text-sm); font-weight: 750; text-decoration: none;
}
a.story-sticker:hover { background: var(--amber-300); color: var(--carbon-950); }
.story-sticker .icon { width: 1rem; height: 1rem; }
.story-foot { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); }
.story-reply { flex: 1; display: flex; gap: var(--space-2); }
.story-reply input { flex: 1; min-width: 0; background: transparent; color: #fff; border-color: rgb(255 255 255 / 0.4); border-radius: var(--radius-pill); }
.story-reply input::placeholder { color: var(--chrome-muted); }
.button.on-dark { color: #fff; border-color: rgb(255 255 255 / 0.5); }
.button.on-dark:hover { background: rgb(255 255 255 / 0.1); color: #fff; border-color: #fff; }
button.link.on-dark { color: var(--chrome-text); }
.story-nav {
    position: absolute; top: 45%; display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
    border: 0; border-radius: 50%; background: rgb(11 12 14 / 0.6); color: #fff; cursor: pointer;
}
.story-prev { left: var(--space-1); }
.story-next { right: var(--space-1); }
.story-nav:hover { background: rgb(11 12 14 / 0.85); }
.story-nav[disabled] { opacity: 0.35; cursor: default; }
@media (min-width: 40rem) { .story-prev { left: -3.5rem; } .story-next { right: -3.5rem; } .story-nav { background: var(--carbon-800); } }

/* Aperçu public d'un circuit, partage */
.share-route { max-width: 44rem; margin-inline: auto; }
.share-route-facts { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); color: var(--color-muted); font-weight: 600; }
.share-route-facts > * + *::before { content: "·"; margin-right: var(--space-2); }
.share-route-card { width: 100%; height: auto; margin: var(--space-3) 0 var(--space-5); border-radius: var(--radius-lg); }
.recap-share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); font-size: var(--text-sm); font-weight: 650; }
.recap-share .icon { width: 1.1rem; height: 1.1rem; }
.invite .share-links { margin-top: var(--space-2); }
.social-settings .panel h2 { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
    .post-grid img { transition: none; }
    .post-grid a:hover img { transform: none; }
}

/* Connexion avec Google, Apple ou Facebook (Phase 12) */
.social-login { display: grid; gap: var(--space-3); margin: var(--space-4) 0 0; }
.auth-card .social-button { width: 100%; min-height: 3.25rem; gap: var(--space-3); font-size: var(--text-base); }
.social-logo { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }
.social-divider { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-5) 0 var(--space-2); color: var(--color-muted); font-size: var(--text-sm); }
.social-divider::before, .social-divider::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
.auth-card > .social-divider { padding: 0; border: 0; text-align: left; }
.social-eyebrow::before { display: none; }
.social-eyebrow { gap: var(--space-2); }
.connection-list { list-style: none; margin: var(--space-5) 0; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
.connection-item { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); }
.connection-item + .connection-item { border-top: 1px solid var(--color-border); }
.connection-item .social-logo { width: 1.5rem; height: 1.5rem; }
.connection-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.connection-text span { color: var(--color-muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
.connection-item form { margin: 0; }
.auth-card > .lead { text-align: left; font-size: var(--text-base); margin: var(--space-2) 0 var(--space-4); }
.auth-card form .help + .button { margin-top: var(--space-4); }

/* ---------------------------------------------------------------- Communauté (Phase 13) : forum, sondages, défis */
.forum-list, .forum-posts, .challenge-grid, .badge-list, .poll-results { list-style: none; padding: 0; margin: 0 0 var(--space-5); }
.forum-row { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.forum-row:first-child { border-top: 1px solid var(--color-border); }
.forum-row.is-pinned { border-left: 3px solid var(--amber-400); padding-left: var(--space-3); }
.forum-row-main { flex: 1; min-width: 0; }
.forum-row-title { display: inline-block; min-height: 1.5rem; color: var(--color-text); font-weight: 750; text-decoration: none; overflow-wrap: anywhere; }
.forum-row-title:hover { color: var(--color-accent); text-decoration: underline; }
.forum-row-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: var(--space-1) 0 0; }
.forum-row-tags:empty { display: none; }
.forum-row .meta, .forum-thread-head .meta, .forum-post-head .meta { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); margin: var(--space-1) 0 0; color: var(--color-muted); font-size: var(--text-sm); }
.forum-row-count { flex: none; color: var(--color-muted); font-size: var(--text-sm); white-space: nowrap; }
.hub-grid .meta { margin: var(--space-2) 0 0; color: var(--color-muted); font-size: var(--text-sm); }
.forum-thread-head { margin-bottom: var(--space-5); }
.forum-thread-head h1 { overflow-wrap: anywhere; }
.forum-thread-head .actions { margin-top: var(--space-3); align-items: center; }
.forum-rename { margin-top: var(--space-3); }
.forum-rename summary, .forum-blocked summary, .poll-builder summary { cursor: pointer; min-height: 2.75rem; display: flex; align-items: center; gap: var(--space-2); color: var(--color-muted); }
.forum-post { padding: var(--space-4); margin-bottom: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.forum-post.is-solution { border-color: var(--color-success); box-shadow: inset 4px 0 0 var(--color-success); }
.forum-post.is-hidden { background: var(--color-sunk); }
.forum-post-head { display: flex; gap: var(--space-3); align-items: center; }
.forum-post-head > div { flex: 1; min-width: 0; }
.forum-post-head .badge { margin-left: auto; }
.forum-post-author { color: var(--color-text); font-weight: 750; text-decoration: none; }
.forum-post-author:hover { text-decoration: underline; }
.forum-post-body { margin-top: var(--space-3); overflow-wrap: anywhere; }
.forum-post-tools { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); align-items: center; margin-top: var(--space-3); font-size: var(--text-sm); }
.forum-post-tools a, .forum-post-tools .link { min-height: 2.75rem; display: inline-flex; align-items: center; }
.forum-edit textarea { width: 100%; margin-top: var(--space-3); }
.forum-reply { margin-top: var(--space-6); }
.poll { margin-bottom: var(--space-5); }
.poll h2 { margin-top: var(--space-1); }
.poll .eyebrow { display: flex; align-items: center; gap: var(--space-2); }
.poll-results li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); padding: var(--space-2) 0; }
.poll-label { overflow-wrap: anywhere; }
.poll-value { font-variant-numeric: tabular-nums; font-weight: 700; }
.poll-results li.is-mine .poll-label { font-weight: 700; }
.poll-bar { grid-column: 1 / -1; }
.poll-bar, .challenge progress { width: 100%; height: 0.5rem; appearance: none; border: 0; border-radius: 999px; background: var(--color-border); overflow: hidden; }
.poll-bar::-webkit-progress-bar, .challenge progress::-webkit-progress-bar { background: var(--color-border); border-radius: 999px; }
.poll-bar::-webkit-progress-value, .challenge progress::-webkit-progress-value { background: var(--amber-400); border-radius: 999px; }
.poll-bar::-moz-progress-bar, .challenge progress::-moz-progress-bar { background: var(--amber-400); border-radius: 999px; }
.poll-form fieldset { border: 0; padding: 0; margin: 0 0 var(--space-3); }
.poll-builder { margin: var(--space-4) 0; }
.poll-builder input[type="text"] { width: 100%; margin-bottom: var(--space-2); }
.challenge-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.challenge { display: flex; gap: var(--space-3); padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.challenge.is-done { border-color: var(--color-success); }
.challenge-body { flex: 1; min-width: 0; }
.challenge-body h3 { margin: 0; font-size: var(--text-base); }
.challenge-body .help { margin: var(--space-1) 0 var(--space-3); }
.challenge-figures { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: var(--space-2) 0 0; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.challenge-icon { flex: none; display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-sm); background: var(--color-accent-soft); color: var(--color-text); }
.challenge.is-done .challenge-icon { background: var(--amber-400); color: var(--carbon-950); }
.badge-list { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.badge-list li { display: flex; gap: var(--space-3); align-items: center; }
.badge-list .meta { display: block; color: var(--color-muted); font-size: var(--text-sm); }
.stat-list li { justify-content: space-between; }
.profile-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.project-grid { list-style: none; padding: 0; margin: 0 0 var(--space-5); display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.project-card { position: relative; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); transition: border-color var(--duration) var(--ease); }
.project-card:hover { border-color: var(--color-text); }
.project-card img, .project-cover-empty { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--color-sunk); }
.project-cover-empty { display: grid; place-items: center; color: var(--color-muted); }
.project-card-body { padding: var(--space-3) var(--space-4) var(--space-4); }
.project-card-title { display: block; color: var(--color-text); font-weight: 750; text-decoration: none; overflow-wrap: anywhere; }
.project-card-title::after { content: ""; position: absolute; inset: 0; }
.project-card .meta { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); margin-top: var(--space-2); color: var(--color-muted); font-size: var(--text-sm); }
.project-cover { width: 100%; max-height: 22rem; object-fit: cover; border-radius: var(--radius-lg); margin-bottom: var(--space-4); }
.project-head .meta { color: var(--color-muted); font-size: var(--text-sm); }
.project-journal { list-style: none; padding: 0; margin: var(--space-4) 0; }
.project-journal h3 { margin: var(--space-1) 0; font-size: var(--text-base); }
.before-after { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); margin: var(--space-3) 0; }
.before-after figure { margin: 0; }
.before-after img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); }
.before-after figcaption { margin-top: var(--space-1); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.part-list .meta { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); color: var(--color-muted); font-size: var(--text-sm); }
.part-installed strong { text-decoration: line-through; color: var(--color-muted); }
@media (min-width: 60rem) { .project-layout { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }

/* Salons et rassemblements (Phase 13) */
.fairs .filters .field { margin: 0; }
.fair-list { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: grid; gap: var(--space-3); }
.fair-row { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.fair-row h2, .fair-row h3 { margin: 0 0 var(--space-1); font-size: var(--text-lg); }
.fair-row .help { margin: 0; }
.fair-row-date { margin: 0 0 var(--space-1); font-size: var(--text-sm); font-weight: 650; color: var(--color-muted); }
.fair-head { margin-bottom: var(--space-6); }
.fair-when { display: flex; align-items: center; gap: var(--space-2); font-weight: 650; }
.fair-facts { margin: 0 0 var(--space-4); }
.fair-facts dt { font-size: var(--text-sm); color: var(--color-muted); }
.fair-facts dd { margin: 0 0 var(--space-3); }
.fair-review { margin-top: var(--space-6); }

/* Mentorat (Phase 13) */
.mentor-safety ul { margin: 0; padding-left: 1.2em; }
.mentor-safety { margin-bottom: var(--space-6); }
.mentor-safety h2 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.mentors .filters .field { margin: 0; }
.mentor-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.mentor-card { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.mentor-card h2 { margin: 0 0 var(--space-1); font-size: var(--text-lg); }
.mentor-card p { margin: 0 0 var(--space-2); }
.mentor-card .help { margin: 0; }
.mentor-head { display: flex; gap: var(--space-4); align-items: center; margin-bottom: var(--space-6); }
.mentor-head > div { min-width: 0; }
.mentor-head h1 { margin: 0; overflow-wrap: anywhere; }
.mentor-intro { white-space: normal; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0 var(--space-4); }

/* Clubs et associations (Phase 13) */
.clubs .filters .field { margin: 0; }
.club-list { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: grid; gap: var(--space-3); }
.club-row { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.club-row > div { min-width: 0; }
.club-row h2, .club-row h3 { margin: 0 0 var(--space-1); font-size: var(--text-lg); overflow-wrap: anywhere; }
.club-row .help { margin: 0; }
.club-head { display: flex; gap: var(--space-4); align-items: center; margin-bottom: var(--space-6); }
.club-head > div { min-width: 0; }
.club-head h1 { margin: 0 0 var(--space-1); overflow-wrap: anywhere; }
.club-head .help { margin: 0; }
.club-members { margin-top: var(--space-6); }
.member-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.member-list li { display: flex; gap: var(--space-3); align-items: flex-start; }
.member-list .actions { margin-top: var(--space-2); }
.split aside h2.hub-section { font-size: var(--text-2xs); margin-top: var(--space-6); }
.clubs .filters .field { flex: 1 1 14rem; }
.clubs .filters input[type="search"] { flex: none; width: 100%; }
.form-page h1 + .help { margin-bottom: var(--space-6); }

/* ==========================================================================
   Petites annonces et profils vérifiés (Phase 14)
   Mêmes cartes que l'annuaire et les motos volées ; le prix reprend le chiffre tabulaire, le badge de profil vérifié
   le vert des succès (jamais l'ambre, réservé à l'action).
   ========================================================================== */
.listing-thumb { width: 6rem; height: 6rem; object-fit: cover; border-radius: var(--radius); flex-shrink: 0; background: var(--color-surface-2); }
.listing-card .price { margin: 0; font-variant-numeric: tabular-nums; }
.price.large { font-size: var(--text-lg); margin: var(--space-1) 0; }
.listing-photos { margin-bottom: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.listing-photos form { margin-top: var(--space-2); }
.listing-filters { margin-bottom: var(--space-5); }
.listing-filters .field { margin-bottom: var(--space-2); }
.listings-layout { margin-top: var(--space-5); }
.listing-tips { margin-bottom: var(--space-5); }
.listing-tips ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.queue-reason { list-style: none; margin: calc(var(--space-2) * -1) 0 var(--space-4); padding-left: var(--space-2); }
.verified-badge { display: inline-flex; align-items: center; gap: var(--space-1); }
.verified-badge svg { width: 1em; height: 1em; }
.verified-method { font-weight: 400; }
.profile-verified { margin: var(--space-1) 0 var(--space-2); }
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { padding: var(--space-1) 0 var(--space-1) var(--space-5); position: relative; }
.checklist li::before { content: "○"; position: absolute; left: 0; color: var(--color-muted); }
.checklist li.done::before { content: "●"; color: var(--color-success); }

/* ==========================================================================
   Back-office (Phase 15)
   Sobre : mêmes onglets, tableaux et panneaux que le reste du site ; seuls les totaux à traiter ont un accent.
   ========================================================================== */
.admin-page .tabs { margin-bottom: var(--space-5); }
.admin-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--space-3); }
.admin-stats li { border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
.admin-stats li.has-items { border-color: var(--color-warning); background: var(--color-warning-soft); }
.admin-stats a { display: block; padding: var(--space-3) var(--space-4); text-decoration: none; }
.admin-stats .num { display: block; font-size: var(--text-lg); font-weight: 800; font-variant-numeric: tabular-nums; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.audit-meta { font-size: var(--text-2xs); word-break: break-all; }

/* Balades : une couleur par trace, reprise par la carte (route.js) */
.tour-traces { list-style: none; padding: 0; margin: 0 0 var(--space-5); display: grid; gap: var(--space-2); }
.tour-traces li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md, 0.5rem); }
.tour-traces .title { font-weight: 700; }
.trace-dot { width: 0.875rem; height: 0.875rem; border-radius: 50%; flex-shrink: 0; background: var(--trace); }
.trace-c0 { --trace: #f29d00; } .trace-c1 { --trace: #2f7fd1; } .trace-c2 { --trace: #2e9e6b; }
.trace-c3 { --trace: #c9455f; } .trace-c4 { --trace: #8a5cc9; } .trace-c5 { --trace: #d1622f; }
.tour-page .route-preview { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-2); }
.plain-list { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: grid; gap: var(--space-2); }

/* Recadrage des photos avant envoi */
.crop-dialog { border: 1px solid var(--color-border); border-radius: var(--radius-lg, 12px); background: var(--color-surface); color: var(--color-text, inherit); padding: var(--space-5); max-width: min(92vw, 26rem); }
.crop-dialog::backdrop { background: rgb(0 0 0 / 0.6); }
.crop-canvas { display: block; max-width: 100%; margin: 0 auto var(--space-4); border-radius: var(--radius-md, 8px); touch-action: none; cursor: grab; background: #000; }
.crop-canvas:active { cursor: grabbing; }
.crop-dialog input[type="range"] { width: 100%; margin-bottom: var(--space-4); }
.crop-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; }