/* ============================================================================ Somnologs — calm clinical-modern, dark. Flat midnight grounds, one confident grotesque, even surfaces. No aurora, no starfield, no gradient blobs. Hierarchy comes from weight + space. Type: General Sans (self-hosted, Innovator-Grotesk-adjacent), one family. ========================================================================== */ /* Self-hosted so there is no third-party font CDN at runtime. Files vendored under /fonts/general-sans/ (copied verbatim by the build, like Leaflet). */ @font-face { font-family: 'General Sans'; src: url('/fonts/general-sans/general-sans-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'General Sans'; src: url('/fonts/general-sans/general-sans-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'General Sans'; src: url('/fonts/general-sans/general-sans-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'General Sans'; src: url('/fonts/general-sans/general-sans-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } :root { /* Grounds */ --ink: #0c1322; --ink-2: #111a2d; --panel: #12162400; --panel-solid: #141829; --panel-2: #1a1f33; --line: rgba(233, 235, 247, 0.09); --line-strong: rgba(233, 235, 247, 0.16); /* Ink + accents */ --cream: #F9F7F2; --text: #e7e9f3; --muted: #969cb7; --muted-2: #7e84a1; /* AA on --ink (~5.3:1); the old #6f7591 was 4.36:1 */ --indigo: #5b67ca; --indigo-bright: #8b95ec; --indigo-deep: #3a4391; --teal: #5fd0a3; --amber: #e9ab4d; --rose: #ef8f7d; --radius: 10px; --radius-lg: 10px; --maxw: 1180px; /* One grotesque for the whole site; hierarchy lives in weight + size. */ --font-display: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* One surface + one shadow recipe, reused by every card (no per-card gradient). */ --surface: rgba(255, 255, 255, 0.024); --surface-2: rgba(var(--ovl), 0.04); --surface-strong: #141829; --shadow-sm: 0 1px 2px rgba(4, 6, 12, 0.4), 0 8px 24px -16px rgba(4, 6, 12, 0.7); --shadow-lg: 0 24px 60px -28px rgba(4, 6, 12, 0.85); /* Theme-aware tokens. --ovl is the overlay tint channel: a white film over the dark ground here, flipped to a dark film over the light ground below. The header/footer/menu surfaces and the link-hover colour also flip per theme. */ --ovl: 255, 255, 255; --header-bg: rgba(12, 19, 34, 0.6); --nav-drop-bg: rgba(14, 21, 38, 0.97); --link-hover: #aab2f3; /* Filled check, masked so its colour follows `background-color`. Replaces the decorative ✦ bullets across ticks / consult points. */ --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E"); --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* Light theme — same token structure, grounds inverted. Dark stays the default (:root above); these overrides apply only when the visitor opts into light (data-theme="light" set on by the no-flash init + theme-toggle.js). */ :root[data-theme='light'] { --ink: #f4f6fb; --ink-2: #e9edf6; --panel: #ffffff00; --panel-solid: #ffffff; --panel-2: #eef1f8; --line: rgba(18, 27, 48, 0.1); --line-strong: rgba(18, 27, 48, 0.17); --cream: #131a2c; --text: #2b3248; --muted: #585f7c; --muted-2: #61678a; --indigo: #4f57c2; --indigo-bright: #4a52c4; --indigo-deep: #3a4391; --teal: #2f9e76; --amber: #b07916; --rose: #c9594a; --surface: rgba(18, 27, 48, 0.025); --surface-2: rgba(18, 27, 48, 0.05); --surface-strong: #ffffff; --shadow-sm: 0 1px 2px rgba(18, 27, 48, 0.06), 0 10px 26px -18px rgba(18, 27, 48, 0.22); --shadow-lg: 0 28px 60px -30px rgba(18, 27, 48, 0.26); --ovl: 18, 27, 48; --header-bg: rgba(244, 246, 251, 0.72); --nav-drop-bg: rgba(248, 250, 253, 0.98); --link-hover: #3a41ab; } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-size: 18px; line-height: 1.65; color: var(--text); background: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* Flat midnight ground. The whole page sits on one solid tone; depth comes from surfaces and spacing, not from glows. */ body { background: var(--ink); } ::selection { background: rgba(139, 149, 236, 0.35); color: #fff; } a { color: var(--indigo-bright); text-decoration: none; } a:hover { color: var(--link-hover); } /* Keyboard focus ring (mouse clicks stay clean via :focus-visible) */ :focus-visible { outline: 2px solid var(--indigo-bright); outline-offset: 3px; border-radius: 10px; } .btn:focus-visible { outline-offset: 4px; } img { max-width: 100%; height: auto; display: block; } /* Typography ---------------------------------------------------------------- */ h1, h2, h3 { font-family: var(--font-display); color: var(--cream); font-weight: 500; letter-spacing: -0.025em; line-height: 1.05; margin: 0 0 0.6em; text-wrap: balance; } h1 { font-size: clamp(2.3rem, 5.2vw, 4rem); font-weight: 600; } h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); } h3 { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.015em; } em { font-style: italic; } .ital { font-style: normal; } /* ---- Hand-drawn marker marks on key words ------------------------------- A rough brush stroke under a word (.mark-underline) or a translucent highlighter band behind it (.mark-highlight). The shape is a mask, so a flat brand colour shows through and stays recolourable via --mark-color. It draws itself on (clip-path wipe, left -> right) when its section reveals / loads. The brush is a procedural data-URI (dry-marker edges via SVG turbulence). No-JS keeps the mark fully drawn (static); only .js hides it pre-animation. */ .mark { position: relative; white-space: nowrap; --mark-color: var(--indigo-bright); } .mark-teal { --mark-color: var(--teal); } /* Own stacking context so the highlight band sits behind the word's glyphs but still above the section background. */ .mark-highlight { isolation: isolate; } .mark-underline::after, .mark-highlight::before { content: ''; position: absolute; pointer-events: none; background-color: var(--mark-color); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; clip-path: inset(0 -2% 0 0); /* fully drawn — no-JS / reduced-motion fallback */ } .mark-underline::after { left: -0.06em; right: -0.06em; bottom: -0.13em; height: 0.32em; } .mark-highlight::before { left: -0.16em; right: -0.16em; top: 0.04em; bottom: 0; z-index: -1; opacity: 0.42; } /* Technique A — procedural data-URI brush (dry-marker edges via turbulence) */ .mark-underline::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16' preserveAspectRatio='none'%3E%3Cfilter id='r' x='-6%25' y='-50%25' width='112%25' height='200%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8 0.55' numOctaves='2' seed='7' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='5' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Cpath d='M5 9 C 32 5 56 12 82 8 S 112 6 116 9' fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round' filter='url(%23r)'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16' preserveAspectRatio='none'%3E%3Cfilter id='r' x='-6%25' y='-50%25' width='112%25' height='200%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8 0.55' numOctaves='2' seed='7' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='5' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Cpath d='M5 9 C 32 5 56 12 82 8 S 112 6 116 9' fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round' filter='url(%23r)'/%3E%3C/svg%3E"); } .mark-highlight::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cfilter id='h' x='-4%25' y='-15%25' width='108%25' height='130%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.03 0.5' numOctaves='2' seed='3' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='8' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='3' y='6' width='94' height='28' rx='5' fill='%23000' filter='url(%23h)'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cfilter id='h' x='-4%25' y='-15%25' width='108%25' height='130%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.03 0.5' numOctaves='2' seed='3' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='8' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='3' y='6' width='94' height='28' rx='5' fill='%23000' filter='url(%23h)'/%3E%3C/svg%3E"); } /* Hidden pre-animation only for marks inside an animatable container, and only with JS. Marks elsewhere (faq title, listing h1s, narrow pages) keep the drawn fallback above and simply render static — never stuck hidden. */ .js .reveal .mark-underline::after, .js .reveal .mark-highlight::before, .js .p-reveal .mark-underline::after, .js .p-reveal .mark-highlight::before, .js .hero .mark-underline::after, .js .hero .mark-highlight::before, .js .pro-hero .mark-underline::after, .js .pro-hero .mark-highlight::before, .js .page-hero .mark-underline::after, .js .page-hero .mark-highlight::before { clip-path: inset(0 100% 0 0); } @keyframes mark-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -2% 0 0); } } /* Scroll-revealed sections draw as they enter; above-the-fold heros on load. */ .reveal.is-visible .mark-underline::after, .reveal.is-visible .mark-highlight::before, .p-reveal.is-in .mark-underline::after, .p-reveal.is-in .mark-highlight::before { animation: mark-draw 0.8s var(--ease) 0.45s both; } .hero .mark-underline::after, .hero .mark-highlight::before, .pro-hero .mark-underline::after, .pro-hero .mark-highlight::before, .page-hero .mark-underline::after, .page-hero .mark-highlight::before { animation: mark-draw 0.95s var(--ease) 0.85s both; } p { margin: 0 0 1rem; } .lede { font-size: clamp(1.1rem, 1.6vw, 1.32rem); line-height: 1.6; color: var(--muted); max-width: 40ch; text-wrap: pretty; } .muted { color: var(--muted); } .eyebrow { font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--indigo-bright); margin: 0 0 1rem; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; } .section { padding: clamp(4.5rem, 10vw, 8.5rem) 0; position: relative; } .section.narrow { max-width: 720px; margin: 0 auto; } .text-center { text-align: center; } .text-center .lede { margin-inline: auto; } .text-center img { margin-inline: auto; } .skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: 1rem; top: 1rem; background: var(--indigo); color: #fff; padding: 0.6rem 1rem; border-radius: 10px; z-index: 50; } /* Header -------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 40; background: var(--header-bg); backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid var(--line); } .nav { display: flex; align-items: center; justify-content: space-between; height: 72px; } .brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--cream); } .brand:hover { color: var(--cream); } .brand img { border-radius: 10px; box-shadow: 0 0 0 1px var(--line-strong); } .brand span { font-family: var(--font-display); font-size: 1.26rem; font-weight: 600; letter-spacing: -0.02em; } .brand .brand-mark { color: var(--indigo-bright); } .nav-links { display: flex; align-items: center; gap: 1.8rem; } .nav-links a:not(.btn) { color: var(--muted); font-weight: 500; font-size: 0.98rem; } .nav-links a.active:not(.btn), .nav-links a:not(.btn):hover { color: var(--cream); } /* Mobile menu toggle — hidden on desktop, shown < 900px */ .nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: rgba(var(--ovl), 0.04); color: var(--cream); border: 1px solid var(--line-strong); border-radius: 10px; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; } .nav-toggle:hover { border-color: var(--indigo-bright); background: rgba(139, 149, 236, 0.1); } .nav-toggle .nav-toggle-close { display: none; } .nav-toggle.is-open .nav-toggle-open { display: none; } .nav-toggle.is-open .nav-toggle-close { display: block; } /* Buttons ------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-body); font-weight: 600; font-size: 1rem; padding: 0.85rem 1.5rem; border-radius: 10px; border: 1px solid transparent; cursor: pointer; transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease), background 0.2s ease, border-color 0.2s ease; } .btn:hover { transform: translateY(-2px); } .btn-sm { padding: 0.55rem 1.1rem; font-size: 0.92rem; } .btn-primary { background: var(--indigo); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 4px 16px -8px rgba(8, 10, 18, 0.8); } .btn-primary:hover { color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 22px -8px rgba(8, 10, 18, 0.85); } .btn-secondary { background: rgba(var(--ovl), 0.04); color: var(--cream); border-color: var(--line-strong); } .btn-secondary:hover { color: var(--cream); border-color: var(--indigo-bright); background: rgba(139, 149, 236, 0.1); } /* Store badges -------------------------------------------------------------- */ .store-badges { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.8rem; } .text-center .store-badges { justify-content: center; } .store-badges a { transition: transform 0.2s var(--ease), filter 0.2s ease; filter: drop-shadow(0 8px 18px rgba(0,0,0,0.4)); } .store-badges a:hover { transform: translateY(-2px); } .store-badges img { height: 50px; } /* ============================ HERO ======================================== */ .hero { padding: clamp(3rem, 7vw, 6rem) 0 clamp(4rem, 8vw, 7rem); } .hero-inner { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; } .hero-copy { max-width: 36rem; } .hero h1 { margin-bottom: 1.2rem; } .hero-kicker { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.95rem; font-weight: 500; color: var(--muted); margin: 0 0 1.1rem; } .hero-kicker::before { content: ''; width: 22px; height: 1px; background: var(--indigo-bright); opacity: 0.8; } .hero-sub { color: var(--muted-2); font-size: 0.95rem; margin-top: 1.1rem; display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; } .hero-sub .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--muted-2); } /* Hero visual: the app artifact ------------------------------------------- */ .hero-stage { position: relative; display: grid; place-items: center; min-height: 520px; } .hero-phone { position: relative; z-index: 2; animation: floaty 8s ease-in-out infinite; } @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } /* slowed slightly for a calmer drift */ .hero-phone { animation-duration: 9.5s; } /* ====================== TRUST STRIP ======================================= */ .trust { border-block: 1px solid var(--line); background: rgba(var(--ovl), 0.015); } .trust .container { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; justify-content: center; padding-block: 1.6rem; } .trust-item { display: flex; align-items: baseline; gap: 0.5rem; color: var(--muted); font-size: 0.98rem; } .trust-item b { font-family: var(--font-display); color: var(--cream); font-size: 1.5rem; font-weight: 500; } /* ====================== PHONE MOCKUP ====================================== */ .phone { width: 270px; aspect-ratio: 1170 / 2532; border-radius: 42px; padding: 7px; background: linear-gradient(155deg, #2a3050, #11131f 60%); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--line-strong); position: relative; } .phone::after { /* speaker / notch pill */ content: ''; position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 86px; height: 7px; border-radius: 100px; background: rgba(0, 0, 0, 0.55); z-index: 2; } .phone img, .phone .shot { width: 100%; height: 100%; border-radius: 35px; object-fit: cover; display: block; } /* ====================== SHOWCASE FEATURES ================================= */ .feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; } .feature + .feature { margin-top: clamp(4rem, 9vw, 8rem); } .feature.reverse .feature-media { order: -1; } .feature-text { max-width: 30rem; } .feature-text h2 { margin-bottom: 0.7rem; } .feature-text p { color: var(--muted); } .feature-media { display: flex; justify-content: center; position: relative; } .feature-media .phone { transition: transform 0.5s var(--ease); } .feature:hover .feature-media .phone { transform: translateY(-6px) rotate(-1deg); } .feature-list { list-style: none; padding: 0; margin: 1.4rem 0 0; } .feature-list li { display: flex; gap: 0.7rem; align-items: flex-start; margin-bottom: 0.7rem; color: var(--muted); } .feature-list li::before { content: ''; flex: none; width: 7px; height: 7px; margin-top: 0.6rem; border-radius: 50%; background: var(--teal); } /* ====================== HOME BENTO (stats) ================================ */ .cards-bento { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1rem; align-items: stretch; } .bento-cell { border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.8rem, 3vw, 2.6rem); background: var(--surface); box-shadow: var(--shadow-sm); } .bento-lead { grid-row: span 2; display: flex; flex-direction: column; justify-content: space-between; gap: 1.6rem; } .bento-lead h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 0.55rem; } .bento-lead p { color: var(--muted); margin: 0; max-width: 34ch; } .bento-lead .phone { width: 216px; margin: 0 auto; } .bento-side { display: flex; flex-direction: column; justify-content: center; } .bento-side.teal { background: rgba(95, 208, 163, 0.04); } .bento-side h3 { font-family: var(--font-body); font-size: 1.12rem; font-weight: 600; color: var(--cream); letter-spacing: 0; margin: 0 0 0.5rem; } .bento-side p { color: var(--muted); margin: 0; font-size: 0.96rem; } /* ====================== CONSULTATION BEAT (centered) ===================== */ .consult { max-width: 760px; margin-inline: auto; text-align: center; } .consult-head .lede { margin-inline: auto; } .consult-stage { position: relative; display: flex; justify-content: center; margin: 2.4rem 0; } .consult-stage .phone { width: 238px; position: relative; z-index: 2; } .consult-points { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1.9rem; } .consult-points li { position: relative; padding-left: 1.7rem; color: var(--muted); } .consult-cta { margin-top: 2.2rem; } /* ====================== DOCTOR / REPORT =================================== */ .report { background: var(--ink-2); border-block: 1px solid var(--line); } .report-inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } .report-visual { position: relative; } .paper { border-radius: 10px; overflow: hidden; box-shadow: 0 40px 80px -28px rgba(0, 0, 0, 0.75), 0 0 0 1px var(--line-strong); transform: rotate(-2deg); transition: transform 0.5s var(--ease); } .paper:hover { transform: rotate(0); } .report-visual .phone { position: absolute; right: -10px; bottom: -36px; width: 168px; z-index: 4; } .panel-aside { margin: 1.6rem 0 0; padding-top: 1.3rem; border-top: 1px solid var(--line); color: var(--muted-2); font-size: 0.95rem; } .panel-aside a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; } /* ====================== SPLIT (patient / médecin) ========================= */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; } .panel { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(2rem, 3.2vw, 2.9rem); box-shadow: var(--shadow-sm); overflow: hidden; } .panel::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 3px; border-radius: 0 0 3px 0; background: var(--indigo-bright); } .panel.teal::before { background: var(--teal); } .panel h2 { font-size: 1.7rem; } .panel p { color: var(--muted); } .ticks { list-style: none; padding: 0; margin: 1.2rem 0 1.8rem; } .ticks li { padding-left: 1.7rem; position: relative; margin-bottom: 0.6rem; color: var(--muted); } /* Masked check, colour-controlled. Shared by .ticks and .consult-points. */ .ticks li::before, .consult-points li::before { content: ''; position: absolute; left: 0; top: 0.4em; width: 1.02rem; height: 1.02rem; background-color: var(--indigo-bright); -webkit-mask: var(--check) center / contain no-repeat; mask: var(--check) center / contain no-repeat; } .panel.teal .ticks li::before { background-color: var(--teal); } /* ====================== PRIVACY (home) ==================================== */ .privacy-panel { max-width: 820px; margin-inline: auto; } .privacy-panel .lede { max-width: 52ch; } .privacy-panel .ticks { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 2.2rem; margin-bottom: 0; } @media (max-width: 640px) { .privacy-panel .ticks { grid-template-columns: 1fr; } } /* ====================== CTA BAND ========================================== */ .cta-band { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.4rem; background: var(--surface-strong); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); padding: clamp(2.6rem, 6vw, 4.6rem) clamp(1.5rem, 4vw, 3rem); box-shadow: var(--shadow-lg); } .cta-band h2 { margin: 0 0 0.5rem; font-size: clamp(1.8rem, 3.2vw, 2.6rem); } .cta-band p { margin: 0 auto; color: var(--muted); max-width: 48ch; } /* ====================== INNER PAGE HERO =================================== */ .page-hero { padding: clamp(3rem, 6vw, 5rem) 0 clamp(1.5rem, 3vw, 2.5rem); position: relative; } .page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); } /* ====================== CENTRES: search =================================== */ .search-box { margin: 2.2rem 0 1rem; position: relative; } .search-box::before { content: '⌕'; position: absolute; left: 1.2rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--muted-2); pointer-events: none; } .search-box input { width: 100%; padding: 1.1rem 1.3rem 1.1rem 3.1rem; font-size: 1.1rem; font-family: var(--font-body); color: var(--text); background: rgba(var(--ovl), 0.03); border: 1px solid var(--line-strong); border-radius: 10px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .search-box input::placeholder { color: var(--muted-2); } .search-box input:focus { outline: none; border-color: var(--indigo-bright); box-shadow: 0 0 0 4px rgba(91, 103, 202, 0.18); } #search-count { margin: 0.7rem 0 0; color: var(--muted-2); font-size: 0.95rem; } /* ====================== CENTRES: lists ==================================== */ .center-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; } .center-card a { display: block; height: 100%; background: var(--surface); box-shadow: var(--shadow-sm); border: 1px solid var(--line); border-radius: 10px; padding: 1.15rem 1.3rem; color: var(--text); transition: transform 0.2s var(--ease), border-color 0.2s ease, background 0.2s ease; } .center-card a:hover { transform: translateY(-3px); border-color: var(--indigo-bright); background: var(--surface-2); } .center-card h3 { font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; color: var(--cream); margin: 0 0 0.3rem; letter-spacing: 0; } .center-card p { margin: 0; font-size: 0.92rem; } .section-title { margin: clamp(3rem, 6vw, 4.5rem) 0 1.5rem; } .region-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; } .region-grid a { display: flex; justify-content: space-between; align-items: center; padding: 0.95rem 1.2rem; color: var(--text); background: rgba(var(--ovl), 0.025); border: 1px solid var(--line); border-radius: 10px; transition: transform 0.2s var(--ease), border-color 0.2s ease; } .region-grid a:hover { transform: translateY(-2px); border-color: var(--indigo-bright); color: var(--cream); } .region-grid .count { color: var(--muted-2); font-size: 0.9rem; } /* Puces « par ville » (page département) + barre « voir plus » (page ville). */ /* Code d'erreur géant de la page 404 : décoratif, en retrait, ne vole pas la vedette au titre. */ .error-code { font-size: clamp(4.5rem, 18vw, 9rem); line-height: 1; font-weight: 600; color: var(--indigo-bright); opacity: 0.18; margin: 0 0 -0.5rem; letter-spacing: -0.02em; } .city-chips { list-style: none; padding: 0; margin: 0 0 0.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; } .city-chips a { display: inline-block; padding: 0.4rem 0.85rem; color: var(--text); background: rgba(var(--ovl), 0.04); border: 1px solid var(--line); border-radius: 999px; font-size: 0.9rem; transition: border-color 0.2s ease, color 0.2s ease; } .city-chips a:hover { border-color: var(--indigo-bright); color: var(--cream); } .browse-more { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.6rem 0 0; } /* ====================== CENTER DETAIL ===================================== */ .crumbs { color: var(--muted-2); font-size: 0.92rem; margin-bottom: 1.2rem; } .crumbs a { color: var(--muted); } .center-head h1 { margin-bottom: 0; } .center-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.85rem; margin: 0.6rem 0 0; color: var(--muted-2); font-size: 0.95rem; } .center-verified { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--teal); font-size: 0.88rem; font-weight: 500; } .center-head .lede { margin-top: 0.7rem; } .center-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; } .badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.34rem 0.7rem; border-radius: 10px; font-size: 0.85rem; font-weight: 500; color: var(--muted); background: rgba(var(--ovl), 0.04); border: 1px solid var(--line-strong); } .badge-accredited { color: var(--teal); border-color: rgba(95, 208, 163, 0.32); background: rgba(95, 208, 163, 0.08); } .badge-partner { color: var(--indigo-bright); border-color: rgba(139, 149, 236, 0.34); background: rgba(91, 103, 202, 0.12); } .partner-note { background: rgba(91, 103, 202, 0.08); box-shadow: var(--shadow-sm); border: 1px solid rgba(139, 149, 236, 0.28); border-left: 3px solid var(--indigo-bright); border-radius: 10px; padding: 1.4rem 1.6rem; margin: 1.8rem 0 0; } .partner-note h2 { margin: 0 0 0.6rem; font-size: 1.2rem; color: var(--cream); } .partner-note p { color: var(--muted); font-size: 0.96rem; margin: 0 0 0.9rem; } .partner-note p:last-of-type { margin-bottom: 1.1rem; } .contact-app { background: var(--surface); box-shadow: var(--shadow-sm); border: 1px solid var(--line); border-left: 3px solid var(--indigo); border-radius: 10px; padding: 1.3rem 1.5rem; margin: 1.8rem 0 0; } .contact-app h2 { margin: 0 0 0.5rem; font-size: 1.2rem; } .contact-app p { color: var(--muted); font-size: 0.96rem; margin: 0 0 1.1rem; } .care-hook { margin: 1rem 0 0; padding: 0.7rem 0.95rem; background: rgba(95, 208, 163, 0.06); border-left: 3px solid var(--teal); border-radius: 8px; color: var(--muted); font-size: 0.92rem; line-height: 1.55; } .prep-howto .howto-steps { list-style: none; counter-reset: step; padding: 0; margin: 1.2rem 0 1.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; } .prep-howto .howto-steps li { counter-increment: step; position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 1.1rem 1.3rem 1.1rem 3rem; } .prep-howto .howto-steps li::before { content: counter(step); position: absolute; left: 1.1rem; top: 1.1rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--indigo); color: var(--cream); font-size: 0.85rem; font-weight: 600; display: grid; place-items: center; } .prep-howto .howto-steps h3 { margin: 0 0 0.35rem; font-size: 1.02rem; } .prep-howto .howto-steps p { margin: 0; color: var(--muted); font-size: 0.94rem; line-height: 1.55; } @media (max-width: 640px) { .prep-howto .howto-steps { grid-template-columns: 1fr; } } .care-hook a, .care-hook strong { color: var(--teal); font-weight: 600; } .detail-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 2.5rem; margin-top: 1.5rem; } .detail-main h2 { font-size: 1.4rem; margin: 1.8rem 0 0.8rem; } .detail-main h2:first-child { margin-top: 0; } .info-list { list-style: none; padding: 0; margin: 0; } .info-list li { padding: 0.7rem 0; border-bottom: 1px solid var(--line); display: flex; gap: 1rem; } .info-list .muted { flex: none; min-width: 7rem; color: var(--muted-2); } .notes { color: var(--muted); font-size: 0.96rem; background: rgba(var(--ovl), 0.025); border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.2rem; margin-top: 1rem; } /* Contact card: phone is the prominent, callable content of the page. */ .contact-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1.3rem 1.5rem; box-shadow: var(--shadow-sm); } .contact-call { padding-bottom: 0.4rem; } .contact-phone { display: flex; align-items: center; gap: 0.9rem; padding: 0.5rem 0.6rem 0.5rem 0; margin: -0.3rem -0.6rem 0; border-radius: 12px; text-decoration: none; transition: background-color 0.18s ease; } .contact-phone:hover { background: rgba(139, 149, 236, 0.08); } .contact-phone-ic { flex: none; display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: 12px; color: var(--indigo-bright); background: rgba(91, 103, 202, 0.14); border: 1px solid rgba(139, 149, 236, 0.28); } .contact-phone-text { display: grid; gap: 0.1rem; } .contact-phone-label { font-size: 0.8rem; color: var(--muted-2); } .contact-phone-num { font-size: 1.5rem; font-weight: 600; color: var(--cream); letter-spacing: 0.01em; line-height: 1.1; } .contact-phone:hover .contact-phone-num { color: var(--indigo-bright); } .contact-phone-extra { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.55rem; padding: 0.6rem 0; min-height: 2.75rem; align-content: center; border-top: 1px solid var(--line); margin-top: 0.7rem; text-decoration: none; font-size: 0.92rem; } .contact-phone-extra-label { color: var(--muted-2); } .contact-phone-extra-num { color: var(--text); font-weight: 500; } .contact-phone-extra:hover .contact-phone-extra-num { color: var(--indigo-bright); } .contact-meta { margin: 1rem 0 0; padding: 0; } .contact-meta > div { display: flex; gap: 1rem; padding: 0.7rem 0; border-top: 1px solid var(--line); } /* No phone block above (non-public center): drop the first row's divider so the card doesn't open with a stray border. */ .contact-meta:first-child > div:first-child { border-top: 0; padding-top: 0; } .contact-meta dt { flex: none; min-width: 6.5rem; margin: 0; color: var(--muted-2); font-size: 0.92rem; } .contact-meta dd { margin: 0; color: var(--text); font-size: 0.96rem; overflow-wrap: anywhere; } .contact-meta a { color: var(--link-hover); } .contact-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.3rem; } /* In-app contact hook: phone/e-mail exist in our data but aren't published here (personal practitioner lines, e-mails) — point the user to the app instead. */ .contact-inapp { display: flex; align-items: center; gap: 0.85rem; margin-top: 1.1rem; padding: 0.85rem 1rem; border-radius: 12px; text-decoration: none; background: rgba(91, 103, 202, 0.1); border: 1px solid rgba(139, 149, 236, 0.26); transition: background-color 0.18s ease, border-color 0.18s ease; } .contact-inapp:hover { background: rgba(91, 103, 202, 0.16); border-color: rgba(139, 149, 236, 0.4); } .contact-inapp-ic { flex: none; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 10px; color: var(--indigo-bright); background: rgba(91, 103, 202, 0.16); } .contact-inapp-ic svg { width: 17px; height: 17px; } .contact-inapp-text { display: grid; gap: 0.12rem; min-width: 0; } .contact-inapp-title { color: var(--cream); font-weight: 600; font-size: 0.98rem; } .contact-inapp-sub { color: var(--muted); font-size: 0.88rem; line-height: 1.4; } .contact-inapp-arr { flex: none; margin-left: auto; color: var(--indigo-bright); display: grid; place-items: center; transition: transform 0.18s ease; } .contact-inapp:hover .contact-inapp-arr { transform: translateX(2px); } .detail-side .partner-note, .detail-side .contact-app { margin: 0; } .detail-side { display: grid; gap: 1.2rem; align-content: start; } .map-embed { width: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--line-strong); border-radius: 10px; filter: grayscale(0.2) brightness(0.92); } .correction { margin-top: 3rem; color: var(--muted-2); font-size: 0.95rem; } /* ====================== CONTACT FORM ====================================== */ .contact-form { display: grid; gap: 1.1rem; max-width: 34rem; margin-top: 2.2rem; } .contact-form label { display: grid; gap: 0.45rem; font-weight: 500; font-size: 0.95rem; color: var(--cream); } .contact-form input, .contact-form select, .contact-form textarea { padding: 0.85rem 1rem; font: inherit; color: var(--text); background: rgba(var(--ovl), 0.03); border: 1px solid var(--line-strong); border-radius: 10px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-color: var(--indigo-bright); box-shadow: 0 0 0 4px rgba(91, 103, 202, 0.16); } .contact-form button { justify-self: start; margin-top: 0.3rem; } /* ALTCHA captcha widget — themed to the dark surface via its CSS variables. */ .contact-form altcha-widget { --altcha-max-width: 34rem; --altcha-border-width: 1px; --altcha-border-radius: 10px; --altcha-color-base: rgba(var(--ovl), 0.03); --altcha-color-border: var(--line-strong); --altcha-color-border-focus: var(--indigo-bright); --altcha-color-text: var(--text); --altcha-color-footer-bg: transparent; --altcha-color-error-text: var(--rose); display: block; font-size: 0.95rem; } .rounded { border-radius: 10px; box-shadow: 0 0 0 1px var(--line-strong); } /* ====================== FOOTER ============================================ */ .site-footer { border-top: 1px solid var(--line); padding: clamp(3rem, 6vw, 4.5rem) 0 2.5rem; background: var(--header-bg); margin-top: 2rem; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem 2rem; margin-bottom: 2.5rem; } .footer-grid nav { display: flex; flex-direction: column; gap: 0.55rem; } .footer-grid h3 { font-family: var(--font-body); font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 0.7rem; } .footer-grid nav a { color: var(--muted); font-size: 0.96rem; } .footer-grid nav a:hover { color: var(--cream); } .footer-tagline { color: var(--muted); max-width: 24rem; margin-top: 0.8rem; } .disclaimer { font-size: 0.84rem; color: var(--muted-2); border-top: 1px solid var(--line); padding-top: 1.5rem; max-width: 70ch; } .copyright { font-size: 0.84rem; color: var(--muted-2); } /* ====================== SCROLL REVEAL ===================================== */ /* No-JS safe: only when the `js` class is present (set by an inline script) do we hide elements before they animate in. Without JS the class is never added, so .reveal stays fully visible and content never blanks out. Hiding up-front (rather than starting visible) is what kills the "flash, then animate" flicker that showed when an element was already on screen as the IntersectionObserver fired. */ .js .reveal { opacity: 0; } .reveal.is-visible { animation: rise 1.05s var(--ease) both; } .reveal.is-visible.d1 { animation-delay: 0.1s; } .reveal.is-visible.d2 { animation-delay: 0.2s; } .reveal.is-visible.d3 { animation-delay: 0.3s; } /* Hero load-in (staggered) */ .hero-copy > * { animation: rise 1.2s var(--ease) both; } .hero-copy > *:nth-child(1) { animation-delay: 0.05s; } .hero-copy > *:nth-child(2) { animation-delay: 0.17s; } .hero-copy > *:nth-child(3) { animation-delay: 0.29s; } .hero-copy > *:nth-child(4) { animation-delay: 0.41s; } .hero-stage { animation: rise 1.45s var(--ease) 0.25s both; } @keyframes rise { from { opacity: 0; transform: translateY(28px); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } } /* ====================== PROFESSIONNELS ==================================== */ .eyebrow-teal { color: var(--teal); } .accent-teal { color: var(--teal); } .ticks-teal li::before { background-color: var(--teal); } .pro-note { font-size: 0.92rem; margin-top: 1.3rem; } /* Hero: claim-led, artifact beside it */ .pro-hero { padding: clamp(2.8rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem); } .pro-hero-inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; } .pro-hero-copy { max-width: 36rem; } .pro-hero h1 { margin-bottom: 1.1rem; text-wrap: balance; } .pro-cta { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.8rem; } .pro-hero-visual { position: relative; display: flex; justify-content: center; padding: 1rem 0; } .pro-hero-visual .paper { max-width: 400px; transform: rotate(-1.5deg); } .pro-hero-visual .phone { position: absolute; right: clamp(-8px, 2vw, 12px); bottom: -34px; width: 152px; z-index: 4; } /* What you receive */ .what-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } .what-media { position: relative; } .what-media .paper { max-width: 460px; } .what-legend { margin: 1rem auto 0; max-width: 460px; border-radius: 10px; opacity: 0.92; } .what-text h2 { margin-bottom: 0.7rem; } .what-text > p { color: var(--muted); } /* In your consultation: text-led steps, top accent (no card boxes) */ .pro-section-lead { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); } .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 3vw, 2.8rem); } .step-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 1.1rem; border-radius: 10px; color: var(--teal); background: rgba(95, 208, 163, 0.1); border: 1px solid rgba(95, 208, 163, 0.22); } .step h3 { font-family: var(--font-body); font-size: 1.08rem; font-weight: 600; color: var(--cream); letter-spacing: 0; margin: 0 0 0.5rem; } .step p { color: var(--muted); margin: 0; } /* Data / trust panel */ .data-panel { position: relative; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.8rem, 3.5vw, 2.8rem); } .data-panel::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 3px; border-radius: 0 0 3px 0; background: var(--teal); } .data-panel h2 { font-size: 1.7rem; margin-bottom: 0.5rem; } .data-panel .lede { max-width: 46ch; color: var(--muted); margin-bottom: 1.2rem; } .data-panel .ticks { margin-bottom: 0; } .pro-disclaimer { border-top: none; padding-top: 1.4rem; } /* Directory tie-in */ .pro-directory { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; } .pro-directory-text h2 { margin-bottom: 0.4rem; } .pro-directory-text p { color: var(--muted); max-width: 48ch; margin: 0; } .pro-directory-cta { display: flex; gap: 0.8rem; flex-wrap: wrap; } .cta-band-teal { background: var(--surface-strong); } /* ====================== FOUNDER CARD (home + pro) ======================== */ .founder { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.4rem, 4vw, 2.6rem); align-items: center; max-width: 880px; margin-inline: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.8rem, 3.5vw, 2.8rem); box-shadow: var(--shadow-sm); } .founder-photo img { width: clamp(108px, 13vw, 136px); height: auto; border-radius: 16px; display: block; box-shadow: 0 0 0 1px var(--line-strong); } .founder-body { margin: 0; } .founder-eyebrow { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; color: var(--indigo-bright); margin: 0 0 0.7rem; } .founder-teal .founder-eyebrow { color: var(--teal); } .founder-body p { color: var(--muted); margin: 0 0 0.8rem; } .founder-sign { color: var(--text); font-size: 0.95rem; } .founder-sign b { color: var(--cream); font-weight: 600; } .founder-body .btn { margin-top: 0.5rem; } @media (max-width: 600px) { .founder { grid-template-columns: 1fr; justify-items: start; } } /* ====================== RESEARCH PARTNERSHIP (pro) ======================= */ .research-panel { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; background: var(--surface-strong); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); padding: clamp(2rem, 4vw, 3.2rem); box-shadow: var(--shadow-lg); } .research-panel::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 3px; border-radius: 0 0 3px 0; background: var(--teal); } .research-text .eyebrow { margin-bottom: 0.7rem; } .research-text h2 { margin-bottom: 0.6rem; } .research-text p { color: var(--muted); } .research-text .btn { margin-top: 1.4rem; } .research-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; } .research-points li { display: flex; gap: 0.9rem; align-items: flex-start; } .research-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; color: var(--teal); background: rgba(95, 208, 163, 0.1); border: 1px solid rgba(95, 208, 163, 0.22); } .research-points b { display: block; color: var(--cream); font-weight: 600; } .research-points span { color: var(--muted); font-size: 0.96rem; } @media (max-width: 820px) { .research-panel { grid-template-columns: 1fr; } } /* Reveal that enhances a default-visible element; hidden up-front only with JS. */ .js .p-reveal { opacity: 0; } .p-reveal.is-in { animation: pRise 0.95s var(--ease) both; } @keyframes pRise { from { opacity: 0; transform: translateY(22px); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } } /* Hero load-in */ .pro-hero-copy > * { animation: rise 1.2s var(--ease) both; } .pro-hero-copy > *:nth-child(1) { animation-delay: 0.05s; } .pro-hero-copy > *:nth-child(2) { animation-delay: 0.17s; } .pro-hero-copy > *:nth-child(3) { animation-delay: 0.29s; } .pro-hero-copy > *:nth-child(4) { animation-delay: 0.41s; } .pro-hero-visual { animation: rise 1.45s var(--ease) 0.25s both; } /* ====================== HOME FINDER BAND ================================== */ .home-finder-section { padding-block: clamp(2.5rem, 6vw, 4.5rem); } .home-finder { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; background: var(--surface-strong); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); padding: clamp(1.8rem, 4vw, 2.8rem); box-shadow: var(--shadow-lg); } .home-finder-text h2 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); margin-bottom: 0.5rem; } .home-finder-text p { margin: 0; max-width: 34ch; } .home-finder-text .eyebrow { margin-bottom: 0.7rem; } .home-finder-form { display: grid; gap: 0.9rem; } .home-finder-form .search-box { margin: 0; } .home-finder-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; } .home-finder-actions .btn { flex: 1; justify-content: center; min-width: 9rem; } .home-finder-link { color: var(--muted); font-size: 0.95rem; text-decoration: underline; text-underline-offset: 2px; justify-self: start; } .home-finder-link:hover { color: var(--cream); } /* ====================== HOME: "why" beat ================================= */ .why-inner { max-width: 760px; margin-inline: auto; text-align: center; } .why-lead { font-family: var(--font-display); font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 500; letter-spacing: -0.025em; line-height: 1.12; color: var(--cream); margin: 0 0 1.1rem; text-wrap: balance; } .why-body { font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.65; color: var(--muted); max-width: 54ch; margin-inline: auto; text-wrap: pretty; } /* ====================== HOME: definition beat (AEO) ===================== */ .define-title { margin: 0 0 1rem; text-wrap: balance; } /* ====================== HOME: FAQ ======================================== */ .faq-title { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); } .faq-list { max-width: 760px; margin-inline: auto; border-top: 1px solid var(--line); } .faq-list details { border-bottom: 1px solid var(--line); } .faq-list summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0.2rem; font-family: var(--font-display); font-size: clamp(1.05rem, 1.6vw, 1.2rem); font-weight: 500; color: var(--cream); letter-spacing: -0.01em; transition: color 0.2s ease; } .faq-list summary::-webkit-details-marker { display: none; } .faq-list summary:hover { color: var(--cream); } .faq-list summary::after { content: ''; flex: none; width: 11px; height: 11px; margin-right: 0.4rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform 0.25s var(--ease), border-color 0.2s ease; } .faq-list details[open] summary { color: var(--cream); } .faq-list details[open] summary::after { transform: rotate(-135deg); border-color: var(--indigo-bright); } .faq-list details p { margin: 0; padding: 0 0 1.4rem; color: var(--muted); max-width: 60ch; font-size: 1rem; line-height: 1.6; } @media (prefers-reduced-motion: reduce) { .faq-list summary::after { transition: none; } } /* ====================== CENTRES: finder bar ============================== */ .finder-bar { display: flex; gap: 0.8rem; align-items: stretch; margin: 2.2rem 0 0.8rem; } .finder-bar .search-box { margin: 0; flex: 1; } .near-btn { white-space: nowrap; flex: none; } .near-btn svg { flex: none; } .near-btn[aria-busy='true'] { opacity: 0.7; pointer-events: none; } /* ====================== CENTRES: interactive map ========================= */ .map-section { padding: 0 0 clamp(2rem, 5vw, 3.5rem); } .map-wrap { display: grid; grid-template-columns: 1.55fr 0.95fr; gap: 1rem; align-items: stretch; } #centers-map { height: clamp(420px, 58vh, 620px); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-strong); background: var(--ink-2); z-index: 0; /* keep tiles/controls under the sticky header */ } #area-map { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-strong); background: var(--ink-2); z-index: 0; } .area-map-section #area-map { height: clamp(220px, 32vh, 340px); } .area-map-section { padding: 0 0 clamp(1.25rem, 2.5vw, 1.75rem); } .detail-side #area-map { aspect-ratio: 4 / 3; } .near-panel { display: flex; flex-direction: column; background: rgba(var(--ovl), 0.018); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.2rem 0.6rem; max-height: clamp(420px, 58vh, 620px); overflow: auto; } .near-status { color: var(--muted); font-size: 0.96rem; margin: 0 0 0.9rem; position: sticky; top: -1.2rem; z-index: 1; background: var(--panel-solid); margin-left: -1.2rem; margin-right: -1.2rem; padding: 0 1.2rem 0.7rem; border-bottom: 1px solid var(--line); } .panel-hint { display: block; font-size: 0.8rem; color: var(--muted-2); margin-top: 0.3rem; } .map-note { font-size: 0.84rem; color: var(--muted-2); margin: 0.9rem 0 0; } /* Stacked result list (single column inside the side panel) */ .center-list-stack { grid-template-columns: 1fr; gap: 0.6rem; } .center-card-near a { padding: 0.85rem 1rem; transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease; } /* Mirror of a map-marker hover: lift the matching card without it being hovered directly. */ .center-card-near.is-hovered a { transform: translateY(-3px); border-color: var(--indigo-bright); background: var(--surface-2); } .panel-more { list-style: none; color: var(--muted-2); font-size: 0.84rem; padding: 0.7rem 0.2rem 0.2rem; text-align: center; } .near-dist { display: inline-block; font-family: var(--font-display); font-weight: 600; color: var(--indigo-bright); font-size: 0.86rem; margin-bottom: 0.2rem; } .near-tag, .map-pop-tag { display: inline-block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--teal); background: rgba(95, 208, 163, 0.12); border: 1px solid rgba(95, 208, 163, 0.25); border-radius: 10px; padding: 0.1rem 0.55rem; vertical-align: middle; } /* Dark Leaflet skin ------------------------------------------------------- */ .leaflet-container { background: var(--ink-2); font-family: var(--font-body); } .leaflet-bar a, .leaflet-bar a:hover { background: rgba(20, 24, 41, 0.92); color: var(--cream); border-bottom-color: var(--line-strong); } .leaflet-bar a:hover { background: rgba(40, 46, 76, 0.95); } .leaflet-bar { border: 1px solid var(--line-strong); box-shadow: 0 6px 18px -8px rgba(0,0,0,0.7); } .leaflet-control-attribution { background: rgba(12, 19, 34, 0.7) !important; color: var(--muted-2) !important; backdrop-filter: blur(6px); font-size: 0.7rem; } .leaflet-control-attribution a { color: var(--muted) !important; } .leaflet-popup-content-wrapper { background: var(--panel-solid); color: var(--text); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 20px 50px -20px rgba(0,0,0,0.85); } .leaflet-popup-tip { background: var(--panel-solid); border: 1px solid var(--line-strong); } .leaflet-popup-close-button { color: var(--muted-2) !important; } .leaflet-popup-content { margin: 0.9rem 1rem; line-height: 1.45; } .map-pop { display: flex; flex-direction: column; gap: 0.25rem; } /* Scope colours under .leaflet-popup-content so they beat Leaflet's own `.leaflet-container a { color:#0078A8 }` (0,1,1) on the "Voir la fiche" link. */ .leaflet-popup-content .map-pop strong { font-size: 1rem; color: #000; font-weight: 600; } .leaflet-popup-content .map-pop-sub { color: var(--muted); font-size: 0.86rem; } .map-pop-tag { align-self: flex-start; margin-bottom: 0.15rem; } .leaflet-popup-content a.map-pop-link { margin-top: 0.4rem; font-weight: 600; font-size: 0.9rem; color: var(--indigo-bright); } .leaflet-popup-content a.map-pop-link:hover { color: var(--link-hover); } .leaflet-tooltip { background: var(--panel-solid); border: 1px solid var(--line-strong); color: var(--text); } .leaflet-tooltip-top::before { border-top-color: var(--line-strong); } /* Cluster bubbles in brand indigo. markercluster Default.css loads AFTER style.css, so we scope under the #centers-map ID to outrank its size classes. */ #centers-map .marker-cluster-small, #centers-map .marker-cluster-medium, #centers-map .marker-cluster-large { background: rgba(91, 103, 202, 0.22); } #centers-map .marker-cluster-small div, #centers-map .marker-cluster-medium div, #centers-map .marker-cluster-large div { background: rgba(91, 103, 202, 0.9); color: #fff; font-family: var(--font-display); font-weight: 600; } #centers-map .marker-cluster { border: 1px solid rgba(139, 149, 236, 0.45); box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.6); } #centers-map .marker-cluster span { line-height: 30px; } /* Cluster pulse when its hidden member is hovered from the side list. */ #centers-map .marker-cluster.cluster-hi { box-shadow: 0 0 0 4px rgba(139, 149, 236, 0.35), 0 6px 18px -4px rgba(0, 0, 0, 0.7); border-color: rgba(139, 149, 236, 0.9); } /* ====================== RESPONSIVE ======================================== */ @media (max-width: 900px) { .home-finder { grid-template-columns: 1fr; } .map-wrap { grid-template-columns: 1fr; } .near-panel { max-height: none; } #centers-map { height: 380px; } .finder-bar { flex-direction: column; } .near-btn { justify-content: center; } .pro-hero-inner, .what-grid, .pro-directory { grid-template-columns: 1fr; } .pro-hero-visual { flex-direction: column; align-items: center; } .pro-hero-visual .phone { position: static; margin: 1.2rem auto 0; width: 130px; } .pro-hero-visual .paper { transform: none; } .steps { grid-template-columns: 1fr; gap: 1.8rem; } .step { border-top: 1px solid var(--line); padding-top: 1.3rem; } .pro-directory-cta { width: 100%; } .hero-inner { grid-template-columns: 1fr; } /* Copy first on mobile: the "Vos nuits, enfin claires" headline leads, the app visual follows below it (no order flip). */ .hero-stage { min-height: 420px; } .hero-copy { max-width: none; } .lede { max-width: none; } .feature, .report-inner, .split { grid-template-columns: 1fr; } .cards-bento { grid-template-columns: 1fr; } .bento-lead { grid-row: auto; } .feature.reverse .feature-media { order: 0; } .feature-media { order: -1; } .report-visual .phone { position: static; margin: 1.5rem auto 0; width: 200px; } .paper { transform: none; } .detail-grid { grid-template-columns: 1fr; } .center-list { grid-template-columns: 1fr; } .region-grid { grid-template-columns: 1fr 1fr; } .footer-grid { grid-template-columns: 1fr; gap: 1.6rem; } .nav-toggle { display: inline-flex; } .nav-links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem 1.5rem 1.4rem; background: var(--nav-drop-bg); backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid var(--line); transform: translateY(-10px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s linear 0.25s; } .nav-links.open { transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); } .nav-links a:not(.btn) { display: block; padding: 0.95rem 0; font-size: 1.05rem; border-bottom: 1px solid var(--line); } .nav-links a.btn { margin-top: 1rem; justify-content: center; } } @media (max-width: 520px) { .region-grid { grid-template-columns: 1fr; } body { font-size: 17px; } .consult-points { flex-direction: column; align-items: center; gap: 0.5rem; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: 0.001ms !important; } .reveal, .js .reveal, .p-reveal, .js .p-reveal { opacity: 1 !important; transform: none; } .js .mark-underline::after, .js .mark-highlight::before { clip-path: inset(0 -2% 0 0) !important; } .hero-phone { transform: none; } } /* ====================== Ressources (sleep-education library) ============= */ .ressources-hero { padding-bottom: clamp(2rem, 4vw, 3rem); } .a-shelf { padding: clamp(1.5rem, 3vw, 2.5rem) 0; } .a-shelf .section-title { margin: 0 0 1.5rem; } .a-card-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .a-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease; } .a-card:hover { border-color: var(--indigo-bright); transform: translateY(-3px); background: rgba(139, 149, 236, 0.06); } .a-card a { display: flex; flex-direction: column; gap: 0.55rem; padding: 1.2rem 1.25rem; height: 100%; } .a-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; letter-spacing: -0.015em; color: var(--cream); margin: 0; } .a-card p { margin: 0; font-size: 0.96rem; line-height: 1.5; } .a-card-cta { margin-top: auto; display: inline-flex; align-items: center; gap: 0.4rem; color: var(--indigo-bright); font-weight: 600; font-size: 0.95rem; } .a-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; } .a-tag { font-size: 0.78rem; font-weight: 500; color: var(--muted); border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.18rem 0.6rem; } /* Article detail */ .article .a-head { margin: 1.2rem 0 1.5rem; } .article .a-head h1 { margin: 0.8rem 0 0.6rem; } .a-intro { font-size: 1.18rem; line-height: 1.6; color: var(--text); margin: 0 0 2rem; text-wrap: pretty; } .a-block { margin: 2.2rem 0; } .a-block h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; letter-spacing: -0.02em; color: var(--cream); margin: 0 0 1rem; } .a-tips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; } .a-tips li { position: relative; padding-left: 1.5rem; font-size: 1.05rem; line-height: 1.6; color: var(--text); } .a-tips li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--indigo-bright); } .a-notice { display: flex; gap: 0.8rem; align-items: flex-start; background: rgba(233, 171, 77, 0.08); border: 1px solid rgba(233, 171, 77, 0.28); border-left-width: 3px; border-radius: var(--radius); padding: 1rem 1.15rem; margin: 0 0 2rem; } .a-notice svg { color: var(--amber); flex-shrink: 0; margin-top: 0.1rem; } .a-notice p { margin: 0; font-size: 0.98rem; line-height: 1.55; color: var(--text); } .a-table-wrap { overflow-x: auto; margin: 0 0 2rem; } .a-table { width: 100%; border-collapse: collapse; font-size: 0.96rem; } .a-table th, .a-table td { text-align: left; padding: 0.7rem 0.8rem; border-bottom: 1px solid var(--line); vertical-align: top; } .a-table thead th { color: var(--muted); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.03em; } .a-table tbody th { color: var(--cream); font-weight: 600; } .a-table tbody td { color: var(--muted); } .a-faq { margin: 2.6rem 0 0; padding-top: 1.8rem; border-top: 1px solid var(--line); } .a-faq > h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; letter-spacing: -0.02em; color: var(--cream); margin: 0 0 1.4rem; } .a-faq-item { margin: 0 0 1.4rem; } .a-faq-item:last-child { margin-bottom: 0; } .a-faq-item h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; color: var(--cream); margin: 0 0 0.45rem; text-wrap: pretty; } .a-faq-item p { color: var(--muted); line-height: 1.6; margin: 0; text-wrap: pretty; } .a-sources { margin: 2.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--line); } .a-sources h2 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: var(--cream); margin: 0 0 0.8rem; } .a-sources ul { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .a-sources a { color: var(--indigo-bright); font-size: 0.95rem; word-break: break-word; } .a-sources .disclaimer { font-size: 0.88rem; color: var(--muted-2); line-height: 1.5; margin: 0; } .a-related { margin-top: 3rem; } .a-related .section-title { margin: 0 0 1.25rem; } .a-back { margin-top: 2.5rem; } /* ---- Article identity: per-article accent + meta line ------------------- Each article carries --accent / --accent-2 / --accent-from (set inline from its gradient key). The accent recolours the title's brush underline, the tip bullets and the source links; body copy stays cream. Falls back to indigo. */ .article .a-tips li::before { background: var(--accent, var(--indigo-bright)); } .article .a-sources a { color: var(--accent, var(--indigo-bright)); } /* Recolour the title's brush underline with the article accent (.mark resets --mark-color on itself, so this more specific rule is required to win). */ .article .mark { --mark-color: var(--accent, var(--indigo-bright)); } /* Meta line next to the tags: last-updated date · reading time. */ .a-head__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; } .a-meta { margin: 0; font-size: 0.82rem; color: var(--muted); white-space: nowrap; } .a-meta time { font-variant-numeric: tabular-nums; } /* Index cards: colour the icon tile + hover + CTA with the article accent. */ .a-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; color: var(--accent, var(--indigo-bright)); background: color-mix(in srgb, var(--accent, #8b95ec) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent, #8b95ec) 26%, transparent); } .a-card:hover { border-color: color-mix(in srgb, var(--accent, var(--indigo-bright)) 55%, var(--line)); background: color-mix(in srgb, var(--accent, #8b95ec) 6%, transparent); } .a-card-cta { color: var(--accent, var(--indigo-bright)); } /* ====================== HOME: reviews / social proof ===================== */ .reviews-head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); } .reviews-rating { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.6rem; margin: 0.7rem 0 0; color: var(--muted); font-size: 1.05rem; } .reviews-rating strong { color: var(--cream); font-weight: 600; } .stars { display: inline-flex; gap: 2px; color: var(--amber); } .reviews-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .review-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 0.9rem; } .review-card blockquote { margin: 0; font-size: 1.02rem; line-height: 1.6; color: var(--text); } .review-meta { display: flex; align-items: center; gap: 0.55rem; color: var(--muted); font-size: 0.92rem; } .reviews-note { text-align: center; color: var(--muted-2); font-size: 0.85rem; margin: 1.4rem auto 0; max-width: 52ch; } /* Download CTA at the foot of each article (cold readers from search/AI). */ .a-cta { margin-top: 3rem; } /* ====================== Language switcher + banner ======================= */ /* Sélecteur de langue (header).

natif, fonctionne sans JS. */ .lang-switch { position: relative; } .lang-switch summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; color: var(--muted); font-weight: 500; font-size: 0.95rem; padding: 0.4rem 0.55rem; border-radius: 10px; border: 1px solid var(--line-strong); background: rgba(var(--ovl), 0.04); transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .lang-switch summary::-webkit-details-marker { display: none; } .lang-switch summary:hover { color: var(--cream); border-color: var(--indigo-bright); background: rgba(139, 149, 236, 0.1); } .lang-switch[open] summary { color: var(--cream); border-color: var(--indigo-bright); } /* Dark/light theme toggle (header). Icon shown = the theme you switch TO. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; cursor: pointer; color: var(--muted); background: rgba(var(--ovl), 0.04); border: 1px solid var(--line-strong); border-radius: 10px; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.15s var(--ease); } .theme-toggle:hover { color: var(--cream); border-color: var(--indigo-bright); background: rgba(139, 149, 236, 0.1); } .theme-toggle:active { transform: scale(0.94); } .theme-toggle .theme-icon { display: inline-flex; } .theme-toggle .theme-icon-moon { display: none; } :root[data-theme='light'] .theme-toggle .theme-icon-sun { display: none; } :root[data-theme='light'] .theme-toggle .theme-icon-moon { display: inline-flex; } @media (prefers-reduced-motion: reduce) { .theme-toggle { transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; } } .lang-menu { position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 50; list-style: none; margin: 0; padding: 0.35rem; min-width: 160px; background: var(--surface-strong); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow-lg); } .lang-menu li { margin: 0; } .lang-menu a { display: block; padding: 0.55rem 0.7rem; border-radius: 8px; color: var(--muted); font-size: 0.95rem; font-weight: 500; } .lang-menu a:hover { background: rgba(139, 149, 236, 0.12); color: var(--cream); } .lang-menu a.is-current { color: var(--cream); font-weight: 600; } /* Bandeau de langue (inséré tout en haut par lang-banner.js). */ .lang-banner { display: flex; align-items: center; gap: 0.9rem; padding: 0.75rem clamp(1rem, 4vw, 2rem); background: var(--surface-strong); border-bottom: 1px solid var(--line-strong); font-size: 0.95rem; } .lang-banner-text { margin: 0; flex: 1; color: var(--text); line-height: 1.45; } .lang-banner-cta { flex-shrink: 0; white-space: nowrap; padding: 0.45rem 0.9rem; border-radius: 10px; background: var(--indigo); color: #fff; font-weight: 600; font-size: 0.92rem; border: 1px solid transparent; transition: background 0.2s ease, transform 0.2s ease; } .lang-banner-cta:hover { color: #fff; transform: translateY(-1px); } .lang-banner-cta:active { transform: scale(0.98); } .lang-banner-close { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; cursor: pointer; background: transparent; color: var(--muted); border: none; border-radius: 8px; transition: color 0.2s ease, background 0.2s ease; } .lang-banner-close:hover { color: var(--cream); background: rgba(var(--ovl), 0.06); } @media (max-width: 640px) { .lang-banner { flex-wrap: wrap; gap: 0.6rem 0.9rem; } .lang-banner-text { flex-basis: 100%; } } /* Sur mobile, le sélecteur s'intègre dans le menu déroulant en pleine largeur. */ @media (max-width: 900px) { .lang-switch { margin-top: 1rem; } .lang-switch summary { justify-content: center; width: 100%; } .lang-menu { position: static; min-width: 0; margin-top: 0.5rem; box-shadow: none; background: transparent; border-color: var(--line); } .theme-toggle { margin-top: 1rem; width: 100%; height: 44px; gap: 0.5rem; } }