/*
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 haut du centre a la MÊME hauteur que les 2 barres de sélection (8+38+6+38+8 = 98px). */
.an-center-top {
    flex: 0 0 98px; border-bottom: 1px solid #d5dbe3; background: #f4f7fa;
    display: flex; align-items: center; justify-content: center;
}
.an-center-bottom { flex: 1; display: block; overflow-y: auto; padding: 14px 18px; min-height: 0; }

/* 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    { font-size: 11px; font-weight: 600; color: #fff; background: #13a8d8; border-radius: 10px; padding: 1px 8px; margin-left: 6px; vertical-align: middle; }
.an-res-note   { font-size: 12px; color: #8a96a3; margin: 4px 0 10px; }

/* 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%; }
.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; }

/* Pros d'une ville en 2 colonnes (limite la longueur des listes entre chaque ville). */
.an-ent-list   { list-style: none; margin: 0; padding: 0; column-count: 2; column-gap: 20px; }
.an-ent-row    { padding: 5px 8px; border-bottom: 1px solid #eef2f6;
                 break-inside: avoid; -webkit-column-break-inside: avoid; }
.an-ent-row:hover { background: #f7fafc; }
.an-ent-nom    { 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; }

.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;
    margin-left: 10px;
    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: 8px;
    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;
}

.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;
    }
}

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