@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --paper:      #FAF7F0;
  --card:       #FFFFFF;
  --card-edge:  #E7E1D2;
  --ink:        #1E271F;
  --ink-soft:   #5B6A5A;
  --ink-faint:  #8A9188;
  --gold:       #A97A1E;
  --olive:      #4B5A3E;
  --shadow:     0 1px 2px rgba(30,39,31,.04), 0 8px 24px rgba(30,39,31,.06);
  --shadow-hover: 0 4px 10px rgba(30,39,31,.06), 0 16px 32px rgba(30,39,31,.10);
  --radius: 10px;
  --maxw: 1120px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  background: var(--paper);
  color:var(--ink);
  font-family:'Inter', -apple-system, sans-serif;
  line-height:1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:'Fraunces', Georgia, serif; font-weight:600; }

@keyframes fadeInUp{
  from{ opacity:0; transform: translateY(16px); }
  to{ opacity:1; transform: translateY(0); }
}
@keyframes fadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}

.reveal{
  opacity:0;
  transform: translateY(16px);
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
.reveal.is-visible{ opacity:1; transform: translateY(0); }

.hero{ animation: fadeInUp .7s cubic-bezier(.16,1,.3,1) both; }

.eyebrow{
  font-family:'Inter', sans-serif;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gold);
}

.site-nav{
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(250,247,240,.92);
  backdrop-filter: saturate(150%) blur(6px);
  border-bottom: 1px solid var(--card-edge);
}
.nav-inner{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.logo{
  font-family:'Fraunces', serif;
  font-weight:700;
  font-size:1.4rem;
  color:var(--ink);
  letter-spacing:-.01em;
  display:inline-block;
  transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.logo:hover{ transform: rotate(-2deg); }
.logo span{ color:var(--gold); display:inline-block; animation: pulse 3s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }
.nav-links{ display:flex; gap:1.4rem; font-size:.88rem; font-weight:500; overflow-x:auto; white-space:nowrap; }
.nav-links a{ color:var(--ink-soft); flex-shrink:0; position:relative; padding:.2rem 0; transition: color .2s ease; }
.nav-links a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:-2px;
  height:2px; background: var(--gold);
  transition: right .25s cubic-bezier(.16,1,.3,1);
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after{ right:0; }
.nav-links a.active{ color:var(--ink); font-weight:700; }

.hero{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 3.2rem 1.5rem 1.5rem;
}
.hero h1{
  font-size: clamp(2.1rem, 4.2vw, 3.1rem);
  margin:.5rem 0 .6rem;
  line-height:1.1;
  color:var(--ink);
  letter-spacing:-.01em;
}
.hero p.lead{
  color:var(--ink-soft);
  font-size:1.05rem;
  max-width: 46em;
  margin:0;
}

.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem 5rem; }

.category-tiles{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .9rem;
  margin: 1.6rem 0 2.6rem;
}
.category-tile{
  background: var(--card);
  border:1px solid var(--card-edge);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s cubic-bezier(.16,1,.3,1), border-color .25s ease;
  box-shadow: var(--shadow);
}
.category-tile:hover{ transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--gold); }
.category-tile:active{ transform: translateY(-1px) scale(.98); }
.category-tile .cat-name{ font-family:'Fraunces', serif; font-weight:600; font-size:1.05rem; color:var(--ink); }
.category-tile .cat-count{ font-size:.82rem; color:var(--ink-faint); font-weight:600; }

.section-title{
  font-size:1.5rem;
  margin: 0 0 .3rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--card-edge);
}

.toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  align-items:center;
  margin: 1.6rem 0 2.4rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--card-edge);
}
#search{
  flex: 1 1 240px;
  padding:.65rem .9rem;
  border:1px solid var(--card-edge);
  border-radius: 8px;
  background:var(--card);
  font-family:'Inter', sans-serif;
  font-size:.95rem;
  color:var(--ink);
}
#search:focus{ outline:2px solid var(--olive); outline-offset:1px; }

.tab{
  font-family:'Inter', sans-serif;
  font-size:.82rem;
  font-weight:600;
  padding:.5rem .9rem;
  border:1px solid var(--card-edge);
  border-radius: 8px;
  background:var(--card);
  color:var(--ink-soft);
  cursor:pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .1s ease;
}
.tab:hover{ border-color: var(--ink-faint); }
.tab:active{ transform: scale(.96); }
.tab[aria-pressed="true"]{
  background:var(--ink);
  border-color:var(--ink);
  color:#fff;
}

.card-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1.6rem;
}

.recipe-card{
  display:block;
  background: var(--card);
  border:1px solid var(--card-edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1), border-color .3s ease;
}
.recipe-card:hover{
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
  border-color: var(--card-edge);
}
.recipe-card .thumb{
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, #EFE9D8 0%, #E3DCC6 100%);
  display:flex; align-items:center; justify-content:center;
  position:relative;
  overflow:hidden;
}
.recipe-card .thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.recipe-card:hover .thumb img{ transform: scale(1.06); }
.recipe-card .thumb .initials{
  font-family:'Fraunces', serif;
  font-size:2.4rem;
  color: var(--ink-faint);
  opacity:.55;
}
.recipe-card .thumb .cat-pill{
  position:absolute; top:.7rem; left:.7rem;
  background: rgba(255,255,255,.92);
  color: var(--ink);
  font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:.28rem .6rem;
  border-radius: 100px;
  z-index: 2;
}
.recipe-card .body{ padding: 1.1rem 1.2rem 1.3rem; }
.recipe-card h3{
  font-size:1.25rem;
  margin: 0 0 .4rem;
  line-height:1.25;
  color:var(--ink);
}
.recipe-card p.excerpt{
  color:var(--ink-soft);
  font-size:.88rem;
  margin:0 0 .8rem;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.recipe-card .meta{
  font-size:.78rem;
  color:var(--ink-faint);
  display:flex;
  gap:1rem;
  font-weight:500;
  border-top: 1px solid var(--card-edge);
  padding-top:.7rem;
}

.empty-state{ text-align:center; color:var(--ink-soft); padding: 4rem 1rem; }

.breadcrumb-nav{
  max-width: var(--maxw); margin: 0 auto; padding: 1.1rem 1.5rem 0;
  font-size:.82rem; color:var(--ink-faint);
}
.breadcrumb-nav a{ color:var(--ink-soft); }
.breadcrumb-nav a:hover{ color:var(--ink); }

.recipe-hero{
  max-width: var(--maxw); margin: 0 auto; padding: 1.4rem 1.5rem 0;
  animation: fadeInUp .7s cubic-bezier(.16,1,.3,1) both;
}
.recipe-hero h1{
  font-size: clamp(2rem, 4.5vw, 3rem);
  margin: .5rem 0 .7rem;
  line-height:1.1;
  max-width: 24ch;
}
.recipe-hero p.summary{
  color:var(--ink-soft);
  font-size:1.08rem;
  max-width: 48em;
  margin: 0 0 1.6rem;
}
.recipe-hero .hero-image{
  width:100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 1.8rem;
}

.recipe-layout{
  max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem 5rem;
  display:grid;
  grid-template-columns: 1fr 300px;
  gap: 2.6rem;
  align-items:start;
}
@media (max-width: 800px){
  .recipe-layout{ grid-template-columns: 1fr; }
}

.recipe-main h2{
  font-size:1.3rem;
  margin: 2rem 0 1rem;
  padding-bottom:.5rem;
  border-bottom: 2px solid var(--ink);
  color:var(--ink);
}
.recipe-main h2:first-child{ margin-top:0; }
.recipe-main .ingredients-head:first-child{ margin-top:0; }

.ingredients-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  margin: 2rem 0 1rem;
  padding-bottom:.5rem;
  border-bottom: 2px solid var(--ink);
}
.ingredients-head h2{
  margin:0; padding:0; border:none;
}
.toggle-all{
  font-family:'Inter', sans-serif;
  font-size:.78rem;
  font-weight:600;
  color: var(--gold);
  background:none;
  border:none;
  cursor:pointer;
  padding:.2rem 0;
  white-space:nowrap;
  transition: color .2s ease;
}
.toggle-all:hover{ color: var(--olive); text-decoration:underline; }

.ingredients{ list-style:none; margin:0; padding:0; }
.ingredients li{
  display:flex; gap:.7rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--card-edge);
  font-size:.96rem;
}
.ingredients li input[type=checkbox]{
  margin-top:.25rem;
  accent-color: var(--olive);
  cursor:pointer;
}
.ingredients li label{ cursor:pointer; }
.ingredients li .qty{
  display:inline-block;
  font-weight:600;
  color:var(--ink);
  white-space:nowrap;
  min-width: 4.6rem;
  margin-right:.4rem;
}
/* Rayer et estomper l'ingrédient une fois coché — pratique en cuisine pour
   suivre sa progression pendant la préparation */
.ingredients li input[type=checkbox]:checked + label{
  opacity:.45;
  text-decoration: line-through;
  text-decoration-color: var(--ink-faint);
}

.instructions{ list-style:none; margin:0; padding:0; counter-reset: step; }
.instructions li{
  counter-increment: step;
  position:relative;
  padding: 0 0 1.3rem 3rem;
  min-height: 2rem;
}
.instructions li::before{
  content: counter(step);
  position:absolute;
  left:0; top:0;
  width:2.1rem; height:2.1rem;
  border-radius:50%;
  background: var(--ink);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:.95rem;
  transition: background .2s ease, transform .2s ease;
}
.instructions li:hover::before{ background: var(--gold); transform: scale(1.08); }

.recipe-notes{
  margin-top:1.8rem;
  padding: 1.1rem 1.3rem;
  background: #F4EFE0;
  border-radius: 8px;
  border-left: 3px solid var(--gold);
  color:var(--ink-soft);
  font-size:.92rem;
}
.recipe-notes strong{ color:var(--ink); }

.info-box{
  background: var(--card);
  border:1px solid var(--card-edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.4rem;
  position: sticky;
  top: 5.5rem;
}
.info-box .stat{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:.6rem 0;
  border-bottom: 1px solid var(--card-edge);
  font-size:.9rem;
}
.info-box .stat:last-child{ border-bottom:none; }
.info-box .stat .label{ color:var(--ink-soft); }
.info-box .stat .value{ font-weight:700; color:var(--ink); font-family:'Fraunces', serif; font-size:1.05rem; }

.site-footer{
  border-top: 1px solid var(--card-edge);
  margin-top: 2rem;
}
.footer-inner{
  max-width: var(--maxw); margin:0 auto; padding: 2.4rem 1.5rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  font-size:.85rem; color:var(--ink-faint);
}
.footer-inner a{ color:var(--ink-soft); }

.legal-content{ max-width: 760px; }
.legal-content h2{
  font-size:1.25rem;
  margin: 2.2rem 0 .8rem;
  padding-bottom:.4rem;
  border-bottom: 2px solid var(--ink);
}
.legal-content h2:first-child{ margin-top:0; }
.legal-content p, .legal-content li{ color:var(--ink-soft); font-size:.98rem; }
.legal-content ul{ padding-left:1.2rem; }
.legal-content a{ color: var(--gold); text-decoration:underline; }
.legal-content a:hover{ color: var(--olive); }
.legal-content code{
  background: var(--card); border:1px solid var(--card-edge);
  border-radius:4px; padding:.1rem .4rem; font-family:'Inter', monospace; font-size:.88em;
}
.legal-updated{
  margin-top:2.4rem; padding-top:1.2rem; border-top:1px dashed var(--card-edge);
  font-size:.85rem !important; font-style:italic;
}

.footer-legal-links{
  display:flex; gap:1rem; flex-wrap:wrap;
  font-size:.82rem;
}
.footer-legal-links a{ color:var(--ink-soft); }
.footer-legal-links a:hover{ color:var(--ink); text-decoration:underline; }

/* ---------- Bannière d'information (vie privée) ---------- */
.privacy-banner{
  position: fixed;
  left: 1.2rem;
  bottom: 1.2rem;
  z-index: 60;
  max-width: 360px;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--card-edge);
  border-radius: 14px;
  padding: 1.2rem 1.3rem 1.3rem;
  box-shadow: 0 10px 32px rgba(30,39,31,.18), 0 2px 8px rgba(30,39,31,.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(.97);
  transition: opacity .35s cubic-bezier(.16,1,.3,1), transform .35s cubic-bezier(.16,1,.3,1), visibility .35s;
}
.privacy-banner.visible{
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.privacy-banner .banner-icon{
  width: 2.1rem; height:2.1rem;
  border-radius: 50%;
  background: var(--paper);
  display:flex; align-items:center; justify-content:center;
  margin-bottom: .7rem;
}
.privacy-banner .banner-icon svg{ width:1.1rem; height:1.1rem; color: var(--gold); }
.privacy-banner p{
  margin: 0 0 1rem;
  font-size:.86rem;
  line-height:1.5;
  color: var(--ink-soft);
}
.privacy-banner a{ color: var(--gold); text-decoration:underline; font-weight:600; }
.privacy-banner a:hover{ color: var(--olive); }
.privacy-banner .actions{ display:flex; justify-content:flex-end; }
.privacy-banner button{
  font-family:'Inter', sans-serif;
  font-size:.82rem;
  font-weight:700;
  padding:.55rem 1.3rem;
  border-radius: 8px;
  cursor:pointer;
  transition: transform .15s ease, opacity .2s ease;
}
.privacy-banner button:active{ transform: scale(.96); }
.privacy-banner .btn-ok{
  background: var(--ink);
  color: #fff;
  border:none;
}
.privacy-banner .btn-ok:hover{ background: var(--gold); }

@media (max-width: 480px){
  .privacy-banner{
    left: .8rem;
    right: .8rem;
    bottom: .8rem;
    max-width: none;
  }
}

/* ---------- Bouton retour en haut ---------- */
.back-to-top{
  position: fixed;
  right: 1.4rem;
  bottom: 1.4rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  border: none;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow: 0 4px 14px rgba(30,39,31,.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(.9);
  transition: opacity .25s cubic-bezier(.16,1,.3,1), transform .25s cubic-bezier(.16,1,.3,1), background .2s ease;
  z-index: 50;
}
.back-to-top.visible{
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.back-to-top:hover{ background: var(--gold); }
.back-to-top:active{ transform: scale(.92); }
.back-to-top svg{ width:1.2rem; height:1.2rem; }