/* jmvion.fr — piste « Affiche rock » */
@font-face { font-family: "Anton"; src: url("/assets/fonts/anton-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/assets/fonts/barlow-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/assets/fonts/barlow-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/assets/fonts/barlow-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --fond: #141517;
  --fond-2: #1b1d20;
  --carte: #191b1e;
  --filet: #2a2d31;
  --texte: #f4f2ed;
  --gris: #9ba0a6;
  --gris-2: #7a7f86;
  --jaune: #f7b32b;
  --jaune-2: #ffc95c;
  --marge: clamp(20px, 5.6vw, 72px);
  --titre: "Anton", "Impact", "Arial Narrow", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--fond); color: var(--texte); font-family: "Barlow", system-ui, sans-serif; font-size: 16px; line-height: 1.5; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--jaune); text-decoration: none; }
a:hover, a:focus-visible { color: var(--jaune-2); }
:focus-visible { outline: 2px solid var(--jaune); outline-offset: 3px; }
h1, h2, h3 { font-weight: 400; margin: 0; }

.filet { height: 8px; background: var(--jaune); }

/* En-tête */
.entete { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px var(--marge); max-width: 1440px; margin: 0 auto; }
.marque { font-family: var(--titre); font-size: 20px; letter-spacing: 2px; color: var(--texte); }
.marque span { color: var(--jaune); }
.entete nav { display: flex; gap: clamp(14px, 3vw, 30px); }
.entete nav a { font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #c7cbd0; padding: 10px 0; }
.entete nav a:hover { color: var(--texte); }
.entete nav .nav-contact { color: var(--jaune); }

main { max-width: 1440px; margin: 0 auto; }

/* Accueil */
.accueil { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: 56px; align-items: center; padding: 48px var(--marge) 64px; }
.accueil h1 { font-family: var(--titre); text-transform: uppercase; line-height: 0.9; font-size: clamp(96px, 15vw, 190px); display: flex; flex-direction: column; }
.h1-vion { color: transparent; -webkit-text-stroke: 3px var(--jaune); }
@supports not (-webkit-text-stroke: 1px black) { .h1-vion { color: var(--jaune); } }
.nom-complet { margin: 18px 0 0; font-size: 15px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--gris); }
.accroche { display: inline-block; margin: 22px 0 0; background: var(--jaune); color: var(--fond); font-weight: 600; font-size: 16px; letter-spacing: 1px; text-transform: uppercase; padding: 10px 18px; transform: skewX(-6deg); }
.lieu { margin: 18px 0 0; color: var(--gris); letter-spacing: 1px; }
.accueil-photo { position: relative; transform: rotate(-2deg); }
.accueil-photo::before { content: ""; position: absolute; inset: 0; transform: translate(-14px, 14px); border: 2px solid var(--jaune); }
.accueil-photo img { position: relative; width: 100%; aspect-ratio: 470 / 330; object-fit: cover; filter: grayscale(1) contrast(1.05); }

/* Bandeau défilant */
.bandeau { overflow: hidden; border-top: 1px solid #26292d; border-bottom: 1px solid #26292d; background: var(--fond-2); padding: 15px 0; }
.bandeau-piste { display: flex; width: max-content; animation: defile 60s linear infinite; }
.bandeau span { font-family: var(--titre); font-size: 18px; letter-spacing: 4px; text-transform: uppercase; color: var(--jaune); white-space: pre; padding-right: 0.6em; }
@keyframes defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .bandeau-piste { animation: none; } }

/* Sections */
.section { padding: 64px var(--marge) 0; }
.titre-contour { font-family: var(--titre); font-size: clamp(48px, 6vw, 76px); text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.5px #5a5f66; margin-bottom: 28px; line-height: 1.1; }
@supports not (-webkit-text-stroke: 1px black) { .titre-contour { color: #5a5f66; } }
.titre-plein { font-family: var(--titre); font-size: clamp(48px, 6vw, 64px); text-transform: uppercase; line-height: 1; }
.titre-plein span { color: var(--jaune); }

/* Cartes activités */
.cartes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.carte { border: 1px solid var(--filet); background: var(--carte); display: flex; flex-direction: column; }
.carte-photo { width: 100%; aspect-ratio: 560 / 360; object-fit: cover; border-bottom: 1px solid var(--filet); }
.carte-photo-vide { background: repeating-linear-gradient(135deg, #1f2225 0 12px, #1b1d20 12px 24px); }
.carte-corps { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
.carte-logo { height: 56px; display: flex; align-items: center; }
.carte-logo img { max-height: 54px; width: auto; max-width: 100%; }
.carte h3 { font-family: var(--titre); font-size: 21px; text-transform: uppercase; letter-spacing: 1px; }
.carte p { margin: 0; font-size: 14px; color: var(--gris); flex-grow: 1; }
.carte-lien { font-weight: 600; font-size: 15px; }
.reseaux { display: flex; gap: 4px; margin-left: -9px; }
.reseaux a { color: var(--texte); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; }
.reseaux a:hover { color: var(--jaune); }

/* Scène */
.scene-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 26px; margin-bottom: 16px; }
.scene-tete p { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--gris); }
.scene-liens { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.scene-liens a { font-weight: 600; font-size: 15px; }
.lamelles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; }
.lamelle { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.lamelle a { display: block; height: 440px; overflow: hidden; border: 1px solid var(--filet); }
.lamelle img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.lamelle a:hover img { transform: scale(1.04); }
.lamelle figcaption { display: flex; flex-direction: column; font-size: 11px; color: var(--gris); line-height: 1.35; }
.lamelle figcaption strong { font-family: var(--titre); font-weight: 400; font-size: 14px; letter-spacing: .5px; text-transform: uppercase; color: var(--texte); line-height: 1.15; }
.lamelle .date { font-family: var(--titre); font-size: 12px; letter-spacing: 1px; color: var(--jaune); }
.lamelles-1, .lamelles-2, .lamelles-3, .lamelles-4 { grid-auto-columns: minmax(0, 220px); }

.viva { margin-top: 40px; background: var(--jaune); color: var(--fond); padding: 28px; display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 36px; align-items: center; }
.viva img { width: 100%; aspect-ratio: 760 / 460; object-fit: cover; border: 3px solid var(--fond); }
.viva-sans-photo { grid-template-columns: minmax(0, 1fr); }
.viva-texte { display: flex; flex-direction: column; gap: 10px; }
.viva .sur-titre { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; }
.viva h3 { font-family: var(--titre); font-size: clamp(30px, 3.4vw, 40px); text-transform: uppercase; line-height: 1; }
.viva p { margin: 0; font-weight: 500; font-size: 15px; }
.viva-liens { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 6px; }
.viva-liens a { color: var(--fond); font-weight: 600; text-decoration: underline; }
.viva-liens .bouton-noir { background: var(--fond); color: var(--jaune); text-decoration: none; font-family: var(--titre); font-weight: 400; font-size: 15px; letter-spacing: 2px; text-transform: uppercase; padding: 12px 22px; }
.viva-liens .bouton-noir:hover { color: var(--jaune-2); }

/* Contact */
.contact { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 64px; padding-bottom: 64px; }
.contact-texte { display: flex; flex-direction: column; gap: 16px; }
.contact-texte p { margin: 0; color: #c7cbd0; font-size: 16px; }
.contact-texte .lieu { color: var(--gris-2); font-size: 14px; }
.formulaire { display: flex; flex-direction: column; max-width: 640px; }
.champs-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.formulaire label { display: block; margin: 0 0 6px; font-size: 12.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--gris); }
.champs-2 + label { margin-top: 14px; }
.formulaire input, .formulaire textarea { width: 100%; background: var(--fond-2); border: 1px solid #33373c; padding: 12px 14px; color: var(--texte); font: inherit; font-size: 16px; border-radius: 0; }
.formulaire input:focus, .formulaire textarea:focus { border-color: var(--jaune); outline: none; }
.formulaire textarea { resize: vertical; min-height: 140px; }
.formulaire button { align-self: flex-start; margin-top: 16px; background: var(--jaune); color: var(--fond); border: 0; padding: 14px 34px; font-family: var(--titre); font-size: 17px; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; }
.formulaire button:hover { background: var(--jaune-2); }
.rgpd { margin: 14px 0 0; font-size: 12.5px; color: var(--gris-2); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Visionneuse */
.visionneuse { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.visionneuse[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.visionneuse::backdrop { background: rgba(10, 11, 12, .94); }
.visionneuse img { max-width: 92vw; max-height: 78vh; width: auto; height: auto; border: 3px solid var(--texte); }
.visionneuse-legende { margin: 0; color: var(--texte); font-size: 14px; text-align: center; padding: 0 16px; }
.visionneuse-boutons { display: flex; gap: 10px; }
.visionneuse button { background: var(--jaune); border: 0; color: var(--fond); font-family: var(--titre); font-size: 15px; letter-spacing: 2px; text-transform: uppercase; padding: 11px 22px; min-width: 48px; cursor: pointer; }

/* Pied */
.pied { border-top: 1px solid #26292d; margin-top: 0; padding: 26px var(--marge); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; max-width: 1440px; margin: 0 auto; }
.pied-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; }
.pied-logos img { height: 26px; width: auto; opacity: .8; }
.pied p { margin: 0; font-size: 13px; color: var(--gris-2); }
.pied a { color: var(--gris-2); text-decoration: underline; }

/* Pages texte (mentions, réponse du formulaire) */
.page-texte { max-width: 760px; padding: 32px var(--marge) 64px; }
.page-texte h2 { font-family: var(--titre); font-size: 22px; text-transform: uppercase; letter-spacing: 1px; margin: 32px 0 8px; }
.page-texte p { color: #c7cbd0; margin: 0 0 10px; }

/* Page carte de visite NFC */
.page-carte { min-height: 100vh; display: flex; align-items: center; justify-content: center; border-top: 8px solid var(--jaune); }
.carte-visite { width: 100%; max-width: 420px; padding: 40px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.carte-visite-photo { width: 160px; height: 160px; object-fit: cover; border-radius: 50%; filter: grayscale(1); border: 3px solid var(--jaune); }
.carte-visite h1 { font-family: var(--titre); text-transform: uppercase; font-size: 72px; line-height: .95; display: flex; gap: .25em; }
.carte-visite .nom-complet { margin: 0; letter-spacing: 2px; font-size: 13px; }
.bouton-jaune { display: block; width: 100%; margin-top: 10px; background: var(--jaune); color: var(--fond); font-family: var(--titre); font-size: 18px; letter-spacing: 2px; text-transform: uppercase; padding: 16px; }
.bouton-jaune:hover { background: var(--jaune-2); color: var(--fond); }
.carte-visite-liens { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
.carte-visite-liens a { display: block; border: 1px solid var(--filet); padding: 12px 8px; color: var(--texte); font-weight: 600; font-size: 14px; }

/* Tablette */
@media (max-width: 1100px) {
  .cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lamelles { grid-auto-flow: column; grid-auto-columns: 150px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .lamelle { scroll-snap-align: start; }
  .contact { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* Téléphone */
@media (max-width: 720px) {
  .entete { padding-top: 14px; padding-bottom: 14px; }
  .marque { font-size: 17px; }
  .entete nav a { font-size: 11.5px; letter-spacing: 1.5px; }
  .accueil { grid-template-columns: minmax(0, 1fr); gap: 34px; padding-top: 24px; padding-bottom: 44px; }
  .accueil h1 { font-size: 104px; }
  .h1-vion { -webkit-text-stroke-width: 2px; }
  .accroche { font-size: 14px; padding: 9px 14px; }
  .accueil-photo { margin: 0 8px 0 14px; }
  .bandeau span { font-size: 15px; letter-spacing: 3px; }
  .section { padding-top: 44px; }
  .cartes { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .lamelles { grid-auto-columns: 128px; margin: 0 calc(var(--marge) * -1); padding: 0 var(--marge) 8px; scroll-padding: 0 var(--marge); }
  .lamelle a { height: 380px; }
  .viva { grid-template-columns: minmax(0, 1fr); padding: 0; gap: 0; }
  .viva img { border: 0; border-bottom: 3px solid var(--fond); }
  .viva-texte { padding: 20px; }
  .viva-liens { flex-direction: column; align-items: stretch; text-align: center; }
  .champs-2 { grid-template-columns: minmax(0, 1fr); }
  .formulaire button { align-self: stretch; }
  .pied-logos { display: grid; grid-template-columns: repeat(2, max-content); }
}