/* __DESIGN_SITE__ */
/* socle filtres (ajouté par design_site.py) */
html:not(#_) .ds-hide{ display: none !important; }
html:not(#_) body[data-ds-filtres="aucun"] .filters{ display: none !important; }
html:not(#_) body[data-ds-filtres="sans-genre"] .filters .filter-btn[data-filter="type"]{ display: none !important; }
html:not(#_) body[data-ds-filtres="sans-age"] .filters .filter-btn[data-filter="age"]{ display: none !important; }
html:not(#_) body[data-ds-filtres="ligne"] .filters{ display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; gap: 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
html:not(#_) body[data-ds-filtres="ligne"] .filters::-webkit-scrollbar{ display: none; }
html:not(#_) body[data-ds-filtres="ligne"] .filters .filter-btn{ flex: 0 0 auto; white-space: nowrap; }
html:not(#_) .filters select.ds-fsel{ appearance: none; -webkit-appearance: none; font: inherit; cursor: pointer; padding-right: 2.1em; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='currentColor' stroke-width='2'/></svg>"); background-repeat: no-repeat; background-position: right .7em center; background-size: 12px 8px; }
html:not(#_) .filters .ds-fgroup{ display: contents; }
/* Next : barre React (div.shadow-sm > div.scrollbar-hide > .form-group > select ×2 + bouton Recherche) */
html:not(#_) body[data-ds-filtres="aucun"] div.rounded-lg.shadow-sm:has(> div.scrollbar-hide > div.form-group > select){ display: none !important; }
html:not(#_) body[data-ds-filtres="sans-genre"] div.scrollbar-hide > div.form-group:first-child:has(> select){ display: none !important; }
html:not(#_) body[data-ds-filtres="sans-tri"] div.scrollbar-hide > div.form-group:nth-child(2):has(> select){ display: none !important; }
html:not(#_) body[data-ds-filtres="sans-recherche"] div.scrollbar-hide > div.relative.flex-shrink-0:has(> button){ display: none !important; }
/* Next `chips` : pastilles d'âge construites par design_filtres.js (le select natif est caché) */
html:not(#_) .ds-fnext{ display: flex; gap: 8px; flex-wrap: nowrap; }
html:not(#_) .ds-fnext .ds-fchip{ flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--secondary-color, #999); background: transparent; color: inherit; font: inherit; font-size: .85rem; cursor: pointer; white-space: nowrap; }
html:not(#_) .ds-fnext .ds-fchip.active{ background: var(--secondary-color, #18181b); color: #fff; border-color: transparent; }

/* socle menu mobile Astro (ajouté par design_site.py) */
/* 19/09 : la croix du tiroir (label x injecte dans .sidebar-inner) n'etait cachee QUE sous 768 px -> visible en haut
   de la sidebar desktop (3 agents du lot 22 l'ont masquee a la main). Cachee hors tiroir, toutes largeurs. */
html:not(#_) .ds-menu-close{ display: none; }
@media (max-width: 768px) {
  html:not(#_) .ds-burger{ display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 40px; height: 34px; padding: 0 9px; margin-right: 8px; cursor: pointer; border-radius: 8px; color: inherit; flex-shrink: 0; }
  html:not(#_) .ds-burger span{ display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s, opacity .2s; }
  html:not(#_) body:has(#ds-menu:checked) .ds-burger span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
  html:not(#_) body:has(#ds-menu:checked) .ds-burger span:nth-child(2){ opacity: 0; }
  html:not(#_) body:has(#ds-menu:checked) .ds-burger span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }
  html:not(#_) .ds-menu-overlay{ display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1290; }
  html:not(#_) body:has(#ds-menu:checked) .ds-menu-overlay{ display: block; }
  html:not(#_) .ds-menu-close{ display: none; }
  html:not(#_) body:has(#ds-menu:checked) aside.sidebar{ display: block !important; position: fixed !important; top: 0 !important; left: 0; bottom: 0; height: auto !important; width: min(86vw, 340px) !important; max-width: none; margin: 0 !important; padding: 12px; padding-top: calc(12px + env(safe-area-inset-top, 0px)); z-index: 1300; overflow-y: auto !important; max-height: 100vh; max-height: 100dvh; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; border-radius: 0; box-shadow: 8px 0 30px rgba(0,0,0,.35); }
  html:not(#_) body:has(#ds-menu:checked) .ds-menu-close{ display: flex; align-items: center; justify-content: center; position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; font-size: 26px; line-height: 1; cursor: pointer; z-index: 2; }
  html:not(#_) body:has(#ds-menu:checked) aside.sidebar .sidebar-inner{ height: auto; min-height: 100%; }
  html:not(#_) body:has(#ds-menu:checked){ overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { html:not(#_) .ds-burger span{ transition: none; } }

/* transgenre-belgique.be — « loge de théâtre » (14/11/2026) : violet du favicon sur poudre rosée, encre aubergine.
   Formes : miroir à ampoules (logo, CTA), pastilles lumineuses, rideau festonné (footer, accueil), âge en houppette. */

html:not(#_):root{
  --lg-vio: #8e44ad; --lg-vio-d: #6c2f88; --lg-vio-l: #ecdcf1; --lg-vio-t: rgba(142, 68, 173, .12);
  --lg-poudre: #f8eeec; --lg-poudre-2: #f2e3e0; --lg-poudre-3: #e5cfcb; --lg-creme: #fffaf8;
  --lg-encre: #2b1e2f; --lg-encre-m: #5e4d60; --lg-encre-2: #4a3b4d; --lg-velours: #2a1b30;
  --bg: #f8eeec; --bg-alt: #f2e3e0; --bg-card: #fffaf8; --text: #2b1e2f; --text-muted: #5e4d60; --border: #e5cfcb;
  --lg-serif: "Didot", "Bodoni 72", "Bodoni MT", "Libre Bodoni", Georgia, "Times New Roman", serif;
  --lg-amp: radial-gradient(circle, #fffdf7 0 2.6px, #fbe9cf 3.3px, rgba(255, 236, 214, .55) 4.4px, transparent 6.2px);
  --lg-trio: radial-gradient(circle, #fffdf7 0 2.2px, #8e44ad 2.8px 4px, transparent 4.6px);
  --lg-feston: radial-gradient(circle at 50% 0, #8e44ad 0 12px, #6c2f88 12.6px 14px, transparent 14.6px);
}
html:not(#_) body, html:not(#_) [style*="--secondary"]{ --secondary: #6c2f88 !important; }
html:not(#_) body{
  background: radial-gradient(70% 420px at 50% 0, rgba(142, 68, 173, .07), transparent 75%), var(--lg-poudre);
  color: var(--lg-encre);
}
html:not(#_) .bg-gradient{ background: transparent; }

/* -- sidebar : le logo dans un miroir de loge */
html:not(#_) .sidebar-inner{
  background: var(--lg-creme); border: 1px solid var(--lg-poudre-3); border-radius: 26px; padding: 16px 12px;
  box-shadow: 0 18px 38px rgba(108, 47, 136, .09), 0 2px 6px rgba(43, 30, 47, .05);
}
html:not(#_) .sb-logo{
  position: relative; flex-direction: column; justify-content: center; gap: 8px; text-align: center;
  margin: 2px 4px 14px; padding: 16px 8px 14px; border: 14px solid transparent; border-radius: 22px;
  background:
    var(--lg-amp) center top / 22px 14px space no-repeat border-box,
    var(--lg-amp) center bottom / 22px 14px space no-repeat border-box,
    linear-gradient(118deg, transparent 38%, rgba(255, 255, 255, .75) 44%, transparent 52%) padding-box,
    linear-gradient(165deg, #fffdfb, #f4e6ef) padding-box,
    linear-gradient(180deg, #9d58bb, #7a3796) border-box;
  box-shadow: 0 0 0 1px rgba(108, 47, 136, .35), 0 14px 26px rgba(108, 47, 136, .26), 0 0 30px rgba(255, 236, 214, .5);
}
html:not(#_) .sb-logo::before, html:not(#_) .sb-logo::after{
  content: ""; position: absolute; top: 10px; bottom: 10px; width: 14px;
  background: var(--lg-amp) center / 14px 22px no-repeat space; animation: lg-ampoules 3.4s ease-in-out infinite alternate;
}
html:not(#_) .sb-logo::before{ left: -14px; }
html:not(#_) .sb-logo::after{ right: -14px; animation-delay: -1.7s; }
@keyframes lg-ampoules { from { opacity: .72; } to { opacity: 1; } }
html:not(#_) .sb-logo-dot{
  width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #a865c6, var(--lg-vio-d) 72%);
  box-shadow: 0 0 0 3px #fffdfb, 0 0 0 4.5px var(--lg-vio-l), 0 6px 14px rgba(108, 47, 136, .3);
}
html:not(#_) .sb-logo-text{ font-family: var(--lg-serif); font-weight: 700; font-size: 1.16rem; letter-spacing: .01em; color: var(--lg-encre); white-space: normal; }

/* liens : pastilles lumineuses (l'icône est une ampoule ronde qui s'allume) */
html:not(#_) .sb-nav{ gap: 4px; }
html:not(#_) .sb-link{ box-sizing: border-box; color: var(--lg-encre-2); font-size: .88rem; padding: 5px 12px 5px 6px; border-radius: 999px; min-height: 42px; }
html:not(#_) .sb-link .sb-ico{
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  background: var(--lg-poudre); color: var(--lg-vio-d); box-shadow: inset 0 0 0 1.5px var(--lg-poudre-3);
  transition: box-shadow .25s ease, background .25s ease;
}
html:not(#_) .sb-link:hover{ background: var(--lg-poudre); color: var(--lg-encre); }
html:not(#_) .sb-link:hover .sb-ico{ box-shadow: inset 0 0 0 1.5px var(--lg-vio), 0 0 12px rgba(142, 68, 173, .3); }
html:not(#_) .sb-link.active{ background: var(--lg-vio-t); color: var(--lg-vio-d); font-weight: 700; }
html:not(#_) .sb-link.active .sb-ico{
  background: radial-gradient(circle at 40% 35%, #b77ad2, var(--lg-vio-d) 75%); color: #fff;
  box-shadow: 0 0 0 3px var(--lg-creme), 0 0 0 4.5px var(--lg-vio-l), 0 0 16px rgba(142, 68, 173, .55);
}
html:not(#_) .sb-section{ border-top: 0; background: var(--lg-trio) center top / 11px 9px space no-repeat; padding-top: 16px; }
html:not(#_) .sb-section-title{ color: var(--lg-encre-m); font-size: .72rem; letter-spacing: .1em; }
html:not(#_) .sb-map-quick-link{ color: var(--lg-vio-d); border-radius: 999px; font-weight: 600; }
html:not(#_) .sb-map-quick-link:hover{ background: var(--lg-poudre); }
html:not(#_) .sb-silo-region, html:not(#_) .sb-top-item{ color: var(--lg-encre-2); border-radius: 999px; }
html:not(#_) .sb-silo-region:hover, html:not(#_) .sb-top-item:hover, html:not(#_) .sb-silo-ville:hover{ background: var(--lg-poudre); color: var(--lg-vio-d); }
html:not(#_) .sb-silo-ville{ color: var(--lg-encre-m); border-radius: 999px; }
html:not(#_) .sb-silo-villes{ border-left: 1.5px dotted var(--lg-poudre-3); }
html:not(#_) .sb-silo-more{ color: var(--lg-vio-d); }
html:not(#_) .sb-top-item .sb-ico{ color: var(--lg-vio); }

/* -- barre haute mobile : poudre, rang d'ampoules dessous */
@media (max-width: 768px) {
  html:not(#_) .mobile-guest-top{
    background: var(--lg-trio) center bottom 2px / 18px 10px space no-repeat, var(--lg-creme);
    color: var(--lg-encre); box-shadow: 0 10px 24px rgba(108, 47, 136, .15); padding-bottom: 12px;
  }
  html:not(#_) .mobile-guest-head{ border-bottom: 1px solid var(--lg-poudre-3); }
  html:not(#_) .mobile-guest-brand{ color: var(--lg-encre) !important; font-family: var(--lg-serif); font-weight: 700; font-size: 1.08rem; }
  html:not(#_) .mobile-guest-login{ color: var(--lg-vio-d) !important; font-weight: 700; }
  html:not(#_) .mobile-guest-cta-offer, html:not(#_) .mobile-guest-timer-label{ color: var(--lg-encre-m); }
  html:not(#_) .mobile-guest-cta-kw{ color: var(--lg-encre); font-family: var(--lg-serif); font-weight: 700; }
  html:not(#_) #mobileGuestTimer{ color: var(--lg-vio-d); }
  html:not(#_) .mobile-guest-cta-btn{
    background: linear-gradient(180deg, #9d58bb, var(--lg-vio-d)); color: #fff !important; border-radius: 999px;
    min-height: 44px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; font-size: .95rem;
    box-shadow: 0 8px 18px rgba(108, 47, 136, .32), 0 0 0 3px var(--lg-creme), 0 0 0 4.5px var(--lg-vio-l);
  }
  html:not(#_) body.has-mobile-guest-top{ padding-top: calc(170px + env(safe-area-inset-top, 0px)); }
  html:not(#_) .ds-burger{ color: var(--lg-vio-d); background: var(--lg-poudre); border-radius: 50%; width: 38px; height: 38px; padding: 0 10px; box-sizing: border-box; box-shadow: inset 0 0 0 1.5px var(--lg-poudre-3); }
  html:not(#_) .ds-menu-overlay{ background: rgba(43, 30, 47, .55); }
  html:not(#_) body:has(#ds-menu:checked) aside.sidebar{ background: var(--lg-poudre); }
  html:not(#_) .ds-menu-close{ background: var(--lg-vio-d); color: #fff; box-shadow: 0 0 0 3px var(--lg-creme), 0 0 0 4.5px var(--lg-vio-l), 0 0 16px rgba(142, 68, 173, .45); }
  html:not(#_) aside.sidebar .sidebar-inner{ box-sizing: border-box; }
  html:not(#_) aside.sidebar .sb-logo{ margin-top: 40px; }
  html:not(#_) aside.sidebar .sb-link, html:not(#_) aside.sidebar .sb-silo-region, html:not(#_) aside.sidebar .sb-top-item{ min-height: 42px; font-size: .94rem; }
  html:not(#_) aside.sidebar .sb-silo-ville{ padding: 8px 10px; font-size: .88rem; }
}

/* -- barre basse mobile */
html:not(#_) .bottom-bar{ background: var(--lg-trio) center top 3px / 18px 10px space no-repeat, var(--lg-creme); border-top: 1px solid var(--lg-poudre-3); padding-top: 12px; box-shadow: 0 -8px 22px rgba(108, 47, 136, .1); }
html:not(#_) .bottom-bar .btab{ color: var(--lg-encre-m); }
html:not(#_) .bottom-bar .btab.active, html:not(#_) .bottom-bar .btab:hover{ color: var(--lg-vio-d); }
html:not(#_) .bottom-bar .btab.active .btab-ico{ background: var(--lg-vio-l); border-radius: 50%; box-shadow: 0 0 0 4px var(--lg-vio-l), 0 0 14px rgba(142, 68, 173, .4); }

/* -- footer : rideau de velours sous un lambrequin festonné */
html:not(#_) .footer-v3{
  position: relative; margin-top: 4rem; padding-top: 30px; color: #eadbe6;
  background:
    radial-gradient(46% 260px at 50% 0, rgba(142, 68, 173, .38), transparent 75%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 0 16px, rgba(255, 255, 255, .05) 28px, rgba(0, 0, 0, .2) 44px, rgba(255, 255, 255, 0) 58px),
    var(--lg-velours);
}
html:not(#_) .footer-v3::before{
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22px; pointer-events: none;
  background: linear-gradient(#6c2f88, #6c2f88) top / 100% 7px no-repeat, var(--lg-feston) 0 6px / 30px 16px repeat-x;
}
html:not(#_) .footer-v3 .footer-inner{ max-width: 1180px; margin: 0 auto; padding: 0 1.25rem; box-sizing: border-box; }
html:not(#_) .footer-v3 .footer-top{ flex-direction: column; justify-content: center; text-align: center; gap: 1rem; padding: 2.6rem 1rem 2rem; border-bottom: 1px solid rgba(255, 255, 255, .1); }
html:not(#_) .footer-v3 .footer-brand h3{ color: #fbf2f6; font-family: var(--lg-serif); font-weight: 700; font-size: 1.7rem; letter-spacing: .01em; }
html:not(#_) .footer-v3 .footer-brand p, html:not(#_) .footer-v3 .footer-newsletter p{ color: #d7c6da; }
html:not(#_) .footer-v3 .footer-newsletter .btn{
  border-radius: 999px; min-height: 44px; padding: 10px 30px; display: inline-flex; align-items: center;
  background: var(--lg-creme); color: var(--lg-vio-d); font-weight: 700;
  box-shadow: 0 0 0 3px rgba(255, 250, 248, .18), 0 0 22px rgba(255, 236, 214, .35);
}
html:not(#_) .footer-v3 .footer-newsletter .btn:hover{ filter: none; background: #fff; }
html:not(#_) .footer-v3 .footer-grid{ padding: 2.2rem 0 2rem; gap: 1.6rem 2rem; }
html:not(#_) .footer-v3 .footer-col h4{ color: #fbf2f6; font-family: var(--lg-serif); font-weight: 700; font-size: 1.02rem; text-transform: none; letter-spacing: .01em; display: flex; align-items: center; gap: 8px; }
html:not(#_) .footer-v3 .footer-col h4::before{ content: ""; flex: 0 0 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fffdf7 0 2px, #fbe9cf 3px, var(--lg-vio) 5px); box-shadow: 0 0 10px rgba(255, 236, 214, .55); }
html:not(#_) .footer-v3 .footer-col a, html:not(#_) .footer-v3 .footer-col p{ color: #dccbe0; font-size: .88rem; text-decoration: none; }
html:not(#_) .footer-v3 .footer-col a:hover{ color: #fff; text-decoration: underline; text-underline-offset: 3px; }
html:not(#_) .footer-v3 .footer-col ul{ padding: 0; margin: 0; }
html:not(#_) .footer-v3 .footer-col li{ margin-bottom: .5rem; }
html:not(#_) .footer-v3 .footer-bottom{ border-top: 1px solid rgba(255, 255, 255, .1); padding: 1.2rem 0 1.5rem; }
html:not(#_) .footer-v3 .footer-bottom p, html:not(#_) .footer-v3 .footer-bottom a{ color: #cbbacd !important; }
@media (max-width: 640px) {
  html:not(#_) .footer-v3{ padding-top: 24px; }
  html:not(#_) .footer-v3 .footer-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1rem; }
  html:not(#_) .footer-v3 .footer-col:last-child{ grid-column: 1 / -1; }
  html:not(#_) .footer-v3 .footer-col a{ display: inline-block; padding: 4px 0; overflow-wrap: anywhere; }
}

/* -- titres et sections */
html:not(#_) .section{ background: var(--lg-creme); border: 1px solid var(--lg-poudre-3); border-radius: 26px; box-shadow: 0 16px 36px rgba(108, 47, 136, .07); }
html:not(#_) .section > h2, html:not(#_) .section-header h2, html:not(#_) .map-section-head h2{ font-family: var(--lg-serif); font-weight: 700; color: var(--lg-encre); display: flex; align-items: center; gap: 12px; }
html:not(#_) .section > h2::before, html:not(#_) .section-header h2::before, html:not(#_) .map-section-head h2::before{ content: ""; flex: 0 0 33px; height: 10px; background: var(--lg-trio) 0 50% / 11px 10px repeat-x; }
html:not(#_) .page-header h1, html:not(#_) .magazine-header h1, html:not(#_) .region-hero h1{ font-family: var(--lg-serif); font-weight: 700; color: var(--lg-encre); letter-spacing: -.005em; }
html:not(#_) .page-header h1::after{ content: ""; display: block; width: min(200px, 60%); height: 12px; margin: .8rem auto 0; background: linear-gradient(var(--lg-vio-d), var(--lg-vio-d)) top / 100% 2px no-repeat, radial-gradient(circle at 50% 0, var(--lg-vio) 0 6px, transparent 6.6px) center 1px / 20px 10px repeat-x; }
html:not(#_) .page-header p, html:not(#_) .magazine-header p{ color: var(--lg-encre-m); }
html:not(#_) .seo-text, html:not(#_) .seo-text p, html:not(#_) .seo-content p, html:not(#_) .region-main > p{ color: var(--lg-encre-2) !important; }
html:not(#_) .seo-content h2{ font-family: var(--lg-serif); }
html:not(#_) .section a:not(.btn):not(.link-tag):not(.pill):not(.pagination-link):not(.rcs-chip){ color: var(--lg-vio-d); }
html:not(#_) .breadcrumb, html:not(#_) .breadcrumb a{ color: var(--lg-encre-m) !important; }
html:not(#_) .breadcrumb a{ text-decoration: underline; text-decoration-color: var(--lg-vio-l); text-underline-offset: 4px; }
html:not(#_) .breadcrumb a:hover{ color: var(--lg-vio-d) !important; }

/* accueil : rideau entrouvert sur la scène */
html:not(#_) .hero-fullscreen{ background: var(--lg-poudre); color: var(--lg-encre); overflow: hidden; }
html:not(#_) .hero-overlay{
  background:
    radial-gradient(30% 55% at 50% 48%, #fffaf8 0, rgba(255, 250, 248, 0) 100%),
    var(--lg-feston) 0 7px / 30px 16px repeat-x,
    linear-gradient(#6c2f88, #6c2f88) top / 100% 8px no-repeat,
    radial-gradient(ellipse 5% 21% at 14% 66%, var(--lg-poudre) 0 97%, transparent 100%),
    radial-gradient(ellipse 5% 21% at 86% 66%, var(--lg-poudre) 0 97%, transparent 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 0 10px, rgba(255, 255, 255, .1) 18px, rgba(43, 30, 47, .22) 30px, rgba(255, 255, 255, 0) 40px) left top / 14% 100% no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 0 10px, rgba(255, 255, 255, .1) 18px, rgba(43, 30, 47, .22) 30px, rgba(255, 255, 255, 0) 40px) right top / 14% 100% no-repeat,
    linear-gradient(90deg, #7a3796 0, #8e44ad 14%, transparent 14% 86%, #8e44ad 86%, #7a3796 100%);
}
html:not(#_) .hero-content h1{ font-family: var(--lg-serif); font-weight: 700; color: var(--lg-encre); letter-spacing: -.01em; }
html:not(#_) .hero-tagline{ color: var(--lg-encre-m); opacity: 1; }
html:not(#_) .hero-cta .btn-hero-primary{
  background: linear-gradient(180deg, #9d58bb, var(--lg-vio-d)); color: #fff; border-radius: 999px; min-height: 52px;
  box-shadow: 0 0 0 4px var(--lg-creme), 0 0 0 5.5px var(--lg-vio-l), 0 16px 30px rgba(108, 47, 136, .38); transition: transform .2s ease, box-shadow .2s ease;
}
html:not(#_) .hero-cta .btn-hero-primary:hover{ transform: translateY(-2px); }
html:not(#_) .hero-cta .btn-ghost{ background: var(--lg-creme); color: var(--lg-vio-d); border: 1.5px solid var(--lg-vio); border-radius: 999px; min-height: 52px; }
html:not(#_) .search-input{ border-radius: 999px; border-color: var(--lg-poudre-3); background: var(--lg-creme); color: var(--lg-encre); }
html:not(#_) .search-input::placeholder{ color: #75647a; }
html:not(#_) .search-input:focus{ border-color: var(--lg-vio); }
html:not(#_) .search-submit{ border-radius: 999px; min-height: 46px; }
html:not(#_) .trust-badges{ gap: 1rem; }
html:not(#_) .trust-badges .badge{ background: var(--lg-creme); border: 1px solid var(--lg-poudre-3); border-radius: 999px; padding: .45rem 1.1rem .45rem .5rem; color: var(--lg-encre); font-weight: 600; box-shadow: 0 8px 18px rgba(108, 47, 136, .08); }
html:not(#_) .trust-badges .badge-icon{ width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; background: var(--lg-vio-l); box-shadow: 0 0 12px rgba(142, 68, 173, .3); }

/* pages province : en-tête poudre, villes en pastilles */
html:not(#_) .region-hero{ background: radial-gradient(60% 140% at 50% 0, var(--lg-vio-t), transparent 70%), var(--lg-poudre-2); color: var(--lg-encre); border-bottom: 1px solid var(--lg-poudre-3); }
html:not(#_) .region-hero .breadcrumb a, html:not(#_) .region-hero .breadcrumb span, html:not(#_) .region-hero p{ color: var(--lg-encre-m) !important; }
html:not(#_) .region-sidebar{ background: var(--lg-creme); border: 1px solid var(--lg-poudre-3); border-radius: 24px; }
html:not(#_) .region-sidebar h3{ font-family: var(--lg-serif); color: var(--lg-encre); }
html:not(#_) .ville-list a{ display: inline-block; color: var(--lg-encre-2); padding: 6px 12px; border-radius: 999px; background: var(--lg-poudre); border: 1px solid var(--lg-poudre-3); }
html:not(#_) .region-tag{ background: var(--lg-vio-d); color: #fff; border-radius: 999px; }

/* boutons */
html:not(#_) .btn-primary{ background: var(--lg-vio-d); color: #fff; border-radius: 999px; box-shadow: 0 8px 18px rgba(108, 47, 136, .25); }
html:not(#_) .btn-primary:hover{ filter: none; background: #5a2672; }
html:not(#_) .btn-outline{ border-radius: 999px; border-color: var(--lg-vio-d); color: var(--lg-vio-d); }

/* -- cartes profil : photo en miroir, âge en houppette */
html:not(#_) .profile-grid{ gap: 20px; }
html:not(#_) .profile-card{
  background: var(--lg-creme); border: 1px solid var(--lg-poudre-3); border-radius: 24px; padding: 8px 8px 0;
  box-shadow: 0 12px 26px rgba(108, 47, 136, .08); transition: transform .25s ease, box-shadow .25s ease;
}
html:not(#_) .profile-card:hover{ transform: translateY(-3px); box-shadow: 0 0 0 2px var(--lg-vio-l), 0 0 26px rgba(255, 236, 214, .7), 0 20px 36px rgba(108, 47, 136, .2); }
html:not(#_) .profile-photo{ border-radius: 18px; background: var(--lg-poudre-2); }
html:not(#_) .profile-photo img{ transition: transform .6s ease; }
html:not(#_) .profile-card:hover .profile-photo.blurred img{ transform: scale(1.12); }
html:not(#_) .profile-age{
  top: auto; right: auto; bottom: 10px; left: 10px; padding: .32rem .72rem; border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, #fff, #f6e5ec 60%, #efd6e0); color: var(--lg-vio-d); font-weight: 800; font-size: .74rem;
  box-shadow: 0 0 0 3px rgba(255, 250, 248, .55), 0 0 12px rgba(255, 255, 255, .7), 0 4px 10px rgba(43, 30, 47, .25);
}
html:not(#_) .profile-lock{ background: var(--lg-vio-d); width: 28px; height: 28px; box-shadow: 0 0 0 2.5px rgba(255, 250, 248, .85); }
html:not(#_) .profile-info{ padding: .8rem .55rem .55rem; }
html:not(#_) .profile-title{ color: var(--lg-vio-d); font-weight: 700; }
html:not(#_) .profile-name{ font-family: var(--lg-serif); font-weight: 700; color: var(--lg-encre); font-size: 1.08rem; }
html:not(#_) .profile-ville{ color: var(--lg-encre-m); }
html:not(#_) .profile-bio{ color: var(--lg-encre-2); }
html:not(#_) .profile-footer{ border-top: 0; background: radial-gradient(circle, var(--lg-poudre-3) 0 1.6px, transparent 2.2px) left 6px top 0 / 10px 4px repeat-x; padding: .8rem .55rem .8rem; }
html:not(#_) .profile-cta{ background: transparent; border: 1.5px solid var(--lg-vio-d); color: var(--lg-vio-d); border-radius: 999px; font-weight: 700; padding: .5rem .6rem; transition: background .2s, color .2s, box-shadow .2s; }
html:not(#_) .profile-card:hover .profile-cta{ background: var(--lg-vio-d); color: #fff; box-shadow: 0 0 14px rgba(142, 68, 173, .45); }

/* filtres (tri) et pagination : pastilles lumineuses */
html:not(#_) .filters{ gap: 10px; }
html:not(#_) .filters .filter-btn{ background-color: var(--lg-creme); border: 1.5px solid var(--lg-poudre-3); color: var(--lg-encre); border-radius: 999px; min-height: 42px; padding: 6px 18px; font-weight: 600; }
html:not(#_) .filters .filter-btn:hover, html:not(#_) .filters .filter-btn.active{ background-color: var(--lg-vio-d); border-color: var(--lg-vio-d); color: #fff; box-shadow: 0 0 0 3px var(--lg-creme), 0 0 0 4.5px var(--lg-vio-l), 0 0 16px rgba(142, 68, 173, .4); }
html:not(#_) .filters select.ds-fsel{ background-color: var(--lg-creme); color: var(--lg-encre); padding-left: 18px; }
html:not(#_) .filters select.ds-fsel:hover{ background-color: var(--lg-poudre); color: var(--lg-encre); box-shadow: none; }
html:not(#_) .pagination-link, html:not(#_) .pagination > a:not(.pagination-link){ background: var(--lg-creme); border: 1.5px solid var(--lg-poudre-3); color: var(--lg-encre) !important; }
html:not(#_) .pagination-link:hover{ background: var(--lg-poudre); border-color: var(--lg-vio); color: var(--lg-vio-d) !important; }
html:not(#_) .pagination-current{ background: radial-gradient(circle at 40% 35%, #a865c6, var(--lg-vio-d) 75%); box-shadow: 0 0 0 3px var(--lg-creme), 0 0 0 4.5px var(--lg-vio-l), 0 0 18px rgba(142, 68, 173, .45); }
html:not(#_) .pagination-ellipsis{ color: var(--lg-encre-m); }

/* liens de villes : pastille avec une petite ampoule */
html:not(#_) .link-tag{ background: var(--lg-creme); border: 1px solid var(--lg-poudre-3); border-radius: 999px; color: var(--lg-encre); }
html:not(#_) .link-tag::before{ content: ""; flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff 0 1.5px, var(--lg-vio) 4px); transition: box-shadow .2s; }
html:not(#_) .link-tag:hover{ border-color: var(--lg-vio); color: var(--lg-vio-d); }
html:not(#_) .link-tag:hover::before{ box-shadow: 0 0 10px rgba(142, 68, 173, .7); }
html:not(#_) .ville-pills .pill, html:not(#_) .rcs-chip{ background: var(--lg-creme); border: 1px solid var(--lg-poudre-3); color: var(--lg-encre); border-radius: 999px; }
html:not(#_) .ville-pills .pill:hover, html:not(#_) .rcs-chip:hover{ border-color: var(--lg-vio); color: var(--lg-vio-d); }

/* -- CTA : carte centrée en miroir de loge */
html:not(#_) .cta-section{
  position: relative; box-sizing: border-box; width: 100%; max-width: 760px; margin-left: auto; margin-right: auto; align-self: center;
  color: var(--lg-encre); border: 16px solid transparent; border-radius: 30px; padding: 40px 28px 38px;
  background:
    var(--lg-amp) center top / 26px 16px space no-repeat border-box,
    var(--lg-amp) center bottom / 26px 16px space no-repeat border-box,
    linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .7) 37%, transparent 46%) padding-box,
    radial-gradient(70% 90% at 50% 100%, rgba(142, 68, 173, .12), transparent 70%) padding-box,
    linear-gradient(170deg, #fffdfb, #f6e8ef) padding-box,
    linear-gradient(180deg, #9d58bb, #7a3796) border-box;
  box-shadow: 0 0 0 1px rgba(108, 47, 136, .35), 0 22px 44px rgba(108, 47, 136, .22), 0 0 46px rgba(255, 236, 214, .55);
}
html:not(#_) .cta-section::before, html:not(#_) .cta-section::after{
  content: ""; position: absolute; top: 12px; bottom: 12px; width: 16px; pointer-events: none;
  background: var(--lg-amp) center / 16px 26px no-repeat space; animation: lg-ampoules 3.4s ease-in-out infinite alternate;
}
html:not(#_) .cta-section::before{ left: -16px; }
html:not(#_) .cta-section::after{ right: -16px; animation-delay: -1.7s; }
html:not(#_) .cta-section h2{ color: var(--lg-encre); font-family: var(--lg-serif); font-weight: 700; }
html:not(#_) .cta-section p{ color: var(--lg-encre-m); }
html:not(#_) .cta-section a.btn.btn-primary{
  min-height: 52px; padding: 13px 40px; font-size: 1.05rem; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #9d58bb, var(--lg-vio-d)); color: #fff;
  box-shadow: 0 0 0 4px #fffaf8, 0 0 0 5.5px var(--lg-vio-l), 0 14px 28px rgba(108, 47, 136, .38); transition: transform .2s ease, box-shadow .2s ease;
}
html:not(#_) .cta-section a.btn.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 0 0 4px #fffaf8, 0 0 0 5.5px var(--lg-vio), 0 18px 32px rgba(108, 47, 136, .46); }

/* FAQ et carte */
html:not(#_) .info-duo-col{ background: var(--lg-creme); border: 1px solid var(--lg-poudre-3); border-radius: 24px; }
html:not(#_) .info-duo-title{ background: var(--lg-poudre-2); border-bottom: 1px solid var(--lg-poudre-3); font-family: var(--lg-serif); color: var(--lg-encre); }
html:not(#_) .info-duo-title svg{ color: var(--lg-vio-d); }
html:not(#_) .accordion{ padding: 10px; }
html:not(#_) .accordion-item{ border: 1.5px solid var(--lg-poudre-3); border-radius: 20px; margin-bottom: 10px; background: var(--lg-creme); }
html:not(#_) .accordion-item:last-child{ border-bottom: 1.5px solid var(--lg-poudre-3); margin-bottom: 0; }
html:not(#_) .accordion-item[open]{ border-color: var(--lg-vio); box-shadow: 0 0 18px rgba(142, 68, 173, .14); }
html:not(#_) .accordion-header{ border-radius: 20px; color: var(--lg-encre); }
html:not(#_) .accordion-header:hover{ background: var(--lg-poudre); }
html:not(#_) .accordion-header::after{ border-color: var(--lg-vio-d); }
html:not(#_) .accordion-body{ color: var(--lg-encre-2); }
html:not(#_) .accordion-badge, html:not(#_) .ville-map-badge{ background: var(--lg-vio-d); }
html:not(#_) .ville-map-card{ border-radius: 22px; border-color: var(--lg-poudre-3); background: var(--lg-creme); }
html:not(#_) .ville-map-header h3{ font-family: var(--lg-serif); color: var(--lg-encre); }

/* retour en haut : houppette */
html:not(#_) .back-to-top{ background: radial-gradient(circle at 35% 30%, #fff, #f6e5ec 60%, #ecd2de); color: var(--lg-vio-d); font-weight: 800; box-shadow: 0 0 0 3px rgba(255, 250, 248, .7), 0 0 0 4.5px var(--lg-vio-l), 0 10px 22px rgba(108, 47, 136, .3); }

/* pop-ups : couleurs, bordures, rayons seulement */
html:not(#_) .modal-content{ border-radius: 26px; }
html:not(#_) .modal-body h3, html:not(#_) .modal-name{ font-family: var(--lg-serif); color: var(--lg-encre); }
html:not(#_) .modal-body .modal-meta{ color: var(--lg-vio-d); }
html:not(#_) .modal-body .modal-tag{ background: var(--lg-poudre); color: var(--lg-encre); border: 1px solid var(--lg-poudre-3); }
html:not(#_) .modal-action-primary{ background: var(--lg-vio-d); color: #fff; border-radius: 999px; }
html:not(#_) .btn-cta-overlay{ background: var(--lg-vio-d); color: #fff; border-radius: 999px; }
html:not(#_) .popup-card{ border-radius: 28px; background: var(--lg-creme); border: 1px solid var(--lg-poudre-3); }
html:not(#_) .popup-title{ font-family: var(--lg-serif); font-weight: 700; color: var(--lg-encre); }
html:not(#_) .popup-desc{ color: var(--lg-encre-m); }
html:not(#_) .popup-icon{ border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, var(--lg-vio-l) 75%); box-shadow: 0 0 0 3px var(--lg-creme), 0 0 0 4.5px var(--lg-vio-l), 0 0 18px rgba(142, 68, 173, .3); }
html:not(#_) .popup-icon svg{ color: var(--lg-vio-d); }
html:not(#_) .popup-btn{ background: var(--lg-vio-d); color: #fff; border-radius: 999px; }
html:not(#_) .popup-close{ color: var(--lg-encre-m); }
html:not(#_) .popup-footer{ border-top-color: var(--lg-poudre-3); color: var(--lg-encre-m); }
html:not(#_) .popup-footer a{ color: var(--lg-vio-d); }
html:not(#_) .age-gate-modal{ background: var(--lg-amp) center top / 24px 14px space no-repeat, var(--lg-creme); border-top: 14px solid var(--lg-vio-d); background-origin: border-box; border-radius: 28px; box-shadow: 0 26px 60px rgba(43, 30, 47, .35); }
html:not(#_) .age-gate-modal h2{ font-family: var(--lg-serif); font-weight: 700; color: var(--lg-encre); }
html:not(#_) .age-gate-lead{ color: var(--lg-encre); }
html:not(#_) .age-gate-body{ color: var(--lg-encre-2); }
html:not(#_) .age-gate-buttons .btn{ border-radius: 999px; }

@media (max-width: 640px) {
  html:not(#_) .cta-section{ border-width: 13px; padding: 30px 16px 30px; border-radius: 26px; background-size: 22px 13px, 22px 13px, auto, auto, auto, auto; }
  html:not(#_) .cta-section::before, html:not(#_) .cta-section::after{ width: 13px; background-size: 13px 22px; }
  html:not(#_) .cta-section::before{ left: -13px; }
  html:not(#_) .cta-section::after{ right: -13px; }
  html:not(#_) .cta-section a.btn.btn-primary{ padding: 13px 28px; }
  html:not(#_) .hero-content{ padding: 2rem 3.6rem; }
  html:not(#_) .profile-grid{ gap: 14px; }
  html:not(#_) .profile-card{ padding: 6px 6px 0; border-radius: 22px; }
  html:not(#_) .profile-photo{ border-radius: 16px; }
  html:not(#_) .sb-logo-text{ font-size: 1.1rem; }
}

/* -- recette Astro · villes-bas (copiée telle quelle) */
html:not(#_) body.design-v-villes-bas .container > section.section.ds-villes:first-child{ order: 6; }
html:not(#_) body.design-v-villes-bas div.container.ds-c{ display: flex; flex-direction: column; }
html:not(#_) body.design-v-villes-bas div.container.ds-c > *{ order: 6; }  /* :where() : sinon le :has() gonfle la spécificité au-dessus des règles ciblées (v0, 18/09) */
html:not(#_) body.design-v-villes-bas div.container > .page-header{ order: 0; }  /* pages ville d'un site régional : le H1 reste en tête */
html:not(#_) body.design-v-villes-bas div.container > section.section.ds-profils{ order: 1; }
html:not(#_) body.design-v-villes-bas div.container > .ds-bloc{ order: 2; }
html:not(#_) body.design-v-villes-bas div.container > section.cta-section{ order: 3; }
html:not(#_) body.design-v-villes-bas div.container > section.section.ds-faq{ order: 4; }
html:not(#_) body.design-v-villes-bas div.region-layout{ display: flex; flex-direction: column; }
html:not(#_) body.design-v-villes-bas div.region-layout > aside.region-sidebar{ order: 2; position: static; width: auto; max-width: none; }
html:not(#_) body.design-v-villes-bas div.region-layout > aside.region-sidebar ul.ville-list{ display: flex; flex-wrap: wrap; gap: 8px; }

/* -- mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  html:not(#_) .sb-logo::before, html:not(#_) .sb-logo::after, html:not(#_) .cta-section::before, html:not(#_) .cta-section::after{ animation: none; opacity: 1; }
  html:not(#_) .profile-card, html:not(#_) .profile-photo img, html:not(#_) .profile-cta, html:not(#_) .cta-section a.btn.btn-primary, html:not(#_) .hero-cta .btn-hero-primary, html:not(#_) .sb-link .sb-ico, html:not(#_) .link-tag::before{ transition: none !important; }
  html:not(#_) .profile-card:hover, html:not(#_) .cta-section a.btn.btn-primary:hover, html:not(#_) .hero-cta .btn-hero-primary:hover{ transform: none; }
  html:not(#_) .profile-card:hover .profile-photo.blurred img{ transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce){html:not(#_) .sidebar-inner{animation:none !important;transition:none !important;}}
html:not(#_) .sidebar-inner{scrollbar-width:thin;scrollbar-color:rgba(128,128,128,.45) transparent;}
/* __END_DESIGN_SITE__ */