/* Charte Nichee : Poppins (titres), Inter ou police système (textes), violet #7C3AED, corail #FF8A65 */
@font-face { font-family: 'Poppins'; font-weight: 600; font-display: swap; src: url(polices/poppins-600.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 700; font-display: swap; src: url(polices/poppins-700.woff2) format('woff2'); }
:root {
  --primary: #7C3AED;
  --primary-fonce: #6D28D9;
  --sur-primary: #FFFFFF;
  --secondary: #FCE7F3;
  --accent: #FF8A65;
  --corail: #FA6E55;
  --encre-marque: #22012F;
  --surligne: #BE123C;
  --fond: #FFFFFF;
  --texte: #0F172A;
  --doux: #475569;
  --muted: #F3F4F6;
  --ligne: #E5E7EB;
  --carte: #FFFFFF;
  --succes: #16A34A;
  --erreur: #DC2626;
  --ombre-sm: 0 1px 2px rgba(0, 0, 0, .06);
  --ombre-md: 0 4px 12px rgba(0, 0, 0, .08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #0B0F1A; --texte: #F8FAFC; --doux: #CBD5E1; --muted: #1F2937; --ligne: #334155;
    --carte: #111827; --encre-marque: #F8FAFC; --secondary: #3B1E36; --surligne: #FDA4AF;
    --primary: #8B5CF6; --primary-fonce: #7C3AED;
  }
}
:root[data-theme="dark"] {
  --fond: #0B0F1A; --texte: #F8FAFC; --doux: #CBD5E1; --muted: #1F2937; --ligne: #334155;
  --carte: #111827; --encre-marque: #F8FAFC; --secondary: #3B1E36; --surligne: #FDA4AF;
  --primary: #8B5CF6; --primary-fonce: #7C3AED;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font: 16px/1.6 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
h1, h2, h3, .logo, .principal { font-family: "Poppins", "Inter", system-ui, sans-serif; }
a { color: var(--primary); }
.page { max-width: 1040px; margin: 0 auto; padding: 0 16px 48px; }
.page.etroit { max-width: 720px; }
.haut { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; gap: 12px; }
.logo { font-weight: 700; font-size: 1.6rem; letter-spacing: -.02em; color: var(--encre-marque); text-decoration: none; display: flex; align-items: center; gap: 10px; }
.logo img { width: 40px; height: 40px; border-radius: 10px; }
.petit { font-size: .875rem; }
.doux { color: var(--doux); }
.cache { position: absolute; left: -9999px; }

h1 { font-size: clamp(2rem, 5vw, 2.75rem); font-weight: 700; line-height: 1.15; margin: 16px 0; color: var(--encre-marque); letter-spacing: -.01em; }
h1 .marque { display: inline-block; background: var(--secondary); color: var(--surligne); padding: 0 12px; border-radius: 12px; }
h2 { font-size: 1.5rem; font-weight: 700; margin: 56px 0 20px; color: var(--encre-marque); }
h3 { margin: 8px 0 6px; font-size: 1.25rem; font-weight: 600; }
.accroche { font-size: 1.125rem; color: var(--doux); max-width: 34em; }

.hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; padding-top: 16px; }
@media (max-width: 820px) { .hero { grid-template-columns: 1fr; } }

.liste { display: flex; gap: 8px; flex-wrap: wrap; margin: 24px 0 8px; }
.liste input { flex: 1 1 220px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--ligne); background: var(--carte); color: var(--texte); font: inherit; }
.liste input:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.principal { background: var(--primary); color: var(--sur-primary); border: 0; border-radius: 12px; padding: 14px 20px; font-size: 1rem; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-block; box-shadow: var(--ombre-sm); }
.principal:hover { background: var(--primary-fonce); }
.message { background: var(--muted); border-left: 4px solid var(--succes); padding: 12px 14px; border-radius: 12px; margin: 8px 0; }
.message.erreur { border-left-color: var(--erreur); }
.bandeau { background: var(--secondary); border-radius: 12px; padding: 10px 14px; }

.apercu { display: flex; justify-content: center; }
.telephone { width: 100%; max-width: 330px; background: var(--carte); border: 1px solid var(--ligne); border-radius: 28px; padding: 22px 16px; box-shadow: var(--ombre-md); }
.titre-liste { font-family: "Poppins", sans-serif; font-weight: 600; margin: 0 0 12px; }
.article { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--ligne); }
.article div { flex: 1; min-width: 0; }
.article b { display: block; font-size: .95rem; font-weight: 600; }
.article small { color: var(--doux); }
.vignette { width: 44px; height: 44px; border-radius: 12px; flex: none; }
.v1 { background: #EDE9FE; } .v2 { background: var(--secondary); } .v3 { background: #FFE4D6; } .v4 { background: var(--muted); }
.etat { font-size: .78rem; padding: 3px 8px; border-radius: 99px; border: 1px solid var(--ligne); color: var(--doux); white-space: nowrap; }
.etat.reserve { background: #EDE9FE; color: #5B21B6; border-color: transparent; }
.etat.offert { background: #DCFCE7; color: #166534; border-color: transparent; }

.grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 820px) { .grille { grid-template-columns: 1fr; } }
.carte { background: var(--carte); border: 1px solid var(--ligne); border-radius: 16px; padding: 20px; box-shadow: var(--ombre-sm); }
.num { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; font-family: "Poppins", sans-serif; font-weight: 700; }

.promesses { padding: 0; list-style: none; display: grid; gap: 10px; }
.promesses li { background: var(--carte); border: 1px solid var(--ligne); border-radius: 12px; padding: 14px 16px; }
.transparence { max-width: 46em; }

.fin { text-align: center; margin-top: 24px; }
.fin h2 { margin-bottom: 8px; }
.bouton { margin-top: 8px; }
.pied { margin-top: 56px; border-top: 1px solid var(--ligne); padding-top: 16px; }