/* ===========================================================================
   Landing animée de SuiviPeda (13/11/2026).
   Dépend des jetons de l'identité « institutionnelle » (css/tokens.css) et de
   css/public.css. Toutes les animations sont désactivées par
   prefers-reduced-motion : la page reste alors complète et lisible, sans
   mouvement, et aucun contenu n'est masqué en JavaScript seul.
   =========================================================================== */

/* ---------- Réglages communs ---------- */
.lp {
    --lp-ink: var(--id-ink, #0e2b4d);
    --lp-soft: var(--id-soft, #4a5f7d);
    --lp-primary: var(--id-primary, #1f5fbf);
    --lp-accent: var(--id-accent, #17808a);
    /* Petit texte (sur-titres) : version foncée de l'accent, 5,4:1 sur le fond doux. */
    --lp-accent-texte: #136d76;
    --lp-surface: var(--id-surface, #ffffff);
    --lp-surface-2: var(--id-surface-2, #eef2f7);
    --lp-border: var(--id-border, #d8dee8);
    --lp-nav-bg: var(--id-nav-bg, #0e2b4d);
    --lp-max: 1240px;
    color: var(--lp-ink);
}

.lp-wrap {
    width: min(100% - 2.5rem, var(--lp-max));
    margin-inline: auto;
}

.lp-section { padding: clamp(3.5rem, 9vw, 7rem) 0; }
.lp-section--tight { padding: clamp(2.5rem, 6vw, 4rem) 0; }
.lp-section--sombre {
    background: var(--lp-nav-bg);
    color: #ffffff;
}
.lp-section--doux { background: var(--lp-surface-2); }

.lp-kicker {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--lp-accent-texte);
    margin-bottom: .9rem;
}
.lp-section--sombre .lp-kicker { color: #7fd4de; }

.lp-titre {
    font-size: clamp(1.75rem, 3.6vw, 2.7rem);
    line-height: 1.15;
    font-weight: 700;
    margin: 0 0 1rem;
    letter-spacing: -.01em;
}
.lp-chapo {
    font-size: clamp(1.02rem, 1.7vw, 1.2rem);
    line-height: 1.65;
    color: var(--lp-soft);
    max-width: 62ch;
    margin: 0 0 1.5rem;
}
.lp-section--sombre .lp-chapo { color: #c9d6e8; }

/* ---------- Révélation au défilement ----------
   Masqué seulement quand JavaScript est actif (classe posée dans le <head>) :
   sans JavaScript, toute la page reste visible. */
.lp-js .lp-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .75s cubic-bezier(.22, .61, .36, 1),
                transform .75s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}
.lp-js .lp-reveal.est-vu { opacity: 1; transform: none; }
.lp-reveal[data-retard="1"] { transition-delay: .09s; }
.lp-reveal[data-retard="2"] { transition-delay: .18s; }
.lp-reveal[data-retard="3"] { transition-delay: .27s; }
.lp-reveal[data-retard="4"] { transition-delay: .36s; }
.lp-reveal[data-retard="5"] { transition-delay: .45s; }

/* ---------- Cadre « écran » commun aux captures ---------- */
.lp-ecran {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: var(--lp-surface);
    border: 1px solid rgba(14, 43, 77, .14);
    box-shadow: 0 24px 60px -28px rgba(14, 43, 77, .55),
                0 2px 8px -3px rgba(14, 43, 77, .18);
}
.lp-ecran img { display: block; width: 100%; height: auto; }
.lp-ecran--sombre { border-color: rgba(255, 255, 255, .18); }
/* Conteneur de l'image seule : repère des zones mises en avant (visite guidée).
   overflow caché : l'agrandissement de la visite sur petit écran ne déborde pas du cadre. */
.lp-ecran-img { position: relative; line-height: 0; overflow: hidden; }
.lp-visite .lp-ecran-img img {
    transition: transform .55s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}

/* Capture en largeur téléphone (portrait) : on en montre le haut, le plus parlant,
   sans laisser l'image occuper tout l'écran. */
@media (max-width: 48rem) {
    .lp-ecran--adaptatif .lp-ecran-img img {
        height: min(62vh, 430px);
        object-fit: cover;
        object-position: top center;
    }
}

/* Barre de fenêtre discrète au-dessus des captures */
.lp-ecran-barre {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem .85rem;
    background: var(--lp-surface-2);
    border-bottom: 1px solid var(--lp-border);
}
.lp-ecran-barre i {
    width: 10px; height: 10px; border-radius: 50%;
    background: #cbd5e1; display: block;
}
.lp-ecran-barre span {
    margin-left: .5rem;
    font-size: .78rem;
    color: var(--lp-soft);
}

/* ---------- Héros ---------- */
.lp-hero {
    position: relative;
    padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2rem, 5vw, 3.5rem);
    background:
        radial-gradient(900px 480px at 78% -10%, rgba(23, 128, 138, .20), transparent 62%),
        radial-gradient(760px 420px at 8% 4%, rgba(31, 95, 191, .22), transparent 60%),
        linear-gradient(176deg, #0e2b4d 0%, #123461 58%, #16407a 100%);
    color: #ffffff;
    overflow: hidden;
}
.lp-hero::after {
    /* Trame fine, rappel du papier réglé — purement décoratif */
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 100% 34px;
    pointer-events: none;
}
.lp-hero > * { position: relative; z-index: 1; }

.lp-hero-grille {
    display: grid;
    gap: clamp(1.75rem, 4vw, 3rem);
    align-items: center;
    grid-template-columns: 1fr;
}
@media (min-width: 62rem) {
    .lp-hero-grille { grid-template-columns: 1.02fr .98fr; }
}

.lp-hero h1 {
    font-size: clamp(2.05rem, 5.1vw, 3.5rem);
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -.015em;
    margin: 0 0 1.1rem;
}
.lp-hero h1 .lp-sur {
    background: linear-gradient(100deg, #7fd4de, #9fc4ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.lp-hero p.lp-hero-chapo {
    font-size: clamp(1.03rem, 1.9vw, 1.27rem);
    line-height: 1.6;
    color: #cfdcef;
    max-width: 34ch;
    margin: 0 0 1.75rem;
}
.lp-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.lp-hero-note {
    margin: 1.1rem 0 0;
    font-size: .92rem;
    color: #a9c0de;
}
.lp-hero-note strong { color: #ffffff; }

/* Mots qui défilent dans le titre */
.lp-rotatif {
    display: inline-grid;
    vertical-align: bottom;
    overflow: hidden;
    /* Un peu plus haut que la ligne du titre : sans cela, les jambages (p, j) sont rognés. */
    height: 1.24em;
    margin-bottom: -.14em;
}
.lp-rotatif > span {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(85%);
    transition: opacity .5s ease, transform .5s cubic-bezier(.22, .61, .36, 1);
    white-space: nowrap;
    background: linear-gradient(100deg, #7fd4de, #9fc4ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.lp-rotatif > span.est-actif { opacity: 1; transform: none; }
/* Sans JavaScript, aucun mot ne serait « actif » : le premier reste affiché. */
html:not(.lp-js) .lp-rotatif > span:first-child { opacity: 1; transform: none; }
.lp-rotatif > span.est-sorti { opacity: 0; transform: translateY(-85%); }

/* Capture du héros, légèrement en perspective, redressée au défilement */
.lp-hero-visuel { perspective: 1400px; }
.lp-hero-ecran {
    transform: rotateX(var(--lp-rx, 9deg)) translateY(var(--lp-ty, 0)) scale(var(--lp-sc, .97));
    transform-origin: 50% 100%;
    transition: transform .2s linear;
    border-color: rgba(255, 255, 255, .22);
    box-shadow: 0 40px 80px -36px rgba(0, 0, 0, .75);
}
.lp-hero-ecran .lp-ecran-barre {
    background: #0b2340;
    border-bottom-color: rgba(255, 255, 255, .12);
}
.lp-hero-ecran .lp-ecran-barre span { color: #9fb4d0; }

/* ---------- Chiffres ---------- */
.lp-chiffres {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    text-align: center;
}
.lp-chiffre {
    padding: 1.4rem 1rem;
    background: var(--lp-surface);
    border: 1px solid var(--lp-border);
    border-radius: 12px;
}
.lp-chiffre b {
    display: block;
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    line-height: 1.05;
    font-weight: 700;
    color: var(--lp-primary);
    font-variant-numeric: tabular-nums;
}
.lp-chiffre span { color: var(--lp-soft); font-size: .95rem; }

/* ---------- Visite guidée (image fixe + étapes) ---------- */
.lp-visite { position: relative; }
.lp-visite-grille {
    display: grid;
    gap: clamp(1.5rem, 4vw, 3rem);
    grid-template-columns: 1fr;
    align-items: start;
}
@media (min-width: 62rem) {
    .lp-visite-grille { grid-template-columns: 1.32fr .68fr; }
}

.lp-visite-colle { position: static; }
@media (min-width: 62rem) {
    .lp-visite-colle {
        position: sticky;
        top: calc(50vh - 15rem);
    }
}

/* Zone mise en avant sur la capture */
.lp-zone {
    position: absolute;
    border: 2px solid #ffd166;
    border-radius: 8px;
    box-shadow: 0 0 0 9999px rgba(10, 26, 45, .52);
    opacity: 0;
    transition: opacity .45s ease, left .5s cubic-bezier(.22,.61,.36,1),
                top .5s cubic-bezier(.22,.61,.36,1),
                width .5s cubic-bezier(.22,.61,.36,1),
                height .5s cubic-bezier(.22,.61,.36,1);
    pointer-events: none;
}
.lp-zone.est-visible { opacity: 1; }

.lp-etapes { display: grid; gap: .85rem; }
.lp-etape {
    padding: 1.15rem 1.25rem;
    border-radius: 12px;
    border: 1px solid var(--lp-border);
    background: var(--lp-surface);
    transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}
.lp-etape.est-active {
    border-color: var(--lp-primary);
    box-shadow: 0 10px 28px -16px rgba(31, 95, 191, .7);
}
@media (min-width: 62rem) {
    .lp-etape { opacity: .45; transition: opacity .35s ease, border-color .35s ease, box-shadow .35s ease; }
    .lp-etape.est-active { opacity: 1; }
}
.lp-etape h3 {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.08rem;
    font-weight: 700;
    margin: 0 0 .35rem;
}
.lp-etape h3 b {
    flex: 0 0 auto;
    width: 1.75rem; height: 1.75rem;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: .88rem;
    background: var(--lp-surface-2);
    color: var(--lp-soft);
    transition: background .35s ease, color .35s ease;
}
.lp-etape.est-active h3 b { background: var(--lp-primary); color: #ffffff; }
.lp-etape p { margin: 0; color: var(--lp-soft); line-height: 1.6; }

/* ---------- Galerie à onglets ---------- */
.lp-galerie-onglets {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.5rem;
}
@media (max-width: 48rem) {
    /* Une seule rangée qui glisse sous le doigt, avec accroche par bouton. */
    .lp-galerie-onglets {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-inline: -1.25rem;
        padding: .15rem 1.25rem .6rem;
    }
    .lp-galerie-onglets::-webkit-scrollbar { display: none; }
    .lp-onglet { flex: 0 0 auto; scroll-snap-align: start; }
}
.lp-onglet {
    appearance: none;
    border: 1px solid var(--lp-border);
    background: var(--lp-surface);
    color: var(--lp-soft);
    font: inherit;
    font-size: .95rem;
    font-weight: 600;
    padding: .55rem 1rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.lp-onglet:hover { border-color: var(--lp-primary); color: var(--lp-primary); }
.lp-onglet[aria-selected="true"] {
    background: var(--lp-primary);
    border-color: var(--lp-primary);
    color: #ffffff;
}
.lp-onglet:focus-visible { outline: 3px solid rgba(31, 95, 191, .45); outline-offset: 2px; }

.lp-galerie-corps {
    display: grid;
    gap: clamp(1.25rem, 3vw, 2.25rem);
    grid-template-columns: 1fr;
    align-items: center;
}
@media (min-width: 62rem) {
    .lp-galerie-corps { grid-template-columns: 1.3fr .7fr; }
}
.lp-galerie-vue { position: relative; }
.lp-galerie-vue img {
    transition: opacity .4s ease, transform .5s cubic-bezier(.22,.61,.36,1);
}
.lp-galerie-vue.est-en-transition img { opacity: 0; transform: scale(.985); }

.lp-galerie-texte h3 { font-size: 1.3rem; font-weight: 700; margin: 0 0 .6rem; }
.lp-galerie-texte p { color: var(--lp-soft); line-height: 1.65; margin: 0 0 1rem; }
.lp-galerie-texte ul { margin: 0; padding-left: 1.1rem; color: var(--lp-soft); line-height: 1.7; }
.lp-galerie-texte li::marker { color: var(--lp-primary); }
.lp-galerie-pan { animation: lp-apparait .45s cubic-bezier(.22,.61,.36,1) both; }
@keyframes lp-apparait {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

/* ---------- Trois gestes ---------- */
.lp-gestes {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    counter-reset: geste;
}
.lp-geste {
    position: relative;
    padding: 1.5rem 1.35rem 1.35rem;
    background: var(--lp-surface);
    border: 1px solid var(--lp-border);
    border-radius: 14px;
}
.lp-geste::before {
    counter-increment: geste;
    content: counter(geste);
    position: absolute;
    top: -.9rem; left: 1.35rem;
    width: 2.1rem; height: 2.1rem;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--lp-primary);
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 6px 16px -8px rgba(31, 95, 191, .9);
}
.lp-geste h3 { font-size: 1.05rem; font-weight: 700; margin: .5rem 0 .4rem; }
.lp-geste p { margin: 0; color: var(--lp-soft); line-height: 1.6; font-size: .97rem; }

/* Flèche animée entre les gestes (écrans larges) */
@media (min-width: 48rem) {
    .lp-geste + .lp-geste::after {
        content: "";
        position: absolute;
        left: -1.05rem; top: 50%;
        width: .8rem; height: .8rem;
        border-top: 2px solid var(--lp-border);
        border-right: 2px solid var(--lp-border);
        transform: translateY(-50%) rotate(45deg);
    }
}

/* ---------- Cartes de fonctions ---------- */
.lp-cartes {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
}
.lp-carte {
    padding: 1.4rem;
    border-radius: 14px;
    border: 1px solid var(--lp-border);
    background: var(--lp-surface);
    transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease;
}
.lp-carte:hover {
    transform: translateY(-4px);
    border-color: rgba(31, 95, 191, .45);
    box-shadow: 0 18px 40px -26px rgba(14, 43, 77, .6);
}
.lp-carte-icone {
    width: 2.6rem; height: 2.6rem;
    border-radius: 10px;
    display: grid; place-items: center;
    background: rgba(31, 95, 191, .1);
    color: var(--lp-primary);
    font-size: 1.35rem;
    margin-bottom: .85rem;
}
.lp-carte h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 .4rem; }
.lp-carte p { margin: 0; color: var(--lp-soft); line-height: 1.6; font-size: .96rem; }

/* ---------- Bandeau mobile ---------- */
.lp-mobile-grille {
    display: grid;
    gap: clamp(1.5rem, 4vw, 3rem);
    grid-template-columns: 1fr;
    align-items: center;
}
@media (min-width: 48rem) {
    .lp-mobile-grille { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
}
.lp-telephone {
    position: relative;
    width: min(255px, 72vw);
    margin-inline: auto;
    padding: .55rem;
    border-radius: 2.1rem;
    background: linear-gradient(160deg, #1b2b40, #0b1726);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255,255,255,.1);
    animation: lp-flotte 7s ease-in-out infinite;
}
.lp-telephone::before {
    content: "";
    position: absolute;
    top: .95rem; left: 50%;
    transform: translateX(-50%);
    width: 32%; height: .5rem;
    border-radius: 999px;
    background: #0b1726;
    z-index: 2;
}
.lp-telephone img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1.65rem;
}
@keyframes lp-flotte {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-11px); }
}

/* ---------- Bandeau de confiance ---------- */
.lp-confiance {
    display: grid;
    gap: 1.1rem;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}
.lp-confiance div {
    padding: 1.2rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .13);
}
.lp-confiance i { font-size: 1.5rem; color: #7fd4de; }
.lp-confiance h3 { font-size: 1rem; font-weight: 700; margin: .6rem 0 .3rem; color: #ffffff; }
.lp-confiance p { margin: 0; color: #c9d6e8; font-size: .94rem; line-height: 1.55; }

/* ---------- Citation de l'auteur ---------- */
.lp-auteur {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
    align-items: center;
}
@media (min-width: 48rem) { .lp-auteur { grid-template-columns: auto 1fr; } }
.lp-auteur-pastille {
    width: 4.5rem; height: 4.5rem;
    border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(23, 128, 138, .12);
    color: var(--lp-accent);
    font-size: 2rem;
    margin-inline: auto;
}
.lp-auteur blockquote {
    margin: 0;
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    line-height: 1.6;
    color: var(--lp-ink);
}
.lp-auteur cite { display: block; margin-top: .75rem; font-style: normal; color: var(--lp-soft); font-size: .95rem; }

/* ---------- Appel final ---------- */
.lp-final {
    text-align: center;
    background:
        radial-gradient(620px 320px at 50% 0%, rgba(23, 128, 138, .2), transparent 65%),
        linear-gradient(170deg, #0e2b4d, #16407a);
    color: #ffffff;
    border-radius: 18px;
    padding: clamp(2.25rem, 6vw, 3.75rem) clamp(1.25rem, 4vw, 3rem);
}
.lp-final h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 700; margin: 0 0 .85rem; }
.lp-final p { color: #c9d6e8; max-width: 56ch; margin: 0 auto 1.6rem; line-height: 1.6; }
.lp-final-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
/* Guide d'utilisation en PDF, sous les boutons (13/11/2026) */
.lp-final .lp-final-guide { margin: 1.5rem auto 0; font-size: .98rem; }
.lp-final-guide a { color: #ffffff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.lp-final-guide a:hover, .lp-final-guide a:focus-visible { color: #ffd166; }
.lp-final-guide span { white-space: nowrap; }

/* ---------- Tarif au prorata ---------- */
.lp-periodes {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.lp-periode {
    padding: 1.35rem;
    border-radius: 14px;
    border: 1px solid var(--lp-border);
    background: var(--lp-surface);
    text-align: center;
}
.lp-periode.est-courante {
    border-color: var(--lp-primary);
    box-shadow: 0 14px 34px -22px rgba(31, 95, 191, .8);
}
.lp-periode .lp-quand { font-size: .85rem; color: var(--lp-soft); }
.lp-periode h3 { font-size: 1.05rem; font-weight: 700; margin: .4rem 0 .45rem; }
.lp-periode p { margin: 0; color: var(--lp-soft); font-size: .95rem; line-height: 1.55; }
.lp-periode .lp-badge-courant {
    display: inline-block;
    margin-top: .75rem;
    font-size: .84rem;
    font-weight: 700;
    color: var(--lp-primary);
}


/* ---------- Ajustements téléphone ---------- */
@media (max-width: 48rem) {
    .lp-wrap { width: min(100% - 2rem, var(--lp-max)); }
    .lp-section { padding: 3rem 0; }
    .lp-hero { padding: 2.25rem 0 2.5rem; }
    .lp-hero-actions .btn,
    .lp-hero-actions .dropdown { width: 100%; }
    .lp-hero-actions .dropdown > .btn { width: 100%; }
    .lp-chiffres { gap: .75rem; }
    .lp-chiffre { padding: 1.1rem .75rem; }
    .lp-etapes { gap: .7rem; }
    .lp-etape { padding: 1rem 1.1rem; }
    .lp-visite-colle { margin-bottom: 1.25rem; }
    .lp-galerie-texte { margin-top: .25rem; }
    .lp-final { border-radius: 14px; }
    .lp-final-actions .btn { width: 100%; }
    .lp-auteur-pastille { width: 3.5rem; height: 3.5rem; font-size: 1.6rem; }
}

/* ---------- Agrandir une capture ---------- */
.lp-ecran[data-agrandir] { cursor: zoom-in; }
.lp-ecran-loupe {
    position: absolute;
    right: .6rem; bottom: .6rem;
    width: 2.2rem; height: 2.2rem;
    border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(14, 43, 77, .82);
    color: #ffffff;
    font-size: 1.1rem;
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}
.lp-ecran[data-agrandir]:hover .lp-ecran-loupe,
.lp-ecran[data-agrandir]:focus-visible .lp-ecran-loupe { opacity: 1; }
@media (hover: none) { .lp-ecran-loupe { opacity: 1; } }

.lp-loupe {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(.75rem, 3vw, 2.5rem);
    background: rgba(8, 20, 36, .93);
}
.lp-loupe[open], .lp-loupe.est-ouverte { display: flex; }
.lp-loupe img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    border-radius: 10px;
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9);
    animation: lp-loupe-entre .3s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes lp-loupe-entre {
    from { opacity: 0; transform: scale(.97); }
    to { opacity: 1; transform: none; }
}
.lp-loupe-fermer {
    position: absolute;
    top: 1rem; right: 1rem;
    appearance: none;
    border: 1px solid rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .12);
    color: #ffffff;
    font: inherit;
    font-size: 1rem;
    border-radius: 999px;
    padding: .45rem 1rem;
    cursor: pointer;
}
.lp-loupe-fermer:hover { background: rgba(255, 255, 255, .22); }
.lp-loupe-legende {
    position: absolute;
    left: 50%; bottom: 1rem;
    transform: translateX(-50%);
    color: #c9d6e8;
    font-size: .9rem;
    text-align: center;
    max-width: 90%;
}
@media (prefers-reduced-motion: reduce) { .lp-loupe img { animation: none; } }

/* ---------- Mode nuit ---------- */
html[data-bs-theme="dark"] .lp-ecran,
html[data-bs-theme="dark"] .lp-chiffre,
html[data-bs-theme="dark"] .lp-etape,
html[data-bs-theme="dark"] .lp-carte,
html[data-bs-theme="dark"] .lp-geste,
html[data-bs-theme="dark"] .lp-periode,
html[data-bs-theme="dark"] .lp-onglet {
    background: var(--id-surface);
    border-color: var(--id-border);
}
html[data-bs-theme="dark"] .lp-ecran-barre { background: var(--id-surface-2); }
html[data-bs-theme="dark"] .lp { --lp-accent-texte: #5ec7d2; }

/* ---------- Mouvement réduit ---------- */
@media (max-width: 61.99rem) {
    /* La zone est agrandie avec l'image : son voile doit rester discret. */
    .lp-zone { box-shadow: 0 0 0 9999px rgba(10, 26, 45, .34); transition: opacity .35s ease; }
}

@media (prefers-reduced-motion: reduce) {
    .lp-reveal { opacity: 1; transform: none; transition: none; }
    .lp-visite .lp-ecran-img img { transition: none; }
    .lp-hero-ecran { transform: none; transition: none; }
    .lp-telephone { animation: none; }
    .lp-zone { transition: opacity .01s; }
    .lp-galerie-pan { animation: none; }
    .lp-rotatif { height: auto; }
    .lp-rotatif > span { opacity: 1; transform: none; transition: none; }
    .lp-rotatif > span:not(:first-child) { display: none; }
    .lp-etape { opacity: 1; }
    .lp-carte:hover { transform: none; }
}