/* ════════════════════════════════════════════════════════════════
   DASCAFF — Coquille partagée (ticker + header + footer)
   ────────────────────────────────────────────────────────────────
   Source unique de la DA « redesign accueil » réutilisée sur toutes
   les pages vitrine pour garantir l'uniformité (logo texte, ticker,
   nav, footer). À inclure dans <head>, avant le <style> inline de la
   page. Les fonctions JS attendues (handleProfileClick, openLegal…)
   restent définies par chaque page ; ici uniquement la présentation.
   Le remplissage du ticker est assuré par dascaff-chrome.js.
   ════════════════════════════════════════════════════════════════ */

/* Honeypot anti-spam : champ-leurre hors écran (rempli seulement par les bots).
   Off-screen plutôt que display:none pour que les bots le « voient » et le remplissent. */
.ds-hp { position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden; opacity:0; }

/* Variables de la DA accueil manquantes sur les pages vitrine.
   --navy / --flame ont déjà les mêmes valeurs : redéclaration inoffensive. */
:root {
  --navy:  #0B2340;
  --nvy2:  #173358;
  --nvy3:  #2A4F7C;
  --flame: #C84B0F;
  --flm2:  #A33D0C;
  --active: var(--navy);      /* FOND actif/sélectionné = navy clair (texte blanc dessus) */
  --active-fg: var(--navy);   /* TEXTE actif = navy en clair (→ orange lisible en sombre) */
  --flame-fg: var(--flame);   /* TEXTE orange accent = flame en clair (→ éclairci en sombre) */
  /* ════ COUCHE SÉMANTIQUE — SOURCE UNIQUE DE VÉRITÉ ════
     Décrivent un RÔLE (pas une couleur). Le dark mode ne rebascule QUE ces
     6 lignes (cf. html.dark). Les anciens noms (--white/--ink/--steel/--line)
     en sont désormais des ALIAS → zéro duplication, valeurs identiques. */
  --bg:        #FFFFFF;   /* fond de page */
  --surface:   #FFFFFF;   /* cartes / panneaux */
  --surface-2: #F3F5F9;   /* surface alternée / pilules / hovers */
  --text:      #1A2C3D;   /* texte principal */
  --text-soft: #5C6E84;   /* texte secondaire */
  --border:    #DDE4ED;   /* bordures */
  /* Alias hérités → sémantique (migrer vers les sémantiques ; ne pas étendre) */
  --white: var(--surface);
  --ink:   var(--text);
  --steel: var(--text-soft);
  --line:  var(--border);
  /* Rôles encore distincts */
  --smoke: #F3F5F9;       /* sections alternées claires */
  --mist:  #EDF1F7;       /* panneaux élevés */
  /* Échelle slate (claire) — le dark rebascule dans html.dark. */
  --s400:#94a3b8; --s500:#64748b; --s600:#475569; --s700:#334155;
  /* Palette statut (formulaires/devis) — partagée par toutes les pages chrome. */
  --ok:    #15803D; --ok-bg:#f0fdf4;   --ok-line:#bbf7d0;
  --err:   #ef4444; --err-bg:#fef2f2;  --err-line:#fecaca;
  --warn:  #92400e; --warn-bg:#fffbeb; --warn-line:#fde68a;
  --info:  #2563eb; --info-bg:#eff6ff; --info-line:#dbeafe;
  --violet:#5b21b6; --violet-bg:#ede9fe;--violet-line:#ddd6fe;
}

/* ── TICKER ──────────────────────────────── */
.tk { background: var(--navy); height: 36px; overflow: hidden; display: flex; align-items: center; }
.tk-t { display: flex; white-space: nowrap; animation: tk 52s linear infinite; }
.tk-t:hover { animation-play-state: paused; }
.tk-i { display: inline-flex; align-items: center; gap: 10px; padding: 0 28px;
        font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.68); }
.tk-d { width: 4px; height: 4px; border-radius: 50%; background: var(--flame); flex-shrink: 0; }
@keyframes tk { to { transform: translateX(-50%); } }

/* ── HEADER ──────────────────────────────── */
.hdr { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.96);
       /* PAS de backdrop-filter : le fond est déjà à 96% opaque (le flou ne se
          voyait quasiment pas) et un header STICKY flouté force le navigateur à
          recalculer le flou à CHAQUE frame de scroll → ~20% de frames lâchées
          (mesuré). Le retirer = rendu identique, scroll fluide sur toutes les pages.
          Liseré fin VOLONTAIRE sous le header : gris très clair en clair, fin
          liseré blanc en sombre (cf. html.dark .hdr). */
       border-bottom: 1px solid var(--line); box-shadow: 0 1px 8px rgba(11,35,64,.06); }
.hdr-i { max-width: 1240px; margin: 0 auto; padding: 0 32px; height: 64px;
         display: flex; align-items: center; gap: 24px; }
.hdr .logo { text-decoration: none; display: flex; flex-direction: column; line-height: 1; gap: 2px;
             flex-shrink: 0; background: none; border: none; cursor: pointer; text-align: left; }
.logo-n { font-size: 18px; font-weight: 900; letter-spacing: -.04em; color: var(--navy); }
.logo-t { font-size: 7.5px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--flame-fg); }
.nav { display: flex; gap: 2px; flex: 1; }
.nav .nlink { font-size: 13.5px; font-weight: 500; color: var(--steel); text-decoration: none;
              background: none; border: none; cursor: pointer; font-family: inherit; white-space: nowrap;
              padding: 6px 12px; border-radius: 5px; transition: color .15s, background .15s; }
.nav .nlink:hover { color: var(--navy); background: var(--smoke); }
.nav .nlink.on, .nav .nlink.active { color: var(--navy); font-weight: 600; }
.hdr-r { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.btn-sec { font-size: 13px; font-weight: 600; color: #fff; text-decoration: none;
           font-family: inherit; border: none; cursor: pointer; background: var(--navy);
           padding: 8px 16px; border-radius: 6px; transition: background .15s; }
.btn-sec:hover { background: var(--nvy2); }
.btn-pri { font-size: 13px; font-weight: 700; color: #fff; background: var(--flame);
           font-family: inherit; border: none; cursor: pointer;
           padding: 9px 18px; border-radius: 6px; text-decoration: none; transition: background .15s; }
.btn-pri:hover { background: var(--flm2); }
/* ── Entree "Vendre" (cote offreurs / partenaires) — lien flame discret a droite ── */
.hdr-sell { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600;
            color: var(--flame-fg); text-decoration: none; font-family: inherit; cursor: pointer;
            padding: 6px 12px; border-radius: 5px; white-space: nowrap; transition: background .15s, color .15s; }
.hdr-sell:hover, .hdr-sell.on { background: rgba(200,75,15,.09); color: var(--flm2); }
.mlink-sell { color: var(--flame-fg); font-weight: 700; }
.hdr-burger { display: none; background: none; border: none; cursor: pointer; color: var(--navy);
              padding: 4px; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.mlink { padding: 10px 12px; border-radius: 6px; font-size: 14px; font-weight: 600; color: var(--navy);
         background: none; border: none; text-align: left; cursor: pointer; font-family: inherit; }
.mlink:hover { background: var(--smoke); }

/* ── FOOTER ──────────────────────────────── */
/* Liseré fin blanc en haut du footer — même taille (1px) que le liseré du header. */
.footer { background: #07182E; color: rgba(255,255,255,.45); padding: 60px 0 28px; border-top: 1px solid rgba(255,255,255,.18); }
.footer .wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.fg { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 44px; }
.fb-nm { font-size: 20px; font-weight: 900; letter-spacing: -.04em; color: #fff; }
.fb-tag { font-size: 7.5px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--flame-fg); margin-top: 3px; margin-bottom: 10px; }
.fb-d { font-size: 12.5px; line-height: 1.75; max-width: 200px; }
.fc h4 { font-size: 9.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: rgba(255,255,255,.25); margin-bottom: 14px; }
.fc ul { list-style: none; display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; }
.fc a { font-size: 13px; color: rgba(255,255,255,.45); text-decoration: none; transition: color .15s; }
.fc a:hover { color: #fff; }
.fbot { border-top: 1px solid rgba(255,255,255,.07); padding-top: 22px; display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; }
.fbot-r { display: flex; gap: 20px; }

/* ── RESPONSIVE — repli du header en 2 paliers ──────────────────────────────
   Depuis l'ajout du selecteur de langue (4e controle du cluster droit), le header
   PLEIN (nav + « Vendre » + CTA + Connexion + langue) ne tient qu'a >=1240px.
   Plutot que de passer en burger des 1239, on degrade en 2 temps pour GARDER la
   nav horizontale visible sur les fenetres desktop intermediaires :
   • Palier 1 (<=1239px) : le lien-entonnoir SECONDAIRE « Vendre votre materiel »
     (.hdr-sell) cede en premier. Il reste accessible : header plein ecran (>=1240),
     FOOTER (lien Vendez), et menu burger. La nav + CTA + Connexion + langue tiennent
     ainsi jusqu'a ~1024px (verifie FR + DE, nav sur 1 ligne, 0 overflow).
   • Palier 2 (<=1023px) : sous ~1024px, 5 liens de nav + 3 controles + logo ne
     rentrent plus → repli burger. Le menu porte tous les liens (dont « Vendre ») ;
     le selecteur de langue reste visible a cote du burger (regle #ds-lang.in-hdr
     dans ds-i18n.js, calee sur le meme 1023px). */
@media (max-width: 1239px) { .hdr-sell { display: none; } }
@media (max-width: 1023px) { .hdr .nav { display: none; } .hdr-burger { display: inline-flex; } .hdr-r { margin-left: auto; } .hdr-r > *:not(.hdr-burger) { display: none !important; } }
@media (max-width: 760px) { .fg { grid-template-columns: 1fr !important; } }

/* ════════════════════════════════════════════════════════════════
   MODE SOMBRE — theme navy-nocturne partage (centralise ici)
   ────────────────────────────────────────────────────────────────
   Bascule les TOKENS du redesign (les sections/cartes/bordures les
   utilisent) + remonte le texte navy en clair. Les surfaces de
   l'ancien systeme (--s*) restent gerees par le bloc de chaque page,
   recolore en navy. --navy reste sombre car il sert de FOND.
   ════════════════════════════════════════════════════════════════ */
html.dark {
  color-scheme: dark;
  /* Rebascule SÉMANTIQUE — les alias (--white/--ink/--steel/--line) suivent seuls */
  --bg:        #0A121C;   /* fond de page — charbon-navy profond (désaturé) */
  --surface:   #18222F;   /* cartes / panneaux */
  --surface-2: #1C2735;   /* surface alternée élevée */
  --text:      #E8ECF2;   /* texte principal (encre) */
  --text-soft: #A0AAB8;   /* texte secondaire (atténué) */
  --border:    #2B3848;   /* bordures */
  /* Rôles distincts conservés */
  --smoke: #141D29;   /* sections alternees, fonds doux */
  --mist:  #1C2735;   /* panneaux eleves */
  --flame: #C84B0F;   /* flame plus lisible sur sombre */
  --active: var(--flame);      /* FOND actif en sombre = flame (texte blanc dessus, 4.7:1) */
  --active-fg: #E86A24;        /* TEXTE actif en sombre = flame ÉCLAIRCI (4.98:1, lisible) */
  --flame-fg: #E86A24;         /* TEXTE orange accent en sombre = flame éclairci (lisible) */
  /* Slate + statut rebasculés (fonds teintés subtils, texte éclairci). */
  --s400:#9FB0C4; --s500:#AFBDCF; --s600:#CCD7E5; --s700:#DAE3EE;
  --ok:    #2BD49C; --ok-bg:rgba(16,185,129,.14);  --ok-line:rgba(16,185,129,.30);
  --err:   #f87171; --err-bg:rgba(239,68,68,.16);   --err-line:rgba(239,68,68,.30);
  --warn:  #fbbf24; --warn-bg:rgba(245,158,11,.16); --warn-line:rgba(245,158,11,.32);
  --info:  #93c5fd; --info-bg:rgba(59,130,246,.16); --info-line:rgba(59,130,246,.32);
  --violet:#c4b5fd; --violet-bg:rgba(139,92,246,.18);--violet-line:rgba(139,92,246,.32);
}
/* Chrome (header) — le footer/ticker sont deja sombres par design */
html.dark .hdr              { background: rgba(16,37,64,.96); border-bottom-color: rgba(255,255,255,.14); box-shadow: 0 1px 8px rgba(0,0,0,.4); }
html.dark .hdr .nlink       { color: var(--steel); }
html.dark .nav .nlink:hover, html.dark .hdr .nlink:hover { color:#E8EEF6 !important; background: rgba(255,255,255,.06) !important; }
html.dark .hdr-sell:hover, html.dark .hdr-sell.on { background: rgba(200,75,15,.15); color: var(--flame-fg); }
html.dark .mlink.mlink-sell { color: var(--flame-fg) !important; }
/* Burger : --navy reste sombre -> invisible sur le header sombre, on l'eclaircit */
html.dark .hdr-burger { color: var(--s800, #E8EEF6) !important; }
/* Texte navy -> clair (le token --navy reste sombre pour les FONDS). */
html.dark .logo-n, html.dark .sec-h, html.dark .sol-h, html.dark .ps-h,
html.dark .ft-v, html.dark .faq-q h3, html.dark .mlink,
html.dark .nlink.on, html.dark .nlink.active, html.dark .nav a.on,
html.dark .shop-tab.active,
/* Titres definis par CLASSE (non captes par le selecteur inline ci-dessous) */
html.dark .cfaq-title, html.dark .cat-hd h2, html.dark .cat-gw-title,
html.dark .ap-step-t, html.dark .ap-zone-t,
html.dark .tf-h, html.dark .sb-help-t,
html.dark [style*="color:var(--navy)"] { color: var(--s800, #E8EEF6) !important; }
/* Texte orange INLINE (templates JS) → éclairci en sombre pour la lisibilité.
   Sélecteurs ";color:"/"^color:" : n'attrapent PAS background-color/border-color:var(--flame). */
html.dark [style*=";color:var(--flame)"], html.dark [style^="color:var(--flame)"] { color: var(--flame-fg) !important; }
/* Onglet de nav ACTIF : token --active — navy en clair, flame en sombre (règle unique
   du site, cf. --active). Harmonisé sur toutes les pages via chrome.css. */
.nav .nlink.on, .nav .nlink.active,
html.dark .nav .nlink.on, html.dark .nav .nlink.active { color: var(--active-fg) !important; }
/* Panneaux navy : legere elevation pour ressortir sur le fond sombre */
html.dark .cert, html.dark .lg-eu { background: var(--mist); }
/* Fonds clairs poses en dur (inline / JS) -> surface sombre */
html.dark [style*="background:#fff"],   html.dark [style*="background: #fff"],
html.dark [style*="background:#ffffff"],html.dark [style*="background: #ffffff"],
html.dark [style*="background:white"],
html.dark [style*="background:#f1f5f9"],html.dark [style*="background: #f1f5f9"],
html.dark [style*="background:#f8fafc"],html.dark [style*="background: #f8fafc"],
html.dark [style*="background:#fafafa"],html.dark [style*="background: #fafafa"] { background: var(--white) !important; }
/* Aplats/placeholders d'image clairs (degrade des cartes produit) -> sombre */
html.dark [style*="f8fafc,#f1f5f9"] { background: var(--mist) !important; }
html.dark .pieces-tr:hover td { background: var(--surface-2) !important; }
/* Bouton contour : --navy reste sombre -> illisible sur fond sombre, on eclaircit */
html.dark .btn-outline { color: var(--s800, #E8EEF6); border-color: #3A567D; }
/* Survol bouton contour : le remplissage navy serait terne sur sombre -> flame */
html.dark .btn-outline:hover { background: var(--flame); color: #fff; border-color: var(--flame); }
/* ── Optimisation couleurs (logique partagee, identique a admin.html) ── */
/* En-tetes de table : ni blanc agressif, ni navy invisible -> surface elevee discrete */
html.dark th { background:var(--surface-2); color:#9FB0C4; border-bottom-color:var(--border); }
/* Refs / codes -> texte flame (visible + on-brand) */
html.dark code { background:var(--smoke); color:#C84B0F !important; }
/* Bordures navy inline (etats actifs, focus) -> flame */
html.dark [style*="border-color:var(--navy)"] { border-color:#C84B0F !important; }
/* Pastilles de statut a fond pastel inline -> fond sombre (texte colore conserve) */
html.dark [style*="background:#f0fdf4"], html.dark [style*="background:#fffbeb"],
html.dark [style*="background:#fef2f2"], html.dark [style*="background:#eff6ff"],
html.dark [style*="background:#dcfce7"], html.dark [style*="background:#fef3c7"],
html.dark [style*="background:#fee2e2"], html.dark [style*="background:#dbeafe"] { background:var(--surface-2) !important; }
/* Boutons navy sur fond sombre = bleu-sur-bleu invisible -> flame (CTA visible) */
html.dark .btn-navy { background:var(--flame); box-shadow:0 4px 18px rgba(200,75,15,.28); }
html.dark .btn-navy:hover { background:#A33D0C; }
/* Bouton Connexion header (.btn-sec, secondaire) : navy plein en clair ; en sombre le header
   est deja navy (navy-sur-navy invisible) MAIS on ne reprend PAS le flame du CTA primaire
   (sinon deux oranges cote a cote = hierarchie cassee). Secondaire = outline fantome. */
html.dark .btn-sec { background:transparent !important; color:#E8EEF6 !important; border:1px solid rgba(255,255,255,.22) !important; box-shadow:none !important; }
html.dark .btn-sec:hover { background:rgba(255,255,255,.08) !important; border-color:rgba(255,255,255,.35) !important; }
/* Boutons/liens a fond navy INLINE (connexion, "Acceder a mon espace", panier...) :
   navy sur fond sombre = invisible -> flame (CTA lisible). Limite aux a/button. */
html.dark a[style*="background:var(--navy)"],
html.dark button[style*="background:var(--navy)"] { background:var(--flame) !important; }
html.dark a[style*="background:var(--navy)"]:hover,
html.dark button[style*="background:var(--navy)"]:hover { background:#A33D0C !important; }
/* Lignes du panier : fond pose en JS (style.cssText) -> #fff serialise en
   rgb(255,255,255), non capte par les helpers inline. La classe, elle, marche. */
html.dark .cart-row { background:var(--surface) !important; border-color:var(--border) !important; }
/* Classes utilitaires Tailwind a fond clair (footer du tiroir panier, etc.) */
html.dark .bg-gray-50, html.dark .bg-gray-100 { background:var(--smoke) !important; }
/* Bouton FAB mode sombre (centralise ; les pages qui le redeclarent inline gagnent, sans conflit) */
#dm-toggle { position: fixed; bottom: 1.5rem; left: 1.5rem; z-index: 800; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid #e2e8f0; background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0,0,0,.1); transition: background .3s, border-color .3s, box-shadow .3s, transform .2s; }
#dm-toggle:hover { transform: scale(1.1); }
#dm-toggle .dm-moon { display: block; color: var(--navy); }
#dm-toggle .dm-sun  { display: none;  color: #fbbf24; }
html.dark #dm-toggle { background: var(--surface-2); border-color: var(--border); box-shadow: 0 4px 20px rgba(0,0,0,.5); }
html.dark #dm-toggle .dm-moon { display: none; }
html.dark #dm-toggle .dm-sun  { display: block; }

/* ════════════════════════════════════════════════════════════════
   Compléments dark mode — règles « dark-mode-regles » (tout le site)
   Sens sûr uniquement : assombrir fonds / éclaircir textes ; couleurs
   sémantiques (vert/rouge/ambre/violet) préservées.
   ════════════════════════════════════════════════════════════════ */
/* Pastels/highlights inline supplémentaires non couverts → surface sombre */
html.dark [style*="background:#eef2ff"], html.dark [style*="background: #eef2ff"],
html.dark [style*="background:#e0e7ff"], html.dark [style*="background:#ede9fe"],
html.dark [style*="background:#fff7ed"], html.dark [style*="background:#ffedd5"],
html.dark [style*="background:#fecaca"], html.dark [style*="background:#bbf7d0"],
html.dark [style*="background:#e0f2fe"], html.dark [style*="background:#f0f9ff"],
html.dark [style*="background:#fef9c3"] { background:var(--surface-2) !important; }
/* Textes foncés inline → clairs ; couleurs sémantiques préservées */
html.dark [style*="color:#1e293b"], html.dark [style*="color:#0f172a"],
html.dark [style*="color:#334155"], html.dark [style*="color:#1A1D24"] { color:#E8EEF6 !important; }
html.dark [style*="color:#166534"], html.dark [style*="color:#15803d"] { color:#2BD49C !important; }
html.dark [style*="color:#92400e"], html.dark [style*="color:#854d0e"],
html.dark [style*="color:#b45309"] { color:#fbbf24 !important; }
html.dark [style*="color:#991b1b"], html.dark [style*="color:#b91c1c"] { color:#f87171 !important; }
html.dark [style*="color:#4f46e5"], html.dark [style*="color:#4338ca"] { color:#a5b4fc !important; }
/* Traits/bordures clairs codés en dur → bordure sombre */
html.dark [style*="border-color:#f1f5f9"], html.dark [style*="border:1px solid #f1f5f9"],
html.dark [style*="border-bottom:1px solid #f1f5f9"], html.dark [style*="border-top:1px solid #f1f5f9"],
html.dark [style*="border:1px solid #e2e8f0"], html.dark [style*="border-bottom:1px solid #e2e8f0"],
html.dark td { border-color:var(--border) !important; }
/* Focus champs : flame visible (le navy disparaît sur fond sombre) */
html.dark input:focus, html.dark textarea:focus, html.dark select:focus { border-color:var(--flame) !important; }
/* Autofill navigateur : neutraliser le fond blanc/jaune imposé par le navigateur */
html.dark input:-webkit-autofill, html.dark input:-webkit-autofill:hover,
html.dark input:-webkit-autofill:focus, html.dark textarea:-webkit-autofill, html.dark select:-webkit-autofill {
  -webkit-text-fill-color:#E8EEF6 !important;
  -webkit-box-shadow:0 0 0 1000px var(--surface-2) inset !important;
  box-shadow:0 0 0 1000px var(--surface-2) inset !important;
  caret-color:#E8EEF6 !important; border-color:var(--border) !important;
}
/* Surfaces-cartes restantes (fond #fff en dur, pas encore migrées vers
   var(--surface)) → surface sombre. Les classes migrées (.ds-card, .ap-zone,
   .vz-card, .vz-form-card, .lot-card, .shop-row, .cfaq-item, .cat-panel,
   .cat-gw, .cat-fc) basculent désormais seules via le token --surface. */
html.dark .fpill, html.dark .sb, html.dark .lot-pill,
html.dark .view-seg button { background:var(--surface) !important; }
html.dark .ds-input:focus { background:var(--surface-2) !important; }
html.dark .s-unk { background:var(--border) !important; color:#9FB0C4 !important; }
/* Échelle de gris du TEXTE : en sombre --s500/--s600 étaient trop foncés (détail
   illisible). Éclaircis au niveau body → override les :root sombres des pages
   (ces tokens ne servent QU'au texte sur le site public — vérifié). */
html.dark body { --s500:#AFBDCF; --s600:#CCD7E5; }

/*MWRAP*/
@media (max-width: 600px) {
  .wrap { padding-left: 18px; padding-right: 18px; }
  .hdr-i { padding-left: 18px; padding-right: 18px; }
}
