/* ============================================================
   Stains Espoir — app.css
   Sections : 1.Tokens  2.Typo  3.Layout  4.Composants
              5.Navigation  6.Footer  7.Public  8.Auth
              9.Compte  10.Utils  11.RTL  12.Responsive
   ============================================================ */

/* ── 1. TOKENS & RESET ─────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{height:100%;overflow-x:hidden;direction:ltr}
body{height:100%;max-width:100%}
body[dir="rtl"]{direction:rtl}
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}

:root{
    --brand:#6A1B9A;
    --brand-2:#B36AD1;
    --brand-mid:#8B3DB8;
    --brand-light:#F3E5F5;
    --brand-pale:#FAF5FF;
    --cream:#FFFBF7;
    --warm:#FFF4E6;
    --green:#2D6A4F;
    --green-2:#40916C;
    --bg:#ffffff;
    --surface:#F8F7FB;
    --surface-2:#ffffff;
    --text:#1F1235;
    --muted:#6B5878;
    --line:rgba(0,0,0,.12);
    --focus:#6A1B9A;
    --hero-img: url('/assets/images/hero-banner.jpg');
    --font: 'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --font-serif: 'Playfair Display', Georgia, serif;
    --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}
body.no-scroll{overflow:hidden}

/* ── 2. TYPOGRAPHIE ─────────────────────────────────────────── */
h1{font-size:var(--size-5);line-height:1.1}
h2{font-size:var(--size-4);line-height:1.2}
h3{font-size:var(--size-3)}
.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)}
.lead{font-size:var(--size-2);color:var(--muted)}
.underline{background:linear-gradient(0deg,transparent 70%,rgba(179,106,209,.3) 70%)}
.text-link{color:var(--brand);text-decoration:underline;text-underline-offset:3px}

/* ── 3. LAYOUT ──────────────────────────────────────────────── */
.container{width:min(1100px,100% - 2rem);margin-inline:auto}
.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-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-5)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}

/* ── 4. COMPOSANTS ──────────────────────────────────────────── */
/* Boutons */
.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}
.btn.is-loading{opacity:.7;pointer-events:none}

/* Cards */
.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:"→"}

/* Badges */
.badge{display:inline-block;padding:4px 8px;border-radius:999px;border:1px solid var(--line);font-size:.85em}
.badge.ok{background:#e8f8ee;color:#0a7a43;border-color:#b8e6c9}
.badge.no{background:#feecec;color:#b42318;border-color:#f3b4b0}
.badge.warn{background:#fff7e6;color:#a15c00;border-color:#ffd591}
.badge.ghost{background:var(--surface);color:var(--muted)}

/* Formulaires */
.fgroup{position:relative;display:block}
.fgroup input,.fgroup select,.fgroup textarea{
    width:100%;padding:14px 12px;border:1px solid #e3e6ea;
    border-radius:12px;font:inherit;background:#fff;min-width:0
}
.fgroup input:focus,.fgroup select:focus,.fgroup textarea:focus{
    outline:none;box-shadow:0 0 0 3px rgba(106,27,154,.15);border-color:#c9b0ee
}
.fgroup.floating>span{
    position:absolute;left:12px;top:12px;color:#8a8fa0;pointer-events:none;
    transition:all .16s ease;background:#fff;padding:0 6px;transform-origin:left top
}
.fgroup.floating input:not(:placeholder-shown)+span,
.fgroup.floating input:focus+span,
.fgroup.floating select:focus+span,
.fgroup.floating textarea:not(:placeholder-shown)+span,
.fgroup.floating textarea:focus+span{transform:translateY(-20px) scale(.85);color:var(--brand)}
.fgroup.floating input::placeholder,.fgroup.floating textarea::placeholder{color:transparent}
.hint{display:block;color:#8b90a3;font-size:.9rem;margin-top:6px}
.fstack{display:grid;gap:16px}
.label-check{display:flex;align-items:flex-start;gap:.5rem;cursor:pointer}
.form-msg{min-height:22px;margin-top:8px}
.error{color:#b91c1c}

/* Tags */
.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}

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

/* ── 5. NAVIGATION ──────────────────────────────────────────── */
/* Skip link */
.skip-link{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip-link:focus{width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;left:1rem;top:1rem;background:#fff;border:1px solid var(--line);padding:.5rem;border-radius:8px}

/* Topbar */
.topbar{background:var(--text);color:rgba(255,255,255,.65);font-size:.72rem}
.topbar-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.35rem 3rem;width:100%;max-width:none;margin-inline:0}
.topbar-row span{display:flex;align-items:center;gap:.5rem}
.topbar-row a{color:rgba(255,255,255,.65);text-decoration:none}
.topbar-row strong{color:#fff}
.topbar-right{gap:.75rem!important}
.topbar-sep{width:1px;height:14px;background:rgba(255,255,255,.2);flex-shrink:0}
.topbar-insta{display:flex!important;align-items:center!important;gap:.3rem!important}
.topbar-lang{display:inline-flex!important;align-items:center;gap:.3rem;color:rgba(255,255,255,.55);text-decoration:none;transition:color .15s}
.topbar-lang:hover{color:rgba(255,255,255,.9)}
.topbar-lang.active{color:#fff;font-weight:600}
.topbar-lang img{height:11px;width:auto;border-radius:2px;display:block;opacity:.8}
.topbar-lang.active img{opacity:1}
.topbar-lang span{font-size:.7rem}
@supports (padding: max(0px)){
    .topbar{padding-top:env(safe-area-inset-top,0)}
}

/* Header */
.site-header{position:sticky;top:0;background:var(--cream);border-bottom:1px solid rgba(106,27,154,.12);z-index:200;box-shadow:0 2px 16px rgba(106,27,154,.07)}
.header-row{display:flex;align-items:center;gap:2rem;width:100%;max-width:none;margin-inline:0;padding:0 3rem;height:72px}
.brand{display:inline-flex;align-items:center;gap:.6rem;flex:0 0 auto}
.brand svg rect{fill:url(#g)}
.brand img{display:block}
.brand-name{font-family:var(--font-serif);font-weight:700;letter-spacing:.2px;color:var(--brand);font-size:1.1rem}
.header-sep{display:none;width:1px;height:24px;background:rgba(106,27,154,.15);flex-shrink:0}
.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}
.nav-toggle{
    display:none;width:2.5rem;height:2.5rem;
    border:1.5px solid rgba(106,27,154,.22);border-radius:10px;
    background:#fff;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    cursor:pointer;transition:background .15s,border-color .15s
}
.nav-toggle:hover{background:#f5ecff;border-color:rgba(106,27,154,.4)}
/* Hamburger bars */
.nt-bar{display:block;width:18px;height:2px;background:#2B1A1A;border-radius:2px;
    transition:transform .3s cubic-bezier(.2,.9,.2,1),opacity .2s ease,width .2s ease;
    transform-origin:center}
/* X animation when open */
.nav-toggle[aria-expanded="true"] .nt-bar-1{transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nt-bar-2{opacity:0;transform:scaleX(0)}
.nav-toggle[aria-expanded="true"] .nt-bar-3{transform:translateY(-7px) rotate(-45deg)}
.nav-cta{display:flex;gap:.5rem}

/* Primary nav — mobile full-screen (option B) — desktop override at 1280px */
.primary-nav{
    position:fixed;
    left:0;right:0;
    top:calc(var(--topbar-h,0px) + var(--header-h,72px));
    /* explicit height for cross-browser consistency */
    height:calc(100dvh - var(--topbar-h,0px) - var(--header-h,72px));
    width:100%;
    transform:translateY(-14px);
    opacity:0;
    pointer-events:none;
    transition:transform .32s cubic-bezier(.2,.9,.2,1),opacity .26s ease;
    display:flex;
    flex-direction:column;
    padding:0;
    gap:0;
    overflow-y:auto;
    background:linear-gradient(160deg,#1B0F2B 0%,#2d1155 60%,#4a1070 100%);
    border:none;
    will-change:transform,opacity;
    z-index:1101
}
.primary-nav.open{transform:translateY(0);opacity:1;pointer-events:auto}

/* Item stagger on open */
.primary-nav > ul > li{opacity:0;transform:translateX(-14px);transition:opacity .24s ease,transform .24s ease}
.primary-nav.open > ul > li:nth-child(1){opacity:1;transform:none;transition-delay:.07s}
.primary-nav.open > ul > li:nth-child(2){opacity:1;transform:none;transition-delay:.12s}
.primary-nav.open > ul > li:nth-child(3){opacity:1;transform:none;transition-delay:.17s}
.primary-nav.open > ul > li:nth-child(4){opacity:1;transform:none;transition-delay:.22s}
.primary-nav.open > ul > li:nth-child(n+5){opacity:1;transform:none;transition-delay:.26s}

/* List */
.primary-nav > ul{
    display:flex;flex-direction:column;flex:1;
    gap:0;padding:2rem 2rem 1.25rem;
    list-style:none;margin:0;
    counter-reset:nav-num
}
.primary-nav > ul > li{counter-increment:nav-num;border-bottom:1px solid rgba(255,255,255,.07)}
.primary-nav > ul > li:last-child{border-bottom:none}

/* Numbered prefix */
.primary-nav > ul > li > a::before,
.primary-nav > ul > li > .dropdown-toggle::before{
    content:"0" counter(nav-num);
    font-size:.62rem;font-weight:700;letter-spacing:.1em;
    color:rgba(255,255,255,.28);
    font-family:var(--font,sans-serif);
    margin-right:.5rem;vertical-align:.15em
}

/* Links — large serif */
.primary-nav a,.primary-nav .linklike{
    display:block;padding:.8rem 0;
    color:rgba(255,255,255,.85);
    font-family:var(--font-serif,Georgia,serif);
    font-size:1.45rem;font-weight:700;line-height:1.15;
    text-decoration:none;transition:color .15s
}
.primary-nav a.active,.primary-nav a:hover{color:#e9c8ff}

/* nav-cta-li (Devenir bénévole) — same style as regular links on mobile */
.primary-nav .nav-cta-li{padding:0}
.primary-nav .nav-cta-li a{
    display:block!important;background:none!important;
    color:rgba(255,255,255,.85)!important;border-radius:0!important;
    padding:.8rem 0!important;
    font-family:var(--font-serif,Georgia,serif)!important;
    font-size:1.45rem!important;font-weight:700!important;
    box-shadow:none!important;line-height:1.15!important;transition:color .15s!important
}
.primary-nav .nav-cta-li a:hover{color:#e9c8ff!important}

/* Desktop nav override */
@media (min-width:1280px){
    .header-sep{display:block;margin:0 .5rem}
    .header-row{height:72px;padding:0 3rem}
    .nav-toggle{display:none}
    .primary-nav{
        position:static;
        transform:none;
        opacity:1;
        pointer-events:auto;
        background:transparent;
        border:0;
        padding:0;
        height:auto;
        max-height:none;
        overflow:visible;
        flex-direction:row;
        align-items:center;
        gap:0;
        flex:1;
        margin-inline-start:0;
        justify-content:flex-start;
        will-change:auto;
        z-index:auto
    }
    .primary-nav > ul{flex-direction:row;flex:1;gap:0;padding:0;align-items:center}
    .primary-nav > ul > li{opacity:1;transform:none}
    .primary-nav > ul > li > a::before,.primary-nav > ul > li > .dropdown-toggle::before{content:none}
    .primary-nav .has-dropdown{margin-inline-start:1rem}
    .primary-nav a,.primary-nav .linklike{display:inline-flex;align-items:center;padding:.6rem .9rem;font-size:.87rem;color:var(--text,#2B1A1A);font-family:var(--font,sans-serif);font-weight:500;line-height:1.4}
    .primary-nav a:hover,.primary-nav a.active{color:var(--brand,#6A1B9A)}
    .primary-nav .nav-cta-li{margin-inline-start:auto;padding:0}
    .primary-nav .nav-cta-li a{display:inline-flex!important;background:none!important;color:var(--muted)!important;font-family:var(--font,sans-serif)!important;font-size:.83rem!important;font-weight:600!important;text-decoration:underline!important;text-underline-offset:3px!important;padding:0!important;border-radius:0!important;box-shadow:none!important;line-height:1.4!important}
    .primary-nav .nav-cta-li a:hover{color:var(--brand)!important}
    .primary-nav .nav-cta-li a::after{display:none!important}
    .nav-backdrop{display:none!important}
    body.no-scroll{overflow:auto}
}
/* Desktop: underline-slide on nav links */
@media (min-width:1280px){
    .primary-nav li:not(.has-dropdown):not(.nav-cta-li) a{position:relative}
    .primary-nav li:not(.has-dropdown):not(.nav-cta-li) a::after{content:'';position:absolute;bottom:10px;left:.9rem;right:.9rem;height:2px;background:var(--brand);border-radius:1px;transform:scaleX(0);transition:transform .2s ease}
    .primary-nav li:not(.has-dropdown):not(.nav-cta-li) a:hover::after,.primary-nav li:not(.has-dropdown):not(.nav-cta-li) a.active::after{transform:scaleX(1)}
    .has-dropdown .dropdown-toggle{background:var(--brand-pale);border:1px solid rgba(106,27,154,.22);color:var(--brand)!important;border-radius:50px;padding:.45rem .9rem;font-size:.83rem;font-weight:700}
    .has-dropdown .dropdown-toggle svg path{fill:var(--brand)}
    .has-dropdown .dropdown-toggle svg:last-child{display:none}
    .has-dropdown .dropdown-toggle:hover{background:var(--brand-light);border-color:rgba(106,27,154,.4)}
}

/* Force hamburger visibility */
@media (max-width:1279px){
    .site-header .header-row{display:flex;align-items:center}
    .site-header .nav-toggle{display:inline-flex!important;justify-content:center;align-items:center;margin-inline-start:auto}
    .nav-cta{display:none}
}
/* Nav backdrop */
.nav-backdrop{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.36);
    z-index:1100
}
.nav-backdrop[hidden]{display:none!important}

/* Dropdown */
.has-dropdown{position:relative}
.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
}
.dropdown-toggle:hover,.dropdown-toggle.active{color:var(--text)}
.dropdown-toggle:focus{outline:none}
.dropdown-toggle:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.dropdown-toggle .chev{transition:transform .2s ease}
.has-dropdown:hover .dropdown-toggle .chev,
.has-dropdown:focus-within .dropdown-toggle .chev{transform:rotate(180deg)}
.dropdown-menu{
    position:absolute;top:calc(100% + 8px);right:0;
    min-width:160px;background:#fff;
    border:1px solid rgba(106,27,154,.15);border-radius:12px;
    box-shadow:0 8px 28px rgba(106,27,154,.13);
    padding:5px;margin:0;list-style:none;
    display:none;z-index:2000
}
.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu{display:block}
/* Bridge invisible pour garder le hover actif dans le gap bouton→menu */
@media (min-width:1280px){
    .has-dropdown::after{
        content:'';position:absolute;
        left:0;right:0;bottom:-12px;
        height:12px;background:transparent
    }
}
.dropdown-menu a,.dropdown-menu .linklike{
    display:block;width:100%;text-align:left;
    padding:.5rem .8rem;text-decoration:none;color:var(--text);font-size:.84rem;font-weight:500;
    background:none;border:0;border-radius:8px;
    white-space:nowrap;cursor:pointer
}
.dropdown-menu a:hover,.dropdown-menu .linklike:hover{background:var(--brand-pale);color:var(--brand)}
.dropdown-menu form{margin:0}
.linklike{background:none;border:none;cursor:pointer;font:inherit;color:inherit}

/* Mobile nav — dropdown + misc */
@media (max-width:1279px){
    /* On mobile: no shadow/gradient on header at any time (cleaner on small screens) */
    .site-header{
        box-shadow:none!important;
        background-image:none!important;
        border-bottom:1px solid rgba(106,27,154,.1)!important
    }

    /* Dropdown toggle: large serif, full width */
    .primary-nav .dropdown-toggle{
        color:rgba(255,255,255,.85);
        font-family:var(--font-serif,Georgia,serif);
        font-size:1.45rem;font-weight:700;line-height:1.15;
        padding:.8rem 0;width:100%;
        justify-content:flex-start;gap:.5rem;
        background:none;border:none;outline:none;
        -webkit-tap-highlight-color:transparent
    }
    /* Hide user icon on mobile */
    .primary-nav .dropdown-toggle .dt-user-icon{display:none}
    /* Chevron — push to right, rotate on open */
    .primary-nav .dropdown-toggle .chev{
        margin-left:auto;flex-shrink:0;
        transition:transform .25s ease;
        opacity:.4
    }
    .primary-nav .has-dropdown.open .dropdown-toggle{color:#e9c8ff}
    .primary-nav .has-dropdown.open .dropdown-toggle .chev{transform:rotate(180deg);opacity:.7}

    /* Dropdown submenu — indented, sub-numbered */
    .dropdown-menu{
        position:static;display:none;z-index:auto;
        box-shadow:none;border:none;border-radius:0;
        padding:.1rem 0 .75rem 0;margin:0;
        min-width:0;background:transparent;
        list-style:none;
        counter-reset:sub-num
    }
    .has-dropdown.open .dropdown-menu{display:block}
    .dropdown-menu > li{
        counter-increment:sub-num;
        border-bottom:1px solid rgba(255,255,255,.06)
    }
    .dropdown-menu > li:last-child{border-bottom:none}
    /* Sub-number prefix: 4.1 / 4.2 */
    .dropdown-menu > li > a::before,
    .dropdown-menu > li > form button::before{
        content:counter(nav-num) "." counter(sub-num);
        font-size:.62rem;font-weight:700;letter-spacing:.1em;
        color:rgba(255,255,255,.28);
        font-family:var(--font,sans-serif)!important;
        margin-right:.5rem;vertical-align:.15em
    }
    /* Sub-items — large, easy to tap */
    .dropdown-menu a,.dropdown-menu .linklike{
        display:block!important;
        font-family:var(--font-serif,Georgia,serif)!important;
        font-size:1.3rem!important;font-weight:600!important;
        color:rgba(255,255,255,.72)!important;
        padding:.7rem 0 .7rem 1.5rem!important;
        border-radius:0!important;background:transparent!important;
        transition:color .15s!important;
        -webkit-tap-highlight-color:transparent
    }
    .dropdown-menu a:hover,.dropdown-menu .linklike:hover{color:#e9c8ff!important;background:transparent!important}
    .dropdown-menu form{margin:0}
}

/* Pillars rail (creative variant) */
.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{
    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}
.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}

/* 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}

/* Creative CTA box */
.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-inline-start: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)}
.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%)}

/* 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-inline-start:auto;font-weight:800}
.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)}
.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)}

/* ── 6. FOOTER ──────────────────────────────────────────────── */
.site-footer{border-top:1px solid var(--line);background:#fff;padding:var(--s-6) 0}
.site-footer.creative-footer{
    background:linear-gradient(180deg,#5A1A86,#7C2FA7 70%)!important;
    color:#fff!important;border-top:none!important
}
.creative-footer{position:relative;overflow:hidden;margin:0;padding-bottom:0}
.footer-top{
    display:grid;grid-template-columns:1.4fr 1fr 1.2fr;
    gap:var(--s-6);align-items:start;
    padding-bottom:var(--s-5);border-bottom:1px solid var(--line);margin-bottom:var(--s-4)
}
.ft-brand .tagline{color:var(--muted);margin-top:.3rem}
.ft-title{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:.75rem}
.ft-nav ul{display:grid;gap:.5rem;list-style:none;padding:0;margin:0}
.ft-nav a{color:var(--muted)}
.ft-nav a:hover{color:var(--text)}
.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-contact address{font-style:normal;color:var(--text)}
.ft-quick{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}
.info-list{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.info-list li{display:flex;gap:.6rem;align-items:flex-start}
.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;color:var(--muted)}
.footer-bottom{border-top:1px solid var(--line);background:#fff;margin:0;padding-top:.4rem;padding-bottom:.4rem}
.footer-bottom.dark{background:#4A1A72!important;border-top:1px solid rgba(255,255,255,.18)!important;color:#fff!important}
.footer-bottom .small{color:inherit;margin:0;line-height:1.4}
.footer-bottom-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;padding:.4rem 0!important}
.footer-bottom-row>*{margin:0}
.ft-legal{display:flex;align-items:center;gap:.75rem;margin:0}
.ft-legal a{color:var(--muted);font-size:.9rem}
.ft-legal a:hover{color:var(--text)}
.ft-legal span{color:rgba(255,255,255,.6)}

/* Dark footer overrides */
.creative-footer .ft-title,.creative-footer .brand-footer .brand-name,.creative-footer .tagline{color:#fff!important}
.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)}
.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 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}

/* ── FOOTER B : Lumière & Chaleur ─────────────────────────── */
.footer-b{background:var(--cream)!important;color:var(--text);border-top:1px solid rgba(106,27,154,.1);padding:0!important;margin:0}
.fb-grid{
    display:grid;
    grid-template-columns:1.8fr 1fr 1fr 1fr;
    gap:2rem;
    padding:2.5rem 3rem 0;
}
.fb-logo{height:48px;width:auto;display:block;margin-bottom:.6rem;object-fit:contain}
.fb-brand-name{font-weight:800;font-size:1rem;color:var(--brand);margin-bottom:.35rem}
.fb-tagline{font-size:.82rem;color:var(--muted);line-height:1.6;max-width:220px;margin:0 0 1rem}
.fb-socials{display:flex;gap:.6rem;margin-bottom:.9rem}
.fb-social-icon{
    width:34px;height:34px;border-radius:8px;
    background:var(--brand-light);
    border:1px solid rgba(106,27,154,.15);
    display:flex;align-items:center;justify-content:center;
    color:var(--brand);text-decoration:none;
    transition:background .15s,border-color .15s
}
.fb-social-icon:hover{background:var(--brand-pale);border-color:rgba(106,27,154,.3)}
.fb-pill{
    display:inline-flex;align-items:center;gap:.4rem;
    background:linear-gradient(135deg,var(--brand),var(--brand-mid));
    color:#fff;font-size:.78rem;font-weight:700;
    padding:.4rem .9rem;border-radius:50px;
    text-decoration:none;
    box-shadow:0 3px 10px rgba(106,27,154,.25);
    transition:opacity .15s
}
.fb-pill:hover{opacity:.88}
.fb-col-title{
    font-size:.72rem;font-weight:800;
    text-transform:uppercase;letter-spacing:.1em;
    color:var(--brand);margin:0 0 1rem
}
.fb-col a{display:block;color:var(--muted);text-decoration:none;font-size:.85rem;margin-bottom:.5rem}
.fb-col a:hover{color:var(--brand)}
.fb-col address{font-style:normal;font-size:.85rem;line-height:1.7;color:var(--muted)}
.fb-col address a{color:var(--muted);text-decoration:none}
.fb-col address a:hover{color:var(--brand)}
.fb-bottom{
    background:var(--cream);
    border-top:1px solid rgba(106,27,154,.1);
    margin:2rem 0 0;
    padding:.85rem 3rem;
    display:flex;justify-content:space-between;align-items:center;
    font-size:.75rem;color:var(--muted)
}
.fb-legal{display:flex;gap:1.25rem}
.fb-legal a{color:var(--muted);text-decoration:none}
.fb-legal a:hover{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){
    .fb-grid{grid-template-columns:1fr 1fr;gap:2rem;padding:2.5rem 1.5rem 0}
    .fb-bottom{flex-direction:column;gap:.5rem;text-align:center;padding:1rem 1.5rem;margin-top:2rem}
}
@media (max-width:540px){
    .fb-grid{grid-template-columns:1fr;padding:2rem 1.25rem 0}
}
.footer-light .footer-bottom{background:var(--cream);border-top-color:rgba(106,27,154,.1)}

/* -- 7. PAGES PUBLIQUES ------------------------------------ */

/* === HOME HERO === */
.hero-home{
    background:#fff;
    position:relative;overflow:hidden
}
.hero-grid{
    display:grid;grid-template-columns:1fr 1fr;min-height:88vh;align-items:center
}
.hero-home::before{
    content:'';position:absolute;top:-120px;right:30%;
    width:500px;height:500px;border-radius:50%;
    background:radial-gradient(circle,rgba(179,106,209,.07) 0%,transparent 70%);
    pointer-events:none
}
.hero-home::after{
    content:'';position:absolute;bottom:-80px;left:40%;
    width:320px;height:320px;border-radius:50%;
    background:radial-gradient(circle,rgba(106,27,154,.05) 0%,transparent 70%);
    pointer-events:none
}
.hero-dots{
    position:absolute;inset:0;pointer-events:none;
    background-image:radial-gradient(circle,rgba(106,27,154,.05) 1.5px,transparent 1.5px);
    background-size:28px 28px
}
.hero-left{
    padding:5rem 3rem 5rem 0;
    display:flex;flex-direction:column;justify-content:center;gap:1.75rem;
    position:relative;z-index:1
}
.hero-badge{
    display:inline-flex;align-items:center;gap:.6rem;
    background:none;color:var(--brand);border:none;
    padding:0;border-radius:0;
    font-size:.7rem;font-weight:700;letter-spacing:.12em;
    text-transform:uppercase;width:fit-content
}
.hero-badge::before{
    content:'';width:28px;height:1.5px;background:var(--brand);flex-shrink:0;display:block
}
.hero-left h1{
    font-family:var(--font-serif);
    font-size:clamp(2.8rem,4.8vw,4.4rem);
    color:var(--text);line-height:1.06;letter-spacing:-.02em
}
.hero-left h1 em{font-style:italic;color:var(--brand)}
.hero-left .lead{font-size:1.05rem;color:var(--muted);line-height:1.75;max-width:480px}
.hero-btns{display:flex;gap:.85rem;flex-wrap:wrap}
.btn-hero-primary{
    background:linear-gradient(135deg,var(--brand),var(--brand-mid));
    color:#fff;padding:.9rem 1.9rem;border-radius:50px;
    font-weight:700;font-size:.95rem;text-decoration:none;
    box-shadow:0 6px 24px rgba(106,27,154,.35);
    transition:all .25s;display:inline-flex;align-items:center;gap:.5rem
}
.btn-hero-primary:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(106,27,154,.45)}
.btn-hero-secondary{
    background:#fff;color:var(--brand);
    border:2px solid rgba(106,27,154,.25);
    padding:.9rem 1.9rem;border-radius:50px;
    font-weight:700;font-size:.95rem;text-decoration:none;
    transition:all .2s
}
.btn-hero-secondary:hover{border-color:var(--brand);background:var(--brand-pale)}
.hero-trust{display:flex;align-items:center;gap:.75rem;font-size:.82rem;color:var(--muted)}
.trust-avatars{display:flex}
.trust-avatars span{
    width:32px;height:32px;border-radius:50%;
    border:2px solid #fff;margin-right:-8px;
    background:var(--brand-light);
    display:flex;align-items:center;justify-content:center;
    font-size:.75rem;font-weight:700;color:var(--brand)
}
.trust-avatars span:last-child{margin-right:0}
.hero-right{
    display:grid;grid-template-columns:1fr 1fr;
    grid-template-rows:1fr 1fr;gap:12px;
    padding:2rem 2rem 2rem 0;
    align-items:stretch;align-self:stretch;
    position:relative;z-index:1;min-height:0
}
.hero-right img{
    width:100%;height:100%;object-fit:cover;
    border-radius:14px;display:block
}
.hero-photo-main{grid-row:1/3;border-radius:18px!important}
.hero-photo-strip{grid-column:1/3;border-radius:12px!important}

/* === HERO SKELETON === */
@keyframes sk-shimmer{
    0%{background-position:-600px 0}
    100%{background-position:600px 0}
}
.hero-skeleton{
    position:absolute;inset:0;z-index:8;background:#fff;pointer-events:none
}
.hero-skeleton-grid{
    width:min(1100px,100% - 2rem);margin-inline:auto;
    display:grid;grid-template-columns:1fr 1fr;min-height:88vh;align-items:center
}
.sk-left{
    padding:5rem 3rem 5rem 0;
    display:flex;flex-direction:column;gap:1.75rem
}
.sk-line,.sk-btn,.sk-av,.sk-photo-main,.sk-photo-sm{
    background:linear-gradient(90deg,#f0f0f0 25%,#e6e6e6 50%,#f0f0f0 75%);
    background-size:1200px 100%;
    animation:sk-shimmer 1.6s ease-in-out infinite;
    border-radius:4px
}
.sk-block{display:flex;flex-direction:column;gap:.5rem}
.sk-eyebrow{height:11px;width:170px;border-radius:3px}
.sk-t1{height:58px;width:90%;border-radius:8px;animation-delay:.05s}
.sk-t2{height:58px;width:65%;border-radius:8px;animation-delay:.1s}
.sk-block .sk-line{height:13px}
.sk-btns-row{display:flex;gap:.85rem}
.sk-btn{height:52px;width:148px;border-radius:50px;animation-delay:.15s}
.sk-btn2{width:172px;animation-delay:.2s}
.sk-trust-row{display:flex;align-items:center;gap:.3rem}
.sk-av{width:32px;height:32px;border-radius:50%;flex-shrink:0;margin-right:-6px;animation-delay:.12s}
.sk-trust-lbl{height:11px;width:120px;margin-left:14px;border-radius:3px;animation-delay:.18s}
.sk-right{
    display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
    gap:12px;padding:2rem 2rem 2rem 0;
    align-self:stretch;min-height:0
}
.sk-photo-main{grid-row:1/3;border-radius:18px;animation-delay:.08s}
.sk-photo-sm{border-radius:14px;animation-delay:.2s}
.sk-photo-sm+.sk-photo-sm{animation-delay:.28s}

/* === HERO SKELETON === */
@keyframes sk-shimmer{
    0%{background-position:-600px 0}
    100%{background-position:600px 0}
}
.hero-skeleton{
    position:absolute;inset:0;z-index:8;background:#fff;pointer-events:none
}
.hero-skeleton-grid{
    width:min(1100px,100% - 2rem);margin-inline:auto;
    display:grid;grid-template-columns:1fr 1fr;min-height:88vh;align-items:center
}
.sk-left{
    padding:5rem 3rem 5rem 0;
    display:flex;flex-direction:column;gap:1.75rem
}
.sk-line,.sk-btn,.sk-av,.sk-photo-main,.sk-photo-sm{
    background:linear-gradient(90deg,#f0f0f0 25%,#e6e6e6 50%,#f0f0f0 75%);
    background-size:1200px 100%;
    animation:sk-shimmer 1.6s ease-in-out infinite;
    border-radius:4px
}
.sk-block{display:flex;flex-direction:column;gap:.5rem}
.sk-eyebrow{height:11px;width:170px;border-radius:3px}
.sk-t1{height:58px;width:90%;border-radius:8px;animation-delay:.05s}
.sk-t2{height:58px;width:65%;border-radius:8px;animation-delay:.1s}
.sk-block .sk-line{height:13px}
.sk-btns-row{display:flex;gap:.85rem}
.sk-btn{height:52px;width:148px;border-radius:50px;animation-delay:.15s}
.sk-btn2{width:172px;animation-delay:.2s}
.sk-trust-row{display:flex;align-items:center;gap:.3rem}
.sk-av{width:32px;height:32px;border-radius:50%;flex-shrink:0;margin-right:-6px;animation-delay:.12s}
.sk-trust-lbl{height:11px;width:120px;margin-left:14px;border-radius:3px;animation-delay:.18s}
.sk-right{
    display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
    gap:12px;padding:2rem 2rem 2rem 0;
    align-self:stretch;min-height:0
}
.sk-photo-main{grid-row:1/3;border-radius:18px;animation-delay:.08s}
.sk-photo-sm{border-radius:14px;animation-delay:.2s}
.sk-photo-sm+.sk-photo-sm{animation-delay:.28s}

/* === HOME PILLARS === */
.home-pillars{
    display:grid;grid-template-columns:repeat(3,1fr);
    background:#fff;border-top:1px solid rgba(106,27,154,.08)
}
.home-pillar{
    padding:2.75rem 2.25rem;
    border-right:1px solid rgba(106,27,154,.07);
    position:relative
}
.home-pillar:last-child{border-right:none}
.home-pillar::before{
    content:'';position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,var(--brand),var(--brand-2));
    transform:scaleX(0);transform-origin:left;transition:transform .3s
}
.home-pillar:hover::before{transform:scaleX(1)}
.pillar-icon{
    width:52px;height:52px;border-radius:16px;
    background:var(--brand-light);display:flex;align-items:center;
    justify-content:center;margin-bottom:1.25rem
}
.pillar-icon svg{display:block;flex-shrink:0}
.home-pillar h3{
    font-family:var(--font-serif);
    font-size:1.15rem;color:var(--text);margin-bottom:.6rem
}
.home-pillar p{font-size:.88rem;color:var(--muted);line-height:1.65}
.home-pillar .text-link{display:inline-block;margin-top:.75rem;font-size:.88rem}

/* === HOME AGENDA BAND === */
.agenda-band{
    background:linear-gradient(135deg,var(--brand) 0%,var(--brand-mid) 100%);
    padding:4rem 0
}
.agenda-inner{
    display:grid;grid-template-columns:1fr 1fr;
    gap:3rem;align-items:center
}
.agenda-band h2{
    font-family:var(--font-serif);
    font-size:2.2rem;color:#fff;margin-bottom:.75rem
}
.agenda-band p{color:rgba(255,255,255,.75);line-height:1.65}
.agenda-events{display:flex;flex-direction:column;gap:.75rem}
.event-card{
    background:rgba(255,255,255,.12);backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.2);border-radius:16px;
    padding:1rem 1.25rem;display:flex;align-items:center;gap:1rem
}
.event-date{
    background:rgba(255,255,255,.15);border-radius:10px;
    padding:.5rem .75rem;text-align:center;min-width:52px
}
.event-date .day{font-size:1.4rem;font-weight:800;color:#fff;line-height:1}
.event-date .month{font-size:.65rem;font-weight:600;color:rgba(255,255,255,.75);text-transform:uppercase;margin-top:.1rem}
.event-info h4{font-size:.9rem;font-weight:700;color:#fff}
.event-info p{font-size:.78rem;color:rgba(255,255,255,.65);margin-top:.2rem}
.event-badge{
    margin-left:auto;background:rgba(255,255,255,.2);color:#fff;
    font-size:.72rem;font-weight:600;padding:.3rem .7rem;
    border-radius:99px;white-space:nowrap
}
.agenda-empty{
    background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
    border-radius:16px;padding:2rem;text-align:center;color:rgba(255,255,255,.85)
}
.agenda-empty .btn-agenda{
    display:inline-block;margin-top:1rem;
    background:rgba(255,255,255,.2);color:#fff;
    border:1px solid rgba(255,255,255,.4);padding:.6rem 1.4rem;
    border-radius:50px;font-weight:700;text-decoration:none;
    transition:background .2s
}
.agenda-empty .btn-agenda:hover{background:rgba(255,255,255,.3)}

/* === HOME CTA BENEVOLE === */
.cta-benevole{
    background:var(--warm);
    padding:5rem 0;text-align:center;
    border-top:1px solid rgba(106,27,154,.08)
}
.cta-benevole h2{
    font-family:var(--font-serif);
    font-size:2.4rem;color:var(--text);margin-bottom:.75rem
}
.cta-benevole p{font-size:1rem;color:var(--muted);margin-bottom:2rem}
.btn-cta-fill{
    background:linear-gradient(135deg,var(--brand),var(--brand-mid));
    color:#fff;padding:1rem 2.5rem;border-radius:50px;
    font-weight:700;font-size:1rem;text-decoration:none;
    box-shadow:0 6px 28px rgba(106,27,154,.35);
    transition:all .25s;display:inline-block
}
.btn-cta-fill:hover{transform:translateY(-2px);box-shadow:0 12px 36px rgba(106,27,154,.45)}

/* Legacy hero (other public pages) */
.hero{padding:var(--s-7) 0;background:var(--cream)}
.hero-photo{
    background:
        linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.88) 40%,rgba(255,255,255,.60) 100%),
        var(--hero-img);
    background-size:cover;background-position:center;
    background-color:var(--cream);
    border-bottom:1px solid var(--line)
}
.hero-inner{max-width:760px}
.hero .lead{font-size:var(--size-2);color:var(--muted);margin-top:.5rem}
.hero-links{display:flex;gap:.75rem;margin-top:1rem;flex-wrap:wrap}
.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)}
.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)}
.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
}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5);list-style:none;margin:0;padding:0}
.feature{display:flex;gap:1rem;align-items:flex-start}
.feature-body h3{margin-bottom:.25rem}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-5);align-items:center}
.section.stats{border:0}
.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}
.band-cta{
    position:relative;padding:var(--s-7) 0;border-top:1px solid var(--line);overflow:hidden;
    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%)
}
.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:hover{transform:translateY(-2px)}
.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-inline-start:auto;font-weight:800}
.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{box-shadow:0 6px 20px rgba(106,27,154,.25)}
.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{box-shadow:0 6px 18px rgba(0,0,0,.08)}
.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:"\2022";margin-right:.75rem;color:#B36AD1;font-weight:900}
.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)}}
.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}

/* ── 8. AUTH ────────────────────────────────────────────────── */
.auth-hero{padding:56px 0;background:linear-gradient(135deg,#fbfbff 0%,#f3ecff 40%,#f7f0ff 100%);border-bottom:1px solid var(--line)}
.auth-hero .pill{display:inline-block;background:#f5ecff;color:var(--brand);padding:.5rem .75rem;border-radius:999px;font-weight:600}
.auth-hero h1{margin:.5rem 0 0;font-size:clamp(26px,4vw,34px)}
.auth-hero .lead{margin:.35rem 0 0;color:var(--muted)}

/* Password */
.password{position:relative}
.fgroup.password input{padding-right:2.6rem}
.showpass{position:absolute;right:.6rem;top:50%;transform:translateY(-50%);border:0;background:transparent;cursor:pointer;padding:.2rem;line-height:1;display:flex;align-items:center;justify-content:center;color:var(--muted,#7B5B5B);border-radius:4px}
.showpass:hover{color:var(--brand)}
.meter{position:relative;height:6px;background:#eef0f6;border-radius:999px;margin-top:8px;overflow:hidden}
.meter i{position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--p,0));background:linear-gradient(90deg,#ff6a6a,#ffe16a,#60c173)}

/* Wizard inscription */
.wizard{display:flex;gap:10px;list-style:none;padding:0;margin:0 0 16px;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{box-shadow:0 0 0 3px rgba(106,27,154,.15);border-color:var(--brand);color:#111}
.wizard li.current span{background:var(--brand);color:#fff}

/* Auth specific overrides */
.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}
.check{display:flex;gap:8px;align-items:flex-start}
.check input{width:18px;height:18px;margin-top:2px}
.kids{display:grid;gap:12px;margin-bottom:12px}
.kid .kid-actions{display:flex;justify-content:flex-end}
.kid .btn.ghost{border:1px dashed #d1c4e9}
.big-emoji{font-size:42px;margin-bottom:6px}
.success .card{max-width:720px;margin:0 auto}
.card.narrow{max-width:560px;margin:0 auto}

/* Recap inscription */
.recap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.recap-card{border:1px solid #eee;border-radius:12px;padding:12px;background:#fff}
.recap-card h4{margin:0 0 6px;font-size:1rem}
.kid-mini{border-top:1px dashed #eee;padding-top:6px;margin-top:6px}

/* Auth modal plein écran */
.modal.modal-full#authModal{
    position:fixed;inset:0;z-index:5000;background:#fff
}
#authModal .modal-dialog{
    position:absolute;inset:0;margin:0;width:100%;height:100dvh;overflow:hidden;
    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}

/* ── 9. ESPACE COMPTE ───────────────────────────────────────── */
/* Account hero */
.account-hero{
    background:linear-gradient(135deg,#fbfbff 0%,#f3ecff 40%,#f7f0ff 100%);
    border-bottom:1px solid var(--line);padding:48px 0
}
.account .hero-row{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center}
.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}

/* Layout sidebar */
.account-layout{display:grid;grid-template-columns:180px 1fr;min-height:calc(100vh - 120px)}
.account-sidebar{background:var(--surface);border-inline-end:1px solid var(--line);padding:var(--s-4) var(--s-3);position:sticky;top:64px;height:calc(100vh - 64px);overflow-y:auto}
.account-sidebar-title{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:0 var(--s-3);margin-bottom:var(--s-3)}
.sidebar-nav{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.sidebar-nav a{display:flex;align-items:center;gap:.6rem;padding:.55rem var(--s-3);border-radius:10px;color:var(--muted);font-weight:600;font-size:.95rem;position:relative;transition:background .12s}
.sidebar-nav a:hover{background:rgba(106,27,154,.06);color:var(--text)}
.sidebar-nav a.active{background:var(--brand);color:#fff}
.sidebar-nav .badge-count{margin-inline-start:auto;background:#dc2626;color:#fff;font-size:.65rem;padding:1px 6px;border-radius:999px}
.account-main{padding:var(--s-5)}
.tab-panel{display:block}
.tab-panel.hidden{display:none!important}
.child-selector{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:var(--s-4)}
.child-pill{padding:.35rem .9rem;border-radius:999px;border:1px solid var(--line);font-size:.9rem;font-weight:600;cursor:pointer;transition:background .12s}
.child-pill.active{background:var(--brand);color:#fff;border-color:transparent}

/* KPI circles */
.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}

/* Account 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)}
.account .panel-head{margin-bottom:8px}
.account .panel-head h2{margin:0}
.clean{list-style:none;padding:0;margin:0;display:grid;gap:6px}

/* Account 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}

/* Calendrier présences */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-top:var(--s-3)}
.cal-day{aspect-ratio:1;display:grid;place-items:center;border-radius:8px;font-size:.8rem}
.cal-day.present{background:#e8f8ee;color:#0a7a43}
.cal-day.absent{background:#feecec;color:#b42318}
.cal-day.empty{background:var(--surface)}

/* Account full 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}

/* Messages */
.account .msg-layout{display:grid;grid-template-columns:2fr 1fr;gap:16px}
.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}

/* Account 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}

/* Account 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 passées */
.past-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.past-card{display:grid;grid-template-columns:160px 1fr;gap:14px;align-items:stretch}
.past-card.noimg{grid-template-columns:1fr}
.pc-media{border-radius:12px;overflow:hidden;background:var(--surface)}
.pc-media img{display:block;width:100%;height:auto;object-fit:cover;aspect-ratio:4/3}

/* Sorties full grid */
.out-grid{display:grid;gap:16px;grid-template-columns:repeat(3,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)}
.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}

/* ── 10. UTILITAIRES ────────────────────────────────────────── */
.pill{display:inline-block;background:#f5ecff;color:var(--brand);padding:.4rem .85rem;border-radius:999px;font-weight:600;font-size:.9rem}
.bg-light-purple{background:linear-gradient(135deg,#f9f4ff,#fff)}
.bg-light-warm{background:linear-gradient(135deg,#fff9f0,#fff)}
.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}
.hidden{display:none!important}
.text-center{text-align:center}
.mt-1{margin-top:var(--s-4)}
.mt-2{margin-top:var(--s-5)}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.clean{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.no-scroll{overflow:hidden}
/* Nav z-index global */
.nav-backdrop{z-index:400}

/* Animations */
@media (prefers-reduced-motion:no-preference){
    .card,.stat,.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)}}
}
@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)}
}

/* ── 11. RTL (ARABE) ────────────────────────────────────────── */
@media(min-width:1280px){
[dir="rtl"] .hero-photo{
    background:
        linear-gradient(270deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.88) 40%,rgba(255,255,255,.60) 100%),
        var(--hero-img);
}
}
/* RTL mobile: hide decorative blobs that overflow the hero */
@media(max-width:1279px){
[dir="rtl"] .hero-home::before,[dir="rtl"] .hero-home::after{display:none}
}
[dir="rtl"] .account-sidebar{border-inline-end:none;border-inline-start:1px solid var(--line)}
[dir="rtl"] .sidebar-nav a{flex-direction:row-reverse}
[dir="rtl"] .band-grid{direction:rtl}
[dir="rtl"] .footer-top{direction:rtl}
[dir="rtl"]{text-align:right}
[dir="rtl"] .site-header .container,
[dir="rtl"] .topbar-row{flex-direction:row-reverse}
[dir="rtl"] .primary-nav{margin-right:auto;margin-left:0}

[dir="rtl"] .hero{flex-direction:row-reverse}
[dir="rtl"] .grid-2,
[dir="rtl"] .grid-3{direction:rtl}
[dir="rtl"] .card{text-align:right}
[dir="rtl"] .sidebar-nav a{padding-right:0;padding-left:1rem;border-right:none;border-left:3px solid transparent}
[dir="rtl"] .sidebar-nav a.active{border-left-color:var(--brand);border-right:none}
[dir="rtl"] .btn{direction:rtl}
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select{text-align:right;direction:rtl}

/* ── 12. RESPONSIVE ─────────────────────────────────────────── */
@media (max-width:1279px){
    .auth .grid-2,.auth .grid-3{grid-template-columns:1fr}
    .account .hero-row{grid-template-columns:1fr}
    .account .grid-3,.account .grid-2{grid-template-columns:1fr}
    .account .msg-layout{grid-template-columns:1fr}
    .recap-grid{grid-template-columns:1fr}
    .out-grid{grid-template-columns:1fr}
    .pillars.simple .features{grid-template-columns:1fr}
    .events{grid-template-columns:1fr}
    .stats-row{grid-template-columns:repeat(2,1fr)}
    .band-grid{grid-template-columns:1fr 120px;align-items:center}
    .band-art{
        order:0;display:flex;flex-direction:column;
        align-items:flex-end;justify-content:center;
        gap:10px;width:120px;min-height:140px;position:relative
    }
    .band-art .sticker{position:static;width:44px;height:44px}
    .band-art .sticker.heart,.band-art .sticker.hands,.band-art .sticker.star{top:auto;right:auto;bottom:auto;left:auto}
    .hero-actions{gap:.6rem}
    .hero-btn{width:100%;justify-content:flex-start}
    .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}
    .pillars-rail{grid-auto-columns:85%}
    .cta-actions{grid-template-columns:1fr}
    .cta-content{align-items:flex-start}
}

@media (max-width:1000px){
    .hero-inner{max-width:100%}
    .band-grid{grid-template-columns:1fr}
    .band-art{display:none}
}

@media (max-width:900px){
    /* Nav */
    .topbar{display:none}
    .primary-nav ul{padding-bottom:.25rem}
    /* Layout */
    .grid-2,.grid-3{grid-template-columns:1fr}
    .features{grid-template-columns:1fr}
    .events{grid-template-columns:1fr}
    .row-head{flex-direction:column;align-items:flex-start}
    .footer-top{grid-template-columns:1fr}
    .footer-bottom-row{flex-direction:column;align-items:flex-start}
    .cta-row{flex-direction:column;align-items:flex-start}
    .band-grid{grid-template-columns:1fr}
    .band-art{order:-1;min-height:120px;margin-bottom:.5rem;display:block}
    .sticker{width:60px;height:60px}
    /* Wizard */
    .wizard{flex-direction:column}
    /* Compte sidebar → bottom nav */
    .account-layout{grid-template-columns:1fr;grid-template-rows:1fr auto}
    .account-sidebar{
        position:fixed;bottom:0;left:0;right:0;
        top:auto;height:auto;
        border-inline-end:none;border-top:1px solid var(--line);
        display:flex;align-items:center;justify-content:space-around;
        padding:.5rem;z-index:150;background:#fff
    }
    .account-sidebar-title{display:none}
    .sidebar-nav{flex-direction:row;gap:0}
    .sidebar-nav a{flex-direction:column;gap:.2rem;font-size:.65rem;padding:.4rem .6rem}
    .account-main{padding:var(--s-4);padding-bottom:5rem}
    .past-grid{grid-template-columns:1fr}
    .past-card{grid-template-columns:120px 1fr}
    .out-card{grid-template-columns:1fr}
    .account .cal-grid{gap:6px}
    .account .cal-cell{min-height:64px;padding:6px}
}

@media (max-width:600px){
    .auth-hero{padding:42px 0}
    .fgroup input,.fgroup select,.fgroup textarea{padding:16px 14px;font-size:16px}
    .card{padding:var(--s-4)}
    .hero h1{font-size:clamp(22px,6vw,32px)}
}


/* Home new sections responsive */
@media (max-width:1000px){
    .hero-grid{grid-template-columns:1fr;min-height:auto;padding:3rem 0}
    .hero-right{padding:0 0 2rem;height:260px;grid-template-rows:1fr 1fr;grid-template-columns:1fr 1fr}
    .hero-photo-main{grid-row:1/3}
    .hero-photo-strip{display:none}
    .hero-left{padding:3rem 0 1.5rem}
    .home-pillars{grid-template-columns:1fr}
    .home-pillar{border-right:none;border-bottom:1px solid rgba(106,27,154,.07);padding:2rem 1.5rem}
    .home-pillar:last-child{border-bottom:none}
    .agenda-inner{grid-template-columns:1fr}
    .cta-benevole{padding:3rem 0}
}
@media (max-width:600px){
    .hero-grid{padding:1.25rem 0 1.5rem}
    .hero-left{padding:.25rem 0 1rem}
    .hero-left h1{font-size:clamp(1.8rem,8vw,2.8rem)}
    .hero-btns{flex-direction:column}
    .btn-hero-primary,.btn-hero-secondary{width:100%;justify-content:center;text-align:center}
    .stat-row{gap:1rem}
    .cta-benevole h2{font-size:1.8rem}
    .agenda-band{padding:2.5rem 0}
    /* Hero photos : main full-width en haut, 2 petites côte à côte en dessous */
    .hero-right{
        height:auto;
        grid-template-columns:1fr 1fr;
        grid-template-rows:auto auto;
        gap:8px;
        padding:0 0 1.5rem;
    }
    .hero-photo-main{
        grid-column:1/3;
        grid-row:1;
        aspect-ratio:16/9;
        height:auto;
    }
    .hero-right img:not(.hero-photo-main){
        aspect-ratio:4/3;
        height:auto;
    }
}
/* Lang switcher (legacy — removed, kept as no-op) */
.lang-btn{
    font-size:.7rem;font-weight:700;letter-spacing:.04em;
    padding:.18rem .48rem;border-radius:999px;
    color:rgba(255,255,255,.75);text-decoration:none;
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.18);
    transition:all .15s ease
}
.lang-btn:hover{color:#fff;background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.35)}
.lang-btn.active{color:var(--text);background:#fff;border-color:#fff}

/* ── Page loader skeleton ── */
@keyframes sk-shimmer {
    to { background-position: -200% 0 }
}
.sk-line {
    border-radius: 6px;
    background: linear-gradient(90deg,
        rgba(106,27,154,.07) 25%,
        rgba(106,27,154,.15) 50%,
        rgba(106,27,154,.07) 75%);
    background-size: 200% 100%;
    animation: sk-shimmer 1.4s ease-in-out infinite;
}
.page-skeleton {
    position: absolute; inset: 0; z-index: 10;
    background: var(--bg, #FFFBF7);
    padding: 2rem 3rem;
    display: flex; flex-direction: column; gap: 1.5rem;
    pointer-events: none;
}
.page-skeleton .sk-block { display: flex; flex-direction: column; gap: .7rem; }
.page-skeleton .sk-title  { height: 22px; width: 40%; }
.page-skeleton .sk-body-1 { height: 12px; width: 90%; }
.page-skeleton .sk-body-2 { height: 12px; width: 70%; }
.page-skeleton .sk-body-3 { height: 12px; width: 55%; }

/* Affichage pendant navigation */
#contenu { position: relative; }
body.page-loading .page-skeleton { display: flex !important; }
body:not(.page-loading) .page-skeleton { display: none; }

/* Fade-up du contenu au rendu */
@keyframes page-fadein {
    from { opacity: 0; transform: translateY(6px) }
    to   { opacity: 1; transform: none }
}
body.page-rendered #contenu > *:not(.page-skeleton) {
    animation: page-fadein .3s ease both;
}

/* ================================================================
   MON COMPTE — Espace parent
   All classes prefixed .acct- to avoid conflicts with site CSS
   ================================================================ */

/* ----- Layout -------------------------------------------------- */
.acct-layout {
  display: flex;
  min-height: calc(100vh - 64px);
  background: var(--cream, #FFFBF7);
}

/* ----- Sidebar (desktop ≥769px) -------------------------------- */
.acct-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: #fff;
  border-right: 1px solid #EDE8F5;
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 0.75rem;
}
.acct-sidebar-header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0 0.5rem 1rem;
  border-bottom: 1px solid #EDE8F5;
  margin-bottom: 0.75rem;
}
.acct-sidebar-avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #6A1B9A 0%, #B36AD1 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1rem;
  flex-shrink: 0;
}
.acct-sidebar-name { font-weight: 700; font-size: 0.875rem; color: #1F1235; line-height: 1.2; }
.acct-sidebar-status {
  font-size: 0.7rem;
  color: #6B5878;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  margin-top: 0.15rem;
}
.acct-sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; }
.acct-sidebar-footer {
  border-top: 1px solid #EDE8F5;
  padding-top: 0.625rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 0.5rem;
}
.acct-nav-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  text-decoration: none;
  color: #6B5878;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
  position: relative;
}
.acct-nav-item i { font-size: 1.05rem; }
.acct-nav-item:hover { background: #f5f0fb; color: #6A1B9A; }
.acct-nav-item--active { background: #FAF5FF; color: #6A1B9A; font-weight: 700; }
.acct-nav-item--danger { color: #DC2626; }
.acct-nav-item--danger:hover { background: #fef2f2; color: #DC2626; }

/* ----- Unread badge -------------------------------------------- */
.acct-badge {
  margin-left: auto;
  background: #ef4444;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 1.1rem;
  height: 1.1rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.25rem;
  line-height: 1;
}
.acct-badge--tab { margin-left: 0.2rem; }

/* ----- Main content area --------------------------------------- */
.acct-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ----- Mobile tabs (hidden on desktop) ------------------------- */
.acct-mobile-tabs { display: none; }

/* ----- Child selector ------------------------------------------ */
.acct-children {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding: 1rem 1.75rem;
  scrollbar-width: none;
  border-bottom: 1px solid #EDE8F5;
  background: #fff;
}
.acct-children::-webkit-scrollbar { display: none; }
.acct-child-card {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  border-radius: 12px;
  border: 2px solid #EDE8F5;
  background: #fff;
  text-decoration: none;
  flex-shrink: 0;
  transition: border-color 0.15s, background 0.15s;
}
.acct-child-card:hover { border-color: #B36AD1; }
.acct-child-card--active { border-color: #6A1B9A; background: #FAF5FF; }
.acct-child-warn {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 16px;
  height: 16px;
  background: #D97706;
  border-radius: 50%;
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 9px;
  line-height: 1;
}
.acct-child-avatar {
  position: relative;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: #EDE8F5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6B5878;
  font-size: 1.1rem;
  transition: background 0.15s, color 0.15s;
}
.acct-child-card--active .acct-child-avatar {
  background: linear-gradient(135deg, #6A1B9A 0%, #B36AD1 100%);
  color: #fff;
}
.acct-child-name { font-size: 0.875rem; font-weight: 700; color: #1F1235; }
.acct-child-level { font-size: 0.75rem; color: #6B5878; }
.acct-child-msg-badge {
  position: absolute;
  top: 0; right: -6px;
  background: #DC2626;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  padding: 0 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ----- Section wrapper ----------------------------------------- */
.acct-section { padding: 1.75rem 2rem; flex: 1; }
.acct-section-title { font-size: 1.25rem; font-weight: 800; color: #1F1235; margin-bottom: 0.25rem; }
.acct-section-subtitle { font-size: 0.875rem; color: #6B5878; margin-bottom: 1.5rem; }

/* ----- Shared: status badges ----------------------------------- */
.acct-badge-status {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
}
.acct-badge-status--urgent { background: #fef2f2; color: #DC2626; }
.acct-badge-status--warn   { background: #fffbeb; color: #D97706; }
.acct-badge-status--ok     { background: #f0fdf4; color: #16A34A; }

/* ----- Shared: buttons ----------------------------------------- */
.acct-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.875rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
  font-family: inherit;
}
.acct-btn:hover { opacity: 0.85; }
.acct-btn--primary { background: #6A1B9A; color: #fff; }
.acct-btn--ghost { background: transparent; color: #6B5878; border: 1.5px solid #EDE8F5; }

/* ----- Shared: empty state ------------------------------------- */
.acct-empty-state { text-align: center; padding: 3rem 1rem; color: #6B5878; }
.acct-empty-state i { font-size: 3rem; color: #EDE8F5; display: block; margin-bottom: 0.75rem; }
.acct-empty-state p { font-size: 0.875rem; }

/* ----- Shared: list heading ------------------------------------ */
.acct-list-heading {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6B5878;
  margin-bottom: 0.75rem;
}

/* ----- Section Accueil — Action cards + Stats ------------------ */
.acct-actions { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 2rem; }
.acct-action-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #fff;
  border-radius: 12px;
  border-left: 4px solid currentColor;
  padding: 1rem 1.25rem;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
}
.acct-action-card--urgent { color: #DC2626; }
.acct-action-card--warn   { color: #D97706; }
.acct-action-card--info   { color: #2563EB; }
.acct-action-card--ok     { color: #16A34A; }
.acct-action-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.acct-action-icon--urgent { background: #fef2f2; color: #DC2626; }
.acct-action-icon--warn   { background: #fffbeb; color: #D97706; }
.acct-action-icon--info   { background: #eff6ff; color: #2563EB; }
.acct-action-icon--ok     { background: #f0fdf4; color: #16A34A; }
.acct-action-body { flex: 1; min-width: 0; }
.acct-action-title { font-size: 0.9rem; font-weight: 700; color: inherit; }
.acct-action-desc  { font-size: 0.8rem; color: #6B5878; margin-top: 0.1rem; }
.acct-action-btn {
  flex-shrink: 0;
  padding: 0.4rem 0.875rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.15s;
}
.acct-action-btn:hover { opacity: 0.8; }
.acct-action-btn--urgent { background: #fef2f2; color: #DC2626; border: 1.5px solid #DC2626; }
.acct-action-btn--warn   { background: #fffbeb; color: #D97706; border: 1.5px solid #D97706; }
.acct-action-btn--info   { background: #eff6ff; color: #2563EB; border: 1.5px solid #2563EB; }
.acct-stats { display: flex; gap: 1rem; flex-wrap: wrap; }
.acct-stat-tile {
  flex: 1;
  min-width: 120px;
  background: #fff;
  border-radius: 12px;
  padding: 1.25rem 1rem;
  text-align: center;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
  border: 1px solid #EDE8F5;
}
.acct-stat-value { font-size: 1.75rem; font-weight: 800; color: #6A1B9A; line-height: 1; }
.acct-stat-label { font-size: 0.75rem; color: #6B5878; margin-top: 0.25rem; }

/* ----- Section Sorties ----------------------------------------- */
.acct-outing-list { display: flex; flex-direction: column; gap: 0.625rem; }
.acct-outing-list--past { opacity: 0.7; }
.acct-outing-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #fff;
  border: 1px solid #EDE8F5;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.acct-outing-date {
  width: 3rem;
  text-align: center;
  background: #F3E5F5;
  border-radius: 10px;
  padding: 0.5rem 0.25rem;
  flex-shrink: 0;
}
.acct-outing-date--past { background: #f3f4f6; }
.acct-outing-day { display: block; font-size: 1.25rem; font-weight: 800; color: #6A1B9A; line-height: 1; }
.acct-outing-date--past .acct-outing-day { color: #9ca3af; }
.acct-outing-month { display: block; font-size: 0.65rem; font-weight: 600; text-transform: uppercase; color: #B36AD1; }
.acct-outing-date--past .acct-outing-month { color: #9ca3af; }
.acct-outing-body { flex: 1; min-width: 0; }
.acct-outing-title { font-size: 0.9rem; font-weight: 700; color: #1F1235; }
.acct-outing-meta {
  display: flex;
  gap: 0.875rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
  color: #6B5878;
  margin-top: 0.2rem;
}
.acct-outing-meta i { vertical-align: middle; }
.acct-outing-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

/* ----- Section Messages ---------------------------------------- */
.acct-section--messages { padding: 0; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.acct-messages-layout { display: flex; flex: 1; overflow: hidden; min-height: 480px; }
.acct-thread-list {
  width: 210px;
  flex-shrink: 0;
  border-right: 1px solid #EDE8F5;
  overflow-y: auto;
  padding: 0.75rem 0;
}
.acct-thread-item {
  padding: 0.75rem 1rem;
  cursor: pointer;
  border-left: 3px solid transparent;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  transition: background 0.15s;
}
.acct-thread-item:hover { background: #f5f0fb; }
.acct-thread-item--unread { border-left-color: #6A1B9A; background: #FAF5FF; }
.acct-thread-subject { font-size: 0.8rem; font-weight: 700; color: #1F1235; }
.acct-thread-preview { font-size: 0.72rem; color: #6B5878; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-chat { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.acct-chat-messages {
  scroll-behavior: smooth;
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.acct-bubble { max-width: 70%; display: flex; flex-direction: column; gap: 0.15rem; }
.acct-bubble--staff  { align-self: flex-start; }
.acct-bubble--parent { align-self: flex-end; }
.acct-bubble-text { padding: 0.625rem 0.875rem; border-radius: 12px; font-size: 0.875rem; line-height: 1.5; }
.acct-bubble--staff  .acct-bubble-text { background: #FAF5FF; color: #1F1235; }
.acct-bubble--parent .acct-bubble-text { background: #6A1B9A; color: #fff; }
.acct-bubble-time { font-size: 0.65rem; color: #9ca3af; padding: 0 0.25rem; }
.acct-bubble--parent .acct-bubble-time { text-align: right; }
.acct-compose {
  display: flex;
  gap: 0.5rem;
  padding: 0.875rem 1.25rem;
  border-top: 1px solid #EDE8F5;
  background: #fff;
  align-items: flex-end;
}
.acct-compose-input {
  flex: 1;
  border: 1.5px solid #EDE8F5;
  border-radius: 10px;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-family: inherit;
  resize: none;
  outline: none;
  transition: border-color 0.15s;
}
.acct-compose-input:focus { border-color: #6A1B9A; }
.acct-compose-btn { padding: 0.5rem 0.75rem; }

/* ----- Section Assurances -------------------------------------- */
.acct-ins-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.acct-ins-card {
  background: #fff;
  border: 1px solid #EDE8F5;
  border-radius: 14px;
  padding: 1.25rem;
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.acct-ins-card-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.acct-ins-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 8px;
  background: #F3E5F5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6A1B9A;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.acct-ins-type  { font-size: 0.875rem; font-weight: 700; color: #1F1235; }
.acct-ins-child { font-size: 0.75rem; color: #6B5878; }
.acct-ins-file { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: #6B5878; margin-bottom: 0.75rem; }
.acct-ins-file a { color: #6A1B9A; text-decoration: none; font-weight: 600; }
.acct-ins-comment { font-size: 0.75rem; color: #D97706; }
.acct-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 1.25rem;
  border: 2px dashed #EDE8F5;
  border-radius: 10px;
  background: #fafafa;
  cursor: pointer;
  text-align: center;
  font-size: 0.8rem;
  color: #6B5878;
  transition: border-color 0.15s, background 0.15s;
}
.acct-dropzone:hover { border-color: #6A1B9A; background: #FAF5FF; }
.acct-dropzone i { font-size: 1.75rem; color: #B36AD1; }
.acct-dropzone small { font-size: 0.7rem; color: #9ca3af; }
.acct-dropzone-input { display: none; }
.acct-upload-form { margin-top: 0.5rem; }

/* ----- Section Profil ------------------------------------------ */
.acct-profile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.acct-profile-card {
  background: #fff;
  border: 1px solid #EDE8F5;
  border-radius: 14px;
  padding: 1.25rem;
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
  display: flex;
  flex-direction: column;
}
.acct-profile-card-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #6A1B9A;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid #EDE8F5;
}
.acct-profile-dl { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; font-size: 0.8rem; flex: 1; }
.acct-profile-dl dt { color: #6B5878; font-weight: 500; white-space: nowrap; }
.acct-profile-dl dd { color: #1F1235; font-weight: 600; margin: 0; overflow-wrap: break-word; }

/* ----- Outing sign page ---------------------------------------- */
.acct-sign-page {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  min-height: calc(100vh - 128px);
}
.acct-sign-modal {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 40px rgba(0,0,0,.12);
  width: 100%;
  max-width: 560px;
  padding: 2rem;
}
.acct-sign-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #EDE8F5;
}
.acct-sign-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 12px;
  background: linear-gradient(135deg, #6A1B9A 0%, #B36AD1 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.acct-sign-title { font-size: 1.1rem; font-weight: 800; color: #1F1235; margin: 0 0 0.1rem; }
.acct-sign-subtitle { font-size: 0.8rem; color: #6B5878; margin: 0; }
.acct-sign-close { margin-left: auto; color: #6B5878; font-size: 1.25rem; text-decoration: none; flex-shrink: 0; transition: color 0.15s; }
.acct-sign-close:hover { color: #1F1235; }
.acct-sign-fields { display: flex; flex-direction: column; gap: 0.875rem; margin-bottom: 1.25rem; }
.acct-field-label { font-size: 0.8rem; font-weight: 700; color: #1F1235; display: block; margin-bottom: 0.3rem; }
.acct-sign-input {
  width: 100%;
  border: 1.5px solid #EDE8F5;
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.acct-sign-input:focus { border-color: #6A1B9A; }
.acct-canvas-container {
  border: 1.5px solid #EDE8F5;
  border-radius: 10px;
  overflow: hidden;
  background: #fafafa;
  cursor: crosshair;
}
.acct-canvas-container canvas { display: block; width: 100%; touch-action: none; }
.acct-sign-canvas-wrap { margin-bottom: 1rem; }
.acct-sign-clear { margin-top: 0.5rem; font-size: 0.75rem; }
.acct-sign-consent {
  font-size: 0.8rem;
  color: #6B5878;
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin-bottom: 1.25rem;
  line-height: 1.5;
}
.acct-sign-consent input[type="checkbox"] { flex-shrink: 0; margin-top: 0.15rem; accent-color: #6A1B9A; }
.acct-sign-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid #EDE8F5;
}

/* ----- Empty account page -------------------------------------- */
.acct-empty-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 128px);
  padding: 2rem 1rem;
}
.acct-empty-card { text-align: center; max-width: 420px; }
.acct-empty-card-icon {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #6A1B9A 0%, #B36AD1 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.25rem;
  color: #fff;
  margin: 0 auto 1.25rem;
}
.acct-empty-card-title { font-size: 1.25rem; font-weight: 800; color: #1F1235; margin-bottom: 0.75rem; }
.acct-empty-card-text { font-size: 0.875rem; color: #6B5878; line-height: 1.6; }

/* ----- Responsive ---------------------------------------------- */
@media (max-width: 768px) {
  .acct-sidebar { display: none; }

  /* ── Barre d'onglets mobile : une seule ligne, défilement horizontal ── */
  .acct-mobile-tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: #fff;
    border-bottom: 2px solid #EDE8F5;
    padding: 0.5rem 0.75rem;
    gap: 0.4rem;
    position: sticky;
    top: 64px;
    z-index: 99;
  }
  .acct-mobile-tabs::-webkit-scrollbar { display: none; }

  .acct-tab {
    flex: 0 0 auto;          /* ne rétrécit jamais, reste sa taille naturelle */
    display: flex;
    flex-direction: row;     /* icône + label côte à côte */
    align-items: center;
    gap: 0.3rem;
    padding: 0.42rem 0.85rem;
    border-radius: 20px;
    background: #f5f0fb;
    text-decoration: none;
    color: #6B5878;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    position: relative;
    transition: background 0.15s, color 0.15s;
    border: 2px solid transparent;
  }
  .acct-tab i { font-size: 0.95rem; line-height: 1; }
  .acct-tab--active { background: #FAF5FF; color: #6A1B9A; border-color: #B36AD1; }

  .acct-children { padding: 0.875rem 1rem; }
  .acct-section { padding: 1rem; }

  .acct-action-card { flex-wrap: wrap; gap: 0.625rem; }
  .acct-action-btn { width: 100%; text-align: center; }
  .acct-stats { gap: 0.625rem; }
  .acct-stat-tile { min-width: 80px; padding: 0.875rem 0.75rem; }
  .acct-stat-value { font-size: 1.4rem; }

  .acct-outing-card { flex-wrap: wrap; gap: 0.625rem; }
  .acct-outing-actions { width: 100%; justify-content: flex-end; }

  .acct-section--messages { min-height: 500px; }
  .acct-messages-layout { flex-direction: column; min-height: 0; flex: 1; }
  .acct-thread-list {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #EDE8F5;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.5rem;
    gap: 0.5rem;
    flex-shrink: 0;
  }
  .acct-thread-item { min-width: 160px; border-left: none; border-bottom: 3px solid transparent; flex-shrink: 0; }
  .acct-thread-item--unread { border-bottom-color: #6A1B9A; }

  .acct-ins-grid { grid-template-columns: 1fr; }
  .acct-profile-grid { grid-template-columns: 1fr; }
}

/* ── Page Skeleton / Loading Overlay ─────────────────────────────────────── */
#page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #fff;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.38s ease;
}
#page-loader.pl-out { opacity: 0; }

/* Animated top progress bar */
.pl-bar {
  position: absolute;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  z-index: 1;
  overflow: hidden;
}
.pl-bar::after {
  content: '';
  display: block;
  height: 100%;
  width: 50%;
  background: linear-gradient(90deg, transparent 0%, #6A1B9A 30%, #B36AD1 60%, #E9C8FF 80%, #B36AD1 100%);
  animation: pl-bar-slide 1.3s linear infinite;
}
@keyframes pl-bar-slide {
  from { transform: translateX(-100%); }
  to   { transform: translateX(300%); }
}

/* Shimmer keyframes */
@keyframes pl-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.pl-sk {
  background: linear-gradient(90deg, #F0EAF7 25%, #E2D3EE 50%, #F0EAF7 75%);
  background-size: 300% 100%;
  animation: pl-shimmer 1.6s ease-in-out infinite;
  border-radius: 6px;
}

/* Fake topbar */
.pl-sk-topbar {
  height: 36px;
  background: #2B0A3D;
  flex-shrink: 0;
}

/* Fake header */
.pl-sk-header {
  height: 72px;
  background: #fff;
  border-bottom: 1px solid #F0EAF7;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0 3rem;
  flex-shrink: 0;
  box-sizing: border-box;
}
.pl-sk-logo        { width: 150px; height: 24px; flex-shrink: 0; }
.pl-sk-nav-links   { display: flex; gap: 1rem; margin-left: auto; }
.pl-sk-nav-link    { width: 72px; height: 14px; }

/* Body area */
.pl-sk-body {
  flex: 1;
  overflow: hidden;
  padding: 2.5rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
  max-width: 1200px;
  align-self: center;
  box-sizing: border-box;
}

/* Hero placeholder */
.pl-sk-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.5rem 0;
}
.pl-sk-h1  { width: 50%; height: 2rem; border-radius: 8px; }
.pl-sk-sub { height: 14px; border-radius: 7px; }

/* Card grid */
.pl-sk-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.pl-sk-card { height: 180px; border-radius: 16px; }

/* Text rows */
.pl-sk-rows { display: flex; flex-direction: column; gap: 0.7rem; }
.pl-sk-row  { height: 14px; border-radius: 7px; }

@media (max-width: 900px) {
  .pl-sk-header    { padding: 0 1.25rem; }
  .pl-sk-nav-links { display: none; }
  .pl-sk-body      { padding: 1.5rem 1.25rem; gap: 1.5rem; }
  .pl-sk-cards     { grid-template-columns: 1fr; }
  .pl-sk-card      { height: 120px; }
  .pl-sk-h1        { width: 78%; }
  .pl-sk-hero      { padding: 0.75rem 0; }
}

/* ── Admin link — mobile nav only ─────────────────────────────────────────── */
/* Hidden on desktop (topbar already shows admin icon) */
.nav-admin-item { display: none !important; }

@media (max-width: 1279px) {
  .nav-admin-item {
    display: block !important;
    margin-top: 1.25rem;
    border-top: 1px solid rgba(255,255,255,.12) !important;
    padding-top: 1rem;
  }
  /* Suppress the auto-numbered "0N" prefix for this item */
  .nav-admin-item > a::before { content: none !important; }

  .nav-admin-link {
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem !important;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 2rem;
    color: rgba(255,255,255,.9) !important;
    font-family: var(--font, sans-serif) !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    transition: background 0.15s, border-color 0.15s;
  }
  .nav-admin-link:hover {
    background: rgba(255,255,255,.18) !important;
    border-color: rgba(255,255,255,.35) !important;
    color: #fff !important;
  }
}

/* ── Contact page ─────────────────────────────────────────────────────────── */
.ct-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #1A0533 0%, #2B0A3D 55%, #3D1560 100%);
  padding: 5rem 0 4rem;
  text-align: center;
  color: #fff;
}
.ct-hero-blob {
  position: absolute;
  border-radius: 50%;
  opacity: .18;
  pointer-events: none;
}
.ct-hero-blob--1 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, #B36AD1 0%, transparent 70%);
  top: -120px; left: -100px;
}
.ct-hero-blob--2 {
  width: 320px; height: 320px;
  background: radial-gradient(circle, #6A1B9A 0%, transparent 70%);
  bottom: -80px; right: -60px;
}
.ct-hero-inner { position: relative; z-index: 1; }
.ct-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #E9C8FF;
  margin-bottom: 1.1rem;
}
.ct-hero-title {
  font-family: var(--font-serif, 'Playfair Display', Georgia, serif);
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 700;
  color: #fff;
  margin: 0 0 .9rem;
  line-height: 1.1;
}
.ct-hero-lead {
  font-size: 1.05rem;
  color: rgba(255,255,255,.76);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.65;
}

/* Body layout */
.ct-body {
  background: #FAF7F2;
  padding: 3.5rem 0 5.5rem;
}
.ct-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 2rem;
  align-items: start;
}

/* Form card */
.ct-form-card {
  background: #fff;
  border-radius: 22px;
  padding: 2.5rem 2.75rem;
  box-shadow: 0 4px 32px rgba(106,27,154,.08);
}
.ct-form-heading {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-serif, Georgia, serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: #1F1235;
  margin: 0 0 1.75rem;
}
.ct-form-heading i { color: #6A1B9A; font-size: 1.1rem; }

/* Fields */
.ct-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ct-field { margin-bottom: 1.2rem; }
.ct-label {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  color: #3D1560;
  margin-bottom: .38rem;
  letter-spacing: .025em;
}
.ct-required { color: #6A1B9A; margin-inline-start: .15rem; }
.ct-input,
.ct-textarea {
  display: block;
  width: 100%;
  padding: .72rem 1rem;
  font-size: .93rem;
  font-family: var(--font, sans-serif);
  color: #1F1235;
  background: #FAF5FF;
  border: 1.5px solid #E9D5F5;
  border-radius: 11px;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
  box-sizing: border-box;
}
.ct-input::placeholder,
.ct-textarea::placeholder { color: #B8A7C8; }
.ct-input:focus,
.ct-textarea:focus {
  border-color: #6A1B9A;
  box-shadow: 0 0 0 3px rgba(106,27,154,.13);
  background: #fff;
}
.ct-textarea { resize: vertical; min-height: 148px; }

/* Footer row */
.ct-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: .25rem;
}
.ct-required-note { font-size: .78rem; color: #9B86AD; margin: 0; }

/* Buttons */
.ct-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .75rem 1.9rem;
  border-radius: 50px;
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: opacity .15s, transform .15s;
  border: none;
}
.ct-btn--primary {
  background: linear-gradient(135deg, #6A1B9A 0%, #B36AD1 100%);
  color: #fff;
}
.ct-btn--primary:hover { opacity: .88; transform: translateY(-1px); }
.ct-btn--ghost {
  background: transparent;
  color: #6A1B9A;
  border: 1.5px solid #B36AD1;
}
.ct-btn--ghost:hover { background: #FAF5FF; }

/* Flash */
.ct-flash {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  border-radius: 12px;
  padding: .85rem 1.1rem;
  font-size: .88rem;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}
.ct-flash i { font-size: 1.1rem; flex-shrink: 0; margin-top: .05rem; }
.ct-flash--success { background: #F0FDF4; color: #166534; border: 1.5px solid #BBF7D0; }
.ct-flash--error   { background: #FEF2F2; color: #991B1B; border: 1.5px solid #FECACA; }

/* Success state */
.ct-success {
  text-align: center;
  padding: 3rem 1.5rem;
}
.ct-success-icon {
  display: block;
  font-size: 3.5rem;
  color: #16A34A;
  margin-bottom: 1rem;
  line-height: 1;
}
.ct-success h2 {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 1.6rem;
  color: #1F1235;
  margin: 0 0 .6rem;
}
.ct-success p { color: #6B5878; font-size: .97rem; }

/* Info sidebar */
.ct-sidebar {}
.ct-info-card {
  background: linear-gradient(160deg, #2B0A3D 0%, #4A1472 100%);
  color: #fff;
  border-radius: 22px;
  padding: 2rem 1.85rem;
  position: sticky;
  top: 90px;
}
.ct-info-title {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 1.6rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.ct-info-item {
  display: flex;
  gap: .85rem;
  margin-bottom: 1.4rem;
  align-items: flex-start;
}
.ct-info-item:last-of-type { margin-bottom: 0; }
.ct-info-icon {
  flex-shrink: 0;
  width: 38px; height: 38px;
  background: rgba(255,255,255,.12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #E9C8FF;
}
.ct-info-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #E9C8FF;
  margin-bottom: .22rem;
}
.ct-info-value {
  font-size: .88rem;
  color: rgba(255,255,255,.85);
  line-height: 1.55;
}
.ct-info-value a { color: rgba(255,255,255,.85); text-decoration: none; }
.ct-info-value a:hover { color: #E9C8FF; }

/* Map placeholder */
.ct-info-map {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,.12);
  text-align: center;
}
.ct-map-pin {
  width: 52px; height: 52px;
  background: rgba(255,255,255,.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #E9C8FF;
  margin: 0 auto .65rem;
}
.ct-info-map p {
  font-size: .8rem;
  color: rgba(255,255,255,.6);
  margin: 0;
}

/* Responsive */
@media (max-width: 900px) {
  .ct-layout { grid-template-columns: 1fr; }
  .ct-info-card { position: static; }
  .ct-sidebar { order: -1; }
  .ct-info-card { padding: 1.5rem; }
}
@media (max-width: 640px) {
  .ct-hero { padding: 3.5rem 0 2.5rem; }
  .ct-form-card { padding: 1.5rem 1.25rem; }
  .ct-body { padding: 2rem 0 3.5rem; }
  .ct-row { grid-template-columns: 1fr; }
  .ct-form-footer { flex-direction: column; align-items: flex-start; }
}

/* ── Contact: dynamic validation states ───────────────────────────────── */
.ct-input--error,
.ct-textarea.ct-input--error {
  border-color: #DC2626 !important;
  background: #FEF2F2 !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,.12) !important;
}
.ct-input--error:focus,
.ct-textarea.ct-input--error:focus {
  border-color: #DC2626;
  box-shadow: 0 0 0 3px rgba(220,38,38,.18);
}
.ct-label--error { color: #DC2626; }

.ct-field-err {
  font-size: .78rem;
  color: #DC2626;
  margin: .3rem 0 0;
  line-height: 1.4;
  min-height: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .2s ease, opacity .2s ease;
}
.ct-field-err--show { max-height: 4em; opacity: 1; }

/* Shake animation for submit button */
@keyframes ct-shake {
  0%,100% { transform: translateX(0); }
  20%,60% { transform: translateX(-5px); }
  40%,80% { transform: translateX(5px); }
}
.ct-btn--shake { animation: ct-shake 0.4s ease; }

/* Spinner for loading state */
@keyframes ct-spin { to { transform: rotate(360deg); } }
.ct-btn-spin { animation: ct-spin 0.8s linear infinite; display: inline-block; }

/* ══════════════════════════════════════════════════════════════════════
   PASSWORD RESET PAGES  (pr-*)
   ══════════════════════════════════════════════════════════════════════ */

/* Page wrapper */
.pr-page {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f3f0ff 0%, #faf9fe 50%, #eef2ff 100%);
  padding: 2rem 1rem;
}

/* Split card */
.pr-card {
  display: grid;
  grid-template-columns: 340px 1fr;
  width: 100%;
  max-width: 860px;
  min-height: 520px;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(109,40,217,.12), 0 4px 16px rgba(0,0,0,.06);
}

/* Left panel */
.pr-panel {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, #4C1D95 0%, #6D28D9 55%, #7C3AED 100%);
  padding: 3rem 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
}
.pr-panel-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  opacity: .18;
  pointer-events: none;
}
.pr-panel-blob--1 { width: 240px; height: 240px; background: #C4B5FD; top: -60px; right: -60px; }
.pr-panel-blob--2 { width: 180px; height: 180px; background: #A78BFA; bottom: -40px; left: -40px; }
.pr-panel-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem;
  margin-bottom: 1.5rem;
  color: #DDD6FE;
}
.pr-panel-title {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 .75rem;
  font-family: 'Playfair Display', Georgia, serif;
  color: #fff;
}
.pr-panel-lead { font-size: .88rem; color: rgba(255,255,255,.75); line-height: 1.6; margin: 0 0 2rem; }
.pr-panel-dots { display: flex; gap: .5rem; }
.pr-panel-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.35); }
.pr-panel-dots span:first-child { background: rgba(255,255,255,.9); }

/* Right form panel */
.pr-form-wrap {
  background: #fff;
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Logo */
.pr-logo-link { display: flex; align-items: center; gap: .5rem; text-decoration: none; color: #5B21B6; margin-bottom: 2rem; }
.pr-logo { height: 32px; width: auto; }
.pr-logo-text { font-weight: 700; font-size: .95rem; }

/* Titles */
.pr-form-title { font-size: 1.5rem; font-weight: 700; color: #1F1235; margin: 0 0 .4rem; font-family: 'Playfair Display', Georgia, serif; }
.pr-form-sub { font-size: .875rem; color: #6B7280; margin: 0 0 1.75rem; line-height: 1.55; }

/* Alert */
.pr-alert { display: flex; align-items: flex-start; gap: .5rem; padding: .75rem 1rem; border-radius: .5rem; font-size: .86rem; margin-bottom: 1.25rem; line-height: 1.5; }
.pr-alert--error   { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
.pr-alert--success { background: #F0FDF4; color: #166534; border: 1px solid #BBF7D0; }

/* Fields */
.pr-field { margin-bottom: 1.25rem; }
.pr-label { display: block; font-size: .82rem; font-weight: 600; color: #374151; margin-bottom: .35rem; transition: color .15s; }
.pr-required { color: #7C3AED; margin-left: .1rem; }
.pr-label--error { color: #DC2626; }
.pr-input {
  width: 100%; padding: .65rem .9rem;
  border: 1.5px solid #D1D5DB; border-radius: .6rem;
  font-size: .95rem; background: #FAFAFA; color: #111827;
  outline: none; transition: border-color .15s, box-shadow .15s, background .15s;
  box-sizing: border-box;
}
.pr-input:focus { border-color: #7C3AED; background: #fff; box-shadow: 0 0 0 3px rgba(124,58,237,.12); }
.pr-input--error { border-color: #DC2626 !important; background: #FEF2F2 !important; box-shadow: 0 0 0 3px rgba(220,38,38,.1) !important; }
.pr-input--error:focus { border-color: #DC2626; box-shadow: 0 0 0 3px rgba(220,38,38,.16); }
.pr-field-err { font-size: .76rem; color: #DC2626; margin: .25rem 0 0; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .2s ease, opacity .2s ease; }
.pr-field-err--show { max-height: 4em; opacity: 1; }

/* Input + eye */
.pr-input-wrap { position: relative; display: flex; align-items: center; }
.pr-input-wrap .pr-input { padding-right: 2.75rem; }
.pr-eye { position: absolute; right: .6rem; background: none; border: none; cursor: pointer; padding: .25rem; color: #9CA3AF; font-size: 1.1rem; line-height: 1; transition: color .15s; }
.pr-eye:hover { color: #6D28D9; }

/* Strength */
.pr-strength { display: flex; align-items: center; gap: .6rem; margin-top: .45rem; }
.pr-strength-bar { flex: 1; height: 4px; background: #E5E7EB; border-radius: 2px; overflow: hidden; }
.pr-strength-fill { height: 100%; width: 0; border-radius: 2px; transition: width .3s ease, background-color .3s ease; background: #E5E7EB; }
.pr-str--weak   { background: #EF4444; }
.pr-str--medium { background: #F59E0B; }
.pr-str--good   { background: #10B981; }
.pr-str--strong { background: #6D28D9; }
.pr-strength-label { font-size: .72rem; font-weight: 600; min-width: 3.2rem; text-align: right; }
.pr-str-lbl--weak   { color: #EF4444; }
.pr-str-lbl--medium { color: #D97706; }
.pr-str-lbl--good   { color: #059669; }
.pr-str-lbl--strong { color: #6D28D9; }

/* Buttons */
.pr-btn-primary {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; padding: .8rem 1.5rem;
  background: linear-gradient(135deg, #6D28D9, #7C3AED);
  color: #fff; border: none; border-radius: .7rem;
  font-size: .95rem; font-weight: 600; cursor: pointer; margin-top: .5rem;
  transition: opacity .15s, transform .1s, box-shadow .15s;
  box-shadow: 0 4px 14px rgba(109,40,217,.3);
}
.pr-btn-primary:hover:not(:disabled) { opacity: .92; box-shadow: 0 6px 18px rgba(109,40,217,.4); }
.pr-btn-primary:active:not(:disabled) { transform: translateY(1px); }
.pr-btn-primary:disabled { opacity: .6; cursor: not-allowed; }
.pr-btn-ghost {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .6rem 1.25rem; border: 1.5px solid #C4B5FD; color: #6D28D9;
  border-radius: .65rem; font-size: .875rem; font-weight: 600;
  text-decoration: none; margin-top: 1rem; transition: background .15s, border-color .15s;
}
.pr-btn-ghost:hover { background: #F5F3FF; border-color: #7C3AED; }
@keyframes pr-shake { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-5px); } 40%,80% { transform: translateX(5px); } }
.pr-btn--shake { animation: pr-shake .4s ease; }
@keyframes pr-spin { to { transform: rotate(360deg); } }
.pr-btn-spin { animation: pr-spin .8s linear infinite; display: inline-block; }
.pr-back { display: inline-flex; align-items: center; gap: .35rem; margin-top: 1.25rem; font-size: .84rem; color: #6B7280; text-decoration: none; transition: color .15s; }
.pr-back:hover { color: #6D28D9; }

/* Sent state */
.pr-sent { display: flex; flex-direction: column; align-items: flex-start; }
.pr-sent-icon { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #EDE9FE, #DDD6FE); display: flex; align-items: center; justify-content: center; font-size: 1.75rem; color: #6D28D9; margin-bottom: 1.25rem; }
.pr-sent h1 { font-size: 1.4rem; font-weight: 700; color: #1F1235; margin: 0 0 .5rem; font-family: 'Playfair Display', Georgia, serif; }
.pr-sent p { font-size: .9rem; color: #4B5563; line-height: 1.6; margin: 0; }

/* Responsive */
@media (max-width: 700px) {
  .pr-card { grid-template-columns: 1fr; }
  .pr-panel { display: none; }
  .pr-page { padding: 1rem .75rem; align-items: flex-start; padding-top: 2rem; }
  .pr-form-wrap { padding: 2rem 1.5rem; }
}
/* ── Mobile language switcher ───────────────────────────────────────── */
.nav-lang-row {
  counter-increment: none !important;
  border-top: 1px solid rgba(255,255,255,.1) !important;
  border-bottom: none !important;
  padding: 1.25rem 0 .5rem !important;
  list-style: none;
}
.nav-lang-row::before { content: none !important; display: none !important; }

.nav-lang-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
  width: 100%;
}

.nav-lang-opt {
  direction: ltr !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .5rem;
  padding: .75rem .5rem;
  border-radius: .75rem;
  background: rgba(255,255,255,.07);
  border: 1.5px solid rgba(255,255,255,.1);
  text-decoration: none;
  transition: background .15s, border-color .15s;
  overflow: hidden;
}
.nav-lang-opt img {
  display: inline-block !important;
  width: 24px !important;
  height: 18px !important;
  max-width: none !important;
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
  flex-shrink: 0 !important;
}
.nav-lang-opt span {
  font-size: .78rem;
  font-weight: 600;
  color: rgba(255,255,255,.55);
  white-space: nowrap;
  letter-spacing: .02em;
  display: inline !important;
}
.nav-lang-opt:hover {
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.25);
}
.nav-lang-opt:hover span { color: rgba(255,255,255,.9); }
.nav-lang-opt.is-active {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.45);
}
.nav-lang-opt.is-active span { color: #fff; font-weight: 700; }

@media (min-width: 1280px) {
  .nav-lang-row { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   SKELETONS — shared bone style (reuses bv-shimmer from asso/bv)
   ═══════════════════════════════════════════════════════════════ */
/* bone commun : appliquer la classe .sk-b sur chaque os */
.sk-b{border-radius:10px;background:linear-gradient(90deg,#ede0f5 0%,#ddc8f0 40%,#ede0f5 80%);background-size:600px 100%;animation:bv-shimmer 1.6s infinite linear}

/* nav skeleton partagé (réplique le header réel) */
.sk-nav{width:100%;height:56px;background:rgba(255,252,248,.95);border-bottom:1px solid #EDE3D6;display:flex;align-items:center;padding:0 2rem;gap:2rem;flex-shrink:0}
.sk-nav-logo{width:120px;height:18px;border-radius:6px;flex-shrink:0}
.sk-nav-link{width:60px;height:12px;border-radius:6px;flex-shrink:0}
.sk-nav-cta{width:80px;height:34px;border-radius:99px;margin-left:auto;flex-shrink:0}
@media(max-width:768px){.sk-nav-link,.sk-nav-cta{display:none}}

/* ── Home (#home-skeleton) ── */
#home-skeleton{position:fixed;inset:0;z-index:9999;background:var(--warm,#FFF8F0);overflow:hidden;transition:opacity .5s ease;pointer-events:all;display:flex;flex-direction:column}
.home-sk-wrap{max-width:min(1200px,100% - 3rem);margin:0 auto;padding:2rem 0 1.5rem;flex:1;overflow:hidden}
.home-sk-hero{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center;min-height:22rem}
.home-sk-left{display:flex;flex-direction:column}
.home-sk-right{height:20rem}
.home-sk-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.5rem}
.home-sk-agenda{margin-top:2.5rem;padding:1.5rem;background:rgba(106,27,154,.04);border-radius:12px}
@media(max-width:768px){
  .home-sk-hero{grid-template-columns:1fr}
  .home-sk-right{display:none}
  .home-sk-pillars{grid-template-columns:1fr}
}

/* ── Contact (#ct-skeleton) ── */
#ct-skeleton{position:fixed;inset:0;z-index:9999;background:var(--warm,#FFF8F0);overflow:hidden;transition:opacity .5s ease;pointer-events:all;display:flex;flex-direction:column}
.ct-sk-hero{padding:2.5rem min(3rem,5vw);background:rgba(106,27,154,.06);display:flex;flex-direction:column;gap:.5rem}
.ct-sk-body{display:grid;grid-template-columns:1fr 300px;gap:2rem;max-width:min(1100px,100% - 3rem);margin:2rem auto 0;padding:0 min(1.5rem,4vw)}
.ct-sk-card{background:#fff;border-radius:16px;padding:2rem;display:flex;flex-direction:column}
.ct-sk-sidebar{background:#fff;border-radius:16px;padding:1.5rem;display:flex;flex-direction:column;gap:.6rem}
@media(max-width:768px){
  .ct-sk-body{grid-template-columns:1fr;padding:0 1rem}
  .ct-sk-sidebar{display:none}
}

/* ── Account (#acct-skeleton) ── */
#acct-skeleton{position:fixed;inset:0;z-index:9999;background:var(--cream,#FFFBF7);overflow:hidden;transition:opacity .5s ease;pointer-events:all;display:flex;flex-direction:column}
.acct-sk-layout{display:flex;flex:1;overflow:hidden}
.acct-sk-sidebar-sk{width:220px;flex-shrink:0;background:#fff;border-right:1px solid #EDE8F5;padding:1.25rem .75rem;display:flex;flex-direction:column;gap:.3rem}
.acct-sk-main{flex:1;display:flex;flex-direction:column;min-width:0}
.acct-sk-tabs-bar{display:none;flex-direction:row;gap:.5rem;background:#fff;border-bottom:2px solid #EDE8F5;padding:.5rem .75rem;flex-wrap:nowrap;overflow:hidden}
.acct-sk-children-bar{display:flex;gap:.75rem;padding:1rem 1.5rem;border-bottom:1px solid #EDE8F5;overflow:hidden}
.acct-sk-content{flex:1;padding:1.75rem 2rem;display:flex;flex-direction:column;gap:.4rem}
.acct-sk-content--chat{padding:0;overflow:hidden;gap:0}
.acct-sk-chat-body{flex:1;display:flex;flex-direction:column;gap:.75rem;padding:1.25rem}
.acct-sk-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:1.25rem}
.acct-sk-compose-row{display:flex;gap:.6rem;padding:1rem;border-top:1px solid #EDE8F5}
.acct-sk-header-avatar{display:flex;align-items:center;gap:.75rem;padding:.5rem 0 1.25rem}
@media(max-width:768px){
  .acct-sk-sidebar-sk{display:none}
  .acct-sk-tabs-bar{display:flex}
  .acct-sk-children-bar{padding:.875rem 1rem}
  .acct-sk-content{padding:1rem}
}