/* ============================================================
   ece — BASE (reset, typographie, layout)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700&family=Inter:wght@400;500;600;700&family=Cairo:wght@400;600;700&display=swap');

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body); background:var(--bg); color:var(--on-surface);
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
  transition:background .25s ease,color .25s ease;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none}
ul{list-style:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-sm)}

/* Typographie */
.t-display-xl{font-family:var(--font-display);font-size:clamp(36px,6vw,56px);font-weight:700;line-height:1.05;letter-spacing:-.02em}
.t-display-lg{font-family:var(--font-display);font-size:clamp(30px,4.5vw,44px);font-weight:700;line-height:1.1;letter-spacing:-.02em}
.t-display-md{font-family:var(--font-display);font-size:clamp(26px,3.5vw,36px);font-weight:600;line-height:1.15}
.t-h1{font-family:var(--font-display);font-size:30px;font-weight:600;line-height:1.2}
.t-h2{font-family:var(--font-display);font-size:24px;font-weight:600;line-height:1.25}
.t-h3{font-family:var(--font-display);font-size:20px;font-weight:600;line-height:1.3}
.t-body-lg{font-size:18px;line-height:1.6}
.t-body{font-size:16px}.t-body-sm{font-size:14px}.t-caption{font-size:12px}
.t-label-caps{font-family:var(--font-body);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.t-price-lg{font-family:var(--font-display);font-size:28px;font-weight:700;line-height:1.1}
.t-price-md{font-family:var(--font-display);font-size:20px;font-weight:700;line-height:1.15}
.t-price-sm{font-family:var(--font-display);font-size:16px;font-weight:700}
.muted{color:var(--on-surface-variant)}
.eyebrow{color:var(--primary);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}

/* Layout */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--margin-m)}
@media(min-width:768px){.container{padding-inline:var(--margin-d)}}
.section{padding-block:var(--section-gap)}
.grid{display:grid;gap:var(--gutter)}
.grid-products{grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.grid-products{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.grid-products{grid-template-columns:repeat(4,1fr)}}
.grid-cats{grid-template-columns:repeat(3,1fr)}
@media(min-width:768px){.grid-cats{grid-template-columns:repeat(6,1fr)}}
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}
.gap-2{gap:var(--s-2)}.gap-3{gap:var(--s-3)}.gap-4{gap:var(--s-4)}.gap-6{gap:var(--s-6)}.wrap{flex-wrap:wrap}
.sec-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:var(--s-6);gap:var(--s-4);flex-wrap:wrap}
.sec-head h2{font-family:var(--font-display);font-size:clamp(22px,3vw,30px)}
.link-more{color:var(--primary);font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:4px}