/* __DESIGN_SITE__ */
/* socle filtres (ajouté par design_site.py) */
.ds-hide { display: none !important; }
body[data-ds-filtres="aucun"] .filters { display: none !important; }
body[data-ds-filtres="sans-genre"] .filters .filter-btn[data-filter="type"] { display: none !important; }
body[data-ds-filtres="sans-age"] .filters .filter-btn[data-filter="age"] { display: none !important; }
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; }
body[data-ds-filtres="ligne"] .filters::-webkit-scrollbar { display: none; }
body[data-ds-filtres="ligne"] .filters .filter-btn { flex: 0 0 auto; white-space: nowrap; }
.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,"); background-repeat: no-repeat; background-position: right .7em center; background-size: 12px 8px; }
.filters .ds-fgroup { display: contents; }
/* Next : barre React (div.shadow-sm > div.scrollbar-hide > .form-group > select ×2 + bouton Recherche) */
body[data-ds-filtres="aucun"] div.rounded-lg.shadow-sm:has(> div.scrollbar-hide > div.form-group > select) { display: none !important; }
body[data-ds-filtres="sans-genre"] div.scrollbar-hide > div.form-group:first-child:has(> select) { display: none !important; }
body[data-ds-filtres="sans-tri"] div.scrollbar-hide > div.form-group:nth-child(2):has(> select) { display: none !important; }
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é) */
.ds-fnext { display: flex; gap: 8px; flex-wrap: nowrap; }
.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; }
.ds-fnext .ds-fchip.active { background: var(--secondary-color, #18181b); color: #fff; border-color: transparent; }
/* socle menu mobile Next (ajouté par design_site.py) */
@media (max-width: 767px) {
.ds-mburger { position: fixed; top: 12px; left: 10px; z-index: 60; display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 40px; height: 40px; padding: 0 10px; border-radius: 10px; background: #18181b; color: #fff; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.ds-mburger span { display: block; height: 2px; border-radius: 2px; background: currentColor; }
.ds-moverlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 65; }
.ds-mdrawer { position: fixed; top: 0; left: 0; bottom: 0; width: min(86vw, 340px); z-index: 70; overflow-y: auto; background: #fff; color: #18181b; transform: translateX(-105%); transition: transform .25s ease; box-shadow: 8px 0 30px rgba(0,0,0,.3); padding-bottom: 24px; }
body:has(#ds-mcb:checked) .ds-moverlay { display: block; }
body:has(#ds-mcb:checked) .ds-mdrawer { transform: none; }
body:has(#ds-mcb:checked) { overflow: hidden; }
.ds-mhead { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid rgba(0,0,0,.1); font-weight: 700; font-size: 1.05rem; }
.ds-mclose { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; font-size: 26px; line-height: 1; cursor: pointer; background: rgba(0,0,0,.06); }
.ds-msec { padding: 12px 16px 4px; }
.ds-msec-t { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; opacity: .7; margin-bottom: 8px; }
.ds-mlinks { display: flex; flex-wrap: wrap; gap: 8px; }
.ds-mlink { display: inline-block; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(0,0,0,.15); background: rgba(0,0,0,.03); color: inherit; text-decoration: none; font-size: .9rem; line-height: 1.2; }
.ds-mnav .ds-mlink { font-weight: 600; }
.ds-mfoot { padding: 18px 16px 0; }
.ds-mcta { display: block; width: 100%; min-height: 48px; border: 0; border-radius: 12px; background: var(--secondary-color, #18181b); color: #fff; font-weight: 700; font-size: 1rem; cursor: pointer; }
}
@media (min-width: 768px) { .ds-mburger, .ds-mdrawer, .ds-moverlay { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .ds-mdrawer { transition: none; } }
/* sextreff-baden-wuerttemberg.de — registre « MOSAÏQUE » (lot 22, 19/09).
Ivoire + tesselles bleu (#0288d1 = favicon) / turquoise / or : tuiles à joints ivoire (border-image,
frises en dégradés répétés), damier fin en fond, angles 3-6 px, ombres décalées or.
Next : deux → tout est scopé sur header.sticky. */
:root{--mo-ivoire:#f6f1e4;/* fond de page,header,footer */
--mo-ivoire-2:#ece5d2;/* fond secondaire,pilules */
--mo-joint:#d9d0b8;/* joints,filets */
--mo-encre:#1f2a33;/* texte courant (12,7:1 sur ivoire) */
--mo-encre-2:#4a5560;/* texte atténué (6,5:1 sur ivoire) */
--mo-bleu:#0288d1;/* favicon:tuile bleue,boutons */
--mo-bleu-f:#01579b;/* bleu profond:titres,liens (7,2:1 sur ivoire) */
--mo-turq:#26c6da;/* tuile turquoise */
--mo-turq-f:#00796b;/* turquoise lisible en texte (5,1:1 sur ivoire) */
--mo-or:#d9a92c;/* tuile or,ombres décalées */
--mo-or-f:#8a6a12;/* or lisible en texte */
--mo-ciel:#4fc3f7;/* tuile bleu clair */
/* tapis de tuiles 4×4 (60 px,joints ivoire) — motif « bandeau de tuiles » */
--mo-tapis:url("data:image/svg+xml;utf8,");/* frise d'une rangée de tuiles (bordures « tesselles ») */
--mo-frise:repeating-linear-gradient(90deg,var(--mo-bleu) 0 14px,var(--mo-ivoire) 14px 16px,var(--mo-turq) 16px 30px,var(--mo-ivoire) 30px 32px,var(--mo-or) 32px 46px,var(--mo-ivoire) 46px 48px,var(--mo-ciel) 48px 62px,var(--mo-ivoire) 62px 64px);/* damier fin (fond de page) */
--mo-damier:linear-gradient(45deg,rgba(2,136,209,.05) 25%,transparent 25% 75%,rgba(2,136,209,.05) 75%),linear-gradient(45deg,rgba(2,136,209,.05) 25%,transparent 25% 75%,rgba(2,136,209,.05) 75%)}
/* — fond de page : ivoire en damier fin — */
body.antialiased{background-color:var(--mo-ivoire);color:var(--mo-encre)}
main.min-h-screen.bg-white{background-color:transparent;background-image:var(--mo-damier);background-size:14px 14px;background-position:0 0,7px 7px}
main.min-h-screen div.bg-gradient-to-b{background-image:none}
/* — HEADER — ivoire,bordures tesselles — */
header.sticky{background-color:var(--mo-ivoire)!important;backdrop-filter:none;border-bottom:0!important;padding-top:6px;padding-bottom:9px;box-shadow:0 2px 0 var(--mo-joint)}
header.sticky::before,header.sticky::after{content:"";position:absolute;left:0;right:0;height:6px;background-image:var(--mo-frise);background-size:64px 6px}
header.sticky::before{top:0}
header.sticky::after{bottom:0;height:8px;background-size:64px 8px;animation:mo-frise 40s linear infinite}
header.sticky .flex.h-16{height:4.4rem}
/* logo dans un cartouche à onglet de tuiles (desktop) */
header.sticky a.font-bold[href="/"]{color:var(--mo-bleu-f)!important;font-weight:800;letter-spacing:.01em;border-radius:4px}
header.sticky .md\:flex.flex-shrink-0 > a.font-bold{display:inline-flex;align-items:center;gap:12px;padding:6px 14px 6px 6px;background:#fff;border:1px solid var(--mo-joint);box-shadow:3px 3px 0 var(--mo-or);font-size:1.35rem}
header.sticky .md\:flex.flex-shrink-0 > a.font-bold::before{content:"";width:30px;height:30px;flex-shrink:0;border-radius:3px;background-image:var(--mo-tapis);background-size:30px 30px;background-position:0 0;border:1px solid var(--mo-joint)}
/* nav desktop:onglet-tuile,soulignement tesselles qui se déploie */
header.sticky nav.hidden.md\:flex{gap:1.5rem}
header.sticky nav > div{position:relative}
header.sticky nav > div > button{color:var(--mo-bleu-f)!important;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.8rem;padding:8px 2px}
header.sticky nav > div::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:5px;background-image:var(--mo-frise);background-size:64px 5px;transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
header.sticky nav > div:hover::after,header.sticky nav > div:focus-within::after{transform:scaleX(1)}
/* menu déroulant « Top 10 Bundesländer » */
header.sticky div.absolute.rounded-xl{background:var(--mo-ivoire)!important;border:1px solid var(--mo-joint)!important;border-top:6px solid var(--mo-bleu)!important;border-radius:4px!important;box-shadow:4px 4px 0 var(--mo-or)!important}
header.sticky div.absolute.rounded-xl a,header.sticky div.absolute.rounded-xl span{color:var(--mo-encre)!important}
header.sticky div.absolute.rounded-xl a.rounded-lg:hover{background:#fff!important;border-radius:3px!important}
/* actions desktop (login,recherche) : deux tuiles carrées,bleu et turquoise */
header.sticky .md\:flex.gap-4 > div > button,header.sticky .md\:flex.gap-4 > button{width:44px;height:44px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:3px;color:#fff!important;background:var(--mo-bleu);box-shadow:2px 2px 0 var(--mo-or);transition:transform .15s ease,box-shadow .15s ease}
header.sticky .md\:flex.gap-4 > button{background:var(--mo-turq-f)}
header.sticky .md\:flex.gap-4 > div > button:hover,header.sticky .md\:flex.gap-4 > button:hover,header.sticky .md\:flex.gap-4 > div > button:focus-visible,header.sticky .md\:flex.gap-4 > button:focus-visible{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--mo-or)}
/* ---------- BARRE MOBILE (< 768 px) ---------- */
header.sticky .md\:hidden a.font-bold[href="/"]{color:var(--mo-bleu-f)!important}
header.sticky .md\:hidden button[aria-label="Menü"]{width:40px;height:40px;padding:0;border-radius:4px;background:var(--mo-bleu);color:#fff!important}
/* espace membre:tuile turquoise,cible ≥ 44 px */
header.sticky .md\:hidden button:last-child{min-width:44px;min-height:44px;padding:0 .6rem;justify-content:center;border-radius:3px;background:var(--mo-turq-f);color:#fff!important;font-weight:700;box-shadow:2px 2px 0 var(--mo-or)}
/* — FIL D'ARIANE (pages ville) — */
nav.bg-zinc-50{background:var(--mo-ivoire-2)!important;border-bottom:0!important;box-shadow:inset 0 -4px 0 var(--mo-joint)}
nav.bg-zinc-50 a{color:var(--mo-bleu-f)!important;font-weight:600}
nav.bg-zinc-50 a:hover{color:var(--mo-turq-f)!important}
nav.bg-zinc-50 span[aria-current]{color:var(--mo-encre)!important}
nav.bg-zinc-50 li[aria-hidden]{color:var(--mo-or-f)!important}
/* — HERO (h1 + intro) — */
main header.text-center h1,main header.mb-12 h1{color:var(--mo-bleu-f)!important}
main header.text-center h1::after,main header.mb-12 h1::after{content:"";display:block;width:128px;height:8px;margin:14px auto 0;background-image:var(--mo-frise);background-size:64px 8px;border-radius:2px}
main header.mb-12 p.text-3xl{color:var(--mo-turq-f)!important;font-size:1.25rem;text-transform:uppercase;letter-spacing:.14em;font-weight:700}
main header.text-center p,main header.text-center div{color:var(--mo-encre-2)!important}
/* — SECTIONS « tuiles » — */
main.space-y-12 > section.rounded-2xl,main.space-y-12 > div.rounded-2xl,main.space-y-12 section.rounded-2xl,section.rounded-2xl.p-6.shadow-lg{background-color:#fff!important;border-radius:5px!important;box-shadow:0 0 0 1px var(--mo-joint),6px 6px 0 var(--mo-ivoire-2)!important}
/* titres de section:eyebrow bleu profond + trait de trois tuiles */
main.space-y-12 h2.text-3xl,main.space-y-12 h2.text-2xl,main.space-y-12 h2.text-xl{color:var(--mo-bleu-f)!important;position:relative;padding-bottom:12px}
main.space-y-12 h2.text-3xl::after,main.space-y-12 h2.text-2xl::after,main.space-y-12 h2.text-xl::after{content:"";position:absolute;left:0;bottom:0;width:62px;height:7px;border-radius:2px;background:linear-gradient(90deg,var(--mo-bleu) 0 18px,transparent 18px 22px,var(--mo-turq) 22px 40px,transparent 40px 44px,var(--mo-or) 44px 62px)}
main.space-y-12 section.text-center h2.text-3xl::after{left:50%;margin-left:-31px}
main.space-y-12 button[aria-label="Mehr anzeigen"]{color:var(--mo-turq-f)!important}
main.space-y-12 .text-zinc-700{color:var(--mo-encre)!important}
/* « Nach Bundesland » : champ à cadre de tuiles */
#departements input{border:2px solid var(--mo-joint)!important;border-radius:3px!important;background:var(--mo-ivoire)!important;color:var(--mo-encre)!important;box-shadow:inset 3px 3px 0 var(--mo-ivoire-2)}
#departements input:focus{border-color:var(--mo-bleu)!important;outline:0;box-shadow:3px 3px 0 var(--mo-or)}
#departements input::placeholder{color:var(--mo-encre-2)!important}
#departements svg{color:var(--mo-bleu)!important}
/* — TRI + PASTILLES (chips) — */
div.shadow-sm.border{background:var(--mo-ivoire)!important;border:0!important;border-radius:4px!important;box-shadow:inset 0 0 0 1px var(--mo-joint),inset 0 -5px 0 var(--mo-ivoire-2)!important}
div.shadow-sm.border select,div.shadow-sm.border button.border{background:#fff!important;color:var(--mo-encre)!important;border:2px solid var(--mo-joint)!important;border-radius:3px!important;font-weight:600;min-height:40px}
div.shadow-sm.border button.border:hover{border-color:var(--mo-bleu)!important;color:var(--mo-bleu-f)!important}
div.shadow-sm.border:not(:has(.ds-fchip)) .form-group.ds-hide{display:block!important}
.ds-fnext{gap:6px}
.ds-fnext .ds-fchip{border-radius:3px;border:2px solid var(--mo-bleu);background:#fff;color:var(--mo-bleu-f);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;min-height:40px;padding:8px 14px;box-shadow:2px 2px 0 var(--mo-ivoire-2);transition:transform .15s ease,box-shadow .15s ease}
.ds-fnext .ds-fchip:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--mo-or)}
.ds-fnext .ds-fchip.active{background:var(--mo-bleu);border-color:var(--mo-bleu);color:#fff;box-shadow:2px 2px 0 var(--mo-or)}
/* — CARTES PROFIL : tuiles à joint ivoire — */
div.flex-shrink-0.w-40{background-color:var(--mo-ivoire)!important;border:0!important;border-radius:4px!important;box-shadow:0 0 0 1px var(--mo-joint),0 0 0 3px #fff,0 0 0 4px var(--mo-joint);transition:box-shadow .18s ease}
div.flex-shrink-0.w-40:hover{box-shadow:0 0 0 1px var(--mo-bleu),0 0 0 3px #fff,0 0 0 4px var(--mo-bleu),6px 6px 0 var(--mo-or)}
div.flex-shrink-0.w-40 img{border-radius:3px!important}
div.flex-shrink-0.w-40 .absolute.top-2.right-2{background:var(--mo-or)!important;color:var(--mo-encre)!important;border-radius:3px!important;font-weight:800;box-shadow:2px 2px 0 rgba(31,42,51,.35)}
div.flex-shrink-0.w-40 h3{color:var(--mo-bleu-f)!important}
div.flex-shrink-0.w-40 p.text-zinc-500{color:var(--mo-turq-f)!important;font-weight:600}
div.flex-shrink-0.w-40 p.text-zinc-600{color:var(--mo-encre-2)!important}
/* — RECETTE « Next · cta-faq » (copiée telle quelle) — */
@media (min-width:992px){body.design-v-cta-faq main.space-y-12{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;row-gap:3rem;align-items:start}
body.design-v-cta-faq main.space-y-12 > *{grid-column:1 / -1;margin:0;order:6}
body.design-v-cta-faq main.space-y-12 > section:has(.min-h-\[500px\]){order:1}
body.design-v-cta-faq main.space-y-12 > div.rounded-2xl.mb-8{order:2}
/* wrapper div.space-y-8 (streaming) effacé : ses sections deviennent des items de la grille */
body.design-v-cta-faq main.space-y-12 > div.space-y-8{display:contents}
body.design-v-cta-faq main.space-y-12 > div.space-y-8 > *{grid-column:1 / -1;margin:0;order:6}
body.design-v-cta-faq main.space-y-12 > div.space-y-8 > section:has(.prose){order:3}
body.design-v-cta-faq main.space-y-12 > .ds-bloc{order:3}
body.design-v-cta-faq main.space-y-12 > section.text-center{order:4;grid-column:auto;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
body.design-v-cta-faq main.space-y-12 > div.space-y-8 > section:has( > div.space-y-0){order:5;grid-column:auto;align-self:stretch}}
@media (min-width:992px){body.design-v-cta-faq main.space-y-12:has( > #departements) > section.text-center{grid-column:1 / -1}}
/* — CTA de milieu de page:cadre de tuiles (border-image) — */
main.space-y-12 > section.text-center{background-color:var(--mo-ivoire)!important;border:12px solid transparent;border-image:var(--mo-tapis) 15 round;border-radius:0!important;box-shadow:none!important;background-image:var(--mo-damier);background-size:14px 14px;background-position:0 0,7px 7px}
main.space-y-12 > section.text-center h2{color:var(--mo-bleu-f)!important}
main.space-y-12 > section.text-center button{background-color:var(--mo-bleu)!important;color:#fff!important;border-radius:3px!important;min-height:48px;font-weight:800;letter-spacing:.03em;box-shadow:4px 4px 0 var(--mo-or)!important;transition:transform .15s ease,box-shadow .15s ease}
main.space-y-12 > section.text-center button:hover,main.space-y-12 > section.text-center button:focus-visible{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--mo-or)!important}
/* — FAQ : bord gauche en tuiles alternées,chevron bleu — */
div.space-y-0 > div{border:0!important;position:relative;padding-left:16px;margin-bottom:6px;background:var(--mo-ivoire);border-radius:3px}
div.space-y-0 > div::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:7px;border-radius:2px;background:var(--mo-bleu)}
div.space-y-0 > div:nth-child(3n+2)::before{background:var(--mo-turq)}
div.space-y-0 > div:nth-child(3n)::before{background:var(--mo-or)}
div.space-y-0 button{padding-right:12px!important;border-radius:3px}
div.space-y-0 button:hover{background:var(--mo-ivoire-2)!important}
div.space-y-0 button h3{color:var(--mo-encre)!important;font-weight:600}
div.space-y-0 svg{color:var(--mo-bleu)!important;flex-shrink:0}
div.space-y-0 > div > div,div.space-y-0 > div p{color:var(--mo-encre-2)!important}
section .prose,section .prose p,section .prose li{color:var(--mo-encre)!important}
section .prose h2{color:var(--mo-bleu-f)!important}
/* — TOP 20 / villes proches:liens à tuile latérale — */
nav[aria-label] a[style*="border-left"]{border-left:6px solid var(--mo-bleu)!important;background:var(--mo-ivoire);color:var(--mo-encre)!important;border-radius:3px!important;font-weight:600}
nav[aria-label] a[style*="border-left"]:nth-child(3n+2){border-left-color:var(--mo-turq)!important}
nav[aria-label] a[style*="border-left"]:nth-child(3n){border-left-color:var(--mo-or)!important}
nav[aria-label] a[style*="border-left"]:hover{background:var(--mo-bleu)!important;color:#fff!important}
/* — BANDEAU DE RÉGIONS (défilement) : tapis de tuiles — */
section.bg-zinc-100{background-color:var(--mo-ivoire-2)!important;background-image:var(--mo-tapis);background-size:60px 60px;padding-top:1.4rem!important;padding-bottom:1.4rem!important}
section.bg-zinc-100 .pointer-events-none{display:none}
section.bg-zinc-100 a.rounded-full{background:#fff!important;color:var(--mo-bleu-f)!important;border-radius:3px!important;border:2px solid var(--mo-joint);font-weight:700;box-shadow:3px 3px 0 var(--mo-or)}
section.bg-zinc-100 a.rounded-full:hover{background:var(--mo-bleu)!important;color:#fff!important;border-color:var(--mo-bleu)}
/* — BADGES DE CONFIANCE (3 colonnes) — */
section.py-12.border-b{background-color:var(--mo-ivoire)!important;border-color:var(--mo-joint)!important;background-image:var(--mo-damier);background-size:14px 14px;background-position:0 0,7px 7px}
section.py-12.border-b div.w-16.h-16{background-color:#fff!important;border-radius:4px!important;border:2px solid var(--mo-joint);box-shadow:4px 4px 0 var(--mo-turq)}
section.py-12.border-b div.w-16.h-16 svg{color:var(--mo-bleu-f)!important}
section.py-12.border-b .md\:grid-cols-3 > div:nth-child(2) div.w-16.h-16{box-shadow:4px 4px 0 var(--mo-or)}
section.py-12.border-b .md\:grid-cols-3 > div:nth-child(3) div.w-16.h-16{box-shadow:4px 4px 0 var(--mo-bleu)}
section.py-12.border-b p{color:var(--mo-encre)!important}
/* — RETOUR EN HAUT — */
button.fixed.bottom-6.right-6{background-color:var(--mo-bleu)!important;color:#fff!important;border-radius:4px!important;box-shadow:3px 3px 0 var(--mo-or)!important}
/* — FOOTER — bandeau de tuiles — */
footer.border-t{position:relative;background-color:var(--mo-ivoire)!important;border-top:0!important;color:var(--mo-encre);background-image:var(--mo-damier);background-size:14px 14px;background-position:0 0,7px 7px;padding-top:16px}
footer.border-t::before{content:"";position:absolute;top:0;left:0;right:0;height:16px;background-image:var(--mo-tapis);background-size:60px 60px;background-position:0 -1px}
/* grille : marque en bandeau, puis 3 colonnes à filets */
footer.border-t .grid{grid-template-columns:repeat(3,1fr);gap:1.5rem 2rem}
footer div.lg\:col-span-1{grid-column:1 / -1;display:grid;grid-template-columns:1fr auto;align-items:center;gap:.4rem 1.5rem;background:#fff;border:1px solid var(--mo-joint);border-radius:4px;padding:18px 22px;box-shadow:6px 6px 0 var(--mo-ivoire-2)}
footer div.lg\:col-span-1 h3{color:var(--mo-bleu-f)!important;font-size:1.45rem;margin:0;grid-row:1}
footer div.lg\:col-span-1 p.text-sm{color:var(--mo-turq-f)!important;margin:0;grid-row:2;font-weight:600}
footer div.lg\:col-span-1 p.text-xs{color:var(--mo-encre-2)!important;margin:0;grid-column:2;grid-row:1 / 3;text-align:right}
footer .grid > div:not(.lg\:col-span-1){padding-left:16px;position:relative}
footer .grid > div:not(.lg\:col-span-1)::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:7px;border-radius:2px;background:repeating-linear-gradient(180deg,var(--mo-bleu) 0 12px,var(--mo-ivoire) 12px 14px,var(--mo-turq) 14px 26px,var(--mo-ivoire) 26px 28px,var(--mo-or) 28px 40px,var(--mo-ivoire) 40px 42px)}
footer.border-t h3.text-sm{color:var(--mo-bleu-f)!important;letter-spacing:.12em}
footer.border-t ul li a{color:var(--mo-encre)!important;font-weight:500;padding:2px 6px;margin-left:-6px;border-radius:3px;transition:background-color .15s ease,color .15s ease}
footer.border-t ul li a:hover{background:var(--mo-bleu);color:#fff!important}
footer .border-zinc-200.pt-8{border-top:0!important;padding-top:14px;position:relative}
footer .border-zinc-200.pt-8::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background-image:var(--mo-frise);background-size:64px 6px;border-radius:2px}
footer .border-zinc-200.pt-8 p,footer .border-zinc-200.pt-8 a{color:var(--mo-encre-2)!important}
footer .border-zinc-200.pt-8 a{text-decoration:underline;text-decoration-color:var(--mo-or);text-underline-offset:3px}
footer .border-zinc-200.pt-8 a:hover{color:var(--mo-bleu-f)!important}
@media (max-width:767px){footer.border-t .grid{grid-template-columns:1fr 1fr}
footer div.lg\:col-span-1{grid-column:1 / -1;grid-template-columns:1fr}
footer div.lg\:col-span-1 p.text-xs{grid-column:1;grid-row:3;text-align:left}}
/* — POP-UPS : couleurs,bordures,rayons seulement — */
/* age gate */
.bg-zinc-900\/90{background-color:rgba(1,87,155,.82)!important}
.bg-zinc-900\/90 > div.bg-white{border:12px solid transparent!important;border-image:var(--mo-tapis) 15 round!important;border-radius:0!important;background:var(--mo-ivoire)!important}
.bg-zinc-900\/90 > div.bg-white h1,.bg-zinc-900\/90 > div.bg-white h2{color:var(--mo-bleu-f)!important}
.bg-zinc-900\/90 .w-16.h-1{background:var(--mo-frise)!important;background-size:64px 4px!important;width:128px!important;height:6px!important;border-radius:2px}
.bg-zinc-900\/90 .bg-zinc-50{background:#fff!important;border:1px solid var(--mo-joint)!important;border-radius:3px!important}
.bg-zinc-900\/90 button.text-white{background-color:var(--mo-bleu)!important;border-radius:3px!important;box-shadow:3px 3px 0 var(--mo-or);min-height:48px;font-weight:700}
.bg-zinc-900\/90 button.bg-zinc-100{background:#fff!important;border:2px solid var(--mo-joint)!important;border-radius:3px!important;color:var(--mo-encre)!important;min-height:48px}
/* pop-up d'inscription / connexion (prelinker) */
.z-50 > div.max-w-md{background:var(--mo-ivoire)!important;border-radius:5px!important;box-shadow:0 0 0 1px var(--mo-joint),8px 8px 0 var(--mo-or)!important}
.z-50 > div.max-w-md::before{content:"";position:absolute;top:0;left:0;right:0;height:12px;background-image:var(--mo-tapis);background-size:60px 60px}
.z-50 > div.max-w-md h2,.z-50 > div.max-w-md h1{color:var(--mo-bleu-f)!important}
.z-50 > div.max-w-md p{color:var(--mo-encre-2)!important}
.z-50 > div.max-w-md button.rounded-full{background:var(--mo-bleu)!important;border-radius:3px!important}
.z-50 > div.max-w-md button.rounded-full svg{color:#fff!important}
.z-50 > div.max-w-md input{border:2px solid var(--mo-joint)!important;border-radius:3px!important;background:#fff!important;color:var(--mo-encre)!important}
.z-50 > div.max-w-md input:focus{border-color:var(--mo-bleu)!important;box-shadow:3px 3px 0 var(--mo-or)!important}
.z-50 > div.max-w-md button.w-full{background-color:var(--mo-bleu)!important;border-radius:3px!important;box-shadow:3px 3px 0 var(--mo-or);min-height:48px}
.prelinker-embed input,.prelinker-embed select{border:2px solid var(--mo-joint);border-radius:3px;background:#fff}
.prelinker-embed button,.prelinker-embed input[type="submit"]{background:var(--mo-bleu);color:#fff;border-radius:3px;border:0;box-shadow:3px 3px 0 var(--mo-or);min-height:44px;font-weight:700}
/* fiche profil (#profileModal Next = .pm-modal) */
.pm-modal{background:var(--mo-ivoire)!important;border-radius:5px!important;box-shadow:0 0 0 1px var(--mo-joint),0 0 0 7px #fff,0 0 0 8px var(--mo-joint),12px 12px 0 var(--mo-or)!important}
.pm-modal .pm-photo{border-radius:3px!important;box-shadow:0 0 0 3px #fff,0 0 0 4px var(--mo-joint)}
.pm-modal .pm-head h2,.pm-modal .pm-head h3{color:var(--mo-bleu-f)!important}
.pm-modal .pm-head a{color:var(--mo-turq-f)!important}
.pm-v3 .pm-modal .pm-head{padding-left:36px}
.pm-modal .pm-bio h3,.pm-modal .pm-bio h4{color:var(--mo-bleu-f)!important}
.pm-modal .pm-bio p,.pm-modal .pm-bio span{color:var(--mo-encre)!important}
.pm-modal .pm-cta{border-top:0!important;padding-top:14px;position:relative}
.pm-modal .pm-cta::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background-image:var(--mo-frise);background-size:64px 5px;border-radius:2px}
.pm-modal .pm-cta button,.pm-modal .pm-photo button.text-white{background-color:var(--mo-bleu)!important;border-radius:3px!important;box-shadow:3px 3px 0 var(--mo-or)!important;font-weight:700}
.pm-modal .pm-close button{background:var(--mo-bleu-f)!important;border-radius:3px!important}
/* — MENU MOBILE (.ds-m*,socle neutre recoloré) — */
@media (max-width:767px){.ds-mburger{top:14px;background:var(--mo-bleu);color:#fff;border-radius:4px;box-shadow:2px 2px 0 var(--mo-or)}
.ds-mburger span{background:#fff}
.ds-moverlay{background:rgba(1,87,155,.55)}
.ds-mdrawer{background-color:var(--mo-ivoire);color:var(--mo-encre);background-image:var(--mo-damier);background-size:14px 14px;background-position:0 0,7px 7px;border-right:6px solid var(--mo-bleu);box-shadow:8px 0 0 rgba(1,87,155,.25)}
.ds-mhead{position:relative;background:#fff;color:var(--mo-bleu-f);border-bottom:0;box-shadow:0 6px 0 var(--mo-ivoire-2);padding:18px 16px 14px}
.ds-mhead::after{content:"";position:absolute;left:0;right:0;top:0;height:8px;background-image:var(--mo-frise);background-size:64px 8px}
.ds-mbrand{font-weight:800}
.ds-mclose{background:var(--mo-bleu);color:#fff;border-radius:3px;width:40px;height:40px;box-shadow:2px 2px 0 var(--mo-or)}
.ds-msec-t{color:var(--mo-bleu-f);opacity:1;font-weight:800;letter-spacing:.12em}
.ds-mlinks{gap:7px}
.ds-mlink{background:#fff;color:var(--mo-encre);border:1px solid var(--mo-joint);border-left:5px solid var(--mo-bleu);border-radius:3px;min-height:40px;display:inline-flex;align-items:center;padding:8px 12px;font-weight:600}
.ds-mlinks .ds-mlink:nth-child(3n+2){border-left-color:var(--mo-turq)}
.ds-mlinks .ds-mlink:nth-child(3n){border-left-color:var(--mo-or)}
.ds-mnav .ds-mlink{background:var(--mo-bleu-f);color:#fff;border-color:var(--mo-bleu-f);border-left-color:var(--mo-or);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.82rem}
.ds-mlink:hover,.ds-mlink:focus-visible,.ds-mlink:active{background:var(--mo-bleu);color:#fff;border-color:var(--mo-bleu);outline:0}
.ds-mfoot{position:relative;padding-top:20px}
.ds-mfoot::before{content:"";position:absolute;left:16px;right:16px;top:6px;height:6px;background-image:var(--mo-frise);background-size:64px 6px;border-radius:2px}
.ds-mcta{background:var(--mo-bleu);color:#fff;border-radius:3px;min-height:50px;font-weight:800;letter-spacing:.03em;box-shadow:4px 4px 0 var(--mo-or)}}
/* — ANIMATIONS — */
@keyframes mo-frise{from{background-position:0 0}
to{background-position:-640px 0}}
@media (prefers-reduced-motion:reduce){header.sticky::after{animation:none!important}
header.sticky nav > div::after,header.sticky .md\:flex.gap-4 button,div.flex-shrink-0.w-40,.ds-fnext .ds-fchip,main.space-y-12 > section.text-center button,footer.border-t ul li a{transition:none!important}}
/* garde menu Next (design_site.py) */
.ds-mdrawer, .ds-mburger, .ds-moverlay { position: fixed !important; }
/* garde-fou design_site.py (Next, 17/09) : le logo mobile est un absolu centré ; un nom de site
allemand long (« Kostenlose Sexdates in Deutschland ») débordait ou s'empilait sur 3 lignes
par-dessus les icônes (capture du 17/09). Une ligne, ellipse, place réservée aux boutons. */
@media (max-width: 767px) {
header .md\:hidden a[href="/"] {
max-width: 56% !important; white-space: nowrap !important; overflow: hidden !important;
text-overflow: ellipsis !important; font-size: clamp(.95rem, 4.4vw, 1.25rem) !important; line-height: 1.2 !important;
position: absolute !important; /* lot 21 : un `position: relative` posé pour un ::after l'avait mis dans le flux → bouton par-dessus */
}
header nav.hidden { display: none !important; }
}
/* garde-fou 18/09 : la carte des pages ville tombait en repli avec un texte FRANÇAIS (« Carte indisponible (fallback) ») —
corrigé à la source (VilleMap.tsx), masqué ici tant que le dist n'est pas reconstruit. */
main.space-y-12 > div.rounded-2xl.mb-8 > div.mb-3.text-sm.text-zinc-600 { display: none !important; }
@media (max-width: 767px) { /* lot 21 : `display:flex` posé sur nav.hidden.md:flex la faisait sortir sur mobile, par-dessus le logo */
}
/* __END_DESIGN_SITE__ */