/* =====================================================================
   Bloc démo iPad des pages SEO (27/09/2026)
   Règles COPIÉES de css/offre.css (dev-tab, qs-*, di-*), sans modifier
   offre.css : /offre reste intacte. Le script est js/offre-demo.js, chargé
   tel quel. Les jetons de /offre sont redéclarés ici, limités au bloc.
   ===================================================================== */
.seo-demo {
    --line: rgba(28,22,17,.1);
    --fs-s: 1rem; --r-s: 12px; --r-m: 20px; --r-l: 32px; --r-pill: 999px;
    --sh-1: 0 0 0 1px rgba(28,22,17,.06), 0 1px 2px rgba(28,22,17,.05);
    --sh-3: 0 40px 80px -40px rgba(28,22,17,.35);
    --btn-h-s: 40px;
    --ease: cubic-bezier(.2,.8,.2,1);
}

/* --- copie de offre.css, l.250 à 253 --- */
/* ---------- Appareils CSS : même famille que l'iPad 3D (bord fin) ---------- */
.dev-tab { position: relative; background: #2A2622; padding: 1.6%; border-radius: 4.2% / 5.6%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), var(--sh-3); }
.dev-tab .lp-ipad-screen { border-radius: 2.6% / 3.5%; }
.dev-tab--xl { max-width: 720px; margin: 0 auto; }

/* --- copie de offre.css, l.256 à 280 --- */
/* Argument 1 : l'écran répond à la question choisie (fondu enchaîné). */
.qs-screen img { opacity: 0; animation: none; transition: opacity .45s var(--ease); }
.qs-screen img.is-on { opacity: 1; }
.qs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 22px; max-width: 760px; }
.qs-b {
    position: relative; overflow: hidden; display: inline-flex; align-items: center; min-height: var(--btn-h-s); padding: 0 18px; border-radius: var(--r-pill);
    border: 1px solid var(--line); background: transparent; color: var(--zinc); font: inherit; font-size: var(--fs-s); font-weight: 500; cursor: pointer;
    transition: background-color .25s, color .25s, border-color .25s, transform .2s var(--ease);
}
.qs-b[aria-pressed="true"] { background: #fff; border-color: rgba(186,74,44,.45); color: var(--sienna); box-shadow: var(--sh-1); }
/* Rotation automatique : un filet se remplit sous la question en cours. */
.qs-b::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 6px; height: 2px; border-radius: 2px; background: rgba(186,74,44,.35); transform: scaleX(0); transform-origin: left; }
/* Le filet n'est plus une animation : il suit la lecture de la vidéo. */
.qs-b[aria-pressed="true"]::after { transform: scaleX(var(--qs-p, 0)); }
.qs-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #F5F0E9; }
.qs-b:active { transform: scale(.97); }
.qs-b:focus-visible { outline: 3px solid rgba(186,74,44,.35); outline-offset: 2px; }
@media (hover: hover) { .qs-b[aria-pressed="false"]:hover { color: var(--espresso); border-color: rgba(28,22,17,.25); } }
@media (max-width: 560px) {
    /* Deux questions par ligne : la grille évite les lignes orphelines. */
    .qs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
    .qs-b { justify-content: center; min-height: 48px; padding: 9px 10px 11px; font-size: .82rem; line-height: 1.25; text-align: center; }
    .qs-b::after { left: 14px; right: 14px; bottom: 5px; }
}
@media (prefers-reduced-motion: reduce) { .qs-b::after { display: none; } }

/* --- copie de offre.css, l.749 à 798 : scène dessinée à la taille réelle
   du guide (1180 × 820), réduite par --k. --- */


/* Écran au ratio du guide (1180 × 820), pas au 4:3 de la vidéo. */
.di-screen { position: relative; aspect-ratio: 1180 / 820; overflow: hidden; background: #F5F0E8; border-radius: 2.6% / 3.7%; }
.di-stage { position: absolute; left: 0; top: 0; width: 1180px; height: 820px; transform-origin: 0 0; transform: scale(var(--k, .5)); }

.di-screens { position: absolute; inset: 0; transition: filter .45s var(--ease); }
.di-screens.is-veiled { filter: blur(9px) saturate(.9); }
.di-s { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.di-s.is-on { opacity: 1; visibility: visible; }
.di-s > img.di-full { position: absolute; inset: 0; width: 1180px; height: 820px; display: block; }

/* Équipements : la vraie vidéo du tuto se pose sur la carte du guide. */
.di-hero { position: absolute; left: 483.6px; top: 114px; width: 686.4px; height: 429px; border-radius: 16px; overflow: hidden; opacity: 0; background: #1c1611; }
.di-hero video { width: 100%; height: 100%; object-fit: cover; display: block; }
.di-hero::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(to top, rgba(0,0,0,.55), transparent); pointer-events: none; }
.di-hero-cap { position: absolute; left: 24px; bottom: 18px; z-index: 1; color: #fff; }
.di-hero-cap small { display: block; font: 600 11px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; opacity: .9; margin-bottom: 7px; }
.di-hero-cap span { font-family: var(--font-display); font-size: 21px; }

/* Services : panneau photo fixe à gauche, colonne qui défile à droite. */
.di-left { position: absolute; left: 0; top: 0; width: 452px; height: 820px; display: block; }
.di-col { position: absolute; left: 452px; top: 0; width: 728px; height: 820px; overflow: hidden; }
.di-col img { width: 728px; max-width: none; height: auto; display: block; will-change: transform; }
/* Onglet Partenaires locaux : sa liste se pose sur celle des services de l'hôte. */
.di-col img + img { position: absolute; left: 0; top: 0; visibility: hidden; }
.di-col img + img.is-on { visibility: visible; }
/* Le bouton Accueil flotte au-dessus de la liste, comme dans le guide. */
.di-pill { position: absolute; left: 529px; top: 747px; width: 122px; height: 42px; border-radius: 21px; box-shadow: 0 6px 18px -6px rgba(28,22,17,.28); }

/* Appui sur une tuile : léger voile arrondi. */
.di-press { position: absolute; border-radius: var(--r-m); background: rgba(28,22,17,.07); opacity: 0; pointer-events: none; }

/* Modale (paiement, QR code) : les vraies cartes du guide. */
.di-veil { position: absolute; inset: 0; background: rgba(40,34,28,.32); opacity: 0; pointer-events: none; }
.di-card { position: absolute; left: 50%; top: 50%; opacity: 0; transform: translate(-50%, -50%); pointer-events: none; }
.di-card img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 32px; box-shadow: 0 30px 80px -20px rgba(28,22,17,.45); display: block; }
.di-card img + img { opacity: 0; }
/* style.css impose img { max-width: 100% } : dans .di-card (conteneur absolu sans
   largeur) les cartes s'écrasaient à 0 px. Elles gardent leur taille d'attribut. */
.di-card img { max-width: none; }

/* Le doigt : pastille façon indicateur tactile iOS. */
.di-finger { position: absolute; left: 0; top: 0; width: 58px; height: 58px; margin: -29px 0 0 -29px; opacity: 0; pointer-events: none; z-index: 5; }
.di-finger i { position: absolute; inset: 0; border-radius: 50%; background: rgba(58,48,40,.34); box-shadow: inset 0 0 0 2.5px rgba(255,255,255,.95), 0 0 0 1px rgba(28,22,17,.18), 0 8px 22px rgba(28,22,17,.3); backdrop-filter: blur(3px); }
.di-finger b { position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(255,255,255,.95); box-shadow: 0 0 0 1px rgba(28,22,17,.15); opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    .di-screens { transition: none; }
}