/* Styles des composants du wireframe v3. Chargée après proto.css : les règles
   héritées qui ciblaient l'ancien balisage ne s'appliquent plus. */

/* ---- Primitives ---------------------------------------------------------- */

.mono { font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--raised); color: var(--text); font-size: 14px; font-weight: 500; }
.button.primary { background: var(--action-bg); color: var(--action-ink); border-color: var(--action-bg); }
.button.ghost { background: transparent; }
.button[disabled] { opacity: .45; cursor: not-allowed; }
.link { border: 0; background: none; padding: 0; color: var(--accent); font-size: 13px; text-decoration: underline; }
.pill { display: inline-flex; align-items: center; padding: 4px 10px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--ghost); font-size: 11px; }
.chip { padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--raised); font-size: 13px; }
.chip[aria-pressed="true"] { background: var(--action-bg); color: var(--action-ink); border-color: var(--action-bg); }

.icon { width: 18px; height: 18px; }
.skeleton { background: linear-gradient(90deg, var(--ghost), var(--line), var(--ghost));
  border-radius: 8px; min-height: 64px; }
.skeleton--card { min-height: 220px; }
.skeleton--row { min-height: 96px; margin-bottom: 12px; }
.skeleton--review { min-height: 84px; margin-bottom: 10px; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
  padding: 12px 20px; border-radius: 999px; background: var(--action-bg); color: var(--action-ink);
  font-size: 13px; opacity: 0; pointer-events: none; transition: .2s; z-index: 90; }
.toast.show { opacity: 1; transform: translateX(-50%); }

/* ---- Mises en page ------------------------------------------------------- */

.layout { max-width: 1440px; margin: 0 auto; padding: 0 40px 32px; }
.layout--plain { display: grid; gap: 40px; }
.layout--split { display: grid; grid-template-columns: minmax(0, 1fr) 380px;
  column-gap: 28px; row-gap: 0; align-items: start; grid-auto-rows: min-content;
  padding-top: 14px; }
/* L'espacement vertical passe par des marges et non par row-gap : le
   récapitulatif s'étend sur toutes les rangées, et une gouttière de rangée
   serait comptée pour chacune des rangées implicites qu'il crée. */
.layout--split > * { margin-bottom: 24px; }
.layout--split > [data-recap-host],
.layout--split > [data-selection-host],
.layout--split > .cart-aside { margin-bottom: 0; }
.layout--split > * { grid-column: 1; }
.layout--split > .page-bar, .layout--split > .section-sep { grid-column: 1 / -1; }
/* Le récapitulatif et le panneau de sélection tiennent la colonne de droite
   à partir de la première rangée de contenu. */
.layout--split > [data-recap-host],
.layout--split > [data-selection-host] { grid-column: 2; grid-row: 2 / span 99; }
@media (max-width: 1199px) { .layout { padding: 0 24px 32px; } }
@media (max-width: 833px) { .layout { padding: 0 12px 24px; } .layout--split { grid-template-columns: 1fr; } }

.breadcrumb { display: flex; gap: 6px; align-items: center; }
.breadcrumb a { color: var(--muted); }

.page-head { display: grid; gap: 10px; }
.page-head h1 { margin: 0; font-size: 34px; line-height: 1.15; }
.page-head .lead { margin: 0; color: var(--muted); font-size: 16px; }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }

.page-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.page-bar h1 { margin: 0; font-size: 26px; font-weight: 700; }
.page-bar-aside { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.back { font-size: 13px; }

.steps { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.steps .step { display: flex; flex-direction: row; gap: 14px; align-items: flex-start; }
.step h3 { margin: 0 0 2px; font-size: 15px; }
.step p { margin: 0; color: var(--muted); font-size: 14px; }
.step-n { display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: none; border-radius: 999px;
  background: var(--ink); color: var(--page); font-size: 11px; }

/* ---- WF-08 : hub d'installation, valeurs de la planche -------------------- */

.console-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 24px 0; }
@media (max-width: 1199px) { .console-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px)  { .console-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

.console {
  display: flex; flex-direction: column; gap: 11px; padding: 16px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--raised);
}
.console-art {
  position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 12px;
  background: repeating-linear-gradient(45deg, var(--ghost), var(--ghost) 8px, var(--line) 8px, var(--line) 16px);
}
.console-nom { margin: 0; font-size: 18px; font-weight: 700; color: var(--ink); }
.console-note {
  margin: 0; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .06em; color: var(--muted);
}
.console-offres {
  align-self: flex-start; margin: 0; padding: 4px 9px;
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--ghost);
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600; letter-spacing: .06em; color: var(--text-doux);
}
.console-btn {
  margin-top: auto; height: 48px; border: 0; border-radius: 999px;
  background: var(--ink); color: var(--page); font-size: 14px; font-weight: 600;
}
.console-btn[disabled] { opacity: .45; }

/* Trois cartes côte à côte, jamais une liste verticale. */
.etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 833px) { .etapes { grid-template-columns: 1fr; } }
.etape {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px;
  border-radius: 12px; background: var(--sunk);
}
.etape-num {
  flex: 0 0 auto; width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--ink); color: var(--page);
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
}
.etape h3 { margin: 0 0 2px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.etape p { margin: 0; font-size: 11.5px; color: var(--text-doux); }

/* ---- WF-09 : modale des offres, valeurs de la planche --------------------- */

.modal-host {
  position: fixed; inset: 0; z-index: 70;
  display: flex; justify-content: center; align-items: flex-start;
  padding: 24px; background: rgba(0, 0, 0, .45); overflow-y: auto;
}
.modal-host[hidden] { display: none; }

.offers-modal {
  position: relative; width: min(920px, 100%); margin: auto 0;
  border: 1px solid var(--line-strong); border-radius: 18px;
  background: var(--page); box-shadow: var(--shadow); overflow: hidden;
}
.modal-close {
  position: absolute; top: 18px; right: 20px;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--ghost); color: var(--text-doux); font-size: 16px;
}
.modal-head { padding: 18px 20px; padding-right: 76px; }
.modal-head h2 { margin: 0 0 4px; font-size: 19px; font-weight: 700; color: var(--ink); }
.modal-head .mono { font-size: 9.5px; }

/* Le corps est sur fond creusé, ce qui le distingue de l'en-tête et du pied. */
.version-switch, .offres, .offres-empty, .version-help {
  background: var(--sunk);
}
.version-switch { margin: 0; padding: 14px 20px; border: 0; border-radius: 0; }
.version-label { margin: 0 0 10px; font-size: 9.5px; font-weight: 600; }
.version-options { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.version-option {
  height: 44px; padding: 0 18px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--raised); font-size: 13.5px; color: var(--text);
}
.version-option[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--page); }
.version-switch .link { margin-top: 12px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.version-note { margin: 10px 0 0; line-height: 1.5; }

.offres { display: grid; gap: 12px; margin: 0; padding: 0 20px 14px; list-style: none; }
.offre {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 14px;
  align-items: center; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--raised);
}
.offre-vignette {
  position: relative; overflow: hidden; width: 96px; height: 70px; border-radius: 9px;
  background: repeating-linear-gradient(45deg, var(--ghost), var(--ghost) 6px, var(--line) 6px, var(--line) 12px);
}
.offre-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.offre-nom { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.offre-type {
  padding: 3px 9px; border-radius: 999px; background: var(--ink); color: var(--page);
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 600; letter-spacing: .06em;
}
.offre-compte, .offre-compat {
  margin: 6px 0 0; font-family: var(--font-mono);
  font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.offre-desc { margin: 6px 0 0; font-size: 12.5px; color: var(--text-doux); }
.offre-aside { display: grid; gap: 10px; justify-items: end; text-align: right; }
.offre-prix { margin: 0; font-size: 14px; font-weight: 600; white-space: nowrap; color: var(--coral); }
.offre-btn {
  height: 44px; padding: 0 18px; border: 0; border-radius: 999px;
  background: var(--ink); color: var(--page); font-size: 13px; font-weight: 600;
}
@media (max-width: 833px) {
  /* Colonne MOBILE de WF-09 : petite vignette carrée en haut à gauche, titre +
     badge à côté, prix et bouton sur une même ligne en bas. */
  .offre {
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: start;
  }
  .offre-vignette { width: 56px; height: 56px; }
  .offre-aside {
    grid-column: 1 / -1;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    text-align: left;
  }
}

.modal-foot { padding: 16px 20px; border-top: 1px solid var(--line); }
.modal-foot p { margin: 0 0 4px; font-size: 13px; color: var(--text-doux); }

/* Le panneau d'aide est bordé de noir : c'est ce qui le distingue. */
.version-help {
  margin: 0 20px 14px; padding: 16px;
  border: 1px solid var(--ink); border-radius: 14px; background: var(--raised);
}
.version-help h3 { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--ink); }
.help-header { display: flex; align-items: center; gap: 12px; }
.help-back {
  width: 40px; height: 40px; flex: 0 0 auto;
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--raised);
}
.help-video, .video-frame {
  position: relative; aspect-ratio: 16 / 9; margin: 12px 0;
  display: grid; place-items: center; border-radius: 12px; background: var(--ghost);
}
.help-play, .video-play {
  width: 68px; height: 48px; border: 0; border-radius: 13px;
  background: var(--ink); color: var(--page); font-size: 19px;
}
.help-steps {
  margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--sunk); font-size: 13px; list-style-position: inside;
}
.help-answers { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.help-answers .button {
  flex: 1 1 0; height: 50px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
}
.help-answers .button:first-child { background: var(--ink); color: var(--page); border-color: var(--ink); }
.help-answers .button:last-child { background: var(--raised); border: 1px solid var(--ink); color: var(--ink); }
.offres-empty { display: grid; gap: 12px; justify-items: start; padding: 24px 20px; }

/* ---- WF-10 : sélection de jeux -------------------------------------------- */

.games-section h2, .form-section h2 { display: flex; align-items: center; gap: 10px;
  margin: 0 0 6px; font-size: 22px; }
.tarif-box { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 16px 0;
  padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--ghost); }
.tarif-box p { margin: 0; font-size: 16px; }

.search { display: block; margin: 16px 0 8px; }
.search input { width: 100%; padding: 11px 16px; border: 1px solid var(--line-strong);
  border-radius: 999px; background: var(--raised); }

.genre-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; }

/* Grille verticale, jamais un carrousel : l'horizontal est réservé à la bande
   de sélection mobile. */
.game-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1199px) { .game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 559px) { .game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } }

.game-cover { position: relative; margin: 0; display: grid; gap: 6px; }
.cover-art { aspect-ratio: 3 / 4; border-radius: 10px;
  background: repeating-linear-gradient(45deg, var(--ghost), var(--ghost) 7px, var(--line) 7px, var(--line) 14px); }
.cover-title { font-size: 13px; line-height: 1.3; }
.cover-cat { font-size: 9.5px; }
.cover-toggle { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px;
  border: 0; border-radius: 999px; background: var(--action-bg); color: var(--action-ink);
  font-size: 17px; line-height: 1; }
.cover-badge { position: absolute; top: 8px; left: 8px; padding: 3px 8px; border-radius: 999px;
  background: var(--ink); color: var(--page); font-size: 9px; }
.game-cover--capped { opacity: .45; }
.game-cover--capped .cover-toggle { background: var(--off); }

.section-sep { margin: 32px 0; padding: 10px 0; border-top: 1px dashed var(--line-strong);
  border-bottom: 1px dashed var(--line-strong); text-align: center; }

.request-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.request-form .form-note { grid-column: 1 / -1; }
@media (max-width: 833px) { .request-form { grid-template-columns: 1fr; } }
.field { display: grid; gap: 6px; }
.field-label { font-size: 10px; }
.field input, .field textarea { width: 100%; padding: 11px 14px; border: 1px solid var(--line-strong);
  border-radius: 10px; background: var(--raised); }
.field-error { color: var(--bad); font-size: 12px; }
.field input[aria-invalid="true"] { border-color: var(--bad); }
.form-note { margin: 4px 0 0; font-size: 13px; color: var(--muted); }

.selection-panel { position: sticky; top: 96px; display: grid; gap: 12px; padding: 20px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--raised); }
.selection-head { display: grid; gap: 4px; }
.selection-head h2 { margin: 0; font-size: 17px; }
.selection-count { font-weight: 600; }
.selection-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.selection-line { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.selection-remove { width: 24px; height: 24px; flex: none; border: 1px solid var(--line);
  border-radius: 999px; background: var(--raised); font-size: 13px; }
.selection-empty { margin: 0; color: var(--muted); font-size: 13px; }
.selection-totals { display: grid; gap: 6px; margin: 4px 0; }
.selection-totals div { display: flex; justify-content: space-between; align-items: baseline; }
.selection-totals dd { margin: 0; font-size: 13px; }
.selection-total { display: flex; justify-content: space-between; align-items: baseline;
  margin: 0; padding-top: 10px; border-top: 1px solid var(--line-strong); font-size: 15px; }
.selection-mention { margin: 0; font-size: 11px; color: var(--muted); }
.empty { color: var(--muted); }

.bottom-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line);
  background: var(--page); }
.bottom-bar[hidden] { display: none; }
.bottom-bar .button { flex: 1; }

@media (max-width: 833px) {
  .layout--split > * { grid-column: 1 !important; grid-row: auto !important; }
}

/* ---- WF-11 : formulaire de demande ---------------------------------------- */

.pack-section { padding: 20px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--raised); }
.pack-section h2 { margin: 0 0 4px; }
.pack-price { margin: 14px 0 0; font-weight: 600; color: var(--coral); }

.game-strip { margin-top: 12px; }
.strip-covers { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
.strip-covers .game-cover { width: 96px; }
.strip-more { margin: 0; align-self: center; font-size: 13px; color: var(--muted); }
.strip-notes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }

.recap { display: grid; gap: 12px; padding: 20px; border: 1px solid var(--line);
  border-radius: 16px; background: var(--raised); }
.recap--sticky { position: sticky; top: 96px; }
.recap-title { margin: 0; }
.recap-lines { display: grid; gap: 8px; margin: 0; }
.recap-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-size: 13px; }
.recap-line dt { color: var(--muted); }
.recap-line dd { margin: 0; text-align: right; }
.recap-games { padding-top: 10px; border-top: 1px solid var(--line); }
.recap-games-label { margin: 0 0 6px; }
.recap-games .game-cover { width: 62px; }
.recap-total { display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 10px; border-top: 1px solid var(--line-strong); font-size: 15px; }
.recap-mention { margin: 0; font-size: 11px; color: var(--muted); }
.recap-secondary { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.recap-secondary h3 { margin: 0; font-size: 14px; }

/* ---- WF-12 : demande envoyée ---------------------------------------------- */

.sent-head { display: grid; gap: 8px; justify-items: start; }
.sent-check { display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 999px; background: var(--good); color: #fff; font-size: 22px; }
.sent-head h1 { margin: 0; font-size: 32px; }
.sent-head .lead { margin: 0; color: var(--muted); }
.reference { display: flex; align-items: baseline; gap: 12px; margin: 8px 0 0; }
.reference .mono { font-size: 16px; letter-spacing: .08em; color: var(--ink); }

.next-steps h2, .video-section h2, .slot-section h2, .dropoff-section h2, .reco-section h2 {
  margin: 0 0 10px; font-size: 20px; }
.video-section, .slot-section, .dropoff-section, .reco-section {
  padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--raised); }
.video-frame iframe { width: 100%; height: 100%; border: 0; border-radius: 12px; }

.slot-days, .slot-times { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.slot-section .button { margin-top: 6px; }

.shop-name { margin: 0; font-weight: 600; }
.shop-hours { margin: 4px 0 12px; color: var(--muted); font-size: 14px; }
.map { aspect-ratio: 16 / 7; margin-bottom: 12px; border-radius: 12px;
  background: repeating-linear-gradient(45deg, var(--ghost), var(--ghost) 10px, var(--line) 10px, var(--line) 20px); }

.reco-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 12px; }
@media (max-width: 559px) { .reco-grid { grid-template-columns: 1fr; } }
.reco { padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.reco h3 { margin: 0 0 4px; font-size: 15px; }
.reco p { margin: 0; font-size: 13px; color: var(--muted); }

/* ---- WF-02 : catalogue ---------------------------------------------------- */

.catalog-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; }
/* Le titre nomme la catégorie, sans compteur : c'est ce que montre la planche. */
.catalog-head h1 { margin: 0; font-size: 24px; font-weight: 700; }
.catalog-tools { display: flex; gap: 10px; }
.catalog-tools .count { display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 999px;
  background: var(--ink); color: var(--page); font-size: 10px; }

.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.chip--removable { display: inline-flex; align-items: center; gap: 8px; }

/* Cinq colonnes au-delà de 1440, quatre en dessous ; cartes à hauteur égale. */
.product-grid--catalog { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1199px) { .product-grid--catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 833px)  { .product-grid--catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.load-more { display: grid; gap: 8px; justify-items: center; }
.empty-state { grid-column: 1 / -1; display: grid; gap: 12px; justify-items: center;
  padding: 48px 24px; border: 1px dashed var(--line-strong); border-radius: 16px; }

/* Panneau de filtres : ouvert à la demande, jamais une sidebar permanente. */
.filter-panel { position: fixed; inset: 0; z-index: 70; display: flex; justify-content: flex-end;
  background: rgba(0, 0, 0, .45); }
.filter-panel[hidden] { display: none; }
.filter-panel-inner { display: flex; flex-direction: column; gap: 18px;
  width: min(92vw, 400px); padding: 24px; background: var(--page); overflow-y: auto;
  box-shadow: var(--shadow); }
.panel-head { position: relative; display: flex; align-items: baseline; gap: 14px;
  padding-right: 44px; }
.panel-head h2 { margin: 0; font-size: 20px; }
.filter-family { display: grid; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.filter-family h3 { margin: 0; }
.choice { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.choice input { width: 17px; height: 17px; flex: none; margin: 0; }
.choice-note { margin-left: auto; }
.choice--disabled { color: var(--muted); opacity: .55; cursor: not-allowed; }
.choice--disabled input { cursor: not-allowed; }
.panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }

/* ---- WF-04 : fiche produit ------------------------------------------------ */

.layout--product { display: grid; grid-template-columns: 870fr 452fr;
  gap: 36px; align-items: start; padding-top: 20px; }
.layout--product > .product-tabs,
.layout--product > .section,
.layout--product > .games-full { grid-column: 1 / -1; }
/* Collage borné à la zone principale : le panneau colle à l'intérieur de sa
   zone de grille, qui s'arrête au repère en pointillé, juste avant la grille
   des jeux. Il ne suit donc jamais le pied de page. */
/* Le conteneur porte les deux colonnes et borne le collage du panneau. */
.product-top { grid-column: 1 / -1; display: grid;
  grid-template-columns: minmax(0, 1fr) 380px; column-gap: 28px; align-items: start; }
/* TABLETTE 834 : la planche garde les deux colonnes et la zone collante, avec
   un panneau resserré. Sous 768 px, une seule colonne et plus aucun collage —
   c'est la barre d'achat contextuelle de 70 px qui porte l'action (WF-04, 5). */
@media (min-width: 768px) and (max-width: 1023px) {
  .product-top { grid-template-columns: minmax(0, 1fr) 320px; column-gap: 20px; }
}
@media (max-width: 767px) {
  html, body { overflow-x: hidden; }
  .product-top, .product-media, .buy-panel { min-width: 0; max-width: 100%; }
  .product-top { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .buy-actions .button.primary { min-width: 0; }
}

/* Le panneau tient dans la MÊME rangée que le média. En s'étendant sur une
   rangée de plus, il définissait lui-même la hauteur de sa zone : le collage
   n'avait alors aucune borne et le panneau recouvrait les onglets puis les
   produits similaires, qui défilaient derrière lui. */
.layout--product > .sticky-boundary { grid-column: 1 / -1;
  height: 0; border-top: 1px dashed var(--line-strong); }
@media (max-width: 1023px) {
  .layout--product { grid-template-columns: minmax(0, 1fr); }
  .layout--product > * { grid-column: 1 !important; grid-row: auto !important; }
}

.product-shot { aspect-ratio: 1 / 1; border-radius: 18px;
  background: repeating-linear-gradient(45deg, var(--ghost), var(--ghost) 10px, var(--line) 10px, var(--line) 20px); }

/* Panneau collant borné. Il mesure environ 1100 px : plus haut que la fenêtre,
   il ne pouvait pas coller sans recouvrir les onglets puis les produits
   similaires, qui défilaient derrière lui. Borné à la hauteur utile, il garde
   sa place et son propre défilement, et s'arrête avec sa rangée de grille —
   soit avant les produits similaires, comme le demande WF-04. */
.buy-panel { position: sticky; top: 104px; align-self: start; display: grid; gap: 14px;
  justify-items: start; padding: 22px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--raised);
  max-height: calc(100vh - 124px); overflow-y: auto; overscroll-behavior: contain; }
/* Sous 768 px, le panneau ne colle plus : les actions vivent dans le contenu et
   c'est la barre d'achat contextuelle de 70 px qui prend le relais dès qu'elles
   sortent de l'écran — WF-04, note 5. */
@media (max-width: 767px) {
  .buy-panel { position: static; max-height: none; overflow: visible; }
}
/* Le badge de la fiche produit n'est pas positionné : il ouvre le panneau. */
.buy-panel > .carte-badge { position: static; }
.buy-panel h1 { margin: 0; font-size: 24px; font-weight: 700; }
.rating { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.stars { color: var(--warn); letter-spacing: 2px; }
.buy-price { margin: 6px 0 0; font-size: 26px; font-weight: 600; color: var(--coral); }
.buy-stock { margin: 0; color: var(--good); font-size: 14px; }

.spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; width: 100%; }
.spec-grid div { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.spec-grid dt { margin-bottom: 2px; }
.spec-grid dd { margin: 0; font-size: 14px; font-weight: 500; }

.buy-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; margin: 6px 0; }
.buy-actions .button.primary { flex: 1; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong);
  border-radius: 12px; overflow: hidden; }
.qty button { width: 36px; height: var(--cart-btn); border: 0; background: var(--raised); font-size: 16px; }
.qty output { min-width: 30px; text-align: center; font-size: 14px; }

.included, .installed, .logistics { width: 100%; padding-top: 14px; border-top: 1px solid var(--line); }
.included h2, .installed h2 { margin: 0 0 8px; }
.included ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.included li { display: flex; justify-content: space-between; font-size: 13.5px; }
.installed .game-strip .game-cover { width: 66px; }
.logistics p { margin: 0 0 6px; font-size: 13.5px; color: var(--muted); }
.logistics strong { color: var(--text); }

.games-full { padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--raised); }
.games-full[hidden] { display: none; }
.games-full .link { margin-top: 14px; }

.product-tabs { padding-top: 24px; border-top: 1px solid var(--line); }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.tab { padding: 8px 16px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--raised); font-size: 14px; }
.tab[aria-selected="true"] { background: var(--action-bg); color: var(--action-ink);
  border-color: var(--action-bg); }
.tab-panel h3 { margin: 18px 0 4px; font-size: 15px; }
.tab-panel p { margin: 0; }

/* Barre d'achat mobile contextuelle, 70 px. */
.buy-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: flex; align-items: center; gap: 10px; height: var(--buybar-mobile);
  padding: 0 16px; border-top: 1px solid var(--line); background: var(--page); }
.buy-bar[hidden] { display: none; }
.buy-bar .button { flex: 1; }

/* ---- WF-05 : panier classique --------------------------------------------- */

.layout--split > .cart-aside { grid-column: 2; grid-row: 2 / span 99; display: grid; gap: 16px; }
.cart-lines { display: grid; gap: 14px; }
.line { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 14px;
  align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--raised); }
/* Le visuel suit sa colonne de grille. Avec une largeur fixe de 104 px, il
   débordait sur le texte dès que la colonne se resserrait : le nom du produit
   et le prix passaient sous l'image. */
.line-media { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 10px;
  background: repeating-linear-gradient(45deg, var(--ghost), var(--ghost) 7px, var(--line) 7px, var(--line) 14px); }
.line-body h2 { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.line-body p { margin: 2px 0; }
.line-price { font-size: 17px; font-weight: 700; color: var(--coral); }
/* Rupture après ajout : ligne visible, prix barré, raison écrite. */
.line--out { border-color: var(--bad); }
.line-reason { color: var(--bad); font-size: 13px; }
.line-actions { display: grid; gap: 8px; justify-items: end; }
/* MOBILE 390 — LIGNES EMPILÉES, TOTAL EN BARRE BASSE (WF-05).
   Visuel et texte sur une rangée, quantité et retrait sur la suivante :
   la quantité à gauche, le retrait à droite, rien ne se chevauche. */
/* La ligne repasse en deux colonnes dès que la colonne du panier se resserre —
   à 834 px elle ne fait que 378 px, le nom du produit y tenait sur 108 px. */
@media (max-width: 1023px) {
  .line { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .line-body h2 { font-size: 14px; line-height: 1.3; }
  .line-price { font-size: 16px; }
  .line-actions {
    grid-column: 1 / -1;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding-top: 10px; border-top: 1px solid var(--line);
  }
}

/* Sous 768 px, le total et la commande quittent le récapitulatif pour la
   barre basse — WF-05 : « LIGNES EMPILÉES, TOTAL EN BARRE BASSE ». */
@media (max-width: 767px) {
  .recap-total, .recap > .button.primary { display: none; }
}

/* Barre basse du panier : même langage que la barre d'achat de la fiche
   produit — 70 px, visible seulement là où le récapitulatif ne l'est plus. */
.cart-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; gap: 14px;
  height: 70px; padding: 0 16px;
  background: var(--page); border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .07);
}
.cart-bar[hidden] { display: none; }
.cart-bar-total { display: grid; gap: 1px; }
.cart-bar-total strong { font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.1; }
.cart-bar .button { margin-left: auto; flex: 0 0 auto; }
@media (min-width: 768px) { .cart-bar { display: none; } }
/* La barre ne doit pas masquer la fin de page. */
@media (max-width: 767px) { body[data-page="panier"] .layout { padding-bottom: 94px; } }

.express-note { display: grid; gap: 6px; justify-items: start; padding: 16px;
  border: 1px dashed var(--line-strong); border-radius: 14px; }
.express-note p { margin: 0; font-size: 14px; }
.promo-row { display: flex; gap: 8px; }
.promo-row input { flex: 1; min-width: 0; }

/* ---- WF-06 : checkout express --------------------------------------------- */

.checkout-host { position: fixed; inset: 0; z-index: 80; display: flex; justify-content: center;
  align-items: flex-start; padding: 24px; background: rgba(0, 0, 0, .5); overflow-y: auto; }
.checkout-host[hidden] { display: none; }
/* Modale 760 à 980 px en desktop, plein écran en mobile. Deux colonnes à partir de
   834px : formulaire à gauche, récapitulatif à droite, épinglé en haut (desktop) ou
   en bas (mobile, une seule colonne) — voir .checkout-side plus bas. */
.checkout-modal { position: relative; width: min(920px, 100%);
  margin: auto 0; padding: 20px 22px; border-radius: 16px; background: var(--page);
  border: 1px solid var(--line); box-shadow: var(--shadow); display: grid; gap: 16px;
  align-items: start; align-content: start; }
@media (min-width: 834px) {
  .checkout-modal { grid-template-columns: 1fr 300px; }
}
@media (max-width: 833px) {
  .checkout-host { padding: 0; }
  .checkout-modal { width: 100%; min-height: 100vh; margin: 0; border-radius: 0; }
}
.checkout-form { display: grid; gap: 16px; min-width: 0; }
.checkout-side { display: grid; gap: 16px; align-content: start; }
@media (min-width: 834px) {
  /* 44px dégage le bouton de fermeture (absolu, top:18px, 44px de haut) qui
     partagerait sinon le même coin que cette colonne. */
  .checkout-side { position: sticky; top: 0; margin-top: 44px; }
}
@media (max-width: 833px) {
  .checkout-side { position: sticky; bottom: 0; }
  /* .recap-total et le bouton d'action sont masqués sous 767px par une règle
     globale plus ancienne (voir plus bas, WF-05 « barre basse du panier ») —
     elle ne visait que le panier, mais .recap est un composant partagé et
     .checkout-side le réutilise tel quel. On les rétablit ici, seulement dans
     ce contexte : le panier garde son comportement d'origine. */
  .checkout-side .recap-total { display: flex; }
  .checkout-side .recap > .button.primary { display: inline-flex; }
  /* Le récapitulatif épinglé ne doit jamais recouvrir plus qu'une bande fine :
     sinon, dès que formulaire + récap dépassent la hauteur d'écran (accordéons
     ouverts sur petits mobiles), le sticky se colle au bas du viewport dès le
     premier rendu et masque des champs pas encore défilés. Le détail des
     lignes et la mention technique de route n'apportent rien à ce stade (les
     choix qu'ils résument sont déjà visibles, cochés, juste au-dessus) : on
     les retire de la bande épinglée plutôt que de les faire défiler en
     interne — seuls le titre, le total et le bouton restent, pour un
     bandeau compact au lieu d'un panneau complet. Sur les très petits écrans
     (moins de ~700px de haut), où le formulaire seul dépasse déjà la hauteur
     de l'écran, un recouvrement résiduel des derniers champs de paiement
     reste possible avant que l'utilisateur ne défile — limite géométrique du
     contenu actuel, pas éliminée par ce bandeau compact. */
  .checkout-side .recap-lines,
  .checkout-side .checkout-route { display: none; }
}
.checkout-banner { margin: 0; padding: 6px 12px; justify-self: start; border-radius: 999px;
  background: var(--ghost); }
.checkout-item { margin: 0; font-size: 16px; font-weight: 600; }
.checkout-block { padding-top: 16px; border-top: 1px solid var(--line); }
.checkout-block summary {
  display: flex; align-items: center; gap: 10px; margin: 0; font-size: 17px; font-weight: 700;
  cursor: pointer; list-style: none;
}
.checkout-block summary::-webkit-details-marker { display: none; }
.checkout-block summary::after { content: "⌄"; margin-left: auto; color: var(--muted); }
.checkout-block[open] summary::after { content: "⌃"; }
.checkout-block-body { display: grid; gap: 10px; padding-top: 10px; }
.choice-label { font-size: 14px; }
.momo-zone { display: grid; gap: 10px; margin-top: 6px; padding: 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--ghost); }
.momo-ops { display: flex; flex-wrap: wrap; gap: 8px; }
.momo-op { padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--raised); font-size: 13.5px; }
.momo-state { margin: 0; }
.checkout-route { margin: 0; justify-self: end; }
.checkout-confirmed { display: grid; gap: 10px; justify-items: start; }
.checkout-confirmed h2 { margin: 0; font-size: 26px; }
.checkout-confirmed p { margin: 0; }
.checkout-confirmed-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.layout--tunnel { min-height: 40vh; }

/* ---- WF-07 : confirmation de commande ------------------------------------- */

.order-head { display: grid; gap: 8px; justify-items: start; }
.order-head h1 { margin: 0; font-size: 27px; font-weight: 700; }
/* La référence est l'information la plus lourde de la page. */
.order-head .reference .mono { font-size: 20px; letter-spacing: .1em; color: var(--ink); }
.order-head .lead { margin: 0; color: var(--muted); }
.order-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.product-grid--recos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 833px) { .product-grid--recos { grid-template-columns: 1fr; } }

/* ---- Galerie d'états et sommaire ------------------------------------------ */

.voir-aussi { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.voir-aussi a { color: var(--accent); }

.etats-groups { display: grid; gap: 40px; }
.etats-group h2 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; font-size: 20px; }
.etats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.etat-card { display: grid; gap: 8px; }
.etat-thumb { aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line);
  border-radius: 12px; background: var(--raised); }
.etat-thumb iframe { border: 0; transform-origin: top left; pointer-events: none; }
/* Les états mobiles sont rendus à 390, comme sur la planche. */
.etat-thumb[data-largeur="390"] { aspect-ratio: 390 / 700; max-width: 250px; }
.etat-label { margin: 0; }

.sommaire { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: n; }
.sommaire a { display: flex; align-items: baseline; gap: 14px; padding: 14px 18px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--raised); font-size: 15px; }

/* ---- États secondaires ---------------------------------------------------- */

.header--forced-sticky .utility-bar { display: none; }
.header--forced-sticky .header-bar { height: var(--header-sticky); }
.header--forced-sticky .category-rail { display: none; }

/* Bande horizontale : réservée aux trois fiches courtes du mobile et à la
   sélection. Le catalogue reste une grille verticale. */
.product-grid--bande { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.product-grid--bande .carte { flex: 0 0 62%; }

.options-modal, .feuille { position: relative; width: min(520px, 100%); margin: auto 0;
  padding: 26px; border-radius: 20px; background: var(--page); box-shadow: var(--shadow);
  display: grid; gap: 14px; }
.options-modal h2 { margin: 0; font-size: 20px; }
.option-group { display: grid; gap: 8px; }
.option-group h3 { margin: 0; }
.option-row { display: flex; flex-wrap: wrap; gap: 8px; }
.option-total { display: flex; justify-content: space-between; align-items: baseline;
  margin: 4px 0 0; padding-top: 12px; border-top: 1px solid var(--line-strong); font-size: 18px; }

.feuille-host { align-items: flex-end; padding: 0; }
.feuille { width: 100%; margin: 0; border-radius: 20px 20px 0 0; }
.feuille .selection-panel { position: static; border: 0; padding: 0; }

.line--changed { border-color: var(--warn); }
.line--changed .line-price s { color: var(--muted); margin-right: 8px; }

.alerte { display: grid; gap: 10px; margin-top: 14px; padding: 14px;
  border: 1px solid var(--warn); border-radius: 12px; }
.alerte--erreur { border-color: var(--bad); }
.alerte p { margin: 0; font-size: 13.5px; }
.alerte-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* La barre d'achat remonte au-dessus du clavier logiciel. */
.buy-bar--clavier { bottom: 280px; }
body.clavier-ouvert::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0;
  height: 280px; background: var(--ghost); border-top: 1px solid var(--line-strong); z-index: 44; }

/* ---- Panneaux et menus de l'en-tête --------------------------------------- */

.panneau-host { align-items: flex-start; }
.panneau { position: relative; width: min(520px, 100%); margin-top: 8vh;
  padding: 26px; border-radius: 18px; background: var(--page); box-shadow: var(--shadow);
  display: grid; gap: 12px; }
.panneau h2 { margin: 0; padding-right: 44px; font-size: 20px; }
.panneau-liens { display: grid; gap: 6px; }
.panneau-liens a, .menu-item { display: block; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--raised); font-size: 14px; text-align: left; }
.menu-item[aria-current="true"] { border-color: var(--action-bg); font-weight: 600; }

.catalog-tools { position: relative; }
.menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
  display: grid; gap: 4px; min-width: 190px; padding: 6px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--page);
  box-shadow: var(--shadow); }

.catalog-tools .count[hidden] { display: none; }
.active-filters[hidden] { display: none; }

/* ---- Vignettes de la fiche produit ---------------------------------------- */

.product-thumbs { display: flex; gap: 10px; margin-top: 12px;
  /* bande horizontale : elle défile au lieu d'élargir la page sur petit écran */
  overflow-x: auto; scrollbar-width: none; }
.product-thumbs::-webkit-scrollbar { display: none; }
.thumb { flex: 0 0 auto; }
.thumb { width: 74px; aspect-ratio: 1 / 1; border: 1px solid var(--line); border-radius: 10px;
  background: repeating-linear-gradient(45deg, var(--ghost), var(--ghost) 6px, var(--line) 6px, var(--line) 12px); }
.thumb[aria-pressed="true"] { border-color: var(--action-bg); border-width: 2px; }

/* ---- Emplacements d'image ------------------------------------------------- */

/* L'image se superpose à l'aplat rayé du conteneur ; si le fichier n'existe
   pas encore, `onerror` la retire et l'aplat reste visible. */
.media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.carte-visuel, .heros-photo, .product-shot, .cover-art, .console-art, .offre-vignette,
.line-media, .map, .plan, .thumb { position: relative; overflow: hidden; }
.thumb .media { border-radius: inherit; }


/* ---- Boutons du catalogue, valeurs de WF-02 ------------------------------- */

.btn-sombre, .btn-clair {
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 17px; border-radius: 999px;
  font-size: 13px; white-space: nowrap;
}
.btn-sombre { border: 0; background: var(--ink); color: var(--page); font-weight: 600; }
.btn-clair { border: 1px solid var(--line-strong); background: var(--raised); color: var(--text); }
.btn-clair--large { height: 46px; padding: 0 26px; font-size: 13.5px; font-weight: 600; }
.btn-sombre .compte {
  font-family: var(--font-mono); font-size: 11px; opacity: .85;
}