/* =====================================================================
   gay-massage.be — habillage unique (gabarit annoncesastro-v2, skin-5 / compo-5).
   Belgique francophone, hommes qui cherchent des hommes : massage, ton viril, calme.

   REGISTRE : « JADE & LIN, CERCLES »
   Le vocabulaire de forme est le CERCLE : vignettes en médaillons cerclés de jade,
   logo rond, anneaux concentriques en filigrane (en-tête, ouverture, pied), puces
   rondes, pagination en disques, étapes du dépôt en pastilles cerclées. Aucune arche,
   aucune pilule de titre (le skin-5 en pose partout : remplacées par des plaques
   droites terminées par un anneau).

   PALETTE (accent du favicon #00695c)
     jade        #00695c   accent, liens, boutons, bandeaux
     jade foncé  #004d43   bords, survols, titres d'annonce
     jade clair  #7fc4b8   anneaux, filets, icônes sur fond sombre
     encre       #14302b   en-tête, pied, texte fort
     lin         #f6f0e5   neutre CHAUD : surfaces, colonne latérale
     page        #ebe3d5   lin grisé chaud
   Contrastes : blanc/jade 6,6:1 · blanc/encre 13:1 · jade/lin 5,9:1
   · jade foncé/blanc 9,3:1 · muet #52605c/blanc 6,4:1 · #d9ebe7/encre 11:1
   ===================================================================== */

body.aa { --aa-accent: #00695c; --aa-teinte: #00695c; --aa-primaire: #00695c; --aa-primaire-fonce: #004d43; --aa-primaire-txt: #fff;
  --aa-page: #ebe3d5; --aa-fond: #fffdf8; --aa-surface: #fffdf8; --aa-surface-2: #f6f0e5; --aa-texte: #1d2b28; --aa-muet: #52605c; --aa-bord: #e1d7c6;
  --aa-lien: #00574c; --aa-tete: #14302b; --aa-tete-txt: #f6f0e5; --aa-barre: #1d403a; --aa-bande: #00695c; --aa-bande-txt: #fff; --aa-bande-bord: #004d43;
  --aa-secondaire: #14302b; --aa-secondaire-txt: #fff; --aa-pied: #14302b; --aa-pied-txt: #d9ebe7; --aa-ok: #00695c;
  --aa-rayon: 14px; --aa-rayon-s: 10px;
  --aa-ombre: 0 1px 0 rgba(20, 48, 43, .05), 0 16px 34px -22px rgba(0, 105, 92, .55);
  --aa-police: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --aa-police-titre: "Franklin Gothic Medium", "Segoe UI Semibold", "Segoe UI", system-ui, sans-serif;
  --jl-clair: #7fc4b8; --jl-lin: #f6f0e5;
  --jl-anneaux: radial-gradient(circle, transparent 0 38%, rgba(127, 196, 184, .22) 38.5% 40%, transparent 40.5% 54%, rgba(127, 196, 184, .16) 54.5% 56%, transparent 56.5% 70%, rgba(127, 196, 184, .10) 70.5% 72%, transparent 72.5%);
  font-size: 15px;
  background-color: #ebe3d5;
  background-image: radial-gradient(circle at 12px 12px, rgba(0, 105, 92, .07) 0 2px, transparent 2.5px), radial-gradient(900px 340px at 50% -140px, rgba(0, 105, 92, .12), transparent 70%);
  background-size: 26px 26px, auto;
}
@media (min-width: 640px) { body.aa { font-size: 16px; } }

/* ---- en-tête : encre jade, anneaux en filigrane, logo rond --------------- */
body.aa .aa-header { background: var(--jl-anneaux) no-repeat right -60px center / 260px 260px, linear-gradient(180deg, #183832, #14302b 70%); box-shadow: 0 3px 0 #00695c, 0 4px 0 rgba(127, 196, 184, .5); }
body.aa .aa-logo__mark { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #7fc4b8, #00695c 58%, #004d43); box-shadow: 0 0 0 2px #14302b, 0 0 0 4px rgba(127, 196, 184, .55); }
body.aa .aa-logo__txt { font-weight: 800; letter-spacing: -.01em; }
body.aa .aa-logo__sous { opacity: 1; color: #b9d9d2; letter-spacing: .04em; font-size: .72rem; text-transform: uppercase; }
body.aa .aa-nav { background: #1d403a; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
body.aa .aa-nav a { border-bottom: 0; position: relative; color: #eef6f3; }
body.aa .aa-nav a:hover { background: rgba(127, 196, 184, .14); }
body.aa .aa-nav a.is-actif { background: var(--jl-lin); color: #14302b; border-radius: 12px 12px 0 0; font-weight: 800; box-shadow: inset 0 -3px 0 #00695c; }
body.aa .aa-header__cta, body.aa .aa-nav__cta a { background: linear-gradient(160deg, #0a7d6e, #00695c 60%, #005a4f); border-color: #004d43; color: #fff; border-radius: 14px; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .6); }
@media (max-width: 759px) {
  body.aa .aa-nav { background: #1d403a; border-radius: 16px; }
  body.aa .aa-nav a.is-actif { border-radius: 10px; border-left: 0; }
}

/* ---- conteneur : feuille de lin posée sur la page ----------------------- */
body.aa .aa-main > .aa-wrap { background: var(--aa-fond); border: 1px solid #e3d9c8; border-radius: 22px; box-shadow: var(--aa-ombre); }

/* ---- bandeaux : plaque jade droite, terminée par un anneau --------------- */
body.aa .aa-h2,
body.aa .aa-bande,
body.aa .aa-side__h,
body.aa .aa-depot__bloc legend {
  background: radial-gradient(circle at calc(100% - 20px) 50%, rgba(255, 255, 255, .20) 0 5px, transparent 5.5px 10px, rgba(255, 255, 255, .22) 10.5px 12px, transparent 12.5px), linear-gradient(100deg, #00695c, #005a4f);
  color: #fff; border-left: 0; border-radius: 12px; padding: .55rem 2.6rem .55rem 1rem; letter-spacing: .07em; font-size: .82rem; font-weight: 700;
  box-shadow: 0 8px 18px -12px rgba(0, 77, 67, .7); text-wrap: balance; }
body.aa .aa-side__h { border-radius: 14px 14px 0 0; border-bottom: 0; }
body.aa .aa-h2 .aa-ico, body.aa .aa-bande .aa-ico, body.aa .aa-side__h .aa-ico { opacity: 1; color: #c9ece4; }
body.aa .aa-bande__droite { opacity: 1; color: #e2f3ef; }
body.aa .aa-bloc__tete .aa-lien { color: #00574c; font-weight: 700; }

/* ---- ouverture : lin chaud, anneaux concentriques ----------------------- */
body.aa .aa-hero { position: relative; overflow: hidden; background: var(--jl-anneaux) no-repeat right -70px top -70px / 280px 280px, radial-gradient(circle at 100% 0, rgba(0, 105, 92, .10) 0 90px, transparent 91px), linear-gradient(135deg, #f6efe2, #fffdf8 70%); border: 1px solid #e3d9c8; border-left: 0; border-radius: 20px; box-shadow: inset 0 4px 0 #00695c, 0 14px 30px -24px rgba(0, 105, 92, .6); padding: 1.3rem 1.4rem 1.2rem; }
body.aa .aa-hero .aa-h1 { color: #14302b; letter-spacing: -.02em; text-wrap: balance; }
body.aa .aa-hero .aa-intro, body.aa .aa-hero p { color: #3f4d49; }
body.aa .aa-hero__chiffres span { background: #fffdf8; border: 2px solid #7fc4b8; border-radius: 999px; color: #004d43; padding: .3rem .9rem; font-weight: 700; }

/* ---- listes : médaillons cerclés de jade -------------------------------- */
body.aa .aa-ligne { border-bottom: 1px dashed #d9cdb9; border-radius: 16px; }
body.aa .aa-ligne:hover { background: #f3f8f6; }
body.aa .aa-ligne .aa-ligne__img { border-radius: 50%; padding: 0; border: 0; background: #f6f0e5; box-shadow: 0 0 0 3px #fffdf8, 0 0 0 5px #00695c, 0 10px 18px -10px rgba(0, 77, 67, .7); margin: 5px; width: 90px; }
body.aa .aa-ligne .aa-ligne__img img { border-radius: 50%; }
@media (min-width: 640px) { body.aa .aa-ligne .aa-ligne__img { width: 104px; } }
body.aa .aa-ligne .aa-ligne__cat { color: #00695c; }
body.aa .aa-ligne .aa-ligne__new { background: #e3f1ee; color: #004d43; border: 1px solid #7fc4b8; border-radius: 999px; }
body.aa .aa-ligne .aa-ligne__titre a { color: #004d43; }
body.aa .aa-ligne .aa-ligne__lire { border-radius: 999px; border: 2px solid #00695c; color: #00574c; background: #fffdf8; font-weight: 700; }
body.aa .aa-ligne:hover .aa-ligne__lire { background: #00695c; color: #fff; }

/* ---- boutons ------------------------------------------------------------ */
body.aa .aa-btn--primaire { background: linear-gradient(160deg, #0a7d6e, #00695c 55%, #005a4f); border-color: #004d43; color: #fff; border-radius: 14px; box-shadow: 0 10px 20px -12px rgba(0, 77, 67, .8), inset 0 -2px 0 rgba(0, 0, 0, .15); }
body.aa .aa-btn--primaire:hover { background: #004d43; }
body.aa .aa-btn--secondaire { background: #fffdf8; color: #14302b; border: 2px solid #14302b; border-radius: 14px; }
body.aa .aa-btn--secondaire:hover { background: #14302b; color: #fff; }
body.aa .aa-pagination a, body.aa .aa-pagination span { border-radius: 50%; min-width: 40px; min-height: 40px; display: inline-grid; place-items: center; }
body.aa .aa-pagination .aa-pagination__mot { border-radius: 999px; }

/* ---- colonne latérale : lin, puces rondes -------------------------------- */
body.aa .aa-side { background: var(--jl-lin); border: 1px solid #e1d7c6; border-radius: 16px; box-shadow: 0 12px 26px -22px rgba(0, 77, 67, .6); }
body.aa .aa-liens li { border-radius: 10px; }
body.aa .aa-liens li::before { width: 8px; height: 8px; border-radius: 50%; background: transparent; border: 2px solid #00695c; }
body.aa .aa-liens__nb, body.aa .aa-side__nb { background: #e3f1ee; color: #004d43; border-radius: 999px; }
body.aa .aa-chips li, body.aa .aa-chip { background: #fffdf8; border: 1.5px solid #7fc4b8; color: #14302b; }

/* ---- fiche d'annonce : photo cadrée, tableau lin, CTA en carte ---------- */
body.aa .aa-fiche__titre { color: #14302b; }
body.aa .aa-fiche__photo { border-radius: 22px; border: 0; background: #f6f0e5; box-shadow: 0 0 0 4px #fffdf8, 0 0 0 6px #7fc4b8, 0 22px 40px -26px rgba(0, 77, 67, .8); }
body.aa .aa-fiche__photo img { border-radius: 18px; }
body.aa .aa-fiche__miniatures img, body.aa .aa-fiche__miniatures a { border-radius: 50%; }
body.aa .aa-fiche__infos { border-radius: 16px; border-color: #e1d7c6; }
body.aa .aa-fiche__infos > div:nth-child(odd) { background: #f6f0e5; }
body.aa .aa-fiche__infos dt { color: #3f4d49; }
body.aa .aa-fiche__cta--haut { background: radial-gradient(circle at 100% 0, rgba(127, 196, 184, .25) 0 60px, transparent 61px), #eef6f3; border: 1px solid #bfe0d9; border-radius: 18px; }
body.aa .aa-fiche__cta--bas { background: #f6f0e5; border: 2px dashed #7fc4b8; border-radius: 22px; max-width: 560px; margin-inline: auto; }
body.aa .aa-fiche__barre, body.aa .aa-mobar { background: rgba(255, 253, 248, .95); border-top: 2px solid #7fc4b8; }

/* ---- dépôt : étapes en pastilles cerclées -------------------------------- */
body.aa .aa-depot__bloc { border-radius: 18px; border-color: #e1d7c6; background: #fffdf8; }
body.aa .aa-depot__bloc legend::before { background: #fff; color: #00695c; box-shadow: 0 0 0 2px #7fc4b8; font-weight: 800; }
body.aa .aa-form input, body.aa .aa-form select, body.aa .aa-form textarea { border-radius: 12px; border-color: #d6cab6; background: #fffdf8; color: #1d2b28; }
body.aa .aa-form input:focus, body.aa .aa-form select:focus, body.aa .aa-form textarea:focus { outline: 2px solid #00695c; outline-offset: 1px; }

/* ---- pied : encre jade, grand anneau ------------------------------------ */
body.aa .aa-footer { background: var(--jl-anneaux) no-repeat left -90px bottom -120px / 340px 340px, #14302b; color: #d9ebe7; border-top: 4px solid #00695c; }
body.aa .aa-footer a { color: #e8f4f1; }
body.aa .aa-footer .aa-footer__h { color: #7fc4b8; }
body.aa .aa-footer__bas { background: rgba(0, 0, 0, .18); }

/* ---- pop-up d'inscription ----------------------------------------------- */
body.aa .aa-popup__box { border-radius: 20px; border-top: 5px solid #00695c; }
body.aa .aa-popup__ico { border-radius: 50%; background: #e3f1ee; color: #00695c; }

@media (prefers-reduced-motion: reduce) { body.aa .aa-ligne .aa-ligne__img img { transition: none; } }

/* ---- titre de bloc : ne se fait plus écraser par le lien « toutes » (mobile) */
body.aa .aa-bloc__tete { align-items: stretch; gap: .5rem 1rem; }
body.aa .aa-bloc__tete .aa-lien { align-self: center; white-space: nowrap; }
@media (max-width: 680px) {
  body.aa .aa-bloc__tete { flex-wrap: wrap; }
  body.aa .aa-bloc__tete .aa-h2 { flex: 1 1 100%; }
  body.aa .aa-bloc__tete .aa-lien { margin-left: auto; }
}