
  :root{
    --terracotta:#E2774A;
    --terracotta-deep:#B9592F;
    --sable:#FCE6D2;
    --lin:#FFFAF5;
    --argile:#F6B48A;
    --peche:#FFD8C0;
    --abricot:#F9C784;
    --cacao:#9A5233;
    --serif:"Young Serif", Georgia, serif;
    --sans:"Figtree", system-ui, sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;background:#FFFAF5;color-scheme:only light;min-height:100%}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
  body{min-height:100vh;font-family:var(--sans);background:#FFFAF5 !important;color:var(--cacao);line-height:1.6;font-size:17px}
  img{max-width:100%;display:block}
  a{color:inherit}
  :focus-visible{outline:3px solid var(--terracotta);outline-offset:3px}

  /* En-tête */
  header{display:flex;justify-content:space-between;align-items:center;padding:1.1rem clamp(1.2rem,5vw,4rem);position:sticky;top:0;background:var(--lin);z-index:10;border-bottom:3px solid var(--abricot)}
  .logo{font-family:var(--serif);font-size:1.4rem;text-decoration:none;color:var(--terracotta)}
  nav{display:flex;gap:1.4rem}
  nav a{text-decoration:none;font-weight:500;font-size:.95rem}
  nav a:hover{color:var(--terracotta)}

  /* Accueil */
  .hero{padding:clamp(2.5rem,7vw,6rem) clamp(1.2rem,5vw,4rem) 3rem;display:grid;grid-template-columns:1.2fr 1fr;gap:3rem;align-items:end}
  .hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(3rem,10vw,7.5rem);line-height:.92;color:var(--terracotta);letter-spacing:-.02em}
  .hero p{font-size:1.15rem;max-width:34ch;margin-top:1.5rem}
  .hero-arch{aspect-ratio:3/4;border-radius:999px 999px 0 0;background:linear-gradient(165deg,var(--abricot) 0%,var(--argile) 50%,var(--terracotta) 100%);position:relative;overflow:hidden;max-width:380px;justify-self:end;width:100%}
  .hero-arch span{position:absolute;bottom:1.2rem;left:0;right:0;text-align:center;color:#fff;font-size:.85rem;opacity:.85}

  /* Recettes */
  .recipes{padding:2rem clamp(1.2rem,5vw,4rem) 5rem}
  .recipes-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1.5rem;margin-bottom:2rem}
  h2{color:var(--terracotta);font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4vw,2.8rem);line-height:1.1}
  .search{color:var(--cacao);padding:.75rem 1.1rem;border:1.5px solid var(--argile);border-radius:999px;background:var(--sable);font:inherit;width:min(100%,300px)}
  .search::placeholder{color:var(--argile)}
  .filters{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:2.5rem}
  .filters button{font:inherit;font-size:.95rem;padding:.5rem 1.1rem;border-radius:999px;border:1.5px solid var(--terracotta);background:transparent;color:var(--terracotta);cursor:pointer}
  .filters button{background:var(--sable);border-color:transparent;color:var(--terracotta-deep);font-weight:500}
  .filters button[aria-pressed="true"]{background:var(--terracotta);color:#fff}
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:2.5rem 1.8rem}
  .card{background:none;border:none;text-align:left;font:inherit;color:inherit;cursor:pointer}
  .card .photo{background:var(--peche);aspect-ratio:4/5;border-radius:999px 999px 0 0;overflow:hidden;margin-bottom:1rem}
  .card .photo img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
  .card:hover .photo img{transform:scale(1.04)}
  .card h3{color:var(--terracotta-deep);font-family:var(--serif);font-weight:400;font-size:1.35rem;line-height:1.2}
  .card p{font-size:.92rem;color:var(--terracotta-deep);margin-top:.3rem}
  .empty{grid-column:1/-1;padding:2rem 0}

  /* Fiche recette */
  dialog{border:none;max-width:860px;width:calc(100% - 2rem);max-height:calc(100% - 2rem);margin:auto;background:var(--lin);color:var(--cacao);border-radius:18px;padding:0}
  dialog::backdrop{background:rgba(226,119,74,.25)}
  .sheet{display:grid;grid-template-columns:1fr 1.3fr}
  .sheet-photo{background-size:cover;background-position:center;min-height:320px}
  .sheet-body{padding:2.2rem}
  .sheet-body h2{color:var(--terracotta);margin-bottom:.5rem}
  .meta{display:flex;flex-wrap:wrap;gap:1.2rem;font-size:.92rem;margin-bottom:1.6rem;color:var(--terracotta-deep)}
  .servings{display:flex;align-items:center;gap:.8rem;margin:1.2rem 0 .8rem}
  .servings button{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--terracotta);background:none;color:var(--terracotta);font-size:1.2rem;cursor:pointer}
  .sheet-body h4{font-family:var(--serif);font-weight:400;font-size:1.25rem;margin:1.6rem 0 .6rem}
  .ingredients label{display:flex;gap:.6rem;padding:.35rem 0;border-bottom:1px dashed var(--sable);cursor:pointer}
  .ingredients input:checked + span{text-decoration:line-through;opacity:.5}
  .ingredients input{accent-color:var(--terracotta)}
  .steps{padding-left:1.3rem}
  .steps li{margin-bottom:.8rem;padding-left:.3rem}
  .steps li::marker{color:var(--terracotta);font-family:var(--serif)}
  .tip{margin-top:1.6rem;background:var(--peche);padding:1rem 1.2rem;border-radius:12px;font-size:.95rem}
  .close{position:sticky;top:0;float:right;margin:1rem;width:40px;height:40px;border-radius:50%;border:none;background:var(--lin);color:var(--terracotta);font-size:1.3rem;cursor:pointer;z-index:2}

  /* À propos */
  .about{background:var(--peche);color:var(--cacao);padding:clamp(3rem,7vw,5.5rem) clamp(1.2rem,5vw,4rem);display:grid;grid-template-columns:1fr 1.4fr;gap:3rem;align-items:center}
  .about-arch{aspect-ratio:3/4;border-radius:999px 999px 0 0;background:linear-gradient(165deg,var(--abricot),var(--terracotta));max-width:320px;width:100%}
  .about p{max-width:58ch;margin-top:1rem}
  .about .links{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.8rem}
  .about h2{color:var(--terracotta-deep)}
  .about .links a{padding:.7rem 1.3rem;border:1.5px solid var(--terracotta-deep);color:var(--terracotta-deep);border-radius:999px;text-decoration:none;font-weight:500}
  .about .links a:hover{background:var(--terracotta);color:#fff}

  footer{background:var(--terracotta);color:#fff;padding:2rem clamp(1.2rem,5vw,4rem);font-size:.9rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}

  @media (max-width:760px){
    nav{gap:1rem}
    .hero,.about,.sheet{grid-template-columns:1fr}
    .hero-arch{justify-self:start;max-width:260px}
    .sheet-photo{min-height:220px}
    .sheet-body{padding:1.5rem}
  }

  [hidden]{display:none!important}
  .card{display:block;text-decoration:none}
  nav.breadcrumb{display:block}
  .breadcrumb{padding:1.2rem clamp(1.2rem,5vw,4rem) 0;font-size:.9rem}
  .breadcrumb a{color:var(--terracotta-deep)}
  .recipe-hero{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(2rem,5vw,4rem);align-items:center;padding:1.5rem clamp(1.2rem,5vw,4rem) 2.5rem}
  .recipe-hero .photo{aspect-ratio:4/5;border-radius:999px 999px 0 0;overflow:hidden;background:var(--peche);max-width:460px;width:100%}
  .recipe-hero .photo img{width:100%;height:100%;object-fit:cover}
  .recipe-hero h1{font-family:var(--serif);font-weight:400;color:var(--terracotta);font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.08;margin-bottom:1rem}
  .recipe-hero .intro{font-size:1.1rem;max-width:46ch}
  .pills{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
  .pills span{background:var(--sable);color:var(--terracotta-deep);padding:.45rem 1rem;border-radius:999px;font-weight:500;font-size:.92rem}
  .recipe-body{display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(2rem,5vw,4rem);padding:1rem clamp(1.2rem,5vw,4rem) 4rem;align-items:start}
  .recipe-body h2{font-size:1.7rem;margin-bottom:1rem}
  .ing-box{background:var(--sable);border-radius:18px;padding:1.6rem}
  .steps li{margin-bottom:1.1rem}
  .more{padding:0 clamp(1.2rem,5vw,4rem) 5rem}
  .more h2{margin-bottom:1.6rem}
  @media (max-width:760px){.recipe-hero,.recipe-body{grid-template-columns:1fr}.recipe-hero .photo{max-width:300px}}

.ingredients .ing-group{font-family:var(--serif);color:var(--terracotta);font-size:1.05rem;font-weight:400;margin:1.1rem 0 .3rem}
.ingredients .ing-group:first-child{margin-top:.2rem}

.steps li img{display:block;width:100%;max-width:320px;aspect-ratio:1/1;object-fit:cover;border-radius:14px;margin-top:.8rem}
