/*
 * Page de démonstration azurstay.ma/demo (01/10/2026) — identité Stitch
 * (jetons de stitch.css). La fiche A4 (794 × 1123 px à l'écran = 210 × 297 mm)
 * est affichée réduite dans un cadre : `--echelle` est calculée par demo.js à
 * la largeur réelle du cadre (repli CSS ci-dessous sans script). Le cadre
 * téléphone reprend celui de l'aperçu de l'espace propriétaire.
 */

/* ===== Accroche ===== */
.dm-hero { padding-block: 3rem 3.5rem; background: linear-gradient(180deg, var(--st-sable, #f6f0e6) 0%, var(--st-surface) 100%); }
@media (min-width: 1024px) { .dm-hero { padding-block: 4.5rem 5rem; } }
.dm-hero__texte { display: grid; gap: 1.25rem; justify-items: start; }
.dm-hero__titre { margin: 0; }
.dm-hero__intro { margin: 0; max-width: 44rem; }
.dm-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; padding-top: .5rem; }
.dm-bouton-contour { background: #fff; color: var(--st-primaire-conteneur); border: 1px solid var(--st-contour-variant); }
.dm-bouton-contour:hover { background: var(--st-conteneur-bas); }

/* ===== Sections ===== */
.dm-section { padding-block: 4rem; border-bottom: 1px solid rgba(196, 198, 205, .35); }
@media (min-width: 1024px) { .dm-section { padding-block: 5rem; } }

/* ===== Le duo : fiche A4 + guide sur téléphone ===== */
.dm-duo { background: var(--st-conteneur-bas); }
.dm-duo__grille { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 1024px) { .dm-duo__grille { grid-template-columns: minmax(0, 1fr) 414px; gap: 3rem; } }
.dm-fiche, .dm-guide { margin: 0; display: grid; gap: .9rem; justify-items: center; }
.dm-etiquette { display: flex; align-items: center; gap: .45rem; justify-self: start; font: 600 13px/20px var(--st-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--st-texte-variant); }
.dm-etiquette .material-symbols-outlined { font-size: 1.15rem; color: var(--st-secondaire); }
@media (min-width: 1024px) { .dm-guide .dm-etiquette { justify-self: center; } }

/* La feuille réduite : boîte au format A4, iframe 794 × 1123 mise à l'échelle. */
.dm-echelle { --echelle: .4; position: relative; width: 100%; aspect-ratio: 210 / 297; overflow: hidden; background: #fff; }
.dm-echelle iframe { position: absolute; top: 0; left: 0; width: 794px; height: 1123px; border: 0; transform-origin: 0 0; transform: scale(var(--echelle)); }
.dm-fiche__cadre { max-width: 34rem; border-radius: var(--st-rayon-md); box-shadow: 0 20px 50px rgba(13, 35, 58, .18); }
.dm-lien { display: inline-flex; align-items: center; gap: .45rem; font: 500 14px/22px var(--st-sans); color: var(--st-primaire); text-decoration: underline; text-underline-offset: 3px; text-align: center; }
.dm-lien .material-symbols-outlined { font-size: 1.15rem; text-decoration: none; }

/* Le téléphone : seulement à partir de 1024 px (demo.js n'y charge le guide
   qu'à cette largeur) ; en dessous, un bouton ouvre le guide. */
.dm-telephone { display: none; }
.dm-aide { margin: 0; text-align: center; font-size: 13px; line-height: 20px; color: var(--st-texte-variant); }
.dm-aide--cadre { display: none; }
@media (min-width: 1024px) {
  .dm-telephone {
    display: block; inline-size: 414px; block-size: min(800px, calc(100vh - 6rem)); min-block-size: 560px;
    border: 12px solid #1c1c19; border-radius: 3rem; overflow: hidden; background: #fff;
    box-shadow: 0 24px 48px -12px rgba(28, 28, 25, .25), 0 2px 6px rgba(28, 28, 25, .08);
  }
  .dm-telephone iframe { display: block; inline-size: 100%; block-size: 100%; border: 0; }
  .dm-aide--cadre { display: block; }
  .dm-ouvrir, .dm-aide--bouton { display: none; }
}

/* ===== Sélecteur des 6 modèles ===== */
.dm-modeles { margin-top: 3rem; }
.dm-modeles__titre { margin: 0 0 1rem; font: 500 20px/28px var(--st-serif); color: var(--st-primaire); text-align: center; }
.dm-modeles ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .dm-modeles ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .dm-modeles ul { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.dm-modele { display: grid; gap: .6rem; padding: .6rem; border-radius: var(--st-rayon-md); border: 2px solid transparent; background: var(--st-surface); color: inherit; text-decoration: none; box-shadow: 0 1px 2px rgba(13, 35, 58, .06); }
.dm-modele:hover { border-color: var(--st-contour-variant); }
.dm-modele[aria-current="true"] { border-color: var(--st-primaire-conteneur); }
.dm-modele:focus-visible { outline: 3px solid var(--st-primaire-conteneur); outline-offset: 2px; }
.dm-modele__apercu { --echelle: .15; display: block; border-radius: var(--st-rayon-sm); }
.dm-modele__apercu iframe { pointer-events: none; }
.dm-modele__nom { display: grid; gap: .1rem; font: 500 13px/18px var(--st-sans); color: var(--st-primaire); }
.dm-modele__numero { font: 600 11px/14px var(--st-sans); letter-spacing: .08em; color: var(--st-texte-variant); }
.dm-indisponible { margin: 0 auto; max-width: 36rem; padding: 1.25rem; border-radius: var(--st-rayon-md); background: var(--st-surface); text-align: center; }

/* ===== Ce que montre la démo ===== */
.dm-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .dm-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dm-points li { padding: 1.5rem; border-radius: var(--st-rayon-lg); background: var(--st-conteneur-bas); display: grid; gap: .5rem; align-content: start; }
.dm-points .material-symbols-outlined { color: var(--st-secondaire); font-size: 1.75rem; }
.dm-points h3 { margin: 0; font: 500 20px/28px var(--st-serif); color: var(--st-primaire); }
.dm-points p { margin: 0; color: var(--st-texte-variant); line-height: 1.6; }

/* ===== Appel final (même bandeau que la home) ===== */
.dm-final { padding-block: 5rem; background: var(--st-primaire-conteneur); color: #fff; text-align: center; }
.dm-final .st-conteneur { display: grid; justify-items: center; gap: 1.5rem; }
.dm-final .st-surtitre { color: var(--st-secondaire-fixe); }
.dm-final h2 { margin: 0; max-width: 40rem; font: 400 30px/38px var(--st-serif); letter-spacing: -.01em; }
@media (min-width: 1024px) { .dm-final h2 { font-size: 44px; line-height: 52px; } }
.dm-final p { margin: 0; max-width: 36rem; color: var(--st-primaire-fixe-dim); font-size: 16px; line-height: 26px; }
.dm-final__actions { display: flex; flex-direction: column; gap: 1rem; width: 100%; padding-top: .5rem; }
@media (min-width: 640px) { .dm-final__actions { flex-direction: row; justify-content: center; width: auto; } }
.dm-final p.dm-final__note { font-size: 13px; line-height: 20px; }
.dm-bouton-nuit { background: var(--st-primaire-survol); color: #fff; border: 1px solid rgba(255, 255, 255, .2); }
.dm-bouton-nuit:hover { background: rgba(255, 255, 255, .1); }