/* Film streetwear : le fond et les textes suivent la palette du thème. */
.home { --campagne-entete:126px }
.home .annonce { position:relative; z-index:61; background:transparent }
.home:not(.campagne-hors-entete) .entete {
  background:transparent;
  -webkit-backdrop-filter:none;
  backdrop-filter:none
}
.home #contenu { margin-top:calc(-1 * var(--campagne-entete)) }
.campagne--film {
  position:relative;
  isolation:isolate;
  max-width:none;
  margin:0;
  padding:0;
  overflow:hidden;
  border-radius:0;
  background:var(--surface-alt)
}
.campagne__media {
  position:absolute;
  z-index:-2;
  inset:0;
  overflow:hidden
}
.campagne__poster,.campagne__video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 60%
}
.campagne__video { opacity:0 }
.campagne--en-lecture .campagne__video { opacity:1 }
.campagne--film .campagne__grille {
  min-height:max(740px,100svh);
  grid-template-columns:minmax(0,1fr) 290px;
  gap:40px;
  padding:calc(var(--campagne-entete) + 64px) var(--gouttiere) 40px
}
.campagne--film .campagne__texte { max-width:520px; padding:8px 0 }
.campagne--film h1 { font-size:clamp(54px,6.5vw,94px) }
.campagne--film .campagne__description { color:var(--encre) }
.campagne--film .bouton { border-radius:999px; padding-inline:24px }
.campagne--film .campagne__signature { margin-top:28px; padding-top:0; max-width:340px; color:#000 }
.campagne--film .campagne__visuel {
  align-self:end;
  min-height:250px;
  border-radius:22px;
  box-shadow:0 12px 36px #30251918
}
.campagne--film .campagne__etiquette { padding:16px; font-size:9px }
.campagne--film .campagne__fond { top:45px; left:16px; font-size:62px }
.campagne--film .campagne__produit { padding:16px; gap:8px }
.campagne--film .campagne__produit strong { font-size:15px; line-height:1.3 }
.campagne--film .campagne__fleche { flex:none; width:32px; height:32px; font-size:18px }
.campagne__lecture {
  position:absolute;
  top:calc(var(--campagne-entete) + 16px);
  right:max(var(--gouttiere),calc((100% - var(--largeur)) / 2 + var(--gouttiere)));
  z-index:2;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:8px 16px;
  border:1px solid #fff8;
  border-radius:999px;
  background:var(--surface);
  color:var(--encre);
  font-size:11px
}
.campagne__lecture span { font-size:14px }

/* Le centre reste libre pour les douze changements de sneakers. */
.campagne--multipaires .campagne__video,
.campagne--multipaires .campagne__poster { object-position:center }
.campagne--multipaires .campagne__texte { max-width:340px }
.campagne--multipaires h1 { font-size:clamp(50px,4.8vw,68px) }
.campagne--multipaires .campagne__grille { grid-template-columns:minmax(0,1fr) 240px }
.campagne--multipaires .campagne__visuel { min-height:220px }
@media(max-width:959px) {
  .home { --campagne-entete:114px }
  .campagne--film .campagne__grille { grid-template-columns:minmax(0,1fr) 230px; gap:20px }
  .campagne--film .campagne__visuel { min-height:220px }
  .campagne--film h1 { font-size:clamp(44px,6.6vw,68px) }
}
@media(max-width:639px) {
  .home { --campagne-entete:106px }
  .campagne__poster,.campagne__video { object-position:58% center }
  .campagne--film .campagne__grille { min-height:100svh; grid-template-columns:1fr; padding:calc(var(--campagne-entete) + 72px) var(--gouttiere) 24px; gap:24px }
  .campagne--film .campagne__texte { padding:0; color:var(--blanc); text-shadow:0 1px 4px #0009 }
  .home .annonce { color:var(--blanc); text-shadow:0 1px 4px #0009 }
  .campagne--film .eyebrow { color:var(--blanc) }
  .campagne--film h1 { font-size:clamp(42px,11vw,64px); margin:18px 0 }
  .campagne--film .campagne__description { font-size:12px; color:var(--blanc) }
  .campagne--film .campagne__visuel { aspect-ratio:1.3; min-height:0; width:100%; max-width:320px; justify-self:center }
  .campagne--film .campagne__fond { font-size:clamp(52px,16vw,78px) }
  .campagne__lecture { padding:8px 12px; font-size:10px; min-height:44px }
}

@media(max-width:959px) {
  .campagne--multipaires .campagne__grille {
    min-height:max(820px,100svh);
    grid-template-columns:1fr;
    grid-template-rows:auto 1fr;
    align-items:start;
    gap:24px;
    padding-top:calc(var(--campagne-entete) + 32px)
  }
  .campagne--multipaires .campagne__video { object-fit:contain }
  .campagne--multipaires .campagne__poster { filter:blur(20px); opacity:.3; transform:scale(1.06) }
  .campagne--multipaires .campagne__texte { color:var(--encre); text-shadow:none; padding:0 }
  .campagne--multipaires .eyebrow { color:var(--gris) }
  .campagne--multipaires .campagne__description { color:var(--encre); font-size:12px; margin-bottom:16px }
  .campagne--multipaires h1 { font-size:clamp(34px,8.8vw,44px); margin:14px 0 }
  .campagne--multipaires .campagne__signature { display:none }
  .campagne--multipaires .campagne__visuel { width:220px; max-width:100%; min-height:0; aspect-ratio:1.3; justify-self:end }
  .campagne--multipaires .campagne__fond { font-size:58px; top:40px }
  .campagne--multipaires .campagne__etiquette { padding:12px }
  .campagne--multipaires .campagne__produit { padding:12px }
  .campagne--multipaires .campagne__produit strong { font-size:13px }
  .campagne--multipaires .campagne__fleche { width:28px; height:28px; font-size:16px }
  .home:has(.campagne--multipaires) .annonce { color:var(--encre); text-shadow:none }
}

/* Téléphone et tablette : le hero s'empile (texte, film à sa vraie taille, paire en sélection)
   au lieu d'étirer une grande zone vide autour de la vidéo. L'affiche reste nette si le film ne se lance pas. */
@media(max-width:959px) {
  .campagne--multipaires {
    display:flex;
    flex-direction:column;
    padding-top:calc(var(--campagne-entete) + 20px)
  }
  .campagne--multipaires .campagne__grille { display:contents }
  .campagne--multipaires .campagne__texte {
    order:1;
    max-width:none;
    padding:0 var(--gouttiere)
  }
  .campagne--multipaires .campagne__media {
    order:2;
    position:relative;
    inset:auto;
    z-index:0;
    width:100%;
    aspect-ratio:16/9;
    margin-top:20px
  }
  .campagne--multipaires .campagne__video { object-fit:cover }
  .campagne--multipaires .campagne__poster { filter:none; opacity:1; transform:none }
  .campagne--multipaires .campagne__lecture {
    order:3;
    position:static;
    align-self:flex-end;
    margin:10px var(--gouttiere) 0
  }
  .campagne--multipaires .campagne__visuel {
    order:4;
    align-self:flex-start;
    width:min(260px,calc(100% - 2 * var(--gouttiere) - 72px));
    margin:16px var(--gouttiere) 24px
  }
}
/* Téléphone à l'horizontale : le film ne doit pas dépasser la hauteur de l'écran. */
@media(max-width:959px) and (orientation:landscape) and (max-height:520px) {
  .campagne--multipaires .campagne__media { aspect-ratio:auto; height:72svh }
  .campagne--multipaires h1 { margin:8px 0 }
}

/* Ordinateur : la carte « En sélection » remonte pour laisser la place à la bulle WhatsApp. */
@media(min-width:960px) {
  .campagne--multipaires .campagne__visuel { margin-bottom:48px }
}