/*
 * reset-podcast.overrides.css : chargée APRÈS reset-podcast.webflow.css.
 * Classes seo-as-hN : une balise changée pour le plan de titres (SEO, accessibilité)
 * garde exactement le rendu de la balise hN d'origine de l'export Webflow.
 * Sélecteurs « balise:where(.classe) » : spécificité (0,0,1), comme les règles h1..h6/p
 * de Webflow (battues grâce à l'ordre de chargement), mais inférieure aux classes
 * Webflow posées sur l'élément (.lp_hero_heading, .h2-small, .text-color-secondary...), qui gagnent toujours.
 * Les @media reproduisent seulement les surcharges de hN dans reset-podcast.webflow.css.
 * Neutralité prouvée (getComputedStyle, getBoundingClientRect, pixels) à 1440/990/766/478/390 px.
 */

/* h1 ou h3 au rendu h2 (héros à propos, contact, reset-event ; « Pasteur JORGE » en h3.h2-small, a-propos) */
h1:where(.seo-as-h2),
h3:where(.seo-as-h2) {
  color: inherit;
  letter-spacing: -.4rem;
  text-align: inherit;
  text-transform: uppercase;
  text-wrap: inherit;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 7.5rem;
  font-weight: 700;
  line-height: 1;
}

/* h1 au rendu h3 (page 404) */
h1:where(.seo-as-h3) {
  color: var(--base-color-neutral--black);
  letter-spacing: -.03rem;
  text-align: inherit;
  text-transform: uppercase;
  text-wrap: inherit;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 2.625rem;
  font-weight: 700;
  line-height: 1.2;
}

/* h3 au rendu h4 (noms des animateurs, a-propos) */
h3:where(.seo-as-h4) {
  color: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.2;
}

/* h2, h3 ou p au rendu h5 (questions FAQ, accroche du concept, sous-titres) */
h2:where(.seo-as-h5),
h3:where(.seo-as-h5),
p:where(.seo-as-h5) {
  opacity: 1;
  color: inherit;
  font-family: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
  white-space: break-spaces;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}

@media screen and (max-width: 991px) {
  h1:where(.seo-as-h2),
  h3:where(.seo-as-h2) {
    font-size: 5rem;
  }

  h1:where(.seo-as-h3) {
    line-height: 1;
  }
}

@media screen and (max-width: 767px) {
  h1:where(.seo-as-h2),
  h3:where(.seo-as-h2) {
    letter-spacing: -.1rem;
    font-size: 3.5rem;
  }

  h1:where(.seo-as-h3) {
    font-size: 1.5rem;
  }

  h3:where(.seo-as-h4),
  h2:where(.seo-as-h5),
  h3:where(.seo-as-h5),
  p:where(.seo-as-h5) {
    font-size: 1.25rem;
  }
}

@media screen and (max-width: 479px) {
  h1:where(.seo-as-h2),
  h3:where(.seo-as-h2) {
    font-size: 2.75rem;
  }

  h3:where(.seo-as-h4) {
    font-size: 1.8rem;
  }
}

/* Fond des héros (accueil, à propos, contact) : vidéo du studio RESET (components/HeroVideo.tsx) sous un voile noir.
 * L'image de fond Webflow est retirée ; l'affiche de la vidéo (sa première image) s'affiche avant la lecture. */
.section_hero {
  background-color: #000;
  background-image: none;
}

.hero_video {
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Voile noir et halo bleu en bas à droite, repris de l'ancienne image de fond (hero-bg-reset.jpg). */
.hero_video::after {
  content: "";
  background-color: rgba(0, 0, 0, .6);
  background-image: radial-gradient(120% 90% at 100% 100%, rgba(33, 195, 228, .32) 0%, rgba(33, 195, 228, 0) 60%);
  position: absolute;
  inset: 0;
}

/* Zoom au défilement : 1 en haut de page, 1,6 quand le héros est recouvert (--hero-progress, HeroVideo.tsx). */
.hero_video-element {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
  transform: scale(calc(1 + .6 * var(--hero-progress, 0)));
  will-change: transform;
}

/* Assombrissement au défilement : du voile de base jusqu'au noir complet. */
.hero_video::before {
  content: "";
  background-color: #000;
  opacity: var(--hero-progress, 0);
  position: absolute;
  inset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .hero_video-element {
    transform: none;
  }
}

/* Le contenu du héros passe au-dessus de la vidéo (positionné, plus loin dans le DOM). */
.section_hero > .padding-global {
  position: relative;
}

/* Héros collant : les sections suivantes défilent par-dessus. Elles sont regroupées dans .hero_following,
 * positionné (peint au-dessus du héros) avec le fond de la page. Les sections restent transparentes comme dans
 * l'export, pour que les ombres qui débordent d'une section sur la suivante restent visibles ; display: flow-root
 * garde dans le conteneur les marges des enfants (ex. .w-form, 15 px), sans espace sans fond. */
.section_hero {
  position: sticky;
  top: 0;
}

.hero_following {
  background-color: var(--base-color-neutral--white);
  display: flow-root;
  position: relative;
}

/* Vignette d'épisode en 16:9 à toutes les largeurs (export Webflow : 4:3 sur ordinateur, 2:1 sur tablette,
 * 16:9 sous 767 px). Sur ordinateur, hauteur réduite de 21rem à 18rem (32rem de large). */
.pisode_thumbnail {
  aspect-ratio: 16 / 9;
  height: 18rem;
}

@media screen and (max-width: 991px) {
  .episodes_lightbox-link,
  .pisode_thumbnail {
    aspect-ratio: 16 / 9;
  }

  .pisode_thumbnail {
    height: auto;
  }
}

/* Section « le concept » (accueil) : photo du pasteur Jorge au studio RESET (RESETEP01-024) à la place de
 * WhatsApp-Image-2025-11-29-at-22.37.15-3.jpeg, mêmes dégradés que l'export. */
.concept_main-wrapper {
  background-image: linear-gradient(90deg, #07070700, var(--base-color-neutral--black) 75%), url('../images/concept-reset-jorge.jpg');
}

@media screen and (max-width: 767px) {
  .concept_main-wrapper {
    background-image: linear-gradient(to bottom, #0009, #0009), linear-gradient(90deg, #07070700, var(--base-color-neutral--black) 75%), url('../images/concept-reset-jorge.jpg');
  }
}

/* Titre animé du héros de l'accueil (components/HeroTitle.tsx, GSAP) : un span par caractère, animé en `top`
 * et en opacité ; le trait de soulignement du bureau (h1 .typer::after) se déploie avec --typer-line. */
/* .typer peint son texte en background-clip: text (fond blanc, remplissage transparent) : un élément positionné
 * n'est pas pris dans ce découpage et hériterait d'un remplissage transparent. Le fond étant un blanc uni,
 * le même blanc en remplissage donne un rendu identique. */
.hero-typer_char {
  -webkit-text-fill-color: var(--base-color-neutral--white);
  position: relative;
}

.hero-typer_sr {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
}

h1 .typer::after {
  transform: scaleX(var(--typer-line, 1));
  transform-origin: left center;
}

/* Avant le départ de l'animation (classe is-animated posée par HeroTitle), la phrase est masquée pour ne pas
 * s'afficher puis disparaître. Filet de sécurité : si le JavaScript n'a pas démarré après 3 s, elle s'affiche. */
@media (prefers-reduced-motion: no-preference) {
  html.w-mod-js .hero_content h1 .typer:not(.is-animated) {
    opacity: 0;
    animation: hero-typer-fallback 0s 3s forwards;
  }
}

@keyframes hero-typer-fallback {
  to {
    opacity: 1;
  }
}

/* Logo de la navbar de l'évènement : l'export lui donnait la couleur de fond (--dark--light-mode--dark),
 * donc un logo blanc sur les sections claires. Même variable que le logo de l'accueil : noir sur fond clair,
 * blanc sur fond foncé, au gré des déclencheurs .section_nav-trigger (WebflowRuntime). */
.nav_logo.is-lp {
  color: var(--dark--light-mode--light);
}

/* Déclencheur de couleur de navbar placé au bas de son conteneur (fin d'une carte foncée). */
.section_nav-trigger.is-bottom {
  inset: auto 0% 0%;
}

/* Titre du héros de l'évènement sur 2 lignes (« Donne-nous une journée / pour t'aider à faire un reset ») :
 * la taille de l'export devient un plafond et suit la largeur de son conteneur (largeur d'écran moins les 2 × 32 px
 * de marge, × 6,75 %, mesuré pour tenir sur 2 lignes). Sous 768 px, tailles de l'export (plusieurs lignes). */
.lp_hero_heading {
  font-size: min(5.96rem, calc((100vw - 4rem) * .0675));
}

@media screen and (max-width: 991px) {
  .lp_hero_heading {
    font-size: min(4rem, calc((100vw - 4rem) * .0675));
  }
}

@media screen and (max-width: 767px) {
  .lp_hero_heading {
    font-size: 3.2rem;
  }
}

@media screen and (max-width: 479px) {
  .lp_hero_heading {
    font-size: 2.8rem;
  }
}

/* Titre du héros de l'accueil sur 2 lignes à partir de 768 px. Le texte coule librement (« au Québec » peut
 * passer à la 2e ligne) et la phrase animée reste insécable (inline-block). La taille maximale qui garde les
 * 6 phrases sur 2 lignes vaut ~4,05vw (mesurée de 768 à 2560 px) : 3,95vw sur ordinateur et 4,05vw sur tablette,
 * plafonnés aux tailles de l'export. Sous 768 px, mise en page de l'export. */
@media screen and (min-width: 768px) {
  h1.hero-title .typer {
    white-space: nowrap;
    display: inline-block;
  }
}

@media screen and (min-width: 992px) {
  .hero_content:has(> h1.hero-title) {
    max-width: 90vw;
  }

  h1.hero-title {
    font-size: min(4rem, 3.95vw);
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  h1.hero-title {
    font-size: min(3.5rem, 4.05vw);
  }
}

/* Texte défilant « Et si c'était le moment / de faire un reset ? » (accueil) réduit d'environ 30 %
 * (export : 10rem, 7rem sous 991 px, 5rem sous 767 px), graisse 700 au lieu de 800, interlettrage resserré. */
.sliding-text_text {
  letter-spacing: -.04em;
  font-size: 7rem;
  font-weight: 700;
}

@media screen and (max-width: 991px) {
  .sliding-text_text {
    font-size: 5rem;
  }
}

@media screen and (max-width: 767px) {
  .sliding-text_text {
    font-size: 3.5rem;
  }
}

/* Halo flouté derrière la navbar de l'évènement : is-inverted lui donnait la couleur du texte (halo noir derrière un
 * logo noir sur les sections claires). Même couleur que sur l'accueil, celle du fond de la section ; blanc sous 479 px. */
.nav_background.is-inverted {
  background-color: var(--dark--light-mode--dark);
}

@media screen and (max-width: 479px) {
  .nav_background.is-inverted {
    background-color: var(--base-color-neutral--white);
  }
}

/* Bouton de la navbar de l'évènement : même couleur que le logo (blanc quand le logo est blanc, noir quand il est
 * noir), texte de la couleur du fond. Au survol (fond translucide), texte de la couleur du logo. */
.button.is-nav {
  background-color: var(--dark--light-mode--light);
  color: var(--dark--light-mode--dark);
}

.button.is-icon.is-nav {
  border-color: var(--dark--light-mode--light);
}

.button.is-icon.is-nav:hover {
  color: var(--dark--light-mode--light);
}

/* Héros d'À propos et de Contact : environ moitié moins hauts que dans l'export (95svh, 75svh sous 767 px). */
.section_hero.is-not-hp {
  min-height: 50svh;
}

@media screen and (max-width: 767px) {
  .section_hero.is-not-hp {
    min-height: 40svh;
  }
}

/* Formulaire de contact : bouton « Envoyer » sur toute la largeur de la grille (une colonne sur deux dans l'export). */
.contact_form > .w-button {
  grid-column: 1 / -1;
}

/* Section « Les animateurs » (À propos), à partir de 1280 px : photos agrandies aux deux extrémités (Yanick à
 * gauche, Gwenaël à droite) et, entre les deux, leurs textes l'un au-dessus de l'autre, chacun aligné vers la photo
 * de la personne. Les .animateurs_item passent en display: contents (balisage et ordre de lecture inchangés).
 * En dessous de 1280 px, la colonne centrale serait trop étroite : mise en page de l'export. */
@media screen and (min-width: 1280px) {
  .animateurs_main-wrapper {
    grid-column-gap: 1.5rem;
    grid-row-gap: 3rem;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.25fr);
    grid-template-areas:
      "photo-1 texte-1 photo-2"
      "photo-1 texte-2 photo-2";
    display: grid;
  }

  .animateurs_item {
    display: contents;
  }

  .animateurs_item > .animateurs_img {
    grid-area: photo-1;
  }

  .animateurs_item > .animateur_content-wrapper {
    grid-area: texte-1;
    align-self: start;
  }

  .animateurs_item.is-2 > .animateurs_img {
    grid-area: photo-2;
  }

  .animateurs_item.is-2 > .animateur_content-wrapper {
    text-align: right;
    grid-area: texte-2;
    align-self: end;
    align-items: flex-end;
  }
}

/* Entre 1280 et 1365 px : colonne centrale un peu plus large et espace vertical réduit pour que les deux textes
 * tiennent dans la hauteur des photos. */
@media screen and (min-width: 1280px) and (max-width: 1365px) {
  .animateurs_main-wrapper {
    grid-row-gap: 2rem;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.1fr);
  }
}

/* #resetmoment sans son défilement de cartes (SHOW_MARQUEE, components/ResetMoment.tsx) : le titre se rapproche du
 * formulaire de la section suivante (240 px d'écart dans l'export : 80 px sous le titre + 160 px de padding),
 * et un peu plus d'espace au-dessus (14rem au lieu de 10rem). */
.reset-moment_no-marquee {
  padding-top: 14rem;
}

.reset-moment_no-marquee .h2_wrapper {
  margin-bottom: 3rem;
}

.reset-moment_no-marquee + .section {
  padding-top: 0;
}

/* Pages légales (components/LegalPage.tsx) : titre, date de mise à jour et texte courant lisible. Les h2 globaux de
 * l'export (7,5rem, majuscules) sont ramenés à une taille d'intertitre dans .legal_content. */
.legal_section {
  padding-top: 12rem;
  padding-bottom: 8rem;
}

.legal_title {
  color: var(--base-color-neutral--black);
  text-align: left;
  letter-spacing: -.15rem;
  text-transform: uppercase;
  margin-top: .75rem;
  margin-bottom: 1rem;
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;
}

.legal_updated {
  margin-bottom: 3rem;
}

.legal_content h2 {
  letter-spacing: -.02rem;
  margin-top: 2.5rem;
  margin-bottom: .75rem;
  font-size: 1.5rem;
  line-height: 1.2;
}

.legal_content p,
.legal_content li {
  font-size: 1.0625rem;
  line-height: 1.55;
}

.legal_content li {
  opacity: .6;
}

.legal_content p + p {
  margin-top: .75rem;
}

.legal_content ul {
  margin-top: .5rem;
  margin-bottom: 1rem;
  padding-left: 1.25rem;
}

.legal_content a {
  color: inherit;
  text-decoration: underline;
}

@media screen and (max-width: 767px) {
  .legal_section {
    padding-top: 9rem;
  }

  .legal_title {
    letter-spacing: -.08rem;
    font-size: 2.5rem;
  }
}

/* Piège à robots des formulaires de contact et d'infolettre : hors écran, ignoré par les visiteurs et les lecteurs d'écran. */
.form_honeypot {
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
  position: absolute;
  left: -10000px;
}

/* Formulaire de contact : case « Votre message » plus haute (66 px dans l'export), agrandissable en hauteur seulement. */
.contact_form textarea.infolettre_field {
  resize: vertical;
  min-height: 12rem;
}

/* Halo de la navbar (480 px et plus). Celui de l'export (.nav_background : z-index -1 et filter: blur, dans la navbar
 * fixe, en débordant de 6rem sous elle) se peignait mal dans Safari au défilement réel : intérieur de la navbar en
 * couleur pleine, débord resté de l'ancienne couleur au changement clair/foncé (bande à bord net et « ombre »). Il est
 * remplacé par .nav_halo (Nav, EventNav) : élément fixe autonome, juste sous la navbar (z-index 1000), sans débord,
 * sans filtre, masque ni opacité ; un simple dégradé de fond qui reprend le profil du flou d'origine (32 % en haut,
 * nul vers 176 px). Comme .nav_background (interactions Webflow), il s'efface quand le menu est ouvert.
 * Sous 480 px, .nav_background de l'export (bande blanche pleine) reste en place. */
.nav_halo {
  display: none;
}

@media screen and (min-width: 480px) {
  .nav_background {
    display: none;
  }

  .nav_halo {
    display: block;
    position: fixed;
    inset: 0 0 auto;
    z-index: 999;
    height: 11rem;
    pointer-events: none;
    background-image: linear-gradient(to bottom,
      color-mix(in srgb, var(--dark--light-mode--dark) 32%, transparent) 0px,
      color-mix(in srgb, var(--dark--light-mode--dark) 26%, transparent) 24px,
      color-mix(in srgb, var(--dark--light-mode--dark) 20%, transparent) 40px,
      color-mix(in srgb, var(--dark--light-mode--dark) 15%, transparent) 64px,
      color-mix(in srgb, var(--dark--light-mode--dark) 11%, transparent) 80px,
      color-mix(in srgb, var(--dark--light-mode--dark) 7.5%, transparent) 96px,
      color-mix(in srgb, var(--dark--light-mode--dark) 4.7%, transparent) 112px,
      color-mix(in srgb, var(--dark--light-mode--dark) 2.7%, transparent) 128px,
      color-mix(in srgb, var(--dark--light-mode--dark) 1.6%, transparent) 144px,
      transparent 176px);
    transition: opacity .1s;
  }

  .nav_fixed:has(.w-nav-button.w--open) .nav_halo {
    opacity: 0;
  }
}

/* Marges latérales : .container-large (87,5rem) et .container-medium (64rem) n'ont aucune marge propre sur ordinateur
 * et 1rem sur tablette ; hors .padding-global, ils touchaient les bords (ex. à 1400 px : concept, épisodes, FAQ...).
 * À partir de 768 px, au moins 32 px de chaque côté. Sous 768 px, marges de l'export (16-20 px, comme .padding-global). */
@media screen and (min-width: 768px) {
  .container-large:not(.padding-global .container-large) {
    max-width: min(87.5rem, calc(100% - 4rem));
  }

  .container-medium:not(.padding-global .container-medium) {
    max-width: min(64rem, calc(100% - 4rem));
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .container-large:not(.padding-global .container-large),
  .container-medium:not(.padding-global .container-medium) {
    padding-left: 0;
    padding-right: 0;
  }
}