/* Les pages d'accès à l'application : connexion, inscription, mot de passe
   oublié (views/vitrine/connexion.ejs, inscription.ejs,
   mot-de-passe-oublie.ejs). Elles reprennent les cadres « Inscription et
   connexion » de la maquette « Oléo — Site vitrine » (canevas Design du
   16/10/2026), et se chargent APRÈS vitrine.css, dont elles gardent les
   polices, le verre, les halos et les boutons.

   Tout est préfixé par .o-acces, et ce n'est pas de la prudence : vitrine.css
   habille déjà les champs du formulaire de contact par « .o-field input »,
   plus spécifique qu'une classe seule, qui l'emporterait sinon sur les champs
   de la maquette. */

/* L'attribut hidden ne vient que de la feuille par défaut du navigateur : il
   perd contre le « display:flex » que les formulaires et les messages portent
   en ligne. Sans cette règle, les trois étapes de l'inscription
   s'afficheraient l'une sous l'autre. */
.o-acces [hidden] { display: none !important; }

/* vitrine.css ajoute une flèche après chaque .o-lnk. Ici, les liens portent la
   leur en SVG (« Retour au site »), ou n'en ont pas (« Mot de passe oublié »). */
.o-acces .o-lnk::after { content: none; }

/* Le focus se voit en crème sur le panneau sombre. */
.o-acces .o-side :focus-visible { outline-color: #FEF7EC; }

/* Un titre ne reçoit le focus que du script, au changement d'étape, pour
   qu'un lecteur d'écran l'annonce : pas de cadre autour. */
.o-acces h1:focus { outline: none; }

/* Le temps que GSAP pose l'état de départ de l'ouverture, la carte et le texte
   du panneau restent invisibles — voir le script en ligne d'acces-haut.ejs. */
.o-anim .o-acces .o-card, .o-anim .o-acces .o-side-copy { visibility: hidden; }

/* Champs. */
.o-acces .o-field label { font-size: 15px; }
.o-acces .o-in { font: inherit; font-size: 17px; color: #222c36; background: rgba(255,255,255,.85); border: 1.5px solid rgba(46,66,84,.18); border-radius: 14px; padding: 0 16px; min-height: 54px; width: 100%; transition: border-color .2s, box-shadow .2s; }
.o-acces .o-in::placeholder { color: #8a9097; }
.o-acces .o-in:focus { outline: none; border-color: #FB6E96; box-shadow: 0 0 0 4px rgba(251,110,150,.2); }
.o-acces .o-in.o-err { border-color: #c2410c; box-shadow: 0 0 0 4px rgba(194,65,12,.12); }

/* Mot de passe, et l'œil qui le montre. */
.o-acces .o-pwd { position: relative; }
.o-acces .o-pwd .o-in { padding-right: 56px; }
.o-acces .o-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: #4e565e; cursor: pointer; }
.o-acces .o-eye:hover { background: rgba(46,66,84,.06); color: #2e4254; }
.o-acces .o-eye .o-cacher, .o-acces .o-eye[aria-pressed="true"] .o-voir { display: none; }
.o-acces .o-eye[aria-pressed="true"] .o-cacher { display: block; }

/* La règle du mot de passe, cochée pendant la saisie. */
.o-acces .o-regles li { display: flex; gap: 8px; align-items: center; color: #6b7178; }
.o-acces .o-regles li.ok { color: #2e4254; }
.o-acces .o-regles svg { flex: none; }
.o-acces .o-regles .o-fait, .o-acces .o-regles li.ok .o-afaire { display: none; }
.o-acces .o-regles li.ok .o-fait { display: block; }

/* Le code à six chiffres. Les cases se partagent la largeur au lieu des 56 px
   fixes de la maquette : six fois 56 plus les écarts font 386 px, plus que
   la carte n'en offre sur un téléphone. */
.o-acces .o-pin { flex: 1 1 0; min-width: 0; max-width: 56px; height: 64px; padding: 0; text-align: center; font-family: 'Darker Grotesque', system-ui, sans-serif; font-weight: 800; font-size: 34px; }

/* Collège ou lycée : de grandes étiquettes, le bouton radio dessiné. */
.o-acces .o-radio { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; border: 1.5px solid rgba(46,66,84,.16); background: rgba(255,255,255,.8); cursor: pointer; transition: border-color .2s, box-shadow .2s, background-color .2s; }
.o-acces .o-radio:hover { border-color: rgba(46,66,84,.35); }
.o-acces .o-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.o-acces .o-radio:focus-within { box-shadow: 0 0 0 4px rgba(251,110,150,.2); }
.o-acces .o-radio:has(input:checked) { border-color: #2e4254; background: #FFFFFF; box-shadow: 0 10px 24px -14px rgba(46,66,84,.45); }
.o-acces .o-radio:has(input:checked):focus-within { box-shadow: 0 10px 24px -14px rgba(46,66,84,.45), 0 0 0 4px rgba(251,110,150,.2); }
.o-acces .o-radio input:checked + span > span { background: #2e4254; }

.o-acces .o-check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; cursor: pointer; }
.o-acces .o-check input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: #2e4254; cursor: pointer; }
.o-acces .o-check input.o-err { outline: 2px solid #c2410c; outline-offset: 2px; }

/* Un bouton qui se donne l'air d'un lien. */
.o-acces .o-ghost { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

/* Pendant l'appel au serveur. */
.o-acces [aria-busy="true"] { cursor: progress !important; opacity: .75; }

/* Lu par un lecteur d'écran, invisible à l'œil. */
.o-acces .o-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Sous 980 px, le panneau photo disparaît et le logo passe en haut du
   formulaire. */
@media (max-width: 980px) {
    .o-acces .o-side { display: none !important; }
    .o-acces .o-mlogo { display: flex !important; }
}