/* __DESIGN_SITE__ */
/* ==========================================================================
   Habillage unique — sex-bayern.de (Next.js, mode régional Bayern)
   Direction : « ciel bavarois » — bleu ciel, blanc, or, losanges en
   filigrane (clin d'œil discret aux losanges du drapeau bavarois).
   Ne touche qu'au header, à la barre mobile et au footer.
   ========================================================================== */

/* --- palette du site (scopée au header/footer, ne fuite pas sur le reste) - */
header.sticky,
footer {
  --ciel-clair: #eaf6fd;
  --ciel: #3fa9dc;
  --ciel-profond: #0d5b8f;
  --marine: #08314f;
  --or: #d4af37;
  --or-clair: #f3e3ad;
}

/* ---------------------------- HEADER (desktop) --------------------------- */
header.sticky {
  background-color: var(--ciel-clair) !important;
  background-image:
    linear-gradient(180deg, #ffffff 0%, var(--ciel-clair) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cpath d='M18 0L36 18L18 36L0 18Z' fill='none' stroke='%23b7ddf5' stroke-width='1' opacity='.55'/%3E%3C/svg%3E") !important;
  border-bottom-width: 0 !important; /* remplacé par le filet or animé ci-dessous */
}

/* filet or animé en pied de header — surface fine, pas de grand aplat qui bouge */
header.sticky::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 3px;
  background: linear-gradient(90deg, var(--or) 0%, var(--or-clair) 25%, var(--or) 50%, var(--or-clair) 75%, var(--or) 100%);
  background-size: 200% 100%;
  animation: sb-filet-or 7s linear infinite;
  pointer-events: none;
}
@keyframes sb-filet-or {
  from { background-position: 0% 0; }
  to   { background-position: 200% 0; }
}

/* logo : bleu profond et lisible sur fond clair, remplace le style inline */
header.sticky a[href="/"] {
  color: var(--ciel-profond) !important;
  letter-spacing: .01em;
}

/* --- Desktop (≥768px) : nav à gauche, logo au CENTRE, actions à droite --- */
@media (min-width: 768px) {
  header.sticky .container > div.flex {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
  }
  header.sticky .container > div.flex > div:nth-child(1) { order: 2; justify-self: center; } /* logo */
  header.sticky .container > div.flex > nav               { order: 1; justify-self: start; }  /* nav */
  header.sticky .container > div.flex > div:nth-child(4)  { order: 3; justify-self: end; }     /* actions */

  /* liens de nav : bleu ciel + soulignement or qui se déploie au survol */
  header.sticky nav button,
  header.sticky nav a {
    color: var(--ciel-profond);
    position: relative;
  }
  header.sticky nav button::after {
    content: "";
    position: absolute;
    left: 0; bottom: -4px;
    width: 100%; height: 2px;
    background: var(--or);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
  }
  header.sticky nav button:hover::after { transform: scaleX(1); }
  header.sticky nav button:hover,
  header.sticky nav a:hover { color: var(--marine); }

  /* icônes d'action : pastille blanche cerclée de ciel, s'élève et dore au survol */
  header.sticky .container > div.flex > div:nth-child(4) button {
    color: var(--ciel-profond);
    background: #ffffff;
    border: 1px solid #bfe0f5;
    border-radius: 999px;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  header.sticky .container > div.flex > div:nth-child(4) button:hover {
    border-color: var(--or);
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(212, 175, 55, .25);
  }
}

/* ------------------------ Mobile (<768px) : bandeau ----------------------- */
@media (max-width: 767.98px) {
  /* le header entier devient le bandeau bleu ciel bavarois */
  header.sticky {
    background-color: var(--ciel-profond) !important;
    background-image:
      linear-gradient(180deg, #146a97 0%, #0b4f7a 100%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpath d='M15 0L30 15L15 30L0 15Z' fill='none' stroke='%23ffffff' stroke-width='1' opacity='.16'/%3E%3C/svg%3E") !important;
  }
  header.sticky .md\:hidden a[href="/"] {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
  }
  header.sticky .md\:hidden button { color: #ffffff; }
  header.sticky .md\:hidden span { color: #ffffff; }
  /* confort de toucher, sans changer la mise en page du gabarit */
  header.sticky .md\:hidden button { padding: .5rem .35rem; }
}

/* ---------------------------------- FOOTER -------------------------------- */
footer {
  background: #ffffff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M20 0L40 20L20 40L0 20Z' fill='none' stroke='%23f0e3b0' stroke-width='1' opacity='.5'/%3E%3C/svg%3E");
  border-top: 3px solid var(--or) !important; /* footer blanc bordé d'or */
}

footer h3 {
  color: var(--ciel-profond) !important;
}

footer a {
  color: #4a5b68;
  transition: color .18s ease;
}
footer a:hover {
  color: var(--ciel-profond) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* nom du site en pied de page : liseré or qui se déploie une fois, au chargement */
footer .lg\:col-span-1 h3 {
  position: relative;
  display: inline-block;
  padding-bottom: .35rem;
}
footer .lg\:col-span-1 h3::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--or);
  transform: scaleX(0);
  transform-origin: left;
  animation: sb-liseré-or .9s .15s ease-out forwards;
}
@keyframes sb-liseré-or {
  to { transform: scaleX(1); }
}

/* barre du bas : séparateur teinté d'or, lien sitemap doré au survol */
footer .border-t.border-zinc-200 {
  border-top-color: var(--or-clair) !important;
}
footer a[href="/sitemap.xml"]:hover {
  color: var(--or) !important;
}

/* -------------------------- confort de lecture --------------------------- */
@media (prefers-reduced-motion: reduce) {
  header.sticky::after,
  header.sticky *,
  footer .lg\:col-span-1 h3::after,
  footer * {
    animation: none !important;
    transition: none !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;
  }
}
/* __END_DESIGN_SITE__ */