/* ============================================================================
   Evotic — MOTIFS DE PAGE communs (charte Akamako).

   Toutes les pages ajoutées pendant le chantier de parité s'écrivent avec ces
   classes, comme les écrans natifs s'écrivent avec `akamakoGlass` + `EvoTopBar`.
   Une page = un HTML court + un petit script ; la peinture vit ici.

   MINIMAL (natif `EvoticSkin.MINIMAL`, depuis le 02/10) : le contenu est TOUJOURS
   sur une surface neutre (#FFFFFF / #0B0B0D) ; seule la barre du haut porte le
   dégradé Akamako. `.evo-page-brand` (hubs, écrans courts) était peint en verre
   sur le dégradé : il prend désormais le même fond que `.evo-page` — la classe
   est gardée pour ne toucher à aucun HTML, ses variantes « verre » ci-dessous
   sont neutralisées (mêmes jetons que la page claire).
   ============================================================================ */

.evo-page, .evo-page-brand { background: var(--bg); color: var(--text); min-height: 100vh; }

.evo-wrap {
  max-width: var(--max-w); margin: 0 auto;
  padding: 14px 12px 20px;
  display: flex; flex-direction: column; gap: 12px;
}

/* ───────────────────────────── Cartes ───────────────────────────── */

.evo-card {
  background: var(--card-bg); color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-card, 14px); padding: 14px;
  box-shadow: none;
}

.evo-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.evo-card-head > div { flex: 1; min-width: 0; }
/* Une référence sans espace (« ACO N°02-26/MiASA/SG/… ») élargissait la carte, puis toute la page
   (455 px sur un téléphone de 375, 30/10) : on coupe un mot SEULEMENT s'il ne tient pas. */
.evo-wrap { overflow-wrap: anywhere; }
.evo-card-head b { display: block; font-size: 16px; font-weight: 900; }
.evo-card-head small { display: block; font-size: 12.5px; color: var(--text-muted); }

/* Pastille d'icône colorée (les couleurs viennent du catalogue de services, posées
   en ligne par evo-page.js en `background:linear-gradient(c1,c2)`) */
.evo-ic {
  width: 42px; height: 42px; border-radius: 12px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; color: #fff;
}
.evo-ic-lg { width: 52px; height: 52px; border-radius: 16px; font-size: 21px; }

/* ───────────────────────────── Listes ───────────────────────────── */

.evo-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px; border-radius: var(--r-card, 14px);
  background: var(--card-bg); border: 1px solid var(--border-strong);
  color: var(--text); text-decoration: none; cursor: pointer;
  font-family: var(--font); font-size: 14.5px; text-align: left;
}
.evo-row + .evo-row { margin-top: 8px; }
.evo-row-txt { flex: 1; min-width: 0; }
.evo-row-txt b { display: block; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evo-row-txt small { display: block; font-size: 12.5px; color: var(--text-muted); }
.evo-row:active { transform: scale(.995); }
.evo-row .evo-chev { color: var(--text-faint); font-size: 13px; }

/* ───────────────────────────── Grilles ─────────────────────────────
   Comme ServicesScreen.kt : PAS de tuile. Une icône COLORÉE de 48 px (le dégradé
   du catalogue découpé sur le glyphe, pas de pastille pleine) dans un carré
   arrondi de 14 px, le libellé en encre dessous, 2 lignes au plus, et un mot
   n'est jamais coupé en deux (il passe entier à la ligne). */

.evo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 6px; }
@media (max-width: 340px) { .evo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.evo-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Tablette / bureau : la colonne centrale fait jusqu'à 920 px — quatre icônes y flottaient
   à 220 px d'écart. On remplit la ligne (≈ 7 par ligne à 900 px), comme une grille d'apps. */
@media (min-width: 768px) {
  .evo-grid:not(.evo-grid-2) { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
}
.evo-grid-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 6px; padding: 4px 2px; border-radius: 14px;
  background: transparent; border: 0;
  color: var(--text); text-decoration: none; cursor: pointer;
  font-family: var(--font); text-align: center;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}
.evo-grid-tile:active { background: var(--skeleton); }
.evo-grid-tile .evo-ic {
  width: 48px; height: 48px; border-radius: 14px; font-size: 26px;
  -webkit-background-clip: text !important; background-clip: text !important; /* !important : le `background:` en ligne remet le clip à zéro */
  -webkit-text-fill-color: transparent; color: transparent;
}
.evo-grid-tile b {
  font-size: 12.5px; font-weight: 700; margin-top: 0; line-height: 1.25;
  color: var(--text); max-width: 100%;
  overflow-wrap: normal; word-break: normal; hyphens: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.evo-grid-tile small { font-size: 11px; color: var(--text-muted); line-height: 1.2; }
/* `.evo-wrap` autorise la coupure d'un mot trop long (référence sans espace) : pas
   dans une grille d'icônes, où « Pharmacies » ne doit jamais devenir « Pharmaci / es ». */
.evo-wrap .evo-grid-tile, .evo-wrap .evo-grid-tile b { overflow-wrap: normal; }
/* Tuile-photo (mes vibes) : la légende est posée sur l'image, en blanc. */
.evo-grid-tile:has(> img) { color: #fff; background: var(--night, #17171A); border-radius: 14px; }

/* ───────────────────── Titres, notes, états ───────────────────── */

/* Titre de section, comme le natif : barre rose verticale + LIBELLÉ en capitales
   (encre) ; un compteur éventuel (`<small>` ou `.evo-h-count`) en gris à droite. */
.evo-h {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text); margin: 12px 0 4px;
}
.evo-h::before {
  content: ''; flex: 0 0 auto; width: 3px; height: 14px; border-radius: 2px;
  background: var(--ak-pink);
}
.evo-h small, .evo-h .evo-h-count { font-size: 12px; font-weight: 700; color: var(--text-muted); letter-spacing: 0; }

.evo-note { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-soft); }

.evo-empty {
  text-align: center; padding: 26px 14px; color: var(--text-muted); font-size: 14px;
}
.evo-empty > i { display: block; font-size: 34px; margin-bottom: 10px; color: var(--primary); }

.evo-kv {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 9px 0; font-size: 13.5px;
  border-bottom: 1px solid var(--border);
}
.evo-kv:last-child { border-bottom: 0; }
.evo-kv span { color: var(--text-muted); }
.evo-kv b { font-weight: 800; }

.evo-tag {
  display: inline-block; font-size: 11px; font-weight: 800;
  padding: 3px 9px; border-radius: 999px;
  background: var(--primary-bg); color: var(--accent);
}
.evo-tag.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.evo-tag.warn { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.evo-tag.off { background: var(--chip); color: var(--text-muted); }
/* Clair : #A15C00 / #047857 sur leur propre teinte à 14 % tombaient à 4,3–4,5:1 (lot D6, /ministeres).
   Encre un cran plus sombre, uniquement hors thème sombre (le sombre a ses propres jetons clairs). */
:root:not([data-theme="dark"]) .evo-tag.warn { color: #8A4F00; }
:root:not([data-theme="dark"]) .evo-tag.ok { color: #036349; }

/* ───────────────────────────── Boutons ───────────────────────────── */

.evo-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 20px; border-radius: 999px; border: 0;
  background: var(--ak-cta); color: #fff;
  font-family: var(--font); font-size: 15px; font-weight: 800;
  cursor: pointer; text-decoration: none; box-shadow: var(--shadow-primary);
}
.evo-btn:active { transform: scale(.97); }
.evo-btn[disabled] { opacity: .5; box-shadow: none; pointer-events: none; }
.evo-btn-full { width: 100%; }
.evo-btn-ghost {
  background: transparent; color: var(--primary);
  border: 1.5px solid var(--border-strong); box-shadow: none;
}
.evo-btn-danger { background: linear-gradient(90deg, #C1121F, #E0245E); }

/* ───────────────────────────── Champs ───────────────────────────── */

.evo-field { display: block; margin-bottom: 12px; }
.evo-field > span {
  display: block; font-size: 12.5px; font-weight: 800; margin-bottom: 6px;
  color: var(--text-soft);
}
.evo-field input, .evo-field textarea, .evo-field select {
  width: 100%; padding: 12px 14px; border-radius: 14px;
  border: 1px solid var(--border-strong); background: var(--card-bg); color: var(--text);
  font-family: var(--font); font-size: 15px; outline: none;
}
.evo-field input:focus, .evo-field textarea:focus { border-color: var(--primary); }
.evo-field textarea { min-height: 96px; resize: vertical; }

/* ───────────────────────── Squelette de chargement ───────────────────────── */

.evo-skel {
  height: 64px; border-radius: 16px; margin-bottom: 8px;
  background: linear-gradient(90deg, var(--skeleton) 25%, var(--skeleton-strong) 37%, var(--skeleton) 63%);
  background-size: 400% 100%;
  animation: evo-skel 1.3s ease infinite;
}
@keyframes evo-skel { from { background-position: 100% 0; } to { background-position: 0 0; } }

@media (prefers-reduced-motion: reduce) {
  .evo-skel { animation: none; }
}

/* Vignette d'une ligne ou d'une carte (voir EvoPage.thumb) */
.evo-thumb {
  width: 52px; height: 52px; border-radius: 13px;
  object-fit: cover; flex: 0 0 auto; background: var(--skeleton);
}
.evo-thumb-round { width: 44px; height: 44px; border-radius: 50%; }
.evo-thumb-avatar { width: 88px; height: 88px; border-radius: 50%; margin: 0 auto 10px; display: block; }

/* ── Bouton « maintiens pour parler » du talkie ─────────────────────────────
   Gros, rond, au pouce : c'est le seul geste de l'écran, il doit se trouver
   sans regarder. `touch-action: none` sinon le navigateur interprète le maintien
   comme un début de défilement et coupe la prise de parole. */
.tk-ptt {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  width: 168px; height: 168px; margin: 6px auto 12px;
  border-radius: 50%; border: 3px solid rgba(255, 255, 255, .5);
  background: var(--ak-cta); color: #fff;
  font-family: var(--font); font-size: 13.5px; font-weight: 800;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  touch-action: none; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 10px 30px rgba(255, 46, 147, .35);
  transition: transform .1s ease, box-shadow .15s ease;
}
.tk-ptt i { font-size: 44px; }
.tk-ptt span { max-width: 130px; line-height: 1.25; }
.tk-ptt.is-on {
  background: linear-gradient(135deg, #C1121F, #E0245E);
  transform: scale(1.05);
  box-shadow: 0 0 0 10px rgba(224, 36, 94, .18), 0 10px 30px rgba(193, 18, 31, .45);
}
.tk-ptt:active { transform: scale(.97); }

.tk-low {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  font-size: 12.5px; color: var(--text-muted); cursor: pointer;
}
.tk-low input { width: 18px; height: 18px; accent-color: var(--ak-pink); }

/* Lot D5 (30/10) — thème SOMBRE : les champs SANS style propre (ex. itinéraire : #it-villes, #it-dep,
   style en ligne sans fond) prenaient le blanc du navigateur sur la page #0B0B0D. Spécificité NULLE
   (:where partout) : tout champ déjà stylé par sa page garde la main. Retour arrière : supprimer ce bloc. */
:where(:root[data-theme="dark"]) :where(.evo-page, .evo-page-brand) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]), select, textarea) {
  background-color: var(--card-bg-alt, #1F1F23);
  color: var(--text, #F2F2F3);
  border: 1px solid var(--border-strong, #36363F);
  color-scheme: dark;
}