/* Hero en grille de l'accueil (28/09/2026), issu de la maquette maquette-accueil-hero.html validée par Simon.
   Fond en pleine largeur : dégradé bleu pâle vers le papier et halos de couleur derrière les gobelets, sans carte ni
   cadre. Les rendus à fond blanc se fondent dans le fond (multiply) ; les deux gobelets détourés gardent leur ombre. */
.h2-fond{position:relative;isolation:isolate;overflow:clip;background:
  radial-gradient(38% 46% at 74% 34%,#304bd82e 0%,#304bd800 100%),
  radial-gradient(26% 32% at 92% 58%,#f08a3c29 0%,#f08a3c00 100%),
  radial-gradient(24% 30% at 58% 62%,#e8799f24 0%,#e8799f00 100%),
  linear-gradient(180deg,#e9eefc 0%,#f1f0fb 58%,var(--paper) 100%)}
.h2{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:22px 0 6px}
.h2-kicker{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;font-size:10px;font-weight:650;letter-spacing:1.4px;text-transform:uppercase;color:#43507a}
.h2-kicker:before{content:"";width:18px;height:2px;border-radius:2px;background:var(--action)}
.h2 h1{font-size:clamp(40px,11vw,54px);line-height:.96;letter-spacing:-2.2px;color:#172746}
.h2 h1 span{color:var(--action)}
.h2-desc{margin-top:12px;font-size:14px;line-height:1.55;color:#4f5b78;max-width:40ch}
.h2 .hero-depot{margin-top:18px}
.h2 .hero-depot-zone{background:#fff;border:1.5px dashed #9fb0ea;border-radius:16px;box-shadow:0 18px 40px #2a3f9a1f,0 2px 6px #2a3f9a14;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.h2 .hero-depot-zone:hover,.h2 .hero-depot-zone.est-survole{transform:translateY(-2px);border-color:var(--action);box-shadow:0 24px 50px #2a3f9a29,0 2px 6px #2a3f9a14}
.h2 .hero-depot-aide{font-size:11px;color:var(--muted)}
.h2-sans{margin-top:12px}
.h2-sans a{font-size:14px;font-weight:650;color:#172746}
.h2-sans a:hover{color:var(--action)}
.h2-garanties{display:flex;flex-wrap:wrap;gap:4px 16px;margin:14px 0 0;padding:0;list-style:none;font-size:11px;color:#4f5b78}
.h2-garanties li{display:flex;align-items:center;gap:6px}
.h2-garanties li:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--action)}
.h2-visuel{position:relative;margin:0;height:250px}
.h2-anneau{position:absolute;left:50%;top:48%;width:230px;height:230px;border:1px solid #304bd833;border-radius:50%;transform:translate(-50%,-50%)}
.h2-anneau:after{content:"";position:absolute;inset:22px;border:1px dashed #304bd822;border-radius:50%}
.h2-g{position:absolute;display:block;height:auto}
.h2-g img{display:block;width:100%;height:auto}
/* Gobelets latéraux : deux entrées techniques, légende sous le gobelet, lecture au survol et au clavier. */
a.h2-g{color:#172746;text-align:center}
a.h2-g span{display:block;margin-top:4px;font-size:11px;font-weight:650;line-height:1.2}
a.h2-g small{display:block;font-size:9px;font-weight:500;color:#6b7591}
a.h2-g img{transition:transform .25s ease}
.h2-g-gauche:hover img,.h2-g-gauche:focus-visible img{transform:rotate(-8deg) translateY(-6px)}
.h2-g-droite:hover img,.h2-g-droite:focus-visible img{transform:rotate(7deg) translateY(-6px)}
a.h2-g:hover span{color:var(--action)}
a.h2-g:focus-visible{outline:3px solid var(--focus);outline-offset:6px;border-radius:12px}
.h2-g-centre{left:50%;top:50%;width:250px;transform:translate(-50%,-52%);mix-blend-mode:multiply}
.h2-g-gauche{left:6%;bottom:8px;width:96px;filter:drop-shadow(0 14px 18px #1e2d6a26)}
.h2-g-gauche img{transform:rotate(-8deg)}
.h2-g-droite{right:6%;bottom:12px;width:88px;filter:drop-shadow(0 14px 18px #1e2d6a26)}
.h2-g-droite img{transform:rotate(7deg)}
.h2-prix{position:absolute;right:0;top:4px;display:grid;justify-items:end;margin:0;text-align:right;color:#172746}
.h2-prix em{margin-top:6px;font-style:normal;font-size:10px;font-weight:650;color:var(--action);opacity:.85;transition:opacity .15s ease}
.h2-prix:hover em{opacity:1;text-decoration:underline;text-underline-offset:3px}
.h2-prix:focus-visible{outline:3px solid var(--focus);outline-offset:6px;border-radius:6px}
.h2-prix span{font-size:10px;color:#4f5b78}
.h2-prix strong{font-size:20px;letter-spacing:-.6px;color:#172746}
.h2-visuel figcaption{position:absolute;left:0;right:0;bottom:0;text-align:center;font-size:9px;color:#6b7591}
.h2-bas{display:grid;gap:18px;padding:10px 0 26px}
.h2-titre{margin:0 0 8px;font-size:10px;font-weight:650;letter-spacing:1.4px;text-transform:uppercase;color:#43507a}
.h2-etagere{display:grid;grid-auto-flow:column;grid-auto-columns:96px;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px 4px}
.h2-etagere::-webkit-scrollbar{display:none}
.h2-occ{display:flex;flex-direction:column;align-items:center;text-align:center;color:#172746}
.h2-occ img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:contain;mix-blend-mode:multiply;transition:transform .25s ease}
.h2-occ:hover img{transform:translateY(-5px)}
.h2-occ strong{margin-top:-4px;font-size:12px;line-height:1.25}
.h2-occ small{font-size:10px;color:#6b7591}
.h2-occ:hover strong{color:var(--action)}
.h2-cote{display:grid;gap:16px}
.h2-pros{position:relative;display:grid;gap:2px;padding:14px 44px 14px 0;border-top:1px solid #172746;border-bottom:1px solid #17274633;color:#172746}
.h2-pros small{font-size:10px;font-weight:650;letter-spacing:1.4px;text-transform:uppercase;color:#43507a}
.h2-pros strong{font-size:16px;letter-spacing:-.3px}
.h2-pros span{font-size:12px;color:#4f5b78}
.h2-pros em{position:absolute;right:2px;top:50%;transform:translateY(-50%);font-style:normal;font-size:22px;transition:transform .2s ease}
.h2-pros:hover em{transform:translate(4px,-50%);color:var(--action)}
.h2-formats-liste{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px}
.h2-formats-liste a{min-width:38px;padding:6px 8px;border-radius:999px;border:1px solid #17274626;text-align:center;font-size:12px;font-weight:650;color:#172746;transition:background .15s ease,color .15s ease,border-color .15s ease}
.h2-formats-liste a:hover{background:#172746;border-color:#172746;color:#fff}
.h2-formats-liste span{margin-left:2px;font-size:11px;color:#6b7591}
@media(min-width:700px){
 .h2-visuel{height:360px}
 .h2-g-centre{width:340px}
 .h2-anneau{width:320px;height:320px}
 .h2-g-gauche{width:128px}.h2-g-droite{width:118px}
 .h2-etagere{grid-auto-columns:110px;margin:0;padding:0}
}
@media(min-width:1000px){
 .h2{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:24px;padding:34px 0 0}
 .h2 h1{font-size:clamp(56px,5.4vw,78px);letter-spacing:-3px}
 .h2-desc{font-size:15px}
 .h2 .hero-depot{max-width:460px}
 .h2-visuel{height:440px}
 .h2-g-centre{width:420px}
 .h2-anneau{width:390px;height:390px}
 .h2-g-gauche{left:2%;width:150px;bottom:28px}
 .h2-g-droite{right:2%;width:138px;bottom:36px}
 .h2-prix{top:22px;right:4%}
 .h2-prix strong{font-size:24px}
 .h2-bas{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);align-items:end;gap:40px;padding:26px 0 30px}
 .h2-etagere{grid-auto-flow:initial;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;overflow:visible}
}
@media(max-width:699px){
 .h2-visuel{height:222px;margin:6px 0 16px}
 .h2-visuel figcaption{bottom:-16px}
 .h2-g-centre{width:215px}
 .h2-anneau{width:196px;height:196px}
 .h2-g-gauche{left:0;width:80px;bottom:6px}.h2-g-droite{right:0;width:74px;bottom:8px}
 a.h2-g span{font-size:10px}
 .h2-prix{left:0;right:auto;top:0;justify-items:start;text-align:left}
 .h2-prix strong{font-size:18px}
}
/* Balancement léger des gobelets latéraux ; aucun mouvement si l'utilisateur a demandé moins d'animations. */
@media(prefers-reduced-motion:no-preference){
 .h2-g-gauche img{animation:h2-flotte 6s ease-in-out infinite}
 .h2-g-droite img{animation:h2-flotte 7s ease-in-out -2.5s infinite}
 .h2-g-gauche:hover img,.h2-g-gauche:focus-visible img,.h2-g-droite:hover img,.h2-g-droite:focus-visible img{animation:none}
}
@keyframes h2-flotte{0%,100%{translate:0 0}50%{translate:0 -5px}}
/* Écrans peu hauts (portables 1366 × 768) : le hero entier, étagère comprise, doit tenir dans le premier écran. */
@media(min-width:1000px) and (max-height:820px){
 .h2{padding-top:18px;gap:16px}
 .h2 h1{font-size:clamp(48px,4.6vw,62px)}
 .h2-desc{margin-top:8px}
 .h2 .hero-depot{margin-top:12px}
 .h2-visuel{height:340px}
 .h2-g-centre{width:330px}
 .h2-anneau{width:300px;height:300px}
 .h2-g-gauche{width:118px;bottom:20px}.h2-g-droite{width:108px;bottom:26px}
 .h2-bas{padding:10px 0 18px}
 .h2-occ img{aspect-ratio:1}
}