/* Polices sobres */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Playfair+Display:wght@700&display=swap');

/* Thème (magenta / rose poudré) */
:root{
  --bg:#0f1220;
  --bg-soft:#15182a;
  --text:#e7e7ee;
  --muted:#a8a8b3;
  --brand:#d946ef;     /* magenta */
  --brand-2:#7c3aed;   /* violet */
  --accent:#fb7185;    /* rose corail */
  --radius:20px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

/* Reset + base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  font:16px/1.6 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(217,70,239,.18), transparent 60%),
    radial-gradient(900px 600px at 90% 120%, rgba(124,58,237,.18), transparent 60%),
    linear-gradient(160deg, #0b0f1a, #121528, #0b0f1a);
  background-size: 200% 200%;
  animation: bgMove 30s ease-in-out infinite alternate;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.wrap{max-width:1100px; margin:0 auto; padding:0 1rem}
.skip{position:absolute; left:-999px}
.skip:focus{left:1rem; top:1rem; background:#000; color:#fff; padding:.5rem .75rem; border-radius:.5rem}

/* Titres */
.h1{
  font: 800 clamp(1.8rem, 2.2vw + 1rem, 3rem) "Playfair Display", serif;
  letter-spacing:.3px;
}
.h2{
  font: 800 clamp(1.2rem, 1vw + .8rem, 2rem) "Inter", sans-serif;
  margin:0 0 1rem;
}
.accent{
  background:linear-gradient(90deg, var(--brand), var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent
}

/* Header / nav */
.site-header{
  position:sticky; top:0; z-index:20;
  backdrop-filter:saturate(130%) blur(10px);
  background:linear-gradient(90deg, rgba(217,70,239,.08), rgba(124,58,237,.08));
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:1rem; height:74px}
.brand{display:flex; align-items:center; gap:.7rem; font-weight:800}
.logo-dot{
  width:14px; height:14px; border-radius:999px;
  background:radial-gradient(circle at 30% 30%, #fff, var(--brand) 40%, rgba(217,70,239,0) 70%);
  box-shadow:0 0 14px var(--brand);
  animation:pulse 3s ease-in-out infinite;
}
.brand-text{letter-spacing:.4px}
.nav-toggle{
  display:none; padding:.55rem .8rem; border-radius:999px; border:1px solid rgba(255,255,255,.15);
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)); color:var(--text)
}
.menu{display:flex; gap:.6rem}
.menu a{
  padding:.55rem .9rem; border-radius:999px; font-weight:600;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), var(--shadow);
}
.menu a:hover{border-color:rgba(255,255,255,.20); transform:translateY(-1px)}
.menu a[aria-disabled="true"]{opacity:.8; cursor:not-allowed}

/* Hero */
.hero{padding: clamp(2rem, 6vw, 5rem) 0}
.hero-grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:2rem; align-items:center}
.hero-copy .lead{color:#f2f2f7; opacity:.95; margin:.75rem 0 1.2rem}
.cta-row{display:flex; gap:.8rem; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:700; border-radius:12px; padding:.7rem 1rem}
.btn.primary{
  background:linear-gradient(90deg, var(--brand), var(--brand-2));
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 10px 25px rgba(217,70,239,.25)
}
.btn.primary:hover{filter:saturate(110%) brightness(1.05)}
.btn.ghost{
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05))
}
.hero-portrait{
  justify-self:end; position:relative; isolation:isolate;
  transform: translateY(10px); opacity:0; animation:fadeInUp .9s .35s ease-out forwards;
}
.hero-portrait img{
  width:min(420px, 80vw); height:auto; border-radius:28px;
  -webkit-mask-image: radial-gradient(circle at 65% 35%, #000 62%, transparent 67%);
          mask-image: radial-gradient(circle at 65% 35%, #000 62%, transparent 67%);
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 25px 60px rgba(217,70,239,.25), 0 10px 25px rgba(124,58,237,.25);
  animation: float 6s ease-in-out infinite;
}

/* Sections */
.section{padding: clamp(2rem, 5vw, 4rem) 0}
.section.muted{background: rgba(255,255,255,.02)}
.cards{
  list-style:none; margin:1rem 0 0; padding:0;
  display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem
}
.card{
  padding:1.1rem 1rem; border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.12); box-shadow: var(--shadow);
}
.card h3{margin:.2rem 0 .4rem; font-weight:700}
.about p{max-width:60ch}

/* Contact */
.contact{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; align-items:center
}
.contact-item{
  display:flex; align-items:center; gap:.6rem;
  padding:.9rem 1rem; border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03))
}
.icon{font-size:1.1rem}
.contact-item a{ color:inherit; text-decoration:none }
.contact-item a:hover{ text-decoration:underline }

/* --- Avis Google (version clean, pleine largeur) --- */
.reviews{
  margin-top: 1rem;
  padding: 0;
  background: transparent;
}
.reviews-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.review-box{
  grid-column: 1 / -1;                  /* occupe toute la ligne */
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
  color: var(--text);
}
.review-text{ font-weight:700; letter-spacing:.2px }
.review-box .btn{ white-space:nowrap }

/* Infos (tarifs + horaires) */
.infos-grid{
  display:grid; grid-template-columns: 1.2fr .8fr; gap:1rem;
}
.panel{
  padding:1.1rem 1rem; border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
}
.panel-title{margin:.2rem 0 1rem; font-weight:800}

.price-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:1rem;
}
.price-col{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10); border-radius:14px; padding:.8rem
}
.price-cat{margin:.1rem 0 .6rem; font-weight:800; letter-spacing:.2px}
.price-list{margin:0; padding:0}
.price-row{
  display:flex; justify-content:space-between; gap:.8rem;
  padding:.45rem .5rem; border-bottom:1px dashed rgba(255,255,255,.12)
}
.price-row:last-child{border-bottom:none}
.price-row dt{margin:0}
.price-row dd{margin:0; font-weight:700}

.note{color:var(--muted); font-size:.95rem; margin:.8rem 0 0}

.hours{
  list-style:none; margin:0; padding:0; border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.hours li{
  display:flex; justify-content:space-between; gap:.8rem;
  padding:.55rem .75rem; border-bottom:1px solid rgba(255,255,255,.06)
}
.hours li:last-child{border-bottom:none}
.hours .closed span:last-child{color:#fca5a5}
.hours .closed span:first-child{opacity:.9; position:relative}
.hours .closed span:first-child::after{
  content:""; position:absolute; left:0; right:0; top:55%; height:2px;
  background:linear-gradient(90deg, var(--brand), var(--brand-2)); opacity:.35; transform:translateY(-50%);
}

/* Footer */
footer{
  border-top:1px solid rgba(255,255,255,.08);
  background:linear-gradient(90deg, rgba(217,70,239,.07), rgba(124,58,237,.07))
}
.foot{
  display:flex; align-items:center; justify-content:space-between;
  min-height:70px; color:var(--muted); gap:1rem;
}
.foot a{color:inherit; text-decoration:none}
.foot a:hover{text-decoration:underline}

/* Animations */
@keyframes bgMove { 0%{background-position:0% 0%} 100%{background-position:100% 100%} }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }
@keyframes fadeInUp { to{opacity:1; transform:translateY(0)} }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

/* Responsive */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; text-align:center}
  .hero-portrait{justify-self:center}
  .cards{grid-template-columns:1fr 1fr}
  .contact{grid-template-columns:1fr}
  .reviews-grid{grid-template-columns:1fr}
  .review-box{grid-column:auto; flex-direction:column; text-align:center}
  .infos-grid{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr}
}
@media (max-width:600px){
  .foot{flex-direction:column; text-align:center}
}
@media (max-width:560px){
  .menu{display:none}
  .nav-toggle{display:inline-block}
  .menu.open{
    display:flex; position:absolute; top:74px; right:1rem;
    flex-direction:column; gap:.5rem; padding:.7rem;
    background:rgba(10,12,24,.9); border:1px solid rgba(255,255,255,.12); border-radius:14px
  }
  .cards{grid-template-columns:1fr}
}

/* Accessibilité: réduire les animations si demandé */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}