/* ---- Trading cashback ---- */
.schema{margin:28px 0 24px}
.schema svg{display:block;width:100%;height:auto}
.schema figcaption{font-family:var(--mono);font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-soft);padding-top:12px;line-height:1.6}
.cf-o{fill:var(--paper);stroke:var(--blue);stroke-width:1.3}
.cf-n{dominant-baseline:auto}
.cf-n{font-family:var(--mono);font-size:14px;font-weight:600;fill:var(--blue)}
.cf-t{font-family:var(--serif);font-size:17px;font-weight:600;fill:var(--ink)}
.cf-t2{font-family:var(--sans);font-size:14px;fill:var(--ink-soft)}
.cf-fl{stroke:var(--blue);stroke-width:1.3;fill:none;opacity:.6}
.cb2-k{font-family:var(--mono);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;fill:var(--ink-soft)}
.cb2-f{fill:rgba(11,31,56,.07)}
.cb2-a{fill:rgba(11,31,56,.34)}
.cb2-b{fill:var(--blue)}
.cb2-v{font-family:var(--serif);font-size:22px;font-weight:600;fill:var(--ink)}
.a-completer{color:var(--neg) !important;font-family:var(--mono) !important;
  font-size:12px !important;letter-spacing:.1em;text-transform:uppercase}

/* ---- simulateur de reversement ---- */
/* Trois courtiers ne tiennent pas dans une colonne de 420 px : les
   curseurs prennent toute la largeur, les cartes passent en dessous. */
.simu{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin:30px 0 26px}
.simu-ctrl{background:var(--paper);padding:34px 36px 30px}
.simu-res{background:var(--navy);color:var(--paper);padding:34px 32px;
  display:flex;flex-direction:column;justify-content:center}
.sc-lab{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
.sc-val{display:block;font-family:var(--serif);font-size:30px;font-weight:600;
  letter-spacing:-.018em;margin-bottom:16px}
.sc-ech{display:flex;justify-content:space-between;margin-top:8px;
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:rgba(11,31,56,.42)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2px;
  background:var(--rule);outline:none;margin:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:22px;height:22px;background:var(--navy);cursor:pointer;border:none}
input[type=range]::-moz-range-thumb{width:22px;height:22px;background:var(--navy);
  cursor:pointer;border:none;border-radius:0}
.sr-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--steel)}
.sr-big{font-family:var(--serif);font-size:60px;font-weight:600;line-height:1;
  letter-spacing:-.03em;margin-top:10px}
.sr-med{font-family:var(--serif);font-size:38px;font-weight:600;line-height:1.05;
  letter-spacing:-.022em;margin-top:10px}
.sr-n{font-size:13.5px;line-height:1.5;color:rgba(242,239,232,.62);margin-top:12px}

.paliers{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule);margin-bottom:26px}
.pl{background:var(--paper);padding:22px 22px 24px;transition:background .2s}
.pl-on{background:var(--paper-2);box-shadow:inset 3px 0 0 var(--blue)}
.pl-k{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  color:var(--ink-soft);margin-bottom:10px}
.pl-v{display:block;font-family:var(--serif);font-size:30px;font-weight:600;
  letter-spacing:-.02em;line-height:1}
.pl-on .pl-v{color:var(--blue)}
.pl-u{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);margin-top:6px}
@media(max-width:820px){
  .simu{grid-template-columns:1fr}
  .paliers{grid-template-columns:repeat(2,1fr)}
  .sr-big{font-size:46px}
}

/* conditions : toutes les cases de même taille */
.terms{grid-auto-rows:1fr}
.terms div{justify-content:flex-start}
.terms .v{font-size:22px !important;line-height:1.25}

/* ---- ouverture de compte ---- */
.ouvrir{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;
  background:var(--navy);color:var(--paper);padding:30px 34px 28px;margin:0;
  text-decoration:none;transition:background .25s}
.ouvrir > div{min-width:0}
.ouvrir:hover{background:var(--navy-deep)}
.ou-l{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--steel)}
.ouvrir h3{font-family:var(--serif);font-size:23px;font-weight:600;letter-spacing:-.016em;
  margin:11px 0 10px;line-height:1.18;color:var(--paper)}
.ouvrir p{font-size:14.5px;line-height:1.55;color:rgba(242,239,232,.72);max-width:46ch;margin-bottom:0}
.ou-b{flex:0 0 auto;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel);border-bottom:1px solid var(--steel);padding-bottom:3px}

/* ---- étapes de transfert ---- */
.etape{display:grid;grid-template-columns:300px 1fr;gap:34px;align-items:start;
  border-top:1px solid var(--rule);padding:30px 0}
.et-n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--blue)}
.etape h3{font-family:var(--serif);font-size:22px;font-weight:600;letter-spacing:-.014em;
  margin:11px 0 12px;line-height:1.2}
.etape p{font-size:15px;line-height:1.68;color:var(--ink-soft)}
.etape p b{font-weight:600;color:var(--ink)}
.et-img{margin:0;border:1px solid var(--rule);background:var(--paper-2)}
.et-img img{display:block;width:100%;height:auto}

.code-bloc{border:1px solid var(--rule);background:var(--paper-2);padding:20px 24px;
  display:flex;flex-direction:column;gap:9px;align-items:flex-start;margin-top:18px;
  margin-top:26px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.cd-l{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue)}
.cd-v{font-family:var(--mono);font-size:30px;font-weight:600;letter-spacing:.06em;line-height:1}
.cd-n{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-soft)}
@media(max-width:820px){
  .etape{grid-template-columns:1fr;gap:20px}
  .ouvrir{flex-direction:column;align-items:flex-start;gap:22px}
}

/* le bouton d'activation, en attente du numéro */
.ouvrir.wa{background:var(--navy-deep)}
.ouvrir.wa[href="#"]{opacity:.62;pointer-events:none}
.ouvrir.wa[href="#"] .ou-b::after{content:" — numéro à fournir"}

/* le bloc d'ouverture est imbriqué dans une étape : on reprend la main */
.etape .ouvrir h3{font-family:var(--serif);font-size:23px;font-weight:600;
  letter-spacing:-.016em;margin:11px 0 10px;line-height:1.18;color:var(--paper)}
.etape .ouvrir p{font-size:14.5px;line-height:1.55;color:rgba(242,239,232,.72);
  max-width:46ch;margin-bottom:0}
.etape .ouvrir .ou-l{color:var(--steel)}

/* ---- contacts d'activation ---- */
.contacts{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
.ct{background:var(--paper);padding:26px 28px 28px;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;gap:9px;transition:background .2s}
.ct:hover{background:var(--paper-2)}
.ct-l{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue)}
.ct-v{font-family:var(--serif);font-size:clamp(18px,1.9vw,23px);font-weight:600;
  letter-spacing:-.012em;line-height:1.2;word-break:break-word}
.ct-n{margin-top:auto;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft)}
@media(max-width:620px){.contacts{grid-template-columns:1fr}}

/* ---- choix du courtier ---- */
.ct-choix{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule);margin-top:28px}
.ct-b{background:var(--paper);border:none;cursor:pointer;padding:30px 32px;text-align:start;
  font-family:var(--serif);font-size:23px;font-weight:600;letter-spacing:-.016em;
  line-height:1.22;color:var(--ink);transition:background .2s,color .2s}
.ct-b:hover{background:var(--paper-2)}
.ct-b span{display:block;margin-top:11px;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:400}
.ct-b.ct-on{background:var(--navy);color:var(--paper)}
.ct-b.ct-on span{color:var(--steel)}
.pl-vide{grid-column:1/-1;background:var(--paper-2);text-align:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--neg);padding:30px}
.ouvrir.ct-inactif{opacity:.5;pointer-events:none}
.ouvrir.ct-inactif .ou-b::after{content:" — lien à fournir"}
@media(max-width:620px){.ct-choix{grid-template-columns:1fr}.ct-b{padding:24px 24px;font-size:20px}}

/* ---- bascule entre courtiers ---- */
.bascule{padding-block:0 !important}
.bsc{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
.bsc > *{background:var(--paper);padding:22px 26px;text-decoration:none;color:var(--ink);
  font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:-.014em;
  line-height:1.24;transition:background .2s}
.bsc em{display:block;margin-top:8px;font-style:normal;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);font-weight:400}
.bsc a:hover{background:var(--paper-2)}
.bsc .bsc-on{background:var(--navy);color:var(--paper)}
.bsc .bsc-on em{color:var(--steel)}

/* ---- partenariats ---- */
.part{background:var(--paper-2)}
.pt-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:28px}
.pt-grille > div{background:var(--paper);padding:28px 30px 30px}
.pt-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue)}
.pt-grille h3{font-family:var(--serif);font-size:27px;font-weight:600;letter-spacing:-.018em;
  margin:12px 0 10px;line-height:1.14}
.pt-grille p{font-size:14.5px;line-height:1.65;color:var(--ink-soft)}
@media(max-width:620px){.bsc,.pt-grille{grid-template-columns:1fr}}

/* ---- choix du courtier, avec logos ---- */
.ct-choix{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule);margin:28px 0 0}
.ct-b{background:var(--paper);border:none;cursor:pointer;padding:26px 28px 28px;text-align:start;
  transition:background .2s;display:flex;flex-direction:column;align-items:flex-start;gap:0}
.ct-b:hover{background:var(--paper-2)}
.ct-b img{height:30px;width:auto;margin-bottom:16px;filter:grayscale(1);opacity:.55;transition:all .2s}
.ct-n{font-family:var(--serif);font-size:21px;font-weight:600;letter-spacing:-.014em;
  line-height:1.2;color:var(--ink)}
.ct-r{margin-top:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-soft)}
.ct-b.ct-on{background:var(--navy)}
.ct-b.ct-on img{filter:none;opacity:1}
.ct-b img.lg-sombre{display:none}
.ct-b.ct-on img.lg-clair{display:none}
.ct-b.ct-on img.lg-sombre{display:block}
.ct-b.ct-on .ct-n{color:var(--paper)}
.ct-b.ct-on .ct-r{color:var(--steel)}

/* ---- tableau comparatif ---- */
.cmp{width:100%;border-collapse:collapse;margin-top:30px;font-size:14.5px}
table.cmp thead th{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);text-align:end;padding:0 14px 12px;border-bottom:1px solid var(--ink)}
table.cmp thead th:first-child{text-align:start}
table.cmp tbody td{padding:11px 14px;border-bottom:1px solid var(--rule);color:var(--ink-soft);vertical-align:middle}
table.cmp tbody td.n{text-align:end;font-variant-numeric:tabular-nums}
.cmp td.mono{font-family:var(--mono);font-size:13px}
.cmp td.fort{color:var(--pos);font-weight:600}
table.cmp tbody tr:nth-child(5) td{border-bottom:2px solid var(--rule-dark);font-weight:600;color:var(--ink)}
.cmp-note{margin-top:16px;font-size:13.5px;line-height:1.6;color:var(--ink-soft);max-width:70ch}

/* ---- partenariats ---- */
.part{background:var(--paper-2)}
/* Quatre partenariats : deux par deux, sinon le quatrième reste seul
   sur une rangée. */
.pt-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);margin:28px 0 26px}
.pt{margin:0;background:var(--paper);display:flex;flex-direction:column}
.pt img{display:block;width:100%;height:auto;aspect-ratio:16/7;object-fit:cover}
.pt-ph{height:150px;background:var(--paper-2);display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--neg);border-bottom:1px solid var(--rule)}
.pt figcaption{padding:20px 22px 22px}
.pt-k{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue)}
.pt figcaption b{display:block;font-family:var(--serif);font-size:22px;font-weight:600;
  letter-spacing:-.016em;margin:9px 0 7px;line-height:1.15}
.pt-d{display:block;font-size:13.5px;line-height:1.6;color:var(--ink-soft)}
@media(max-width:820px){.pt-grille{grid-template-columns:1fr}}
@media(max-width:620px){
  .ct-choix{grid-template-columns:1fr}
  .cmp{font-size:13px}table.cmp td,table.cmp th{padding-inline:8px}
}

/* ---- bascule dans le simulateur ---- */
.sim-ct{display:inline-flex;gap:1px;background:var(--rule);border:1px solid var(--rule);
  margin:22px 0 28px}
.sc-b{display:flex;align-items:center;gap:11px;background:var(--paper);border:none;cursor:pointer;
  padding:11px 18px;font-family:var(--mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-soft);transition:background .2s,color .2s}
.sc-b:hover{background:var(--paper-2)}
.sc-b img{height:15px;width:auto;flex:0 0 auto;filter:grayscale(1);opacity:.5}
.sc-b.ct-on{background:var(--navy);color:var(--paper)}
.sc-b.ct-on img{filter:none;opacity:1}
.sr-k b{font-weight:600;color:var(--paper)}
@media(max-width:620px){.sim-ct{display:grid;grid-template-columns:1fr 1fr;width:100%;margin-bottom:22px}
  .sc-b{padding:11px 12px;font-size:10px;gap:8px}}
[hidden]{display:none !important}

/* ---- simulateur à deux courtiers ---- */
.simu-duo{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule-dark)}
.sd{background:var(--navy);color:var(--paper);padding:26px 26px 28px;display:flex;flex-direction:column}
.sd-fort{background:var(--navy-deep)}
.sd-lg{height:20px;width:auto;margin-bottom:14px;align-self:flex-start;
  filter:brightness(0) invert(1);opacity:.85}
.sd-n{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--steel);padding-bottom:16px;border-bottom:1px solid rgba(242,239,232,.16)}
.sd-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--steel);margin-top:18px}
/* les deux panneaux sont plus étroits : on réduit */
.sd-big{font-family:var(--serif);font-size:33px;font-weight:600;letter-spacing:-.02em;
  line-height:1;margin-top:8px}
.sd-med{font-family:var(--serif);font-size:23px;font-weight:600;letter-spacing:-.018em;
  line-height:1;margin-top:8px}
.sd-d{font-size:12.5px;color:rgba(242,239,232,.6);margin-top:12px;line-height:1.5}
.sd-gain{margin-top:auto;padding-top:16px;font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:#7FBF9B}

/* paliers à deux colonnes */
.pl-duo{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.pl-duo b{font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:-.014em}
.pl-duo i{font-style:normal;font-family:var(--mono);font-size:8.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-soft)}
.pl-duo.pl-fort b{color:var(--pos)}
.pl{display:grid;grid-template-columns:1fr auto auto;gap:22px;align-items:center}

/* ---- ouverture, deux cartes ---- */
.ouv-duo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule-dark);margin-top:28px}
.ouv-duo .ouvrir{background:var(--navy);color:var(--paper);padding:28px 30px 30px;text-decoration:none;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
  gap:0;transition:background .25s;text-align:start}
.ouv-duo .ouvrir:hover{background:#0F2A4A}
.ouv-duo .ou-fort{background:var(--navy-deep)}
.ouv-duo .ou-fort:hover{background:#0B2138}
.ou-lg{height:22px;width:auto;align-self:flex-start;margin-bottom:18px;
  filter:brightness(0) invert(1);opacity:.85}
/* Une marque en pastille pleine ne supporte pas le passage en blanc :
   elle deviendrait un carré vide. On la laisse dans ses couleurs, à la
   taille du ruban de l'accueil, et on compense la hauteur. */
.ou-lg.ou-pastille{height:38px;border-radius:3px;filter:none;opacity:1;margin-bottom:2px}
.ou-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
.ouv-duo .ouvrir h3{font-family:var(--serif);font-size:25px;font-weight:600;letter-spacing:-.018em;
  margin:9px 0 8px;color:var(--paper);line-height:1.14;text-align:start}
.ouv-duo .ouvrir p{font-size:13.5px;line-height:1.6;color:rgba(242,239,232,.72);margin:0 0 20px;max-width:none;text-align:start}
.ouv-duo .ou-b{margin-top:auto;align-self:flex-start;flex:0 0 auto;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--steel);
  border-bottom:1px solid var(--steel);padding-bottom:3px}
.ouv-duo .ouvrir:hover .ou-b{color:var(--paper);border-bottom-color:var(--paper)}

/* ---- transfert, un bloc par courtier ---- */
.tr-bloc{display:grid;grid-template-columns:340px 1fr;gap:36px;align-items:start;
  border-top:1px solid var(--rule);padding:30px 0}
.tr-lg{height:20px;width:auto;display:block;margin-bottom:14px;opacity:.85}
.tr-n{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--rose);margin-bottom:12px}
.tr-t p{font-size:14.5px;line-height:1.66;color:var(--ink-soft)}
.tr-img{display:grid;gap:14px}
.tr-img figure{margin:0;border:1px solid var(--rule);background:var(--paper-2)}
.tr-img img{display:block;width:100%;height:auto}
@media(max-width:980px){.simu{grid-template-columns:1fr}}
@media(max-width:820px){
  .simu-duo,.ouv-duo{grid-template-columns:1fr}
  .tr-bloc{grid-template-columns:1fr;gap:20px}
  .pl{grid-template-columns:1fr auto auto;gap:14px}
}

/* ---- contacts, deux cartes ---- */
.ct-duo{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);
  border:1px solid var(--rule)}
.ct-c{background:var(--paper);padding:22px 24px 24px;text-decoration:none;display:block;
  transition:background .2s}
.ct-c:hover{background:var(--paper-2)}
.ct-k{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue);margin-bottom:9px}
.ct-v{display:block;font-family:var(--mono);font-size:15px;font-weight:500;
  color:var(--ink);line-height:1.4;word-break:break-word}
@media(max-width:620px){.ct-duo{grid-template-columns:1fr}}

/* ---- grille des paliers ---- */
table.cmp.grille{margin-top:6px}
table.cmp.grille tbody tr.pl-on td{background:var(--paper-2);font-weight:600;color:var(--ink)}
table.cmp.grille tbody tr.pl-on td:first-child{box-shadow:inset 3px 0 0 var(--blue)}
table.cmp.grille tbody td.ec{color:var(--pos);font-family:var(--mono);font-size:13px}
table.cmp.grille tbody tr.pl-on td.fort,
table.cmp.grille tbody tr.pl-on td.ec{color:var(--pos)}

/* ============ le mois qui se remplit ============
   Le cashback tombe chaque soir : on le montre tomber. Vingt-deux barres,
   une par jour ouvré, qui montent l'une après l'autre, et un cumul qui suit. */
.mois{ margin-top:34px; border:1px solid var(--rule); background:var(--paper-2);
  padding:clamp(16px,2vw,26px) }
.mo-tete{ display:flex; align-items:baseline; justify-content:space-between; gap:18px;
  flex-wrap:wrap; margin-bottom:18px }
.mo-k{ color:var(--ink-soft); letter-spacing:.12em }
.mo-tot{ display:flex; align-items:baseline; gap:9px }
.mo-tot b{ font-family:var(--serif); font-size:clamp(26px,3vw,38px); font-weight:600;
  letter-spacing:-.015em; font-variant-numeric:tabular-nums }
.mo-tot i{ font-style:normal; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-soft) }
.mo-barres{ display:grid; grid-template-columns:repeat(22,1fr); gap:4px;
  align-items:end; height:132px }
.mo-barres span{ display:block; background:var(--blue); height:0; border-radius:1px 1px 0 0;
  transition:height .34s cubic-bezier(.22,.61,.36,1) }
.mo-barres span.we{ background:var(--rule) }
.mo-n{ margin-top:14px; color:var(--ink-soft); letter-spacing:.1em }
@media (max-width:620px){ .mo-barres{ gap:2px; height:96px } }
@media (prefers-reduced-motion:reduce){ .mo-barres span{ transition:none } }

/* ============ le compteur de rythme ============
   Idée reprise d'un concurrent, mais pas son exécution : chez lui le
   compteur simule l'activité d'autres clients, ce qui laisse croire à un
   flux réel. Ici il ne dérive que des curseurs du visiteur, et la colonne
   de droite le dit avant qu'il ait le temps de se tromper. */
.tic{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:1px;background:var(--rule-dark);margin-top:34px;border:1px solid var(--rule-dark)}
.tic-g,.tic-d2{background:var(--navy);padding:26px 28px}
.tic-d2{background:var(--navy-deep)}
.tic-k{display:block;color:var(--steel);letter-spacing:.12em;margin-bottom:14px}
.tic-v{display:flex;align-items:baseline;gap:10px}
.tic-v b{font-family:var(--serif);font-size:clamp(38px,5vw,62px);font-weight:600;
  letter-spacing:-.02em;color:var(--paper);font-variant-numeric:tabular-nums;
  line-height:1}
.tic-v i{font-style:normal;font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  color:var(--steel)}
.tic-d{display:block;margin-top:12px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.11em;text-transform:uppercase;color:rgba(157,184,210,.6)}
.tic-d2 p{font-size:13.5px;line-height:1.6;color:rgba(242,239,232,.72);margin:0}
@media(max-width:860px){.tic{grid-template-columns:1fr}}

/* ============ le bandeau d'arguments ============
   Il défile en continu sous le titre : la page bouge avant qu'on ait
   touché à quoi que ce soit. Deux pistes identiques se succèdent, la
   translation de moitié rend la boucle invisible. */
.ruba{background:var(--navy-deep);border-block:1px solid var(--rule-dark);
  overflow:hidden;padding-block:13px}
.ruba-piste{display:flex;width:max-content;animation:ruba 38s linear infinite}
.ruba-piste span{display:flex;align-items:center;flex:0 0 auto;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(157,184,210,.72);padding-inline:26px}
.ruba-piste span::after{content:"";width:4px;height:4px;border-radius:50%;
  background:var(--blue);margin-inline-start:26px}
@keyframes ruba{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ruba:hover .ruba-piste{animation-play-state:paused}

/* ============ le jeton qui parcourt le circuit ============ */
.cf-jeton circle{fill:#D0A33C}
.cf-jeton text{font-family:var(--mono);font-size:15px;font-weight:600;fill:var(--navy-deep)}
.cf-o.cf-actif{stroke:#D0A33C;stroke-width:2}
/* le jeton se pose sur le numero : on efface le numero plutot que de
   superposer deux signes au meme endroit */
.cf-n{transition:opacity .25s ease}
.cf-o.cf-actif + .cf-n{opacity:0}

/* ============ le point en direct ============ */
.pulse{display:inline-block;width:6px;height:6px;border-radius:50%;background:#D0A33C;
  margin-inline-end:9px;vertical-align:1px;animation:pulse 2.1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(208,163,60,.55)}
  70%{opacity:.6;box-shadow:0 0 0 7px rgba(208,163,60,0)}}

/* ---- le simulateur passe à trois colonnes ---- */
.simu-duo{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Deux commandes completes cote a cote : chaque libelle, sa valeur, son
   curseur et son echelle restent dans la meme colonne. Le placement est
   explicite, sinon la grille desapparie les valeurs de leurs curseurs. */
.simu-ctrl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:auto auto auto auto;gap:0 clamp(28px,4vw,64px);align-content:start}
.simu-ctrl > :nth-child(1){grid-area:1/1} .simu-ctrl > :nth-child(2){grid-area:2/1}
.simu-ctrl > :nth-child(3){grid-area:3/1} .simu-ctrl > :nth-child(4){grid-area:4/1}
.simu-ctrl > :nth-child(5){grid-area:1/2} .simu-ctrl > :nth-child(6){grid-area:2/2}
.simu-ctrl > :nth-child(7){grid-area:3/2} .simu-ctrl > :nth-child(8){grid-area:4/2}
.simu-ctrl > [for="lots"]{margin-top:0 !important}
.sd-lg.sd-lg-plein{height:30px;border-radius:3px;filter:none;opacity:1}
@media(max-width:1020px){.simu-duo{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.simu-duo{grid-template-columns:1fr}}
@media(max-width:760px){
  .simu-ctrl{grid-template-columns:1fr;grid-template-rows:none}
  .simu-ctrl > *{grid-area:auto !important}
  .simu-ctrl > [for="lots"]{margin-top:26px !important}
}

@media(prefers-reduced-motion:reduce){
  .ruba-piste{animation:none} .pulse{animation:none}
}

/* =========================================================================
   CB.02 — ANATOMIE D'UN LOT
   Scene sombre posee dans la page claire, sur le modele des bandeaux navy
   du site. Tout est prefixe « an- » : .wrap, .mono, .head et .steps
   existent deja dans nextbridge.css et produit.css.
   Aucun rayon, aucune ombre, aucun degrade, conformement a la charte.
   ========================================================================= */
.an{
  --an-fond:var(--navy-deep);
  --an-fond-2:#0A1626;
  --an-filet:#1E2E45;
  --an-clair:var(--paper);
  --an-second:var(--steel);
  --an-bleu:var(--steel);
  --an-or:var(--warn-line);
  --an-baisse:#3E557A;
  /* --pos (#2E6B4F) disparait sur le navy : variante eclaircie reservee,
     comme --pos, aux seules donnees chiffrees. */
  --an-vert:#7FBF96;
  background:var(--an-fond);border:1px solid var(--an-filet);color:var(--an-clair);
  margin-top:8px;
}
.an svg{display:block;width:100%;height:auto}

.an-panneau{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:32px;
  border-top:1px solid var(--an-filet);padding:26px 30px 28px;
}
.an-cap{min-width:0}
.an-cap-n{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--an-bleu);display:block;margin-bottom:10px;
}
.an-cap h3{
  font-family:var(--serif);font-weight:600;font-size:clamp(20px,2.4vw,27px);
  line-height:1.18;letter-spacing:-.01em;margin:0 0 10px;text-wrap:balance;color:var(--an-clair);
}
.an-cap p{margin:0;color:var(--an-second);max-width:58ch;font-size:15px;line-height:1.72}

.an-cote{display:flex;flex-direction:column;gap:18px;min-width:0}
.an-etapes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.an-etapes button{
  width:100%;text-align:left;background:none;border:0;color:var(--an-second);cursor:pointer;
  padding:0 0 4px;display:flex;flex-direction:column;gap:8px;
  font-family:var(--mono);font-size:10px;font-weight:400;line-height:1.35;
  letter-spacing:.12em;text-transform:uppercase;
}
.an-etapes .an-barre{display:block;height:2px;background:var(--an-filet);position:relative;overflow:hidden}
.an-etapes .an-barre i{position:absolute;inset:0 auto 0 0;width:0;background:var(--an-or)}
.an-etapes button[aria-current="step"]{color:var(--an-clair)}
.an-etapes button:focus-visible,.an-play:focus-visible{outline:2px solid var(--an-or);outline-offset:3px}
.an-play{
  align-self:flex-start;display:inline-flex;align-items:center;gap:10px;
  background:none;color:var(--an-clair);border:1px solid var(--an-filet);padding:10px 16px;
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;cursor:pointer;
}
.an-play:hover{border-color:var(--an-bleu)}
.an-play svg{width:10px;height:10px;fill:currentColor}

.an-note{
  font-size:12.5px;line-height:1.7;color:var(--ink-soft);max-width:92ch;margin:14px 0 0;
}

/* ---- textes dans la scene ---- */
.an-mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:13px}
.an-serif{font-family:var(--serif);font-weight:600}
.an-sans{font-family:var(--sans)}
.an-num{font-family:var(--mono);letter-spacing:.02em;font-size:13px;font-variant-numeric:tabular-nums}

/* ---- mise en scene des quatre temps ---- */
.an-fondu{transition:opacity .6s ease}
#an-chart,#an-prix{transition:opacity .8s ease}
.an[data-etape="3"] #an-chart,.an[data-etape="4"] #an-chart{opacity:.14}
.an[data-etape="3"] #an-prix,.an[data-etape="4"] #an-prix{opacity:.25}
#an-etiq{opacity:0}.an[data-etape="1"] #an-etiq{opacity:1;transition-delay:.1s}
#an-zoom{opacity:0}.an[data-etape="2"] #an-zoom{opacity:1}
#an-zoom line{stroke-dasharray:1;stroke-dashoffset:1}
.an[data-etape="2"] #an-zoom line{animation:an-trait .8s .2s ease forwards}
#an-regle{opacity:0}
.an[data-etape="2"] #an-regle,.an[data-etape="3"] #an-regle,.an[data-etape="4"] #an-regle{opacity:1}
.an-seg{fill:var(--an-clair);opacity:.88;transform-box:fill-box;transform-origin:left center;transition:fill .5s ease}
.an[data-etape="2"] .an-seg{animation:an-pousse .35s calc(.5s + var(--i) * 28ms) ease-out both}
.an[data-etape="3"] .an-seg.an-rendu,.an[data-etape="4"] .an-seg.an-rendu{fill:var(--an-vert)}
.an[data-etape="3"] .an-seg.an-rendu{animation:an-vol 1.05s calc(.8s + var(--k) * 130ms) cubic-bezier(.6,0,.25,1) forwards}
.an[data-etape="4"] .an-seg.an-rendu{transform:translate(var(--dx),var(--dy));opacity:0}
.an-fantome{fill:none;stroke:var(--an-vert);stroke-dasharray:3 3;opacity:0}
.an[data-etape="3"] .an-fantome{opacity:.55;transition:opacity .5s 1.4s}
.an[data-etape="4"] .an-fantome{opacity:.4}
#an-l-spread{opacity:0}
.an[data-etape="2"] #an-l-spread,.an[data-etape="3"] #an-l-spread{opacity:1;transition-delay:.9s}
.an[data-etape="3"] #an-l-spread{transition-delay:0s}
#an-l-reel{opacity:0}.an[data-etape="4"] #an-l-reel{opacity:1;transition-delay:.05s}
#an-l-cb{opacity:0}
.an[data-etape="3"] #an-l-cb{opacity:1;transition-delay:.5s}
.an[data-etape="4"] #an-l-cb{opacity:1}
#an-acc-tout{opacity:0}
.an[data-etape="2"] #an-acc-tout,.an[data-etape="3"] #an-acc-tout{opacity:1;transition-delay:.9s}
#an-acc-reel{opacity:0}.an[data-etape="4"] #an-acc-reel{opacity:1}
#an-compte{opacity:0}.an[data-etape="3"] #an-compte{opacity:1;transition-delay:.3s}
#an-fiche{opacity:0}.an[data-etape="4"] #an-fiche{opacity:1;transition-delay:0s}
@keyframes an-pousse{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes an-trait{to{stroke-dashoffset:0}}
@keyframes an-vol{
  0%{transform:translate(0,0);opacity:.95}
  80%{transform:translate(var(--dx),var(--dy));opacity:.95}
  100%{transform:translate(var(--dx),var(--dy));opacity:0}
}
@keyframes an-battement{0%,100%{opacity:.35}50%{opacity:1}}
.an-point{animation:an-battement 1.8s ease-in-out infinite}

@media(max-width:820px){
  .an-panneau{grid-template-columns:1fr;padding:22px 20px 24px;gap:22px}
}
@media(max-width:560px){
  .an-etapes{grid-template-columns:repeat(2,1fr);row-gap:14px}
}
@media(prefers-reduced-motion:reduce){
  .an *,.an *::before,.an *::after{
    animation-duration:.001s!important;animation-delay:0s!important;
    transition-duration:.001s!important;transition-delay:0s!important;
  }
}

/* En arabe, dir="rtl" descend jusque dans le SVG : les valeurs calees a
   droite de la fiche sautent hors de leur cadre et « 3,3 pips » se lit
   « pips 3,3 ». Un graphique de cotation se lit de gauche a droite dans
   toutes les langues ; on fige donc le sens a l'interieur de la scene.
   Chaque etiquette reste isolee, si bien qu'un mot arabe garde son propre
   sens de lecture a l'interieur de son ancrage. */
.an svg{direction:ltr}
.an svg text{direction:ltr;unicode-bidi:isolate}