/* ============================================================
   OPTERIA : boutons qui s'allument (08/10/2026, demande Axel : « l'orangé qui vient » du bloc Formation de l'accueil, sur tout le site).
   bouton-halo.js ajoute .halo aux boutons pleins (.btn, hors menu et hors boutons secondaires) et glisse un élément dedans :
   .halo__reflet (le reflet qui traverse). Quand le bouton arrive à l'écran, il reçoit .is-allume (une seule fois) : le reflet
   passe, la flèche pousse. Le halo orange a été retiré le 08/10/2026 au soir (demande Axel : trop présent sur tout le site). Au survol, le reflet repasse
   jusqu'au bout (le script retire .is-reflet à la fin). Le contour de couleur tournant au survol (::before, da-gleap.css)
   n'est pas touché : l'effet n'utilise ni ::before ni ::after du bouton. Transform, opacity seulement.
   ============================================================ */

.halo { position: relative; isolation: isolate; }
.halo__reflet { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }

/* le reflet : une bande claire qui traverse le bouton, coupée à ses bords arrondis */
.halo__reflet { z-index: -1; overflow: hidden; }
.halo__reflet::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.28) 48%, transparent 66%); transform: translateX(-110%); }
.halo.is-reflet .halo__reflet::before { animation: halo-reflet .9s ease both; }
@keyframes halo-reflet { from { transform: translateX(-110%); } to { transform: translateX(110%); } }
/* boutons blancs (mode nuit, pages sombres, premiers écrans sombres) : reflet orangé, sinon il ne se verrait pas */
html[data-theme="nuit"] .halo__reflet::before, body.page-sombre .halo__reflet::before, .cvh .halo__reflet::before, .hero--gleap .halo__reflet::before, .dark .halo__reflet::before { background: linear-gradient(105deg, transparent 30%, rgba(251,77,23,.22) 48%, transparent 66%); }
html[data-theme="jour"] body.page-sombre .halo__reflet::before { background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.28) 48%, transparent 66%); }

/* la flèche : elle pousse à l'allumage (propriété translate) et au survol (transform) ; les deux s'additionnent sans se contrarier */
.halo > svg { transition: transform .3s cubic-bezier(.3,1.4,.5,1); }
.halo.is-pousse > svg { animation: halo-pousse 1.1s ease .45s 2; }
@keyframes halo-pousse { 0%, 100% { translate: 0 0; } 40% { translate: 5px 0; } }
@media (hover: hover) { .halo:hover > svg { transform: translateX(4px); } }

@media (prefers-reduced-motion: reduce) {
  .halo__reflet { display: none; }
  .halo > svg { animation: none !important; transition: none; }
}