/* accueil.css — page d'accueil W-FEC (marketing/landing), sépare de ui.css (composants
   d'écran/formulaire réutilisés partout). Mêmes variables de couleur que ui.css. */

.ux-large { max-width: 1000px; }

/* ---- Navigation sticky (page d'accueil uniquement, voir $navMarketing) ---- */
/* Bandeau navy pleine largeur (charte GestiPME, --navy) ; le contenu reste centré à 1000px
   via .ux-nav-inner, séparé du fond pour que la couleur ne soit jamais coupée sur grand écran. */
.ux-nav { position: sticky; top: 0; z-index: 100; background: var(--navy); }
.ux-nav-inner { height: 60px; display: flex; align-items: center; justify-content: space-between;
    padding: 0 20px; max-width: 1000px; margin: 0 auto; }
.ux-nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none;
    color: #fff; font-weight: 800; font-size: 16px; }
.ux-nav-liens { display: flex; align-items: center; gap: 22px; }
.ux-nav-liens a { color: #C4D2E8; text-decoration: none; font-size: 14px; font-weight: 600; }
.ux-nav-liens a:hover { color: #fff; }
/* Spécificité volontairement > .ux-nav-liens a (0,1,1) pour que le bouton reste blanc
   — bug corrigé : ce lien vivait dans .ux-nav-liens et héritait du gris, illisible sur fond bleu. */
.ux-nav-liens a.ux-nav-cta { padding: 10px 18px; min-height: auto; width: auto; font-size: 14px; color: #fff; }
.ux-nav-toggle-cb { display: none; }
.ux-nav-burger { display: none; cursor: pointer; color: #fff; }
@media (max-width: 720px) {
    .ux-nav-burger { display: flex; }
    .ux-nav-liens { position: fixed; top: 60px; left: 0; right: 0; background: var(--navy);
        border-bottom: 1px solid rgba(255,255,255,.12); flex-direction: column; align-items: stretch;
        gap: 0; padding: 8px 0; box-shadow: 0 8px 16px rgba(0,0,0,.2);
        max-height: 0; overflow: hidden; transition: max-height .2s ease; }
    .ux-nav-liens a { padding: 12px 20px; }
    .ux-nav-liens a.ux-nav-cta { margin: 8px 20px 4px; text-align: center; }
    .ux-nav-toggle-cb:checked ~ .ux-nav-liens { max-height: 320px; }
}

/* ---- Bandeau tarif sous le CTA du hero ---- */
.hero-prix { display: inline-block; margin-top: 14px; font-size: 12.5px; font-weight: 700;
    color: var(--primary-dk); background: var(--primary-bg); border: 1px solid #BFDBFE;
    border-radius: 999px; padding: 7px 16px; }

/* ---- Cartes de confiance (remplacent les stats nues) ---- */
.confiance-cartes { display: flex; justify-content: center; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.confiance-carte { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-carte);
    padding: 14px 18px; text-align: center; min-width: 130px; box-shadow: var(--shadow-carte); }
.confiance-carte .ic { color: var(--primary); margin-bottom: 6px; display: flex; justify-content: center; }
.confiance-carte .n { font-size: 20px; font-weight: 800; color: var(--primary-dk); }
.confiance-carte .l { font-size: 11.5px; color: var(--text-sub); margin-top: 2px; }

/* ---- Comment ça marche : 3 étapes ---- */
.etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 800px; margin: 0 auto; }
@media (max-width: 640px) { .etapes { grid-template-columns: 1fr; } }
.etape { position: relative; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-carte); padding: 22px 18px 18px; text-align: center;
    box-shadow: var(--shadow-carte); }
.etape-num { position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: #fff;
    font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.etape-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--primary-bg);
    color: var(--primary); display: flex; align-items: center; justify-content: center;
    margin: 8px auto 12px; }
.etape h3 { font-size: 14.5px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.etape p { font-size: 13px; color: var(--text-sub); line-height: 1.5; }

.carte-mini .ic-svg { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center;
    justify-content: center; margin-bottom: 10px; }
.carte-mini .ic-svg svg { width: 18px; height: 18px; }

/* ---- Personas : icônes réelles ---- */
.persona .ic svg { width: 20px; height: 20px; }

/* ---- Dropzone (dépôt de fichier) ---- */
.dropzone { position: relative; border: 2px dashed var(--border); border-radius: 12px;
    padding: 30px 16px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.dropzone:hover, .dropzone.dragover { border-color: var(--primary); background: var(--primary-bg); }
.dropzone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.dropzone-ic { color: var(--primary); margin: 0 auto 10px; display: flex; justify-content: center; }
.dropzone-texte { font-size: 14px; color: var(--text); margin-bottom: 4px; }
.dropzone-texte strong { color: var(--primary); }
.dropzone-sous { font-size: 12px; color: var(--text-sub); }
.dropzone.a-un-fichier { border-style: solid; border-color: var(--success); background: #F0FDF4; }
.dropzone.a-un-fichier .dropzone-ic { color: var(--success); }

/* ---- Section Tarif ---- */
.tarif-carte { max-width: 380px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-carte); padding: 30px 26px; text-align: center; box-shadow: var(--shadow-carte); }
.tarif-montant { font-size: 38px; font-weight: 800; color: var(--primary); line-height: 1; }
.tarif-montant span { font-size: 17px; font-weight: 700; }
.tarif-label { font-size: 13px; color: var(--text-sub); margin: 4px 0 18px; }
.tarif-liste { list-style: none; text-align: left; display: flex; flex-direction: column; gap: 10px;
    font-size: 13.5px; color: var(--text); margin-bottom: 18px; }
.tarif-liste li { display: flex; gap: 8px; align-items: flex-start; }
.tarif-liste svg { color: var(--success); flex-shrink: 0; margin-top: 2px; }

/* ---- FAQ (accordéon natif <details>) ---- */
.faq { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.faq-item { border: 1px solid var(--border); border-radius: var(--radius-carte); background: var(--surface);
    box-shadow: var(--shadow-carte); }
.faq-item summary { list-style: none; cursor: pointer; padding: 16px 18px; display: flex;
    justify-content: space-between; align-items: center; gap: 14px; font-weight: 700;
    font-size: 14.5px; color: var(--text); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] summary { color: var(--primary); }
.faq-chev { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; stroke-width: 2; fill: none;
    stroke-linecap: round; stroke-linejoin: round; color: var(--text-sub); transition: transform .2s, color .2s; }
.faq-item[open] .faq-chev { transform: rotate(180deg); color: var(--primary); }
.faq-reponse { padding: 0 18px 16px; font-size: 13.5px; color: var(--text-sub); line-height: 1.6; }

/* ---- Footer enrichi (navy, même bandeau que .ux-nav) ---- */
.pied-final { text-align: center; padding: 30px 16px 36px; background: var(--navy); }
.pied-liens { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; }
.pied-liens a { color: #C4D2E8; text-decoration: none; font-size: 13px; font-weight: 600; }
.pied-liens a:hover { color: #fff; }
.pied-final p { font-size: 12.5px; color: #9CB1D6; margin-bottom: 4px; }
.pied-final strong { color: #fff; }

.hero { text-align: center; padding: 40px 16px 32px; }
.hero-icone { width: 64px; height: 64px; border-radius: 16px; background: var(--primary);
    color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;
    font-size: 28px; font-weight: 800; }
.hero h1 { font-size: 30px; font-weight: 800; color: var(--text); line-height: 1.15; margin-bottom: 12px; }
.hero h1 span { color: var(--primary); }
.hero p { font-size: 15.5px; color: var(--text-sub); max-width: 520px; margin: 0 auto 22px; }
.hero-cta { display: inline-flex; }
/* Garanties mises en exergue (pas du texte nu) — même langage visuel que .hero-prix,
   teinte verte pour signaler « confiance/sécurité » plutôt que « prix ». */
.hero-badges { margin-top: 14px; display: flex; align-items: center; justify-content: center;
    gap: 10px; flex-wrap: wrap; }
.badge-confiance { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
    font-weight: 700; color: #fff; background: var(--navy);
    border-radius: 999px; padding: 7px 14px; }
.badge-confiance svg { color: #34D399; flex-shrink: 0; }

.stats-row { display: flex; justify-content: center; gap: 32px; margin-top: 28px; flex-wrap: wrap; }
.stat { text-align: center; }
.stat .n { font-size: 24px; font-weight: 800; color: var(--primary); }
.stat .l { font-size: 12.5px; color: var(--text-sub); margin-top: 2px; }

.section { padding: 32px 16px; }
.section h2 { font-size: 22px; font-weight: 800; color: var(--text); text-align: center; margin-bottom: 8px; }
.section .sous-titre { font-size: 14px; color: var(--text-sub); text-align: center; max-width: 560px;
    margin: 0 auto 24px; }

.diff-carte { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-carte);
    padding: 18px; margin: 24px auto; max-width: 640px; box-shadow: var(--shadow-carte); }
.diff-carte .tag { display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;
    letter-spacing:.05em;color:var(--primary);background:var(--primary-bg);padding:3px 10px;border-radius:999px;margin-bottom:8px; }
.diff-carte p { font-size: 14px; color: var(--text); line-height: 1.5; }

.grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 800px; margin: 0 auto; }
@media (max-width: 560px) { .grille { grid-template-columns: 1fr; } }
.carte-mini { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-carte); padding: 16px;
    box-shadow: var(--shadow-carte); transition: box-shadow .15s, transform .15s; }
.carte-mini:hover { box-shadow: 0 4px 12px rgba(16,30,60,.1); transform: translateY(-1px); }
.carte-mini .ic { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center;
    justify-content: center; margin-bottom: 10px; font-size: 16px; }
.carte-mini h3 { font-size: 14.5px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.carte-mini p { font-size: 13px; color: var(--text-sub); line-height: 1.45; }

.personas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; max-width: 640px; margin: 0 auto; }
.persona { flex: 1; min-width: 220px; text-align: center; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-carte); padding: 20px 16px; box-shadow: var(--shadow-carte); }
.persona .ic { width: 44px; height: 44px; border-radius: 50%; background: var(--primary-bg); color: var(--primary);
    display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; font-size: 18px; font-weight: 700; }
.persona h3 { font-size: 14.5px; font-weight: 700; margin-bottom: 4px; }
.persona p { font-size: 13px; color: var(--text-sub); }

.securite { background: #0F1F3D; color: #E2E8F0; padding: 36px 16px; text-align: center; }
.securite h2 { color: #fff; font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.securite .sous-titre { color: #94A3B8; font-size: 13.5px; margin-bottom: 24px; }
.securite-grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 640px; margin: 0 auto; text-align: left; }
@media (max-width: 480px) { .securite-grille { grid-template-columns: 1fr; } }
.securite-item { display: flex; gap: 10px; align-items: flex-start; }
.securite-item .ic { color: #34D399; font-size: 16px; flex-shrink: 0; }
.securite-item strong { display: block; font-size: 13.5px; color: #fff; }
.securite-item span { font-size: 12.5px; color: #94A3B8; }

.pied { text-align: center; padding: 28px 16px; font-size: 12.5px; color: var(--text-sub); }
.pied strong { color: var(--text); }