/* =====================================================================
 * leggit.css — overrides et additions specifiques au site vitrine leggit
 * Charte : or/bronze #b68c5a / navy #162542 / Frank Ruhl Libre
 * Construit par dessus le template Kanan : on n alterne pas les fichiers
 * d origine (style.css, responsive.css) pour faciliter les mises a jour.
 * ===================================================================== */

:root {
    --lg-gold:        #b68c5a;
    --lg-gold-dark:   #9d7848;
    --lg-navy:        #162542;
    --lg-navy-dark:   #00062c;
    --lg-text:        #444;
    --lg-text-muted:  #666;
    --lg-bg-light:    #f8f8f8;
    --lg-bg-cream:    #fbf8f4;
    --lg-border:      #e6e2da;
    --lg-white:       #ffffff;
    --lg-shadow:      0 6px 20px rgba(22, 37, 66, .08);
    --lg-shadow-lg:   0 14px 40px rgba(22, 37, 66, .14);
    --lg-radius:      6px;
    --lg-font-serif:  'Frank Ruhl Libre', Georgia, serif;

    /* Aliases pour la refonte frontend (4 univers, 4 voies, modes) */
    --lg-or:          var(--lg-gold);
    --lg-cream:       var(--lg-bg-cream);
}

/* Helper classique : carte legere reutilisable */
.card-leggit-light {
    background: var(--lg-bg-cream);
    border: 1px solid var(--lg-border);
    border-radius: var(--lg-radius);
}

/* ==========================================================================
   Header v2 : logo a gauche, langue+connexion a droite (override Kanan flex)
   + dropdown drapeaux pour la langue
   + nav desktop horizontale (ligne 2)
   + slide-out mobile avec sous-items collapsibles
   ========================================================================== */

/* Override Kanan : .header-inn > div { flex: 0 0 33.33% } -> auto-fit */
.leggit-header .header-inn > div {
    flex: 0 1 auto !important;
    max-width: none !important;
}
.leggit-header .header-logo { margin-right: auto; }
.leggit-header .header-action { display: flex; align-items: center; gap: 12px; }

/* === Dropdown drapeaux (header langue) === */
.lang-dropdown {
    position: relative;
    display: inline-flex;
}
.lang-dropdown-toggle {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.92);
    padding: 7px 12px;
    border-radius: var(--lg-radius);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.12s ease;
}
.lang-dropdown-toggle:hover,
.lang-dropdown-toggle:focus,
.lang-dropdown[aria-expanded="true"] .lang-dropdown-toggle {
    border-color: var(--lg-gold);
    background: rgba(255, 255, 255, 0.05);
    outline: none;
}
/* Drapeau SVG via flag-icons (plus fiable que les emoji unicode sur Windows) */
.lang-flag.fi {
    width: 20px;
    height: 14px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
    display: inline-block;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}
.lang-code {
    letter-spacing: 0.5px;
}
.lang-caret {
    font-size: 9px;
    opacity: 0.7;
    transition: transform 0.2s ease;
}
.lang-dropdown.is-open .lang-caret { transform: rotate(180deg); }

.lang-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 180px;
    list-style: none;
    margin: 0;
    padding: 6px 0;
    background: #fff;
    border: 1px solid var(--lg-border);
    border-radius: var(--lg-radius);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
    z-index: 1100;
}
.lang-dropdown.is-open .lang-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.lang-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    color: var(--lg-text);
    text-decoration: none;
    font-size: 13.5px;
    border-left: 3px solid transparent;
    transition: all 0.12s ease;
}
.lang-dropdown-item:hover,
.lang-dropdown-item:focus {
    background: var(--lg-bg-cream);
    color: var(--lg-gold);
    border-left-color: var(--lg-gold);
}
.lang-dropdown-item .lang-code {
    color: var(--lg-navy);
    font-weight: 700;
    min-width: 24px;
}
.lang-dropdown-item .lang-label {
    color: var(--lg-text-muted);
    font-size: 13px;
}
.lang-dropdown-item.active {
    background: rgba(182, 140, 90, 0.08);
    border-left-color: var(--lg-gold);
}
.lang-dropdown-item.active .lang-code,
.lang-dropdown-item.active .lang-label { color: var(--lg-gold); }
.lang-dropdown-item .fa-check { color: var(--lg-gold); font-size: 11px; }

/* === Bandeau nav desktop place SOUS .header-inn === */
/* Le wrap est volontairement hors de .header-inn (qui force flex 33% sur ses 3 enfants) */
.leggit-desktop-nav-wrap {
    display: none; /* mobile : cache, desktop : block */
    background: var(--lg-navy);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
@media (min-width: 992px) {
    .leggit-desktop-nav-wrap { display: block; }
    .leggit-header .navigation { display: none; } /* burger cache sur desktop */
    .leggit-header { padding-bottom: 0; }
}

.leggit-desktop-nav > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    justify-content: center;
}
.leggit-desktop-nav > ul > li {
    position: relative;
}
.leggit-desktop-nav > ul > li > a {
    display: block;
    padding: 14px 18px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.leggit-desktop-nav > ul > li > a:hover,
.leggit-desktop-nav > ul > li > a:focus {
    color: var(--lg-gold);
    border-bottom-color: var(--lg-gold);
    background: rgba(255, 255, 255, 0.03);
}
.leggit-desktop-nav > ul > li > a.active {
    color: var(--lg-gold);
    border-bottom-color: var(--lg-gold);
}
.leggit-desktop-nav .dropdown-caret {
    margin-left: 6px;
    font-size: 9px;
    opacity: 0.7;
    transition: transform 0.2s ease;
}
.leggit-desktop-nav .has-dropdown:hover > a .dropdown-caret,
.leggit-desktop-nav .has-dropdown:focus-within > a .dropdown-caret {
    transform: rotate(180deg);
}

/* Sub-menu (dropdown) — fond clair, lisible sur fond navy */
.leggit-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    list-style: none;
    margin: 0;
    padding: 6px 0;
    background: #fff;
    border: 1px solid var(--lg-border);
    border-radius: 0 0 var(--lg-radius) var(--lg-radius);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    min-width: 280px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
    z-index: 1000;
}
.leggit-desktop-nav .has-dropdown:hover > .leggit-dropdown,
.leggit-desktop-nav .has-dropdown:focus-within > .leggit-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.leggit-dropdown li { margin: 0; }
.leggit-dropdown li a {
    display: block;
    padding: 9px 18px;
    color: var(--lg-text);
    text-decoration: none;
    font-size: 13.5px;
    border-left: 3px solid transparent;
    line-height: 1.4;
    transition: all 0.12s ease;
}
.leggit-dropdown li a:hover,
.leggit-dropdown li a:focus {
    background: var(--lg-bg-cream);
    color: var(--lg-gold);
    border-left-color: var(--lg-gold);
}
.leggit-dropdown-overview {
    font-weight: 600;
    color: var(--lg-navy) !important;
    border-bottom: 1px solid var(--lg-border);
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    margin-bottom: 4px;
    background: var(--lg-bg-cream);
    font-size: 12.5px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.leggit-dropdown-overview:hover {
    color: var(--lg-gold) !important;
}

/* === Mobile slide-out : sous-items collapsibles === */
.leggit-mainnav .has-children {
    display: flex;
    flex-direction: column;
}
.leggit-mainnav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.leggit-mainnav-row > a { flex: 1; }
.leggit-mainnav-toggle {
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.7);
    padding: 12px 14px;
    cursor: pointer;
    transition: transform 0.2s ease, color 0.15s ease;
}
.leggit-mainnav-toggle:hover { color: var(--lg-gold); }
.leggit-mainnav-toggle[aria-expanded="true"] { transform: rotate(180deg); color: var(--lg-gold); }

.leggit-mainnav-children {
    list-style: none;
    margin: 0;
    padding: 0 0 8px 22px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.leggit-mainnav .has-children.is-open .leggit-mainnav-children {
    max-height: 500px;
}
.leggit-mainnav-children li a {
    display: block;
    padding: 8px 14px;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 14px;
    border-left: 2px solid transparent;
    transition: all 0.15s ease;
}
.leggit-mainnav-children li a:hover,
.leggit-mainnav-children li a:focus {
    color: var(--lg-gold);
    border-left-color: var(--lg-gold);
    padding-left: 18px;
}

/* ====================== ACCESSIBILITY ====================== */
.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--lg-navy);
    color: #fff;
    padding: 10px 16px;
    z-index: 9999;
    transform: translateY(-110%);
    transition: transform .2s;
}
.skip-link:focus {
    transform: translateY(0);
}
*:focus-visible {
    outline: 2px solid var(--lg-gold);
    outline-offset: 2px;
}

/* ====================== HEADER ====================== */
.leggit-header {
    background: var(--lg-navy);
}
.leggit-header .header-inn {
    align-items: center;
}
.leggit-header .header-action {
    display: flex;
    align-items: center;
    gap: 24px;
}
.leggit-header .header-btn {
    background: var(--lg-gold);
    color: #fff !important;
    padding: 10px 20px;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .5px;
    border-radius: var(--lg-radius);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background .2s;
}
.leggit-header .header-btn:hover,
.leggit-header .header-btn:focus {
    background: var(--lg-gold-dark);
}

.lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-right: 1px solid rgba(255, 255, 255, .15);
    padding-right: 16px;
}
.lang-link {
    color: rgba(255, 255, 255, .6);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 4px 6px;
    border-radius: 3px;
    transition: color .15s;
}
.lang-link:hover,
.lang-link:focus { color: #fff; }
.lang-link.active {
    color: var(--lg-gold);
    background: rgba(182, 140, 90, .12);
}

/* Wordmark "leggit" en lieu et place du logo image manquant */
.leggit-wordmark {
    font-family: var(--lg-font-serif);
    font-weight: 700;
    font-size: 30px;
    color: var(--lg-gold);
    letter-spacing: -1px;
    text-transform: lowercase;
    display: inline-block;
}
.leggit-wordmark::after {
    content: '.';
    color: var(--lg-gold-dark);
}
.leggit-wordmark-light {
    color: var(--lg-gold);
}

/* Menu nav (slide out) */
.leggit-mainnav {
    list-style: none;
    padding: 0;
    margin: 0;
}
.leggit-mainnav li a {
    display: block;
    padding: 12px 0;
    color: #fff;
    font-family: var(--lg-font-serif);
    font-size: 22px;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    transition: color .2s;
}
.leggit-mainnav li a:hover,
.leggit-mainnav li a:focus,
.leggit-mainnav li a.active {
    color: var(--lg-gold);
}
.leggit-mainnav-cta { margin-top: 24px; }
.leggit-mainnav-app {
    display: inline-block !important;
    background: var(--lg-gold);
    color: #fff !important;
    padding: 12px 24px !important;
    border-radius: var(--lg-radius) !important;
    font-family: 'Karla', sans-serif !important;
    font-size: 14px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 0 !important;
}
.leggit-mainnav-app:hover,
.leggit-mainnav-app:focus {
    background: var(--lg-gold-dark) !important;
    color: #fff !important;
}

/* ====================== TYPOGRAPHIE ====================== */
.leggit-body h1,
.leggit-body h2,
.leggit-body h3,
.leggit-body h4 {
    font-family: var(--lg-font-serif);
    color: var(--lg-navy);
}
.leggit-eyebrow {
    color: var(--lg-gold);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 12px;
    display: inline-block;
}

/* ====================== HERO ====================== */
.leggit-hero {
    background: linear-gradient(135deg, var(--lg-navy) 0%, var(--lg-navy-dark) 100%);
    color: #fff;
    padding: 140px 0 110px;
    position: relative;
    overflow: hidden;
}
.leggit-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 20%, rgba(182, 140, 90, .18) 0%, transparent 60%);
    pointer-events: none;
}
.leggit-hero h1 {
    color: #fff;
    font-size: 44px;
    line-height: 1.15;
    font-weight: 700;
    margin-bottom: 24px;
}
.leggit-hero .leggit-eyebrow {
    color: var(--lg-gold);
}
.leggit-hero p {
    color: rgba(255, 255, 255, .85);
    font-size: 19px;
    line-height: 1.7;
    max-width: 540px;
    margin-bottom: 32px;
}
.leggit-hero .cta-btn {
    margin-right: 12px;
    margin-bottom: 12px;
}

/* Portrait hero — cadre or façon luxe / heritage */
.leggit-hero-portrait {
    position: relative;
    margin: 0 auto;
    padding: 0;
    width: 95%;
    max-width: 95%;
}
.leggit-hero-portrait::before {
    /* Cadre or décalé en arriere-plan */
    content: '';
    position: absolute;
    top: 18px;
    left: 18px;
    right: -18px;
    bottom: -18px;
    border: 2px solid var(--lg-gold);
    border-radius: var(--lg-radius);
    z-index: 0;
    pointer-events: none;
    transition: all .4s ease;
}
.leggit-hero-portrait:hover::before {
    top: 22px;
    left: 22px;
    right: -22px;
    bottom: -22px;
}
/* Iframe explainer (animation 8 scenes) — wrapper avec ombre cohérente charte */
.leggit-explainer-frame {
    position: relative;
    box-shadow: 0 12px 40px rgba(22, 37, 66, .12);
    border-radius: 16px;
    overflow: hidden;
    background: #f4ead6;
}
.leggit-explainer-frame iframe {
    aspect-ratio: 4/3;
}
@media (max-width: 520px) {
    .leggit-explainer-frame iframe {
        aspect-ratio: 3/4;
    }
}

.leggit-hero-portrait img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    max-height: 532px; /* -5% (etait 560px) */
    object-fit: cover;
    object-position: center;
    border-radius: var(--lg-radius);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .45),
                0 0 0 1px rgba(182, 140, 90, .25);
    /* Leger refroidissement pour s integrer au navy du hero */
    filter: contrast(1.02) saturate(1.05);
}

/* CTA buttons (override) */
.leggit-body .cta-btn {
    background: var(--lg-gold);
    color: #fff;
    padding: 16px 30px;
    text-decoration: none;
    border-radius: var(--lg-radius);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 13px;
    font-weight: 700;
    display: inline-block;
    border: 2px solid var(--lg-gold);
    transition: all .25s;
}
.leggit-body .cta-btn:hover,
.leggit-body .cta-btn:focus {
    background: var(--lg-gold-dark);
    border-color: var(--lg-gold-dark);
    color: #fff;
    transform: translateY(-2px);
}
.leggit-body .cta-btn-outline {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, .8);
    color: #fff;
}
.leggit-body .cta-btn-outline:hover,
.leggit-body .cta-btn-outline:focus {
    background: #fff;
    color: var(--lg-navy);
    border-color: #fff;
}

/*
 * Variante outline pour fond CLAIR (refonte 2026-05).
 * Texte or sur bord or — visible sans hover sur fond blanc/cream.
 * A utiliser quand le bouton est sur fond clair (sections non-dark).
 */
.leggit-body .cta-btn-outline-light {
    background: transparent;
    border: 2px solid var(--lg-gold);
    color: var(--lg-gold);
}
.leggit-body .cta-btn-outline-light:hover,
.leggit-body .cta-btn-outline-light:focus {
    background: var(--lg-gold);
    color: #fff;
    border-color: var(--lg-gold);
}

/* ====================== SECTIONS ====================== */
.leggit-section {
    padding: 100px 0;
}
.leggit-section-light {
    background: var(--lg-bg-light);
}
.leggit-section-cream {
    background: var(--lg-bg-cream);
}
.leggit-section-dark {
    background: var(--lg-navy);
    color: #fff;
}
.leggit-section-dark h1,
.leggit-section-dark h2,
.leggit-section-dark h3 {
    color: #fff;
}
.leggit-section-title {
    text-align: center;
    margin-bottom: 60px;
}
.leggit-section-title h2 {
    font-size: 42px;
    line-height: 1.2;
    font-weight: 700;
}

/* ====================== PILIERS / CARDS ====================== */
.leggit-pillar {
    background: #fff;
    border-radius: var(--lg-radius);
    padding: 40px 32px;
    box-shadow: var(--lg-shadow);
    border: 1px solid var(--lg-border);
    height: 100%;
    transition: transform .3s, box-shadow .3s;
    position: relative;
}
.leggit-pillar:hover {
    transform: translateY(-6px);
    box-shadow: var(--lg-shadow-lg);
}
.leggit-pillar-icon {
    width: 64px;
    height: 64px;
    background: rgba(182, 140, 90, .12);
    color: var(--lg-gold);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 26px;
}
.leggit-pillar h3 {
    font-size: 24px;
    margin-bottom: 14px;
    color: var(--lg-navy);
}
.leggit-pillar p {
    color: var(--lg-text-muted);
    line-height: 1.7;
    margin: 0;
}

/* ====================== ETAPES (NUMEROTEES) ====================== */
.leggit-step {
    text-align: center;
    padding: 0 16px;
    position: relative;
}
.leggit-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--lg-navy);
    color: var(--lg-gold);
    font-family: var(--lg-font-serif);
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
    border: 2px solid var(--lg-gold);
}
.leggit-step h3 {
    font-size: 20px;
    margin-bottom: 12px;
}
.leggit-step p {
    color: var(--lg-text-muted);
    font-size: 15px;
    line-height: 1.7;
}

/* ====================== TEMOIGNAGES ====================== */
.leggit-testimonial {
    background: #fff;
    padding: 36px 32px;
    border-radius: var(--lg-radius);
    border-top: 4px solid var(--lg-gold);
    box-shadow: var(--lg-shadow);
    height: 100%;
    position: relative;
}
.leggit-testimonial::before {
    content: '\201C';
    position: absolute;
    top: 8px;
    right: 24px;
    font-family: var(--lg-font-serif);
    font-size: 80px;
    color: rgba(182, 140, 90, .15);
    line-height: 1;
}
.leggit-testimonial p {
    color: var(--lg-text);
    line-height: 1.7;
    font-style: italic;
    margin-bottom: 18px;
    font-size: 16px;
}
.leggit-testimonial-author {
    color: var(--lg-navy);
    font-weight: 700;
    font-family: var(--lg-font-serif);
    font-size: 16px;
}

/* ====================== ALERTE NOTAIRE (CRITIQUE) ====================== */
.leggit-alerte-notaire {
    background: linear-gradient(180deg, #faf6ef 0%, #f5efe3 100%);
    border-top: 4px solid var(--lg-gold);
    border-bottom: 4px solid var(--lg-gold);
    padding: 50px 0;
    margin: 60px 0;
}
.leggit-alerte-notaire-inner {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    max-width: 960px;
    margin: 0 auto;
    background: #fff;
    border: 2px solid var(--lg-gold);
    border-radius: var(--lg-radius);
    padding: 36px;
    box-shadow: var(--lg-shadow);
}
.leggit-alerte-notaire-icon {
    flex: 0 0 auto;
    color: var(--lg-gold);
    background: rgba(182, 140, 90, .1);
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.leggit-alerte-notaire-text { flex: 1; }
.leggit-alerte-notaire-title {
    font-family: var(--lg-font-serif);
    font-size: 24px;
    color: var(--lg-navy);
    margin-bottom: 16px;
}
.leggit-alerte-notaire-text p {
    color: var(--lg-text);
    line-height: 1.7;
    margin-bottom: 12px;
    font-size: 16px;
}
.leggit-alerte-notaire-text p:last-child { margin-bottom: 0; }
.leggit-alerte-notaire-text strong {
    color: var(--lg-navy-dark);
    font-weight: 700;
}
.leggit-alerte-notaire-compact {
    padding: 30px 0;
    margin: 30px 0;
}
.leggit-alerte-notaire-compact .leggit-alerte-notaire-inner {
    padding: 24px;
}

/* ====================== TARIFS ====================== */
.leggit-pricing-card {
    background: #fff;
    border-radius: var(--lg-radius);
    padding: 40px 32px;
    box-shadow: var(--lg-shadow);
    border: 2px solid var(--lg-border);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all .3s;
    position: relative;
}
.leggit-pricing-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--lg-shadow-lg);
}
.leggit-pricing-card-featured {
    border-color: var(--lg-gold);
    background: linear-gradient(180deg, #fff 0%, #fcf8f1 100%);
}
.leggit-pricing-card-featured::before {
    content: 'Le + populaire';
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--lg-gold);
    color: #fff;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    white-space: nowrap;
}
/* Prix mensuel : sous le prix annuel principal, petit, gris */
.leggit-pricing-monthly {
    font-size: 14px;
    color: var(--lg-text-muted);
    margin-top: 4px;
}
.leggit-pricing-monthly strong {
    color: var(--lg-navy);
    font-weight: 600;
}
.leggit-pricing-name {
    font-family: var(--lg-font-serif);
    font-size: 28px;
    color: var(--lg-navy);
    margin-bottom: 12px;
}
/* Prix juste sous le nom : padding bas + border-bottom pour separer
   visuellement de la description. Pas de border-top (colle au nom). */
.leggit-pricing-price {
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--lg-border);
}
/* Description sous le prix : min-height assure l'alignement vertical
   des listes de features entre les 4 cartes (les descriptions ont des
   longueurs variables — la plus longue dicte la hauteur du bloc). */
.leggit-pricing-desc {
    color: var(--lg-text-muted);
    font-size: 14px;
    margin-bottom: 20px;
    min-height: 72px;
    line-height: 1.5;
}
.leggit-pricing-amount {
    font-family: var(--lg-font-serif);
    font-size: 44px;
    font-weight: 700;
    color: var(--lg-navy);
    line-height: 1;
}
.leggit-pricing-period {
    color: var(--lg-text-muted);
    font-size: 14px;
    margin-left: 4px;
}
.leggit-pricing-lifetime {
    margin-top: 8px;
    color: var(--lg-gold-dark);
    font-size: 14px;
    font-weight: 600;
}
.leggit-pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    flex: 1;
}
.leggit-pricing-features li {
    padding: 10px 0;
    color: var(--lg-text);
    font-size: 15px;
    border-bottom: 1px dashed var(--lg-border);
    display: flex;
    align-items: center;
    gap: 10px;
}
.leggit-pricing-features li:last-child { border-bottom: 0; }
.leggit-pricing-features li i {
    color: var(--lg-gold);
    font-size: 14px;
    width: 18px;
}
.leggit-pricing-features li.disabled {
    color: #aaa;
    text-decoration: line-through;
}
.leggit-pricing-features li.disabled i { color: #ccc; }
.leggit-pricing-card .cta-btn {
    width: 100%;
    text-align: center;
}

.leggit-token-pack {
    background: #fff;
    border: 1px solid var(--lg-border);
    border-radius: var(--lg-radius);
    padding: 28px 24px;
    text-align: center;
    height: 100%;
    transition: all .3s;
}
.leggit-token-pack:hover {
    border-color: var(--lg-gold);
    box-shadow: var(--lg-shadow);
}
.leggit-token-pack-name {
    font-family: var(--lg-font-serif);
    font-size: 22px;
    color: var(--lg-navy);
    margin-bottom: 4px;
}
.leggit-token-pack-tokens {
    color: var(--lg-gold);
    font-weight: 700;
    margin-bottom: 12px;
}
.leggit-token-pack-price {
    font-family: var(--lg-font-serif);
    font-size: 32px;
    color: var(--lg-navy);
    margin-bottom: 8px;
    font-weight: 700;
}
.leggit-token-pack-bonus {
    background: rgba(182, 140, 90, .12);
    color: var(--lg-gold-dark);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 18px;
    letter-spacing: .5px;
}
.leggit-token-pack-cta {
    display: inline-block;
    padding: 10px 20px;
    background: transparent;
    border: 2px solid var(--lg-gold);
    color: var(--lg-gold);
    text-decoration: none;
    border-radius: var(--lg-radius);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all .2s;
}
.leggit-token-pack-cta:hover,
.leggit-token-pack-cta:focus {
    background: var(--lg-gold);
    color: #fff;
}

/* ====================== TABLEAU COMPARATIF ====================== */
.leggit-features-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    box-shadow: var(--lg-shadow);
    border-radius: var(--lg-radius);
    overflow: hidden;
}
.leggit-features-table th,
.leggit-features-table td {
    padding: 16px 20px;
    text-align: center;
    border-bottom: 1px solid var(--lg-border);
}
/* Headers de COLONNES (thead) : fond navy, texte blanc, serif. */
.leggit-features-table thead th {
    background: var(--lg-navy);
    color: #fff;
    font-family: var(--lg-font-serif);
    font-weight: 600;
    font-size: 17px;
}
/* Headers de LIGNES (tbody th[scope=row]) : fond blanc, texte sombre,
   alignement gauche. C'est la 1ere colonne du tableau qui liste les
   fonctionnalites. */
.leggit-features-table tbody th[scope="row"],
.leggit-features-table th:first-child:not([colspan]) {
    background: #fff;
    color: var(--lg-navy);
    text-align: left;
    font-weight: 600;
    font-family: inherit;
    font-size: 15px;
}
.leggit-features-table td:first-child {
    text-align: left;
    font-weight: 600;
    color: var(--lg-text);
}
.leggit-features-table td .fa-check, .leggit-features-table td .yes { color: #2e8b57; }
.leggit-features-table td .fa-times, .leggit-features-table td .no { color: #c0392b; }
.leggit-features-table tr:hover td { background: var(--lg-bg-light); }

/* Ligne de separation de section dans le tableau comparatif */
.leggit-features-table tr.leggit-features-table-section th {
    background: var(--lg-navy);
    color: #fff;
    font-family: var(--lg-font-serif);
    font-size: 16px;
    text-align: left;
    padding: 12px 16px;
    letter-spacing: 0.5px;
}
.leggit-features-table tr.leggit-features-table-section:hover th {
    background: var(--lg-navy); /* pas de hover sur les sections */
}

/* Mini-badge "Recommande" dans l'en-tete du tableau comparatif */
.leggit-features-table-badge {
    display: inline-block;
    background: var(--lg-gold);
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 6px;
    vertical-align: middle;
}

/* ====================== PROMO STRIP (home) ====================== */
/* Mini-bandeau compact place tout en haut de la homepage. Discret mais
   visible. Cliquable sur toute sa largeur pour aller vers tarifs.php. */
.leggit-promo-strip {
    background: linear-gradient(90deg, #b91c1c 0%, #dc2626 100%);
    color: #fff;
    padding: 10px 0;
    border-bottom: 2px solid var(--lg-gold);
    font-size: 14px;
}
.leggit-promo-strip-preview {
    background: linear-gradient(90deg, #4b1d1d 0%, #7a2424 100%);
    box-shadow: inset 0 0 0 2px #fde047;
}
.leggit-promo-strip-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}
.leggit-promo-strip-flag {
    background: rgba(255,255,255,0.18);
    color: #fff;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    white-space: nowrap;
}
.leggit-promo-strip-flag i { margin-right: 4px; color: #fde047; }
.leggit-promo-strip-label {
    font-weight: 600;
    color: #fff;
}
.leggit-promo-strip-countdown {
    background: rgba(0,0,0,0.25);
    padding: 3px 10px;
    border-radius: 8px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: #ffe9a8;
}
.leggit-promo-strip-cta {
    background: var(--lg-gold);
    color: #422006;
    padding: 4px 12px;
    border-radius: 6px;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s, transform .15s;
}
.leggit-promo-strip-cta:hover {
    background: #ffe9a8;
    color: #422006;
    transform: translateX(2px);
}
.leggit-promo-strip-cta i { margin-left: 4px; }
@media (max-width: 640px) {
    .leggit-promo-strip { font-size: 13px; }
    .leggit-promo-strip-inner { gap: 8px; }
    .leggit-promo-strip-label { width: 100%; text-align: center; order: -1; }
}

/* ====================== PROMO BANNER ====================== */
.leggit-promo-banner {
    background: linear-gradient(135deg, #b91c1c 0%, #dc2626 50%, #ea580c 100%);
    color: #fff;
    padding: 32px 0;
    box-shadow: inset 0 -3px 0 var(--lg-gold);
}
/* Variante "preview" : nuance plus sombre + outline jaune pour signaler que
   l'affichage est force par un super-admin (le bandeau jaune en haut de page
   donne le contexte plein, ici on garde juste un signal visuel discret). */
.leggit-promo-banner-preview {
    background: linear-gradient(135deg, #4b1d1d 0%, #7a2424 50%, #8a3411 100%);
    box-shadow: inset 0 0 0 2px #fde047, inset 0 -3px 0 var(--lg-gold);
}
.leggit-promo-preview-stripe {
    background: rgba(253, 224, 71, 0.18);
    border: 1px dashed #fde047;
    color: #fde68a;
    padding: 8px 14px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.5;
}
.leggit-promo-preview-stripe i { margin-right: 6px; color: #fde047; }
.leggit-promo-preview-stripe strong { color: #fef3c7; }

/* Bandeau de page (header) : signale en jaune que le mode apercu est actif.
   S'affiche au-dessus du header sur toutes les pages du frontend tant que
   le cookie leggit_promo_preview est pose. */
.leggit-preview-bar {
    background: linear-gradient(90deg, #facc15 0%, #fde047 50%, #facc15 100%);
    color: #422006;
    text-align: center;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    border-bottom: 2px solid #b45309;
    position: relative;
    z-index: 9999;
}
.leggit-preview-bar i { margin-right: 6px; color: #b45309; }
.leggit-preview-bar a {
    color: #7c2d12;
    text-decoration: underline;
    margin-left: 8px;
    font-weight: 700;
}
.leggit-preview-bar a:hover { color: #422006; }
.leggit-promo-banner-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.leggit-promo-banner-text {
    flex: 1 1 50%;
    min-width: 260px;
}
.leggit-promo-banner-flag {
    display: inline-block;
    background: rgba(255,255,255,0.18);
    color: #fff;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
}
.leggit-promo-banner-title {
    font-family: var(--lg-font-serif);
    font-size: 32px;
    color: #fff;
    margin: 4px 0;
    line-height: 1.1;
}
.leggit-promo-banner-subtitle {
    color: rgba(255,255,255,0.92);
    font-size: 16px;
    margin: 8px 0 0;
}
.leggit-promo-banner-subtitle strong { color: #ffe9a8; }

/* Countdown : 4 cellules juxtaposees */
.leggit-promo-banner-countdown {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.leggit-promo-countdown-unit {
    background: rgba(0,0,0,0.25);
    border-radius: 8px;
    padding: 12px 14px;
    text-align: center;
    min-width: 64px;
}
.leggit-promo-countdown-num {
    display: block;
    font-family: var(--lg-font-serif);
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.leggit-promo-countdown-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 4px;
    color: rgba(255,255,255,0.85);
}

/* ====================== CARD PROMO ====================== */
.leggit-pricing-card-promo {
    border-color: #dc2626 !important;
    background: linear-gradient(180deg, #fff 0%, #fff5f5 100%);
    box-shadow: 0 6px 18px rgba(220,38,38,0.12);
}
/* Quand la card est featured ET en promo, on garde le badge "Le + populaire"
   par-dessus, mais on ajoute aussi le badge promo en bas-gauche. */
.leggit-pricing-promo-badge {
    position: absolute;
    top: -12px;
    right: 12px;
    background: #dc2626;
    color: #fff;
    padding: 5px 12px;
    border-radius: 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 2px 6px rgba(220,38,38,0.4);
    z-index: 2;
    animation: leggit-promo-pulse 2.5s ease-in-out infinite;
}
.leggit-pricing-promo-badge i { margin-right: 4px; }
@keyframes leggit-promo-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}

/* Prix initial barre (au-dessus du prix promo) */
.leggit-pricing-strike {
    color: var(--lg-text-muted);
    font-size: 18px;
    text-decoration: line-through;
    text-decoration-color: #dc2626;
    text-decoration-thickness: 2px;
    margin-bottom: 4px;
}
.leggit-pricing-strike-period {
    font-size: 13px;
    margin-left: 2px;
}

/* Prix promo : couleur d'accent rouge */
.leggit-pricing-amount-promo {
    color: #dc2626 !important;
}

/* Message contextuel sous le prix promo */
.leggit-pricing-promo-message {
    color: #166534 !important;
    font-weight: 600;
    margin-top: 6px;
}
.leggit-pricing-promo-message i { margin-right: 4px; color: #16a34a; }

/* Compteur d'ouvertures restantes */
.leggit-pricing-promo-remaining {
    background: #fef2f2;
    color: #991b1b;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
    margin-top: 8px;
    text-align: center;
}
.leggit-pricing-promo-remaining strong { color: #dc2626; font-size: 16px; }

@media (max-width: 768px) {
    .leggit-promo-banner-title { font-size: 24px; }
    .leggit-promo-countdown-num { font-size: 24px; }
    .leggit-promo-countdown-unit { padding: 10px 12px; min-width: 56px; }
}

/* ====================== FAQ ====================== */
.leggit-faq-item {
    background: #fff;
    border: 1px solid var(--lg-border);
    border-radius: var(--lg-radius);
    margin-bottom: 12px;
    overflow: hidden;
    transition: box-shadow .2s;
}
.leggit-faq-item[open] {
    box-shadow: var(--lg-shadow);
    border-color: var(--lg-gold);
}
.leggit-faq-question {
    padding: 18px 24px;
    font-family: var(--lg-font-serif);
    font-size: 18px;
    color: var(--lg-navy);
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-right: 50px;
    user-select: none;
}
.leggit-faq-question::-webkit-details-marker { display: none; }
.leggit-faq-question::after {
    content: '+';
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 26px;
    color: var(--lg-gold);
    font-weight: 300;
    transition: transform .2s;
}
.leggit-faq-item[open] .leggit-faq-question::after {
    content: '\2212';
}
.leggit-faq-answer {
    padding: 0 24px 22px;
    color: var(--lg-text);
    line-height: 1.8;
    font-size: 16px;
}

/* ====================== CONTACT FORM ====================== */
.leggit-form .form-group { margin-bottom: 22px; }
.leggit-form label {
    display: block;
    font-family: var(--lg-font-serif);
    color: var(--lg-navy);
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 15px;
}
.leggit-form .required-mark {
    color: var(--lg-gold);
    margin-left: 4px;
}
.leggit-form input[type="text"],
.leggit-form input[type="email"],
.leggit-form select,
.leggit-form textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--lg-border);
    border-radius: var(--lg-radius);
    background: #fff;
    font-size: 15px;
    color: var(--lg-text);
    font-family: 'Karla', sans-serif;
    transition: border-color .2s, box-shadow .2s;
}
.leggit-form input:focus,
.leggit-form select:focus,
.leggit-form textarea:focus {
    border-color: var(--lg-gold);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(182, 140, 90, .15);
}
.leggit-form textarea {
    min-height: 160px;
    resize: vertical;
}
.leggit-form .honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
    height: 0;
    width: 0;
    opacity: 0;
}
.leggit-form .form-help {
    color: var(--lg-text-muted);
    font-size: 13px;
    margin-top: 4px;
}

/* Alerts (success/error) */
.leggit-alert {
    padding: 16px 20px;
    border-radius: var(--lg-radius);
    margin-bottom: 24px;
    border: 1px solid transparent;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.leggit-alert-success {
    background: #e6f4ee;
    border-color: #b9e3d0;
    color: #1e6b48;
}
.leggit-alert-error {
    background: #fdecec;
    border-color: #f5c2c2;
    color: #8c2727;
}
.leggit-alert i { margin-top: 3px; }

/* ====================== STATS / COUNTERS ====================== */
.leggit-stats {
    background: var(--lg-navy);
    color: #fff;
    padding: 70px 0;
}
.leggit-stat {
    text-align: center;
    padding: 0 16px;
}
.leggit-stat-num {
    font-family: var(--lg-font-serif);
    font-size: 56px;
    color: var(--lg-gold);
    font-weight: 700;
    line-height: 1;
    margin-bottom: 8px;
}
.leggit-stat-label {
    color: rgba(255, 255, 255, .8);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 13px;
}

/* ====================== TÉMOIGNAGES ====================== */
.leggit-temoignage {
    background: #fff;
    border-radius: var(--lg-radius);
    padding: 28px 22px 24px;
    box-shadow: var(--lg-shadow);
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform .25s ease, box-shadow .25s ease;
}
.leggit-temoignage:hover {
    transform: translateY(-4px);
    box-shadow: var(--lg-shadow-lg);
}
.leggit-temoignage-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--lg-font-serif);
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.leggit-temoignage-meta h3 {
    color: var(--lg-navy);
    font-size: 18px;
    margin-bottom: 2px;
    font-family: var(--lg-font-serif);
}
.leggit-temoignage-age {
    color: var(--lg-gold-dark);
    font-size: 13px;
    margin-bottom: 14px;
    font-style: italic;
}
.leggit-temoignage-quote {
    color: var(--lg-text);
    font-size: 14.5px;
    line-height: 1.65;
    margin: 0 0 16px;
    padding-left: 12px;
    border-left: 3px solid var(--lg-gold);
    font-style: italic;
    flex-grow: 1;
}
.leggit-temoignage-quote::before {
    content: "« ";
    color: var(--lg-gold);
    font-weight: 600;
}
.leggit-temoignage-quote::after {
    content: " »";
    color: var(--lg-gold);
    font-weight: 600;
}
.leggit-temoignage-stored {
    color: #666;
    font-size: 12.5px;
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid #eee;
    line-height: 1.4;
}

/* ====================== FOOTER ====================== */
.leggit-footer {
    background: var(--lg-navy-dark);
    color: rgba(255, 255, 255, .7);
    padding: 70px 0 24px;
    margin-top: 80px;
}
.leggit-footer-grid {
    margin-bottom: 50px;
}
.leggit-footer-col {
    margin-bottom: 30px;
}
.leggit-footer-title {
    /* Refonte 2026-05-16 (v4) : retour sur blanc à la demande du user.
       Pour éviter le ressenti "sombre sur sombre" précédent :
         - Couleur #ffffff explicite avec !important (override le parent
           qui applique rgba(255,255,255,.7))
         - font-weight 800 (extra-bold, plus épais que 700) → les traits
           du serif sont nettement plus présents
         - double text-shadow : ombre douce sous le texte + léger halo
           bleu marine qui décolle le texte du fond
       Police serif conservée. */
    color: #ffffff !important;
    font-family: var(--lg-font-serif) !important;
    font-size: 18px;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 22px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--lg-gold);
    display: inline-block;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 8px rgba(255, 255, 255, 0.15);
}
.leggit-footer-about {
    line-height: 1.7;
    margin-bottom: 16px;
}
.leggit-footer-made {
    color: var(--lg-gold);
    font-style: italic;
    font-size: 14px;
}
.leggit-footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.leggit-footer-list li {
    padding: 6px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.leggit-footer-list a {
    color: rgba(255, 255, 255, .75);
    text-decoration: none;
    transition: color .2s;
}
.leggit-footer-list a:hover,
.leggit-footer-list a:focus {
    color: var(--lg-gold);
}
.leggit-footer-list i {
    color: var(--lg-gold);
    width: 16px;
    font-size: 13px;
}
.leggit-footer-bottom {
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    text-align: center;
    color: rgba(255, 255, 255, .5);
    font-size: 13px;
}

/* ====================== PAGE HEADER (BREADCRUMB) ====================== */
.leggit-page-header {
    background: linear-gradient(135deg, var(--lg-navy) 0%, var(--lg-navy-dark) 100%);
    color: #fff;
    /* padding-top genereux : evite que l'eyebrow + h1 ne collent au menu fixe.
       Aligne sur la regle .leggit-hero-secondary pour une coherence visuelle
       sur toutes les pages (Coffres / Destinataires / Fonctionnement / Notaires
       et ici Securite / Tarifs / Contact / About). */
    padding: 140px 0 80px;
    text-align: center;
}
.leggit-page-header h1 {
    color: #fff;
    font-size: 48px;
    line-height: 1.2;
    margin-bottom: 14px;
}
.leggit-page-header p {
    color: rgba(255, 255, 255, .85);
    font-size: 18px;
    max-width: 700px;
    margin: 0 auto;
}

/* ====================== 404 ====================== */
.leggit-404 {
    text-align: center;
    padding: 140px 0;
}
.leggit-404 h1 {
    font-size: 130px;
    color: var(--lg-gold);
    line-height: 1;
    margin-bottom: 20px;
}
.leggit-404 h2 {
    font-size: 32px;
    margin-bottom: 16px;
}
.leggit-404 p {
    color: var(--lg-text-muted);
    max-width: 480px;
    margin: 0 auto 32px;
}

/* ====================== UTILITAIRES ====================== */
.leggit-text-center { text-align: center; }
.leggit-mb-0 { margin-bottom: 0 !important; }
.leggit-mt-2 { margin-top: 16px; }
.leggit-mt-4 { margin-top: 32px; }

.leggit-content-block {
    background: #fff;
    border-radius: var(--lg-radius);
    padding: 44px;
    box-shadow: var(--lg-shadow);
    margin-bottom: 28px;
}
.leggit-content-block h2 {
    color: var(--lg-navy);
    margin-bottom: 18px;
    font-size: 28px;
}
.leggit-content-block h3 {
    color: var(--lg-gold-dark);
    margin-top: 28px;
    margin-bottom: 14px;
    font-size: 22px;
}
.leggit-content-block p {
    color: var(--lg-text);
    line-height: 1.8;
    margin-bottom: 16px;
}
.leggit-content-block ul {
    color: var(--lg-text);
    line-height: 1.9;
    padding-left: 22px;
}
.leggit-content-block strong { color: var(--lg-navy); }

.leggit-flow {
    counter-reset: phase;
}
.leggit-flow-step {
    background: #fff;
    border-left: 4px solid var(--lg-gold);
    padding: 28px 32px;
    margin-bottom: 18px;
    border-radius: var(--lg-radius);
    box-shadow: var(--lg-shadow);
    counter-increment: phase;
    position: relative;
    padding-left: 100px;
}
.leggit-flow-step::before {
    content: counter(phase);
    position: absolute;
    top: 28px;
    left: 28px;
    width: 50px;
    height: 50px;
    background: var(--lg-navy);
    color: var(--lg-gold);
    font-family: var(--lg-font-serif);
    font-size: 24px;
    font-weight: 700;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.leggit-flow-step h3 {
    color: var(--lg-navy);
    font-size: 22px;
    margin-bottom: 10px;
}
.leggit-flow-step p {
    color: var(--lg-text);
    line-height: 1.7;
    margin-bottom: 8px;
}
.leggit-flow-step .leggit-flow-detail {
    color: var(--lg-text-muted);
    font-size: 14px;
    font-style: italic;
}

/* ====================== RESPONSIVE ====================== */
@media (max-width: 992px) {
    .leggit-hero { padding: 100px 0 70px; }
    .leggit-hero h1 { font-size: 40px; }
    .leggit-section { padding: 70px 0; }
    .leggit-section-title h2 { font-size: 32px; }
    .leggit-page-header { padding: 110px 0 60px; }
    .leggit-page-header h1 { font-size: 34px; }
    .leggit-flow-step { padding-left: 28px; padding-top: 80px; }
    .leggit-flow-step::before {
        top: 20px;
        left: 20px;
    }
}
@media (max-width: 768px) {
    .leggit-hero h1 { font-size: 32px; }
    .leggit-hero p { font-size: 17px; }
    .leggit-alerte-notaire-inner {
        flex-direction: column;
        padding: 24px;
    }
    .leggit-alerte-notaire-icon { margin: 0 auto; }
    .leggit-features-table th,
    .leggit-features-table td { padding: 10px 8px; font-size: 13px; }
    .leggit-stat-num { font-size: 42px; }
    .leggit-404 h1 { font-size: 90px; }
    .leggit-content-block { padding: 26px; }
    .lang-switcher { display: none; } /* mobile : pas de selecteur en haut, accessible via menu */
}
@media (max-width: 575px) {
    .leggit-header .header-action { gap: 8px; }
    .leggit-header .header-btn { padding: 8px 14px; font-size: 12px; }
    .leggit-wordmark { font-size: 26px; }
    .leggit-hero h1 { font-size: 28px; }
    .leggit-section-title h2 { font-size: 26px; }
}

/* ==========================================================================
   Refonte frontend — composants ajoutes (4 univers, 4 voies, modes liberation)
   ========================================================================== */

.leggit-section-lead {
    font-size: 17px;
    color: var(--lg-text);
    margin-top: 12px;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* Cards "4 univers" : transmission post-mortem / familial / crypto / mémorial */
.leggit-univers-card {
    display: block;
    background: #fff;
    border: 1px solid #ece5db;
    border-radius: 16px;
    padding: 28px 24px;
    height: 100%;
    text-decoration: none;
    color: var(--lg-text);
    transition: all 0.25s ease;
}
.leggit-univers-card:hover {
    border-color: var(--lg-or);
    box-shadow: 0 6px 24px rgba(182, 140, 90, 0.12);
    transform: translateY(-3px);
    text-decoration: none;
    color: var(--lg-text);
}
.leggit-univers-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--lg-or) 0%, #d4a875 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    margin-bottom: 18px;
}
.leggit-univers-card h3 {
    font-family: 'Frank Ruhl Libre', serif;
    font-size: 20px;
    color: var(--lg-navy);
    margin-bottom: 12px;
    line-height: 1.3;
}
.leggit-univers-card p {
    font-size: 14px;
    color: var(--lg-text);
    line-height: 1.5;
    margin-bottom: 14px;
}
.leggit-univers-link {
    color: var(--lg-or);
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.leggit-univers-link i { transition: transform 0.2s ease; }
.leggit-univers-card:hover .leggit-univers-link i { transform: translateX(3px); }

/* Cards "4 voies" : INSEE / notaire / opérateur / tiers */
.leggit-voie {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #ece5db;
    height: 100%;
    position: relative;
}
.leggit-voie-num {
    position: absolute;
    top: -16px;
    left: 24px;
    width: 36px;
    height: 36px;
    background: var(--lg-or);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.leggit-voie h3 {
    font-family: 'Frank Ruhl Libre', serif;
    font-size: 19px;
    color: var(--lg-navy);
    margin: 14px 0 10px;
}
.leggit-voie p {
    font-size: 14px;
    color: var(--lg-text);
    line-height: 1.5;
    margin-bottom: 8px;
}

/* Cards "modes de libération" : independant / quorum / tous / executeur */
.leggit-mode {
    background: #fff;
    border-radius: 12px;
    padding: 26px 22px;
    height: 100%;
    border: 1px solid #ece5db;
    text-align: center;
}
.leggit-mode-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    background: var(--lg-cream, #f8f3ee);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lg-or);
    font-size: 22px;
}
.leggit-mode h3 {
    font-family: 'Frank Ruhl Libre', serif;
    font-size: 19px;
    color: var(--lg-navy);
    margin-bottom: 10px;
}
.leggit-mode p {
    font-size: 14px;
    color: var(--lg-text);
    line-height: 1.5;
    margin-bottom: 12px;
}
.leggit-mode-tag {
    display: inline-block;
    background: rgba(182, 140, 90, 0.08);
    color: var(--lg-or);
    border-radius: 14px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
}

.leggit-presence-conjointe-note {
    background: #fff;
    border-radius: 12px;
    padding: 20px 28px;
    color: var(--lg-text);
    font-size: 15px;
    border: 1px dashed var(--lg-or);
}
.leggit-presence-conjointe-note a {
    color: var(--lg-or);
    font-weight: 600;
}

/* Pages thématiques : sections d'ancrage avec lead */
.leggit-page-section {
    padding: 60px 0;
    border-top: 1px solid #ece5db;
}
.leggit-page-section:first-of-type { border-top: 0; }
.leggit-page-section h2 {
    font-family: 'Frank Ruhl Libre', serif;
    font-size: 32px;
    color: var(--lg-navy);
    margin-bottom: 18px;
}
.leggit-page-section h3 {
    font-family: 'Frank Ruhl Libre', serif;
    font-size: 22px;
    color: var(--lg-navy);
    margin-top: 24px;
    margin-bottom: 12px;
}
.leggit-page-section p { line-height: 1.7; color: var(--lg-text); }

/* Tableau comparatif (page destinataires) */
.leggit-comparison-table {
    width: 100%;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    border: 1px solid #ece5db;
    margin: 20px 0;
}
.leggit-comparison-table th,
.leggit-comparison-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #f0e8de;
    text-align: left;
    font-size: 14px;
}
.leggit-comparison-table thead th {
    background: var(--lg-navy);
    color: #fff;
    font-weight: 600;
}
.leggit-comparison-table tbody tr:hover { background: #fcfaf6; }
.leggit-comparison-table .yes { color: #198754; font-weight: 600; }
.leggit-comparison-table .no { color: #b0a896; }
.leggit-comparison-table .partial { color: #fd7e14; font-weight: 600; }

/* Hero secondaire (pages thématiques) */
.leggit-hero-secondary {
    background: linear-gradient(135deg, var(--lg-navy) 0%, #1f3358 100%);
    color: #fff;
    /* padding-top généreux : le menu fixed colle à la section, on a besoin
       d'air entre la barre de nav et le titre H1 pour ne pas étouffer. */
    padding: 130px 0 70px;
    text-align: center;
}
.leggit-hero-secondary h1 {
    font-family: 'Frank Ruhl Libre', serif;
    font-size: 46px;
    color: #fff;
    margin-bottom: 18px;
}
.leggit-hero-secondary p {
    font-size: 19px;
    color: rgba(255, 255, 255, 0.85);
    max-width: 720px;
    margin: 0 auto;
    line-height: 1.6;
}
.leggit-hero-secondary .leggit-eyebrow { color: var(--lg-or); }

/* Page-toc : sommaire ancré (sticky sur grand écran) */
.leggit-page-toc {
    position: sticky;
    top: 90px;
    background: #fff;
    border: 1px solid #ece5db;
    border-radius: 12px;
    padding: 18px;
    font-size: 14px;
}
.leggit-page-toc h4 {
    font-family: 'Frank Ruhl Libre', serif;
    font-size: 15px;
    color: var(--lg-navy);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.leggit-page-toc ul { list-style: none; padding: 0; margin: 0; }
.leggit-page-toc li { margin: 6px 0; }
.leggit-page-toc a {
    color: var(--lg-text);
    text-decoration: none;
    display: block;
    padding: 4px 0;
    border-left: 2px solid transparent;
    padding-left: 10px;
    transition: all 0.15s ease;
}
.leggit-page-toc a:hover {
    color: var(--lg-or);
    border-left-color: var(--lg-or);
}

@media (max-width: 991px) {
    .leggit-page-toc { position: relative; top: 0; margin-bottom: 24px; }
}

@media (max-width: 991px) {
    .leggit-hero-secondary { padding: 100px 0 50px; }
}

@media (max-width: 575px) {
    .leggit-univers-card { padding: 20px; }
    .leggit-voie { padding: 18px; }
    .leggit-mode { padding: 20px 16px; }
    .leggit-hero-secondary { padding: 80px 0 40px; }
    .leggit-hero-secondary h1 { font-size: 32px; }
    .leggit-hero-secondary p { font-size: 16px; }
}

/* =====================================================================
 * Illustrations SVG inline (style Jonathan, statique)
 * Cf. includes/illustrations.php — bibliotheque de ~25 illustrations
 * ===================================================================== */
.lg-illus {
    display: block;
    max-width: 100%;
    height: auto;
    color: var(--lg-navy);
}
.lg-illus-small  { width: 80px; }
.lg-illus-medium { width: 140px; }
.lg-illus-large  { width: 200px; }

/* Classes utilisees a l'interieur des SVG (factorisees depuis jonathan) */
.lg-illus .lg-ink         { stroke: var(--lg-navy); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lg-illus .lg-ink-thick   { stroke-width: 2.5; }
.lg-illus .lg-soft        { stroke: var(--lg-navy); stroke-opacity: 0.3; fill: none; stroke-width: 1.2; }
.lg-illus .lg-gold        { stroke: var(--lg-gold); fill: none; stroke-width: 1.5; }
.lg-illus .lg-gold-fill   { fill: var(--lg-gold); stroke: var(--lg-gold); stroke-width: 1; }
.lg-illus .lg-bg-fill     { fill: #f4ead6; }
.lg-illus .lg-warn        { stroke: #c85a4f; fill: none; }
.lg-illus .lg-warn-fill   { fill: #c85a4f; }
.lg-illus .lg-success     { stroke: #5b8c5a; fill: none; }
.lg-illus .lg-success-fill { fill: #5b8c5a; }

/* Dark mode (cf. prefers-color-scheme) */
@media (prefers-color-scheme: dark) {
    .lg-illus { color: #f4ead6; }
    .lg-illus .lg-ink   { stroke: #f4ead6; }
    .lg-illus .lg-soft  { stroke: #f4ead6; }
    .lg-illus .lg-bg-fill { fill: #1a2d4a; }
}

/* Card avec illustration : flex layout (illus a gauche, texte a droite sur desktop) */
.lg-rubrique-illus {
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
    padding: 1.4rem 1.4rem 1.4rem 1.4rem;
    background: var(--lg-white);
    border: 1px solid var(--lg-border);
    border-radius: var(--lg-radius);
    margin-bottom: 1.2rem;
    transition: box-shadow 0.2s, transform 0.2s;
}
.lg-rubrique-illus:hover {
    box-shadow: var(--lg-shadow);
    transform: translateY(-2px);
}
.lg-rubrique-illus-art {
    flex: 0 0 120px;
}
.lg-rubrique-illus-body {
    flex: 1 1 auto;
    min-width: 0;
}
.lg-rubrique-illus-body h3 {
    font-size: 19px;
    color: var(--lg-navy);
    margin: 0 0 0.5rem;
    font-family: var(--lg-font-serif);
}
.lg-rubrique-illus-body p {
    font-size: 15px;
    color: var(--lg-text);
    line-height: 1.5;
    margin: 0 0 0.7rem;
}
.lg-rubrique-illus-body ul {
    padding-left: 1.2rem;
    margin: 0 0 0.7rem;
    font-size: 14px;
}
.lg-rubrique-illus-body ul li {
    margin-bottom: 0.2rem;
}
.lg-rubrique-illus-cta {
    color: var(--lg-gold);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.lg-rubrique-illus-cta:hover {
    color: var(--lg-gold-dark);
    text-decoration: underline;
}

/* Responsive : sur mobile, illustration centree en haut */
@media (max-width: 767px) {
    .lg-rubrique-illus {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .lg-rubrique-illus-art {
        flex: 0 0 auto;
    }
    .lg-rubrique-illus-body ul {
        text-align: left;
    }
}

/* =====================================================================
 * Variante "card grille" — pour disposition 2 ou 3 colonnes Bootstrap
 * (`<div class="col-md-6 col-lg-4"><div class="lg-rubrique-card">...`)
 *
 * Difference avec `.lg-rubrique-illus` :
 *   - Layout vertical par defaut (illus en haut, texte dessous)
 *   - height: 100% pour aligner les cards entre elles dans la row
 *   - Illustration centree et plus petite
 * ===================================================================== */
.lg-rubrique-card {
    background: var(--lg-white);
    border: 1px solid var(--lg-border);
    border-radius: var(--lg-radius);
    padding: 1.6rem 1.4rem 1.4rem;
    transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.lg-rubrique-card:hover {
    border-color: var(--lg-gold);
    box-shadow: var(--lg-shadow);
    transform: translateY(-3px);
}
.lg-rubrique-card-art {
    text-align: center;
    margin-bottom: 1rem;
}
.lg-rubrique-card-art .lg-illus {
    width: 110px;
    height: auto;
    display: inline-block;
}
.lg-rubrique-card h3 {
    font-size: 18px;
    color: var(--lg-navy);
    margin: 0 0 0.5rem;
    font-family: var(--lg-font-serif);
    text-align: center;
    line-height: 1.25;
}
.lg-rubrique-card p {
    font-size: 14.5px;
    color: var(--lg-text);
    line-height: 1.55;
    margin: 0 0 1rem;
    flex: 1 1 auto;
}
.lg-rubrique-card-cta {
    color: var(--lg-gold);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
    border-top: 1px solid var(--lg-border);
    padding-top: 0.8rem;
}
.lg-rubrique-card-cta:hover {
    color: var(--lg-gold-dark);
    text-decoration: underline;
}
.lg-rubrique-card-cta i {
    transition: transform 0.2s;
}
.lg-rubrique-card:hover .lg-rubrique-card-cta i {
    transform: translateX(3px);
}