/* ==========================================================================
   « Mon compte » (FO) — habillage mobile.
   ========================================================================== */

/* Bouton de fermeture du bloc « Modifier votre famille ».
 *
 * Posé sur <body> par scripts/mobile/account.js, et non dans le bloc : le
 * voile .flou-background est en position fixed avec un z-index de 2001 et
 * couvre tout l'écran. Un bouton placé dans le flux passerait dessous, quel
 * que soit son propre empilement, faute d'appartenir au même contexte. Sur
 * <body>, il partage celui de la racine et peut le dépasser.
 *
 * En haut à droite : c'est là qu'on ferme une vue superposée, et la zone
 * reste hors de portée du pouce qui fait défiler. */
.m-famille-fermer {
    display: none;
    position: fixed;
    z-index: 2100;
    top: max(var(--m-space-3), env(safe-area-inset-top));
    right: var(--m-space-3);
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--m-line-5);
    border-radius: 50%;
    background: var(--m-bg);
    color: var(--m-ink);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

body.m-famille-ouverte .m-famille-fermer {
    display: block;
}

/* « Votre état civil » et « Vos coordonnées » : un champ par ligne.
 *
 * Le legacy aligne ces blocs sur quatre colonnes flottantes — icône ou
 * libellé (12 %), champ (55 %), libellé (13 %), champ (20 %) — accordées au
 * pixel par des margin-top en ligne. Sur un téléphone, elles tombent à 40-65 px :
 * libellés et valeurs sont coupés, et les paires ajoutées par les champs
 * paramétrables (portable pro, fixe pro, api, matricule) se replient là où la
 * ligne déborde, loin de leur libellé.
 *
 * On garde les colonnes du legacy mais on les range sur deux pistes : libellé
 * à gauche, champ à droite. Chaque colonne libellé (blocgauche1, blocdroite1)
 * ouvre une nouvelle ligne, sa colonne champ la complète : les paires tiennent
 * quel que soit leur nombre, et l'alignement interne de chaque colonne, déjà
 * réglé par le legacy, reste valable. */
#bloc_etat_civil,
#bloc_coordonnees_perso {
    --m-compte-libelle: 76px;
}

#bloc_etat_civil .blocgauche1 .compte_normal,
#bloc_etat_civil .blocdroite1 .compte_normal,
#bloc_coordonnees_perso .blocgauche1 .compte_normal,
#bloc_coordonnees_perso .blocdroite1 .compte_normal {
    overflow-wrap: anywhere;
}

#bloc_etat_civil input,
#bloc_etat_civil select,
#bloc_coordonnees_perso input {
    max-width: 100%;
    box-sizing: border-box;
}

/* Coordonnées : une grille. Elle est posée sur .bloc_haut et .bloc_bas, que
   rien ne replie — jamais sur le bloc que « Vos coordonnées » ouvre et ferme. */
#bloc_coordonnees_perso > .bloc_haut,
#bloc_coordonnees_perso > .bloc_bas {
    display: grid;
    grid-template-columns: var(--m-compte-libelle) minmax(0, 1fr);
    column-gap: var(--m-space-2);
    align-items: start;
    float: none;
}

#bloc_coordonnees_perso > .bloc_haut > .blocgauche1,
#bloc_coordonnees_perso > .bloc_haut > .blocdroite1,
#bloc_coordonnees_perso > .bloc_bas > .blocgauche1,
#bloc_coordonnees_perso > .bloc_bas > .blocdroite1 {
    grid-column: 1;
    width: auto;
    float: none;
}

#bloc_coordonnees_perso > .bloc_haut > .blocgauche2,
#bloc_coordonnees_perso > .bloc_haut > .blocdroite2,
#bloc_coordonnees_perso > .bloc_bas > .blocgauche2,
#bloc_coordonnees_perso > .bloc_bas > .blocdroite2 {
    grid-column: 2;
    width: auto;
    float: none;
}

/* En-têtes « Personnelles » / « Professionnelles » : l'icône dans la piste
   des libellés, le titre à côté, le filet sur toute la largeur. */
#bloc_coordonnees_perso > .bloc_haut > .img_sprite,
#bloc_coordonnees_perso > .bloc_bas > .img_sprite {
    grid-column: 1;
    justify-self: end;
    float: none;
}

#bloc_coordonnees_perso > .bloc_haut > #perso,
#bloc_coordonnees_perso > .bloc_bas > #pro {
    grid-column: 2;
    float: none;
}

#bloc_coordonnees_perso > .bloc_haut > hr,
#bloc_coordonnees_perso > .bloc_bas > hr {
    grid-column: 1 / -1;
    width: 100%;
    float: none;
    margin-top: 0;
}

#bloc_coordonnees_perso > .bloc_haut > #spacer,
#bloc_coordonnees_perso > .bloc_bas > #spacer,
#bloc_coordonnees_perso > .bloc_bas > .spacer {
    display: none;
}

/* État civil : les mêmes deux pistes, mais en flottants. Ses colonnes sont
   enfants directes de #bloc_etat_civil, que l'accordéon replie par
   slideToggle : jQuery mémorise le display calculé au premier repli et le
   réécrit en ligne à chaque dépliage. Un display: grid posé ici survivrait
   donc au passage en largeur ordinateur (tablette qu'on tourne). On ne touche
   pas au display du bloc ; le .spacer du legacy referme les flottants. */
#bloc_etat_civil {
    width: auto;
    padding: 0 var(--m-space-3);
}

/* Sans marge haute : celle de .blocdroite2, dans le flux, fusionne avec la
   marge basse du bloc précédent ; celle d'un flottant s'y ajouterait. */
#bloc_etat_civil > .blocdroite1 {
    float: left;
    clear: left;
    width: var(--m-compte-libelle);
    margin-top: 0;
}

/* La civilité est un champ, pas un libellé : elle rejoint la piste des
   champs, sur sa propre ligne. */
#bloc_etat_civil > .blocgauche1,
#bloc_etat_civil > .blocgauche2,
#bloc_etat_civil > .blocdroite2 {
    float: none;
    width: auto;
    margin-left: calc(var(--m-compte-libelle) + var(--m-space-2));
    text-align: left;
}

#bloc_etat_civil > .blocgauche1 {
    margin-bottom: 0;
}

/* « Vos revenus » : les colonnes l'une sous l'autre.
 *
 * Chaque personne (le bénéficiaire, puis le conjoint) a une colonne « avis
 * d'imposition » (.blocgauche, 50 %) et une colonne « bulletin de paie »
 * (.blocdroite, 45 %, flottant à droite) que le script ne montre qu'en
 * l'absence d'avis. Sur un téléphone, la première tient dans 145 px et laisse
 * la moitié droite vide : libellés, champs et cases à cocher se replient mot
 * à mot. Pleine largeur pour les deux ; leur display, piloté en ligne par le
 * script, n'est pas touché. */
#bloc_vos_revenus {
    width: auto;
    padding: 0 var(--m-space-3);
}

#bloc_vos_revenus .blocgauche,
#bloc_vos_revenus .blocdroite {
    float: none;
    width: auto;
}

#bloc_vos_revenus .blocdroite {
    margin-top: var(--m-space-3);
}

#bloc_vos_revenus input[type="text"] {
    max-width: 100%;
    box-sizing: border-box;
}

/* « Vos informations à justifier ».
 *
 * Sur ordinateur, c'est la colonne de droite : width 100 % plus un
 * margin-left de 20 px, que la colonne absorbe. Sur un téléphone, le bloc
 * dépasse donc de 20 px à droite de l'écran, et #bloc_droite (overflow
 * hidden) le coupe : le lien « Modifier vos justificatifs » et l'icône d'aide
 * sortent du cadre. Le titre, en 25 px sur 68 % de large, se casse en deux
 * lignes et pousse l'icône d'aide hors de l'écran.
 *
 * Portée : #justificatifs enfant direct de #bloc_droite, c'est-à-dire « Mon
 * compte ». La page « Modifier vos justificatifs » réutilise ces ID, imbriqués
 * autrement. */
#bloc_droite > #justificatifs {
    width: auto;
    margin-left: 0;
    float: none;
    padding: var(--m-space-3) var(--m-space-3) 0;
    box-sizing: border-box;
    display: flow-root;
}

#bloc_droite > #justificatifs > #justificatifs_titre {
    width: auto;
    max-width: calc(100% - 100px);
    margin-left: var(--m-space-3);
    font-size: var(--m-fs-lg);
    line-height: 30px;
}

#bloc_droite > #justificatifs > #filtres_justif {
    clear: both;
    padding: 0;
}

#bloc_droite > #justificatifs #hr_justifs {
    width: 100%;
}

#bloc_droite > #justificatifs .modif {
    float: none;
    clear: both;
    text-align: right;
    margin: var(--m-space-2) 0;
    font-size: var(--m-fs-sm);
}

/* Bouton « Télécharger » / « Modifier » des fenêtres de justificatif.
 *
 * La zone cliquable est un <input type="file"> transparent ; le libellé et
 * son icône sont un bloc en position absolute posé à gauche. Mais la cellule
 * qui les porte centre son contenu : l'input (50 % de large) se retrouve au
 * milieu, le libellé à gauche, et seule la partie droite du bouton répond.
 *
 * On remet le libellé dans le flux et on étend l'input sur toute sa boîte :
 * la zone de clic est exactement ce qui est dessiné. Même balisage dans les
 * dix fenêtres de justificatif, d'où le sélecteur générique. L'affichage du
 * bloc n'est pas touché : « union libre » masque et montre son second bouton
 * par un display en ligne. */
#pied_popup_justificatif .telecharger {
    position: relative;
    min-height: var(--m-tap);
    padding: 0 var(--m-space-3);
    box-sizing: border-box;
}

#pied_popup_justificatif .telecharger > div {
    position: static !important;
    width: auto !important;
    margin: 0 !important;
}

#pied_popup_justificatif .telecharger > input[type="file"] {
    position: absolute;
    box-sizing: border-box;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100%;
    margin: 0;
    padding: 0;
}