/* ================================================================
   Foidora — Pages publiques (contact, pages légales, connexion)
   Même langage que la page d'accueil : s'appuie sur les variables,
   boutons et composants de landing-premium.css (chargée avant).
   ================================================================ */

/* ── 1. EN-TÊTE DE PAGE ───────────────────────────────────────── */
.page-hero {
    position: relative;
    overflow: hidden;
    padding: 150px 0 56px;
    text-align: center;
    background:
        radial-gradient(ellipse 60% 70% at 85% 0%, rgba(0,78,146,0.07) 0%, transparent 70%),
        radial-gradient(ellipse 50% 60% at 0% 100%, rgba(255,180,0,0.06) 0%, transparent 70%),
        #fff;
}

.page-title {
    font-size: clamp(2rem, 3.6vw, 3rem);
    font-weight: 900;
    line-height: 1.18;
    letter-spacing: -0.8px;
    color: var(--lp-anthracite);
    margin-bottom: 1rem;
}

.page-lead {
    font-size: 1.08rem;
    line-height: 1.7;
    color: var(--lp-gray);
    max-width: 620px;
    margin: 0 auto;
}

.page-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 1.4rem;
    font-size: 0.86rem;
    color: var(--lp-gray);
}

.page-body { padding: 24px 0 96px; }

.landing-navbar .nav-link.is-active { color: var(--lp-blue) !important; }
.landing-navbar .nav-link.is-active::after { width: calc(100% - 1.6rem); }

/* Carte de contenu commune */
.lp-card {
    background: #fff;
    border: 1.5px solid #EAECF0;
    border-radius: var(--lp-radius-lg);
    padding: 40px;
}

/* ── 2. PAGES LÉGALES ─────────────────────────────────────────── */
.legal-toc {
    position: sticky;
    top: 110px;
}

.legal-toc-title {
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--lp-gray);
    margin-bottom: 14px;
}

.legal-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 2px solid #EAECF0;
}

.legal-toc-list a {
    display: block;
    margin-left: -2px;
    padding: 7px 0 7px 16px;
    border-left: 2px solid transparent;
    font-size: 0.92rem;
    color: var(--lp-gray);
    text-decoration: none;
    transition: color .2s ease, border-color .2s ease;
}

.legal-toc-list a:hover { color: var(--lp-blue); }
.legal-toc-list a.active { color: var(--lp-blue); border-left-color: var(--lp-blue); font-weight: 600; }

.legal-actions { margin-top: 24px; }

.legal-doc { padding: 48px 52px; }

.legal-intro {
    font-size: 1.08rem;
    line-height: 1.75;
    color: var(--lp-anthracite);
    padding-bottom: 28px;
    margin-bottom: 8px;
    border-bottom: 1px solid #EAECF0;
}

.legal-doc section { padding-top: 28px; scroll-margin-top: 110px; }

.legal-doc h2 {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.2px;
    color: var(--lp-anthracite);
    margin-bottom: 12px;
}

.legal-num {
    flex-shrink: 0;
    min-width: 30px;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--lp-blue);
}

.legal-doc p,
.legal-doc li {
    font-size: 0.97rem;
    line-height: 1.75;
    color: #4B5565;
}

.legal-doc p:last-child { margin-bottom: 0; }
.legal-doc ul { padding-left: 1.2rem; margin-bottom: 0; }
.legal-doc li + li { margin-top: 4px; }

.legal-facts {
    list-style: none;
    padding: 0 !important;
    margin: 0;
    border: 1px solid #EAECF0;
    border-radius: var(--lp-radius-md);
    overflow: hidden;
}

.legal-facts li {
    display: flex;
    gap: 16px;
    padding: 12px 18px;
    margin: 0 !important;
}

.legal-facts li + li { border-top: 1px solid #EAECF0; }
.legal-facts .lf-label { flex: 0 0 170px; font-weight: 600; color: var(--lp-anthracite); }

/* ── 3. CONTACT ───────────────────────────────────────────────── */
.contact-aside { display: flex; flex-direction: column; gap: 24px; }

.contact-aside .lp-card { padding: 32px; }

.contact-block-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--lp-anthracite);
    margin-bottom: 20px;
}

.info-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.info-row + .info-row { margin-top: 18px; }

.info-icon {
    width: 42px; height: 42px;
    flex-shrink: 0;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--lp-blue-soft);
    color: var(--lp-blue);
    font-size: 1.15rem;
}

.info-label { font-size: 0.78rem; color: var(--lp-gray); }
.info-value { font-size: 0.95rem; font-weight: 600; color: var(--lp-anthracite); word-break: break-word; }
a.info-value { text-decoration: none; }
a.info-value:hover { color: var(--lp-blue); }

.help-list { list-style: none; padding: 0; margin: 0; }
.help-list li { display: flex; gap: 12px; }
.help-list li + li { margin-top: 16px; }
.help-list i { color: var(--lp-blue); font-size: 1.1rem; margin-top: 2px; }
.help-list strong { display: block; font-size: 0.93rem; color: var(--lp-anthracite); }
.help-list span { font-size: 0.86rem; color: var(--lp-gray); }

.form-card-head { margin-bottom: 28px; }
.form-card-title { font-size: 1.35rem; font-weight: 800; color: var(--lp-anthracite); margin-bottom: 6px; }
.form-card-sub { font-size: 0.95rem; color: var(--lp-gray); margin: 0; }

.form-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.form-note { display: inline-flex; align-items: center; gap: 8px; font-size: 0.86rem; color: var(--lp-gray); }

/* ── 4. CHAMPS DE FORMULAIRE (contact et connexion) ───────────── */
.lp-label,
.public-page .form-label,
.auth-page .form-label {
    display: block;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--lp-anthracite);
    margin-bottom: 7px;
}

.lp-label .req { color: #dc2626; }

.lp-input,
.auth-page .form-control,
.auth-page .form-select {
    display: block;
    width: 100%;
    padding: 12px 14px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    color: var(--lp-anthracite);
    background: #fff;
    border: 1.5px solid #E4E7EC;
    border-radius: 12px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.lp-input::placeholder,
.auth-page .form-control::placeholder { color: #98A2B3; }

.lp-input:focus,
.auth-page .form-control:focus,
.auth-page .form-select:focus {
    outline: none;
    border-color: var(--lp-blue);
    box-shadow: 0 0 0 4px var(--lp-blue-soft);
}

textarea.lp-input { min-height: 160px; resize: vertical; }

.lp-input.is-invalid,
.auth-page .form-control.is-invalid,
.auth-page .form-select.is-invalid { border-color: #dc2626; }

.lp-error,
.auth-page .invalid-feedback { font-size: 0.82rem; color: #dc2626; margin-top: 6px; }

.lp-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 0.92rem;
    margin-bottom: 24px;
}

.lp-alert i { font-size: 1.15rem; flex-shrink: 0; }
.lp-alert-success { background: rgba(34,197,94,0.1); color: #15803d; }
.lp-alert-error   { background: rgba(220,38,38,0.08); color: #b91c1c; }
.lp-alert-info    { background: var(--lp-blue-soft); color: var(--lp-blue); }

/* ── 5. CONNEXION / INSCRIPTION (layouts/guest) ───────────────── */
body.auth-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(ellipse 60% 55% at 90% 0%, rgba(0,78,146,0.08) 0%, transparent 70%),
        radial-gradient(ellipse 50% 50% at 0% 100%, rgba(255,180,0,0.07) 0%, transparent 70%),
        var(--lp-light-bg);
}

.auth-topbar { padding: 22px 0; }

.auth-topbar .brand {
    font-weight: 900;
    font-size: 1.6rem;
    letter-spacing: -0.5px;
    color: var(--lp-blue);
    text-decoration: none;
}

.auth-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 8px 0 48px;
}

.auth-shell {
    display: grid;
    grid-template-columns: 5fr 7fr;
    max-width: 1080px;
    margin: 0 auto;
    background: #fff;
    border: 1.5px solid #EAECF0;
    border-radius: var(--lp-radius-xl);
    box-shadow: var(--lp-shadow-md);
    overflow: hidden;
}

.auth-aside {
    display: flex;
    flex-direction: column;
    padding: 48px 44px;
    background:
        radial-gradient(ellipse 80% 60% at 100% 0%, rgba(0,78,146,0.10) 0%, transparent 70%),
        var(--lp-light-bg);
    border-right: 1.5px solid #EAECF0;
}

.auth-aside-title {
    font-size: 1.85rem;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -0.6px;
    color: var(--lp-anthracite);
    margin-bottom: 12px;
}

.auth-aside-sub { font-size: 0.97rem; line-height: 1.65; color: var(--lp-gray); margin-bottom: 32px; }

.auth-points { list-style: none; padding: 0; margin: 0; }
.auth-points li { display: flex; gap: 14px; align-items: flex-start; }
.auth-points li + li { margin-top: 20px; }
.auth-points .hb-icon { color: var(--lp-blue); }
.auth-points strong { display: block; font-size: 0.95rem; color: var(--lp-anthracite); }
.auth-points span { font-size: 0.86rem; color: var(--lp-gray); }

.auth-aside-foot { margin-top: auto; padding-top: 32px; font-size: 0.82rem; color: var(--lp-gray); }

.auth-main { padding: 52px 56px; }

.auth-title {
    font-size: 1.9rem;
    font-weight: 900;
    letter-spacing: -0.6px;
    line-height: 1.2;
    color: var(--lp-anthracite);
    margin-bottom: 8px;
}

.auth-sub { font-size: 0.97rem; color: var(--lp-gray); margin-bottom: 32px; }

.auth-field { margin-bottom: 20px; }

.auth-input { position: relative; }

.auth-input > i {
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    color: #98A2B3;
    font-size: 1.05rem;
    pointer-events: none;
}

.auth-page .auth-input > i + .form-control { padding-left: 42px; }
.auth-page .auth-input > .form-control.has-eye { padding-right: 46px; }

.auth-eye {
    position: absolute;
    right: 6px; top: 50%;
    transform: translateY(-50%);
    width: 36px; height: 36px;
    border: 0; border-radius: 9px;
    background: transparent;
    color: #98A2B3;
    display: flex; align-items: center; justify-content: center;
}

.auth-eye:hover { color: var(--lp-blue); background: var(--lp-blue-soft); }

.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
}

.auth-link { color: var(--lp-blue); font-weight: 600; text-decoration: none; }
.auth-link:hover { color: var(--lp-blue-dark); text-decoration: underline; }

.auth-page .form-check-input {
    width: 1.15em; height: 1.15em;
    margin-top: 0.2em;
    border: 1.5px solid #D0D5DD;
    border-radius: 6px;
}

.auth-page .form-check-input:checked { background-color: var(--lp-blue); border-color: var(--lp-blue); }
.auth-page .form-check-input:focus { box-shadow: 0 0 0 4px var(--lp-blue-soft); border-color: var(--lp-blue); }
.auth-page .form-check-label { font-size: 0.9rem; color: var(--lp-gray); }

.auth-submit { width: 100%; padding: 13px 24px; }

.auth-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 24px 0;
    font-size: 0.84rem;
    color: #98A2B3;
}

.auth-divider::before,
.auth-divider::after { content: ''; flex: 1; height: 1px; background: #EAECF0; }

.auth-social { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-social .btn-premium { width: 100%; }

.auth-foot { margin-top: 28px; text-align: center; font-size: 0.92rem; color: var(--lp-gray); }
.auth-foot p { margin-bottom: 6px; }

.auth-hint { font-size: 0.84rem; color: var(--lp-gray); }
.auth-hint i { color: var(--lp-blue); }

/* ── 6. RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 991px) {
    .page-hero { padding: 128px 0 40px; }
    .legal-doc { padding: 36px 32px; }
    .auth-shell { grid-template-columns: 1fr; max-width: 560px; }
    .auth-aside { display: none; }
    .auth-main { padding: 40px 36px; }
}

@media (max-width: 575px) {
    .page-body { padding-bottom: 72px; }
    .lp-card, .contact-aside .lp-card { padding: 26px 22px; }
    .legal-doc { padding: 28px 22px; }
    .legal-facts li { flex-direction: column; gap: 2px; }
    .legal-facts .lf-label { flex-basis: auto; }
    .auth-main { padding: 32px 22px; }
    .auth-shell { border-radius: var(--lp-radius-lg); }
    .auth-social { grid-template-columns: 1fr; }
    .auth-title { font-size: 1.6rem; }
}

/* ── 7. IMPRESSION (pages légales) ────────────────────────────── */
@media print {
    .landing-navbar, .lp-footer, .lp-wa-btn, .lp-back-top, .legal-toc-col { display: none !important; }
    .page-hero { padding: 0 0 16px; background: none; }
    .legal-doc { border: 0; padding: 0; }
    [data-animate] { opacity: 1 !important; transform: none !important; }
}

/* ── 8. MODE SOMBRE ───────────────────────────────────────────── */
body.dark .page-hero {
    background:
        radial-gradient(ellipse 60% 70% at 85% 0%, rgba(140,198,255,0.08) 0%, transparent 70%),
        #0f141c;
}

body.dark .page-title,
body.dark .contact-block-title,
body.dark .form-card-title,
body.dark .legal-doc h2,
body.dark .legal-intro,
body.dark .info-value,
body.dark .help-list strong,
body.dark .legal-facts .lf-label,
body.dark .auth-title,
body.dark .auth-aside-title,
body.dark .auth-points strong,
body.dark .lp-label,
body.dark.public-page .form-label,
body.dark.auth-page .form-label { color: #eef2ff; }

body.dark .page-lead,
body.dark .page-meta,
body.dark .legal-doc p,
body.dark .legal-doc li,
body.dark .info-label,
body.dark .help-list span,
body.dark .form-card-sub,
body.dark .form-note,
body.dark .auth-sub,
body.dark .auth-aside-sub,
body.dark .auth-points span,
body.dark .auth-aside-foot,
body.dark .auth-foot,
body.dark .auth-hint,
body.dark.auth-page .form-check-label { color: #a8b0bf; }

body.dark .lp-card,
body.dark .auth-shell {
    background: rgba(22,28,38,0.92);
    border-color: rgba(255,255,255,0.08);
    box-shadow: 0 18px 45px rgba(0,0,0,0.35);
}

body.dark .legal-intro,
body.dark .legal-facts,
body.dark .legal-facts li + li { border-color: rgba(255,255,255,0.08); }
body.dark .legal-toc-list { border-left-color: rgba(255,255,255,0.1); }
body.dark .legal-toc-list a { color: #a8b0bf; }
body.dark .legal-toc-list a:hover,
body.dark .legal-toc-list a.active { color: #8cc6ff; border-left-color: #8cc6ff; }
body.dark .legal-num,
body.dark .help-list i,
body.dark .auth-hint i,
body.dark .auth-link,
body.dark .auth-topbar .brand { color: #8cc6ff; }

body.dark .info-icon,
body.dark .auth-points .hb-icon { background: rgba(140,198,255,0.12); color: #8cc6ff; }

body.dark .lp-input,
body.dark.auth-page .form-control,
body.dark.auth-page .form-select {
    background: #111823;
    border-color: rgba(255,255,255,0.12);
    color: #eef2ff;
}

body.dark .lp-input:focus,
body.dark.auth-page .form-control:focus,
body.dark.auth-page .form-select:focus { border-color: #8cc6ff; box-shadow: 0 0 0 4px rgba(140,198,255,0.15); }

body.dark.auth-page {
    background:
        radial-gradient(ellipse 60% 55% at 90% 0%, rgba(140,198,255,0.08) 0%, transparent 70%),
        #0f141c;
}

body.dark .auth-aside {
    background: radial-gradient(ellipse 80% 60% at 100% 0%, rgba(140,198,255,0.08) 0%, transparent 70%), #111823;
    border-right-color: rgba(255,255,255,0.08);
}

body.dark .auth-divider::before,
body.dark .auth-divider::after { background: rgba(255,255,255,0.1); }
body.dark.auth-page .form-check-input { background-color: #111823; border-color: rgba(255,255,255,0.2); }
body.dark.auth-page .form-check-input:checked { background-color: #8cc6ff; border-color: #8cc6ff; }
body.dark .lp-alert-info { background: rgba(140,198,255,0.1); color: #8cc6ff; }
body.dark .lp-alert-success { background: rgba(34,197,94,0.12); color: #86efac; }
body.dark .lp-alert-error { background: rgba(220,38,38,0.12); color: #fca5a5; }