/* ===========================================================
   Studio Sahina — feuille de style partagée
   Utilisée par toutes les pages (accueil + prestations)
   =========================================================== */

:root{
    --cream:#FBF6F0;
    --nude:#F3E6D8;
    --beige:#EADACB;
    --gold:#C6A15B;
    --gold-dark:#A9823F;
    --sage:#93A583;
    --sage-dark:#748563;
    --charcoal:#2E2620;
    --taupe:#7C6C59;
    --magenta:#D9439A;
    --magenta-dark:#B22C7D;
}

*{ font-family:'Poppins', sans-serif; }
h1,h2,h3,.heading{ font-family:'Playfair Display', serif; }
.logo-script{ font-family:'Dancing Script', cursive; }

html{ scroll-behavior:smooth; }
html, body{ max-width:100%; overflow-x:hidden; }
@supports (overflow-x:clip){ html, body{ overflow-x:clip; } }
body{ background-color:var(--cream); color:var(--charcoal); }
img{ max-width:100%; }
.cta-gold, .cta-ghost{ max-width:100%; white-space:normal; text-align:center; }

.bg-cream{ background-color:var(--cream); }
.bg-nude{ background-color:var(--nude); }
.bg-beige{ background-color:var(--beige); }
.bg-charcoal{ background-color:var(--charcoal); }
.text-gold{ color:var(--gold); }
.text-taupe{ color:var(--taupe); }
.text-charcoal{ color:var(--charcoal); }
.text-magenta{ color:var(--magenta); }
.border-gold{ border-color:var(--gold); }

/* ---------- HEADER ---------- */
header{
    transition:all .45s cubic-bezier(.4,0,.2,1);
    background:rgba(251,246,240,0);
    padding-top:1.75rem; padding-bottom:1.75rem;
}
header.scrolled{
    background:rgba(251,246,240,.85);
    backdrop-filter:blur(16px) saturate(160%);
    -webkit-backdrop-filter:blur(16px) saturate(160%);
    box-shadow:0 10px 40px rgba(46,38,32,.08);
    padding-top:.85rem; padding-bottom:.85rem;
}
/* Over a dark hero image: light text. Once scrolled, the header gets its own
   light glass background, so text switches to dark regardless of what's behind it. */
header .nav-item, header .logo-script, header #burger{ color:#fff; transition:color .3s ease; }
header .logo-sub{ color:rgba(255,255,255,.75); transition:color .3s ease; }
header.scrolled .nav-item, header.scrolled .logo-script, header.scrolled #burger{ color:var(--charcoal); }
header.scrolled .logo-sub{ color:var(--taupe); }
/* Pages without a dark hero (sub-pages) force the "scrolled" look from the start */
header.static-light{ background:rgba(251,246,240,.92); backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%); box-shadow:0 6px 24px rgba(46,38,32,.06); }
header.static-light .nav-item, header.static-light .logo-script, header.static-light #burger{ color:var(--charcoal); }
header.static-light .logo-sub{ color:var(--taupe); }

.nav-item{ position:relative; font-weight:500; transition:color .3s ease; }
.nav-item::after{
    content:''; position:absolute; width:0; height:2px; left:0; bottom:-6px;
    background:linear-gradient(90deg,var(--gold),var(--magenta));
    transition:width .35s cubic-bezier(.34,1.56,.64,1);
}
.nav-item:hover::after{ width:100%; }
.nav-item:hover{ color:var(--gold-dark); }

/* ---------- Prestations dropdown ---------- */
.has-dropdown{ position:relative; }
.dropdown-panel{
    position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px);
    min-width:260px; background:#fff; border-radius:1rem; padding:.6rem;
    box-shadow:0 25px 50px -12px rgba(46,38,32,.25);
    opacity:0; visibility:hidden; transition:all .3s ease; z-index:60;
}
.has-dropdown:hover .dropdown-panel{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.dropdown-panel a{
    display:flex; align-items:center; gap:.65rem; padding:.65rem .85rem; border-radius:.6rem;
    color:var(--charcoal); font-size:.85rem; font-weight:500; transition:background .2s ease;
}
.dropdown-panel a:hover{ background:var(--nude); color:var(--gold-dark); }

/* ---------- CTA / MAGNETIC ---------- */
.cta-gold{
    position:relative; display:inline-flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,var(--gold) 0%, var(--gold-dark) 100%);
    color:#fff; font-weight:600; border:none; cursor:pointer; text-decoration:none;
    overflow:hidden; isolation:isolate;
}
.cta-gold::before{
    content:''; position:absolute; inset:0;
    background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
    transform:translateX(-120%); transition:transform .7s ease; z-index:1;
}
.cta-gold:hover::before{ transform:translateX(120%); }
.cta-gold span{ position:relative; z-index:2; display:inline-flex; align-items:center; gap:.5rem; }

.cta-ghost{
    display:inline-flex; align-items:center; justify-content:center;
    border:1.5px solid var(--charcoal); color:var(--charcoal); font-weight:500;
    transition:background .35s ease, color .35s ease, border-color .35s ease;
    text-decoration:none;
}
.cta-ghost:hover{ background:var(--charcoal); color:#fff; }
.hero .cta-ghost{ border-color:#fff; color:#fff; }
.hero .cta-ghost:hover{ background:#fff; color:var(--charcoal); }

@keyframes pulseGlow{
    0%,100%{ box-shadow:0 8px 25px rgba(198,161,91,.35); }
    50%{ box-shadow:0 8px 32px rgba(198,161,91,.5); }
}
/* A few gentle pulses to draw the eye on load, then it settles — not a forever-loop */
.cta-pulse{ animation:pulseGlow 3.2s ease-in-out 3; box-shadow:0 8px 25px rgba(198,161,91,.35); }

.magnetic{ will-change:transform; }

/* ---------- HERO ---------- */
.hero{ position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden; }
.hero.hero-sub{ min-height:56vh; padding-top:6rem; padding-bottom:4rem; }
.hero-bg{
    position:absolute; inset:-8% -8% -8% -8%; z-index:0;
    background-size:cover; background-position:center 30%;
    will-change:transform;
}
.hero-overlay{
    position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(20,12,16,.55) 0%, rgba(24,14,20,.72) 55%, rgba(24,14,20,.88) 100%);
}
.hero-glow{
    position:absolute; z-index:1; border-radius:9999px; filter:blur(70px); opacity:.35;
    background:radial-gradient(circle, var(--magenta), transparent 70%);
}

/* ---------- Breadcrumb (sub-pages) ---------- */
.breadcrumb{ font-size:.8rem; letter-spacing:.03em; color:rgba(255,255,255,.75); }
.breadcrumb a{ color:rgba(255,255,255,.75); transition:color .25s ease; }
.breadcrumb a:hover{ color:#fff; }
.breadcrumb .sep{ margin:0 .5rem; opacity:.6; }

/* ---------- SERVICE CARDS ---------- */
.service-card{
    position:relative; overflow:hidden; transition:transform .5s cubic-bezier(.34,1.56,.64,1), box-shadow .5s ease;
}
.service-card:hover{ transform:translateY(-10px); box-shadow:0 25px 50px -12px rgba(46,38,32,.22); }
.service-image{ position:relative; aspect-ratio:4/5; overflow:hidden; }
.service-image img{ object-position:center 35%; }
.service-image img{ width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.16,1,.3,1); }
.service-card:hover .service-image img{ transform:scale(1.09); }
.service-image::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,.55) 100%);
    opacity:.5; transition:opacity .5s ease;
}
.service-card:hover .service-image::after{ opacity:.75; }
a.service-image{ cursor:pointer; }
.service-price{
    position:absolute; top:1rem; left:1rem; z-index:2;
    padding:.4rem .85rem; border-radius:9999px; background:rgba(255,255,255,.92); backdrop-filter:blur(6px);
    color:var(--gold-dark); font-size:.72rem; font-weight:600; letter-spacing:.03em; box-shadow:0 4px 14px rgba(46,38,32,.12);
}
.service-discover{
    position:absolute; right:1rem; bottom:1.25rem; z-index:2;
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.55rem 1.1rem; border-radius:9999px;
    background:linear-gradient(135deg,var(--gold),var(--gold-dark)); color:#fff;
    font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
    box-shadow:0 8px 20px rgba(46,38,32,.25);
    opacity:0; transform:translateY(10px); transition:opacity .4s ease, transform .4s ease;
}
.service-card:hover .service-discover, a.service-image:focus-visible .service-discover{ opacity:1; transform:translateY(0); }
@media (hover:none){ .service-discover{ opacity:1; transform:none; } }
.service-icon{
    position:relative; z-index:3; margin-top:-39px;
    background:linear-gradient(135deg, rgba(198,161,91,.16) 0%, rgba(217,67,154,.12) 100%), #fff;
    border:4px solid #fff; box-shadow:0 10px 25px rgba(46,38,32,.12);
}

.icon-bloom{
    display:inline-flex; align-items:center; justify-content:center; width:78px; height:78px;
    border-radius:9999px; font-size:2.1rem;
    background:linear-gradient(135deg, rgba(198,161,91,.16) 0%, rgba(217,67,154,.12) 100%);
    transition:all .4s ease;
}
.icon-bloom:hover{ transform:scale(1.08) rotate(6deg); box-shadow:0 0 30px rgba(198,161,91,.25); }

.section-title::after{
    content:''; position:absolute; width:90px; height:2px; left:50%; transform:translateX(-50%); bottom:-16px;
    background:linear-gradient(90deg,var(--gold),var(--magenta));
}
.section-title.align-left::after{ left:0; transform:none; }

/* ---------- GALLERY ---------- */
.gallery-item{ position:relative; overflow:hidden; border-radius:1.25rem; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.16,1,.3,1); }
.gallery-item:hover img{ transform:scale(1.07); }
.gallery-caption{
    position:absolute; left:0; right:0; bottom:0; padding:1.25rem;
    background:linear-gradient(0deg, rgba(20,12,16,.82) 0%, transparent 100%);
    color:#fff; font-size:.85rem; font-weight:500; letter-spacing:.02em;
    transform:translateY(8px); opacity:.85; transition:all .4s ease;
}
.gallery-item:hover .gallery-caption{ transform:translateY(0); opacity:1; }

/* ---------- Steps ("Déroulement d'une séance") ---------- */
.step-card{ position:relative; }
.step-number{
    display:inline-flex; align-items:center; justify-content:center;
    width:52px; height:52px; border-radius:9999px; font-family:'Playfair Display',serif;
    font-weight:700; font-size:1.25rem; color:#fff;
    background:linear-gradient(135deg,var(--gold),var(--gold-dark));
    flex-shrink:0;
}
.step-line{ position:absolute; left:26px; top:52px; bottom:-2.5rem; width:2px; background:var(--beige); }
.step-card:last-child .step-line{ display:none; }

/* ---------- Before/After tip cards ---------- */
.tip-card{ border-left:3px solid var(--gold); background:#fff; }
.tip-card.tip-after{ border-left-color:var(--sage); }

/* ---------- Pricing ---------- */
.price-row{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:.9rem 0; border-bottom:1px solid var(--beige); }
.price-row:last-child{ border-bottom:none; }
.price-row .price-name{ font-weight:500; color:var(--charcoal); }
.price-row .price-note{ font-size:.78rem; color:var(--taupe); display:block; margin-top:.15rem; }
.price-row .price-value{ font-family:'Playfair Display',serif; font-weight:700; color:var(--gold-dark); white-space:nowrap; }

/* ---------- Menu cards (soins / massages) ---------- */
.menu-card{ background:#fff; transition:box-shadow .4s ease, transform .4s ease; }
.menu-card:hover{ transform:translateY(-6px); box-shadow:0 20px 40px -14px rgba(46,38,32,.2); }

/* ---------- Skill badges (À propos) ---------- */
.skill-badge{
    display:inline-flex; align-items:center; padding:.45rem 1rem; border-radius:9999px;
    background:var(--nude); color:var(--charcoal); font-size:.78rem; font-weight:500;
}

/* ---------- Review cards ---------- */
.review-card{ background:#fff; transition:transform .4s ease, box-shadow .4s ease; }
.review-card:hover{ transform:translateY(-6px); box-shadow:0 20px 40px -14px rgba(46,38,32,.18); }

/* ---------- Feature check list ---------- */
.check-list li{ position:relative; padding-left:1.75rem; }
.check-list li::before{
    content:'\2713'; position:absolute; left:0; top:.05em; color:var(--gold-dark); font-weight:700;
}

/* Mobile nav */
.mobile-nav{ max-height:0; overflow:hidden; transition:max-height .5s cubic-bezier(.4,0,.2,1); }
.mobile-nav.open{ max-height:640px; }

/* ---------- Responsive hardening (phones & tablets) ---------- */
/* Comfortable touch targets (Apple/Google guidance: ~44px hit area) */
#burger{ padding:.6rem; margin:-.6rem; line-height:1; }
.mobile-nav nav a{ display:block; padding:.45rem 0; }
.dropdown-panel a{ min-height:2.6rem; }

/* Modern dynamic-viewport height, with the vh rule above as fallback for older browsers */
.hero{ min-height:100svh; }
.hero.hero-sub{ min-height:56svh; }

/* Prestations dropdown: never let it run off-screen on narrower tablet widths */
.dropdown-panel{ max-width:calc(100vw - 2rem); }
@media (max-width:900px){
    .dropdown-panel{ left:auto; right:-1rem; transform:translateY(8px); }
    .has-dropdown:hover .dropdown-panel{ transform:translateY(0); }
}

/* Smallest phones (iPhone SE / older Android, ~320-380px): keep header on one line */
.cta-gold{ white-space:nowrap; }
@media (max-width:380px){
    header .logo-sub{ display:none; }
    header .logo-script{ font-size:1.5rem; }
    header .cta-gold{ padding-left:.9rem; padding-right:.9rem; font-size:.8rem; }
}

/* ===========================================================
   Finitions « premium »
   =========================================================== */
::selection{ background:rgba(198,161,91,.3); color:var(--charcoal); }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:.35rem; }
html{ scrollbar-color:var(--gold) var(--cream); scrollbar-width:thin; }

/* Barre de progression de lecture (injectée par main.js) */
.scroll-progress{
    position:fixed; top:0; left:0; height:3px; width:100%; z-index:70;
    background:linear-gradient(90deg,var(--gold),var(--magenta));
    transform-origin:0 50%; transform:scaleX(0); pointer-events:none;
}

/* Indicateur de défilement du hero */
@keyframes cueBounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(8px); } }
.scroll-cue{ display:inline-flex; flex-direction:column; align-items:center; gap:.5rem; color:rgba(255,255,255,.75); transition:color .3s ease; }
.scroll-cue:hover{ color:#fff; }
.scroll-cue span{ font-size:.65rem; letter-spacing:.3em; text-transform:uppercase; }
.scroll-cue i{ animation:cueBounce 2s ease-in-out infinite; }

/* Bande de confiance sous le hero */
.trust-bar{ background:#fff; border-bottom:1px solid var(--beige); }
.trust-item{ display:flex; align-items:center; gap:.9rem; min-width:0; }
.trust-item > div{ min-width:0; overflow-wrap:break-word; }
.trust-item .trust-icon{
    width:46px; height:46px; flex-shrink:0; border-radius:9999px;
    display:inline-flex; align-items:center; justify-content:center; color:var(--gold-dark);
    background:linear-gradient(135deg, rgba(198,161,91,.16), rgba(217,67,154,.1));
}
.trust-item strong{ display:block; font-family:'Playfair Display',serif; font-size:1.05rem; color:var(--charcoal); line-height:1.2; }
.trust-item small{ font-size:.75rem; color:var(--taupe); }

/* Cartes prestations : bouton « Réserver » en pastille */
.service-card a[href*="lnk.bio"]{
    display:inline-flex; align-items:center; gap:.4rem; padding:.5rem 1.1rem; border-radius:9999px;
    border:1.5px solid var(--gold); color:var(--gold-dark); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
    transition:background .3s ease, color .3s ease, box-shadow .3s ease;
}
.service-card a[href*="lnk.bio"]:hover{
    background:linear-gradient(135deg,var(--gold),var(--gold-dark)); color:#fff; border-color:transparent;
    box-shadow:0 8px 20px rgba(198,161,91,.35);
}
.service-card{ border:1px solid rgba(234,218,203,.7); }
.service-card::after{
    content:''; position:absolute; left:2rem; right:2rem; top:280px; height:2px;
    background:linear-gradient(90deg,var(--gold),var(--magenta));
    transform:scaleX(0); transform-origin:left; transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.service-card:hover::after{ transform:scaleX(1); }

/* Avis clients : guillemet décoratif */
.review-card{ position:relative; overflow:hidden; border:1px solid rgba(234,218,203,.7); }
.review-card::before{
    content:'\201C'; position:absolute; top:-1.5rem; right:1.25rem;
    font-family:'Playfair Display',serif; font-size:9rem; line-height:1; color:var(--gold); opacity:.14; pointer-events:none;
}

/* Bouton itinéraire */
.link-pill{
    display:inline-flex; align-items:center; gap:.45rem; margin-top:.75rem; padding:.45rem 1rem; border-radius:9999px;
    background:var(--nude); color:var(--charcoal); font-size:.8rem; font-weight:600; transition:background .3s ease, color .3s ease;
}
.link-pill:hover{ background:var(--gold); color:#fff; }

/* Pied de page : filet doré */
footer.bg-charcoal{ position:relative; }
footer.bg-charcoal::before{
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg,transparent,var(--gold),var(--magenta),transparent);
}

/* Retour en haut (desktop) */
.to-top{
    position:fixed; right:1.5rem; bottom:1.5rem; z-index:55; width:48px; height:48px; border-radius:9999px;
    display:inline-flex; align-items:center; justify-content:center; color:#fff; border:none; cursor:pointer;
    background:linear-gradient(135deg,var(--gold),var(--gold-dark)); box-shadow:0 10px 25px rgba(46,38,32,.2);
    opacity:0; visibility:hidden; transform:translateY(12px); transition:all .35s ease;
}
.to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.to-top:hover{ box-shadow:0 12px 30px rgba(198,161,91,.45); }

/* Barre de réservation fixe (mobile) */
.mobile-book{
    position:fixed; left:0; right:0; bottom:0; z-index:55; display:none; gap:.75rem;
    padding:.75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px));
    background:rgba(251,246,240,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    box-shadow:0 -8px 30px rgba(46,38,32,.1);
    transform:translateY(110%); transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.mobile-book.show{ transform:translateY(0); }
.mobile-book .mb-call{
    width:48px; flex-shrink:0; border-radius:9999px; border:1.5px solid var(--charcoal);
    display:inline-flex; align-items:center; justify-content:center; color:var(--charcoal);
}
.mobile-book .cta-gold{ flex:1; padding:.85rem 1rem; border-radius:9999px; font-size:.95rem; }
@media (max-width:767px){
    .mobile-book{ display:flex; }
    .to-top{ display:none; }
    footer.bg-charcoal{ padding-bottom:6rem; }
}

@media (prefers-reduced-motion:reduce){
    *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}
@media (max-width:400px){ .trust-item{ flex-direction:column; align-items:flex-start; gap:.5rem; } .trust-item strong{ font-size:.95rem; } }