/* ═══════════════════════════════════════════════════════════════════════════
   Quotum — les deux comparatifs : ouverture, face-à-face, matrice, offre.
   Jetons de quotum.css seulement (DESIGN.md). Mouvement piloté par le défilement,
   jamais seul, et état final sous prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */

.vs { max-width:1120px; }
.vs .lecture { max-width:var(--lecture); }

/* Les renvois aux sources : présents partout, discrets. */
.vs sup { font-size:11px; line-height:0; white-space:nowrap; }
.vs sup a { color:var(--encre-faible); text-decoration:none; font-family:var(--police-donnee); }
.vs sup a:hover { color:var(--identite); text-decoration:underline; }

/* Le signe d'une cellule : une case de la grille de notation. Pleine, annoncé ; en contour,
   rien d'annoncé ; un trait, non. Le texte de la cellule dit toujours la même chose. */
.signe {
  display:inline-block;
  width:8px;
  height:16px;
  border-radius:2px;
  border:2px solid var(--encre-forte);
  vertical-align:-3px;
  margin-right:8px;
}
.signe.plein { background:var(--encre-forte); }
.signe.vide { border-color:var(--mesure-absente); }
.signe.non { border:0; width:10px; height:2px; background:var(--encre-faible); vertical-align:4px; }

.prix-lancement { font-size:13px; color:var(--encre-faible); margin:8px 0 0; }

/* ── Ouverture : le panneau, et le tiroir d'un compte posé par-dessus ───── */

.vs-ouverture { display:grid; gap:40px; align-items:center; margin:0 0 64px; }
.vs-ouverture .boutons { margin:24px 0 0; }
.vs-verdict { list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.vs-verdict li { margin:0; display:grid; grid-template-columns:96px minmax(0, 1fr); gap:12px; font-size:15px; color:var(--encre-moyenne); }
.vs-verdict b { font-size:13px; font-weight:500; color:var(--encre-forte); padding-top:2px; }
.vs-ouverture h2 { margin-top:32px; }

.vs-scene {
  position:relative;
  width:min(100%, 480px);
  height:clamp(320px, 62svh, 600px);
  margin:0;
  justify-self:center;
  background:var(--fond-surface);
  border:1px solid var(--filet-discret);
  overflow:clip;
}
.vs-scene picture { position:absolute; }
.vs-scene img { height:100%; width:auto; max-width:none; border:0; }
.vs-scene .fond { left:6%; top:6%; height:120%; }
.vs-scene .devant { right:4%; top:20%; height:78%; z-index:1; }
.vs-scene figcaption {
  position:absolute;
  inset:auto 0 0 0;
  z-index:2;
  margin:0;
  padding:8px 12px;
  background:var(--fond-page);
  border-top:1px solid var(--filet-discret);
  font-family:var(--police-texte);
  font-size:13px;
  color:var(--encre-moyenne);
}
@media (min-width: 960px) {
  .vs-ouverture { grid-template-columns:minmax(0, 1fr) 480px; column-gap:56px; }
}

/* ── Les face-à-face : une bande horizontale aimantée ───────────────────── */

.vs-intro { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:8px 24px; }
.vs-intro .surtitre { margin:0; }
.vs-intro p:last-child { margin:0; font-size:13px; color:var(--encre-faible); }
.vs-releve { font-size:15px; color:var(--encre-moyenne); margin:16px 0; }
.vs-index { list-style:none; display:flex; flex-wrap:wrap; gap:8px 16px; padding:0; margin:0 0 16px; font-size:14px; }
.vs-index li { margin:0; }
.vs-index a { color:var(--encre-moyenne); text-decoration:none; border-bottom:2px solid var(--filet-discret); padding-bottom:2px; }
.vs-index a:hover { color:var(--encre-forte); border-bottom-color:var(--identite); }

/* `position: relative` : le texte réservé aux lecteurs d'écran, en position absolue, ne
   s'échappe pas de la bande pour élargir la page entière. */
.vs-bande {
  position:relative;
  display:flex;
  gap:24px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding:0 var(--gouttiere);
  overscroll-behavior-x:contain;
  scrollbar-width:thin;
  padding:0 var(--gouttiere) 24px;
  margin:0 calc(-1 * var(--gouttiere)) 48px;
}
.vs-duel {
  flex:none;
  width:min(880px, calc(100vw - 2 * var(--gouttiere) - 24px));
  scroll-snap-align:start;
  scroll-margin-top:24px;
  padding:24px 0 0;
  border-top:2px solid var(--encre-forte);
  display:grid;
  gap:24px;
  align-content:start;
}
.vs-duel h2 { font-size:22px; margin:0; }
.vs-duel h2 span { color:var(--encre-faible); font-weight:400; }
.vs-chiffres { width:100%; font-size:14px; border-collapse:collapse; }
.vs-chiffres th, .vs-chiffres td { padding:8px 12px 8px 0; border-bottom:1px solid var(--filet-discret); vertical-align:top; }
.vs-chiffres thead th {
  font-size:12px;
  font-weight:500;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--encre-faible);
  border-bottom:1px solid var(--filet-action);
  white-space:normal;
}
.vs-chiffres thead th.q { color:var(--identite); }
.vs-chiffres tbody th { font-weight:500; width:28%; }
.vs-chiffres tbody tr:last-child td { border-bottom:1px solid var(--filet-discret); }
.vs-cotes { display:grid; gap:24px; }
.vs-cote h3 { font-size:13px; font-weight:600; margin:0 0 12px; }
.vs-cote.q h3 { color:var(--identite); }
.vs-cote ul { list-style:none; padding:0; margin:0; }
.vs-cote li {
  position:relative;
  margin:0 0 10px;
  padding:0 0 10px 20px;
  border-bottom:1px solid var(--filet-discret);
  font-size:14px;
  color:var(--encre-moyenne);
}
.vs-cote li::before {
  content:"";
  position:absolute;
  left:0;
  top:4px;
  width:6px;
  height:12px;
  border:2px solid var(--encre-moyenne);
  border-radius:2px;
}
.vs-cote.q li::before { background:var(--identite); border-color:var(--identite); }
.vs-loupe { display:none; margin:0; height:clamp(220px, 40svh, 340px); overflow:hidden; background:var(--fond-surface); padding:16px 16px 0; }
.vs-loupe img { width:100%; height:auto; border:0; }
@media (min-width: 760px) {
  .vs-cotes { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) 240px; }
  .vs-loupe { display:block; }
}

/* ── La matrice complète ───────────────────────────────────────────────── */

.vs-tout > summary { cursor:pointer; padding:16px 0; border-top:1px solid var(--filet-action); border-bottom:1px solid var(--filet-discret); }
.vs-tout > summary h2 { display:inline; margin:0; font-size:22px; }
.vs-tout[open] > summary { margin-bottom:16px; }
.legende { display:flex; flex-wrap:wrap; gap:8px 24px; font-size:13px; color:var(--encre-moyenne); margin:0 0 16px; }
.glisser { display:none; font-size:13px; color:var(--encre-faible); margin:0 0 8px; }
.enveloppe-matrice { position:relative; margin:0 0 16px; }

table.matrice { border-collapse:separate; border-spacing:0; font-size:14px; line-height:1.45; table-layout:fixed; }
table.matrice th, table.matrice td { position:relative; padding:12px; border-bottom:1px solid var(--filet-discret); vertical-align:top; }
table.matrice thead th {
  position:sticky;
  top:0;
  z-index:3;
  background:var(--fond-page);
  font-size:13px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  color:var(--encre-forte);
  border-bottom:2px solid var(--filet-action);
  white-space:normal;
}
table.matrice .col-critere { width:22%; }
table.matrice thead .col-quotum { color:var(--identite); border-bottom-color:var(--identite); }
table.matrice .col-quotum { background:var(--fond-surface); }
table.matrice tbody th[scope="row"] { font-weight:500; color:var(--encre-forte); }
table.matrice tr.groupe th {
  padding:32px 12px 8px;
  font-size:12px;
  font-weight:500;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--identite);
  background:var(--fond-page);
  border-bottom:1px solid var(--filet-action);
}
table.matrice tbody tr:not(.groupe):hover > * { background:var(--fond-surface-haute); }
table.matrice tbody tr:last-child td { border-bottom:1px solid var(--filet-discret); }

/* Sous 921 px, le tableau reste un tableau : la colonne des critères reste collée à gauche, les
   outils défilent de côté, une colonne aimantée à la fois. La page, elle, ne déborde jamais. */
@media (max-width: 920px) {
  .glisser { display:block; }
  .enveloppe-matrice {
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-left:132px;
    margin-left:calc(-1 * var(--gouttiere));
    margin-right:calc(-1 * var(--gouttiere));
    padding:0 var(--gouttiere);
  }
  table.matrice { width:auto; table-layout:auto; }
  table.matrice th[scope="row"], table.matrice .col-critere, table.matrice tr.groupe th {
    position:sticky;
    left:calc(-1 * var(--gouttiere));
    z-index:2;
    background:var(--fond-page);
    padding-left:var(--gouttiere);
  }
  table.matrice th[scope="row"], table.matrice .col-critere { width:132px; min-width:132px; max-width:132px; font-size:13px; }
  table.matrice thead .col-critere { z-index:4; }
  table.matrice thead th { position:static; }
  table.matrice thead .col-critere { position:sticky; }
  table.matrice td, table.matrice thead th:not(.col-critere) {
    min-width:min(220px, 56vw);
    max-width:min(220px, 56vw);
    scroll-snap-align:start;
  }
}

/* ── Ce que Quotum fait de plus, quand il n'est pas le bon choix ─────────── */

.vs-deux { display:grid; gap:48px; margin-top:64px; }
.vs-deux section > h2 { margin-top:0; }
.vs-deux li { font-size:15px; color:var(--encre-moyenne); }
.vs-deux li strong { color:var(--encre-forte); font-weight:500; }
@media (min-width: 960px) {
  .vs-deux { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
}

/* ── L'offre de lancement : 4,99 € en grand, le prix suivant plus petit, jamais barré ── */

.vs-fin { margin:96px 0 0; padding:48px 0 0; border-top:2px solid var(--identite); }
.vs-fin > h2 { font-size:28px; margin:0 0 16px; max-width:var(--lecture); text-wrap:balance; }
.vs-fin > p { max-width:var(--lecture); color:var(--encre-moyenne); }
.vs-fin > .phrase { font-size:18px; }
.offre {
  display:grid;
  gap:32px;
  align-items:center;
  margin:32px 0;
  padding:32px var(--gouttiere);
  background:var(--fond-socle);
  border-top:2px solid var(--encre-forte);
  overflow:clip;
}
.offre-titre {
  font-size:12px;
  font-weight:500;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--identite);
  margin:0 0 8px;
}
.offre-prix { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 16px; margin:0; }
.offre-montant {
  font-size:clamp(56px, 9vw, 96px);
  font-weight:600;
  font-variant-numeric:tabular-nums;
  line-height:1;
  letter-spacing:-0.02em;
  color:var(--encre-forte);
}
.offre-ensuite { font-size:20px; color:var(--encre-moyenne); }
.offre-detail { font-size:15px; color:var(--encre-moyenne); max-width:440px; margin:16px 0 0; }
.offre .boutons { margin:24px 0 0; }
.offre-illus { margin:0; justify-self:center; width:280px; max-width:100%; height:clamp(220px, 44svh, 400px); overflow:hidden; }
.offre-illus img { width:100%; height:auto; border:0; }
@media (min-width: 860px) {
  .offre { grid-template-columns:minmax(0, 1fr) auto; padding:48px; }
}

/* ── Le mouvement, piloté par le défilement ─────────────────────────────── */

@supports ((animation-timeline: view()) and (animation-range: entry)) {
  @media (prefers-reduced-motion: no-preference) {
    /* Le tiroir sort de sous le panneau quand on descend ; le panneau recule. */
    .vs-scene .devant {
      animation:vs-sort linear both;
      animation-timeline:view();
      animation-range:exit -10% exit 50%;
    }
    .vs-scene .fond {
      animation:vs-recule linear both;
      animation-timeline:view();
      animation-range:exit -10% exit 50%;
    }
    /* Dans la bande, chaque face-à-face se pose en arrivant, et sa loupe descend le panneau. */
    .vs-duel {
      animation:vs-pose linear both;
      animation-timeline:view(inline);
      animation-range:entry 0% entry 60%;
    }
    .vs-loupe img {
      animation:vs-balaye linear both;
      animation-timeline:view(inline);
      animation-range:cover 10% cover 90%;
    }
  }
}
@keyframes vs-sort { from { translate:-46% 6%; } }
@keyframes vs-recule { to { translate:0 -6%; } }
/* ⛔ Le texte ne descend jamais sous 0,9 d'opacité : l'encre faible n'y tient 4,5:1 qu'à 0,886. */
@keyframes vs-pose { from { opacity:0.9; translate:0 12px; } }
@keyframes vs-balaye { to { translate:0 -30%; } }