/* ==========================================================================
   Stains Espoir — styles.css (convivial, clair, multi-pages ready)
   ========================================================================== */

/* Reset léger */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul[role="list"],ol[role="list"]{list-style:none;margin:0;padding:0}
img,svg,video,canvas{max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{text-decoration:none;color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* Tokens */
:root{
    --brand:#6A1B9A;          /* violet chaleureux */
    --brand-2:#B36AD1;        /* violet clair */
    --bg:#ffffff;
    --surface:#F8F7FB;
    --surface-2:#ffffff;
    --text:#1C1E21;
    --muted:#5A5F68;
    --line:rgba(0,0,0,.12);
    --focus:#6A1B9A;
    --hero-img: url('https://stains-espoir.fr/wp-content/uploads/2017/05/banner.jpg');

    --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans";
    --size-0:.9rem;
    --size-1:1rem;
    --size-2:1.125rem;
    --size-3:1.4rem;
    --size-4:1.9rem;
    --size-5:2.4rem;

    --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem;
    --s-5:1.5rem; --s-6:2rem; --s-7:3rem; --s-8:4rem;
    --radius:14px; --radius-lg:22px;
    --shadow:0 1px 2px rgba(0,0,0,.05), 0 8px 22px rgba(0,0,0,.08);
}

body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--font);
    font-size:var(--size-1);
    line-height:1.6;
}

.container{width:min(1100px,100% - 2rem); margin-inline:auto}

/* Helpers */
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:1rem;top:1rem;background:#fff;border:1px solid var(--line);padding:.5rem;border-radius:8px}
.small{font-size:var(--size-0);color:var(--muted)}
.muted{color:var(--muted)}
.eyebrow{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.underline{background:linear-gradient(0deg,transparent 70%,rgba(179,106,209,.3) 70%)}

.btn{
    display:inline-flex;align-items:center;justify-content:center;
    gap:.5rem;padding:.7rem 1rem;border-radius:999px;border:1px solid transparent;
    font-weight:700;box-shadow:var(--shadow);cursor:pointer;transition:transform .12s ease, background .2s ease, border-color .2s ease
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff}
.btn-outline{background:#fff;border-color:var(--line)}
.btn-ghost{background:rgba(106,27,154,.08);color:#381e4f}

.card{
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:var(--s-5);
    box-shadow:var(--shadow);
}
.card.soft{background:var(--surface)}
.card-link{display:inline-flex;gap:.5rem;margin-top:.5rem;color:var(--brand)}
.card-link::after{content:"→"}

/* Topbar */
.topbar{z-index:1301; z-index:1301 !important; position:sticky; top:0; background:#fff;border-bottom:1px solid var(--line);}
.topbar-row{display:flex;align-items:center;justify-content:space-between;padding:.45rem 0;gap:.5rem}
.topbar .sep{opacity:.5}
.topbar .social{display:inline-flex;align-items:center;gap:.4rem}
.topbar .social svg{width:18px;height:18px}

/* Header */
.site-header{z-index:1300; z-index:1300 !important; z-index:1102; z-index:1102; position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);z-index:40}
.header-row{display:flex;align-items:center;gap:var(--s-4);padding:.8rem 0}
.brand{display:inline-flex;align-items:center;gap:.6rem}
.brand svg rect{fill:url(#g)}
.brand-name{font-weight:800;letter-spacing:.2px}
.nav-toggle{display:none;width:2.2rem;height:2.2rem;border:1px solid var(--line);border-radius:10px;background:#fff}
.primary-nav{display:flex;align-items:center;gap:var(--s-5)}
.primary-nav ul{display:flex;gap:var(--s-4);list-style:none;margin:0;padding:0} /* fix des points du ul */
.primary-nav a{color:var(--muted);font-weight:600}
.primary-nav a.active,.primary-nav a:hover{color:var(--text)}
.nav-cta{display:flex;gap:.5rem}

@media (max-width:900px){
    .nav-toggle{display:inline-flex;justify-content:center;align-items:center;margin-left:auto}
    .primary-nav{inset:64px 0 auto 0;transition:flex-direction:column;align-items:flex-start;gap:1rem}
    .primary-nav.open{transform:translateY(0)}
    .primary-nav ul{flex-direction:column;gap:.75rem}
    .nav-cta{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
}

/* Hero avec photo de fond */
.hero{padding:var(--s-7) 0 var(--s-7)}
.hero-photo{
    /* superpositions : voile clair pour lisibilité + image */
    background:
        linear-gradient(90deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.88) 40%, rgba(255,255,255,.70) 60%, rgba(255,255,255,.60) 100%),
        var(--hero-img);
    background-size:cover;
    background-position:center;
    border-bottom:1px solid var(--line);
}
.hero-inner{max-width:760px}
.hero h1{font-size:var(--size-5);line-height:1.1}
.hero .lead{font-size:var(--size-2);color:var(--muted);margin-top:.5rem}
.hero .actions{display:flex;gap:.75rem;margin-top:1rem}

@media (max-width:1000px){
    .hero-inner{max-width:100%}
}

/* Sections & grids */
.section{padding:var(--s-7) 0}
.section.alt{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-head{text-align:center;margin-bottom:var(--s-6)}
.row-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;text-align:left}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
@media (max-width:900px){.grid-3{grid-template-columns:1fr} .row-head{flex-direction:column;align-items:flex-start}}

/* Stats */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-5);align-items:stretch}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s-5);text-align:center}
.stat .n{font-size:2rem;font-weight:900;color:#3b2354}
.stat .l{color:var(--muted)}
@media (max-width:900px){.stats-row{grid-template-columns:repeat(2,1fr)}}

/* Posts */
.post-card .thumb{height:150px;border-radius:12px;background:linear-gradient(135deg,#EEE2F6,#F6F1FB);border:1px solid var(--line);margin-bottom:.8rem}

/* Événements */
.events{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
.ev{display:grid;grid-template-columns:84px 1fr;gap:1rem;align-items:center}
.date{width:84px;aspect-ratio:1/1;display:grid;place-items:center;border-radius:14px;background:linear-gradient(180deg,var(--brand),var(--brand-2));color:#fff}
.date .d{font-size:1.7rem;font-weight:900;line-height:1}
.date .m{font-size:.9rem;letter-spacing:.16em}
.ev .muted{color:var(--muted)}
@media (max-width:900px){.events{grid-template-columns:1fr}}

/* CTA */
.cta{background:linear-gradient(180deg,#FAF7FF,#fff);border-top:1px solid var(--line)}
.cta-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);padding:var(--s-7) 0}
.cta-icon{font-size:3rem}
@media (max-width:900px){.cta-row{flex-direction:column;align-items:flex-start}}

/* Footer */
.site-footer{border-top:1px solid var(--line);background:#fff;padding:var(--s-6) 0}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:var(--s-6);align-items:start}
.brand-footer{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:.4rem}
.f-nav{display:grid;gap:.5rem}
.f-nav a{color:var(--muted)}
.f-nav a:hover{color:var(--text)}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr}}

/* Animations discrètes */
@media (prefers-reduced-motion:no-preference){
    .card,.stat,.post-card,.ev{animation:fadeUp .5s ease both}
    .card:nth-child(2){animation-delay:.05s}
    .card:nth-child(3){animation-delay:.1s}
    @keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
}


/* Logo images */
.brand-logo{height:40px;width:auto;display:block}
.brand-logo-small{height:28px;width:auto;display:block}
.brand-logo-big{height:100px;width:auto;display:block}
.brand img{display:block}


/* Creative pillars rail */
.pillars.creative { position: relative; overflow: hidden; }
.pillars-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(280px, 1fr);
    gap: var(--s-5);
    overflow-x: auto;
    padding: .25rem;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1rem;
}
.pillars-rail:focus-within { outline: 3px solid var(--focus); outline-offset: 4px; }
.spotlight {
    position: relative;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: var(--s-6) var(--s-5) var(--s-5);
    scroll-snap-align: start;
    min-height: 260px;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}
.spotlight:hover { transform: translateY(-3px); box-shadow: 0 6px 24px rgba(0,0,0,.12); }
.spotlight::before {
    /* décor angle */
    content: "";
    position: absolute; inset: -30% -30% auto auto;
    width: 60%; height: 60%;
    background: radial-gradient(closest-side, rgba(106,27,154,.16), transparent 70%);
    transform: rotate(18deg);
}
.spotlight .ribbon {
    position: absolute; top: 0; left: 0;
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    color: #fff; font-weight: 800; letter-spacing: .02em;
    padding: .35rem .75rem;
    border-bottom-right-radius: 10px;
}
.spotlight-body h3 { font-size: var(--size-3); line-height: 1.2; margin-bottom: .25rem; }
.spotlight-body p { color: var(--muted); margin-bottom: .6rem; }
.tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 .2rem; padding: 0; list-style: none; }
.tags li {
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: 999px; padding: .25rem .6rem; font-weight: 600; font-size: .92rem;
}
.rail-fade {
    position: absolute; top: 0; bottom: 0; width: 56px; pointer-events: none;
    background: linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0));
}
.rail-fade.right { right: 0; transform: scaleX(-1); }
.rail-fade.left { left: 0; }
@media (max-width: 900px) {
    .pillars-rail { grid-auto-columns: 85%; }
}


/* Simple pillars with icons */
.pillars.simple .features{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:var(--s-6);
    padding:0;
    margin:0;
}
.pillars.simple .feature{
    display:flex;
    align-items:flex-start;
    gap:var(--s-4);
}
.icon-circle{
    width:56px;height:56px;flex:0 0 56px;
    display:grid;place-items:center;
    border-radius:50%;
    background: radial-gradient(circle at 30% 30%, var(--brand-2), var(--brand));
    color:#fff;
    box-shadow:var(--shadow);
}
.icon-circle .emoji{font-size:28px; line-height:1}
.text-link{color:var(--brand);font-weight:700}
.text-link::after{content:"→";margin-left:.25rem}
@media (max-width:900px){
    .pillars.simple .features{grid-template-columns:1fr}
}


/* CTA (créative) – robust definition appended */
.cta.creative-cta{position:relative;background:linear-gradient(180deg,#FAF7FF,#fff);border-top:1px solid var(--line)}
.cta-card{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow);padding:var(--s-7)}
.cta-content{display:flex;align-items:center;justify-content:space-between;gap:var(--s-6);flex-wrap:wrap}
.cta-content h2{font-size:var(--size-4);line-height:1.15;margin-bottom:.25rem}
.cta-content .lead{color:var(--muted)}
.cta-actions{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.cta-btn{display:flex;align-items:center;gap:.85rem;padding:.9rem 1.1rem;border-radius:16px;border:1px solid var(--line);text-decoration:none;transition:transform .12s ease, box-shadow .2s ease, background .2s ease}
.cta-btn .icon{font-size:1.25rem}
.cta-btn .txt{display:flex;flex-direction:column;line-height:1.15}
.cta-btn .txt strong{font-size:1.05rem}
.cta-btn .txt em{font-style:normal;color:var(--muted);font-size:.92rem}
.cta-btn .arrow{margin-left:auto;font-weight:800}
.cta-btn:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.08)}
.cta-btn.primary{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff;border-color:transparent}
.cta-btn.secondary{background:#fff}
.cta-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:var(--s-5)}
.badge{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:.35rem .7rem;font-weight:700}
.cta-decor{position:absolute;inset:-10% -10% auto auto;height:280px;width:280px;border-radius:50%;background:radial-gradient(circle at 30% 30%, rgba(179,106,209,.18), transparent 60%)}
@media (max-width:900px){.cta-actions{grid-template-columns:1fr}.cta-content{align-items:flex-start}}


/* === CTA Band (sans box) =================================================== */
.band-cta{
    position:relative;
    padding: var(--s-7) 0;
    border-top: 1px solid var(--line);
    background:
        radial-gradient(900px 400px at 10% -20%, rgba(179,106,209,.18), transparent 60%),
        radial-gradient(800px 400px at 110% 20%, rgba(106,27,154,.12), transparent 60%),
        linear-gradient(180deg, #FAF7FF, #FFF 60%);
    overflow:hidden;}
.band-cta::before,
.band-cta::after{
    content:""; position:absolute; inset:auto; width:240px; height:240px;
    background: radial-gradient(circle at 30% 30%, rgba(179,106,209,.12), transparent 60%);
    filter: blur(10px);
    transform: rotate(8deg);
}
.band-cta::after{ inset:-60px -60px auto auto; transform: rotate(-8deg); }

.band-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: var(--s-6); align-items:center; }
.band-copy h2{ font-size: var(--size-4); line-height:1.15; margin-bottom:.25rem; }
.band-copy .lead{ color: var(--muted); margin-bottom: var(--s-5); }

.band-actions{ display:flex; flex-wrap:wrap; gap:.8rem; }
.pill-btn{
    --pad-x: 1.1rem;
    display:flex; align-items:center; gap:.85rem;
    padding:.85rem var(--pad-x);
    border-radius: 999px;
    text-decoration:none;
    border: 1px solid transparent;
    transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
    box-shadow: var(--shadow);
}
.pill-btn .i{ font-size: 1.2rem; }
.pill-btn .t{ display:flex; flex-direction:column; line-height:1.1; }
.pill-btn .t strong{ font-size:1.02rem; }
.pill-btn .t em{ font-style:normal; color: var(--muted); font-size:.92rem; }
.pill-btn .arrow{ margin-left:auto; font-weight:800; }

/* Filled gradient pill */
.pill-btn.fill{
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    color:#fff;
}
.pill-btn.fill .t em{ color: rgba(255,255,255,.9); }
.pill-btn.fill:hover{ transform: translateY(-2px); box-shadow: 0 6px 20px rgba(106,27,154,.25); }

/* Outline gradient pill (no box fill) */
.pill-btn.outline{
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(90deg, var(--brand), var(--brand-2)) border-box;
    border: 2px solid transparent;
    color: #3b2354;
}
.pill-btn.outline:hover{ transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }

/* Assurances list (sans box) */
.assurances{
    display:flex; flex-wrap:wrap; gap:.6rem 1rem;
    margin-top: var(--s-5);
    padding:0;
}
.assurances li{ position:relative; padding-left:0; color: var(--muted); font-weight:700; }
.assurances li + li::before{ content:"•"; margin-right:.75rem; color: #B36AD1; font-weight:900; }

/* Stickers décoratifs (flottants) */
.band-art{ position:relative; min-height: 180px; }
.sticker{
    position:absolute; display:grid; place-items:center;
    width:72px; height:72px; border-radius:18px;
    background: #fff; border:1px solid var(--line);
    box-shadow: var(--shadow);
    animation: float 6s ease-in-out infinite;
    font-size: 1.6rem;
}
.sticker.heart{ top: 12%; left: 10%; animation-delay: 0s; }
.sticker.hands{ top: 40%; right: 12%; animation-delay: .8s; }
.sticker.star{ bottom: 8%; left: 36%; animation-delay: 1.4s; }

@keyframes float{
    0%,100%{ transform: translateY(0) }
    50%{ transform: translateY(-8px) }
}

@media (max-width: 900px){
    .band-grid{ grid-template-columns: 1fr; }
    .band-art{ order:-1; min-height: 120px; margin-bottom: .5rem; }
    .sticker{ width:60px; height:60px; }
}


/* === Creative Footer ======================================================= */
.creative-footer{
    position:relative;
    background:#fff;
    border-top:1px solid var(--line);
    overflow:hidden;}
/* decorative soft wave-ish glow */
.footer-top{
    display:grid;
    grid-template-columns:1.2fr .8fr .8fr;
    gap:var(--s-6);
    padding: var(--s-6) 0 var(--s-5);
}
.ft-title{ font-size:1.05rem; font-weight:800; margin-bottom:.6rem; }
.ft-brand .brand-footer{ display:inline-flex; align-items:center; gap:.6rem; margin-bottom:.25rem; }
.ft-brand .tagline{ margin-top:.25rem; }

.ft-socials{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.75rem; }
.social-chip{
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.45rem .7rem; border-radius:999px;
    background:linear-gradient(#fff,#fff) padding-box, linear-gradient(90deg,var(--brand),var(--brand-2)) border-box;
    border:2px solid transparent;
    color:#3b2354;
    box-shadow:var(--shadow);
    font-weight:700;
}
.social-chip svg{ width:18px; height:18px; }

.ft-nav ul{ list-style:none; padding:0; margin:0; display:grid; gap:.4rem; }
.ft-nav a{ color:var(--muted); }
.ft-nav a:hover{ color:var(--text); }

.ft-contact address{ font-style:normal; color:var(--text); }
.ft-quick{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.75rem; }

.footer-bottom{
    border-top:1px solid var(--line);
    background:#fff;
}
.footer-bottom-row{
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    padding:.7rem 0;
}
.ft-legal{ display:flex; align-items:center; gap:.6rem; }
.ft-legal a{ color:var(--muted); }
.ft-legal a:hover{ color:var(--text); }

@media (max-width:900px){
    .footer-top{ grid-template-columns:1fr; }
    .footer-bottom-row{ flex-direction:column; align-items:flex-start; }
}


/* Contact info list */
.info-list{ display:grid; gap:.75rem; padding:0; margin:0; }
.info-list li{ display:flex; align-items:flex-start; gap:.6rem; }
.info-list svg{ width:20px; height:20px; flex:0 0 20px; margin-top:.25rem; color: var(--brand); }
.info-list svg path{ fill: currentColor; }
.info-list strong{ display:block; font-weight:800; }
.info-list p{ margin:.1rem 0 0 0; color: var(--muted); }

html,body{max-width:100%;overflow-x:hidden;}

/* Footer bottom spacing tweaks */
.creative-footer{margin:0; padding-bottom:0;}
.footer-bottom{margin:0; padding-top:.4rem; padding-bottom:.4rem; background:#fff;}
.footer-bottom-row{padding:.4rem 0 !important;}
.footer-bottom-row > *{margin:0;}
.footer-bottom .small{margin:0; line-height:1.4;}
.ft-legal{margin:0;}

/* Screen-reader only helper */
.sr-only{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Prevent body scroll when mobile nav is open */
body.no-scroll{overflow:hidden;}

/* Mobile nav backdrop */
.nav-backdrop{
    position:fixed;
    left:0; right:0;
    top: calc(var(--topbar-h, 0px) + var(--header-h, 56px));
    bottom:0;
    background:rgba(0,0,0,.36);
    z-index:1100;
}


/* Avoid hairline gaps on mobile */
.topbar, .site-header { transform: translateZ(0); backface-visibility: hidden; }


@media (max-width:900px){
    .nav-toggle{display:inline-flex;justify-content:center;align-items:center;margin-left:auto}
    .primary-nav{
        left:0; right:0;
        top: calc(var(--topbar-h, 0px) + var(--header-h, 56px));



        transition:
        flex-direction:column; align-items:flex-start;
        gap:.5rem;



        will-change:
    }
    .primary-nav.open{ transform: translateY(0); }
    .nav-cta{ display:none; } /* ensure no CTA buttons on mobile */
    .nav-backdrop{
        position:fixed;
        left:0; right:0;
        top: calc(var(--topbar-h, 0px) + var(--header-h, 56px));
        bottom:0;
        background:rgba(0,0,0,.36);
        z-index:1100;
    }
    .primary-nav ul{ flex-direction:column; gap:.75rem; padding-bottom:.25rem; }
}


/* === Mobile-first nav (off-canvas by default) ============================= */
.primary-nav{

    left: 0; right: 0;
    top: calc(var(--topbar-h, 0px) + var(--header-h, 56px));
    width: 100%;





    transition:
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: .5rem;



    will-change:
}
.primary-nav.open{ transform: translateY(0); opacity:1; pointer-events:auto; }
.primary-nav ul{ flex-direction: column; gap: .75rem; padding-bottom: .25rem; list-style:none; margin:0; padding-left:0; }
.nav-backdrop[hidden]{ display:none !important; }
.nav-backdrop{
    position:fixed;
    left:0; right:0;
    top: calc(var(--topbar-h, 0px) + var(--header-h, 56px));
    bottom:0;
    background:rgba(0,0,0,.36);
    z-index:1100;
}

/* Toggle visible by default (mobile); hidden on desktop */
.nav-toggle{ display:inline-flex; justify-content:center; align-items:center; margin-left:auto; }

/* Desktop overrides */

.primary-nav{









    flex-direction: row;
    align-items: center;
    gap: var(--s-5);
}
.primary-nav ul{ flex-direction: row; gap: var(--s-4); padding: 0; }
.nav-backdrop{
    position:fixed;
    left:0; right:0;
    top: calc(var(--topbar-h, 0px) + var(--header-h, 56px));
    bottom:0;
    background:rgba(0,0,0,.36);
    z-index:1100;
}
body.no-scroll{ overflow:auto; }
}


/* Overlay should not cover the header/topbar */
.nav-backdrop{
    top: calc(var(--topbar-h, 0px) + var(--header-h, 56px)) !important;
    left: 0; right: 0; bottom: 0;
}


.site-header{ z-index: 1102; }
.topbar{ position: relative; z-index: 1103; }



}


}

/* iOS safe-area handling for top bars (no extra gap on desktop) */
@supports (padding: max(0px)) {
    .topbar { padding-top: env(safe-area-inset-top, 0); }
}


.brand{ flex:0 0 auto; }
.primary-nav{









    flex-direction: row;
    align-items: center;
    gap: var(--s-5);
    margin-left: auto !important;
    justify-content: flex-end;
}
.primary-nav ul{ flex-direction: row; gap: var(--s-4); padding: 0; list-style: none; margin: 0; }
.nav-toggle{ display:none; }
.nav-backdrop{ display:none !important; }
body.no-scroll{ overflow:auto; }
}


/* === NAV: mobile-first (active up to 1279px) ============================== */
.nav-toggle{ display:inline-flex; justify-content:center; align-items:center; margin-left:auto; }

.primary-nav{
    position: fixed;
    left: 0; right: 0;
    top: calc(var(--topbar-h, 0px) + var(--header-h, 56px));
    width: 100%;
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
    transition: transform .24s cubic-bezier(.2,.9,.2,1), opacity .2s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem 1.25rem 1.25rem;
    gap: .5rem;
    max-height: calc(100dvh - (var(--topbar-h, 0px) + var(--header-h, 56px)));
    overflow: auto;
    background: #fff;
    border-bottom: 1px solid var(--line);
    will-change: transform;
    z-index: 1101;
}
.primary-nav.open{ transform: translateY(0); opacity:1; pointer-events:auto; }

.nav-backdrop[hidden]{ display:none !important; }
.nav-backdrop{
    position:fixed;
    left:0; right:0;
    top: calc(var(--topbar-h, 0px) + var(--header-h, 56px));
    bottom:0;
    background:rgba(0,0,0,.36);
    z-index:1100;
}
.primary-nav ul{ flex-direction: column; gap: .75rem; padding: 0 0 .25rem 0; list-style:none; margin:0; }
.primary-nav a{ display:block; padding:.6rem 0; }

/* === Desktop from 1280px ================================================== */
@media (min-width: 1280px){
    .nav-toggle{ display:none; }
    .primary-nav{
        position: static;
        transform: none;
        opacity: 1;
        pointer-events: auto;
        background: transparent;
        border: 0;
        padding: 0;
        max-height: none;
        overflow: visible;
        flex-direction: row;
        align-items: center;
        gap: var(--s-5);
        margin-left: auto !important;
        justify-content: flex-end;
    }
    .primary-nav ul{ flex-direction: row; gap: var(--s-4); padding: 0; }
    .nav-backdrop{ display:none !important; }
    body.no-scroll{ overflow:auto; }
}


/* === Force hamburger visibility by breakpoint ============================ */
@media (max-width: 1279px){
    .site-header .header-row{ display:flex; align-items:center; }
    .site-header .nav-toggle{ display:inline-flex !important; margin-left:auto; }
}
@media (min-width: 1280px){
    .site-header .nav-toggle{ display:none !important; }
}

/* === Espace familles (dropdown) — additif, safe === */
.primary-nav .has-dropdown { position: relative; }

.primary-nav .dropdown-toggle{
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .6rem 0;
    background: transparent; border: 0; appearance: none;
    font: inherit; font-weight: 600;
    color: var(--muted);
    cursor: pointer;
}
.primary-nav .dropdown-toggle:hover,
.primary-nav .dropdown-toggle.active{ color: var(--text); }
.primary-nav .dropdown-toggle:focus{ outline: none; }
.primary-nav .dropdown-toggle:focus-visible{
    outline: 2px solid var(--primary, #7B1FA2);
    outline-offset: 2px;
}

/* petite rotation de la flèche si la classe .chev est présente */
.primary-nav .dropdown-toggle .chev{ transition: transform .2s ease; }
.primary-nav .has-dropdown:hover .dropdown-toggle .chev,
.primary-nav .has-dropdown:focus-within .dropdown-toggle .chev{ transform: rotate(180deg); }

/* Menu déroulant (desktop) */
.primary-nav .dropdown-menu{
    position: absolute;
    top: calc(100%); right: 0;
    min-width: 220px;
    background: #fff;
    border: 1px solid var(--line, rgba(0,0,0,.1));
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.1);
    padding: 8px; margin: 0; list-style: none;
    display: none;
    z-index: 2000;
}

/* Ouverture au survol / focus */
.primary-nav .has-dropdown:hover .dropdown-menu,
.primary-nav .has-dropdown:focus-within .dropdown-menu{ display: block; }

/* Items du menu */
.primary-nav .dropdown-menu a,
.primary-nav .dropdown-menu .linklike{
    display: block;
    width: 100%;
    text-align: left;
    padding: .6rem .75rem;
    text-decoration: none;
    color: inherit;
    background: none; border: 0;
    border-radius: 8px;
    white-space: nowrap;
    cursor: pointer;
}
.primary-nav .dropdown-menu a:hover,
.primary-nav .dropdown-menu .linklike:hover{
    background: rgba(0,0,0,.05);
}
.primary-nav .dropdown-menu form{ margin: 0; }

/* Mobile : le menu s’intègre dans la colonne du off-canvas */
@media (max-width: 1279px){
    .primary-nav .dropdown-menu{
        position: static;
        display: block;
        box-shadow: none; border: 0; padding: 0; margin-top: .25rem;
        min-width: 0; background: transparent;
    }
}



/* === Section breakpoints: mobile up to 1279px ============================= */
/* Nos domaines d’action (simple features) */
@media (max-width: 1279px){
    .pillars.simple .features{ grid-template-columns: 1fr; }
}

/* À l’agenda (events list) */
@media (max-width: 1279px){
    .events{ grid-template-columns: 1fr; }
}

/* === CTA stickers on mobile: keep on the right, smaller ==================== */
@media (max-width: 1279px){
    .band-grid{ grid-template-columns: 1fr 120px; align-items: center; }
    .band-art{ order: 0; min-height: 0; width: 120px; position: relative; }
    .sticker{ width: 44px; height: 44px; }
    .sticker.heart{ top: 0; left: auto; right: 16px; }
    .sticker.hands{ top: 52px; left: auto; right: 0; }
    .sticker.star{ top: 104px; left: auto; right: 28px; }
}


/* === CTA mobile: vertically center right-side icons ======================= */
@media (max-width: 1279px){
    .band-grid{ grid-template-columns: 1fr 120px; align-items: center; }
    .band-art{
        order: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-end;     /* keep icons on the right */
        justify-content: center;   /* vertically center the group */
        gap: 10px;
        width: 120px;
        min-height: 140px;
        position: relative;
    }
    .band-art .sticker{
        position: static;          /* ignore previous absolute positions */
        width: 44px; height: 44px; /* smaller on mobile */
    }
    .band-art .sticker.heart,
    .band-art .sticker.hands,
    .band-art .sticker.star{
        top:auto; right:auto; bottom:auto; left:auto; /* defensive reset */
    }
}


/* === Hero creative buttons =============================================== */
.hero-actions{
    display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.1rem;
}
.hero-btn{
    --pad-x:1.15rem;
    display:flex; align-items:center; gap:.85rem;
    padding:.9rem var(--pad-x);
    border-radius:999px;
    text-decoration:none;
    border:2px solid transparent;
    box-shadow:var(--shadow);
    transition:transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.hero-btn .i{ font-size:1.2rem; }
.hero-btn .t{ display:flex; flex-direction:column; line-height:1.1; }
.hero-btn .t strong{ font-size:1.04rem; }
.hero-btn .t em{ font-style:normal; font-size:.92rem; color:var(--muted); }
.hero-btn .arrow{ margin-left:auto; font-weight:800; }

/* filled gradient */
.hero-btn.fill{
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    color:#fff;
    border-color: transparent;
}
.hero-btn.fill .t em{ color: rgba(255,255,255,.9); }
.hero-btn.fill:hover{ transform: translateY(-2px); box-shadow: 0 6px 22px rgba(106,27,154,.24); }

/* gradient line (no fill) */
.hero-btn.line{
    background: linear-gradient(#fff,#fff) padding-box,
    linear-gradient(90deg, var(--brand), var(--brand-2)) border-box;
    color:#3b2354;
}
.hero-btn.line:hover{ transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }

/* mobile behavior: full width pills and comfortable spacing */
@media (max-width:1279px){
    .hero-actions{ gap:.6rem; }
    .hero-btn{ width:100%; justify-content:flex-start; }
}


/* === Hero minimalist link CTAs (different from band CTA) ================== */
.hero-links{
    display:flex; flex-wrap:wrap; gap:1rem 1.5rem; align-items:flex-start; margin-top:1.1rem;
}
.link-cta{
    display:inline-grid;
    grid-template-columns:auto auto;
    grid-template-rows:auto auto;
    align-items:center;
    gap:2px .5rem;
    text-decoration:none;
    position:relative;
    padding-bottom:.2rem;
}
.link-cta .label{ font-weight:900; font-size:1.08rem; line-height:1.1; }
.link-cta .sub{ grid-column:1 / -1; font-weight:600; color:var(--muted); font-size:.92rem; line-height:1.2; }
.link-cta .arrow{ font-weight:900; transition: transform .12s ease; }
.link-cta:hover .arrow{ transform: translateX(3px); }

/* Subtle underline accent */
.link-cta::after{
    content:"";
    position:absolute; left:0; right:0; bottom:-1px; height:2px;
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    transform-origin:left;
    transform: scaleX(.55);
    transition: transform .18s ease;
}
.link-cta:hover::after{ transform: scaleX(1); }

/* Primary variant with soft highlighter behind the label */
.link-cta.primary .label{
    background: linear-gradient(0deg, rgba(179,106,209,.35), rgba(179,106,209,.35));
    background-size: 100% 55%;
    background-repeat: no-repeat;
    background-position: 0 70%;
    border-radius:6px;
    padding:0 .1rem;
}

/* Mobile: stack with full width tap targets */
@media (max-width:1279px){
    .hero-links{ gap:.8rem; }
    .link-cta{ grid-template-columns:auto 1fr; width:100%; }
    .link-cta .label{ font-size:1.06rem; }
    .link-cta .sub{ font-size:.9rem; }
}


/* === Brand colors on topbar & footer (like current site) ================== */
/* Topbar: violet gradient + white text */
.topbar{
    background: linear-gradient(90deg, var(--brand), var(--brand-2)) !important;
    color:#fff !important;
    border-bottom:none !important;
}
.topbar .small,
.topbar a,
.topbar .social{ color:#fff !important; opacity:.96; }
.topbar .social svg{ width:18px; height:18px; }
.topbar .social svg path{ fill:#fff; }
.topbar .sep{ opacity:.7; }

/* Footer: deep violet gradient + white text */
.site-footer.creative-footer{
    background: linear-gradient(180deg, #5A1A86, #7C2FA7 70%) !important;
    color:#fff !important;
    border-top:none !important;
}
.creative-footer .ft-title,
.creative-footer .brand-footer .brand-name,
.creative-footer .tagline{ color:#fff !important; }

/* Footer links & chips on dark */
.creative-footer .ft-nav a,
.creative-footer .text-link,
.creative-footer .ft-legal a{ color:#fff !important; opacity:.96; }
.creative-footer .ft-nav a:hover,
.creative-footer .text-link:hover,
.creative-footer .ft-legal a:hover{ opacity:1; text-decoration:underline; text-underline-offset:3px; }
.creative-footer .social-chip{
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.28);
    color:#fff;
    box-shadow:none;
}
.creative-footer .social-chip:hover{ background: rgba(255,255,255,.12); }

/* Footer bottom bar */
.footer-bottom{
    background:#4A1A72 !important;
    border-top: 1px solid rgba(255,255,255,.18) !important;
    color:#fff !important;
}
.footer-bottom .small{ color:#fff !important; }
.ft-legal span{ color:rgba(255,255,255,.6); }


/* vertical separators between items on desktop only */
@media (min-width: 901px){
    .stats-row{ display:grid; grid-template-columns: repeat(4, 1fr); }
    .stats-row .stat{ padding-inline: var(--s-5); }

}

/* compact layout on small screens (2 columns, no separators) */
@media (max-width: 900px){
    .stats-row{ display:grid; grid-template-columns: repeat(2, 1fr); }
    .stats-row .stat::before{ display:none; }
}


/* === Stats separators off ================================================== */
.stats-row .stat::before,
.stats-row .stat::after{ content:none !important; display:none !important; }


/* === Stats (clean, no boxes, no separators) ============================== */
.section.stats{ border:0; }
.stats-row{ display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); align-items: center; }
@media (max-width: 1279px){
    .stats-row{ grid-template-columns: repeat(2, 1fr); }
}
.stat{
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    text-align: center !important;
    position: static !important;
}
.stat .n{ font-size: clamp(1.9rem, 4vw, 2.3rem); font-weight: 900; color: #3b2354; line-height: 1; }
.stat .l{ color: var(--muted); margin-top: .25rem; }
.stats-row .stat::before,
.stats-row .stat::after{ content: none !important; display: none !important; }


/* === Footer contact on dark background: high contrast ===================== */
.creative-footer .info-list li{ padding:.35rem 0; }
.creative-footer .info-list li + li{ border-top:1px dashed rgba(255,255,255,.15); margin-top:.35rem; padding-top:.6rem; }
.creative-footer .info-list svg{ width:20px; height:20px; color:#fff; opacity:.95; filter: drop-shadow(0 1px 0 rgba(0,0,0,.15)); }
.creative-footer .info-list svg path{ fill: currentColor; }
.creative-footer .info-list strong{ color:#fff; }
.creative-footer .info-list p{ color:rgba(255,255,255,.9); }
.creative-footer .info-list a{ color:#fff; text-decoration:underline; text-underline-offset:2px; }
.creative-footer .info-list a:hover{ text-decoration-thickness:2px; }



/* ===== GLOBAL ===== */
h1.entry-title.main_title { display: none !important; }

.se-page * { box-sizing:border-box; }
.se-page .se-band{padding:48px 0;}
.se-page .se-wrap{max-width:1200px;margin:0 auto;padding:0 18px;}
.se-page .se-center{text-align:center;}
.se-page .se-left{text-align:left;}
.se-page .se-muted{color:#6b7280;}
/* tailles réduites */
.se-page .se-lead{font-size:16px; line-height:1.65;}
.se-page .se-title{margin:0 0 10px; font-size:clamp(22px,2.6vw,30px); line-height:1.2;}
.se-page .se-pill{display:inline-block; padding:6px 12px; border-radius:999px; background:#f4ecff; color:#5a2d82; font-weight:700; font-size:13px;}
.se-page .se-cta-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
.se-page .se-btn{display:inline-block; padding:12px 22px; border-radius:10px; font-weight:700; text-decoration:none; transition:.25s; border:0; font-size:14px;}
.se-page .se-btn--violet{background:#6A1B9A; color:#fff;}
.se-page .se-btn--violet:hover{filter:brightness(0.9);}
.se-page .se-btn--lightviolet{background:#9C27B0; color:#fff;}
.se-page .se-btn--lightviolet:hover{filter:brightness(0.9);}

/* Fonds */
.se-page .bg-grad-1{background:linear-gradient(135deg,#fbfbff 0%,#f3ecff 35%,#f7f0ff 100%)}
.se-page .bg-grad-2{background:linear-gradient(135deg,#f9fbff 0%,#eef6ff 35%,#f1f7ff 100%)}
.se-page .bg-grad-3{background:linear-gradient(135deg,#f7fff9 0%,#ecfff3 35%,#f3fff6 100%)}

/* ===== PARTIE 1 : SCOLAIRE ===== */
.se-page .se-zig{display:grid;grid-template-columns:minmax(320px,1.1fr) minmax(320px,.9fr);gap:32px;align-items:center}
.se-page .se-photo{
    position:relative;border-radius:18px;overflow:hidden;
    box-shadow:0 14px 38px rgba(18,16,31,.18);background:#eae6f7;
    aspect-ratio:3/2;
}
.se-page .se-photo > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.se-page .se-stamp{
    position:absolute; right:10px; top:10px; background:#6A1B9A; color:#fff;
    padding:8px 12px; border-radius:12px; font-weight:800; line-height:1;
    box-shadow:0 10px 24px rgba(106,27,154,.3);
}
/* bloc blanc pour la liste */
.se-page .se-scol-card{
    background:#fff; border:1px solid #eee; border-radius:16px; padding:10px; margin-top: 20px;
    box-shadow:0 10px 24px rgba(18,16,31,.08);
}
.se-page .se-checks{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.se-page .se-checks li{display:flex;gap:8px}
@media (max-width:980px){
    .se-page .se-zig{grid-template-columns:1fr;gap:18px}
    .se-page .se-stamp{top:auto; bottom:10px; right:10px}
}

/* ===== PARTIE 2 : CULTURE & LOISIRS ===== */
.se-page .se-flex-2{ display:flex; gap:26px; align-items:flex-start; }
.se-page .se-col-left{ flex:1 1 50%; }
.se-page .se-col-right{ flex:1 1 50%; }
.se-page .se-mosaic{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.se-page .se-tile{
    background:#fff; border:1px solid #eee; border-radius:14px; overflow:hidden;
    max-height: 230px;
    box-shadow:0 8px 20px rgba(18,16,31,.08);
}
.se-page .se-tile img{ display:block;width:100%; }
.se-page .se-featureCard{
    background:#fff; border:1px solid #eee; border-radius:14px; padding:14px;
    box-shadow:0 8px 20px rgba(18,16,31,.08); margin-top:14px;
}
.se-page .se-feature{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px;}
.se-page .se-feature:last-child{margin-bottom:0;}
.se-page .se-feature_icon{
    width:36px;height:36px;border-radius:999px;display:grid;place-items:center;
    background:#f4ecff;color:#5a2d82;font-weight:800;
}
.se-page .se-feature_body{font-size:14px;}
.se-page .se-feature_body p{font-size:15px; font-weight: bolder}

/* ===== PARTIE 3 : COMMUNAUTÉ ===== */
.se-page .se-tags{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:0 0 16px;}
.se-page .se-tag{background:#f5f0ff; color:#5a2d82; border:1px solid #e8ddff; padding:6px 10px; border-radius:999px; font-weight:600; font-size:12px;}
.se-page .se-grid{display:grid; gap:20px;}
.se-page .se-3{grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:980px){ .se-page .se-3{grid-template-columns:1fr;} }
.se-page .se-ticket{
    position:relative; background:#fff; border:1px dashed #c8b7e6; border-radius:18px; padding:16px;
    box-shadow:0 10px 28px rgba(18,16,31,.08); text-align:left;
}
.se-page .se-ribbon{
    position:absolute; top:-10px; left:16px; background:#6A1B9A; color:#fff; font-weight:800; font-size:11px;
    padding:6px 8px; border-radius:7px; box-shadow:0 8px 18px rgba(106,27,154,.3);
}
.se-page .se-ticket h4{margin:6px 0 6px; font-size:17px;}
.se-page .se-ticket p{margin:0 0 6px; font-size:15px;}

/* ===== INFOS PRATIQUES ===== */
.se-page .se-info .se-head{ text-align:center; margin-bottom:16px; }
.se-page .se-info .se-sub{ color:#6b7280; margin-top:-6px; }
.se-page .se-info-grid{ display:flex; gap:20px; align-items:stretch; justify-content:space-between; text-align:left; }
.se-page .se-info-left{ flex:1 1 58%; min-width:0; }
.se-page .se-info-right{ flex:1 1 42%; min-width:280px; }
.se-page .se-stack{ display:grid; gap:16px; }
.se-page .se-mapcard{
    background:#fff; border:1px solid #eee; border-radius:18px; overflow:hidden;
    box-shadow:0 12px 30px rgba(18,16,31,.08);
}
.se-page .se-maphead{
    padding:14px 16px; display:flex; align-items:center; gap:10px;
    background:linear-gradient(135deg,#fbfbff,#f3ecff); border-bottom:1px solid #eee;
}
.se-page .se-icon{
    width:34px; height:34px; border-radius:999px; display:grid; place-items:center;
    background:#f4ecff; color:#5a2d82; font-size:16px; font-weight:800;
}
.se-page .se-mapcard iframe{ display:block; width:100%; height:340px; border:0; }
.se-page .se-tile-info{
    background:#fff; border:1px solid #eee; border-radius:14px; padding:16px;
    box-shadow:0 8px 22px rgba(18,16,31,.08);
}
.se-page .se-tile-info h4{ margin:0 0 6px; font-size:17px; display:flex; align-items:center; gap:8px; }
.se-page .se-hours{ display:grid; gap:4px; font-size:15px; }
/* point vert animé */
.se-page .se-next{ display:inline-flex; align-items:center; gap:8px; margin-top:8px; font-weight:700; color:#6A1B9A; }
.se-page .se-dotgreen{
    width:10px; height:10px; border-radius:50%;
    background:#27ae60; box-shadow:0 0 0 0 rgba(39,174,96,.45);
    animation:se-pulse 1.6s ease-out infinite;
}
@keyframes se-pulse{
    0%   { transform:scale(1);   box-shadow:0 0 0 0 rgba(39,174,96,.45); }
    70%  { transform:scale(1.08);box-shadow:0 0 0 8px rgba(39,174,96,0); }
    100% { transform:scale(1);   box-shadow:0 0 0 0 rgba(39,174,96,0); }
}
@media (prefers-reduced-motion: reduce){ .se-page .se-dotgreen{ animation:none; } }
@media (max-width:980px){
    .se-page .se-info-grid{ display:block; }
    .se-page .se-info-right{ margin-top:16px; }
}

/* Base chips */
.se-page .se-chip{
    display:inline-flex; align-items:center; gap:8px; padding:6px 10px;
    border-radius:999px; font-size:13px; font-weight:600; line-height:1;
    background:#f5f0ff; color:#5a2d82; border:1px solid #e8ddff; white-space:nowrap;
}
.se-page .se-chip .se-chip__icon{ display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%; background:#f0e6ff; font-size:12px; }
.se-page .se-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.se-page .se-chip--violet{ background:#6A1B9A; color:#fff; border-color:#6A1B9A; }
.se-page .se-chip--outline{ background:transparent; color:#5a2d82; border-color:#cbb7f1; }
.se-page .se-chip--gray{ background:#f6f7fb; color:#475569; border-color:#e6e9f2; }
.se-page .se-chip--sm{ padding:4px 8px; font-size:12px; }
.se-page .se-chip--lg{ padding:8px 12px; font-size:14px; }
.se-page .se-chip--link{ cursor:pointer; text-decoration:none; transition:filter .2s, transform .02s; }
.se-page .se-chip--link:hover{ filter:brightness(.97); }
.se-page .se-chip--link:active{ transform:translateY(1px); }
.se-page .se-chip--disabled{ opacity:.55; pointer-events:none; }



/* ====== AUTH PAGES (inscription & connexion) =============================== */
.auth-hero{
    background: linear-gradient(135deg,#fbfbff 0%,#f3ecff 40%,#f7f0ff 100%);
    border-bottom:1px solid var(--line);
    padding: var(--s-6) 0;
}
.auth-hero .pill{display:inline-block;padding:6px 12px;border-radius:999px;background:#f4ecff;color:#5a2d82;font-weight:800;}
.auth-hero h1{margin:.4rem 0 .2rem;font-size:clamp(26px,3vw,38px);line-height:1.15;}
.auth-hero .lead{color:var(--muted);}

/* wizard steps */
.wizard{display:flex;gap:12px;list-style:none;padding:0;margin:0 0 18px;counter-reset:st}
.wizard li{flex:1 1 0;display:grid;grid-template-columns:34px 1fr;gap:8px;align-items:center;background:#fff;border:1px solid #eee;border-radius:12px;padding:8px 10px;box-shadow:0 6px 16px rgba(18,16,31,.06)}
.wizard li span{display:grid;place-items:center;width:28px;height:28px;border-radius:999px;background:#f4ecff;color:#5a2d82;font-weight:900;}
.wizard li em{font-style:normal;font-weight:800;color:#374151;}
.wizard li.active{border-color:#cbb7f1;box-shadow:0 8px 18px rgba(106,27,154,.10)}
.wizard li.current span{background:#6A1B9A;color:#fff}

/* cards & layout */
.auth .card{background:#fff;border:1px solid #eee;border-radius:16px;padding:16px;box-shadow:0 10px 24px rgba(18,16,31,.06)}
.auth .card.centered{text-align:center}
.auth .card legend{font-weight:900;margin-bottom:6px}
.auth .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.auth .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.auth .grid-2 .wide,.auth .grid-3 .wide{grid-column:1/-1}
@media (max-width:1279px){.auth .grid-2,.auth .grid-3{grid-template-columns:1fr}}

.fstack{display:grid;gap:12px}

/* floating labels */
.fgroup{position:relative;display:block}
.fgroup input,.fgroup select,.fgroup textarea{
    width:100%;border:1px solid #e5e7eb;border-radius:12px;background:#fff;padding:12px 14px;font-size:15px;color:#111827;transition:border .2s, box-shadow .2s;
}
.fgroup textarea{min-height:110px;resize:vertical}
.fgroup input:focus,.fgroup select:focus,.fgroup textarea:focus{outline:none;border-color:#9C27B0;box-shadow:0 0 0 4px rgba(156,39,176,.12)}
.fgroup.floating > span{
    position:absolute;left:12px;top:12px;padding:0 4px;background:#fff;border-radius:6px;
    color:#6b7280;transition:all .15s;pointer-events:none;
}
.fgroup.floating :is(input,select,textarea):focus + span,
.fgroup.floating :is(input,select,textarea):not(:placeholder-shown) + span{
    top:10px;font-size:12px;color:#5a2d82;
}

/* password helpers */
.fgroup.password .showpass{
    position:absolute;right:8px;top:8px;border:0;background:transparent;cursor:pointer;font-size:16px;
}
.fgroup.password .meter{height:4px;background:#eee;border-radius:999px;margin-top:6px;overflow:hidden}
.fgroup.password .meter i{display:block;height:100%;width:calc(100% * var(--p, 0));background:linear-gradient(90deg,#ff6473,#ffb400,#12b5a6,#6A1B9A);transition:width .2s}

/* checkboxes */
.check{display:flex;gap:8px;align-items:flex-start}
.check input{width:18px;height:18px;margin-top:2px}

/* kids */
.kids{display:grid;gap:12px;margin-bottom:12px}
.kid .kid-actions{display:flex;justify-content:flex-end}
.kid .btn.ghost{border:1px dashed #d1c4e9}

/* recap */
.recap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.recap-grid h4{margin:.2rem 0 .2rem}
.kid-mini{padding:8px;border:1px solid #eee;border-radius:10px;margin-bottom:8px;background:#fff}
@media (max-width:1279px){.recap-grid{grid-template-columns:1fr}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:12px;font-weight:900;border:0;background:#6A1B9A;color:#fff;text-decoration:none;cursor:pointer;transition:transform .02s, filter .2s}
.btn:hover{filter:brightness(.95)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:linear-gradient(#fff,#fff) padding-box, linear-gradient(90deg,#6A1B9A,#9C27B0) border-box;border:2px solid transparent;color:#3b2354}
.btn.outline{background:#fff;border:2px solid #cbb7f1;color:#3b2354}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}

.form-msg{margin-top:8px;font-weight:700;color:#7c3aed}
.big-emoji{font-size:42px;margin-bottom:6px}

/* success block */
.success .card{max-width:720px;margin:0 auto}

/* narrow card for login */
.card.narrow{max-width:560px;margin:0 auto}



/* ================== MON COMPTE (PARENT) ================== */
.account-hero{
    background: linear-gradient(135deg,#fbfbff 0%,#f3ecff 40%,#f7f0ff 100%);
    border-bottom:1px solid var(--line, #eee);
    padding: 48px 0;
}
.account .hero-row{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 32px; align-items: center; }
@media (max-width:1279px){ .account .hero-row{ grid-template-columns: 1fr; } }
.account .pill{display:inline-block;padding:6px 12px;border-radius:999px;background:#f4ecff;color:#5a2d82;font-weight:800;}
.account h1{ margin:.4rem 0 .2rem; font-size:clamp(26px,3vw,38px); line-height:1.15; }
.account .lead{ color:#6b7280; }
.account .chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.account .chip{ background:#f5f0ff; color:#5a2d82; border:1px solid #e8ddff; border-radius:999px; padding:6px 10px; font-weight:700; font-size:12px; }

.account .selectKid select{ appearance:none; padding-right:36px; }
.account .kpi-circles{ display:flex; gap:14px; margin-top:8px; flex-wrap:wrap; }
.account .kpi-circles .circle{
    --p:72; width:92px; height:92px; border-radius:50%;
    background: conic-gradient(#6A1B9A calc(var(--p)*1%), #eee 0);
    display:grid; place-items:center; position:relative;
}
.account .kpi-circles .circle::before{
    content:""; position:absolute; inset:8px; background:#fff; border-radius:50%;
}
.account .kpi-circles .circle > b{ position:relative; z-index:1; font-size:18px; }
.account .kpi-circles .circle > span{ position:absolute; width:100%; text-align:center; bottom:-18px; font-size:11px; color:#6b7280; }

/* Tabs */
.account .tabs-nav{ display:flex; gap:8px; flex-wrap:wrap; }
.account .tabs-nav a{
    display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px;
    background:#fff; border:1px solid #e7e3f3; color:#3b2354; font-weight:800; text-decoration:none;
}
.account .tabs-nav a.active{ background:#6A1B9A; color:#fff; border-color:#6A1B9A; }

/* Cards & grids */
.account .card{
    background:#fff; border:1px solid #eee; border-radius:16px; padding:16px;
    box-shadow:0 10px 24px rgba(18,16,31,.06);
}
.account .grid-3{ display:grid; gap:16px; grid-template-columns: repeat(3,1fr); }
.account .grid-2{ display:grid; gap:16px; grid-template-columns: repeat(2,1fr); }
@media (max-width:1279px){ .account .grid-3, .account .grid-2{ grid-template-columns: 1fr; } }

.account .panel-head{ margin-bottom:8px; }
.account .panel-head h2{ margin:0; }
.clean{ list-style:none; padding:0; margin:0; display:grid; gap:6px; }
.badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; background:#f6f7fb; color:#475569; font-weight:800; font-size:12px; }
.badge.ok{ background:#ecfdf5; color:#065f46; }
.badge.ghost{ background:#fff; border:1px solid #e7e3f3; color:#3b2354; }

/* Overview notes */
.account .notes{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.account .notes li{ display:flex; gap:8px; align-items:center; }
.account .notes .dot{ width:10px; height:10px; border-radius:50%; background:#e5e7eb; }
.account .notes .dot.ok{ background:#10b981; }

/* Presence calendar */
.account .cal{ display:grid; gap:12px; }
.account .cal-head{ display:flex; justify-content:space-between; align-items:center; }
.account .cal-title{ font-weight:900; font-size:18px; }
.account .cal-grid{ display:grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap:8px; }
.account .cal-dayname{ text-align:center; font-weight:800; color:#6b7280; font-size:12px; }
.account .cal-cell{ background:#fff; border:1px solid #eee; border-radius:12px; padding:8px; min-height:72px; display:flex; flex-direction:column; gap:6px; }
.account .cal-cell.empty{ background:transparent; border-color:transparent; }
.account .cal-num{ font-weight:800; color:#374151; }
.account .cal-cell.sat{ box-shadow:0 6px 16px rgba(18,16,31,.05); }
.account .cal-status{ margin-top:auto; font-size:12px; font-weight:800; text-align:center; padding:6px 8px; border-radius:999px; border:1px solid #e7e3f3; background:#faf7ff; color:#3b2354; }
.account .cal-status.yes{ background:#ecfdf5; border-color:#bbf7d0; color:#065f46; }
.account .cal-status.no{ background:#fef2f2; border-color:#fecaca; color:#991b1b; }
.account .cal-status.maybe{ background:#fffbeb; border-color:#fde68a; color:#7c2d12; }
.account .cal-status.none{ background:#f6f7fb; border-color:#e6e9f2; color:#6b7280; }

@media (max-width:900px){
    .account .cal-grid{ gap:6px; }
    .account .cal-cell{ min-height:64px; padding:6px; }
}

/* Messages */
.account .msg-layout{ display:grid; grid-template-columns: 2fr 1fr; gap:16px; }
@media (max-width:1279px){ .account .msg-layout{ grid-template-columns:1fr; } }
.account .msg-list{ height:340px; overflow:auto; }
.account .msg{ display:grid; gap:4px; margin-bottom:10px; }
.account .msg.left{ justify-items:start; }
.account .msg.right{ justify-items:end; }
.account .msg .bubble{ max-width:75%; padding:10px 12px; border-radius:14px; background:#f6f7fb; border:1px solid #e6e9f2; }
.account .msg.right .bubble{ background:#6A1B9A; color:#fff; border-color:#6A1B9A; }
.account .msg .when{ font-size:12px; color:#6b7280; }

/* Settings */
.account .kid-mini-list{ display:grid; gap:8px; }
.account .kid-mini{ display:flex; gap:10px; justify-content:space-between; align-items:center; padding:10px; border:1px dashed #d1c4e9; border-radius:12px; }

/* Buttons & forms */
.account .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 18px; border-radius:12px; font-weight:900; border:0; background:#6A1B9A; color:#fff; text-decoration:none; cursor:pointer; transition:transform .02s, filter .2s; }
.account .btn:hover{ filter:brightness(.95); }
.account .btn:active{ transform:translateY(1px); }
.account .btn.ghost{ background:linear-gradient(#fff,#fff) padding-box, linear-gradient(90deg,#6A1B9A,#9C27B0) border-box; border:2px solid transparent; color:#3b2354; }
.account .btn.outline{ background:#fff; border:2px solid #cbb7f1; color:#3b2354; }
.account .actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }

.account .fgroup{ position:relative; display:block; }
.account .fgroup input,.account .fgroup select,.account .fgroup textarea{
    width:100%; border:1px solid #e5e7eb; border-radius:12px; background:#fff; padding:12px 14px; font-size:15px; color:#111827;
}
.account .fgroup.floating > span{
    position:absolute; left:12px; top:12px; padding:0 4px; background:#fff; border-radius:6px;
    color:#6b7280; transition:all .15s; pointer-events:none;
}
.account .fgroup.floating :is(input,select,textarea):focus + span,
.account .fgroup.floating :is(input,select,textarea):not(:placeholder-shown) + span{
    top:-8px; font-size:12px; color:#5a2d82;
}

/* ===== SORTIES ===== */
.out-grid{ display:grid; gap:16px; grid-template-columns: repeat(3, 1fr); }
@media (max-width:1279px){ .out-grid{ grid-template-columns: 1fr; } }

.out-card{ display:grid; grid-template-columns: 1.1fr 1fr; gap:0; border:1px solid #eee; border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 10px 24px rgba(18,16,31,.06); }
@media (max-width:900px){ .out-card{ grid-template-columns:1fr; } }
.out-card .out-media{ position:relative; min-height:180px; background:#f5f5f7; }
.out-card .out-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.out-card .ribbon{ position:absolute; top:10px; left:10px; background:#6A1B9A; color:#fff; font-weight:800; font-size:11px; padding:6px 8px; border-radius:7px; box-shadow:0 8px 18px rgba(106,27,154,.3); }
.out-card .ribbon.green{ background:#2e7d32; }
.out-card .ribbon.orange{ background:#ff6f00; }
.out-card .out-body{ padding:14px; }
.out-card .out-body h3{ margin:0 0 6px; font-size:18px; }
.out-actions{ margin-top:8px; display:flex; gap:10px; flex-wrap:wrap; }

.out-ticket{ position:relative; background:#fff; border:1px dashed #c8b7e6; border-radius:16px; padding:14px; box-shadow:0 10px 24px rgba(18,16,31,.06); }
.out-ticket .ribbon{ position:absolute; top:-10px; left:14px; background:#6A1B9A; color:#fff; font-weight:800; font-size:11px; padding:6px 8px; border-radius:7px; box-shadow:0 8px 18px rgba(106,27,154,.3); }
.out-ticket .ribbon.green{ background:#2e7d32; }
.out-ticket .ribbon.orange{ background:#ff6f00; }
.out-ticket .t-head{ display:flex; flex-direction:column; gap:4px; }
.out-ticket h3{ margin:4px 0 0; font-size:18px; }
.out-ticket .t-date{ font-weight:800; color:#374151; }
.out-ticket .t-meta{ color:#6b7280; margin-top:4px; }

/* ======================= MODALE PLEIN ÉCRAN ======================= */
.modal.modal-full#authModal{
    position: fixed;
    inset: 0;
    z-index: 5000;            /* au-dessus du header/nav/backdrops */
    background: #fff;         /* masque TOUT le site (adieu le header visible) */
}
#authModal .modal-dialog{
    position: absolute;
    inset: 0;
    margin: 0;
    width: 100%;
    height: 100dvh;
    overflow: hidden;         /* scroll interne */
    padding:
        clamp(12px, 2.5vw, 24px)
        clamp(12px, 3.5vw, 24px)
        max(12px, env(safe-area-inset-bottom))
        clamp(12px, 3.5vw, 24px);
    display: flex;
    flex-direction: column;
}
#authModal .modal-close{
    position: fixed;
    right: max(12px, env(safe-area-inset-right));
    top:  max(12px, env(safe-area-inset-top));
    z-index: 1;
    width: 38px; height: 38px;
    border-radius: 10px;
    border: 1px solid #eee;
    background: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
#authModal h3{ margin: 48px 0 4px; font-size: clamp(18px, 2.6vw, 22px); }
#authModal .muted{ margin-bottom: 6px; }
#authModal .fstack{
    display: flex; flex-direction: column; gap: 12px;
    overflow: auto; padding-top: 8px;
}
#authModal .actions{
    position: sticky; bottom: 0;
    background: linear-gradient(#fff0, #fff 40%); padding-top: 8px; margin-top: 8px;
}

/* Empilement global pour éviter tout conflit */
.site-header, .topbar { z-index: 200; }
.nav-backdrop { z-index: 400; }
body.no-scroll{ overflow: hidden; }

/* Utilitaires */
.section{ padding:32px 0; }
.muted{ color:#6b7280; }


/* ====== BENEVOLE PAGE ====== */
.vb * { box-sizing: border-box; }
.vb-hero{
    background: linear-gradient(135deg,#fbfbff 0%,#f3ecff 40%,#f7f0ff 100%);
    border-bottom: 1px solid #eee;
    padding: 48px 0;
}
.vb-hero-wrap{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 28px; align-items:center; }
@media (max-width: 1080px){ .vb-hero-wrap{ grid-template-columns:1fr; } }

.vb-pill{
    display:inline-block; padding:6px 12px; border-radius:999px;
    background:#f4ecff; color:#5a2d82; font-weight:800; font-size:13px;
}
.vb h1{ margin:.4rem 0 .2rem; font-size:clamp(26px,3vw,38px); line-height:1.15; }
.vb-lead{ color:#6b7280; font-size:18px; max-width:700px; }

.vb-cta-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:14px; }
.vb-btn{
    display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border-radius:12px;
    background:#6A1B9A; color:#fff; text-decoration:none; font-weight:900; border:0;
    transition: filter .2s, transform .02s;
}
.vb-btn:hover{ filter:brightness(.95); }
.vb-btn:active{ transform: translateY(1px); }
.vb-btn--ghost{
    background: linear-gradient(#fff,#fff) padding-box, linear-gradient(90deg,#6A1B9A,#9C27B0) border-box;
    border: 2px solid transparent; color:#3b2354;
}

/* bulles décoratives (hero) */
.vb-hero-right{ display:flex; justify-content:center; }
.vb-bubbles{ display:grid; grid-template-columns: repeat(5, 60px); gap:12px; align-items:center; justify-content:center; }
.vb-bubbles span{
    width:60px; height:60px; border-radius:16px; display:grid; place-items:center; font-size:26px;
    background:#fff; border:1px solid #eee; box-shadow:0 10px 24px rgba(18,16,31,.06);
}
@media (max-width:600px){ .vb-bubbles{ grid-template-columns: repeat(5, 48px); } .vb-bubbles span{ width:48px; height:48px; } }

/* RAISONS */
.vb-band{ padding: 32px 0; }
.vb-reasons{ display:grid; gap:16px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px){ .vb-reasons{ grid-template-columns:1fr; } }

.vb-reason{ display:flex; gap:12px; align-items:flex-start; padding:10px 12px; border-radius:16px; background:#fff; border:1px solid #eee; box-shadow:0 6px 16px rgba(18,16,31,.05); }
.vb-ico{
    width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
    background:#f4ecff; color:#5a2d82; font-size:20px; font-weight:800; flex:0 0 42px;
}
.vb-reason h3{ margin:4px 0 2px; font-size:18px; }
.vb-reason p{ margin:0; color:#374151; }

/* STEPS */
.vb-steps{ background: linear-gradient(135deg,#f9fbff 0%,#eef6ff 35%,#f1f7ff 100%); padding: 40px 0; border-top:1px solid #eef; border-bottom:1px solid #eef; }
.vb-steps-head{ text-align:center; margin-bottom:12px; }
.vb-timeline{ list-style:none; margin:0; padding: 8px 0 0 0; display:grid; gap:16px; max-width:900px; margin-inline:auto; position:relative; }
.vb-step{ display:grid; grid-template-columns: 56px 1fr; gap:12px; align-items:flex-start; position:relative; }
.vb-step::before{
    content:""; position:absolute; left:28px; top:44px; bottom:-10px; width:2px; background:linear-gradient(#d7c9f2,#cbe0ff);
}
.vb-step:last-child::before{ display:none; }
.vb-step-num{
    width:56px; height:56px; border-radius:50%; display:grid; place-items:center; font-weight:900; color:#fff;
    background: linear-gradient(135deg,#6A1B9A,#9C27B0);
    box-shadow: 0 8px 18px rgba(106,27,154,.3);
}
.vb-step-body h4{ margin:4px 0 2px; font-size:18px; }
.vb-step-body p{ margin:0; color:#374151; }
.vb-hint{ color:#6b7280; font-size:14px; margin-top:6px; }
.vb-mini-cta{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.vb-chip{
    display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:999px; font-weight:800; text-decoration:none;
    background:#6A1B9A; color:#fff;
}
.vb-chip--ghost{ background:#fff; border:2px solid #cbb7f1; color:#3b2354; }

/* CTA FINAL */
.vb-cta-final{ padding: 40px 0; }
.vb-cta-box{
    background: radial-gradient(1200px 400px at 20% -20%, #f4ecff 0, transparent 60%),
    radial-gradient(1200px 400px at 120% 140%, #eef6ff 0, transparent 60%),
    linear-gradient(135deg,#6A1B9A,#9C27B0);
    color:#fff; border-radius:20px; padding: 26px; text-align:center;
    box-shadow: 0 18px 44px rgba(106,27,154,.35);
}
.vb-cta-box h2{ margin:0 0 8px; font-size: clamp(22px, 3.2vw, 30px); }
.vb-cta-box .vb-btn{ background:#fff; color:#3b2354; }
.vb-cta-box .vb-btn--ghost{
    background:transparent; color:#fff; border-color:#fff;
}

/* Utilitaires */
.no-scroll{ overflow:hidden; }
.small{ font-size: 14px; }

/* CTA final — lisibilité renforcée */
.vb-cta-box{
    position: relative;
    color:#fff; /* on garde le texte blanc */
}
.vb-cta-box::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    /* voile sombre + léger flou pour atténuer le bruit du fond */
    background: rgba(10, 15, 30, .55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.vb-cta-box > *{ position: relative; }

/* boutons : bon contraste sur voile sombre */
.vb-cta-box .vb-btn{ background:#fff; color:#111827; }
.vb-cta-box .vb-btn--ghost{ background:transparent; color:#fff; border-color:#fff; }

/* micro-ajustements confort */
.vb-cta-box h2{ text-wrap: balance; }
.vb-cta-final .vb-cta-row{
    justify-content: center;
}
