/* ============================================================
   TOKENS — La Sélection de Said
   Source : Figma « La sélection de Said » (canvas Preview)
   Toute valeur de couleur/typo/rayon/ombre passe par ces variables.
   ============================================================ */
:root {
  /* --- Couleurs de marque --- */
  --c-primary: #C46A4A;        /* terracotta — CTA, liens actifs, icônes */
  --c-primary-dark: #964B31;   /* terracotta foncé — textes form hero */
  --c-primary-deep: #8A462D;   /* dot carrousel actif */
  --c-gold: #FCC163;           /* doré — puces badge, accents, filtres actifs */
  --c-star: #FBBF24;           /* étoiles avis */
  --c-star-alt: #FBA928;       /* icônes meta villa */

  /* --- Neutres --- */
  --c-ink: #1C1612;            /* titres, texte fort */
  --c-ink-2: #251D18;          /* meta cards villa */
  --c-body: #4A4744;           /* texte courant */
  --c-review: #383131;         /* texte réponses FAQ */
  --c-muted: #555555;          /* placeholders inputs */
  --c-handle: #404040;         /* handles réseaux sociaux */
  --c-white: #FFFFFF;

  /* --- Fonds --- */
  --bg-page: #FFFFFF;
  --bg-soft: #FBFAF9;          /* cartes services */
  --bg-cream: #FAF8F3;         /* bande héro / avis */
  --bg-process: #F6F1EA;       /* section processus */
  --bg-card: #FDFDFB;          /* pastilles processus */
  --bg-input: #F4F2F2;
  --bg-footer: #130F0C;        /* 5 des 6 frames Figma ; seule l’accueil disait #090706 */
  --bg-gold-tile: #FBBF24;

  /* --- Teintes primaires translucides --- */
  --t-primary-05: rgba(196, 106, 74, 0.05);
  --t-primary-08: rgba(196, 106, 74, 0.08);
  --t-primary-10: rgba(196, 106, 74, 0.1);

  /* --- Bordures / lignes --- */
  --l-line: #DFDFDF;
  --l-line-2: #E6E6E6;
  --l-badge: #C8C5C2;
  --l-sand: #E0D1B8;           /* ligne processus */
  --l-sand-2: #E8E0D5;
  --l-card: #F2F2F2;
  --l-input-check: #ADABA8;

  /* --- États de formulaire --- */
  --c-ok: #2E7D32;             /* message de confirmation */
  --c-err: #C62828;            /* message d'erreur */

  /* --- Marques tierces --- */
  --c-whatsapp: #25D366;
  --c-airbnb: #FF385C;

  /* --- Typographies --- */
  --f-head: 'Stack Sans Headline', 'Arial Narrow', sans-serif;
  --f-body: 'Outfit', 'Segoe UI', sans-serif;
  --f-manrope: 'Manrope', var(--f-body);

  /* --- Rayons --- */
  --r-pill: 100px;
  --r-full: 600px;             /* cercles avatars / bulle experts */
  --r-card: 24px;              /* cartes stats, avis */
  --r-tile: 22px;              /* bento services, cartes problèmes */
  --r-box: 18px;               /* cartes services, encarts image */
  --r-media: 28px;             /* visuel carte villa */
  --r-villa: 36px;             /* carte villa */
  --r-img: 16px;               /* galerie */
  --r-block: 20px;             /* services annexes, cartes tarifs */
  --r-input: 12px;
  --r-textarea: 14px;
  --r-faq: 12px;
  --r-faq-q: 10px;
  --r-check: 5px;
  --r-chip: 6px;

  /* --- Ombres --- */
  --sh-card: 0 0 18px 0 rgba(0, 0, 0, 0.05);
  --sh-btn: 0 0 18px 0 rgba(0, 0, 0, 0.05);
  --sh-btn-light: 0 0 18px 0 rgba(0, 0, 0, 0.04);
  --sh-soft: 0 2px 18px 0 rgba(0, 0, 0, 0.03);
  --sh-pop: 0 0 23px 0 rgba(0, 0, 0, 0.05);
  --sh-nav: 0 0 22px 0 rgba(0, 0, 0, 0.04);
  --sh-faq: 0 0 14px 0 rgba(0, 0, 0, 0.04);
  --sh-play: 0 5px 8px 0 rgba(0, 0, 0, 0.1);

  /* --- Dégradés récurrents --- */
  --g-photo: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
  --g-gallery: linear-gradient(180deg, rgba(116, 116, 116, 0.22) 0%, rgba(46, 46, 46, 0.694) 61%, #000000 89%);
  /* Figma 32:266 : les poignées du dégradé vont de (0 ; 0,45) à (1 ; 0,45) — l'axe est
     HORIZONTAL, il assombrit la colonne de texte à gauche, pas le haut de la photo. */
  --g-hero: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 9.81%, rgba(0, 0, 0, 0.05) 100%);
  /* Sous 1100 px le texte du héro occupe toute la largeur : un voile horizontal ne
     protégerait plus la fin des lignes. La maquette n'a pas de frame mobile. */
  --g-hero-etroit: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 10%, rgba(0, 0, 0, 0.15) 100%);

  /* --- Gabarit --- */
  --w-page: 1440px;
  --w-container: 1200px;
  --pad-page: 120px;
}