/* Sejoly — styles alignés sur les Fondations Figma (Tokens Inter + palette primary/secondary/neutral) */

/* -------- Typography -------- */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* Brand / Primary (orange/coral) */
  --primary-100: #FFEDE5;
  --primary-500: #FF7E43;
  --primary-700: #E85D1F;
  /* Brand / Secondary (vert foncé) */
  --secondary-100: #E0F2EF;
  --secondary-500: #086958;
  --secondary-700: #064C3F;
  /* Neutral */
  --neutral-0: #FFFFFF;
  --neutral-50: #F3F2ED;   /* fond principal */
  --neutral-100: #F2F1F2;
  --neutral-200: #EDEDED;  /* borders */
  --neutral-800: #6A6A6A;  /* text secondary */
  --neutral-900: #222222;  /* text primary */
  /* Semantic */
  --success-500: #2E7D32;
  --success-100: #E8F5E9;
  --warning-500: #ED6C02;
  --warning-100: #FFF3E0;
  --error-500: #D32F2F;
  --error-100: #FFEBEE;
  --info-500: #0288D1;
  --info-100: #E1F5FE;
  /* Gradient brand (logo / hero) */
  --gradient-1: linear-gradient(135deg, #FF7E43 0%, #FFEDE5 100%);
  --gradient-2: linear-gradient(180deg, #FF9A6D 0%, #FF7E43 100%);
}

/* Reset de base */
* { -webkit-tap-highlight-color: transparent; }
html {
  scrollbar-gutter: stable;  /* évite le shift horizontal quand une page passe de no-scroll à scroll */
}
html, body {
  background: var(--neutral-0);
  color: var(--neutral-900);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* -------- Text styles (match Figma) -------- */
.h1 { font-size: 28px; line-height: 32px; font-weight: 700; letter-spacing: -0.01em; }
.h2 { font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: -0.01em; }
.h3 { font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -0.01em; }
.body { font-size: 16px; line-height: 24px; font-weight: 400; }
.body-md { font-size: 16px; line-height: 24px; font-weight: 500; }
.body-strong { font-size: 16px; line-height: 24px; font-weight: 700; }
.label-nav { font-size: 10px; line-height: 12px; font-weight: 600; }
.label-btn { font-size: 16px; line-height: 24px; font-weight: 600; }
.label-btn-sm { font-size: 13px; line-height: 16px; font-weight: 600; }
.caption { font-size: 13px; line-height: 20px; font-weight: 400; color: var(--neutral-800); }
.caption-md { font-size: 13px; line-height: 20px; font-weight: 500; color: var(--neutral-800); }
.overline { font-size: 10px; line-height: 14px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--neutral-800); }

/* -------- Shell -------- */
.app-shell {
  max-width: 440px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--neutral-0);
  position: relative;
  padding-bottom: 96px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: saturate(1.4) blur(10px);
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid var(--neutral-200);
  padding: 12px 14px;
  min-height: 56px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
/* Topbar transparente (sur la Home, au-dessus de la vidéo) */
.topbar.is-transparent {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
}
.topbar.is-transparent .tb-logo {
  filter: brightness(0) invert(1);
  transition: filter .25s ease;
}
.topbar.is-transparent .tb-title {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.topbar.is-transparent .tb-back,
.topbar.is-transparent .tb-close {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.35);
  color: #fff;
  backdrop-filter: blur(8px);
}
.topbar.is-transparent .lang-select { color: #fff; }
.topbar.is-transparent .lang-select .caret { border-top-color: #fff; }
.topbar .tb-logo, .topbar .tb-title, .topbar .lang-select, .topbar .lang-select .caret {
  transition: color .25s ease, filter .25s ease, background-color .25s ease, border-color .25s ease;
}
.topbar .tb-left { display: flex; align-items: center; gap: 10px; min-width: 0; justify-self: start; }
.topbar .tb-right { justify-self: end; }
.topbar .tb-center { justify-self: center; text-align: center; min-width: 0; padding: 0 6px; }
.topbar .tb-logo { height: 30px; width: auto; flex-shrink: 0; }
.topbar .tb-title { font-size: 15px; font-weight: 700; color: var(--neutral-900); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Bouton back : pill avec "← Retour" */
.tb-back {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 14px 0 10px;
  background: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  border-radius: 999px;
  color: var(--neutral-900);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
  cursor: pointer;
  transition: background-color .15s ease;
}
.tb-back .i { flex-shrink: 0; }
.tb-back:hover { background: var(--neutral-50); }
.tb-back:active { background: var(--neutral-100); }

/* Bouton close rond (X) — utilisable dans topbar ET dans les modales */
.tb-close {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  border-radius: 50%;
  color: var(--neutral-900);
  flex-shrink: 0;
  cursor: pointer;
  transition: background-color .15s ease;
}
.tb-close:hover { background: var(--neutral-50); }
.tb-close:active { background: var(--neutral-100); }

/* Lang selector — flag nu + petit triangle, pas de container */
.lang-select {
  background: transparent;
  border: 0;
  padding: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-900);
  position: relative;
  cursor: pointer;
}
.lang-select .flag { width: 26px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; border-radius: 3px; }
.lang-select .flag img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lang-select .caret {
  display: inline-block;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--neutral-800);
  transition: transform .2s ease;
  margin-right: 2px;
}
.lang-select.open .caret { transform: rotate(180deg); }
.lang-wrap { position: relative; }
.lang-menu {
  position: absolute;
  top: calc(100% + 4px); right: 0;
  background: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  border-radius: 14px;
  padding: 6px;
  min-width: 170px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
  z-index: 40;
  animation: langMenuOpen .18s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform-origin: top right;
}
@keyframes langMenuOpen {
  from { opacity: 0; transform: translateY(-4px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.lang-menu button { width: 100%; padding: 10px 12px; border-radius: 10px; display: flex; gap: 10px; align-items: center; font-size: 13px; font-weight: 500; background: transparent; border: 0; color: var(--neutral-900); cursor: pointer; font-family: inherit; }
.lang-menu button:hover { background: var(--neutral-50); }

/* -------- Tabbar -------- */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 440px;
  background: var(--neutral-0);
  border-top: 1px solid var(--neutral-200);
  padding: 8px 4px calc(10px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  z-index: 40;
}
.tabbar button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
  color: var(--neutral-800);
  background: transparent;
  border: 0;
}
.tabbar button[aria-current="page"] { color: var(--primary-500); }
.tabbar .label-nav { margin-top: 2px; }

/* Burger menu qui se transforme en X (animation : rotation globale + barres qui se joignent) */
.burger-icon {
  width: 22px; height: 22px;
  display: block;
  color: currentColor;
  transition: transform .5s cubic-bezier(0.68, -0.15, 0.27, 1.35);
}
.burger-icon.is-open { transform: rotate(180deg); }
/* Utilise des <rect> au lieu de <line> : fill-box a une vraie bounding box,
   donc rotate(center) fonctionne correctement et les 3 barres convergent pile au centre. */
.burger-icon rect {
  fill: currentColor;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .5s cubic-bezier(0.68, -0.15, 0.27, 1.35), opacity .25s ease;
}
.burger-icon.is-open .bar-1 { transform: translateY(5px) rotate(45deg); }
.burger-icon.is-open .bar-2 { opacity: 0; transform: scaleX(0); }
.burger-icon.is-open .bar-3 { transform: translateY(-5px) rotate(-45deg); }

/* Fade-in léger sur chaque changement de page (évite le "blink" de swap DOM) */
.page-fade-in { animation: pageFadeIn .22s ease-out; }
@keyframes pageFadeIn { from { opacity: 0 } to { opacity: 1 } }

/* Animation d'entrée / sortie de la page Menu (bottom ↔ top) */
.page-menu-enter {
  animation: menuSlideUp .45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.page-menu-exit {
  animation: menuSlideDown .3s cubic-bezier(0.55, 0, 0.2, 1) forwards;
}
@keyframes menuSlideUp {
  0%   { transform: translateY(40px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}
@keyframes menuSlideDown {
  0%   { transform: translateY(0);    opacity: 1; }
  100% { transform: translateY(40px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .page-menu-enter, .page-menu-exit { animation: none; }
}

/* -------- FAB SOS (discret) --------
   Petit bouton d'aide d'urgence, neutre par défaut, on révèle le sens urgence
   uniquement par l'icône "phone" + un léger accent rouge discret au survol/press.
*/
.fab-sos {
  position: fixed;
  right: 16px;
  bottom: 90px;
  z-index: 45;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--neutral-900);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  opacity: 0.92;
  transition: opacity .2s ease, transform .15s ease, background-color .2s ease;
}
.fab-sos:hover { opacity: 1; transform: translateY(-1px); }
.fab-sos:active { transform: scale(0.96); }
.fab-sos .i { color: #fff; width: 20px; height: 20px; }
@media (min-width: 441px) { .fab-sos { right: calc(50vw - 220px + 16px); } }

/* -------- Icon helper (mask-image) -------- */
.i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: currentColor;
}
.i svg { width: 100%; height: 100%; display: block; color: currentColor; }
.i svg path[fill="currentColor"] { fill-rule: evenodd; }
.i svg path[stroke] { stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.i-xs { width: 12px; height: 12px; }
.i-sm { width: 16px; height: 16px; }
.i-md { width: 20px; height: 20px; }
.i-lg { width: 24px; height: 24px; }
.i-xl { width: 32px; height: 32px; }

/* Brand / flag images (multi-color) */
.ib {
  width: 20px; height: 20px; flex-shrink: 0;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  display: inline-block;
}
.ib-lg { width: 24px; height: 24px; }

/* -------- Composants -------- */

/* Page structure */
.page-head { padding: 20px 20px 8px; }
.page-body { padding: 0 20px 32px; }

/* Card générique */
.card {
  background: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  border-radius: 16px;
}

/* Page Espaces (Pièce par pièce) : fond crème léger, cartes blanches sans contour.
   Crème = l'ivoire profond de la marque (le neutral-50 se confond avec le blanc à l'écran). */
body.espaces-bg { background: #FAF7EA; }
.espaces-bg .app-shell { background: #FAF7EA; } /* la coquille peint son propre fond par-dessus le body */
.espaces-bg .card { border: none; }

/* Hero media (photo ou vidéo) */
.media-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--neutral-0);
  background-image: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 55%, var(--secondary-500) 120%);
}
/* Home : la vidéo remonte sous la topbar transparente */
.media-hero.overlap-topbar {
  margin-top: -72px;
}
/* Gradient dégradé haut (sombre) pour assurer la lisibilité de la topbar transparente */
.media-hero.has-topbar-overlay::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 160px;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 50%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}
.media-hero > video,
.media-hero > img.hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}
/* Gradient de fondu : transparent en haut → blanc (couleur de fond) en bas */
.media-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 70%;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 55%, var(--neutral-0) 100%);
  z-index: 1;
  pointer-events: none;
}
/* Variante texte clair (pour pages de pièces sur photo sombre) */
.media-hero.hero-dark::after {
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.55));
}
.media-hero .hero-caption { position: absolute; left: 20px; right: 20px; bottom: 22px; color: var(--neutral-900); z-index: 2; text-align: center; }
.media-hero.hero-dark .hero-caption { color: #fff; }
.media-hero .hero-sub { font-size: 13px; line-height: 18px; color: var(--neutral-800); margin-top: 4px; }
.media-hero.hero-dark .hero-sub { color: rgba(255,255,255,0.9); }
.media-hero .hero-play {
  position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 3;
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(0,0,0,0.4); color: #fff; border: 0;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(10px);
  transition: opacity .2s ease;
}
.media-hero .hero-play.hidden { opacity: 0; pointer-events: none; }

/* Carrousel photos (pages pièces) — scroll horizontal natif avec snap */
.media-hero .carousel-track {
  position: absolute; inset: 0;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  z-index: 0;
  cursor: grab;
}
/* Pendant un drag souris : snap désactivé (sinon il bloque le déplacement) */
.media-hero .carousel-track.dragging {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}
.media-hero .carousel-track::-webkit-scrollbar { display: none; }
.media-hero .carousel-slide {
  flex: 0 0 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  scroll-snap-align: start;
}
.media-hero .carousel-slide.single { position: absolute; inset: 0; }
.media-hero .carousel-slide video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Dots dans le bloc titre (hero-caption), juste au-dessus du titre */
.carousel-dots {
  display: flex; justify-content: center; gap: 6px;
  margin-bottom: 10px;
}
.carousel-dots .dot {
  width: 7px; height: 7px;
  border-radius: 999px; border: 0; padding: 0;
  background: rgba(34, 34, 34, 0.25);
  transition: width .2s ease, background .2s ease;
  cursor: pointer;
}
.carousel-dots .dot.active { background: var(--neutral-900); width: 18px; }
@media (prefers-reduced-motion: reduce) {
  .carousel-dots .dot { transition: none; }
}

/* Premiers pas pill */
.step-pill {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 4px 0; text-align: center;
}
.step-pill .bubble {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--neutral-900); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.step-pill .lbl { font-size: 12px; font-weight: 500; color: var(--neutral-900); line-height: 14px; }

/* Contact card (inspired by Figma Maïli card) */
.contact-card {
  background: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  border-radius: 16px;
  padding: 14px 14px 14px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
}
.contact-card .photo {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--gradient-1);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 24px;
  background-size: cover; background-position: center;
}
.contact-card .photo.img { background-image: var(--photo); }
.contact-card .photo .initial { mix-blend-mode: normal; }
.contact-card .role { font-size: 12px; color: var(--neutral-800); line-height: 16px; }
.contact-card .name { font-size: 15px; font-weight: 600; line-height: 20px; color: var(--neutral-900); }

/* Airbnb row — taille cohérente avec la photo des contacts (72px) */
.airbnb-row {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 16px 14px 14px;
  background: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
}
.airbnb-row .air-logo { width: 72px; height: 72px; border-radius: 50%; background: #FF385C; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.airbnb-row .air-logo svg, .airbnb-row .air-logo img { width: 36px; height: 36px; filter: brightness(0) invert(1); }

/* Buttons — style pill (stadium) par défaut */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 15px; font-weight: 600;
  border: 1px solid var(--neutral-200);
  background: var(--neutral-0); color: var(--neutral-900);
  line-height: 20px;
  cursor: pointer;
  font-family: inherit;
}
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn-full { width: 100%; }
.btn-primary { background: var(--neutral-900); color: #fff; border-color: var(--neutral-900); }
.btn-brand { background: var(--primary-500); color: #fff; border-color: var(--primary-500); }
.btn-brand:active { background: var(--primary-700); }
.btn-outline-brand { background: transparent; color: var(--primary-700); border-color: var(--primary-500); }
/* WhatsApp button — brand green + texte & icon noirs (demande Jordan, contraste AAA) */
.btn-wa { background: #25D366; color: var(--neutral-900); border-color: #25D366; }
.btn-wa:active { background: #1EBE5A; }
.btn-wa .i { color: var(--neutral-900); }
.btn-waze { background: #33CCFF; color: var(--neutral-900); border-color: #33CCFF; }
.btn-waze .i { color: var(--neutral-900); }

/* Timeline (arrivée) — ligne grise + remplissage orange driven par JS, sync exacte avec les étapes */
.timeline { position: relative; padding-left: 56px; }
/* Ligne de base grise */
.timeline .timeline-track {
  position: absolute;
  left: 19px; top: 14px;
  width: 2px;
  height: calc(100% - 28px);
  background: var(--neutral-200);
  border-radius: 2px;
  z-index: 0;
}
/* Remplissage orange progressif (height driven par JS) */
.timeline .timeline-fill {
  position: absolute;
  left: 19px; top: 14px;
  width: 2px;
  height: 0;
  background: var(--primary-500);
  border-radius: 2px;
  z-index: 1;
  transition: height 3500ms linear;
}

.timeline .step { position: relative; margin-bottom: 32px; }

/* Badge étape : démarre en gris. État actif = fond orange + icon blanc */
.step-badge {
  position: absolute; left: -56px; top: -4px;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--neutral-100); color: var(--neutral-800);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background-color .35s cubic-bezier(0.2, 0.8, 0.2, 1), color .35s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 2;
}
.step-badge .i { color: inherit; }
.step.active .step-badge {
  background: var(--primary-500);
  color: #fff;
  animation: stepPop .5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes stepPop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* Pill ÉTAPE N : démarre en gris puis passe en primary */
.step-num {
  display: inline-block;
  background: var(--neutral-100); color: var(--neutral-800);
  font-size: 10px; font-weight: 700; letter-spacing: 0.8px;
  padding: 4px 10px; border-radius: 999px;
  margin-bottom: 8px;
  text-transform: uppercase;
  transition: background-color .35s ease, color .35s ease;
}
.step.active .step-num {
  background: var(--primary-500);
  color: #fff;
}

/* Respect motion preference */
@media (prefers-reduced-motion: reduce) {
  .timeline .timeline-fill { transition: none; height: calc(100% - 28px) !important; }
  .step-badge { background: var(--primary-500) !important; color: #fff !important; }
  .step-num { background: var(--primary-500) !important; color: #fff !important; }
}

/* Wifi card */
.wifi-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--neutral-200);
}
.wifi-row:last-child { border-bottom: 0; }
.wifi-row .k { font-size: 12px; color: var(--neutral-800); }
.wifi-row .v { font-size: 15px; font-weight: 600; color: var(--neutral-900); }
.wifi-row .v-mono { font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; background: var(--neutral-100); padding: 3px 10px; border-radius: 8px; }
.qr-block { background: var(--neutral-0); border: 1px solid var(--neutral-200); border-radius: 16px; padding: 20px; display: flex; align-items: center; justify-content: center; }

/* List rows */
.row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  border-radius: 14px;
}
.row .row-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--secondary-100); color: var(--secondary-700);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.row.danger .row-icon { background: var(--error-100); color: var(--error-500); }
.row.warning .row-icon { background: var(--warning-100); color: var(--warning-500); }
.row.brand .row-icon { background: var(--primary-100); color: var(--primary-700); }
.row .row-body { flex: 1; min-width: 0; }
.row .row-title { font-size: 15px; font-weight: 600; color: var(--neutral-900); line-height: 20px; }
.row .row-sub { font-size: 13px; color: var(--neutral-800); line-height: 18px; margin-top: 2px; }
.row .row-sub.danger-fg { color: var(--error-500); font-weight: 600; }
.row .row-chevron { color: var(--neutral-800); }

/* Quick rule pills — style Figma : pas de card, juste icon + label */
.quick-pill {
  background: transparent;
  border: 0;
  padding: 14px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center;
}
.quick-pill .qicon { width: 40px; height: 40px; color: var(--neutral-900); }
.quick-pill .qlabel { font-size: 13px; font-weight: 500; color: var(--neutral-900); line-height: 16px; }

/* Flat row — style Figma : pas de card, juste hairline séparateur */
.row-flat {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--neutral-200);
  background: transparent;
  color: var(--neutral-900);
}
.row-flat:last-of-type { border-bottom: 0; }
.row-flat .row-flat-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--neutral-900); flex-shrink: 0; }
.row-flat .row-flat-body { flex: 1; min-width: 0; }
.row-flat .row-flat-title { font-size: 15px; font-weight: 600; color: var(--neutral-900); line-height: 20px; }
.row-flat .row-flat-sub { font-size: 13px; color: var(--neutral-800); line-height: 18px; margin-top: 2px; }
.row-flat .row-flat-chev { color: var(--neutral-800); }
.row-flat.danger .row-flat-title { color: var(--error-500); }
.row-flat.danger .row-flat-icon { color: var(--error-500); }

.flat-group { border-top: 1px solid var(--neutral-200); padding-top: 18px; margin-top: 18px; }
.flat-group:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.flat-group-title { font-size: 17px; font-weight: 700; color: var(--neutral-900); line-height: 22px; margin-bottom: 2px; }
.flat-group-sub { font-size: 13px; color: var(--neutral-800); line-height: 18px; margin-bottom: 6px; font-style: italic; }

/* Rule / sécu items — liste plate sans card, hairline séparateur */
.rule-item {
  display: flex; gap: 14px; padding: 16px 4px;
  border-bottom: 1px solid var(--neutral-200);
  align-items: flex-start;
}
.rule-item:last-child { border-bottom: 0; }
.rule-item .rule-ico { width: 36px; height: 36px; border-radius: 10px; background: var(--warning-100); color: var(--warning-500); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rule-item.neutral .rule-ico { background: var(--neutral-100); color: var(--neutral-900); }
.rule-item.brand .rule-ico { background: var(--primary-100); color: var(--primary-700); }

/* Info boxes */
.info-card {
  background: var(--secondary-100);
  border: 1px solid #C5E0D7;
  border-radius: 14px;
  padding: 12px 14px;
  color: var(--secondary-700);
  font-size: 13px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.info-card .i { color: var(--secondary-500); }
.danger-card {
  background: var(--error-100);
  border: 1px solid #FEC5C5;
  border-radius: 14px;
  padding: 14px 16px;
  color: #8E1F1F;
  font-size: 13px;
}

/* Accord */
details.accord { background: var(--neutral-0); border: 1px solid var(--neutral-200); border-radius: 14px; overflow: hidden; }
details.accord > summary { list-style: none; cursor: pointer; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 600; }
details.accord > summary::-webkit-details-marker { display: none; }
details.accord > summary::after { content: "+"; font-size: 18px; color: var(--neutral-800); font-weight: 400; }
details.accord[open] > summary::after { content: "–"; }
details.accord .body { padding: 0 16px 16px; color: var(--neutral-800); font-size: 14px; line-height: 22px; border-top: 1px solid var(--neutral-200); padding-top: 12px; margin-top: 8px; }

/* Scroll x */
.filter-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.filter-row::-webkit-scrollbar { display: none; }
.filter-row button { padding: 8px 14px; border-radius: 999px; background: var(--neutral-0); border: 1px solid var(--neutral-200); font-size: 13px; font-weight: 500; color: var(--neutral-800); white-space: nowrap; }
.filter-row button.active { background: var(--neutral-900); color: #fff; border-color: var(--neutral-900); }

/* Equipment list */
.equip {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--neutral-200);
}
.equip:last-child { border-bottom: 0; }
.equip .equip-ico { width: 36px; height: 36px; border-radius: 10px; background: var(--neutral-100); color: var(--neutral-900); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.equip .equip-body { flex: 1; }
.equip .equip-name { font-size: 15px; font-weight: 500; color: var(--neutral-900); line-height: 20px; }
.equip .equip-tip { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; color: var(--neutral-800); line-height: 16px; margin-top: 4px; }
.warn-emoji { font-size: 12px; line-height: 16px; flex-shrink: 0; filter: grayscale(0.4); opacity: 0.85; }
.equip .equip-play { width: 40px; height: 40px; border-radius: 50%; background: var(--neutral-900); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 0; cursor: pointer; }
.equip-list { padding: 0; } /* Pas de bordure ni de card — juste la liste des équipements séparés par un hairline */

/* Map card "Y aller" — vraie Google Maps en fond + pin vert + photo portail overlay */
.map-card {
  position: relative;
  height: 340px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--neutral-100);
  border: 1px solid var(--neutral-200);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
}
/* Iframe agrandie + décalée pour masquer les UI Google Maps :
   - "Ouvrir dans Maps" top-left (hidden via top: -60px)
   - toggle satellite / Street View bottom-left (hidden via left: -80px)
   - position/bug report bottom-right (hidden via width overflow)
   - attribution bottom bar (hidden via extra 50px height below)
   NB : en production Google Maps Platform avec clé API, l'attribution doit rester
   visible selon les TOS. Pour la prod, envisager Mapbox GL JS ou Static Maps API
   avec un style custom qui autorise plus de contrôle visuel. */
.map-card iframe {
  position: absolute;
  top: -60px; left: -80px;
  width: calc(100% + 160px);
  height: calc(100% + 110px);
  border: 0;
  pointer-events: none;
  filter: saturate(0.9);
}
/* Pin centré parfaitement au milieu de la box */
.map-card .map-pin {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--secondary-500);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(8, 105, 88, 0.45), 0 0 0 3px rgba(255,255,255,0.9);
  z-index: 2;
}
.map-card .map-pin .i { color: #fff; width: 22px; height: 22px; }

/* Photo du portail : collée au pin avec petite flèche pointant vers le bas */
.map-card .gate-preview {
  position: absolute;
  left: 50%; top: 50%;
  /* Photo collée au pin : -100% = hauteur photo ; -37px = rayon pin (26) + hauteur flèche (11),
     la flèche vient pile toucher la bordure blanche du pin. */
  transform: translate(-50%, calc(-100% - 37px));
  width: 150px; height: 100px;
  border-radius: 12px;
  overflow: visible;
  background: var(--neutral-0);
  border: 3px solid var(--neutral-0);
  box-shadow: 0 10px 24px rgba(0,0,0,0.14);
  z-index: 3;
}
.map-card .gate-preview img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 9px; }
/* Flèche blanche sous la photo pointant vers le pin
   top: 100% + margin 3px pour compenser la bordure parent (box-sizing content-box)
   → le triangle commence exactement au bord extérieur de la card sans mordre sur la photo */
.map-card .gate-preview::after {
  content: "";
  position: absolute;
  top: 100%;
  margin-top: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 11px solid var(--neutral-0);
  z-index: 3;
}
.map-card .map-expand {
  position: absolute;
  top: 12px; right: 12px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  display: flex; align-items: center; justify-content: center;
  z-index: 4;
  color: var(--neutral-900);
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}

/* Confirmation sortie app */
.exit-confirm { text-align: center; padding: 24px 20px 12px; }
.exit-confirm h2 { font-size: 20px; font-weight: 700; margin: 0 0 8px; letter-spacing: -0.01em; }
.exit-confirm p { font-size: 14px; line-height: 20px; color: var(--neutral-800); margin: 0 0 24px; }
.exit-confirm .exit-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--primary-100); color: var(--primary-700); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.exit-confirm .exit-actions { display: flex; flex-direction: column; gap: 10px; }

/* Avatar */
.avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--gradient-1);
  color: #fff; font-weight: 700; font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.avatar-sm { width: 44px; height: 44px; font-size: 16px; }

/* Checklist */
.chk {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: 14px;
  background: var(--neutral-0); border: 1px solid var(--neutral-200);
  cursor: pointer; user-select: none;
}
.chk input { position: absolute; opacity: 0; width: 22px; height: 22px; }
.chk { position: relative; }
.chk-box {
  width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0;
  border: 2px solid var(--neutral-200); background: var(--neutral-0);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
}
.chk input:active + .chk-box { transform: scale(0.88); }
.chk.done .chk-box { background: var(--primary-500); border-color: var(--primary-500); }
.chk-box svg { width: 13px; height: 11px; }
.chk-box path { stroke-dasharray: 18; stroke-dashoffset: 18; transition: stroke-dashoffset 0.3s ease 0.05s; }
.chk.done .chk-box path { stroke-dashoffset: 0; }
.chk-lbl { font-size: 15px; color: var(--neutral-900); flex: 1; position: relative; transition: color 0.3s ease; }
.chk.done .chk-lbl { color: var(--neutral-800); }
.chk-lbl::after {
  content: ""; position: absolute; left: 0; top: 0.62em; height: 1.5px; width: 0;
  background: var(--neutral-800); transition: width 0.3s ease;
}
.chk.done .chk-lbl::after { width: 100%; }

/* Activity card */
.activity-card { background: var(--neutral-0); border: 1px solid var(--neutral-200); border-radius: 16px; overflow: hidden; }
.activity-card .media { height: 140px; background-size: cover; background-position: center; background-color: var(--neutral-100); background-image: linear-gradient(135deg, var(--secondary-500), var(--primary-500)); }
.activity-card .body { padding: 14px; }
.sponsored { font-size: 10px; background: var(--warning-100); color: var(--warning-500); padding: 2px 6px; border-radius: 6px; margin-left: 6px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; vertical-align: middle; }

/* Toast */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); top: 16px;
  background: var(--neutral-900); color: #fff;
  padding: 10px 16px; border-radius: 999px;
  font-size: 13px; z-index: 100;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

/* Discover card (bon plan menu) — texte + CTA à gauche, stack 3 images à droite */
.discover-card {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 16px; margin-top: 18px;
  text-decoration: none; color: inherit;
  min-height: 140px;
}
.discover-body { flex: 1; min-width: 0; padding-right: 4px; }
.image-stack { position: relative; width: 104px; height: 104px; flex-shrink: 0; }
.img-stack-item {
  position: absolute;
  width: 76px; height: 76px;
  border-radius: 12px;
  background-size: cover; background-position: center;
  background-color: var(--primary-100);
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
  border: 2.5px solid var(--neutral-0);
}
.img-stack-item:nth-child(1) { top: 16px; left: 0; transform: rotate(-8deg); z-index: 1; }
.img-stack-item:nth-child(2) { top: 8px; left: 14px; transform: rotate(3deg); z-index: 2; }
.img-stack-item:nth-child(3) { top: 0; left: 28px; transform: rotate(12deg); z-index: 3; }

/* Sheet — glisse de bas en haut, hauteur cible 664px */
.sheet {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(0,0,0,0);
  display: flex; align-items: flex-end; justify-content: center;
  transition: background-color .28s ease;
}
.sheet.open { background: rgba(0,0,0,0.55); }
.sheet .sheet-panel {
  background: var(--neutral-0);
  width: 100%; max-width: 440px;
  border-top-left-radius: 24px; border-top-right-radius: 24px;
  padding: 20px;
  height: 664px; max-height: 90vh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform .32s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
.sheet.open .sheet-panel { transform: translateY(0); }
.sheet-grab { width: 44px; height: 4px; background: var(--neutral-200); border-radius: 4px; margin: 0 auto 14px; }

/* Page auth — fond vert brand */
.auth-wrap {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px; text-align: center;
  background: var(--secondary-500);
  color: #fff;
}
.auth-wrap .h2 { color: #fff; }
.auth-wrap .caption { color: rgba(255,255,255,0.85); }
/* Logo noir passé en blanc sur le fond vert de l'écran d'accès */
.auth-logo { height: 52px; margin-bottom: 28px; filter: brightness(0) invert(1) drop-shadow(0 2px 6px rgba(0,0,0,0.15)); }

/* OTP input : 6 cases individuelles */
.otp-wrap { display: flex; gap: 8px; margin: 10px 0 18px; justify-content: center; }
.otp-box {
  width: 44px; height: 54px;
  border: 1.5px solid rgba(255,255,255,0.25);
  border-radius: 12px;
  background: rgba(255,255,255,0.1);
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 22px; font-weight: 600;
  text-align: center;
  color: #fff;
  outline: none;
  transition: border-color .15s, box-shadow .15s, transform .15s, background-color .15s;
  caret-color: var(--primary-500);
  backdrop-filter: blur(6px);
}
.otp-box:focus {
  border-color: var(--primary-500);
  background: rgba(255,255,255,0.2);
  box-shadow: 0 0 0 3px rgba(255,126,67,0.25);
  transform: translateY(-1px);
}
.otp-box.filled { border-color: var(--primary-500); background: rgba(255,126,67,0.15); }
@media (max-width: 380px) { .otp-box { width: 40px; height: 48px; font-size: 20px; } }

/* CTA auth */
.auth-wrap .btn-primary { background: var(--primary-500); border-color: var(--primary-500); color: #fff; }
.auth-wrap .btn-primary:active { background: var(--primary-700); border-color: var(--primary-700); }
.auth-wrap .btn-sm { color: rgba(255,255,255,0.8) !important; }

/* ---------- Départ : bandeau home + jauge de progression ---------- */
.dep-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; margin-bottom: 24px;
  min-height: 92px;
  background: linear-gradient(135deg, #FF9A6D 0%, #FF7E43 100%);
  border-radius: 18px; text-decoration: none; color: #fff;
  box-shadow: 0 10px 24px rgba(232, 93, 31, 0.35);
}
.dep-banner .caption { color: rgba(255, 255, 255, 0.85); }
.dep-banner-ico {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255, 255, 255, 0.22); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.dep-banner-cta {
  flex-shrink: 0; background: #fff; color: var(--primary-700);
  font-size: 13px; font-weight: 600; border-radius: 999px; padding: 8px 14px;
}
.dep-progress { margin-bottom: 16px; }
.dep-progress-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.dep-progress-track { height: 8px; border-radius: 999px; background: var(--neutral-200); overflow: hidden; }
.dep-progress-fill { height: 100%; border-radius: 999px; background: var(--primary-500); transition: width 0.35s ease, background 0.35s ease; }
.dep-progress-fill.complete { background: var(--secondary-500); }


/* ---------- Carnet de séjour ---------- */
.disc-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; margin-bottom: 24px;
  min-height: 92px;
  background: linear-gradient(135deg, #0B7E69 0%, #086958 100%);
  border-radius: 18px; text-decoration: none; color: #fff;
  box-shadow: 0 10px 24px rgba(8, 105, 88, 0.3);
}
.disc-card .overline { color: rgba(255, 255, 255, 0.75); }
.disc-card .caption { color: rgba(255, 255, 255, 0.85); }
.disc-thumb {
  width: 58px; height: 58px; border-radius: 14px; flex-shrink: 0;
  background-size: cover; background-position: center; background-color: rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.3);
}
.act-done.on { background: var(--secondary-100); border-color: var(--secondary-500); color: var(--secondary-700); }