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

/* travestis-citas.es — habillage unique (gabarit Next, national España)
   Registre : baldosa hidráulica. Carreaux ciment à motifs (quarts de disque aux coins qui, posés côte à
   côte, dessinent des cercles ; fleur à quatre pétales au centre), cacao #6d4c41 (favicon) sur crème,
   joints fins couleur mortier. Formes signature : le CARREAU (logo, frise sous les titres, cadre des
   photos, coins du CTA), le MÉDAILLON rond (âge, cœur du CTA, icônes de confiance), le JOINT fin
   (double filet autour des blocs). Composition : logo à gauche, navigation CENTRÉE, actions à droite,
   frise de carreaux sous l'en-tête ; titres centrés posés sur trois carreaux ; footer en DAMIER de
   carreaux cacao / crème séparés par un joint. */

html:root{
  --cacao:#6d4c41;
  --cacao-hondo:#4e342e;
  --cacao-noche:#3b2620;
  --cacao-velo:#f1e6da;
  --cacao-sombra:rgba(78,52,46,.42);
  --crema:#f6eee2;
  --crema-2:#efe3d4;
  --papel:#fffaf3;
  --junta:#e0cfba;
  --tinta:#2b1e19;
  --tinta-2:#594239;
  --crema-texto:#f8eddd;
  --crema-suave:#e2d0bd;
  --primary-color:#6d4c41;
  --secondary-color:#6d4c41;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --baldosa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='%236d4c41'%3E%3Cpath d='M0 0h11A11 11 0 0 1 0 11z'/%3E%3Cpath d='M40 0v11A11 11 0 0 1 29 0z'/%3E%3Cpath d='M40 40H29a11 11 0 0 1 11-11z'/%3E%3Cpath d='M0 40V29a11 11 0 0 1 11 11z'/%3E%3Cpath d='M20 8c3 6 6 9 12 12-6 3-9 6-12 12-3-6-6-9-12-12 6-3 9-6 12-12z'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='3' fill='%23f6eee2'/%3E%3C/svg%3E");
  --baldosa-fina:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='%236d4c41' fill-opacity='.16'%3E%3Cpath d='M0 0h11A11 11 0 0 1 0 11z'/%3E%3Cpath d='M40 0v11A11 11 0 0 1 29 0z'/%3E%3Cpath d='M40 40H29a11 11 0 0 1 11-11z'/%3E%3Cpath d='M0 40V29a11 11 0 0 1 11 11z'/%3E%3Cpath d='M20 8c3 6 6 9 12 12-6 3-9 6-12 12-3-6-6-9-12-12 6-3 9-6 12-12z'/%3E%3C/g%3E%3C/svg%3E");
  --baldosa-media:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='%236d4c41' fill-opacity='.5'%3E%3Cpath d='M0 0h11A11 11 0 0 1 0 11z'/%3E%3Cpath d='M40 0v11A11 11 0 0 1 29 0z'/%3E%3Cpath d='M40 40H29a11 11 0 0 1 11-11z'/%3E%3Cpath d='M0 40V29a11 11 0 0 1 11 11z'/%3E%3Cpath d='M20 8c3 6 6 9 12 12-6 3-9 6-12 12-3-6-6-9-12-12 6-3 9-6 12-12z'/%3E%3C/g%3E%3C/svg%3E");
  --baldosa-clara:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='%23f6eee2' fill-opacity='.85'%3E%3Cpath d='M0 0h11A11 11 0 0 1 0 11z'/%3E%3Cpath d='M40 0v11A11 11 0 0 1 29 0z'/%3E%3Cpath d='M40 40H29a11 11 0 0 1 11-11z'/%3E%3Cpath d='M0 40V29a11 11 0 0 1 11 11z'/%3E%3Cpath d='M20 8c3 6 6 9 12 12-6 3-9 6-12 12-3-6-6-9-12-12 6-3 9-6 12-12z'/%3E%3C/g%3E%3C/svg%3E");
  --corazon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f8eddd' d='M12 20.5s-7.5-4.6-7.5-10.1A4.2 4.2 0 0 1 12 8a4.2 4.2 0 0 1 7.5 2.4c0 5.5-7.5 10.1-7.5 10.1z'/%3E%3C/svg%3E");
  color-scheme:light;
}
body{ background:var(--crema) !important; color:var(--tinta); }
main.min-h-screen.bg-white, main.bg-white{ background:transparent !important; }
div.bg-gradient-to-b{ background:radial-gradient(70% 360px at 50% 0%, var(--papel) 0%, var(--crema) 72%) !important; }

/* ===================== EN-TÊTE : logo à gauche, nav centrée, frise de carreaux ===================== */
header.sticky{
  background:rgba(255,250,243,.97) !important; border-bottom:0 !important;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 16px 28px -24px var(--cacao-sombra);
}
header.sticky::after{
  content:""; position:absolute; left:0; right:0; bottom:-12px; height:12px; pointer-events:none;
  background:var(--baldosa-media) 0 0/12px 12px repeat-x, var(--crema);
  border-top:1px solid var(--junta); border-bottom:1px solid var(--junta);
}
header.sticky a.font-bold[href="/"]{ color:var(--cacao) !important; font-family:var(--serif) !important; font-weight:700 !important; letter-spacing:.005em; }
@media (min-width:768px){
  header.sticky .flex.h-16{ display:grid !important; grid-template-columns:minmax(0,auto) minmax(0,1fr) auto; column-gap:1.2rem !important; height:72px !important; }
  header.sticky .flex.h-16 > div.hidden.md\:flex:first-child{ justify-self:start; min-width:0; max-width:100%; }
  header.sticky .flex.h-16 > nav{ justify-self:center; }
  @media (max-width:1099px){
    header.sticky a.font-bold[href="/"]{ font-size:1.08rem !important; gap:.5rem; }
    header.sticky a.font-bold[href="/"]::before{ width:22px; height:22px; flex-basis:22px; background-size:22px 22px; }
    header.sticky .flex.h-16 > nav{ gap:.6rem !important; }
    header.sticky nav .relative > button{ padding:.3rem .7rem .3rem .55rem; font-size:.8rem !important; }
  }
  header.sticky .flex.h-16 > div.hidden.md\:flex:last-child{ justify-self:end; gap:.55rem !important; }
  header.sticky a.font-bold[href="/"]{ font-size:1.38rem !important; display:inline-flex; align-items:center; gap:.7rem; white-space:nowrap; min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; padding:5px 4px 5px 5px; }
  header.sticky a.font-bold[href="/"]::before{
    content:""; width:30px; height:30px; flex:0 0 30px; border-radius:5px;
    background:var(--baldosa) center/30px 30px, var(--crema);
    box-shadow:0 0 0 1px var(--junta), 0 0 0 3px var(--papel), 0 0 0 4px var(--junta);
    transition:transform .5s ease;
  }
  header.sticky a.font-bold[href="/"]:hover::before{ transform:rotate(90deg); }
  header.sticky nav .relative > button{
    color:var(--cacao-hondo) !important; font-weight:600 !important; min-height:40px; padding:.35rem 1.15rem .35rem .8rem;
    border-radius:8px; border:1px solid var(--junta); background:var(--papel);
    box-shadow:0 0 0 3px var(--crema), 0 0 0 4px var(--junta), 0 10px 18px -14px var(--cacao-sombra);
    transition:background .2s, color .2s;
  }
  header.sticky nav .relative > button::before{
    content:""; width:16px; height:16px; flex:0 0 16px; margin-right:.35rem; border-radius:3px;
    background:var(--baldosa) center/16px 16px;
  }
  header.sticky nav .relative > button:hover{ background:var(--cacao); color:var(--crema-texto) !important; }
  header.sticky .flex.h-16 > div.hidden.md\:flex:last-child button{
    color:var(--cacao) !important; width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center;
    border-radius:8px; border:1px solid var(--junta); background:var(--papel);
    box-shadow:0 8px 16px -12px var(--cacao-sombra); transition:background .2s, color .2s;
  }
  header.sticky .flex.h-16 > div.hidden.md\:flex:last-child button:hover{ background:var(--cacao); color:#fff !important; }
  header.sticky div.relative.-m-\[10px\] > div.absolute.top-full{
    background:var(--cacao) !important; color:#fff !important; border-radius:8px !important; border:1px solid var(--papel) !important;
  }
}
header.sticky .absolute.bg-white, header.sticky div[class*="shadow-xl"]{
  background:var(--papel) !important; border-color:var(--junta) !important; border-radius:12px !important;
  box-shadow:0 26px 44px -26px var(--cacao-sombra) !important;
}
header.sticky .absolute a{ color:var(--tinta) !important; }
header.sticky .absolute a:hover{ color:var(--cacao) !important; background:var(--cacao-velo) !important; }
header.sticky .absolute h3, header.sticky .absolute p{ color:var(--tinta-2) !important; }

@media (max-width:767px){
  header.sticky::after{ height:9px; bottom:-9px; background:var(--baldosa-media) 0 0/9px 9px repeat-x, var(--crema); }
  header.sticky .flex.h-16{ height:64px !important; }
  header.sticky div.md\:hidden.flex > a.font-bold[href="/"]{
    position:static !important; translate:none !important; left:auto !important;
    flex:1 1 auto !important; min-width:0 !important; max-width:none !important; margin:0 .5rem 0 2.9rem !important;
    text-align:left; color:var(--cacao) !important; font-size:1.08rem !important;
    white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
  }
  header.sticky div.md\:hidden.flex > button:last-child{
    flex:0 0 auto; min-height:42px; min-width:42px; justify-content:center; padding:0 .7rem;
    border-radius:8px; color:#fff !important; background:var(--cacao);
    box-shadow:0 0 0 2px var(--papel), 0 0 0 3px var(--junta), 0 8px 16px -10px var(--cacao-sombra);
  }
  header.sticky div.md\:hidden.flex > button:last-child svg{ color:#fff; }
}

/* ===================== TITRES : centrés, posés sur trois carreaux ===================== */
main h1, div.container > header h1{ color:var(--tinta) !important; font-family:var(--serif) !important; font-weight:600 !important; letter-spacing:-.005em; }
div.container > header h1::after{
  content:""; display:block; width:69px; height:23px; margin:.9rem auto 0;
  background:var(--baldosa) 0 0/23px 23px repeat-x;
  box-shadow:0 0 0 1px var(--junta); border-radius:3px;
}
div.container > header .text-zinc-600, div.container > header .text-zinc-700, div.container > header p{ color:var(--tinta-2) !important; }
main h2{ color:var(--tinta) !important; font-family:var(--serif); font-weight:600 !important; }
main section.rounded-2xl.shadow-lg:not(.text-center),
main div.rounded-2xl.shadow-lg{
  background:var(--baldosa-media) 0 0/18px 18px repeat-x, var(--papel) !important;
  border:1px solid var(--junta) !important; border-radius:10px !important; padding-top:calc(18px + 1.3rem) !important;
  box-shadow:0 0 0 4px var(--crema), 0 0 0 5px var(--junta), 0 26px 44px -34px var(--cacao-sombra) !important;
}
main .text-zinc-600, main .text-zinc-700, main .text-zinc-500{ color:var(--tinta-2) !important; }
main .text-zinc-900, main .text-zinc-800{ color:var(--tinta) !important; }
main button[style*="color:#E35D8F"], main button[style*="color: rgb(227"]{ color:var(--cacao) !important; }
main .prose, main .prose p, main .prose li{ color:var(--tinta-2) !important; }
main .prose h2, main .prose h3, main .prose strong{ color:var(--tinta) !important; }
main .prose a, main a.text-blue-600, main a.underline{ color:var(--cacao) !important; }
main .prose ul li::marker{ color:var(--cacao); }
main input[type="text"]{ background:var(--crema) !important; color:var(--tinta) !important; border-color:var(--junta) !important; border-radius:8px !important; }
main input[type="text"]::placeholder{ color:#6b564c !important; }
nav.bg-zinc-50{ background:var(--crema-2) !important; border-color:var(--junta) !important; }
nav.bg-zinc-50 a, nav.bg-zinc-50 span{ color:var(--tinta-2) !important; }
nav.bg-zinc-50 span.font-medium{ color:var(--tinta) !important; }
nav.bg-zinc-50 a:hover{ color:var(--cacao) !important; }

/* ===================== CARTES PROFIL : photo sertie dans un carreau, âge en médaillon ===================== */
main div.flex-shrink-0.w-40{
  background:var(--papel) !important; border:1px solid var(--junta) !important; border-radius:8px !important; padding:0 0 4px !important;
  box-shadow:0 14px 26px -20px var(--cacao-sombra); transition:box-shadow .3s ease, translate .3s ease;
}
main div.flex-shrink-0.w-40:hover{ box-shadow:0 22px 34px -18px rgba(109,76,65,.55); translate:0 -2px; }
main div.flex-shrink-0.w-40 > .relative{
  padding:6px; border-radius:8px 8px 4px 4px; overflow:hidden;
  background:var(--baldosa-fina) 0 0/18px 18px, var(--crema-2);
}
main div.flex-shrink-0.w-40 img{ border-radius:3px !important; box-shadow:0 0 0 1px var(--papel); transition:transform .6s ease !important; }
main div.flex-shrink-0.w-40:hover img{ transform:scale(1.035); }
main div.flex-shrink-0.w-40 .absolute.top-2.right-2{
  top:auto !important; bottom:14px !important; left:14px !important; right:auto !important;
  min-width:34px; height:28px; padding:0 .6rem !important; display:flex; align-items:center; justify-content:center; white-space:nowrap;
  background:var(--papel) !important; color:var(--cacao-hondo) !important; border-radius:999px !important;
  font-weight:700 !important; font-size:.82rem !important; font-family:var(--serif);
  box-shadow:0 0 0 2px var(--cacao), 0 0 0 4px var(--papel), 0 8px 14px -6px rgba(59,38,32,.6);
}
main div.flex-shrink-0.w-40 h3{ color:var(--tinta) !important; font-family:var(--serif); }
main div.flex-shrink-0.w-40 p.text-zinc-500{ color:var(--cacao) !important; font-weight:600; }
main div.flex-shrink-0.w-40 p.line-clamp-2{ color:var(--tinta-2) !important; }

/* ===================== barre de tri ===================== */
main div.rounded-lg.shadow-sm{
  background:var(--papel) !important; border:1px solid var(--junta) !important; border-radius:8px !important;
  box-shadow:0 0 0 3px var(--crema), 0 0 0 4px var(--junta), 0 12px 24px -18px var(--cacao-sombra) !important;
}
main div.rounded-lg.shadow-sm select{
  border:1px solid var(--junta) !important; border-radius:8px !important; min-height:42px;
  color:var(--tinta) !important; background-color:var(--crema) !important;
}
main div.rounded-lg.shadow-sm select:focus{ border-color:var(--cacao) !important; box-shadow:0 0 0 3px var(--cacao-velo) !important; outline:none; }
main div.rounded-lg.shadow-sm button{ border-radius:8px !important; min-height:42px; }
main div.rounded-lg.shadow-sm button[style]:not(.ds-fchip), main div.rounded-lg.shadow-sm button.bg-zinc-900{
  background:var(--cacao) !important; color:#fff !important; border-color:var(--cacao) !important;
}
.ds-fnext .ds-fchip.ds-fchip{ border:1px solid var(--junta) !important; border-radius:8px !important; background:var(--papel) !important; color:var(--tinta) !important; min-height:40px; }
.ds-fnext .ds-fchip.ds-fchip.active{ background:var(--cacao) !important; color:#fff !important; border-color:var(--cacao) !important; }

/* ===================== régions, maillage, confiance ===================== */
section.bg-zinc-100{ background:var(--crema-2) !important; border:0 !important; }
section.bg-zinc-100 .bg-gradient-to-r{ background:linear-gradient(90deg,var(--crema-2),rgba(239,227,212,0)) !important; }
section.bg-zinc-100 .bg-gradient-to-l{ background:linear-gradient(270deg,var(--crema-2),rgba(239,227,212,0)) !important; }
main a.rounded-full, section.bg-zinc-100 a.rounded-full{
  background:var(--papel) !important; color:var(--tinta) !important; border:1px solid var(--junta) !important;
  border-radius:6px !important; transition:border-color .2s, color .2s, background .2s;
}
main a.rounded-full:hover, section.bg-zinc-100 a.rounded-full:hover{ border-color:var(--cacao) !important; color:var(--cacao) !important; background:var(--cacao-velo) !important; }
section#departements a{ color:var(--tinta) !important; }
section#departements a:hover{ color:var(--cacao) !important; }
main section.border-t.border-b{ background:var(--papel) !important; border-color:var(--junta) !important; }
section.bg-white.border-t.border-b{ background:var(--baldosa-fina) 0 0/44px 44px, var(--crema-2) !important; border-color:var(--junta) !important; }
section.bg-white.border-t.border-b div.flex.flex-col.items-center{
  background:var(--papel); border:1px solid var(--junta); border-radius:10px; padding:1.4rem 1rem 1rem;
  box-shadow:0 18px 30px -24px var(--cacao-sombra);
}
section.bg-white.border-t.border-b div.w-16.h-16.rounded-full{
  background:var(--cacao) !important; border-radius:50% !important;
  box-shadow:0 0 0 4px var(--papel), 0 0 0 5px var(--junta), 0 10px 18px -8px var(--cacao-sombra);
}
section.bg-white.border-t.border-b div.w-16.h-16.rounded-full svg{ color:var(--crema-texto) !important; }
section.bg-white.border-t.border-b p{ color:var(--tinta) !important; }
nav[aria-label] a[style*="border-left"]{
  border-left-color:var(--cacao) !important; color:var(--tinta) !important; border-radius:0 6px 6px 0; background:var(--papel);
}
nav[aria-label] a[style*="border-left"]:hover{ background:var(--cacao-velo) !important; }
nav[aria-label] a:not([style*="border-left"]){ color:var(--tinta-2); }

/* ===================== 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; }
  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 (pas de FAQ à côté) : la carte CTA se centre au lieu de rester seule à gauche */
@media (min-width:992px){
  body.design-v-cta-faq main.space-y-12:not(:has(section > div.space-y-0)) > section.text-center{ grid-column:1 / -1; justify-self:center; width:min(620px,100%); }
}

/* ===================== CTA : un grand carreau, quarts de disque aux coins, cœur en médaillon ===================== */
main section.text-center.rounded-2xl{
  position:relative;
  background:
    radial-gradient(circle at 0 0, var(--cacao) 0 40px, var(--junta) 40px 41px, transparent 42px),
    radial-gradient(circle at 100% 0, var(--cacao) 0 40px, var(--junta) 40px 41px, transparent 42px),
    radial-gradient(circle at 100% 100%, var(--cacao) 0 40px, var(--junta) 40px 41px, transparent 42px),
    radial-gradient(circle at 0 100%, var(--cacao) 0 40px, var(--junta) 40px 41px, transparent 42px),
    radial-gradient(60% 70% at 50% 45%, #fff6ea 0%, var(--papel) 70%) !important;
  border:1px solid var(--junta) !important; border-radius:8px !important;
  box-shadow:inset 0 0 0 10px rgba(255,250,243,0), 0 0 0 5px var(--crema), 0 0 0 6px var(--junta), 0 30px 50px -28px rgba(109,76,65,.55) !important;
  padding:2.2rem 2.4rem 2.4rem !important;
}
main section.text-center.rounded-2xl::before{
  content:""; display:block; width:52px; height:52px; margin:0 auto 1rem; border-radius:50%; flex:0 0 auto;
  background:var(--corazon) center/26px 26px no-repeat, var(--cacao);
  box-shadow:0 0 0 4px var(--papel), 0 0 0 5px var(--junta), 0 12px 20px -10px rgba(109,76,65,.7);
}
main section.text-center.rounded-2xl h2{ color:var(--tinta) !important; font-family:var(--serif); font-weight:600 !important; }
main section.text-center.rounded-2xl p{ color:var(--tinta-2) !important; }
main section.text-center.rounded-2xl button{
  background:var(--cacao) !important; color:#fff !important;
  border-radius:999px !important; min-height:52px; padding-inline:2.4rem !important;
  box-shadow:0 16px 28px -14px rgba(109,76,65,.85) !important; transition:transform .2s ease, background .2s ease;
}
main section.text-center.rounded-2xl button:hover{ transform:translateY(-2px); background:var(--cacao-hondo) !important; }

/* ===================== FAQ ===================== */
main section:has(> div.space-y-0){ border-radius:10px !important; }
main div.space-y-0 > div{ border-color:var(--junta) !important; }
main div.space-y-0 h3, main div.space-y-0 button{ color:var(--tinta) !important; }
main div.space-y-0 button:hover{ background:var(--cacao-velo) !important; }
main div.space-y-0 svg{ color:var(--cacao) !important; }
main div.space-y-0 p{ color:var(--tinta-2) !important; }

button.fixed.bottom-6.right-6{
  background:var(--cacao) !important; color:#fff !important; border-radius:8px !important;
  box-shadow:0 0 0 2px var(--papel), 0 0 0 3px var(--junta), 0 12px 22px -10px rgba(109,76,65,.8) !important;
}

/* ===================== FOOTER : damier de carreaux cacao / crème, joints fins ===================== */
footer.border-t{ background:var(--crema) !important; border-top:0 !important; color:var(--tinta); }
footer.border-t > .container{ padding-top:2.4rem !important; padding-bottom:1.4rem !important; }
footer .grid.mb-8{
  gap:3px !important; background:var(--junta); padding:3px; border-radius:10px; overflow:hidden; margin-bottom:1.2rem !important;
  box-shadow:0 0 0 4px var(--papel), 0 0 0 5px var(--junta), 0 26px 44px -30px var(--cacao-sombra);
}
footer .grid.mb-8 > div{ position:relative; min-width:0; padding:1.5rem 1.3rem 1.3rem; background:var(--baldosa-fina) right 12px top 12px/38px 38px no-repeat, var(--papel); }
footer .grid.mb-8 > div:nth-child(odd){ background:var(--baldosa-clara) right 12px top 12px/38px 38px no-repeat, var(--cacao-hondo); }
@media (min-width:768px) and (max-width:1023px){
  footer .grid.mb-8 > div:nth-child(3){ background:var(--baldosa-fina) right 12px top 12px/38px 38px no-repeat, var(--papel); }
  footer .grid.mb-8 > div:nth-child(4){ background:var(--baldosa-clara) right 12px top 12px/38px 38px no-repeat, var(--cacao-hondo); }
}
footer .grid.mb-8 > div h3{ padding-right:44px; }
footer h3.font-semibold, footer h3[style]{ color:var(--cacao) !important; font-family:var(--serif); }
footer h3.text-sm.font-semibold{ font-family:inherit; letter-spacing:.08em; font-size:.74rem !important; }
footer .grid.mb-8 a{ color:var(--tinta-2) !important; transition:color .2s; }
footer .grid.mb-8 a:hover{ color:var(--cacao) !important; }
footer .grid.mb-8 p{ color:var(--tinta-2) !important; }
footer .grid.mb-8 > div:nth-child(odd) h3{ color:var(--crema-texto) !important; }
footer .grid.mb-8 > div:nth-child(odd) a, footer .grid.mb-8 > div:nth-child(odd) p{ color:var(--crema-suave) !important; }
footer .grid.mb-8 > div:nth-child(odd) a:hover{ color:#fff !important; }
@media (min-width:768px) and (max-width:1023px){
  footer .grid.mb-8 > div:nth-child(3) h3{ color:var(--cacao) !important; }
  footer .grid.mb-8 > div:nth-child(3) a, footer .grid.mb-8 > div:nth-child(3) p{ color:var(--tinta-2) !important; }
  footer .grid.mb-8 > div:nth-child(4) h3{ color:var(--crema-texto) !important; }
  footer .grid.mb-8 > div:nth-child(4) a, footer .grid.mb-8 > div:nth-child(4) p{ color:var(--crema-suave) !important; }
}
footer .grid.mb-8 > div:first-child h3{ font-size:1.2rem !important; }
footer .border-t.border-zinc-200{ border-top:1px solid var(--junta) !important; padding-top:1rem !important; }
footer .border-t.border-zinc-200 p, footer .border-t.border-zinc-200 .text-zinc-500{ color:var(--tinta-2) !important; }
footer .border-t.border-zinc-200 a{ color:var(--cacao) !important; }

/* ===================== MENU MOBILE ===================== */
@media (max-width:767px){
  .ds-mburger{ background:var(--cacao); color:var(--crema-texto); border-radius:8px; box-shadow:0 0 0 2px var(--papel), 0 0 0 3px var(--junta), 0 6px 14px -8px var(--cacao-sombra); }
  .ds-mburger span{ background:var(--crema-texto); }
  .ds-moverlay{ background:rgba(59,38,32,.55); }
  .ds-mdrawer{ background:var(--crema); color:var(--tinta); }
  .ds-mhead{
    background:var(--baldosa-clara) 0 100%/11px 11px repeat-x, var(--cacao-hondo);
    color:var(--crema-texto); border-bottom:0; padding-top:18px; padding-bottom:26px;
    box-shadow:0 3px 0 var(--junta);
  }
  .ds-mbrand{ color:var(--crema-texto); font-family:var(--serif); }
  .ds-mclose{ background:rgba(248,237,221,.16); color:var(--crema-texto); }
  .ds-msec-t{ color:var(--cacao); opacity:1; font-weight:700; }
  .ds-msec-t::before{ content:""; display:inline-block; width:12px; height:12px; margin-right:.45rem; vertical-align:-1px; border-radius:2px; background:var(--baldosa) center/12px 12px; }
  .ds-mlink{ min-height:40px; display:inline-flex; align-items:center; background:var(--papel); border-color:var(--junta); color:var(--tinta); border-radius:6px; }
  .ds-mnav .ds-mlink{ background:var(--cacao-velo); border-color:var(--junta); color:var(--cacao-hondo); }
  .ds-mcta{ background:var(--cacao); color:#fff; border-radius:999px; box-shadow:0 12px 22px -12px rgba(109,76,65,.85); }
  main section.text-center.rounded-2xl{ padding:1.8rem 1.4rem 2rem !important; }
}

/* fiche profil : rayons doux, bouton en pilule (couleurs/rayons seulement) */
.pm-modal{ border-radius:14px !important; }
.pm-modal .pm-cta button{ background:var(--cacao) !important; color:#fff !important; border-radius:999px !important; box-shadow:0 12px 22px -14px rgba(109,76,65,.8) !important; }

@media (prefers-reduced-motion: reduce){
  main div.flex-shrink-0.w-40, main div.flex-shrink-0.w-40 img, header.sticky a.font-bold[href="/"]::before,
  main section.text-center.rounded-2xl button, header.sticky nav .relative > button, footer a, main a.rounded-full{ transition:none !important; }
  main div.flex-shrink-0.w-40:hover, main div.flex-shrink-0.w-40:hover img, main section.text-center.rounded-2xl button:hover,
  header.sticky a.font-bold[href="/"]:hover::before{ transform:none; translate: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__ */