/* ═══════════════════════════════════════════════════════════════════
   Charte partagée des pages intérieures de soufflinou.app (fonctionnalités,
   mascottes, blog). Reprend le design system de la landing (web/index.html) :
   rose « aurora », Bricolage Grotesque + Inter, cartes verre dépoli.
   La landing garde ses styles inline ; ce fichier ne sert QUE les pages
   intérieures pour ne pas dupliquer 600 lignes par page.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --blush:#FFF5F7;
  --rose-50:#FFEEF2; --rose-100:#FFE0E8; --rose-200:#FCC9D6;
  --pink:#F2A3B1; --rose:#EC5E7B; --rose-deep:#D8456A; --coral:#FF85A1;
  --plum:#2B1A20;
  --soft:rgba(43,26,32,.64); --mute:rgba(43,26,32,.44);
  --border:rgba(216,69,106,.16);
  --card:rgba(255,255,255,.72);
  --grad-cta:linear-gradient(135deg,#FF8FAC,#EC5E7B 58%,#D8456A);
  --grad-text:linear-gradient(115deg,#FF8FAC,#EC5E7B 45%,#C0407E 80%,#FF8FAC);
  --shadow-soft:0 18px 44px rgba(216,69,106,.12);
  --shadow-glow:0 14px 34px rgba(236,94,123,.40);
  --radius:26px; --maxw:1120px; --maxw-prose:760px;
  --head:"Bricolage Grotesque", -apple-system, BlinkMacSystemFont, sans-serif;
  --body:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; color:var(--plum); font-family:var(--body); line-height:1.65; font-size:17px;
  -webkit-font-smoothing:antialiased; background:var(--blush); overflow-x:hidden;
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 22px; }
h1,h2,h3 { font-family:var(--head); letter-spacing:-.025em; line-height:1.12; margin:0; }
.script { font-family:"Caveat",var(--head); font-weight:700; letter-spacing:0; }
.grad {
  background:var(--grad-text); background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ── Fond aurora ── */
.bg { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.blob { position:absolute; border-radius:50%; filter:blur(70px); opacity:.85; }
.blob.b1 { width:46vw; height:46vw; background:#FFC2D4; top:-12vw; right:-8vw; }
.blob.b2 { width:40vw; height:40vw; background:#FFD9C2; top:8vw; left:-12vw; }
.blob.b3 { width:36vw; height:36vw; background:#FFC9E4; bottom:-14vw; right:14vw; }

/* ── Header ── */
header { position:sticky; top:0; z-index:50; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:rgba(255,245,247,.78); border-bottom:1px solid var(--border); }
.nav { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0; }
.brand { display:flex; align-items:center; gap:10px; font-family:var(--head); font-weight:800; font-size:20px; }
.brand img { width:30px; height:30px; }
.nav-links { display:flex; align-items:center; gap:20px; font-size:15px; font-weight:600; color:var(--soft); }
.nav-links a:hover { color:var(--rose-deep); }
@media (max-width:640px) { .nav-links { display:none; } }

/* ── Boutons ── */
.btn { display:inline-flex; align-items:center; gap:10px; padding:14px 24px; border-radius:999px;
  background:var(--grad-cta); color:#fff; font-weight:700; font-size:16px; box-shadow:var(--shadow-glow);
  transition:transform .18s ease, box-shadow .18s ease; }
.btn:hover { transform:translateY(-2px); }
.btn svg { width:18px; height:18px; }
.btn.sm { padding:9px 18px; font-size:14.5px; }
.btn.ghost { background:transparent; color:var(--rose-deep); box-shadow:none; border:1.5px solid var(--border); }

/* ── Page intérieure ── */
.page { padding:44px 0 70px; }
.crumbs { font-size:13.5px; color:var(--mute); margin-bottom:20px; font-weight:500; }
.crumbs a:hover { color:var(--rose-deep); }
.page-head { max-width:var(--maxw-prose); margin:0 auto 34px; text-align:center; }
.page-head .pill { display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px;
  background:rgba(255,255,255,.7); border:1px solid var(--border); font-size:13px; font-weight:600; color:var(--rose-deep); margin-bottom:16px; }
.page-head h1 { font-size:clamp(32px, 5.4vw, 52px); }
.page-head .lead { color:var(--soft); font-size:18.5px; margin:16px auto 0; max-width:620px; }

/* ── Prose (articles & pages) ── */
.prose { max-width:var(--maxw-prose); margin:0 auto; }
.prose h2 { font-size:clamp(24px, 3.4vw, 32px); margin:44px 0 14px; }
.prose h3 { font-size:20px; margin:30px 0 10px; }
.prose p { margin:0 0 16px; color:rgba(43,26,32,.86); }
.prose ul, .prose ol { margin:0 0 18px; padding-left:24px; color:rgba(43,26,32,.86); }
.prose li { margin-bottom:8px; }
.prose strong { color:var(--plum); }
.prose a { color:var(--rose-deep); font-weight:600; text-decoration:underline; text-decoration-color:rgba(216,69,106,.35); text-underline-offset:3px; }
.prose blockquote { margin:22px 0; padding:16px 20px; border-left:4px solid var(--rose); background:rgba(255,255,255,.6);
  border-radius:0 16px 16px 0; color:var(--soft); font-style:italic; }
.prose .note { font-size:14px; color:var(--mute); background:rgba(255,255,255,.55); border:1px solid var(--border);
  border-radius:16px; padding:14px 18px; margin:26px 0; }
.prose table { width:100%; border-collapse:collapse; margin:18px 0 24px; font-size:15.5px; background:rgba(255,255,255,.6); border-radius:16px; overflow:hidden; }
.prose th, .prose td { text-align:left; padding:11px 14px; border-bottom:1px solid var(--border); }
.prose th { font-family:var(--head); font-size:14px; color:var(--rose-deep); }

/* ── Cartes ── */
.cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:20px; margin:34px 0; }
.card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:26px; box-shadow:var(--shadow-soft); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:transform .18s ease; display:block; }
a.card:hover { transform:translateY(-4px); }
.card .emoji { font-size:30px; line-height:1; margin-bottom:12px; display:block; }
.card h3 { font-size:19px; margin:0 0 8px; }
.card p { font-size:15px; color:var(--soft); margin:0; }
.card .more { display:inline-block; margin-top:12px; font-size:14px; font-weight:700; color:var(--rose-deep); }

/* ── Grille mascottes ── */
.skins-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:18px; margin:30px 0; }
.skin-tile { background:var(--card); border:1px solid var(--border); border-radius:22px; padding:18px 12px 14px;
  text-align:center; box-shadow:var(--shadow-soft); }
.skin-tile img { width:96px; height:96px; margin:0 auto 10px; }
.skin-tile .name { font-family:var(--head); font-weight:700; font-size:15.5px; }
.skin-tile .how { font-size:12.5px; color:var(--mute); margin-top:3px; line-height:1.35; }
.skin-tile .tag { display:inline-block; margin-top:7px; font-size:10.5px; font-weight:800; letter-spacing:.4px;
  text-transform:uppercase; padding:3px 9px; border-radius:999px; background:var(--rose-50); color:var(--rose-deep); }

/* ── Bandeau CTA ── */
.cta-band { margin:56px auto 0; max-width:var(--maxw-prose); text-align:center; background:var(--grad-cta);
  border-radius:var(--radius); padding:40px 28px; color:#fff; box-shadow:var(--shadow-glow); }
.cta-band h2 { font-size:clamp(24px, 3.6vw, 32px); color:#fff; margin-bottom:8px; }
.cta-band p { margin:0 0 20px; opacity:.94; }
.cta-band .btn { background:#fff; color:var(--rose-deep); box-shadow:0 10px 26px rgba(0,0,0,.16); }

/* ── Blog ── */
.post-meta { font-size:14px; color:var(--mute); margin:14px 0 0; font-weight:500; }
.post-list { display:grid; gap:20px; margin:34px 0; }
.post-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:26px 28px; box-shadow:var(--shadow-soft); display:block; transition:transform .18s ease; }
.post-card:hover { transform:translateY(-3px); }
.post-card h3 { font-size:21px; margin-bottom:8px; }
.post-card p { color:var(--soft); font-size:15.5px; margin:0; }
.post-card .post-meta { margin-top:10px; }

/* ── Calculateur ── */
.calc { background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:30px 28px; box-shadow:var(--shadow-soft); margin:30px 0; }
.calc label { display:block; font-weight:700; font-family:var(--head); font-size:15px; margin:16px 0 6px; }
.calc input[type=range] { width:100%; accent-color:var(--rose); }
.calc .val { font-weight:800; color:var(--rose-deep); }
.calc-out { text-align:center; margin-top:26px; padding-top:22px; border-top:1px solid var(--border); }
.calc-out .big { font-family:var(--head); font-weight:800; font-size:clamp(34px, 6vw, 52px);
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.calc-out .sub { color:var(--soft); font-size:15.5px; margin-top:4px; }
.calc-rows { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:14px; margin-top:20px; }
.calc-rows .cell { background:rgba(255,255,255,.65); border:1px solid var(--border); border-radius:18px; padding:14px; text-align:center; }
.calc-rows .cell b { display:block; font-family:var(--head); font-size:20px; color:var(--rose-deep); }
.calc-rows .cell span { font-size:12.5px; color:var(--mute); }

/* ── Footer ── */
footer { border-top:1px solid var(--border); margin-top:70px; background:rgba(255,255,255,.5); }
.foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
  padding:26px 0; font-size:14px; color:var(--mute); }
.foot nav { display:flex; flex-wrap:wrap; gap:18px; }
.foot a:hover { color:var(--rose-deep); }