/* ============================================================
   MARY — PAGE DÉMO
   Réservation « sans scroll » : tout tient dans un seul écran (100dvh).
   Colonne gauche = promesse + CTA ; colonne droite = ce que vous verrez.
   ============================================================ */

:root {
    --demo-black: #1a1a1a;
    --demo-text-secondary: #5a5a5e;
    --demo-text-muted: #86868b;
    --demo-bg: #ffffff;
    --demo-border: rgba(0, 0, 0, 0.06);
    --demo-green: #00a86b;
    --demo-green-dark: #047857;
}

.demo-screen {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    font-feature-settings: 'cv11', 'ss03', 'ss01';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Occupe l'écran entier, contenu centré, pas de scroll. Le padding haut
       dégage la barre de navigation flottante (fixed, top:24px). */
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 104px 32px 40px;
    box-sizing: border-box;
    /* Même fond que les 7 autres pages du site (home, features, pricing…) :
       une lueur au centre haut, une ombre au pied. La page démo portait seule
       un halo vert décentré à 88% 12%, plus dense — un coin qui s'allume
       derrière un encadré, la signature d'une page d'atterrissage générique. */
    background:
        radial-gradient(ellipse 50% 40% at 50% 0%, rgba(0, 168, 107, 0.04) 0%, transparent 70%),
        radial-gradient(ellipse 80% 50% at 50% 100%, rgba(0, 0, 0, 0.02) 0%, transparent 70%),
        var(--demo-bg);
}

.demo-screen-inner {
    width: 100%;
    max-width: 1120px;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 64px;
}

/* ---------- Colonne gauche : promesse + réservation ---------- */
.demo-lede {
    animation: demoIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.demo-eyebrow {
    font-size: 13px;
    color: var(--demo-green);
    font-weight: 500;
    letter-spacing: 0.02em;
    margin: 0 0 16px;
}
.demo-lede h1 {
    font-size: clamp(40px, 5.2vw, 60px);
    line-height: 1.04;
    letter-spacing: -0.03em;
    color: var(--demo-black);
    margin: 0 0 22px;
    font-weight: 600;
}
.demo-lede .em {
    color: var(--demo-green);
}
.demo-hero-sub {
    font-size: clamp(16px, 1.6vw, 19px);
    line-height: 1.55;
    color: var(--demo-text-secondary);
    max-width: 480px;
    margin: 0 0 32px;
}
.demo-hero-note {
    font-size: 13.5px;
    color: var(--demo-text-muted);
    margin: 18px 0 0;
}

/* ---------- Bouton ---------- */
.demo-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    font-family: inherit;
    transition: background 0.25s ease, transform 0.25s ease;
}
.demo-btn:hover { transform: translateY(-2px); }
.demo-btn-dark { background: var(--demo-black); color: #ffffff; }
.demo-btn-dark:hover { background: var(--demo-green); }

/* ---------- Colonne droite : l'ordre du jour ----------
   Pas d'aplat gris, pas de bord arrondi : l'ordre du jour tient sur ses filets,
   comme les chapitres des autres pages. Un rectangle gris posé sur du blanc ne
   dit rien de plus que le texte qu'il contient, et se lit comme un encadré de
   page d'atterrissage produite à la chaîne. */
.demo-panel {
    animation: demoIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.08s both;
}
.demo-panel-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--demo-text-muted);
    margin: 0 0 16px;
}
/* ---------- Ordre du jour : une colonne de minutes, puis de la prose ----------
   Pas de pastille colorée ni d'icône : la durée est l'information, et elle se
   lit en colonne. Les chiffres sont tabulaires pour que « 5 » et « 15 » se
   calent l'un sous l'autre. */
.demo-agenda {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.demo-agenda li {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 13px 0;
    border-top: 1px solid var(--demo-border);
}
/* Le premier filet garde son trait : sans la carte pour délimiter le bloc,
   c'est lui qui referme le titre sur la liste. */
.demo-agenda-time {
    flex: 0 0 46px;
    font-size: 12.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--demo-text-muted);
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.demo-agenda-txt {
    font-size: 14px;
    line-height: 1.55;
    color: var(--demo-text-secondary);
}
.demo-agenda-txt strong {
    font-weight: 600;
    color: var(--demo-black);
    letter-spacing: -0.01em;
}
.demo-panel-alt {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--demo-text-muted);
    margin: 22px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--demo-border);
}
.demo-panel-alt a {
    color: var(--demo-green);
    text-decoration: none;
    font-weight: 500;
}
.demo-panel-alt a:hover { text-decoration: underline; }

@keyframes demoIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .demo-lede, .demo-panel { animation: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
    .demo-screen {
        /* Sous 960px on repasse en colonne : on autorise le flux naturel
           mais on garde tout compact. Le padding haut dégage la barre de
           navigation flottante (fixed) qui, sinon, recouvre le sous-titre. */
        min-height: 0;
        padding: 128px 20px 48px;
    }
    .demo-screen-inner {
        grid-template-columns: 1fr;
        gap: 32px;
        max-width: 560px;
    }
    .demo-btn-dark { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
    /* La colonne de minutes passe au-dessus du texte : à cette largeur, 46 px
       réservés à gauche laissent des lignes de trois mots. */
    .demo-agenda li { flex-direction: column; gap: 4px; }
    .demo-agenda-time { flex: none; }
}