/* ===============================
 * 1) POLICES
 * =============================== */

/* ——— Montserrat (variable seule) ———
   Les anciens @font-face 'Montserrat Static' (Regular + SemiBold) ont été
   retirés 2026-05-22 : la variable font couvre toute la plage de poids
   100→900, donc le statique faisait juste +650 KiB de download inutile au
   chargement initial (cf. audit perf PageSpeed). */

/* Variable normal (axe wght 100→900) */
@font-face {
  font-family: 'Montserrat VF';
  src: url('/assets/fonts/montserrat/variable/Montserrat-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Variable italic (axe wght 100→900) */
@font-face {
  font-family: 'Montserrat VF';
  src: url('/assets/fonts/montserrat/variable/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ——— GlamourAbsolute (display) ———
   Les fichiers .woff2 et .woff annoncés mais inexistants ont été retirés
   2026-05-22 (généraient 6 requêtes 404 sur le chemin critique). À ré-ajouter
   le jour où on convertit les .otf en .woff2 (gain perf ~50 % sur ces polices). */

/* Regular */
@font-face {
  font-family: 'GlamourAbsolute';
  src: url('/assets/fonts/GlamourAbsolute_Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Condensed */
@font-face {
  font-family: 'GlamourAbsolute Condensed';
  src: url('/assets/fonts/GlamourAbsolute_Condensed.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
/* Extended — utilisée par le H1 du hero (LCP).
   font-display: optional → si la font n'arrive pas dans ~100 ms, le browser
   garde le fallback (Georgia/serif) au lieu de bloquer ou swapper. Combiné
   au preload dans head.php, elle arrive presque toujours à temps en cache,
   et chaque visite suivante l'utilise sans délai. Gain LCP Lighthouse ~1 s.
   Voir audit perf 2026-05-22. */
@font-face {
  font-family: 'GlamourAbsolute Extended';
  src: url('/assets/fonts/GlamourAbsolute_Extended.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: optional;
}

/* Police principale du site (texte courant) */
body {
  font-family: 'Montserrat VF', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
}

/* Titres */
h1, h2, h3 {
  font-family: 'GlamourAbsolute', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
}
h4, h5, h6 {
  font-family: 'Montserrat VF', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 600;
}

/* Utilitaires typographiques */
.font-glamour           { font-family: 'GlamourAbsolute',           system-ui, sans-serif; font-weight: 400; }
.font-glamour-condensed { font-family: 'GlamourAbsolute Condensed', system-ui, sans-serif; font-weight: 600; }
.font-glamour-extended  { font-family: 'GlamourAbsolute Extended',  system-ui, sans-serif; font-weight: 700; }
.font-body              { font-family: 'Montserrat VF', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
.font-display           { font-family: 'GlamourAbsolute', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }

/* Logo (dimensions uniquement) */
.logo {
  display: block;
  height: 3rem;  /* mobile */
  width: auto;
}
@media (min-width: 768px) {
  .logo {
    height: 4rem !important; /* desktop */
  }
}

/* ===============================
 * 2) PALETTE
 * =============================== */
:root{
  --brand-primary:     #2B3F54; /* Bleu canard — couleur principale */
  --brand-dark-hover:  #1F2E3D; /* Bleu canard foncé — hover, bordures fortes (ajout chantier home-v2) */
  --brand-cream:       #F0E8D5; /* Crème — secondaire */
  --brand-cream-light: #F8F3E5; /* Crème très clair — fonds alt rows (ajout chantier home-v2) */
  --brand-cream-dark:  #D9CFB8; /* Crème foncé — bordures, séparateurs (ajout chantier home-v2) */
  --brand-dark:        #1D1D1D; /* Noir profond — texte */
  --brand-white:       #FFFFFF; /* Blanc */
  --brand-red:         #D62F27; /* Rouge accent — usage parcimonieux */

  /* Versions RGB des couleurs principales — permettent les opacités via rgba() */
  /* Cf. classes utilitaires .text-brand-*\/<opacity> et .bg-brand-*\/<opacity> plus bas. */
  --brand-cream-rgb:   240, 232, 213;
  --brand-dark-rgb:    29, 29, 29;
  --brand-primary-rgb: 43, 63, 84;
}

/* Fonds */
.bg-brand-primary     { background-color: var(--brand-primary); }
.bg-brand-dark-hover  { background-color: var(--brand-dark-hover); }
.bg-brand-cream       { background-color: var(--brand-cream); }
.bg-brand-cream-light { background-color: var(--brand-cream-light); }
.bg-brand-cream-dark  { background-color: var(--brand-cream-dark); }
.bg-brand-dark        { background-color: var(--brand-dark); }
.bg-brand-white       { background-color: var(--brand-white); }
.bg-brand-red         { background-color: var(--brand-red); }

/* Textes */
.text-brand-primary { color: var(--brand-primary); }
.text-brand-cream   { color: var(--brand-cream); }
.text-brand-dark    { color: var(--brand-dark); }
.text-brand-white   { color: var(--brand-white); }
.text-brand-red     { color: var(--brand-red); }

/* Aliases pratiques (facultatifs) */
.text-white { color: #FFFFFF; }          /* alias courant */
.text-red   { color: var(--brand-red); } /* compat si déjà utilisé */

/* Hovers utiles (échapper le :) */
.hover\:bg-brand-primary:hover { background-color: var(--brand-primary); }
.hover\:bg-brand-dark:hover    { background-color: var(--brand-dark); }
.hover\:bg-brand-red:hover     { background-color: var(--brand-red); }
.hover\:bg-brand-white:hover   { background-color: var(--brand-white); }
.hover\:bg-brand-cream:hover   { background-color: var(--brand-cream); }

.hover\:text-brand-primary:hover { color: var(--brand-primary); }
.hover\:text-brand-dark:hover    { color: var(--brand-dark); }
.hover\:text-brand-red:hover     { color: var(--brand-red); }
.hover\:text-brand-white:hover   { color: var(--brand-white); }
.hover\:text-brand-cream:hover   { color: var(--brand-cream); }

/* =======================
 * Classes opacité — text-brand-*\/<opacity> et bg-brand-*\/<opacity>
 * -----------------------------------------------------------
 * Nos classes .text-brand-* / .bg-brand-* sont du CSS pur (pas générées
 * par Tailwind), donc la syntaxe Tailwind `class/opacity` ne s'applique
 * PAS automatiquement. Si on a besoin d'une opacité sur une couleur de
 * marque, il faut déclarer ici la classe correspondante.
 *
 * Pattern : `.text-brand-X\/N { color: rgba(var(--brand-X-rgb), 0.N) }`
 *
 * À étendre au besoin quand une nouvelle opacité est utilisée dans une
 * section. Vérifier dans .claude/rules/design-system.md pour la doc.
 * ======================= */

/* Text — crème (sur fonds sombres : bleu canard, noir) */
.text-brand-cream\/80 { color: rgba(var(--brand-cream-rgb), 0.80); }
.text-brand-cream\/90 { color: rgba(var(--brand-cream-rgb), 0.90); }
.text-brand-cream\/95 { color: rgba(var(--brand-cream-rgb), 0.95); }

/* Text — sombre (sur fonds clairs : blanc, crème) */
.text-brand-dark\/60 { color: rgba(var(--brand-dark-rgb), 0.60); }
.text-brand-dark\/70 { color: rgba(var(--brand-dark-rgb), 0.70); }
.text-brand-dark\/75 { color: rgba(var(--brand-dark-rgb), 0.75); }
.text-brand-dark\/80 { color: rgba(var(--brand-dark-rgb), 0.80); }

/* Bg — crème (overlay subtil sur fonds colorés) */
.bg-brand-cream\/40 { background-color: rgba(var(--brand-cream-rgb), 0.40); }
.bg-brand-cream\/80 { background-color: rgba(var(--brand-cream-rgb), 0.80); }

/* Hover — variantes */
.hover\:text-brand-cream\/80:hover { color: rgba(var(--brand-cream-rgb), 0.80); }

/* ===============================
 * 3) RESET / PETITS PLUS
 * =============================== */
img { height: auto; }

/* ===============================
 * Styles personnalisés
 * =============================== */
header nav li {
  font-size: 18px;
  color:#2B3F54;
}

#garanties img {
  width: 160px;
}

/* ============================================================
   Alpine — x-cloak
   ------------------------------------------------------------
   Masque un element tant qu'Alpine n'a pas pris la main, et donc
   definitivement si le JavaScript ne se charge pas. Utilise sur
   les fleches du plat du jour (carte.php) : sans Alpine elles
   seraient inertes, mieux vaut ne pas les montrer du tout.
   ============================================================ */
[x-cloak] { display: none !important; }