/* club-gay.fr — annoncesastro (skin-5 / compo-1 / fiche-2) — REGISTRE « charbon & cyan »
   Palette : charbon chaud #1a1613 page · #12100d bandeau · #0f0d0a pied · surfaces #241f1a/#2c2620 · bord #3b332b
   · cyan du favicon #0097a7 → vif #0ba8ba (aplats) / clair #35c6d8 (texte) · lin #f1e9dd · muet #bcafa2 · encre #10100d.
   Composition : bandeau plein, nav en 2e rangée à soulignement cyan, hero charbon à lueur cyan + cœur en filigrane,
   formulaire en ARCHE, lignes charbon à bord gauche cyan et vignette en arche, badges/pagination en PILULES, titres en
   CARTOUCHE, photo de fiche en grande ARCHE, MÉDAILLON de la porte d'âge, pied en DEUX BLOCS. Ombres douces cyan.
   Préfixe html:not(#_) : les règles .skin-5 pèsent 0,2,0. */

/* 1. jetons */
html:not(#_) { color-scheme: dark; }
html:not(#_) body.aa {
  --cg-cyan: #0097a7; --cg-vif: #0ba8ba; --cg-clair: #35c6d8; --cg-encre: #10100d;
  --cg-fil: rgba(53, 198, 216, .3); --cg-deg: linear-gradient(170deg, #17bccd, #0097a7);
  --cg-carte: linear-gradient(180deg, #2a241f, #241f1a);
  --cg-lueur: 0 18px 34px -22px rgba(0, 151, 167, .55), 0 6px 16px -12px rgba(0, 0, 0, .7);
  --aa-fond: #1a1613; --aa-surface: #241f1a; --aa-texte: #f1e9dd; --aa-muet: #bcafa2; --aa-bord: #3b332b;
  --aa-primaire: var(--cg-vif); --aa-primaire-txt: var(--cg-encre);
  --aa-secondaire: var(--cg-clair); --aa-secondaire-txt: var(--cg-encre);
  --aa-rayon: 14px; --aa-rayon-s: 8px; --aa-ombre: var(--cg-lueur); --aa-erreur: #ff8a7a;
  --aa-police: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --aa-police-titre: Candara, Corbel, Optima, "Segoe UI", "Trebuchet MS", sans-serif;
  --aa-tete: #12100d; --aa-tete-txt: #f1e9dd; --aa-pied: #0f0d0a; --aa-pied-txt: #ddd2c5;
  background-image: radial-gradient(120% 55% at 50% -12%, rgba(0, 151, 167, .13), transparent 60%);
  background-repeat: no-repeat;
}
/* titres calmes : on sort de l'Impact capitales du skin brutaliste */
html:not(#_) .aa-h1, html:not(#_) .aa-h2, html:not(#_) .aa-fiche__titre, html:not(#_) .aa-logo,
html:not(#_) .aa-footer__brand, html:not(#_) .aa-popup__titre, html:not(#_) .aa-gate__box h2,
html:not(#_) .aa-ligne__titre { text-transform: none; font-weight: 700; letter-spacing: -.012em; }
html:not(#_) .aa-h1 { font-size: clamp(1.55rem, 1.1rem + 2vw, 2.5rem); line-height: 1.12; }
html:not(#_) a { color: var(--cg-clair); }
html:not(#_) :focus-visible { outline: 3px solid var(--cg-clair); outline-offset: 2px; }
html:not(#_) .aa-skip:focus { background: var(--cg-cyan); color: var(--cg-encre); }
html:not(#_) .aa-intro, html:not(#_) .aa-compte, html:not(#_) .aa-crumbs ol, html:not(#_) .aa-vide,
html:not(#_) .aa-side__nb, html:not(#_) .aa-side__aide, html:not(#_) .aa-form__aide, html:not(#_) .aa-regles,
html:not(#_) .aa-pagination__etat, html:not(#_) .aa-fiche__sous, html:not(#_) .aa-fiche__meta,
html:not(#_) .aa-repondre__intro, html:not(#_) .aa-fiche__signaler, html:not(#_) .aa-retour,
html:not(#_) .aa-ligne__meta, html:not(#_) .aa-popup__texte, html:not(#_) .aa-filtres__champ,
html:not(#_) .aa-fiche__infos dt, html:not(#_) .aa-fiche__physique dt { color: var(--aa-muet); }
html:not(#_) .aa-form__lbl, html:not(#_) .aa-form__check, html:not(#_) .aa-fiche__infos dd,
html:not(#_) .aa-fiche__physique dd { color: var(--aa-texte); }
html:not(#_) .aa-fiche__cat, html:not(#_) .aa-repondre__merci, html:not(#_) .aa-popup__pour { color: var(--cg-clair); }
html:not(#_) .aa-form__err { color: var(--aa-erreur); }
/* CARTOUCHE : filet cyan à gauche des titres de section */
html:not(#_) .aa-h2 { font-size: 1.3rem; padding-left: .7rem; border-left: 3px solid var(--cg-cyan); border-radius: 2px; }
html:not(#_) .aa-404 .aa-bloc .aa-h2 { border-left: 0; padding-left: 0; }
html:not(#_) .aa-bloc__tete { border-bottom: 1px solid rgba(255, 255, 255, .06); padding-bottom: .35rem; }

/* 2. boutons : rectangle cyan, ombre douce */
html:not(#_) .aa-btn { border: 1px solid transparent; border-radius: var(--aa-rayon-s); text-transform: none;
  font-weight: 700; letter-spacing: .01em; box-shadow: 0 10px 22px -14px rgba(0, 151, 167, .7); }
html:not(#_) .aa-btn--primaire, html:not(#_) .aa-repondre .aa-btn[type="submit"] {
  background: var(--cg-deg); color: var(--cg-encre); border-color: transparent; }
html:not(#_) .aa-btn--secondaire { background: rgba(255, 255, 255, .04); color: var(--cg-clair);
  border-color: rgba(53, 198, 216, .55); box-shadow: none; }
html:not(#_) .aa-btn:hover { filter: none; transform: translateY(-2px); box-shadow: 0 16px 30px -16px rgba(0, 151, 167, .85); }
html:not(#_) .aa-btn--secondaire:hover { background: rgba(53, 198, 216, .14); border-color: var(--cg-clair); }
html:not(#_) .aa-repondre .aa-btn[type="submit"]:hover { background: var(--cg-clair); }
html:not(#_) .aa-btn:active { transform: translateY(0); box-shadow: 0 6px 14px -12px rgba(0, 0, 0, .8); }

/* 3. bandeau d'en-tête plein */
html:not(#_) .aa-header { background: linear-gradient(180deg, #16130f, var(--aa-tete));
  border-bottom: 1px solid rgba(0, 151, 167, .45); box-shadow: 0 10px 30px -22px rgba(0, 0, 0, .9); }
html:not(#_) .aa-logo { font-size: 1.5rem; color: var(--aa-texte); }
/* ARCHE : la pastille du logo */
html:not(#_) .aa-logo__mark { width: 15px; height: 20px; border: 0; border-radius: 999px 999px 3px 3px;
  background: linear-gradient(180deg, #35c6d8, #0097a7);
  box-shadow: 0 0 0 1px rgba(53, 198, 216, .35), 0 6px 14px -6px rgba(0, 151, 167, .9); }
html:not(#_) .aa-burger { border: 1px solid rgba(53, 198, 216, .5); border-radius: 10px; color: var(--cg-clair); }
@media (min-width: 801px) {
  html:not(#_) .aa-nav { border-top: 1px solid rgba(255, 255, 255, .07); background: rgba(0, 151, 167, .07); }
  html:not(#_) .aa-nav li { border-right: 1px solid rgba(255, 255, 255, .07); }
  html:not(#_) .aa-nav a { text-transform: none; font-weight: 600; font-size: .95rem; letter-spacing: .01em;
    padding: .72rem 1.15rem; color: var(--aa-texte); border-bottom: 2px solid transparent; border-radius: 0; }
  html:not(#_) .aa-nav a:hover, html:not(#_) .aa-nav a.is-actif { background: rgba(53, 198, 216, .1);
    color: var(--cg-clair); border-bottom-color: var(--cg-cyan); }
  html:not(#_) .aa-nav__cta { border-left: 1px solid rgba(255, 255, 255, .07); }
  html:not(#_) .aa-nav__cta a { background: var(--cg-deg); color: var(--cg-encre) !important; font-weight: 700;
    border-bottom-color: transparent; }
  html:not(#_) .aa-nav__cta a:hover { background: var(--cg-clair); }
}
@media (max-width: 800px) {
  html:not(#_) .aa-nav { border-bottom: 1px solid rgba(0, 151, 167, .4); box-shadow: 0 18px 34px -20px rgba(0, 0, 0, .9); }
  html:not(#_) .aa-nav a { color: var(--aa-texte); border-radius: 10px; }
  html:not(#_) .aa-nav a:hover, html:not(#_) .aa-nav a.is-actif { background: rgba(53, 198, 216, .12); color: var(--cg-clair); }
}

/* 4. hero : charbon, lueur cyan, cœur en filigrane */
html:not(#_) .aa-hero { color: var(--aa-texte); border-bottom: 1px solid rgba(0, 151, 167, .35); padding-block: 2.2rem 2.6rem;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2335c6d8' fill-opacity='.09' d='M12 21.3s-8.4-5.3-8.4-11A4.7 4.7 0 0 1 12 7.2a4.7 4.7 0 0 1 8.4 3.1c0 5.7-8.4 11-8.4 11z'/%3E%3C/svg%3E") no-repeat right -34px bottom -46px / 270px 270px,
    radial-gradient(90% 120% at 8% 0%, rgba(0, 151, 167, .3), transparent 62%),
    linear-gradient(160deg, #1f1a16, #141210 70%); }
html:not(#_) .aa-hero .aa-intro { color: #d3c7ba; opacity: 1; max-width: 46ch; }
html:not(#_) .aa-hero__chiffres { color: var(--cg-clair); opacity: 1; font-weight: 700; letter-spacing: .02em;
  display: inline-block; padding: .3rem .95rem; border-radius: 999px; background: rgba(53, 198, 216, .1);
  border: 1px solid rgba(53, 198, 216, .35); }
/* ARCHE : le formulaire d'inscription */
html:not(#_) .aa-hero__form { background: linear-gradient(180deg, #2c2620, #221d19); color: var(--aa-texte);
  border: 1px solid var(--cg-fil); border-radius: 130px 130px 16px 16px; padding: 2.4rem 1.5rem 1.5rem;
  box-shadow: 0 26px 50px -28px rgba(0, 151, 167, .6), 0 10px 26px -18px rgba(0, 0, 0, .85); }
html:not(#_) .aa-hero__form-h { text-align: center; font-size: 1.25rem; }
html:not(#_) .aa-hero__form-p, html:not(#_) .aa-hero__form p:last-child { text-align: center; color: var(--aa-muet); }

/* 5. cartes charbon (filtres, colonne, infos, réponse, dépôt) + champs */
html:not(#_) .aa-filtres, html:not(#_) .aa-side, html:not(#_) .aa-fiche__infos, html:not(#_) .aa-repondre,
html:not(#_) .aa-depot__bloc { background: var(--cg-carte); border: 1px solid var(--aa-bord);
  border-radius: var(--aa-rayon); box-shadow: var(--cg-lueur); }
html:not(#_) .aa-filtres { border-top: 2px solid var(--cg-cyan); }
html:not(#_) .aa-side { padding: 1.1rem; }
html:not(#_) select, html:not(#_) input[type="text"], html:not(#_) input[type="email"], html:not(#_) input[type="tel"],
html:not(#_) input[type="number"], html:not(#_) input[type="file"], html:not(#_) textarea {
  background: #191512; color: var(--aa-texte); border: 1px solid var(--aa-bord); border-radius: var(--aa-rayon-s); }
html:not(#_) select:focus, html:not(#_) input:focus, html:not(#_) textarea:focus { outline: 2px solid var(--cg-clair);
  border-color: var(--cg-clair); }
html:not(#_) ::placeholder { color: #9a8f84; opacity: 1; }
html:not(#_) input[type="file"]::file-selector-button { font: inherit; font-weight: 700; cursor: pointer;
  background: rgba(53, 198, 216, .12); color: var(--cg-clair); border: 1px solid rgba(53, 198, 216, .45);
  border-radius: 6px; padding: .35rem .8rem; margin-right: .7rem; }

/* 6. lignes d'annonces : charbon, bord gauche cyan, vignette en arche */
html:not(#_) .aa-liste { gap: .85rem; }
html:not(#_) .aa-ligne { padding: .8rem; background: linear-gradient(100deg, #2a241e, var(--aa-surface) 55%);
  border: 1px solid var(--aa-bord); border-left: 3px solid var(--cg-cyan);
  border-radius: 4px var(--aa-rayon) var(--aa-rayon) 4px; box-shadow: 0 14px 28px -22px rgba(0, 0, 0, .9);
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease; }
html:not(#_) .aa-ligne:hover { transform: translateY(-2px); border-color: rgba(53, 198, 216, .32);
  border-left-color: var(--cg-clair); box-shadow: 0 22px 38px -22px rgba(0, 151, 167, .6); }
html:not(#_) .aa-ligne--brute { border-left-color: rgba(53, 198, 216, .35); }
html:not(#_) .aa-ligne__img { background: #16120f; border: 1px solid rgba(53, 198, 216, .28);
  border-radius: 46px 46px 8px 8px; }
html:not(#_) .aa-ligne:hover .aa-ligne__img { border-color: rgba(53, 198, 216, .6); }
/* PILULES : catégorie, « récente », compteur de photos */
html:not(#_) .aa-ligne__cat { background: rgba(0, 151, 167, .18); color: var(--cg-clair);
  border: 1px solid rgba(53, 198, 216, .28); border-radius: 999px; padding: .14rem .6rem;
  letter-spacing: .07em; font-size: .66rem; }
html:not(#_) .aa-ligne__new, html:not(#_) .aa-fiche__new { background: var(--cg-deg); color: var(--cg-encre);
  border: 0; border-radius: 999px; padding: .16rem .58rem; font-weight: 800; }
html:not(#_) .aa-ligne__nb { background: rgba(15, 13, 10, .82); color: var(--aa-texte);
  border: 1px solid var(--cg-fil); border-radius: 999px; font-weight: 600; }
html:not(#_) .aa-ligne__titre { font-size: 1.12rem; }
html:not(#_) .aa-ligne__titre a { color: var(--aa-texte); }
html:not(#_) .aa-ligne__titre a:hover { color: var(--cg-clair); }
html:not(#_) .aa-ligne__date { color: #a2978c; }
html:not(#_) .aa-ligne__extrait { color: #cdc1b4; opacity: 1; }
html:not(#_) .aa-ligne__lire { background: rgba(53, 198, 216, .1); color: var(--cg-clair); box-shadow: none;
  border: 1px solid rgba(53, 198, 216, .5); border-radius: var(--aa-rayon-s); text-transform: none;
  font-size: .86rem; font-weight: 700; }
html:not(#_) .aa-ligne__lire:hover { background: var(--cg-cyan); color: var(--cg-encre); border-color: var(--cg-cyan); }

/* 7. listes de liens en pilules (catégories, régions, villes) */
html:not(#_) .aa-liens li { background: var(--aa-surface); border: 1px solid var(--aa-bord); border-radius: 999px;
  padding: .42rem .9rem; transition: border-color .18s ease, background-color .18s ease; }
html:not(#_) .aa-liens li:hover { border-color: rgba(53, 198, 216, .55); background: #2b2520; }
html:not(#_) .aa-liens li a { color: var(--aa-texte); }
html:not(#_) .aa-liens li:hover a { color: var(--cg-clair); }
html:not(#_) .aa-liens__nb { color: var(--cg-clair); background: rgba(0, 151, 167, .16); border-radius: 999px;
  padding: 0 .45rem; font-weight: 700; }
html:not(#_) .aa-vide { background: var(--aa-surface); border: 1px dashed var(--aa-bord); box-shadow: none; }

/* 8. cartouches cyan (colonne de gauche, légendes de dépôt) */
html:not(#_) .aa-side__h, html:not(#_) .aa-depot__bloc legend { color: var(--cg-encre); background: var(--cg-deg);
  font-family: var(--aa-police-titre); font-weight: 700; font-size: .79rem; letter-spacing: .09em;
  text-transform: uppercase; display: inline-block; padding: .27rem .82rem; border-radius: 999px 999px 999px 3px; }
html:not(#_) .aa-side__h { margin-bottom: .8rem; }
html:not(#_) .aa-depot__bloc legend { margin-left: .2rem; }
html:not(#_) .aa-side__liste li { border-top: 1px solid rgba(255, 255, 255, .07); padding: .42rem 0; }
html:not(#_) .aa-side__liste li a { color: var(--aa-texte); }
html:not(#_) .aa-side__liste li a:hover, html:not(#_) .aa-side__liste li.is-actif a { color: var(--cg-clair); }
html:not(#_) .aa-depot__apercu img { border: 1px solid var(--cg-fil); border-radius: 26px 26px 8px 8px; }

/* 9. fiche d'annonce : photo en GRANDE ARCHE */
html:not(#_) .aa-fiche__photo { background: #16120f; border: 1px solid var(--cg-fil);
  border-radius: 90px 90px 14px 14px;
  box-shadow: 0 26px 48px -28px rgba(0, 151, 167, .55), 0 10px 24px -16px rgba(0, 0, 0, .9); }
@media (min-width: 760px) { html:not(#_) .aa-fiche__photo { border-radius: 150px 150px 16px 16px; } }
html:not(#_) .aa-fiche__photo--vide { background: #211c18; border: 1px dashed var(--aa-bord); }
/* l'arche rognait le badge en haut : il passe en bas, hors de la courbe */
html:not(#_) .aa-fiche__photo .aa-fiche__new { top: auto; bottom: .6rem; right: .7rem; }
html:not(#_) .aa-fiche__miniatures img { border: 1px solid var(--cg-fil); border-radius: 22px 22px 6px 6px; }
html:not(#_) .aa-fiche__miniatures img:hover { border-color: var(--cg-clair); }
/* boîte des deux CTA : carte aérée, place inchangée */
html:not(#_) .aa-fiche__cta--haut { padding: 1.15rem; gap: .7rem; border: 1px solid rgba(53, 198, 216, .32);
  border-radius: var(--aa-rayon); box-shadow: 0 22px 44px -26px rgba(0, 151, 167, .55);
  background: radial-gradient(120% 140% at 0% 0%, rgba(0, 151, 167, .2), transparent 60%),
    linear-gradient(180deg, #2c2620, #221d19); }
html:not(#_) .aa-fiche__plage { background: rgba(0, 151, 167, .14); color: var(--aa-texte);
  border: 1px solid var(--cg-fil); border-radius: 999px; }
html:not(#_) .aa-fiche__phy { background: #221d19; border: 1px solid var(--aa-bord);
  border-left: 2px solid rgba(53, 198, 216, .45); border-radius: 4px 10px 10px 4px; }
html:not(#_) .aa-chips li, html:not(#_) .aa-chip { background: #221d19; border: 1px solid var(--aa-bord);
  border-radius: 999px; color: var(--aa-texte); }
html:not(#_) .aa-chip:has(input:checked) { background: rgba(0, 151, 167, .2); border-color: var(--cg-clair);
  color: var(--aa-texte); }
/* barre basse mobile : couleurs seulement */
html:not(#_) .aa-fiche__barre { background: rgba(18, 16, 13, .94); border-top: 1px solid rgba(0, 151, 167, .5);
  box-shadow: 0 -14px 30px -18px rgba(0, 0, 0, .95); }
html:not(#_) .aa-fiche__barre .aa-btn { box-shadow: none; }

/* 10. pagination en pilules */
html:not(#_) .aa-pagination a, html:not(#_) .aa-pagination span { background: var(--aa-surface);
  border: 1px solid var(--aa-bord); border-radius: 999px; color: var(--aa-texte); }
html:not(#_) .aa-pagination a:hover { border-color: var(--cg-clair); color: var(--cg-clair); text-decoration: none; }
html:not(#_) .aa-pagination .is-actif { background: var(--cg-deg); color: var(--cg-encre); border-color: transparent;
  box-shadow: 0 8px 18px -12px rgba(0, 151, 167, .8); }

/* 11. pied en DEUX BLOCS */
html:not(#_) .aa-footer { border-top: 2px solid var(--cg-cyan); margin-top: 3rem; padding-block: 2.4rem 1rem;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2335c6d8' fill-opacity='.07' d='M12 21.3s-8.4-5.3-8.4-11A4.7 4.7 0 0 1 12 7.2a4.7 4.7 0 0 1 8.4 3.1c0 5.7-8.4 11-8.4 11z'/%3E%3C/svg%3E") no-repeat right -28px top -40px / 220px 220px,
    radial-gradient(80% 90% at 50% 0%, rgba(0, 151, 167, .16), transparent 65%),
    linear-gradient(180deg, #14110e, var(--aa-pied)); }
html:not(#_) .aa-footer__grid { gap: 1.6rem; }
html:not(#_) .aa-footer__col { border: 0; margin: 0; padding: 0; }
@media (min-width: 760px) {
  html:not(#_) .aa-footer__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 1.8rem 2.6rem; }
  html:not(#_) .aa-footer__col { padding-left: 1.2rem; border-left: 2px solid rgba(53, 198, 216, .28); }
}
html:not(#_) .aa-footer__h { text-transform: uppercase; font-family: var(--aa-police-titre); font-weight: 700;
  font-size: .78rem; letter-spacing: .1em; color: var(--cg-clair); }
html:not(#_) .aa-footer__brand { font-size: 1.5rem; color: var(--aa-texte); }
html:not(#_) .aa-footer a { color: var(--aa-pied-txt); }
html:not(#_) .aa-footer a:hover { color: var(--cg-clair); }
html:not(#_) .aa-footer__fictif { color: #b3a89c; opacity: 1; font-size: .86rem; }
html:not(#_) .aa-footer__bas { border-top: 1px solid rgba(255, 255, 255, .1); opacity: 1; color: #b3a89c; }

/* 12. pop-ups : couleurs et formes seulement */
html:not(#_) .aa-gate, html:not(#_) .aa-popup { background: rgba(12, 10, 8, .88); }
html:not(#_) .aa-gate__box, html:not(#_) .aa-popup__box { background: linear-gradient(180deg, #2c2620, #201b17);
  color: var(--aa-texte); border: 1px solid var(--cg-fil); border-radius: 22px;
  box-shadow: 0 34px 64px -26px rgba(0, 0, 0, .95), 0 0 0 1px rgba(0, 151, 167, .18); }
/* MÉDAILLON : le sceau de la porte d'âge */
html:not(#_) .aa-gate__mark { border: 0; border-radius: 50%; line-height: 72px; background: var(--cg-deg);
  color: var(--cg-encre); box-shadow: 0 0 0 6px rgba(0, 151, 167, .18), 0 14px 28px -14px rgba(0, 151, 167, .8); }
html:not(#_) .aa-popup__fermer { color: var(--aa-muet); }
html:not(#_) .aa-popup__fermer:hover { background: rgba(255, 255, 255, .08); color: var(--aa-texte); }
html:not(#_) .aa-spin { border-color: var(--aa-bord); border-top-color: var(--cg-clair); }

/* 13. mouvement réduit (le gabarit coupe déjà transitions et animations) */
@media (prefers-reduced-motion: reduce) {
  html:not(#_) .aa-ligne:hover, html:not(#_) .aa-btn:hover { transform: none; }
}