/* Givre Gourmand : palette menthe, fraise, vanille et bleu glacier. Polices système uniquement. */
:root{--bg:#fffaf0;--ink:#43283a;--muted:#6b5260;--paper:#fff;--mint:#bff0dc;--mint-d:#2f9b78;--pink:#ffc2d3;--straw:#d6335d;--straw-d:#a82447;--van:#fff1c2;--ice:#d6edf9;--line:#43283a26;--r:30px;--font:ui-rounded,"SF Pro Rounded","Hiragino Maru Gothic ProN","Varela Round","Trebuchet MS",Verdana,system-ui,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg) radial-gradient(circle at 12px 12px,#ffd9e4 2px,transparent 3px) 0 0/48px 48px;color:var(--ink);font:500 17px/1.55 var(--font);overflow-x:clip}
a{color:inherit}
img,svg{max-width:100%}
.sr,.sr-file{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:99px;z-index:50}
.skip:focus{top:10px}
:focus-visible{outline:4px solid #4a9fd4;outline-offset:2px}
/* En-tête */
.top{padding:14px 16px 0}
.top-in{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;background:var(--paper);border:3px solid var(--ink);border-radius:44px;padding:10px 14px 10px 12px;box-shadow:0 7px 0 var(--pink)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.wm{display:flex;flex-direction:column;line-height:1;font-size:1.35rem;letter-spacing:-.01em}
.wm b{font-weight:900;color:var(--straw)}
.wm em{font-style:normal;font-weight:800;color:var(--mint-d);margin-top:2px}
.top nav{min-width:0}
.navlist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.navlist>li{position:relative}
.navlist a,.menu summary{display:block;text-decoration:none;font-weight:800;font-size:.95rem;padding:8px 14px;border-radius:99px;cursor:pointer;list-style:none}
.menu summary::-webkit-details-marker{display:none}
.menu summary::after{content:" ▾"}
.navlist a:hover,.menu summary:hover,.menu[open] summary{background:var(--mint)}
.menu-panel{position:absolute;right:0;top:calc(100% + 10px);z-index:20;display:grid;gap:2px;min-width:230px;background:var(--paper);border:3px solid var(--ink);border-radius:26px;padding:10px;box-shadow:0 6px 0 var(--mint)}
.menu-panel a{padding:8px 12px;border-radius:16px}
.menu-panel a:hover{background:var(--van)}
main{max-width:1180px;margin:0 auto;padding:22px 16px 56px}
h1{font-size:clamp(2rem,5.5vw,3.6rem);line-height:1.06;margin:.2em 0 .35em;font-weight:900;letter-spacing:-.02em;overflow-wrap:anywhere}
h1 mark{background:linear-gradient(transparent 62%,var(--pink) 62%);color:inherit;padding:0 .08em}
h2{font-size:clamp(1.4rem,3.2vw,2rem);margin:0 0 16px;font-weight:900;overflow-wrap:anywhere}
h3{overflow-wrap:anywhere}
.lead{max-width:60ch;color:var(--muted);font-size:1.1rem;margin:0 0 20px}
.note{color:var(--muted)}
/* Héros */
.hero{position:relative;margin:0 0 54px;padding:34px clamp(18px,4vw,48px) 40px;border-radius:52px;background:color-mix(in srgb,var(--c,#7fdcc0) 38%,#fff);border:3px solid var(--ink);box-shadow:0 8px 0 color-mix(in srgb,var(--c,#7fdcc0) 80%,#43283a)}
.hero::after{content:"";position:absolute;left:34px;right:34px;bottom:-26px;height:26px;background:radial-gradient(circle at 16px 0,color-mix(in srgb,var(--c,#7fdcc0) 38%,#fff) 14px,transparent 15px) 0 0/48px 26px repeat-x;pointer-events:none}
.hero.home{--c:#7fdcc0;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.7fr);gap:24px;align-items:center;background:linear-gradient(135deg,#d3f6e8,#ffe1ea 70%,#fff1c2)}
.hero.home::after{display:none}
.hero-art{width:100%;max-width:260px;justify-self:center;filter:drop-shadow(0 8px 0 #43283a22)}
.hero.small{padding-bottom:30px}
.hero.small h1{font-size:clamp(1.8rem,4.4vw,3rem)}
.pill{display:inline-block;margin:0 0 10px;background:var(--paper);border:2px solid var(--ink);padding:5px 14px;border-radius:99px;font-weight:800;font-size:.9rem}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 6px}
.btn{display:inline-block;background:var(--straw);color:#fff;text-decoration:none;font:inherit;font-weight:900;padding:13px 26px;border:3px solid var(--ink);border-radius:99px;box-shadow:0 5px 0 var(--ink);cursor:pointer;transition:transform .15s,box-shadow .15s;text-align:center}
.btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--ink)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
.btn.alt{background:var(--paper);color:var(--ink)}
.btn.small{padding:8px 18px;font-size:.95rem;box-shadow:0 3px 0 var(--ink)}
.filebtn{display:inline-block}
.linkbtn{background:none;border:0;font:inherit;font-weight:800;color:var(--straw-d);text-decoration:underline;cursor:pointer;padding:6px 8px}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:18px 0 0;font-size:.9rem;color:var(--muted)}
.byline img,.portrait{border-radius:50%;object-fit:cover;border:3px solid var(--paper);box-shadow:0 0 0 2px var(--ink)}
.byline span{min-width:0;overflow-wrap:anywhere}
.crumbs{display:flex;flex-wrap:wrap;gap:4px 8px;margin:0 0 10px;font-size:.88rem;font-weight:700;color:var(--muted)}
.crumbs i{font-style:normal;opacity:.6}
.count{margin:0;color:var(--muted)}
/* Bandes de sections */
.band{margin:0 0 48px;padding:30px clamp(16px,3vw,34px) 34px;border-radius:44px;background:var(--paper);border:3px solid var(--line)}
.band.alt{background:color-mix(in srgb,var(--ice) 60%,#fff);border-color:#43283a18}
.cats{margin:0 0 48px}
/* Grilles et cartes */
.grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:18px;align-items:stretch}
.grid>li{display:flex;min-width:0}
.cat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;width:100%;min-width:0;padding:20px 16px 22px;background:var(--paper);border:3px solid var(--ink);border-radius:80px 80px 30px 30px;text-decoration:none;box-shadow:0 6px 0 var(--c,#bff0dc);transition:transform .15s}
.cat:hover{transform:translateY(-4px) rotate(-.6deg)}
.ball{position:relative;display:grid;place-items:center;flex:none;width:72px;height:72px;border-radius:50%;background:var(--c,#bff0dc);border:3px solid var(--ink);font-size:2rem;line-height:1;font-style:normal}
.ball::after{content:"";position:absolute;left:14px;top:10px;width:16px;height:9px;border-radius:50%;background:#fff9;transform:rotate(-30deg)}
.cat b{font-size:1.1rem;font-weight:900;overflow-wrap:anywhere;max-width:100%}
.cat small{color:var(--muted);font-size:.88rem;overflow-wrap:anywhere;max-width:100%}
.cat.guide,.cat.tool{flex-direction:row;text-align:left;align-items:center;gap:6px 14px;border-radius:36px;padding:14px 18px;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ball t" "ball s"}
.cat.guide .ball,.cat.tool .ball{grid-area:ball;width:54px;height:54px;font-size:1.5rem}
.cat.guide .ball::after,.cat.tool .ball::after{left:10px;top:8px;width:11px;height:6px}
.cat.guide b,.cat.tool b{grid-area:t;align-self:end}
.cat.guide small,.cat.tool small{grid-area:s;align-self:start}
.cat.tool{border-style:dashed;border-radius:36px 36px 36px 8px}
.grid.sites{grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:16px}
.has-fav{position:relative}
.site{position:relative;display:flex;flex-direction:column;gap:4px;width:100%;min-width:0;padding:30px 14px 16px;background:var(--paper);border:3px solid var(--ink);border-radius:20px 20px 34px 34px;text-decoration:none;overflow:hidden;transition:transform .15s}
.site:hover{transform:translateY(-3px) rotate(-.8deg)}
.site .lid{position:absolute;left:0;right:0;top:0;height:16px;background:var(--c);border-bottom:3px solid var(--ink)}
.site i{font-style:normal;font-size:1.6rem;line-height:1}
.site b{font-weight:900;font-size:1rem;overflow-wrap:anywhere}
.site em{font-style:normal;align-self:flex-start;margin-top:auto;font-size:.78rem;font-weight:800;padding:2px 10px;border-radius:99px;background:color-mix(in srgb,var(--c) 45%,#fff);overflow-wrap:anywhere}
.fav{position:absolute;right:8px;top:22px;z-index:2;width:36px;height:36px;border-radius:50%;border:2px solid var(--ink);background:var(--paper);font-size:1.1rem;line-height:1;cursor:pointer;color:var(--straw)}
.fav[aria-pressed=true]{background:var(--van)}
/* Annuaire */
.finder{margin:0 0 20px}
.finder-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;align-items:end}
.finder-row label{grid-column:1/-1;font-weight:800}
.finder-count{margin:8px 0;color:var(--muted)}
.chips{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips button{font:inherit;font-weight:800;font-size:.88rem;border:2px solid var(--ink);background:color-mix(in srgb,var(--c,#fff) 40%,#fff);color:var(--ink);padding:6px 12px;border-radius:99px;cursor:pointer}
.chips button[aria-pressed=true]{background:var(--ink);color:#fff}
.finder-clear{font:inherit;font-weight:800;border:2px solid var(--ink);background:var(--paper);border-radius:99px;padding:10px 16px;cursor:pointer}
.favbox{margin:0 0 24px;padding:18px;border:3px dashed var(--straw);border-radius:32px;background:#fff6f8}
.favbox h3{margin:0 0 12px}
.favbox-actions{display:flex;flex-wrap:wrap;gap:8px}
.rnote{color:var(--muted);font-size:.92rem}
.empty{text-align:center;padding:40px 20px;border:3px dashed var(--line);border-radius:36px}
.empty-emoji{font-size:3rem}
/* Formulaires */
label{font-weight:800;display:block;margin-bottom:5px}
input,select,textarea{width:100%;min-width:0;max-width:100%;font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:3px solid var(--ink);border-radius:18px;padding:11px 14px}
input[type=checkbox],input[type=range]{width:auto;accent-color:var(--straw)}
input[type=range]{width:100%}
textarea{resize:vertical}
.field{min-width:0}
.field.check{display:flex;align-items:center;gap:10px}
.field.check label{margin:0}
.toolbox{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start;margin:0 0 40px}
.toolbox form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:14px;padding:22px;background:var(--paper);border:3px solid var(--ink);border-radius:36px 36px 36px 8px;box-shadow:0 6px 0 var(--mint)}
.toolbox form[hidden],.field[hidden]{display:none}
.result{min-width:0;padding:22px;background:var(--van);border:3px solid var(--ink);border-radius:36px;box-shadow:0 6px 0 var(--pink)}
.res{margin:0;display:grid;gap:10px}
.res>div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 16px;padding-bottom:8px;border-bottom:2px dotted var(--line)}
.res dt{font-weight:700;min-width:0;overflow-wrap:anywhere}
.res dd{margin:0;font-weight:900;text-align:right;min-width:0;overflow-wrap:anywhere}
.res .main{border:0;padding:12px 14px;border-radius:22px;background:var(--paper);font-size:1.15rem}
.res .main dd{color:var(--straw-d)}
.err{color:var(--straw-d);font-weight:800}
.conv-main{font-size:1.35rem;font-weight:900;margin:0 0 12px;overflow-wrap:anywhere}
.swap{align-self:end;font:inherit;font-weight:800;padding:11px 14px;border-radius:18px;border:3px solid var(--ink);background:var(--ice);cursor:pointer}
.status{min-height:1.4em;color:var(--muted)}
/* Contenus */
.prose{max-width:780px;margin:0 auto 40px;min-width:0}
.prose.wide{max-width:none}
.prose h2{margin:38px 0 12px;font-size:1.5rem}
.prose h2:first-child{margin-top:0}
.prose a{color:var(--straw-d);font-weight:800}
.prose p,.prose li{overflow-wrap:anywhere}
.prose .grid{margin-top:12px}
.prose .cat{color:var(--ink)}
.faq details{background:var(--paper);border:3px solid var(--ink);border-radius:28px;padding:12px 20px;margin-bottom:12px}
.faq summary{cursor:pointer;font-weight:900}
.faq p{margin:10px 0 0;color:var(--muted)}
.chiplist{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.chiplist a{display:inline-block;background:var(--ice);border:2px solid var(--ink);border-radius:99px;padding:6px 14px;text-decoration:none;color:var(--ink);font-weight:800}
.embedbox{padding:20px;border:3px dashed var(--ink);border-radius:32px;background:var(--paper)}
.embedbox textarea{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.88rem}
.example{padding:18px;border:3px solid var(--ink);border-radius:30px;background:var(--paper)}
.example ul{padding-left:20px}
.callout{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:28px 0;padding:18px 22px;border:3px solid var(--ink);border-radius:40px;background:color-mix(in srgb,var(--c) 40%,#fff)}
.callout p{margin:0;font-weight:800;min-width:0}
.checklist{padding:6px 20px;border:3px solid var(--ink);border-radius:30px;background:var(--paper)}
.checklist ul{list-style:none;padding:0;margin:10px 0}
.checklist li{position:relative;padding:6px 0 6px 34px}
.checklist li::before{content:"";position:absolute;left:0;top:9px;width:20px;height:20px;border-radius:50%;border:3px solid var(--mint-d);background:var(--mint)}
.guide-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px}
.guide-nav a{display:block;padding:14px 18px;border:3px solid var(--ink);border-radius:30px;text-decoration:none;background:var(--paper);font-weight:900;overflow-wrap:anywhere}
.guide-nav span{display:block;font-size:.8rem;color:var(--muted);font-weight:700}
.portrait{display:block;margin-bottom:12px}
.facts{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:8px 20px;background:var(--paper);border:3px solid var(--ink);border-radius:30px;padding:20px}
.facts dt{font-weight:900;overflow-wrap:anywhere}.facts dd{margin:0;overflow-wrap:anywhere}
.crit-list{grid-template-columns:minmax(0,1fr)}
.links,.plain{list-style:none;padding:0;display:grid;gap:10px}
.links a{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:space-between;padding:12px 16px;border:3px solid var(--ink);border-radius:26px;text-decoration:none;background:var(--paper)}
.links span{overflow-wrap:anywhere;color:var(--muted)}
/* Tableaux et calendrier */
.tablewrap{position:relative;overflow-x:auto;max-width:100%;border:3px solid var(--ink);border-radius:26px;background:var(--paper);margin:0 0 20px}
table{border-collapse:collapse}
.evlist{width:100%;min-width:560px}
.evlist th,.evlist td{padding:10px 14px;text-align:left;border-bottom:2px dotted var(--line);vertical-align:top}
.evlist thead th{background:var(--mint)}
.controls{display:flex;flex-wrap:wrap;align-items:end;gap:10px 14px;margin:0 0 18px}
.controls .field,.controls>div{min-width:0}
.controls select,.controls input{width:auto;min-width:130px}
.months{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:16px;margin:0 0 26px}
.month{min-width:0;padding:10px;background:var(--paper);border:3px solid var(--ink);border-radius:26px}
.month table{width:100%;font-size:.8rem;table-layout:fixed}
.month caption{font-weight:900;padding-bottom:4px;text-transform:capitalize}
.month td,.month th{text-align:center;padding:3px 0}
.month .mk span{display:inline-block;min-width:1.7em;border-radius:50%;font-weight:900;border:2px solid var(--ink)}
.mk-gourmand span{background:var(--pink)}.mk-fete span{background:var(--mint)}.mk-famille span{background:var(--van)}
/* Modèles, atelier, comparateurs */
.modele-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start;margin:0 0 36px}
.modele-form{display:grid;gap:12px;padding:22px;background:var(--paper);border:3px solid var(--ink);border-radius:36px;min-width:0}
.modele-side{min-width:0}
.paper{padding:22px 24px;background:#fff;border:3px solid var(--ink);border-radius:8px 30px 8px 30px;box-shadow:6px 6px 0 var(--ice);font-family:Georgia,"Times New Roman",serif;overflow-wrap:anywhere}
.paper p{margin:.15em 0}
.dl-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.imgtool{margin:0 0 36px;min-width:0}
.fallback{padding:14px 18px;border:3px dashed var(--straw);border-radius:26px;background:#fff6f8}
.options{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px;margin:0 0 16px}
.plan{padding-left:22px}
.plan li{padding:4px 0}.plan li.now{font-weight:900;color:var(--straw-d)}.plan li.done{opacity:.55;text-decoration:line-through}
.clockbox{padding:18px;margin:14px 0;text-align:center;border:3px solid var(--ink);border-radius:40px;background:var(--mint)}
.clock{font-size:clamp(2.6rem,12vw,4.6rem);font-weight:900;margin:0;font-variant-numeric:tabular-nums}
.scaled{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.scaled s{color:var(--muted)}
.recipes{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:18px}
.recipes pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;margin:0 0 8px}
.canvaswrap{max-width:560px;border:3px solid var(--ink);border-radius:16px;overflow:hidden;background:#fff}
.canvaswrap canvas{display:block;width:100%;height:auto}
.matrix{margin:0 0 36px;min-width:0}
.matrix-top,.names,.scores{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px;margin:0 0 12px}
.crit{margin:0 0 16px;padding:16px;border:3px dashed var(--ink);border-radius:32px;min-width:0;display:grid;gap:10px}
.crit legend{font-weight:900;padding:0 8px}
.help{color:var(--muted);margin:0}
.ranking{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ranking li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:10px 14px;background:var(--paper);border:3px solid var(--ink);border-radius:26px}
.ranking b{overflow-wrap:anywhere}
.ranking .bar{grid-column:1/-1;height:12px;border-radius:99px;background:#43283a14;overflow:hidden}
.ranking .bar i{display:block;height:100%;background:var(--straw);border-radius:99px}
.verdict{font-weight:800;margin:12px 0 0}
/* Pied de page */
.foot{position:relative;margin-top:50px;background:var(--mint);padding:48px 16px 24px;border-top:3px solid var(--ink)}
.foot::before{content:"";position:absolute;left:0;right:0;top:-3px;height:22px;transform:translateY(-100%);background:radial-gradient(circle at 20px 22px,var(--mint) 19px,transparent 20px) 0 0/40px 22px repeat-x}
.foot-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:26px}
.foot-about{grid-column:span 2;min-width:0}
.foot h3{margin:0 0 10px;font-size:1rem}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.foot a{text-decoration:none;overflow-wrap:anywhere}.foot ul a:hover{text-decoration:underline}
.foot-bottom{max-width:1180px;margin:28px auto 0;padding-top:16px;border-top:2px dotted var(--ink);font-size:.85rem;overflow-wrap:anywhere}
/* Pages intégrables */
body.embed{background:#fff}
.embed-wrap{max-width:640px;padding:12px}
.embed-wrap h1{font-size:1.5rem}
.embed .toolbox{grid-template-columns:minmax(0,1fr)}
.embed-credit{text-align:right;font-size:.85rem}
@media (max-width:820px){
  .toolbox,.modele-grid{grid-template-columns:minmax(0,1fr)}
  .hero.home{grid-template-columns:minmax(0,1fr)}
  .hero-art{max-width:170px}
  .foot-about{grid-column:auto}
  .top-in{border-radius:34px}
  .navlist>li:has(.menu){flex-basis:100%}
  .menu-panel{position:static;margin-top:6px;min-width:0;box-shadow:none}
  .facts{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:480px){
  body{font-size:16px}
  .hero{border-radius:36px}
  .band{border-radius:32px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .grid.sites{grid-template-columns:minmax(0,1fr)}
  .cat{border-radius:60px 60px 24px 24px;padding:16px 10px 18px}
  .cat.guide,.cat.tool{border-radius:28px}
  .grid:has(.guide),.grid:has(.tool){grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media print{
  body{background:#fff}
  .top,.foot,.skip,.noprint,.crumbs,.byline,.hero::after{display:none!important}
  body.modele .modele-form,body.modele .hero,body.modele .prose,body.modele .dl-actions,body.modele h2{display:none}
  body.modele .modele-grid{display:block}
  body.atelier .hero,body.atelier .prose,body.atelier .options,body.atelier .controls,body.atelier #recipe-form{display:none}
  .paper,.canvaswrap,.recipes .paper{box-shadow:none}
}

/* cartes de menus : même habillage que les cartes d'outils (icône <i>, description <span>) */
.cat.guide > i, .cat.tool > i { grid-area: ball; font-style: normal; display: grid; place-items: center; width: 54px; height: 54px; font-size: 1.5rem; border-radius: 50%; background: var(--c, #bff0dc); border: 3px solid var(--ink); line-height: 1; }
.cat.guide > span, .cat.tool > span { grid-area: s; align-self: start; color: var(--muted); font-size: .88rem; overflow-wrap: anywhere; max-width: 100%; }