/* ================================================================
   MODE DÉMO — intro du parcours « try before signup »
   ================================================================
   Chargé DYNAMIQUEMENT par js/demo-mode.js, uniquement sous ?entry=demo.
   Aucun <link> dans app.html : zéro requête et zéro impact en prod.

   Les durées viennent de DEMO_TIMING (js/demo-mode.js), injectées en
   variables CSS sur #demo-intro — un seul endroit pour caler les rythmes,
   y compris à chaud depuis la console.
   ================================================================ */

#demo-intro {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: #fff;
  opacity: 1;
  transition: opacity var(--demo-outro, 450ms) ease;
}

#demo-intro.demo-out {
  opacity: 0;
  pointer-events: none;
}

/* Les 2 écrans occupent la même surface et se relaient en fondu. */
.demo-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 42px; /* laisse passer l'onde en fin d'expansion sous le bouton */
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}

.demo-stage.on {
  opacity: 1;
  pointer-events: auto;
}

/* ── Écran 1 — les 2 phrases ──────────────────────────────────── */
/* En absolute : les phrases se croisent au même point d'ancrage, sans
   décalage vertical au changement de longueur de texte. */
.demo-line {
  position: absolute;
  margin: 0;
  max-width: 18ch;
  text-align: center;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.25;
  color: #144393;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--demo-line-out, 300ms) ease,
              transform var(--demo-line-out, 300ms) ease;
}

.demo-line.on {
  opacity: 1;
  transform: none;
  transition-duration: var(--demo-line-in, 300ms);
}

/* ── Écran 2 — le bouton seul ─────────────────────────────────── */
.demo-btn-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.86);
  /* Tant qu'il est invisible, le bouton ne doit pas être cliquable : sans ça
     on peut taper dans le vide et lancer la démo sur un écran encore blanc. */
  pointer-events: none;
  transition: opacity var(--demo-btn-in, 450ms) ease,
              transform var(--demo-btn-in, 450ms) cubic-bezier(.2, .9, .3, 1.25);
}

.demo-btn-wrap.on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Retour du bouton à sa place dans la barre (transform posé en JS, cf.
   _demoBtnTravelToBar). Courbe d'accélération standard : le bouton part
   franchement et se pose en douceur, comme un objet qui regagne sa place.
   Pas de rebond ici — il ne s'agit pas d'une apparition mais d'un retour. */
.demo-btn-wrap.travelling {
  transition: transform var(--demo-move, 620ms) cubic-bezier(.4, 0, .2, 1);
  pointer-events: none; /* le geste est fait : plus rien à taper pendant le trajet */
}

/* Le bouton est un clone du vrai #v2-nav-home : il garde ses classes, donc
   ses 3 états et son heartbeat. On ne surcharge que la géométrie (le vrai
   vit dans une barre de nav, celui-ci est seul au centre). Ratio 84/76
   conservé pour ne pas déformer le viewBox 243×221.

   Les !important sont requis, pas décoratifs : le hotfix r12-46 B.1
   (styles.css) verrouille width/height/margin-top de .v2-nav-home en
   !important pour protéger le ratio dans la bottom nav. On le contre ici,
   sur le seul clone (#demo-db-btn), plutôt que de toucher au fix. */
#demo-db-btn.v2-nav-home {
  width: 168px !important;
  height: 152px !important;
  margin-top: 0 !important;
}

/* Onde d'appel — attire l'œil sans toucher au bouton lui-même. */
.demo-ripple {
  position: absolute;
  width: 150px;
  height: 136px;
  border-radius: 50%;
  border: 2px solid rgba(20, 67, 147, .3);
  animation: demoRipple 2.4s ease-out infinite;
  pointer-events: none;
}

@keyframes demoRipple {
  0%   { transform: scale(.78); opacity: .65; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* Doigt qui tapote — posé en bas à droite du bouton pour ne pas masquer
   le symbole. Le cycle suit le heartbeat du bouton (2,4 s). */
.demo-finger {
  position: absolute;
  right: 14px;
  bottom: 6px;
  width: 42px;
  height: 42px;
  color: #101725;
  animation: demoTap 2.4s ease-in-out infinite;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .18));
}

.demo-finger svg {
  width: 100%;
  height: 100%;
}

@keyframes demoTap {
  0%, 100% { transform: translate(0, 0) scale(1); }
  12%      { transform: translate(-5px, -9px) scale(1.04); }
  26%      { transform: translate(0, 0) scale(.96); }
  40%      { transform: translate(0, 0) scale(1); }
}

.demo-hint {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #101725;
  opacity: 0;
  transition: opacity 300ms ease;
}

.demo-hint.on { opacity: .85; }

/* Deux sorties discrètes en bas de l'intro (fond blanc) : S'inscrire · Se
   connecter. Celui qui sait va droit au but ; l'œil d'un nouveau va au bouton
   qui pulse. Liens texte, PAS des boutons — gris ardoise sur blanc, au centre,
   séparés par un point médian. */
.demo-intro-exits {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(28px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  opacity: 0;
  transition: opacity 320ms ease;
}

.demo-intro-exits.on { opacity: 1; }

.demo-intro-exit {
  padding: 8px 6px;
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 700;
  color: #144393;
  text-decoration: underline;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.demo-intro-exit-sep {
  color: #94a3b8;
  font-weight: 700;
}

/* Au tap : le bouton devient actif, les indices d'appel s'effacent. Ils
   invitaient à un geste désormais fait — les garder brouillerait le message.
   Les deux sorties partent avec eux (on quitte l'intro). */
#demo-intro.demo-started .demo-ripple,
#demo-intro.demo-started .demo-finger,
#demo-intro.demo-started .demo-hint,
#demo-intro.demo-started .demo-intro-exits {
  opacity: 0;
  transition: opacity 200ms ease;
}

/* ================================================================
   PHASE 2 — le « clac » des compteurs figés
   ================================================================ */

/* Le « clac » : flash bref sur le chiffre qui vient de se figer. Discret —
   il marque le point d'arrêt, il ne le célèbre pas. */
.demo-lock {
  animation: demoLock 380ms ease-out;
}

@keyframes demoLock {
  0%   { transform: scale(1); }
  28%  { transform: scale(1.05); filter: brightness(1.45); }
  100% { transform: scale(1); }
}

/* ================================================================
   PHASE 3 — le doigt sur stop
   ================================================================ */

/* Posé en fixed sur le vrai bouton de la barre (cf. _demoStopFinger). À la
   différence du doigt de l'intro, il ne pulse pas : il montre un geste, il ne
   le réclame pas. Une seule pression, puis il s'efface. */
#demo-stop-finger {
  position: fixed;
  z-index: 950;
  width: 42px;
  height: 42px;
  color: #101725;
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 260ms ease, transform 260ms ease;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .35));
}

#demo-stop-finger svg {
  width: 100%;
  height: 100%;
}

#demo-stop-finger.on {
  opacity: 1;
  transform: none;
}

#demo-stop-finger.press {
  animation: demoPressOnce 440ms ease-out;
}

@keyframes demoPressOnce {
  0%   { transform: translate(0, 0) scale(1); }
  32%  { transform: translate(-3px, -7px) scale(1.06); }
  58%  { transform: translate(0, 0) scale(.94); }
  100% { transform: translate(0, 0) scale(1); }
}

/* Le bouton s'enfonce sous le doigt — même valeur que son :active natif. */
.v2-nav-home.demo-pressed {
  transform: scale(0.95);
}

/* ================================================================
   « Commence ton carnet » — la sortie permanente du débrief
   ================================================================ */

/* Collé en bas dès la fin de la démo : le visiteur explore librement (il peut
   relire, changer les notes) et ne doit jamais avoir à chercher la suite.
   Bleu nuit DriveBook, PAS jaune : le débrief est sur fond jaune, un CTA jaune
   s'y fondait (le contour foncé ne suffisait pas). L'inverse — bouton foncé sur
   fond clair — le rend franchement dominant. Symétrie avec l'écran final, où le
   fond est bleu et le CTA jaune : à chaque écran, le bouton contraste son fond. */
#demo-cta {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 940;
  padding: 18px 22px;
  border: none;
  border-radius: 15px;
  background: #144393;
  color: #fff;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .2px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(16, 23, 37, .38);
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 320ms ease, transform 320ms ease;
}

#demo-cta.on {
  opacity: 1;
  transform: none;
}

#demo-cta:active {
  transform: scale(.98);
}

/* Laisse passer le contenu sous le bouton.
   Le sélecteur doit inclure #v-debrief-r6 : styles.css pose déjà
   `#v-debrief-r6 .dr6-body { padding-bottom: 24px }`, et son id l'emporte sur
   deux simples classes. */
body.demo-cta-on #v-debrief-r6 .dr6-body {
  padding-bottom: 104px;
}

/* « Terminer ✓ » masqué en démo : il ne peut rien terminer (pas de compte), et
   deux boutons empilés qui semblent faire la même chose perdent le visiteur.
   C'est « Continuer » qui porte la suite. */
body.demo-cta-on #dr6-btn-finish {
  display: none;
}

/* ================================================================
   ÉCRAN FINAL — projection puis conversion
   ================================================================ */

/* Bleu marque : on quitte le jaune du débrief, le ton change — ce n'est plus
   la démonstration, c'est l'adresse au visiteur. Le dégradé donne du volume
   sans motif : plus clair en haut (là où on lit), il s'assombrit vers le bas
   où le CTA jaune ressort d'autant mieux. */
#demo-final {
  position: fixed;
  inset: 0;
  z-index: 960;
  background: linear-gradient(165deg, #1A56A8 0%, #144393 42%, #0D1B3E 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px calc(32px + env(safe-area-inset-bottom));
  opacity: 0;
  transition: opacity 420ms ease;
  overflow-y: auto;
}

#demo-final.on { opacity: 1; }

/* Mode inscription : le contenu s'ancre en haut (plus centré) et le padding se
   resserre, pour dégager toute la hauteur au flow et tenir sans scroll. */
#demo-final.demo-su-active {
  align-items: flex-start;
  padding: max(20px, env(safe-area-inset-top)) 22px
           calc(16px + env(safe-area-inset-bottom));
}

.demo-final-inner {
  width: 100%;
  max-width: 420px;
}

.demo-benefits {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
}

.demo-benefit {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0 0 20px;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--demo-benefit-in, 420ms) ease,
              transform var(--demo-benefit-in, 420ms) ease;
}

.demo-benefit.on {
  opacity: 1;
  transform: none;
}

/* Icônes discrètes : blanc translucide, pas jaune. Elles ancrent chaque
   promesse sans entrer en concurrence avec « Ton » et le CTA, qui sont les deux
   seuls points jaunes de l'écran. flex-shrink:0 — le texte passe à la ligne,
   l'icône jamais. */
.demo-benefit-ico {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: rgba(255, 255, 255, .5);
}

.demo-benefit-ico svg {
  width: 100%;
  height: 100%;
  display: block;
}

.demo-benefit-txt { flex: 1; }

/* Le seul effet typographique du parcours : « Ton ». */
.demo-benefit strong {
  color: #F9BD09;
  font-weight: 900;
}

/* Le CTA : jaune DriveBook, texte foncé, plus grand que tout le reste. Il ne
   ressemble à aucun autre bouton du parcours — c'est le seul qui engage. */
#demo-final-cta {
  display: block;
  width: 100%;
  padding: 20px 24px;
  border: none;
  border-radius: 16px;
  background: #F9BD09;
  color: #101725;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: .2px;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 380ms ease, transform 380ms ease;
}

#demo-final-cta.on {
  opacity: 1;
  transform: none;
}

#demo-final-cta:active {
  transform: scale(.98);
}

/* Micro-signature, une seule fois, sous le CTA. */
.demo-signature {
  margin: 18px 0 0;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, .5);
  opacity: 0;
  transition: opacity 380ms ease;
}

.demo-signature.on { opacity: 1; }

/* Porte « déjà un compte » sous le CTA (écran bénéfices, fond bleu). Lien
   texte discret, pas un bouton — il ne doit pas concurrencer « Inscris-toi »
   ni inviter à sauter la démo. « Connecte-toi » un ton au-dessus, mais toujours
   du texte souligné. */
.demo-login-link {
  display: block;
  width: 100%;
  margin: 14px 0 0;
  padding: 6px;
  background: none;
  border: none;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, .62);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transition: opacity 380ms ease;
}

.demo-login-link.on { opacity: 1; }
.demo-login-link strong {
  color: #fff;
  font-weight: 800;
  text-decoration: underline;
}

/* ================================================================
   INSCRIPTION PROGRESSIVE — le flow déplié en place
   ================================================================ */

/* Sortie des bénéfices : glissement vers le HAUT, pas un fondu sur place (qui
   saccadait). Le CTA + la signature partent en PREMIER (delay 0) ; les phrases
   suivent (delay léger) — tout remonte et sort par le haut, le CTA en tête.
   Ensuite le JS les retire du flux (display:none) et l'inscription entre par
   le bas : mouvement continu vers le haut. */
.demo-su-leaving #demo-final-cta,
.demo-su-leaving #demo-final-login,
.demo-su-leaving .demo-signature {
  opacity: 0;
  transform: translateY(-40px);
  pointer-events: none;
  transition: opacity calc(var(--demo-su-slide, 340ms) * .7) ease,
              transform var(--demo-su-slide, 340ms) cubic-bezier(.4, 0, .2, 1);
}

.demo-su-leaving .demo-benefits {
  opacity: 0;
  transform: translateY(-44px);
  pointer-events: none;
  transition: opacity calc(var(--demo-su-slide, 340ms) * .75) ease
                var(--demo-su-slide-delay, 90ms),
              transform var(--demo-su-slide, 340ms) cubic-bezier(.4, 0, .2, 1)
                var(--demo-su-slide-delay, 90ms);
}

/* Titre court qui remplace les 4 bénéfices en mode inscription. Blanc, sobre :
   le jaune reste réservé aux signaux d'action/validation, pas à la déco. Un peu
   d'air au-dessus pour qu'il ne soit pas plaqué en haut de l'écran. */
.demo-su-header {
  margin: 12px 0 22px;
  text-align: center;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .2px;
  color: #fff;
}

/* Le flow se déplie sous les bénéfices. */
#demo-signup {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--demo-su-step-in, 380ms) ease,
              transform var(--demo-su-step-in, 380ms) ease;
}

#demo-signup.on {
  opacity: 1;
  transform: none;
}

/* La question au-dessus des cartes : « Pour commencer, tu es… ». Un choix
   personnel se pose mieux qu'un « ou » froid entre deux cartes. Blanc sobre.
   Elle se replie une fois le rôle choisi (la question est répondue), ce qui
   libère aussi la hauteur pour les étapes suivantes. */
.demo-su-role-title {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 700;
  color: rgba(255, 255, 255, .82);
  overflow: hidden;
  max-height: 40px;
  transition: opacity 240ms ease, max-height 320ms ease, margin 320ms ease;
}

#demo-su-role.chosen-learner .demo-su-role-title,
#demo-su-role.chosen-guide .demo-su-role-title {
  opacity: 0;
  max-height: 0;
  margin: 0;
}

/* ── Étape 1 : les deux cartes de rôle ─────────────────────────── */
.demo-su-role-card {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  border: 2px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  /* max-height animable pour la disparition de la carte non choisie. */
  max-height: 200px;
  transition: opacity 280ms ease, max-height 400ms ease, margin 400ms ease,
              padding 400ms ease, border-color 200ms ease, background 200ms ease,
              transform 200ms ease;
}

.demo-su-role-card:active { transform: scale(.99); }

/* Apprenant : la carte dominante (grande). */
.demo-su-learner {
  padding: 22px 22px;
  border-radius: 18px;
  margin-bottom: 12px;
}

/* Guide : plus discret, en dessous. */
.demo-su-guide {
  padding: 15px 22px;
  border-radius: 15px;
}

.demo-su-role-name {
  display: block;
  font-weight: 900;
  letter-spacing: .2px;
}

.demo-su-learner .demo-su-role-name { font-size: 20px; }
.demo-su-guide   .demo-su-role-name { font-size: 16px; }

.demo-su-role-sub {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, .55);
}

/* Le ✓ de confirmation, caché tant que la carte n'est pas la choisie. */
.demo-su-check {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%) scale(.6);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #F9BD09;
  color: #101725;
  font-size: 15px;
  font-weight: 900;
  line-height: 26px;
  text-align: center;
  opacity: 0;
  transition: opacity 200ms ease, transform 200ms ease;
}

/* La carte choisie : bordure jaune + ✓. */
#demo-su-role.chosen-learner .demo-su-learner,
#demo-su-role.chosen-guide .demo-su-guide {
  border-color: #F9BD09;
  background: rgba(249, 189, 9, .12);
}

#demo-su-role.chosen-learner .demo-su-learner .demo-su-check,
#demo-su-role.chosen-guide .demo-su-guide .demo-su-check {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* La carte NON choisie disparaît : fondu puis repli (max-height 0). */
#demo-su-role.chosen-learner .demo-su-guide,
#demo-su-role.chosen-guide .demo-su-learner {
  opacity: 0;
  max-height: 0;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

/* ── La suite qui se dévoile ────────────────────────────────────── */
/* ── Étape révélée (CGU, moyens) : même langage que la démo ─────── */
.demo-su-reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--demo-su-step-in, 380ms) ease,
              transform var(--demo-su-step-in, 380ms) ease;
}

.demo-su-reveal.on {
  opacity: 1;
  transform: none;
}

/* ── Le stepper 1 › 2 › 3 (horizontal, en tête du flow) ─────────── */
.demo-su-stepper {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  margin-bottom: 18px;
}

.demo-su-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.demo-su-dot-num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  /* état par défaut : à venir */
  background: transparent;
  border: 2px solid rgba(255, 255, 255, .28);
  color: rgba(255, 255, 255, .5);
  transition: background 260ms ease, border-color 260ms ease, color 260ms ease;
}

.demo-su-dot-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2px;
  color: rgba(255, 255, 255, .4);
  transition: color 260ms ease;
}

/* La barre entre deux pastilles : grise, se remplit de jaune quand franchie. */
.demo-su-bar {
  flex: 1;
  max-width: 46px;
  height: 2px;
  margin-top: 14px; /* aligne sur le centre des pastilles (30/2 - 1) */
  background: rgba(255, 255, 255, .22);
  transition: background 260ms ease;
}

.demo-su-bar.done { background: #F9BD09; }

/* Pastille active : encadrée jaune, chiffre blanc. */
.demo-su-dot.active .demo-su-dot-num {
  border-color: #F9BD09;
  color: #fff;
}
.demo-su-dot.active .demo-su-dot-label { color: rgba(255, 255, 255, .85); }

/* Pastille faite : pleine jaune, chiffre foncé. */
.demo-su-dot.done .demo-su-dot-num {
  background: #F9BD09;
  border-color: #F9BD09;
  color: #101725;
}
.demo-su-dot.done .demo-su-dot-label { color: rgba(255, 255, 255, .7); }

/* ── Étape 2 : la case CGU ─────────────────────────────────────── */
.demo-su-cgu {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  padding: 2px 0;
}

/* La vraie checkbox est masquée : on stylise la fausse case à côté. */
.demo-su-cgu input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.demo-su-cgu-box {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 7px;
  border: 2px solid rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .06);
  position: relative;
  transition: background 180ms ease, border-color 180ms ease;
}

.demo-su-cgu-box::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 900;
  color: #101725;
  opacity: 0;
  transform: scale(.5);
  transition: opacity 180ms ease, transform 180ms ease;
}

.demo-su-cgu input:checked + .demo-su-cgu-box {
  background: #F9BD09;
  border-color: #F9BD09;
}

.demo-su-cgu input:checked + .demo-su-cgu-box::after {
  opacity: 1;
  transform: scale(1);
}

.demo-su-cgu-text {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: rgba(255, 255, 255, .82);
}

.demo-su-cgu-text a {
  color: #F9BD09;
  font-weight: 700;
  text-decoration: underline;
}

/* La CGU se resserre du haut : elle suit la carte de rôle de près. */
#demo-su-cgu-step { margin-top: 16px; }

/* ── Étape 3 : les 3 moyens ────────────────────────────────────── */
#demo-su-methods { margin-top: 16px; }

.demo-su-method {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 18px;
  margin-bottom: 10px;
  border-radius: 13px;
  border: none;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, opacity .15s ease;
}

.demo-su-method:active { transform: scale(.99); }

/* Départ vers Google : le redirect n'est pas instantané, on montre que le clic
   a été pris et on empêche un second signInWithOAuth concurrent. */
.demo-su-method[disabled] {
  opacity: .55;
  cursor: default;
  transform: none;
}

/* Erreur relue depuis #s-err (formulaire réel, masqué en démo). */
.demo-su-err {
  margin: 10px 2px 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: #FFB4AB;
  text-align: center;
}
.demo-su-err[hidden] { display: none; }

.demo-su-m-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 15px;
  font-weight: 900;
}

/* Google : blanc, texte foncé, « G » multicolore simplifié. */
.demo-su-m-google {
  background: #fff;
  color: #1f2328;
}
.demo-su-m-google .demo-su-m-ico { color: #4285F4; }

/* Apple : noir, texte blanc. */
.demo-su-m-apple {
  background: #101725;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .18);
}
.demo-su-m-apple .demo-su-m-ico { font-size: 18px; }

/* Mail : discret (contour), c'est le repli des deux OAuth. */
.demo-su-m-mail {
  background: transparent;
  color: rgba(255, 255, 255, .85);
  border: 1.5px solid rgba(255, 255, 255, .3);
  margin-bottom: 0;
}

.demo-su-m-mail.open {
  color: #fff;
  border-color: #F9BD09;
}

/* Mail ouvert : Google/Apple s'effacent (méthode choisie) → le formulaire tient
   sans scroll. Re-taper « email » les ramène. Vaut pour l'inscription
   (#demo-su-methods) comme pour la connexion (.demo-login-inner). */
#demo-su-methods.mail-open .demo-su-m-google,
#demo-su-methods.mail-open .demo-su-m-apple,
.demo-login-inner.mail-open .demo-su-m-google,
.demo-login-inner.mail-open .demo-su-m-apple {
  display: none;
}

/* Le formulaire mail — email + mot de passe + « S'inscrire ». */
.demo-su-mail-form { margin-top: 10px; }

.demo-su-input {
  width: 100%;
  padding: 13px 15px;
  margin-bottom: 10px;
  border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 15px;
  font-family: inherit;
}

.demo-su-input::placeholder { color: rgba(255, 255, 255, .45); }
.demo-su-input:focus {
  outline: none;
  border-color: #F9BD09;
  background: rgba(255, 255, 255, .12);
}

/* Champ mot de passe : cadre relatif portant l'œil. La marge basse passe du
   champ au cadre pour que l'œil se centre sur la seule hauteur du champ. */
.demo-su-pwd-wrap { position: relative; margin-bottom: 10px; }
.demo-su-pwd-wrap .demo-su-input { margin-bottom: 0; padding-right: 46px; }

/* Œil discret, dans le cadre, à droite. Ne prend pas le focus clavier
   (tabindex -1) : la tabulation va du mot de passe droit au bouton d'action. */
.demo-su-eye {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  background: none;
  color: rgba(255, 255, 255, .5);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.demo-su-eye:hover { color: rgba(255, 255, 255, .8); }
.demo-su-eye .eye-off { display: none; }
.demo-su-eye.on .eye-open { display: none; }
.demo-su-eye.on .eye-off { display: inline-flex; }

.demo-su-submit {
  width: 100%;
  padding: 15px 18px;
  border-radius: 13px;
  border: none;
  background: #F9BD09;
  color: #101725;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease;
}
.demo-su-submit:active { transform: scale(.99); }

/* ================================================================
   CONNEXION — overlay #demo-login (même langage que l'inscription)
   ================================================================ */

/* Overlay plein écran, au-dessus de l'écran bénéfices et de l'intro (z 970 >
   #demo-final 960). Même dégradé bleu que l'inscription. */
#demo-login {
  position: fixed;
  inset: 0;
  z-index: 970;
  background: linear-gradient(165deg, #1A56A8 0%, #144393 42%, #0D1B3E 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(24px, env(safe-area-inset-top)) 22px
           calc(20px + env(safe-area-inset-bottom));
  overflow-y: auto;
  opacity: 0;
  transition: opacity 300ms ease;
}

#demo-login.on { opacity: 1; }

.demo-login-inner {
  position: relative;
  width: 100%;
  max-width: 420px;
}

/* Croix de fermeture : discrète, en haut à droite. */
.demo-login-close {
  position: absolute;
  top: -6px;
  right: -4px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .8);
  font-size: 16px;
  line-height: 34px;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.demo-login-close:active { transform: scale(.94); }

/* Le header de connexion garde de l'air au-dessus (sous la croix). */
#demo-login .demo-su-header { margin-top: 28px; }

/* ================================================================
   CONNEXION PRODUCTION — #login-v2 (login-v2.js, miroir de #demo-login).
   Même overlay plein écran / dégradé, mais SANS croix (1er écran, rien
   derrière). Réutilise .demo-login-inner / .demo-su-* / .demo-li-forgot.
   ================================================================ */
#login-v2 {
  position: fixed;
  inset: 0;
  z-index: 970;
  background: linear-gradient(165deg, #1A56A8 0%, #144393 42%, #0D1B3E 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(24px, env(safe-area-inset-top)) 22px
           calc(20px + env(safe-area-inset-bottom));
  overflow-y: auto;
  opacity: 0;
  transition: opacity 300ms ease;
}
#login-v2.on { opacity: 1; }
/* Pas de croix → le header n'a pas besoin de dégager d'espace en haut. */
#login-v2 .demo-su-header { margin-top: 8px; }
#login-v2 .demo-login-link { opacity: 1; margin-top: 22px; }

/* Aide OAuth secondaire sous l'erreur (cas 5) : piste discrète, pas diagnostic. */
.lv2-hint {
  margin: 8px 0 0;
  font-family: Nunito, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 600;
  color: rgba(255, 255, 255, .72);
  text-align: center;
}

/* « Mot de passe oublié ? » — lien texte discret sous le bouton « Se connecter ». */
.demo-li-forgot {
  display: block;
  width: 100%;
  margin: 12px 0 0;
  padding: 4px;
  background: none;
  border: none;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, .7);
  text-decoration: underline;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* « Pas encore de compte ? Inscris-toi » — même style discret que la porte login
   inverse, un cran au-dessus des moyens. */
#demo-login .demo-login-link {
  opacity: 1;
  margin-top: 22px;
}

/* Mouvement réduit : on garde les fondus (porteurs de sens, ils rythment le
   récit) mais on retire les boucles décoratives. Le heartbeat du bouton est
   déjà neutralisé par styles.css. */
@media (prefers-reduced-motion: reduce) {
  .demo-ripple,
  .demo-finger,
  .demo-lock,
  #demo-stop-finger.press {
    animation: none;
  }
  .demo-btn-wrap,
  .demo-btn-wrap.travelling {
    transition-duration: 1ms;
  }
  /* Les bénéfices restent séquencés (le rythme porte le sens) mais sans
     glissement : ils apparaissent, ils ne bougent plus. La sortie devient un
     fondu simple, sans translation. */
  .demo-benefit,
  #demo-final-cta,
  .demo-su-leaving .demo-benefits,
  .demo-su-leaving #demo-final-cta,
  .demo-su-leaving .demo-signature {
    transform: none !important;
  }
}