/* __DESIGN_SITE__ */
/* Habillage unique — sextreffen-rheinland-pfalz.de (Astro).
   Direction « vignoble » : vert vigne + crème + or, feuille très discrète.
   Trois zones : sidebar (desktop), bandeau + onglets (mobile), pied de page.
   Rien d'autre touché (grille, fiches, formulaires, age gate, prelinker). */

html:not(#_){
  --vin-creme:      #f7f1df;   /* fond clair : sidebar + bandeau mobile */
  --vin-creme-2:    #efe4c3;   /* fond soutenu : survol, séparations */
  --vin-vert-fonce: #1f331c;   /* vert vigne très sombre : pied de page */
  --vin-vert:       #2c4726;   /* texte principal sur crème */
  --vin-vert-clair: #4f7a45;   /* texte secondaire sur crème */
  --vin-or:         #c9a227;   /* accents, actives */
  --vin-or-clair:   #e2c468;   /* or clair, sur fond sombre */
  /* Feuille en data: SVG (~350 o/pièce) : trait vert pâle sur crème, or pâle sur vert. */
  --vin-feuille-claire: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M32 6c14 8 20 22 12 40-3-10-9-16-18-18 6 4 9 10 9 18C21 40 14 26 32 6z' fill='%232c4726' fill-opacity='.05'/%3E%3Cpath d='M32 10c4 14 4 26-2 34' stroke='%232c4726' stroke-opacity='.06' stroke-width='1.1' fill='none'/%3E%3C/svg%3E");
  --vin-feuille-sombre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M32 6c14 8 20 22 12 40-3-10-9-16-18-18 6 4 9 10 9 18C21 40 14 26 32 6z' fill='%23c9a227' fill-opacity='.05'/%3E%3Cpath d='M32 10c4 14 4 26-2 34' stroke='%23c9a227' stroke-opacity='.06' stroke-width='1.1' fill='none'/%3E%3C/svg%3E");
}

/* === 1. Sidebar desktop === */
/* `.sidebar-inner` est le calque blanc PAR-DESSUS `.sidebar` : c'est lui qui doit
   porter le fond, sinon la couleur de `.sidebar` reste invisible derrière. */
html:not(#_) .sidebar-inner{
  background-color: var(--vin-creme);
  background-image: var(--vin-feuille-claire);
  background-repeat: repeat; background-size: 220px 220px;
  border-right: 1px solid var(--vin-creme-2);
}
html:not(#_) .sidebar{ border-right: 1px solid rgba(201,162,39,.35); }

/* Logo : nom en petites capitales espacées, pastille dorée façon sceau derrière l'icône. */
html:not(#_) .sb-logo{ display: flex; align-items: center; gap: 10px; padding: 4px 0 2px; }
html:not(#_) .sb-logo-dot{
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, var(--vin-or-clair), var(--vin-or) 70%);
  color: var(--vin-vert-fonce);
  box-shadow: 0 0 0 3px rgba(201,162,39,.18);
  animation: vin-sceau 3.4s ease-in-out infinite;
}
html:not(#_) .sb-logo-text{
  color: var(--vin-vert-fonce); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; font-size: .92rem;
  font-family: Georgia, "Times New Roman", ui-serif, serif;
}

/* Nav : liens verts sur crème, indicateur or pour le lien actif. */
html:not(#_) .sb-nav{ margin-top: 6px; }
html:not(#_) .sb-link{
  color: var(--vin-vert); border-radius: 8px;
  transition: transform .2s ease, background-color .2s ease, color .2s ease;
}
html:not(#_) .sb-link:hover{ background-color: var(--vin-creme-2); color: var(--vin-vert-fonce); transform: translateX(3px); }
html:not(#_) .sb-link.active{
  color: var(--vin-vert-fonce); font-weight: 700;
  background-color: rgba(201,162,39,.14);
  box-shadow: inset 4px 0 0 var(--vin-or);   /* section active soulignée or */
}
/* L'inscription devient un bouton doré : c'est le clic qui rapporte, il se détache du reste. */
html:not(#_) .sb-nav a.sb-link[href="/register"]{
  margin-top: 8px; font-weight: 700;
  background: linear-gradient(135deg, var(--vin-or-clair), var(--vin-or));
  color: var(--vin-vert-fonce);
  box-shadow: 0 2px 8px rgba(201,162,39,.35);
}
html:not(#_) .sb-nav a.sb-link[href="/register"]:hover{ transform: translateY(-1px); box-shadow: 0 4px 12px rgba(201,162,39,.45); }

html:not(#_) .sb-map-quick-link{
  color: var(--vin-vert); border: 1px solid rgba(201,162,39,.5); border-radius: 999px;
  transition: background-color .2s ease, color .2s ease;
}
html:not(#_) .sb-map-quick-link:hover{ background-color: var(--vin-or); color: var(--vin-vert-fonce); }

html:not(#_) .sb-section-title{
  color: var(--vin-vert-clair); letter-spacing: .08em; text-transform: uppercase;
  font-size: .72rem; border-bottom: 1px solid rgba(44,71,38,.15); padding-bottom: 6px;
}
html:not(#_) .sb-silo-region{ color: var(--vin-vert-fonce); font-weight: 600; border-bottom: 1px solid transparent; transition: border-color .2s ease; }
html:not(#_) .sb-silo-group.open .sb-silo-region{ border-bottom-color: var(--vin-or); }  /* canton ouvert souligné or */
html:not(#_) .sb-chevron{ color: var(--vin-vert-clair); transition: transform .25s ease; }
html:not(#_) .sb-silo-ville{ color: var(--vin-vert-clair); transition: color .2s ease, transform .2s ease; }
html:not(#_) .sb-silo-ville:hover{ color: var(--vin-or); transform: translateX(3px); }

/* === 2. Barre mobile (bandeau + onglets) === */
/* Le gabarit compte sur un fond sombre (--primary/--secondary) pour que ses textes
   blancs semi-transparents restent lisibles. Sur fond crème ils seraient invisibles :
   ils sont recolorés en vert foncé (le fond n'utilise plus ces variables). */
html:not(#_) .mobile-guest-top{
  background-color: var(--vin-creme);
  background-image: var(--vin-feuille-claire);
  background-repeat: repeat; background-size: 180px 180px;
  border-bottom: 1px solid rgba(201,162,39,.4);
}
html:not(#_) .mobile-guest-head{ border-bottom: 1px solid var(--vin-creme-2); }
html:not(#_) .mobile-guest-brand{
  color: var(--vin-vert-fonce) !important; font-weight: 700; letter-spacing: .04em;
  font-family: Georgia, "Times New Roman", ui-serif, serif;
}
html:not(#_) .mobile-guest-login{ color: var(--vin-vert) !important; border: 1px solid rgba(44,71,38,.35); border-radius: 999px; }
html:not(#_) .mobile-guest-cta{ background-color: var(--vin-creme-2); }
html:not(#_) .mobile-guest-cta-offer{ color: var(--vin-vert-clair) !important; }
html:not(#_) .mobile-guest-cta-kw{ color: var(--vin-vert-fonce) !important; font-weight: 700; }
html:not(#_) .mobile-guest-timer-label{ color: var(--vin-vert-clair) !important; }
html:not(#_) .mobile-guest-timer{ color: var(--vin-vert-fonce) !important; font-weight: 700; }
/* Bouton d'inscription : reste plein, ≥44px de haut, texte/lien/geste inchangés. */
html:not(#_) .mobile-guest-cta-btn{
  background: linear-gradient(135deg, var(--vin-or-clair), var(--vin-or)) !important;
  color: var(--vin-vert-fonce) !important; font-weight: 700; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(201,162,39,.35);
  transition: transform .2s ease, box-shadow .2s ease;
}
html:not(#_) .mobile-guest-cta-btn:active{ transform: translateY(1px); }

html:not(#_) .bottom-bar{ background-color: var(--vin-creme); border-top: 1px solid rgba(201,162,39,.4); }
html:not(#_) .btab{ color: var(--vin-vert); transition: color .2s ease, transform .2s ease; }
html:not(#_) .btab:hover{ color: var(--vin-vert-fonce); }
html:not(#_) .btab.active{ color: var(--vin-vert-fonce); }
html:not(#_) .btab.active .btab-ico{ color: var(--vin-or); transform: translateY(-2px); }
html:not(#_) .btab-lbl{ font-weight: 600; }

/* === 3. Pied de page === */
/* Vert vigne foncé, feuille dorée très discrète qui dérive lentement. Deux bandes :
   « liens » (marque + inscription + navigation + légal + villes + contact, réunis
   dans une même bande qui s'enroule selon l'écran) puis « mentions » (copyright). */
html:not(#_) .footer-v3{
  background-color: var(--vin-vert-fonce);
  background-image: var(--vin-feuille-sombre);
  background-repeat: repeat; background-size: 200px 200px;
  animation: vin-derive 44s linear infinite;
}
html:not(#_) .footer-inner{ max-width: 1180px; margin: 0 auto; }

html:not(#_) .footer-top{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; padding-bottom: 18px; border-bottom: 1px solid rgba(201,162,39,.28);
}
html:not(#_) .footer-brand h3{ color: var(--vin-or-clair); letter-spacing: .05em; font-family: Georgia, "Times New Roman", ui-serif, serif; }
html:not(#_) .footer-brand p{ color: rgba(247,241,223,.65); }
html:not(#_) .footer-newsletter{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
html:not(#_) .footer-newsletter p{ color: rgba(247,241,223,.75); margin: 0; }
html:not(#_) .footer-newsletter .btn-primary{
  background: linear-gradient(135deg, var(--vin-or-clair), var(--vin-or));
  color: var(--vin-vert-fonce); border-radius: 999px; font-weight: 700; min-height: 44px;
  display: inline-flex; align-items: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  transition: transform .2s ease, box-shadow .2s ease;
}
html:not(#_) .footer-newsletter .btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.32); }

html:not(#_) .footer-grid{ display: flex; flex-wrap: wrap; gap: 22px 44px; padding: 18px 0; border-bottom: 1px solid rgba(201,162,39,.16); }
html:not(#_) .footer-col{ min-width: 150px; flex: 0 1 auto; }
html:not(#_) .footer-col h4{ color: var(--vin-or); font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 8px; }
html:not(#_) .footer-col ul{ display: flex; flex-wrap: wrap; gap: 5px 16px; list-style: none; margin: 0; padding: 0; }
html:not(#_) .footer-col a{ color: rgba(247,241,223,.82); transition: color .2s ease; }
html:not(#_) .footer-col a:hover{ color: var(--vin-or-clair); }
html:not(#_) .contact-email a{ color: rgba(247,241,223,.82); }

html:not(#_) .footer-bottom{ text-align: center; padding: 14px 0 20px; }
html:not(#_) .footer-bottom p{ color: rgba(247,241,223,.55); font-size: .8rem; letter-spacing: .02em; }

/* === Animations & accessibilité === */
@keyframes vin-sceau{
  0%, 100% { box-shadow: 0 0 0 3px rgba(201,162,39,.18); }
  50%      { box-shadow: 0 0 0 6px rgba(201,162,39,.06); }
}
@keyframes vin-derive{ to { background-position: 200px 200px; } }

@media (prefers-reduced-motion: reduce){
  html:not(#_) .sb-logo-dot, html:not(#_) .footer-v3, html:not(#_) .sb-link, html:not(#_) .sb-map-quick-link, html:not(#_) .sb-silo-ville, html:not(#_) .btab, html:not(#_) .btab-ico, html:not(#_) .mobile-guest-cta-btn, html:not(#_) .footer-newsletter .btn-primary, html:not(#_) .footer-col a{
    animation: none !important; transition: none !important;
  }
}

/* ============================================================================
   PROLONGEMENT — thème profond + mise en page « cta-faq » (registre vignoble,
   inchangé : crème / vert vigne / or). Rien d'autre que couleurs, bordures,
   rayons, ombres, typographie et l'ORDRE des sections. */

/* === a) recette de mise en page « astro · cta-faq », copiée telle quelle
   depuis app/design_recettes_v3.css (version du 18/09, :where(...) inclus). === */
@media (min-width: 992px) {
  html:not(#_) body.design-v-cta-faq div.container:where(:has(> section.cta-section):has(> section.section .info-duo)){ display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; align-items: start; }
  html:not(#_) body.design-v-cta-faq div.container:where(:has(> section.cta-section):has(> section.section .info-duo)) > *{ grid-column: 1 / -1; }
  html:not(#_) body.design-v-cta-faq div.container > section.cta-section, html:not(#_) body.design-v-cta-faq div.container > section.section:has(.info-duo){ grid-column: auto; align-self: stretch; }
  html:not(#_) body.design-v-cta-faq div.container > section.cta-section{ display: flex; flex-direction: column; justify-content: center; }
  html:not(#_) body.design-v-cta-faq div.container > section.section > .info-duo{ grid-template-columns: minmax(0, 1fr); }
}

/* Astro · cta-faq, page ville en ONGLETS (`config.templates.villeVariant = 2`, un site sur trois environ :
   sextreff-sachsen, sextreffen-rheinland-pfalz, swingerclub-sachsen…) : pas de `.info-duo`, la FAQ (carte + accordéon)
   vit dans `div.tab-content#tab-faq` à côté de `#tab-profiles`, et les listes de villes sont déjà en bas.
   ≥ 992 px : la FAQ reste affichée en permanence à côté du CTA (son onglet devient inutile, masqué) ;
   en dessous, onglets d'origine. Même `:where()` sur le conteneur, même raison. (18/09, trouvé par l'agent de
   sextreffen-rheinland-pfalz — sa version sans `:where()` perdait ses surcharges.) */
@media (min-width: 992px) {
  html:not(#_) body.design-v-cta-faq div.container:where(:has(> .tabs):has(> #tab-faq):has(> section.cta-section)){ display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; align-items: start; }
  html:not(#_) body.design-v-cta-faq div.container:where(:has(> .tabs):has(> #tab-faq):has(> section.cta-section)) > *{ grid-column: 1 / -1; }
  html:not(#_) body.design-v-cta-faq div.container > .tabs .tab[data-tab="faq"]{ display: none; }
  html:not(#_) body.design-v-cta-faq div.container > #tab-faq{ display: block; grid-column: auto; align-self: stretch; }
  html:not(#_) body.design-v-cta-faq div.container > section.cta-section{ grid-column: auto; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
}

/* === c) un seul CTA à la fois === */
/* Ce gabarit régional n'a ni bandeau défilant ni bloc pré-footer concurrent
   (`.trust-badges` n'existe que sur l'accueil national) : un seul CTA par
   page ici, rien à masquer. */

/* === b) thème profond === */

/* --- Onglets Profile / FAQ (visibles sous 992 px) --- */
html:not(#_) .tabs{ display: flex; gap: 8px; margin: 4px 0 14px; flex-wrap: wrap; }
html:not(#_) .tab{
  background: var(--vin-creme); color: var(--vin-vert);
  border: 1px solid rgba(201,162,39,.4); border-radius: 999px;
  padding: 8px 16px; font-weight: 600; font-size: .88rem; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
html:not(#_) .tab:hover{ transform: translateY(-1px); }
html:not(#_) .tab.active{
  background: linear-gradient(135deg, var(--vin-or-clair), var(--vin-or));
  color: var(--vin-vert-fonce); border-color: transparent;
}

/* --- Filtres --- */
html:not(#_) .filters{ display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
html:not(#_) .filter-btn{
  background: var(--vin-creme); color: var(--vin-vert);
  border: 1px solid rgba(44,71,38,.18); border-radius: 999px;
  padding: 7px 14px; font-size: .86rem; font-weight: 600; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
html:not(#_) .filter-btn:hover{ border-color: var(--vin-or); }
html:not(#_) .filter-btn.active{
  background: var(--vin-vert-fonce); color: var(--vin-or-clair); border-color: var(--vin-vert-fonce);
}

/* --- Cartes profil --- */
html:not(#_) .profile-card{
  background: var(--vin-creme); border: 1px solid rgba(201,162,39,.32);
  border-radius: 14px; overflow: hidden; box-shadow: 0 2px 10px rgba(31,51,28,.10);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
html:not(#_) .profile-card:hover{
  transform: translateY(-3px); border-color: var(--vin-or);
  box-shadow: 0 8px 20px rgba(31,51,28,.18);
}
html:not(#_) .profile-age{
  background: rgba(31,51,28,.72); color: var(--vin-or-clair);
  border-radius: 999px; padding: 2px 9px; font-weight: 700; font-size: .78rem;
}
html:not(#_) .profile-lock{ filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
html:not(#_) .profile-info{ padding: 10px 12px 4px; }
html:not(#_) .profile-title{ color: var(--vin-vert-clair); font-size: .84rem; margin: 0 0 2px; }
html:not(#_) .profile-name{ color: var(--vin-vert-fonce); margin: 0; font-family: Georgia, "Times New Roman", ui-serif, serif; }
html:not(#_) .profile-ville{ color: var(--vin-vert-clair); font-size: .8rem; }
html:not(#_) .profile-footer{ padding: 6px 12px 12px; }
html:not(#_) .profile-cta{
  display: inline-block; width: 100%; text-align: center;
  background: var(--vin-vert-fonce); color: var(--vin-or-clair);
  border-radius: 999px; padding: 7px 10px; font-weight: 700; font-size: .84rem;
  transition: background-color .2s ease;
}
html:not(#_) .profile-card:hover .profile-cta{ background: var(--vin-or); color: var(--vin-vert-fonce); }

/* --- Pagination --- */
html:not(#_) .pagination{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 18px 0; }
html:not(#_) .pagination-link, html:not(#_) .pagination-current, html:not(#_) .pagination-ellipsis{
  min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; font-weight: 600; font-size: .88rem;
}
html:not(#_) .pagination-link{ background: var(--vin-creme); color: var(--vin-vert); border: 1px solid rgba(44,71,38,.16); transition: background-color .2s ease, color .2s ease; }
html:not(#_) .pagination-link:hover{ background: var(--vin-creme-2); color: var(--vin-vert-fonce); }
html:not(#_) .pagination-current{ background: linear-gradient(135deg, var(--vin-or-clair), var(--vin-or)); color: var(--vin-vert-fonce); }
html:not(#_) .pagination-ellipsis{ color: var(--vin-vert-clair); }
html:not(#_) .pagination-arrow{ background: var(--vin-vert-fonce); color: var(--vin-or-clair); border-color: transparent; }
html:not(#_) .pagination-arrow:hover{ background: var(--vin-or); color: var(--vin-vert-fonce); }

/* --- Bandeau CTA de milieu de page --- */
html:not(#_) section.cta-section{
  background-color: var(--vin-vert-fonce);
  background-image: var(--vin-feuille-sombre);
  background-repeat: repeat; background-size: 200px 200px;
  border-radius: 16px; padding: 28px 22px; text-align: center;
  border: 1px solid rgba(201,162,39,.3);
}
html:not(#_) section.cta-section h2{ color: var(--vin-or-clair); font-family: Georgia, "Times New Roman", ui-serif, serif; margin: 0 0 8px; }
html:not(#_) section.cta-section p{ color: rgba(247,241,223,.82); margin: 0 0 16px; }

/* --- Boutons d'action génériques (CTA, age gate, modale profil) --- */
html:not(#_) .btn.btn-primary{
  background: linear-gradient(135deg, var(--vin-or-clair), var(--vin-or));
  color: var(--vin-vert-fonce); border: none; border-radius: 999px;
  font-weight: 700; min-height: 44px; padding: 0 22px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(201,162,39,.35);
  transition: transform .2s ease, box-shadow .2s ease;
}
html:not(#_) .btn.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 6px 16px rgba(201,162,39,.42); }
html:not(#_) .btn.btn-primary.btn-lg{ padding: 0 30px; min-height: 50px; font-size: 1.02rem; }
html:not(#_) .btn.btn-outline{
  background: transparent; color: var(--vin-vert); border: 1px solid rgba(44,71,38,.4);
  border-radius: 999px; min-height: 44px; padding: 0 22px; font-weight: 600;
  transition: background-color .2s ease, color .2s ease;
}
html:not(#_) .btn.btn-outline:hover{ background: var(--vin-creme-2); color: var(--vin-vert-fonce); }

/* --- FAQ / accordéon --- */
html:not(#_) .accordion{ display: flex; flex-direction: column; gap: 10px; }
html:not(#_) .accordion-item{
  background: var(--vin-creme); border: 1px solid rgba(201,162,39,.3);
  border-radius: 12px; padding: 4px 4px; transition: border-color .2s ease;
}
html:not(#_) .accordion-item[open]{ border-color: var(--vin-or); }
html:not(#_) .accordion-header{ padding: 10px 12px; cursor: pointer; list-style: revert; }
html:not(#_) .accordion-header::marker{ color: var(--vin-or); }
html:not(#_) .accordion-q{ color: var(--vin-vert-fonce); font-weight: 700; }
html:not(#_) .accordion-body{ padding: 2px 14px 14px; color: var(--vin-vert-clair); line-height: 1.6; }

/* --- Carte de ville (dans l'onglet FAQ) --- */
html:not(#_) .ville-map-card{ border: 1px solid rgba(201,162,39,.3); border-radius: 12px; overflow: hidden; margin-bottom: 14px; }
html:not(#_) .ville-map-header{ background: var(--vin-creme-2); padding: 10px 14px; }
html:not(#_) .ville-map-header h3{ color: var(--vin-vert-fonce); margin: 0; font-size: 1rem; }

/* --- Retour en haut --- */
html:not(#_) .back-to-top{
  background: linear-gradient(135deg, var(--vin-or-clair), var(--vin-or));
  color: var(--vin-vert-fonce); border: none; box-shadow: 0 3px 10px rgba(31,51,28,.3);
  transition: transform .2s ease, opacity .2s ease;
}
html:not(#_) .back-to-top:hover{ transform: translateY(-2px); }

/* --- Pop-up profil --- */
html:not(#_) .modal-overlay#profileModal{ background: rgba(31,51,28,.55); }
html:not(#_) .modal-content{ background: var(--vin-creme); border-radius: 16px; border: 1px solid rgba(201,162,39,.35); }
html:not(#_) .modal-close{ background: rgba(31,51,28,.65); color: var(--vin-or-clair); border-radius: 999px; }
html:not(#_) .modal-nav{ background: rgba(31,51,28,.6); color: var(--vin-or-clair); }
html:not(#_) .modal-dot{ background: rgba(247,241,223,.5); }
html:not(#_) .modal-dot.active{ background: var(--vin-or); }
html:not(#_) .modal-cta-overlay{ background: rgba(31,51,28,.78); }
html:not(#_) .modal-cta-overlay p{ color: rgba(247,241,223,.9); }
html:not(#_) .btn-cta-overlay{
  background: linear-gradient(135deg, var(--vin-or-clair), var(--vin-or));
  color: var(--vin-vert-fonce); border: none; border-radius: 999px; font-weight: 700; min-height: 44px; padding: 0 20px;
}
html:not(#_) .modal-name{ color: var(--vin-vert-fonce); font-family: Georgia, "Times New Roman", ui-serif, serif; }
html:not(#_) .modal-meta, html:not(#_) .modal-bio{ color: var(--vin-vert-clair); }
html:not(#_) .modal-favori{ color: var(--vin-or); }
html:not(#_) .modal-tags span{ background: var(--vin-creme-2); color: var(--vin-vert); }

/* --- Pop-up d'inscription --- */
html:not(#_) .popup-overlay{ background: rgba(31,51,28,.55); }
html:not(#_) .popup-card{ background: var(--vin-creme); border-radius: 16px; border: 1px solid rgba(201,162,39,.35); }
html:not(#_) .popup-icon{ background: linear-gradient(135deg, var(--vin-or-clair), var(--vin-or)); color: var(--vin-vert-fonce); border-radius: 999px; }
html:not(#_) .popup-close{ background: rgba(44,71,38,.1); color: var(--vin-vert-fonce); border-radius: 999px; }
html:not(#_) .popup-title{ color: var(--vin-vert-fonce); font-family: Georgia, "Times New Roman", ui-serif, serif; }
html:not(#_) .popup-desc{ color: var(--vin-vert-clair); }
html:not(#_) .popup-footer{ color: var(--vin-vert-clair); }
html:not(#_) .popup-footer a{ color: var(--vin-or); font-weight: 700; }

/* --- Age gate --- */
html:not(#_) .age-gate{ background: rgba(31,51,28,.72); }
html:not(#_) .age-gate-modal{
  background-color: var(--vin-creme); background-image: var(--vin-feuille-claire);
  background-repeat: repeat; background-size: 220px 220px;
  border-radius: 16px; border: 1px solid rgba(201,162,39,.35);
}
html:not(#_) .age-gate-modal h2{ color: var(--vin-vert-fonce); font-family: Georgia, "Times New Roman", ui-serif, serif; }
html:not(#_) .age-gate-lead, html:not(#_) .age-gate-body, html:not(#_) .age-gate-actions{ color: var(--vin-vert-clair); }

/* --- Menu mobile (tiroir de la sidebar) --- */
html:not(#_) .ds-burger{ color: var(--vin-vert-fonce); }
html:not(#_) .ds-menu-overlay{ background: rgba(31,51,28,.5); }
html:not(#_) .ds-menu-close{ background: var(--vin-creme-2); color: var(--vin-vert-fonce); }
@media (max-width: 768px) {
  html:not(#_) body:has(#ds-menu:checked) aside.sidebar .sb-link{ padding-top: 10px; padding-bottom: 10px; font-size: .96rem; }
  html:not(#_) body:has(#ds-menu:checked) aside.sidebar .sb-silo-ville{ padding: 3px 0; display: block; }
}

@media (prefers-reduced-motion: reduce){
  html:not(#_) .tab, html:not(#_) .filter-btn, html:not(#_) .profile-card, html:not(#_) .profile-cta, html:not(#_) .pagination-link, html:not(#_) .pagination-arrow, html:not(#_) .btn.btn-primary, html:not(#_) .btn.btn-outline, html:not(#_) .back-to-top, html:not(#_) .accordion-item{
    transition: none !important;
  }
}

@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__ */