/* ==========================================================
   MON DJASSA — Pages publiques (accueil, tarifs, légal…)
   Mobile first. En-tête et menu burger : app.css.
   ========================================================== */

.landing { background: var(--white); }

/* ---------- Héros ---------- */
.hero {
    padding: 48px 0 40px;
    text-align: center;
    background:
        radial-gradient(circle at 15% 20%, rgba(255, 127, 0, 0.14), transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(40, 167, 69, 0.10), transparent 45%),
        var(--light);
}

.hero-content h1 {
    margin-bottom: 16px;
    font-size: clamp(1.75rem, 5vw + 1rem, 3.25rem);
    line-height: 1.15;
}

.hero-content h1 span { color: var(--primary); }

.hero-sub {
    max-width: 640px;
    margin: 0 auto 24px;
    color: var(--text-soft);
}

.hero-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 420px;
    margin: 0 auto 28px;
}

@media (min-width: 480px) {
    .hero-actions {
        flex-direction: row;
        justify-content: center;
        max-width: none;
    }
}

.hero-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--text-soft);
}

.hero-stats strong {
    display: block;
    font-size: 1.6rem;
    color: var(--primary-dark);
}

/* ---------- Sections ---------- */
.section { padding: 44px 0; }
.section-alt { background: var(--light); }

.section-title {
    margin-bottom: 24px;
    text-align: center;
    font-size: clamp(1.4rem, 3vw + 0.75rem, 2.2rem);
}

.center { text-align: center; }

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 16px;
}

.info-card {
    padding: 20px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.info-card h3 { font-size: 1.15rem; }
.info-card p { margin: 0; color: var(--text-soft); }

.info-card-icon {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 2rem;
    line-height: 1;
}

.info-card-pro { border: 2px solid var(--purple); }

.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tag-cloud li {
    padding: 8px 16px;
    font-weight: 600;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 999px;
}

/* ---------- Mission ---------- */
.section-mission {
    color: var(--white);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.mission {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mission p { margin: 0; opacity: 0.95; }

.mission .btn-outline {
    align-self: flex-start;
    color: var(--white);
    border-color: var(--white);
}

@media (min-width: 768px) {
    .mission {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 32px;
    }

    .mission .btn-outline { align-self: center; flex: 0 0 auto; }
}

/* ---------- Tarifs ---------- */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px 20px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.pricing-card.is-popular { border: 2px solid var(--primary); }

.pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    padding: 2px 12px;
    font-size: 0.8em;
    font-weight: 700;
    color: var(--white);
    background: var(--primary);
    border-radius: 999px;
    transform: translateX(-50%);
}

.pricing-price {
    margin: 4px 0 0;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--primary-dark);
}

.pricing-price small { font-size: 0.5em; font-weight: 600; }

.pricing-card ul {
    flex: 1;
    margin: 16px 0 20px;
    padding: 0;
    list-style: none;
}

.pricing-card li { padding: 4px 0; }

.pack-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.pack-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
}

.pack-item strong { font-size: 1.25rem; }
.pack-item span { font-weight: 700; color: var(--primary-dark); }

/* ---------- Appel à l'action ---------- */
.cta-band {
    padding: 48px 0;
    text-align: center;
    background: #e9f7ef;
    border-radius: 40px 40px 0 0;
}

/* ---------- Pages de contenu ---------- */
.page {
    max-width: 880px;
    padding-top: 32px;
    padding-bottom: 48px;
}

.page-heading {
    margin-bottom: 12px;
    font-size: clamp(1.6rem, 3vw + 1rem, 2.5rem);
}

.page-lead {
    margin-bottom: 28px;
    font-size: clamp(1rem, 1vw + 0.75rem, 1.2rem);
    color: var(--text-soft);
}

.page h2 {
    margin-top: 32px;
    font-size: clamp(1.25rem, 1.5vw + 0.9rem, 1.6rem);
}

.page-legal ul { padding-left: 20px; }
.page-legal li { margin-bottom: 6px; }

.check-list {
    padding: 0;
    list-style: none;
}

.check-list li {
    position: relative;
    margin-bottom: 10px;
    padding-left: 28px;
}

.check-list li::before {
    content: "✔";
    position: absolute;
    left: 0;
    color: var(--success);
    font-weight: 700;
}

.highlight-box {
    margin: 20px 0;
    padding: 16px 20px;
    background: #e9f7ef;
    border-left: 4px solid var(--success);
    border-radius: var(--radius);
}

.highlight-box p { margin: 0; }
.highlight-warning { background: #fff8e1; border-left-color: var(--warning); }

.page-cta {
    margin-top: 40px;
    padding: 28px 20px;
    text-align: center;
    background: var(--light);
    border-radius: var(--radius-lg);
}

/* Histoire */
.timeline {
    margin: 0;
    padding: 0;
    list-style: none;
}

.timeline li {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 14px 0;
    border-bottom: 1px dashed var(--border);
}

.timeline-date {
    font-weight: 800;
    color: var(--primary-dark);
}

@media (min-width: 768px) {
    .timeline li { grid-template-columns: 110px 1fr; gap: 16px; }
}

/* Équipe */
.team {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 20px;
}

.team-member { text-align: center; }

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    margin-bottom: 8px;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--primary-dark);
    background: #fff1e0;
    border-radius: 50%;
}

.avatar-alt { color: #1e7e34; background: #e9f7ef; }

.team-role {
    font-weight: 600;
    color: var(--primary-dark);
}

/* Étapes */
.steps-big {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.steps-big li {
    position: relative;
    margin-bottom: 18px;
    padding: 18px 18px 18px 68px;
    background: var(--light);
    border-radius: var(--radius-lg);
    counter-increment: step;
}

.steps-big li::before {
    content: counter(step);
    position: absolute;
    top: 18px;
    left: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-weight: 800;
    color: var(--white);
    background: var(--primary);
    border-radius: 50%;
}

.steps-big h3 { margin-bottom: 4px; font-size: 1.15rem; }
.steps-big p { margin: 0; }

/* FAQ */
.faq-item {
    border-bottom: 1px solid var(--border);
}

.faq-item summary {
    min-height: var(--touch-target);
    padding: 12px 0;
    font-weight: 600;
    cursor: pointer;
}

.faq-item p { color: var(--text-soft); }

/* Contact */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 16px;
}

.contact-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 24px 16px;
    text-align: center;
    color: var(--text);
    text-decoration: none;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow-wrap: anywhere;
}

a.contact-card:hover,
a.contact-card:focus-visible { border-color: var(--primary); color: var(--text); }

/* ---------- Pied de page ---------- */
.landing-footer {
    padding: 40px 0 24px;
    color: #d6dbe1;
    background: var(--dark);
}

.landing-footer a { color: #ffffff; }

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 768px) {
    .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

.footer-brand {
    font-size: 1.3rem;
    color: var(--white);
}

.footer-brand strong { color: var(--primary); }

.footer-title {
    margin-bottom: 10px;
    font-weight: 700;
    color: var(--white);
}

.footer-col ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-col li {
    min-height: 32px;
    padding: 4px 0;
}

.footer-company { font-size: 0.9em; }

.footer-bottom {
    margin-top: 24px;
    padding-top: 16px;
    font-size: 0.85em;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* ---------- Logo, photos et partenaires ---------- */
.hero-logo {
    display: block;
    width: 120px;
    height: auto;
    margin: 0 auto 8px;
    border-radius: var(--radius-lg);
}

@media (min-width: 768px) {
    .hero-logo { width: 160px; }
}

.team-photo {
    display: block;
    width: 140px;
    height: 140px;
    margin: 0 auto 12px;
    object-fit: cover;
    border: 4px solid #fff1e0;
    border-radius: 50%;
    box-shadow: var(--shadow);
}

@media (min-width: 768px) {
    .team-photo { width: 160px; height: 160px; }
}

.partner-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.partner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 16px;
    text-align: center;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.partner img {
    width: auto;
    max-width: 100%;
    height: 70px;
    object-fit: contain;
    border-radius: var(--radius);
}

.partner span {
    font-size: 0.9em;
    color: var(--text-soft);
}