/* ==========================================================================
   TOKENS — palette « rouge portugais » + kitsch chaleureux 80s
   ========================================================================== */
:root{
  --rouge-portugal:#c31e2e;
  --rouge-fonce:#7a1220;
  --or-cassette:#e2a340;
  --azulejo-bleu:#1c5b73;
  --azulejo-bleu-clair:#4a94a8;
  --creme-vinyle:#f2e6cf;
  --nuit-lisbonne:#241226;
  --nuit-lisbonne-2:#3a1730;
  --corail:#f0754a;
  --papier:#f7ecd8;
  --encre:#2b1a12;

  --font-display:'Anton', sans-serif;
  --font-editorial:'Playfair Display', serif;
  --font-signature:'Yellowtail', cursive;
  --font-corps:'Poppins', sans-serif;
  --font-vhs:'Space Mono', monospace;

  --radius-polaroid: 4px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--papier);
  color:var(--encre);
  font-family:var(--font-corps);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Respect du mouvement réduit */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}

img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none;}

::selection{background:var(--rouge-portugal); color:var(--papier);}

/* Grain VHS global superposé à toute la page */
.grain-overlay{
  position:fixed; inset:0; pointer-events:none; z-index:9999;
  background-image: url("../assets/images/effets/grain-vhs.svg");
  opacity:0.05;
  mix-blend-mode:overlay;
}
.scanlines{
  position:fixed; inset:0; pointer-events:none; z-index:9998;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0.09) 0px, rgba(0,0,0,0.09) 1px, transparent 2px, transparent 4px);
  opacity:0.5;
}

/* ==========================================================================
   ÉCRAN DE CHARGEMENT — imitation démarrage magnétoscope
   ========================================================================== */
#boot-screen{
  position:fixed; inset:0; background:#000; z-index:10000;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  color:#0f0; font-family:var(--font-vhs);
  transition:opacity .8s ease, visibility .8s ease;
}
#boot-screen.hidden{opacity:0; visibility:hidden; pointer-events:none;}
.boot-static{
  position:absolute; inset:0;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 3px);
  animation:staticflicker 0.12s steps(2) infinite;
}
@keyframes staticflicker{ 50%{opacity:0.4;} }
.boot-text{ position:relative; text-align:center; letter-spacing:2px; font-size:0.9rem; }
.boot-text .big{ font-size:1.6rem; color:#fff; display:block; margin-bottom:10px; animation:blink 1s steps(2) infinite; }
@keyframes blink{ 50%{ opacity:0.2; } }

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
header.nav{
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 5vw;
  background:linear-gradient(to bottom, rgba(36,18,38,0.92), rgba(36,18,38,0));
  transition:background .4s ease, padding .4s ease;
}
header.nav.solid{ background:rgba(36,18,38,0.96); padding:8px 5vw; box-shadow:0 4px 20px rgba(0,0,0,.35);}
.logo-cassette{
  display:flex; align-items:center; gap:10px; color:var(--creme-vinyle);
  font-family:var(--font-display); font-size:1.1rem; letter-spacing:1px;
}
.logo-cassette .reel{
  width:22px; height:22px; border-radius:50%;
  background:radial-gradient(circle, var(--or-cassette) 0 3px, transparent 4px), conic-gradient(var(--rouge-portugal) 0 0);
  border:2px solid var(--or-cassette);
  animation:spin 3s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
nav.liens{ display:flex; gap:28px; }
nav.liens a{
  color:var(--creme-vinyle); font-size:.78rem; letter-spacing:1.5px; text-transform:uppercase;
  font-weight:600; position:relative; padding-bottom:4px;
}
nav.liens a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--corail);
  transition:width .3s ease;
}
nav.liens a:hover::after{ width:100%; }
.burger{ display:none; flex-direction:column; gap:5px; }
.burger span{ width:24px; height:2px; background:var(--creme-vinyle); }

/* Réseaux sociaux dans la navigation */
.nav-social{
  display:flex; align-items:center; gap:16px;
  margin-left:26px; padding-left:22px; border-left:1px solid rgba(247,236,216,.25);
}

.lang-switch{
  display:flex; align-items:center; gap:10px;
  margin-left:20px; padding-left:18px; border-left:1px solid rgba(247,236,216,.25);
  font-family:var(--font-vhs); font-size:.66rem; letter-spacing:.5px; white-space:nowrap;
}
.lang-option{
  color:var(--creme-vinyle); opacity:.55; transition:opacity .25s ease, color .25s ease;
}
.lang-option:hover{ opacity:1; }
.lang-option.lang-option--actif{
  opacity:1; color:#fff; font-weight:700; text-decoration:underline; text-underline-offset:3px;
}
.reseau-icone-nav{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:20px; height:20px; color:var(--creme-vinyle); flex-shrink:0;
  transition:transform .3s ease, filter .3s ease, color .3s ease;
}
.reseau-icone-nav svg{ width:100%; height:100%; }
.reseau-icone-nav:hover, .reseau-icone-nav:focus-visible{
  color:#fff; transform:scale(1.16);
  filter:drop-shadow(0 0 6px rgba(226,163,64,.85)) drop-shadow(0 0 12px rgba(226,163,64,.45));
}
.reseau-icone-nav--attente{ cursor:default; }

.nav-tooltip{
  position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(-4px);
  background:var(--nuit-lisbonne); color:var(--papier); font-family:var(--font-corps); font-size:.72rem;
  white-space:nowrap; padding:7px 12px; border-radius:6px; border:1px solid rgba(226,163,64,.35);
  box-shadow:0 10px 20px rgba(0,0,0,.35);
  opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease; z-index:20;
}
.reseau-icone-nav--attente:hover .nav-tooltip,
.reseau-icone-nav--attente:focus-visible .nav-tooltip{
  opacity:1; transform:translateX(-50%) translateY(0);
}

@media (max-width:820px){
  nav.liens{
    position:fixed; top:0; right:-100%; height:100vh; width:70%;
    background:var(--nuit-lisbonne); flex-direction:column; justify-content:center; align-items:flex-start;
    padding:40px; gap:26px; transition:right .4s ease; z-index:400;
  }
  nav.liens.open{ right:0; }
  .burger{ display:flex; z-index:600; }

  .nav-social{
    margin-left:0; padding-left:0; border-left:none;
    margin-top:6px; padding-top:24px; border-top:1px solid rgba(247,236,216,.25);
    gap:22px;
  }
  .reseau-icone-nav{ width:24px; height:24px; }

  .lang-switch{
    margin-left:0; padding-left:0; border-left:none;
    margin-top:6px; padding-top:20px; border-top:1px solid rgba(247,236,216,.25);
  }
}

/* ==========================================================================
   HERO — coucher de soleil du Portugal, effet parallaxe
   ========================================================================== */
.hero{
  position:relative; height:100vh; min-height:560px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; text-align:center;
}
/* Fond photo (image générée) à la place du décor CSS coucher de soleil/palmiers */
.hero-photo{
  position:absolute; inset:0; z-index:0; overflow:hidden;
}
.hero-photo img{
  width:100%; height:100%; object-fit:cover; object-position:center 30%; display:block;
}
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to bottom, rgba(12,5,16,.15) 0%, rgba(12,5,16,.35) 55%, rgba(12,5,16,.7) 100%);
}
/* Anciens éléments de décor CSS : conservés cachés (hidden) uniquement pour que
   le script de parallaxe (qui cible ces ids) continue de fonctionner sans erreur */
.hero-sky, .hero-sun, .hero-stripes, .hero-sea, .hero-palms{ display:none; }
@keyframes vagues{ from{ background-position-x:0; } to{ background-position-x:200px; } }

.hero-content{ position:relative; z-index:5; color:var(--papier); padding:0 20px; }
.eyebrow-tape{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-vhs); font-size:.75rem;
  letter-spacing:3px; background:rgba(0,0,0,.35); padding:6px 14px; border-radius:2px; margin-bottom:22px;
  border:1px solid rgba(255,255,255,.25);
}
.eyebrow-tape .dot{ width:8px; height:8px; border-radius:50%; background:#ff3b3b; animation:blink 1.1s steps(2) infinite; }

.hero h1{
  font-family:var(--font-display); font-size:clamp(3rem, 11vw, 8.5rem); line-height:0.92;
  letter-spacing:2px; text-shadow:0 6px 0 var(--rouge-fonce), 0 14px 24px rgba(0,0,0,.45);
  -webkit-text-stroke:1px rgba(255,255,255,0.06);
}
.hero .sub{
  font-family:var(--font-editorial); font-style:italic; font-weight:500; font-size:clamp(1.1rem, 2.6vw, 1.7rem);
  margin-top:18px; color:var(--creme-vinyle); opacity:0.95;
}
.hero .signature{ font-family:var(--font-signature); font-size:clamp(1.4rem,3vw,2rem); margin-top:16px; color:var(--or-cassette); }

.scroll-cue{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:5; color:var(--papier);
  display:flex; flex-direction:column; align-items:center; gap:6px; font-family:var(--font-vhs); font-size:.7rem; letter-spacing:2px;
  animation:bob 2s ease-in-out infinite;
}
@keyframes bob{ 50%{ transform:translate(-50%, 8px); } }
.scroll-cue .barre{ width:1px; height:30px; background:linear-gradient(to bottom, var(--papier), transparent); }

/* ==========================================================================
   SECTIONS GÉNÉRIQUES
   ========================================================================== */
section{ position:relative; padding:110px 5vw; }
.section-tete{ max-width:720px; margin:0 auto 60px; text-align:center; }
.section-tete .cachet{
  font-family:var(--font-vhs); font-size:.72rem; letter-spacing:3px; text-transform:uppercase; color:var(--rouge-portugal);
  border:1px solid var(--rouge-portugal); display:inline-block; padding:4px 12px; border-radius:2px; margin-bottom:16px;
}
.section-tete h2{
  font-family:var(--font-display); font-size:clamp(2.1rem,5vw,3.6rem); color:var(--nuit-lisbonne); letter-spacing:1px;
}
.section-tete p{ font-family:var(--font-editorial); font-style:italic; font-size:1.15rem; color:var(--rouge-fonce); margin-top:14px; }

.reveal{ opacity:0; transform:translateY(36px); transition:opacity .8s ease, transform .8s ease; }
.reveal.visible{ opacity:1; transform:translateY(0); }

/* ==========================================================================
   BIOGRAPHIE — polaroids dessinés en CSS + frise chronologique
   ========================================================================== */
#biographie{ background:var(--creme-vinyle); }
.bio-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; max-width:1180px; margin:0 auto; }
.bio-texte p{ margin-bottom:18px; line-height:1.75; font-size:1.02rem; color:var(--encre); }
.bio-texte strong{ color:var(--rouge-portugal); }

.polaroids{ position:relative; height:460px; }
.polaroid{
  position:absolute; width:230px; background:#fff; padding:12px 12px 40px; border-radius:var(--radius-polaroid);
  box-shadow:0 14px 30px rgba(0,0,0,.28); transition:transform .35s ease, box-shadow .35s ease; cursor:default;
}
.polaroid:hover{ transform:translateY(-8px) rotate(0deg) scale(1.03); box-shadow:0 22px 40px rgba(0,0,0,.35); z-index:5; }
.polaroid .photo{ width:100%; height:190px; border-radius:2px; }
.polaroid figcaption{
  font-family:var(--font-signature); font-size:1.2rem; text-align:center; margin-top:10px; color:var(--rouge-fonce);
}
.polaroid.pol1{ top:0; left:6%; transform:rotate(-6deg); background:#fff; }
.polaroid.pol2{ top:70px; left:44%; transform:rotate(5deg); }
.polaroid.pol3{ top:250px; left:14%; transform:rotate(3deg); }

.frise{ margin:70px auto 0; max-width:900px; }
.frise-item{ display:grid; grid-template-columns:90px 1fr; gap:22px; padding:20px 0; border-top:1px dashed rgba(122,18,32,.35); }
.frise-item:first-child{ border-top:none; }
.frise-annee{ font-family:var(--font-display); font-size:1.6rem; color:var(--rouge-portugal); }
.frise-texte h4{ font-family:var(--font-corps); font-weight:700; margin-bottom:4px; }
.frise-texte p{ font-size:.92rem; color:#5a4a3a; }

@media (max-width:900px){
  .bio-grid{ grid-template-columns:1fr; }
  .polaroids{ height:520px; }
  .frise-item{ grid-template-columns:70px 1fr; }
}

/* ==========================================================================
   DISCOGRAPHIE — Saudade Jukebox (cadre PNG décoratif + interface HTML/CSS/JS)
   ========================================================================== */
#discographie{ background:var(--nuit-lisbonne); color:var(--papier); position:relative; }
#discographie .section-tete h2{ color:var(--papier); }
#discographie .section-tete p{ color:var(--or-cassette); }

/* Scène : conteneur de référence, dimensionné sur le ratio réel du PNG (1536×1024) */
.jukebox-scene{ position:relative; max-width:1180px; margin:34px auto 0; aspect-ratio:1536/1024; }

/* Halo chaud diffus qui respire très lentement derrière le meuble */
.jukebox-lueur{
  position:absolute; inset:-6%; z-index:0; pointer-events:none; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(240,117,74,.3) 0%, rgba(226,163,64,.15) 42%, transparent 72%);
  filter:blur(55px);
  animation:jukeboxRespiration 7s ease-in-out infinite;
}
@keyframes jukeboxRespiration{
  0%,100%{ opacity:.7; }
  50%{ opacity:1; }
}
/* Flash bref déclenché par JS au changement d'album (pulsation < 300ms) */
.jukebox-flash{
  position:absolute; inset:-6%; z-index:0; pointer-events:none; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(226,163,64,.6) 0%, transparent 68%);
  filter:blur(45px); opacity:0; transition:opacity .13s ease-out;
}
.jukebox-flash.actif{ opacity:1; }

/* Le cadre : image à ouverture transparente, superposée au-dessus du contenu (les tubes néon
   masquent naturellement les bords de l'interface, aucun besoin de masque CSS). */
.jukebox-cadre{
  position:absolute; inset:0; z-index:3; width:100%; height:100%;
  background-size:contain; background-position:center; background-repeat:no-repeat;
  filter:drop-shadow(0 25px 45px rgba(0,0,0,.5));
  pointer-events:none;
}

/* L'écran : zone interactive, positionnée dans l'ouverture transparente du cadre.
   Repères mesurés sur le PNG (1536×1024) : ouverture ≈ 17,5%–82,5% en largeur, 17,5%–81% en hauteur. */
.jukebox-ecran{
  position:absolute; z-index:2; top:17.5%; left:17.5%; width:65%; height:63%;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:2.2% 3%; overflow:hidden; border-radius:14px;
  background:radial-gradient(ellipse at 50% 35%, #241226 0%, #0f0812 75%);
  box-shadow:inset 0 0 40px rgba(0,0,0,.6), inset 0 0 90px rgba(240,117,74,.08);
}

/* Reflet très discret qui traverse la vitre toutes les ~17 secondes */
.jukebox-reflet{
  position:absolute; inset:0; z-index:6; pointer-events:none; mix-blend-mode:screen;
  background:linear-gradient(115deg, transparent 42%, rgba(255,255,255,.07) 50%, transparent 58%);
  transform:translateX(-140%);
  animation:jukeboxReflet 17s ease-in-out infinite;
}
@keyframes jukeboxReflet{
  0%{ transform:translateX(-140%); }
  9%{ transform:translateX(140%); }
  100%{ transform:translateX(140%); }
}

.jukebox-fleche{
  position:absolute; top:24%; transform:translateY(-50%); width:30px; height:30px; border-radius:50%;
  background:rgba(0,0,0,.4); border:1px solid rgba(226,163,64,.5); color:var(--or-cassette);
  font-size:1.15rem; line-height:1; display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, border-color .2s ease; z-index:7; cursor:pointer;
}
.jukebox-fleche:hover{ background:rgba(226,163,64,.28); border-color:rgba(226,163,64,.85); }
.jukebox-fleche--gauche{ left:2px; }
.jukebox-fleche--droite{ right:2px; }

.jukebox-vitrine{ position:relative; width:100%; overflow:hidden; padding:16px 0; touch-action:pan-y; cursor:grab; flex-shrink:0; }
.jukebox-vitrine:active{ cursor:grabbing; }
.jukebox-rail{
  display:flex; align-items:flex-start; gap:18px; list-style:none; padding:0; margin:0;
  transition:transform .5s cubic-bezier(.4,0,.2,1); will-change:transform;
}

.jukebox-disque{
  flex:0 0 180px; width:180px; opacity:.42; transform:scale(.78); transition:transform .4s ease, opacity .4s ease;
  cursor:pointer; z-index:1;
}
.jukebox-disque.est-actif{ opacity:1; transform:scale(1.1); cursor:default; z-index:2; }
.jukebox-disque:hover, .jukebox-disque:focus-within{ z-index:3; }

.jukebox-pochette-scene{ position:relative; aspect-ratio:1/1; }

.jukebox-vinyle{
  position:absolute; top:6%; left:6%; width:88%; height:88%; border-radius:50%; z-index:1;
  background:repeating-radial-gradient(circle, #111 0 3px, #1c1c1c 3px 6px);
  box-shadow:0 0 0 3px #000, 0 8px 18px rgba(0,0,0,.5);
  transform:translateX(0) rotate(0deg);
  transition:transform .55s cubic-bezier(.2,.9,.2,1.15);
}
.jukebox-vinyle::after{
  content:''; position:absolute; top:50%; left:50%; width:30%; height:30%; transform:translate(-50%,-50%);
  border-radius:50%; background:var(--rouge-portugal); border:2px solid var(--or-cassette);
}

.jukebox-pochette{
  position:absolute; inset:0; z-index:2; border-radius:5px; background-size:cover; background-position:center;
  background-color:var(--nuit-lisbonne-2); box-shadow:0 12px 24px rgba(0,0,0,.45); overflow:hidden;
  transition:transform .5s ease, box-shadow .3s ease;
}
.jukebox-disque.est-actif .jukebox-pochette{ box-shadow:0 0 0 2px var(--or-cassette), 0 0 18px rgba(226,163,64,.4), 0 14px 28px rgba(0,0,0,.5); }

.jukebox-disque:hover .jukebox-vinyle,
.jukebox-disque:focus-within .jukebox-vinyle{ transform:translateX(30%) rotate(150deg); }
.jukebox-disque:hover .jukebox-pochette,
.jukebox-disque:focus-within .jukebox-pochette{ transform:translateX(-9%) rotate(-3deg); }

.jukebox-overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:9px;
  background:linear-gradient(to top, rgba(12,5,16,.95) 0%, rgba(12,5,16,.5) 55%, transparent 100%);
  opacity:0; transition:opacity .3s ease; color:var(--papier); text-align:left;
}
.jukebox-disque:hover .jukebox-overlay,
.jukebox-disque:focus-within .jukebox-overlay{ opacity:1; }
.jukebox-type{
  align-self:flex-start; font-family:var(--font-vhs); font-size:.52rem; letter-spacing:1px; text-transform:uppercase;
  color:var(--nuit-lisbonne); background:var(--or-cassette); padding:2px 6px; border-radius:3px; margin-bottom:5px;
}
.jukebox-titre{ font-family:var(--font-display); font-size:.72rem; line-height:1.15; margin-bottom:2px; }
.jukebox-annee{ font-family:var(--font-vhs); font-size:.6rem; color:var(--or-cassette); }

/* Panneau d'info de l'album sélectionné : mis à jour dynamiquement en JS */
.jukebox-info{ flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; justify-content:center; min-height:0; gap:2px; }
.jukebox-info-type{
  font-family:var(--font-vhs); font-size:.58rem; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--or-cassette); opacity:.85; margin-bottom:2px;
}
.jukebox-info-titre{ font-family:var(--font-display); font-size:clamp(.85rem,2.1vw,1.15rem); line-height:1.15; }
.jukebox-info-annee{ font-family:var(--font-vhs); font-size:.68rem; color:var(--or-cassette); margin-top:2px; }
.jukebox-info-desc{
  font-size:clamp(.68rem,1.5vw,.8rem); line-height:1.4; opacity:.85; max-width:32ch; margin-top:4px;
}

.jukebox-plateformes{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:8px; }
.lien-plateforme{
  display:inline-flex; align-items:center; gap:5px; padding:6px 10px; border-radius:18px;
  font-family:var(--font-corps); font-size:.62rem; font-weight:700; letter-spacing:.2px; color:#fff;
  border:1px solid rgba(255,255,255,.3); box-shadow:0 2px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .18s ease, box-shadow .18s ease, filter .2s ease;
}
.lien-plateforme svg{ width:13px; height:13px; flex-shrink:0; }
.lien-plateforme:hover{ transform:translateY(-2px); filter:brightness(1.15); }
.lien-plateforme.lien-spotify{ background:linear-gradient(160deg, #4fd68c, #1b8f4d); }
.lien-plateforme.lien-deezer{ background:linear-gradient(160deg, #c07dff, #8a2be2); }
.lien-plateforme.lien-apple{ background:linear-gradient(160deg, #ff7aa8, #e0245e); }
.lien-plateforme.lien-youtube{ background:linear-gradient(160deg, #ff6b5a, #d8291f); }
.lien-plateforme.lien-indisponible{
  background:rgba(255,255,255,.06); color:rgba(255,255,255,.35); border-color:rgba(255,255,255,.15);
  box-shadow:none; cursor:default; pointer-events:none;
}

.jukebox-puces{ display:flex; justify-content:center; flex-wrap:wrap; gap:6px; flex-shrink:0; }
.jukebox-puce{ width:6px; height:6px; border-radius:50%; background:rgba(226,163,64,.3); transition:background .25s ease, transform .25s ease; }
.jukebox-puce.est-actif{ background:var(--or-cassette); transform:scale(1.35); }

@media (max-width:900px){
  .jukebox-disque{ flex:0 0 138px; width:138px; }
  .jukebox-fleche{ width:26px; height:26px; font-size:1rem; }
}
@media (max-width:600px){
  .jukebox-ecran{ gap:6px; padding:2% 2.5%; }
  .jukebox-disque{ flex:0 0 102px; width:102px; }
  .jukebox-rail{ gap:12px; }
  .jukebox-fleche{ width:22px; height:22px; font-size:.85rem; }
  .jukebox-plateformes{ gap:4px; }
  .lien-plateforme{ padding:5px 8px; font-size:.56rem; }
  .lien-plateforme span{ display:none; }
}

/* ==========================================================================
   ARCHIVES — vidéothèque, grille de téléviseurs cathodiques
   ========================================================================== */
#archives{ background:var(--papier); }

.tele-grille{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:40px;
  max-width:1100px; margin:0 auto;
}

.tele-crt{
  position:relative; width:100%;
  transition:transform .3s ease, filter .3s ease;
  filter:drop-shadow(0 10px 10px rgba(0,0,0,.2)) drop-shadow(0 24px 22px rgba(0,0,0,.22));
}
.tele-tube{ position:relative; width:100%; aspect-ratio:1536/1024; }
.tele-crt:hover{
  transform:translateY(-4px);
  filter:drop-shadow(0 12px 12px rgba(0,0,0,.24)) drop-shadow(0 28px 26px rgba(0,0,0,.26)) drop-shadow(0 0 22px rgba(226,163,64,.4));
}

/* Le cadre : uniquement décoratif, jamais de contenu à l'intérieur */
.tele-cadre{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background-size:contain; background-position:center; background-repeat:no-repeat;
}

/* L'écran : agrandi pour occuper la quasi-totalité de la surface visible du tube (mesurée sur le PNG 1448×1086),
   tout en restant en retrait de la courbure des coins. */
.tele-ecran{
  position:absolute; z-index:2; top:11.5%; left:8.5%; width:68%; height:74%;
  border-radius:7% / 8%; overflow:hidden; background:#0c0c0e;
  transition:box-shadow .3s ease;
}
.tele-crt:hover .tele-ecran{ box-shadow:0 0 26px rgba(226,163,64,.4); }

.tele-vignette{
  position:relative; width:100%; height:100%; background-size:cover; background-position:center;
  background-color:#111; filter:saturate(.86) contrast(1.05) blur(.3px); transition:filter .3s ease;
}
.tele-crt:hover .tele-vignette{ filter:saturate(.92) contrast(1.14) brightness(1.15) blur(.2px); }

/* Effets CRT — visibles en permanence, mais discrets */
.tele-vignettage{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,.5) 100%);
  box-shadow:inset 0 0 24px rgba(0,0,0,.5);
}
.tele-scanlines{
  position:absolute; inset:0; pointer-events:none; opacity:.16;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.75) 0 1px, transparent 1px 3px);
}
/* Reflet façon vitre bombée : halo doux en haut à gauche + fin voile diagonal */
.tele-reflet{
  position:absolute; inset:0; pointer-events:none; opacity:.75; transition:opacity .3s ease;
  background:
    radial-gradient(ellipse 55% 38% at 30% 22%, rgba(255,255,255,.18) 0%, transparent 72%),
    linear-gradient(125deg, rgba(255,255,255,.06) 0%, transparent 38%);
}
.tele-crt:hover .tele-reflet{ opacity:1; }
/* Très léger bruit vidéo, réutilise le grain déjà présent sur le site */
.tele-bruit{
  position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background:url('assets/images/effets/grain-vhs.svg'); background-size:120px 120px;
  animation:bruitVideo .3s steps(2) infinite;
}
@keyframes bruitVideo{
  0%{ background-position:0 0; }
  50%{ background-position:14px 9px; }
  100%{ background-position:-9px 13px; }
}

.tele-power{
  position:absolute; z-index:3; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%; background:rgba(0,0,0,.4); color:#fff;
  border:2px solid var(--or-cassette); font-size:1rem; display:flex; align-items:center; justify-content:center;
  transition:transform .25s ease, background .25s ease;
}
.tele-crt:hover .tele-power{ transform:translate(-50%,-50%) scale(1.1); background:var(--rouge-portugal); }

/* Allumage façon tube cathodique (~300ms), avant l'apparition du lecteur */
@keyframes allumageCRT{
  0%{ filter:brightness(3.2); transform:scaleY(.02); }
  25%{ filter:brightness(2.2); transform:scaleY(.08); }
  65%{ filter:brightness(1.5); transform:scaleY(1); }
  100%{ filter:brightness(1); transform:scaleY(1); }
}
.tele-vignette.allumage{ animation:allumageCRT .3s ease-out; }

.tele-ecran iframe{ position:relative; z-index:2; width:100%; height:100%; border:0; display:block; }

.tele-legende{ margin-top:16px; text-align:center; font-size:.85rem; line-height:1.5; color:#5a4a3a; }
.tele-titre{ display:block; font-family:var(--font-display); font-size:1.05rem; letter-spacing:.3px; color:var(--nuit-lisbonne); margin-bottom:6px; }

@media (max-width:600px){

  .tele-grille{ grid-template-columns:1fr; max-width:420px; gap:44px; }
}

/* ==========================================================================
   CITATION — grande phrase éditoriale, effet machine à écrire léger au scroll
   ========================================================================== */
#citation{
  background:var(--rouge-portugal); color:var(--papier); text-align:center; padding:120px 8vw;
}
#citation blockquote{
  font-family:var(--font-editorial); font-style:italic; font-weight:700; font-size:clamp(1.6rem,4vw,2.8rem); line-height:1.4;
  transition:opacity .6s ease;
}
#citation blockquote.citation-masquee{ opacity:0; }
#citation cite{ display:block; margin-top:26px; font-family:var(--font-signature); font-size:1.4rem; font-style:normal; color:var(--or-cassette); }

/* ==========================================================================
   CONCEPT — la révélation du projet, respiration plus sobre et actuelle
   ========================================================================== */
#concept{ background:var(--azulejo-bleu); color:var(--papier); text-align:center; }
#concept .section-tete h2{ color:var(--papier); }
.cachet-clair{ border-color:var(--or-cassette); color:var(--or-cassette); }
.carte-concept{
  max-width:680px; margin:0 auto; background:rgba(0,0,0,.18); border:1px solid rgba(226,163,64,.35);
  border-radius:8px; padding:44px 40px; backdrop-filter:blur(2px);
}
.carte-concept p{ font-family:var(--font-editorial); font-style:italic; font-size:1.08rem; line-height:1.75; margin-bottom:18px; color:var(--creme-vinyle); }
.carte-concept .ligne-forte{ font-weight:700; color:var(--or-cassette); font-size:1.2rem; }
.carte-concept .bienvenue{
  font-family:var(--font-signature); font-style:normal; font-size:1.6rem; color:#fff; margin-top:10px; margin-bottom:0;
}

/* ==========================================================================
   AUJOURD'HUI — épilogue, réseaux sociaux (coucher de soleil + néon)
   ========================================================================== */
#aujourdhui{
  background:linear-gradient(180deg, var(--rouge-portugal) 0%, var(--nuit-lisbonne-2) 55%, var(--nuit-lisbonne) 100%);
  color:var(--papier); text-align:center; position:relative; overflow:hidden;
}
#aujourdhui .section-tete h2{ color:var(--papier); }
#aujourdhui .cachet-clair{ border-color:var(--or-cassette); color:var(--or-cassette); }
.aujourdhui-citation{
  font-family:var(--font-editorial); font-style:italic; font-size:1.2rem; margin-top:16px;
}
#aujourdhui .section-tete p{ color:#ffd447; }
.aujourdhui-texte{
  max-width:620px; margin:0 auto 56px; font-size:1rem; line-height:1.7; color:var(--creme-vinyle); opacity:.92;
}

.reseaux-grille{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:26px; max-width:1180px; margin:0 auto;
}

.reseau-carte{
  position:relative; display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:34px 22px 26px; border-radius:16px; color:var(--papier);
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(226,163,64,.28);
  box-shadow:0 20px 40px rgba(0,0,0,.3);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
a.reseau-carte:hover{
  transform:translateY(-6px);
  box-shadow:0 0 26px rgba(226,163,64,.25), 0 28px 50px rgba(0,0,0,.4);
  border-color:rgba(226,163,64,.65);
}

.reseau-icone{
  width:56px; height:56px; margin-bottom:18px; color:var(--or-cassette);
  filter:drop-shadow(0 0 6px rgba(226,163,64,.55));
}
.reseau-icone svg{ width:100%; height:100%; }

.reseau-nom{ font-family:var(--font-display); font-size:1.15rem; letter-spacing:.5px; margin-bottom:10px; }
.reseau-desc{ font-size:.86rem; line-height:1.55; color:var(--creme-vinyle); opacity:.85; flex:1; margin-bottom:18px; }

.reseau-badge{
  display:inline-block; font-family:var(--font-vhs); font-size:.62rem; letter-spacing:1px; text-transform:uppercase;
  color:var(--or-cassette); background:rgba(226,163,64,.12); border:1px solid rgba(226,163,64,.35);
  border-radius:20px; padding:6px 14px; margin-bottom:16px;
}
.reseau-badge--attente{ color:var(--creme-vinyle); background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.2); }

.reseau-cta{
  font-family:var(--font-corps); font-weight:600; font-size:.8rem; letter-spacing:.5px;
  color:var(--papier); display:inline-flex; align-items:center; gap:6px;
}
.reseau-cta::after{ content:'→'; transition:transform .25s ease; }
a.reseau-carte:hover .reseau-cta::after{ transform:translateX(4px); }

.reseau-carte--attente{
  cursor:default; opacity:.6; border-style:dashed;
}

@media (max-width:900px){
  .reseaux-grille{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:600px){
  .reseaux-grille{ grid-template-columns:1fr; }
}

/* ==========================================================================
   FOOTER — cachet d'archive
   ========================================================================== */
footer{
  background:var(--nuit-lisbonne); color:var(--creme-vinyle); padding:60px 5vw 40px; text-align:center;
}
.tampon{
  display:inline-block; border:2px solid var(--or-cassette); color:var(--or-cassette); border-radius:50%;
  width:118px; height:118px; display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--font-vhs); font-size:.62rem; letter-spacing:1px; line-height:1.3; transform:rotate(-8deg);
  margin:0 auto 24px;
}
footer .liens-bas{ display:flex; justify-content:center; gap:24px; margin:18px 0; flex-wrap:wrap; font-size:.8rem; }
footer .liens-bas a:hover{ color:var(--corail); }
footer small{ display:block; margin-top:18px; opacity:.6; font-size:.72rem; }

/* Utilitaires responsives générales */
@media (max-width:600px){
  section{ padding:80px 6vw; }
  .polaroid{ width:180px; }
}


/* ==========================================================================
   AJOUTS — polaroids, logo sticker
   ========================================================================== */
.polaroid .photo{ background-size:cover; background-position:center; }

.logo-sticker{
  height:34px; background:#fff; padding:4px 10px; border-radius:4px;
  transform:rotate(-3deg); box-shadow:0 3px 10px rgba(0,0,0,.35);
}
.logo-sticker-footer{
  height:64px; background:#fff; padding:8px 18px; border-radius:6px;
  transform:rotate(-2deg); box-shadow:0 8px 20px rgba(0,0,0,.4); margin:0 auto 22px; display:block;
}
@media (max-width:600px){
  .logo-sticker{ height:28px; }
}


/* ==========================================================================
   LOGO NÉON — remplace le H1 texte dans le hero
   ========================================================================== */
.logo-neon-wrap{ display:flex; justify-content:center; }
.logo-neon{
  width:min(88vw, 620px);
  filter:
    drop-shadow(0 0 6px #ff7a7a)
    drop-shadow(0 0 16px #ff2b4d)
    drop-shadow(0 0 32px #4a94a8)
    drop-shadow(0 0 54px #1c5b73);
  animation: neonFlicker 3.2s infinite;
}
@keyframes neonFlicker{
  0%, 18%, 22%, 25%, 53%, 57%, 100%{
    filter:
      drop-shadow(0 0 6px #ff7a7a)
      drop-shadow(0 0 16px #ff2b4d)
      drop-shadow(0 0 32px #4a94a8)
      drop-shadow(0 0 54px #1c5b73);
    opacity:1;
  }
  20%, 24%, 55%{
    filter:
      drop-shadow(0 0 2px #ff7a7a)
      drop-shadow(0 0 4px #ff2b4d);
    opacity:.72;
  }
}
@media (prefers-reduced-motion: reduce){
  .logo-neon{ animation:none; }
}

/* Logo dans la nav et le footer : plus de carte blanche, juste une petite lueur */
.logo-cassette .logo-sticker{
  height:32px; background:none; padding:0; border-radius:0; transform:none;
  box-shadow:none; filter:drop-shadow(0 0 4px rgba(0,0,0,.5));
}
.logo-sticker-footer{
  height:56px; background:none; padding:0; border-radius:0; transform:none;
  box-shadow:none; margin:0 auto 22px; display:block;
  filter:drop-shadow(0 0 6px rgba(0,0,0,.5));
}
.footer-logos{
  display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap;
}
.footer-logos .logo-sticker-footer{ margin:0; }


/* ==========================================================================
   BOUTIQUE — merchandising fictif, meme esprit kitsch 80s
   ========================================================================== */
#boutique{ background:var(--nuit-lisbonne-2); color:var(--papier); }
#boutique .section-tete h2{ color:var(--papier); }
#boutique .section-tete p{ color:var(--or-cassette); }

.boutique-intro{
  max-width:640px; margin:0 auto 50px; text-align:center; font-size:.88rem; line-height:1.7;
  color:var(--creme-vinyle); opacity:.8; font-style:italic;
}

.produits{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:44px; max-width:1240px; margin:0 auto 34px;
}
.produit{
  background:rgba(0,0,0,.22); border:1px solid rgba(226,163,64,.3); border-radius:10px; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .3s ease, box-shadow .3s ease;
}
.produit:hover{ transform:translateY(-6px); box-shadow:0 16px 30px rgba(0,0,0,.4); }
.produit-visuel{
  width:100%; aspect-ratio:1/1; background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center; position:relative;
  transition:transform .5s ease;
}
.produit:hover .produit-visuel{ transform:scale(1.06); }
.produit-visuel.emoji-visuel{ font-size:5rem; background:linear-gradient(160deg,var(--rouge-portugal),var(--azulejo-bleu)); }
.produit-badge{
  position:absolute; top:10px; right:10px; background:var(--or-cassette); color:var(--nuit-lisbonne);
  font-family:var(--font-vhs); font-size:.62rem; letter-spacing:1px; padding:4px 8px; border-radius:3px; font-weight:700;
}
.produit-corps{ padding:22px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.produit-corps h3{ font-family:var(--font-display); font-size:1.05rem; color:var(--papier); letter-spacing:.5px; }
.produit-desc{ font-size:.82rem; font-style:italic; color:var(--creme-vinyle); opacity:.85; flex:1; }
.produit-prix{ font-family:var(--font-vhs); color:var(--or-cassette); font-size:1.1rem; letter-spacing:1px; }
.btn-panier{
  margin-top:6px; padding:10px; background:var(--rouge-portugal); color:#fff; font-weight:700; letter-spacing:.5px;
  border-radius:4px; text-transform:uppercase; font-size:.75rem; transition:background .25s ease, transform .2s ease;
}
.btn-panier:hover{ background:var(--rouge-fonce); transform:translateY(-2px); }

/* Carte Officielle du Fan-Club — pièce emblématique, rotation 3D recto/verso */
.produit-carte{
  border-color:rgba(226,163,64,.55);
  box-shadow:0 0 0 1px rgba(226,163,64,.12), 0 18px 36px rgba(0,0,0,.35);
}
@media (min-width:560px){
  .produit-carte{ grid-column:span 2; }
}
.produit-carte .produit-corps{ align-items:center; text-align:center; }
.carte-flip{ width:100%; aspect-ratio:1060/625; perspective:1400px; }
.carte-flip-inner{
  position:relative; width:100%; height:100%; transition:transform .8s cubic-bezier(.4,.1,.2,1); transform-style:preserve-3d;
}
.carte-flip.retournee .carte-flip-inner{ transform:rotateY(180deg); }
.carte-face{
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  background-size:cover; background-position:center;
}
.carte-face--verso{ transform:rotateY(180deg); }
.btn-carte-flip{
  margin-top:6px; padding:10px 22px; background:transparent; color:var(--or-cassette); font-weight:700; letter-spacing:.5px;
  border:1px solid var(--or-cassette); border-radius:4px; text-transform:uppercase; font-size:.75rem;
  transition:background .25s ease, color .25s ease, transform .2s ease;
}
.btn-carte-flip:hover{ background:var(--or-cassette); color:var(--nuit-lisbonne); transform:translateY(-2px); }

.boutique-note{ max-width:640px; margin:0 auto; text-align:center; font-size:.85rem; font-style:italic; color:var(--creme-vinyle); opacity:.75; }

.toast-panier{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%, 140%); z-index:700;
  background:var(--or-cassette); color:var(--nuit-lisbonne); font-family:var(--font-corps); font-weight:700;
  padding:12px 22px; border-radius:6px; box-shadow:0 10px 26px rgba(0,0,0,.4); transition:transform .35s ease;
  font-size:.9rem; text-align:center;
}
.toast-panier.visible{ transform:translate(-50%, 0); }

@media (max-width:640px){
  .produit-visuel.emoji-visuel{ font-size:3.6rem; }
}