/* ===== Hero d'accueil « couverture de magazine » =====
   Une typographie immense sur toute la largeur, un grand visuel posé en travers, des filets
   fins et de petites légendes. Un léger parallaxe à la souris ; une seule entrée en cascade. */

.ed { position: relative; height: 100vh; min-height: 640px; width: 100%; box-sizing: border-box; overflow: hidden; display: grid;
    grid-template-rows: auto 1fr auto auto; padding: clamp(4.4rem, 8vh, 5.2rem) clamp(1rem, 2.4vw, 2.2rem) 0; background: var(--background-primary); color: var(--text-primary); }
.ed > * { min-width: 0; }
.ed > * { min-width: 0; }
.ed-regles { position: absolute; inset: 0; pointer-events: none; }
.ed-regles i { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, .06); }
.ed-regles i:nth-child(1) { left: 25%; } .ed-regles i:nth-child(2) { left: 50%; } .ed-regles i:nth-child(3) { left: 75%; }

.ed-bandeau { position: relative; z-index: 3; display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .7rem; border-bottom: 1px solid rgba(255, 255, 255, .22);
    font-size: clamp(.62rem, .9vw, .82rem); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-secondary); }

/* Le titre : deux lignes immenses, chacune dans une fenêtre qui la révèle en la faisant monter */
.ed-titre { position: relative; z-index: 1; margin: 0; align-self: center; display: flex; flex-direction: column; font-weight: 900; text-transform: uppercase; letter-spacing: -.06em; line-height: .8; }
.ed-ligne { display: block; overflow: hidden; padding: .04em 0; }
.ed-ligne b { display: block; font-weight: inherit; will-change: transform; animation: edMonte 1.2s cubic-bezier(.16, 1, .3, 1) backwards;
    transform: translate(var(--tx, 0px), 0); }
.ed-l1 { font-size: min(19vw, 38vh); }
.ed-l1 b { animation-delay: .1s; }
.ed-l2 { font-size: min(19vw, 38vh); text-align: right; }
.ed-l2 b { animation-delay: .25s; color: transparent; -webkit-text-stroke: clamp(1.5px, .25vw, 3px) rgba(255, 255, 255, .85); }
@keyframes edMonte { from { transform: translateY(105%); } }

/* Le visuel : posé en travers des deux lignes, il passe devant les lettres */
.ed-visuel { position: absolute; z-index: 2; left: 33%; top: 66%; height: min(40vh, 30vw); width: auto; max-width: 44vw; object-fit: contain; pointer-events: none;
    transform: translate(calc(-50% + var(--ix, 0px)), calc(-50% + var(--iy, 0px))) rotate(calc(-7deg + var(--ir, 0deg)));
    filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .6)); animation: edVisuel 1.4s cubic-bezier(.16, 1, .3, 1) .45s backwards; will-change: transform; }
@keyframes edVisuel { from { opacity: 0; scale: .78; translate: 0 6vh; } }

.ed-legende { position: absolute; z-index: 3; right: clamp(1rem, 2.4vw, 2.2rem); bottom: clamp(5.6rem, 16vh, 8rem); margin: 0; max-width: 17em; font-size: clamp(.8rem, 1.05vw, 1rem); line-height: 1.5; color: var(--text-secondary);
    padding-top: .8rem; border-top: 1px solid rgba(255, 255, 255, .22); animation: edFondu 1s ease .8s backwards; }
.ed-legende a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .35); }

.ed-pied { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255, 255, 255, .22); }
.ed-pied a { position: relative; display: grid; grid-template-columns: auto 1fr auto; column-gap: .8rem; align-items: baseline; padding: clamp(.7rem, 1.8vh, 1.1rem) 1rem clamp(.9rem, 2vh, 1.4rem) 0; color: var(--text-primary); text-decoration: none; animation: edFondu 1s ease backwards; }
.ed-pied a:nth-child(1) { animation-delay: .9s; } .ed-pied a:nth-child(2) { animation-delay: 1s; } .ed-pied a:nth-child(3) { animation-delay: 1.1s; } .ed-pied a:nth-child(4) { animation-delay: 1.2s; }
.ed-pied a + a { padding-left: 1rem; border-left: 1px solid rgba(255, 255, 255, .12); }
.ed-pied small { font-size: .72rem; font-weight: 700; letter-spacing: .1em; color: #6aa5ff; }
.ed-pied b { font-size: clamp(1rem, 1.5vw, 1.4rem); font-weight: 700; letter-spacing: -.02em; }
.ed-pied span { grid-column: 2; font-size: clamp(.74rem, .95vw, .9rem); line-height: 1.4; color: var(--text-secondary); }
.ed-pied i { grid-column: 3; grid-row: 1; align-self: center; font-size: 1.3rem; color: var(--text-secondary); transition: transform .5s cubic-bezier(.16, 1, .3, 1), color .3s; }
.ed-pied a::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: #6aa5ff; transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.ed-pied a + a::before { left: 0; }
.ed-pied a:hover::before { transform: scaleX(1); }
.ed-pied a:hover i { transform: translate(4px, -4px); color: #fff; }
@keyframes edFondu { from { opacity: 0; transform: translateY(14px); } }

@media (max-width: 900px) {
    .ed { height: auto; min-height: 100vh; grid-template-rows: auto auto auto auto auto; }
    .ed-bandeau span:nth-child(2) { display: none; }
    .ed-titre { margin: 1.5rem 0; }
    .ed-l1, .ed-l2 { font-size: 24vw; }
    .ed-visuel { position: relative; left: auto; top: auto; margin: 0 auto; transform: rotate(-6deg); height: 34vh; max-width: 80vw; }
    .ed-legende { position: static; max-width: none; margin: 1.2rem 0; }
    .ed-pied { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { .ed-ligne b, .ed-visuel, .ed-legende, .ed-pied a { animation: none; } }

/* ===== Onglets du bas : ils changent le centre (visuel + texte), jamais le nom ===== */
.ed-pied button { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: .8rem; align-items: baseline; text-align: left; padding: clamp(.7rem, 1.8vh, 1.1rem) 1rem clamp(.9rem, 2vh, 1.4rem) 0; border: 0; background: none; color: var(--text-secondary); cursor: pointer; font: inherit;
    animation: edFondu 1s ease backwards; transition: color .3s; }
.ed-pied button:nth-child(1) { animation-delay: .9s; } .ed-pied button:nth-child(2) { animation-delay: 1s; } .ed-pied button:nth-child(3) { animation-delay: 1.1s; } .ed-pied button:nth-child(4) { animation-delay: 1.2s; }
.ed-pied button + button { padding-left: 1rem; border-left: 1px solid rgba(255, 255, 255, .12); }
.ed-pied button small { font-size: .72rem; font-weight: 700; letter-spacing: .1em; color: #6aa5ff; }
.ed-pied button b { font-size: clamp(1rem, 1.5vw, 1.4rem); font-weight: 700; letter-spacing: -.02em; color: var(--text-primary); }
.ed-pied button span { grid-column: 2; font-size: clamp(.74rem, .95vw, .9rem); line-height: 1.4; }
.ed-pied button::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: #6aa5ff; transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.ed-pied button:hover::before { transform: scaleX(.35); }
.ed-pied button[aria-selected="true"]::before { transform: scaleX(1); }
.ed-pied button[aria-selected="true"] { color: var(--text-secondary); }
.ed-pied button:active b { transform: scale(.97); }
.ed-pied button b { transition: transform .15s; transform-origin: left; display: inline-block; }

/* Visuels : empilés au même endroit ; chacun se place selon son écart (--d) avec l'onglet actif */
.ed-visuels { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.ed-visuels .ed-visuel { margin: 0; left: 50%; top: 56%; height: min(46vh, 34vw); max-width: 48vw;
    opacity: calc(1 - min(1, abs(var(--d, 0))) * 1); visibility: visible;
    transform: translate(calc(-50% + var(--ix, 0px) + var(--d, 0) * 16vw), calc(-50% + var(--iy, 0px))) rotate(calc(-7deg + var(--ir, 0deg) + var(--d, 0) * 9deg)) scale(calc(1 - min(1, abs(var(--d, 0))) * .22));
    transition: transform .9s cubic-bezier(.16, 1, .3, 1), opacity .5s ease; animation: edVisuel 1.4s cubic-bezier(.16, 1, .3, 1) .45s backwards; }

/* Panneau de texte : à gauche, sous le « VO » du titre ; le contenu actif monte, l'ancien descend */
.ed-panneaux { position: absolute; z-index: 3; left: clamp(1rem, 2.4vw, 2.2rem); top: 58%; width: min(22vw, 360px); min-height: 14rem; }
.ed-p { position: absolute; left: 0; top: 0; right: 0; padding-top: .9rem; border-top: 1px solid rgba(255, 255, 255, .22); opacity: 0; transform: translateY(24px); pointer-events: none;
    transition: opacity .4s ease, transform .8s cubic-bezier(.16, 1, .3, 1); }
.ed-p.on { opacity: 1; transform: none; pointer-events: auto; transition-delay: .15s; }
.ed-p.avant { transform: translateY(-24px); }
.ed-k { display: block; margin-bottom: .6rem; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #6aa5ff; }
.ed-p h2 { margin: 0 0 .6rem; font-size: clamp(1.3rem, 2.1vw, 2.1rem); font-weight: 700; line-height: 1.06; letter-spacing: -.04em; }
.ed-p p { margin: 0 0 .9rem; font-size: clamp(.8rem, 1vw, .95rem); line-height: 1.5; color: var(--text-secondary); }
.ed-p a { display: inline-flex; align-items: center; gap: .3rem; font-size: .88rem; font-weight: 600; color: var(--text-primary); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .35); padding-bottom: 2px; }
.ed-p a i { font-size: 1rem; transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.ed-p a:hover i { transform: translate(3px, -3px); }

@media (max-width: 900px) {
    .ed-visuels { position: relative; height: 38vh; }
    .ed-visuels .ed-visuel { top: 50%; height: 34vh; max-width: 80vw; }
    .ed-panneaux { position: relative; left: auto; top: auto; width: auto; margin: .6rem 0 1rem; min-height: 12rem; }
    .ed-pied { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { .ed-visuels .ed-visuel, .ed-p { transition: none; animation: none; } }

.ed-bandeau a { color: inherit; text-decoration: none; }
.ed-bandeau a:hover { color: #fff; }

/* « Découvrez » posé au-dessus du nom, qui reste le seul élément du haut */
.ed { grid-template-rows: 1fr auto; }
.ed-pre { display: block; margin-bottom: clamp(.2rem, 1vh, .7rem); padding-left: .05em; font-size: clamp(1.2rem, 2.6vw, 2.4rem); font-weight: 500; letter-spacing: -.02em; text-transform: none; line-height: 1; color: rgba(255, 255, 255, .72);
    animation: edFondu 1s ease .1s backwards; }

/* Les visuels sont pilotés uniquement par --d / --a (posés dans le HTML puis par le JS) : rien n'apparaît avant l'heure */
.ed-visuels .ed-visuel { opacity: calc(1 - var(--a, 1)); animation: none;
    transform: translate(calc(-50% + var(--ix, 0px) + var(--d, 1) * 16vw), calc(-50% + var(--iy, 0px))) rotate(calc(-7deg + var(--ir, 0deg) + var(--d, 1) * 9deg)) scale(calc(1 - var(--a, 1) * .22)); }

/* Barre de progression de l'onglet actif : elle se remplit pendant le défilement automatique */
.ed-pied.auto button[aria-selected="true"]::before { transform: scaleX(0); transition: none; animation: edBarre var(--duree, 7s) linear forwards; }
@keyframes edBarre { to { transform: scaleX(1); } }
.ed-pied.auto button[aria-selected="true"] b { color: #fff; }
@media (prefers-reduced-motion: reduce) { .ed-pied.auto button::before { animation: none; } }

/* ===== Hero magazine : version téléphone ===== */
@media (max-width: 900px) {
    .ed { height: auto; min-height: 100svh; display: flex; flex-direction: column; padding: 5.2rem 1rem 0; }
    .ed-titre { position: relative; margin: 0; align-self: stretch; }
    .ed { container-type: inline-size; }
    .ed-l1, .ed-l2 { font-size: calc(100cqw / 4.8); }        /* VOGARIA occupe exactement la largeur utile, sans dépasser */
    .ed-pre { font-size: 1.1rem; }
    .ed-visuels { position: relative; inset: auto; flex: none; height: 30vh; margin-top: .4rem; }
    .ed-visuels .ed-visuel { position: absolute; left: 50%; top: 50%; margin: 0; height: 100%; width: auto; max-width: 78vw; }
    .ed-panneaux { position: relative; left: auto; top: auto; flex: none; width: auto; min-height: 11.5rem; margin: .5rem 0 1rem; }
    .ed-p h2 { font-size: 1.5rem; }
    .ed-p p { font-size: .9rem; }
    .ed-pied { grid-template-columns: 1fr 1fr; margin-top: auto; }
    .ed-pied button { padding: .8rem .6rem .9rem 0; }
    .ed-pied button:nth-child(2n) { padding-left: .9rem; border-left: 1px solid rgba(255, 255, 255, .12); }
    .ed-pied button:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .12); }
    .ed-pied button b { font-size: 1.05rem; }
    .ed-pied button span { font-size: .78rem; }
    .ed-pied button::before { display: none; }
    .ed-pied button[aria-selected="true"] { background: rgba(76, 141, 255, .1); }
}

@media (max-width: 900px) {
    .ed-visuels { transition: height .7s cubic-bezier(.16, 1, .3, 1); }
    .ed.bienvenue .ed-visuels { height: 4vh; }          /* pas de grand trou pendant l'écran de bienvenue */
}