/* Mire de connexion (PB-16) : les options de connexion (ProConnect / Microsoft / compte local)
   s'affichent côte à côte tant qu'il y a la place, et repassent en colonne sinon. On utilise du
   flexbox plutôt que la grille DSFR (fr-grid-row/fr-col-*) car cette page imbrique la mire dans
   plusieurs conteneurs DSFR : la grille casse sur la largeur du viewport, pas sur celle,
   plus étroite, réellement disponible ici, ce qui écrasait les boutons.
   La bascule colonne/ligne se fait d'un coup (pas de flex-wrap) pour éviter un état intermédiaire
   à 2 options sur une ligne et la 3e toute seule en dessous. */
/* Élargit la carte de connexion (par défaut plafonnée à fr-col-lg-6, ~50% du viewport, via la
   grille DSFR) pour laisser la place à 3 colonnes. Un max-width simple plutôt que des classes
   fr-col-*-* supplémentaires : empiler plusieurs paliers de grille DSFR fait grandir la carte de
   façon erratique (une fraction plus petite à un grand palier peut donner, en pixels, une largeur
   plus petite qu'à un palier inférieur). */
.sf-login-card {
    max-width: 60rem;
}

/* container-type sur le parent, pas sur .sf-login-options lui-même : un conteneur ne peut pas
   fiabilement dépendre de sa propre container query pour des propriétés comme flex-direction
   (auto-référence). */
.sf-login-container {
    container-type: inline-size;
    container-name: sf-login-options;
}

.sf-login-options {
    display: flex;
    flex-direction: column;
}

.sf-login-options__item {
    box-sizing: border-box;
}

.sf-login-options__separator {
    margin: 0;
}

/* Bascule en affichage côte à côte dès que la mire a la place d'afficher les 3 options sans
   écraser leurs contenus (bouton ProConnect, bouton Microsoft, champs du formulaire) : le
   séparateur "ou" ne sert qu'à l'affichage empilé, et des filets verticaux remplacent l'espace
   vide sous les options les plus courtes par une vraie séparation visuelle entre les 3 options.
   On se base sur la largeur réellement disponible (container query) plutôt que sur le viewport,
   car cette page imbrique la mire dans plusieurs conteneurs DSFR plus étroits que la fenêtre du
   navigateur. */
@container sf-login-options (min-width: 50em) {
    .sf-login-options {
        flex-direction: row;
        align-items: stretch;
    }

    .sf-login-options__item {
        flex: 1 1 0;
        min-width: 0;
        padding: 0 1.5rem;
        border-right: 1px solid var(--border-default-grey, #ddd);
    }

    /* Réserve la même hauteur de titre pour les 3 options (2 à 3 lignes selon la traduction) afin
       que les boutons/le formulaire démarrent tous à la même hauteur, quelle que soit la longueur
       du titre traduit. Uniquement en côte à côte : empilé, chaque titre garde sa hauteur naturelle. */
    .sf-login-options__item h2 {
        min-height: 4.5rem;
    }

    .sf-login-options__item:first-child {
        padding-left: 0;
    }

    .sf-login-options__item:last-child {
        padding-right: 0;
        border-right: none;
    }

    .sf-login-options__separator {
        display: none;
    }
}