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

/* gay-rheinland-pfalz.de — Next, cta-faq, chips. REGISTRE « TÔLE CHAUDE » : ivoire #f6f1e9 + orange du favicon
   #ef6c00 + encre #211c19. Formes : COIN COUPÉ 8 px (plaques 4 coins, cartouches 2 coins), OMBRE NETTE (plaque orange
   translucide décalée de 5 px, sans flou), PLI (bande orange 4 px en tête du header / footer / pop-ups, filet court
   sous les titres). Composition : header ivoire, marque en cartouche coupé à gauche, nav à droite ; badge d'âge en bas
   à gauche ; CTA = carte centrée à lueur ; footer encre, carte ivoire centrée ; burger orange ; tiroir ivoire.
   ⚠ Pas de contexte d'empilement sur les sections (la pop-up profil vit DANS la section profils). */

/* ---------- 1. palette + variables du gabarit (émis avant le :root inline) */
html:root {
--t-o: #ef6c00;
--t-ot: #a84a00;
--t-iv: #f6f1e9;
--t-iv2: #fffdf9;
--t-iv3: #ede4d6;
--t-ink: #211c19;
--t-inkm: #5c534c;
--t-line: rgba(33, 28, 25, .14);
--t-sh: #f5d9bf; --t-shc: #fce3cc;
--t-shd: #cecbc8;
--t-fo: #644224;
--c: 6px; --sz: 50.5% 50.5% no-repeat;
--t-p4-iv2: linear-gradient(135deg, transparent var(--c), var(--t-iv2) 0) top left / var(--sz), linear-gradient(225deg, transparent var(--c), var(--t-iv2) 0) top right / var(--sz), linear-gradient(315deg, transparent var(--c), var(--t-iv2) 0) bottom right / var(--sz), linear-gradient(45deg, transparent var(--c), var(--t-iv2) 0) bottom left / var(--sz);
--t-p4-sh: linear-gradient(135deg, transparent var(--c), var(--t-sh) 0) top left / var(--sz), linear-gradient(225deg, transparent var(--c), var(--t-sh) 0) top right / var(--sz), linear-gradient(315deg, transparent var(--c), var(--t-sh) 0) bottom right / var(--sz), linear-gradient(45deg, transparent var(--c), var(--t-sh) 0) bottom left / var(--sz);
--t-p4-iv: linear-gradient(135deg, transparent var(--c), var(--t-iv) 0) top left / var(--sz), linear-gradient(225deg, transparent var(--c), var(--t-iv) 0) top right / var(--sz), linear-gradient(315deg, transparent var(--c), var(--t-iv) 0) bottom right / var(--sz), linear-gradient(45deg, transparent var(--c), var(--t-iv) 0) bottom left / var(--sz);
--t-p4-shc: linear-gradient(135deg, transparent var(--c), var(--t-shc) 0) top left / var(--sz), linear-gradient(225deg, transparent var(--c), var(--t-shc) 0) top right / var(--sz), linear-gradient(315deg, transparent var(--c), var(--t-shc) 0) bottom right / var(--sz), linear-gradient(45deg, transparent var(--c), var(--t-shc) 0) bottom left / var(--sz);
--t-p2-o: linear-gradient(135deg, transparent var(--c), var(--t-o) 0) top left / var(--sz), linear-gradient(315deg, transparent var(--c), var(--t-o) 0) bottom right / var(--sz), linear-gradient(var(--t-o), var(--t-o)) top right / var(--sz), linear-gradient(var(--t-o), var(--t-o)) bottom left / var(--sz);
--t-p2-iv2: linear-gradient(135deg, transparent var(--c), var(--t-iv2) 0) top left / var(--sz), linear-gradient(315deg, transparent var(--c), var(--t-iv2) 0) bottom right / var(--sz), linear-gradient(var(--t-iv2), var(--t-iv2)) top right / var(--sz), linear-gradient(var(--t-iv2), var(--t-iv2)) bottom left / var(--sz);
--t-p2-shd: linear-gradient(135deg, transparent var(--c), var(--t-shd) 0) top left / var(--sz), linear-gradient(315deg, transparent var(--c), var(--t-shd) 0) bottom right / var(--sz), linear-gradient(var(--t-shd), var(--t-shd)) top right / var(--sz), linear-gradient(var(--t-shd), var(--t-shd)) bottom left / var(--sz);
--t-p2-fo: linear-gradient(135deg, transparent var(--c), var(--t-fo) 0) top left / var(--sz), linear-gradient(315deg, transparent var(--c), var(--t-fo) 0) bottom right / var(--sz), linear-gradient(var(--t-fo), var(--t-fo)) top right / var(--sz), linear-gradient(var(--t-fo), var(--t-fo)) bottom left / var(--sz);
--t-cut2: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
--t-cut4: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
--text: var(--t-ink); --text-muted: var(--t-inkm); --border: var(--t-line);
--bg: var(--t-iv); --bg-alt: var(--t-iv3); --bg-card: var(--t-iv2);
--primary: var(--t-o); --secondary: var(--t-o); --primary-color: var(--t-o); --secondary-color: var(--t-o);
color-scheme: light; background: var(--t-iv);
}
body.antialiased { background: transparent; color: var(--t-ink); }
main.min-h-screen.bg-white, main.min-h-screen > div.bg-gradient-to-b { background: transparent; }

/* ---------- 2. header : ivoire, pli orange, cartouche à gauche, nav à droite */
header.sticky {
background: var(--t-iv); backdrop-filter: none; border-top: 4px solid var(--t-o);
border-bottom: 1px solid var(--t-line) !important; box-shadow: 0 4px 0 var(--t-sh);
}
header.sticky .container > div.flex { height: 64px; gap: 1rem; }
header.sticky .container > div.flex > div:nth-child(1) { order: 1; flex: 0 0 auto; }
header.sticky .container > div.flex > nav { order: 2; margin-left: auto; flex: 0 1 auto; min-width: 0; gap: .5rem; }
header.sticky .container > div.flex > div:nth-child(4) { order: 3; flex: 0 0 auto; gap: .5rem; }
header.sticky a.font-bold[href="/"] {
display: inline-block; color: var(--t-ink) !important; background: var(--t-p2-o); padding: .5rem 1.1rem;
font-size: 1.15rem; font-weight: 700; letter-spacing: .01em; line-height: 1.2; transition: translate .2s ease;
}
header.sticky a.font-bold[href="/"]:hover { translate: 0 -1px; }
header.sticky nav > div > button {
display: block; color: var(--t-ink); font-weight: 600; padding: .5rem .6rem; border-bottom: 2px solid transparent;
max-width: min(100%, 24ch); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: border-color .2s, color .2s;
}
header.sticky nav > div > button svg { display: inline-block; vertical-align: middle; margin-left: .25rem; }
header.sticky nav > div > button:hover { color: var(--t-ot); border-bottom-color: var(--t-o); }
header.sticky .container > div.flex > nav > div { min-width: 0; flex: 0 1 auto; }
@media (max-width: 1100px) { header.sticky nav > div > button { font-size: .85rem; max-width: min(100%, 18ch); } }
header.sticky .container > div.flex > div:nth-child(4) button {
width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0;
color: var(--t-ink); background: var(--t-iv3); clip-path: var(--t-cut2); transition: background-color .2s;
}
header.sticky .container > div.flex > div:nth-child(4) button:hover { background: var(--t-o); color: var(--t-ink); }
header.sticky nav div.absolute.rounded-xl {
background: var(--t-iv2); border: 1px solid var(--t-line); border-radius: 0; box-shadow: 5px 5px 0 var(--t-sh);
}
header.sticky nav div.absolute span, header.sticky nav div.absolute a { color: var(--t-ink); }
header.sticky nav div.absolute div.rounded-lg:hover { background: var(--t-iv3); }
header.sticky nav div.absolute [style*="color"] { color: var(--t-ot) !important; }
header.sticky div.absolute.whitespace-nowrap.text-white[style] { background: var(--t-o) !important; color: var(--t-ink) !important; border-radius: 0 !important; font-weight: 700; box-shadow: 3px 3px 0 var(--t-shd); }
header.sticky div.absolute.whitespace-nowrap.text-white[style] > div.rotate-45 { background: var(--t-o) !important; }
@media (max-width: 767px) {
header.sticky .container > div.flex { height: 60px; }
header.sticky .md\:hidden > button:first-child { color: var(--t-ink); }
header.sticky a.font-bold[href="/"] { padding: .35rem .7rem; font-size: 1rem !important; }
header.sticky .md\:hidden > button:last-child { color: var(--t-ink); background: var(--t-iv3); clip-path: var(--t-cut2); min-height: 40px; min-width: 40px; padding: .4rem .6rem; font-weight: 700; }
header.sticky .md\:hidden > button:last-child span { color: var(--t-ink); }
}

/* ---------- 3. menu mobile Next (socle recoloré) */
@media (max-width: 767px) {
.ds-mburger { background: var(--t-o); color: var(--t-ink); border-radius: 0; clip-path: var(--t-cut2); box-shadow: none; }
.ds-mburger span { background: var(--t-ink); height: 2.5px; }
.ds-moverlay { background: rgba(33, 28, 25, .55); }
.ds-mdrawer { background: var(--t-iv); color: var(--t-ink); box-shadow: 8px 0 0 var(--t-sh); border-right: 1px solid var(--t-line); }
.ds-mhead { border-bottom: 1px solid var(--t-line); border-top: 4px solid var(--t-o); background: var(--t-iv2); }
.ds-mbrand { color: var(--t-ink); font-weight: 700; }
.ds-mclose { background: var(--t-iv3); color: var(--t-ink); border-radius: 0; clip-path: var(--t-cut2); }
.ds-msec-t { color: var(--t-ot); opacity: 1; font-weight: 700; }
.ds-mlink { background: var(--t-iv2); border: 1px solid var(--t-line); color: var(--t-ink); min-height: 40px; display: inline-flex; align-items: center; border-radius: 0; clip-path: var(--t-cut2); padding: 6px 14px; }
.ds-mlink:active { background: var(--t-iv3); }
.ds-mnav .ds-mlink { background: var(--t-iv3); border-color: rgba(239, 108, 0, .45); }
.ds-mcta { background: var(--t-o); color: var(--t-ink); border-radius: 0; clip-path: var(--t-cut2); font-weight: 800; }
}

/* ---------- 4. footer : encre, carte ivoire centrée */
footer.border-t { background: var(--t-ink); border-top: 4px solid var(--t-o) !important; padding: 2.75rem 1rem 2.25rem; }
footer.border-t > div.container { position: relative; isolation: isolate; background: transparent; color: var(--t-ink); padding: 2.25rem 1.75rem 1.5rem; max-width: 1080px; }
footer.border-t > div.container::before, footer.border-t > div.container::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
footer.border-t > div.container::before { background: var(--t-p2-fo); translate: 6px 6px; }
footer.border-t > div.container::after { background: var(--t-p2-iv2); }
footer.border-t h3.font-semibold { color: var(--t-ink) !important; }
footer.border-t div.lg\:col-span-1 h3.font-semibold { font-size: 1.2rem; font-weight: 700; display: inline-block; background: var(--t-p2-o); padding: .3rem .8rem; }
footer.border-t div:not(.lg\:col-span-1) > h3.font-semibold { color: var(--t-inkm) !important; font-size: .74rem; letter-spacing: .1em; }
footer.border-t p, footer.border-t div.lg\:col-span-1 p { color: var(--t-inkm); }
footer.border-t a { color: var(--t-inkm); transition: color .2s; }
footer.border-t ul.space-y-2\.5 li a { color: var(--t-ink); padding: .15rem 0; border-bottom: 2px solid transparent; }
footer.border-t a:hover, footer.border-t ul.space-y-2\.5 li a:hover { color: var(--t-ot); border-bottom-color: var(--t-o); }
footer.border-t div.border-t.border-zinc-200 { border-top: 1px solid var(--t-line); }
footer.border-t div.border-t.border-zinc-200 p, footer.border-t div.border-t.border-zinc-200 a { color: var(--t-inkm); }
footer.border-t div.border-t.border-zinc-200 a.underline { color: var(--t-ink); }

/* ---------- 5. recette Next · cta-faq (telle quelle, app/design_recettes_v3.css) */
@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; }
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; }
}

/* ---------- 6. zones */
nav[aria-label^="Fil"] { background: var(--t-iv3); border-bottom: 1px solid var(--t-line); }
nav[aria-label^="Fil"] a { color: var(--t-inkm); }
nav[aria-label^="Fil"] a:hover { color: var(--t-ot); }
nav[aria-label^="Fil"] span, nav[aria-label^="Fil"] li.text-zinc-400 { color: var(--t-ink); }
div.container > header.text-center, div.container > header.mb-12 { padding: 1rem 0 .5rem; }
div.container > header.text-center h1, div.container > header.mb-12 h1 { color: var(--t-ink); font-weight: 700; letter-spacing: -.01em; }
div.container > header.text-center h1::after, div.container > header.mb-12 h1::after { content: ""; display: block; width: 64px; height: 6px; margin: 1rem auto 0; background: var(--t-o); clip-path: var(--t-cut2); }
div.container > header.text-center div.text-xl, div.container > header.text-center div.leading-relaxed { color: var(--t-inkm); }
div.container > header.mb-12 p.text-3xl { font-size: 1.1rem; letter-spacing: .1em; text-transform: uppercase; color: var(--t-ot); }
main.space-y-12 [class*="text-zinc-9"], main.space-y-12 [class*="text-zinc-8"], div.space-y-8 [class*="text-zinc-9"], div.space-y-8 [class*="text-zinc-8"] { color: var(--t-ink); }
main.space-y-12 [class*="text-zinc-7"], main.space-y-12 [class*="text-zinc-6"], main.space-y-12 [class*="text-zinc-5"], main.space-y-12 [class*="text-zinc-4"],
div.space-y-8 [class*="text-zinc-7"], div.space-y-8 [class*="text-zinc-6"], div.space-y-8 [class*="text-zinc-5"] { color: var(--t-inkm); }
main.space-y-12 [class*="bg-zinc-"], div.space-y-8 [class*="bg-zinc-"] { background-color: var(--t-iv3); }
main.space-y-12 > section.rounded-2xl, main.space-y-12 > div.rounded-2xl.mb-8, div.space-y-8 > section.rounded-2xl {
position: relative; background: var(--t-p4-iv2) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
main.space-y-12 > section.rounded-2xl::before, main.space-y-12 > div.rounded-2xl.mb-8::before, div.space-y-8 > section.rounded-2xl::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--t-p4-sh); translate: 5px 5px;
}
div.min-h-\[500px\] div.overflow-x-auto.scrollbar-hide { padding: 6px 12px 12px 6px; }
main.space-y-12 section.rounded-2xl > h2, div.space-y-8 section.rounded-2xl h2, main.space-y-12 > div.rounded-2xl.mb-8 h2, main.space-y-12 > div.rounded-2xl.mb-8 h3 { color: var(--t-ink); font-weight: 600; letter-spacing: -.01em; }
main.space-y-12 section.rounded-2xl > h2::before, div.space-y-8 section.rounded-2xl > h2::before { content: ""; display: inline-block; width: 12px; height: 12px; margin: 0 .55rem 2px 0; vertical-align: middle; background: var(--t-o); clip-path: var(--t-cut2); }
button[aria-label="Mehr anzeigen"], button[aria-label="Weniger anzeigen"] { color: var(--t-ot) !important; font-weight: 600; }
section#departements input { background: var(--t-iv3); color: var(--t-ink); border: 1px solid var(--t-line); border-radius: 0; clip-path: var(--t-cut2); }
section#departements input::placeholder { color: var(--t-inkm); opacity: .9; }
section#departements input:focus { border-color: var(--t-o); outline: 2px solid rgba(239, 108, 0, .35); }
section#departements div.absolute.rounded-xl { background: var(--t-iv2); border: 1px solid var(--t-line); border-radius: 0; box-shadow: 5px 5px 0 var(--t-sh); }
section#departements a.block.group > div { background: var(--t-iv3); color: var(--t-ink); border-radius: 0; clip-path: var(--t-cut2); border: 0; transition: background-color .2s; }
section#departements a.block.group:hover > div { background: var(--t-o); }
div.rounded-lg.shadow-sm.border:has(> div.scrollbar-hide) { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding-left: 0; padding-right: 0; }
.ds-fnext { gap: 10px; }
.ds-fnext .ds-fchip, div.rounded-lg.shadow-sm select, div.rounded-lg.shadow-sm button, div.min-h-\[500px\] button.rounded-lg.border {
background: var(--t-iv3) !important; color: var(--t-ink) !important; border: 0 !important; border-radius: 0 !important; clip-path: var(--t-cut2);
min-height: 40px; padding: 8px 16px; font-weight: 600; transition: background-color .2s, color .2s;
}
.ds-fnext .ds-fchip:hover, div.rounded-lg.shadow-sm button:hover, div.min-h-\[500px\] button.rounded-lg.border:hover { background: rgba(239, 108, 0, .32) !important; }
.ds-fnext .ds-fchip.active { background: var(--t-o) !important; color: var(--t-ink) !important; }
div.rounded-lg.shadow-sm select:focus { outline: 2px solid rgba(239, 108, 0, .45); }
div.rounded-lg.shadow-sm div.absolute, div.rounded-lg.shadow-sm div.absolute div.rounded-lg { background: var(--t-iv2); color: var(--t-ink); border-color: var(--t-line); border-radius: 0; }
div.min-h-\[500px\] span, div.min-h-\[500px\] p { color: var(--t-inkm); }
div.w-40.cursor-pointer {
position: relative; isolation: isolate; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
padding: .75rem !important; transition: translate .25s ease;
}
div.w-40.cursor-pointer::before, div.w-40.cursor-pointer::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
div.w-40.cursor-pointer::before { background: var(--t-p4-shc); translate: 5px 5px; transition: translate .25s ease; }
div.w-40.cursor-pointer::after { background: var(--t-p4-iv); }
div.w-40.cursor-pointer:hover { translate: -2px -2px; }
div.w-40.cursor-pointer:hover::before { translate: 8px 8px; }
div.w-40.cursor-pointer div.relative.mb-3 { overflow: hidden; clip-path: var(--t-cut4); }
div.w-40.cursor-pointer img { border-radius: 0; transition: transform .4s ease; }
div.w-40.cursor-pointer:hover img { transform: scale(1.04); }
div.w-40.cursor-pointer div.absolute.top-2.right-2 {
top: auto; right: auto; bottom: 0; left: 0; background: var(--t-o) !important; color: var(--t-ink) !important; border-radius: 0;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); padding: .3rem .7rem .3rem .6rem; font-weight: 700; white-space: nowrap;
}
div.w-40.cursor-pointer h3 { color: var(--t-ink); margin-top: .35rem; }
div.w-40.cursor-pointer p.truncate { color: var(--t-ot); font-weight: 600; }
div.w-40.cursor-pointer p.line-clamp-2 { color: var(--t-inkm); }
main.space-y-12 > div.rounded-2xl.mb-8 > div.w-full.rounded-lg { border-radius: 0; clip-path: var(--t-cut4); }
div.prose h2, div.prose h3, div.prose strong { color: var(--t-ink); }
div.prose, div.prose p, div.prose li, div.prose span { color: var(--t-inkm); }
div.prose a, a.text-blue-600 { color: var(--t-ot); text-decoration: underline; text-decoration-color: rgba(239, 108, 0, .5); text-underline-offset: 3px; }
div.prose a:hover, a.text-blue-600:hover { color: var(--t-ink); text-decoration-color: var(--t-o); }
section.rounded-2xl:has(> div.space-y-0) > div.space-y-0 > div { border-bottom: 2px solid var(--t-iv2); }
section.rounded-2xl:has(> div.space-y-0) button { border-radius: 0; padding-left: .6rem; padding-right: .6rem; clip-path: var(--t-cut2); transition: background-color .2s; }
section.rounded-2xl:has(> div.space-y-0) button:hover { background: rgba(239, 108, 0, .22); }
section.rounded-2xl:has(> div.space-y-0) button h3 { color: var(--t-ink); font-weight: 600; }
section.rounded-2xl:has(> div.space-y-0) button svg { color: var(--t-ot); }
section.rounded-2xl:has(> div.space-y-0) div.pb-4, section.rounded-2xl:has(> div.space-y-0) div.pb-4 p { color: var(--t-inkm); padding-left: .6rem; padding-right: .6rem; }
section.rounded-2xl.text-center { background: radial-gradient(60% 90px at 50% 0, rgba(239, 108, 0, .22), rgba(239, 108, 0, 0) 100%), var(--t-p4-iv2) !important; padding: 2.75rem 1.5rem; }
section.rounded-2xl.text-center h2 { color: var(--t-ink); font-weight: 600; font-size: 1.7rem; }
main.space-y-12 > section.rounded-2xl.text-center > h2::before { display: none; }
section.rounded-2xl.text-center button {
position: relative; isolation: isolate; background: transparent !important; color: var(--t-ink) !important; border-radius: 0; box-shadow: none;
min-height: 52px; padding: .9rem 2.3rem; font-weight: 800; font-size: 1.05rem; transition: translate .2s ease;
}
section.rounded-2xl.text-center button::before, section.rounded-2xl.text-center button::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
section.rounded-2xl.text-center button::before { background: var(--t-p2-shd); translate: 5px 5px; transition: translate .2s ease; }
section.rounded-2xl.text-center button::after { background: var(--t-p2-o); }
section.rounded-2xl.text-center button:hover { translate: -2px -2px; }
section.rounded-2xl.text-center button:hover::before { translate: 8px 8px; }
@media (min-width: 992px) {
body.design-v-cta-faq main.space-y-12:not(:has(div.space-y-0)) > section.rounded-2xl.text-center { grid-column: 1 / -1; width: 100%; max-width: 640px; justify-self: center; }
}
nav[aria-label] a[style*="border-left"] { background: var(--t-iv2); color: var(--t-ink); border-radius: 0; border-left-color: var(--t-o) !important; border-left-width: 4px !important; transition: background-color .2s; }
nav[aria-label] a[style*="border-left"]:hover { background: var(--t-iv3); color: var(--t-ink); }
section.w-full.bg-zinc-100 { background: var(--t-iv3); border-top: 1px solid var(--t-line); border-bottom: 1px solid var(--t-line); }
section.w-full.bg-zinc-100 div.absolute.left-0 { background-image: linear-gradient(90deg, var(--t-iv3), transparent); }
section.w-full.bg-zinc-100 div.absolute.right-0 { background-image: linear-gradient(270deg, var(--t-iv3), transparent); }
section.w-full.bg-zinc-100 a.rounded-full { background: var(--t-iv2); color: var(--t-ink); border-radius: 0; clip-path: var(--t-cut2); min-height: 40px; display: inline-flex; align-items: center; font-weight: 600; }
section.w-full.bg-zinc-100 a.rounded-full:hover { background: var(--t-o) !important; color: var(--t-ink) !important; }
section.border-t.border-b.py-12 { background: var(--t-iv); border-color: var(--t-line); }
section.border-t.border-b.py-12 div.w-16.h-16.rounded-full { background: var(--t-o) !important; border-radius: 0; clip-path: var(--t-cut4); }
section.border-t.border-b.py-12 div.w-16.h-16.rounded-full svg { color: var(--t-ink) !important; stroke: var(--t-ink); }
section.border-t.border-b.py-12 p { color: var(--t-ink); }
button.fixed.bottom-6.right-6 { background: var(--t-o) !important; color: var(--t-ink) !important; border-radius: 0 !important; clip-path: var(--t-cut4); box-shadow: none !important; }

/* ---------- 7. pop-ups (couleurs, bordures, rayons) */
div.inset-0.bg-zinc-900\/90 { background: rgba(33, 28, 25, .82); }
div.inset-0.bg-zinc-900\/90 > div.rounded-xl { background: var(--t-iv2); color: var(--t-ink); border: 1px solid var(--t-line); border-top: 4px solid var(--t-o); border-radius: 0; box-shadow: 6px 6px 0 var(--t-sh); }
div.inset-0.bg-zinc-900\/90 h1, div.inset-0.bg-zinc-900\/90 p.font-medium { color: var(--t-ink); }
div.inset-0.bg-zinc-900\/90 p, div.inset-0.bg-zinc-900\/90 [class*="text-zinc-"] { color: var(--t-inkm); }
div.inset-0.bg-zinc-900\/90 div.w-16.h-1 { background: var(--t-o); border-radius: 0; }
div.inset-0.bg-zinc-900\/90 div.bg-zinc-50.rounded-lg, div.inset-0.bg-zinc-900\/90 [class*="bg-zinc-"] { background: var(--t-iv3); border-radius: 0; }
div.inset-0.bg-zinc-900\/90 button.text-white { background: var(--t-p2-o) !important; color: var(--t-ink) !important; border-radius: 0; font-weight: 800; box-shadow: 4px 4px 0 var(--t-shd); }
div.inset-0.bg-zinc-900\/90 a.flex-1, div.inset-0.bg-zinc-900\/90 button.bg-zinc-100 { background: var(--t-iv3); color: var(--t-ink); border: 1px solid var(--t-line); border-radius: 0; }
div.max-w-md.rounded-2xl { background: var(--t-iv2); color: var(--t-ink); border: 1px solid var(--t-line); border-top: 4px solid var(--t-o); border-radius: 0; box-shadow: 6px 6px 0 var(--t-sh); }
div.max-w-md.rounded-2xl h1, div.max-w-md.rounded-2xl h2 { color: var(--t-ink); }
div.max-w-md.rounded-2xl p, div.max-w-md.rounded-2xl label, div.max-w-md.rounded-2xl [class*="text-zinc-"] { color: var(--t-inkm); }
div.max-w-md.rounded-2xl input:not([type="checkbox"]) { background: var(--t-iv3); color: var(--t-ink); border: 1px solid var(--t-line); border-radius: 0; }
div.max-w-md.rounded-2xl input:not([type="checkbox"]):focus { border-color: var(--t-o); outline: 2px solid rgba(239, 108, 0, .35); }
div.max-w-md.rounded-2xl button.w-full.text-white { background: var(--t-p2-o) !important; color: var(--t-ink) !important; border-radius: 0; font-weight: 800; box-shadow: 4px 4px 0 var(--t-shd); }
div.max-w-md.rounded-2xl button[style*="color"] { color: var(--t-ot) !important; font-weight: 700; }
.prelinker-embed { --primary: var(--t-o); }
.prelinker-embed .ptprelinker-input-group { border: 1px solid var(--t-line); border-radius: 0; background: var(--t-iv2); }
.prelinker-embed .ptprelinker-input-group:focus-within { border-color: var(--t-o); box-shadow: 0 0 0 3px rgba(239, 108, 0, .3); }
.prelinker-embed.prelinker-embed .ptprelinker-buttons .ptprelinker-button, .prelinker-embed.prelinker-embed .ptprelinker-buttons input[type="submit"], .prelinker-embed.prelinker-embed button[type="submit"], .prelinker-embed.prelinker-embed button.w-full {
background: var(--t-p2-o) !important; color: var(--t-ink) !important; border: 0 !important; border-radius: 0 !important; box-shadow: 4px 4px 0 var(--t-shd) !important; font-weight: 800 !important;
}
.pm-modal.pm-modal { background: var(--t-iv2); color: var(--t-ink); border: 1px solid var(--t-line); border-top: 4px solid var(--t-o); border-radius: 0; box-shadow: 6px 6px 0 var(--t-sh); }
.pm-modal h2, .pm-modal h3, .pm-modal h4, .pm-modal [class*="text-zinc-9"], .pm-modal [class*="text-zinc-8"] { color: var(--t-ink); }
.pm-modal p, .pm-modal span.font-medium, .pm-modal [class*="text-zinc-7"], .pm-modal [class*="text-zinc-6"], .pm-modal [class*="text-zinc-5"], .pm-modal [class*="text-zinc-4"] { color: var(--t-inkm); }
.pm-modal [class*="bg-zinc-"], .pm-modal .bg-white { background-color: var(--t-iv3); }
.pm-modal img { border-radius: 0; }
.pm-modal span.font-semibold { color: var(--t-ot); }
.pm-modal span.rounded-full.text-white[style] { background: var(--t-o) !important; color: var(--t-ink) !important; border-radius: 0 !important; }
.pm-modal span.rounded-full, .pm-modal span.rounded-md { background: var(--t-iv3); color: var(--t-ink); border: 1px solid var(--t-line); border-radius: 0; }
.pm-modal button.text-white[style], .pm-modal .pm-cta button, .pm-modal .pm-cta a { background: var(--t-p2-o) !important; color: var(--t-ink) !important; border: 0; border-radius: 0 !important; font-weight: 800; box-shadow: 4px 4px 0 var(--t-shd); min-height: 48px; }
.pm-modal .pm-cta { border-top: 1px solid var(--t-line); padding-top: .6rem; }
.pm-modal .pm-close { color: var(--t-ink); background: var(--t-iv3); border-radius: 0; }

/* ---------- 8. mouvement réduit */
@media (prefers-reduced-motion: reduce) {
header.sticky *, main *, main *::before, footer.border-t *, .ds-mdrawer { transition: none !important; animation: none !important; }
header.sticky a.font-bold[href="/"]:hover, div.w-40.cursor-pointer:hover, section.rounded-2xl.text-center button:hover { translate: none; }
div.w-40.cursor-pointer:hover img { transform: none; }
div.w-40.cursor-pointer:hover::before, section.rounded-2xl.text-center button:hover::before { translate: 5px 5px; }
}

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