/* Wonder Cambodia — Design System · tokens
   Source unique : docs/design-system.md (unification typographique 2026-10-08).
   Aucune valeur hors de ce fichier ne doit être inventée :
   toute couleur/rayon/espace d'un composant vient d'un token ci-dessous,
   et toute typographie consomme l'un des 14 styles (9 Poppins + 5 DM Serif). */

:root {
  /* ── Couleurs · huit rôles (Foundations) ─────────────────────────── */
  --w-ink: #151513;            /* texte principal */
  --w-paper: #ffffff;          /* fond de page — BLANC (brief mobile 2026-09-28 : l'ancien fond crème retiré) */
  --w-surface: #ffffff;        /* carte */
  --w-muted: #696763;          /* texte secondaire */
  --w-line: #f3f3f3;           /* bordure — neutre unifié #f3f3f3 (D-179) */
  /* Bordure visible des contrôles d'en-tête : relevée sur /app/experience
     (`.header-icon-control`, 1 px #E9E7E2, rayon 10) — une bordure #F3F3F3
     serait invisible sur le blanc. */
  --w-line-strong: #e9e7e2;
  --w-context: #f3f3f3;        /* surface contextuelle — neutre unifié #f3f3f3 (D-179) */
  --w-terracotta: #a7543d;     /* signature terracotta */
  --w-terracotta-soft: #f7eee8;/* teinte d'accompagnement */

  /* Couleurs dérivées (code uniquement, jamais une variante de marque) */
  --w-focus-ring: #a7543d;     /* anneau de focus 2 px, offset 2 px (contrat DS : terracotta, partout) */
  --w-overlay-scrim: rgba(21, 21, 19, 0.32);
  --w-shadow-sheet: 0 -8px 28px rgba(21, 21, 19, 0.10);
  --w-shadow-panel: 0 8px 28px rgba(21, 21, 19, 0.10);
  --w-shadow-field: 0 2px 12px rgba(21, 21, 19, 0.07); /* polish #2 : barre de recherche principale */
  --w-shadow-menu: 0 16px 40px rgba(39, 39, 38, 0.125); /* menu secondaire — relevé sur /app/experience */

  /* ── Typographie · système unique (docs/design-system.md §3) ─────── */
  --w-font-sans: "Poppins", system-ui, sans-serif;
  --w-font-display: "DM Serif Display", Georgia, serif;

  /* Poppins — 9 styles (interlignes unitless : text reflow, zoom/override sûrs) */
  --w-badge: 500 0.625rem / 1.4 var(--w-font-sans);           /* 10 · pastilles et compteurs secondaires */
  --w-overline: 600 0.6875rem / 1.45 var(--w-font-sans);      /* 11 · sur-titres (CAPS + letter-spacing à l'usage) */
  --w-secondary: 400 0.8125rem / 1.54 var(--w-font-sans);     /* 13 · descriptions, métas, faits, notes, labels, statuts, corps PC */
  --w-action: 600 0.8125rem / 1.54 var(--w-font-sans);        /* 13 · boutons, liens, onglets, puces interactives */
  --w-body: 400 1rem / 1.5 var(--w-font-sans);                /* 16 · lecture mobile (saisies : 16 px figé) */
  --w-subtitle: 600 1.125rem / 1.33 var(--w-font-sans);       /* 18 · intros ; valeurs et statistiques */
  --w-section-title: 600 1rem / 1.375 var(--w-font-sans);     /* 16 · sections ; titres d'items */
  --w-title-compact: 600 1.25rem / 1.3 var(--w-font-sans);    /* 20 · titres de module, sous-sections, titre réduit */
  --w-title: 600 1.6875rem / 1.15 var(--w-font-sans);         /* 27 · titres de page/panneau/fiche ; valeurs fortes */

  /* DM Serif Display — 5 styles */
  --w-card-title: 400 1rem / 1.375 var(--w-font-display);     /* 16 · titres de cartes */
  --w-display-item: 400 1.5rem / 1.05 var(--w-font-display);  /* 24 · cartes XL (trajet, moment, hôtel, étape) */
  --w-display-section: 400 clamp(1.875rem, 3.3vw, 2.875rem) / 1.02 var(--w-font-display); /* 30→46 · titres éditoriaux de section */
  --w-display-dialog: 400 clamp(2.125rem, 5vw, 3.3125rem) / 0.98 var(--w-font-display);    /* 34→53 · dialogues et sheets */
  --w-display-hero: 400 clamp(3rem, 7vw, 5rem) / 0.98 var(--w-font-display);               /* 48→80 · ouvertures pleine page */

  --w-weight-medium: 500;
  --w-weight-strong: 600;

  /* ── Rayons (rôles) ──────────────────────────────────────────────── */
  --w-radius-control: 12px;    /* contrôles */
  --w-radius-fact: 14px;       /* faits / cartes */
  --w-radius-reco: 16px;       /* recommandations */
  --w-radius-panel: 24px;      /* panneaux */
  /* Exceptions gelées — ne pas « normaliser » */
  --w-radius-pill: 999px;      /* pilules, avatars, pastilles de ville */
  --w-radius-segment-active: 9px; /* segment actif de la bascule 182×44 */
  --w-radius-nav: 15px;        /* nav basse (relevé figma/10-mon-voyage.md) */
  --w-radius-v46-panel: 20px;  /* panneau de configuration fiche V4.6 (exception applicative) */
  --w-radius-hero: 0px;        /* hero full bleed */

  /* ── Espacements (échelle V1) ────────────────────────────────────── */
  --w-space-1: 4px;
  --w-space-2: 8px;
  --w-space-3: 12px;
  --w-space-4: 14px;
  --w-space-5: 16px;
  --w-space-6: 18px;
  --w-space-7: 20px;
  --w-space-8: 22px;
  --w-space-9: 24px;
  --w-space-10: 32px;

  /* ── Cibles et contrôles ─────────────────────────────────────────── */
  --w-target: 44px;            /* cible interactive minimale */
  --w-cta-height: 48px;        /* bouton primaire */
  --w-border-width: 1px;
  --w-bascule-height: 44px;    /* bascule Assistant / Mon voyage */
  --w-bascule-width: 182px;
  --w-bascule-padding: 3px;

  /* ── Mise en page ────────────────────────────────────────────────── */
  --w-container: 1680px;       /* canvas desktop (contrat composition : 88–92 % du viewport) */
  --w-gutter-desktop: 32px;    /* 1024 ; 48 à 1280, 56 à 1440, 90 à 1920 */
  --w-panel-width: 400px;      /* panneau Wonder PC — largeur d'essai validée par la recette côte à côte */
  --w-content-min: 680px;      /* largeur de **contenu** minimale (gouttières, rail et scrollbar déduits)
                                  pour le côte-à-côte — en dessous : vue Wonder dédiée */
  --w-sidebar-width: 56px;     /* rail de navigation PC — repliée par défaut, libellés au survol/focus */
  --w-margin-mobile-320: 16px;
  --w-margin-mobile-390: 20px;
  --w-nav-height: 64px;
  --w-header-height: 64px;     /* hauteur de l'en-tête — remise à 0 sur PC (bandeau supprimé) */
  /* Breakpoints (documentés ; CSS ne permet pas les variables en media query) :
     mobile < 768 · compact 768–1023 · PC ≥ 1024 */

  /* ── Commandes flottantes (panier, Mon espace) ───────────────────── */
  --w-float-size: 44px;        /* cible interactive des commandes globales */
  --w-float-inset: 16px;       /* distance au bord haut/droit du viewport */
  --w-float-gap: 8px;
  /* Bande d'évitement **horizontale** : les deux commandes, leurs marges et un
     dégagement — largeur à réserver pour qu'aucun contrôle ne passe dessous. */
  --w-float-reserve: calc(var(--w-float-inset) + var(--w-float-size) * 2 + var(--w-float-gap) + var(--w-space-2));
  /* Bande **verticale** : hauteur occupée par les commandes et leur marge —
     le contenu du panneau Wonder et les barres collantes commencent en dessous. */
  --w-float-band-y: calc(var(--w-float-inset) + var(--w-float-size) + var(--w-space-2));
  --w-glass-bg: rgba(255, 255, 255, 0.72);      /* verre dépoli discret */
  --w-glass-fallback: rgba(255, 255, 255, 0.97);/* repli opaque si le flou est indisponible */
  --w-glass-border: rgba(21, 21, 19, 0.08);
  --w-glass-blur: 14px;
  --w-assistant-glass: rgba(240, 248, 242, 0.74);
  --w-assistant-glass-blur: 28px;
  --w-assistant-mobile-glass: var(--w-assistant-glass);
  --w-assistant-mobile-blur: var(--w-assistant-glass-blur);
  --w-assistant-user-bubble: rgba(221, 239, 226, 0.92);
  --w-assistant-focus: rgba(82, 132, 99, 0.58);

  /* ── Superposition (ordre global unique) ─────────────────────────── */
  /* contenu 1 · sticky de page ≤ 60 · panneau Wonder 70 · notifications 80 ·
     rail de navigation 90 (infobulles comprises, toujours utilisable) ·
     commandes globales 95 · modales = couche supérieure native (`<dialog>`),
     au-dessus de tout. */
  --w-z-sticky: 60;
  --w-z-panel: 70;
  --w-z-toast: 80;
  --w-z-sidebar: 90;
  --w-z-float: 95;

  /* ── Mouvement ───────────────────────────────────────────────────── */
  --motion-fast: 140ms;
  --motion-normal: 200ms;
  --motion-page: 160ms;
  --motion-sheet: 240ms;
  --motion-close: 180ms;
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --w-transition-fast: var(--motion-fast) var(--ease-standard);
  --w-transition: var(--motion-normal) var(--ease-standard);
}

/* Échelle de marque PC — variantes attachées aux usages de page (docs/design-system.md §4).
   Les usages « module » d'un même style gardent la valeur de base. */
@media (min-width: 1024px) {
  :root {
    --w-pc-feature-title: 600 2.5rem / 1.2 var(--w-font-sans);   /* 40 · titres de page/panneau/fiche */
    --w-pc-section-title: 600 1.25rem / 1.4 var(--w-font-sans);  /* 20 · sections de page */
    --w-pc-subtitle: 600 0.9375rem / 1.33 var(--w-font-sans);    /* 15 · intros de page */
    --w-pc-body: 400 0.8125rem / 1.54 var(--w-font-sans);        /* 13 · corps et secondaire */
    --w-body: var(--w-pc-body);
    /* PC : plus de bandeau supérieur pleine largeur — les offsets qui dépendaient
       de l'en-tête (sticky, vues pleine fenêtre) partent du haut du viewport. */
    --w-header-height: 0px;
  }
}