/* =========================================================================
   Prodecta — section « La démonstration » : l'app qui tourne.

   Deux colonnes : à gauche le propos (trois moments de l'app, trois
   preuves — note Google, temps de visite, espace le plus vu — et deux
   boutons) ; à droite le téléphone seul, l'enregistrement d'écran en
   boucle, rien posé dessus. Anneaux discrets derrière, comme dans le hero.
   Le téléphone arrive de biais, se redresse, puis suit doucement la
   souris (demos.js).
   ========================================================================= */

.dm-section {
    padding: var(--gap-tight, 40px) 0 24px;
    /* Les anneaux dépassent en largeur : on les rogne sur cet axe seulement.
       En hauteur, rien n'est coupé — l'ombre du téléphone doit s'éteindre
       d'elle-même, jamais sur un bord. */
    overflow-x: clip;
    overflow-y: visible;
    overflow-clip-margin: 40px;
}

.dm-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(24px, 4vw, 56px);
}

/* ---------------------------------------------------------------- propos */
.dm-copy {
    text-align: left;
}

.dm-copy .section-title {
    margin-bottom: 14px;
}

.dm-lead {
    margin: 0 0 22px;
    max-width: 44ch;
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--text-mid);
}

.dm-lead strong {
    color: var(--text);
    font-weight: 700;
}

.dm-points {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: grid;
    gap: 12px;
}

.dm-points li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.dm-points i {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: #fff;
    border: 1px solid rgba(26, 26, 26, .07);
    color: var(--dark-green);
}

.dm-points svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dm-points b {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
}

.dm-points span {
    display: block;
    margin-top: 2px;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--text-mid);
}

/* Trois preuves, dans le même format que les points : ce que l'app
   produit, sans rien poser sur l'écran du téléphone. */
.dm-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 16px;
    margin: 0 0 28px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.dm-proof li {
    flex: 1 1 150px;
    align-items: center;
}

.dm-proof i img {
    display: block;
    width: 18px;
    height: 18px;
}

.dm-proof i.is-img {
    overflow: hidden;
    border-color: transparent;
}

.dm-proof i.is-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dm-proof b {
    font-size: 16px;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}

.dm-stars {
    color: #F4B400;
    font-size: 12px;
    letter-spacing: -.5px;
    vertical-align: 1px;
}

.dm-proof span {
    font-size: 12px;
}

.dm-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

/* ---------------------------------------------------------------- scène */
.dm-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 640px;
    perspective: 1400px;
}

/* Anneaux : écho des orbites du hero. */
.dm-rings {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
}

.dm-rings i {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--r);
    height: var(--r);
    border-radius: 50%;
    border: 1px dashed rgba(27, 107, 68, .2);
    transform: translate(-50%, -50%) scale(.85);
    opacity: 0;
    transition: opacity 1s ease var(--d), transform 1.6s cubic-bezier(.22, 1, .36, 1) var(--d);
}

.dm-rings i:nth-child(1) { --r: 380px; --d: .1s; }
.dm-rings i:nth-child(2) { --r: 520px; --d: .25s; border-style: solid; border-color: rgba(27, 107, 68, .1); }
.dm-rings i:nth-child(3) { --r: 660px; --d: .4s; border-color: rgba(27, 107, 68, .12); }

.dm-stage.is-in .dm-rings i {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.dm-glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(27, 107, 68, .14) 0%, rgba(27, 107, 68, .04) 45%, transparent 68%);
    transform: translate(-50%, -50%) scale(.6);
    opacity: 0;
    transition: opacity 1.2s ease .2s, transform 1.6s cubic-bezier(.22, 1, .36, 1) .2s;
    pointer-events: none;
}

.dm-stage.is-in .dm-glow {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.dm-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #0b0d0f;
}

/* Le téléphone suit la souris à sa profondeur (--px/--py par JS). */
.dm-phone {
    --px: 0px;
    --py: 0px;
}

/* ------------------------------------------------------------- téléphone */
/* Le même châssis que les téléphones de la section référencement : cadre
   métal fin, liseré noir, îlot, barre d'état, boutons sur la tranche,
   reflet sur la vitre. L'enregistrement n'a pas de barre d'état : on la
   redonne au-dessus, sur fond noir, et l'écran retrouve les proportions
   d'un vrai téléphone. */
.dm-phone {
    position: relative;
    z-index: 2;
    width: clamp(240px, 24vw, 300px);
    padding: 3px;
    border-radius: 46px;
    background: linear-gradient(160deg, #3b3e43 0%, #15171a 30%, #2a2d31 56%, #0e1012 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .22),
        inset 0 -1px 0 rgba(0, 0, 0, .7),
        0 0 0 1px rgba(10, 14, 12, .35),
        0 18px 40px -18px rgba(20, 30, 24, .45),
        0 40px 70px -40px rgba(20, 30, 24, .35);
    opacity: 0;
    transform: translateY(40px) rotateY(-18deg) rotateX(6deg) scale(.94);
    transform-origin: 50% 70%;
    transition:
        opacity .9s ease,
        transform 1.4s cubic-bezier(.22, 1, .36, 1);
}

.dm-stage.is-in .dm-phone {
    opacity: 1;
    transform: translate3d(var(--px), var(--py), 0);
}

.dm-stage.is-settled .dm-phone {
    transition: transform .35s ease-out;
}

.dm-phone-screen {
    position: relative;
    border: 6px solid #0a0b0d;
    border-radius: 43px;
    overflow: hidden;
    background: #000;
    /* La barre d'état : 13,7 % de la largeur, comme sur l'appareil. */
    padding-top: 13.7%;
}

.dm-video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 45 / 91;
    object-fit: cover;
    background: #0b0d0f;
}

.dm-phone-island {
    position: absolute;
    top: 9px;
    left: 50%;
    z-index: 4;
    width: 30%;
    height: 22px;
    border-radius: 100px;
    background: #050607;
    transform: translateX(-50%);
}

.dm-status {
    position: absolute;
    top: 10px;
    left: 22px;
    right: 18px;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 20px;
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: -.1px;
}

.dm-status > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.dm-status svg {
    display: block;
    fill: currentColor;
}

.dm-sig { width: 14px; height: 9.5px; }
.dm-wifi { width: 13px; height: 10px; }
.dm-bat { width: 22px; height: 10px; }

.dm-glare {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: linear-gradient(115deg, rgba(255, 255, 255, .11) 0%, rgba(255, 255, 255, .02) 24%, transparent 42%);
    pointer-events: none;
}

.dm-phone-btn {
    position: absolute;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, #34383d, #1d2024);
}

.dm-phone-btn.is-left { left: -3px; }
.dm-phone-btn.is-left.is-1 { top: 17%; height: 26px; }
.dm-phone-btn.is-left.is-2 { top: 25%; height: 44px; }
.dm-phone-btn.is-left.is-3 { top: 34%; height: 44px; }
.dm-phone-btn.is-right { right: -3px; top: 27%; height: 64px; background: linear-gradient(90deg, #1d2024, #34383d); }

/* ------------------------------------------- notifications de verre */
/* ------------------------------------------------------------- réglages */
@media (max-width: 1100px) {
    .dm-rings i:nth-child(3) { display: none; }
}

@media (max-width: 900px) {
    .dm-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .dm-copy {
        text-align: center;
    }

    .dm-lead,
    .dm-points {
        margin-left: auto;
        margin-right: auto;
    }

    .dm-points {
        max-width: 480px;
        text-align: left;
    }

    .dm-actions {
        justify-content: center;
    }

    .dm-stage {
        min-height: 0;
        padding: 26px 0 40px;
    }

    /* Le texte du hero suffit : ici, le titre, le téléphone, un bouton. */
    .dm-lead,
    .dm-points,
    .dm-actions .btn-quote { display: none; }
    .dm-copy .section-title { margin-bottom: 4px; }
    .dm-actions { margin-top: 14px; }
    .dm-grid { gap: 0; }
    .dm-grid .dm-copy { order: 0; }
    .dm-grid .dm-stage { order: 1; }
    .dm-grid .dm-actions { order: 2; }

    .dm-phone { width: min(72%, 260px); }
    .dm-phone-island { height: 20px; top: 8px; }
    .dm-status { top: 9px; left: 20px; right: 16px; font-size: 11px; }

    .dm-rings i:nth-child(2) { display: none; }
    .dm-rings i:nth-child(1) { --r: 320px; }
}

/* Sous 768 px, la barre fixe du bas porte déjà « Voir la démo » : pas de
   second bouton au-dessus du téléphone. */
@media (max-width: 768px) {
    .dm-actions { display: none; }
    .dm-copy .section-title { margin-bottom: 0; }
}

@media (max-width: 600px) {
    .dm-section { padding-bottom: 8px; }
    .dm-actions .pr-btn,
    .dm-actions .btn-quote { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .dm-phone,
    .dm-glow,
    .dm-rings i {
        transition: none;
        opacity: 1;
        transform: none;
    }

    .dm-glow { transform: translate(-50%, -50%); }
    .dm-rings i { transform: translate(-50%, -50%); }
}