/**
 * Page /applications/ (page-applications.php).
 *
 * Charge par wpm_enqueue_styles() dans functions.php, uniquement sur cette page.
 *
 * Palette reprise du site de vente application.olivier-lafay.com (fond #151c23,
 * panneaux #212c37, vert #71ba13 / #59d500, or #c7a517) : le visiteur passe d'une
 * page a l'autre sans rupture visuelle. Polices : celles du kit Elementor du site.
 */

.ol-app {
    --app-fond: #151c23;
    --app-panneau: #212c37;
    --app-filet: #2c3540;
    --app-olive: #37402b;
    --app-texte: #ffffff;
    --app-texte-2: #a7b1bb;
    --app-vert: #71ba13;
    --app-vert-clair: #59d500;
    --app-or: #c7a517;
    --app-clair: #f6f7f4;
    --app-encre: var(--e-global-color-text, #242424);
    --app-titre-font: var(--e-global-typography-primary-font-family, "Poltawski Nowy"), Georgia, serif;
    --app-texte-font: var(--e-global-typography-text-font-family, "Plus Jakarta Sans"), system-ui, sans-serif;

    font-family: var(--app-texte-font);
    color: var(--app-encre);
    line-height: 1.6;
}

.ol-app *,
.ol-app *::before,
.ol-app *::after {
    box-sizing: border-box;
}

.ol-app img {
    display: block;
    max-width: 100%;
    height: auto;
}

.ol-app figure {
    margin: 0;
}

.ol-app-wrap {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 16px;
}

.ol-app-h2 {
    font-family: var(--app-titre-font);
    font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
    line-height: 1.2;
    margin: 0 0 1rem;
    color: inherit;
}

/* ---------------------------------------------------------------- Boutons */

.ol-app-bouton {
    display: inline-block;
    padding: 0.95rem 1.9rem;
    border-radius: 999px;
    background: var(--app-vert-clair);
    color: #10140c;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    box-shadow: 0 0 0 0 rgba(89, 213, 0, 0.45), 0 8px 24px rgba(89, 213, 0, 0.25);
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.ol-app-bouton:hover,
.ol-app-bouton:focus-visible {
    background: var(--app-vert);
    color: #10140c;
    transform: translateY(-1px);
}

.ol-app-bouton:focus-visible,
.ol-app-lien-discret:focus-visible,
.ol-app-faq summary:focus-visible {
    outline: 3px solid var(--app-or);
    outline-offset: 3px;
}

.ol-app-bouton--large {
    display: block;
    text-align: center;
}

.ol-app-reassurance {
    margin: 0.75rem 0 0;
    font-size: 0.9rem;
    color: var(--app-texte-2);
}

/* ---------------------------------------------------------------- Hero */

.ol-app-hero {
    background: linear-gradient(180deg, var(--app-olive) 0%, var(--app-fond) 75%);
    color: var(--app-texte);
    padding: 3rem 0 3.5rem;
    overflow: hidden;
}

.ol-app-hero-grille {
    display: grid;
    gap: 2.5rem;
    align-items: center;
}

.ol-app-surtitre {
    margin: 0 0 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--app-or);
}

.ol-app-titre {
    font-family: var(--app-titre-font);
    font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
    line-height: 1.12;
    margin: 0 0 1.25rem;
    color: var(--app-texte);
}

.ol-app-chapo {
    font-size: 1.1rem;
    color: var(--app-texte-2);
    margin: 0 0 2rem;
    max-width: 34em;
}

.ol-app-hero-visuel {
    justify-self: center;
    width: min(60vw, 320px);
}

.ol-app-telephone {
    filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.55));
}

/* ---------------------------------------------------------------- Preuves */

.ol-app-preuves {
    background: var(--app-fond);
    color: var(--app-texte-2);
    border-top: 1px solid var(--app-filet);
    padding: 1.5rem 0;
}

.ol-app-preuves-liste {
    list-style: none;
    margin: 0 auto;
    display: grid;
    gap: 0.75rem;
    text-align: center;
}

.ol-app-preuves-liste li {
    margin: 0;
}

.ol-app-preuves-liste strong {
    color: var(--app-texte);
    font-size: 1.15rem;
}

/* ---------------------------------------------------------------- Choix V1 / V2 */

.ol-app-choix {
    background: var(--app-clair);
    padding: 4rem 0;
    text-align: center;
}

.ol-app-intro {
    margin: 0 auto 2.5rem;
    font-size: 1.1rem;
    color: #5b6470;
}

.ol-app-cartes {
    display: grid;
    gap: 1.5rem;
    align-items: start;
    text-align: left;
}

.ol-app-carte {
    position: relative;
    border-radius: 18px;
    padding: 1.75rem 1.5rem;
}

.ol-app-carte--v2 {
    background: var(--app-fond);
    color: var(--app-texte);
    border: 2px solid var(--app-vert-clair);
    box-shadow: 0 24px 60px rgba(21, 28, 35, 0.35);
}

.ol-app-carte--v1 {
    background: #ffffff;
    color: #5b6470;
    border: 1px solid #e3e6e1;
}

.ol-app-badge {
    position: absolute;
    top: 0;
    left: 1.5rem;
    transform: translateY(-50%);
    margin: 0;
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
    background: var(--app-vert-clair);
    color: #10140c;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ol-app-carte-tete {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.25rem;
}

.ol-app-carte-img {
    width: 56px;
    flex: none;
}

.ol-app-carte--v1 .ol-app-carte-img {
    filter: grayscale(1);
    opacity: 0.7;
}

.ol-app-carte-titre {
    font-family: var(--app-titre-font);
    font-size: 1.5rem;
    line-height: 1.2;
    margin: 0 0 0.25rem;
    color: inherit;
}

.ol-app-carte-prix {
    margin: 0;
    font-size: 0.95rem;
}

.ol-app-carte--v2 .ol-app-carte-prix {
    color: var(--app-texte-2);
}

.ol-app-carte--v2 .ol-app-carte-prix strong {
    color: var(--app-vert-clair);
}

.ol-app-fonctions {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
}

.ol-app-fonctions li {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    margin: 0;
    padding: 0.3rem 0;
    font-size: 0.95rem;
    line-height: 1.4;
}

.ol-app-icone {
    width: 18px;
    height: 18px;
    flex: none;
    margin-top: 0.1rem;
}

.ol-app-carte--v2 .is-oui .ol-app-icone {
    color: var(--app-vert-clair);
}

.ol-app-carte--v1 .is-oui .ol-app-icone {
    color: #8a939d;
}

.ol-app-carte--v1 .is-non {
    color: #a3aab2;
}

.ol-app-carte--v1 .is-non .ol-app-icone {
    color: #c9ced3;
}

.ol-app-lien-discret {
    color: #5b6470;
    font-size: 0.95rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ol-app-lien-discret:hover {
    color: var(--app-encre);
}

/* ---------------------------------------------------------------- Detail */

.ol-app-detail {
    background: var(--app-fond);
    color: var(--app-texte);
    padding: 4rem 0;
}

.ol-app-detail-grille,
.ol-app-livre-grille {
    display: grid;
    gap: 2.5rem;
    align-items: center;
}

.ol-app-atouts {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: grid;
    gap: 1.25rem;
}

.ol-app-atouts li {
    margin: 0;
    padding-left: 1rem;
    border-left: 3px solid var(--app-or);
}

.ol-app-atouts h3 {
    font-family: var(--app-texte-font);
    font-size: 1.05rem;
    margin: 0 0 0.25rem;
    color: var(--app-texte);
}

.ol-app-atouts p {
    margin: 0;
    color: var(--app-texte-2);
}

/* ---------------------------------------------------------------- Livre */

.ol-app-livre {
    background: var(--app-clair);
    padding: 4rem 0;
}

.ol-app-livre p {
    font-size: 1.05rem;
    margin: 0 0 1.75rem;
}

.ol-app-livre-visuel {
    justify-self: center;
    max-width: 460px;
}

.ol-app-livre-visuel img {
    border-radius: 14px;
}

/* ---------------------------------------------------------------- FAQ */

.ol-app-faq {
    background: #ffffff;
    padding: 4rem 0;
}

.ol-app-faq-largeur {
    max-width: 760px;
}

.ol-app-faq details {
    border-bottom: 1px solid #e3e6e1;
    padding: 1rem 0;
}

.ol-app-faq summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 1.05rem;
    list-style-position: inside;
}

.ol-app-faq details p {
    margin: 0.75rem 0 0;
    color: #4a525c;
}

/* ---------------------------------------------------------------- Final */

.ol-app-final {
    background: linear-gradient(180deg, var(--app-fond) 0%, var(--app-olive) 100%);
    color: var(--app-texte);
    padding: 4rem 0;
    text-align: center;
}

.ol-app-final .ol-app-bouton--large {
    display: inline-block;
}

/*
 * Pied de page Elementor (modele 96593) : son conteneur porte --margin-top:100vh,
 * soit un ecran blanc entier avant le pied, sur tout le site (constat du 01/10/2026).
 * Neutralise ici pour cette page seulement ; la vraie correction se fait dans le modele.
 */
#colophon .elementor-element-dcb4c83 {
    --margin-top: 0;
}

/* ---------------------------------------------------------------- Tablette et plus */

@media (min-width: 768px) {
    .ol-app-preuves-liste {
        grid-template-columns: repeat(3, 1fr);
    }

    .ol-app-cartes {
        grid-template-columns: 1.15fr 1fr;
        gap: 2rem;
    }

    .ol-app-carte--v2 {
        padding: 2.25rem 2rem;
    }

    .ol-app-carte--v1 {
        margin-top: 2rem;
    }
}

@media (min-width: 900px) {
    .ol-app-hero {
        padding: 4.5rem 0 5rem;
    }

    .ol-app-hero-grille {
        grid-template-columns: 1.3fr 1fr;
    }

    .ol-app-hero-visuel {
        width: 340px;
    }

    .ol-app-detail-grille {
        grid-template-columns: 1fr 1.1fr;
    }

    .ol-app-livre-grille {
        grid-template-columns: 1fr 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ol-app-bouton {
        transition: none;
    }
}