/* ---------- le bandeau de comptage, sous le hero ---------- */
.compte{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--surface)}
.compte .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);padding:0;max-width:1200px}
.compte .c{background:var(--surface);padding:26px clamp(16px,2vw,26px)}
.compte .fig{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:clamp(24px,3vw,34px);font-weight:600;letter-spacing:-.03em;line-height:1}
.compte .cap{margin-top:9px;font-size:13px;color:var(--muted);line-height:1.5}

/* ---------- un cas : l'image d'un côté, le dossier de l'autre ---------- */
.cas{scroll-margin-top:96px}
.cas .wrap{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(30px,4.6vw,64px);align-items:center}
.cas--inv .wrap{grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr)}
.cas--inv .col-txt{order:2}
.cas--inv .col-shot{order:1}

.col-shot{position:relative}
.col-shot img{width:100%;height:auto;display:block;
  border:1px solid var(--line);background:var(--deep)}
.col-shot figcaption{margin-top:10px;font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

.cas h2{margin-bottom:6px}
.cas .secteur{font-size:14.5px;color:var(--muted);margin-bottom:20px}
.cas .corps{color:var(--muted);font-size:16px;max-width:54ch;margin-bottom:22px}
.cas .corps + .corps{margin-top:-8px}

/* la fiche technique : des faits, en tabulaire */
.fiche{border-top:1px solid var(--line);margin-top:24px}
.fiche div{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:12px 0;border-bottom:1px solid var(--line-soft)}
.fiche dt{font-size:13px;color:var(--muted);margin:0}
.fiche dd{margin:0;font-size:14px;font-weight:600;text-align:right}
.fiche dd.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500}
.fiche dd.jade{color:var(--accent-txt)}

.cas .btn-row{margin-top:26px}

/* la mention « pas encore en ligne », quand c'est le cas */
.reserve{margin-top:20px;padding:14px 16px;border-left:2px solid var(--accent);
  background:var(--accent-dim);font-size:14px;color:var(--ink)}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .compte .wrap{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .cas .wrap,.cas--inv .wrap{grid-template-columns:minmax(0,1fr)}
  /* sur une colonne, l'image d'abord : c'est elle qui donne envie de lire */
  .cas .col-shot,.cas--inv .col-shot{order:1}
  .cas .col-txt,.cas--inv .col-txt{order:2}
  .cas .corps{max-width:none}
}
@media (max-width:560px){
  .compte .wrap{grid-template-columns:minmax(0,1fr)}
  .fiche dd{font-size:13.5px}
}