/* ============================================================================ 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); } /* Laisse un enfant positionné déborder de la section (liste du sélecteur de ville). `.b-sec` clippe par défaut pour contenir ses décors — lattice, étoiles, arches ; à ne poser que sur une section qui n'en a pas. Le z-index est indispensable : `.rv` pose un transform, donc un contexte d'empilement, et sans lui la section suivante recouvrirait la liste. Reste sous le header (90) et le tiroir mobile (100). */ .b-sec--overflow { overflow: visible; z-index: 20; } .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; } /* sélecteur de ville (page horaires) — carte sobre, même grammaire que .b-side-card : filet fin, kicker doré, champ .b-input du design system. */ .b-city-picker { max-width: 470px; margin: 0 auto; padding: 20px 24px 18px; border: 1px solid var(--b-line); background: rgba(var(--b-ink-rgb), 0.03); } .b-city-picker-head { display: flex; align-items: center; justify-content: center; gap: 9px; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--b-gold-soft); margin-bottom: 13px; cursor: pointer; } .b-city-picker-row { display: flex; gap: 10px; align-items: stretch; } /* min-width:0 — sans ça le champ refuse de rétrécir sous le nom le plus long. */ .b-city-picker-row .b-input, .b-city-combo { flex: 1 1 auto; min-width: 0; } .b-city-picker-row .b-cta-gold { flex: 0 0 auto; padding: 13px 20px; } /* Champ de recherche + liste filtrée (refonte.js initCityPicker). Le menu natif est remplacé dès que JS est là : 582 villes y sont impraticables et son popup ne suit ni nos couleurs ni notre contraste. */ .b-city-combo { position: relative; } .b-city-search { width: 100%; } .b-city-list { position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 40; max-height: 290px; overflow-y: auto; margin: 0; padding: 4px 0; list-style: none; background: var(--b-bg2); border: 1px solid rgba(var(--b-tan-rgb), 0.3); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); } .b-city-opt { padding: 9px 15px; font-family: 'Inter', sans-serif; font-size: 13.5px; color: var(--b-ink); cursor: pointer; } .b-city-opt.is-active, .b-city-opt:hover { background: rgba(var(--b-goldhi-rgb), 0.16); } .b-city-opt[aria-selected="true"] { color: var(--b-gold-hi); font-weight: 600; } .b-city-empty { padding: 12px 15px; font-size: 12.5px; color: var(--b-faint); list-style: none; } .b-city-note { margin: 13px 0 0; text-align: center; font-size: 12px; line-height: 1.6; color: var(--b-faint); } .b-city-note--away { color: var(--b-mute); padding-top: 13px; border-top: 1px solid var(--b-line); } .b-city-note--away .c-link { display: inline-block; margin-top: 3px; } @media (max-width: 520px) { .b-city-picker { padding: 18px 18px 16px; } .b-city-picker-row { flex-direction: column; } } .b-jumua-place { position: relative; font-size: 11.5px; color: var(--b-mute); margin-bottom: 14px; } /* 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); } /* Le thème sombre est le DÉFAUT (:root) : sans data-theme explicite, un `color-scheme: light` implicite faisait s'ouvrir la liste native d'un du site. */ .b-input option { background-color: var(--b-bg2); color: var(--b-ink); } /* 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 » Déplacé dans `prose.css`, chargé par cette page **et** par l'éditeur de L'Atelier qui en montre l'aperçu. Une seule source : sans quoi l'aperçu finirait par montrer autre chose que le site. ════════════════════════════════════════════════════════════════════════ */ /* 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 — déplacé dans `annonce.css`, chargé par cette page **et** par l'éditeur d'annonces de L'Atelier qui en montre l'aperçu. Une seule source : sans quoi l'aperçu finirait par montrer autre chose. ════════════════════════════════════════════════════════════════════════ */ /* ─── 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; } } /* ════════════════════════════════════════════════════════════════════ Informations religieuses — grille de rubriques et fiches Pendant web de l'écran « Dini Bilgiler » de l'app. Les couleurs de pastille viennent de la base (--faith-color, posé en style inline) ; tout le reste s'appuie sur les variables du thème pour suivre le mode clair comme le mode sombre. ════════════════════════════════════════════════════════════════════ */ .b-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ── Grille des rubriques ── */ .b-faith-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 18px; } .b-faith-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 190px; padding: 30px 20px; text-align: center; text-decoration: none; background: var(--b-bg2); border: 1px solid var(--b-line); transition: border-color 0.25s ease, transform 0.25s ease; } .b-sec:not(.b-sec--alt) .b-faith-card { background: var(--b-bg); } .b-faith-card:hover, .b-faith-card:focus-visible { border-color: rgba(var(--b-tan-rgb), 0.45); transform: translateY(-2px); } .b-faith-icon { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; color: var(--faith-color, var(--b-gold)); /* Aplat très léger de la couleur de la rubrique : le symbole ressort sans que la carte devienne bariolée. */ background: color-mix(in srgb, var(--faith-color, #CDA464) 14%, transparent); } .b-faith-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 17px; font-weight: 600; color: var(--b-ink); line-height: 1.3; } .b-faith-count { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--b-faint); } /* ── Détail d'une rubrique ── */ .b-faith-back { margin-bottom: 30px; } .b-faith-block { margin-bottom: 52px; } .b-faith-block:last-child { margin-bottom: 0; } .b-faith-block-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--b-line); margin-bottom: 8px; } .b-faith-cat { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(21px, 2.6vw, 26px); font-weight: 600; color: var(--b-ink); margin: 0; } .b-faith-badge { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--b-gold-soft); border: 1px solid rgba(var(--b-tan-rgb), 0.3); padding: 3px 10px; } .b-faith-note { font-size: 13.5px; font-style: italic; color: var(--b-mute); line-height: 1.7; margin: 14px 0 0; padding-left: 14px; border-left: 2px solid rgba(var(--b-tan-rgb), 0.35); } .b-faith-section { margin-top: 26px; } .b-faith-section-title { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--b-gold-soft); margin: 0 0 10px; } /* ── Fiches ── */ .b-faith-list { list-style: none; margin: 18px 0 0; padding: 0; } .b-faith-item { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--b-line); } .b-faith-item:last-child { border-bottom: none; } .b-faith-num { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; font-size: 12px; font-weight: 700; color: var(--b-gold-soft); border: 1px solid rgba(var(--b-tan-rgb), 0.3); font-variant-numeric: tabular-nums; } .b-faith-body { flex: 1 1 auto; min-width: 0; } .b-faith-ar { font-family: 'Amiri', serif; font-size: 26px; line-height: 1.6; color: var(--b-gold-hi); margin-bottom: 2px; } .b-faith-phon { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--b-gold-soft); margin-bottom: 4px; } .b-faith-item-title { font-size: 15px; font-weight: 600; color: var(--b-ink); margin: 0; line-height: 1.5; } .b-faith-def { font-size: 13.5px; color: var(--b-mute); line-height: 1.75; margin: 6px 0 0; } .b-faith-steps { margin: 10px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--b-mute); line-height: 1.85; } .b-faith-steps li { margin-bottom: 2px; } .b-faith-deep { margin-top: 10px; font-size: 13.5px; color: var(--b-mute); line-height: 1.75; } .b-faith-deep > summary { cursor: pointer; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--b-gold-soft); font-weight: 600; list-style: none; } .b-faith-deep > summary::-webkit-details-marker { display: none; } .b-faith-deep > summary::before { content: '+ '; } .b-faith-deep[open] > summary::before { content: '– '; } .b-faith-deep > p { margin: 10px 0 0; } .b-faith-ref { font-size: 11.5px; letter-spacing: 0.06em; color: var(--b-faint); margin-top: 8px; } @media (max-width: 560px) { .b-faith-card { min-height: 160px; padding: 24px 14px; } .b-faith-icon { width: 50px; height: 50px; } .b-faith-title { font-size: 15px; } } /* ════════════════════════════════════════════════════════════════════ Religion — direction « La Coupole » Pages : /informations-religieuses/ et ses rubriques. Reprise de la maquette `religion/religion-coupole.css` (+ le sous-ensemble utile de `religion/religion.css`), adaptée au rendu serveur : les fiches sont des

et non des boutons React, l'arcade est faite de vrais liens, et les barres collantes s'empilent sous le header du site — dont la hauteur est mesurée par refonte.js (`--cp-head`, `--cp-crumb`). ════════════════════════════════════════════════════════════════════ */ :root { /* Replis si le script n'a pas encore mesuré : hauteurs nominales du header et du fil d'Ariane. Les barres restent utilisables avant la mesure. */ --cp-head: 67px; --cp-crumb: 69px; } @keyframes cpRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } @keyframes cpDraw { from { stroke-dashoffset: var(--len, 600); } to { stroke-dashoffset: 0; } } /* ─────────────── ARCADE — la grille des rubriques ─────────────── */ .cp-arcade-wrap { position: relative; overflow: hidden; padding: 0 0 96px; } .cp-arcade { display: grid; /* Une colonne par rubrique publiée (posé en style inline par le gabarit) : l'arcade reste régulière si le bureau en ajoute ou en retire une. */ grid-template-columns: repeat(var(--cp-cols, 5), minmax(0, 1fr)); gap: 0; max-width: 1340px; margin: 0 auto; padding: 0 24px; align-items: end; } .cp-bay { position: relative; display: block; color: inherit; text-decoration: none; isolation: isolate; } .cp-bay-in { position: relative; height: clamp(340px, 44vw, 470px); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 10px; padding: 0 14px 34px; text-align: center; overflow: hidden; border-radius: 999px 999px 0 0; transition: transform 550ms cubic-bezier(0.22, 1, 0.36, 1); } .cp-bay:hover .cp-bay-in, .cp-bay:focus-visible .cp-bay-in { transform: translateY(-10px); } .cp-bay-glow { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(120% 80% at 50% 100%, rgba(var(--b-goldhi-rgb), 0.16), transparent 68%); opacity: 0; transition: opacity 550ms; } .cp-bay:hover .cp-bay-glow, .cp-bay:focus-visible .cp-bay-glow { opacity: 1; } .cp-bay-lat { position: absolute; inset: 0; z-index: -2; border-radius: inherit; opacity: 0.22; transition: opacity 550ms; } .cp-bay:hover .cp-bay-lat { opacity: 0.5; } .cp-bay-svg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; } .cp-bay-svg path { fill: none; stroke: var(--b-gold); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: var(--len, 900); animation: cpDraw 1.5s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: var(--d, 0ms); } .cp-bay-svg .in2 { opacity: 0.4; } .cp-bay-n { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 13px; letter-spacing: 0.3em; color: var(--b-gold); } .cp-bay-ar { font-family: 'Amiri', serif; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.5; color: var(--b-gold-hi); opacity: 0.9; } .cp-bay-t { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(19px, 2vw, 25px); font-weight: 600; line-height: 1.15; margin: 2px 0 0; color: var(--b-ink); } .cp-bay-c { font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--b-faint); transition: color 400ms; } .cp-bay:hover .cp-bay-c { color: var(--b-gold); } .cp-bay-go { height: 0; overflow: hidden; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--b-gold); transition: height 450ms cubic-bezier(0.22, 1, 0.36, 1); } .cp-bay:hover .cp-bay-go, .cp-bay:focus-visible .cp-bay-go { height: 20px; } .cp-floor { max-width: 1340px; margin: 0 auto; padding: 0 24px; } .cp-floor i { display: block; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--b-tan-rgb), 0.5), transparent); } /* Sur petit écran, l'arcade reste une arcade — et elle tient en entier dans l'écran : les cinq nefs se voient d'un seul regard, sans rien faire glisser. Les arches se resserrent, la typographie suit ; le compte de fiches, qui est l'information la moins utile ici, cède la place en dernier. */ @media (max-width: 1000px) { .cp-arcade { gap: 0; padding: 0 14px; } .cp-bay-in { height: clamp(230px, 46vw, 330px); padding: 0 5px 20px; gap: 6px; } /* La calligraphie la plus longue (« اَلْأَسْمَاءُ الْحُسْنَى ») tient sur deux lignes plutôt que de déborder sur les nefs voisines. */ .cp-bay-ar { font-size: clamp(14px, 2.9vw, 24px); line-height: 1.35; max-width: 100%; overflow-wrap: break-word; } /* Deux lignes réservées au titre : sans ça, une nef au nom long remonte sa calligraphie et la rangée perd son alignement. */ .cp-bay-t { font-size: clamp(10.5px, 2.2vw, 19px); line-height: 1.2; min-height: 2.4em; display: flex; align-items: center; max-width: 100%; overflow-wrap: break-word; } .cp-bay-n { font-size: clamp(8px, 1.5vw, 12px); letter-spacing: 0.18em; } .cp-bay-c { font-size: clamp(7.5px, 1.4vw, 10px); letter-spacing: 0.1em; } .cp-floor { padding: 0 14px; } } /* Sous 700 px, l'arcade se plie en deux rangées de trois. À six nefs sur une seule rangée, chaque arche tombait sous 60 px : la calligraphie devenait un accident et le titre un empilement de syllabes. Trois par rangée, chacune garde sa proportion d'arche, son nom arabe lisible et son compte — et les six restent visibles d'un seul regard, ce qui était le but. */ @media (max-width: 700px) { .cp-arcade { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 3px; row-gap: 24px; padding: 0 12px; } .cp-bay-in { height: clamp(198px, 54vw, 268px); padding: 0 6px 17px; gap: 5px; } /* Chaque rangée porte son propre sol : le filet unique du bas ne passerait que sous la dernière. */ .cp-bay-in::after { content: ''; position: absolute; left: 3px; right: 3px; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--b-tan-rgb), 0.5), transparent); } .cp-bay-ar { font-size: clamp(15px, 4.4vw, 22px); line-height: 1.4; } .cp-bay-t { font-size: clamp(12px, 3.5vw, 16px); line-height: 1.2; min-height: 2.4em; } .cp-bay-n { font-size: 9px; letter-spacing: 0.16em; } .cp-bay-c { display: block; font-size: 8.5px; letter-spacing: 0.08em; } .cp-bay-go { display: none; } .cp-floor { display: none; } .cp-arcade-wrap { padding-bottom: 66px; } } /* Franchir une arche : les autres s'effacent, la cliquée s'allume et avance. Le voile radial d'origine est remplacé par la plongée (cf. plus bas). */ .cp-arcade.leaving .cp-bay { transition: opacity 500ms ease, transform 500ms cubic-bezier(0.22, 1, 0.36, 1); } .cp-arcade.leaving .cp-bay:not(.go) { opacity: 0; transform: translateY(16px) scale(0.97); } /* L'arche cliquée avance vers nous : c'est elle, désormais, qui porte la plongée. Une seule arche à rastériser au lieu de tout le document. */ .cp-bay.go { z-index: 2; } .cp-arcade.leaving .cp-bay.go { will-change: transform, opacity; animation: cpBayDive 640ms cubic-bezier(0.44, 0, 0.82, 0.2) both; } @keyframes cpBayDive { 0% { transform: scale(1); opacity: 1; } 70% { opacity: 0.92; } 100% { transform: scale(1.6); opacity: 0.4; } } .cp-bay.go .cp-bay-in { transform: translateY(-14px) scale(1.07); transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1); } .cp-bay.go .cp-bay-glow { opacity: 1; } .cp-bay.go .cp-bay-n, .cp-bay.go .cp-bay-c { opacity: 0; transition: opacity 300ms; } /* ─── Franchir l'arche : plongée dans la porte ──────────────────────────── Reprise de `religion/religion-coupole.css` (maquette Claude Design). La caméra avance dans l'arche cliquée, la lumière dorée sort de la porte, son ogive passe devant l'objectif, et la page d'arrivée émerge de cette lumière. La maquette est une SPA : ses deux temps s'enchaînent dans le même document. Ici la navigation est réelle, donc le premier temps (`close`) joue sur la page qu'on quitte et le second (`open`) sur celle qui arrive — refonte.js passe le relais par sessionStorage. Les durées sont celles de `CPX`. */ .cpx-cam { position: relative; } /* La caméra grossit jusqu'à 2,7 : son débord ferait apparaître une barre de défilement horizontale au beau milieu de la plongée. `clip` la supprime sans créer de conteneur de défilement — donc sans toucher la position verticale, contrairement à `hidden`. Posé le temps du plan seulement. */ .cpx-lock { overflow-x: clip; } /* À l'aller, la page ne bouge plus. Elle plongeait jusqu'à 2,7x : mesuré au screencast, cela ouvrait un trou de 300 ms au milieu du plan, le temps que le navigateur rastérise tout le document à cette échelle. Le retour, lui, n'agrandit qu'à 1,04 : c'est pourquoi lui seul restait fluide. La plongée est maintenant portée par l'arche cliquée et par la couche de lumière, deux surfaces petites — même lecture, sans le prix de la page entière. */ .cpx-back.cpx-cam-close, .cpx-back.cpx-cam-open { will-change: transform, opacity; backface-visibility: hidden; } .cpx-back.cpx-cam-close { transform-origin: 50% 0; animation: cpxStepBack 420ms cubic-bezier(0.4, 0, 0.6, 1) both; } .cpx-back.cpx-cam-open { transform-origin: 50% 0; animation: cpxSettle 520ms cubic-bezier(0.16, 1, 0.3, 1) both; } /* `transform` et `opacity` seulement : ce sont les deux seules propriétés que le compositeur anime sans repeindre. La maquette montait la luminosité par `filter`, ce qui oblige le navigateur à rasteriser toute la page à chaque image — 51 fiches sur « La prière » — et bloquait l'animation. La montée vers la lumière est portée par le halo, qui lui est une couche à part. Reste que même sans `filter`, agrandir la page coûte une rastérisation à la nouvelle échelle. Le retour se contente de 1,04, d'où un simple dégagement vers la lumière, puis l'arcade se repose. */ @keyframes cpxStepBack { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.04); opacity: 0; } } @keyframes cpxSettle { 0% { transform: scale(0.97); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } /* Les couches de lumière, calées sur le point cliqué (--vx / --vy). */ .cpx-light { position: fixed; inset: 0; z-index: 220; pointer-events: none; overflow: hidden; } /* Le temps que la page d'arrivée soit prête à peindre, la lumière tient seule, figée sur sa première image : rien ne bouge, donc rien ne saute. */ .cpx-hold * { animation-play-state: paused !important; } .cpx-vig { position: absolute; inset: 0; background: radial-gradient(circle at var(--vx) var(--vy), transparent 14%, rgba(0, 0, 0, 0.58) 62%, rgba(0, 0, 0, 0.88) 100%); } .cpx-close .cpx-vig { animation: cpxFadeIn 640ms ease-in both; } .cpx-open .cpx-vig { animation: cpxFadeOut 560ms ease-out both; } /* Au retour, pas de tunnel : un simple fond calme sous le dégagement. */ .cpx-back .cpx-vig { background: radial-gradient(circle at var(--vx) var(--vy), rgba(var(--b-bg-rgb), 0.82), var(--b-bg) 72%); } .cpx-back.cpx-close .cpx-vig { animation: cpxFadeIn 420ms ease-out both; } .cpx-back.cpx-open .cpx-vig { animation: cpxFadeOut 480ms ease-in both; } .cpx-back .cpx-rim { display: none; } .cpx-back .cpx-halo { width: 40vmax; height: 40vmax; } .cpx-back.cpx-close .cpx-halo { animation: cpxHaloSoft 420ms ease-out both; } .cpx-back.cpx-open .cpx-halo { animation: cpxHaloSoftOut 480ms ease-in both; } @keyframes cpxHaloSoft { from { transform: translate(-50%, -50%) scale(0.4); opacity: 0; } to { transform: translate(-50%, -50%) scale(1.6); opacity: 0.75; } } @keyframes cpxHaloSoftOut { from { transform: translate(-50%, -50%) scale(1.6); opacity: 0.75; } to { transform: translate(-50%, -50%) scale(2.4); opacity: 0; } } /* Le fond plein : la dernière fraction du plongeon ferme complètement l'image. Sans lui, la page figée reste visible sous le halo pendant que le navigateur charge la destination — c'est là que se voyait le « blocage ». La page d'arrivée repart de ce même fond et s'y dissout, donc la coupure est invisible quel que soit le temps de chargement. */ .cpx-fill { position: absolute; inset: 0; background: radial-gradient(circle at var(--vx) var(--vy), rgba(var(--b-goldhi-rgb), 1), var(--b-gold) 45%, var(--b-bg) 100%); } .cpx-close .cpx-fill { animation: cpxFillIn 640ms cubic-bezier(0.5, 0, 0.78, 0.2) both; } .cpx-open .cpx-fill { animation: cpxFillOut 560ms ease-out both; } .cpx-back .cpx-fill { background: var(--b-bg); } .cpx-back.cpx-close .cpx-fill { animation: cpxFillIn 420ms ease-out both; } .cpx-back.cpx-open .cpx-fill { animation: cpxFillOut 480ms ease-in both; } @keyframes cpxFillIn { 0%, 45% { opacity: 0; } 100% { opacity: 1; } } @keyframes cpxFillOut { from { opacity: 1; } to { opacity: 0; } } /* Le halo : la lumière qui sort de la porte et finit par tout prendre. */ .cpx-halo { position: absolute; left: var(--vx); top: var(--vy); width: 62vmax; height: 62vmax; border-radius: 50%; background: radial-gradient(circle, rgba(var(--b-goldhi-rgb), 1), rgba(var(--b-goldhi-rgb), 0.7) 32%, rgba(var(--b-goldhi-rgb), 0.16) 58%, transparent 72%); } .cpx-close .cpx-halo { animation: cpxHalo 640ms cubic-bezier(0.5, 0, 0.78, 0.2) both; } .cpx-open .cpx-halo { animation: cpxHaloOut 700ms cubic-bezier(0.2, 0.8, 0.3, 1) both; } @keyframes cpxHalo { 0% { transform: translate(-50%, -50%) scale(0.05); opacity: 0.35; } 50% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(3.6); opacity: 1; } } /* On traverse : le halo se dissipe vers l'extérieur au lieu de refluer. */ @keyframes cpxHaloOut { 0% { transform: translate(-50%, -50%) scale(3.6); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(5.4); opacity: 0; } } /* L'ogive de la porte : elle grandit, passe devant l'objectif et sort du cadre — on la franchit, elle ne s'efface pas. */ .cpx-rim { position: absolute; left: var(--vx); top: var(--vy); width: 210px; height: 420px; overflow: visible; } /* Le halo de l'ogive est un second trait large et transparent, posé dessous, plutôt qu'un `drop-shadow` : le filtre se recalcule à chaque image pendant que l'ogive grandit jusqu'à 15x. */ .cpx-rim path { fill: none; stroke: var(--b-gold-hi); stroke-width: 1.4; vector-effect: non-scaling-stroke; } .cpx-rim .in2 { opacity: 0.5; } .cpx-rim .lueur { stroke-width: 9; opacity: 0.22; } .cpx-close .cpx-rim { animation: cpxRim 640ms cubic-bezier(0.46, 0, 0.8, 0.2) both; } .cpx-open .cpx-rim { animation: cpxRimThrough 720ms cubic-bezier(0.3, 0, 0.7, 1) both; } @keyframes cpxRim { 0% { transform: translate(-50%, -56%) scale(0.5); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(-50%, -56%) scale(4.6); opacity: 1; } } @keyframes cpxRimThrough { 0% { transform: translate(-50%, -56%) scale(4.6); opacity: 1; } 70% { opacity: 0.85; } 100% { transform: translate(-50%, -56%) scale(15); opacity: 0; } } @keyframes cpxFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes cpxFadeOut { from { opacity: 1; } to { opacity: 0; } } /* L'arche cliquée s'allume avant qu'on la franchisse. */ .cp-bay.go .cp-bay-svg path { stroke-width: 2; filter: drop-shadow(0 0 12px rgba(var(--b-goldhi-rgb), 0.9)); } .cp-bay.go .cp-bay-in { box-shadow: 0 -30px 90px rgba(var(--b-goldhi-rgb), 0.5) inset; } @media (prefers-reduced-motion: reduce) { .cpx-light { display: none; } .cpx-cam-close, .cpx-cam-open { animation: none; } .cp-arcade.leaving .cp-bay.go { animation: none; } } /* ─────────────── Fil d'Ariane collant ─────────────── */ .r-crumb { position: sticky; top: var(--cp-head); z-index: 60; display: flex; align-items: center; gap: 14px; padding: 12px 28px; background: rgba(var(--b-bg-rgb), 0.93); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--b-line); } .r-back { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; min-height: 44px; padding: 0 16px 0 12px; border: 1px solid var(--b-line); color: var(--b-ink); font-size: 12.5px; letter-spacing: 0.06em; text-decoration: none; transition: border-color 200ms, background 200ms; } .r-back:hover { border-color: var(--b-gold); background: rgba(var(--b-goldhi-rgb), 0.08); color: var(--b-ink); } .r-back svg { flex: none; } .r-crumb-path { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 12.5px; color: var(--b-mute); } .r-crumb-path b { font-weight: 600; color: var(--b-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .r-crumb-sep { color: var(--b-faint); } /* Sélecteur de rubrique — un

: il s'ouvre sans JavaScript. */ .r-switch { position: relative; margin-left: auto; } .r-switch-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border: 1px solid var(--b-line); color: var(--b-mute); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; list-style: none; } .r-switch-btn::-webkit-details-marker { display: none; } .r-switch-btn:hover { color: var(--b-ink); border-color: rgba(var(--b-tan-rgb), 0.42); } .r-switch-btn svg { transition: transform 250ms; } .r-switch[open] .r-switch-btn svg { transform: rotate(180deg); } .r-switch-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 250px; z-index: 70; padding: 6px; background: var(--b-bg2); border: 1px solid var(--b-line); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34); } .r-switch-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 0 12px; color: var(--b-ink-soft); font-size: 13.5px; text-decoration: none; } .r-switch-item svg { flex: none; width: 17px; height: 17px; } .r-switch-item:hover { background: rgba(var(--b-goldhi-rgb), 0.1); color: var(--b-ink-soft); } .r-switch-item.on { color: var(--b-gold-hi); } .r-switch-item .c { margin-left: auto; font-size: 11px; letter-spacing: 0.1em; color: var(--b-faint); } @media (max-width: 640px) { .r-crumb { gap: 10px; padding: 10px 16px; } .r-crumb-path { display: none; } } /* ─────────────── Rail d'arcade (page rubrique) ─────────────── */ .cp-rail { position: sticky; top: calc(var(--cp-head) + var(--cp-crumb)); z-index: 48; background: rgba(var(--b-bg-rgb), 0.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--b-line); } .cp-rail-in { display: flex; align-items: stretch; gap: 4px; max-width: 1240px; margin: 0 auto; padding: 0 20px; overflow-x: auto; scrollbar-width: none; } .cp-rail-in::-webkit-scrollbar { display: none; } .cp-mini { position: relative; flex: none; min-width: 136px; max-width: 176px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 34px 14px 11px; color: var(--b-mute); text-decoration: none; transition: color 350ms; } .cp-mini:hover { color: var(--b-ink); } .cp-mini.on { color: var(--b-gold-hi); } .cp-mini > svg { position: absolute; left: 50%; top: 5px; transform: translateX(-50%); width: 70px; height: 28px; opacity: 0.3; transition: opacity 350ms; } .cp-mini.on > svg { opacity: 1; } .cp-mini-n { position: absolute; left: 0; right: 0; top: 12px; z-index: 1; font-size: 10px; letter-spacing: 0.22em; color: var(--b-gold); } .cp-mini-t { z-index: 1; font-size: 12.5px; line-height: 1.3; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cp-mini-c { font-size: 10px; letter-spacing: 0.12em; color: var(--b-faint); } .cp-mini-bar { position: absolute; left: 8px; right: 8px; bottom: 0; height: 2px; background: var(--b-gold); transform: scaleX(0); transform-origin: left; transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1); } .cp-mini.on .cp-mini-bar { transform: scaleX(1); } /* ─────────────── Chapitres ─────────────── */ .cp-body { max-width: 1080px; margin: 0 auto; padding: 52px 24px 120px; } .cp-chap { scroll-margin-top: calc(var(--cp-head) + var(--cp-crumb) + 96px); margin-bottom: 74px; } .cp-chap-head { position: relative; text-align: center; padding: 56px 0 26px; } .cp-chap-arch { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: min(420px, 86%); height: 120px; pointer-events: none; } .cp-chap-arch path { fill: none; stroke: var(--b-gold); stroke-width: 0.8; vector-effect: non-scaling-stroke; opacity: 0.55; stroke-dasharray: 1200; } .cp-chap[data-in] .cp-chap-arch path { --len: 1200; animation: cpDraw 1.6s cubic-bezier(0.22, 1, 0.36, 1) both; } .cp-chap-n { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 12.5px; letter-spacing: 0.34em; color: var(--b-gold); } .cp-chap-t { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(28px, 4vw, 44px); font-weight: 600; line-height: 1.08; margin: 6px 0 0; color: var(--b-ink); } .cp-chap-m { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--b-faint); } .cp-chap-note { max-width: 60ch; margin: 20px auto 0; font-size: 14px; font-style: italic; line-height: 1.7; color: var(--b-mute); text-align: center; } .cp-grp { margin: 44px 0 10px; text-align: center; font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--b-gold); } /* ─────────────── Fiches dépliables ───────────────

plutôt que bouton : le dépli marche sans JavaScript. La hauteur n'est donc pas animable — on anime le contenu qui se pose, ce qui donne le même geste sans dépendre du script. */ .cp-cards { display: flex; flex-direction: column; max-width: 780px; margin: 30px auto 0; border-top: 1px solid var(--b-line); } .cp-card { border-bottom: 1px solid var(--b-line); transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1), background 350ms; } /* L'état masqué n'est armé que par refonte.js (`.cp-armed`), une fois l'observateur en place. Si le script ne tourne pas — erreur, CSP, réseau — aucune fiche ne se cache : le contenu reste lisible plutôt qu'invisible. */ .cp-body.cp-armed .cp-card { opacity: 0; transform: translateY(14px); } .cp-body.cp-armed .cp-card[data-in] { opacity: 1; transform: none; transition-delay: var(--d, 0ms); } .cp-card:hover { background: rgba(var(--b-goldhi-rgb), 0.05); } .cp-card[open] { background: rgba(var(--b-goldhi-rgb), 0.06); } .cp-card--flat:hover { background: none; } .cp-card-sum { display: grid; grid-template-columns: 42px minmax(0, 1fr) 24px; align-items: start; column-gap: 14px; padding: 20px 12px 20px 4px; cursor: pointer; list-style: none; } .cp-card-sum::-webkit-details-marker { display: none; } .cp-card--flat .cp-card-sum { grid-template-columns: 42px minmax(0, 1fr); cursor: default; } .cp-card-n { grid-column: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(var(--b-tan-rgb), 0.32); font-size: 12.5px; color: var(--b-gold); transition: background 300ms, color 300ms, border-color 300ms; } .cp-card:hover .cp-card-n { border-color: var(--b-gold); } .cp-card[open] .cp-card-n { background: var(--b-gold); border-color: var(--b-gold); color: var(--b-on-gold); } .cp-card-main { grid-column: 2; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .cp-card-t { font-size: 16px; font-weight: 600; line-height: 1.4; margin: 5px 0 0; color: var(--b-ink); } .cp-card-d { font-size: 14px; line-height: 1.7; color: var(--b-mute); margin: 0; text-wrap: pretty; } .cp-chev { grid-column: 3; display: flex; align-items: center; justify-content: center; height: 32px; color: var(--b-faint); transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), color 300ms; } .cp-card:hover .cp-chev { color: var(--b-gold); } .cp-card[open] .cp-chev { transform: rotate(180deg); color: var(--b-gold); } .cp-fold { padding: 0 12px 22px 56px; animation: cpRise 450ms cubic-bezier(0.22, 1, 0.36, 1); } .cp-orn { display: block; width: 132px; height: 9px; margin: 0 0 12px; } .cp-orn path, .cp-orn rect { fill: none; stroke: var(--b-gold); stroke-width: 0.9; stroke-dasharray: 200; --len: 200; } .cp-card[open] .cp-orn path, .cp-card[open] .cp-orn rect { animation: cpDraw 900ms 100ms cubic-bezier(0.22, 1, 0.36, 1) both; } .cp-deep { margin: 0; font-size: 14.5px; line-height: 1.8; color: var(--b-ink-soft); max-width: 70ch; } /* Champs communs aux fiches : arabe, phonétique, déroulé, détail */ .r-ar { font-family: 'Amiri', serif; font-size: 27px; line-height: 1.5; color: var(--b-gold-hi); direction: rtl; } .r-phon { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--b-gold); } .r-steps { list-style: none; counter-reset: s; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 9px; } .r-steps li { counter-increment: s; position: relative; padding-left: 34px; font-size: 14px; line-height: 1.65; color: var(--b-ink-soft); } .r-steps li::before { content: counter(s); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid rgba(var(--b-tan-rgb), 0.3); border-radius: 50%; font-size: 11px; color: var(--b-gold); } .r-deep { margin-top: 10px; } .r-deep > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--b-gold); cursor: pointer; } .r-deep > summary::-webkit-details-marker { display: none; } .r-deep > summary::after { content: '+'; font-size: 14px; letter-spacing: 0; } .r-deep[open] > summary::after { content: '\2013'; } .r-deep > p { margin: 2px 0 0; font-size: 14px; line-height: 1.75; color: var(--b-ink-soft); border-left: 2px solid rgba(var(--b-tan-rgb), 0.3); padding-left: 14px; } /* ─────────────── Les 99 noms : muraille, rosace, tracé ─────────────── */ .cp-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 1px; background: var(--b-line); border: 1px solid var(--b-line); margin-top: 22px; } .cp-brick { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 20px; background: var(--b-bg); transition: background 350ms; } .cp-brick:hover { background: var(--b-bg2); } .cp-brick .n { font-size: 10px; letter-spacing: 0.16em; color: var(--b-faint); } .cp-brick .ar { font-family: 'Amiri', serif; font-size: 26px; line-height: 1.4; color: var(--b-gold-hi); } .cp-brick .p { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--b-gold); } .cp-brick .d { font-size: 13px; line-height: 1.6; color: var(--b-mute); } .cp-brick-deep { margin: 4px 0 0; font-size: 13px; line-height: 1.7; color: var(--b-ink-soft); } /* Médaillon : le nom sélectionné, sous le tracé. */ .cp-node { cursor: pointer; } .cp-node rect { fill: var(--b-bg); stroke: rgba(var(--b-tan-rgb), 0.5); stroke-width: 1; transition: fill 300ms, stroke 300ms, opacity 300ms; } .cp-node:hover rect, .cp-node:focus-visible rect { fill: var(--b-gold-hi); stroke: var(--b-gold-hi); } .cp-node.on rect { fill: var(--b-gold); stroke: var(--b-gold); } .cp-tip-svg[hidden] { display: none; } .cp-tip-svg { font-size: 13px; fill: var(--b-ink); paint-order: stroke; stroke: var(--b-bg); stroke-width: 5; stroke-linejoin: round; pointer-events: none; } .cp-med { position: relative; z-index: 1; width: min(560px, 100%); margin-top: 2px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; } .cp-med-ar { font-family: 'Amiri', serif; font-size: clamp(34px, 5.2vw, 58px); line-height: 1.5; color: var(--b-gold-hi); animation: cpRise 500ms cubic-bezier(0.22, 1, 0.36, 1); } .cp-med-n { font-size: 10.5px; letter-spacing: 0.3em; color: var(--b-faint); } .cp-med-p { font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--b-gold); margin: 0; } .cp-med-d { font-size: 13.5px; line-height: 1.65; color: var(--b-ink-soft); margin: 4px 0 0; text-wrap: pretty; } .cp-med-nav { display: flex; align-items: center; gap: 8px; margin-top: 12px; } .cp-med-nav button { display: grid; place-items: center; width: 44px; height: 44px; background: var(--b-bg2); border: 1px solid var(--b-line); color: var(--b-mute); cursor: pointer; transition: color 300ms, border-color 300ms, background 300ms; } .cp-med-nav button:hover { color: var(--b-gold); border-color: var(--b-gold); } /* La définition approfondie se lit à la suite, sans rien à déplier : sur cette page c'est le contenu principal, pas un complément. */ .cp-med-deep { width: min(62ch, 100%); margin: 26px auto 0; display: flex; flex-direction: column; align-items: center; text-align: center; animation: cpRise 500ms cubic-bezier(0.22, 1, 0.36, 1); } .cp-med-deep .cp-orn { margin: 0 0 16px; } .cp-med-deep p { margin: 0; font-size: 14.5px; line-height: 1.85; color: var(--b-ink-soft); text-wrap: pretty; } .cp-hint { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--b-faint); text-align: center; margin: 26px 0 0; } @media (max-width: 820px) { .cp-med { width: 100%; } } .cp-allah { display: flex; flex-direction: column; align-items: center; } .cp-allah-stage { position: relative; width: min(600px, 100%); max-height: min(62vh, 540px); aspect-ratio: 1 / 0.62; display: grid; place-items: center; } .cp-allah-stage > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } /* Le mot « الله » est un de 800x800 unités posé dans un viewBox rogné sur la calligraphie : avec `overflow: visible`, il déborde donc largement du cadre — jusque par-dessus le médaillon — et avalait les clics sur les flèches. Il est purement décoratif : on le retire du test de survol. Les crans, eux, gardent leur propre zone cliquable. */ /* Le mot, relevé sur le glyphe plutôt que peint par `fillText` / `strokeText` : ceux-ci traitent chaque sous-tracé, y compris ceux qui se recouvrent, et faisaient apparaître deux boucles au pied des lâm — absentes de la calligraphie. `evenodd` garde l'œil du hâ' creux. */ .cp-allah-trait { fill: rgba(var(--b-goldhi-rgb), 0.05); fill-rule: evenodd; stroke: var(--b-gold); stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: 0.62; pointer-events: none; } .cp-allah-halo { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); width: 74%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(var(--b-goldhi-rgb), 0.1), transparent 66%); pointer-events: none; } .cp-allah .cp-node rect { animation: cpRise 700ms cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: var(--d, 0ms); } @media (max-width: 820px) { .cp-allah-stage { width: 100%; max-height: 52vh; } } /* ══════════════════════════════════════════════════════════════════════════ LE CORAN — sommaire des 114 sourates, et la lecture. Même vocabulaire que le reste de la Coupole : filets dorés, losange en cartouche, arabe en Amiri. La sourate n'est pas une liste de versets mais une page de livre : frontispice, versets au fil, repère dans la marge, barre collante qui dit où l'on en est. Rien n'est masqué au départ. Les pages sont entièrement rendues par le serveur ; ce que `refonte.js` ajoute — la place gardée, les marque-pages, les réglages — se greffe par-dessus et ne conditionne jamais la lecture. ══════════════════════════════════════════════════════════════════════════ */ .qr-read { --qra: 30px; --qrl: 2.05; --qrf: 'Amiri', 'Scheherazade New', serif; position: relative; } .qr-read[data-lead="serre"] { --qrl: 1.7; } /* Deux gravures pour le même texte : Amiri est fine et serrée, Scheherazade plus ample et plus lisible pour qui débute. Le choix vaut pour toute la page — titre, basmale, versets — sinon la lecture change de main en route. */ .qr-read[data-font="scheherazade"] { --qrf: 'Scheherazade New', 'Amiri', serif; } /* La surface « papier » : les jetons ne sont redéfinis que sur la page, donc le chrome du site — en-tête, fil d'Ariane — garde sa nuit. */ .qr-read[data-surface="papier"] { --b-bg: #efe6d5; --b-bg-rgb: 239, 230, 213; --b-bg2: #e9dfca; --b-bg3: #e5d9c1; --b-ink: #211c13; --b-fg: #2b2418; --b-mute: #574e3c; --b-faint: #7a6f57; --b-line: rgba(94, 76, 42, 0.24); --b-gold: #92702e; --b-gold-hi: #75551b; --b-goldhi-rgb: 117, 85, 27; --b-tan-rgb: 146, 112, 46; background: #efe6d5; color: var(--b-ink); } .qr-read[data-surface="papier"] .lattice { opacity: 0.35; } /* La sépia : le même papier, chauffé. C'est la surface d'une longue lecture du soir — moins blanche que le papier, moins noire que la nuit. */ .qr-read[data-surface="sepia"] { --b-bg: #e4d3b4; --b-bg-rgb: 228, 211, 180; --b-bg2: #ddc9a6; --b-bg3: #d7c29c; --b-ink: #2c2010; --b-fg: #382a15; --b-mute: #5f4c2c; --b-faint: #806a45; --b-line: rgba(94, 68, 28, 0.26); --b-gold: #8a6321; --b-gold-hi: #6d4b12; --b-goldhi-rgb: 109, 75, 18; --b-tan-rgb: 138, 99, 33; background: #e4d3b4; color: var(--b-ink); } .qr-read[data-surface="sepia"] .lattice { opacity: 0.3; } /* ─── Sommaire ─── */ .qr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 12px; margin-top: 8px; } .qr-card { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; column-gap: 14px; padding: 14px 16px; border: 1px solid var(--b-line); border-radius: 3px; text-decoration: none; color: inherit; transition: background 320ms, border-color 320ms, transform 320ms; } .qr-card:hover, .qr-card:focus-visible { background: rgba(var(--b-goldhi-rgb), 0.05); border-color: rgba(var(--b-goldhi-rgb), 0.35); transform: translateY(-2px); } /* Le numéro, posé dans son losange — le même cartouche que les chapitres. */ .qr-num { position: relative; display: grid; place-items: center; width: 46px; height: 46px; } .qr-num svg { position: absolute; inset: 0; width: 100%; height: 100%; } .qr-num rect { fill: none; stroke: var(--b-gold); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0.55; } .qr-num b { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 15px; font-weight: 600; color: var(--b-gold); } .qr-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .qr-ar { font-family: 'Amiri', serif; font-size: 19px; line-height: 1.6; color: var(--b-gold-hi); } .qr-latin { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 17px; color: var(--b-fg); } .qr-title { font-size: 12.5px; color: var(--b-faint); } .qr-meta { grid-column: 2; display: flex; gap: 7px; margin-top: 4px; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--b-faint); } /* Les repères posés sur une carte : sourate lue, marque-pages. */ .qr-flag { position: absolute; top: 0; right: 12px; display: flex; gap: 6px; align-items: flex-start; } .qr-flag i { width: 9px; height: 14px; background: var(--b-gold); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%); } .qr-flag b { font-size: 9px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--b-faint); padding-top: 3px; } /* ─── « Ma lecture » : la bande en tête du sommaire ─── */ .qr-mine { max-width: 1080px; margin: 0 auto 34px; } .qr-resume { display: flex; align-items: center; gap: 20px; padding: 20px 22px; border: 1px solid rgba(var(--b-goldhi-rgb), 0.3); background: rgba(var(--b-goldhi-rgb), 0.05); } .qr-resume-ar { font-family: 'Amiri', serif; font-size: 30px; line-height: 1; color: var(--b-gold-hi); flex: none; } .qr-resume-b { flex: 1; min-width: 0; } .qr-resume-k { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--b-gold); } .qr-resume-t { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; color: var(--b-fg); margin: 2px 0 0; } .qr-resume-m { font-size: 12px; color: var(--b-faint); margin: 3px 0 0; } .qr-cta { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; font: inherit; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--b-gold-hi); background: none; border: 1px solid rgba(var(--b-goldhi-rgb), 0.5); text-decoration: none; cursor: pointer; transition: background 260ms; } .qr-cta:hover { background: rgba(var(--b-goldhi-rgb), 0.1); } .qr-marks-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .qr-chip { display: inline-flex; align-items: center; gap: 9px; padding: 7px 12px; font: inherit; font-size: 12.5px; color: var(--b-mute); background: none; border: 1px solid var(--b-line); text-decoration: none; cursor: pointer; transition: color 240ms, border-color 240ms; } .qr-chip:hover { color: var(--b-gold-hi); border-color: rgba(var(--b-goldhi-rgb), 0.45); } .qr-chip b { font-weight: 500; color: var(--b-fg); } .qr-chip i { width: 9px; height: 13px; background: var(--b-gold); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%); } .qr-mine-line { display: flex; align-items: baseline; gap: 10px; margin: 16px 0 0; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--b-faint); } .qr-mine-bar { flex: 1; height: 1px; background: var(--b-line); position: relative; } .qr-mine-bar span { position: absolute; left: 0; top: 0; height: 1px; background: var(--b-gold); } .qr-mine-e { margin: 0; font-size: 13px; line-height: 1.7; color: var(--b-faint); border-left: 1px solid var(--b-line); padding-left: 14px; } /* Le filtre du sommaire : 114 sourates, on ne les parcourt pas à l'œil. */ .qr-find { max-width: 1080px; margin: 0 auto 22px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .qr-find-f { flex: 1 1 280px; position: relative; display: flex; align-items: center; } .qr-find-f svg { position: absolute; left: 12px; color: var(--b-faint); pointer-events: none; } .qr-find-f input { width: 100%; height: 40px; padding: 0 14px 0 38px; font: inherit; font-size: 14px; color: var(--b-fg); background: rgba(var(--b-goldhi-rgb), 0.04); border: 1px solid var(--b-line); border-radius: 2px; } .qr-find-f input:focus-visible { outline: none; border-color: rgba(var(--b-goldhi-rgb), 0.5); } .qr-find-c { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--b-faint); } .qr-card[hidden] { display: none; } .qr-void { max-width: 1080px; margin: 0 auto; font-size: 14px; color: var(--b-faint); } /* ─── Barre de lecture ─── */ .qr-bar { position: sticky; top: calc(var(--cp-head) + var(--cp-crumb)); z-index: 60; display: flex; align-items: center; gap: 12px; padding: 8px 20px; background: rgba(var(--b-bg-rgb), 0.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--b-line); } .qr-bar-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; margin-right: auto; } .qr-bar-t { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 17px; color: var(--b-fg); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qr-bar-p { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--b-faint); } .qr-tools { display: flex; align-items: center; gap: 6px; flex: none; } .qr-tool { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px; font: inherit; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--b-mute); background: none; border: 1px solid var(--b-line); border-radius: 2px; cursor: pointer; transition: color 260ms, border-color 260ms, background 260ms; } .qr-tool:hover, .qr-tool:focus-visible { color: var(--b-gold-hi); border-color: rgba(var(--b-goldhi-rgb), 0.45); } .qr-tool.on { color: var(--b-gold-hi); border-color: rgba(var(--b-goldhi-rgb), 0.5); background: rgba(var(--b-goldhi-rgb), 0.07); } .qr-tool-l { display: inline; } .qr-tool-i { display: none; font-size: 14px; } .qr-pin { width: 9px; height: 13px; background: currentColor; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%); } /* La progression de la sourate : un filet d'or sous la barre. */ .qr-prog { position: absolute; left: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, rgba(var(--b-goldhi-rgb), 0.35), var(--b-gold)); transition: width 140ms linear; } /* ─── Les popovers de la barre ─── */ .qr-pop-wrap { position: relative; } .qr-pop { position: absolute; right: 0; top: calc(100% + 9px); z-index: 70; width: 268px; padding: 16px 16px 14px; background: var(--b-bg3); border: 1px solid var(--b-line); box-shadow: 0 26px 60px rgba(0, 0, 0, 0.38); } .qr-read[data-surface="papier"] .qr-pop { box-shadow: 0 22px 50px rgba(80, 60, 24, 0.22); } .qr-pop-h { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--b-faint); margin: 0 0 9px; } .qr-pop-h + .qr-pop-h { margin-top: 18px; } .qr-seg { display: flex; gap: 6px; } .qr-seg button { flex: 1; height: 32px; font: inherit; font-size: 12px; color: var(--b-mute); background: none; border: 1px solid var(--b-line); cursor: pointer; transition: color 240ms, border-color 240ms, background 240ms; } .qr-seg button.on { color: var(--b-gold-hi); border-color: rgba(var(--b-goldhi-rgb), 0.5); background: rgba(var(--b-goldhi-rgb), 0.08); } .qr-seg button[lang="ar"] { font-family: 'Amiri', serif; } .qr-seg--ar button:nth-child(1) { font-size: 13px; } .qr-seg--ar button:nth-child(2) { font-size: 17px; } .qr-seg--ar button:nth-child(3) { font-size: 21px; } .qr-seg--ar button:nth-child(4) { font-size: 25px; } .qr-jump { display: flex; gap: 6px; } .qr-jump input { flex: 1; min-width: 0; height: 32px; padding: 0 10px; font: inherit; font-size: 14px; color: var(--b-fg); background: rgba(var(--b-goldhi-rgb), 0.05); border: 1px solid var(--b-line); } .qr-jump button { height: 32px; padding: 0 13px; font: inherit; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--b-gold-hi); background: none; border: 1px solid rgba(var(--b-goldhi-rgb), 0.45); cursor: pointer; } .qr-pop-note { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--b-faint); } /* ─── Frontispice de la sourate ─── */ .qr-front { position: relative; max-width: 740px; margin: 0 auto; padding: 52px 34px 42px; text-align: center; border: 1px solid var(--b-line); } .qr-front::before { content: ''; position: absolute; inset: 7px; border: 1px solid var(--b-line); opacity: 0.5; pointer-events: none; } .qr-front-n { font-size: 10.5px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--b-gold); } .qr-front-ar { font-family: 'Amiri', serif; font-size: clamp(38px, 6vw, 62px); font-weight: 400; line-height: 1.5; margin: 6px 0 2px; color: var(--b-gold-hi); } .qr-front-lat { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(24px, 3.4vw, 34px); margin: 0; color: var(--b-fg); } .qr-front-t { margin: 6px 0 0; font-size: 12.5px; letter-spacing: 0.04em; color: var(--b-faint); } .qr-orn { display: block; margin: 18px auto 0; width: 132px; height: 9px; } .qr-orn path, .qr-orn rect { fill: none; stroke: var(--b-gold); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0.7; } /* ─── Le fil des versets ─── */ .qr-basmala { max-width: 740px; margin: 40px auto 8px; padding: 22px 0 30px; text-align: center; font-family: var(--qrf); font-size: clamp(24px, 3.4vw, 34px); line-height: 2; color: var(--b-gold-hi); border-bottom: 1px solid var(--b-line); } .qr-flow { max-width: 740px; margin: 0 auto; padding: 0; list-style: none; } .qr-v { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 16px; padding: 26px 0; scroll-margin-top: calc(var(--cp-head) + var(--cp-crumb) + 78px); transition: background 300ms; } .qr-v + .qr-v { border-top: 1px solid var(--b-line); } .qr-v[data-mark] { background: rgba(var(--b-goldhi-rgb), 0.055); box-shadow: inset 2px 0 0 var(--b-gold); } .qr-v:target { background: rgba(var(--b-goldhi-rgb), 0.09); } /* Le marque-page vit dans la marge : discret tant qu'il n'est pas posé. */ .qr-mk { align-self: start; margin-top: 8px; width: 15px; height: 21px; padding: 0; border: none; background: none; cursor: pointer; } .qr-mk i { display: block; width: 15px; height: 21px; background: currentColor; color: var(--b-faint); opacity: 0.22; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%); transition: opacity 240ms, color 240ms; } .qr-v:hover .qr-mk i, .qr-mk:focus-visible i { opacity: 0.5; } .qr-mk[aria-pressed="true"] i { color: var(--b-gold); opacity: 1; } @media (hover: none) { .qr-mk i { opacity: 0.38; } } .qr-v-b { min-width: 0; grid-column: 2; } .qr-v-ar { margin: 0; font-family: var(--qrf); font-size: var(--qra); line-height: var(--qrl); text-align: right; color: var(--b-fg); direction: rtl; } .qr-read[data-tr="off"] .qr-v { padding: 20px 0; } .qr-read[data-tr="off"] .qr-v-tr { display: none; } /* Le rond de fin de verset, à la manière du moushaf : c'est aussi l'ancre. */ .qr-rose { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; margin: 0 0.3em; font-family: 'Amiri', serif; font-size: 0.46em; line-height: 1; color: var(--b-gold); border: 1px solid rgba(var(--b-goldhi-rgb), 0.45); border-radius: 50%; text-decoration: none; vertical-align: 0.35em; transition: background 240ms, color 240ms; } .qr-rose:hover, .qr-rose:focus-visible { color: var(--b-gold-hi); background: rgba(var(--b-goldhi-rgb), 0.12); } .qr-v-tr { margin: 14px 0 0; font-size: 15px; line-height: 1.8; color: var(--b-mute); max-width: 62ch; } /* La mise en garde sur la lecture : sur sa propre ligne, sinon elle se noie dans le crédit et ne se lit plus. */ .qr-credits-note { display: block; margin-top: 6px; font-style: italic; } /* ─── La lecture : comment l'arabe se prononce ─── Les deux écoles sont rendues ensemble et l'attribut `data-lec` de la page décide laquelle paraît. `display: none` et non une opacité : celle qu'on n'a pas choisie ne doit pas non plus être lue à voix haute. En italique et sans empattement : elle ne se confond pas avec la traduction, qui est une phrase, quand elle n'est qu'un secours de prononciation. */ .qr-v-lec { margin: 11px 0 0; font-family: 'Inter', system-ui, sans-serif; font-style: italic; font-size: 14px; line-height: 1.75; letter-spacing: 0.01em; color: var(--b-gold); max-width: 62ch; opacity: 0.9; } .qr-lec-mid { max-width: none; text-align: center; margin: 12px auto 0; } .qr-read [data-lec-tr], .qr-read [data-lec-la] { display: none; } .qr-read[data-lec="tr"] [data-lec-tr] { display: block; } .qr-read[data-lec="la"] [data-lec-la] { display: block; } /* ─── La concentration ─── Tout ce qui n'est pas le texte s'efface : le fil d'Ariane, la barre, la marge du marque-page. On sort par Échap, et le bouton de sortie reste — sinon on serait enfermé sans souris. */ .qr-read[data-focus="1"] .qr-bar, .qr-read[data-focus="1"] .cp-crumb, .qr-read[data-focus="1"] .qr-mk { opacity: 0; pointer-events: none; } .qr-read[data-focus="1"] .qr-bar, .qr-read[data-focus="1"] .cp-crumb, .qr-read[data-focus="1"] .qr-mk { transition: opacity 400ms ease; } .qr-read[data-focus="1"] .qr-flow { max-width: 640px; } .qr-sortie { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 60; display: none; } .qr-read[data-focus="1"] .qr-sortie { display: inline-flex; } @media (prefers-reduced-motion: reduce) { .qr-read[data-focus="1"] .qr-bar, .qr-read[data-focus="1"] .cp-crumb, .qr-read[data-focus="1"] .qr-mk { transition: none; } } /* ─── Fin de sourate ─── */ .qr-end { max-width: 740px; margin: 54px auto 0; padding: 34px 0 0; border-top: 1px solid var(--b-line); text-align: center; } .qr-end-l { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--b-faint); margin: 0 0 16px; } .qr-end-a { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; } .qr-end .qr-tool { text-decoration: none; } /* ─── Tiroir : la place gardée et les marque-pages ─── */ .qr-veil { position: fixed; inset: 0; z-index: 150; background: rgba(0, 0, 0, 0.5); border: none; animation: qrFade 260ms ease both; } .qr-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 160; width: min(390px, 88vw); display: flex; flex-direction: column; background: var(--b-bg3); border-left: 1px solid var(--b-line); animation: qrSlide 340ms cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes qrFade { from { opacity: 0; } to { opacity: 1; } } @keyframes qrSlide { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } } .qr-drawer-h { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--b-line); } .qr-drawer-h h2 { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 21px; font-weight: 600; color: var(--b-fg); } .qr-drawer-h button { margin-left: auto; background: none; border: none; color: var(--b-mute); cursor: pointer; padding: 4px; } .qr-drawer-b { overflow-y: auto; padding: 8px 0 26px; } .qr-drawer-s { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--b-faint); padding: 18px 18px 8px; margin: 0; } .qr-line { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 18px; font: inherit; text-align: left; background: none; border: none; border-top: 1px solid var(--b-line); color: inherit; text-decoration: none; cursor: pointer; transition: background 240ms; } .qr-line:hover { background: rgba(var(--b-goldhi-rgb), 0.06); } .qr-line-n { flex: none; width: 30px; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 14px; color: var(--b-gold); } .qr-line-b { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; } .qr-line-t { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 16.5px; color: var(--b-fg); } .qr-line-m { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--b-faint); } .qr-line-x { flex: none; padding: 6px; background: none; border: none; color: var(--b-faint); cursor: pointer; } .qr-line-x:hover { color: var(--b-gold-hi); } .qr-drawer-e { padding: 22px 18px; margin: 0; font-size: 13px; line-height: 1.65; color: var(--b-faint); } /* ─── D'une sourate à l'autre ─── */ .qr-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 740px; margin: 46px auto 0; padding-top: 26px; border-top: 1px solid var(--b-line); } .qr-nav-a { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; border: 1px solid var(--b-line); border-radius: 3px; font-size: 13px; color: inherit; text-decoration: none; transition: border-color 300ms, background 300ms; } .qr-nav-a:hover, .qr-nav-a:focus-visible { border-color: rgba(var(--b-goldhi-rgb), 0.4); background: rgba(var(--b-goldhi-rgb), 0.05); } .qr-nav-all { font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--b-faint); text-decoration: none; } .qr-nav-all:hover, .qr-nav-all:focus-visible { color: var(--b-gold); } /* ─── Le crédit des éditions : discret, mais toujours présent ─── */ .qr-credits { max-width: 740px; margin: 34px auto 0; font-size: 11.5px; line-height: 1.7; text-align: center; color: var(--b-faint); } .qr-credits a { color: inherit; text-underline-offset: 3px; } .qr-credits a:hover { color: var(--b-gold); } @media (max-width: 700px) { .qr-grid { grid-template-columns: 1fr; } .qr-bar { padding: 7px 12px; gap: 8px; } .qr-tool-l { display: none; } .qr-tool-i { display: inline; } .qr-tool { padding: 0; width: 32px; justify-content: center; } .qr-end .qr-tool { width: auto; padding: 0 12px; } .qr-end .qr-tool .qr-tool-l { display: inline; } .qr-bar-t { font-size: 15.5px; } .qr-front { padding: 38px 18px 32px; } .qr-v { grid-template-columns: 20px minmax(0, 1fr); column-gap: 11px; } .qr-read { --qra: 25px; } .qr-v-tr { font-size: 14.5px; } .qr-v-lec { font-size: 13.5px; } .qr-resume { flex-wrap: wrap; gap: 14px; padding: 16px; } .qr-cta { width: 100%; justify-content: center; } .qr-pop { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; } .qr-nav { flex-direction: column; align-items: stretch; text-align: center; } .qr-nav-a { justify-content: center; } .qr-nav-next { flex-direction: row-reverse; } } /* Le hero sans horaires : le fournisseur Diyanet n'a pas répondu. Le titre reste un titre — la structure de la page ne dépend pas d'une API tierce — il dit seulement autre chose, et sans compte à rebours en dessous. */ /* Mesure en rem et non en `ch` : `ch` se calcule sur la police du `h1`, pas sur celle du `span` qui porte le texte — on obtenait cinq lignes géantes. */ .bhero-vide { max-width: 30rem; } .bhero-vide > span { font-size: clamp(19px, 2vw, 25px); font-weight: 500; line-height: 1.35; opacity: 0.92; } .bhero-vide small { display: block; margin-top: 14px; font-family: 'Inter', system-ui, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.6; letter-spacing: 0; opacity: 0.7; } /* ══════════════════════════════════════════════════════════════════════════ KERAHAT VAKTI — les trois moments où la prière est déconseillée. Le hero ne change pas de nature : il s'habille. Un liseré cuivré en haut, un voile chaud, un cartouche qui nomme le créneau et dit quand il finit. L'astre et le compte à rebours virent au cuivre — c'est le soleil qui est en cause, il fallait que ça se voie sur lui. L'état est porté par `data-kerahat` sur la section : le serveur le pose au rendu, `refonte.js` le change aux bascules. Rien ici ne dépend du script. ══════════════════════════════════════════════════════════════════════════ */ .hk-top { position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 6; pointer-events: none; background: linear-gradient(90deg, transparent, #D68A4A 20%, #F0C68E 50%, #D68A4A 80%, transparent); opacity: 0.9; animation: hkGlow 4s ease-in-out infinite; } .hk-veil { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse 70% 40% at 50% 0%, rgba(214, 138, 74, 0.2), transparent 70%); } @keyframes hkGlow { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } .hk-slot:empty { display: none; } .hk-band { display: inline-flex; align-items: center; gap: 16px; margin-top: 22px; padding: 12px 22px; border: 1px solid rgba(214, 138, 74, 0.5); background: linear-gradient(100deg, rgba(214, 138, 74, 0.22), rgba(214, 138, 74, 0.06)), rgba(8, 17, 15, 0.62); backdrop-filter: blur(6px); color: #F6DFC3; text-align: left; animation: hkPulse 3.6s ease-in-out infinite; } @keyframes hkPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(214, 138, 74, 0.3); border-color: rgba(214, 138, 74, 0.5); } 50% { box-shadow: 0 0 30px 2px rgba(214, 138, 74, 0.22); border-color: rgba(240, 198, 142, 0.75); } } .hk-ico { flex: none; color: #F0C68E; } .hk-b { min-width: 0; } .hk-tr { display: block; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; font-weight: 600; line-height: 1.1; letter-spacing: 0.01em; } .hk-fr { display: block; font-size: 12px; line-height: 1.5; color: rgba(246, 223, 195, 0.76); margin-top: 3px; } /* Ce qui reste permis : c'est la question qu'on se pose vraiment. */ .hk-note { display: block; font-size: 11.5px; line-height: 1.5; color: rgba(246, 223, 195, 0.58); margin-top: 4px; } .hk-fin { flex: none; padding-left: 16px; border-left: 1px solid rgba(214, 138, 74, 0.4); font-size: 11.5px; line-height: 1.5; color: rgba(246, 223, 195, 0.8); white-space: nowrap; } .hk-fin b { display: block; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 17px; font-weight: 600; color: #F0C68E; font-variant-numeric: tabular-nums; } /* L'astre et le compte à rebours prennent le cuivre : c'est le soleil qui est en cause. */ [data-kerahat] .bhero-sun { background: radial-gradient(circle at 38% 35%, #F7DDA8, #D68A4A); box-shadow: 0 0 60px 18px rgba(214, 138, 74, 0.45); } [data-kerahat] .bhero-count { color: #F0C68E; text-shadow: 0 4px 60px rgba(214, 138, 74, 0.45); } [data-kerahat] .bhero-sun, [data-kerahat] .bhero-count { transition: color 900ms ease, background 900ms ease, box-shadow 900ms ease; } /* Les trois créneaux, sur la page des horaires. */ .hk-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; } .hk-row { display: flex; align-items: baseline; gap: 12px; flex: 1 1 240px; padding: 12px 16px; border: 1px solid var(--b-line); border-radius: 3px; } .hk-row[data-on] { border-color: rgba(214, 138, 74, 0.55); background: rgba(214, 138, 74, 0.08); } .hk-row-t { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 17px; color: var(--b-fg); } .hk-row-h { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--b-gold); white-space: nowrap; } .hk-row-f { display: block; font-size: 12px; color: var(--b-faint); margin-top: 2px; } @media (prefers-reduced-motion: reduce) { .hk-band, .hk-top { animation: none; } } @media (max-width: 640px) { .hk-band { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 18px; } .hk-fin { padding-left: 0; border-left: none; border-top: 1px solid rgba(214, 138, 74, 0.35); padding-top: 9px; width: 100%; } .hk-tr { font-size: 19px; } } /* ══════════════════════════════════════════════════════════════════════════ LA VILLE, CHOISIE DEPUIS LE HERO. Le nom de ville de la ligne de date devient un bouton : tout le hero suit — horaires, compte à rebours, kerahat, phase du ciel — puisque tout part de la ville résolue par le serveur. C'est un

et non un panneau piloté par le script : sans JavaScript, il s'ouvre quand même et chaque ville est un lien. Le script n'ajoute que le champ de filtre, inutile sans lui. ══════════════════════════════════════════════════════════════════════════ */ .hv { position: relative; display: inline-flex; } .hv > summary { list-style: none; } .hv > summary::-webkit-details-marker { display: none; } .hv-btn { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; background: rgba(245, 239, 227, 0.04); border: 1px solid rgba(217, 194, 154, 0.26); color: inherit; font: inherit; font-size: 12.5px; cursor: pointer; transition: border-color 240ms ease, background 240ms ease, color 240ms ease; } .hv-btn:hover { border-color: rgba(217, 194, 154, 0.6); background: rgba(217, 194, 154, 0.1); color: #F5EFE3; } .hv-btn svg { transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1); opacity: 0.75; } .hv[open] .hv-btn { border-color: rgba(217, 194, 154, 0.6); } .hv[open] .hv-btn svg:last-child { transform: rotate(180deg); } .hv-pop { position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%); width: 280px; max-height: 320px; overflow: auto; padding: 10px; background: rgba(5, 13, 14, 0.95); backdrop-filter: blur(18px); border: 1px solid rgba(217, 194, 154, 0.24); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); text-align: left; z-index: 40; } .hv-search { width: 100%; box-sizing: border-box; padding: 9px 11px; margin-bottom: 6px; background: rgba(245, 239, 227, 0.06); border: 1px solid rgba(217, 194, 154, 0.2); color: #F5EFE3; font: inherit; font-size: 13px; } .hv-search::placeholder { color: rgba(245, 239, 227, 0.4); } .hv-search:focus { outline: none; border-color: #CDA464; background: rgba(245, 239, 227, 0.09); } .hv-hint { padding: 8px 10px 6px; font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(217, 194, 154, 0.5); } .hv-item { display: block; width: 100%; padding: 8px 10px; background: none; border: none; color: rgba(245, 239, 227, 0.82); font: inherit; font-size: 13px; text-align: left; text-decoration: none; cursor: pointer; transition: background 180ms ease, color 180ms ease; } .hv-item:hover, .hv-item:focus-visible { background: rgba(217, 194, 154, 0.1); color: #F5EFE3; } .hv-item.on { color: #E9CF9F; background: rgba(217, 194, 154, 0.07); } .hv-item[hidden] { display: none; } .hv-empty { padding: 12px 10px; font-size: 12.5px; color: rgba(245, 239, 227, 0.5); } @media (max-width: 520px) { .hv-pop { width: min(280px, 86vw); } } /* ─────────────── Sobriété du mouvement ─────────────── */ @media (prefers-reduced-motion: reduce) { .cp-bay-svg path, .cp-chap[data-in] .cp-chap-arch path, .cp-card[open] .cp-orn path, .cp-card[open] .cp-orn rect, .cp-med-ar, .cp-med-deep, .cp-fold, .cp-allah .cp-node rect { animation: none !important; } .cp-body.cp-armed .cp-card { opacity: 1; transform: none; transition: none; } .cp-bay-in, .cp-bay:hover .cp-bay-in { transition: none; transform: none; } } /* ══════════════════════════════════════════════════════════════════════════ LE DÉCOR DES SAISONS — Ramadan, les nuits bénies, les fêtes. Le principe de la maquette : on ne change pas le site, on pose une couche par-dessus. Le ciel vivant du hero reste ce qu'il est ; la saison lui ajoute sa teinte, ses lanternes et son mot. Hors saison, il ne reste rien — aucune de ces règles ne s'applique, puisque aucun `.sa-*` n'est rendu. Trois règles tenues d'un bout à l'autre : — le ciel vivant reste maître, la saison le teinte, elle ne le remplace pas ; — rien ne clignote : les lueurs respirent sur trois à sept secondes ; — l'or et le vert de la maison suffisent, aucune couleur nouvelle. La palette arrive par variables (`--sa-or`, `--sa-or-clair`, `--sa-teinte`), posées par le gabarit depuis `seasons.py`. Les valeurs de repli ci-dessous sont l'or courant du site : une saison sans palette reste présentable. ══════════════════════════════════════════════════════════════════════════ */ /* ─── Le liseré : un filet d'or en haut de chaque page, avec le nom du jour ─── */ .sa-lisere { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 900; pointer-events: none; background: linear-gradient(90deg, transparent, var(--sa-or, #CDA464) 12%, var(--sa-or-clair, #E9CF9F) 50%, var(--sa-or, #CDA464) 88%, transparent); opacity: 0.9; } .sa-lisere::after { content: ''; position: absolute; top: 3px; left: 0; right: 0; height: 14px; background: linear-gradient(180deg, rgba(205, 164, 100, 0.16), transparent); } .sa-motif { position: fixed; top: 3px; left: 50%; transform: translateX(-50%); z-index: 900; pointer-events: none; display: flex; align-items: center; gap: 7px; padding: 4px 18px 6px; /* Plaque sombre : l'or clair du liseré suppose un fond nocturne, or ce cartouche traverse aussi les pages crème. Il porte donc son propre fond. */ background: linear-gradient(180deg, rgba(6, 17, 15, 0.9), rgba(6, 17, 15, 0.72)); border: 1px solid rgba(205, 164, 100, 0.3); border-top: none; border-radius: 0 0 3px 3px; } .sa-motif i { width: 4px; height: 4px; transform: rotate(45deg); background: var(--sa-or, #CDA464); opacity: 0.75; } .sa-motif span { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sa-or-clair, #E9CF9F); } /* Le motif du liseré pend au centre, là où le header a sa navigation : en saison, le header descend de la hauteur du motif. Sans ça, le nom de la saison se poserait sur les liens. */ [data-saison] .b-header-in { padding-top: 24px; } /* ─── La teinte : le hero prend la couleur de la saison, sans se voiler ─── */ .sa-teinte { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse 70% 50% at 50% 42%, var(--sa-teinte, transparent), transparent 72%); } /* ─── L'arche : le mihrab en filet d'or autour du compte à rebours ─── */ .sa-arche { position: absolute; left: 50%; top: 50%; width: min(760px, 90vw); pointer-events: none; z-index: 3; transform: translate(-50%, -50%); animation: saArche 2600ms cubic-bezier(0.22, 1, 0.36, 1) 400ms both; } @keyframes saArche { from { opacity: 0; transform: translate(-50%, -46%) scale(0.97); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } .sa-arche path, .sa-arche line, .sa-arche circle, .sa-arche rect { vector-effect: non-scaling-stroke; } /* ─── Les lanternes : suspendues, elles oscillent à peine ─── */ .sa-fanous { position: absolute; top: 0; pointer-events: none; z-index: 3; color: var(--sa-or-clair, #E9CF9F); transform-origin: 50% 0; animation: saBalance var(--sa-dur, 7s) ease-in-out var(--sa-delai, 0s) infinite; } @keyframes saBalance { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } } .sa-fil { width: 1px; margin: 0 auto; background: linear-gradient(180deg, rgba(205, 164, 100, 0.55), rgba(205, 164, 100, 0.22)); } .sa-corps { filter: drop-shadow(0 0 18px rgba(233, 207, 159, 0.34)); } .sa-lueur { animation: saLueur var(--sa-lueur, 4.5s) ease-in-out infinite; } @keyframes saLueur { 0%, 100% { opacity: 0.62; } 50% { opacity: 1; } } /* ─── La guirlande : un fil de lumières d'un bord à l'autre ─── */ /* Elle passe derrière le header, qui peint par-dessus : un fil tendu en haut de la page, pas devant les liens. Ne pas la décaler d'une hauteur de header fixe — celle-ci double quand la navigation passe sur deux lignes. */ .sa-guirlande { position: absolute; left: 0; right: 0; top: 0; height: 64px; pointer-events: none; z-index: 3; } .sa-guirlande circle { animation: saLueur 3.4s ease-in-out infinite; } /* ─── Poussière d'or : très lente, très discrète — jamais du clignotant ─── */ .sa-poussiere { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; } .sa-poussiere i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: rgba(233, 207, 159, 0.7); animation: saMonte var(--sa-d, 22s) linear var(--sa-t, 0s) infinite; } @keyframes saMonte { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 0.8; } 88% { opacity: 0.5; } 100% { transform: translateY(-72vh); opacity: 0; } } /* ─── Le mot arabe de la saison, au-dessus du compte à rebours ─── */ .sa-mot { font-family: 'Amiri', 'Scheherazade New', serif; font-size: clamp(26px, 4vw, 42px); color: var(--sa-or-clair, #E9CF9F); opacity: 0.92; direction: rtl; line-height: 1.4; text-shadow: 0 2px 30px rgba(205, 164, 100, 0.4); } /* ─── Le bandeau, à la place de la ligne de date ─── */ .sa-bandeau { display: inline-flex; align-items: center; gap: 14px; padding: 9px 22px; border: 1px solid rgba(205, 164, 100, 0.34); background: rgba(205, 164, 100, 0.09); backdrop-filter: blur(3px); color: var(--sa-or-clair, #E9CF9F); } .sa-bandeau b { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 19px; font-weight: 600; letter-spacing: 0.01em; } .sa-bandeau i { width: 5px; height: 5px; transform: rotate(45deg); background: var(--sa-or, #CDA464); flex: none; } .sa-bandeau span { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.78; } /* L'astre et le compte à rebours prennent l'or de la saison — comme le kerahat prend le cuivre. Le kerahat passe devant : quand les deux tombent ensemble, c'est l'avertissement qui doit se voir, pas la fête. */ [data-saison] .bhero-count { color: var(--sa-or-clair, #E9CF9F); text-shadow: 0 4px 60px var(--sa-teinte, transparent); } [data-saison] .bhero-moon { filter: drop-shadow(0 0 40px var(--sa-teinte, transparent)); } [data-saison][data-kerahat] .bhero-count { color: #F0C68E; text-shadow: 0 4px 60px rgba(214, 138, 74, 0.45); } @media (prefers-reduced-motion: reduce) { .sa-fanous, .sa-lueur, .sa-guirlande circle, .sa-poussiere i { animation: none; } .sa-arche { animation: none; opacity: 1; } } @media (max-width: 760px) { .sa-arche { width: 104vw; } /* Sur un écran étroit la lanterne du milieu tombe sur le compte à rebours. */ .sa-fanous[data-cote="centre"] { display: none; } .sa-motif span { font-size: 10px; letter-spacing: 0.16em; } .sa-bandeau { gap: 10px; padding: 8px 16px; } .sa-bandeau b { font-size: 17px; } } /* ══════════════════════════════════════════════════════════════════════════ MON ESPACE — le dossier de la famille. L'espace parent était une liste de liens ; il devient un dossier. Une plaque de profil en tête, des cartouches de synthèse, puis une arcade de navigation rangée par sujet — la famille, l'association, le compte. Chaque section porte un sceau : une icône au trait, un sur-titre, un titre, un mot arabe, et un filet ornemental qui lui est propre. C'est ce qui donne à chaque page son thème sans la faire sortir de la maison. Rien ici ne dépend du script : ce sont des liens, des formulaires et des `

`. Tout se pose sur les jetons existants — aucune couleur nouvelle. ══════════════════════════════════════════════════════════════════════════ */ .es-wrap { position: relative; max-width: 980px; margin: 0 auto; } .es-wrap--narrow { max-width: 760px; } .es-sec { margin-top: 52px; } .es-note { font-size: 12.5px; color: var(--b-mute); line-height: 1.7; margin: 0; } /* ─── Le retour vers le portail ─── */ .es-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--b-gold-soft); text-decoration: none; transition: color 220ms ease, gap 220ms ease; } .es-back:hover { color: var(--b-gold-hi); gap: 12px; } /* ─── Le sceau de section ─── */ .es-seal { display: flex; align-items: center; gap: 15px; margin-bottom: 14px; } .es-seal-ico { flex: none; width: 48px; height: 48px; display: grid; place-items: center; color: var(--b-gold); border: 1px solid rgba(var(--b-goldhi-rgb), 0.32); background: rgba(var(--b-goldhi-rgb), 0.05); /* L'octogone : la forme de la maison, reprise du sceau des arches. */ clip-path: polygon(26% 0, 74% 0, 100% 26%, 100% 74%, 74% 100%, 26% 100%, 0 74%, 0 26%); } .es-seal-txt { min-width: 0; } .es-seal-k { display: block; font-size: 9.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--b-gold-soft); margin-bottom: 5px; } .es-seal-t { display: block; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 26px; font-weight: 600; line-height: 1.05; color: var(--b-ink); } .es-seal-ar { margin-left: auto; flex: none; font-family: 'Amiri', 'Scheherazade New', serif; font-size: 26px; color: var(--b-gold); opacity: 0.42; line-height: 1; } /* Le filet : un motif propre à chaque section, carrelé pour garder ses proportions quelle que soit la largeur. */ .es-filet { display: block; width: 100%; height: 13px; margin: 0 0 24px; opacity: 0.6; } /* ─── Les cartes ─── */ .es-card { position: relative; border: 1px solid var(--b-line); background: rgba(var(--b-ink-rgb), 0.02); padding: 22px 24px; } .es-card--gold { border-color: rgba(var(--b-goldhi-rgb), 0.3); background: linear-gradient(152deg, rgba(var(--b-bronze-rgb), 0.15), rgba(var(--b-bronze-rgb), 0.03) 56%, rgba(var(--b-ink-rgb), 0.02)); } .es-corner { position: absolute; color: var(--b-gold); opacity: 0.5; pointer-events: none; } .es-corner--tl { top: 6px; left: 6px; } .es-corner--br { bottom: 6px; right: 6px; transform: rotate(180deg); } .es-cardtitle { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 21px; font-weight: 600; margin: 0 0 6px; color: var(--b-ink); } /* ─── L'avatar en ogive : la forme d'une arche, pas d'un rond ─── */ .es-ava { flex: none; display: grid; place-items: center; width: 70px; height: 76px; border: 1px solid rgba(var(--b-goldhi-rgb), 0.42); border-radius: 50% 50% 3px 3px / 62% 62% 3px 3px; background: rgba(var(--b-goldhi-rgb), 0.1); color: var(--b-gold-hi); font-family: 'Cormorant Garamond', Georgia, serif; font-size: 25px; font-weight: 600; letter-spacing: 0.03em; } .es-ava--s { width: 46px; height: 50px; font-size: 17px; } /* ─── La plaque de profil ─── */ .es-plaque { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; padding: 26px 28px; } .es-plaque-name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 31px; font-weight: 600; line-height: 1.05; color: var(--b-ink); } .es-plaque-mail { font-size: 13px; color: var(--b-mute); margin: 5px 0 0; word-break: break-word; } .es-plaque-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; align-items: center; } .es-plaque-tags .b-pill { white-space: nowrap; } .es-medaille { flex: none; width: 96px; height: 96px; display: grid; place-items: center; text-align: center; color: var(--b-gold-hi); border: 1px solid rgba(var(--b-goldhi-rgb), 0.34); border-radius: 50%; background: radial-gradient(circle at 50% 40%, rgba(var(--b-bronze-rgb), 0.2), rgba(var(--b-bronze-rgb), 0.04)); } .es-medaille b { display: block; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; font-weight: 600; line-height: 1; } .es-medaille span { display: block; font-size: 8px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--b-gold-soft); margin-top: 4px; } /* ─── Les cartouches de synthèse ─── */ .es-stats { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--b-line); margin-top: 14px; } .es-stat { padding: 19px 22px; border-right: 1px solid var(--b-line); min-width: 0; } .es-stat:last-child { border-right: none; } .es-stat-k { font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--b-gold-soft); } .es-stat-v { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 27px; font-weight: 600; color: var(--b-gold-hi); line-height: 1.15; margin-top: 7px; } .es-stat-n { font-size: 12px; color: var(--b-mute); margin-top: 3px; } /* ─── L'arcade de navigation ─── */ .es-grouphead { display: flex; align-items: center; gap: 14px; margin: 40px 0 14px; } .es-grouphead-t { font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--b-gold-soft); white-space: nowrap; } .es-grouphead-l { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(var(--b-tan-rgb), 0.35), transparent); } .es-navgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(292px, 1fr)); gap: 12px; } .es-navcard { display: flex; align-items: center; gap: 15px; width: 100%; text-align: left; padding: 17px 19px; border: 1px solid var(--b-line); background: rgba(var(--b-ink-rgb), 0.02); color: inherit; text-decoration: none; transition: border-color 260ms ease, background 260ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1); } .es-navcard:hover { border-color: rgba(var(--b-goldhi-rgb), 0.5); background: rgba(var(--b-goldhi-rgb), 0.06); transform: translateY(-2px); } .es-navcard-ico { flex: none; color: var(--b-gold); opacity: 0.85; } .es-navcard-b { min-width: 0; flex: 1; } .es-navcard-t { display: block; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 19.5px; font-weight: 600; line-height: 1.15; color: var(--b-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .es-navcard-s { display: block; font-size: 12px; color: var(--b-mute); margin-top: 3px; line-height: 1.5; } .es-navcard-r { flex: none; display: flex; align-items: center; gap: 8px; } .es-navcard-arrow { color: var(--b-gold); transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1); } .es-navcard:hover .es-navcard-arrow { transform: translateX(4px); } .es-count { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: rgba(var(--b-goldhi-rgb), 0.16); color: var(--b-gold-hi); } .es-tag { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 9px; border: 1px solid rgba(180, 90, 40, 0.5); color: #C87A4A; white-space: nowrap; } @media (prefers-reduced-motion: reduce) { .es-navcard, .es-navcard-arrow, .es-back { transition: none; } .es-navcard:hover { transform: none; } } @media (max-width: 760px) { .es-plaque { grid-template-columns: auto 1fr; gap: 16px; padding: 22px 20px; } /* La médaille passe sous le nom : à trois colonnes, elle écrasait l'e-mail. */ .es-medaille { grid-column: 1 / -1; justify-self: start; width: auto; height: auto; border-radius: 0; border: none; background: none; place-items: start; text-align: left; } .es-medaille b { font-size: 17px; } .es-plaque-name { font-size: 25px; } .es-stats { grid-template-columns: 1fr; } .es-stat { border-right: none; border-bottom: 1px solid var(--b-line); } .es-stat:last-child { border-bottom: none; } } @media (max-width: 560px) { .es-seal-ar { display: none; } .es-seal-t { font-size: 22px; } }