/* =====================================================
   FICHE-PAIE.FR — Module animé « Ergonomie + Multi-mois »
   Section pleine largeur de l'accueil (créneau « pâle » du
   damier) : fond #fafcfe décoré (halos animés + vague SVG),
   titre de section + rotateur de marques One/IK/Lab/Check,
   fenêtre d'application signée contenant le carrousel.

   100 % CSS : zéro JavaScript, zéro image externe (SVG inline).
   Deux slides alternées de 12 s (cycle 24 s) avec faux curseur.
   Animations limitées à transform / opacity / max-height /
   background-color (pas de filter : halos en radial-gradient
   pré-adoucis) — hauteur réservée via min-height pour éviter
   tout CLS.

   Préfixe de composant : ha- (racine .hero-anime).
   Chargé par templates/layouts/main.php (bloc home, asset_version).
   ===================================================== */

/* ===== Section pleine largeur ===== */
.hero-anime{position:relative;background:var(--gp-fond-pale);padding:64px 16px 56px;overflow:hidden;font-family:"Inter",sans-serif;}
.ha-marine{color:var(--gp-bleu-marine);} .ha-turq{color:var(--gp-turquoise);}

/* ===== Fond décoré : halos qui respirent + vague en filigrane ===== */
.ha-blob{position:absolute;border-radius:50%;pointer-events:none;}
.ha-blob1{width:420px;height:420px;top:-140px;left:-120px;background:radial-gradient(circle at 40% 40%, rgba(94,197,200,.22), rgba(94,197,200,0) 65%);animation:ha-bl1 26s ease-in-out infinite;}
.ha-blob2{width:480px;height:480px;bottom:-180px;right:-140px;background:radial-gradient(circle at 60% 60%, rgba(29,69,140,.14), rgba(29,69,140,0) 65%);animation:ha-bl2 32s ease-in-out infinite;}
@keyframes ha-bl1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(34px,22px) scale(1.08)}}
@keyframes ha-bl2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-30px,-26px) scale(1.06)}}
/* Vague : le motif du viewBox (2 ondulations de 600 unités) est répété
   2 fois dans le path ; translateX(-50%) = exactement une période
   (600 unités), la boucle de 40 s se referme donc sans à-coup. */
.ha-vague{position:absolute;bottom:28px;left:0;width:200%;height:120px;opacity:.12;animation:ha-vg 40s linear infinite;pointer-events:none;}
@keyframes ha-vg{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ===== Titre de section + rotateur de marques ===== */
.ha-sect-head{position:relative;text-align:center;margin-bottom:28px;}
.ha-sect-titre{font-size:32px;font-weight:800;color:var(--gp-bleu-marine);margin:0 0 10px;letter-spacing:-.01em;font-family:"Plus Jakarta Sans",sans-serif;}
.ha-sect-titre .ha-fr{color:#9ca3af;font-size:.8em;}
.ha-tm{font-size:12px;color:#9ca3af;font-weight:600;}
.ha-rotor-ligne{font-size:30px;font-weight:800;letter-spacing:-.01em;display:flex;align-items:baseline;justify-content:center;font-family:"Plus Jakarta Sans",sans-serif;}
.ha-rotor{display:inline-block;height:40px;overflow:hidden;vertical-align:bottom;}
.ha-rot-col{display:flex;flex-direction:column;animation:ha-rotv 12s ease-in-out infinite;}
.ha-rot-item{height:40px;line-height:40px;text-align:left;white-space:nowrap;}
.ha-r{font-size:14px;color:#9ca3af;font-weight:600;}
@keyframes ha-rotv{
0%,20%{transform:translateY(0)}
25%,45%{transform:translateY(-40px)}
50%,70%{transform:translateY(-80px)}
75%,95%{transform:translateY(-120px)}
100%{transform:translateY(-160px)}
}

/* ===== Fenêtre d'application (barre signée + pilule d'adresse) ===== */
.ha-fenetre{position:relative;background:var(--gp-blanc);border:1px solid var(--gp-bordure);border-radius:14px;max-width:1020px;margin:0 auto;box-shadow:0 18px 44px rgba(30,55,96,.10);overflow:hidden;}
.ha-winbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 16px;background:var(--gp-fond-pale);border-bottom:1px solid var(--gp-bordure);}
.ha-wbars{display:flex;gap:3px;}
.ha-wbars span{width:5px;height:16px;border-radius:1.5px;display:inline-block;}
.ha-wbars span:nth-child(1){background:var(--gp-bleu-marine);}
.ha-wbars span:nth-child(2){background:var(--gp-turquoise);}
.ha-wpill{display:inline-flex;align-items:center;gap:6px;background:var(--gp-blanc);border:1px solid var(--gp-bordure);border-radius:20px;padding:4px 14px;font-size:11.5px;color:var(--gp-gris);letter-spacing:.02em;}
/* La marque est groupée dans un seul item flex : sans ce groupe, le gap
   de la pilule s'intercalerait entre « Paie », « One » et le « ® ». */
.ha-wmarque{white-space:nowrap;}
.ha-wpill .ha-marine,.ha-wpill .ha-turq{font-weight:700;}
.ha-wpill sup{font-size:8px;color:#9ca3af;}
.ha-wlock{flex-shrink:0;}
.ha-wspacer{width:13px;}

/* Retrait latéral du carrousel dans la fenêtre — en margin et non en
   padding : les slides sont absolues (inset:0) et un padding du bloc
   conteneur ne les décalerait pas. Le calage du curseur est relatif au
   panneau de 370 px : il est insensible à ce retrait. */
.ha-stage{position:relative;min-height:412px;margin:0 24px;}
.ha-sl{position:absolute;inset:0;display:flex;gap:28px;align-items:center;align-content:center;flex-wrap:wrap;}
#ha-sl1{animation:ha-ks1 24s ease-in-out infinite;}
#ha-sl2{animation:ha-ks2 24s ease-in-out infinite;opacity:0;}
@keyframes ha-ks1{0%,44%{opacity:1}47%,96%{opacity:0}99%,100%{opacity:1}}
@keyframes ha-ks2{0%,46%{opacity:0}49%,94%{opacity:1}97%,100%{opacity:0}}
.ha-col-txt{flex:1;min-width:220px;}
.ha-title{font-size:26px;line-height:1.25;font-weight:700;color:var(--gp-bleu-marine);margin:0 0 14px;font-family:"Plus Jakarta Sans",sans-serif;}
.ha-hl{position:relative;padding:0 3px;color:var(--gp-bleu-marine);white-space:nowrap;}
.ha-hl::before{content:"";position:absolute;inset:2px -2px;background:rgba(94,197,200,.45);z-index:-1;border-radius:4px;transform-origin:left;animation:ha-surl 12s ease-in-out infinite;}
@keyframes ha-surl{0%,4%{transform:scaleX(0)}11%,92%{transform:scaleX(1)}98%,100%{transform:scaleX(0)}}
.ha-sub{font-size:14px;color:#4b5563;line-height:1.6;margin:0 0 18px;}
.ha-cta{display:inline-flex;align-items:center;gap:8px;background:var(--gp-bleu-primaire);color:var(--gp-blanc);font-size:14px;font-weight:600;padding:11px 20px;border-radius:8px;border-bottom:3px solid var(--gp-turquoise);text-decoration:none;transition:background-color .2s ease;}
.ha-cta:hover{background:#2a5bb8;}
.ha-panel{width:370px;max-width:100%;position:relative;min-height:360px;}
.ha-panel-t{font-size:12px;font-weight:600;margin:0 0 2px;color:#111827;}
.ha-panel-s{font-size:10.5px;color:var(--gp-gris);margin:0 0 10px;}

/* ===== Accordéons (fidèles au wizard) ===== */
.ha-acc{border:1px solid var(--gp-bordure);border-radius:12px;background:var(--gp-blanc);overflow:hidden;}
.ha-item{border-bottom:1px solid var(--gp-bordure);} .ha-item.ha-last{border-bottom:none;}
.ha-hd{display:flex;align-items:center;gap:8px;padding:12px 14px;font-size:12px;font-weight:600;color:#111827;background:var(--gp-blanc);transition:background .2s;}
.ha-hd .ha-ico{color:var(--gp-bleu-primaire);flex-shrink:0;}
.ha-ttl{flex:1;}
.ha-hd svg.ha-arr{transition:transform .2s;flex-shrink:0;}
.ha-bdg{font-size:10.5px;font-weight:500;padding:3px 8px;border-radius:12px;background:var(--gp-pastille);color:var(--gp-bleu-primaire);min-width:58px;text-align:center;}
.ha-bdgrel{position:relative;}
#ha-b0{transition:opacity .3s;}
#ha-b1{position:absolute;inset:3px 8px;opacity:0;transition:opacity .3s;}
.ha-ct{max-height:0;overflow:hidden;background:var(--gp-blanc);}
.ha-pad{padding:14px;}
.ha-lb{font-size:11px;color:#374151;margin:0 0 5px;font-weight:500;}
.ha-spin{display:inline-flex;align-items:center;background:var(--gp-blanc);border-radius:6px;}
.ha-spin.ha-yellow{border:1px solid var(--gp-jaune-vif);}
.ha-spin.ha-blue{border:1px solid #93c5fd;}
.ha-sbtn{display:flex;align-items:center;justify-content:center;width:26px;height:26px;transition:all .15s ease;border-radius:5px;}
.ha-sbtn.ha-y{color:var(--gp-jaune-texte);} .ha-sbtn.ha-b{color:#1d4ed8;}
.ha-sval{width:40px;text-align:center;font-size:13px;font-weight:500;color:#111827;border-left:1px solid rgba(0,0,0,.1);border-right:1px solid rgba(0,0,0,.1);height:26px;display:flex;align-items:center;justify-content:center;position:relative;}
.ha-v{position:absolute;opacity:0;}
.ha-champ{display:inline-flex;align-items:center;gap:4px;border:1px solid rgba(0,0,0,.15);border-radius:6px;height:30px;padding:0 10px;background:var(--gp-blanc);min-width:104px;}
.ha-saisie{font-size:13px;font-weight:500;color:#111827;overflow:hidden;white-space:nowrap;width:0;display:inline-block;}
.ha-eur{color:var(--gp-gris);font-size:12px;}

/* ===== Slide 2 : grille des mois ===== */
.ha-moiscard{border:1px solid var(--gp-bordure);border-radius:12px;background:var(--gp-blanc);padding:14px;}
.ha-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.ha-mo{position:relative;display:flex;align-items:center;justify-content:center;gap:5px;height:40px;border:1px solid var(--gp-bordure);border-radius:8px;font-size:12px;font-weight:500;color:#374151;background:var(--gp-blanc);transition:all .25s;}
.ha-mck{opacity:0;transition:opacity .25s;}
.ha-sel1{animation:ha-km1 24s infinite;} .ha-sel2{animation:ha-km2 24s infinite;} .ha-sel3{animation:ha-km3 24s infinite;}
.ha-sel1 .ha-mck{animation:ha-kk1 24s infinite;} .ha-sel2 .ha-mck{animation:ha-kk2 24s infinite;} .ha-sel3 .ha-mck{animation:ha-kk3 24s infinite;}
@keyframes ha-km1{0%,57.8%{background:var(--gp-blanc);border-color:var(--gp-bordure);color:#374151}58.4%,95%{background:var(--gp-pastille);border-color:var(--gp-bleu-primaire);color:var(--gp-bleu-primaire)}97%,100%{background:var(--gp-blanc);border-color:var(--gp-bordure);color:#374151}}
@keyframes ha-km2{0%,63.8%{background:var(--gp-blanc);border-color:var(--gp-bordure);color:#374151}64.4%,95%{background:var(--gp-pastille);border-color:var(--gp-bleu-primaire);color:var(--gp-bleu-primaire)}97%,100%{background:var(--gp-blanc);border-color:var(--gp-bordure);color:#374151}}
@keyframes ha-km3{0%,69.8%{background:var(--gp-blanc);border-color:var(--gp-bordure);color:#374151}70.4%,95%{background:var(--gp-pastille);border-color:var(--gp-bleu-primaire);color:var(--gp-bleu-primaire)}97%,100%{background:var(--gp-blanc);border-color:var(--gp-bordure);color:#374151}}
@keyframes ha-kk1{0%,57.8%{opacity:0}58.4%,95%{opacity:1}97%,100%{opacity:0}}
@keyframes ha-kk2{0%,63.8%{opacity:0}64.4%,95%{opacity:1}97%,100%{opacity:0}}
@keyframes ha-kk3{0%,69.8%{opacity:0}70.4%,95%{opacity:1}97%,100%{opacity:0}}
.ha-cptmois{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--gp-bleu-primaire);margin:12px 0 0;opacity:0;animation:ha-kcpt 24s infinite;}
@keyframes ha-kcpt{0%,71%{opacity:0;transform:translateY(6px)}73%,94%{opacity:1;transform:translateY(0)}96%,100%{opacity:0}}

/* ===== Curseurs et anneaux de clic ===== */
.ha-cur{position:absolute;top:0;left:0;z-index:10;pointer-events:none;}
#ha-cur1{animation:ha-mv1 24s ease-in-out infinite;}
#ha-cur2{animation:ha-mv2 24s ease-in-out infinite;}
.ha-rg{position:absolute;top:-10px;left:-10px;width:26px;height:26px;border:2px solid var(--gp-turquoise);border-radius:50%;opacity:0;}
#ha-rg1{animation:ha-rgk1 24s linear infinite;}
#ha-rg2{animation:ha-rgk2 24s linear infinite;}
/* Coordonnées calées sur le rendu réel (polices du site) — pointe du
   curseur (+4,+2) posée sur chaque cible, vérifiée par captures. */
@keyframes ha-mv1{
0%,1%{transform:translate(330px,340px)}
2%,3.3%{transform:translate(170px,102px)}
4.3%,6.8%{transform:translate(99px,176px)}
7.8%,8.5%{transform:translate(170px,102px)}
9.7%,10.3%{transform:translate(170px,184px)}
11.5%,12.8%{transform:translate(99px,260px)}
13.8%,14.4%{transform:translate(170px,184px)}
15.4%,16.1%{transform:translate(170px,226px)}
17.1%,18.9%{transform:translate(108px,299px)}
19.4%,20.1%{transform:translate(170px,226px)}
22%,100%{transform:translate(330px,340px)}
}
@keyframes ha-rgk1{
2.3%{opacity:0;transform:scale(.4)}2.6%{opacity:1;transform:scale(.55)}3.3%{opacity:0;transform:scale(1.3)}
4.4%{opacity:0;transform:scale(.4)}4.7%{opacity:1;transform:scale(.55)}5.3%{opacity:0;transform:scale(1.3)}
5.4%{opacity:0;transform:scale(.4)}5.7%{opacity:1;transform:scale(.55)}6.3%{opacity:0;transform:scale(1.3)}
6.4%{opacity:0;transform:scale(.4)}6.7%{opacity:1;transform:scale(.55)}7.3%{opacity:0;transform:scale(1.3)}
7.9%{opacity:0;transform:scale(.4)}8.2%{opacity:1;transform:scale(.55)}8.8%{opacity:0;transform:scale(1.3)}
9.8%{opacity:0;transform:scale(.4)}10.1%{opacity:1;transform:scale(.55)}10.7%{opacity:0;transform:scale(1.3)}
11.6%{opacity:0;transform:scale(.4)}11.9%{opacity:1;transform:scale(.55)}12.4%{opacity:0;transform:scale(1.3)}
12.5%{opacity:0;transform:scale(.4)}12.8%{opacity:1;transform:scale(.55)}13.4%{opacity:0;transform:scale(1.3)}
13.9%{opacity:0;transform:scale(.4)}14.2%{opacity:1;transform:scale(.55)}14.8%{opacity:0;transform:scale(1.3)}
15.5%{opacity:0;transform:scale(.4)}15.8%{opacity:1;transform:scale(.55)}16.4%{opacity:0;transform:scale(1.3)}
17.2%{opacity:0;transform:scale(.4)}17.5%{opacity:1;transform:scale(.55)}18.1%{opacity:0;transform:scale(1.3)}
19.5%{opacity:0;transform:scale(.4)}19.8%{opacity:1;transform:scale(.55)}20.4%{opacity:0;transform:scale(1.3)}
100%{opacity:0}
}
@keyframes ha-mv2{
0%,50%{transform:translate(330px,290px)}
55%,59%{transform:translate(62px,72px)}
61%,65%{transform:translate(178px,72px)}
67%,71%{transform:translate(294px,72px)}
76%,100%{transform:translate(330px,290px)}
}
@keyframes ha-rgk2{
57.5%{opacity:0;transform:scale(.4)}58%{opacity:1;transform:scale(.55)}59%{opacity:0;transform:scale(1.3)}
63.5%{opacity:0;transform:scale(.4)}64%{opacity:1;transform:scale(.55)}65%{opacity:0;transform:scale(1.3)}
69.5%{opacity:0;transform:scale(.4)}70%{opacity:1;transform:scale(.55)}71%{opacity:0;transform:scale(1.3)}
100%{opacity:0}
}

/* ===== Accordéons animés (ouverture/fermeture + surbrillance) ===== */
#ha-hd2{animation:ha-bg2 24s infinite;}
@keyframes ha-bg2{0%,2.5%{background:var(--gp-blanc)}2.9%,8.2%{background:var(--gp-pastille)}8.9%,100%{background:var(--gp-blanc)}}
#ha-ar2{animation:ha-ro2 24s infinite;}
@keyframes ha-ro2{0%,2.5%{transform:rotate(0)}2.9%,8.2%{transform:rotate(180deg)}8.9%,100%{transform:rotate(0)}}
#ha-ct2{animation:ha-op2 24s ease-in-out infinite;}
@keyframes ha-op2{0%,2.6%{max-height:0}3.6%,8.1%{max-height:88px}9.1%,100%{max-height:0}}
#ha-hd4{animation:ha-bg4 24s infinite;}
@keyframes ha-bg4{0%,10%{background:var(--gp-blanc)}10.4%,14.2%{background:var(--gp-pastille)}14.9%,100%{background:var(--gp-blanc)}}
#ha-ar4{animation:ha-ro4 24s infinite;}
@keyframes ha-ro4{0%,10%{transform:rotate(0)}10.4%,14.2%{transform:rotate(180deg)}14.9%,100%{transform:rotate(0)}}
#ha-ct4{animation:ha-op4 24s ease-in-out infinite;}
@keyframes ha-op4{0%,10.1%{max-height:0}11.1%,14.1%{max-height:88px}15.1%,100%{max-height:0}}
#ha-hd5{animation:ha-bg5 24s infinite;}
@keyframes ha-bg5{0%,15.6%{background:var(--gp-blanc)}16%,19.8%{background:var(--gp-pastille)}20.5%,100%{background:var(--gp-blanc)}}
#ha-ar5{animation:ha-ro5 24s infinite;}
@keyframes ha-ro5{0%,15.6%{transform:rotate(0)}16%,19.8%{transform:rotate(180deg)}20.5%,100%{transform:rotate(0)}}
#ha-ct5{animation:ha-op5 24s ease-in-out infinite;}
@keyframes ha-op5{0%,15.7%{max-height:0}16.7%,19.7%{max-height:88px}20.7%,100%{max-height:0}}

/* ===== Boutons + qui s'enfoncent au clic ===== */
#ha-hplus{animation:ha-pk 24s infinite;}
@keyframes ha-pk{
4.6%,5.6%,6.6%{background:#fef9c3;transform:scale(1)}
4.9%,5.9%,6.9%{background:rgba(133,77,14,.22);transform:scale(.88)}
5.4%,6.4%,7.4%{background:var(--gp-blanc);transform:scale(1)}
}
#ha-cplus{animation:ha-ck 24s infinite;}
@keyframes ha-ck{
11.8%,12.7%{background:#dbeafe;transform:scale(1)}
12.1%,13%{background:rgba(29,78,216,.25);transform:scale(.88)}
12.6%,13.5%{background:var(--gp-blanc);transform:scale(1)}
}

/* ===== Valeurs des spinners (empilées, swap par opacité) ===== */
#ha-h0{animation:ha-kh0 24s infinite;} #ha-h1{animation:ha-kh1 24s infinite;} #ha-h2{animation:ha-kh2 24s infinite;} #ha-h3{animation:ha-kh3 24s infinite;}
@keyframes ha-kh0{0%,4.9%{opacity:1}5.1%,45%{opacity:0}47%,100%{opacity:1}}
@keyframes ha-kh1{0%,4.9%{opacity:0}5.1%,5.9%{opacity:1}6.1%,100%{opacity:0}}
@keyframes ha-kh2{0%,5.9%{opacity:0}6.1%,6.9%{opacity:1}7.1%,100%{opacity:0}}
@keyframes ha-kh3{0%,6.9%{opacity:0}7.1%,45%{opacity:1}47%,100%{opacity:0}}
#ha-c0{animation:ha-kc0 24s infinite;} #ha-c1{animation:ha-kc1 24s infinite;} #ha-c2{animation:ha-kc2 24s infinite;}
@keyframes ha-kc0{0%,12%{opacity:1}12.2%,45%{opacity:0}47%,100%{opacity:1}}
@keyframes ha-kc1{0%,12%{opacity:0}12.2%,12.9%{opacity:1}13.1%,100%{opacity:0}}
@keyframes ha-kc2{0%,12.9%{opacity:0}13.1%,45%{opacity:1}47%,100%{opacity:0}}
#ha-b0{animation:ha-kb0 24s infinite;} #ha-b1{animation:ha-kb1 24s infinite;}
@keyframes ha-kb0{0%,13.2%{opacity:1}13.8%,45%{opacity:0}47%,100%{opacity:1}}
@keyframes ha-kb1{0%,13.2%{opacity:0}13.8%,45%{opacity:1}47%,100%{opacity:0}}

/* ===== Champ prime : focus + machine à écrire ===== */
#ha-champ{animation:ha-kch 24s infinite;}
@keyframes ha-kch{0%,17.2%{border-color:rgba(0,0,0,.15);box-shadow:none}17.6%,19.6%{border-color:var(--gp-turquoise);box-shadow:0 0 0 3px rgba(94,197,200,.2)}20.3%,100%{border-color:rgba(0,0,0,.15);box-shadow:none}}
#ha-saisie{animation:ha-kty 24s steps(6) infinite;}
@keyframes ha-kty{0%,17.6%{width:0}19%,44%{width:44px}46%,100%{width:0}}

/* ===== Points de navigation ===== */
.ha-dots{display:flex;justify-content:center;gap:6px;margin:10px 0 12px;}
.ha-dot{width:8px;height:8px;border-radius:8px;background:#cbd5e1;transition:all .4s;}
#ha-d1{animation:ha-kd1 24s infinite;}
#ha-d2{animation:ha-kd2 24s infinite;}
@keyframes ha-kd1{0%,45%{background:var(--gp-bleu-primaire);width:20px}48%,96%{background:#cbd5e1;width:8px}99%,100%{background:var(--gp-bleu-primaire);width:20px}}
@keyframes ha-kd2{0%,45%{background:#cbd5e1;width:8px}48%,96%{background:var(--gp-bleu-primaire);width:20px}99%,100%{background:#cbd5e1;width:8px}}

/* ===== Copyright ===== */
.ha-legal{text-align:center;font-size:10.5px;color:#9ca3af;line-height:1.7;margin:0 24px;border-top:1px solid #eef0f4;padding:10px 0 12px;}

/* =====================================================
   RESPONSIVE
   Le panneau visuel garde sa largeur fixe de 370 px
   (nécessaire au calage pixel du curseur) : sous 420 px il
   est réduit par transform: scale(.85) au lieu d'être rendu
   fluide, et la hauteur réservée est ajustée en conséquence.
   Les deux colonnes s'empilent naturellement (flex-wrap).
   La section est pleine largeur (padding propre) : plus de
   marges de cadre à gérer, la fenêtre se centre d'elle-même.
   ===================================================== */
@media (max-width: 699px){
  /* Titre et rotateur réduits : hauteur d'item ramenée à 30 px et
     paliers translateY recalés en conséquence (ha-rotv-m). */
  .ha-sect-titre{font-size:24px;}
  .ha-rotor-ligne{font-size:22px;}
  .ha-rotor{height:30px;}
  .ha-rot-item{height:30px;line-height:30px;}
  .ha-rot-col{animation-name:ha-rotv-m;}
  .ha-r{font-size:11px;}
  /* Colonnes empilées : réserve de hauteur augmentée (anti-CLS)
     et panneau centré sous le texte. */
  .ha-stage{min-height:640px;}
  .ha-panel{margin-left:auto;margin-right:auto;}
}
@keyframes ha-rotv-m{
0%,20%{transform:translateY(0)}
25%,45%{transform:translateY(-30px)}
50%,70%{transform:translateY(-60px)}
75%,95%{transform:translateY(-90px)}
100%{transform:translateY(-120px)}
}
@media (max-width: 419px){
  /* Calage pixel préservé : largeur de mise en page MAINTENUE à 370 px
     (flex-shrink:0, sinon le flex comprime le panneau et décale les
     cibles), puis réduction visuelle à 85 %. La marge basse négative
     (-15 % des ~360 px de haut) rend l'espace économisé par le scale.
     Chrome latéral resserré (padding de section 8 px, marges de stage
     10 px) pour loger les 314 px visuels du panneau dans la fenêtre. */
  .hero-anime{padding:64px 8px 56px;}
  .ha-stage{min-height:580px;margin:0 10px;}
  .ha-legal{margin:0 12px;}
  /* margin-left en calc : centre le panneau même quand le conteneur est
     plus étroit que 370 px (les marges auto ne centrent plus en débord). */
  .ha-panel{flex-shrink:0;width:370px;max-width:none;transform:scale(.85);transform-origin:top center;margin-bottom:-55px;margin-left:calc((100% - 370px)/2);margin-right:0;}
}
@media (max-width: 359px){
  /* Très petits écrans (finement hors périmètre des 420 px de la spec) :
     même principe, échelle réduite à 75 % pour tenir dans le cadre. */
  .ha-panel{transform:scale(.75);margin-bottom:-90px;}
  .ha-stage{min-height:545px;}
}

/* =====================================================
   ACCESSIBILITÉ — prefers-reduced-motion
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
  /* Toutes les animations desactivees ; afficher l'etat final de la slide 1 :
     accordeon Heures supplementaires ouvert, valeur 1,5, badge Auto, curseurs masques,
     slide 2 masquee, point 1 actif. Fond decore fige (halos poses, vague
     immobile) et rotateur fige sur le premier item : PaieOne(R). */
  .hero-anime *,
  .hero-anime *::before,
  .hero-anime *::after{animation:none !important;transition:none !important;}
  /* Fond décoré figé — déjà couvert par le sélecteur universel ci-dessus,
     explicité ici conformément à la spécification. */
  .ha-blob1,.ha-blob2,.ha-vague{animation:none !important;}
  /* Rotateur figé sur le premier item de la colonne : PaieOne®. */
  .ha-rot-col{animation:none !important;transform:translateY(0);}
  /* Slide 1 seule visible (la slide 2 reste lisible par les lecteurs d'écran). */
  #ha-sl1{opacity:1;}
  #ha-sl2{opacity:0;}
  /* Curseurs et anneaux de clic masqués. */
  #ha-cur1,#ha-cur2{display:none;}
  /* Surligneur turquoise affiché en l'état final (z-index:0 : sans
     l'animation d'opacité, la slide ne crée plus de contexte
     d'empilement — on l'ancre ici pour garder le surligneur visible). */
  .ha-hl{z-index:0;}
  .ha-hl::before{transform:scaleX(1);}
  /* Accordéon « Heures supplémentaires » ouvert, valeur 1,5. */
  #ha-hd2{background:var(--gp-pastille);}
  #ha-ar2{transform:rotate(180deg);}
  #ha-ct2{max-height:88px;}
  #ha-h0,#ha-h1,#ha-h2{opacity:0;}
  #ha-h3{opacity:1;}
  /* Badge « Congés payés » au repos : « Auto ». */
  #ha-b0{opacity:1;}
  #ha-b1{opacity:0;}
  /* Point de navigation 1 actif (pilule bleue élargie). */
  #ha-d1{background:var(--gp-bleu-primaire);width:20px;}
  #ha-d2{background:#cbd5e1;width:8px;}
}