/* ========================================================================== TOKENS — Pompes Funèbres Musulmanes El Firdaous, Strasbourg Source de vérité : maquette Figma "Pompes Funèbres Musulmanes STRASBOURG" (fileKey TnZIOkXV4fzsUjttQco1c5). RÈGLE : aucune couleur / taille / rayon / ombre en dur ailleurs que dans ce fichier. Tout le reste du CSS consomme des var(--token). Les quasi-doublons de la maquette (#C2A56B / #C2A46A) sont conservés séparément : Figma les distingue, les fusionner créerait un écart visible. ========================================================================== */ :root { /* ---------- Couleurs de marque ---------- Refonte du 2026-09-03 : la maquette est passée du bordeaux au bleu marine. Figma n'emploie plus qu'un seul marine #0B1937 pour tous les rôles sombres (les anciens tokens sont conservés par rôle pour pouvoir re-différencier). */ --c-navy: #0B1937; /* marine principal (identité) — ex-bordeaux #5A1E2A */ --c-navy-deep: #0B1937; /* libellés formulaire — ex #2E0F15 */ --c-navy-mid: #0B1937; /* carte statistique pleine — ex #7F2F3F */ --c-navy-footer: #0B1937; /* fond du pied de page — ex #321117 */ --c-navy-hover: #15306A; /* survol des boutons pleins (Figma : bleu du panneau formulaire) */ --c-ink-topbar: #0B1937; /* barre d'urgence supérieure — ex #1B090C */ --c-accent: #0B1937; /* CTA principal — ex framboise #99384C */ --c-gold: #C2A56B; /* or principal */ --c-gold-alt: #C2A46A; /* or — variante bas de page (Figma la distingue) */ --c-gold-soft: #DBCCA8; /* séparateurs verticaux */ --c-gold-line: #DECEA0; /* filet du cadre coranique */ --c-gold-border: #EDE1CF; /* bordure des cartes statistiques */ --c-gold-halo: #F7F4E8; /* contour du médaillon « +15 ans » */ /* ---------- Neutres ---------- */ --c-white: #FFFFFF; --c-cream: #FCFAF7; /* fond de la section « présence locale » */ --c-card: #FBFBFB; /* carte d'étape du parcours */ --c-chip: #F7F7F7; /* pastille d'icône */ --c-ink: #1C1C1C; /* titres */ --c-body: #2E2E2E; /* texte courant */ --c-muted: #414141; /* navigation inactive */ --c-placeholder: #717171; /* champs de formulaire */ --c-divider: #D4D2D2; --c-field-border: #E6DFD1; --c-photo-bg: #0B1937; /* fond derrière la photo « partenariats » (Figma 1:5208) — ex #261200 */ /* ---------- Couleurs dérivées (transparences de la maquette) ---------- */ --c-gold-wash: rgba(194, 165, 107, 0.05); /* fond section « accompagnement » */ --c-gold-wash-strong: rgba(194, 165, 107, 0.15); /* bloc hadith */ --c-navy-wash: rgba(21, 48, 106, 0.05); /* panneau du formulaire (Figma #15306A à 5 %) */ --c-navy-rule: rgba(11, 25, 55, 0.12); /* filets du panneau */ --c-navy-veil: rgba(11, 25, 55, 0.94); /* voile de la bande CTA */ --c-navy-wash-2: rgba(11, 25, 55, 0.02); /* fond des questions FAQ fermées */ --c-navy-wash-5: rgba(11, 25, 55, 0.05); /* FAQ ouverte, citation « mission » */ --c-navy-wash-10: rgba(11, 25, 55, 0.10); /* statut d'erreur formulaire */ --c-navy-wash-25: rgba(11, 25, 55, 0.25); /* filet gauche des questions FAQ */ --c-glass-fill: rgba(255, 255, 255, 0.02); --c-glass-fill-2: rgba(255, 255, 255, 0.05); --c-glass-fill-3: rgba(255, 255, 255, 0.06); --c-glass-stroke: rgba(255, 255, 255, 0.30); --c-glass-stroke-2: rgba(255, 255, 255, 0.71); --c-rule-light: rgba(255, 255, 255, 0.40); --c-rule-footer: rgba(255, 255, 255, 0.15); --c-frame-stroke: rgba(207, 185, 139, 0.50); /* encadrement photo « présence » */ --c-frame-stroke-soft: rgba(207, 185, 139, 0.34); /* encadrement photo « partenariats » */ /* Dégradés des cartes de service (voile bas pour lisibilité du texte) */ --g-card-40: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.90) 100%); --g-card-47: linear-gradient(180deg, rgba(0,0,0,.10) 47%, rgba(0,0,0,.90) 100%); --g-card-53: linear-gradient(180deg, rgba(0,0,0,.10) 53%, rgba(0,0,0,.90) 100%); /* ---------- Typographie ---------- */ /* 'Amiri' en repli : seul chargé pour les glyphes absents des familles principales (ex. ﷺ U+FDFA, rendu en tofu sinon) — sous-police arabe. */ --ff-display: 'Playfair Display', 'Amiri', Georgia, 'Times New Roman', serif; --ff-body: 'Jost', 'Amiri', 'Segoe UI', system-ui, -apple-system, sans-serif; --ff-numeral: 'Cinzel', 'Playfair Display', Georgia, serif; --ff-arabic: 'Amiri', 'Traditional Arabic', 'Times New Roman', serif; --fs-hero: 50px; /* h1 de la page d'accueil */ --fs-h2-xl: 44px; /* titre du bloc contact sur fond bordeaux */ --fs-h2: 40px; /* titre de section standard */ --fs-h3: 24px; /* titre de carte statistique */ --fs-h4: 20px; /* titre d'engagement */ --fs-h5: 19px; /* titre de carte de service */ --fs-h6: 18px; /* titre d'étape */ --fs-quote: 26px; /* verset arabe */ --fs-quote-fr:24px; /* traduction française */ --fs-lead: 17px; --fs-body: 16px; --fs-sm: 15px; --fs-xs: 14px; --fs-xxs: 13px; --fs-micro: 12px; --fs-numeral: 38px; /* « +15 » du médaillon */ --fs-footer-h:22px; /* titres de colonnes du pied de page */ --lh-tight: 1.2; --lh-title: 1.3; --lh-snug: 1.46; --lh-normal: 1.5; --lh-body: 1.6; --lh-quote: 1.65; --lh-arabic: 1.7; --ls-wide: 0.02em; --ls-caps: 0.05em; --ls-legal: 0.0667em; /* ---------- Rayons ---------- */ --r-dot: 5px; --r-chip: 10px; --r-glass: 16px; --r-step: 18px; --r-field: 22px; /* zone de message */ --r-panel: 28px; /* panneau blanc du formulaire */ --r-soft: 30px; --r-card: 32px; /* cartes de service (angles alternés) */ --r-block: 34px; /* bloc contact bordeaux */ --r-pill: 38px; /* boutons */ --r-form: 40px; /* panneau du formulaire de contact */ --r-stat: 50px; /* cartes statistiques (angles alternés) */ --r-media: 60px; /* photo « guide des familles » */ --r-badge: 72px; /* badge calligraphie du héros */ --r-media-l: 80px; /* photo « accompagnement humain » */ --r-media-xl:150px; /* photo « présence locale » */ --r-round: 100px; /* pastilles et champs arrondis */ --r-input: 400px; /* champs de saisie (capsule) */ --r-full: 9999px; /* ---------- Ombres ---------- */ --sh-header: 0 6px 25px rgba(0, 0, 0, 0.05); --sh-btn: 0 2px 14px rgba(0, 0, 0, 0.08); --sh-round: 0 1.87px 13.1px rgba(0, 0, 0, 0.08); --sh-block: 0 0 29px rgba(0, 0, 0, 0.06); --sh-calli: 0 3px 15px rgba(0, 0, 0, 0.30); --sh-calli-lg: 0 4px 17px rgba(0, 0, 0, 0.35); --sh-badge: 0 2px 16px rgba(0, 0, 0, 0.65); --sh-mask: 0 0 13px rgba(0, 0, 0, 0.62); /* ---------- Flou d'arrière-plan (effet « verre ») ---------- */ --blur-glass: blur(2.5px); --blur-badge: blur(3.5px); /* ---------- Grille et rythme vertical ---------- */ --w-container: 1200px; /* largeur de contenu, constante dans toute la maquette */ --w-page: 1440px; /* largeur de la frame Figma */ --pad-page: 120px; /* gouttière latérale de la maquette */ --h-topbar: 52px; --h-header: 110px; --h-btn: 44px; --sp-2: 2px; --sp-4: 4px; --sp-6: 6px; --sp-8: 8px; --sp-10: 10px; --sp-12: 12px; --sp-14: 14px; --sp-16: 16px; --sp-18: 18px; --sp-20: 20px; --sp-24: 24px; --sp-30: 30px; --sp-32: 32px; --sp-40: 40px; --sp-48: 48px; --sp-56: 56px; --sp-60: 60px; --sp-64: 64px; --sp-72: 72px; --sp-80: 80px; --sp-88: 88px; --sp-90: 90px; --sp-104: 104px; /* ---------- Transitions ---------- */ --t-fast: .18s cubic-bezier(.4, 0, .2, 1); --t-base: .28s cubic-bezier(.4, 0, .2, 1); --t-slow: .6s cubic-bezier(.22, .61, .36, 1); --z-deco: 0; --z-veil: 1; --z-content: 2; --z-header: 100; --z-menu: 200; }