/* club-echangiste-namur.be — registre « vert citadelle & pierre bleue »
   Namur : la citadelle au confluent, la pierre bleue du Condroz.
   Palette : accent #2f5d50 (vert citadelle, favicon) · citadelle nuit #1f3f36 ·
   pierre bleue #3e4c57 · neutre chaud sable #f3ece0 / lin #fbf8f1 · encre #1d2724.
   Formes signature : créneaux (merlons) sous l'en-tête et sur le pied, vignettes et photo
   en ARCHE de porte de citadelle, cartouches taillés (catégories), logo en bastion,
   appareil de pierre dans le hero, cœur discret dans les cartes d'appel. */

body.aa.skin-4 {
  --cit: #2f5d50; --cit-nuit: #1f3f36; --pb: #3e4c57; --sable: #f3ece0; --lin: #fbf8f1; --encre: #1d2724;
  --aa-fond: var(--sable); --aa-surface: var(--lin); --aa-texte: var(--encre); --aa-muet: #5a574e;
  --aa-bord: #dccfba; --aa-secondaire: var(--pb); --aa-secondaire-txt: #fff;
  --aa-tete: var(--lin); --aa-tete-txt: var(--encre);
  --aa-pied: var(--cit-nuit); --aa-pied-txt: #ece5d6;
  --aa-rayon: 18px;
  --aa-ombre: 0 10px 26px -16px rgba(31, 63, 54, .55), 0 2px 6px -3px rgba(62, 76, 87, .18);
  --aa-police: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --aa-police-titre: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --coeur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232f5d50' fill-opacity='.13' d='M12 21s-7.5-4.6-9.6-9.2C.9 8.5 3 5 6.5 5c2 0 3.5 1.1 5.5 3 2-1.9 3.5-3 5.5-3C21 5 23.1 8.5 21.6 11.8 19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E");
  background: var(--sable); color: var(--encre);
}
.aa.skin-4 .aa-h1, .aa.skin-4 .aa-h2, .aa.skin-4 .aa-fiche__titre, .aa.skin-4 .aa-ligne__titre,
.aa.skin-4 .aa-popup__titre, .aa.skin-4 .aa-footer__brand { font-family: var(--aa-police-titre); letter-spacing: .005em; }
.aa.skin-4 .aa-h1 { color: var(--cit-nuit); font-weight: 700; }
.aa.skin-4 .aa-h2 { color: var(--cit-nuit); font-weight: 700; display: flex; align-items: center; gap: .55rem; }
/* créneau miniature devant chaque titre de section */
.aa.skin-4 .aa-h2::before { content: ""; flex: none; width: 18px; height: 11px;
  background: linear-gradient(90deg, var(--cit) 0 30%, transparent 30% 40%, var(--cit) 40% 60%, transparent 60% 70%, var(--cit) 70%) top / 100% 5px no-repeat,
              linear-gradient(var(--cit), var(--cit)) bottom / 100% 7px no-repeat; }

/* ---------- En-tête : lin, bordure pierre bleue, frise de créneaux ---------- */
.aa.skin-4 .aa-header { background: var(--lin); border-bottom: 3px solid var(--pb); box-shadow: 0 8px 20px -18px rgba(31, 63, 54, .7); }
.aa.skin-4 .aa-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 6px; pointer-events: none;
  background: linear-gradient(90deg, var(--pb) 0 50%, transparent 50%) 0 0 / 24px 6px repeat-x; opacity: .85; }
.aa.skin-4 .aa-logo { color: var(--cit-nuit); font-family: var(--aa-police-titre); font-weight: 700; letter-spacing: .01em; }
.aa.skin-4 .aa-logo__mark { width: 28px; height: 30px; border-radius: 0; box-shadow: none;
  background: linear-gradient(160deg, var(--cit) 0 55%, var(--pb) 55%);
  clip-path: polygon(50% 0, 100% 28%, 86% 100%, 14% 100%, 0 28%); }
.aa.skin-4 .aa-nav ul { background: var(--sable); box-shadow: inset 0 0 0 1px var(--aa-bord); }
.aa.skin-4 .aa-nav a { color: var(--encre); }
.aa.skin-4 .aa-nav a:hover, .aa.skin-4 .aa-nav a.is-actif { background: color-mix(in srgb, var(--cit) 14%, var(--lin)); color: var(--cit-nuit); }
.aa.skin-4 .aa-nav__cta a { background: var(--cit); color: #fff; box-shadow: 0 6px 16px -8px rgba(47, 93, 80, .8); }
.aa.skin-4 .aa-nav__cta a:hover { background: var(--cit-nuit); color: #fff; }

/* ---------- Boutons ---------- */
.aa.skin-4 .aa-btn--primaire { background: var(--cit); border-color: var(--cit); color: #fff; box-shadow: 0 10px 22px -12px rgba(47, 93, 80, .9); transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.aa.skin-4 .aa-btn--primaire:hover { background: var(--cit-nuit); transform: translateY(-1px); box-shadow: 0 14px 26px -12px rgba(31, 63, 54, .9); }
.aa.skin-4 .aa-btn--secondaire { background: var(--lin); color: var(--cit-nuit); border: 2px solid var(--cit); }
.aa.skin-4 .aa-btn--secondaire:hover { background: var(--cit); color: #fff; }

/* ---------- Hero : appareil de pierre sur sable, formulaire en arche ---------- */
.aa.skin-4 .aa-hero__in { position: relative; border-radius: 34px; border: 1px solid var(--aa-bord); overflow: hidden;
  background:
    var(--coeur) left 42% bottom 1rem / 110px no-repeat,
    repeating-linear-gradient(0deg, rgba(62, 76, 87, .09) 0 1px, transparent 1px 36px),
    repeating-linear-gradient(90deg, rgba(62, 76, 87, .06) 0 1px, transparent 1px 72px),
    linear-gradient(135deg, #efe5d3, var(--lin) 70%);
  box-shadow: var(--aa-ombre); }
.aa.skin-4 .aa-hero__txt { color: var(--encre); }
.aa.skin-4 .aa-hero__chiffres { color: var(--cit); font-weight: 700; }
.aa.skin-4 .aa-hero__form { background: #fff; border-radius: 64px 64px 22px 22px; padding-top: 1.9rem;
  border-top: 5px solid var(--cit); box-shadow: 0 18px 36px -20px rgba(31, 63, 54, .7); }
.aa.skin-4 .aa-hero__form-h { color: var(--cit-nuit); font-family: var(--aa-police-titre); text-align: center; }
.aa.skin-4 .aa-hero__form-p { color: var(--aa-muet); text-align: center; }

/* ---------- Appel au dépôt, filtres, barres latérales ---------- */
.aa.skin-4 .aa-deposer-cta { background: var(--lin) var(--coeur) right 1rem center / 54px no-repeat; border: 1px dashed color-mix(in srgb, var(--cit) 45%, var(--aa-bord)); border-radius: 22px; }
.aa.skin-4 .aa-filtres { background: var(--lin); border: 1px solid var(--aa-bord); box-shadow: var(--aa-ombre); }
.aa.skin-4 .aa-side { background: var(--lin); border: 1px solid var(--aa-bord); box-shadow: var(--aa-ombre); }
.aa.skin-4 .aa-side__h { color: var(--cit-nuit); font-family: var(--aa-police-titre); }
.aa.skin-4 .aa-side__liste li { background: var(--sable); border-color: var(--aa-bord); border-radius: 10px 10px 10px 2px; }
.aa.skin-4 .aa-side__liste li a { color: var(--encre); }
.aa.skin-4 .aa-side__nb { color: var(--aa-muet); }
.aa.skin-4 .aa-side__liste li.is-actif { background: var(--cit); border-color: var(--cit); }

/* ---------- Lignes d'annonce : vignette en arche, cartouche taillé ---------- */
.aa.skin-4 .aa-liste { gap: .7rem; }
.aa.skin-4 .aa-ligne { background: var(--lin); border: 1px solid var(--aa-bord); border-radius: 18px; padding: .7rem;
  box-shadow: inset 4px 0 0 var(--pb); transition: box-shadow .2s ease, transform .2s ease, background .2s ease; }
.aa.skin-4 .aa-ligne:hover { background: #fff; transform: translateY(-2px); box-shadow: inset 4px 0 0 var(--cit), 0 14px 28px -18px rgba(31, 63, 54, .75); }
.aa.skin-4 .aa-ligne__img { border-radius: 999px 999px 12px 12px; overflow: hidden; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--aa-bord); }
.aa.skin-4 .aa-ligne__img img { transition: transform .45s ease; }
.aa.skin-4 .aa-ligne:hover .aa-ligne__img img { transform: scale(1.06); }
.aa.skin-4 .aa-ligne__cat { background: var(--pb); color: #fff; border-radius: 0; box-shadow: none; letter-spacing: .06em;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 6px 100%, 0 50%); padding: .22rem .85rem; }
.aa.skin-4 .aa-ligne__new { background: color-mix(in srgb, var(--cit) 14%, #fff); color: var(--cit-nuit); border-radius: 999px; }
.aa.skin-4 .aa-ligne__titre, .aa.skin-4 .aa-ligne__titre a { color: var(--encre); }
.aa.skin-4 .aa-ligne:hover .aa-ligne__titre a { color: var(--cit-nuit); }
.aa.skin-4 .aa-ligne__meta, .aa.skin-4 .aa-ligne__date { color: var(--aa-muet); }
.aa.skin-4 .aa-ligne__extrait { color: #3a3a34; }

/* ---------- Villes & catégories : pavés de pierre ---------- */
.aa.skin-4 .aa-liens li { background: var(--lin); border-radius: 10px 10px 10px 2px; box-shadow: 0 0 0 1px var(--aa-bord), 0 4px 10px -8px rgba(31, 63, 54, .6); transition: background .15s ease; }
.aa.skin-4 .aa-liens li a { color: var(--encre); }
.aa.skin-4 .aa-liens li:hover { background: color-mix(in srgb, var(--cit) 12%, var(--lin)); }
.aa.skin-4 .aa-liens__nb { color: var(--aa-muet); }
.aa.skin-4 .aa-pagination a, .aa.skin-4 .aa-pagination span { background: var(--lin); color: var(--encre); }
.aa.skin-4 .aa-crumbs, .aa.skin-4 .aa-crumbs a { color: var(--aa-muet); }

/* ---------- Fiche d'annonce ---------- */
.aa.skin-4 .aa-fiche__photo { border-radius: 50% 50% 22px 22px / 110px 110px 22px 22px; overflow: visible; background: color-mix(in srgb, var(--pb) 10%, var(--lin)); box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--aa-bord), var(--aa-ombre); }
.aa.skin-4 .aa-fiche__photo--vide { color: var(--pb); }
.aa.skin-4 .aa-fiche__photo > img, .aa.skin-4 .aa-fiche__photo .aa-fiche__img, .aa.skin-4 .aa-fiche__photo .aa-fiche__sans-photo, .aa.skin-4 .aa-fiche__photo .aa-fiche__fond { border-radius: inherit; }
.aa.skin-4 .aa-fiche__photo .aa-fiche__new { z-index: 2; box-shadow: 0 4px 10px -4px rgba(31, 63, 54, .7); }
.aa.skin-4 .aa-fiche__cat { color: var(--cit); letter-spacing: .08em; }
.aa.skin-4 .aa-fiche__titre { color: var(--cit-nuit); }
.aa.skin-4 .aa-fiche__meta, .aa.skin-4 .aa-fiche__sous { color: var(--aa-muet); }
.aa.skin-4 .aa-fiche__new { background: var(--cit); color: #fff; }
.aa.skin-4 .aa-fiche__cta--haut { background: #fff var(--coeur) right .8rem top .6rem / 46px no-repeat; border-top: 5px solid var(--cit); box-shadow: 0 16px 32px -20px rgba(31, 63, 54, .8); padding: 1.1rem 1rem; }
.aa.skin-4 .aa-fiche__infos { background: var(--lin); border: 1px solid var(--aa-bord); border-top: 4px solid var(--pb); }
.aa.skin-4 .aa-fiche__texte { color: var(--encre); line-height: 1.65; }
.aa.skin-4 .aa-fiche__plage { background: var(--pb); color: #fff; }
.aa.skin-4 .aa-fiche__phy { background: var(--lin); border: 1px solid var(--aa-bord); border-radius: 16px 16px 16px 3px; color: var(--encre); }
.aa.skin-4 .aa-chip { background: var(--lin); border: 1px solid var(--aa-bord); color: var(--encre); }
.aa.skin-4 .aa-repondre { background: var(--lin); border: 1px solid var(--aa-bord); border-top: 4px solid var(--pb); box-shadow: var(--aa-ombre); }
.aa.skin-4 .aa-repondre__intro, .aa.skin-4 .aa-fiche__signaler, .aa.skin-4 .aa-fiche__signaler a { color: var(--aa-muet); }
.aa.skin-4 .aa-fiche__barre { background: color-mix(in srgb, var(--lin) 94%, transparent); border-top: 3px solid var(--pb); }

/* ---------- Formulaires & dépôt ---------- */
.aa.skin-4 input[type="text"], .aa.skin-4 input[type="email"], .aa.skin-4 input[type="tel"], .aa.skin-4 input[type="number"],
.aa.skin-4 select, .aa.skin-4 textarea { background: #fff; border: 1px solid #cdbfa8; color: var(--encre); }
.aa.skin-4 input:focus, .aa.skin-4 select:focus, .aa.skin-4 textarea:focus { outline: 2px solid color-mix(in srgb, var(--cit) 55%, transparent); outline-offset: 1px; border-color: var(--cit); }
.aa.skin-4 .aa-form__lbl { color: var(--cit-nuit); }
.aa.skin-4 .aa-form__aide { color: var(--aa-muet); }
.aa.skin-4 .aa-depot__bloc { background: var(--lin); border: 1px solid var(--aa-bord); border-top: 4px solid var(--pb); box-shadow: 0 8px 20px -16px rgba(31, 63, 54, .6); }
.aa.skin-4 .aa-depot__bloc legend { color: #fff; background: var(--cit); padding: .2rem .9rem; border-radius: 999px; }

/* ---------- Pop-up & porte d'âge : arche ---------- */
.aa.skin-4 .aa-popup__box, .aa.skin-4 .aa-gate__box { background: var(--lin); color: var(--encre); border-radius: 48px 48px 22px 22px; border-top: 6px solid var(--cit); }
.aa.skin-4 .aa-popup__titre { color: var(--cit-nuit); }
.aa.skin-4 .aa-popup__texte, .aa.skin-4 .aa-popup__pour { color: #3a3a34; }

/* ---------- Pied de page : citadelle de nuit, créneaux ---------- */
.aa.skin-4 .aa-footer { position: relative; background: var(--cit-nuit); color: var(--aa-pied-txt); border-radius: 0; margin-top: 4rem; }
.aa.skin-4 .aa-footer::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; pointer-events: none;
  background: linear-gradient(90deg, var(--cit-nuit) 0 55%, transparent 55%) 0 0 / 30px 12px repeat-x; }
.aa.skin-4 .aa-footer__brand, .aa.skin-4 .aa-footer__h { color: #fff; }
.aa.skin-4 .aa-footer__h { font-family: var(--aa-police-titre); border-bottom: 2px solid color-mix(in srgb, #fff 18%, transparent); padding-bottom: .3rem; }
.aa.skin-4 .aa-footer p, .aa.skin-4 .aa-footer__fictif { color: #d9d2c2; }
.aa.skin-4 .aa-footer ul li a { background: rgba(251, 248, 241, .1); color: #f4efe4; box-shadow: inset 0 0 0 1px rgba(251, 248, 241, .18); border-radius: 8px 8px 8px 2px; }
.aa.skin-4 .aa-footer ul li a:hover { background: var(--lin); color: var(--cit-nuit); }
.aa.skin-4 .aa-footer__bas, .aa.skin-4 .aa-footer__bas a { color: #d9d2c2; border-top-color: rgba(251, 248, 241, .18); }

@media (max-width: 719px) {
  .aa.skin-4 .aa-hero__in { border-radius: 26px; background-size: 84px, auto, auto, auto; }
  .aa.skin-4 .aa-fiche__photo { border-radius: 50% 50% 18px 18px / 80px 80px 18px 18px; }
  .aa.skin-4 .aa-ligne { box-shadow: inset 3px 0 0 var(--pb); }
  .aa.skin-4 .aa-deposer-cta { background-position: right .7rem top .6rem; background-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .aa.skin-4 .aa-ligne, .aa.skin-4 .aa-ligne__img img, .aa.skin-4 .aa-btn--primaire { transition: none; }
  .aa.skin-4 .aa-ligne:hover, .aa.skin-4 .aa-btn--primaire:hover { transform: none; }
  .aa.skin-4 .aa-ligne:hover .aa-ligne__img img { transform: none; }
}