/* ActivityWeb — styles communs (accueil, indépendants, familles) */
:root {
  --navy:#0f1f38; --navy-mid:#1a3254; --orange:#e8682a; --orange-lt:#f5844d;
  --green:#2f7d5b; --green-lt:#e6f2ec;
  --cream:#f9f5f0; --white:#ffffff; --text:#1a1a2e; --muted:#5f6d8a;
  --border:rgba(0,0,0,0.09); --radius:14px;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'DM Sans',sans-serif; background:var(--cream); color:var(--text); line-height:1.6; overflow-x:hidden; }
a { color:inherit; }
h1, h2, h3 { font-family:'DM Serif Display',serif; font-weight:400; line-height:1.15; color:var(--navy); }
h1 em, h2 em { font-style:italic; color:var(--orange); }

/* NAV */
nav { position:sticky; top:0; z-index:100; height:64px; background:var(--navy); display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 5%; box-shadow:0 2px 20px rgba(0,0,0,0.2); }
.nav-logo { display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; }
.logo-mark { width:36px; height:36px; background:var(--orange); border-radius:6px; display:flex; align-items:center; justify-content:center; font-family:'DM Serif Display',serif; font-size:.85rem; color:#fff; }
.logo-text { font-family:'DM Serif Display',serif; font-size:1.2rem; color:#fff; }
.logo-text span { color:var(--orange); }
.nav-links { display:flex; align-items:center; gap:24px; list-style:none; }
.nav-links a { color:rgba(255,255,255,.7); text-decoration:none; font-size:.9rem; font-weight:500; transition:color .2s; }
.nav-links a:hover, .nav-links a.active { color:#fff; }
@media (max-width:720px) {
  .logo-text { display:none; }
  .nav-links { gap:14px; }
  .nav-links a { font-size:.82rem; }
  .nav-links .hide-sm { display:none; }
}

/* LAYOUT */
.wrap { max-width:1080px; margin:0 auto; padding:0 20px; }
section { padding:72px 0; }
.tag { display:inline-block; font-size:.75rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--orange); margin-bottom:10px; }
.lead { font-size:1.08rem; color:var(--muted); max-width:640px; }
h2 { font-size:clamp(1.7rem,4vw,2.4rem); margin-bottom:12px; }

/* HERO */
.hero { padding:72px 0 56px; background:var(--navy); color:#fff; }
.hero h1 { color:#fff; font-size:clamp(2rem,5.5vw,3.3rem); max-width:760px; margin-bottom:18px; }
.hero p { color:rgba(255,255,255,.75); font-size:1.1rem; max-width:620px; }
.hero .crumb { font-size:.85rem; color:rgba(255,255,255,.55); margin-bottom:14px; }
.hero .crumb a { color:rgba(255,255,255,.75); }

/* DOORS */
.doors { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:-36px; }
.door { display:block; text-decoration:none; background:var(--white); border-radius:var(--radius); padding:30px 28px; border:1px solid var(--border); box-shadow:0 10px 30px rgba(15,31,56,.08); transition:transform .2s, box-shadow .2s; border-top:5px solid var(--orange); }
.door.fam { border-top-color:var(--green); }
.door:hover { transform:translateY(-4px); box-shadow:0 16px 40px rgba(15,31,56,.14); }
.door h2 { font-size:1.6rem; margin:6px 0 10px; }
.door ul { list-style:none; margin:14px 0 20px; }
.door li { padding:5px 0 5px 26px; position:relative; color:var(--text); }
.door li::before { content:'✓'; position:absolute; left:0; color:var(--orange); font-weight:700; }
.door.fam li::before { color:var(--green); }
.door .go { font-weight:600; color:var(--orange); }
.door.fam .go { color:var(--green); }
@media (max-width:760px) { .doors { grid-template-columns:1fr; } }

/* PROBLEM BLOCKS */
.problem { padding:44px 0; border-bottom:1px solid var(--border); }
.problem:last-child { border-bottom:0; }
.problem-head { display:flex; gap:14px; align-items:baseline; flex-wrap:wrap; margin-bottom:6px; }
.problem-head .emoji { font-size:1.6rem; }
.problem h2 { margin:0; }
.problem > p { color:var(--muted); margin-bottom:22px; max-width:660px; }

/* CARDS */
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; }
.card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:24px; display:flex; flex-direction:column; }
.card.star { border:2px solid var(--orange); }
.fam-page .card.star { border-color:var(--green); }
.card .badge { align-self:flex-start; font-size:.72rem; font-weight:600; padding:3px 10px; border-radius:20px; background:#fdeee5; color:#b44b17; margin-bottom:12px; }
.card .badge.soon { background:#eef0f5; color:var(--muted); }
.card .badge.green { background:var(--green-lt); color:var(--green); }
.card h3 { font-size:1.35rem; margin-bottom:8px; }
.card p { color:var(--muted); font-size:.95rem; flex:1; margin-bottom:16px; }
.card .price { font-family:'DM Serif Display',serif; font-size:1.5rem; color:var(--navy); margin-bottom:14px; }
.card .price small { font-family:'DM Sans',sans-serif; font-size:.8rem; color:var(--muted); }
.btn { display:inline-block; text-align:center; text-decoration:none; font-weight:600; font-size:.95rem; padding:12px 20px; border-radius:8px; background:var(--orange); color:#fff; transition:background .2s; }
.btn:hover { background:var(--orange-lt); }
.btn.green { background:var(--green); }
.btn.green:hover { background:#3a9670; }
.btn.ghost { background:transparent; color:var(--navy); border:1.5px solid var(--border); }
.btn.ghost:hover { border-color:var(--navy); background:transparent; }

/* ABOUT / CONTACT */
.about { background:var(--white); }
.about-box { display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:center; max-width:760px; }
.about-mark { width:72px; height:72px; border-radius:50%; background:var(--orange); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'DM Serif Display',serif; font-size:1.8rem; }
@media (max-width:560px) { .about-box { grid-template-columns:1fr; } }
.contact-links { display:flex; gap:14px; flex-wrap:wrap; margin-top:22px; }
.contact-link { display:flex; gap:12px; align-items:center; text-decoration:none; background:var(--white); border:1px solid var(--border); border-radius:10px; padding:14px 18px; }
.contact-link span { display:block; font-size:.82rem; color:var(--muted); }
.note { margin-top:26px; font-size:.92rem; color:var(--muted); }
.note a { color:var(--orange); font-weight:600; }

/* FOOTER */
footer { background:var(--navy); color:rgba(255,255,255,.6); text-align:center; padding:36px 20px; font-size:.85rem; }
footer a { color:rgba(255,255,255,.6); text-decoration:none; }
footer a:hover { color:var(--orange); }
footer .row { display:flex; justify-content:center; gap:18px; flex-wrap:wrap; margin-top:12px; }

/* FORM */
.cform { max-width:560px; margin-top:22px; display:grid; gap:12px; }
.cform input, .cform textarea { width:100%; font:inherit; padding:12px 14px; border:1px solid var(--border); border-radius:8px; background:var(--white); }
.cform textarea { min-height:96px; resize:vertical; }
.cform button { border:0; cursor:pointer; font:inherit; }
.ok { display:none; background:var(--green-lt); color:var(--green); border-radius:8px; padding:12px 16px; }