/* =========================================================================
   REFONTE 2026 — TOKENS (design system du site)
   Chargé PARTOUT, avant socle.css puis les feuilles de gabarit.
   Origine : variables du socle de la maquette validée le 07/08/2026
   (structure-commune.css, dossier 20260730-maquettes-couleur/mirror/).
   Contrat : les nouvelles feuilles (socle, home, futurs gabarits) ne posent
   aucune couleur ni aucun espacement en dur — tout passe par ces variables.
   Détail de l'architecture : 20260605-Crychar-audit/plan-integration-home-c1.md
   ========================================================================= */

:root{
  /* palette : cinq valeurs, pas neuf */
  --creme:#ecebe6;
  --blanc:#ffffff;
  --encre:#2d2d2d;
  /* gris de texte : #6f6a61 donnait exactement 4,50:1 sur crème, le minimum
     réglementaire sans marge ; assombri à 5,1:1 (tour d'horizon du 07/08) */
  --encre-douce:#67625a;
  --filet:#dcd9d2;

  /* rythme vertical : trois valeurs, multiples de 8 */
  --entre-sujets:120px;
  --dans-sujet:72px;
  --dans-bloc:32px;

  /* hauteur des boutons d'action (R106, 08/10 : la même pour le bouton plein et les boutons à contour d'un groupe) */
  --cta-hauteur:48px;

  /* grille unique */
  --gouttiere:80px;
  --largeur:1280px;

  /* Hauteur RÉELLE de l'en-tête, mesurée par point de rupture.
     Elle était devinée à 84px alors qu'elle vaut 98 en bureau, 97 en tablette
     paysage et 107 en tablette portrait : le hero dépassait donc le bas de
     l'écran et la barre de réservation était coupée partout. */
  --header:98px;

  /* Budget vertical réservé au module de réservation dans le hero. L'accroche
     s'appuie dessus au lieu de s'ancrer elle aussi sur `bottom` : c'est ce qui
     provoquait les collisions. */
  --place-resa:132px;

  /* Bandeau COURT, pour un gabarit dont l'action doit tenir dans le premier
     écran (01/10, B11) : la page Réserver gardait un bandeau plein écran de
     795px qui repoussait le formulaire à 952px, sous la flottaison (A019,
     « le moteur, tu le vois pas, il faut descendre »). Le gabarit qui en a
     besoin le pose sur son .post_img ; les autres pages ne bougent pas. */
  --bandeau-court:clamp(280px, 40vh, 480px);

  /* Ce que le bandeau photo des pages intérieures laisse de l'écran : homeMain() (JS hérité) lui donne
     la hauteur de la fenêtre moins celle de l'en-tête et 15px. La valeur est réservée en CSS dès le
     premier rendu (04/10/2026) : sans elle, le bandeau naissait à 0px et la page sautait d'un écran
     (CLS 0,92 sur téléphone). Hauteurs d'en-tête MESURÉES le 04/10, en-tête compris tel que homeMain()
     le lit : 90px en bureau (et non --header, 98px), 124, 148 et 74px ; plus les 15px. */
  --heros-retrait:105px;
  /* Hauteur du bandeau de consentement tant qu'il est affiché, 0 ensuite (06/10/2026). Posée par le
     script de footer.php : le bouton fixe « Disponibilités » et son panneau remontent d'autant, au lieu
     de passer sous le bandeau, qui est au-dessus de tout. */
  --bandeau-cookies:0px;
}

/* tablette paysage */
@media (min-width:992px) and (max-width:1199px){
  :root{--gouttiere:48px;--header:124px;--heros-retrait:139px}
}

/* tablette portrait */
@media (min-width:768px) and (max-width:991px){
  :root{--gouttiere:32px;--entre-sujets:72px;--dans-sujet:48px;--header:148px;--place-resa:270px;--heros-retrait:163px}
}

/* téléphone : mêmes valeurs que le gabarit téléphone de la home (le manque
   de ce point de rupture écrasait le contenu des pages intérieures dans une
   colonne de ~230px — constaté sur iPhone le 11/08) */
@media (max-width:767px){
  :root{--gouttiere:20px;--entre-sujets:64px;--dans-sujet:40px;--dans-bloc:24px;--header:74px;--bandeau-court:clamp(220px, 34vh, 300px);--heros-retrait:89px}
}