/* Mon Plein Copilot — feuille de style du site vitrine.
   Les teintes viennent du thème de l'application (monplein-copilot-mobile,
   lib/core/theme/app_colors.dart) : violet #8B5CF6 en clair, #6D28D9 en
   soutenu, le vert #22C55E de l'éclair pour les accents de réussite.
   L'application est sombre par défaut ; le site l'est aussi. */

:root {
  --violet:#8b5cf6; --violet-deep:#6d28d9; --violet-ink:#35155f;
  /* Violet de TEXTE sur fond sombre : #8b5cf6 n'y tient que 4,32:1 sur --surface (QA2 W2,
     WEB-MONPLEIN-DEMO-CONTRASTE-0511-001) ; #a78bfa = 6,72:1. --violet reste l'aplat et les bordures. */
  --violet-text:#a78bfa;
  /* Départ du dégradé des boutons pleins (texte blanc) : --violet seul n'y tient que 4,23:1, et 3,7:1 au
     survol (brightness 1,08) — QA2 W2 du 06/11, MP-SITE-BOUTON-CONTRASTE-0611-001. Mélange de jetons :
     5,68:1 au repos, 5,02:1 au survol ; --violet-deep (fin du dégradé) tient 7,1:1. */
  --violet-cta:color-mix(in srgb, var(--violet) 45%, var(--violet-deep));
  --green:#22c55e;
  --bg:#0b0b12; --surface:#141324; --surface-soft:#1c1a31;
  --ink:#f4f3fb; --muted:#a8a5c2; --line:#2a2740;
  --radius:14px;
  color-scheme:dark;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--bg); color:var(--ink); line-height:1.6;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  /* Deux halos violets très larges : la profondeur de l'écran de carte de
     l'application, sans image à télécharger. */
  background-image:
    radial-gradient(1100px 560px at 18% -8%, rgba(139,92,246,.30), transparent 62%),
    radial-gradient(900px 520px at 92% 8%, rgba(109,40,217,.26), transparent 60%);
  background-repeat:no-repeat;
}
.wrap { width:min(1080px, calc(100% - 44px)); margin:0 auto; }
h1,h2,h3,p { margin-top:0; }
a { color:inherit; }

/* En-tête */
.site-header { padding:22px 0; }
.nav-row { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.brand { display:inline-flex; align-items:center; gap:11px; text-decoration:none; }
.brand img { display:block; }
.brand-copy { display:flex; flex-direction:column; line-height:1.05; }
.brand-copy strong { font-size:19px; font-weight:800; letter-spacing:-.01em; }
.brand-copy small { color:var(--muted); font-size:11px; letter-spacing:.20em; text-transform:uppercase; }
.pill {
  display:inline-flex; align-items:center; gap:8px; padding:7px 15px; border-radius:999px;
  border:1px solid rgba(139,92,246,.45); background:rgba(139,92,246,.14);
  color:#d9cdff; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}

/* Héros */
.hero { padding:56px 0 24px; max-width:760px; }
.hero h1 { font-size:clamp(2.3rem, 6vw, 3.9rem); line-height:1.05; letter-spacing:-.025em; margin-bottom:20px; }
.hero h1 em { font-style:normal; color:var(--violet-text); }
.hero .lede { color:var(--muted); font-size:clamp(1rem, 2.4vw, 1.22rem); max-width:660px; margin-bottom:14px; }
.hero .summary {
  max-width:680px; margin:0 0 30px; padding:16px 18px; border-radius:var(--radius);
  border:1px solid var(--line); border-left:3px solid var(--green); background:var(--surface);
  font-size:1.02rem;
}
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }

/* Boutons */
.btn {
  min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:0 22px; border:1px solid transparent; border-radius:999px;
  font-size:15px; font-weight:700; text-decoration:none; cursor:pointer;
}
.btn-primary { background:linear-gradient(120deg, var(--violet-cta), var(--violet-deep)); color:#fff; }
.btn-primary:hover { filter:brightness(1.08); }
.btn-ghost { border-color:var(--line); background:var(--surface); color:var(--ink); }
.btn-ghost:hover { border-color:var(--violet); }

/* Sections */
.section { padding:56px 0; }
.section-head { max-width:720px; margin-bottom:28px; }
.kicker { color:var(--violet-text); font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; margin-bottom:12px; }
.section h2 { font-size:clamp(1.6rem, 3.6vw, 2.2rem); line-height:1.15; letter-spacing:-.02em; margin-bottom:12px; }
.section-head p { color:var(--muted); margin-bottom:0; }

/* Souci → réponse : la structure demandée en relecture éditoriale. */
.pairs { display:grid; grid-template-columns:repeat(auto-fit, minmax(290px, 1fr)); gap:16px; }
.pair { border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:22px; }
.pair h3 { font-size:1.05rem; margin-bottom:8px; }
.pair p { color:var(--muted); font-size:.95rem; margin-bottom:0; }

/* Formulaire de demande de démonstration */
.demo { border:1px solid var(--line); border-radius:20px; background:var(--surface); padding:clamp(24px, 4vw, 40px); }
.demo-grid { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:36px; align-items:start; }
.demo h2 { margin-bottom:12px; }
.demo .lede { color:var(--muted); margin-bottom:18px; }
.demo-contact { display:inline-flex; align-items:center; gap:9px; color:#d9cdff; font-size:.93rem; text-decoration:none; }
.demo-contact:hover { text-decoration:underline; }
form.demo-form { display:grid; gap:14px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
label { display:grid; gap:6px; font-size:13px; font-weight:650; }
input, textarea, select {
  font:inherit; width:100%; padding:12px 14px; border-radius:11px;
  border:1px solid var(--line); background:#0f0e1c; color:var(--ink);
}
input:focus, textarea:focus, select:focus { outline:2px solid var(--violet); outline-offset:1px; border-color:transparent; }
textarea { min-height:104px; resize:vertical; }
.hint { color:var(--muted); font-size:12px; font-weight:400; }
.honeypot { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Pied de page */
.site-footer { border-top:1px solid var(--line); padding:34px 0 46px; margin-top:28px; }
.footer-top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; }
.footer-top p { color:var(--muted); font-size:.92rem; margin:0; }
.footer-top a { color:#d9cdff; }
.footer-bottom { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px;
                 margin-top:22px; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
.footer-bottom nav { display:flex; flex-wrap:wrap; gap:16px; }
.footer-bottom a { color:var(--muted); text-decoration:none; border-bottom:1px solid var(--line); }
.footer-bottom a:hover { color:var(--ink); border-bottom-color:var(--violet); }

/* Corps des pages légales rendues depuis `legal/` par le générateur. */
.legal-body { max-width:46rem; }
.legal-body h2 { font-size:1.45rem; margin:2.2rem 0 .6rem; line-height:1.25; }
.legal-body h3 { font-size:1.12rem; margin:1.6rem 0 .5rem; }
.legal-body h4 { font-size:1rem; margin:1.2rem 0 .4rem; }
.legal-body p, .legal-body li { color:var(--muted); }
.legal-body a { color:#cbb8ff; }
.legal-body hr { border:0; border-top:1px solid var(--line); margin:2rem 0; }
.legal-body table { width:100%; border-collapse:collapse; margin:1rem 0; display:block; overflow-x:auto; }
.legal-body th, .legal-body td { text-align:left; padding:.55rem .7rem; border-bottom:1px solid var(--line); font-size:.95rem; }
.legal-body th { color:var(--ink); font-weight:600; }
.legal-body code { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.9em; }
.draft-banner { background:#241d0e; color:#dcab4f; border:1px solid currentColor; border-radius:8px;
                padding:.9rem 1rem; margin-bottom:1.5rem; font-size:.95rem; }
.placeholder { background:#241d0e; color:#dcab4f; border:1px solid currentColor; border-radius:4px;
               padding:.05rem .35rem; font-size:.85em; white-space:nowrap; }

@media (max-width:820px) {
  .demo-grid { grid-template-columns:1fr; gap:26px; }
}
@media (max-width:560px) {
  .wrap { width:min(1080px, calc(100% - 32px)); }
  .form-row { grid-template-columns:1fr; }
  .hero { padding-top:36px; }
  .footer-bottom { flex-direction:column; align-items:flex-start; }
}

/* Mobile — les liens du pied de page tombaient sous 32 px de haut : atteignables
   à la souris, pénibles au doigt. Mesuré à 375 px. */
@media (max-width: 620px) {
  .footer-bottom a, .demo-contact { min-height: 34px; display: inline-flex; align-items: center; }
}

/* La marque est l'icône RÉELLE de l'application (monplein-copilot-mobile,
   assets/icons/app_icon.png), pas un redessin : aucun logo vectoriel n'existe
   pour Mon Plein dans les fichiers du marketing. À remplacer le jour où la
   charte en livre un. Le rayon reprend celui d'une icône iOS. */
.brand img { border-radius: 22%; }