/* ==========================================================================
   Démo produit animée du hero (resources/views/partials/hero-demo.blade.php)
   Vraies captures du dashboard (2160 × 1350 px, barre latérale 451 px).
   Tout est dimensionné en cqw (largeur de la démo) : le curseur reste calé
   sur les captures à toutes les tailles d'écran. Une boucle de 60,5 s en
   5 chapitres, repris par les onglets du bas : Tableau de bord → Plan de
   taggage (Studio sur /tarifs puis /contact) → Funnel (saisie) → Visiteur
   (formulaire envoyé) → Résultats. Changement de page : fondu + barre de
   chargement ; changement dans une même page : instantané.
   ========================================================================== */

/* Hero de l'accueil : fond navy (plus de vidéo), démo sous le texte.
   Le fond s'arrête vers le milieu de la démo, qui déborde sur la section
   suivante (hauteur de la démo ≈ 0,66 × sa largeur, fond coupé à ~40 %). */
.hero--demo {
    --hd-w: min(100vw - 100px, 1040px);
    min-height: 0;
    padding-top: clamp(4.5rem, 9vh, 6rem);
    padding-bottom: 0;
    background: transparent;
}

.hero--demo::before {
    content: "";
    position: absolute;
    inset: 0 0 calc(var(--hd-w) * .26);
    border-radius: inherit;
    background:
        radial-gradient(ellipse 70% 50% at 50% 100%, color-mix(in srgb, var(--y-orange) 22%, transparent), transparent 70%),
        var(--y-navy);
}

/* La démo déborde déjà sous le fond : pas d'espace en plus avant la section suivante */
.hero--demo {
    margin-bottom: 0;
}

.hero--demo + .home-services-section {
    padding-top: 4.5rem;
}

/* Fond animé (public/js/hero-flow.js) : calé sur le fond indigo, sous le texte. */
.hero-flow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
}

.hero-flow canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.hero--demo .hero__content {
    position: relative;
    z-index: 1;
    transform: none;
}

/* Sans bouton entre la description et la vidéo : pas de grand vide. */
.hero--demo .hero__subtitle:last-child {
    margin-bottom: 0;
}

.hd {
    --hd-dur: 60.5s;
    container-type: inline-size;
    position: relative;
    z-index: 2;
    width: min(100%, 1040px);
    margin: 2.25rem auto 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 14px;
    background: var(--y-cream);
    box-shadow: 0 24px 60px color-mix(in srgb, var(--y-navy) 22%, transparent);
}

.hd *,
.hd *::before {
    animation-duration: var(--hd-dur);
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}

.hd.is-paused * {
    animation-play-state: paused;
}

/* Barre du navigateur */
.hd__bar {
    display: flex;
    align-items: center;
    gap: .6cqw;
    height: 3.2cqw;
    padding: 0 1.4cqw;
    border-bottom: 1px solid var(--y-line);
    background: #fff;
}

.hd__bar i {
    width: .85cqw;
    height: .85cqw;
    border-radius: 50%;
    background: var(--y-line);
}

.hd__url {
    position: relative;
    flex: 1;
    height: 1.9cqw;
    margin-left: 1cqw;
}

/* Une adresse par chapitre, superposées ; seule celle du chapitre en cours est visible */
.hd__url span {
    position: absolute;
    inset: 0 auto 0 0;
    display: flex;
    align-items: center;
    padding: 0 1.3cqw;
    border-radius: 99px;
    background: var(--y-cream);
    font-family: var(--y-sans);
    font-size: 1cqw;
    color: var(--y-muted);
    white-space: nowrap;
    opacity: 0;
}

.hd__url b {
    font-weight: 400;
    color: var(--y-ink);
}

/* Barre de chargement à chaque changement de page */
.hd__load {
    position: absolute;
    left: 0;
    right: 0;
    top: 3.2cqw;
    z-index: 6;
    height: .25cqw;
    background: var(--y-orange);
    transform-origin: left;
    opacity: 0;
    animation-name: hd-load;
    animation-timing-function: ease-out;
}

/* Onglets des chapitres, flottants en bas de l'écran ; un clic saute au chapitre */
.hd__tabs {
    position: absolute;
    left: 50%;
    bottom: 1.6cqw;
    z-index: 4;
    display: flex;
    gap: .3cqw;
    padding: .45cqw;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 1.3cqw;
    background: color-mix(in srgb, var(--y-navy) 90%, transparent);
    box-shadow: 0 1cqw 3cqw color-mix(in srgb, var(--y-navy) 35%, transparent);
    backdrop-filter: blur(8px);
    transform: translateX(-50%);
}

.hd__tabs button {
    display: flex;
    align-items: center;
    gap: .55cqw;
    padding: .7cqw 1.3cqw;
    border: 0;
    border-radius: .9cqw;
    background: transparent;
    color: rgba(255, 255, 255, .62);
    font-family: var(--y-sans);
    font-size: 1.12cqw;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.hd__tabs button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.hd__tabs .material-symbols-outlined {
    font-size: 1.45cqw;
}

/* Démo étroite (mobile) : icônes seules, sinon les libellés seraient illisibles */
@container (max-width: 640px) {
    .hd__tabs {
        gap: .8cqw;
        padding: 1cqw;
        border-radius: 3cqw;
    }

    .hd__tabs button {
        padding: 1.4cqw 2.2cqw;
        border-radius: 2.2cqw;
    }

    .hd__tabs button span:last-child {
        display: none;
    }

    .hd__tabs .material-symbols-outlined {
        font-size: 3.6cqw;
    }
}

/* Écran : 2160 × 1350 → 100 × 62.5 cqw */
.hd__screen {
    position: relative;
    height: 62.5cqw;
}

.hd__overview {
    position: absolute;
    inset: 0;
    display: flex;
    animation-name: hd-overview;
}

.hd__side {
    flex: none;
    width: 20.88cqw;
    height: 62.5cqw;
}

.hd__content {
    flex: 1;
    overflow: hidden;
    background: var(--y-cream);
}

.hd__content img {
    display: block;
    width: 100%;
    height: auto;
}

/* Étapes suivantes : captures plein écran (barre latérale comprise) */
.hd__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.hd__frame > img {
    display: block;
    width: 100%;
    height: 100%;
}

/* Saisie du funnel : le texte s'écrit dans les vrais champs de la capture
   (positions et polices relevées sur /dashboard/funnels/nouveau) */
.hd__type {
    position: absolute;
    display: flex;
    align-items: center;
    height: 2.7cqw;
    overflow: hidden;
    border-radius: .5cqw;
    background: #fff;
    font-family: var(--y-sans);
    font-size: .972cqw;
    color: #202124;
    opacity: 0;
}

.hd__type span {
    display: block;
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    border-right: .09cqw solid transparent;
}

.hd__type--name {
    left: 25.64cqw;
    top: 17.33cqw;
    width: 69.56cqw;
    height: 2.85cqw;
    padding-left: .83cqw;
    background: #e8eaed;
    font-size: .926cqw;
    color: #1c1a47;
}

.hd__type--s0,
.hd__type--url,
.hd__type--s1 {
    width: 22.22cqw;
    padding-left: .944cqw;
}

.hd__type--s0 { left: 28.2cqw; top: 39.7cqw; }
.hd__type--url { left: 28.2cqw; top: 51.53cqw; }
.hd__type--s1 { left: 58.48cqw; top: 39.7cqw; }

/* Aperçu : capture de 3450 px de haut, soit 159.6 cqw ; défilement de 60 cqw */
.hd__scroll {
    animation-name: hd-scroll;
    animation-timing-function: ease-in-out;
}

/* Curseur et clics */
.hd__cursor {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    width: 2cqw;
    height: 2cqw;
    animation-name: hd-cursor;
    animation-timing-function: ease-in-out;
}

.hd__cursor svg {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 .2cqw .4cqw rgba(0, 0, 0, .3));
}

.hd__click {
    position: absolute;
    left: -1.3cqw;
    top: -1.3cqw;
    width: 3.2cqw;
    height: 3.2cqw;
    border-radius: 50%;
    background: color-mix(in srgb, var(--y-orange) 45%, transparent);
    opacity: 0;
    animation-name: hd-click;
}

/* ---------- Chronologie (générée, repères communs en % de la boucle) ----------
   Aperçu → Studio /tarifs (scan, menu) → Studio /contact (scan, bouton
   d'envoi) → saisie du funnel → visiteur sur /contact → résultat. */

.hd__frame--studio-1 { animation-name: hd-studio-1; }
.hd__frame--studio-2 { animation-name: hd-studio-2; }
.hd__frame--studio-3 { animation-name: hd-studio-3; }
.hd__frame--studio-4 { animation-name: hd-studio-4; }
.hd__frame--contact-1 { animation-name: hd-contact-1; }
.hd__frame--contact-2 { animation-name: hd-contact-2; }
.hd__frame--contact-3 { animation-name: hd-contact-3; }
.hd__frame--contact-4 { animation-name: hd-contact-4; }
.hd__frame--funnel-1 { animation-name: hd-funnel-1; }
.hd__frame--funnel-2 { animation-name: hd-funnel-2; }
.hd__frame--visitor-1 { animation-name: hd-visitor-1; }
.hd__frame--visitor-2 { animation-name: hd-visitor-2; }
.hd__frame--visitor-3 { animation-name: hd-visitor-3; }
.hd__frame--funnel-result { animation-name: hd-funnel-result; }
.hd__tabs button:nth-child(1) { animation-name: hd-tab-1, hd-tab-text-1; }
.hd__tabs button:nth-child(2) { animation-name: hd-tab-2, hd-tab-text-2; }
.hd__tabs button:nth-child(3) { animation-name: hd-tab-3, hd-tab-text-3; }
.hd__tabs button:nth-child(4) { animation-name: hd-tab-4, hd-tab-text-4; }
.hd__tabs button:nth-child(5) { animation-name: hd-tab-5, hd-tab-text-5; }
.hd__url span:nth-child(1) { animation-name: hd-url-1; }
.hd__url span:nth-child(2) { animation-name: hd-url-2; }
.hd__url span:nth-child(3) { animation-name: hd-url-3; }
.hd__url span:nth-child(4) { animation-name: hd-url-4; }
.hd__url span:nth-child(5) { animation-name: hd-url-5; }
.hd__type--name { animation-name: hd-field-name; }
.hd__type--name span { animation-name: hd-type-name, hd-caret-name; animation-timing-function: steps(18), linear; }
.hd__type--s0 { animation-name: hd-field-s0; }
.hd__type--s0 span { animation-name: hd-type-s0, hd-caret-s0; animation-timing-function: steps(25), linear; }
.hd__type--url { animation-name: hd-field-url; }
.hd__type--url span { animation-name: hd-type-url, hd-caret-url; animation-timing-function: steps(8), linear; }
.hd__type--s1 { animation-name: hd-field-s1; }
.hd__type--s1 span { animation-name: hd-type-s1, hd-caret-s1; animation-timing-function: steps(19), linear; }

@keyframes hd-scroll {
    0%, 1.65% { transform: translateY(0); }
    5.62%, 7.11% { transform: translateY(-60cqw); }
    10.25%, 100% { transform: translateY(0); }
}

@keyframes hd-cursor {
    0% { transform: translate(6.5cqw, 14.6cqw); }
    2.31% { transform: translate(58cqw, 34cqw); }
    8.76% { transform: translate(58cqw, 34cqw); }
    11.07% { transform: translate(6.5cqw, 28.8cqw); }
    12.23% { transform: translate(6.5cqw, 28.8cqw); }
    14.71% { transform: translate(91.9cqw, 28.1cqw); }
    15.37% { transform: translate(91.9cqw, 28.1cqw); }
    17.85% { transform: translate(91cqw, 41.3cqw); }
    19.01% { transform: translate(91cqw, 41.3cqw); }
    21.49% { transform: translate(60.2cqw, 41.7cqw); }
    22.15% { transform: translate(60.2cqw, 41.7cqw); }
    24.96% { transform: translate(47.2cqw, 17.8cqw); }
    26.12% { transform: translate(47.2cqw, 17.8cqw); }
    28.6% { transform: translate(91.9cqw, 30.9cqw); }
    29.42% { transform: translate(91.9cqw, 30.9cqw); }
    32.07% { transform: translate(91.1cqw, 54.9cqw); }
    33.39% { transform: translate(91.1cqw, 54.9cqw); }
    35.7% { transform: translate(60.2cqw, 41.8cqw); }
    36.53% { transform: translate(60.2cqw, 41.8cqw); }
    38.84% { transform: translate(6.5cqw, 25.3cqw); }
    39.67% { transform: translate(6.5cqw, 25.3cqw); }
    41.32% { transform: translate(40cqw, 18.8cqw); }
    45.45% { transform: translate(40cqw, 18.8cqw); }
    46.45% { transform: translate(35cqw, 41.2cqw); }
    50.58% { transform: translate(35cqw, 41.2cqw); }
    51.24% { transform: translate(35cqw, 53cqw); }
    53.39% { transform: translate(35cqw, 53cqw); }
    54.05% { transform: translate(65cqw, 41.2cqw); }
    57.52% { transform: translate(65cqw, 41.2cqw); }
    57.85% { transform: translate(64.7cqw, 43.8cqw); }
    61.49% { transform: translate(64.7cqw, 43.8cqw); }
    63.8% { transform: translate(90.3cqw, 55.3cqw); }
    66.61% { transform: translate(90.3cqw, 55.3cqw); }
    68.93% { transform: translate(60cqw, 22.9cqw); }
    69.75% { transform: translate(60cqw, 22.9cqw); }
    73.72% { transform: translate(83.7cqw, 53.9cqw); }
    76.03% { transform: translate(83.7cqw, 53.9cqw); }
    77.69% { transform: translate(71.3cqw, 14.5cqw); }
    80.33% { transform: translate(71.3cqw, 14.5cqw); }
    84.13% { transform: translate(43.3cqw, 42.5cqw); }
    87.27% { transform: translate(43.3cqw, 42.5cqw); }
    89.75% { transform: translate(77.6cqw, 47cqw); }
    92.07% { transform: translate(77.6cqw, 47cqw); }
    95.21% { transform: translate(6.5cqw, 14.6cqw); }
    100% { transform: translate(6.5cqw, 14.6cqw); }
}

@keyframes hd-click {
    0%, 11.82%, 13.88%, 14.96%, 17.02%, 18.6%, 20.66%, 21.74%, 23.8%, 25.7%, 27.77%, 28.84%, 30.91%, 32.81%, 34.88%, 35.95%, 38.02%, 39.26%, 41.32%, 41.57%, 43.64%, 46.69%, 48.76%, 51.49%, 53.55%, 54.3%, 56.36%, 60.41%, 62.48%, 64.38%, 66.45%, 74.3%, 76.36%, 95.62%, 97.69%, 100% { opacity: 0; transform: scale(.3); }
    12.31%, 15.45%, 19.09%, 22.23%, 26.2%, 29.34%, 33.31%, 36.45%, 39.75%, 42.07%, 47.19%, 51.98%, 54.79%, 60.91%, 64.88%, 74.79%, 96.12% { opacity: 1; transform: scale(1); }
    13.39%, 16.53%, 20.17%, 23.31%, 27.27%, 30.41%, 34.38%, 37.52%, 40.83%, 43.14%, 48.26%, 53.06%, 55.87%, 61.98%, 65.95%, 75.87%, 97.19% { opacity: 0; transform: scale(2.2); }
}

@keyframes hd-overview {
    12.23%, 96.12% { opacity: 0; }
    0%, 12.15%, 96.86%, 100% { opacity: 1; }
}

@keyframes hd-studio-1 {
    0%, 11.49%, 15.37%, 100% { opacity: 0; }
    12.23%, 15.29% { opacity: 1; }
}

@keyframes hd-studio-2 {
    0%, 15.21%, 19.01%, 100% { opacity: 0; }
    15.37%, 18.93% { opacity: 1; }
}

@keyframes hd-studio-3 {
    0%, 18.84%, 22.15%, 100% { opacity: 0; }
    19.01%, 22.07% { opacity: 1; }
}

@keyframes hd-studio-4 {
    0%, 21.98%, 26.12%, 100% { opacity: 0; }
    22.15%, 26.03% { opacity: 1; }
}

@keyframes hd-contact-1 {
    0%, 25.95%, 29.42%, 100% { opacity: 0; }
    26.12%, 29.34% { opacity: 1; }
}

@keyframes hd-contact-2 {
    0%, 29.26%, 33.39%, 100% { opacity: 0; }
    29.42%, 33.31% { opacity: 1; }
}

@keyframes hd-contact-3 {
    0%, 33.22%, 36.53%, 100% { opacity: 0; }
    33.39%, 36.45% { opacity: 1; }
}

@keyframes hd-contact-4 {
    0%, 36.36%, 39.67%, 100% { opacity: 0; }
    36.53%, 39.59% { opacity: 1; }
}

@keyframes hd-funnel-1 {
    0%, 38.93%, 57.85%, 100% { opacity: 0; }
    39.67%, 57.77% { opacity: 1; }
}

@keyframes hd-funnel-2 {
    0%, 57.69%, 66.61%, 100% { opacity: 0; }
    57.85%, 66.53% { opacity: 1; }
}

@keyframes hd-visitor-1 {
    0%, 65.87%, 69.75%, 100% { opacity: 0; }
    66.61%, 69.67% { opacity: 1; }
}

@keyframes hd-visitor-2 {
    0%, 69.59%, 75.04%, 100% { opacity: 0; }
    69.75%, 74.96% { opacity: 1; }
}

@keyframes hd-visitor-3 {
    0%, 74.3%, 80.33%, 100% { opacity: 0; }
    75.04%, 80.25% { opacity: 1; }
}

@keyframes hd-funnel-result {
    0%, 79.59%, 97.6%, 100% { opacity: 0; }
    80.33%, 96.86% { opacity: 1; }
}

@keyframes hd-tab-1 {
    12.23%, 96.36% { background-color: rgba(255, 255, 255, 0); }
    0%, 12.15%, 96.86%, 100% { background-color: color-mix(in srgb, var(--y-orange) 90%, transparent); }
}

@keyframes hd-tab-text-1 {
    12.23%, 96.36% { color: rgba(255, 255, 255, .62); }
    0%, 12.15%, 96.86%, 100% { color: #fff; }
}

@keyframes hd-tab-2 {
    0%, 11.74%, 39.67%, 100% { background-color: rgba(255, 255, 255, 0); }
    12.23%, 39.59% { background-color: color-mix(in srgb, var(--y-orange) 90%, transparent); }
}

@keyframes hd-tab-text-2 {
    0%, 11.74%, 39.67%, 100% { color: rgba(255, 255, 255, .62); }
    12.23%, 39.59% { color: #fff; }
}

@keyframes hd-tab-3 {
    0%, 39.17%, 66.61%, 100% { background-color: rgba(255, 255, 255, 0); }
    39.67%, 66.53% { background-color: color-mix(in srgb, var(--y-orange) 90%, transparent); }
}

@keyframes hd-tab-text-3 {
    0%, 39.17%, 66.61%, 100% { color: rgba(255, 255, 255, .62); }
    39.67%, 66.53% { color: #fff; }
}

@keyframes hd-tab-4 {
    0%, 66.12%, 80.33%, 100% { background-color: rgba(255, 255, 255, 0); }
    66.61%, 80.25% { background-color: color-mix(in srgb, var(--y-orange) 90%, transparent); }
}

@keyframes hd-tab-text-4 {
    0%, 66.12%, 80.33%, 100% { color: rgba(255, 255, 255, .62); }
    66.61%, 80.25% { color: #fff; }
}

@keyframes hd-tab-5 {
    0%, 79.83%, 96.86%, 100% { background-color: rgba(255, 255, 255, 0); }
    80.33%, 96.78% { background-color: color-mix(in srgb, var(--y-orange) 90%, transparent); }
}

@keyframes hd-tab-text-5 {
    0%, 79.83%, 96.86%, 100% { color: rgba(255, 255, 255, .62); }
    80.33%, 96.78% { color: #fff; }
}

@keyframes hd-url-1 {
    12.23%, 96.53% { opacity: 0; }
    0%, 12.15%, 96.86%, 100% { opacity: 1; }
}

@keyframes hd-url-2 {
    0%, 11.9%, 39.67%, 100% { opacity: 0; }
    12.23%, 39.59% { opacity: 1; }
}

@keyframes hd-url-3 {
    0%, 39.34%, 66.61%, 100% { opacity: 0; }
    39.67%, 66.53% { opacity: 1; }
}

@keyframes hd-url-4 {
    0%, 66.28%, 80.33%, 100% { opacity: 0; }
    66.61%, 80.25% { opacity: 1; }
}

@keyframes hd-url-5 {
    0%, 80%, 96.86%, 100% { opacity: 0; }
    80.33%, 96.78% { opacity: 1; }
}

@keyframes hd-load {
    0% { transform: scaleX(0); opacity: 0; }
    11.45% { transform: scaleX(0); opacity: 0; }
    11.49% { transform: scaleX(.15); opacity: 1; }
    12.4% { transform: scaleX(1); opacity: 1; }
    12.81% { transform: scaleX(1); opacity: 0; }
    38.89% { transform: scaleX(0); opacity: 0; }
    38.93% { transform: scaleX(.15); opacity: 1; }
    39.83% { transform: scaleX(1); opacity: 1; }
    40.25% { transform: scaleX(1); opacity: 0; }
    65.83% { transform: scaleX(0); opacity: 0; }
    65.87% { transform: scaleX(.15); opacity: 1; }
    66.78% { transform: scaleX(1); opacity: 1; }
    67.19% { transform: scaleX(1); opacity: 0; }
    74.26% { transform: scaleX(0); opacity: 0; }
    74.3% { transform: scaleX(.15); opacity: 1; }
    75.21% { transform: scaleX(1); opacity: 1; }
    75.62% { transform: scaleX(1); opacity: 0; }
    79.55% { transform: scaleX(0); opacity: 0; }
    79.59% { transform: scaleX(.15); opacity: 1; }
    80.5% { transform: scaleX(1); opacity: 1; }
    80.91% { transform: scaleX(1); opacity: 0; }
    96.08% { transform: scaleX(0); opacity: 0; }
    96.12% { transform: scaleX(.15); opacity: 1; }
    97.02% { transform: scaleX(1); opacity: 1; }
    97.44% { transform: scaleX(1); opacity: 0; }
    100% { transform: scaleX(1); opacity: 0; }
}

@keyframes hd-type-name {
    0%, 42.15% { width: 0; }
    45.12%, 100% { width: var(--tw); }
}

@keyframes hd-caret-name {
    0%, 41.65%, 45.79%, 100% { border-right-color: transparent; }
    41.82%, 45.62% { border-right-color: currentColor; }
}

@keyframes hd-field-name {
    0%, 42.07% { opacity: 0; }
    42.15%, 100% { opacity: 1; }
}

@keyframes hd-type-s0 {
    0%, 47.11% { width: 0; }
    50.41%, 100% { width: var(--tw); }
}

@keyframes hd-caret-s0 {
    0%, 46.61%, 51.07%, 100% { border-right-color: transparent; }
    46.78%, 50.91% { border-right-color: currentColor; }
}

@keyframes hd-field-s0 {
    0%, 47.02% { opacity: 0; }
    47.11%, 100% { opacity: 1; }
}

@keyframes hd-type-url {
    0%, 51.9% { width: 0; }
    53.06%, 100% { width: var(--tw); }
}

@keyframes hd-caret-url {
    0%, 51.4%, 53.72%, 100% { border-right-color: transparent; }
    51.57%, 53.55% { border-right-color: currentColor; }
}

@keyframes hd-field-url {
    0%, 51.82% { opacity: 0; }
    51.9%, 100% { opacity: 1; }
}

@keyframes hd-type-s1 {
    0%, 54.71% { width: 0; }
    57.36%, 100% { width: var(--tw); }
}

@keyframes hd-caret-s1 {
    0%, 54.21%, 58.02%, 100% { border-right-color: transparent; }
    54.38%, 57.85% { border-right-color: currentColor; }
}

@keyframes hd-field-s1 {
    0%, 54.63% { opacity: 0; }
    54.71%, 100% { opacity: 1; }
}

/* Mobile : démo presque bord à bord et zoomée sur le contenu (barre latérale
   hors cadre, 100 / 79.12 = ×1.264) pour que les captures restent lisibles */
@media (max-width: 640px) {
    .hero--demo {
        --hd-w: calc(100vw - 48px);
    }

    .hero--demo::before {
        bottom: calc(var(--hd-w) * .33);
    }

    .hd {
        width: calc(100% + 32px);
        margin-inline: -16px;
        border-radius: 12px;
    }

    .hd__screen {
        margin-bottom: 16.5cqw;
        transform: scale(1.264);
        transform-origin: top right;
    }

    /* Recentre les onglets une fois l'écran zoomé depuis la droite */
    .hd__tabs {
        left: 60.44%;
    }
}

/* Animations désactivées par le système : image fixe de l'aperçu */
@media (prefers-reduced-motion: reduce) {
    .hd *,
    .hd *::before {
        animation: none !important;
    }

    .hd__overview {
        opacity: 1;
    }

    .hd__frame,
    .hd__load,
    .hd__tabs {
        display: none;
    }

    .hd__url span:first-child {
        opacity: 1;
    }

    .hd__cursor {
        display: none;
    }
}