/* ===== Héros éditorial Oreka (V2) sur le fond bleu de la V1 — à inclure après style.css ===== */
.heros--edito { padding-bottom: 0; }
.heros--edito .heros__haut { position: relative; z-index: 2; text-align: center; }
.heros--edito .pilule { margin-bottom: 24px; }
.heros--edito h1 {
  margin-inline: auto; max-width: none;
  /* deux lignes insécables : la taille suit la largeur disponible (la ligne 1 mesure --slogan-l em de large) */
  font-size: min(calc((100vw - 2 * var(--marge)) / var(--slogan-l)), 3.5rem); font-weight: 400; line-height: 1.08; letter-spacing: -.005em; text-transform: uppercase;
  --slogan-l: 15.6;
}
.heros--edito .heros__sous-titre { margin: 20px auto 0; max-width: 52ch; }
.heros--edito .heros__actions { justify-content: center; margin-top: 24px; }

/* la scène : anneau vivant centré, douchette au centre, entière, avec « Conçu au Québec » dessous.
   --produit-haut et --produit-l (position et largeur de la douchette) servent aussi à placer la mention
   et à donner à la scène la hauteur qu'il faut : l'image fait 2,559 fois sa largeur en hauteur,
   et son bas visible est à 2,523 fois sa largeur (marge transparente de 20 px sur 1433). */
.heros--edito .heros__scene {
  --produit-haut: clamp(36px, 6vh, 80px); --produit-l: clamp(104px, 12vw, 150px);
  position: relative; margin-top: 8px; overflow: hidden;
  height: max(clamp(380px, 50vh, 560px), calc(var(--produit-haut) + var(--produit-l) * 2.523 + 14px + 34px + 40px));   /* 34 px : la pastille « Conçu au Québec » */
}
.heros--edito .heros__origine {
  position: absolute; left: 0; right: 0; z-index: 2;   /* devant l'anneau et le halo */
  top: calc(var(--produit-haut) + var(--produit-l) * 2.523 + 14px);   /* 14 px sous le bas visible de la douchette */
  width: fit-content; margin: 0 auto; max-width: none; text-align: center;   /* pastille centrée sous la douchette */
  padding: 9px 18px; border-radius: 999px; background: var(--blanc);
  font-size: 14px; font-weight: 600; line-height: 16px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--noir);
}
.heros--edito .heros__halo, .heros--edito .heros__anneau {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: clamp(520px, 64vw, 900px); height: auto; aspect-ratio: 1 / 1; pointer-events: none; user-select: none;
}
.heros--edito .heros__halo { display: none; }
html.halo-actif .heros--edito .heros__halo { display: block; }
html.halo-actif .heros--edito .heros__anneau { display: none; }
.heros--edito .heros__produit {
  position: absolute; left: 50%; top: var(--produit-haut); transform: translateX(-50%);
  width: var(--produit-l); height: auto; margin: 0;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .28));
}
/* l'apparition du produit ne doit pas écraser le centrage */
html.js .heros--edito .heros__produit.apparition { transform: translate(-50%, 14px); }
html.js .heros--edito .heros__produit.apparition.est-visible { transform: translateX(-50%); }

/* Téléphone : anneau plus large que l'écran, douchette plus grande, entière, mention dessous */
@media (max-width: 767px) {
  .heros--edito .heros__scene { --produit-haut: 30px; --produit-l: 168px; height: calc(var(--produit-haut) + var(--produit-l) * 2.523 + 14px + 34px + 32px); margin-top: 4px; }
  .heros--edito .heros__halo, .heros--edito .heros__anneau { width: 150vw; top: -4vw; }
}

/* ===== Halo vivant de la section noire (campagne) : même mouvement que celui du héros ===== */
.campagne__halo {
  position: absolute; width: 720px; height: 720px; right: -260px; top: -180px;
  pointer-events: none; display: none;
}
html.halo-actif .campagne__halo { display: block; }
html.halo-actif .campagne__anneau { display: none; }
@media (min-width: 768px) { .campagne__halo { width: 960px; height: 960px; right: -300px; top: -240px; } }

/* ===== Fond bleu du héros : les nuées blanches dérivent très lentement (CSS seul, aucun script) =====
   Deux couches de la même image : la première glisse doucement, la seconde, en miroir et très
   transparente, glisse en sens inverse ; leur superposition fait « respirer » les nuées. */
.heros--edito { position: relative; background-image: none; background-color: var(--bleu); } /* position: relative — indispensable pour que les couches de nuées couvrent toute la section */
.heros__fond { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.heros__fond span {
  position: absolute; inset: -10%;
  background: url("assets/fond-degrade-bleu.webp") center / cover no-repeat;
  will-change: transform;
}
.heros__fond span:nth-child(1) { animation: nuees-1 30s ease-in-out infinite alternate; }
.heros__fond span:nth-child(2) { opacity: .5; transform: scaleX(-1); animation: nuees-2 41s ease-in-out infinite alternate; mix-blend-mode: screen; }
@keyframes nuees-1 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(4%, -2.6%, 0) scale(1.07); }
}
@keyframes nuees-2 {
  0%   { transform: scaleX(-1) translate3d(0, 0, 0) scale(1.02); }
  100% { transform: scaleX(-1) translate3d(3.8%, 3%, 0) scale(1.09); }
}
.heros--edito .heros__haut, .heros--edito .heros__scene { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .heros__fond span { animation: none; } }