/* Centre Dentaire Rabat Ville — style moderne, féminin et chic, aux couleurs du logo */
:root {
  --ink: #1C1A4A;
  --ink-2: #4A4870;
  --muted: #77759A;
  --indigo: #2B2FA3;
  --violet: #6B44C2;
  --teal: #3CCBC0;
  --teal-deep: #159E95;
  --pink: #F2B8D3;
  --pink-deep: #D9709F;
  --bg: #F8F7FD;
  --surface: #FFFFFF;
  --line: rgba(43, 47, 163, .1);
  --grad: linear-gradient(120deg, #6B44C2 0%, #2B2FA3 45%, #3CCBC0 100%);
  --grad-soft: linear-gradient(135deg, #EFE9FB 0%, #E6F8F6 100%);
  --shadow: 0 30px 60px -30px rgba(43, 47, 163, .35);
  --shadow-sm: 0 12px 30px -16px rgba(43, 47, 163, .3);
  --r: 28px;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --pad: clamp(18px, 5vw, 72px);
  --ease: cubic-bezier(.16, 1, .3, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--bg); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
body.locked { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 500; }
p { margin: 0; }
em { font-style: italic; }
::selection { background: var(--teal); color: #fff; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 8px; }

.ic { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: var(--serif); font-style: italic; font-weight: 400; padding-right: .06em; }
.glass { background: rgba(255, 255, 255, .62); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border: 1px solid rgba(255, 255, 255, .7); }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; padding: 1em 1.6em; border-radius: 999px; font-weight: 600; font-size: .98rem; border: 0; cursor: pointer; font-family: inherit; transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .3s; white-space: nowrap; position: relative; isolation: isolate; }
.btn-sm { padding: .72em 1.2em; font-size: .9rem; }
.btn-grad { color: #fff; background: var(--grad); background-size: 160% 100%; box-shadow: 0 14px 30px -12px rgba(107, 68, 194, .6); }
.btn-grad:hover { background-position: 100% 0; box-shadow: 0 18px 36px -12px rgba(60, 203, 192, .7); }
.btn-ghost { background: rgba(255, 255, 255, .7); color: var(--indigo); border: 1px solid var(--line); }
.btn-ghost:hover { background: #fff; }
.btn-white { background: #fff; color: var(--indigo); box-shadow: var(--shadow-sm); }
.btn-white:hover { transform: translateY(-2px); }

/* ---------- Chargement ---------- */
.loader { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: grid; place-content: center; justify-items: center; gap: 18px; transition: opacity .8s var(--ease), visibility .8s; }
.loader.done { opacity: 0; visibility: hidden; }
.loader-tooth { width: 84px; height: 84px; }
.loader-tooth path { fill: none; stroke: url(#lg); stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.4s var(--ease) forwards; }
.loader-name { font-family: var(--serif); font-size: 1.15rem; color: var(--indigo); opacity: 0; animation: fade .8s .5s forwards; }
.loader-name em { color: var(--teal-deep); }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 1; } }

/* ---------- Aurore ---------- */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; will-change: transform; }
.aurora .b1 { width: 46vw; height: 46vw; background: #CDBBF3; top: -14vw; right: -10vw; animation: float1 18s ease-in-out infinite alternate; }
.aurora .b2 { width: 40vw; height: 40vw; background: #A8EDE6; top: 30vh; left: -16vw; animation: float2 22s ease-in-out infinite alternate; }
.aurora .b3 { width: 30vw; height: 30vw; background: #F8D1E3; top: 10vh; left: 38vw; opacity: .45; animation: float1 26s ease-in-out infinite alternate-reverse; }
.aurora .b4 { width: 34vw; height: 34vw; background: #C2C6F5; bottom: -12vw; right: 10vw; opacity: .4; animation: float2 20s ease-in-out infinite alternate-reverse; }
@keyframes float1 { to { transform: translate(-6vw, 8vh) scale(1.12); } }
@keyframes float2 { to { transform: translate(8vw, -6vh) scale(.92); } }

/* ---------- En-tête ---------- */
.header { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 50; width: min(1240px, calc(100% - 28px)); display: flex; align-items: center; gap: 24px; padding: 10px 12px 10px 14px; border-radius: 999px; transition: background .4s, box-shadow .4s, transform .5s var(--ease); }
.header.scrolled { background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); box-shadow: var(--shadow-sm); }
.header.hide { transform: translate(-50%, -130%); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex: none; background: #fff; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(107, 68, 194, .35); }
.brand-logo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.brand-txt { display: flex; flex-direction: column; line-height: 1.1; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; }
.brand-txt b { font-family: var(--serif); font-size: 1.22rem; letter-spacing: 0; text-transform: none; color: var(--indigo); font-weight: 500; font-style: italic; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { padding: .55em 1em; border-radius: 999px; font-size: .93rem; font-weight: 500; color: var(--ink-2); transition: background .3s, color .3s; }
.nav a:hover { background: rgba(107, 68, 194, .08); color: var(--indigo); }
.burger { display: none; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--grad); cursor: pointer; position: relative; margin-left: auto; }
.burger span { position: absolute; left: 14px; right: 14px; height: 2px; background: #fff; border-radius: 2px; transition: transform .4s var(--ease); }
.burger span:first-child { top: 19px; } .burger span:last-child { top: 26px; }
.burger.open span:first-child { transform: translateY(3.5px) rotate(45deg); }
.burger.open span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.menu { position: fixed; inset: 0; z-index: 45; background: linear-gradient(160deg, #F3EEFC, #E4F7F5); padding: 110px 28px 40px; display: flex; flex-direction: column; justify-content: space-between; clip-path: circle(0 at calc(100% - 44px) 44px); transition: clip-path .8s var(--ease); visibility: hidden; }
.menu.open { clip-path: circle(150% at calc(100% - 44px) 44px); visibility: visible; }
.menu nav { display: flex; flex-direction: column; }
.menu nav a { font-family: var(--serif); font-size: clamp(2rem, 9vw, 3rem); color: var(--indigo); padding: .12em 0; display: flex; align-items: baseline; gap: 14px; border-bottom: 1px solid var(--line); }
.menu nav a small { font-family: var(--sans); font-size: .8rem; color: var(--teal-deep); }
.menu-foot { display: grid; gap: 14px; }
.menu-foot p { color: var(--muted); font-size: .9rem; }

/* ---------- Sections ---------- */
.section { padding: clamp(80px, 11vw, 150px) var(--pad); position: relative; }
.head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 70px); }
.head.center { margin-left: auto; margin-right: auto; text-align: center; }
.head.split { max-width: none; display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: end; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .78rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--teal-deep); margin-bottom: 18px; }
.eyebrow::before { content: ''; width: 28px; height: 2px; border-radius: 2px; background: var(--grad); }
.eyebrow.light { color: #A8F0E9; }
.h2 { font-family: var(--serif); font-size: clamp(2.1rem, 5vw, 3.9rem); line-height: 1.06; letter-spacing: -.02em; color: var(--ink); }
.h2.light { color: #fff; }
.lead { font-size: clamp(1.02rem, 1.4vw, 1.15rem); color: var(--ink-2); margin-top: 20px; max-width: 620px; }
.head.center .lead { margin-left: auto; margin-right: auto; }
.head.split .lead { margin-top: 0; }

/* ---------- Hero ---------- */
.hero { min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: clamp(20px, 4vw, 60px); padding: 130px var(--pad) 70px; position: relative; max-width: 1400px; margin: 0 auto; }
.pill { display: inline-flex; align-items: center; gap: 10px; padding: .55em 1.1em; border-radius: 999px; background: rgba(255, 255, 255, .75); border: 1px solid var(--line); font-size: .88rem; font-weight: 600; color: var(--indigo); box-shadow: var(--shadow-sm); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 0 rgba(60, 203, 192, .6); animation: ping 2s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 10px rgba(60, 203, 192, 0); } 100% { box-shadow: 0 0 0 0 rgba(60, 203, 192, 0); } }
.hero-title { font-family: var(--serif); font-size: clamp(3rem, 7.6vw, 6.6rem); line-height: .98; letter-spacing: -.035em; margin: 26px 0 24px; color: var(--ink); }
.hero-title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.hero-title .w > span { display: inline-block; }
.hero-title .grad-text { padding-right: .1em; }
.hero-sub { font-size: clamp(1.02rem, 1.4vw, 1.18rem); color: var(--ink-2); max-width: 540px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 30px 0 0; }
.hero-tags li { font-size: .82rem; font-weight: 600; color: var(--violet); padding: .4em .9em; border-radius: 999px; background: rgba(107, 68, 194, .08); }

.hero-visual { position: relative; aspect-ratio: 1; width: 100%; max-width: 580px; justify-self: center; display: grid; place-items: center; }
.orbit { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 40s linear infinite; }
.orbit text { font-family: var(--sans); font-size: 13.4px; font-weight: 700; letter-spacing: 3.2px; fill: var(--violet); opacity: .55; }
@keyframes spin { to { transform: rotate(360deg); } }
.tooth-frame { position: relative; width: 66%; aspect-ratio: .9; }
.tooth-img { position: absolute; inset: 0; clip-path: url(#toothClip); -webkit-clip-path: url(#toothClip); background: var(--grad-soft); }
.tooth-img img { width: 100%; height: 100%; object-fit: cover; object-position: 42% 50%; transform: scale(1.08); }
.tooth-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(107, 68, 194, .18), transparent 45%, rgba(60, 203, 192, .22)); }
.tooth-line { position: absolute; inset: -5%; width: 110%; height: 110%; overflow: visible; }
.tooth-line path { fill: none; stroke: var(--teal); stroke-width: .7; vector-effect: non-scaling-stroke; stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .9; }
.loaded .tooth-line path { transition: stroke-dashoffset 2.4s .4s var(--ease); stroke-dashoffset: 0; }
.float-card { position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 20px; box-shadow: var(--shadow); }
.float-card b { display: block; font-size: .92rem; color: var(--ink); }
.float-card small { color: var(--muted); font-size: .78rem; }
.fc-ic { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--grad); color: #fff; font-size: 1.1rem; flex: none; }
.fc-ic.pink { background: linear-gradient(135deg, #F2B8D3, #B28AE6); }
.fc-ic.green { background: linear-gradient(135deg, #3CCBC0, #23B36B); }
.fc1 { top: 12%; left: -4%; animation: bob 6s ease-in-out infinite; }
.fc2 { bottom: 16%; right: -4%; animation: bob 7s -2s ease-in-out infinite; }
.fc3 { bottom: 2%; left: 6%; animation: bob 5.5s -1s ease-in-out infinite; }
@keyframes bob { 50% { translate: 0 -10px; } }
.scroll-hint { position: absolute; left: 50%; bottom: 22px; width: 26px; height: 42px; border: 1.5px solid rgba(43, 47, 163, .3); border-radius: 20px; transform: translateX(-50%); }
.scroll-hint span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 4px; background: var(--violet); animation: wheel 1.8s infinite; }
@keyframes wheel { to { transform: translateY(14px); opacity: 0; } }

/* ---------- Bandeau ---------- */
.marquee { overflow: hidden; background: var(--grad); color: #fff; padding: 20px 0; transform: rotate(-1.6deg) scale(1.03); margin: 10px 0; box-shadow: var(--shadow); }
.marquee-track { display: flex; gap: 32px; width: max-content; animation: marq 32s linear infinite; align-items: center; }
.marquee span { font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 3vw, 2.2rem); white-space: nowrap; }
.marquee i { font-style: normal; color: #A8F0E9; }
@keyframes marq { to { transform: translateX(-50%); } }

/* ---------- Effet lumière au survol ---------- */
.spot { position: relative; overflow: hidden; isolation: isolate; }
.spot::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(60, 203, 192, .16), transparent 60%); }
.spot:hover::before { opacity: 1; }

/* ---------- Bento ---------- */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(220px, auto); gap: 18px; max-width: 1240px; margin: 0 auto; }
.tile { background: var(--surface); border-radius: var(--r); padding: 30px; border: 1px solid var(--line); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 12px; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.tile h3 { font-family: var(--serif); font-size: 1.45rem; line-height: 1.15; }
.tile h3 em { color: var(--violet); }
.tile p { color: var(--ink-2); font-size: .97rem; }
.t-ic { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; background: var(--grad-soft); color: var(--indigo); font-size: 1.3rem; }
.t-ic.pink { background: #FCE8F1; color: var(--pink-deep); }
.t-link { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--indigo); font-size: .93rem; }
.t-link .ic { transition: transform .4s var(--ease); }
.t-link:hover .ic { transform: translateX(5px); }
.t-loc { grid-column: span 2; background: linear-gradient(140deg, #fff 30%, #F1ECFC); }
.t-loc h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.t-photo { grid-column: span 2; grid-row: span 2; padding: 0; position: relative; overflow: hidden; }
.t-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.t-photo:hover img { transform: scale(1.05); }
.t-badge { position: absolute; left: 18px; bottom: 18px; padding: .6em 1.1em; border-radius: 999px; font-weight: 600; font-size: .9rem; color: var(--indigo); }
.t-grad { background: var(--grad); color: #fff; border: 0; }
.t-grad p { color: rgba(255, 255, 255, .85); }
.t-big { font-family: var(--serif); font-size: 4.6rem; line-height: .9; font-style: italic; }
.t-dark { background: var(--ink); color: #fff; border: 0; grid-column: span 2; }
.t-dark p { color: rgba(255, 255, 255, .72); }
.t-dark .t-ic { background: rgba(255, 255, 255, .1); color: var(--teal); }
.t-dark .t-link { color: var(--teal); }
.t-dark.spot::before { background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(107, 68, 194, .45), transparent 60%); }

/* ---------- Soins ---------- */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: 1240px; margin: 0 auto; }
.card { background: var(--surface); border-radius: var(--r); padding: 30px 26px; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; min-height: 300px; transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s; }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: rgba(60, 203, 192, .5); }
.card .num { position: absolute; top: 22px; right: 24px; font-family: var(--serif); font-style: italic; color: rgba(107, 68, 194, .35); font-size: 1.1rem; }
.c-ic { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--grad-soft); color: var(--indigo); font-size: 1.45rem; transition: background .4s, color .4s, transform .5s var(--ease); }
.card:hover .c-ic { background: var(--grad); color: #fff; transform: rotate(-8deg) scale(1.05); }
.card h3 { font-family: var(--serif); font-size: 1.5rem; margin-top: 8px; }
.card p { color: var(--ink-2); font-size: .95rem; }
.c-cta { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .9rem; color: var(--teal-deep); }
.c-cta .ic { transition: transform .4s var(--ease); }
.card:hover .c-cta .ic { transform: translateX(5px); }
.card-feat { background: linear-gradient(160deg, #F4EFFD, #fff 60%); border-color: rgba(107, 68, 194, .25); }
.card-cta { background: var(--grad); border: 0; color: #fff; justify-content: center; }
.card-cta h3 { margin: 0; }
.card-cta p { color: rgba(255, 255, 255, .85); }
.card-cta .btn { align-self: flex-start; margin-top: 10px; }

/* ---------- Sourire ---------- */
.sourire-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 100px); align-items: center; max-width: 1240px; margin: 0 auto; }
.stack { position: relative; aspect-ratio: 1; max-width: 540px; width: 100%; justify-self: center; }
.post { position: absolute; margin: 0; width: 72%; border-radius: 26px; overflow: hidden; box-shadow: var(--shadow); border: 6px solid #fff; transition: transform .8s var(--ease), z-index 0s .3s; }
.post img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.p1 { left: 0; top: 0; transform: rotate(-6deg); z-index: 2; }
.p2 { right: 0; bottom: 0; transform: rotate(5deg); z-index: 1; }
.stack:hover .p1 { transform: rotate(-9deg) translate(-12px, -8px); }
.stack:hover .p2 { transform: rotate(8deg) translate(12px, 8px); }
.stack.swap .p1 { z-index: 1; } .stack.swap .p2 { z-index: 2; }
.checks { list-style: none; padding: 0; margin: 28px 0 34px; display: grid; gap: 14px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-2); }
.checks .ic { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--teal); color: #fff; stroke-width: 2.6; margin-top: -1px; }

/* ---------- Parcours ---------- */
.timeline { list-style: none; padding: 0; margin: 0 auto; max-width: 1180px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; }
.timeline li { position: relative; padding-top: 86px; }
.st-n { position: absolute; top: 0; left: 0; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-size: 1.5rem; font-style: italic; color: var(--indigo); background: #fff; box-shadow: var(--shadow-sm); border: 1px solid var(--line); z-index: 1; }
.timeline h3 { font-family: var(--serif); font-size: 1.4rem; margin-bottom: 8px; }
.timeline p { color: var(--ink-2); font-size: .96rem; }
.tl-line { position: absolute; top: 29px; left: 30px; right: 30px; height: 2px; background: var(--line); }
.tl-line i { position: absolute; inset: 0; background: var(--grad); transform-origin: left; transform: scaleX(var(--p, 1)); }

/* ---------- Cabinet ---------- */
.gallery { display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: 1fr 1fr; gap: 18px; max-width: 1240px; margin: 0 auto; height: clamp(420px, 60vw, 640px); }
.gal { margin: 0; border-radius: var(--r); overflow: hidden; position: relative; }
.g-big { grid-row: span 2; }
.gal img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.gal:hover img { transform: scale(1.06); }
.gal figcaption { position: absolute; left: 16px; bottom: 16px; padding: .5em 1em; border-radius: 999px; font-size: .85rem; font-weight: 600; color: var(--indigo); }

/* ---------- Accès ---------- */
.acces-card { max-width: 1240px; margin: 0 auto; border-radius: 36px; background: radial-gradient(120% 120% at 0% 0%, #6B44C2 0%, #2B2FA3 45%, #1C1A4A 100%); color: #fff; padding: clamp(36px, 6vw, 80px); display: grid; grid-template-columns: 1.05fr 1fr; gap: 50px; align-items: center; position: relative; overflow: hidden; box-shadow: var(--shadow); }
.acces-card::after { content: ''; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: #3CCBC0; filter: blur(110px); opacity: .35; right: -120px; bottom: -160px; pointer-events: none; }
.acces-text p { color: rgba(255, 255, 255, .8); margin-top: 20px; }
.acces-text h2 em { color: #A8F0E9; font-family: var(--serif); }
.acces-list { list-style: none; padding: 0; margin: 26px 0 32px; display: grid; gap: 12px; }
.acces-list li { display: flex; gap: 12px; align-items: center; font-weight: 500; }
.acces-list .ic { width: 38px; height: 38px; padding: 9px; border-radius: 12px; background: rgba(255, 255, 255, .1); color: #A8F0E9; }
.plan { position: relative; z-index: 1; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: 28px; padding: 18px; }
.plan svg { width: 100%; height: auto; display: block; overflow: visible; }
.road { fill: rgba(255, 255, 255, .1); }
.road-mid { stroke: rgba(255, 255, 255, .35); stroke-dasharray: 10 10; stroke-width: 2; }
.road-name { fill: rgba(255, 255, 255, .55); font: 700 11px var(--sans); letter-spacing: 3px; }
.bldg { fill: rgba(255, 255, 255, .12); stroke: rgba(255, 255, 255, .25); }
.bldg.ghost { fill: rgba(255, 255, 255, .04); stroke: rgba(255, 255, 255, .1); }
.bldg.clinic { fill: #3CCBC0; stroke: none; }
.bldg-t { fill: #fff; font: 600 14px var(--sans); }
.bldg-t.sm { font: italic 500 15px var(--serif); }
.route { fill: none; stroke: #F2B8D3; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: var(--route, 0); }
.pin-c { fill: #F2B8D3; stroke: #fff; stroke-width: 3; }
.pulse { fill: #F2B8D3; opacity: .5; transform-box: fill-box; transform-origin: center; animation: pulse 2s infinite; }
@keyframes pulse { to { transform: scale(2.4); opacity: 0; } }

/* ---------- FAQ ---------- */
.faq-list { max-width: 860px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { background: var(--surface); border-radius: 22px; border: 1px solid var(--line); padding: 0 26px; transition: box-shadow .4s; }
.faq details[open] { box-shadow: var(--shadow-sm); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; font-weight: 600; font-size: 1.05rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 0; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background: var(--grad-soft); color: var(--indigo); display: grid; place-items: center; font-size: 1.2rem; font-weight: 500; transition: transform .4s var(--ease), background .3s, color .3s; }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--grad); color: #fff; }
.faq details p { color: var(--ink-2); padding-bottom: 22px; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 80px); max-width: 1240px; margin: 0 auto; align-items: start; }
.c-items { display: grid; gap: 14px; margin-top: 36px; }
.c-item { display: flex; gap: 16px; align-items: center; padding: 16px 20px; background: var(--surface); border-radius: 22px; border: 1px solid var(--line); transition: transform .4s var(--ease), box-shadow .4s; }
a.c-item:hover { transform: translateX(6px); box-shadow: var(--shadow-sm); }
.c-item small { display: block; color: var(--muted); font-size: .8rem; }
.c-item b { display: block; font-size: 1.08rem; color: var(--ink); font-weight: 700; }
.ci { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; background: var(--grad); color: #fff; font-size: 1.25rem; flex: none; }
.ci.green { background: linear-gradient(135deg, #3CCBC0, #23B36B); }
.ci.pink { background: linear-gradient(135deg, #F2B8D3, #B28AE6); }
.socials { display: flex; gap: 10px; margin-top: 24px; }
.socials a { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--indigo); font-size: 1.2rem; transition: background .3s, color .3s, transform .4s var(--ease); }
.socials a:hover { background: var(--grad); color: #fff; transform: translateY(-3px); }
.form { border-radius: 32px; padding: clamp(26px, 4vw, 42px); box-shadow: var(--shadow); display: grid; gap: 16px; background: rgba(255, 255, 255, .78); }
.form h3 { font-family: var(--serif); font-size: 1.8rem; }
.form-sub { color: var(--muted); font-size: .93rem; margin-top: -8px; }
.form label { display: grid; gap: 7px; font-size: .86rem; font-weight: 600; color: var(--ink-2); }
.form input, .form select, .form textarea { font: inherit; font-size: 1rem; color: var(--ink); padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(43, 47, 163, .15); background: #fff; outline: none; transition: border-color .3s, box-shadow .3s; width: 100%; -webkit-appearance: none; appearance: none; }
.form select { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232B2FA3' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center; padding-right: 40px; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(60, 203, 192, .18); }
.form textarea { resize: vertical; }
.form-err { color: #C2416F; font-size: .88rem; min-height: 1em; margin: -4px 0; }
.form .btn { width: 100%; }
.map { max-width: 1240px; margin: 60px auto 0; border-radius: 32px; overflow: hidden; height: 360px; box-shadow: var(--shadow-sm); border: 6px solid #fff; }
.map iframe { width: 100%; height: 100%; border: 0; filter: saturate(.85) hue-rotate(-8deg); }

/* ---------- Pied de page ---------- */
.footer { background: var(--ink); color: rgba(255, 255, 255, .7); padding: 70px var(--pad) 110px; overflow: hidden; border-radius: 40px 40px 0 0; margin-top: 40px; }
.foot-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; max-width: 1240px; margin: 0 auto; }
.foot-brand .brand-txt { color: rgba(255, 255, 255, .6); }
.foot-brand .brand-txt b { color: #fff; }
.foot-big { font-family: var(--serif); font-style: italic; font-size: clamp(4rem, 15vw, 13rem); line-height: 1; letter-spacing: -.04em; margin: 40px 0 30px; text-align: center; background: linear-gradient(120deg, #B9A4EE, #fff 50%, #A8F0E9); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; }
.foot-big em { color: #3CCBC0; -webkit-text-fill-color: #3CCBC0; }
.foot-bot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: .85rem; max-width: 1240px; margin: 0 auto; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .12); }

/* ---------- Barre mobile ---------- */
.mbar { display: none; }

/* ---------- Apparitions (seulement si JS + GSAP) ---------- */
.js .reveal { opacity: 0; transform: translateY(34px); }
.js .hero-title .w > span { transform: translateY(110%); }

/* ---------- Tablette ---------- */
@media (max-width: 1080px) {
  .nav, .head-cta { display: none; }
  .burger { display: block; }
  .hero { grid-template-columns: 1fr; text-align: center; padding-top: 120px; gap: 10px; }
  .hero-text { display: flex; flex-direction: column; align-items: center; }
  .hero-cta, .hero-tags { justify-content: center; }
  .hero-visual { max-width: 480px; order: 2; }
  .scroll-hint { display: none; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .t-photo { grid-row: span 1; min-height: 300px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .sourire-grid, .contact-grid, .acces-card { grid-template-columns: 1fr; }
  .head.split { grid-template-columns: 1fr; gap: 0; }
  .head.split .lead { margin-top: 20px; }
  .timeline { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .tl-line { display: none; }
}

/* ---------- Téléphone ---------- */
@media (max-width: 640px) {
  body { padding-bottom: 76px; }
  .header { top: 10px; width: calc(100% - 20px); padding: 8px 8px 8px 10px; }
  .brand-logo { width: 42px; height: 42px; }
  .brand-txt { font-size: .66rem; }
  .brand-txt b { font-size: 1.08rem; }
  .hero { padding: 100px 18px 40px; min-height: auto; }
  .pill { font-size: .78rem; }
  .hero-title { font-size: clamp(2.7rem, 13vw, 3.6rem); margin: 20px 0 18px; }
  .hero-cta { flex-direction: column; width: 100%; }
  .hero-sub { font-size: 1rem; }
  .hero-cta .btn { width: 100%; }
  .hero-visual { margin-top: 16px; width: 100%; }
  .float-card { padding: 8px 12px 8px 8px; border-radius: 16px; gap: 9px; }
  .float-card b { font-size: .8rem; }
  .float-card small { font-size: .7rem; }
  .fc-ic { width: 34px; height: 34px; border-radius: 11px; font-size: .95rem; }
  .fc1 { left: 0; top: 6%; }
  .fc2 { right: 0; bottom: 18%; }
  .fc3 { left: 2%; bottom: 0; }
  .orbit text { font-size: 15px; }
  .marquee { padding: 14px 0; }
  .bento, .cards { grid-template-columns: 1fr; }
  .t-loc, .t-photo, .t-dark { grid-column: auto; }
  .tile, .card { padding: 24px 22px; }
  .card { min-height: 0; }
  .timeline { grid-template-columns: 1fr; }
  .timeline li { padding: 0 0 0 80px; min-height: 60px; }
  .gallery { grid-template-columns: 1fr; grid-template-rows: none; height: auto; }
  .g-big { grid-row: auto; }
  .gal { aspect-ratio: 4/3; }
  .acces-card { border-radius: 28px; padding: 30px 22px; gap: 30px; }
  .acces-card .btn { width: 100%; }
  .map { height: 280px; border-radius: 24px; margin-top: 40px; }
  .faq details { padding: 0 18px; }
  .footer { padding-bottom: 40px; border-radius: 28px 28px 0 0; }
  .foot-big { font-size: 18vw; }
  .mbar { display: grid; grid-template-columns: auto 1fr; gap: 8px; position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 55; padding: 8px; border-radius: 999px; background: rgba(255, 255, 255, .85); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--shadow); }
  .mbar a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 18px; border-radius: 999px; font-weight: 700; font-size: .92rem; color: var(--indigo); }
  .mbar .mbar-wa { background: var(--grad); color: #fff; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
  .js .hero-title .w > span { transform: none; }
  .tooth-line path { stroke-dashoffset: 0; }
}

/* ---------- Ajustements ---------- */
.head { max-width: 1240px; margin-left: auto; margin-right: auto; }
.head > * { max-width: 780px; }
.head.center > * { margin-left: auto; margin-right: auto; }
.head.split > * { max-width: none; }
.post img { height: auto; }
.grad-text { padding-right: .12em; }
body.locked .mbar { display: none; }