/* =============================================================
   ARGOS — section #boutiques (landing FR + EN seulement), 07/10/2026
   Trois boutiques de démonstration dont les fiches ont été générées, relues et corrigées par les agents Argos.
   Chaque carte = un lien vers la boutique, ouverte dans une fenêtre par-dessus la landing (fin de fichier, .dm-modal) ;
   la capture vit dans un cadre de navigateur.
   Bureau : trois colonnes, le survol fait défiler la capture de haut en bas (comme si on parcourait la page).
   ≤ 760 px : carrousel horizontal au pouce (scroll-snap), capture téléphone (<picture>, <slug>-m.webp).
   Jetons et classes communes (.rv, .spot, .eyebrow, .sec-head, .split-h) : style.css, inchangé.
   ============================================================= */
.demos { overflow: hidden; }
.demos .wrap { position: relative; z-index: 1; }
.demos .sec-head { margin-bottom: 56px; }
/* bureau : la partie dorée du titre sur sa propre ligne (« Voyez ce que vaut Argos / sur le terrain. ») */
@media (min-width: 641px) { .demos .split-h .grad { display: block; } }

.dm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; }
.dm-grid > li { display: flex; min-width: 0; }   /* l'apparition au scroll (.rv) est portée par le li, le survol par la carte */

.dm-card { position: relative; display: flex; flex-direction: column; width: 100%; padding: 10px; border-radius: var(--r-xl);
  border: 1px solid var(--border); background: rgba(17,17,20,.7); box-shadow: var(--shadow-card);
  transition: transform .5s var(--spring, var(--ease-out)), border-color .4s ease, box-shadow .5s ease; }

/* le cadre de navigateur qui accueille la capture */
.dm-frame { position: relative; z-index: 1; border-radius: 14px; overflow: hidden; background: #050506; box-shadow: 0 0 0 1px rgba(255,255,255,.06); }
.dm-bar { display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 12px; background: #16161a; border-bottom: 1px solid rgba(255,255,255,.05); }
.dm-dots { display: flex; gap: 5px; flex: none; }
.dm-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.12); }
.dm-url { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; height: 18px; padding: 0 10px; border-radius: 6px;
  background: rgba(255,255,255,.045); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0; color: var(--fg-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-url span { overflow: hidden; text-overflow: ellipsis; }
/* « en ligne » : un point vert qui respire, seul élément vivant au repos */
.dm-live { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(48,209,88,.5); animation: dmLive 2.6s ease-out infinite; }
@keyframes dmLive { 0% { box-shadow: 0 0 0 0 rgba(48,209,88,.45); } 70%, 100% { box-shadow: 0 0 0 6px rgba(48,209,88,0); } }
.dm-bar::after { content: ""; flex: none; width: 31px; }   /* équilibre les pastilles : l'adresse reste centrée */

.dm-shot { position: relative; aspect-ratio: 16 / 10; overflow: hidden; container-type: size; background: #0b0b0d; }
.dm-shot img { width: 100%; height: auto; max-width: none; transform: translateY(0);
  transition: transform 1.1s cubic-bezier(.4,0,.2,1); will-change: auto; }
.dm-shot::after { content: ""; position: absolute; inset: auto 0 0; height: 34%; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,10,12,0), rgba(10,10,12,.28)); transition: opacity .5s ease; }

/* le texte de la carte */
.dm-tx { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; padding: 18px 10px 6px; }
.dm-tx h3 { font-size: 21px; letter-spacing: -.03em; }
.dm-tx p { margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--fg-muted); }
.dm-tx p { margin-bottom: 18px; }
.dm-go { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); }
.dm-n { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0; color: var(--accent); }
.dm-open { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; color: var(--fg); }
.dm-open svg { flex: none; transition: transform .35s var(--spring, var(--ease-out)); }


/* survol (souris) et focus clavier : la carte se soulève, la capture défile jusqu'en bas de l'image */
.dm-card:focus-visible { outline-offset: 4px; border-radius: var(--r-xl); }
@media (hover: hover) and (pointer: fine) {
  .dm-card:hover, .dm-card:focus-visible { transform: translateY(-6px); border-color: rgba(230,192,104,.32);
    box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 30px 60px -24px rgba(0,0,0,.75), 0 0 0 1px rgba(230,192,104,.08); }
  .dm-card:hover .dm-shot img, .dm-card:focus-visible .dm-shot img { transform: translateY(calc(-100% + 100cqh)); transition: transform 6.5s cubic-bezier(.45,.05,.35,1) .15s; }
  .dm-card:hover .dm-shot::after, .dm-card:focus-visible .dm-shot::after { opacity: 0; }
  .dm-card:hover .dm-open svg, .dm-card:focus-visible .dm-open svg { transform: translateX(3px); }
}

/* écrans moyens : trois colonnes plus serrées */
@media (max-width: 1080px) {
  .dm-grid { gap: 14px; }
  .dm-tx { padding: 16px 6px 4px; }
  .dm-tx h3 { font-size: 19px; }
}

/* ≤ 760 px : carrousel au pouce, une carte et le bord de la suivante ; capture téléphone (portrait) */
@media (max-width: 760px) {
  .demos .sec-head { margin-bottom: 36px; }
  .dm-grid { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--wrap-px, 24px)); padding: 4px var(--wrap-px, 24px) 18px; scroll-padding-inline: var(--wrap-px, 24px);
    scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .dm-grid::-webkit-scrollbar { display: none; }
  .dm-grid > li { flex: 0 0 min(78%, 320px); scroll-snap-align: start; }
  .dm-shot { aspect-ratio: 390 / 680; }
  .dm-shot::after { display: none; }
}
@media (max-width: 640px) {
  .demos .wrap { --wrap-px: 16px; }
}

/* ---------- fenêtre de boutique (07/10 après-midi) : <dialog> construit par demos.js ----------
   Bureau : une fenêtre centrée, 24 px de marge, qui monte légèrement en apparaissant ; voile sombre et flou derrière.
   ≤ 760 px : une feuille qui monte du bas et prend tout l'écran (10 px de voile en haut, sous l'encoche).
   Pendant l'ouverture la page ne défile plus (html.dm-lock) ; la largeur de la barre de défilement est compensée. */
html.dm-lock, html.dm-lock body { overflow: hidden; }
html.dm-lock body { padding-right: var(--dm-sbw, 0px); }
.dm-modal { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 24px;
  border: 0; overflow: hidden; overscroll-behavior: contain; color: var(--fg);
  background: rgba(6,6,8,0); -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px);
  transition: background-color .35s ease, backdrop-filter .35s ease, -webkit-backdrop-filter .35s ease; }
.dm-modal[open] { display: grid; place-items: center; }
.dm-modal::backdrop { background: transparent; }
.dm-modal.is-on { background: rgba(6,6,8,.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

.dm-win { display: flex; flex-direction: column; width: min(1440px, 100%); height: 100%; border-radius: 18px; overflow: hidden;
  background: #0b0b0d; box-shadow: 0 0 0 1px rgba(255,255,255,.09), 0 50px 120px -30px rgba(0,0,0,.85);
  opacity: 0; transform: translateY(18px) scale(.985); transition: opacity .28s ease, transform .5s var(--ease-out); }
.dm-modal.is-on .dm-win { opacity: 1; transform: none; }

.dm-head { position: relative; flex: none; display: flex; align-items: center; justify-content: center; height: 48px; padding: 0 60px;
  background: #141417; border-bottom: 1px solid rgba(255,255,255,.06); }
.dm-head h2 { font-size: 15px; font-weight: 500; letter-spacing: -.01em; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-x { position: absolute; top: 50%; right: 8px; width: 34px; height: 34px; margin-top: -17px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--fg-muted); cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.dm-x:hover { background: rgba(255,255,255,.08); color: var(--fg); }
.dm-x:focus { outline: none; }
.dm-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.dm-view { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #0b0b0d; }
.dm-ph { position: absolute; top: 0; left: 0; width: 100%; height: auto; max-width: none; pointer-events: none; }
.dm-view iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent;
  opacity: 0; transition: opacity .35s ease; }
.dm-modal.is-loaded .dm-view iframe { opacity: 1; }

@media (max-width: 760px) {
  .dm-modal { padding: calc(env(safe-area-inset-top, 0px) + 10px) 0 0; }
  .dm-modal[open] { place-items: end stretch; }
  .dm-win { width: 100%; border-radius: 16px 16px 0 0; opacity: 1; transform: translateY(100%); transition: transform .45s var(--ease-out); }
  .dm-head { height: 52px; }
  .dm-x { right: 10px; width: 38px; height: 38px; margin-top: -19px; }
}

@media (prefers-reduced-motion: reduce) {
  .dm-modal, .dm-win, .dm-view iframe { transition: none !important; }
  .dm-live { animation: none; }
  .dm-card, .dm-shot img, .dm-open svg { transition: none !important; }
  .dm-card:hover, .dm-card:focus-visible { transform: none; }
  .dm-card:hover .dm-shot img, .dm-card:focus-visible .dm-shot img { transform: none; }
}