/* Funnel « LLC express » de Ma Société US. Mise en page reprise de Prime Circle ; couleurs et police de Ma Société US (mesurées sur le logo et le site le 14 oct. 2026) :
   marine #2A306B (le nom), rouge #9C020B (le drapeau, le slogan), bleu #1E73BE (les boutons du site), blanc ; police Poppins (le site). */
:root {
  --marine: #2A306B; --marine-fonce: #1C2150; --marine-nuit: #14183D;
  --rouge: #9C020B; --rouge-vif: #C4161F; --bleu: #1E73BE; --bleu-fonce: #175E9C;
  --blanc: #FFFFFF; --brume: #F2F5FB; --brume2: #E7ECF6; --trait: #DCE2EE;
  --texte: #1B1F3B; --doux: #4B5275; --pale: #6E7594;
  --vert: #16A34A; --todo: #FFF3A3;
  --or: var(--rouge); --or2: var(--rouge-vif);   /* anciens noms gardés : l'accent est le rouge de la marque */
  --titre: "Poppins", "Segoe UI", system-ui, sans-serif;
  --corps: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--blanc); color: var(--texte); font: 400 16.5px/1.65 var(--corps); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { max-width: 100%; display: block; }
.enveloppe { max-width: 1120px; margin: 0 auto; padding-inline: 20px; }
.etroit { max-width: 760px; margin: 0 auto; }
.centre { text-align: center; }
h1, h2 { font-family: var(--titre); font-weight: 700; letter-spacing: -.02em; line-height: 1.12; margin: 0; color: var(--marine); text-wrap: balance; }
h1 { font-size: clamp(34px, 6.4vw, 64px); }
h2 { font-size: clamp(27px, 4.4vw, 42px); }
h3 { font-size: 18px; margin: 0; font-weight: 700; color: var(--marine); }
.or { color: var(--rouge); }
p { margin: 0; }
.sous { color: var(--doux); font-size: 17.5px; max-width: 640px; margin-inline: auto; }
section { padding-block: 72px; }
.bande { background: var(--brume); }
.mark-todo { background: var(--todo); color: #3a3000; border-radius: 4px; padding: 0 5px; font-weight: 600; font-size: .92em; }

/* barre du haut, blanche comme le site */
.barre { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--trait); }
.barre .enveloppe { display: flex; align-items: center; gap: 24px; height: 84px; }
.logo { display: flex; align-items: center; text-decoration: none; }
.logo img { height: 66px; width: auto; }
.menu { display: flex; gap: 24px; margin-left: auto; font-size: 14.5px; color: var(--texte); }
.menu a { text-decoration: none; }
.menu a:hover { color: var(--bleu); }

/* boutons : le bleu des boutons du site */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; cursor: pointer; font: 600 16.5px var(--corps); color: #fff; background: var(--bleu); padding: 16px 30px; border-radius: 999px; box-shadow: 0 10px 26px rgba(30,115,190,.28); text-decoration: none; transition: transform .15s ease, background .15s ease; }
.bouton:hover { background: var(--bleu-fonce); transform: translateY(-1px); }
.bouton.petit { padding: 10px 22px; font-size: 14.5px; box-shadow: none; }
.bouton.wa { background: #25d366; color: #052e16; box-shadow: none; font-size: 15px; padding: 10px 18px; }
.legende { font-size: 13px; color: var(--pale); margin-top: 12px; }
:focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; }

/* haut de page : la marine du logo, avec une bande rouge comme le drapeau */
.hero { padding-top: 64px; padding-bottom: 56px; text-align: center; background: radial-gradient(120% 90% at 50% 0%, var(--marine) 0%, var(--marine-fonce) 60%, var(--marine-nuit) 100%); color: #fff; border-bottom: 5px solid var(--rouge); }
.hero h1 { color: #fff; }
.hero h1 .or { color: #fff; text-decoration: underline; text-decoration-color: var(--rouge-vif); text-decoration-thickness: .09em; text-underline-offset: .12em; }
.surtitre { color: #C9D2EE; font-size: 15px; margin: 14px 0 22px; }
.hero .sous { margin-top: 18px; font-size: 18.5px; color: #DCE3F5; }
.hero .sous b.or { color: #fff; }
.pastilles { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 30px auto 0; padding: 16px 26px; border: 1px solid rgba(255,255,255,.2); border-radius: 14px; background: rgba(255,255,255,.07); font-size: 15px; color: #fff; }
.pastilles span { display: inline-flex; align-items: center; gap: 8px; }
.pastilles span::before { content: "✓"; color: #fff; background: var(--rouge-vif); width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; }
.cartes-doc { position: relative; display: inline-flex; flex-direction: column; align-items: center; margin: 40px auto 0; padding: 28px 30px 24px; border: 1px solid rgba(255,255,255,.22); border-radius: 18px; background: rgba(255,255,255,.08); }
.badge-or { position: absolute; top: -12px; right: -14px; background: var(--rouge-vif); color: #fff; font-weight: 700; font-size: 12px; letter-spacing: .06em; padding: 5px 12px; border-radius: 999px; }
.docs { display: flex; align-items: center; gap: 16px; }
.doc { width: 96px; height: 120px; border-radius: 8px; border: 1px solid var(--trait); background: #fff; padding: 10px; display: flex; flex-direction: column; gap: 5px; position: relative; box-shadow: 0 8px 20px rgba(20,24,61,.18); }
.doc i { height: 5px; border-radius: 3px; background: var(--brume2); }
.doc i:first-child { background: var(--rouge); }
.doc b { margin-top: auto; color: var(--marine); font-size: 13px; text-align: center; }
.doc small { font-size: 10px; color: var(--pale); text-align: center; }
.doc.fini::after { content: "TERMINÉ"; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--vert); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.plus { color: var(--rouge-vif); font-size: 24px; font-weight: 700; }
.hero .plus { color: #fff; }
.cartes-doc strong { margin-top: 18px; font-size: 18px; }
.cartes-doc small { color: #C9D2EE; }
.hero .bouton { margin-top: 34px; background: #fff; color: var(--marine); box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.hero .bouton:hover { background: var(--brume); }
.hero .legende { color: #C9D2EE; }

/* bande de preuve */
.preuve { border-bottom: 1px solid var(--trait); padding: 20px; background: var(--brume); }
.preuve ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; color: var(--doux); font-size: 15px; }
.preuve li b { color: var(--marine); }

/* calculateur */
.calc { max-width: 700px; margin: 0 auto; border: 1px solid var(--trait); border-radius: 20px; background: #fff; padding: 34px 28px; text-align: center; box-shadow: 0 20px 50px rgba(42,48,107,.10); }
.calc-titre { display: inline-block; border: 2px solid var(--marine); color: var(--marine); border-radius: 12px; padding: 10px 22px; font: 700 clamp(17px, 3.2vw, 24px) var(--corps); letter-spacing: .12em; }
.calc .sous { margin-top: 14px; }
.etiquette { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--pale); margin-top: 26px; }
.montant { font-size: clamp(42px, 8.6vw, 62px); font-weight: 800; margin: 4px 0 2px; color: var(--marine); font-variant-numeric: tabular-nums; }
input[type=range] { width: min(380px, 100%); accent-color: var(--rouge); margin-top: 12px; }
.bornes { display: flex; justify-content: space-between; width: min(380px, 100%); margin: 4px auto 0; font-size: 13px; color: var(--pale); }
.resultat { margin: 24px auto 0; max-width: 460px; border: 2px solid var(--marine); border-radius: 14px; background: var(--brume); padding: 20px; }
.resultat .pack { font-size: 28px; font-weight: 800; color: var(--rouge); }
.resultat p { color: var(--doux); font-size: 15px; margin-top: 6px; }
.resultat .prio { display: inline-block; margin-top: 10px; background: #DCFCE7; color: #166534; font-size: 13px; font-weight: 600; padding: 4px 12px; border-radius: 999px; }
.tuiles { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-top: 18px; }
.tuile { border: 1px solid var(--trait); border-radius: 10px; padding: 12px 6px; background: #fff; }
.tuile small { display: block; font-size: 12px; color: var(--pale); }
.tuile b { color: var(--marine); font-size: 16px; }

/* cartes de services */
.grille3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; margin-top: 40px; }
.carte { border: 1px solid var(--trait); border-radius: 16px; background: #fff; padding: 24px; text-align: left; min-width: 0; box-shadow: 0 8px 24px rgba(42,48,107,.06); }
.icone { width: 44px; height: 44px; border-radius: 50%; background: var(--marine); color: #fff; display: grid; place-items: center; font-size: 20px; margin-bottom: 14px; }
.carte p { color: var(--doux); font-size: 15px; margin-top: 10px; }
.carte ul { margin: 14px 0 0; padding-left: 18px; color: var(--doux); font-size: 14px; }
.carte li::marker { color: var(--rouge); }
.encart { max-width: 640px; margin: 40px auto 0; border: 1px solid var(--trait); border-radius: 16px; background: var(--brume); padding: 30px 24px; text-align: center; }
.bande .encart { background: #fff; }
.encart h3 { font-size: 23px; }
.encart p { color: var(--doux); margin: 10px 0 20px; }

/* tableau */
.tableau { margin-top: 40px; border: 1px solid var(--trait); border-radius: 16px; overflow: hidden; background: #fff; }
.tableau table { width: 100%; border-collapse: collapse; font-size: 15px; }
.tableau th, .tableau td { padding: 15px 16px; border-bottom: 1px solid var(--trait); text-align: center; vertical-align: middle; }
.tableau th { background: var(--marine); color: #fff; font-weight: 600; }
.tableau th.nous { background: var(--rouge); }
.tableau th small { display: block; font-weight: 400; color: rgba(255,255,255,.8); font-size: 12px; }
.tableau td:first-child { text-align: left; font-weight: 600; color: var(--marine); }
.tableau tr:nth-child(even) td { background: var(--brume); }
.oui { color: var(--texte); font-weight: 500; } .oui::before { content: "✓ "; color: var(--vert); font-weight: 700; }
.non { color: var(--pale); } .non::before { content: "✕ "; color: var(--rouge-vif); }
.defile { overflow-x: auto; }

/* étapes */
.etapes { position: relative; margin-top: 50px; display: grid; gap: 26px; }
.etapes::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: linear-gradient(var(--rouge), var(--marine)); }
.etape { width: calc(50% - 40px); border: 1px solid var(--trait); border-radius: 14px; background: #fff; padding: 22px; position: relative; box-shadow: 0 8px 24px rgba(42,48,107,.06); }
.etape:nth-child(even) { margin-left: auto; }
.etape::after { content: ""; position: absolute; top: 40px; width: 14px; height: 14px; border-radius: 50%; background: var(--rouge); box-shadow: 0 0 0 4px rgba(156,2,11,.15); }
.etape:nth-child(odd)::after { right: -48px; }
.etape:nth-child(even)::after { left: -47px; }
.etape .num { color: var(--rouge); font-size: 26px; font-weight: 800; }
.etape p { color: var(--doux); font-size: 15px; margin-top: 8px; }
.duree { display: inline-block; margin-top: 12px; font-size: 13px; color: var(--marine); background: var(--brume2); border-radius: 6px; padding: 3px 10px; font-weight: 500; }
.fin { margin-top: 30px; border: 1px solid var(--trait); border-radius: 18px; background: var(--brume); padding: 34px 28px; }
.fin .docs { justify-content: center; margin: 22px 0 28px; }
.fin .colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; text-align: left; }
.fin ul { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 12px; }
.fin li { padding-left: 30px; position: relative; color: var(--doux); font-size: 15px; }
.fin li b { color: var(--marine); display: block; }
.fin li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--vert); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.fin h3 { color: var(--rouge); }
.encadre { margin-top: 16px; border: 1px solid var(--trait); border-radius: 10px; padding: 14px; font-size: 14px; color: var(--doux); background: #fff; }
.encadre b { color: var(--rouge); }

/* pass */
.pass { max-width: 600px; margin: 34px auto 0; border: 3px solid var(--rouge); border-radius: 18px; padding: 26px 20px; text-align: center; background: var(--marine); color: #fff; box-shadow: 0 20px 50px rgba(42,48,107,.25); }
.pass .ligne1 { color: #fff; letter-spacing: .25em; font-size: 13px; font-weight: 700; }
.pass .ligne2 { color: #86EFAC; font-size: 13px; font-weight: 700; margin-top: 10px; }
.pass .ligne3 { color: #C9D2EE; font: 12px ui-monospace, Consolas, monospace; margin-top: 6px; }
.pass strong { display: block; margin-top: 16px; font-size: 20px; }

/* expert */
.expert { display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: start; }
.expert ul { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 18px; }
.expert li b { display: block; color: var(--marine); }
.expert li span { color: var(--doux); font-size: 15px; }
.fiche { border: 1px solid var(--trait); border-radius: 18px; background: #fff; padding: 24px; text-align: center; box-shadow: 0 20px 50px rgba(42,48,107,.10); }
.photo { width: 104px; height: 104px; border-radius: 50%; border: 3px solid var(--marine); margin: 0 auto; object-fit: cover; }
.fiche .nom { font-weight: 700; margin-top: 12px; color: var(--marine); }
.fiche .role { color: var(--rouge); font-size: 14px; }
.prix { margin-top: 18px; border: 2px solid var(--marine); border-radius: 14px; padding: 20px 16px; background: var(--brume); }
.prix .ruban { display: inline-block; background: var(--marine); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .06em; padding: 3px 10px; border-radius: 999px; }
.prix .gros { font-size: 40px; font-weight: 800; color: var(--marine); margin-top: 6px; }
.prix .express { font-size: 13px; color: var(--doux); }
.prix .express em { font-style: normal; background: var(--rouge); color: #fff; font-weight: 700; padding: 2px 7px; border-radius: 4px; margin-right: 6px; }
.prix ul { list-style: none; padding: 10px; margin: 14px 0; background: #fff; border-radius: 8px; font-size: 14px; text-align: left; display: grid; gap: 6px; }
.prix ul li::before { content: "✓ "; color: var(--vert); font-weight: 700; }
.alerte { background: #FDECEC; border: 1px solid #F5B7B9; color: var(--rouge); font-size: 13px; padding: 10px; border-radius: 8px; margin-bottom: 14px; }
.prix .bouton { width: 100%; font-size: 15px; padding: 14px; }
.premium { color: var(--doux); font-size: 13px; margin-top: 12px; }
.reseaux { display: flex; gap: 10px; margin-top: 16px; }
.reseaux a { flex: 1; border: 1px solid var(--trait); border-radius: 8px; padding: 8px; font-size: 13px; color: var(--bleu); text-decoration: none; }

/* chiffres */
.chiffres { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; margin-top: 40px; }
.chiffre { border: 1px solid var(--trait); border-radius: 16px; background: #fff; padding: 28px 18px; text-align: center; }
.chiffre b { display: block; font-size: 40px; color: var(--rouge); font-weight: 800; }
.chiffre span { color: var(--doux); }

/* faq */
.faq { margin-top: 36px; display: grid; gap: 12px; }
.faq details { border: 1px solid var(--trait); border-radius: 14px; background: #fff; padding: 18px 20px; }
.faq summary { cursor: pointer; font-weight: 600; color: var(--marine); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "⌄"; color: var(--rouge); font-size: 20px; line-height: 1; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq details p { color: var(--doux); margin-top: 12px; font-size: 16px; }

/* avis */
.badge-avis { display: inline-block; border: 1px solid #86EFAC; color: #166534; background: #F0FDF4; border-radius: 999px; font-size: 13px; padding: 4px 14px; }
.avis { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: 34px; }
.un-avis { border: 1px solid var(--trait); border-radius: 14px; background: #fff; padding: 20px; display: flex; flex-direction: column; gap: 10px; position: relative; }
.etoiles { color: #00b67a; letter-spacing: 2px; font-size: 18px; }
.un-avis p { color: var(--doux); font-size: 14px; }
.un-avis .qui { margin-top: auto; font-size: 13px; color: var(--pale); }
.exemple { position: absolute; top: 12px; right: 12px; font-size: 10px; font-weight: 700; letter-spacing: .08em; color: #3a3000; background: var(--todo); padding: 2px 7px; border-radius: 4px; }

/* bas de page, marine */
footer { border-top: 5px solid var(--rouge); padding: 48px 0 40px; color: #C9D2EE; font-size: 14px; background: var(--marine-fonce); }
footer .enveloppe { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
footer .logo-pied { display: inline-block; background: #fff; border-radius: 10px; padding: 6px 10px; }
footer .logo-pied img { height: 56px; width: auto; }
footer .bas { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; border-top: 1px solid rgba(255,255,255,.15); padding-top: 18px; font-size: 13px; color: #9FA8C8; }
footer .bas nav { display: flex; gap: 18px; }
footer .fort { color: #fff; font-weight: 600; }

/* fenêtre du formulaire */
.voile { position: fixed; inset: 0; z-index: 50; background: rgba(20, 24, 61, .6); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 16px; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.voile.ouvert { opacity: 1; pointer-events: auto; }
.fenetre { width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; background: #fff; border-top: 5px solid var(--rouge); border-radius: 18px; padding: 26px 24px; position: relative; transform: translateY(10px); transition: transform .2s ease; box-shadow: 0 30px 80px rgba(0,0,0,.3); }
.voile.ouvert .fenetre { transform: none; }
.fenetre.large { width: min(760px, 100%); }
.fermer { position: absolute; top: 12px; right: 14px; background: none; border: 0; color: var(--pale); font-size: 26px; cursor: pointer; line-height: 1; }
.fenetre h2 { font-size: 26px; text-align: center; }
.fenetre .sous { text-align: center; font-size: 15px; margin-top: 6px; color: var(--rouge); }
.champ { margin-top: 16px; }
.champ label, .champ legend { display: block; font-size: 14px; color: var(--doux); margin-bottom: 6px; padding: 0; }
.champ input[type=text], .champ input[type=email], .champ input[type=tel], .champ select { width: 100%; padding: 13px 14px; border-radius: 10px; border: 1px solid #C9D0E2; background: #fff; color: var(--texte); font: inherit; font-size: 16px; }
.champ input:focus, .champ select:focus { border-color: var(--bleu); outline: none; box-shadow: 0 0 0 3px rgba(30,115,190,.18); }
.champ fieldset { border: 0; margin: 0; padding: 0; }
.choix { display: grid; gap: 8px; }
.choix label { display: flex; gap: 10px; align-items: center; margin: 0; padding: 11px 13px; border: 1px solid #C9D0E2; border-radius: 10px; background: #fff; color: var(--texte); cursor: pointer; font-size: 15px; }
.choix label:has(input:checked) { border-color: var(--bleu); background: #EAF3FC; }
.choix label.urgent { border-color: #F5B7B9; }
.choix label.urgent:has(input:checked) { border-color: var(--rouge); background: #FDECEC; }
.choix input { accent-color: var(--bleu); width: 18px; height: 18px; }
.erreur { color: var(--rouge); font-size: 13px; margin-top: 6px; min-height: 1em; }
.envoyer { width: 100%; margin-top: 20px; }
.envoyer[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.rgpd { font-size: 12px; color: var(--pale); margin-top: 12px; text-align: center; }
.calendrier { width: 100%; height: min(680px, 70dvh); border: 0; border-radius: 12px; background: #fff; margin-top: 16px; }
.etat { text-align: center; padding: 20px 0; }
.etat p { color: var(--doux); margin-top: 10px; }

/* bandeau cookies */
.cookies { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40; max-width: 560px; margin: 0 auto; background: #fff; border: 1px solid var(--trait); border-radius: 14px; padding: 16px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: 14px; color: var(--doux); box-shadow: 0 20px 50px rgba(20,24,61,.22); }
.cookies p { flex: 1 1 260px; }
.cookies button { border-radius: 999px; padding: 9px 16px; font: 600 14px var(--corps); cursor: pointer; }
.cookies .oui-c { background: var(--bleu); color: #fff; border: 0; }
.cookies .non-c { background: #fff; color: var(--doux); border: 1px solid var(--trait); }

/* pages merci */
.merci { min-height: 80dvh; display: grid; place-items: center; text-align: center; padding: 60px 20px; background: var(--brume); }
.merci .rond { width: 74px; height: 74px; border-radius: 50%; background: var(--vert); color: #fff; font-size: 38px; display: grid; place-items: center; margin: 0 auto 24px; }
.merci p { color: var(--doux); margin: 16px auto 0; max-width: 520px; }
.merci p b { color: var(--rouge); }

/* téléphone */
@media (max-width: 860px) {
  .menu { display: none; }
  .barre .bouton.petit { margin-left: auto; }
  .barre .enveloppe { height: 72px; }
  .pastilles { flex-direction: column; align-items: flex-start; text-align: left; gap: 10px; }
  .pastilles span { align-items: flex-start; }
  .pastilles span::before { flex: 0 0 20px; margin-top: 2px; }
  .logo img { height: 56px; }
  section { padding-block: 54px; }
  .grille3, .avis, .chiffres { grid-template-columns: minmax(0,1fr); }
  .tuiles { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .expert { grid-template-columns: minmax(0,1fr); }
  .fin .colonnes { grid-template-columns: minmax(0,1fr); }
  .etapes::before { left: 10px; }
  .etape, .etape:nth-child(even) { width: auto; margin-left: 34px; }
  .etape:nth-child(odd)::after, .etape:nth-child(even)::after { left: -31px; right: auto; }
  footer .enveloppe { grid-template-columns: minmax(0,1fr); }
  .tableau th, .tableau td { padding: 12px 10px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }