/* tokens.css — Le Carré Louis-Lévesque
   Source : DESIGN_SYSTEM.md v1.0 (octobre 2026). Mêmes noms de variables que le gabarit :
   pour changer de marque, on change les valeurs, jamais les noms.
   Seul fichier où une valeur visuelle a le droit d'exister. */

:root {
  /* ===== Couleurs de marque (verrouillées — ne jamais dériver) ===== */
  --c-fond:        #F2EBD3;  /* Crème — fond principal */
  --c-fond-2:      #F7F4EE;  /* Crème pâle — fonds alternés, cartouches, champs */
  --c-texte:       #2E2A26;  /* Charbon — texte, fonds du soir */
  --c-fond-soir:   #EDE1C5;  /* Crème légèrement plus chaud (crème + 12 % de caramel) : fond de la séquence « soir » */
  --c-soir-2:      #3A352F;  /* Charbon légèrement plus clair : emplacement d’image réservé sur la surface foncée */
  --c-ambre:       #8A5F33;  /* Ambre FONCÉ : réservé aux commandes (puces, onglets sélectionnés, bordure de survol des plans) où le crème doit passer à 4,67:1. Les SURFACES ambrées (hero, bandeau final, pied de page) utilisent le bois ambré #C89B5F (--c-dore). */
  --c-sable:       #E7D8B6;  /* Sable : 2e arrêt du fond de la journée (charbon dessus : 10,1:1) */
  --c-ambre-doux:  #DBC298;  /* Ambre doux : 3e arrêt du fond de la journée (charbon dessus : 8,3:1) */
  --c-dore:        #C89B5F;  /* Doré — filets, cadres, pictos. ACCENT, jamais un fond de section */
  --c-cta:         #B5652D;  /* Terracotta — CTA */
  --c-cta-hover:   #9E5526;  /* Terracotta pressé */
  --c-sur-cta:     #F7F4EE;  /* Texte sur terracotta */

  --caramel-encre: #6B4A28;  /* Encre du sceau « Plus belles villes » (≈ 7:1 sur la crème). Réservé au sceau du hero. */

  /* Dérivés fonctionnels */
  --c-texte-2:     rgba(46,42,38,.72);   /* texte secondaire */
  --c-filet:       rgba(200,155,95,.55); /* hairlines dorés */
  --c-lueur:       rgba(200,155,95,.28); /* lueur de fenêtre (radiale) */
  --c-voile:       rgba(46,42,38,.55);   /* voile photo pour texte */

  /* Contrastes mesurés (WCAG 2.1)
     Charbon / Crème ........... 11,9:1  AAA
     Charbon / Crème pâle ...... 13,0:1  AAA
     Encre 72 % / Crème ........  5,2:1  AA
     Encre 72 % / Crème pâle ...  5,4:1  AA
     Crème pâle / Charbon ...... 13,0:1  AAA
     Charbon / Doré (ambré) ....  5,6:1  AA   (texte sur les surfaces ambrées : hero, bandeau final, pied de page)
     Crème / Doré (ambré) ......  2,0:1  ÉCHEC WCAG — choix de marque assumé (planche « Foncé — UI components ») :
                                         texte crème sur l'ambré ; boutons crème avec texte charbon (13:1)
     Crème pâle / Terracotta ...  3,9:1  ÉCHEC pour du petit texte → les boutons portent un texte
                                         de 19 px en gras (« grand texte » WCAG, seuil 3:1)
     Terracotta / Crème ........  3,6:1  éléments ≥ 24 px ou décoratifs seulement
     Crème pâle / Terracotta pressé 5,1:1 AA */

  /* ===== Typographie ===== */
  /* The Silver Edition = police de MARQUE (Canva/imprimé), jamais chargée sur le web.
     Fraunces = équivalente web du display (woff2 variable auto-hébergés, assets/fonts/).
     Century Gothic = sans (licence Monotype requise pour le web) ; Questrial (auto-hébergée) en doublure. */
  --f-titre:   "Fraunces", "Playfair Display", Georgia, serif;
  --f-corps:   "Century Gothic", "Questrial", "Didact Gothic", system-ui, sans-serif;

  --t-d1: clamp(2.6rem, 6vw, 4.5rem);     /* hero */
  --t-d2: clamp(1.9rem, 3.5vw, 2.8rem);   /* h2 */
  --t-d3: 1.5rem;                         /* h3 */
  --t-body-l: 1.188rem;                   /* lead */
  --t-body: 1rem;
  --t-label: 0.875rem;                    /* petit texte */
  --t-caption: 0.781rem;
  --t-ambre-min: 1.125rem;                /* 18 px : taille minimale du texte crème sur le caramel */
  --ls-spaced: 0.15em;                    /* lettrage espacé : RÉSERVÉ au géolocalisateur et aux noms de lieux. 0,15 em max, poids 500 (0,28 em nuisait à la lecture) */
  --mesure: 42rem;                        /* colonnes de texte ≤ 80 caractères */

  /* Espacement (multiples de 4) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-6: 24px;
  --s-8: 32px; --s-12: 48px; --s-16: 64px; --s-24: 96px; --s-32: 128px; --s-48: 192px;
  --section-y: clamp(2.5rem, 5vw, 4rem);   /* 2 × = espace entre sections : 80 px mobile, 128 px desktop */
  --header-haut: 120px;                    /* en-tête au repos (≥ 768 px) */
  --header-compact: 72px;                  /* en-tête après 24 px de défilement */
  --header-mobile: 64px;                   /* en-tête < 768 px, dès le départ */
  --barre-h: 2px;                          /* barre de progression */
  --page-x: 40px;
  --max: 72rem;                           /* 1152 px */

  /* ===== La signature : l'arche ===== */
  --r-arche: 999px 999px 24px 24px;       /* plein cintre haut, base douce */
  --r-arche-img: 999px 999px 12px 12px;
  --filet-w: 1px;
  --champ-bordure: 1.5px;                 /* bordure des champs de formulaire (WCAG 1.4.11 : ≥ 3:1) */
  --filet-gap: 5px;                       /* espace entre les deux filets du cadre */

  /* Rayons hiérarchisés (boutons quasi droits = registre hôtelier) */
  --r-cta: 2px;
  --r-card: 12px;
  --r-input: 2px;
  --r-pill: 999px;

  /* Ombres — douces et chaudes, jamais le gris générique */
  /* Échelle z sémantique : contenu < pastille collante < barre d'action < en-tête < barre de progression */
  --z-pastille: 5; --z-barre: 10; --z-header: 50; --z-progres: 60;
  --shadow-card: 0 2px 24px rgba(46,42,38,.07);
  --shadow-lueur: 0 0 48px var(--c-lueur);

  /* Cibles */
  --cible-mobile: 56px;
  --cible-desktop: 48px;

  /* Mouvement */
  --m-entree: 420ms;
  --m-lueur: 600ms;
  --m-allume: 600ms;
  --m-photo: 600ms;
  --m-nav: 200ms;
  --m-reveal: 600ms;
  --m-zoom: 600ms;
  --m-stagger: 80ms;
  --m-compact: 300ms;
  /* Système de mouvement (arc hero → journée) */
  --dur-micro: 200ms;                     /* survol, pression, focus */
  --dur-section: 450ms;                   /* apparition de bloc, changement d’image */
  --dur-moment: 600ms;                    /* transitions de l’arc principal */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --rise: 16px;                           /* distance max d’un fondu-montée */
  --m-fond: 600ms;
  --m-fondu: 500ms;
  --m-dialogue: 300ms;
  --m-ease-sortie: ease-out;
  --m-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (max-width: 767px) {
  :root { --page-x: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --m-entree: 0ms; --m-lueur: 0ms; --m-allume: 0ms; --m-photo: 0ms; --m-nav: 0ms; --m-reveal: 0ms; --m-zoom: 0ms; --m-stagger: 0ms; --m-fondu: 0ms; --m-compact: 0ms; --m-fond: 0ms; --m-dialogue: 0ms; --dur-micro: 0ms; --dur-section: 0ms; --dur-moment: 0ms; --rise: 0px; }
  *, *::before, *::after { animation-duration: 0ms !important; transition-duration: 0ms !important; }
}

:focus-visible { outline: 2px solid var(--c-cta); outline-offset: 2px; }