/* Mise en page : grille de cartes photo sur fond bleuté froid, accents bleu électrique, une touche jaune ananas */
:root{
  --bg:#F4F6FC; --surface:#FFFFFF; --ink:#0D1233; --muted:#5A6187; --line:#DDE2F2;
  --accent:#2340FF; --accent-ink:#FFFFFF; --soft:#E6EAFF; --leaf:#1E9E63; --sun:#FFC83D;
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --body:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0A0D20; --surface:#121735; --ink:#E9ECFA; --muted:#9BA2C6; --line:#252C55;
  --accent:#6E85FF; --accent-ink:#0A0D20; --soft:#1B2250; --leaf:#3CC486; --sun:#FFD166; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0A0D20; --surface:#121735; --ink:#E9ECFA; --muted:#9BA2C6; --line:#252C55;
  --accent:#6E85FF; --accent-ink:#0A0D20; --soft:#1B2250; --leaf:#3CC486; --sun:#FFD166; color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}
header.top{border-bottom:1px solid var(--line);background:var(--surface)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:700 1.2rem/1 var(--display);letter-spacing:-.01em}
.logo{width:28px;height:34px;flex:none}
nav.top{display:flex;gap:20px;font-weight:600;font-size:.95rem}
nav.top a{color:var(--muted);text-decoration:none}nav.top a:hover{color:var(--accent)}
.hero{padding-block:56px 28px}
.hero h1{font:800 clamp(2.6rem,7vw,5.2rem)/.95 var(--display);letter-spacing:-.035em;margin:0;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p{margin:16px 0 0;color:var(--muted);font-size:1.15rem;max-width:48ch}
.hero .count{display:inline-block;margin-top:18px;background:var(--sun);color:#3A2A00;font-weight:700;font-size:.85rem;padding:4px 12px;border-radius:999px}
.tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding-block:12px 24px;position:sticky;top:env(safe-area-inset-top,0px);background:var(--bg);z-index:5}
.search{flex:1 1 240px;min-width:0;display:flex;align-items:center;gap:8px;background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:0 14px}
.search:focus-within{border-color:var(--accent)}
.search input{border:0;background:none;color:var(--ink);font:inherit;padding:11px 0;width:100%;outline:none}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font:600 .92rem var(--body);padding:8px 14px;border-radius:999px;cursor:pointer}
.chip span{color:var(--muted);font-weight:500;margin-left:4px;font-variant-numeric:tabular-nums}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.chip[aria-pressed="true"] span{color:inherit;opacity:.75}
.view{display:flex;border:1.5px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.view button{border:0;background:none;color:var(--muted);padding:9px 12px;cursor:pointer;display:grid;place-items:center}
.view button[aria-pressed="true"]{background:var(--soft);color:var(--accent)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:28px 22px;padding-bottom:64px}
.card{text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:10px;min-width:0}
.card .ph{aspect-ratio:4/5;max-width:100%;border-radius:14px;overflow:hidden;background:var(--soft)}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .ph img{transform:scale(1.04)}
.card .meta{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.card .meta time{color:var(--muted);font-weight:500;letter-spacing:.02em;text-transform:none;margin-left:6px}
.card h2{font:700 1.18rem/1.2 var(--display);margin:0;letter-spacing:-.01em;text-wrap:balance}
.card:hover h2{color:var(--accent)}
.grid.list{grid-template-columns:1fr;gap:0}
.grid.list .card{flex-direction:row;align-items:center;gap:16px;padding-block:12px;border-bottom:1px solid var(--line)}
.grid.list .card .ph{width:84px;flex:none;aspect-ratio:1;border-radius:10px}
.grid.list .card .txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.card .txt{display:flex;flex-direction:column;gap:6px}
.empty{padding:40px 0 80px;color:var(--muted)}
footer.bot{border-top:1px solid var(--line);background:var(--surface)}
footer.bot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding-block:28px;color:var(--muted);font-size:.92rem}
footer.bot strong{color:var(--ink);font-family:var(--display)}
/* recette */
.recipe{max-width:780px;margin:0 auto;padding-block:32px 72px}
.back{font-weight:600;text-decoration:none;font-size:.95rem}
.recipe .meta{margin-top:28px;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.recipe .meta time{color:var(--muted);font-weight:500;letter-spacing:.02em;text-transform:none;margin-left:8px}
.recipe h1{font:800 clamp(2.1rem,5.5vw,3.6rem)/1 var(--display);letter-spacing:-.03em;margin:10px 0 0;text-wrap:balance}
.intro{font-size:1.15rem;color:var(--muted);margin-top:16px}.intro p{margin:0 0 8px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.tags span{background:var(--soft);color:var(--accent);font-size:.8rem;font-weight:600;padding:4px 10px;border-radius:999px}
.cover{margin-top:28px;border-radius:18px;overflow:hidden;background:var(--soft);max-height:640px;min-height:220px;max-width:100%}
.cover img{width:100%;max-height:640px;object-fit:cover}
.content h2{font:700 1.55rem/1.2 var(--display);letter-spacing:-.015em;margin:44px 0 14px;padding-top:18px;border-top:2px solid var(--ink)}
.content h3{font:700 1.08rem/1.3 var(--display);margin:24px 0 10px;color:var(--accent)}
.content ul,.content ol{margin:0;padding:0;list-style:none}
.ing{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:6px 18px}
.ing li+li{border-top:1px dashed var(--line)}
.ing label{display:flex;gap:12px;align-items:flex-start;padding:9px 0;cursor:pointer}
.ing input{appearance:none;flex:none;width:20px;height:20px;margin-top:3px;border:2px solid var(--line);border-radius:6px;background:var(--bg);cursor:pointer;display:grid;place-items:center}
.ing input:checked{background:var(--accent);border-color:var(--accent)}
.ing input:checked::after{content:"";width:5px;height:10px;border:solid var(--accent-ink);border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translate(-1px,-1px)}
.ing input:checked+span{color:var(--muted);text-decoration:line-through}
.mat li{padding-left:22px;position:relative}.mat li::before{content:"";position:absolute;left:4px;top:.75em;width:8px;height:2px;background:var(--accent)}
.steps{counter-reset:s}
.steps li{counter-increment:s;position:relative;padding:0 0 16px 48px;min-height:34px}
.steps li::before{content:counter(s);position:absolute;left:0;top:-2px;width:32px;height:32px;border-radius:50%;background:var(--soft);color:var(--accent);font:700 .9rem/32px var(--display);text-align:center;font-variant-numeric:tabular-nums}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-top:44px}
.gallery figure{margin:0}.gallery img{border-radius:12px;width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--soft)}
.gallery figcaption{font-size:.85rem;color:var(--muted);margin-top:6px}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:56px}
.pager a{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;min-width:0}
.pager a:hover{border-color:var(--accent)}
.pager small{color:var(--muted);font-size:.8rem;font-weight:600}
.pager strong{font-family:var(--display);font-size:1rem;line-height:1.25}
.pager .next{text-align:right;grid-column:2}
@media (max-width:560px){.grid{grid-template-columns:1fr 1fr;gap:20px 12px}.card h2{font-size:1rem}nav.top{gap:14px}.brand{font-size:1.02rem;white-space:nowrap}nav.top a:first-child{display:none}.hero{padding-block:36px 18px}}

/* — v2 : plus de couleur — */
:root{--bg:#FFFFFF;--surface:#FFFFFF;--soft:#EEF1FF;--line:#E3E6F5;--sun:#FFD23F;--dessert:#FF4F93;--plat:#13AE77;--apero:#FF7A2F;--cat:var(--accent);--band:#2340FF;--hand:"Caveat","Segoe Print","Comic Sans MS",cursive}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#0B0E22;--surface:#141938;--soft:#1C2353;--line:#272F5E;--sun:#FFD54F;--dessert:#FF6FA8;--plat:#2FCB8F;--apero:#FF9452;--band:#2232C4}}
:root[data-theme="dark"]{--bg:#0B0E22;--surface:#141938;--soft:#1C2353;--line:#272F5E;--sun:#FFD54F;--dessert:#FF6FA8;--plat:#2FCB8F;--apero:#FF9452;--band:#2232C4}
.c-dessert{--cat:var(--dessert)}.c-plat{--cat:var(--plat)}.c-apero{--cat:var(--apero)}
header.top{background:var(--band);border:0}
header.top .brand,nav.top a{color:#fff}nav.top a:hover{color:var(--sun)}
header.top .logo ellipse{fill:var(--sun)}
.band{background:var(--band);color:#fff;position:relative;padding-bottom:40px}
.band .wave{position:absolute;left:0;bottom:-1px;width:100%;height:46px;display:block}
.hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:center;padding-block:40px 30px}
.hero h1{color:#fff}.hero h1 em{color:var(--sun)}
.hero .hand{font:700 clamp(1.5rem,3vw,2.1rem)/1 var(--hand);color:var(--sun);margin:0 0 10px;transform:rotate(-2deg);transform-origin:left}
.hero p.lede{color:rgba(255,255,255,.85);margin:18px 0 0;font-size:1.15rem;max-width:44ch}
.hero .count{background:var(--sun);color:#2B2100;margin-top:22px}
.feat{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:#fff;transform:rotate(2deg);transition:transform .3s}
.feat:hover{transform:rotate(0)}
.feat .ph{aspect-ratio:4/3;border-radius:18px;overflow:hidden;position:relative;background:var(--cat);border:5px solid #fff;box-shadow:10px 10px 0 var(--sun)}
.feat strong{font:700 1.3rem/1.2 var(--display);padding-left:4px}
.ph{position:relative}
.ph img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover}
.fb{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.28) 0 14%,transparent 15%),radial-gradient(circle at 80% 75%,rgba(255,255,255,.18) 0 20%,transparent 21%),var(--cat)}
.fb .logo{width:34%;height:auto;max-width:90px;opacity:.9}
.fb .logo ellipse{fill:#fff}.fb .logo path:last-child{stroke:var(--cat)}
.sticker{position:absolute;z-index:2;top:12px;left:12px;background:var(--cat);color:#fff;font:700 .74rem/1 var(--body);letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.feat .sticker{background:var(--sun);color:#2B2100}
.card .ph{background:var(--cat);border-radius:18px}
.card .meta{color:var(--muted)}.card .meta time{margin:0}
.card:hover h2{color:var(--cat)}
.tools{padding-block:18px 26px}
.chip[data-c="dessert"]{--cat:var(--dessert)}.chip[data-c="plat"]{--cat:var(--plat)}.chip[data-c="apero"]{--cat:var(--apero)}
.chip[aria-pressed="true"]{background:var(--cat);border-color:var(--cat);color:#fff}
.chip[data-c="all"]{--cat:var(--accent)}
.grid.list .sticker{display:none}
.grid.list .card .ph{border-radius:12px}
footer.bot{background:var(--band);color:rgba(255,255,255,.85);border:0}
footer.bot strong{color:#fff}footer.bot a{color:var(--sun)}
/* recette */
.recipe .meta{display:flex;align-items:center;gap:10px}
.pill{background:var(--cat);color:#fff;padding:5px 12px;border-radius:999px;letter-spacing:.06em}
.recipe h1{position:relative;display:inline}
.recipe h1::after{content:"";display:block;height:10px;width:90px;background:var(--sun);border-radius:6px;margin-top:14px}
.recipe .tags span{background:var(--soft);color:var(--accent)}
.cover{position:relative;border-radius:22px;box-shadow:10px 10px 0 var(--cat)}
.cover img{position:relative;z-index:1}
.content h2{border-top:0;padding-top:0;display:flex;align-items:center;gap:12px}
.content h2::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--cat);flex:none}
.content h3{color:var(--cat)}
.ing{border:2px solid var(--ink);box-shadow:5px 5px 0 var(--sun);border-radius:16px}
.ing input:checked{background:var(--cat);border-color:var(--cat)}
.steps li::before{background:var(--accent);color:#fff}
.mat li::before{background:var(--cat)}
.gallery img{border-radius:16px}
.pager a{border:2px solid var(--line)}.pager a:hover{border-color:var(--cat)}

/* infos pratiques, ajusteur, filtre matériel */
.info{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin:36px 0 0}
.info div{background:var(--surface);padding:14px 16px;min-width:0}
.info dt{font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--cat)}
.info dd{margin:4px 0 0;font-weight:600;line-height:1.35}
.scaler{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:16px}
.scaler span{font-size:.85rem;font-weight:700;color:var(--muted);margin-right:4px}
.scaler button{border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font:600 .88rem var(--body);padding:6px 12px;border-radius:999px;cursor:pointer;font-variant-numeric:tabular-nums}
.scaler button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.q.chg,.yield.chg{background:var(--sun);color:#2B2100;border-radius:5px;padding:0 4px;font-weight:700}
.chips.eq{align-items:center}.eq-l{font-size:.85rem;font-weight:700;color:var(--muted)}
.chip.eqc[aria-pressed="true"]{background:var(--sun);border-color:var(--sun);color:#2B2100}
@media (max-width:760px){.hero{grid-template-columns:1fr;gap:28px}.feat{max-width:420px;transform:rotate(1.5deg)}}
@media (max-width:560px){nav.top a:first-child{display:none}.cover{box-shadow:6px 6px 0 var(--cat)}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}.feat{transform:none}}
@media print{header.top,footer.bot,.back,.pager,.tools{display:none}body{background:#fff;color:#000}}
/* — Carnet de cuisine — */
:root[data-style="carnet"][data-style]{--bg:#FAF4E8;--surface:#FFFDF7;--ink:#2B2620;--muted:#7A6F60;--line:#E6DCC8;--accent:#2340FF;--band:#FAF4E8;--soft:#F1E8D6;--sun:#FFD23F;color-scheme:light}
[data-style="carnet"] header.top{background:var(--band);border-bottom:2px dashed var(--line)}
[data-style="carnet"] header.top .brand,[data-style="carnet"] nav.top a{color:var(--ink)}
[data-style="carnet"] header.top .brand{font:700 1.6rem/1 var(--hand)}
[data-style="carnet"] .band{background:repeating-linear-gradient(transparent 0 35px,#E8DCC4 35px 36px),var(--band);color:var(--ink)}
[data-style="carnet"] .band .wave{display:none}
[data-style="carnet"] .hero h1{color:var(--ink);font:700 clamp(3.4rem,9vw,6.4rem)/.9 var(--hand);letter-spacing:0}
[data-style="carnet"] .hero h1 em{color:var(--navy);background:linear-gradient(transparent 58%,rgba(255,210,63,.85) 58% 90%,transparent 90%);padding:0 .08em}
[data-style="carnet"] .hero .hand{color:#E2457A}
[data-style="carnet"] .hero p.lede{color:var(--muted)}
[data-style="carnet"] .feat,[data-style="carnet"] .card{position:relative}
[data-style="carnet"] .feat .ph,[data-style="carnet"] .card .ph{border:10px solid #fff;border-bottom-width:30px;border-radius:3px;box-shadow:0 6px 18px rgba(60,40,10,.18)}
[data-style="carnet"] .feat .ph{box-shadow:0 10px 30px rgba(60,40,10,.25)}
[data-style="carnet"] .card::before,[data-style="carnet"] .feat::before{content:"";position:absolute;z-index:3;top:-10px;left:50%;width:80px;height:24px;margin-left:-40px;background:rgba(255,210,63,.75);transform:rotate(-3deg)}
[data-style="carnet"] .card:nth-child(odd){transform:rotate(-1.3deg)}[data-style="carnet"] .card:nth-child(even){transform:rotate(1.1deg)}
[data-style="carnet"] .card:hover{transform:rotate(0)}
[data-style="carnet"] .card h2,[data-style="carnet"] .feat strong{font:700 1.65rem/1.05 var(--hand)}
[data-style="carnet"] .feat{color:var(--ink)}
[data-style="carnet"] .sticker{font:700 1rem/1 var(--hand);letter-spacing:0;text-transform:none;border-radius:4px}
[data-style="carnet"] .grid.list .card{transform:none}[data-style="carnet"] .grid.list .card::before{display:none}
[data-style="carnet"] footer.bot{background:var(--band);color:var(--muted);border-top:2px dashed var(--line)}
[data-style="carnet"] footer.bot strong{color:var(--ink)}[data-style="carnet"] footer.bot a{color:var(--accent)}
[data-style="carnet"] .recipe h1{font:700 clamp(2.8rem,7vw,4.4rem)/1 var(--hand);letter-spacing:0}
[data-style="carnet"] .content h2{font:700 2rem/1.1 var(--hand)}
[data-style="carnet"] .cover{border:12px solid #fff;border-bottom-width:40px;border-radius:3px;box-shadow:0 10px 30px rgba(60,40,10,.2);transform:rotate(-.8deg)}
[data-style="carnet"] .ing{background:repeating-linear-gradient(var(--surface) 0 43px,#EADFC9 43px 44px);border:0;box-shadow:0 4px 14px rgba(60,40,10,.12);border-left:3px solid #F09AB4}
[data-style="carnet"] .ing li+li{border-top:0}
[data-style="carnet"] .steps li::before{background:none;border:2px solid var(--accent);color:var(--accent);font:700 1.1rem/28px var(--hand)}


/* — Carnet bleu marine — */
:root[data-style="carnet"][data-style]{--bg:#F7F4EC;--surface:#FFFEF9;--ink:#151E45;--muted:#565F82;--line:#DCE1F2;--accent:#2340FF;--band:#F7F4EC;--soft:#E6EAFF;--navy:#2340FF;--sun:#FFD23F;--pen:#D94B5E;color-scheme:light}
[data-style="carnet"] header.top{background:var(--navy);border:0}
[data-style="carnet"] header.top .brand,[data-style="carnet"] nav.top a{color:#F7F4EC}
[data-style="carnet"] nav.top a:hover{color:var(--sun)}
[data-style="carnet"] header.top .logo ellipse{fill:var(--sun)}
[data-style="carnet"] .band{background:repeating-linear-gradient(transparent 0 31px,#B9C6E4 31px 32px),repeating-linear-gradient(transparent 0 7px,#E3E8F4 7px 8px),var(--band);overflow:hidden}
[data-style="carnet"] .band::before{content:"";position:absolute;top:0;bottom:0;left:max(6px,calc(50% - 606px));width:2px;background:var(--pen);opacity:.55}
[data-style="carnet"] .hero h1{color:var(--navy)}
[data-style="carnet"] .hero h1 em{color:var(--navy);background:linear-gradient(transparent 58%,rgba(255,210,63,.85) 58% 90%,transparent 90%);padding:0 .08em}
[data-style="carnet"] .hero .hand{color:var(--pen)}
[data-style="carnet"] .hero .count{background:var(--navy);color:#F7F4EC}
[data-style="carnet"] .card::before,[data-style="carnet"] .feat::before{background:rgba(35,64,255,.55)}
[data-style="carnet"] .feat .sticker{background:var(--navy);color:#F7F4EC}
[data-style="carnet"] .card h2,[data-style="carnet"] .feat strong{color:var(--navy)}
[data-style="carnet"] .card:hover h2{color:var(--pen)}
[data-style="carnet"] .chip[data-c="all"]{--cat:var(--navy)}
[data-style="carnet"] .chip.eqc[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#F7F4EC}
[data-style="carnet"] .scaler button[aria-pressed="true"],[data-style="carnet"] .view button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#F7F4EC}
[data-style="carnet"] footer.bot{background:var(--navy);color:#C9D2E6;border:0}
[data-style="carnet"] footer.bot strong{color:#F7F4EC;font:700 1.4rem/1 var(--hand)}[data-style="carnet"] footer.bot a{color:var(--sun)}
[data-style="carnet"] .back{color:var(--accent)}
[data-style="carnet"] .recipe h1,[data-style="carnet"] .content h2{color:var(--navy)}
[data-style="carnet"] .recipe h1::after{background:var(--sun);height:8px;border-radius:4px}
[data-style="carnet"] .tags span{background:var(--soft);color:var(--navy)}
[data-style="carnet"] .info{border-radius:4px;background:var(--line)}[data-style="carnet"] .info::after{content:"";background:var(--surface);grid-column:auto / -1}[data-style="carnet"] .info dt{color:var(--accent)}
[data-style="carnet"] .ing{background:repeating-linear-gradient(var(--surface) 0 43px,#D3DCEF 43px 44px);border-left:2px solid var(--pen);border-radius:4px}
[data-style="carnet"] .steps li::before{border-color:var(--navy);color:var(--navy)}
[data-style="carnet"] .content h3{color:var(--accent)}