/* Site public Essakina — mise en page inspirée de essakina.be (Avada) : police Inter, arcs, bords
   arrondis, boutons 4px, sections alternées. Couleurs = celles du logo : bleu marine #101a6b,
   gris-bleu #a5abc7 / #6b7a9d (bannière) — pas de gris foncé (demande du client).
   Chargé après site.css et site-modern.css ; retirer le <link> pour revenir au thème précédent. */

:root {
    --green: #101a6b; --green-2: #1c3165; --green-soft: #eceef7;
    --gold: #6b7a9d; --gold-soft: #eef0f6; --logo-grey: #a5abc7;
    --ink: #0e1440; --text: #3d4468; --muted: #6b7090; --line: #e2e4ee; --cream: #f9f8f7;
    --navy-deep: #0b1250; --sky: #f3f4fa;
    --serif: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    --grad: linear-gradient(180deg, #101a6b, #101a6b);
    --grad-deep: linear-gradient(160deg, #101a6b 0%, #1c3165 100%);
    --radius: 8px;
    --shadow-sm: 0 1px 2px rgba(14,20,64,.05), 0 2px 8px rgba(14,20,64,.04);
    --shadow-md: 0 12px 30px -12px rgba(14,20,64,.18);
    --shadow-lg: 0 30px 60px -24px rgba(14,20,64,.30);
}

/* ── Typographie ── */
body { background: #fff; color: var(--text); letter-spacing: .015em; line-height: 1.72; }
h1, h2, h3, .brand .n2, .pack h3, .packs-group-head span, .urgence-card h3, .calc-res h3, .charte h3 {
    font-family: var(--serif); font-weight: 600; letter-spacing: -.015em; }
h1 { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.15; }
h2 { font-size: clamp(28px, 3.4vw, 44px); }
.brand .n2 { font-size: 22px; letter-spacing: -.01em; }
::selection { background: #d9ddf2; color: var(--ink); }
:focus-visible { outline-color: rgba(16,26,107,.45); }
a { color: var(--green); }

/* Sur-titre : gris-bleu du logo, sans pastille */
.eyebrow { background: none; padding: 0; border-radius: 0; color: var(--gold); font-size: 13px; letter-spacing: .14em; display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; border-radius: 2px; }
.calc-res .eyebrow, .cta-band .eyebrow { background: none; color: #fff; }

/* ── Boutons : coins 4px, aplat bleu marine ── */
.btn { border-radius: 4px; font-weight: 500; letter-spacing: .015em; padding: 13px 29px; }
.btn-sm { padding: 8px 18px; }
.btn-primary, .btn-primary:hover { background: var(--green); box-shadow: none; }
.btn-primary:hover { background: var(--green-2); transform: translateY(-1px); }
.btn-ghost { background: #fff; border-color: #cfd2e3; color: var(--ink); box-shadow: none; }
.btn-ghost:hover { border-color: var(--green); color: var(--green); background: #fff; }
.btn-light { color: var(--ink); }
.btn-gold { background: var(--gold); }
.btn-urgence { border-radius: 4px; }

/* ── Bandeau du haut (bleu marine) & en-tête ── */
.top-strip { background: var(--green); color: #fff; font-size: 13px; font-weight: 500; }
.top-strip .wrap { padding-top: 10px; padding-bottom: 10px; }
.top-strip a { color: #fff; }
.header { background: rgba(255,255,255,.92); }
.header.scrolled { background: rgba(255,255,255,.96); box-shadow: 0 6px 24px -14px rgba(14,20,64,.25); }
.nav a { color: var(--ink); font-weight: 500; }
.nav a:hover { color: var(--green); }
.nav a::after { background: var(--green); }
@media (max-width: 960px) {
    .header, .header.scrolled, body.menu-open .header { background: #fff; }
    .nav a::after { background: none; color: var(--green); }
}

/* ── Bloc d'accueil bleu très clair avec arcs (bannière + hero) ── */
.banner { background: var(--sky); padding-top: 32px; }
.banner picture { border-radius: 8px; box-shadow: 0 30px 60px -24px rgba(16,26,107,.30); }
.hero { background: var(--sky); padding-bottom: 130px;
        border-radius: 0 0 50% 50% / 0 0 70px 70px; }
.hero::before, .hero::after { filter: none; opacity: 1; animation: none; background: none; border-radius: 50%; }
.hero::before { width: 760px; height: 760px; right: -220px; top: -260px; border: 46px solid rgba(16,26,107,.06); box-shadow: inset 0 0 0 1px rgba(16,26,107,.12); }
.hero::after { width: 560px; height: 560px; right: -120px; top: -150px; left: auto; bottom: auto; border: 2px solid rgba(165,171,199,.7); }
.ayah { color: #101a6b; }
.hero .trust > div { background: #fff; border-color: #dfe2ef; border-radius: 8px; box-shadow: var(--shadow-sm); backdrop-filter: none; }
.urgence-card { background: var(--green); border-radius: 12px; box-shadow: 0 30px 60px -20px rgba(16,26,107,.45); color: #e3e6f4; }
.urgence-card::after { border-radius: 6px; border-color: rgba(255,255,255,.22); }
.urgence-card::before { background: radial-gradient(circle, rgba(255,255,255,.22), transparent 70%); }
.urgence-card .tel { border-radius: 6px; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); }

/* ── Sections : alternance blanc / bleu très clair ── */
.section { background: #fff; }
.section.bg-white { background: var(--sky); }
.section-head p { color: var(--muted); }

/* ── Cartes : plus sobres, coins 8px ── */
.feature, .step, .faq details, .about, .panel, .calc, .pack, .pack-choice, .consents .check { border-radius: 8px; }
.feature { border-color: var(--line); }
.feature:hover { border-color: #c9cde3; }
.feature .ic { background: var(--gold-soft); border-radius: 50%; }
.about { border-color: var(--line); }
.about-points div { background: var(--sky); border-left-color: var(--green); border-radius: 4px; }
.about-points .about-warn { border-left-color: var(--gold); background: var(--gold-soft); }

/* Formules */
.pack { border-color: var(--line); }
.pack:hover { border-color: var(--green); }
.pack-featured { border: 2px solid var(--green); background: #fff; }
.pack .tag { background: var(--gold); border-radius: 4px; box-shadow: none; }
.pack .price { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--ink); }
.pack .fee { background: var(--sky); color: var(--green-2); border-radius: 4px; }
.pack .fee.none { background: var(--gold-soft); color: #1c3165; }
.pack li::before { color: var(--gold); }
.packs-group-head span { font-size: 24px; }
.packs-group-head span::before, .packs-group-head span::after { background: var(--gold); opacity: 1; }

/* Calculateur : résultat sur fond bleu marine */
.calc { border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.calc-res { background: linear-gradient(160deg, #101a6b, #1c3165); color: #dfe3f3; }
.calc-res::after { width: 360px; height: 360px; right: -150px; bottom: -150px; background: none; border: 2px solid rgba(255,255,255,.25); }
.calc-res .amount { color: #fff; }
.input { border-radius: 4px; border-color: #d6d9e6; }
.input:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(16,26,107,.14); }
.seg label, .stepper button { border-radius: 4px; }
.seg label:has(input:checked) { border-color: var(--green); background: var(--green-soft); color: var(--green-2); }

/* Étapes */
.step::before { background: var(--green); box-shadow: none; }
@media (max-width: 760px) { .steps::before { background: linear-gradient(var(--green), #d9ddf2); } }

/* FAQ */
.faq details[open] { border-color: #c9cde3; }
.faq summary::after { background: var(--green-soft); color: var(--green); }
.faq details[open] summary::after { background: var(--green); }

/* Bandeau final : bleu + arcs */
.cta-band { background: linear-gradient(135deg, #101a6b, #1c3165); border-radius: 12px; color: #dfe3f3; }
.cta-band::before { inset: auto; width: 520px; height: 520px; left: -160px; top: -200px; border-radius: 50%; background: none; border: 40px solid rgba(255,255,255,.07); box-shadow: 0 0 0 2px rgba(255,255,255,.2); animation: none; }

/* Pied de page */
.footer { background: var(--navy-deep); color: #b8bdd8; border-radius: 50% 50% 0 0 / 60px 60px 0 0; padding-top: 80px; }
.footer a.btn-light { color: var(--ink); }

/* Inscription, charte, alertes */
.progress-steps .ps.on { color: var(--green); }
.progress-steps .ps.on::before { background: var(--green); }
.pack-choice:has(input:checked) { box-shadow: 0 0 0 3px rgba(16,26,107,.14); }
.pack-choice .p { color: var(--ink); }
.alert { border-radius: 6px; }
.alert.info { background: var(--sky); border-color: #d6daec; color: #101a6b; }
.alert.gold { background: var(--gold-soft); border-color: #d8dbea; color: #3f4677; }
.charte h4 { color: var(--green-2); }
.charte-note { background: var(--gold-soft); border-left-color: var(--gold); color: #3f4677; border-radius: 4px; }
.pay-box { border-color: var(--gold); border-radius: 8px; }
.sign-pad { border-color: var(--green); box-shadow: 0 0 0 4px rgba(16,26,107,.10), inset 0 2px 6px rgba(14,20,64,.05); }

/* Haut de page & barre d'actions smartphone */
.to-top { background: var(--green); border-radius: 4px; }
@media (max-width: 760px) {
    .hero { padding-bottom: 80px; border-radius: 0 0 50% 50% / 0 0 40px 40px; }
    .hero::before { width: 460px; height: 460px; right: -220px; top: -160px; border-width: 30px; }
    .hero::after { width: 340px; height: 340px; right: -160px; top: -100px; }
    .footer { border-radius: 50% 50% 0 0 / 34px 34px 0 0; padding-top: 56px; }
    .m-actionbar a { border-radius: 6px; }
    .m-actionbar .ab-main { background: var(--green); box-shadow: none; }
    .car-dots button.on { background: var(--green); }
}

/* ═══════════ Calibrage typographique ═══════════
   Une seule échelle pour tout le site public (avant : ~25 tailles différentes) :
   13 · 14 · 15 · 16 · 18 · 20 · 24 · titres fluides. Interligne serré pour les titres, aéré pour le texte. */
:root {
    --fs-xs: 13px;   /* sur-titres, mentions, étiquettes */
    --fs-sm: 14px;   /* textes secondaires, légendes */
    --fs-ui: 15px;   /* menu, boutons, textes de cartes */
    --fs-base: 16px; /* texte courant, champs de formulaire */
    --fs-md: 18px;   /* chapeaux, titres de cartes */
    --fs-lg: 20px;
    --fs-xl: 24px;   /* titres de blocs */
    --fs-h2: clamp(28px, 3vw, 38px);
    --fs-h1: clamp(32px, 4vw, 48px);
}
body { font-size: var(--fs-base); line-height: 1.7; letter-spacing: .005em; }
h1, h2, h3, h4 { letter-spacing: -.02em; }
h1 { font-size: var(--fs-h1); line-height: 1.12; }
h2 { font-size: var(--fs-h2); line-height: 1.18; }
h3 { font-size: var(--fs-md); line-height: 1.3; }
.eyebrow { font-size: var(--fs-xs); letter-spacing: .14em; }
.section-head p { font-size: var(--fs-md); line-height: 1.6; }

/* En-tête */
.top-strip { font-size: var(--fs-xs); }
.brand .n1 { font-size: var(--fs-xs); }
.brand .n2 { font-size: 22px; }
.nav a { font-size: var(--fs-ui); }
.btn { font-size: var(--fs-ui); }
.btn-sm { font-size: var(--fs-sm); }

/* Accueil */
.ayah { font-size: 28px; }
.ayah-fr { font-size: var(--fs-sm); }
.hero p.lead { font-size: var(--fs-md); line-height: 1.65; }
.hero .trust { font-size: var(--fs-xs); }
.hero .trust b { font-size: var(--fs-md); letter-spacing: -.01em; }
.urgence-card h3 { font-size: var(--fs-xl); }
.urgence-card p { font-size: var(--fs-ui); }
.urgence-card .tel { font-size: 26px; }
.urgence-card ul { font-size: var(--fs-ui); }

/* Cartes d'engagement, charte */
.feature h3, .step h3 { font-size: var(--fs-md); }
.feature p, .step p { font-size: var(--fs-ui); line-height: 1.6; }
.about p { font-size: var(--fs-base); }
.about-points b { font-size: var(--fs-base); }
.about-points span { font-size: var(--fs-sm); }

/* Formules */
.packs-group-head span { font-size: var(--fs-xl); }
.packs-group-head small { font-size: var(--fs-sm); }
.pack h3 { font-size: var(--fs-xl); }
.pack .who { font-size: var(--fs-sm); }
.pack .price { font-size: 38px; }
.pack .price small { font-size: var(--fs-ui); }
.pack .fee, .pack .tag { font-size: var(--fs-xs); }
.pack ul { font-size: var(--fs-ui); }

/* Calculateur & formulaires */
.calc-res h3 { font-size: var(--fs-xl); }
.calc-res .amount { font-size: 42px; }
.calc-res .note { font-size: var(--fs-sm); }
.field label { font-size: var(--fs-sm); }
.input { font-size: var(--fs-base); } /* 16px : évite le zoom automatique sur iPhone */
.seg label { font-size: var(--fs-ui); }
.stepper output { font-size: var(--fs-lg); }
.step::before { font-size: var(--fs-md); }
.panel h2 { font-size: 28px; }
.pack-choice .p { font-size: 22px; }
.progress-steps .ps { font-size: var(--fs-xs); }
.alert, .check, .recap { font-size: var(--fs-ui); }

/* FAQ, bandeau final, pied de page */
.faq summary { font-size: 17px; line-height: 1.4; }
.faq details p { font-size: var(--fs-base); }
.cta-band h2 { font-size: clamp(24px, 2.6vw, 32px); }
.footer { font-size: var(--fs-ui); }
.footer h4 { font-size: var(--fs-base); }
.footer .copy { font-size: var(--fs-xs); }

/* Charte & confidentialité */
.charte h3 { font-size: 22px; }
.charte h4 { font-size: var(--fs-md); }
.charte-note { font-size: var(--fs-ui); }

/* Smartphone */
@media (max-width: 760px) {
    body { font-size: var(--fs-base); }
    h1, .hero h1 { font-size: 30px; }
    h2 { font-size: 26px; }
    .section-head p, .hero p.lead { font-size: 17px; }
    .ayah { font-size: 24px; }
    .ayah-fr, .hero .trust { font-size: 12px; }
    .hero .trust b { font-size: var(--fs-base); }
    .urgence-card h3 { font-size: 22px; }
    .urgence-card .tel { font-size: 24px; }
    .feature h3 { font-size: var(--fs-ui); }
    .feature p { font-size: var(--fs-xs); }
    .pack h3 { font-size: 22px; }
    .pack .price { font-size: 34px; }
    .packs-group-head span { font-size: 22px; }
    .calc-res h3 { font-size: 22px; }
    .calc-res .amount { font-size: 36px; }
    .panel h2 { font-size: 24px; }
    .faq summary { font-size: var(--fs-base); }
    .brand .n2 { font-size: var(--fs-lg); }
}

/* ═══════════ Arrondi moderne (2026-10-07) ═══════════
   Boutons en pilule, cartes à grands rayons, ombres douces teintées bleu marine,
   pastilles pour sur-titres/étiquettes, légère élévation au survol. Remplace les coins 4–8px ci-dessus. */
:root {
    --r-sm: 14px;  /* champs, petits éléments */
    --r-md: 20px;  /* cartes */
    --r-lg: 28px;  /* grands blocs */
    --r-pill: 999px;
    --shadow-soft: 0 2px 6px rgba(16,26,107,.04), 0 12px 32px -12px rgba(16,26,107,.14);
    --shadow-lift: 0 4px 10px rgba(16,26,107,.05), 0 26px 50px -18px rgba(16,26,107,.28);
    --radius: var(--r-md);
}

/* Boutons & menu */
.btn, .btn-urgence { border-radius: var(--r-pill); padding: 13px 26px; }
.btn-sm { padding: 9px 18px; }
.btn-primary { box-shadow: 0 10px 22px -10px rgba(16,26,107,.6); }
.btn-primary:hover { box-shadow: 0 14px 28px -10px rgba(16,26,107,.65); transform: translateY(-2px); }
.btn-ghost { border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { transform: translateY(-2px); }
@media (min-width: 961px) {
    .nav { gap: 4px; align-items: center; }
    .nav a { padding: 8px 14px; border-radius: var(--r-pill); transition: background .2s, color .2s; }
    .nav a::after { display: none; }
    .nav a:hover { background: var(--green-soft); color: var(--green); }
}

/* Sur-titres en pastille */
.eyebrow { background: var(--green-soft); color: var(--green-2); padding: 6px 14px; border-radius: var(--r-pill); gap: 8px; }
.eyebrow::before { width: 6px; height: 6px; border-radius: 50%; background: var(--logo-grey); }
.calc-res .eyebrow, .cta-band .eyebrow { background: rgba(255,255,255,.12); color: #fff; align-self: flex-start; }

/* Accueil */
.banner picture { border-radius: var(--r-lg); box-shadow: var(--shadow-lift); }
.hero .trust > div { border-radius: 18px; box-shadow: var(--shadow-soft); }
.urgence-card { border-radius: var(--r-lg); box-shadow: var(--shadow-lift); }
.urgence-card::after { border-radius: 20px; }
.urgence-card .tel { border-radius: 18px; }

/* Cartes */
.feature, .step, .about, .pack, .calc, .panel { border-radius: var(--r-lg); box-shadow: var(--shadow-soft); }
.faq details, .pack-choice, .consents .check { border-radius: var(--r-md); }
.feature, .step, .pack { transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.feature:hover, .step:hover, .pack:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.feature .ic { width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(135deg, var(--green-soft), #dfe3f5); }
.about-points div { border-left: 0; border-radius: var(--r-sm); padding: 14px 18px 14px 44px; position: relative; background: var(--sky); }
.about-points div::before { content: ""; position: absolute; left: 18px; top: 20px; width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(16,26,107,.1); }
.about-points .about-warn::before { background: var(--gold); box-shadow: 0 0 0 4px rgba(107,122,157,.18); }

/* Formules */
.pack .tag { border-radius: var(--r-pill); padding: 4px 14px; background: var(--green); box-shadow: 0 6px 14px -6px rgba(16,26,107,.6); }
.pack .fee { border-radius: var(--r-pill); padding: 4px 12px; }
.pack-featured { box-shadow: var(--shadow-lift); }

/* Calculateur & formulaires */
.calc { border: 0; box-shadow: var(--shadow-lift); }
.input { border-radius: var(--r-sm); }
.seg { background: var(--sky); padding: 5px; border-radius: var(--r-pill); gap: 4px; }
.seg label { border: 0; border-radius: var(--r-pill); background: transparent; padding: 10px; }
.seg label:has(input:checked) { background: #fff; color: var(--green); box-shadow: 0 4px 12px -4px rgba(16,26,107,.25); }
.stepper button { border-radius: 50%; }
.step::before { border-radius: 14px; }

/* FAQ */
.faq details { padding: 18px 24px; }
.faq summary::after { border-radius: 50%; }

/* Bandeau final, pied de page */
.cta-band { border-radius: 32px; box-shadow: var(--shadow-lift); }

/* Inscription, charte, alertes */
.alert { border-radius: var(--r-sm); }
.charte-note { border-left: 0; border-radius: var(--r-md); padding: 16px 20px; }
.pay-box { border-radius: var(--r-md); }
.sign-pad { border-radius: var(--r-md); }
.sign-clear { border-radius: var(--r-pill); }
.progress-steps .ps::before { height: 6px; }

/* Haut de page & smartphone */
.to-top { border-radius: 50%; }
@media (max-width: 760px) {
    .banner picture { border-radius: 0 0 var(--r-lg) var(--r-lg); }
    .feature, .step, .about, .pack, .panel, .calc { border-radius: 22px; }
    .step { box-shadow: none; }
    .urgence-card, .cta-band { border-radius: 24px; }
    .m-actionbar a { border-radius: var(--r-pill); }
    .m-actionbar { border-radius: 22px 22px 0 0; }
}

/* ═══════════ Mobile : rayon unique + menu moderne (2026-10-08) ═══════════
   Sur smartphone, boutons et widgets partagent le même arrondi (--r-m) pour une harmonie visuelle.
   Retour arrière : supprimer ce bloc. */
@media (max-width: 760px) {
    :root { --r-m: 18px; }
    /* Widgets / cartes */
    .feature, .step, .about, .pack, .panel, .calc, .urgence-card, .cta-band,
    .faq details, .pack-choice, .consents .check, .hero .trust > div,
    .charte-note, .pay-box, .sign-pad, .about-points div, .alert { border-radius: var(--r-m); }
    /* Boutons, champs, barre d'action */
    .btn, .btn-sm, .btn-urgence, .sign-clear, .m-actionbar a, .input, .seg, .urgence-card .tel { border-radius: var(--r-m); }
    .seg label { border-radius: calc(var(--r-m) - 5px); } /* concentrique au conteneur (padding 5px) */
}

/* Menu mobile : boutons arrondis modernes (même rayon que les widgets), entrée en cascade, effet d'appui */
@media (max-width: 960px) {
    .nav, .nav.open { gap: 10px; padding-top: 18px; }
    .nav > a {
        justify-content: center; text-align: center;
        font-size: 18px; font-weight: 600; letter-spacing: -.005em; line-height: 1.2;
        color: var(--green, #101a6b); padding: 17px 20px;
        background: var(--sky, #f3f4fa); border: 1px solid #e6e8f2; border-radius: var(--r-m, 18px);
        box-shadow: 0 1px 2px rgba(16,26,107,.04);
        transition: transform .15s var(--ease), background .2s, color .2s, box-shadow .2s, border-color .2s;
        -webkit-tap-highlight-color: transparent;
    }
    .nav > a::before, .nav > a::after { content: none; display: none; }
    .nav > a:active, .nav > a:focus-visible {
        transform: scale(.97);
        background: linear-gradient(135deg, var(--green, #101a6b), var(--green-2, #1c3165)); color: #fff; border-color: transparent;
        box-shadow: 0 12px 24px -12px rgba(16,26,107,.6);
    }
    .nav.open > a, .nav.open .nav-extra { animation: navBtnIn .45s var(--ease) both; }
    .nav.open .nav-extra { animation-delay: .26s; }
    @keyframes navBtnIn { from { opacity: 0; transform: translateY(14px) scale(.96); } }
    .nav-extra { margin-top: 14px; }
    .nav-extra .btn { font-weight: 700; font-size: 16px; padding: 17px; border-radius: var(--r-m, 18px); }
    .nav-extra .btn:active { transform: scale(.97); }
}

/* Mode application iPhone (icône écran d'accueil) : en-tête et menu sous la barre d'état / l'encoche.
   env(safe-area-inset-top) vaut 0 dans Safari normal → sans effet hors mode application. */
@media (max-width: 960px) {
    .header { padding-top: env(safe-area-inset-top); }
    .nav, .nav.open { top: calc(64px + env(safe-area-inset-top)); }
}