/*
 Theme Name:   Astra Child MPN
 Theme URI:    https://monpilotenumerique.fr
 Description:  Theme enfant Astra pour Mon Pilote Numérique. Contient les surcharges CSS et les ajustements front spécifiques au site MPN.
 Author:       Mickaël Carbonnier
 Author URI:   https://monpilotenumerique.fr
 Template:     astra
 Version:      1.34.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  astra-child-mpn
*/

/* =====================================================
   THEME ENFANT ASTRA MPN
   Les CSS ajoutés ici surchargent ceux du theme parent.
   ===================================================== */


/* =====================================================
   1. BOUTONS MPN
   ===================================================== */

/* Bouton secondaire (outline doré sur fond sombre, ex: CTA hero "Voir comment ça marche") */
.mpn-btn-secondary {
    display: inline-block;
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 500;
    padding: 14px 28px;
    border-radius: 4px;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.2s;
}

.mpn-btn-secondary:hover,
.mpn-btn-secondary:focus {
    border-color: #C8973A;
    color: #C8973A;
}


/* =====================================================
   2. NAVIGATION — Lien "Déconnexion" dans le menu principal
   (Migré depuis le plugin le 2026-05-05)
   ===================================================== */

.nav-logout-btn a {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em;
    transition: color 0.2s ease !important;
}
.nav-logout-btn a::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><polyline points='16 17 21 12 16 7'/><line x1='21' y1='12' x2='9' y2='12'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}
.nav-logout-btn a:hover {
    color: #C8973A !important;
}
.nav-logout-btn a:hover::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8973A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><polyline points='16 17 21 12 16 7'/><line x1='21' y1='12' x2='9' y2='12'/></svg>");
    opacity: 1;
}


/* =====================================================
   3. SECTION QUALIFICATION (HOME)
   (Migré depuis le plugin le 2026-05-05)
   ===================================================== */

/* Fond blanc sur la section, les cartes seront crème */
#qualification {
    background-color: #FFFFFF !important;
}
@media (min-width: 1200px) {
    #qualification {
        padding-left: 80px !important;
        padding-right: 80px !important;
    }
}

/* Layout 2 colonnes formulaire + "à quoi vous attendre" (desktop) */
@media (min-width: 1024px) {
    #qualification > .elementor-element-53cedd4 {
        display: grid !important;
        grid-template-columns: 1.25fr 1fr;
        grid-template-areas:
            "title  title"
            "form   attendre";
        gap: 40px 40px !important;
        max-width: 1100px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        align-items: start;
    }
    #qualification .elementor-element-0dc61fe {
        grid-area: title;
        text-align: center;
        width: 100% !important;
    }
    #qualification .elementor-element-3801253 {
        grid-area: form;
        width: 100% !important;
    }
    #qualification .elementor-element-f604812 {
        grid-area: attendre;
        width: 100% !important;
        align-self: start !important;
        margin-top: 0 !important;
        position: sticky;
        top: 20px;
    }
    /* Cas admin connecté : barre WP (32 px) à respecter */
    body.admin-bar #qualification .elementor-element-f604812 {
        top: 52px;
    }
}

/* Carte crème autour du formulaire WPForms */
#qualification .elementor-element-3801253 {
    background: #F7F4EE;
    border: 1px solid #EDE9E0;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 2px 12px rgba(13, 27, 42, 0.04);
}
@media (max-width: 768px) {
    #qualification .elementor-element-3801253 {
        padding: 24px 20px;
    }
}


/* =====================================================
   4. BLOC "Ce que vous pouvez attendre"
   (Migré depuis le plugin le 2026-05-05)
   ===================================================== */

/* Carte crème cohérente avec le formulaire */
.elementor-element-f604812 {
    background-color: #F7F4EE !important;
    border: 1px solid #EDE9E0 !important;
    border-radius: 12px !important;
    padding: 22px 24px !important;
}
@media (max-width: 1023px) {
    .elementor-element-f604812 {
        max-width: 720px;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 28px 32px !important;
    }
}
@media (max-width: 768px) {
    .elementor-element-f604812 {
        padding: 24px 20px !important;
    }
}

/* Wrapper interne : neutralise tout reliquat d'inline style éventuel */
.mpn-attendre-wrap {
    margin: 0;
}
.mpn-attendre-card {
    margin-bottom: 20px;
}

/* Kicker label doré au-dessus du titre */
.mpn-kicker {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #C8973A;
    margin-bottom: 14px;
}

/* Titre "Ce que vous pouvez attendre" : Playfair + trait doré */
.mpn-attendre-title {
    font-family: 'Playfair Display', serif !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    color: #0D1B2A !important;
    line-height: 1.25 !important;
    margin: 0 0 18px 0 !important;
    padding: 0 0 14px 0 !important;
    position: relative;
    border: none !important;
}
.mpn-attendre-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 36px;
    height: 2px;
    background: #C8973A;
}

/* Liste de promesses : pastilles check dorées */
.mpn-promises {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.mpn-promises li {
    font-size: 14px;
    color: #0D1B2A;
    line-height: 1.55;
    padding-left: 26px;
    position: relative;
}
.mpn-promises li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #C8973A;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-size: 10px 10px;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0 1px 3px rgba(200, 151, 58, 0.3);
}

/* Note ESN partenaires : séparateur doré en haut */
.mpn-esn-note {
    font-size: 13px;
    color: #5A5A5A;
    line-height: 1.6;
    padding-top: 18px;
    margin: 0;
    border-top: 1px solid rgba(200, 151, 58, 0.25);
}

/* Lien email mis en valeur (chip doré subtil, hover plus marqué) */
.mpn-esn-mail {
    display: inline-block;
    background: rgba(200, 151, 58, 0.12);
    color: #0D1B2A !important;
    padding: 3px 10px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: background 0.2s ease;
}
.mpn-esn-mail:hover,
.mpn-esn-mail:focus-visible {
    background: rgba(200, 151, 58, 0.22);
    text-decoration: none;
}


/* =====================================================
   5. MINI-BAR EFFORT/DÉLAI sous le titre du formulaire
   (Migré depuis le plugin le 2026-05-05)
   Sert à poser une attente claire (effort court, payoff rapide) juste avant le form.
   ===================================================== */

.mpn-form-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px 28px;
    margin: 28px 0 0 0;
}
.mpn-form-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #5A5A5A;
    line-height: 1.4;
}
.mpn-form-meta-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke: #C8973A;
}
.mpn-form-meta-item strong {
    color: #0D1B2A;
    font-weight: 600;
}
.mpn-form-meta-sep {
    display: inline-block;
    width: 1px;
    height: 16px;
    background: rgba(200, 151, 58, 0.3);
}
@media (max-width: 600px) {
    .mpn-form-meta {
        flex-direction: column;
        gap: 10px;
    }
    .mpn-form-meta-sep {
        display: none;
    }
}


/* =====================================================
   6. FINITIONS WPFORMS sur la home
   (Migré depuis le plugin le 2026-05-05)
   ===================================================== */

/* Champs : restent blancs sur la carte crème */
#qualification .wpforms-field input,
#qualification .wpforms-field select,
#qualification .wpforms-field textarea,
#qualification .choices__inner {
    border-color: #D9D2C2 !important;
    background-color: #FFFFFF !important;
}
#qualification .wpforms-field input:focus,
#qualification .wpforms-field select:focus,
#qualification .wpforms-field textarea:focus,
#qualification .choices__inner:focus-within {
    border-color: #C8973A !important;
    box-shadow: 0 0 0 3px rgba(200, 151, 58, 0.15) !important;
}

/* Bouton submit WPForms GLOBAL : version dorée MPN (toutes pages, tous formulaires).
   Couvre la home (#qualification), la page contact, le dashboard dirigeant (form 43), etc. */
.wpforms-submit-container button[type="submit"],
.wpforms-submit,
button.wpforms-submit {
    background: #C8973A !important;
    background-color: #C8973A !important;
    color: #0D1B2A !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 14px 28px !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease,
                transform 0.2s ease,
                box-shadow 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(200, 151, 58, 0.2) !important;
}
.wpforms-submit-container button[type="submit"]:hover,
.wpforms-submit:hover,
button.wpforms-submit:hover {
    background: #E8B86D !important;
    background-color: #E8B86D !important;
    color: #0D1B2A !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(200, 151, 58, 0.3) !important;
}
.wpforms-submit-container button[type="submit"]:focus-visible,
.wpforms-submit:focus-visible,
button.wpforms-submit:focus-visible {
    outline: 2px solid #0D1B2A !important;
    outline-offset: 3px !important;
}


/* =====================================================
   7. DASHBOARD ESN — Compteurs et liste de leads
   (Refactor depuis dashboard-esn.php le 2026-05-06)
   ===================================================== */

/* --- Grille des 4 compteurs --- */
.mpn-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    width: 100%;
}
@media (max-width: 900px) {
    .mpn-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .mpn-stat-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Card compteur individuelle --- */
.mpn-stat-card {
    background: #FFFFFF;
    border: 1px solid #EDE9E0;
    border-radius: 12px;
    padding: 28px;
    text-align: center;
}
.mpn-stat-value {
    font-family: 'Playfair Display', serif;
    font-size: 42px;
    color: #0D1B2A;
    line-height: 1;
    margin-bottom: 8px;
}
.mpn-stat-value--gold  { color: #C8973A; }
.mpn-stat-value--blue  { color: #185FA5; }
.mpn-stat-value--green { color: #0F6E56; }

.mpn-stat-label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5A5A5A;
}

/* --- Liste de leads --- */
.mpn-leads-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mpn-lead-card {
    background: #FFFFFF;
    border: 1px solid #EDE9E0;
    border-radius: 12px;
    padding: 24px 28px;
}

.mpn-lead-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.mpn-lead-info {
    /* container gauche : entreprise / besoin / date */
}
.mpn-lead-company {
    font-size: 16px;
    font-weight: 500;
    color: #0D1B2A;
    margin-bottom: 6px;
}
.mpn-lead-need {
    font-size: 13px;
    color: #5A5A5A;
    margin-bottom: 4px;
}
.mpn-lead-date {
    font-size: 12px;
    color: #A0A0A0;
}

.mpn-lead-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mpn-lead-desc {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #EDE9E0;
    font-size: 14px;
    color: #5A5A5A;
    line-height: 1.65;
}

/* --- Badge statut (pill avec point coloré) --- */
.mpn-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 100px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
}
.mpn-status-badge .mpn-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

/* Variantes par statut côté ESN (dashboard ESN) :
   couleur de fond + couleur de texte/dot */
.mpn-status-badge--nouveau  { background: #FAEEDA; color: #854F0B; }
.mpn-status-badge--nouveau  .mpn-status-dot { background: #854F0B; }
.mpn-status-badge--contacte { background: #E6F1FB; color: #185FA5; }
.mpn-status-badge--contacte .mpn-status-dot { background: #185FA5; }
.mpn-status-badge--signe    { background: #E1F5EE; color: #0F6E56; }
.mpn-status-badge--signe    .mpn-status-dot { background: #0F6E56; }
.mpn-status-badge--perdu    { background: #F7F4EE; color: #5A5A5A; }
.mpn-status-badge--perdu    .mpn-status-dot { background: #5A5A5A; }

/* Variantes par statut côté dirigeant (dashboard dirigeant) */
.mpn-status-badge--en_attente      { background: #FAEEDA; color: #854F0B; }
.mpn-status-badge--en_attente      .mpn-status-dot { background: #854F0B; }
.mpn-status-badge--en_cours        { background: #E6F1FB; color: #185FA5; }
.mpn-status-badge--en_cours        .mpn-status-dot { background: #185FA5; }
.mpn-status-badge--mis_en_relation { background: #E1F5EE; color: #0F6E56; }
.mpn-status-badge--mis_en_relation .mpn-status-dot { background: #0F6E56; }
.mpn-status-badge--sans_suite      { background: #F7F4EE; color: #5A5A5A; }
.mpn-status-badge--sans_suite      .mpn-status-dot { background: #5A5A5A; }

/* --- Bouton outline doré (action secondaire) --- */
.mpn-btn-ghost-gold {
    font-size: 12px;
    color: #C8973A;
    text-decoration: none;
    border: 1px solid rgba(200, 151, 58, 0.3);
    padding: 6px 12px;
    border-radius: 4px;
    transition: all 0.2s;
}
.mpn-btn-ghost-gold:hover,
.mpn-btn-ghost-gold:focus {
    background: rgba(200, 151, 58, 0.08);
    border-color: #C8973A;
    color: #C8973A;
}

/* --- Empty state (aucun lead, etc.) --- */
.mpn-empty-state {
    background: #FFFFFF;
    border: 1px solid #EDE9E0;
    border-radius: 12px;
    padding: 40px;
    text-align: center;
}
.mpn-empty-title {
    font-size: 15px;
    color: #5A5A5A;
}
.mpn-empty-hint {
    font-size: 13px;
    color: #A0A0A0;
    margin-top: 8px;
}


/* =====================================================
   8. AJUSTEMENTS HOME — Numéros et hero
   (Migré depuis le plugin le 2026-05-05)
   ===================================================== */

/* Numéros 01/02/03 lisibles (section "Trois obstacles") */
.elementor-element-e868806 [style*="color:#EDE9E0"],
.elementor-element-e868806 [style*="font-size:48px"] {
    color: #0D1B2A !important;
    opacity: 0.18 !important;
    font-weight: 600 !important;
}

/* Hero rééquilibré (desktop) */
@media (min-width: 1024px) {
    .elementor-element-d289410 {
        max-width: 520px !important;
        margin-left: auto !important;
        padding: 32px !important;
    }
    .elementor-element-47bd95a .elementor-widget-heading h1 {
        max-width: 640px;
    }
}


/* =====================================================
   9. PAGES AUTH — Connexion et inscription
   (Refactor depuis connexion.php le 2026-05-06)
   ===================================================== */

/* --- Wrapper sombre plein écran --- */
.mpn-auth-wrap {
    background: #0D1B2A;
    min-height: 100vh;
    padding: 80px 5%;
}
.mpn-auth-wrap--split {
    padding: 60px 5%;
}

/* Container interne (centré ou en grille selon variante) */
.mpn-auth-wrap--centered .mpn-auth-inner {
    max-width: 480px;
    margin: 0 auto;
    text-align: center;
}
.mpn-auth-wrap--split .mpn-auth-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}
@media (max-width: 900px) {
    .mpn-auth-wrap--split .mpn-auth-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* --- Logo MPN --- */
.mpn-auth-logo {
    height: 44px;
    width: auto;
    margin-bottom: 40px;
}
.mpn-auth-wrap--split .mpn-auth-logo {
    display: block;
}

/* --- Card blanche centrale --- */
.mpn-auth-card {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 48px 40px;
    text-align: left;
}

/* Header de la card (kicker doré + titre) */
.mpn-auth-card-header {
    text-align: center;
    margin-bottom: 32px;
}

/* --- Kicker doré (avec ou sans tiret avant) --- */
.mpn-auth-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #C8973A;
    margin-bottom: 12px;
}
.mpn-auth-kicker-bar {
    display: block;
    width: 24px;
    height: 1px;
    background: #C8973A;
}

/* --- Titre Playfair (3 tailles) --- */
.mpn-auth-title {
    font-family: 'Playfair Display', serif;
    color: #0D1B2A;
    line-height: 1.2;
    margin: 0;
    font-size: 28px;
}
.mpn-auth-title--md { font-size: 26px; }
.mpn-auth-title--lg {
    font-size: 36px;
    color: #FFFFFF;
    margin-bottom: 20px;
}

/* --- Séparateur "ou avec un mot de passe" --- */
.mpn-auth-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 28px 0 24px;
    color: #9AA1A8;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.mpn-auth-divider::before,
.mpn-auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #E5E7EA;
}

/* --- Pied (sous la card, sur fond sombre) --- */
.mpn-auth-foot {
    margin-top: 24px;
    text-align: center;
}
.mpn-auth-foot p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}
.mpn-auth-foot p + p {
    margin-top: 12px;
}
.mpn-auth-link-gold {
    color: #C8973A;
    text-decoration: none;
    font-weight: 500;
}
.mpn-auth-link-back {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
}

/* --- Lead paragraph (description sous titre) --- */
.mpn-auth-lead {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.7;
    margin-bottom: 40px;
    font-weight: 300;
}

/* --- Liste de 3 features (pitch inscription) --- */
.mpn-auth-features {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
}
.mpn-auth-feature {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.mpn-auth-feature-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(200, 151, 58, 0.12);
    border: 1px solid rgba(200, 151, 58, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mpn-auth-feature-title {
    font-size: 14px;
    font-weight: 500;
    color: #FFFFFF;
    margin-bottom: 4px;
}
.mpn-auth-feature-desc {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.55;
}

/* --- Mockup browser frame (aperçu espace dirigeant) --- */
.mpn-browser-frame {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.mpn-browser-bar {
    background: #1A3048;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.mpn-browser-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
}
.mpn-browser-url {
    flex: 1;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
    margin-left: 8px;
}
.mpn-browser-img {
    width: 100%;
    display: block;
}


/* =====================================================
   10. FORM CARDS — Sections de formulaire dashboard
   (Refactor depuis signup.php le 2026-05-06)
   Réutilisable pour profil dirigeant, password, magic link
   ===================================================== */

/* --- Card conteneur de formulaire --- */
.mpn-form-card {
    background: #FFFFFF;
    border: 1px solid #EDE9E0;
    border-radius: 12px;
    padding: 28px 32px;
}
.mpn-form-card--spaced {
    margin-top: 32px;
}

/* --- Kicker doré pour sections dashboard --- */
.mpn-section-kicker {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #C8973A;
    margin-bottom: 10px;
}

/* --- Titre de section (h3 Playfair) --- */
.mpn-section-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    color: #0D1B2A;
    margin: 0 0 10px 0;
    line-height: 1.3;
}

/* --- Paragraphe intro de section --- */
.mpn-section-intro {
    font-size: 14px;
    line-height: 1.65;
    color: #5A5A5A;
    margin: 0 0 20px 0;
}

/* --- Header section avec stat à droite (titre+intro à gauche, % à droite) --- */
.mpn-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 10px;
}
.mpn-section-header .mpn-section-intro {
    margin-bottom: 0;
}

/* --- Indicateur de complétion (XX% en grand) --- */
.mpn-completion {
    text-align: right;
    min-width: 140px;
}
.mpn-completion-value {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 28px;
    color: #C8973A;
    line-height: 1;
}
.mpn-completion-label {
    font-size: 12px;
    color: #5A5A5A;
    margin-top: 4px;
}

/* --- Barre de progression --- */
.mpn-progress-bar {
    height: 6px;
    background: #F3EEE2;
    border-radius: 100px;
    overflow: hidden;
    margin: 18px 0 24px 0;
}
.mpn-progress-fill {
    height: 100%;
    background: #C8973A;
    border-radius: 100px;
    transition: width 0.3s;
}

/* --- Alertes (feedback success/error) --- */
.mpn-alert {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.5;
    border: 1px solid transparent;
}
.mpn-alert--lg {
    margin-bottom: 20px;
    font-size: 14px;
}
.mpn-alert--success {
    background: #E1F5EE;
    color: #0F6E56;
    border-color: rgba(15, 110, 86, 0.2);
}
.mpn-alert--error {
    background: #FBEAEA;
    color: #A03030;
    border-color: rgba(160, 48, 48, 0.2);
}

/* --- Form basics : label + input + select --- */
.mpn-form-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #0D1B2A;
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}
.mpn-form-input,
.mpn-form-select {
    width: 100%;
    padding: 11px 14px;
    background: #FFFFFF;
    border: 1px solid #D6D9DC;
    border-radius: 4px;
    font-size: 14px;
    color: #0D1B2A;
    box-sizing: border-box;
    font-family: inherit;
}
.mpn-form-input:focus,
.mpn-form-select:focus {
    outline: none;
    border-color: #C8973A;
    box-shadow: 0 0 0 3px rgba(200, 151, 58, 0.15);
}

/* Variante avec margin-bottom (pour empilement vertical) */
.mpn-form-input--mb { margin-bottom: 14px; }

/* --- Étoile required dorée --- */
.mpn-required { color: #C8973A; }

/* --- Pastille rouge "champ à compléter" (affichée seulement si vide) --- */
.mpn-field-todo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    background: #A03030;
    color: #FFFFFF;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    vertical-align: -2px;
}

/* --- Grille de champs (profil dirigeant) --- */
.mpn-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px 24px;
}

/* --- Bouton primaire doré (sur fond clair) --- */
.mpn-btn-primary {
    display: inline-block;
    padding: 12px 28px;
    background: #C8973A;
    color: #0D1B2A;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    text-align: center;
    transition: background 0.2s, transform 0.2s;
}
.mpn-btn-primary:hover,
.mpn-btn-primary:focus {
    background: #E8B86D;
    color: #0D1B2A;
    transform: translateY(-1px);
}
/* Variante full-width (pour magic link request form) */
.mpn-btn-primary--full {
    width: 100%;
    padding: 12px 24px;
    border-radius: 4px;
}
/* Variante "large" pour CTA hero (plus grand padding, font, border-radius plus marqué) */
.mpn-btn-primary--lg {
    padding: 14px 32px;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    border-radius: 4px;
}

/* --- Container des actions de form (bouton submit) --- */
.mpn-form-actions {
    margin-top: 24px;
}

/* --- Message d'aide sous un input --- */
.mpn-form-hint {
    font-size: 12px;
    color: #5A5A5A;
    margin: 12px 0 0 0;
    line-height: 1.5;
}

/* --- Form magic link sur /connexion (alignement gauche dans la card UM) --- */
.mpn-magic-form-wrap {
    text-align: left;
}

/* --- Form password : largeur max plus étroite (lisibilité) --- */
.mpn-password-form {
    max-width: 420px;
}


/* =====================================================
   11. ESN RÉPERTOIRE — Grille des ESN partenaires (front public)
   (Refactor depuis esn-repertoire.php le 2026-05-06)
   ===================================================== */

/* --- Grille des cards ESN --- */
.mpn-esn-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media (max-width: 900px) {
    .mpn-esn-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .mpn-esn-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Card d'une ESN --- */
.mpn-esn-card {
    background: #FFFFFF;
    border: 1px solid #EDE9E0;
    border-radius: 12px;
    padding: 28px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.mpn-esn-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(13, 27, 42, 0.06);
    border-color: rgba(200, 151, 58, 0.3);
}

/* Header de la card : logo + nom + specs */
.mpn-esn-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

/* --- Logo de l'ESN (carré 44x44 avec favicon ou initiales) --- */
.mpn-esn-logo {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #F7F4EE;
    border: 1px solid #EDE9E0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.mpn-esn-logo-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}
/* Variante fallback : carré sombre avec initiales dorées */
.mpn-esn-logo--fallback {
    background: #0D1B2A;
    border-color: #0D1B2A;
    font-size: 16px;
    font-weight: 600;
    color: #C8973A;
}

/* Nom de l'ESN (Playfair) */
.mpn-esn-name {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    color: #0D1B2A;
    line-height: 1.2;
}

/* --- Pastilles de spécialités --- */
.mpn-esn-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.mpn-esn-spec {
    font-size: 10px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 100px;
    /* Couleur par défaut (IA / autres) : VERT */
    background: #E1F5EE;
    color: #0F6E56;
}
/* Cybersécurité : ROUGE (urgence) */
.mpn-esn-spec--cyber       { background: #FBEAEA; color: #A03030; }
/* Conformité : BLEU (confiance) */
.mpn-esn-spec--conformite  { background: #E6F1FB; color: #185FA5; }

/* --- Description courte --- */
.mpn-esn-desc {
    font-size: 13px;
    color: #5A5A5A;
    line-height: 1.6;
    margin: 0 0 16px 0;
}

/* --- Zone géographique (avec icone pin) --- */
.mpn-esn-zone {
    font-size: 12px;
    color: #A0A0A0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.mpn-esn-zone svg {
    flex-shrink: 0;
}

/* --- Empty state (aucun partenaire dispo) --- */
.mpn-esn-empty {
    color: #5A5A5A;
}


/* =====================================================
   12. DASHBOARD DIRIGEANT — Espace dirigeant
   (Refactor depuis dashboard-dirigeant.php le 2026-05-06)
   ===================================================== */

/* --- A. Empty state "Bienvenue, première demande" --- */
.mpn-welcome-empty {
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
    padding: 48px 0;
}
.mpn-hero-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(200, 151, 58, 0.1);
    border: 1px solid rgba(200, 151, 58, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}
.mpn-welcome-title {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    color: #0D1B2A;
    margin: 0 0 12px 0;
}
.mpn-welcome-lead {
    font-size: 15px;
    color: #5A5A5A;
    line-height: 1.7;
    margin: 0 0 40px 0;
}
.mpn-welcome-form-card {
    background: #FFFFFF;
    border: 1px solid #EDE9E0;
    border-radius: 12px;
    padding: 40px;
    text-align: left;
}

/* Trio de petites stats (48h / 3 / 0€) */
.mpn-mini-stats {
    margin-top: 32px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 600px) {
    .mpn-mini-stats { grid-template-columns: 1fr; }
}
.mpn-mini-stat {
    background: #FFFFFF;
    border: 1px solid #EDE9E0;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}
.mpn-mini-stat-value {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    color: #C8973A;
    margin-bottom: 6px;
    line-height: 1;
}
.mpn-mini-stat-label {
    font-size: 12px;
    color: #5A5A5A;
}

/* --- B. Header de page (kicker+titre à gauche, bouton à droite) --- */
.mpn-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 12px;
}
.mpn-page-kicker {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #C8973A;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.mpn-page-kicker-bar {
    display: block;
    width: 20px;
    height: 1px;
    background: #C8973A;
}
.mpn-page-title {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    color: #0D1B2A;
    margin: 0;
}

/* --- Bouton sombre (CTA secondaire) --- */
.mpn-btn-dark {
    background: #0D1B2A;
    color: #FFFFFF;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    transition: background 0.2s, transform 0.2s;
}
.mpn-btn-dark:hover,
.mpn-btn-dark:focus {
    background: #1A3048;
    color: #FFFFFF;
    transform: translateY(-1px);
}
/* Variante "large" pour CTA sombre principal (ex: bouton ESN partenaires) */
.mpn-btn-dark--lg {
    padding: 14px 28px;
    font-size: 15px;
    border-radius: 4px;
}

/* --- C. Card form caché (toggle) --- */
.mpn-form-toggle-wrap {
    margin-bottom: 32px;
}
.mpn-form-toggle-card {
    background: #FFFFFF;
    border: 1px solid #EDE9E0;
    border-radius: 12px;
    padding: 40px;
}

/* --- D. Liste de demandes --- */
.mpn-requests-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 32px;
}

/* Card d'une demande */
.mpn-request-card {
    background: #FFFFFF;
    border: 1px solid #EDE9E0;
    border-radius: 12px;
    padding: 28px;
}
/* Variante "mise en relation" : bordure dorée pour signaler la valeur */
.mpn-request-card--highlight {
    border-color: #C8973A;
}

.mpn-request-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}
.mpn-request-title {
    font-size: 16px;
    font-weight: 500;
    color: #0D1B2A;
    margin-bottom: 4px;
}
.mpn-request-date {
    font-size: 12px;
    color: #A0A0A0;
}

/* Description avec séparateur */
.mpn-request-desc {
    font-size: 14px;
    color: #5A5A5A;
    line-height: 1.65;
    margin: 0 0 16px 0;
    padding-bottom: 16px;
    border-bottom: 1px solid #EDE9E0;
}

/* Footer info statut (avec icône) */
.mpn-status-info {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #EDE9E0;
    font-size: 13px;
    color: #5A5A5A;
    display: flex;
    align-items: center;
    gap: 8px;
}
.mpn-status-info svg { flex-shrink: 0; }

/* --- E. Recommandations ESN (sous une demande "mise en relation") --- */
.mpn-rec-section {
    margin-top: 8px;
}
.mpn-rec-title {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #C8973A;
    margin-bottom: 16px;
}
/* Grille adaptative : auto-fit avec minimum 380px par card.
   - 1 ESN : prend toute la largeur
   - 2 ESN : 2 colonnes si l'espace le permet, sinon 1 par ligne
   - 3 ESN : 3 colonnes si l'espace le permet, sinon 2 ou 1 par ligne
   Les cards sont donc toujours dimensionnées de manière confortable. */
.mpn-rec-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
}
@media (max-width: 480px) {
    .mpn-rec-grid {
        grid-template-columns: 1fr;
    }
}

.mpn-rec-card {
    background: #F7F4EE;
    border-radius: 8px;
    padding: 20px;
}
.mpn-rec-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.mpn-rec-logo {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #FFFFFF;
    border: 1px solid #EDE9E0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.mpn-rec-logo-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}
.mpn-rec-logo--fallback {
    background: #0D1B2A;
    border-color: #0D1B2A;
    font-family: 'Playfair Display', serif;
    font-size: 13px;
    font-weight: 600;
    color: #C8973A;
}
.mpn-rec-name {
    font-family: 'Playfair Display', serif;
    font-size: 15px;
    color: #0D1B2A;
}
.mpn-rec-spec {
    font-size: 11px;
    color: #C8973A;
    font-weight: 500;
}

.mpn-rec-message {
    background: #FFFFFF;
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 12px;
}
.mpn-rec-message-label {
    font-size: 11px;
    font-weight: 500;
    color: #0D1B2A;
    margin-bottom: 4px;
}
.mpn-rec-message-text {
    font-size: 12px;
    color: #5A5A5A;
    line-height: 1.55;
    margin: 0;
}

.mpn-btn-contact {
    display: block;
    text-align: center;
    background: #0D1B2A;
    color: #FFFFFF;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 5px;
    text-decoration: none;
    transition: background 0.2s;
}
.mpn-btn-contact:hover,
.mpn-btn-contact:focus {
    background: #1A3048;
    color: #FFFFFF;
}
.mpn-btn-contact-hint {
    text-align: center;
    font-size: 11px;
    color: #A0A0A0;
    margin-top: 6px;
}

/* --- F. Bloc parcours (timeline d'étapes) --- */
.mpn-journey {
    background: #FFFFFF;
    border: 1px solid #EDE9E0;
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 24px;
}
.mpn-journey-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #0D1B2A;
    margin: 0 0 24px 0;
    letter-spacing: -0.005em;
}
.mpn-journey-steps {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.mpn-journey-step {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.mpn-journey-step--inactive { opacity: 0.4; }

.mpn-journey-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #F7F4EE;
    border: 1px solid #EDE9E0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mpn-journey-icon--gold  { background: rgba(200, 151, 58, 0.1); border-color: #C8973A; }
.mpn-journey-icon--green { background: rgba(15, 110, 86, 0.1);  border-color: #0F6E56; }
.mpn-journey-icon--gray  { background: #F7F4EE;                 border-color: #5A5A5A; }

.mpn-journey-step-title {
    font-size: 14px;
    font-weight: 500;
    color: #0D1B2A;
    margin-bottom: 4px;
}
.mpn-journey-step-desc {
    font-size: 13px;
    color: #5A5A5A;
    line-height: 1.6;
}

/* --- G. Blocs info bas de page (2 colonnes) --- */
.mpn-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
@media (max-width: 700px) {
    .mpn-info-grid { grid-template-columns: 1fr; }
}

.mpn-info-block {
    background: #FFFFFF;
    border: 1px solid #EDE9E0;
    border-radius: 12px;
    padding: 28px;
}
.mpn-info-block-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5A5A5A;
    margin-bottom: 14px;
}
.mpn-info-block-value {
    font-family: 'Playfair Display', serif;
    font-size: 40px;
    color: #C8973A;
    line-height: 1;
    margin-bottom: 10px;
}
.mpn-info-block-value--blue  { color: #185FA5; }
.mpn-info-block-value--green { color: #0F6E56; }
.mpn-info-block-value--gray  { color: #5A5A5A; }

.mpn-info-block-text {
    font-size: 13px;
    color: #5A5A5A;
    line-height: 1.6;
    margin: 0 0 16px 0;
}


/* =====================================================
   13. SECTION ESN PARTENAIRES (home, "Vous êtes une ESN")
   (Refactor depuis widgets HTML Elementor le 2026-05-06)
   ===================================================== */

/* --- Item de feature avec pastille sombre + coche dorée --- */
.mpn-feature-check {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 20px;
}
/* Variante pour le dernier item de la liste (espace avant le bouton) */
.mpn-feature-check--last {
    margin-bottom: 32px;
}

.mpn-feature-check-icon {
    width: 22px;
    height: 22px;
    background: #0D1B2A;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.mpn-feature-check-text {
    font-size: 15px;
    color: #5A5A5A;
    line-height: 1.6;
}
.mpn-feature-check-text strong {
    color: #0D1B2A;
    font-weight: 500;
}


/* --- Card "Commission par lead qualifié" --- */
.mpn-commission-card {
    background: #FFFFFF;
    border: 1px solid #EDE9E0;
    border-radius: 12px;
    padding: 40px;
}

/* Hero de la card : kicker + valeur + sub, séparés par un trait */
.mpn-commission-hero {
    text-align: center;
    padding-bottom: 28px;
    border-bottom: 1px solid #EDE9E0;
    margin-bottom: 28px;
}
.mpn-commission-kicker {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #5A5A5A;
    margin-bottom: 12px;
}
.mpn-commission-value {
    font-family: 'Playfair Display', serif;
    font-size: 50px;
    color: #0D1B2A;
    line-height: 1;
}
.mpn-commission-sub {
    font-size: 13px;
    color: #5A5A5A;
    margin-top: 8px;
}

/* Liste de lignes label/montant */
.mpn-commission-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.mpn-commission-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 14px;
}
/* Ligne finale (ROI) : avec un trait au-dessus */
.mpn-commission-row--total {
    padding-top: 12px;
    border-top: 1px solid #EDE9E0;
}

.mpn-commission-label {
    color: #5A5A5A;
}
.mpn-commission-label--strong {
    color: #0D1B2A;
    font-weight: 500;
}
.mpn-commission-amount {
    font-weight: 500;
    color: #0D1B2A;
    white-space: nowrap;
}
.mpn-commission-amount--gold {
    color: #C8973A;
}


/* =====================================================
   14. INTRO DE SECTION PUBLIQUE (kicker + titre + lead, centré)
   Pattern réutilisable pour les en-têtes de section sur la home et pages publiques
   ===================================================== */

.mpn-intro-wrap {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.mpn-intro-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #C8973A;
    margin-bottom: 16px;
}
/* Tiret doré généré automatiquement avant le texte (24×1 px).
   Plus besoin de mettre <span class="mpn-intro-bar"> dans le HTML. */
.mpn-intro-kicker::before {
    content: "";
    display: block;
    width: 24px;
    height: 1px;
    background: #C8973A;
    flex-shrink: 0;
}
/* Compat : l'ancien span existant dans les widgets déjà déployés est masqué
   pour éviter le double tiret. À nettoyer progressivement. */
.mpn-intro-bar {
    display: none;
}
/* Si on veut explicitement un kicker SANS tiret (rare) */
.mpn-intro-kicker--bare::before {
    content: none;
}

.mpn-intro-title {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    color: #0D1B2A;
    line-height: 1.2;
    margin: 0 0 12px 0;
}

.mpn-intro-lead {
    font-size: 15px;
    color: #5A5A5A;
    font-weight: 300;
    margin: 0 0 40px 0;
}

/* Variante du kicker intro avec margin-bottom plus généreux (avant une card hero) */
.mpn-intro-kicker--spaced {
    margin-bottom: 32px;
}


/* =====================================================
   15. BLOC FONDATEUR + PATTERNS RÉUTILISABLES
   (Refactor depuis widget HTML founder le 2026-05-06)
   ===================================================== */

/* Wrapper section founder */
.mpn-founder-section {
    max-width: 960px;
    margin: 0 auto;
    padding: 60px 20px 40px;
}

/* Card grid (photo à gauche, bio à droite) */
.mpn-founder-card {
    background: #FFFFFF;
    border: 1px solid #EDE9E0;
    border-radius: 16px;
    padding: 40px;
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 40px;
    align-items: center;
}
.mpn-founder-card img {
    width: 180px;
    height: 180px;
    border-radius: 14px;
    object-fit: cover;
    display: block;
}
@media (max-width: 640px) {
    .mpn-founder-card {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 32px 24px;
        gap: 24px;
    }
    .mpn-founder-card img {
        margin: 0 auto;
        width: 140px;
        height: 140px;
    }
    .mpn-founder-card .mpn-quote {
        text-align: left;
    }
}

/* Nom du fondateur (Playfair 26px) */
.mpn-founder-name {
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    font-weight: 600;
    color: #0D1B2A;
    line-height: 1.2;
    margin: 0 0 6px 0;
}

/* Rôle "Fondateur" (kicker doré) */
.mpn-founder-role {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #C8973A;
    margin-bottom: 22px;
}

/* --- Pattern réutilisable : citation Playfair italique avec barre dorée --- */
/* Utiliser pour témoignages, citations dirigeant, mises en avant éditoriales. */
.mpn-quote {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 18px;
    font-weight: 400;
    color: #0D1B2A;
    line-height: 1.55;
    margin: 22px 0;
    padding-left: 18px;
    border-left: 2px solid #C8973A;
}

/* --- Pattern réutilisable : lien CTA inline avec flèche --- */
/* Utiliser pour "En savoir plus", "Voir tout", "Découvrir", etc. */
.mpn-link-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #C8973A;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: gap 0.2s ease, color 0.2s ease;
}
.mpn-link-cta:hover,
.mpn-link-cta:focus {
    color: #B07F2A;
    gap: 12px;
    text-decoration: none;
}


/* =====================================================
   16. LISTE DE CHIFFRES CLÉS (avec source)
   Pattern utilisé sur le hero sidebar "Le marché en chiffres"
   Réutilisable pour toute liste de stats avec source citée
   ===================================================== */

/* Une ligne de stat (chiffre + texte + source) */
.mpn-fact-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 16px 0;
    border-bottom: 1px solid #1E3448; /* couleur de séparateur sur fond navy */
}
/* Variante pour le dernier item de la liste : pas de séparateur en bas */
.mpn-fact-row--last {
    border-bottom: none;
}

/* Le grand chiffre doré (80%, 78k€, 77%, etc.) */
.mpn-fact-row-value {
    font-family: 'Playfair Display', serif;
    font-size: 46px;
    font-weight: 600;
    color: #C8973A;
    min-width: 110px;
    line-height: 1.1;
}

/* Le texte explicatif (gris-bleu sur fond sombre) */
.mpn-fact-row-text {
    font-size: 14px;
    color: #6A8AA0;
    line-height: 1.5;
    padding-top: 4px;
}

/* La source citée (italique, plus petite, atténuée, sur sa propre ligne) */
.mpn-fact-row-source {
    display: block;
    font-size: 11px;
    opacity: 0.7;
    font-style: italic;
    margin-top: 4px;
}


/* =====================================================
   17. CARDS "OBSTACLE / PROBLÈME" (numéro + titre + desc)
   Pattern utilisé sur la section "Trois obstacles" de la home
   Réutilisable pour toute card avec grand chiffre décoratif + titre + texte
   ===================================================== */

.mpn-obstacle-card {
    background: #FFFFFF;
    padding: 40px 32px;
    border-radius: 8px;
    height: 100%;
}

/* Grand chiffre décoratif (01, 02, 03...) */
.mpn-obstacle-num {
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    font-weight: 600;
    color: #0D1B2A;
    opacity: 0.25;
    line-height: 1;
    margin-bottom: 20px;
}

.mpn-obstacle-title {
    font-size: 16px;
    font-weight: 500;
    color: #0D1B2A;
    margin-bottom: 12px;
}

.mpn-obstacle-desc {
    font-size: 14px;
    color: #5A5A5A;
    line-height: 1.65;
}


/* =====================================================
   18. CARDS "DOMAINE / EXPERTISE" (icône carrée + titre + desc)
   Pattern utilisé sur la section "Notre approche" de la home (3 piliers)
   ===================================================== */

.mpn-domain-card {
    border: 1px solid #EDE9E0;
    border-radius: 12px;
    padding: 36px 28px;
    height: 100%;
}

/* Carré d'icône (fond crème, padding center) */
.mpn-domain-icon {
    width: 44px;
    height: 44px;
    background: #F7F4EE;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.mpn-domain-title {
    font-size: 17px;
    font-weight: 500;
    color: #0D1B2A;
    margin-bottom: 10px;
}

.mpn-domain-desc {
    font-size: 14px;
    color: #5A5A5A;
    line-height: 1.65;
}


/* =====================================================
   19. TABLEAU COMPARATIF "Pourquoi nous"
   Pattern utilisé sur la home (MPN vs annuaires/comparateurs/cabinets)
   Réutilisable pour tout tableau de comparaison.
   ===================================================== */

.mpn-compare-wrap {
    max-width: 1140px;
    margin: 0 auto;
    padding: 80px 20px;
}

/* Header de section (kicker + h2 + lead) — utilise .mpn-intro-kicker du theme */
.mpn-compare-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 48px;
}
.mpn-compare-title {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    font-weight: 600;
    color: #0D1B2A;
    line-height: 1.2;
    margin: 0 0 16px 0;
}
.mpn-compare-lead {
    font-size: 16px;
    color: #5A5A5A;
    line-height: 1.65;
    margin: 0;
    font-weight: 300;
}

/* Card conteneur du tableau */
.mpn-compare-table-card {
    background: #FFFFFF;
    border: 1px solid #EDE9E0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(13, 27, 42, 0.04);
}
.mpn-compare-scroll {
    overflow-x: auto;
}

/* Le tableau */
.mpn-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'DM Sans', sans-serif;
    min-width: 820px;
}

/* Headers (génériques) */
.mpn-compare-table th {
    padding: 20px 18px;
    border-bottom: 1px solid #EDE9E0;
    font-weight: 500;
}
.mpn-compare-th--criteria {
    text-align: left;
    background: #0D1B2A;
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.mpn-compare-th--self {
    text-align: center;
    background: #C8973A;
    color: #0D1B2A;
    font-size: 14px;
    font-weight: 600;
}
.mpn-compare-th--other {
    text-align: center;
    background: #0D1B2A;
    color: #FFFFFF;
    font-size: 13px;
}

/* Cellules body */
.mpn-compare-table td {
    padding: 18px;
    border-bottom: 1px solid #F3EEE2;
}
.mpn-compare-table tr:last-child td {
    border-bottom: none;
}

.mpn-compare-td--criteria {
    font-size: 14px;
    font-weight: 500;
    color: #0D1B2A;
}
.mpn-compare-td--self {
    text-align: center;
    background: rgba(200, 151, 58, 0.05);
}
.mpn-compare-td--other {
    text-align: center;
    font-size: 12px;
    color: #5A5A5A;
}

/* Pastille ronde ✓ / ± / ✕ */
.mpn-compare-pill {
    display: inline-block;
    width: 22px;
    height: 22px;
    line-height: 22px;
    border-radius: 50%;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}
.mpn-compare-pill--yes     { background: #0F6E56; }
.mpn-compare-pill--partial { background: #C8973A; font-size: 12px; }
.mpn-compare-pill--no      { background: #A03030; }

/* Texte sous la pastille (sous-explication courte) */
.mpn-compare-cell-text {
    display: inline-block;
    margin-top: 6px;
    font-size: 11px;
    color: #5A5A5A;
}

/* Cellule sans pastille (texte simple, ex "Délai avant contact") */
.mpn-compare-td--self.mpn-compare-text-only {
    font-size: 12px;
    color: #0D1B2A;
    font-weight: 500;
}

/* Mention secondaire (ex: "(DIY)") */
.mpn-compare-note {
    display: block;
    font-size: 11px;
    color: #A0A0A0;
    margin-top: 2px;
}

/* Disclaimer en bas de section */
.mpn-compare-disclaimer {
    text-align: center;
    margin: 32px auto 0;
    font-size: 13px;
    color: #5A5A5A;
    font-style: italic;
    max-width: 720px;
    line-height: 1.6;
}


/* =====================================================
   20. CARDS "ÉTAPE DE PROCESSUS" (sur fond sombre)
   Pattern utilisé sur la section "Trois étapes, zéro friction"
   Cercle numéroté doré + titre blanc + desc en transparence
   ===================================================== */

.mpn-step-card {
    text-align: center;
    padding: 0 24px;
}

/* Cercle 56×56 avec le numéro d'étape (doré sur fond doré transparent) */
.mpn-step-number {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid rgba(200, 151, 58, 0.4);
    background: rgba(200, 151, 58, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 600;
    color: #C8973A;
}

.mpn-step-title {
    font-size: 16px;
    font-weight: 500;
    color: #FFFFFF;
    margin-bottom: 12px;
}

.mpn-step-desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.65;
}


/* =====================================================
   21. HERO DE PAGE PUBLIQUE (sur fond sombre)
   Pattern utilisé sur la FAQ, à dupliquer sur /à-propos, /contact, etc.
   Centré, kicker doré + h1 Playfair 48px blanc + lead transparent
   ===================================================== */

.mpn-page-hero {
    text-align: center;
    max-width: 680px;
    margin: 0 auto;
    padding: 100px 20px 60px;
}

.mpn-page-hero-title {
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 1.2;
    margin: 0 0 20px 0;
}

.mpn-page-hero-lead {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.7;
    font-weight: 300;
    margin: 0;
}


/* =====================================================
   22. EN-TÊTES DE BLOC DE SECTION (FAQ et pages longues)
   Wrapper avec padding généreux + kicker + h2 réutilisable
   ===================================================== */

.mpn-section-block {
    max-width: 800px;
    margin: 0 auto;
    padding: 96px 0 48px;
}

/* H2 de section (36px Playfair navy) — réutilisable sur FAQ, pages pilier, etc. */
.mpn-section-h2 {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    font-weight: 600;
    color: #0D1B2A;
    line-height: 1.2;
    margin: 0 0 8px 0;
}


/* =====================================================
   23. FAQ ACCORDÉON (utilise <details>/<summary> natifs)
   Pattern utilisé sur la page FAQ. Zéro JS, a11y native.
   ===================================================== */

.mpn-faq-list {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 0 96px;
}

.mpn-faq-item {
    border-bottom: 1px solid #EDE9E0;
}

/* La question (summary du details) — stylée comme un bouton header */
.mpn-faq-question {
    list-style: none; /* enlève le triangle natif */
    cursor: pointer;
    padding: 24px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #0D1B2A;
}
/* Compat Safari : enlève aussi le marker WebKit */
.mpn-faq-question::-webkit-details-marker {
    display: none;
}

/* Icône + / × dorée à droite */
.mpn-faq-question::after {
    content: "+";
    font-size: 20px;
    color: #C8973A;
    font-weight: 300;
    flex-shrink: 0;
    line-height: 1;
}
.mpn-faq-item[open] .mpn-faq-question::after {
    content: "×";
}

/* Réponse : paragraphe gris en dessous */
.mpn-faq-answer {
    padding-bottom: 24px;
    font-size: 15px;
    color: #5A5A5A;
    line-height: 1.7;
}
.mpn-faq-answer p {
    margin: 0;
}
.mpn-faq-answer p + p {
    margin-top: 12px;
}
/* Mise en valeur d'un mot clé dans une réponse (ex: email, montant) */
.mpn-faq-answer strong {
    color: #0D1B2A;
}


/* =====================================================
   24. CTA DE FIN DE PAGE (sur fond sombre)
   Pattern utilisé sur la FAQ ("Vous n'avez pas trouvé votre réponse ?")
   Réutilisable pour fin de page pilier, /contact, etc.
   ===================================================== */

.mpn-cta-block {
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
    padding: 96px 0;
}

.mpn-cta-title {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 1.25;
    margin: 0 0 20px 0;
}

.mpn-cta-lead {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.7;
    font-weight: 300;
    margin: 0 0 40px 0;
}

/* Bouton CTA doré (cohérent avec le CTA hero) */
.mpn-cta-btn {
    display: inline-block;
    background: #C8973A;
    color: #0D1B2A;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 14px 32px;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 8px rgba(200, 151, 58, 0.2);
}
.mpn-cta-btn:hover,
.mpn-cta-btn:focus {
    background: #E8B86D;
    color: #0D1B2A;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(200, 151, 58, 0.3);
}


/* =====================================================
   25. BLOC COORDONNÉES (page Contact, sur fond sombre)
   Pattern : 2 blocs (email + LinkedIn) + 1 bloc legal séparé
   ===================================================== */

.mpn-contact-info {
    padding: 20px 0;
}

.mpn-contact-block {
    margin-bottom: 32px;
}

/* Variante avec séparateur en haut (Informations légales) */
.mpn-contact-block--legal {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Valeur principale (email, lien LinkedIn)
   inline-flex permet d'aligner une icône SVG avec le texte. */
.mpn-contact-value {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 15px;
    font-weight: 400;
    transition: color 0.2s ease;
}
.mpn-contact-value svg {
    flex-shrink: 0;
}
.mpn-contact-value:hover,
.mpn-contact-value:focus {
    color: #C8973A;
    text-decoration: none;
}
/* Variante grande (pour l'email principal mis en avant) */
.mpn-contact-value--lg {
    font-size: 18px;
}

/* Note en gris transparent sous la valeur */
.mpn-contact-note {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.6;
    margin: 10px 0 0 0;
}

/* Bloc infos légales (texte multi-lignes) */
.mpn-contact-legal {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.8;
}
.mpn-contact-legal-name {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}


/* =====================================================
   26. EN-TÊTE DE CARD FORMULAIRE (kicker + h2 24px)
   Pattern utilisé sur la page Contact, en haut de la card du form
   Padding asymétrique (40-36-16) car suivi par le form WPForms
   ===================================================== */

.mpn-form-header-card {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 40px 36px 16px;
}

.mpn-form-header-title {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-weight: 600;
    color: #0D1B2A;
    line-height: 1.3;
    margin: 0;
}


/* =====================================================
   27. BARRE DE FILTRES (boutons pill toggle)
   Pattern utilisé sur la page ESN partenaires
   États gérés par aria-pressed (a11y standard)
   ===================================================== */

/* Container vertical pour 2 barres (pilier + région), filtres combinables */
.mpn-filter-bars {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mpn-filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.mpn-filter-label {
    font-size: 13px;
    color: #5A5A5A;
    font-weight: 500;
    margin-right: 4px;
}

/* Bouton pill (état inactif par défaut : fond blanc, border crème).
   !important nécessaire pour battre le style global d'Astra sur les <button>. */
.mpn-filter-pill {
    padding: 8px 18px !important;
    border-radius: 100px !important;
    border: 1px solid #EDE9E0 !important;
    background: #FFFFFF !important;
    color: #5A5A5A !important;
    font-size: 13px !important;
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    box-shadow: none !important;
}
.mpn-filter-pill:hover,
.mpn-filter-pill:focus-visible {
    background: #FFFFFF !important;
    border-color: #0D1B2A !important;
    color: #0D1B2A !important;
}

/* État actif (sélectionné) : fond sombre, texte blanc — géré par aria-pressed */
.mpn-filter-pill[aria-pressed="true"] {
    background: #0D1B2A !important;
    border-color: #0D1B2A !important;
    color: #FFFFFF !important;
}
.mpn-filter-pill[aria-pressed="true"]:hover,
.mpn-filter-pill[aria-pressed="true"]:focus-visible {
    background: #1A3048 !important;
    border-color: #1A3048 !important;
    color: #FFFFFF !important;
}


/* =====================================================
   28. CARDS ESN DÉTAILLÉES (page Nos ESN partenaires)
   Pattern riche : logo coloré + badges spécialités + meta + vérifié
   + description + tags expertises + secteurs + CTA
   ===================================================== */

.mpn-esn-card-detailed {
    background: #FFFFFF;
    border: 1px solid #EDE9E0;
    border-radius: 12px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.mpn-esn-card-detailed:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(13, 27, 42, 0.06);
    border-color: rgba(200, 151, 58, 0.3);
}

/* Header : logo à gauche, badges spécialités à droite */
.mpn-esn-detailed-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 12px;
}

/* Logo carré : par défaut fond neutre (utilisé quand on a une image logo).
   Les modifiers --cyber / --ia / --conformite ne s'appliquent qu'aux initiales. */
.mpn-esn-detailed-logo {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-weight: 600;
    flex-shrink: 0;
    background: #FFFFFF;
    color: #0D1B2A;
    border: 1px solid #EDE9E0;
}
.mpn-esn-detailed-logo--cyber      { background: #FBEAEA; color: #A03030; border-color: transparent; }
.mpn-esn-detailed-logo--ia         { background: #E1F5EE; color: #0F6E56; border-color: transparent; }
.mpn-esn-detailed-logo--conformite { background: #E6F1FB; color: #185FA5; border-color: transparent; }

/* Image dans le logo (priorité sur les initiales si l'ESN a uploadé un logo) */
.mpn-esn-detailed-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
    padding: 4px; /* léger padding pour aérer le logo dans le carré coloré */
    box-sizing: border-box;
}

/* Container badges spécialités (peuvent être plusieurs empilés à droite) */
.mpn-esn-detailed-specs {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}
.mpn-esn-detailed-spec {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 100px;
    /* Default neutre (le modifier est toujours appliqué par mpn_esn_detailed_modifier) */
    background: #F7F4EE;
    color: #5A5A5A;
}
.mpn-esn-detailed-spec--cyber      { background: #FBEAEA; color: #A03030; }
.mpn-esn-detailed-spec--ia         { background: #E1F5EE; color: #0F6E56; }
.mpn-esn-detailed-spec--conformite { background: #E6F1FB; color: #185FA5; }

/* Nom de l'ESN (DM Sans semi-bold pour la lisibilité) */
.mpn-esn-detailed-name {
    font-family: 'DM Sans', sans-serif;
    font-size: 19px;
    font-weight: 600;
    color: #0D1B2A;
    margin: 0 0 4px 0;
    line-height: 1.25;
    letter-spacing: -0.005em;
}

/* Meta info ligne (zone + collaborateurs séparés par gap) */
.mpn-esn-detailed-meta {
    font-size: 13px;
    color: #5A5A5A;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

/* Badge "Partenaire vérifié MonPilote" (vert avec coche) */
.mpn-esn-detailed-verified {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #0F6E56;
    font-weight: 500;
    margin-bottom: 16px;
}

/* Description (flex:1 pour pousser le CTA en bas alignement entre cards) */
.mpn-esn-detailed-desc {
    font-size: 14px;
    color: #5A5A5A;
    line-height: 1.65;
    margin: 0 0 20px 0;
    flex: 1;
}

/* Container tags d'expertise */
.mpn-esn-detailed-expertises {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 24px;
}
.mpn-esn-detailed-expertise {
    font-size: 12px;
    color: #5A5A5A;
    background: #F7F4EE;
    border-radius: 4px;
    padding: 3px 10px;
}

/* Section secteurs accompagnés (avec border-top de séparation) */
.mpn-esn-detailed-sectors {
    border-top: 1px solid #EDE9E0;
    padding-top: 16px;
    margin-bottom: 20px;
}
.mpn-esn-detailed-sectors-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5A5A5A;
    margin-bottom: 8px;
}
.mpn-esn-detailed-sectors-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.mpn-esn-detailed-sector {
    font-size: 12px;
    color: #0D1B2A;
    background: #F7F4EE;
    padding: 3px 10px;
    border-radius: 4px;
}

/* Encart "Votre contact" (contact privilégié de l'ESN partenaire) */
.mpn-esn-detailed-contact {
    background: #FAF8F2;
    border: 1px solid #EDE9E0;
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 12px;
}
.mpn-esn-detailed-contact-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #C8973A;
    margin-bottom: 6px;
}
.mpn-esn-detailed-contact-name {
    font-size: 14px;
    font-weight: 600;
    color: #0D1B2A;
    line-height: 1.3;
}
.mpn-esn-detailed-contact-fonction {
    font-size: 12px;
    color: #5A5A5A;
    margin-top: 2px;
}
.mpn-esn-detailed-contact-tel {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #5A5A5A;
    margin-top: 6px;
}
.mpn-esn-detailed-contact-tel a {
    color: #0D1B2A;
    text-decoration: none;
    font-weight: 500;
}
.mpn-esn-detailed-contact-tel a:hover {
    color: #C8973A;
    text-decoration: underline;
}

/* CTA "Demander une mise en relation" (full width sombre) */
.mpn-esn-detailed-cta {
    display: block;
    width: 100%;
    background: #0D1B2A;
    color: #FFFFFF;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    padding: 12px;
    border-radius: 6px;
    text-align: center;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
    margin-top: auto; /* colle en bas si pas de section secteurs */
}
.mpn-esn-detailed-cta:hover,
.mpn-esn-detailed-cta:focus {
    background: #1A3048;
    color: #FFFFFF;
    transform: translateY(-1px);
}


/* =====================================================
   29. DASHBOARD DIRIGEANT — LAYOUT SIDEBAR + TABS
   Refactor du shortcode [mpn_dashboard_dirigeant] le 2026-05-07.
   Place ce shortcode dans une section Elementor 1 colonne pleine largeur.
   ===================================================== */

/* --- Wrapper grille : sidebar 260px + main fluide --- */
.mpn-dashboard-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 32px;
    align-items: start;
}
@media (max-width: 900px) {
    .mpn-dashboard-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* --- A. Sidebar de navigation --- */
.mpn-dashboard-nav {
    background: #FFFFFF;
    border: 1px solid #EDE9E0;
    border-radius: 12px;
    padding: 20px 0;
    position: sticky;
    top: 100px;
}
@media (max-width: 900px) {
    .mpn-dashboard-nav {
        position: static;
        padding: 8px 0;
    }
}

.mpn-dashboard-nav-header {
    padding: 0 24px 16px;
    border-bottom: 1px solid #F2EEE5;
    margin-bottom: 12px;
}
.mpn-dashboard-nav-prenom {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    color: #0D1B2A;
    margin: 0 0 2px 0;
    line-height: 1.2;
}
.mpn-dashboard-nav-role {
    font-size: 12px;
    color: #5A5A5A;
    letter-spacing: 0.04em;
}

.mpn-dashboard-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mpn-dashboard-nav-item {
    margin: 0;
}
.mpn-dashboard-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 24px;
    color: #5A5A5A;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.mpn-dashboard-nav-link:hover,
.mpn-dashboard-nav-link:focus {
    background: #FAF8F2;
    color: #0D1B2A;
    text-decoration: none;
}
.mpn-dashboard-nav-link[aria-current="page"] {
    background: #FAF8F2;
    color: #0D1B2A;
    border-left-color: #C8973A;
    font-weight: 600;
}
.mpn-dashboard-nav-link svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

/* Pastille compteur (badge nb actives, badge historique) */
.mpn-dashboard-nav-badge {
    margin-left: auto;
    background: #C8973A;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}
.mpn-dashboard-nav-badge--gray {
    background: #EDE9E0;
    color: #5A5A5A;
}

/* Séparateur visuel avant les liens "compte" (Mon profil / Connexion / Déconnexion) */
.mpn-dashboard-nav-divider {
    border: 0;
    border-top: 1px solid #F2EEE5;
    margin: 12px 24px;
}

/* Lien Déconnexion en rouge sobre */
.mpn-dashboard-nav-link--logout {
    color: #A03030;
}
.mpn-dashboard-nav-link--logout:hover,
.mpn-dashboard-nav-link--logout:focus {
    background: #FBEAEA;
    color: #A03030;
}

/* --- B. Zone main content --- */
.mpn-dashboard-main {
    min-width: 0; /* indispensable pour que la grille n'overflow pas */
}

/* Titre d'onglet (h2 Playfair, kicker doré au-dessus) */
.mpn-dashboard-tab-title {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    color: #0D1B2A;
    margin: 0 0 8px 0;
    line-height: 1.2;
}
.mpn-dashboard-tab-intro {
    font-size: 14px;
    color: #5A5A5A;
    margin: 0 0 24px 0;
}

/* Empty state d'un onglet (Historique vide, etc.) */
.mpn-dashboard-empty {
    background: #FFFFFF;
    border: 1px dashed #EDE9E0;
    border-radius: 12px;
    padding: 48px 24px;
    text-align: center;
    color: #5A5A5A;
}
.mpn-dashboard-empty-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #FAF8F2;
    border: 1px solid #EDE9E0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.mpn-dashboard-empty-title {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    color: #0D1B2A;
    margin: 0 0 6px 0;
}
.mpn-dashboard-empty-text {
    font-size: 14px;
    color: #5A5A5A;
    margin: 0;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}


/* =====================================================
   30. DASHBOARD DIRIGEANT — MASTER / DETAIL DES DEMANDES
   Pattern liste compacte (rows) + vue détail au clic (?id=N).
   Ajouté le 2026-05-07.
   ===================================================== */

/* --- Liste compacte de lignes cliquables --- */
.mpn-requests-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 32px;
}

.mpn-request-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    background: #FFFFFF;
    border: 1px solid #EDE9E0;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.mpn-request-row:hover,
.mpn-request-row:focus {
    border-color: #C8973A;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(13, 27, 42, 0.06);
    text-decoration: none;
    color: inherit;
}

/* Variante highlight pour les demandes avec mise en relation effective */
.mpn-request-row--highlight {
    border-color: #C8973A;
    background: #FFFCF6;
}
.mpn-request-row--highlight:hover,
.mpn-request-row--highlight:focus {
    border-color: #C8973A;
    background: #FCF7EB;
}

/* Pastille de statut dans la ligne (réutilise les variantes du badge global) */
.mpn-request-row-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 100px;
    white-space: nowrap;
}
.mpn-request-row-badge .mpn-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

/* Titre du besoin (centre) */
.mpn-request-row-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #0D1B2A;
    line-height: 1.3;
    /* Tronque sur 1 ligne */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Compteur ESN (visible si mis en relation) */
.mpn-request-row-count {
    font-size: 12px;
    color: #C8973A;
    font-weight: 500;
    white-space: nowrap;
}

/* Date à droite */
.mpn-request-row-date {
    font-size: 12px;
    color: #8A8A8A;
    white-space: nowrap;
}

/* Flèche d'indication */
.mpn-request-row-arrow {
    color: #C8973A;
    font-size: 14px;
    transition: transform 0.15s ease;
}
.mpn-request-row:hover .mpn-request-row-arrow,
.mpn-request-row:focus .mpn-request-row-arrow {
    transform: translateX(3px);
}

/* Mobile : on stack la ligne */
@media (max-width: 700px) {
    .mpn-request-row {
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "badge title arrow"
            "count count count"
            "date  date  date";
        row-gap: 6px;
    }
    .mpn-request-row-badge { grid-area: badge; }
    .mpn-request-row-title {
        grid-area: title;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
    .mpn-request-row-arrow { grid-area: arrow; }
    .mpn-request-row-count { grid-area: count; }
    .mpn-request-row-date  { grid-area: date; }
}

/* --- Vue détail : lien retour vers la liste --- */
.mpn-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #5A5A5A;
    text-decoration: none;
    margin-bottom: 16px;
    transition: color 0.15s ease, transform 0.15s ease;
}
.mpn-back-link:hover,
.mpn-back-link:focus {
    color: #C8973A;
    text-decoration: none;
    transform: translateX(-2px);
}
.mpn-back-link::before {
    content: "←";
    font-size: 16px;
    line-height: 1;
}


/* =====================================================
   31. BANNER DE CLÔTURE / RÉACTIVATION (vue détail demande)
   Ajouté le 2026-05-07.
   ===================================================== */

.mpn-cloture-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    background: #FFFFFF;
    border: 1px solid #EDE9E0;
    border-radius: 8px;
    padding: 20px 24px;
    margin: 24px 0;
    flex-wrap: wrap;
}
.mpn-cloture-banner-text {
    margin: 0;
    font-size: 14px;
    color: #5A5A5A;
    line-height: 1.6;
    flex: 1;
    min-width: 240px;
    max-width: 560px;
}
/* Mobile : on stack verticalement avec un peu d'air */
@media (max-width: 700px) {
    .mpn-cloture-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}

/* Variante highlight : pour les demandes Mis en relation, on incite plus fortement */
.mpn-cloture-banner--highlight {
    background: #FFFCF6;
    border-color: #C8973A;
}
.mpn-cloture-banner--highlight .mpn-cloture-banner-text {
    color: #0D1B2A;
    font-weight: 500;
}

/* --- Bouton outline (fond clair) - réutilisable pour actions secondaires --- */
.mpn-btn-outline {
    display: inline-block;
    background: transparent;
    color: #0D1B2A;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 20px;
    border: 1px solid #0D1B2A;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.mpn-btn-outline:hover,
.mpn-btn-outline:focus {
    background: #0D1B2A;
    color: #FFFFFF;
    text-decoration: none;
}

/* Wrapper de form sans style par défaut (pour les forms inline du dashboard) */
.mpn-cloture-banner form {
    margin: 0;
}

/* Toast de confirmation post-clôture (?closed=1) */
.mpn-dashboard-toast {
    background: #E1F5EE;
    color: #0F6E56;
    border: 1px solid #B5E1CF;
    border-radius: 6px;
    padding: 12px 16px;
    font-size: 14px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.mpn-dashboard-toast::before {
    content: "✓";
    font-weight: 700;
    font-size: 16px;
}