/* Café Altitude — démonstration de boutique en ligne (ZataLabs, V7.4). */
:root { --grain: #6b3e26; --creme: #f3e3cf; --lait: #fbf5ec; --encre: #24170f; --doux: #7c6656; --accent: #d9542b; }
*, *::before, *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--lait); color: var(--encre); font: 400 16px/1.55 "IBM Plex Sans", system-ui, sans-serif; padding-bottom: 90px; }
h1, h2, h3 { font-family: Syne, sans-serif; font-weight: 800; letter-spacing: -.02em; margin: 0 0 .5em; line-height: 1.05; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.entete { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; padding: 2rem clamp(1rem, 4vw, 3rem) 1.5rem; border-bottom: 2px solid var(--encre); }
.logo { font: 800 2.4rem/.85 Syne, sans-serif; text-decoration: none; letter-spacing: -.04em; }
.logo span { color: var(--accent); }
.entete p { margin: 0; max-width: 22rem; color: var(--doux); }

.mise-en-page { display: grid; grid-template-columns: 260px 1fr; }
@media (max-width: 860px) { .mise-en-page { grid-template-columns: 1fr; } }
.filtres { padding: 1.5rem clamp(1rem, 3vw, 2rem); border-right: 2px solid var(--encre); }
@media (max-width: 860px) { .filtres { border-right: 0; border-bottom: 2px solid var(--encre); } }
.filtres h2 { font-size: 1.3rem; }
.filtres fieldset { border: 0; padding: 0; margin: 0 0 1.4rem; }
.filtres legend { display: flex; justify-content: space-between; width: 100%; font-weight: 600; margin-bottom: .5rem; }
.puces { display: flex; flex-wrap: wrap; gap: .4rem; }
.puces button { padding: .4rem .75rem; border: 1.5px solid var(--encre); border-radius: 99px; background: none; cursor: pointer; font-size: .88rem; }
.puces button[aria-pressed="true"] { background: var(--encre); color: var(--lait); }
input[type="range"] { width: 100%; accent-color: var(--accent); }
.echelle { display: flex; justify-content: space-between; font-size: .78rem; color: var(--doux); }
.cases { display: grid; gap: .35rem; }
.cases label { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.cases input { width: 1rem; height: 1rem; accent-color: var(--accent); }

.catalogue { padding: 1.5rem clamp(1rem, 3vw, 2.5rem) 3rem; }
.catalogue h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
.catalogue h1 span { font: 500 1rem/1 "IBM Plex Sans", sans-serif; color: var(--doux); vertical-align: middle; }
.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.2rem; }
.carte { display: grid; grid-template-rows: auto 1fr auto; background: #fff; border: 2px solid var(--encre); border-radius: 18px; overflow: hidden; }
.carte__tete { display: grid; grid-template-columns: 1fr 120px; align-items: center; gap: .5rem; padding: 1.1rem 1.1rem .5rem; background: var(--c, var(--creme)); }
.carte__tete h3 { font-size: 1.35rem; margin: 0; }
.carte__tete p { margin: .2rem 0 0; font-size: .85rem; }
.radar { width: 120px; height: 120px; }
.radar polygon.fond { fill: none; stroke: rgba(36, 23, 15, .2); }
.radar polygon.profil { fill: rgba(36, 23, 15, .75); }
.radar text { font: 600 7px/1 "IBM Plex Sans", sans-serif; fill: var(--encre); }
.carte__corps { padding: .8rem 1.1rem; display: grid; gap: .7rem; align-content: start; }
.carte__corps > p { margin: 0; color: var(--doux); font-size: .92rem; }
.choix { display: flex; flex-wrap: wrap; gap: .35rem; }
.choix label { position: relative; }
.choix input { position: absolute; opacity: 0; }
.choix span { display: block; padding: .35rem .6rem; border: 1.5px solid #d9c8b6; border-radius: 8px; font-size: .82rem; cursor: pointer; }
.choix input:checked + span { border-color: var(--encre); background: var(--encre); color: #fff; }
.choix input:focus-visible + span { outline: 2px solid var(--accent); }
.carte__pied { display: flex; justify-content: space-between; align-items: center; padding: .8rem 1.1rem 1.1rem; }
.carte__pied b { font: 800 1.4rem/1 Syne, sans-serif; }
.ajouter { padding: .65rem 1rem; border: 0; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 600; cursor: pointer; }
.ajouter.is-ok { background: #2f7d4f; }
.vide { padding: 2rem; border: 2px dashed #cdb9a5; border-radius: 18px; text-align: center; color: var(--doux); }

/* Barre du panier, fixée en bas */
.barre-panier { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); width: min(560px, calc(100% - 24px)); z-index: 30; background: var(--encre); color: var(--lait); border-radius: 18px; box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .5); }
.barre-panier__ouvrir { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 1rem 1.3rem; border: 0; background: none; color: var(--lait); cursor: pointer; font-weight: 600; }
.barre-panier__ouvrir b { font: 800 1.2rem/1 Syne, sans-serif; }
.barre-panier__ouvrir::after { content: "▴"; margin-left: .8rem; transition: transform .2s; }
.barre-panier__ouvrir[aria-expanded="true"]::after { transform: rotate(180deg); }
.detail { padding: 0 1.3rem 1.2rem; max-height: 60vh; overflow-y: auto; }
.detail ul { list-style: none; margin: 0 0 .8rem; padding: 0; }
.detail li { display: flex; justify-content: space-between; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid rgba(251, 245, 236, .15); font-size: .92rem; }
.detail li button { border: 0; background: none; color: #d8b89f; cursor: pointer; text-decoration: underline; }
.abonnement { display: flex; align-items: center; gap: .5rem; margin: .5rem 0; cursor: pointer; }
.abonnement input { accent-color: var(--accent); }
.abonnement small { color: #f5a07f; }
.detail dl { margin: .5rem 0; display: grid; gap: .2rem; }
.detail dl div { display: flex; justify-content: space-between; }
.detail dd { margin: 0; }
.detail .total { font: 800 1.2rem/1.4 Syne, sans-serif; }
.payer { width: 100%; padding: .9rem; border: 0; border-radius: 12px; background: var(--accent); color: #fff; font-weight: 700; cursor: pointer; }
.detail__retour { margin: .6rem 0 0; min-height: 1em; font-size: .9rem; }
.pied { padding: 1.5rem; text-align: center; color: var(--doux); font-size: .88rem; border-top: 2px solid var(--encre); }