/* tokens.css — Le Carré Douville (Saint-Hyacinthe)
   Source : DESIGN_SYSTEM.md v2.0 (planche de marque validée, 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.
   NB : les NOMS de variables viennent du gabarit Louis-Lévesque. --c-dore = la SURFACE SOMBRE et les filets forts
   (charbon), --c-ambre = la couleur des commandes (terracotta foncé). Ne pas lire « doré » ni « ambre » au sens littéral. */

:root {
  /* ===== Couleurs de marque (planche validée — ne jamais dériver) ===== */
  --c-fond:        #FFFFCF;  /* Crème — fond principal (planche : #FFFFCF) */
  --c-fond-2:      #FFFFF0;  /* Crème pâle — fonds alternés, cartouches, champs (dérivé : crème éclaircie) */
  --c-texte:       #222222;  /* Charbon — texte, surfaces sombres (planche : #222222) */
  --c-fond-soir:   #F5F2CA;  /* Crème + 25 % de greige : fond de la séquence « soir » */
  --c-soir-2:      #333333;  /* Charbon plus clair : emplacement d’image réservé sur la surface sombre */
  --c-ambre:       #96501F;  /* Terracotta FONCÉ : réservé aux commandes (puces, onglets sélectionnés, survol des plans) — crème dessus 5,9:1 */
  --c-sable:       #E7E2C3;  /* Crème + 50 % de greige : 2e arrêt du fond de la journée (charbon dessus : 12,2:1) */
  --c-ambre-doux:  #CFC5B8;  /* Greige (planche : #CFC5B8) : 3e arrêt du fond de la journée (charbon dessus : 9,3:1) */
  --c-dore:        #222222;  /* SURFACE SOMBRE (hero, bandeau final, pied de page) et filets forts : charbon, texte crème dessus */
  --c-cta:         #B5652D;  /* Terracotta — CTA (planche : #B5652D) */
  --c-cta-hover:   #96501F;  /* Terracotta pressé */
  --c-sur-cta:     #FFFFF0;  /* Texte sur terracotta */
  --couleur-creme:  var(--c-fond);   /* alias de marque */
  --couleur-charbon: var(--c-texte);
  --couleur-greige: var(--c-ambre-doux);
  --couleur-cuivre: var(--c-cta);
  --c-brique:      #9C948B;  /* Brique Dorset — matériau de façade (échantillon relevé sur la planche : à confirmer) */
  --c-bouleau:     #86684F;  /* Bouleau fumé — revêtement bois (échantillon relevé sur la planche : à confirmer) */

  --caramel-encre: #222222;  /* Hérité du gabarit (sceau du hero) : inutilisé pour Douville */

  /* Dérivés fonctionnels */
  --c-texte-2:     rgba(34,34,34,.72);   /* texte secondaire */
  --c-filet:       rgba(34,34,34,.22);   /* hairlines */
  --c-lueur:       rgba(181,101,45,.32); /* lueur de fenêtre (radiale, terracotta) */
  --c-filet-clair: rgba(255,255,207,.42); /* hairlines crème sur surface sombre */
  --c-voile:       rgba(34,34,34,.55);   /* voile photo pour texte */

  /* Contrastes mesurés (WCAG 2.1)
     Charbon / Crème ........... 15,5:1  AAA
     Charbon / Crème pâle ...... 15,8:1  AAA
     Charbon / Greige ..........  9,3:1  AAA
     Charbon / Sable ........... 12,2:1  AAA
     Crème / Charbon ........... 15,5:1  AAA   (texte sur les surfaces sombres : hero, bandeau final, pied de page)
     Crème / Terracotta foncé ..  5,9:1  AA    (commandes : onglets, puces)
     Crème pâle / Terracotta ...  4,3:1  ÉCHEC pour du petit texte → les boutons portent un texte
                                         de 19 px en gras (« grand texte » WCAG, seuil 3:1)
     Crème pâle / Terracotta pressé 5,7:1 AA
     Terracotta / Crème ........  4,2:1  éléments ≥ 24 px ou décoratifs seulement
     Charbon / Terracotta ......  3,7:1  à éviter pour du texte */

  /* ===== Typographie ===== */
  /* Typographie auto-hébergée (assets/fonts/, aucun appel externe) : Fraunces (variable, OFL) = titres ;
     Questrial (OFL) = corps, doublure de Century Gothic qui reste prioritaire s'il est installé.
     Polices de marque d'origine (planche) : The Season et Century Gothic, non chargées (licence web). */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Century Gothic", "Questrial", "Didact Gothic", system-ui, sans-serif;
  --f-titre:   var(--font-display);   /* nom du gabarit (utilités Tailwind font-titre) */
  --f-corps:   var(--font-body);      /* nom du gabarit (utilités Tailwind font-corps) */

  --t-d1: clamp(2.5rem, 6vw, 4.5rem);     /* hero */
  --t-d2: clamp(2rem, 4vw, 3rem);   /* h2 */
  --t-d3: clamp(1.5rem, 3vw, 2rem);                       /* h3 */
  --t-body-l: 1.25rem;                   /* lead */
  --t-body: 1.125rem;
  --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 : le carré (cadre à double filet, comme le monogramme D) ===== */
  --r-arche: 2px;                         /* le CARRÉ (signature de marque) : angles vifs */
  --r-arche-img: 2px;
  --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: 2px;
  --r-input: 2px;
  --r-pill: 2px;

  /* 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(34,34,34,.08);
  --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; }