/* ============================================================================ ACST — Refonte publique « Ciel vivant » (direction B du handoff design) À placer dans : static/css/refonte.css — chargé APRÈS acst.css. Tous les tokens de la refonte sont des variables CSS `--b-*`, redéfinies par thème via [data-theme] sur (posé par static/js/acst.js). `.b-force-dark` re-force les tokens sombres sur une sous-arborescence (le hero d'accueil garde son ciel vivant dans les deux thèmes). ============================================================================ */ /* ─────────── Tokens — thème sombre (défaut) ─────────── */ :root, [data-theme="dark"], .b-force-dark { --b-bg: #06110F; --b-bg2: #0B1F1B; --b-bg3: #040D0B; --b-bg-rgb: 6, 17, 15; --b-hero1: #0C211C; --b-hero2: #081713; --b-ink: #F5EFE3; --b-ink-rgb: 245, 239, 227; --b-ink-soft: rgba(245, 239, 227, 0.82); --b-mute: rgba(245, 239, 227, 0.55); --b-faint: rgba(245, 239, 227, 0.35); --b-nav-ink: rgba(245, 239, 227, 0.78); --b-gold: #CDA464; --b-gold-soft: #E6D2A8; --b-gold-hi: #E9CF9F; --b-on-gold: #10201B; --b-line: rgba(217, 194, 154, 0.16); --b-tan-rgb: 217, 194, 154; --b-bronze-rgb: 184, 145, 90; --b-goldhi-rgb: 233, 207, 159; --b-lattice-opacity: 0.05; --b-logo-dark-disp: block; --b-logo-light-disp: none; --b-stars-disp: block; } [data-theme="light"] { --b-bg: #FAF5EA; --b-bg2: #F3ECDB; --b-bg3: #EDE4D0; --b-bg-rgb: 250, 245, 234; --b-hero1: #F0E7D0; --b-hero2: #F6F0E1; --b-ink: #1C2A24; --b-ink-rgb: 28, 42, 36; --b-ink-soft: rgba(28, 42, 36, 0.85); --b-mute: rgba(28, 42, 36, 0.62); --b-faint: rgba(28, 42, 36, 0.42); --b-nav-ink: rgba(28, 42, 36, 0.72); --b-gold: #A87E3F; --b-gold-soft: #8A6A33; --b-gold-hi: #8F6B2A; --b-on-gold: #FCF7EA; --b-line: rgba(138, 106, 51, 0.22); --b-tan-rgb: 138, 106, 51; --b-bronze-rgb: 168, 126, 63; --b-goldhi-rgb: 143, 107, 42; --b-lattice-opacity: 0.08; --b-logo-dark-disp: none; --b-logo-light-disp: block; --b-stars-disp: none; } body { background: var(--b-bg); color: var(--b-ink); } /* ─────────── Barre de défilement intégrée à la palette ─────────── Fine, dorée, piste transparente : elle se fond dans la page au lieu de la barre système grise. S'adapte au thème via --b-tan-rgb. */ html { scrollbar-width: thin; scrollbar-color: rgba(var(--b-tan-rgb), 0.45) transparent; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(var(--b-tan-rgb), 0.38); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(var(--b-tan-rgb), 0.62); background-clip: padding-box; } .b-logo-on-dark { display: var(--b-logo-dark-disp, block); } .b-logo-on-light { display: var(--b-logo-light-disp, none); } .b-stars { display: var(--b-stars-disp, block); } /* ─────────── Treillis géométrique (étoile à 8 branches) ─────────── */ .lattice { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23B8915A' stroke-width='0.6' opacity='0.6'%3E%3Crect x='30' y='30' width='36' height='36'/%3E%3Crect x='30' y='30' width='36' height='36' transform='rotate(45 48 48)'/%3E%3Ccircle cx='48' cy='48' r='2'/%3E%3Cpath d='M0 48 L30 48 M66 48 L96 48 M48 0 L48 30 M48 66 L48 96'/%3E%3C/g%3E%3C/svg%3E"); background-size: 96px 96px; } .b-lattice-bg { position: absolute; inset: 0; opacity: var(--b-lattice-opacity); pointer-events: none; } /* ─────────── Révélation au scroll ─────────── */ .rv { opacity: 0; transform: translateY(26px); transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1), transform 900ms cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--rv-delay, 0ms); will-change: opacity, transform; } .rv.rv-in { opacity: 1; transform: translateY(0); } .rv-left { transform: translateX(-32px); } .rv-right { transform: translateX(32px); } .rv-left.rv-in, .rv-right.rv-in { transform: translateX(0); } .rv-scale { transform: scale(0.94); } .rv-scale.rv-in { transform: scale(1); } /* Sans JS (ou si l'observer ne tourne pas), tout reste visible */ html.no-js .rv { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .rv { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ─────────── Ligne dorée qui s'étire ─────────── */ .rule-grow { transform-origin: left center; transform: scaleX(0); transition: transform 1200ms cubic-bezier(0.22, 1, 0.36, 1) 200ms; } .rv-in .rule-grow, .rule-grow.rv-in { transform: scaleX(1); } /* ─────────── Keyframes partagés ─────────── */ @keyframes twinkle { 0%, 100% { opacity: var(--tw-base, 0.5); } 50% { opacity: calc(var(--tw-base, 0.5) * 0.25); } } @keyframes haloBreathe { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } } @keyframes floatSlow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes heroBIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .countdown-digit { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; } /* ════════════════════════════════════════════════════════════════════ Chrome — header / footer ════════════════════════════════════════════════════════════════════ */ .b-header { position: sticky; top: 0; left: 0; right: 0; z-index: 90; background: rgba(var(--b-bg-rgb), 0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--b-line); } .b-header.is-overlay { position: absolute; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; } .b-header-in { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; padding: 14px 34px; color: var(--b-ink); } .b-brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; } .b-brand img { height: 38px; width: auto; } .b-brand-name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 19px; font-weight: 600; letter-spacing: 0.02em; } /* Barre de navigation desktop. Sélecteur de classe (et NON `.b-header-in nav`) pour ne pas surclasser, par spécificité, le `.b-mainnav-d { display:none }` du mode mobile (≤880px) — sinon la nav desktop fuit sur mobile. */ .b-mainnav-d { margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; } .b-header-tools { display: flex; align-items: center; gap: 12px; } /* navigation du header */ .b-nav { position: relative; background: none; border: none; cursor: pointer; color: var(--b-nav-ink); font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; padding: 9px 13px; transition: color 240ms ease; } .b-nav::after { content: ''; position: absolute; left: 13px; right: 13px; bottom: 3px; height: 1px; background: var(--b-gold-soft); transform: scaleX(0); transform-origin: right center; transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1); } .b-nav:hover { color: var(--b-ink); } .b-nav:hover::after { transform: scaleX(1); transform-origin: left center; } .b-nav.on { color: var(--b-gold-hi); } .b-nav.on::after { transform: scaleX(1); } /* pastille « messages non lus » sur le lien Mon espace */ .b-nav-badge { display: inline-grid; place-items: center; min-width: 17px; height: 17px; margin-left: 6px; padding: 0 5px; border-radius: 999px; background: var(--b-gold); color: #fff; font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: 0; vertical-align: 1px; } /* outils du header : langue + thème */ .b-lang { display: flex; align-items: center; gap: 2px; color: var(--b-faint); font-size: 11px; } .b-lang a { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; cursor: pointer; color: var(--b-nav-ink); font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; padding: 6px 5px; text-decoration: none; transition: color 240ms ease; } .b-lang a:hover { color: var(--b-ink); } .b-lang a.on { color: var(--b-gold-hi); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } /* Petits drapeaux — discrets pour ne pas casser l'harmonie. Atténués par défaut (saturation/opacité basses), pleins seulement pour la langue active. */ .b-flag { display: block; flex: none; width: 16px; height: 11px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(var(--b-tan-rgb), 0.30); opacity: 0.55; filter: saturate(0.7); transition: opacity 240ms ease, filter 240ms ease; } .b-lang a:hover .b-flag { opacity: 0.85; } .b-lang a.on .b-flag { opacity: 1; filter: none; } .b-lang-sep { color: var(--b-faint); } .b-theme-btn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid rgba(var(--b-tan-rgb), 0.35); border-radius: 999px; color: var(--b-gold-soft); cursor: pointer; transition: border-color 240ms ease, color 240ms ease, transform 240ms ease; } .b-theme-btn:hover { border-color: var(--b-gold); color: var(--b-ink); transform: rotate(14deg); } /* acst.js bascule .icon-sun / .icon-moon selon le thème actif */ .b-theme-btn .icon-sun, .b-theme-btn .icon-moon { display: block; } /* ── Menu burger (mobile) ────────────────────────────────────────────── Sur desktop, le bouton burger, l'en-tête du tiroir et le voile sont masqués : la navigation reste une barre horizontale classique. Les media-queries plus bas (≤880px) basculent la nav en tiroir latéral. */ .b-burger { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; background: transparent; border: 1px solid rgba(var(--b-tan-rgb), 0.35); border-radius: 10px; color: var(--b-ink); cursor: pointer; transition: border-color 240ms ease, color 240ms ease; } .b-burger:hover { border-color: var(--b-gold); } .b-burger-box { position: relative; display: block; width: 20px; height: 14px; } .b-burger-line { position: absolute; left: 0; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 260ms ease, opacity 200ms ease; } .b-burger-line:nth-child(1) { top: 0; } .b-burger-line:nth-child(2) { top: 6px; } .b-burger-line:nth-child(3) { top: 12px; } /* État ouvert : burger → croix */ .b-burger[aria-expanded="true"] .b-burger-line:nth-child(1) { transform: translateY(6px) rotate(45deg); } .b-burger[aria-expanded="true"] .b-burger-line:nth-child(2) { opacity: 0; } .b-burger[aria-expanded="true"] .b-burger-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* ── Tiroir de navigation mobile (au niveau ) ──────────────────── Le tiroir et le voile sont des enfants directs de , donc dans le contexte d'empilement racine. Important : ils NE doivent PAS être dans le header, qui a `backdrop-filter` → celui-ci ferait du header le bloc conteneur des descendants `position: fixed` et piégerait le tiroir sous le voile/footer (liens non cliquables). z-index : voile 95, tiroir 100, tous deux au-dessus du header (90). Masqués par défaut (desktop). */ .b-drawer { display: none; } .b-drawer-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid var(--b-line); } .b-drawer-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 18px; font-weight: 600; color: var(--b-ink); } .b-drawer-close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: transparent; border: none; border-radius: 8px; color: var(--b-ink); cursor: pointer; } .b-drawer-close:hover { color: var(--b-gold-hi); } /* Voile sombre derrière le tiroir */ .b-nav-backdrop { position: fixed; inset: 0; z-index: 95; background: rgba(6, 17, 15, 0.55); opacity: 0; pointer-events: none; transition: opacity 260ms ease; } .b-nav-backdrop.is-open { opacity: 1; pointer-events: auto; } body.nav-locked { overflow: hidden; } /* footer */ .b-footer { background: var(--b-bg3); color: var(--b-mute); border-top: 1px solid var(--b-line); position: relative; overflow: hidden; } .b-footer-in { position: relative; max-width: 1060px; margin: 0 auto; padding: 54px 28px 0; } .b-footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 36px; padding-bottom: 44px; } .b-footer-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; } .b-footer-brand img { height: 32px; width: auto; } .b-footer-brand span { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 18px; font-weight: 600; color: var(--b-ink); } .b-footer p { font-size: 12.5px; line-height: 1.7; margin: 0; color: var(--b-mute); } .b-footer-kicker { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--b-gold-soft); margin-bottom: 14px; } .b-footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; list-style: none; margin: 0; padding: 0; } .b-footer-links a { color: var(--b-mute); font-size: 12.5px; text-decoration: none; } .b-footer-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; background: transparent; border: 1px solid rgba(var(--b-tan-rgb), 0.35); color: var(--b-gold-soft); padding: 10px 18px; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; cursor: pointer; } .b-footer-bottom { border-top: 1px solid var(--b-line); padding: 20px 0 22px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 11.5px; color: var(--b-faint); } .b-footer-bottom a { color: inherit; text-decoration: none; } .b-footer-bottom .b-legal { display: flex; gap: 18px; } /* lien souligné au survol (style éditorial) */ .c-link { position: relative; display: inline-block; } .c-link::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right center; transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1); } .c-link:hover::after { transform: scaleX(1); transform-origin: left center; } /* ════════════════════════════════════════════════════════════════════ Briques de mise en page partagées ════════════════════════════════════════════════════════════════════ */ .b-sec { position: relative; overflow: hidden; padding: 84px 28px 90px; background: var(--b-bg); color: var(--b-ink); } .b-sec--alt { background: var(--b-bg2); } .b-sec--line-top { border-top: 1px solid var(--b-line); } .b-wrap { position: relative; max-width: 1060px; margin: 0 auto; } .b-wrap--narrow { max-width: 680px; } .b-kicker { font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--b-gold-soft); margin-bottom: 12px; } .b-sec-head { text-align: center; margin-bottom: 48px; } .b-sec-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(28px, 4vw, 40px); font-weight: 500; margin: 0; color: var(--b-ink); } .b-sec-sub { font-size: 14px; color: var(--b-mute); line-height: 1.65; max-width: 520px; margin: 14px auto 0; } /* grille de cellules séparées par un filet */ .b-cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px; background: var(--b-line); border: 1px solid var(--b-line); } .b-cell { background: var(--b-bg2); padding: 38px 32px; } .b-sec:not(.b-sec--alt) .b-cell { background: var(--b-bg); } /* boutons CTA */ .b-cta-gold, .b-cta-ghost { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-family: inherit; padding: 13px 26px; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; border: none; } .b-cta-gold { background: var(--b-gold); color: var(--b-on-gold); font-weight: 700; } .b-cta-ghost { border: 1px solid rgba(var(--b-tan-rgb), 0.35); color: var(--b-ink); background: transparent; font-weight: 600; } .b-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* lien-flèche en majuscules */ .b-arrow-link { background: none; border: none; cursor: pointer; font-family: inherit; font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--b-gold-soft); font-weight: 600; text-decoration: none; } /* placeholder photo (rayures + légende mono) */ .b-ph { position: relative; border: 1px solid rgba(var(--b-tan-rgb), 0.18); background: repeating-linear-gradient(45deg, rgba(var(--b-tan-rgb), 0.05) 0 10px, transparent 10px 20px); display: flex; align-items: center; justify-content: center; } .b-ph span { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11px; letter-spacing: 0.08em; color: var(--b-faint); } /* ════════════════════════════════════════════════════════════════════ Hero d'accueil — ciel vivant (toujours sombre, via .b-force-dark) ════════════════════════════════════════════════════════════════════ */ .bhero { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; display: flex; flex-direction: column; color: #F5EFE3; --sky-glow: rgba(217, 194, 154, 0.16); } .bhero-sky { position: absolute; inset: 0; opacity: 0; transition: opacity 1600ms ease; } .bhero-sky.on { opacity: 1; } .bhero-sky[data-phase="night"] { background: linear-gradient(180deg, #050D0E 0%, #0A1A19 52%, #10302A 100%); } .bhero-sky[data-phase="dawn"] { background: linear-gradient(180deg, #0B1B22 0%, #23404A 52%, #C2855C 100%); } .bhero-sky[data-phase="day"] { background: linear-gradient(180deg, #0E3F38 0%, #155A4C 52%, #2E7A64 100%); } .bhero-sky[data-phase="golden"] { background: linear-gradient(180deg, #123A33 0%, #3F5A40 52%, #C98C4E 100%); } .bhero-sky[data-phase="dusk"] { background: linear-gradient(180deg, #071013 0%, #142B2C 52%, #6E4630 100%); } .bhero-halo { position: absolute; left: 50%; bottom: -12%; transform: translateX(-50%); width: 130%; height: 55%; pointer-events: none; background: radial-gradient(ellipse 50% 60% at 50% 100%, var(--sky-glow), transparent 70%); animation: haloBreathe 7s ease-in-out infinite; transition: background 1600ms ease; } .bhero-stars { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 1; transition: opacity 1600ms ease; pointer-events: none; } .bhero-astre { position: absolute; left: 71%; top: 20%; margin: -26px 0 0 -26px; width: 52px; height: 52px; pointer-events: none; } .bhero-astre-float { animation: floatSlow 9s ease-in-out infinite; } .bhero-moon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 1; transition: opacity 1600ms ease; filter: drop-shadow(0 0 26px var(--sky-glow)); } .bhero-sun { width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle at 38% 35%, #F7E9C4, #E3C078); box-shadow: 0 0 60px 18px var(--sky-glow); opacity: 0; transition: opacity 1600ms ease; } .bhero.is-day .bhero-moon { opacity: 0; } .bhero.is-day .bhero-sun { opacity: 1; } .bhero-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 130px; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(4, 13, 11, 0.7)); } .bhero-mosque { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(430px, 72vw); height: auto; pointer-events: none; filter: drop-shadow(0 -2px 30px rgba(0, 0, 0, 0.35)); } .heroB-stage { position: relative; z-index: 4; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 24px 13vh; } .bhero-phase-label { font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: #E6D2A8; margin-bottom: 18px; } .bhero-phase-label [data-sky-label] { display: none; } .bhero-next { font-family: 'Cormorant Garamond', Georgia, serif; margin: 0 0 6px; } .bhero-next span { display: block; font-size: clamp(22px, 2.6vw, 30px); font-weight: 500; opacity: 0.85; } .bhero-count { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(72px, 13vw, 150px); font-weight: 600; line-height: 1; letter-spacing: 0.01em; text-shadow: 0 4px 60px var(--sky-glow); } .bhero-count .sep { opacity: 0.45; } .bhero-date { margin-top: 26px; display: flex; align-items: center; gap: 16px; font-size: 12.5px; color: rgba(245, 239, 227, 0.55); } .bhero-date .diamond { width: 4px; height: 4px; background: #CDA464; transform: rotate(45deg); } .bhero-cue { background: none; border: none; cursor: pointer; font-family: inherit; margin-top: 40px; font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: #E6D2A8; display: inline-flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; } .bhero-cue .thread { display: block; width: 1px; height: 34px; background: linear-gradient(#CDA464, transparent); animation: floatSlow 2.6s ease-in-out infinite; } /* entrée cinématique du hero */ .heroB-stage > * { opacity: 0; } .heroB-ready .heroB-stage > * { animation: heroBIn 1100ms cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: var(--hb-delay, 0ms); } /* filet de sécurité : état final garanti même si les animations CSS sont suspendues (impression, onglet inactif, JS coupé...) */ .heroB-done .heroB-stage > *, html.no-js .heroB-stage > * { animation: none !important; opacity: 1 !important; transform: none !important; } @media (prefers-reduced-motion: reduce) { .heroB-stage > * { opacity: 1 !important; animation: none !important; } .bhero-halo, .bhero-astre, .bhero-cue .thread { animation: none !important; } } /* ════════════════════════════════════════════════════════════════════ Accueil — sections ════════════════════════════════════════════════════════════════════ */ /* ligne du temps de la journée */ .b-dayline { position: relative; height: 2px; background: rgba(var(--b-tan-rgb), 0.18); margin: 0 22px 50px; } .b-dayline-fill { position: absolute; left: 0; top: 0; height: 2px; width: 0; background: linear-gradient(90deg, var(--b-gold), var(--b-gold-hi)); } .b-dayline-dot { position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%); width: 11px; height: 11px; border-radius: 50%; background: var(--b-gold-hi); box-shadow: 0 0 18px 4px rgba(var(--b-goldhi-rgb), 0.5); } /* cartes prière du jour */ .b-pcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; } .b-pcard { border: 1px solid var(--b-line); background: rgba(var(--b-ink-rgb), 0.025); padding: 24px 14px 20px; text-align: center; position: relative; transition: transform 300ms ease, border-color 300ms ease, opacity 300ms ease; } .b-pcard:hover { transform: translateY(-4px); } .b-pcard.is-current:not(.is-next) { opacity: 1; } .b-pcard.is-passed { opacity: 0.45; } .b-pcard.is-next { border-color: var(--b-gold); background: linear-gradient(180deg, rgba(var(--b-bronze-rgb), 0.18), rgba(var(--b-bronze-rgb), 0.05)); opacity: 1; } .b-pcard-tag { display: none; position: absolute; top: -9px; left: 50%; transform: translateX(-50%); background: var(--b-gold); color: var(--b-on-gold); font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; padding: 2px 10px; white-space: nowrap; } .b-pcard.is-next .b-pcard-tag { display: block; } .b-pcard-name { font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--b-mute); margin-bottom: 3px; } .b-pcard.is-next .b-pcard-name { color: var(--b-gold-soft); } .b-pcard-fr { font-size: 10.5px; color: var(--b-faint); margin-bottom: 12px; min-height: 1em; } .b-pcard-time { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 28px; font-weight: 600; color: var(--b-ink); } .b-pcard.is-next .b-pcard-time { color: var(--b-gold-hi); } /* bannière prochain événement */ .b-event-banner { border: 1px solid var(--b-line); position: relative; overflow: hidden; padding: 34px 38px; margin-bottom: 70px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: linear-gradient(120deg, rgba(var(--b-bronze-rgb), 0.1), transparent 55%); } .b-event-banner h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 30px; font-weight: 500; margin: 0; } .b-event-banner .ar { font-size: 17px; color: var(--b-mute); margin-top: 6px; } .b-event-days { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 56px; font-weight: 600; color: var(--b-gold); line-height: 1; } /* piliers (accueil) + valeurs (association) */ .b-pillar .ar { font-size: 30px; color: var(--b-gold); opacity: 0.85; margin-bottom: 18px; line-height: 1.4; } .b-pillar h3, .b-value h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; font-weight: 600; margin: 0 0 10px; color: var(--b-ink); } .b-pillar p, .b-value p { font-size: 13.5px; color: var(--b-mute); line-height: 1.65; margin: 0; } .b-value { text-align: center; padding: 40px 32px 36px; } .b-value .ar { font-size: 36px; color: var(--b-gold); opacity: 0.9; margin-bottom: 18px; line-height: 1.4; } .b-value h3 { font-size: 23px; } .b-value p { line-height: 1.7; } /* ════════════════════════════════════════════════════════════════════ Hero de page intérieure — fond profond orné (arche + treillis) ════════════════════════════════════════════════════════════════════ */ .pageB-hero { position: relative; overflow: hidden; color: var(--b-ink); text-align: center; padding: 92px 24px 80px; background: linear-gradient(180deg, var(--b-hero1) 0%, var(--b-hero2) 58%, var(--b-bg) 100%); } .pageB-hero .b-lattice-bg { mask-image: radial-gradient(ellipse 72% 85% at 50% 28%, black 18%, transparent 76%); -webkit-mask-image: radial-gradient(ellipse 72% 85% at 50% 28%, black 18%, transparent 76%); } .pageB-halo { position: absolute; left: 50%; top: -30%; transform: translateX(-50%); width: 110%; height: 80%; pointer-events: none; background: radial-gradient(ellipse 55% 55% at 50% 0%, rgba(var(--b-bronze-rgb), 0.14), transparent 70%); } .pageB-arch { position: absolute; left: 50%; top: 28px; transform: translateX(-50%); width: 420px; max-width: 86vw; opacity: 0; pointer-events: none; transition: opacity 800ms ease; } /* refonte.js ajoute .is-drawn une fois le tracé amorcé (anti-flash) */ .pageB-arch.is-drawn { opacity: 0.5; } html.no-js .pageB-arch { opacity: 0.5; } .pageB-arch svg { display: block; width: 100%; height: auto; } .pageB-arch path { fill: none; } /* Le tracé « minaret doré » est animé par refonte.js (initArch) : stroke-dasharray / dashoffset sont calculés sur getTotalLength() pour un contour complet et continu, de la base gauche à la base droite. */ .pageB-arch-alem { opacity: 0; animation: alemIn 900ms ease 2200ms forwards; } @keyframes alemIn { to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .pageB-arch { opacity: 0.5; transition: none; } .pageB-arch-alem { animation: none; opacity: 1; } } .pageB-fadeout { position: absolute; left: 0; right: 0; bottom: 0; height: 70px; pointer-events: none; background: linear-gradient(180deg, transparent, var(--b-bg)); } .pageB-hero-in { position: relative; max-width: 780px; margin: 0 auto; padding-top: 26px; } .pageB-kicker { font-size: 11.5px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--b-gold-soft); margin-bottom: 16px; } .pageB-ar { font-family: 'Amiri', serif; font-size: 30px; color: var(--b-gold-soft); opacity: 0.9; margin-bottom: 8px; line-height: 1.5; } .pageB-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(40px, 5.6vw, 62px); font-weight: 500; margin: 0 0 16px; line-height: 1.05; } .pageB-rule { display: flex; justify-content: center; margin-bottom: 18px; } .pageB-lede { font-size: 15px; color: var(--b-mute); line-height: 1.7; max-width: 560px; margin: 0 auto; } .pageB-extra { margin-top: 30px; } /* entrée du hero de page */ .pageB-hero .pb { opacity: 0; animation: heroBIn 900ms cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: var(--pb-delay, 0ms); } @media (prefers-reduced-motion: reduce) { .pageB-hero .pb { animation: none !important; opacity: 1 !important; } } /* chip countdown dans le hero horaires */ .b-hero-chip { display: inline-flex; align-items: baseline; gap: 14px; flex-wrap: wrap; justify-content: center; border: 1px solid rgba(var(--b-tan-rgb), 0.3); background: rgba(var(--b-bg-rgb), 0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 16px 26px; } .b-hero-chip .label { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--b-gold-soft); } .b-hero-chip .count { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 30px; font-weight: 600; color: var(--b-gold-hi); line-height: 1; } /* ════════════════════════════════════════════════════════════════════ Horaires — liste du jour, Jumu'a, tableau, Ramadan ════════════════════════════════════════════════════════════════════ */ .b-2col { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr)); gap: 40px; align-items: start; } .b-2col--center { align-items: center; gap: 48px; } .b-prayer-line { display: grid; grid-template-columns: 14px 1fr auto auto; align-items: baseline; gap: 16px; padding: 15px 6px; border-bottom: 1px solid var(--b-line); } .b-prayer-line .dot { width: 7px; height: 7px; align-self: center; transform: rotate(45deg); background: transparent; border: 1px solid rgba(var(--b-tan-rgb), 0.4); } .b-prayer-line .name { font-size: 13.5px; font-weight: 600; letter-spacing: 0.06em; color: var(--b-ink); } .b-prayer-line .name-fr { font-size: 12px; color: var(--b-faint); margin-left: 10px; } .b-prayer-line .b-when { font-size: 12px; color: var(--b-gold-soft); visibility: hidden; } .b-prayer-line .time { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 24px; font-weight: 600; color: var(--b-ink); } .b-prayer-line.is-passed { opacity: 0.45; } .b-prayer-line.is-next { background: linear-gradient(90deg, rgba(var(--b-bronze-rgb), 0.12), transparent 70%); } .b-prayer-line.is-next .dot { background: var(--b-gold-hi); border-color: var(--b-gold-hi); box-shadow: 0 0 12px 2px rgba(var(--b-goldhi-rgb), 0.45); } .b-prayer-line.is-next .name, .b-prayer-line.is-next .time { color: var(--b-gold-hi); } .b-prayer-line.is-next .b-when { visibility: visible; } .b-today-note { margin-top: 16px; font-size: 12px; color: var(--b-faint); display: flex; align-items: center; gap: 8px; } /* carte Jumu'a */ .b-jumua { border: 1px solid rgba(var(--b-tan-rgb), 0.3); position: relative; overflow: hidden; padding: 30px 30px 26px; background: linear-gradient(135deg, rgba(var(--b-bronze-rgb), 0.16), rgba(var(--b-bronze-rgb), 0.04) 60%); } .b-jumua-mosque { position: absolute; right: -26px; bottom: -40px; opacity: 0.14; pointer-events: none; width: 200px; height: auto; } .b-jumua-head { font-size: 10.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--b-gold-soft); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .b-jumua-times { display: flex; gap: 34px; flex-wrap: wrap; position: relative; } .b-jumua-time { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 38px; font-weight: 600; line-height: 1; color: var(--b-ink); } .b-jumua-time.hi { color: var(--b-gold-hi); } .b-jumua-sub { font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--b-mute); margin-top: 6px; } .b-jumua p { font-size: 12.5px; color: var(--b-mute); line-height: 1.6; margin: 18px 0 0; position: relative; } .b-side-card { border: 1px solid var(--b-line); padding: 22px 26px; background: rgba(var(--b-ink-rgb), 0.025); } .b-side-card-head { font-size: 10.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--b-gold-soft); margin-bottom: 10px; } .b-side-card p { font-size: 13px; color: var(--b-mute); line-height: 1.65; margin: 0; } /* onglets Semaine / Mois */ .b-tabs { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid rgba(var(--b-tan-rgb), 0.3); } .b-tab { background: transparent; border: none; cursor: pointer; color: var(--b-mute); font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 10px 26px; transition: background 260ms ease, color 260ms ease; } .b-tab:hover:not(.on) { color: var(--b-ink); } .b-tab.on { background: var(--b-gold); color: var(--b-on-gold); } /* table d'horaires */ .b-table-scroll { border: 1px solid var(--b-line); overflow-x: auto; } .b-table { width: 100%; min-width: 620px; border-collapse: collapse; background: rgba(var(--b-ink-rgb), 0.015); } .b-table th { font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--b-gold-soft); padding: 16px 14px 14px; border-bottom: 1px solid rgba(var(--b-tan-rgb), 0.28); text-align: center; white-space: nowrap; } .b-table .b-th-fr { display: block; margin-top: 3px; font-size: 10px; font-weight: 400; letter-spacing: 0.06em; text-transform: none; color: var(--b-faint); } .b-table td { font-size: 13.5px; color: var(--b-ink-soft); padding: 12px 14px; border-bottom: 1px solid rgba(var(--b-tan-rgb), 0.1); text-align: center; transition: background 200ms ease; } .b-table td:first-child { text-align: left; text-transform: capitalize; white-space: nowrap; } .b-table tbody tr:last-child td { border-bottom: none; } .b-table tbody tr:hover td { background: rgba(var(--b-bronze-rgb), 0.07); } .b-table tr.b-today td { background: linear-gradient(90deg, rgba(var(--b-bronze-rgb), 0.16), rgba(var(--b-bronze-rgb), 0.05)); color: var(--b-ink); border-bottom-color: rgba(var(--b-tan-rgb), 0.3); } .b-today-tag, .b-cuma-tag { display: inline-block; margin-left: 10px; font-family: 'Inter', sans-serif; font-size: 8.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; padding: 2px 8px; vertical-align: middle; } .b-today-tag { background: var(--b-gold); color: var(--b-on-gold); } .b-cuma-tag { border: 1px solid rgba(var(--b-tan-rgb), 0.35); color: var(--b-gold-soft); } .b-table-note { margin-top: 16px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 11.5px; color: var(--b-faint); } .b-table-note span { display: inline-flex; align-items: center; gap: 8px; } /* Ramadan */ .b-ram-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(30px, 4.2vw, 42px); font-weight: 500; color: var(--b-ink); margin: 0 0 16px; line-height: 1.1; } .b-ram-days { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 60px; font-weight: 600; color: var(--b-gold); line-height: 1; } .b-ram-card { border: 1px solid rgba(var(--b-tan-rgb), 0.28); background: linear-gradient(160deg, rgba(var(--b-bronze-rgb), 0.12), rgba(var(--b-bronze-rgb), 0.02)); padding: 36px 36px 32px; } .b-ram-card-head { font-size: 10.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--b-gold-soft); margin-bottom: 24px; } .b-ram-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; } .b-ram-time { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 44px; font-weight: 600; color: var(--b-ink); line-height: 1; } .b-ram-time.hi { color: var(--b-gold-hi); } .b-ram-sub { font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--b-mute); margin-top: 8px; } .b-ram-sep { display: flex; flex-direction: column; align-items: center; gap: 6px; } .b-ram-sep .up { width: 1px; height: 26px; background: linear-gradient(transparent, rgba(var(--b-tan-rgb), 0.5)); } .b-ram-sep .down { width: 1px; height: 26px; background: linear-gradient(rgba(var(--b-tan-rgb), 0.5), transparent); } .b-ram-card p { font-size: 12.5px; color: var(--b-mute); line-height: 1.65; margin: 26px 0 0; border-top: 1px solid var(--b-line); padding-top: 18px; } /* ════════════════════════════════════════════════════════════════════ Association — frise, équipes ════════════════════════════════════════════════════════════════════ */ .b-tl { position: relative; padding-left: 36px; } .b-tl::before { content: ''; position: absolute; left: 4px; top: 8px; bottom: 30px; width: 1px; background: linear-gradient(rgba(var(--b-tan-rgb), 0.5), rgba(var(--b-tan-rgb), 0.06)); } .b-tl-item { position: relative; padding: 0 0 46px; } .b-tl-item:last-child { padding-bottom: 0; } .b-tl-item::before { content: ''; position: absolute; left: -36px; top: 5px; width: 8px; height: 8px; transform: rotate(45deg); background: var(--b-bg); border: 1px solid var(--b-gold); box-shadow: 0 0 10px rgba(var(--b-bronze-rgb), 0.4); } .b-tl-period { font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--b-gold); margin-bottom: 8px; } .b-tl-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 23px; font-weight: 600; color: var(--b-ink); margin-bottom: 8px; } .b-tl-item p { font-size: 13.5px; color: var(--b-mute); line-height: 1.7; margin: 0; max-width: 420px; } .b-sticky-intro { position: sticky; top: 110px; } .b-sticky-intro p { font-size: 14px; color: var(--b-mute); line-height: 1.7; margin: 0 0 22px; max-width: 420px; } .b-note-inline { display: inline-flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--b-faint); } .b-team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; } .b-team-card { border: 1px solid var(--b-line); background: rgba(var(--b-ink-rgb), 0.02); height: 100%; display: flex; flex-direction: column; } .b-team-card .b-ph { aspect-ratio: 16 / 10; border-width: 0 0 1px 0; } .b-team-body { padding: 26px 26px 28px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .b-team-name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; font-weight: 600; color: var(--b-ink); } .b-team-sub { font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--b-gold-soft); } .b-team-body p { font-size: 13.5px; color: var(--b-mute); line-height: 1.7; margin: 8px 0 0; } /* CTA final centré (rejoindre / contact accueil) */ .b-final-cta { text-align: center; } .b-final-cta h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(28px, 4vw, 40px); font-weight: 500; color: var(--b-ink); margin: 18px 0 12px; } /* descendant (et non enfant direct) : le paragraphe est souvent imbriqué dans un .rv, sinon la marge sous le texte saute et les boutons collent au texte */ .b-final-cta p { font-size: 14px; color: var(--b-mute); line-height: 1.7; margin: 0 0 28px; } /* ════════════════════════════════════════════════════════════════════ Cours — programmes, emploi du temps, inscription ════════════════════════════════════════════════════════════════════ */ .b-courses { display: flex; flex-direction: column; gap: 20px; } .b-course { display: grid; grid-template-columns: minmax(90px, 130px) 1fr minmax(200px, 240px); gap: 28px; align-items: center; border: 1px solid var(--b-line); background: rgba(var(--b-ink-rgb), 0.02); padding: 32px 34px; } .b-course-ar { font-family: 'Amiri', serif; font-size: 44px; color: var(--b-gold); opacity: 0.85; text-align: center; line-height: 1.4; } .b-course-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 25px; font-weight: 600; color: var(--b-ink); margin-bottom: 8px; } .b-course p { font-size: 13.5px; color: var(--b-mute); line-height: 1.7; margin: 0 0 14px; max-width: 520px; } .b-course-tags { display: flex; gap: 8px; flex-wrap: wrap; } .b-course-tag { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid rgba(var(--b-tan-rgb), 0.3); color: var(--b-gold-soft); padding: 4px 10px; } .b-course-side { border-left: 1px solid var(--b-line); padding-left: 28px; display: flex; flex-direction: column; gap: 14px; } .b-course-side .lbl { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--b-faint); margin-bottom: 4px; } .b-course-side .val { font-size: 14px; color: var(--b-ink); } .b-course-side .val.hi { color: var(--b-gold-hi); } .b-courses-note { margin-top: 16px; display: flex; justify-content: flex-end; } /* emploi du temps */ .b-edt-day { font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--b-gold-soft); margin-bottom: 18px; border-bottom: 1px solid var(--b-line); padding-bottom: 12px; } .b-edt-slot { display: flex; flex-direction: column; gap: 4px; } .b-edt-slot .time { font-size: 13px; color: var(--b-gold-hi); } .b-edt-slot .lbl { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 19px; font-weight: 600; color: var(--b-ink); } .b-edt-slot .who { font-size: 12px; color: var(--b-faint); } .b-edt-note { margin-top: 18px; font-size: 12.5px; color: var(--b-mute); line-height: 1.65; max-width: 560px; } /* inscription en trois pas */ .b-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; margin-bottom: 48px; } .b-step { border: 1px solid var(--b-line); padding: 30px 28px; height: 100%; background: rgba(var(--b-ink-rgb), 0.02); position: relative; } .b-step .num { font-family: 'Amiri', serif; font-size: 38px; color: var(--b-gold); line-height: 1; margin-bottom: 16px; } .b-step h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 21px; font-weight: 600; color: var(--b-ink); margin: 0 0 8px; } .b-step p { font-size: 13px; color: var(--b-mute); line-height: 1.7; margin: 0; } .b-step-cta { text-align: center; } .b-step-cta .note { margin-top: 14px; font-size: 12px; color: var(--b-faint); } /* ════════════════════════════════════════════════════════════════════ Contact — formulaire, infos, carte ════════════════════════════════════════════════════════════════════ */ .b-form { border: 1px solid var(--b-line); background: rgba(var(--b-ink-rgb), 0.02); padding: 34px 34px 36px; display: flex; flex-direction: column; gap: 20px; } .b-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; } /* Inscription — chaque enfant dans sa propre carte, bien séparée */ #children-list { display: flex; flex-direction: column; gap: 16px; } .child-row { padding: 16px 18px 18px; border: 1px solid rgba(var(--b-tan-rgb), 0.28); background: rgba(var(--b-ink-rgb), 0.02); } .child-row-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .child-row-title { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--b-gold-soft); } .child-remove { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; font-size: 20px; line-height: 1; cursor: pointer; color: var(--b-ink); background: transparent; border: 1px solid rgba(var(--b-tan-rgb), 0.35); border-radius: 50%; transition: border-color 200ms ease, color 200ms ease; } .child-remove:hover { border-color: var(--b-gold); color: var(--b-gold); } .b-field { display: flex; flex-direction: column; gap: 8px; } .b-field > label { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--b-gold-soft); } .b-input { background: rgba(var(--b-ink-rgb), 0.04); border: 1px solid rgba(var(--b-tan-rgb), 0.2); color: var(--b-ink); font-family: 'Inter', sans-serif; font-size: 14px; padding: 13px 15px; border-radius: 0; transition: border-color 240ms ease, background 240ms ease; resize: vertical; width: 100%; } .b-input::placeholder { color: var(--b-faint); } .b-input:focus { outline: none; border-color: var(--b-gold); background: rgba(var(--b-ink-rgb), 0.07); } [data-theme="dark"] .b-input { color-scheme: dark; } /* Menu déroulant : flèche custom (le rendu natif est peu lisible). */ select.b-input { appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; padding-right: 42px; background-repeat: no-repeat; background-position: right 15px center; background-size: 13px; background-image: url("data:image/svg+xml;utf8,"); } [data-theme="light"] select.b-input { background-image: url("data:image/svg+xml;utf8,"); } /* Champ numérique : on masque les flèches natives (peu pratiques) ; le clavier numérique mobile reste actif via type=number + inputmode. */ .b-input[type="number"] { -moz-appearance: textfield; } .b-input[type="number"]::-webkit-outer-spin-button, .b-input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Choix segmenté (ex. branche Gençler / Kadınlar) — bien plus lisible qu'un menu déroulant : deux cartes cliquables, état sélectionné doré. */ .b-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .b-seg-opt { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border: 1px solid rgba(var(--b-tan-rgb), 0.2); background: rgba(var(--b-ink-rgb), 0.04); cursor: pointer; transition: border-color 200ms ease, background 200ms ease; } .b-seg-opt:hover { border-color: var(--b-gold-soft); } .b-seg-opt > input { position: absolute; opacity: 0; width: 1px; height: 1px; } .b-seg-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 19px; line-height: 1.1; color: var(--b-ink); } .b-seg-sub { font-size: 12px; color: var(--b-mute); } .b-seg-opt:has(input:checked) { border-color: var(--b-gold); background: rgba(var(--b-goldhi-rgb), 0.10); } .b-seg-opt:has(input:focus-visible) { outline: 2px solid var(--b-gold); outline-offset: 2px; } /* Puces de choix (ex. sujet du formulaire de contact) — toutes les options visibles d'un coup, contrairement à un menu déroulant. */ .b-chips { display: flex; flex-wrap: wrap; gap: 9px; } .b-chip { position: relative; display: inline-flex; align-items: center; padding: 9px 16px; border: 1px solid rgba(var(--b-tan-rgb), 0.25); background: rgba(var(--b-ink-rgb), 0.04); border-radius: 999px; font-size: 13px; color: var(--b-ink-soft); cursor: pointer; transition: border-color 200ms ease, background 200ms ease, color 200ms ease; } .b-chip:hover { border-color: var(--b-gold-soft); } .b-chip > input { position: absolute; opacity: 0; width: 1px; height: 1px; } .b-chip:has(input:checked) { border-color: var(--b-gold); background: rgba(var(--b-goldhi-rgb), 0.12); color: var(--b-ink); font-weight: 600; } .b-chip:has(input:focus-visible) { outline: 2px solid var(--b-gold); outline-offset: 2px; } .b-field-error { font-size: 12px; color: #C97A6A; margin: 0; } /* Validation temps réel (cf. refonte.js initFormValidation) : signalement visuel des champs invalides, cohérent avec la couleur de .b-field-error. */ .b-input.is-error, .b-input[aria-invalid="true"] { border-color: #C97A6A; background: rgba(201, 122, 106, 0.06); } .b-input.is-error:focus, .b-input[aria-invalid="true"]:focus { border-color: #C97A6A; box-shadow: 0 0 0 3px rgba(201, 122, 106, 0.16); } .b-chips.is-error { outline: 1px dashed rgba(201, 122, 106, 0.6); outline-offset: 7px; border-radius: 12px; } .b-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .b-form-foot .note { font-size: 11.5px; color: var(--b-faint); } .b-consent { display: flex; align-items: flex-start; gap: 12px; font-size: 12px; line-height: 1.6; color: var(--b-mute); cursor: pointer; } .b-consent input { margin-top: 3px; flex-shrink: 0; accent-color: var(--b-gold); } .b-consent a { color: var(--b-gold-soft); text-decoration: underline; } .b-flash { padding: 14px 18px; font-size: 13px; border: 1px solid rgba(var(--b-tan-rgb), 0.3); background: linear-gradient(120deg, rgba(var(--b-bronze-rgb), 0.12), transparent 70%); color: var(--b-ink); } .b-flash.is-error { border-color: rgba(201, 122, 106, 0.5); color: #C97A6A; } .b-info-stack { display: flex; flex-direction: column; gap: 18px; } .b-info-card { border: 1px solid var(--b-line); background: rgba(var(--b-ink-rgb), 0.02); padding: 22px 26px; display: flex; gap: 18px; align-items: flex-start; } .b-info-card .ico { color: var(--b-gold); margin-top: 2px; } .b-info-card .lbl { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--b-gold-soft); margin-bottom: 6px; display: flex; align-items: center; gap: 10px; } .b-info-card .val { font-size: 14.5px; color: var(--b-ink); line-height: 1.55; } .b-info-card .val a { color: inherit; text-decoration: none; word-break: break-all; } /* ── Espace « Paramètres » : cartes de réglage harmonisées ── (carte en bloc, contrairement à .b-info-card qui est un flex row icône+contenu) */ .b-set-card { border: 1px solid var(--b-line); background: rgba(var(--b-ink-rgb), 0.02); padding: 22px 26px; margin-bottom: 16px; } .b-set-card--danger { border-left: 3px solid #B45A28; } .b-set-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 21px; line-height: 1.1; color: var(--b-ink); margin: 0; } .b-set-desc { margin: 6px 0 16px; } .b-set-form { display: flex; flex-direction: column; gap: 12px; margin: 0; } .b-set-actions { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; } .b-set-toggle { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid rgba(var(--b-tan-rgb), 0.18); font-size: 14px; color: var(--b-ink); } .b-set-toggle:first-child { border-top: 0; padding-top: 2px; } .b-set-toggle input { accent-color: var(--b-gold); width: 18px; height: 18px; flex: none; cursor: pointer; } .b-set-danger-btn { border-color: rgba(180, 90, 40, 0.6); color: #B45A28; } .b-info-accueil { border: 1px solid rgba(var(--b-tan-rgb), 0.28); background: linear-gradient(135deg, rgba(var(--b-bronze-rgb), 0.14), rgba(var(--b-bronze-rgb), 0.03)); padding: 24px 26px; } .b-info-accueil p { font-size: 13px; color: var(--b-mute); line-height: 1.7; margin: 0; } /* carte */ .b-map-frame { position: relative; height: 340px; border: 1px solid var(--b-line); background: var(--b-bg); overflow: hidden; } .b-map-frame .leaflet-container { width: 100%; height: 100%; background: var(--b-bg2); font-family: 'Inter', sans-serif; } .b-map-actions { margin-top: 22px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* ════════════════════════════════════════════════════════════════════ Événements & Sohbet — carte dorée, mosquée en filigrane, listes datées ════════════════════════════════════════════════════════════════════ */ /* carte sur fond dégradé bronze (prochain événement, prochain sohbet, dernier résumé…) — parente positionnée pour la mosquée en filigrane */ .b-gold-card { position: relative; overflow: hidden; border: 1px solid rgba(var(--b-tan-rgb), 0.3); background: linear-gradient(135deg, rgba(var(--b-bronze-rgb), 0.16), rgba(var(--b-bronze-rgb), 0.03) 60%); padding: 32px 34px 30px; } .b-gold-card > * { position: relative; } .b-corner-mosque { position: absolute; right: -26px; bottom: -40px; width: 210px; height: auto; opacity: 0.13; pointer-events: none; } .b-gold-card-head { font-size: 10.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--b-gold-soft); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } /* liste datée (calendrier religieux, résumés précédents) */ .b-evt-list { border: 1px solid var(--b-line); } .b-evt-row { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 22px; padding: 18px 24px; border-bottom: 1px solid var(--b-line); text-decoration: none; transition: background 200ms ease; } .b-evt-row:last-child { border-bottom: none; } a.b-evt-row:hover { background: rgba(var(--b-bronze-rgb), 0.07); } .b-evt-row.is-next { background: linear-gradient(90deg, rgba(var(--b-bronze-rgb), 0.14), transparent 70%); } .b-evt-date { text-align: center; border-right: 1px solid var(--b-line); padding-right: 22px; } .b-evt-date .day { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 30px; font-weight: 600; color: var(--b-ink); line-height: 1; } .b-evt-date .month { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--b-faint); margin-top: 4px; } .b-evt-main .title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 20px; font-weight: 600; color: var(--b-ink); } .b-evt-main .ar { font-size: 15px; color: var(--b-mute); } .b-evt-main .sub { font-size: 11.5px; color: var(--b-faint); margin-top: 3px; } .b-evt-main .excerpt { font-size: 12.5px; color: var(--b-mute); margin-top: 4px; line-height: 1.6; } .b-evt-side { font-size: 12px; color: var(--b-faint); white-space: nowrap; text-align: right; } .b-evt-row.is-next .b-evt-date .day, .b-evt-row.is-next .b-evt-main .title, .b-evt-row.is-next .b-evt-side { color: var(--b-gold-hi); } .b-evt-foot { margin-top: 16px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 11.5px; color: var(--b-faint); } .b-evt-foot span { display: inline-flex; align-items: center; gap: 8px; } /* état vide (aucun sohbet / aucun événement) */ .b-empty { border: 1px dashed rgba(var(--b-tan-rgb), 0.35); padding: 56px 28px; text-align: center; } .b-empty .title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 24px; font-weight: 500; color: var(--b-ink); margin: 0 0 10px; } .b-empty p { font-size: 13.5px; color: var(--b-mute); line-height: 1.7; margin: 0 auto; max-width: 440px; } /* ════════════════════════════════════════════════════════════════════ Sohbet — détail : rendu Markdown sur tokens « Ciel vivant » ════════════════════════════════════════════════════════════════════ */ .b-prose { font-size: 15px; line-height: 1.8; color: var(--b-ink-soft); text-wrap: pretty; } .b-prose > *:first-child { margin-top: 0; } .b-prose > *:last-child { margin-bottom: 0; } .b-prose p { margin: 0 0 1.05em; } .b-prose h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 24px; font-weight: 600; color: var(--b-ink); margin: 1.7em 0 0.55em; line-height: 1.25; } .b-prose h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 19px; font-weight: 600; color: var(--b-ink); margin: 1.4em 0 0.4em; } .b-prose h4 { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--b-gold-soft); margin: 1.4em 0 0.4em; } .b-prose strong { color: var(--b-ink); font-weight: 600; } .b-prose em { color: var(--b-gold-soft); } .b-prose ul, .b-prose ol { margin: 0 0 1.1em; padding-left: 1.4em; } .b-prose ul { list-style: none; padding-left: 1.2em; } .b-prose li { margin-bottom: 0.45em; position: relative; } .b-prose ul > li::before { content: '◆'; position: absolute; left: -1.2em; top: 0.5em; font-size: 0.6em; color: var(--b-gold); } .b-prose blockquote { border-left: 2px solid var(--b-gold); background: linear-gradient(to right, rgba(var(--b-bronze-rgb), 0.08), transparent); margin: 1.3em 0; padding: 0.9em 1.2em; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 17.5px; color: var(--b-ink); } .b-prose blockquote p { margin: 0; } .b-prose blockquote p + p { margin-top: 0.6em; } .b-prose a { color: var(--b-gold-soft); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .b-prose hr { border: none; border-top: 1px solid var(--b-line); margin: 2em auto; width: 60%; } .b-prose code { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.88em; border: 1px solid var(--b-line); background: rgba(var(--b-ink-rgb), 0.04); padding: 1px 5px; } /* navigation précédent / suivant (détail sohbet) */ .b-adjacent { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 18px; } .b-adjacent a { border: 1px solid var(--b-line); background: rgba(var(--b-ink-rgb), 0.02); padding: 18px 22px; text-decoration: none; transition: border-color 240ms ease, background 240ms ease; } .b-adjacent a:hover { border-color: rgba(var(--b-tan-rgb), 0.4); background: rgba(var(--b-bronze-rgb), 0.06); } .b-adjacent .dir { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--b-gold-soft); margin-bottom: 6px; } .b-adjacent .theme { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 17px; font-weight: 600; color: var(--b-ink); line-height: 1.3; } .b-adjacent .when { font-size: 11.5px; color: var(--b-faint); margin-top: 4px; } .b-adjacent a.align-right { text-align: right; } /* ════════════════════════════════════════════════════════════════════ Mobile ════════════════════════════════════════════════════════════════════ */ .b-course > .b-course-side { min-width: 0; } @media (max-width: 760px) { .b-course { grid-template-columns: 1fr; } .b-course-side { border-left: none; padding-left: 0; border-top: 1px solid rgba(var(--b-tan-rgb), 0.16); padding-top: 18px; } .b-sticky-intro { position: static; } } /* Header compact : sous ~880px les 7 liens + la marque + les outils ne tiennent plus sur une ligne et se chevauchaient. On masque la barre de liens et on bascule la navigation dans un tiroir latéral ouvert au burger, pour libérer l'espace et éviter tout chevauchement sur petits écrans. */ @media (max-width: 880px) { .b-header-in { flex-wrap: nowrap; gap: 12px; } /* Ordre mobile : marque à gauche, puis outils (langues + thème), puis le burger tout à droite, collé au sélecteur de langue. */ .b-brand { margin-right: auto; order: 0; } .b-header-tools { order: 1; } .b-burger { display: inline-flex; order: 2; } /* Dans les outils, on remonte le thème pour que les langues soient juste à gauche du burger ( … thème · FR·TR · ☰ ). */ .b-header-tools .b-theme-btn { order: 0; } .b-header-tools .b-lang { order: 1; } /* La barre de liens desktop disparaît au profit du tiroir mobile */ .b-mainnav-d { display: none; } /* Le tiroir (enfant de ) glisse depuis la droite */ .b-drawer { display: flex; position: fixed; top: 0; right: 0; bottom: 0; z-index: 100; width: min(84vw, 320px); flex-direction: column; align-items: stretch; padding: 14px 18px calc(24px + env(safe-area-inset-bottom)); background: var(--b-bg); color: var(--b-ink); border-left: 1px solid var(--b-line); box-shadow: -18px 0 48px rgba(6, 17, 15, 0.28); overflow-y: auto; overscroll-behavior: contain; transform: translateX(100%); visibility: hidden; transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 300ms; } .b-drawer.is-open { transform: translateX(0); visibility: visible; transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1); } /* Liens empilés, pleine largeur, cibles tactiles confortables */ .b-drawer .b-nav { display: block; width: 100%; padding: 14px 6px; font-size: 13px; letter-spacing: 0.08em; color: var(--b-nav-ink); border-bottom: 1px solid rgba(var(--b-tan-rgb), 0.12); } .b-drawer .b-nav::after { display: none; } .b-drawer .b-nav.on { color: var(--b-gold-hi); } } @media (max-width: 640px) { .b-header-in { padding: 10px 14px; } .b-brand img { height: 32px; } .b-brand-name { font-size: 17px; } .pageB-hero { padding: 54px 18px 58px; } .b-when { display: none; } .b-tab { padding: 9px 18px; } .b-sec { padding: 64px 18px 70px; } .b-event-banner { padding: 26px 22px; } .b-jumua { padding: 24px 22px 22px; } .b-ram-card { padding: 26px 22px 24px; } .b-form { padding: 24px 20px 26px; } .b-gold-card { padding: 26px 22px 24px; } .b-evt-row { grid-template-columns: 64px 1fr auto; gap: 14px; padding: 16px 16px; } .b-evt-date { padding-right: 14px; } .b-evt-date .day { font-size: 24px; } } /* ───────────────────────────────────────────────────────────────────────── Bandeau d'annonce site-wide (cenaze / fermeture / info / urgent) Inclus dans base.html juste après le header. La couleur d'accent dépend du type via .b-announce--. S'adapte au thème jour/nuit. ───────────────────────────────────────────────────────────────────────── */ .b-announce { /* défaut = info (gold de la palette) */ --ann: var(--b-gold); --ann-rgb: var(--b-tan-rgb); position: relative; z-index: 5; background: linear-gradient(180deg, rgba(var(--ann-rgb), 0.16), rgba(var(--ann-rgb), 0.08)); border-top: 1px solid rgba(var(--ann-rgb), 0.30); border-bottom: 1px solid var(--b-line); } .b-announce--cenaze { --ann: #6E7E8C; --ann-rgb: 110, 126, 140; } .b-announce--fermeture{ --ann: #B5852F; --ann-rgb: 181, 133, 47; } .b-announce--urgent { --ann: #C0492F; --ann-rgb: 192, 73, 47; } .b-announce--info { --ann: var(--b-gold); --ann-rgb: var(--b-tan-rgb); } .b-announce-in { max-width: 1180px; margin: 0 auto; padding: 12px 28px; display: flex; align-items: center; gap: 14px; } .b-announce-icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--ann); background: rgba(var(--ann-rgb), 0.14); border: 1px solid rgba(var(--ann-rgb), 0.34); } .b-announce-body { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; } .b-announce-tag { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ann); } .b-announce-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 19px; font-weight: 600; line-height: 1.25; color: var(--b-ink); } .b-announce-text { font-family: 'Inter', sans-serif; font-size: 13.5px; color: var(--b-ink-soft); } .b-announce-meta { font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 500; color: var(--b-mute); width: 100%; } .b-announce-cta { flex: none; margin-left: auto; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-decoration: none; white-space: nowrap; padding: 7px 16px; border-radius: 999px; color: var(--ann); border: 1px solid rgba(var(--ann-rgb), 0.45); transition: background 0.18s ease, color 0.18s ease; } .b-announce-cta:hover { background: var(--ann); color: var(--b-bg); } @media (max-width: 640px) { .b-announce-in { padding: 11px 18px; gap: 11px; align-items: flex-start; } .b-announce-icon { width: 32px; height: 32px; } .b-announce-title { font-size: 17px; } .b-announce-cta { margin-left: 0; margin-top: 6px; } } /* ─── Foyer / famille : composition lisible sur mobile ─── */ .b-foyer-card { display: block; } .b-foyer-card + .b-foyer-card { margin-top: 14px; } .b-foyer-addr { margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--b-line); } .b-foyer-group + .b-foyer-group { margin-top: 22px; } .b-foyer-head { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--b-gold-soft); margin: 0 0 12px; } .b-foyer-list { list-style: none; padding: 0; margin: 0; } .b-foyer-member { display: flex; align-items: flex-start; gap: 13px; padding: 14px 0; border-top: 1px solid var(--b-line); } .b-foyer-member:first-child { border-top: 0; padding-top: 0; } .b-foyer-avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--b-goldhi-rgb), 0.16); color: var(--b-gold); font-family: 'Cormorant Garamond', Georgia, serif; font-size: 16px; font-weight: 600; } .b-foyer-body { min-width: 0; flex: 1 1 auto; } .b-foyer-name { display: block; font-weight: 600; color: var(--b-ink); line-height: 1.3; word-break: break-word; } .b-foyer-name .b-foyer-self { color: var(--b-mute); font-weight: 400; } .b-foyer-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; } .b-pill { display: inline-block; font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 500; line-height: 1.4; letter-spacing: 0.01em; padding: 3px 11px; border-radius: 999px; border: 1px solid var(--b-line); color: var(--b-mute); white-space: normal; } .b-pill--role { color: var(--b-gold-soft); border-color: rgba(var(--b-goldhi-rgb), 0.3); } .b-pill--ok { color: #2E8B6B; border-color: rgba(46, 139, 107, 0.4); background: rgba(46, 139, 107, 0.08); } [data-theme="dark"] .b-pill--ok { color: #6FCBA6; } .b-pill--wait { color: var(--b-gold-soft); border-color: rgba(var(--b-goldhi-rgb), 0.4); background: rgba(var(--b-goldhi-rgb), 0.08); } .b-foyer-action { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0 0; padding: 12px 0 0; border-top: 1px dashed var(--b-line); } .b-foyer-action .b-input { flex: 1 1 200px; min-width: 0; } .b-foyer-action label { margin: 0; width: 100%; } @media (max-width: 560px) { .b-foyer-action .b-input { flex: 1 1 100%; } .b-foyer-action .b-cta-ghost, .b-foyer-action .b-cta-gold { width: 100%; } } /* =========================================================== RAILS HADITHS — colonnes latérales ancrées DANS le hero d'accueil (grands écrans). Posées en position:absolute sur .bhero (qui porte .b-force-dark) : elles héritent donc des tokens sombres du ciel et défilent avec le hero — pas de position:fixed qui flotterait sur les sections claires. On les affiche seulement quand la gouttière est assez large (≥ 1440px ; colonne de contenu 1060px) et on dérive la largeur du rail de la gouttière réelle → jamais de chevauchement. =========================================================== */ .b-hadith-rails { display: none; } @media (min-width: 1440px) { .b-hadith-rails { display: block; } } .b-hadith-rail { position: absolute; top: 0; bottom: 0; z-index: 3; /* au-dessus du ciel, sous le contenu central (stage = 4) */ width: clamp(150px, calc((100vw - 1060px) / 2 - 34px), 230px); display: flex; flex-direction: column; justify-content: center; padding: 0 clamp(16px, 1.8vw, 30px); pointer-events: none; /* purement décoratif : n'intercepte aucun clic */ overflow: hidden; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); animation: bHadithIn 1.1s ease both; animation-delay: 0.65s; } .b-hadith-rail--left { left: 0; align-items: flex-start; text-align: left; background: linear-gradient(to right, rgba(var(--b-bg-rgb), 0.55), rgba(var(--b-bg-rgb), 0)); } .b-hadith-rail--right { right: 0; align-items: flex-end; text-align: right; background: linear-gradient(to left, rgba(var(--b-bg-rgb), 0.55), rgba(var(--b-bg-rgb), 0)); } /* Calligraphie arabe en filigrane, derrière le texte */ .b-hadith-ar { position: absolute; inset: 8vh 0; display: flex; align-items: center; justify-content: center; font-size: clamp(38px, 4.4vw, 70px); line-height: 1.9; color: var(--b-gold); opacity: 0.09; overflow: hidden; pointer-events: none; } .b-hadith-quote { position: relative; margin: 0; } .b-hadith-text { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: clamp(15px, 1.05vw, 18px); line-height: 1.55; color: var(--b-ink-soft); } .b-hadith-src { margin-top: 14px; font-family: 'Inter', sans-serif; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--b-gold); } @keyframes bHadithIn { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .b-hadith-rail { animation: none; } } /* ============================================================================ INTRO — animation d'accueil (overlay, home uniquement) Rosace géométrique 8 branches tracée au compas + arche mihrab qui se dessine, salam + nom, puis ouverture de l'arche révélant la page. Jouée une fois par session (sessionStorage 'acst-intro-seen'), désarmée si prefers-reduced-motion. Tokens --int-* autonomes : l'overlay ne dépend pas des tokens --b-* du site. Gate d'affichage : masquée par défaut, révélée seulement quand porte .intro-armed (posée avant peinture par le script d'amorçage de home.html) → pas de flash pour les visiteurs qui l'ont déjà vue. ============================================================================ */ .intro-root { --sp: 1; /* facteur de vitesse (1 = nominal) — requis par les calc() */ --int-deep: #061f1a; --int-deep-2: #0A4A3D; --int-gold: #D9C29A; --int-gold-soft: rgba(217, 194, 154, 0.55); --int-ink: #F5EFE3; position: fixed; inset: 0; z-index: 9000; display: none; /* armé par .intro-armed (cf. home.html) */ align-items: center; justify-content: center; overflow: hidden; cursor: pointer; isolation: isolate; background: radial-gradient(ellipse 120% 90% at 50% 8%, #0e3a31 0%, transparent 60%), radial-gradient(ellipse 100% 70% at 50% 120%, #0A4A3D 0%, transparent 55%), var(--int-deep); } html.intro-armed .intro-root { display: flex; } /* Voile + grain léger */ .intro-veil { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle at 22% 14%, rgba(217,194,154,0.06) 0%, transparent 42%), radial-gradient(circle at 80% 80%, rgba(14,94,78,0.10) 0%, transparent 50%); } .intro-glow { position: absolute; left: 50%; top: 42%; width: 60vmin; height: 60vmin; transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient(circle, rgba(217,194,154,0.18) 0%, transparent 62%); opacity: 0; animation: introGlow calc(2600ms * var(--sp)) cubic-bezier(0.22, 1, 0.36, 1) calc(220ms * var(--sp)) forwards; } @keyframes introGlow { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); } 55% { opacity: 1; } 100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1.05); } } /* Étoiles scintillantes */ .intro-stars { position: absolute; inset: 0; pointer-events: none; } .intro-stars span { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: var(--int-gold); opacity: 0; animation: introTwinkle 3.4s ease-in-out infinite; } @keyframes introTwinkle { 0%, 100% { opacity: 0; } 50% { opacity: 0.5; } } /* Scène + cadre arche */ .intro-stage { position: relative; width: min(62vmin, 440px); aspect-ratio: 200 / 300; display: flex; align-items: center; justify-content: center; will-change: transform, opacity; } .intro-frame { position: relative; width: 100%; height: 100%; } /* Tracé universel (cercles, rect, path) via pathLength=1 */ .intro-draw { stroke-dasharray: 1 1.04; stroke-dashoffset: 1; animation: introDraw calc(var(--dur, 700) * 1ms * var(--sp)) cubic-bezier(0.22, 1, 0.36, 1) calc(var(--d, 0) * 1ms * var(--sp)) forwards; } @keyframes introDraw { to { stroke-dashoffset: 0; } } .intro-pop { opacity: 0; transform: scale(0); transform-box: fill-box; transform-origin: center; animation: introPop calc(520ms * var(--sp)) cubic-bezier(0.22, 1, 0.36, 1) calc(var(--d, 0) * 1ms * var(--sp)) forwards; } @keyframes introPop { 0% { opacity: 0; transform: scale(0); } 70% { opacity: 1; transform: scale(1.4); } 100% { opacity: 1; transform: scale(1); } } /* Texte */ .intro-text { position: absolute; left: 0; right: 0; top: 52%; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 8%; } .intro-salam { margin: 0; font-weight: 700; color: var(--int-gold); font-size: clamp(26px, 5.4vmin, 40px); line-height: 1.2; white-space: nowrap; opacity: 0; transform: translateY(8px); animation: introRise calc(820ms * var(--sp)) cubic-bezier(0.22, 1, 0.36, 1) calc(1500ms * var(--sp)) forwards; } .intro-rule { display: block; height: 1px; width: 0; margin: 14px 0 12px; background: linear-gradient(90deg, transparent, var(--int-gold), transparent); animation: introRule calc(700ms * var(--sp)) cubic-bezier(0.22, 1, 0.36, 1) calc(1900ms * var(--sp)) forwards; } .intro-name { margin: 0; font-weight: 600; color: var(--int-ink); font-size: clamp(34px, 8vmin, 60px); line-height: 1; letter-spacing: 0.14em; padding-left: 0.14em; opacity: 0; transform: translateY(10px); animation: introRise calc(820ms * var(--sp)) cubic-bezier(0.22, 1, 0.36, 1) calc(2150ms * var(--sp)) forwards; } .intro-sub { margin: 8px 0 0; color: var(--int-gold); font-size: clamp(10px, 1.7vmin, 13px); letter-spacing: 0.24em; text-transform: uppercase; opacity: 0; transform: translateY(6px); animation: introRise calc(820ms * var(--sp)) cubic-bezier(0.22, 1, 0.36, 1) calc(2400ms * var(--sp)) forwards; } @keyframes introRise { to { opacity: 1; transform: translateY(0); } } @keyframes introRule { to { width: 84px; } } .intro-skip { position: absolute; bottom: 5vh; left: 50%; transform: translateX(-50%); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--int-gold); opacity: 0; /* Apparaît tôt (dès le début de l'intro) puis respire en restant visible, pour que le visiteur voie tout de suite qu'il peut cliquer pour entrer. */ animation: introSkipIn calc(600ms * var(--sp)) ease-out calc(500ms * var(--sp)) both, introSkipBreath 2.8s ease-in-out calc(1100ms * var(--sp)) infinite; } @keyframes introSkipIn { from { opacity: 0; transform: translateX(-50%) translateY(6px); } to { opacity: 0.55; transform: translateX(-50%) translateY(0); } } @keyframes introSkipBreath { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.28; } } /* ── Sortie : l'arche s'ouvre, l'écran se révèle ── */ .intro-exit { pointer-events: none; } .intro-exit .intro-veil, .intro-exit .intro-glow, .intro-exit .intro-stars, .intro-exit .intro-skip { animation: none; opacity: 0; transition: opacity calc(650ms * var(--sp)) cubic-bezier(0.22, 1, 0.36, 1); } .intro-exit { animation: introBgOut calc(900ms * var(--sp)) cubic-bezier(0.22, 1, 0.36, 1) forwards; } @keyframes introBgOut { to { opacity: 0; } } .intro-exit .intro-stage { animation: introZoom calc(950ms * var(--sp)) cubic-bezier(0.6, 0, 0.3, 1) forwards; } @keyframes introZoom { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2.7); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .intro-root { display: none !important; } }