/* ═══════════════════════════════════════════════════════════
   Natty — Socle visuel partagé
   Source de vérité pour les couleurs, rayons, ombres, header,
   badges, pastilles macro et titres de section.

   Inclus par toutes les pages de la refonte, sur le même principe
   que assets/core.js et assets/nav.js : on ne redéclare plus ces
   valeurs dans le <style> de chaque page, sinon elles divergent.

   La barre de navigation basse n'est PAS ici : elle est injectée
   avec ses propres styles par assets/nav.js.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* Couleurs */
  --bg:#ffffff;
  --card:#ececef;
  --ink:#101014;
  /* Texte/icône POSÉ SUR --ink (pastilles noires, bouton principal, avatar).
     Il ne peut pas rester `#fff` en dur : en thème sombre --ink devient clair,
     et un `color:#fff` sur fond clair est illisible. Les deux vont par paire,
     toujours. */
  --on-ink:#ffffff;
  --muted:#9d9da8;
  --icon-mut:#b5b5bd;
  /* Filets et séparateurs — un `#e8e8ee` en dur reste visible en sombre. */
  --line:#e8e8ee;
  --green:#34c759;
  --amber:#ff9f0a;
  --red:#ff3b30;

  /* Rayons — superellipse plutôt que cercle parfait, cf. §8 */
  --r-xl:30px;
  --r-lg:24px;
  --r-md:18px;
  --r-full:999px;
  --r-plate:34%;      /* vignettes plats : arrondi marqué, non circulaire */

  /* Ombres neumorphiques */
  --nm-so:6px 6px 14px rgba(0,0,0,.07), -6px -6px 14px rgba(255,255,255,.9);
  --nm-bright:inset 0 1px 1px rgba(255,255,255,.9), inset 0 -1px 1px rgba(0,0,0,.02);
  --nm-soft:0 8px 22px rgba(20,20,30,.08);
  --nm-in:inset 4px 4px 9px rgba(163,167,176,.4), inset -3px -3px 8px rgba(255,255,255,.7);

  /* Noir métallisé — cartes sombres (ex. "Ma semaine") : noir quasi pur +
     deux reflets doux, sans motif/texture. Même recette que suivi.html. */
  --metal-black:
    radial-gradient(130% 65% at 12% -10%, rgba(255,255,255,0.11) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(135deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 28%),
    linear-gradient(165deg, #0c0d0f 0%, #050506 55%, #000000 100%);
  --sh-metal:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(0,0,0,0.6),
    0 10px 24px rgba(0,0,0,0.5);

  /* Métallisé clair — modules blancs (hero, panneaux, cartes Découvrir) :
     même principe que --metal-black (reflets doux, pas de motif) mais sur
     base claire, avec une ombre plus nette/définie que le neumorphisme
     standard pour un rendu plus sharp. */
  --metal-white:
    radial-gradient(130% 65% at 12% -10%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 45%),
    linear-gradient(135deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 30%),
    linear-gradient(165deg, #fcfcfd 0%, #eceef1 55%, #dadce0 100%);
  --sh-metal-light:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(150,152,160,0.25),
    6px 8px 16px rgba(20,20,30,.10),
    -4px -4px 10px rgba(255,255,255,.85);

  /* Gabarit */
  --col:480px;
  --pad:20px;
}

/* ═══ Thème sombre ═══════════════════════════════════════════
   L'attribut est posé sur <html> par assets/theme.js, chargé dans le
   <head> de façon synchrone — donc AVANT le premier rendu, sinon chaque
   changement d'écran donne un éclair blanc.

   On ne redéclare QUE les jetons : aucune règle de composant n'est
   dupliquée ici. Tout ce qui passe par une variable bascule tout seul,
   et ce qui ne bascule pas signale une couleur écrite en dur — c'est
   le seul moyen de savoir qu'il en reste.

   ⚠️ Le neumorphisme ne se transpose pas en inversant les ombres : sur
   fond sombre, un « relief blanc » à .88 d'opacité fait un halo laiteux.
   Les reliefs passent donc à ~.04, et c'est l'OMBRE portée qui creuse.
   ═══════════════════════════════════════════════════════════ */
:root[data-theme="dark"]{
  --bg:#0e0e11;
  --card:#1c1c22;
  --ink:#f4f4f7;
  --on-ink:#0e0e11;
  --muted:#8e8e99;
  --icon-mut:#75757f;
  --line:#2a2a32;
  /* Variantes « dark system » : les couleurs vives d'iOS clair vibrent et
     bavent sur fond noir. Ce sont les valeurs sombres d'Apple. */
  --green:#32d74b;
  --amber:#ffb340;
  --red:#ff453a;

  --nm-so:6px 6px 16px rgba(0,0,0,.6), -6px -6px 16px rgba(255,255,255,.035);
  --nm-bright:inset 0 1px 1px rgba(255,255,255,.05), inset 0 -1px 1px rgba(0,0,0,.35);
  --nm-soft:0 8px 24px rgba(0,0,0,.55);
  --nm-in:inset 4px 4px 9px rgba(0,0,0,.55), inset -3px -3px 8px rgba(255,255,255,.035);

  /* Le noir métallisé ne peut pas rester noir : le fond l'est déjà, la carte
     disparaîtrait. Elle s'éclaircit juste assez pour se détacher. */
  --metal-black:
    radial-gradient(130% 65% at 12% -10%, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 28%),
    linear-gradient(165deg, #23242a 0%, #17181c 55%, #0f1013 100%);
  --sh-metal:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.6),
    0 10px 24px rgba(0,0,0,0.6);

  /* Le pendant clair devient le graphite des panneaux : même rôle (module
     posé sur le fond), même relief, valeurs inversées. */
  --metal-white:
    radial-gradient(130% 65% at 12% -10%, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 45%),
    linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 30%),
    linear-gradient(165deg, #22232a 0%, #191a1f 55%, #131418 100%);
  --sh-metal-light:
    inset 0 1px 0 rgba(255,255,255,0.09),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    6px 8px 18px rgba(0,0,0,.55),
    -4px -4px 12px rgba(255,255,255,.03);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}

/* ── Pas de zoom, pas de rebond ─────────────────────────────
   Deux corrections liées, toutes deux demandées après essai sur iPhone.

   1. ZOOM — VOIR `assets/zoom.js`, qui en est le point de vérité et couvre
      TOUS les écrans, y compris ceux qui ne chargent pas cette feuille
      (`narration.html`, `suivi.html`, les pages d'entrée).
      ⚠️ Ce commentaire affirmait que « le `user-scalable=no` du <meta viewport>
      suffit à la pincée ». C'est FAUX : iOS l'ignore depuis la version 10,
      Safari comme WKWebView. Et `touch-action:manipulation` ne désarme que le
      double-tap, pas la pincée — d'où le zoom encore possible sur iPhone après
      cette première passe. La valeur est donc `pan-x pan-y` (voir le module).
      Ce qui restait juste : `touch-action` rend au passage les boutons plus
      francs (~300 ms de moins, le navigateur n'attend plus un second tap), et
      `-webkit-text-size-adjust` empêche l'autre zoom, celui que WebKit applique
      tout seul au texte.

   2. LA BARRE D'ONGLETS QUI « SUIT LE SCROLL ». Elle est pourtant en
      `position:fixed` depuis toujours : ce qu'on voit bouger, c'est le
      rebond élastique d'iOS. Quand le document dépasse ses bornes, WebKit
      translate TOUT le calque, éléments fixes compris — la barre paraît
      alors monter et redescendre. `overscroll-behavior` supprime ce rebond
      au niveau du document, donc la cause, et non le symptôme. */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overscroll-behavior:none;
}

body{
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--ink);
  min-height:100vh;
  overscroll-behavior:none;
  touch-action:pan-x pan-y;   /* pas manipulation : elle laisse passer la pincée */
  overflow-x:hidden;
}

/* Colonne centrale — même largeur et même gouttière partout */
.wrap{max-width:var(--col);margin:0 auto;padding:0 var(--pad)}

/* ── Header : icônes maison / profil ── */
/* Le haut de la WebView passe sous la barre d'état sur iPhone (encoche /
   Dynamic Island) : sans cette marge, les icônes se retrouvent collées à
   l'heure et à la batterie. env() vaut 0 sur le web, qui reste inchangé.
   Le pendant bas est géré par assets/nav.js (safe-area-inset-bottom). */
/* ⚠️ `sticky`, et non `fixed` : le retour, l'accueil et le profil doivent
   rester atteignables pendant tout le scroll (demande de Pablo), mais en
   `fixed` l'en-tête sortirait du flux et il faudrait rattraper sa hauteur
   à la main sur chaque écran — six pages, six valeurs, une régression par
   oubli. En `sticky`, la place est déjà réservée et rien ne bouge.
   Le fond est opaque, sinon le contenu défile en transparence derrière. */
.top{
  position:sticky;top:0;z-index:400;
  max-width:var(--col);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(20px + env(safe-area-inset-top, 0px)) var(--pad) 8px;
  background:var(--bg);
}
.top a,.top button,.top .hdr-ico{
  display:flex;align-items:center;justify-content:center;
  color:var(--icon-mut);background:none;border:none;cursor:pointer;padding:0;
}
/* La taille et la couleur sont aussi posées en attributs sur les <svg> des
   pages : si cette feuille ne se charge pas, les icônes gardent leur
   dimension au lieu de retomber sur le 300x150 par défaut d'un SVG sans
   dimensions. Ces règles restent prioritaires sur les attributs. */
.top svg{width:26px;height:26px;stroke:var(--icon-mut)}

/* ── Titres de section ── */
.sec-title{
  font-weight:900;font-size:21px;letter-spacing:-.2px;
  text-transform:uppercase;margin:26px 0 14px;
}
.sec-sub{font-size:11px;color:var(--muted);margin:-8px 0 12px}

/* ── Badges noirs (pilules) ── */
.badge-ink{
  display:inline-block;background:var(--ink);color:var(--on-ink);
  font-weight:800;font-size:15px;letter-spacing:.4px;
  padding:10px 18px;border-radius:var(--r-full);white-space:nowrap;
}
.badge-ink.sm{font-size:13px;padding:8px 14px}

/* ── Pastilles macro ── */
.macro-pill{
  background:var(--card);border-radius:var(--r-full);
  padding:12px 0;text-align:center;font-weight:800;font-size:15px;
}

/* ── Cartes ── */
.card-nm{background:var(--bg);border-radius:var(--r-lg);box-shadow:var(--nm-so),var(--nm-bright)}
.card-flat{background:var(--card);border-radius:var(--r-lg)}

/* ── États ── */
.empty{color:var(--muted);font-size:13px;padding:16px 4px;text-align:center}
