/* Socialmail — page campagne « 1 000 bâtisseurs »
   Identité visuelle de marque (claire), en-tête et héros REPRIS de la page de
   production socialmail.fr (mêmes valeurs). Vert de marque + orange du logo en
   accents ; corps clair. CSS par variables uniquement, aucune ressource tierce,
   aucun style inline. Contrastes AA (RGAA 4.1). */

:root {
    /* Palette Socialmail — verts (charte historique) */
    --vert-clair: #95D5B2;
    --vert-principal: #6BCB77;
    --vert-moyen: #4AA96C;
    --vert-fonce: #2D6A4F;
    --vert-tres-fonce: #1B4332;
    --blanc: #FFFFFF;
    --gris-clair: #F8FAF9;
    --gris: #6B7280;
    --texte: #1F2937;

    /* Accent secondaire — ORANGE du logo (logo_socialmail.png), valeurs exactes */
    --orange: #F3AB53;            /* orange de l'enveloppe */
    --orange-pale: #FBE4B4;       /* orange pâle (fonds doux, badge) */
    /* Crème-abricot du CORPS DE L'ENVELOPPE, échantillonné dans
       logo_socialmail.png (#FDECD6, la teinte la plus présente après le
       blanc). C'est l'accent PASTEL des actions principales.
       Contraste avec --vert-tres-fonce : 9,57:1 — AAA. */
    --pastel: #FDECD6;
    --pastel-fonce: #F6DCBE;      /* survol : même teinte, un cran plus dense */
    --pastel-bordure: #E8CBA6;    /* le pastel seul ne se détache pas du blanc (1,16:1) */
    --orange-fonce: #9A5300;      /* orange soutenu — texte/accent lisible AA sur clair */
    --orange-texte-pale: #5A3A00; /* texte foncé sur fond orange pâle */

    /* Dérivés fonctionnels */
    --carte: var(--blanc);
    --texte-doux: #46566A;        /* > 4.5:1 sur blanc et sur --gris-clair */
    --bordure: #DCE7E0;
    --ombre-carte: 0 4px 20px rgba(45, 106, 79, 0.10);
    --focus: #14503C;
    --ambre: #8A5A00;
    --ambre-fond: #FCF3E2;
    --rayon: 16px;
    --largeur: 1080px;
    --pad-section: 4.5rem;
    font-size: 100%;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--texte);
    line-height: 1.65;
    background: var(--blanc);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.2; color: var(--vert-tres-fonce); }

a { color: var(--vert-fonce); }
a:hover { color: var(--vert-tres-fonce); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

img, svg { max-width: 100%; }

.skip-link {
    position: absolute; left: -999px; top: 0;
    background: var(--vert-tres-fonce); color: var(--blanc);
    padding: 0.75rem 1.25rem; z-index: 200; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

.wrap { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 1.25rem; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Bandeau d'appartenance galaxie (tout en haut) */
.bandeau-galaxie { background: var(--vert-tres-fonce); color: #DCEAE1; }
.bandeau-galaxie .wrap { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.bandeau-galaxie p { font-size: 0.9rem; margin: 0; }
.bandeau-galaxie a { color: var(--vert-clair); font-weight: 600; }
.bandeau-galaxie a:hover { color: #B7E4C7; }

/* En-tête — REPRIS de production (dégradé vert de marque, logo PNG visible) */
.site-header {
    background: linear-gradient(135deg, var(--vert-principal) 0%, var(--vert-fonce) 100%);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: sticky; top: 0; z-index: 100;   /* sticky : coexiste avec le bandeau */
}
.header-content { display: flex; justify-content: space-between; align-items: center; padding-top: 0.75rem; padding-bottom: 0.75rem; }
.logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.logo img { height: 45px; width: 45px; }
.logo-text { color: var(--blanc); font-size: 1.5rem; font-weight: 700; }
.header-links { display: flex; gap: 1.5rem; align-items: center; }
.header-links a { color: var(--blanc); text-decoration: none; font-weight: 500; }
.header-links a:hover { text-decoration: underline; }

/* Boutons */
.btn {
    display: inline-block; font: inherit; font-weight: 700; text-decoration: none;
    border: 2px solid transparent; border-radius: 50px; padding: 0.9rem 2rem;
    cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* Action principale : PASTEL du logo, texte vert très foncé (9,57:1, AAA).
   La bordure est nécessaire : sur fond blanc le pastel ne ressort pas seul. */
.btn-primary { background: var(--pastel); color: var(--vert-tres-fonce); border-color: var(--pastel-bordure); }
.btn-primary:hover { color: var(--vert-tres-fonce); background: var(--pastel-fonce); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(45, 106, 79, 0.22); }
/* Sur le héros (dégradé vert) : même pastel, sans bordure — le fond l'isole déjà. */
.hero .btn-primary { background: var(--pastel); color: var(--vert-tres-fonce); border-color: transparent; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); }
.hero .btn-primary:hover { background: var(--pastel-fonce); color: var(--vert-tres-fonce); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25); }
.btn-ghost { background: transparent; color: var(--blanc); border-color: rgba(255,255,255,0.8); }
.btn-ghost:hover { color: var(--blanc); background: rgba(255,255,255,0.14); }

/* Héros — REPRIS de production : dégradé vert clair→vif, carte logo, vague blanche.
   background-color solide foncé -> contraste AA du texte blanc garanti (pa11y). */
.hero {
    position: relative; overflow: hidden; text-align: center; color: var(--blanc);
    background-color: var(--vert-fonce);
    background-image: linear-gradient(135deg, var(--vert-clair) 0%, var(--vert-principal) 50%, var(--vert-fonce) 100%);
    padding: 4.5rem 2rem 6rem;
}
.hero::before {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 100px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100'%3E%3Cpath fill='%23FFFFFF' d='M0,50 C360,100 1080,0 1440,50 L1440,100 L0,100 Z'/%3E%3C/svg%3E");
    background-size: cover;
}
.hero-content { max-width: 800px; margin: 0 auto; position: relative; z-index: 1; }
/* Badge — accent ORANGE (casse le monochrome vert) */
.hero-badge {
    display: inline-flex; align-items: center; gap: 0.5rem;
    /* Adouci dans la teinte du bouton : le badge accompagne l'action,
       il ne rivalise plus avec elle. Le filet reste orange soutenu. */
    background: var(--pastel); color: var(--orange-texte-pale);
    border: 1px solid var(--pastel-bordure);
    padding: 0.5rem 1rem; border-radius: 50px; font-size: 0.9rem; font-weight: 600; margin-bottom: 2rem;
}
.hero-badge .ico { color: var(--orange-fonce); }
.hero-logo { width: 120px; height: 120px; margin-bottom: 2rem; filter: drop-shadow(0 4px 20px rgba(0,0,0,0.2)); }
.hero h1 { color: var(--blanc); font-size: 3rem; font-weight: 700; margin-bottom: 1rem; text-shadow: 0 2px 10px rgba(0,0,0,0.15); }
.hero .tagline { font-size: 1.35rem; opacity: 0.96; margin-bottom: 1.5rem; font-weight: 400; }
.hero .tagline:last-of-type { margin-bottom: 2.25rem; }
.hero-cta { display: flex; gap: 0.85rem; justify-content: center; flex-wrap: wrap; }
.sous-bouton { margin-top: 1rem; font-size: 0.95rem; color: #EAF4EE; }

/* Les deux jauges — SOUS la vague, sur fond clair, en cartes blanches */
.section-jauges { background: var(--blanc); padding: 3.5rem 0; }
.jauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
.jauge { background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 1.6rem; box-shadow: var(--ombre-carte); }
.jauge h2 { color: var(--vert-tres-fonce); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.5px; }
.jauge .valeur { font-size: 2rem; font-weight: 800; margin: 0.4rem 0; color: var(--vert-tres-fonce); }
.jauge .detail { color: var(--texte-doux); font-size: 0.92rem; }
.jauge-barre { height: 10px; background: #E7F0EA; border-radius: 999px; margin: 0.9rem 0 0.5rem; overflow: hidden; }
.jauge-barre span { display: block; height: 100%; width: 0; background: var(--vert-principal); border-radius: 999px; }

/* Sections — fond clair dominant, alternance blanc / gris très clair. Aucun bloc vert. */
section { padding: var(--pad-section) 0; }
.section-intro { max-width: 46ch; }
h2.titre { font-size: 2rem; margin-bottom: 0.75rem; }
.lede { color: var(--texte-doux); font-size: 1.1rem; }
.alt, .sombre, .attente { background: var(--gris-clair); }
.sombre .lede, .attente .lede { color: var(--texte-doux); }

/* Paliers — cartes claires, montant en ORANGE (accent chaleur) */
.paliers { display: grid; gap: 1rem; margin-top: 2rem; }
.palier {
    display: grid; grid-template-columns: minmax(90px, auto) 1fr; gap: 1.25rem; align-items: start;
    background: var(--blanc); border: 1px solid var(--bordure);
    border-radius: var(--rayon); padding: 1.25rem 1.4rem; box-shadow: var(--ombre-carte);
}
.palier .montant { font-size: 1.5rem; font-weight: 800; color: var(--orange-fonce); }

/* Offre / cartes blanches avec filet ORANGE en tête */
.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.carte { background: var(--carte); border: 1px solid var(--bordure); border-top: 3px solid var(--orange); border-radius: var(--rayon); padding: 1.75rem; box-shadow: var(--ombre-carte); }
.carte h3 { font-size: 1.25rem; }
.carte .prix { font-size: 1.6rem; font-weight: 800; color: var(--vert-fonce); margin: 0.3rem 0 0.9rem; }
.liste-check { list-style: none; margin-top: 1rem; display: grid; gap: 0.6rem; }
.liste-check li { display: grid; grid-template-columns: 22px 1fr; gap: 0.6rem; align-items: start; }
.liste-check svg { width: 20px; height: 20px; margin-top: 3px; color: var(--vert-fonce); flex-shrink: 0; }

/* Liste des domaines vendables */
.liste-domaines { list-style: none; margin: 0.75rem 0 1rem; display: grid; gap: 0.5rem; }
.liste-domaines li { padding: 0.6rem 0.8rem; background: #EEF6F1; border: 1px solid var(--bordure); border-radius: 10px; }
.liste-domaines strong { display: block; color: var(--vert-tres-fonce); }
.liste-domaines .dom-libelle { font-size: 0.9rem; color: var(--texte-doux); }

/* Tableau tarifs foyer */
.grille-prix { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.grille-prix caption { text-align: left; color: var(--texte-doux); margin-bottom: 0.5rem; }
.grille-prix th, .grille-prix td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--bordure); }
.grille-prix th { color: var(--vert-tres-fonce); }

/* Encadré note (picto SVG) */
.note {
    display: grid; grid-template-columns: 26px 1fr; gap: 0.9rem;
    background: var(--ambre-fond); border: 1px solid #E7D3A8; border-radius: var(--rayon);
    padding: 1.1rem 1.3rem; margin-top: 1.75rem; color: #4A3200;
}
.note svg { width: 24px; height: 24px; color: var(--ambre); }

/* Confiance (section claire) */
.confiance-liste { list-style: none; display: grid; gap: 1rem; margin-top: 1.5rem; }
.confiance-liste li { display: grid; grid-template-columns: 24px 1fr; gap: 0.8rem; align-items: start; }
.confiance-liste svg { width: 22px; height: 22px; color: var(--vert-fonce); margin-top: 3px; }

/* FAQ */
.faq { display: grid; gap: 0.75rem; margin-top: 2rem; }
.faq details { background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 0 1.25rem; box-shadow: var(--ombre-carte); }
.faq summary {
    cursor: pointer; font-weight: 700; color: var(--vert-tres-fonce);
    padding: 1.1rem 0; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--orange-fonce); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding-bottom: 1.2rem; color: var(--texte-doux); }

/* Liste d'attente */
.notif-form { display: flex; gap: 0.75rem; margin-top: 1.5rem; max-width: 480px; flex-wrap: wrap; }
.notif-form label { display: block; margin-bottom: 0.4rem; font-size: 0.95rem; }
.notif-form .champ { flex: 1 1 240px; }
.notif-form input[type="email"] {
    width: 100%; padding: 0.85rem 1rem; border: 2px solid var(--vert-clair);
    border-radius: 10px; font: inherit; color: var(--texte); background: var(--blanc);
}
.notif-form input[type="email"]:focus-visible { outline-offset: 0; border-color: var(--vert-fonce); }
.notif-form .btn { align-self: end; }
.hp-champ { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.noscript-avert { color: #B42318; margin-top: 1rem; }

/* Pied — vert très foncé */
.site-footer { background: var(--vert-tres-fonce); color: #C7D8CE; padding: 3rem 0 1.5rem; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2rem; }
.site-footer h2 { color: var(--vert-clair); font-size: 1rem; margin-bottom: 0.75rem; }
.site-footer a { color: #DCEAE1; text-decoration: none; display: block; margin-bottom: 0.4rem; }
.site-footer a:hover { text-decoration: underline; }
.footer-legal { border-top: 1px solid rgba(255,255,255,0.14); margin-top: 2rem; padding-top: 1.25rem; font-size: 0.88rem; color: #AEC3B6; }

/* La campagne étape par étape (frise tarifaire = récit) */
.etapes { margin-top: 2rem; }
.etapes h3 { font-size: 1.4rem; color: var(--vert-tres-fonce); }
.etapes > .lede { margin: 0.4rem 0 1.25rem; }
.etapes-liste { list-style: none; display: grid; gap: 0.9rem; counter-reset: etape; }
.etape {
    position: relative; background: var(--blanc); border: 1px solid var(--bordure);
    border-left: 4px solid var(--bordure); border-radius: var(--rayon);
    padding: 1.1rem 1.3rem; padding-left: 1.5rem;
}
.etape-quand { display: inline-block; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.8rem; color: var(--texte-doux); }
.etape-prix { display: block; font-size: 1.35rem; font-weight: 800; color: var(--vert-fonce); margin: 0.15rem 0 0.5rem; }
.etape p { color: var(--texte-doux); }
.etape p strong { color: var(--texte); }
/* Étape en cours : mise en avant chaleur (orange de marque) */
.etape-active { border-left-color: var(--orange); box-shadow: var(--ombre-carte); }
.etape-active .etape-quand { color: var(--orange-fonce); }
.etape-active .etape-prix { color: var(--vert-tres-fonce); }
/* Étages suivants : plus discrets (l'échelle se lit d'un coup d'œil) */
.etape:not(.etape-active) { background: var(--gris-clair); }

/* ---- Tunnel d'achat ---- */
.tunnel { padding: 2.5rem 0 4rem; }
.tunnel-etape { color: var(--texte-doux); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.85rem; margin-bottom: 0.5rem; }
.tunnel .titre { margin-bottom: 0.5rem; }
.tunnel-form { max-width: 640px; margin-top: 1.5rem; }
.tunnel-form fieldset { border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 1.1rem 1.25rem; margin-bottom: 1.5rem; background: var(--blanc); }
.tunnel-form legend { font-weight: 700; color: var(--vert-tres-fonce); padding: 0 0.4rem; }
.tunnel-form .aide { color: var(--texte-doux); font-size: 0.92rem; margin: 0.4rem 0 0.75rem; }
.choix-boites, .choix-domaine { display: grid; gap: 0.5rem; margin-top: 0.5rem; }
.option-boite, .option-case { display: grid; grid-template-columns: 24px 1fr; gap: 0.6rem; align-items: start; padding: 0.5rem 0.2rem; cursor: pointer; }
.option-boite input, .option-case input { margin-top: 0.25rem; width: 18px; height: 18px; accent-color: var(--vert-fonce); }
.champ { margin-bottom: 1.25rem; }
.champ label { display: block; font-weight: 600; margin-bottom: 0.35rem; color: var(--vert-tres-fonce); }
.champ input[type="text"], .champ input[type="email"] {
    width: 100%; padding: 0.75rem 0.9rem; border: 2px solid var(--bordure);
    border-radius: 10px; font: inherit; color: var(--texte); background: var(--blanc);
}
.champ input:focus-visible { outline-offset: 0; border-color: var(--vert-fonce); }
.dispo-msg { font-size: 0.9rem; margin-top: 0.4rem; min-height: 1.2em; }
.dispo-msg.ok { color: #1B6B3A; }
.dispo-msg.ko { color: #B42318; }
.encart-promesse {
    display: grid; grid-template-columns: 1fr; gap: 0.5rem;
    background: #EEF6F1; border: 1px solid var(--bordure); border-left: 4px solid var(--vert-fonce);
    border-radius: 12px; padding: 1rem 1.2rem; margin: 1.5rem 0;
}
.encart-promesse p { color: var(--texte); }
.encart-test { background: var(--ambre-fond); border: 1px solid #E7D3A8; border-radius: 12px; padding: 1rem 1.2rem; margin: 1.25rem 0; color: #4A3200; }
.encart-ok { background: #E7F4EC; border: 1px solid #BEE3CD; border-left: 4px solid var(--vert-fonce); border-radius: 12px; padding: 1rem 1.2rem; margin: 1.25rem 0; }
.tunnel-erreur { background: #FCE9E7; border: 1px solid #F3C6C0; color: #8A1C10; border-radius: 12px; padding: 0.85rem 1.1rem; margin: 1rem 0; }
.tunnel-actions { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-top: 1.5rem; }
.tunnel-lien { color: var(--vert-fonce); text-decoration: none; font-weight: 600; }
.tunnel-lien:hover { text-decoration: underline; }
.recap-boites { background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 1.1rem 1.3rem; margin: 1.25rem 0; }
.recap-boites h2 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.recap-boites ul, .liste-voies { margin: 0.5rem 0 0 1.1rem; }
.liste-voies li { margin-bottom: 0.5rem; }

/* Utilitaires */
.mt-1 { margin-top: 1rem; }
p + p { margin-top: 0.9rem; }

/* Responsive */
@media (max-width: 720px) {
    :root { --pad-section: 3rem; }
    .hero { padding: 3rem 1.5rem 5rem; }
    .hero h1 { font-size: 2rem; }
    .hero .tagline { font-size: 1.1rem; }
    .header-links { display: none; }
    .palier { grid-template-columns: 1fr; gap: 0.4rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .btn { transition: none; }
}

/* ---------------------------------------------------------------------------
   Accélérateur de campagne — encart « code de partage » (carte offre, page de
   confirmation). Accent orange : c'est une bonne nouvelle, pas un avertissement.
   --------------------------------------------------------------------------- */
.encart-partage {
    background: var(--orange-pale);
    border: 1px solid #E9C98A;
    border-left: 4px solid var(--orange-fonce);
    border-radius: 12px;
    padding: 1rem 1.2rem;
    margin: 1.25rem 0 0;
    color: var(--orange-texte-pale);
}
.encart-partage h2,
.encart-partage h4 {
    color: var(--orange-texte-pale);
    font-size: 1.05rem;
    margin-bottom: 0.4rem;
}
.encart-partage p { color: var(--orange-texte-pale); }
.encart-partage p + p { margin-top: 0.6rem; }
.encart-partage a { color: #4A3200; }

.encart-partage .code-valeur {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 1.25em;
    letter-spacing: 0.14em;
    background: var(--blanc);
    border: 1px solid #E9C98A;
    border-radius: 8px;
    padding: 0.1em 0.45em;
    white-space: nowrap;
}

.message-partage {
    background: var(--blanc);
    border: 1px solid #E9C98A;
    border-radius: 8px;
    padding: 0.8rem 1rem;
    margin: 0.6rem 0;
}
.message-partage p { color: var(--texte); font-style: italic; }

/* ---------------------------------------------------------------------------
   Pages légales (mentions-legales.html, cgv.html) — document long, lisible.
   --------------------------------------------------------------------------- */
.legal { padding: 2.5rem 0 4rem; }
.legal .lede { margin-bottom: 2rem; }
.legal section { margin-top: 2rem; max-width: 70ch; }
.legal h2 {
    font-size: 1.25rem;
    color: var(--vert-tres-fonce);
    margin-bottom: 0.6rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--bordure);
}
.legal h3 { font-size: 1.05rem; color: var(--vert-tres-fonce); margin: 1.1rem 0 0.4rem; }
.legal p, .legal li { color: var(--texte-doux); }
.legal p + p { margin-top: 0.7rem; }
.legal ul { margin: 0.6rem 0 0 1.2rem; }
.legal li { margin-bottom: 0.35rem; }
.legal .maj { color: var(--gris); font-size: 0.9rem; margin-top: 2.5rem; }