/* Vidéo du hero (hero-vague.js). Règles de fonctionnement, reprises de styles.css : la mise en page, le
   masque et la fusion (multiply) sont plus bas. La vidéo reste toujours visible pendant le défilement, car
   Chrome met en pause une vidéo muette lue automatiquement tant qu'elle est invisible ; c'est l'image finale,
   posée au-dessus, qui s'efface quand le script est actif. Sur ordinateur, le script pose la hauteur de la
   piste et la position collante du hero. */
.hero-visual.hero-vague{background:none;border-radius:0;overflow:visible}
.vague-scene>img,.vague-scene>video{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}
.vague-scene>img{z-index:1;transition:opacity .15s}
.hero-vague.vague-active .vague-scene>img{opacity:0}
.hero-piste{position:relative}
.hero-piste.est-collant>.hero{position:sticky;top:var(--hero-collant,77px)}

/* Hero immersif. Le groupe vidéo entier se fond dans le décor : multiply sur
   la figure, et non uniquement sur ses enfants isolés par le masque vidéo. */
.hero-piste{background:#f1f4fb}
.hero{width:100%;max-width:none;position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"heading" "visual" "conversion";gap:0;padding:28px 20px 26px;background:radial-gradient(ellipse at 50% 40%,#fff 0%,#edf2fc 54%,#f7f8fb 100%);overflow:clip}
.hero-copy{display:contents}
.hero-heading{grid-area:heading;text-align:center;position:relative;z-index:3;pointer-events:none}
.hero-kicker{margin:0 0 15px;font-size:9px;line-height:1.5;font-weight:650;letter-spacing:1.1px;text-transform:uppercase;color:#52617f}
.hero h1{font-size:clamp(37px,10.9vw,62px);line-height:1.01;font-weight:750;letter-spacing:-1.9px;color:#172746;text-wrap:balance}
.hero h1>span{font:inherit;color:#304bd8;letter-spacing:inherit}
.hero h1>span:after{content:none}
.hero .hero-description{max-width:410px;font-size:13px;line-height:1.6;color:#4c5d7a;margin:14px auto 0;letter-spacing:0}
.hero-conversion{grid-area:conversion;z-index:4;position:relative;width:100%;max-width:430px;justify-self:center;text-align:center;margin-top:-14px}
.hero-benefits{list-style:none;display:flex;justify-content:center;gap:18px;padding:0;margin:0 0 13px;color:#263c65;font-size:11px;font-weight:600}
.hero-benefits li:before{content:"✓";color:#304bd8;margin-right:6px}
.hero .hero-depot{max-width:none;padding:7px 7px 9px;border:1px solid #fff;border-radius:18px;background:#ffffffde;box-shadow:0 14px 36px -16px #1c3b7850,0 2px 4px #263e7310}
.hero .hero-depot-zone{border:1px dashed #869be0;border-radius:12px;min-height:79px;padding:14px 12px;gap:12px;background:#f6f8ff;box-shadow:none;text-align:left}
.hero .hero-depot-zone:hover,.hero .hero-depot-zone.est-survole{background:#e8eeff;border-color:#304bd8}
.hero .hero-depot-symbole{width:40px;height:40px;flex-shrink:0;border-radius:10px;background:#304bd8;color:white;box-shadow:0 4px 9px #304bd82b}
.hero .hero-depot-texte b{font-size:16px;font-weight:700;letter-spacing:-.3px;color:#172746}
.hero .hero-depot-aide{font-size:10px;line-height:1.4;margin-top:5px;color:#536383}
.hero-depot-arrow{font-size:23px;color:#304bd8;margin-left:auto}
.hero-depot-formats{font-size:9px;color:#62708c;margin-top:8px;line-height:1.5}
.hero .hero-depot-etat{text-align:left;padding-inline:7px}
.hero-without{margin:3px 0 0;font-size:11px;color:#425677}
.hero-without a{display:inline-flex;align-items:center;gap:9px;min-height:44px;text-decoration:underline;text-underline-offset:4px}
.hero-without a:hover{color:#304bd8}
.hero .hero-footnote{margin:0;font-size:9px;color:#62708c}
.hero .hero-visual.hero-vague{grid-area:visual;position:relative;z-index:1;width:100%;height:270px;min-height:0;align-self:center;justify-self:center;margin:-8px 0 0;display:block;mix-blend-mode:multiply;pointer-events:none}
.hero .vague-scene{position:absolute;left:50%;top:50%;width:340px;max-width:none;height:340px;aspect-ratio:1;transform:translate(-50%,-50%);margin:0}
.hero .vague-scene:before{content:"";position:absolute;left:27%;right:27%;bottom:13%;height:8%;border-radius:50%;background:#5676aa;filter:blur(16px);opacity:.19}
.hero .vague-scene>img,.hero .vague-scene>video{mix-blend-mode:normal;-webkit-mask-image:radial-gradient(ellipse closest-side,#000 69%,transparent 100%);mask-image:radial-gradient(ellipse closest-side,#000 69%,transparent 100%);-webkit-mask-composite:source-over;mask-composite:add}
.hero .hero-vague figcaption{position:absolute;inset:auto 0 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;border:0;padding:0;margin:0;color:#526687;font-size:9px;text-align:left}
.hero .hero-vague figcaption>span{max-width:70px;line-height:1.6;border-left:1px solid #a9b8d5;padding-left:8px}
.hero .hero-vague figcaption small{font-size:8px;max-width:92px;text-align:right;line-height:1.5;margin:0;color:#6d7c96}
@media(min-width:700px){
 .hero{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);grid-template-areas:"heading visual" "conversion visual";column-gap:25px;align-content:center;padding:60px max(36px,calc((100% - 1240px)/2));min-height:690px;background:radial-gradient(ellipse at 70% 48%,#fff,#edf2fc 48%,#f7f8fb 100%)}
 .hero-heading{text-align:left;align-self:end}
 .hero-kicker{font-size:10px;letter-spacing:1.2px;margin-bottom:23px}
 .hero h1{font-size:clamp(44px,5.4vw,78px);letter-spacing:-2.8px}
 .hero .hero-description{margin:22px 0 0;font-size:16px}
 .hero-conversion{text-align:left;justify-self:start;margin:30px 0 0;align-self:start;max-width:440px}
 .hero-benefits{justify-content:flex-start;font-size:12px;gap:25px}
 .hero .hero-depot-zone{min-height:87px;padding:16px}
 .hero .hero-depot-texte b{font-size:18px}
 .hero .hero-depot-aide{font-size:11px}
 .hero-depot-formats{text-align:center;font-size:10px}
 .hero-without{margin-top:6px}
 .hero .hero-footnote{font-size:10px}
 .hero .hero-visual.hero-vague{height:540px;margin:0}
 .hero .vague-scene{width: min(52vw,720px);height:auto;aspect-ratio:1}
 .hero .hero-vague figcaption{inset:auto 20px 0;font-size:11px}
 .hero .hero-vague figcaption>span{max-width:none}
 .hero .hero-vague figcaption small{max-width:none;font-size:9px}
}
@media(max-width:370px){.hero{padding-inline:16px}.hero-kicker{font-size:8px;letter-spacing:.8px}.hero .hero-description{font-size:12px}.hero .hero-visual.hero-vague{height:235px}.hero .vague-scene{width:305px;height:305px}.hero .hero-depot-texte b{font-size:15px}.hero-depot-arrow{display:none}}
@media(prefers-reduced-motion:reduce){.hero .vague-scene>img{transition:none}}
@media print{.hero{background:white}.hero-without{display:none}}
/* Mention « photo non contractuelle » : sous la vidéo sur ordinateur ; sur mobile, la légende du visuel
   empiéterait sur le ruban et sur la ligne des avantages, la mention passe donc dans la note sous le dépôt. */
.hero-mention-mobile{display:none}
@media(max-width:699px){.hero .hero-vague figcaption{display:none}.hero-mention-mobile{display:inline}}