/* =========================================================================
   WINK PHONE — Mode nuit, et les règles de composant du mode jour

   Une seule direction artistique, deux ambiances. `app.css` porte les jetons du
   jour ; ce fichier porte ceux de la nuit, et rien d'autre : pas une marge, pas
   un rayon, pas une taille de texte. C'est ce qui garantit que les deux modes
   ont exactement la même mise en page, et qu'une correction faite sur l'un vaut
   pour l'autre.

   Le mode suit d'abord le réglage du système d'exploitation. Si le visiteur le
   force depuis l'en-tête, son choix est gardé dans le navigateur et l'emporte.
   ========================================================================= */

/* ------------------------------------------- A. les règles du mode jour
   Elles venaient de la variante « Studio » du temps où il y avait trois
   directions artistiques. Studio est devenue la seule : ces règles sont donc
   la base, sans préfixe, et c'est le mode nuit qui redéfinit des couleurs. */

/* Les fonds de carte translucides pensés pour la nuit deviennent des aplats. */
/* Oubliée à la création du blog : sans cette ligne, la carte d'article gardait le fond
   sombre de la charte « Atelier » et affichait du texte encre dessus — illisible. */
.card,
.product-card,
.brand-card,
.panne-card,
.blog-carte {
  background: var(--surface);
}
.product-media {
  border-bottom: 1px solid var(--line);
}
.product-visual {
  border: 1px solid var(--line);
}
/* Oublié à l'ajout du sélecteur de langue : son fond bleu nuit écrit en dur faisait une
   tache dans un en-tête clair, avec un texte devenu sombre par-dessus. */
.icon-btn,
.chip,
.page-btn,
.qty button,
.langue-bouton,
.fav-btn {
  background: var(--surface);
}
.buy-box {
  background: var(--surface);
}
/* Sur fond clair, le texte des éléments actifs redevient sombre. */
.brand-onglet.est-ouvert .brand-tab,
.chip.is-active,
.chip[aria-pressed="true"],
.filter-opt.is-active,
.megamenu-col-title,
.megamenu-col li a:hover,
.mobile-serie-title {
  color: var(--violet-bright);
}
.active-filters .chip {
  color: var(--violet-bright);
}
.lb-caption {
  color: #E7E7EF;
}
.lb-level {
  color: #B8B8CC;
}
.lb-zoom button {
  color: #E7E7EF;
}
/* Ces surfaces gardaient une couleur de nuit écrite en dur alors que le texte posé dessus,
   lui, suit les jetons. Celles qui doivent changer avec le thème sont devenues des jetons,
   déclarés une fois par palette : une règle écrite ici n'est pas préfixée, elle vaut donc
   dans les deux modes — et une couleur claire posée là repeignait aussi la nuit. */
.auth-tabs {
  background: var(--surface-2);
}
.barre-achat {
  border-top-color: var(--line-strong);
}
/* Au survol, le fond ne devient qu'un lavande très pâle : un texte blanc y disparaît. */
.qty button:hover,
.mobile-model:hover,
.mobile-model:active {
  color: var(--violet-bright);
}
/* La typographie se resserre : moins d'effet, plus de hiérarchie. */
h1 {
  letter-spacing: -.04em; font-weight: 600;
}
h2 {
  letter-spacing: -.032em;
}
.eyebrow {
  color: var(--violet-bright);
}
.footer {
  background: var(--surface);
}
/* ---- l'atmosphère de fond -------------------------------------------------
   Les halos de `body::after` ont été réglés pour un fond nuit. Posés tels quels
   sur le fond presque blanc du mode jour, ils virent au lavande sale et
   salissent la respiration qui fait tout l'intérêt de cette charte : on les
   ramène au tiers de leur intensité. Le mode nuit, lui, les retrouve pleins —
   `--glow-violet` et `--glow-blue` y reprennent leurs valeurs d'origine. */
body::after {
  background:
      radial-gradient(38% 42% at 22% 18%, rgba(124, 92, 255, .07), transparent 62%),
      radial-gradient(34% 38% at 78% 32%, rgba(46, 125, 255, .06), transparent 62%),
      radial-gradient(30% 34% at 55% 82%, rgba(63, 224, 224, .03), transparent 64%);
}


/* --------------------------------------------------------- B. le mode nuit
   La palette de l'ancienne direction « Atelier » : nuit profonde, violet
   électrique, filets à 14 % d'opacité. Chaque couleur de texte y avait été
   vérifiée au-dessus de 4,5:1 sur ses fonds réels, et rien n'a bougé depuis.

   Deux déclenchements, dans cet ordre. Le réglage du système d'abord, tant que
   le visiteur n'a rien demandé — d'où le `:not([data-theme="jour"])`, qui lui
   laisse le dernier mot. Puis son choix explicite, plus spécifique, qui gagne
   dans les deux sens. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="jour"]) {
    color-scheme: dark;
    --voile-pastille: inset 0 0 0 1px rgba(255, 255, 255, .22);
    --ink-950: #06060D;
    --ink-900: #0A0916;
    --surface: #101024;
    --surface-2: #16152E;
    --surface-3: #1D1C3C;
    --line: rgba(142, 128, 255, 0.14);
    --line-strong: rgba(142, 128, 255, 0.28);
    --violet: #7C5CFF;
    --violet-bright: #A08CFF;
    --violet-deep: #4B2FD6;
    --blue: #2E7DFF;
    --blue-bright: #6BA5FF;
    --cyan: #3FE0E0;
    --text: #ECEAFF;
    --text-soft: #B9B5DE;
    --muted: #9C98C0;
    --muted-dim: #8480AE;
    --success: #34D399;
    --warning: #FBBF24;
    --danger: #FB7185;
    --on-danger: #2A0A12;
    --promo: #FF3B54;
    --on-promo: #2A0A12;
    --promo-text: #FF7A8A;
    --promo-soft: rgba(255, 59, 84, .12);
    --promo-line: rgba(255, 59, 84, .30);
    --gradient: linear-gradient(120deg, var(--violet) 0%, var(--blue) 100%);
    --on-gradient: #ffffff;
    --gradient-soft: linear-gradient(120deg, rgba(124, 92, 255, .16), rgba(46, 125, 255, .16));
    --glow-violet: radial-gradient(circle at center, rgba(124, 92, 255, .32), transparent 68%);
    --glow-blue: radial-gradient(circle at center, rgba(46, 125, 255, .26), transparent 68%);
    --shadow-card: 0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px -24px rgba(0,0,0,.9);
    --shadow-float: 0 32px 70px -30px rgba(76, 46, 200, .55);
    --shadow-pop: 0 30px 60px -20px rgba(0, 0, 0, .9);
    --header-bg: rgba(6, 6, 13, .88);
    --header-bg-compact: rgba(6, 6, 13, .96);
    --pop-bg: #0D0C1E;
    --barre-achat-fond: rgba(10, 9, 22, .94);
    --lb-close-fond: rgba(22, 21, 46, .8);
    --menu-bg: #0A0918;
    --veil-bg: rgba(4, 4, 10, .96);
    --grid-line: rgba(142, 128, 255, .045);
  }
}

:root[data-theme="nuit"] {
    color-scheme: dark;
    --voile-pastille: inset 0 0 0 1px rgba(255, 255, 255, .22);
    --ink-950: #06060D;
  --ink-900: #0A0916;
  --surface: #101024;
  --surface-2: #16152E;
  --surface-3: #1D1C3C;
  --line: rgba(142, 128, 255, 0.14);
  --line-strong: rgba(142, 128, 255, 0.28);
  --violet: #7C5CFF;
  --violet-bright: #A08CFF;
  --violet-deep: #4B2FD6;
  --blue: #2E7DFF;
  --blue-bright: #6BA5FF;
  --cyan: #3FE0E0;
  --text: #ECEAFF;
  --text-soft: #B9B5DE;
  --muted: #9C98C0;
  --muted-dim: #8480AE;
  --success: #34D399;
  --warning: #FBBF24;
  --danger: #FB7185;
  --on-danger: #2A0A12;
  --promo: #FF3B54;
  --on-promo: #2A0A12;
  --promo-text: #FF7A8A;
  --promo-soft: rgba(255, 59, 84, .12);
  --promo-line: rgba(255, 59, 84, .30);
  --gradient: linear-gradient(120deg, var(--violet) 0%, var(--blue) 100%);
  --on-gradient: #ffffff;
  --gradient-soft: linear-gradient(120deg, rgba(124, 92, 255, .16), rgba(46, 125, 255, .16));
  --glow-violet: radial-gradient(circle at center, rgba(124, 92, 255, .32), transparent 68%);
  --glow-blue: radial-gradient(circle at center, rgba(46, 125, 255, .26), transparent 68%);
  --shadow-card: 0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px -24px rgba(0,0,0,.9);
  --shadow-float: 0 32px 70px -30px rgba(76, 46, 200, .55);
  --shadow-pop: 0 30px 60px -20px rgba(0, 0, 0, .9);
  --header-bg: rgba(6, 6, 13, .88);
  --header-bg-compact: rgba(6, 6, 13, .96);
  --pop-bg: #0D0C1E;
  --barre-achat-fond: rgba(10, 9, 22, .94);
  --lb-close-fond: rgba(22, 21, 46, .8);
  --menu-bg: #0A0918;
  --veil-bg: rgba(4, 4, 10, .96);
  --grid-line: rgba(142, 128, 255, .045);
}


/* ------------------------------------------------- C. le bouton jour / nuit
   Le bouton montre **ce vers quoi on va**, pas l'état courant : en journée il
   affiche une lune, la nuit un soleil. Les deux pictogrammes sont empilés et
   l'un des deux est masqué — le bouton ne change donc jamais de largeur, et
   l'en-tête ne sursaute pas au clic. */

.theme-bouton .theme-jour { display: none; }
.theme-bouton .theme-nuit { display: inline-flex; }

:root[data-theme="nuit"] .theme-bouton .theme-jour { display: inline-flex; }
:root[data-theme="nuit"] .theme-bouton .theme-nuit { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="jour"]) .theme-bouton .theme-jour { display: inline-flex; }
  :root:not([data-theme="jour"]) .theme-bouton .theme-nuit { display: none; }
}

/* En automatique, un point discret rappelle que personne n'a tranché : sans lui, un
   visiteur qui voit la boutique en sombre ne sait pas si c'est elle ou son téléphone. */
.theme-bouton[data-theme-etat="auto"]::after {
  content: '';
  position: absolute;
  right: 7px;
  bottom: 7px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--violet);
}
.theme-bouton { position: relative; }


/* ------------------------------------- D. les couleurs de marque, la nuit
   Un logo presque noir — l'Apple #1D1D1F, le Sony #111827, le DPD #414141 —
   disparaît sur un fond de nuit. Chaque marque et chaque transporteur fournit
   donc sa version éclaircie dans sa propre variable, posée sur l'élément ; il
   ne reste ici qu'à dire laquelle des deux on lit.

   Un jeton de `:root` ne pourrait pas faire ce travail : il serait résolu sur
   la racine, avec la couleur de la racine, et toutes les marques sortiraient
   de la même teinte. La substitution doit avoir lieu sur l'élément. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="jour"]) .ruban-marque { color: var(--marque-sombre, var(--marque)); }
  :root:not([data-theme="jour"]) .cutoff-logo { color: var(--teinte-sombre, var(--teinte)); }
}

:root[data-theme="nuit"] .ruban-marque { color: var(--marque-sombre, var(--marque)); }
:root[data-theme="nuit"] .cutoff-logo { color: var(--teinte-sombre, var(--teinte)); }