/*
 * Thème « Latte glacé » : le matcha tel qu'il se boit aujourd'hui, glacé, avec du lait d'avoine
 * et parfois de la fraise. Unbounded pour les titres, Nunito Sans pour le texte, aplats de couleur
 * sans ombre. Signature : le verre de latte glacé dessiné en CSS à l'accueil, et le rose fraise
 * réservé aux boutons d'achat.
 */

:root {
    --bg: #fbfcf7;
    --surface: #f1ecdf;
    --ink: #213a17;
    --muted: #4c5e43;
    --line: #dcdcc8;
    --matcha: #a6c560;
    --matcha-strong: #5f8424;
    --fraise: #f3a6b6;
    --ice: #e2f0ef;
    --accent: #4d7019;
    --buy-bg: #f3a6b6;
    --buy-ink: #213a17;

    --font-body: "Nunito Sans", system-ui, sans-serif;
    --font-display: "Unbounded", system-ui, sans-serif;
    --font-meta: "Nunito Sans", system-ui, sans-serif;

    --radius-s: 10px;
    --radius-m: 18px;
    --radius-l: 32px;
}

h1, h2, h3 { font-weight: 700; letter-spacing: -0.01em; }

/* ---------- En-tête ---------- */

.brand__mark { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(180deg, var(--matcha) 0 55%, #f6f3ea 55%); border: 2px solid var(--ink); }
.brand__name { font-size: 1.1rem; }
.site-nav a { font-weight: 700; padding: 0 14px; border-radius: 999px; }
.site-nav a[aria-current] { background: var(--ink); color: var(--bg); text-decoration: none; }
@media (max-width: 760px) { .nav-toggle { border-radius: 999px; } .site-nav a { padding: 0 4px; } }

/* ---------- Accueil ---------- */

.hero {
    display: grid; gap: 32px; align-items: center;
    max-width: calc(var(--wide) - 2 * var(--gutter)); margin-top: 8px;
    background: var(--matcha); border-radius: var(--radius-l);
    padding: clamp(32px, 6vw, 72px) clamp(24px, 5vw, 64px);
    overflow: hidden;
}
@media (max-width: 1180px) { .hero { margin-left: var(--gutter); margin-right: var(--gutter); } }
@media (min-width: 880px) { .hero { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.hero__title { font-size: clamp(2.1rem, 5vw, 3.9rem); line-height: 1.05; font-weight: 800; }
.hero__lede { font-size: 1.2rem; line-height: 1.55; margin: 22px 0 0; max-width: 38ch; font-weight: 600; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 30px 0 0; }
.hero .button { background: var(--ink); color: #ffffff; }
.hero__secondary { color: var(--ink); font-weight: 700; }
.hero :focus-visible { outline-color: var(--ink); }

.glass { justify-self: center; position: relative; width: min(56vw, 230px); aspect-ratio: 0.62; margin-top: 30px; }
.glass__cup {
    position: absolute; inset: 0; overflow: hidden;
    border: 4px solid var(--ink); border-top-width: 0; border-radius: 6px 6px 40px 40px;
    background: rgba(255, 255, 255, 0.55);
    clip-path: polygon(0 0, 100% 0, 92% 100%, 8% 100%);
}
.glass__milk { position: absolute; left: 0; right: 0; bottom: 0; height: 52%; background: #f6f3ea; }
.glass__matcha {
    position: absolute; left: 0; right: 0; top: 10%; height: 50%; z-index: 1;
    background: linear-gradient(180deg, #4e7a1c 0%, #6a9a2a 60%, rgba(150, 185, 80, 0.55) 85%, rgba(246, 243, 234, 0) 100%);
    animation: settle 4s ease-out 0.3s both;
}
@keyframes settle { from { height: 0; } }
.glass__ice { position: absolute; z-index: 2; width: 34%; aspect-ratio: 1; border-radius: 8px; background: rgba(226, 240, 239, 0.7); border: 2px solid rgba(255, 255, 255, 0.9); }
.glass__ice--1 { left: 10%; top: 16%; transform: rotate(-12deg); }
.glass__ice--2 { left: 50%; top: 22%; transform: rotate(14deg); }
.glass__ice--3 { left: 28%; top: 40%; transform: rotate(4deg); }
.glass__straw { position: absolute; z-index: 3; left: 58%; top: -18%; width: 14px; height: 80%; background: var(--fraise); border: 3px solid var(--ink); border-radius: 8px; transform: rotate(12deg); }

.home-featured { padding-top: var(--space); }
.featured { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 860px) { .featured { grid-template-columns: repeat(3, 1fr); } }
.featured__item { background: var(--surface); border-radius: var(--radius-m); padding: 24px; }
.featured__silo { display: inline-block; font-size: 0.8125rem; font-weight: 800; background: var(--bg); padding: 4px 12px; border-radius: 999px; }
.featured__link { display: block; margin-top: 14px; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.3; color: var(--ink); text-decoration: none; }
.featured__link:hover { text-decoration: underline; }
.featured__text { margin: 10px 0 0; color: var(--muted); }

.silos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.silos__item { flex: 1 1 260px; border: 2px solid var(--ink); border-radius: var(--radius-m); padding: 20px 22px; }
.silos__link { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink); text-decoration: none; }
.silos__link:hover { text-decoration: underline; }
.silos__text { margin: 6px 0 0; color: var(--muted); font-size: 0.95rem; }

.home-method { }
.home-method__text { font-size: 1.15rem; max-width: 60ch; margin: 0; }

/* ---------- Pages ---------- */

.article__title, .hub__title { font-size: clamp(1.9rem, 4.4vw, 3rem); font-weight: 800; line-height: 1.12; }
.breadcrumb ol { font-weight: 700; }

.toc { background: var(--ice); border-radius: var(--radius-m); padding: 18px 22px; }
.prose h2 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); }
.prose h3 { font-family: var(--font-body); font-weight: 800; font-size: 1.2rem; }
.prose ol > li::marker { font-weight: 800; color: var(--matcha-strong); }
.table-wrap { border: 2px solid var(--ink); border-radius: var(--radius-m); }
.prose table { min-width: 520px; }
.prose thead th { background: var(--matcha); border-bottom: 2px solid var(--ink); }
.prose tbody tr:last-child > * { border-bottom: 0; }

.product { border: 0; border-radius: var(--radius-l); padding: clamp(22px, 4vw, 32px); }
.prose .product__name, .product__name { font-size: 1.2rem; }
.product__brand { font-weight: 700; }
.button { border-radius: 999px; font-weight: 800; border: 2px solid var(--ink); }
.button:hover { filter: none; background: #ee8fa3; }
.hero .button:hover { background: #2d4d20; }

.picks { background: var(--ice); border: 0; border-radius: var(--radius-l); }
.picks__title { font-family: var(--font-display); font-size: 1.05rem; }
.pick + .pick { border-top-color: rgba(33, 58, 23, 0.15); }
.pick::before { content: counter(pick); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: #ffffff; font-size: 1.05rem; }

.entries { gap: 12px; }
.entry { border: 0; background: var(--surface); border-radius: var(--radius-m); padding: 18px 22px; }
.entry__link { font-size: 1.05rem; }

.related { border-top: 0; }
.site-footer { background: var(--ink); color: #e7efe0; border-top: 0; border-radius: var(--radius-l) var(--radius-l) 0 0; }
.site-footer__inner { color: #d3decb; }
.site-footer__about strong { color: #ffffff; }
.site-footer :focus-visible { outline-color: var(--matcha); }