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

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