/* Charte graphique de la refonte 2026 (branche refonte) - chargée APRÈS les CSS actuelles de
   chaque page (voir CLAUDE.md/consignes de la refonte). Variables + styles communs (boutons,
   cartes, étoiles, formulaires, conteneur centré) repris de la maquette (Doc/animac-maquette-images/
   maquette/*.html). Polices hébergées en local dans /fonts/ - jamais d'appel à Google Fonts,
   cohérent avec le positionnement "plateforme française et souveraine" du pied de page. */

@font-face {
    font-family: "Bricolage Grotesque";
    font-style: normal;
    font-weight: 600 700;
    font-display: swap;
    src: url("/fonts/BricolageGrotesque-Variable.woff2") format("woff2-variations");
}

@font-face {
    font-family: "Figtree";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/Figtree-Variable.woff2") format("woff2-variations");
}

:root {
    /* Neutres */
    --animac-fond: #FAF7F2;
    --animac-surface: #FFFFFF;
    --animac-texte: #1F2A24;
    --animac-texte-secondaire: #4E5A53;
    --animac-texte-tertiaire: #5B665F;
    --animac-bordure: #E7E1D6;
    --animac-separateur: #EFEAE1;

    /* Vert (marque) */
    --animac-vert: #2F7A4F;
    --animac-vert-fonce: #1F5A38;
    --animac-vert-clair: #E6F1EA;

    /* Orange (accent) */
    --animac-orange: #F0A04B;
    --animac-etoile: #E08A2E;
    --animac-orange-fonce: #B4541A;
    --animac-orange-clair: #FBE9DC;

    /* Fond sombre (cagnotte, pied de page) */
    --animac-fond-sombre: #1F2A24;

    /* Arrondis */
    --animac-radius-sm: 12px;
    --animac-radius-md: 16px;
    --animac-radius-lg: 20px;
    --animac-radius-xl: 24px;
    --animac-radius-pastille: 999px;

    /* Typographie */
    --animac-police-titres: "Bricolage Grotesque", Georgia, serif;
    --animac-police-texte: "Figtree", system-ui, sans-serif;
}

.animac-2026 {
    font-family: var(--animac-police-texte);
    color: var(--animac-texte);
}

.animac-2026 h1, .animac-2026 h2, .animac-2026 h3, .animac-2026 .animac-titre {
    font-family: var(--animac-police-titres);
}

.animac-2026 a {
    color: var(--animac-vert);
    text-decoration: none;
}

.animac-2026 a:hover {
    color: var(--animac-vert-fonce);
}

/* Conteneur centré 1280px, marges 64px (16px sur mobile) - voir maquette. */
.animac-conteneur {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 64px;
}

@media (max-width: 767px) {
    .animac-conteneur {
        padding: 0 16px;
    }
}

/* Boutons - hauteur minimale 44px (cible tactile). */
.animac-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 22px;
    border-radius: var(--animac-radius-pastille);
    font-family: var(--animac-police-texte);
    font-weight: 700;
    font-size: 16px;
    border: 0;
    cursor: pointer;
}

/* ".animac-2026 a" (plus haut) a une spécificité plus forte (classe + élément) qu'une
   simple classe : sans ce préfixe, ces couleurs de bouton perdraient contre le vert de lien
   par défaut - repéré le 27/09/2026 sur "Rédiger un avis" (texte vert sur fond vert,
   quasi invisible) et sur les puces de catégorie de l'accueil (texte vert sur fond vert
   du bandeau). */
.animac-2026 .animac-btn-plein {
    background: var(--animac-vert);
    color: #FFFFFF;
}

.animac-2026 .animac-btn-plein:hover {
    background: var(--animac-vert-fonce);
    color: #FFFFFF;
}

.animac-2026 .animac-btn-contour {
    background: transparent;
    border: 1px solid var(--animac-vert);
    color: var(--animac-vert-fonce);
}

.animac-2026 .animac-btn-blanc {
    background: #FFFFFF;
    color: var(--animac-texte);
}

/* Pastilles de catégorie. */
.animac-pastille {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: var(--animac-radius-pastille);
    background: rgba(255, 255, 255, 0.92);
    color: var(--animac-texte);
    font-size: 13px;
    font-weight: 600;
}

/* Puces de catégorie sur photo (accueil) - contour translucide, voir maquette accueil.html.
   Préfixe .animac-2026 : voir commentaire sur .animac-btn-plein plus haut (même bascule
   contre ".animac-2026 a"). */
.animac-2026 .animac-puce-photo {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 16px;
    margin: 4px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.12);
    border-radius: var(--animac-radius-pastille);
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 600;
}

.animac-2026 .animac-puce-photo:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #FFFFFF;
}

/* Cartes. */
.animac-carte {
    background: var(--animac-surface);
    border: 1px solid var(--animac-bordure);
    border-radius: var(--animac-radius-lg);
    overflow: hidden;
}

/* Étoiles. */
.animac-etoiles {
    color: var(--animac-etoile);
    letter-spacing: 1px;
}

.animac-etoiles-vides {
    color: var(--animac-separateur);
    letter-spacing: 1px;
}

/* Champs de formulaire. */
.animac-champ {
    height: 46px;
    padding: 0 14px;
    border: 1px solid #D9D2C5;
    border-radius: var(--animac-radius-sm);
    font-family: var(--animac-police-texte);
    font-size: 15px;
}

/* En-tête (EnTete.ascx) - 3 modes validés le 27/09/2026 : Accueil (transparent sur photo),
   Standard (fond blanc, toutes les autres pages), Formulaire (logo + Annuler seulement, pas de
   règle particulière ici - déjà sobre par construction). */
.animac-entete-standard {
    background: var(--animac-surface);
    border-bottom: 1px solid var(--animac-bordure);
}

.animac-entete-standard .nav-link,
.animac-entete-standard .navbar-brand {
    color: var(--animac-texte);
}

.animac-entete-accueil {
    background: transparent;
}

.animac-entete-accueil .nav-link,
.animac-entete-accueil .navbar-brand {
    color: #FFFFFF;
}

.animac-entete-accueil .navbar-toggler-icon {
    filter: invert(1);
}

/* Bootstrap ne propose pas nativement de palier à 1280px (les siens : 576/768/992/1200/1400) -
   la consigne validée du 27/09/2026 demande précisément "sous 1280px, la navigation passe dans
   le menu". On reprend le mécanisme de navbar-expand-lg (JS de collapse Bootstrap inchangé) mais
   on force la bascule "toujours dépliée" à 1280px plutôt qu'à 992px, via une spécificité CSS plus
   forte (deux classes) que les règles Bootstrap correspondantes (une seule classe). */
@media (max-width: 1279.98px) {
    .animac-entete-standard.navbar-expand-lg .navbar-toggler,
    .animac-entete-accueil.navbar-expand-lg .navbar-toggler {
        display: block;
    }

    .animac-entete-standard.navbar-expand-lg .navbar-collapse,
    .animac-entete-accueil.navbar-expand-lg .navbar-collapse {
        display: none;
    }

    .animac-entete-standard.navbar-expand-lg .navbar-collapse.show,
    .animac-entete-accueil.navbar-expand-lg .navbar-collapse.show {
        display: block;
    }
}

@media (min-width: 1280px) {
    .animac-entete-standard.navbar-expand-lg .navbar-toggler,
    .animac-entete-accueil.navbar-expand-lg .navbar-toggler {
        display: none;
    }

    .animac-entete-standard.navbar-expand-lg .navbar-collapse,
    .animac-entete-accueil.navbar-expand-lg .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }
}

/* Rangée défilante horizontale (balayage tactile, comme sur une app) - utilisée pour "Vos
   derniers avis" et les derniers commerces sur l'accueil (27/09/2026, demande utilisateur).
   Pas de JS requis pour le balayage lui-même (scroll natif au doigt/trackpad) ; les flèches
   prev/next ci-dessous ne sont qu'un confort supplémentaire à la souris (voir le petit script
   en bas d'index.aspx). */
.animac-carousel {
    position: relative;
}

.animac-scroll-horizontal {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 4px;
    padding: 4px 4px 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.animac-scroll-horizontal > * {
    flex: 0 0 auto;
    width: 280px;
    scroll-snap-align: start;
}

.animac-carousel-fleche {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: var(--animac-radius-pastille);
    border: 1px solid var(--animac-bordure);
    background: var(--animac-surface);
    box-shadow: 0 2px 8px rgba(20, 30, 20, 0.15);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}

.animac-carousel-fleche.animac-carousel-prev {
    left: -18px;
}

.animac-carousel-fleche.animac-carousel-next {
    right: -18px;
}

/* Flèches réservées au pointeur souris/trackpad (desktop) - sur tactile, le balayage au doigt
   suffit et deux boutons supplémentaires n'apporteraient rien. */
@media (hover: hover) and (pointer: fine) {
    .animac-carousel-fleche {
        display: flex;
    }
}

/* Section "Près de chez vous" (accueil) - carte MapLibre + liste de villes générée en JS
   (index.aspx, loadCities()). Habillage seulement : hauteur/positionnement, contenu et JS
   inchangés. */
#osm-map {
    border-radius: var(--animac-radius-lg);
    border: 1px solid var(--animac-bordure);
}

#cities-table .list-group-item {
    border: 1px solid var(--animac-bordure) !important;
    border-radius: var(--animac-radius-sm) !important;
    margin-bottom: 8px;
}

/* #cPhoto/.bgBottom (crédit photo ou publicité pro sur la photo d'accueil, chargé depuis
   images/img-N.txt - voir index.aspx.vb/index.aspx) : ".animac-2026" posé sur #rndBG pour la
   typographie a aussi pour effet de repasser ce texte en couleur sombre (color:
   var(--animac-texte), même spécificité qu'une classe seule que ".bgBottom" - #rndBG.bg défini
   dans animac.min.css, chargé avant ce fichier), alors qu'il doit rester blanc sur la photo,
   comme avant. Repéré le 27/09/2026 (texte "Toiletteurs : ouvrez un compte..." illisible). */
.animac-2026 .bgBottom,
.animac-2026 .bgBottom a {
    color: #FFFFFF;
}

/* #sousmenu (puces de catégorie sur la photo d'accueil) : la largeur fixe de 590px
   (animac.min.css) convenait aux anciens petits liens texte, mais fait passer les nouvelles
   puces .animac-puce-photo (plus larges) sur 2 lignes - repéré le 27/09/2026. La seule largeur
   ne suffit pas : #sousmenu est un enfant flex de ".row" (flex-wrap Bootstrap), et le markup
   portait aussi la classe utilitaire "flex-wrap" - les deux forçaient un retour à la ligne dès
   que la somme des puces dépassait la largeur disponible. Sur desktop, une seule ligne (au prix
   d'un débordement scrollable plutôt qu'un retour à la ligne visuellement cassé) ; sur mobile,
   on autorise le retour à la ligne (les puces plus larges qu'avant ne tiendraient de toute façon
   pas sur une seule ligne d'un écran de téléphone). */
#sousmenu {
    width: auto;
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 4px;
}

@media (max-width: 767px) {
    #sousmenu {
        flex-wrap: wrap;
        overflow-x: visible;
    }
}

/* Bouton "Rédiger un avis" de l'en-tête : blanc sur la photo d'accueil (Mode="Accueil",
   contraste avec le fond vert du bouton se confondant sinon avec les puces de catégorie
   traslucides), vert plein sur les pages standard (voir maquette accueil.html vs
   fiche-pro.html) - repéré par comparaison directe avec la maquette le 27/09/2026. */
.animac-entete-accueil .animac-btn-plein {
    background: #FFFFFF;
    color: var(--animac-texte);
}

.animac-entete-accueil .animac-btn-plein:hover {
    background: var(--animac-fond);
    color: var(--animac-texte);
}

/* Cartes "Vos derniers avis" / "la communauté Animac..." (accueil, _avisnew/_entnew) - photo en
   pleine largeur avec nom/note en incrustation, comme la maquette accueil.html. Classe dédiée
   (pas de réutilisation de .carte-resultat, partagée avec rechercher.aspx/monactivite.aspx : on
   ne veut pas changer leur mise en page en touchant ce fichier). */
.animac-carte-accueil {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--animac-surface);
    border: 1px solid var(--animac-bordure);
    border-radius: var(--animac-radius-lg);
    overflow: hidden;
    color: var(--animac-texte);
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(20, 30, 20, 0.06), 0 8px 20px -12px rgba(20, 30, 20, 0.2);
    transition: transform .15s ease, box-shadow .15s ease;
}

.animac-carte-accueil:hover {
    color: var(--animac-texte);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(20, 30, 20, 0.08), 0 14px 28px -14px rgba(20, 30, 20, 0.26);
}

.animac-carte-accueil-photo {
    position: relative;
    height: 200px;
    background: #8C7A62;
    flex-shrink: 0;
}

.animac-carte-accueil-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.animac-carte-accueil-degrade {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(15, 18, 15, 0.82) 0%, rgba(15, 18, 15, 0) 60%);
}

.animac-carte-accueil-badge {
    position: absolute;
    left: 14px;
    top: 14px;
    padding: 5px 10px;
    border-radius: var(--animac-radius-pastille);
    background: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    font-weight: 600;
    color: var(--animac-texte);
}

.animac-carte-accueil-overlay {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 14px;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.animac-carte-accueil-nom {
    font-size: 18px;
    font-weight: 700;
}

.animac-carte-accueil-note {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.animac-carte-accueil-note .rateit {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

.animac-carte-accueil-corps {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
}

.animac-carte-accueil-titre {
    font-weight: 700;
    font-size: 16px;
}

.animac-carte-accueil-texte {
    font-size: 14px;
    line-height: 1.45;
    color: var(--animac-texte-secondaire);
}

.animac-carte-accueil-auteur {
    font-size: 13px;
    color: var(--animac-texte-tertiaire);
    margin-top: auto;
}

/* #rndBG n'était jamais "position: relative" (.bg dans animac.css ne le définit pas) : ses
   enfants "position: absolute" (#cPhoto notamment) se positionnaient donc en réalité par
   rapport à la page entière, pas à la photo - un simple "top: 570px" tombait par coïncidence
   au bon endroit visuellement, mais "bottom" ne peut pas bénéficier de la même coïncidence
   (mesuré depuis le bas de la page entière, donc hors écran). Repéré le 28/09/2026 : le crédit
   photo ne s'affichait plus du tout après le passage à "bottom". */
#rndBG {
    position: relative;
}

/* Crédit photo / publicité pro sur la photo d'accueil (#cPhoto, alimenté par
   litCreditPhotoAccueil ou par un fichier images/img-N.txt selon la photo affichée - voir
   index.aspx/index.aspx.vb) : habillage en pastille translucide façon maquette accueil.html
   ("Photo proposée par..."), sans avatar (l'un ou l'autre contenu est un simple texte, pas de
   miniature disponible pour cette pastille). Sélecteur d'ID, pas besoin de préfixer
   ".animac-2026" ici. */
#cPhoto {
    top: auto;
    bottom: 28px;
    left: 32px;
    padding: 8px 16px;
    border-radius: var(--animac-radius-pastille);
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-weight: 400;
    font-size: 14px;
    max-width: 60%;
}

/* Contrepartie à droite de #cPhoto (voir index.aspx) - simple lien souligné comme dans la
   maquette, sans pastille : évite que #cPhoto reste seul et déséquilibré sur la photo
   d'accueil. Masqué sous 992px, où #cPhoto (texte pouvant être long) occupe déjà toute la
   largeur disponible. */
#cProInvite {
    top: auto;
    bottom: 28px;
    left: auto;
    right: 32px;
    font-weight: 400;
    font-size: 14px;
    text-decoration: underline;
}

@media (max-width: 991px) {
    #cProInvite {
        display: none;
    }
}

/* Titre/sous-titre/recherche/puces de l'accueil calés à gauche dans une colonne de largeur
   fixe (maquette accueil.html), au lieu de centrés sur toute la largeur - demande utilisateur
   du 28/09/2026. */
.animac-hero-colonne {
    max-width: 760px;
    text-align: left;
}

#maxime.animac-hero-titre {
    color: #FFFFFF;
    font-size: 44px;
    line-height: 1.1;
    letter-spacing: -1px;
    font-weight: 700;
    text-align: left;
    padding: 0;
    width: auto;
    margin: 0 0 16px;
}

.animac-hero-soustitre {
    color: #EDE6DA;
    font-size: 18px;
    line-height: 1.5;
    margin: 0 0 22px;
    max-width: 640px;
}

@media (max-width: 767px) {
    #maxime.animac-hero-titre {
        font-size: 28px;
    }

    .animac-hero-soustitre {
        font-size: 16px;
    }
}

/* Barre de recherche accueil en pilule (maquette accueil.html, 28/09/2026) - remplace
   l'input-group Bootstrap. #Isearch, #input-styling-address, #suggestions-accueil et
   #ign-geocoder-suggestions gardent leurs ID et leur imbrication d'origine : le JS de
   géocodage/suggestions et les règles de positionnement définies dans index.aspx (voir
   "#Isearch { position: relative; }" etc.) en dépendent. */
.animac-recherche-pilule {
    display: flex;
    align-items: center;
    background: #FFFFFF;
    border-radius: var(--animac-radius-pastille);
    padding: 3px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.animac-recherche-champ {
    display: flex;
    flex-direction: column;
    padding: 3px 18px;
    margin: 0;
    cursor: text;
}

.animac-recherche-quoi {
    flex-grow: 1;
    border-right: 1px solid #E7E1D6;
}

.animac-recherche-ou {
    width: 200px;
}

    .animac-recherche-ou #input-styling-address {
        width: 100%;
    }

.animac-recherche-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #5B665F;
}

.animac-recherche-input {
    display: block;
    width: 100%;
    border: 0;
    outline: 0;
    font: inherit;
    font-size: 16px;
    padding: 0;
    background: transparent;
}

.animac-recherche-loc {
    width: 34px;
    height: 34px;
    border: 0;
    background: #F3EEE5;
    border-radius: var(--animac-radius-pastille);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 4px;
    color: var(--animac-texte, #1F2A24);
    outline: none;
}

    /* Même correction que .animac-recherche-submit ci-dessous : l'outline par défaut du
       navigateur est rectangulaire et déborderait de ce bouton rond. */
    .animac-recherche-loc:focus-visible {
        box-shadow: 0 0 0 3px rgba(31, 42, 36, 0.25);
    }

/* Bouton "Rechercher" sans fond ni contour (consigne utilisateur du 28/09/2026 : ni vert
   plein - #2F7A4F dans la maquette -, ni fond foncé, ni bordure - refusés tour à tour) : juste
   l'icône/texte posés sur le blanc de la pilule, seul un survol discret signale le bouton. */
.animac-recherche-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 34px;
    padding: 0 20px;
    border: 0;
    border-radius: var(--animac-radius-pastille);
    background: transparent;
    color: var(--animac-texte);
    font: inherit;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
    white-space: nowrap;
    outline: none;
}

    .animac-recherche-submit:hover {
        background: var(--animac-fond);
    }

    /* Le contour de focus par défaut du navigateur ("outline") est rectangulaire et ne suit
       pas le border-radius du bouton - il dépasse visiblement de la pilule arrondie (repéré
       le 28/09/2026). Un box-shadow suit toujours le border-radius : on le substitue à
       l'outline, uniquement au clavier (:focus-visible) pour garder l'accessibilité. */
    .animac-recherche-submit:focus-visible {
        box-shadow: 0 0 0 3px rgba(31, 42, 36, 0.25);
    }

@media (max-width: 767px) {
    .animac-recherche-pilule {
        flex-wrap: wrap;
        border-radius: var(--animac-radius-xl);
    }

    .animac-recherche-quoi {
        flex-basis: 100%;
        border-right: 0;
        border-bottom: 1px solid #E7E1D6;
    }

    .animac-recherche-ou {
        width: auto;
        flex-grow: 1;
    }

    .animac-recherche-submit {
        width: 34px;
        height: 34px;
        padding: 0;
    }

    .animac-recherche-submit-texte {
        display: none;
    }
}

/* #btLoc/#btQUery/#input-styling-address/#tbRecherche/#ign-geocoder-input/#autourde portent
   encore, dans animac.min.css (ancien input-group Bootstrap, chargé avant ce fichier), des
   règles sur ID - à tous les paliers de largeur, plusieurs en !important - pensées pour un
   flex en LIGNE alors qu'ils sont maintenant enfants d'une colonne flex
   (.animac-recherche-champ). Un ID l'emporte toujours sur une classe seule, quel que soit
   l'ordre de chargement : .animac-recherche-loc/-submit/-input/-label ne suffisaient donc pas
   à les neutraliser. Repéré le 28/09/2026 : contour rectangulaire du bouton "Rechercher" au
   clic (angles hérités "border-radius: 0 4px 4px 0"), hauteur de la pilule qui ne diminuait
   pas malgré les retouches précédentes, largeur du champ "Où" figée par endroits. Ces mêmes ID
   existent aussi sur rechercher.aspx/lieux.aspx/commerce.aspx/profil.aspx (ancien design, pas
   encore repris dans la refonte) : préfixés par #rndBG (propre à l'accueil) pour ne surtout
   pas déteindre sur ces pages. */
#rndBG #btLoc,
#rndBG #btQUery,
#rndBG #input-styling-address,
#rndBG #tbRecherche,
#rndBG #ign-geocoder-input {
    flex: none !important;
}

#rndBG #btLoc,
#rndBG #btQUery {
    height: 34px !important;
    border-radius: var(--animac-radius-pastille) !important;
}

#rndBG #input-styling-address {
    width: 100% !important;
}

#rndBG #tbRecherche,
#rndBG #ign-geocoder-input {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    font-size: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

#rndBG #autourde {
    height: auto !important;
    font-size: 12px !important;
}

@media (max-width: 767px) {
    #rndBG #btLoc,
    #rndBG #btQUery {
        width: 34px !important;
    }

    #rndBG #btQUery {
        padding: 0 !important;
    }
}

/* Barre de recherche de rechercher.aspx (29/09/2026) - même pilule que l'accueil
   (.animac-recherche-pilule), avec un champ "Catégorie" (sélecteur natif) en plus, absent de la
   pilule d'accueil. Même besoin de neutraliser les règles sur ID de sinscrire.min.css (chargé
   avant ce fichier sur cette page : #categorie/#btnRec/#autourde en fond orange,
   #tbCategorie/#tbRecherche/#input-styling-address en largeurs fixes par palier) - scoping
   #rechercheBarre (propre à cette page) au lieu de #rndBG (propre à l'accueil), même principe. */
#rechercheBarre #categorie,
#rechercheBarre #btnRec,
#rechercheBarre #autourde,
#rechercheBarre #tbCategorie,
#rechercheBarre #btLoc,
#rechercheBarre #btQUery,
#rechercheBarre #input-styling-address,
#rechercheBarre #tbRecherche,
#rechercheBarre #ign-geocoder-input {
    background: transparent !important;
    border: 0 !important;
    flex: none !important;
}

#rechercheBarre #btLoc,
#rechercheBarre #btQUery {
    height: 34px !important;
    border-radius: var(--animac-radius-pastille) !important;
}

#rechercheBarre #input-styling-address {
    width: 100% !important;
}

#rechercheBarre #tbCategorie,
#rechercheBarre #tbRecherche,
#rechercheBarre #ign-geocoder-input {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    font-size: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

#rechercheBarre #categorie,
#rechercheBarre #autourde,
#rechercheBarre #btnRec {
    height: auto !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #5B665F !important;
}

@media (max-width: 767px) {
    #rechercheBarre #btLoc,
    #rechercheBarre #btQUery {
        width: 34px !important;
    }

    #rechercheBarre #btQUery {
        padding: 0 !important;
    }
}

.animac-recherche-categorie {
    width: 200px;
    border-right: 1px solid #E7E1D6;
}

.animac-recherche-select {
    display: block;
    width: 100%;
    border: 0;
    outline: 0;
    font: inherit;
    font-size: 16px;
    padding: 0;
    background: transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 767px) {
    .animac-recherche-categorie {
        flex-basis: 100%;
        width: auto;
        border-right: 0;
        border-bottom: 1px solid #E7E1D6;
    }
}

/* Pastille cliquable pour un choix binaire (tri, rayon, filtre rapide) - radio ou checkbox
   masqué, habillage porté par le <label> qui le suit immédiatement dans le DOM (généralisation,
   29/09/2026, du même principe déjà utilisé pour les critères d'avis sur ajouteavis.aspx/
   voirAvis.aspx - .avis-criteres-grille input[type="radio"], resté propre à ces deux pages).
   Fonctionne aussi bien pour un groupe de radios que pour des checkboxes indépendantes. */
.animac-pastille-toggle {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.animac-pastille-toggle-label {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 16px;
    border: 1px solid var(--animac-bordure, #D9D2C5);
    border-radius: var(--animac-radius-pastille, 999px);
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    color: var(--animac-texte, #1F2A24);
    white-space: nowrap;
}

.animac-pastille-toggle:checked + .animac-pastille-toggle-label {
    border-color: var(--animac-vert, #2F7A4F);
    background: var(--animac-vert-clair, #E6F1EA);
    color: var(--animac-vert-fonce, #1F5A38);
}

.animac-pastille-toggle:focus-visible + .animac-pastille-toggle-label {
    box-shadow: 0 0 0 3px rgba(31, 42, 36, 0.25);
}

.animac-pastilles-groupe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Regroupement "Rayon" / "Trier par" / "Filtres rapides" sous la pilule de recherche
   (rechercher.aspx). */
.animac-recherche-filtres {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 16px;
}

.animac-filtre-groupe {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.animac-filtre-titre {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #5B665F;
}

/* Carte de résultat de recherche (29/09/2026, rechercher.aspx) - photo pleine largeur avec
   nom/note en incrustation, même principe que .animac-carte-accueil (accueil.html) et
   AfficherPointsForts (vuecommerce.aspx). Classe dédiée, pas de réutilisation de .carte-resultat
   (carte-resultat.css) : partagée avec monactivite.aspx (mise en page différente, name/note sous
   la photo), même raison que .animac-carte-accueil plus haut - on ne veut pas la changer en
   touchant ce fichier. Contenu/logique (Eval, EstRecommande, EstDansVotreVille, AddAvis,
   basculerSuivi...) inchangés, seule la disposition autour change. */
.animac-carte-recherche {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--animac-surface, #FFFFFF);
    border: 1px solid var(--animac-bordure, #E7E1D6);
    border-radius: var(--animac-radius-lg, 20px);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(20, 30, 20, 0.06), 0 8px 20px -12px rgba(20, 30, 20, 0.2);
    transition: transform .15s ease, box-shadow .15s ease;
}

.animac-carte-recherche:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(20, 30, 20, 0.08), 0 14px 28px -14px rgba(20, 30, 20, 0.26);
}

.animac-carte-recherche-photo {
    position: relative;
    height: 170px;
    background: #8C7A62;
    flex-shrink: 0;
}

    .animac-carte-recherche-photo img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.animac-carte-recherche-degrade {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(15, 18, 15, 0.82) 0%, rgba(15, 18, 15, 0) 55%);
}

/* Numéro de la carte (29/09/2026) : repère destiné à la retrouver sur la carte MapLibre à venir
   (étape 5 de rechercher.aspx) - même position sur toutes les cartes affichées, un simple
   compteur de position dans la page courante (Container.ItemIndex + 1), pas un identifiant
   stable entre deux pages/tris. */
.animac-carte-recherche-numero {
    position: absolute;
    left: 12px;
    top: 12px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--animac-texte, #1F2A24);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.animac-carte-recherche-badges {
    position: absolute;
    left: 46px;
    right: 10px;
    top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    z-index: 2;
}

    /* Même contenu HTML que .carte-badges (EstRecommande/EstDansVotreVille, rechercher.aspx.vb) -
       badges Bootstrap réhabillés en pastilles compactes, comme carte-resultat.css. */
    .animac-carte-recherche-badges .badge {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.02em;
        padding: 3px 8px;
        border-radius: var(--animac-radius-pastille, 999px);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    }

    .animac-carte-recherche-badges .badge.bg-primary {
        background-color: var(--animac-vert, #2F7A4F) !important;
    }

    .animac-carte-recherche-badges .badge.bg-warning {
        background-color: var(--animac-orange-fonce, #B4541A) !important;
        color: #fff !important;
    }

.animac-carte-recherche-overlay {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 12px;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 2;
}

.animac-carte-recherche-nom {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
}

    .animac-carte-recherche-nom a {
        color: inherit;
        text-decoration: none;
    }

.animac-carte-recherche-note {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

    .animac-carte-recherche-note .rateit {
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
    }

.animac-carte-recherche-corps {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-grow: 1;
}

.animac-carte-recherche-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--animac-texte-secondaire, #4E5A53);
}

    .animac-carte-recherche-meta .prix {
        font-weight: 800;
        color: var(--animac-vert, #2F7A4F);
    }

    .animac-carte-recherche-meta .vues {
        margin-left: auto;
    }

.animac-carte-recherche-adresse,
.animac-carte-recherche-description {
    font-size: 14px;
    color: var(--animac-texte-secondaire, #4E5A53);
}

.animac-carte-recherche-categorie {
    font-size: 13px;
    color: var(--animac-texte-tertiaire, #5B665F);
}

.animac-carte-recherche-verification {
    font-size: 12px;
    color: var(--animac-orange-fonce, #B4541A);
}

.animac-carte-recherche-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
}

    .animac-carte-recherche-actions .animac-btn-voir-fiche {
        flex-grow: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 36px;
        padding: 0 14px;
        border: 1px solid var(--animac-bordure, #D9D2C5);
        border-radius: var(--animac-radius-pastille, 999px);
        font-size: 13px;
        font-weight: 700;
        color: var(--animac-texte, #1F2A24);
        text-decoration: none;
        white-space: nowrap;
    }

        .animac-carte-recherche-actions .animac-btn-voir-fiche:hover {
            background: var(--animac-fond, #FAF7F2);
            color: var(--animac-texte, #1F2A24);
        }

    .animac-carte-recherche-actions .btn-avis-action {
        flex-grow: 1;
        background-color: var(--animac-vert, #2F7A4F);
        border-color: var(--animac-vert, #2F7A4F);
        color: #fff;
        font-weight: 700;
        font-size: 13px;
        border-radius: var(--animac-radius-pastille, 999px);
    }

        .animac-carte-recherche-actions .btn-avis-action:hover,
        .animac-carte-recherche-actions .btn-avis-action:focus {
            background-color: var(--animac-vert-fonce, #1F5A38);
            border-color: var(--animac-vert-fonce, #1F5A38);
            color: #fff;
        }

    .animac-carte-recherche-actions .btn-suivre {
        flex-shrink: 0;
        border-radius: var(--animac-radius-pastille, 999px);
    }

@media (max-width: 575px) {
    .animac-carte-recherche-photo {
        height: 140px;
    }
}

/* Grille résultats/carte de rechercher.aspx (29/09/2026, étape 5) - colonne carte à droite,
   qui reste visible au défilement (maquette). .animac-resultats-liste-seule (posée en JS par
   basculerVueCarte) repasse sur une seule colonne, carte masquée. */
.animac-resultats-grille {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 24px;
    align-items: start;
}

.animac-resultats-grille.animac-resultats-liste-seule {
    grid-template-columns: 1fr;
}

    .animac-resultats-grille.animac-resultats-liste-seule .animac-recherche-carte-colonne {
        display: none;
    }

.animac-recherche-carte-colonne {
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.animac-recherche-carte {
    height: 520px;
    border-radius: var(--animac-radius-lg, 20px);
    overflow: hidden;
    border: 1px solid var(--animac-bordure, #E7E1D6);
    background: var(--animac-fond, #FAF7F2);
}

.animac-btn-zone {
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 18px;
    border: 1px solid var(--animac-vert, #2F7A4F);
    border-radius: var(--animac-radius-pastille, 999px);
    background: #FFFFFF;
    color: var(--animac-vert-fonce, #1F5A38);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
}

    .animac-btn-zone:hover {
        background: var(--animac-vert-clair, #E6F1EA);
    }

/* Repère numéroté sur la carte (marker MapLibre custom, voir rechercher.aspx) - vert si la
   fiche a au moins un avis, orange sinon ("à noter en premier", maquette). */
.animac-marqueur-recherche {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
    border: 2px solid #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    cursor: pointer;
}

@media (max-width: 991px) {
    .animac-resultats-grille {
        grid-template-columns: 1fr;
    }

    .animac-recherche-carte-colonne {
        position: static;
    }
}

/* Pagination de rechercher.aspx (29/09/2026) - pastilles rondes au lieu du style Bootstrap par
   défaut (bleu, carré). Page active : classe posée par dlPaging_ItemDataBound
   (rechercher.aspx.vb), plus de couleur en dur côté code-behind. */
.animac-pagination-zone {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

    .animac-pagination-zone .pagination {
        margin: 0;
        gap: 4px;
    }

        .animac-pagination-zone .pagination .page-link {
            border: 1px solid var(--animac-bordure, #D9D2C5);
            border-radius: var(--animac-radius-pastille, 999px);
            color: var(--animac-texte, #1F2A24);
            font-weight: 600;
            font-size: 14px;
        }

            .animac-pagination-zone .pagination .page-link:hover {
                background: var(--animac-fond, #FAF7F2);
                color: var(--animac-texte, #1F2A24);
            }

            .animac-pagination-zone .pagination .page-link.animac-page-active {
                background: var(--animac-vert, #2F7A4F);
                border-color: var(--animac-vert, #2F7A4F);
                color: #FFFFFF;
            }

    .animac-pagination-info {
        font-size: 14px;
        color: var(--animac-texte-secondaire, #4E5A53);
    }

/* Bloc "Vous ne trouvez pas ce que vous cherchez ?" (29/09/2026, maquette) en pied de résultats.
   3 liens (commerce/service/lieu) plutôt qu'un seul "Ajouter un lieu" comme dans la maquette :
   enType (commerce.aspx.vb/service.aspx.vb/lieux.aspx.vb, 1/2/3) est choisi à la création de
   chaque fiche, indépendamment de sa catégorie - rien ne permet de déduire de façon fiable, à
   partir d'une recherche par catégorie, laquelle des 3 pages d'ajout est la bonne (vérifié avant
   d'implémenter : mêmes catégories disponibles sur les 3 formulaires d'ajout, aucune table ne
   rattache une catégorie à un enType). Mieux vaut proposer les 3 que se tromper de lien. */
.animac-carte-ajouter-lieu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
    padding: 20px 24px;
    border: 1px dashed var(--animac-bordure, #D9D2C5);
    border-radius: var(--animac-radius-lg, 20px);
    background: var(--animac-fond, #FAF7F2);
}

    .animac-carte-ajouter-lieu span {
        font-size: 15px;
        color: var(--animac-texte, #1F2A24);
    }

    .animac-carte-ajouter-lieu-liens {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

        .animac-carte-ajouter-lieu-liens a {
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            height: 36px;
            padding: 0 14px;
            border: 1px solid var(--animac-vert, #2F7A4F);
            border-radius: var(--animac-radius-pastille, 999px);
            background: #FFFFFF;
            color: var(--animac-vert-fonce, #1F5A38);
            font-weight: 700;
            font-size: 13px;
            text-decoration: none;
        }

            .animac-carte-ajouter-lieu-liens a:hover {
                background: var(--animac-vert-clair, #E6F1EA);
                color: var(--animac-vert-fonce, #1F5A38);
            }

/* Fil d'Ariane de rechercher.aspx (29/09/2026, AfficherFilArianeRecherche) - même habillage que
   .fiche-fil-ariane (fiche-identite.css, vuecommerce.aspx) mais redéfini ici plutôt que
   d'inclure ce fichier, propre à un contexte différent (fiche commerce). */
.animac-fil-ariane {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 14px 0;
    font-size: 14px;
    color: var(--animac-texte-tertiaire, #5B665F);
}

    .animac-fil-ariane a {
        color: var(--animac-texte-tertiaire, #5B665F);
    }

    .animac-fil-ariane a:hover {
        color: var(--animac-vert, #2F7A4F);
    }

    .animac-fil-ariane [aria-current="page"] {
        color: var(--animac-texte, #1F2A24);
    }

/* Pages d'aide (30/09/2026, refonte étape C) - pas de maquette dédiée pour ces ~25 pages de
   contenu texte (aide.aspx + aide_*.aspx) : gabarit unique défini à partir de la charte,
   remplaçant le Bootstrap générique (container/row/col-4/col-8) utilisé jusqu'ici. Sidebar
   (aides.inc, partagée par toutes ces pages) + colonne de contenu. */
.animac-aide-page {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 32px;
    max-width: 1100px;
    margin: 24px auto;
    padding: 0 24px;
    align-items: start;
}

    @media (max-width: 900px) {
        .animac-aide-page {
            grid-template-columns: 1fr;
        }
    }

.animac-aide-sidebar {
    background: var(--animac-fond, #FAF7F2);
    border: 1px solid var(--animac-bordure, #E7E1D6);
    border-radius: var(--animac-radius-lg, 20px);
    padding: 20px;
}

    .animac-aide-sidebar-titre {
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--animac-texte-secondaire, #4E5A53);
        margin-bottom: 12px;
    }

    .animac-aide-sidebar a {
        display: block;
        padding: 8px 10px;
        border-radius: var(--animac-radius-sm, 12px);
        color: var(--animac-texte, #1F2A24);
        text-decoration: none;
        font-size: 14px;
        font-weight: 600;
    }

        .animac-aide-sidebar a:hover {
            background: var(--animac-vert-clair, #E6F1EA);
            color: var(--animac-vert-fonce, #1F5A38);
        }

    .animac-aide-sidebar-contact {
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid var(--animac-bordure, #E7E1D6);
        font-size: 13px;
        color: var(--animac-texte-secondaire, #4E5A53);
    }

        .animac-aide-sidebar-contact a {
            display: inline;
            padding: 0;
        }

.animac-aide-contenu h3 {
    font-family: var(--animac-police-titres, Georgia, serif);
    margin-bottom: 12px;
}

.animac-aide-contenu h5 {
    margin-top: 28px;
    margin-bottom: 12px;
    color: var(--animac-vert-fonce, #1F5A38);
}

.animac-aide-contenu p {
    line-height: 1.6;
    color: var(--animac-texte, #1F2A24);
}

.animac-aide-contenu img.img-fluid {
    border-radius: var(--animac-radius-md, 16px);
    border: 1px solid var(--animac-bordure, #E7E1D6);
    margin: 12px 0;
}

.animac-aide-contenu .list-group-item {
    border: 1px solid var(--animac-bordure, #E7E1D6) !important;
    border-radius: var(--animac-radius-sm, 12px) !important;
    margin-bottom: 8px;
    color: var(--animac-texte, #1F2A24);
    font-weight: 600;
}

    .animac-aide-contenu .list-group-item:hover {
        background: var(--animac-vert-clair, #E6F1EA);
        border-color: var(--animac-vert, #2F7A4F) !important;
        color: var(--animac-vert-fonce, #1F5A38);
    }

/* Pages légales/factuelles (30/09/2026, refonte étape C) - cgu.aspx/reglement.aspx/
   polconf.aspx/souverainete.aspx partagent le même patron (container > card bg-light >
   article.card-body) : un seul habillage plutôt que de le refaire 4 fois. Remplace aussi la
   teinte orange héritée (#EF6945, ancienne charte) codée en dur dans ces 4 pages par
   var(--animac-orange). */
.animac-page-texte {
    background: var(--animac-surface, #FFFFFF);
    border: 1px solid var(--animac-bordure, #E7E1D6);
    border-radius: var(--animac-radius-lg, 20px);
    padding: 8px 0;
}

    .animac-page-texte .card-title {
        font-family: var(--animac-police-titres, Georgia, serif);
    }

    .animac-page-texte h3, .animac-page-texte h4 {
        color: var(--animac-vert-fonce, #1F5A38);
    }

    .animac-page-texte p {
        line-height: 1.6;
        color: var(--animac-texte, #1F2A24);
    }

    .animac-page-texte a {
        color: var(--animac-vert, #2F7A4F);
    }

/* Boutons de catégorie des pages News/ (30/09/2026, refonte étape C - toilettage léger) -
   remplacent btn-outline-dark (gris Bootstrap générique) sur les 23 pages News/ : le hero
   photo par article et la mise en page restent inchangés, seuls ces boutons détonnaient avec
   la charte. */
.animac-news-pill {
    border: 1px solid var(--animac-vert, #2F7A4F) !important;
    border-radius: var(--animac-radius-pastille, 999px) !important;
    color: var(--animac-vert-fonce, #1F5A38) !important;
    background: transparent;
}

    .animac-news-pill:hover {
        background: var(--animac-vert-clair, #E6F1EA) !important;
        color: var(--animac-vert-fonce, #1F5A38) !important;
    }

    .animac-news-pill.active {
        background: var(--animac-vert, #2F7A4F) !important;
        color: #FFFFFF !important;
    }