/* __DESIGN_SITE__ */
/* Habillage unique — sexkontakte-nordrhein-westfalen.de (Next)
   Registre CÔTIER : sarcelle + sable, vagues en fond de footer.
   Header desktop/mobile : carte flottante détachée. Rien hors
   header/footer. Header reste sticky, aucun position:fixed ajouté. */

/* Palette (posée sur header et footer, n'affecte que leurs descendants) */
header.sticky.top-0.w-full{
  --mer-sable:#f4ead0;
  --mer-sable-clair:#fbf3df;
  --mer-sarcelle:#0e5a54;
  --mer-sarcelle-fonce:#0a3a35;
  --mer-sarcelle-vif:#1c8f80;
}
footer.border-t.bg-zinc-50{
  --mer-sable:#f4ead0;
  --mer-sable-clair:#fbf3df;
  --mer-sarcelle:#0e5a54;
  --mer-sarcelle-fonce:#0a3a35;
}

/* =========================== HEADER =========================== */

/* Voile sable derrière la carte ; filet d'origine neutralisé par sa
   LARGEUR à 0 (sa couleur inline devient sans effet, pas de !important). */
header.sticky.top-0.w-full{
  background:linear-gradient(180deg,rgba(244,234,208,.85) 0%,rgba(244,234,208,.55) 100%);
  border-bottom-width:0;
  padding:10px 12px 16px;
}

/* Carte flottante : panneau détaché, coins arrondis, ombre sarcelle.
   Pas d'overflow:hidden : le menu "Top 10 Bundesländer" doit déborder. */
header.sticky .container.mx-auto.px-4{
  background:linear-gradient(180deg,var(--mer-sable-clair),var(--mer-sable));
  border:1px solid rgba(14,90,84,.18);
  border-radius:16px;
  box-shadow:0 10px 24px -12px rgba(10,58,53,.45),0 1px 0 rgba(255,255,255,.6) inset;
  padding-left:14px;
  padding-right:14px;
  box-sizing:border-box;
  animation:dsc-carte-entree .5s ease-out both;
}
@keyframes dsc-carte-entree{
  from{opacity:0;transform:translateY(-8px);}
  to{opacity:1;transform:translateY(0);}
}

/* Disposition DESKTOP : 3 colonnes réelles, la nav VRAIMENT au centre
   (grille 1fr auto 1fr, pas un justify-between qui la centre par hasard). */
@media (min-width:768px){
  header.sticky .flex.h-16.items-center.justify-between.gap-4{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    min-height:64px;
  }
  header.sticky .hidden.md\:flex.items-center.flex-shrink-0{justify-self:start;}
  header.sticky nav.hidden.md\:flex{justify-self:center;}
  header.sticky .hidden.md\:flex.items-center.gap-4.flex-shrink-0{justify-self:end;}
}

/* Logo desktop : couleur inline → !important indispensable. Soulignement
   animé au survol. */
header.sticky a.text-2xl.font-bold[href="/"]{
  color:var(--mer-sarcelle-fonce) !important;
  letter-spacing:.01em;
  position:relative;
  padding-bottom:2px;
  background-image:linear-gradient(var(--mer-sarcelle-vif),var(--mer-sarcelle-vif));
  background-repeat:no-repeat;
  background-position:left bottom;
  background-size:0 2px;
  transition:background-size .35s ease;
}
header.sticky a.text-2xl.font-bold[href="/"]:hover{background-size:100% 2px;}

/* Nav desktop : bouton en pastille, chevron qui tourne à l'ouverture
   (attribut aria-expanded, pas une classe à deviner). */
header.sticky nav.hidden.md\:flex button{
  color:var(--mer-sarcelle-fonce) !important;
  background:rgba(14,90,84,.08);
  border:1px solid rgba(14,90,84,.18);
  border-radius:999px;
  padding:7px 14px;
  min-height:36px;
  transition:background .2s ease,transform .2s ease;
}
header.sticky nav.hidden.md\:flex button:hover{
  background:rgba(14,90,84,.16);
  transform:translateY(-1px);
}
header.sticky nav.hidden.md\:flex button[aria-expanded="true"] svg{transform:rotate(180deg);}
header.sticky nav.hidden.md\:flex button svg{transition:transform .2s ease;}
header.sticky nav.hidden.md\:flex a{color:var(--mer-sarcelle-fonce) !important;}

/* Icônes desktop : cercles sable, légère élévation au survol. */
header.sticky .hidden.md\:flex.items-center.gap-4.flex-shrink-0 button{
  color:var(--mer-sarcelle-fonce) !important;
  background:rgba(14,90,84,.08);
  border-radius:999px;
  min-width:40px;
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .2s ease,transform .2s ease;
}
header.sticky .hidden.md\:flex.items-center.gap-4.flex-shrink-0 button:hover{
  background:rgba(14,90,84,.18);
  transform:translateY(-1px);
}

/* Info-bulle "Mach mit!" : doit rester DANS l'écran (garantie, sans
   effet si elle n'apparaît pas ici). */
header.sticky .absolute.top-full{
  left:auto;
  right:0;
  max-width:200px;
  white-space:normal;
  z-index:60;
}

/* BARRE MOBILE : déjà burger / logo / profil côté DOM, on habille
   seulement avec la même carte flottante. */

header.sticky .md\:hidden.flex.items-center.justify-between.w-full{
  position:relative;
  min-height:44px;
}

/* Burger, à gauche */
header.sticky .md\:hidden.flex.items-center.justify-between.w-full > button:first-child{
  color:var(--mer-sarcelle-fonce) !important;
  background:rgba(14,90,84,.10);
  border-radius:12px;
  min-width:44px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Logo centré en absolute : largeur bornée pour qu'un nom long ne
   recouvre jamais le burger ni le profil (piège déjà payé en PHP). */
header.sticky a.text-xl.font-bold[href="/"]{
  color:var(--mer-sarcelle-fonce) !important;
  max-width:min(220px,calc(100vw - 190px));
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:center;
}

/* Bouton profil / "Mitgliederbereich", à droite */
header.sticky .md\:hidden.flex.items-center.justify-between.w-full > button:last-child{
  color:var(--mer-sarcelle-fonce) !important;
  background:rgba(14,90,84,.10);
  border-radius:999px;
  min-height:44px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
}

/* FOOTER — filet d'origine (couleur inline) retiré en largeur, la vague
   le remplace visuellement. */
footer.border-t.bg-zinc-50{
  border-top-width:0;
  background:var(--mer-sarcelle-fonce);
  position:relative;
  padding-top:44px;
}

/* Vague côtière : SVG data: (<1 Ko), rejoué 2x en parallaxe légère.
   Bande fine, pas une grande surface opaque → animation infinie sobre. */
footer.border-t.bg-zinc-50::before,
footer.border-t.bg-zinc-50::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:40px;
  background-repeat:repeat-x;
  background-size:400px 40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath fill='%230a3a35' d='M0,20 C50,40 150,0 200,20 C250,40 350,0 400,20 L400,40 L0,40 Z'/%3E%3C/svg%3E");
  transform:translateY(-1px);
}
footer.border-t.bg-zinc-50::after{
  height:26px;
  opacity:.5;
  background-size:300px 26px;
  animation:dsc-maree 16s linear infinite;
}
@keyframes dsc-maree{
  from{background-position-x:0;}
  to{background-position-x:300px;}
}

footer .container.mx-auto.px-4.py-12{position:relative;}

/* Grille : la colonne marque s'élargit, les Bundesländer remontent à
   côté — deux blocs asymétriques. Mobile inchangé (empilement d'origine). */
@media (min-width:1024px){
  footer .grid.lg\:grid-cols-4 > div:nth-child(1){grid-column:span 2 / span 2;order:1;}
  footer .grid.lg\:grid-cols-4 > div:nth-child(4){order:2;}
  footer .grid.lg\:grid-cols-4 > div:nth-child(2){order:3;}
  footer .grid.lg\:grid-cols-4 > div:nth-child(3){order:4;}
}

/* Bloc marque : liseré sable à gauche, comme une balise de chenal. */
footer .lg\:col-span-1{
  border-left:3px solid var(--mer-sarcelle-vif);
  padding-left:14px;
}
footer h3[style]{
  color:var(--mer-sable-clair) !important;
  font-size:1.3rem;
  letter-spacing:.01em;
}
footer h3:not([style]){
  color:var(--mer-sable);
  letter-spacing:.12em;
}

/* Textes courants du footer (tagline, copyright, mentions) */
footer .text-sm.text-zinc-600,
footer .text-xs.text-zinc-500{color:var(--mer-sable);}

/* Liens : soulignement qui pousse depuis la gauche au survol, contraste
   large sur le fond sarcelle profond. */
footer a{
  color:var(--mer-sable);
  text-decoration:none;
  position:relative;
  transition:color .2s ease;
}
footer a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-2px;
  height:1px;
  background:var(--mer-sarcelle-vif);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease;
}
footer a:hover{color:var(--mer-sable-clair);}
footer a:hover::after{transform:scaleX(1);}

footer .border-t.border-zinc-200{border-top-color:rgba(244,234,208,.18);}

/* Mode sombre système : la carte reste claire (le fond de page reste
   blanc) → on réaffirme le texte foncé après les variantes dark:. */
@media (prefers-color-scheme:dark){
  header.sticky nav.hidden.md\:flex button,
  header.sticky nav.hidden.md\:flex a,
  header.sticky .hidden.md\:flex.items-center.gap-4.flex-shrink-0 button{
    color:var(--mer-sarcelle-fonce) !important;
  }
}

/* Mouvement réduit : on coupe tout. */
@media (prefers-reduced-motion:reduce){
  header.sticky .container.mx-auto.px-4{animation:none;}
  header.sticky a.text-2xl.font-bold[href="/"]{transition:none;}
  header.sticky nav.hidden.md\:flex button,
  header.sticky .hidden.md\:flex.items-center.gap-4.flex-shrink-0 button{transition:none;}
  footer.border-t.bg-zinc-50::after{animation:none;}
  footer a::after{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;
  }
}
/* __END_DESIGN_SITE__ */