/* __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,<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; }
.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; } }

/* site-libertin-belgique.be — « CARTE DE MEMBRE » (14/11) : indigo #3b3a80 sur gris perle chaud, encre indigo-noir.
   Formes signature : CARTE À COINS ARRONDIS gaufrée (logo, CTA, cartes du pied, pastilles d'engagement),
   BANDE SIGNATURE hachurée (sous les titres, au bas des cartes profil et des cartes du pied),
   BANDE MAGNÉTIQUE sombre (en tête de la carte d'appel, puce des titres) + chiffres en CHASSE FIXE (âge, villes).
   Composition : logo à gauche en carte de membre miniature (puce dessinée), nav centrée en capitales espacées,
   actions carrées à droite ; pied en porte-cartes : l'étui à gauche, trois cartes qui se chevauchent en éventail. */
:root{
 --in:#3b3a80;--in2:#2e2d68;--in3:#1f1e4c;--inp:#e9e8f4;--inl:#bdbbe0;
 --pe:#efebe4;--pe2:#f9f7f3;--pe3:#e5e0d6;--bo:#d8d1c4;
 --ink:#1f1e2e;--ink2:#46445a;
 --mono:ui-monospace,"Cascadia Mono","SFMono-Regular",Consolas,Menlo,monospace;
 --tit:Optima,Candara,"Segoe UI","Noto Sans",sans-serif;
 --puce:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 17'><rect x='.5' y='.5' width='21' height='16' rx='3.5' fill='%23e9e3d4' stroke='%23b9ae95'/><path d='M7.5 .5v16M14.5 .5v16M.5 6h7M.5 11h7M14.5 6h7M14.5 11h7' stroke='%23b9ae95' stroke-width='.9' fill='none'/></svg>");
 --hach:repeating-linear-gradient(-45deg,rgba(59,58,128,.2) 0 2px,rgba(59,58,128,0) 2px 6px);
 --omb:0 1px 0 #fff inset,0 24px 40px -30px rgba(31,30,76,.55),0 3px 10px -6px rgba(31,30,76,.2);
 --omc:0 14px 26px -12px rgba(59,58,128,.6);
}
html:root{--text:#1f1e2e;--text-muted:#46445a;--border:#d8d1c4;--bg:#f9f7f3;--bg-alt:#efebe4;--bg-card:#f9f7f3;--primary:#3b3a80;--secondary:#2e2d68;--secondary-color:#3b3a80;--primary-color:#3b3a80}

body.antialiased{background:var(--pe)!important;color:var(--ink)}
main.min-h-screen.bg-white{background:transparent!important}
main.min-h-screen div.bg-gradient-to-b{background-image:none!important}

/* HEADER : bandeau perle, carte de membre à gauche, nav centrée en capitales espacées, actions carrées à droite */
header.sticky{background:rgba(249,247,243,.97)!important;backdrop-filter:none!important;border-bottom:1px solid var(--bo)!important;box-shadow:0 1px 0 #fff inset,0 14px 28px -24px rgba(31,30,76,.5)}
header.sticky a.font-bold[href="/"]{position:relative;display:inline-block;font-family:var(--tit)!important;font-weight:600!important;letter-spacing:.02em;line-height:1.2;color:#fff!important;text-shadow:0 1px 0 rgba(0,0,0,.4),0 -1px 0 rgba(255,255,255,.14);background:linear-gradient(110deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 62%) 120% 0/260% 100% no-repeat,var(--puce) 14px 50%/22px 17px no-repeat,radial-gradient(circle at 92% 18%,rgba(189,187,224,.35),rgba(189,187,224,0) 45%),linear-gradient(135deg,#4c4ba3,var(--in) 55%,var(--in2))!important;border-radius:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -2px 0 rgba(0,0,0,.2),0 12px 22px -12px rgba(46,45,104,.75);transition:background-position .7s ease,transform .3s ease,box-shadow .3s ease}
header.sticky a.font-bold[href="/"]:hover{background-position:-20% 0,14px 50%,0 0,0 0!important;transform:translateY(-1px) rotate(-1deg);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -2px 0 rgba(0,0,0,.2),0 18px 28px -14px rgba(46,45,104,.8)}
@media (min-width:768px){
 header.sticky .container > .flex.h-16{height:auto;min-height:78px;padding:.85rem 0;gap:1.5rem}
 header.sticky .container > .flex.h-16 > nav.md\:flex{flex:1 1 auto;justify-content:center;gap:2rem}
 header.sticky .container > .flex.h-16 > div.md\:flex:first-child > a.font-bold{font-size:1.12rem!important;padding:.75rem 1.2rem .75rem 3.1rem}
 header.sticky nav.md\:flex > div > button,header.sticky nav.md\:flex > a{color:var(--ink)!important;text-transform:uppercase;letter-spacing:.18em;font-size:.78rem!important;font-weight:600!important;min-height:44px;padding:10px 2px;border-bottom:1px solid transparent;transition:border-color .2s,color .2s;white-space:nowrap}
 header.sticky nav.md\:flex > div > button:hover,header.sticky nav.md\:flex > div:focus-within > button{color:var(--in)!important;border-bottom-color:var(--in)}
 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:12px;background:var(--pe2);border:1px solid var(--bo);color:var(--in2)!important;box-shadow:0 1px 0 #fff inset;transition:background-color .15s,transform .15s}
 header.sticky .md\:flex.gap-4 > div > button[aria-label="Connexion"]{background:linear-gradient(160deg,#4c4ba3,var(--in2));border-color:transparent;color:#fff!important;box-shadow:var(--omc)}
 header.sticky .md\:flex.gap-4 > div > button:hover,header.sticky .md\:flex.gap-4 > button:hover{transform:translateY(-1px);background-color:var(--inp)}
}
@media (min-width:768px) and (max-width:1023px){
 header.sticky .container > .flex.h-16 > div.md\:flex:first-child > a.font-bold{font-size:.98rem!important;padding:.6rem .9rem .6rem 2.8rem}
 header.sticky .container > .flex.h-16 > nav.md\:flex{gap:1.1rem}
 header.sticky nav.md\:flex > div > button{letter-spacing:.1em}
}
header.sticky div.absolute.rounded-xl{background:var(--pe2)!important;border:1px solid var(--bo)!important;border-radius:16px!important;box-shadow:var(--omb)!important}
header.sticky div.absolute.rounded-xl a,header.sticky div.absolute.rounded-xl span,header.sticky div.absolute.rounded-xl p,header.sticky div.absolute.rounded-xl h3{color:var(--ink)!important}
header.sticky div.absolute.rounded-xl a{border-radius:10px!important}
header.sticky div.absolute.rounded-xl a:hover{background:var(--inp)!important;color:var(--in2)!important}
header.sticky input{background:#fff!important;color:var(--ink)!important;border-color:var(--bo)!important;border-radius:12px!important}

/* BARRE MOBILE : burger (ds) à gauche, carte de membre juste après dans le flux, espace membre carré indigo à droite */
@media (max-width:767px){
 header.sticky .container > .flex.h-16{min-height:68px;height:auto}
 header.sticky .md\:hidden.flex{gap:8px;align-items:center;justify-content:flex-start;min-height:68px}
 header.sticky .md\:hidden.flex a.font-bold[href="/"]{position:relative!important;left:auto!important;transform:none!important;translate:none!important;flex:0 1 auto;min-width:0;max-width:calc(100% - 112px)!important;margin:0 auto 0 4px;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal!important;overflow:hidden!important;font-size:.92rem!important;line-height:1.2!important;text-align:left;padding:6px 11px 6px 36px;border-radius:9px;background-size:260% 100%,18px 14px,100% 100%,100% 100%!important;background-position:120% 0,10px 50%,0 0,0 0!important}
 header.sticky .md\:hidden button[aria-label="Menu"]{width:44px;height:44px;flex-shrink:0;border-radius:12px;color:var(--in2)!important}
 header.sticky .md\:hidden button:last-child{flex-shrink:0;width:46px;min-width:46px;height:46px;margin-right:0;justify-content:center;border-radius:12px;background:linear-gradient(160deg,#4c4ba3,var(--in2));color:#fff!important;box-shadow:var(--omc)}
}

/* fil d'Ariane */
nav.bg-zinc-50{background:var(--pe2)!important;border-bottom:1px solid var(--bo)!important}
nav.bg-zinc-50 a{color:var(--in2)!important;font-weight:600;text-decoration:underline;text-underline-offset:3px}
nav.bg-zinc-50 a:hover{color:var(--in3)!important}
nav.bg-zinc-50 span,nav.bg-zinc-50 li{color:var(--ink2)!important}

/* EN-TÊTE DE PAGE : titre posé, bande signature hachurée dessous */
main header.text-center,main header.mb-12{padding-top:1.6rem}
main header.text-center h1,main header.mb-12 h1{color:var(--ink)!important;font-family:var(--tit);font-weight:600!important;letter-spacing:-.005em;line-height:1.14}
main header.text-center h1::after,main header.mb-12 h1::after{content:"";display:block;width:210px;max-width:70%;height:14px;margin:18px auto 0;border-radius:4px;background:var(--hach),#fff;box-shadow:inset 0 0 0 1px var(--bo),0 1px 0 #fff}
main header.sticky .text-zinc-600,main header.sticky .text-zinc-700,main header.sticky p,main header.sticky div{color:var(--ink2)!important}

/* SECTIONS : feuilles perle gaufrées, grands coins de carte */
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:var(--pe2)!important;border:1px solid var(--bo)!important;border-radius:24px!important;box-shadow:var(--omb)!important}
main.space-y-12 h2,div.space-y-8 h2,section.rounded-2xl h2{color:var(--ink)!important;font-family:var(--tit);font-weight:600!important;letter-spacing:0}
main.space-y-12 section:not(.text-center) > h2::before,main.space-y-12 section:not(.text-center) > div > h2::before,div.space-y-8 .prose h2::before{content:"";display:inline-block;width:26px;height:18px;margin-right:12px;vertical-align:-.1em;border-radius:4px;background:linear-gradient(var(--in3),var(--in3)) 0 4px/100% 4px no-repeat,linear-gradient(140deg,#4c4ba3,var(--in2));box-shadow:0 4px 8px -4px rgba(46,45,104,.6)}
main.space-y-12 .text-zinc-700,main.space-y-12 .text-zinc-600,main.space-y-12 .text-zinc-900,section.rounded-2xl .text-zinc-700,section.rounded-2xl .text-zinc-900{color:var(--ink)!important}
main.space-y-12 .text-zinc-500{color:var(--ink2)!important}
main.space-y-12 p,main.space-y-12 li{line-height:1.7}
main.space-y-12 button[aria-label="Voir plus"]{color:var(--in)!important;font-weight:700;text-decoration:underline;text-underline-offset:4px}
#departements input{background:#fff!important;border:1px solid var(--bo)!important;border-radius:12px!important;color:var(--ink)!important;min-height:46px}
#departements input:focus{border-color:var(--in)!important;box-shadow:0 0 0 3px var(--inp)!important}
#departements input::placeholder{color:var(--ink2)!important}
#departements svg{color:var(--in2)!important}
#departements a{color:var(--ink)!important}
#departements a:hover{color:var(--in)!important}
#departements button.rounded-lg,#departements a.rounded-lg{background:#fff!important;border:1px solid var(--bo)!important;border-radius:10px!important;color:var(--ink)!important}
main.space-y-12 > div.rounded-2xl.mb-8 > div.w-full.rounded-lg{border-radius:16px;border:1px solid var(--bo)}

/* tri / recherche (plein) : fente de porte-cartes, sélecteurs à coins de carte */
div.rounded-lg.shadow-sm.border{background:var(--pe)!important;border:1px solid var(--bo)!important;border-radius:16px!important;box-shadow:inset 0 2px 4px rgba(31,30,76,.08)!important}
div.rounded-lg.shadow-sm.border select,div.rounded-lg.shadow-sm.border button{background-color:#fff!important;color:var(--ink)!important;border:1px solid var(--bo)!important;border-radius:10px!important;font-weight:600;min-height:44px;box-shadow:0 1px 0 #fff inset,0 4px 10px -8px rgba(31,30,76,.5)}
div.rounded-lg.shadow-sm.border button{background:linear-gradient(160deg,#4c4ba3,var(--in2))!important;color:#fff!important;border-color:transparent!important}
div.rounded-lg.shadow-sm.border button svg{color:#fff!important}
div.rounded-lg.shadow-sm.border select:focus{border-color:var(--in)!important;box-shadow:0 0 0 3px var(--inp)!important}

/* CARTES PROFIL : carte blanche à coins arrondis, âge en chasse fixe gaufrée en bas de photo, bande signature au pied */
div.flex-shrink-0.w-40{background:var(--hach) 0 100%/100% 7px no-repeat,#fff!important;border:1px solid var(--bo)!important;border-radius:16px!important;padding-bottom:20px!important;box-shadow:0 1px 0 #fff inset,0 12px 24px -18px rgba(31,30,76,.6);transition:box-shadow .25s}
div.flex-shrink-0.w-40:hover{box-shadow:0 22px 34px -20px rgba(31,30,76,.6),0 0 0 3px var(--inp)!important}
div.flex-shrink-0.w-40 > div.relative{overflow:hidden;border-radius:11px;box-shadow:0 0 0 1px var(--bo)}
div.flex-shrink-0.w-40 > div.relative > img{border-radius:11px!important;transition:transform .6s ease!important}
div.flex-shrink-0.w-40:hover > div.relative > img{transform:scale(1.04)}
div.flex-shrink-0.w-40 .absolute.top-2.right-2{top:auto!important;bottom:8px;right:auto!important;left:8px;padding:4px 9px!important;background:rgba(31,30,76,.86)!important;color:#fff!important;border:1px solid rgba(255,255,255,.35);border-radius:6px!important;font-family:var(--mono);font-weight:700!important;font-size:.78rem!important;letter-spacing:.06em;text-shadow:0 1px 0 rgba(0,0,0,.5)}
div.flex-shrink-0.w-40 h3{color:var(--ink)!important;font-family:var(--tit);font-weight:600!important;font-size:1.05rem}
div.flex-shrink-0.w-40 p.text-zinc-500{color:var(--in2)!important;font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em;font-size:.7rem!important;font-weight:600}
div.flex-shrink-0.w-40 p.text-zinc-600{color:var(--ink2)!important;line-height:1.45}

/* RECETTE « Next · cta-faq » (app/design_recettes_v3.css, 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; }
  /* le texte et la FAQ sont dans un wrapper div.space-y-8 (streaming) : on l'efface (display: contents)
     pour que ses sections deviennent des items de la grille de <main> */
  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: center; margin-top: 2.5rem; margin-bottom: 2.5rem; 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; }
}
/* accueil (#departements, pas de FAQ à côté) : la carte d'appel reste centrée, à sa largeur de carte */
@media (min-width: 992px) {
  body.design-v-cta-faq main.space-y-12:has(> section#departements) > section.text-center { grid-column: 1 / -1; justify-self: center; width: min(100%, 620px); }
}

/* CTA : LA carte de membre — indigo gaufré, bande magnétique en tête, bande signature au pied, bouton perle en pilule */
main.space-y-12 > section.text-center{position:relative;align-items:center;overflow:hidden;background:var(--hach) 50% calc(100% - 20px)/58% 12px no-repeat,linear-gradient(var(--in3),var(--in3)) 0 28px/100% 30px no-repeat,radial-gradient(ellipse 70% 60% at 85% 10%,rgba(189,187,224,.32),rgba(189,187,224,0) 70%),linear-gradient(140deg,#4a49a0,var(--in) 50%,var(--in2))!important;border:0!important;border-radius:26px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -3px 0 rgba(0,0,0,.18),0 30px 50px -28px rgba(31,30,76,.75)!important;padding:5.2rem 2rem 3.6rem!important}
main.space-y-12 > section.text-center h2{color:#fff!important;font-family:var(--tit);font-weight:600!important;font-size:clamp(1.5rem,2.4vw,2rem)!important;line-height:1.25;text-shadow:0 1px 0 rgba(0,0,0,.35),0 -1px 0 rgba(255,255,255,.12)}
main.space-y-12 > section.text-center p{color:#ecebf7!important}
main.space-y-12 > section.text-center button{min-width:min(290px,100%);min-height:56px;font-size:1.08rem;background:linear-gradient(180deg,#fffdf9,#ebe6db)!important;color:var(--in2)!important;border-radius:999px!important;font-weight:700!important;letter-spacing:.01em;box-shadow:0 0 0 4px rgba(255,255,255,.14),0 14px 30px -8px rgba(189,187,224,.55)!important;transition:transform .2s,box-shadow .2s}
main.space-y-12 > section.text-center button:hover,main.space-y-12 > section.text-center button:focus-visible{transform:translateY(-2px);box-shadow:0 0 0 5px rgba(255,255,255,.22),0 18px 34px -8px rgba(189,187,224,.7)!important}

/* FAQ : questions séparées d'un filet gaufré, chevron dans une puce carrée */
div.space-y-0 > div{border-bottom:1px solid var(--bo)!important;box-shadow:0 1px 0 #fff}
div.space-y-0 > div:last-child{border-bottom:0!important;box-shadow:none}
div.space-y-0 button{border-radius:12px;min-height:54px;padding-left:8px!important;padding-right:8px!important}
div.space-y-0 button:hover{background:var(--inp)!important}
div.space-y-0 button h3{color:var(--ink)!important;font-weight:600!important}
div.space-y-0 svg{color:var(--in2)!important;background:var(--inp);border-radius:8px;padding:4px;width:30px;height:30px;flex-shrink:0}
div.space-y-0 > div > div,div.space-y-0 > div p,section .prose,section .prose p,section .prose li,section .prose span{color:var(--ink)!important}
section .prose a{color:var(--in)!important;text-decoration:underline;text-underline-offset:3px}
section .prose strong{color:var(--in3)!important}

/* Top 20 / villes proches : petites cartes à bande latérale */
nav[aria-label] a[style*="border-left"]{border-left:5px solid var(--in)!important;background:#fff!important;color:var(--ink)!important;border-radius:4px 12px 12px 4px!important;font-weight:600;min-height:44px;box-shadow:0 0 0 1px var(--bo);transition:background-color .15s}
nav[aria-label] a[style*="border-left"]:hover{background:var(--inp)!important;color:var(--in2)!important}
nav[aria-label] a[style*="border-left"] *{color:inherit!important}

/* défilement des provinces : pastilles-cartes sur perle soutenu */
section.bg-zinc-100{background:var(--pe3)!important;border-top:1px solid var(--bo);border-bottom:1px solid var(--bo)}
section.bg-zinc-100 .pointer-events-none{display:none}
section.bg-zinc-100 a.rounded-full{background:#fff!important;color:var(--ink)!important;border:1px solid var(--bo);border-radius:10px!important;font-weight:600;min-height:44px;display:inline-flex;align-items:center;transition:background-color .15s,border-color .15s}
section.bg-zinc-100 a.rounded-full:hover{background:var(--inp)!important;border-color:var(--in);color:var(--in2)!important}

/* engagements : trois mini-cartes indigo à bande magnétique */
section.py-12.border-b{background:var(--pe2)!important;border-color:var(--bo)!important}
section.py-12.border-b div.w-16.h-16{width:4.6rem;border-radius:12px!important;background:linear-gradient(var(--in3),var(--in3)) 0 9px/100% 7px no-repeat,linear-gradient(140deg,#4c4ba3,var(--in2))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),var(--omc)}
section.py-12.border-b div.w-16.h-16 svg{color:#fff!important;margin-top:12px}
section.py-12.border-b p{color:var(--ink)!important}

button.fixed.bottom-6.right-6{background-color:var(--in)!important;color:#fff!important;border-radius:14px!important;box-shadow:var(--omc),0 0 0 3px var(--pe2)!important}

/* PIED EN PORTE-CARTES : l'étui (carte du site) à gauche, trois cartes en éventail qui se chevauchent */
footer.border-t{background:radial-gradient(ellipse 60% 80% at 15% 0%,rgba(255,255,255,.55),rgba(255,255,255,0) 70%),var(--pe3)!important;border-top:1px solid var(--bo)!important}
footer.border-t > .container{padding-top:3.4rem}
footer.border-t .grid{align-items:start}
footer.border-t .grid > div:not(.lg\:col-span-1){position:relative;background:var(--hach) 18px calc(100% - 16px)/calc(100% - 36px) 9px no-repeat,#fff;border:1px solid var(--bo);border-radius:18px;padding:1.5rem 1.4rem 2.8rem;box-shadow:0 1px 0 #fff inset,0 22px 34px -24px rgba(31,30,76,.6);transition:transform .3s ease,box-shadow .3s ease}
footer.border-t .grid > div:nth-child(3){background:var(--hach) 18px calc(100% - 16px)/calc(100% - 36px) 9px no-repeat,linear-gradient(var(--in3),var(--in3)) 0 18px/100% 22px no-repeat,var(--inp);padding-top:3.3rem}
footer div.lg\:col-span-1 h3.font-semibold{display:inline-block;font-family:var(--tit);font-weight:600!important;font-size:1.15rem;line-height:1.25;color:#fff!important;text-shadow:0 1px 0 rgba(0,0,0,.4);padding:.75rem 1.1rem .75rem 3rem;border-radius:12px;background:var(--puce) 14px 50%/22px 17px no-repeat,linear-gradient(135deg,#4c4ba3,var(--in) 55%,var(--in2));box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -2px 0 rgba(0,0,0,.2),var(--omc)}
footer div.lg\:col-span-1 p.text-sm{color:var(--ink2)!important}
footer div.lg\:col-span-1 p.text-xs{color:var(--ink2)!important;font-family:var(--mono);font-size:.74rem;letter-spacing:.02em}
footer.border-t h3.text-sm{color:var(--in2)!important;letter-spacing:.16em;font-weight:700!important;font-size:.76rem}
footer.border-t ul li a{color:var(--ink)!important;padding:3px 0;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:text-decoration-color .15s,color .15s}
footer.border-t ul li a:hover{color:var(--in)!important;text-decoration-color:var(--in)}
footer .border-zinc-200.pt-8{border-top:1px solid var(--bo)!important}
footer .border-zinc-200.pt-8 p,footer .border-zinc-200.pt-8 a{color:var(--ink2)!important}
footer .border-zinc-200.pt-8 a{text-decoration:underline;text-underline-offset:3px}
@media (min-width:768px){
 footer.border-t .grid{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:0;row-gap:2rem}
 footer div.lg\:col-span-1{grid-column:1 / -1}
 footer.border-t .grid > div:nth-child(2){transform:rotate(-2deg);z-index:1}
 footer.border-t .grid > div:nth-child(3){margin-left:-18px;margin-top:-6px;z-index:2}
 footer.border-t .grid > div:nth-child(4){margin-left:-18px;transform:rotate(2deg);z-index:3}
 footer.border-t .grid > div:not(.lg\:col-span-1):hover{transform:translateY(-6px) rotate(0);z-index:4;box-shadow:0 1px 0 #fff inset,0 30px 40px -24px rgba(31,30,76,.65)}
}
@media (min-width:1024px){
 footer.border-t .grid{grid-template-columns:minmax(0,1.15fr) repeat(3,minmax(0,1fr))}
 footer div.lg\:col-span-1{grid-column:1;padding-right:2.4rem}
}
@media (max-width:767px){
 footer.border-t .grid{gap:0!important}
 footer div.lg\:col-span-1{margin-bottom:1.6rem}
 footer.border-t .grid > div:nth-child(2){margin-right:20px}
 footer.border-t .grid > div:nth-child(3){margin:-18px 10px 0}
 footer.border-t .grid > div:nth-child(4){margin:-18px 0 0 20px}
 main.space-y-12 > section.text-center{padding:4.6rem 1.2rem 3.2rem!important;border-radius:22px!important;background-size:80% 12px,100% 26px,100% 100%,100% 100%!important}
 main.space-y-12 > section.rounded-2xl,main.space-y-12 > div.rounded-2xl,section.rounded-2xl.p-6.shadow-lg{border-radius:20px!important}
}

/* POP-UPS : couleurs, bordures, rayons seulement */
#age-gate{background-color:rgba(31,30,46,.84)!important}
#age-gate > div.bg-white{background:linear-gradient(var(--in),var(--in)) 0 0/100% 10px no-repeat,var(--pe2)!important;border:1px solid var(--bo)!important;border-radius:22px!important}
#age-gate p.font-semibold,#age-gate p.font-medium{color:var(--ink)!important;font-family:var(--tit)}
#age-gate .w-16.h-1{background:var(--hach),#fff!important;height:10px;width:7rem;box-shadow:inset 0 0 0 1px var(--bo)}
#age-gate .bg-zinc-50{background:#fff!important;border:1px solid var(--bo)!important;border-radius:14px!important}
#age-gate p{color:var(--ink2)!important}
#age-gate #age-yes{background:linear-gradient(160deg,#4c4ba3,var(--in2))!important;color:#fff!important;border-radius:999px!important;font-weight:700;min-height:50px;box-shadow:var(--omc)}
#age-gate #age-no{background:#fff!important;color:var(--ink)!important;border-color:var(--bo)!important;border-radius:999px!important;min-height:50px}
.pm-modal{border-radius:22px!important}
.pm-modal .pm-photo,.pm-modal .pm-photo img{border-radius:14px!important}
.pm-modal .pm-cta button,.pm-modal .pm-cta a{background:linear-gradient(160deg,#4c4ba3,var(--in2))!important;color:#fff!important;border-radius:999px!important;min-height:50px;box-shadow:var(--omc)}
.pm-modal .pm-bio span.rounded-full{background:var(--inp)!important;color:var(--in2)!important}

/* MENU MOBILE (.ds-m*) : étui perle, carte de membre en tête, liens en petites cartes */
@media (max-width:767px){
 .ds-mburger{top:12px;left:10px;width:44px;height:44px;background:#fff;color:var(--in2);border-radius:12px;box-shadow:inset 0 0 0 1px var(--bo),0 6px 14px -10px rgba(31,30,76,.6)}
 .ds-mburger span{background:var(--in2)}
 .ds-moverlay{background:rgba(31,30,46,.58)}
 .ds-mdrawer{background:var(--pe2);color:var(--ink);box-shadow:8px 0 30px rgba(31,30,76,.4)}
 .ds-mhead{border-bottom:1px solid var(--bo);padding:16px;background:var(--pe)}
 .ds-mbrand{font-family:var(--tit);font-weight:600;font-size:1rem;line-height:1.2;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.4);padding:9px 12px 9px 38px;margin-right:10px;border-radius:10px;background:var(--puce) 10px 50%/19px 15px no-repeat,linear-gradient(135deg,#4c4ba3,var(--in) 55%,var(--in2));box-shadow:inset 0 1px 0 rgba(255,255,255,.25),var(--omc)}
 .ds-mclose{background:#fff;color:var(--in2);width:44px;height:44px;flex-shrink:0;border-radius:12px;box-shadow:inset 0 0 0 1px var(--bo)}
 .ds-msec{padding-top:16px}
 .ds-msec-t{color:var(--in2);opacity:1;font-weight:700;letter-spacing:.16em;font-size:.74rem}
 .ds-mlink{background:#fff;color:var(--ink);border:1px solid var(--bo);border-radius:10px;min-height:44px;display:inline-flex;align-items:center;padding:8px 14px;font-size:.95rem;font-weight:600;box-shadow:0 1px 0 #fff inset}
 .ds-mnav .ds-mlink{background:var(--inp);border-color:var(--inl);color:var(--in3)}
 .ds-mlink:hover,.ds-mlink:active,.ds-mlink:focus-visible{background:var(--inp);color:var(--in2);border-color:var(--in)}
 .ds-mcta{background:linear-gradient(160deg,#4c4ba3,var(--in) 50%,var(--in2));color:#fff;border-radius:999px;min-height:54px;font-size:1.05rem;font-weight:700;box-shadow:var(--omc)}
}

/* thème sombre du système : on garde le perle et l'encre partout */
@media (prefers-color-scheme:dark){
 main .dark\:text-zinc-50,main .dark\:text-zinc-300,main .dark\:text-zinc-400,main .dark\:text-zinc-500,header.sticky .dark\:text-zinc-300,nav.bg-zinc-50 *,section.py-12.border-b p{color:var(--ink)!important}
 main .dark\:bg-zinc-800,main .dark\:bg-zinc-900,section.dark\:bg-zinc-900,nav.bg-zinc-50{background-color:var(--pe2)!important}
 div.flex-shrink-0.w-40.dark\:bg-zinc-900{background-color:#fff!important}
 div.rounded-lg.shadow-sm.border select{background-color:#fff!important;color:var(--ink)!important}
}

@media (prefers-reduced-motion:reduce){
 header.sticky a.font-bold,header.sticky nav.md\:flex > div > button,header.sticky .md\:flex.gap-4 button,div.flex-shrink-0.w-40,div.flex-shrink-0.w-40 img,main.space-y-12 > section.text-center button,footer.border-t ul li a,footer.border-t .grid > div,nav[aria-label] a[style*="border-left"],section.bg-zinc-100 a.rounded-full{transition:none!important}
 div.flex-shrink-0.w-40:hover > div.relative > img,header.sticky a.font-bold:hover,main.space-y-12 > section.text-center button:hover,footer.border-t .grid > div:not(.lg\:col-span-1):hover{transform:none}
}

/* 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 <a> 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 */
  /* 19/09 (capture de Lucas, pop-up profil mobile) : le bouton « Registrieren… » remonté sous la photo touchait le
     titre « Bio » (bio.top == cta.bottom, toutes variantes pm-v) ; corrigé à la source (popup_skins.css / globals.css),
     posé ici pour les dists déjà construits. */
  .pm-modal .pm-cta { margin-bottom: .9rem !important; }
}
/* __END_DESIGN_SITE__ */