/* Center card container */
.chooze-otp-lightmodern { position: relative; min-height: 100vh; display: grid; place-items: center; overflow: hidden; background: #f7f9fc; }
.content { position: relative; z-index:2; width: 100%; display: grid; place-items: center; padding: 28px; }

/* Mixed alignment: titles centered, options left-aligned */
.chooze-otp-mixed .otp-title,
.chooze-otp-mixed .otp-sub,
.chooze-otp-mixed .success-hero { text-align: center; width: 100%; }
.chooze-otp-mixed .otp-sub { max-width: 720px; margin-left: auto; margin-right: auto; }

/* Background */
.bg-wrap { position: absolute; inset: 0; overflow: hidden; }
.bg-gradient { position: absolute; inset: -20% -10% -10% -10%;
  background:
    radial-gradient(900px 520px at 75% 0%, color-mix(in srgb, var(--chooze-primary, #FF9821) 20%, transparent) 0%, transparent 60%),s
    radial-gradient(800px 520px at 10% 100%, color-mix(in srgb, var(--chooze-primary, #FF9821) 14%, transparent) 0%, transparent 65%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 60%, #f4f7fb 100%);
}
.bg-sheen { position:absolute; inset:0; background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,0.55) 12%, rgba(255,255,255,0.65) 16%, transparent 26%); transform:translateX(-120%); animation: sheen 9s ease-in-out infinite; pointer-events:none;}
@keyframes sheen { 0%,10%{transform:translateX(-130%)} 55%{transform:translateX(20%)} 100%{transform:translateX(130%)} }
.bg-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(15,23,42,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,0.06) 1px, transparent 1px); background-size:44px 44px,44px 44px; mask-image: radial-gradient(900px 600px at 50% 40%, rgba(0,0,0,0.9), transparent 70%); }
.bg-blob { position:absolute; border-radius:9999px; filter:blur(60px); background: color-mix(in srgb, var(--chooze-primary, #FF9821) 20%, transparent); mix-blend-mode:multiply; animation: floatY 14s ease-in-out infinite; }
.bg-blob.b1{ width:540px; height:540px; top:-160px; left:-160px; }
.bg-blob.b2{ width:400px; height:400px; bottom:-140px; right:-120px; animation-delay:3s; }
@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }

/* Card */
.otp-card { background:#fff; border:1px solid #e7ebf2; border-radius:22px; box-shadow:0 14px 34px rgba(15,23,42,0.08); padding:26px; width:100%; max-width:720px; transition: transform .22s ease, box-shadow .22s ease, opacity .22s ease; }
.otp-card.is-verified { transform: scale(0.985); box-shadow: 0 10px 28px rgba(15,23,42,0.06); }
.otp-icon { width:64px; height:64px; border-radius:16px; background: linear-gradient(135deg, var(--chooze-primary, #FF9821), color-mix(in srgb, var(--chooze-primary, #FF9821) 80%, #000 0%)); display:flex; align-items:center; justify-content:center; margin:0 auto 12px auto; box-shadow: 0 10px 24px color-mix(in srgb, var(--chooze-primary, #FF9821) 35%, transparent); animation:bob 3.6s ease-in-out infinite; }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }

.otp-title { font-size: 24px; font-weight: 800; color: #0f172a; margin: 2px 0 10px; letter-spacing: -0.015em; }
.otp-sub { color:#475569; margin: 0 0 14px; line-height: 1.45; }

/* OTP inputs (centered row, still fine) */
.otp-row { display:flex; gap:12px; justify-content:center; margin:0 0 10px; }
.otp-input{ width:52px; height:64px; border-radius:14px; border:2px solid #e2e8f0; background:#fff; text-align:center; font-size:24px; font-weight:800; color:#0f172a; transition:all .16s ease; outline:none; }
.otp-input.filled{ border-color: var(--chooze-primary, #FF9821); background: color-mix(in srgb, var(--chooze-primary, #FF9821) 15%, #fff 85%); color:#7a4f06; transform:scale(1.04); box-shadow: 0 8px 18px color-mix(in srgb, var(--chooze-primary, #FF9821) 20%, transparent); }
.otp-input.error{ border-color:#ef4444; background:#fee2e2; color:#991b1b; }
.otp-input:focus{ border-color: var(--chooze-primary, #FF9821); box-shadow: 0 0 0 7px color-mix(in srgb, var(--chooze-primary, #FF9821) 22%, transparent); transform:scale(1.04); }

.otp-badge{ display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:700; padding:6px 10px; color:#b91c1c; background:#fef2f2; border:1px solid #fecaca; border-radius:999px; }
.otp-badge-wrap{ min-height:24px; display:flex; justify-content:center; align-items:center; margin-bottom:12px; }
.otp-verif{ display:flex; align-items:center; justify-content:center; gap:8px; color: var(--chooze-primary, #FF9821); font-weight:700; margin:12px 0 16px; }
.otp-spinner{ width:18px; height:18px; border:3px solid var(--chooze-primary, #FF9821); border-top-color:transparent; border-radius:999px; animation:spin 1s linear infinite; } @keyframes spin{ to{ transform:rotate(360deg);}}
.otp-resend{ margin-top:6px; width:100%; text-align:center; } .otp-resend button{ background:none; border:none; color: var(--chooze-primary, #FF9821); font-weight:700; cursor:pointer; } .otp-resend button:hover{ opacity:.85; text-decoration:underline; }

/* Success + Stepper */
.success-hero{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:8px 0 2px; width:100%; }
.success-ring{ position:relative; width:96px; height:96px; border-radius:999px; background:linear-gradient(135deg,#22c55e,#16a34a); display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 14px 32px rgba(34,197,94,0.28); animation:pop .35s ease-out both, pulseGlow 2.4s ease-in-out .35s infinite; }
@keyframes pop{0%{transform:scale(.85); opacity:0}100%{transform:scale(1); opacity:1}}
@keyframes pulseGlow{0%,100%{box-shadow:0 14px 32px rgba(34,197,94,0.28);}50%{box-shadow:0 18px 40px rgba(34,197,94,0.42);}}
.success-title{ font-size:22px; font-weight:800; color:#0f172a; margin:10px 0 6px; width:100%; text-align:center; }
.success-sub{ color:#475569; margin:0 0 16px; width:100%; text-align:center; }

.stepper { margin-top: 10px; width: 100%; display:grid; place-items:center; }
.step { border:1px solid #eef2f7; border-radius:16px; padding:18px; background:#fff; margin-top:14px; width:100%; max-width:640px; }
.step-head { display:flex; align-items:center; gap:10px; justify-content:center; text-align:center; }
.step-num { width:28px; height:28px; border-radius:999px; display:flex; align-items:center; justify-content:center; background: var(--chooze-primary, #FF9821); color:#fff; font-weight:800; font-size:13px; box-shadow:0 6px 14px color-mix(in srgb, var(--chooze-primary, #FF9821) 22%, transparent); }
.step-title { font-weight:800; color:#0f172a; font-size:16px; letter-spacing:-.01em; text-align:left; }

/* Choices: explicitly left-aligned block */
.choices { display:grid; grid-template-columns: 1fr; gap:16px; margin-top: 14px; text-align:left; }
.choice {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:14px 16px; cursor:pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.choice:hover { border-color:#dbe1ea; background:#f9fbff; }
.choice .left { display:flex; align-items:center; gap:12px; }
.choice .label { font-weight:800; color:#0f172a; }
.choice .sub { color:#64748b; font-size:12px; }
.choice .go { color: var(--chooze-primary, #FF9821); font-weight:800; }

/* Animations */
.fade-in { animation: fadeIn .22s ease-out both; }
@keyframes fadeIn { from { opacity:0; transform: translateY(6px);} to { opacity:1; transform: translateY(0);} }

.confetti{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.confetti .p{ position:absolute; width:10px; height:18px; border-radius:2px; opacity:0; animation:drop 1200ms ease-out forwards; }
@keyframes drop{ 0%{ transform: translateY(-30px) rotate(0deg); opacity:0 } 10%{ opacity:1 } 100%{ transform: translateY(240px) rotate(540deg); opacity:0 } }

.final-wrap { padding-top: 6px; width:100%; text-align:center; }
.final-msg { color:#0f172a; font-weight:800; margin-bottom:4px; }
.final-sub { color:#475569; }
.summary { margin-top:10px; }
.summary .tag { background:#f1f5f9; border:1px solid #e2e8f0; border-radius:999px; padding:6px 10px; font-weight:700; font-size:12px; color:#0f172a; margin:9px; }

/* Shake */
.animate-shake{ animation: shakeX 430ms cubic-bezier(.36,.07,.19,.97) both; } 
@keyframes shakeX{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-3px)}40%,60%{transform:translateX(3px)}}


/* --- Alignment fix: force left alignment inside choices --- */
.choices { text-align: left; }
.choice { justify-content: flex-start !important; }
.choice .left { flex: 1 1 auto; text-align: left; }
.choice .label, .choice .sub { text-align: left; }
.choice .go { margin-left: auto; }


/* Force left alignment only for label + sub */
.choice .label, .choice .sub { text-align: left !important; }

/* breathing space adjustments */
.otp-sub { margin-bottom: 24px !important; }
.otp-row { margin-bottom: 24px !important; }
.otp-resend { margin-top: 24px !important; }


/* Multi-select states for day choices */
.choice.selected { 
  border-color: var(--chooze-primary, #FF9821);
  background: color-mix(in srgb, var(--chooze-primary, #FF9821) 12%, #fff 88%);
}
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 18px; border-radius: 12px; font-weight:800;
  background: var(--chooze-primary, #FF9821); color:#fff; border:1px solid color-mix(in srgb, var(--chooze-primary, #FF9821) 40%, #000 0%);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--chooze-primary, #FF9821) 22%, transparent);
  transition: transform .12s ease, box-shadow .12s; cursor:pointer;
}
.btn-primary:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; }
.btn-primary:hover:not(:disabled){ transform: translateY(-1px); }
@media (max-width: 640px){
  .choices { gap: 12px; }
  .btn-primary{ width: 100%; }
}


/* Subtext style kept readable for the 'Pas d'autre jour de préférence' option */
.choice .sub { color:#64748b; font-size:12px; }
@media (max-width: 640px){
  .choice .sub { font-size:12px; }
}


/* v11.4 background fix (scoped, minimal) */
.chooze-otp-root{
  background: transparent !important;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: 0px;
}
.chooze-otp-root .card-mount > *{ position: relative; z-index: 1; }
@media (max-width: 640px){
  .chooze-otp-root{ padding: 0px; }
}

/* Guide (below success message) */
.guide-intro{ margin:12px 0 8px; display:grid; gap:8px; }
.guide-text{ color:#0f172a; font-size:14px; line-height:1.5; margin:0; }
.download-wrap{ display:grid; place-items:start; }
.btn-download{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 16px; border-radius:12px; font-weight:800;
  background: var(--chooze-primary, #FF9821); color:#fff; text-decoration:none;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn-download:hover{ transform: translateY(-1px); box-shadow:0 12px 28px rgba(0,0,0,.12); }
.btn-download:active{ transform:none; box-shadow:0 8px 18px rgba(0,0,0,.08); }
@media (max-width:640px){
  .btn-download{ width:100%; }
}



/* v11.6: success subtext + guide button placement */
.success-sub{
  margin: 8px 0 4px;
  color: #0f172a;
  font-size: 14px;
  line-height: 1.5;
}

/* Reassurance under OTP heading */
.otp-reassure{
  display:flex; align-items:flex-start; gap:8px;
  margin: 10px 0 6px;
  color:#334155; font-size:12px; line-height:1.5;
}
.otp-reassure .emoji{ font-size:14px; line-height:1; }

/* Round step numbers (in case not present) */
.step-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.step-num{
  width: 36px; height: 36px; line-height: 36px;
  border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--chooze-primary, #FF9821);
  color:#fff; font-weight: 800; font-size: 14px;
  flex: 0 0 36px;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
@media (max-width: 640px){
  .step-num{ width: 32px; height: 32px; line-height: 32px; font-size: 12px; flex-basis: 32px; }
}

/* Bloc RGPD placé SOUS la carte (mix A + C) */
.rgpd-wrap{
  width:100%;
  max-width:560px;
  margin:12px auto 0; /* proche de la carte */
}

.rgpd-card{
  display:flex;
  align-items:flex-start;
  gap:12px;
  background:#F8FAFC;                /* encadré discret premium */
  border:1px solid #E2E8F0;
  border-left:4px solid var(--chooze-primary, #FF9821); /* accent institutionnel */
  border-radius:12px;
  padding:14px 16px;
  color:#0f172a;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
}

.rgpd-icon{
  font-size:18px;
  line-height:1;
  margin-top:2px; /* léger alignement vertical */
}

.rgpd-text{ display:flex; flex-direction:column; gap:2px; }
.rgpd-title{
  font-weight:800;
  font-size:13px;
  color:#0f172a;
  letter-spacing:.2px;
}
.rgpd-desc{
  font-size:12px;
  color:#334155;
  line-height:1.55;
}
.rgpd-desc a{
  color:#0f172a;
  text-decoration:underline;
  text-underline-offset:2px;
}
.rgpd-desc a:hover{
  opacity:.85;
}

@media (max-width:640px){
  .rgpd-card{ padding:12px 12px; border-radius:10px; }
  .rgpd-title{ font-size:12px; }
  .rgpd-desc{ font-size:12px; }
}

/* Plus d'espace sous les 4 inputs OTP */
.otp-row { 
  margin-bottom: 32px !important; /* avant: 24px */
}

/* Le bloc "Renvoyer le code" ne rajoute pas de marge au-dessus
   (l'espace vient des inputs, pas d'ici) */
.otp-resend {
  margin-top: 0 !important; /* avant: 24px */
}

/* Texte d'accompagnement : légèrement plus grand et collé au bouton */
.otp-resend .helper-row {
  font-size: 18px;          /* avant ~14px */
  font-weight: 700;
  color: #334155;
  margin: 0;                /* supprime toute marge sous ce texte */
  line-height: 1.35;
}

/* Mode compact vertical : 1 colonne, espacement minimal */
.stepper.compact-qa.vertical-tight { margin-top: 4px; }

.stepper.compact-qa.vertical-tight .step {
  padding: 10px 12px;      /* plus dense */
  border-radius: 12px;
  margin-top: 8px;
}

.stepper.compact-qa.vertical-tight .step-head {
  display: flex;
  align-items: center;          /* ← centrage vertical parfait, propre */
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 6px;           /* petit air maîtrisé */
}

.stepper.compact-qa.vertical-tight .step-num {
  width: 26px; height: 26px; line-height: 26px;
  font-size: 12px; flex: 0 0 26px;
}

.stepper.compact-qa.vertical-tight .step-title {
  font-size: 15px;
  line-height: 1.2;
}

/* UNE seule colonne, resserrée */
.stepper.compact-qa.vertical-tight .choices {
  display: grid;
  grid-template-columns: 1fr;  /* vertical */
  gap: 6px;                    /* espacement réduit */
  margin-top: 8px;
}

/* Cartes fines et très compactes */
.stepper.compact-qa.vertical-tight .choice {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #e5eaf2;
  background: #fff;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
}

.stepper.compact-qa.vertical-tight .choice:hover {
  background: #fafcff;
  border-color: #dde3ee;
}
.stepper.compact-qa.vertical-tight .choice.selected {
  border-color: var(--chooze-primary, #FF9821);
  background: color-mix(in srgb, var(--chooze-primary, #FF9821) 10%, #fff 90%);
}

/* Texte compact, wrap correct */
.stepper.compact-qa.vertical-tight .choice .left { flex: 1 1 auto; min-width: 0; }
.stepper.compact-qa.vertical-tight .choice .label {
  font-weight: 800; color: #0f172a;
  font-size: 14px; line-height: 1.2; text-align: left;
  white-space: normal; word-break: break-word;
}
.stepper.compact-qa.vertical-tight .choice .sub {
  color: #64748b; font-size: 11.5px; line-height: 1.2;
  margin-top: 2px; text-align: left;
  white-space: normal; word-break: break-word;
}

/* Optionnel : micro-ajustements mobile */
@media (max-width: 420px){
  .stepper.compact-qa.vertical-tight .step { padding: 9px 10px; }
  .stepper.compact-qa.vertical-tight .choice { padding: 9px 10px; }
  .stepper.compact-qa.vertical-tight .choice .label { font-size: 13.5px; }
}

/* iOS Safari: occuper TOUTE la hauteur, sans bandes blanches */
html, body {
  height: 100%;
  margin: 0;
  background: #f7f9fc; /* fond de secours, même teinte que l’arrière-plan */
}

/* Racine OTP : forcer la vraie hauteur viewport, quels que soient l’URL bar/gesture bar */
.chooze-otp-root,
.chooze-otp-lightmodern {
  min-height: 100vh;   /* fallback anciens navigateurs */
  min-height: 100svh;  /* small viewport height (iOS 15.4+) */
  min-height: 100dvh;  /* dynamic viewport height (iOS 16+, Chrome/Firefox récents) */
  /* gérer les encoches / home indicator */
  padding-top: max(16px, env(safe-area-inset-top));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

/* Si tu as un wrapper d’arrière-plan, assure-toi qu’il couvre tout */
.bg-wrap {
  position: fixed; /* couvre l’écran même si le contenu scrolle */
  inset: 0;
  pointer-events: none; /* le fond ne capte pas les clics */
  z-index: 0;
}
.content { position: relative; z-index: 2; }

/* Compat iOS plus anciens (iOS 12/13) : -webkit-fill-available */
@supports (-webkit-touch-callout: none) {
  html, body { height: -webkit-fill-available; }
  .chooze-otp-root,
  .chooze-otp-lightmodern { min-height: -webkit-fill-available; }
}