/* ====================================================== Cabinet Dr Simon Decque — Redesign Palette : #2a2118 #b09a7e #faf8f5 Type : Cormorant Garamond · DM Sans · JetBrains Mono ====================================================== */ :root{ /* Declare the site as intentionally light-themed. This disables Chrome's Auto Dark Theme and signals to extensions (Dark Reader, Night Eye) that they should NOT auto-invert. Without this, Chrome Auto-Dark maps our warm cream palette (40° ambre) to magenta (320°) — exactly the "pink" the user saw in their logged-in session. */ color-scheme:light; --ink:#2a2118; --ink-2:#3a2e22; --ink-soft:#3f3325; --muted:#5f533f; --gold:#b09a7e; --gold-dk:#96815f; --gold-lt:#c9b89d; --cream:#faf8f5; --cream-2:#f3efe7; --cream-3:#ece5d8; --line:rgba(42,33,24,.14); --line-2:rgba(42,33,24,.26); --line-dk:rgba(243,236,222,.14); --line-dk-2:rgba(243,236,222,.26); --serif:"Cormorant Garamond",Georgia,serif; --sans:"DM Sans",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif; --mono:"JetBrains Mono",ui-monospace,Menlo,monospace; --nav:84px; --banner:38px; --rail:64px; --ease:cubic-bezier(.22,.61,.36,1); } *{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility} html{scroll-behavior:smooth;scroll-padding-top:calc(var(--banner) + var(--nav) + 28px)} body.admin-bar{scroll-padding-top:calc(var(--adminbar) + var(--banner) + var(--nav) + 28px)} /* Per-element anchor offset — applies regardless of how the scroll is triggered (browser-native anchor load, JS scrollIntoView, hashchange). scroll-padding-top on is not reliable on initial load after loader removal. */ [id]{scroll-margin-top:calc(var(--banner) + var(--nav) + 28px)} body.admin-bar [id]{scroll-margin-top:calc(var(--adminbar) + var(--banner) + var(--nav) + 28px)} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button,[type=button],[type=submit],[type=reset]{font:inherit;color:inherit;background:transparent;border:0;padding:0;cursor:pointer} button:hover,button:focus,button:active,[type=button]:hover,[type=button]:focus,[type=button]:active,[type=submit]:hover,[type=submit]:focus,[type=submit]:active,[type=reset]:hover,[type=reset]:focus,[type=reset]:active{background:transparent;color:inherit} /* selection */ ::selection{background:var(--gold);color:var(--cream)} /* ---------- Type ---------- */ h1,h2,h3,h4,h5{font-family:var(--serif);font-weight:400;color:var(--ink);margin:0;letter-spacing:-0.012em;text-wrap:balance} .serif{font-family:var(--serif)} .mono{font-family:var(--mono)} .italic{font-style:italic} .eyebrow{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-dk);display:inline-flex;align-items:center;gap:14px} .eyebrow--gold{color:var(--gold)} .eyebrow--gold::before,.eyebrow::before{content:"";width:34px;height:1px;background:currentColor;opacity:.9} .eyebrow.no-line::before{display:none} .lede{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(20px,2.1vw,28px);line-height:1.4;color:var(--ink-soft);text-wrap:pretty} .lede--xl{font-size:20px;line-height:1.45} @media (min-width:880px){.lede--xl{font-size:24px}} /* V9.2 (2026-05-20) — Lisibilité .lede en contexte éditorial (Marie/Simon). Les .lede 16-17.5px italique weight 300 étaient illisibles sur écrans basse densité. Cible UNIQUEMENT les .lede intra-colonne/care-row/rdv — les .lede des heroes (.ph-left .lede, clamp 20-28px) restent intactes pour préserver la signature éditoriale. */ .col .lede, .care-row .text .lede, .rdv-block-body .lede{font-size:17px;font-weight:400;line-height:1.7} .hero-signature{font-family:var(--serif);font-style:italic;font-weight:300;font-size:22px;line-height:1.3;color:var(--gold);margin:18px 0 28px;max-width:28ch;text-wrap:pretty} @media (min-width:880px){.hero-signature{font-size:28px;margin:24px 0 36px}} .display{font-family:var(--serif);font-weight:400;font-size:clamp(46px,6.8vw,104px);line-height:.98;letter-spacing:-.018em} .display em{font-style:italic;color:var(--gold)} p{text-wrap:pretty} /* ---------- Layout ---------- */ .container{max-width:1320px;margin:0 auto;padding:0 48px} .section{padding:140px 0;position:relative} .section--tight{padding:88px 0} .section--dark{background:var(--ink);color:#e5dcc8} .section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:#f4ecd8} .section--dark .eyebrow{color:var(--gold-lt)} .section--gold{background:var(--gold);color:var(--ink)} .section--gold h2,.section--gold h1{color:var(--ink)} .section--gold .eyebrow{color:var(--ink)} .rule{height:1px;background:var(--line);border:0;margin:0} /* section number accent */ .section-num{position:absolute;top:48px;left:48px;font-family:var(--mono);font-size:11px;letter-spacing:.28em;color:var(--gold-dk);text-transform:uppercase} .section--dark .section-num{color:var(--gold)} /* ---------- Opening banner ---------- */ .banner{height:var(--banner);background:var(--ink);color:#e8dec9;font-family:var(--sans);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:18px;position:fixed;top:0;left:0;right:0;z-index:70} .banner .dot{width:5px;height:5px;border-radius:50%;background:var(--gold)} .banner span.label{opacity:.92} /* ---------- Nav ---------- */ .nav{position:fixed;top:var(--banner);left:0;right:0;height:var(--nav);background:rgba(250,248,245,.74);backdrop-filter:saturate(140%) blur(6px);-webkit-backdrop-filter:saturate(140%) blur(6px);border-bottom:1px solid transparent;z-index:60;transition:background .3s ease, border-color .3s ease, backdrop-filter .3s ease, -webkit-backdrop-filter .3s ease} .nav.scrolled{background:rgba(250,248,245,.88);backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);border-bottom-color:var(--line)} .nav-in{max-width:1440px;height:100%;margin:0 auto;padding:0 32px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:28px} .nav-l,.nav-r{display:flex;gap:26px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-weight:500;white-space:nowrap} .nav-l{justify-content:flex-end} .nav-r{justify-content:flex-start;align-items:center} .nav a.navlink{position:relative;padding:8px 0;transition:color .25s var(--ease)} .nav a.navlink:hover{color:var(--ink)} .nav a.navlink::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)} .nav a.navlink:hover::after,.nav a.navlink.active::after{transform:scaleX(1)} .nav a.navlink.active{color:var(--ink)} .brand{display:flex;align-items:center;gap:14px;line-height:1;transition:transform .35s var(--ease)} .brand:hover{transform:translateY(-1px)} .brand-logo{height:48px;width:auto;display:block;flex-shrink:0;user-select:none;-webkit-user-drag:none} .brand-txt{display:flex;flex-direction:column;align-items:flex-start;gap:6px;line-height:1} .brand-mark{font-family:var(--serif);font-weight:500;font-size:22px;letter-spacing:.01em;color:var(--ink);line-height:1} .brand-mark em{font-style:italic;color:var(--gold);font-weight:400} .brand-sub{font-family:var(--sans);font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--muted);font-weight:500;line-height:1} .nav-cta{margin-left:6px;white-space:nowrap} /* --- Submenu dropdown --- */ .navlink-wrap{position:relative;display:inline-flex;align-items:center} .navlink-wrap .navlink{display:inline-flex;align-items:center;gap:5px} .navlink-wrap .caret{font-size:9px;line-height:1;color:var(--gold);transition:transform .2s var(--ease)} .navlink-wrap:hover .caret{transform:translateY(2px)} .submenu{position:absolute;top:100%;left:-12px;min-width:240px;background:#faf8f5;border:.5px solid #e0d8ce;box-shadow:0 12px 40px -8px rgba(42,33,24,.12);padding:8px 0;margin-top:12px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s ease, transform .2s ease, visibility .2s ease;z-index:70} .navlink-wrap:hover .submenu,.navlink-wrap:focus-within .submenu{opacity:1;visibility:visible;transform:translateY(0)} .submenu::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px} .submenu a{display:block;padding:11px 22px;font-family:var(--sans);font-size:12.5px;letter-spacing:.04em;text-transform:none;color:var(--ink);font-weight:400;white-space:nowrap;transition:background .18s ease, color .18s ease} .submenu a:hover{background:#efe8db;color:var(--ink)} .submenu a + a{border-top:.5px solid #ece4d4} /* --- Burger (mobile only) --- Clean 2-bar minimalist toggle that morphs into an ✕ when open. Uses 2 children for guaranteed render. Position:fixed so its stacking context is above .mobile-menu (z:61). */ .nav-burger{display:none;width:44px;height:44px;align-items:center;justify-content:center; background:transparent;border:0;padding:0;cursor:pointer;position:relative; outline:none;-webkit-tap-highlight-color:transparent} @media (max-width:1080px){ .nav-burger{display:flex;position:fixed;top:calc(var(--banner) + (var(--nav) - 44px)/2);right:14px;z-index:64} } .nav-burger .bar{position:absolute;left:50%;top:50%;margin-left:-11px; width:22px;height:2px;background:var(--ink);border-radius:2px; transform-origin:center;transition:transform .35s var(--ease),background-color .25s var(--ease)} .nav-burger .bar-1{transform:translateY(-5px)} .nav-burger .bar-2{transform:translateY(5px)} .nav-burger:hover,.nav-burger:focus,.nav-burger:active{background:transparent;outline:none} .nav-burger:hover .bar{background:var(--gold-dk)} /* open state — morph into ✕ in cream */ .nav-burger.is-open .bar{background:var(--cream)} .nav-burger.is-open .bar-1{transform:translateY(0) rotate(45deg)} .nav-burger.is-open .bar-2{transform:translateY(0) rotate(-45deg)} /* mobile menu */ /* --- Mobile menu — full-screen dark overlay with staggered serif list --- */ .mobile-menu{position:fixed;inset:0;background:var(--ink);color:var(--cream); z-index:61;opacity:0;pointer-events:none;visibility:hidden; transition:opacity .45s var(--ease),visibility .45s ease; display:flex;flex-direction:column} .mobile-menu.open{opacity:1;pointer-events:auto;visibility:visible} /* subtle radial vignette to add depth */ .mobile-menu::before{content:"";position:absolute;inset:0; background:radial-gradient(ellipse at top, rgba(176,154,126,.10) 0%, transparent 60%); pointer-events:none} .mobile-menu .mm-in{position:relative;flex:1;padding:calc(var(--banner) + var(--nav) + 12px) 36px 40px; display:flex;flex-direction:column;gap:2px;overflow-y:auto} .mobile-menu a{font-family:var(--serif);font-weight:400;font-size:clamp(30px,7.5vw,40px); line-height:1.15;letter-spacing:-.01em;padding:18px 0; border-bottom:1px solid rgba(243,236,222,.10); color:var(--cream);text-decoration:none; display:flex;align-items:baseline;justify-content:space-between;gap:18px; opacity:0;transform:translateY(18px);transition:color .2s var(--ease)} .mobile-menu a::after{content:"→";font-family:var(--sans);font-size:.45em;opacity:.35; transform:translateX(-4px);transition:opacity .25s var(--ease),transform .35s var(--ease)} .mobile-menu a:hover,.mobile-menu a:active{color:var(--gold-lt)} .mobile-menu a:hover::after,.mobile-menu a:active::after{opacity:1;transform:translateX(0)} /* staggered reveal when .open */ .mobile-menu.open a{opacity:1;transform:translateY(0); transition:opacity .5s var(--ease),transform .5s var(--ease),color .2s var(--ease)} .mobile-menu.open a:nth-child(1){transition-delay:.10s} .mobile-menu.open a:nth-child(2){transition-delay:.16s} .mobile-menu.open a:nth-child(3){transition-delay:.22s} .mobile-menu.open a:nth-child(4){transition-delay:.28s} .mobile-menu.open a:nth-child(5){transition-delay:.34s} .mobile-menu.open a:nth-child(6){transition-delay:.40s} /* footer block — contact info stuck to bottom of menu */ .mobile-menu .mm-foot{margin-top:auto;padding-top:32px;display:flex;flex-direction:column;gap:10px; border-top:1px solid rgba(243,236,222,.12); font-family:var(--sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase; color:var(--gold-lt);opacity:0;transform:translateY(12px); transition:opacity .5s var(--ease) .55s,transform .5s var(--ease) .55s} .mobile-menu.open .mm-foot{opacity:1;transform:translateY(0)} .mobile-menu .mm-foot a{font:inherit;padding:0;border:0;color:var(--cream);letter-spacing:.18em; opacity:1;transform:none;transition:none} .mobile-menu .mm-foot a::after{content:none} /* prevent body scroll when menu open */ body.menu-open{overflow:hidden} /* V4: nested submenu under "Nos soins" in mobile menu (Marie request) */ .mobile-menu .mm-group{display:flex;flex-direction:column} .mobile-menu .mm-sub{display:flex;flex-direction:column;padding:4px 0 8px 22px; border-left:1px solid rgba(243,236,222,.20);margin:0 0 8px 4px} .mobile-menu .mm-sub a{font-family:var(--serif);font-style:italic;font-weight:400; font-size:clamp(18px,4.4vw,22px);line-height:1.25;padding:11px 0; border-bottom:1px solid rgba(243,236,222,.06);color:var(--gold-lt);letter-spacing:0} .mobile-menu .mm-sub a:last-child{border-bottom:0} .mobile-menu .mm-sub a::after{font-size:.6em;opacity:.45} .mobile-menu .mm-sub a:hover,.mobile-menu .mm-sub a:active{color:var(--gold)} /* ---------- Buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:12px;padding:16px 28px;font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;border:1px solid transparent;cursor:pointer;transition:all .3s var(--ease);white-space:nowrap;position:relative;overflow:hidden} .btn .arrow{transition:transform .35s var(--ease);font-family:var(--serif);font-style:italic} .btn:hover .arrow{transform:translateX(5px)} /* Utility button color overrides — !important to beat Elementor kit global link color (#2a2118) which has equal specificity and loads after us. */ .btn--solid{background:var(--ink);color:#f4ecd8!important} .btn--solid:hover{background:var(--ink-2);color:#fff!important} .btn--gold{background:var(--gold);color:var(--ink)!important} .btn--gold:hover{background:var(--gold-dk);color:var(--cream)!important} .btn--ghost{background:transparent;color:var(--ink)!important;border-color:var(--line-2)} .btn--ghost:hover{border-color:var(--ink);background:var(--ink);color:var(--cream)!important} .btn--ghost-dk{background:transparent;color:#f4ecd8!important;border-color:var(--line-dk-2)} .btn--ghost-dk:hover{border-color:#f4ecd8;background:#f4ecd8;color:var(--ink)!important} .btn--sm{padding:12px 20px;font-size:11px} /* text link */ .tlink{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);padding-bottom:4px;border-bottom:1px solid var(--gold);transition:all .3s var(--ease)} .tlink:hover{color:var(--gold-dk);gap:14px} .tlink.gold{color:var(--gold)} .section--dark .tlink{color:#f4ecd8;border-color:var(--gold)} /* ---------- Floating RDV rail (right edge) ---------- */ .rail{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:58;display:flex;flex-direction:column;align-items:center;gap:12px} .rail-btn{display:flex;align-items:center;justify-content:center;width:52px;height:52px;background:var(--ink);color:var(--cream);border-radius:50%;transition:all .3s var(--ease);position:relative;box-shadow:0 10px 24px -10px rgba(42,33,24,.4);flex-shrink:0} .rail-btn:hover{background:var(--gold);color:var(--ink);transform:translateX(-3px)} /* SVG stroke explicitly set (not currentColor) because Elementor global link color can override .rail-btn's `color` and make icons invisible (ink-on-ink) */ .rail-btn svg{width:20px;height:20px;stroke:var(--cream);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round} .rail-btn:hover svg{stroke:var(--ink)} .rail-btn--gold svg{stroke:var(--ink)} .rail-btn--gold:hover svg{stroke:var(--cream)} .rail-btn .label{position:absolute;right:calc(100% + 14px);top:50%;transform:translate(8px,-50%);background:var(--ink);color:var(--cream);padding:10px 16px;font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s var(--ease), transform .25s var(--ease)} .rail-btn .label::after{content:"";position:absolute;left:100%;top:50%;transform:translateY(-50%);border:6px solid transparent;border-left-color:var(--ink)} .rail-btn:hover .label{opacity:1;transform:translate(0,-50%)} .rail-btn--gold{background:var(--gold);color:var(--ink);box-shadow:0 10px 24px -10px rgba(176,154,126,.55)} .rail-btn--gold:hover{background:var(--ink);color:var(--cream)} .rail-sep{width:18px;height:1px;background:var(--gold);opacity:.5;margin:2px 0} /* ---------- Pages / routing (WP: each page is a real post, no SPA) ---------- */ /* .page / .page.active rules removed — WP adds 'page' to , they'd hide everything */ @keyframes pageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}} /* top spacer so content clears banner+nav on interior pages */ .page-top{padding-top:calc(var(--banner) + var(--nav))} /* Sticky footer: body fills at least the viewport, content between chrome and footer pushes footer to the bottom even on empty pages (prevents the footer from telescoping under the fixed nav on not-yet-built pages). */ body{min-height:100vh;display:flex;flex-direction:column} /* V11 : .decque-content = wrapper neutre des templates PHP (migration hors Elementor). Les deux sélecteurs coexistent pendant la bascule page par page (R9). */ body > .elementor, body > .decque-content{flex:1 0 auto} body > footer.footer{flex:0 0 auto;margin-top:auto} /* ---------- HERO (home) ---------- */ /* `isolation:isolate` creates an independent stacking context for the hero so the canvas's `mix-blend-mode:screen` cannot be broken by ancestor stacking contexts like WP's #wpadminbar (z:99999) that appear in logged-in sessions. Without this the Three.js plane renders as an opaque dark trapezoid covering the photo. */ .hero{position:relative;height:100vh;min-height:640px;overflow:hidden;background:var(--ink);color:#f4ecd8;isolation:isolate} /* --- WP admin bar compensation --- When logged-in, WP adds body.admin-bar + injects #wpadminbar position:fixed top:0. Our chrome (banner/nav/loader/mobile-menu/burger) is also position:fixed top:0 so it sits BEHIND the admin bar (z:99999). That's why users see "a piece of the logo hanging" — the nav brand logo is half-clipped by the admin bar. Fix: offset all fixed-top chrome by the admin bar height. */ :root{--adminbar:0px} body.admin-bar{--adminbar:32px} @media (max-width:782px){body.admin-bar{--adminbar:46px}} body.admin-bar .banner{top:var(--adminbar)} body.admin-bar .nav{top:calc(var(--adminbar) + var(--banner))} body.admin-bar .loader{top:var(--adminbar)} body.admin-bar .mobile-menu{top:var(--adminbar)} body.admin-bar .nav-burger{top:calc(var(--adminbar) + var(--banner) + (var(--nav) - 44px)/2)} body.admin-bar .hero{height:calc(100vh - var(--adminbar))} .hero-slides{position:absolute;inset:0} .hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s var(--ease), transform 8s ease-out} .hero-slide.active{opacity:1;transform:scale(1.05)} .hero-slide .img{position:absolute;inset:0;background-size:cover;background-position:center} .hero-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg, rgba(42,33,24,.90) 0%, rgba(42,33,24,.78) 45%, rgba(42,33,24,.65) 100%)} .hero-slide .vign{position:absolute;inset:0;background:radial-gradient(ellipse at 70% 40%, transparent 0%, rgba(42,33,24,.55) 100%);z-index:2} .hero-canvas{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:.9} .hero-inner{position:absolute;inset:calc(var(--banner) + var(--nav)) 0 0 0;padding:0 48px 110px;z-index:3;display:flex;flex-direction:column;justify-content:flex-end} .hero-content{max-width:1320px;margin:0 auto;width:100%} .hero-eyebrow{font-family:var(--sans);font-size:11.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:22px;display:flex;align-items:center;gap:16px;font-weight:500} .hero-eyebrow .line{width:56px;height:1px;background:var(--gold)} .hero h1{font-family:var(--serif);font-weight:400;color:#f4ecd8;font-size:clamp(44px,5.6vw,86px);line-height:1;letter-spacing:-.018em;max-width:16ch} .hero h1 em{font-style:italic;color:var(--gold);font-weight:400} .hero-sub{margin-top:22px;max-width:52ch;font-size:16px;line-height:1.58;color:rgba(244,236,216,.82);font-weight:300} .hero-actions{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap} /* V7 Bug 2: uniformité primary (gold) + ghost — même hauteur, padding, min-width, alignement */ .hero-actions .btn{min-height:56px;padding:16px 32px;min-width:220px;font-size:12px;letter-spacing:.18em;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box} @media (max-width:520px){.hero-actions{gap:10px}.hero-actions .btn{width:100%;min-width:0}} /* V7 Bug 1: sélecteur match DOM réel (.hero-actions, pas .hero) + !important pour battre .btn--ghost{color:var(--ink)!important} ligne 212 */ .hero-actions .btn--ghost,.hero-content .btn--ghost{background:transparent;color:#f4ecd8 !important;border-color:rgba(244,236,216,.85) !important;border-width:1.5px} .hero-actions .btn--ghost:hover,.hero-content .btn--ghost:hover{border-color:#f4ecd8 !important;background:rgba(244,236,216,.18);color:#f4ecd8 !important} /* hero decorative frame */ .hero-frame{position:absolute;inset:calc(var(--banner) + var(--nav) + 20px) 20px 20px 20px;border:1px solid rgba(244,236,216,.14);z-index:2;pointer-events:none} /* hero meta (bottom corners) */ .hero-meta{position:absolute;left:48px;bottom:44px;z-index:4;display:flex;align-items:center;gap:14px;color:var(--gold);font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase} .hero-meta .mdot{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:pulse 2.4s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(176,154,126,.55)}70%{box-shadow:0 0 0 10px rgba(176,154,126,0)}100%{box-shadow:0 0 0 0 rgba(176,154,126,0)}} /* slider UI */ .slider-ui{position:absolute;right:48px;bottom:44px;z-index:4;display:flex;align-items:center;gap:26px;color:#f4ecd8;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em} .slider-dots{display:flex;gap:10px} .slider-dot{width:32px;height:1.5px;background:rgba(244,236,216,.24);cursor:pointer;transition:background .25s var(--ease), width .35s var(--ease)} .slider-dot.active{background:var(--gold);width:52px} .slider-counter{display:flex;gap:6px;color:rgba(244,236,216,.7)} .slider-counter .cur{color:var(--gold)} .slider-arrows{display:flex;gap:8px;margin-left:4px} .slider-arrow{width:42px;height:42px;border-radius:50%;border:1px solid rgba(244,236,216,.3);background:transparent;color:#f4ecd8;display:grid;place-items:center;cursor:pointer;transition:all .3s var(--ease)} .slider-arrow:hover{border-color:#f4ecd8;background:rgba(244,236,216,.08)} .slider-arrow svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.4} /* ---------- Interior page hero (split 50/50) ---------- */ .ph-split{display:grid;grid-template-columns:1fr 1fr;min-height:72vh} .ph-left{background:var(--gold);color:var(--ink);padding:110px 64px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden} .ph-left::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:rgba(42,33,24,.2)} .ph-left .mini-num{font-family:var(--mono);font-size:12px;letter-spacing:.28em;color:var(--ink);opacity:.7;margin-bottom:22px;text-transform:uppercase} .ph-left h1{font-family:var(--serif);font-weight:400;font-size:clamp(52px,6vw,92px);line-height:.96;letter-spacing:-.02em;color:var(--ink);max-width:12ch} .ph-left h1 em{font-style:italic} .ph-left .lede{color:var(--ink-2);margin-top:28px;max-width:38ch;font-weight:300} .ph-left .orn{position:absolute;top:110px;left:64px;font-family:var(--serif);font-style:italic;font-size:220px;line-height:.8;color:rgba(42,33,24,.08);user-select:none;pointer-events:none} .ph-right{position:relative;overflow:hidden;background:var(--ink)} .ph-right .img{position:absolute;inset:0;background-size:cover;background-position:center;filter:grayscale(.05) contrast(1.04) brightness(.94)} .ph-right .tint{position:absolute;inset:0;background:linear-gradient(200deg, rgba(42,33,24,.12) 0%, rgba(42,33,24,.32) 100%)} .ph-right .stamp{position:absolute;right:48px;bottom:48px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:#f4ecd8;text-transform:uppercase;display:flex;align-items:center;gap:12px;background:rgba(42,33,24,.7);padding:10px 16px;backdrop-filter:blur(6px)} .ph-right .stamp::before{content:"";width:8px;height:8px;background:var(--gold);border-radius:50%} /* ---------- Image placeholder (composed with CSS/SVG) ---------- */ .ph{position:relative;background:var(--cream-2);overflow:hidden;display:flex;align-items:flex-end;justify-content:flex-start} .ph--dark{background:var(--ink)} .ph--gold{background:var(--gold)} .ph-pat{position:absolute;inset:0;background-image:repeating-linear-gradient(135deg,rgba(42,33,24,.045) 0 1px,transparent 1px 9px)} .ph--dark .ph-pat{background-image:repeating-linear-gradient(135deg,rgba(176,154,126,.08) 0 1px,transparent 1px 9px)} .ph--gold .ph-pat{background-image:repeating-linear-gradient(135deg,rgba(42,33,24,.08) 0 1px,transparent 1px 9px)} .ph-label{position:absolute;left:16px;bottom:14px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--muted);z-index:2} .ph--dark .ph-label{color:var(--gold-lt)} .ph--gold .ph-label{color:var(--ink)} .ph-label::before{content:"/ ";opacity:.5} .ph-init{position:absolute;font-family:var(--serif);font-weight:300;font-style:italic;color:rgba(42,33,24,.11);font-size:clamp(180px,30vw,360px);line-height:.8;bottom:-18%;right:-6%;user-select:none;pointer-events:none} .ph--dark .ph-init{color:rgba(176,154,126,.15)} .ph--gold .ph-init{color:rgba(42,33,24,.12)} .ph-photo{background-size:cover;background-position:center} .ph-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(42,33,24,.25) 100%)} /* decorative SVG backdrop */ .ph-svg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center} .ph-svg svg{width:72%;height:72%;opacity:.28} /* ---------- Two-column editorial ---------- */ .two-col{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:start} .two-col--thirds{grid-template-columns:5fr 7fr} .two-col--flip{grid-template-columns:7fr 5fr} .two-col .ph{aspect-ratio:4/5} .col h2{font-size:clamp(34px,4vw,56px);line-height:1.04;margin-bottom:26px;letter-spacing:-.015em;max-width:18ch} .col h2 em{font-style:italic;color:var(--gold-dk)} .section--dark .col h2 em{color:var(--gold)} .col p{margin:0 0 16px;color:var(--ink-soft);font-size:16px;line-height:1.72} .section--dark .col p{color:#d4c8b2} .section--dark .val p{color:#d4c8b2} .section--dark .val h3{color:#f4ecd8} .section--dark .val .n{color:var(--gold-lt)} .section--dark .soins-head p{color:#d4c8b2} .section:not(.section--dark) .soins-head p{color:var(--ink)} .col .lede{margin-bottom:20px} .col-actions{margin-top:28px;display:flex;gap:14px;flex-wrap:wrap} /* ---------- Gallery ---------- */ .gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-auto-rows:260px;gap:14px} .gallery .tile:nth-child(1){grid-row:span 2} .gallery .tile:nth-child(4){grid-column:span 2} .gallery .tile{position:relative;overflow:hidden} .gallery .tile img,.gallery .tile .img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)} .gallery .tile:hover img,.gallery .tile:hover .img{transform:scale(1.06)} /* ---------- Soins preview (dark, on home) ---------- */ .soins-head{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:72px} .soins-head h2{font-size:clamp(38px,4.6vw,68px);line-height:1.02} .soins-head h2 em{color:var(--gold)} .soins-head p{margin:0;color:#d4c8b2;max-width:44ch;justify-self:end;font-size:16px;line-height:1.7} .care-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-dk)} .care-grid a{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;column-gap:22px;row-gap:14px;align-items:start;padding:44px 32px;border-bottom:1px solid var(--line-dk);color:#e5dcc8;transition:all .3s var(--ease);position:relative} .care-grid a:not(:last-child){border-right:1px solid var(--line-dk)} .care-grid a:hover{background:rgba(244,236,216,.04);padding-left:42px} .care-grid .n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--gold);align-self:center} .care-grid .t{font-family:var(--serif);font-size:24px;line-height:1.18;letter-spacing:-.005em;align-self:center} .care-grid .t em{font-style:italic;color:var(--gold-lt)} .care-grid .a{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--gold);transition:transform .35s var(--ease);align-self:center} .care-grid a:hover .a{transform:translateX(6px)} .care-grid .card-desc{grid-column:1 / -1;font-family:var(--sans);font-size:14.5px;line-height:1.62;color:#bfb299;font-weight:300;max-width:46ch;margin-top:4px} .kw-strip{margin-top:24px;padding:14px 18px;border-left:2px solid var(--gold);background:rgba(176,154,126,.06);font-size:12.5px;line-height:1.7;color:var(--ink);font-family:var(--sans)} .kw-strip .kw-lead{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-dk);display:block;margin-bottom:4px} /* --- Informations page blocks --- */ .rdv-block{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:80px;align-items:start;max-width:1100px;margin:0 auto} .rdv-block-head h2{font-size:clamp(40px,4.6vw,68px);line-height:1.02;letter-spacing:-.016em;color:var(--ink)} .rdv-block-head h2 em{font-style:italic;color:var(--gold-dk)} .rdv-block-body .lede{font-size:17px;line-height:1.7;color:var(--ink);margin-bottom:28px;max-width:48ch;font-weight:400} .rdv-main-cta{background:#2a2118;color:#faf8f5!important;padding:20px 32px;font-size:12px;letter-spacing:.22em;border:0;display:inline-flex;align-items:center;gap:10px;transition:background .25s var(--ease), transform .25s var(--ease);text-transform:uppercase;font-weight:500} .rdv-main-cta:hover{background:#3a2e22;color:#faf8f5!important;transform:translateY(-2px)} .rdv-main-cta .arrow{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--gold-lt);transition:transform .25s var(--ease)} .rdv-main-cta:hover .arrow{transform:translateX(4px)} .urgence-box{margin-top:40px;padding:26px 28px;background:#fff;border-left:3px solid var(--gold);box-shadow:0 6px 28px -12px rgba(42,33,24,.14)} .urgence-box .u-label{font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-dk);margin-bottom:10px} .urgence-box p{font-size:14.5px;line-height:1.62;color:var(--ink);margin:0 0 12px;font-weight:300} .urgence-box .u-tel{display:inline-block;font-family:var(--serif);font-size:22px;color:var(--ink);letter-spacing:.02em;border-bottom:1px solid var(--gold);padding-bottom:2px;transition:color .25s var(--ease)} .urgence-box .u-tel:hover{color:var(--gold-dk)} .contact-tel{display:block;font-family:var(--serif);font-size:22px;color:var(--ink);line-height:1.3;margin-top:2px;transition:color .2s} .contact-tel:hover{color:var(--gold-dk)} .contact-mail{display:block;font-family:var(--sans);font-size:14.5px;color:var(--ink-soft);margin-top:8px;border-bottom:1px solid transparent;transition:border-color .2s, color .2s} .contact-mail:hover{border-bottom-color:var(--gold);color:var(--ink)} .map-note{position:absolute;left:18px;bottom:18px;z-index:3;font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:#faf8f5;background:rgba(42,33,24,.86);padding:8px 14px;border-left:2px solid var(--gold)} @media (max-width:880px){ .rdv-block{grid-template-columns:1fr;gap:36px} } /* --- Homepage quick hours strip --- */ .hours-strip{background:var(--ink);color:#e5dcc8;padding:20px 0} .hours-strip .container{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;font-family:var(--sans);font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:400} .hours-strip .hs-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);flex-shrink:0} .hours-strip .hs-txt{color:#f4ecd8} .hours-strip .hs-sep{color:var(--gold);opacity:.6} .hours-strip .hs-link{color:var(--gold-lt);border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .25s} .hours-strip .hs-link:hover{border-bottom-color:var(--gold)} @media (max-width:640px){ .hours-strip .container{flex-direction:column;gap:10px;font-size:11.5px} .hours-strip .hs-sep{display:none} } /* ---------- Pull quote ---------- */ .pq{max-width:960px;margin:0 auto;text-align:center;position:relative} .pq blockquote{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(28px,3.8vw,52px);line-height:1.22;color:var(--ink);margin:0;letter-spacing:-.01em} .pq blockquote em{font-style:italic;color:var(--gold-dk)} .pq::before,.pq::after{content:"";display:block;width:48px;height:1px;background:var(--gold);margin:36px auto} .pq-attr{margin-top:8px} /* ---------- Info grid ---------- */ .info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:56px} .info-block{position:relative} .info-block::before{content:"";position:absolute;top:0;left:0;width:40px;height:1px;background:var(--gold)} .info-block{padding-top:20px} .info-block .label{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-dk);margin-bottom:18px;font-weight:500} .info-block .value{font-family:var(--serif);font-size:24px;line-height:1.35;color:var(--ink);font-weight:400} .info-block .value em{font-style:italic;color:var(--gold-dk)} .info-block .value small{display:block;font-family:var(--sans);font-size:14px;color:var(--muted);margin-top:6px;font-style:normal} .hours-table{width:100%;border-collapse:collapse} .hours-table td{padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px} .hours-table td:last-child{text-align:right;color:var(--ink-soft);font-family:var(--mono);font-size:13px} .hours-table tr:last-child td{border-bottom:0} .hours-table td.day{color:var(--ink);font-weight:500} /* ---------- Values ---------- */ .values{display:grid;grid-template-columns:repeat(3,1fr);gap:56px} .val{border-top:1px solid var(--gold);padding-top:28px} .val .n{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--gold-dk);margin-bottom:18px} .val h3{font-size:28px;margin-bottom:14px;line-height:1.15} .val h3 em{font-style:italic;color:var(--gold-dk)} .val p{color:var(--ink-soft);margin:0;font-size:15.5px;line-height:1.7} /* ---------- Care list (detail pages) ---------- */ .care-list{display:flex;flex-direction:column;margin-top:40px} .care-row{display:grid;grid-template-columns:1fr 1fr;gap:80px;padding:72px 0;border-top:1px solid var(--line);align-items:center} .care-row:last-child{border-bottom:1px solid var(--line)} .care-row--flip{grid-template-columns:1fr 1fr} .care-row .media{aspect-ratio:5/6;position:relative;overflow:hidden} .care-row .text .num{font-family:var(--mono);font-size:12px;letter-spacing:.24em;color:var(--gold-dk);text-transform:uppercase;margin-bottom:20px} .care-row .text h2{font-size:clamp(32px,3.4vw,48px);line-height:1.05;margin-bottom:22px} .care-row .text h2 em{font-style:italic;color:var(--gold-dk)} .care-row .text p{color:var(--ink-soft);margin:0 0 14px;font-size:16px;line-height:1.72} .care-row .text ul{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:10px} .care-row .text li{font-size:15px;color:var(--ink-soft);padding-left:28px;position:relative} .care-row .text li::before{content:"";position:absolute;left:0;top:12px;width:16px;height:1px;background:var(--gold)} .care-row:nth-child(even) .text{order:2} .care-row:nth-child(even) .media{order:1} /* ---------- Final CTA ---------- */ .final-cta{padding:140px 0;background:var(--gold);color:var(--ink);position:relative;overflow:hidden} .final-cta::before{content:"";position:absolute;inset:20px;border:1px solid rgba(42,33,24,.14);pointer-events:none} .final-cta .container{text-align:center;position:relative;z-index:2} .final-cta h2{font-family:var(--serif);font-size:clamp(42px,5.2vw,78px);line-height:1.02;color:var(--ink);margin:20px 0 22px;max-width:22ch;margin-left:auto;margin-right:auto} .final-cta h2 em{font-style:italic} .final-cta p{max-width:54ch;margin:0 auto 40px;color:var(--ink-2);opacity:.86;font-size:17px} /* ---------- RDV page ---------- */ .rdv-wrap{padding:180px 0 140px;position:relative} .rdv-card{max-width:800px;margin:0 auto;text-align:center;padding:80px 56px;background:#fff;border:1px solid var(--line-2);position:relative} .rdv-card::before,.rdv-card::after{content:"";position:absolute;width:18px;height:18px;border:1px solid var(--gold)} .rdv-card::before{top:-9px;left:-9px;border-right:0;border-bottom:0} .rdv-card::after{bottom:-9px;right:-9px;border-left:0;border-top:0} .rdv-card h1{font-size:clamp(42px,5vw,64px);margin-bottom:20px;line-height:1.04} .rdv-card h1 em{font-style:italic;color:var(--gold-dk)} .rdv-card p{color:var(--ink-soft);margin:0 0 20px;font-size:16.5px;line-height:1.7;max-width:52ch;margin-left:auto;margin-right:auto} .rdv-card .stamp{display:inline-flex;align-items:center;gap:10px;margin-top:32px;padding:12px 20px;border:1px solid var(--gold);font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-dk)} .rdv-card .stamp .d{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:pulse 2.4s infinite} .rdv-actions{margin-top:44px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap} .rdv-countdown{display:flex;justify-content:center;gap:28px;margin-top:48px;padding-top:48px;border-top:1px solid var(--line)} .rdv-countdown .unit{text-align:center} .rdv-countdown .u-val{font-family:var(--serif);font-size:52px;font-weight:400;color:var(--ink);line-height:1;letter-spacing:-.02em} .rdv-countdown .u-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-top:8px} /* ---------- Map ---------- */ .map{position:relative;aspect-ratio:16/9;background:var(--cream-2);overflow:hidden;border:1px solid var(--line)} .map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.55) contrast(.98) sepia(.08)} .map-pin{position:absolute;top:50%;left:50%;transform:translate(-50%,-100%);z-index:2;pointer-events:none} .map-pin .dot{width:14px;height:14px;background:var(--gold);border-radius:50%;border:2px solid var(--cream);box-shadow:0 0 0 6px rgba(176,154,126,.3);animation:pulse 2.4s infinite} /* ---------- Transport list ---------- */ .transport{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:64px} .transport .t-item{border-top:1px solid var(--line);padding-top:26px} .transport .t-lbl{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-dk);margin-bottom:18px} .transport .t-item h3{font-size:22px;margin-bottom:12px;line-height:1.2} .transport .t-item p{color:var(--ink-soft);font-size:14.5px;margin:0;line-height:1.65} /* ---------- Team ---------- */ .team{display:grid;grid-template-columns:repeat(4,1fr);gap:40px} .team .ph{aspect-ratio:3/4} .team-name{margin-top:22px;font-family:var(--serif);font-size:26px;line-height:1.2} .team-name em{font-style:italic;color:var(--gold-dk)} .team-role{font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:6px} /* ---------- Legal ---------- */ .legal{max-width:820px;margin:0 auto} .legal h2{font-family:var(--serif);font-size:28px;margin:60px 0 20px;line-height:1.2;padding-bottom:18px;border-bottom:1px solid var(--line)} .legal h2:first-of-type{margin-top:0} .legal p{color:var(--ink-soft);margin:0 0 14px;font-size:15.5px;line-height:1.75} .legal .row{display:grid;grid-template-columns:180px 1fr;gap:24px;margin:10px 0;padding:12px 0;border-bottom:1px dashed var(--line)} .legal .row:last-of-type{border-bottom:0} .legal .row .label{font-family:var(--mono);font-size:12px;color:var(--gold-dk);letter-spacing:.14em;text-transform:uppercase;padding-top:2px} /* ---------- Footer ---------- */ .footer{background:var(--ink);color:#b9ae98;padding:96px 0 40px;position:relative;overflow:hidden} .footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)} .footer .brand-foot{font-family:var(--serif);font-weight:500;font-size:42px;line-height:1;color:#f4ecd8;letter-spacing:.01em} .footer .brand-foot em{font-style:italic;color:var(--gold)} .footer .brand-sub{font-family:var(--sans);font-size:10.5px;letter-spacing:.38em;text-transform:uppercase;color:var(--gold-lt);margin-top:10px;font-weight:500} .footer .foot-head{display:flex;align-items:center;gap:20px;margin-bottom:6px} .footer .foot-logo{height:64px;width:auto;display:block;flex-shrink:0;background:#f4ecd8;border-radius:6px;padding:4px 6px} .footer a{color:#d9cdb3} .footer a:hover{color:var(--gold)} .footer-grid{display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr;gap:56px;padding-bottom:60px;border-bottom:1px solid var(--line-dk)} .footer h4{font-family:var(--sans);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin:0 0 22px;font-weight:500} .footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;font-size:14.5px} .footer .tag{margin-top:22px;max-width:42ch;font-size:14px;line-height:1.65;color:#d4c8b2} .footer-bottom{display:flex;justify-content:space-between;padding-top:32px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:#b9ae98;text-transform:uppercase} .footer-bottom a:hover{color:var(--gold)} /* ---------- Page-enter animation (.reveal elements anywhere on page) ---------- */ @keyframes pageEnter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}} .reveal{animation:pageEnter .8s var(--ease) both} .reveal.d1{animation-delay:.08s} .reveal.d2{animation-delay:.16s} .reveal.d3{animation-delay:.24s} .reveal.d4{animation-delay:.32s} @media (prefers-reduced-motion: reduce){ .reveal,.reveal.d1,.reveal.d2,.reveal.d3,.reveal.d4{animation:none} } /* ---------- Decorative flourish ---------- */ .flourish{display:flex;align-items:center;justify-content:center;margin:40px auto;color:var(--gold)} .flourish::before,.flourish::after{content:"";width:48px;height:1px;background:currentColor} .flourish::before{margin-right:14px} .flourish::after{margin-left:14px} .flourish svg{width:16px;height:16px;fill:currentColor} /* ---------- Responsive ---------- */ @media (max-width:1080px){ .nav-l, .nav-r{display:none} .nav-burger{display:flex} .nav-in{grid-template-columns:1fr auto 1fr} .nav-in .brand{justify-self:center} .nav-in .nav-burger{justify-self:end} } /* --- Back to top — appears after scroll, mobile-first --- */ .back-to-top{position:fixed;right:14px;bottom:14px; width:46px;height:46px;border-radius:50%;background:var(--ink);color:var(--cream); border:0;display:none;align-items:center;justify-content:center;cursor:pointer; z-index:57;box-shadow:0 12px 28px -8px rgba(42,33,24,.45); opacity:0;transform:translateY(12px);transition:opacity .3s var(--ease),transform .3s var(--ease),background-color .25s var(--ease)} .back-to-top svg{width:18px;height:18px;stroke:var(--cream);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .back-to-top:hover{background:var(--gold)} .back-to-top:hover svg{stroke:var(--ink)} .back-to-top.visible{opacity:1;transform:translateY(0)} /* show only on mobile/tablet (the desktop rail FAB already acts as anchor) */ @media (min-width:1080px){.back-to-top{display:none !important}} /* --- Mobile nav polish (cramped banner + brand overflow fix) --- */ @media (max-width:880px){ /* Compact nav: logo-only brand, no sub-text that was crowding the burger */ .nav-burger{display:flex} .back-to-top{display:flex} .brand-txt{display:none} /* V3: hide nav brand-sub text under logo on mobile (Marie request) */ .nav .brand-sub{display:none} .brand{gap:0} .brand-logo{width:44px;height:44px} .nav-in{grid-template-columns:auto 1fr auto;padding:0 20px;gap:12px} .nav-in .brand{justify-self:start;grid-column:1} .nav-in .nav-burger{justify-self:end;grid-column:3} .nav-l,.nav-r{display:none} /* Banner: trim copy length with a hidden-via-ellipsis short variant */ .banner{font-size:10.5px;letter-spacing:.18em;padding:0 16px} .banner .dot{display:none} .banner .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:94vw} } @media (max-width:880px){ :root{--nav:72px} .container{padding:0 24px} .section{padding:80px 0} .section--tight{padding:56px 0} .two-col,.two-col--thirds,.two-col--flip{grid-template-columns:1fr;gap:48px} .info-grid,.values,.transport{grid-template-columns:1fr;gap:32px} /* V13 — L'équipe : carrousel tactile horizontal sur mobile. Les 4 cartes restent à taille lisible ; balayage natif au doigt (scroll natif, pas de JS) ; scroll-snap + léger dépassement de la carte suivante pour signaler qu'on peut faire défiler. Desktop (≥881px) inchangé : grille 4 colonnes. */ .team{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:74%; gap:20px; margin:0 -24px; padding:4px 24px 16px; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; scroll-padding-left:24px; scrollbar-width:none; -ms-overflow-style:none; } .team::-webkit-scrollbar{display:none} .team>*{scroll-snap-align:start} .gallery{grid-template-columns:1fr 1fr;grid-auto-rows:180px} .gallery .tile:nth-child(1){grid-row:auto} .gallery .tile:nth-child(4){grid-column:span 2} .soins-head{grid-template-columns:1fr;gap:28px} .soins-head p{justify-self:start;margin-top:8px} .care-grid{grid-template-columns:1fr} .care-grid a{border-right:0 !important} .care-row{grid-template-columns:1fr;gap:40px;padding:48px 0} .care-row:nth-child(even) .text{order:0} .care-row:nth-child(even) .media{order:0} .hero-inner{padding:0 24px 100px} .hero-meta{left:24px;bottom:24px} .slider-ui{right:24px;bottom:24px;gap:14px} .slider-arrows{display:none} .ph-split{grid-template-columns:1fr} .ph-left{padding:72px 32px} .ph-left .orn{left:32px;top:72px;font-size:140px} .ph-right{min-height:340px} .rail{right:10px} .rail-btn{width:44px;height:44px} .rail-btn svg{width:16px;height:16px} .rail-cta{display:none} .rail-btn .label{display:none} .footer-grid{grid-template-columns:1fr 1fr;gap:40px} .footer-bottom{flex-direction:column;gap:8px;text-align:center} /* V7 Bug 3: countdown nowrap mobile + override inline clamps */ .rdv-countdown,.home-countdown .rdv-countdown{gap:14px !important;flex-wrap:nowrap !important} .rdv-countdown .u-val,.home-countdown .rdv-countdown .u-val{font-size:38px !important} .rdv-countdown .u-lbl,.home-countdown .rdv-countdown .u-lbl{font-size:9px !important;letter-spacing:.18em !important} .rdv-card{padding:56px 28px} .section-num{top:24px;left:24px} .hero-frame{inset:calc(var(--banner) + var(--nav) + 12px) 12px 12px 12px} } @media (max-width:520px){ .footer-grid{grid-template-columns:1fr} .hero h1{font-size:44px} .rdv-actions{flex-direction:column;width:100%} .rdv-actions .btn{justify-content:center;width:100%} .container{padding:0 20px} /* RDV block — prevent CTA from forcing parent wider than viewport */ .rdv-block{gap:28px} .rdv-block-head h2{font-size:clamp(30px,8vw,40px)} .rdv-main-cta{padding:16px 20px;font-size:11px;letter-spacing:.14em;width:100%;justify-content:center;text-align:center} .rdv-main-cta .arrow{font-size:16px} .urgence-box{padding:20px 18px} .urgence-box .u-tel{font-size:18px} .rdv-countdown .unit,.home-countdown .rdv-countdown .unit{min-width:0 !important} .rdv-countdown,.home-countdown .rdv-countdown{gap:10px !important;flex-wrap:nowrap !important} .rdv-countdown .u-val,.home-countdown .rdv-countdown .u-val{font-size:30px !important} .rdv-countdown .u-lbl,.home-countdown .rdv-countdown .u-lbl{font-size:8px !important;letter-spacing:.16em !important} /* Informations access block */ .contact-tel{font-size:18px} .soins-head h2{font-size:clamp(30px,8vw,42px)} } /* Hard safety net — no page should ever horizontally scroll */ html,body{overflow-x:hidden} /* print-friendly */ @media print{ .nav,.banner,.rail,.footer,.final-cta{display:none} } /* ================================================ V2 MOTION ================================================ */ /* --- LOADER — 4 geometric primitives assemble into the Decque monogram --- */ .loader{position:fixed;inset:0;z-index:9999;background:#fcfaf6;display:flex;align-items:center;justify-content:center;transition:opacity .55s cubic-bezier(.22,.8,.22,1), visibility .55s ease} .loader.done{opacity:0;visibility:hidden;pointer-events:none} body.loading{overflow:hidden} /* subtle vignette */ .loader::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center, transparent 55%, rgba(42,33,24,.04) 100%);pointer-events:none} .loader-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:26px} /* The monogram — pure SVG, 4 primitives */ .loader-mono{width:min(180px,38vw);height:auto;display:block;overflow:visible} .loader-mono .mono-sh{transform-box:fill-box;transform-origin:center;will-change:transform,opacity;opacity:0} /* Wordmark */ .loader-word{text-align:center;line-height:1.25;position:relative} .loader-word .ldr-name{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:22px;letter-spacing:.015em;color:#2a2118;display:inline-flex;gap:.28em;align-items:baseline;justify-content:center;flex-wrap:wrap} .loader-word .ldr-name > *{display:inline-block;will-change:transform,opacity;opacity:0} .loader-word .ldr-name .ldr-em{font-weight:600;color:#b09a7e;letter-spacing:.08em;text-transform:uppercase;font-family:'DM Sans',sans-serif;font-size:17px} .loader-word .ldr-sub{font-family:'DM Sans',sans-serif;font-size:9.5px;letter-spacing:.38em;text-transform:uppercase;color:#2a2118;margin-top:10px;will-change:transform,opacity;opacity:0} /* Signature rule */ .loader-rule{height:1px;background:#b09a7e;width:0;will-change:width} /* --- Word reveal prep (hide until GSAP animates) --- */ .hero h1 .word{display:inline-block;overflow:hidden;vertical-align:top} .hero h1 .word-in{display:inline-block;will-change:transform,opacity} .hero h1.js-split{visibility:hidden} .hero h1.js-split.ready{visibility:visible} /* --- Horizontal scroll marquee (cinematic) --- */ .marquee{background:#2a2118;color:#f4ecd8;padding:140px 0;overflow:hidden;position:relative;border-top:1px solid rgba(176,154,126,.18);border-bottom:1px solid rgba(176,154,126,.18)} .marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:140px;z-index:3;pointer-events:none} .marquee::before{left:0;background:linear-gradient(90deg,#2a2118 0%, rgba(42,33,24,0) 100%)} .marquee::after{right:0;background:linear-gradient(-90deg,#2a2118 0%, rgba(42,33,24,0) 100%)} .marquee-eyebrow{position:absolute;top:36px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);z-index:4} .marquee-track{display:flex;flex-wrap:nowrap;width:max-content;will-change:transform} .marquee-word{font-family:var(--serif);font-weight:400;font-style:italic;font-size:clamp(80px,10vw,140px);line-height:1;letter-spacing:-.018em;padding:0 40px;white-space:nowrap;color:#f4ecd8} .marquee-word .sep{color:var(--gold);font-style:normal;margin:0 .3em;font-weight:300} .marquee-word em{color:var(--gold);font-style:italic} /* --- Parallax prep --- */ .hero-slide .img{transform-origin:center center;will-change:transform} /* --- Scroll reveal prep (GSAP drives actual state) --- */ .gsap-reveal{will-change:transform,opacity} body.gsap-ready .reveal{animation:none} /* --- Respect reduced motion --- */ @media (prefers-reduced-motion: reduce){ .loader{display:none} .hero h1.js-split{visibility:visible} .marquee-track{transform:none !important} .gsap-reveal{opacity:1 !important;transform:none !important} } /* ============================================================ * 2026-05 OVERRIDES — Marie's content review batch * ============================================================ */ /* Banner is now an linking to rdvdentiste.net */ .banner.banner--link{text-decoration:none;color:#e8dec9;cursor:pointer;transition:color .2s ease} .banner.banner--link:hover .label,.banner.banner--link:focus-visible .label{text-decoration:underline;color:#fff} .banner.banner--link:hover{color:#fff} /* Centered brand: logo only on top, subtitle below — matches Marie's spec "Logo dans la navbar : afficher uniquement le pictogramme S, conserver 'Chirurgiens-Dentistes · Wahagnies' en petit, centrer le logo dans la barre" */ .nav .brand.brand--centered{flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center} .nav .brand.brand--centered .brand-logo{height:46px;width:auto} .nav .brand.brand--centered .brand-sub{font-family:var(--sans);font-size:9px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);font-weight:500;line-height:1;white-space:nowrap} /* Footer logo — no cream background square (Marie's request) */ .footer .foot-logo,.footer .footer-logo{background:transparent !important;border-radius:0 !important;padding:0 !important;height:64px} /* V7 Bug 4: footer fond brun #2a2118 — invert logo couleurs sombres → clair pour visibilité (Option B fallback, à remplacer par variante claire si fournie) */ .footer .foot-logo,.footer .footer-logo{filter:brightness(0) invert(1) opacity(.82)} /* Submenu — slightly wider for the longer items (Aligneurs & Éclaircissement) */ .nav .submenu{min-width:280px} /* Mobile menu RDV link — gold pill */ .mobile-menu .mm-rdv{background:var(--gold) !important;color:var(--ink) !important;text-align:center;padding:14px 20px !important;border-radius:2px;font-weight:600;letter-spacing:.1em !important;text-transform:uppercase;margin:8px 0} /* Mobile loader fix — Marie's iPhone screenshot showed S oversized + "Dr" wrapped underneath. Shrink the SVG, hide the brand word block. */ @media (max-width: 768px){ .loader-mono{width:72px !important;max-width:72px !important;height:auto !important} .loader-stage .loader-word{display:none !important} .loader-rule{width:48px !important;max-width:48px} } /* Section: countdown on homepage (duplicates the Infos pratiques block) */ .home-countdown{padding:120px 0;background:var(--ink);color:var(--cream);text-align:center} .home-countdown .eyebrow{color:var(--gold);justify-content:center;margin-bottom:18px} .home-countdown h2{font-family:var(--serif);font-style:italic;font-size:clamp(32px,3.2vw,46px);color:var(--cream);margin:0 0 38px;line-height:1.15} .home-countdown .rdv-countdown{display:flex;gap:clamp(18px,4vw,56px);justify-content:center;flex-wrap:wrap} .home-countdown .rdv-countdown .unit{display:flex;flex-direction:column;align-items:center;min-width:84px} .home-countdown .rdv-countdown .u-val{font-family:var(--mono);font-size:clamp(48px,6vw,88px);font-weight:500;color:var(--gold);line-height:1;letter-spacing:.02em} .home-countdown .rdv-countdown .u-lbl{font-family:var(--mono);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:#d4c8b2;margin-top:10px} .home-countdown .cd-foot{margin-top:32px;font-family:var(--mono);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold)} /* Urgences hors horaires — bold ink-bg block on Infos pratiques */ .urgence-hh{background:var(--ink);color:var(--cream);padding:32px 36px;border:1px solid var(--gold);border-radius:2px;margin-top:32px} .urgence-hh .u-label{font-family:var(--mono);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:12px} .urgence-hh h3{font-family:var(--serif);font-size:clamp(22px,2.4vw,30px);color:var(--cream);margin:0 0 12px;line-height:1.2} .urgence-hh p{color:#e8dec9;line-height:1.6;margin:0} .urgence-hh .u-tel{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:18px;color:var(--gold);text-decoration:none;letter-spacing:.1em} .urgence-hh .u-tel:hover{text-decoration:underline} /* Praticiens grid (Le Cabinet) — two practitioners side by side */ .praticiens{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:48px} .praticien-card{padding:0} .praticien-card .ph-init{font-size:240px} .praticien-card .team-name{margin-top:18px;font-size:24px} .praticien-card .team-role{font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-dk);margin-top:6px} .praticien-card .praticien-bio{margin-top:18px;line-height:1.7;font-size:15px} @media (max-width: 880px){ .praticiens{grid-template-columns:1fr;gap:48px} } /* À proximité footer note */ .proximite-note{padding:32px 0;text-align:center;font-family:var(--sans);font-size:14px;letter-spacing:.04em;color:var(--ink-soft);background:var(--cream-2);border-top:.5px solid #e0d8ce} /* ====================================================== V15 — Section « Nous écrire » (formulaire de contact natif) Aucun asset ni librairie externe : la flèche du