/* =========================================================================
   NOVA POTENTIEL — Design tokens
   Fidèles au Figma « Hole » (4gNny9z7au9UkfOINTvoIF) : géométrie, échelle
   typographique, rayons et flous sont repris tels quels. Seules les
   COULEURS changent — substitution de rôle vers « pierre & bronze ».

   Correspondance avec la maquette :
     #d9fd76 lime vif  → --brass   (pastille claire, texte sombre dessus)
     #282828 encre     → --ink
     #f5f5f5 surface   → --surface
     #8d8d8d gris      → --muted
     #cfcfcf gris clair→ --muted-dark
     #040607 noir      → --night
     #363839 gris fonc→ --night-2
     #064c37 forêt     → --bronze-deep  (bandeau)
     #c2f96c lime bis  → --brass        (les deux limes sont fusionnés)
   ========================================================================= */

:root {
  /* --- Base noir & blanc ---------------------------------------------------
     Neutres purs : la page ne porte aucune teinte. Toute la couleur est
     réservée aux éléments actionnables (voir « Accents » plus bas).       */
  --ink:         #141414;  /* texte principal, nav, titres                  */
  --paper:       #FFFFFF;  /* fond de page                                  */
  --card:        #FFFFFF;  /* nav, cartes, boutons pilule (posés sur photo) */
  --surface:     #F2F2F2;  /* fond des pastilles et blocs en creux          */
  --line:        #E4E4E4;  /* filets sur fond clair                         */
  --wordmark:    #DCDCDC;  /* lettrage géant du pied de page                */

  /* --- Texte secondaire ---------------------------------------------------- */
  --muted:       #6F6F6F;  /* paragraphes secondaires sur clair — 5,3:1     */
  --muted-dark:  #B4B4B4;  /* texte secondaire sur fond sombre — 9,6:1      */

  /* --- Accents : réservés à ce qui se clique ------------------------------- */
  --brass:       #DFC68E;  /* pastille des boutons — porte du texte SOMBRE  */
  --bronze:      #8A6A32;  /* liens et points sur fond clair                */
  --bronze-lt:   #C9A961;  /* accent sur fond sombre                        */

  /* --- Nuit ---------------------------------------------------------------- */
  --night:       #0E0E0E;  /* section articles, newsletter, bandeau         */
  --night-2:     #262626;  /* média sur fond nuit                           */
  --on-night:    #F2F2F2;  /* texte sur fond nuit                           */

  /* --- Voiles & verre (repris à l'identique de la maquette) ---------------- */
  --veil:        rgba(0, 0, 0, .20);            /* calque sur les photos    */
  --glass-from:  rgba(255, 255, 255, .30);
  --glass-to:    rgba(255, 255, 255, .05);
  --glass-to-lg: rgba(255, 255, 255, .10);
  --glass-edge:  rgba(255, 255, 255, .80);

  /* Traitement unique des photos : noir et blanc franc, sans virage.
     C'est ce qui absorbera les futurs visuels du client sans casser
     l'unité — et ce qui laisse la couleur aux seuls boutons.            */
  --img-filter:  grayscale(1) contrast(1.05);

  /* --- Polices -------------------------------------------------------------- */
  --f-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --f-display: 'Urbanist', var(--f-sans);   /* bandeau marquee uniquement    */

  /* --- Échelle typographique (valeurs desktop du Figma) --------------------- */
  --t-marquee: 67px;   /* Urbanist 500, ls .01em, lh 1.3                     */
  --t-h1:      48px;   /* Inter 800, capitales — réduit depuis les 60px du Figma */
  --t-h2:      44px;   /* Inter 700, ls -.02em                              */
  --t-h3:      24px;   /* Inter 700 — titres de carte, wordmark nav         */
  --t-lead:    20px;   /* Inter 400 — chapô                                 */
  --t-body:    16px;   /* Inter 400 — plancher de la maquette               */

  /* --- Rayons (identiques au Figma) ---------------------------------------- */
  --r-inner:   16px;   /* carte imbriquée                                   */
  --r-chip:    20px;   /* badge / chip pilule                               */
  --r-card:    24px;   /* grandes cartes, panneau flottant                  */
  --r-pill:    40px;   /* barre de nav, boutons pilule                      */
  --r-round:  100px;   /* pastilles circulaires 44 / 56                     */
  --r-stat:    10px;   /* barre statistique du hero                         */

  /* --- Flous (identiques au Figma) ----------------------------------------- */
  --blur-sm:   10px;   /* barre statistique                                 */
  --blur-md:   20px;   /* bouton secondaire du hero                         */
  --blur-lg:   30px;   /* voile texte des cartes bento                      */
  --blur-xl:   40px;   /* panneau flottant du hero                          */
  --blur-2xl:  50px;   /* barre de navigation                               */

  /* --- Espacement (base 4, valeurs relevées) ------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-7: 28px;  --s-8: 32px;
  --s-10: 40px; --s-15: 60px; --s-20: 80px;

  /* --- Grille --------------------------------------------------------------- */
  --grid-max:    1280px;
  --grid-gutter:   80px;
  --grid-gap:      24px;

  /* Bento : 522 + 24 + 355 + 24 + 355 = 1280 */
  --bento-lead: 522fr;
  --bento-side: 355fr;

  /* --- Contrôles ------------------------------------------------------------ */
  --ctl-nav-h:   80px;
  --ctl-btn:     44px;
  --ctl-btn-lg:  56px;
  --ctl-btn-pad:  6px;
}

@media (max-width: 1023px) {
  :root {
    --t-marquee: clamp(30px, 5vw, 67px);
    --t-h1:      clamp(28px, 5vw, 48px);
    --t-h2:      clamp(27px, 4.4vw, 44px);
    --t-h3:      20px;
    --t-lead:    18px;
    --grid-gutter: 40px;
  }
}

@media (max-width: 767px) {
  :root {
    --grid-gutter: 20px;
    --s-15:        40px;
    --ctl-nav-h:   64px;
  }
}