/* CRESSMA — Feuille de style principale — v2.4.1 */
/* Ne pas modifier — généré depuis index.php */

:root{
  --deep:#0c1f38;--navy:#0a1f38;--teal:#0e7490;--cyan:#22d3ee;
  --aqua:#7ee8fa;--text:#f0f8ff;--text-muted:#b0c4d8;
  --surface:rgba(255,255,255,.06);--surface2:rgba(255,255,255,.10);
  --border:rgba(255,255,255,.12);--border2:rgba(255,255,255,.18);
  --coral:#fb7185;--gold:#fbbf24;--radius:10px;--radius-lg:14px;
  --teal-light:#5eead4;
  --card-bg:rgba(12,30,62,.80);
  --bg-svg:url('bg.svg');
}
/* ── THÈME ROSE (fond coloré, cartes sombres) ─────────────── */
body.theme-rose{
  --deep:#DE92B8;
  --card-bg:rgba(45,27,61,.92);
  /* Textes SUR le fond de page (hors cartes) : sombres pour lisibilité */
  --page-title:#3b0a47;
  --page-accent:#701a75;
  --bg-svg:none;
  --overlay-opacity:0;
  background-image:linear-gradient(160deg,#E9A8C7 0%,#DE92B8 45%,#D588AE 100%)!important;
}
body.theme-rose::before{display:none}

/* ── THÈME CLAIR (fond coloré, cartes sombres) ────────────── */
body.theme-clair{
  --deep:#A8EDEA;
  --page-title:#083a37;
  --page-accent:#0c5460;
  --bg-svg:none;
  --overlay-opacity:0;
  background-image:linear-gradient(160deg,#C4F5F2 0%,#A8EDEA 45%,#8FE3DF 100%)!important;
}
body.theme-clair::before{display:none}

/* ── Éléments HORS carte : lisibles sur fond clair ────────── */
/* Titres de page (PLANNING DES SORTIES, MON COMPTE...) */
body.theme-rose .section-title,body.theme-clair .section-title{color:var(--page-title)}
body.theme-rose .section-title span,body.theme-clair .section-title span{color:var(--page-accent)}
body.theme-rose .logo-text,body.theme-clair .logo-text{color:var(--page-title)}
body.theme-rose .logo-sub,body.theme-clair .logo-sub{color:var(--page-accent)}
/* En-tête de date de planning (dépliable) */
body.theme-rose .planning-date-header,body.theme-clair .planning-date-header{color:var(--page-title)}
body.theme-rose .planning-date-header::before,body.theme-clair .planning-date-header::before{
  background:var(--page-accent);box-shadow:0 0 8px var(--page-accent)}
body.theme-rose .planning-date-header:hover,body.theme-clair .planning-date-header:hover{color:var(--page-accent)}
body.theme-rose .planning-date-header .fold-icon,body.theme-clair .planning-date-header .fold-icon{color:var(--page-title)}
/* Titres de section stats posés SUR le fond de page (séparateurs carburant + par membre) :
   sombres pour lisibilité. Les .stats-section-title DANS .stats-chart-card gardent --aqua. */
body.theme-rose .stats-separator > .stats-section-title,
body.theme-clair .stats-separator > .stats-section-title,
body.theme-rose .stats-separator .stats-section-title,
body.theme-clair .stats-separator .stats-section-title{color:var(--page-title)!important}
body.theme-rose #statsPeriode .stats-period-badge,
body.theme-clair #statsPeriode .stats-period-badge{color:var(--page-title);font-weight:600;
  background:rgba(255,255,255,.55);border:1px solid var(--page-accent)}

/* ── Header : semi-transparent teinté, reste lisible ──────── */
body.theme-rose header{background:rgba(222,146,184,.9);border-bottom:1px solid rgba(59,10,71,.18)}
body.theme-clair header{background:rgba(168,237,234,.85);border-bottom:1px solid rgba(8,58,55,.18)}
body.theme-rose header .logo-text,body.theme-clair header .logo-text{color:var(--page-title)}
body.theme-rose header .logo-sub,body.theme-clair header .logo-sub{color:var(--page-accent)}

/* ── Boutons posés sur le fond clair : fond opaque + texte foncé ─ */
/* btn-ghost (Modifier tarifs, Export PDF, ✕ ...) */
body.theme-rose .btn-ghost{background:rgba(255,255,255,.72);color:var(--page-accent);
  border:1px solid rgba(59,10,71,.20)}
body.theme-clair .btn-ghost{background:rgba(255,255,255,.72);color:var(--page-accent);
  border:1px solid rgba(8,58,55,.20)}
body.theme-rose .btn-ghost:hover{background:rgba(255,255,255,.9);color:var(--page-title)}
body.theme-clair .btn-ghost:hover{background:rgba(255,255,255,.9);color:var(--page-title)}

/* Bouton "Envoyer une notification" (style inline gold) */
body.theme-rose #btnNotif,body.theme-clair #btnNotif,
body.theme-rose .btn-gold,body.theme-clair .btn-gold{
  background:rgba(255,255,255,.72)!important;color:#92400e!important;
  border:1px solid rgba(146,64,14,.35)!important}
/* Bouton/lien "Fin de plongée" (style inline cyan) */
body.theme-rose a.btn[href*="fin_plongee"]{
  background:rgba(255,255,255,.72)!important;color:#701a75!important;
  border:1px solid rgba(59,10,71,.30)!important}
body.theme-clair a.btn[href*="fin_plongee"]{
  background:rgba(255,255,255,.72)!important;color:#0c5460!important;
  border:1px solid rgba(8,58,55,.30)!important}

/* Onglets "Profil / Dossier plongée" (ac-subtab) */
body.theme-rose .ac-subtab,body.theme-clair .ac-subtab{
  background:rgba(255,255,255,.55);color:var(--page-title);
  border:1px solid rgba(120,80,130,.20)}
body.theme-rose .ac-subtab.active{background:rgba(112,26,117,.16);
  border-color:rgba(112,26,117,.45);color:var(--page-accent)}
body.theme-clair .ac-subtab.active{background:rgba(12,84,96,.16);
  border-color:rgba(12,84,96,.45);color:var(--page-accent)}
body.theme-rose .ac-subtab:not(.active):hover,
body.theme-clair .ac-subtab:not(.active):hover{background:rgba(255,255,255,.8);color:var(--page-title)}

/* Les CARTES restent sombres : leur contenu (texte clair, badges, */
/* couleurs cyan/orange) est conçu pour du sombre et reste lisible. */
/* On ne touche donc PAS aux glass-card / weather-bar / stat cards.   */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'DM Sans',sans-serif;color:var(--text);min-height:100vh;
      background-color:var(--deep);
      background-image:var(--bg-svg);
      background-size:cover;
      background-position:center top;
      background-attachment:fixed;
      background-repeat:no-repeat}

/* ── Classes utilitaires réutilisables ──────────────────── */
.glass-card{background:var(--card-bg);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius-lg);box-shadow:0 4px 32px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08)}
.glass-card-overflow{background:var(--card-bg);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius-lg);box-shadow:0 4px 32px rgba(0,0,0,.4);overflow:hidden}
.glass-row{background:var(--card-bg);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius-lg);box-shadow:0 4px 32px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08);
  padding:1.25rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.formation-badge{font-family:'DM Mono',monospace;font-size:.65rem;padding:1px 5px;border-radius:4px;
  background:rgba(251,191,36,.12);color:#fbbf24;border:1px solid rgba(251,191,36,.3);margin-left:3px;display:inline-block}
/* Overlay sombre pour lisibilité */
body::before{content:'';position:fixed;inset:0;
  background:rgba(8,20,40,var(--overlay-opacity,.35));pointer-events:none;z-index:0}
#app{position:relative;z-index:1;min-height:100vh}

/* HEADER */
header{padding:0 2rem;border-bottom:1px solid rgba(255,255,255,.15);
       background:rgba(8,20,40,.88);backdrop-filter:blur(20px);
       position:sticky;top:0;z-index:100;
       display:flex;align-items:center;justify-content:space-between;
       gap:1rem;flex-wrap:wrap;min-height:70px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo-icon{width:52px;height:52px;border-radius:10px;overflow:hidden;flex-shrink:0}
.logo-icon img{width:100%;height:100%;object-fit:contain}
.logo-text{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;letter-spacing:.05em;color:var(--text)}
.logo-sub{font-size:.65rem;letter-spacing:.2em;color:var(--cyan);text-transform:uppercase;font-weight:500}

/* AUTH BAR */
.auth-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.auth-input{background:#fff;border:1px solid #cbd5e1;color:#1e293b;
            padding:7px 12px;border-radius:8px;font-family:'DM Sans',sans-serif;
            font-size:.82rem;outline:none;width:148px;transition:border-color .2s}
.auth-input:focus{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(6,182,212,.1)}
.auth-input::placeholder{color:#94a3b8}
.auth-sep{width:1px;height:26px;background:var(--border);flex-shrink:0}
.auth-err{font-size:.75rem;color:#fda4af;display:none;width:100%;text-align:right}

/* ── Modale règles inscription ── */
.rules-block{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
             border-radius:10px;padding:1.1rem 1.3rem;margin-bottom:.75rem;font-size:.88rem;line-height:1.65}
.rules-block strong{color:#f0f8ff}
.rules-block .r-warn{color:#fbbf24}
.rules-block .r-stop{color:#fb7185}
.rules-block .r-ok{color:#4ade80}
/* ── Footer ── */
footer{background:rgba(1,8,18,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
       border-top:1px solid rgba(255,255,255,.15);padding:2.5rem 2rem 1.5rem;margin-top:auto}
.footer-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem}
.footer-col-title{font-family:'Bebas Neue',sans-serif;font-size:1rem;letter-spacing:.1em;color:var(--teal-light);
                  margin-bottom:.9rem;display:flex;align-items:center;gap:.4rem}
.footer-col p,.footer-col a{font-size:.82rem;color:#e8f4ff;line-height:1.8;text-decoration:none;display:flex;align-items:flex-start;gap:.5rem}
.footer-col a:hover{color:var(--aqua)}
.footer-picto{font-size:.95rem;flex-shrink:0;margin-top:1px}
.footer-bottom{max-width:1200px;margin:1.5rem auto 0;padding-top:1rem;
               border-top:1px solid rgba(255,255,255,.07);
               font-size:.72rem;color:#4a6278;text-align:center}
/* Login modal */
.login-modal-body{padding:1.75rem 2rem 2rem}
.login-modal-body input{width:100%;background:#fff;border:1px solid #cbd5e1;color:#1e293b;
  padding:11px 14px;border-radius:8px;font-family:'DM Sans',sans-serif;
  font-size:1rem;outline:none;margin-bottom:1rem;transition:border-color .2s}
.login-modal-body input::placeholder{color:#94a3b8}
.login-modal-body input:focus{border-color:#0e7490;box-shadow:0 0 0 3px rgba(6,182,212,.15)}
/* Sur mobile : cacher les inputs inline, montrer juste le bouton */
@media(max-width:640px){
  .auth-bar .auth-input,.auth-bar .auth-sep,.auth-bar .auth-err{display:none!important}
  .auth-bar .btn-primary{display:inline-flex!important}
}
@media(min-width:641px){.mobile-nav-bar{display:none!important}}
/* Forcer layout mobile si user-agent mobile (ex: iPhone "site bureau") */
body.ua-mobile .mobile-nav-bar{display:flex!important}
body.ua-mobile .tabs-nav{display:none!important}
body.ua-mobile header{flex-direction:column;align-items:stretch;padding:0;gap:0}
body.ua-mobile header > a.logo,
body.ua-mobile header > .auth-bar,
body.ua-mobile header > .user-info-bar{padding:.5rem 1rem}
@media(max-width:640px){
  /* Le header occupe toute la largeur en colonne sur mobile */
  header{
    flex-direction:column;
    align-items:stretch;
    padding:0;
    gap:0
  }
  /* Ligne logo + auth en haut */
  header > a.logo,
  header > .auth-bar,
  header > .user-info-bar{
    padding:.5rem 1rem
  }
  /* Barre hamburger — pleine largeur, fond légèrement différent */
  .mobile-nav-bar{
    display:flex;
    align-items:center;
    padding:0 1rem;
    min-height:44px;
    border-top:1px solid rgba(255,255,255,.08);
    background:rgba(2,10,22,.95);
    box-sizing:border-box;
    width:100%
  }
}.user-info-bar{display:flex;align-items:center;gap:10px}
.user-name-display{font-size:.88rem;font-weight:600;color:var(--text)}
.user-level-display{font-size:.7rem;color:var(--cyan);text-transform:uppercase;letter-spacing:.08em}
.btn-logout{padding:7px 14px;border-radius:8px;background:rgba(255,255,255,.05);
            border:1px solid var(--border);color:var(--text-muted);
            font-family:'DM Sans',sans-serif;font-size:.8rem;cursor:pointer;transition:all .2s}
.btn-logout:hover{border-color:var(--coral);color:var(--coral)}

/* BADGES */
.user-badge{display:inline-block;padding:4px 10px;border-radius:6px;font-size:.72rem;
            font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.badge-dp{background:rgba(251,191,36,.15);color:var(--gold);border:1px solid rgba(251,191,36,.3)}
.badge-gp{background:rgba(167,139,250,.15);color:#a78bfa;border:1px solid rgba(167,139,250,.3)}
.badge-dpgp{background:linear-gradient(135deg,rgba(251,191,36,.15),rgba(167,139,250,.15));color:var(--gold);border:1px solid rgba(251,191,36,.3)}
.badge-member{background:rgba(6,182,212,.15);color:var(--aqua);border:1px solid rgba(6,182,212,.3)}
.badge-pending{font-size:.68rem;padding:2px 7px;border-radius:4px;
               background:rgba(251,191,36,.12);color:#fbbf24;
               border:1px solid rgba(251,191,36,.25);margin-left:6px}

/* ── TABS DESKTOP : underline glissant ── */
.tabs-nav{position:sticky;top:70px;z-index:99;background:rgba(4,12,24,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
          border-bottom:1px solid var(--border);padding:0 2rem;
          display:flex;align-items:stretch;gap:0;overflow-x:auto;scrollbar-width:none}
.tabs-nav::-webkit-scrollbar{display:none}
.tab{padding:14px 20px;border:none;background:transparent;color:#8aa4be;
     font-family:'DM Sans',sans-serif;font-size:.85rem;font-weight:500;cursor:pointer;
     white-space:nowrap;position:relative;transition:color .2s;letter-spacing:.01em}
.tab:hover{color:#d0e8f8}
.tab.active{color:#fff;font-weight:600}
/* Underline animé */
.tab-indicator{position:absolute;bottom:0;left:0;height:2px;
               background:linear-gradient(90deg,var(--teal),var(--cyan));
               border-radius:2px 2px 0 0;
               transition:left .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1);
               pointer-events:none}

/* ── HAMBURGER 3 BARRES → X ── */
.nav-hamburger{display:none;background:transparent;border:none;
               padding:10px 10px 10px 0;cursor:pointer;
               align-items:center;justify-content:center;flex-shrink:0;
               -webkit-tap-highlight-color:transparent}
@media(max-width:640px){
  .nav-hamburger{display:flex}
  .tabs-nav{display:none}
}
body.ua-mobile .nav-hamburger{display:flex!important}
body.ua-mobile .tabs-nav{display:none!important}
.burger-icon{width:22px;height:14px;position:relative;
             display:flex;flex-direction:column;justify-content:space-between}
.burger-icon span{display:block;width:100%;height:2px;background:#fff;
                  border-radius:2px;transform-origin:center;
                  transition:transform .42s cubic-bezier(.77,0,.175,1),
                             opacity .3s,width .42s cubic-bezier(.77,0,.175,1)}
.burger-icon span:nth-child(2){width:65%;align-self:flex-end}
.nav-hamburger.open .burger-icon span:nth-child(1){transform:translateY(6px) rotate(45deg);width:100%}
.nav-hamburger.open .burger-icon span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-hamburger.open .burger-icon span:nth-child(3){transform:translateY(-6px) rotate(-45deg);width:100%}

/* ── DRAWER PLEIN ÉCRAN ── */
.drawer-overlay{display:none!important}
.drawer{position:fixed;inset:0;z-index:501;
        pointer-events:none;visibility:hidden;overflow:hidden}
.drawer.open{pointer-events:all;visibility:visible}

/* Cercle qui s'expande depuis le bouton hamburger */
.wave-fill{position:absolute;width:48px;height:48px;border-radius:50%;
           background:#0c1f38;
           transform:scale(0);
           transition:transform .72s cubic-bezier(.76,0,.24,1);
           transform-origin:center center}
.drawer.open .wave-fill{transform:scale(85)}

/* Contenu positionné au-dessus de la vague */
.drawer-inner{position:absolute;inset:0;display:flex;flex-direction:column;z-index:1}
.drawer-header{padding:1.1rem 1.25rem .9rem;
               border-bottom:1px solid rgba(255,255,255,.07);
               display:flex;align-items:center;justify-content:space-between;
               opacity:0;transform:translateY(-10px);
               transition:opacity .3s .28s,transform .3s .28s}
.drawer.open .drawer-header{opacity:1;transform:translateY(0)}
.drawer-logo{display:flex;align-items:center;gap:.6rem}
.drawer-logo img{width:34px;height:34px;object-fit:contain;border-radius:50%;
                 background:rgba(255,255,255,.08)}
.drawer-logo span{font-family:'Bebas Neue',sans-serif;font-size:1.25rem;
                  letter-spacing:.06em;color:var(--aqua)}
.drawer-close{background:transparent;border:none;color:var(--text-muted);
              font-size:1.4rem;cursor:pointer;padding:6px;line-height:1;
              -webkit-tap-highlight-color:transparent}

/* Nav catégories */
.drawer-nav{flex:1;overflow-y:auto;padding:1.5rem 1.75rem 2rem;
            display:flex;flex-direction:column;scrollbar-width:none}
.drawer-nav::-webkit-scrollbar{display:none}
.drawer-category{margin-bottom:1.6rem;overflow:hidden}

/* Label de catégorie */
.category-label{display:block;font-size:.65rem;font-weight:500;
                letter-spacing:.24em;text-transform:uppercase;
                color:var(--teal);margin-bottom:.2rem;
                opacity:0;transform:translateY(14px);
                transition:opacity .38s,transform .38s cubic-bezier(.22,1,.36,1)}
.drawer-category.anim-in .category-label{opacity:1;transform:translateY(0)}

/* Item de menu — grand, Bebas Neue, glisse depuis le bas avec skew */
.drawer-tab{display:block;padding:.3rem 0;
            border:none;background:transparent;
            font-family:'Bebas Neue',sans-serif;
            font-size:clamp(2rem,9.5vw,3rem);line-height:.92;
            letter-spacing:.04em;color:rgba(238,246,252,.82);
            cursor:pointer;text-align:left;width:100%;
            opacity:0;transform:translateY(36px) skewY(3deg);
            transition:opacity .48s,transform .48s cubic-bezier(.22,1,.36,1),color .2s;
            position:relative;-webkit-tap-highlight-color:transparent}
.drawer-tab::after{content:'';position:absolute;bottom:1px;left:0;
                   height:1.5px;width:0;border-radius:1px;
                   background:linear-gradient(90deg,var(--cyan),transparent);
                   transition:width .3s}
.drawer-tab:active{color:var(--cyan)}
.drawer-tab.active{color:var(--cyan)}
.drawer-category.anim-in .drawer-tab{opacity:1;transform:translateY(0) skewY(0deg)}


/* MAIN / PANELS */
main{padding:2rem;max-width:1200px;margin:0 auto;background:transparent}
html,body{overflow-x:clip}
body.ua-mobile main{padding:1rem}
body.ua-mobile .cards-grid{grid-template-columns:1fr}
@media(max-width:640px){
  main{padding:1rem}
  html,body{max-width:100vw}
  .cards-grid{grid-template-columns:1fr}
}
.panel{display:none}
.panel.active{display:block}
@keyframes panelFadeIn{from{opacity:0}to{opacity:1}}
.panel.active{animation:panelFadeIn 200ms ease both}
.section-header{display:flex;align-items:center;justify-content:space-between;
                flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem}
.section-title{font-family:'Bebas Neue',sans-serif;font-size:1.8rem;letter-spacing:.05em;color:#f0f8ff}
.section-title span{color:var(--cyan)}

.stat-chip{background:var(--card-bg);
           border:1px solid rgba(255,255,255,.18);border-radius:10px;
           padding:.6rem 1.25rem;text-align:center;
           box-shadow:0 2px 16px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.07)}
/* Conteneur des chips planning */
.chips-container{display:flex;gap:.75rem;perspective:900px}

/* ── ANIMATIONS CHIPS ── */
@keyframes chipFlipIn{
  from{opacity:0;transform:rotateY(-180deg) scale(.9)}
  60% {opacity:1}
  to  {opacity:1;transform:rotateY(0deg) scale(1)}
}
@keyframes meteoFlipIn{
  from{opacity:0;transform:rotateX(-180deg) scale(.95)}
  60% {opacity:1}
  to  {opacity:1;transform:rotateX(0deg) scale(1)}
}
.chip-anim{
  animation:chipFlipIn 900ms cubic-bezier(.25,.46,.45,.94) both;
  animation-delay:var(--chip-delay,0ms);
}
#meteoChip .chip-anim{
  animation-name:meteoFlipIn;
  animation-duration:900ms;
}
body.ua-mobile .chips-container{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;width:100%}
body.ua-mobile .chips-container .stat-chip{padding:.5rem .5rem;min-width:0}
body.ua-mobile .section-header{flex-direction:column;align-items:stretch}
@media(max-width:640px){
  .chips-container{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;width:100%}
  .chips-container .stat-chip{padding:.5rem .5rem;min-width:0}
  .section-header{flex-direction:column;align-items:stretch}
}
.stat-num{font-family:'Bebas Neue',sans-serif;font-size:1.6rem;color:var(--aqua)}
.stat-validity-block{display:inline-flex;flex-direction:column;align-items:flex-start;margin-top:4px}
.stat-validity-row{display:flex;align-items:center;gap:5px;margin-top:2px}
.stat-validity-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.stat-validity-txt{font-size:.58rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);font-family:'DM Mono',monospace;white-space:nowrap}
.stat-lbl{font-size:.65rem;text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted)}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:8px;
     font-family:'DM Sans',sans-serif;font-size:.82rem;font-weight:600;cursor:pointer;
     border:none;transition:all .2s;letter-spacing:.02em;white-space:nowrap}
.btn-primary{background:linear-gradient(135deg,var(--teal),var(--cyan));color:#fff}
.btn-primary:hover{opacity:.85;transform:translateY(-1px)}
.btn-secondary{background:var(--surface2);border:1px solid var(--border2);color:var(--aqua)}
.btn-secondary:hover{background:rgba(6,182,212,.1)}
.btn-danger{background:rgba(251,113,133,.1);border:1px solid rgba(251,113,133,.3);color:var(--coral)}
.btn-danger:hover{background:rgba(251,113,133,.2)}
.btn-ghost{background:transparent;color:var(--text-muted);padding:8px 12px}
.btn-ghost:hover{color:var(--text);background:var(--surface)}
.btn-sm{padding:5px 10px;font-size:.75rem}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important}

/* FORMS */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:.5rem}
.form-row.full{grid-template-columns:1fr}
@media(max-width:520px){.form-row{grid-template-columns:1fr}}
input[type="date"],input[type="time"]{
  background:#fff;color:#1e293b;border:1px solid #cbd5e1;
  -webkit-appearance:none;appearance:none;padding:9px 12px;
  border-radius:8px;font-family:'DM Sans',sans-serif;font-size:.88rem;outline:none}
/* Sécurité : tout champ interactif lisible quel que soit le mode */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]),
select, textarea {
  color:#1e293b!important;background:#fff!important;
  -webkit-text-fill-color:#1e293b!important}
input::placeholder, textarea::placeholder {color:#94a3b8!important;-webkit-text-fill-color:#94a3b8!important}
.form-group{display:flex;flex-direction:column;gap:5px}
.form-group label{font-size:.75rem;text-transform:uppercase;letter-spacing:.09em;color:#94a3b8}
.form-group input,.form-group textarea{
  background:#fff;border:1px solid #cbd5e1;color:#1e293b;
  padding:9px 12px;border-radius:8px;font-family:'DM Sans',sans-serif;font-size:.88rem;
  outline:none;transition:border-color .2s}
.form-group input::placeholder,.form-group textarea::placeholder{color:#94a3b8}
.form-group select{
  background:#fff;border:1px solid #cbd5e1;color:#1e293b;
  padding:9px 12px;border-radius:8px;font-family:'DM Sans',sans-serif;font-size:.88rem;
  outline:none;transition:border-color .2s}
.form-group input:focus,.form-group textarea:focus{
  border-color:#0e7490;box-shadow:0 0 0 3px rgba(6,182,212,.15)}
.form-group select:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.12)}
.form-group select option{background:#fff;color:#1e293b}
/* Selects hors form-group (spots builder, defaultLevel) */
.spot-level-select,.spot-level-select option{
  background:#fff!important;color:#1e293b!important;border:1px solid #cbd5e1!important;
  border-radius:8px;padding:6px 10px;font-family:'DM Sans',sans-serif;font-size:.85rem;outline:none}
.form-group textarea{resize:vertical;min-height:60px}
.divider{height:1px;background:#e2e8f0;margin:1rem 0}

/* DIVE CARDS */
.planning-date-group{margin-bottom:2rem;perspective:1200px}
.planning-date-group.collapsed{margin-bottom:.5rem}
.planning-date-header{font-family:'DM Mono',monospace;font-size:.95rem;
  text-transform:uppercase;letter-spacing:.15em;color:var(--cyan);
  margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:.75rem;cursor:pointer;user-select:none}
.planning-date-header:hover{color:var(--aqua)}
.planning-date-header::before{content:'';width:8px;height:8px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 8px var(--cyan);flex-shrink:0}
.planning-date-header .fold-icon{margin-left:auto;font-size:.85rem;color:var(--text-muted);transition:transform .25s}
.planning-date-group.collapsed .fold-icon{transform:rotate(-90deg)}
.planning-date-group .cards-grid{overflow:clip;transition:max-height .6s ease;max-height:20000px}
.planning-date-group.collapsed .cards-grid{max-height:0;margin-bottom:0;overflow:clip}
.cards-grid{display:grid;grid-template-columns:1fr;gap:.75rem;align-items:start}
@keyframes diveCardFlip{
  from{opacity:0;transform:rotateY(180deg)}
  to  {opacity:1;transform:rotateY(0deg)}
}
.card-flip-anim{
  animation:diveCardFlip 900ms cubic-bezier(.25,.46,.45,.94) both;
  animation-delay:var(--card-delay,0ms);
}
/* ── GLOW BORDER ANIMÉ ── */
@property --ba{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes borderSpin{to{--ba:360deg}}

.dive-card{background:var(--card-bg);
           border:none;border-radius:var(--radius-lg);
           overflow:hidden;position:relative;
           box-shadow:0 0 18px rgba(34,211,238,.10),0 4px 32px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08);
           transition:box-shadow .3s}
.dive-card:hover{box-shadow:0 0 32px rgba(34,211,238,.22),0 8px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.12)}
.dive-card::before{content:'';position:absolute;inset:0;border-radius:var(--radius-lg);
  padding:2px;
  background:conic-gradient(from var(--ba),
    #0e7490 0%,
    #22d3ee 22%,
    #7ee8fa 42%,
    #22d3ee 62%,
    #0e7490 82%,
    #0e7490 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  animation:borderSpin 4s linear infinite;
  pointer-events:none}

.dive-card-header{padding:1rem 1.25rem;
                  background:linear-gradient(135deg,rgba(14,116,144,.18),rgba(6,182,212,.06));
                  border-bottom:1px solid rgba(255,255,255,.1);
                  display:flex;flex-direction:column;gap:.35rem}
.dive-header-top{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem}
.dive-site{font-family:'Bebas Neue',sans-serif;font-size:1.2rem;letter-spacing:.04em;color:var(--text)}
.dive-card-body{padding:1rem 1.25rem}
.spot-row{display:flex;align-items:center;gap:.75rem;padding:.4rem 0;
          border-bottom:1px solid rgba(255,255,255,.04)}
.spot-row:last-child{border-bottom:none}
.spot-name{flex:1;color:var(--text);font-size:.85rem}
.spot-free{color:var(--aqua);font-size:.75rem;font-weight:500}
.spot-occupant{display:flex;flex-direction:column;gap:1px;text-align:right}
.spot-occupant-name{font-size:.8rem;color:var(--text);font-weight:500}
.spot-occupant-tel{font-size:.7rem;color:var(--text-muted);font-family:'DM Mono',monospace}
.dive-card-footer{padding:.75rem 1.25rem;border-top:1px solid var(--border);
                  display:flex;align-items:center;justify-content:flex-end;gap:.5rem;flex-wrap:wrap}
.inscrit-badge{font-size:.78rem;color:#4ade80;padding:3px 8px;border-radius:5px;
               background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.2)}

/* LEVELS — hiérarchie 1 à 4
   H1=Baptême/FN1/N1  H2=FN2/N2  H3=FN3/N3  H4=FN4/N4/E1/E2/MF1/MF2 */
.spot-level{display:inline-block;padding:2px 8px;border-radius:5px;font-size:.7rem;
            font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-family:'DM Mono',monospace}
.level-0{background:rgba(148,163,184,.12);color:#94a3b8;border:1px solid rgba(148,163,184,.25)}
.level-1{background:rgba(125,211,252,.15);color:#7dd3fc;border:1px solid rgba(125,211,252,.3)}
.level-2{background:rgba(74,222,128,.15);color:#4ade80;border:1px solid rgba(74,222,128,.3)}
.level-3{background:rgba(167,139,250,.15);color:#a78bfa;border:1px solid rgba(167,139,250,.3)}
.level-4{background:rgba(251,191,36,.15);color:#fbbf24;border:1px solid rgba(251,191,36,.3)}

/* MEMBRES TABLE */

/* SPOTS BUILDER */
.spot-builder-item{display:flex;gap:.5rem;align-items:center;
                   padding:.5rem;background:rgba(255,255,255,.05);
                   border:1px solid rgba(255,255,255,.08);
                   border-radius:8px;margin-bottom:.5rem}
.spot-builder-item input,.spot-builder-item select{flex:1;background:#fff;
  border:1px solid #cbd5e1;color:#1e293b;padding:7px 10px;border-radius:7px;
  font-family:'DM Sans',sans-serif;font-size:.82rem;outline:none}
.spot-builder-item input::placeholder{color:#94a3b8}
.spot-builder-item input:focus,.spot-builder-item select:focus{
  border-color:#0e7490;outline:none;box-shadow:0 0 0 2px rgba(6,182,212,.15)}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);
               z-index:200;display:flex;align-items:center;justify-content:center;padding:1rem;
               opacity:0;pointer-events:none;transition:opacity .2s}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal{background:rgba(6,18,40,.5);backdrop-filter:blur(32px) saturate(160%);
       -webkit-backdrop-filter:blur(32px) saturate(160%);
       border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-lg);
       width:100%;max-width:620px;max-height:90vh;overflow-y:auto;
       box-shadow:0 8px 48px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.1)}
.modal-header{display:flex;align-items:center;justify-content:space-between;
              padding:1.25rem 1.5rem;border-bottom:1px solid rgba(255,255,255,.08);
              position:sticky;top:0;background:rgba(7,24,48,.9);
              backdrop-filter:blur(10px);z-index:1}
.modal-title{font-family:'Bebas Neue',sans-serif;font-size:1.3rem;letter-spacing:.04em;color:var(--aqua)}
#diveModalContent,#registerModalContent,#addMemberModalContent{padding:1.25rem 1.5rem}

/* CONFIRM */
.confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:300;
                 display:flex;align-items:center;justify-content:center;padding:1rem;
                 opacity:0;pointer-events:none;transition:opacity .2s}
.confirm-overlay.open{opacity:1;pointer-events:all}
.confirm-box{background:rgba(6,18,40,.95);backdrop-filter:blur(32px) saturate(160%);
             -webkit-backdrop-filter:blur(32px) saturate(160%);
             border:1px solid rgba(255,255,255,.18);border-radius:14px;
             padding:1.5rem;max-width:420px;width:100%;text-align:center;
             max-height:90vh;overflow-y:auto;
             box-shadow:0 8px 48px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.1)}
.confirm-icon{font-size:2.5rem;margin-bottom:.75rem}
.confirm-msg{color:var(--text-muted);font-size:.88rem;margin-bottom:1.5rem;line-height:1.5;text-align:left}
.confirm-btns{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}

/* TOAST */
.toast-container{position:fixed;bottom:1.5rem;right:1.5rem;z-index:400;display:flex;flex-direction:column;gap:.5rem}
.toast{padding:.75rem 1.25rem;border-radius:10px;font-size:.85rem;font-weight:500;
       box-shadow:0 8px 24px rgba(0,0,0,.3);opacity:0;transform:translateY(8px);
       transition:all .25s;max-width:320px}
.toast.show{opacity:1;transform:translateY(0)}
.toast-success{background:#14532d;border:1px solid #16a34a;color:#86efac}
.toast-error{background:#4c0519;border:1px solid #e11d48;color:#fda4af}
.toast-info{background:var(--navy);border:1px solid var(--border2);color:var(--aqua)}

/* EMPTY */
.empty{text-align:center;padding:3rem 1rem}
.empty-icon{font-size:3rem;margin-bottom:1rem}
.empty-text{color:var(--text-muted);font-size:.9rem}

/* ACCOUNT */
.account-layout{display:grid;grid-template-columns:260px 1fr;gap:1.5rem;max-width:860px}
.account-card{background:var(--card-bg);
              border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-lg);
              overflow:hidden;box-shadow:0 4px 32px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08)}
.account-avatar{background:linear-gradient(135deg,rgba(14,116,144,.5),rgba(6,182,212,.2));
                border-bottom:1px solid var(--border);padding:2rem 1.5rem;text-align:center}
.avatar-circle{width:72px;height:72px;background:linear-gradient(135deg,var(--teal),var(--cyan));
               border-radius:50%;display:flex;align-items:center;justify-content:center;
               font-size:1.5rem;font-weight:700;margin:0 auto .75rem;box-shadow:0 0 0 4px rgba(6,182,212,.15);color:#fff}
.avatar-name{font-family:'Bebas Neue',sans-serif;font-size:1.2rem;letter-spacing:.05em}
.avatar-login{font-family:'DM Mono',monospace;font-size:.75rem;color:var(--cyan);margin-top:3px}
.account-sidebar-body{padding:1.25rem}
.account-info-row{display:flex;flex-direction:column;gap:4px;padding:.65rem 0;border-bottom:1px solid rgba(255,255,255,.05)}
.account-info-row:last-child{border-bottom:none}
.account-info-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.11em;color:#64748b}
.account-info-val{font-size:.88rem;color:var(--text);font-weight:500;word-break:break-word}
.account-form-card{background:var(--card-bg);
                   border:1px solid rgba(255,255,255,.18);
                   border-radius:var(--radius-lg);padding:1.5rem 1.75rem;
                   box-shadow:0 4px 32px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08)}
.account-section-title{font-family:'Bebas Neue',sans-serif;font-size:1.2rem;letter-spacing:.04em;
                        color:var(--cyan);margin-bottom:1.25rem;padding-bottom:.5rem;border-bottom:1px solid rgba(34,211,238,.2)}
/* ── Chips de rôles sidebar Mon Compte ─────────────────── */
.ac-role-chip{display:inline-flex;align-items:center;gap:.25rem;font-size:.72rem;
              padding:.2rem .55rem;border-radius:5px;font-weight:700;letter-spacing:.03em;
              line-height:1.5;flex-shrink:0;white-space:nowrap}
.ac-role-chip-member{background:rgba(34,211,238,.12);color:var(--cyan);border:1px solid rgba(34,211,238,.3)}
.ac-role-chip-dp    {background:rgba(251,191,36,.18);color:#fbbf24;border:1px solid rgba(251,191,36,.35)}
.ac-role-chip-gp    {background:rgba(167,139,250,.18);color:#a78bfa;border:1px solid rgba(167,139,250,.35)}
.ac-role-chip-admin {background:rgba(239,68,68,.18);color:#f87171;border:1px solid rgba(239,68,68,.35)}
.ac-role-chip-wait  {background:rgba(239,68,68,.07);color:#fca5a5;border:1px solid rgba(239,68,68,.2)}
.account-ok{background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.2);color:#86efac;
            border-radius:8px;padding:10px 14px;font-size:.85rem;margin-bottom:1rem;display:none}
.account-err{background:rgba(251,113,133,.1);border:1px solid rgba(251,113,133,.3);color:#fda4af;
             border-radius:8px;padding:10px 14px;font-size:.85rem;margin-bottom:1rem;display:none}


/* REGISTER FORM */
.register-form-card{max-width:580px;margin:0 auto;
                    background:var(--card-bg);
                    border:1px solid rgba(255,255,255,.18);
                    border-radius:var(--radius-lg);overflow:hidden;
                    box-shadow:0 8px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.1)}
.register-form-hero{background:linear-gradient(135deg,rgba(14,116,144,.4),rgba(6,182,212,.15));
                    border-bottom:1px solid var(--border);padding:2rem;text-align:center}
.register-form-hero .hero-icon{font-size:3rem;margin-bottom:.5rem}
.register-form-hero h2{font-family:'Bebas Neue',sans-serif;font-size:1.8rem;letter-spacing:.06em}
.register-form-hero p{font-size:.85rem;color:var(--text-muted);margin-top:.25rem}
.register-form-body{padding:1.75rem 2rem 2rem}
@media(max-width:520px){.register-form-body{padding:1.25rem 1rem 1.5rem}}
.dp-checkbox-row{display:flex;align-items:flex-start;gap:.75rem;padding:1rem 1.25rem;
                 background:rgba(251,191,36,.06);border:1px solid rgba(251,191,36,.2);
                 border-radius:10px;cursor:pointer}
.dp-checkbox-row input{width:18px;height:18px;accent-color:var(--gold);margin-top:2px;flex-shrink:0}
.dp-checkbox-label strong{color:var(--gold);font-size:.9rem}
.dp-checkbox-label span{color:#64748b;font-size:.78rem;line-height:1.4;display:block;margin-top:2px}
.success-card{max-width:580px;margin:0 auto;text-align:center;
              background:var(--card-bg);
              border:1px solid rgba(34,197,94,.3);border-radius:var(--radius-lg);
              padding:3rem 2rem;display:none;
              box-shadow:0 4px 32px rgba(0,0,0,.4)}
.success-card .success-icon{font-size:4rem;margin-bottom:1rem}
.success-card h3{font-family:'Bebas Neue',sans-serif;font-size:1.8rem;color:#86efac;margin-bottom:.5rem}
.success-details{margin:1.5rem 0;padding:1rem 1.25rem;background:rgba(255,255,255,.05);border-radius:10px;text-align:left}
.detail-row{display:flex;justify-content:space-between;padding:.4rem 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:.85rem}
.detail-row:last-child{border-bottom:none}
.detail-key{color:var(--text-muted)}
.detail-val{color:var(--text);font-weight:500}
.phone-hint{font-size:.72rem;color:var(--text-muted);margin-top:3px}
select option{color:#000}

@media(max-width:700px){
  .account-layout{grid-template-columns:1fr}
  .account-form-card{padding:1.25rem 1.1rem}
}

/* SUB-TABS MON COMPTE */
.ac-subtabs{display:flex;gap:.5rem;margin-bottom:.25rem}
.ac-subtab{flex:1;padding:.65rem .75rem;border-radius:8px;
           border:1px solid rgba(255,255,255,.1);background:transparent;
           color:var(--text-muted);font-size:.84rem;font-weight:600;cursor:pointer;
           transition:background .2s,border-color .2s,color .2s;
           -webkit-tap-highlight-color:transparent;font-family:inherit}
.ac-subtab.active{background:rgba(34,211,238,.12);border-color:rgba(34,211,238,.4);color:var(--cyan)}
.ac-subtab:not(.active):hover{background:rgba(255,255,255,.05);color:var(--text)}
.ac-subpanel{display:none;flex-direction:column;gap:1.25rem}
.ac-subpanel.active{display:flex}
@media(max-width:480px){
  .ac-subtab{font-size:.78rem;padding:.55rem .5rem}
}

/* BACK TO TOP */
#backToTop{position:fixed;bottom:1.5rem;left:1.5rem;z-index:399;
           width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;
           background:linear-gradient(135deg,var(--teal),var(--cyan));
           color:#fff;font-size:1.2rem;display:flex;align-items:center;justify-content:center;
           box-shadow:0 4px 16px rgba(6,182,212,.35);
           opacity:0;pointer-events:none;transform:translateY(12px);
           transition:opacity .25s,transform .25s}
#backToTop.visible{opacity:1;pointer-events:all;transform:translateY(0)}
#backToTop:hover{opacity:.85;transform:translateY(-2px)}

/* DIVE CARD COLLAPSE (planning uniquement) */
.dive-collapse-wrap{
  overflow:hidden;max-height:0;transition:max-height .45s ease}
.dive-card-collapsible.expanded .dive-collapse-wrap{
  max-height:3000px}
.dive-toggle-btn{width:100%;padding:.6rem 1.25rem;
                 background:rgba(6,182,212,.06);border:none;border-top:1px solid var(--border);
                 color:var(--cyan);font-family:'DM Sans',sans-serif;font-size:.8rem;
                 cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;
                 transition:background .2s}
.dive-toggle-btn:hover{background:rgba(6,182,212,.12)}
.dive-toggle-icon{transition:transform .3s;font-size:.9rem}
.dive-card-collapsible.expanded .dive-toggle-icon{transform:rotate(180deg)}

/* ── SPLASH SCREEN ───────────────────────────────────────────── */
#splash{
  position:fixed;inset:0;z-index:9999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:52px;
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%,rgba(100,210,240,.18) 0%,transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 70%,rgba(60,180,200,.14) 0%,transparent 55%),
    radial-gradient(ellipse 100% 100% at 50% 50%,rgba(180,235,250,.10) 0%,transparent 70%),
    linear-gradient(135deg,rgba(210,242,255,.72) 0%,rgba(180,230,248,.68) 40%,rgba(160,220,240,.72) 100%);
  backdrop-filter:blur(24px) saturate(1.4);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  opacity:1;
  transition:opacity 1.4s cubic-bezier(0.4,0,0.2,1)}
#splash.hidden{opacity:0;pointer-events:none}

/* Aura blobs */
#splash .aura{
  position:absolute;border-radius:50%;
  filter:blur(80px);pointer-events:none;
  animation:splash-aura ease-in-out infinite alternate}
#splash .aura-1{width:55vw;height:55vw;top:-10%;left:-15%;background:radial-gradient(circle,rgba(90,209,205,.32) 0%,transparent 70%);animation-duration:4s;animation-delay:0s}
#splash .aura-2{width:45vw;height:45vw;bottom:-10%;right:-10%;background:radial-gradient(circle,rgba(132,205,250,.28) 0%,transparent 70%);animation-duration:5s;animation-delay:-1.5s}
#splash .aura-3{width:35vw;height:35vw;top:30%;left:55%;background:radial-gradient(circle,rgba(155,89,182,.18) 0%,transparent 70%);animation-duration:6s;animation-delay:-3s}
#splash .aura-4{width:40vw;height:40vw;top:50%;left:20%;background:radial-gradient(circle,rgba(60,180,230,.22) 0%,transparent 70%);animation-duration:4.5s;animation-delay:-.8s}
#splash .aura-5{width:30vw;height:30vw;top:10%;right:20%;background:radial-gradient(circle,rgba(200,240,255,.20) 0%,transparent 70%);animation-duration:7s;animation-delay:-2s}
@keyframes splash-aura{
  0%  {transform:translate(0,0) scale(1)}
  50% {transform:translate(4%,6%) scale(1.08)}
  100%{transform:translate(-3%,-4%) scale(.95)}}

/* Canvas bulles */
#splash .splash-bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none}
#bubble-canvas{position:absolute;inset:0;display:block;width:100%;height:100%}

/* Wrapper spinner */
.splash-spinner-wrap{
  position:relative;width:140px;height:140px;
  filter:drop-shadow(0 8px 32px rgba(90,209,205,.35))}

/* Anneau rotatif dégradé */
.splash-ring{
  position:absolute;top:50%;left:50%;
  border-radius:50%;height:140px;width:140px;
  animation:splash-rotate 1.2s linear infinite;
  background-color:#9b59b6;
  background-image:linear-gradient(#9b59b6,#84cdfa,#5ad1cd)}
.splash-ring span{
  position:absolute;border-radius:50%;height:100%;width:100%;
  background-color:#9b59b6;
  background-image:linear-gradient(#9b59b6,#84cdfa,#5ad1cd)}
.splash-ring span:nth-of-type(1){filter:blur(5px)}
.splash-ring span:nth-of-type(2){filter:blur(10px)}
.splash-ring span:nth-of-type(3){filter:blur(25px)}
.splash-ring span:nth-of-type(4){filter:blur(50px)}
.splash-ring::after{
  content:"";position:absolute;
  top:14px;left:14px;right:14px;bottom:14px;
  background-color:#fff;border:solid 5px #fff;border-radius:50%}
@keyframes splash-rotate{
  from{transform:translate(-50%,-50%) rotate(0deg)}
  to  {transform:translate(-50%,-50%) rotate(360deg)}}

/* Logo centré */
.splash-logo{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:100px;height:100px;
  object-fit:contain;z-index:10;
  border-radius:50%}

/* Tagline */
.splash-tagline{display:flex;flex-direction:column;align-items:center;gap:6px}
.splash-tagline-name{
  font-family:'Montserrat','DM Sans',sans-serif;
  font-size:clamp(1.4rem,3.5vw,2rem);font-weight:500;
  letter-spacing:.35em;color:#0d2244;text-transform:uppercase}
.splash-tagline-line{width:40px;height:1px;background:linear-gradient(90deg,transparent,#5ad1cd,transparent)}
.splash-tagline-text{
  font-family:'Montserrat','DM Sans',sans-serif;
  font-size:clamp(.75rem,2vw,.95rem);font-weight:300;
  letter-spacing:.22em;color:#1a4a7a;text-transform:lowercase;
  text-align:center;line-height:1.8}

/* ── SÉLECTEUR DE THÈME ──────────────────────────────────────── */
.theme-selector{display:flex;gap:1rem;flex-wrap:wrap}
.theme-btn{flex:1;min-width:140px;display:flex;flex-direction:column;align-items:center;gap:.6rem;
           padding:1rem;border-radius:var(--radius);cursor:pointer;
           background:rgba(255,255,255,.04);border:2px solid rgba(255,255,255,.1);
           color:var(--text-muted);font-family:'DM Sans',sans-serif;font-size:.82rem;
           font-weight:500;transition:all .2s}
.theme-btn:hover{border-color:rgba(255,255,255,.25);color:var(--text)}
.theme-btn.active{border-color:var(--cyan);color:var(--text);background:rgba(34,211,238,.06)}
.theme-preview{width:60px;height:38px;border-radius:6px;border:1px solid rgba(255,255,255,.15);
               display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.theme-preview-default{background:linear-gradient(135deg,#020d18,#0a1f38)}
.theme-preview-contrast{background:#010509}
.theme-preview-rose{background:#DE92B8}
.theme-preview-clair{background:#A8EDEA}
.theme-preview-default::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 60% 20%,rgba(14,116,144,.5),transparent 60%)}
.theme-preview-contrast::before{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(34,211,238,.08) 0%,transparent 100%)}
.theme-preview-rose::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 60% 20%,rgba(255,255,255,.45),transparent 60%)}
.theme-preview-clair::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 60% 20%,rgba(255,255,255,.5),transparent 60%)}
.theme-preview-dot{width:10px;height:10px;border-radius:50%;
                   background:var(--cyan);box-shadow:0 0 8px var(--cyan);z-index:1}
.theme-preview-rose .theme-preview-dot{background:#a21caf;box-shadow:0 0 8px #a21caf}
.theme-preview-clair .theme-preview-dot{background:#0e7490;box-shadow:0 0 8px #0e7490}

/* ── MENU PLEIN ÉCRAN — thème contrasté (mobile uniquement) ─── */

/* Bouton MENU visible seulement en thème contrasté sur mobile */
.nav-fsmenu-btn{display:none}
@media(max-width:640px){
  .theme-contrast .nav-hamburger{display:none!important}
  .theme-contrast .nav-fsmenu-btn{
    display:flex;align-items:center;gap:.5rem;
    background:#0e7490;border:2px solid #22d3ee;
    color:#fff;font-family:'DM Sans',sans-serif;
    font-size:1.05rem;font-weight:700;letter-spacing:.06em;
    padding:9px 20px;border-radius:10px;cursor:pointer;
    box-shadow:0 0 0 3px rgba(34,211,238,.2)}
  .theme-contrast .nav-fsmenu-btn:active{transform:scale(.97)}
}

/* Overlay plein écran — caché par défaut dans tous les cas */
.fsmenu-overlay{
  display:none;
  position:fixed;inset:0;z-index:600;
  background:#010810;
  flex-direction:column;
  overflow-y:auto}

/* Visible uniquement : thème contrasté + mobile + classe .open */
@media(max-width:640px){
  .theme-contrast .fsmenu-overlay.open{
    display:flex;
  }
}

/* Header */
.fsmenu-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.25rem 1.5rem;
  border-bottom:2px solid #22d3ee;
  flex-shrink:0}
.fsmenu-title{
  font-family:'Bebas Neue',sans-serif;font-size:1.8rem;
  letter-spacing:.12em;color:#22d3ee}
.fsmenu-close{
  display:flex;align-items:center;gap:.4rem;
  background:#1e293b;border:2px solid #475569;
  color:#f0f8ff;font-family:'DM Sans',sans-serif;
  font-size:1rem;font-weight:700;padding:10px 18px;
  border-radius:10px;cursor:pointer}
.fsmenu-close:active{background:#334155}

/* Grille de tuiles */
.fsmenu-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  padding:1.25rem 1.25rem 2rem;
  flex:1}

/* Tuile individuelle */
.fsmenu-tile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.6rem;padding:1.5rem .75rem;
  background:#0a1a2e;
  border:2px solid #1e3a5f;
  border-radius:14px;cursor:pointer;
  transition:border-color .15s,background .15s;
  min-height:110px}
.fsmenu-tile:active{background:#0e2442;border-color:#22d3ee}
.fsmenu-tile-active{
  background:#0c2340;
  border-color:#22d3ee;
  box-shadow:0 0 0 2px rgba(34,211,238,.25)}
.fsmenu-tile-icon{font-size:2rem;line-height:1}
.fsmenu-tile-label{
  font-family:'DM Sans',sans-serif;font-size:.95rem;
  font-weight:700;color:#f0f8ff;text-align:center;
  letter-spacing:.02em;line-height:1.2}
.fsmenu-tile-active .fsmenu-tile-label{color:#22d3ee}

/* ── Bannière mise à jour ── */
#updateBanner{
  display:flex;align-items:center;gap:.75rem;
  background:rgba(14,116,144,.25);
  border-bottom:1px solid rgba(34,211,238,.35);
  padding:.6rem 1.5rem;font-size:.85rem;color:var(--aqua);
  position:sticky;top:70px;z-index:99;flex-wrap:wrap}

/* ── Modale annonce — sur la base de .confirm-box existant ── */
#annonce-overlay .confirm-box{max-width:480px;text-align:left}
#annonce-texte{white-space:pre-wrap}

/* ── Responsive bannière et modale ── */
body.ua-mobile #updateBanner{top:0;padding:.5rem 1rem;font-size:.8rem}
body.ua-mobile #annonce-overlay .confirm-box{margin:.75rem;padding:1.25rem}
body.ua-mobile #annonce-texte{max-height:200px;font-size:.86rem}
body.ua-mobile #annonceFormPanel .glass-card{padding:1rem}
body.ua-mobile #annonceRedactionZone textarea{min-height:100px;font-size:.86rem}

/* ── Badge annonce active sur onglet DP ── */
@keyframes annonce-pulse {
  0%,100% { opacity:1; }
  50%      { opacity:.4; }
}

/* ── Point indicateur annonce sur hamburger mobile ── */
.nav-hamburger { position: relative; }
.annonce-dot {
  position: absolute;
  top: 4px; right: 4px;
  width: 9px; height: 9px;
  background: var(--gold);
  border-radius: 50%;
  border: 2px solid rgba(2,13,24,.9);
  animation: annonce-pulse 2s ease-in-out infinite;
  pointer-events: none;
}

/* ── PANEL SITES — pleine hauteur ───────────────────────────── */
/* Approche flux normal : body.sites-active annule padding/max-w  */
/* Évite les conflits z-index avec backdrop-filter du header      */

body.sites-active main {
  padding: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}
body.sites-active #panel-sites.active {
  /* dvh = dynamic viewport height : tient compte du chrome navigateur sur mobile */
  /* Fallback vh pour anciens navigateurs                                          */
  height: calc(100vh - 118px);
  height: calc(100dvh - 118px);
  overflow: hidden;
}
#panel-sites iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
/* Mobile : tabs-nav masqué, header plus compact (~62px logo + 44px nav-bar = ~106px) */
@media (max-width: 640px) {
  body.sites-active #panel-sites.active {
    height: calc(100vh - 106px);
    height: calc(100dvh - 106px);
  }
}
/* ─── Spinner inscription ─────────────────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ─── Classes utilitaires modales admin ───────────────────── */
.form-label {
  font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--text-muted);font-weight:600;display:block;margin-bottom:.3rem;
}
.form-input {
  width:100%;box-sizing:border-box;
  background:#0d1e3a;border:1px solid rgba(255,255,255,.15);
  color:var(--text);border-radius:8px;padding:.55rem .75rem;
  font-size:.88rem;font-family:inherit;transition:border-color .2s;
}
.form-input:focus {
  outline:none;border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(34,211,238,.12);
}
.form-input::placeholder { color:var(--text-muted); }
select.form-input option  { background:#0d1e3a;color:var(--text); }
textarea.form-input       { resize:vertical;min-height:52px; }
.form-error {
  background:rgba(251,113,133,.12);border:1px solid rgba(251,113,133,.35);
  color:#fb7185;border-radius:8px;padding:.55rem .75rem;font-size:.82rem;
}

/* ─── Widget fiche membre — séparateur sections ───────────── */
/* ══════════════════════════════════════════════════════════
   TARIFS
══════════════════════════════════════════════════════════ */

#tarifs-container { max-width:860px; margin:0 auto; display:flex; flex-direction:column; gap:1rem; }

.tarifs-famille {
  overflow:hidden;
  border-radius:var(--radius-lg);
}
.tarifs-famille-hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem 1.1rem;
  background:rgba(14,116,144,.22);
  border-bottom:1px solid var(--border);
  gap:.5rem; flex-wrap:wrap;
}
.tarifs-famille-label {
  font-family:'Bebas Neue',sans-serif;
  font-size:1.05rem; letter-spacing:.06em; color:var(--cyan);
}

.tarifs-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tarifs-table { width:100%; border-collapse:collapse; font-size:.88rem; }
.tarifs-table tbody tr:hover td { background:var(--surface2); }
.tarifs-table tbody tr:not(:last-child) td { border-bottom:1px solid rgba(255,255,255,.05); }

.tarif-td-libelle { padding:.7rem 1rem; width:100%; }
.tarif-td-prix    { padding:.7rem 1rem; white-space:nowrap; text-align:right; vertical-align:middle; }
.tarif-td-actions { padding:.4rem .6rem; white-space:nowrap; vertical-align:middle; }

.tarif-libelle    { display:block; color:var(--text); }
.tarif-descriptif {
  display:block; margin-top:.2rem;
  font-size:.76rem; color:var(--text-muted); font-style:italic; line-height:1.4;
}

.tarif-badge {
  display:inline-block;
  background:rgba(14,116,144,.25);
  border:1px solid rgba(34,211,238,.25);
  color:var(--cyan);
  border-radius:6px;
  padding:.2rem .55rem;
  font-family:'DM Mono',monospace;
  font-size:.82rem; font-weight:600;
  white-space:nowrap;
}

.tarif-btn-ord {
  background:none; border:none; cursor:pointer;
  color:var(--text-muted); font-size:.8rem; padding:2px 4px;
  border-radius:4px; line-height:1; transition:color .15s;
}
.tarif-btn-ord:hover:not(:disabled) { color:var(--cyan); }
.tarif-btn-ord:disabled { opacity:.25; cursor:default; }
.tarif-btn-del:hover { color:var(--coral) !important; }

.tarifs-msg, .tarifs-loading {
  padding:1.5rem; text-align:center;
  color:var(--text-muted); font-size:.88rem; font-style:italic;
}

@media (max-width:600px) {
  #tarifs-container { gap:.75rem; }
  .tarifs-famille-hdr { padding:.7rem .85rem; }
  .tarifs-famille-label { font-size:.95rem; }
  .tarif-td-libelle { padding:.6rem .85rem; }
  .tarif-td-prix    { padding:.6rem .85rem; }
  .tarif-td-actions { padding:.3rem .4rem; display:flex; flex-direction:row; gap:2px; align-items:center; }
  .tarif-libelle    { font-size:.84rem; }
  .tarif-descriptif { font-size:.73rem; }
  .tarif-badge      { font-size:.78rem; padding:.15rem .4rem; }
}

/* ══════════════════════════════════════════════════════════
   SUMUP — Boutons de paiement
══════════════════════════════════════════════════════════ */

.sumup-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .6rem .85rem;
  border-radius: 8px;
  background: rgba(99,199,132,.10);
  border: 1px solid rgba(99,199,132,.30);
  text-decoration: none;
  transition: background .15s, border-color .15s, transform .1s;
  cursor: pointer;
}
.sumup-btn:hover {
  background: rgba(99,199,132,.20);
  border-color: rgba(99,199,132,.55);
  transform: translateY(-1px);
}
.sumup-btn:active { transform: translateY(0); }

.sumup-btn-label {
  font-size: .84rem;
  color: #dcfce7;
  font-weight: 500;
  line-height: 1.3;
}
.sumup-btn-montant {
  font-family: 'DM Mono', monospace;
  font-size: .88rem;
  font-weight: 700;
  color: #86efac;
  white-space: nowrap;
  flex-shrink: 0;
  background: rgba(99,199,132,.15);
  border-radius: 5px;
  padding: .15rem .45rem;
}


/* Mobile : label passe en colonne si trop long */
@media (max-width: 420px) {
  .sumup-btn { flex-direction: column; align-items: flex-start; gap: .3rem; }
  .sumup-btn-montant { align-self: flex-end; }
}

/* ─── CHATBOT ASSISTANT PAD ─────────────────────────────────── */
/* ─── CHATBOT ASSISTANT PAD ─────────────────────────────────── */
#chatbot-btn {
  position: fixed;
  bottom: 1.4rem;
  right: 1.4rem;
  height: 52px;
  border-radius: 26px;
  background: var(--teal);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0,0,0,.45);
  display: none; /* affiché via JS */
  align-items: center;
  justify-content: flex-end;
  z-index: 1100;
  overflow: hidden;
  /* État compact : juste l'icône */
  width: 52px;
  transition: width .45s cubic-bezier(.4,0,.2,1),
              background .15s,
              transform .15s;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  padding: 0;
}
#chatbot-btn:hover  { background: var(--cyan); transform: scale(1.05); }
#chatbot-btn.open   { background: var(--coral); }

/* État étendu — accordéon horizontal */
#chatbot-btn.expanded {
  width: 210px;
}

/* Icône fixe à droite */
#chatbot-btn-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  order: 2;
}

/* Texte qui apparaît à gauche */
#chatbot-btn-label {
  order: 1;
  padding-left: 1rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity .3s ease .15s, transform .3s ease .15s;
  pointer-events: none;
  flex-shrink: 0;
}
#chatbot-btn.expanded #chatbot-btn-label {
  opacity: 1;
  transform: translateX(0);
}

#chatbot-panel {
  position: fixed;
  bottom: 5.2rem;
  right: 1.4rem;
  width: 340px;
  max-height: 500px;
  background: var(--navy);
  border: 1px solid var(--border2);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
  display: flex;
  flex-direction: column;
  z-index: 1099;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px) scale(.97);
  transition: opacity .2s, transform .2s;
}
#chatbot-panel.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

#chatbot-header {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem 1rem;
  background: var(--deep);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
#chatbot-header span { font-size: .85rem; font-weight: 600; color: var(--cyan); flex: 1; }
#chatbot-clear {
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; font-size: .75rem; padding: .2rem .4rem;
  border-radius: 4px; transition: color .15s;
}
#chatbot-clear:hover { color: var(--coral); }

#chatbot-messages {
  flex: 1;
  overflow-y: auto;
  padding: .9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
#chatbot-messages::-webkit-scrollbar { width: 4px; }
#chatbot-messages::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

.cb-msg {
  max-width: 88%;
  padding: .55rem .8rem;
  border-radius: 10px;
  font-size: .82rem;
  line-height: 1.45;
  word-break: break-word;
  white-space: pre-wrap;
}
.cb-msg.user {
  background: var(--teal);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 3px;
}
.cb-msg.bot {
  background: var(--surface2);
  color: var(--text);
  align-self: flex-start;
  border-bottom-left-radius: 3px;
}
.cb-msg.error { background: rgba(251,113,133,.15); color: var(--coral); }

.cb-typing {
  align-self: flex-start;
  display: flex;
  gap: 5px;
  padding: .55rem .8rem;
  background: var(--surface2);
  border-radius: 10px;
  border-bottom-left-radius: 3px;
}
.cb-typing span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: cb-bounce .9s infinite;
}
.cb-typing span:nth-child(2) { animation-delay: .15s; }
.cb-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes cb-bounce {
  0%,60%,100% { transform: translateY(0); opacity: .6; }
  30%          { transform: translateY(-5px); opacity: 1; }
}

#chatbot-form {
  display: flex;
  gap: .5rem;
  padding: .65rem .8rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--deep);
}
#chatbot-input {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 8px;
  color: var(--text);
  font-size: .82rem;
  padding: .45rem .65rem;
  resize: none;
  outline: none;
  max-height: 80px;
  overflow-y: auto;
  -webkit-appearance: none;
  font-family: inherit;
  line-height: 1.4;
}
#chatbot-input:focus { border-color: var(--cyan); }
#chatbot-input::placeholder { color: var(--text-muted); }
#chatbot-send {
  background: var(--teal);
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  padding: .45rem .75rem;
  font-size: 1rem;
  transition: background .15s;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
#chatbot-send:hover:not(:disabled) { background: var(--cyan); }
#chatbot-send:disabled { opacity: .45; cursor: default; }

/* ── Mobile : panel plein écran ─────────────────────────── */
@media (max-width: 480px) {
  #chatbot-panel {
    bottom: 0; right: 0;
    width: 100%;
    max-height: 75vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: none;
  }
  #chatbot-btn {
    bottom: 1.1rem;
    right: 1.1rem;
  }
  #chatbot-btn.expanded { width: 190px; }
}
/* ── Nav mobile présente : lever le bouton ──────────────── */
@media (max-width: 767px) {
  #chatbot-btn { bottom: 4.8rem; }
  #chatbot-panel {
    bottom: 0;
    max-height: 72vh;
  }
}
/* ════════════════════════════════════════════════════════════════
   GUEST HOME — page d'accueil visiteurs non connectés
   Toutes les règles sont scopées sous #guestHome ou #ghNavDots
   ════════════════════════════════════════════════════════════════ */

/* ── CANVAS UNDERWATER ── */
#gh-ocean-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ── NAV DOTS ── */
#ghNavDots {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 90;
  list-style: none;
  margin: 0;
  padding: 0;
}
#ghNavDots .gh-nav-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(200,220,255,.3);
  cursor: pointer;
  transition: all .3s;
  border: 1px solid rgba(200,220,255,.2);
}
#ghNavDots .gh-nav-dot.active {
  background: #00c8e0;
  box-shadow: 0 0 10px #00c8e0;
  transform: scale(1.4);
}
@media (max-width: 768px) { #ghNavDots { display: none !important; } }

/* ── WRAPPER ── */
#guestHome {
  position: relative;
  z-index: 1;
  /* variables locales guest */
  --gh-cyan:     #00c8e0;
  --gh-teal:     #00e5b4;
  --gh-gold:     #f0c040;
  --gh-gold-dim: rgba(240,192,64,.15);
  --gh-card:     rgba(12,28,52,.55);
  --gh-border:   rgba(0,200,220,.18);
  --gh-white:    #e8f4ff;
  --gh-muted:    rgba(200,220,255,.5);
}
#guestHome .gh-page-wrap { position: relative; z-index: 1; }

/* ── HERO ── */
#guestHome .gh-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 120px 2rem 6rem;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
#guestHome .gh-hero-eyebrow {
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gh-muted);
  margin-bottom: 24px;
}
#guestHome .gh-hero-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(3rem, 10vw, 6.5rem);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--gh-white);
  margin-bottom: 4px;
}
#guestHome .gh-hero-title span { color: var(--gh-cyan); }
#guestHome .gh-hero-title-sub {
  font-size: .85rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gh-muted);
  margin: 10px 0 28px;
}
#guestHome .gh-hero-desc {
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(200,220,255,.75);
  max-width: 540px;
  margin: 0 auto 28px;
}
#guestHome .gh-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 36px;
}
#guestHome .gh-badge {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 20px;
  background: rgba(0,200,220,.1);
  border: 1px solid rgba(0,200,220,.25);
  color: var(--gh-cyan);
}
#guestHome .gh-badge.gold {
  background: var(--gh-gold-dim);
  border-color: rgba(240,192,64,.3);
  color: var(--gh-gold);
}
#guestHome .gh-hero-cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
#guestHome .gh-btn-hero {
  padding: 14px 32px;
  border-radius: 50px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .05em;
  text-decoration: none;
  cursor: pointer;
  transition: all .25s;
  border: none;
  display: inline-block;
  line-height: 1;
}
#guestHome .gh-btn-hero.primary {
  background: linear-gradient(135deg, var(--gh-cyan), var(--gh-teal));
  color: #060c1a;
}
#guestHome .gh-btn-hero.primary:hover  { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,200,220,.4); }
#guestHome .gh-btn-hero.secondary {
  background: rgba(0,200,220,.12);
  border: 1px solid rgba(0,200,220,.35);
  color: var(--gh-cyan);
}
#guestHome .gh-btn-hero.secondary:hover { background: rgba(0,200,220,.2); }

#guestHome .gh-hero-stats {
  display: flex;
  gap: 40px;
  justify-content: center;
  flex-wrap: wrap;
}
#guestHome .gh-hero-stat-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: var(--gh-white);
}
#guestHome .gh-hero-stat-label {
  font-size: .75rem;
  color: var(--gh-muted);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-top: 2px;
}
/* ── SECTIONS GÉNÉRIQUES ── */
#guestHome .gh-section {
  padding: 90px 2rem;
  max-width: 900px;
  margin: 0 auto;
}
#guestHome .gh-section-header { text-align: center; margin-bottom: 48px; }
#guestHome .gh-section-tag {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gh-cyan);
  margin-bottom: 12px;
}
#guestHome .gh-section-divider {
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, var(--gh-cyan), var(--gh-teal));
  margin: 0 auto 20px;
  border-radius: 2px;
}
#guestHome .gh-section-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  color: var(--gh-white);
  margin-bottom: 12px;
}
#guestHome .gh-section-title em { color: var(--gh-cyan); font-style: normal; }
#guestHome .gh-section-desc {
  font-size: 1rem;
  color: var(--gh-muted);
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ── SORTIES GRID ── */
#guestHome .gh-sorties-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}
#guestHome .gh-sortie-card {
  background: var(--gh-card);
  border: 1px solid var(--gh-border);
  border-radius: 14px;
  padding: 24px;
  transition: transform .3s, box-shadow .3s;
  backdrop-filter: blur(12px);
}
#guestHome .gh-sortie-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,200,220,.12); }
#guestHome .gh-sortie-icon  { font-size: 2rem; margin-bottom: 12px; display: block; }
#guestHome .gh-sortie-type  { font-size: .65rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--gh-cyan); margin-bottom: 6px; }
#guestHome .gh-sortie-title { font-family: 'Montserrat',sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--gh-white); margin-bottom: 8px; }
#guestHome .gh-sortie-detail{ font-size: .85rem; color: var(--gh-muted); line-height: 1.6; }

/* ── FORMATIONS ── */
#guestHome .gh-formations-levels { display: flex; flex-direction: column; gap: 12px; }
#guestHome .gh-level-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 20px;
  background: var(--gh-card);
  border: 1px solid rgba(0,200,220,.18);
  border-radius: 12px;
  transition: border-color .3s;
  backdrop-filter: blur(12px);
}
#guestHome .gh-level-row:hover { border-color: rgba(0,200,220,.35); }
#guestHome .gh-level-badge {
  min-width: 60px;
  text-align: center;
  font-family: 'Montserrat',sans-serif;
  font-size: .75rem;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--gh-cyan), rgba(0,200,220,.5));
  color: #060c1a;
  flex-shrink: 0;
}
#guestHome .gh-level-name { font-size: .95rem; font-weight: 600; color: var(--gh-white); margin-bottom: 3px; }
#guestHome .gh-level-desc { font-size: .8rem; color: var(--gh-muted); }
#guestHome .gh-level-dot  { width: 8px; height: 8px; border-radius: 50%; background: var(--gh-cyan); box-shadow: 0 0 8px var(--gh-cyan); margin-left: auto; flex-shrink: 0; }
#guestHome .gh-passerelle-note {
  margin-top: 20px;
  padding: 1.2rem 1.6rem;
  background: var(--gh-gold-dim);
  border: 1px solid rgba(240,192,64,.25);
  border-radius: 10px;
  font-size: 13px;
  color: var(--gh-gold);
}

/* ── STEPS ── */
#guestHome .gh-steps-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
#guestHome .gh-step-card {
  background: var(--gh-card);
  border: 1px solid var(--gh-border);
  border-radius: 14px;
  padding: 28px 20px;
  text-align: center;
  backdrop-filter: blur(12px);
}
#guestHome .gh-step-num   { font-family: 'Montserrat',sans-serif; font-size: 2.5rem; font-weight: 900; color: var(--gh-cyan); opacity: .3; margin-bottom: 12px; }
#guestHome .gh-step-title { font-size: 1rem; font-weight: 700; color: var(--gh-white); margin-bottom: 8px; }
#guestHome .gh-step-desc  { font-size: .82rem; color: var(--gh-muted); line-height: 1.6; }

/* ── TARIFS ── */
#guestHome .gh-tarifs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
#guestHome .gh-tarif-card {
  background: var(--gh-card);
  border: 1px solid var(--gh-border);
  border-radius: 14px;
  padding: 24px;
  text-align: center;
  backdrop-filter: blur(12px);
  transition: transform .3s;
}
#guestHome .gh-tarif-card:hover { transform: translateY(-3px); }
#guestHome .gh-tarif-icon { font-size: 2rem; margin-bottom: 12px; }
#guestHome .gh-tarif-name { font-size: 1rem; font-weight: 700; color: var(--gh-white); margin-bottom: 8px; }
#guestHome .gh-tarif-desc { font-size: .82rem; color: var(--gh-muted); line-height: 1.5; margin-bottom: 12px; }
#guestHome .gh-tarif-note { font-size: .72rem; font-weight: 600; color: var(--gh-cyan); text-transform: uppercase; letter-spacing: .05em; }

/* ── PAD FEATURES ── */
#guestHome .gh-pad-features { display: flex; flex-direction: column; gap: 16px; }
#guestHome .gh-pad-feature {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: var(--gh-card);
  border: 1px solid var(--gh-border);
  border-radius: 12px;
  backdrop-filter: blur(12px);
  transition: border-color .3s;
}
#guestHome .gh-pad-feature:hover { border-color: rgba(0,200,220,.35); }
#guestHome .gh-pad-feat-icon  { font-size: 1.5rem; flex-shrink: 0; }
#guestHome .gh-pad-feat-title { font-size: .95rem; font-weight: 700; color: var(--gh-white); margin-bottom: 4px; }
#guestHome .gh-pad-feat-desc  { font-size: .82rem; color: var(--gh-muted); line-height: 1.5; }

/* ── JASPER SECTION ── */
#guestHome .gh-jasper-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
#guestHome .gh-jasper-info { }
#guestHome .gh-jasper-chat {
  background: var(--gh-card);
  border: 1px solid var(--gh-border);
  border-radius: 16px;
  overflow: hidden;
  backdrop-filter: blur(20px);
  animation: gh-pulseGlow 3s ease-in-out infinite;
}
@keyframes gh-pulseGlow {
  0%,100% { box-shadow: 0 0 20px rgba(0,200,220,.2); }
  50%      { box-shadow: 0 0 40px rgba(0,200,220,.5); }
}
#guestHome .gh-chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(0,200,220,.08);
  border-bottom: 1px solid var(--gh-border);
}
#guestHome .gh-chat-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gh-cyan), var(--gh-teal));
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .85rem;
  color: #060c1a;
  flex-shrink: 0;
}
#guestHome .gh-chat-name   { font-weight: 700; font-size: .9rem; color: var(--gh-white); }
#guestHome .gh-chat-sub    { font-size: .7rem; color: var(--gh-muted); }
#guestHome .gh-chat-status { width:8px;height:8px;border-radius:50%;background:var(--gh-teal);box-shadow:0 0 6px var(--gh-teal);margin-left:auto; }
#guestHome .gh-chat-body   {
  padding: 16px;
  height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: none;
}
#guestHome .gh-chat-body::-webkit-scrollbar { display: none; }
#guestHome .gh-chat-msg {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: .83rem;
  line-height: 1.5;
}
#guestHome .gh-chat-msg.bot  { background:rgba(0,200,220,.12);border:1px solid rgba(0,200,220,.2);color:var(--gh-white);align-self:flex-start;border-bottom-left-radius:4px; }
#guestHome .gh-chat-msg.user { background:rgba(200,220,255,.08);color:rgba(200,220,255,.8);align-self:flex-end;border-bottom-right-radius:4px; }
#guestHome .gh-chat-typing   { display:flex;gap:4px;align-items:center;padding:10px 14px;background:rgba(0,200,220,.08);border:1px solid rgba(0,200,220,.15);border-radius:12px;border-bottom-left-radius:4px;width:fit-content; }
#guestHome .gh-dot-typing    { width:6px;height:6px;border-radius:50%;background:var(--gh-cyan);animation:gh-dotBounce 1.2s ease-in-out infinite; }
#guestHome .gh-dot-typing:nth-child(2) { animation-delay:.2s; }
#guestHome .gh-dot-typing:nth-child(3) { animation-delay:.4s; }
@keyframes gh-dotBounce {
  0%,80%,100% { transform:translateY(0);opacity:.4; }
  40%          { transform:translateY(-5px);opacity:1; }
}

/* ── FINAL CTA ── */
#guestHome .gh-final-cta {
  text-align: center;
  padding: 100px 2rem;
  position: relative;
  overflow: hidden;
}
#guestHome .gh-final-cta-glow {
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,200,220,.08) 0%, transparent 70%);
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none;
}
#guestHome .gh-final-cta-title {
  font-family: 'Montserrat',sans-serif;
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 900;
  color: var(--gh-white);
  margin-bottom: 16px;
}
#guestHome .gh-final-cta-title em { color: var(--gh-cyan); font-style: normal; }
#guestHome .gh-final-cta-sub  { font-size: 1rem; color: var(--gh-muted); margin-bottom: 36px; }
#guestHome .gh-final-cta-buttons { display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:20px; }
#guestHome .gh-final-cta-link { font-size:.85rem;color:var(--gh-muted);text-decoration:none;display:block;margin-top:4px; }
#guestHome .gh-final-cta-link:hover { color:var(--gh-cyan); }

/* ── SCROLL REVEAL ── */
#guestHome .reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
#guestHome .reveal.visible { opacity:1; transform:translateY(0); }
#guestHome .reveal-delay-1 { transition-delay:.1s; }
#guestHome .reveal-delay-2 { transition-delay:.2s; }
#guestHome .reveal-delay-3 { transition-delay:.3s; }
#guestHome .reveal-delay-4 { transition-delay:.4s; }
#guestHome .reveal-delay-5 { transition-delay:.5s; }
#guestHome .reveal-delay-6 { transition-delay:.6s; }

/* ── MOBILE RESPONSIVE ── */
@media (max-width: 600px) {
  #guestHome .gh-hero           { padding:100px 1.25rem 5rem; min-height:auto; }
  #guestHome .gh-section        { padding:60px 1.25rem; }
  #guestHome .gh-hero-cta       { flex-direction:column; align-items:center; }
  #guestHome .gh-btn-hero       { width:100%; max-width:280px; text-align:center; }
  #guestHome .gh-jasper-wrap    { grid-template-columns:1fr; }
  #guestHome .gh-final-cta-buttons { flex-direction:column; align-items:center; }
  #guestHome .gh-final-cta-buttons .gh-btn-hero { width:100%; max-width:280px; }
  #guestHome .gh-sorties-grid   { grid-template-columns:1fr; }
  #guestHome .gh-steps-flow     { grid-template-columns:1fr 1fr; }
  #guestHome .gh-tarifs-grid    { grid-template-columns:1fr 1fr; }
}
@media (max-width: 420px) {
  #guestHome .gh-steps-flow  { grid-template-columns:1fr; }
  #guestHome .gh-tarifs-grid { grid-template-columns:1fr; }
  #guestHome .gh-hero-stats  { gap:20px; }
}

/* ── PHOTOS PARALLAX (layer entre canvas et contenu) ── */
#guestHome .gh-photos-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
#guestHome .gh-page-wrap { position: relative; z-index: 1; }

#guestHome .gh-photo-float {
  position: absolute;
  width: clamp(300px, 33vw, 510px);
  opacity: 0;
  will-change: transform, opacity;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 50px rgba(0,10,40,.6), 0 0 0 1px rgba(0,200,220,.15);
}
#guestHome .gh-photo-float img {
  width: 100%;
  display: block;
  border-radius: 18px;
}
/* Photo 1 & 3 — côté gauche */
#guestHome #ghP1 { left: -70px; }
#guestHome #ghP3 { left: -90px; }
/* Photo 2 (portrait silhouette) — côté droit, plus étroite */
#guestHome #ghP2 { right: -70px; left: auto; width: clamp(195px, 22vw, 345px); }

/* Mobile : réduction taille */
@media (max-width: 600px) {
  #guestHome .gh-photo-float   { width: clamp(150px, 42vw, 270px); }
  #guestHome #ghP2             { width: clamp(120px, 25vw, 195px); }
  #guestHome #ghP1             { left: -40px; }
  #guestHome #ghP3             { left: -50px; }
  #guestHome #ghP2             { right: -40px; }
}
/* ══════════════════════════════════════════════════════════════
   v2.5.5 — Thème rose : nav aubergine + lisibilité bloc utilisateur
   ══════════════════════════════════════════════════════════════ */

/* ── Bloc utilisateur (nom, niveau, badge, déconnexion) ── */
body.theme-rose .user-name-display,body.theme-clair .user-name-display{color:var(--page-title)}
body.theme-rose .user-level-display,body.theme-clair .user-level-display{color:var(--page-accent)}
body.theme-rose .btn-logout,body.theme-clair .btn-logout{
  background:rgba(255,255,255,.72);color:var(--page-accent);
  border:1px solid rgba(59,10,71,.25)}
body.theme-clair .btn-logout{border-color:rgba(8,58,55,.25)}
body.theme-rose .btn-logout:hover,body.theme-clair .btn-logout:hover{
  background:rgba(255,255,255,.9);border-color:#b91c1c;color:#b91c1c}
/* Badges de rôle : fond opaque clair + texte foncé */
body.theme-rose .user-info-bar .user-badge,body.theme-clair .user-info-bar .user-badge{
  background:rgba(255,255,255,.72)!important}
body.theme-rose .user-info-bar .badge-dp,body.theme-clair .user-info-bar .badge-dp,
body.theme-rose .user-info-bar .badge-dpgp,body.theme-clair .user-info-bar .badge-dpgp{
  color:#92400e!important;border-color:rgba(146,64,14,.35)!important}
body.theme-rose .user-info-bar .badge-gp,body.theme-clair .user-info-bar .badge-gp{
  color:#6d28d9!important;border-color:rgba(109,40,217,.35)!important}
body.theme-rose .user-info-bar .badge-member,body.theme-clair .user-info-bar .badge-member{
  color:#0e7490!important;border-color:rgba(14,116,144,.35)!important}

/* ── Barre de menu desktop : aubergine (thème rose) ── */
body.theme-rose .tabs-nav{
  background:rgba(45,27,61,.96);
  border-bottom:1px solid rgba(255,255,255,.14)}
body.theme-rose .tab{color:#d4bce0}
body.theme-rose .tab:hover{color:#f0e6f7}
body.theme-rose .tab.active{color:#fff}
body.theme-rose .tab-indicator{background:linear-gradient(90deg,#a855f7,#ec4899)}

/* ── Mobile : barre hamburger + vague du drawer en aubergine ── */
body.theme-rose .mobile-nav-bar{background:rgba(45,27,61,.96)!important;
  border-top:1px solid rgba(255,255,255,.12)}
body.theme-rose .wave-fill{background:#2d1b3d}

/* ── v2.5.6 — Cartes & modales aubergine (thème rose) ── */
body.theme-rose .confirm-box{background:rgba(45,27,61,.96)}

/* ── v2.5.7 — En-tête des dive-cards en dégradé violet/rose (thème rose) ── */
body.theme-rose .dive-card-header{
  background:linear-gradient(135deg,rgba(168,85,247,.20),rgba(236,72,153,.08))}

/* ── v2.5.8 — Onglet Membres : lisibilité sur fond rose ── */
/* Bandeaux de catégories (Dossier incomplet, En attente, Membres actifs) :
   les teintes translucides inline sont conçues pour fond sombre → fond
   aubergine opaque forcé, les textes colorés redeviennent lisibles */
body.theme-rose #membersAccordion > div > div:first-child{
  background:rgba(45,27,61,.94)!important}
/* Corps des catégories : navy #0a1628 inline → aubergine foncé */
body.theme-rose #membersAccordion div[id^="mcat-body-"]{
  background:#241531!important}
/* Cartes membre : navy #112244 → aubergine */
body.theme-rose .mcard{background:#2d1b3d}
/* Bouton Export XLS (vert translucide inline) : fond opaque clair */
body.theme-rose #exportMembresBtn a{
  background:rgba(255,255,255,.72)!important;color:#166534!important;
  border:1px solid rgba(22,101,52,.4)!important}

/* ── v2.5.9 — Barre de connexion (mode déconnecté) sur fond rose/clair ── */
body.theme-rose .auth-bar .btn-secondary,body.theme-clair .auth-bar .btn-secondary{
  background:rgba(255,255,255,.72);color:var(--page-accent);
  border:1px solid rgba(59,10,71,.25)}
body.theme-clair .auth-bar .btn-secondary{border-color:rgba(8,58,55,.25)}
body.theme-rose .auth-bar .btn-secondary:hover,body.theme-clair .auth-bar .btn-secondary:hover{
  background:rgba(255,255,255,.9);color:var(--page-title)}
body.theme-rose .auth-bar a[href*="mot_de_passe_oublie"],
body.theme-clair .auth-bar a[href*="mot_de_passe_oublie"]{
  color:var(--page-accent)!important;font-weight:600}
body.theme-rose .auth-sep,body.theme-clair .auth-sep{background:rgba(59,10,71,.25)}
/* ═══════════════════════════════════════════════════════════
   SPLASH DE CRÉATION DE PLONGÉE (anti double-clic)
   ═══════════════════════════════════════════════════════════ */
#diveSplash{
  position:fixed;inset:0;z-index:99999;
  display:none;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 40%,rgba(14,116,144,.55),rgba(10,31,56,.96) 70%);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;transition:opacity .35s ease;
}
#diveSplash.open{display:flex;opacity:1}
.ds-box{
  text-align:center;padding:2rem 1.5rem;max-width:90vw;width:420px;
  user-select:none;-webkit-user-select:none;
}
.ds-emoji{
  font-size:4.5rem;line-height:1;
  animation:ds-bob 2.2s ease-in-out infinite;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.45));
}
@keyframes ds-bob{
  0%,100%{transform:translateY(0) rotate(-4deg)}
  50%{transform:translateY(-14px) rotate(4deg)}
}
.ds-emoji.ds-swap{animation:ds-bob 2.2s ease-in-out infinite,ds-pop .5s ease}
@keyframes ds-pop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
.ds-title{
  font-family:'Bebas Neue',sans-serif;letter-spacing:.06em;
  font-size:1.9rem;color:var(--cyan);margin:1.4rem 0 .3rem;
}
.ds-phrase{
  font-family:'DM Sans',sans-serif;font-size:1.15rem;color:var(--text);
  min-height:1.6em;transition:opacity .3s ease;
}
.ds-phrase.ds-fade{opacity:0}
.ds-bubbles{
  margin-top:1.6rem;display:flex;gap:.4rem;justify-content:center;
}
.ds-bubbles span{
  width:11px;height:11px;border-radius:50%;
  background:var(--cyan);opacity:.35;
  animation:ds-bubble 1.4s ease-in-out infinite;
}
.ds-bubbles span:nth-child(2){animation-delay:.2s}
.ds-bubbles span:nth-child(3){animation-delay:.4s}
.ds-bubbles span:nth-child(4){animation-delay:.6s}
.ds-bubbles span:nth-child(5){animation-delay:.8s}
@keyframes ds-bubble{
  0%,100%{transform:translateY(0);opacity:.3}
  50%{transform:translateY(-10px);opacity:1}
}
.ds-done-btn{
  margin-top:1.8rem;padding:.85rem 2rem;
  font-family:'Bebas Neue',sans-serif;letter-spacing:.05em;font-size:1.25rem;
  color:#0a1f38;background:linear-gradient(135deg,var(--aqua),var(--cyan));
  border:none;border-radius:12px;cursor:pointer;
  box-shadow:0 6px 24px rgba(34,211,238,.4);
  opacity:0;transform:translateY(10px) scale(.9);pointer-events:none;
  transition:opacity .4s ease,transform .4s cubic-bezier(.34,1.56,.64,1);
}
.ds-done-btn.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.ds-done-btn:active{transform:scale(.96)}