/* ============================================================
   WILL — Nav home unifiee (profile + bienvenue logo + pills + login)
   Importer via <link rel="stylesheet" href="/assets/will-home-nav.css">.
   ============================================================ */

/* Sur le dashboard React (#root), les composants PublicHeader / OrgaHeader
   rendent leur propre <nav class="will-nav-top">. Notre partial nav est
   injecte au-dessus de #root. On cache les nav internes du dashboard pour
   eviter le doublon. */
#root nav.will-nav-top { display: none !important; }

/* Police Montserrat sur tout le header (.home-nav). Heritage automatique
   sur enfants. Le logo Will utilise une SVG donc non-impacte. */
.home-nav {
  font-family: 'Montserrat', var(--font-body, 'Inter'), system-ui, sans-serif;
}

.home-nav .container {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
}
/* Logo Will centre dans le header, toujours visible (logged-out + logged-in
   + in-space). Position absolute pour centrage exact independant des
   largeurs gauche/droite. Color violet primary (charte). */
.home-nav .nav-logo-center {
  display: inline-flex;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--violet-600);
  text-decoration: none;
  pointer-events: auto;
}
.home-nav .nav-logo-center svg { display: block; }
.home-nav .nav-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
/* Override will.css : .auth-nav margin-left auto + min-width 130px. */
.home-nav .nav-left .auth-nav,
.home-nav .nav-right .auth-nav {
  margin-left: 0;
  min-width: 0;
  justify-content: flex-start;
}

/* ── Avatar gauche : visible seulement si connecte ET pas dans un espace
   dashboard. Dans /orga ou /photographe, on cache l avatar pour focaliser
   sur le label "Espace X" + le logo central. */
.home-nav .auth-nav-slot-left { display: none; }
.will-runner-loggedin .home-nav .auth-nav-slot-left { display: inline-flex; }
/* 2026-06-22 : le mode .will-in-space ne tronque plus le nav.
   Le nav d accueil reste integral sur /orga et /photographe ; un
   bandeau rose injecte par le dashboard React au-dessous indique
   "Connecte en tant qu organisateur/photographe" + actions.
   Avatar slot-left visible uniquement si runner-loggedin (sinon
   contenu vide) — la rule originale .will-in-space {display:none}
   est neutralisee par le combo .will-runner-loggedin.will-in-space
   plus loin. */
.home-nav .auth-nav-slot-left .auth-nav-panel {
  left: 0;
  right: auto;
}
/* Dropdown panel header masqué partout (mobile + desktop) : on a basculé
   sur un modal profil centré (#profile-modal) qui s ouvre au click avatar.
   Le panel reste dans le DOM pour le wiring will-auth-nav.js, juste pas visible. */
.home-nav .auth-nav-account .auth-nav-panel { display: none !important; }

/* ============================================================
   PROFILE MODAL — bottom sheet mirror EXACT app
   (~/WillApp/App.js:9277-9522 ProfileMenuModal).
   ============================================================ */
/* Backdrop : flou frosted glass LIGHT (mirror BlurView intensity 10 tint light
   de l app). Tint blanc translucide + saturation > flou foncé : on garde la
   page derriere lisible mais désaturée et brouillée. */
.profile-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1090;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.profile-sheet-backdrop.is-open { opacity: 1; pointer-events: auto; cursor: pointer; }

/* Bottom sheet : slide-up depuis le bas, top rounded 28, padding 22 (mirror
   s.modalSheet). Sur desktop, max-width 460 centré pour rester lisible. */
/* Croix de fermeture top-right des modals profil/photos/cart. Light violet
   #c9beed (aligne avec .profile-sheet-greeting "Hello {prenom}"). Position
   verticale = meme top que le h2 greeting (padding 22 du modal). */
.profile-sheet-close {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: #c9beed;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 5;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s ease;
}
.profile-sheet-close:hover { color: var(--violet-600); background: transparent; }
.profile-sheet-close svg { width: 22px; height: 22px; display: block; stroke-width: 2.2; }

/* Bouton "Retour en haut" floating glass dans le photos-modal — mirror
   EXACT de .bib-back-to-top dans event/index.html. Carre 40x40 frosted,
   fixed bottom-center du viewport. Inject au body car le sheet a un
   transform qui casse position:fixed sur ses descendants. */
.photos-modal-back-to-top {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0) + 16px);
  transform: translateX(-50%);
  z-index: 1200;
  width: 40px;
  height: 40px;
  border-radius: 16px;
  border: 0.5px solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
  color: var(--violet-600);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.photos-modal-back-to-top[hidden] { display: none; }
.photos-modal-back-to-top:hover { background: rgba(255, 255, 255, 0.75); }
.photos-modal-back-to-top svg { display: block; }

.profile-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1100;
  background: #fff;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  padding: 18px 18px 28px;
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0));
  font-family: 'Montserrat', var(--font-body), system-ui, sans-serif;
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
  box-shadow: 0 -8px 28px rgba(15, 7, 35, 0.18);
  touch-action: pan-y;
}
@media (min-width: 768px) {
  .profile-sheet {
    left: 50%; right: auto;
    top: 50%; bottom: auto;
    width: calc(100vw - 32px);
    max-width: 440px;
    padding: 28px 26px 26px;
    transform: translate(-50%, -50%) scale(0.96);
    opacity: 0;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(15, 7, 35, 0.25);
    max-height: calc(100vh - 48px);
    transition: opacity 0.2s ease, transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .profile-sheet.is-open {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}
@media (max-width: 767px) {
  /* Top reserve sous la barre Safari iOS / Dynamic Island (safe-area) +
     une marge visuelle 40 px. Sinon le header de la sheet (titre "Hello"
     + croix de fermeture) etait colle au top et coupe par l UI navigateur
     -- cas signale 2026-06-27. Max-height ajustee en consequence pour
     que tout le contenu reste scrollable sans deborder.
     100dvh (dynamic viewport) au lieu de 100vh pour suivre la disparition
     de la barre Safari au scroll, fallback 100vh pour navigateurs vieux. */
  .profile-sheet {
    top: calc(40px + env(safe-area-inset-top, 0));
    max-height: calc(100dvh - 40px - env(safe-area-inset-top, 0));
  }
  @supports not (height: 100dvh) {
    .profile-sheet {
      max-height: calc(100vh - 40px - env(safe-area-inset-top, 0));
    }
  }
  .profile-sheet.is-open { transform: translateY(0); }
}

/* Sheet "Mes photos" : reuse styles .profile-sheet.
   MOBILE : top = 40px + safe-area + max-height bornee a la zone restante.
   100dvh (dynamic viewport) au lieu de 100vh : evite que le sheet monte
   trop haut sur iOS quand la barre Safari se masque au scroll.
   DESKTOP : hérite du centrage exact du parent .profile-sheet
   (@media min-width 768px : top: 50%, left: 50%, translate -50%, -50%). */
@media (max-width: 767px) {
  .photos-sheet {
    top: calc(40px + env(safe-area-inset-top, 0)) !important;
    max-height: calc(100dvh - 40px - env(safe-area-inset-top, 0)) !important;
  }
  @supports not (height: 100dvh) {
    .photos-sheet {
      max-height: calc(100vh - 40px - env(safe-area-inset-top, 0)) !important;
    }
  }
}
@media (min-width: 768px) {
  /* Largeur 900px (espace confortable pour la grille 6 cols virtuelles
     -> 3 tiles span 2 plus generouses). S adapte au viewport via min()
     pour les tablettes etroites (>=768 mais <=964). Le centrage
     left/top/transform est herite du parent .profile-sheet desktop. */
  .photos-sheet {
    width: min(900px, calc(100vw - 64px)) !important;
    max-width: 900px !important;
    max-height: calc(100vh - 48px) !important;
  }
}
.photos-sheet-meta { display: none; }
.photos-selfie-banner { font-size: 14px; line-height: 1.45; }
.photos-selfie-banner strong { color: var(--violet-700, #5313b7); display: block; margin-bottom: 4px; }
.photos-selfie-banner small { color: #6c5b8c; display: block; font-size: 12px; }
/* Grid base : 12 colonnes virtuelles, chaque tile par defaut span 3
   -> 4 tiles par ligne (2026-06-24, passage de 3 a 4 cols pour mieux
   exploiter la largeur 900px du sheet desktop).
   La derniere ligne s'etale si elle a 1 ou 2 items :
   - 1 item restant -> span 12 (full row, classe JS tile-span-6 conservee)
   - 2 items restants -> span 6 chacun (50/50, classe JS tile-span-3 conservee)
   Les modifiers .has-1 / .has-2 gerent le cas global (1 ou 2 photos total). */
.photos-sheet-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 6px;
  margin-top: 12px;
}
.photos-sheet-tile { grid-column: span 3; }
.photos-sheet-tile.tile-span-3 { grid-column: span 6; }
.photos-sheet-tile.tile-span-6 { grid-column: span 12; }
/* Cas global : 1 ou 2 photos seulement -> grid plus simple. */
.photos-sheet-grid.has-1 { grid-template-columns: 1fr; }
.photos-sheet-grid.has-1 .photos-sheet-tile { grid-column: auto; }
.photos-sheet-grid.has-2 { grid-template-columns: 1fr 1fr; }
.photos-sheet-grid.has-2 .photos-sheet-tile { grid-column: auto; }
.photos-sheet-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #E8DEFF;
  border-radius: 10px;
  overflow: hidden;
  border: none;
  padding: 0;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
.photos-sheet-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.photos-sheet-status {
  text-align: center;
  color: #6c5b8c;
  font-size: 13px;
}
.photos-sheet-status[hidden] { display: none; }

/* Segmented Tous / Favoris (mirror toggle event/index.html). */
/* Segmented Moi / Mes favoris / Tous : style identique au menu accueil
   mobile (App.js pills A venir / Passes / Favoris) -> indicateur slide
   violet primary qui glisse au tab actif (transition CSS sur transform). */
.photos-sheet-seg {
  position: relative;
  display: flex;
  width: 100%;
  background: #F4EFFF;
  border-radius: 16px;
  padding: 4px;
  margin: 0 0 14px;
  box-sizing: border-box;
}
.photos-sheet-seg-indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / 3);
  background: var(--violet-600, #7B2FFF);
  border-radius: 12px;
  /* Spring bouncy mirror des tabs accueil (events-tabs-indicator). */
  transition: transform 400ms cubic-bezier(0.34, 1.32, 0.64, 1);
  z-index: 1;
  will-change: transform;
}
.photos-sheet-seg[data-active="favs"] .photos-sheet-seg-indicator { transform: translateX(100%); }
.photos-sheet-seg[data-active="all"] .photos-sheet-seg-indicator { transform: translateX(200%); }
.photos-sheet-seg-btn {
  flex: 1;
  position: relative;
  z-index: 2;
  padding: 8px 10px;
  font-family: 'Montserrat', var(--font-body);
  font-size: 13px;
  font-weight: 600;
  background: transparent;
  border: none;
  color: var(--violet-600, #5313b7);
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s ease;
}
.photos-sheet-seg-btn.is-active {
  color: #fff;
  font-weight: 700;
}
/* Divider 1px entre deux pills non actives consecutives (parite home pills
   App.js segmented 1483/1487 + .events-tab). Indicator est le 1er enfant,
   donc on cible bien la sequence btn -> btn cote DOM. */
.photos-sheet-seg-btn:not(.is-active):has(+ .photos-sheet-seg-btn:not(.is-active)) {
  position: relative;
}
.photos-sheet-seg-btn:not(.is-active):has(+ .photos-sheet-seg-btn:not(.is-active))::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 16px;
  background: rgba(123, 47, 255, 0.3);
  pointer-events: none;
  z-index: 2;
}

/* Etoile fav overlay sur tile : top-right, fill blanc avec drop-shadow,
   mirror .thumb-fav-star event/index.html. */
.photos-sheet-tile .photos-tile-fav {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
.photos-sheet-tile .photos-tile-fav path { fill: #fff; stroke: none; }

/* ============================================================
   CART SHEET — bottom-sheet "Mon panier" ouvert depuis le drawer.
   Reuse .profile-sheet (slide-up + centered desktop), structure interne :
   greeting violet light AVEstiana + meta + cards par event + footer sticky
   total/checkout. Mirror visuel du /panier/ (charte violet primary #7B2FFF).
   ============================================================ */
.cart-sheet {
  top: calc(40px + env(safe-area-inset-top, 0)) !important;
  max-height: calc(100dvh - 40px - env(safe-area-inset-top, 0)) !important;
  padding: 22px 22px 0 !important;
  display: flex;
  flex-direction: column;
}
@supports not (height: 100dvh) {
  .cart-sheet {
    max-height: calc(100vh - 40px - env(safe-area-inset-top, 0)) !important;
  }
}
@media (min-width: 768px) {
  .cart-sheet { width: 560px; top: auto !important; max-height: calc(100vh - 48px) !important; }
}
.cart-sheet-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 16px;
}
.cart-sheet-meta {
  color: #6c5b8c;
  font-family: 'Montserrat', var(--font-body);
  font-size: 13px;
  margin: -8px 0 16px;
}

/* Empty state : card centree, icone violet light + titre + sous-texte. */
.cart-sheet-empty {
  background: #faf9ff;
  border-radius: 16px;
  padding: 36px 20px;
  text-align: center;
}
.cart-sheet-empty-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #F2EDFD;
  color: var(--violet-600, #7B2FFF);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart-sheet-empty h3 {
  font-family: 'Montserrat', var(--font-body);
  font-size: 16px;
  font-weight: 800;
  color: #1A1426;
  margin: 0 0 8px;
}
.cart-sheet-empty p {
  color: #6c5b8c;
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

/* Card par event : fond #faf9ff radius 16 padding 14, header titre + meta
   + lien "Voir →" en violet primary. */
.cart-sheet-event {
  background: #faf9ff;
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 12px;
}
.cart-sheet-event-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.cart-sheet-event-titles { min-width: 0; flex: 1; }
.cart-sheet-event-name {
  font-family: 'Montserrat', var(--font-body);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: #1A1426;
  margin: 0 0 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cart-sheet-event-meta {
  color: #6c5b8c;
  font-family: 'Montserrat', var(--font-body);
  font-size: 12px;
}
.cart-sheet-event-link {
  color: var(--violet-600, #7B2FFF);
  text-decoration: none;
  font-family: 'Montserrat', var(--font-body);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.cart-sheet-event-link:hover { text-decoration: underline; }

.cart-sheet-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
@media (min-width: 768px) {
  .cart-sheet-grid { grid-template-columns: repeat(4, 1fr); }
}
.cart-sheet-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: #E8DEFF;
}
.cart-sheet-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.cart-sheet-remove {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.cart-sheet-remove:hover { background: rgba(0, 0, 0, 0.8); }
.cart-sheet-remove svg { width: 12px; height: 12px; }

/* Footer sticky en bas du sheet : total a gauche, Commander a droite,
   hint sous (paiement bientot). Border-top + bg #fff + safe-area. */
.cart-sheet-foot {
  border-top: 1px solid #EFEAFB;
  padding: 14px 0 calc(18px + env(safe-area-inset-bottom, 0));
  margin: 0 -22px;
  padding-left: 22px;
  padding-right: 22px;
  background: #fff;
}
.cart-sheet-foot[hidden] { display: none; }
.cart-sheet-foot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cart-sheet-total {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cart-sheet-total-label {
  color: #6c5b8c;
  font-family: 'Montserrat', var(--font-body);
  font-size: 12px;
}
.cart-sheet-total-amount {
  font-family: 'Montserrat', var(--font-body);
  font-size: 22px;
  font-weight: 800;
  color: #1A1426;
  letter-spacing: -0.3px;
}
.cart-sheet-checkout {
  background: var(--violet-600, #7B2FFF);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 12px 22px;
  font-family: 'Montserrat', var(--font-body);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.cart-sheet-checkout:disabled {
  background: #C9BEEF;
  cursor: not-allowed;
}
.cart-sheet-foot-hint {
  text-align: center;
  color: #6c5b8c;
  font-family: 'Montserrat', var(--font-body);
  font-size: 11px;
  margin: 8px 0 0;
}

/* Viewer overlay au-dessus du sheet "Mes photos". Mirror event/index.html
   structure : scroll-snap horizontal pagine, etoile fav a droite du CTA
   Telecharger, fond blanc plein-ecran. */
.photos-viewer {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 1200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.photos-viewer.open { opacity: 1; pointer-events: auto; }
/* Stack flex column : titre > date > stage photo (flex:1) > actionbar,
   gap 10px uniforme. Responsive selon le ratio natif de chaque photo. */
.photos-viewer .pv-stack {
  position: absolute;
  inset: 0;
  padding-top: calc(env(safe-area-inset-top, 0) + 20px);
  padding-bottom: calc(env(safe-area-inset-bottom, 0) + 20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.photos-viewer .pv-center { display: contents; }
.photos-viewer .pv-header-title {
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  color: var(--violet-600, #5313b7);
  font-family: 'AV Estiana', 'Montserrat', var(--font-body);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.1;
  padding: 0 20px;
  box-sizing: border-box;
  pointer-events: none;
  transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}
.photos-viewer .pv-header-date {
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  color: #000;
  font-family: 'Montserrat', var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2px;
  line-height: 1;
  pointer-events: none;
  transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}
/* Counter caché sur mobile (mirror app -- pas de compteur visible dans le
   viewer), petit indicateur uniquement desktop top-left. */
.photos-viewer .pv-counter { display: none; }
@media (min-width: 768px) {
  .photos-viewer .pv-counter {
    display: inline-block;
    position: absolute;
    top: calc(env(safe-area-inset-top, 0) + 16px);
    left: 16px;
    color: #6c5b8c;
    font-size: 12px;
    pointer-events: none;
  }
}
.photos-viewer .pv-close {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0) + 4px);
  right: 12px;
  width: 40px; height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 20;
  padding: 0;
}
.photos-viewer .pv-close svg { width: 26px; height: 26px; display: block; }
.photos-viewer .pv-stage {
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
}
.photos-viewer .pv-track {
  display: flex;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.photos-viewer .pv-track::-webkit-scrollbar { display: none; }
.photos-viewer .pv-slide {
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  box-sizing: border-box;
}
.photos-viewer .pv-photo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}
.photos-viewer .pv-img {
  max-width: 100%;
  max-height: calc(100dvh - 156px - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0));
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 18px;
  background: #f5f5f5;
  user-select: none;
  -webkit-user-drag: none;
}
@supports not (height: 100dvh) {
  .photos-viewer .pv-img {
    max-height: calc(100vh - 156px - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0));
  }
}
.photos-viewer .pv-actionbar {
  position: absolute;
  left: 0; right: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
  transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}
/* Loader "Chargement…" visible tant que la photo de la slide courante
   n est pas decodee. */
.photos-viewer .pv-loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6c5b8c;
  font-family: 'Montserrat', var(--font-body);
  font-size: 14px;
  font-weight: 500;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.photos-viewer.is-loading .pv-loader { opacity: 1; }
.photos-viewer.is-loading .pv-header-title,
.photos-viewer.is-loading .pv-header-date,
.photos-viewer.is-loading .pv-actionbar { opacity: 0; pointer-events: none; }
.photos-viewer .pv-actionbar > * { pointer-events: auto; }
.photos-viewer .pv-cta {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  background: var(--violet-600, #7B2FFF);
  color: #fff;
  padding: 10px 20px;
  border-radius: 12px;
  font-family: 'Montserrat', var(--font-body);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(123, 47, 255, 0.35);
  white-space: nowrap;
}
.photos-viewer .pv-cta svg { width: 18px; height: 18px; display: block; }
.photos-viewer .pv-right {
  display: flex;
  justify-content: flex-start;
  padding-left: 12px;
}
.photos-viewer .pv-fav {
  width: 40px; height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.photos-viewer .pv-fav svg { width: 22px; height: 22px; display: block; }
.photos-viewer .pv-fav svg path { fill: none; stroke: #c9beed; stroke-width: 1.6; stroke-linejoin: round; }
.photos-viewer .pv-fav.is-active svg path { fill: var(--violet-600, #5313b7); stroke: var(--violet-600, #5313b7); }

/* Handle drag (mirror s.modalHandle : 40x4 #D0CCE3 alignSelf center
   marginBottom 18). Click sur la zone du handle ferme le sheet. */
/* Bouton retour ← retire 2026-06-09 : le backdrop click et ESC suffisent
   a fermer le modal. */

.profile-sheet-scroll { display: block; }

/* Greeting AVEstiana 26 color #c9beed marginBottom 20 marginTop 4 (mirror
   app : Text style[s.welcome, color #c9beed marginBottom 20 fontSize 26]). */
.profile-sheet-greeting {
  font-family: 'AV Estiana', 'Inter', serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--violet-300, #c9beed);
  margin: 0 0 16px;
  line-height: 1;
  letter-spacing: -0.01em;
}

/* Cards #faf9ff radius 16 padding 16 marginBottom 12 (mirror
   profileCardStyles.card App.js:9714-9716). */
.profile-card {
  background: var(--violet-050, #F5F3FF);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 10px;
}

/* Selfie row : thumb 56x56 round + label "Selfie" + state à droite.
   Gap 14 (mirror app). */
.profile-card-selfie {
  display: flex;
  align-items: center;
  gap: 14px;
}
.profile-selfie-thumb {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--violet-100, #E8DEFF);
  color: var(--violet-600, #7B2FFF);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  /* Bouton clickable : tap -> ouvre la modal selfie web (retake). */
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.profile-selfie-thumb:hover {
  transform: scale(1.04);
  box-shadow: 0 2px 8px rgba(123, 47, 255, 0.25);
}
.profile-selfie-thumb:active { transform: scale(0.97); }
.profile-selfie-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.profile-selfie-thumb svg { display: block; }
.profile-selfie-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.profile-selfie-label {
  font-family: 'Montserrat', var(--font-body, 'Inter', sans-serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--violet-900, #2F0E80);
}
.profile-selfie-state {
  font-family: 'Montserrat', var(--font-body, 'Inter', sans-serif);
  font-size: 12px;
  font-weight: 500;
  color: var(--violet-400, #B19FFF);
}
.profile-selfie-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.profile-selfie-link {
  background: transparent;
  border: none;
  padding: 2px 0;
  color: var(--violet-600, #7B2FFF);
  font-family: 'Montserrat', var(--font-body, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.profile-selfie-link:hover {
  color: var(--violet-700, #5B1FBF);
  text-decoration: underline;
}
.profile-selfie-link[hidden] { display: none; }

/* Infos rows : flex space-between, label gauche + valeur droite, divider
   hairline #f0eaff (mirror InfoRow App.js:9525-9536). */
.profile-card-infos { padding: 14px 16px; }
.profile-info-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 8px 0;
  gap: 2px;
}
.profile-info-row + .profile-info-row {
  border-top: 1px solid rgba(123, 47, 255, 0.08);
}
.profile-info-label {
  font-family: 'Montserrat', var(--font-body);
  color: var(--violet-400, #B19FFF);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2px;
}
.profile-info-val {
  font-family: 'Montserrat', var(--font-body);
  color: #1A1A1A;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  word-break: break-word;
}

/* Note d édition : mirror profil/index.html .profil-link-note. */
.profile-edit-note {
  display: block;
  padding: 12px 14px;
  margin: 0 0 14px;
  border-radius: 12px;
  background: var(--violet-050, #f5f3ff);
  color: var(--ink-600, #6c5b8c);
  font-size: 13px;
  line-height: 1.4;
}
.profile-edit-note strong { color: var(--violet-700, #5a1fcc); font-weight: 600; }

/* Bouton "Modifier mes infos" : violet underline 13/600, centré. */
.profile-link-edit {
  color: #7B2FFF;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 0;
  margin: 0 0 14px;
  text-decoration: underline;
}

/* Carte édition : inputs empilés, actions en ligne bas. */
.profile-card-edit {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 14px;
  padding: 14px;
  background: #fff;
  border: 1px solid rgba(123, 47, 255, 0.12);
  border-radius: 12px;
}
.profile-edit-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.profile-edit-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-600, #6c5b8c);
  letter-spacing: 0.01em;
}
.profile-edit-field input {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(123, 47, 255, 0.18);
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink-900, #1a0f3d);
  background: #fff;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.profile-edit-field input:focus {
  border-color: #7B2FFF;
  box-shadow: 0 0 0 3px rgba(123, 47, 255, 0.12);
}
.profile-edit-field-disabled input,
.profile-edit-field input:disabled {
  background: #f5f3ff;
  color: rgba(26, 15, 61, 0.55);
  cursor: not-allowed;
}
.profile-edit-error {
  font-size: 13px;
  color: #DC2626;
  padding: 4px 2px 0;
}
.profile-edit-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 4px;
}
.profile-edit-cancel,
.profile-edit-save {
  height: 44px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 160ms ease, transform 80ms ease;
}
.profile-edit-cancel {
  background: transparent;
  color: var(--ink-700, #4a3d6a);
  border: 1px solid rgba(123, 47, 255, 0.18);
}
.profile-edit-cancel:active { transform: scale(0.98); }
.profile-edit-save {
  background: #7B2FFF;
  color: #fff;
  border: none;
}
.profile-edit-save:hover { background: #6A1FE8; }
.profile-edit-save:active { transform: scale(0.98); }
.profile-edit-save:disabled {
  background: rgba(123, 47, 255, 0.4);
  cursor: wait;
}

/* Liens d action : centrés. Logout = rouge error 14/600, supprimer face =
   violet underline 13/600, supprimer compte = textSoft underline 12.
   Mirror App.js:9496-9516. */
.profile-link {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.profile-link-logout {
  color: #DC2626;
  font-size: 14px;
  font-weight: 600;
  padding: 6px 0;
  margin-top: 8px;
}
.profile-link-logout:hover { color: #B91C1C; }
.profile-link-face {
  color: #7B2FFF;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 0;
  margin-top: 6px;
  text-decoration: underline;
}
.profile-link-account {
  color: rgba(123, 47, 255, 0.45);
  font-size: 12px;
  padding: 4px 0;
  margin-top: 2px;
  text-decoration: underline;
}

/* Modal profil : override le auth-nav-panel pour qu il rende en BLOCK statique
   à l interieur du sheet (au lieu du dropdown absolu). Avatar caché. */
#profile-modal .auth-nav-panel,
#profile-modal .auth-nav-panel[hidden] {
  display: block !important;
  position: static;
  width: 100%;
  max-width: 100%;
  max-height: none;
  overflow-y: visible;
  box-shadow: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  animation: none;
  background: transparent;
}
#profile-modal .auth-nav-avatar { display: none !important; }
#profile-modal .auth-nav-greeting { display: none !important; }
/* Anciennes classes auth-nav-card du panel dropdown : on les neutralise
   dans le sheet (on a refait .profile-card par dessus). */
#profile-modal .auth-nav-card { all: unset; display: block; }
/* Le .auth-nav (display:inline-flex base) shrinkait les cards. Block +
   width 100% dans le contexte profil pour qu elles remplissent le modal. */
#profile-modal .auth-nav,
#profile-modal .auth-nav-account {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
}
/* Boutons actions bas du modal : compacts pour reduire la marge blanche. */
#profile-modal .auth-nav-logout {
  margin-top: 8px;
  padding: 10px;
  font-family: 'Montserrat', var(--font-body);
}
#profile-modal .auth-nav-link-violet {
  padding: 6px;
  margin-top: 4px;
  font-family: 'Montserrat', var(--font-body);
}
#profile-modal .auth-nav-link-muted {
  padding: 6px;
  font-family: 'Montserrat', var(--font-body);
  color: var(--violet-300, #C9B6FF);
}
/* Avatar : juste l icone SVG light purple, sans conteneur rond. */
.home-nav .auth-nav-avatar {
  position: relative;
  width: auto;
  height: auto;
  background: transparent;
  color: #c9beed;
  border: none;
  padding: 4px;
  border-radius: 6px;
  transition: color 0.15s ease;
  /* Centre l icone SVG ou l avatar-img selfie verticalement dans le
     header (sans flex le button caleait sur la baseline du contenu). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.home-nav .auth-nav-avatar:hover { color: #b8a8e6; background: transparent; }
.home-nav .auth-nav-avatar svg { width: 24px; height: 22px; display: block; }
/* Logged-in : avatar plus grand pour matcher la presence visuelle du logo
   (32px) cote logout. Couleur reste light purple, accord avec le "Hello prenom"
   inheritant la meme teinte sur .nav-welcome. */
.will-runner-loggedin .home-nav .auth-nav-avatar svg { width: 34px; height: 32px; }
.will-runner-loggedin .home-nav .auth-nav-avatar .selfie-dot {
  width: 12px;
  height: 12px;
}
/* Pastille verte selfie : visible si .will-has-selfie sur <html>. */
.home-nav .auth-nav-avatar .selfie-dot {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10B981;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
}
.will-has-selfie .home-nav .auth-nav-avatar .selfie-dot { display: block; }

/* Avatar selfie : remplace l icone SVG par la vignette circulaire du
   selfie du runner connecte. Inseree par will-auth-nav.js#applyAvatarSelfie
   apres GET /runner/selfie. La pastille verte selfie-dot devient redondante
   et est cachee. */
.home-nav .auth-nav-avatar .auth-nav-avatar-img {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #c9beed;
  background: #1A0A3E;
}
.will-runner-loggedin .home-nav .auth-nav-avatar .auth-nav-avatar-img {
  width: 34px;
  height: 34px;
}
.home-nav .auth-nav-avatar:has(.auth-nav-avatar-img) .selfie-dot { display: none !important; }

/* Welcome : "Bienvenue sur Will" (non logge) OU "Hello <prenom>" (logge),
   tout en light purple, police AV Estiana (charte mobile). */
.home-nav .nav-welcome {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #c9beed;
  text-decoration: none;
  font-family: 'AV Estiana', 'Inter', serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.home-nav .nav-welcome:hover { text-decoration: none; color: #c9beed; }
/* Logged-out : .nav-welcome est vide (le logo est dans .nav-logo-center).
   Hide pour eviter un link invisible parasite (a11y noise). */
.home-nav .nav-welcome { display: none; }
.will-runner-loggedin .home-nav .nav-welcome,
.will-in-space .home-nav .nav-welcome { display: inline-flex; }
/* Mutual exclusion welcome :
   - Defaut : "Bienvenue sur <logo Will>"
   - .will-runner-loggedin : "Hello <prenom>"
   - .will-in-space : "Espace organisateur/photographe" (prend la priorite) */
.home-nav .nav-welcome-hello,
.home-nav .nav-welcome-space { display: none; }
.will-runner-loggedin .home-nav .nav-welcome-hello { display: inline; }
.will-runner-loggedin .home-nav .nav-welcome-text { display: none; }
/* Logo reste visible meme logge (logique branding standard).
   Le link .nav-welcome contient alors [Logo] [Hello prenom] cote a cote. */
/* 2026-06-22 : welcome-space ("Espace organisateur/photographe") n est
   plus affiche dans le nav — c est le bandeau rose sous le nav qui
   indique le contexte. Le nav reste 100% identique a l accueil. */
.home-nav .nav-welcome-space { display: none !important; }

/* ── Right : label Espaces + pills + bouton Se connecter ── */
.home-nav .nav-right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
/* Label "Espaces" a l interieur du conteneur, italique et meme ton que
   le welcome (#c9beed light purple). */
.home-nav .nav-right-label {
  display: inline-flex;
  align-items: center;
  color: #c9beed;
  font-style: italic;
  font-size: 13px;
  font-weight: 600;
  padding: 0 8px 0 12px;
  white-space: nowrap;
}
/* Pills group : conteneur transparent, label "Espaces" + sous-wrapper
   .nav-pills-links qui contient les pills (avec liseré sur la home). */
.home-nav .nav-pills-group {
  display: inline-flex;
  align-items: center;
  background: transparent;
  padding: 4px;
  gap: 6px;
}
/* Combo pill Orga + Photographe : un seul container rose avec 2 actions
   separees par un divider blanc translucide. */
.home-nav .nav-pills-links {
  display: inline-flex;
  align-items: stretch;
  height: 32px;
  background: var(--orga-600);
  border-radius: 12px;
  overflow: hidden;
}
.home-nav .nav-pill-orga {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  color: #FFF5FF;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.home-nav .nav-pill-orga + .nav-pill-orga {
  border-left: 1px solid rgba(255, 255, 255, 0.35);
}
/* Icone SVG dans la pill : cachee par defaut, montree sous 540px (cf media). */
.home-nav .nav-pill-icon {
  display: none;
  flex-shrink: 0;
}
.home-nav .nav-pill-orga:hover {
  background: var(--orga-800);
  color: #fff;
  text-decoration: none;
}
/* Etat actif : la page courante est l espace correspondant. Pas de
   box-shadow ici (le pill est dans un container, le halo deborderait). */
.home-nav .nav-pill-orga.is-active {
  background: var(--orga-800);
  color: #fff;
}
.home-nav .nav-pill-orga.is-active:hover {
  background: var(--orga-800);
}

/* ── Panier dans la nav (desktop) ───────────────────────────────────
   Icon-only pill ronde, visible quand cart agrege > 0 via JS qui
   toggle l attribut hidden du badge.  */
.home-nav .nav-pill-cart {
  /* Hidden par defaut : revelee quand <html.will-has-cart> est present
     (toggle par updateCartBadges dans will-home-nav.js). Evite l icone
     orpheline tant que le systeme Vendu n est pas active. */
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  text-decoration: none;
  position: relative;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.home-nav .nav-pill-cart:hover {
  background: rgba(255, 255, 255, 0.28);
  text-decoration: none;
  color: #fff;
}
.home-nav .nav-pill-cart .nav-pill-label { display: none; }
.home-nav .nav-pill-cart .nav-pill-icon { display: block; }

/* Raccourcis vers les espaces orga + photographe quand la session
   correspondante existe en localStorage. Pose en flex item du header,
   icone violet sur fond #F5F3FA (aligne sur les autres pills "douces").
   Hidden par defaut, visibles via .has-orga-session / .has-photo-session
   sur <html> (refreshSpaceShortcuts dans will-home-nav.js). */
.home-nav .nav-pill-space {
  display: none;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #F5F3FA;
  color: #7B2FFF;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.12s ease;
  /* Cluster droit du header desktop (nav-right est display:contents en
     desktop, cf @media 768+) : se placer entre le CTA Lancer mon event
     (order 3) et la pill Connexion (order 5). */
  order: 4;
}
.home-nav .nav-pill-space:hover {
  background: #EDE7F8;
  text-decoration: none;
  transform: translateY(-1px);
}
.has-orga-session .home-nav .nav-pill-orga-shortcut { display: inline-flex; }
.has-photo-session .home-nav .nav-pill-photo-shortcut { display: inline-flex; }
/* Hide en espace actif (on est deja dedans, doublon visuel). */
.will-in-space .home-nav .nav-pill-space { display: none !important; }
.home-nav .nav-cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #D67CF8;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  border: 2px solid var(--violet-900, #2A0A5A);
}
.home-nav .nav-cart-badge[hidden] { display: none; }
/* Reveal de la pill panier quand le panier est non-vide (toggle par JS). */
.will-has-cart .home-nav .nav-pill-cart { display: inline-flex; }
/* En mobile, le pill panier est dans le burger drawer (cf .burger-drawer-link-cart) */
@media (max-width: 540px) {
  .home-nav .nav-pill-cart { display: none; }
}

/* "Mes photos" desktop : jumeau visuel de .nav-pill-cart. Hidden par
   defaut, revelee quand l utilisateur est connecte (.will-runner-loggedin
   sur <html>, pose par willSession.refresh). En mobile, le bouton "Mes
   photos" du burger drawer prend le relais. */
.home-nav .nav-pill-photos {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  text-decoration: none;
  position: relative;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.home-nav .nav-pill-photos:hover {
  background: rgba(255, 255, 255, 0.28);
  text-decoration: none;
  color: #fff;
}
.home-nav .nav-pill-photos .nav-pill-label { display: none; }
.home-nav .nav-pill-photos .nav-pill-icon { display: block; }
.will-runner-loggedin .home-nav .nav-pill-photos { display: inline-flex; }
@media (max-width: 540px) {
  .home-nav .nav-pill-photos { display: none !important; }
}
/* Burger drawer "Mon panier" : meme charte que les autres liens du drawer
   (.burger-drawer-link) -> bouton transparent, texte ink-deep, padding 8px,
   radius 10, hover violet light. Icone Panier reduite (18px) + count badge
   violet primary compact a droite. Hidden tant que le panier est vide via
   [data-cart-row][hidden]. */
.burger-drawer-cart-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 10px;
  margin-bottom: 6px;
  width: 100%;
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(123, 47, 255, 0.12);
  border-radius: 10px 10px 0 0;
  text-decoration: none;
  color: #1a0a3e;
  font-family: 'Montserrat', var(--font-body);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, color 0.15s ease;
}
.burger-drawer-cart-row[hidden] { display: none !important; }
.burger-drawer-cart-row:hover {
  background: rgba(123, 47, 255, 0.08);
  color: var(--violet-700);
}
.burger-drawer-cart-row:focus-visible {
  outline: 2px solid var(--violet-300);
  outline-offset: 2px;
}
.burger-drawer-cart-label {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  color: inherit;
}
.burger-drawer-cart-count {
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--violet-600, #7B2FFF);
  color: #fff;
  font-family: 'Montserrat', var(--font-body);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  box-sizing: border-box;
  flex-shrink: 0;
}
.burger-drawer-cart-icon {
  width: 20px;
  height: 20px;
  color: var(--violet-600, #7B2FFF);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.burger-drawer-cart-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* Slot login droite : visible seulement si PAS connecte runner ET
   PAS dans un espace orga/photo (pas besoin de "Se connecter" runner
   quand on est deja sur un dashboard pro). */
/* slot-right est le wrapper du bouton Connexion ghost (post-refonte
   2026-06-22 PM). Visible uniquement si pas connecte (controle par
   :not(.has-any-login) plus loin). */
.home-nav .auth-nav-slot-right { display: inline-flex; }
/* Combo pill "Se connecter | S inscrire" : container violet avec 2 boutons
   internes separes par un divider, chaque bouton ouvre le runner modal sur
   le tab correspondant via data-runner-open. */
.home-nav .auth-nav-login-pill {
  display: inline-flex;
  align-items: stretch;
  height: 32px;
  background: var(--violet-600);
  border-radius: 12px;
  overflow: hidden;
  transition: background 0.15s ease;
}
.home-nav .auth-nav-login-pill button {
  appearance: none;
  border: none;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 0 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.home-nav .auth-nav-login-pill button + button {
  border-left: 1px solid rgba(255, 255, 255, 0.35);
}
.home-nav .auth-nav-login-pill button:hover {
  background: var(--violet-700);
}

/* Reset font-family des boutons nav-pill-orga (heritent inherit du form
   parent qui peut avoir un autre stack). */
.home-nav .nav-pill-orga { font-family: inherit; }

/* 2026-06-22 : Bouton "Deconnexion" du nav retire. La deconnexion
   est maintenant accessible via le bandeau rose injecte par le
   dashboard React sous le nav, et via le modal "Mon compte". */
.home-nav .space-logout-btn { display: none !important; }

@media (max-width: 880px) {
  .home-nav .nav-welcome-text { display: none; }
  .home-nav .nav-right-label { display: none; }
  .home-nav .nav-pill-orga,
  .home-nav .auth-nav-login-pill button { padding: 0 12px; font-size: 12px; }
}
@media (max-width: 767px) {
  /* Mobile + petites tablettes portrait : le burger drawer (droite) absorbe
     tous les liens (Espaces, Mes photos, compte, deconnexion). Header epure :
     seul le bouton burger reste a droite. En NON connecte, le logo Will est
     repositionne a gauche. En connecte, le logo est cache aussi (header =
     burger seul). "Hello prenom" n est PAS affiche (acces via Profil du
     drawer). Breakpoint a 760px (au lieu de 540) pour couvrir iPhone landscape
     + ne pas laisser apparaitre "Hello" en gris pale sur la galerie event. */
  /* Specificite doublee (nav.home-nav) pour override le display: none
     declare plus loin dans le bloc BURGER DRAWER (cascade: meme specificite,
     ordre = la derniere gagne sinon). */
  nav.home-nav .burger-toggle { display: inline-flex; }
  .home-nav .nav-pills-group,
  .home-nav .auth-nav-slot-right,
  .home-nav .space-logout-btn,
  .home-nav .will-mes-photos-pill { display: none; }
  /* Slot avatar gauche : cache en mobile (loggué ET non loggué). Le header
     mobile passe a la structure [logo] (gap auto) [Hello\nPrenom] [burger]
     -- l avatar n a plus de place et le "Hello" devient le marqueur d auth. */
  .home-nav .auth-nav-slot-left,
  .will-runner-loggedin .home-nav .auth-nav-slot-left { display: none !important; }
  /* "Hello prenom" inline gauche cache aussi (le nav-mobile-hello le
     remplace cote droit, lisible sur fond clair). */
  .home-nav .nav-welcome-hello,
  .will-runner-loggedin .home-nav .nav-welcome-hello { display: none; }
  /* Logo a GAUCHE en mobile : position static + transform reset pour
     casser le centrage absolute. Reste en flex-flow normal de .container
     (premier element non-empty visible). */
  .home-nav .nav-logo-center {
    position: static;
    transform: none;
    left: auto;
    top: auto;
  }
  /* nav-mobile-hello : 2 lignes ("Hello" / "{prenom}") a gauche du
     burger, visible uniquement si logged-in. */
  .will-runner-loggedin .home-nav .nav-mobile-hello { display: inline-flex; }
  /* Compression .nav-welcome -- utile uniquement pour .nav-welcome-space
     (cas will-in-space). Le hello/text/logo sont caches sinon. */
  .home-nav .nav-welcome {
    max-width: calc(100vw - 80px);
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* nav-left : autorise compression si .nav-welcome-space est long (in-space). */
  .home-nav .nav-left { flex-shrink: 1; min-width: 0; }
}

/* ============================================================
   BURGER DRAWER (mobile menu, glassmorphism)
   Bouton burger : cache desktop (display: none par defaut), visible
   uniquement sous 540px via la media query ci-dessus.
   Drawer : ouvert via .is-open, slide-in 280ms depuis la droite,
   backdrop blur (givre iOS-like) sur le reste de la page.
   ============================================================ */
/* "Hello\n{prenom}" mobile (visible uniquement <= 760px + logged-in via
   les regles de la media query). 2 lignes empilees, line-height tight,
   typo sober alignee a droite, jouxte le burger. */
.home-nav .nav-mobile-hello {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  margin-left: auto;
  margin-right: 6px;
  font-family: 'AV Estiana', 'Montserrat', sans-serif;
  font-size: 15px;
  line-height: 0.9;
  color: #c9beed;
  text-align: right;
  white-space: nowrap;
}
.home-nav .nav-mobile-hello-name { font-size: 17px; }

/* Pastille selfie sur le burger : indique l etat du selfie sans avoir a
   ouvrir le drawer. Visible uniquement mobile + logged-in. Rouge par
   defaut (selfie manquant -> CTA visuel), vert si .will-has-selfie. */
.home-nav .burger-toggle .burger-selfie-dot {
  display: none;
  position: absolute;
  top: 4px;
  right: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
  pointer-events: none;
}
.will-runner-loggedin .home-nav .burger-toggle .burger-selfie-dot { display: block; }
.will-has-selfie .home-nav .burger-toggle .burger-selfie-dot { background: #10B981; }

.home-nav .burger-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--violet-700);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.home-nav .burger-toggle:hover { background: transparent; }
.home-nav .burger-toggle:focus-visible {
  outline: 2px solid var(--violet-300);
  outline-offset: 2px;
}
.home-nav .burger-toggle svg { display: block; }

/* Montserrat (drawer mobile + titres). Variable font, subset Latin de base
   (727 KB TTF -> 32 KB WOFF2, -95%). Audit Phase 4 / Sprint perf 2026-06-17. */
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-VF.woff2') format('woff2-variations'),
       url('/fonts/Montserrat-VF.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

.burger-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 949;
  background: rgba(15, 7, 35, 0.45);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.burger-drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.burger-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(340px, 88vw);
  z-index: 950;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-left: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: -8px 0 32px rgba(15, 7, 35, 0.22);
  padding: 22px 20px 28px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.burger-drawer.is-open { transform: translateX(0); }

.burger-drawer-close {
  position: absolute;
  /* Aligne verticalement au centre du "Hello prenom". */
  top: 22px;
  right: 22px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: #c9beed;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s ease;
}
.burger-drawer-close:hover { color: var(--violet-600); background: transparent; }
.burger-drawer-close svg { width: 22px; height: 22px; display: block; }
.burger-drawer-close:focus-visible { outline: none; }
.profile-sheet-close:focus-visible { outline: none; }

/* Logo Will en haut du drawer (remplace le greeting "Hello prenom"). */
.burger-drawer-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 4px 0 8px;
  color: var(--violet-700);
}
.burger-drawer-header svg.burger-drawer-logo { display: block; height: 38px; width: auto; }
/* Greeting "Hello {prenom}" : visible UNIQUEMENT si loggué, en remplacement
   du logo Will dans le header du drawer. AVEstiana, taille proche du logo
   (38 px ~ 26 px de cap), color violet-700 pour ressortir sur le drawer glass. */
.burger-drawer-greeting {
  display: none;
  margin: 0;
  font-family: 'AV Estiana', 'Inter', serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: #c9beed;
  letter-spacing: -0.01em;
}
.will-runner-loggedin .burger-drawer-header svg.burger-drawer-logo { display: none; }
.will-runner-loggedin .burger-drawer-greeting { display: block; }

.burger-drawer-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.burger-drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0;
}

.burger-drawer-link {
  display: block;
  appearance: none;
  border: none;
  background: transparent;
  color: #1a0a3e;
  text-align: left;
  padding: 10px 8px;
  font-family: 'Montserrat', var(--font-body);
  font-size: 14px;
  font-weight: 500;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.burger-drawer-link:hover {
  background: rgba(123, 47, 255, 0.08);
  text-decoration: none;
  color: var(--violet-700);
}
.burger-drawer-link:focus-visible {
  outline: 2px solid var(--violet-300);
  outline-offset: 2px;
}
.burger-drawer-link-muted { color: #6c5b8c; font-size: 14px; font-weight: 600; }
/* Liens Espaces orga / photo en rose charte (#D67CF8 brand). */
.burger-drawer-link-rose { color: #D67CF8; }
.burger-drawer-link-rose:hover { color: #B654DA; background: rgba(214, 124, 248, 0.08); }
.burger-drawer-link-danger { color: #6c5b8c; font-size: 13px; font-weight: 400; padding: 8px; }
.burger-drawer-link-danger:hover { color: #c43; background: rgba(196, 51, 51, 0.06); }

/* 1ere zone du drawer (logged-in) : 2 actions empilees a GAUCHE (Mon compte
   + Mes photos) alignees pixel-pres avec les liens en dessous, selfie XL a
   DROITE + pastille selfie en haut-droite du thumb. */
.burger-drawer-profile-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 8px;
  border-top: 1px solid rgba(123, 47, 255, 0.12);
  border-bottom: 1px solid rgba(123, 47, 255, 0.12);
  margin: 4px 0;
}
.burger-drawer-profile-thumb {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #F4EFFF;
  color: var(--violet-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 2px solid #E5DBFF;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* Pas d overflow:hidden : laisse la pastille deborder en haut-droite. */
}
.burger-drawer-profile-thumb svg { display: block; }
.burger-drawer-profile-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.burger-drawer-profile-actions {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}
.burger-drawer-profile-action {
  appearance: none;
  background: transparent;
  border: none;
  padding: 10px 0;
  text-align: left;
  font-family: 'Montserrat', var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: #1a0a3e;
  line-height: 1.5;
  cursor: pointer;
  text-decoration: none;
  border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s ease, background 0.15s ease;
}
.burger-drawer-profile-action:hover {
  color: var(--violet-700);
  background: rgba(123, 47, 255, 0.06);
  text-decoration: none;
}
.burger-drawer-profile-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ef4444;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
  pointer-events: none;
}
.will-has-selfie .burger-drawer-profile-dot { background: #10B981; }

.burger-drawer-actions { padding-top: 4px; gap: 4px; }
.burger-drawer-auth { gap: 10px; }

.burger-cta {
  appearance: none;
  border: none;
  background: var(--violet-600);
  color: #fff;
  padding: 12px 16px;
  border-radius: 12px;
  font-family: 'Montserrat', var(--font-body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.burger-cta:hover { background: var(--violet-700); }
.burger-cta-secondary {
  appearance: none;
  border: 1px solid var(--violet-300);
  background: transparent;
  color: var(--violet-700);
  padding: 12px 16px;
  border-radius: 12px;
  font-family: 'Montserrat', var(--font-body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.burger-cta-secondary:hover { background: var(--violet-050); }

/* Toggle connecte / non-connecte (pilote par .will-runner-loggedin sur html). */
.burger-drawer-loggedin-only { display: none; }
.will-runner-loggedin .burger-drawer-loggedin-only { display: flex; }
.will-runner-loggedin a.burger-drawer-loggedin-only,
.will-runner-loggedin button.burger-drawer-loggedin-only { display: block; }
.burger-drawer-loggedout-only { display: flex; }
.will-runner-loggedin .burger-drawer-loggedout-only { display: none; }

/* ============================================================
   MODAL ESPACES — overlay backdrop-blur + carte centree.
   ============================================================ */
.spaces-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.spaces-modal-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
.spaces-modal {
  position: fixed;
  z-index: 1000;
  top: 50%;
  left: 50%;
  width: calc(100vw - 32px);
  /* 540px : laisse respirer ORGANISATEUR (12 caracteres uppercase +
     letter-spacing) dans son 1/3 de track. A 440px les pills paraissaient
     compressees et le texte debordait visuellement la cellule. */
  max-width: 540px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(15, 7, 35, 0.25);
  padding: 28px 26px 26px;
  font-family: 'Montserrat', var(--font-body, 'Inter'), system-ui, sans-serif;
  opacity: 0;
  transform: translate(-50%, -45%) scale(0.96);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.spaces-modal.is-open {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.spaces-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--ink-600);
  padding: 6px;
  border-radius: 50%;
  transition: background 0.15s ease, color 0.15s ease;
}
.spaces-modal-close:hover {
  background: var(--violet-050);
  color: var(--ink-900);
}
.spaces-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
}
.spaces-title-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #9152FF, #7B2FFF);
  color: #fff;
  box-shadow: 0 6px 16px rgba(123, 47, 255, 0.32);
}
.spaces-title-icon svg { width: 20px; height: 20px; }
.spaces-modal-title {
  font-family: 'AV Estiana', 'Inter', serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--violet-700, #5926D6);
  margin: 0;
  text-align: left;
  line-height: 1;
}
/* Runner modal : titre en violet (le Spaces modal reste en rose orga). */
#runner-modal-title { color: var(--violet-600); }

/* Runner modal : condensé pour que le formulaire d'inscription
   (8 champs + 2 checkboxes + submit + foot) tienne sans débordement
   sur iPhone SE / Safari avec barre URL. Scroll iOS smooth garanti. */
#runner-modal {
  padding: 20px 22px 20px;
  -webkit-overflow-scrolling: touch;
}
#runner-modal .spaces-modal-title {
  font-size: 22px;
  margin-bottom: 10px;
}
#runner-modal .spaces-tabs { margin-bottom: 12px; }
#runner-modal .spaces-form-sub { margin-bottom: 10px; }
#runner-modal .spaces-label { margin-bottom: 9px; }
#runner-modal .spaces-label > span { margin-bottom: 4px; }
#runner-modal .spaces-label input { height: 40px; }
#runner-modal .spaces-field-checkbox { margin: 2px 0 8px; }
#runner-modal .spaces-submit { padding: 11px; }
#runner-modal .spaces-form-foot { margin-top: 10px; }

/* Input date : Safari iOS rend un input plus haut et avec un alignement
   bizarre (placeholder gris "année", indicator natif). On neutralise le
   style natif pour s'aligner pixel-pres avec les autres inputs text. */
#runner-modal .spaces-label input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
  font-variant-numeric: tabular-nums;
  color: var(--ink-900);
  min-height: 40px;
  line-height: 40px;
  padding: 0 14px;
}
#runner-modal .spaces-label input[type="date"]:invalid,
#runner-modal .spaces-label input[type="date"]:not(:focus):placeholder-shown {
  color: var(--ink-400);
}
#runner-modal .spaces-label input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  min-height: 40px;
}
#runner-modal .spaces-label input[type="date"]::-webkit-calendar-picker-indicator {
  color: var(--violet-600);
  opacity: 0.6;
  cursor: pointer;
  margin-left: 6px;
}
.spaces-tabs {
  position: relative;
  display: flex;
  background: var(--violet-100, #EDE7FF);
  border-radius: 12px;
  padding: 4px;
  margin: 0 0 18px;
}
/* Single tab mode : ouverture depuis un entry burger specifique
   (Orga / Photo / Connexion) -> cache la barre des 3 tabs, montre que
   le formulaire concerne. Le titre du modal est adapte via JS. */
.spaces-modal.single-tab .spaces-tabs { display: none; }
/* Indicator slidant sous l onglet actif, transition 250ms ease-in-out.
   Position via translateX selon data-active sur .spaces-tabs. */
.spaces-tabs-indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  /* Largeur 1/3 = pour le modal 3 tabs (utilisateur/orga/photo).
     calc((100% - 8px) / 3) = (track - 2x4px padding) / 3 segments. */
  width: calc((100% - 8px) / 3);
  border-radius: 12px;
  background: var(--violet-600, #7B2FFF);
  box-shadow: 0 2px 6px rgba(123, 47, 255, 0.28);
  transition: transform 250ms ease-in-out;
  z-index: 0;
  pointer-events: none;
}
.spaces-tabs[data-active="user"] .spaces-tabs-indicator  { transform: translateX(0); }
.spaces-tabs[data-active="orga"] .spaces-tabs-indicator  { transform: translateX(100%); }
.spaces-tabs[data-active="photo"] .spaces-tabs-indicator { transform: translateX(200%); }
/* Quand un tab est cache (user deja loggue dans ce role), l indicator
   et les translates s adaptent. */
.spaces-modal.hide-user-tab .spaces-tab[data-tab="user"] { display: none; }
.spaces-modal.hide-orga-tab .spaces-tab[data-tab="orga"] { display: none; }

/* Cas 1 tab cache : 2 tabs visibles, indicator 1/2 + translates 0/100% */
.spaces-modal.hide-user-tab:not(.hide-orga-tab) .spaces-tabs-indicator { width: calc((100% - 8px) / 2); }
.spaces-modal.hide-user-tab:not(.hide-orga-tab) .spaces-tabs[data-active="orga"] .spaces-tabs-indicator { transform: translateX(0); }
.spaces-modal.hide-user-tab:not(.hide-orga-tab) .spaces-tabs[data-active="photo"] .spaces-tabs-indicator { transform: translateX(100%); }
.spaces-modal.hide-orga-tab:not(.hide-user-tab) .spaces-tabs-indicator { width: calc((100% - 8px) / 2); }
.spaces-modal.hide-orga-tab:not(.hide-user-tab) .spaces-tabs[data-active="user"] .spaces-tabs-indicator { transform: translateX(0); }
.spaces-modal.hide-orga-tab:not(.hide-user-tab) .spaces-tabs[data-active="photo"] .spaces-tabs-indicator { transform: translateX(100%); }

/* Cas 2 tabs caches (user perso + orga) : seul photo reste, full width */
.spaces-modal.hide-user-tab.hide-orga-tab .spaces-tabs-indicator { width: calc(100% - 8px); }
.spaces-modal.hide-user-tab.hide-orga-tab .spaces-tabs[data-active="photo"] .spaces-tabs-indicator { transform: translateX(0); }
.spaces-tab {
  position: relative;
  z-index: 1;
  flex: 1;
  appearance: none;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--violet-700, #5926D6);
  padding: 9px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: color 0.18s ease-in-out;
}
.spaces-tab.is-active {
  background: transparent;
  color: #fff;
  box-shadow: none;
}
/* Divider 1px entre deux pills non selectionnees consecutives (mirror
   du pattern .events-tab homepage). Cible le pseudo-element apres une
   pill non-active si la suivante est aussi non-active. */
.spaces-tab:not(.is-active):has(+ .spaces-tab:not(.is-active)) {
  position: relative;
}
.spaces-tab:not(.is-active):has(+ .spaces-tab:not(.is-active))::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 18px;
  background: rgba(123, 47, 255, 0.3);
  pointer-events: none;
}

/* Track slidant des forms (slide 250ms ease-in-out, no crossfade).
   Height transitionne en sync avec le slide (JS pose le scrollHeight
   du form actif sur le wrap pour eviter le vide sous les formes
   courtes). */
.spaces-forms-wrap {
  overflow: hidden;
  transition: height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.spaces-forms-track {
  display: flex;
  align-items: flex-start;
  transition: transform 250ms ease-in-out;
}
.spaces-forms-track > .spaces-form {
  flex: 0 0 100%;
  width: 100%;
  display: block;
  min-width: 0;
  box-sizing: border-box;
}
.spaces-forms-track[data-active="user"]  { transform: translateX(0); }
.spaces-forms-track[data-active="orga"]  { transform: translateX(-100%); }
.spaces-forms-track[data-active="photo"] { transform: translateX(-200%); }
.spaces-form { display: none; }
.spaces-form.is-active { display: block; }
.spaces-form-sub {
  color: var(--violet-700, #5926D6);
  font-size: 14px;
  margin: 0 0 16px;
  text-align: left;
}
.spaces-label {
  display: block;
  margin-bottom: 14px;
}
.spaces-label > span {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #7B2FFF;
  letter-spacing: 0;
  margin-bottom: 6px;
}
.spaces-label .spaces-optional {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-400);
}
/* ============================================================
   INPUT — 4 etats visuels coherents (vide / focus / rempli / erreur)
   Spec : labels au-dessus #7B2FFF 14/500.
   - Border 1px transparent par defaut pour reserver la place et eviter
     le saut d 1px quand focus/error apparait.
   - font-size 16px pour empecher le zoom auto iOS Safari.
   - Class .is-filled posee par JS sur input/change pour distinguer
     rempli de vide (CSS :placeholder-shown ne marche pas sur inputs
     sans attr placeholder).
   ============================================================ */
/* Etat 1 — Vide (placeholder visible) — base */
.spaces-label input {
  width: 100%;
  height: 48px;
  box-sizing: border-box;
  padding: 13px 17px;
  background: #F5F3FA;
  border: 1px solid transparent;
  border-radius: 14px;
  font-size: 16px;
  font-family: inherit;
  color: #1A1A1A;
  outline: none;
  caret-color: #7B2FFF;
  transition: background 0.2s ease-out, border-color 0.2s ease-out,
              box-shadow 0.2s ease-out, color 0.2s ease-out;
}
.spaces-label input::placeholder { color: #A89CB8; }

/* Etat 2 — Focus */
.spaces-label input:focus {
  background: #EDE7F8;
  border-color: #C9B8F0;
  box-shadow: none;
}

/* Etat 3 — Rempli (pas focus) */
.spaces-label input.is-filled:not(:focus) {
  background: #FFFFFF;
  border-color: transparent;
  box-shadow: inset 0 0 0 1px #EDE7F8;
  font-weight: 500;
}

/* Etat 4 — Erreur (toggle via .is-error sur .spaces-label).
   !important justifie : etat erreur doit gagner sur .is-filled
   (spec plus haute) et :focus. */
.spaces-label.is-error input,
.spaces-label input[aria-invalid="true"] {
  background: #FBE7E7 !important;
  border-color: #ECB8C0 !important;
  box-shadow: none !important;
  font-weight: 500;
}

/* Autofill : neutralise le jaune Chrome/Safari + force les couleurs
   text/caret du theme. Inset-shadow truque pour eviter background
   override. */
.spaces-label input:-webkit-autofill,
.spaces-label input:-webkit-autofill:hover,
.spaces-label input:-webkit-autofill:focus,
.spaces-label input:-webkit-autofill:active {
  -webkit-text-fill-color: #1A1A1A;
  -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset, inset 0 0 0 1px #EDE7F8;
  caret-color: #7B2FFF;
  transition: background-color 9999s ease-out 0s;
}
.spaces-form-error {
  background: rgba(239, 68, 68, 0.08);
  color: #B91C1C;
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 12px;
}
.spaces-submit {
  display: block;
  width: 50%;
  margin: 0 auto;
  appearance: none;
  border: none;
  background: #F4A6FF;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 16px;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(244, 166, 255, 0.32);
  transition: background 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
}
/* Eye toggle dans champ mot de passe. */
.spaces-input-with-eye { position: relative; }
.spaces-input-with-eye input { padding-right: 44px !important; }
.spaces-eye-toggle {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  appearance: none;
  border: none;
  background: transparent;
  padding: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--violet-300, #C9B6FF);
  transition: color 0.15s ease;
}
.spaces-eye-toggle:hover { color: var(--violet-600, #7B2FFF); }
.spaces-eye-toggle svg { width: 18px; height: 18px; display: block; }
.spaces-eye-toggle .spaces-eye-hide { display: none; }
.spaces-eye-toggle.is-shown .spaces-eye-show { display: none; }
.spaces-eye-toggle.is-shown .spaces-eye-hide { display: block; }
.spaces-submit:hover {
  background: #E673FF;
  transform: scale(1.02);
  box-shadow: 0 8px 24px rgba(244, 166, 255, 0.42);
}
.spaces-submit:active { transform: scale(0.98); }
.spaces-submit:disabled { background: #FBD9FF; cursor: wait; box-shadow: none; transform: none; }
.spaces-form-link {
  display: block;
  text-align: center;
  margin-top: 12px;
  font-size: 13px;
  color: #F4A6FF;
  text-decoration: none;
  font-weight: 500;
}
.spaces-form-link:hover { color: #E673FF; text-decoration: underline; }
/* Onglet UTILISATEUR (coureur) du modal Connexion : CTA violet primary
   et lien violet, distinct du rose orga / photographe. Univers coureur
   grand public. */
.spaces-submit-user {
  background: var(--violet-600, #7B2FFF) !important;
  box-shadow: 0 4px 12px rgba(123, 47, 255, 0.28) !important;
}
.spaces-submit-user:hover {
  background: var(--violet-700, #5B1FBF) !important;
  box-shadow: 0 8px 24px rgba(123, 47, 255, 0.36) !important;
}
.spaces-submit-user:disabled {
  background: var(--violet-300, #C9B6FF) !important;
  box-shadow: none !important;
}
.spaces-form-link-user {
  color: var(--violet-500, #A88FFF) !important;
}
.spaces-form-link-user:hover {
  color: var(--violet-700, #5B1FBF) !important;
}
/* Lien bas du form Utilisateur (Pas encore de compte ? Crée ton compte) :
   en violet aussi pour cohérence. */
.spaces-form-user .spaces-form-foot a {
  color: var(--violet-600, #7B2FFF);
}
.spaces-form-user .spaces-form-foot a:hover {
  color: var(--violet-700, #5B1FBF);
}

/* ===== Sub-onglets Connexion / Inscription du tab Utilisateur =====
   Segmented control 2 positions avec indicateur coulissant, panes en
   slide horizontal pour matcher le motif des 3 onglets principaux. */
.spaces-user-seg-wrap {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--violet-100, #EDE7FF);
  border-radius: 12px;
  padding: 4px;
  margin: 0 0 18px;
  gap: 0;
  isolation: isolate;
}
.spaces-user-seg-indicator {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc((100% - 8px) / 2);
  height: calc(100% - 8px);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}
.spaces-user-seg-wrap[data-active-user-mode="register"] .spaces-user-seg-indicator {
  transform: translateX(100%);
}
.spaces-user-seg {
  position: relative;
  z-index: 1;
  appearance: none;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-600, #6B6B7A);
  padding: 10px 16px;
  border-radius: 12px;
  transition: color 0.18s ease;
}
.spaces-user-seg.is-active {
  color: var(--violet-700, #5B1FBF);
  font-weight: 700;
}

/* Panes : slide horizontal (mirror du pattern .spaces-forms-track 3 onglets).
   Wrap masque l overflow, track est un flex container dont chaque enfant
   prend 100% de la largeur du wrap (flex 0 0 100%). Translation -100% pour
   passer login -> register. */
.spaces-user-panes-wrap {
  position: relative;
  overflow: hidden;
  transition: height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.spaces-user-panes-track {
  display: flex;
  align-items: flex-start;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.spaces-user-panes-track[data-active-user-mode="register"] {
  transform: translateX(-100%);
}
.spaces-user-pane {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.spaces-user-pane.is-active {
  opacity: 1;
  pointer-events: auto;
}
/* Champ row : prenom / nom cote a cote dans le pane register. */
.spaces-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 480px) {
  .spaces-field-row { grid-template-columns: 1fr; }
}
/* Checkbox : CGU + biometrie dans le pane register. Layout 2 colonnes
   (checkbox 18px, label flex), label clickable, note italic discrete. */
.spaces-field-checkbox {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 13px;
  color: var(--ink-700, #4A4A55);
  line-height: 1.4;
}
.spaces-field-checkbox input[type="checkbox"] {
  margin-top: 2px;
  accent-color: var(--violet-600, #7B2FFF);
  cursor: pointer;
}
.spaces-field-checkbox label { cursor: pointer; }
.spaces-field-checkbox a {
  color: var(--violet-600, #7B2FFF);
  text-decoration: underline;
}
.spaces-checkbox-note {
  display: block;
  font-size: 12px;
  color: var(--ink-500, #8E8E99);
  font-style: italic;
  margin-top: 2px;
}
/* Runner modal : bouton submit en violet primary (aligne sur le titre). */
#runner-modal .spaces-submit { background: var(--violet-600); }
#runner-modal .spaces-submit:hover { background: var(--violet-700); }
#runner-modal .spaces-submit:disabled { background: var(--violet-300); }
.spaces-form-foot {
  text-align: center;
  font-size: 13px;
  color: var(--ink-600);
  margin: 14px 0 0;
}
.spaces-form-foot a {
  color: #F4A6FF;
  font-weight: 700;
}
.spaces-form-foot a:hover { color: #E673FF; }

/* ── Photo : etape 1 selection event + etape 2 PIN ── */
.spaces-photo-step { display: none; }
.spaces-photo-step.is-active { display: block; }

/* Search bar dans la modal Photo : subtile, guide sans dominer la liste. */
.spaces-photo-search {
  position: relative;
  margin-bottom: 14px;
}
.spaces-photo-search svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--violet-300, #C9B6FF);
  pointer-events: none;
  width: 16px;
  height: 16px;
}
.spaces-photo-search input {
  width: 100%;
  height: 44px;
  box-sizing: border-box;
  padding: 11px 14px 11px 39px;
  background: #F5F3FA;
  border: 1px solid transparent;
  border-radius: 14px;
  font-family: inherit;
  font-size: 16px;
  color: #1A1A1A;
  outline: none;
  caret-color: #7B2FFF;
  transition: background 0.2s ease-out, border-color 0.2s ease-out,
              box-shadow 0.2s ease-out;
}
.spaces-photo-search input::placeholder { color: #A89CB8; font-weight: 400; }
.spaces-photo-search input:focus {
  background: #EDE7F8;
  border-color: #C9B8F0;
}
.spaces-photo-search input.is-filled:not(:focus) {
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px #EDE7F8;
  font-weight: 500;
}
.spaces-photo-search input:-webkit-autofill,
.spaces-photo-search input:-webkit-autofill:hover,
.spaces-photo-search input:-webkit-autofill:focus {
  -webkit-text-fill-color: #1A1A1A;
  -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset, inset 0 0 0 1px #EDE7F8;
  caret-color: #7B2FFF;
  transition: background-color 9999s ease-out 0s;
}

/* Liste events scrollable */
.spaces-event-list {
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 4px;
}
.spaces-event-loading,
.spaces-event-empty,
.spaces-event-error {
  text-align: center;
  color: var(--ink-600);
  font-size: 13px;
  padding: 20px 0;
}
.spaces-event-error p {
  margin: 0 0 10px;
  padding: 0 8px;
}
.spaces-event-retry {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 1px solid var(--ink-300);
  color: var(--ink-700);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  border-radius: 12px;
  padding: 6px 16px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.spaces-event-retry:hover {
  border-color: var(--violet-500);
  background: var(--violet-050);
}
/* Section "saisis ton code event" — B3, separateur fin du contenu liste. */
.spaces-event-fallback {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--ink-200);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.spaces-event-fallback-label span {
  font-size: 12px;
  color: var(--ink-600);
  font-weight: 600;
}
.spaces-event-fallback-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ink-300);
  border-radius: 10px;
  font-family: inherit;
  font-size: 16px;
  background: #fff;
  color: var(--ink-900);
  box-sizing: border-box;
}
.spaces-event-fallback-input:focus {
  outline: none;
  border-color: var(--violet-500);
  box-shadow: 0 0 0 3px rgba(123, 47, 255, 0.12);
}
.spaces-event-fallback-error {
  color: var(--error);
  font-size: 12px;
}
.spaces-event-fallback-submit {
  align-self: flex-end;
  background: var(--violet-600);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 8px 18px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}
.spaces-event-fallback-submit:hover {
  background: var(--violet-700);
}
.spaces-event-card {
  display: block;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.spaces-event-card:hover {
  border-color: var(--violet-300);
  background: var(--violet-050);
  transform: translateY(-1px);
}
.spaces-event-card-name {
  font-family: 'Montserrat', var(--font-body);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 2px;
  line-height: 1.2;
}
/* Couleur du type sur le FOND de la card (palette TYPE_COLORS coherente
   avec evcard-t-* / hot-featured-type-pill / pills modal launch-event).
   Texte blanc + meta semi-transparente. */
.spaces-event-card[data-type="trail"]     { background: #22C55E; border-color: transparent; }
.spaces-event-card[data-type="route"]     { background: #3B82F6; border-color: transparent; }
.spaces-event-card[data-type="cross"]     { background: #A855F7; border-color: transparent; }
.spaces-event-card[data-type="triathlon"] { background: #6366F1; border-color: transparent; }
.spaces-event-card[data-type="velo"]      { background: #F97316; border-color: transparent; }
.spaces-event-card[data-type="marche"]    { background: #EAB308; border-color: transparent; }
.spaces-event-card[data-type="autre"]     { background: #EF4444; border-color: transparent; }
.spaces-event-card[data-type] .spaces-event-card-name { color: #fff; }
.spaces-event-card[data-type] .spaces-event-card-meta { color: rgba(255,255,255,0.85); }
.spaces-event-card[data-type]:hover {
  filter: brightness(0.95);
  transform: translateY(-1px);
}
.spaces-event-card-meta {
  font-family: 'Montserrat', var(--font-body);
  color: var(--violet-400, #B19FFF);
  font-size: 12px;
  font-weight: 500;
}

/* Etape PIN : header event + back + 4 dots */
.spaces-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--violet-600);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 4px;
  margin-bottom: 8px;
}
.spaces-back:hover { color: var(--violet-700); }
.spaces-event-selected {
  background: var(--violet-050);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.spaces-event-selected .spaces-event-name {
  font-family: 'Montserrat', var(--font-body);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 2px;
  line-height: 1.2;
}
.spaces-event-selected .spaces-event-meta {
  font-family: 'Montserrat', var(--font-body);
  color: rgba(255,255,255,0.85);
  font-size: 12px;
  font-weight: 500;
}
/* Selected event : fond du type (cf .spaces-event-card[data-type=X]). */
.spaces-event-selected[data-type="trail"]     { background: #22C55E; }
.spaces-event-selected[data-type="route"]     { background: #3B82F6; }
.spaces-event-selected[data-type="cross"]     { background: #A855F7; }
.spaces-event-selected[data-type="triathlon"] { background: #6366F1; }
.spaces-event-selected[data-type="velo"]      { background: #F97316; }
.spaces-event-selected[data-type="marche"]    { background: #EAB308; }
.spaces-event-selected[data-type="autre"]     { background: #EF4444; }

.spaces-pin-dots {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 14px 0 18px;
}
.spaces-pin-dots.shake {
  animation: spacesPinShake 0.35s ease;
}
@keyframes spacesPinShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}
.spaces-pin-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--violet-300);
  background: transparent;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.spaces-pin-dot.is-filled {
  background: var(--violet-600);
  border-color: var(--violet-600);
  transform: scale(1.1);
}
/* Pavé numérique PIN : grille 3 colonnes, 4 lignes. */
.spaces-pin-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 280px;
  margin: 0 auto 6px;
}
.spaces-pin-key {
  appearance: none;
  border: none;
  background: var(--violet-050);
  color: var(--ink-900);
  font-family: inherit;
  font-size: 22px;
  font-weight: 600;
  height: 56px;
  border-radius: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.spaces-pin-key:hover { background: var(--violet-100); }
.spaces-pin-key:active { background: var(--violet-300); color: #fff; transform: scale(0.96); }
.spaces-pin-key-spacer {
  background: transparent;
  pointer-events: none;
  cursor: default;
}
.spaces-pin-key-spacer:hover,
.spaces-pin-key-spacer:active { background: transparent; transform: none; }
.spaces-pin-key-del { color: var(--ink-600); }
.spaces-pin-key-del svg { display: block; }

/* ============================================================
   RUNNER MODAL — tabs Connexion / Inscription, palette violet.
   Le pattern visuel suit celui du modal Espaces (orga/photo) mais
   en violet primary (la modal runner est cote coureur).
   ============================================================ */
#runner-modal .spaces-tab.is-active {
  color: var(--violet-600);
  box-shadow: 0 2px 6px rgba(123, 47, 255, 0.18);
}

/* Tab Inscription : grille prenom/nom + checkbox CGU + bloc ville. */
.spaces-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.spaces-field-row .spaces-label { margin-bottom: 12px; }

.spaces-field-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 14px;
  font-size: 12px;
  color: var(--ink-600);
  line-height: 1.4;
}
.spaces-field-checkbox input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: var(--violet-600);
  cursor: pointer;
}
.spaces-field-checkbox label { cursor: pointer; }
.spaces-field-checkbox a {
  color: var(--violet-600);
  font-weight: 600;
}
.spaces-checkbox-note {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-style: italic;
  color: var(--ink-500, #8c7eac);
  font-weight: 400;
}

/* Bloc ville (suggestions / selected / fallback) sous l input code postal. */
.spaces-city-block {
  margin: -4px 0 12px;
}
.spaces-city-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.spaces-city-suggestions button {
  appearance: none;
  background: var(--violet-050);
  color: var(--violet-700);
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.spaces-city-suggestions button:hover {
  background: var(--violet-100);
  border-color: var(--violet-300);
}
.spaces-city-selected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--violet-050);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--ink-900);
}
.spaces-city-selected button {
  background: transparent;
  border: none;
  color: var(--violet-600);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
}
.spaces-city-selected button:hover { color: var(--violet-700); }
.spaces-city-fallback {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}
.spaces-city-fallback p {
  margin: 0;
  font-size: 12px;
  color: var(--ink-600);
}
.spaces-city-fallback input {
  width: 100%;
  height: 38px;
  box-sizing: border-box;
  padding: 0 12px;
  background: #fff;
  border: 1.5px solid var(--ink-200);
  border-radius: 10px;
  font-size: 16px;
  font-family: inherit;
  color: var(--ink-900);
  outline: none;
}
.spaces-city-fallback input:focus {
  border-color: var(--violet-600);
  box-shadow: 0 0 0 3px rgba(123, 47, 255, 0.12);
}
.spaces-city-fallback button {
  align-self: flex-end;
  background: var(--violet-600);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.spaces-city-fallback button:hover { background: var(--violet-700); }

/* ============================================================
   HEADER DESKTOP REFONTE (>= 768px) — 2026-06-17/18
   Appliqué globalement à toutes les pages du site (était inline
   dans index.html jusqu'au 2026-06-18).
   [LOGO]  [Organisateur Photographe]  [Avatar Geoffrey]
   ============================================================ */
@media (min-width: 768px) {
  nav.top {
    border-bottom: none;
    box-shadow: 0 2px 8px rgba(31,18,68,0.06);
  }
  nav.top .container { height: 72px; }
  .home-nav .container { height: 72px; gap: 10px; }
  /* Aplatit nav-left/nav-right -> enfants directs du container flex. */
  .home-nav .nav-left,
  .home-nav .nav-right,
  .home-nav .nav-pills-group,
  .home-nav .nav-pills-links { display: contents; }
  /* Logo : sortir de l absolute centering, position normale a gauche. */
  .home-nav .nav-logo-center {
    position: static !important;
    transform: none !important;
    order: 1;
    color: var(--violet-600);
    flex: 0 0 auto;
  }
  .home-nav .nav-logo-center svg { width: 76px; height: 40px; }
  /* Centre : pills devenus liens texte simples. Cache "Espaces" label,
     cache icones, fond transparent. */
  .home-nav .nav-right-label { display: none !important; }
  .home-nav .nav-pill-icon { display: none !important; }
  .home-nav .nav-pill-orga {
    order: 2;
    background: transparent !important;
    border: none !important;
    padding: 0 20px !important;
    color: var(--violet-600) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    cursor: pointer;
    transition: color 0.18s ease;
    box-shadow: none !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .home-nav .nav-pill-orga:hover { color: var(--violet-900) !important; }
  .home-nav .nav-pill-label { font-size: 15px !important; font-weight: 500 !important; }
  /* Pousse les pills au centre via margin-left:auto sur la 1ere. */
  .home-nav .nav-pill-orga:first-of-type { margin-left: auto; }
  .home-nav .nav-pill-orga:last-of-type { margin-right: auto; }
  /* Droite : prenom + avatar (logged-in) OU login pill (logged-out).
     Welcome a gauche de l avatar (order 3 vs avatar order 4). */
  .home-nav .nav-welcome {
    order: 3;
    flex: 0 0 auto;
    margin-right: 10px;
    text-decoration: none;
    cursor: pointer;
  }
  /* 'Hello Prenom' sur 2 lignes : 'Hello' au-dessus, prenom en
     dessous via flex column. Text node + span en flex items separes. */
  .home-nav .nav-welcome-hello {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 13px;
    line-height: 1.15;
    color: var(--violet-300, #c9beed);
    font-weight: 500;
    text-align: right;
  }
  .home-nav .nav-welcome-hello [data-account-firstname] {
    display: block;
    font-size: 15px;
    color: var(--violet-300, #c9beed);
    font-weight: 600;
    font-style: normal;
  }
  .home-nav .auth-nav-slot-left {
    order: 4;
    flex: 0 0 auto;
  }
  .home-nav .auth-nav-slot-right {
    order: 5;
    flex: 0 0 auto;
  }
  /* Avatar 40px */
  .home-nav .auth-nav-avatar {
    width: 40px;
    height: 40px;
  }
  /* Cache cart, mobile hello, burger en desktop. La deconnexion
     espace reste visible (apparait quand .will-in-space sur html). */
  .home-nav .nav-pill-cart,
  .home-nav .nav-mobile-hello,
  .home-nav .burger-toggle { display: none !important; }
  /* === LAYOUT 2026-06-24 : disposition header desktop ===
     Gauche  : + Lancer mon event (-1) · panier (0) · briefcase (0) · camera (0)
     Centre  : logo Will (order: 1)
     Droite  : Mes photos (4) · avatar (5)
     "Hello prenom" retire du header desktop (deplace dans le burger
     drawer mobile uniquement). */

  /* Gap 8px entre tous les elements du container. Override le gap: 10px
     historique L2893. */
  .home-nav .container {
    gap: 8px;
  }

  /* + Lancer mon event : extreme gauche, rose #F4A6FF (validation PO
     2026-06-24 ; valeur token --orga-600 du repo). Hover plus fonce.
     Icone rocket alignee avec le label via inline-flex + gap. */
  .home-nav .nav-launch-event {
    order: -1 !important;
    margin-left: 0 !important; /* override margin-left: auto historique */
    background: #F4A6FF !important;
    color: #7B2FFF !important; /* user 2026-06-30 : texte + icone en violet WILL sur fond rose */
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .home-nav .nav-launch-event:hover {
    background: #E289F7 !important;
    color: #5B1FBF !important; /* hover : violet plus profond */
  }
  .home-nav .nav-launch-icon {
    flex: 0 0 auto;
    display: block;
  }

  /* Spacers auto : camera (dernier element gauche, dans wrapper
     .nav-icon-space-wrap qui est le vrai flex child du container) prend
     margin-right: auto. "Mes photos" (1er element droit, order: 4) prend
     margin-left: auto. Les 2 auto se partagent l espace restant -> logo
     equilibre au centre. */
  .home-nav .nav-icon-space-wrap {
    margin-right: auto !important;
  }
  .home-nav .nav-pill-photos {
    margin-left: auto;
  }

  /* Logged-out : .nav-pill-photos ET .nav-icon-space-wrap (camera) sont
     hidden -> les 2 spacers auto sont perdus. Compense :
     - margin-right: auto sur .nav-launch-event (dernier element gauche
       visible) pour pousser le logo vers le centre,
     - margin-left: auto sur .nav-pill-cart (premier element droit visible)
       pour pousser le cluster Connexion ghost a l extreme droite.
     Les 2 auto se partagent l espace -> logo au centre malgre l absence
     des icones briefcase/camera. */
  /* Cas runner-disconnected + has-any-login (orga ou photo connecte) :
     .nav-icon-space-wrap (camera) est VISIBLE et porte deja margin-right: auto.
     Si on ajoute margin-right: auto sur Lancer aussi, les 2 auto se
     partagent l espace -> Lancer reste a gauche mais camera/briefcase
     remontent vers le logo. On scope donc le margin-right: auto sur Lancer
     uniquement quand AUCUNE session n est active (pas runner, pas orga,
     pas photo) -> camera-wrap hidden, Lancer doit prendre le relais. */
  html:not(.will-runner-loggedin):not(.has-any-login) .home-nav .nav-launch-event {
    margin-right: auto !important;
  }
  html:not(.will-runner-loggedin) .home-nav .nav-pill-cart {
    margin-left: auto;
  }

  /* Panier desktop : 2026-06-24 deplace cote DROIT (logique "Utilisateur"
     a droite, "Organisation" a gauche). order: 5 -> juste apres
     Mes photos (order: 4), avant avatar (order: 6).
     Style cercle 36x36 #EDE7F8 + violet primary aligne sur .nav-icon-space
     (briefcase). Opacite 0.4 si cart vide, 1 si non-vide. */
  .home-nav .nav-pill-cart {
    display: inline-flex !important;
    order: 5;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #EDE7F8 !important;
    color: #7B2FFF !important;
    opacity: 0.4;
    transition: opacity 0.2s ease;
  }
  .will-has-cart .home-nav .nav-pill-cart {
    opacity: 1; /* cart non-vide -> pleine opacite */
  }
  .home-nav .nav-pill-cart .nav-pill-icon { display: block !important; width: 18px; height: 18px; }

  /* Briefcase + camera : gauche, apres + Lancer (-1) + panier (DOM order
     les met dans l ordre cart, briefcase, camera en source NAV_HTML). */
  .home-nav .nav-icon-orga,
  .home-nav .nav-icon-photo,
  .home-nav .nav-icon-space-wrap {
    order: 0;
  }

  /* Avatar slot-left : extreme droite, apres panier (order: 5). */
  .home-nav .auth-nav-slot-left {
    order: 6 !important;
  }

  /* "Hello prenom" retire du header desktop (encombrement, redondant
     avec l avatar visible). Reste visible mobile via burger drawer. */
  .home-nav .nav-welcome {
    display: none !important;
  }

  /* "Mes photos" desktop : lien texte simple (pattern .nav-pill-orga),
     positionne en order 4 (a gauche de l avatar slot-left maintenant
     en order 5). Background transparent, texte violet, hover violet-900.
     Icone SVG masquee (deja sous .nav-pill-icon { display: none !important }
     global desktop), label affiche. */
  .home-nav .nav-pill-photos {
    order: 4;
    flex: 0 0 auto;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
    padding: 0 20px !important;
    color: var(--violet-600) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-decoration: none;
    cursor: pointer;
  }
  .home-nav .nav-pill-photos:hover {
    color: var(--violet-900) !important;
    background: transparent !important;
  }
  .home-nav .nav-pill-photos .nav-pill-label { display: inline !important; font-size: 15px !important; font-weight: 500 !important; }
  .home-nav .nav-pill-photos .nav-pill-icon { display: none !important; }
  /* Switcher mode coureur/orga (C6 multi-roles) : visible si user a 2+
     roles. Pill compacte violet clair, dropdown au click. */
  .home-nav .nav-role-switcher {
    order: 3;
    flex: 0 0 auto;
    position: relative;
    margin-right: 10px;
  }
  .home-nav .nav-role-current {
    appearance: none;
    border: none;
    background: var(--violet-100, #EDE7FF);
    color: var(--violet-700, #5926D6);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 12px 7px 14px;
    border-radius: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.18s ease;
  }
  .home-nav .nav-role-current:hover { background: var(--violet-200, #DCD0FF); }
  .home-nav .nav-role-current[aria-expanded="true"] .nav-role-chevron { transform: rotate(180deg); }
  .home-nav .nav-role-chevron { transition: transform 0.18s ease; }
  .home-nav .nav-role-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    /* 1000 : doit gagner sur la grille events de la home qui cree son
       propre stacking context (sticky filtre + transform sur les cards). */
    z-index: 1000;
    background: #fff;
    border: 1px solid var(--violet-100, #EDE7FF);
    border-radius: 14px;
    padding: 6px;
    min-width: 180px;
    box-shadow: 0 8px 24px rgba(76, 15, 179, 0.12);
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .home-nav .nav-role-menu[hidden] { display: none; }
  .home-nav .nav-role-item {
    display: block;
    padding: 9px 12px;
    border-radius: 10px;
    color: var(--violet-900, #2F0E80);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.12s ease;
  }
  .home-nav .nav-role-item:hover { background: var(--violet-050, #F5F3FF); }
  .home-nav .nav-role-switcher[data-active-role="runner"] .nav-role-item[data-role="runner"],
  .home-nav .nav-role-switcher[data-active-role="organizer"] .nav-role-item[data-role="organizer"],
  .home-nav .nav-role-switcher[data-active-role="photographer"] .nav-role-item[data-role="photographer"] {
    background: var(--violet-100, #EDE7FF);
    color: var(--violet-700, #5926D6);
    font-weight: 700;
  }
  /* Items mode coureur/orga/photo avec coche ✓ a droite quand actifs. */
  .home-nav .nav-role-item {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .home-nav .nav-role-item-check {
    display: none;
    color: var(--violet-700, #5926D6);
    font-weight: 700;
    font-size: 13px;
  }
  .home-nav .nav-role-switcher[data-active-role="runner"] .nav-role-item[data-role="runner"] .nav-role-item-check,
  .home-nav .nav-role-switcher[data-active-role="organizer"] .nav-role-item[data-role="organizer"] .nav-role-item-check,
  .home-nav .nav-role-switcher[data-active-role="photographer"] .nav-role-item[data-role="photographer"] .nav-role-item-check {
    display: inline;
  }
  /* Separateur entre les 2 modes et "Mon compte". */
  .home-nav .nav-role-separator {
    height: 1px;
    background: rgba(123, 47, 255, 0.10);
    margin: 4px 4px;
  }
  /* "Mon compte" : bouton style comme un item de menu. */
  .home-nav .nav-role-item-account {
    background: transparent;
    border: none;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    width: 100%;
    color: var(--violet-900, #2F0E80);
  }
  .home-nav .nav-role-item-account:hover { background: var(--violet-050, #F5F3FF); }

  /* Pill 'Lancer mon event' a droite, entre la nav centre et l avatar/
     login. Visible sauf si user en mode espace orga (deja sur son event).
     Style aligne sur .auth-nav-login-pill : 32px height, 13px/700, padding
     0 14px, radius 999px. Couleur orga rose (--orga-600). */
  .home-nav .nav-launch-event {
    order: 3;
    flex: 0 0 auto;
    margin-left: auto;
    /* margin-right retire 2026-06-23 : le gap:10px du container assure
       maintenant l espace egal entre tous les elements du cluster droit. */
    appearance: none;
    border: none;
    cursor: pointer;
    /* 2026-06-22 : CTA repasse en violet primary plein (etait rose
       --orga-600 #F4A6FF, jugé peu lisible). */
    background: #7B2FFF;
    color: #fff;
    font-family: 'Montserrat', var(--font-body), system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    height: 36px;
    padding: 0 16px;
    border-radius: 999px;
    transition: background 0.18s ease, transform 0.12s ease;
  }
  .home-nav .nav-launch-event:hover {
    background: #5B1FBF;
    transform: translateY(-1px);
    text-decoration: none;
  }
  .home-nav .nav-launch-event:active { transform: scale(0.97); }
  /* 2026-06-22 : Launch event CTA visible aussi sur /orga et /photographe
     (nav unifie partout). Le contexte est rappele par le bandeau rose
     sous le nav. */

  /* 2026-06-22 PM : nav-welcome retire definitivement -> les overrides
     sur welcome + launch-event ne servent plus. Le launch-event garde
     son margin-left:auto pour tous les etats (push du cluster droit
     coherent : Lancer + pills + avatar). */
}
/* Hide en mobile (le burger gere les actions) + hide quand pas desktop. */
@media (max-width: 767px) {
  .home-nav .nav-launch-event { display: none; }
}

/* nav.top : z-index passe de 50 (will.css) a 60 pour gagner sur
   .events-toolbar de la home (z-index 50 sticky) sinon les dropdowns
   du header passent sous les filtres. */
nav.top.home-nav { z-index: 60; }

/* .auth-nav-account (wrapper de l avatar dans le nav) etait gere par
   will.css uniquement via .will-runner-loggedin. Or un user orga-only
   doit aussi voir l avatar. Override : show des qu il y a une session
   quelle qu elle soit (.has-any-login). */
html.has-any-login .home-nav .auth-nav-account { display: inline-block; }

/* =============================================================
   REFONTE HEADER 2026-06-22 PM — 6 etats
   - Bouton Connexion ghost (outline) au lieu de pill segmente
   - Avatar 36px violet primary avec initiale prenom blanche
   - Pill session photo single + multi
   - Switcher pill mode coureur/orga restyle
   - Suppression Hello {prenom} dans le nav
   ============================================================= */

/* HIDE par defaut tous les nouveaux elements conditionnels. Les classes
   .has-* sur <html> les revelent dans les bons etats. */
.home-nav .nav-photo-pill { display: none; }
.home-nav .nav-photo-multi { display: none; position: relative; }
.home-nav .nav-login-ghost { display: none; }
/* Icones space (orga + photo) : hidden par defaut, revelees par has-any-login */
.home-nav .nav-icon-space { display: none; }
.home-nav .nav-icon-space-wrap { display: none; position: relative; }
/* L avatar legacy : on le pilote via has-any-login (au lieu de
   .will-runner-loggedin) pour qu il apparaisse aussi en orga-only. */
.home-nav .auth-nav-slot-left { display: none; }

/* Etat des classes sur <html>. IMPORTANT : prefixer html: car ":not()"
   sans qualifier matche n importe quel ancetre sans la classe (et BODY
   n a jamais ces classes, faisant croire que :not(.has-any-login)
   matche meme quand html.has-any-login est present). */
/* Avatar = identite COUREUR. Visible uniquement si runner-loggedin
   (= l user a un compte personnel connecte). Si l user est connecte
   en orga ou photo SANS coureur, l avatar ne sert a rien : on montre
   plutot le bouton Connexion ghost pour qu il puisse se connecter
   en coureur. */
html:not(.will-runner-loggedin) .home-nav .nav-login-ghost { display: inline-flex; }
html.will-runner-loggedin .home-nav .auth-nav-slot-left { display: inline-flex; }
html.will-runner-loggedin .home-nav .nav-login-ghost { display: none; }
/* Icones space visibles des qu il y a une session quelconque. */
html.has-any-login .home-nav .nav-icon-orga { display: inline-flex; }
html.has-any-login .home-nav .nav-icon-space-wrap { display: inline-flex; }
html.has-any-login .home-nav .nav-icon-photo { display: inline-flex; }

/* Hello {prenom} retire definitivement du nav (le prenom apparait
   maintenant dans le modal Mon compte, pas dans le header). */
.home-nav .nav-welcome { display: none !important; }
.home-nav .nav-welcome-hello { display: none !important; }

/* === Bouton Connexion ghost === */
.home-nav .nav-login-ghost {
  appearance: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  height: 36px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid #7B2FFF;
  background: transparent;
  color: #7B2FFF;
  cursor: pointer;
  align-items: center;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.home-nav .nav-login-ghost:hover {
  background: #F5F3FA;
}

/* === Avatar 36px violet plein avec initiale === */
.home-nav .auth-nav-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #7B2FFF !important;
  color: #fff !important;
  border: none !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  position: relative;
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.home-nav .auth-nav-avatar:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(123, 47, 255, 0.30);
}
.home-nav .nav-avatar-initial {
  font-family: 'Montserrat', var(--font-body), system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0;
  line-height: 1;
}
/* SVG fallback affichee uniquement si pas d initiale */
.home-nav .nav-avatar-fallback-icon { display: none; }
html:not(.has-avatar-initial) .home-nav .nav-avatar-fallback-icon { display: block; }
html.has-avatar-initial .home-nav .nav-avatar-fallback-icon { display: none; }
html.has-avatar-initial .home-nav .nav-avatar-initial { display: inline-flex; align-items: center; justify-content: center; }
html:not(.has-avatar-initial) .home-nav .nav-avatar-initial { display: none; }

/* === Pill session photo single === */
.home-nav .nav-photo-pill {
  display: none;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: #F5F3FA;
  color: #7B2FFF;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  flex-shrink: 0;
  transition: background 0.15s ease;
  max-width: 240px;
}
.has-photo-1 .home-nav .nav-photo-pill { display: inline-flex; }
.home-nav .nav-photo-pill:hover { background: #EDE7F8; text-decoration: none; }
.home-nav .nav-photo-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}

/* === Pill session photo multi (dropdown) === */
.home-nav .nav-photo-multi-btn {
  appearance: none;
  border: none;
  background: #F5F3FA;
  color: #7B2FFF;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s ease;
}
.home-nav .nav-photo-multi-btn:hover { background: #EDE7F8; }
.home-nav .nav-photo-multi-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 200;
  min-width: 240px;
  background: #fff;
  border: 1px solid var(--violet-100, #EDE7FF);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 12px 32px rgba(76, 15, 179, 0.15);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.home-nav .nav-photo-multi-menu[hidden] { display: none; }
.home-nav .nav-photo-multi-menu a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.12s ease;
}
.home-nav .nav-photo-multi-menu a:hover { background: #F5F3FA; }
.home-nav .nav-photo-multi-item-name {
  font-size: 13px;
  font-weight: 500;
  color: #7B2FFF;
}
.home-nav .nav-photo-multi-item-sub {
  font-size: 11px;
  color: #A89CB8;
}

/* === Switcher mode coureur/orga restyle === */
.has-multi-role .home-nav .nav-role-switcher {
  flex: 0 0 auto;
  position: relative;
  margin-right: 0;
}
.has-multi-role .home-nav .nav-role-current {
  appearance: none;
  border: none;
  background: #F5F3FA;
  color: #7B2FFF;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s ease;
}
.has-multi-role .home-nav .nav-role-current:hover { background: #EDE7F8; }
.has-multi-role .home-nav .nav-role-chevron { width: 10px; height: 10px; }

/* Cluster order — desktop only (display:contents repartit les enfants
   directement). Ordre lecture LTR : Logo, Switcher, Photo, CTA, Cart, Avatar/Ghost */
@media (min-width: 768px) {
  .home-nav .nav-photo-pill,
  .home-nav .nav-photo-multi {
    order: 3;
    flex: 0 0 auto;
  }
  .home-nav .nav-login-ghost {
    order: 5;
    flex: 0 0 auto;
  }
  /* Switcher pousse a droite pour amorcer le cluster (porte le margin-left:auto
     quand multi-role, sinon c est launch-event qui l a). */
  .has-multi-role .home-nav .nav-role-switcher {
    order: 3;
    margin-left: auto;
  }
  .has-multi-role .home-nav .nav-launch-event {
    margin-left: 0;
  }
}

/* Mobile : pas de switcher / photo pill / login-ghost dans le header
   (le burger drawer prend le relais). */
@media (max-width: 767px) {
  .home-nav .nav-photo-pill,
  .home-nav .nav-photo-multi,
  .home-nav .nav-role-switcher,
  .home-nav .nav-login-ghost { display: none !important; }
}

/* === Icones space (briefcase orga + camera photo) === */
.home-nav .nav-icon-space {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  /* Bg legerement plus marque que #F5F3FA pour ressortir sur la page
     d accueil dont le bg est aussi violet pale. */
  background: #EDE7F8;
  color: #7B2FFF;
  border: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
  padding: 0;
}
.home-nav .nav-icon-space:hover {
  background: #DDD3FF;
  transform: translateY(-1px);
}
/* Etat ACTIF : background violet primary + icone blanche. */
html.has-orga-active .home-nav .nav-icon-orga {
  background: #7B2FFF;
  color: #fff;
}
html.has-orga-active .home-nav .nav-icon-orga:hover { background: #6B25E0; }
html.has-photo-active .home-nav .nav-icon-photo {
  background: #7B2FFF;
  color: #fff;
}
html.has-photo-active .home-nav .nav-icon-photo:hover { background: #6B25E0; }

/* Badge numerique sur icone photo quand >= 2 sessions. */
.home-nav .nav-icon-space-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  display: none;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  background: #fff;
  color: #7B2FFF;
  border: 1.5px solid #7B2FFF;
  border-radius: 999px;
  font-family: 'Montserrat', var(--font-body), system-ui, sans-serif;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  align-items: center;
  justify-content: center;
}
html.has-photo-many .home-nav .nav-icon-space-badge { display: inline-flex; }

/* Dropdown multi-photo (reutilise le styling .nav-photo-multi-menu mais
   on cible nav-icon-space-menu via le data-photo-menu commun). */
.home-nav .nav-icon-space-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1000;
  min-width: 240px;
  background: #fff;
  border: 1px solid var(--violet-100, #EDE7FF);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 12px 32px rgba(76, 15, 179, 0.15);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.home-nav .nav-icon-space-menu[hidden] { display: none; }
.home-nav .nav-icon-space-menu a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.12s ease;
}
.home-nav .nav-icon-space-menu a:hover { background: #F5F3FA; }
.home-nav .nav-icon-space-menu .nav-photo-multi-item-name {
  font-size: 13px;
  font-weight: 500;
  color: #7B2FFF;
}
.home-nav .nav-icon-space-menu .nav-photo-multi-item-sub {
  font-size: 11px;
  color: #A89CB8;
}

/* Order desktop des icones : 2026-06-24 refonte layout
   gauche (Lancer/panier/briefcase/camera) | logo | droite (Mes photos/avatar).
   Briefcase + camera passent en order: 0 (gauche, apres Lancer et cart),
   margin-left: auto retire (le cluster droit est positionne via order 4-5). */
@media (min-width: 768px) {
  .home-nav .nav-icon-orga,
  .home-nav .nav-icon-space-wrap {
    order: 0;
    flex: 0 0 auto;
  }
  html.has-any-login .home-nav .nav-icon-orga {
    margin-left: 0; /* retire le push qui poussait tout a droite */
  }
  html.has-any-login .home-nav .nav-launch-event {
    margin-left: 0;
  }
}

/* Mobile : pas d icones space dans le header (la nav burger drawer prend
   le relais). */
@media (max-width: 767px) {
  .home-nav .nav-icon-orga,
  .home-nav .nav-icon-space-wrap { display: none !important; }
}

/* === Card "Devenir photographe d un event" dans le modal Mon compte === */
.profile-card-become-photo {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: #F5F3FA;
  border: none;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 0 0 16px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.15s ease;
}
.profile-card-become-photo:hover { background: #EDE7F8; }
.profile-card-become-photo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(123, 47, 255, 0.10);
  color: #7B2FFF;
  flex-shrink: 0;
}
.profile-card-become-photo-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.profile-card-become-photo-title {
  font-size: 13px;
  font-weight: 500;
  color: #7B2FFF;
}
.profile-card-become-photo-sub {
  font-size: 11px;
  color: #A89CB8;
}

/* ============================================================
   PROFILE MODAL V2 — refonte 2026-06-23
   Spec : HEADER_STATE_MATRIX.md + brief user.
   Header AVEstiana, card Selfie violet gradient (element phare),
   card infos Montserrat, hierarchie inversee des actions destructives.
   ============================================================ */

/* Modal wrapper (override la base .profile-sheet) */
.profile-sheet.profile-sheet-v2 {
  /* Compact 460px desktop. Centre, pas bottom-sheet. */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -45%) scale(0.96);
  width: calc(100vw - 32px);
  max-width: 460px;
  max-height: calc(100vh - 48px);
  overflow: hidden;
  background: #FFFFFF;
  border-radius: 24px;
  box-shadow: 0 8px 40px rgba(20, 16, 32, 0.08);
  padding: 0;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1);
  /* Backdrop est a z-index 1090 -> on doit etre au-dessus pour ne pas
     subir son blur. */
  z-index: 1100;
}
.profile-sheet.profile-sheet-v2.is-open {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
@media (max-width: 480px) {
  .profile-sheet.profile-sheet-v2 {
    max-width: 100%;
    width: 100%;
    bottom: 0;
    /* top reserve sous barre Safari iOS / Dynamic Island + marge 40 px.
       Avant : top:auto + max-height:92vh laissait la sheet partir du bas
       jusqu a 92% de la viewport, ce qui coupait l en-tete sous l UI
       navigateur (cas signale 2026-06-27 sur iPhone Pro). */
    top: calc(40px + env(safe-area-inset-top, 0));
    left: 0;
    border-radius: 24px 24px 0 0;
    transform: translateY(100%);
    transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1);
    max-height: calc(100dvh - 40px - env(safe-area-inset-top, 0));
  }
  @supports not (height: 100dvh) {
    .profile-sheet.profile-sheet-v2 {
      max-height: calc(100vh - 40px - env(safe-area-inset-top, 0));
    }
  }
  .profile-sheet.profile-sheet-v2.is-open {
    transform: translateY(0);
  }
  /* profile-sheet-scroll override : prend la vraie max-height de la
     sheet parente (sinon le calc(100vh - 48px) heritage desktop ne
     correspond plus a la zone visible). Padding-bottom inclut
     safe-area-inset-bottom (~34 px sur iPhone Pro avec home indicator)
     pour que le bas du contenu (boutons "Se deconnecter", "Supprimer
     mon compte") ne soit pas recouvert par le home indicator. La sheet
     reste collee a bottom:0 visuellement, le padding est dans le
     scroll. */
  .profile-sheet.profile-sheet-v2 .profile-sheet-scroll {
    max-height: calc(100dvh - 40px - env(safe-area-inset-top, 0));
    padding: 28px 24px calc(28px + env(safe-area-inset-bottom, 0));
  }
  @supports not (height: 100dvh) {
    .profile-sheet.profile-sheet-v2 .profile-sheet-scroll {
      max-height: calc(100vh - 40px - env(safe-area-inset-top, 0));
    }
  }
}

/* Backdrop frosted glass (memes specs que les autres modals) */
.profile-sheet-v2 ~ .profile-sheet-backdrop,
.profile-sheet-backdrop {
  /* Le modal v2 reutilise le backdrop existant ; on s assure du blur. */
}

.profile-sheet.profile-sheet-v2 .profile-sheet-scroll {
  padding: 28px 24px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  /* Cache la scrollbar (visuel propre, scroll reste fonctionnel) */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.profile-sheet.profile-sheet-v2 .profile-sheet-scroll::-webkit-scrollbar { display: none; width: 0; }

/* HEADER : icon Will + Hello Geoffrey + X close */
.profile-v2-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.profile-v2-header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
}
.profile-v2-title {
  flex: 1;
  margin: 0;
  font-family: 'AV Estiana', 'AVEstiana', Georgia, serif;
  font-style: italic;
  font-size: 28px;
  font-weight: 400;
  color: #7B2FFF;
  letter-spacing: -0.3px;
  line-height: 1.1;
}
.profile-v2-title [data-account-firstname] {
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit;
}
.profile-v2-close {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: #A89CB8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.15s ease;
}
.profile-v2-close:hover { color: #7B2FFF; }
.profile-v2-close svg { width: 20px; height: 20px; display: block; }

/* CARD SELFIE — element phare, violet gradient */
.profile-sheet-v2 .profile-v2-selfie {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, #7B2FFF 0%, #6B25E0 100%);
  border-radius: 18px;
  padding: 20px 18px;
  margin-bottom: 16px;
  border: none;
  /* Override des styles legacy .profile-card-selfie */
  flex-direction: row;
  text-align: left;
}
.profile-sheet-v2 .profile-v2-selfie-thumb {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #C9B8F0 0%, #A89CB8 100%);
  border: 3px solid #00E676;
  padding: 2px;
  flex-shrink: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s ease;
  /* Reset de tout style heritage */
  appearance: none;
}
.profile-sheet-v2 .profile-v2-selfie-thumb:hover { transform: scale(1.04); }
/* Selfie thumb : single img (will-auth-nav.js#fetchSelfie est le seul
   inserteur depuis 2026-06-23). Image absolute inset 0 pour gagner sur
   le span initial + svg fallback en frere, object-fit cover remplit le
   cercle. !important pour battre les regles legacy de .auth-nav-avatar-img.
   Override toutes les variantes de img dans le thumb. */
.profile-sheet-v2 .profile-v2-selfie-thumb img,
.profile-sheet-v2 .profile-v2-selfie-thumb img.auth-nav-avatar-img,
.profile-sheet-v2 .profile-v2-selfie-thumb img.profile-selfie-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center center !important;
  border: none !important;
  display: block !important;
  z-index: 2 !important;
}
/* Si applySelfieToProfileThumb a laisse une img.profile-selfie-img dans
   le DOM legacy, on la cache si auth-nav-avatar-img coexiste. */
.profile-sheet-v2 .profile-v2-selfie-thumb img.auth-nav-avatar-img ~ img.profile-selfie-img {
  display: none !important;
}
.profile-sheet-v2 .profile-v2-selfie-initial {
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 500;
  color: #fff;
  pointer-events: none;
  z-index: 1;
}
.profile-sheet-v2 .profile-v2-selfie-fallback {
  width: 28px;
  height: 26px;
  color: #fff;
  display: none;
  z-index: 1;
}
/* Si pas d initiale ET pas de selfie : affiche le svg silhouette. */
html:not(.has-avatar-initial):not(.will-has-selfie) .profile-sheet-v2 .profile-v2-selfie-fallback {
  display: block;
}
html:not(.has-avatar-initial):not(.will-has-selfie) .profile-sheet-v2 .profile-v2-selfie-initial {
  display: none;
}
/* L initiale reste TOUJOURS visible si has-avatar-initial (z-index 1).
   Quand l img selfie charge (z-index 2), elle cover. Si l img echoue
   (CORS, broken URL), on voit l initiale en fallback gracieux au lieu
   d un cercle vide. */
.profile-sheet-v2 .profile-v2-selfie-text {
  flex: 1;
  min-width: 0;
}
.profile-sheet-v2 .profile-v2-selfie-title {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
}
.profile-sheet-v2 .profile-v2-selfie-title svg {
  opacity: 0.9;
  color: #fff;
  flex-shrink: 0;
}
.profile-sheet-v2 .profile-v2-selfie-sub {
  color: #fff;
  opacity: 0.85;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 400;
  margin-top: 2px;
}
.profile-sheet-v2 .profile-v2-selfie-action {
  appearance: none;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #fff;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.profile-sheet-v2 .profile-v2-selfie-action:hover {
  background: rgba(255, 255, 255, 0.3);
}
/* Wrapper 2 boutons : "Reprendre" + "Supprimer" empiles verticalement
   a droite. Garde le layout horizontal initial (thumb / text / actions),
   l empilement vertical des actions est cote group seulement. */
.profile-sheet-v2 .profile-v2-selfie-actions-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
/* Bouton "Supprimer" : meme forme que "Reprendre" mais teinte rouge
   subtile pour distinguer une action destructive sans crier. */
.profile-sheet-v2 .profile-v2-selfie-action-delete {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.92);
}
.profile-sheet-v2 .profile-v2-selfie-action-delete:hover {
  background: rgba(255, 80, 80, 0.4);
}

/* CARD INFOS — Montserrat, separateurs subtils */
.profile-sheet-v2 .profile-v2-infos {
  background: #F5F3FA;
  border-radius: 18px;
  padding: 20px 18px;
  margin-bottom: 24px;
  border: none;
}
.profile-sheet-v2 .profile-v2-info-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  border: none;
  background: transparent;
}
.profile-sheet-v2 .profile-v2-info-label {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  /* 2026-06-23 : violet leger (etait gris #A89CB8) */
  color: #C9B8F0;
  margin: 0;
}
.profile-sheet-v2 .profile-v2-info-val {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 15px;
  /* 2026-06-23 : Medium (font-weight 500) */
  font-weight: 500;
  color: #1A1A1A;
  word-break: break-word;
}
.profile-sheet-v2 .profile-v2-info-sep {
  height: 1px;
  background: rgba(168, 156, 184, 0.2);
  margin: 14px 0;
}

/* Lien "Modifier mes infos" — centre, sans soulignement */
.profile-sheet-v2 .profile-v2-link-edit {
  display: block;
  width: 100%;
  text-align: center;
  background: transparent;
  border: none;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #7B2FFF;
  cursor: pointer;
  padding: 6px;
  text-decoration: none;
  margin-bottom: 24px;
}
.profile-sheet-v2 .profile-v2-link-edit:hover { opacity: 0.85; }

/* Card edit (mode edition) - reuse base avec tweaks v2 */
.profile-sheet-v2 .profile-v2-card-edit {
  background: #F5F3FA;
  border-radius: 18px;
  padding: 20px 18px;
  margin-bottom: 24px;
}

/* Separateur interne avant les actions destructives */
.profile-sheet-v2 .profile-v2-divider {
  height: 1px;
  background: #F5F3FA;
  margin: 0 -24px 18px;
}

/* Actions destructives — hierarchie inversee (deconnexion la moins alarmante) */
.profile-sheet-v2 .profile-v2-action {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  font-family: 'Montserrat', system-ui, sans-serif;
  text-align: center;
  cursor: pointer;
  /* 2026-06-23 : reduit padding + margin pour rapprocher les 3 liens */
  padding: 4px;
  text-decoration: none;
  margin-bottom: 4px;
  transition: opacity 0.15s ease;
}
.profile-sheet-v2 .profile-v2-action:hover { opacity: 0.8; }
.profile-sheet-v2 .profile-v2-action-logout {
  font-size: 14px;
  color: #1A1A1A;
  font-weight: 400;
}
.profile-sheet-v2 .profile-v2-action-face {
  font-size: 13px;
  color: #A89CB8;
  font-weight: 400;
}
.profile-sheet-v2 .profile-v2-action-account {
  font-size: 13px;
  color: #C5475E;
  font-weight: 400;
  margin-bottom: 0;
}

/* Hide le bouton legacy .profile-sheet-close (header v2 a son propre X) */
.profile-sheet-v2 .profile-sheet-close { display: none; }
/* Hide aussi le greeting legacy (header v2 a son propre titre) */
.profile-sheet-v2 .profile-sheet-greeting { display: none; }

/* Mot de passe : valeur masquee en colonne (memes styles que les autres
   info-rows). Le bouton "Changer le mot de passe" est exposed dans la
   card edit ("Modifier mes infos"), pas inline. */
.profile-sheet-v2 .profile-v2-info-val-pwd {
  letter-spacing: 4px;
  font-weight: 600;
}

/* Mot de passe : ligne en lecture seule dans la card edit (valeur
   masquee + lien "Changer le mot de passe" a droite). Garde la coherence
   visuelle avec les autres champs (label en haut + zone valeur en bas). */
.profile-sheet-v2 .profile-edit-field-pwd { margin-bottom: 8px; }
.profile-sheet-v2 .profile-edit-pwd-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: #FFFFFF;
  border: 1px solid rgba(168, 156, 184, 0.3);
  border-radius: 12px;
}
.profile-sheet-v2 .profile-edit-pwd-masked {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #1A1A1A;
  letter-spacing: 4px;
}
.profile-sheet-v2 .profile-edit-change-pwd {
  background: transparent;
  border: none;
  padding: 0;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #7B2FFF;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.profile-sheet-v2 .profile-edit-change-pwd:hover { opacity: 0.85; }

/* Sub-modal Change Password (coureur). Reutilise les styles profile-sheet-v2
   pour rester coherent visuellement avec le profile-modal parent. */
.change-pwd-modal {
  max-width: 380px;
}
.change-pwd-modal #change-pwd-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
}
.change-pwd-modal .spaces-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.change-pwd-modal .spaces-label > span {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #C9B8F0;
}
.change-pwd-modal .spaces-label input {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  padding: 12px 14px;
  border: 1px solid rgba(168, 156, 184, 0.3);
  border-radius: 12px;
  background: #FFFFFF;
  color: #1A1A1A;
  outline: none;
  transition: border-color 0.15s;
}
.change-pwd-modal .spaces-label input:focus {
  border-color: #7B2FFF;
}
.change-pwd-modal .change-pwd-forgot {
  align-self: flex-start;
  background: transparent;
  border: none;
  padding: 0;
  margin: -6px 0 0;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #7B2FFF;
  cursor: pointer;
  text-decoration: none;
}
.change-pwd-modal .change-pwd-forgot:hover { opacity: 0.85; }
.change-pwd-modal .spaces-form-error {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 13px;
  color: #C5475E;
  margin: 4px 0 0;
}
.change-pwd-modal .change-pwd-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}
.change-pwd-modal .change-pwd-cancel {
  background: transparent;
  border: none;
  padding: 8px 4px;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #1A1A1A;
  cursor: pointer;
  text-decoration: none;
}
.change-pwd-modal .change-pwd-cancel:hover { opacity: 0.85; }
.change-pwd-modal .change-pwd-save {
  background: #7B2FFF;
  border: none;
  padding: 12px 22px;
  border-radius: 12px;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #FFFFFF;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
.change-pwd-modal .change-pwd-save:hover { background: #6B25E0; }
.change-pwd-modal .change-pwd-save:disabled { opacity: 0.7; cursor: default; }
/* z-index au dessus du profile-modal parent (1100) */
#change-pwd-modal { z-index: 1200; }
#change-pwd-modal-backdrop {
  z-index: 1190;
  background: rgba(20, 16, 32, 0.4);
  position: fixed;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s;
}
#change-pwd-modal-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}