/* FilmEcran : connexion, inscription, mot de passe oublié et modales de compte, préfixe .au-.
   Charte POP de CineRiver / Clubs / « Proposer un film » : noir #0b0b0b, jaune #ffc107,
   rouge #ff2a3c, cyan #00e5ff, crème #f2ede3. La carte du formulaire est un billet de cinéma
   (souche perforée, encoches), le titre porte le décalage rouge/cyan de la charte.

   Chargé sur tout le site par base.html.twig, car les modales de connexion s'ouvrent depuis
   n'importe quelle page. Tout est sous .au ou .au-modal : rien ne déborde sur le reste du site.

   Mouvement (mêmes règles que css/fe-pop.css) : rien ne bouge au repos. Une seule entrée du
   titre et du billet au chargement, puis le décalage rouge/cyan uniquement au survol, au focus
   clavier ou en réponse à une action. Tout est coupé avec prefers-reduced-motion ou
   html[data-effects="off"]. */

.au,.au-modal{
  --au-ink:#0b0b0b;--au-panel:#131313;--au-panel-2:#1a1a1a;--au-line:rgba(242,237,227,.16);
  --au-yellow:#ffc107;--au-yellow-2:#ffd23f;--au-red:#ff2a3c;--au-cyan:#00e5ff;--au-cream:#f2ede3;
  --au-muted:#a9a39a;--au-radius:16px;--au-pop:cubic-bezier(.2,1.4,.4,1);
  color:var(--au-cream)
}
.au *,.au *::before,.au *::after,.au-modal *,.au-modal *::before,.au-modal *::after{box-sizing:border-box}

/* ------------------------------------------------------------------ page */
.au{position:relative;min-height:calc(100vh - 140px);padding:48px 0 64px;overflow-x:clip;
  background:
    radial-gradient(900px 420px at 10% -10%,rgba(255,193,7,.17),transparent 60%),
    radial-gradient(700px 360px at 100% 15%,rgba(0,229,255,.11),transparent 60%),
    radial-gradient(640px 320px at 55% 115%,rgba(255,42,60,.13),transparent 60%),var(--au-ink)}
/* Perforations de pellicule en haut et en bas. */
.au::before,.au::after{content:"";position:absolute;left:0;right:0;height:14px;opacity:.45;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 14px,rgba(242,237,227,.16) 14px 30px);
  -webkit-mask:linear-gradient(transparent 3px,#000 3px 11px,transparent 11px);mask:linear-gradient(transparent 3px,#000 3px 11px,transparent 11px)}
.au::before{top:0}.au::after{bottom:0}
.au-wrap{max-width:1120px;margin-inline:auto;padding-inline:16px}
.au-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;align-items:center}
.au-grid--wide{grid-template-columns:minmax(0,.8fr) minmax(0,1.35fr);align-items:start}
.au-grid--solo{grid-template-columns:minmax(0,560px);justify-content:center}

/* ------------------------------------------------------------------ textes */
.au-kicker{display:inline-block;background:var(--au-yellow);color:var(--au-ink);font-weight:900;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;border-radius:999px;padding:5px 12px;box-shadow:-3px 0 0 var(--au-red),3px 0 0 var(--au-cyan)}
.au-title{font-size:clamp(34px,5.4vw,62px);line-height:.98;font-weight:900;letter-spacing:-.035em;text-transform:uppercase;
  color:var(--au-yellow);margin:18px 0 14px;text-wrap:balance;text-shadow:-3px 0 0 rgba(255,42,60,.85),3px 0 0 rgba(0,229,255,.85);
  animation:au-title-in .9s var(--au-pop) both}
.au-title:hover{animation:au-glitch .35s steps(2) 1}
.au-lead{font-size:1.15rem;font-weight:800;color:var(--au-cream);margin:0 0 10px}
.au-text{color:var(--au-muted);line-height:1.6;margin:0 0 18px;max-width:46ch}
.au-muted{color:var(--au-muted)}

/* Atouts du compte : trois pastilles. */
.au-perks{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px}
.au-perk{display:flex;gap:12px;align-items:flex-start;background:rgba(19,19,19,.85);border:1px solid var(--au-line);
  border-radius:12px;padding:12px 14px;transition:transform .18s var(--au-pop),border-color .18s}
.au-perk:hover{transform:translateX(4px);border-color:rgba(255,193,7,.55)}
.au-perk-ico{flex:0 0 34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--au-yellow);color:var(--au-ink);
  font-size:1rem;box-shadow:-2px 0 0 var(--au-red),2px 0 0 var(--au-cyan)}
.au-perk strong{display:block;color:var(--au-cream);font-size:.95rem}
.au-perk div>span{display:block;color:var(--au-muted);font-size:.85rem;line-height:1.45}

/* ------------------------------------------------------------------ billet */
.au-ticket{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);background:var(--au-panel);
  border:2px solid var(--au-yellow);border-radius:var(--au-radius);
  box-shadow:-6px 6px 0 var(--au-red),6px -6px 0 var(--au-cyan),0 24px 60px rgba(0,0,0,.55);
  animation:au-ticket-in .7s var(--au-pop) .12s both}
/* Souche verticale, séparée par un pointillé, avec deux encoches. */
.au-stub{position:relative;background:var(--au-yellow);color:var(--au-ink);border-radius:13px 0 0 13px;
  display:flex;align-items:center;justify-content:center;border-right:2px dashed rgba(11,11,11,.55)}
.au-stub span{writing-mode:vertical-rl;transform:rotate(180deg);font-weight:900;letter-spacing:.32em;text-transform:uppercase;font-size:.78rem;white-space:nowrap}
.au-stub::before,.au-stub::after{content:"";position:absolute;right:-12px;width:22px;height:22px;border-radius:50%;background:var(--au-ink);
  border:2px solid var(--au-yellow)}
.au-stub::before{top:-12px;border-top-color:transparent;border-left-color:transparent;transform:rotate(45deg)}
.au-stub::after{bottom:-12px;border-bottom-color:transparent;border-right-color:transparent;transform:rotate(45deg)}
.au-body{padding:28px 28px 26px;min-width:0}
.au-card-title{display:flex;align-items:center;gap:10px;font-size:1.35rem;font-weight:900;letter-spacing:-.01em;margin:0 0 4px;color:var(--au-cream)}
.au-card-sub{color:var(--au-muted);font-size:.9rem;margin:0 0 20px}
.au-num{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--au-yellow);color:var(--au-ink);
  font-weight:900;font-size:.9rem;box-shadow:-2px 0 0 var(--au-red),2px 0 0 var(--au-cyan)}

/* Sections du formulaire d'inscription : deux « bobines ». */
.au-reel{border:1px solid var(--au-line);border-radius:12px;padding:16px 16px 4px;margin:0 0 16px;background:rgba(11,11,11,.45)}
.au-reel legend{float:none;width:auto;display:flex;align-items:center;gap:8px;padding:0 6px;margin:0 0 6px;font-size:.78rem;font-weight:900;
  letter-spacing:.08em;text-transform:uppercase;color:var(--au-yellow)}
.au-row{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}

/* ------------------------------------------------------------------ champs */
.au-field{margin:0 0 14px}
.au-label,.au label.form-label,.au-modal label.form-label{display:block;font-weight:800;font-size:.86rem;color:var(--au-cream);margin:0 0 6px}
.au-input,.au .form-control,.au .form-select,.au-modal .form-control,.au-modal .form-select{width:100%;background:var(--au-ink)!important;color:var(--au-cream)!important;
  border:2px solid rgba(242,237,227,.22);border-radius:12px;padding:.62rem .85rem;font-size:1rem;
  transition:border-color .18s,box-shadow .18s}
.au .form-control::placeholder,.au-modal .form-control::placeholder{color:rgba(242,237,227,.38)}
.au .form-control:hover,.au-modal .form-control:hover{border-color:rgba(242,237,227,.4)}
.au .form-control:focus,.au .form-select:focus,.au-modal .form-control:focus,.au-modal .form-select:focus{outline:none;border-color:var(--au-yellow);
  box-shadow:-3px 0 0 var(--au-red),3px 0 0 var(--au-cyan)}
.au .form-control.is-invalid,.au-modal .form-control.is-invalid{border-color:var(--au-red)}
/* Date de naissance (trois listes jour / mois / année rendues par Symfony). */
.au .au-date,.au-modal .au-date{display:flex;gap:8px}
.au .au-date select,.au-modal .au-date select{flex:1 1 0;min-width:0;background:var(--au-ink);color:var(--au-cream);border:2px solid rgba(242,237,227,.22);
  border-radius:12px;padding:.55rem .5rem}
.au .au-date select:focus,.au-modal .au-date select:focus{outline:none;border-color:var(--au-yellow)}
.au input[type="date"],.au-modal input[type="date"]{color-scheme:dark}

/* Mot de passe : bouton œil pour afficher / masquer. */
.au-pass{position:relative}
.au-pass .form-control{padding-right:3rem}
.au-eye{position:absolute;top:50%;right:6px;transform:translateY(-50%);width:38px;height:38px;border:0;border-radius:50%;background:transparent;
  color:var(--au-muted);display:grid;place-items:center;cursor:pointer;transition:color .18s,background-color .18s}
.au-eye:hover,.au-eye:focus-visible{color:var(--au-yellow);background:rgba(255,193,7,.1)}
.au-eye:focus-visible{outline:2px solid var(--au-yellow);outline-offset:1px}
.au-eye[aria-pressed="true"]{color:var(--au-cyan)}
.au-hint{color:var(--au-muted);font-size:.8rem;margin:6px 0 0}
.au-caps{color:var(--au-yellow);font-size:.8rem;font-weight:700;margin:6px 0 0}

/* Erreurs Symfony (form_errors) et erreurs de connexion. */
.au .invalid-feedback,.au-modal .invalid-feedback,.au .form-error-message{display:block;color:#ff8a95;font-size:.82rem;font-weight:700;margin-top:6px}
.au ul:not([class]),.au-modal ul:not([class]){list-style:none;padding:0;margin:6px 0 0;color:#ff8a95;font-size:.82rem;font-weight:700}
.au-alert{display:flex;gap:10px;align-items:flex-start;border-radius:12px;padding:12px 14px;margin:0 0 18px;font-weight:700;font-size:.9rem}
.au-alert--error{background:rgba(255,42,60,.12);border:1px solid rgba(255,42,60,.6);color:#ffc2c8;animation:au-shake .4s 1}
.au-alert--info{background:#101314;border:1px solid rgba(0,229,255,.45);color:#d6fbff}

/* Cases à cocher. */
.au .form-check,.au-modal .form-check{display:flex;gap:10px;align-items:flex-start;padding-left:0;margin:4px 0 16px}
.au .form-check + .invalid-feedback,.au-modal .form-check + .invalid-feedback{margin:-8px 0 14px}
.au .form-check-input,.au-modal .form-check-input{float:none;margin:2px 0 0;flex:0 0 20px;width:20px;height:20px;background-color:var(--au-ink);
  border:2px solid rgba(242,237,227,.45);border-radius:6px;cursor:pointer}
.au .form-check-input:checked,.au-modal .form-check-input:checked{background-color:var(--au-yellow);border-color:var(--au-yellow)}
.au .form-check-input:focus,.au-modal .form-check-input:focus{border-color:var(--au-yellow);box-shadow:0 0 0 .2rem rgba(255,193,7,.25)}
.au .form-check-label,.au-modal .form-check-label{color:var(--au-cream);font-size:.9rem;cursor:pointer}
.au .form-check-label a,.au-modal .form-check-label a{color:var(--au-yellow)}

/* ------------------------------------------------------------------ boutons */
.au-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;border:2px solid var(--au-yellow);
  font-weight:900;text-transform:uppercase;letter-spacing:.05em;font-size:.84rem;padding:.72rem 1.3rem;text-decoration:none;cursor:pointer;
  transition:transform .18s var(--au-pop),box-shadow .18s,background-color .18s,color .18s,border-color .18s}
.au-btn--block{display:flex;width:100%}
.au-btn--solid{background:var(--au-yellow);color:var(--au-ink)}
.au-btn--ghost{background:transparent;color:var(--au-cream);border-color:rgba(242,237,227,.45)}
.au-btn--google{background:var(--au-cream);color:var(--au-ink);border-color:var(--au-cream);text-transform:none;letter-spacing:0;font-weight:800}
.au-btn--danger{background:transparent;color:#ff8a95;border-color:var(--au-red)}
.au-btn:hover,.au-btn:focus-visible{transform:translateY(-2px) scale(1.03);box-shadow:-4px 0 0 var(--au-red),4px 0 0 var(--au-cyan)}
.au-btn--solid:hover,.au-btn--solid:focus-visible{background:var(--au-yellow-2);color:var(--au-ink)}
.au-btn--ghost:hover,.au-btn--ghost:focus-visible{border-color:var(--au-cream);color:#fff}
.au-btn--google:hover,.au-btn--google:focus-visible{background:#fff;color:var(--au-ink)}
.au-btn--danger:hover,.au-btn--danger:focus-visible{background:rgba(255,42,60,.14);color:#ffb3ba}
.au-btn:active{transform:scale(.96)}
.au-btn:focus-visible{outline:2px solid var(--au-yellow);outline-offset:3px}
.au-btn[disabled]{opacity:.7;cursor:progress;transform:none;box-shadow:none}
.au-g{width:18px;height:18px;flex:0 0 18px}

.au-or{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--au-muted);font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em}
.au-or::before,.au-or::after{content:"";flex:1;height:2px;background:repeating-linear-gradient(90deg,rgba(242,237,227,.25) 0 8px,transparent 8px 14px)}
.au-links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:18px;font-size:.9rem}
.au-link{color:var(--au-yellow);font-weight:800;text-decoration:none;border-bottom:2px solid rgba(255,193,7,.35);transition:border-color .18s,text-shadow .18s}
.au-link:hover,.au-link:focus-visible{color:var(--au-yellow-2);border-bottom-color:var(--au-yellow);text-shadow:-2px 0 rgba(255,42,60,.8),2px 0 rgba(0,229,255,.8)}
.au-link--quiet{color:var(--au-cream);border-bottom-color:rgba(242,237,227,.3)}
.au-switch{margin:20px 0 0;padding-top:16px;border-top:2px dashed var(--au-line);text-align:center;color:var(--au-muted);font-size:.92rem}

/* Écran « vérifiez votre boîte e-mail » : enveloppe qui se pose. */
.au-envelope{font-size:3.2rem;line-height:1;color:var(--au-yellow);text-shadow:-3px 0 0 rgba(255,42,60,.85),3px 0 0 rgba(0,229,255,.85);
  margin:0 0 12px;animation:au-drop .8s var(--au-pop) .25s both}

/* ------------------------------------------------------------------ modales */
.au-modal.modal-content{background:var(--au-panel);border:2px solid var(--au-yellow);border-radius:var(--au-radius);
  box-shadow:-6px 6px 0 var(--au-red),6px -6px 0 var(--au-cyan),0 24px 60px rgba(0,0,0,.6);overflow:visible}
.au-modal .modal-header{border-bottom:2px dashed var(--au-line);padding:18px 22px 14px;align-items:flex-start}
.au-modal .modal-body{padding:20px 22px 22px}
.au-modal-kicker{display:inline-block;background:var(--au-yellow);color:var(--au-ink);font-weight:900;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;border-radius:999px;padding:3px 10px;margin-bottom:8px;box-shadow:-2px 0 0 var(--au-red),2px 0 0 var(--au-cyan)}
.au-modal .modal-title{display:block;font-size:1.6rem;line-height:1;font-weight:900;letter-spacing:-.02em;text-transform:uppercase;color:var(--au-yellow);
  text-shadow:-2px 0 0 rgba(255,42,60,.85),2px 0 0 rgba(0,229,255,.85);margin:0}
.au-modal .btn-close{opacity:.8;margin-top:2px}
.au-modal .btn-close:hover,.au-modal .btn-close:focus-visible{opacity:1}
.au-stack{display:grid;gap:10px}

/* ------------------------------------------------------------------ animations */
@keyframes au-title-in{
  0%{opacity:0;transform:translateY(14px) skewX(-6deg);text-shadow:-14px 0 0 rgba(255,42,60,.9),14px 0 0 rgba(0,229,255,.9)}
  60%{opacity:1;text-shadow:5px 0 0 rgba(255,42,60,.9),-5px 0 0 rgba(0,229,255,.9)}
  100%{transform:none;text-shadow:-3px 0 0 rgba(255,42,60,.85),3px 0 0 rgba(0,229,255,.85)}
}
@keyframes au-glitch{
  0%{text-shadow:-6px 0 0 rgba(255,42,60,.9),6px 0 0 rgba(0,229,255,.9);transform:translateX(1px)}
  50%{text-shadow:5px 0 0 rgba(255,42,60,.9),-5px 0 0 rgba(0,229,255,.9);transform:translateX(-1px)}
  100%{text-shadow:-3px 0 0 rgba(255,42,60,.85),3px 0 0 rgba(0,229,255,.85);transform:none}
}
@keyframes au-ticket-in{0%{opacity:0;transform:translateY(22px) rotate(-2deg)}100%{opacity:1;transform:none}}
@keyframes au-drop{0%{opacity:0;transform:translateY(-24px) rotate(-12deg)}100%{opacity:1;transform:none}}
@keyframes au-shake{0%,100%{transform:none}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

html[data-effects="off"] .au *,html[data-effects="off"] .au-modal *{animation:none!important;transition:none!important}
html[data-effects="off"] .au-btn:hover,html[data-effects="off"] .au-perk:hover{transform:none}
@media (prefers-reduced-motion:reduce){
  .au *,.au-modal *{animation:none!important;transition:none!important}
  .au-btn:hover,.au-btn:focus-visible,.au-perk:hover{transform:none}
}

/* ------------------------------------------------------------------ mobile */
@media (max-width:991.98px){
  .au{padding:32px 0 48px}
  .au-grid,.au-grid--wide{grid-template-columns:minmax(0,1fr);gap:28px}
  .au-text{max-width:none}
}
@media (max-width:575.98px){
  .au-ticket{grid-template-columns:minmax(0,1fr);box-shadow:-4px 4px 0 var(--au-red),4px -4px 0 var(--au-cyan),0 18px 40px rgba(0,0,0,.5)}
  /* La souche passe en bandeau horizontal au-dessus du formulaire. */
  .au-stub{border-radius:13px 13px 0 0;border-right:0;border-bottom:2px dashed rgba(11,11,11,.55);padding:8px 0}
  .au-stub span{writing-mode:horizontal-tb;transform:none;letter-spacing:.24em}
  .au-stub::before,.au-stub::after{display:none}
  .au-body{padding:20px 16px 18px}
  .au-row{grid-template-columns:minmax(0,1fr)}
  .au-perks{display:none}
  .au-links{flex-direction:column;align-items:flex-start}
}
.au-notice{color:var(--au-cream);line-height:1.6;margin:0 0 12px}