/**
 * Roddier App — Signature de marque (lot A, purement additif)
 * ──────────────────────────────────────────────────────────────────────
 * Chargé APRÈS app.css : consomme ses tokens (--tint, --brand-navy, --bg-*,
 * --label-*…) et n'en REDÉFINIT aucun existant. N'écrase aucune règle d'app.css :
 * tout est soit un nouveau sélecteur (.brand-halo*), soit un raffinement de focus
 * (:focus-visible) plus spécifique, soit une variante portant un nouveau token.
 *
 * Charte : navy #0f2544 + halos bleus DÉSATURÉS (#5e7fa8, charte « lumière bleue »).
 * Bleu saturé évité ; ombres teintées navy plutôt que noir pur ; pas d'émoji.
 *
 * Sommaire :
 *   1. Tokens additifs (signature)
 *   2. Halos / mesh bleus — .brand-halo*
 *   3. Focus-visible : anneau navy + halo doux (remplace l'outline navigateur)
 *   4. Sélection de texte teintée navy
 *   5. Scrollbars discrètes teintées
 *   6. Détails légers
 *   7. prefers-reduced-motion
 *   8. Variantes dark mode (regroupées)
 */

/* ─── 1. Tokens additifs (nouveaux noms, ne touchent pas l'existant) ─── */
:root {
  /* Bleu de marque désaturé (charte « lumière bleue ») pour les halos. */
  --brand-sig-halo:        rgba(94, 127, 168, 0.22);
  --brand-sig-halo-strong: rgba(94, 127, 168, 0.30);
  /* Anneau de focus : navy de charte + halo doux. */
  --brand-sig-focus-ring:  #0f2544;
  --brand-sig-focus-glow:  rgba(15, 37, 68, 0.18);
  /* Sélection de texte : navy translucide, texte lisible. */
  --brand-sig-selection-bg: rgba(15, 37, 68, 0.16);
  --brand-sig-selection-fg: #0f2544;
  /* Scrollbar discrète teintée navy. */
  --brand-sig-scroll-thumb:       rgba(15, 37, 68, 0.22);
  --brand-sig-scroll-thumb-hover: rgba(15, 37, 68, 0.38);
}

/* ─── 2. Halos / mesh bleus — .brand-halo* ───────────────────────────────
 * Décoratifs : posés en fond d'une zone (header dashboard, hero public).
 * À mettre sur un conteneur position:relative (ou utiliser .brand-halo-host,
 * qui pose le contexte + garde le contenu au-dessus du pseudo-élément).
 * Aucun texte → décoratif ; pointer-events:none ; n'intercepte rien.
 * ──────────────────────────────────────────────────────────────────────── */

/* Hôte : applique le halo en ::before sans surcharger le markup. */
.brand-halo-host { position: relative; }
.brand-halo-host > * { position: relative; z-index: 1; }
.brand-halo-host::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
}

/* Variante 1 : un seul halo diffus, centré en haut. Discret. */
.brand-halo--soft::before,
.brand-halo--soft {
  background:
    radial-gradient(60% 80% at 50% 0%, var(--brand-sig-halo) 0%, transparent 70%);
}

/* Variante 2 : mesh — 2-3 halos désaturés superposés, asymétriques. */
.brand-halo--mesh::before,
.brand-halo--mesh {
  background:
    radial-gradient(45% 60% at 15% 0%,  var(--brand-sig-halo)        0%, transparent 65%),
    radial-gradient(40% 55% at 85% 10%, var(--brand-sig-halo)        0%, transparent 62%),
    radial-gradient(55% 70% at 50% 100%, var(--brand-sig-halo-strong) 0%, transparent 72%);
}

/* Variante utilitaire (élément seul, ex. <div class="brand-halo"> en fond
 * absolu posé manuellement). Diffuse et douce. */
.brand-halo {
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 30%, var(--brand-sig-halo) 0%, transparent 68%);
}

/* ─── 3. Focus-visible : anneau navy + halo doux ─────────────────────────
 * Remplace PROPREMENT l'outline navigateur par un anneau navy net + un halo
 * doux. Focus toujours VISIBLE (jamais outline:none sans remplacement).
 * Ciblé sur les éléments interactifs courants pour ne pas surprendre.
 * ──────────────────────────────────────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="link"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--brand-sig-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 4px var(--brand-sig-focus-glow);
}

/* ─── 4. Sélection de texte teintée navy ─────────────────────────────────
 * Plus spécifique que la règle ::selection d'app.css (qui reste en place) :
 * on teinte navy avec un texte navy lisible. */
:root ::selection {
  background: var(--brand-sig-selection-bg);
  color: var(--brand-sig-selection-fg);
}
:root ::-moz-selection {
  background: var(--brand-sig-selection-bg);
  color: var(--brand-sig-selection-fg);
}

/* ─── 5. Scrollbars discrètes teintées ──────────────────────────────────
 * Firefox : scrollbar-color (thumb + track). WebKit : thumb teinté navy.
 * Subtil, ne pas crier. Les règles d'app.css restent ; on raffine la teinte. */
html {
  scrollbar-color: var(--brand-sig-scroll-thumb) transparent;
  scrollbar-width: thin;
}
:root *::-webkit-scrollbar-thumb {
  background: var(--brand-sig-scroll-thumb);
  background-clip: padding-box;
}
:root *::-webkit-scrollbar-thumb:hover {
  background: var(--brand-sig-scroll-thumb-hover);
  background-clip: padding-box;
}

/* ─── 6. Détails légers ─────────────────────────────────────────────────
 * Accent caret navy dans les champs de saisie (cohérence de marque). */
input,
textarea {
  caret-color: var(--brand-sig-focus-ring);
}

/* ─── 7. prefers-reduced-motion ─────────────────────────────────────────
 * Les halos sont statiques (aucune animation introduite ici). Garde-fou si
 * une transition était ajoutée plus tard sur les éléments de signature. */
@media (prefers-reduced-motion: reduce) {
  .brand-halo,
  .brand-halo-host::before,
  .brand-halo--soft,
  .brand-halo--mesh {
    animation: none !important; /* neutralise toute anim future sur la signature */
    transition: none !important;
  }
}

/* ─── 8. Variantes dark mode ────────────────────────────────────────────
 * Sur fond sombre : halos un poil plus présents (le bleu clair pose mal sinon),
 * anneau de focus en bleu désaturé clair (le navy disparaît sur fond noir),
 * sélection et scrollbars réaccordées. */
:root[data-theme="dark"] {
  --brand-sig-halo:        rgba(94, 127, 168, 0.26);
  --brand-sig-halo-strong: rgba(94, 127, 168, 0.34);
  --brand-sig-focus-ring:  #8fb0d6;                 /* navy clair lisible sur fond sombre */
  --brand-sig-focus-glow:  rgba(143, 176, 214, 0.22);
  --brand-sig-selection-bg: rgba(143, 176, 214, 0.26);
  --brand-sig-selection-fg: #eaf1fa;
  --brand-sig-scroll-thumb:       rgba(255, 255, 255, 0.16);
  --brand-sig-scroll-thumb-hover: rgba(255, 255, 255, 0.30);
}

/* ── Signature Roddier : raffinement du super-dock (cohérence verre navy/marque).
   Chargé après components.css → reprend la main sur les valeurs de base du dock. ── */
.super-dock { background: color-mix(in srgb, #0f2544 64%, transparent); border-radius: 24px; }
.super-dock .dock-tile { border-radius: 14px; box-shadow: 0 4px 12px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.18); }
.super-dock .dock-app.is-active::after { background: #7aa2d6; box-shadow: 0 0 6px 1px rgba(122,162,214,.6); }