/**
 * ============================================================================
 * ALPILLES PRESTIGE — DESIGN SYSTEM (variables CSS)
 * ============================================================================
 * COULEURS RECALIBRÉES le 2026-07-06 sur la maquette Figma v4 réelle
 * (page Accueil, node 51:160, lues via le connecteur Figma). La maquette
 * n'utilise pas de variables Figma : les valeurs proviennent des calques.
 * TYPO & ESPACEMENTS restent à recaler finement (décision police en cours —
 * la maquette mêle plusieurs polices alors que le CDC impose Century Gothic).
 *
 * RECALAGE : ne touchez QUE le bloc `:root { ... }` ci-dessous.
 * Tout le reste du sitepackage (Fluid, Content Blocks, TypoScript) consomme
 * exclusivement ces variables : aucune couleur/police/taille en dur ailleurs.
 *
 * Source unique de vérité : TYPO3-kit/design-tokens.json
 * ============================================================================
 */

:root {
  /* ---- Couleurs de marque — RECALIBRÉES sur Figma v4 / accueil (51:160) ---- */
  --color-pierre-clair: #EEE8DD;   /* fond crème dominant de la page (réel Figma) */
  --color-taupe: #7F7969;          /* bande "La beauté des Alpilles", bouton "Réserver", pill "Découvrez" (réel Figma, "color-2") */
  --color-pierre-fonce: #7F7969;   /* alias de taupe (rétro-compat classe .bg-pierre-fonce) */
  --color-anthracite: #1D1D1B;     /* logos (SVG) ; le texte courant de la maquette est en noir pur */
  --color-gris-section: #F4F4F4;   /* fond de la section "Un confort unique" (réel Figma) */
  --color-creme-fond: #F4F4F4;     /* fond de page clair alternatif (aligné sur le gris de section) */
  --color-dore-cta: #E3C084;       /* CTA doré/tan MAT de la maquette v4 (recalé : #E0A503 était trop vif/orangé) */
  /* Accents non observés sur l'accueil — À CONFIRMER sur les pages Mas / Région : */
  --color-olivier: #5B6B4E;        /* accent nature (hypothèse) */
  --color-lavande: #7C6A9C;        /* accent région (hypothèse) */
  --color-ciel: #7FAFD1;           /* accent frais (hypothèse) */

  /* ---- Couleurs de statut réservation (design-tokens.json > colors.statuts_reservation) ---- */
  /* CDC §4.3 : statut "libre" = aucun fond appliqué, ne pas surcharger. */
  --color-statut-en-attente: #D9D5CC; /* fond gris — demande déposée, non confirmée */
  --color-statut-reserve: #E3D3B8;    /* fond beige — réservation validée */

  /* ---- Neutres ---- */
  --color-blanc: #FFFFFF;
  --color-noir: #1D1D1B;
  --color-gris-texte-secondaire: #6B6660;

  /* ---- Typographie : Century Gothic, police UNIQUE du site ---- */
  --font-family-primary: 'Century Gothic', 'Futura', 'Segoe UI', sans-serif;

  --font-size-h1: 3rem;
  --font-line-height-h1: 1.1;
  --font-weight-h1: 700;
  --font-letter-spacing-h1: 0.01em;

  --font-size-h2: 2.25rem;
  --font-line-height-h2: 1.15;
  --font-weight-h2: 700;

  --font-size-h3: 1.75rem;
  --font-line-height-h3: 1.2;
  --font-weight-h3: 700;

  --font-size-h4: 1.375rem;
  --font-line-height-h4: 1.3;
  --font-weight-h4: 700;

  --font-size-body: 1rem;
  --font-line-height-body: 1.6;
  --font-weight-body: 400;

  --font-size-small: 0.875rem;
  --font-line-height-small: 1.5;
  --font-weight-small: 400;

  --font-size-eyebrow: 0.8125rem;
  --font-line-height-eyebrow: 1.4;
  --font-weight-eyebrow: 700;
  --font-letter-spacing-eyebrow: 0.12em;

  /* ---- Espacements (échelle 8px, design-tokens.json > spacing_scale) ---- */
  --space-0: 0;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;

  /* ---- Rayons ---- */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- Bordures ---- */
  --border-hairline: 1px solid rgba(29, 29, 27, 0.15);

  /* ---- Breakpoints (informatifs — usage en commentaire dans les media queries) ---- */
  --breakpoint-mobile: 0px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide: 1440px;
}

/* ============================================================================
 * @font-face — Century Gothic (police unique imposée par le CDC §2.3 / §6.2)
 * Fichiers réels du client, copiés depuis /Polices/ vers Resources/Public/Fonts/.
 * ============================================================================
 */
@font-face {
  font-family: 'Century Gothic';
  src: url('../Fonts/CenturyGothic.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Century Gothic';
  src: url('../Fonts/CenturyGothic-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Century Gothic';
  src: url('../Fonts/CenturyGothic-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Century Gothic';
  src: url('../Fonts/CenturyGothic-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ============================================================================
 * Classes utilitaires typographiques (consomment uniquement les variables)
 * ============================================================================
 */
.text-h1, h1 {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h1);
  line-height: var(--font-line-height-h1);
  font-weight: var(--font-weight-h1);
  letter-spacing: var(--font-letter-spacing-h1);
}

.text-h2, h2 {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h2);
  line-height: var(--font-line-height-h2);
  font-weight: var(--font-weight-h2);
}

.text-h3, h3 {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h3);
  line-height: var(--font-line-height-h3);
  font-weight: var(--font-weight-h3);
}

.text-h4, h4 {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-h4);
  line-height: var(--font-line-height-h4);
  font-weight: var(--font-weight-h4);
}

.text-body, body {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body);
  line-height: var(--font-line-height-body);
  font-weight: var(--font-weight-body);
}

.text-small {
  font-size: var(--font-size-small);
  line-height: var(--font-line-height-small);
  font-weight: var(--font-weight-small);
}

.text-eyebrow {
  font-size: var(--font-size-eyebrow);
  line-height: var(--font-line-height-eyebrow);
  font-weight: var(--font-weight-eyebrow);
  letter-spacing: var(--font-letter-spacing-eyebrow);
  text-transform: uppercase;
}

/* ============================================================================
 * Classes utilitaires de FOND — palette restreinte (CDC §2.3/§6.2)
 * Ces classes sont la cible du champ Select "background_color" exposé par
 * les Content Blocks (hero, cta-reservation, intro-texte, texte-editorial...).
 * Ne JAMAIS permettre une couleur libre : uniquement ces tokens.
 * ============================================================================
 */
.bg-pierre-clair  { background-color: var(--color-pierre-clair); }
.bg-taupe         { background-color: var(--color-taupe); color: var(--color-blanc); }
.bg-pierre-fonce  { background-color: var(--color-pierre-fonce); color: var(--color-blanc); } /* = taupe */
.bg-anthracite    { background-color: var(--color-anthracite); color: var(--color-blanc); }
.bg-gris-section  { background-color: var(--color-gris-section); }
.bg-creme-fond    { background-color: var(--color-creme-fond); }
.bg-olivier       { background-color: var(--color-olivier); color: var(--color-blanc); }
.bg-lavande       { background-color: var(--color-lavande); color: var(--color-blanc); }
.bg-ciel          { background-color: var(--color-ciel); }
.bg-dore-cta      { background-color: var(--color-dore-cta); }
.bg-blanc         { background-color: var(--color-blanc); }

/* Fonds de statut réservation — usage exclusif du calendrier de disponibilités.
   Le statut "libre" ne reçoit volontairement AUCUNE classe de fond (CDC §4.3). */
.bg-statut-en-attente { background-color: var(--color-statut-en-attente); }
.bg-statut-reserve    { background-color: var(--color-statut-reserve); }

/* ============================================================================
 * Boutons — angles peu arrondis (style "RÉSERVEZ" observé, à confirmer Figma v4)
 * ============================================================================
 */
.btn {
  display: inline-block;
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-h4);
  font-size: var(--font-size-body);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  border: var(--border-hairline);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.btn:hover {
  opacity: 0.85;
}

.btn--primary {
  background-color: var(--color-dore-cta);
  color: var(--color-blanc);
  border: none;
}

.btn--secondary {
  background-color: transparent;
  color: var(--color-anthracite);
  border: var(--border-hairline);
}

/* ============================================================================
 * Rayons utilitaires (usage : cartes, images, encarts)
 * ============================================================================
 */
.radius-sm   { border-radius: var(--radius-sm); }
.radius-md   { border-radius: var(--radius-md); }
.radius-lg   { border-radius: var(--radius-lg); }
.radius-pill { border-radius: var(--radius-pill); }

/* ============================================================================
 * Alignement du texte — classes produites par le bouton d'alignement du RTE
 * (CKEditor : text-start / center / end / justify). Sans ces règles, un texte
 * ou un bouton "centré" en back-office reste aligné à gauche au frontend.
 * Un bouton (.btn, inline-block) suit l'alignement du texte de son conteneur.
 * ============================================================================
 */
.text-start   { text-align: left; }
.text-center  { text-align: center; }
.text-end     { text-align: right; }
.text-justify { text-align: justify; }

/* Alignement d'en-tête des éléments de contenu (fluid_styled_content) :
   classes produites par l'option « Alignement » de l'en-tête en back-office. */
.ce-headline-left   { text-align: left; }
.ce-headline-center { text-align: center; }
.ce-headline-right  { text-align: right; }