/* klymenko.fr — BRAND A "L'observatoire de nuit" tokens. Semantic variables drive the design; a palette is one block below — switchable via (dev switcher on the homepage; A1 default). Legacy variables (--navy, --purple…) retained while inner pages await roll-across. */ /* ── Palettes ─────────────────────────────────────────────────── */ :root { /* A1 · Nuit & or — near-black navy, warm ivory, gold (recommended) */ --a-ground: #07070D; --a-panel: #10101C; --a-ink: #F2F0EA; --a-muted: #8E8CA0; --a-muted-lt: #B6B4C4; --a-accent: #C9A35C; --a-accent-lt: #DDBC7E; --a-accent-ink: #14110A; --a-accent-soft: rgba(201,163,92,0.14); --a-glow: rgba(201,163,92,0.10); --a-rule: rgba(255,255,255,0.08); --a-rule-lt: rgba(255,255,255,0.15); --a-star: rgba(242,240,234,0.55); /* Tinted-section ground for the two-dark-then-one-tint rhythm. a1–a4 predate the dedicated value, so they fall back to the panel colour (previous behaviour). */ --a-tint: var(--a-panel); /* Explorer tiles — brightness ladder (hot accent card → mid → deep). Shades must come from each palette's own family: purple ladder ONLY on the purple kits (a2/a3/a6), never on the gold/blue kits. Tile 1 rides --a-accent/--a-accent-ink. */ --a-tile2: #1C1C30; --a-tile3: #10101C; --a-tile1-pill: rgba(20,17,10,0.16); --a-tile1-pill-hov: rgba(20,17,10,0.28); /* Legacy palette — inner pages still reference these until roll-across */ --navy: #1A1F6E; --navy-lt: #252B82; --purple: #9335AF; --purple-lt: #A848C0; --purple-dk: #7A2898; --mid: #585878; --rule: #D0CEE8; --rule-lt: #E4E2F2; --bg: #F7F6FC; --card: #F0EDF8; --card-dk: #E6E3F2; --white: #FFFFFF; } /* A2 · Nuit & pourpre — the real brand purple #9335AF (not pink), as a switchable option */ html[data-palette="a2"] { --a-accent: #9335AF; --a-accent-lt: #A848C0; --a-accent-ink: #FFFFFF; --a-accent-soft: rgba(147,53,175,0.20); --a-glow: rgba(147,53,175,0.18); --a-star: rgba(168,72,192,0.55); --a-tile2: #5B2A6E; --a-tile3: #2E1B3D; --a-tile1-pill: rgba(255,255,255,0.20); --a-tile1-pill-hov: rgba(255,255,255,0.32); } /* A3 · Pourpre clair — the current light celestial, elevated (the control) */ html[data-palette="a3"] { --a-ground: #F5F3FA; --a-panel: #FFFFFF; --a-ink: #23204A; --a-muted: #585878; --a-muted-lt: #6E6C8A; --a-accent: #9335AF; --a-accent-lt: #7A2898; --a-accent-ink: #FFFFFF; --a-accent-soft: rgba(147,53,175,0.10); --a-glow: rgba(147,53,175,0.07); --a-rule: rgba(35,32,74,0.12); --a-rule-lt: rgba(35,32,74,0.22); --a-star: rgba(147,53,175,0.30); --a-tile2: #5B2A6E; --a-tile3: #2E1B3D; --a-tile1-pill: rgba(255,255,255,0.20); --a-tile1-pill-hov: rgba(255,255,255,0.32); } /* A4 · Encre — deep ink-navy, ivory, candle-bronze (between A1 and A3) */ html[data-palette="a4"] { --a-ground: #101426; --a-panel: #181D33; --a-ink: #EFEDE6; --a-muted: #9B99AC; --a-muted-lt: #BCBACB; --a-accent: #C08D52; --a-accent-lt: #D4A76C; --a-accent-ink: #140E06; --a-accent-soft: rgba(192,141,82,0.15); --a-glow: rgba(192,141,82,0.11); --a-rule: rgba(255,255,255,0.09); --a-rule-lt: rgba(255,255,255,0.17); --a-star: rgba(239,237,230,0.50); --a-tile2: #242B4E; --a-tile3: #181D33; } /* ── Fabien's deep-blue kits (2026-07-16, values Connor-approved via fabien-couleurs slug) ── */ /* A5 · Bleu profond & or — the recommended blue */ html[data-palette="a5"] { --a-ground: #0A1E45; --a-panel: #122A5C; --a-tint: #132550; --a-ink: #F2F0EA; --a-muted: #AEB4CC; --a-muted-lt: #B9BED2; --a-accent: #C9A35C; --a-accent-lt: #DDBC7E; --a-accent-ink: #14110A; --a-accent-soft: rgba(201,163,92,0.14); --a-glow: rgba(201,163,92,0.10); --a-rule: rgba(255,255,255,0.08); --a-rule-lt: rgba(255,255,255,0.15); --a-star: rgba(242,240,234,0.55); --a-tile2: #1B3C7E; --a-tile3: #122A5C; } /* A6 · Bleu profond & pourpre — a5 blues with the brand purple */ html[data-palette="a6"] { --a-ground: #0A1E45; --a-panel: #122A5C; --a-tint: #132550; --a-ink: #F2F0EA; --a-muted: #AEB4CC; --a-muted-lt: #B9BED2; --a-accent: #9335AF; --a-accent-lt: #A848C0; --a-accent-ink: #FFFFFF; --a-accent-soft: rgba(147,53,175,0.20); --a-glow: rgba(147,53,175,0.18); --a-rule: rgba(255,255,255,0.08); --a-rule-lt: rgba(255,255,255,0.15); --a-star: rgba(168,72,192,0.55); --a-tile2: #5B2A6E; --a-tile3: #2E1B3D; --a-tile1-pill: rgba(255,255,255,0.20); --a-tile1-pill-hov: rgba(255,255,255,0.32); } /* A7 · Bleu minuit & or — darkest of the blues */ html[data-palette="a7"] { --a-ground: #081226; --a-panel: #101E3C; --a-tint: #0D1A34; --a-ink: #F2F0EA; --a-muted: #A6ADC4; --a-muted-lt: #AFB6CB; --a-accent: #C9A35C; --a-accent-lt: #DDBC7E; --a-accent-ink: #14110A; --a-accent-soft: rgba(201,163,92,0.14); --a-glow: rgba(201,163,92,0.10); --a-rule: rgba(255,255,255,0.08); --a-rule-lt: rgba(255,255,255,0.15); --a-star: rgba(242,240,234,0.55); --a-tile2: #17295C; --a-tile3: #101E3C; } /* A9 · Bleu roi & or — richest blue, panels DARKER than the ground to rest the eye (reference page recommendation, 2026-07-16). Tint = the darker surface value. */ html[data-palette="a9"] { --a-ground: #143272; --a-panel: #0E2450; --a-tint: #0E2450; --a-ink: #F2F0EA; --a-muted: #B6BEDD; --a-muted-lt: #C3CAE4; /* Accent = amber orange, Fabien's request 2026-07-20 ("Maybe change Gold for an Amber Orange (#FF8C42)"). This replaces gold #C9A35C as the accent EVERYWHERE that reads --a-accent: eyebrows, rules, headline italic, icons, numerals, list markers, hover states. Tailwind maps accent -> var(--a-accent), so every text-accent / bg-accent utility follows from this one line. Gold survives ONLY on the Saturn mark in the favicon, which is identity. History: #FF8C42 -> #E9975A -> #EE9440 (each softened toward amber, on the reasoning that the first pick was 74% saturated against the 54% of the gold it replaced and read cheap on the navy). #EE9440 is NOT what ships. Connor landed on #FF7518 on 2026-07-21, a hotter and more saturated orange than any of those, and the whole 16-page site was reviewed and signed off on it. The comment below it used to still describe #EE9440 and was corrected on 2026-07-21 once the mismatch was spotted. MEASURED CONTRAST OF WHAT ACTUALLY SHIPS (#FF7518), WCAG 2.1: vs --a-ground #143272 ... 4.52:1 AA for normal text, by 0.02 vs --a-panel #0E2450 ... 5.63:1 AA for normal text vs white 2.69:1 NEVER put this on white as text For comparison: #EE9440 was 5.17 / 6.45 and the gold it replaced was 5.13 / 6.40. ⚠️ #FF7518 clears AA on --a-ground by 0.02, not by a margin. The accent is used at 11-19px in places, so 4.5:1 is a real floor, not a formality. Anything that darkens the ground, lightens the accent, or puts accent text over --a-accent-soft breaks it. If the colour is ever revisited, re-measure rather than eyeballing it. */ --a-accent: #FF7518; --a-accent-lt: #FF9A4D; --a-accent-ink: #14110A; --a-accent-soft: rgba(255,117,24,0.14); --a-glow: rgba(255,117,24,0.05); /* halved 2026-07-21: the orange wash was too strong */ --a-rule: rgba(255,255,255,0.10); --a-rule-lt: rgba(255,255,255,0.18); --a-star: rgba(242,240,234,0.55); --a-tile2: #1E439A; --a-tile3: #0E2450; } /* A8 · Bleu indigo & or — warmest/most violet of the blues */ html[data-palette="a8"] { --a-ground: #151C4E; --a-panel: #1E2762; --a-tint: #1A2158; --a-ink: #F2F0EA; --a-muted: #B0B4D0; --a-muted-lt: #BCBFDA; --a-accent: #C9A35C; --a-accent-lt: #DDBC7E; --a-accent-ink: #14110A; --a-accent-soft: rgba(201,163,92,0.14); --a-glow: rgba(201,163,92,0.10); --a-rule: rgba(255,255,255,0.08); --a-rule-lt: rgba(255,255,255,0.15); --a-star: rgba(242,240,234,0.55); --a-tile2: #2A3580; --a-tile3: #1E2762; } /* ── Header at tablet widths ────────────────────────────────────────────────── The desktop nav needs ~1036px (logo + 4 links + Librairie + lang switcher + Réserver CTA, whitespace-nowrap). Tailwind's md breakpoint (768px) switched to it too early: on tablets the CTA and lang switcher rendered off-viewport with no horizontal scroll (overflow-x clip) and the logo collided with the first link. Keep the hamburger until the nav genuinely fits. */ @media (min-width:768px) and (max-width:1079.98px){ header nav{ display:none !important; } header button[aria-label="Menu"]{ display:block !important; } #m-menu:not(.hidden){ display:flex !important; } } /* ── Self-hosted fonts (GDPR/CNIL — no Google CDN). latin-ext for œ Œ À É Ç. ── */ /* Fraunces — shared display face with the Les Anneaux de Saturne store (same headline voice = "same hand"); Spectral stays as this site's distinct body serif. */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('fonts/fraunces-var-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; } @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('fonts/fraunces-var-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300 700; font-display: swap; src: url('fonts/fraunces-italic-var-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; } @font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300 700; font-display: swap; src: url('fonts/fraunces-italic-var-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Spectral'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/spectral-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; } @font-face { font-family: 'Spectral'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/spectral-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Spectral'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/spectral-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; } @font-face { font-family: 'Spectral'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/spectral-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Spectral'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/spectral-italic-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; } @font-face { font-family: 'Spectral'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/spectral-italic-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ── Base typographic intent ──────────────────────────────────── */ html { font-size: 17px; } /* Guard: the oversized decorative dome/ring is meant to bleed past the viewport edges; clip horizontal overflow so it can't expand the mobile layout viewport (which otherwise dragged the hero text + fixed bars off the right edge). ⛔ ON BODY ONLY, NEVER ON HTML (2026-08-14). overflow-x:clip on the root made a 409px-tall clip container: everything painted below was NOT HIT-TESTABLE (tabs needed a magic hover point to click, elementFromPoint returned null), scrollTo/scrollIntoView and anchor jumps clamped, and the page scrollbar drew inset mid-window. One rule, five bugs, all reproduced then cured on the live render. clip does not create a scroll container, so body-only still clips the bleed without trapping scroll or hit-testing. */ body { overflow-x: clip; } body { font-family: 'Spectral', Georgia, serif; } /* Serif carries prose; small UI stays sans (nav links, buttons, eyebrows/badges, CTAs). */ button, nav a, [class*="uppercase"], a[class*="bg-purple"], a[class*="bg-accent"], .font-ui { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; } h1, h2, h3, .font-display { font-family: 'Fraunces', Georgia, serif; } /* Saturn mark — the shared brand glyph (planet + tilted ring), echoing the store's "Les Anneaux de Saturne". Same shape both brands carry; here in gold. */ .a-saturn { position: relative; width: 20px; height: 20px; display: inline-block; vertical-align: middle; flex: none; } .a-saturn::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; border: 1.5px solid var(--a-accent); } .a-saturn::after { content: ''; position: absolute; top: 8px; left: -1px; right: -1px; height: 5px; border-radius: 50%; border: 1px solid var(--a-accent-lt); transform: rotate(-18deg); } /* ── Brand A homepage components (parametrised on palette vars) ── */ .a-hero { position: relative; overflow: hidden; } .a-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 75% 50% at 50% 38%, var(--a-glow) 0%, transparent 65%), radial-gradient(ellipse 38% 26% at 50% 36%, rgba(255,255,255,0.04) 0%, transparent 55%); } /* (bottom fade removed — the wheel now clips flush at the hero's bottom edge, meeting the proof bar with a crisp line instead of a soft gradient) */ /* ⛔ .a-stars DELETED 2026-08-16 (Connor). The 2px specks read as dust or a dead pixel, never as stars, and he reported the same "random white dot" twice. The markup is gone from all 22 pages and the rules are gone with it so nothing can resurrect them by pasting the div back. The store never had them. Do not reintroduce a speck field on this estate. */ .a-eyebrow-pill { display: inline-flex; align-items: center; gap: 12px; padding: 8px 22px; border: 1px solid var(--a-rule-lt); border-radius: 100px; font-size: .68rem; color: var(--a-muted-lt); letter-spacing: .22em; text-transform: uppercase; } /* sparkle flourishes removed — a serious practitioner's eyebrow needs no ✦ (reads woo). */ .a-portrait-frame { position: relative; } .a-portrait-frame::before { content: ''; position: absolute; top: 14px; left: 14px; right: -14px; bottom: -14px; border: 1px solid var(--a-accent-soft); z-index: -1; } /* Portraits are shown in COLOUR (Connor 2026-07-13 — the grayscale grade is retired for good). */ .a-bw { filter: none; } /* The family stitch — the store's paper brand as a band on the night page. Georgia stands in for EB Garamond here (zero font cost on this site). */ .b-stitch { background: #F8F4EA; color: #1C1A17; font-family: Georgia, 'Times New Roman', serif; border-top: 3px double #C9A35C; border-bottom: 3px double #C9A35C; } .b-stitch .b-frame { border: 1px solid #1C1A17; outline: 1px solid #1C1A17; outline-offset: 3px; } /* Legacy celestial orbs — inner pages still use these until roll-across */ .orb { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; } .orb-1 { width: 260px; height: 260px; border: 1px solid var(--rule-lt); } .orb-2 { width: 160px; height: 160px; border: 1px solid var(--rule); } .orb-3 { width: 80px; height: 80px; border: 1px solid rgba(147, 53, 175, 0.2); } /* ⛔ THE ENGLISH BANNER (2026-08-13). Connor screenshotted the bar in English with the text almost invisible: dark grey on the navy. The French bar measured 13.29:1 and was fine, which is why every check passed. CAUSE: tarteaucitron.min.css contains `#tarteaucitronRoot *{ color:#333 }`, a universal selector. In French the text sits directly inside the elements restyled below, so those rules win. Switch to English and Google Translate rewraps every string in tags. A is not one of the selectors below, so nothing targets it and the universal #333 applies. 56 of them, and ALL 56 were inside the consent root: the other 228 elements on the translated page inherit correctly, so this is the banner only, not the site. FIX: make the injected wrapper transparent to colour. Everything below then reaches the text again, in both languages, without restating a single colour. */ #tarteaucitronRoot font { color: inherit !important; } /* ── Consent banner (tarteaucitron) — restyled to the .a-home system (2026-07-15). Driven by the --a-* palette variables so it follows data-palette. Filled pills only (no outlines, no underlined-text CTAs); Accept/Refuse equal weight per CNIL. */ /* ── THE CONSENT IS A CENTRED POP-UP CARD NOW (Connor 2026-08-14, from a reference shot: title, short sentence with the panel link inline, Accepter and Refuser side by side). This supersedes both 2026-08-13 bar layouts (page-column flex and the mobile grid). It stays NON-BLOCKING: no backdrop that eats clicks, because forcing a choice before the page can be used is a cookie wall and CNIL says no. The card floats, the page works. CNIL balance kept: Accepter and Refuser are the same size, both filled pills. */ #tarteaucitronRoot #tarteaucitronAlertBig, #tarteaucitronRoot #tarteaucitronAlertSmall { background: var(--a-panel) !important; color: var(--a-ink) !important; font-family: system-ui, -apple-system, sans-serif !important; box-sizing: border-box !important; } #tarteaucitronRoot #tarteaucitronAlertBig{ position: fixed !important; top: 50% !important; left: 50% !important; bottom: auto !important; right: auto !important; transform: translate(-50%,-50%) !important; width: min(400px, calc(100vw - 32px)) !important; padding: 26px 26px 22px !important; border: 1px solid color-mix(in srgb, var(--a-ink) 14%, transparent) !important; border-radius: 18px !important; box-shadow: 0 24px 70px rgba(0,0,0,.5) !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; align-items: stretch !important; text-align: left !important; } /* Serif title above the sentence, matching the reference card's heading row. */ /* The title is injected as .tac-cardtitle by consent.js (a ::before cannot be translated). */ #tarteaucitronRoot .tac-cardtitle{ display: block !important; font-family: 'Fraunces', Georgia, serif !important; font-weight: 500 !important; font-style: normal !important; font-size: 1.35rem !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--a-ink) !important; margin: 0 0 10px !important; } #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert{ grid-column: 1 / -1 !important; display: block !important; margin: 0 0 6px !important; } #tarteaucitronRoot #tarteaucitronDisclaimerAlert, #tarteaucitronRoot #tarteaucitronDisclaimerAlert b, #tarteaucitronRoot #tarteaucitronDisclaimerAlert span { color: var(--a-ink) !important; font-size: .78rem !important; line-height: 1.45 !important; margin: 0 !important; padding: 0 !important; } /* TWO pills only (Connor 2026-08-07: "four separate buttons just for cookies is unnecessary"). Accept and Refuse keep equal filled weight (CNIL); Personalise and the policy link demote to quiet underlined text — still present, still clickable. */ #tarteaucitronRoot .tarteaucitronCTAButton, #tarteaucitronRoot #tarteaucitronCloseAlert, #tarteaucitronRoot #tarteaucitronPersonalize, #tarteaucitronRoot #tarteaucitronPrivacyUrl { display: inline-flex !important; align-items: center !important; justify-content: center !important; font-family: system-ui, -apple-system, sans-serif !important; font-size: .68rem !important; font-weight: 600 !important; letter-spacing: .07em !important; text-transform: uppercase !important; text-decoration: none !important; cursor: pointer !important; padding: 8px 17px !important; border: 0 !important; border-radius: 100px !important; margin: 3px !important; line-height: 1.2 !important; } /* Accept = primary fill, Refuse = light fill — equal prominence, both filled */ #tarteaucitronRoot .tarteaucitronAllow { background: var(--a-accent) !important; color: var(--a-accent-ink) !important; } #tarteaucitronRoot .tarteaucitronDeny { background: var(--a-ink) !important; color: var(--a-ground) !important; } /* Personalise + privacy = text links, not pills (ids outrank the class rule above) */ #tarteaucitronRoot #tarteaucitronCloseAlert, #tarteaucitronRoot #tarteaucitronPersonalize, #tarteaucitronRoot #tarteaucitronPrivacyUrl { background: none !important; color: var(--a-muted-lt) !important; font-size: .63rem !important; font-weight: 500 !important; letter-spacing: .06em !important; padding: 5px 7px !important; border-radius: 0 !important; text-decoration: underline !important; text-underline-offset: 3px !important; } #tarteaucitronRoot #tarteaucitronCloseAlert:hover, #tarteaucitronRoot #tarteaucitronPersonalize:hover, #tarteaucitronRoot #tarteaucitronPrivacyUrl:hover { color: var(--a-ink) !important; } #tarteaucitronRoot #tarteaucitronClosePanel { background: var(--a-panel) !important; color: var(--a-ink) !important; } /* ── THE PERSONALISE PANEL (2026-08-13) ───────────────────────────────────────────────── Connor: "it pops up and the text is black, not white, on a blue background". He was looking at the PANEL, not the bar. The bar was already correct, measured at 13.29:1 cream on navy. The panel behind "Personnaliser" had never been touched at all: pure white ground with rgb(0,0,0) headings and body, tarteaucitron's factory styling, dropped into the middle of a dark navy site. It only appears after a click, which is why it survived every visual pass of the page itself. Everything below is the same --a-* palette the rest of the banner already uses. */ #tarteaucitronRoot #tarteaucitron, #tarteaucitronRoot #tarteaucitronServices, #tarteaucitronRoot #tarteaucitronInfo, #tarteaucitronRoot .tarteaucitronBorder, #tarteaucitronRoot #tarteaucitronMainLineOffset, #tarteaucitronRoot .tarteaucitronMainLine, #tarteaucitronRoot .tarteaucitronLine { background: var(--a-panel) !important; color: var(--a-ink) !important; border-color: color-mix(in srgb, var(--a-ink) 14%, transparent) !important; } #tarteaucitronRoot #tarteaucitron { border-radius: 16px !important; overflow: hidden !important; border: 1px solid color-mix(in srgb, var(--a-ink) 14%, transparent) !important; } /* Every text node in the panel, including the ones tarteaucitron colours inline. */ #tarteaucitronRoot #tarteaucitron h1, #tarteaucitronRoot #tarteaucitron h2, #tarteaucitronRoot #tarteaucitron h3, #tarteaucitronRoot #tarteaucitron p, #tarteaucitronRoot #tarteaucitron span, #tarteaucitronRoot #tarteaucitron li, #tarteaucitronRoot #tarteaucitron div, #tarteaucitronRoot .tarteaucitronH1, #tarteaucitronRoot .tarteaucitronH2, #tarteaucitronRoot .tarteaucitronH3, #tarteaucitronRoot .tarteaucitronName, #tarteaucitronRoot .tarteaucitronName b { color: var(--a-ink) !important; } #tarteaucitronRoot .tarteaucitronH1 { font-family: 'Fraunces', serif !important; font-weight: 500 !important; letter-spacing: -.01em !important; } #tarteaucitronRoot #tarteaucitron p, #tarteaucitronRoot .tarteaucitronH3 { color: var(--a-muted-lt) !important; } /* The two readmore links were #424242 on white, which is invisible on navy. */ #tarteaucitronRoot .tarteaucitronReadmoreInfo, #tarteaucitronRoot .tarteaucitronReadmoreOfficial, #tarteaucitronRoot .tarteaucitronSelfLink { color: var(--a-muted-lt) !important; background: none !important; text-decoration: underline !important; text-underline-offset: 3px !important; } #tarteaucitronRoot .tarteaucitronReadmoreInfo:hover, #tarteaucitronRoot .tarteaucitronReadmoreOfficial:hover { color: var(--a-accent) !important; } /* The category headers were solid amber slabs. They are section labels, not actions, so they sit quiet with an amber marker instead of competing with the real buttons. */ #tarteaucitronRoot #tarteaucitronServices .tarteaucitronTitle button { background: color-mix(in srgb, var(--a-ink) 8%, transparent) !important; color: var(--a-ink) !important; border-radius: 8px !important; border-left: 3px solid var(--a-accent) !important; font-weight: 600 !important; letter-spacing: .04em !important; } #tarteaucitronRoot .tarteaucitronBorder { border: 0 !important; } #tarteaucitronRoot #tarteaucitronBack { background: #000 !important; opacity: .72 !important; } /* The save footer is its own element and kept an inline white ground, which left a white strip across the bottom of an otherwise navy panel. Found by scanning every element inside the root for a light background over 200px wide rather than by eye. */ #tarteaucitronRoot #tarteaucitronSave { background: var(--a-panel) !important; border-top: 1px solid color-mix(in srgb, var(--a-ink) 14%, transparent) !important; padding: 14px 20px !important; } /* Buttons row: Accepter and Refuser share the grid's two columns at every width; the Personnaliser text link sits under them, centred, full row. Sizes below the card title are the same at 390 and 1440 because the card itself barely changes width. min-width:0 + normal wrapping (Connor 2026-08-14): a cached vendor lang served the long OLD labels, Translate stretched them further, and the pills overflowed their grid cells into each other. Cells must be able to shrink and labels must be able to wrap, whatever words end up inside them. */ #tarteaucitronRoot #tarteaucitronAlertBig .tarteaucitronAllow, #tarteaucitronRoot #tarteaucitronAlertBig .tarteaucitronDeny{ margin: 0 !important; width: 100% !important; min-width: 0 !important; white-space: normal !important; overflow-wrap: anywhere !important; padding: 11px 8px !important; text-align: center !important; line-height: 1.2 !important; } #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPrivacyUrl, #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronCloseAlert, #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize{ grid-column: 1 / -1 !important; margin: 2px 0 0 !important; justify-self: center !important; } /* ── Motion (restrained · reduced-motion-safe · no-JS-safe via .js-motion) — 2026-06-19 ── */ .js-motion [data-reveal], .js-motion [data-reveal-stagger] > * { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); } .js-motion [data-reveal].is-in, .js-motion [data-reveal-stagger].is-in > * { opacity: 1; transform: none; } .js-motion [data-reveal-stagger].is-in > * { transition-delay: var(--d, 0ms); } @keyframes a-pulse { 0%, 100% { opacity: .65; } 50% { opacity: 1; } } /* ── CTA buttons — robust labels: centre the text vertically + horizontally, balance multi-line wrapping, and (via flex-parent stretch) keep side-by-side pairs equal height. Matters once GTranslate lengthens labels (e.g. EN "The Complete Collection — 18 Books"). Added 2026-06-20. Targets the shared button shape (rounded-[2px]) on links/buttons only — not inputs. */ /* Auto-width buttons (most CTAs): inline-flex, centred, shrink to content. */ a[class~="rounded-[2px]"]:not([class~="block"]):not([class~="w-full"]), button[class~="rounded-[2px]"]:not([class~="block"]):not([class~="w-full"]) { display: inline-flex; align-items: center; justify-content: center; } /* Full-width / block buttons (liens, forms): flex, centred, keep full width. */ a[class~="rounded-[2px]"][class~="block"], a[class~="rounded-[2px]"][class~="w-full"], button[class~="rounded-[2px]"][class~="block"], button[class~="rounded-[2px]"][class~="w-full"] { display: flex; align-items: center; justify-content: center; } /* All buttons: centre + balance multi-line wrapping (robust to translated/lengthened labels). */ a[class~="rounded-[2px]"], button[class~="rounded-[2px]"] { text-align: center; text-wrap: balance; line-height: 1.3; } /* ── Editorial creative layer (homepage art-direction, 2026-06-27) ────────── Adds a "spine" to the page so it reads as art-directed, not a stack of centred boxes. Pure layer on top of the palette tokens — no colour/font changes. */ /* Short accent rule used in numbered section headers + stat cells. */ .a-rule-accent { display:inline-block; width:46px; height:1px; background:var(--a-accent); flex:none; } /* Hero "observatory plate" — a thin inset frame with corner meta labels, like an astronomical record card. Echoes the brand name "L'observatoire de nuit". */ .a-plate { position:absolute; inset:24px; border:1px solid var(--a-rule); pointer-events:none; z-index:1; } .a-plate-meta { position:absolute; font-family:system-ui,-apple-system,sans-serif; font-size:.58rem; letter-spacing:.26em; text-transform:uppercase; color:var(--a-muted); background:var(--a-ground); padding:0 10px; white-space:nowrap; } .a-plate-meta.tl{ top:-7px; left:20px; } .a-plate-meta.tr{ top:-7px; right:20px; } .a-plate-meta.bl{ bottom:-7px; left:20px; } .a-plate-meta.br{ bottom:-7px; right:20px; } @media (max-width:680px){ .a-plate{ inset:12px; } .a-plate-meta.bl, .a-plate-meta.br{ display:none; } .a-plate-meta.tl, .a-plate-meta.tr{ font-size:.5rem; letter-spacing:.2em; } } /* Oversized zodiac degree-ring as a rising dome/horizon — anchored below the hero's bottom edge so only the top arc sweeps up into view, signs riding the curve. */ .a-dome { position:absolute; left:50%; bottom:0; width:min(118vw,1150px); aspect-ratio:1; transform:translate(-50%,60%); pointer-events:none; z-index:0; color:var(--a-accent); opacity:.13; } /* Static + faint + low: a quiet horizon, not a spinning centrepiece behind the text. */ /* Vertical rotated spine label (portrait frame). */ .a-vlabel{ writing-mode:vertical-rl; text-orientation:mixed; font-family:system-ui,sans-serif; font-size:.58rem; letter-spacing:.3em; text-transform:uppercase; color:var(--a-muted); } /* Corner ticks for framed figures. */ .a-corners::before, .a-corners::after{ content:''; position:absolute; width:14px; height:14px; border:1px solid var(--a-accent); pointer-events:none; } .a-corners::before{ top:8px; left:8px; border-right:0; border-bottom:0; } .a-corners::after{ bottom:8px; right:8px; border-left:0; border-top:0; } /* ── Aliza-pattern components (homepage rebuild 2026-07-13) ────────────────── Slim top promo bar + a generic crossfade rotator (shared by the promo bar and the hero micro-line). Layout for the new bands is Tailwind; these are the bits Tailwind can't express. */ /* Slim announcement / promo bar, sits above the nav, site-wide. */ .a-announce { /* Same colour as the hero marquee band — one extra shade on the page, used twice, so the top bar and the band read as the same object (Connor 2026-07-19). */ background: color-mix(in srgb, var(--a-tint) 72%, #000); /* No rule between the announce bar and the header: they are the same colour, so the line was the only thing splitting one strip into two. Slimmer too (Connor 2026-07-20). */ border-bottom: 0; color: var(--a-muted-lt); } .a-announce > [data-rotate]{ height:30px; } .a-announce a{ font-size:.78rem; letter-spacing:.015em; } /* ⛔ NOT all caps (Connor 2026-08-11), reversing the 2026-07-19 decision to match the nav. The line carries real sentences and a proper noun now ("Découvrez les 18 ouvrages réédités par Les Anneaux de Saturne"), and setting a book title in caps loses the capital that marks it as a name. Sentence case, so it is read rather than scanned; size up and tracking down to suit, since lowercase at .66rem/.1em reads smaller than the caps it replaces. Still no underline: the whole line is the link and the arrow nudges on hover. */ .a-announce a { color: var(--a-muted-lt); text-transform: none; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; transition: color .25s ease; } .a-announce a .ar { color: var(--a-accent-lt); transition: transform .25s ease; } .a-announce a:hover { color: var(--a-ink); } .a-announce a:hover .ar { transform: translateX(3px); } /* Phone (Connor 2026-08-07): the rotating lines wrapped to two squeezed rows inside the fixed-height bar. Tighter type, one line, never wraps. */ @media (max-width:640px){ .a-announce a{ font-size:.56rem; letter-spacing:.03em; white-space:nowrap; gap:6px; } } /* Generic crossfade rotator: overlap children in one grid cell, fade the active one. Markup:
……
*/ [data-rotate] { display: grid; align-items: center; justify-items: center; } [data-rotate] > * { grid-area: 1 / 1; opacity: 0; transition: opacity .6s ease; pointer-events: none; } [data-rotate] > .is-on { opacity: 1; pointer-events: auto; } @media (prefers-reduced-motion: reduce) { [data-rotate] > * { transition: none; } } /* Hero portrait (right column) — editorial frame with an offset gold hairline and a soft bottom fade so a phone photo melts into the dark ground. */ .a-hero-photo { position: relative; } .a-hero-photo img { filter: none; } .a-hero-photo::before { content: ''; position: absolute; top: 16px; left: 16px; right: -16px; bottom: -16px; border: 1px solid var(--a-accent-soft); z-index: -1; } .a-hero-photo::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 55%, rgba(7,7,13,.75) 100%); } /* Small book spine covers for the "author of 18 books" strip. */ .a-spine { box-shadow: 0 6px 22px -10px rgba(0,0,0,.6); } /* Global keyboard-focus visibility + anchor offset (site-wide consistency; homepage applied these per-element, this lifts them to every page). */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 2px; border-radius: 2px; } :where([id]) { scroll-margin-top: 6rem; } /* ═══════════════════════════════════════════════════════════════════════════ HOMEPAGE — FRESH RESTART 2026-07-13 (scope: .a-home) Aliza-Kelly-mapped structure, dark-but-playful register on the purple palette (a2 default). Ports the Les Anneaux de Saturne store's proven polish — lift cards, generous section rhythm, centred header blocks, a WORKING palette pill — re-skinned to the --a-* tokens. RULES BAKED IN: every button is filled (never outline, never hyperlink-text); colours are flat solid (no gradients); the hero uses a COLOUR photo (no grayscale). Bespoke classes live here in tokens.css (copied, never purged) so they can't be dropped by the Tailwind purge. ═══════════════════════════════════════════════════════════════════════════ */ .a-home{ position:relative; overflow-x:clip; } .a-home *{ box-sizing:border-box; } .a-home .ah-wrap{ max-width:1200px; margin:0 auto; padding:0 clamp(20px,5vw,34px); } .a-home .ah-sec{ padding:clamp(64px,9vw,108px) 0; position:relative; } /* No hairline borders on tinted sections — they read as a stray outline (Connor 2026-07-14). */ .a-home .ah-sec.tint{ background:var(--a-tint); } .a-home .ah-sec.plate{ background:color-mix(in srgb, var(--a-tint) 72%, #000); } /* Cards inside a tinted section drop to ground so they stay visible (panel-on-panel blends). */ .a-home .ah-sec.tint .ah-inc{ background:var(--a-ground); } /* ── Buttons — filled only. Three fills, all coloured, zero outlines. ────────── */ .a-home .ah-btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:system-ui,-apple-system,sans-serif; font-size:.8rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; cursor:pointer; padding:15px 30px; border:0; border-radius:100px; white-space:normal; max-width:100%; line-height:1.3; text-align:center; /* wrap, never overflow (Connor + Fabien 2026-08-14) */ transition:transform .18s ease, background-color .18s ease, box-shadow .18s ease; } /* Full-width buttons must be allowed to wrap — a nowrap label (e.g. "En savoir plus — 888 €") sets a min-content floor that stops its grid track shrinking, overflowing the card. */ .a-home .ah-btn.full{ white-space:normal; text-wrap:balance; line-height:1.3; } /* No coloured glow — the accent halo read as "too much hue" (Connor 2026-07-13). Flat fills. */ .a-home .ah-btn.primary{ background:var(--a-accent); color:var(--a-accent-ink); } .a-home .ah-btn.primary:hover{ background:var(--a-accent-lt); transform:translateY(-2px); } .a-home .ah-btn.light{ background:var(--a-ink); color:var(--a-ground); } .a-home .ah-btn.light:hover{ background:#fff; transform:translateY(-2px); } .a-home .ah-btn.soft{ background:var(--a-accent-soft); color:var(--a-accent-lt); } .a-home .ah-btn.soft:hover{ background:color-mix(in srgb, var(--a-accent) 30%, transparent); color:var(--a-ink); } /* Quiet in-card CTA (Connor 2026-08-09): fills with the body-text lilac so it sits INSIDE the card's palette instead of shouting orange; the orange arrives on hover only. */ .a-home .ah-btn.quiet{ background:var(--a-muted-lt); color:var(--a-ground); } .a-home .ah-btn.quiet:hover{ background:var(--a-accent); color:var(--a-accent-ink); transform:translateY(-2px); } /* A bare CTA straight after a hero lede gets air — the compagnonnage hero button sat glued to the paragraph (Connor 2026-08-09). */ .a-home .lede + .ah-btn{ margin-top:clamp(22px,3vw,30px); } .a-home .ah-btn.lg{ padding:18px 40px; font-size:.85rem; } .a-home .ah-btn.sm{ padding:11px 20px; font-size:.72rem; } .a-home .ah-btn.full{ width:100%; } /* ── Section header block (store .chead, re-skinned) ────────────────────────── */ .a-home .ah-eyebrow{ font-family:system-ui,sans-serif; font-size:.7rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--a-accent); } .a-home .ah-chead{ text-align:center; max-width:640px; margin:0 auto clamp(40px,5vw,56px); } .a-home .ah-chead h2{ font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:clamp(1.9rem,4vw,2.9rem); line-height:1.1; margin:14px 0 0; letter-spacing:-.01em; text-wrap:balance; } /* Sub must sit NARROWER than the heading above it — it ran wider, which looked wrong. */ .a-home .ah-chead p{ color:var(--a-muted-lt); line-height:1.75; margin:18px auto 0; font-size:1.02rem; max-width:52ch; text-wrap:pretty; } /* Wide variant — statement sections (e.g. the problem band) breathe wider, less boxed-in. */ .a-home .ah-chead.wide{ max-width:900px; } .a-home .ah-chead.wide p{ max-width:64ch; } .a-home .ah-chead .em{ color:var(--a-accent); font-style:italic; } /* ── Lift card (store .pcard mechanic) ──────────────────────────────────────── */ .a-home .ah-card{ background:var(--a-panel); border:1px solid var(--a-rule); border-radius:20px; padding:clamp(26px,3vw,36px); transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .a-home .ah-card:hover{ transform:translateY(-5px); border-color:color-mix(in srgb, var(--a-accent) 55%, transparent); box-shadow:0 30px 60px -32px rgba(0,0,0,.8); } /* ── Hero ───────────────────────────────────────────────────────────────────── */ /* overflow:visible (Connor 2026-07-19) so the cut-out portrait can run past the bottom of the hero and disappear behind the marquee band. (The star field that used to clip itself here was deleted 2026-08-16; nothing else in the hero relies on this being visible.) */ .a-home .ah-hero{ position:relative; overflow:visible; } /* align-items:end, NOT center (Connor 2026-07-20). Centred, the photo column re-centres against the text column, so the cut-out floats instead of standing on the section edge. Bottom-aligned, his feet sit flush with where the next section begins and the copy above can change length without lifting him. */ .a-home .ah-hero-grid{ display:grid; grid-template-columns:1.22fr .78fr; gap:clamp(48px,7vw,104px); align-items:end; } .a-home .ah-pill{ display:inline-flex; align-items:center; gap:10px; padding:9px 20px; border-radius:100px; background:var(--a-accent-soft); color:var(--a-accent-lt); font-family:system-ui,sans-serif; font-size:.68rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; } /* 6.4vw/5.8rem -> 5.2vw/4.7rem (Connor 2026-08-07): the headline dwarfed the portrait and, with the columns bottom-aligned, the smaller size also sits the text lower in the section. */ .a-home .ah-h1{ font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:clamp(2.7rem,5.2vw,4.7rem); line-height:.98; letter-spacing:-.025em; margin:0 0 30px; text-wrap:balance; } .a-home .ah-h1 em{ font-style:italic; font-weight:400; color:var(--a-accent); } .a-home .ah-lead{ color:var(--a-muted-lt); font-size:clamp(1rem,1.5vw,1.14rem); line-height:1.8; max-width:46ch; margin-bottom:30px; } .a-home .ah-hero-cta{ display:flex; flex-wrap:wrap; gap:13px; margin-bottom:0; } .a-home .ah-priceline{ font-family:system-ui,sans-serif; font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:var(--a-muted); margin-bottom:28px; } .a-home .ah-priceline b{ color:var(--a-accent); font-weight:700; } .a-home .ah-rotate{ display:flex; align-items:center; gap:14px; border-top:1px solid var(--a-rule); padding-top:24px; } .a-home .ah-rotate .r{ font-family:'Fraunces',serif; font-style:italic; font-size:1.05rem; color:var(--a-muted-lt); justify-items:start; } /* Hero photo — built for a CUT-OUT PNG of Fabien (transparent background) floating over an ABSTRACT organic shape, not a templated offset rectangle. Muted accent, low opacity — the flat bright-purple panel read as "pink / templated" (Connor 2026-07-13). No card, no border. */ .a-home .ah-photo{ position:relative; } .a-home .ah-photo::before{ /* a plain CIRCLE behind the cut-out — the organic blob + stray outline looked awful (Connor). */ content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:96%; aspect-ratio:1; border-radius:50%; z-index:0; background:color-mix(in srgb, var(--a-accent) 26%, var(--a-ground)); } .a-home .ah-photo-frame{ position:relative; z-index:1; aspect-ratio:4/5; display:flex; align-items:flex-end; justify-content:center; } .a-home .ah-photo-frame img{ width:100%; height:100%; object-fit:contain; object-position:bottom center; display:block; } /* Real photo, clipped to a circle sitting on the ::before accent circle (a slim ring of it stays visible). A future transparent cut-out PNG just drops the .circ class. */ /* 100%, not 90%: at 90% a ring of the ::before circle showed around the photo and read as a thick grey-blue border (Connor 2026-07-19). The photo now covers the circle completely and fills more of the hero. A transparent cut-out PNG would drop .circ and let the ring show. */ .a-home .ah-photo-frame img.circ{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:50%; } /* CUT-OUT variant: no disc behind, no circle clip. He is pushed down so his lower half passes behind the marquee band (which sits on the darker navy and paints over him), leaving only the top of him sticking out above the bar. */ .a-home .ah-photo.cutout::before{ display:none; } /* He is the hero image, not a corner ornament: bigger than his column, head level with the headline, and pulled in off the right edge (Connor 2026-07-19). */ .a-home .ah-photo.cutout{ transform:none; } .a-home .ah-photo.cutout .ah-photo-frame{ position:relative; aspect-ratio:4/5; } /* Sized by WIDTH and anchored past the bottom of its box, so he grows downward into the marquee band instead of floating above it. */ /* bottom:0, not a negative offset (Connor 2026-07-20). The negative value dates from when a marquee band sat under the hero for him to disappear behind. Fabien had that band DELETED in feedback round 1, so the offset was left hanging him 64px over the next section with nothing to meet — which read as floating. At 0 his feet land exactly on the section edge. */ .a-home .ah-photo.cutout img{ /* Cancels the hero's own padding-bottom EXACTLY, so his feet land ON the section boundary. ⛔ These two numbers have to match and they DRIFTED (found 2026-08-05): the hero's inline padding-bottom had been changed to clamp(44px,5.6vw,88px) while this still cancelled clamp(36px,4.4vw,66px), leaving him hanging 15px at 1280, 17px at 1440 and 22px at 1680 — which reads as floating above the line. They are now ONE value: --hero-pad-b is declared on the hero section in index.html and used for both its padding and this offset, so they cannot drift apart again. The fallback keeps it correct if the variable is ever dropped. */ /* left 47% -> 41% and wider (Connor 2026-08-07): he sat too far right, cropped by the viewport edge, and read small against the headline. */ position:absolute; left:41%; bottom:calc(var(--hero-pad-b, clamp(44px,5.6vw,88px)) * -1); transform:translateX(-50%); width:128%; max-width:none; height:auto; object-fit:contain; filter:drop-shadow(0 22px 38px rgba(0,0,0,.38)); } /* ⛔ HIS HEAD MUST CLEAR THE STICKY NAV (Connor 2026-08-05). His size came only from column width (126% of the frame) with nothing tying it to the space between the nav and the bottom of the hero. The hero gets shorter faster than he does, so below ~1440px his head went behind the nav and at 1100px he also overflowed the viewport. Measured before: head vs nav bottom was -31px at 1100, -25px at 1280, -1px at 1440. Two guards, because one is not enough on its own: 1. narrower below 1500px, which is where the crop happened; 2. a hard max-height tied to the viewport, so no future content change can push him back under the nav no matter how short the hero gets. Above 1500px nothing changes - he was already clearing by 31px there and Connor wants him big. */ /* ⛔ HE MUST NOT JUMP SIZE AS THE WINDOW RESIZES, AND HIS HEAD MUST CLEAR THE NAV (Connor 2026-08-10, replacing the 2026-08-05 guards below). He was sized by WIDTH off his own column — 128% base, 122% (1280–1500), 118% (1024–1280), back to 128% under 1024, 104% under 900 — so dragging the window resized him in visible steps, and the step boundaries are why he "shrinks drastically". Measured before, image top against nav bottom: +22px at 1680, +31 at 1440, +11 at 1280, +21 at 1100 and −24px at 1000, i.e. below 1024 his head went BEHIND the nav. Now ONE continuous rule, no breakpoints: his feet stay pinned to the section boundary, his height is a percentage of the hero row so the gap under the nav is proportional and can never close, and his RIGHT edge is pinned to the content column — he grows LEFTWARD, never further right and never off the viewport. Width follows from the aspect ratio. The old max-height:calc(100vh - 150px) is gone with them: it clamped him against the VIEWPORT rather than the hero, which is the other half of the drastic shrink. */ @media (min-width:981px){ /* His cell is pulled out through the hero's own padding, top and bottom, so its height IS the hero's height. That is the whole trick: height:90% below is then 90% of the HERO, so the clear space under the nav is 10% of the hero at every width by construction, not a number that happens to work at 1440. Sizing him against the wrap instead leaves the gap swinging 13.7% → 6.2% between 1680 and 1000, which is what it did on the first attempt. */ .a-home .ah-photo.cutout{ align-self:stretch; margin-top:calc(var(--hero-pad-t, clamp(52px,6vw,104px)) * -1); margin-bottom:calc(var(--hero-pad-b, clamp(44px,5.6vw,88px)) * -1); } .a-home .ah-photo.cutout .ah-photo-frame{ height:100%; aspect-ratio:auto; } .a-home .ah-photo.cutout img{ left:auto; right:0; bottom:0; transform:none; height:90%; width:auto; max-width:none; max-height:none; } } /* Placeholder shown until Fabien's real cut-out PNG lands. */ .a-home .ah-photo-ph{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; padding:24px; color:var(--a-ink); opacity:.75; } .a-home .ah-photo-ph .glyph{ width:56px; height:56px; opacity:.7; } .a-home .ah-photo-ph .lab{ font-family:system-ui,sans-serif; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; line-height:1.7; } /* ── Stat / proof band ──────────────────────────────────────────────────────── */ /* ── Stats band (Connor 2026-07-20) ──────────────────────────────────────────── Its own strip between About and the books, not a block inside the About column. Figure on top, white label beneath, a single hairline between each pair. Equal columns with the divider on the ::before of items 2-4, so the row reads as one object with three separators rather than four boxed cells. */ /* Dark ground (Connor 2026-07-20): as a band the same colour as the sections either side it read as more of the same page. On the panel colour it does the job of separating About from the books strip. */ /* Tighter than a normal section (Connor 2026-07-20): it is a band of figures, not a section in its own right, so it does not need full section padding top and bottom. */ .a-home .ah-statband{ padding:clamp(24px,2.8vw,38px) 0; background:var(--a-panel); } .a-home .ah-statband-row{ display:grid; grid-template-columns:repeat(5,1fr); align-items:start; border-top:1px solid var(--a-rule); border-bottom:1px solid var(--a-rule); padding:clamp(24px,3vw,34px) 0; } /* .thin — Fabien 2026-08-11, "much thinner and more discreet, not as tall or prominent". Applied where the band sits directly under the hero. Padding roughly halves and the figure drops about a third, so the strip reads as a credibility line attached to the hero rather than a section competing with it. The rules and labels are untouched: it is the height that was the complaint, not the contents. */ /* OPTION B, chosen by Connor 2026-08-13, with one change to the version he picked: the ground is the footer's deep navy, color-mix(--a-tint 72% + black), NOT the oklch near-black I had mocked. Same depth on screen, but it is a tone the design already uses twice (the footer and the review cards), so the band separates from the royal blue above and below without adding a colour that exists nowhere else. That was my only objection to B and this removes it. FULL BLEED: the bar used to sit inside the 1200px content column, which is why the first figure did not line up with the left edge of the screen. */ .a-home .ah-statband.thin{ padding:0; background:color-mix(in srgb, var(--a-tint) 72%, #000); } .a-home .ah-statband.thin > .ah-wrap{ max-width:none; padding:0 clamp(20px,4vw,48px); } .a-home .ah-statband.thin .ah-statband-row{ border-top:0; border-bottom:0; padding:clamp(24px,2.6vw,34px) 0; } .a-home .ah-statband.thin .n{ font-size:clamp(1.55rem,2.7vw,2.3rem); } .a-home .ah-statband.thin .l{ margin-top:9px; font-size:.6rem; letter-spacing:.15em; color:var(--a-muted); } .a-home .ah-statband-row .s{ position:relative; text-align:center; padding:0 clamp(12px,2vw,24px); } .a-home .ah-statband-row .s + .s::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:2.6em; background:var(--a-rule); } .a-home .ah-statband-row .n{ /* Bigger and heavier (Connor 2026-07-20): the band read as low-contrast filler because the figures leaned on colour alone for emphasis. Size and weight do the work; the colour is then an accent rather than the only signal. */ display:block; font-family:'Fraunces',serif; font-weight:600; font-size:clamp(1.75rem,2.9vw,2.45rem); line-height:1.05; color:var(--a-accent); /* No hyphens:auto here. "Astrocartographie" hyphenated across three lines in the old numeric slot; it is allowed to sit smaller and wrap naturally instead. */ overflow-wrap:break-word; } .a-home .ah-statband-row .l{ display:block; margin-top:8px; font-family:system-ui,sans-serif; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--a-ink); line-height:1.6; } @media (max-width:860px){ /* was 760: at 761-860 the 5-col row clipped "Astrocartographie" off the edge (FR sweep 2026-08-14) */ /* Phone (Connor 2026-08-07): the panel-dark band read as a wrong-coloured block once it stacked, and the single column ran four screens of lonely figures. On the page ground it reads as part of the flow, and 2x2 keeps it to one glance. The word-stat sits smaller: "Astrocartographie" does not fit a half-column at figure size. */ .a-home .ah-statband{ background:var(--a-ground); } /* extra .ah-statband in the selector: the desktop "rules removed" reset further down (border-top:0) is later in the file and would win at equal specificity */ /* Round 3 (Connor 2026-08-07): 2x2 paired a long word against a short figure and the columns read uneven. THREE figures share one equal row; "Astrocartographie" is not a figure, so it takes its own full-width line beneath — nothing left to be unequal. */ /* Four figures now, not three (2026-08-11): "1000+ consultations" joined the band, so the figures go 2x2 and the word-stat keeps its own full-width line beneath. The nth-child targets moved 4 -> 5 with it. Getting this wrong is silent: the word would drop back into a numeric half-column and hyphenate, which is the exact fault round 3 fixed. */ .a-home .ah-statband .ah-statband-row{ grid-template-columns:repeat(2,1fr); gap:0; border-top:1px solid var(--a-rule); border-bottom:1px solid var(--a-rule); padding:24px 0; row-gap:20px; } .a-home .ah-statband-row .s{ padding:0 8px; } .a-home .ah-statband-row .s:nth-child(3)::before{ display:none; } .a-home .ah-statband-row .s:nth-child(5){ grid-column:1 / -1; margin-top:22px; padding:0; } .a-home .ah-statband-row .s:nth-child(5)::before{ display:none; } /* sized to SPAN the row, not sit small in the middle of it (Connor 2026-08-07 round 4) */ .a-home .ah-statband-row .s:nth-child(5) .n{ font-size:clamp(1.6rem,8.6vw,2.1rem); line-height:1.15; } .a-home .ah-statband-row .l{ font-size:.52rem; letter-spacing:.1em; } /* .thin at 390. Measured at 273px tall on first render, which is a third of the viewport for a strip that is meant to be a credibility line, and phones are where this page is actually read. The four FIGURES come down and the gaps tighten. "Astrocartographie" is deliberately left at its spanning size: Connor's round 4 on 2026-08-07 sized it to span the row rather than sit small in the middle of it, and shrinking it would undo that. */ .a-home .ah-statband.thin{ padding:0; background:color-mix(in srgb, var(--a-tint) 72%, #000); } .a-home .ah-statband.thin .ah-statband-row{ border-top:0; border-bottom:0; padding:24px 0; row-gap:18px; } .a-home .ah-statband.thin .n{ font-size:clamp(1.35rem,6.2vw,1.8rem); } .a-home .ah-statband.thin .s:nth-child(5){ margin-top:18px; } .a-home .ah-statband.thin .s:nth-child(5) .n{ font-size:clamp(1.6rem,8.6vw,2.1rem); } .a-home .ah-statband.thin .l{ margin-top:7px; font-size:.52rem; letter-spacing:.11em; } } .a-home .ah-mini-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,26px); margin:22px 0 26px; } .a-home .ah-mini-stats .s{ display:flex; flex-direction:column; gap:8px; } .a-home .ah-mini-stats .n{ font-family:'Fraunces',serif; font-size:clamp(1.5rem,2.4vw,2rem); line-height:1; color:var(--a-accent); } .a-home .ah-mini-stats .l{ font-family:system-ui,sans-serif; font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--a-muted); line-height:1.6; } @media (max-width:520px){ .a-home .ah-mini-stats{ grid-template-columns:1fr; gap:16px; } } .a-home .ah-stats{ display:grid; grid-template-columns:repeat(4,1fr); } .a-home .ah-stats .s{ text-align:center; padding:clamp(30px,4vw,46px) 16px; } .a-home .ah-stats .s + .s{ border-left:1px solid var(--a-rule); } .a-home .ah-stats .n{ font-family:'Fraunces',serif; font-size:clamp(2.4rem,5vw,3.4rem); line-height:.9; letter-spacing:-.01em; } .a-home .ah-stats .n em{ color:var(--a-accent); font-style:normal; } .a-home .ah-stats .l{ font-family:system-ui,sans-serif; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--a-muted); margin-top:14px; } /* ── About lineage chips ────────────────────────────────────────────────────── */ .a-home .ah-lineage{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:26px 0; } .a-home .ah-lineage .c{ background:var(--a-panel); border:1px solid var(--a-rule); border-radius:14px; padding:16px 12px; text-align:center; } .a-home .ah-lineage .c b{ display:block; font-family:'Fraunces',serif; font-weight:500; color:var(--a-accent); font-size:.98rem; margin-bottom:4px; } .a-home .ah-lineage .c span{ font-size:.72rem; color:var(--a-muted); line-height:1.3; } /* ── Book spine row ─────────────────────────────────────────────────────────── */ .a-home .ah-spines{ display:flex; gap:14px; justify-content:flex-end; } .a-home .ah-spines .sp{ width:clamp(74px,9vw,104px); aspect-ratio:2/3; border-radius:8px; overflow:hidden; box-shadow:0 14px 34px -14px rgba(0,0,0,.8); } .a-home .ah-spines .sp img{ width:100%; height:100%; object-fit:cover; display:block; } /* ── Consultation cards (3-up) ──────────────────────────────────────────────── */ .a-home .ah-consults{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; align-items:stretch; } .a-home .ah-consult{ position:relative; display:flex; flex-direction:column; min-width:0; } .a-home .ah-consult.feat{ border-color:color-mix(in srgb, var(--a-accent) 55%, transparent); background:color-mix(in srgb, var(--a-accent) 9%, var(--a-panel)); } .a-home .ah-consult .flag{ position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--a-accent); color:var(--a-accent-ink); font-family:system-ui,sans-serif; font-size:.6rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:6px 14px; border-radius:100px; white-space:nowrap; } .a-home .ah-consult h3{ font-family:'Fraunces',serif; font-size:1.35rem; font-weight:500; margin-bottom:4px; } .a-home .ah-consult .dur{ font-family:system-ui,sans-serif; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--a-muted); margin-bottom:18px; } .a-home .ah-consult .price{ font-family:'Fraunces',serif; font-size:2.3rem; color:var(--a-accent); line-height:1; margin-bottom:20px; } .a-home .ah-consult ul{ list-style:none; margin:0 0 26px; padding:0; flex:1; display:flex; flex-direction:column; gap:10px; } .a-home .ah-consult li{ position:relative; padding-left:22px; font-size:.9rem; color:var(--a-muted-lt); line-height:1.5; } .a-home .ah-consult li::before{ content:''; position:absolute; left:2px; top:8px; width:7px; height:7px; border-radius:50%; background:var(--a-accent); } .a-home .ah-consult .acts{ display:flex; flex-direction:column; gap:10px; } /* ── Community band — DEEP muted purple (the bright accent read as "pinky, way too bright"), with larger type (Connor 2026-07-13). Flat solid fill. ─────────────────────────────── */ /* On-brand: a deep purple-TINTED panel with an accent hairline — not a bright pink block. Type-led, which is the brand's register. Balanced wrapping so no orphan word. */ .a-home .ah-community{ background:color-mix(in srgb, var(--a-tint) 72%, #000); color:var(--a-ink); border:1px solid color-mix(in srgb, var(--a-accent) 32%, transparent); border-radius:28px; padding:clamp(52px,7vw,92px) clamp(28px,5vw,60px); text-align:center; position:relative; overflow:hidden; } .a-home .ah-community h2{ font-family:'Fraunces',serif; font-weight:500; font-size:clamp(2.1rem,4.6vw,3.3rem); line-height:1.12; margin:0 auto 24px; max-width:20ch; text-wrap:balance; } .a-home .ah-community h2 em{ font-style:normal; color:var(--a-accent); } .a-home .ah-community p{ font-size:clamp(1.05rem,1.5vw,1.2rem); line-height:1.8; max-width:56ch; margin:0 auto 36px; color:var(--a-muted-lt); text-wrap:pretty; } .a-home .ah-community .acts{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; } /* ── YouTube strip — YouTube-RED, wide rounded RECTANGLE play button (not a purple square), and no section borderlines (they made the section start visible) — Connor 2026-07-13. */ .a-home .ah-sec.tint.flush{ border-top:0; border-bottom:0; } .a-home .ah-yt{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; } .a-home .ah-yt .l{ display:flex; align-items:center; gap:20px; } .a-home .ah-yt .play{ width:78px; height:54px; border-radius:14px; background:#FF0000; display:flex; align-items:center; justify-content:center; flex:none; transition:background-color .18s ease, transform .18s ease; } .a-home .ah-yt .play:hover{ background:#D90000; transform:scale(1.04); } .a-home .ah-yt .play svg{ width:26px; height:26px; color:#fff; margin-left:2px; } .a-home .ah-yt b{ font-family:'Fraunces',serif; font-size:1.25rem; font-weight:500; display:block; margin-bottom:4px; } .a-home .ah-yt .l span{ font-size:.92rem; color:var(--a-muted); } /* ── Explore colour tiles (Aliza colour blocks — FLAT solid fills) ──────────── */ .a-home .ah-tiles{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; } .a-home .ah-tile{ min-width:0; border-radius:24px; padding:clamp(28px,3vw,38px); min-height:300px; display:flex; flex-direction:column; position:relative; overflow:hidden; text-decoration:none; transition:transform .3s ease, box-shadow .3s ease; } .a-home .ah-tile:hover{ transform:translateY(-6px); box-shadow:0 36px 68px -32px rgba(0,0,0,.8); } .a-home .ah-tile .k{ font-family:system-ui,sans-serif; font-size:.64rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; opacity:.85; } .a-home .ah-tile h3{ font-family:'Fraunces',serif; font-size:1.7rem; font-weight:500; margin:12px 0 12px; } .a-home .ah-tile p{ font-size:.95rem; line-height:1.7; opacity:.92; flex:1; margin-bottom:24px; } .a-home .ah-tile .go{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start; padding:12px 22px; border-radius:100px; font-family:system-ui,sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; transition:background-color .18s ease; } /* Tonal purple scale — the old purple/gold/navy trio clashed side by side. A single-hue ladder reads as one family, and the brightest tone lands on the primary action. */ /* Tile backgrounds are palette tokens (see --a-tile* in the palette blocks). The class names (.purple/.gold/.deep) are legacy hooks for the ladder positions — hot/mid/deep — not literal colours. */ /* Was a SOLID gold slab (background:var(--a-accent)) sitting next to a mid-blue and a dark tile — the loudest, most playful block on the page (Connor 2026-07-19: "make it look more smart, not in your face"). Now a warm dark panel with a gold hairline, so the trio reads as three blues of increasing depth. The gold moves off the whole tile and onto the PILL, which is the one thing we actually want clicked — it stays the most prominent of the three without shouting. */ .a-home .ah-tile.purple{ background:color-mix(in srgb, var(--a-accent) 10%, var(--a-panel)); color:var(--a-ink); border:1px solid color-mix(in srgb, var(--a-accent) 50%, transparent); } .a-home .ah-tile.purple .k{ color:var(--a-accent-lt); opacity:1; } /* Featured tile: gold outline + lift. Booking is the money action, the other two tiles are secondary paths and should not compete with it (Connor 2026-07-19). */ .a-home .ah-tile.feat{ border:1px solid var(--a-accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--a-accent) 12%, transparent); } .a-home .ah-tile.purple .go{ background:var(--a-accent); color:var(--a-accent-ink); } .a-home .ah-tile.purple:hover .go{ background:var(--a-accent-lt); } .a-home .ah-tile.gold{ background:var(--a-tile2); color:#fff; } .a-home .ah-tile.gold .go{ background:rgba(255,255,255,.18); color:#fff; } .a-home .ah-tile.gold:hover .go{ background:rgba(255,255,255,.3); } .a-home .ah-tile.deep{ background:var(--a-tile3); color:#fff; } .a-home .ah-tile.deep .go{ background:rgba(255,255,255,.16); color:#fff; } .a-home .ah-tile.deep:hover .go{ background:rgba(255,255,255,.28); } /* ── Email capture ──────────────────────────────────────────────────────────── */ .a-home .ah-capture{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); align-items:center; } .a-home .ah-capture form{ display:flex; flex-direction:column; gap:12px; } .a-home .ah-capture input{ font-family:system-ui,sans-serif; background:var(--a-ground); border:1px solid var(--a-rule-lt); border-radius:100px; padding:16px 22px; font-size:.95rem; color:var(--a-ink); } /* One control: you type in the pill and press the button sitting inside its right-hand end (Connor 2026-07-19). Stacks back to two rows on a narrow screen. */ .a-home .ah-capture .inpill{ position:relative; display:flex; } .a-home .ah-capture .inpill input{ flex:1; min-width:0; padding-right:150px; } /* Button sits flush inside the field: no gap right, top or bottom (Connor 2026-07-21). The 5px inset left a visible sliver of the input showing around it. */ .a-home .ah-capture .inpill button{ position:absolute; right:0; top:0; bottom:0; padding:0 26px; border-radius:100px; border:0; line-height:1; } @media (max-width:520px){ .a-home .ah-capture .inpill{ flex-direction:column; gap:10px; } .a-home .ah-capture .inpill input{ padding-right:22px; } .a-home .ah-capture .inpill button{ position:static; padding:15px 24px; } } .a-home .ah-capture input:focus{ outline:2px solid var(--a-accent); outline-offset:2px; border-color:var(--a-accent); } .a-home .ah-capture .fine{ font-size:.68rem; color:var(--a-muted); } /* ── Final CTA ──────────────────────────────────────────────────────────────── */ /* Final CTA — the bare uppercase "online booking, secure payment, recorded session" line looked terrible. Those are important keywords, so they're now proper chips with ticks. */ .a-home .ah-final{ text-align:center; } /* Page ends dark: the footer takes the deepest plate colour, the same one the top bar and the hero marquee use (Connor 2026-07-19). */ .a-foot-deep{ background:color-mix(in srgb, var(--a-tint) 72%, #000); } .a-home .ah-final h2{ font-family:'Fraunces',serif; font-weight:500; font-size:clamp(2.1rem,5vw,3.5rem); line-height:1.1; margin:0 auto 24px; max-width:18ch; text-wrap:balance; } .a-home .ah-final h2 em{ font-style:italic; color:var(--a-accent); font-weight:400; } .a-home .ah-final p{ color:var(--a-muted-lt); max-width:56ch; margin:0 auto 40px; line-height:1.75; font-size:1.05rem; text-wrap:pretty; } /* Hierarchy tapers down: chips (small, ABOVE the title) → heading → sub → button last. */ .a-home .ah-final .ah-btn{ margin-bottom:0; } .a-home .ah-final .ah-chips{ margin-bottom:34px; } .a-home .ah-chips{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; } .a-home .ah-chips .chip{ display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:100px; background:var(--a-panel); border:1px solid var(--a-rule); font-family:system-ui,sans-serif; font-size:.76rem; color:var(--a-muted-lt); } .a-home .ah-chips .chip svg{ width:14px; height:14px; color:var(--a-accent); flex:none; } /* ── Email capture, Aliza-style ("Emails you actually want") — concrete benefits, not a bare box */ .a-home .ah-capture .bens{ list-style:none; padding:0; margin:26px 0 0; display:flex; flex-direction:column; gap:13px; } .a-home .ah-capture .bens li{ display:flex; align-items:flex-start; gap:12px; color:var(--a-muted-lt); font-size:.98rem; line-height:1.6; } .a-home .ah-capture .bens svg{ width:18px; height:18px; color:var(--a-accent); flex:none; margin-top:3px; } .a-home .ah-capture .fbox h3{ font-family:'Fraunces',serif; font-weight:500; font-size:1.35rem; margin-bottom:8px; } .a-home .ah-capture .fbox .sub{ color:var(--a-muted); font-size:.92rem; margin-bottom:20px; line-height:1.6; } /* ── Full-bleed scrolling marquee (Aliza's "there are no coincidences" bar, on brand). Replaces the cramped rotating hero line. White text, deep muted purple. ───────── */ /* Sits on the SAME ground as the rest of the site (the purple band was a jarring stripe). The TEXT is what's differentiated — alternating ivory / accent — and the separator is a little Saturn. (Connor 2026-07-13) */ /* No top/bottom rules — the outline boxed the band in and read as a separate strip (Connor 2026-07-19); the scrolling text carries it on its own. */ /* Sits on the darker navy (--a-tint) and paints OVER the hero cut-out, so Fabien reads as standing behind the bar (Connor 2026-07-19). */ .a-home .ah-marquee{ overflow:hidden; padding:22px 0; position:relative; z-index:2; /* Its own shade — halfway between the hero ground above and the navy section below — with a clearly deeper than both the hero above and the section below, no border — the colour alone does the work and the band sits forward on the page (Connor 2026-07-19). */ background:color-mix(in srgb, var(--a-tint) 72%, #000); } /* The section under the band paints over the tail of the cut-out, so his drop-shadow cannot bleed past the band. */ .a-home .ah-marquee + section{ position:relative; z-index:3; } .a-home .ah-marquee .track{ display:flex; align-items:center; gap:44px; width:max-content; animation:ah-scroll 44s linear infinite; } .a-home .ah-marquee span{ font-family:'Fraunces',serif; font-style:italic; font-weight:400; font-size:clamp(1.1rem,1.9vw,1.6rem); color:var(--a-ink); white-space:nowrap; } .a-home .ah-marquee span.alt{ color:var(--a-accent); } /* Trust variant: same band, functional register — smaller, uppercase, sans. */ .a-home .ah-marquee.trust{ padding:16px 0; } .a-home .ah-marquee.trust span{ font-family:system-ui,sans-serif; font-style:normal; font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--a-muted-lt); } .a-home .ah-marquee.trust span.alt{ color:var(--a-accent-lt); } .a-home .ah-marquee.trust .st svg{ width:16px; height:16px; } .a-home .ah-marquee.trust .track{ gap:34px; animation-duration:52s; } .a-home .ah-marquee .st{ color:var(--a-accent); flex:none; display:flex; align-items:center; } .a-home .ah-marquee .st svg{ width:26px; height:26px; } @keyframes ah-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } @media (prefers-reduced-motion:reduce){ .a-home .ah-marquee .track{ animation:none; } } /* ── About — big tall portrait left, copy + button right (Aliza's about block) ───── */ .a-home .ah-about{ display:grid; grid-template-columns:.88fr 1.12fr; gap:clamp(36px,5vw,72px); align-items:center; } .a-home .ah-portrait{ position:relative; border-radius:24px; overflow:hidden; aspect-ratio:3/4; background:var(--a-panel); border:1px solid var(--a-rule); } .a-home .ah-portrait img{ width:100%; height:100%; object-fit:cover; display:block; } .a-home .ah-portrait .ph{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; padding:24px; color:var(--a-muted); } .a-home .ah-portrait .ph svg{ width:54px; height:54px; opacity:.6; } .a-home .ah-portrait .ph .lab{ font-family:system-ui,sans-serif; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; line-height:1.7; } .a-home .ah-about h2{ font-family:'Fraunces',serif; font-weight:500; font-size:clamp(2rem,4.2vw,3rem); line-height:1.08; margin:16px 0 24px; letter-spacing:-.01em; } .a-home .ah-about p{ color:var(--a-muted-lt); line-height:1.85; margin-bottom:18px; max-width:62ch; font-size:1.02rem; } /* ── Dense cover grid — "look how many he's written" (18 ouvrages) ───────────────── */ /* Covers were far too large (Connor 2026-07-19). Fixed by shrinking the WALL, not by adding columns: there are 16 covers, so only 4 or 8 columns give full rows, and 6 left a ragged row of 4. Staying at 4 keeps a clean 4x4 block; the max-width does the size reduction. */ /* max-width:400px was the real constraint on cover size, not the column (Connor 2026-07-20). */ .a-home .ah-covers{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; max-width:none; margin-left:auto; } .a-home .ah-covers .c{ aspect-ratio:2/3; border-radius:6px; overflow:hidden; box-shadow:0 12px 26px -14px rgba(0,0,0,.85); transition:transform .3s ease; } .a-home .ah-covers .c:hover{ transform:translateY(-4px); } /* 16 covers in a 5-wide grid left a ragged last row; the 16th is hidden so the strip reads as a filled 5 x 3 block (Connor 2026-07-19). Restore it if two more covers ever land. */ .a-home .ah-covers .c:nth-child(n+16){ display:none; } .a-home .ah-covers img{ width:100%; height:100%; object-fit:cover; display:block; } /* ── Elite offers (Mentorat / Immersion) — deliberately a DIFFERENT card style from the three priced consultation cards: darker ground, accent top-rule, understated. ──── */ /* margin-top matches the grid gap above (18px) so these read as part of the same block rather than a detached pair floating below it (Connor 2026-07-19). */ /* Guarantee row under the priced cards. Four short items on one line, generous whitespace, no separators (no middle dots). */ .a-home .ah-guar{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,3vw,40px); margin-top:clamp(28px,4vw,44px); padding-top:clamp(22px,3vw,32px); border-top:1px solid var(--a-rule); } .a-home .ah-guar span{ font-family:system-ui,sans-serif; font-size:.72rem; line-height:1.6; letter-spacing:.04em; color:var(--a-muted-lt); text-align:center; } /* Access fork: two equal cards. The first-timer card is the one that carries the gold, since that is the path we want a cold visitor to take. */ /* Témoignages. .ph-chip flags placeholder copy and is deleted with it. */ .a-home .ph-chip{ display:inline-block; margin-left:10px; padding:3px 9px; border-radius:100px; font-family:system-ui,sans-serif; font-size:.55rem; font-weight:700; letter-spacing:.14em; background:#C0392F; color:#fff; vertical-align:middle; } .a-home .ah-avis-rail{ overflow:hidden; padding:22px 0 clamp(6px,1vw,12px); background:transparent; /* was clamp(46..74): Connor 2026-08-14, too much air under the heading */ } /* The track holds the set twice and travels exactly one set plus one gap, so the loop has no seam and no empty run-in (Connor 2026-07-19). */ .a-home .ah-avis-rail .track{ display:flex; align-items:stretch; gap:18px; width:max-content; animation:ah-rail 78s linear infinite; } @keyframes ah-rail{ from{ transform:translateX(0); } to{ transform:translateX(calc(-50% - 9px)); } } .a-home .ah-avis-rail .a{ flex:0 0 min(420px,82vw); margin:0; border-radius:20px; padding:clamp(24px,2.6vw,32px); display:flex; flex-direction:column; /* Same trick as the marquee band: a deeper plate than the section behind it, so the cards sit forward on the page instead of dissolving into it (Connor 2026-07-19). */ background:color-mix(in srgb, var(--a-tint) 72%, #000); /* No box-shadow at all: the rail clips its own overflow, so any shadow gets sliced into a hard line under the row. Depth comes from the deeper fill and a lit top edge instead (Connor 2026-07-20, third attempt at this). */ border:1px solid color-mix(in srgb, #fff 8%, transparent); border-top-color:color-mix(in srgb, #fff 16%, transparent); } /* ⛔ THE CARDS WERE ALREADY THE SAME SIZE. THE CONTENT WAS NOT (Connor 2026-08-13). "make sure they're the same size, I don't want different size cards, some of them have far too much space." Measured: every card was already 564x420 with align-items:stretch, so the complaint was not the box, it was the hole inside it. The quotes ran 258 to 656 characters and `flex:1` stretched every blockquote to the TALLEST one, so the 258-character review carried ~330px of dead space under six lines of text. Fixed at the content end first, which is the only place it can be fixed while keeping the cards uniform: the two outliers were trimmed to the customers' own words with the elisions marked […], taking the range to 258-437. Then the quote is CENTRED rather than stretched, so the slack that is left sits evenly above and below instead of pooling at the bottom. ⚠️ Do not "fix" this by letting the cards size to content: Connor ruled against ragged heights in the same breath. And do not paraphrase a review to make one fit. */ .a-home .ah-avis-rail blockquote{ margin:0; font-family:'Fraunces',serif; font-size:1rem; font-style:italic; line-height:1.7; color:var(--a-ink); flex:1; display:flex; flex-direction:column; justify-content:center; } /* Attribution (rebuilt 2026-08-13). It was a bare initial sitting bottom-left with a 4px gap, which read as a stray character rather than a signature, and the quote ran straight into it with nothing separating them. These reviews carry a MASKED INITIAL AND NO SERVICE, so there is no second line to lean on and the single letter has to carry the whole caption on its own. Fixed by giving it a rule to sit against and something to sit in: a hairline across the top of the caption to close the quote off, real space above it, and the initial set in a small accent ring so it reads as a person. Nothing here invents an attribution. */ /* Attribution sits at the TOP of the card (Connor 2026-08-13). Hanging a lone initial off the bottom left an obviously empty corner under the short quotes, and the honest fix is not to invent something to put beside it: we do not know which consultation any of these people booked, so naming one would be fabricating the attribution. Moving it above the quote removes the empty corner instead of filling it. `order` rather than reordering the markup, so the
stays after its
for screen readers. */ /* ── THE INITIAL IS BACK IN THE RING (Connor 2026-08-14: "put the initial back in the round box like the circle"). This reverses the 2026-08-13 signature treatment after one night; the four-way comparison strip is in the scratchpad if it ever comes up again. The ring is the original 32px accent circle, and the STACK on the service pages carries the same ring so the testimonials match everywhere, which is the standing rule. */ .a-home .ah-avis-rail figcaption{ display:flex; align-items:center; gap:11px; order:-1; margin:0 0 16px; padding-bottom:16px; border-bottom:1px solid var(--a-rule); } .a-home .ah-avis-rail .nm{ font-family:system-ui,sans-serif; font-size:.82rem; font-weight:700; color:var(--a-accent); letter-spacing:.02em; width:32px; height:32px; flex:none; display:inline-flex; align-items:center; justify-content:center; border:1px solid color-mix(in srgb, var(--a-accent) 45%, transparent); border-radius:50%; background:color-mix(in srgb, var(--a-accent) 10%, transparent); } /* ⛔ NOTHING GOES NEXT TO THE RING. A label was drafted here and removed the same minute: "Avis vérifié" is a trust claim, and these reviews were recovered from his old homepage with no verification process behind them. Naming the consultation instead would invent the attribution the brief explicitly ruled out. The ring and the rule are the whole treatment. */ .a-home .ah-avis-rail .mt{ font-family:system-ui,sans-serif; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--a-accent-lt); } @media (prefers-reduced-motion:reduce){ .a-home .ah-avis-rail .track{ animation:none; } } /* Phone, third form (Connor 2026-08-14): BOTH behaviours. The rail auto-advances AND the thumb can grab it, pause it, flick through, with the drift resuming a beat after the finger lifts. A transform marquee cannot be grabbed, so on mobile the transform is off and motion.js drifts scrollLeft instead (rAF, pause on touch, seamless wrap over the duplicate set). Desktop keeps the pure CSS marquee. prefers-reduced-motion kills both: the CSS animation above, and motion.js checks it before drifting. */ @media (max-width:820px){ .a-home .ah-avis-rail{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; } .a-home .ah-avis-rail::-webkit-scrollbar{ display:none; } .a-home .ah-avis-rail .track{ animation:none; width:max-content; } .a-home .ah-avis-rail .track{ gap:14px; } .a-home .ah-avis-rail .a{ flex:0 0 min(320px,82vw); } } /* ── REAL REVIEWS, stacked (2026-08-11) ─────────────────────────────────────────────── .ah-avis-rail above is a continuously scrolling edge-to-edge marquee, and it was sized for the invented placeholders: those ran 136-178 characters. Fabien's REAL reviews, recovered from his old "Mes plus beaux retours" section, run 261-680. A 680-character quote inside a 420px card that is moving horizontally is not readable, and this audience is 76.4% over 45 and 67.5% on a phone, which is the worst possible case for it. The quotes are not ours to shorten, so the PRESENTATION changes instead: one column, stationary, held to a comfortable measure. No animation, nothing clipped, nothing to chase across the screen. ⚠️ Attribution is deliberately incomplete. The reviews carry masked initials and no service, so there is no .mt here at all. Filling one in would be inventing an attribution on a real customer's words. */ .a-home .ah-avis-stack{ display:flex; flex-direction:column; gap:clamp(16px,2vw,22px); max-width:820px; margin:0 auto; } .a-home .ah-avis-stack .a{ margin:0; border-radius:20px; padding:clamp(24px,2.8vw,36px); background:color-mix(in srgb, var(--a-tint) 72%, #000); border:1px solid color-mix(in srgb, #fff 8%, transparent); border-top-color:color-mix(in srgb, #fff 16%, transparent); } .a-home .ah-avis-stack blockquote{ margin:0 0 18px; font-family:'Fraunces',serif; font-size:clamp(1rem,1.15vw,1.08rem); font-style:italic; line-height:1.75; color:var(--a-ink); text-wrap:pretty; } /* Ring initial, matching the homepage rail (Connor 2026-08-14: testimonials identical everywhere). The old dash ::before stays retired; the ring replaces it. */ .a-home .ah-avis-stack .nm{ font-family:system-ui,sans-serif; font-size:.82rem; font-weight:700; color:var(--a-accent); letter-spacing:.02em; width:32px; height:32px; flex:none; display:inline-flex; align-items:center; justify-content:center; border:1px solid color-mix(in srgb, var(--a-accent) 45%, transparent); border-radius:50%; background:color-mix(in srgb, var(--a-accent) 10%, transparent); } .a-home .ah-avis-stack figcaption::before{ display:none; } .a-home .ah-avis-stack figcaption{ display:flex; align-items:center; gap:10px; font-family:system-ui,sans-serif; font-size:.82rem; font-weight:600; color:var(--a-ink); } /* A short accent rule before the initial, so a lone masked initial reads as an attribution rather than as a stray character left over from an edit. */ .a-home .ah-avis-stack figcaption::before{ content:''; width:22px; height:1px; flex:none; background:var(--a-accent); } @media (max-width:760px){ .a-home .ah-avis-stack{ gap:14px; } .a-home .ah-avis-stack .a{ padding:22px 20px; } .a-home .ah-avis-stack blockquote{ font-size:.98rem; line-height:1.72; margin-bottom:16px; } } .a-home .ah-avis{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .a-home .ah-avis .a{ margin:0; background:var(--a-panel); border:1px solid var(--a-rule); border-radius:20px; padding:clamp(26px,3vw,34px); display:flex; flex-direction:column; } .a-home .ah-avis blockquote{ margin:0 0 22px; font-family:'Fraunces',serif; font-size:1.02rem; font-style:italic; line-height:1.7; color:var(--a-ink); flex:1; } .a-home .ah-avis figcaption{ display:flex; flex-direction:column; gap:4px; } .a-home .ah-avis .nm{ font-family:system-ui,sans-serif; font-size:.82rem; font-weight:600; color:var(--a-ink); } .a-home .ah-avis .mt{ font-family:system-ui,sans-serif; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--a-accent-lt); } @media (max-width:820px){ .a-home .ah-avis{ grid-template-columns:1fr; } } .a-home .ah-fork{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; } .a-home .ah-fork .f{ background:var(--a-panel); border:1px solid var(--a-rule); border-radius:20px; padding:clamp(26px,3vw,38px); display:flex; flex-direction:column; align-items:flex-start; } .a-home .ah-fork .f.feat{ border:1px solid var(--a-accent); background:color-mix(in srgb, var(--a-accent) 8%, var(--a-panel)); } /* On a dark section the panel fill is nearly the section colour and the cards disappear. There they take the deeper plate plus a hairline, the same treatment as the testimonial cards (Connor 2026-07-19). */ .a-home .ah-sec.tint .ah-fork .f, .a-home .ah-sec.plate .ah-fork .f{ background:color-mix(in srgb, var(--a-tint) 72%, #000); /* No box-shadow at all: the rail clips its own overflow, so any shadow gets sliced into a hard line under the row. Depth comes from the deeper fill and a lit top edge instead (Connor 2026-07-20, third attempt at this). */ border:1px solid color-mix(in srgb, #fff 8%, transparent); border-top-color:color-mix(in srgb, #fff 16%, transparent); } .a-home .ah-sec.tint .ah-fork .f.feat, .a-home .ah-sec.plate .ah-fork .f.feat{ border:1px solid var(--a-accent); background:color-mix(in srgb, var(--a-accent) 10%, color-mix(in srgb, var(--a-tint) 72%, #000)); } .a-home .ah-fork .k{ font-family:system-ui,sans-serif; font-size:.62rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--a-accent-lt); } .a-home .ah-fork h3{ font-family:'Fraunces',serif; font-size:1.5rem; font-weight:500; margin:12px 0 12px; } .a-home .ah-fork p{ color:var(--a-muted-lt); line-height:1.75; font-size:.95rem; margin-bottom:24px; flex:1; } @media (max-width:820px){ .a-home .ah-fork{ grid-template-columns:1fr; } .a-home .ah-guar{ grid-template-columns:repeat(2,1fr); } } .a-home .ah-elite{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px; } /* These sat on var(--a-ground) — the SAME colour as the section behind them — so only a 10% hairline separated card from background and they read as painted-on (Connor 2026-07-19). Now a panel with a faint accent warmth: reads as a raised surface, stays distinct from the three plain-panel priced cards above, and keeps the restrained register (tonal separation + elevation, no bright fill, no gradient). */ /* Padding was fixed at 30/32/28, so on a 390px screen this card kept desktop insets while every sibling card scaled down, eating the line length. Clamped to the same family as .ah-svrow: identical at desktop, tighter on mobile. (Connor 2026-07-29.) */ .a-home .ah-elite .e{ background:color-mix(in srgb, var(--a-accent) 7%, var(--a-panel)); border:1px solid var(--a-rule-lt); box-shadow:0 18px 40px -28px rgba(0,0,0,.75); border-radius:16px; padding:clamp(24px,3vw,30px) clamp(24px,3.2vw,32px) clamp(22px,2.8vw,28px); display:flex; flex-direction:column; gap:9px; transition:border-color .3s ease, box-shadow .3s ease; } .a-home .ah-elite .e:hover{ border-color:color-mix(in srgb, var(--a-accent) 45%, transparent); box-shadow:0 26px 52px -28px rgba(0,0,0,.85); } .a-home .ah-elite .tag{ font-family:system-ui,sans-serif; font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--a-muted); } .a-home .ah-elite h4{ font-family:'Fraunces',serif; font-size:1.3rem; font-weight:500; } .a-home .ah-elite p{ color:var(--a-muted-lt); font-size:.92rem; line-height:1.7; flex:1; margin-bottom:8px; } .a-home .ah-elite .ah-btn{ align-self:flex-start; } /* Anchor price (Fabien 2026-08-11). His mentorat and residence copy strikes a higher figure through and shows the real one after it: 5 300 -> 3 500 and 12 500 -> 8 900. The struck figure has to READ as struck and not compete with the price that is actually being asked, so it sits smaller, muted and with a thin rule. */ .a-home .ah-elite .price s, .a-home .ah-offer .pr s{ color:var(--a-muted); font-size:.8em; margin-right:9px; text-decoration-thickness:1px; text-underline-offset:0; } /* ⚠️ .ah-offer .pr was added to this selector on 2026-08-11 AFTER a render. The rule was written for .ah-elite on the consultations hub and looked finished, but the merged mentorat/residence page shows the same anchor price in a DIFFERENT component, so the margin never applied and it rendered as "5 300 €3 500 €" with the two figures touching. Nothing errors when a selector simply does not match. */ /* ── Email capture form box ──────────────────────────────────────────────────────── */ /* Panel, not ground (Connor 2026-07-21): on a light section the signup card was the same colour as the section behind it and read as a faint outline rather than a card. */ .a-home .ah-capture .fbox{ background:var(--a-panel); border:1px solid var(--a-rule); border-radius:22px; padding:clamp(24px,3vw,34px); } .a-home .ah-capture .fbox input{ background:var(--a-ground); } /* ═══════════════════════════════════════════════════════════════════════════ CONSULTATION PAGE — reuses the .a-home system (buttons, cards, chead, chips) and adds: benefit grid, a tabbed Déroulement/Inclus/Pour-qui slider (the Clementine House pattern), testimonial, related posts, FAQ accordion. ═══════════════════════════════════════════════════════════════════════════ */ /* Page hero — price + duration meta */ .a-home .ah-chero{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(40px,6vw,88px); align-items:center; } .a-home .ah-crumb{ font-family:system-ui,sans-serif; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--a-muted); margin-bottom:22px; } .a-home .ah-crumb a{ color:var(--a-muted); } .a-home .ah-crumb a:hover{ color:var(--a-accent); } .a-home .ah-chero h1{ font-family:'Fraunces',serif; font-weight:500; font-size:clamp(2.4rem,5.2vw,4.2rem); line-height:1.02; letter-spacing:-.02em; margin-bottom:22px; text-wrap:balance; } .a-home .ah-chero .lede{ color:var(--a-muted-lt); font-size:clamp(1rem,1.4vw,1.12rem); line-height:1.8; max-width:50ch; margin-bottom:28px; } .a-home .ah-meta{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:30px; } .a-home .ah-meta .m{ display:inline-flex; align-items:center; gap:9px; padding:11px 20px; border-radius:100px; background:var(--a-panel); border:1px solid var(--a-rule); font-family:system-ui,sans-serif; font-size:.8rem; color:var(--a-muted-lt); } .a-home .ah-meta .m b{ color:var(--a-ink); font-weight:600; } .a-home .ah-meta .m svg{ width:15px; height:15px; color:var(--a-accent); flex:none; } .a-home .ah-cprice{ font-family:'Fraunces',serif; font-size:clamp(2.8rem,5vw,3.8rem); color:var(--a-accent); line-height:1; margin-bottom:26px; } /* Six benefits (Clementine's "benefits" grid) */ .a-home .ah-bens6{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } .a-home .ah-ben{ background:var(--a-panel); border:1px solid var(--a-rule); border-radius:18px; padding:30px 28px; transition:transform .3s ease, border-color .3s ease; } /* .ah-ben hover removed 2026-07-20 (Connor): the lift jumped and shifted the section below. */ .a-home .ah-ben .ic, .a-home .ah-inc .ic{ width:44px; height:44px; border-radius:12px; background:color-mix(in srgb, var(--a-accent) 16%, transparent); display:flex; align-items:center; justify-content:center; margin-bottom:18px; flex:none; } .a-home .ah-ben .ic svg, .a-home .ah-inc .ic svg{ width:22px; height:22px; color:var(--a-accent); } .a-home .ah-inc .ic{ margin-bottom:0; } .a-home .ah-ben h3{ font-family:'Fraunces',serif; font-size:1.18rem; font-weight:500; margin-bottom:9px; } .a-home .ah-ben p{ color:var(--a-muted-lt); font-size:.93rem; line-height:1.7; } /* Tabbed slider — Déroulement / Ce qui est inclus / Pour qui */ .a-home .ah-tabbar{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:38px; padding:7px; background:var(--a-panel); border:1px solid var(--a-rule); border-radius:100px; width:fit-content; margin-inline:auto; } .a-home .ah-tabbar button{ border:0; cursor:pointer; border-radius:100px; padding:12px 26px; background:transparent; color:var(--a-muted-lt); font-family:system-ui,sans-serif; font-size:.8rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; transition:background-color .18s ease, color .18s ease; white-space:nowrap; } .a-home .ah-tabbar button:hover{ color:var(--a-ink); } .a-home .ah-tabbar button.on{ background:var(--a-accent); color:var(--a-accent-ink); } .a-home .ah-panel[hidden]{ display:none; } /* Numbered process steps */ .a-home .ah-steps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } .a-home .ah-step{ background:var(--a-panel); border:1px solid var(--a-rule); border-radius:18px; padding:28px; } .a-home .ah-step .n{ font-family:'Fraunces',serif; font-size:2rem; color:var(--a-accent); line-height:1; margin-bottom:14px; } .a-home .ah-step h3{ font-family:'Fraunces',serif; font-size:1.1rem; font-weight:500; margin-bottom:8px; } .a-home .ah-step p{ color:var(--a-muted-lt); font-size:.92rem; line-height:1.7; } /* Capability cards (what's included), with duration */ .a-home .ah-incl{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } /* Same fixed-padding problem as .ah-elite .e: unchanged at desktop, scales on mobile. */ .a-home .ah-inc{ background:var(--a-panel); border:1px solid var(--a-rule); border-radius:18px; padding:clamp(22px,2.4vw,26px) clamp(22px,2.6vw,28px); display:flex; gap:18px; align-items:flex-start; } /* direct child only — the leading tick/Saturn icon; nested svgs (e.g. the chart wheel in the documents card) keep their own sizing */ .a-home .ah-inc > svg{ width:20px; height:20px; color:var(--a-accent); flex:none; margin-top:4px; } .a-home .ah-inc h3{ font-family:'Fraunces',serif; font-size:1.08rem; font-weight:500; margin-bottom:6px; } .a-home .ah-inc p{ color:var(--a-muted-lt); font-size:.92rem; line-height:1.65; } .a-home .ah-inc .dur{ display:inline-block; margin-top:10px; font-family:system-ui,sans-serif; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--a-accent); } /* ── The three consultation-page sections added 2026-07-19 (Connor's review) ────────────── All three reuse the page's existing panel idiom (--a-panel + --a-rule + 18px radius) so they read as part of the same page, not as three bolted-on blocks. */ /* "Pendant la séance" — a numbered ROW list, deliberately not the .ah-scroller card deck used by the déroulement above it: this is a sequence you read top to bottom in one glance, and a second horizontal scroller on the same page would compete with the first. */ .a-home .ah-flow{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; } .a-home .ah-flow .fl{ display:grid; grid-template-columns:auto 1fr auto; gap:clamp(16px,2.4vw,28px); align-items:flex-start; background:var(--a-panel); border:1px solid var(--a-rule); border-radius:18px; padding:24px clamp(22px,2.6vw,30px); } .a-home .ah-flow .fl .n{ font-family:'Fraunces',serif; font-size:1.5rem; line-height:1; color:var(--a-accent); opacity:.75; padding-top:2px; } .a-home .ah-flow .fl h3{ font-family:'Fraunces',serif; font-size:1.12rem; font-weight:500; margin-bottom:6px; } .a-home .ah-flow .fl p{ color:var(--a-muted-lt); font-size:.92rem; line-height:1.7; max-width:62ch; } /* Timing pill: right-aligned and whitespace-locked so "≈ 10 min" never breaks across lines. */ .a-home .ah-flow .fl .t{ font-family:system-ui,sans-serif; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--a-accent); white-space:nowrap; padding-top:6px; } /* "Ce que vous gardez" — 4-up on desktop. Sits on .tint, so the cards take --a-ground to stay distinct from their section (the same trap that made the Mentorat cards invisible on 07-19: a card painted the SAME colour as the section behind it reads as no card at all). */ .a-home .ah-keep{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; } .a-home .ah-keep .k{ background:var(--a-ground); border:1px solid var(--a-rule); border-radius:18px; padding:26px 24px; } .a-home .ah-keep .k .ic{ width:44px; height:44px; border-radius:12px; background:color-mix(in srgb, var(--a-accent) 16%, transparent); display:flex; align-items:center; justify-content:center; margin-bottom:18px; } .a-home .ah-keep .k .ic svg{ width:22px; height:22px; color:var(--a-accent); } .a-home .ah-keep .k h3{ font-family:'Fraunces',serif; font-size:1.06rem; font-weight:500; margin-bottom:8px; } .a-home .ah-keep .k p{ color:var(--a-muted-lt); font-size:.9rem; line-height:1.65; } /* "Pour qui / pas pour qui" — two columns. The difference between them is carried by the column HEADING rule colour only (accent vs neutral), never by red/green: this is a qualifier, not an error state, and the "no" column must not read as a warning. */ .a-home .ah-fit{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.6vw,34px); } .a-home .ah-fit .col{ background:var(--a-panel); border:1px solid var(--a-rule); border-radius:20px; padding:clamp(26px,3vw,34px); } /* (2026-08-09 round 7: the space-between distribution came out again — Connor wanted the columns levelled with MORE CONTENT, not stretched gaps. Each yes column gained a fifth point instead, grounded in that page's own stated facts.) */ .a-home .ah-fit .ch{ font-family:system-ui,sans-serif; font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding-bottom:16px; margin-bottom:22px; border-bottom:1px solid var(--a-rule); } .a-home .ah-fit .yes .ch{ color:var(--a-accent); border-bottom-color:color-mix(in srgb, var(--a-accent) 40%, transparent); } .a-home .ah-fit .no .ch{ color:var(--a-muted); } .a-home .ah-fit .it + .it{ margin-top:20px; } .a-home .ah-fit .it h4{ font-family:'Fraunces',serif; font-size:1.04rem; font-weight:500; margin-bottom:6px; } .a-home .ah-fit .it p{ color:var(--a-muted-lt); font-size:.9rem; line-height:1.65; } /* The "no" column is supporting information, not a second offer — it should not pull the eye away from the column that converts. */ .a-home .ah-fit .no .it h4{ color:var(--a-muted-lt); } .a-home .ah-fit .no .it p{ opacity:.86; } /* Testimonial */ .a-home .ah-quote{ max-width:820px; margin:0 auto; text-align:center; } .a-home .ah-quote .sat{ width:34px; height:34px; color:var(--a-accent); margin:0 auto 24px; } .a-home .ah-quote blockquote{ font-family:'Fraunces',serif; font-style:italic; font-weight:400; font-size:clamp(1.35rem,2.8vw,2rem); line-height:1.5; color:var(--a-ink); margin-bottom:26px; text-wrap:balance; } .a-home .ah-quote figcaption{ font-family:system-ui,sans-serif; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--a-muted); } .a-home .ah-todo{ display:inline-block; margin-top:18px; padding:7px 14px; border-radius:100px; background:color-mix(in srgb, var(--a-accent) 12%, transparent); color:var(--a-accent); font-family:system-ui,sans-serif; font-size:.68rem; letter-spacing:.08em; } /* Related journal posts */ .a-home .ah-posts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } .a-home .ah-post{ background:var(--a-panel); border:1px solid var(--a-rule); border-radius:18px; overflow:hidden; display:flex; flex-direction:column; transition:transform .3s ease, border-color .3s ease; } .a-home .ah-post:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--a-accent) 45%, transparent); } .a-home .ah-post .thumb{ aspect-ratio:16/9; background:color-mix(in srgb, var(--a-accent) 12%, var(--a-ground)); display:flex; align-items:center; justify-content:center; } .a-home .ah-post .thumb svg{ width:38px; height:38px; color:var(--a-accent); opacity:.6; } .a-home .ah-post .b{ padding:24px 26px 26px; display:flex; flex-direction:column; flex:1; } .a-home .ah-post .k{ font-family:system-ui,sans-serif; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--a-muted); margin-bottom:10px; } .a-home .ah-post h3{ font-family:'Fraunces',serif; font-size:1.12rem; font-weight:500; line-height:1.35; margin-bottom:10px; flex:1; } .a-home .ah-post .go{ font-family:system-ui,sans-serif; font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--a-accent); } /* FAQ accordion */ .a-home .ah-faq{ max-width:800px; margin:0 auto; display:flex; flex-direction:column; gap:12px; } .a-home .ah-faq details{ border-radius:16px; padding:22px 26px; transition:border-color .25s ease, background-color .25s ease; background:color-mix(in srgb, var(--a-tint) 72%, #000); border:1px solid color-mix(in srgb, #fff 8%, transparent); border-top-color:color-mix(in srgb, #fff 16%, transparent); } .a-home .ah-faq details:hover{ border-color:color-mix(in srgb, var(--a-accent) 45%, transparent); } .a-home .ah-faq details[open]{ border-color:color-mix(in srgb, var(--a-accent) 45%, transparent); } .a-home .ah-faq summary{ font-family:'Fraunces',serif; font-size:1.08rem; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px; color:var(--a-ink); } .a-home .ah-faq summary::-webkit-details-marker{ display:none; } .a-home .ah-faq summary .pm{ width:22px; height:22px; flex:none; color:var(--a-accent); transition:transform .25s ease; } .a-home .ah-faq details[open] summary .pm{ transform:rotate(45deg); } .a-home .ah-faq p{ color:var(--a-muted-lt); font-size:.95rem; line-height:1.8; margin-top:14px; } .a-home .ah-faq a{ color:var(--a-accent); } /* Smooth open instead of a hard jump (Connor 2026-07-19). Progressive enhancement: browsers without ::details-content / interpolate-size keep today's instant toggle, nothing breaks. */ :root{ interpolate-size: allow-keywords; } .a-home .ah-faq details::details-content{ block-size:0; overflow:hidden; opacity:0; transition: block-size .34s ease, content-visibility .34s allow-discrete, opacity .28s ease; transition-behavior: allow-discrete; } .a-home .ah-faq details[open]::details-content{ block-size:auto; opacity:1; } @media (prefers-reduced-motion:reduce){ .a-home .ah-faq details::details-content{ transition:none; } } @media (max-width:980px){ .a-home .ah-chero{ grid-template-columns:1fr; } .a-home .ah-bens6{ grid-template-columns:1fr; } .a-home .ah-steps{ grid-template-columns:1fr; } .a-home .ah-incl{ grid-template-columns:1fr; } .a-home .ah-posts{ grid-template-columns:1fr; } /* 2026-07-19 sections: 4-up keep cards → 2-up, fit columns stack (the "no" column reads fine underneath — it is supporting information, so order is already correct). */ .a-home .ah-keep{ grid-template-columns:repeat(2,minmax(0,1fr)); } .a-home .ah-fit{ grid-template-columns:1fr; } .a-home .ah-tabbar{ width:100%; border-radius:18px; } .a-home .ah-tabbar button{ flex:1; padding:12px 14px; font-size:.72rem; } } /* ═══════════════════════════════════════════════════════════════════════════ CONSULTATION PAGE V2 (2026-07-14) — single-service structure, Clementine House patterns: centred text hero (no photo, no pill spam) · problem statement · why-Fabien (photo lives HERE) · big-text tabs + numbered horizontal scroller with always-visible subtext · video testimonial · one bottom tabbed block (Consultations / Journal / FAQ). Reuses .ah-btn/.ah-bens6/.ah-chips/.ah-faq. ═══════════════════════════════════════════════════════════════════════════ */ /* Service hero — centred, type-led (Clementine positions with one big line + sub) */ .a-home .ah-shero{ text-align:center; } .a-home .ah-shero .ah-crumb{ text-align:left; } .a-home .ah-shero .ah-eyebrow{ display:block; margin-top:clamp(28px,4vw,52px); } .a-home .ah-shero h1{ font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:clamp(3rem,7vw,5.6rem); line-height:.98; letter-spacing:-.025em; margin:20px auto 26px; max-width:16ch; text-wrap:balance; } .a-home .ah-shero h1 em{ font-style:italic; font-weight:400; color:var(--a-accent); } .a-home .ah-shero .lede{ color:var(--a-muted-lt); font-size:clamp(1.02rem,1.5vw,1.18rem); line-height:1.8; max-width:56ch; margin:0 auto 36px; text-wrap:pretty; } /* ── /decouverte/ SPLIT HERO (2026-08-13) ─────────────────────────────────────────── Connor: "for the hero it should literally just be the text, the three blocks aren't really useful, they're just making the page longer for the form. Add some pattern on the left or right, it shouldn't span full width, it looks weird." The three .ah-dom cards are gone (their two facts folded into the lede so nothing is lost), and the centred full-width text column becomes a left-set column with the site's OWN zodiac degree-wheel riding the right side — the same SVG shipped in the documents card, not a new motif. ⚠️ Scoped to .ah-dsplit. .ah-shero is the shared secondary hero on ~12 pages and changing it directly would re-flow every one of them. The wheel is desktop-only: on a phone the hero is already short and centred, and a decorative block that adds height in front of a form is the thing being removed. */ .a-home .ah-dsplit .ah-dwheel{ display:none; } @media (min-width:1024px){ .a-home .ah-dsplit{ text-align:left; } .a-home .ah-dsplit .ah-wrap{ display:grid; grid-template-columns:minmax(0,1fr) clamp(260px,26vw,380px); align-items:center; gap:clamp(28px,5vw,72px); } .a-home .ah-dsplit .ah-eyebrow{ margin-top:0; } .a-home .ah-dsplit h1{ margin-left:0; margin-right:0; max-width:14ch; } .a-home .ah-dsplit .lede{ margin-left:0; margin-right:0; max-width:48ch; margin-bottom:0; } .a-home .ah-dsplit .ah-dwheel{ display:block; width:100%; aspect-ratio:1; color:var(--a-accent); opacity:.42; } .a-home .ah-dsplit .ah-dwheel svg{ display:block; width:100%; height:100%; } } /* Séance-de-suivi hero (the only .ah-shero carrying a priceline + CTA pair, Connor 2026-08-14): the lede sat 36px off the price row while the CTA pair sat 0px under it AND flushed left on a centred hero (.ah-hero-cta was built for the left-aligned home hero). Tightened above, spaced and centred below. :has() scoping keeps every other shero page exactly as it was. */ .a-home .ah-shero .lede:has(+ .ah-priceline){ margin-bottom:20px; } .a-home .ah-shero .ah-hero-cta{ justify-content:center; margin-top:26px; } .a-home .ah-shero .meta{ font-family:system-ui,sans-serif; font-size:.82rem; letter-spacing:.04em; color:var(--a-muted); margin-top:26px; } .a-home .ah-shero .meta b{ color:var(--a-accent); font-weight:700; } /* Problem band — medallion image left, left-aligned copy right (bookstore pattern). */ .a-home .ah-problem{ display:grid; grid-template-columns:.72fr 1.28fr; gap:clamp(36px,6vw,84px); align-items:center; } .a-home .ah-medal img{ width:100%; max-width:400px; height:auto; display:block; margin:0 auto; filter:drop-shadow(0 26px 50px rgba(0,0,0,.55)); } .a-home .ah-problem h2{ font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:clamp(1.9rem,3.8vw,2.7rem); line-height:1.12; margin:16px 0 20px; letter-spacing:-.01em; text-wrap:balance; } .a-home .ah-problem h2 .em{ color:var(--a-accent); font-style:italic; } .a-home .ah-problem p{ color:var(--a-muted-lt); line-height:1.85; margin-bottom:16px; max-width:56ch; font-size:1.02rem; } /* Inline mini-stats (inside Pourquoi Fabien — replaces the big stats band) */ .a-home .ah-mstats{ display:flex; flex-wrap:wrap; gap:clamp(22px,3.4vw,44px); margin:28px 0 30px; } .a-home .ah-mstats .n{ font-family:'Fraunces',serif; font-size:clamp(1.7rem,2.6vw,2.3rem); line-height:1; } .a-home .ah-mstats .n em{ color:var(--a-accent); font-style:normal; } .a-home .ah-mstats .l{ font-family:system-ui,sans-serif; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--a-muted); margin-top:9px; } /* Big-text tabs (Clementine: the tabs ARE the heading — active ink, inactive muted) */ /* bottom margin halved (Connor 2026-08-07): with the scroller's own 30px shadow clearance underneath, 44px here opened a ~90px hole between the tabs and their cards */ .a-home .ah-bigtabs{ display:flex; align-items:center; gap:clamp(18px,3vw,36px); flex-wrap:wrap; margin:14px 0 clamp(10px,1.5vw,18px); } .a-home .ah-bigtabs > button{ background:none; border:0; cursor:pointer; user-select:none; -webkit-user-select:none; padding:8px 6px; margin:-8px -6px; font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:clamp(1.35rem,2.9vw,2.05rem); letter-spacing:-.01em; color:var(--a-muted); transition:color .2s ease; } /* user-select:none above (Connor 2026-08-14): dragging selected the label like body text, which read as "not a button". Selection off + a full ink hover = it now feels clickable. */ /* > button, not button: the ah-arrows pager circles live INSIDE .ah-bigtabs, and the hit-area negative margin was pulling the two circles into each other (Connor 2026-08-14, overlapping arrows on the a-propos timeline). Direct children are the tabs alone. */ /* padding+negative margin: the visual stays put, the tap/hover target grows 16px taller. Connor 2026-08-14: the tabs were "hard to press, hover sometimes doesn't come up" — the hit area was the glyphs alone. */ .a-home .ah-bigtabs > button:hover{ color:var(--a-ink); } .a-home .ah-bigtabs > button.on{ color:var(--a-ink); } .a-home .ah-arrows{ margin-left:auto; display:flex; gap:8px; } .a-home .ah-arrows button{ width:44px; height:44px; border-radius:50%; border:0; cursor:pointer; background:var(--a-accent-soft); color:var(--a-accent-lt); display:flex; align-items:center; justify-content:center; transition:background-color .18s ease, color .18s ease; } .a-home .ah-arrows button:hover{ background:var(--a-accent); color:var(--a-accent-ink); } .a-home .ah-arrows svg{ width:18px; height:18px; } .a-home [data-panel][hidden]{ display:none; } /* Numbered process scroller — cards hang off the right edge of the page; subtext ALWAYS visible (Connor: no Clementine hover-expand). Left padding aligns the first card with the .ah-wrap content edge. */ /* proximity, NOT mandatory (Connor 2026-07-20): mandatory forces a rest on a snap point, which made scrolling back to the first card stick partway. */ .a-home .ah-scroller{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; -ms-overflow-style:none; /* 18px, not 6px: the .flag badge sits at top:-11px OUTSIDE the card, and overflow-x:auto clipped its top edge (Connor's screenshot, 2026-07-19). Must stay > 11px. */ /* 22px/34px, not 13/10 (Connor 2026-07-20): overflow-x:auto also clips vertically, so the hover shadow (0 30px 60px -32px) was being sliced off the top and bottom of the cards. */ padding-top:30px; padding-left:calc(max((100vw - 1200px) / 2, 0px) + clamp(20px, 5vw, 34px)); /* end spacer: lets the LAST card scroll all the way to the snap position */ padding-right:calc(100vw - min(390px, 82vw) - max((100vw - 1200px) / 2, 0px) - clamp(20px, 5vw, 34px)); padding-bottom:34px; scroll-padding-left:calc(max((100vw - 1200px) / 2, 0px) + clamp(20px, 5vw, 34px)); } .a-home .ah-scroller::-webkit-scrollbar{ display:none; } .a-home .ah-pstep{ flex:0 0 min(390px, 82vw); scroll-snap-align:start; background:var(--a-panel); border:1px solid var(--a-rule); border-radius:20px; padding:30px 32px 34px; } /* Cards reused inside a scroller become fixed-width slides (one linear row). */ .a-home .ah-scroller .ah-ben, .a-home .ah-scroller .ah-consult{ flex:0 0 min(390px, 82vw); scroll-snap-align:start; } /* Differentiate the tabs by TONE not icons (Clementine: colour + spacing, same family): the "difference" cards sit slightly accent-tinted. */ .a-home .ah-scroller .ah-ben{ background:color-mix(in srgb, var(--a-accent) 6%, var(--a-panel)); } /* No hover-lift inside a scroller — the clipped top line looked broken. The CURRENT card is highlighted instead, tracking as you scroll. */ .a-home .ah-scroller > *:hover{ transform:none; } .a-home .ah-scroller > .cur{ border-color:color-mix(in srgb, var(--a-accent) 62%, transparent); background:color-mix(in srgb, var(--a-accent) 13%, var(--a-panel)); } .a-home .ah-pstep .n{ font-family:system-ui,sans-serif; font-size:.76rem; letter-spacing:.14em; color:var(--a-muted); margin-bottom:30px; } .a-home .ah-pstep h3{ font-family:'Fraunces',serif; font-size:1.28rem; font-weight:500; margin-bottom:12px; } .a-home .ah-pstep p{ color:var(--a-muted-lt); font-size:.94rem; line-height:1.75; } /* Video testimonial (Clementine's video-review card): thumb + play left, quote right. Full wrap width + generous scale — it was too small (Connor 2026-07-14). */ /* Quote column widened (was 1.05fr/1fr): the narrow column wrapped the quote into 7 ragged lines and pushed the closing guillemet onto its own (Connor 2026-07-19). */ .a-home .ah-video{ display:grid; grid-template-columns:.92fr 1.08fr; background:var(--a-panel); border:1px solid var(--a-rule); border-radius:24px; overflow:hidden; } .a-home .ah-sec.tint .ah-video{ background:var(--a-ground); } .a-home .ah-video .vth{ position:relative; min-height:430px; background:color-mix(in srgb, var(--a-accent) 20%, var(--a-ground)); display:flex; align-items:center; justify-content:center; } .a-home .ah-video .vplay{ width:86px; height:86px; border-radius:50%; background:var(--a-accent); display:flex; align-items:center; justify-content:center; transition:transform .2s ease, background-color .2s ease; } .a-home .ah-video .vth:hover .vplay{ transform:scale(1.06); background:var(--a-accent-lt); } .a-home .ah-video .vplay svg{ width:30px; height:30px; color:var(--a-accent-ink); margin-left:4px; } .a-home .ah-video .vlab{ position:absolute; bottom:18px; left:0; right:0; text-align:center; font-family:system-ui,sans-serif; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--a-muted-lt); } .a-home .ah-video .vbd{ padding:clamp(30px,4vw,54px); display:flex; flex-direction:column; justify-content:center; gap:18px; } .a-home .ah-video blockquote{ font-family:'Fraunces',serif; font-style:italic; font-size:clamp(1.3rem,2.3vw,1.8rem); line-height:1.5; color:var(--a-ink); } .a-home .ah-video figcaption{ font-family:system-ui,sans-serif; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--a-muted); } /* Cross-sell service cards (Clementine style: big title, description, generous padding) */ .a-home .ah-svc{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; } .a-home .ah-svcard{ background:var(--a-panel); border:1px solid var(--a-rule); border-radius:20px; padding:clamp(30px,3.4vw,44px); display:flex; flex-direction:column; gap:16px; min-height:250px; transition:transform .3s ease, border-color .3s ease; } .a-home .ah-svcard:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--a-accent) 45%, transparent); } .a-home .ah-svcard h3{ font-family:'Fraunces',serif; font-size:clamp(1.3rem,2vw,1.6rem); font-weight:500; } .a-home .ah-svcard p{ color:var(--a-muted-lt); line-height:1.7; font-size:.95rem; flex:1; } .a-home .ah-svcard .ah-btn{ align-self:flex-start; } /* Blog cards (Clementine insights, but in COLOUR — tonal purple thumbs + line art) */ .a-home .ah-blog{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; } .a-home .ah-bpost{ display:flex; flex-direction:column; background:var(--a-panel); border:1px solid var(--a-rule); border-radius:20px; overflow:hidden; transition:transform .3s ease, border-color .3s ease; } .a-home .ah-bpost:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--a-accent) 45%, transparent); } /* Real photographic thumbs (Fabien's own edition artwork until article images exist). */ .a-home .ah-bpost .th{ aspect-ratio:16/10; overflow:hidden; background:#2E1B3D; } .a-home .ah-bpost .th img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; } .a-home .ah-bpost:hover .th img{ transform:scale(1.04); } .a-home .ah-bpost .bd{ padding:26px 28px 30px; display:flex; flex-direction:column; gap:12px; flex:1; } .a-home .ah-bpost .k{ font-family:system-ui,sans-serif; font-size:.62rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--a-accent); } .a-home .ah-bpost h3{ font-family:'Fraunces',serif; font-size:1.18rem; font-weight:500; line-height:1.35; } .a-home .ah-bpost p{ color:var(--a-muted-lt); font-size:.9rem; line-height:1.65; flex:1; } .a-home .ah-bpost .ah-btn{ align-self:flex-start; } /* FAQ: booking CTA inside the first (open) answer — the Clementine touch */ .a-home .ah-faq .ah-btn{ margin-top:18px; } /* Books cross-sell tab (the bookstore, from the bottom tab block) */ .a-home .ah-bks{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; } .a-home .ah-bk{ background:var(--a-panel); border:1px solid var(--a-rule); border-radius:20px; overflow:hidden; display:flex; flex-direction:column; transition:border-color .3s ease; } /* ⛔ NO TRANSFORM ON BOOK CARD HOVER, EVER (Connor 2026-08-14, third and final ruling: "I don't want the card to move or jump or zoom or anything"). This rule carried a translateY(-4px) from July that survived two rework passes because the new hover rules sat in a different block and never removed the old one. Outline to accent, label to accent, gap slide on the label. That is the whole interaction. */ .a-home .ah-bk:hover{ border-color:var(--a-accent); } .a-home .ah-bk .cov{ aspect-ratio:3/4; overflow:hidden; position:relative; } /* "Le plus vendu" (2026-08-11). Connor wants the most EXPENSIVE and the most POPULAR books showing, and price is already visible on every card while popularity is not, so without a marker half the instruction is invisible to a visitor. Exactly ONE card carries it, and that is deliberate: Antarès has sold 572 units against 162 for the next best (store/data-sales.json, BigCartel export 2021-11 to 2026-06), so the claim is a fact and not a decoration. Badge three of eight and it reads as styling; badge one and it reads as information. */ .a-home .ah-bk .tag{ position:absolute; top:12px; left:12px; z-index:1; /* top-left, Connor 2026-08-14 */ font-family:system-ui,sans-serif; font-size:.56rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--a-accent-ink); background:var(--a-accent); padding:5px 10px; border-radius:100px; } .a-home .ah-bk .cov img{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; } .a-home .ah-bk .bd{ padding:20px 22px 24px; display:flex; flex-direction:column; gap:8px; flex:1; } .a-home .ah-bk h3{ font-family:'Fraunces',serif; font-size:1.02rem; font-weight:500; line-height:1.3; flex:1; } .a-home .ah-bk .au{ font-family:system-ui,sans-serif; font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--a-muted); } /* Left-aligned, not stretched (Connor 2026-08-09): as a flex item the button filled the card width and its label read as centred. */ .a-home .ah-bk .ah-btn{ align-self:flex-start; margin-top:6px; } /* Guaranteed air between the title and the button — they were glued (Connor 2026-07-14). */ /* Centred, not flex-start (Connor 2026-07-21): left-aligned it sat flush against the card's left padding with the right padding left over, so the card read as lopsided. */ .a-home .ah-bk .ah-btn{ align-self:center; margin-top:16px; } @media (max-width:980px){ .a-home .ah-video{ grid-template-columns:1fr; } .a-home .ah-video .vth{ min-height:240px; } .a-home .ah-svc{ grid-template-columns:1fr; } .a-home .ah-blog{ grid-template-columns:1fr; } .a-home .ah-bks{ grid-template-columns:repeat(2,minmax(0,1fr)); } .a-home .ah-bigtabs{ gap:16px 22px; } .a-home .ah-arrows{ margin-left:0; width:100%; } .a-home .ah-problem{ grid-template-columns:1fr; gap:34px; } .a-home .ah-medal img{ max-width:300px; } } @media (max-width:560px){ /* 2×4, not a single 8-card column (Connor 2026-08-15): on a phone the à-propos shelf stays two-up so all eight covers fit in four rows. */ .a-home .ah-bks{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } /* documents card: see the ≤640 block, where it takes the same anatomy as its sibling cards */ .a-home .ah-keep{ grid-template-columns:1fr; } /* Timing pill drops under the copy rather than fighting it for width on a phone. */ .a-home .ah-flow .fl{ grid-template-columns:auto 1fr; row-gap:10px; } .a-home .ah-flow .fl .t{ grid-column:2; padding-top:0; } } /* ── Forms (candidature, contact, réservation) — soft-rounded fields, not pills. ── */ .a-home .ah-form{ display:flex; flex-direction:column; gap:16px; } .a-home .ah-form label{ display:block; } .a-home .ah-form .lb{ display:block; font-family:system-ui,sans-serif; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--a-muted-lt); margin-bottom:8px; } .a-home .ah-form input, .a-home .ah-form select, .a-home .ah-form textarea{ width:100%; font-family:system-ui,sans-serif; font-size:.95rem; color:var(--a-ink); background:var(--a-ground); border:1px solid var(--a-rule-lt); border-radius:12px; padding:14px 16px; } /* Focus hugs the field instead of drawing a detached ring around it (Connor 2026-07-21). outline-offset:2px on a 12px-radius box produced a square-ish orange halo floating off the rounded edge. A border colour change plus a tight inset glow still shows focus clearly, which is required for keyboard users, without the halo. */ .a-home .ah-form input:focus, .a-home .ah-form select:focus, .a-home .ah-form textarea:focus{ outline:none; border-color:var(--a-accent); /* glow ring dropped 2026-08-14: match the decouverte quiz */ } /* The global a/button/input:focus-visible rule sets outline-offset:2px AND border-radius:2px, so on a 12px-radius field it drew a SQUARE orange halo floating off the rounded edge. That is the "weird orange outline". Overridden here for form fields only; the global rule still protects links and buttons. Focus stays clearly visible via the border and inset ring, so keyboard users are not left without an indicator. */ .a-home .ah-form input:focus-visible, .a-home .ah-form select:focus-visible, .a-home .ah-form textarea:focus-visible{ outline:none; border-color:var(--a-accent); } .a-home .ah-form .two{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } @media (max-width:560px){ .a-home .ah-form .two{ grid-template-columns:1fr; } } .a-home .ah-formcard{ background:var(--a-panel); border:1px solid var(--a-rule); border-radius:22px; padding:clamp(26px,3.4vw,40px); } .a-home .ah-sec.tint .ah-formcard{ background:var(--a-ground); } /* ── Palette pill — EXACT same style as the Les Anneaux de Saturne store pill (light bar, "PALETTE" label, text-label buttons, active filled). Connor 2026-07-13. */ #ah-pal{ position:fixed; bottom:18px; right:18px; z-index:90; display:flex; align-items:center; gap:4px; background:#FBF9F5; border:1px solid #E3DAC7; border-radius:100px; padding:6px 7px; box-shadow:0 14px 34px -12px rgba(0,0,0,.45); } #ah-pal .lab{ font-family:system-ui,sans-serif; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:#6E665B; padding:0 8px; } #ah-pal button{ border:0; cursor:pointer; border-radius:100px; padding:8px 15px; font-family:system-ui,sans-serif; font-size:.72rem; font-weight:500; color:#1C1A17; background:transparent; white-space:nowrap; transition:background-color .15s ease, color .15s ease; } #ah-pal button:hover{ background:#EFE8D7; } #ah-pal button.on{ background:var(--a-accent); color:var(--a-accent-ink); } @media (max-width:900px){ /* collapse to colour dots on mobile (store behaviour) */ #ah-pal{ right:14px; bottom:14px; padding:6px; gap:5px; } #ah-pal .lab{ display:none; } #ah-pal button{ width:24px; height:24px; padding:0; border-radius:50%; font-size:0; border:2px solid #E3DAC7; } /* Dots: fill = ground, ring = accent (a2 keeps its solid purple). Pill set mirrors the fabien-couleurs reference page; unused kits keep their token blocks above. */ #ah-pal button[data-p="a2"]{ background:#9335AF; } #ah-pal button[data-p="a9"]{ background:#143272; border-color:#C9A35C; } #ah-pal button[data-p="a4"]{ background:#101426; border-color:#C08D52; } #ah-pal button[data-p="a5"]{ background:#0A1E45; border-color:#C9A35C; } #ah-pal button[data-p="a6"]{ background:#0A1E45; border-color:#A848C0; } #ah-pal button.on{ border-color:#1C1A17; } } /* ── Responsive ───────────────────────────────────────────────────────────────── Breakpoint is 980px (not 860): between 860–980 the three consultation cards were too cramped and the third one clipped off the right edge. */ @media (max-width:980px){ .a-home .ah-hero-grid{ grid-template-columns:1fr; gap:40px; } .a-home .ah-photo{ max-width:22rem; margin:0 auto; width:100%; } /* Stacked: he is already at full column width, so drop the desktop over-scale. */ .a-home .ah-photo.cutout img{ width:104%; left:50%; bottom:0; } .a-home .ah-stats{ grid-template-columns:repeat(2,1fr); } .a-home .ah-stats .s:nth-child(2){ border-left:1px solid var(--a-rule); } .a-home .ah-stats .s:nth-child(3), .a-home .ah-stats .s:nth-child(4){ border-top:1px solid var(--a-rule); } .a-home .ah-stats .s:nth-child(3){ border-left:0; } .a-home .ah-consults{ grid-template-columns:1fr; } .a-home .ah-consult.feat{ margin:0; } .a-home .ah-tiles{ grid-template-columns:1fr; } .a-home .ah-capture{ grid-template-columns:1fr; } .a-home .ah-spines{ justify-content:center; } .a-home .ah-about-grid{ grid-template-columns:1fr !important; } .a-home .ah-books-grid{ grid-template-columns:1fr !important; } /* Stacked, the covers come FIRST and the words explain them (Connor 2026-08-07) — same image-above-text rule as the hero. */ .a-home .ah-books-grid .ah-covers{ order:-1; } .a-home .ah-about{ grid-template-columns:1fr; gap:34px; } .a-home .ah-portrait{ max-width:22rem; margin:0 auto; width:100%; } .a-home .ah-elite{ grid-template-columns:1fr; } .a-home .ah-covers{ grid-template-columns:repeat(4,1fr); gap:8px; } } @media (max-width:520px){ .a-home .ah-hero-cta{ flex-direction:column; } .a-home .ah-hero-cta .ah-btn{ width:100%; } .a-home .ah-yt{ flex-direction:column; align-items:flex-start; } } /* ── Language switcher (automatic translation — same engine pattern as the store) ── */ .lang{position:relative;display:flex} .lang-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;color:var(--a-ink);padding:4px 2px;font-size:.72rem;font-weight:600;letter-spacing:.08em;opacity:.8} .lang-btn:hover{opacity:1} .lang-btn .ic{width:18px;height:18px} .lang-cur{line-height:1} .lang-chev{width:13px;height:13px;transition:transform .2s ease} .lang.open .lang-chev{transform:rotate(180deg)} .lang-menu{position:absolute;top:calc(100% + 14px);right:0;min-width:150px;background:var(--a-panel);border:1px solid var(--a-rule-lt);border-radius:10px;box-shadow:0 16px 40px rgba(0,0,0,.45);padding:6px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease;z-index:80} .lang.open .lang-menu{opacity:1;visibility:visible;transform:none} .lang-menu button{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;color:var(--a-ink);font-size:.82rem;padding:9px 12px;border-radius:7px;transition:background .14s} .lang-menu button:hover{background:var(--a-accent-soft)} .lang-menu button + button{margin-top:5px} /* the two options touched (Connor 2026-08-14) */ .lang-menu button.on{background:var(--a-accent);color:var(--a-accent-ink)} .m-lang{margin-top:14px;padding-top:14px;border-top:1px solid var(--a-rule)} .m-lang-lab{display:block;font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--a-muted);margin-bottom:10px} .m-lang-row{display:flex;flex-wrap:wrap;gap:8px} .m-lang-row button{border:1px solid var(--a-rule-lt);background:transparent;cursor:pointer;color:var(--a-ink);font-size:.74rem;font-weight:600;letter-spacing:.06em;padding:8px 13px;border-radius:100px;transition:.15s} .m-lang-row button.on{background:var(--a-accent);border-color:var(--a-accent);color:var(--a-accent-ink)} /* Suppress Google Translate's injected chrome (we drive the engine ourselves) */ .goog-te-banner-frame,.skiptranslate iframe,#goog-gt-tt,.goog-te-balloon-frame{display:none!important} body{top:0!important} .goog-text-highlight{background:none!important;box-shadow:none!important} .goog-te-gadget,.goog-logo-link{display:none!important} #google_translate_element{display:none!important} /* ── Consultations hub: full-detail service rows (≠ homepage teaser cards) ── */ .a-home .ah-svrows{ display:grid; gap:20px; } /* Phone: one axis for every section heading (Connor 2026-07-21). Scrolling the homepage on a phone, the alignment flipped centre / left / centre / left. It was not arbitrary: full-width sections use .ah-chead, which is text-align:center, while the benefits, biography and books sections put their heading inside a text COLUMN that is left-aligned because on desktop it sits beside an image. Stacked on a phone the image is no longer beside it, so the reason for the left alignment is gone but the alignment remained. Headings and eyebrows centre everywhere below 640px. Prose and buttons stay left: centring five lines of body copy costs real readability, and a centred heading over left-set body is a deliberate, repeated pattern rather than the flip-flop it replaces. */ @media (max-width:640px){ .a-home .ah-ben-head{ text-align:center; } /* [data-reveal], NOT .is-in (2026-08-07): .is-in is added by motion.js as you scroll, so centring keyed to it raced the observer and sometimes rendered left (the section audit caught the about + books headings left on a fast scroll). data-reveal is in the static markup on the same elements — deterministic, and no-JS renders identically. */ .a-home .ah-about [data-reveal] > h2, .a-home .ah-books-grid [data-reveal] > h2{ text-align:center; } .a-home .ah-ben-head .ah-eyebrow, .a-home .ah-about [data-reveal] > .ah-eyebrow, .a-home .ah-books-grid [data-reveal] > .ah-eyebrow{ display:block; text-align:center; } /* Books: ONE short paragraph under a centred heading, so it centres too (Connor 2026-08-07). */ .a-home .ah-books-grid [data-reveal] > p{ text-align:center; margin-left:auto; margin-right:auto; } /* About follows (Connor 2026-08-09): he wants the biography centred with its heading — overrides the earlier left-prose default for this section. */ .a-home .ah-about [data-reveal] > p{ text-align:center; margin-left:auto; margin-right:auto; } /* Phone (Connor 2026-08-07): the about selfie ran a full screen of low-detail photo before a word of the biography. The SECTION stays; the photo goes. Fabien's real photos land mid-August — rejudge then. */ .a-home .ah-about .ah-portrait{ display:none; } /* Standalone section CTAs centre with their centred headings (Connor 2026-08-07): a lone left pill under a centred heading read as a mistake. Card CTAs (fork) stay in-card. */ .a-home .ah-about .ah-btn, .a-home .ah-books-grid .ah-btn{ display:flex; width:max-content; max-width:100%; margin-left:auto; margin-right:auto; } /* Phone books strip (Connor 2026-08-07): fifteen covers ran two and a half screens before a word of copy. Six covers, two rows, make the point; the heading still says 18. */ .a-home .ah-covers{ grid-template-columns:repeat(3,1fr) !important; gap:8px; } .a-home .ah-covers .c:nth-child(n+7){ display:none; } /* Access fork: one button was auto-width and one wrapped full, so the pair read as two different components (Connor 2026-08-07). Both full-width in the stacked cards. */ .a-home .ah-fork .ah-btn{ width:100%; justify-content:center; text-align:center; } /* ── Service pages, mobile pass (Connor 2026-08-09) ── */ /* Problem/pourquoi intro paragraphs centre with their centred heading */ .a-home .ah-problem [data-reveal] > p{ text-align:center; margin-left:auto; margin-right:auto; } /* Obtenez cards: icon stacked ABOVE the text, homepage-benefits style — the row layout left a spine of dead space under each icon and cramped the copy on the right */ .a-home .ah-inc{ flex-direction:column; gap:12px; align-items:flex-start; } /* Documents card, phone. ⛔ THE ZODIAC WHEEL STAYS, with the chips beside it — Connor 2026-08-10, rejecting a version that swapped it for a 44px folder tile and turned the chips into a plain list. What was actually wrong is smaller: the wheel centres itself while the heading and copy stay left, so the card reads as two things that missed each other. The wheel is centred, so the copy centres to meet it. Nothing is removed. */ .a-home .ah-docs{ flex-direction:column !important; align-items:center !important; } .a-home .ah-docs > div:last-child{ text-align:center; } .a-home .ah-docs .ah-chips{ justify-content:center !important; } /* Timeline: 2.5rem top+bottom per step read as holes between steps at 390 */ .a-home .cp-tl-right{ padding:1.4rem 0; } /* Big tabs on ONE line: no wrap, swipe sideways if they ever outgrow the width, and the arrow buttons go — the cards below swipe by touch */ /* WRAP, never scroll (Connor 2026-08-14): the x-scrolling tab row trapped vertical swipes and the English labels ran off the edge. Three words wrap fine. */ .a-home .ah-bigtabs{ flex-wrap:wrap; gap:12px 18px; } .a-home .ah-bigtabs > button{ font-size:1.12rem; white-space:nowrap; } .a-home .ah-arrows{ display:none; } } /* Phone hero: he becomes a medallion ABOVE the copy (Connor 2026-07-21). Stacked, the full-height cut-out landed below the two CTAs, so the first thing on the page after the headline was a large photo nobody had scrolled to and which pushed everything below it further down. As a disc at the top he does the job a portrait should do at this size, and the buttons stay in the first screenful. Same construction as the og card: cream disc, accent ring, him bottom-aligned and a touch bigger than the disc so it crops his folded arms, with the crown of his head held ~10% of the diameter clear of the top edge. Nearer the top than that and the circle's chord is too narrow to hold the outline of his hair. */ @media (max-width:640px){ .a-home .ah-photo{ order:-1; max-width:none; width:auto; margin:0 0 4px; } /* 196px -> 236px (Connor 2026-08-07): at 196 the disc read as an avatar, not a hero. */ .a-home .ah-photo.cutout .ah-photo-frame{ position:relative; width:236px; height:236px; aspect-ratio:auto; margin:0 auto; border-radius:50%; background:#F4F1EA; overflow:hidden; box-shadow:0 0 0 5px var(--a-accent), 0 16px 30px rgba(0,0,0,.34); } .a-home .ah-photo.cutout img{ position:absolute; left:50%; bottom:-22px; transform:translateX(calc(-50% - 7px)); width:auto; height:234px; max-width:none; object-fit:contain; filter:none; } /* Centre the copy to match (Connor 2026-07-21). A centred disc above left-aligned text reads as a mistake: the eye picks up two different axes in the same block. The desktop hero keeps its left rag, where the portrait sits beside the copy rather than above it. Considered aligning the disc left instead, which would have preserved the editorial left rag, but a circle carries too much optical weight to sit in a corner with empty space beside it. */ .a-home .ah-hero-grid .is-in{ text-align:center; } .a-home .ah-hero-cta{ justify-content:center; } /* Access-fork cards overflowed the right edge by 7px, losing their border and rounded corner. Same shape of bug as the hero: a nowrap button inside sets a min-content wider than the column, and a grid track cannot shrink below it. */ .a-home .ah-fork{ grid-template-columns:minmax(0,1fr); } .a-home .ah-fork .ah-btn{ white-space:normal; padding-left:22px; padding-right:22px; } /* Section headings centre on the remaining pages too, the same rule already applied to the homepage. Scoped to .ah-wrap > [data-reveal] > … on purpose: that matches the leading heading of a stacked content column and NOT headings inside cards, timeline steps or scrollers, which stay left. (Was .is-in — raced motion.js, see above.) */ .a-home > section .ah-wrap > [data-reveal] > h2, .a-home > section .ah-wrap > .is-in > h2{ text-align:center; } .a-home > section .ah-wrap > [data-reveal] > .ah-eyebrow, .a-home > section .ah-wrap > .is-in > .ah-eyebrow{ display:block; text-align:center; } /* Two more section headers that sit in their own layout wrappers rather than in a plain column: the header above the timeline on the service pages (one per page, it is the section header, not a step) and the journal's capture block. Direct children only, so the timeline steps and the capture form underneath keep their own alignment. */ .a-home .cp-tl-content-left > h2, .a-home .cp-tl-content-left > p, .a-home .ah-capture > div > h2{ text-align:center; } .a-home .cp-tl-content-left > .ah-eyebrow, .a-home .ah-capture > div > .ah-eyebrow{ display:block; text-align:center; } /* Capture block (journal "En attendant"): short copy + standalone CTA follow their centred heading — a lone left pill under a centred head was the homepage complaint (Connor 2026-08-07, section audit). */ .a-home .ah-capture > div > p{ text-align:center; margin-left:auto; margin-right:auto; } .a-home .ah-capture > div > .ah-btn{ display:flex; width:max-content; max-width:100%; margin-left:auto; margin-right:auto; } } /* Homepage hero, phone widths (found 2026-07-21 at 390px). The hero copy, BOTH buttons and the portrait were all clipped off the right edge. None of them was individually at fault. .ah-btn.lg is white-space:nowrap with 40px of padding either side, so its min-content width is 386px; it sits in .ah-hero-grid, and a grid track cannot shrink below the largest min-content of its items. The track was forced to 386px inside a 350px content box and took the whole column over the edge with it. Two parts to the fix, and both are needed: minmax(0,1fr) lets the track shrink, and the button has to be allowed to give (softer padding, wrapping as the safety valve) or it just overflows its own box instead. html/body are overflow-x:clip, so this was cut rather than scrollable, and never showed up as a scrollbar. */ /* PayPal "Régler en ligne" (2026-08-12). Fabien's own réserver copy already promises "réglez la séance directement en ligne ou par virement bancaire", so this is the mechanism for a line that was already published. Deliberately a QUIET text link and not a second button: booking comes first (his politique says the slot is not confirmed until payment, and paying before picking a slot leaves someone paid with no appointment), so a second orange button beside Réserver would compete with the step that has to happen first. Only three products carry one, because only three links exist: 280, 350 and 125. */ .a-home .a-pay{ display:inline-block; margin-top:10px; font-family:system-ui,sans-serif; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--a-muted-lt); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; transition:color .18s ease; } .a-home .a-pay:hover{ color:var(--a-accent); } /* Mobile header booking CTA (2026-08-12). Sized to sit beside the hamburger without crowding the wordmark: small caps, tight padding, and it must never wrap. */ .a-home .a-mob-cta, .a-mob-cta{ font-size:.68rem; letter-spacing:.1em; font-weight:600; padding:8px 14px; white-space:nowrap; line-height:1; text-decoration:none; transition:background-color .18s ease; } .a-mob-cta:hover{ background:var(--a-accent-lt); } /* The wordmark and the pill sat edge to edge at 360-390 too: logo right 248, CTA left 248, zero gap, so RÉSERVER touched the O of KLYMENKO. Measuring the two boxes said "no overflow" and the page agreed; only the render showed they were welded together. The wordmark gives up a little size on phones so the pill has somewhere to sit. */ @media (max-width:440px){ .a-head-bar a[href="/"]{ font-size:1rem; letter-spacing:.1em; } .a-mob-cta{ margin-left:12px; } } /* At 320 the wordmark ran to x=248 and the CTA started at exactly 248, so the two touched and the button was clipped by the viewport with the hamburger pushed off-screen. The PAGE never overflowed (scrollWidth stayed 320), so nothing scrolled and nothing errored: the header just quietly lost its menu button. Only visible by measuring the two boxes against each other. */ @media (max-width:359px){ .a-mob-cta{ font-size:.6rem; padding:6px 9px; letter-spacing:.04em; } .a-head-bar a[href="/"]{ font-size:.9rem; letter-spacing:.06em; } .a-head-bar .max-w-6xl{ padding-left:14px; padding-right:14px; } } /* The announce bar is a THREE slide rotator (data-rotate="4800") and only the longest slide broke: "Découvrez les 18 ouvrages réédités" measured 336px of content at 320, hanging 37px past the edge and clipping mid-word, while the other two slides fit at 310 and 319. It is a one-line bar by design, so the line has to fit the narrowest phone rather than wrap. Intermittent by nature (it only shows every ~14s), which is why a static review never caught it: whichever slide is up when you look is probably one of the two that fit. Sized off the VIEWPORT rather than pinned per breakpoint, so the longest slide fits at every width in the range instead of at the two I happened to test. */ @media (max-width:480px){ .a-announce{ font-size:clamp(.58rem, 2.45vw, .72rem); letter-spacing:.02em; } .a-announce .max-w-6xl{ padding-left:10px; padding-right:10px; } } /* Below ~355px the longest slide cannot fit on one line at ANY readable size: the string is 61 characters and the link is white-space:nowrap, so it measured 336px against 300px of usable width. Shrinking type far enough to fit would land under 8px, and this audience is 76% over 45, so that trade is wrong. The one-line bar is kept everywhere it fits and only the smallest phones (320, iPhone SE 1st gen, Fold cover screen) get a second line. Height has to go auto with it: the bar is h-9, which would have clipped the second line. */ @media (max-width:355px){ .a-announce a{ white-space:normal; text-align:center; line-height:1.45; } .a-announce .max-w-6xl{ height:auto; min-height:2.25rem; padding-top:5px; padding-bottom:5px; } } /* The mobile header's right cluster (RÉSERVER pill + burger) measured 212..366 in a 360px viewport: the burger's tap target hung 6px off the screen. The ≤359 block already tightens this padding, so this covers the band just above it without re-widening 320. */ @media (min-width:360px) and (max-width:420px){ .a-head-bar .max-w-6xl{ padding-left:14px; padding-right:14px; } /* Padding alone left 5px on the floor: logo cluster 198 + RÉSERVER pill and burger 153 is 351, which does not fit 360 whatever the gutter. The ≤359 block already tightens the pill for exactly this reason; the same tightening is needed one band up. */ .a-mob-cta{ font-size:.6rem; padding:6px 9px; letter-spacing:.04em; } } @media (max-width:440px){ /* Hero density at phone widths (2026-08-12). Fabien's new subhead is 2.2x the length of the one it replaced, and at 390 it rendered 9 lines / 275px, which pushed the primary booking CTA to y=872 inside an 844px viewport. The single most important button on the site was below the fold. Fixed by TIGHTENING TYPE, not by cutting his copy: a client's own words are not ours to trim to fit a layout. 17px/1.8 becomes 16px/1.68 and the two 30px gaps come in. 16px is still at the body-text floor, which matters here because the audience is 76.4% over 45. Measured, not estimated: CTA top 872 -> 760, so the whole button clears the fold. */ .a-home .ah-hero .ah-lead{ font-size:1rem; line-height:1.68; margin-bottom:20px; } .a-home .ah-hero h1{ margin-bottom:20px; } .a-home .ah-hero-grid{ grid-template-columns:minmax(0,1fr); } .a-home .ah-hero-cta .ah-btn{ white-space:normal; padding-left:22px; padding-right:22px; text-align:center; } /* Third instance of the nowrap-button-sets-the-track bug, found 2026-08-16 on the books section. "Découvrir Les Anneaux de Saturne" is 347px at max-content, and the ≤640 rule gives that button width:max-content, so the grid track could not shrink below 347 and the whole column hung 47px past a 320px viewport: the body copy rendered cut off mid-word ("réédite de gra…", "afin de préserve…"). Only 320 and 360 were affected; 390 measured 350px inside 350px of usable width and was correct, which is why it survived every phone-width review. minmax(0,…) lets the track shrink, width:auto lets the button wrap. */ .a-home .ah-books-grid{ grid-template-columns:minmax(0,1fr) !important; } .a-home .ah-books-grid .ah-btn{ width:auto; max-width:100%; white-space:normal; text-align:center; } /* Fourth instance of the same bug, on the service pages' .ah-about block: its h2 measured 20..362 in a 320 viewport. Every occurrence has the same shape, so both grids get the same two properties rather than a bespoke rule each. */ .a-home .ah-about{ grid-template-columns:minmax(0,1fr) !important; } .a-home .ah-about .ah-btn{ width:auto; max-width:100%; white-space:normal; text-align:center; } /* Same failure, wider blast radius (2026-08-11). Fabien's revision renames every booking CTA to "Réserver ma consultation astrologique privée", 43 chars against the old 25. At 390 that measured 519px inside a 390px viewport on the à-propos closing block: nowrap + 40px padding either side, clipped by overflow-x:clip exactly as the hero was, so again no scrollbar and no error. The hero fix above only ever covered .ah-hero-cta, so every other .ah-btn on the site was still one long label away from the same break. Allowing the wrap is the safety valve; buttons are sized to content, so this changes nothing for any label that already fits. */ .a-home .ah-btn{ white-space:normal; max-width:100%; text-wrap:balance; line-height:1.3; padding-left:22px; padding-right:22px; text-align:center; } } /* Group label above each set of cards (2026-07-21). The four consultations used to sit in ONE row, which made them a single comparison set: a first-time visitor priced the same astrologer at 280 € and at 125 € and read the difference as padding. The 125 € séance and the 888 € pack are both open only to people who have already consulted, so they are their own set, under a label that says so before any price is read. */ .a-home .ah-svgroup{ display:flex; align-items:center; gap:16px; margin:44px 0 30px; } /* At 390 the group label sat 18px off the featured card's floating badge and the two read as one crowded lockup (Connor 2026-08-14, "pretty congested there"). Phone only. */ @media (max-width:767px){ .a-home .ah-svgroup{ margin:38px 0 40px; } } .a-home .ah-svgroup:first-of-type{ margin-top:0; } .a-home .ah-svgroup span{ font-family:system-ui,sans-serif; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--a-muted); flex:none; } .a-home .ah-svgroup::after{ content:""; height:1px; flex:1; background:var(--a-rule); } .a-home .ah-svrow{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(24px,4vw,54px); background:var(--a-panel); border:1px solid var(--a-rule); border-radius:20px; padding:clamp(26px,4vw,44px); position:relative; } .a-home .ah-svrow.feat{ border-color:var(--a-accent); background:linear-gradient(160deg, var(--a-accent-soft), var(--a-panel) 55%); } /* ── THE WHOLE CARD IS THE LINK (Connor 2026-08-14) ────────────────────────────────────── "Make the full card clickable so that if they click it, it'll take them to the page for the card, same as the button." ⛔ Never through to PayPal: the card goes to the PAGE. Done as a stretched link, not by wrapping the card in an . Wrapping puts the card's own inside another , which is invalid HTML and which browsers repair by splitting the anchor, so on a phone the tap target ends up somewhere neither element owns. The ::after covers the card from inside the existing button instead, so there is exactly one link and the button keeps its own focus ring and its href. Connor asked whether this is actually smart on mobile: it is, because the card is a single large target and the visible button still works normally. It only stops being smart if a second link appears inside the card, which is what the z-index rule below guards. */ .a-home .ah-svrow .l .ah-btn::after{ content:''; position:absolute; inset:0; z-index:1; } /* ⛔ THE STRETCH HOST MUST NEVER TRANSFORM. .ah-btn:hover carries translateY(-2px), and a transformed element becomes the containing block for its own absolute ::after — so the moment the stretched pseudo is hovered, it COLLAPSES to the button box, the hover drops, it re-expands, and the state oscillates at style-recalc rate. Measured 2026-08-14: a click on the card title hit DIV.l and navigated nowhere, while a static elementFromPoint at the same point said the anchor was there. The card's own hover lift replaces the button's. */ .a-home .ah-svrow .l .ah-btn:hover, .a-home .ah-elite .e > .ah-btn:hover{ transform:none; } /* Anything else interactive inside the card has to sit ABOVE the stretched layer. */ .a-home .ah-svrow a:not(.ah-btn), .a-home .ah-svrow button{ position:relative; z-index:2; } /* Same treatment for the two sur-candidature cards. */ .a-home .ah-elite .e{ position:relative; } .a-home .ah-elite .e > .ah-btn::after{ content:''; position:absolute; inset:0; z-index:1; } .a-home .ah-elite .e a:not(.ah-btn){ position:relative; z-index:2; } /* The card lifts on hover so it reads as one target rather than a panel with a button in it. */ @media (hover:hover){ .a-home .ah-svrow, .a-home .ah-elite .e{ transition:border-color .25s ease, transform .25s ease; } .a-home .ah-svrow:hover, .a-home .ah-elite .e:hover{ border-color:color-mix(in srgb, var(--a-accent) 55%, transparent); transform:translateY(-2px); } } /* ── STICKY MOBILE BOOKING BAR, service pages (Connor 2026-08-14) ───────────────────────── "Remove the book button top right, add a bottom bar saying book this session, most of the traffic's on mobile." ⚠️ This REVERSES the earlier "no fixed bottom Réserver bar on mobile" ruling in REVIEW-SESSION-PROMPT-2026-08-10 — Connor is overruling his own call, explicitly, for the four service pages only. A page opts in by carrying
at the end of
; nothing changes on pages without it. z-index 38 keeps it UNDER the consent bar (tarteaucitron overlays it until answered) and under the sticky header (z-40). The header's small mobile Réserver pill hides on these pages because the bar replaces it; :has() is fine, this site already requires it elsewhere. */ .a-home .ah-bookbar{ display:none; } @media (max-width:767px){ .a-home .ah-bookbar{ display:block; position:fixed; left:0; right:0; bottom:0; z-index:38; transition:transform .28s ease; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:color-mix(in srgb, var(--a-ground) 92%, #000); border-top:1px solid var(--a-rule); backdrop-filter:blur(8px); } .a-home .ah-bookbar .ah-btn{ display:flex; width:100%; justify-content:center; text-align:center; } body:has(.ah-bookbar) .a-mob-cta{ display:none; } body:has(.ah-bookbar) footer{ padding-bottom:84px; } /* the bar must never cover the legal links */ } /* ── BOOK CARDS: reveal-on-hover, whole card clickable (Connor 2026-08-14) ──────────────── "The card will expand vertically at the bottom and the learn more pops out with the arrow, then press the entire card to go to the page." The permanent Voir le livre button goes; a .bk-more footer reveals on hover, and the card's title link stretches over the card. On TOUCH devices there is no hover, so the footer is always visible there — a reveal a phone can never trigger is a dead control. Price shows on the a-propos cards only (the bookstore-adjacent page); service-page cards say En savoir plus alone. */ .a-home .ah-bk{ position:relative; } .a-home .ah-bk .bk-link::after{ content:''; position:absolute; inset:0; z-index:1; } .a-home .ah-bk a:not(.bk-link), .a-home .ah-bk button{ position:relative; z-index:2; } /* Reworked 2026-08-14 (Connor: "I don't like the hover interaction. Buttons constantly visible, stuck to the bottom right, and on hover the arrow extends and it turns orange.") So: always visible, quiet by default, accent + a longer arrow on hover. The reveal animation is gone entirely; nothing on a phone depends on hover any more. */ /* Hover, third pass (Connor 2026-08-14): "I don't want the card to move or zoom, I literally just want the text to turn orange, same with the outline, and the text move a tiny bit to the left so it looks like the arrow is moving." So: NO transform on the card. On hover the label and the card border go accent, and the GAP between the label and the arrow widens, which slides the right-anchored text left while the arrow stays put, reading as the arrow pulling away. */ .a-home .ah-bk .bk-more{ display:flex; align-items:center; justify-content:flex-end; gap:8px; color:var(--a-muted-lt); font-family:system-ui,sans-serif; font-size:.76rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; margin-top:12px; transition:color .22s ease, gap .22s ease; } .a-home .ah-bk .bk-more svg{ width:15px; height:15px; flex:none; } @media (hover:hover){ .a-home .ah-bk{ transition:border-color .25s ease; } .a-home .ah-bk:hover{ border-color:var(--a-accent); } .a-home .ah-bk:hover .bk-more{ color:var(--a-accent); gap:14px; } } /* ── COLLAPSIBLE INCLUDES LIST, mobile (Connor 2026-08-14) ──────────────────────────────── "So many bullet points, need to think about the way that's gonna be easy to scroll." Desktop keeps every item. On a phone, a list marked .ah-collapsible shows its first four and a quiet Tout afficher button reveals the rest (handler in motion.js). The cap is FOUR because the four service pages' lists run 6 to 8 items; a cap of five would leave a lone button revealing one item. */ .a-home .ah-showmore{ display:none; } @media (max-width:767px){ .a-home ul.r.ah-collapsible:not(.open) li:nth-child(n+5){ display:none; } .a-home .ah-showmore{ display:inline-flex; align-items:center; gap:7px; margin-top:12px; background:none; border:0; cursor:pointer; color:var(--a-muted-lt); font-family:system-ui,sans-serif; font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; text-decoration:underline; text-underline-offset:3px; padding:6px 0; } .a-home .ah-showmore:hover{ color:var(--a-ink); } } .a-home .ah-svrow .flag{ position:absolute; top:-13px; left:clamp(26px,4vw,44px); background:var(--a-accent); color:var(--a-accent-ink); font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:6px 14px; border-radius:100px; } .a-home .ah-svrow h3{ font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:clamp(1.5rem,2.6vw,2rem); margin-bottom:6px; } .a-home .ah-svrow .tg{ color:var(--a-muted-lt); font-size:.94rem; line-height:1.7; margin-bottom:16px; max-width:38ch; } .a-home .ah-svrow .pr{ font-family:'Fraunces',Georgia,serif; font-size:clamp(1.9rem,3vw,2.5rem); color:var(--a-accent); line-height:1; } .a-home .ah-svrow .du{ color:var(--a-muted); font-size:.84rem; margin:8px 0 20px; } /* Turnaround line (Fabien's real figures, 2026-07-21): the fast reply and the honest wait sit together deliberately, so the 2 to 5 weeks reads as a full diary rather than a delay. Where .wt is present it takes over .du's bottom margin so the two do not double up. */ .a-home .ah-svrow .du:has(+ .wt){ margin-bottom:6px; } .a-home .ah-svrow .wt{ color:var(--a-muted); font-size:.8rem; line-height:1.55; margin:0 0 20px; max-width:34ch; } .a-home .ah-svrow ul.r{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; justify-content:center; } .a-home .ah-svrow ul.r li{ display:flex; gap:10px; align-items:flex-start; color:var(--a-muted-lt); font-size:.95rem; line-height:1.6; } .a-home .ah-svrow ul.r li svg{ width:16px; height:16px; flex:none; margin-top:4px; color:var(--a-accent); } /* ── Mentorat candidature quiz ── */ /* Step counter sits TOP RIGHT, on the same line as the question, not stacked above it (Connor 2026-08-11). The counter lives in .qhead, a sibling BEFORE the step divs, while the question is nested inside the step, so they cannot share a flex row. Pinning .qhead to the card's top-right corner puts them level without restructuring four steps of markup. */ .a-home .ah-quiz{ position:relative; } .a-home .ah-quiz .qhead{ position:absolute; top:clamp(28px,4vw,48px); right:clamp(28px,4vw,48px); display:flex; align-items:center; gap:12px; margin:0; z-index:2; } .a-home .ah-quiz .qback[hidden]{ display:none; } .a-home .ah-quiz .qback{ background:none; border:1px solid var(--a-rule-lt); border-radius:100px; width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:var(--a-ink); } .a-home .ah-quiz .qback svg{ width:15px; height:15px; } .a-home .ah-quiz .qprog{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--a-muted); } .a-home .ah-quiz .qq{ font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:clamp(1.25rem,2vw,1.55rem); margin-bottom:18px; padding-right:170px; } @media (max-width:620px){ /* no room for both on one line at 390: counter returns above the question */ .a-home .ah-quiz .qhead{ position:static; margin-bottom:16px; } .a-home .ah-quiz .qq{ padding-right:0; } } /* ⛔ THE STEPS USED TO SNAP (Connor: "it changes very suddenly"). The controller toggles the hidden attribute, which is instant. Animating whatever is currently NOT hidden gives every step an entrance without touching the script, so the back button and the forward path both get it. */ .a-home .ah-quiz [data-qstep]:not([hidden]){ animation:qstep-in .42s cubic-bezier(.22,.61,.36,1) both; } @keyframes qstep-in{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } } @media (prefers-reduced-motion:reduce){ .a-home .ah-quiz [data-qstep]:not([hidden]){ animation:none; } } .a-home .ah-quiz .qopts{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); align-items:stretch; } /* Options take the homepage card fill, not var(--a-ground) (Connor 2026-08-10: "the colours that are used ... needs to be rethought"). On a tint section the ground read as a flat blue slab. Now the same fill, hairline and lighter top edge as the .ah-dom cards, laid out as a row of three rather than three full-width bars. */ .a-home .ah-quiz .qopt{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; text-align:left; background:color-mix(in srgb, var(--a-tint) 72%, #000); border:1px solid color-mix(in srgb, #fff 8%, transparent); border-top-color:color-mix(in srgb, #fff 16%, transparent); border-radius:16px; padding:22px 22px 24px; width:100%; cursor:pointer; transition:border-color .3s ease, transform .3s ease; } .a-home .ah-quiz .qopt:hover{ border-color:color-mix(in srgb, var(--a-accent) 55%, transparent); transform:translateY(-2px); } /* The chosen card has to LOOK chosen for the moment before the step advances, and the new .qopt background above would otherwise beat --a-accent-soft on specificity. */ .a-home .ah-quiz .qopt.on{ border-color:var(--a-accent); background:color-mix(in srgb, var(--a-accent) 15%, color-mix(in srgb, var(--a-tint) 72%, #000)); box-shadow:0 0 0 1px var(--a-accent) inset; transform:translateY(-2px); } .a-home .ah-quiz .qopt.on > svg{ transform:scale(1.06); } .a-home .ah-quiz .qopt > svg{ transition:transform .25s ease; } .a-home .ah-quiz .qopt:active{ transform:translateY(0) scale(.99); } .a-home .ah-quiz .qopt>svg{ width:30px; height:30px; flex:none; color:var(--a-accent); } .a-home .ah-quiz .qopt b{ display:block; font-family:'Fraunces',serif; font-weight:500; font-size:1.08rem; } .a-home .ah-quiz .qopt i{ display:block; font-style:normal; color:var(--a-muted); font-size:.84rem; margin-top:2px; } /* ── Liens page ── */ .a-home .liens-avatar{ width:110px; height:110px; border-radius:50%; display:block; margin:0 auto 18px; filter:drop-shadow(0 18px 36px rgba(0,0,0,.5)); } @media (max-width:760px){ .a-home .ah-svrow{ grid-template-columns:1fr; gap:20px; } } /* ── Footer newsletter (replaces the mid-page lettre section) ───────────────── */ .foot-lettre{ margin-top:26px; } .foot-lettre .lab{ font-family:system-ui,sans-serif; font-size:.62rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--a-accent); margin-bottom:10px; } .foot-lettre .sub{ font-size:.76rem; line-height:1.6; color:var(--a-muted); margin:12px 0 0; } .foot-lettre .inpill{ position:relative; display:flex; } .foot-lettre input{ flex:1; min-width:0; font-family:system-ui,sans-serif; background:var(--a-ground); border:1px solid var(--a-rule-lt); border-radius:100px; padding:10px 132px 10px 18px; font-size:.85rem; color:var(--a-ink); } .foot-lettre input:focus{ outline:2px solid var(--a-accent); outline-offset:2px; border-color:var(--a-accent); } /* A pill inside a pill: fully rounded, flush to the right edge, same height as the field so the two curves nest exactly (Connor 2026-07-20). */ .foot-lettre .inpill button{ position:absolute; right:0; top:0; bottom:0; padding:0 22px; font-size:.66rem; border-radius:100px; background:var(--a-accent); color:var(--a-accent-ink); border:0; cursor:pointer; font-family:system-ui,sans-serif; font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; } .foot-lettre .inpill button:hover{ background:var(--a-accent-lt); } @media (max-width:520px){ .foot-lettre .inpill{ flex-direction:column; gap:10px; } .foot-lettre input{ padding-right:20px; } .foot-lettre .inpill button{ position:static; padding:14px 24px; border-radius:100px; } } /* ── Hero: quiet route for returning clients ─────────────────────────────── */ .a-home .ah-hero-back{ margin-top:18px; font-family:system-ui,sans-serif; font-size:.8rem; } .a-home .ah-hero-back a{ color:var(--a-muted-lt); text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--a-accent) 45%, transparent); padding-bottom:2px; transition:color .18s ease, border-color .18s ease; } .a-home .ah-hero-back a:hover{ color:var(--a-ink); border-color:var(--a-accent); } /* ── La méthode. Scoped to #methode: .ah-steps already exists for the service pages and must not be redefined globally (that collision wiped 400 lines of this file once). ── */ /* The id is on the
, NOT on the steps container (index.html:
...
). Putting the 3-column grid on #methode therefore made the SECTION three columns and dropped the heading and the whole steps block into the left third, where the steps split into three ~120px columns and set one word per line. It only showed on desktop, because below 820px the section collapsed back to one column and looked correct. The grid belongs on .ah-steps. (Fixed 2026-07-21.) */ #methode .ah-steps{ grid-template-columns:repeat(3,1fr); gap:clamp(26px,4vw,56px); } #methode .st{ text-align:center; display:flex; flex-direction:column; align-items:center; padding:clamp(34px,3.4vw,44px) clamp(22px,2.2vw,30px); border-radius:18px; background:color-mix(in srgb, var(--a-tint) 72%, #000); border:1px solid color-mix(in srgb, #fff 8%, transparent); border-top-color:color-mix(in srgb, #fff 16%, transparent); transition:transform .35s ease, border-color .35s ease, filter .35s ease, opacity .35s ease; } #methode h3{ position:relative; display:inline-block; } #methode h3::after{ content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:var(--a-accent); transform:scaleX(0); transform-origin:center; transition:transform .35s cubic-bezier(.2,.7,.3,1); } @media (hover:hover){ #methode .st:hover h3::after{ transform:scaleX(1); } } /* Phone: the underline draws itself as each step scrolls into the middle of the screen (Connor 2026-08-07) — same .is-current mechanic as the domaines cards. */ @media (max-width:820px){ #methode .st.is-current h3::after{ transform:scaleX(1); } } #methode .n{ display:flex; align-items:center; justify-content:center; width:84px; height:84px; border-radius:50%; margin-bottom:16px; background:var(--a-accent); border:0; font-family:'Fraunces',serif; font-size:2.3rem; color:#fff; transition:transform .3s ease, box-shadow .3s ease; } #methode h3{ font-family:'Fraunces',serif; font-size:1.5rem; font-weight:500; margin-bottom:22px; } #methode p{ color:var(--a-muted-lt); font-size:.94rem; line-height:1.75; max-width:32ch; } @media (max-width:820px){ #methode .ah-steps{ grid-template-columns:1fr; gap:20px; } } /* ── Domaines d'expertise. Geometry from the Clementine House benefits block: transparent cards, hairline border, 24px padding, min-height, and an asymmetric bottom row (85% / 115% pulled left) whose outer edges still align with the row above. Theirs has no hover at all; ours takes their house hover instead, which is a 1.01 scale and a warmer border. */ .a-home .ah-dom{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,1.7vw,24px); } .a-home .ah-dom .d{ border-radius:16px; padding:clamp(24px,2.4vw,30px); min-height:250px; /* same card fill as the access-fork cards: the transparent version matched the section */ background:color-mix(in srgb, var(--a-tint) 72%, #000); border:1px solid color-mix(in srgb, #fff 8%, transparent); border-top-color:color-mix(in srgb, #fff 16%, transparent); transition:transform .35s ease, border-color .35s ease, filter .35s ease, opacity .35s ease; } /* Hovering one card blurs every other card in the grid (Clementine House behaviour). :has(.d:hover), not :hover — on the container alone, resting the cursor in the gap between cards blurred all four at once and it stuck there (Connor 2026-07-20). */ /* Hover-capable devices only (Connor 2026-08-07): on touch, tapping a card set sticky :hover and blurred the other three until the next tap landed somewhere else. Phones get the scroll-driven .is-current version below instead. */ @media (hover:hover){ .a-home .ah-dom:has(.d:hover) .d:not(:hover){ filter:blur(3px); opacity:.5; } .a-home .ah-dom .d:hover{ transform:scale(1.01); border-color:color-mix(in srgb, var(--a-accent) 55%, transparent); } } /* Phone: motion.js marks the card nearest the viewport centre .is-current as you scroll — the same blur-the-siblings read as desktop hover, without needing a tap. */ @media (max-width:820px){ .a-home .ah-dom.has-current .d:not(.is-current){ filter:blur(2.5px); opacity:.55; } .a-home .ah-dom .d.is-current{ border-color:color-mix(in srgb, var(--a-accent) 55%, transparent); } } /* The two mentorat offers reuse the homepage .d card wholesale rather than imitating it (Connor 2026-08-10: "more on brand with the cards on the homepage"). What it was: one full-width slab with the price floating off to the right, five pill chips wrapping ragged, and NO call to action anywhere in the section. Three of those five chips also described the RESIDENCE while sitting on the 12-month mentoring card. Only the price, feature list and button are new here; everything else is inherited. */ .a-home .ah-dom .ah-offer{ display:flex; flex-direction:column; } .a-home .ah-dom .ah-offer .pr{ font-family:'Fraunces',serif; font-size:clamp(1.5rem,2.4vw,1.9rem); color:var(--a-accent); line-height:1.1; margin:-6px 0 16px; } .a-home .ah-dom .ah-offer .pr span{ display:block; font-family:system-ui,sans-serif; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--a-muted); margin-top:7px; } .a-home .ah-dom .ah-offer .feat{ list-style:none; padding:0; margin:20px 0 26px; display:flex; flex-direction:column; gap:10px; } .a-home .ah-dom .ah-offer .feat li{ display:flex; align-items:flex-start; gap:10px; color:var(--a-muted-lt); font-size:.92rem; line-height:1.5; } .a-home .ah-dom .ah-offer .feat svg{ width:15px; height:15px; color:var(--a-accent); flex:none; margin-top:.22em; } /* button sits on the floor of the card, so the two line up whatever the copy length */ .a-home .ah-dom .ah-offer .ah-btn{ margin-top:auto; align-self:flex-start; } .a-home .ah-dom .three{ width:85%; } .a-home .ah-dom .four{ width:115%; position:relative; right:15%; } .a-home .ah-dom .ic{ display:block; color:var(--a-accent); margin-bottom:22px; } .a-home .ah-dom .ic svg{ width:44px; height:44px; } .a-home .ah-dom h3{ font-family:'Fraunces',serif; font-size:1.4rem; font-weight:500; margin-bottom:18px; } .a-home .ah-dom p{ color:var(--a-muted-lt); font-size:.95rem; line-height:1.6; max-width:46ch; } /* The découverte page's three cards. This used to be an inline style on the element, which no media query could override, so they stayed 3-up on a phone and ran off the right edge (found 2026-07-21). It lives here so the breakpoint below can win. */ .a-home .ah-dom.is-static{ grid-template-columns:repeat(3,1fr); } @media (max-width:820px){ .a-home .ah-dom{ grid-template-columns:1fr; } .a-home .ah-dom.is-static{ grid-template-columns:1fr; } /* their own layout leaves a stray 100px gap here; the widths are reset instead */ .a-home .ah-dom .three, .a-home .ah-dom .four{ width:auto; right:auto; } } /* ── Bénéfices. Heading and its paragraph hold the left column on their own; the cards live in the right two thirds in two independent columns, the right one 100px lower at rest, counter-parallaxed against each other by the script in index.html. */ .a-home .ah-ben-wrap{ display:grid; grid-template-columns:1fr 1.55fr; gap:clamp(32px,5vw,80px); align-items:start; padding-bottom:clamp(30px,3.5vw,58px); } .a-home .ah-ben-head h2{ font-family:'Fraunces',serif; font-weight:500; letter-spacing:-.02em; font-size:clamp(2.1rem,4.4vw,3.1rem); line-height:1.12; max-width:14ch; text-wrap:balance; margin-bottom:22px; } .a-home .ah-ben-head .em{ color:var(--a-accent); font-style:italic; } .a-home .ah-ben-head p{ color:var(--a-muted-lt); font-size:.98rem; line-height:1.8; max-width:40ch; } .a-home .ah-ben-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; } .a-home .ah-ben-grid .col{ display:flex; flex-direction:column; gap:24px; will-change:transform; } .a-home .ah-ben-grid .col.right{ position:relative; top:100px; } .a-home .ah-ben-grid .b{ border-radius:18px; padding:clamp(28px,2.8vw,38px); background:color-mix(in srgb, var(--a-tint) 72%, #000); border:1px solid color-mix(in srgb, #fff 8%, transparent); border-top-color:color-mix(in srgb, #fff 16%, transparent); transition:transform .35s ease, border-color .35s ease, filter .35s ease, opacity .35s ease; } .a-home .ah-ben-grid .b:hover{ transform:scale(1.01); border-color:color-mix(in srgb, var(--a-accent) 55%, transparent); } .a-home .ah-ben-grid .ic{ display:block; color:var(--a-accent); margin-bottom:20px; } .a-home .ah-ben-grid .ic svg{ width:32px; height:32px; } .a-home .ah-ben-grid h3{ font-family:'Fraunces',serif; font-size:1.35rem; font-weight:500; margin-bottom:14px; } .a-home .ah-ben-grid p{ color:var(--a-muted-lt); font-size:.95rem; line-height:1.72; } /* the parallax script bails under 1024px; the layout flattens with it */ @media (max-width:1023px){ .a-home .ah-ben-wrap{ grid-template-columns:1fr; gap:clamp(24px,4vw,40px); } .a-home .ah-ben-grid{ grid-template-columns:1fr 1fr; } .a-home .ah-ben-grid .col.right{ top:0; } .a-home .ah-ben-grid .col{ transform:none !important; } } @media (max-width:640px){ .a-home .ah-ben-grid{ grid-template-columns:1fr; } } /* mobile: the hero cut-out keeps its own scale (restored after the splice) */ @media (max-width:900px){ .a-home .ah-photo.cutout img{ width:104%; left:50%; bottom:0; } } /* ── Stacked hero, tablet band (Connor 2026-08-16) ──────────────────────────────────── 641–980px was the only band with no hero treatment of its own. The grid collapses to one column at 980, but the disc-above-copy rules stopped at 640, so what rendered between them was the DESKTOP composition with its second column deleted: copy ragged left against a half-empty field, and the cut-out dumped below the buttons as a man floating on plain blue with no ground under him. Connor caught it at 840px; it was wrong from 641 to 980. The phone treatment was already the right answer for a stacked hero, so it now owns the whole stacked range, with the disc scaled up for the wider column. Scoped min-width:641px on purpose: the ≤640 block is signed off and must not move. Placed AFTER the max-width:900px rule above, which would otherwise re-flatten the cut-out inside the disc across most of this band. */ @media (min-width:641px) and (max-width:980px){ .a-home .ah-hero-grid{ justify-items:center; } .a-home .ah-photo{ order:-1; max-width:none; width:auto; margin:0 0 10px; } .a-home .ah-photo.cutout .ah-photo-frame{ position:relative; width:clamp(236px,30vw,296px); height:clamp(236px,30vw,296px); aspect-ratio:auto; margin:0 auto; border-radius:50%; background:#F4F1EA; overflow:hidden; box-shadow:0 0 0 5px var(--a-accent), 0 16px 30px rgba(0,0,0,.34); } /* Proportional to the frame, so the crop holds at every size in the clamp: the phone disc is 234px of him in a 236px circle, pulled 22px below the bottom edge. */ .a-home .ah-photo.cutout img{ position:absolute; left:50%; bottom:-9.3%; transform:translateX(calc(-50% - 7px)); width:auto; height:99.2%; max-width:none; object-fit:contain; filter:none; } /* A centred disc over left-ragged copy reads as a mistake — same reasoning as the phone. */ .a-home .ah-hero-grid .is-in{ text-align:center; } .a-home .ah-hero .ah-lead{ margin-left:auto; margin-right:auto; } .a-home .ah-hero-cta{ justify-content:center; } /* Same fault, second instance: à-propos "Mon histoire". Stacked, the portrait was capped at 22rem and CENTRED (374px at 860) while the prose beside it stayed left-ragged on its own 537px measure, so the image floated over text that started somewhere else. Measured, not eyeballed: portrait [243..617], paragraph [34..572] at 860px. The column now sits on the prose measure so nothing is left floating. */ .a-home .ah-about{ max-width:538px; margin-inline:auto; } /* ⛔ And the portrait is HIDDEN here, not resized (Connor 2026-08-16). Sharing the prose measure fixed the alignment but made it 538x627, seventy percent of the viewport height, and a portrait that size is a wall you scroll past rather than a picture of him. Phones already drop it at ≤640 (line ~1883); this simply extends that decision across the whole stacked range. He is beside the copy on desktop, where the layout has room for him. */ .a-home .ah-about .ah-portrait{ display:none; } } /* ── Proof bar between Fabien's story and the catalogue. Full width, solid, on the same colour as the footer so it reads as a divider between the two sections. */ .a-home .ah-proof{ background:color-mix(in srgb, var(--a-tint) 72%, #000); position:relative; } .a-home .ah-proof-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,48px); } .a-home .ah-proof-row .s{ display:flex; flex-direction:column; gap:10px; align-items:center; text-align:center; } .a-home .ah-proof-row .n{ font-family:'Fraunces',serif; font-weight:500; letter-spacing:-.02em; font-size:clamp(1.9rem,3.2vw,2.6rem); line-height:1; color:var(--a-accent); } .a-home .ah-proof-row .l{ font-family:system-ui,sans-serif; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--a-muted-lt); line-height:1.6; white-space:nowrap; } @media (max-width:820px){ .a-home .ah-proof-row{ grid-template-columns:repeat(2,1fr); gap:28px; } } /* ── Livres: bigger covers, text and grid closer together ───────────────── */ /* 5 x 3 as before, but the covers column takes much more of the row: the block was never too short, the middle was too empty and the covers too small (Connor 2026-07-20). */ /* Desktop only: on a phone this !important beat the 4-column mobile rule and the fixed 660px width made the whole page wider than the screen (Connor 2026-07-20). */ @media (min-width:901px){ .a-home .ah-covers{ grid-template-columns:repeat(5,1fr); gap:10px; max-width:580px; } } /* ── Header: its own band, not a lighter twin of the hero ───────────────────── Takes the same deep plate as the announce bar above it and the footer, so the top of the page reads as one dark strip and the hairline that used to separate it from the hero is no longer doing any work. Sticky, so it follows the page down (Connor 2026-07-20). */ /* position:sticky lives HERE, not on the Tailwind `sticky` class in the markup: that utility was purged out of tw.css (only .fixed/.absolute/.relative survived), so `class="sticky"` resolved to position:static and the header never stuck on any page. Verified 2026-07-20. */ /* The bar takes the PANEL navy, not the ground (Connor 2026-08-10, option B of four he reviewed). At var(--a-ground) it was the identical navy to the hero beneath it, so the two bled into one another and the bar had no edge at all. --a-panel is already in the palette (it is the card colour), so nothing is invented and it sits a step darker than the page. */ .a-head-bar{ position:sticky; top:0; z-index:50; background:var(--a-panel); border-bottom:0; } html{ scroll-padding-top:96px; } /* The hero cut-out is allowed to overflow its section; on a phone that widened the page and pushed the CTAs past the right edge. */ /* clip, NOT hidden (Connor 2026-07-20). overflow-x:hidden on html/body makes them a scroll container, which silently breaks position:sticky for every descendant, so the header could never stick no matter what was set on it. overflow:clip prevents the same horizontal scrollbar without creating that container. */ html, body{ overflow-x:clip; } /* Overscroll: rubber-banding past the top showed the body's light ground above the dark announce bar. The canvas takes the plate colour instead, which matches the announce bar at the top and the footer at the bottom, on every page (Connor 2026-07-20). */ html{ background:color-mix(in srgb, var(--a-tint) 72%, #000); } body{ background:var(--a-ground); } /* Covers on a phone: 3 across x 5 down fills exactly (15 covers), where 4 across left a ragged last row (Connor 2026-07-20). */ @media (max-width:560px){ .a-home .ah-covers{ grid-template-columns:repeat(3,1fr) !important; gap:8px; } } /* ══════════════════════════════════════════════════════════════════════════════ THE HOMEPAGE CARD STANDARD, APPLIED SITE-WIDE (Connor 2026-07-20) Every card component on the service pages predates the 2026-07-20 homepage and used --a-panel with a plain --a-rule border, which on the dark sections is nearly the section colour. They now take the homepage card: deep plate fill, hairline at #fff 8%, top edge lifted to #fff 16%, no drop shadow (shadows get sliced by overflow clips and read as boxes). One block here restyles all fifteen pages at once. ═══════════════════════════════════════════════════════════════════════════ */ .a-home .ah-inc, .a-home .ah-ben, .a-home .ah-pstep, .a-home .ah-keep .k, .a-home .ah-fit .f, .a-home .ah-sec.tint .ah-inc, .a-home .ah-scroller .ah-ben{ background:color-mix(in srgb, var(--a-tint) 72%, #000); border:1px solid color-mix(in srgb, #fff 8%, transparent); border-top-color:color-mix(in srgb, #fff 16%, transparent); box-shadow:none; } /* On the light sections the same cards need the darker plate to still read as cards. */ .a-home .ah-card, .a-home .ah-consult{ box-shadow:none; } /* Hover: the card warms to gold and the heading picks up the accent. Quiet on the content cards, but present enough that the section reads as interactive (Connor 2026-07-20). */ .a-home .ah-ben, .a-home .ah-inc, .a-home .ah-pstep{ transition:border-color .3s ease, background-color .3s ease, color .3s ease; } /* Card hover removed entirely for .ah-ben and .ah-inc (Connor 2026-07-20). These sections already signal state: the difference scroller has the scroll-driven .is-cur highlight, and "ce que vous obtenez" is a static list that does not need a hover state at all. */ /* RESTORED 2026-07-20: this rule was collateral damage from the hover-removal regex. Without position:relative on the card, the absolutely positioned figure resolved against the nearest positioned ancestor instead, so every number escaped its card and stacked on top of one another at the top right of the section. */ .a-home .ah-pstep{ position:relative; min-height:290px; padding-top:22px; } .a-home .ah-pstep .n{ position:absolute; top:14px; right:26px; margin:0; padding:0; border:0; background:none; font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:4.4rem; line-height:1; letter-spacing:-.03em; pointer-events:none; user-select:none; /* 30%, not 14% (Connor 2026-07-20): at 14% the inactive figures read as absent, so the section looked like it had lost its numbering entirely. Still clearly secondary to the active one, which is the accent. */ color:color-mix(in srgb, #fff 30%, transparent); transition:color .25s ease; } .a-home .ah-pstep.is-cur .n{ color:var(--a-accent); } .a-home .ah-pstep.is-cur{ border-color:var(--a-rule); background:var(--a-panel); } .a-home .ah-pstep h3{ margin-top:52px; padding-right:70px; } .a-home .ah-flow > li::before{ background:var(--a-accent); color:var(--a-accent-ink); border:0; } /* PENDANT LA SÉANCE reads as a TIMELINE, not a second numbered sequence (Connor 2026-07-20). The process scroller above it is already "six numbered steps"; repeating numerals here made the two sections look like the same component twice. Inside the session, what matters is DURATION, so the timing becomes the marker and a connecting rule runs down the column. */ .a-home .ah-flow{ position:relative; } .a-home .ah-flow .fl .n{ display:none; } .a-home .ah-flow .fl{ grid-template-columns:auto 1fr; position:relative; padding-left:0; } .a-home .ah-flow .fl .t{ grid-column:1; grid-row:1; align-self:start; justify-self:start; min-width:78px; text-align:right; padding-top:4px; font-family:'Fraunces',serif; font-size:.92rem; letter-spacing:0; color:var(--a-accent); text-transform:none; } .a-home .ah-flow .fl > .bd{ grid-column:2; position:relative; padding-left:26px; } /* the timeline itself: a rule down the left of the copy, with a node per entry */ .a-home .ah-flow .fl > .bd::before{ content:""; position:absolute; left:0; top:9px; width:9px; height:9px; border-radius:50%; background:var(--a-accent); } .a-home .ah-flow .fl > .bd::after{ content:""; position:absolute; left:4px; top:20px; bottom:-14px; width:1px; background:var(--a-rule-lt); } .a-home .ah-flow .fl:last-child > .bd::after{ display:none; } @media (max-width:720px){ .a-home .ah-flow .fl .t{ text-align:left; min-width:0; } } /* Service pages: the "ce que vous obtenez" grid takes the homepage domaines geometry, so the four cards read as the same family — asymmetric bottom row, blur the siblings on hover (Connor 2026-07-20). */ /* :not(.ah-docs) — these stagger the SMALL cards. The documents card spans the full grid (grid-column:1/-1), and on 2026-08-10 two duplicate cards came off consultation-complète, which made the docs card nth-child(3) and shrank it to 88% with a gap down its right side. Position-based rules break the moment the count changes; pin them to the thing they mean. */ .a-home .ah-incl .ah-inc:nth-child(3):not(.ah-docs){ width:88%; } .a-home .ah-incl .ah-inc:nth-child(4):not(.ah-docs){ width:112%; position:relative; right:12%; } /* removed 2026-07-20 (Connor): :has() blurred and faded EVERY other card in the grid when one was hovered, which is why hovering one card appeared to affect them all. */ .a-home .ah-incl .ah-inc{ transition:border-color .35s ease; } /* ⚠️ 980, NOT 820 (raised 2026-08-16). The stagger only makes sense while .ah-incl is a TWO column grid, and that collapses to one column at 980 (see the max-width:980px block). Leaving the reset at 820 left the band 821–980 in a single column still carrying width:112% and right:12%, so card 4 rendered 887px wide inside an 860px viewport starting at -61px: clipped on BOTH edges, the heading reading "os documents astrologiques". Measured at 860 and 900 on consultation-complete, consultation-specialisee, seance-de-suivi and suivi-premium. A reset for a collapsed grid has to fire at the SAME breakpoint the grid collapses at, or it leaves a broken band between the two. */ @media (max-width:980px){ /* ⚠️ The :not(.ah-docs) MUST be repeated here. Adding it above raised those rules' specificity over this reset, so on 2026-08-10 the stagger survived onto phones — card 3 rendered 308px wide and card 4 392px, hanging 22px off the left edge at 390. A qualifier added to a base rule has to be added to its override too. */ .a-home .ah-incl .ah-inc:nth-child(3):not(.ah-docs), .a-home .ah-incl .ah-inc:nth-child(4):not(.ah-docs){ width:auto; right:auto; } } /* Service-page price line: figures and facts spaced apart, never separated by middle dots. */ .a-home .ah-heroactions{ display:flex; flex-direction:column; align-items:center; gap:18px; margin:26px 0 0; } .a-home .ah-heroactions .ah-btn{ display:inline-flex; align-items:center; margin:0; } .a-home .ah-shero .ah-priceline{ display:inline-flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:14px; margin:0; padding:0; background:none; border:0; } .a-home .ah-shero .ah-priceline b{ font-family:'Fraunces',serif; font-size:1.5rem; font-weight:500; letter-spacing:0; text-transform:none; color:var(--a-accent); } .a-home .ah-shero .ah-priceline span{ color:var(--a-muted-lt); font-size:.68rem; letter-spacing:.14em; } .a-home .ah-shero .ah-priceline span + span::before{ content:''; display:inline-block; width:3px; height:3px; border-radius:50%; background:color-mix(in srgb, var(--a-muted) 70%, transparent); margin-right:14px; vertical-align:middle; } /* Quiet outbound link: gold underline, no button weight. */ .a-home .ah-quietlink{ margin-top:22px; font-family:system-ui,sans-serif; font-size:.82rem; } .a-home .ah-quietlink a{ color:var(--a-muted-lt); text-decoration:none; padding-bottom:3px; border-bottom:1px solid color-mix(in srgb, var(--a-accent) 50%, transparent); transition:color .18s ease, border-color .18s ease; } .a-home .ah-quietlink a:hover{ color:var(--a-ink); border-color:var(--a-accent); } /* "Est-ce pour vous" now sits on the dark: the two columns take the standard card, and the NO column is held back so the YES column reads first (Connor 2026-07-20). */ .a-home .ah-fit .col{ background:color-mix(in srgb, var(--a-tint) 62%, #000); border:1px solid color-mix(in srgb, #fff 8%, transparent); border-top-color:color-mix(in srgb, #fff 16%, transparent); } .a-home .ah-fit .col.yes{ border-color:color-mix(in srgb, var(--a-accent) 45%, transparent); } /* Solid, not dashed (Connor 2026-07-20). A dashed outline reads as a placeholder or a drop zone, not as "this is the column that does not apply to you". The distinction is carried by the darker ground and the muted heading instead. */ .a-home .ah-fit .col.no{ background:color-mix(in srgb, var(--a-tint) 70%, #000); border-style:solid; border-color:color-mix(in srgb, #fff 10%, transparent); } .a-home .ah-fit .col.no h4{ color:var(--a-muted-lt); } /* Hero: price pill and CTA sit as one row, centred, with the button no longer oversized. */ /* ── Entretien découverte questionnaire ────────────────────────────────────── Word minimums are a deliberate commitment device (Barthomeuf's mechanic): they stop the form filling with one-line enquiries Fabien then has to chase. */ /* full width to the wrap padding (Connor 2026-08-10), with the closing form still held to a readable measure so the fields do not stretch the width of the page */ .a-home .ah-quiz{ max-width:none; } .a-home .ah-quiz .ah-form{ max-width:640px; } .a-home .ah-filter{ border-left:2px solid var(--a-accent); padding:14px 20px; margin-bottom:36px; background:color-mix(in srgb, var(--a-accent) 7%, transparent); color:var(--a-muted-lt); font-size:.92rem; line-height:1.7; } .a-home .ah-quiz form{ display:flex; flex-direction:column; gap:30px; } .a-home .ah-quiz .row2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; } .a-home .ah-quiz label{ display:block; font-family:system-ui,sans-serif; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--a-muted); } .a-home .ah-quiz input[type=text], .a-home .ah-quiz input[type=email], .a-home .ah-quiz textarea, .a-home .ah-quiz select{ display:block; width:100%; margin-top:10px; font-family:'Fraunces',serif; font-size:1rem; color:var(--a-ink); background:color-mix(in srgb, var(--a-tint) 72%, #000); border:1px solid color-mix(in srgb, #fff 10%, transparent); border-radius:12px; padding:14px 16px; text-transform:none; letter-spacing:0; } .a-home .ah-quiz textarea{ resize:vertical; line-height:1.7; } /* Focus = the border warms, nothing else (Connor 2026-08-14: no orange outline on typed fields). Chrome autofill also repainted inputs white; the inset shadow trick pins the field to its own dark ground whatever autofill does. */ .a-home .ah-quiz :is(input,textarea,select):focus{ outline:none; border-color:var(--a-accent); } .a-home .ah-quiz :is(input,textarea):-webkit-autofill, .a-home .ah-quiz :is(input,textarea):-webkit-autofill:hover{ -webkit-box-shadow:0 0 0 1000px #081226 inset; -webkit-text-fill-color:var(--a-ink); caret-color:var(--a-ink); } /* Focused autofill keeps the ORANGE border like every other focused field (Connor 2026-08-14: "the orange wasn't so bad") — the earlier rule painted it pale. */ .a-home .ah-quiz :is(input,textarea):-webkit-autofill:focus{ -webkit-box-shadow:0 0 0 1000px #081226 inset; -webkit-text-fill-color:var(--a-ink); caret-color:var(--a-ink); border-color:var(--a-accent); } .a-home .ah-quiz fieldset{ border:0; padding:0; margin:0; } .a-home .ah-quiz legend{ font-family:'Fraunces',serif; font-size:1.2rem; color:var(--a-ink); margin-bottom:8px; padding:0; } .a-home .ah-quiz .qn{ color:var(--a-accent); margin-right:10px; } .a-home .ah-quiz .hint{ font-size:.82rem; color:var(--a-muted); margin-bottom:14px; } .a-home .ah-quiz .opt{ display:flex; align-items:center; gap:12px; padding:13px 16px; margin-top:10px; border-radius:12px; border:1px solid color-mix(in srgb, #fff 8%, transparent); background:color-mix(in srgb, var(--a-tint) 72%, #000); cursor:pointer; text-transform:none; letter-spacing:0; font-size:.95rem; color:var(--a-muted-lt); transition:border-color .25s ease, color .25s ease; } .a-home .ah-quiz .opt:hover{ border-color:color-mix(in srgb, var(--a-accent) 45%, transparent); } .a-home .ah-quiz .opt:has(input:checked){ border-color:var(--a-accent); color:var(--a-ink); } .a-home .ah-quiz .opt input{ accent-color:var(--a-accent); width:16px; height:16px; } /* No square focus ring on the control itself (Connor 2026-08-14, "weird square outline") — the row's border colour carries focus instead, so keyboard users still see it. */ .a-home .ah-quiz .opt input:focus, .a-home .ah-quiz .opt input:focus-visible, .a-home .ah-quiz select:focus, .a-home .ah-quiz select:focus-visible{ outline:none; } .a-home .ah-quiz .opt:focus-within{ border-color:var(--a-accent); } /* [hidden] must actually hide: a display rule on .sel out-cascaded the hidden attribute, so the empty cascading select reserved a dead block between question 5 and the submit. */ .a-home .ah-quiz [hidden]{ display:none !important; } .a-home .ah-quiz .sel + .sel{ margin-top:18px; } .a-home .ah-quiz .count{ font-family:system-ui,sans-serif; font-size:.74rem; margin-top:8px; color:var(--a-muted); } .a-home .ah-quiz .count.short{ color:#e5a54d; } .a-home .ah-quiz .count.ok{ color:var(--a-accent); } .a-home .ah-privacy{ font-size:.8rem; line-height:1.7; color:var(--a-muted); } @media (max-width:640px){ .a-home .ah-quiz .row2{ grid-template-columns:1fr; } } .a-home .ah-quiz [hidden]{ display:none !important; } /* Tab panels must start at the same height. The scroller carries 18px of its own top padding (clearance for the .flag badge) which the FAQ panel does not, so switching tabs made the content jump. The FAQ panel takes the same 18px (Connor 2026-07-20). */ [data-panel] > .ah-faq, [data-panel] .ah-wrap > .ah-faq{ padding-top:13px; } [data-panel] > .ah-wrap{ padding-top:0; } /* Hero facts: one quiet row under the CTA, spacing not separators. */ .a-home .ah-shero .ah-herofacts{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(18px,3vw,44px); margin:26px 0 0; font-family:system-ui,sans-serif; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--a-muted); } /* Price sits with the decision, inside the fork's featured card. */ .a-home .ah-forkprice{ margin:-6px 0 20px; font-size:.9rem; line-height:1.6; color:var(--a-muted-lt); } .a-home .ah-forkprice b{ font-family:'Fraunces',serif; font-size:1.25rem; font-weight:500; color:var(--a-accent); } /* Mid-page CTA band. The whole band is the link: gold hairlines top and bottom, an arrow that travels on hover, and the fill warming toward the accent so it reads as clickable rather than as a caption with a button parked next to it (Connor 2026-07-20). */ .a-home .ah-midcta{ display:block; text-decoration:none; background:color-mix(in srgb, var(--a-tint) 72%, #000); border-top:1px solid color-mix(in srgb, var(--a-accent) 40%, transparent); border-bottom:1px solid color-mix(in srgb, var(--a-accent) 40%, transparent); transition:background-color .35s ease, border-color .35s ease; } .a-home .ah-midcta:hover{ background:color-mix(in srgb, var(--a-accent) 10%, color-mix(in srgb, var(--a-tint) 72%, #000)); border-color:var(--a-accent); } .a-home .ah-midcta .ah-wrap{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding-top:clamp(34px,4vw,52px); padding-bottom:clamp(34px,4vw,52px); } .a-home .ah-midcta .t{ font-family:'Fraunces',serif; font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1.2; color:var(--a-ink); } .a-home .ah-midcta .s{ font-family:system-ui,sans-serif; font-size:.8rem; letter-spacing:.04em; color:var(--a-muted); } .a-home .ah-midcta .go{ display:inline-flex; align-items:center; gap:10px; margin-top:14px; font-family:system-ui,sans-serif; font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--a-accent); } .a-home .ah-midcta .go svg{ width:17px; height:17px; transition:transform .3s ease; } .a-home .ah-midcta:hover .go svg{ transform:translateX(6px); } /* ══════════════════════════════════════════════════════════════════════════════ CTA ORANGE (Fabien 2026-07-20). He asked for gold → orange; his own mockup only oranges the BUTTONS and keeps gold for eyebrows, rules, the headline italic and the icons, which is what preserves the tie to the bookstore's cream + gold. So orange is a button-only token, not a replacement for --a-accent. ═══════════════════════════════════════════════════════════════════════════ */ /* --a-cta now ALIASES --a-accent (Connor 2026-07-20). It used to hold its own hard-coded #FF8C42 from the "orange on buttons only, gold everywhere else" interpretation. That left two independent orange tokens: changing --a-accent recoloured the page while every button silently kept the old lighter peach, which is exactly what happened three times tonight. One accent, one token. Change the colour in the a9 palette block and nowhere else. */ :root, html[data-palette]{ --a-cta:var(--a-accent); --a-cta-lt:var(--a-accent-lt); --a-cta-ink:var(--a-accent-ink); } .a-home .ah-btn.primary, .a-home .ah-btn.primary.lg, .foot-lettre .inpill button, header .bg-accent, .md\:hidden .bg-accent{ background:var(--a-cta) !important; color:var(--a-cta-ink) !important; } .a-home .ah-btn.primary:hover, .foot-lettre .inpill button:hover, header .bg-accent:hover{ background:var(--a-cta-lt) !important; } /* The featured cards keep a gold outline; only the button inside them turns orange. */ .a-home .ah-fork .f.feat .ah-btn.primary{ background:var(--a-cta) !important; } /* Header contact icons (Fabien 2026-07-20): brand gold, never platform colours, sized to sit between the wordmark and the nav without crowding it at 1024px. */ .a-headicons{ display:inline-flex; align-items:center; gap:14px; margin-left:20px; } .a-headicons a{ display:inline-flex; color:var(--a-accent); opacity:.85; transition:opacity .2s ease, color .2s ease, transform .2s ease; } .a-headicons a:hover{ opacity:1; color:var(--a-accent-lt); transform:translateY(-1px); } .a-headicons svg{ width:19px; height:19px; } @media (max-width:1180px){ .a-headicons{ gap:11px; margin-left:14px; } .a-headicons svg{ width:17px; height:17px; } } @media (max-width:1079px){ .a-headicons{ display:none; } } /* hamburger takes over here */ /* Hero sub-lines (Fabien 2026-07-20). */ /* Quiet, not accent (Connor 2026-07-20). A full-width orange sentence sat directly under an orange headline word, so the hero had two competing orange elements before the CTA, which is the one thing that should own the colour. Smaller and muted, it reads as a positioning line rather than a second headline. */ .a-home .ah-herosub{ font-family:'Fraunces',serif; font-size:clamp(.95rem,1.4vw,1.1rem); color:var(--a-muted-lt); margin:0 0 14px; } .a-home .ah-herosubsub{ font-family:system-ui,sans-serif; font-size:.85rem; letter-spacing:.02em; line-height:1.7; color:var(--a-muted); margin:0 0 20px; max-width:52ch; } /* Four stats, never a 3+1 orphan row. */ .a-home .ah-mini-stats{ grid-template-columns:repeat(4,1fr); } .a-home .ah-mini-stats .n{ hyphens:auto; } @media (max-width:900px){ .a-home .ah-mini-stats{ grid-template-columns:repeat(2,1fr); } } /* Fork sub-line: his final-CTA copy sits under the heading so the close keeps its promise and its function (Fabien 2026-07-20). */ .a-home .ah-chead .ah-forksub{ color:var(--a-muted-lt); line-height:1.8; max-width:62ch; margin:14px auto 0; } /* ── Header / footer alignment (Connor 2026-07-20) ───────────────────────────── The header and footer used Tailwind's max-w-6xl + px-5, which resolves 24px wider and 12px further left than the .ah-wrap every section uses. The nav therefore sat visibly outside the cards and copy below it. Both are pinned to the identical container so the logo lines up with the left edge of every section, and Réserver with the right. */ /* NOT scoped to .a-home: the header and footer sit OUTSIDE that wrapper, so an .a-home prefix matches nothing. Unscoped is also correct — the same 24px mismatch exists on every page, since every page shares this header and footer markup. */ header > .max-w-6xl, footer > .max-w-6xl{ max-width:1200px; margin:0 auto; padding-left:clamp(20px,5vw,34px); padding-right:clamp(20px,5vw,34px); } /* Footer tightened (Connor 2026-08-09): py-14 ran 56px both ends and the lettre block added another 26px — the whole footer breathed more than any section above it. */ footer > .max-w-6xl.a-foot-grid{ padding-top:44px; padding-bottom:22px; } /* bottom 36 to 22, Connor 2026-08-14: less air at the foot of every page */ .foot-lettre{ margin-top:18px; } .a-foot-social{ margin-top:16px; } /* Stats band: rules removed (Connor 2026-07-20). The dividers between items are enough to group the row; the top and bottom rules boxed it in and made it read as a table. */ .a-home .ah-statband-row{ border-top:0; border-bottom:0; } /* ── Journal rail (Connor 2026-07-20) ────────────────────────────────────────── NOT a marquee. It starts flush with the page gutter, runs off the right edge, and the user scrolls it; it stops at the last card rather than looping forever, because the journal will keep growing and an endless loop of every post is not the point. The negative right margin lets the cards bleed past the container padding instead of being clipped at it, and the scroll padding keeps the first card flush on the left. */ .a-home .ah-blograil{ /* Full-bleed like .ah-scroller (Connor 2026-07-20). The rail sits INSIDE .ah-wrap, which the process scrollers do not, so it was being clipped at the 1200px gutter instead of running off the edge of the screen. This escapes the wrap to viewport width and then re-creates the same left gutter and end spacer the scrollers use. */ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding-left:calc(max((100vw - 1200px) / 2, 0px) + clamp(20px, 5vw, 34px)); padding-right:calc(100vw - min(340px, 80vw) - max((100vw - 1200px) / 2, 0px) - clamp(20px, 5vw, 34px)); /* vertical room so card shadows are not clipped by the scroll container */ padding-top:30px; padding-bottom:34px; overflow-x:auto; overflow-y:hidden; /* NO scroll-snap (Connor 2026-07-20). Two reasons. It felt robotic, dragging the rail to the next card instead of stopping where you let go. And with snap-align:start but no scroll-padding-left, the browser snapped the first card to the container edge on load, which cancelled the left gutter and made the row start flush against the screen. */ -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; } .a-home .ah-blograil::-webkit-scrollbar{ display:none; } .a-home .ah-blograil .track{ display:flex; align-items:stretch; gap:18px; width:max-content; } .a-home .ah-blograil .ah-bpost{ flex:0 0 min(340px,80vw); } /* The page must end DARK into the deep footer, the way the homepage does (Connor 2026-07-20). The final CTA section was transparent, so it showed the lighter royal ground and the footer below it looked like an unrelated slab. Panel colour steps down into the footer instead. */ .a-home .ah-final{ background:var(--a-panel); } /* ── Timeline ported from charmpages.co.uk (uui-layout32) ────────────────────── Values taken from the live Webflow CSS, not reinvented: grid 1fr 1fr, 4rem gap -> unchanged content-left position:sticky; top:12rem -> kept, top reduced for this header progress bar 2px, left 1.75rem, top 10%, height 65% -> a full-height rule instead, because Fabien's has no scroll-linked progress fill icon disc: border 1px solid accent, border-radius 100%, background = section ground so the disc masks the rule running behind it (same trick as the original's white) timeline-left / right padding 2.5rem 0, column gap 2.5rem -> unchanged Only the colours, fonts and copy are Fabien's. */ .a-home .cp-layout32{ display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; } /* 30vh, not a small offset (Connor 2026-07-20): pinned near the top the heading sits where nobody is looking. A third down puts it in the middle of the viewport as the steps pass. */ .a-home .cp-tl-content-left{ position:sticky; top:30vh; } .a-home .cp-tl-content-left h2{ font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:clamp(1.9rem,3.4vw,2.6rem); line-height:1.12; margin:14px 0 16px; } .a-home .cp-tl-content-left p{ color:var(--a-muted-lt); line-height:1.85; max-width:46ch; } .a-home .cp-tl-wrapper{ position:relative; } /* the single rule the discs sit on. 1.75rem from the left edge = centre of a 3.5rem disc */ /* Track runs between the FIRST and LAST node centres, so no rule hangs below the final step. 2.5rem step padding + 1rem icon-wrap padding + half a 3.5rem disc = 5.25rem to each centre. */ .a-home .cp-tl-rule{ position:absolute; left:1.75rem; top:5.25rem; bottom:auto; height:0; width:2px; background:var(--a-rule-lt); transform:translateX(-1px); overflow:hidden; } /* Fill height is set by JS from scroll position, so the line colours in as the copy passes. */ .a-home .cp-tl-fill{ display:block; width:100%; height:0; background:var(--a-accent); transition:height .12s linear; } .a-home .cp-tl-step{ display:grid; grid-template-columns:max-content 1fr; column-gap:2.5rem; position:relative; } .a-home .cp-tl-left{ display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:2.5rem 0; position:relative; } /* padding + the section colour is what makes the disc punch a hole in the rule */ .a-home .cp-tl-icon-wrap{ z-index:1; position:relative; padding:1rem 0; background:var(--a-ground); } .a-home .cp-tl-icon{ width:3.5rem; height:3.5rem; border-radius:100%; border:1px solid var(--a-accent); color:var(--a-accent); display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--a-accent) 10%, transparent); } .a-home .cp-tl-icon svg{ width:1.5rem; height:1.5rem; } .a-home .cp-tl-right{ padding:2.5rem 0; } .a-home .cp-tl-label{ font-family:system-ui,sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--a-accent); margin-bottom:8px; } .a-home .cp-tl-right h3{ font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:1.3rem; margin-bottom:10px; } .a-home .cp-tl-right p{ color:var(--a-muted-lt); line-height:1.8; max-width:52ch; } /* Original collapses to one column and drops the sticky at tablet width. */ @media (max-width:900px){ .a-home .cp-layout32{ grid-template-columns:1fr; gap:0; } .a-home .cp-tl-content-left{ position:static; margin-bottom:2.5rem; } } @media (max-width:560px){ .a-home .cp-tl-step{ column-gap:1.25rem; } .a-home .cp-tl-icon{ width:2.75rem; height:2.75rem; } .a-home .cp-tl-rule{ left:1.375rem; } } /* ── Header: one component, sticky, no stray rule (Connor 2026-07-20) ────────── The header markup is identical on all 16 pages, so styling it here IS the component: change it once and every page follows. Sticky so it stays available while scrolling. The bottom border was showing as a line across the hero because the header sits on the same colour as the section under it; the shadow only appears once the page has scrolled. */ /* .a-head-bar is now on ALL 16 pages, with `sticky` from Tailwind. Previously 14 pages carried `relative bg-ground border-b border-hairline` instead: not sticky, and with a bottom border that read as a stray line across the hero. One header, one rule. */ .a-head-bar{ transition:box-shadow .25s ease, background-color .25s ease; } /* Mobile: the bar slides away on scroll down and returns on the first upward flick (Connor 2026-08-14) — frees ~80px of a 390 viewport. The bottom bookbar deliberately does NOT hide: a booking CTA at every scroll position is the 2026-08-12 ruling, and on the service pages the bar is the conversion path. Toggled by motion.js. */ @media (max-width:767px){ .a-head-bar{ transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease; } .a-head-bar.nav-hid{ transform:translateY(-100%); box-shadow:none; } } .a-head-bar.is-stuck{ /* Same ground as at rest (Connor 2026-08-07): the 92%-black mix made the nav visibly change colour the moment you scrolled. The shadow alone says "stuck". */ box-shadow:0 1px 0 var(--a-rule), 0 10px 30px rgba(0,0,0,.28); } /* DIFFERENCE scroller takes the full-card highlight that used to live on the process cards (Connor 2026-07-20). Two scrollers sat side by side doing the same thing; now the process highlights its FIGURE and the difference highlights the WHOLE card, so they read as two different components rather than one repeated. */ /* .12s, not the .3s card transition: at 300ms the outgoing card was still lit while the incoming one came up, so two read as active at once (Connor 2026-07-20). */ .a-home .ah-ben{ transition:border-color .12s linear, background-color .12s linear; } .a-home .ah-ben.is-cur{ border-color:var(--a-accent); background:color-mix(in srgb, var(--a-accent) 14%, var(--a-panel)); } .a-home .ah-ben.is-cur h3{ color:var(--a-accent); } .a-home .ah-ben.is-cur .ic{ background:color-mix(in srgb, var(--a-accent) 26%, transparent); } /* Trim the tail (Connor 2026-07-20): the last step does not need the same breathing room below it as the first has above, and the extra space read as a gap after the timeline. */ .a-home .cp-tl-step:last-child .cp-tl-left, .a-home .cp-tl-step:last-child .cp-tl-right{ padding-bottom:1rem; } /* (scroller hover overrides removed: base hover no longer exists on .ah-ben) */ /* ── Native select chevron (Connor 2026-07-21) ──────────────────────────────── Written at the SAME specificity as ".a-home .ah-form select", which sets `background` as a SHORTHAND and therefore resets image, repeat, position and size. A lower-specificity rule lost the repeat and the arrow tiled across the field. One white chevron, right aligned, with matching padding either side. */ .a-home .ah-form select, .a-home .ah-quiz select, .a-home select{ appearance:none; -webkit-appearance:none; -moz-appearance:none; padding-left:16px; padding-right:44px; background-color:var(--a-ground); background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2F0EA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; background-size:14px 14px; } /* The quiz select must sit on the SAME ground as the .opt rows beside it — the shared select rule above paints --a-ground, which read as a different-coloured box among the questions (Connor 2026-08-14). */ .a-home .ah-quiz select{ background-color:color-mix(in srgb, var(--a-tint) 72%, #000); } /* ── Liens page: quieter buttons (Connor 2026-07-20) ────────────────────────── The link-in-bio page stacks six full-width buttons. The shared .light style is solid ivory, which is correct as ONE secondary button beside a primary, but six of them on navy is a wall of white. Here they become translucent panels with a hairline, so the single orange primary stays the only loud thing on the page. */ /* Reverted to solid ivory (Connor 2026-07-21): the translucent version read as disabled. */ .a-home .ah-btn.light.full{ background:var(--a-ink); color:var(--a-ground); border:1px solid var(--a-ink); } .a-home .ah-btn.light.full:hover{ background:#fff; border-color:#fff; } /* ── Entretien découverte: the three intro cards are information, not controls ─ (Connor 2026-07-20) They describe what the questionnaire is, they are not clickable and not part of the consultation, so a hover state made them look like buttons. */ /* .ah-dom.is-static: the three cards at the top of the entretien découverte page describe what the questionnaire is. They are not links and not part of the consultation, so a hover state made them read as buttons. Scoped with is-static because the same .ah-dom grid is the approved DOMAINES block on the homepage. */ .a-home .ah-dom.is-static .d:hover{ transform:none; border-color:var(--a-rule); box-shadow:none; cursor:default; } .a-home .ah-dom.is-static:has(.d:hover) .d:not(:hover){ filter:none; opacity:1; } /* ── Consultations dropdown, compact (Connor preferred this to the full-width bar) ── Kept unscoped: the header sits OUTSIDE .a-home, so an .a-home prefix matches nothing. /* ── Consultations dropdown (Connor 2026-07-20) ─────────────────────────────── Opens on hover AND focus-within, so it is reachable by keyboard. The panel is bridged to the trigger by the padding-top on .nav-drop-menu rather than a margin, or the pointer crosses a dead gap and the menu closes on the way down. NOT scoped to .a-home. The
sits OUTSIDE that wrapper, so an .a-home prefix here matches nothing at all: the menu stayed position:static and permanently visible, which stretched the nav to over 1100px tall. This is the second rule tonight to hit that trap (the sticky header was the first). Anything targeting the header or footer must be unscoped. */ .nav-drop{ position:relative; display:inline-flex; align-items:center; } .nav-drop > a{ display:inline-flex; align-items:center; gap:6px; } .nav-chev{ width:13px; height:13px; transition:transform .2s ease; } .nav-drop:hover .nav-chev, .nav-drop.hold .nav-chev, .nav-drop:focus-within .nav-chev{ transform:rotate(180deg); } .nav-drop-menu{ position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(6px); padding-top:14px; /* the bridge */ min-width:290px; z-index:60; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s ease, transform .18s ease, visibility .18s; } .nav-drop:hover .nav-drop-menu, .nav-drop.hold .nav-drop-menu, /* JS close-grace, see motion.js: survives momentary pointer exits */ .nav-drop:focus-within .nav-drop-menu{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); } .nav-drop-menu > a{ display:flex; align-items:baseline; justify-content:space-between; gap:18px; padding:12px 18px; text-transform:none; letter-spacing:0; font-family:'Fraunces',Georgia,serif; font-size:.95rem; color:var(--a-ink); background:var(--a-panel); border-left:1px solid var(--a-rule); border-right:1px solid var(--a-rule); transition:background-color .15s ease, color .15s ease; } .nav-drop-menu > a:first-of-type{ border-top:1px solid var(--a-rule); border-radius:14px 14px 0 0; padding-top:14px; } .nav-drop-menu > a:last-of-type{ border-bottom:1px solid var(--a-rule); border-radius:0 0 14px 14px; padding-bottom:14px; } .nav-drop-menu > a + a{ border-top:1px solid var(--a-rule); } .nav-drop-menu > a:hover{ background:color-mix(in srgb, var(--a-accent) 12%, var(--a-panel)); color:var(--a-accent); } .nav-drop-menu i{ font-style:normal; font-family:system-ui,sans-serif; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--a-muted); white-space:nowrap; } .nav-drop-menu > a:hover i{ color:var(--a-accent-lt); } .nav-drop-menu > a.all{ justify-content:center; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-family:system-ui,sans-serif; color:var(--a-muted-lt); } @media (max-width:900px){ .nav-drop-menu{ display:none; } } /* ── Cards must never match the section behind them (Connor 2026-07-20) ──────── Card backgrounds are --a-panel, which is also the tint sections' background, so moving a section from light to dark silently made its cards vanish. This has now happened twice. On a dark section the cards lift to a lighter panel instead of relying on the section staying light. */ .a-home .ah-sec.tint .ah-bpost, .a-home .ah-sec.tint .ah-consult, .a-home .ah-sec.tint .ah-svcard, .a-home .ah-sec.tint .ah-pstep, .a-home .ah-sec.tint .ah-inc, .a-home .ah-sec.tint .ah-elite .e, .a-home .ah-sec.tint .ah-fit .col, .a-home .ah-sec.tint .ah-card{ background:color-mix(in srgb, #fff 6%, var(--a-panel)); border-color:var(--a-rule-lt); } /* .ah-svcard had its ground colour written inline on reserver.html; the default belongs here */ .a-home .ah-svcard{ background:var(--a-panel); } /* The "Le problème" portrait is round (Connor 2026-07-20). The medallion is already a circular artwork, but a square-cropped photo dropped in here read as an unfinished box. Rounding it at the container means whichever image is used sits the same way. */ /* No border: the medallion is a finished circular artwork with its own rim, and an accent ring around it read as an orange box drawn on top (Connor 2026-07-20). Rounding stays so a square-cropped photo dropped in here still sits as a circle. */ .a-home .ah-problem img{ border-radius:50%; aspect-ratio:1; object-fit:cover; } /* ── Focus-on-hover, restored deliberately (Connor 2026-07-20) ──────────────── This :has() sibling effect was removed earlier when it was firing on cards that were not meant to be interactive. Connor wants it BACK, but only on the two "what you get / what you keep" grids, where dimming the siblings makes the hovered card the single thing in view. It stays off the difference scroller, the process cards and the decouverte intro cards, which have their own scroll-driven state or are not interactive at all. */ .a-home .ah-incl:has(.ah-inc:hover) .ah-inc:not(:hover), .a-home .ah-keep:has(> *:hover) > *:not(:hover){ filter:blur(3px); opacity:.45; } .a-home .ah-incl .ah-inc, .a-home .ah-keep > *{ transition:filter .35s ease, opacity .35s ease, border-color .35s ease; } /* The docs card dims with everything else (Connor 2026-07-20). Excluding it left one card fully lit while the rest faded, which read as a glitch rather than a deliberate exception. */ /* ── "Les formats" cards: blended, border-defined (Connor 2026-07-20) ───────── These sit on the section colour with only a hairline to define them, which reads cleaner than a stack of filled panels and lets the featured card carry an accent border as the one thing that stands out. The mentorat and immersion cards below deliberately KEEP the filled treatment, so the two groups read as different kinds of offer. */ .a-home .ah-sec.tint .ah-svrow{ background:transparent; border-color:var(--a-rule-lt); } .a-home .ah-svrow.feat{ border-color:var(--a-accent); } /* Only the scroller that actually carries a shadowed card needs the deep bottom padding; the others were reserving 56px of empty space under every row (Connor 2026-07-20). */ .a-home .ah-scroller:has(.ah-consult), .a-home .ah-scroller:has(.ah-card){ padding-bottom:56px; } /* …and that reservation then STACKS on the section's own padding, which is why L'approche and Continuer read looser than every other section (Connor 2026-08-10). Measured on consultation-complète at 1440, clear space under the last card: 142px under L'approche and 164px under Continuer, against a 108px norm everywhere else. The scroller padding cannot go — it is what stops overflow-x:auto slicing the card shadow — so the SECTION gives it back. ⚠️ This deliberately reduces the ~190px gap before the final CTA that was settled earlier; Connor asked for it directly, having seen it in place. */ .a-home .ah-sec:has(.ah-scroller){ padding-bottom:clamp(30px,5.1vw,74px); } .a-home .ah-sec:has(.ah-scroller .ah-consult), .a-home .ah-sec:has(.ah-scroller .ah-card){ padding-bottom:clamp(24px,3.6vw,52px); } /* ── Smooth in-page navigation (Connor 2026-07-20) ──────────────────────────── Anchor links were teleporting. scroll-behavior:smooth animates them, and scroll-margin-top keeps the sticky header from covering the section you land on. Respects reduced-motion. */ html{ scroll-behavior:smooth; } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } } section[id], [id^="acces"], [id^="approche"], [id^="lettre"], [id^="candidature"]{ scroll-margin-top:104px; } /* Three-across variant of the elite card row, used on the reservation page so the three consultations sit on one line and the two accompaniments on the next (Connor 2026-07-21). */ .a-home .ah-elite-3{ grid-template-columns:repeat(3,1fr); } .a-home .ah-elite .price{ font-family:'Fraunces',serif; font-size:1.15rem; color:var(--a-accent); margin:6px 0 2px; } @media (max-width:900px){ .a-home .ah-elite-3{ grid-template-columns:1fr; } } /* ── Card tint: only the immersion card carries the accent (Connor 2026-07-21) ─ .ah-elite .e tinted every card with 7% accent, so a row of three consultations read as uniformly orange-tinged. Plain panel is the default; the one flagged card keeps the tint. */ .a-home .ah-elite .e{ background:var(--a-panel); } .a-home .ah-elite .e[data-accent="1"], .a-home .ah-elite .e[data-accent="2"]{ background:color-mix(in srgb, var(--a-accent) 7%, var(--a-panel)); } /* ── Key-date cards (Connor 2026-07-21) ────────────────────────────────────── The year sat too close to the heading, and min-height:290px left dead space under short cards. More room under the figure, less reserved below. */ .a-home .ah-pstep h3{ margin-top:70px; } /* one card reads "Avant 2012", wider than a bare year, so the figure scales to fit its corner */ .a-home .ah-pstep .n{ max-width:62%; text-align:right; } .a-home .ah-scroller .ah-pstep{ min-height:auto; padding-bottom:26px; } /* ── The pull quote reads as a card, not as loose text under the biography ──── (Connor 2026-07-21) */ .a-home .ah-quote{ background:var(--a-panel); border:1px solid var(--a-rule); border-radius:20px; padding:clamp(30px,4vw,48px); margin:0; text-align:center; max-width:62ch; margin-inline:auto; } .a-home .ah-quote .sat{ display:flex; justify-content:center; margin-bottom:16px; opacity:.9; } .a-home .ah-quote blockquote{ font-family:'Fraunces',Georgia,serif; font-size:clamp(1.15rem,2vw,1.5rem); line-height:1.5; margin:0 0 14px; } .a-home .ah-quote figcaption{ font-family:system-ui,sans-serif; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--a-accent); } /* Liens page: softer accent glow behind the avatar, and room under the last button. */ .a-home .liens-avatar{ filter:drop-shadow(0 12px 26px rgba(0,0,0,.45)); } .a-home .liens-list{ padding-bottom:clamp(40px,6vw,72px); } /* Article date line. Sits where a publication date goes, directly under the category. Until Fabien publishes, it states the status rather than carrying an invented date; swapping in a real date means replacing the text only (Connor 2026-07-21). */ .a-home .ah-bpost .dt{ display:block; margin:4px 0 2px; font-family:system-ui,sans-serif; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--a-muted); } /* Liens: clear space between the last button and the footer. */ .a-home .liens-list{ padding-bottom:clamp(56px,8vw,96px); } /* ── a-propos refinements (Connor 2026-07-21) ───────────────────────────────── Quote card carries more weight, the Saturn mark is larger and no longer a thin two-stroke sketch, and consecutive dark sections stop stacking a full pad each. */ .a-home .ah-quote{ max-width:none; width:100%; padding:clamp(56px,7vw,104px) clamp(40px,7vw,110px); } .a-home .ah-quote blockquote{ font-size:clamp(1.7rem,3.4vw,2.9rem); line-height:1.32; max-width:24ch; margin-inline:auto; } .a-home .ah-quote figcaption{ margin-top:22px; font-size:.72rem; } .a-home .ah-quote .sat{ width:76px; height:76px; margin:0 auto 30px; opacity:1; } /* Two dark sections back to back would otherwise stack two full section pads between them. The reduction is split across BOTH sides of the boundary, not taken out of the second section's top alone: with the background continuous there is no visible section edge, so what reads is the rhythm of gaps, and halving one side only left the lower section starting 46px from its heading while ending 108px below its content. Split, the boundary totals one pad and every gap in the dark block is 108. (Connor 2026-07-29, on #domaines + #methode.) */ .a-home .ah-sec.tint + .ah-sec.tint{ padding-top:clamp(32px,4vw,54px); } .a-home .ah-sec.tint:has(+ .ah-sec.tint){ padding-bottom:clamp(32px,4vw,54px); } /* The whole book card is the link now, so it needs the affordances the button carried. */ .a-home a.ah-bk{ text-decoration:none; color:inherit; cursor:pointer; } .a-home a.ah-bk:focus-visible{ outline:2px solid var(--a-accent); outline-offset:3px; } .a-home a.ah-bk .bd{ padding-bottom:22px; } .a-home a.ah-bk h3{ transition:color .2s ease; } .a-home a.ah-bk:hover h3{ color:var(--a-accent); } /* ── Entretien découverte (Connor 2026-07-21) ──────────────────────────────── Three intro cards: titles must hold one line. They are short in French but the page is translated live, and "Réponse sous 72 h" becomes "Response within 72 hours", which wrapped and left the row ragged. Smaller heading with a reserved two-line box keeps them level. */ .a-home .ah-dom.is-static .d h3{ font-size:clamp(.95rem,1.25vw,1.08rem); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .a-home .ah-dom.is-static .d{ min-height:0; padding:clamp(22px,2.2vw,28px); } .a-home .ah-dom.is-static .d p{ font-size:.9rem; line-height:1.65; } /* The questionnaire now sits on the dark section, so its card has to lift off it. */ /* max-width removed 2026-08-10 (Connor: "it should be full width to where the padding is"). It was capped at 820px inside an 1132px wrap, so the card floated with 150px of dead navy either side. The closing form keeps its own 640px measure so the fields do not stretch. */ .a-home .ah-quiz{ max-width:none; margin-inline:auto; } /* ⛔ THE QUESTIONNAIRE HAS TO LIFT OFF THE SECTION, NOT SINK INTO IT (Connor 2026-08-11: "it's very small, it doesn't stick out, it blends in with the background"). The reason the offer cards below it read so much better is the CONTRAST DIRECTION: they are DARK cards on the BRIGHT ground navy. The questionnaire had it the other way round, a card 4% off the panel sitting on the dark tint, with darker options inside it, so three near identical navies stacked up and nothing had an edge. It now takes the bright ground as its plate, which puts the same dark-on-light relationship under the option cards as the offer section has. Same two colours, used the right way up. */ .a-home .ah-sec.tint .ah-quiz{ background:var(--a-ground); border:1px solid color-mix(in srgb, #fff 13%, transparent); border-top-color:color-mix(in srgb, #fff 22%, transparent); border-radius:22px; padding:clamp(28px,4vw,48px); box-shadow:0 34px 70px -44px rgba(0,0,0,.75); } /* the step counter and question sit on the brighter plate now, so they take the page ink */ .a-home .ah-sec.tint .ah-quiz .qprog{ color:color-mix(in srgb, var(--a-ink) 62%, transparent); } #methode{ position:relative; } /* The card is transparent here, so its padding is not an inset inside a visible plate, it is just dead space. padding-top was zeroed but the 44px bottom was left, which put 0 above the number circle and 44 below the paragraph. Both sides go. (Connor 2026-07-29.) */ /* SECOND PASS, same day: zeroing BOTH sides overshot. Measured at 1440, the gap from the h2 to the number circles was 70px while the gap from the last paragraph to the end of the section was 94px, so the heading read as stuck to the numbers. Worse than the raw numbers suggest, because .n carries a 10px box-shadow halo that eats into the gap above but has no counterpart below — perceived, it was nearer 60 vs 94. padding-top here restores it: 70+34 = 104 measured, ~94 once the halo is discounted, which matches the bottom. Set on .st (not .ah-chead) because Connor asked for space above the NUMBERS, and on mobile the same value also opens up the gap between stacked steps, which was only the 20px grid gap. MEASURE WITH THE REVEAL TRANSFORMS NEUTRALISED — .st carries a translateY until it scrolls into view, so a naive getBoundingClientRect reads the pre-animation position and the gap comes back ~14px short. With transforms off the true figures were 56 above / 108 below; this padding brings the top to 108 and the two sides match. Do not re-zero this without re-measuring both sides. (Connor 2026-07-29.) */ #methode .st{ position:relative; z-index:1; background:transparent; border:0; padding-top:clamp(28px,3.8vw,52px); padding-bottom:0; } #methode .n{ width:84px; height:84px; color:var(--a-accent-ink); box-shadow:0 0 0 10px var(--a-panel); } /* With the decouverte hero's padding-bottom at 0, the lede's bottom margin collapsed OUT of the section and added 36px of space the section itself did not own, so the gap above the three cards never matched the gap below. Zeroing it hands all the spacing to the cards section, which pads both sides equally (Connor 2026-07-21). */ .a-home .ah-shero .lede:last-of-type{ margin-bottom:0; } /* ── Footer (rebuilt 2026-07-21) ────────────────────────────────────────────── Was three columns with an eleven-item "Informations" list that mixed navigation, contact details and legal notices in one run. Now four columns grouped by intent, socials as icons rather than text links, and the legal notices moved down into the base bar where people expect them. */ .a-foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.1fr; gap:clamp(28px,4vw,56px); } .a-foot-brand{ max-width:38ch; } .a-foot-social{ display:flex; gap:10px; margin:22px 0 26px; } .a-foot-social a{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--a-muted-lt); background:color-mix(in srgb, #fff 5%, transparent); border:1px solid var(--a-rule); transition:color .2s ease, background-color .2s ease, border-color .2s ease; } .a-foot-social a:hover{ color:var(--a-accent-ink); background:var(--a-accent); border-color:var(--a-accent); } .a-foot-social svg{ width:18px; height:18px; } .a-foot-head{ font-family:system-ui,sans-serif; font-size:.68rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--a-accent); margin-bottom:16px; } .a-foot-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; } .a-foot-col a{ font-size:.88rem; color:var(--a-muted-lt); transition:color .2s ease; } .a-foot-col a:hover{ color:var(--a-ink); } /* The contact details used to sit under a full-width rule at a smaller, dimmer size than the links above, so they read as an offcut rather than part of the column, and the rule looked like a stray line. Same size and rhythm as the links, grouped by space instead of a border. (Connor 2026-07-29.) */ .a-foot-contact{ /* SECOND PASS (Connor 2026-07-29): matching the links exactly solved the offcut problem and created a worse one — the column became five near-identical lines where three are navigation and two are raw contact data, with "Écrire à Fabien" sitting directly above the literal address doing the same job. Differentiated by ICON and a quiet label instead of by dimming: the label says why the pair is there, the icons say these are contact methods not pages, and the link/mailto distinction (form page vs his actual address) finally reads. No rule — the previous full-width border is what looked like a stray line. */ margin-top:26px; display:flex; flex-direction:column; gap:11px; font-size:.88rem; color:var(--a-muted); } .a-foot-contact .lab{ font-family:system-ui,-apple-system,sans-serif; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--a-muted); opacity:.7; margin-bottom:1px; } .a-foot-contact a{ color:var(--a-muted-lt); display:flex; align-items:center; gap:9px; } .a-foot-contact a svg{ width:14px; height:14px; flex:none; color:var(--a-accent); opacity:.85; transition:opacity .25s ease; } .a-foot-contact a:hover{ color:var(--a-accent); } .a-foot-contact a:hover svg{ opacity:1; } /* Base bar: credit left, legal right. */ .a-foot-base{ border-top:1px solid var(--a-rule); padding:14px 0 12px; } .a-foot-base > div{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; } .a-foot-base p{ font-size:.76rem; color:var(--a-muted); margin:0; } .a-foot-base p a{ color:var(--a-muted-lt); } .a-foot-base p a:hover{ color:var(--a-accent); } .a-foot-base nav{ display:flex; gap:20px; flex-wrap:wrap; } .a-foot-base nav a{ font-size:.76rem; color:var(--a-muted); transition:color .2s ease; } .a-foot-base nav a:hover{ color:var(--a-ink); } @media (max-width:1000px){ .a-foot-grid{ grid-template-columns:1fr 1fr; } .a-foot-brand{ grid-column:1 / -1; max-width:none; } } @media (max-width:600px){ .a-foot-grid{ grid-template-columns:1fr; } /* One clean centred base (Connor 2026-08-07, round 2): credit line, then the legal links in ONE line beneath (round 4) — smallest type on the page, no wrap. */ .a-foot-base{ padding:16px 0 20px; } .a-foot-base > div{ flex-direction:column; align-items:center; gap:8px; } .a-foot-base p{ font-size:.68rem; text-align:center; } /* vw-sized so the four links fit ONE line at every phone width — at a fixed .56rem the row ran to 401px in a 390 viewport (caught by the overflow audit, 2026-08-07) */ .a-foot-base nav{ justify-content:center; gap:1.6vw; flex-wrap:nowrap; } .a-foot-base nav a{ font-size:clamp(.4rem,2vw,.56rem); letter-spacing:0; padding:1px 0; white-space:nowrap; } } /* ── Legal pages: mentions-légales, confidentialité, politique ────────────────────── These three are the ONLY pages that never got the site's card language. They are plain Tailwind (no .a-home wrapper, so none of the rules above ever reached them), which is why the copy sat straight on the ground navy with no container, no structure and nothing to scan. Connor 2026-08-10: "very very boring, spruce these up a bit." Same card fill, hairline and lighter top edge as .ah-dom, an accent rule under the title, and a marker on each section heading. No copy is touched, only its setting. */ main.max-w-3xl{ background:color-mix(in srgb, var(--a-tint) 72%, #000); border:1px solid color-mix(in srgb, #fff 8%, transparent); border-top-color:color-mix(in srgb, #fff 16%, transparent); border-radius:20px; padding:clamp(28px,4vw,54px) clamp(22px,3.4vw,52px) clamp(34px,4vw,58px); margin-block:clamp(34px,5vw,72px); box-shadow:0 24px 60px -40px rgba(0,0,0,.65); } main.max-w-3xl h1{ position:relative; padding-bottom:20px; margin-bottom:28px; } main.max-w-3xl h1::after{ content:''; position:absolute; left:0; bottom:0; width:60px; height:2px; background:var(--a-accent); border-radius:2px; } /* a marker per section, so the page can be scanned rather than read start to finish */ main.max-w-3xl h2{ position:relative; padding-left:20px; margin-top:2.4em; } main.max-w-3xl h2::before{ content:''; position:absolute; left:0; top:.5em; width:8px; height:8px; border-radius:2px; background:var(--a-accent); } main.max-w-3xl h2:first-of-type{ margin-top:0; } main.max-w-3xl p{ max-width:70ch; } main.max-w-3xl a{ color:var(--a-ink); text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--a-accent) 45%, transparent); } main.max-w-3xl a:hover{ border-bottom-color:var(--a-accent); } main.max-w-3xl ul{ padding-left:0; list-style:none; } main.max-w-3xl ul li{ position:relative; padding-left:20px; } main.max-w-3xl ul li::before{ content:''; position:absolute; left:2px; top:.62em; width:5px; height:5px; border-radius:50%; background:color-mix(in srgb, var(--a-accent) 70%, transparent); } @media (max-width:640px){ main.max-w-3xl{ border-radius:16px; margin-inline:14px; } } /* ── Fragment: /decouverte/ only (2026-08-14 revision agent) ───────────────────────────── 1. .row2 stacks nom then email at ALL widths (tokens.css puts 1fr 1fr on desktop; the extra `form` in the selector outweighs it regardless of merge order). 2. Conditional "Contenu souhaité" select no longer reflows the form: [hidden] keeps its layout box (display:block beats tokens.css `.ah-quiz [hidden]{display:none!important}` via the id) and fades in when JS removes [hidden]. The fieldset height is constant, so the submit button never jumps. 3. More air between each question's legend/hint and its options (tokens: legend mb 8px, hint mb 14px; too tight per Connor). 4. Placeholder text in the quiz inputs sits in the muted colour, not full-strength ink. Submit already spans the form (flex column stretch); no width rule needed. */ .a-home .ah-quiz form .row2{ grid-template-columns:1fr; } /* 2026-08-14, Connor: the reserved layout box for the conditional select read as a dead block between question 5 and the submit ("remove all the space"). It now actually hides; the form reflowing when it appears is the lesser evil. */ .a-home .ah-quiz #q-contenu-wrap{ transition:opacity .3s ease; } .a-home .ah-quiz fieldset legend{ margin-bottom:16px; } .a-home .ah-quiz fieldset .hint{ margin-bottom:18px; } .a-home .ah-quiz input[type=text]::placeholder, .a-home .ah-quiz input[type=email]::placeholder{ color:var(--a-muted); opacity:.65; } /* frag-liens.css — LIENS PAGE ONLY (agent: liens+contact, 2026-08-14) What it does: equalises the link-in-bio button stack's bottom padding with its top. Measured on the render (1440 and 390, root font-size 17px): main's padding-top computes to 68px (Tailwind pt-16 = 4rem) but padding-bottom to 51px (pb-12 = 3rem), so the gap under "Le journal" before the footer was 17px tighter than the gap above the avatar. Scope: liens.html's
is shared with 404.html, so the rule is pinned to the main that contains the .liens-avatar portrait, which only liens has. 4rem matches pt-16 exactly at any root size; type+class+:has() outweighs the .pb-12 utility, and the fragment loads after tw.css regardless. */ main.a-home.a-hero:has(.liens-avatar){ padding-bottom: 4rem; } /* Article cards (Connor 2026-08-14): the tag sits top LEFT and the date top RIGHT on one shared line, and the card's button runs the card's width. Grid instead of reflowing the markup: row 1 is k + dt, everything after spans both columns. */ .a-home .ah-bpost .bd{ display:grid; grid-template-columns:1fr auto; align-items:baseline; column-gap:12px; } .a-home .ah-bpost .bd .k{ grid-column:1; } .a-home .ah-bpost .bd .dt{ grid-column:2; justify-self:end; } .a-home .ah-bpost .bd h3, .a-home .ah-bpost .bd p{ grid-column:1 / -1; } .a-home .ah-bpost .bd .ah-btn{ grid-column:1 / -1; display:flex; width:100%; justify-content:center; text-align:center; } /* Candidature wizard, step 4 (Connor 2026-08-14): the form ran ~60% of the card and hugged the left; it now spans the card. Phone joined the fields; placeholders show the expected shape. touch-action on the options kills the double-tap-zoom delay that made mid-animation taps feel dead on a phone. */ .a-home #mq .ah-form{ max-width:none; width:100%; } .a-home #mq .ah-form .two{ grid-template-columns:1fr 1fr; } .a-home .ah-quiz .qopt{ touch-action:manipulation; } /* Testimonial section bottom (Connor 2026-08-14, after the halving went too far): back up to the standard section rhythm below the cards, the top stays tight. */ .a-home section:has(> .ah-wrap + .ah-avis-rail){ padding-bottom:clamp(48px,6vw,72px) !important; } /* Article cards: the button sits on ONE shared baseline across the row. The card is a column, the body fills it, the paragraph row absorbs the slack. */ .a-home .ah-bpost{ display:flex; flex-direction:column; } .a-home .ah-bpost .bd{ flex:1; grid-template-rows:auto auto 1fr auto; align-content:start; } .a-home .ah-bpost .bd .ah-btn{ align-self:end; } /* ── THE BOOKSHELF IS A RAIL **INSIDE THE TAB PANELS ONLY** (Connor 2026-08-14): every book on it, running off the right edge so the reader scrolls through all seventeen. Scoped to #bt because the same class on /a-propos/ must LAY OUT as the base grid, not scroll ("literally just lay them out, I don't want a horizontal scroll for this one"). */ .a-home :is(#bt,#jt) .ah-bks{ display:flex; gap:18px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; margin-top:-8px; /* aligns the Livres panel's first row with the other panels' 48px */ /* Full-bleed BOTH sides like .ah-blograil (Connor 2026-08-15: scrolled covers were clipping at the wrap's left edge — "the padding sits on top" — instead of running off the screen like the Journal and Consultations rails). Escape the wrap to 100vw, then re-create the content-edge gutter as padding so the first card still lines up. */ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding-left:calc(max((100vw - 1200px) / 2, 0px) + clamp(20px, 5vw, 34px)); padding-right:clamp(20px,5vw,34px); } .a-home :is(#bt,#jt) .ah-bks::-webkit-scrollbar{ display:none; } .a-home :is(#bt,#jt) .ah-bks .ah-bk{ flex:0 0 min(250px,72vw); } .a-home :is(#bt,#jt) .ah-bks .ah-bk .cov img{ width:100%; height:auto; display:block; } /* Decouverte questionnaire width (Connor 2026-08-14: "it shouldn't be stretched this wide, it should have the normal padding every other section does"). .ah-quiz carries max-width:none for the mentorat form CARD; on decouverte the class sits on the WRAP itself, which stripped the page column entirely. Wraps get their column back. */ .a-home .ah-wrap.ah-quiz{ max-width:1200px; } /* Liens: more air at the very bottom only (Connor 2026-08-14, second pass). */ main.a-home.a-hero:has(.liens-avatar){ padding-bottom:6.5rem; } /* Card = Accepter and Refuser, nothing else (Connor 2026-08-14: "just accept or reject"). The Personnaliser link is GONE from the card. The granular panel itself stays reachable through the footer's "Gestion des cookies" link only, because consent withdrawal has to remain possible somewhere (CNIL) — but it is off the journey and nobody meets it unless they go looking. */ #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronCloseAlert, #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize, #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPrivacyUrl{ display:none !important; } /* ── THE MANAGEMENT PANEL, REDESIGNED (Connor 2026-08-14: "ugly as fuck… remove all of the collapsible cookie folder things"). Reached only via the footer's Gestion des cookies. Same card language as the consent pop-up: one panel, one sentence, the global pair, the service rows as plain lines, Enregistrer to close. cookieslist is off in consent.js, and every info-fold/read-more appendage is display:none here. */ #tarteaucitronRoot #tarteaucitron{ position:fixed !important; top:50% !important; left:50% !important; transform:translate(-50%,-50%) !important; margin:0 !important; width:min(440px, calc(100vw - 32px)) !important; max-height:min(78vh, 640px) !important; overflow-y:auto !important; border-radius:18px !important; background:var(--a-panel) !important; border:1px solid color-mix(in srgb, var(--a-ink) 14%, transparent) !important; box-shadow:0 24px 70px rgba(0,0,0,.5) !important; padding:26px !important; box-sizing:border-box !important; font-family:system-ui,-apple-system,sans-serif !important; } #tarteaucitronRoot #tarteaucitronServices{ margin:0 !important; padding:0 !important; box-shadow:none !important; background:none !important; } #tarteaucitronRoot #tarteaucitron .tarteaucitronBorder, #tarteaucitronRoot #tarteaucitronMainLineOffset, #tarteaucitronRoot #tarteaucitron .tarteaucitronMainLine, #tarteaucitronRoot #tarteaucitron .tarteaucitronLine{ background:none !important; border:0 !important; margin:0 !important; padding:0 !important; } #tarteaucitronRoot #tarteaucitron .tarteaucitronH1{ display:block !important; font-family:'Fraunces',Georgia,serif !important; font-weight:500 !important; font-size:1.35rem !important; text-align:left !important; color:var(--a-ink) !important; margin:0 0 10px !important; padding:0 !important; } #tarteaucitronRoot #tarteaucitronInfo{ background:none !important; border:0 !important; margin:0 0 16px !important; padding:0 !important; color:var(--a-muted-lt) !important; font-size:.82rem !important; line-height:1.55 !important; text-align:left !important; } #tarteaucitronRoot #tarteaucitronInfo p{ color:var(--a-muted-lt) !important; font-size:.82rem !important; margin:0 !important; } /* Global pair: same grid as the pop-up card. */ #tarteaucitronRoot #tarteaucitron .tarteaucitronAsk{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:10px !important; margin:0 0 18px !important; padding:0 !important; float:none !important; text-align:left !important; } #tarteaucitronRoot #tarteaucitron .tarteaucitronAsk .tarteaucitronAllow, #tarteaucitronRoot #tarteaucitron .tarteaucitronAsk .tarteaucitronDeny{ margin:0 !important; width:100% !important; padding:11px 8px !important; text-align:center !important; } /* Service rows: a hairline, the name, the pair. Every fold-out appendage dies. */ #tarteaucitronRoot #tarteaucitron ul{ list-style:none !important; margin:0 !important; padding:0 !important; } #tarteaucitronRoot #tarteaucitron .tarteaucitronTitle{ background:none !important; margin:0 0 8px !important; padding:12px 0 0 !important; border-top:1px solid var(--a-rule) !important; font-size:.68rem !important; letter-spacing:.1em !important; text-transform:uppercase !important; color:var(--a-muted) !important; text-align:left !important; } #tarteaucitronRoot #tarteaucitron .tarteaucitronTitle button{ background:none !important; color:inherit !important; padding:0 !important; margin:0 !important; font:inherit !important; } #tarteaucitronRoot #tarteaucitron li{ background:none !important; border:0 !important; margin:0 0 10px !important; padding:0 !important; } #tarteaucitronRoot #tarteaucitron .tarteaucitronName{ color:var(--a-ink) !important; font-size:.88rem !important; text-align:left !important; } #tarteaucitronRoot #tarteaucitron .tarteaucitronDetails, #tarteaucitronRoot #tarteaucitron .tarteaucitronReadmoreInfo, #tarteaucitronRoot #tarteaucitron .tarteaucitronReadmoreOfficial, #tarteaucitronRoot #tarteaucitron .tarteaucitronListCookies, #tarteaucitronRoot #tarteaucitron .tarteaucitronCookiesList, #tarteaucitronRoot #tarteaucitron .tarteaucitronCookiesNumber, #tarteaucitronRoot #tarteaucitron .tacCurrentStatus, #tarteaucitronRoot #tarteaucitron .tarteaucitronCookiesListMain{ display:none !important; } /* Close + save. */ #tarteaucitronRoot #tarteaucitronClosePanel{ position:absolute !important; top:14px !important; right:16px !important; width:auto !important; background:none !important; border:0 !important; color:var(--a-muted-lt) !important; font-size:.72rem !important; letter-spacing:.06em !important; text-transform:uppercase !important; text-decoration:underline !important; text-underline-offset:3px !important; padding:6px !important; cursor:pointer !important; } #tarteaucitronRoot #tarteaucitronSave{ background:none !important; padding:16px 0 0 !important; position:static !important; } #tarteaucitronRoot #tarteaucitronSaveButton{ width:100% !important; margin:0 !important; padding:12px 8px !important; text-align:center !important; } /* The dim behind the panel, if tarteaucitron injects one, stays subtle. */ #tarteaucitronRoot #tarteaucitronBack{ background:#000 !important; opacity:.55 !important; } /* Mobile tab targets (Connor 2026-08-14: "hard to click on mobile"): 44px minimum. */ @media (max-width:820px){ .a-home .ah-bigtabs > button{ padding:12px 10px; margin:-12px -10px; min-height:44px; } } /* Panel, second pass from the render: tarteaucitron injects its own !important display at runtime, which out-cascades a stylesheet grid — so the pair goes side by side via button WIDTHS instead of fighting the container. The ☐/✕/+ glyph spans are vendor ::before content and they render as tofu in this font stack; dead everywhere under the root. */ #tarteaucitronRoot .tarteaucitronCheck, #tarteaucitronRoot .tarteaucitronCross, #tarteaucitronRoot .tarteaucitronPlus{ display:none !important; } #tarteaucitronRoot #tarteaucitron .tarteaucitronAsk .tarteaucitronAllow, #tarteaucitronRoot #tarteaucitron .tarteaucitronAsk .tarteaucitronDeny{ display:inline-block !important; width:calc(50% - 6px) !important; box-sizing:border-box !important; } #tarteaucitronRoot #tarteaucitron .tarteaucitronAsk .tarteaucitronAllow{ margin-right:8px !important; } #tarteaucitronRoot #tarteaucitron li .tarteaucitronAsk{ margin-bottom:6px !important; } #tarteaucitronRoot #tarteaucitron .tarteaucitronName{ display:block !important; margin:0 0 8px !important; } #tarteaucitronRoot #tarteaucitron .tarteaucitronStatusInfo, #tarteaucitronRoot #tarteaucitron .tarteaucitronDash{ display:none !important; } #tarteaucitronRoot #tarteaucitron{ padding-bottom:22px !important; } /* Books tab rhythm (Connor 2026-08-14): the rail sat tight under the tabs and the Découvrir la librairie CTA crowded the section end. Deliberate air both sides. */ .a-home [data-panel="bt3"] > .ah-wrap{ padding-top:clamp(24px,3vw,38px); padding-bottom:clamp(10px,1.5vw,18px); } /* Continue tabs bleed off the viewport's right edge on phones (Connor 2026-08-14): the cut word IS the scroll cue, so the clip happens at the glass, not at the page gutter. */ @media (max-width:820px){ .a-home .ah-bigtabs{ margin-right:calc(50% - 50vw); padding-right:clamp(20px,5vw,34px); } } /* ── #cp-consent: OUR consent card (2026-08-14). The vendor banner is display:none'd by consent.js and this renders instead — see the note there. All layout lives here, no vendor selector can touch it. Matches Connor's reference: icon + title, sentence, Accepter / Refuser side by side. */ #cp-consent{ /* Bottom-centred, NOT screen-centred (2026-08-14): dead centre put an invisible-to-the-eye hover wall over the nav dropdown's lower items on laptop viewports — everything past the 888 row died the moment the pointer crossed onto the card (Connor's report, reproduced on the live render). At the bottom it can never overlap the header menu. */ position:fixed; bottom:16px; left:50%; transform:translateX(-50%); z-index:2147483000; width:min(400px, calc(100vw - 32px)); box-sizing:border-box; background:var(--a-panel); color:var(--a-ink); border:1px solid color-mix(in srgb, var(--a-ink) 14%, transparent); border-radius:18px; padding:24px 24px 20px; box-shadow:0 24px 70px rgba(0,0,0,.5); font-family:system-ui,-apple-system,sans-serif; } /* #cp-panel = the management panel opened from the footer. Same card language as the consent card, but CENTRED as a modal, with a plain × and a current-choice line. It replaces the vendor panel entirely — see consent.js. */ #cp-panel{ position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2147483000; width:min(440px, calc(100vw - 24px)); box-sizing:border-box; background:var(--a-panel); color:var(--a-ink); border:1px solid color-mix(in srgb, var(--a-ink) 14%, transparent); border-radius:18px; padding:24px 24px 20px; box-shadow:0 24px 70px rgba(0,0,0,.5); font-family:system-ui,-apple-system,sans-serif; } #cp-panel .cp-x{ position:absolute; top:10px; right:12px; background:none; border:0; color:var(--a-muted-lt); font-size:24px; line-height:1; cursor:pointer; padding:4px 8px; } #cp-panel .cp-x:hover{ color:var(--a-ink); } #cp-panel .cp-sec{ margin:16px 0 0; } #cp-panel .cp-lab{ display:block; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--a-accent); margin:0 0 6px; } #cp-panel .cp-note{ margin:0 0 12px; color:var(--a-muted-lt); font-size:.82rem; line-height:1.55; } #cp-panel .cp-static{ display:inline-block; border-radius:100px; padding:8px 16px; font-size:.7rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--a-muted-lt); background:color-mix(in srgb, var(--a-ink) 10%, transparent); } #cp-panel .cp-hr{ height:1px; background:color-mix(in srgb, var(--a-ink) 12%, transparent); margin:18px 0 2px; } /* One measured cookie per row: name and lifetime on the top line, what it is for underneath. Added 2026-08-16 because the panel declared two categories and listed nothing in either, which reads as a site that sets no cookies. The panel can now outrun a short viewport, so it scrolls inside itself rather than growing past the screen edge. */ #cp-panel{ max-height:min(86vh, 720px); overflow-y:auto; overscroll-behavior:contain; } #cp-panel .cp-ck{ display:grid; grid-template-columns:1fr auto; gap:1px 12px; padding:9px 0; border-top:1px solid color-mix(in srgb, var(--a-ink) 10%, transparent); } #cp-panel .cp-ck:first-of-type{ border-top:0; padding-top:2px; } #cp-panel .cp-ck code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.74rem; color:var(--a-ink); overflow-wrap:anywhere; } #cp-panel .cp-ck em{ font-style:normal; font-size:.66rem; letter-spacing:.04em; white-space:nowrap; color:var(--a-muted); align-self:center; } #cp-panel .cp-ck span{ grid-column:1 / -1; font-size:.76rem; line-height:1.5; color:var(--a-muted-lt); } #cp-panel .cp-sec .cp-static{ margin-top:12px; } /* The pair shows the RECORDED choice: both keep their fill (Connor 2026-08-15, no outline buttons anywhere in the consent UI) — the un-chosen one just sits dimmed. Guarded by :has because before ANY choice exists both buttons are aria-pressed="false", and dimming the whole pair reads as a disabled panel. */ #cp-panel .cp-row:has(button[aria-pressed="true"]) button[aria-pressed="false"]{ opacity:.45; } #cp-panel .cp-row:has(button[aria-pressed="true"]) button[aria-pressed="false"]:hover{ opacity:1; } #cp-consent .cp-head, #cp-panel .cp-head{ display:flex; align-items:center; gap:10px; margin:0 0 10px; } #cp-consent .cp-head svg, #cp-panel .cp-head svg{ width:24px; height:24px; color:var(--a-accent); flex:none; } #cp-consent .cp-title, #cp-panel .cp-title{ font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:1.35rem; line-height:1.1; color:var(--a-ink); } #cp-consent .cp-text, #cp-panel .cp-text{ margin:0 0 16px; color:var(--a-muted-lt); font-size:.85rem; line-height:1.55; } #cp-consent .cp-row, #cp-panel .cp-row{ display:flex; gap:10px; } #cp-consent .cp-row button, #cp-panel .cp-row button{ flex:1 1 0; min-width:0; cursor:pointer; border:0; border-radius:100px; padding:11px 8px; font-family:inherit; font-size:.72rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; line-height:1.2; white-space:normal; overflow-wrap:anywhere; transition:background-color .2s ease; } #cp-consent .cp-accept, #cp-panel .cp-accept{ background:var(--a-cta); color:var(--a-cta-ink); } #cp-consent .cp-accept:hover, #cp-panel .cp-accept:hover{ background:var(--a-cta-lt); } #cp-consent .cp-refuse, #cp-panel .cp-refuse{ background:var(--a-ink); color:var(--a-ground); } #cp-consent .cp-refuse:hover, #cp-panel .cp-refuse:hover{ background:#fff; } /* ── Journal article pages (2026-08-14 v2 — full site width, DeMarco format: prose left, sticky rail right with the lettre and booking cards, meta split tag-left / date-right, three next-reads). The page main carries .a-home so ah-btn / ah-bpost components apply. ── */ .ah-article{ max-width:1152px; margin:0 auto; padding:clamp(40px,6vw,72px) 20px clamp(48px,6vw,80px); } .ah-article .meta-row{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; flex-wrap:wrap; font-family:system-ui,sans-serif; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:18px; } .ah-article .meta-row .mtag{ color:var(--a-accent); } .ah-article .meta-row .mby{ color:var(--a-muted); letter-spacing:.1em; } .ah-article h1{ font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:clamp(2rem,4.6vw,3.1rem); line-height:1.12; margin:0 0 clamp(22px,3vw,32px); } .ah-article .hero{ border-radius:20px; overflow:hidden; aspect-ratio:21/9; margin:0 0 clamp(32px,4.5vw,52px); } .ah-article .hero img{ width:100%; height:100%; object-fit:cover; display:block; } .ah-article .body-grid{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:clamp(36px,5vw,80px); align-items:start; } .ah-article .prose{ font-size:1.04rem; line-height:1.9; color:var(--a-muted-lt); max-width:70ch; } .ah-article .prose p{ margin:0 0 1.4rem; } .ah-article .prose h2{ font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:clamp(1.35rem,2.4vw,1.7rem); line-height:1.25; color:var(--a-ink); margin:2.6rem 0 1rem; } .ah-article .prose h2:first-child{ margin-top:0; } .ah-article .rail{ position:sticky; top:110px; display:flex; flex-direction:column; gap:16px; } .ah-article .rail-card{ background:var(--a-panel); border:1px solid var(--a-rule); border-radius:16px; padding:20px; } .ah-article .rail-card h3{ font-family:'Fraunces',Georgia,serif; font-weight:500; font-size:1.08rem; line-height:1.3; margin:0 0 8px; } .ah-article .rail-card p{ color:var(--a-muted-lt); font-size:.85rem; line-height:1.6; margin:0 0 14px; } .ah-article .rail-card .ah-btn{ width:100%; display:flex; justify-content:center; text-align:center; } .ah-article .next{ margin-top:clamp(40px,6vw,60px); border-top:1px solid var(--a-rule); padding-top:clamp(28px,4vw,40px); } .ah-article .next .nh{ font-family:system-ui,sans-serif; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--a-muted); margin-bottom:18px; } .ah-article .next-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; } @media (max-width:900px){ .ah-article .body-grid{ grid-template-columns:1fr; } .ah-article .rail{ position:static; } .ah-article .next-grid{ grid-template-columns:1fr; } } /* Long-word overflow guard (Fabien, launch day: "l'accompagnement doesnt fully appear on phone"). Hyphenation was tried and rejected (Connor: not okay). The cure is the heading FITTER in motion.js: any heading whose content cannot fit its box shrinks its own font size until it does. No CSS rule needed here beyond this note. */ /* Rail newsletter form (Connor 2026-08-14: a real e-mail form like the footer's, not a button). 300px column, so the field stacks over a full-width submit. */ .ah-article .rail-card form input[type=email]{ display:block; width:100%; box-sizing:border-box; font-family:'Fraunces',serif; font-size:.92rem; color:var(--a-ink); background:color-mix(in srgb, var(--a-tint) 72%, #000); border:1px solid color-mix(in srgb, #fff 12%, transparent); border-radius:100px; padding:11px 16px; margin-bottom:8px; } .ah-article .rail-card form input[type=email]:focus{ outline:none; border-color:var(--a-accent); } .ah-article .rail-card form .ah-btn{ width:100%; display:flex; justify-content:center; } .ah-article .rail-card .sent-ok{ color:var(--a-accent); font-size:.85rem; } /* ── Mobile batch (Connor 2026-08-14 evening review) ── */ @media (max-width:767px){ /* nav bar was too tall on a phone */ .a-head-bar .max-w-6xl{ height:62px; } /* the bookbar already carries the booking action at every scroll position, so the hero CTA duplicated it on screen the moment the page opened */ body:has(.ah-bookbar) .ah-shero .ah-btn{ display:none; } } /* candidature anchors landed showing the previous section's tail: the global 6rem scroll-margin overshoots the 80px header on these long-section anchors */ #candidature, #mentorat, #residence{ scroll-margin-top:84px; } /* the confidential line sits under the submit, centred (Connor 2026-08-14) */ /* the form is a 30px-gap flex column, so the line needs a negative margin to sit tight under the submit (Connor 2026-08-14: "tight to the button") — net ~12px */ .a-home .ah-quiz .ah-privacy{ text-align:center; margin-top:-18px; margin-bottom:0; }