/* ============================================================
   ANNUAIRE GABONIA — Styles (mobile first)
   Charte graphique GABONIA 2026 :
   aubergine / prune / mauve / or sur fonds crème
   Titres : Marcellus (capitales) · Textes : Karla
   Les couleurs du drapeau n'apparaissent que dans le logo.
   ============================================================ */
@font-face {
  font-family: 'Marcellus';
  src: url('../fonts/Marcellus-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Karla';
  src: url('../fonts/Karla-VF.ttf') format('truetype');
  font-weight: 200 800; font-style: normal; font-display: swap;
}

:root {
  /* Palette officielle */
  --aubergine: #2C1426;
  --prune: #3B1B34;
  --mauve: #8A4F6E;
  --or: #B98E48;
  --or-clair: #D9B56E;
  --creme: #FAF4EC;
  --encre: #3A1B33;
  /* Dérivés relevés dans la charte */
  --violet: #5A2450;
  --gris-prune: #5B4A55;
  --carte: #FFFDF9;
  --filet: #EADFCF;
  --or-pale: #F0DFB4;

  --radius: 20px;
  --shadow-sm: 0 2px 10px rgba(44, 20, 38, .06);
  --shadow: 0 18px 40px -18px rgba(44, 20, 38, .35);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --font-titre: 'Marcellus', Georgia, serif;
  --font-texte: 'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --bs-body-font-family: var(--font-texte);
  --bs-body-color: var(--encre);
  --bs-body-bg: var(--creme);
  --bs-link-color-rgb: 138, 79, 110;
  --bs-link-hover-color-rgb: 44, 20, 38;
  --bs-border-color: var(--filet);
}

* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-texte); font-size: 16px; line-height: 1.55;
  background: var(--creme); color: var(--encre);
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
@media (min-width: 992px) { body { font-size: 17px; } }
::selection { background: var(--or-pale); color: var(--aubergine); }
a { text-decoration: none; color: var(--mauve); }
a:hover { color: var(--aubergine); }
.titre { font-family: var(--font-titre); text-transform: uppercase; letter-spacing: .02em; font-weight: 400; }
.surtitre { font-family: var(--font-texte); font-weight: 700; text-transform: uppercase; letter-spacing: .32em; font-size: .72rem; color: var(--or); }
.fond-sombre { background: radial-gradient(ellipse at 50% 40%, var(--prune) 0%, var(--aubergine) 70%); color: var(--creme); }
.filet-or { height: 2px; background: var(--or-clair); }
.visually-hidden-focusable:focus { position: fixed !important; top: 8px; left: 8px; z-index: 2000; background: #fff; padding: 8px 14px; border-radius: 10px; }
:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }

/* ------------------------------------------------------------
   BANDEAU D'EN-TÊTE
------------------------------------------------------------ */
.bandeau { position: relative; overflow: hidden; isolation: isolate; text-align: center; padding: 2.2rem 0 2.4rem; }
.bandeau .anneau {
  position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid rgba(217, 181, 110, .16);
  pointer-events: none; z-index: -1; will-change: transform;
}
.bandeau .a1 { width: 340px; height: 340px; margin: -170px 0 0 -170px; }
.bandeau .a2 { width: 560px; height: 560px; margin: -280px 0 0 -280px; border-color: rgba(217, 181, 110, .10); }
.bandeau .a3 { width: 820px; height: 820px; margin: -410px 0 0 -410px; border-color: rgba(217, 181, 110, .06); }
.bandeau .logo {
  /* zone de protection : 1/5 du diamètre ; taille écran ≥ 120 px */
  width: 128px; height: 128px; margin: 0 auto 1.4rem; display: block; will-change: transform;
}
.bandeau h1 { font-size: clamp(1.55rem, 6.4vw, 2.6rem); line-height: 1.15; margin: .55rem 0 .6rem; color: var(--creme); }
.bandeau .slogan { color: var(--or-clair); font-size: .98rem; margin: 0; opacity: .9; }
@media (min-width: 768px) {
  .bandeau { padding: 3rem 0 3.2rem; }
  .bandeau .logo { width: 150px; height: 150px; }
}

/* Lien admin discret */
.bandeau .admin-link {
  position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; color: var(--or-clair); border: 1px solid rgba(217, 181, 110, .35);
  transition: background .2s, color .2s;
}
.bandeau .admin-link:hover { background: var(--or-clair); color: var(--aubergine); }

/* ------------------------------------------------------------
   BARRE DE RECHERCHE / FILTRES (collante)
------------------------------------------------------------ */
.outils {
  position: sticky; top: 0; z-index: 30;
  background: rgba(250, 244, 236, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s;
  padding: .85rem 0 .7rem;
}
.outils.colle { border-color: var(--filet); box-shadow: 0 10px 24px -20px rgba(44, 20, 38, .5); }

.recherche { position: relative; flex: 1 1 auto; min-width: 0; }
.recherche > i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--mauve); pointer-events: none; }
.recherche input {
  width: 100%; height: 48px; border: 1px solid var(--filet); background: #fff; border-radius: 50px;
  padding: 0 2.8rem 0 2.7rem; font-size: 1rem; color: var(--encre); outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.recherche input::placeholder { color: #a3929d; }
.recherche input:focus { border-color: var(--or); box-shadow: 0 0 0 4px rgba(185, 142, 72, .16); }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.recherche .effacer {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%;
  border: 0; background: var(--creme); color: var(--gris-prune); display: none; place-items: center;
}
.recherche.rempli .effacer { display: grid; }

.selecteur {
  height: 48px; border: 1px solid var(--filet); border-radius: 50px; background-color: #fff; color: var(--encre);
  font-size: .92rem; font-weight: 600; padding-left: 1rem; min-width: 0;
}
.selecteur:focus { border-color: var(--or); box-shadow: 0 0 0 4px rgba(185, 142, 72, .16); }

.bouton-rond {
  width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--filet); background: #fff;
  color: var(--aubergine); display: grid; place-items: center; font-size: 1.1rem; position: relative;
  transition: background .2s, color .2s, border-color .2s;
}
.bouton-rond:hover { border-color: var(--or); }
.bouton-rond.actif { background: var(--aubergine); color: var(--or-clair); border-color: var(--aubergine); }
.bouton-rond .pastille {
  position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; border-radius: 10px; padding: 0 5px;
  background: var(--or); color: #fff; font-size: .68rem; font-weight: 700; display: none; place-items: center;
}
.bouton-rond .pastille.on { display: grid; }

/* Pilules de catégorie */
.pilules {
  display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: none; padding: .75rem .75rem .15rem; margin: 0 -.75rem;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
}
.pilules::-webkit-scrollbar { display: none; }
@media (min-width: 992px) { .pilules { flex-wrap: wrap; overflow: visible; margin: 0; padding: .8rem 0 .1rem; -webkit-mask-image: none; mask-image: none; } }
.pilule {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
  border: 1px solid var(--filet); background: #fff; color: var(--gris-prune);
  font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: .45rem .85rem .45rem .55rem; border-radius: 50px; transition: background .2s, color .2s, border-color .2s;
}
.pilule .point { width: 12px; height: 12px; border-radius: 50%; background: var(--c, var(--or)); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.pilule .n { font-weight: 700; letter-spacing: 0; color: var(--or); }
.pilule:hover { border-color: var(--c, var(--or)); color: var(--aubergine); }
.pilule.actif { background: var(--c, var(--aubergine)); border-color: var(--c, var(--aubergine)); color: var(--t, var(--creme)); }
.pilule.actif .n { color: inherit; opacity: .8; }
.pilule.actif .point { background: var(--t, var(--creme)); }
.pilule:disabled { opacity: .45; }

.resultat { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin: 1.3rem 0 1rem; font-size: .9rem; color: var(--gris-prune); }
.resultat b { color: var(--aubergine); font-weight: 700; }
.reinit { border: 0; background: none; color: var(--mauve); font-weight: 700; font-size: .85rem; padding: 0; }
.reinit:hover { color: var(--aubergine); }

/* ------------------------------------------------------------
   GRILLE DE CARTES
------------------------------------------------------------ */
.grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.grille > * { min-width: 0; }
@media (min-width: 640px) { .grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 992px) { .grille { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } }
@media (min-width: 1400px) { .grille { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 359.98px) { .grille { grid-template-columns: minmax(0, 1fr); } }

.carte {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--carte); border: 1px solid var(--filet); border-radius: var(--radius);
  padding: 1.25rem .75rem 1rem; cursor: pointer; height: 100%;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s;
}
.carte:hover, .carte:focus-visible { transform: translateY(-5px); box-shadow: var(--shadow); border-color: rgba(185, 142, 72, .55); outline: none; }

/* Le médaillon : cercle doré, forme maîtresse de la charte */
.medaillon {
  position: relative; display: block; width: 92px; height: 92px; border-radius: 50%; flex-shrink: 0;
  padding: 3px; background: conic-gradient(from 210deg, var(--or), var(--or-clair), var(--or), var(--or-clair), var(--or));
  transition: transform .6s var(--ease);
}
.medaillon .int { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; border: 3px solid var(--carte); background: var(--prune); display: grid; place-items: center; }
.medaillon img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; transition: transform .8s var(--ease); }
.medaillon .ini { font-family: var(--font-titre); color: var(--or-clair); font-size: 1.9rem; }
.carte:hover .medaillon img { transform: scale(1.08); }
@media (min-width: 640px) { .medaillon { width: 112px; height: 112px; } .medaillon .ini { font-size: 2.3rem; } }

.carte .cat {
  display: inline-block; margin-top: -10px; position: relative; z-index: 1; max-width: 100%;
  font-size: .58rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: .25rem .6rem; border-radius: 50px; background: var(--c); color: var(--t); border: 2px solid var(--carte);
}
.carte .prenom { margin-top: .75rem; font-size: .92rem; font-weight: 500; color: var(--gris-prune); line-height: 1.2; }
.carte .nom { font-family: var(--font-titre); text-transform: uppercase; font-size: 1rem; line-height: 1.2; color: var(--aubergine); margin: .1rem 0 0; overflow-wrap: anywhere; }
.carte .metier { font-size: .82rem; color: var(--mauve); margin-top: .4rem; line-height: 1.3; }
.carte .role { font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--or); margin-top: .45rem; line-height: 1.4; }
.carte .actions { display: flex; justify-content: center; gap: .4rem; margin-top: auto; padding-top: .9rem; }
.carte .act {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: .9rem;
  background: var(--creme); color: var(--aubergine); border: 1px solid var(--filet);
  transition: background .2s, color .2s, transform .3s var(--ease);
}
.carte .act:hover { background: var(--aubergine); color: var(--or-clair); transform: translateY(-2px); }
@media (min-width: 640px) {
  .carte { padding: 1.6rem 1rem 1.2rem; }
  .carte .nom { font-size: 1.08rem; }
}

/* Vue liste */
.grille.liste { grid-template-columns: minmax(0, 1fr); gap: .55rem; }
@media (min-width: 992px) { .grille.liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grille.liste .carte { flex-direction: row; text-align: left; padding: .7rem .8rem; gap: .9rem; }
.grille.liste .medaillon { width: 60px; height: 60px; padding: 2px; }
.grille.liste .medaillon .int { border-width: 2px; }
.grille.liste .medaillon .ini { font-size: 1.2rem; }
.grille.liste .carte .cat { display: none; }
.grille.liste .corps { flex: 1; min-width: 0; }
.grille.liste .carte .prenom { margin-top: 0; font-size: .85rem; }
.grille.liste .carte .nom { font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grille.liste .carte .metier, .grille.liste .carte .role { margin-top: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grille.liste .carte .actions { margin: 0; padding: 0; }
.grille.liste .carte:hover { transform: translateX(3px); }
.grille.liste .point-cat { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c); margin-right: .35rem; vertical-align: middle; }
.grille:not(.liste) .point-cat { display: none; }
@media (max-width: 420px) { .grille.liste .carte .actions .act:not(.tel) { display: none; } }

mark { background: var(--or-pale); color: inherit; padding: 0 .08em; border-radius: 3px; }

/* Chargement / vide */
.squelette { border-radius: var(--radius); height: 250px; background: linear-gradient(100deg, #f1e8db 30%, #f8f1e7 50%, #f1e8db 70%); background-size: 300% 100%; animation: brille 1.3s infinite linear; }
@keyframes brille { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.vide { grid-column: 1 / -1; text-align: center; padding: 3rem 1rem; background: var(--carte); border: 1px solid var(--filet); border-radius: var(--radius); }
.vide .cercle { width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%; border: 1px solid var(--or-clair); display: grid; place-items: center; color: var(--or); font-size: 1.4rem; }
.vide .titre { color: var(--aubergine); font-size: 1.05rem; }

/* Panneau de filtres (offcanvas) */
.offcanvas.filtres { background: var(--creme); border: 0; }
.offcanvas.filtres.offcanvas-bottom { height: auto; max-height: 85vh; border-radius: 24px 24px 0 0; }
.offcanvas.filtres .offcanvas-header { border-bottom: 1px solid var(--filet); }
.offcanvas.filtres .offcanvas-title { color: var(--aubergine); font-size: 1.1rem; }
.choix { display: grid; gap: .45rem; }
.choix button {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem; width: 100%; text-align: left;
  border: 1px solid var(--filet); background: #fff; border-radius: 14px; padding: .7rem .9rem; color: var(--encre); font-weight: 600; font-size: .95rem;
}
.choix button .n { color: var(--or); font-weight: 700; font-size: .85rem; }
.choix button.actif { background: var(--aubergine); color: var(--creme); border-color: var(--aubergine); }
.choix button.actif .n { color: var(--or-clair); }

/* ------------------------------------------------------------
   FICHE (modal) — inspirée de la carte de membre
------------------------------------------------------------ */
.modal-backdrop { background: var(--aubergine); }
.modal-backdrop.show { opacity: .75; }
.fiche { border: 0; border-radius: 24px; overflow: hidden; background: var(--carte); }
@media (max-width: 575.98px) { .fiche { border-radius: 0; } }
.fiche .haut { position: relative; text-align: center; padding: 2.4rem 1.2rem 1.6rem; overflow: hidden; }
.fiche .haut::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--or-clair); }
.fiche .haut .anneau { position: absolute; left: 50%; top: 4.6rem; width: 300px; height: 300px; margin-left: -150px; margin-top: -150px; border-radius: 50%; border: 1px solid rgba(217, 181, 110, .14); }
.fiche .medaillon { width: 148px; height: 148px; margin: 0 auto; padding: 4px; animation: apparait .7s var(--ease) both; }
.fiche .medaillon .int { border-color: var(--prune); }
.fiche .medaillon .ini { font-size: 3rem; }
@keyframes apparait { from { opacity: 0; transform: scale(.85); } }
.fiche .cat { display: inline-block; margin-top: 1rem; font-size: .66rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; padding: .3rem .8rem; border-radius: 50px; background: var(--c); color: var(--t); border: 1px solid rgba(217, 181, 110, .5); }
.fiche .f-prenom { margin: .9rem 0 0; color: var(--or-clair); font-size: 1.05rem; }
.fiche .f-nom { font-family: var(--font-titre); text-transform: uppercase; font-size: clamp(1.5rem, 6vw, 1.95rem); line-height: 1.12; color: var(--creme); margin: .1rem 0 0; }
.fiche .f-metier { color: rgba(250, 244, 236, .75); margin-top: .4rem; }
.fiche .fermer {
  position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(217, 181, 110, .4); background: transparent; color: var(--or-clair); display: grid; place-items: center;
  transition: background .2s, color .2s;
}
.fiche .fermer:hover { background: var(--or-clair); color: var(--aubergine); }
.fiche .bas { padding: 1.3rem 1.2rem 1.4rem; }
@media (min-width: 576px) { .fiche .bas { padding: 1.5rem 1.8rem 1.8rem; } }
.fiche .role-gabonia { display: flex; align-items: center; gap: .8rem; padding: .8rem .9rem; border-radius: 14px; background: #fff; border: 1px solid var(--filet); margin-bottom: .9rem; }
.fiche .role-gabonia .rond { width: 40px; height: 40px; border-radius: 50%; background: var(--or); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.fiche .role-gabonia b { color: var(--aubergine); display: block; line-height: 1.2; }
.fiche .role-gabonia small { color: var(--or); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .66rem; }
.fiche .f-bio { color: var(--gris-prune); margin: 0 0 .9rem; }
.coord { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.coord li { display: flex; align-items: center; gap: .8rem; padding: .65rem .8rem; background: #fff; border: 1px solid var(--filet); border-radius: 14px; }
.coord .ic { width: 38px; height: 38px; border-radius: 50%; background: var(--creme); color: var(--mauve); display: grid; place-items: center; flex-shrink: 0; }
.coord .v { flex: 1; min-width: 0; }
.coord .v small { display: block; font-size: .64rem; text-transform: uppercase; letter-spacing: .16em; color: var(--or); font-weight: 700; }
.coord .v a, .coord .v span { color: var(--encre); font-weight: 600; word-break: break-word; }
.coord .copier { border: 0; background: var(--creme); width: 36px; height: 36px; border-radius: 50%; color: var(--gris-prune); flex-shrink: 0; }
.coord .copier:hover { background: var(--aubergine); color: var(--or-clair); }
.fiche-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: 1rem; }
.fiche-actions .btn { border-radius: 50px; font-weight: 700; padding: .75rem .5rem; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; font-size: .92rem; }
.btn-aubergine { background: var(--aubergine); color: var(--creme); border: 0; }
.btn-aubergine:hover, .btn-aubergine:focus-visible { background: var(--prune); color: var(--or-clair); }
.btn-or { background: var(--or); color: #fff; border: 0; }
.btn-or:hover, .btn-or:focus-visible { background: #a67d3c; color: #fff; }
.btn-clair { background: #fff; color: var(--aubergine); border: 1px solid var(--filet); }
.btn-clair:hover { border-color: var(--or); color: var(--aubergine); background: #fff; }
.fiche-nav { display: flex; justify-content: space-between; margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--filet); }
.fiche-nav button { border: 0; background: none; color: var(--mauve); font-weight: 600; font-size: .88rem; display: inline-flex; align-items: center; gap: .35rem; padding: .2rem; }
.fiche-nav button:hover { color: var(--aubergine); }

/* ------------------------------------------------------------
   PIED DE PAGE — bandeau aubergine bordé d'un filet or
------------------------------------------------------------ */
.pied { margin-top: 4rem; }
.pied .contenu { padding: 2.6rem 0 1.6rem; text-align: center; }
.pied .logo { width: 120px; height: 120px; margin: 0 auto 1rem; display: block; }
.pied .devise { font-family: var(--font-titre); text-transform: uppercase; color: var(--creme); font-size: 1rem; letter-spacing: .06em; line-height: 1.6; }
.pied .devise span { color: var(--or-clair); }
.pied .contact { color: rgba(250, 244, 236, .72); font-size: .9rem; margin-top: 1.2rem; }
.pied .contact a { color: var(--or-clair); }
.pied .contact a:hover { color: var(--creme); }
.pied .legal { border-top: 1px solid rgba(217, 181, 110, .18); margin-top: 1.6rem; padding-top: 1rem; font-size: .78rem; color: rgba(250, 244, 236, .5); }
.pied .legal a { color: rgba(250, 244, 236, .7); }

.haut-page {
  position: fixed; right: 16px; bottom: 16px; z-index: 1020; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--or-clair); background: var(--aubergine); color: var(--or-clair); display: grid; place-items: center;
  box-shadow: var(--shadow); opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .3s, transform .4s var(--ease);
}
.haut-page.on { opacity: 1; transform: none; pointer-events: auto; }

.notif {
  position: fixed; left: 50%; bottom: 22px; z-index: 2000; transform: translate(-50%, 24px); opacity: 0; pointer-events: none;
  background: var(--aubergine); color: var(--creme); border: 1px solid var(--or); padding: .65rem 1.1rem; border-radius: 50px;
  font-weight: 600; font-size: .9rem; box-shadow: var(--shadow); display: flex; align-items: center; gap: .5rem;
  max-width: calc(100vw - 32px); transition: opacity .3s, transform .4s var(--ease);
}
.notif.on { opacity: 1; transform: translate(-50%, 0); }
.notif i { color: var(--or-clair); }

/* ------------------------------------------------------------
   APPARITIONS
------------------------------------------------------------ */
.apparition { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); }
.apparition.vu { opacity: 1; transform: none; }
.entree { opacity: 0; animation: entree 1s var(--ease) forwards; animation-delay: var(--d, 0s); }
@keyframes entree { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.entree-logo { animation: entreeLogo 1.2s var(--ease) both; }
@keyframes entreeLogo { from { opacity: 0; transform: scale(.9); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .apparition { opacity: 1; transform: none; }
}
@media print {
  .outils, .haut-page, .bandeau .admin-link, .carte .actions { display: none !important; }
  .grille { grid-template-columns: repeat(4, 1fr) !important; }
  .carte { break-inside: avoid; }
}

/* Lien de retour vers le site GABONIA (intégration site + annuaire) */
.bandeau .site-link {
  position: absolute; top: 14px; left: 14px; height: 40px; padding: 0 1rem 0 .85rem; border-radius: 50px;
  display: inline-flex; align-items: center; gap: .45rem; color: var(--or-clair); border: 1px solid rgba(217, 181, 110, .35);
  font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; transition: background .2s, color .2s;
}
.bandeau .site-link:hover { background: var(--or-clair); color: var(--aubergine); }
@media (max-width: 380px) { .bandeau .site-link span { display: none; } .bandeau .site-link { width: 40px; padding: 0; justify-content: center; } }
@media (max-width: 575.98px) { .bandeau { padding-top: 4.2rem; } }