/* ============================================================
   Le Blog de Soo — styles publics
   Palette pastel / bohème · pensé mobile d'abord
   ============================================================ */
:root{
  --cream:#FBF7F0; --cream-2:#F4EDE1; --card:#FFFDF9;
  --ink:#3B3A32; --muted:#807B6E; --line:#E8E0D1;
  --sage:#8B9A6A; --sage-deep:#5E6B45;
  --blush:#E7B2A0; --rose:#DE99A0; --apricot:#EABF8C; --sky:#A9C0C2;
  --shadow:18px 18px 44px rgba(94,107,69,.10);
  --serif:"Palatino Linotype","Palatino","Iowan Old Style","Georgia",serif;
  --sans:"Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --cream:#211E19; --cream-2:#2A2620; --card:#29241E;
    --ink:#EEE7D9; --muted:#A49E8E; --line:#3B342A;
    --sage:#A9B884; --sage-deep:#C6D2A7;
    --blush:#E7B2A0; --rose:#E0A2A7; --apricot:#E7C295; --sky:#AFC7C9;
    --shadow:18px 18px 44px rgba(0,0,0,.30);
  }
}
:root[data-theme="light"]{
  --cream:#FBF7F0; --cream-2:#F4EDE1; --card:#FFFDF9; --ink:#3B3A32; --muted:#807B6E;
  --line:#E8E0D1; --sage:#8B9A6A; --sage-deep:#5E6B45; --blush:#E7B2A0; --rose:#DE99A0;
  --apricot:#EABF8C; --sky:#A9C0C2; --shadow:18px 18px 44px rgba(94,107,69,.10);
}
:root[data-theme="dark"]{
  --cream:#211E19; --cream-2:#2A2620; --card:#29241E; --ink:#EEE7D9; --muted:#A49E8E;
  --line:#3B342A; --sage:#A9B884; --sage-deep:#C6D2A7; --blush:#E7B2A0; --rose:#E0A2A7;
  --apricot:#E7C295; --sky:#AFC7C9; --shadow:18px 18px 44px rgba(0,0,0,.30);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--sans); line-height:1.65; -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(1200px 500px at 85% -8%, color-mix(in srgb, var(--blush) 22%, transparent), transparent 60%),
    radial-gradient(900px 460px at -10% 8%, color-mix(in srgb, var(--sage) 16%, transparent), transparent 60%);
  background-attachment:fixed;
}
a{color:inherit}
img{max-width:100%; height:auto; display:block}
.wrap{max-width:1080px; margin:0 auto; padding:0 22px}
.narrow{max-width:720px; margin:0 auto; padding:0 22px}

body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9; opacity:.045; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
@media (prefers-color-scheme:dark){ body::before{mix-blend-mode:screen; opacity:.05} }

/* ---------- Bulles « champagne » (remontent doucement en fond) ---------- */
.bubbles{position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none}
.bubble{position:absolute; bottom:-24px; border-radius:50%; opacity:0; will-change:transform,opacity;
  background:radial-gradient(circle at 32% 30%,
    color-mix(in srgb,#fff 94%, transparent),
    color-mix(in srgb, var(--sage) 50%, transparent) 66%,
    transparent 100%);
  box-shadow:0 0 12px color-mix(in srgb, var(--sage) 50%, transparent);
  animation:bubbleRise linear infinite}
@keyframes bubbleRise{
  0%   {transform:translateY(0) translateX(0) scale(.65); opacity:0}
  14%  {opacity:var(--o,.4)}
  50%  {transform:translateY(-52vh) translateX(var(--drift,8px)) scale(1)}
  86%  {opacity:var(--o,.4)}
  100% {transform:translateY(-106vh) translateX(0) scale(1.06); opacity:0}
}
@media (prefers-color-scheme:dark){
  .bubble{background:radial-gradient(circle at 32% 30%,
    color-mix(in srgb,#fff 70%, transparent),
    color-mix(in srgb, var(--sage) 40%, transparent) 70%, transparent 100%)}
}
/* Le contenu passe au-dessus des bulles */
main{position:relative; z-index:1}

/* ---------- Header ---------- */
header.site{position:sticky; top:0; z-index:20; backdrop-filter:blur(10px);
  background:color-mix(in srgb, var(--cream) 82%, transparent); border-bottom:1px solid var(--line)}
.bar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px 0}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink)}
.brand .mark{width:34px; height:34px; flex:none}
.brand b{font-family:var(--serif); font-style:italic; font-weight:600; font-size:25px; letter-spacing:.2px; white-space:nowrap}
.brand b span{color:var(--sage-deep)}
nav.top{display:flex; gap:22px; overflow-x:auto; scrollbar-width:none}
nav.top::-webkit-scrollbar{display:none}
nav.top a{white-space:nowrap; text-decoration:none; color:var(--ink); font-size:14.5px; padding:6px 2px; position:relative}
nav.top a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--sage); border-radius:2px; transition:right .28s ease}
nav.top a:hover::after, nav.top a.active::after{right:0}
.theme-btn{border:1px solid var(--line); background:var(--card); color:var(--ink); width:38px; height:38px; border-radius:50%; cursor:pointer; font-size:15px; flex:none}
/* En-tête mobile : logo (1 ligne) au-dessus, menu déroulant en dessous */
@media (max-width:620px){
  .bar{flex-wrap:wrap; row-gap:11px; padding:12px 0}
  .brand b{font-size:22px}
  .theme-btn{margin-left:auto; order:1}
  .brand{order:0}
  nav.top{order:2; width:100%; gap:20px; padding-bottom:2px}
}

.eyebrow{font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--sage-deep); font-weight:700}

/* ---------- Hero ---------- */
.hero{display:grid; grid-template-columns:1fr; gap:26px; padding:44px 0 20px}
@media(min-width:760px){ .hero{grid-template-columns:1.05fr .95fr; align-items:center; padding:60px 0 30px} }
.hero .pic{position:relative; min-height:300px; border-radius:150px 150px 26px 26px; box-shadow:var(--shadow);
  overflow:hidden; border:1px solid var(--line); background:linear-gradient(160deg, color-mix(in srgb,var(--blush) 55%, var(--card)), color-mix(in srgb,var(--sage) 42%, var(--card)))}
@media(min-width:760px){ .hero .pic{min-height:420px} }
.hero .pic img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.badge{position:absolute; left:16px; bottom:16px; z-index:2; background:var(--card); color:var(--sage-deep);
  font-size:12px; font-weight:700; letter-spacing:.05em; padding:7px 13px; border-radius:100px; box-shadow:0 6px 16px rgba(0,0,0,.12)}
h1{font-family:var(--serif); font-weight:600; font-size:clamp(30px,5vw,46px); line-height:1.1; margin:14px 0 12px; text-wrap:balance; letter-spacing:.2px}
.hero p.lede{color:var(--muted); font-size:17px; margin:0 0 20px; max-width:46ch}
.meta{display:flex; align-items:center; flex-wrap:wrap; gap:14px; color:var(--muted); font-size:13.5px}
.dot{width:4px; height:4px; border-radius:50%; background:var(--rose)}
.btn{display:inline-flex; align-items:center; gap:9px; text-decoration:none; background:var(--sage); color:#fff;
  padding:13px 22px; border-radius:100px; font-weight:600; font-size:15px; border:none; cursor:pointer;
  box-shadow:0 10px 22px color-mix(in srgb,var(--sage) 40%, transparent); transition:transform .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:var(--card); color:var(--ink); border:1px solid var(--line); box-shadow:none}
.btn svg{transition:transform .2s ease}
.btn:hover svg{transform:translateX(3px)}

/* ---------- Sections ---------- */
.sec{padding:46px 0 8px}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:22px}
.sec-head h2{font-family:var(--serif); font-weight:600; font-size:clamp(23px,3.4vw,31px); margin:6px 0 0}
.sec-head a{color:var(--sage-deep); text-decoration:none; font-size:14px; font-weight:600; white-space:nowrap}

/* ---------- Univers ---------- */
.univers{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
@media(min-width:720px){ .univers{grid-template-columns:repeat(5,1fr)} }
.u-card{position:relative; text-decoration:none; color:var(--ink); background:var(--card); border:1px solid var(--line);
  border-radius:22px 22px 22px 6px; padding:18px 15px 16px; display:flex; flex-direction:column; gap:10px; min-height:132px;
  transition:transform .22s ease, box-shadow .22s ease}
.u-card:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.u-ico{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-size:20px}
.u-card b{font-family:var(--serif); font-weight:600; font-size:16.5px}
.u-card small{color:var(--muted); font-size:12px; margin-top:-2px}

/* ---------- Cartes articles ---------- */
.posts{display:grid; grid-template-columns:1fr; gap:18px}
@media(min-width:640px){ .posts{grid-template-columns:repeat(2,1fr)} }
@media(min-width:900px){ .posts.three{grid-template-columns:repeat(3,1fr)} }
.card{background:var(--card); border:1px solid var(--line); border-radius:22px; overflow:hidden; text-decoration:none; color:var(--ink);
  display:flex; flex-direction:column; transition:transform .22s ease, box-shadow .22s ease}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.card .top{height:180px; position:relative; overflow:hidden;
  background:linear-gradient(150deg, color-mix(in srgb,var(--sage) 40%,var(--card)), color-mix(in srgb,var(--blush) 44%,var(--card)))}
.card .top img{width:100%; height:100%; object-fit:cover}
.card .top .tag{position:absolute; left:13px; top:13px; z-index:2; background:var(--card); font-size:11.5px; font-weight:700;
  letter-spacing:.03em; color:var(--sage-deep); padding:6px 11px; border-radius:100px}
.card .body{padding:17px 19px 20px; display:flex; flex-direction:column; gap:8px; flex:1}
.card h3{font-family:var(--serif); font-weight:600; font-size:20px; margin:2px 0; line-height:1.25}
.card p{color:var(--muted); font-size:14.5px; margin:0}
.card .foot{margin-top:auto; padding-top:6px}

/* ---------- Chips recette / adresse ---------- */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{font-size:12.5px; color:var(--sage-deep); background:color-mix(in srgb,var(--sage) 15%, var(--card));
  border:1px solid color-mix(in srgb,var(--sage) 26%, transparent); padding:5px 11px; border-radius:100px;
  display:inline-flex; gap:6px; align-items:center}
.addr{display:flex; gap:9px; align-items:center; color:var(--muted); font-size:13.5px}

/* ---------- Bandeau bon plan ---------- */
.ribbon{margin:40px 0 4px; border-radius:26px; padding:26px; position:relative; overflow:hidden; border:1px solid var(--line);
  background:linear-gradient(120deg, color-mix(in srgb,var(--rose) 40%,var(--card)), color-mix(in srgb,var(--apricot) 45%,var(--card)));
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px}
.ribbon .txt b{font-family:var(--serif); font-size:22px; display:block; margin:3px 0}
.ribbon .txt span{color:var(--ink); opacity:.82; font-size:14.5px}
.ribbon .pct{font-family:var(--serif); font-weight:700; font-size:44px; color:var(--sage-deep)}

/* ---------- Newsletter ---------- */
.news{margin:46px 0; text-align:center; background:var(--cream-2); border:1px solid var(--line); border-radius:28px; padding:40px 24px}
.news h2{font-family:var(--serif); font-weight:600; font-size:28px; margin:12px 0 8px}
.news p{color:var(--muted); max-width:40ch; margin:0 auto 22px}
.news form{display:flex; gap:10px; max-width:440px; margin:0 auto; flex-wrap:wrap; justify-content:center}
.news input{flex:1; min-width:200px; border:1px solid var(--line); background:var(--card); color:var(--ink);
  border-radius:100px; padding:13px 20px; font-size:15px; font-family:var(--sans)}
.news input:focus{outline:2px solid var(--sage); outline-offset:1px}
.notice{max-width:440px; margin:12px auto 0; font-size:14px; color:var(--sage-deep)}

/* ---------- Page article ---------- */
.article-head{padding:34px 0 8px; text-align:center}
.article-head .cat{display:inline-flex; gap:7px; align-items:center; text-decoration:none; color:var(--sage-deep);
  font-weight:700; font-size:13px; letter-spacing:.03em}
.article-cover{border-radius:26px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); margin:22px 0 8px; aspect-ratio:3/2}
.article-cover img{width:100%; height:100%; object-fit:cover}
.prose{font-size:17.5px; line-height:1.8}
.prose p{margin:0 0 20px}
.prose h2{font-family:var(--serif); font-size:27px; margin:36px 0 12px}
.prose h3{font-family:var(--serif); font-size:22px; margin:30px 0 10px}
.prose img{border-radius:18px; margin:24px auto; border:1px solid var(--line)}
.prose blockquote{margin:26px 0; padding:6px 22px; border-left:3px solid var(--rose); color:var(--sage-deep); font-family:var(--serif); font-style:italic; font-size:20px}
.prose ul,.prose ol{padding-left:22px; margin:0 0 20px}
.prose li{margin:6px 0}
.prose a{color:var(--sage-deep); text-decoration:underline; text-underline-offset:3px}

/* Encadré recette / adresse en tête d'article */
.spec-box{background:var(--card); border:1px solid var(--line); border-radius:22px; padding:22px 24px; margin:26px 0; box-shadow:var(--shadow)}
.spec-box h3{font-family:var(--serif); margin:0 0 14px; font-size:19px}
.spec-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:14px}
.spec-grid .cell{display:flex; flex-direction:column; gap:2px}
.spec-grid .cell .k{font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted)}
.spec-grid .cell .v{font-family:var(--serif); font-size:18px}
.ingredients{list-style:none; padding:0; margin:14px 0 0; display:grid; gap:8px}
.ingredients li{display:flex; gap:10px; align-items:flex-start; font-size:15.5px}
.ingredients li::before{content:"✿"; color:var(--rose); flex:none; margin-top:2px}
.addr-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}

/* ---------- Titre de rubrique ---------- */
.page-title{padding:44px 0 6px}
.page-title .emoji{font-size:40px}
.page-title h1{margin:8px 0 6px}
.page-title p{color:var(--muted); margin:0; font-size:16px}
.empty{background:var(--card); border:1px dashed var(--line); border-radius:22px; padding:40px; text-align:center; color:var(--muted)}

/* ---------- Recherche ---------- */
.searchbar{display:flex; gap:10px; margin:8px 0 10px; max-width:520px}
.searchbar input{flex:1; border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:100px; padding:12px 20px; font-size:15px; font-family:var(--sans)}
.searchbar input:focus{outline:2px solid var(--sage); outline-offset:1px}

/* ---------- Page À propos ---------- */
.about{display:grid; grid-template-columns:1fr; gap:30px; padding:34px 0 10px}
@media(min-width:760px){ .about{grid-template-columns:.82fr 1.18fr; align-items:center; gap:44px} }
.about .photo{position:relative; aspect-ratio:4/5; border-radius:160px 160px 28px 28px; overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow);
  background:linear-gradient(160deg, color-mix(in srgb,var(--blush) 55%, var(--card)), color-mix(in srgb,var(--sage) 45%, var(--card)))}
.about .photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.about .photo .ph{position:absolute; inset:0; display:grid; place-items:center; color:var(--sage-deep); opacity:.6; font-size:15px; text-align:center; padding:20px}
.about .intro{color:var(--muted); font-size:18px; margin:0 0 6px; max-width:48ch}
.about .sign{font-family:var(--serif); font-style:italic; font-size:25px; color:var(--sage-deep); margin-top:22px}
.about .sign::before{content:"— "}

/* ---------- Encart À propos (accueil) ---------- */
.about-teaser{display:grid; grid-template-columns:1fr; gap:22px; align-items:center; background:var(--cream-2);
  border:1px solid var(--line); border-radius:28px; padding:26px; margin-top:40px}
@media(min-width:640px){ .about-teaser{grid-template-columns:140px 1fr; gap:28px; padding:30px 34px} }
.about-teaser .ph{width:100%; aspect-ratio:1; max-width:140px; border-radius:50%; overflow:hidden; border:1px solid var(--line);
  background:linear-gradient(160deg, color-mix(in srgb,var(--blush) 55%, var(--card)), color-mix(in srgb,var(--sage) 45%, var(--card)))}
.about-teaser .ph img{width:100%; height:100%; object-fit:cover}
.about-teaser h2{font-family:var(--serif); font-weight:600; font-size:26px; margin:0 0 8px}
.about-teaser p{color:var(--muted); margin:0 0 16px; max-width:52ch}

/* ---------- Footer ---------- */
footer.site{border-top:1px solid var(--line); margin-top:20px; padding:34px 0 46px; color:var(--muted); font-size:13.5px; position:relative; z-index:1}
.fbar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px}
.fbar a{color:var(--sage-deep); text-decoration:none}

/* ---------- Bandeau cookies (rigolo) ---------- */
.cookie-note{position:fixed; left:16px; right:16px; bottom:16px; z-index:60; max-width:520px; margin:0 auto;
  background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow);
  padding:15px 18px; display:none}
.cookie-note.show{display:block; animation:cookieIn .45s ease}
.cookie-note p{margin:0 0 12px; font-size:14px; line-height:1.55; color:var(--ink)}
.cookie-note p b{color:var(--sage-deep)}
.cookie-actions{display:flex; gap:10px; flex-wrap:wrap}
.cookie-actions .btn{padding:10px 16px; font-size:14px}
@keyframes cookieIn{from{transform:translateY(18px); opacity:0} to{transform:none; opacity:1}}
@media (prefers-reduced-motion:reduce){ .cookie-note.show{animation:none} }

/* ---------- Motion ---------- */
.rise{opacity:0; transform:translateY(14px); animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
.rise.d1{animation-delay:.08s}.rise.d2{animation-delay:.16s}.rise.d3{animation-delay:.24s}
@keyframes rise{to{opacity:1; transform:none}}
.sway{transform-origin:60% 90%; animation:sway 7s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@media (prefers-reduced-motion:reduce){ .rise{animation:none; opacity:1; transform:none} .sway{animation:none} .bubbles{display:none} html{scroll-behavior:auto} }