/* =========================================================
   HOOLALA.TM — ESPACE MEMBRE (design V2)
   Harmonise typographie, formes et animations avec le site.
   Les COULEURS restent celles du thème choisi par le membre
   (variables --ad-* d'admin-tokens.css) : le réglage « Apparence » continue de fonctionner.
   ========================================================= */
body.member-page{font-family:"Inter Tight",system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
.member-page .member-kicker{font-weight:600;font-size:11px;letter-spacing:.14em}

/* Barre du haut */
.member-bar{min-height:68px}
.member-brand img{height:30px;width:auto;display:block}
.member-quiet{padding:10px 16px;border-radius:999px;border:1px solid var(--ad-border) !important;font-weight:600;letter-spacing:.06em;transition:background .2s,color .2s}
.member-quiet:hover{background:var(--ad-text);color:var(--ad-bg)}

/* Titres : grands, serrés, avec une touche italique */
.access-copy h1,.member-hero h1{font-weight:600;letter-spacing:-.06em;line-height:.9;animation:mv2-in .9s cubic-bezier(.16,1,.3,1) both}
.access-copy h1 br+*,.member-hero h1{text-wrap:balance}
.access-card h2,.member-panel h2,.vtitle h2{font-weight:600;letter-spacing:-.05em}
.vtitle h2::first-line{font-weight:600}
@keyframes mv2-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* Cartes et panneaux */
.access-card,.member-panel{border-radius:28px;animation:mv2-in .8s cubic-bezier(.16,1,.3,1) .1s both}
.vcard,.vstat,.vdoc,.vnotice,.vslot,.vday{border-radius:20px !important;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s}
.vcard:hover,.vdoc:hover{transform:translateY(-3px);box-shadow:0 18px 40px var(--ad-shadow)}
.vstat strong{font-weight:700;letter-spacing:-.04em;font-size:34px}
.vcard h3{font-weight:600;letter-spacing:-.03em}

/* Navigation des sections en pilules */
.vnav{gap:6px;padding:6px;border-radius:999px;background:var(--ad-soft);border:1px solid var(--ad-border);width:max-content;max-width:100%}
.vnav a{border-radius:999px !important;border:0 !important;background:transparent !important;font-weight:600 !important;letter-spacing:.04em;min-height:40px !important;transition:background .2s,color .2s}
.vnav a:hover{background:var(--ad-panel) !important}
.vnav a.active{background:var(--ad-accent) !important;color:var(--ad-on-accent) !important}

/* Boutons et liens */
.vbtn,.member-primary,.member-secondary,.vlinks a{border-radius:999px !important;font-weight:600 !important;letter-spacing:.04em !important;transition:transform .25s cubic-bezier(.16,1,.3,1),opacity .2s}
.vbtn:hover,.member-primary:hover,.member-secondary:hover,.vlinks a:hover{transform:translateY(-2px)}
.vstatus{border-radius:999px !important;border-left:0 !important;padding:0 14px !important;font-weight:600 !important}
.vstatus::before{content:"";width:8px;height:8px;margin-right:8px;border-radius:50%;background:currentColor}

/* Champs */
.member-form input,.member-form select,.vform input,.vform select,.vreply input,.varchive input{border-radius:14px !important;font-family:inherit}
.member-form input:focus,.vform input:focus,.vform select:focus{outline:2px solid var(--ad-accent);outline-offset:1px}

/* Statut VIP */
.member-status i{animation:mv2-pulse 2s ease-out infinite}
@keyframes mv2-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 50%,transparent)}100%{box-shadow:0 0 0 10px transparent}}

@media (prefers-reduced-motion:reduce){
  .access-copy h1,.member-hero h1,.access-card,.member-panel{animation:none}
  .member-status i{animation:none}
}

/* Page de connexion (visiteur non connecté) : alignée sur le site, blanc / noir automatique.
   Une fois connecté, le membre retrouve le thème qu'il a choisi. */
html:has(body.is-guest),body.is-guest{
  --ad-bg:#ffffff;--ad-text:#0a0a0a;--ad-muted:#5f5f5f;--ad-border:rgba(10,10,10,.12);--ad-panel:#f6f6f4;--ad-soft:#f6f6f4;
  --ad-field:#ffffff;--ad-accent:#0a0a0a;--ad-on-accent:#ffffff;--ad-link:#5f5f5f;--ad-topbar:rgba(255,255,255,.82);
  --ad-shadow:rgba(10,10,10,.08);--ad-accent-soft:rgba(10,10,10,.03);--ad-scheme:light}
@media (prefers-color-scheme:dark){
  html:has(body.is-guest),body.is-guest{
    --ad-bg:#0a0a0a;--ad-text:#f5f5f3;--ad-muted:#a3a3a3;--ad-border:rgba(245,245,243,.12);--ad-panel:#141414;--ad-soft:#141414;
    --ad-field:#0a0a0a;--ad-accent:#f5f5f3;--ad-on-accent:#0a0a0a;--ad-link:#a3a3a3;--ad-topbar:rgba(10,10,10,.75);
    --ad-shadow:rgba(0,0,0,.5);--ad-accent-soft:rgba(245,245,243,.03);--ad-scheme:dark}
}
body.is-guest .member-brand img{filter:none}
@media (prefers-color-scheme:dark){body.is-guest .member-brand img{filter:invert(1)}}

/* Téléphone : le menu reste une grille propre (et plus une pilule déformée). */
@media (max-width:760px){
  .vnav{width:100% !important;max-width:100% !important;border-radius:22px !important;padding:6px !important;gap:6px !important;box-sizing:border-box}
  .vnav a{border-radius:14px !important;font-size:9.5px !important;letter-spacing:.02em !important;min-height:44px !important}
  .vnav-more summary{border-radius:14px !important;border:0 !important;background:var(--ad-panel) !important;font-size:9.5px !important;letter-spacing:.04em}
  .vnav-more-menu a{border-radius:14px !important}
  .vtop{width:100%}
  .vtop>.vbtn{width:100%;box-sizing:border-box;border-radius:999px !important}
}

/* Plume du logo HOOLALA à la place du rond décoratif (espace VIP). */
body .member-hero{position:relative;isolation:isolate;overflow:hidden}
body .member-hero::before{display:none !important}
body .member-hero::after{
  content:"" !important;display:block !important;position:absolute !important;
  inset:auto !important;top:50% !important;right:clamp(14px,4vw,56px) !important;left:auto !important;bottom:auto !important;
  width:clamp(90px,11vw,170px) !important;height:auto !important;aspect-ratio:153/281 !important;
  margin:0 !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;outline:0 !important;
  background:currentColor !important;opacity:.13 !important;z-index:-1 !important;pointer-events:none !important;
  -webkit-mask:url(/assets/img-plume-hoolala.svg) center/contain no-repeat !important;
  mask:url(/assets/img-plume-hoolala.svg) center/contain no-repeat !important;
  transform:translateY(-50%) rotate(8deg) !important;
  animation:hd-plume 9s ease-in-out infinite !important;
}
@keyframes hd-plume{0%,100%{transform:translateY(-50%) rotate(8deg)}50%{transform:translateY(-55%) rotate(3deg)}}
@media (max-width:720px){
body .member-hero::after{width:clamp(56px,18vw,86px) !important;top:16px !important;right:14px !important;transform:rotate(8deg) !important;animation:none !important}
}
@media (prefers-reduced-motion:reduce){
body .member-hero::after{animation:none !important}
}

/* =========================================================
   ESPACE VIP EN TABLEAU DE BORD
   Menu à gauche avec icônes, en-tête avec date et initiales,
   carte d'accueil, compteurs en couleurs. Couleurs = thème choisi.
   ========================================================= */
.vnav a[href*="section=home"]{--dash-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E")}
.vnav a[href*="section=dossiers"]{--dash-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z'/%3E%3C/svg%3E")}
.vnav a[href*="section=achats"]{--dash-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l-1 13H7Z'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3C/svg%3E")}
.vnav a[href*="section=events"]{--dash-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3Cpath d='m12 13 1 2 2 .3-1.5 1.4.4 2.1-1.9-1-1.9 1 .4-2.1L9 15.3l2-.3Z'/%3E%3C/svg%3E")}
.vnav a[href*="section=notifications"]{--dash-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16V11a6 6 0 0 1 12 0v5l2 2H4Z'/%3E%3Cpath d='M10 20a2 2 0 0 0 4 0'/%3E%3C/svg%3E")}
.vnav a[href*="my-day.php"]{--dash-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E")}
.vnav a[href*="section=documents"]{--dash-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l5 5v13H7Z'/%3E%3Cpath d='M14 3v5h5M10 13h6M10 17h6'/%3E%3C/svg%3E")}
.vnav a[href*="section=calendar"]{--dash-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E")}
.vnav a[href*="section=offers"]{--dash-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='13' rx='1.5'/%3E%3Cpath d='M12 8v13M3 12h18M12 8c-2-4-6-4-6-1s6 1 6 1Zm0 0c2-4 6-4 6-1s-6 1-6 1Z'/%3E%3C/svg%3E")}
.vnav a[href*="section=account"]{--dash-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E")}
.vtop>.vbtn{--dash-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4Z'/%3E%3C/svg%3E")}
.vsummary .vstat:nth-child(1){--dash-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z'/%3E%3C/svg%3E")}
.vsummary .vstat:nth-child(2){--dash-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l-1 13H7Z'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3C/svg%3E")}
.vsummary .vstat:nth-child(3){--dash-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l5 5v13H7Z'/%3E%3Cpath d='M14 3v5h5M10 13h6M10 17h6'/%3E%3C/svg%3E")}
.vsummary .vstat:nth-child(4){--dash-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3Cpath d='m12 13 1 2 2 .3-1.5 1.4.4 2.1-1.9-1-1.9 1 .4-2.1L9 15.3l2-.3Z'/%3E%3C/svg%3E")}

.dash-title,.dash-user{display:none}
@media (min-width:1024px){
  body.is-member{background:var(--ad-bg)}
  body.is-member .member-bar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:22px;padding:14px clamp(20px,3vw,40px);background:var(--ad-topbar);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--ad-border)}
  body.is-member .dash-title{display:grid;gap:2px;margin-left:clamp(20px,5vw,90px)}
  body.is-member .dash-title strong{font-size:18px;font-weight:650;letter-spacing:-.02em}
  body.is-member .dash-title span{font-size:12.5px;color:var(--ad-muted)}
  body.is-member .dash-user{display:flex;align-items:center;gap:10px;margin-left:auto}
  body.is-member .dash-avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:color-mix(in srgb,var(--ad-accent) 22%,var(--ad-panel));color:var(--ad-text);font-weight:700;font-size:14px}
  body.is-member .dash-name{font-size:14px;font-weight:600;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body.is-member .member-bar>form{margin-left:6px}

  body.is-member .member-shell.vp{display:grid;grid-template-columns:250px minmax(0,1fr);gap:22px 26px;align-items:start;max-width:1480px;margin:0 auto;padding:24px clamp(20px,3vw,40px) 60px}
  body.is-member .member-hero{grid-column:2;grid-row:1}
  body.is-member .member-panel{grid-column:2;grid-row:2}
  /* Accès organisateur : dans la colonne de contenu, jamais dans la colonne étroite du menu */
  body.is-member .member-shell.vp>.vorganizer{grid-column:2;grid-row:3}

  /* Menu à gauche */
  body.is-member .vtop{grid-column:1;grid-row:1/span 2;position:sticky;top:96px;display:flex;flex-direction:column;gap:14px;padding:14px;border-radius:24px;background:var(--ad-panel);border:1px solid var(--ad-border)}
  body.is-member .vnav{display:flex !important;flex-direction:column;gap:2px !important;width:100% !important;max-width:none !important;padding:0 !important;margin:0 !important;border:0 !important;border-radius:0 !important;background:none !important;overflow:visible !important}
  body.is-member .vnav-extra-desktop{display:contents !important}
  body.is-member .vnav-more{display:none !important}
  body.is-member .vnav a{position:relative;display:block !important;min-height:0 !important;padding:0 12px 0 44px !important;line-height:44px;border:0 !important;border-radius:12px !important;background:transparent !important;color:var(--ad-text) !important;font-size:13.5px !important;font-weight:550 !important;letter-spacing:0 !important;text-transform:lowercase;text-align:left !important;white-space:nowrap}
  body.is-member .vnav a::first-letter{text-transform:uppercase}
  body.is-member .vnav a::before{content:"";position:absolute;left:14px;top:50%;width:19px;height:19px;margin-top:-9.5px;background:currentColor;opacity:.75;-webkit-mask:var(--dash-ic) center/contain no-repeat;mask:var(--dash-ic) center/contain no-repeat}
  body.is-member .vnav a:hover{background:var(--ad-soft) !important}
  body.is-member .vnav a.active{background:color-mix(in srgb,var(--ad-accent) 16%,var(--ad-panel)) !important;color:var(--ad-text) !important;font-weight:650 !important}
  body.is-member .vnav a.active::before{opacity:1;background:var(--ad-accent)}
  body.is-member .vnav a.active::after{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--ad-accent)}
  body.is-member .vnav-badge{position:absolute;right:10px;top:50%;transform:translateY(-50%);margin:0 !important}
  body.is-member .vtop>.vbtn{position:relative;width:100%;justify-content:flex-start;padding:0 14px 0 44px !important;min-height:48px;border-radius:14px !important;background:var(--ad-accent) !important;color:var(--ad-on-accent) !important;border:0 !important;text-transform:none;letter-spacing:0 !important;font-size:13.5px !important}
  body.is-member .vtop>.vbtn::before{content:"";position:absolute;left:15px;top:50%;width:19px;height:19px;margin-top:-9.5px;background:currentColor;-webkit-mask:var(--dash-ic) center/contain no-repeat;mask:var(--dash-ic) center/contain no-repeat}

  /* Carte d'accueil */
  body.is-member .member-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:200px;padding:clamp(26px,3vw,40px) clamp(26px,3vw,44px) !important;border-radius:28px !important;background:color-mix(in srgb,var(--ad-accent) 16%,var(--ad-panel)) !important;border:1px solid color-mix(in srgb,var(--ad-accent) 26%,var(--ad-border)) !important;color:var(--ad-text)}
  body.is-member .member-hero h1{font-size:clamp(34px,3.4vw,52px) !important;line-height:1 !important;letter-spacing:-.04em !important;text-transform:none !important;margin:6px 0 10px !important}
  body.is-member .member-hero p{max-width:52ch;font-size:15.5px;color:var(--ad-muted)}
  body.is-member .member-hero .member-kicker{opacity:.7}
  body.is-member .member-hero::after{width:clamp(110px,10vw,150px) !important;opacity:.2 !important;right:clamp(150px,14vw,220px) !important}
  body.is-member .member-status{align-self:flex-end}

  /* Compteurs en couleurs */
  body.is-member .vsummary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  body.is-member .vstat{position:relative;display:grid !important;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;padding:18px !important;border:0 !important;border-radius:20px !important;background:var(--dash-c) !important;color:var(--ad-bg) !important;min-height:0 !important}
  body.is-member .vstat::before{content:"";grid-row:1/span 2;width:44px;height:44px;border-radius:12px;background:color-mix(in srgb,var(--ad-bg) 22%,transparent);-webkit-mask:none;mask:none}
  body.is-member .vstat::after{content:"";position:absolute;left:30px;top:50%;width:20px;height:20px;margin-top:-10px;background:currentColor;-webkit-mask:var(--dash-ic) center/contain no-repeat;mask:var(--dash-ic) center/contain no-repeat}
  body.is-member .vstat strong{grid-column:2;grid-row:1;font-size:30px !important;line-height:1;color:inherit !important}
  body.is-member .vstat small{grid-column:2;grid-row:2;order:2;font-size:12px !important;font-weight:600;letter-spacing:.02em;text-transform:lowercase;color:inherit !important;opacity:.85}
  body.is-member .vstat small::first-letter{text-transform:uppercase}
  body.is-member .vsummary .vstat:nth-child(1){--dash-c:var(--ad-warning)}
  body.is-member .vsummary .vstat:nth-child(2){--dash-c:var(--ad-accent)}
  body.is-member .vsummary .vstat:nth-child(3){--dash-c:var(--ad-danger)}
  body.is-member .vsummary .vstat:nth-child(4){--dash-c:var(--ad-info)}

  /* Contenu */
  body.is-member .member-panel{border-radius:28px !important}
}
@media (min-width:1024px) and (max-width:1200px){
  body.is-member .vsummary{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Téléphone : compteurs en couleurs */
@media (max-width:1023px){
  body.is-member .vstat{border:0 !important;background:var(--dash-c,var(--ad-panel)) !important;color:var(--ad-bg) !important}
  body.is-member .vstat small,body.is-member .vstat strong{color:inherit !important}
  body.is-member .vsummary .vstat:nth-child(1){--dash-c:var(--ad-warning)}
  body.is-member .vsummary .vstat:nth-child(2){--dash-c:var(--ad-accent)}
  body.is-member .vsummary .vstat:nth-child(3){--dash-c:var(--ad-danger)}
  body.is-member .vsummary .vstat:nth-child(4){--dash-c:var(--ad-info)}
}