:root {
  --blue: #0b2948;
  --blue-dark: #061a2d;
  --cyan: #12b8ad;
  --green: #159b72;
  --orange: #ff6b57;
  --yellow: #facc15;
  --ink: #0b2948;
  --muted: #60727f;
  --bg: #f6fafa;
  --line: #d8e6e7;
  --card: #ffffff;
  --shadow: 0 18px 45px rgba(22, 44, 78, .11);
}
* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body { min-height: 100vh; margin: 0; display: flex; flex-direction: column; font-family: Arial, Helvetica, sans-serif; color: var(--ink); background: radial-gradient(circle at 12% 8%, rgba(18,184,173,.14), transparent 28%), radial-gradient(circle at 86% 18%, rgba(11,41,72,.13), transparent 30%), linear-gradient(180deg, #fff 0%, var(--bg) 42%, #e8f7f6 100%); }
a { color: inherit; }
main { flex: 1 0 auto; width: 100%; }
p { color: var(--muted); line-height: 1.58; margin: 0; }
.site-header { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.91); border-bottom: 1px solid rgba(220,229,239,.86); backdrop-filter: blur(16px); }
.nav { max-width: 1180px; margin: auto; min-height: 68px; display: flex; align-items: center; gap: 24px; padding: 10px 20px; }
.nav img { width: 164px; height: auto; display: block; }
.nav-links { margin-left: auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.nav-links a { text-decoration: none; color: #26384f; font-weight: 700; font-size: 14px; }
.nav-links a:not(.btn):hover { color: var(--blue); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 17px; border-radius: 9px; background: linear-gradient(135deg, var(--blue), var(--cyan)); color: white !important; text-decoration: none; font-weight: 800; border: 1px solid rgba(11,41,72,.28); box-shadow: 0 12px 24px rgba(11,41,72,.18); transition: transform .18s ease, box-shadow .18s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 16px 30px rgba(37,99,235,.22); }
.btn.secondary { background: white; color: var(--blue) !important; box-shadow: none; }
.hero { position: relative; overflow: hidden; min-height: 610px; display: grid; align-items: center; }
.hero:before, .hero:after { content: ""; position: absolute; border-radius: 999px; pointer-events: none; animation: floatSoft 9s ease-in-out infinite; }
.hero:before { width: 520px; height: 520px; right: -160px; top: 60px; background: rgba(16,191,208,.16); }
.hero:after { width: 320px; height: 320px; left: -120px; bottom: 10px; background: rgba(245,158,11,.12); animation-delay: -3s; }
.hero-inner, .section { max-width: 1180px; margin: auto; padding: 44px 20px; position: relative; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 410px; gap: 42px; align-items: center; }
.eyebrow { color: var(--blue); font-weight: 900; text-transform: uppercase; font-size: 12px; letter-spacing: .08em; }
h1 { font-size: clamp(34px, 5vw, 54px); line-height: 1.04; margin: 12px 0 16px; letter-spacing: 0; }
h2 { font-size: clamp(25px, 3vw, 36px); line-height: 1.12; margin: 0 0 12px; }
h3 { letter-spacing: 0; }
.hero p { font-size: 17px; max-width: 620px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.trust-strip { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.trust-strip span { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border: 1px solid rgba(37,99,235,.16); border-radius: 999px; background: rgba(255,255,255,.72); color: #35506d; font-size: 13px; font-weight: 700; }
.phone-card { background: rgba(255,255,255,.72); border: 1px solid rgba(220,229,239,.88); border-radius: 28px; padding: 18px; box-shadow: var(--shadow); backdrop-filter: blur(14px); animation: riseIn .7s ease both; }
.loyalty-card { min-height: 246px; border-radius: 24px; padding: 22px; color: white; background: radial-gradient(circle at 86% 18%, rgba(255,255,255,.24), transparent 20%), linear-gradient(135deg, #2563eb 0%, #10bfd0 52%, #10b981 100%); position: relative; overflow: hidden; }
.loyalty-card:before { content: ""; position: absolute; inset: -88px -42px auto auto; width: 245px; height: 245px; border-radius: 50%; background: rgba(255,255,255,.15); }
.loyalty-card:after { content: ""; position: absolute; left: -55px; bottom: 34px; width: 360px; height: 82px; border: 14px solid rgba(255,255,255,.12); border-radius: 999px; transform: rotate(-10deg); }
.card-top { display: flex; align-items: center; gap: 12px; position: relative; }
.card-top img { width: 58px; height: 58px; border-radius: 16px; background: white; }
.card-title { margin-top: 68px; font-size: 21px; font-weight: 900; position: relative; }
.blocks { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; margin-top: 22px; position: relative; }
.blocks span { height: 8px; border-radius: 99px; background: rgba(255,255,255,.36); }
.blocks span.active { background: white; }
.section.compact { padding-top: 28px; padding-bottom: 28px; }
.section-head { max-width: 740px; margin-bottom: 24px; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.card { background: rgba(255,255,255,.92); border: 1px solid rgba(220,229,239,.9); border-radius: 14px; padding: 21px; box-shadow: 0 14px 34px rgba(22,44,78,.07); transition: transform .18s ease, border-color .18s ease; }
.card:hover { transform: translateY(-2px); border-color: rgba(37,99,235,.35); }
.card h3 { margin: 0 0 8px; font-size: 19px; }
.card-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; margin-bottom: 12px; background: linear-gradient(135deg, rgba(11,41,72,.13), rgba(18,184,173,.16)); color: var(--blue); font-weight: 900; }
.price { font-size: 32px; color: var(--ink); font-weight: 900; margin: 10px 0; }
.price small { font-size: 14px; color: var(--muted); font-weight: 700; }
ul.clean { padding: 0; list-style: none; display: grid; gap: 9px; color: #334155; }
ul.clean li:before { content: "✓"; color: var(--green); font-weight: 900; margin-right: 8px; }
.band { background: linear-gradient(135deg, rgba(16,32,51,.98), rgba(20,60,152,.94)); color: white; }
.band p, .band h2 { color: white; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
form.card label { display: grid; gap: 7px; margin-bottom: 14px; font-weight: 800; }
input, textarea { border: 1px solid var(--line); border-radius: 8px; padding: 12px; width: 100%; }
textarea { min-height: 132px; resize: vertical; }
.recaptcha-box { border: 1px dashed #a7b6ca; padding: 14px; border-radius: 8px; color: var(--muted); margin-bottom: 14px; background: #f8fafc; }
.footer { flex-shrink: 0; border-top: 1px solid rgba(220,229,239,.9); background: radial-gradient(circle at 10% 0%, rgba(37,99,235,.11), transparent 30%), linear-gradient(180deg, #ffffff, #eef6fb); }
.footer-inner { max-width: 1180px; margin: auto; padding: 36px 20px 22px; }
.footer-grid { display: grid; grid-template-columns: 1.3fr .8fr .8fr .9fr; gap: 26px; }
.footer-logo { width: 170px; display: block; margin-bottom: 12px; }
.footer h3 { margin: 0 0 12px; font-size: 15px; }
.footer p, .footer li, .footer a { color: var(--muted); font-size: 14px; line-height: 1.6; text-decoration: none; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.footer-bottom { border-top: 1px solid var(--line); margin-top: 26px; padding-top: 16px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 13px; }
.legal { max-width: 900px; margin: auto; padding: 42px 20px; }
.legal h1 { font-size: clamp(30px, 4vw, 42px); }
.legal section { background: white; border: 1px solid var(--line); border-radius: 12px; padding: 20px; margin: 14px 0; }
@keyframes floatSoft { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-14px,0); } }
@keyframes riseIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { animation: none !important; transition: none !important; } }
@media (max-width: 900px) { .nav { align-items: flex-start; } .nav-links { justify-content: flex-end; gap: 10px; } .hero-grid, .cards, .split, .footer-grid { grid-template-columns: 1fr; } .hero { min-height: auto; } .hero-inner, .section { padding: 36px 16px; } }

/* Premium inner pages ----------------------------------------------------- */
body:has(.price), body:has(#contactForm), body:has(.legal) {
  background:
    radial-gradient(circle at 88% 7%, rgba(18,184,173,.14), transparent 27%),
    radial-gradient(circle at 6% 32%, rgba(255,107,87,.07), transparent 22%),
    linear-gradient(180deg, #f9fcfb 0, #eef8f6 46%, #fff 100%);
}
body:has(.price) main.section, body:has(#contactForm) main.section {
  max-width: 1180px; padding-top: 92px; padding-bottom: 120px;
}
body:has(.price) .section-head, body:has(#contactForm) main.section > div:first-child {
  position: relative; max-width: 730px; margin-bottom: 46px;
}
body:has(.price) .section-head:before, body:has(#contactForm) main.section > div:first-child:before,
body:has(.legal) .legal:before {
  content: "MAFID"; display: block; width: max-content; margin-bottom: 18px;
  padding: 7px 11px; border-radius: 99px; background: rgba(18,184,173,.11);
  color: #078f87; font-size: 9px; font-weight: 900; letter-spacing: .18em;
}
body:has(.price) h1, body:has(#contactForm) h1, body:has(.legal) h1 {
  max-width: 820px; font-size: clamp(42px, 5.5vw, 68px); line-height: .98;
  letter-spacing: -.052em; color: #071e35; margin: 14px 0 22px;
}
body:has(.price) .section-head p, body:has(#contactForm) main.section > div:first-child p {
  max-width: 630px; font-size: 16px;
}
body:has(.price) .cards { gap: 20px; align-items: stretch; }
body:has(.price) .card {
  min-height: 520px; display: flex; flex-direction: column; position: relative; overflow: hidden;
  padding: 33px; border-radius: 25px; border: 1px solid rgba(11,41,72,.1);
  box-shadow: 0 24px 65px rgba(7,30,53,.1); transition: transform .25s, box-shadow .25s;
}
body:has(.price) .card:hover { transform: translateY(-8px); box-shadow: 0 35px 80px rgba(7,30,53,.16); }
body:has(.price) .card:nth-child(2) {
  color: white; border-color: #071e35;
  background: radial-gradient(circle at 90% 0, rgba(18,184,173,.55), transparent 35%), #071e35;
  transform: translateY(-14px);
}
body:has(.price) .card:nth-child(2):before {
  content: "LE PLUS CHOISI"; position: absolute; right: -38px; top: 25px; width: 155px;
  padding: 7px 0; background: #ff6b57; color: white; text-align: center;
  transform: rotate(42deg); font-size: 7px; font-weight: 900; letter-spacing: .1em;
}
body:has(.price) .card:nth-child(2) p, body:has(.price) .card:nth-child(2) li,
body:has(.price) .card:nth-child(2) .price small { color: #a9bdca; }
body:has(.price) .card:nth-child(2) h3, body:has(.price) .card:nth-child(2) .price { color: white; }
body:has(.price) .card:nth-child(2) .card-icon { color: white; background: rgba(18,184,173,.22); }
body:has(.price) .card h3 { font-size: 26px; margin-top: 8px; }
body:has(.price) .card-icon {
  font-size: 0; margin-left: auto; margin-right: auto;
  flex: 0 0 40px; align-self: center; position: relative;
}
body:has(.price) .card-icon:before {
  content: ""; position: absolute; inset: 0;
  background-position: 50% 50%; background-repeat: no-repeat; background-size: 20px 20px;
}
body:has(.price) .card:nth-child(1) .card-icon:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b2948' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z'/%3E%3Cpath d='m12 15-3-3a22 22 0 0 1 2-3.95A12.7 12.7 0 0 1 22 2c0 2.72-.78 7.5-6.05 11a22.4 22.4 0 0 1-3.95 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5'/%3E%3Ccircle cx='16' cy='8' r='1'/%3E%3C/svg%3E");
}
body:has(.price) .card:nth-child(2) .card-icon:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 4 3 12h14l3-12-6 7-4-7-4 7-6-7z'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E");
}
body:has(.price) .card:nth-child(3) .card-icon:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b2948' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .34 1.88l.06.06-2.83 2.83-.06-.06a1.7 1.7 0 0 0-1.88-.34 1.7 1.7 0 0 0-1.03 1.55V21h-4v-.08A1.7 1.7 0 0 0 8.95 19.4a1.7 1.7 0 0 0-1.88.34l-.06.06-2.83-2.83.06-.06A1.7 1.7 0 0 0 4.58 15 1.7 1.7 0 0 0 3 14H3v-4h.08A1.7 1.7 0 0 0 4.6 8.95a1.7 1.7 0 0 0-.34-1.88l-.06-.06 2.83-2.83.06.06A1.7 1.7 0 0 0 9 4.58 1.7 1.7 0 0 0 10 3h4a1.7 1.7 0 0 0 1.05 1.58 1.7 1.7 0 0 0 1.88-.34l.06-.06 2.83 2.83-.06.06A1.7 1.7 0 0 0 19.42 9 1.7 1.7 0 0 0 21 10v4a1.7 1.7 0 0 0-1.6 1z'/%3E%3C/svg%3E");
}
body:has(.price) .price { font-size: 36px; line-height: 1.15; margin: 20px 0 25px; }
body:has(.price) ul.clean { margin-bottom: 30px; }
body:has(.price) ul.clean li { padding-bottom: 10px; border-bottom: 1px solid rgba(11,41,72,.08); font-size: 13px; }
body:has(.price) .card:nth-child(2) ul.clean li { border-color: rgba(255,255,255,.09); }
body:has(.price) .card .btn { width: 100%; margin-top: auto; min-height: 51px; }

body:has(#contactForm) main.section { grid-template-columns: .82fr 1.18fr; gap: 85px; align-items: center; }
body:has(#contactForm) main.section > div:first-child:after {
  content: "support@mafid.yt\A Réponse humaine et personnalisée\A Hébergement sécurisé en Suisse";
  white-space: pre-line; display: block; margin-top: 35px; padding: 25px 0 25px 58px;
  border-top: 1px solid rgba(11,41,72,.11); color: #365267; font-size: 12px; font-weight: 750;
  line-height: 2.25; background: radial-gradient(circle at 18px 49px, #12b8ad 0 5px, transparent 6px);
}
body:has(#contactForm) form.card {
  position: relative; padding: 38px; border-radius: 27px; border: 1px solid rgba(11,41,72,.09);
  background: rgba(255,255,255,.93); box-shadow: 0 30px 80px rgba(7,30,53,.13); backdrop-filter: blur(16px);
}
body:has(#contactForm) form.card:before {
  content: "ÉCRIVEZ-NOUS"; display: block; margin-bottom: 27px; color: #071e35;
  font-size: 20px; font-weight: 900; letter-spacing: -.02em;
}
body:has(#contactForm) form.card label { color: #183c58; font-size: 11px; letter-spacing: .025em; }
body:has(#contactForm) input, body:has(#contactForm) textarea {
  padding: 14px 15px; border-radius: 11px; background: #f8fbfa; transition: border .2s, box-shadow .2s;
}
body:has(#contactForm) input:focus, body:has(#contactForm) textarea:focus {
  outline: 0; border-color: #12b8ad; box-shadow: 0 0 0 4px rgba(18,184,173,.1);
}
body:has(#contactForm) form.card .btn { width: 100%; min-height: 52px; border: 0; cursor: pointer; }
body:has(#contactForm) output { display: block; margin-top: 15px; color: #60727f; font-size: 12px; line-height: 1.5; }

body:has(.legal) .legal { max-width: 990px; padding-top: 88px; padding-bottom: 120px; position: relative; }
body:has(.legal) .legal > section {
  position: relative; margin: 18px 0; padding: 30px 34px 30px 82px;
  border: 1px solid rgba(11,41,72,.08); border-radius: 20px; background: rgba(255,255,255,.92);
  box-shadow: 0 16px 45px rgba(7,30,53,.06); transition: transform .2s, border-color .2s;
}
body:has(.legal) .legal > section:hover { transform: translateX(5px); border-color: rgba(18,184,173,.35); }
body:has(.legal) .legal > section:before {
  content: counter(legal-section, decimal-leading-zero); position: absolute; left: 28px; top: 31px;
  color: #12b8ad; font-size: 12px; font-weight: 900;
}
body:has(.legal) .legal { counter-reset: legal-section; }
body:has(.legal) .legal > section { counter-increment: legal-section; }
body:has(.legal) .legal h2 { margin: 0 0 10px; color: #071e35; font-size: 18px; }
body:has(.legal) .legal p { font-size: 14px; }

@media (max-width: 900px) {
  body:has(.price) main.section, body:has(#contactForm) main.section, body:has(.legal) .legal { padding-top: 60px; padding-bottom: 80px; }
  body:has(.price) .card:nth-child(2) { transform: none; }
  body:has(#contactForm) main.section { grid-template-columns: 1fr; gap: 25px; }
}
@media (max-width: 600px) {
  body:has(.price) h1, body:has(#contactForm) h1, body:has(.legal) h1 { font-size: 40px; }
  body:has(.price) .card { min-height: auto; padding: 27px; }
  body:has(#contactForm) form.card { padding: 26px 20px; }
  body:has(.legal) .legal > section { padding: 25px 22px 25px 59px; }
  body:has(.legal) .legal > section:before { left: 20px; top: 26px; }
}