/* =============================================================
   EPITÉA BLOCKS — Frontend + Éditeur Gutenberg
   blocks.css v1.3.0
   ============================================================= */

/* ---- Section wrapper ---- */
.ep-fonctionnement-section {
    background: #FFFFFF;
    padding: 96px 32px;
}

.ep-fn-inner {
    max-width: 1180px;
    margin: 0 auto;
}

/* ---- En-tête de section ---- */
.ep-fonctionnement-section .ep-section-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 60px;
}

.ep-fonctionnement-section .ep-badge {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #936F3E;
    margin: 0 0 14px;
}

.ep-fonctionnement-section h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 46px;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.1;
    color: #161616;
    margin: 0 0 16px;
}

.ep-fonctionnement-section .ep-section-desc {
    font-size: 17px;
    line-height: 1.6;
    color: #444444;
    margin: 0;
}

/* ================================================================
   GRILLE AUTO-ADAPTATIVE
   CSS Grid avec auto-fit : les cartes s'adaptent automatiquement
   selon leur nombre, sans JavaScript.

   1 carte  → 1 colonne pleine largeur
   2 cartes → 2 colonnes
   3 cartes → 3 colonnes
   4 cartes → 4 colonnes (colonne min. 240px)
   5 cartes → 3 + 2 (wrap automatique)
   6 cartes → 3 + 3
   etc.
   ================================================================ */
.ep-steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    counter-reset: step-counter; /* initialise le compteur CSS */
}

/* ---- Carte étape ---- */
.ep-step-card {
    background: #FFFFFF;
    border: 1px solid #E8E8E5;
    border-radius: 6px;
    padding: 32px 26px;
    position: relative;
    display: flex;
    flex-direction: column;

    /* Incrémente le compteur CSS à chaque carte */
    counter-increment: step-counter;
}

/* Numéro décoratif automatique (01, 02, 03…) via CSS counter */
.ep-step-card::before {
    content: counter(step-counter, decimal-leading-zero);
    position: absolute;
    top: 24px;
    right: 26px;
    font-family: 'Montserrat', sans-serif;
    font-size: 46px;
    font-weight: 600;
    color: #EFEFED;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

/* Cercle icône */
.ep-step-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #F6EEDB;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    flex-shrink: 0;
}

.ep-step-card h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #161616;
    margin: 0 0 10px;
}

.ep-step-card p {
    font-size: 14.5px;
    line-height: 1.6;
    color: #5A5A5A;
    margin: 0;
    flex: 1; /* pousse le texte vers le bas si la carte est plus haute */
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 900px) {
    .ep-fonctionnement-section {
        padding: 72px 24px;
    }
    .ep-steps-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 18px;
    }
}

@media (max-width: 580px) {
    .ep-fonctionnement-section {
        padding: 56px 20px;
    }
    .ep-fonctionnement-section h2 {
        font-size: 30px !important;
        letter-spacing: -0.3px;
    }
    .ep-steps-grid {
        /* Sur mobile, 2 cartes côte à côte si assez de place, sinon 1 */
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 14px;
    }
    .ep-step-card {
        padding: 22px 18px;
    }
    .ep-step-card::before {
        font-size: 34px;
        top: 16px;
        right: 16px;
    }
    .ep-step-icon-wrap {
        width: 44px;
        height: 44px;
    }
}

/* ================================================================
   STYLES SPÉCIFIQUES À L'ÉDITEUR GUTENBERG
   Cibles : .editor-styles-wrapper (éditeur) vs pas de préfixe (frontend)
   ================================================================ */

/* Dans l'éditeur, l'InnerBlocks wraps les blocs dans sa propre div.
   On cible le conteneur interne pour maintenir un rendu correct. */
.editor-styles-wrapper .ep-fonctionnement-section {
    padding: 48px 24px;
}

.editor-styles-wrapper .ep-section-header {
    margin-bottom: 32px;
}

/* La grille dans l'éditeur : chaque .wp-block est une cellule */
.editor-styles-wrapper .ep-steps-grid .block-editor-block-list__layout {
    display: contents; /* laisse le grid du parent s'appliquer */
}

.editor-styles-wrapper .ep-steps-grid > .block-list-appender,
.editor-styles-wrapper .ep-steps-grid .block-list-appender {
    grid-column: 1 / -1; /* le bouton "+ Ajouter une carte" prend toute la largeur */
    margin-top: 8px;
}

/* L'aperçu de la carte dans l'éditeur (sans le ::before counter
   car les wrappers Gutenberg cassent le flux counter) */
.editor-styles-wrapper .ep-step-card::before {
    display: none; /* masqué dans l'éditeur pour éviter un comptage erroné */
}

/* ================================================================
   BOUTON SUPPRIMER (dans l'éditeur, toutes les cartes)
   ================================================================ */
.ep-card-remove-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border: none;
    background: rgba(0,0,0,.15);
    color: #fff;
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    padding: 0;
}
.ep-card-remove-btn:hover { background: #cc3333; }

/* ================================================================
   IMAGES DANS LES CARTES (fonctionnement + valeurs)
   ================================================================ */
.ep-step-image-wrap,
.ep-valeur-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #F6EEDB;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    overflow: hidden;
    flex-shrink: 0;
}
.ep-step-image-wrap:empty,
.ep-valeur-icon-wrap:empty { background: none; }

.ep-step-image,
.ep-valeur-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.ep-step-image-placeholder {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #F6EEDB;
    border: 1.5px dashed #C9BEA8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-bottom: 22px;
    flex-shrink: 0;
}

/* ================================================================
   SANS NUMÉROS (toggle)
   ================================================================ */
.ep-no-numeros .ep-step-card::before { display: none; }

/* ================================================================
   STATS-BAND
   ================================================================ */
.ep-stats-band {
    background: #161616;
    color: #F2F2F2;
}

.ep-stats-grid {
    max-width: 1100px;
    margin: 0 auto;
    padding: 34px 32px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
    text-align: center;
}

.ep-stat-nombre {
    font-family: 'Montserrat', sans-serif;
    font-size: 38px;
    font-weight: 600;
    color: #C9A86A;
    line-height: 1;
}

.ep-stat-label {
    font-size: 13px;
    color: #BCBCBC;
    margin-top: 6px;
    letter-spacing: 0.3px;
}

/* Dans l'éditeur */
.ep-stat-item--editor {
    position: relative;
}

@media (max-width: 580px) {
    .ep-stats-grid { grid-template-columns: 1fr 1fr; gap: 16px; padding: 28px 20px; }
    .ep-stat-nombre { font-size: 30px; }
}

/* ================================================================
   VALEURS
   ================================================================ */
.ep-valeurs-section {
    background: #F5F5F4;
    padding: 90px 32px;
}

.ep-valeurs-section .ep-section-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 54px;
}

.ep-valeurs-section .ep-badge {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #936F3E;
    margin: 0 0 14px;
}

.ep-valeurs-section h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 44px;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.1;
    color: #161616;
    margin: 0;
}

.ep-valeurs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 22px;
}

.ep-valeur-card {
    background: #fff;
    border: 1px solid #E8E8E5;
    border-radius: 8px;
    padding: 30px 26px;
    position: relative;
    display: flex;
    flex-direction: column;
}

.ep-valeur-card h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #161616;
    margin: 0 0 9px;
}

.ep-valeur-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #5A5A5A;
    margin: 0;
}

@media (max-width: 580px) {
    .ep-valeurs-section { padding: 56px 20px; }
    .ep-valeurs-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
}

/* ================================================================
   TÉMOIGNAGES
   ================================================================ */
.ep-temoignages-section {
    padding: 96px 32px;
    background: #FFFFFF;
}

.ep-temoignages-section .ep-section-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 56px;
}

.ep-temoignages-section .ep-badge {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #936F3E;
    margin: 0 0 14px;
}

.ep-temoignages-section h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 44px;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.1;
    color: #161616;
    margin: 0;
}

.ep-temoignages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.ep-temoignage-card {
    background: #fff;
    border: 1px solid #E8E8E5;
    border-radius: 8px;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    margin: 0;
    position: relative;
}

.ep-temoignage-stars {
    color: #C9A86A;
    font-size: 15px;
    letter-spacing: 2px;
    margin-bottom: 16px;
}

.ep-temoignage-card blockquote {
    font-family: 'Montserrat', sans-serif;
    font-style: italic;
    font-size: 18px;
    line-height: 1.45;
    color: #222222;
    margin: 0 0 24px;
    flex: 1;
    padding: 0;
    border: none;
}

.ep-temoignage-author {
    display: flex;
    align-items: center;
    gap: 13px;
}

.ep-temoignage-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(145deg, #C9A86A, #8E6E3C);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 600;
    flex-shrink: 0;
}

.ep-temoignage-author strong {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    color: #161616;
    font-style: normal;
}

.ep-temoignage-author em {
    display: block;
    font-size: 12.5px;
    color: #8C8C8C;
    font-style: normal;
}

/* Dans l'éditeur */
.ep-temoignage-card blockquote .rich-text { font-style: italic; }

@media (max-width: 580px) {
    .ep-temoignages-section { padding: 56px 20px; }
    .ep-temoignages-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   TARIF CTA
   ================================================================ */
.ep-tarif-cta {
    padding: 0 32px 96px;
}

.ep-tarif-inner {
    max-width: 1000px;
    margin: 0 auto;
    background: linear-gradient(150deg, #1C1C1C, #121212);
    border-radius: 14px;
    padding: 60px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.ep-tarif-inner h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 44px;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.12;
    color: #F5F5F5;
    margin: 0 0 16px;
}

.ep-tarif-sous-titre {
    font-size: 16.5px;
    color: #C9C9C9;
    max-width: 520px;
    margin: 0 auto 14px;
    line-height: 1.6;
}

.ep-tarif-prix-wrap {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin: 22px 0 30px;
    flex-wrap: wrap;
}

.ep-tarif-prix {
    font-family: 'Montserrat', sans-serif;
    font-size: 54px;
    font-weight: 600;
    color: #C9A86A;
    line-height: 1;
}

.ep-tarif-mention-prix {
    font-size: 15px;
    color: #9A9A9A;
}

.ep-tarif-btn {
    display: inline-block;
    background: #C9A86A;
    color: #141414;
    font-family: 'Mulish', sans-serif;
    font-size: 15px;
    font-weight: 700;
    padding: 17px 38px;
    border-radius: 2px;
    text-decoration: none;
    letter-spacing: 0.3px;
    cursor: pointer;
    border: none;
}

.ep-tarif-mention-bas {
    font-size: 12.5px;
    color: #8C8C8C;
    margin: 18px 0 0;
}

@media (max-width: 580px) {
    .ep-tarif-cta { padding: 0 20px 56px; }
    .ep-tarif-inner { padding: 40px 24px; }
    .ep-tarif-inner h2 { font-size: 28px; }
    .ep-tarif-prix { font-size: 40px; }
}

/* ================================================================
   APPLICATION
   ================================================================ */
.ep-application-section {
    padding: 0 32px 100px;
}

.ep-application-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: stretch;
}

.ep-application-badge {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #936F3E;
    margin: 0 0 14px;
}

.ep-application-section h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: -0.5px;
    font-size: 44px;
    line-height: 1.1;
    color: #161616;
    margin: 0 0 18px;
}

.ep-application-desc {
    font-size: 16.5px;
    color: #444444;
    line-height: 1.65;
    margin: 0 0 36px;
}

.ep-application-features {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.ep-application-feature {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.ep-application-feature--editor {
    position: relative;
    padding: 10px;
    border: 1px dashed #E8E8E5;
    border-radius: 6px;
}

.ep-application-feature-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 8px;
    background: #161616;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ep-application-feature h3 {
    font-size: 16.5px;
    font-weight: 700;
    color: #161616;
    margin: 0 0 5px;
}

.ep-application-feature p {
    font-size: 14.5px;
    color: #5A5A5A;
    line-height: 1.55;
    margin: 0;
}

.ep-application-stores {
    display: flex;
    gap: 12px;
    margin-top: 38px;
    flex-wrap: wrap;
}

/* Store buttons – sélecteurs composés pour neutraliser Elementor kit */
.ep-application-stores .ep-application-store-btn,
.ep-application-stores .ep-application-store-btn:hover,
.ep-application-stores .ep-application-store-btn:focus {
    border: none; outline: none; text-transform: none; letter-spacing: normal;
}
.ep-application-stores .ep-application-store-btn {
    background: #161616;
    color: #F5F5F5;
    padding: 11px 20px;
    border-radius: 4px;
    font-size: 13.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
}

.ep-application-col-image {
    position: relative;
    overflow: hidden;
    min-height: 380px;
    border-radius: 16px;
}

.ep-application-col-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
    border-radius: 16px;
    display: block;
}

.ep-application-img-placeholder {
    width: 100%;
    aspect-ratio: 3 / 4;
    background: #F5F5F4;
    border: 2px dashed #D1C5B0;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8C8C8C;
    font-size: 13px;
}

@media (max-width: 900px) {
    .ep-application-inner { grid-template-columns: 1fr; gap: 40px; }
    .ep-application-section h2 { font-size: 36px; }
}

@media (max-width: 580px) {
    .ep-application-section { padding: 0 20px 56px; }
    .ep-application-section h2 { font-size: 30px !important; }
    .ep-application-col-image { display: none; }
}

/* ================================================================
   FAQ
   ================================================================ */
.ep-faq-section {
    padding: 0 32px 100px;
    background: #FFFFFF;
}

.ep-faq-inner {
    max-width: 820px !important;
}

.ep-faq-section .ep-section-header {
    text-align: center;
    margin-bottom: 48px;
}

.ep-faq-section .ep-badge {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #936F3E;
    margin: 0 0 14px;
}

.ep-faq-section h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 44px;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.1;
    color: #161616;
    margin: 0;
}

.ep-faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ep-faq-item {
    background: #FFFFFF;
    border: 1px solid #C9A86A;
    border-radius: 8px;
    overflow: hidden;
}

/* Neutralise les overrides Elementor (background, color, border…)
   sur tous les états du bouton FAQ */
.ep-faq-item .ep-faq-btn,
.ep-faq-item .ep-faq-btn:hover,
.ep-faq-item .ep-faq-btn:focus {
    background: transparent;
    color: inherit;
    border: none;
    border-radius: 0;
    outline: none;
    text-transform: none;
    letter-spacing: inherit;
}

.ep-faq-item .ep-faq-btn {
    width: 100%;
    cursor: pointer;
    text-align: left;
    padding: 22px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-family: 'Mulish', sans-serif;
}

.ep-faq-item .ep-faq-btn:hover { background: #f0f0f0; }

.ep-faq-q {
    flex: 1;
    font-size: 16.5px;
    font-weight: 700;
    color: #5A5A5A;
}

.ep-faq-sign {
    flex-shrink: 0;
    color: #C9A86A;
    font-size: 22px;
    font-weight: 300;
    transition: transform 0.4s ease;
}

.ep-faq-btn[aria-expanded="true"] .ep-faq-sign {
    transform: rotate(45deg);
}

.ep-faq-answer {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0 26px;
    font-size: 15px;
    color: #5A5A5A;
    line-height: 1.65;
    transition: max-height 0.45s ease,
                opacity 0.35s ease,
                padding-bottom 0.35s ease;
}

.ep-faq-answer.open {
    max-height: 600px;
    opacity: 1;
    padding-bottom: 24px;
}

/* Dans l'éditeur : affichage à plat (pas d'accordéon) */
.ep-faq-item--editor {
    padding: 16px;
    position: relative;
}

.ep-faq-q-editor {
    font-weight: 700;
    font-size: 15px;
    color: #161616;
    margin: 0 0 8px;
}

.ep-faq-a-editor {
    font-size: 14px;
    color: #5A5A5A;
    margin: 0;
}

@media (max-width: 580px) {
    .ep-faq-section { padding: 0 20px 56px; }
    .ep-faq-section h2 { font-size: 30px !important; }
}

/* ================================================================
   SHARED SECTION HEADER (pour valeurs, temoignages, faq, stats)
   Les sélecteurs globaux évitent de répéter le CSS badge/h2 partout
   ================================================================ */
.ep-section-header .ep-badge {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #936F3E;
    margin: 0 0 14px;
}

.ep-section-header h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 44px;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.1;
    color: #161616;
    margin: 0 0 16px;
}

.ep-section-header .ep-section-desc {
    font-size: 17px;
    line-height: 1.6;
    color: #444444;
    margin: 0;
}

/* ================================================================
   HERO
   ================================================================ */
.ep-hero-section {
    position: relative;
    padding: 84px 32px 88px;
}

.ep-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 64px;
    align-items: center;
}

.ep-hero-inner--full {
    grid-template-columns: 1fr;
    max-width: 760px;
}

/* Colonne texte */
.ep-hero-col-text { position: relative; }

.ep-hero-badge-wrap {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 15px;
    background: #F6EEDB;
    border: 1px solid #E8E8E5;
    border-radius: 100px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #936F3E;
    margin-bottom: 28px;
}

.ep-hero-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #AE8C56;
    display: inline-block;
    flex-shrink: 0;
}

.ep-hero-h1 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 56px;
    line-height: 1.04;
    letter-spacing: -0.5px;
    color: #161616;
    margin: 0 0 24px;
}

.ep-hero-h1 em {
    font-style: italic;
    color: #936F3E;
}

.ep-hero-sous-titre {
    font-size: 18px;
    line-height: 1.65;
    color: #444444;
    max-width: 480px;
    margin: 0 0 36px;
}

.ep-hero-btns {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 34px;
    align-items: center;
}

.ep-btn-lg {
    font-size: 15px;
    padding: 16px 30px;
}

/* Neutralise les overrides Elementor kit sur le bouton démo hero */
.ep-hero-btns .ep-hero-btn-demo,
.ep-hero-btns .ep-hero-btn-demo:hover,
.ep-hero-btns .ep-hero-btn-demo:focus {
    background: transparent; color: inherit; border-radius: 2px;
    outline: none; text-transform: none; letter-spacing: normal;
}
.ep-hero-btns .ep-hero-btn-demo {
    cursor: pointer;
    color: #161616;
    font-family: 'Mulish', sans-serif;
    font-size: 15px;
    font-weight: 600;
    padding: 16px 28px;
    border: 1.5px solid #C9BEA8;
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.ep-hero-trust {
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
    font-size: 13px;
    font-weight: 600;
    color: #5A5A5A;
}

.ep-hero-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Colonne droite */
.ep-hero-col-qr {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* Image unique */
.ep-hero-img-single {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
}

.ep-hero-img-single img {
    width: 100%;
    height: auto;
    display: block;
}

/* Carousel — slide horizontal */
.ep-hero-carousel {
    position: relative;
    width: 100%;
}

/* Frame = zone visible avec overflow:hidden + coins arrondis.
   Les flèches sont sœurs du track ici — elles ne bougent pas avec lui. */
.ep-hero-carousel-frame {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    line-height: 0;
}

/* Track = conteneur flex qui se déplace via translateX */
.ep-hero-carousel-track {
    display: flex;
}

.ep-hero-slide {
    flex: 0 0 100%;
    min-width: 100%;
}

.ep-hero-slide img {
    width: 100%;
    height: auto;
    display: block;
}

.ep-hero-slide img {
    width: 100%;
    height: auto;
    display: block;
}

/* Flèches – sélecteurs composés pour neutraliser Elementor kit */
.ep-hero-carousel-frame .ep-hero-carousel-prev,
.ep-hero-carousel-frame .ep-hero-carousel-next,
.ep-hero-carousel-frame .ep-hero-carousel-prev:focus,
.ep-hero-carousel-frame .ep-hero-carousel-next:focus {
    text-transform: none; letter-spacing: normal; outline: none;
}
.ep-hero-carousel-frame .ep-hero-carousel-prev,
.ep-hero-carousel-frame .ep-hero-carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.92);
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 26px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #161616;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
    z-index: 2;
    transition: background 0.15s, transform 0.15s;
    padding: 0;
}
.ep-hero-carousel-frame .ep-hero-carousel-prev:hover,
.ep-hero-carousel-frame .ep-hero-carousel-next:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.06);
}
.ep-hero-carousel-frame .ep-hero-carousel-prev { left: 14px; }
.ep-hero-carousel-frame .ep-hero-carousel-next { right: 14px; }

/* Points */
.ep-hero-carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

/* Points – sélecteurs composés pour neutraliser Elementor kit */
.ep-hero-carousel-dots .ep-hero-dot,
.ep-hero-carousel-dots .ep-hero-dot:focus {
    background: #D1C5B0; border: none; outline: none; text-transform: none;
}
.ep-hero-carousel-dots .ep-hero-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, transform 0.2s;
    flex-shrink: 0;
    display: block;
}
.ep-hero-carousel-dots .ep-hero-dot--active {
    background: #936F3E;
    transform: scale(1.35);
}

/* Placeholder éditeur */
.ep-hero-img-placeholder {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #F5F5F4;
    border: 2px dashed #D1C5B0;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8C8C8C;
    font-size: 13px;
    text-align: center;
    padding: 24px;
    box-sizing: border-box;
}

/* ================================================================
   HERO — MODE SMARTPHONES
   ================================================================ */

.ep-hero-col-qr--phones { align-items: center; padding-bottom: 28px; }

.ep-hero-phones {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 560px;
    width: 100%;
}

.ep-hero-phones-glow {
    position: absolute;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle, #F6EEDB 0%, rgba(241,232,213,0) 70%);
    pointer-events: none;
}

/* Coque commune */
.ep-hero-phone               { background: #161616; padding: 8px; }
.ep-hero-phone-inner         { width: 100%; height: 100%; overflow: hidden; position: relative; background: #fff; }
.ep-hero-phone-notch         { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); border-radius: 3px; background: rgba(255,255,255,.5); pointer-events: none; }
.ep-hero-phone-img           { position: absolute; top: 0; left: 0; width: 100%; object-fit: cover; }
.ep-hero-phone-img-placeholder { width: 100%; height: 100%; background: #E8E8E5; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #999; }

/* Keyframes — Phone 1 (gauche) */
@keyframes epPh1In {
    0%   { transform: rotate(-7deg); }
    32%  { transform: rotate(-12deg) translateX(-52px) translateY(6px); }
    100% { transform: rotate(-4deg) scale(1.08) translateY(-6px); }
}
@keyframes epPh1Out {
    0%   { transform: rotate(-4deg) scale(1.08) translateY(-6px); }
    68%  { transform: rotate(-12deg) translateX(-52px) translateY(6px); }
    100% { transform: rotate(-7deg); }
}

/* Keyframes — Phone 2 (droite) */
@keyframes epPh2In {
    0%   { transform: rotate(8deg); }
    32%  { transform: rotate(12deg) translateX(52px) translateY(6px); }
    100% { transform: rotate(5deg) scale(1.08) translateY(-6px); }
}
@keyframes epPh2Out {
    0%   { transform: rotate(5deg) scale(1.08) translateY(-6px); }
    68%  { transform: rotate(12deg) translateX(52px) translateY(6px); }
    100% { transform: rotate(8deg); }
}

/* Phone 1 — arrière-plan gauche */
.ep-hero-phone-1 {
    position: absolute; left: 2px; top: 18px;
    width: 198px; height: 404px; border-radius: 30px;
    box-shadow: 0 30px 60px -20px rgba(0,0,0,.45);
    transform: rotate(-7deg); z-index: 1;
    transition: box-shadow .45s ease, z-index 0s .45s;
}
.ep-hero-phone-1.ep-ph-in {
    animation: epPh1In .52s cubic-bezier(.25,.46,.45,.94) forwards;
    z-index: 5; box-shadow: 0 40px 80px -18px rgba(0,0,0,.55);
    transition: box-shadow .45s ease, z-index 0s;
}
.ep-hero-phone-1.ep-ph-out {
    animation: epPh1Out .52s cubic-bezier(.55,.06,.68,.19) forwards;
    transition: box-shadow .45s ease, z-index 0s .52s;
}
.ep-hero-phone-1 .ep-hero-phone-inner  { border-radius: 23px; }
.ep-hero-phone-1 .ep-hero-phone-notch  { width: 52px; height: 5px; }
.ep-hero-phone-1 .ep-hero-phone-img    { height: 100%; }

/* Phone 2 — arrière-plan droit */
.ep-hero-phone-2 {
    position: absolute; right: -6px; top: 64px;
    width: 190px; height: 388px; border-radius: 29px;
    box-shadow: 0 30px 60px -20px rgba(0,0,0,.4);
    transform: rotate(8deg); z-index: 2;
    transition: box-shadow .45s ease, z-index 0s .45s;
}
.ep-hero-phone-2.ep-ph-in {
    animation: epPh2In .52s cubic-bezier(.25,.46,.45,.94) forwards;
    z-index: 5; box-shadow: 0 40px 80px -18px rgba(0,0,0,.55);
    transition: box-shadow .45s ease, z-index 0s;
}
.ep-hero-phone-2.ep-ph-out {
    animation: epPh2Out .52s cubic-bezier(.55,.06,.68,.19) forwards;
    transition: box-shadow .45s ease, z-index 0s .52s;
}
.ep-hero-phone-2 .ep-hero-phone-inner  { border-radius: 22px; }
.ep-hero-phone-2 .ep-hero-phone-notch  { width: 50px; height: 5px; }
.ep-hero-phone-2 .ep-hero-phone-img    { height: 100%; }

/* Phone 3 — premier plan centre */
.ep-hero-phone-3 {
    position: relative; width: 236px; height: 480px;
    background: linear-gradient(160deg, #2A2A2A, #0E0E0E); border-radius: 36px; padding: 10px;
    box-shadow: 0 40px 90px -24px rgba(0,0,0,.55), 0 0 0 1px rgba(174,140,86,.3);
    z-index: 3; transition: transform .35s ease, box-shadow .35s ease;
}
.ep-hero-phone-3:hover {
    transform: scale(1.05) translateY(-6px);
    box-shadow: 0 50px 100px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(174,140,86,.3);
}
.ep-hero-phone-3 .ep-hero-phone-inner  { border-radius: 27px; }
.ep-hero-phone-3 .ep-hero-phone-notch  { width: 60px; height: 6px; background: rgba(0,0,0,.25); }
.ep-hero-phone-3 .ep-hero-phone-img    { height: 100%; }

.ep-hero-phone-3-label {
    position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%);
    background: #161616; color: #F5F5F5; font-size: 10.5px; letter-spacing: 1.5px;
    text-transform: uppercase; font-weight: 600; padding: 7px 16px;
    border-radius: 100px; white-space: nowrap; box-shadow: 0 8px 20px rgba(0,0,0,.3);
}

@media (max-width: 900px) {
    .ep-hero-inner { grid-template-columns: 1fr; gap: 40px; }
    .ep-hero-h1 { font-size: 42px; }
    .ep-hero-phones { transform: scale(0.72); transform-origin: top center; min-height: 400px; margin-bottom: -100px; }
}

@media (max-width: 580px) {
    .ep-hero-section { padding: 56px 20px 60px; }
    .ep-hero-h1 { font-size: 34px; }
    .ep-hero-sous-titre { font-size: 16px; }
    .ep-hero-btns { flex-direction: column; align-items: flex-start; }
    .ep-hero-carousel-frame .ep-hero-carousel-prev { left: 8px; }
    .ep-hero-carousel-frame .ep-hero-carousel-next { right: 8px; }
    .ep-hero-col-qr--phones { display: none; }
}

/* ================================================================
   DÉMO INTERACTIVE
   ================================================================ */
.ep-demo-section {
    padding: 0 32px 96px;
}

.ep-demo-inner {
    max-width: 1180px;
    margin: 0 auto;
    background: linear-gradient(150deg, #1C1C1C, #121212);
    border-radius: 14px;
    padding: 64px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.ep-demo-glow {
    position: absolute;
    right: -60px;
    top: -60px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(174, 140, 86, 0.16), transparent 70%);
    pointer-events: none;
}

.ep-demo-col-text { position: relative; }

.ep-demo-badge {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #C9A86A;
    margin-bottom: 16px;
}

.ep-demo-h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: -0.5px;
    font-size: 42px;
    line-height: 1.12;
    color: #F5F5F5;
    margin-bottom: 18px;
}

.ep-demo-desc {
    font-size: 16.5px;
    color: #C9C9C9;
    line-height: 1.65;
    margin-bottom: 32px;
}

/* Bouton démo – sélecteurs composés pour neutraliser Elementor kit */
.ep-demo-col-text .ep-demo-btn,
.ep-demo-col-text .ep-demo-btn:hover,
.ep-demo-col-text .ep-demo-btn:focus {
    border: none; outline: none; text-transform: none; letter-spacing: normal;
}
.ep-demo-col-text .ep-demo-btn {
    cursor: pointer;
    background: #C9A86A;
    color: #141414;
    font-family: 'Mulish', sans-serif;
    font-size: 15px;
    font-weight: 700;
    padding: 16px 30px;
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.ep-demo-col-phone {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 48px;
}

/* Carte physique QR — format carte bancaire paysage */
.ep-demo-phone {
    cursor: pointer;
    position: relative;
    width: 340px;
    height: 215px;
    border-radius: 18px;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,0)    0px,
            rgba(255,255,255,0)    3px,
            rgba(255,255,255,.022) 3px,
            rgba(255,255,255,.022) 4px
        ),
        linear-gradient(175deg, #252525 0%, #080808 55%, #131313 100%);
    border: 1px solid rgba(255,255,255,.06);
    box-shadow:
        0 40px 80px -24px rgba(0,0,0,.85),
        inset 0 1px 0 rgba(255,255,255,.1),
        inset 0 -1px 0 rgba(0,0,0,.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    overflow: hidden;
}

/* Reflet sous la carte */
.ep-demo-phone::after {
    content: '';
    position: absolute;
    top: calc(100% + 1px);
    left: 8%;
    right: 8%;
    height: 46px;
    border-radius: 0 0 18px 18px;
    background: linear-gradient(to bottom, rgba(30,30,30,.45), transparent);
    filter: blur(6px);
    pointer-events: none;
}

.ep-demo-phone-qr-wrap {
    background: #FFFFFF;
    padding: 10px;
    border-radius: 4px;
    position: relative;
    box-shadow: 0 2px 12px rgba(0,0,0,.5);
}

.ep-demo-scan-line {
    position: absolute;
    left: 6%;
    right: 6%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #C9A86A, transparent);
    box-shadow: 0 0 10px #C9A86A;
    animation: epScan 2.4s ease-in-out infinite;
    top: 6%;
}

/* epScan est aussi défini dans epitea.css — doublon sans risque */
@keyframes epScan { 0% { top: 6%; } 50% { top: 92%; } 100% { top: 6%; } }

/* Nom gravé sur la carte */
.ep-demo-card-name {
    font-family: 'Palatino Linotype', Palatino, Georgia, serif;
    font-style: italic;
    font-size: 15px;
    font-weight: 400;
    color: #E8E8E8;
    letter-spacing: .5px;
    text-shadow: 0 1px 3px rgba(0,0,0,.6);
}

@media (max-width: 900px) {
    .ep-demo-inner { grid-template-columns: 1fr; }
    .ep-demo-h2 { font-size: 34px; }
}

@media (max-width: 640px) {
    .ep-demo-col-phone { display: none; }
}

@media (max-width: 580px) {
    .ep-demo-section { padding: 0 20px 56px; }
    .ep-demo-inner { padding: 36px 28px; }
    .ep-demo-h2 { font-size: 28px; }
}

/* ================================================================
   DASHICONS dans les blocs Epitéa
   ================================================================ */
.ep-step-image-wrap .dashicons,
.ep-valeur-icon-wrap .dashicons {
    font-size: 26px;
    color: #936F3E;
}
.ep-valeurs-grid .ep-valeur-icon-wrap .dashicons {
    position: relative;
    left: -2px;
    top: -2px;
}
.ep-application-feature-icon .dashicons {
    font-size: 22px;
    color: #C9A86A;
}