/* ============================================================================
   Evotic — Charte AKAMAKO pour la PWA (parité avec le natif, 2026-09-24)

   Port fidèle de :
     app-mobile/shared/.../ui/theme/AkamakoTheme.kt  (AkamakoSkin — chrome sombre)
     app-mobile/shared/.../ui/theme/AkamakoLight.kt  (AkamakoLightSkin — contenu clair)
     app-mobile/shared/.../ui/theme/GlassSurface.kt  (akamakoGlass — cartes de verre)

   PRINCIPE (identique au natif) : le CHROME porte l'identité (dégradé violet→rose,
   barre du bas violet presque noir, actif en rose) et le CONTENU reste sur fond
   lavande très clair avec des cartes blanches — c'est ce qui rend les petits Evo et
   les photos lisibles.

   MÉTHODE : ce fichier REDÉFINIT les tokens historiques (--primary, --bg, --text…).
   Les 4 557 `var(--…)` déjà écrits dans les 85 feuilles de style basculent donc sur
   Akamako sans qu'on touche aux pages. Chargé par style.css APRÈS design-tokens.css.

   RÈGLE : le violet est la couleur PRINCIPALE, le rose #FF2E93 un ACCENT.
   Ne jamais réintroduire le violet Material 3 #6750A4 (erreur historique).
   ============================================================================ */

/* Ossature commune (barre globale, bouton « e », onglets hauts) — cf. evo-shell.js */
@import url('evo-shell.css?v=e4d0f370');

/* ─────────────────────────────────────────────────────────────────────────────
   `hidden` doit gagner, partout.

   Le navigateur ne pose cet attribut qu'avec la priorité la plus faible qui
   soit : la moindre règle d'auteur qui fixe `display` — un `.field { display:
   block }`, un `.af-reader { display: flex }` — le rend inopérant, et l'élément
   reste à l'écran alors que le script le croit caché.

   Deux dégâts mesurés en production le 2026-09-24 : sur /login, l'email, le pays
   d'origine, le numéro de passeport et la réponse à la question secrète
   s'affichaient pour tout le monde ; sur /alliance, un panneau vide plein écran
   recouvrait TOUTE la page. Le dépôt corrigeait le piège composant par composant
   (hotel-console, chat, ebs, communauté…) — une seule règle suffit.

   Cette feuille est le seul endroit que TOUTES les pages atteignent : les unes
   par `style.css`, qui l'importe, les autres en la chargeant directement.
   ───────────────────────────────────────────────────────────────────────────── */
[hidden] { display: none !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   iPHONE : ne jamais descendre sous 16px dans un champ de saisie.

   Safari sur iPhone ZOOME la page dès qu'on touche un champ dont le texte fait
   moins de 16px — et il ignore `user-scalable=no` depuis iOS 10. La page reste
   agrandie et décalée ; il faut pincer pour revenir, à chaque champ. Le seul
   remède est de ne pas passer sous 16. 87 règles le faisaient, de 11 à 15px :
   recherche, commentaires, formulaires d'annonce, admin, saisie d'un message.

   Le bloc ne vise que Safari iOS : `-webkit-touch-callout` n'existe que là,
   ni sur Android, ni sur le Safari du Mac. Leur apparence ne bouge pas d'un pixel.
   ───────────────────────────────────────────────────────────────────────────── */
@supports (-webkit-touch-callout: none) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select,
  textarea { font-size: 16px !important; }

  /* Champs volontairement GRANDS : les ramener à 16 serait une régression, pas
     un correctif. Leur taille est redonnée ici telle quelle. */
  .sos-stealth-pin-wrap input { font-size: 32px !important; }
  .boxes input { font-size: 24px !important; }
  #sc-text-modal textarea { font-size: 20px !important; }
  .phone-digits .pd-cell { font-size: 17px !important; }
}

/* ============================================================================
   JETONS — alignés sur le natif `EvoticSkin.MINIMAL` (AkamakoLight.kt:220-265),
   en vigueur dans l'appli depuis le 02/10. C'est CE bloc qui fait foi :
   design-tokens.css pose des défauts, themes.css (chargé après, sans version)
   est neutralisé par la spécificité `:root[data-theme=…]` ci-dessous.

   Principe MINIMAL : surfaces NEUTRES (blanc / presque noir), encre violette
   très foncée, la COULEUR réservée à l'action et aux icônes. Seule la barre du
   haut garde le dégradé Akamako (#3A1771 → #7E1C86 → #C71E7B), texte blanc.
   Pas de verre obligatoire, listes plates.

   Les noms historiques (--bg, --text, --primary…) sont REMAPPÉS, jamais
   renommés : les ~4 500 `var(--…)` des feuilles existantes suivent seuls.
   ============================================================================ */
:root {
  /* ───── Palette Akamako brute (marque, ne change pas avec le thème) ───── */
  --ak-bg-top:      #3A1771;
  --ak-bg-mid:      #7E1C86;
  --ak-bg-bottom:   #C71E7B;
  --ak-pink:        #FF2E93;   /* accent fuchsia sur fond sombre */
  --ak-purple:      #A23BE0;
  --ak-lavender:    #E9DBFF;   /* texte secondaire SUR le dégradé */
  --ak-glass-base:  #190A2E;
  --ak-mine:        #E3D2FF;
  --ak-mine-ink:    #2A1450;
  --ak-accent:      #8A2BD6;
  --ak-pink-ink:    #D6207A;

  /* ───── Dégradés ───── */
  --ak-bg-grad:     linear-gradient(135deg, #3A1771 0%, #7E1C86 52%, #C71E7B 100%);
  --ak-cta:         linear-gradient(90deg, #8430B7 0%, #D12578 100%);   /* ctaVoile : blanc lisible ≥ 4,5 */
  --ak-cta-135:     linear-gradient(135deg, #8430B7 0%, #D12578 100%);

  /* ───── Verre (réservé aux surfaces posées SUR le dégradé ou une photo) ───── */
  --ak-glass-pill:
    linear-gradient(rgba(255,255,255,.08), rgba(255,255,255,.08)),
    linear-gradient(180deg, rgba(162,59,224,.16), rgba(255,46,147,.088)),
    rgba(25,10,46,.55);
  --ak-glass-panel:
    linear-gradient(rgba(255,255,255,.09), rgba(255,255,255,.09)),
    linear-gradient(180deg, rgba(162,59,224,.18), rgba(255,46,147,.099)),
    rgba(25,10,46,.64);
  --ak-glass-sheet:
    linear-gradient(rgba(255,255,255,.10), rgba(255,255,255,.10)),
    linear-gradient(180deg, rgba(162,59,224,.20), rgba(255,46,147,.11)),
    rgba(25,10,46,.74);
  --ak-glass-border: rgba(255, 255, 255, 0.14);

  /* ───── Couleurs FIXES (ne basculent pas avec le thème) ─────
     Règle « surface fixe, encre fixe » : un texte posé sur une surface écrite
     en dur (#fff, une carte de paiement, un toast noir) prend une encre fixe,
     sinon le mode sombre le rend illisible. Remplacent les couleurs hors charte
     les plus fréquentes (#1C1C2E, #6B7280, #B052E4, #DC2626, #F5B027). */
  --ink-fixed:      #332552;   /* encre sur surface claire fixe (13,75:1) */
  --muted-fixed:    #6B6B73;   /* texte secondaire sur surface claire fixe (5,28:1) */
  --night:          #17171A;   /* surface sombre fixe (toasts, feuilles sombres) */
  --violet:         #8A2BD6;   /* violet d'action lisible sur blanc (6,18:1) */
  --danger-fixed:   #B3261E;
  --gold:           #F5B027;   /* Tsiky / pièces — ICÔNES uniquement (1,9:1 en texte sur blanc) */
  --gold-ink:       #A15C00;   /* or en TEXTE sur fond clair (5,2:1) */

  /* ═══════════════ MINIMAL CLAIR (défaut) ═══════════════ */
  --page:     #FFFFFF;
  --card:     #FFFFFF;
  --ink:      #332552;
  --muted:    #6B6B73;
  --chip:     #EDEDEF;
  --line:     #C9C9D2;
  --accent:   #8A2BD6;
  --link:     #D6207A;
  --warn:     #A15C00;
  --ok:       #047857;
  --danger:   #B3261E;
  --info:     #1D4ED8;
  --nav-ink:    #6B6B73;       /* barre du bas : inactif = pageMuted */
  --nav-active: #D6207A;       /* rose corrigé pour 4,5 sur blanc */

  /* Jetons `--th-*` lus par account.css, chat… mais jamais définis : le repli blanc
     (#fff) gagnait toujours, donc des cartes BLANCHES en thème sombre sous un texte clair
     (/account/upgrade : 1,02–1,17:1 mesuré). Alias vers les jetons qui basculent. */
  --th-text:       var(--text);
  --th-text-muted: var(--text-muted);
  --th-card-bg:    var(--card-bg);
  --th-border:     var(--border);
  --th-bg:         var(--bg);

  /* Akamako « clair » historique → MINIMAL */
  --ak-page:        var(--page);
  --ak-card:        var(--card);
  --ak-card-alt:    var(--chip);
  --ak-ink:         var(--ink);
  --ak-muted:       var(--muted);
  --ak-line:        var(--line);
  --ak-nav-bg:      #FFFFFF;
  --ak-nav-edge:    #C9C9D2;

  /* Remappage des jetons historiques */
  --primary:         #8A2BD6;
  --primary-dark:    #7E1C86;
  --primary-darker:  #3A1771;
  --primary-light:   #C77DFF;
  --primary-bg:      #EBDDFF;
  --primary-bg-soft: #F6F0FE;
  --primary-grad:    linear-gradient(135deg, #7E1C86 0%, #8A2BD6 50%, #C71E7B 100%);
  --primary-grad-soft: linear-gradient(135deg, #C77DFF 0%, #FFB0D8 100%);

  --bg:              #FFFFFF;
  --bg-soft:         #F6F6F8;
  --card-bg:         #FFFFFF;
  --card-bg-alt:     #F6F6F8;
  --text:            #332552;
  --text-soft:       #4B4560;
  --text-muted:      #6B6B73;
  --text-faint:      #707078;   /* 43 règles l'utilisent comme TEXTE : 4,9:1 sur blanc */
  --border:          #E4E4EA;
  --border-strong:   #C9C9D2;
  --skeleton:        #EDEDEF;
  --skeleton-strong: #E2E2E6;

  --red:             #B3261E;
  --red-dark:        #8C1D18;
  --red-bg:          #FDECEA;
  --green:           #047857;
  --green-dark:      #065F46;
  --green-bg:        #E7F6EF;
  --blue:            #1D4ED8;
  --blue-bg:         #E8EEFD;
  --yellow:          #A15C00;
  --yellow-bg:       #FFF6E0;
  --purple:          #8A2BD6;
  --purple-bg:       #F3E6FF;

  --shadow-primary:     0 4px 16px rgba(138, 43, 214, 0.24);
  --shadow-primary-lg:  0 8px 28px rgba(138, 43, 214, 0.32);
  --shadow-primary-sm:  0 2px 8px rgba(138, 43, 214, 0.20);
  /* MINIMAL : pas d'ombre portée, juste un liseré (une carte blanche sur page blanche doit rester lisible) */
  --shadow-card:        0 0 0 1px rgba(20, 20, 30, 0.05), 0 1px 2px rgba(20, 20, 30, 0.04);
  --shadow-card-hover:  0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-nav:         none;

  /* Rayons du natif (fréquences RoundedCornerShape : 12, 14, 10, 16) */
  --r-card: 14px;

  --evo-nav-h: 58px;
  --evo-nav-space: calc(58px + var(--safe-bottom, 0px) + 34px);
}

/* Thème clair EXPLICITE : mêmes valeurs, spécificité plus forte que themes.css
   (qui posait encore --text #0E1A2C / --primary #A23BE0, hors charte). */
:root[data-theme="light"] {
  --bg: #FFFFFF; --bg-soft: #F6F6F8; --card-bg: #FFFFFF; --card-bg-alt: #F6F6F8;
  --text: #332552; --text-soft: #4B4560; --text-muted: #6B6B73; --text-faint: #707078;
  --border: #E4E4EA; --border-strong: #C9C9D2; --skeleton: #EDEDEF; --skeleton-strong: #E2E2E6;
  --primary: #8A2BD6; --primary-dark: #7E1C86; --primary-darker: #3A1771; --primary-light: #C77DFF;
  --primary-bg: #EBDDFF; --primary-bg-soft: #F6F0FE;
  --primary-grad: linear-gradient(135deg, #7E1C86 0%, #8A2BD6 50%, #C71E7B 100%);
  --primary-grad-soft: linear-gradient(135deg, #C77DFF 0%, #FFB0D8 100%);
  --shadow-primary: 0 4px 16px rgba(138, 43, 214, 0.24);
  --shadow-primary-lg: 0 8px 28px rgba(138, 43, 214, 0.32);
  --shadow-primary-sm: 0 2px 8px rgba(138, 43, 214, 0.20);
}

/* ═══════════════ MINIMAL SOMBRE ═══════════════
   Explicite + « auto » quand l'OS est sombre. Deux copies : un sélecteur dans
   une @media ne peut pas se partager avec un sélecteur hors @media. */
:root[data-theme="dark"] {
  --page: #0B0B0D; --card: #17171A; --ink: #F2F2F3; --muted: #9A9AA2; --chip: #26262B; --line: #36363F;
  --accent: #C77DFF; --link: #FF8CC6; --warn: #FFE08A; --ok: #34D399; --danger: #F87171; --info: #60A5FA;
  --nav-ink: rgba(255, 255, 255, 0.78); --nav-active: #FF2E93;
  --ak-nav-bg: #0B0B0D; --ak-nav-edge: #36363F;
  --bg: #0B0B0D; --bg-soft: #131316; --card-bg: #17171A; --card-bg-alt: #1F1F23;
  --text: #F2F2F3; --text-soft: #D4D4D8; --text-muted: #9A9AA2; --text-faint: #8A8A92;
  --border: #2A2A30; --border-strong: #36363F; --skeleton: #1F1F23; --skeleton-strong: #2A2A30;
  --primary: #C77DFF; --primary-light: #E2B8FF; --primary-dark: #E2B8FF; /* 28 règles en TEXTE, 2 en fond */
  --primary-bg: rgba(199, 125, 255, 0.16); --primary-bg-soft: rgba(199, 125, 255, 0.09);
  --red: #DC2626; --red-dark: #F87171; --red-bg: rgba(248, 113, 113, 0.16);
  --green: #047857; --green-dark: #34D399; --green-bg: rgba(52, 211, 153, 0.14);
  --blue: #60A5FA; --blue-bg: rgba(96, 165, 250, 0.14);
  --yellow: #FFE08A; --yellow-bg: rgba(255, 224, 138, 0.12);
  --purple: #C77DFF; --purple-bg: rgba(199, 125, 255, 0.14);
  --shadow-primary: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-primary-lg: 0 8px 28px rgba(0, 0, 0, 0.55);
  --shadow-primary-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.05); --shadow-nav: none;
}
:root[data-theme="dark"] body { background: var(--bg); color: var(--text); }

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --page: #0B0B0D; --card: #17171A; --ink: #F2F2F3; --muted: #9A9AA2; --chip: #26262B; --line: #36363F;
    --accent: #C77DFF; --link: #FF8CC6; --warn: #FFE08A; --ok: #34D399; --danger: #F87171; --info: #60A5FA;
    --nav-ink: rgba(255, 255, 255, 0.78); --nav-active: #FF2E93;
    --ak-nav-bg: #0B0B0D; --ak-nav-edge: #36363F;
    --bg: #0B0B0D; --bg-soft: #131316; --card-bg: #17171A; --card-bg-alt: #1F1F23;
    --text: #F2F2F3; --text-soft: #D4D4D8; --text-muted: #9A9AA2; --text-faint: #8A8A92;
    --border: #2A2A30; --border-strong: #36363F; --skeleton: #1F1F23; --skeleton-strong: #2A2A30;
    --primary: #C77DFF; --primary-light: #E2B8FF; --primary-dark: #E2B8FF; /* 28 règles en TEXTE, 2 en fond */
    --primary-bg: rgba(199, 125, 255, 0.16); --primary-bg-soft: rgba(199, 125, 255, 0.09);
    --red: #DC2626; --red-dark: #F87171; --red-bg: rgba(248, 113, 113, 0.16);
    --green: #047857; --green-dark: #34D399; --green-bg: rgba(52, 211, 153, 0.14);
    --blue: #60A5FA; --blue-bg: rgba(96, 165, 250, 0.14);
    --yellow: #FFE08A; --yellow-bg: rgba(255, 224, 138, 0.12);
    --purple: #C77DFF; --purple-bg: rgba(199, 125, 255, 0.14);
    --shadow-primary: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-primary-lg: 0 8px 28px rgba(0, 0, 0, 0.55);
    --shadow-primary-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
    --shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.05); --shadow-nav: none;
  }
  :root[data-theme="auto"] body { background: var(--bg); color: var(--text); }
}

/* ============================================================================
   Utilitaires de marque — à utiliser dans les NOUVELLES pages.
   Équivalents web de akamakoGlass(GlassLevel.…).
   ============================================================================ */

/* Fond de page « identité » (en-têtes immersifs, hubs, panneaux) */
.ak-bg { background: var(--ak-bg-grad); color: #fff; }

/* Cartes de verre — posées sur un fond sombre ou une image */
.ak-glass,
.ak-glass-panel,
.ak-glass-sheet {
  border: 1px solid var(--ak-glass-border);
  color: #fff;
}
.ak-glass       { background: var(--ak-glass-pill);  border-radius: 999px; }
.ak-glass-panel { background: var(--ak-glass-panel); border-radius: 18px; }
.ak-glass-sheet { background: var(--ak-glass-sheet); border-radius: 22px; }
.ak-glass-panel.is-active,
.ak-glass.is-active { border-color: var(--ak-pink); }

/* Bouton d'action principal : dégradé violet→rose */
.ak-cta {
  background: var(--ak-cta);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-weight: 800;
  padding: 13px 22px;
  cursor: pointer;
  box-shadow: var(--shadow-primary);
  transition: transform var(--t-fast), filter var(--t-fast);
}
.ak-cta:active { transform: scale(0.97); filter: brightness(1.06); }
.ak-cta[disabled] { opacity: .5; box-shadow: none; }

/* Pastille / puce (filtres, catégories) — version claire posée sur le contenu */
.ak-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--chip); color: var(--ink);
  border: 1px solid transparent;
  font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.ak-chip.is-active { background: var(--ak-cta); color: #fff; border-color: transparent; }

/* Texte d'accent (liens, « Voir › ») */
.ak-link { color: var(--link); font-weight: 700; text-decoration: none; }

/* En-tête de section, comme PnLabel du natif */
.ak-label {
  font-size: 11px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-muted); margin: 18px 0 8px;
}
.ak-bg .ak-label, .ak-glass-sheet .ak-label { color: rgba(255, 255, 255, .72); }

/* ============================================================================
   Rattrapages ciblés — endroits où l'ancien violet Material était écrit en dur.
   (grep `#6750A4` dans frontend/ : ces valeurs ne passent pas par les tokens)
   ============================================================================ */
.splash, .app-splash { background: var(--ak-bg-grad) !important; }