/* ═══════════════════════════════════════════════════════════════════════════
   Annuaire des entreprises : cartes et bascule galerie / liste.

   Le passage d'une vue à l'autre ne recrée PAS les cartes : ce sont les mêmes
   nœuds qui se déplacent, animés par FLIP côté script. Redessiner la grille
   faisait clignoter la page et perdait la position de lecture.

   Cette feuille remplace les règles .ent-* de vogaria.css pour cette page.
   ═══════════════════════════════════════════════════════════════════════════ */

.ann-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 1.25rem;
    /* Repere des cartes pendant la bascule : le script les sort du flux et les
       positionne en absolu par rapport a la grille. */
    position: relative;
}

.ann-carte {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--background-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    /* `border-color` et `box-shadow` seulement : animer `transform` ici
       entrerait en conflit avec l'animation FLIP de la bascule de vue. */
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

/* L'anneau lumineux remplace le soulevement au survol : animer `transform`
   ici entrerait en conflit avec la bascule de vue, qui s'en sert pour deplacer
   les cartes et mesure leur position juste avant. */
.ann-carte:hover,
.ann-carte:focus-visible {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--primary-color),
                0 0 26px rgba(99, 102, 241, 0.35),
                0 18px 45px rgba(0, 0, 0, 0.45);
}

/* ── Visuel ── */
.ann-visuel {
    position: relative;
    /* Bandeau large, comme sur une fiche de projet : le logo est ce qu'on
       reconnait en premier, il occupe les trois quarts de la carte. */
    aspect-ratio: 4 / 3;
    background: var(--gradient-primary);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.ann-visuel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ann-visuel-initiales {
    font-size: 2.6rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: -0.02em;
}

/* Voile « En savoir plus » au survol, comme sur une fiche de projet. */
.ann-voile {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    background: rgba(8, 8, 18, 0.72);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.ann-carte:hover .ann-voile,
.ann-carte:focus-visible .ann-voile { opacity: 1; }

.ann-voile span {
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.ann-voile-oeil {
    font-size: 3.2rem !important;
    font-variation-settings: 'FILL' 1;
    line-height: 1;
}

.ann-boussole {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: var(--gradient-primary);
    color: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
    z-index: 2;
    transition: transform 0.25s ease;
}

.ann-carte:hover .ann-boussole { transform: rotate(-15deg) scale(1.08); }

/* ── Corps ── */
.ann-corps { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }

/* Pas de retour a la ligne : le type ferme doit rester cale a droite, toujours
   au meme endroit d'une carte a l'autre. La categorie, libellé libre parfois
   long, se tronque plutot que de pousser le type hors de vue. */
.ann-etiquettes { display: flex; align-items: center; gap: 0.5rem; }

.ann-etiquettes .ann-badge:not(.type) {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.ann-badge.type { margin-left: auto; flex: none; }

.ann-badge {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.28rem 0.6rem;
    border-radius: 6px;
    background: var(--gradient-primary);
    color: #fff;
    white-space: nowrap;
}

/* Le type métier a sa propre couleur : on repère une presse d'un coup d'œil. */
.ann-badge.type { background: #e74c3c; }
.ann-badge.type[data-type="presse"]        { background: #e74c3c; }
.ann-badge.type[data-type="concession"]    { background: #16a34a; }
.ann-badge.type[data-type="immobilier"]    { background: #f97316; }
.ann-badge.type[data-type="banque"]        { background: #eab308; color: #3b2500; }
.ann-badge.type[data-type="sante"]         { background: #ec4899; }
.ann-badge.type[data-type="securite"]      { background: #3b82f6; }
.ann-badge.type[data-type="transport"]     { background: #06b6d4; }
.ann-badge.type[data-type="batiment"]      { background: #a16207; }
.ann-badge.type[data-type="commerce"]      { background: #8b5cf6; }
.ann-badge.type[data-type="service_public"]{ background: #64748b; }
.ann-badge.type[data-type="autre"]         { background: #475569; }

.ann-nom { font-size: 1.15rem; font-weight: 800; line-height: 1.3; }

.ann-desc {
    font-size: 0.87rem;
    color: var(--text-secondary);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ann-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: auto; padding-top: 0.4rem; }

.ann-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: rgba(139, 92, 246, 0.14);
    color: #c4b5fd;
    white-space: nowrap;
}

.ann-tag.discord {
    background: rgba(88, 101, 242, 0.18);
    color: #a5b4fc;
    text-decoration: none;
}

.ann-tag.discord:hover { background: rgba(88, 101, 242, 0.32); }
.ann-tag .material-symbols-outlined { font-size: 0.9rem; }

/* ── Vue liste ──
   Les mêmes cartes, à plat. Aucune propriété animée ici : c'est FLIP qui
   fait le mouvement, la CSS ne décrit que les deux états. */
.ann-grille.liste { grid-template-columns: 1fr; gap: 0.7rem; }

.ann-grille.liste .ann-carte { flex-direction: row; align-items: stretch; }

.ann-grille.liste .ann-visuel {
    width: 132px;
    /* Le rapport de la galerie est neutralise : en liste le visuel s'etire sur
       toute la hauteur de la rangee, que c'est le texte qui fixe. */
    aspect-ratio: auto;
    height: auto;
    min-height: 96px;
    flex: none;
}

.ann-grille.liste .ann-visuel-initiales { font-size: 1.6rem; }
.ann-grille.liste .ann-voile { display: none; }
.ann-grille.liste .ann-boussole { width: 30px; height: 30px; right: 0.4rem; bottom: 0.4rem; }
.ann-grille.liste .ann-boussole .material-symbols-outlined { font-size: 1rem; }

.ann-grille.liste .ann-corps { padding: 0.85rem 1.1rem; gap: 0.4rem; }
.ann-grille.liste .ann-nom { font-size: 1rem; }
.ann-grille.liste .ann-desc { -webkit-line-clamp: 2; font-size: 0.83rem; }
.ann-grille.liste .ann-tags { padding-top: 0.2rem; }

@media (max-width: 560px) {
    .ann-grille.liste .ann-visuel { width: 92px; }
    .ann-grille.liste .ann-desc { display: none; }
}

/* ── Filtres par type de métier ── */
.ann-filtres { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1.25rem; }
.ann-filtres:empty { display: none; }

.ann-filtre {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    background: var(--background-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.ann-filtre:hover { color: var(--text-primary); border-color: var(--primary-color); }
.ann-filtre .material-symbols-outlined { font-size: 1.05rem; }

.ann-filtre-n {
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
}

.ann-filtre.active {
    color: #fff;
    border-color: transparent;
    background: var(--gradient-primary);
}

/* Le filtre actif reprend la couleur de son type, la même que sur la pastille
   de la carte : le lien entre le bouton et ce qu'il sélectionne est immédiat. */
.ann-filtre.active[data-type="presse"]         { background: #e74c3c; }
.ann-filtre.active[data-type="concession"]     { background: #16a34a; }
.ann-filtre.active[data-type="immobilier"]     { background: #f97316; }
.ann-filtre.active[data-type="banque"]         { background: #eab308; color: #3b2500; }
.ann-filtre.active[data-type="sante"]          { background: #ec4899; }
.ann-filtre.active[data-type="securite"]       { background: #3b82f6; }
.ann-filtre.active[data-type="transport"]      { background: #06b6d4; }
.ann-filtre.active[data-type="batiment"]       { background: #a16207; }
.ann-filtre.active[data-type="commerce"]       { background: #8b5cf6; }
.ann-filtre.active[data-type="service_public"] { background: #64748b; }
.ann-filtre.active[data-type="autre"]          { background: #475569; }

/* ── Bascule de vue ── */
.ann-vues { display: flex; gap: 0.3rem; background: var(--background-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 0.25rem; }

.ann-vue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 34px;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    background: none;
    color: var(--text-secondary);
    transition: background 0.2s ease, color 0.2s ease;
}

.ann-vue:hover { color: var(--text-primary); }
.ann-vue.active { background: var(--gradient-primary); color: #fff; }

/* Pendant la bascule, le survol ne doit pas interférer : `box-shadow` et
   `border-color` animés en même temps que la géométrie donneraient un
   clignotement au passage du curseur. */
.ann-grille.en-transition .ann-carte {
    pointer-events: none;
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .ann-carte, .ann-voile, .ann-boussole { transition: none !important; }
}

/* ── Offres d'emploi ── */
.ann-tag.recrute {
    background: rgba(34, 197, 94, 0.16);
    color: #4ade80;
}

.ent-offres { display: flex; flex-direction: column; gap: 0.6rem; }

.ent-offre {
    background: var(--background-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0.8rem 0.95rem;
}

.ent-offre-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 0.7rem; }
.ent-offre-titre { font-weight: 800; font-size: 0.92rem; }
.ent-offre-salaire { font-weight: 800; font-size: 0.85rem; color: #22c55e; white-space: nowrap; }

.ent-offre-desc {
    font-size: 0.83rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-top: 0.4rem;
    white-space: pre-wrap;
}

.ent-offre-images { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.6rem; }
.ent-offre-images img {
    width: 88px; height: 66px; object-fit: cover;
    border-radius: 8px; border: 1px solid var(--border-color);
}