/* Amior — fondations visuelles partagées (thème sombre par défaut, clair en option) */

:root {
  --color-bg: #120f1c;
  --color-bg-soft: #17132a;
  --color-surface: #1e1935;
  --color-surface-alt: #251f40;
  --color-surface-raised: #2b2449;
  --color-border: rgba(255, 255, 255, 0.09);
  --color-border-strong: rgba(255, 255, 255, 0.16);
  --color-text: #f6f1ea;
  --color-text-muted: #b7aec8;
  /* #90869d plutôt que #8b8199 : mesuré à 4.22:1 sur --color-surface-alt (texte des placeholders), sous le seuil AA 4.5:1 */
  --color-text-faint: #90869d;
  --color-accent-1: #ff7a59;
  --color-accent-2: #ffb347;
  --color-accent-contrast: #1c1330;
  --gradient-accent: linear-gradient(135deg, #ff7a59, #ffb347);
  --color-danger: #ff8272;
  --color-danger-strong: #ff5c4d;
  --color-success: #63d19b;
  --color-info: #7db6ff;
  --shadow-card: 0 16px 40px rgba(5, 3, 15, 0.45);
  --shadow-pop: 0 8px 24px rgba(5, 3, 15, 0.4);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 999px;
  --tap-min: 44px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --color-bg: #fff7ef;
  --color-bg-soft: #fffaf5;
  --color-surface: #ffffff;
  --color-surface-alt: #fff1e3;
  --color-surface-raised: #ffffff;
  --color-border: rgba(40, 24, 10, 0.1);
  --color-border-strong: rgba(40, 24, 10, 0.18);
  --color-text: #2a1e33;
  --color-text-muted: #675a72;
  /* Couleurs assombries par rapport à la maquette d'origine : mesurées au contraste WCAG,
     l'orange/or clair (#e15a3a, #c9840f, #1f8a5a) tombait sous 4.5:1 sur --color-bg (2.9 à 4.1:1) —
     illisible en thème clair pour les liens, icônes actives et pastilles de succès. */
  --color-text-faint: #776a85;
  --color-accent-1: #c83f1f;
  --color-accent-2: #99640b;
  --color-accent-contrast: #ffffff;
  --gradient-accent: linear-gradient(135deg, #c83f1f, #99640b);
  --color-danger: #c93b3b;
  --color-danger-strong: #ad2b2b;
  /* #1a754c plutôt que #1d8255 : mesuré à 4.33:1 sur --color-surface-alt
     (fond de .pill-success, utilisée telle quelle dans « Tes autorisations »),
     sous le seuil AA 4.5:1. #1a754c y donne 5.13:1. */
  --color-success: #1a754c;
  --color-info: #2f6fce;
  --shadow-card: 0 16px 32px rgba(60, 40, 20, 0.12);
  --shadow-pop: 0 8px 20px rgba(60, 40, 20, 0.14);
  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    --color-bg: #fff7ef;
    --color-bg-soft: #fffaf5;
    --color-surface: #ffffff;
    --color-surface-alt: #fff1e3;
    --color-surface-raised: #ffffff;
    --color-border: rgba(40, 24, 10, 0.1);
    --color-border-strong: rgba(40, 24, 10, 0.18);
    --color-text: #2a1e33;
    --color-text-muted: #675a72;
    /* Même correction de contraste que le bloc [data-theme="light"] ci-dessus (à garder synchronisé) */
    --color-text-faint: #776a85;
    --color-accent-1: #c83f1f;
    --color-accent-2: #99640b;
    --color-accent-contrast: #ffffff;
    --gradient-accent: linear-gradient(135deg, #c83f1f, #99640b);
    --color-danger: #c93b3b;
    --color-danger-strong: #ad2b2b;
    --color-success: #1a754c;
    --color-info: #2f6fce;
    --shadow-card: 0 16px 32px rgba(60, 40, 20, 0.12);
    --shadow-pop: 0 8px 20px rgba(60, 40, 20, 0.14);
    color-scheme: light;
  }
}

/* -- Thème de profil ---------------------------------------------------------

   Le thème choisi dans « Mon profil » (colonne profile_theme, liste tenue par
   amior/themes.py) ne colorait jusqu'ici RIEN : on choisissait « Océan », on
   lisait « Profil enregistré » et on voyait exactement le même écran. Il
   repeint désormais les accents du compte : fond des avatars et des initiales,
   bulles de tes propres messages, boutons pleins, liens, pastilles actives,
   chiffres des tuiles — tout ce qui passe par --color-accent-1/2 et
   --gradient-accent.

   Ne bougent pas : fonds, textes, et danger/succès/info. Ces trois-là sont des
   SIGNAUX, pas de la décoration — un rouge d'erreur ne doit pas virer au vert
   parce que le compte est en « Forêt ».

   Le point d'accroche est le bouton radio déjà coché dans le formulaire de
   profil (`checked` posé par le gabarit d'après la base, et remis en place par
   static/js/app.js après chaque enregistrement) : aucune classe à poser sur
   <html>, donc aucune ligne de JS à écrire, et le choix se voit à l'instant où
   on le coche — l'aperçu est la page elle-même. Ne rien enregistrer et
   recharger remet la couleur de la base : c'est bien le serveur qui a le
   dernier mot.

   Le thème par défaut « sunset » n'a volontairement aucune règle ici : c'est
   la palette de base ci-dessus. Un compte portant une valeur héritée hors
   liste ne coche aucune case, donc ne déclenche aucune règle, et garde le
   corail — même repli que côté app (voir appliquerThemeProfil dans
   mobile/src/theme.ts).

   Contraste : ce sont les mêmes hex qu'en face, pour que les deux supports se
   ressemblent, et ils sont MESURÉS (ratio WCAG, pas à l'œil). Les couleurs
   servies par le serveur sont des pastilles, jamais des accents : mesurées
   avec du blanc dessus elles donnent 2.57:1 (sunset) à 4.54:1 (ember), sous le
   seuil AA de 4.5:1 dans presque tous les cas. Chaque teinte ci-dessous est sa
   déclinaison, décalée en luminosité jusqu'au premier cran qui tient 4.5:1 sur
   le pire fond du mode : --color-surface-alt (#fff1e3) en clair,
   --color-surface-raised (#2b2449) en sombre. Le second accent est la teinte
   voisine (sunset va du corail 13° à l'or 36°). Détail des mesures dans
   mobile/src/theme.ts, ACCENTS_THEME_PROFIL.

   Spécificité : `:root:has(…)` (0,4,1) passe devant `:root[data-theme="light"]`
   (0,2,0) — d'où la reprise de chaque thème dans les trois contextes (sombre
   par défaut, clair forcé, clair système), chacun redéfinissant les mêmes
   trois variables. Sans ça, le bloc sombre s'appliquerait par-dessus le thème
   clair. `:has()` est ignoré par les navigateurs qui ne le connaissent pas
   (avant Safari 15.4) : ils gardent simplement les accents par défaut. */

/* Braise — source serveur #d1462f, teintes 9° → 33°. */
:root:has(input[name="profile_theme"][value="ember"]:checked) {
  --color-accent-1: #dc7260; /* 4.56:1 sur --color-surface-raised, 5.58:1 sous --color-accent-contrast */
  --color-accent-2: #d1872f; /* 4.97:1 */
  --gradient-accent: linear-gradient(135deg, #dc7260, #d1872f);
}
:root[data-theme="light"]:has(input[name="profile_theme"][value="ember"]:checked) {
  --color-accent-1: #c2402b; /* 4.66:1 sur --color-surface-alt, 5.17:1 sous du blanc */
  --color-accent-2: #976121; /* 4.68:1 */
  --gradient-accent: linear-gradient(135deg, #c2402b, #976121);
}

/* Océan — source serveur #2f80c8, teintes 208° → 185°. */
:root:has(input[name="profile_theme"][value="ocean"]:checked) {
  --color-accent-1: #4e96d5; /* 4.58:1 sur --color-surface-raised, 5.61:1 sous --color-accent-contrast */
  --color-accent-2: #2fbbc9; /* 6.25:1 */
  --gradient-accent: linear-gradient(135deg, #4e96d5, #2fbbc9);
}
:root[data-theme="light"]:has(input[name="profile_theme"][value="ocean"]:checked) {
  --color-accent-1: #2a71b1; /* 4.63:1 sur --color-surface-alt, 5.13:1 sous du blanc */
  --color-accent-2: #1e7881; /* 4.67:1 */
  --gradient-accent: linear-gradient(135deg, #2a71b1, #1e7881);
}

/* Mauve — source serveur #9b6dd6, teintes 266° → 291°. */
:root:has(input[name="profile_theme"][value="mauve"]:checked) {
  --color-accent-1: #a77edb; /* 4.58:1 sur --color-surface-raised, 5.61:1 sous --color-accent-contrast */
  --color-accent-2: #c76ed6; /* 4.57:1 */
  --gradient-accent: linear-gradient(135deg, #a77edb, #c76ed6);
}
:root[data-theme="light"]:has(input[name="profile_theme"][value="mauve"]:checked) {
  --color-accent-1: #8750ce; /* 4.66:1 sur --color-surface-alt, 5.16:1 sous du blanc */
  --color-accent-2: #ad36c2; /* 4.64:1 */
  --gradient-accent: linear-gradient(135deg, #8750ce, #ad36c2);
}

/* Forêt — source serveur #2f8f5b, teintes 148° → 110°. */
:root:has(input[name="profile_theme"][value="foret"]:checked) {
  --color-accent-1: #36a468; /* 4.59:1 sur --color-surface-raised, 5.63:1 sous --color-accent-contrast */
  --color-accent-2: #49a436; /* 4.58:1 */
  --gradient-accent: linear-gradient(135deg, #36a468, #49a436);
}
:root[data-theme="light"]:has(input[name="profile_theme"][value="foret"]:checked) {
  --color-accent-1: #297c4f; /* 4.63:1 sur --color-surface-alt, 5.13:1 sous du blanc */
  --color-accent-2: #377c29; /* 4.65:1 */
  --gradient-accent: linear-gradient(135deg, #297c4f, #377c29);
}

/* Troisième contexte : clair suivi du système, sans choix explicite. Mêmes
   valeurs que le bloc [data-theme="light"] correspondant (à garder
   synchronisé, comme la palette claire elle-même plus haut). */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]):has(input[name="profile_theme"][value="ember"]:checked) {
    --color-accent-1: #c2402b;
    --color-accent-2: #976121;
    --gradient-accent: linear-gradient(135deg, #c2402b, #976121);
  }
  :root:not([data-theme="dark"]):not([data-theme="light"]):has(input[name="profile_theme"][value="ocean"]:checked) {
    --color-accent-1: #2a71b1;
    --color-accent-2: #1e7881;
    --gradient-accent: linear-gradient(135deg, #2a71b1, #1e7881);
  }
  :root:not([data-theme="dark"]):not([data-theme="light"]):has(input[name="profile_theme"][value="mauve"]:checked) {
    --color-accent-1: #8750ce;
    --color-accent-2: #ad36c2;
    --gradient-accent: linear-gradient(135deg, #8750ce, #ad36c2);
  }
  :root:not([data-theme="dark"]):not([data-theme="light"]):has(input[name="profile_theme"][value="foret"]:checked) {
    --color-accent-1: #297c4f;
    --color-accent-2: #377c29;
    --gradient-accent: linear-gradient(135deg, #297c4f, #377c29);
  }
}

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

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ul, ol, dl {
  margin: 0 0 0.6em;
}

ul, ol { padding-left: 1.1em; }

a { color: var(--color-accent-2); }

img { max-width: 100%; display: block; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* -- Boutons -------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: var(--tap-min);
  padding: 0.65em 1.3em;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, background 0.15s ease;
  user-select: none;
}

.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--gradient-accent);
  color: var(--color-accent-contrast);
  box-shadow: var(--shadow-pop);
}

.btn-primary:hover { filter: brightness(1.05); }

.btn-secondary {
  background: var(--color-surface-alt);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
  border-color: var(--color-border);
}

.btn-danger {
  background: transparent;
  color: var(--color-danger);
  border-color: var(--color-danger);
}

.btn-danger.btn-filled {
  background: var(--color-danger-strong);
  color: #fff;
  border-color: transparent;
}

.btn-block { width: 100%; }

.btn-sm {
  min-height: 36px;
  padding: 0.35em 0.9em;
  font-size: 0.86rem;
}

/* 0.65 plutôt que 0.5 : mesuré sur un .btn-secondary désactivé posé sur
   .card, le texte tombait à 3.03:1 en thème clair (4.51:1 en sombre, tout
   juste au-dessus du seuil) — bien en dessous des 4.5:1 visés pour un texte
   qu'on veut lisible même « grisé ». 0.65 remonte à 4.65:1 / 6.61:1 tout en
   gardant un effet désactivé net face aux boutons actifs. */
.btn[disabled], .btn.is-disabled {
  opacity: 0.65;
  pointer-events: none;
}

/* La liste de sélecteurs ci-dessous ne couvrait que .btn, a, input, textarea,
   select et [tabindex] : tout <button> qui n'a pas la classe .btn (icônes de
   la barre du haut, onglets de la nav basse, item de discussion, croix de
   suppression d'un message, bascule d'affichage du mot de passe...) restait
   focusable au clavier sans le moindre indicateur visuel. `button` couvre
   ces cas sans avoir à toucher aux gabarits. */
.btn:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-accent-2);
  outline-offset: 2px;
}

/* Supprime le halo tactile gris/bleu par défaut d'iOS et Android sur les
   éléments interactifs : l'app a ses propres retours (.btn:active, states
   ci-dessus), le halo natif détonnait et cassait l'impression d'app installée. */
button, a, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}

/* -- Formulaires ------------------------------------------------------ */

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  margin-bottom: 1em;
  text-align: left;
}

.field label {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.field input,
.field textarea,
.field select {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: 0.75em 0.9em;
  min-height: var(--tap-min);
  color: var(--color-text);
  width: 100%;
}

.field input::placeholder,
.field textarea::placeholder { color: var(--color-text-faint); }

.field textarea { min-height: 96px; resize: vertical; }

.field-hint {
  font-size: 0.78rem;
  color: var(--color-text-faint);
}

.field-error {
  font-size: 0.8rem;
  color: var(--color-danger);
}

/* -- Cartes & surfaces -------------------------------------------------- */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.2rem;
  box-shadow: var(--shadow-card);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.25em 0.75em;
  border-radius: var(--radius-full);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  font-size: 0.78rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

.pill-accent {
  background: var(--gradient-accent);
  color: var(--color-accent-contrast);
  border-color: transparent;
}

.pill-danger { color: var(--color-danger); border-color: var(--color-danger); }
.pill-success { color: var(--color-success); border-color: var(--color-success); }

/* -- Bannière d'alerte -------------------------------------------------- */

.alert {
  border-radius: var(--radius-md);
  padding: 0.85em 1em;
  font-size: 0.9rem;
  border: 1px solid transparent;
  margin-bottom: 1em;
}

.alert-error {
  background: color-mix(in srgb, var(--color-danger) 16%, transparent);
  border-color: var(--color-danger);
  color: var(--color-text);
}

.alert-info {
  background: color-mix(in srgb, var(--color-info) 16%, transparent);
  border-color: var(--color-info);
  color: var(--color-text);
}

.alert-success {
  background: color-mix(in srgb, var(--color-success) 16%, transparent);
  border-color: var(--color-success);
  color: var(--color-text);
}

/* -- Avatar --------------------------------------------------------- */

.avatar {
  --avatar-size: 44px;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
  background: var(--gradient-accent);
  color: var(--color-accent-contrast);
  text-transform: uppercase;
}

/* -- Bascule de thème ------------------------------------------------ */

.theme-toggle {
  position: fixed;
  top: calc(var(--safe-top) + 14px);
  right: 14px;
  z-index: 40;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: var(--shadow-pop);
}

/* -- Toasts ----------------------------------------------------------- */

.toast-stack {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-bottom) + 84px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 90;
  width: min(420px, calc(100vw - 24px));
  align-items: stretch;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  border-radius: var(--radius-md);
  padding: 0.75em 1em;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-card);
  font-size: 0.88rem;
  animation: toast-in 0.2s ease;
}

.toast.toast-error { border-color: var(--color-danger); }
.toast.toast-success { border-color: var(--color-success); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* -- Chargement --------------------------------------------------------- */

.spinner {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.25);
  border-top-color: currentColor;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}

@keyframes spin { to { transform: rotate(360deg); } }

.empty-state {
  text-align: center;
  color: var(--color-text-faint);
  padding: 2rem 1rem;
  font-size: 0.92rem;
}

hr.sep {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 1rem 0;
}

/* -- Mouvement réduit --------------------------------------------------- */
/* Respecte le réglage système : on coupe les transitions/animations décoratives
   (transform des boutons, glissement des toasts) plutôt que de les estimer optionnelles.
   Le spinner de chargement continue de tourner : il porte une information d'état
   (« ça charge »), pas un simple effet, donc on le laisse hors de cette règle. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .spinner {
    animation-duration: 1.4s !important;
    animation-iteration-count: infinite !important;
  }
}