/* Self-Explorer — site styles
   Layout: one scrolling page. Header, hero with project route, services, clients (dark band), about, coaching, contact, footer.
   Palette: Espresso text, Brique brand, Safran energy (shapes only on light), Sable sections, Blanc chaud page. */
@font-face{ font-family:"Bricolage Grotesque"; font-weight:700; font-style:normal; font-display:swap; src:url("fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2") }
@font-face{ font-family:"Bricolage Grotesque"; font-weight:800; font-style:normal; font-display:swap; src:url("fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2") }
@font-face{ font-family:"Hanken Grotesk"; font-weight:400; font-style:normal; font-display:swap; src:url("fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2") }
@font-face{ font-family:"Hanken Grotesk"; font-weight:600; font-style:normal; font-display:swap; src:url("fonts/hanken-grotesk-latin-600-normal.woff2") format("woff2") }
@font-face{ font-family:"Hanken Grotesk"; font-weight:700; font-style:normal; font-display:swap; src:url("fonts/hanken-grotesk-latin-700-normal.woff2") format("woff2") }

:root{
  --bg:#FFFBF5; --surface:#F7E6CF; --fg:#2A1A12; --muted:#5A4234; --brand:#A3361B; --on-brand:#FFFBF5; --sun:#F0A830; --dot:#F0A830; --line:#EAD7BF; --focus:#A3361B;
  --band-bg:#2A1A12; --band-fg:#FFFBF5; --band-muted:#E3D3C4;
  --display:"Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --body:"Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --bg:#1B120D; --surface:#2B1D15; --fg:#F8EEE4; --muted:#D5C2B1; --brand:#FF9B6E; --on-brand:#1B120D; --sun:#F4B547; --dot:#F4B547; --line:#45322A; --focus:#F4B547; --band-bg:#2B1D15; --band-fg:#F8EEE4; --band-muted:#D5C2B1; color-scheme:dark }
}
:root[data-theme="dark"]{ --bg:#1B120D; --surface:#2B1D15; --fg:#F8EEE4; --muted:#D5C2B1; --brand:#FF9B6E; --on-brand:#1B120D; --sun:#F4B547; --dot:#F4B547; --line:#45322A; --focus:#F4B547; --band-bg:#2B1D15; --band-fg:#F8EEE4; --band-muted:#D5C2B1; color-scheme:dark }

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{ margin:0; background:var(--bg); color:var(--fg); font-family:var(--body); font-size:1.125rem; line-height:1.65 }
img,svg{ max-width:100% }
.wrap{ max-width:72rem; margin-inline:auto; padding-inline:clamp(16px, 4vw, 40px) }
h1,h2,h3{ font-family:var(--display); line-height:1.12; text-wrap:balance; margin:0; letter-spacing:-.02em }
h1{ font-weight:800; font-size:clamp(2rem, 8.6vw, 4.8rem); overflow-wrap:break-word; hyphens:manual; line-height:1.02; letter-spacing:-.035em; max-width:14ch }
h2{ font-weight:700; font-size:clamp(1.7rem, 3.4vw, 2.4rem) }
h3{ font-weight:700; font-size:1.3rem }
p{ margin:0; max-width:65ch }
a{ color:var(--brand); text-underline-offset:.18em; text-decoration-thickness:1px }
a:hover{ text-decoration-thickness:2px }
:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; border-radius:4px }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.skip{ position:absolute; left:16px; top:-100px; z-index:20; background:var(--brand); color:var(--on-brand); padding:.75rem 1rem; border-radius:8px; font-weight:700 }
.skip:focus{ top:16px }
.eyebrow{ font-size:.85rem; letter-spacing:.12em; text-transform:uppercase; color:var(--brand); font-weight:700 }
section{ padding-block:clamp(3.5rem, 8vw, 6rem) }
.section-head{ display:grid; gap:.75rem; margin-bottom:2.5rem }

/* Header */
.top{ position:sticky; top:env(safe-area-inset-top, 0px); z-index:10; background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid var(--line) }
.top .wrap{ display:flex; align-items:center; justify-content:space-between; gap:.5rem 1rem; flex-wrap:wrap; min-height:4.5rem; padding-block:.5rem }
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--fg); min-height:44px }
.brand svg{ width:2.6rem; height:2.6rem; flex:none }
.wm{ font-family:var(--display); font-weight:700; font-size:1.55rem; letter-spacing:-.025em; color:var(--fg); white-space:nowrap }
@media (max-width:420px){ .wm{ font-size:1.3rem } .brand{ gap:.5rem } .brand svg{ width:2.25rem; height:2.25rem } }
.wm i{ display:inline-block; width:.2em; height:.2em; border-radius:50%; background:var(--dot); margin:0 .13em; vertical-align:.26em }
nav ul{ list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:.25rem 1.25rem; margin:0; padding:0 }
nav a{ display:inline-flex; align-items:center; min-height:44px; color:var(--fg); text-decoration:none; font-weight:600; font-size:1rem }
nav .lang{ border:1px solid var(--line); border-radius:999px; padding-inline:.85rem; min-height:40px }

.menu-btn{ display:none }
@media (max-width:760px){
  .top .wrap{ flex-wrap:nowrap }
  .js .menu-btn{ display:inline-flex; align-items:center; justify-content:center; width:48px; min-height:48px; padding:0; margin-right:-10px; border-radius:12px; border:0; background:transparent; color:var(--fg); font:inherit; font-weight:700; font-size:1rem; cursor:pointer }
  .bars{ position:relative; width:24px; height:16px }
  .bars::before, .bars::after, .bars span{ content:""; position:absolute; left:0; right:0; height:2px; border-radius:2px; background:currentColor }
  .bars::before, .bars::after, .bars span{ transition:transform .25s, opacity .2s, top .25s, bottom .25s }
  .bars::before{ top:0 } .bars span{ top:7px } .bars::after{ bottom:0 }
  .menu-btn[aria-expanded="true"] .bars::before{ top:7px; transform:rotate(45deg) }
  .menu-btn[aria-expanded="true"] .bars::after{ bottom:7px; transform:rotate(-45deg) }
  .menu-btn[aria-expanded="true"] .bars span{ opacity:0 }
  .js nav ul{ display:none; position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch; gap:0; padding:.5rem clamp(16px, 4vw, 40px) 1.25rem; background:var(--bg); border-bottom:1px solid var(--line); box-shadow:0 12px 24px -16px rgba(0,0,0,.35) }
  .js nav ul.open{ display:flex }
  .js nav ul li a{ min-height:48px; font-size:1.15rem; border-bottom:1px solid var(--line); width:100% }
  .js nav ul li:last-child a{ border-bottom:0 }
  .js nav .lang{ border:1px solid var(--line); width:auto !important; justify-content:center; min-width:3.5rem; padding-inline:1rem }
}

/* Hero */
.hero{ position:relative; overflow:hidden; padding-block:clamp(3rem, 8vw, 6.5rem) }
.hero::before{ content:""; position:absolute; width:clamp(16rem, 38vw, 34rem); aspect-ratio:1; border-radius:50%; background:var(--sun); right:-6rem; top:-7rem }
.hero::after{ content:""; position:absolute; width:clamp(5rem, 10vw, 9rem); aspect-ratio:1; border-radius:50%; background:var(--brand); right:clamp(8rem, 26vw, 24rem); top:clamp(9rem, 20vw, 17rem) }
.hero .wrap{ position:relative; z-index:1; display:grid; gap:3rem }
.hero .text{ display:grid; gap:1.25rem }
.hero h1 em{ font-style:normal; color:var(--brand); background:linear-gradient(transparent 62%, color-mix(in srgb, var(--sun) 55%, transparent) 62%) }
.lead{ font-size:clamp(1.15rem, 2vw, 1.3rem); color:var(--muted) }
.cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:.5rem }
.btn{ display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 1.5rem; border-radius:999px; border:2px solid var(--brand); font:inherit; font-weight:700; font-size:1.05rem; text-decoration:none; cursor:pointer }
.btn.primary{ background:var(--brand); color:var(--on-brand) }
.btn.ghost{ background:transparent; color:var(--brand) }
.route{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)) }
.route li{ position:relative; display:grid; gap:.2rem; align-content:start; padding:2.4rem 1.25rem 0 0 }
.route li::before{ content:""; position:absolute; top:.6rem; left:0; right:0; border-top:4px solid var(--brand); border-radius:4px }
.route li::after{ content:""; position:absolute; top:0; left:0; width:1.3rem; height:1.3rem; border-radius:50%; background:var(--bg); border:4px solid var(--brand) }
.route li:last-child::before{ right:auto; width:0 }
.route li:last-child::after{ background:var(--sun); border:0; width:1.7rem; height:1.7rem; top:-.2rem; left:-.2rem }
.route strong{ font-family:var(--display); font-weight:700; font-size:1.45rem }
.route span{ color:var(--muted); font-size:1rem }
@media (max-width:700px){
  .route{ grid-template-columns:minmax(0,1fr); gap:1.25rem }
  .route li{ padding:0 0 0 2.4rem }
  .route li::before{ top:1.3rem; bottom:-1.25rem; left:.45rem; right:auto; border-top:0; border-left:4px solid var(--brand) }
  .route li:last-child::before{ display:none }
  .route li::after{ top:.35rem }
  .hero::after{ display:none }
  .hero::before{ width:11rem; right:-4.5rem; top:-8rem }
}

/* Services */
.services{ display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit, minmax(16rem, 1fr)) }
.service{ display:grid; gap:.6rem; align-content:start; padding:1.75rem; border-radius:24px; border:2px solid var(--line); background:var(--bg) }
.service:nth-child(2){ background:var(--surface); border-color:var(--surface) }
.service h3{ color:var(--brand) }
.service p{ color:var(--muted) }

/* Projects */
.projects{ display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit, minmax(17rem, 1fr)) }
.project{ display:grid; gap:.6rem; align-content:start; padding:1.75rem; border-radius:24px; background:var(--surface); position:relative; overflow:hidden }
.project::before{ content:""; position:absolute; width:5rem; height:5rem; border-radius:50%; background:var(--sun); right:-1.5rem; top:-1.5rem }
.project .tag{ font-size:.85rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--brand); max-width:80% }
.project p:last-child{ color:var(--muted) }

/* Clients band */
.band{ background:var(--surface); color:var(--fg) }
.clients{ list-style:none; margin:0; padding:0; display:grid; gap:1.5rem 2.5rem; grid-template-columns:repeat(auto-fit, minmax(14rem, 1fr)) }
.clients li{ display:grid; gap:.3rem; align-content:start; padding-top:1rem; border-top:2px solid var(--sun) }
.clients strong{ font-family:var(--display); font-weight:700; font-size:1.2rem }
.clients span{ color:var(--muted) }

/* About */
.about{ display:grid; gap:2rem }
.about-head{ display:flex; align-items:center; gap:1.5rem }
.about-head .who{ display:grid; gap:.35rem; min-width:0 }
.about-head .photo{ flex:none }
.photo img{ display:block; width:13rem; height:auto; aspect-ratio:4/5; object-fit:cover; border-radius:24px; background:var(--surface) }
.role{ color:var(--muted); font-weight:600; font-size:1.1rem }
.about-body{ display:grid; gap:2.5rem; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); align-items:start }
.about-body .text{ display:grid; gap:1rem }
.facts{ margin:0; display:grid; gap:1rem; padding:1.5rem; border-radius:24px; background:var(--surface) }
.facts div{ display:grid; gap:.1rem }
.facts dt{ font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:700 }
.facts dd{ margin:0; font-weight:600 }
@media (max-width:760px){ .about-body{ grid-template-columns:minmax(0,1fr) } .photo img{ width:8.5rem; border-radius:18px } .about-head{ gap:1.1rem } }

/* Coaching */
.coaching{ padding-block:clamp(2.5rem, 6vw, 4rem); border-block:1px solid var(--line) }
.coaching .wrap{ display:grid; gap:.75rem }
.coaching p{ color:var(--muted) }

/* Contact */
.contact{ display:grid; gap:2.5rem; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) }
.contact .text{ display:grid; gap:1rem; align-content:start }
.email{ display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; font-size:1.2rem; font-weight:700 }
.copy{ font:inherit; font-size:.9rem; font-weight:600; min-height:44px; padding:0 1rem; border-radius:999px; border:1px solid var(--line); background:var(--bg); color:var(--fg); cursor:pointer }
form{ display:grid; gap:1.1rem }
.field{ display:grid; gap:.35rem }
label{ font-weight:700; font-size:1rem }
.hint{ font-size:.95rem; color:var(--muted) }
input, textarea{ font:inherit; font-size:1.05rem; color:var(--fg); background:var(--bg); border:2px solid var(--muted); border-radius:14px; padding:.7rem .85rem; min-height:48px; width:100% }
textarea{ min-height:9rem; resize:vertical }
input[aria-invalid="true"], textarea[aria-invalid="true"]{ border-color:var(--brand); border-width:3px }
.err{ color:var(--brand); font-weight:700; font-size:.95rem }
.hp{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden }
.send{ justify-self:start }
.status{ font-weight:600; background:var(--surface); padding:.85rem 1rem; border-radius:14px }

/* Legal / simple pages */
.page{ padding-block:clamp(3rem, 7vw, 5rem) }
.page .wrap{ display:grid; gap:1.25rem }
.page h1{ font-size:clamp(2rem, 5vw, 3rem); max-width:none }
.page h2{ font-size:1.4rem; margin-top:1rem }
.page address{ font-style:normal }

footer{ border-top:1px solid var(--line); padding-block:2rem; font-size:.95rem; color:var(--muted) }
footer .wrap{ display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between }

@media (max-width:760px){ .contact{ grid-template-columns:minmax(0,1fr) } }
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth } .btn, nav a{ transition:color .15s, background-color .15s } }
@media print{ .top, .hero::before, .hero::after, form{ display:none } body{ background:#fff; color:#000 } }

/* ——— Polish: hovers, small graphics, motion ——— */
.btn{ gap:.55rem; transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease }
.btn .arr{ display:inline-block; transition:transform .2s ease }
.btn.primary:hover{ transform:translateY(-2px); box-shadow:0 10px 22px -10px color-mix(in srgb, var(--brand) 80%, transparent); background:color-mix(in srgb, var(--brand) 88%, var(--fg)) }
.btn.primary:hover .arr{ transform:translateX(4px) }
.btn.ghost:hover{ background:var(--brand); color:var(--on-brand); transform:translateY(-2px) }
.btn:active{ transform:translateY(0) }
.copy{ transition:border-color .2s, color .2s, background-color .2s }
.copy:hover{ border-color:var(--brand); color:var(--brand) }
footer a, .contact a{ transition:color .2s }

/* nav: underline that grows, in saffron */
@media (min-width:761px){
  nav ul a:not(.lang){ position:relative }
  nav ul a:not(.lang)::after{ content:""; position:absolute; left:0; right:0; bottom:8px; height:3px; border-radius:3px; background:var(--sun); transform:scaleX(0); transform-origin:left; transition:transform .25s ease }
  nav ul a:not(.lang):hover::after, nav ul a:not(.lang):focus-visible::after{ transform:scaleX(1) }
  nav .lang{ transition:background-color .2s, color .2s, border-color .2s }
  nav .lang:hover{ background:var(--fg); color:var(--bg); border-color:var(--fg) }
}

/* eyebrow: saffron dot echoing the logo */
.eyebrow{ display:inline-flex; align-items:flex-start; gap:.55rem }
.eyebrow::before{ content:""; width:.55rem; height:.55rem; margin-top:.5em; border-radius:50%; background:var(--sun); flex:none }

/* service icons */
.ico{ width:2.75rem; height:2.75rem; fill:none; stroke:var(--brand); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; margin-bottom:.35rem }
.ico .f{ fill:var(--brand); stroke:none }
.ico .s{ fill:var(--sun); stroke:none }
.service, .project{ transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease }
.service:hover, .project:hover{ transform:translateY(-4px); box-shadow:0 18px 36px -24px color-mix(in srgb, var(--fg) 55%, transparent) }
.service:hover{ border-color:var(--sun) }
.project::before{ transition:transform .4s ease }
.project:hover::before{ transform:scale(1.25) }

/* clients band: soft dotted texture */
.band{ position:relative; overflow:hidden }
.band::after{ content:""; position:absolute; right:-4rem; bottom:-4rem; width:22rem; height:22rem; border-radius:50%; background-image:radial-gradient(color-mix(in srgb, var(--sun) 45%, transparent) 1.6px, transparent 1.8px); background-size:16px 16px; pointer-events:none; opacity:.5 }
.band .wrap{ position:relative; z-index:1 }

/* contact: small saffron disc behind the heading */
#contact .text{ position:relative }
#contact .text::before{ content:""; position:absolute; left:-1.5rem; top:-1.25rem; width:5.5rem; height:5.5rem; border-radius:50%; background:color-mix(in srgb, var(--sun) 35%, transparent); z-index:-1 }
#contact{ position:relative; z-index:0 }

@media (prefers-reduced-motion: no-preference){
  /* hero: shapes drift slowly */
  .hero::before{ animation:drift 14s ease-in-out infinite alternate }
  .hero::after{ animation:drift2 11s ease-in-out infinite alternate }
  @keyframes drift{ from{ transform:translate(0,0) } to{ transform:translate(-18px, 14px) } }
  @keyframes drift2{ from{ transform:translate(0,0) scale(1) } to{ transform:translate(14px,-10px) scale(1.06) } }
  /* highlight under "menés avec soin" sweeps in */
  .hero h1 em{ background-repeat:no-repeat; background-size:100% 100%; animation:sweep .9s .35s cubic-bezier(.2,.7,.2,1) backwards }
  @keyframes sweep{ from{ background-size:0% 100% } to{ background-size:100% 100% } }
  /* project route draws itself, step by step */
  .route li::before{ transform-origin:left; animation:draw .6s cubic-bezier(.2,.7,.2,1) backwards }
  .route li::after{ animation:pop .45s cubic-bezier(.3,1.6,.5,1) backwards }
  .route li:nth-child(1)::after{ animation-delay:.5s } .route li:nth-child(1)::before{ animation-delay:.6s }
  .route li:nth-child(2)::after{ animation-delay:.95s } .route li:nth-child(2)::before{ animation-delay:1.05s }
  .route li:nth-child(3)::after{ animation-delay:1.4s } .route li:nth-child(3)::before{ animation-delay:1.5s }
  .route li:nth-child(4)::after{ animation:pop .45s 1.85s cubic-bezier(.3,1.6,.5,1) backwards, pulse 2.8s 2.6s ease-out 3 }
  @keyframes draw{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
  @keyframes pop{ from{ transform:scale(0) } to{ transform:scale(1) } }
  @keyframes pulse{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--sun) 70%, transparent) } 100%{ box-shadow:0 0 0 14px transparent } }
  @media (max-width:700px){ .route li::before{ transform-origin:top; animation-name:drawv } @keyframes drawv{ from{ transform:scaleY(0) } to{ transform:scaleY(1) } } }
  /* sections rise gently into view */
  .js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1) }
  .js .reveal.in{ opacity:1; transform:none }
}

/* ——— Parallax bands with ambient event-light images ——— */
.parallax{ position:relative; overflow:hidden; display:grid; align-items:center; min-height:clamp(18rem, 52vh, 30rem); background:#2A1A12; isolation:isolate }
.px-bg{ position:absolute; left:0; right:0; top:-22%; bottom:-22%; background-size:cover; background-position:center; will-change:transform; z-index:-2 }
.parallax::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(27,18,13,.78) 0%, rgba(27,18,13,.45) 60%, rgba(27,18,13,.25) 100%) }
.px-quote{ font-family:var(--display); font-weight:800; font-size:clamp(2rem, 5.2vw, 3.9rem); line-height:1.05; letter-spacing:-.03em; color:#FFF8EE; max-width:18ch; text-wrap:balance; text-shadow:0 2px 24px rgba(0,0,0,.35) }
.px-quote em{ font-style:normal; color:#F4B547 }
/* hero shapes follow the scroll at different speeds */
.hero::before{ translate:0 calc(var(--py, 0) * .35px) }
.hero::after{ translate:0 calc(var(--py, 0) * -.25px) }
.parallax > .wrap{ width:100%; box-sizing:border-box }

/* About — espresso band with key figures */
.about-b{ background:var(--band-bg); color:var(--band-fg) }
.about-b .eyebrow{ color:var(--sun) }
.about-b-top{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem); align-items:center }
.about-b-photo{ position:relative; width:clamp(12rem,22vw,17rem); aspect-ratio:1; isolation:isolate }
.about-b-photo::before{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--sun); transform:translate(12%,8%); z-index:-1; transition:transform .5s cubic-bezier(.2,.7,.2,1) }
.about-b-photo:hover::before{ transform:translate(16%,4%) }
.about-b-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 20%; border-radius:50%; display:block }
.about-b-text{ display:grid; gap:1rem }
.about-b-text p:not(.eyebrow){ color:var(--band-muted) }
.about-b-stats{ margin:3rem 0 0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.5rem; border-top:1px solid color-mix(in srgb, var(--sun) 50%, transparent); padding-top:2rem }
.about-b-stats div{ display:flex; flex-direction:column-reverse; justify-content:flex-end; gap:.25rem }
.about-b-stats dd{ margin:0; font-family:var(--display); font-weight:800; font-size:clamp(2.4rem,5vw,3.6rem); line-height:1; color:var(--sun); font-variant-numeric:tabular-nums }
.about-b-stats dt{ color:var(--band-muted); font-size:.98rem }
@media (max-width:760px){ .about-b-top{ grid-template-columns:minmax(0,1fr) } .about-b-photo{ width:11rem } .about-b-stats{ grid-template-columns:repeat(2,minmax(0,1fr)) } }

.hero .wrap > *, .hero .text > *{ min-width:0 }
.px-quote{ overflow-wrap:break-word }

/* Theme toggle */
.tools{ display:flex; align-items:center; gap:.5rem }
.theme-btn{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--fg); cursor:pointer; transition:background-color .2s, color .2s, border-color .2s, transform .3s }
.theme-btn:hover{ background:var(--fg); color:var(--bg); border-color:var(--fg); transform:rotate(-15deg) }
.theme-btn svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round }
.theme-btn .i-moon path{ fill:currentColor; stroke:none }
.theme-btn .ball{ fill:var(--sun); stroke:none }
.theme-btn .i-sun{ display:none }
:root[data-theme="dark"] .theme-btn .i-sun{ display:block } :root[data-theme="dark"] .theme-btn .i-moon{ display:none }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .theme-btn .i-sun{ display:block } :root:not([data-theme="light"]) .theme-btn .i-moon{ display:none } }
@media (max-width:760px){ .js nav ul li.tools{ margin-top:.75rem; gap:.75rem } .js nav ul li.tools a{ border-bottom:0; margin-top:0; width:auto } .theme-btn{ width:44px; height:44px } }

/* FAQ */
.faq-list{ display:grid; gap:.75rem; max-width:52rem }
.qa{ border:2px solid var(--line); border-radius:20px; background:var(--bg); transition:border-color .2s, background-color .2s }
.qa[open]{ border-color:var(--sun); background:var(--surface) }
.qa summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.1rem 1.4rem; min-height:48px }
.qa summary::-webkit-details-marker{ display:none }
.qa summary h3{ font-size:1.15rem; margin:0 }
.qa summary::after{ content:""; flex:none; width:1.6rem; height:1.6rem; border-radius:50%; background:var(--sun); background-image:linear-gradient(var(--fg),var(--fg)), linear-gradient(var(--fg),var(--fg)); background-size:.7rem 2px, 2px .7rem; background-position:center; background-repeat:no-repeat; transition:transform .25s ease }
.qa[open] summary::after{ transform:rotate(45deg) }
.qa p{ padding:0 1.4rem 1.25rem; color:var(--muted) }
.qa summary:hover h3{ color:var(--brand) }

.sprite{ position:absolute; width:0; height:0; overflow:hidden }
.px-1{ background-image:url(img/ambiance-1.webp) }
.px-2{ background-image:url(img/ambiance-2.webp) }