/* ==========================================================================
   SOCLE 1.0 — jetons de couleur
   ---------------------------------------------------------------------------
   CE FICHIER EST LA CHARTE GRAPHIQUE DU SITE, ET RIEN D'AUTRE.

   Il se charge AVANT styles.css. Changer l'identite visuelle d'une boutique,
   c'est remplacer ce seul fichier — pas toucher a une regle de mise en page.
   C'est aussi ce qui rend le retour en arriere possible : on garde les
   versions precedentes et on repose celle qu'on veut.

   REGLE ABSOLUE : aucune couleur ecrite en dur ailleurs. Une valeur hex posee
   dans une regle de styles.css echappera au prochain changement d'identite et
   restera seule de son espece, souvent sur le theme ou personne ne regarde.

   Les noms decrivent un ROLE (--fond-1, --texte-2), pas une couleur. C'est ce
   qui permet au meme nom de porter du graphite en sombre et du blanc casse en
   clair sans qu'aucune regle de mise en page ne s'en apercoive.
   ========================================================================== */

:root{
  color-scheme:dark;

  /* ---- Roles : fonds ---------------------------------------------------- */
  --fond-0:#0B0E13;                    /* la page */
  --fond-1:#151A22;                    /* les bandes, l'en-tete */
  --fond-2:#1E2530;                    /* les cartes, les champs */

  /* ---- Roles : textes --------------------------------------------------- */
  --texte-0:#FFFFFF;                   /* titres */
  --texte-1:#F5F7FA;                   /* texte fort */
  --texte-2:#C7D0DB;                   /* texte courant */
  --texte-3:#8B95A3;                   /* texte secondaire */
  --texte-4:#6B7482;                   /* mentions legales */
  --texte-champ:#7A8492;               /* placeholder */

  /* ---- Roles : traits et ombres ----------------------------------------- */
  --ligne:rgba(199,208,219,.14);
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --ombre-carte:0 12px 24px rgba(0,0,0,.5);
  --ombre-flottant:0 6px 18px rgba(0,0,0,.4);
  --ombre-image:0 24px 46px rgba(0,0,0,.55);
  --ombre-douce:none;                  /* le relief des cartes en clair */
  --voile-entete:rgba(11,14,19,.82);
  --voile-barre:rgba(11,14,19,.92);
  --opacite-fond:.30;                  /* le salon flou derriere la page */

  /* ---- Accent : orange IMOU --------------------------------------------- *
   * #F18D03 n'est pas choisi a l'oeil : c'est la teinte dominante relevee au
   * pixel sur le bandeau du logo IMOU des visuels produit officiels. Elle est
   * a un cheveu du #FF8000 d'une boutique voisine — les deux lisent comme
   * une seule marque.
   *
   * --orange-vif est la seule a changer de valeur entre les themes : sur
   * fond sombre elle doit eclaircir (#FFA733), sur fond blanc elle doit
   * foncer (#B45F06), sinon le texte accentue tombe a 1,9:1 et devient
   * illisible. Le #F18D03 des aplats de bouton, lui, ne bouge pas.
   * ---------------------------------------------------------------------- */
  --orange:#F18D03;
  --orange-vif:#FFA733;
  --orange-sombre:#C2710A;
  --sur-orange:#1A1206;
  --voile-orange-fort:rgba(241,141,3,.20);
  --voile-orange:rgba(241,141,3,.16);
  --voile-orange-doux:rgba(241,141,3,.12);
  --shadow-accent:0 8px 28px rgba(241,141,3,.28);

  /* ---- Signalisation ----------------------------------------------------- *
   * Vert, ambre et WhatsApp ne suivent pas la marque : ce sont des codes que
   * tout le monde lit de la meme facon. Les repeindre en orange ferait
   * disparaitre l'information qu'ils portent.
   * ---------------------------------------------------------------------- */
  --vert:#34D399;
  --voile-vert:rgba(52,211,153,.14);
  --ambre:#F5A524;
  --voile-ambre:rgba(245,165,36,.14);
  --whatsapp:#25D366;

  --radius:14px;

  /* ---- Statuts de commande — DASHBOARD UNIQUEMENT ------------------------ *
   * Ambre, bleu, violet, vert, rouge, sarcelle et gris : un jeu que l'oeil
   * distingue d'un coup. CES COULEURS NE SUIVENT PAS LA MARQUE — ce sont des
   * codes que tout le monde lit de la meme facon, les repeindre aux couleurs
   * de la boutique ferait disparaitre l'information qu'ils portent.
   *
   * Elles servent a la fois de pastille (aplat de 8 px) et de texte : le
   * theme clair en reprend donc des versions plus foncees, un #34D399 lisible
   * en pastille tombant a 1,9:1 en texte sur blanc.
   * ---------------------------------------------------------------------- */
  --st-attente:#F5A524;
  --st-injoignable:#2DD4BF;
  --st-confirmee:#4C9AFF;
  --st-livraison:#A78BFA;
  --st-livree:#34D399;
  --st-annulee:#F87171;
  --st-retour:#94A3B8;

  --alerte:#F87171;
  --voile-alerte:rgba(248,113,113,.14);

  /* Voiles d'accent : la teinte de la marque, tres diluee. Ce sont les
     seules valeurs de ce bloc qui changent d'une boutique a l'autre. */
  --voile-accent-fort:rgba(241,141,3,.35);
  --voile-accent-moyen:rgba(241,141,3,.18);
  --voile-accent-doux:rgba(241,141,3,.12);
  --voile-accent-tres-doux:rgba(241,141,3,.05);

  --voile-whatsapp-fort:rgba(37,211,102,.28);
  --voile-whatsapp:rgba(37,211,102,.14);

  /* La vignette qui montre a quoi ressemble l'AUTRE theme, dans Parametres.
     Ses couleurs ne suivent pas le theme courant — c'est une illustration,
     pas de la chrome — mais elles suivent la MARQUE : une boutique creme et
     or ne doit pas se voir proposer un apercu graphite. */
  --apercu-sombre-fond:#12161b;
  --apercu-sombre-trait:#e8eaed;
  --apercu-clair-fond:#f6f3ee;
  --apercu-clair-trait:#2a2f36;

  --pulse-vert-plein:rgba(52,211,153,.55);
  --pulse-vert-vide:rgba(52,211,153,0);

  /* ---- Alias historiques : ne portent plus de couleur en propre ---------- */
  --noir:var(--fond-0);
  --graphite:var(--fond-1);
  --graphite-clair:var(--fond-2);
  --blanc-pur:var(--texte-0);
  --blanc:var(--texte-1);
  --argent:var(--texte-2);
  --gris:var(--texte-3);
  --gris-sourd:var(--texte-4);
  --gris-champ:var(--texte-champ);
}

/* ==========================================================================
   Theme clair — valeurs relevees au pixel sur une boutique en production :
   fond #FFFFFF, texte #1A1A1A, texte secondaire #666666, trait #E5E5E5,
   bande creme #F9F7F5. Seuls les roles sont redefinis.
   ========================================================================== */
:root[data-theme="light"]{
  color-scheme:light;

  --fond-0:#FFFFFF;
  --fond-1:#F7F4F0;
  --fond-2:#FFFFFF;

  --texte-0:#1A1A1A;
  --texte-1:#242424;
  --texte-2:#3F3F3F;
  --texte-3:#666666;
  --texte-4:#8C8C8C;
  --texte-champ:#A3A3A3;

  --ligne:#E3DFD9;
  --shadow:0 10px 30px rgba(26,26,26,.10);
  --ombre-carte:0 10px 22px rgba(26,26,26,.08);
  --ombre-flottant:0 6px 18px rgba(26,26,26,.16);
  --ombre-image:0 18px 34px rgba(26,26,26,.16);
  --ombre-douce:0 1px 2px rgba(26,26,26,.04),0 6px 16px rgba(26,26,26,.05);
  --voile-entete:rgba(255,255,255,.88);
  --voile-barre:rgba(255,255,255,.94);
  --opacite-fond:.16;

  --orange-vif:#B45F06;
  --voile-orange-fort:rgba(241,141,3,.16);
  --voile-orange:rgba(241,141,3,.12);
  --voile-orange-doux:rgba(241,141,3,.10);
  --shadow-accent:0 8px 22px rgba(241,141,3,.30);

  --vert:#047857;
  --voile-vert:rgba(4,120,87,.10);
  --ambre:#B7791F;
  --voile-ambre:rgba(183,121,31,.12);

  --st-attente:#B7791F;
  --st-injoignable:#0F766E;
  --st-confirmee:#1D4ED8;
  --st-livraison:#6D28D9;
  --st-livree:#047857;
  --st-annulee:#B91C1C;
  --st-retour:#64748B;

  --alerte:#B91C1C;
  --voile-alerte:rgba(185,28,28,.10);

  --voile-accent-fort:rgba(241,141,3,.28);
  --voile-accent-moyen:rgba(241,141,3,.14);
  --voile-accent-doux:rgba(241,141,3,.10);
  --voile-accent-tres-doux:rgba(241,141,3,.04);

  --voile-whatsapp-fort:rgba(21,128,61,.20);
  --voile-whatsapp:rgba(21,128,61,.10);

  --pulse-vert-plein:rgba(4,120,87,.45);
  --pulse-vert-vide:rgba(4,120,87,0);
}