/* ===== WORLD PANIK — charte reprise du site Odoo ===== */
:root {
  --fond: #000;
  --fond-section: rgba(0, 0, 0, .82);
  --texte: #fff;
  --texte-doux: #c9cdd1;
  --texte-discret: #8d949a;
  --lien: #a1a8ae;
  --trait: rgba(255, 255, 255, .14);
  /* les deux couleurs du visuel Polar */
  --world: #f2902e;  /* orange chaud : le versant humain */
  --panik: #6ea3e0;  /* bleu froid : le versant machine */
  --titres: "Bebas Neue", sans-serif;
  --corps: "Montserrat", sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--fond) url("assets/img/fond-page.jpg") center / cover no-repeat fixed;
  color: var(--texte);
  font-family: var(--corps);
  font-size: 1rem;
  line-height: 1.5;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--titres);
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  margin: 0 0 .5rem;
}
h2 { font-size: 2.75rem; }

a { color: var(--lien); }

img { max-width: 100%; }

/* Titre lu par Google et les lecteurs d'écran, invisible à l'écran */
.masque {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Petit surtitre en capitales espacées */
.etiquette {
  font-family: var(--corps);
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--texte-discret);
  margin: 0 0 1rem;
}

/* Largeur commune des sections de contenu */
.groupe, .dates, .pro, .contact {
  padding: 96px 24px;
}
.groupe > *, .dates > *, .pro > *, .contact > * {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

/* ----- Bannière ----- */
.banniere {
  position: relative;
  height: 60vh;
  overflow: hidden;
  background: #000;
}
.banniere img,
.banniere video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ----- Le groupe ----- */
.groupe { background: var(--fond-section); }

.accroche {
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.6;
  text-align: center;
  color: var(--texte-doux);
  margin-bottom: 72px;
}
.accroche strong { color: var(--texte); font-weight: 700; }

.deux-mondes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 72px;
}
.monde { padding: 8px 40px; }
.monde h2 { font-size: 3.875rem; margin: 0; }
.monde p:last-child { color: var(--texte-doux); font-weight: 300; margin: 0; }
.monde-world { border-right: 1px solid var(--trait); text-align: right; }
.monde-world h2 { color: var(--world); }
.monde-panik h2 { color: var(--panik); }

.presentation {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
}
.presentation figure { margin: 0; }
.presentation figure img { display: block; width: 100%; height: auto; }
.presentation p { color: var(--texte-doux); font-weight: 300; margin: 0 0 1rem; }

.membres {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  border-top: 1px solid var(--trait);
}
.membres li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--trait);
}
.membres li span:first-child { font-weight: 700; }
.membres li span:last-child {
  color: var(--texte-discret);
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  align-self: center;
}

/* ----- Vidéos (live + clip) ----- */
/* Côte à côte sur ordinateur, l'une sous l'autre sur tablette et mobile */
.videos {
  background: rgba(0, 0, 0, .15);
  text-align: center;
  /* contenu limité à ~1190 px de large, mais fond sur toute la largeur */
  padding: 120px max(24px, (100% - 1192px) / 2);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
.videos h2 { font-size: 2.2rem; margin-bottom: 24px; }
.video {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ----- EP Polar ----- */
.ep {
  background: #000 url("assets/img/fond-polar.jpg") center / cover no-repeat;
  text-align: center;
  overflow: hidden; /* coupe les dromadaires quand ils grossissent */
}
.ep-texte {
  position: relative;
  z-index: 1; /* texte et logos restent au-dessus des dromadaires */
  max-width: 1080px;
  margin: 0 auto;
  padding: 82px 24px 0;
}
.ep h2 { font-size: 3.875rem; margin: 0; }
.ep .etiquette { color: var(--texte-doux); margin-bottom: 1.5rem; }
.ep p:not(.etiquette) {
  text-align: left;
  color: var(--texte-doux);
  font-weight: 300;
  font-size: .95rem;
  margin: 0 0 3rem;
}
.ep p strong { color: var(--texte); font-weight: 700; }

.plateformes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.plateformes img {
  width: 125px;
  height: 48px;
  object-fit: contain;
  padding: 6px;
  display: block;
  transition: transform .2s;
}
.plateformes a:hover img { transform: scale(1.08); }

.chameaux {
  display: block;
  width: 100%;
  height: auto;
  margin-top: -14vw;
  transform-origin: 50% 100%; /* les pattes restent au sol pendant la pulsation */
  will-change: transform;
}

/* ----- Dates ----- */
.dates { background: #000; }
.dates h2, .pro h2, .contact h2 { font-size: 3.875rem; text-align: center; margin-bottom: 48px; }
.dates h3 { margin-top: 40px; }

.liste-dates {
  list-style: none;
  padding: 0;
  margin-top: 0;
  border-top: 1px solid var(--trait);
}
.liste-dates li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--trait);
}
.liste-dates .lieu { font-family: var(--titres); font-size: 1.6rem; letter-spacing: .02em; }
.liste-dates .ville {
  color: var(--texte-discret);
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.liste-dates .vide { color: var(--texte-doux); font-weight: 300; }
.liste-dates .vide a { color: var(--world); }

/* ----- Espace pro ----- */
.pro { background: var(--fond-section); }
.pro .intro {
  text-align: center;
  color: var(--texte-doux);
  font-weight: 300;
  margin-top: -32px;
  margin-bottom: 48px;
}

.telechargements {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 64px;
}
.telechargements a {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 16px;
  align-items: center;
  padding: 20px;
  border: 1px solid var(--trait);
  color: var(--texte);
  text-decoration: none;
  transition: border-color .2s, background .2s;
}
.telechargements a:hover { border-color: var(--world); background: rgba(242, 144, 46, .08); }
.telechargements i { grid-row: span 2; font-size: 1.6rem; color: var(--world); }
.telechargements span { font-weight: 700; }
.telechargements small { color: var(--texte-discret); font-size: .75rem; }

.technique {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 48px;
  margin: 0 auto;
}
.technique div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--trait);
}
.technique dt {
  color: var(--texte-discret);
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  align-self: center;
}
.technique dd { margin: 0; text-align: right; }

/* ----- Contact ----- */
.contact { background: #000; text-align: center; }
.contacts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
.contacts p { margin: 0 0 .4rem; }
.contacts .nom { font-family: var(--titres); font-size: 2rem; margin-bottom: .6rem; }
.contacts a { color: var(--texte-doux); text-decoration: none; border-bottom: 1px solid var(--trait); }
.contacts a:hover { color: var(--texte); border-color: var(--world); }

/* ----- Pied de page ----- */
footer {
  background: #000;
  text-align: center;
  padding: 24px 16px 64px;
  border-top: 1px solid var(--trait);
}
.tri-spirale {
  display: block;
  width: 72px;
  height: auto;
  margin: 32px auto 24px;
  opacity: .85;
}
footer .reseaux a {
  color: var(--lien);
  font-size: 2rem;
  margin: 0 8px;
  text-decoration: none;
  transition: color .2s;
}
footer .reseaux a:hover { color: var(--texte); }

/* ----- Animations au défilement (pilotées par animations.js) -----
   Sans JavaScript, la classe .js n'existe pas : tout reste visible. */
.js .apparait {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s ease, transform 1s ease;
  transition-delay: calc(var(--rang, 0) * 150ms);
}
.js .apparait.visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .apparait { opacity: 1; transform: none; transition: none; }
}

/* ----- Tablette ----- */
@media (max-width: 991.98px) {
  .videos { grid-template-columns: 1fr; gap: 72px; padding: 96px max(24px, (100% - 690px) / 2); }
  .telechargements { grid-template-columns: 1fr 1fr; }
  .presentation { grid-template-columns: 1fr; }
}

/* ----- Mobile ----- */
@media (max-width: 767.98px) {
  body { background-attachment: scroll; }
  .banniere { height: 30vh; }
  .banniere video { display: none; }

  h2 { font-size: 2rem; }
  .groupe, .dates, .pro, .contact { padding: 56px 16px; }

  .accroche { font-size: 1.1rem; margin-bottom: 48px; }
  .accroche br { display: none; }
  .deux-mondes { grid-template-columns: 1fr; gap: 32px; margin-bottom: 48px; }
  .monde { padding: 0; text-align: center; }
  .monde-world { border-right: 0; }
  .monde h2 { font-size: 2.75rem; }

  .videos { padding: 48px 16px; gap: 40px; }
  .videos h2 { font-size: 1.6rem; margin-bottom: 16px; }

  .ep h2 { font-size: 2rem; }
  .ep-texte { padding: 40px 16px 0; }
  .ep p:not(.etiquette) { margin-bottom: 2rem; }
  .chameaux { margin-top: -8vw; }

  .dates h2, .pro h2, .contact h2 { font-size: 2.5rem; margin-bottom: 32px; }
  .liste-dates li { flex-direction: column; }
  .liste-dates .lieu { font-size: 1.35rem; }

  .pro .intro { margin-top: -16px; margin-bottom: 32px; }
  .telechargements { grid-template-columns: 1fr; margin-bottom: 48px; }
  .technique { grid-template-columns: 1fr; }

  .contacts { grid-template-columns: 1fr; gap: 40px; }
}