/* ============================================================================
 * SoukPilot — Lot ESTH-01 : consolidation esthétique & cohérence visuelle
 * ----------------------------------------------------------------------------
 * À charger EN DERNIER, après tous les autres CSS de la page.
 * Objectif : résoudre des conflits de cascade réels identifiés lors de
 * l'audit (voir AUDIT_VISUEL_ESTH01.md) sans toucher au HTML, au JS ni à
 * aucune logique métier. Fichier strictement additif : aucune règle
 * existante n'est supprimée, uniquement complétée ou re-priorisée par
 * ordre de chargement (aucun `` sauf mention explicite).
 * ==========================================================================*/

/* ----------------------------------------------------------------------------
 * A. PONT DE PALETTE — storefront public (produit / boutique)
 * ----------------------------------------------------------------------------
 * public/assets/css/styles.css définit sa propre palette locale
 * (--blue:#287d9d / --teal:#52b8b4 / --navy:#102d49), indépendante de la
 * palette officielle définie dans brand-tokens.css (--brand-primary:#1B2A4A /
 * --brand-secondary:#2ECC9B). Résultat observé : les pages produit/boutique
 * affichent un bleu-turquoise différent du navy/menthe utilisé partout
 * ailleurs (dashboard, marketing, landing).
 *
 * Plutôt que de réécrire des dizaines de règles dans styles.css (risque de
 * régression sur des pages non testées ici), on réaligne les VALEURS des
 * variables locales sur les tokens de marque. Toutes les règles qui
 * consomment déjà --blue/--teal/--navy/etc. héritent alors automatiquement
 * de la bonne identité, sans modification de leur sélecteur.
 * -------------------------------------------------------------------------- */
:root{
  --ink: var(--brand-text, #111827);
  --muted: var(--brand-text-muted, #5B6472);
  --paper: var(--brand-surface, #FFFFFF);
  --bg: var(--brand-background, #F7F7F5);
  --line: var(--brand-border, #E2E5EA);

  --navy: var(--brand-primary, #1B2A4A);
  --blue: var(--brand-primary, #1B2A4A);
  --teal: var(--brand-secondary, #2ECC9B);
  --green: var(--brand-success, #167A50);
  --red: var(--brand-error, #C73838);
  --yellow: var(--brand-accent, #E8833A);
  /* --pink n'a pas d'équivalent de marque : conservée telle quelle pour ne
     pas casser un usage ponctuel (mise en avant promo) déjà en place. */

  --shadow: var(--shadow-lg, 0 12px 28px rgba(17,24,39,.12));
  --shadow-sm: var(--shadow-sm, 0 1px 2px rgba(17,24,39,.06));
  --radius: var(--radius-xl, 24px);
}

/* ----------------------------------------------------------------------------
 * B. SIDEBAR ADMIN — résolution du conflit de largeur
 * ----------------------------------------------------------------------------
 * --sp-sidebar-w est redéfini en concurrence dans 4 fichiers différents
 * (soukpilot-design-system-v1_2_4.css: 276px, soukpilot-dashboard-v1_5_8...:
 * 264px, admin-v1-6-1.css: 268/284px, admin-v1-6-4-r8.css: 304/320px),
 * en dehors de toute media query de responsive. La valeur réellement
 * appliquée dépend donc de l'ordre de chargement — fragile et invisible en
 * relecture de code. On fixe ici UNE valeur canonique unique pour le bureau,
 * égale à la valeur qui l'emportait déjà en pratique (304px), afin de ne
 * provoquer aucune régression visuelle non vérifiée, tout en supprimant
 * l'ambiguïté pour les prochaines modifications.
 * -------------------------------------------------------------------------- */
@media (min-width: 981px){
  :root{ --sp-sidebar-w: 304px; }
}

/* ----------------------------------------------------------------------------
 * C. ÉTATS MANQUANTS — boutons/cartes storefront (styles.css n'a pas de
 * classes .sp-*, donc pas de couverture par soukpilot-components.css)
 * -------------------------------------------------------------------------- */
.btn{ transition: background var(--transition-base, .2s ease), box-shadow var(--transition-base, .2s ease), transform var(--transition-fast, .12s ease); }
.btn:hover{ box-shadow: var(--shadow-md, 0 4px 12px rgba(17,24,39,.08)); transform: translateY(-1px); }
.btn:active{ transform: translateY(0) scale(.98); }
.btn:disabled,.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
.btn[aria-busy="true"]{ cursor:progress; opacity:.75; }

.product-card{ transition: box-shadow var(--transition-base, .2s ease), transform var(--transition-base, .2s ease); }

/* Champs du storefront : anneau de focus cohérent avec le reste de la
   plateforme (actuellement uniquement une bordure bleue, sans anneau). */
.field input:focus,.field select:focus,.field textarea:focus{
  box-shadow: var(--focus-ring, 0 0 0 3px rgba(46,204,155,.45));
}

/* ----------------------------------------------------------------------------
 * D. DOCUMENTATION — voir aussi DESIGN_SYSTEM_ESTH01.md pour l'inventaire
 * complet des tokens, composants et états.
 * -------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------
 * E. CONNEXION — langue disponible avant authentification et contraste AA
 * -------------------------------------------------------------------------- */
.login-card{position:relative}
.login-language-switch{
  display:flex;justify-content:center;gap:8px;margin:0 auto 16px;
  direction:ltr;
}
.login-language-switch button{
  min-width:48px;min-height:40px;padding:7px 12px;border-radius:999px;
  border:1px solid var(--brand-border,#D7DCE3);background:#fff;color:#1B2A4A;
  font:800 13px/1 system-ui,sans-serif;cursor:pointer;
  transition:background .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.login-language-switch button:hover{background:#EEF2F7;border-color:#8D99AA}
.login-language-switch button[aria-pressed="true"]{background:#1B2A4A;color:#fff;border-color:#1B2A4A}
.login-language-switch button:focus-visible{outline:3px solid rgba(46,204,155,.52);outline-offset:2px}
#loginButton{
  background:#1B2A4A;color:#fff;border-color:#1B2A4A;
  background-image:none;
}
#loginButton:hover{background:#12203B;border-color:#12203B}
#loginButton:focus-visible{outline:3px solid rgba(46,204,155,.52);outline-offset:3px}
html[dir="rtl"] .login-language-switch{direction:ltr}