/* ===================================================================
   PhoneLigne - Mode sombre (version lisible)
   À charger APRÈS main.css, components.css et responsive.css.

   Problèmes corrigés :
   - palette trop noire : fond, cartes et bordures se confondaient ;
   - boutons principaux : texte sombre sur fond sombre ;
   - boutons "accent" : texte clair sur fond orange ;
   - titres et liens colorés avec la couleur "signal" (bleu nuit), qui
     disparaissait sur fond sombre ;
   - fond clair fixe de l'espace fournisseur avec un texte clair ;
   - cartes blanches fixes de la fiche fournisseur publique.
   Le mode clair n'est pas modifié.
   =================================================================== */

/* -------------------- 1. Palette -------------------- */

:root[data-theme="dark"] {
    --color-ink: #F3F5FA;            /* texte principal */
    --color-paper: #1B2438;          /* fond de page (plus clair, bleu nuit) */
    --color-surface: #26314B;        /* cartes, champs, menus */
    --color-mist: #44547A;           /* bordures et séparateurs bien visibles */
    --color-muted: #B8C2D8;          /* texte secondaire */
    --color-signal: #4F6FCB;         /* boutons principaux (texte blanc lisible) */
    --color-signal-dark: #3E58A8;    /* survol des boutons principaux */
    --color-marigold: #F0A537;
    --color-marigold-dark: #F5B95A;
    --color-teal: #55D8C6;           /* liens */
    --color-alert: #FF8F80;
    --color-success: #62D69F;

    /* Bleu clair pour les textes et icônes qui utilisaient "signal" */
    --color-signal-texte: #AFC2F8;

    color-scheme: dark;
}

[data-theme="dark"] body {
    background-color: var(--color-paper);
    color: var(--color-ink);
}

[data-theme="dark"] img {
    opacity: 1;
}

/* Cartes et blocs : une bordure franche + une légère élévation */
[data-theme="dark"] .carte-fournisseur,
[data-theme="dark"] .article-carte,
[data-theme="dark"] .panier-carte,
[data-theme="dark"] .panier-recap,
[data-theme="dark"] .cmd-carte {
    border-color: var(--color-mist);
}

/* -------------------- 2. Boutons -------------------- */

[data-theme="dark"] .btn--principal {
    background-color: var(--color-signal);
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.18);
}

[data-theme="dark"] .btn--principal:hover {
    background-color: var(--color-signal-dark);
}

[data-theme="dark"] .btn--accent {
    background-color: var(--color-marigold);
    color: #10151C;
}

[data-theme="dark"] .btn--accent:hover {
    background-color: var(--color-marigold-dark);
}

[data-theme="dark"] .btn--discret {
    color: var(--color-ink);
    background-color: rgba(255, 255, 255, 0.04);
    border-color: var(--color-mist);
}

[data-theme="dark"] .btn--discret:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--color-muted);
}

/* Boutons sans variante précise : visibles sur fond de carte */
[data-theme="dark"] .btn:not(.btn--principal):not(.btn--accent):not(.btn--discret):not([style*="background"]) {
    color: var(--color-ink);
    background-color: rgba(255, 255, 255, 0.06);
    border-color: var(--color-mist);
}

/* Anneau de focus visible (l'ancien était bleu nuit sur fond sombre) */
[data-theme="dark"] a:focus-visible,
[data-theme="dark"] button:focus-visible,
[data-theme="dark"] input:focus-visible,
[data-theme="dark"] textarea:focus-visible,
[data-theme="dark"] select:focus-visible {
    outline-color: var(--color-marigold);
}

/* -------------------- 3. Textes colorés avec "signal" -------------------- */

[data-theme="dark"] .marque__mot--phone,
[data-theme="dark"] .pagination__lien,
[data-theme="dark"] .site-header__nav a,
[data-theme="dark"] body.espace-fournisseur h1 {
    color: var(--color-ink);
}

[data-theme="dark"] .article-carte__prix {
    color: var(--color-ink);
}

[data-theme="dark"] .pagination__lien:hover {
    color: var(--color-ink);
    border-color: var(--color-marigold);
}

/* Boutons-liens : le texte reste lisible quel que soit le fond */
[data-theme="dark"] a.btn--principal {
    color: #FFFFFF;
}

[data-theme="dark"] a.btn--accent {
    color: #10151C;
}

[data-theme="dark"] .fa-fil a {
    color: var(--color-muted);
}

[data-theme="dark"] .fa-fil a:hover {
    color: var(--color-ink);
}

/* -------------------- 4. Espace fournisseur -------------------- */

/* Le fond d'origine (#E7E9F5) était clair, avec un texte clair par-dessus */
[data-theme="dark"] body.espace-fournisseur {
    background: linear-gradient(180deg, #243256 0%, var(--color-paper) 440px);
}

[data-theme="dark"] .onglets {
    background: var(--color-surface);
    border: 1px solid var(--color-mist);
    box-shadow: none;
}

[data-theme="dark"] .onglet-btn {
    color: var(--color-muted);
}

[data-theme="dark"] .onglet-btn:not(.onglet-btn--actif) {
    border-color: var(--color-mist);
}

[data-theme="dark"] .onglet-btn:hover:not(.onglet-btn--actif) {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-ink);
}

[data-theme="dark"] .onglet-btn--actif {
    background: var(--color-signal);
    color: #FFFFFF;
}

/* -------------------- 5. Formulaires -------------------- */

[data-theme="dark"] .champ input[type="text"],
[data-theme="dark"] .champ input[type="email"],
[data-theme="dark"] .champ input[type="password"],
[data-theme="dark"] .champ input[type="number"],
[data-theme="dark"] .champ input[type="tel"],
[data-theme="dark"] .champ textarea,
[data-theme="dark"] .champ select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    color: var(--color-ink);
    background-color: var(--color-paper);
    border-color: var(--color-mist);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #8C98B3;
    opacity: 1;
}

[data-theme="dark"] .champ input:focus,
[data-theme="dark"] .champ textarea:focus,
[data-theme="dark"] .champ select:focus {
    border-color: var(--color-marigold);
    box-shadow: 0 0 0 3px rgba(240, 165, 55, 0.25);
}

[data-theme="dark"] option {
    color: var(--color-ink);
    background: var(--color-surface);
}

/* -------------------- 6. Messages et badges -------------------- */

[data-theme="dark"] .message--succes,
[data-theme="dark"] .badge--succes {
    color: var(--color-success);
    background-color: rgba(98, 214, 159, 0.14);
}

[data-theme="dark"] .message--erreur,
[data-theme="dark"] .badge--alerte {
    color: var(--color-alert);
    background-color: rgba(255, 143, 128, 0.14);
}

[data-theme="dark"] .cmd-badge--avance {
    color: #FFB566;
    background: rgba(255, 181, 102, 0.16);
}

/* -------------------- 7. Fiche fournisseur publique (styles internes à la page) -------------------- */

[data-theme="dark"] .ff-carte-profil {
    background: var(--color-surface);
    border: 1px solid var(--color-mist);
    box-shadow: 0 20px 44px -20px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .ff-carte-profil__photo {
    border-color: var(--color-surface);
}

[data-theme="dark"] .ff-carte-profil__nom,
[data-theme="dark"] .ff-stat-articles__valeur,
[data-theme="dark"] .ff-avis-carte__nom {
    color: var(--color-ink);
}

[data-theme="dark"] .ff-note__texte,
[data-theme="dark"] .ff-carte-profil__description,
[data-theme="dark"] .ff-stat-articles__label,
[data-theme="dark"] .ff-avis-carte__date {
    color: var(--color-muted);
}

[data-theme="dark"] .ff-avis-carte__commentaire {
    color: #DCE3F2;
}

[data-theme="dark"] .ff-badge-meta {
    color: var(--color-ink);
    background: rgba(255, 255, 255, 0.09);
}

[data-theme="dark"] .ff-stat-articles {
    background: rgba(255, 255, 255, 0.07);
}

[data-theme="dark"] .ff-avis-section {
    border-top-color: var(--color-mist);
}

[data-theme="dark"] .ff-avis-carte {
    background: var(--color-surface);
    border-color: var(--color-mist);
}

[data-theme="dark"] .ff-panier-btn {
    color: #10151C !important;
}

/* -------------------- 8. En-tête du site -------------------- */

[data-theme="dark"] .site-header {
    background: var(--color-surface);
    border-bottom-color: var(--color-mist);
}

/* Bouton orange : le texte blanc était trop pâle sur l'orange */
[data-theme="dark"] .site-header__btn {
    color: #10151C !important;
}