:root{
  --beige:#F5F1E8; --beige-ink:#3A3A34;
  --green:#0F5C4A; --green-ink:#EAF5F1;
  --card:#FFFFFF; --muted:#6B6B63;
  --ring:rgba(15,92,74,.3);
  --shadow:0 6px 24px rgba(0,0,0,.08);
}
[data-theme="dark"]{
  --beige:#11130F; --beige-ink:#ECEADF;
  --green:#0F5C4A; --green-ink:#EAF5F1;
  --card:#171A16; --muted:#B8B6A9;
  --ring:rgba(234,245,241,.25);
  --shadow:0 6px 24px rgba(0,0,0,.4);
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,"Apple Color Emoji","Segoe UI Emoji";
  line-height:1.6; background:var(--beige); color:var(--beige-ink);
}
a{color:var(--green); text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1200px,100% - 2rem); margin-inline:auto}

/* Header */
header.site{ position:sticky; top:0; z-index:40;
  backdrop-filter:saturate(140%) blur(8px);
  background:color-mix(in oklab, var(--beige) 88%, transparent);
  border-bottom:1px solid color-mix(in oklab, var(--beige-ink) 10%, transparent);
}
.topbar{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:.6rem 0}
.brand{justify-self:center; font-weight:900; font-size:1.15rem; letter-spacing:.4px}
.actions{justify-self:end; display:flex; gap:.5rem; align-items:center}
.mode-toggle{ width:40px; height:40px; border-radius:50%; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; background:var(--card); box-shadow:var(--shadow); transition:background .2s, transform .2s; }
.mode-toggle:hover{transform:rotate(15deg)}
.nav{display:flex; align-items:center; gap:1rem; padding:.6rem 0 1rem}
.menu{position:relative}
.menu>button{all:unset; cursor:pointer; padding:.5rem .75rem; border-radius:10px; border:1px solid color-mix(in oklab, var(--beige-ink) 10%, transparent)}
.dropdown{position:absolute; top:calc(100% + .4rem); left:0; background:var(--card); border:1px solid color-mix(in oklab, var(--beige-ink) 12%, transparent); border-radius:14px; box-shadow:var(--shadow); padding:.5rem; display:none; min-width:260px}
.dropdown a{display:block; padding:.5rem .6rem; border-radius:10px}
.dropdown a:hover{background:color-mix(in oklab, var(--beige-ink) 10%, transparent)}

/* Hero */
.hero{padding:2rem 0 1rem; text-align:center}
.pillbar{display:flex; gap:.5rem; flex-wrap:wrap}
.pill{background:var(--green); color:var(--green-ink); border-radius:999px; padding:.4rem .75rem; font-weight:700; font-size:.9rem}
.searchbar{margin:1rem 0}
.searchbar input{width:100%; padding:.9rem 1rem; border-radius:14px; border:1px solid color-mix(in oklab, var(--beige-ink) 18%, transparent); background:var(--card); color:inherit; outline:none}
.searchbar input:focus{box-shadow:0 0 0 4px var(--ring)}

/* ===== Grilles ===== */

/* Grille générique */
.grid{
  display:grid;
  gap:1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: stretch;
}

/* Catégories : 3 colonnes fixes sur desktop */
.grid-3{
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
@media (min-width: 900px){
  .grid-3{ grid-template-columns: repeat(3, 1fr) !important; }
}

/* Derniers comparatifs : s’adapte pour remplir la largeur (1–2–3 colonnes selon place) */
.grid-auto{
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
}

/* Cartes */
.card{
  background:var(--card);
  border:1px solid color-mix(in oklab, var(--beige-ink) 12%, transparent);
  border-radius:16px; overflow:hidden; box-shadow:var(--shadow);
  display:flex; flex-direction:column;
}
.card > img{
  aspect-ratio: 4 / 3; width:100%; object-fit:cover; display:block;
}
.card-body{padding:1rem; display:flex; flex-direction:column; gap:.5rem}
/* Centre verticalement le contenu texte/bouton dans les cartes */
.card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* titre/texte en haut, bouton en bas */
  min-height: 180px;              /* assure une zone suffisante */
}

.card-body h3, 
.card-body p {
  margin: 0.25rem 0;
  text-align: center;
}

.card-body .pill {
  align-self: center;   /* centre le bouton horizontalement */
  margin-top: 1rem;     /* espace au-dessus */
}

.card .pill{ align-self:flex-start; margin-top:auto }

/* Footer */
footer.site{margin-top:2rem; padding:2rem 0; border-top:1px solid color-mix(in oklab, var(--beige-ink) 10%, transparent)}
.footerbar{display:flex; gap:1rem; justify-content:space-between; flex-wrap:wrap}

/* Utilitaires */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.brand a{ color: inherit; text-decoration: none }
.brand a:hover, .brand a:focus{ text-decoration:none }

/* CTA */
.btn-cta{
  display:inline-block; padding:.65rem 1rem; border-radius:999px; font-weight:700; text-align:center;
  border:1px solid var(--green); background: var(--green); color: var(--green-ink);
  transition: transform .05s ease, box-shadow .2s ease, background .2s ease;
}
.btn-cta:hover { box-shadow:0 6px 20px rgba(15,92,74,.25); transform: translateY(-1px); }
.btn-cta--light { background: color-mix(in oklab, var(--beige) 92%, transparent); color: var(--green); }
.btn-cta--full { width:100%; }

/* Bouton retour haut (si utilisé) */
#backToTop{ position:fixed; right:1rem; bottom:1rem; z-index:9990; padding:.6rem .8rem; border-radius:999px; border:1px solid rgba(0,0,0,.08); background:var(--card); color:var(--green); box-shadow:0 8px 24px rgba(0,0,0,.12); cursor:pointer; display:none }
#backToTop.show{ display:block }