/* * Couche client — Festival des Muses. * * Direction artistique : forêt enchantée, élégante et cosy (fantasy, romantasy, * cosy fantasy). Vert sapin profond + crème, accent rose poudré, motif laurier. * * CSS pur (ne réimporte PAS Tailwind) : redéfinit au runtime les variables de * design de Tailwind v4 consommées par les utilities (var(--color-…)), ce qui * reskin tout le site sans toucher à la structure des templates. * Servi via /_tenant/styles.css (ThemeAssetController), chargé après l'app CSS. * * Polices de marque « Malibu » (script) et « Atteron » (serif) non fournies : * on retombe sur les secours de la charte — Pinyon Script (script, accents) et * Cormorant Garamond (serif, corps & titres). * * Polices AUTO-HÉBERGÉES (woff2, sous-ensemble latin, licence OFL — cf. * fonts/LICENSE-*.txt) et servies depuis le même domaine via /_tenant/fonts/. * Aucune requête tierce (Google Fonts) : meilleur LCP/CLS et conformité RGPD. * Les poids critiques (corps 400, titres 600) sont préchargés dans le * (cf. tenants/festival-des-muses/templates/base.html.twig). */ @font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("/_tenant/fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("/_tenant/fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); } @font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("/_tenant/fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); } @font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 700; font-display: swap; src: url("/_tenant/fonts/cormorant-garamond-latin-700-normal.woff2") format("woff2"); } @font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("/_tenant/fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); } @font-face { font-family: "Pinyon Script"; font-style: normal; font-weight: 400; font-display: swap; src: url("/_tenant/fonts/pinyon-script-latin-400-normal.woff2") format("woff2"); } /* Secours métrique : aligne Georgia sur la Cormorant Garamond (corps & titres) pour neutraliser le décalage (CLS) pendant le bref échange police de secours -> police réelle. Utilisé via var(--font-serif-brand) ci-dessous. */ @font-face { font-family: "Cormorant Garamond Fallback"; src: local("Georgia"); size-adjust: 92%; ascent-override: 95%; descent-override: 28%; line-gap-override: 0%; } :root { /* Palette charte */ --vert-sapin: #103525; /* vert profond — primaire, fonds sombres, texte sur clair */ --vert-sapin-2: #0c2a1e; /* vert sapin plus dense (hovers, filets footer) */ --vert-sauge: #819454; /* vert sauge — secondaire, sous-titres, liens, aplats doux */ --vert-sauge-fonce: #5b6b3d; /* sauge assombri — texte sauge sur clair (AA ≥4.5:1) */ --vert-sauge-clair: #b6c68d; /* sauge éclairci, lisible sur fond sombre */ --creme: #edeccd; /* crème/ivoire — fond clair principal */ --creme-2: #e3e1be; /* crème plus soutenue (filets/cartes claires) */ --rose-poudre: #cf9287; /* rose poudré — accent rare (badges, hovers) */ --rose-poudre-clair: #e0b3aa; --vert-logo: #084431; /* couleur native des SVG verts */ /* Typographies (secours de la charte) */ --font-script: "Pinyon Script", "Malibu", cursive; /* accents courts uniquement */ --font-serif-brand: "Cormorant Garamond", "Atteron", "Cormorant Garamond Fallback", Georgia, serif; /* --- Remapping des tokens Tailwind utilisés par les templates --- */ /* Fonts : tout en serif (corps & titres), conformément à la charte. */ --font-sans: var(--font-serif-brand); --font-serif: var(--font-serif-brand); --default-font-family: var(--font-serif-brand); /* Neutres : fonds sombres (hero/header/footer) en vert sapin, fond clair crème. */ --color-gray-50: var(--creme); /* fond de page */ --color-gray-100: var(--creme-2); /* filets/cartes claires */ --color-gray-400: #5f6e48; /* texte tertiaire — sauge grisé, assombri pour AA (≥4.5:1 sur crème ET blanc) */ --color-gray-500: #5a6a4a; /* texte secondaire sur clair — sauge profond */ --color-gray-600: #46543a; --color-gray-800: var(--vert-sapin-2); /* hovers / filet footer */ --color-gray-900: var(--vert-sapin); /* fonds sombres ET texte principal */ /* Accents « violet » de la maquette -> palette forêt */ --color-violet-50: var(--creme); /* aplats clairs (bandeau goodies) */ --color-violet-100: var(--creme-2); /* filets clairs / pastilles d'initiales */ --color-violet-200: var(--vert-sapin); /* lettre d'initiale (guest show) */ --color-violet-300: var(--vert-sauge); /* lettre d'initiale (mosaïque) */ --color-violet-400: var(--vert-sauge-clair); /* liens nav + accroche sur fond sombre */ --color-violet-500: var(--vert-sauge); /* pastille de créneau réservable, rings de sélection */ --color-violet-600: var(--vert-sapin); /* CTA, prix, panier */ --color-violet-700: var(--vert-sauge-fonce); /* hover CTA + prix sauge : sauge assombri pour rester lisible en texte sur clair (AA) */ --color-violet-900: var(--vert-sapin); /* dégradé du hero -> uni sombre */ /* Badge panier : accent rose poudré (touche rare) */ --color-yellow-400: var(--rose-poudre); /* Alerte stock faible (text-orange-600) : terracotta assombri, accessible sur blanc/crème (AA ≥4.5:1) et accordé à la palette forêt. */ --color-orange-600: #b8420a; /* Coins doux « sans excès » (charte : 8px / 16px). */ --radius-lg: 0.5rem; --radius-xl: 0.5rem; --radius-2xl: 0.75rem; } /* Corps en serif crème/sapin. */ body { font-family: var(--font-serif-brand); } /* Titres de section : Atteron capitales, interlettrage généreux (logique du logo). */ h1, h2 { font-family: var(--font-serif-brand); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; } /* Titres de cartes / sous-blocs : serif, casse normale (lisibilité). */ h3, h4, h5, h6 { font-family: var(--font-serif-brand); font-weight: 600; letter-spacing: 0.01em; } /* Le titre de marque dans le footer (1re colonne) reçoit la touche script (accent court). Ciblé pour ne pas toucher « Navigation » / « Contact ». */ footer .grid > div:first-child > h3 { font-family: var(--font-script); text-transform: none; letter-spacing: 0; font-size: 1.6rem; color: var(--creme); } /* --- Header plus haut : on agrandit la barre (64px -> 88px) et le wordmark, les liens de nav restant centrés verticalement (items-center) et légèrement agrandis pour accompagner. --- */ header .h-16 { height: 5.5rem; } /* Liens de nav (desktop uniquement — la nav est masquée en mobile) : plus grands et davantage espacés pour mieux occuper la barre agrandie. */ @media (min-width: 768px) { header nav { gap: 2.5rem; } header nav a { font-size: 1.125rem; letter-spacing: 0.02em; } /* Bouton panier agrandi du même facteur (~1,2) : police, padding, icône et espacement, pour rester proportionné aux liens dans la barre haute. */ header a.bg-violet-600 { font-size: 1.05rem; padding: 0.6rem 0.9rem; gap: 0.6rem; } header a.bg-violet-600 svg { width: 1.2rem; height: 1.2rem; } } /* --- Header : on remplace le nom textuel par le wordmark SVG « FESTIVAL des Muses ». Le wordmark blanc se pose sur le bandeau vert sapin (contraste charte). Sélecteur ciblé sur le SEUL lien de marque (enfant direct de la barre .h-16), pour ne pas toucher aux liens de