/*
Fichier : annuaire.css
Chemin  : D:\SpeedclicV2\www\assets\css\annuaire.css
Rôle    : Annuaire thématique en MODE CONTENU (dans .sc-main, le sidebar de la page
          de garde est conservé). Zones : gauche (sélection en LISTE) | centre | droite (pub).
*/

/* Conteneur : remplit la zone centrale (.sc-main). */
.an-wrap { flex: 1 1 auto; display: flex; min-height: 0; height: 100%; background: #fff; }

/* ============ ZONE GAUCHE : sélection (liste, pas de tuiles) ============ */
.an-select { width: 300px; flex-shrink: 0; background: #fff; border-right: 1px solid #d5dbe3;
             display: flex; flex-direction: column; overflow: hidden; }

/* Les 2 barres de sélection (Catégorie + Rubrique), toujours visibles. */
.an-crumbs { flex-shrink: 0; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.an-crumb {
    width: 100%; height: 38px; box-sizing: border-box; text-align: left; padding: 0 12px;
    border: 1px solid #cfd6de; border-radius: 3px; background: #fff; color: #1a2535;
    font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
    display: flex; align-items: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.an-crumb.an-crumb-active      { background: #eaf6fb; border-color: #13a8d8; }
.an-crumb.an-crumb-placeholder { cursor: default; color: #55606c; }
/* Barre Rubrique avant tout choix de catégorie : présente mais inerte (vide + grisée). */
.an-crumb.an-crumb-disabled    { background: #f4f6f8; border-color: #e6e9ed; color: transparent; cursor: default; }
.an-crumb:hover:not(.an-crumb-placeholder):not(.an-crumb-disabled) { background: #f5f9fc; }

/* Liste des éléments (catégories / rubriques / métiers). */
.an-tiles { flex: 1; overflow-y: auto; }
.an-row {
    padding: 9px 14px; background: #fdf9ea; border-bottom: 1px solid #ece2c4;
    color: #1a2535; font-size: 12.5px; font-weight: 700; cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.an-row:hover { background: #fff2c2; }

.an-empty { padding: 18px 14px; color: #8a96a3; font-size: 13px; font-style: italic; }

/* ============ ZONE CENTRALE ============ */
.an-center { flex: 1; display: flex; flex-direction: column; min-width: 0; border-right: 1px solid #d5dbe3; }
/* ═══ LE BANDEAU DU HAUT A ETE RETIRE ═══                              (08/09/2026)
   Ramon : « on retire cet espace du haut, mon image photoshop marquait deja son retrait.
   Cela permet de laisser un peu plus d'espace entre les derniers entrants et la grosse
   surface de recherche qui elle peut etre centree sur le reste horizontal - vertical. »
   Il faisait 98 px — la hauteur exacte des deux barres de selection de gauche — et
   attendait « icones + recherche affinee ». La recherche est arrivee, au centre.
   .an-center-bottom DEVIENT UNE COLONNE FLEX : le titre et les vignettes gardent leur
   hauteur naturelle en haut, et .an-rech-zone prend TOUT LE RESTE pour y centrer le
   formulaire dans les deux sens. Sans le flex, « centrer verticalement » n'a pas de sens :
   il faut d'abord qu'une boite sache de quelle hauteur elle dispose. */
.an-center-bottom {
    flex: 1; display: flex; flex-direction: column;
    overflow-y: auto; padding: 14px 18px; min-height: 0;
}
/* Le listing d'un metier ou d'une recherche n'a rien a centrer : il coule de haut en bas
   comme avant. Seule la zone du formulaire reclame la place qui reste. */
.an-rech-zone {
    flex: 1 1 auto; min-height: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 8px 0 16px;
}

/* Message « Annuaire en cours » (désormais au centre-bas). */
.an-encours { font-size: 18px; font-weight: 700; color: #13a8d8; text-align: center; }
.an-encours small { display: block; margin-top: 6px; font-size: 13px; color: #6b7a8c; font-weight: 400; }

/* ---- Résultat : métier → départements → entreprises par ville ---- */
.an-res-head   { font-size: 16px; font-weight: 700; color: #13496a; margin-bottom: 10px; }
/* .an-res-naf a ete retiree le 08/09/2026 : regle MORTE (aucun element ne la portait,
   mesure) et qui nommait une codification de source. Nos codes sont des JobSP. */
.an-res-note   { font-size: 12px; color: #8a96a3; margin: 4px 0 10px; }

/* ══════════════════════════════════════════════════════════════════════════════════
   LA VITRINE : LES PROFESSIONNELS QUI ONT PRIS L'ANNUAIRE            (08/09/2026)
   ----------------------------------------------------------------------------------
   Maquette de Ramon, tiree de sa premiere version exploitee a Tahiti : un texte qui
   annonce, puis des vignettes — BANDEAU GRIS EN HAUT (nom, puis la ville entre
   parentheses), LOGO EN DESSOUS.

   LE TITRE N'EST PAS UN .an-res-head. Le titre d'un metier ouvert est un RESULTAT de
   recherche : il est gros, bleu, et il repond a une question qu'on a posee. Celui-ci
   n'annonce rien qu'on ait demande — il presente. Sur la maquette il est en noir, en
   taille de texte courant, sans emphase. Deux roles, deux dessins.

   LA VIGNETTE FAIT LA LARGEUR DU LOGO, ET C'EST LE LOGO QUI COMMANDE : pro_logo_formater()
   cadre a 180 x 115 depuis le 13/08, et la carte reprend ces mesures pour que le bandeau
   gris et l'image soient exactement du meme bord. Un logo plus etroit que 180 (le cadrage
   conserve le rapport) se centre dans son cadre plutot que de s'etirer — on ne deforme
   pas la marque de quelqu'un.
   object-fit: contain, ET PAS cover comme la zone publicitaire : une publicite est une
   image faite pour remplir un emplacement vendu, un logo est une marque. Couper un logo
   pour qu'il remplisse son cadre, c'est le mutiler.

   LE BOUTON NE RESSEMBLE PAS A UN BOUTON : ni fond, ni bordure de navigateur. C'en est
   un pour le clavier et le lecteur d'ecran (voir annuaire.js) ; a l'oeil, c'est la
   vignette de la maquette. */
.an-nouv-titre   { font-size: 14px; color: #1a2535; margin: 2px 0 12px; flex: 0 0 auto; }
.an-nouv-dept    { color: #6b7a8c; }

.an-nouv-rangee  { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 22px;
                   flex: 0 0 auto; }

.an-nouv-carte {
    width: 180px; padding: 0; border: 0; background: none; cursor: pointer;
    display: flex; flex-direction: column; text-align: center; font: inherit;
}
.an-nouv-carte:focus-visible { outline: 2px solid #13a8d8; outline-offset: 2px; }

/* ═══ DEUX LIGNES POUR LE NOM, TOUJOURS ═══                             (15/09/2026)
   Ramon, capture a l'appui : « pour aligner sans couper les noms. il faut deux lignes
   pour le nom. »
   CE QUI N'ALLAIT PAS : la hauteur du bandeau suivait le nom. « B11 » tenait sur une
   ligne, « IMMOBILIERE DE L'ESTUAIRE » en prenait deux — les trois vignettes de la rangee
   ne commencaient donc pas leur logo a la meme hauteur, et l'oeil lisait un desordre la
   ou il n'y a qu'une difference de longueur de nom.
   LE REMEDE N'EST PAS DE COUPER LE NOM, c'est de lui RESERVER sa place : deux lignes,
   remplies ou non. Un nom court laisse la seconde vide, un nom long l'occupe, et la ville
   tombe au meme endroit sur toutes les vignettes. Reservees en `em` et non en pixels : la
   reserve suit la taille du texte si elle change un jour.
   AU-DELA DE DEUX LIGNES, des points de suspension plutot qu'un mot tranche au milieu. */
.an-nouv-tete {
    background: #c8c8c8; color: #1a2535; padding: 5px 6px; min-height: 56px;
    display: flex; flex-direction: column; justify-content: center; gap: 1px;
}
.an-nouv-nom     {
    font-size: 13px; font-weight: 600; line-height: 1.15;
    min-height: 2.3em;                 /* deux lignes reservees, remplies ou non */
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;           /* un nom d'un seul mot tres long ne deborde pas */
}
.an-nouv-ville   { font-size: 12px; line-height: 1.15; }

.an-nouv-logo    { width: 100%; height: 115px; object-fit: contain; display: block;
                   background: #fff; }
/* Sans logo, le nom occupe la place de l'image — jamais un cadre vide. */
.an-nouv-sanslogo { height: 115px; display: flex; align-items: center; justify-content: center;
                    padding: 6px; font-size: 15px; font-weight: 700; color: #13496a;
                    background: #f4f7fa; }

/* Le niveau achete se signale ici aussi, du meme bleu et du meme rouge que les lignes du
   listing — c'est la meme information, elle ne peut pas changer de couleur d'un ecran a
   l'autre. La bordure entoure la vignette entiere : sur une ligne elle entoure le nom,
   ici l'objet tout entier est le nom. */
.an-nouv-bleu  .an-nouv-tete,
.an-nouv-bleu  .an-nouv-logo,
.an-nouv-bleu  .an-nouv-sanslogo { border-left: 2px solid #1466b8; border-right: 2px solid #1466b8; }
.an-nouv-bleu  .an-nouv-tete     { border-top: 2px solid #1466b8; }
.an-nouv-bleu  .an-nouv-logo,
.an-nouv-bleu  .an-nouv-sanslogo { border-bottom: 2px solid #1466b8; }
.an-nouv-rouge .an-nouv-tete,
.an-nouv-rouge .an-nouv-logo,
.an-nouv-rouge .an-nouv-sanslogo { border-left: 2px solid #c62828; border-right: 2px solid #c62828; }
.an-nouv-rouge .an-nouv-tete     { border-top: 2px solid #c62828; }
.an-nouv-rouge .an-nouv-logo,
.an-nouv-rouge .an-nouv-sanslogo { border-bottom: 2px solid #c62828; }

/* Sélecteur ADM2 : hérite de .an-crumb (apparence IDENTIQUE au bouton Catégorie).
   Ici uniquement les surcharges propres à un <select>. */
.an-dept-select { display:block; width:100%; }
/* ═══ LE SELECTEUR DE VILLE ═══                                         (09/09/2026)
   Meme apparence que celui du departement — c'est le meme geste, un cran plus fin — mais
   pose EN RETRAIT : le departement commande, la ville affine. Il est [hidden] tant que le
   serveur n'a pas dit quelles villes portent une fiche ; un menu vide ne s'affiche pas. */
.an-ville-select { margin-top: 4px; font-size: 12.5px; color: #2c3e50; background: #fcfdfe; }
.an-ville-select:focus { outline:none; border-color:#13a8d8; background:#eaf6fb; }
.an-dept-select:focus { outline:none; border-color:#13a8d8; background:#eaf6fb; }
.an-dept-select:hover { background:#f5f9fc; }

/* Ville (séparateur) : fond JAUNE CLAIR pour la distinguer visuellement des sociétés. */
.an-ville      { font-size: 14px; font-weight: 700; color: #6a5518; background: #fff7d6;
                 border: 1px solid #f0dfae; border-radius: 5px; padding: 5px 10px; margin: 14px 0 8px; }
.an-ville-cp   { font-weight: 400; color: #a08850; font-size: 12px; }
.an-ville-n    { float: right; font-weight: 600; color: #a08850; font-size: 11.5px; background: #fbeecb; border-radius: 9px; padding: 0 7px; }

/* ═══ LES DEUX COLONNES SONT CELLES DES COMMUNES ═══                   (09/09/2026)
   Ramon : « on avait dit présentation sur deux colonnes ».
   Elles etaient posees au mauvais endroit. « Pros d'une ville en 2 colonnes » supposait
   des communes a plusieurs entreprises ; l'annuaire des mairies, des CCAS ou des polices
   municipales en compte UNE par commune. Resultat mesure a l'ecran : 483 bandeaux jaunes
   empiles sur une seule colonne, chacun suivi d'une ligne unique, et une colonne de droite
   vide sur toute la hauteur.
   Ce sont donc les BLOCS-COMMUNES qui se rangent sur deux colonnes. A l'interieur d'un
   bloc la liste redevient simple : deux colonnes dans une demi-largeur donneraient des
   noms coupes.
   LE BLOC NE SE COUPE JAMAIS : un bandeau de ville en bas d'une colonne et ses entreprises
   en haut de l'autre, c'est une ville qui a l'air vide. « display:inline-block; width:100% »
   accompagne break-inside — c'est le couple qui tient sur les navigateurs qui ignorent
   encore break-inside dans une multi-colonne. */
.an-ent-cols   { column-count: 2; column-gap: 22px; }
.an-ville-bloc { display: inline-block; width: 100%; margin: 0 0 6px;
                 break-inside: avoid; page-break-inside: avoid; -webkit-column-break-inside: avoid; }
.an-ville-bloc .an-ville { margin-top: 0; }
.an-ent-list   { list-style: none; margin: 0; padding: 0; column-count: 2; column-gap: 20px; }
.an-ent-cols .an-ent-list { column-count: 1; }

/* Sous 900 px il n'y a pas la place de deux colonnes : une commune par ligne. */
@media (max-width: 900px) { .an-ent-cols { column-count: 1; } }

/* ═══ LA BARRE DE PAGES ═══                                            (09/09/2026)
   Ramon : « et si grande quantité, il faudrait un système de paginations avec
   avant-arriere debut fin ».
   AUCUN MOT : l'annuaire se lit en 63 langues, et deux chevrons doubles, deux chevrons
   simples et « 3 / 9 » se lisent dans toutes. Un libelle de plus, ce sont 63 traductions
   a payer pour dire ce qu'une fleche dit deja (regle 41).
   Le bouton eteint reste VISIBLE et desactive : une commande qui disparait deplace les
   autres sous le doigt du visiteur entre deux pages. */
/* ═══ L'ALPHABET DES COMMUNES ═══                                       (09/09/2026)
   L'idee de Ramon, en marchant : « je presse S et tu m'affiches les mairies commencant par
   S, et que celles-la ». Il vient AVANT la barre de pages parce qu'il la remplace dans
   l'usage : on choisit une lettre, et les neuf pages deviennent une.
   IL S'ENROULE (flex-wrap) : vingt-six boutons ne tiennent pas sur une colonne de 480 px,
   et une barre qui deborde en largeur casse la mise en page a deux colonnes. */
.an-alpha      { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
                 gap: 4px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid #eef2f6; }
.an-alpha-bt   { min-width: 26px; height: 26px; padding: 0 6px; cursor: pointer;
                 font-size: 12.5px; font-weight: 600; line-height: 1; color: #13496a;
                 background: #f5f9fc; border: 1px solid #bcd9f0; border-radius: 5px; }
.an-alpha-bt:hover { background: #eaf3fb; border-color: #8fbfe4; }
/* La lettre en cours se voit d'un coup d'oeil : sans cela, l'usager ne sait plus ce qu'il
   regarde des qu'il a fait defiler la liste. */
.an-alpha-on   { color: #fff; background: #13496a; border-color: #13496a; }
/* Le bouton « tout » : un symbole, pas un mot — l'ecran parle soixante-trois langues. */
.an-alpha-tout { font-size: 11px; }

.an-pg         { display: flex; align-items: center; justify-content: center; gap: 6px;
                 margin: 10px 0 4px; padding-top: 10px; }
.an-pg-bt      { min-width: 30px; height: 28px; padding: 0 9px; cursor: pointer;
                 font-size: 15px; line-height: 1; color: #13496a;
                 background: #f5f9fc; border: 1px solid #bcd9f0; border-radius: 5px; }
.an-pg-bt:hover:not(:disabled) { background: #eaf3fb; border-color: #8fbfe4; }
.an-pg-off     { color: #c3ccd4; background: #fafcfd; border-color: #e6edf3; cursor: default; }
.an-pg-etat    { font-size: 12.5px; font-weight: 600; color: #6b7a8c; padding: 0 8px; }
/* ═══ LES ICONES SE RANGENT A DROITE ═══                              (14/09/2026)
   Ramon : « tu ne pourrais pas ligner les icones sur la droite ? »
   Elles suivaient le nom, collees a lui : chaque ligne commencait ses icones a un
   endroit different, et la colonne se lisait en dents de scie. La ligne devient une
   rangee souple — le nom prend la place qui reste, le bloc d'icones est pousse au
   bord droit — de sorte que toutes les icones s'alignent verticalement.
   « min-width: 0 » sur le nom : sans lui, un nom long refuse de se couper et pousse
   les icones hors du bloc. Et « break-inside » reste, sinon une ligne se couperait
   entre les deux colonnes de communes. */
.an-ent-row    { display: flex; align-items: center; gap: 10px;
                 padding: 5px 8px; border-bottom: 1px solid #eef2f6;
                 break-inside: avoid; -webkit-column-break-inside: avoid; }
.an-ent-row:hover { background: #f7fafc; }

/* ═══ LE SURVOL BLEU DES LIGNES DE PROS ═══                             (15/09/2026)
   Ramon : « sur Chrome, je ne vois pas la barre bleue au survol ! » — et il a raison de
   ne pas la voir : elle n'etait pas la. La seule regle de survol des lignes etait le
   #f7fafc ci-dessus, un gris a peine teinte de bleu ; sur un fond blanc casse et un ecran
   ordinaire, la difference tient dans trois points de luminosite. Ce n'etait pas une
   barre bleue, c'etait l'idee d'une barre bleue.
   IL L'AVAIT DEMANDEE EN CES TERMES : « Essayes un bleu pour le survol des entreprises,
   ce sera plus visible que jaune sur jaune ». La voici, franche, et posee LA OU ELLE SERT :
   sur les lignes qui portent data-tout, c'est-a-dire celles qui ouvrent la fenetre de
   coordonnees d'un seul clic. Une ligne qui ne fait rien au clic n'a pas a s'allumer —
   un survol promet une action.
   LES LIGNES PAYANTES GARDENT LE LEUR : elles sont deja pleines de leur couleur (bleu du
   petit modele, rouge du grand) et ont leur propre survol plus sombre, plus bas dans ce
   fichier. Leur imposer ce bleu clair effacerait le niveau achete, qui est precisement ce
   qui se vend.
   LA SPECIFICITE FAIT LE TRI TOUTE SEULE : l'attribut ajoute un cran, donc cette regle
   passe devant le gris sans avoir a crier !important — un !important ici, et le survol
   des lignes payantes tomberait avec. */
.an-ent-row[data-tout]:hover { background: #dbeafe; }
.an-ent-nom    { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere;
                 font-size: 13px; font-weight: 600; color: #1a2535; }
.an-ent-meta   { display: block; font-size: 11.5px; color: #6b7a8c; margin-top: 1px; }

.an-empty      { color: #9aa4ad; font-size: 13px; font-style: italic; padding: 10px 4px; }

.an-res-dept   { font-size: 11px; font-weight: 600; color: #13496a; background: #eaf3fb; border: 1px solid #bcd9f0; border-radius: 10px; padding: 1px 8px; margin-left: 6px; vertical-align: middle; }

/* Invite « Sélectionnez un département » (annuaire non affiché tant qu'aucun dépt). */
.an-nodept     { flex: 1; display: flex; align-items: center; justify-content: center; padding: 30px; }
.an-nodept-box { max-width: 480px; text-align: center; background: #fff; border: 1px solid #dbe3ea; border-radius: 12px; padding: 30px 34px; box-shadow: 0 2px 10px rgba(19,73,106,.06); }
.an-nodept-icon  { font-size: 40px; margin-bottom: 8px; }
.an-nodept-title { font-size: 19px; font-weight: 700; color: #13496a; margin-bottom: 8px; }
.an-nodept-sub   { font-size: 13.5px; color: #6b7a8c; line-height: 1.5; }

/* ============ ZONE DROITE : pub ============ */
.an-right { width: 330px; flex-shrink: 0; background: #fff; display: flex; flex-direction: column; }
.an-right-content { flex: 1; display: flex; align-items: center; justify-content: center; padding: 16px; }

/* ═══ LA PUBLICITE « SAUF ACCUEIL », POSEE DANS L'ANNUAIRE ═══          (08/09/2026)
   L'article achete par le professionnel s'appelle « Publicite sur Annuaire et Espace de
   Gestion — Consultation ciblee sauf Accueil », et il mesure 235 x 335. C'est donc la
   zone 'gestion' qui est diffusee ici, pas celle de la page d'accueil.

   ELLE GARDE LE RAPPORT DE L'EMPLACEMENT VENDU, ET NE LE REMPLIT PAS DE FORCE.
   La colonne de la page d'accueil, elle, est remplie a 100 % par object-fit: cover — la
   consigne du 18/08, parce qu'elle partage sa place avec le DECOR et qu'un decor remplit
   tout. Ici il n'y a pas de decor : « vide si aucune pro n'a pris de pub » (24/08). Rien
   n'oblige donc le cadre a occuper les 794 px de la colonne, et l'y forcer couperait
   l'image d'un annonceur qui a fourni un 235 x 335 comme le catalogue le lui demandait.
   --pub-l et --pub-h viennent de la BASE (le produit), posees par espace_pub_gestion.php ;
   aspect-ratio ne fait que les relire. Le jour ou Ramon changera le format vendu, le
   cadre suivra sans qu'on touche a cette feuille.
   REPLI SI LA BASE NE DIT RIEN : un produit sans dimensions donnerait « aspect-ratio:
   / » — regle invalide, ignoree, cadre a plat. Les valeurs de secours sont celles de
   l'article du 08/09. */
.an-right-content { padding: 12px; align-items: flex-start; justify-content: center; }

/* ═══ DEUX PUBLICITES A LA FOIS, L'UNE SOUS L'AUTRE ═══                 (08/09/2026)
   Ramon : « rotation deux par deux ». Ailleurs — colonne d'accueil du site, espaces de
   gestion — le carrousel EMPILE ses slides en absolu et n'en montre qu'une : c'est ce qui
   permet le fondu d'une image a l'autre au meme endroit.
   ICI ELLES SONT COTE A COTE DANS LE TEMPS ET L'UNE SOUS L'AUTRE DANS L'ESPACE, donc
   l'empilement ne convient pas : les slides reprennent le flux normal, et seules celles
   que le carrousel a allumees s'affichent. On ne touche pas aux regles de
   css_pub_carrousel.css — elles servent deux autres ecrans depuis le 18/08 ; c'est la
   descendance de .an-right qui specialise, et elle seule.
   CHAQUE VIGNETTE GARDE LE RAPPORT DE L'EMPLACEMENT VENDU (--pub-l / --pub-h, poses par
   le serveur depuis la base). object-fit: cover ne coupe donc rien tant que l'annonceur
   fournit le format demande. */
.an-right .sc-pub-carrousel {
    flex: 0 0 auto;
    position: static;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: visible;
}
.an-right .sc-pub-slide {
    position: static;
    opacity: 1;
    visibility: visible;
    display: none;
    width: 100%;
    aspect-ratio: var(--pub-l, 235) / var(--pub-h, 335);
    border-radius: 4px;
    overflow: hidden;
}
.an-right .sc-pub-slide.sc-pub-actif { display: block; }

.an-ph { color: #aab6c2; font-size: 13px; font-style: italic; }

/* ==========================================================================
   LE NIVEAU DE FICHE — LA BORDURE ET L'OEIL (22/08/2026)
   --------------------------------------------------------------------------
   Ramon : « le petit modele publicitaire se signale par une bordure qui entoure le nom
   de l'entreprise en BLEU avec une icone qui indique que l'on peut avoir acces a des
   infos supplementaires. Pour le grand modele une bordure ROUGE. »
   L'ancien site distinguait par la POLICE (noir simple, gras bleu, gras rouge). Le
   nouveau distingue par le CADRE : le nom garde la graisse des autres, et la bordure
   dit qu'il y a plus a voir. Une fiche sans pack ne change pas d'un pixel.
   ========================================================================== */

.an-ent-row.an-niv {
    border: 2px solid transparent;
    border-radius: 5px;
    /* La bordure prend de la place : on la reprend sur les marges pour que les lignes
       payantes et les autres restent alignees sur la meme colonne. */
    padding: 2px 6px;
    margin: 1px -6px;
}
/* Le fond clair d'origine a été retiré le 22/08/2026 : la boîte est pleine plus
   bas. Deux règles qui se battent sur la même propriété, c'est le piège payé trois
   fois ce mois-ci — on en garde UNE. */
.an-ent-row.an-niv-bleu  { border-color: #1c5fbe; }
.an-ent-row.an-niv-rouge { border-color: #c0392b; }

/* L'OEIL EST DESSINE, PAS ECRIT : deux formes en CSS, aucune police n'intervient, donc
   il se dessine pareil partout (lecon de la poubelle du 13/08, qui etait un glyphe). */
.an-ic-fiche { position: relative; }
.an-oeil {
    display: block;
    width: 18px;
    height: 11px;
    border: 1.6px solid currentColor;
    /* Deux coins arrondis opposes font l'amande de l'oeil. */
    border-radius: 60% 60% 60% 60% / 100% 100% 100% 100%;
    position: relative;
}
.an-oeil::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5px;
    height: 5px;
    margin: -2.5px 0 0 -2.5px;
    border-radius: 50%;
    background: currentColor;
}
.an-niv-bleu  .an-ic-fiche { color: #1c5fbe; }
.an-niv-rouge .an-ic-fiche { color: #c0392b; }
.an-ic-fiche:hover { filter: brightness(1.15); }

/* === FIN DU FICHIER : D:\SpeedclicV2\www\assets\css\annuaire.css === */

/* ============================================================================
   CONTACTS RÉVÉLÉS AU CLIC                                    (31/07/2026)
   ----------------------------------------------------------------------------
   Avant, la ligne imprimait « ☎ 05 56 … · ✉ contact@… » en toutes lettres, et le
   JSON servait six cents fiches d'un coup : l'annuaire entier s'aspirait en une
   soirée. Désormais la ligne ne porte que des icônes — elles disent qu'un contact
   EXISTE, elles ne le contiennent pas — et la valeur se demande une par une.

   L'icône reste un bouton : elle doit se voir cliquable, et s'éteindre une fois
   servie. On ne redemande pas ce qu'on a déjà obtenu.
   ========================================================================== */

.an-ent-row .an-ent-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* Pousse le bloc d'icones au bord droit de la ligne (14/09/2026) : c'est ce qui
       les aligne d'une ligne a l'autre. « flex-shrink: 0 » pour qu'elles ne se
       tassent jamais — c'est le nom qui cede la place, pas elles. */
    margin-left: auto;
    flex: 0 0 auto;
    margin-top: 0;
    vertical-align: middle;
}

.an-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    transition: border-color .12s, background .12s, opacity .12s;
}

.an-ic img {
    max-width: 20px;
    max-height: 20px;
    display: block;
}

.an-ic:hover,
.an-ic:focus-visible {
    border-color: #d4a017;
    background: #fffbe8;
    outline: none;
}

/* Pendant l'aller-retour : l'icône ne doit pas paraître morte. */
.an-ic-attente {
    opacity: .45;
    cursor: progress;
}

/* Servie : elle s'efface, la valeur a pris sa place à côté. */
.an-ic-vu {
    opacity: .35;
    cursor: default;
    border-color: transparent;
    background: transparent;
}

/* Rien à servir : on le montre sans crier. */
.an-ic-vide {
    opacity: .3;
    cursor: not-allowed;
}

/* ══════════════════════════════════════════════════════════════════════════
   LE PANNEAU DE LA FICHE PAYANTE                              (22/08/2026)
   --------------------------------------------------------------------------
   Ramon : « un espace de 440 x 325 s'ouvre ». LA TAILLE N'EST PAS ÉCRITE ICI :
   elle descend du produit acheté et arrive en style en ligne. Cette feuille ne
   décrit que la MISE EN PLACE — ce qui va à gauche, ce qui va à droite, ce qui
   passe en bas — pour que 440x325 et 800x570 tiennent avec les mêmes règles.

   LA BORDURE DU PANNEAU REPREND CELLE DE LA LIGNE (bleu / rouge) : on doit voir
   d'un coup d'œil de quel modèle vient ce qu'on regarde.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   LE PANNEAU OCCUPE LA COLONNE CENTRALE                       (23/08/2026)
   --------------------------------------------------------------------------
   Ramon : « au clic, il prendra la totalite de l'espace central », puis « les
   dimensions changent, on s'adapte ». Le panneau ne flotte plus au-dessus de
   la page : il se pose DANS la colonne du milieu et la remplit — comme les
   cartes Comptabilite et Publicite Interface prennent la leur dans l'espace
   pro. La fiche payante occupe la place, elle ne la survole pas.

   LES DIMENSIONS DU PRODUIT SONT UN MINIMUM, plus une taille : --pan-l et
   --pan-h arrivent du serveur et n'empechent que l'ecrasement quand la colonne
   est plus etroite que ce que le pack a achete. Dans ce cas la zone defile ;
   le contenu ne se tasse pas.
   ══════════════════════════════════════════════════════════════════════════ */

/* L'AIRE ENTIERE DEVIENT LE REPERE DE POSITION DU PANNEAU (25/08/2026).
   .an-wrap porte les trois colonnes et s'arrete ou commence le menu noir : c'est
   exactement « tout l'ecran sauf le menu de gauche ». .an-center garde son repere
   pour le jour ou un autre gabarit n'aurait pas de .an-wrap — le repli du JS s'y
   poserait alors sans se retrouver au coin de la page. */
.an-wrap   { position: relative; }
.an-center { position: relative; }

.an-pan-zone {
    position: absolute;
    inset: 0;
    z-index: 40;
    overflow: auto;
    background: #fff;
    display: flex;
}

/* REPLI : sans colonne centrale, on retrouve la fenetre flottante d'avant. */
.an-pan-zone.an-pan-fond {
    position: fixed;
    z-index: 900;
    background: rgba(0, 0, 0, .35);
    align-items: center;
    justify-content: center;
    padding: 12px;
}

.an-pan {
    flex: 1 1 auto;
    min-width: var(--pan-l, 0);
    min-height: var(--pan-h, 0);
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 2px solid #1c5fbe;
    border-radius: 6px;
    box-shadow: none;
    overflow: hidden;
    font-size: 12px;
}

/* La fenetre flottante du repli garde son ombre et ses bornes d'ecran. */
.an-pan-fond .an-pan {
    flex: 0 0 auto;
    width: var(--pan-l, 700px);
    height: var(--pan-h, 440px);
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .30);
}

.an-pan-bleu  { border-color: #1c5fbe; }
.an-pan-rouge { border-color: #c0392b; }

/* La tête : le logo, le nom, la croix. Elle ne défile pas. */
/* ══════════════════════════════════════════════════════════════════════════
   LA PREMIERE LIGNE REPREND LA COULEUR DE LA BOITE      (23/08/2026, Ramon)
   --------------------------------------------------------------------------
   « Le bleu indiquant de cliquer dans la liste de l'annuaire devrait etre
   reporte sur la premiere ligne de la modale. Cela trancherait avec le blanc
   de la modale. La police passant au blanc. Peut-etre du jaune pour le mot
   ACTIVITE. »

   C'est le meme bleu, au caractere pres, que la ligne cliquee — et le meme
   rouge pour le grand modele. L'oeil fait le lien entre ce qu'il a clique et
   ce qui s'ouvre, sans qu'on lui explique.
   ══════════════════════════════════════════════════════════════════════════ */
.an-pan-tete {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: #1c5fbe;
    border-bottom: 1px solid #17509f;
    flex: 0 0 auto;
}

.an-pan-rouge .an-pan-tete {
    background: #c0392b;
    border-bottom-color: #a5311f;
}

.an-pan-tete .an-pan-nom,
.an-pan-tete .an-pan-tete-act-val { color: #fff; }

/* LE MOT « ACTIVITE » EN JAUNE : c'est une etiquette, pas une valeur. En blanc
   il aurait le meme poids que le metier qu'il annonce ; en jaune il s'efface
   d'un cran tout en restant lisible sur le bleu comme sur le rouge. */
.an-pan-tete .an-pan-lbl { color: #ffd54a; }

/* La croix cesse d'etre un bouton blanc sur fond blanc. */
.an-pan-tete .an-pan-x {
    background: transparent;
    border-color: rgba(255, 255, 255, .55);
    color: #fff;
}

.an-pan-tete .an-pan-x:hover {
    background: rgba(255, 255, 255, .18);
    border-color: #fff;
    color: #fff;
}

/* LA VITRINE — le logo du professionnel, en tête de sa colonne. Hauteur bornée, jamais
   déformé : un logo étiré est pire que pas de logo. */
/* LE LOGO ET L'ADRESSE PARTAGENT LA PREMIÈRE LIGNE — l'enseigne à gauche, où l'œil
   la cherche, l'adresse à côté. */
.an-pan-haut {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 8px;
}

.an-pan-vitrine {
    flex: 0 0 auto;
    width: 110px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.an-pan-adr { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }

.an-pan-vitrine img {
    max-width: 100%;
    max-height: 110px;
    object-fit: contain;
}

.an-pan-nom {
    font-weight: 700;
    font-size: 13px;
    color: #123;
    flex: 0 0 auto;
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* L'ACTIVITÉ DANS L'ENTÊTE (22/08/2026). Ramon : « l'activité en haut est normale,
   puisque c'est le métier affiché avant le clic ». C'est la promesse qui a fait ouvrir
   le panneau : elle appartient au titre. */
.an-pan-tete-act {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.an-pan-tete-act .an-pan-lbl { margin-bottom: 0; flex: 0 0 auto; }

.an-pan-tete-act-val {
    flex: 1 1 auto;
    min-width: 0;
    color: #223;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.an-pan-x {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    line-height: 1;
    border: 1px solid #c7d6ea;
    border-radius: 4px;
    background: #fff;
    color: #456;
    cursor: pointer;
}

.an-pan-x:hover { background: #eaf1fb; color: #123; }

/* Les icônes de contact, descendues de la ligne dans le panneau (22/08/2026).
   Elles gardent EXACTEMENT le dessin qu'elles avaient dans le listing : ce sont les
   mêmes boutons, servis par sc_images, et le même clic compté. */
/* LES SIX LIGNES DE COORDONNÉES — libellé à gauche, valeur écrite à droite.
   Plus une seule icône ici : sur une fiche payante on a la place, et le professionnel
   a acheté d'être joignable, pas de faire cliquer. Une ligne vide garde sa place. */
.an-pan-contacts { margin-bottom: 6px; }

.an-pan-ct-ligne {
    display: flex;
    align-items: baseline;
    gap: 24px;   /* 20/09/2026 : les numeros ecartes des appellations libres (Ramon) */
    padding: 2px 0;
    border-bottom: 1px solid #f1f4f8;
    line-height: 1.35;
    min-height: 19px;
}

.an-pan-ct-lbl {
    flex: 0 0 36%;
    color: #1c5fbe;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.an-pan-rouge .an-pan-ct-lbl { color: #c0392b; }

.an-pan-ct-val {
    flex: 1 1 auto;
    min-width: 0;
    color: #123;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Une valeur qui mène quelque part se voit : c'est elle qu'on clique. */
a.an-pan-ct-lien { color: #123; text-decoration: none; }
a.an-pan-ct-lien:hover { color: #1c5fbe; text-decoration: underline; }
.an-pan-rouge a.an-pan-ct-lien:hover { color: #c0392b; }

/* La ligne vide n'est pas un trou : elle garde sa hauteur, et c'est tout. */
.an-pan-ct-vide { min-height: 1em; }

/* Le corps : les infos à gauche, la carte à droite. */
.an-pan-corps {
    display: flex;
    gap: 8px;
    padding: 6px 8px;
    flex: 1 1 auto;
    min-height: 0;
}

.an-pan-attente {
    align-items: center;
    justify-content: center;
    color: #789;
    font-style: italic;
}

/* La colonne de gauche porte maintenant six lignes de texte : elle passe devant la
   carte en largeur. « Appeler » se faisait rogner à 45 %. */
.an-pan-infos {
    flex: 1 1 57%;
    min-width: 0;
    overflow: auto;
}

.an-pan-bloc { margin-bottom: 6px; }

.an-pan-lbl {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #7b8aa0;
    margin-bottom: 1px;
}

.an-pan-val {
    display: block;
    color: #223;
    line-height: 1.35;
}

.an-pan-mots {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.an-pan-mot {
    background: #fdf6e3;
    border: 1px solid #e6d9b8;
    border-radius: 3px;
    padding: 0 4px;
    font-size: 11px;
    color: #4a3f22;
}

/* La carte occupe TOUTE la place qui reste : c'est elle qu'on regarde. */
.an-pan-carte-boite {
    flex: 1 1 43%;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Le cadre porte la carte ET son bouton : le bouton se pose SUR la carte, il lui
   faut donc un parent positionné. */
.an-pan-carte-cadre {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}

.an-pan-carte {
    flex: 1 1 auto;
    min-height: 90px;
    border: 1px solid #dbe6f5;
    border-radius: 4px;
    background: #eef3f8;
}

/* LE BOUTON D'AGRANDISSEMENT — quatre coins dessinés, aucune police n'intervient.
   Il passe au-dessus des commandes de Leaflet (z-index 1000 chez eux). */
.an-pan-loupe {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 1200;
    width: 22px;
    height: 22px;
    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;
}

.an-pan-loupe:hover { background: #fff; border-color: #1c5fbe; }

.an-pan-loupe > span {
    width: 11px;
    height: 11px;
    border: 2px solid #1c5fbe;
    border-radius: 1px;
    /* Les deux côtés effacés font lire « ça s'ouvre » plutôt que « c'est une case ». */
    border-right-color: transparent;
    border-bottom-color: transparent;
    box-shadow: 3px 3px 0 -1px #1c5fbe inset;
}

.an-pan-rouge .an-pan-loupe > span { border-color: #c0392b; box-shadow: 3px 3px 0 -1px #c0392b inset; }
.an-pan-rouge .an-pan-loupe > span { border-right-color: transparent; border-bottom-color: transparent; }
.an-pan-rouge .an-pan-loupe:hover  { border-color: #c0392b; }

/* ── LA CARTE EN GRAND ─────────────────────────────────────────────────────
   Le panneau ne grandit pas : il donne toute sa place à la carte. Les infos, les
   contacts et le catalogue s'effacent le temps qu'on regarde, et reviennent au
   clic suivant — c'est le « retour » demandé, sur le même bouton. */
.an-pan.an-carte-plein .an-pan-contacts,
.an-pan.an-carte-plein .an-pan-infos,
.an-pan.an-carte-plein .an-pan-cat { display: none; }

.an-pan.an-carte-plein .an-pan-carte-boite { flex: 1 1 100%; }

.an-pan.an-carte-plein .an-pan-carte-boite > .an-pan-lbl { display: none; }

.an-pan.an-carte-plein .an-pan-loupe > span {
    /* Retour : les coins basculent de l'autre côté. */
    border-right-color: #1c5fbe;
    border-bottom-color: #1c5fbe;
    border-top-color: transparent;
    border-left-color: transparent;
    box-shadow: -3px -3px 0 -1px #1c5fbe inset;
}

/* Le catalogue : six emplacements de même largeur, vides pour l'instant. */
.an-pan-cat {
    flex: 0 0 auto;
    padding: 5px 8px 7px;
    border-top: 1px solid #dbe6f5;
    background: #fbfcfe;
}

.an-pan-cases {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
}

/* LES VIGNETTES SONT VERTICALES (22/08/2026, demande de Ramon). Une petite annonce
   se photographie debout — un meuble, une planche, une personne. Le rapport 3:4 est
   tenu par aspect-ratio et non par une hauteur en pixels : les six cases restent
   proportionnées, que le panneau fasse 440 ou 800 de large. C'est cette hauteur-là qui
   a fait passer le Petit Modèle de 325 à 400 (dans le PRODUIT, pas ici). */
.an-pan-case {
    aspect-ratio: 3 / 4;
    max-height: 128px;
    justify-self: center;
    width: 100%;
    border: 1px dashed #c9d6e6;
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
    font-size: 10px;
    color: #445;
    padding: 2px;
}

.an-pan-case-pleine {
    border-style: solid;
    border-color: #1c5fbe;
}

.an-pan-vide {
    margin-top: 3px;
    font-size: 10px;
    font-style: italic;
    color: #8b97a8;
}

/* Sur téléphone, 440 px de large ne tiennent pas : les deux colonnes se
   superposent et le panneau prend l'écran. La taille en ligne est bornée par
   max-width/max-height plus haut, il n'y a donc rien à annuler ici. */
@media (max-width: 640px) {
    .an-pan-corps { flex-direction: column; }
    .an-pan-carte { min-height: 120px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   TOUTE LA BOÎTE EST ACTIVE                                   (22/08/2026)
   --------------------------------------------------------------------------
   Ramon : « cela permet de rendre active TOUTE la boîte de sélection du petit
   modèle ». La ligne payante ne porte plus que le nom, « + Infos » et l'œil :
   il n'y a plus rien dedans qui fasse autre chose, donc plus aucune raison de
   viser un pixel précis. Le survol remplit la boîte — on voit ce qu'on va
   ouvrir avant de cliquer.

   LE BOUTON RESTE UN BOUTON. La ligne n'est qu'un raccourci de souris : le
   clavier et le lecteur d'écran passent toujours par lui.
   ══════════════════════════════════════════════════════════════════════════ */

.an-ent-row.an-niv { cursor: pointer; }

/* LA BOÎTE EST REMPLIE AU REPOS, pas seulement au survol : l'œil que Ramon a posé
   est BLANC, et un œil blanc sur fond blanc ne se voit pas. C'est aussi ce que montre
   sa maquette — la boîte bleue pleine, le nom en blanc. Le survol ne fait plus que
   foncer d'un cran, pour confirmer que le clic va partir. */
.an-ent-row.an-niv-bleu  { background: #1c5fbe; }
.an-ent-row.an-niv-rouge { background: #c0392b; }

.an-ent-row.an-niv-bleu:hover  { background: #17509f; }
.an-ent-row.an-niv-rouge:hover { background: #a5311f; }

.an-ent-row.an-niv .an-ent-nom,
.an-ent-row.an-niv .an-plus { color: #fff; }

/* « + Infos » — expression 993, déjà traduite dans les 63 langues. */
.an-plus {
    font-size: 11px;
    font-weight: 600;
    color: #1c5fbe;
    margin-right: 4px;
    white-space: nowrap;
}

/* Le mot est blanc dans les deux modèles : c'est le fond qui les distingue. */

/* Le bouton porte maintenant DEUX choses : le mot et l'œil. Il s'élargit donc,
   et son fond disparaît — c'est la boîte qui réagit, plus lui. */
.an-ic-fiche {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    width: auto;
    padding: 0 2px;
    background: none;
    border: 0;
}

/* L'œil dessiné en CSS (repli) suit la même règle : blanc sur le fond plein. */
.an-ent-row.an-niv .an-oeil { border-color: #fff; }
.an-ent-row.an-niv .an-oeil::after { background: #fff; }

/* L'œil en image : sa hauteur suit la ligne, jamais l'inverse. */
.an-oeil-img {
    height: 15px;
    width: auto;
    display: block;
}

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

/* ----------------------------------------------------------------------------
   LA FENÊTRE DE CONTACT                                          (31/07/2026)
   ----------------------------------------------------------------------------
   Ancrée sous l'icône, jamais au centre : au centre, on ne sait plus de quelle
   entreprise on parle. Elle est posée sur <body> et positionnée en absolu — la
   liste des entreprises défile, elle rognerait une fenêtre placée dedans.
   -------------------------------------------------------------------------- */

.an-pop {
    position: fixed;
    z-index: 9000;
    min-width: 240px;
    max-width: min(22rem, calc(100vw - 1.5rem));
    background: #fff;
    border: 1px solid #cfd9e3;
    border-radius: 6px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .18);
    font-size: 14px;
    overflow: hidden;
}

.an-pop-tete {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: #f1f4f7;
    border-bottom: 1px solid #e2e6ea;
}

/* À QUI C'EST : c'est tout l'objet du titre. */
.an-pop-nom {
    flex: 1;
    font-weight: 700;
    color: #1a2535;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.an-pop-x {
    flex: 0 0 auto;
    border: 0;
    background: none;
    color: #5a6b7b;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
}

.an-pop-x:hover { color: #8a2b2b; }

.an-pop-corps {
    padding: 12px 12px 4px;
}

/* Une adresse postale se lit sur trois lignes : destinataire, voie, ville. */
.an-pop-ligne {
    font-weight: 600;
    color: #1a2535;
    line-height: 1.45;
    word-break: break-word;
}

.an-pop-actions {
    display: flex;
    gap: 8px;
    padding: 10px 12px 12px;
    flex-wrap: wrap;
}

/* ════════════════════════════════════════════════════════════════════════════
   LA FENÊTRE « TOUT EN UN » — LE FORMAT GRATUIT                    (15/09/2026)
   ────────────────────────────────────────────────────────────────────────────
   POURQUOI CES RÈGLES ARRIVENT SI TARD : le JavaScript les appelait depuis
   plusieurs jours — an-pop-tout, an-pop-deux, an-pop-carte — mais elles
   n'étaient dans AUCUNE feuille de style. La fenêtre s'ouvrait donc à la
   largeur d'une fenêtre de contact ordinaire, et la colonne de carte, sans
   hauteur ni largeur, se réduisait à rien. Ramon a signalé les deux : « je
   t'ai demandé de doubler la largeur de la fenêtre » et « il manque aussi la
   carte ». Il ne manquait pas du code : il manquait sa moitié visible.

   LA LARGEUR NE DÉPEND PAS DU CONTENU. Une fenêtre qui rétrécit quand une
   société a moins de contacts donne l'impression que le site hésite. Elle a
   une taille, elle la garde, et la colonne de droite existe toujours — avec
   la carte, ou avec ce qu'elle annonce.
   ════════════════════════════════════════════════════════════════════════════ */

/* Le double de la fenêtre ordinaire (22rem), et jamais plus que l'écran. */
.an-pop-tout {
    min-width: 520px;
    max-width: min(44rem, calc(100vw - 1.5rem));
}

/* Avec la colonne de carte, il faut la place des deux. */
.an-pop-a-carte {
    min-width: 860px;
    max-width: min(62rem, calc(100vw - 1.5rem));
}

/* LES DEUX COLONNES. Les contacts prennent ce qu'il reste, la carte a une
   largeur fixe : une carte qui s'étire au gré du nombre de contacts n'est plus
   comparable d'une fiche à l'autre. */
.an-pop-deux > .an-pop-corps { padding: 0; }

.an-pop-deux {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 16px;
    padding: 12px;
    align-items: start;
}

/* Un contact = un bloc : son libellé, ses lignes, ses boutons. Le filet du haut
   sépare sans peser — un trait plutôt qu'une boîte, sinon la fenêtre devient un
   empilement de cadres. */
.an-pop-bloc {
    padding: 8px 0 10px;
    border-top: 1px solid #edf1f5;
}
.an-pop-bloc:first-child { border-top: 0; padding-top: 0; }

/* Le petit titre gris d'une section — « Téléphone fixe », « Localisation ». */
.an-pop-lbl {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7a8c;
    margin-bottom: 4px;
}

/* Les boutons d'un bloc sont plus discrets que ceux d'une fenêtre simple :
   il y en a un par contact, et quatre paires de gros boutons feraient un mur. */
.an-pop-actions-mini { padding: 8px 0 0; gap: 6px; }
.an-pop-btn-mini     { padding: 4px 10px; font-size: 12px; }

/* ── LA COLONNE DE CARTE ─────────────────────────────────────────────────── */
.an-pop-carte-boite { min-width: 0; }

.an-pop-carte-cadre {
    position: relative;
    height: 260px;
    border: 1px solid #dbe3ec;
    border-radius: 4px;
    overflow: hidden;
    background: #eef2f6;
}

.an-pop-carte { position: absolute; inset: 0; }

/* EN ATTENDANT LE POINT. Ramon : « même si les coordonnées sont absentes, tu
   mets un texte "Bientôt la Mini-Carte" ». Un cadre qui dit ce qu'il attend
   n'est pas un cadre vide — et il tient la largeur de la fenêtre, qui ne doit
   pas changer d'une société à l'autre. */
.an-pop-carte-attente {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px;
    color: #8493a4;
    font-size: 13px;
    font-style: italic;
    background: repeating-linear-gradient(45deg, #f4f7fa 0 10px, #eef2f6 10px 20px);
}

/* LA LOUPE COMMANDE, PAS LE CLIC SUR LA CARTE : sur une carte, un clic est déjà
   un geste (on fait glisser, on double-clique pour zoomer). Le bouton, lui, ne
   fait qu'une chose, et il refait le chemin inverse. */
.an-pop-loupe {
    position: absolute;
    top: 6px; right: 6px;
    width: 26px; height: 26px;
    padding: 0;
    border: 1px solid #cfd9e3;
    border-radius: 4px;
    background: rgba(255, 255, 255, .92);
    cursor: pointer;
    z-index: 500;              /* au-dessus des tuiles Leaflet */
}
.an-pop-loupe:hover { background: #fff; border-color: #1c5fbe; }
/* La loupe est DESSINÉE, pas écrite : aucune police n'intervient, donc rien à
   charger et rien à casser si une police manque. */
.an-pop-loupe span {
    display: block;
    width: 11px; height: 11px;
    margin: 3px 0 0 4px;
    border: 2px solid #33404f;
    border-radius: 50%;
    position: relative;
}
.an-pop-loupe span::after {
    content: '';
    position: absolute;
    right: -5px; bottom: -4px;
    width: 7px; height: 2px;
    background: #33404f;
    transform: rotate(45deg);
}

/* AGRANDIE, la carte prend toute la fenêtre — la fenêtre, elle, ne change pas
   de taille : c'est ce qu'elle montre qui change. */
.an-pop-carte-plein .an-pop-deux { grid-template-columns: minmax(0, 1fr); }
.an-pop-carte-plein .an-pop-corps { display: none; }
.an-pop-carte-plein .an-pop-carte-cadre { height: 460px; }

.an-pop-btn {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid #cfd6de;
    border-radius: 4px;
    background: #fff;
    color: #33404f;
    font: inherit;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.an-pop-btn:hover {
    border-color: #13a8d8;
    background: #eaf7fc;
}

/* Le second bouton est l'action, pas la copie : il se voit. */
.an-pop-btn-2 {
    background: #13a8d8;
    border-color: #13a8d8;
    color: #fff;
}

.an-pop-btn-2:hover {
    background: #0f8fb8;
    border-color: #0f8fb8;
    color: #fff;
}

/* Sur téléphone, ancrer sous un doigt n'a pas de sens : la fenêtre se pose en bas,
   sur toute la largeur, là où le pouce l'atteint. */
@media (max-width: 640px) {
    .an-pop {
        position: fixed;
        left: 8px !important;
        right: 8px;
        top: auto !important;
        bottom: 8px;
        max-width: none;
    }
}

/* LA FENÊTRE LARGE NE TIENT PAS SUR UN TÉLÉPHONE, ET C'EST NORMAL. Sous 900 px
   la carte passe SOUS les contacts au lieu d'être à côté : deux colonnes de
   430 px n'existent pas sur un écran de 390. On ne rétrécit pas la carte
   jusqu'à l'illisible, on la déplace — c'est la même information, rangée
   autrement. Les min-width sont annulées, sinon elles forceraient un
   défilement horizontal de toute la page. */
@media (max-width: 900px) {
    .an-pop-tout,
    .an-pop-a-carte {
        min-width: 0;
        max-width: calc(100vw - 1.5rem);
    }
    .an-pop-deux { grid-template-columns: minmax(0, 1fr); }
    .an-pop-carte-cadre { height: 220px; }
}


/* PLUSIEURS FIXES DANS LA MODALE (20/09/2026, Ramon) : appellation, numero, Copier et Appeler
   sur la meme ligne, une ligne par numero. */
/* Ramon, 20/09 : « meme distance entre appellation et telephone qu'entre telephone et premier
   bouton ». Une GRILLE a trois colonnes, chacune a la largeur de son plus long contenu, et le
   MEME ecart entre les colonnes : les boutons forment une colonne alignee, tout pres des numeros. */
.an-pop-multi { display: grid; grid-template-columns: max-content max-content max-content; column-gap: 14px; row-gap: 3px; align-items: center; }
.an-pop-multi-ligne { display: contents; }
.an-pop-multi-lbl { margin: 0; white-space: nowrap; }
.an-pop-multi-num { margin: 0; font-weight: 700; white-space: nowrap; }
.an-pop-multi-ligne .an-pop-actions { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.an-pop-multi-ligne .an-pop-btn {
    display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
    height: 20px; min-height: 0; margin: 0; padding: 0 8px; line-height: 1; vertical-align: middle;
}

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

/* ══════════════════════════════════════════════════════════════════════════════════
   LA RECHERCHE DIRECTE — le bloc gris de la maquette                (08/09/2026)
   ----------------------------------------------------------------------------------
   Ramon : « une recherche de l'annuaire plus directe que le thematique ». Sur sa
   maquette c'est un panneau gris arrondi, titre en haut a gauche, les champs empiles a
   droite, le bouton en bas. Les champs sont larges parce qu'on y tape des noms de
   societe, pas des codes.
   PAS DE LARGEUR FIXE : la maquette vient d'un ecran de 2010 et d'un site a colonne
   fixe. Ici la zone centrale se partage l'ecran avec le menu, l'arbre et la publicite,
   et sa largeur change avec la fenetre. Le panneau prend donc la place disponible, avec
   une borne haute pour que les champs ne s'etirent pas sur un ecran large — un champ de
   900 px ne se lit pas mieux qu'un champ de 460. */
/* ═══ LA ZONE EST UN PEU PLUS GRANDE ═══                                (08/09/2026)
   Ramon : « agrandit un peu la largeur et la hauteur globale de la zone de recherche ».
   La largeur passe de 660 a 760, l'interieur respire (padding et espacement des champs),
   et le titre prend un peu de champ. « Un peu » : la boite doit rester une boite posee au
   milieu, pas remplir la colonne — sinon elle cesse d'etre un objet et devient le fond. */
.an-rech {
    margin: 0; padding: 26px 30px; width: 100%; max-width: 760px;
    background: #ececec; border: 1px solid #d5d5d5; border-radius: 10px;
}
.an-rech-titre  { font-size: 16px; font-weight: 700; color: #1a2535; margin-bottom: 20px; }

/* ═══ LA DISPOSITION DE LA MAQUETTE : LA LOUPE A GAUCHE, LES CHAMPS A DROITE ═══
   (08/09/2026) Ramon : « J'aimerai que tu essayes de la placer comme sur mon image. »
   L'icone est CENTREE EN HAUTEUR sur la colonne des champs — align-items: center sur le
   corps, et non un calage a la main : le jour ou un cinquieme champ arrive, elle se
   recentre toute seule.
   ELLE NE SE SERRE PAS quand la fenetre retrecit (flex-shrink: 0) : une loupe ecrasee ne
   dit plus ce qu'elle dit. C'est la colonne des champs qui cede la premiere.
   « Speedclic c'est rarement que du texte » (Ramon) — l'image porte ici autant que le
   titre : elle dit « on cherche » avant qu'on ait lu un mot. */
.an-rech-corps  { display: flex; align-items: center; gap: 26px; }
.an-rech-icone  { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.an-rech-icone img { display: block; width: 142px; height: auto; max-width: 100%; }
.an-rech-colonne { flex: 1 1 auto; min-width: 0; }

.an-rech-champs { display: flex; flex-direction: column; gap: 13px; }
.an-rech-bloc   { display: flex; flex-direction: column; gap: 3px; }
/* DEUX LARGEURS, ET C'EST LA MAQUETTE QUI LES DONNE : long pour un nom de societe ou un
   metier, court pour une ville ou un mot. La largeur annonce ce qu'on ecrit. */
.an-rech-court  { max-width: 62%; }
.an-rech-champ {
    width: 100%; box-sizing: border-box; padding: 7px 10px; font-size: 13px;
    border: 1px solid #b9c2cc; border-radius: 4px; background: #fff; color: #1a2535;
}
.an-rech-champ::placeholder { color: #98a4b0; font-style: italic; }
.an-rech-champ:focus { outline: none; border-color: #13a8d8; background: #f7fcfe; }

.an-rech-pied { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.an-rech-btn {
    padding: 6px 22px; font-size: 13px; font-weight: 600; cursor: pointer;
    color: #1a2535; background: #f4f7fa;
    border: 1px solid #b9c2cc; border-radius: 4px;
}
.an-rech-btn:hover { background: #fff; border-color: #13a8d8; }
/* Le refus « saisissez au moins un critere » se dit A COTE DU BOUTON, pas dans une
   fenetre : c'est la qu'on vient de cliquer, et c'est la qu'on regarde. */
.an-rech-msg { font-size: 12.5px; color: #b3261e; }

/* ═══ LA LIGNE « EXEMPLES » DE LA MAQUETTE ═══                          (08/09/2026)
   Trois mots sous le champ qui enseignent que le fragment suffit. Les exemples sont des
   BOUTONS, pas des liens : ils ne menent nulle part, ils remplissent le champ au-dessus.
   Ils en ont l'apparence — bleu, souligne au survol — parce que c'est ce que la maquette
   montre et ce que l'usager reconnait comme cliquable.
   :empty NE PREND AUCUNE PLACE : la ligne est posee vide et se remplit quand le serveur a
   repondu. Sans cette regle, chaque champ porterait un blanc de quinze pixels pendant le
   temps de l'appel, et le formulaire sauterait sous les yeux du visiteur. */
.an-rech-ex        { font-size: 11.5px; color: #6b7a8c; line-height: 1.5; padding-left: 2px; }
.an-rech-ex:empty  { display: none; }
.an-rech-exlbl     { color: #8a96a3; }
.an-rech-lien {
    padding: 0; margin: 0 1px; border: 0; background: none; font: inherit; cursor: pointer;
    color: #13a8d8;
}
.an-rech-lien:hover      { text-decoration: underline; }
.an-rech-lien + .an-rech-lien::before { content: '- '; color: #8a96a3; }

/* Sous 620 px de zone centrale, la loupe et les champs ne tiennent plus cote a cote :
   l'icone passe au-dessus et retrecit. On ne la fait pas disparaitre — elle porte le sens
   du bloc — mais elle cesse de prendre la largeur d'un champ. */
@media (max-width: 720px) {
    .an-rech-corps  { flex-direction: column; align-items: stretch; gap: 12px; }
    .an-rech-icone img { width: 84px; }
    .an-rech-court  { max-width: none; }
}