/*
Fichier : css_espace_pro_annuaire.css
Chemin  : D:\speedclicV2\www\assets\css\css_espace_pro_annuaire.css
Role    : L'ECRAN « GESTION PUBLICITE ANNUAIRE » — le grand modele.

          IL PREND LES TROIS COLONNES, et c'est ce qui le distingue des trois autres
          ecrans de cet espace. Ramon, 24/08/2026 : « cet espace de publicité prend TOUT
          l'espace de l'écran exception faite du menu de gauche qui doit toujours resté
          accessible à la navigation ».
          Le menu de gauche vit HORS de .esp-area : il n'est donc jamais recouvert, et
          il n'y a rien a ecrire ici pour le proteger — c'est la grille qui s'en charge.

          LA BASCULE EST UNE CLASSE SUR LA SECTION, comme .epb-ouverte, .epc-ouverte et
          .epu-ouverte : on ne retouche pas la grille, on ajoute un etat. Quatre ecrans
          qui occupent la meme aire, une seule facon de le faire.

          SA PROPRE FEUILLE (regles 37-39).
Ecrit le: 24/08/2026
*/

/* LES TROIS COLONNES ET LES TROIS RANGEES : l'aire entiere, rien de moins. Les huit
   blocs de l'espace disparaissent ensemble — les laisser dessous les ferait defiler
   derriere l'ecran. */
#sc-espace-pro.epa-ouverte {
    grid-template-areas:
        "annuaire annuaire annuaire"
        "annuaire annuaire annuaire"
        "annuaire annuaire annuaire";
}
#sc-espace-pro.epa-ouverte .esp-ident,
#sc-espace-pro.epa-ouverte .esp-geo,
#sc-espace-pro.epa-ouverte .esp-tools,
#sc-espace-pro.epa-ouverte .esp-right,
#sc-espace-pro.epa-ouverte .esp-hi,
#sc-espace-pro.epa-ouverte .esp-fav,
#sc-espace-pro.epa-ouverte .esp-cards,
#sc-espace-pro.epa-ouverte .esp-coord { display: none; }

.epa {
    grid-area: annuaire;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #fff;
    border: 1px solid #cfd6dd;
    border-radius: 6px;
    overflow: hidden;
}

/* ---- La barre du haut : la meme que les trois autres ecrans ---- */
/* .epa-desig et .epa-sous ONT ETE RETIRES LE 25/08 avec la ligne de designation :
   plus aucune balise ne les porte, et une regle sans balise est une regle morte. */
.epa-tete {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    background: #22303d;
    color: #fff;
}
.epa-titre  { font-size: 14px; font-weight: 700; }
/* LE NIVEAU DU PACK se lit d'un coup d'oeil : c'est lui qui dit ce que l'ecran permet. */
/* CE N'EST PLUS UNE PASTILLE (25/08). Elle portait « Grand modele » — un nom, donc une
   etiquette. Elle porte maintenant le terme du pack et le format : deux renseignements
   qu'on lit une fois. Un renseignement ne se met pas en pastille blanche sur une barre
   sombre, il s'ecrit en clair et il s'efface. */
.epa-niveau {
    margin-right: auto;
    padding: 0;
    background: none;
    color: #b6c2ce;
    font-size: 12px;
    font-weight: 400;
}
.epa-retour {
    white-space: nowrap;
    padding: 4px 12px;
    border: 1px solid #a3231b;
    border-radius: 4px;
    background: #c0392b;
    color: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.epa-retour:hover { background: #a3231b; }

/* ---- Ce qu'on possede, sur UNE ligne sous la barre ---- (24/08/2026)
   Ramon : « ces deux lignes prennent de la place inutilement. La première peut être sur
   la même ligne que la précédente en léger décalage. » Le nom et le terme se lisent
   ensemble ; empiles, ils prenaient deux hauteurs pour une seule information.
   LE DECALAGE EST UNE MARGE, PAS UN SAUT DE LIGNE : le terme suit le nom, en gris et
   plus petit — il accompagne, il ne concurrence pas. Et si le nom est long, l'ensemble
   se replie naturellement plutot que de deborder. */



/* .epa-avis A ETE RETIRE avec le bandeau « cet ecran est une proposition » : une regle
   de style sans balise est une regle morte qu'on relit un jour comme si elle vivait. */

/* ═══ AUCUNE INFORMATION EN BAS, DONC AUCUN ASCENSEUR ═══        (25/08/2026)
   Ramon : « Aucune info ne doit aller en bas. Donc INTERDICTION d'utiliser un ascenseur. »
   Un ascenseur vertical ici serait un aveu : il dirait que l'ecran ne tient pas dans la
   page alors qu'il montre une fiche qui, elle, tient. Le corps devient donc une COLONNE
   qui se partage la hauteur restante, et chaque bloc prend ce qu'il lui faut, pas plus.
   overflow: hidden n'est pas une facon de cacher le debordement : c'est la garantie qu'un
   debordement se VOIE tout de suite en developpement, au lieu d'etre absorbe par une
   barre (regle 13). Les rangees de photos et d'annonces, elles, defilent HORIZONTALEMENT
   avec leurs fleches — c'est leur dessin, pas un contournement. */
.epa-corps {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: 8px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.epa-corps > .epa-bloc { margin-bottom: 0; }
/* UNE LIGNE ENTRE LES PHOTOS ET LES ANNONCES (25/08, demande de Ramon). Sans le titre
   « Vos 9 photos », les deux rangees se touchaient et se lisaient comme une seule suite
   de vignettes. Le trait dit qu'on change de sujet — c'est le role qu'occupait le titre,
   rendu par un trait au lieu d'une phrase. */
.epa-corps > .epa-bloc:last-of-type { border-top: 1px solid #e6e6e6; padding-top: 10px; }
/* La ligne haute prend la place qui reste ; les deux rangees gardent la leur. */
/* « 1 0 auto » ET NON « 1 1 auto », ET C'EST MESURE (25/08) : avec le second, la ligne
   haute se faisait RETRECIR a 254 px alors que son contenu en demandait 297, et les
   43 px manquants emportaient le champ « Titre affiche sous l'image » — invisible, sans
   rien pour le signaler. Elle grandit donc pour prendre la place qui reste, mais elle ne
   descend JAMAIS sous la hauteur de ce qu'elle contient. */
.epa-corps > .epa-bloc:first-of-type { flex: 1 0 auto; display: flex; flex-direction: column; }
.epa-corps > .epa-bloc:first-of-type > .epa-in { flex: 1 0 auto; }
.epa-vide  { margin: 12px 0; font-size: 13px; color: #6b7885; }

/* ---- Un bloc par prestation du pack ---- */
/* ═══ SEULS LA PHOTO ET LA CARTE PORTENT UN CADRE ═══           (25/08/2026)
   Ramon : « les cadres pour photo ou carte ok. Les autres parasitent l'affichage. »
   Et il a raison pour une raison precise : sur CET ecran, un cadre a un SENS — il dit
   « ici, il manque quelque chose a deposer ». Le pointille de la photo et celui de la
   carte annoncent une place a remplir. Un cadre autour d'un bloc, lui, n'annonce rien :
   il decoupe l'ecran en boites alors que l'ecran doit ressembler a UNE FICHE, celle que
   le visiteur verra — et le visiteur, lui, ne voit aucune boite.
   Les blocs ne gardent donc que leur titre et l'air autour d'eux. */
.epa-bloc { border: 0; border-radius: 0; margin-bottom: 12px; }
.epa-bloc > h3 {
    margin: 0 0 6px;
    padding: 0 2px 4px;
    background: none;
    border-bottom: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #8a95a0;
}
/* Le compte et la taille attendue, a droite du titre : on sait ce qu'on doit fournir
   avant d'ouvrir le selecteur de fichier. */
.epa-bloc > h3 span { float: right; font-weight: 400; font-size: 11px; color: #6b7885; }
.epa-in { padding: 0 2px; }

/* LA LIGNE HAUTE DE LA FICHE : image, texte, documents et carte — le dessin de Ramon
   du 24/08. Trois colonnes, la premiere a la largeur de l'emplacement vendu. */
/* ═══ LA LIGNE HAUTE, REDESSINEE ═══                            (25/08/2026)
   Ramon : « Le texte de presentation moitie de largeur. Du coup les 5 fichiers prennent
   leur place a la droite du texte de presentation. »
   QUATRE COLONNES : l'image (avec son titre dessous), le texte, les fichiers, la carte.
   Le texte et les fichiers partagent a PARTS EGALES la place que le texte occupait seul —
   c'est exactement ce que « moitie de largeur » veut dire, et c'est le grid qui le tient,
   pas une largeur en pixels qui mentirait des que la fenetre change. */
.epa-trois {
    display: grid;
    grid-template-columns: minmax(220px, 300px) minmax(200px, 1fr) minmax(200px, 1fr) minmax(300px, 390px);
    gap: 14px;
    align-items: start;
}
/* Le texte de presentation descend jusqu'au bas de sa colonne au lieu de compter ses
   lignes : la hauteur est celle de la ligne, elle n'a pas a etre devinee en « rows ». */
.epa-texte { min-height: 150px; height: 100%; resize: vertical; }

/* ═══ LE BLOC D'IDENTITE ═══                                     (25/08/2026)
   L'adresse a gauche, les coordonnees a droite, et la place entierement occupee : c'est
   ce bloc qui a comble le vide laisse par le pied, et qui rapproche la grande photo des
   neuf autres (Ramon : « la grande photo [etait] trop eloignee des autres »).
   DEUX COLONNES QUI NE SE MELANGENT PAS : une adresse se lit en lignes empilees, une
   liste de coordonnees en couples libelle/valeur. Les presenter pareil rendrait l'une
   des deux illisible. */
.epa-identite {
    display: grid;
    /* QUATRE COLONNES DEPUIS LE 25/08 : le logo, les metiers, l'adresse, les coordonnees.
       C'est l'ordre de lecture d'une fiche — qui c'est, ce qu'il fait, ou il est, comment
       le joindre. Le logo a une largeur FIXE : une image qui dicterait la largeur de sa
       colonne ferait bouger les trois autres a chaque societe. */
    /* LES QUATRE COLONNES SE PARTAGENT TOUTE LA LARGEUR (25/08, deuxieme passe). Ramon :
       « en haut tu as de la place, decales encore les infos ». Mesure : le bloc fait
       1531 px et les quatre colonnes s'arretaient a 1150 — 400 px de blanc a droite,
       pendant qu'un metier se cassait sur deux lignes faute de 90 px.
       LES TROIS COLONNES DE TEXTE SONT EN 1fr : elles avancent ensemble quand l'ecran
       s'elargit, au lieu de rester collees a gauche. Le logo garde sa largeur fixe —
       une image qui dicterait sa colonne ferait bouger les trois autres a chaque
       societe. */
    grid-template-columns: 190px minmax(320px, 1fr) minmax(220px, 0.8fr) minmax(320px, 1.1fr);
    gap: 10px 48px;
    padding: 4px 2px 12px;
    border-bottom: 1px solid #e6e6e6;
    margin-bottom: 12px;
    font-size: 13px;
    /* HAUTEUR FIXE, ET C'EST LE POINT (25/08). Elle vaut les SIX lignes de coordonnees,
       remplies ou non. Ramon : « double l'espace du haut contenant les coordonnees » —
       ce bloc passe ainsi de 46 a 150 px, et c'est autant que la photo, les fichiers et
       la carte descendent : l'ecart avec les rangees du bas se referme d'autant.
       flex-shrink est neutralise plus bas : un bloc « fixe » qui se laisse comprimer
       n'est pas fixe. */
    min-height: 150px;
    align-content: start;
}
/* La ligne haute ne doit pas prendre sa place a ce bloc. */
.epa-corps > .epa-bloc:first-of-type > .epa-in > .epa-identite { flex: 0 0 auto; }
/* Une valeur absente occupe sa ligne sans rien dire. */
.epa-ct-vide { min-height: 1.45em; }

/* LE LOGO : la case reste, remplie ou non — meme principe que les six lignes. Le
   pointille dit une place a remplir, comme pour la photo et la carte.
   190 x 138 DEPUIS LE 25/08, ET C'EST MESURE. Ramon : « le logo semble minuscule, c'est
   une representation de la societe [...] remplis au moins l'espace ». Il avait raison
   deux fois : la case de 108 laissait 41 px de vide sous une image de 105 x 67, ET
   l'image etait RETRECIE — son fichier fait 180 x 115.
   La case prend donc toute la hauteur du bloc et la largeur d'un logo en paysage. L'image
   garde max-width/max-height SANS largeur imposee : elle monte jusqu'a sa taille reelle
   et s'y arrete. Agrandir au-dela de son fichier ne la rendrait pas plus grande, seulement
   plus floue. */
.epa-logo {
    width: 190px;
    height: 138px;
    border: 1px dashed #b9c3cd;
    border-radius: 4px;
    background: #fbfcfd;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.epa-logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

/* LES METIERS : le code puis sa designation, le code aligne a gauche pour que l'oeil
   descende la colonne sans revenir en arriere. */
.epa-metiers { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-content: start; }
.epa-met { display: contents; }
.epa-met-c { color: #6b7885; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* UNE PROFESSION TIENT SUR UNE LIGNE (Ramon, 25/08 : « inutile de mettre une profession
   sur deux lignes »). Sa colonne est dimensionnee pour ca ; si un libelle depassait
   malgre tout, il se coupe par des points de suspension plutot que de casser la hauteur
   du bloc, qui doit rester constante d'une societe a l'autre. */
.epa-met-n { color: #22303d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* L'adresse : des lignes serrees, comme sur une enveloppe. La premiere porte le numero
   et la voie — c'est elle qu'on cherche du regard. */
.epa-adr-l { line-height: 1.45; color: #22303d; }
.epa-adr-l:first-child { font-weight: 700; }

/* Les coordonnees : deux colonnes, les libelles alignes, les valeurs alignees. Un
   libelle qui flotte oblige a relire pour savoir a quoi va le numero. */
.epa-contacts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 14px;
    align-content: start;
}
.epa-ct { display: contents; }
.epa-ct-l { color: #6b7885; white-space: nowrap; }
.epa-ct-v { color: #17457f; text-decoration: none; overflow-wrap: anywhere; }
.epa-ct-v:hover { text-decoration: underline; }

/* .epa-titres et .epa-titre-fic ONT ETE RETIRES LE 25/08 : les cinq intitules ne sont
   plus un apercu a part, ils SONT les cinq fichiers (.epa-fic). Une regle de style sans
   balise est une regle morte qu'on relit un jour comme si elle vivait. */

/* .epa-lbl A ETE RETIRE LE 25/08 : plus aucun libelle n'est pose AU-DESSUS d'un champ,
   ils sont tous DEDANS. Une regle sans balise est une regle morte. */
/* LES CHAMPS NE SONT PLUS DES BOITES AU REPOS. Un trait fin dessous suffit a dire
   « on ecrit ici » ; le cadre complet ne revient qu'au survol et a la saisie, c'est-a-dire
   au moment ou il sert. L'ecran au repos ressemble alors a la fiche, pas a un formulaire. */
.epa-champ {
    width: 100%;
    padding: 4px 2px;
    border: 1px solid transparent;
    border-bottom-color: #dde3e9;
    border-radius: 3px;
    background: none;
    font: inherit;
}
.epa-champ::placeholder { color: #8a95a0; opacity: 1; }
.epa-champ:hover  { border-color: #cfd6dd; }
.epa-champ:focus  { border-color: #1c5fbe; outline: none; background: #fff; }

/* ═══ LES NEUF PHOTOS ONT LE FORMAT DE L'EMPLACEMENT ═══         (24/08/2026)
   Ramon : « la principale et les 8 autres sont toutes au même format, pour avoir une
   belle qualité dans le diaporama ». Elles ne sont donc plus verticales : elles prennent
   le rapport du produit, pose en variables CSS par la vue. Un format unique, c'est une
   seule maquette a fournir et un diaporama qui ne saute pas d'une image a l'autre. */
.epa-photo {
    position: relative;
    flex: 0 0 auto;
    width: 208px;
    aspect-ratio: var(--epa-l, 800) / var(--epa-h, 570);
    border: 1px dashed #b9c3cd;
    border-radius: 4px;
    background: #fbfcfd;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #6b7885;
    font-size: 11px;
    cursor: pointer;
}
.epa-photo:hover { background: #f2f6fb; border-color: #1c5fbe; }

/* ═══ UNE CASE QUI PORTE SON IMAGE ═══                            (25/08/2026)
   L'image est posee en FOND et non en <img> : la case garde ainsi le rapport exact de
   l'emplacement vendu (aspect-ratio), et une photo de proportion differente se cadre
   dedans au lieu de deformer la rangee. « cover » plutot que « contain » : c'est ce que
   le visiteur verra, l'emplacement etant toujours rempli en ligne.
   LE TRAIT DEVIENT PLEIN : le pointille annonce une place a remplir, il n'a rien a faire
   autour de ce qui est deja la — meme regle que la carte. */
.epa-photo-pleine {
    background-size: cover;
    background-position: center;
    border-style: solid;
    border-color: #cfd6dd;
}
/* Le « + » et les mentions s'effacent : l'image dit deja tout. Ils reviennent au survol,
   parce qu'il faut pouvoir REMPLACER une photo sans la deviner. */
.epa-photo-pleine > span { opacity: 0; transition: opacity .12s; }
.epa-photo-pleine:hover > span { opacity: 1; }
.epa-photo-pleine:hover { box-shadow: inset 0 0 0 999px rgba(255,255,255,.72); }

/* Un fichier choisi le DIT : le bouton passe au vert et son survol donne le nom. */
.epa-fic-dl-pose { background: #1f7a3d; }
.epa-fic-dl-pose:hover { background: #16602f; }
.epa-plus     { font-size: 22px; color: #1c5fbe; line-height: 1; }
.epa-photo-nom{ font-weight: 700; color: #55606d; }
.epa-photo-px { font-size: 10px; }

/* La premiere case tient toute la largeur de sa colonne : c'est l'image de presentation,
   celle qu'on regarde avant les autres. */
.epa-photo-1 { width: 100%; }

/* LE SELECTEUR DE FICHIER EST CACHE, PAS ABSENT : c'est le <label> qui l'ouvre, donc
   toute la case est cliquable — et le clavier y arrive comme a n'importe quel champ. */
.epa-fichier { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ═══ UNE RANGEE QUI DEFILE, AVEC SES DEUX FLECHES ═══           (24/08/2026)
   Ramon : « il va falloir une flèche pour faire dérouler les vignettes du bas de gauche
   à droite. On vise le marché des PC et Mac dans un premier temps. »
   La piste defile aussi a la molette et au doigt ; les fleches sont la pour la souris,
   qui n'a rien d'autre. Le telephone aura son propre dessin, plus tard. */
.epa-rangee { display: flex; align-items: center; gap: 6px; }
.epa-piste {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    /* PAS DE « scroll-behavior: smooth » ICI, ET C'EST MESURE (24/08/2026). Avec lui,
       l'animation etait annulee des son depart sur ce poste — la piste ne bougeait pas
       d'un pixel, ni par les fleches ni par une ecriture directe de scrollLeft. Sans
       lui, le saut est instantane et il marche partout. Un defilement qui glisse
       joliment chez la moitie des gens et ne marche pas chez l'autre moitie n'est pas un
       defilement. */
    padding-bottom: 4px;
}
/* La barre de defilement reste visible : elle DIT qu'il y a autre chose a droite. */
.epa-piste::-webkit-scrollbar { height: 8px; }
.epa-piste::-webkit-scrollbar-thumb { background: #cfd6dd; border-radius: 4px; }

.epa-fleche {
    flex: 0 0 auto;
    width: 22px;
    height: 46px;
    border: 0;
    background: none;
    cursor: pointer;
    position: relative;
    color: #8a95a0;
}
.epa-fleche:hover { color: #1c5fbe; }
/* Le chevron est dessine — deux traits, aucune police n'intervient (lecon du 13/08). */
.epa-fleche::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 8px; height: 8px;
    border-right: 2px solid #1c5fbe;
    border-bottom: 2px solid #1c5fbe;
}
.epa-fleche-d::before { transform: translate(-65%, -50%) rotate(-45deg); }
.epa-fleche-g::before { transform: translate(-35%, -50%) rotate(135deg); }

/* Les annonces : un apercu, jamais une saisie — elles vivent dans leur propre outil. */
/* 118 px ET NON 128, ET C'EST MESURE (25/08) : a 128 la colonne demandait 784 px pour
   768 disponibles, et les 16 px de trop partaient sous la coupe — sans ascenseur pour le
   dire, donc sans que personne le voie. La vignette rend ces pixels-la. */
.epa-annonce {
    flex: 0 0 auto;
    width: 118px;
    aspect-ratio: 3 / 4;
    /* LE CADRE RESTE (25/08, Ramon : « les cadres autour des petites annonces il faut
       laisser, ce sera des images »). Une vignette d'annonce est une IMAGE a venir, au
       meme titre qu'une photo : le pointille dit la place qu'elle occupera. */
    border: 1px dashed #d6dce2;
    border-radius: 4px;
    background: #fcfdfe;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6px;
    color: #96a0aa;
    font-size: 10px;
}

/* SUR UN ECRAN ETROIT, les trois colonnes de la ligne haute passent l'une sous l'autre.
   Les rangees, elles, defilent deja : elles n'ont rien a changer. */
@media (max-width: 1100px) {
    .epa-trois { grid-template-columns: 1fr; }
}

/* ═══ LES CINQ FICHIERS : UN INTITULE, UNE FLECHE ═══           (25/08/2026)
   Ramon : « les titres des fichiers et un icone pour les telecharger, pas besoin de longs
   boutons. » La ligne montre donc CE QUE VERRA LE VISITEUR, et rien de plus.
   TOUTE LA LIGNE EST UN <label> : cliquer dessus ouvre le selecteur de fichier, comme
   pour les photos. Le depot et l'apercu sont au meme endroit — il n'y a plus de second
   endroit ou deposer, donc plus de risque que les deux divergent. */
/* L'ENCADRE AUTOUR DES CINQ LIGNES (25/08, demande de Ramon). Il a le meme trait que la
   photo et la carte, et pour la meme raison : il entoure une place a REMPLIR. Les cinq
   lignes forment un seul depot, pas cinq objets separes — le cadre le dit d'un coup. */
.epa-fics {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 4px 8px;
    border: 1px dashed #b9c3cd;
    border-radius: 4px;
    background: #fbfcfd;
}
/* LA CONSIGNE, AU-DESSUS DES CINQ. Elle ne nomme pas un champ — elle dit un GESTE
   (« cliquez sur les boutons »), et un geste s'annonce avant, pas dans la case. */
.epa-consigne { margin: 0 0 5px; font-size: 12px; color: #6b7885; }

.epa-fic {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    border: 0;
    background: none;
}
/* LE BOUTON DE TELECHARGEMENT — rond, plein, et de la taille d'une cible qu'on vise a
   la souris. C'est LUI qui ouvre le selecteur : il doit se voir comme un bouton, pas
   comme un caractere pose a cote d'un champ. */
.epa-fic-dl {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #22303d;
    color: #fff;
    font-size: 13px;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
}
.epa-fic-dl:hover { background: #1c5fbe; }
/* QUAND L'IMAGE GEREE EST LA, ELLE EST LE BOUTON : pas de pastille sombre derriere une
   icone qui porte deja son fond et son ombre (l'oeil 1904 a paye cette lecon le 22/08). */
.epa-fic-dl-img { background: none; }
.epa-fic-dl-img:hover { background: none; opacity: .75; }
.epa-fic-dl img { display: block; width: 24px; height: 24px; object-fit: contain; }
/* L'intitule prend la place, la fleche reste collee a droite et ne bouge jamais : cinq
   fleches alignees se lisent d'un coup, cinq fleches flottantes ne se lisent pas. */
.epa-fic-nom { flex: 1 1 auto; min-width: 0; font-size: 12px; }

/* LA CARTE : un vrai Leaflet quand le point existe, un cadre qui le DIT sinon.
   Le trait plein remplace le pointille des que la carte est reelle — le pointille
   annonce ce qui reste a remplir, il ne doit pas border ce qui est deja la. */
.epa-carte {
    /* +50 % le 25/08, en hauteur comme en largeur (la largeur est celle de la colonne,
       elargie dans .epa-trois). 170 -> 255. */
    height: 255px;
    border: 1px dashed #b9c3cd;
    border-radius: 4px;
    background: #f6f9f6;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.epa-carte[data-lat] { border-style: solid; border-color: #cfd6dd; display: block; }

/* ═══ LA LOUPE, ET LA CARTE EN GRAND ═══                          (25/08/2026)
   Le cadre porte le bouton : il doit rester au-dessus des tuiles Leaflet, qui montent
   jusqu'a z-index 400 chez elles. */
.epa-carte-cadre { position: relative; }
.epa-loupe {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 1200;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid #b9c9dd;
    border-radius: 4px;
    background: rgba(255, 255, 255, .92);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.epa-loupe:hover { background: #fff; border-color: #1c5fbe; }
/* DESSINEE EN CSS, aucune police n'intervient — meme dessin que le panneau public. Les
   deux cotes effaces font lire « ca s'ouvre » plutot que « c'est une case ». */
.epa-loupe > span {
    width: 12px;
    height: 12px;
    border: 2px solid #1c5fbe;
    border-radius: 1px;
    border-right-color: transparent;
    border-bottom-color: transparent;
    box-shadow: 3px 3px 0 -1px #1c5fbe inset;
}

/* EN GRAND : tout s'efface, la carte prend l'ecran. Rien ne s'ajoute, donc aucun
   ascenseur n'apparait — la regle de cet ecran tient aussi dans ce mode. */
.epa.epa-carte-plein .epa-identite,
.epa.epa-carte-plein .epa-bloc:not(:first-of-type),
.epa.epa-carte-plein .epa-trois > div:not(:last-child) { display: none; }

/* LA CHAINE DE HAUTEURS DOIT ETRE COMPLETE, ET C'EST MESURE : au premier essai la carte
   agrandie faisait 3 x 3 px. « height: 100% » ne vaut rien tant qu'un seul maillon
   au-dessus n'a pas de hauteur — ici la colonne de la carte, que .epa-trois alignait en
   « start ». Chaque maillon est donc etire explicitement, de l'ecran jusqu'aux tuiles. */
.epa.epa-carte-plein .epa-bloc:first-of-type > .epa-in { display: flex; flex-direction: column; }
.epa.epa-carte-plein .epa-trois {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-columns: 1fr;
    align-items: stretch;
}
.epa.epa-carte-plein .epa-trois > div:last-child { height: 100%; min-height: 0; display: flex; }
.epa.epa-carte-plein .epa-carte-cadre { flex: 1 1 auto; height: auto; min-height: 0; }
.epa.epa-carte-plein .epa-carte { height: 100%; min-height: 0; }

/* LE PANNEAU DU VISITEUR N'A PAS LA HAUTEUR DE L'ECRAN DU PRO — MESURE LE 26/08/2026.
   Chez le pro, .epa-corps tient une hauteur fixe : la chaine est deja etiree, les regles
   ci-dessus suffisent. Dans le panneau du visiteur, .epa-corps se regle sur SON CONTENU :
   des qu'on efface ce contenu pour agrandir la carte, il retombe a 18 px et la carte avec
   lui — 1362 x 2 px, un panneau vide. C'est le meme piege qu'au 25/08, un maillon plus
   haut. Mesure avant / apres, panneau reel de la fiche 7973450 : sans ces deux lignes
   .epa-carte fait 1362 x 2 ; avec, 1362 x 737, et le retour rend exactement 390 x 257.
   Elles ne valent QUE pour le visiteur et QUE en grand : l'ecran du pro n'est pas touche. */
.epa.epa-visiteur.epa-carte-plein { height: 100%; }
.epa.epa-visiteur.epa-carte-plein .epa-corps { flex: 1 1 auto; height: auto; min-height: 0; }
.epa-carte-vide { color: #96a0aa; font-size: 12px; }
/* Leaflet pose ses propres couches : elles ne doivent pas heriter du centrage flex. */
.epa-carte .leaflet-container {
    width: 100%;
    height: 100%;
    /* ═══ LA CARTE RESTE CHEZ ELLE ═══                            (26/08/2026)
       Ramon : « quand le diaporama s'ouvre, la carte est par-dessus. Pas terrible, en
       plus elle gene le fonctionnement. »
       Leaflet empile HAUT — panes 400 a 700, boutons de zoom 800, attribution 1000 — et
       son conteneur ne portait AUCUN z-index : sans contexte d'empilement a lui, tous ces
       etages s'evadaient dans celui du panneau et passaient devant le diaporama, qui
       etait a 20. Ce n'est pas la carte qui montait, c'est la boite qui n'avait pas de
       couvercle. « z-index: 0 » sur un element positionne EST ce couvercle : les 1000 de
       Leaflet redeviennent 1000 A L'INTERIEUR de la carte, et la carte vaut 0 dehors.
       C'est la meme raison qui met la loupe a 1200 depuis le 25/08 — elle, on l'avait
       fait monter au lieu d'enfermer la carte. */
    position: relative;
    z-index: 0;
}

/* .epa-btn A ETE RETIRE LE 25/08 avec le bouton « Gerez mes petites annonces » : plus
   aucune balise ne le porte, et une regle sans balise est une regle morte. */

/* .epa-pied A ETE RETIRE LE 25/08 : ses deux boutons sont montes dans la barre. Une
   regle de style sans balise est une regle morte qu'on relit un jour comme si elle
   vivait — le meme raisonnement que pour .epa-avis. */
/* DANS LA BARRE, ELLES ONT LA TAILLE DE LA BARRE (25/08) : meme hauteur et meme
   graisse que « Retour a mon espace pro », qui les voisine. Deux boutons cote a cote de
   tailles differentes se lisent comme deux importances differentes. */
.epa-diffuser, .epa-retirer {
    white-space: nowrap;
    padding: 4px 12px;
    border-radius: 4px;
    color: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.epa-diffuser { border: 1px solid #16602f; background: #1f7a3d; }
.epa-retirer  { border: 1px solid #a3231b; background: #c0392b; }
/* La barre garde son ordre : identite a gauche, actions a droite, retour tout au bout. */
.epa-tete .epa-diffuser { margin-left: auto; }
.epa-tete .epa-diffuser + .epa-retirer { margin-left: 0; }


/* ═══ LES CASES SONT DEVENUES DES BOUTONS ═══                    (25/08/2026)
   Ramon : « chacune des 9 images quand on clique dessus une modale demandant de choisir
   le fichier, le texte au survol et l'url ». Les cases etaient des <label> ; un label
   porte deja le doigt du navigateur. Ce ne sont plus des labels, il faut donc le dire. */
.epa-photo[data-rang],
.epa-vers-photo,
.epa-vers-doc { cursor: pointer; }

/* Le champ « Titre sous l'image » et les cinq noms de fichiers sont en LECTURE SEULE :
   ils montrent ce que la modale a range. Un champ grise dirait « interdit » ; il n'est
   pas interdit, il se remplit ailleurs. On garde donc le fond blanc et le doigt. */
.epa-vers-photo[readonly],
.epa-vers-doc[readonly] { background: #fff; }

/* ═══ LE CORPS DE LA MODALE ═══
   Aucune boite nouvelle : .ep-modale-* vient de css_espace_usager_modales.css, deja
   servie sur l'espace pro. Ce qui suit ne decrit QUE ce que cette modale-ci ajoute. */
.epa-md-lbl {
    display: block;
    margin: 12px 0 3px;
    font-size: 12px;
    font-weight: 600;
    color: #3d4a57;
}
.epa-md-aide {
    margin: 4px 0 0;
    font-size: 11.5px;
    line-height: 1.35;
    color: #6b7783;
}
/* L'APERCU EST UNE CASE COMME CELLES DE L'ECRAN : meme classe .epa-photo, donc meme
   rapport largeur/hauteur que l'emplacement vendu. Le pro voit dans la modale le
   cadrage exact qu'aura sa photo en ligne — pas une approximation. */
.epa-md-apercu {
    width: 100%;
    max-width: 320px;
    margin: 0 auto 10px;
}
.epa-md-choisir { display: inline-block; }
/* Le nom du PDF choisi : un document n'a pas d'apercu, on DIT lequel a ete pris. */
.epa-md-fic {
    margin: 8px 0 0;
    font-size: 12px;
    color: #1c5fbe;
    word-break: break-all;
}
/* Retirer n'est pas valider : le bouton porte la couleur de ce qu'il fait. */
.epa-md-retirer { color: #c0362c; border-color: #e0b6b2; }
.epa-md-retirer:hover { background: #fbeeed; border-color: #c0362c; }

/* ═══ LES DEUX ACTIONS DE LA BARRE NE PARAISSENT JAMAIS ENSEMBLE ═══
   Une fiche en ligne propose de se retirer, une fiche retiree propose de se diffuser.
   Les deux cote a cote, c'est un ecran qui demande a l'usager de deviner son propre etat.
   LE display:none EST EXPLICITE : [hidden] est un simple defaut du navigateur, et
   n'importe quelle regle display le renverse — c'est le defaut paye le 14/08 sur
   .ep-modale-pied et le 18/08 sur l'apercu de publicite. On ne le repaie pas. */
.epa-tete .epa-diffuser[hidden],
.epa-tete .epa-retirer[hidden] { display: none; }
.epa-tete .epa-diffuser[hidden] + .epa-retirer { margin-left: auto; }


/* ═══ COTE VISITEUR : CE QUI EST DEVENU CLIQUABLE ═══             (25/08/2026)
   Une photo qui porte une adresse est un <a>, un document telechargeable aussi. Le
   navigateur souligne les liens et les colore : ici ce sont des images et des icones,
   pas du texte, et un soulignement bleu au milieu d'une fiche payante fait bricolage. */
.epa-photo-lien,
a.epa-fic-dl { text-decoration: none; color: inherit; }
.epa-photo-lien { cursor: pointer; display: block; }
a.epa-fic-dl { cursor: pointer; }

/* Le titre sous la photo et le texte de presentation, cote visiteur : ils ne sont plus
   des champs de saisie mais des blocs de texte. Le trait du dessous reste — c'est la
   meme disposition, « seuls les textes et les icones » changent (Ramon, 25/08). */
.epa-titre-vue,
.epa-texte-vue { white-space: normal; overflow-wrap: anywhere; }

/* LE TITRE SOUS LA PHOTO EST CENTRE (Ramon, 26/08/2026 : « ici le texte en mode centre
   serait plus apprecie »). Il legende une image centree dans sa case : aligne a gauche,
   il pendait sous un bord que rien ne prolonge. LES DEUX COTES ENSEMBLE — le champ en
   lecture seule de l'ecran pro (#epa-titre) et le bloc du panneau visiteur
   (.epa-titre-vue) portent le MEME texte ; les centrer d'un seul cote, ce serait deux
   mises en page pour une seule donnee. Le texte de presentation n'est PAS touche : c'est
   un paragraphe, il se lit au fil, et le perimetre demande est la legende (regle 4). */
#epa-titre,
.epa-titre-vue { text-align: center; }

/* ═══ LE DIAPORAMA A DEMENAGE ═══                                 (27/08/2026)
   Ses regles vivent dans assets/css/diaporama.css, servie sur cette page ET sur celle
   des petites annonces. Ramon demande le meme diaporama des deux cotes (« surtout le
   diaporama COMME la pub Annuaire ») : deux copies auraient diverge — c'est deja arrive
   pour la mise en page de l'annuaire, et pour rien de moins qu'un ecran entier.
   Le bloc a demenage TEL QUEL, pas une valeur changee : l'annuaire doit se comporter
   exactement comme avant. */


/* ═══ UN CADRE D'ANNONCE REMPLI ═══                              (26/08/2026)
   Le cadre vide existait depuis le 24/08 ; celui-ci porte une photo, un titre et un
   prix. LE TEXTE EST EN BAS, SUR UN VOILE : sans lui un titre clair sur une photo claire
   disparaît, et on ne l'apprend qu'en tombant sur la mauvaise photo. */
.epa-annonce-pleine {
    position: relative;
    background: #f4f7fa center / cover no-repeat;
    overflow: hidden;
}
.epa-annonce-titre,
.epa-annonce-prix {
    position: absolute;
    left: 0;
    right: 0;
    padding: 2px 4px;
    background: rgba(20, 26, 33, .62);
    color: #fff;
    font-size: 10px;
    line-height: 1.15;
    overflow: hidden;
}
.epa-annonce-titre {
    bottom: 0;
    max-height: 26px;
}
/* Le prix en haut : il ne se dispute pas la place avec le titre, et c'est la première
   chose qu'on compare d'un cadre à l'autre. */
.epa-annonce-prix {
    top: 0;
    font-weight: 700;
    text-align: right;
}

/* ═══ HORAIRES ET ZONE D'INTERVENTION ═══                            (26/08/2026)
   Deux boutons rouges sous les contacts, et le resultat ecrit dessous — la maquette de
   Ramon, au dessin pres. La meme feuille sert l'ecran du pro et le panneau du visiteur
   (« comme pareil » depuis le 24/08), donc ces regles valent pour les deux. */
.epa-quand { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.epa-bt-rouge {
    align-self: flex-start;
    padding: 5px 14px;
    border: 0;
    border-radius: 4px;
    background: #c62c20;
    color: #fff;
    font: inherit;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
}
.epa-bt-rouge:hover { background: #a3231b; }
.epa-quand-vue { font-size: 12px; line-height: 1.5; color: #1d2b36; margin: 0 0 6px 2px; }
/* LA LIGNE VIDE SE VOIT VIDE, en gris et en italique : elle dit qu'il y a quelque chose
   a mettre la, au lieu de laisser un blanc qu'on prend pour un bug (regle 28). */
.epa-quand-vide { color: #8a95a1; font-style: italic; }
/* LE TITRE COTE VISITEUR — « Horaires », « Ce professionnel intervient dans la zone
   suivante ». Il n'existe QUE la : chez le pro, c'est le bouton rouge qui porte le nom
   du bloc, et un titre au-dessus le repeterait. */
.epa-quand-t { font-size: 12px; font-weight: 700; color: #1d2b36; margin-top: 8px; }

/* Le tableau des sept jours. Les champs d'heure sont etroits : ce sont des heures, pas
   des phrases, et quatre champs larges feraient deborder la fenetre. */
.epa-hr-table { width: 100%; border-collapse: collapse; margin: 6px 0 10px 0; }
.epa-hr-l td { padding: 3px 4px; vertical-align: middle; }
.epa-hr-j { white-space: nowrap; font-size: 13px; }
.epa-hr-j label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.epa-hr-h { white-space: nowrap; }
.epa-hr-t { width: 78px; padding: 2px 4px; font-size: 12px; }
/* UN CHAMP ETEINT DOIT SE VOIR ETEINT : sans ce gris, une case decochee laisse quatre
   champs d'apparence normale ou l'on tape pour rien. */
.epa-hr-t[disabled] { background: #f1f4f7; color: #aab4bf; }
.epa-hr-tiret { margin: 0 3px; color: #8a95a1; }

/* ═══ « FERMÉ » ET LA RECOPIE ═══                                       (31/08/2026)

   LE MOT REMPLACE LES HEURES, IL NE S'AJOUTE PAS À ELLES. Une ligne montre l'un OU
   l'autre : les deux champs vides d'un jour fermé obligeaient à deviner. C'est la même
   règle que partout ici — « l'usager voit l'écran, il ne le lit pas ».
   LA HAUTEUR DE LIGNE NE BOUGE PAS d'un jour à l'autre : le mot occupe la place des
   champs, sinon le tableau se déformerait à chaque case décochée et les sept lignes ne
   seraient plus alignées. */
.epa-hr-ferme { display: none; font-size: 12px; font-style: italic; color: #8a95a1; }
.epa-hr-l.epa-hr-off .epa-hr-ferme { display: inline-block; line-height: 22px; }
.epa-hr-l.epa-hr-off .epa-hr-t,
.epa-hr-l.epa-hr-off .epa-hr-tiret { display: none; }

/* LE BOUTON DE RECOPIE. Éteint, il reste À SA PLACE et ne disparaît pas : un bouton qui
   s'en va déplace la colonne d'à côté à chaque frappe. Il ne s'allume que lorsque la
   ligne a une plage complète à donner — c'est le JavaScript qui pose `disabled`. */
.epa-hr-c { width: 26px; text-align: center; }
.epa-hr-copier {
    border: 1px solid #c7d0da; background: #fff; color: #4a5560; border-radius: 3px;
    width: 22px; height: 22px; line-height: 1; font-size: 13px; cursor: pointer; padding: 0;
    /* LA POLICE DU SIGNE EST NOMMEE : le glyphe ⧉ n'est pas dans toutes les polices
       d'interface, et un caractere absent s'affiche en carre vide — un bouton qui
       montre un carre ne dit plus rien. */
    font-family: 'Segoe UI Symbol', 'Apple Symbols', 'DejaVu Sans', sans-serif;
}
.epa-hr-copier:hover:not([disabled]) { background: #eef3f8; border-color: #9fb0c2; }
.epa-hr-copier[disabled] { opacity: .35; cursor: default; }
.epa-hr-l.epa-hr-off .epa-hr-copier { visibility: hidden; }

.epa-zn-txt { width: 100%; resize: vertical; font: inherit; }

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