/* ==========================================================================
   Daisy — tokens.css  (site With Daisy, HTML/CSS sans framework)
   En clair seulement, même quand l’appareil est en sombre.
   ========================================================================== */
:root {
  /* Marque */
  --daisy-gold: #FFD14D;          /* cœur de la fleur, bouton principal. Jamais pour du texte. */
  --daisy-gold-hi: #FFE48F;       /* reflet haut du cœur */
  --daisy-gold-lo: #F2B630;       /* bord du cœur, liseré de survol */
  --daisy-amber: #F59E1F;         /* interrupteurs, curseurs */
  --daisy-amber-deep: #BD6E05;    /* ombre du cœur, liseré du bouton principal */
  --daisy-on-gold: #33200A;       /* texte sur l'or (10,7:1) */
  --daisy-accent: #A85A00;        /* texte accentué, liens (5,1:1 sur blanc) */
  --daisy-tint-bg: #FFF4D1;       /* fond des icônes de collection, sélection douce */
  --daisy-tint-ink: #A85A00;

  /* Neutres */
  --bg: #FFFFFF;
  --bg-alt: #F5F5F7;              /* bande alternée */
  --card: #FFFFFF;
  --ink: #1D1D1F;                 /* 16,8:1 */
  --ink-2: #6E6E73;               /* 5,1:1 — texte secondaire */
  --ink-3: #86868B;               /* 3,6:1 — mentions ≥ 17 px ou non essentielles */
  --ink-4: #C7C7CC;               /* désactivé, chevrons */
  --sep: rgba(60,60,67,.16);
  --fill: rgba(120,120,128,.12);

  /* Sémantique */
  --listen: #EB454D;              /* centre vocal actif (fond ; texte blanc ≥ 18 px seulement) */
  --success: #1A7F37;             /* meilleure valeur, succès (5,1:1) */
  --warn: #C2410C;                /* à vérifier (5,2:1) */
  --danger: #D70015;              /* destructif (5,4:1) */

  /* Verre — réservé à la fleur, à l'Atelier et à la barre de navigation */
  --glass-top: rgba(255,255,255,.62);
  --glass-bot: rgba(255,255,255,.42);
  --glass-rim: rgba(255,255,255,.95);
  --glass-edge: rgba(0,0,0,.07);
  --glass-dense-top: rgba(255,255,255,.82);   /* sur une photo chargée */
  --glass-dense-bot: rgba(255,255,255,.68);
  --glass-blur: 24px;
  --nav-glass: rgba(255,255,255,.72);
  --nav-blur: 20px;

  /* Typographie */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  /*            taille / interligne / graisse / approche  (desktop → mobile ≤ 734 px) */
  --t-hero:     700 80px/1.05 var(--font-display);   --t-hero-ls: -0.015em;     /* → 48px/1.08 */
  --t-headline: 600 56px/1.07 var(--font-display);   --t-headline-ls: -0.005em; /* → 40px/1.1 */
  --t-title1:   600 40px/1.1  var(--font-display);   --t-title1-ls: 0;          /* → 32px */
  --t-title2:   600 28px/1.14 var(--font-display);   --t-title2-ls: 0.007em;    /* → 24px */
  --t-title3:   600 21px/1.24 var(--font-display);   --t-title3-ls: 0.011em;    /* → 19px */
  --t-intro:    400 21px/1.38 var(--font);           --t-intro-ls: 0.011em;     /* → 19px/1.42 */
  --t-body:     400 17px/1.47 var(--font);           --t-body-ls: -0.022em;
  --t-caption:  400 14px/1.43 var(--font);           --t-caption-ls: -0.016em;
  --t-fine:     400 12px/1.33 var(--font);           --t-fine-ls: -0.01em;
  --t-eyebrow:  600 17px/1.24 var(--font);           /* en couleur d'accent, casse normale */

  /* Espacements (base 4) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-14: 56px; --sp-18: 72px; --sp-20: 80px; --sp-30: 120px;
  --wrap: 980px;                  /* colonne de lecture */
  --wrap-wide: 1180px;
  --gutter: 22px;                 /* 16px sous 734 px */
  --band-y: 120px;                /* 100px ≤ 1068, 72px ≤ 734 */

  /* Rayons */
  --r-tile: 28px;                 /* 22px en mobile */
  --r-card: 22px;
  --r-field: 12px;
  --r-key: 8px;
  --r-pill: 980px;

  /* Ombres — les tuiles n'en ont pas */
  --shadow-float: 0 10px 30px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.08);
  --shadow-flower: 0 20px 50px rgba(0,0,0,.20), 0 2px 8px rgba(0,0,0,.08);
  --shadow-window: 0 24px 70px rgba(0,0,0,.24), 0 0 0 .5px rgba(0,0,0,.20);

  /* Ressorts — courbe d'un ressort critique (amortissement 1) et d'un ressort 0,8, durées d'établissement */
  --spring-1: linear(0, 0.034, 0.115, 0.215, 0.321, 0.423, 0.517, 0.6, 0.672, 0.732, 0.783, 0.826, 0.86, 0.889, 0.912, 0.93, 0.945, 0.956, 0.966, 0.973, 0.979, 0.984, 0.987, 0.99, 0.992, 0.994, 0.995, 0.996, 0.997, 0.998, 0.998, 0.999, 1);
  --spring-08: linear(0, 0.03, 0.106, 0.206, 0.316, 0.428, 0.533, 0.629, 0.712, 0.784, 0.842, 0.89, 0.927, 0.956, 0.977, 0.992, 1.003, 1.009, 1.013, 1.015, 1.015, 1.014, 1.013, 1.012, 1.01, 1.008, 1.007, 1.005, 1.004, 1.003, 1.002, 1.002, 1);
  --dur-press: 200ms;   /* réponse 0,12 */
  --dur-hover: 265ms;   /* réponse 0,18 */
  --dur-bloom: 355ms;   /* réponse 0,24 — la fleur s'ouvre */
  --dur-close: 265ms;   /* réponse 0,18 */
  --dur-arrive: 440ms;  /* réponse 0,30 — pétales adaptatifs */
  --dur-bubble: 385ms;  /* réponse 0,26 */
  --dur-drawer: 405ms;  /* réponse 0,30 / amortissement 0,8 */
  --dur-sheet: 405ms;   /* réponse 0,30 / amortissement 0,8 */
  --dur-banner: 515ms;  /* réponse 0,35 */
  --dur-fade: 180ms;    /* équivalent « Réduire les animations » */
}


@media (max-width: 1068px) { :root { --band-y: 100px; } }
@media (max-width: 734px)  { :root { --band-y: 72px; --gutter: 16px; --r-tile: 22px; } }

/* Réduire la transparence : verre givré plein, plus de flou */
@media (prefers-reduced-transparency: reduce) {
  :root { --glass-top: #F5F5F7; --glass-bot: #EDEDF0; --glass-dense-top: #F5F5F7; --glass-dense-bot: #EDEDF0; --glass-edge: #C7C7CC; --glass-blur: 0px; --nav-glass: #FFFFFF; --nav-blur: 0px; }
}
/* Augmenter le contraste : bords définis, texte secondaire plus foncé */
@media (prefers-contrast: more) {
  :root { --glass-edge: #6E6E73; --ink-2: #48484A; --sep: rgba(60,60,67,.45); }
}
/* Réduire les animations : fondus courts, pas de ressort ni de déplacement */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-press: 1ms; --dur-hover: var(--dur-fade); --dur-bloom: var(--dur-fade); --dur-arrive: var(--dur-fade); --dur-drawer: var(--dur-fade); --dur-sheet: var(--dur-fade); --dur-banner: var(--dur-fade); --spring-1: ease; --spring-08: ease; }
}

/* Base */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: var(--t-body); letter-spacing: var(--t-body-ls); -webkit-font-smoothing: antialiased; font-optical-sizing: auto; }
a { color: var(--daisy-accent); }

/* Barre de navigation en verre — le contenu défile dessous */
.nav { position: sticky; top: 0; z-index: 10; height: 48px; background: var(--nav-glass); -webkit-backdrop-filter: blur(var(--nav-blur)) saturate(180%); backdrop-filter: blur(var(--nav-blur)) saturate(180%); }

/* Bouton principal doré : une seule fois par écran */
.btn-primary { background: var(--daisy-gold); color: var(--daisy-on-gold); font-weight: 600; border: 0; border-radius: var(--r-pill); height: 44px; padding: 0 22px; box-shadow: inset 0 0 0 .5px rgba(189,110,5,.35), inset 0 1px 0 rgba(255,255,255,.55); transition: transform var(--dur-press) var(--spring-1); }
.btn-primary:active { transform: scale(.97); }