/*
* ============================================================
* SHOOT EVENTS · Design System CSS
* Charte graphique v1.0 · Juin 2026
* Conçu par MarketFrame · marketframe.ai
* ============================================================
*
* USAGE
* -----
* Mettre en première ligne de chaque feuille de style :
* @import './charte.css'; (chemin relatif selon structure)
*
* Ou lier directement dans index.html AVANT tout autre CSS :
*
*
* Toutes les valeurs de couleur, typo, espacement, ombre et
* animation sont définies ici. Ne jamais hardcoder de hex
* dans index.css ou main.css · toujours utiliser les tokens.
* ============================================================
*/
/* ============================================================
01. GOOGLE FONTS
Poppins (display) + Inter (texte)
Le chargement se fait désormais via dans le
d'index.html (preconnect + display=swap), pour éviter la chaîne
d'@import qui bloque le rendu. URL conservée ici pour référence :
https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700&display=swap
============================================================ */
/* ============================================================
02. DESIGN TOKENS · :root
============================================================ */
:root {
/* ----------------------------------------------------------
COULEURS · Or signature
Ramp exhaustive du plus clair au plus profond.
Couleur de marque : --or-500 (#AC8B4E)
---------------------------------------------------------- */
--or-50: #FBF5EA; /* Fonds dorés très clairs, arrière-plans */
--or-100: #F5E8CC; /* Aplats doux, badges, tags */
--or-200: #E9D1A0; /* Surfaces actives, halos légers */
--or-300: #D9B873; /* Détails, séparateurs, décorations */
--or-400: #C49C55; /* Survol des CTA */
--or-500: #AC8B4E; /* ★ SIGNATURE · CTA principal · mark · fil directeur */
--or-600: #927740; /* Or foncé, états pressés */
--or-700: #6E5A31; /* Texte sur fond or clair */
--or-900: #463920; /* Or profond, texte sur or-100 */
/* Dégradé or pour effets premium (mark, cartons, surfaces) */
--or-gradient: linear-gradient(135deg, #FEE89D 0%, #C49C55 40%, #6E5A31 100%);
--or-gradient-h: linear-gradient(90deg, #FEE89D 0%, #C49C55 45%, #6E5A31 100%);
/* ----------------------------------------------------------
COULEURS · Neutres chauds (9 paliers)
Base thermique alignée avec l'or. Pas de gris froids.
---------------------------------------------------------- */
--n-0: #FFFFFF;
--n-50: #FAF8F3; /* Fond chaud principal des sections claires */
--n-100: #F2EEE5; /* Fond de carte, input, aplat léger */
--n-200: #E5DFD2; /* Bordures, séparateurs */
--n-300: #CFC7B6; /* Bordures actives, placeholder */
--n-500: #A79D8C; /* Texte atténué (labels, meta) */
--n-600: #7C7264; /* Texte secondaire */
--n-700: #4C463B; /* Texte secondaire fort */
--n-900: #1A1712; /* Texte principal (encre) */
--noir: #0E0D0B; /* Surface sombre signature (hero, footer, cover) */
/* ----------------------------------------------------------
TYPOGRAPHIE
Police de marque : Poppins (display + wordmark)
Police de corps : Inter (paragraphes, labels, méta)
---------------------------------------------------------- */
--font-display: 'Poppins', sans-serif;
--font-text: 'Inter', sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* pour code si besoin */
/* Échelle de tailles (mobile-first, agrandir en responsive) */
--text-xs: 0.6875rem; /* 11px · kicker, meta, labels mono */
--text-sm: 0.8125rem; /* 13px · légendes, mentions légales */
--text-base: 0.9375rem; /* 15px · corps courant */
--text-md: 1.0625rem; /* 17px · paragraphes mis en avant */
--text-lg: 1.25rem; /* 20px · sous-titres, lede */
--text-xl: 1.5rem; /* 24px · titres secondaires */
--text-2xl: 1.875rem; /* 30px · sous-sections */
--text-3xl: 2.5rem; /* 40px · titres de section */
--text-4xl: 3rem; /* 48px · H1 desktop */
--text-5xl: 4rem; /* 64px · Hero headline desktop */
/* Poids */
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
/* Interlignage */
--leading-tight: 1.15; /* Titres grands */
--leading-snug: 1.3; /* Titres secondaires */
--leading-normal: 1.55; /* Corps courant */
--leading-relaxed: 1.7; /* Long format, articles */
/* Letter-spacing */
--tracking-tight: -0.02em;
--tracking-normal: 0;
--tracking-wide: 0.06em;
--tracking-wider: 0.15em;
--tracking-widest: 0.34em; /* Kickers tout-caps */
/* ----------------------------------------------------------
ESPACEMENT · Échelle 4px stricte
Utiliser exclusivement ces valeurs pour margin/padding/gap
---------------------------------------------------------- */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
--space-20: 5rem; /* 80px */
--space-24: 6rem; /* 96px */
--space-30: 7.5rem; /* 120px */
/* Espacement section (padding vertical des sections) */
--section-py-mobile: var(--space-16); /* 64px sur mobile */
--section-py: var(--space-24); /* 96px sur desktop */
/* Container max-width */
--container-max: 1200px;
--container-px: var(--space-6); /* padding lateral */
/* ----------------------------------------------------------
BORDER-RADIUS
Du badge net au pill arrondi.
---------------------------------------------------------- */
--radius-sm: 0.5rem; /* 8px · badges, tags, petits boutons */
--radius: 0.75rem; /* 12px · boutons, inputs (défaut) */
--radius-md: 1rem; /* 16px · cartes, panneaux */
--radius-lg: 1.375rem; /* 22px · cartes majeures */
--radius-xl: 1.75rem; /* 28px · modals, drawers */
--radius-full: 9999px; /* · pills, pastilles, avatars */
/* ----------------------------------------------------------
OMBRES & EFFETS
Deux halos dorés (shadow-glow*) = signature Shoot Events.
Réservés au CTA principal et aux cartes accent.
---------------------------------------------------------- */
--shadow-xs: 0 1px 2px rgba(26, 23, 18, 0.08);
--shadow-sm: 0 2px 6px rgba(26, 23, 18, 0.10);
--shadow-md: 0 8px 20px rgba(26, 23, 18, 0.12);
--shadow-lg: 0 18px 40px rgba(26, 23, 18, 0.16);
--shadow-xl: 0 30px 60px rgba(26, 23, 18, 0.20);
/* ★ Halos or · identifiants de la marque */
--shadow-glow: 0 8px 26px rgba(172, 139, 78, 0.45);
--shadow-glow-soft: 0 4px 16px rgba(172, 139, 78, 0.28);
--shadow-glow-lg: 0 16px 48px rgba(172, 139, 78, 0.55);
/* ----------------------------------------------------------
MOTION
Fluide et vivant, à l'image de la rotation 360°.
Jamais de rebond excessif.
---------------------------------------------------------- */
--duration-fast: 150ms;
--duration-base: 300ms;
--duration-slow: 600ms;
--duration-enter: 400ms;
--easing-standard: cubic-bezier(0.2, 0.8, 0.2, 1); /* Principal */
--easing-in: cubic-bezier(0.4, 0, 1, 1);
--easing-out: cubic-bezier(0, 0, 0.2, 1);
--easing-linear: linear;
/* Shorthand pour les transitions courantes */
--transition: all var(--duration-base) var(--easing-standard);
--transition-fast: all var(--duration-fast) var(--easing-standard);
--transition-slow: all var(--duration-slow) var(--easing-standard);
/* ----------------------------------------------------------
Z-INDEX · Échelle organisée
---------------------------------------------------------- */
--z-below: -1;
--z-base: 0;
--z-raised: 10;
--z-dropdown: 100;
--z-sticky: 200;
--z-overlay: 300;
--z-modal: 400;
--z-toast: 500;
}
/* ============================================================
03. RESET & BASE
============================================================ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* L'attribut [hidden] doit toujours l'emporter, même quand un composant
force display:flex/inline-flex (ex : .footer-social-link). Sans ceci, un
élément marqué hidden en HTML reste visible · cf. le lien Google du footer,
masqué tant que la fiche n'existe pas. */
[hidden] { display: none !important; }
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-text);
font-size: var(--text-base);
font-weight: var(--weight-regular);
line-height: var(--leading-normal);
color: var(--n-900);
background-color: var(--n-0);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, video, svg {
display: block;
max-width: 100%;
height: auto;
}
a {
color: inherit;
text-decoration: none;
}
ul, ol {
list-style: none;
}
button {
cursor: pointer;
font-family: inherit;
border: none;
background: none;
}
input, textarea, select {
font-family: inherit;
font-size: inherit;
}
/* ============================================================
04. TYPOGRAPHIE · Classes utilitaires
============================================================ */
/* Display · Poppins */
.font-display { font-family: var(--font-display); }
.font-text { font-family: var(--font-text); }
/* Tailles */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md { font-size: var(--text-md); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }
.text-5xl { font-size: var(--text-5xl); }
/* Poids */
.weight-regular { font-weight: var(--weight-regular); }
.weight-medium { font-weight: var(--weight-medium); }
.weight-semibold { font-weight: var(--weight-semibold); }
.weight-bold { font-weight: var(--weight-bold); }
/* Interlignage */
.leading-tight { line-height: var(--leading-tight); }
.leading-snug { line-height: var(--leading-snug); }
.leading-normal { line-height: var(--leading-normal); }
.leading-relaxed { line-height: var(--leading-relaxed); }
/* Couleur texte */
.text-ink { color: var(--n-900); }
.text-body { color: var(--n-700); }
.text-muted { color: var(--n-600); }
.text-subtle { color: var(--n-500); }
.text-gold { color: var(--or-500); }
.text-white { color: var(--n-0); }
/* Kicker (étiquette de section tout caps) */
.kicker {
font-family: var(--font-text);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
color: var(--or-600);
}
/* Headings par défaut */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: var(--weight-bold);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--n-900);
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
p {
line-height: var(--leading-normal);
color: var(--n-700);
}
/* Headline hero (à placer sur le H1 hero) */
.headline-hero {
font-family: var(--font-display);
font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
font-weight: var(--weight-bold);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
}
/* ============================================================
05. LAYOUT · Container & Grid
============================================================ */
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-px);
}
.section {
padding-block: var(--section-py-mobile);
}
@media (min-width: 768px) {
.section {
padding-block: var(--section-py);
}
}
/* Grille générique 2 colonnes → responsive */
.grid-2 {
display: grid;
gap: var(--space-8);
grid-template-columns: 1fr;
}
.grid-3 {
display: grid;
gap: var(--space-6);
grid-template-columns: 1fr;
}
@media (min-width: 640px) {
.grid-2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
.grid-3 { grid-template-columns: repeat(3, 1fr); }
}
/* ============================================================
06. COULEURS · Classes utilitaires
============================================================ */
/* Fonds */
.bg-or-50 { background-color: var(--or-50); }
.bg-or-100 { background-color: var(--or-100); }
.bg-or-500 { background-color: var(--or-500); }
.bg-n-50 { background-color: var(--n-50); }
.bg-n-100 { background-color: var(--n-100); }
.bg-noir { background-color: var(--noir); }
.bg-white { background-color: var(--n-0); }
/* ============================================================
07. COMPOSANTS · Boutons
============================================================ */
/* Bouton de base */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
font-family: var(--font-display);
font-size: var(--text-base);
font-weight: var(--weight-semibold);
line-height: 1;
border-radius: var(--radius);
padding: var(--space-3) var(--space-6);
transition: var(--transition);
cursor: pointer;
text-decoration: none;
white-space: nowrap;
}
/* Primaire · or signature avec halo */
.btn-primary {
background-color: var(--or-500);
color: var(--n-900);
box-shadow: var(--shadow-glow-soft);
}
.btn-primary:hover {
background-color: var(--or-400);
box-shadow: var(--shadow-glow);
transform: translateY(-1px);
}
.btn-primary:active {
background-color: var(--or-600);
box-shadow: var(--shadow-sm);
transform: translateY(0);
}
/* Secondaire · contour neutre */
.btn-secondary {
background-color: transparent;
color: var(--n-900);
box-shadow: inset 0 0 0 1.5px var(--n-300);
}
.btn-secondary:hover {
background-color: var(--n-100);
box-shadow: inset 0 0 0 1.5px var(--n-500);
}
/* Ghost · invisible au repos, encre en hover */
.btn-ghost {
background-color: transparent;
color: var(--n-700);
}
.btn-ghost:hover {
background-color: var(--n-100);
color: var(--n-900);
}
/* Ghost clair (sur fond sombre) */
.btn-ghost-light {
background-color: transparent;
color: var(--n-0);
box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3);
}
.btn-ghost-light:hover {
background-color: rgba(255,255,255,.08);
box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6);
}
/* Tailles */
.btn-sm {
font-size: var(--text-sm);
padding: var(--space-2) var(--space-4);
}
.btn-lg {
font-size: var(--text-md);
padding: var(--space-4) var(--space-8);
border-radius: var(--radius-md);
}
/* ============================================================
08. COMPOSANTS · Cartes
============================================================ */
.card {
background-color: var(--n-0);
border: 1px solid var(--n-200);
border-radius: var(--radius-lg);
overflow: hidden;
transition: var(--transition);
}
.card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
/* Carte accent (or-50 + halo) */
.card-accent {
background-color: var(--or-50);
border-color: var(--or-200);
}
.card-accent:hover {
box-shadow: var(--shadow-glow-soft);
}
/* Carte sombre (hero cards, fond noir) */
.card-dark {
background-color: #1A1814;
border-color: rgba(172, 139, 78, 0.2);
color: var(--n-0);
}
.card-dark:hover {
border-color: rgba(172, 139, 78, 0.5);
box-shadow: var(--shadow-glow-soft);
}
.card-body {
padding: var(--space-6);
}
.card-header {
padding: var(--space-6) var(--space-6) 0;
}
/* ============================================================
09. COMPOSANTS · Pills & Badges
============================================================ */
/* Pills (filtre, navigation) */
.pill {
display: inline-flex;
align-items: center;
font-family: var(--font-display);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-full);
transition: var(--transition-fast);
cursor: pointer;
}
.pill-active {
background-color: var(--or-500);
color: var(--n-900);
}
.pill-inactive {
background-color: transparent;
color: var(--n-700);
box-shadow: inset 0 0 0 1px var(--n-300);
}
.pill-inactive:hover {
background-color: var(--n-100);
color: var(--n-900);
}
/* Badges (statuts) */
.badge {
display: inline-flex;
align-items: center;
font-family: var(--font-text);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
padding: 3px var(--space-2);
border-radius: var(--radius-sm);
letter-spacing: 0.03em;
}
.badge-or {
background-color: var(--or-100);
color: var(--or-700);
}
.badge-dark {
background-color: rgba(172,139,78,.2);
color: var(--or-300);
}
/* ============================================================
10. COMPOSANTS · Champs de formulaire
============================================================ */
.field {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.field-label {
font-family: var(--font-text);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--n-700);
}
.input,
.textarea,
.select {
font-family: var(--font-text);
font-size: var(--text-base);
color: var(--n-900);
background-color: var(--n-0);
border: 1.5px solid var(--n-200);
border-radius: var(--radius);
padding: var(--space-3) var(--space-4);
transition: var(--transition-fast);
width: 100%;
outline: none;
}
.input::placeholder,
.textarea::placeholder {
color: var(--n-500);
}
.input:hover, .textarea:hover {
border-color: var(--n-300);
}
.input:focus, .textarea:focus, .select:focus {
border-color: var(--or-500);
box-shadow: 0 0 0 3px rgba(172, 139, 78, 0.18);
}
.textarea {
resize: vertical;
min-height: 120px;
}
/* ============================================================
11. COMPOSANTS · Navigation
============================================================ */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: var(--z-sticky);
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-4) var(--space-6);
transition: var(--transition-base);
}
/* Nav transparente (hero) → opaque au scroll via JS */
.nav-transparent {
background-color: transparent;
}
.nav-solid {
background-color: rgba(14, 13, 11, 0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: var(--shadow-sm);
}
.nav-logo {
height: 32px;
width: auto;
}
.nav-links {
display: none;
gap: var(--space-8);
align-items: center;
}
@media (min-width: 768px) {
.nav-links { display: flex; }
}
.nav-link {
font-family: var(--font-display);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--n-0);
opacity: 0.8;
transition: var(--transition-fast);
letter-spacing: 0.04em;
}
.nav-link:hover {
opacity: 1;
color: var(--or-300);
}
/* ============================================================
12. COMPOSANTS · Section hero
============================================================ */
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
background-color: var(--noir);
color: var(--n-0);
overflow: hidden;
}
/* Halo or en arrière-plan */
.hero::before {
content: '';
position: absolute;
top: 15%;
left: 50%;
transform: translateX(-50%);
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(172,139,78,.12) 0%, transparent 70%);
pointer-events: none;
}
.hero-eyebrow {
font-family: var(--font-text);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
color: var(--or-400);
margin-bottom: var(--space-4);
}
.hero-title {
font-family: var(--font-display);
font-size: clamp(2.2rem, 5vw, 4rem);
font-weight: var(--weight-bold);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--n-0);
margin-bottom: var(--space-6);
}
/* "Shoot" en or dans le titre */
.hero-title .accent { color: var(--or-400); }
.hero-subtitle {
font-size: var(--text-lg);
color: rgba(250, 248, 243, 0.7);
line-height: var(--leading-normal);
max-width: 540px;
margin-bottom: var(--space-10);
}
.hero-cta {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
align-items: center;
}
/* ============================================================
13. COMPOSANTS · Étapes (Comment ça marche)
============================================================ */
.step {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-4);
}
.step-number {
width: 52px;
height: 52px;
border-radius: var(--radius-full);
background-color: var(--or-100);
color: var(--or-700);
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: var(--weight-bold);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.step-icon {
width: 56px;
height: 56px;
border-radius: var(--radius-lg);
background-color: var(--or-100);
color: var(--or-600);
display: flex;
align-items: center;
justify-content: center;
}
.step-icon svg {
width: 28px;
height: 28px;
stroke: var(--or-600);
}
.step-title {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
color: var(--n-900);
}
.step-desc {
font-size: var(--text-base);
color: var(--n-600);
line-height: var(--leading-normal);
}
/* ============================================================
14. COMPOSANTS · Tarifs
============================================================ */
.pricing-card {
background-color: var(--n-0);
border: 1.5px solid var(--n-200);
border-radius: var(--radius-xl);
padding: var(--space-8);
display: flex;
flex-direction: column;
gap: var(--space-4);
transition: var(--transition);
}
.pricing-card:hover {
border-color: var(--or-300);
box-shadow: var(--shadow-glow-soft);
transform: translateY(-3px);
}
/* Carte recommandée */
.pricing-card.featured {
border-color: var(--or-500);
background: linear-gradient(145deg, var(--or-50) 0%, var(--n-0) 100%);
box-shadow: var(--shadow-glow-soft);
position: relative;
}
.pricing-badge {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
background-color: var(--or-500);
color: var(--n-900);
font-family: var(--font-text);
font-size: var(--text-xs);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
padding: var(--space-1) var(--space-4);
border-radius: var(--radius-full);
}
.pricing-name {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
}
.pricing-price {
font-family: var(--font-display);
font-size: var(--text-4xl);
font-weight: var(--weight-bold);
color: var(--or-500);
line-height: 1;
}
.pricing-price sup {
font-size: var(--text-xl);
font-weight: var(--weight-medium);
vertical-align: super;
}
.pricing-duration {
font-size: var(--text-sm);
color: var(--n-600);
}
.pricing-divider {
border: none;
border-top: 1px solid var(--n-200);
}
/* ============================================================
15. COMPOSANTS · Témoignages
============================================================ */
.testimonial {
background-color: var(--n-50);
border-radius: var(--radius-lg);
padding: var(--space-8);
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.testimonial-stars {
display: flex;
gap: var(--space-1);
color: var(--or-500);
}
.testimonial-text {
font-size: var(--text-base);
line-height: var(--leading-relaxed);
color: var(--n-700);
font-style: italic;
}
.testimonial-author {
display: flex;
align-items: center;
gap: var(--space-3);
}
.testimonial-avatar {
width: 40px;
height: 40px;
border-radius: var(--radius-full);
background-color: var(--or-200);
color: var(--or-700);
font-family: var(--font-display);
font-weight: var(--weight-bold);
font-size: var(--text-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.testimonial-name {
font-family: var(--font-display);
font-weight: var(--weight-semibold);
font-size: var(--text-sm);
color: var(--n-900);
}
.testimonial-event {
font-size: var(--text-xs);
color: var(--n-600);
}
/* ============================================================
16. COMPOSANTS · Section contact
============================================================ */
.contact-grid {
display: grid;
gap: var(--space-12);
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.contact-grid { grid-template-columns: 1fr 1.6fr; }
}
.contact-info {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.contact-whatsapp {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-display);
font-size: var(--text-md);
font-weight: var(--weight-semibold);
color: #25D366;
padding: var(--space-4) var(--space-6);
background-color: rgba(37, 211, 102, 0.08);
border-radius: var(--radius);
border: 1px solid rgba(37, 211, 102, 0.25);
transition: var(--transition);
}
.contact-whatsapp:hover {
background-color: rgba(37, 211, 102, 0.15);
border-color: #25D366;
}
/* ============================================================
17. FOOTER
============================================================ */
.footer {
background-color: var(--noir);
color: rgba(250, 248, 243, 0.5);
padding-block: var(--space-12);
}
.footer-logo {
height: 28px;
margin-bottom: var(--space-4);
opacity: 0.9;
}
.footer-text {
font-size: var(--text-sm);
color: rgba(250, 248, 243, 0.45);
}
.footer-sep {
border: none;
border-top: 1px solid rgba(250, 248, 243, 0.08);
margin-block: var(--space-8);
}
/* ============================================================
18. UTILITAIRES · Séparateur doré
============================================================ */
.gold-line {
width: 48px;
height: 2px;
background: var(--or-gradient-h);
border-radius: var(--radius-full);
margin-bottom: var(--space-6);
}
/* Séparateur section complet */
.section-header {
margin-bottom: var(--space-12);
}
.section-header .kicker {
margin-bottom: var(--space-3);
}
.section-header h2 {
margin-bottom: var(--space-4);
}
.section-header p {
max-width: 560px;
font-size: var(--text-md);
color: var(--n-600);
}
/* Version centrée */
.section-header-center {
text-align: center;
}
.section-header-center p {
margin-inline: auto;
}
.section-header-center .gold-line {
margin-inline: auto;
}
/* ============================================================
19. ANIMATIONS · Reveal au scroll
(Ajouter la classe .reveal via JS au chargement)
============================================================ */
.reveal {
opacity: 0;
transform: translateY(24px);
transition:
opacity var(--duration-slow) var(--easing-standard),
transform var(--duration-slow) var(--easing-standard);
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 100ms; }
.reveal-delay-2 { transition-delay: 200ms; }
.reveal-delay-3 { transition-delay: 300ms; }
.reveal-delay-4 { transition-delay: 400ms; }
.reveal-delay-5 { transition-delay: 500ms; }
.reveal-delay-6 { transition-delay: 600ms; }
/* ============================================================
20. BREAKPOINTS · Media queries utilitaires
sm: 640px · md: 768px · lg: 1024px · xl: 1280px
============================================================ */
/* Visible/caché selon breakpoint */
.hide-mobile { display: none; }
.show-mobile { display: block; }
@media (min-width: 768px) {
.hide-mobile { display: block; }
.show-mobile { display: none; }
}
/* Alignement responsive */
.text-center-mobile { text-align: center; }
@media (min-width: 768px) {
.text-center-mobile { text-align: left; }
}