/* __DESIGN_SITE__ */
/* ==========================================================================
   sexanzeigen-online.de — habillage unique header + footer
   Direction : rouge profond + noir, logo souligné par un trait qui s'étire
   au survol. Ne touche qu'à <header> et <footer> (Tailwind, gabarit Next).
   ========================================================================== */

:root{
  --sx-bg-1:#0b0205;   /* noir profond */
  --sx-bg-2:#3b0512;   /* rouge très sombre, transition */
  --sx-bg-3:#7a0c1e;   /* rouge profond, point chaud du dégradé */
  --sx-accent:#ff4d6d; /* rouge vif — liens, logo, titres (contraste garanti) */
  --sx-accent-2:#d81e3a; /* rouge intermédiaire — liserés, dégradés */
  --sx-fg:#e3d3d5;     /* texte clair chaud, sur fond sombre */
  --sx-muted:#ab8891;  /* texte secondaire (copyright, mentions) */
}

/* ---- Animations ---------------------------------------------------- */
@keyframes sx-header-in{
  from{opacity:0; transform:translateY(-10px);}
  to{opacity:1; transform:translateY(0);}
}
@keyframes sx-shimmer{
  0%{background-position:0% 50%;}
  100%{background-position:200% 50%;}
}

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

/* Chaîne de classes déjà présentes sur le <header> : la spécificité gagne
   sans avoir à réécrire tout Tailwind. Le fond et la bordure inline
   (style="border-bottom-color:…") exigent !important pour être repris. */
header.sticky.top-0.z-50.border-b{
  background:linear-gradient(120deg, var(--sx-bg-1) 0%, var(--sx-bg-2) 55%, var(--sx-bg-3) 100%) !important;
  border-bottom-color:rgba(255,77,109,.35) !important;
  box-shadow:0 2px 18px rgba(0,0,0,.35);
  animation:sx-header-in .6s ease-out both;
}
@media (prefers-reduced-motion: reduce){
  header.sticky.top-0.z-50.border-b{animation:none;}
}

/* Texte et icônes du header : le gabarit prévoit des couleurs différentes
   selon clair/sombre système (text-zinc-700 / dark:text-zinc-300…) ; comme
   le fond devient toujours sombre ici, on impose une couleur claire unique
   pour garantir le contraste dans les deux cas — d'où le !important. */
header a,
header button{
  color:var(--sx-fg) !important;
}
header a:hover,
header a:focus-visible,
header button:hover,
header button:focus-visible{
  color:#fff !important;
}
header button{
  transition:color .2s ease, transform .2s ease;
}
header button:hover,
header button:focus-visible{
  transform:translateY(-1px);
}
header a:focus-visible,
header button:focus-visible{
  outline:2px solid var(--sx-accent);
  outline-offset:2px;
  border-radius:4px;
}

/* Cible tactile ≥ 44 px pour les boutons du header (hamburger, espace
   membre, login, recherche) sans toucher à leur position/affichage. */
header button{
  min-height:44px;
  min-width:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
header .md\:hidden button{
  min-height:44px;
}

/* Logo : couleur imposée en inline (style="color:#E35D8F") → repris en
   rouge vif de la charte, avec un trait qui s'étire au survol. Uniquement
   sur la version bureau (sans la classe .absolute qui sert au centrage
   mobile) pour ne jamais perturber son positionnement. */
header a[href="/"]{
  color:var(--sx-accent) !important;
  font-weight:800;
  letter-spacing:.01em;
}
header a[href="/"]:not(.absolute){
  position:relative;
  display:inline-block;
  padding-bottom:.2rem;
}
header a[href="/"]:not(.absolute)::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  height:2px;
  width:0;
  background:linear-gradient(90deg, var(--sx-accent), var(--sx-accent-2));
  transition:width .35s ease;
}
header a[href="/"]:not(.absolute):hover::after,
header a[href="/"]:not(.absolute):focus-visible::after{
  width:100%;
}
@media (prefers-reduced-motion: reduce){
  header a[href="/"]:not(.absolute)::after{transition:none;}
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

footer.border-t.bg-zinc-50{
  background:linear-gradient(180deg, var(--sx-bg-1) 0%, #170408 100%) !important;
  border-top-color:rgba(255,77,109,.35) !important;
  position:relative;
  overflow:hidden;
}

/* Liseré animé en tête de footer — fine bande, pas de grande surface,
   dérive lente et sans à-coup ; coupé si mouvement réduit demandé. */
footer.border-t.bg-zinc-50::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg,
    var(--sx-bg-1) 0%, var(--sx-accent-2) 25%, var(--sx-accent) 50%,
    var(--sx-accent-2) 75%, var(--sx-bg-1) 100%);
  background-size:200% 100%;
  animation:sx-shimmer 7s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  footer.border-t.bg-zinc-50::before{animation:none; background-position:0 50%;}
}

/* Titres de colonnes : reprend l'accent rouge vif partout (y compris la
   colonne marque, dont la couleur est fixée en inline). */
footer h3{
  color:var(--sx-accent) !important;
}

/* Textes et liens : le gabarit utilise des gris pensés pour un fond clair
   (text-zinc-600/900/500) ; sur fond sombre ils tomberaient sous le seuil
   de contraste, d'où la reprise en !important. */
footer .text-zinc-600,
footer p.text-zinc-600{
  color:var(--sx-fg) !important;
}
footer .text-zinc-500{
  color:var(--sx-muted) !important;
}
footer a{
  transition:color .2s ease;
}
footer a:hover,
footer a:focus-visible{
  color:var(--sx-accent) !important;
  text-decoration-color:var(--sx-accent);
}
footer a:focus-visible{
  outline:2px solid var(--sx-accent);
  outline-offset:2px;
  border-radius:2px;
}

/* Séparateur avant le bas de page (mentions légales) : repris dans la
   même teinte sombre que le reste du footer. */
footer .border-zinc-200{
  border-color:rgba(255,77,109,.2) !important;
}
/* __END_DESIGN_SITE__ */