/*
  ============================================================================
  VARIABLES — jetons de conception (« design tokens »)
  ============================================================================
  Pourquoi ce fichier existe à part : toutes les couleurs, tailles de texte et
  polices du site sont définies UNE SEULE FOIS ici, sous forme de variables
  CSS (custom properties). Les autres fichiers ne contiennent plus aucune
  couleur ou taille "en dur" : ils lisent ces variables avec var(--nom).

  Avantage pour la maintenance : changer l'identité visuelle (ex. passer de
  l'ambre au vert) ne demande de modifier qu'UNE ligne ici, au lieu de
  chercher la couleur dans des dizaines de règles éparpillées.

  Thème unique assumé : contrairement à un site qui proposerait un mode clair
  ET un mode sombre, Nataal impose un univers "nuit atlantique" volontairement
  sombre et premium — cohérent avec le positionnement immobilier haut de
  gamme. C'est donc un choix de direction artistique, pas un oubli du mode
  clair.
*/

:root{
  /* ---- fond : ambiance "nuit atlantique" (bleu profond) ---- */
  --encre:               #0A1826;  /* couleur de secours si le dégradé ne charge pas */
  --encre-elevee:        rgba(15,31,46,.52);  /* surfaces "en verre dépoli" (cartes, panneaux) */
  --encre-elevee-opaque: #0F1E2E;  /* variante opaque, utilisée quand le flou n'est pas possible (ex. visionneuses) */
  --encre-elevee-2:      #16283A;  /* survol / éléments imbriqués (notification) */
  --ligne:               #2C4055;  /* traits fins (bordures, séparateurs) */
  --ligne-douce:         #1E2F40;

  /* ---- texte : ivoire chaud sur fond froid = contraste maximal ---- */
  --sable:               #ECE2D2;  /* texte principal */
  --sable-attenue:       #96A3AF;  /* texte secondaire (légendes, méta-informations) */
  --sable-pale:          #5D6976;  /* texte tertiaire / désactivé */

  /* ---- couleur de marque : l'ambre, "le soleil ouest-africain" ---- */
  --ambre:               #E7A24C;
  --ambre-fonce:         #C87C22;  /* état survolé / pressé */
  --encre-sur-ambre:     #1B1206;  /* texte lisible posé sur un fond ambre */
  --crepuscule:          #7C8DA3;  /* teinte froide secondaire, réservée aux illustrations */

  /* ---- couleurs sémantiques (jamais utilisées comme couleur de marque) ---- */
  --succes:              #7FB27A;  /* ex. badge "Vérifié" */
  --contour-focus:       #F0C888;  /* contour visible au clavier (accessibilité) */

  /* ---- échelle typographique : chaque texte du site pioche dans cette échelle,
     ce qui garantit une hiérarchie visuelle cohérente plutôt que des tailles
     choisies au hasard ---- */
  --taille-legende: .8rem;
  --taille-texte:   1rem;
  --taille-1:       1.24rem;
  --taille-2:       1.6rem;
  --taille-3:       2.15rem;
  --taille-4:       3rem;
  --taille-heros:   clamp(2.5rem, 6vw, 4.7rem);   /* clamp = s'adapte à la largeur d'écran sans media query */

  /* ---- mise en page ---- */
  --largeur-rail:    248px;   /* largeur du menu latéral sur grand écran */
  --largeur-contenu: 1180px;  /* largeur maximale du contenu (lisibilité) */
  --marge:           clamp(1.25rem, 5vw, 4rem);

  /* ---- polices : une empattée (serif) pour l'émotion, une bâton (sans-serif)
     pour la lecture, une à chasse fixe (mono) pour tout ce qui est "donnée"
     (prix, coordonnées GPS, code de référence) — ce choix EST le fil rouge
     visuel du site : le mono évoque la précision architecturale. ---- */
  --police-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --police-sans:  "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --police-mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --transition-douce: cubic-bezier(.2, .7, .2, 1);

  /* ---- surfaces "verre dépoli" flottant sur le dégradé de fond ---- */
  --flou-surface: blur(16px) saturate(1.3);
  --elevation:    0 24px 54px -30px rgba(0, 6, 14, .75);  /* ombre portée douce sous les cartes */
}

/*
  ============================================================================
  THÈME CLAIR — activé par [data-theme="clair"] sur <html> (voir 25-theme.js)
  ============================================================================
  Le reste du CSS ne change pas : on REDÉFINIT seulement les mêmes variables
  avec des valeurs claires. C'est tout l'intérêt des jetons de conception —
  un thème = un seul bloc de variables, pas une réécriture du site.
  Fond : dégradé doux blanc → gris (le « dégradé des deux » demandé).
  Texte : encre sombre sur fond clair.
*/
:root[data-theme="clair"]{
  --encre:               #F4F5F7;
  --encre-elevee:        rgba(255, 255, 255, .74);
  --encre-elevee-opaque: #FFFFFF;
  --encre-elevee-2:      #FFFFFF;
  --ligne:               #D8DDE3;
  --ligne-douce:         #E7EBEF;

  --sable:               #1B2733;   /* texte principal, désormais sombre */
  --sable-attenue:       #566472;
  --sable-pale:          #8593A1;

  --ambre:               #B96D17;   /* un ambre plus dense, lisible sur blanc */
  --ambre-fonce:         #9A5711;
  --encre-sur-ambre:     #FFFFFF;
  --crepuscule:          #6E8299;

  --succes:              #3C7A38;
  --contour-focus:       #A9640F;

  --elevation:           0 22px 46px -30px rgba(20, 30, 45, .30);
}