/* ============================================================
   SpeedCert — Design System v1.0 (Phase 1 : fondations)
   ============================================================

   Fichier UNIQUE de référence pour les tokens et les composants
   de base. Toutes les pages le chargent via
   <link rel="stylesheet" href="/speedcert-theme.css" />.

   Deux règles à respecter en le modifiant :

   1. Les anciennes variables françaises (--accent, --fond-carte,
      --texte-attenue…) ne sont PAS supprimées : ~5 400 lignes de
      CSS en dépendent rien que dans le dashboard. Elles dérivent
      désormais des tokens --sc-* ci-dessous, qui deviennent la
      seule source de vérité. Changer --sc-brand change tout.

   2. La couleur de marque reste #0078D4. Le document de refonte
      proposait un cyan #0EA5E9 : il a été écarté volontairement,
      car cette couleur est figée dans les badges déjà embarqués
      chez les clients (badge.min.js), le favicon, les e-mails
      transactionnels et les visuels Whop/WordPress/Shopify/Wix.
      La changer ici repeindrait sans prévenir des badges en
      production sur des sites tiers.
   ============================================================ */

:root {
  /* === MARQUE ===
     Bleu SpeedCert. Identique à badge.js, favicon.svg et email.ts. */
  --sc-brand: #0078d4;
  --sc-brand-dark: #005a9e;
  --sc-brand-light: #4fb2ff;
  --sc-brand-bg: rgba(0, 120, 212, .16);

  /* === FONDS ===
     UNIFICATION. Le produit vivait avec deux palettes distinctes :
       site public   #0a0a0b / #1c1d22 / texte #f5f5f7
       dashboard     #000000 / #16181c / texte #ffffff
     C'est la palette du site public qui l'emporte : elle est plus proche
     du document de refonte, et le blanc pur sur noir pur du dashboard
     provoquait un halo (halation) désagréable en lecture longue.
     L'écart de fond (#000000 → #0a0a0b) est imperceptible ; le filigrane
     de sceaux « papier de sécurité » reste parfaitement lisible dessus.
     La teinte violette proposée par le document est écartée : elle jurait
     avec le bleu de marque. */
  --sc-bg-primary: #0a0a0b;
  --sc-bg-secondary: #1c1d22;
  --sc-bg-tertiary: #26272d;
  --sc-bg-elevated: #2c2d33;
  --sc-bg-alt: #111214;

  /* Filigrane "papier de securite" : token, et non regle globale.
     Seules les pages qui en veulent un l'appliquent, avec
     background-image: var(--sc-filigrane). Une regle body en bloc
     en collait un aux pages marketing qui n'en ont jamais eu. */
  --sc-filigrane: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' fill-opacity='0.005' d='M22.25 12c0-1.43-.88-2.67-2.19-3.34.46-1.39.2-2.9-.81-3.91s-2.52-1.27-3.91-.81c-.66-1.31-1.91-2.19-3.34-2.19s-2.67.88-3.33 2.19c-1.4-.46-2.91-.2-3.92.81s-1.26 2.52-.8 3.91c-1.31.67-2.2 1.91-2.2 3.34s.89 2.67 2.2 3.34c-.46 1.39-.21 2.9.8 3.91s2.52 1.26 3.91.81c.67 1.31 1.91 2.19 3.34 2.19s2.68-.88 3.34-2.19c1.39.45 2.9.2 3.91-.81s1.27-2.52.81-3.91c1.31-.67 2.19-1.91 2.19-3.34zm-11.71 4.2L6.8 12.46l1.41-1.42 2.26 2.26 4.8-5.23 1.47 1.36-6.2 6.77z'/%3E%3C/svg%3E");

  /* === TEXTES ===
     Rampe choisie sur mesure de contraste, pas au jugé. Ratios calculés
     sur le fond de carte #1c1d22 (le pire cas, plus clair que le fond de
     page). Minimum AA exigé par le document lui-même : 4,5:1.

       #f5f5f7  primaire                        ✔
       #a6a7b0  secondaire        = 7,04:1      ✔ texte courant
       #8a8b94  atténué           = 4,97:1      ✔ passe AA
       #5c5d66  désactivé                       — non lisible par nature

     Les anciennes valeurs échouaient :
       dashboard  --texte-attenue #71767b = 3,89:1   ✗
       dashboard  --texte-discret #536471 = 2,91:1   ✗
       public     --texte-discret #6c6d76 = 3,28:1   ✗
     La valeur #64748b du document échouait aussi (3,54:1) : d'où #8a8b94,
     la première teinte de cette famille qui passe réellement. */
  --sc-text-primary: #f5f5f7;
  --sc-text-secondary: #a6a7b0;
  --sc-text-muted: #8a8b94;
  --sc-text-disabled: #5c5d66;

  /* === BORDURES === */
  --sc-border-default: #2c2d33;
  --sc-border-hover: #3a3b42;
  --sc-border-focus: var(--sc-brand);

  /* === SÉMANTIQUE ===
     Teintes SpeedCert conservées (vert #00ba7c, rouge #f4212e) :
     elles sont reprises dans les e-mails et les badges d'état. */
  --sc-success: #00ba7c;
  --sc-success-bg: rgba(0, 186, 124, .16);
  --sc-warning: #ffb900;
  --sc-warning-bg: rgba(255, 185, 0, .16);
  --sc-danger: #f4212e;
  --sc-danger-bg: rgba(244, 33, 46, .16);
  --sc-info: #4fb2ff;
  --sc-info-bg: rgba(79, 178, 255, .14);

  /* === PREMIUM ===
     L'or ne sert QU'À ça. Ce n'est jamais une couleur d'action
     générique : un bouton doré qui n'est pas Premium est un bug. */
  --sc-premium: #fbbf24;
  --sc-premium-bg: rgba(251, 191, 36, .12);

  /* === DATA VIZ === */
  --sc-chart-1: #0078d4;
  --sc-chart-2: #f43f5e;
  --sc-chart-3: #00ba7c;
  --sc-chart-4: #a855f7;
  --sc-chart-5: #64748b;

  /* === TYPOGRAPHIE ===
     Inter est déjà chargée par chaque page. Le mono reste la pile
     système : ajouter JetBrains Mono depuis Google Fonts coûterait
     une requête bloquante de plus pour afficher des SIREN et des
     identifiants de certificat — le gain ne le vaut pas. */
  --sc-font-sans: "Inter", "Segoe UI Variable", "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --sc-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --sc-text-display: 36px;
  --sc-text-h1: 24px;
  --sc-text-h2: 20px;
  --sc-text-h3: 17px;
  --sc-text-body: 14px;
  --sc-text-body-sm: 13px;
  --sc-text-caption: 12px;
  --sc-text-micro: 11px;

  /* === ESPACEMENT (base 4px) === */
  --sc-space-xs: 4px;
  --sc-space-sm: 8px;
  --sc-space-md: 12px;
  --sc-space-lg: 16px;
  --sc-space-xl: 20px;
  --sc-space-2xl: 24px;
  --sc-space-3xl: 32px;
  --sc-space-4xl: 48px;

  /* === RAYONS ===
     10px pour les cartes : c'est déjà la valeur du site public ET celle
     du document. Seul le dashboard divergeait (14px) — il s'aligne. */
  --sc-radius-sm: 6px;
  --sc-radius-md: 8px;
  --sc-radius-lg: 10px;
  --sc-radius-xl: 12px;
  --sc-radius-full: 9999px;

  /* === OMBRES === */
  --sc-shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
  --sc-shadow-2: 0 8px 30px rgba(0, 0, 0, .35);

  /* === ANIMATION === */
  --sc-duration-fast: .16s;
  --sc-duration-normal: .25s;
  --sc-duration-slow: .4s;
  --sc-ease-out: cubic-bezier(.22, 1, .36, 1);
  --sc-ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  /* Glissement des bascules : plus lent et plus doux que le reste.
     Rebond leger (depassement ~12 % au lieu de 40 %) : on veut un
     mouvement agreable a regarder, pas un ressort qui claque. */
  --sc-duration-bascule: .42s;
  --sc-ease-bascule: cubic-bezier(.32, 1.12, .44, 1);

  /* ============================================================
     PONT DE COMPATIBILITÉ
     Les variables françaises existantes deviennent des alias.
     Elles restent utilisables partout ; elles n'ont simplement
     plus de valeur propre. Ne rien redéfinir en dur dans les pages.
     ============================================================ */
  --fond: var(--sc-bg-primary);
  --fond-alt: var(--sc-bg-alt);
  --fond-carte: var(--sc-bg-secondary);
  --fond-carte-hover: var(--sc-bg-tertiary);
  --bordure: var(--sc-border-default);
  --bordure-vive: var(--sc-border-hover);
  --texte: var(--sc-text-primary);
  --texte-attenue: var(--sc-text-secondary);
  --texte-discret: var(--sc-text-muted);
  --accent: var(--sc-brand);
  --accent-fonce: var(--sc-brand-dark);
  --accent-clair: var(--sc-brand-light);
  --accent-fond: var(--sc-brand-bg);
  --degrade-marque: linear-gradient(135deg, #0078d4 0%, #2b88d8 45%, #8338ec 100%);
  --vert: var(--sc-success);
  --vert-clair: #3fb96a;
  --vert-fond: var(--sc-success-bg);
  --rouge: var(--sc-danger);
  --rouge-fond: var(--sc-danger-bg);
  --orange: var(--sc-warning);
  --orange-fond: var(--sc-warning-bg);
  --rayon: var(--sc-radius-lg);
  --rayon-sm: var(--sc-radius-md);
  --rayon-pilule: var(--sc-radius-full);
  --rayon-input: var(--sc-radius-md);
  --ombre-1: var(--sc-shadow-1);
  --ombre-2: var(--sc-shadow-2);
  --verre-fond: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
  --verre-bordure: var(--sc-border-default);
  --verre-flou: none;
  --verre-ombre: var(--sc-shadow-2);
  --verre-ombre-survol: 0 12px 36px rgba(0, 0, 0, .4), 0 0 0 1px rgba(0, 120, 212, .22);
  --ressort: var(--sc-ease-out);
  --ressort-doux: var(--sc-ease-spring);
  --duree-rapide: var(--sc-duration-fast);
  --duree: var(--sc-duration-normal);
  --duree-lente: var(--sc-duration-slow);
}

/* ============================================================
   MODE CLAIR
   ============================================================

   Le sombre reste le defaut : c'est l'identite SpeedCert, et le
   filigrane de sceaux "papier de securite" y est concu. Le clair
   s'active par [data-theme="clair"] sur <html>, pose par
   /speedcert-theme.js avant le premier rendu (sinon l'ecran
   clignote en sombre puis bascule).

   Seuls les tokens --sc-* sont redefinis : le pont de
   compatibilite (--fond, --texte...) les consomme par var() et
   suit donc automatiquement. Ne jamais dupliquer le pont ici.

   Ratios verifies sur le fond de carte #f7f8fa (pire cas) :
     #16181c primaire                      ✔
     #4a5260 secondaire   = 7,40:1         ✔
     #667085 attenue      = 4,67:1         ✔ passe AA
   Le bleu de marque #0078d4 sur blanc donne 4,53:1 : il passe,
   mais tout juste — ne pas l'eclaircir.
   ============================================================ */

/* En clair, le fond de page est legerement grise et les surfaces sont
   blanches : c'est l'inverse du sombre, ou les cartes sont plus CLAIRES que le
   fond. Sans cette inversion, des cartes grises sur fond blanc paraissent
   eteintes et sales. */
:root[data-theme="clair"] .carte,
:root[data-theme="clair"] .carte-stat,
:root[data-theme="clair"] .barre-laterale,
:root[data-theme="clair"] .document-rapport,
:root[data-theme="clair"] .panneau-notifications {
  background: #ffffff;
  border-color: rgba(16, 24, 40, .07);
  box-shadow: var(--sc-shadow-2);
}
:root[data-theme="clair"] .barre-haute { background: rgba(255, 255, 255, .88); backdrop-filter: blur(10px); }
:root[data-theme="clair"] .carte-stat:hover { box-shadow: 0 8px 24px rgba(16, 24, 40, .10); }

:root[data-theme="clair"] {
  --sc-bg-primary: #f6f7f9;
  --sc-bg-secondary: #ffffff;
  --sc-bg-tertiary: #eef0f4;
  --sc-bg-elevated: #ffffff;
  --sc-bg-alt: #f2f3f7;
  /* Sur fond clair le motif blanc disparait : il passe en noir, a une
     opacite doublee pour garder le meme ecart percu (4 niveaux). */
  --sc-filigrane: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' fill-opacity='0.007' d='M22.25 12c0-1.43-.88-2.67-2.19-3.34.46-1.39.2-2.9-.81-3.91s-2.52-1.27-3.91-.81c-.66-1.31-1.91-2.19-3.34-2.19s-2.67.88-3.33 2.19c-1.4-.46-2.91-.2-3.92.81s-1.26 2.52-.8 3.91c-1.31.67-2.2 1.91-2.2 3.34s.89 2.67 2.2 3.34c-.46 1.39-.21 2.9.8 3.91s2.52 1.26 3.91.81c.67 1.31 1.91 2.19 3.34 2.19s2.68-.88 3.34-2.19c1.39.45 2.9.2 3.91-.81s1.27-2.52.81-3.91c1.31-.67 2.19-1.91 2.19-3.34zm-11.71 4.2L6.8 12.46l1.41-1.42 2.26 2.26 4.8-5.23 1.47 1.36-6.2 6.77z'/%3E%3C/svg%3E");

  --sc-text-primary: #16181c;
  --sc-text-secondary: #4a5260;
  --sc-text-muted: #667085;
  --sc-text-disabled: #9aa1ad;

  --sc-border-default: #e3e5ea;
  --sc-border-hover: #cdd1d9;

  /* Fonds semantiques reprises plus claires : les memes teintes a 16 %
     d'opacite sur blanc donnaient des pastilles delavees, illisibles. */
  --sc-brand-bg: rgba(0, 120, 212, .10);
  --sc-success: #0a7c55;
  --sc-success-bg: rgba(10, 124, 85, .10);
  --sc-warning: #8a6100;
  --sc-warning-bg: rgba(138, 97, 0, .10);
  --sc-danger: #c4141f;
  --sc-danger-bg: rgba(196, 20, 31, .10);
  --sc-info: #0a58a8;
  --sc-info-bg: rgba(10, 88, 168, .10);
  --sc-premium: #8a6a1c;
  --sc-premium-bg: rgba(138, 106, 28, .12);

  /* Un mode clair reussi repose sur des OMBRES, pas sur des bordures dures :
     sur fond sombre la bordure cree la separation, sur fond clair c'est
     l'elevation. Des traits gris partout donnent l'impression d'un tableur. */
  --sc-shadow-1: 0 1px 2px rgba(16, 24, 40, .05);
  --sc-shadow-2: 0 4px 16px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .04);

  --verre-ombre-survol: 0 12px 36px rgba(16, 24, 40, .10), 0 0 0 1px rgba(0, 120, 212, .22);
}


/* ============================================================
   BASCULE CLAIR / SOMBRE
   ============================================================

   Indicateur GLISSANT, pas un fond qui saute d'un bouton a l'autre :
   la pastille se deplace en translateX avec une courbe a ressort,
   comme .pilule-nav dans le dashboard. Le mouvement dit "c'est le
   meme objet qui change de place" ; un fond qui disparait ici et
   reapparait la ne raconte rien et parait casse.

   La position vient de data-actif sur le conteneur, pose par
   /speedcert-theme.js. Le CSS ne devine rien.
   ============================================================ */

.sc-bascule-theme {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border-radius: var(--sc-radius-full);
  background: var(--sc-bg-tertiary);
  border: 1px solid var(--sc-border-default);
  /* Evite que le glissement de la pastille ne deborde du contour. */
  overflow: hidden;
}

.sc-bascule-pastille {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 30px;
  height: 26px;
  border-radius: var(--sc-radius-full);
  background: var(--sc-bg-primary);
  box-shadow: var(--sc-shadow-1);
  z-index: 0;
  pointer-events: none;
  /* Filet de securite : si les keyframes sont neutralisees (mouvement
     reduit), c'est cette transition qui deplace la pastille. Sans elle on
     retombe sur une teleportation. L'animation, quand elle joue, l'emporte. */
  transition: transform var(--sc-duration-bascule) var(--sc-ease-bascule);
}

/* Position au repos. Sans classe .anime (premier affichage), la pastille est
   simplement posee au bon endroit : rejouer l'animation au chargement ferait
   partir la pastille toute seule sans que personne n'ait clique. */
.sc-bascule-theme[data-actif="sombre"] .sc-bascule-pastille { transform: translateX(30px); }
.sc-bascule-theme[data-actif="clair"] .sc-bascule-pastille { transform: translateX(0); }

/* Squash & stretch : la pastille s'etire dans le sens du trajet, puis se
   retasse en arrivant. C'est ce qui fait lire un mouvement plutot qu'un
   changement de position — une transition seule, aussi lente soit-elle,
   reste percue comme une teleportation ralentie.
   Deux noms d'animation distincts (un par sens) : reappliquer le MEME nom
   ne redeclenche pas une animation CSS, la pastille resterait figee au
   second aller-retour. */
@keyframes sc-pastille-vers-droite {
  0%   { transform: translateX(0)    scaleX(1);    }
  30%  { transform: translateX(8px)  scaleX(1.38); }
  65%  { transform: translateX(27px) scaleX(1.12); }
  85%  { transform: translateX(31px) scaleX(.94);  }
  100% { transform: translateX(30px) scaleX(1);    }
}
@keyframes sc-pastille-vers-gauche {
  0%   { transform: translateX(30px) scaleX(1);    }
  30%  { transform: translateX(22px) scaleX(1.38); }
  65%  { transform: translateX(3px)  scaleX(1.12); }
  85%  { transform: translateX(-1px) scaleX(.94);  }
  100% { transform: translateX(0)    scaleX(1);    }
}

.sc-bascule-theme.anime[data-actif="sombre"] .sc-bascule-pastille {
  animation: sc-pastille-vers-droite var(--sc-duration-bascule) var(--sc-ease-bascule);
}
.sc-bascule-theme.anime[data-actif="clair"] .sc-bascule-pastille {
  animation: sc-pastille-vers-gauche var(--sc-duration-bascule) var(--sc-ease-bascule);
}

.sc-bascule-theme button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: var(--sc-radius-full);
  background: transparent;
  color: var(--sc-text-muted);
  cursor: pointer;
  transition: color var(--sc-duration-fast) ease, transform var(--sc-duration-fast) var(--sc-ease-out);
}
.sc-bascule-theme button:hover { color: var(--sc-text-secondary); }
.sc-bascule-theme button[aria-pressed="true"] { color: var(--sc-brand); }
/* Enfoncement au clic : le bouton repond sous le doigt avant meme que la
   pastille n'ait fini de glisser. */
.sc-bascule-theme button:active { transform: scale(.88); }

/* L'icone accompagne le changement au lieu d'apparaitre sechement. */
.sc-bascule-theme svg {
  width: 15px;
  height: 15px;
  display: block;
  transition: transform var(--sc-duration-bascule) var(--sc-ease-bascule), opacity var(--sc-duration-normal) ease;
}
.sc-bascule-theme button[aria-pressed="false"] svg { opacity: .75; transform: scale(.92); }
.sc-bascule-theme button[aria-pressed="true"] svg { opacity: 1; transform: scale(1) rotate(0deg); }

/* Sur une barre de navigation posee sur photo, un gris plein fait tache :
   on passe en translucide, comme la bascule Proprietaires/Agences voisine. */
.actions-nav .sc-bascule-theme,
.menu-deroulant .sc-bascule-theme {
  background: rgba(255, 255, 255, .06);
  border-color: transparent;
}
.actions-nav .sc-bascule-theme .sc-bascule-pastille,
.menu-deroulant .sc-bascule-theme .sc-bascule-pastille {
  background: rgba(255, 255, 255, .20);
  box-shadow: none;
}
.actions-nav .sc-bascule-theme button,
.menu-deroulant .sc-bascule-theme button { color: rgba(255, 255, 255, .7); }
.actions-nav .sc-bascule-theme button[aria-pressed="true"],
.menu-deroulant .sc-bascule-theme button[aria-pressed="true"] { color: #fff; }

/* ============================================================
   BASE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

/* Chiffres à chasse fixe partout : sans ça, un compteur qui passe de
   9 à 10 fait sauter toute la ligne, et deux montants alignés dans un
   tableau ne se lisent pas en colonne. */
.sc-nums,
th, td,
.sc-kpi-valeur,
.prix-plan-choix { font-variant-numeric: tabular-nums; }

/* ============================================================
   ACCESSIBILITÉ
   ============================================================ */

*:focus-visible {
  outline: 2px solid var(--sc-brand);
  outline-offset: 2px;
}

/* Réduction de mouvement — règle générique.
   ATTENTION en la reprenant ailleurs : appliquée telle quelle au bandeau
   défilant des intégrations, elle le casse (le défilement EST le contenu ;
   figé, il laisse la piste dupliquée visible et une scrollbar horizontale).
   Une animation qui porte du sens se ré-autorise dans la page concernée,
   avec un sélecteur de classe + !important — plus spécifique que `*`, il
   gagne quel que soit l'ordre. Voir .piste-plateformes dans le dashboard. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  /* EXCEPTION : les indicateurs glissants des bascules.
     Ce reglage vise les troubles vestibulaires, c'est-a-dire les mouvements
     amples : parallaxe, defilement automatique, elements qui traversent
     l'ecran. Une pastille qui se deplace de 30 px a l'interieur de son propre
     controle n'en releve pas.
     Sans mouvement, l'indicateur se teleporte et on ne comprend plus que
     c'est le meme objet qui change de place : on retombe exactement sur le
     defaut qu'on venait de corriger. On raccourcit donc au lieu de supprimer. */
  .sc-bascule-pastille,
  .pastille-audience,
  .pilule-nav {
    transition-duration: .2s !important;
  }
  /* Le squash & stretch est retire : l'etirement amplifie le mouvement, c'est
     exactement ce que ce reglage demande d'eviter. On coupe les keyframes et
     on laisse la transition de base deplacer la pastille, raccourcie a 0,2 s
     par la regle ci-dessus. Le trajet reste lisible, sans deformation. */
  .sc-bascule-theme.anime .sc-bascule-pastille {
    animation: none !important;
  }
}

/* ============================================================
   BOUTONS
   ============================================================ */

.sc-btn-primary,
.sc-btn-secondary,
.sc-btn-ghost,
.sc-btn-danger {
  display: inline-flex;
  align-items: center;
  gap: var(--sc-space-sm);
  padding: 9px 16px;
  border-radius: var(--sc-radius-md);
  font-family: inherit;
  font-size: var(--sc-text-body);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--sc-duration-fast) ease,
              border-color var(--sc-duration-fast) ease,
              color var(--sc-duration-fast) ease,
              transform var(--sc-duration-normal) var(--sc-ease-out),
              box-shadow var(--sc-duration-normal) var(--sc-ease-out);
}

.sc-btn-primary { background: var(--sc-brand); color: #fff; border: none; }
.sc-btn-primary:hover {
  background: var(--sc-brand-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 120, 212, .25);
}
.sc-btn-primary:active { transform: translateY(0); box-shadow: none; }

.sc-btn-secondary {
  background: var(--sc-bg-elevated);
  color: var(--sc-text-secondary);
  border: 1px solid var(--sc-border-default);
}
.sc-btn-secondary:hover {
  border-color: var(--sc-border-hover);
  color: var(--sc-text-primary);
  background: var(--sc-bg-tertiary);
}

.sc-btn-ghost { background: transparent; color: var(--sc-text-muted); border: none; }
.sc-btn-ghost:hover { background: var(--sc-bg-tertiary); color: var(--sc-text-primary); }

.sc-btn-danger {
  background: transparent;
  color: var(--sc-danger);
  border: 1px solid var(--sc-danger-bg);
}
.sc-btn-danger:hover { background: var(--sc-danger-bg); border-color: var(--sc-danger); }

.sc-btn-primary[disabled],
.sc-btn-secondary[disabled],
.sc-btn-ghost[disabled],
.sc-btn-danger[disabled] {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ============================================================
   CARTES
   ============================================================ */

.sc-card {
  background: var(--sc-bg-secondary);
  border: 1px solid var(--sc-border-default);
  border-radius: var(--sc-radius-lg);
  transition: border-color var(--sc-duration-fast) ease,
              box-shadow var(--sc-duration-normal) var(--sc-ease-out);
}
.sc-card:hover { border-color: var(--sc-border-hover); }

.sc-card-kpi {
  background: var(--sc-bg-secondary);
  border: 1px solid var(--sc-border-default);
  border-radius: var(--sc-radius-lg);
  padding: var(--sc-space-xl);
  transition: transform var(--sc-duration-normal) var(--sc-ease-out),
              box-shadow var(--sc-duration-normal) var(--sc-ease-out),
              border-color var(--sc-duration-fast) ease;
}
.sc-card-kpi:hover {
  transform: translateY(-3px);
  border-color: var(--sc-brand);
  box-shadow: 0 12px 32px rgba(0, 120, 212, .10);
}

/* Carte Premium : bordure dorée discrète, jamais un fond doré plein. */
.sc-card-premium { border-color: rgba(251, 191, 36, .35); }

/* ============================================================
   BADGES D'ÉTAT
   ============================================================ */

.sc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--sc-radius-sm);
  font-size: var(--sc-text-caption);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.sc-badge-verified  { background: var(--sc-success-bg); color: var(--sc-success); border: 1px solid rgba(0, 186, 124, .25); }
.sc-badge-suspended { background: var(--sc-danger-bg);  color: var(--sc-danger);  border: 1px solid rgba(244, 33, 46, .25); }
.sc-badge-pending   { background: var(--sc-warning-bg); color: var(--sc-warning); border: 1px solid rgba(255, 185, 0, .25); }
.sc-badge-premium   { background: var(--sc-premium-bg); color: var(--sc-premium); border: 1px solid rgba(251, 191, 36, .25); }

/* Pulsation réservée aux badges « suspendu » : c'est une alerte, pas
   une décoration. Ne pas l'étendre aux autres états. */
@keyframes sc-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244, 33, 46, .4); }
  50%      { box-shadow: 0 0 0 6px rgba(244, 33, 46, 0); }
}
.sc-badge-suspended { animation: sc-pulse 2s infinite; }

/* ============================================================
   CHAMPS
   ============================================================ */

.sc-input {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--sc-radius-md);
  border: 1px solid var(--sc-border-default);
  background: var(--sc-bg-primary);
  color: var(--sc-text-primary);
  font-family: inherit;
  font-size: var(--sc-text-body);
  transition: border-color var(--sc-duration-fast) ease,
              box-shadow var(--sc-duration-fast) ease;
}
.sc-input::placeholder { color: var(--sc-text-disabled); }
.sc-input:focus {
  outline: none;
  border-color: var(--sc-brand);
  box-shadow: 0 0 0 3px rgba(0, 120, 212, .15);
}
.sc-input:disabled { opacity: .5; cursor: not-allowed; }

.sc-input-with-icon { position: relative; }
.sc-input-with-icon svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--sc-text-muted);
  width: 18px;
  height: 18px;
  pointer-events: none;
}
.sc-input-with-icon .sc-input { padding-left: 40px; }

/* ============================================================
   TABLEAUX
   ============================================================ */

.sc-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.sc-table th {
  text-align: left;
  padding: 10px 16px;
  font-size: var(--sc-text-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sc-text-muted);
  border-bottom: 1px solid var(--sc-border-default);
  background: var(--sc-bg-secondary);
}
.sc-table td {
  padding: 14px 16px;
  font-size: var(--sc-text-body);
  color: var(--sc-text-secondary);
  border-bottom: 1px solid var(--sc-border-default);
  transition: background var(--sc-duration-fast) ease;
}
.sc-table tbody tr:hover td { background: var(--sc-bg-tertiary); }
.sc-table tbody tr:last-child td { border-bottom: none; }

/* ============================================================
   ALERTES
   ============================================================ */

.sc-alert {
  display: flex;
  align-items: center;
  gap: var(--sc-space-md);
  padding: 14px 18px;
  border-radius: var(--sc-radius-lg);
  font-size: var(--sc-text-body);
  border: 1px solid;
}
.sc-alert-success { background: var(--sc-success-bg); color: var(--sc-success); border-color: rgba(0, 186, 124, .25); }
.sc-alert-warning { background: var(--sc-warning-bg); color: var(--sc-warning); border-color: rgba(255, 185, 0, .25); }
.sc-alert-danger  { background: var(--sc-danger-bg);  color: var(--sc-danger);  border-color: rgba(244, 33, 46, .25); }
.sc-alert-info    { background: var(--sc-info-bg);    color: var(--sc-info);    border-color: rgba(79, 178, 255, .25); }

/* ============================================================
   CHARGEMENT (skeletons)
   ============================================================ */

@keyframes sc-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.sc-skeleton {
  background: linear-gradient(90deg,
    var(--sc-bg-tertiary) 25%,
    var(--sc-bg-elevated) 50%,
    var(--sc-bg-tertiary) 75%);
  background-size: 200% 100%;
  animation: sc-shimmer 1.5s infinite;
  border-radius: var(--sc-radius-md);
  /* Un squelette n'a pas de texte : sans hauteur il est invisible. */
  min-height: 12px;
}

/* ============================================================
   BARRES DE PROGRESSION
   ============================================================ */

.sc-progress-track {
  height: 6px;
  border-radius: 3px;
  background: var(--sc-bg-tertiary);
  overflow: hidden;
}
.sc-progress-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--sc-brand);
  transition: width .6s var(--sc-ease-out);
}

/* ============================================================
   ÉTATS VIDES
   ============================================================ */

.sc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sc-space-md);
  padding: var(--sc-space-4xl) var(--sc-space-xl);
}
.sc-empty svg { width: 72px; height: 72px; color: var(--sc-brand); opacity: .3; }
.sc-empty h3 {
  margin: 0;
  font-size: var(--sc-text-h3);
  font-weight: 600;
  color: var(--sc-text-secondary);
}
.sc-empty p {
  margin: 0;
  max-width: 380px;
  font-size: var(--sc-text-body-sm);
  color: var(--sc-text-muted);
  line-height: 1.5;
}

/* ============================================================
   INTERRUPTEUR
   ============================================================ */

.sc-toggle {
  width: 40px;
  height: 22px;
  background: var(--sc-bg-elevated);
  border: 1px solid var(--sc-border-default);
  border-radius: 11px;
  position: relative;
  cursor: pointer;
  padding: 0;
  transition: background var(--sc-duration-fast) ease,
              border-color var(--sc-duration-fast) ease;
}
.sc-toggle::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  background: var(--sc-text-primary);
  border-radius: 50%;
  top: 1px;
  left: 1px;
  transition: transform var(--sc-duration-normal) var(--sc-ease-spring);
}
.sc-toggle[aria-checked="true"] { background: var(--sc-brand); border-color: var(--sc-brand); }
.sc-toggle[aria-checked="true"]::after { transform: translateX(18px); background: #fff; }