/* ==========================================================================
 * LA CARTE D'AUTHENTIFICATION — la grammaire commune des deux ecrans
 *
 * L'inscription et la connexion portaient deux vocabulaires etrangers pour la
 * meme composition. Les classes `signup-entry__*` et `auth-login__*` vivent
 * encore dans leurs feuilles respectives, le temps que les surfaces qui les
 * emploient ailleurs soient migrees ; ce fichier porte la carte commune, et
 * c'est lui qui grandira.
 * ========================================================================== */

.auth-card {
    display: grid;
    gap: 12px;
    width: min(420px, 100%);
    margin-inline: auto;
    /* La carte n'avait aucune gouttiere : le texte touchait les deux bords de
       l'ecran, et c'est `max-width: 34ch` sur le sous-titre qui l'en tenait
       eloigne — une mesure de confort de lecture employee comme marge. */
    padding: 4px 20px 16px;
}

.auth-card__intro h1 {
    margin: 0 0 6px;
    font-family: var(--ui-font-display, Georgia, serif);
    font-size: clamp(1.5rem, 6vw, 1.9rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.02em;
    text-wrap: balance;
}

/* La colonne porte desormais sa gouttiere : le sous-titre peut occuper toute la
   mesure au pouce, ce qui lui rend une ligne entiere. La borne de confort de
   lecture revient des que l'ecran s'ouvre. */
.auth-card__intro p {
    margin: 0;
    color: var(--ui-color-muted, #5F665D);
    font-size: .875rem;
    line-height: 1.45;
}

@media (min-width: 480px) {
    .auth-card__intro p { max-width: 34ch; }
}

/* ==========================================================================
 * L'ACCROCHE — la promesse, frappee une fois
 *
 * Elle vivait en sous-label sur CHAQUE bouton : « Le plus rapide — 2 clics »
 * sur Google, « 2 clics » sur Facebook. Repetee, elle se dilue et occupe la
 * place de deux lignes. Or elle vaut pour tous les moyens d'entrer — par
 * Facebook, par Apple demain, ou par un lien recu par courriel.
 *
 * Une fois, en tete, elle est plus forte et chaque bouton est libere.
 * ========================================================================== */

.auth-card__hook {
    margin: 0;
    color: var(--ui-color-brand, #245A3B);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.35;
}

/* ==========================================================================
 * UNE RANGEE D'ICONES, UNE SEULE GEOMETRIE
 *
 * Il y avait « un primaire, N secondaires » : Google en carte pleine largeur
 * de 52px, Facebook en pilule de 44 plafonnee a la moitie, centree. Deux
 * largeurs, deux hauteurs, deux axes — pour un meme geste. Julien, capture
 * servie : « pas beau, pas aligne, on avait dit des ICONES, sans gros bloc
 * bouton ». Le desalignement n'etait pas un defaut de la feuille, c'etait la
 * feuille : elle DEMANDAIT deux geometries.
 *
 * Tous les boutons partagent donc la meme boite, et la rangee commence au bord
 * gauche de la colonne de texte — l'alignement vient de la, pas d'un centrage
 * qui recale a chaque fournisseur ajoute ou retire.
 *
 * `flex: 0 1 148px` : meme base, meme retrait. A deux ils tiennent 304px sur
 * 335 et restent compacts ; a quatre ils retrecissent ENSEMBLE et restent
 * egaux — une base egale plus un retrait egal donnent des largeurs egales,
 * quel qu'en soit le nombre. Ajouter Apple, c'est ajouter une ligne dans
 * users/partials/auth_identity.html, jamais une regle ici.
 *
 * Ces regles sont bornees a `.auth-card` : la classe `.auth-social-button`
 * sert aussi l'ecran de creation de compte, avec un autre balisage.
 * ========================================================================== */

.auth-identity {
    display: grid;
    gap: 6px;
}

.auth-identity__row {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
}

/* Le formulaire n'est qu'un porteur de jeton : il ne doit pas creer une boite
   entre la rangee et son bouton, sinon le partage s'applique au mauvais. */
.auth-card .auth-social-button-form {
    display: contents;
}

.auth-card .auth-social-button {
    display: inline-flex;
    flex: 0 1 148px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    min-height: 48px;
    padding: 6px 12px;
    border: 1px solid var(--ui-color-line, #DFD4C3);
    border-radius: var(--ui-radius-card, 14px);
    background: var(--ui-plan-card, #FFFDF7);
    box-shadow: var(--ui-shadow-sm, 0 8px 20px rgba(27, 29, 24, .07));
    color: var(--ui-color-ink, #1B1D18);
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color 160ms var(--ui-motion-ease, ease),
                box-shadow 160ms var(--ui-motion-ease, ease),
                transform 160ms var(--ui-motion-ease, ease);
}

.auth-card .auth-social-button:hover,
.auth-card .auth-social-button:focus-visible {
    border-color: var(--ui-color-brand, #245A3B);
    box-shadow: var(--ui-shadow-float, 0 16px 42px rgba(27, 29, 24, .11));
    transform: translateY(-1px);
}

.auth-card .auth-social-button:focus-visible {
    outline: 2px solid var(--ui-color-brand, #245A3B);
    outline-offset: 2px;
}

/* LE NOM RESTE, EN RETRAIT. Julien : « libelle discret ». Un glyphe nu fait
   hesiter, mais il n'a pas besoin d'etre criard pour etre lu : c'est le logo
   qui identifie, le mot qui confirme. */
.auth-card .auth-social-button__label {
    min-width: 0;
    overflow: hidden;
    color: var(--ui-color-muted, #5F665D);
    font-size: .8125rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* VINGT-QUATRE PIXELS DE BOITE, ET C'EST UNE OBLIGATION DE CHARTE.
 *
 * Le glyphe Facebook servi vient du pack officiel : son `viewBox` porte
 * l'espace de respiration exige (1/4 de largeur de chaque cote), donc le logo
 * n'occupe que les deux tiers de sa boite. Meta impose 16 px de LOGO au
 * minimum en numerique : 16 / (2/3) = 24 px de boite. La boite de 22px
 * heritee de l'ancien dessin aurait rendu 14,7 px de logo — sous la limite.
 * Le meme plancher est tenu pour producer-liens.css, et pour la meme raison. */
.auth-card .auth-social-button .brand-mark,
.auth-card .auth-social-button .ui-icon {
    display: grid;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    place-items: center;
}

.auth-card .auth-social-button .brand-mark svg,
.auth-card .auth-social-button .ui-icon svg {
    width: 100%;
    height: 100%;
}

/* Le separateur « ou ». Il ne dit pas grand-chose et il fait beaucoup : c'est
   lui qui rend lisible qu'il existe DEUX voies, pas une voie et un accessoire. */
.auth-card__divider {
    /* VINGT-CINQ PIXELS DE MARGE QUE PERSONNE N'AVAIT DEMANDES.
     *
     * C'est un `<p>`, et aucune regle ne remettait sa marge a zero : le
     * navigateur lui donnait donc `1em` en haut et en bas — 12,5px de chaque
     * cote a .78rem. Invisible a la lecture du code, invisible au calcul, et
     * c'est la moitie des onze pixels qui faisaient tomber « Continuer par
     * e-mail » sous le pli. Seul un vrai rendu pouvait le dire. */
    margin: 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    color: var(--ui-color-muted, #5F665D);
    font-size: .78rem;
    font-weight: 600;
}

.auth-card__divider::before,
.auth-card__divider::after {
    height: 1px;
    background: var(--ui-color-sable, #E7DCC6);
    content: "";
}

.auth-card__form {
    display: grid;
    gap: 11px;
}

.auth-card__submit {
    min-height: var(--tap-size, 44px);
}

.auth-card__footer {
    margin: 0;
    color: var(--ui-color-muted, #5F665D);
    font-size: .8125rem;
    text-align: center;
}

.auth-card__footer a {
    color: var(--ui-color-brand, #245A3B);
    font-weight: 600;
}

/* Le repli mot de passe.
 *
 * Il est REPLIE, pas supprime : le lien par courriel est le chemin qu'on
 * recommande, mais un mot de passe enregistre dans un navigateur est plus
 * rapide que n'importe quel courriel. On n'enleve pas une porte qui sert — on
 * la met derriere celle qu'on prefere. */
.auth-card__fallback > summary {
    cursor: pointer;
    padding: 8px 0;
    color: var(--ui-color-muted, #5F665D);
    font-size: .82rem;
    font-weight: 600;
    text-align: center;
    list-style: none;
}

.auth-card__fallback > summary::-webkit-details-marker {
    display: none;
}

.auth-card__fallback > summary:hover,
.auth-card__fallback > summary:focus-visible {
    color: var(--ui-color-brand, #245A3B);
}

.auth-card__fallback[open] > summary {
    margin-bottom: 4px;
}

/* ==========================================================================
 * LA BULLE « BESOIN D'AIDE ? » SORT DE LA ZONE DE CHOIX
 *
 * Elle est `position: fixed`, ancree a 82px du bas. Sur l'ecran d'inscription
 * a 375x667, ce rectangle tombe exactement sur les tuiles « Particulier /
 * Professionnel ». Ce n'est pas un defaut d'esthetique : la tuile de droite
 * devient INTOUCHABLE au pouce, et le visiteur ne comprend pas pourquoi son
 * geste ne prend pas.
 *
 * La deplacer de quelques pixels ne reglerait rien : un objet fixe au-dessus
 * d'un formulaire qui defile finit toujours par recouvrir quelque chose. Il
 * faut le sortir de la surimpression.
 *
 * Elle revient donc DANS LE FLUX, a la fin de la carte — le seul endroit ou
 * elle ne peut recouvrir aucun choix, a aucune position de defilement.
 * `relative` et non `static` : le panneau qui s'ouvre est absolu et a besoin
 * de son ancre.
 *
 * La marge basse degage la barre de navigation, qui est fixe : sans elle, la
 * bulle serait a son tour recouverte.
 * ========================================================================== */

.auth-mobile-page .assistant-widget {
    position: relative;
    right: auto;
    bottom: auto;
    z-index: 1;
    display: flex;
    justify-content: center;
    margin: 2px 0 calc(var(--hp-bottom-nav-height, 0px) + 20px);
}

/* ==========================================================================
 * L'ADRESSE A RELIRE — posee, pas racontee
 *
 * Elle etait deja affichee, en gras, au milieu d'une phrase. Un producteur l'a
 * lue sans voir la lettre qui manquait, puis a attendu trente-cinq minutes un
 * message qui ne pouvait pas partir. Le gras dans une phrase se lit comme du
 * texte ; une valeur posee sur sa propre ligne, sous une etiquette, se
 * VERIFIE.
 *
 * D'ou les trois choix ci-dessous : l'etiquette en capitales espacees annonce
 * une donnee et non une suite du recit ; la valeur passe en chasse fixe, la
 * seule graphie ou « rn » ne se lit pas « m » et ou un caractere manquant se
 * voit ; le cadre sable isole le bloc du paragraphe qui le precede.
 * ========================================================================== */
.auth-card__echo {
    margin: 10px 0 0;
    padding: 10px 12px;
    display: grid;
    gap: 2px;
    border: 1px solid var(--ui-color-sable, #E7DCC6);
    border-radius: 10px;
    background: var(--ui-color-creme, #FBF8F1);
}

.auth-card__echo-label {
    color: var(--ui-color-muted, #5F665D);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.auth-card__echo-value {
    /* `break-all` et non `break-word` : une adresse n'a pas de mots, et on
       prefere qu'elle passe a la ligne n'importe ou plutot qu'elle deborde de
       la carte a 375px — un caractere hors de l'ecran est un caractere que
       personne ne relira. */
    font-family: var(--ui-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: .9375rem;
    line-height: 1.35;
    word-break: break-all;
}

.auth-card__echo-note {
    margin: 6px 0 0;
    color: var(--ui-color-muted, #5F665D);
    font-size: .8125rem;
    line-height: 1.4;
}


/* ==========================================================================
 * L'AIDE DU MUR DE CONNEXION
 *
 * Elle n'apparait qu'apres un refus, sous le formulaire a mot de passe. Elle
 * reprend le fond creme de l'echo d'adresse pour se lire comme une note et non
 * comme une erreur : ce n'est pas la faute du visiteur, c'est une etape qu'il
 * ignorait.
 * ======================================================================== */

.auth-card__aide {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid var(--ui-color-sable, #E7DCC6);
    border-radius: 12px;
    background: var(--ui-color-creme, #FBF8F1);
}

.auth-card__aide-titre {
    margin: 0 0 6px;
    font-size: .9375rem;
    font-weight: 700;
}

.auth-card__aide-texte {
    margin: 0 0 8px;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--ui-color-muted, #5F665D);
}

.auth-card__aide-form {
    margin: 10px 0 0;
}