/* ============================================================
AYO TRADITIONS — TOKENS.CSS
La colonne vertébrale visuelle du site.
Toutes les pages importent ce fichier. Une valeur à changer ?
On la change ici, une seule fois, et tout le site suit.
Porto-Novo, Bénin · 2026
============================================================ */
/* ---- 1 · POLICES -------------------------------------------
Deux familles, pas une de plus.
Cormorant Garamond : titres, prix, accents courts.
Montserrat : corps, labels, navigation, boutons.
(Pour optimiser la perf, ces imports peuvent être déplacés
en dans le . Ici en @import pour
qu'un seul fichier suffise.)
------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,400&family=Montserrat:wght@300;500;600&display=swap');
/* ---- 2 · VARIABLES ----------------------------------------- */
:root {
/* — Fonds — */
--noir: #0B0D12; /* fond cosmos, base de tout */
--noir-profond: #070809; /* sections alternées, footer */
/* — Or, signature Ayo — */
--or: #D4AF37; /* accents, labels, CTA Ibú, Egbe footer */
--or-clair: #E8C96A; /* hover sur l'or, uniquement */
/* — Textes — */
--texte: #F9F7F2; /* LE blanc unique : titres + corps clair */
--muted: #A8A29A; /* sous-textes, légendes, métadonnées */
/* — Voiles (overlays sur images) — */
--voile-hero: rgba(11,13,18,0.55); /* hero standard */
--voile-hero-fort:rgba(11,13,18,0.65); /* hero trop éclatant (Doctrine) */
--voile-section: rgba(11,13,18,0.78); /* section avec fond image */
/* — Familles typographiques — */
--serif: 'Cormorant Garamond', Georgia, serif;
--sans: 'Montserrat', system-ui, -apple-system, sans-serif;
/* — Échelle typographique (fluide) — */
--t-hero: clamp(2.4rem, 6vw, 4.2rem);
--t-h2: clamp(1.8rem, 4vw, 2.6rem);
--t-h3: clamp(1.3rem, 2.5vw, 1.6rem);
--t-body: clamp(0.95rem, 1.2vw, 1.05rem);
--t-eyebrow: 0.62rem;
--t-prix: clamp(2rem, 5vw, 3.2rem);
/* — Espacement (multiples de 8) — */
--esp-xs: 0.5rem;
--esp-sm: 1rem;
--esp-md: 2rem;
--esp-lg: 4rem;
--esp-xl: 6rem;
--esp-2xl: 8rem;
/* — Largeurs de lecture — */
--lecture: 720px; /* texte long */
--grille: 1100px; /* grilles, sections larges */
/* — Transition standard — */
--trans: all 0.4s ease;
}
/* ---- 3 · BASE ---------------------------------------------- */
body {
background: var(--noir);
color: var(--texte);
font-family: var(--sans);
font-weight: 300;
font-size: var(--t-body);
line-height: 1.7;
margin: 0;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, .section-title {
font-family: var(--serif);
font-weight: 300;
color: var(--texte);
line-height: 1.15;
}
/* L'italique : accents courts uniquement, jamais un paragraphe.
Poids 400 pour tenir à l'écran. */
em, .accent-italique {
font-family: var(--serif);
font-style: italic;
font-weight: 400;
}
/* ---- 4 · EYEBROW (label de section) ------------------------ */
.eyebrow {
font-family: var(--sans);
font-weight: 500;
font-size: var(--t-eyebrow);
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--or);
}
/* ---- 5 · HERO STANDARD ------------------------------------- */
.hero {
min-height: 88vh; /* pas 100vh : laisser deviner la suite */
display: flex;
align-items: center;
background-size: cover;
background-position: center;
position: relative;
}
.hero-content {
max-width: var(--lecture);
margin: 0 auto;
padding: 0 var(--esp-md);
}
.hero h1 { font-size: var(--t-hero); }
.hero .eyebrow { display: inline-block; margin-bottom: var(--esp-sm); }
/* Chaque page pose son image hero ainsi :
.hero { background-image:
linear-gradient(var(--voile-hero), var(--voile-hero)),
url('images/hero-xxx.webp'); } */
/* ---- 6 · SECTION ------------------------------------------- */
.section {
padding: var(--esp-2xl) var(--esp-md);
}
@media (max-width: 768px) {
.section { padding: var(--esp-xl) var(--esp-md); }
}
.section-inner {
max-width: var(--grille);
margin: 0 auto;
}
.section-texte {
max-width: var(--lecture);
}
/* Section avec fond image : voile fort pour lisibilité */
.section--image {
background-size: cover;
background-position: center;
position: relative;
}
/* poser ainsi :
.section--image { background-image:
linear-gradient(var(--voile-section), var(--voile-section)),
url('images/xxx.webp'); } */
/* ---- 7 · CTA — LA GRAMMAIRE DU BOUTON ---------------------- */
/* Plein (or) : produit accessible (Ibú).
Cadre (contour) : produit sous condition (Òrùlé, Ayo Ònà). */
.cta-plein,
.cta-cadre {
display: inline-block;
font-family: var(--sans);
font-weight: 500;
font-size: 0.72rem;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 0.9rem 2.2rem;
border: 1px solid var(--or);
text-decoration: none;
cursor: pointer;
transition: var(--trans);
}
.cta-plein {
background: var(--or);
color: var(--noir);
}
.cta-plein:hover {
background: var(--or-clair);
border-color: var(--or-clair);
}
.cta-cadre {
background: transparent;
color: var(--or);
}
.cta-cadre:hover {
background: rgba(212,175,55,0.08);
}
/* ---- 8 · DUO D'IMAGES (avant-plan) ------------------------- */
.duo-images {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--esp-md);
max-width: var(--grille);
margin: 0 auto;
}
.duo-images img {
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 4 / 3;
border-radius: 4px; /* le luxe est sobre, pas bombé */
}
@media (max-width: 768px) {
.duo-images { grid-template-columns: 1fr; }
}
/* ---- 9 · PRIX ---------------------------------------------- */
.prix {
font-family: var(--serif);
font-weight: 400;
font-size: var(--t-prix);
color: var(--texte);
}
/* Le symbole dollar simple, pas "USD". Ex : $500 */
/* ---- 10 · UTILITAIRES -------------------------------------- */
.texte-muted { color: var(--muted); }
.accent-or { color: var(--or); } /* ex : Egbe au footer */
.centre { text-align: center; }