/* Marrakech Residences — jetons de charte. Aucune règle de composant ici. */

:root{
  /* ── Jetons de RÔLE ──────────────────────────────────────────────────────
     Ce sont EUX qu'un univers de villa redéfinit (voir « Univers de villa »
     dans style.css). Les valeurs par défaut sont celles de la marque.

     17/09/2026 — LA MARQUE PASSE EN CLAIR (demande de Khalid : « le bleu est
     trop sombre, plutôt du blanc »). Le bleu #152238 ne disparaît pas : il
     devient l'ENCRE — titres, liens, boutons pleins, sceau. Le fond est une
     pierre claire, légèrement froide : surtout PAS un beige, qui ferait de la
     marque une troisième villa à côté du sable d'Aron et du crème de Camélia. */
  --fond:#F4F5F3;          /* le fond de page : pierre claire */
  --fond-creux:#E8EAE7;    /* un cran plus sombre : bandeaux, vides */
  --fond-relief:#FFFFFF;   /* un cran plus clair : cartes posées sur le fond */
  --contraste:#152238;     /* contraste maximal : liens, fond des boutons pleins */
  --texte-doux:#55626F;    /* texte secondaire — 5,71:1 sur le fond, mesuré */
  --texte:#33404F;
  --titre:#152238;
  --ligne:rgba(21,34,56,.14);

  /* Pas d'alias de couleur : un rôle = un seul nom. Une variable déclarée ici
     est résolue ICI, donc un alias ne suivrait pas un univers qui redéfinit le
     rôle — c'est ce qui avait laissé les textes secondaires en bleu sur le sable. */

  /* ── Jetons de SURFACE CLAIRE ────────────────────────────────────────────
     21/09/2026. Certains composants clairs vivent DANS un bloc sombre qui a
     retourné les jetons pour ses propres libellés : le calendrier, posé dans
     la barre de recherche sombre des pages de villa. L'enfant héritait du
     texte clair et se peignait en clair sur clair — 1,09:1, invisible.
     Ces jetons rejouent les valeurs claires du contexte. Ce sont des VALEURS
     littérales, pas des alias : chaque univers redéclare les siennes, donc
     elles suivent bien l'univers (contrairement à un var() résolu ici). */
  --clair-titre:#152238;
  --clair-texte:#33404F;
  --clair-texte-doux:#55626F;
  --clair-contraste:#152238;
  --clair-ligne:rgba(21,34,56,.14);

  /* ── Surfaces sombres de la marque ───────────────────────────────────────
     Tout n'est pas clair : le hero est posé sur des photos et la visionneuse
     est une salle noire. Ces surfaces gardent le bleu nuit et l'ivoire, et
     redéclarent les rôles LOCALEMENT (voir style.css). */
  --nuit:#0D1726;          /* voiles posés sur les photos */
  --nuit-relief:#1C2C46;
  --ivoire:#E9EEF5;        /* l'ancien --contraste, sur surface sombre */
  --ivoire-doux:#C3CEDD;
  --ivoire-texte:#D9E1EC;
  --ivoire-titre:#F6F8FB;

  /* Accents de villa — jamais utilisés pour la marque elle-même */
  --or-camelia:#C9A55A;
  /* Camélia, univers crème (16/09/2026) : ses photos sont en terre cuite ROSÉE
     (teinte 24°, mesurée sur 12 photos), pas en or. L'or #C9A55A est à 40° —
     c'est la teinte du sable d'Aron : le garder rapprochait les deux villas.
     L'or reste l'accent de Camélia sur l'ACCUEIL. */
  --terre-camelia:#B0705A;
  --terracotta-aron:#BE6B4E;
  /* Variantes PROFONDES : l'accent posé sur un fond clair (univers de villa,
     et désormais l'accueil lui-même) */
  --or-camelia-profond:#8A6A28;
  --terre-camelia-profond:#8E4F3A;
  --terracotta-aron-profond:#8A4530;
  /* Variantes lisibles sur fond sombre : le terracotta plein tombe à 3,6:1 en petit
     texte, sous le seuil AA de 4,5:1. Les filets gardent la teinte d'origine. */
  --or-camelia-texte:#D9BC7E;
  --terre-camelia-texte:#E5A98F;
  --terracotta-aron-texte:#E09B7C;

  /* 17/09/2026 — Bodoni Moda + Jost remplacés (Khalid : « une police plus classe
     et plus lisible »). Bodoni est une didone : ses déliés cassent sous 18 px.
     EB Garamond garde ses empattements en petit corps, Mulish est une humaniste
     ronde qui ne fatigue pas. Voir fonts.css. */
  --serif:"EB Garamond",Garamond,Georgia,serif;
  --sans:"Mulish",system-ui,-apple-system,"Helvetica Neue",sans-serif;

  /* Garamond a un œil plus petit que Bodoni : à taille égale il paraît d'un cran
     en dessous. Les titres montent donc légèrement. */
  --t-xs:.75rem; --t-sm:.875rem; --t-md:1rem; --t-lg:1.25rem;
  --t-xl:1.85rem; --t-2xl:2.65rem; --t-3xl:clamp(2.75rem,6.3vw,4.7rem);
  --espace:clamp(20px,4vw,56px);
  --rayon:2px;
  --maille:160px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--fond);color:var(--texte);
  font-family:var(--sans);font-size:var(--t-md);line-height:1.65;
  font-weight:400;letter-spacing:0;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--serif);color:var(--titre);font-weight:400;line-height:1.14;letter-spacing:.005em;margin:0 0 .5em}
h1{font-size:var(--t-3xl)}
h2{font-size:var(--t-2xl)}
h3{font-size:var(--t-xl)}
a{color:var(--contraste)}
img{max-width:100%;height:auto;display:block}

/* La trame : une cellule = le sceau, à l'échelle du fond.
   17/09/2026 — Khalid la garde mais la veut discrète : sur la pierre claire elle
   passe à l'encre à 2,8 % et la maille s'agrandit de 132 à 160 px. On la devine en
   s'approchant, on ne la lit plus de loin. */
.trame{
  background-color:var(--fond);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='160' height='160'%3E%3Cpath fill='none' stroke='%23152238' stroke-opacity='0.028' stroke-width='1' d='M17 17L36.331 17L50 3.331L63.669 17L83 17L83 36.331L96.669 50L83 63.669L83 83L63.669 83L50 96.669L36.331 83L17 83L17 63.669L3.331 50L17 36.331Z'/%3E%3Cpath fill='none' stroke='%23152238' stroke-opacity='0.028' stroke-width='1' d='M50 30.201L69.799 50L50 69.799L30.201 50Z'/%3E%3C/svg%3E");
  background-size:var(--maille) var(--maille);
  background-position:center;
}