/* SD ONE · lot 41 (24/10/2026, Hassan). Ajout seulement.
   1) Bouton à deux positions « En compte / PAB » (v2-lot41.js) : bleu nuit, bleu, argent ; boutons de 44 px au moins.
   2) Arrivée sur l'écran de connexion après l'intro (lot 22) jouée en 0,6 s au lieu de 3,8 s : mêmes effets, plus courts.
      Les règles d'origine de v2-lot22.css restent ; celles-ci, chargées après, les raccourcissent. */

/* ---------- 1) bouton En compte / PAB ---------- */
.l41{--l41-nuit:#0F2A4A;--l41-nuit2:#081830;--l41-bleu:#1E5AA8;--l41-bleu2:#4E8EE0;--l41-argent:#C4D3E6;--l41-argent2:#AFC0D6;--l41-fond:#EEF3F9;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:4px 0 2px;min-width:0}
.fen .g > .l41{grid-column:1/-1}
.l41-lib{font:600 12px/1.2 var(--police,Manrope,system-ui,sans-serif);letter-spacing:.04em;text-transform:uppercase;color:var(--l41-nuit)}
.l41-seg{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;min-width:min(100%,260px);padding:4px;border-radius:14px;isolation:isolate;
  background:linear-gradient(180deg,#F7FAFD,var(--l41-fond));border:1px solid var(--l41-argent);box-shadow:inset 0 1px 2px rgba(8,24,48,.08)}
.l41-b{position:relative;z-index:1;min-height:44px;min-width:44px;padding:0 18px;border:0;border-radius:10px;background:none;cursor:pointer;
  font:700 14px/1 var(--titre,Montserrat,system-ui,sans-serif);letter-spacing:.02em;color:var(--l41-nuit);transition:color .25s ease;-webkit-tap-highlight-color:transparent}
.l41-b:focus-visible{outline:2px solid var(--l41-bleu2);outline-offset:2px}
.l41-b[aria-checked="true"]{color:#fff}
.l41-b:not([aria-checked="true"]):not(:disabled):hover{color:var(--l41-bleu)}
/* curseur : pilule bleu nuit, quadrillage léger, reflet argent qui passe au changement */
.l41-curseur{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:10px;overflow:hidden;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 1px,transparent 1px 8px),repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 8px),
    linear-gradient(135deg,var(--l41-nuit2),var(--l41-nuit) 45%,var(--l41-bleu));
  box-shadow:0 4px 12px rgba(8,24,48,.28),inset 0 1px 0 rgba(196,211,230,.55);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.l41-curseur::after{content:"";position:absolute;top:-30%;bottom:-30%;width:40%;left:-60%;transform:skewX(-18deg);
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(196,211,230,.55),rgba(255,255,255,0))}
.l41[data-mode="pab"] .l41-curseur{transform:translateX(100%)}
.l41[data-mode="pab"] .l41-curseur::after{animation:l41Reflet .7s ease}
.l41[data-mode="compte"] .l41-curseur::after{animation:l41Reflet2 .7s ease}
/* revue fluidité : le reflet glisse avec transform (léger) au lieu de left (mise en page à chaque image). Même trajet : de -60 % à 130 % de la pilule = 4,75 fois sa largeur. */
@keyframes l41Reflet{from{transform:translateX(0) skewX(-18deg)}to{transform:translateX(475%) skewX(-18deg)}}
@keyframes l41Reflet2{from{transform:translateX(0) skewX(-18deg)}to{transform:translateX(475%) skewX(-18deg)}}
.l41-aide{flex:1 1 200px;min-width:0;font:500 12.5px/1.35 var(--police,Manrope,system-ui,sans-serif);color:#3D5573}
.l41-fige{opacity:.6}
.l41-fige .l41-b{cursor:not-allowed}
/* volet sous la ligne (v2-dossier-fin) : même bouton, un peu d'air */
.dfs .l41-volet{margin:10px 0 6px}
/* téléphone : le bouton prend toute la largeur, texte d'aide dessous */
@media (max-width:760px){
  .l41{gap:6px}
  .l41-seg{display:grid;width:100%;min-width:0}
  .l41-aide{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){ .l41-curseur{transition:none} .l41-curseur::after{animation:none!important} }

/* ---------- 2) arrivée sur la connexion après l'intro : 0,6 s ---------- */
@media (prefers-reduced-motion: no-preference) {
  body.cx-ouvert.l22-go #cx-fond::after { animation: l22Voile .5s cubic-bezier(.4,0,.2,1) both; }
  body.cx-ouvert.l22-go #cx-fond .cxf-carte { animation: l22Carte .6s cubic-bezier(.16,1,.3,1) both, cxfDerive 60s ease-in-out .6s infinite alternate !important; }
  body.cx-ouvert.l22-go #cx-fond .cxf-plaque { animation: l22Apparait .45s ease .1s both !important; }
  body.cx-ouvert.l22-go #cx-fond .cxf-poussiere { animation: l22Apparait .45s ease .1s both, cxfPoussiere 7s ease-in-out .6s infinite alternate !important; }
  body.cx-ouvert.l22-go #v2-contenu > .cx > .cx-hero { animation: l22Monte .4s cubic-bezier(.16,1,.3,1) .1s both; }
  body.cx-ouvert.l22-go #v2-contenu > .cx > .cx-carte { animation: l22Monte .45s cubic-bezier(.16,1,.3,1) .15s both; }
  body.cx-ouvert.l22-go #v2-contenu > .cx > .cx-bas { animation: l22Monte .35s ease .2s both; }
}