/*
 * Live du 18/11/2026 : page /live/ (page-live.php, body.ol-live) et bloc en haut de
 * l'accueil (.ol-live-bloc, voir inc/live.php). Charge seulement la ou il sert
 * (wpm_enqueue_styles() dans functions.php).
 * Un seul look, sombre, repris de la bande-annonce « Le retour de Voldemort ».
 * Tout est prefixe par .ol-live ou .ol-live-bloc : rien ne deborde sur le reste du site.
 */

/* Polices auto-hebergees (Google Fonts, licence OFL), sous-ensemble latin, variables. */
@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/big-shoulders-display-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.ol-live,
.ol-live-bloc {
  --nuit: #0f0b0a;
  --braise: #1b1211;
  --filet: #3b2522;
  --filet-clair: #6a4540;
  --rouge: #e3261c;
  --led: #ff4232;
  --led-fantome: #2a1513;
  --blanc: #f8f2ee;
  --gris: #bba9a3;
  --etincelle: #f3c331;
  --whatsapp: #2fbf63;
  --telegram: #2aabee;

  --f-titre: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --f-texte: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  color-scheme: dark;
  background: var(--nuit);
  color: var(--blanc);
  font-family: var(--f-texte);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

:is(.ol-live, .ol-live-bloc) *,
:is(.ol-live, .ol-live-bloc) *::before,
:is(.ol-live, .ol-live-bloc) *::after { box-sizing: border-box; }
:is(.ol-live, .ol-live-bloc) [hidden],
.ol-live-bloc[hidden] { display: none !important; }
:is(.ol-live, .ol-live-bloc) a { color: inherit; }
:is(.ol-live, .ol-live-bloc) :focus-visible { outline: 3px solid var(--etincelle); outline-offset: 3px; border-radius: 4px; }

/* ---------- Page /live/ : document autonome ---------- */
html:has(> body.ol-live) { background: #0f0b0a; }
body.ol-live { margin: 0; min-height: 100vh; }
/* Balisage ajoute par des extensions dans wp_footer() (fenetres Ultimate Member, boutons
   « haut de page » d'Astra et d'Essential Addons, visionneuse WooCommerce) : leurs feuilles
   ne sont pas chargees ici (ol_live_alleger()), on les masque. */
body.ol-live > :not(main, .pied, #wpadminbar, script, style, template, link) { display: none !important; }
body.ol-live::before {
  content: ""; position: fixed; inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px); z-index: 10;
  background: var(--nuit);
}

.ol-live .gouttiere {
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.ol-live .cadre { max-width: 1040px; margin: 0 auto; }

/* Tete */
.ol-live .tete {
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(227, 38, 28, .30), transparent 70%),
    var(--nuit);
}
.ol-live .tete .cadre {
  display: grid; gap: 2rem; justify-items: center; text-align: center;
  padding-block: 2.75rem 3.5rem;
}
.ol-live .titre-bloc { display: grid; gap: .5rem; justify-items: center; }
.ol-live h1 {
  margin: 0; color: var(--blanc);
  font-family: var(--f-titre); font-weight: 900;
  font-size: clamp(2rem, 1.1rem + 3.4vw, 3.8rem);
  line-height: 1; letter-spacing: .01em; text-transform: uppercase;
  text-wrap: balance;
}
.ol-live h1 em,
.ol-live-bloc .ol-live-bloc__titre em { font-style: normal; color: var(--rouge); }
.ol-live .surtitre,
.ol-live-bloc .ol-live-bloc__surtitre {
  margin: 0; font-size: .78rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gris);
}

/* ---------- Compte a rebours (page et accueil) ---------- */
:is(.ol-live, .ol-live-bloc) .minuteur { width: 100%; max-width: 940px; display: grid; gap: .6rem; margin: 0 auto; }
:is(.ol-live, .ol-live-bloc) .chiffres {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.25rem, 1.5vw, 1rem);
}
:is(.ol-live, .ol-live-bloc) .case { display: grid; gap: .2rem; position: relative; }
:is(.ol-live, .ol-live-bloc) .case + .case::before {
  content: ":"; position: absolute; left: calc(clamp(.25rem, 1.5vw, 1rem) / -2); top: .02em;
  transform: translateX(-50%);
  font-family: var(--f-titre); font-weight: 900; color: var(--led);
  font-size: var(--taille-chiffres); line-height: 1;
  opacity: .5;
}
:is(.ol-live, .ol-live-bloc) .nombre {
  position: relative; isolation: isolate;
  font-family: var(--f-titre); font-weight: 900; line-height: 1;
  font-size: var(--taille-chiffres);
  font-variant-numeric: tabular-nums;
  color: var(--led);
  text-shadow: 0 0 22px rgba(255, 66, 50, .55), 0 0 2px rgba(255, 66, 50, .9);
}
:is(.ol-live, .ol-live-bloc) .nombre::before {
  content: "88"; position: absolute; inset: 0; color: var(--led-fantome);
  text-shadow: none; z-index: -1;
}
:is(.ol-live, .ol-live-bloc) .unite {
  font-size: clamp(.68rem, .6rem + .3vw, .85rem); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gris);
}
:is(.ol-live, .ol-live-bloc) .minuteur-message {
  margin: 0; display: inline-flex; align-items: center; justify-content: center; gap: .3em;
  font-family: var(--f-titre); font-weight: 900; text-transform: uppercase;
  font-size: var(--taille-message); line-height: 1;
  color: var(--led);
  text-shadow: 0 0 22px rgba(255, 66, 50, .5);
}
:is(.ol-live, .ol-live-bloc) .minuteur-message.direct::before {
  content: ""; width: .32em; height: .32em; border-radius: 50%; background: var(--led);
  animation: ol-live-clignote 1.2s steps(2, start) infinite;
}
@keyframes ol-live-clignote { to { visibility: hidden; } }
:is(.ol-live, .ol-live-bloc) .minuteur-message.eteint { color: var(--gris); text-shadow: none; }
:is(.ol-live, .ol-live-bloc) .heure-locale { margin: 0; font-size: .85rem; color: var(--etincelle); }

.ol-live { --taille-chiffres: clamp(3.6rem, 1.4rem + 10vw, 10.5rem); --taille-message: clamp(3.4rem, 1.4rem + 8vw, 8.5rem); }
.ol-live-bloc { --taille-chiffres: clamp(3rem, 1.2rem + 8vw, 7.5rem); --taille-message: clamp(2.8rem, 1.2rem + 6vw, 6rem); }

/* ---------- Boutons ---------- */
:is(.ol-live, .ol-live-bloc) .bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: .75rem 1.3rem; margin: 0;
  border-radius: 10px; border: 2px solid transparent;
  font-family: var(--f-texte); font-weight: 700; font-size: 1rem; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: transform .15s ease;
}
:is(.ol-live, .ol-live-bloc) .bouton:hover { transform: translateY(-1px); }
:is(.ol-live, .ol-live-bloc) .bouton svg { width: 1.2em; height: 1.2em; flex: none; }
:is(.ol-live, .ol-live-bloc) .bouton-whatsapp,
:is(.ol-live, .ol-live-bloc) .bouton-whatsapp:hover { background: var(--whatsapp); color: var(--nuit); }
:is(.ol-live, .ol-live-bloc) .bouton-telegram,
:is(.ol-live, .ol-live-bloc) .bouton-telegram:hover { background: var(--telegram); color: var(--nuit); }
:is(.ol-live, .ol-live-bloc) .bouton-contour,
:is(.ol-live, .ol-live-bloc) .bouton-contour:hover {
  border-color: var(--filet-clair); color: var(--blanc); background: transparent; font-size: 1.1rem;
}
:is(.ol-live, .ol-live-bloc) .bouton-live,
:is(.ol-live, .ol-live-bloc) .bouton-live:hover {
  background: var(--rouge); color: var(--blanc);
  font-family: var(--f-titre); font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.8rem); letter-spacing: .03em;
  padding: 1rem 2rem; min-height: 84px; width: 100%;
  animation: ol-live-pouls 1.8s ease-out infinite;
}
@keyframes ol-live-pouls {
  0% { box-shadow: 0 0 0 0 rgba(227, 38, 28, .55); }
  70% { box-shadow: 0 0 0 18px rgba(227, 38, 28, 0); }
  100% { box-shadow: 0 0 0 0 rgba(227, 38, 28, 0); }
}

/* Canaux WhatsApp / Telegram */
:is(.ol-live, .ol-live-bloc) .canaux { display: grid; gap: .6rem; justify-items: center; }
:is(.ol-live, .ol-live-bloc) .canaux p { margin: 0; font-size: .85rem; color: var(--gris); }
:is(.ol-live, .ol-live-bloc) .actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }

/* ---------- Acces au live, en petit sous le compteur ---------- */
.ol-live .acces-petit { display: grid; gap: .9rem; justify-items: center; width: 100%; }
.ol-live .lien-petit { display: grid; justify-items: center; width: 100%; }
.ol-live .lien-petit-texte {
  margin: 0; display: inline-flex; align-items: center; gap: .55rem;
  border: 1px dashed var(--filet-clair); border-radius: 14px;
  padding: .55rem 1.1rem; font-size: .95rem; color: var(--blanc);
}
.ol-live .lien-petit-texte svg { width: 18px; height: 18px; flex: none; color: var(--gris); }
.ol-live .bouton-live-moyen,
.ol-live .bouton-live-moyen:hover {
  width: min(100%, 440px); min-height: 62px; padding: .8rem 1.6rem;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
}
.ol-live .canaux-petits .bouton { min-height: 40px; padding: .5rem 1rem; font-size: .9rem; border-radius: 8px; }

/* ---------- Presentation et bande-annonce ---------- */
.ol-live .presentation { border-top: 1px solid var(--filet); }
.ol-live .presentation .cadre {
  display: grid; gap: 2.5rem;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
  padding-block: 3.5rem 4rem;
}
.ol-live .presentation-texte { min-width: 0; display: grid; gap: 1.1rem; }
.ol-live .presentation h2 {
  margin: 0; color: var(--blanc);
  font-family: var(--f-titre); font-weight: 900;
  font-size: clamp(2.4rem, 1.4rem + 4.4vw, 4.6rem);
  line-height: .95; letter-spacing: .005em; text-transform: uppercase;
  text-wrap: balance;
}
.ol-live .presentation h2 em { font-style: normal; color: var(--rouge); }
.ol-live .presentation p { margin: 0; max-width: 32rem; font-size: 1.15rem; color: var(--gris); }
.ol-live .presentation p strong { color: var(--blanc); }

.ol-live .teaser { margin: 0; min-width: 0; display: grid; gap: .7rem; justify-items: center; }
.ol-live .teaser-cadre {
  position: relative; width: 100%; max-width: 320px;
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--filet);
  background: #000;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .6), 0 0 80px rgba(227, 38, 28, .18);
  transform: rotate(1.5deg);
}
.ol-live .teaser-video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; background: #000; }
.ol-live .lecture {
  /* Bouton dans le bas de l'affiche, pour laisser lisible le titre « Fitness : le retour de Voldemort ? » */
  position: absolute; inset: 0; display: grid; place-items: end center;
  width: 100%; height: 100%; padding: 0 0 9%; margin: 0;
  background: linear-gradient(to top, rgba(15, 11, 10, .7), transparent 40%);
  border: 0; border-radius: 0; cursor: pointer; color: var(--blanc);
}
.ol-live .lecture:hover,
.ol-live .lecture:focus { background: linear-gradient(to top, rgba(15, 11, 10, .7), transparent 40%); color: var(--blanc); }
.ol-live .lecture span {
  width: 74px; height: 74px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(15, 11, 10, .65); border: 2px solid var(--blanc);
}
.ol-live .lecture svg { width: 28px; height: 28px; margin-left: 4px; }
.ol-live .teaser figcaption { font-size: .85rem; color: var(--gris); }

/* ---------- Chiffres cles ---------- */
.ol-live .chiffres-cles { background: var(--braise); border-block: 1px solid var(--filet); }
.ol-live .chiffres-cles ul {
  list-style: none; margin: 0 auto; padding: 2.25rem 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem;
}
.ol-live .chiffres-cles li { display: grid; gap: .3rem; align-content: start; margin: 0; }
.ol-live .chiffres-cles strong {
  font-family: var(--f-titre); font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.2rem); line-height: 1; /* « COMPLÉMENT » tient a 390 px */
}
.ol-live .chiffres-cles strong i { font-style: normal; color: var(--rouge); }
.ol-live .chiffres-cles span { font-size: .9rem; color: var(--gris); }

/* ---------- Acces au live, en grand en fin de page ---------- */
.ol-live .final .cadre {
  display: grid; gap: 1.5rem; justify-items: center; text-align: center;
  padding-block: 3.5rem 4rem;
}
.ol-live .emplacement {
  width: 100%; max-width: 820px; min-height: 220px;
  display: grid; place-items: center;
  border: 2px dashed var(--filet-clair); border-radius: 18px;
  background: rgba(27, 18, 17, .7);
  padding: 2rem 1.25rem;
}
.ol-live .emplacement[data-plein="oui"] { border-style: solid; border-color: var(--rouge); background: var(--braise); }
.ol-live .emplacement > div { display: grid; gap: 1rem; justify-items: center; width: 100%; max-width: 560px; }
.ol-live .emplacement-icone {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid var(--filet-clair); color: var(--gris);
}
.ol-live .emplacement-icone svg { width: 26px; height: 26px; }
.ol-live .emplacement h2 {
  margin: 0; color: var(--blanc);
  font-family: var(--f-titre); font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3.2rem); line-height: 1; text-wrap: balance;
}
.ol-live .final .canaux .bouton { min-height: 54px; padding: .85rem 1.6rem; font-size: 1.05rem; }

/* ---------- Pied minimal ---------- */
.ol-live .pied { text-align: center; padding-block: 1.5rem 2rem; border-top: 1px solid var(--filet); font-size: .85rem; }
.ol-live .pied a { color: var(--gris); text-decoration: none; }
.ol-live .pied a:hover { color: var(--blanc); }

/* ---------- Bloc en haut de l'accueil ---------- */
.ol-live-bloc {
  position: relative; z-index: 1;
  width: 100%;
  background:
    radial-gradient(70% 70% at 50% 0%, rgba(227, 38, 28, .32), transparent 70%),
    var(--nuit);
  padding: 2.5rem max(16px, env(safe-area-inset-left, 0px)) 3rem;
}
.ol-live-bloc .ol-live-bloc__cadre {
  max-width: 1040px; margin: 0 auto;
  display: grid; gap: 1.4rem; justify-items: center; text-align: center;
}
.ol-live-bloc .ol-live-bloc__titre {
  margin: 0; padding: 0; color: var(--blanc);
  font-family: var(--f-titre); font-weight: 900;
  font-size: clamp(2rem, 1.1rem + 3.4vw, 3.6rem);
  line-height: 1; letter-spacing: .01em; text-transform: uppercase;
  text-wrap: balance;
}
.ol-live-bloc .minuteur { max-width: 760px; }
.ol-live-bloc .ol-live-bloc__bouton,
.ol-live-bloc .ol-live-bloc__bouton:hover {
  width: min(100%, 440px); min-height: 62px; padding: .8rem 1.6rem;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); color: var(--blanc);
}
/* WhatsApp et Telegram : l'appel principal du bloc (recruter dans les groupes) */
.ol-live-bloc .ol-live-bloc__canaux { width: min(100%, 560px); gap: .75rem; }
.ol-live-bloc .ol-live-bloc__canaux p { font-size: 1.05rem; font-weight: 600; color: var(--blanc); }
.ol-live-bloc .ol-live-bloc__canaux .actions { width: 100%; flex-wrap: nowrap; gap: .75rem; }
.ol-live-bloc .ol-live-bloc__canaux .bouton {
  flex: 1 1 0; min-width: 0; min-height: 62px; padding: .8rem 1rem;
  font-size: 1.2rem; border-radius: 12px;
}

/* ---------- Petits ecrans ---------- */
@media (max-width: 820px) {
  .ol-live .presentation .cadre { grid-template-columns: minmax(0, 1fr); padding-block: 2.5rem 3rem; }
  .ol-live .teaser-cadre { max-width: 280px; }
  .ol-live .chiffres-cles ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .ol-live .tete .cadre { padding-block: 2rem 2.75rem; gap: 1.6rem; }
  .ol-live .emplacement { min-height: 200px; padding: 1.5rem 1rem; }
  .ol-live .canaux,
  .ol-live .canaux .actions { width: 100%; }
  .ol-live .canaux .bouton { flex: 1 1 0; padding-inline: .8rem; }
  .ol-live-bloc { padding-block: 2rem 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  :is(.ol-live, .ol-live-bloc) .bouton-live,
  :is(.ol-live, .ol-live-bloc) .minuteur-message.direct::before { animation: none; }
  :is(.ol-live, .ol-live-bloc) .bouton { transition: none; }
  :is(.ol-live, .ol-live-bloc) .bouton:hover { transform: none; }
}