/* ============================================================
   ANOR — site styles · Direction B « Atelier Chaleureux »
   Consumes design-system/tokens.css. Mobile-first.
   Signature: the spoke-wheel mirror. Material language: honey
   wood (warm light panels) + black iron (hairlines + the wheel).
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);background:var(--bg);color:var(--text);
  line-height:var(--leading-body);-webkit-font-smoothing:antialiased;
  padding-top:30px; /* offset fixed demo ribbon */
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit}

.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}

/* consistent keyboard focus across links + disclosure */
a:focus-visible,summary:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:3px}

/* shared section heads ------------------------------------ */
.eyebrow{
  font-weight:var(--weight-semibold);font-size:var(--text-xs);
  text-transform:uppercase;letter-spacing:var(--tracking-kicker);
  color:var(--anor-caramel);margin-bottom:var(--space-4);
}
.eyebrow--light{color:var(--anor-gold)}
.sec__h2{
  font-family:var(--font-display);font-weight:var(--weight-display);
  font-size:var(--text-2xl);line-height:var(--leading-tight);
  letter-spacing:var(--tracking-tight);color:var(--bark-800);
}
.sec__lead{color:var(--text-muted);font-size:var(--text-md);margin-top:var(--space-3);max-width:48ch}

.btn-lg{font-size:var(--text-base);padding:0.95em 1.7em;border-radius:var(--radius-md)}

/* ============ Demo ribbon ============ */
.demo-ribbon{
  position:fixed;top:0;left:0;right:0;height:30px;z-index:200;
  display:flex;align-items:center;justify-content:center;
  background:var(--ink-900);color:var(--anor-gold);
  font-size:var(--text-xs);letter-spacing:var(--tracking-wide);
}
.demo-ribbon span{opacity:.9}

/* ============ Nav ============ */
.nav{position:sticky;top:30px;z-index:100;background:transparent;transition:background var(--dur-base) var(--ease-soft),box-shadow var(--dur-base) var(--ease-soft)}
.nav.is-scrolled{background:color-mix(in srgb,var(--cream-50) 88%,transparent);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--border)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);height:72px}
.brand{display:flex;align-items:center;gap:var(--space-3);text-decoration:none}
.brand__mark{width:38px;height:38px;color:var(--anor-caramel);flex:none}
.brand__wm{font-family:var(--font-display);font-weight:600;font-size:1.5rem;line-height:.85;color:var(--bark-800)}
.brand__wm small{display:block;font-family:var(--font-body);font-weight:600;font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--anor-caramel);margin-top:4px}
.nav__links{display:none;gap:var(--space-6)}
.nav__links a{text-decoration:none;font-size:var(--text-sm);font-weight:500;color:var(--bark-700);transition:color var(--dur-fast)}
.nav__links a:hover{color:var(--anor-caramel)}
.nav__cta{display:none}

/* ============ Hero ============ */
.hero{position:relative;padding:var(--space-8) 0 var(--space-7);
  background:radial-gradient(120% 80% at 78% -8%,rgba(224,176,90,.30),transparent 56%),
             linear-gradient(180deg,var(--cream-100),var(--cream-50));
}
.hero__inner{display:flex;flex-direction:column-reverse;gap:var(--space-6);align-items:flex-start}
.hero__copy{width:100%}
.hero__h1{margin:var(--space-2) 0 var(--space-4)}
.hero__name{display:block;font-family:var(--font-display);font-weight:600;
  font-size:clamp(3.4rem,16vw,6rem);line-height:.9;letter-spacing:-.02em;color:var(--bark-800)}
.hero__sub{display:block;font-family:var(--font-display);font-weight:500;font-style:italic;
  font-size:clamp(1.15rem,5vw,1.6rem);color:var(--anor-caramel);margin-top:var(--space-2)}
.hero__lead{font-size:var(--text-md);color:var(--text-muted);max-width:40ch;margin-bottom:var(--space-5)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-5)}
.hero__trust{font-size:var(--text-sm);color:var(--bark-700)}
.hero__trust strong{color:var(--bark-800)}
.stars{color:var(--anor-gold)}

.hero__mirror{width:100%;display:flex;justify-content:center}
.mirror{width:min(70vw,260px);height:auto;filter:drop-shadow(0 18px 30px rgba(51,39,26,.18))}

/* mirror draw-in */
.mirror__ring{stroke-dasharray:566;stroke-dashoffset:566;animation:draw 1.2s var(--ease-out) .15s forwards}
.mirror__glass{transform-origin:center;opacity:0;animation:glassIn .9s var(--ease-out) .1s forwards}
.mirror__spokes,.mirror__inner{opacity:0;animation:fadeIn .7s var(--ease-out) .55s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes glassIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@keyframes fadeIn{to{opacity:1}}

/* ============ Iron divider ============ */
.divider{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--space-4);
  max-width:var(--container);margin:0 auto;padding:var(--space-6) var(--gutter)}
.divider::before,.divider::after{content:"";height:1px;background:var(--divider)}
.divider svg{width:28px;height:28px;color:var(--sand-400)}

/* ============ Atelier / savoir-faire (warm light wood panel) ============ */
.atelier{
  background-color:var(--cream-100);
  background-image:
    repeating-linear-gradient(90deg,rgba(120,80,35,.05) 0 1px,transparent 1px 9px),
    repeating-linear-gradient(0deg,rgba(120,80,35,.045) 0 1px,transparent 1px 64px),
    linear-gradient(180deg,var(--cream-200),var(--cream-100));
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:var(--section-y) 0;
}
.atelier__h2{font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.9rem,5.5vw,3rem);line-height:1.05;color:var(--bark-800);
  letter-spacing:var(--tracking-tight);max-width:16ch;margin:var(--space-2) 0 var(--space-6)}
.atelier__cols{display:grid;gap:var(--space-5);max-width:var(--container-text)}
.atelier__cols p{font-size:var(--text-md);color:var(--bark-700)}
.atelier__cols p:first-child{font-family:var(--font-display);font-weight:400;font-size:var(--text-lg);color:var(--bark-800)}

/* ============ Prestations ============ */
.prestations{padding:var(--section-y) 0}
.price-list{list-style:none;margin:var(--space-6) 0 var(--space-5);max-width:640px}
.price{display:flex;align-items:baseline;gap:var(--space-3);padding:var(--space-4) 0;border-bottom:1px solid var(--border)}
.price__name{font-size:var(--text-md);color:var(--bark-800)}
.price__dots{flex:1;border-bottom:1px dotted var(--sand-400);transform:translateY(-3px)}
.price__amt{font-family:var(--font-display);font-weight:600;font-size:var(--text-lg);color:var(--anor-caramel);white-space:nowrap}
.price__amt--soft{font-family:var(--font-body);font-weight:500;font-size:var(--text-sm);color:var(--text-muted)}
.cash-note{font-size:var(--text-sm);color:var(--text-muted);max-width:52ch}
.cash-note strong{color:var(--bark-800)}

/* ============ Avis ============ */
.avis{padding:var(--section-y) 0;background:var(--cream-100);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.avis__grid{display:grid;gap:var(--space-5);margin-top:var(--space-7)}
.quote{position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-sm)}
.quote__mark{position:absolute;top:var(--space-5);right:var(--space-5);width:30px;height:30px;color:var(--sand-300)}
.quote blockquote{font-family:var(--font-display);font-weight:400;font-size:var(--text-md);
  line-height:1.45;color:var(--bark-800);margin-bottom:var(--space-4)}
.quote figcaption{font-size:var(--text-sm);font-weight:600;color:var(--anor-caramel)}
.quote figcaption span{display:block;font-weight:400;color:var(--text-muted);margin-top:2px}

/* ============ FAQ ============ */
.faq{padding:var(--section-y) 0}
.faq__list{margin-top:var(--space-6);max-width:720px;border-top:1px solid var(--border)}
.faq__item{border-bottom:1px solid var(--border)}
.faq__item summary{cursor:pointer;list-style:none;padding:var(--space-4) 0;
  font-family:var(--font-display);font-weight:500;font-size:var(--text-lg);color:var(--bark-800);
  display:flex;justify-content:space-between;align-items:center;gap:var(--space-4)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";font-family:var(--font-body);font-weight:400;color:var(--anor-caramel);font-size:1.4em;transition:transform var(--dur-base)}
.faq__item[open] summary::after{transform:rotate(45deg)}
.faq__item p{padding:0 0 var(--space-5);color:var(--text-muted);max-width:60ch}

/* ============ Réservation (dark crescendo) ============ */
.reserve{background:var(--ink-900);color:var(--text-on-dark);padding:var(--space-9) 0;position:relative;overflow:hidden}
.reserve__inner{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center}
.reserve__mark{width:64px;height:64px;color:var(--anor-gold);margin-bottom:var(--space-4)}
.reserve__h2{font-family:var(--font-display);font-weight:600;font-size:clamp(2rem,6vw,3.2rem);
  color:var(--cream-50);line-height:1.05;margin-bottom:var(--space-3)}
.reserve__lead{color:var(--sand-300);font-size:var(--text-md);margin-bottom:var(--space-6);max-width:38ch}
.reserve__cta{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center}
.reserve .reserve__call{color:var(--cream-100);border-color:var(--bark-600)}
.reserve .reserve__call:hover{background:rgba(255,255,255,.06)}

/* ============ Infos ============ */
.infos{padding:var(--section-y) 0}
.infos__inner{display:grid;gap:var(--space-7)}
.infos__dl{margin-top:var(--space-6)}
.infos__dl dt{font-weight:var(--weight-semibold);font-size:var(--text-xs);text-transform:uppercase;
  letter-spacing:.14em;color:var(--anor-caramel);margin-top:var(--space-5)}
.infos__dl dt:first-child{margin-top:0}
.infos__dl dd{font-size:var(--text-md);color:var(--bark-800);margin-top:var(--space-2)}
.infos__dl a{color:var(--anor-caramel);text-decoration:underline;text-underline-offset:3px}
.hours{border-collapse:collapse;width:100%;max-width:340px}
.hours th{text-align:left;font-weight:400;color:var(--bark-700);padding:var(--space-2) 0}
.hours td{text-align:right;font-family:var(--font-display);font-weight:500;color:var(--bark-800);padding:var(--space-2) 0}

.mapcard{background:
    radial-gradient(120% 90% at 30% 10%,rgba(224,176,90,.25),transparent 60%),
    var(--cream-200);
  border:1px solid var(--border-strong);border-radius:var(--radius-lg);
  padding:var(--space-7) var(--space-6);text-align:center;box-shadow:var(--shadow-sm)}
.mapcard__mark{width:54px;height:54px;color:var(--anor-caramel);margin:0 auto var(--space-4)}
.mapcard__addr{font-family:var(--font-display);font-weight:600;font-size:var(--text-lg);color:var(--bark-800);margin-bottom:var(--space-5)}
.mapcard__addr span{display:block;font-family:var(--font-body);font-weight:400;font-size:var(--text-sm);color:var(--text-muted);margin-top:4px}
.mapcard__btns{display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap}

/* ============ Footer ============ */
.footer{position:relative;background:var(--ink-900);color:var(--text-on-dark);
  padding:var(--space-8) 0 var(--space-6);overflow:hidden}
.footer__watermark{position:absolute;right:-60px;bottom:-60px;width:280px;height:280px;color:var(--cream-100);opacity:.05}
.footer__inner{position:relative;display:flex;flex-wrap:wrap;gap:var(--space-6);justify-content:space-between}
.footer__wm{font-family:var(--font-display);font-weight:600;font-size:2rem;color:var(--cream-50)}
.footer__brand p{color:var(--sand-300);font-size:var(--text-sm);line-height:1.7;margin-top:var(--space-2)}
.footer__brand a{color:var(--anor-gold)}
.footer__social{display:flex;gap:var(--space-4);align-items:flex-start}
.footer__social a{color:var(--cream-100);font-size:var(--text-sm);text-decoration:underline;text-underline-offset:3px}
.footer__credit{position:relative;color:#A2937B;font-size:var(--text-xs);
  margin-top:var(--space-7);padding-top:var(--space-5);border-top:1px solid rgba(255,255,255,.08);
  max-width:var(--container);margin-left:auto;margin-right:auto;padding-left:var(--gutter);padding-right:var(--gutter)}

/* ============ Sticky mobile CTA ============ */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:150;
  display:flex;gap:var(--space-2);padding:var(--space-3);
  background:color-mix(in srgb,var(--cream-50) 92%,transparent);backdrop-filter:blur(10px);
  box-shadow:0 -2px 16px rgba(51,39,26,.12);
  transform:translateY(120%);transition:transform var(--dur-base) var(--ease-out);
  opacity:0;pointer-events:none}
.sticky-cta.is-visible{transform:translateY(0);opacity:1;pointer-events:auto}
.sticky-cta .ds-btn{flex:1;justify-content:center;min-height:48px}
.sticky-cta__call{flex:0 0 38%!important}

/* ============ Reveal-on-scroll (gated behind .js → no-JS shows all) ============ */
.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.js [data-reveal].is-visible{opacity:1;transform:none}

/* ============ Desktop ============ */
@media(min-width:760px){
  .infos__inner{grid-template-columns:1fr 1fr;align-items:center;gap:var(--space-8)}
  .avis__grid{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:980px){
  .nav__links{display:flex}
  .nav__cta{display:inline-flex}
  .hero{padding:var(--space-10) 0 var(--space-9)}
  .hero__inner{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--space-8)}
  .hero__copy{width:56%}
  .hero__mirror{width:40%}
  .mirror{width:min(34vw,420px)}
  .sticky-cta{display:none}
  .atelier__cols{grid-template-columns:1fr 1fr;gap:var(--space-7)}
  .atelier__cols p:first-child{grid-column:1 / -1;max-width:22ch}
}

/* ============ Reduced motion ============ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mirror *{animation:none!important;opacity:1!important;stroke-dashoffset:0!important;transform:none!important}
  .js [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  .sticky-cta{transition:none!important}
}