/* __DESIGN_SITE__ */
html:not(#_) .sidebar-inner{background:transparent;box-shadow:none;}
/* ^ posé par design_site.py : le panneau blanc d'Astro recouvrait le fond du .sidebar */
/* ============================================================
sextreff-sachsen.de — « velours de nuit »
Palette : aubergine profond + cuivre chaud.
Zones : barre latérale desktop, bandeau + barre d'onglets mobile, pied de page.
============================================================ */
html:not(#_){
--dfs-aubergine-950:#170b1d;
--dfs-aubergine-900:#221030;
--dfs-aubergine-800:#341a44;
--dfs-aubergine-700:#472359;
--dfs-copper:#c9793c;
--dfs-copper-light:#f0b479;
--dfs-copper-dark:#7c4520;
--dfs-cream:#f5e9da;
--dfs-mauve-muted:#cdb8d6;
}
/* ------------------------------------------------------------
1. Barre latérale desktop — dégradé vertical, logo en médaillon
------------------------------------------------------------ */
/* Fond en dégradé vertical + lueur cuivre discrète derrière le logo.
(jamais d'animation ni de position sur .sidebar lui-même) */
html:not(#_) .sidebar{
background:
radial-gradient(120% 55% at 50% 0%, rgba(201,121,60,.16), transparent 62%),
linear-gradient(180deg, var(--dfs-aubergine-800) 0%, var(--dfs-aubergine-900) 55%, var(--dfs-aubergine-950) 100%);
border-right:1px solid rgba(201,121,60,.22);
}
html:not(#_) .sidebar-inner{
animation:dfsSideIn .5s ease-out both;
}
@keyframes dfsSideIn{ from{opacity:0; transform:translateX(-6px);} to{opacity:1; transform:translateX(0);} }
/* Logo → médaillon centré (disposition : plus en ligne, mais empilé et centré) */
html:not(#_) .sb-logo{
display:flex; flex-direction:column; align-items:center; gap:8px;
padding:22px 12px 18px; text-align:center;
border-bottom:1px solid rgba(201,121,60,.28);
margin-bottom:10px;
}
html:not(#_) .sb-logo-dot{
width:46px; height:46px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
background:radial-gradient(circle at 35% 30%, var(--dfs-copper-light), var(--dfs-copper) 65%, var(--dfs-copper-dark) 100%);
border:2px solid rgba(240,180,121,.55);
box-shadow:0 0 0 4px rgba(201,121,60,.12), 0 4px 14px rgba(0,0,0,.45);
animation:dfsGlow 3.6s ease-in-out infinite alternate;
}
html:not(#_) .sb-logo-dot svg{ color:var(--dfs-aubergine-950); stroke:var(--dfs-aubergine-950); width:20px; height:20px; }
@keyframes dfsGlow{
from{ box-shadow:0 0 0 4px rgba(201,121,60,.10), 0 4px 14px rgba(0,0,0,.45); }
to{ box-shadow:0 0 0 7px rgba(201,121,60,.20), 0 4px 18px rgba(0,0,0,.5); }
}
html:not(#_) .sb-logo-text{
color:var(--dfs-copper-light); font-weight:700; letter-spacing:.14em;
text-transform:uppercase; font-size:13px;
}
/* Navigation principale */
html:not(#_) .sb-nav{ padding:0 10px; display:flex; flex-direction:column; gap:2px; }
html:not(#_) .sb-link{
position:relative; display:flex; align-items:center; gap:10px;
padding:10px 12px 10px 16px; border-radius:10px;
color:var(--dfs-mauve-muted); text-decoration:none;
font-size:13px; letter-spacing:.03em;
transition:color .2s ease, background-color .2s ease;
overflow:hidden;
}
html:not(#_) .sb-link::before{
content:""; position:absolute; left:4px; top:14%; bottom:14%; width:3px;
border-radius:3px;
background:linear-gradient(180deg, var(--dfs-copper-light), var(--dfs-copper-dark));
transform:scaleY(0); transform-origin:center; transition:transform .25s ease;
}
html:not(#_) .sb-link:hover, html:not(#_) .sb-link:focus-visible{
color:var(--dfs-cream); background:rgba(201,121,60,.12);
}
html:not(#_) .sb-link:hover::before, html:not(#_) .sb-link:focus-visible::before{ transform:scaleY(1); }
html:not(#_) .sb-link.active{
color:var(--dfs-copper-light); background:rgba(201,121,60,.16);
font-weight:600;
}
html:not(#_) .sb-link.active::before{ transform:scaleY(1); }
html:not(#_) .sb-ico{
display:flex; align-items:center; justify-content:center;
width:26px; height:26px; border-radius:50%;
background:rgba(201,121,60,.10); flex:none;
transition:background-color .2s ease;
}
html:not(#_) .sb-link:hover .sb-ico, html:not(#_) .sb-link.active .sb-ico{ background:rgba(201,121,60,.22); }
/* Section « Villes de la région » */
html:not(#_) .sb-section{ padding:14px 10px 8px; margin-top:6px; border-top:1px solid rgba(201,121,60,.18); }
html:not(#_) .sb-map-quick-link{
display:flex; align-items:center; gap:8px; margin:0 6px 10px;
padding:7px 12px; border-radius:999px; font-size:12px;
color:var(--dfs-copper-light); border:1px solid rgba(201,121,60,.4);
text-decoration:none; transition:background-color .2s ease, color .2s ease;
}
html:not(#_) .sb-map-quick-link:hover{ background:rgba(201,121,60,.15); color:var(--dfs-cream); }
html:not(#_) .sb-section-title{
color:var(--dfs-copper); text-transform:uppercase; letter-spacing:.16em;
font-size:10.5px; font-weight:700; padding:2px 6px 8px;
}
html:not(#_) .sb-silo-region{
display:flex; align-items:center; justify-content:space-between;
padding:7px 8px; border-radius:8px; color:var(--dfs-mauve-muted);
text-decoration:none; font-size:12.5px; transition:color .2s ease, background-color .2s ease;
}
html:not(#_) .sb-silo-region:hover{ color:var(--dfs-cream); background:rgba(201,121,60,.10); }
html:not(#_) .sb-chevron{ transition:transform .25s ease; color:var(--dfs-copper); }
html:not(#_) .sb-silo-group.open .sb-chevron{ transform:rotate(90deg); }
html:not(#_) .sb-silo-villes{ padding-left:14px; border-left:1px dashed rgba(201,121,60,.28); margin:2px 0 6px 12px; }
html:not(#_) .sb-silo-ville{
display:block; padding:5px 8px; font-size:12px; color:var(--dfs-mauve-muted);
text-decoration:none; border-radius:6px; transition:color .2s ease, background-color .2s ease;
}
html:not(#_) .sb-silo-ville:hover{ color:var(--dfs-copper-light); background:rgba(201,121,60,.10); }
/* ------------------------------------------------------------
2. Bandeau mobile — assorti + CTA en dégradé cuivre
------------------------------------------------------------ */
html:not(#_) .mobile-guest-top{
background:linear-gradient(135deg, var(--dfs-aubergine-800), var(--dfs-aubergine-950) 85%);
border-bottom:1px solid rgba(201,121,60,.3);
}
html:not(#_) .mobile-guest-head{
display:flex; align-items:center; justify-content:space-between;
padding:10px 14px; border-bottom:1px solid rgba(201,121,60,.16);
}
html:not(#_) .mobile-guest-brand{
color:var(--dfs-cream); font-weight:700; letter-spacing:.08em;
text-transform:uppercase; text-decoration:none; font-size:14px;
}
html:not(#_) .mobile-guest-login{
color:var(--dfs-copper-light); text-decoration:none; font-size:12.5px;
padding:6px 14px; border:1px solid rgba(201,121,60,.5); border-radius:999px;
transition:background-color .2s ease, color .2s ease;
}
html:not(#_) .mobile-guest-login:hover{ background:rgba(201,121,60,.18); color:var(--dfs-cream); }
html:not(#_) .mobile-guest-cta{ padding:12px 14px 14px; }
html:not(#_) .mobile-guest-cta-offer{ color:var(--dfs-copper-light); font-size:11px; letter-spacing:.04em; margin:0; }
html:not(#_) .mobile-guest-cta-kw{ color:var(--dfs-cream); font-weight:700; font-size:15px; margin:2px 0 0; }
html:not(#_) .mobile-guest-timer-label{ color:var(--dfs-mauve-muted); font-size:10px; display:block; }
html:not(#_) .mobile-guest-timer{ color:var(--dfs-copper-light); font-weight:700; font-size:14px; }
html:not(#_) .mobile-guest-cta-btn{
display:block; text-align:center; margin-top:10px; padding:13px 18px;
border-radius:999px; min-height:44px;
color:var(--dfs-aubergine-950); font-weight:800; letter-spacing:.05em;
text-transform:uppercase; font-size:13px; text-decoration:none;
background:linear-gradient(100deg, var(--dfs-copper-dark), var(--dfs-copper-light), var(--dfs-copper) 80%);
background-size:220% 100%;
box-shadow:0 6px 16px rgba(201,121,60,.35);
animation:dfsShimmer 5s linear infinite;
}
@media (prefers-reduced-motion: reduce){
html:not(#_) .mobile-guest-cta-btn{ animation:none; background-position:0 0; }
}
@keyframes dfsShimmer{ 0%{background-position:0% 50%;} 100%{background-position:200% 50%;} }
/* Barre d'onglets basse */
html:not(#_) .bottom-bar{
background:var(--dfs-aubergine-950);
border-top:1px solid rgba(201,121,60,.3);
}
html:not(#_) .btab{ color:var(--dfs-mauve-muted); }
html:not(#_) .btab-ico{
display:flex; align-items:center; justify-content:center;
width:30px; height:30px; border-radius:50%; margin:0 auto;
transition:background-color .2s ease, color .2s ease, transform .2s ease;
}
html:not(#_) .btab-lbl{ font-size:10px; letter-spacing:.03em; }
html:not(#_) .btab.active{ color:var(--dfs-copper-light); }
html:not(#_) .btab.active .btab-ico{
background:rgba(201,121,60,.22); box-shadow:0 0 0 1px rgba(201,121,60,.4) inset;
transform:translateY(-1px);
}
/* ------------------------------------------------------------
3. Pied de page — colonnes séparées par des filets cuivre
------------------------------------------------------------ */
html:not(#_) .footer-v1{
background:
radial-gradient(90% 140% at 50% 0%, rgba(201,121,60,.08), transparent 60%),
linear-gradient(180deg, var(--dfs-aubergine-900), var(--dfs-aubergine-950));
border-top:1px solid rgba(201,121,60,.25);
}
html:not(#_) .footer-col:empty{ display:none; }
html:not(#_) .footer-col{ position:relative; padding-left:6px; }
html:not(#_) .footer-col:not(:first-child)::before{
content:""; position:absolute; left:-16px; top:4px; bottom:4px; width:1px;
background:linear-gradient(180deg, transparent, var(--dfs-copper) 30%, var(--dfs-copper) 70%, transparent);
opacity:.55;
}
html:not(#_) .footer-col h4{
color:var(--dfs-copper-light); text-transform:uppercase; letter-spacing:.12em;
font-size:12px; font-weight:700; padding-bottom:8px;
border-bottom:1px solid var(--dfs-copper-dark); width:fit-content;
}
html:not(#_) .footer-col p{ color:var(--dfs-mauve-muted); font-size:13px; }
html:not(#_) .footer-col a{
color:var(--dfs-mauve-muted); text-decoration-line:underline;
text-decoration-color:transparent; text-underline-offset:3px;
transition:color .2s ease, text-decoration-color .2s ease;
}
html:not(#_) .footer-col a:hover{ color:var(--dfs-cream); text-decoration-color:var(--dfs-copper-light); }
html:not(#_) .footer-bottom{
border-top:1px solid rgba(201,121,60,.2); color:var(--dfs-mauve-muted);
font-size:11.5px; letter-spacing:.03em; text-align:center;
}
/* ------------------------------------------------------------
Confort de lecture — barre de défilement de la sidebar
------------------------------------------------------------ */
html:not(#_) .sidebar-inner{ scrollbar-width:thin; scrollbar-color:rgba(201,121,60,.4) transparent; }
@media (prefers-reduced-motion: reduce){
html:not(#_) .sidebar-inner, html:not(#_) .sb-logo-dot, html:not(#_) .mobile-guest-cta-btn{ animation:none !important; }
html:not(#_) .sb-link::before, html:not(#_) .sb-chevron, html:not(#_) .btab-ico, html:not(#_) .footer-col a{ transition:none !important; }
}
/* ------------------------------------------------------------
4. Recette de mise en page - cta-faq (Astro, pages ville)
Copiee telle quelle depuis app/design_recettes_v3.css : CTA et FAQ
cote a cote a partir de 992px, reste pleine largeur.
------------------------------------------------------------ */
@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); }
}
/* ------------------------------------------------------------
5. Cartes profil - cadre aubergine, filet cuivre en couronne,
badge d'age en pilule, bouton de fiche en degrade cuivre.
------------------------------------------------------------ */
html:not(#_) .profile-card{
position:relative; background:linear-gradient(165deg, var(--dfs-aubergine-800), var(--dfs-aubergine-900) 70%);
border:1px solid rgba(201,121,60,.22); border-radius:14px; overflow:hidden;
box-shadow:0 10px 26px rgba(9,4,12,.45);
transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
html:not(#_) .profile-card::before{
content:""; position:absolute; inset:0 0 auto 0; height:2px;
background:linear-gradient(90deg, transparent, var(--dfs-copper-light), transparent);
opacity:.5;
}
html:not(#_) .profile-card:hover, html:not(#_) .profile-card:focus-within{
border-color:rgba(201,121,60,.55);
box-shadow:0 14px 34px rgba(9,4,12,.55), 0 0 0 1px rgba(201,121,60,.25) inset;
transform:translateY(-3px);
}
html:not(#_) .profile-age{
background:rgba(23,11,29,.72); color:var(--dfs-copper-light);
border:1px solid rgba(201,121,60,.4); border-radius:999px;
padding:3px 10px; font-size:11px; letter-spacing:.04em; font-weight:600;
}
html:not(#_) .profile-lock{
background:rgba(23,11,29,.72); border:1px solid rgba(201,121,60,.4);
color:var(--dfs-copper-light);
}
html:not(#_) .profile-info{ padding:12px 14px 4px; }
html:not(#_) .profile-title{ color:var(--dfs-mauve-muted); font-size:12px; font-style:italic; }
html:not(#_) .profile-name{ color:var(--dfs-cream); font-weight:700; letter-spacing:.01em; }
html:not(#_) .profile-ville{ color:var(--dfs-copper-light); font-size:11.5px; letter-spacing:.03em; }
html:not(#_) .profile-footer{ padding:8px 14px 14px; border-top:1px dashed rgba(201,121,60,.22); margin-top:8px; }
html:not(#_) .profile-cta{
display:inline-block; color:var(--dfs-aubergine-950); font-weight:700; font-size:11.5px;
letter-spacing:.05em; text-transform:uppercase; padding:6px 14px; border-radius:999px;
background:linear-gradient(100deg, var(--dfs-copper-dark), var(--dfs-copper-light) 60%, var(--dfs-copper));
}
/* ------------------------------------------------------------
6. Filtres et pagination - pilules cuivre sur fond aubergine
------------------------------------------------------------ */
html:not(#_) .filters{ gap:8px; }
html:not(#_) .filter-btn{
background:rgba(52,26,68,.55); border:1px solid rgba(201,121,60,.3);
color:var(--dfs-mauve-muted); border-radius:999px; padding:7px 16px;
font-size:12.5px; letter-spacing:.03em;
transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
html:not(#_) .filter-btn:hover{ border-color:rgba(201,121,60,.6); color:var(--dfs-cream); }
html:not(#_) .filter-btn.active{
background:linear-gradient(100deg, var(--dfs-copper-dark), var(--dfs-copper) 70%);
color:var(--dfs-aubergine-950); border-color:transparent; font-weight:700;
}
html:not(#_) .pagination{ gap:6px; }
html:not(#_) .pagination-link, html:not(#_) .pagination-current, html:not(#_) .pagination-arrow, html:not(#_) .pagination-ellipsis{
min-width:34px; height:34px; border-radius:50%;
display:inline-flex; align-items:center; justify-content:center;
font-size:12.5px; color:var(--dfs-mauve-muted);
border:1px solid rgba(201,121,60,.25); background:rgba(34,16,48,.6);
transition:border-color .2s ease, color .2s ease, background-color .2s ease;
}
html:not(#_) .pagination-link:hover{ border-color:rgba(201,121,60,.55); color:var(--dfs-cream); }
html:not(#_) .pagination-current{
background:linear-gradient(100deg, var(--dfs-copper-dark), var(--dfs-copper));
color:var(--dfs-aubergine-950); font-weight:700; border-color:transparent;
}
html:not(#_) .pagination-arrow{ color:var(--dfs-copper-light); }
html:not(#_) .pagination-ellipsis{ border:none; background:transparent; }
/* ------------------------------------------------------------
7. Bandeau CTA milieu de page - meme registre que le pied de page
(lueur cuivre radiale + filet superieur), bouton en degrade anime.
------------------------------------------------------------ */
html:not(#_) .cta-section{
position:relative; text-align:center; padding:36px 20px;
border-radius:18px; overflow:hidden;
background:
radial-gradient(120% 100% at 50% 0%, rgba(201,121,60,.14), transparent 65%),
linear-gradient(180deg, var(--dfs-aubergine-800), var(--dfs-aubergine-950));
border:1px solid rgba(201,121,60,.25);
}
html:not(#_) .cta-section::before{
content:""; position:absolute; inset:0 0 auto 0; height:2px;
background:linear-gradient(90deg, transparent, var(--dfs-copper-light), transparent);
}
html:not(#_) .cta-section h2{ color:var(--dfs-cream); font-size:1.5rem; margin-bottom:8px; }
html:not(#_) .cta-section p{ color:var(--dfs-mauve-muted); margin-bottom:18px; }
html:not(#_) .cta-section .btn.btn-primary.btn-lg{
display:inline-block; padding:14px 32px; border-radius:999px;
color:var(--dfs-aubergine-950); font-weight:800; letter-spacing:.05em; text-transform:uppercase;
background:linear-gradient(100deg, var(--dfs-copper-dark), var(--dfs-copper-light), var(--dfs-copper) 80%);
background-size:220% 100%; border:none; box-shadow:0 8px 22px rgba(201,121,60,.35);
transition:transform .2s ease, box-shadow .2s ease;
animation:dfsShimmer 6s linear infinite;
}
html:not(#_) .cta-section .btn.btn-primary.btn-lg:hover{
transform:translateY(-2px); box-shadow:0 12px 28px rgba(201,121,60,.45);
}
/* ------------------------------------------------------------
8. FAQ / accordeon - meme repere visuel que la nav (filet cuivre
qui se deploie quand l'entree est ouverte)
------------------------------------------------------------ */
html:not(#_) .info-duo-title{
color:var(--dfs-copper-light); font-size:1.25rem; letter-spacing:.02em;
padding-bottom:10px; border-bottom:1px solid rgba(201,121,60,.28); margin-bottom:14px;
}
html:not(#_) .accordion{ display:flex; flex-direction:column; gap:10px; }
html:not(#_) .accordion-item{
position:relative; background:rgba(34,16,48,.55); border:1px solid rgba(201,121,60,.2);
border-radius:12px; padding:2px 16px;
transition:border-color .2s ease, background-color .2s ease;
}
html:not(#_) .accordion-item::before{
content:""; position:absolute; left:0; top:10px; bottom:10px; width:3px; border-radius:3px;
background:linear-gradient(180deg, var(--dfs-copper-light), var(--dfs-copper-dark));
transform:scaleY(0); transform-origin:center; transition:transform .25s ease;
}
html:not(#_) .accordion-item[open]{ border-color:rgba(201,121,60,.4); background:rgba(52,26,68,.5); }
html:not(#_) .accordion-item[open]::before{ transform:scaleY(1); }
html:not(#_) .accordion-header{ color:var(--dfs-cream); padding:14px 4px; cursor:pointer; list-style:none; }
html:not(#_) .accordion-header::-webkit-details-marker{ display:none; }
html:not(#_) .accordion-q{ font-size:13.5px; font-weight:600; letter-spacing:.01em; }
html:not(#_) .accordion-body{ color:var(--dfs-mauve-muted); font-size:13px; padding:0 4px 14px; }
/* ------------------------------------------------------------
9. Bouton "retour en haut" - medaillon cuivre, echo du logo
------------------------------------------------------------ */
html:not(#_) .back-to-top{
background:linear-gradient(135deg, var(--dfs-copper-light), var(--dfs-copper) 60%, var(--dfs-copper-dark));
color:var(--dfs-aubergine-950); border:2px solid rgba(240,180,121,.5);
border-radius:50%;
box-shadow:0 6px 18px rgba(9,4,12,.5), 0 0 0 4px rgba(201,121,60,.12);
}
html:not(#_) .back-to-top:hover{ box-shadow:0 8px 22px rgba(9,4,12,.6), 0 0 0 6px rgba(201,121,60,.2); }
/* ------------------------------------------------------------
10. Pop-up profil (#profileModal) - cadre et boutons seulement :
couleurs, bordures, rayons, ombres. Jamais display/position/
transform/overflow ici.
------------------------------------------------------------ */
html:not(#_) #profileModal .modal-content{
background:linear-gradient(165deg, var(--dfs-aubergine-800), var(--dfs-aubergine-950) 75%);
border:1px solid rgba(201,121,60,.3); border-radius:20px;
box-shadow:0 20px 60px rgba(5,2,8,.6), 0 0 0 1px rgba(201,121,60,.12) inset;
}
html:not(#_) #profileModal .modal-close{
background:rgba(23,11,29,.75); color:var(--dfs-copper-light);
border:1px solid rgba(201,121,60,.4); border-radius:50%;
}
html:not(#_) #profileModal .modal-nav{
background:rgba(23,11,29,.7); color:var(--dfs-copper-light);
border:1px solid rgba(201,121,60,.4); border-radius:50%;
}
html:not(#_) #profileModal .modal-dot{ background:rgba(205,184,214,.35); border:none; border-radius:50%; }
html:not(#_) #profileModal .modal-dot.active{ background:var(--dfs-copper-light); }
html:not(#_) #profileModal .modal-cta-overlay{
background:linear-gradient(180deg, rgba(23,11,29,0), rgba(23,11,29,.9));
}
html:not(#_) #profileModal .btn-cta-overlay{
background:linear-gradient(100deg, var(--dfs-copper-dark), var(--dfs-copper-light));
color:var(--dfs-aubergine-950); border:none; border-radius:999px; font-weight:700;
}
html:not(#_) #profileModal .modal-name{ color:var(--dfs-cream); }
html:not(#_) #profileModal .modal-meta{ color:var(--dfs-copper-light); }
html:not(#_) #profileModal .modal-bio{ color:var(--dfs-mauve-muted); }
html:not(#_) #profileModal .modal-favori{
color:var(--dfs-copper-light); border:1px solid rgba(201,121,60,.4); border-radius:50%;
background:rgba(23,11,29,.6);
}
html:not(#_) #profileModal .modal-action-primary{
background:linear-gradient(100deg, var(--dfs-copper-dark), var(--dfs-copper-light), var(--dfs-copper) 80%);
color:var(--dfs-aubergine-950); border:none; border-radius:999px; font-weight:800;
box-shadow:0 8px 22px rgba(201,121,60,.35);
}
html:not(#_) #profileModal .modal-tags span{
background:rgba(201,121,60,.14); color:var(--dfs-copper-light);
border:1px solid rgba(201,121,60,.3); border-radius:999px; padding:4px 10px; font-size:11.5px;
}
/* ------------------------------------------------------------
11. Pop-up inscription / connexion et age gate - couleurs, bordures,
rayons et ombres seulement. Boutons partages .btn-primary/.btn-outline.
------------------------------------------------------------ */
html:not(#_) .popup-overlay{ background:rgba(10,5,14,.72); }
html:not(#_) .popup-card{
background:linear-gradient(165deg, var(--dfs-aubergine-800), var(--dfs-aubergine-950) 80%);
border:1px solid rgba(201,121,60,.3); border-radius:20px;
box-shadow:0 20px 50px rgba(5,2,8,.55);
}
html:not(#_) .popup-close{
color:var(--dfs-copper-light); border:1px solid rgba(201,121,60,.4); border-radius:50%;
background:rgba(23,11,29,.6);
}
html:not(#_) .popup-icon{
color:var(--dfs-copper-light); background:rgba(201,121,60,.12);
border:1px solid rgba(201,121,60,.35); border-radius:50%;
}
html:not(#_) .popup-icon-login{ background:rgba(201,121,60,.1); }
html:not(#_) .popup-title{ color:var(--dfs-cream); }
html:not(#_) .popup-desc{ color:var(--dfs-mauve-muted); }
html:not(#_) .popup-alert{ border:1px solid rgba(201,121,60,.4); border-radius:10px; color:var(--dfs-copper-light); }
html:not(#_) .popup-footer{ color:var(--dfs-mauve-muted); border-top:1px solid rgba(201,121,60,.18); }
html:not(#_) .popup-footer a{ color:var(--dfs-copper-light); }
html:not(#_) .age-gate{ background:rgba(10,5,14,.82); }
html:not(#_) .age-gate-modal{
background:linear-gradient(165deg, var(--dfs-aubergine-800), var(--dfs-aubergine-950) 80%);
border:1px solid rgba(201,121,60,.3); border-radius:20px;
box-shadow:0 20px 50px rgba(5,2,8,.55);
}
html:not(#_) .age-gate-modal h2{ color:var(--dfs-copper-light); }
html:not(#_) .age-gate-lead{ color:var(--dfs-cream); }
html:not(#_) .age-gate-body, html:not(#_) .age-gate-actions, html:not(#_) .age-gate-footnote{ color:var(--dfs-mauve-muted); }
html:not(#_) .age-gate-link{ color:var(--dfs-copper-light); }
html:not(#_) .btn.btn-primary{
background:linear-gradient(100deg, var(--dfs-copper-dark), var(--dfs-copper-light), var(--dfs-copper) 80%);
color:var(--dfs-aubergine-950); border:none; border-radius:999px; font-weight:800;
}
html:not(#_) .btn.btn-outline{
background:transparent; color:var(--dfs-mauve-muted);
border:1px solid rgba(201,121,60,.4); border-radius:999px;
}
html:not(#_) .btn.btn-outline:hover{ color:var(--dfs-cream); border-color:rgba(201,121,60,.7); }
/* ------------------------------------------------------------
Confort de lecture - animations coupees si demande
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
html:not(#_) .cta-section .btn.btn-primary.btn-lg{ animation:none !important; background-position:0 0; }
html:not(#_) .profile-card, html:not(#_) .accordion-item, html:not(#_) .accordion-item::before, html:not(#_) .filter-btn, html:not(#_) .pagination-link, html:not(#_) .back-to-top, html:not(#_) .popup-close, html:not(#_) .btn.btn-outline{ transition:none !important; }
}
/* ------------------------------------------------------------
12. Menu mobile (tiroir) - burger de la barre haute, calque et
sidebar reprise en plein ecran sous 768px. Couleurs, tailles de
police et cibles tactiles seulement : le mecanisme (display /
position / transform / overflow des regles :checked) n'est pas
touche, aucune propriete de ce type n'est redeclaree ici.
------------------------------------------------------------ */
@media (max-width: 768px){
/* Burger sur la barre haute - trait creme, lueur cuivre au clic */
html:not(#_) .ds-burger{
color:var(--dfs-cream);
transition:color .2s ease, background-color .2s ease;
}
html:not(#_) .ds-burger:hover, html:not(#_) .ds-burger:focus-visible{
color:var(--dfs-copper-light); background:rgba(201,121,60,.16);
}
/* Calque derriere le tiroir - meme registre que les autres voiles (popup, age gate) */
html:not(#_) .ds-menu-overlay{ background:rgba(10,5,14,.75); }
/* Fermeture du tiroir - meme facture que .modal-close / .popup-close */
html:not(#_) .ds-menu-close{
background:rgba(23,11,29,.78); color:var(--dfs-copper-light);
border:1px solid rgba(201,121,60,.45);
box-shadow:0 4px 14px rgba(9,4,12,.4);
transition:background-color .2s ease, color .2s ease;
}
html:not(#_) .ds-menu-close:hover, html:not(#_) .ds-menu-close:focus-visible{
background:rgba(201,121,60,.22); color:var(--dfs-cream);
}
/* Tiroir - une lueur cuivre en plus du fond deja pose sur .sidebar (section 1) */
html:not(#_) body:has(#ds-menu:checked) aside.sidebar{
box-shadow:10px 0 42px rgba(5,2,8,.6), 0 0 0 1px rgba(201,121,60,.16) inset;
}
/* Cibles tactiles agrandies (>=40px) et lisibilite a 340px pour tout le contenu repris */
html:not(#_) body:has(#ds-menu:checked) aside.sidebar .sb-link{
min-height:44px; padding:12px 14px 12px 16px; font-size:14.5px;
}
html:not(#_) body:has(#ds-menu:checked) aside.sidebar .sb-link:active{ background:rgba(201,121,60,.2); }
html:not(#_) body:has(#ds-menu:checked) aside.sidebar .sb-map-quick-link{ min-height:40px; font-size:12.5px; }
html:not(#_) body:has(#ds-menu:checked) aside.sidebar .sb-section-title{ font-size:11.5px; }
html:not(#_) body:has(#ds-menu:checked) aside.sidebar .sb-silo-region{ min-height:40px; font-size:13.5px; }
html:not(#_) body:has(#ds-menu:checked) aside.sidebar .sb-silo-villes{ margin-left:14px; }
html:not(#_) body:has(#ds-menu:checked) aside.sidebar .sb-silo-ville{
min-height:38px; display:flex; align-items:center; font-size:13px;
}
/* Top villes - non habille en section 1 (absent du desktop) : complete pour le tiroir */
html:not(#_) body:has(#ds-menu:checked) aside.sidebar .sb-top-item{
display:flex; align-items:center; gap:8px; min-height:38px;
color:var(--dfs-mauve-muted); border-radius:8px; padding:5px 8px; font-size:13px;
transition:color .2s ease, background-color .2s ease;
}
html:not(#_) body:has(#ds-menu:checked) aside.sidebar .sb-top-item:hover, html:not(#_) body:has(#ds-menu:checked) aside.sidebar .sb-top-item:active{
color:var(--dfs-copper-light); background:rgba(201,121,60,.1);
}
html:not(#_) body:has(#ds-menu:checked) aside.sidebar .sb-top-item .sb-ico{ color:var(--dfs-copper); }
/* Bouton d'inscription - seul lien contraste du tiroir, meme degrade que les CTA du site */
html:not(#_) body:has(#ds-menu:checked) aside.sidebar .sb-link[href="/register"]{
justify-content:center; margin:8px 0 2px; border-radius:999px;
color:var(--dfs-aubergine-950); font-weight:800; letter-spacing:.04em;
background:linear-gradient(100deg, var(--dfs-copper-dark), var(--dfs-copper-light), var(--dfs-copper) 80%);
box-shadow:0 6px 16px rgba(201,121,60,.35);
}
html:not(#_) body:has(#ds-menu:checked) aside.sidebar .sb-link[href="/register"]:hover, html:not(#_) body:has(#ds-menu:checked) aside.sidebar .sb-link[href="/register"]:active{
color:var(--dfs-aubergine-950); background:linear-gradient(100deg, var(--dfs-copper-light), var(--dfs-copper) 60%, var(--dfs-copper-dark));
}
html:not(#_) body:has(#ds-menu:checked) aside.sidebar .sb-link[href="/register"] .sb-ico{
background:rgba(23,11,29,.18);
}
html:not(#_) body:has(#ds-menu:checked) aside.sidebar .sb-link[href="/register"]::before{ display:none; }
}
@media (prefers-reduced-motion: reduce){
html:not(#_) .ds-burger, html:not(#_) .ds-menu-close, html:not(#_) .sb-top-item{ transition:none !important; }
}
/* 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; }
}
@media (prefers-reduced-motion: reduce){html:not(#_) .sidebar-inner{animation:none !important;transition:none !important;}}
/* __END_DESIGN_SITE__ */