/* =========================================================
   Mamie Rozenn — site vitrine rétro
   Polices locales (licence OFL) : Fraunces, Work Sans, Caveat, Montserrat Black
   ========================================================= */
@font-face { font-family: "Fraunces"; src: url("../fonts/Fraunces.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../fonts/Fraunces-Italic.ttf") format("truetype"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("../fonts/WorkSans.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("../fonts/Caveat.ttf") format("truetype"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("../fonts/CourierPrime-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("../fonts/CourierPrime-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-Black.ttf") format("truetype"); font-weight: 900; font-display: swap; }

:root {
  --creme: #F3E6CC;
  --creme-clair: #FBF4E6;
  --orange: #E8A93A;    /* moutarde (accent) */
  --sapin: #181816;     /* noir chaud */
  --vert: #D2452F;      /* rouge tomate (couleur principale) */
  --sauge: #F3E6CC;     /* plus de marges colorées : fond crème partout */
  --noir: #181816;
  --lavande: #D2452F;
  --texte: #2D2D2A;
  --u: calc(100cqw / 1600);           /* 1 px de la maquette (1600 px de large) */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { background: var(--creme); color: var(--texte); font-family: "Work Sans", system-ui, sans-serif; font-size: 18px; line-height: 1.6; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* la page est une feuille creme centree ; les marges laissent voir le vert sauge et Rennes au trait */
.feuille { position: relative; width: 100%; margin: 0; background: var(--creme); }
.intro { box-shadow: 0 10px 0 var(--sauge); }

/* Titres « Fraunces soft » façon Cooper Black */
.titre-retro, .l, .vinyle__disque strong, .badge-note strong, .platine, .vinyle h3 {
  font-family: "Fraunces", Georgia, serif; font-weight: 900;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
}
.titre-retro { font-style: normal; font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 144; transform: skewX(-8deg); transform-origin: left bottom; color: var(--vert); line-height: 1.05; letter-spacing: -0.01em;
  -webkit-text-stroke: 3px var(--noir); paint-order: stroke fill; text-shadow: 5px 6px 0 var(--noir); }
.titre-retro--noir { color: var(--noir); -webkit-text-stroke: 0; text-shadow: none; }

/* Boutons noir / blanc avec ombre décalée verte */
.boutons { display: flex; flex-wrap: wrap; gap: 0; }
.boutons--centre { justify-content: center; }
.btn { display: inline-block; padding: 14px 32px; border: 2px solid var(--noir); background: #fff; color: var(--noir);
  font-family: "Montserrat", sans-serif; font-weight: 900; font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; box-shadow: 6px 6px 0 var(--vert); transition: transform .15s, box-shadow .15s; }
.btn + .btn { margin-left: 16px; }
.btn--plein { background: var(--noir); color: var(--creme); }
.btn--creme { background: var(--creme); }
.btn:hover { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--vert); }

/* Trames de points */
.trame { position: absolute; width: 100px; height: 100px; background: radial-gradient(circle, #3c3c37 2.6px, transparent 3px) 0 0 / 13px 13px; pointer-events: none; }

/* Textes qui défilent */
.defile { position: absolute; overflow: hidden; font-family: "Montserrat", sans-serif; font-weight: 900; font-size: 11px; letter-spacing: .08em; color: var(--noir); }
.defile--vertical { top: 120px; bottom: 60px; right: 40px; width: 22px; border-left: 2px solid var(--noir); }
.defile--vertical span { display: block; writing-mode: vertical-rl; white-space: nowrap; padding-left: 4px; animation: defileV 30s linear infinite; }
@keyframes defileV { to { transform: translateY(-50%); } }

/* =========================================================
   INTRO (scène 1600 × 900, tout est positionné en unités maquette)
   ========================================================= */
.intro { position: relative; background: var(--sauge); overflow: hidden; height: min(100vh, 56.25vw); }
/* scene 1600 x 900 (unites maquette), calee en haut et pleine largeur, comme la ref Harlem Shake */
/* scene 16:9 toujours entiere, calee en bas ; sur grand ecran elle remplit tout */
/* la scene 16:9 tient TOUJOURS en entier dans la hauteur de l'ecran (rien de coupe en bas),
   calee a droite pour que la ville touche le bord droit */
.intro__scene { position: absolute; right: 0; top: 0; height: 100%; aspect-ratio: 16 / 9; width: auto; container-type: inline-size; }
@media (max-aspect-ratio: 16/9) { .intro__scene { width: 100%; height: auto; } }
/* la ville occupe tout le cote droit et deborde du bord */
.intro__maisons { position: absolute; left: calc(470 * var(--u)); top: calc(80 * var(--u)); width: calc(1450 * var(--u)); z-index: 0; }
/* grande 2CV en bas a droite, coupee par le bord droit et le bas */
.intro__2cv { position: absolute; left: calc(380 * var(--u)); top: calc(318 * var(--u)); width: calc(1100 * var(--u)); z-index: 2; }
.voiture { position: relative; }
.voiture > img:first-child { width: 100%; }
.roue { position: absolute; }
.roue--av { left: 9.36%; top: 66.23%; width: 15.84%; }
.roue--ar { left: 78.65%; top: 77.71%; width: 5.37%; }
.intro__lettres { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.intro__lettres--premier { z-index: 3; }
.l { position: absolute; display: block; line-height: 1; color: var(--creme); text-shadow: calc(6 * var(--u)) calc(7 * var(--u)) 0 var(--sapin); }
/* lettres posees sur la ville, eparpillees comme BROOKLYN */
.l-La { left: calc(640 * var(--u));  top: calc(30 * var(--u));  font-size: calc(80 * var(--u)); }
.l-C  { left: calc(500 * var(--u));  top: calc(40 * var(--u));  font-size: calc(250 * var(--u)); color: var(--orange); }
.l-R1 { left: calc(690 * var(--u));  top: calc(150 * var(--u)); font-size: calc(210 * var(--u)); }
.l-E1 { left: calc(830 * var(--u));  top: calc(10 * var(--u));  font-size: calc(220 * var(--u)); color: var(--orange); }
.l-P  { left: calc(960 * var(--u));  top: calc(140 * var(--u)); font-size: calc(200 * var(--u)); }
.l-E2 { left: calc(1090 * var(--u)); top: calc(40 * var(--u));  font-size: calc(230 * var(--u)); color: var(--orange); }
.l-R2 { left: calc(1220 * var(--u)); top: calc(160 * var(--u)); font-size: calc(190 * var(--u)); }
.l-I  { left: calc(1355 * var(--u)); top: calc(60 * var(--u));  font-size: calc(200 * var(--u)); color: var(--orange); }
.l-E3 { left: calc(1420 * var(--u)); top: calc(10 * var(--u));  font-size: calc(210 * var(--u)); }
.l-en { left: calc(1380 * var(--u)); top: calc(310 * var(--u)); font-size: calc(80 * var(--u)); }
.l-cornet { left: calc(1215 * var(--u)); top: calc(385 * var(--u)); font-size: calc(110 * var(--u)); color: var(--orange); }

/* colonne de stickers : ~22 % de gauche, toute la hauteur, un seul bloc sans vide */
.intro__stickers { position: absolute; left: 0; top: 0; height: 100%; z-index: 4; overflow: visible; pointer-events: none; }
.intro__piste { will-change: transform; }
.intro__piste { padding-left: 1.5vw; }
/* ticket-carte (papier + grand cornet en 2 calques de meme taille) */
.ticket { position: relative; height: calc(min(100vh, 56.25vw) * 1.02); aspect-ratio: 700 / 1640; transform: rotate(-2.5deg); transform-origin: top left; }
.ticket__papier, .ticket__cornet, .ticket__cornet > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ticket__papier { filter: drop-shadow(8px 10px 0 rgba(0,0,0,.18)); }
.ticket__cornet { transform-origin: 52.52% 99.63%; }
.ticket { container-type: size; }
/* texte du ticket en HTML, police machine a ecrire, tape lettre par lettre */
.ticket__texte { position: absolute; left: 6.5%; width: 67.5%; top: 2.6%; font-family: "Courier Prime", "Courier New", monospace; font-weight: 700; color: var(--sapin); pointer-events: auto; }
.ticket__texte p, .ticket__texte li { white-space: nowrap; }
.t-titre { text-align: center; font-size: 3cqh; letter-spacing: .12em; color: var(--vert); line-height: 1.2; }
.t-sous { text-align: center; font-size: 1.5cqh; font-weight: 400; letter-spacing: .1em; color: #8a8579; }
.ticket__texte hr { border: 0; border-top: .35cqh double var(--sapin); border-top-style: double; height: 0; margin: .8cqh 0 1cqh; border-top-width: .5cqh; }
.t-section { text-align: center; font-size: 1.7cqh; letter-spacing: .14em; color: var(--orange); margin: 1.1cqh 0 .4cqh; }
.ticket__texte ul { list-style: none; }
.ticket__texte li a { position: relative; display: flex; align-items: baseline; gap: .6cqh; font-size: 2.0cqh; line-height: 1.7; text-decoration: none; color: var(--sapin); }
.ticket__texte li i { flex: 1; border-bottom: .3cqh dotted #9b968a; transform: translateY(-.5cqh); }
.ticket__texte li b { color: var(--orange); }
.ticket__texte li a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .2cqh; height: .35cqh; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.ticket__texte li a:hover::after { transform: scaleX(1); }
.t-main { text-align: center; font-family: "Caveat", cursive; font-size: 3.4cqh; color: var(--orange); margin-top: .6cqh; }
/* lettres tapees : invisibles jusqu'a la frappe ; curseur de machine */
.js-anim .tape .c { visibility: hidden; }
.tape .c.on { visibility: visible; }
.curseur { display: inline-block; width: .55em; height: 1em; margin-left: .05em; background: var(--sapin); vertical-align: -.15em; animation: clignote .6s steps(1) infinite; }
@keyframes clignote { 50% { opacity: 0; } }
/* vapeur au-dessus de la galette */
.vapeur { position: absolute; width: 0; height: 0; opacity: 0; transition: opacity .8s; }
.vapeur.on { opacity: 1; }
.vapeur i { position: absolute; bottom: 0; width: 1.6vw; height: 3.2vw; margin-left: -.8vw; border-radius: 50%; background: rgba(255,255,255,.55); filter: blur(7px); animation: vapeur 3.2s ease-in infinite; }
.vapeur i:nth-child(2) { left: -1.4vw; animation-delay: 1s; }
.vapeur i:nth-child(3) { left: 1.3vw; animation-delay: 2.1s; }
@keyframes vapeur { 0% { transform: translateY(0) scale(.6); opacity: 0; } 25% { opacity: .9; } 100% { transform: translateY(-7vw) scale(1.4); opacity: 0; } }

.intro__suite { position: absolute; bottom: 22px; right: 28px; font-family: "Montserrat", sans-serif; font-weight: 900; font-size: 13px; letter-spacing: .15em; text-transform: uppercase; text-decoration: none; color: var(--creme); background: var(--sapin); padding: 10px 22px; border-radius: 999px; z-index: 3; }

/* =========================================================
   NAV : barre noire collante + guirlande + store
   ========================================================= */
.nav { display: contents; }
.nav__barre { position: sticky; top: 0; z-index: 50; height: 70px; background: var(--noir); display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(16px, 4vw, 70px); }
.nav__liens { display: flex; gap: clamp(18px, 2.6vw, 42px); list-style: none; }
.nav__liens a { font-family: "Montserrat", sans-serif; font-weight: 900; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--creme); }
.nav__liens a:hover { color: var(--orange); }
.nav__logo { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); width: 100px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)); }
.nav__burger { display: none; background: none; border: 0; width: 34px; height: 26px; flex-direction: column; justify-content: space-between; cursor: pointer; }
.nav__burger span { height: 3px; background: var(--creme); border-radius: 2px; }
.nav__guirlande { height: 26px; background:
  radial-gradient(circle, #F3E6CC 4px, transparent 4.5px) 0 50% / 52px 26px repeat-x,
  radial-gradient(circle, var(--orange) 4px, transparent 4.5px) 26px 50% / 52px 26px repeat-x,
  var(--creme); }
.nav__store { height: 92px; position: relative; filter: drop-shadow(0 9px 5px rgba(0,0,0,.22)); }
.nav__store::before { content: ""; position: absolute; inset: 0; border-top: 10px solid #181816;
  background: repeating-linear-gradient(90deg, var(--vert) 0 44px, var(--creme-clair) 44px 88px);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% 70px no-repeat, radial-gradient(circle at 50% 0, #000 21px, transparent 22px) 0 70px / 44px 22px repeat-x;
          mask: linear-gradient(#000 0 0) top / 100% 70px no-repeat, radial-gradient(circle at 50% 0, #000 21px, transparent 22px) 0 70px / 44px 22px repeat-x; }

/* =========================================================
   ACCUEIL : collage + titres sur 3 niveaux (scène 1600 × 720)
   ========================================================= */
.accueil { position: relative; container-type: inline-size; aspect-ratio: 1600 / 740; max-width: 1600px; margin: 0 auto; }
.accueil .titre-retro { position: absolute; z-index: 5; font-size: calc(76 * var(--u)); -webkit-text-stroke-width: calc(4 * var(--u)); text-shadow: calc(6 * var(--u)) calc(7 * var(--u)) 0 var(--noir); white-space: nowrap; }
.accueil__t1 { left: calc(260 * var(--u)); top: calc(-10 * var(--u)); }
.accueil__t2 { left: calc(910 * var(--u)); top: calc(300 * var(--u)); }
.accueil__t3 { left: calc(360 * var(--u)); top: calc(590 * var(--u)); font-size: calc(84 * var(--u)) !important; }
.collage { position: absolute; left: calc(300 * var(--u)); top: calc(80 * var(--u)); width: calc(1100 * var(--u)); height: calc(600 * var(--u)); }
.collage .t { position: absolute; object-fit: cover; border: calc(6 * var(--u)) solid #fff; box-shadow: calc(6 * var(--u)) calc(8 * var(--u)) 0 rgba(0,0,0,.25); transition: transform .3s; }
.collage .t:hover { transform: scale(1.06) rotate(0deg) !important; z-index: 4; }
.collage .nb { filter: grayscale(1) contrast(1.15); }
.collage .nb:hover { filter: none; }
.t1  { left: 0;                       top: 0;                        width: calc(242 * var(--u)); height: calc(312 * var(--u)); transform: rotate(-2deg); }
.t2  { left: calc(240 * var(--u));    top: calc(10 * var(--u));      width: calc(182 * var(--u)); height: calc(232 * var(--u)); transform: rotate(1deg); }
.t3  { left: calc(420 * var(--u));    top: calc(-5 * var(--u));      width: calc(232 * var(--u)); height: calc(177 * var(--u)); }
.t4  { left: calc(650 * var(--u));    top: calc(5 * var(--u));       width: calc(212 * var(--u)); height: calc(272 * var(--u)); transform: rotate(2deg); }
.t5  { left: calc(860 * var(--u));    top: 0;                        width: calc(162 * var(--u)); height: calc(212 * var(--u)); transform: rotate(-1deg); }
.t6  { left: calc(420 * var(--u));    top: calc(170 * var(--u));     width: calc(212 * var(--u)); height: calc(162 * var(--u)); transform: rotate(1deg); }
.t7  { left: calc(230 * var(--u));    top: calc(240 * var(--u));     width: calc(202 * var(--u)); height: calc(162 * var(--u)); transform: rotate(-1deg); }
.t8  { left: calc(640 * var(--u));    top: calc(270 * var(--u));     width: calc(222 * var(--u)); height: calc(162 * var(--u)); }
.t9  { left: calc(860 * var(--u));    top: calc(205 * var(--u));     width: calc(172 * var(--u)); height: calc(222 * var(--u)); transform: rotate(2deg); }
.t10 { left: 0;                       top: calc(310 * var(--u));     width: calc(232 * var(--u)); height: calc(172 * var(--u)); transform: rotate(1deg); }
.t11 { left: calc(230 * var(--u));    top: calc(395 * var(--u));     width: calc(272 * var(--u)); height: calc(162 * var(--u)); }
.t12 { left: calc(500 * var(--u));    top: calc(330 * var(--u));     width: calc(152 * var(--u)); height: calc(197 * var(--u)); transform: rotate(-2deg); }
.t13 { left: calc(650 * var(--u));    top: calc(430 * var(--u));     width: calc(202 * var(--u)); height: calc(142 * var(--u)); transform: rotate(1deg); }
.t14 { left: calc(850 * var(--u));    top: calc(420 * var(--u));     width: calc(182 * var(--u)); height: calc(152 * var(--u)); transform: rotate(-1deg); }
.badge-note { position: absolute; z-index: 6; left: calc(1010 * var(--u)); top: calc(330 * var(--u)); width: calc(170 * var(--u)); aspect-ratio: 1; border-radius: 50%;
  background: var(--orange); color: var(--creme); display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(-12deg);
  box-shadow: inset 0 0 0 calc(10 * var(--u)) var(--orange), inset 0 0 0 calc(13 * var(--u)) var(--creme), calc(6 * var(--u)) calc(8 * var(--u)) 0 rgba(0,0,0,.25); }
.badge-note strong { font-size: calc(52 * var(--u)); line-height: 1; }
.badge-note .etoiles { font-size: calc(18 * var(--u)); letter-spacing: .1em; }
.badge-note small { font-family: "Montserrat", sans-serif; font-weight: 900; font-size: calc(11 * var(--u)); letter-spacing: .05em; text-transform: uppercase; }
.trame--a { left: calc(120 * var(--u)); top: calc(380 * var(--u)); }
.trame--b { right: calc(130 * var(--u)); top: calc(120 * var(--u)); }

/* =========================================================
   HISTOIRE
   ========================================================= */
.histoire { position: relative; max-width: 1600px; margin: 0 auto; padding: 90px clamp(20px, 7vw, 110px) 100px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px 60px; }
.trame--c { left: 30px; top: 30px; height: 70px; }
.histoire__texte h2 { font-size: clamp(40px, 4.2vw, 66px); margin-bottom: 30px; }
.histoire__texte p { max-width: 640px; margin-bottom: 18px; }
.histoire__produit { position: relative; display: flex; flex-direction: column; align-items: center; }
.histoire__cornet { width: min(280px, 70%); transform: rotate(-6deg); filter: drop-shadow(8px 10px 0 rgba(0,0,0,.18)); }
.histoire__logo { position: absolute; left: 0; top: 10px; width: 120px; transform: rotate(8deg); filter: drop-shadow(5px 7px 0 rgba(0,0,0,.18)); }
.histoire__produit .boutons { margin-top: 26px; justify-content: center; }
.cadre-texte { position: absolute; top: 40px; right: 30px; width: 560px; height: 560px; border-top: 2px solid var(--noir); border-right: 2px solid var(--noir); pointer-events: none; overflow: hidden;
  font-family: "Montserrat", sans-serif; font-weight: 900; font-size: 11px; letter-spacing: .08em; }
.cadre-texte span { position: absolute; top: -18px; left: 0; white-space: nowrap; animation: defileH 25s linear infinite; }
@keyframes defileH { to { transform: translateX(-50%); } }

.atouts { grid-column: 1 / -1; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 60px; max-width: 1100px; }
.atouts li { position: relative; padding-left: 40px; }
.atouts li::before { content: "☆"; position: absolute; left: 0; top: -4px; font-size: 26px; color: var(--vert); }
.atouts strong { display: block; font-weight: 700; text-transform: uppercase; font-size: 15px; color: var(--noir); }
.atouts span { font-size: 14px; color: var(--vert); }

.carrousel { grid-column: 1 / -1; position: relative; overflow-x: clip; height: 470px; margin-top: 40px; }
.carrousel__piste { position: relative; height: 100%; }
.carrousel__item { position: absolute; top: 50%; left: 50%; width: 230px; height: 290px; border: 8px solid #fff; background: #fff; box-shadow: 6px 8px 0 rgba(0,0,0,.2);
  transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s, width .6s, height .6s; opacity: 0; transform: translate(-50%, -50%) scale(.8); }
.carrousel__item img { width: 100%; height: 100%; object-fit: cover; }
.carrousel__item[data-pos="g"] { opacity: 1; transform: translate(calc(-50% - 345px), -50%) rotate(-3deg); }
.carrousel__item[data-pos="d"] { opacity: 1; transform: translate(calc(-50% + 345px), -50%) rotate(3deg); }
.carrousel__item[data-pos="c"] { opacity: 1; width: 420px; height: 420px; z-index: 2; transform: translate(-50%, -50%); }
.carrousel__item figcaption { display: none; }
.carrousel__item[data-pos="c"] figcaption { display: block; }
.manuscrit { position: absolute; left: 22px; bottom: 18px; font-family: "Caveat", cursive; font-weight: 700; font-size: 54px; line-height: .9; color: var(--orange); -webkit-text-stroke: 1px #fff; transform: rotate(-6deg); }
.carrousel__fleche { position: absolute; top: 50%; z-index: 3; width: 48px; height: 48px; border-radius: 50%; border: 2px solid #55554f; background: rgba(255,255,255,.5); font-size: 26px; line-height: 1; cursor: pointer; transform: translateY(-50%); }
.carrousel__fleche--g { left: calc(50% - 235px); }
.carrousel__fleche--d { right: calc(50% - 235px); }
.carrousel__points { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; }
.carrousel__points i { width: 10px; height: 10px; border-radius: 50%; background: #aaa9a0; }
.carrousel__points i.actif { background: var(--noir); }
.histoire > .boutons--centre { grid-column: 1 / -1; margin-top: 20px; }

/* =========================================================
   FORMULES : vinyles
   ========================================================= */
.formules { overflow-x: clip; max-width: 1600px; margin: 0 auto; padding: 60px clamp(20px, 6vw, 100px) 90px; }
.formules__tete { display: flex; justify-content: space-between; align-items: center; gap: 30px; margin-bottom: 50px; }
.formules__tete h2 { font-size: clamp(40px, 4vw, 62px); }
.platine { position: relative; width: 330px; height: 250px; flex: none; background: var(--creme-clair); border: 3px solid var(--noir); border-radius: 14px; }
.platine__disque { position: absolute; left: 30px; top: 22px; width: 200px; height: 200px; border-radius: 50%; display: grid; place-items: center;
  background: repeating-radial-gradient(circle, #1b1b1a 0 4px, #2c2c2a 4px 5px); animation: tourne 4s linear infinite; }
.platine__disque img { width: 80px; }
.platine__bras { position: absolute; right: 40px; top: 30px; width: 6px; height: 150px; background: var(--noir); transform-origin: top; transform: rotate(14deg); border-radius: 3px; }
.platine__bras::before { content: ""; position: absolute; top: -8px; left: -9px; width: 24px; height: 24px; border-radius: 50%; background: #7a7a74; }
@keyframes tourne { to { transform: rotate(360deg); } }

.vinyles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.vinyle { position: relative; height: 225px; --c: var(--vert); }
.vinyle--orange { --c: var(--orange); }
.vinyle--sapin { --c: var(--sapin); }
.vinyle__pochette { position: absolute; left: 0; top: 0; width: 210px; height: 215px; background: var(--creme); border: 3px solid var(--noir); padding: 40px 13px 13px; box-shadow: 6px 8px 0 rgba(0,0,0,.25); z-index: 2;
  background-image: repeating-linear-gradient(90deg, var(--c) 0 11px, transparent 11px 22px); background-size: 100% 26px; background-repeat: no-repeat; }
.vinyle__pochette .sur { font-family: "Montserrat", sans-serif; font-weight: 900; font-size: 15px; text-transform: uppercase; line-height: 1; color: var(--noir); }
.vinyle h3 { font-size: 25px; line-height: 1.1; color: var(--c); text-transform: uppercase; margin-bottom: 14px; }
.vinyle ul { list-style: none; font-weight: 600; font-size: 13.5px; line-height: 1.45; color: var(--noir); }
.vinyle li::before { content: "• "; }
.vinyle__disque { position: absolute; left: 60px; top: 2px; width: 210px; height: 210px; border-radius: 50%; z-index: 1;
  background: radial-gradient(circle, var(--c) 0 50px, transparent 51px), repeating-radial-gradient(circle, #1b1b1a 0 5px, #2a2a28 5px 6px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--creme); box-shadow: 6px 8px 0 rgba(0,0,0,.2);
  transition: left .6s cubic-bezier(.2,.8,.2,1); }
.vinyle:hover .vinyle__disque, .vinyle.sorti .vinyle__disque { left: 168px; }
.vinyle__disque span { font-family: "Montserrat", sans-serif; font-weight: 900; font-size: 11px; text-transform: uppercase; }
.vinyle__disque strong { font-size: 24px; line-height: 1.1; }
.note { margin: 30px 0 26px; font-size: 14px; color: #6e6e64; }

/* =========================================================
   MUR PRESSE + INSTAGRAM : ecriture manuscrite tres pale en fond (comme Harlem)
   ========================================================= */
.mur { position: relative; overflow: hidden; }
.ecriture { position: absolute; inset: -40px -80px; transform: rotate(-4deg); pointer-events: none; font-family: "Caveat", cursive; font-weight: 400; font-size: clamp(34px, 3.4vw, 54px); line-height: 1.35; color: rgba(24, 24, 22, .075); }
.ecriture p { margin-bottom: .2em; }
.mur > section { position: relative; }

/* =========================================================
   PRESSE + INSTAGRAM
   ========================================================= */
.presse { position: relative; max-width: 1600px; margin: 0 auto; padding: 40px clamp(20px, 6vw, 100px) 80px; }
.presse h2, .instagram h2 { font-size: clamp(36px, 3.6vw, 54px); margin-bottom: 36px; }
.presse__grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.carte-presse { display: block; text-decoration: none; transition: transform .2s; }
.carte-presse:hover { transform: translateY(-6px); }
.carte-presse img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.carte-presse .source { padding: 12px 0 0; font-family: "Montserrat", sans-serif; font-weight: 900; font-size: 12px; text-transform: uppercase; color: var(--vert); }
.carte-presse h3 { padding: 4px 0 0; font-family: "Montserrat", sans-serif; font-weight: 900; font-size: 15px; line-height: 1.3; text-transform: uppercase; color: var(--noir); }
.presse__grille { margin-bottom: 44px; }
.defile--droite { top: 30px; bottom: auto; height: 360px; right: 30px; }

.instagram { max-width: 1600px; margin: 0 auto; padding: 30px clamp(20px, 6vw, 100px) 90px; }
.instagram__tete { display: flex; align-items: baseline; gap: 30px; flex-wrap: wrap; }
.instagram__tete a { font-weight: 700; font-size: 22px; color: var(--vert); text-decoration: none; }
.instagram { position: relative; padding-bottom: 130px !important; }
.instagram__grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-bottom: 40px; }
/* coins encadres par une double ligne + texte (ref Harlem) */
.coin { position: absolute; width: 38%; height: 200px; pointer-events: none; font-family: "Montserrat", sans-serif; font-weight: 900; font-size: 10px; letter-spacing: .06em; color: var(--noir); }
.coin span { position: absolute; white-space: nowrap; overflow: hidden; }
.coin__h { left: 0; right: 0; padding: 3px 0; border-top: 2px solid var(--noir); border-bottom: 2px solid var(--noir); }
.coin__v { top: 0; bottom: 0; writing-mode: vertical-rl; padding: 0 3px; border-left: 2px solid var(--noir); border-right: 2px solid var(--noir); }
.coin--hd { right: 30px; top: 40px; }
.coin--hd .coin__h { top: 0; } .coin--hd .coin__v { right: 0; }
.coin--bg { left: 30px; bottom: 26px; width: 30%; }
.coin--bg .coin__h { bottom: 0; } .coin--bg .coin__v { left: 0; transform: rotate(180deg); }
.instagram__grille img { aspect-ratio: 1; width: 100%; object-fit: cover; box-shadow: 6px 8px 0 rgba(0,0,0,.2); }

/* =========================================================
   NOUS TROUVER : creme, carte postale, la 2CV revient se garer sur leur carrelage
   ========================================================= */
.trouver { position: relative; padding-top: 70px; overflow: hidden; }
.trouver__grille { max-width: 1300px; margin: 0 auto; padding: 0 clamp(20px, 6vw, 100px); display: grid; grid-template-columns: 1fr 1.05fr; gap: 60px; align-items: center; }
.trouver .titre-retro { font-size: clamp(40px, 4.2vw, 64px); margin-bottom: 26px; }
.adresse { font-size: 26px; font-weight: 700; line-height: 1.35; margin-bottom: 16px; color: var(--noir); }
.metro { display: flex; align-items: center; gap: 12px; font-weight: 700; margin-bottom: 14px; }
.pastille-m { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--vert); color: var(--creme); font-weight: 700; }
.trouver__infos > p:not(.adresse):not(.metro) { max-width: 460px; }
.trouver .boutons { margin-top: 28px; }
.trouver__photo { border: 10px solid #fff; box-shadow: 10px 12px 0 rgba(0,0,0,.2); transform: rotate(2.5deg); }
.parking { position: relative; margin-top: 40px; }
.parking__2cv { position: relative; width: min(46%, 560px); margin-left: 18%; margin-bottom: -4.4%; z-index: 2; }
.parking__2cv > img:first-child { width: 100%; }
.parking__tri { width: min(40%, 520px); margin-left: 40%; margin-bottom: -2.2%; }
.tri-roue, .tri-cadre { position: absolute; pointer-events: none; }
.tri-roue--ar { left: 5.481%; top: 59.358%; width: 20.963%; }
.tri-roue--av { left: 67.926%; top: 68.021%; width: 17.556%; }
.tri-cadre { left: 0; top: 0; width: 100%; }
.carrelage { height: 90px; background: url("../img/carrelage.webp?v=r1") 0 0 / 120px 120px; border-top: 6px solid var(--orange); }

/* pied de page : meme barre noire et meme guirlande que le haut */
.pied { background: var(--noir); color: var(--creme); }
.pied__barre { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 120px; padding: 0 clamp(16px, 4vw, 70px); }
.pied__logo { position: absolute; left: 50%; top: 50%; width: 96px; transform: translate(-50%, -50%); }
.pied__mention { text-align: center; font-size: 13px; opacity: .65; padding: 0 20px 26px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1000px) {
  .nav__liens { display: none; }
  .nav__burger { display: flex; }
  .nav__barre.ouvert .nav__liens { display: flex; flex-direction: column; position: absolute; top: 70px; left: 0; right: 0; background: var(--noir); padding: 20px 30px; gap: 16px; }
  .nav__barre.ouvert .nav__liens--d { top: auto; position: static; padding: 0 30px 20px; }
  .nav__barre.ouvert { flex-wrap: wrap; height: auto; min-height: 70px; }
  .nav__logo { width: 76px; }
  .histoire { grid-template-columns: minmax(0, 1fr); }
  .cadre-texte { display: none; }
  .vinyles { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 40px; }
  .vinyle { width: 440px; max-width: 100%; }
  .presse__grille { grid-template-columns: 1fr 1fr; }
  .instagram__grille { grid-template-columns: repeat(2, 1fr); }
  .coin { display: none; }
  .trouver__grille { grid-template-columns: 1fr; }
  .parking__2cv { width: 80%; margin-left: 6%; }
  .parking__tri { width: 78%; margin-left: 18%; }
  .pied .nav__liens { display: none; }
  .pied__barre { min-height: 110px; }
  .defile--vertical { display: none; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }

  .formules__tete { flex-direction: column; align-items: flex-start; }
  .platine { transform: scale(.75); transform-origin: left top; margin-bottom: -60px; }
  .atouts { grid-template-columns: 1fr; }
  .carrousel { height: 360px; }
  .carrousel__item { width: 150px; height: 190px; }
  .carrousel__item[data-pos="c"] { width: 260px; height: 260px; }
  .carrousel__item[data-pos="g"] { transform: translate(calc(-50% - 150px), -50%) rotate(-3deg); }
  .carrousel__item[data-pos="d"] { transform: translate(calc(-50% + 150px), -50%) rotate(3deg); }
  .carrousel__fleche--g { left: 4px; } .carrousel__fleche--d { right: 4px; }
  .manuscrit { font-size: 38px; }
  .presse__grille { grid-template-columns: 1fr; }
  .instagram__grille { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .btn + .btn { margin-left: 0; margin-top: 14px; }
  .boutons { flex-direction: column; align-items: center; }
}
@media (max-width: 640px) {
  /* collage : grille simple, titres empiles */
  .accueil { aspect-ratio: auto; padding: 26px 16px 40px; container-type: normal; }
  .accueil .titre-retro { position: static; font-size: 38px !important; -webkit-text-stroke-width: 2px; text-shadow: 3px 4px 0 var(--noir); white-space: normal; }
  .accueil__t2, .accueil__t3 { margin-top: 10px; }
  .collage { position: relative; left: auto; top: auto; width: auto; height: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 16px 0; }
  .collage .t { position: static; width: 100%; height: 110px; transform: none; border-width: 3px; box-shadow: 3px 4px 0 rgba(0,0,0,.2); }
  .badge-note { left: auto; right: -4px; top: 30px; width: 100px; }
  .badge-note strong { font-size: 32px; } .badge-note .etoiles { font-size: 11px; } .badge-note small { font-size: 8px; }
  .trame { display: none; }
  .feuille { width: 100%; }
  .vinyle { width: 300px; height: 205px; }
  .vinyle__pochette { width: 168px; height: 200px; padding: 36px 10px 10px; }
  .vinyle h3 { font-size: 20px; }
  .vinyle ul { font-size: 12.5px; }
  .vinyle__disque { width: 175px; height: 175px; left: 50px; top: 12px; background: radial-gradient(circle, var(--c) 0 42px, transparent 43px), repeating-radial-gradient(circle, #1b1b1a 0 5px, #2a2a28 5px 6px); }
  .vinyle:hover .vinyle__disque, .vinyle.sorti .vinyle__disque { left: 125px; }
  .vinyle__disque strong { font-size: 20px; } .vinyle__disque span { font-size: 9.5px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
 .statique .nav__barre { position: relative; }