/* =============================================================
   TAYLOR SWIFT FAN WORLD — Feuille de style principale
   Fichier  : style.css
   Auteur   : Toi ! :)
   Version  : 1.0

   SOMMAIRE
   ─────────────────────────────────────────────────────────────
   1.  PALETTE DE COULEURS  ← Modifie ici pour changer les couleurs
   2.  RESET & BASE
   3.  BANDEAU DÉFILANT (Marquee)
   4.  MISE EN PAGE (Layout)
   5.  SIDEBAR (Menu latéral)
   6.  HEADER
   7.  TITRES DE SECTIONS
   8.  BANNIÈRE UNDER CONSTRUCTION
   9.  GALERIE DES ERAS
   10. GUESTBOOK (Messages fans)
   11. FORMULAIRE GUESTBOOK
   12. WEBRING (Bannières)
   13. FOOTER
   14. ANIMATIONS
   15. SCROLLBAR & RESPONSIVE
   ============================================================= */


/* =============================================================
   1. PALETTE DE COULEURS
   ─────────────────────
   ✏️  PERSONNALISATION FACILE :
   Modifie les valeurs HEX ici et tout le site changera !
   ============================================================= */

:root {
  /* ── Couleurs principales ── */
  --gold:    #FFD700;   /* Or vif  — titres, bordures, accents */
  --gold2:   #FFC200;   /* Or légèrement plus sombre */
  --pink:    #FF69B4;   /* Rose pastel — hovers, accents secondaires */
  --pink2:   #FF1493;   /* Rose vif — dégradés, boutons */
  --teal:    #00CED1;   /* Turquoise — labels, compteur visiteurs */
  --purple:  #9B59B6;   /* Violet — fonds sidebar, dégradés */
  --cream:   #FFFDE0;   /* Crème — texte principal */
  --navy:    #0D0D2B;   /* Bleu nuit — fond de page */

  /* ── Typographies ── */
  --font-pixel:   'Press Start 2P', monospace;  /* Titres, labels, boutons */
  --font-retro:   'VT323', monospace;            /* Texte courant, champs */
  --font-cursive: 'Satisfy', cursive;            /* Logo, noms des eras */
}


/* =============================================================
   2. RESET & BASE
   ============================================================= */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--navy);
  /* ✏️ Tu peux remplacer les dégradés par une simple couleur :
     background: var(--navy);  */
  background-image:
    radial-gradient(ellipse at 50%   0%,  rgba(155, 89, 182, 0.35) 0%, transparent 65%),
    radial-gradient(ellipse at 0%  100%,  rgba(0, 206, 209, 0.15)  0%, transparent 50%),
    radial-gradient(ellipse at 100%  60%, rgba(255, 105, 180, 0.12) 0%, transparent 50%);
  font-family: var(--font-retro);
  color: var(--cream);
  overflow-x: hidden;
}

a               { color: var(--gold); text-decoration: none; }
a:hover         { color: var(--pink); text-decoration: underline; }


/* =============================================================
   3. BANDEAU DÉFILANT (Marquee)
   ─────────────────────────────
   ✏️ Le texte se modifie dans le HTML, section <div class="marquee-bar">
   ============================================================= */

.marquee-bar {
  /* ✏️ Change les couleurs du dégradé ici */
  background: linear-gradient(90deg,
    var(--purple), var(--pink2), var(--gold2), var(--teal), var(--purple));
  background-size: 400% 100%;
  animation: gradShift 4s linear infinite;

  padding: 5px 0;
  font-family: var(--font-pixel);
  font-size: 0.55rem;     /* ✏️ Taille du texte du bandeau */
  color: #fff;
  letter-spacing: 0.1em;
  overflow: hidden;
  white-space: nowrap;
  border-top:    2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
}

.marquee-inner {
  display: inline-block;
  animation: marqueeScroll 28s linear infinite; /* ✏️ Vitesse : réduire = plus rapide */
  padding-left: 100%;
}


/* =============================================================
   4. MISE EN PAGE (Layout)
   ============================================================= */

.page-wrapper {
  display: grid;
  grid-template-columns: 160px 1fr; /* ✏️ Largeur sidebar : modifie 160px */
  min-height: 100vh;
}

.main-content {
  padding-bottom: 60px;
}


/* =============================================================
   5. SIDEBAR (Menu latéral)
   ─────────────────────────
   ✏️ Pour ajouter un lien : copier-coller un <li> dans le HTML
   ============================================================= */

.sidebar {
  background: linear-gradient(180deg, #0D0030 0%, #1A004D 40%, #0D0030 100%);
  border-right: 2px solid var(--gold);
  padding: 14px 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 10;
}

/* Logo sidebar */
.sidebar-logo {
  text-align: center;
  padding: 10px 8px 16px;
  border-bottom: 1px dashed var(--gold);
  margin-bottom: 10px;
}

.sidebar-logo .star-spin {
  display: inline-block;
  font-size: 1.6rem;
  animation: spin 4s linear infinite;
  filter: drop-shadow(0 0 6px var(--gold));
}

.sidebar-logo p {
  font-family: var(--font-cursive);
  font-size: 0.85rem;   /* ✏️ Taille du nom dans la sidebar */
  color: var(--gold);
  line-height: 1.3;
  margin-top: 6px;
  text-shadow: 0 0 8px var(--gold);
}

/* Liens de navigation */
.sidebar nav ul {
  list-style: none;
}

.sidebar nav ul li {
  border-bottom: 1px solid rgba(255, 215, 0, 0.1);
}

.sidebar nav ul li a {
  display: block;
  padding: 9px 14px;
  font-family: var(--font-pixel);
  font-size: 0.42rem;   /* ✏️ Taille des liens du menu */
  color: var(--cream);
  letter-spacing: 0.04em;
  line-height: 1.6;
  transition: background 0.15s, color 0.15s;
}

.sidebar nav ul li a::before {
  content: '▶';
  color: var(--gold);
  margin-right: 6px;
  font-size: 0.5rem;
  opacity: 0;
  transition: opacity 0.15s;
}

.sidebar nav ul li a:hover {
  background: rgba(255, 215, 0, 0.1);
  color: var(--gold);
  text-decoration: none;
}

.sidebar nav ul li a:hover::before {
  opacity: 1;
}

/* Compteur visiteurs */
.visitor-box {
  margin: 16px 8px 0;
  border: 1px solid var(--teal);
  padding: 8px 6px;
  text-align: center;
  background: rgba(0, 206, 209, 0.05);
}

.visitor-box p {
  font-family: var(--font-pixel);
  font-size: 0.38rem;
  color: var(--teal);
  margin-bottom: 6px;
  line-height: 1.6;
}

.counter-digits {
  font-family: var(--font-retro);
  font-size: 1.6rem;
  color: var(--gold);
  background: #000;
  padding: 2px 8px;
  border: 1px inset var(--gold);
  letter-spacing: 4px;
}

/* Encadré clignotant "Under Construction" sidebar */
.blinkbox {
  margin: 12px 8px 0;
  text-align: center;
  font-family: var(--font-pixel);
  font-size: 0.38rem;
  padding: 6px;
  border: 2px dashed var(--pink);
  color: var(--pink);
  animation: blinkBorder 1.2s step-end infinite;
}


/* =============================================================
   6. HEADER
   ─────────
   ✏️ Le titre et le sous-titre se modifient dans le HTML
   ============================================================= */

header {
  text-align: center;
  padding: 28px 20px 20px;
  background: linear-gradient(180deg, rgba(155, 89, 182, 0.2) 0%, transparent 100%);
  border-bottom: 2px solid rgba(255, 215, 0, 0.3);
}

/* Rangée d'étoiles au-dessus du titre */
header::before {
  content: '✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦';
  /* ✏️ Remplace les ✦ par d'autres symboles si tu veux */
  display: block;
  color: var(--gold);
  font-size: 0.7rem;
  letter-spacing: 6px;
  opacity: 0.4;
  margin-bottom: 12px;
  animation: blinkStar 2s step-end infinite;
}

.header-title {
  font-family: var(--font-cursive);
  font-size: clamp(2rem, 5vw, 3.6rem); /* ✏️ Taille du grand titre */
  background: linear-gradient(90deg,
    var(--gold), var(--pink), var(--gold2), var(--teal));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradShift 3s linear infinite;
  filter: drop-shadow(2px 2px 0 rgba(155, 89, 182, 0.5));
}

.header-sub {
  font-family: var(--font-pixel);
  font-size: 0.55rem;   /* ✏️ Taille du sous-titre */
  color: var(--pink);
  letter-spacing: 0.15em;
  margin-top: 8px;
  text-shadow: 0 0 10px var(--pink);
}

.header-stars {
  font-size: 1.4rem;
  letter-spacing: 8px;
  display: block;
  margin: 10px 0 0;
  animation: blinkStar 1.5s step-end infinite;
}

.welcome-box {
  display: inline-block;
  margin: 14px auto 0;
  border: 2px solid var(--gold);
  background: rgba(255, 215, 0, 0.07);
  padding: 8px 20px;
  font-size: 1rem;
  color: var(--gold);
  letter-spacing: 0.1em;
}

.welcome-box span { color: var(--pink); }


/* =============================================================
   7. TITRES DE SECTIONS
   ============================================================= */

.retro-section-title {
  font-family: var(--font-pixel);
  font-size: 0.6rem;    /* ✏️ Taille des titres de sections */
  color: #fff;
  text-align: center;
  padding: 8px 20px;
  margin: 32px 24px 20px;
  background: linear-gradient(90deg, var(--purple), var(--pink2));
  border: 2px solid var(--gold);
  letter-spacing: 0.12em;
  text-shadow: 1px 1px 0 #000;
}

.retro-section-title::before,
.retro-section-title::after {
  content: ' ★ ';
  color: var(--gold);
}


/* =============================================================
   8. BANNIÈRE UNDER CONSTRUCTION
   ============================================================= */

.under-construction {
  margin: 24px;
  padding: 10px;
  border: 3px dashed var(--pink);
  background: rgba(255, 20, 147, 0.06);
  text-align: center;
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  color: var(--pink);
  animation: blinkBorder 1s step-end infinite;
  letter-spacing: 0.08em;
  line-height: 1.8;
}

/* ✏️ Pour masquer cette bannière, ajoute display:none; ici */


/* =============================================================
   9. GALERIE DES ERAS
   ───────────────────
   ✏️ Pour ajouter une carte : copier-coller un bloc <div class="era-card"> dans le HTML
   ============================================================= */

.eras-grid {
  display: grid;
  /* ✏️ Modifie 220px pour changer la largeur minimale des cartes */
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  padding: 0 24px;
}

.era-card {
  border: 2px solid var(--gold);
  background: linear-gradient(145deg,
    rgba(13, 0, 48, 0.9),
    rgba(26, 0, 77, 0.7));
  position: relative;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
  animation: fadeUp 0.5s ease both;
}

/* Barre colorée en haut de chaque carte */
.era-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--pink), var(--teal));
}

.era-card:hover {
  transform: translateY(-4px);
  box-shadow: 4px 4px 0 var(--gold), 0 0 20px rgba(255, 215, 0, 0.3);
}

/* Délais d'animation pour chaque carte (effet cascade) */
.era-card:nth-child(1) { animation-delay: .05s; }
.era-card:nth-child(2) { animation-delay: .10s; }
.era-card:nth-child(3) { animation-delay: .15s; }
.era-card:nth-child(4) { animation-delay: .20s; }
.era-card:nth-child(5) { animation-delay: .25s; }
.era-card:nth-child(6) { animation-delay: .30s; }
/* ✏️ Ajouter :nth-child(7), (8)... si tu ajoutes des cartes */

/* Zone image / emoji */
.era-placeholder {
  height: 140px;         /* ✏️ Hauteur de la zone image */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 215, 0, 0.03)  0px,
    rgba(255, 215, 0, 0.03)  2px,
    transparent              2px,
    transparent             10px
  );
  border-bottom: 2px dashed rgba(255, 215, 0, 0.3);
}

/*
  ✏️ POUR METTRE UNE VRAIE PHOTO :
  Remplace <div class="era-placeholder">🌟</div>
  par      <img class="era-img" src="images/fearless.jpg" alt="Fearless Era">
  et utilise la règle ci-dessous :

  .era-img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
    border-bottom: 2px dashed rgba(255,215,0,0.3);
  }
*/

.era-info { padding: 10px 12px 12px; }

.era-year {
  font-family: var(--font-pixel);
  font-size: 0.38rem;
  color: var(--teal);
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}

.era-name {
  font-family: var(--font-cursive);
  font-size: 1.25rem;
  color: var(--gold);
  text-shadow: 1px 1px 0 rgba(255, 105, 180, 0.5);
  margin-bottom: 6px;
}

.era-desc {
  font-size: 0.9rem;
  color: rgba(255, 253, 224, 0.7);
  line-height: 1.4;
}

/* Carte cliquable = <a> au lieu de <div> */
a.era-card {
  display: block;
  color: inherit;
  text-decoration: none;
}
a.era-card:hover { text-decoration: none; }

/* Bouton "DÉCOUVRIR →" en bas de chaque carte */
.era-cta {
  display: inline-block;
  margin-top: 10px;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.38rem;
  color: var(--gold);
  letter-spacing: 0.12em;
  border-bottom: 1px solid rgba(255, 215, 0, 0.3);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}

a.era-card:hover .era-cta {
  color: var(--pink);
  border-color: var(--pink);
}


/* =============================================================
   10. GUESTBOOK — Messages fans
   ============================================================= */

.fan-messages {
  display: grid;
  grid-template-columns: 1fr 1fr; /* ✏️ Passe à 1fr pour une colonne */
  gap: 14px;
  padding: 0 24px;
  margin-bottom: 24px;
}

.fan-card {
  border: 1px solid rgba(255, 215, 0, 0.35);
  background: rgba(13, 0, 48, 0.7);
  padding: 14px;
  position: relative;
  animation: fadeUp 0.5s ease both;
}

/* Grand guillemet décoratif */
.fan-card::before {
  content: '"';
  position: absolute;
  top: 2px; left: 8px;
  font-size: 3rem;
  color: var(--gold);
  opacity: 0.2;
  font-family: Georgia, serif;
  line-height: 1;
}

.fan-message {
  font-size: 1rem;
  color: rgba(255, 253, 224, 0.85);
  line-height: 1.5;
  margin-bottom: 10px;
}

.fan-author-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fan-avatar {
  width: 30px;
  height: 30px;
  border: 1px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  background: rgba(255, 215, 0, 0.08);
  flex-shrink: 0;
}

.fan-name-txt {
  font-family: var(--font-pixel);
  font-size: 0.38rem;
  color: var(--gold);
  line-height: 1.8;
}

.fan-loc-txt {
  font-size: 0.75rem;
  color: var(--teal);
}


/* =============================================================
   11. FORMULAIRE GUESTBOOK
   ============================================================= */

.guestbook-form {
  margin: 0 24px;
  border: 2px solid var(--gold);
  background: rgba(13, 0, 48, 0.8);
  padding: 24px;
  position: relative;
}

/* Étiquette flottante "[ GUESTBOOK ]" */
.guestbook-form::before {
  content: '[ GUESTBOOK ]';
  position: absolute;
  top: -10px;
  left: 20px;
  background: var(--navy);
  padding: 0 10px;
  font-family: var(--font-pixel);
  font-size: 0.45rem;
  color: var(--gold);
  letter-spacing: 0.1em;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-group label {
  font-family: var(--font-pixel);
  font-size: 0.38rem;
  color: var(--teal);
  letter-spacing: 0.08em;
}

.form-group input,
.form-group textarea,
.form-group select {
  background: #000;
  border: 1px solid var(--gold);
  padding: 8px 10px;
  color: var(--cream);
  font-family: var(--font-retro);
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--pink);
  box-shadow: 0 0 8px rgba(255, 105, 180, 0.4);
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
}

.form-group select option { background: #000; }

.form-full { margin-bottom: 12px; }

.btn-retro {
  display: block;
  margin: 16px auto 0;
  padding: 10px 32px;
  background: linear-gradient(90deg, var(--purple), var(--pink2));
  border: 2px solid var(--gold);
  color: #fff;
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
  text-shadow: 1px 1px 0 #000;
}

.btn-retro:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--gold);
}

.btn-retro:active { transform: translate(0, 0); box-shadow: none; }

.confirm-msg {
  display: none;
  text-align: center;
  color: var(--gold);
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  margin-top: 12px;
  line-height: 1.8;
}


/* =============================================================
   12. WEBRING (Bannières 88×31)
   ✏️ Pour ajouter une bannière : copier un <div class="retro-banner"> dans le HTML
   ============================================================= */

.webring-section {
  margin: 24px;
  border: 1px dashed rgba(255, 215, 0, 0.3);
  padding: 14px;
  text-align: center;
}

.webring-title {
  font-family: var(--font-pixel);
  font-size: 0.4rem;
  color: var(--gold);
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}

.banner-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

/* Format classique 88×31 pixels */
.retro-banner {
  width: 88px;
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gold);
  font-family: var(--font-pixel);
  font-size: 0.28rem;
  text-align: center;
  line-height: 1.4;
  cursor: pointer;
  transition: opacity 0.2s;
}

.retro-banner:hover { opacity: 0.7; }

/* ✏️ 4 variantes de couleur pour les bannières */
.b1 { background: linear-gradient(135deg, #001, #003); color: var(--gold); }
.b2 { background: linear-gradient(135deg, #300, #600); color: #FFD700;    }
.b3 { background: linear-gradient(135deg, #020030, #040060); color: var(--pink); }
.b4 { background: linear-gradient(135deg, #002020, #004040); color: var(--teal); }


/* =============================================================
   13. FOOTER
   ============================================================= */

footer {
  text-align: center;
  padding: 30px 20px;
  border-top: 2px solid rgba(255, 215, 0, 0.2);
  background: rgba(0, 0, 0, 0.3);
  font-size: 0.85rem;
  color: rgba(255, 253, 224, 0.4);
}

.footer-hearts {
  font-size: 1.2rem;
  letter-spacing: 6px;
  display: block;
  margin-bottom: 8px;
  animation: blinkStar 1.8s step-end infinite;
}

footer a { color: var(--gold); }
footer p { margin-top: 4px; }


/* =============================================================
   14. ANIMATIONS
   ============================================================= */

/* Dégradé animé (titre, marquee, boutons) */
@keyframes gradShift {
  0%   { background-position: 0%   50%; }
  100% { background-position: 400% 50%; }
}

/* Défilement du bandeau */
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Rotation de l'étoile sidebar */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Clignotement étoiles header */
@keyframes blinkStar {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 0.9; }
}

/* Clignotement bordure */
@keyframes blinkBorder {
  0%, 100% { border-color: var(--pink); color: var(--pink); }
  50%      { border-color: var(--gold); color: var(--gold); }
}

/* Apparition depuis le bas */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0);    }
}


/* =============================================================
   15. SCROLLBAR & RESPONSIVE
   ============================================================= */

/* Scrollbar stylisée */
::-webkit-scrollbar       { width: 8px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--purple), var(--pink2));
  border: 1px solid var(--gold);
}

/* Mobile : sidebar passe en haut */
@media (max-width: 540px) {
  .page-wrapper {
    grid-template-columns: 1fr;
  }

  .sidebar {
    height: auto;
    position: relative;
    border-right: none;
    border-bottom: 2px solid var(--gold);
  }

  .fan-messages {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}