/* ============================================================
   Pages d'authentification (connexion, inscription, mot de passe)
   Complète marketing.css : mêmes jetons, boutons (.btn) et champs (.champ).
   ============================================================ */
body.auth{background:var(--brume);min-height:100vh;display:flex;flex-direction:column}
.auth__main{flex:1;display:flex;align-items:center;padding:36px 0 56px}
.auth__grille{display:grid;gap:28px;align-items:stretch}
@media (min-width:960px){.auth__grille{grid-template-columns:1fr 1fr;gap:40px}}

/* Panneau d'ambiance (grand écran uniquement) */
.auth__ambiance{display:none;position:relative;overflow:hidden;background:var(--nuit);color:#fff;border-radius:var(--r-l);padding:48px;box-shadow:var(--sh3)}
@media (min-width:960px){.auth__ambiance{display:flex;flex-direction:column;justify-content:center}}
.auth__ambiance h2{color:#fff;font-size:clamp(32px,3.4vw,44px);margin-bottom:18px}
.auth__ambiance h2 em{font-style:normal;color:var(--soleil)}
.auth__ambiance p{color:rgba(255,255,255,.72);max-width:420px}
.auth__atouts{list-style:none;padding:0;margin:32px 0 0;display:grid;gap:14px}
.auth__atouts li{display:flex;gap:12px;align-items:flex-start;color:rgba(255,255,255,.88)}
.auth__atouts li::before{content:"";flex:none;width:9px;height:9px;margin-top:9px;border-radius:50%;background:var(--menthe)}
.auth__halo{position:absolute;right:-140px;bottom:-140px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(255,198,61,.32),transparent 70%);pointer-events:none}

/* Boutons de formulaire (input submit) : sans la bordure du navigateur */
.auth input.btn{border:0;cursor:pointer;-webkit-appearance:none;appearance:none}

/* Carte du formulaire */
.auth__carte{background:var(--blanc);border-radius:var(--r-l);box-shadow:var(--sh2);padding:30px 22px;max-width:540px;width:100%;margin:0 auto}
@media (min-width:600px){.auth__carte{padding:44px}}
.auth__carte h1{font-size:clamp(28px,4vw,36px);margin-bottom:8px}
.auth__intro{color:var(--gris);margin-bottom:26px}
.auth__ligne{display:grid;gap:0 14px}
@media (min-width:600px){.auth__ligne{grid-template-columns:1fr 1fr}}
.auth__aide{display:block;font-size:13px;color:var(--gris-2);margin-top:6px}

.auth__entre{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;margin:2px 0 22px;font-size:14.5px}
.auth__souvenir{display:inline-flex;align-items:center;gap:9px;color:var(--gris);cursor:pointer}
.auth__souvenir input{width:18px;height:18px;accent-color:var(--nuit)}

.auth .lien{color:var(--nuit-3);font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--soleil);transition:color .15s}
.auth .lien:hover{color:var(--miel)}

.auth__bas{margin-top:26px;padding-top:22px;border-top:1px solid var(--trait);display:grid;gap:10px;text-align:center;font-size:15px;color:var(--gris)}

/* Messages (flash, erreurs de validation) */
.auth__message{border-radius:var(--r-s);padding:14px 16px;margin-bottom:22px;font-size:15px;font-weight:500;line-height:1.5}
.auth__message--ok{background:rgba(45,212,160,.14);color:#0F6B50}
.auth__message--erreur{background:rgba(255,107,90,.12);color:#A3321F}
.auth__message ul{margin:6px 0 0;padding-left:18px}

/* Option « conduire avec Ikataxi » : le choix du type n'apparaît que si elle est cochée */
.auth__case{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1.5px solid var(--trait);border-radius:var(--r-s);cursor:pointer;margin:4px 0 14px;transition:border-color .15s,background .15s}
.auth__case:hover{border-color:var(--gris-2)}
.auth__case:has(input:checked){border-color:var(--soleil);background:rgba(255,198,61,.1)}
.auth__case input{flex:none;width:20px;height:20px;margin-top:2px;accent-color:var(--nuit)}
.auth__case strong{display:block}
.auth__case span{font-size:14px;color:var(--gris)}
.auth__conducteur{display:none}
.auth__form:has(.auth__case input:checked) .auth__conducteur{display:block}
.auth__form:has(.auth__case input:checked) .auth__conducteur-masque{display:none}

/* Onglets Téléphone / E-mail : le bloc .auth__mode--<mode> suit le bouton coché */
.auth__onglets{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin-bottom:22px;background:var(--brume);border:1.5px solid var(--trait);border-radius:99px}
.auth__onglets label{position:relative;display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px 12px;border-radius:99px;font-weight:600;font-size:15px;color:var(--gris);cursor:pointer;transition:background .15s,color .15s,box-shadow .15s}
.auth__onglets input{position:absolute;opacity:0;pointer-events:none}
.auth__onglets label:has(input:checked){background:var(--blanc);color:var(--nuit);box-shadow:var(--sh1)}
.auth__onglets label:has(input:focus-visible){outline:3px solid var(--ciel);outline-offset:2px}
.auth__bascule .auth__mode{display:none}
.auth__bascule:has(.auth__onglets input[value="phone"]:checked) label.auth__mode--phone,
.auth__bascule:has(.auth__onglets input[value="phone"]:checked) form.auth__mode--phone,
.auth__bascule:has(.auth__onglets input[value="email"]:checked) label.auth__mode--email,
.auth__bascule:has(.auth__onglets input[value="email"]:checked) form.auth__mode--email{display:block}
.auth__bascule:has(.auth__onglets input[value="phone"]:checked) span.auth__mode--phone,
.auth__bascule:has(.auth__onglets input[value="email"]:checked) span.auth__mode--email{display:inline}
.auth__bascule:has(.auth__onglets input[value="phone"]:checked) .auth__aide.auth__mode--phone{display:block}
.champ__lab small{font-weight:500;color:var(--gris-2)}

/* Code SMS */
.champ input.auth__code{font-family:var(--meca);font-size:26px;letter-spacing:.5em;text-align:center;padding-left:calc(16px + .5em)}
.auth__renvoi{margin-top:12px}

/* Pages de texte (confidentialité, suppression de compte), layout "legal" */
.auth__carte--texte{max-width:880px}
.texte h2{font-size:clamp(20px,2.6vw,24px);margin:32px 0 10px}
.texte p,.texte li{color:var(--texte)}
.texte ul{padding-left:20px;margin:8px 0 0;display:grid;gap:6px}
.texte table{width:100%;border-collapse:collapse;margin-top:10px;font-size:15px}
.texte th,.texte td{text-align:left;vertical-align:top;padding:10px 8px;border-bottom:1px solid var(--trait)}
.texte th{font-weight:700}
.texte .a-completer{background:rgba(255,198,61,.25);padding:0 4px;border-radius:4px}