/* Malin de l'Auto — Design System "Carte Grise" v3 (papier chaud, un seul accent rouille) */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,700;0,9..40,800;1,9..40,500&family=DM+Mono:wght@400;500&display=swap');

:root {
    /* Un seul accent de marque : rouille/feu arrière, plus chaud que l'orange signalétique
       de la v2. Toujours quasi-monochrome -- pas de duo décoratif. */
    --ember: #C1532E;

    /* Thème clair (jour) : papier chaud façon carte grise, plutôt que le gris froid
       Apple de la v2. */
    --accent: var(--ember);
    --accent-hover: #A8431F;
    --accent-contrast: #FFFBF3;
    --accent-tint: #F3DCC9;
    --bg-app: #F5EFE2;
    --card: #FFFDF8;
    --border: #E4D9C5;
    --border-strong: #D2C3A8;
    --ink: #211A12;
    --muted: #8A7C68;
    --muted-2: #B9AC94;
    --danger: #A6323F;
    --danger-bg: #F3E1DE;
    --success: #4B7A3B;
    --success-bg: #E4ECDA;
    --warn: #A9791F;
    --warn-bg: #F2E7CE;
    --info: #3D6E8C;
    --info-bg: #DDE8ED;
    --surface-soft: #EFE7D6;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;

    /* Rampe utilisée par le graphique de répartition des scores (stats.html) --
       rouge -> rouille -> jaune -> vert olive -> vert, en cohérence avec les seuils
       danger/warn/success plutôt que des couleurs choisies au hasard. */
    --scale-1: #A6323F;
    --scale-2: #C1673A;
    --scale-3: #A9791F;
    --scale-4: #6B8A3E;
    --scale-5: #4B7A3B;
}

/* ---------- Thème sombre (nuit) ---------- */
:root[data-theme="dark"] {
    --ember: #E2703F;
    --accent-hover: #EF8354;
    --accent-contrast: #17130D;
    --accent-tint: #3A2415;
    --bg-app: #17130D;
    --card: #241E15;
    --border: #332B1F;
    --border-strong: #463C2A;
    --ink: #F3ECDD;
    --muted: #A2937A;
    --muted-2: #6B6048;
    --danger: #E2685C;
    --danger-bg: #3A211C;
    --success: #7FAF5C;
    --success-bg: #223420;
    --warn: #E0B94E;
    --warn-bg: #3A2F14;
    --info: #6FA8C4;
    --info-bg: #1E2E36;
    --surface-soft: #1F1911;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;

    --scale-1: #E2685C;
    --scale-2: #E2934F;
    --scale-3: #E0B94E;
    --scale-4: #9BC15E;
    --scale-5: #7FAF5C;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3A3A3C; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #4A4A4C; }
[data-theme="dark"] .section-head { background: #111111; }
[data-theme="dark"] .pill-input { background: #111111; }
[data-theme="dark"] .pill-input:focus { background: #1C1C1E; }
[data-theme="dark"] .select-wrap select.pill-input option { background: #1C1C1E; }
[data-theme="dark"] .btn-outline:hover { background: #202022; border-color: #3A3A3C; }

html, body {
    background: var(--bg-app);
    color: var(--ink);
    letter-spacing: -.01em;
}

html, body, .section-head, .icon-badge, .badge {
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

body, * {
    font-family: 'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
    font-weight: 500;
}

h1, h2, h3 { letter-spacing: -.01em; }

/* Ultrabold condensé, réservé aux titres/gros chiffres qui doivent porter du poids
   structurel -- pas de police à outrance ailleurs. */
.font-display {
    font-family: 'Anton', ui-sans-serif, system-ui, sans-serif;
    font-weight: 400;
    letter-spacing: .01em;
    line-height: .95;
}

/* Chiffres qui doivent s'aligner en colonne ou porter un aspect "relevé technique" --
   prix, kilométrage, scores. DM Mono plutôt que DM Sans pour ces valeurs précises. */
.font-num {
    font-family: 'DM Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D1D1D6; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #C2C2C7; }

/* ---------- Sidebar (réactive au thème -- avant : toujours sombre avec un halo ember,
   indépendamment du mode jour/nuit choisi pour le reste de l'app) ---------- */
.sidebar {
    background: var(--card);
    border-right: 1px solid var(--border);
}

.brand-title {
    color: var(--ink);
    font-weight: 700;
    letter-spacing: -.01em;
}

.nav-section-label {
    font-size: .66rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 500;
    padding: 0 .9rem;
    margin: 1.6rem 0 .55rem;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem .9rem;
    border-radius: .9rem;
    color: var(--muted);
    font-weight: 500;
    font-size: .875rem;
    border-left: 3px solid transparent;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.nav-item:hover { background: var(--surface-soft); color: var(--ink); }
.nav-item.active {
    background: var(--surface-soft);
    color: var(--ink);
    border-left-color: var(--ember);
    font-weight: 600;
}
.nav-item svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }

/* ---------- Avatar (initiales) + bloc utilisateur du bas de sidebar ---------- */
.avatar {
    width: 2rem; height: 2rem;
    border-radius: 999px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: .7rem; font-weight: 700; color: var(--ink);
    flex-shrink: 0;
}
.sidebar-user {
    display: flex; align-items: center; gap: .6rem;
    padding: .6rem .5rem;
    border-top: 1px solid var(--border);
    margin-top: .4rem;
    margin-bottom: .5rem;
}
.sidebar-user-email {
    font-size: .78rem; color: var(--muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.theme-toggle-btn-sidebar {
    width: 2.2rem; height: 2.2rem;
    margin: 0 auto .3rem;
}

/* ---------- Icon button (notifications, etc. dans la topbar) ---------- */
.icon-btn {
    position: relative;
    width: 2.6rem; height: 2.6rem;
    border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--ink);
    cursor: pointer; flex-shrink: 0;
    transition: background-color .15s ease, border-color .15s ease;
}
.icon-btn:hover { background: var(--surface-soft); }
.icon-btn svg { width: 1.15rem; height: 1.15rem; }
.icon-btn-dot {
    position: absolute; top: -2px; right: -2px;
    background: var(--ember); color: #fff;
    font-size: .65rem; font-weight: 700;
    min-width: 1.15rem; height: 1.15rem; border-radius: 999px;
    display: flex; align-items: center; justify-content: center; padding: 0 3px;
}

/* ---------- Barre de recherche de la topbar ---------- */
.topbar-search {
    display: flex; align-items: center; gap: .5rem;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: .8rem;
    padding: .55rem .9rem;
    width: 220px;
}
.topbar-search svg { width: .9rem; height: .9rem; color: var(--muted); flex-shrink: 0; }
.topbar-search input {
    border: none; background: transparent; outline: none;
    font-size: .85rem; color: var(--ink); width: 100%;
    font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
}
@media (max-width: 860px) { .topbar-search { display: none; } }

/* ---------- Cards / surfaces ---------- */
.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    box-shadow: none;
    transition: border-color .2s ease, background-color .25s ease, color .25s ease, transform .2s ease;
}

/* Sans ombres, le retour visuel au survol vient d'un léger décollement +
   d'une bordure qui se teinte d'ember plutôt que d'une élévation classique. */
.card-interactive:hover {
    border-color: var(--ember);
    transform: translateY(-3px);
}

.card-hero {
    background: var(--ember);
    color: #FFFFFF;
    border-radius: 1.5rem;
    box-shadow: none;
}

.section-head {
    background: #EFEEE9;
    border-bottom: 1px solid var(--border);
}

/* ---------- Labels ---------- */
.field-label {
    font-size: .7rem;
    font-weight: 500;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* ---------- Inputs / selects ---------- */
.pill-input {
    background: #EDECE7;
    border: 1px solid var(--border);
    border-radius: 6.25rem;
    padding: .6rem 1.1rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--ink);
    outline: none;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, color .25s ease;
}
.pill-input:focus { border-color: var(--ember); background: var(--card); box-shadow: 0 0 0 4px rgba(193,83,46,.15); }

.select-wrap { position: relative; }
.select-wrap select.pill-input {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.4rem;
    cursor: pointer;
    width: 100%;
}
.select-wrap select.pill-input option { background: var(--card); color: var(--ink); }
.select-wrap .select-icon {
    position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
    color: var(--muted); pointer-events: none; width: 1rem; height: 1rem;
}
.select-wrap.has-icon select.pill-input { padding-left: 2.5rem; }
.select-wrap .chevron {
    position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
    pointer-events: none; color: var(--muted-2); width: .85rem; height: .85rem;
}

input[type="range"].accent-range {
    accent-color: var(--ember);
    background: var(--border);
    height: 6px;
    border-radius: 999px;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .875rem; font-weight: 500;
    border-radius: 999px;
    padding: .7rem 1.35rem;
    transition: transform .12s ease, background .15s ease, opacity .12s ease, color .25s ease, border-color .25s ease;
    white-space: nowrap;
}
.btn:active { transform: scale(.98); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }

.btn-accent {
    background: var(--ember);
    color: var(--accent-contrast);
    box-shadow: none;
}
.btn-accent:hover { background: var(--accent-hover); }
.btn-accent:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.btn-outline {
    background: transparent;
    border: 1.5px solid var(--ink);
    border-radius: 999px;
    color: var(--ink);
    box-shadow: none;
}
.btn-outline:hover { background: var(--surface-soft); }

.btn-ghost {
    background: transparent;
    color: var(--muted);
    font-weight: 500;
}
.btn-ghost:hover { color: var(--ink); background: rgba(0,0,0,.05); }

.icon-chip {
    width: 1.6rem; height: 1.6rem;
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.12);
    margin-right: .55rem;
}
.icon-chip svg { width: .9rem; height: .9rem; }

/* ---------- Badges ---------- */
.badge { display:inline-flex; align-items:center; gap:.25rem; font-size: .7rem; font-weight: 500; border-radius: 999px; padding: .25rem .65rem; }
.badge-good { background: var(--success-bg); color: var(--success); }
.badge-mid  { background: var(--warn-bg); color: var(--warn); }
.badge-low  { background: var(--danger-bg); color: var(--danger); }
.badge svg { width: .7rem; height: .7rem; }

.score-dot {
    display: flex; align-items: center; justify-content: center;
    font-family: 'DM Mono', ui-monospace, monospace; font-weight: 500;
    font-variant-numeric: tabular-nums;
    border: 2px solid currentColor;
    box-shadow: none;
}
.score-good { color: var(--success); }
.score-mid  { color: var(--warn); }
.score-low  { color: var(--danger); }

/* Variante utilisée quand le badge repose sur une photo (grille du dashboard) : un
   simple contour transparent serait illisible sur une image de couleur variable,
   donc fond semi-opaque + flou au lieu de l'aplat saturé qu'il y avait avant. */
.score-dot-overlay {
    border-width: 2px;
    background: rgba(10,9,8,.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ---------- Bandeau de stats à hairlines (remplace les cards à icônes colorées) ---------- */
.stat-strip { display: flex; border: 1px solid var(--border); border-radius: 1.5rem; overflow: hidden; }
.stat-col { flex: 1; padding: 24px 28px; position: relative; min-width: 0; }
.stat-col + .stat-col { border-left: 1px solid var(--border); }
@media (max-width: 768px) {
    .stat-strip { flex-wrap: wrap; border-radius: 1.25rem; }
    .stat-col { flex: 1 1 50%; border-left: none !important; }
    .stat-col:nth-child(odd) { border-right: 1px solid var(--border); }
    .stat-col:nth-child(n+3) { border-top: 1px solid var(--border); }
}

/* ---------- Barre de filtres : hairline au lieu d'une card encadrée ---------- */
.filter-toolbar { border-bottom: 1px solid var(--border); padding-bottom: 22px; }

/* ---------- Contrôle segmenté (ex: filtre source) ---------- */
.segmented { display: inline-flex; background: var(--surface-soft); border: 1px solid var(--border); border-radius: .8rem; padding: 3px; gap: 2px; flex-wrap: wrap; }
.segmented button { border: none; background: transparent; font-size: .8rem; font-weight: 600; padding: .5rem .9rem; border-radius: .55rem; color: var(--muted); cursor: pointer; white-space: nowrap; }
.segmented button.active { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.15); }

/* ---------- Bascule vue cards / vue liste ---------- */
.view-toggle { display: inline-flex; background: var(--surface-soft); border: 1px solid var(--border); border-radius: .7rem; padding: 3px; gap: 2px; flex-shrink: 0; }
.view-toggle button { border: none; background: transparent; width: 2.3rem; height: 2.1rem; display: flex; align-items: center; justify-content: center; border-radius: .5rem; color: var(--muted); cursor: pointer; }
.view-toggle button svg { width: 1.05rem; height: 1.05rem; }
.view-toggle button.active { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.15); }

/* ---------- Vue liste dense des annonces (alternative à la grille de cards) ---------- */
.listing-row-grid { display: grid; grid-template-columns: 56px minmax(0,1fr) 100px 60px 150px 110px 64px; gap: 16px; align-items: center; }
.listing-row-head { padding: 10px 6px; border-bottom: 1px solid var(--border); }
.listing-row-head span { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.listing-row { padding: 10px 6px; border-bottom: 1px solid var(--border); transition: background-color .15s ease; }
.listing-row:last-child { border-bottom: none; }
.listing-row:hover { background: var(--surface-soft); }
.listing-row-thumb { width: 56px; height: 42px; border-radius: .55rem; object-fit: cover; background: var(--surface-soft); display: block; flex-shrink: 0; }
.listing-row-title { font-weight: 700; font-size: .87rem; line-height: 1.25; }
.listing-row-meta { font-size: .76rem; color: var(--muted); margin-top: 2px; }
.listing-row .score-dot { width: 2.1rem; height: 2.1rem; font-size: .85rem; flex-shrink: 0; }
@media (max-width: 860px) {
    .listing-row-grid { grid-template-columns: 48px minmax(0,1fr) 80px 48px; }
    .listing-row-head span:nth-child(5), .listing-row-head span:nth-child(6), .listing-row-head span:nth-child(7),
    .listing-row-grid > *:nth-child(5), .listing-row-grid > *:nth-child(6), .listing-row-grid > *:nth-child(7) { display: none; }
}

.text-muted { color: var(--muted); }

.scrollbar-hide::-webkit-scrollbar { display: none; }

/* ---------- Media zoom ---------- */
.img-zoom { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.img-zoom-wrap:hover .img-zoom { transform: scale(1.06); }

/* ---------- Module de recherche du dashboard ----------
   Les critères courants tiennent sur une ligne ; les critères avancés vivent dans un
   <details> replié, pour que la page reste complète sans paraître chargée. */
.search-module { background: var(--card); border: 1px solid var(--border); border-radius: 1.25rem; padding: 18px 20px; }
.search-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.search-field { flex: 1 1 150px; min-width: 140px; }
.search-field-wide { flex: 1 1 100%; }
.search-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

.search-more { margin-top: 4px; }
.search-more summary {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 14px; padding: 6px 0;
    font-size: .82rem; font-weight: 600; color: var(--muted);
    cursor: pointer; list-style: none;
}
.search-more summary::-webkit-details-marker { display: none; }
.search-more summary:hover { color: var(--ink); }
.search-more[open] summary { color: var(--ink); }
.search-more-count {
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--ember); background: var(--accent-tint); padding: 2px 8px; border-radius: 999px;
}
.search-more-chevron { transition: transform .2s ease; }
.search-more[open] .search-more-chevron { transform: rotate(180deg); }
.search-more-body {
    display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end;
    padding-top: 16px; margin-top: 4px;
    border-top: 1px solid var(--border);
}

@media (max-width: 700px) {
    .search-field { flex: 1 1 100%; }
    .search-actions { width: 100%; }
    .search-actions .btn { flex: 1; justify-content: center; }
}

/* ---------- Blocs repliables (Paramètres) ---------- */
.fold { background: var(--card); border: 1px solid var(--border); border-radius: 1.25rem; overflow: hidden; }
.fold + .fold { margin-top: 1.5rem; }
.fold > summary {
    display: flex; align-items: center; gap: 10px;
    padding: 1rem 1.5rem; cursor: pointer; list-style: none;
    background: var(--section-head-bg, var(--surface-soft));
    font-size: 1rem; font-weight: 700;
    transition: background-color .15s ease;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary:hover { background: var(--bg-hover, var(--surface-soft)); }
.fold > summary .fold-icon { width: 1.25rem; height: 1.25rem; color: var(--accent); flex-shrink: 0; }
.fold > summary .fold-chevron {
    width: 1.1rem; height: 1.1rem; margin-left: auto; color: var(--muted);
    transition: transform .2s ease; flex-shrink: 0;
}
.fold[open] > summary .fold-chevron { transform: rotate(180deg); }
.fold-body { padding: 1.5rem; border-top: 1px solid var(--border); }

/* ---------- Navigation de l'espace d'administration ---------- */
.admin-nav {
    display: flex; flex-wrap: wrap; gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 28px;
}
.admin-nav a {
    padding: .6rem 1rem;
    font-size: .875rem; font-weight: 600; color: var(--muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
}
.admin-nav a:hover { color: var(--ink); }
.admin-nav a.active { color: var(--ember); border-bottom-color: var(--ember); }

/* ---------- Menu "plus d'actions" du dashboard (regroupe les actions secondaires) ---------- */
.dashboard-more-menu { position: relative; }
.dashboard-more-menu summary { list-style: none; }
.dashboard-more-menu summary::-webkit-details-marker { display: none; }
.dashboard-more-menu[open] summary { border-color: var(--ember); color: var(--ember); }
.dashboard-more-panel {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 20;
    background: var(--card); border: 1px solid var(--border); border-radius: 1rem;
    box-shadow: var(--shadow-lg, 0 10px 24px rgba(15,12,8,.12));
    padding: 6px; min-width: 210px;
    display: flex; flex-direction: column; gap: 2px;
}
.dashboard-more-panel a, .dashboard-more-panel button {
    display: flex; align-items: center; gap: 10px;
    padding: .6rem .7rem; border-radius: .6rem;
    font-size: .85rem; font-weight: 500; color: var(--ink);
    background: none; border: none; text-align: left; width: 100%; cursor: pointer;
    white-space: nowrap;
}
.dashboard-more-panel a:hover, .dashboard-more-panel button:hover { background: var(--surface-soft); }

/* ---------- Bouton favori (étoile) ---------- */
.favori-btn { color: var(--ink); transition: color .15s ease, transform .15s ease; }
.favori-btn:hover { transform: scale(1.08); }
.favori-btn.is-saved { color: var(--ember); }
/* Variante posée sur la vignette blanche (grille du dashboard) : fond fixe indépendant
   du thème, donc l'icône doit rester sombre par défaut plutôt que suivre --ink (qui
   passerait presque blanc en thème sombre, invisible sur ce fond clair). */
.favori-btn-chip { color: #14150F; }
.favori-btn-chip.is-saved { color: var(--ember); }

/* ---------- Divider ---------- */
.hr { border-top: 1px solid var(--border); }

/* ---------- Theme toggle ---------- */
.theme-toggle-btn {
    position: relative;
    width: 2.6rem; height: 2.6rem;
    border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    background: var(--card);
    border: 1px solid var(--border-strong);
    box-shadow: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color .25s ease, border-color .25s ease;
}
.theme-toggle-btn svg {
    position: absolute;
    width: 1.2rem; height: 1.2rem;
    color: var(--ink);
    transition: transform .5s cubic-bezier(.4,0,.2,1), opacity .35s ease;
}
.theme-toggle-btn .icon-sun { opacity: 0; transform: rotate(-100deg) scale(.4); color: var(--ember); }
.theme-toggle-btn .icon-moon { opacity: 1; transform: rotate(0deg) scale(1); }
[data-theme="light"] .theme-toggle-btn .icon-sun { opacity: 1; transform: rotate(0deg) scale(1); }
[data-theme="light"] .theme-toggle-btn .icon-moon { opacity: 0; transform: rotate(100deg) scale(.4); }


/* =====================================================================
   PAGE D'ACCUEIL PUBLIQUE (home.html) — navbar pilule + hero vidéo
   ===================================================================== */

.home-body {
    background: var(--bg-app);
    color: var(--ink);
}

.home-navbar-wrap {
    position: fixed;
    top: 20px; left: 0; right: 0;
    z-index: 30;
    display: flex; justify-content: center;
    padding: 0 20px;
}
.home-navbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px;
    width: 100%; max-width: 1040px;
    background: rgba(247,246,242,.85);
    backdrop-filter: blur(10px);
    border-radius: 999px;
    padding: 10px 10px 10px 24px;
}
:root[data-theme="dark"] .home-navbar { background: rgba(28,28,30,.85); }
.home-navbar-links { display: flex; align-items: center; gap: 24px; }
.home-navbar-links a:not(.btn) {
    color: var(--ink); font-size: .9rem; font-weight: 500; opacity: .68;
}
.home-navbar-links a:not(.btn):hover { opacity: 1; }
.home-navbar-links a.active:not(.btn) { opacity: 1; color: var(--ember); }
.home-navbar-logo { font-family: 'Anton', sans-serif; font-size: 1.15rem; letter-spacing: .02em; color: var(--ink); }
.home-nav-burger {
    display: none;
    background: transparent; border: none; color: var(--ink);
    padding: 8px; cursor: pointer;
}

@media (max-width: 780px) {
    .home-nav-burger { display: flex; }
    .home-navbar-links {
        display: none;
        position: absolute; top: calc(100% + 10px); left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 4px;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 1.5rem;
        padding: 14px;
    }
    .home-navbar-links.open { display: flex; }
    .home-navbar-links a:not(.btn) { padding: 10px 14px; border-radius: 999px; }
    .home-navbar-links a:not(.btn):hover { background: var(--surface-soft); }
    .home-navbar { position: relative; }
    .home-navbar-links .btn { justify-content: center; margin-top: 6px; }
}

/* ---------- Hero (halftone + carte flottante, remplace l'ancien hero vidéo) ---------- */
.home-hero {
    position: relative; z-index: 1;
    max-width: 1200px; margin: 0 auto;
    padding: 150px 40px 70px;
    display: flex; gap: 60px; align-items: center; flex-wrap: wrap;
    isolation: isolate;
}
.home-hero-halftone {
    position: absolute; inset: -40px 0 auto 0; height: 560px; z-index: -1;
    background-image: radial-gradient(circle, rgba(20,17,13,.35) 1.6px, transparent 1.6px);
    background-size: 11px 11px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 90%);
    mask-image: linear-gradient(180deg, #000 0%, transparent 90%);
}
:root[data-theme="dark"] .home-hero-halftone {
    background-image: radial-gradient(circle, rgba(255,255,255,.3) 1.6px, transparent 1.6px);
}
.home-hero-text { flex: 1 1 480px; min-width: 320px; }
.home-hero-text h1 {
    font-family: 'Anton', sans-serif; font-weight: 400;
    font-size: clamp(40px, 5.6vw, 80px); line-height: .95;
    letter-spacing: .01em; margin: 0 0 26px;
}
.home-hero-sub { font-size: 1.05rem; line-height: 1.6; color: var(--muted); max-width: 480px; margin: 0 0 38px; }
.home-hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }

.home-hero-card-wrap { flex: 1 1 380px; min-width: 320px; position: relative; height: 440px; }
.home-parallax { position: absolute; inset: 0; transition: transform .15s ease-out; }
.home-float-card {
    position: absolute; width: 320px;
    background: var(--card); border: 1px solid var(--border);
    border-radius: 1.5rem; padding: 22px;
    left: 20%; top: 6%;
    animation: homeFloat 6s ease-in-out infinite;
}
.home-float-card-2 {
    width: 220px; left: auto; right: 0; top: auto; bottom: 0;
    background: var(--surface-soft); border-radius: 1.25rem;
    opacity: .98; transform: rotate(4deg); animation: homeFloat2 6.5s ease-in-out infinite; z-index: 0;
}
@keyframes homeFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes homeFloat2 { 0%, 100% { transform: translateY(0) rotate(4deg); } 50% { transform: translateY(12px) rotate(4deg); } }
.home-float-card-photo {
    width: 100%; height: 130px; border-radius: 1rem; margin-bottom: 16px;
    background: var(--surface-soft); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
}
.home-float-card-photo svg { width: 2.4rem; height: 2.4rem; color: var(--muted); }
.home-float-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.home-float-card-title { font-weight: 700; font-size: .95rem; }
.home-score-pill {
    font-family: 'DM Mono', ui-monospace, monospace; font-weight: 500; font-size: .9rem; color: var(--success);
    width: 2.2rem; height: 2.2rem; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid currentColor;
}
.home-float-card-meta { font-size: .8rem; color: var(--muted); margin-top: 8px; font-family: 'DM Mono', ui-monospace, monospace; }
.home-float-card-price { font-family: 'DM Mono', ui-monospace, monospace; font-weight: 500; font-size: 1.6rem; margin-top: 14px; letter-spacing: 0; }
.home-float-card-margin { font-size: .8rem; font-weight: 700; color: var(--success); margin-top: 4px; }
.home-float-card-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.home-float-card-stat { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.home-float-card-stat b { display: block; font-family: 'DM Mono', ui-monospace, monospace; font-size: .85rem; color: var(--ink); font-weight: 500; text-transform: none; letter-spacing: 0; margin-top: 2px; }

/* ---------- Douleur / solution (Sans vs Avec) ---------- */
.home-duel { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 1000px; margin: 0 auto; }
.home-duel-col { border-radius: 1.5rem; padding: 30px 28px; border: 1px solid var(--border); }
.home-duel-without { background: var(--surface-soft); }
.home-duel-with { background: var(--card); border: 2px solid var(--ember); }
.home-duel-label { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 22px; }
.home-duel-without .home-duel-label { color: var(--muted); }
.home-duel-with .home-duel-label { color: var(--ember); }
.home-duel-row { padding: 16px 0; border-top: 1px solid var(--border); }
.home-duel-row:first-of-type { border-top: none; padding-top: 0; }
.home-duel-tag { display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 6px; }
.home-duel-with .home-duel-tag { color: var(--ember); }
.home-duel-row p { font-size: .88rem; line-height: 1.55; margin: 0; }
.home-duel-without .home-duel-row p { color: var(--muted); }
@media (max-width: 760px) {
    .home-duel { grid-template-columns: 1fr; }
}

/* ---------- Marquee des sources surveillées ---------- */
.home-sources { position: relative; z-index: 1; padding: 10px 0 70px; }
.home-sources p { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 0 0 22px; }
.home-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); flex-shrink: 0; animation: homeLivePulse 2s ease-in-out infinite; }
@keyframes homeLivePulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(75,122,59,.35); } 50% { opacity: .7; box-shadow: 0 0 0 4px rgba(75,122,59,0); } }
.home-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.home-marquee-track { display: flex; gap: 64px; width: max-content; animation: homeMarquee 16s linear infinite; }
@keyframes homeMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.home-marquee-track span { font-family: 'Anton', sans-serif; font-size: 1.2rem; color: var(--muted); white-space: nowrap; }

/* ---------- Étapes (comment ça marche) ---------- */
.home-step-card { background: var(--card); border: 1px solid var(--border); border-radius: 1.25rem; padding: 32px 28px; transition: transform .25s ease, border-color .25s ease; }
.home-step-card:hover { transform: translateY(-4px); border-color: var(--ember); }
.home-step-num { font-weight: 800; font-size: .85rem; color: var(--ember); margin-bottom: 16px; }
.home-step-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.home-step-icon { width: 2.4rem; height: 2.4rem; flex-shrink: 0; border-radius: .7rem; background: var(--surface-soft); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; }
.home-step-icon svg { width: 1.15rem; height: 1.15rem; color: var(--ink); }

/* ---------- Le score expliqué ---------- */
.home-score-explainer { display: grid; grid-template-columns: 300px 1fr; gap: 40px; max-width: 900px; margin: 0 auto; align-items: start; }
.home-score-explainer-card { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: 1.5rem; padding: 24px; }
.home-score-explainer-tag { position: absolute; top: -11px; left: 20px; background: var(--ember); color: var(--accent-contrast); font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 3px 10px; border-radius: 999px; }
.home-score-explainer-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.home-score-explainer-margin { border-top: 1px solid var(--border); padding-top: 16px; display: flex; flex-direction: column; gap: 4px; }
.home-score-explainer-margin span { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.home-score-explainer-margin strong { font-family: 'DM Mono', ui-monospace, monospace; font-weight: 500; font-size: 1.3rem; color: var(--success); }
.home-score-explainer-margin strong small { font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: .75rem; color: var(--muted); }
.home-score-explainer-list { display: flex; flex-direction: column; gap: 22px; }
.home-score-explainer-item { display: flex; gap: 14px; align-items: flex-start; }
.home-score-explainer-icon { width: 2.1rem; height: 2.1rem; flex-shrink: 0; border-radius: .65rem; background: var(--surface-soft); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--ember); }
@media (max-width: 760px) {
    .home-score-explainer { grid-template-columns: 1fr; }
}

/* ---------- CTA final ---------- */
.home-final-cta {
    position: relative; z-index: 1; max-width: 900px; margin: 40px auto 0; padding: 84px 40px;
    text-align: center; background: var(--ember);
    border-radius: 1.75rem; color: #fff; overflow: hidden; isolation: isolate;
}
.home-final-cta::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background-image: radial-gradient(circle, rgba(255,255,255,.35) 1.6px, transparent 1.6px);
    background-size: 13px 13px; opacity: .5;
}
.home-final-cta h2 { font-weight: 800; letter-spacing: -.02em; font-size: clamp(28px, 4vw, 48px); margin: 0 0 30px; line-height: 1.05; }

@media (max-width: 860px) {
    .home-hero { flex-direction: column; text-align: center; padding-top: 130px; }
    .home-hero-text { min-width: 0; }
    .home-hero-sub { margin-left: auto; margin-right: auto; }
    .home-hero-ctas { justify-content: center; }
    .home-hero-card-wrap { height: 360px; width: 100%; }
}

/* Texture halftone -- signature de marque, neutre (avant : aplat violet, seule trace
   du duo ember/violet décoratif hors des dégradés déjà retirés ailleurs). */
.home-halftone {
    background-image: radial-gradient(circle, rgba(20,17,13,.35) 1.6px, transparent 1.6px);
    background-size: 9px 9px;
    background-color: var(--surface-soft);
}
:root[data-theme="dark"] .home-halftone {
    background-image: radial-gradient(circle, rgba(255,255,255,.3) 1.6px, transparent 1.6px);
}

.home-section {
    max-width: 1280px;
    margin: 0 auto;
    padding: 80px 40px;
}

.home-stat-card {
    background: var(--ember);
    color: #FFFFFF;
    border-radius: 1.25rem;
    padding: 40px;
}
.home-stat-card .home-stat-number {
    font-family: 'Anton', sans-serif;
    font-size: 4rem;
    line-height: 1;
}
.home-stat-card .home-stat-label {
    font-size: .85rem;
    font-weight: 500;
    opacity: .9;
    margin-top: 8px;
}

.home-content-card {
    /* background-color (pas le raccourci "background") : la version courte réinitialise
       aussi background-image, ce qui écrasait silencieusement le motif de .home-halftone
       sur les cartes qui cumulent les deux classes -- la carte "Étape 2" ne montrait donc
       jamais son fond, juste du texte blanc sur fond uni. */
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    padding: 40px;
}

.home-tag {
    display: inline-flex;
    background: var(--surface-soft);
    color: var(--ink);
    border: 1px solid var(--border);
    font-size: .75rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 4px 12px;
}

.home-footer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 40px 50px;
    border-top: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    color: var(--muted);
    font-size: .8rem;
}
.home-footer-logo { font-family: 'Anton', sans-serif; font-size: 1rem; color: var(--ink); order: 1; }
.home-footer-links {
    display: flex; justify-content: center; gap: 20px;
    flex-wrap: wrap;
    order: 2;
}
.home-footer-links a { color: var(--muted); font-size: .8rem; }
.home-footer-links a:hover { color: var(--ink); }
.home-footer small { font-size: .8rem; color: var(--muted); order: 3; }
@media (max-width: 640px) {
    .home-footer { flex-direction: column; text-align: center; }
    .home-footer-logo, .home-footer small { order: initial; }
}

/* ---------- Scroll reveal (pages publiques) ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.revealed { opacity: 1; transform: translateY(0); }

/* ---------- Auth pages (connexion / inscription) ---------- */
.home-auth-section {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 140px 20px 60px;
}
.home-auth-card {
    width: 100%; max-width: 420px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 1.5rem;
    padding: 44px;
}
.home-auth-divider {
    display: flex; align-items: center; gap: 12px;
    margin: 22px 0;
    color: var(--muted);
    font-size: .8rem;
}
.home-auth-divider::before, .home-auth-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--border);
}

/* ---------- Feature checklists (pricing page) ---------- */
.home-feature-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.home-feature-list li {
    font-size: .875rem;
    padding-left: 26px;
    position: relative;
}
.home-feature-list li::before {
    content: '✓';
    position: absolute; left: 0; top: 0;
    color: var(--ember);
    font-weight: 700;
}