/* ========================================
   M.A COIFFURE — Stylesheet
   Inspiré de lesbarber.fr
   ======================================== */

/* ===== RESET ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%}
body{
    font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.6;
    overflow-x:hidden;
    /* Subtle noise texture for depth */
    background-image:
        radial-gradient(circle at 20% 0%,rgba(201,162,39,.03) 0%,transparent 40%),
        radial-gradient(circle at 80% 100%,rgba(201,162,39,.02) 0%,transparent 40%);
    background-attachment:fixed;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea{font-family:inherit}

/* ===== VARIABLES ===== */
:root{
    --bg:#0a0a0a;
    --bg-alt:#0f0f0f;
    --bg-card:#161616;
    --bg-card-hover:#1e1e1e;
    --border:#262626;
    --border-light:#333;
    --text:#f5f5f5;
    --text-muted:#888;
    --accent:#c9a227;
    --accent-bright:#e8c34a;
    --accent-glow:rgba(201,162,39,.15);
    --accent-gradient:linear-gradient(135deg,#c9a227 0%,#e8c34a 50%,#c9a227 100%);
    --radius:14px;
    --radius-lg:22px;
    --maxw:1180px;
    --shadow-card:0 4px 20px rgba(0,0,0,.3);
    --shadow-hover:0 12px 40px rgba(0,0,0,.4);
    --transition:cubic-bezier(.22,1,.36,1);
}

/* ===== HEADER ===== */
.header{
    position:fixed;top:0;left:0;right:0;z-index:100;
    background:rgba(10,10,10,.85);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid transparent;
    transition:border-color .3s,background .3s;
}
.header.scrolled{border-bottom-color:var(--border)}
.header-inner{
    max-width:var(--maxw);margin:0 auto;
    display:flex;align-items:center;justify-content:space-between;
    padding:1rem 1.5rem;height:72px;
}
.logo{display:flex;align-items:center;gap:.5rem;font-weight:900;font-size:1.25rem;letter-spacing:-.02em}
.logo-img{height:17px;width:auto;transition:opacity .2s,transform .2s}
.logo:hover .logo-img{opacity:.85;transform:scale(1.02)}
.logo-mark{
    background:var(--accent-gradient);
    background-size:200% 100%;
    animation:shimmer 3s linear infinite;
    padding:.15rem .45rem;border-radius:6px;font-size:.9rem;
    box-shadow:0 2px 12px rgba(201,162,39,.3);
}
.logo-text{color:var(--text)}
.nav{display:flex;align-items:center;gap:2rem}
.nav a{font-size:.875rem;font-weight:500;color:var(--text-muted);transition:color .2s;position:relative}
.nav a:hover{color:var(--text)}
.nav a.nav-cta{
    background:var(--accent);color:#0a0a0a;
    padding:.5rem 1.2rem;border-radius:8px;font-weight:700;
}
.nav a.nav-cta:hover{background:var(--accent-bright);color:#0a0a0a}
.burger{display:none;flex-direction:column;gap:5px;padding:4px}
.burger span{width:24px;height:2px;background:var(--text);border-radius:2px;transition:.3s}
.burger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* ===== BUTTONS ===== */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
    padding:.85rem 1.8rem;border-radius:10px;font-weight:700;font-size:.95rem;
    transition:all .25s;cursor:pointer;border:none;white-space:nowrap;
}
.btn-primary{background:var(--accent-gradient);background-size:200% 100%;color:#0a0a0a;box-shadow:0 4px 15px rgba(201,162,39,.2)}
.btn-primary:hover{background-position:100% 0;transform:translateY(-2px);box-shadow:0 8px 30px rgba(201,162,39,.4)}
.btn-outline{background:transparent;border:1.5px solid var(--border-light);color:var(--text)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-glow)}
.btn-small{padding:.55rem 1.2rem;font-size:.85rem}
.btn-full{width:100%;padding:1rem}
.btn-text{background:none;padding:.5rem 0;color:var(--text-muted);font-weight:600;font-size:.85rem}
.btn-text:hover{color:var(--accent)}

/* ===== HERO ===== */
.hero{
    position:relative;min-height:100vh;
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    text-align:center;padding:7rem 1.5rem 2rem;overflow:hidden;
    max-width:100vw;
}
.hero-bg{
    position:absolute;inset:0;
    background:url('../img/salon/salon.jpg') center/cover no-repeat;
    transform:scale(1.1);animation:kenburns 20s ease-in-out infinite alternate;
}
@keyframes kenburns{from{transform:scale(1.1)}to{transform:scale(1.25)}}
.hero-overlay{
    position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(10,10,10,.75) 0%,rgba(10,10,10,.85) 50%,rgba(10,10,10,.95) 100%);
    background-size:100% 200%;
    animation:gradientShift 8s ease-in-out infinite alternate;
}
@keyframes gradientShift{
    from{background-position:0% 0%}
    to{background-position:0% 100%}
}
.hero-content{position:relative;z-index:2;max-width:680px}
.hero-loc{
    font-size:.8rem;letter-spacing:.15em;text-transform:uppercase;
    color:var(--accent);font-weight:600;margin-bottom:1rem;
}
.hero-title{
    font-family:'Sora',sans-serif;
    font-size:clamp(3rem,9vw,6rem);font-weight:900;line-height:.95;
    letter-spacing:-.03em;margin-bottom:1.2rem;
    background:linear-gradient(180deg,#fff 0%,#e0e0e0 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
}
.hero-title span{color:var(--accent);font-style:italic;-webkit-text-fill-color:var(--accent);background:none}
.hero-sub{font-size:1.125rem;color:var(--text-muted);max-width:520px;margin:0 auto 1rem}
.hero-tagline{
    font-size:1.25rem;font-weight:600;font-style:italic;
    color:var(--text);margin-bottom:2rem;
}
.hero-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:2rem}
.hero-rating{display:flex;align-items:center;gap:.5rem;justify-content:center;color:var(--text-muted);font-size:.875rem;padding:.5rem 1.25rem;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:100px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hero-rating .stars{color:var(--accent);letter-spacing:.1em;font-size:1rem}
.hero-stats{
    position:relative;z-index:2;display:flex;gap:2.5rem;
    margin-top:3.5rem;flex-wrap:wrap;justify-content:center;
}
.hero-scroll{
    position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);
    z-index:3;opacity:0;animation:heroFadeUp .8s 1.3s cubic-bezier(.22,1,.36,1) forwards;
}
.hero-scroll-icon{
    width:26px;height:44px;border:2px solid var(--text-muted);border-radius:13px;
    display:flex;justify-content:center;padding-top:6px;
}
.hero-scroll-dot{
    width:4px;height:8px;background:var(--accent);border-radius:2px;
    animation:scrollDot 1.8s ease-in-out infinite;
}
@keyframes scrollDot{
    0%{opacity:1;transform:translateY(0)}
    100%{opacity:0;transform:translateY(14px)}
}
.stat{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:1rem 1.5rem}
.stat-num{font-size:2.5rem;font-weight:800;color:var(--accent);font-family:'Sora',sans-serif;text-shadow:0 0 20px rgba(201,162,39,.2)}
.stat-label{font-size:.75rem;color:var(--text-muted);text-align:center;max-width:160px}

/* ===== SECTIONS ===== */
.section{
    max-width:var(--maxw);margin:0 auto;
    padding:6rem 1.5rem;
    position:relative;
}
.section::before{
    content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:1px;height:40px;background:linear-gradient(180deg,transparent,var(--accent),transparent);
    opacity:.4;
}
.section-head{text-align:center;margin-bottom:3.5rem}
.section-num{
    font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;
    color:var(--accent);font-weight:600;margin-bottom:1rem;
    display:inline-flex;align-items:center;gap:.5rem;
}
.section-num::before,.section-num::after{
    content:'';width:20px;height:1px;background:var(--accent);opacity:.5;
}
.section-title{
    font-family:'Sora',sans-serif;
    font-size:clamp(2rem,5vw,3.5rem);font-weight:700;letter-spacing:-.02em;
    margin-bottom:1rem;
    background:linear-gradient(180deg,#fff 0%,#bbb 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
}
.section-desc{color:var(--text-muted);max-width:480px;margin:0 auto;font-size:1rem}

/* ===== TARIFS ===== */
.tarifs{background:var(--bg)}
.tarifs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.tarif-cat{display:flex;flex-direction:column;gap:.75rem}
.tarif-cat-title{
    font-size:.8rem;letter-spacing:.15em;text-transform:uppercase;
    color:var(--accent);font-weight:700;padding-bottom:.5rem;border-bottom:1px solid var(--border);
}
.tarif-item{
    display:flex;align-items:flex-start;gap:1rem;
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius);padding:1.25rem;text-align:left;
    transition:all .35s var(--transition);width:100%;
    box-shadow:var(--shadow-card);
}
.tarif-item:hover{border-color:var(--accent);background:var(--bg-card-hover);transform:translateY(-4px);box-shadow:var(--shadow-hover),0 0 0 1px rgba(201,162,39,.1)}
.tarif-num{font-size:.7rem;font-weight:700;color:var(--text-muted);min-width:1.5rem;padding-top:.15rem}
.tarif-info{flex:1;display:flex;flex-direction:column;gap:.2rem}
.tarif-name{font-weight:700;font-size:.95rem}
.tarif-desc{font-size:.8rem;color:var(--text-muted)}
.tarif-meta{display:flex;flex-direction:column;align-items:flex-end;gap:.15rem;white-space:nowrap}
.tarif-dur{font-size:.7rem;color:var(--text-muted)}
.tarif-price{font-size:1.25rem;font-weight:800;color:var(--accent);text-shadow:0 0 15px rgba(201,162,39,.15)}

/* ===== ÉQUIPE ===== */
.equipe{background:var(--bg-alt);position:relative}
.equipe::after{
    content:'';position:absolute;top:0;left:0;right:0;bottom:0;
    background:radial-gradient(ellipse at 50% 0%,rgba(201,162,39,.04) 0%,transparent 50%);
    pointer-events:none;
}
.equipe-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;position:relative;z-index:1;max-width:760px;margin:0 auto}
.barber-card{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-lg);overflow:hidden;
    transition:all .4s var(--transition);
    box-shadow:var(--shadow-card);position:relative;
}
.barber-card:hover{transform:translateY(-8px);border-color:var(--accent);box-shadow:var(--shadow-hover),0 0 30px rgba(201,162,39,.1)}
.barber-img{
    width:100%;aspect-ratio:1/1;background-size:cover;background-position:center;
    filter:grayscale(.4) brightness(.85);transition:filter .4s,transform .4s;
}
.barber-card:hover .barber-img{filter:grayscale(0) brightness(1);transform:scale(1.05)}
.barber-body{padding:1.25rem;display:flex;flex-direction:column;gap:.5rem;align-items:flex-start;position:relative}
.barber-body::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent-gradient);opacity:0;transition:opacity .3s}
.barber-card:hover .barber-body::before{opacity:1}
.barber-badge{
    font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    color:var(--accent);background:var(--accent-glow);
    padding:.3rem .7rem;border-radius:100px;
    border:1px solid rgba(201,162,39,.2);
}
.barber-name{font-size:1.5rem;font-weight:800}
.barber-role{font-size:.9rem;color:var(--text-muted);margin-top:-.3rem}
.barber-desc{font-size:.95rem;color:var(--text-muted);margin-bottom:.75rem;line-height:1.5}

/* ===== GALERIE ===== */
.galerie{background:var(--bg)}
.gallery-grid{
    display:grid;grid-template-columns:repeat(5,1fr);gap:.75rem;
}
.gallery-item{
    aspect-ratio:1/1;background-size:cover;background-position:center;
    border-radius:10px;overflow:hidden;cursor:pointer;
    transition:transform .4s var(--transition),box-shadow .4s;
    border:1px solid var(--border);position:relative;
}
.gallery-item::before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(180deg,transparent 50%,rgba(10,10,10,.7) 100%);
    opacity:0;transition:opacity .3s;border-radius:10px;z-index:1;
}
.gallery-item:hover::before{opacity:1}
.gallery-item:hover{transform:scale(1.06) rotate(-1deg);box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 0 1px var(--accent)}
.gallery-socials{
    display:flex;align-items:center;justify-content:center;gap:1.5rem;
    margin-top:2rem;flex-wrap:wrap;
}
.social-link{color:var(--accent);font-weight:600;font-size:.9rem;transition:color .2s}
.social-link:hover{color:var(--accent-bright)}

/* ===== RÉSERVATION ===== */
.reservation{background:var(--bg-alt);position:relative}
.reservation::after{
    content:'';position:absolute;top:0;left:0;right:0;bottom:0;
    background:radial-gradient(ellipse at 50% 50%,rgba(201,162,39,.03) 0%,transparent 60%);
    pointer-events:none;
}
.booking-wrap{
    max-width:680px;margin:0 auto;
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-lg);padding:2rem;
    box-shadow:var(--shadow-hover);position:relative;
}
.booking-wrap::before{content:'';position:absolute;top:0;left:20%;right:20%;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.4}
/* Stepper */
.stepper{display:flex;justify-content:space-between;margin-bottom:2rem;position:relative}
.stepper::before{
    content:'';position:absolute;top:14px;left:10%;right:10%;
    height:2px;background:var(--border);z-index:0;
}
.step{display:flex;flex-direction:column;align-items:center;gap:.4rem;position:relative;z-index:1;flex:1}
.step-dot{
    width:30px;height:30px;border-radius:50%;
    background:var(--bg);border:2px solid var(--border);
    display:flex;align-items:center;justify-content:center;
    font-size:.8rem;font-weight:700;color:var(--text-muted);
    transition:all .3s;
}
.step.active .step-dot{background:var(--accent);border-color:var(--accent);color:#0a0a0a}
.step.active .step-label{color:var(--text)}
.step-label{font-size:.7rem;color:var(--text-muted);font-weight:600}

/* Booking steps */
.booking-step{display:none;animation:fadeIn .3s ease}
.booking-step.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

.booking-cat{margin-bottom:1.5rem}
.booking-cat h3{
    font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
    color:var(--accent);margin-bottom:.75rem;
}
.booking-service{
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    width:100%;padding:1rem;background:var(--bg);
    border:1px solid var(--border);border-radius:10px;
    text-align:left;transition:all .2s;margin-bottom:.5rem;
}
.booking-service:hover{border-color:var(--accent);background:#222}
.bs-name{font-weight:600;font-size:.9rem}
.bs-name em{display:block;font-style:normal;font-weight:400;font-size:.75rem;color:var(--text-muted);margin-top:.15rem}
.bs-price{font-size:1.15rem;font-weight:800;color:var(--accent);white-space:nowrap}

/* Barbers in booking */
.booking-barbers{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.booking-barber{
    display:flex;flex-direction:column;align-items:center;gap:.4rem;
    padding:1rem;background:var(--bg);border:1px solid var(--border);
    border-radius:var(--radius);transition:all .2s;min-width:120px;flex:1;
}
.booking-barber:hover{border-color:var(--accent);transform:translateY(-3px)}
.bb-img{
    width:64px;height:64px;border-radius:50%;
    background-size:cover;background-position:center;
}
.bb-img-any{
    background:var(--border);display:flex;align-items:center;justify-content:center;
    font-size:1.5rem;color:var(--text-muted);
}
.bb-name{font-weight:700;font-size:.9rem}
.bb-role{font-size:.7rem;color:var(--text-muted)}

/* Slots */
.slot-wrap{margin-bottom:1rem}
.slot-days{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.5rem;margin-bottom:1rem;scrollbar-width:thin}
.slot-day{
    min-width:90px;padding:.75rem .5rem;background:var(--bg);
    border:1px solid var(--border);border-radius:10px;
    text-align:center;transition:all .2s;flex-shrink:0;
}
.slot-day:hover{border-color:var(--accent)}
.slot-day.active{background:var(--accent);border-color:var(--accent);color:#0a0a0a}
.slot-day .sd-day{font-size:.7rem;text-transform:uppercase;font-weight:600;opacity:.7}
.slot-day .sd-num{font-size:1.25rem;font-weight:800}
.slot-day .sd-month{font-size:.65rem;opacity:.6}
.slot-times{display:flex;flex-wrap:wrap;gap:.5rem}
.slot-time{
    padding:.5rem .85rem;background:var(--bg);border:1px solid var(--border);
    border-radius:8px;font-size:.85rem;font-weight:600;transition:all .2s;
}
.slot-time:hover{border-color:var(--accent);color:var(--accent)}
.slot-time.active{background:var(--accent);border-color:var(--accent);color:#0a0a0a}
.slot-time.disabled{opacity:.35;cursor:not-allowed;text-decoration:line-through}
.slot-time.disabled:hover{border-color:var(--border);color:var(--text-muted)}

/* Form */
.booking-form{display:flex;flex-direction:column;gap:1rem}
.form-row{display:flex;gap:1rem}
.form-row label{flex:1}
.booking-form label{display:flex;flex-direction:column;gap:.4rem;font-size:.8rem;font-weight:600;color:var(--text-muted)}
.booking-form input,.booking-form textarea{
    background:var(--bg);border:1px solid var(--border);
    border-radius:10px;padding:.85rem 1rem;color:var(--text);
    font-size:.9rem;transition:border-color .2s;
}
.booking-form input:focus,.booking-form textarea:focus{outline:none;border-color:var(--accent)}
.booking-form textarea{resize:vertical}
.booking-summary{
    background:var(--bg);border:1px solid var(--border);
    border-radius:10px;padding:1rem;font-size:.85rem;
    display:flex;flex-direction:column;gap:.3rem;
}
.booking-summary .bs-row{display:flex;justify-content:space-between}
.booking-summary .bs-row span:last-child{font-weight:700}
.btn-back{align-self:flex-start;margin-top:.5rem}

/* Confirmation */
.booking-confirm{text-align:center;padding:1rem 0}
.confirm-icon{
    width:64px;height:64px;border-radius:50%;
    background:var(--accent);color:#0a0a0a;
    font-size:2rem;font-weight:900;
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 1.5rem;animation:pop .4s ease;
}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
.confirm-details{
    background:var(--bg);border:1px solid var(--border);
    border-radius:10px;padding:1.25rem;margin:1rem 0;
    text-align:left;display:flex;flex-direction:column;gap:.4rem;
    font-size:.9rem;
}
.confirm-details .cd-row{display:flex;justify-content:space-between}
.confirm-details .cd-row span:last-child{font-weight:700}
.confirm-note{font-size:.8rem;color:var(--text-muted);margin-bottom:1.5rem}

/* ===== AVIS ===== */
.avis{background:var(--bg)}
.avis-top{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-bottom:3rem}
.avis-cta,.avis-form{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-lg);padding:2rem;
    box-shadow:var(--shadow-card);
}
.avis-cta h3,.avis-form h3{font-size:1.1rem;font-weight:700;margin-bottom:.75rem}
.avis-cta p{color:var(--text-muted);font-size:.9rem;margin-bottom:1rem}
.avis-rating{margin-top:1rem;font-size:.85rem;color:var(--text-muted)}
.avis-rating .stars{color:var(--accent)}

.avis-stars-input{display:flex;gap:.2rem;margin-bottom:.75rem}
.star-input{font-size:1.5rem;cursor:pointer;color:var(--border);transition:color .15s}
.star-input.active,.star-input:hover{color:var(--accent)}
.avis-form input,.avis-form textarea{
    width:100%;background:var(--bg);border:1px solid var(--border);
    border-radius:10px;padding:.75rem 1rem;color:var(--text);
    font-size:.9rem;margin-bottom:.75rem;
}
.avis-form input:focus,.avis-form textarea:focus{outline:none;border-color:var(--accent)}
.avis-form textarea{resize:vertical}
.avis-form-note{font-size:.75rem;color:var(--text-muted);margin-top:.5rem}

/* Carousel */
.avis-carousel{position:relative;overflow:hidden}
.avis-track{
    display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;
    padding:.5rem .25rem 1rem;scrollbar-width:none;
}
.avis-track::-webkit-scrollbar{display:none}
.avis-card{
    flex:0 0 340px;scroll-snap-align:start;
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius);padding:1.5rem;
    box-shadow:var(--shadow-card);position:relative;
}
.avis-card::before{content:'"';position:absolute;top:.5rem;right:1rem;font-size:3rem;color:var(--accent);opacity:.15;font-family:'Sora',sans-serif;line-height:1}
.avis-stars{color:var(--accent);letter-spacing:.1em;margin-bottom:.75rem}
.avis-text{font-size:.875rem;color:var(--text);margin-bottom:1rem;font-style:italic}
.avis-author{font-size:.8rem;color:var(--text-muted);font-weight:600}
.carousel-arrow{
    position:absolute;top:50%;transform:translateY(-50%);
    width:40px;height:40px;border-radius:50%;
    background:var(--bg-card);border:1px solid var(--border);
    font-size:1.5rem;color:var(--text);z-index:2;
    display:flex;align-items:center;justify-content:center;
    transition:all .2s;
}
.carousel-arrow:hover{background:var(--accent);color:#0a0a0a;border-color:var(--accent)}
.carousel-prev{left:-10px}
.carousel-next{right:-10px}

/* ===== INFOS ===== */
.infos{background:var(--bg-alt)}
.infos-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}
.infos-img{
    border-radius:var(--radius-lg);aspect-ratio:4/5;
    background-size:cover;background-position:center;
    position:sticky;top:100px;
    box-shadow:var(--shadow-hover);
    border:1px solid var(--border);
}
.infos-img::after{
    content:'';position:absolute;inset:0;border-radius:var(--radius-lg);
    background:linear-gradient(180deg,transparent 60%,rgba(10,10,10,.5) 100%);
    pointer-events:none;
}
.infos-content{display:flex;flex-direction:column;gap:1.5rem}
.infos-block{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius);padding:1.5rem;
    box-shadow:var(--shadow-card);
}
.infos-block h3{
    font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
    color:var(--accent);margin-bottom:.75rem;font-weight:700;
}
.infos-block p{font-size:.9rem;color:var(--text);line-height:1.7}
.infos-block a{color:var(--accent);transition:color .2s}
.infos-block a:hover{color:var(--accent-bright)}
.horaires{width:100%;font-size:.875rem}
.horaires td{padding:.35rem 0}
.horaires td:first-child{color:var(--text-muted);width:120px}
.horaires td:last-child{text-align:right;font-weight:500}

/* ===== FOOTER ===== */
.footer{background:linear-gradient(180deg,var(--bg) 0%,#050505 100%);border-top:1px solid var(--border);padding:5rem 1.5rem 2rem;position:relative;overflow:hidden}
.footer::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.3}
.footer-inner{max-width:var(--maxw);margin:0 auto;position:relative;z-index:1}
.footer-main{text-align:center;margin-bottom:3rem}
.footer-logo{height:25px;width:auto;margin:0 auto 1.5rem;display:block;opacity:.9;transition:opacity .3s}
.footer-logo:hover{opacity:1}
.footer-title{
    font-family:'Sora',sans-serif;
    font-size:clamp(1.5rem,4vw,2.5rem);font-weight:700;line-height:1.2;
    margin-bottom:1.5rem;
    background:linear-gradient(180deg,#fff 0%,#888 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
}
.footer-bottom{text-align:center;display:flex;flex-direction:column;gap:1rem;align-items:center}
.footer-bottom p{font-size:.8rem;color:var(--text-muted)}
.footer-socials{display:flex;gap:1.5rem}
.footer-socials a{font-size:.85rem;color:var(--text-muted);transition:color .2s}
.footer-socials a:hover{color:var(--accent)}
.footer-copy a{color:var(--text-muted)}
.footer-copy a:hover{color:var(--accent)}

/* ===== RESPONSIVE ===== */
@media(max-width:1100px){
    .tarifs-grid{grid-template-columns:repeat(2,1fr)}
    .equipe-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:900px){
    .nav{
        position:fixed;top:72px;left:0;right:0;
        background:rgba(10,10,10,.98);backdrop-filter:blur(20px);
        -webkit-backdrop-filter:blur(20px);
        flex-direction:column;align-items:center;gap:1.5rem;
        padding:2rem;border-bottom:1px solid var(--border);
        transform:translateY(-120%);transition:transform .3s;
        display:flex !important;
    }
    .nav.open{transform:translateY(0)}
    .burger{display:flex}

    .tarifs-grid{grid-template-columns:repeat(2,1fr);gap:1rem}
    .equipe-grid{grid-template-columns:repeat(2,1fr)}
    .gallery-grid{grid-template-columns:repeat(3,1fr)}
    .avis-top{grid-template-columns:1fr}
    .infos-grid{grid-template-columns:1fr}
    .infos-img{position:relative;top:0;aspect-ratio:16/9}
    .hero-stats{gap:1.5rem}
    .cal-embed-wrap iframe{min-height:560px !important}
    .cal-summary{font-size:.8rem}
}

@media(max-width:640px){
    .section{padding:3.5rem 1.25rem}
    .section::before{height:24px}
    .tarifs-grid{grid-template-columns:1fr;gap:1rem}
    .equipe-grid{grid-template-columns:repeat(2,1fr)}
    .gallery-grid{grid-template-columns:repeat(2,1fr)}
    .hero{padding:6rem 1rem 2rem;min-height:100vh}
    .hero-actions{flex-direction:column;width:100%}
    .hero-actions .btn{width:100%}
    .hero-stats{flex-direction:row;gap:.75rem;flex-wrap:wrap;margin-top:2.5rem}
    .stat{padding:.5rem .75rem}
    .stat-num{font-size:1.5rem}
    .stat-label{font-size:.6rem;max-width:100px}
    .hero-rating{font-size:.75rem;padding:.4rem .85rem}
    .hero-sub{font-size:1rem}
    .hero-tagline{font-size:1.05rem}
    .booking-wrap{padding:1.25rem}
    .form-row{flex-direction:column}
    .avis-card{flex:0 0 280px}
    .stepper::before{left:5%;right:5%}
    .step-label{font-size:.6rem}
    .step-dot{width:26px;height:26px;font-size:.7rem}
    .booking-barbers{justify-content:center}
    .booking-barber{min-width:90px;padding:.75rem .5rem}
    .bb-img{width:52px;height:52px}
    .booking-service{padding:.85rem;flex-direction:row;align-items:center}
    .bs-name{font-size:.85rem}
    .bs-name em{font-size:.7rem}
    .bs-price{font-size:1rem}
    .cal-embed-wrap{min-height:540px}
    .cal-embed-wrap iframe{min-height:540px !important}
    .cal-summary{flex-direction:column;gap:.4rem;font-size:.8rem}
    .avis-cta,.avis-form{padding:1.5rem}
    .infos-block{padding:1.25rem}
    .horaires td:first-child{width:80px}
    .horaires{font-size:.8rem}
    .footer{padding:3.5rem 1.25rem 2rem}
    .footer-logo{height:22px}
    .carousel-prev{left:-5px}
    .carousel-next{right:-5px}
    .carousel-arrow{width:34px;height:34px;font-size:1.2rem}
    .section-num::before,.section-num::after{width:12px}
}

@media(max-width:380px){
    .equipe-grid{grid-template-columns:1fr}
    .gallery-grid{grid-template-columns:1fr}
    .hero-title{font-size:2.2rem}
    .section-title{font-size:1.6rem}
    .stat-num{font-size:1.25rem}
    .booking-barber{min-width:80px}
    .bb-img{width:44px;height:44px}
    .bb-name{font-size:.8rem}
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:#333}

/* ===== CAL.COM EMBED ===== */
.cal-summary{
    background:var(--bg);border:1px solid var(--border);
    border-radius:10px;padding:1rem;margin-bottom:1rem;
    display:flex;flex-wrap:wrap;gap:1rem;font-size:.85rem;
}
.cal-summary .cs-row{
    display:flex;align-items:center;gap:.4rem;
}
.cal-summary .cs-row span:first-child{color:var(--text-muted)}
.cal-summary .cs-row span:last-child{font-weight:700}

.cal-embed-wrap{
    width:100%;min-height:600px;
    border-radius:12px;overflow:hidden;
    background:var(--bg);
}
.cal-loading{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:1rem;min-height:600px;color:var(--text-muted);font-size:.875rem;
}
.cal-spinner{
    width:36px;height:36px;border:3px solid var(--border);
    border-top-color:var(--accent);border-radius:50%;
    animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ========================================
   ANIMATIONS MODERNES
   ======================================== */

/* ===== SCROLL REVEAL ===== */
.reveal{
    opacity:0;
    transform:translateY(40px);
    transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);
}
.reveal.visible{opacity:1;transform:translateY(0)}

/* Staggered children */
.reveal-stagger > *{
    opacity:0;
    transform:translateY(30px);
    transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1);
}
.reveal-stagger.visible > *{opacity:1;transform:translateY(0)}
.reveal-stagger.visible > *:nth-child(1){transition-delay:.05s}
.reveal-stagger.visible > *:nth-child(2){transition-delay:.1s}
.reveal-stagger.visible > *:nth-child(3){transition-delay:.15s}
.reveal-stagger.visible > *:nth-child(4){transition-delay:.2s}
.reveal-stagger.visible > *:nth-child(5){transition-delay:.25s}
.reveal-stagger.visible > *:nth-child(6){transition-delay:.3s}
.reveal-stagger.visible > *:nth-child(7){transition-delay:.35s}
.reveal-stagger.visible > *:nth-child(8){transition-delay:.4s}
.reveal-stagger.visible > *:nth-child(9){transition-delay:.45s}
.reveal-stagger.visible > *:nth-child(10){transition-delay:.5s}

/* Variants */
.reveal-left{opacity:0;transform:translateX(-50px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.reveal-left.visible{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(50px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.reveal-right.visible{opacity:1;transform:translateX(0)}
.reveal-scale{opacity:0;transform:scale(.9);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.reveal-scale.visible{opacity:1;transform:scale(1)}

/* ===== HERO ANIMATIONS ===== */
.hero-loc,.hero-title,.hero-sub,.hero-tagline,.hero-actions,.hero-rating,.hero-stats{
    opacity:0;
    animation:heroFadeUp .8s cubic-bezier(.22,1,.36,1) forwards;
}
.hero-loc{animation-delay:.2s}
.hero-title{animation-delay:.35s}
.hero-sub{animation-delay:.5s}
.hero-tagline{animation-delay:.65s}
.hero-actions{animation-delay:.8s}
.hero-rating{animation-delay:.95s}
.hero-stats{animation-delay:1.1s}
@keyframes heroFadeUp{
    from{opacity:0;transform:translateY(30px)}
    to{opacity:1;transform:translateY(0)}
}

/* Title glow pulse */
.hero-title span{
    animation:glowPulse 3s ease-in-out infinite;
}
@keyframes glowPulse{
    0%,100%{text-shadow:0 0 0 rgba(201,162,39,0)}
    50%{text-shadow:0 0 30px rgba(201,162,39,.4)}
}

/* Animated gradient overlay */
.hero-overlay{
    background:linear-gradient(180deg,rgba(10,10,10,.75) 0%,rgba(10,10,10,.85) 50%,rgba(10,10,10,.95) 100%);
    background-size:100% 200%;
    animation:gradientShift 8s ease-in-out infinite alternate;
}
@keyframes gradientShift{
    from{background-position:0% 0%}
    to{background-position:0% 100%}
}

/* Scroll indicator */
.hero-scroll{
    position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);
    z-index:3;opacity:0;animation:heroFadeUp .8s 1.3s cubic-bezier(.22,1,.36,1) forwards;
}
.hero-scroll-icon{
    width:26px;height:44px;border:2px solid var(--text-muted);border-radius:13px;
    display:flex;justify-content:center;padding-top:6px;
}
.hero-scroll-dot{
    width:4px;height:8px;background:var(--accent);border-radius:2px;
    animation:scrollDot 1.8s ease-in-out infinite;
}
@keyframes scrollDot{
    0%{opacity:1;transform:translateY(0)}
    100%{opacity:0;transform:translateY(14px)}
}

/* ===== NAV LINK UNDERLINE ===== */
.nav a:not(.nav-cta){
    position:relative;
}
.nav a:not(.nav-cta)::after{
    content:'';position:absolute;bottom:-4px;left:0;
    width:0;height:2px;background:var(--accent);
    transition:width .3s cubic-bezier(.22,1,.36,1);
}
.nav a:not(.nav-cta):hover::after{width:100%}

/* ===== BUTTON SHINE ===== */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::before{
    content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
    transition:left .6s;
}
.btn-primary:hover::before{left:100%}

/* ===== CARD GLOW ON HOVER ===== */
.tarif-item,.barber-card,.booking-service,.booking-barber,.avis-card,.infos-block{
    position:relative;
}
.tarif-item::after,.barber-card::after,.avis-card::after,.infos-block::after{
    content:'';position:absolute;inset:0;border-radius:inherit;
    background:radial-gradient(600px circle at var(--mx,50%) var(--my,50%),rgba(201,162,39,.08),transparent 40%);
    opacity:0;transition:opacity .3s;pointer-events:none;
}
.tarif-item:hover::after,.barber-card:hover::after,.avis-card:hover::after,.infos-block:hover::after{
    opacity:1;
}

/* ===== GALLERY OVERLAY (icon) ===== */
.gallery-item::after{
    content:'\2702';
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-size:1.5rem;color:var(--accent);background:rgba(10,10,10,.4);
    border-radius:10px;opacity:0;transform:scale(.8);
    transition:opacity .3s,transform .3s;z-index:2;
}
.gallery-item:hover::after{opacity:1;transform:scale(1)}

/* ===== STAT COUNTER ===== */
.stat-num{
    display:inline-block;
}
.stat{
    transition:transform .3s;
}
.stat:hover{transform:translateY(-5px) scale(1.05)}

/* ===== SECTION TITLE ANIMATION ===== */
.section-num{
    display:inline-block;
    position:relative;
}
.section-num::after{
    content:'';display:inline-block;width:0;height:1px;background:var(--accent);
    margin-left:.5rem;vertical-align:middle;
    transition:width .8s .3s cubic-bezier(.22,1,.36,1);
}
.reveal.visible .section-num::after,.section-head.visible .section-num::after{width:2rem}

/* ===== ACCENT SHIMMER ===== */
.logo-mark{
    background:linear-gradient(110deg,var(--accent) 0%,var(--accent-bright) 50%,var(--accent) 100%);
    background-size:200% 100%;
    animation:shimmer 3s linear infinite;
}
@keyframes shimmer{
    from{background-position:200% 0}
    to{background-position:-200% 0}
}

/* ===== AVIS CARD ENTRANCE ===== */
.avis-card{
    transition:transform .3s,box-shadow .3s,border-color .3s;
}
.avis-card:hover{
    transform:translateY(-4px);border-color:var(--accent);
    box-shadow:0 10px 40px rgba(0,0,0,.3);
}

/* ===== STEPPER PROGRESS LINE ===== */
.stepper::before{
    background:linear-gradient(90deg,var(--accent) var(--progress,0%),var(--border) var(--progress,0%));
    transition:background .4s;
}

/* ===== SLOT TIME ENTRANCE ===== */
.slot-time{
    animation:slotPop .3s cubic-bezier(.22,1,.36,1) backwards;
}
.slot-time:nth-child(1){animation-delay:.02s}
.slot-time:nth-child(2){animation-delay:.04s}
.slot-time:nth-child(3){animation-delay:.06s}
.slot-time:nth-child(4){animation-delay:.08s}
.slot-time:nth-child(5){animation-delay:.1s}
.slot-time:nth-child(6){animation-delay:.12s}
.slot-time:nth-child(7){animation-delay:.14s}
.slot-time:nth-child(8){animation-delay:.16s}
.slot-time:nth-child(9){animation-delay:.18s}
.slot-time:nth-child(10){animation-delay:.2s}
.slot-time:nth-child(n+11){animation-delay:.22s}
@keyframes slotPop{
    from{opacity:0;transform:scale(.85)}
    to{opacity:1;transform:scale(1)}
}

/* ===== SLOT DAY ENTRANCE ===== */
.slot-day{
    animation:slideInLeft .4s cubic-bezier(.22,1,.36,1) backwards;
}
.slot-day:nth-child(1){animation-delay:.05s}
.slot-day:nth-child(2){animation-delay:.1s}
.slot-day:nth-child(3){animation-delay:.15s}
.slot-day:nth-child(4){animation-delay:.2s}
.slot-day:nth-child(5){animation-delay:.25s}
.slot-day:nth-child(n+6){animation-delay:.3s}
@keyframes slideInLeft{
    from{opacity:0;transform:translateX(-20px)}
    to{opacity:1;transform:translateX(0)}
}

/* ===== PROGRESS BAR (top of page) ===== */
.scroll-progress{
    position:fixed;top:0;left:0;height:3px;width:0;
    background:linear-gradient(90deg,var(--accent),var(--accent-bright));
    z-index:200;transition:width .1s;
}

/* ===== REDUCED MOTION ===== */
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
    .reveal,.reveal-stagger > *,.reveal-left,.reveal-right,.reveal-scale{
        opacity:1 !important;transform:none !important;
    }
}