/* ==========================================================
   MAISON CILLA — DÉMO SITE VITRINE SALON DE COIFFURE
   Identité : élégante, éditoriale, blush / charbon / or
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Jost:wght@400;500;600;700&display=swap');

:root{
    --bg: #fbf7f5;
    --bg-alt: #f3e3de;
    --ink: #211c1a;
    --muted: #7a6f6a;
    --line: #e7d8d2;
    --rose: #a8536b;
    --rose-dark: #833e50;
    --gold: #b9925a;
    --charcoal: #211c1a;
    --radius: 2px;
    --maxw: 1160px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
    font-family:'Jost', system-ui, sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height:1.7;
}
h1,h2,h3,h4{ font-family:'Cormorant Garamond', serif; font-weight:600; line-height:1.1; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
.container{ width:min(var(--maxw), calc(100% - 2.5rem)); margin:0 auto; }
section{ padding:6rem 0; }
.eyebrow{
    display:block; font-size:.76rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase;
    color: var(--rose-dark); margin-bottom:1.1rem;
}
.muted{ color:var(--muted); }

.demo-bar{ background:#4f46e5; color:#fff; font-size:.82rem; font-weight:600; text-align:center; padding:.55rem 1rem; }
.demo-bar a{ text-decoration:underline; text-underline-offset:2px; }

/* ---------- header ---------- */
.site-header{ position:sticky; top:0; z-index:50; background:rgba(251,247,245,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:1.3rem 0; }
.brand{ font-family:'Cormorant Garamond'; font-weight:600; font-size:1.5rem; letter-spacing:.03em; }
.nav__menu{ display:flex; gap:2.2rem; }
.nav__menu a{ font-size:.82rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--charcoal); }
.nav__menu a:hover{ color:var(--rose-dark); }
.nav__actions{ display:flex; align-items:center; gap:1rem; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.85rem 1.6rem; font-weight:600; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; border:1px solid transparent; cursor:pointer; }
.btn--primary{ background:var(--rose); color:#fff; }
.btn--primary:hover{ background:var(--rose-dark); }
.btn--ghost{ border-color:var(--charcoal); color:var(--charcoal); }
.btn--ghost:hover{ background:var(--charcoal); color:#fff; }
.menu-toggle{ display:none; background:none; border:1px solid var(--line); padding:.5rem; color:var(--ink); }

/* ---------- hero (signature : cadre miroir ovale) ---------- */
.hero{ padding-top:4.5rem; }
.hero__grid{ display:grid; grid-template-columns:1fr .95fr; gap:4rem; align-items:center; }
.hero h1{ font-size:clamp(2.4rem, 4.2vw, 3.6rem); margin-bottom:1.2rem; }
.hero h1 em{ font-style:italic; color:var(--rose); }
.hero__lead{ color:var(--muted); font-size:1.05rem; max-width:460px; margin-bottom:2rem; }
.hero__ctas{ display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:1.8rem; }
.hero__meta{ display:flex; gap:2rem; font-size:.82rem; color:var(--muted); }
.hero__meta strong{ display:block; color:var(--ink); font-family:'Cormorant Garamond'; font-size:1.3rem; }

.hero__media{ position:relative; display:flex; justify-content:center; }
.mirror{
    width:min(100%, 420px); aspect-ratio:3/4; border-radius:50% 50% 46% 46% / 55% 55% 45% 45%;
    overflow:hidden; border:10px solid var(--gold); box-shadow:0 30px 60px rgba(33,28,26,.22);
}
.mirror img{ width:100%; height:100%; object-fit:cover; }

/* ---------- bande chiffres ---------- */
.stat-strip{ background:var(--charcoal); color:#fff; }
.stat-strip .container{ display:grid; grid-template-columns:repeat(4,1fr); }
.stat{ padding:2rem 1rem; text-align:center; border-right:1px solid rgba(255,255,255,.12); }
.stat:last-child{ border-right:none; }
.stat strong{ display:block; font-family:'Cormorant Garamond'; font-size:2rem; color:var(--gold); }
.stat span{ font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; opacity:.8; }

/* ---------- section header ---------- */
.section__head{ max-width:620px; margin-bottom:3.2rem; }
.section__head h2{ font-size:clamp(1.9rem, 3vw, 2.5rem); }
.section__head p{ color:var(--muted); margin-top:.9rem; }
.section__head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* ---------- prestations ---------- */
.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line); }
.service-row{ padding:1.6rem 0; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:.5rem; padding-right:1.5rem; }
.service-row h3{ font-size:1.35rem; }
.service-row p{ color:var(--muted); font-size:.92rem; }
.service-row .price{ font-family:'Cormorant Garamond'; color:var(--rose-dark); font-size:1.1rem; margin-top:.3rem; }

/* ---------- galerie ---------- */
.bg-alt{ background:var(--bg-alt); }
.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.gallery-item{ position:relative; overflow:hidden; aspect-ratio:4/5; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.gallery-item:hover img{ transform:scale(1.06); }
.gallery-item span{ position:absolute; left:0; right:0; bottom:0; padding:.9rem 1rem .8rem; background:linear-gradient(0deg, rgba(33,28,26,.75), transparent); color:#fff; font-size:.82rem; font-weight:600; letter-spacing:.03em; }

/* ---------- avis ---------- */
.reviews-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.review-card{ padding:1.8rem; border:1px solid var(--line); background:#fff; }
.stars{ color:var(--gold); letter-spacing:.15em; margin-bottom:.9rem; }
.review-card p{ font-size:.96rem; margin-bottom:1.1rem; font-style:italic; }
.review-card footer{ font-size:.8rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }

/* ---------- cta ---------- */
.cta-band{ background:var(--rose); color:#fff; text-align:center; }
.cta-band h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); color:#fff; max-width:620px; margin:0 auto 1.5rem; }
.cta-band .btn--primary{ background:#fff; color:var(--rose-dark); }
.cta-band .btn--primary:hover{ background:var(--bg-alt); }

/* ---------- contact ---------- */
.contact__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:3.5rem; }
.contact-cards{ display:grid; gap:1rem; margin-top:1.8rem; }
.contact-card{ display:flex; gap:1rem; align-items:center; border:1px solid var(--line); padding:1rem 1.2rem; }
.contact-card .icon{ width:38px; height:38px; background:var(--bg-alt); color:var(--rose-dark); display:grid; place-items:center; flex:none; }
.contact-card strong{ display:block; font-size:.95rem; }
.contact-card span{ font-size:.82rem; color:var(--muted); }
.contact-form{ border:1px solid var(--line); background:#fff; padding:2.2rem; display:grid; gap:1.1rem; }
.contact-form label{ display:grid; gap:.5rem; font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--charcoal); }
.contact-form input, .contact-form select, .contact-form textarea{ background:var(--bg); border:1px solid var(--line); padding:.75rem .9rem; color:var(--ink); font-family:inherit; font-size:.95rem; }
.contact-form textarea{ resize:vertical; }
.form-note{ font-size:.76rem; color:var(--muted); }

/* ---------- footer ---------- */
.footer{ padding:3rem 0 2.2rem; border-top:1px solid var(--line); }
.footer__grid{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1.5rem; align-items:center; }
.footer small{ color:var(--muted); font-size:.8rem; }
.footer__links{ display:flex; gap:1.6rem; font-size:.85rem; color:var(--muted); }

@media (max-width:900px){
    .hero__grid, .contact__grid{ grid-template-columns:1fr; }
    .services-grid{ grid-template-columns:1fr 1fr; }
    .gallery-grid{ grid-template-columns:1fr 1fr; }
    .reviews-grid{ grid-template-columns:1fr; }
    .stat-strip .container{ grid-template-columns:1fr 1fr; }
    .stat{ border-bottom:1px solid rgba(255,255,255,.12); }
    .nav__menu{ display:none; }
    .menu-toggle{ display:inline-grid; }
}
@media (max-width:600px){
    section{ padding:4rem 0; }
    .services-grid, .gallery-grid{ grid-template-columns:1fr; }
    .mirror{ aspect-ratio:1/1; }
}