/*
Fichier : css_espace_usager_modales.css
Chemin  : D:\speedclicV2\www\assets\css\css_espace_usager_modales.css
Rôle    : Modales de l'Espace perso (à ce jour : « Je déménage » — choix du domicile).
          Fichier séparé de la mise en page (css_espace_usager.css) pour qu'aucun des
          deux ne devienne un fourre-tout (règles 38-40).
          Boîte LARGE pour éviter les ascenseurs inutiles (règle 50), corps
          redimensionnable et défilant, fermeture visible en haut et en bas (règle 43).
          Largeurs en %, jamais en px : les proportions doivent tenir sur tablette.
*/

.ep-modale {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 26, 33, .55);
}

.ep-modale-boite {
    display: flex;
    flex-direction: column;
    width: 46%;
    min-width: 320px;
    max-width: 96%;
    max-height: 88vh;
    background: #fff;
    border: 1px solid #b6c0cb;
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
    font: 14px/1.45 system-ui, "Segoe UI", Arial, sans-serif;
    color: #2c3641;
}

/* ---- Tête : titre + fermeture visible en haut ---- */
.ep-modale-tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2%;
    padding: 10px 14px;
    background: #1f2a36;
    color: #fff;
    border-radius: 9px 9px 0 0;
}
.ep-modale-titre { font-weight: 600; font-size: 15px; }
.ep-modale-x {
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
}
.ep-modale-x:hover { background: rgba(255, 255, 255, .18); }

/* ---- Corps : redimensionnable + ascenseurs ---- */
.ep-modale-corps {
    padding: 14px;
    overflow: auto;
    resize: vertical;
    min-height: 180px;
}

.ep-champ { display: block; margin-bottom: 12px; }
.ep-champ-lbl {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #5a6774;
    margin-bottom: 4px;
}
.ep-champ-sel {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 8px;
    border: 1px solid #c3ccd6;
    border-radius: 5px;
    background: #fff;
    font-size: 14px;
}
.ep-champ-sel:disabled { background: #f1f4f7; color: #98a3ae; }

/* ---- Message : toute erreur doit être visible ---- */
.ep-modale-msg {
    min-height: 18px;
    font-size: 13px;
    color: #1e7a44;
}
.ep-modale-msg-err { color: #c0362c; font-weight: 600; }

/* ---- Pied : validation + fermeture en bas ---- */
.ep-modale-pied {
    display: flex;
    justify-content: flex-end;
    gap: 2%;
    padding: 10px 14px;
    border-top: 1px solid #e2e8ee;
    background: #f7f9fb;
    border-radius: 0 0 9px 9px;
}
.ep-btn {
    padding: 7px 16px;
    border: 1px solid #c3ccd6;
    background: #fff;
    border-radius: 5px;
    font-size: 13px;
    cursor: pointer;
}
.ep-btn:hover { background: #eef3f8; border-color: #00a6d6; }
.ep-btn-ok {
    background: #00a6d6;
    border-color: #0090ba;
    color: #fff;
    font-weight: 600;
}
.ep-btn-ok:hover { background: #0090ba; }
.ep-btn-ok:disabled { background: #9fc9d8; border-color: #9fc9d8; cursor: default; }

/* ============================================================
   Galerie des avatars Speedclic (modale « Nos avatars »).
   Grille fluide : le nombre de colonnes s'adapte, les vignettes gardent leur
   proportion — aucune largeur en px.
   ============================================================ */
/* PLUS DE PROPOSITIONS D'UN COUP D'OEIL (25/09/2026). Ramon : « élargis la fenêtre, réduis
   un peu la taille et les espaces, il faut que l'usager voie plus de propositions (en mode
   PC, il a la chance d'avoir de l'espace) ». La galerie compte 67 avatars : la fenêtre
   s'élargit (elle seule, par son identifiant), les vignettes passent à ~96 px et les
   espaces à quelques pixels. LE « gap: 3% » ÉTAIT LE PIÈGE : en hauteur, un pourcentage
   se calcule sur la hauteur de la grille — plus il y avait d'avatars, plus les rangées
   s'écartaient. */
#ep-modale-avatars .ep-modale-boite { width: 86%; max-width: 1280px; }
#ep-modale-avatars .ep-modale-corps { max-height: 74vh; }
.ep-avatars-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
    margin-bottom: 8px;
}
.ep-avatar-choix {
    padding: 4px;
    border: 1px solid #c3ccd6;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
}
.ep-avatar-choix:hover {
    border-color: #00a6d6;
    box-shadow: 0 0 0 2px rgba(0, 166, 214, .18);
}
.ep-avatar-choix img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 640px) {
    .ep-modale-boite { width: 94%; }
    #ep-modale-avatars .ep-modale-boite { width: 94%; }
    .ep-avatars-grille { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
}

/* Titres de catégories dans la galerie d'avatars (25/09/2026) */
.ep-avatars-cat {
    grid-column: 1 / -1;
    margin: 6px 0 0;
    padding: 4px 8px;
    font-weight: 600;
    font-size: 13px;
    color: #13496a;
    background: #eaf3fb;
    border-left: 3px solid #1c5fbe;
    border-radius: 3px;
}
.ep-avatars-cat:first-child { margin-top: 0; }
/* Listes dépliantes : le titre est un bouton, une flèche dit s'il est ouvert. */
.ep-avatars-cat { display: block; width: 100%; text-align: left; border-top: 0; border-right: 0; border-bottom: 0; cursor: pointer; font-family: inherit; }
.ep-avatars-cat:hover { background: #d7e9f8; }
.ep-avatars-cat::before { content: "\25B8"; display: inline-block; width: 14px; color: #1c5fbe; }
.ep-avatars-cat[aria-expanded="true"]::before { content: "\25BE"; }
.ep-avatar-choix[hidden] { display: none; }

/* Galerie dépliante des métiers (25/09/2026) : même boîte que les avatars, bustes en vignettes. */
#ep-modale-metiers .ep-modale-boite { width: 86%; max-width: 1280px; }
.ep-metiers-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 8px;
}
.ep-metiers-cat {
    grid-column: 1 / -1;
    display: block;
    width: 100%;
    text-align: left;
    margin: 4px 0 0;
    padding: 5px 8px;
    font-family: inherit;
    font-weight: 600;
    font-size: 13px;
    color: #13496a;
    background: #eaf3fb;
    border: 0;
    border-left: 3px solid #1c5fbe;
    border-radius: 3px;
    cursor: pointer;
}
.ep-metiers-cat:hover { background: #d7e9f8; }
.ep-metiers-cat::before { content: "\25B8"; display: inline-block; width: 14px; color: #1c5fbe; }
.ep-metiers-cat[aria-expanded="true"]::before { content: "\25BE"; }
.ep-metier-choix {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 4px 2px;
    background: #fff;
    border: 2px solid #cfd6dd;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
}
.ep-metier-choix[hidden] { display: none; }
.ep-metier-choix:hover { border-color: #13a8d8; }
.ep-metier-choix.ep-metier-actif { border-color: #1c5fbe; background: #f5f9fc; }
.ep-metier-choix img { width: 60px; height: 104px; object-fit: contain; }
.ep-metier-choix span { font-size: 11px; line-height: 1.2; color: #1a2535; text-align: center; }
.ep-metiers-aucun { margin-right: auto; }
.ep-metier-bouton { cursor: pointer; text-align: left; }

/* === FIN DU FICHIER : D:\speedclicV2\www\assets\css\css_espace_usager_modales.css === */

/* =====================================================================
   LES LIGNES D'ADRESSE — 13/08/2026.

   Le bloc reste FERME tant que pays, departement et ville ne sont pas remplis :
   c'est le JS qui le devoile (attribut hidden), le CSS ne fait que l'habiller.
   ===================================================================== */

.ep-bloc-adresse { margin-top: 14px; padding-top: 12px; border-top: 1px solid #e3e9ef; }
.ep-bloc-adresse[hidden] { display: none; }

/* Un code postal donne par la ville ne se corrige pas a la main. */
.ep-fige { background: #f1f4f7; color: #4a5560; font-weight: 600; }

/* Un champ pas encore utilisable est MONTRE et grise, comme les selecteurs
   Departement et Ville juste au-dessus : « non selectionnable » n'est pas
   « invisible ». La regle .ep-champ-sel:disabled, plus haut, s'en charge.
   Le libelle flottant a ete retire le 13/08 : il presentait ces lignes autrement
   que les trois selecteurs du dessus, dans la meme modale. */

/* =====================================================================
   LA PETITE MODALE DU CONTROLE D'ADRESSE — 14/08/2026.

   Ramon : « toujours indiquer a l'usager ce qui se passe ». Elle est PETITE a
   dessein : elle n'a qu'une phrase a dire, ou deux adresses a faire comparer.
   Sa boite ne reprend donc pas les 46 % de la modale « Je demenage » — une
   grande boite presque vide se lit comme une erreur d'affichage.

   Aucune largeur en px : les proportions doivent tenir sur tablette (regle des
   modales, en-tete de ce fichier).
   ===================================================================== */

/* UN PIED CACHE DOIT DISPARAITRE — ET IL NE DISPARAISSAIT PAS (14/08/2026).
   Vu a l'ecran, en ligne, pas devine : la modale montrait EN MEME TEMPS « On continue ? »
   et « Confirmer / Annuler ». L'attribut hidden ne vaut que par une regle
   display:none implicite du navigateur, et .ep-modale-pied pose display:flex — une
   regle de classe l'emporte toujours sur ce defaut-la. Le JavaScript avait raison, le
   CSS le contredisait en silence.
   CETTE REGLE REPARE AUSSI pro-avis, qui porte deux pieds depuis le 13/08 avec
   exactement le meme montage : son pied « question » ne s'est jamais cache non plus.
   Une seule ligne pour les deux, et aucune regle existante n'est retouchee. */
.ep-modale-pied[hidden] { display: none; }

.pro-adrctl-boite { width: 34%; }
.pro-adrctl-boite .ep-modale-corps { min-height: 0; resize: none; }

.pro-adrctl-texte { margin: 0 0 4px; font-size: 14px; line-height: 1.5; }

/* LES DEUX ADRESSES, L'UNE SOUS L'AUTRE ET DE MEME POIDS. Aucune des deux n'est
   mise en avant : la nôtre n'est pas la bonne par nature, et la sienne n'est pas
   suspecte par nature. C'est lui qui tranche. */
.pro-adrctl-option {
    display: block;
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid #c3ccd6;
    border-radius: 6px;
    cursor: pointer;
}
.pro-adrctl-option:hover { border-color: #00a6d6; background: #f6fbfd; }
.pro-adrctl-option:has(input:checked) {
    border-color: #00a6d6;
    box-shadow: 0 0 0 2px rgba(0, 166, 214, .18);
}
.pro-adrctl-quoi {
    display: inline-block;
    margin-left: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #5a6774;
}
.pro-adrctl-adresse {
    display: block;
    margin: 3px 0 0 24px;
    font-size: 14px;
    color: #2c3641;
}

@media (max-width: 640px) {
    .pro-adrctl-boite { width: 94%; }
}


/* =====================================================================
   L'AVERTISSEMENT AVANT DE MODIFIER UNE DONNEE CERTIFIEE — HABILLAGE RETIRE
   LE 16/08/2026, en meme temps que la modale qu'il habillait.

   Ramon : « les valeurs mobiles et email lorsqu'elles sont certifiees ne
   devraient plus pouvoir etre modifiees sans passage au bureau du revendeur »,
   puis « nettoies ma decision precedente ». Il n'y a plus de modale
   pro-certif : la ligne certifiee affiche une etiquette verte et ne s'ecrit
   plus. Les huit selecteurs .pro-certif-* ne designaient plus rien dans
   aucune page — un habillage sans vetement finit par etre recopie ailleurs
   « puisqu'il existe ».
   Le vert de l'etiquette vit dans css_espace_usager.css, avec le rouge du
   bouton qu'il remplace : les deux se lisent au meme endroit.
   ===================================================================== */

/* =====================================================================
   LA MODALE DU CONTROLE PASSE DEVANT CELLE DU DOMICILE (15/08/2026).

   MESURE, PAS SUPPOSITION : le contrôle a rendu « proposer » sur une vraie adresse
   (4 bis chemin des Carrières, Saint-Laurent-d'Arce), la modale a bien été remplie avec
   les deux écritures — et elle est restée INVISIBLE, derrière celle du domicile.

   LA CAUSE. Les deux portent la même classe .ep-modale, donc le même z-index 9000 ;
   à égalité, c'est l'ordre du DOM qui tranche, et la modale du domicile est incluse
   APRES l'écran dans index.php. Elle gagne. Rien ne le signalait : l'écran attendait
   une réponse à une question que personne ne voyait.

   ON NE TOUCHE PAS AU 9000 COMMUN. Une modale qui doit passer devant une autre le dit
   pour elle-même ; changer la valeur partagée aurait déplacé le problème sur la
   prochaine paire de fenêtres.

   LE MEME DEFAUT EXISTE SUR L'ECRAN PRO — #pro-adrctl est dans le même cas, à la même
   place dans le DOM. Il n'est PAS corrigé ici : ce lot est celui des particuliers, et
   une correction que Ramon n'a pas demandée ne part pas en douce avec le reste
   (règle 4). Elle est signalée, elle tient en une ligne, et elle l'attend.
   ===================================================================== */
#ep-adrctl { z-index: 9100; }