/* ══ Pages de passage ══════════════════════════════════════════════════════
   Connexion, inscription, mot de passe, vérification d'email, création de
   tag, confirmation d'abonnement : tous les écrans qu'on traverse sans s'y
   installer.

   Feuille séparée, chargée par ces seules pages. `dashboard.css` sert à
   quatorze gabarits et continue de fournir les jetons de couleur, la police
   et le fond — on ne redéfinit ici que ce qui change.

   Ce qui change, justement : la carte blanche à coins arrondis de 24px avec
   son ombre portée disparaît. C'était exactement le cadre qu'on évite
   partout ailleurs sur le site. À la place, une colonne posée sur le crème,
   tenue par la typographie et l'espace — comme la home et le tableau de
   bord. */

body.passage {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    min-height: 100vh;
}

.pa-colonne {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 400px;
}

.pa-colonne.large { max-width: 620px; }

/* ── La marque ──────────────────────────────────────────────────────────
   Le signe seul, discret, en haut : on sait où l'on est sans que le nom du
   produit prenne la place du titre de la page. */
.pa-marque {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Satoshi', sans-serif;
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-decoration: none;
    /* La marque ne faisait que 23px de haut : c'est le lien de retour vers
       le site, present en tete des huit pages de passage, et la seule cible
       de l'ecran sous la barre des 44px. Le rembourrage l'agrandit sans
       deplacer le logo ; la marge basse absorbe les 10px ajoutes en dessous
       pour que l'espace vu jusqu'au titre ne bouge pas. */
    padding: 11px 0;
    /* Le rembourrage grandit la boite dans les deux sens : sans la marge
       haute negative, le logo descendrait de 11px sur toutes ces pages. Les
       deux marges rendent donc exactement ce que le rembourrage a pris, et
       rien ne bouge a l'ecran — seule la zone touchable change. */
    margin: -11px 0 29px;
}

.pa-marque svg { color: var(--coral); display: block; }

/* ── Le titre ───────────────────────────────────────────────────────── */
.pa-titre {
    font-family: 'Satoshi', sans-serif;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    margin: 0 0 10px;
}

.pa-sous {
    font-size: 15.5px;
    line-height: 1.6;
    color: rgba(36, 28, 61, 0.62);
    margin: 0 0 34px;
}

.pa-sous b { color: var(--ink); font-weight: 600; }

/* ── Les champs ─────────────────────────────────────────────────────────
   Un filet dessous plutôt qu'une boîte, et il passe au coral au focus. Même
   traitement que sur « Ma carte », pour que l'inscription ressemble déjà au
   produit dans lequel elle fait entrer. */
.pa-champ { margin-bottom: 24px; }

.pa-champ label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: rgba(36, 28, 61, 0.62);
    margin-bottom: 7px;
}

.pa-champ input {
    width: 100%;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(36, 28, 61, 0.22);
    border-radius: 0;
    padding: 6px 2px;
    transition: border-color 160ms ease-out;
}

.pa-champ input::placeholder { color: rgba(36, 28, 61, 0.32); }

.pa-champ input:focus {
    outline: none;
    border-bottom-color: var(--coral);
    border-bottom-width: 2px;
    padding-bottom: 5px;
}

.pa-aide {
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(36, 28, 61, 0.45);
    margin: 7px 0 0;
}

.pa-paire { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }

/* ── L'action principale ────────────────────────────────────────────────
   Une seule par page, pleine largeur : sur un écran de passage il n'y a
   jamais qu'une chose à faire. */
.pa-bouton {
    display: block;
    width: 100%;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--cream);
    background: var(--ink);
    border: 0;
    border-radius: 999px;
    padding: 13px 26px;
    margin-top: 10px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}

/* `display: block` bat la regle `[hidden]` du navigateur : une feuille
   d'auteur passe toujours devant celle de l'agent, quelle que soit la
   specificite. Sans cette ligne, un bouton marque `hidden` reste visible —
   c'est ce qui laissait « Creer mon compte » a l'ecran sur l'inscription
   apres qu'il eut deplie la suite du formulaire, et ce qui le montrait aussi
   quand le script ne s'executait pas, ou il ne faisait rien du tout. */
.pa-bouton[hidden] { display: none; }

.pa-bouton:hover { background: #35295a; }
.pa-bouton:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }

.pa-bouton.creux {
    color: var(--ink);
    background: transparent;
    border: 1px solid rgba(36, 28, 61, 0.24);
}

.pa-bouton.creux:hover { background: transparent; border-color: var(--ink); }

/* ── Les liens de bas de page ───────────────────────────────────────── */
.pa-liens {
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pa-liens p { margin: 0; font-size: 14px; color: rgba(36, 28, 61, 0.62); }

.pa-liens a {
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1.5px solid var(--coral);
    padding-bottom: 1px;
}

.pa-liens a:hover { color: var(--coral); }
.pa-liens a:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }

/* ── Messages ───────────────────────────────────────────────────────────
   Un filet vertical plutôt qu'un bandeau plein : même vocabulaire que le
   verrou d'abonnement sur la page des tags. */
.pa-message {
    border-left: 3px solid var(--danger);
    padding: 2px 0 2px 16px;
    margin-bottom: 26px;
    font-size: 14.5px;
    line-height: 1.55;
    color: rgba(36, 28, 61, 0.75);
}

.pa-message.bien { border-left-color: var(--coral); }

/* ── Deux options côte à côte (choix du tag) ───────────────────────── */
.pa-options { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }

.pa-option { display: flex; flex-direction: column; }

.pa-option-tete {
    border-top: 2px solid var(--ink);
    padding-top: 16px;
    margin-bottom: 14px;
}

.pa-option.second .pa-option-tete { border-top-color: rgba(36, 28, 61, 0.24); }

.pa-option h2 {
    font-family: 'Satoshi', sans-serif;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 4px;
}

.pa-option .prix {
    font-family: 'Satoshi', sans-serif;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.025em;
    margin: 0 0 6px;
}

.pa-option p {
    font-size: 14px;
    line-height: 1.55;
    color: rgba(36, 28, 61, 0.62);
    margin: 0 0 20px;
}

.pa-option form { margin-top: auto; }

/* ══ Au doigt ════════════════════════════════════════════════════════════
   Les champs de ces pages sont des lignes soulignees, sans cadre : 6px de
   rembourrage vertical, donc 33px de haut. C'est la forme voulue, mais au
   doigt c'est onze pixels sous la cible de 44 tenue partout ailleurs — et
   ce sont les formulaires de connexion et d'inscription, les tout premiers
   ecrans qu'un commercant touche.

   Le rembourrage passe donc a 13px, ce qui porte le champ a 45px. Le trait
   descend de 7px sous le texte ; l'etiquette rend ces 7px sur sa marge
   basse, pour que le formulaire garde exactement sa hauteur. Le focus
   conserve son pixel de compensation, sinon le champ sauterait d'un pixel
   quand le trait s'epaissit.

   Reserve au tactile : sur un ecran de bureau, 33px se visent tres bien a
   la souris et la ligne garde son dessin. */
@media (max-width: 860px) {
    .pa-champ input {
        padding: 13px 2px;
    }

    .pa-champ input:focus {
        padding-bottom: 12px;
    }

    .pa-champ label {
        margin-bottom: 0;
    }
}

@media (max-width: 620px) {
    .pa-titre { font-size: 27px; }
    .pa-paire, .pa-options { grid-template-columns: 1fr; }
    .pa-options { gap: 30px; }
}