/* __DESIGN_SITE__ */
/* sextreff-thueringen.de — habillage unique (gabarit Next, régional)
   Terre cuite : ocre (#c97b2a / #ef6c00) + brun foncé (#3e2723), grain
   SVG très discret (feTurbulence). Desktop : header bas et très large,
   logo en petites capitales espacées, nav collée au logo, actions tout
   à droite. Mobile : bandeau ocre, hamburger + logo en brun foncé.
   Footer : brun foncé, liens ocre, 3 colonnes (marque en tête pleine
   largeur, puis 3 colonnes de liens). */

:root{
  /* Grain terre cuite : feTurbulence, alpha ~0.05 cuit dans le SVG
     (feColorMatrix) — pas besoin d'opacity côté CSS. */
  --terre-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --terre-ocre-vif:#ef6c00;
  --terre-ocre-texte:#f4922f;   /* ocre éclairci : ≥4,5:1 sur le brun */
  --terre-ocre-fond:#c97b2a;    /* bandeau mobile */
  --terre-brun:#3e2723;
  --terre-brun-profond:#2b1512; /* texte foncé : ≥4,5:1 sur l'ocre */
}

/* ===== EN-TÊTE (desktop + mobile) ===== */

/* border-bottom-color posée EN LIGNE par le gabarit → !important. Pas
   de `position` ici : le header est déjà sticky, y toucher le casserait. */
header.sticky.top-0.z-50.w-full.border-b.border-zinc-200{
  background-image: var(--terre-grain),
    linear-gradient(160deg,#4a2f27 0%,#3e2723 55%,#2b1512 100%);
  background-repeat: repeat, no-repeat;
  background-size: 120px 120px, cover;
  border-bottom-color: rgba(239,108,0,.55) !important;
}

/* Liseré ocre en pied de header, qui respire (opacity), bande de 3 px
   — jamais une grande surface opaque. */
header.sticky.top-0.z-50.w-full.border-b.border-zinc-200::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:3px;
  background:linear-gradient(90deg,var(--terre-ocre-vif),var(--terre-ocre-texte),var(--terre-ocre-vif));
  opacity:.4;
  animation:terre-liseret 6s ease-in-out infinite;
}
@keyframes terre-liseret{
  0%,100%{ opacity:.3; }
  50%{ opacity:.8; }
}

/* Desktop : header plus bas/flat, logo à gauche, nav collée juste
   après (justify-content:flex-start), actions poussées à droite
   (margin-left:auto sur leur bloc). */
@media (min-width:768px){
  header.sticky.top-0.z-50.w-full.border-b.border-zinc-200 > div.container{
    padding-inline:2.5rem;
  }
  header.sticky .flex.h-16.items-center.justify-between.gap-4{
    justify-content:flex-start;
    align-items:center;
    gap:3rem;
    height:auto;
    min-height:3.25rem;
    padding-block:.65rem;
  }
}
header.sticky .hidden.md\:flex.items-center.gap-4.flex-shrink-0{
  margin-left:auto;
}

/* Logo en petites capitales (font-variant-caps ; pas de
   text-transform:uppercase, sinon plus rien à mettre en petite
   capitale). Couleur en ligne dans le gabarit → !important. Vaut pour
   le logo desktop et le logo mobile centré (même sélecteur). */
header.sticky a[href="/"]{
  color:var(--terre-ocre-texte) !important;
  font-variant-caps:small-caps;
  letter-spacing:.14em;
  font-weight:700;
  transition:letter-spacing .3s ease;
}
header.sticky a[href="/"]:hover{
  letter-spacing:.24em;
}

/* « Top 10 Bundesländer » (desktop ET mobile) : soulignement ocre au
   survol. Le bouton passe en position:relative sans gêner le panneau
   déroulant, positionné par rapport au <div class="relative"> parent. */
header.sticky nav .relative > button{
  position:relative;
  color:#f4e3d1;
  transition:color .2s ease;
}
header.sticky nav .relative > button:hover{
  color:var(--terre-ocre-texte);
}
header.sticky nav .relative > button::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-6px;
  height:2px;
  background:var(--terre-ocre-vif);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s ease;
}
header.sticky nav .relative > button:hover::after{
  transform:scaleX(1);
}

/* Icônes profil / recherche desktop : légère élévation au survol. */
header.sticky .hidden.md\:flex.items-center.gap-4.flex-shrink-0 button{
  color:var(--terre-ocre-texte);
  transition:color .2s ease, transform .2s ease;
}
header.sticky .hidden.md\:flex.items-center.gap-4.flex-shrink-0 button:hover{
  color:#ffd7a8;
  transform:translateY(-2px);
}

/* ===== BARRE MOBILE ===== */

/* Bandeau ocre + hamburger/logo brun, sous 768 px seulement. */
@media (max-width:767.98px){
  header.sticky.top-0.z-50.w-full.border-b.border-zinc-200{
    background-image: var(--terre-grain),
      linear-gradient(160deg,#e8892f 0%,var(--terre-ocre-fond) 60%,#b96f22 100%);
    background-repeat: repeat, no-repeat;
    background-size: 90px 90px, cover;
    border-bottom-color: rgba(43,21,18,.4) !important;
  }
  header.sticky a[href="/"]{
    color:var(--terre-brun-profond) !important;
  }
}

/* Hamburger : cible tactile ≥44 px, brun foncé sur le bandeau ocre. */
header.sticky .md\:hidden.flex.items-center.justify-between.w-full button[aria-label="Menü"]{
  color:var(--terre-brun-profond);
  min-width:44px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  transition:background .2s ease;
}
header.sticky .md\:hidden.flex.items-center.justify-between.w-full button[aria-label="Menü"]:hover{
  background:rgba(43,21,18,.12);
}

/* Bouton « espace membre »/« mon compte » (dernier enfant, <a> ou
   <button>) : pastille foncée sur l'ocre, ≥44 px, texte/geste inchangés
   — le clic qui rapporte ne bouge pas. */
header.sticky .md\:hidden.flex.items-center.justify-between.w-full > :last-child{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  padding-inline:.85rem;
  border-radius:999px;
  background:var(--terre-brun-profond);
  color:var(--terre-ocre-texte) !important;
  transition:background .2s ease, transform .2s ease;
}
header.sticky .md\:hidden.flex.items-center.justify-between.w-full > :last-child svg,
header.sticky .md\:hidden.flex.items-center.justify-between.w-full > :last-child span{
  color:var(--terre-ocre-texte);
}
header.sticky .md\:hidden.flex.items-center.justify-between.w-full > :last-child:hover{
  background:#4a2118;
  transform:translateY(-1px);
}

/* Panneau du menu mobile ouvert : même famille (ocre), texte foncé
   pour le contraste (le texte clair du nav desktop y serait illisible). */
header.sticky .md\:hidden.border-t.border-zinc-200.py-4{
  background:var(--terre-ocre-fond);
  border-top-color:rgba(43,21,18,.35) !important;
}
header.sticky .md\:hidden.border-t.border-zinc-200.py-4 .relative > button{
  color:var(--terre-brun-profond);
}
header.sticky .md\:hidden.border-t.border-zinc-200.py-4 .relative > button:hover{
  color:var(--terre-brun);
}
header.sticky .md\:hidden.border-t.border-zinc-200.py-4 .relative > button::after{
  background:var(--terre-brun-profond);
}
/* Bouton « Voir la carte », couleur en ligne dans le gabarit → !important. */
header.sticky .md\:hidden.border-t.border-zinc-200.py-4 button.w-full{
  background:var(--terre-brun-profond) !important;
  color:var(--terre-ocre-texte) !important;
}

/* ===== PIED DE PAGE ===== */

/* position:relative pour poser le motif qui dérive ; le footer n'a
   aucun panneau déroulant à masquer, overflow:hidden est sans risque. */
footer.border-t.bg-zinc-50{
  background-image: var(--terre-grain),
    linear-gradient(175deg,var(--terre-brun) 0%,var(--terre-brun-profond) 100%);
  background-repeat: repeat, no-repeat;
  background-size: 130px 130px, cover;
  border-top-color: rgba(239,108,0,.55) !important;
  position:relative;
  overflow:hidden;
}
/* Motif d'ambre qui dérive lentement (transform seulement, jamais
   opaque : dégradés très translucides). */
footer.border-t.bg-zinc-50::before{
  content:"";
  position:absolute;
  inset:-20% -10%;
  background:
    radial-gradient(circle at 30% 40%, rgba(239,108,0,.16), transparent 60%),
    radial-gradient(circle at 75% 70%, rgba(201,123,42,.12), transparent 55%);
  animation:terre-derive 34s ease-in-out infinite alternate;
  pointer-events:none;
  z-index:0;
}
@keyframes terre-derive{
  from{ transform:translate3d(0,0,0) scale(1); }
  to{ transform:translate3d(2%,-3%,0) scale(1.08); }
}
/* Le contenu passe au-dessus du motif qui dérive. */
footer.border-t.bg-zinc-50 > div.container{
  position:relative;
  z-index:1;
}

/* 3 colonnes : la bande de marque (1er enfant) prend toute la largeur
   en tête, les 3 groupes de liens forment la rangée en dessous. */
footer.border-t.bg-zinc-50 .grid.grid-cols-1{
  grid-template-columns:repeat(3,1fr);
  row-gap:2.25rem;
}
footer.border-t.bg-zinc-50 .grid.grid-cols-1 > div:first-child{
  grid-column:1 / -1;
  padding-bottom:1.25rem;
  border-bottom:1px solid rgba(239,108,0,.25);
}
@media (max-width:767.98px){
  footer.border-t.bg-zinc-50 .grid.grid-cols-1{
    grid-template-columns:1fr;
  }
  footer.border-t.bg-zinc-50 .grid.grid-cols-1 > div:first-child{
    grid-column:auto;
    border-bottom:none;
    padding-bottom:0;
  }
}

/* Nom du site en pied de page (couleur posée en ligne) */
footer h3[style]{
  color:var(--terre-ocre-texte) !important;
}
footer p.text-sm.text-zinc-600,
footer p.text-xs.text-zinc-500{
  color:#d9b79a;
}

/* Titres des 3 colonnes */
footer h3.text-sm.font-semibold.text-zinc-900{
  color:var(--terre-ocre-vif);
  letter-spacing:.08em;
}

/* Liens du pied de page : ocre, plus clair au survol */
footer a.text-sm.text-zinc-600,
footer a.text-xs.text-zinc-500{
  color:var(--terre-ocre-texte);
  transition:color .2s ease;
}
footer a.text-sm.text-zinc-600:hover,
footer a.text-xs.text-zinc-500:hover{
  color:#ffd7a8;
}
footer a.underline{
  color:var(--terre-ocre-texte);
  text-decoration-color:var(--terre-ocre-fond);
}
footer a.underline:hover{
  color:#ffd7a8;
  text-decoration-color:#ffd7a8;
}
footer .border-t.border-zinc-200{
  border-top-color:rgba(239,108,0,.25) !important;
}

/* ===== Réduction des animations ===== */
@media (prefers-reduced-motion:reduce){
  header.sticky.top-0.z-50.w-full.border-b.border-zinc-200::after,
  footer.border-t.bg-zinc-50::before{
    animation:none;
  }
  header.sticky a[href="/"],
  header.sticky nav .relative > button,
  header.sticky nav .relative > button::after,
  header.sticky .hidden.md\:flex.items-center.gap-4.flex-shrink-0 button,
  header.sticky .md\:hidden.flex.items-center.justify-between.w-full > :last-child,
  header.sticky .md\:hidden.flex.items-center.justify-between.w-full button[aria-label="Menü"]{
    transition:none;
  }
}

/* ============================================================================
   THEME PROFOND -- cartes profil, tri/recherche, CTA, FAQ, retour en haut,
   pop-up d'inscription, age gate. Meme registre terre cuite (grain, lisere
   ocre anime, petites capitales, brun profond) que le header/footer ci-dessus.
   ============================================================================ */

/* ----------------------------- Cartes profil ----------------------------- */
main .w-40.sm\:w-64.bg-zinc-50{
  background:linear-gradient(180deg,#fff8f0 0%,#f6e3cd 100%);
  border-color:rgba(239,108,0,.28) !important;
  border-radius:14px;
  box-shadow:0 8px 18px -13px rgba(43,21,18,.55);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
main .w-40.sm\:w-64.bg-zinc-50:hover{
  transform:translateY(-4px);
  border-color:var(--terre-ocre-vif) !important;
  box-shadow:0 16px 30px -14px rgba(43,21,18,.5);
}
main img.aspect-square.object-cover{
  border-radius:10px;
  filter:saturate(1.03);
}
main .w-40.sm\:w-64.bg-zinc-50:hover img.aspect-square.object-cover{
  filter:saturate(1.12) brightness(1.02);
}
/* Badge d'age : pastille brun profond/ocre, comme les pastilles du header mobile. */
main .absolute.top-2.right-2.bg-zinc-900\/80{
  background:var(--terre-brun-profond) !important;
  color:var(--terre-ocre-texte) !important;
  border:1px solid rgba(239,108,0,.4);
  border-radius:999px;
  font-weight:600;
}
main h3.font-semibold.truncate{color:var(--terre-brun-profond) !important;}
main p.text-zinc-500.truncate.mb-2{
  color:var(--terre-ocre-vif) !important;
  letter-spacing:.01em;
}
main p.text-zinc-600.line-clamp-2{color:#6b4a3a;}

/* ------------------------- Tri, recherche, "plus" ------------------------- */
main .form-group select,
main div.bg-white.rounded-lg.p-3.sm\:p-4 button{
  border-color:rgba(239,108,0,.35) !important;
  border-radius:10px;
  --tw-ring-color:var(--terre-ocre-vif) !important;
  transition:border-color .2s ease,background .2s ease;
}
main .form-group select:hover,
main div.bg-white.rounded-lg.p-3.sm\:p-4 button:hover{
  border-color:var(--terre-ocre-vif) !important;
  background:#fdf3e7 !important;
}
main button[aria-label="Mehr anzeigen"]{
  color:var(--terre-ocre-vif) !important;
  position:relative;
  padding-bottom:1px;
  background-image:linear-gradient(var(--terre-ocre-vif),var(--terre-ocre-vif));
  background-repeat:no-repeat;
  background-position:left bottom;
  background-size:0 1px;
  transition:background-size .3s ease;
}
main button[aria-label="Mehr anzeigen"]:hover{background-size:100% 1px;}

/* ------------------------------ Bandeau CTA ------------------------------ */
main section.text-center{
  background-image:var(--terre-grain),
    linear-gradient(155deg,var(--terre-brun-profond) 0%,var(--terre-brun) 55%,#5a3a2c 100%);
  background-repeat:repeat,no-repeat;
  background-size:110px 110px,cover;
  border:1px solid rgba(239,108,0,.3);
  position:relative;
  overflow:hidden;
}
main section.text-center::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:3px;
  background:linear-gradient(90deg,var(--terre-ocre-vif),var(--terre-ocre-texte),var(--terre-ocre-vif));
  opacity:.5;
  animation:terre-liseret 6s ease-in-out infinite;
}
main section.text-center h2{
  color:#f7e7d3 !important;
  position:relative;
}
main section.text-center button{
  background:var(--terre-ocre-vif) !important;
  color:var(--terre-brun-profond) !important;
  border-radius:999px;
  font-weight:700;
  position:relative;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
main section.text-center button:hover{
  background:var(--terre-ocre-texte) !important;
  transform:translateY(-2px);
  box-shadow:0 10px 22px -10px rgba(43,21,18,.6);
}

/* ---------------------------------- FAQ ---------------------------------- */
main section:has(> div.space-y-0){
  border:1px solid rgba(239,108,0,.22);
  border-radius:14px;
}
main section:has(> div.space-y-0) > h2{
  color:var(--terre-brun-profond);
  border-left:3px solid var(--terre-ocre-vif);
  padding-left:12px;
}
main div.space-y-0 > div{border-color:rgba(239,108,0,.25) !important;}
main div.space-y-0 h3{color:var(--terre-brun-profond);}
main div.space-y-0 button:hover{background:rgba(239,108,0,.08) !important;}
main div.space-y-0 svg{color:var(--terre-ocre-vif) !important;}
main div.space-y-0 button[aria-expanded="true"] svg{transform:rotate(180deg);}

/* ------------------------------ Retour en haut ------------------------------ */
/* Couleurs/ombre/bordure seulement : le montrer/cacher reste pilote par les
   classes utilitaires (opacity-0 / translate-y-10) posees par le gabarit. */
button.fixed.bottom-6.right-6{
  background:var(--terre-brun-profond) !important;
  color:var(--terre-ocre-texte) !important;
  border:1px solid rgba(239,108,0,.4);
  box-shadow:0 8px 18px -8px rgba(43,21,18,.6);
}
button.fixed.bottom-6.right-6:hover{background:var(--terre-ocre-fond) !important;color:var(--terre-brun-profond) !important;}

/* ------------------- Pop-up d'inscription (LoginPopup) ------------------- */
/* Couleurs, bordures, rayons seulement : display/position/transform/overflow
   du gabarit ne sont jamais touches ici. */
.fixed.inset-0.z-50.bg-black\/50{background:rgba(43,21,18,.6) !important;}
.fixed.inset-0.z-50 .rounded-2xl.shadow-2xl{
  border:1px solid rgba(239,108,0,.25);
  border-top:4px solid var(--terre-ocre-vif);
  border-radius:18px;
  box-shadow:0 24px 48px -20px rgba(43,21,18,.55);
}
.fixed.inset-0.z-50 h1.text-3xl.font-bold{color:var(--terre-brun-profond) !important;}
.fixed.inset-0.z-50 button.rounded-full.bg-zinc-100{
  background:#f6e3cd !important;
  color:var(--terre-brun-profond) !important;
}
.fixed.inset-0.z-50 button.rounded-full.bg-zinc-100:hover{background:#fdf3e7 !important;}
.fixed.inset-0.z-50 input.rounded-lg.border.border-zinc-300{
  border-color:rgba(239,108,0,.35) !important;
  border-radius:10px;
}
.fixed.inset-0.z-50 input.rounded-lg.border.border-zinc-300:focus{
  border-color:var(--terre-ocre-vif) !important;
}
.fixed.inset-0.z-50 button.w-full.text-white.font-semibold.rounded-lg{
  background:var(--terre-brun-profond) !important;
  border-radius:10px;
}
/* Cadre du formulaire du prestataire : on n'habille QUE l'ecrin, jamais son
   contenu injecte (classes ptprelinker-*, hors de notre CSS). */
.fixed.inset-0.z-50 #prelinker-embed{
  border-radius:10px;
}

/* ------------------------------- Age gate ------------------------------- */
/* Meme regle : couleurs, bordures, rayons -- le montrer/cacher reste gere en
   React (le composant rend `null`), aucun display/position touche ici. */
.z-\[9999\].bg-zinc-900\/90{background:rgba(43,21,18,.85) !important;}
.z-\[9999\] .bg-white.rounded-xl.shadow-xl.max-w-xl{
  border:1px solid rgba(239,108,0,.25) !important;
  border-top:4px solid var(--terre-ocre-vif) !important;
  border-radius:16px;
  box-shadow:0 24px 48px -20px rgba(43,21,18,.55);
}
.z-\[9999\] h1.text-2xl{color:var(--terre-brun-profond);}
.z-\[9999\] .w-16.h-1.bg-zinc-300{background:var(--terre-ocre-vif) !important;}
.z-\[9999\] .bg-zinc-50.rounded-lg.p-5.border.border-zinc-200{
  background:#fdf3e7 !important;
  border-color:rgba(239,108,0,.3) !important;
}
.z-\[9999\] .bg-zinc-50.rounded-lg.p-5.border.border-zinc-200 p.font-medium{color:var(--terre-brun-profond) !important;}
.z-\[9999\] button:first-of-type{
  background:var(--terre-brun-profond) !important;
  border-radius:10px;
}
.z-\[9999\] button.bg-zinc-100{
  background:#f6e3cd !important;
  color:var(--terre-brun-profond) !important;
  border-color:rgba(239,108,0,.3) !important;
  border-radius:10px;
}
.z-\[9999\] button.bg-zinc-100:hover{background:#fdf3e7 !important;}

/* Mode sombre systeme : les panneaux (cartes, pop-ups, bandeaux) restent sur
   fond clair/terre assume, on reaffirme les textes apres les dark:. */
@media (prefers-color-scheme:dark){
  main h3.font-semibold.truncate,
  .fixed.inset-0.z-50 h1.text-3xl.font-bold,
  .z-\[9999\] h1.text-2xl{color:var(--terre-brun-profond) !important;}
}

/* ============================================================================
   BLOC DE REASSURANCE (exports/design/sextreff-thueringen.de.html)
   Socle neutre (recette v3), puis habillage terre cuite.
   ============================================================================ */
.ds-bloc { margin: 24px 0; padding: 24px; border-radius: 16px; }
.ds-titre { margin: 0 0 6px; font-size: 1.35rem; line-height: 1.25; }
.ds-sous { margin: 0 0 16px; opacity: .85; }
.ds-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.ds-item { display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: start; }
.ds-ico { grid-row: 1 / 3; width: 28px; height: 28px; }
.ds-ico svg { width: 28px; height: 28px; display: block; }
.ds-item-t { display: block; font-weight: 700; }
.ds-item-p { display: block; font-size: .93rem; opacity: .85; }

.ds-bloc{
  background-image:var(--terre-grain),
    linear-gradient(160deg,#4a2f27 0%,var(--terre-brun) 55%,var(--terre-brun-profond) 100%);
  background-repeat:repeat,no-repeat;
  background-size:120px 120px,cover;
  border:1px solid rgba(239,108,0,.3);
  position:relative;
  overflow:hidden;
}
.ds-bloc::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:3px;
  background:linear-gradient(90deg,var(--terre-ocre-vif),var(--terre-ocre-texte),var(--terre-ocre-vif));
  opacity:.5;
  animation:terre-liseret 6s ease-in-out infinite;
}
.ds-titre{
  color:var(--terre-ocre-texte);
  font-variant-caps:small-caps;
  letter-spacing:.06em;
  position:relative;
}
.ds-sous{
  color:#d9b79a;
  position:relative;
}
.ds-liste{ position:relative; }
.ds-ico{
  border-radius:9px;
  background:rgba(239,108,0,.16);
  border:1px solid rgba(239,108,0,.4);
  color:var(--terre-ocre-texte);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .3s ease,transform .3s ease;
}
.ds-item:hover .ds-ico{
  background:rgba(239,108,0,.28);
  transform:translateY(-2px);
}
.ds-item-t{ color:var(--terre-ocre-texte); }
.ds-item-p{ color:#d9b79a; }

/* ===== Reduction des animations (ajouts ci-dessus) ===== */
@media (prefers-reduced-motion:reduce){
  main .w-40.sm\:w-64.bg-zinc-50,
  main .w-40.sm\:w-64.bg-zinc-50:hover,
  main img.aspect-square.object-cover,
  main button[aria-label="Mehr anzeigen"],
  main section.text-center button,
  main section.text-center::before,
  .ds-bloc::before,
  .ds-item .ds-ico{
    transition:none;
    animation:none;
    transform:none;
  }
}

/* menu mobile, mecanisme intouche */
@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:#2b1512;color:#f4922f}
.ds-mburger span{display:block;height:2px;background:currentColor}
.ds-moverlay{display:none;position:fixed;inset:0;background:rgba(43,21,18,.62);z-index:65}
.ds-mdrawer{position:fixed;top:0;left:0;bottom:0;width:min(86vw,340px);z-index:70;overflow-y:auto;background:#2b1512;color:#f4e3d1;transform:translateX(-105%);transition:transform .25s ease}
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;font-variant-caps:small-caps;font-weight:700;color:#f4922f}
.ds-mclose{width:36px;height:36px;border-radius:50%;background:rgba(239,108,0,.2);color:#f4922f}
.ds-msec-t{text-transform:uppercase;color:#ef6c00;font-weight:700}
.ds-mlinks{display:flex;flex-wrap:wrap;gap:8px}
.ds-mlink{display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;border-radius:999px;border:1px solid rgba(239,108,0,.4);background:rgba(239,108,0,.15);color:#f4e3d1}
.ds-mfoot{padding:18px 16px 0}
.ds-mcta{border-radius:12px;background:#ef6c00;color:#2b1512;font-weight:700}
}
@media (min-width:768px){.ds-mburger,.ds-mdrawer,.ds-moverlay{display:none!important}}
@media (prefers-reduced-motion:reduce){.ds-mdrawer{transition:none}}

/* 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 */
}
/* __END_DESIGN_SITE__ */