/* =====================================================================
   TAMASINI CLUB — Design system « Vitrine »
   Concept : la vitrine en arche des boulangeries parisiennes. L'arche apparaît
   en grand une seule fois (accueil), puis en écho sur les cadres photo produits.
   Tout le reste reste calme : ivoire, brun profond, une touche de cuivre.
   Mobile d'abord ; colonne unique jusqu'à 720 px, grilles au-delà.
   ===================================================================== */
:root {
  /* Palette TAMASINI */
  --ivoire: #F7F1E8;
  --brun: #34241C;
  --cuivre: #A76F48;
  --beige: #DCC3A0;
  --blanc: #FFFCF7;
  /* Dérivés (contrastes vérifiés sur ivoire) */
  --bg: var(--ivoire);
  --surface: var(--blanc);
  --ink: var(--brun);
  --muted: #6F5A4B;            /* texte secondaire, 5,6:1 sur ivoire */
  --line: #E7DAC6;
  --soft: #EFE3D1;             /* fonds doux, puces, champs */
  --accent: var(--cuivre);
  --accent-ink: #8A5532;       /* cuivre lisible pour du texte (≥ 4,5:1) */
  --on-dark: var(--blanc);
  --dark: var(--brun);
  --dark-2: #45311F;
  --ok: #3F6B47; --ok-bg: #E4EDE2;
  --warn: #8F5A12; --warn-bg: #F6E9D2;
  --bad: #A23B2C; --bad-bg: #F6E1DC;
  /* Typographie */
  --f-display: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --f-body: "Jost", "Futura", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --f-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* Échelle (≈ 1,25) */
  --t-xs: .76rem; --t-sm: .86rem; --t-md: 1rem; --t-lg: 1.32rem; --t-xl: 1.85rem; --t-2xl: 2.45rem; --t-3xl: 3.2rem;
  /* Espacements, formes, ombres */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --r-sm: 10px; --r: 16px; --r-lg: 24px;
  --arch: 999px 999px var(--r-sm) var(--r-sm);
  --shadow: 0 1px 2px rgba(52,36,28,.06), 0 12px 28px -18px rgba(52,36,28,.35);
  --ease: cubic-bezier(.2,.7,.2,1);
  color-scheme: light;
}

/* ---------- Base ---------- */
:root { padding-top: env(safe-area-inset-top, 0px) }
*, *::before, *::after { box-sizing: border-box }
html, body { background: var(--bg) }
body { margin: 0; color: var(--ink); font-family: var(--f-body); font-size: var(--t-md); font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility }
img { max-width: 100%; display: block }
[hidden] { display: none !important }
button, input, select, textarea { font: inherit; color: inherit }
button { cursor: pointer; border: 0; background: none; padding: 0 }
a { color: var(--accent-ink) }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px }
::selection { background: var(--beige); color: var(--brun) }

.app { max-width: 480px; margin: 0 auto; min-height: 100vh; padding-inline: var(--s4); padding-bottom: 116px; position: relative }
.app.wide { max-width: 1200px; padding-bottom: var(--s6) }
@media (min-width: 760px) { .app:not(.wide) { max-width: 760px; padding-inline: var(--s5) } }
@media (min-width: 1100px) { .app:not(.wide) { max-width: 1080px } }

h1, h2, h3 { font-family: var(--f-display); font-weight: 500; margin: 0; text-wrap: balance; letter-spacing: -.01em; line-height: 1.08 }
h1 { font-size: var(--t-2xl) }
h2 { font-size: var(--t-xl) }
h3 { font-size: var(--t-lg) }
p { margin: 0 }
.muted { color: var(--muted) }
.small { font-size: var(--t-sm) }
.num, .mono { font-variant-numeric: tabular-nums }
.mono { font-family: var(--f-mono); font-size: .92em; letter-spacing: .01em }
.eyebrow { font-size: var(--t-sm); font-weight: 600; color: var(--accent-ink) }
.stack { display: flex; flex-direction: column; gap: var(--s3) }
.row { display: flex; align-items: center; gap: var(--s3) }
.between { justify-content: space-between }
.wrap { flex-wrap: wrap }
.grow { flex: 1; min-width: 0 }
section { margin-top: var(--s7) }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4) }
.sec-head h2 { font-size: var(--t-xl) }
.link { color: var(--accent-ink); font-weight: 600; font-size: var(--t-sm); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset: 3px }
.link:hover { text-decoration-color: var(--accent) }

/* ---------- En-tête ---------- */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; margin-inline: calc(-1 * var(--s4)); padding: var(--s3) var(--s4); display: flex; align-items: center; justify-content: space-between;
  background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: saturate(1.2) blur(12px); -webkit-backdrop-filter: saturate(1.2) blur(12px); border-bottom: 1px solid transparent }
@media (min-width: 760px) { .app:not(.wide) .top { margin-inline: calc(-1 * var(--s5)); padding-inline: var(--s5) } }
.top.lined { border-bottom-color: var(--line) }
.top.on-dark { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; color: var(--on-dark); position: absolute; left: var(--s4); right: var(--s4); margin: 0; padding-inline: 0 }
.logo { display: flex; align-items: center; gap: var(--s2) }
.logo-word { font-family: var(--f-display); font-size: 1.3rem; letter-spacing: .34em; padding-left: .1em }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; position: relative; color: inherit; transition: background .2s }
.icon-btn:hover { background: color-mix(in srgb, currentColor 10%, transparent) }
.badge { position: absolute; top: 6px; right: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--blanc); font-size: .68rem; font-weight: 700; display: grid; place-items: center }
.back { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; min-height: 44px }

/* ---------- Navigation inférieure ---------- */
.nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%, 480px); z-index: 30; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 4px calc(8px + env(safe-area-inset-bottom, 0px)) }
.nav button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 0 5px; min-height: 52px; font-size: .7rem; font-weight: 600; color: var(--muted); position: relative; border-radius: 12px }
.nav button svg { transition: transform .25s var(--ease) }
.nav button.on { color: var(--ink) }
.nav button.on svg { color: var(--accent) }
.nav button.on::after { content: ""; position: absolute; top: 0; width: 22px; height: 2px; border-radius: 2px; background: var(--accent) }
.nav .nav-count { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--accent); color: var(--blanc); font-size: .65rem; font-weight: 700; display: grid; place-items: center }
@media (min-width: 760px) { .nav { width: auto; min-width: 520px; bottom: var(--s4); border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; box-shadow: var(--shadow) } .nav button { padding-inline: var(--s4) } }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 48px; padding: 0 22px; border-radius: 999px; font-weight: 600; font-size: .95rem; letter-spacing: .005em; transition: transform .15s var(--ease), background .2s, box-shadow .2s, color .2s; text-decoration: none; white-space: nowrap }
.btn:active { transform: scale(.98) }
.btn-dark { background: var(--dark); color: var(--on-dark) }
.btn-dark:hover { background: var(--dark-2) }
.btn-gold { background: var(--accent); color: var(--blanc) }
.btn-gold:hover { background: color-mix(in srgb, var(--accent) 88%, black) }
.btn-line { border: 1.5px solid currentColor; color: var(--ink) }
.btn-line:hover { background: color-mix(in srgb, currentColor 8%, transparent) }
.btn-soft { background: var(--soft); color: var(--ink) }
.btn-soft:hover { background: color-mix(in srgb, var(--beige) 55%, var(--soft)) }
.btn-sm { min-height: 38px; padding: 0 15px; font-size: .84rem }
.btn-block { width: 100% }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none }
.add { width: 40px; height: 40px; border-radius: 50%; background: var(--dark); color: var(--on-dark); display: grid; place-items: center; flex: none; transition: transform .15s var(--ease), background .2s }
.add:hover { background: var(--accent) }
.add:active { transform: scale(.92) }
.add[disabled] { background: var(--soft); color: var(--muted); cursor: not-allowed }

/* ---------- Accueil : la vitrine ---------- */
.vitrine { margin-inline: calc(-1 * var(--s4)); background: var(--dark); color: var(--on-dark); padding: 88px var(--s4) var(--s6); position: relative; overflow: hidden; border-radius: 0 0 var(--r-lg) var(--r-lg) }
.vitrine::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--cuivre) 28%, transparent), transparent 62%); pointer-events: none }
.vitrine-inner { position: relative; display: grid; gap: var(--s5) }
.arche { position: relative; width: min(78%, 330px); margin: 0 auto; aspect-ratio: 4 / 5; border-radius: 999px 999px 18px 18px; overflow: hidden; background: linear-gradient(180deg, #4A3427, #2A1C15); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--beige) 35%, transparent) }
.arche::after { content: ""; position: absolute; inset: 9px; border-radius: 999px 999px 12px 12px; border: 1px solid color-mix(in srgb, var(--beige) 55%, transparent); pointer-events: none }
.arche img { width: 100%; height: 100%; object-fit: cover }
.arche svg { position: absolute; inset: 22% 8% auto; width: 84%; height: auto; filter: drop-shadow(0 18px 18px rgba(0,0,0,.35)) }
.arche .comptoir { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(180deg, transparent, rgba(0,0,0,.35)) }
.vitrine-text { text-align: center; display: grid; gap: var(--s3); justify-items: center }
.vitrine-text .wordmark { font-family: var(--f-display); font-size: clamp(2.4rem, 11vw, 3.6rem); letter-spacing: .28em; padding-left: .28em; line-height: 1; color: var(--blanc) }
.vitrine-text .signature { font-family: var(--f-display); font-style: italic; font-size: var(--t-lg); color: var(--beige) }
.vitrine-text .greeting { font-size: var(--t-sm); color: color-mix(in srgb, var(--on-dark) 75%, transparent) }
.vitrine-actions { display: flex; gap: var(--s3); flex-wrap: wrap; justify-content: center; margin-top: var(--s2) }
.vitrine .btn-dark { background: var(--blanc); color: var(--brun) }
.vitrine .btn-dark:hover { background: var(--beige) }
.vitrine .btn-line { color: var(--blanc); border-color: color-mix(in srgb, var(--blanc) 55%, transparent) }
.status-pill { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-sm); font-weight: 600; padding: 6px 13px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line) }
.vitrine .status-pill { background: rgba(255,252,247,.08); border-color: rgba(255,252,247,.18); color: var(--on-dark) }
.dot { width: 7px; height: 7px; border-radius: 50%; background: #7DBA8B }
.dot.off { background: #E08C7D }
@media (min-width: 760px) {
  .vitrine { margin-inline: calc(-1 * var(--s5)); padding: 104px var(--s6) var(--s7) }
  .vitrine-inner { grid-template-columns: 1.1fr 1fr; align-items: center }
  .vitrine-text { text-align: left; justify-items: start; order: -1 }
  .vitrine-actions { justify-content: flex-start }
  .arche { width: 100%; max-width: 360px }
}
.pitch { margin-top: var(--s5); font-size: var(--t-md); color: var(--muted); max-width: 60ch }

/* ---------- Visuels produits ---------- */
.ph { position: relative; background: var(--soft); overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--arch); max-width: 100%; display: grid; place-items: center; isolation: isolate }
.ph img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; transition: transform .5s var(--ease) }
.ph svg { width: 82%; height: auto }
.ph.flat { border-radius: var(--r-sm); aspect-ratio: 1 }
.ph.placeholder::before { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 60% at 50% 35%, color-mix(in srgb, var(--blanc) 70%, transparent), transparent 70%); z-index: -1 }
.ph .ph-note { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font-size: .66rem; color: var(--muted); letter-spacing: .02em }
.tag { position: absolute; bottom: 10px; left: 10px; z-index: 1; font-size: .7rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--blanc) 92%, transparent); color: var(--brun); box-shadow: 0 1px 2px rgba(52,36,28,.12) }
.tag.gold { background: var(--brun); color: var(--blanc) }
.tag.out { background: var(--bad-bg); color: var(--bad); white-space: nowrap }

/* Cartes « Signatures » (défilement horizontal) */
.hscroll { display: flex; gap: var(--s4); overflow-x: auto; scroll-snap-type: x proximity; margin-inline: calc(-1 * var(--s4)); padding: 0 var(--s4) var(--s2); scrollbar-width: none }
.hscroll::-webkit-scrollbar { display: none }
.pcard { flex: 0 0 168px; display: flex; flex-direction: column; gap: var(--s2); text-align: left; scroll-snap-align: start }
.pcard .name { font-family: var(--f-display); font-size: 1.06rem; line-height: 1.2 }
.pcard .price { font-weight: 600 }
.pcard:hover .ph img { transform: scale(1.03) }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s4) }
.grid2 .pcard { flex: auto }
@media (min-width: 760px) { .grid2 { grid-template-columns: repeat(3, minmax(0, 1fr)) } .hscroll { margin-inline: 0; padding-inline: 0 } }
@media (min-width: 1100px) { .grid2 { grid-template-columns: repeat(4, minmax(0, 1fr)) } }

/* Savoir-faire */
.maison { display: grid; gap: var(--s5) }
.maison-item { display: grid; grid-template-columns: 44px 1fr; gap: var(--s3); align-items: start }
.maison-item svg { color: var(--accent) }
.maison-item h3 { font-size: 1.15rem; margin-bottom: 2px }
.maison-item p { color: var(--muted); font-size: .95rem }
@media (min-width: 760px) { .maison { grid-template-columns: repeat(3, 1fr) } }

/* Bloc fidélité de l'accueil */
.club-teaser { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); display: grid; gap: var(--s4) }
.paliers { display: flex; gap: var(--s3); flex-wrap: wrap }
.palier { flex: 1 1 120px; padding: var(--s3) var(--s4); border-radius: var(--r); background: var(--soft) }
.palier b { font-family: var(--f-display); font-weight: 400; font-size: 1.5rem; display: block; color: var(--accent-ink) }

/* Étapes Click & Collect (une vraie séquence) */
.steps { display: grid; gap: var(--s4); counter-reset: step; margin: 0; padding: 0; list-style: none }
.steps li { display: grid; grid-template-columns: 34px 1fr; gap: var(--s3); align-items: start; counter-increment: step }
.steps li::before { content: counter(step); width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--beige); display: grid; place-items: center; font-family: var(--f-display); color: var(--accent-ink) }
.steps b { display: block }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr) } }

/* Offres */
.offer { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4); display: flex; gap: var(--s4); align-items: flex-start }
.offer .seal { flex: none; width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--beige); display: grid; place-items: center; font-family: var(--f-display); color: var(--accent-ink); font-size: .95rem; text-align: center; line-height: 1.05 }
.offer h3 { font-size: 1.08rem }
.offer.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)) }

/* Boutique */
.shop { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden }
.shop .map { height: 150px; background: var(--soft) }
.shop .map svg { width: 100%; height: 100%; display: block }
.shop .body { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s4) }
.hours { display: grid; grid-template-columns: auto 1fr; gap: 4px 20px; font-size: .92rem }
.hours .today { font-weight: 700; color: var(--accent-ink) }
.legal { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--t-xs); color: var(--muted); margin-top: var(--s6) }
.legal a { color: inherit }

/* ---------- Carte (catalogue) ---------- */
.page-head { margin-top: var(--s3) }
.page-head h1 { font-size: var(--t-2xl) }
.search { display: flex; align-items: center; gap: var(--s2); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0 var(--s4); min-height: 48px; margin-top: var(--s4); transition: border-color .2s, box-shadow .2s }
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent) }
.search input { border: 0; background: transparent; outline: none; flex: 1; min-width: 0; height: 46px }
.chips { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 68px); z-index: 15; background: var(--bg); display: flex; gap: var(--s2); overflow-x: auto; margin-inline: calc(-1 * var(--s4)); padding: var(--s3) var(--s4); scrollbar-width: none }
.chips::-webkit-scrollbar { display: none }
@media (min-width: 760px) { .chips { margin-inline: 0; padding-inline: 0 } }
.chip { flex: none; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-weight: 600; font-size: .86rem; white-space: nowrap; transition: background .2s, border-color .2s, color .2s }
.chip:hover { border-color: var(--beige) }
.chip.on { background: var(--dark); color: var(--on-dark); border-color: var(--dark) }
.chip[disabled] { opacity: .45; cursor: not-allowed }
.chip .count { font-weight: 500; opacity: .65; margin-left: 4px }
.cat-title { display: flex; align-items: baseline; gap: var(--s3); margin: var(--s6) 0 var(--s4) }
.cat-title:first-child { margin-top: var(--s3) }
.cat-title h2 { font-size: var(--t-xl) }
.catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s4) }
@media (min-width: 760px) { .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) } }
@media (min-width: 1100px) { .catalog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) } }
.prow { display: flex; flex-direction: column; gap: var(--s2); text-align: left; cursor: pointer; min-width: 0; border-radius: var(--r) }
.prow:hover .ph img { transform: scale(1.03) }
.prow .meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-inline: 2px }
.prow .name { font-family: var(--f-display); font-size: 1.08rem; line-height: 1.2; overflow-wrap: anywhere }
.prow .desc { font-size: var(--t-sm); color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.prow .foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-top: 2px }
.prow .foot b { font-size: 1.02rem; font-weight: 600 }
.prow.sold-out .ph img, .prow.sold-out .ph svg { filter: grayscale(.7); opacity: .55 }
.prow.sold-out .name { color: var(--muted) }
.allg { font-size: var(--t-xs); color: var(--muted) }
.notice { font-size: var(--t-sm); color: var(--muted); border-top: 1px solid var(--line); padding-top: var(--s4); margin-top: var(--s6); display: flex; gap: var(--s2); align-items: flex-start }
.demo-note { font-size: var(--t-sm); color: var(--muted); border-top: 1px solid var(--line); padding-top: var(--s4); margin-top: var(--s6); display: flex; gap: var(--s2); align-items: flex-start }
.empty { text-align: center; padding: var(--s7) var(--s4); color: var(--muted); display: grid; gap: var(--s3); justify-items: center }
.empty h2 { color: var(--ink) }

/* Barre panier flottante */
.cartbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(80px + env(safe-area-inset-bottom, 0px)); width: min(calc(100% - 32px), 448px); z-index: 25; background: var(--dark); color: var(--on-dark); border-radius: 999px; min-height: 56px; padding: 0 8px 0 10px; display: flex; align-items: center; gap: var(--s3); box-shadow: var(--shadow); font-weight: 600; animation: rise .35s var(--ease) }
.cartbar .count { background: var(--accent); color: var(--blanc); border-radius: 999px; min-width: 34px; height: 34px; display: grid; place-items: center; font-size: .86rem }
.cartbar .go { background: var(--blanc); color: var(--brun); border-radius: 999px; padding: 9px 16px; font-size: .88rem }
@media (min-width: 760px) { .cartbar { bottom: 96px } }
@keyframes rise { from { transform: translate(-50%, 14px); opacity: 0 } to { transform: translate(-50%, 0); opacity: 1 } }

/* ---------- Fenêtres (fiche produit, panier…) ---------- */
.scrim { position: fixed; inset: 0; background: rgba(28,18,12,.5); z-index: 50; animation: fade .2s ease }
.sheet { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: min(100%, 520px); max-height: 92vh; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); border-radius: var(--r-lg) var(--r-lg) 0 0; z-index: 51; padding: 10px var(--s4) calc(var(--s5) + env(safe-area-inset-bottom, 0px)); animation: up .32s var(--ease) }
@media (min-width: 760px) { .sheet { bottom: 50%; transform: translate(-50%, 50%); border-radius: var(--r-lg); max-height: 88vh; animation: pop .25s var(--ease) } }
.grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 0 auto var(--s3) }
@keyframes up { from { transform: translate(-50%, 40px); opacity: .4 } to { transform: translate(-50%, 0); opacity: 1 } }
@keyframes pop { from { transform: translate(-50%, 52%) scale(.97); opacity: 0 } to { transform: translate(-50%, 50%) scale(1); opacity: 1 } }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
.fiche .ph { aspect-ratio: 4 / 3.4; border-radius: 999px 999px var(--r) var(--r); margin-inline: auto; width: min(100%, 420px) }
.fiche h2 { font-size: 1.85rem }
.fiche .price-big { font-size: 1.3rem; font-weight: 600 }
.fiche .desc-long { font-size: 1rem; line-height: 1.65; max-width: 60ch }
.info-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3) var(--s4); font-size: var(--t-sm); display: flex; gap: var(--s3); align-items: flex-start }
.info-box svg { flex: none; margin-top: 2px; color: var(--accent) }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--surface) }
.qty button { width: 42px; height: 42px; display: grid; place-items: center; font-size: 1.15rem; font-weight: 600; border-radius: 50% }
.qty button:hover { background: var(--soft) }
.qty span { min-width: 24px; text-align: center; font-weight: 700 }
.allg-chips { display: flex; flex-wrap: wrap; gap: 6px }
.allg-chips span { font-size: .8rem; padding: 4px 11px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); font-weight: 600 }
.line { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--s3); align-items: center; padding: var(--s3) 0; border-bottom: 1px solid var(--line) }
.line .ph { aspect-ratio: 1; border-radius: var(--r-sm) }
.totals { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: .95rem }
.totals .big { font-weight: 700; font-size: 1.15rem; padding-top: var(--s2); border-top: 1px solid var(--line) }
.disc { color: var(--ok); font-weight: 600 }

/* ---------- Click & Collect ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4) }
.step-h { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3) }
.step-n { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--beige); color: var(--accent-ink); display: grid; place-items: center; font-family: var(--f-display); flex: none }
.radio { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r-sm); text-align: left; width: 100%; background: var(--bg) }
.radio.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink) }
.radio[disabled] { opacity: .5; cursor: not-allowed }
.rdot { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--muted); flex: none; margin-top: 1px; display: grid; place-items: center }
.radio.on .rdot { border-color: var(--ink) }
.radio.on .rdot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ink) }
.slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2) }
@media (min-width: 760px) { .slots { grid-template-columns: repeat(6, minmax(0, 1fr)) } }
.slot { min-height: 52px; padding: 7px 0 6px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--bg); font-weight: 600; font-size: .9rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-variant-numeric: tabular-nums; transition: border-color .2s, background .2s }
.slot:hover:not([disabled]) { border-color: var(--beige) }
.slot small { font-size: .66rem; font-weight: 500; color: var(--muted) }
.slot.on { background: var(--dark); color: var(--on-dark); border-color: var(--dark) }
.slot.on small { color: var(--beige) }
.slot[disabled] { opacity: .45; cursor: not-allowed; background: transparent; text-decoration: line-through }
.slot.full small { color: var(--bad) }
.stripe { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-sm); background: var(--soft); font-size: var(--t-sm) }
.server-ok { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--ok) }
.err { color: var(--bad); font-weight: 600; font-size: .88rem }

/* ---------- Suivi, ticket, QR ---------- */
.qrbox { background: #fff; border-radius: var(--r); padding: 14px; width: 210px; max-width: 100%; margin: 0 auto; box-shadow: 0 0 0 1px var(--line) }
.qrbox svg { display: block; width: 100%; height: auto }
.ticket { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5) var(--s4); text-align: center; display: flex; flex-direction: column; gap: var(--s4); position: relative }
.ticket .perf { border-top: 1.5px dashed var(--line); margin: 2px calc(-1 * var(--s4)) }
.ordnum { font-family: var(--f-mono); font-size: 1.15rem; letter-spacing: .06em }
.check { width: 60px; height: 60px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); display: grid; place-items: center; margin: 0 auto; animation: popin .45s var(--ease) }
@keyframes popin { from { transform: scale(.5); opacity: 0 } to { transform: scale(1); opacity: 1 } }
.track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px }
.track i { height: 4px; border-radius: 2px; background: var(--line) }
.track i.on { background: var(--accent) }
.track-l { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; font-size: .68rem; color: var(--muted); font-weight: 600 }

/* ---------- Fidélité ---------- */
.club { background: var(--dark); color: var(--on-dark); border-radius: var(--r-lg); padding: var(--s5); position: relative; overflow: hidden; isolation: isolate; aspect-ratio: auto }
.club::before { content: ""; position: absolute; right: -96px; top: -30px; width: 230px; height: 300px; border-radius: 999px 999px 0 0; border: 1px solid color-mix(in srgb, var(--beige) 18%, transparent); z-index: -1 }
.club::after { content: ""; position: absolute; right: -30px; top: -10px; width: 170px; height: 240px; border-radius: 999px 999px 0 0; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--cuivre) 40%, transparent), transparent 70%); z-index: -1 }
.club .brand { font-family: var(--f-display); letter-spacing: .3em; font-size: 1rem; color: var(--beige) }
.club .pts { font-family: var(--f-display); font-size: 3.6rem; line-height: 1; color: var(--blanc) }
.club .muted { color: color-mix(in srgb, var(--on-dark) 70%, transparent) }
.prog { height: 6px; border-radius: 3px; background: rgba(255,252,247,.14); overflow: hidden }
.prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--cuivre), var(--beige)); border-radius: 3px; transition: width .8s var(--ease) }
.reward { display: flex; align-items: center; gap: var(--s4); padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface) }
.reward .val { font-family: var(--f-display); font-size: 1.7rem; color: var(--accent-ink); min-width: 64px }
.ledger { display: grid; grid-template-columns: 1fr auto; font-size: .92rem }
.ledger > div { padding: var(--s3) 0; border-bottom: 1px solid var(--line) }
.plus { color: var(--ok); font-weight: 700 }
.minus { color: var(--bad); font-weight: 700 }

/* ---------- Commandes ---------- */
.tabs { display: flex; gap: 4px; background: var(--soft); padding: 4px; border-radius: 999px; margin-top: var(--s4) }
.tabs button { flex: 1; min-height: 40px; padding: 0 6px; border-radius: 999px; font-weight: 600; font-size: .84rem; color: var(--muted) }
.tabs button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow) }
.ocard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3) }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap }
.p-conf { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent-ink) }
.p-prep, .p-wait { background: var(--warn-bg); color: var(--warn) }
.p-ready { background: var(--ok-bg); color: var(--ok) }
.p-done { background: var(--soft); color: var(--muted) }
.p-bad { background: var(--bad-bg); color: var(--bad) }

/* ---------- Formulaires ---------- */
label.f { display: flex; flex-direction: column; gap: 6px; font-size: var(--t-sm); font-weight: 600; color: var(--muted) }
.inp { width: 100%; min-height: 46px; padding: 10px 14px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 1rem; font-weight: 400 }
textarea.inp { min-height: 90px; resize: vertical }
.inp:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent) }
.inp:disabled { background: var(--soft); color: var(--muted) }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--line) }
.sw { width: 48px; height: 28px; border-radius: 14px; background: var(--line); position: relative; flex: none; transition: background .2s }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--blanc); box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s var(--ease) }
.sw.on { background: var(--ok) }
.sw.on::after { transform: translateX(20px) }
.list-btn { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 56px; padding: var(--s3) 0; border-bottom: 1px solid var(--line); width: 100%; text-align: left; font-weight: 600 }
.check-row { display: flex; gap: var(--s3); align-items: flex-start; font-size: var(--t-sm) }
.check-row input { margin-top: 3px; flex: none; width: 18px; height: 18px; accent-color: var(--brun) }

/* ---------- Profil ---------- */
.profile-head { display: flex; align-items: center; gap: var(--s4); margin-top: var(--s4) }
.avatar { width: 64px; height: 64px; border-radius: 999px 999px 18px 18px; background: var(--dark); color: var(--beige); display: grid; place-items: center; font-family: var(--f-display); font-size: 1.5rem; flex: none }
.shortcuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s5) }
.shortcut { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4); text-align: left; display: flex; flex-direction: column; gap: 4px; min-height: 96px; transition: border-color .2s }
.shortcut:hover { border-color: var(--beige) }
.shortcut svg { color: var(--accent) }
.shortcut b { font-weight: 600 }
.shortcut .big-n { font-family: var(--f-display); font-size: 1.6rem; line-height: 1 }

/* ---------- Notifications ---------- */
.notif { display: flex; gap: var(--s3); padding: var(--s4) 0; border-bottom: 1px solid var(--line) }
.notif .ic { width: 38px; height: 38px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; flex: none; color: var(--accent-ink) }
.notif.unread .t { font-weight: 700 }

/* ---------- Connexion ---------- */
.login { max-width: 400px; margin: var(--s6) auto 0; display: flex; flex-direction: column; gap: var(--s4) }
.login h1 { font-size: var(--t-2xl) }
.login .code { text-align: center; letter-spacing: .5em; font-family: var(--f-mono); font-size: 1.5rem }

/* ---------- États ---------- */
.boot { min-height: 72vh; display: grid; place-items: center; text-align: center }
.boot .logo-word { font-size: 1.6rem }
.toast { position: fixed; left: 50%; top: calc(14px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); z-index: 80; background: var(--dark); color: var(--on-dark); padding: 12px 20px; border-radius: 999px; font-weight: 600; font-size: .9rem; box-shadow: var(--shadow); animation: drop .3s var(--ease); max-width: calc(100% - 32px); text-align: center }
@keyframes drop { from { transform: translate(-50%, -14px); opacity: 0 } to { transform: translate(-50%, 0); opacity: 1 } }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid var(--line); border-top-color: var(--accent); animation: spin .9s linear infinite; margin: 0 auto }
@keyframes spin { to { transform: rotate(360deg) } }
.skeleton { background: linear-gradient(90deg, var(--soft), var(--line), var(--soft)); background-size: 200% 100%; animation: sk 1.3s linear infinite; border-radius: var(--r-sm); min-height: 48px }
@keyframes sk { to { background-position: -200% 0 } }
.waiting { display: flex; flex-direction: column; align-items: center; gap: var(--s3); padding: var(--s6) 0; text-align: center }
.preview-band { position: relative; margin-inline: calc(-1 * var(--s4)); padding: 8px var(--s4); background: var(--warn-bg); color: var(--warn); font-size: .78rem; font-weight: 600; text-align: center }
.install { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(84px + env(safe-area-inset-bottom, 0px)); width: min(calc(100% - 32px), 448px); z-index: 24; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3) var(--s4); display: flex; align-items: center; gap: var(--s3); box-shadow: var(--shadow) }
.install img { width: 42px; height: 42px; border-radius: 12px; flex: none }
.scan-res { margin-top: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--bg) }
.scan-res.ok { border-color: var(--ok); background: var(--ok-bg) }
.scan-res.ko { border-color: var(--bad); background: var(--bad-bg) }
.video-scan { width: 100%; max-width: 360px; border-radius: var(--r); background: #000; aspect-ratio: 4/3; object-fit: cover }
.grid-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px }
.status-dot { width: 8px; height: 8px; border-radius: 50% }

/* ---------- Espace TAMASINI (administration) ---------- */
.adm-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; padding-block: var(--s5) var(--s2) }
.adm-top h1 { font-size: var(--t-xl) }
.adm-tabs { display: flex; gap: 4px; overflow-x: auto; padding: var(--s3) 0; scrollbar-width: none; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg); z-index: 10 }
.adm-tabs::-webkit-scrollbar { display: none }
.adm-tabs button { flex: none; min-height: 40px; padding: 0 15px; border-radius: 999px; font-weight: 600; font-size: .88rem; color: var(--muted) }
.adm-tabs button:hover { color: var(--ink); background: var(--soft) }
.adm-tabs button.on { background: var(--dark); color: var(--on-dark) }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s4) }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4) }
.kpi b { display: block; font-family: var(--f-display); font-size: 1.85rem; font-weight: 400; line-height: 1.1; margin-top: 4px; font-variant-numeric: tabular-nums }
.kpi.hot { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)) }
.kanban { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s4) }
.kcol { background: var(--soft); border-radius: var(--r); padding: var(--s3); display: flex; flex-direction: column; gap: var(--s3); min-width: 0 }
.kcol h3 { font-family: var(--f-body); font-weight: 700; font-size: .92rem; display: flex; justify-content: space-between }
.kcard { background: var(--surface); border-radius: var(--r-sm); padding: var(--s3); display: flex; flex-direction: column; gap: var(--s2); border-left: 4px solid var(--accent); box-shadow: 0 1px 2px rgba(52,36,28,.06) }
.kcard.ready { border-left-color: var(--ok) }
.kcard.done { border-left-color: var(--line); opacity: .8 }
.kcard ul { margin: 0; padding-left: 18px; font-size: .9rem }
.tbl-wrap { overflow-x: auto; margin-top: var(--s4); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface) }
table { border-collapse: collapse; width: 100%; font-size: .9rem }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle }
th { font-size: .78rem; color: var(--muted); font-weight: 600; background: var(--bg); position: sticky; top: 0 }
tr:last-child td { border-bottom: 0 }
td .inp { min-height: 38px; padding: 6px 10px; font-size: .9rem }
.bars { display: flex; flex-direction: column; gap: var(--s2) }
.bar { display: grid; grid-template-columns: 150px 1fr 70px; gap: var(--s3); align-items: center; font-size: .88rem }
.bar .track2 { height: 12px; background: var(--soft); border-radius: 6px; overflow: hidden }
.bar .track2 i { display: block; height: 100%; background: var(--accent); border-radius: 6px }
.cols { display: flex; align-items: flex-end; gap: 10px; height: 170px; padding-top: 10px }
.cols div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; font-size: .72rem; color: var(--muted); font-weight: 600; min-width: 0 }
.cols i { display: block; width: 100%; max-width: 46px; background: var(--brun); border-radius: 6px 6px 2px 2px }
.cols div:last-child i { background: var(--accent) }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4) }
.hours-row { display: grid; grid-template-columns: 92px 1fr 1fr auto; gap: var(--s2); align-items: center }
.pin { max-width: 360px; margin: 72px auto; text-align: center; display: flex; flex-direction: column; gap: var(--s4) }
.adm-filter { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; margin-top: var(--s4) }
.adm-filter .inp { width: auto; flex: 1 1 200px }
@media (max-width: 860px) {
  .kanban, .two { grid-template-columns: 1fr }
  .kpis { grid-template-columns: 1fr 1fr }
  .bar { grid-template-columns: 110px 1fr 60px }
}

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

/* =====================================================================
   PREMIUM 2.0 — compléments (Cormorant Garamond + Jost)
   Un seul moment spectaculaire : la grande photo d'accueil sous l'arche.
   ===================================================================== */
:root { --gold-line: color-mix(in srgb, var(--beige) 70%, transparent) }
.page-title { font-size: var(--t-2xl); margin-top: var(--s4) }
.sec-head h2 { font-size: 2rem }
.sec-sub { color: var(--muted); font-size: .95rem; margin-top: 4px }
h3 { font-size: 1.35rem }

/* En-tête : monogramme */
.logo { color: inherit }
.monogram { width: 34px; height: 40px; border-radius: 999px 999px 6px 6px; border: 1px solid currentColor; display: grid; place-items: center; font-family: var(--f-display); font-size: 1.2rem; font-weight: 500; line-height: 1; padding-top: 4px; opacity: .9 }
.top:not(.on-dark) .monogram { color: var(--accent-ink) }
.logo-word { font-family: var(--f-display); font-weight: 500; font-size: 1.25rem; letter-spacing: .38em }
.top.on-dark .btn-line { color: var(--blanc); border-color: color-mix(in srgb, var(--blanc) 50%, transparent) }

/* Accueil : grande photo immersive sous l'arche */
.hero { position: relative; margin-inline: calc(-1 * var(--s4)); min-height: 600px; display: flex; align-items: flex-end; color: var(--blanc); background: var(--dark); overflow: hidden; border-radius: 0 0 28px 28px; isolation: isolate }
@media (min-width: 760px) { .hero { margin-inline: calc(-1 * var(--s5)); min-height: 620px; align-items: center } }
.hero-visual { position: absolute; inset: 0; z-index: -2 }
.hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; animation: heroZoom 9s var(--ease) both }
.hero-art { position: absolute; inset: 0; display: grid; place-items: center; padding: 70px 18% 46%; background: radial-gradient(110% 70% at 50% 25%, #5A3E2D, #2A1C15 70%) }
.hero-art svg { width: 100%; max-width: 360px; filter: drop-shadow(0 26px 22px rgba(0,0,0,.4)) }
@media (min-width: 760px) { .hero-art { padding: 60px 6% 60px 52% } }
.hero-veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(28,18,12,.55) 0%, rgba(28,18,12,0) 26%, rgba(28,18,12,.15) 48%, rgba(28,18,12,.88) 100%) }
@media (min-width: 760px) { .hero-veil { background: linear-gradient(90deg, rgba(28,18,12,.9) 0%, rgba(28,18,12,.6) 42%, rgba(28,18,12,0) 75%) } }
.hero-arch { position: absolute; z-index: -1; left: 50%; top: 84px; transform: translateX(-50%); width: min(72%, 300px); aspect-ratio: 3 / 4.2; border: 1px solid var(--gold-line); border-radius: 999px 999px 0 0; pointer-events: none }
.hero.has-photo .hero-arch { opacity: .55 }
@media (min-width: 760px) { .hero-arch { left: auto; right: 9%; transform: none; width: 320px; top: 70px } }
.hero-text { position: relative; padding: 0 var(--s5) var(--s6); display: grid; gap: var(--s3); max-width: 560px; animation: heroIn .9s var(--ease) .1s both }
@media (min-width: 760px) { .hero-text { padding: 0 var(--s7) } }
.hero-kicker { font-size: .92rem; letter-spacing: .02em; color: var(--beige) }
.hero h1 { font-size: clamp(2.9rem, 13vw, 4.6rem); font-weight: 500; line-height: .98; letter-spacing: -.015em; color: var(--blanc) }
.hero-sub { color: color-mix(in srgb, var(--blanc) 82%, transparent); max-width: 40ch }
.hero .status-pill { justify-self: start; background: rgba(255,252,247,.1); border-color: rgba(255,252,247,.22); color: var(--blanc) }
.hero-actions { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s2) }
.hero-more { justify-self: start; color: var(--beige); font-size: .9rem; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--gold-line); min-height: 44px }
@keyframes heroIn { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } }
@keyframes heroZoom { from { transform: scale(1.06) } to { transform: scale(1) } }
.btn-light { background: var(--blanc); color: var(--brun) }
.btn-light:hover { background: var(--beige) }
.btn-ghost { color: var(--blanc); border: 1px solid color-mix(in srgb, var(--blanc) 45%, transparent); background: rgba(255,252,247,.06); backdrop-filter: blur(6px) }
.btn-ghost:hover { background: rgba(255,252,247,.14) }
.btn { font-weight: 500; letter-spacing: .02em }

/* Signatures : grandes cartes */
.signatures .pcard { flex-basis: 64%; max-width: 270px }
@media (min-width: 760px) { .signatures .pcard { flex-basis: 230px } }
.pcard .name { font-size: 1.3rem; font-weight: 500 }

/* Nos univers */
.univers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) }
@media (min-width: 760px) { .univers { grid-template-columns: repeat(5, minmax(0, 1fr)) } }
.univers-tile { position: relative; text-align: left; display: grid; gap: 2px }
.univers-tile:first-child { grid-column: span 2 }
@media (min-width: 760px) { .univers-tile:first-child { grid-column: auto } }
.univers-tile .ph.tile { aspect-ratio: 4 / 3; border-radius: var(--r) }
.univers-tile:first-child .ph.tile { aspect-ratio: 16 / 9 }
@media (min-width: 760px) { .univers-tile .ph.tile, .univers-tile:first-child .ph.tile { aspect-ratio: 3 / 4; border-radius: var(--arch) } }
.univers-name { font-family: var(--f-display); font-size: 1.35rem; font-weight: 500; margin-top: 6px }
.univers-n { font-size: var(--t-xs); color: var(--muted) }
.univers-tile:hover .ph img { transform: scale(1.04) }

/* La maison */
.maison-wrap { border-top: 1px solid var(--line); padding-top: var(--s6) }
.maison-item h3 { font-size: 1.4rem }

/* Club sur l'accueil */
.club-home { display: grid; gap: var(--s5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); overflow: hidden }
@media (min-width: 760px) { .club-home { grid-template-columns: 1.2fr 1fr; align-items: center; padding: var(--s6) } }
.club-home-text { display: grid; gap: var(--s4) }
.club-home-text h2 { font-size: 2.1rem; letter-spacing: .04em }
.ladder { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line) }
.ladder li { display: flex; justify-content: space-between; gap: var(--s3); padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .95rem }
.ladder b { font-weight: 500; color: var(--accent-ink) }

/* Carte TAMASINI CLUB : chocolat et cuivre */
.club-card { position: relative; overflow: hidden; isolation: isolate; border-radius: 22px; padding: 22px 22px 18px; color: var(--blanc); aspect-ratio: 1.586; display: grid; grid-template-rows: auto 1fr auto auto auto; gap: 4px;
  background: radial-gradient(120% 90% at 100% 0%, #7A4E33 0%, rgba(122,78,51,0) 55%), linear-gradient(150deg, #3E2A20 0%, #2A1B14 60%, #23160F 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 0 0 1px rgba(220,195,160,.25) inset, 0 24px 40px -22px rgba(52,36,28,.7) }
.club-card::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .16; background: repeating-radial-gradient(circle at 110% -10%, transparent 0 9px, rgba(220,195,160,.9) 9px 10px) }
.club-card::after { content: ""; position: absolute; inset: 7px; border-radius: 16px; border: 1px solid rgba(220,195,160,.22); pointer-events: none }
.club-card.club { aspect-ratio: auto; min-height: 220px; margin-top: var(--s4) }
@media (min-width: 480px) { .club-card.club { aspect-ratio: 1.586; max-width: 440px } }
.cc-top { display: flex; justify-content: space-between; align-items: center }
.cc-brand { font-family: var(--f-display); font-weight: 500; letter-spacing: .3em; font-size: .95rem; background: linear-gradient(90deg, #E8CFA6, #B98058 60%, #E8CFA6); -webkit-background-clip: text; background-clip: text; color: transparent }
.cc-seal { width: 30px; height: 36px; border-radius: 999px 999px 5px 5px; border: 1px solid rgba(220,195,160,.6); color: var(--beige); display: grid; place-items: center; font-family: var(--f-display); font-size: 1.05rem; padding-top: 3px }
.cc-name { align-self: end; font-family: var(--f-display); font-style: italic; font-size: 1.5rem; color: var(--beige) }
.cc-points { font-size: .95rem; color: rgba(255,252,247,.75) }
.cc-points .num, .club-card .pts { font-family: var(--f-display); font-weight: 500; font-size: 3.2rem; line-height: 1; color: var(--blanc); margin-right: 4px }
.club-card .prog { margin-top: 8px }
.cc-next { font-size: .84rem; color: rgba(255,252,247,.72); margin-top: 6px }
.cc-next b { color: var(--blanc); font-weight: 500 }
.cc-foot { display: flex; justify-content: space-between; gap: var(--s3); font-size: .74rem; color: rgba(255,252,247,.6); margin-top: 10px }
.club-card.mini { max-width: 340px; width: 100%; justify-self: center; transform: rotate(-3deg) }
.club-card.mini .cc-points .num { font-size: 2.4rem }

/* Catalogue : filtres et favoris */
.filters { display: flex; gap: var(--s2); flex-wrap: wrap; margin: 0 0 var(--s2) }
.filter { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; font-size: .84rem; color: var(--muted); border: 1px dashed var(--beige) }
.filter.on { color: var(--accent-ink); border-style: solid; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)) }
.prow { position: relative }
.fav-btn { position: absolute; top: 8px; right: 8px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--blanc) 88%, transparent); color: var(--accent-ink); box-shadow: 0 1px 3px rgba(52,36,28,.15); transition: transform .15s var(--ease) }
.fav-btn:active { transform: scale(.88) }
.fav-btn svg { width: 18px; height: 18px }
.prow .name { font-size: 1.28rem; font-weight: 500 }
.prow .foot b { font-size: 1.05rem; font-weight: 500 }
.chip { font-weight: 500 }

/* Fiche produit : grande photo */
.fiche .ph { width: calc(100% + 2 * var(--s4)); max-width: none; margin-inline: calc(-1 * var(--s4)); margin-top: -10px; aspect-ratio: 1 / 1; border-radius: 0 0 999px 999px / 0 0 60px 60px }
@media (min-width: 760px) { .fiche .ph { aspect-ratio: 4 / 3 } }
.fiche h2 { font-size: 2.3rem }
.sheet .grab { position: relative; z-index: 2 }

/* Parcours de commande : étapes */
.progress { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; counter-reset: p }
.progress li { counter-increment: p; display: grid; gap: 6px; font-size: .74rem; color: var(--muted) }
.progress li::before { content: ""; height: 3px; border-radius: 2px; background: var(--line) }
.progress li.done::before { background: var(--accent) }
.progress li.on::before { background: linear-gradient(90deg, var(--accent) 50%, var(--line) 50%) }
.progress li.on, .progress li.done { color: var(--ink); font-weight: 500 }

/* Suivi de commande : frise */
.timeline { list-style: none; margin: 0; padding: 0; text-align: left; display: grid; gap: 0 }
.timeline li { position: relative; padding: 0 0 18px 30px; display: flex; justify-content: space-between; gap: var(--s3); color: var(--muted) }
.timeline li::before { content: ""; position: absolute; left: 0; top: 3px; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--beige); background: var(--surface) }
.timeline li::after { content: ""; position: absolute; left: 7px; top: 19px; bottom: 0; width: 1px; background: var(--line) }
.timeline li:last-child::after { display: none }
.timeline li.done { color: var(--ink) }
.timeline li.done::before { background: var(--accent); border-color: var(--accent) }
.timeline b { font-weight: 500 }

/* Connexion : code à 6 chiffres en cases */
.login .code { --cell: 3ch; font-size: 1.6rem; letter-spacing: calc(var(--cell) - 1ch); padding-left: calc((var(--cell) - 1ch) / 2); text-align: left; width: calc(6 * var(--cell) + 2px); max-width: 100%; margin-inline: auto; display: block; border: 0;
  background: repeating-linear-gradient(90deg, var(--surface) 0 calc(var(--cell) - 6px), transparent calc(var(--cell) - 6px) var(--cell)); box-shadow: none; font-family: var(--f-mono); height: 56px }
.login .code:focus { box-shadow: none; outline: 2px solid var(--accent); outline-offset: 4px }
.login h1 { font-size: 2.6rem }

/* Administration : photos plus grandes */
.tbl-wrap .ph.flat { width: 64px !important; border-radius: 999px 999px 8px 8px }
.adm-top h1 { font-size: 1.9rem }
.kpi b { font-weight: 500; font-size: 2.2rem }

/* Révélation unique au chargement de l'accueil */
.reveal { animation: heroIn .8s var(--ease) .35s both }
.club-card::before { width: auto; height: auto; right: 0; top: 0; border: 0; border-radius: 0 }
.club-card::after { width: auto; height: auto; right: 7px; top: 7px; background: none }
/* Retouches après revue des captures */
.top.on-dark { top: auto }
.sec-head > .link { white-space: nowrap; flex: none }
@media (max-width: 759px) {
  .hero { min-height: 0; flex-direction: column; align-items: stretch; padding-top: 330px }
  .hero-art { inset: 0 0 auto 0; height: 360px; padding: 86px 20% 40px }
  .hero-arch { width: 210px; aspect-ratio: auto; height: 250px; top: 78px }
  .hero.has-photo { padding-top: 400px }
  .hero.has-photo .hero-visual { bottom: auto; height: 470px }
  .hero-veil { background: linear-gradient(180deg, rgba(28,18,12,.5) 0%, rgba(28,18,12,0) 22%, rgba(28,18,12,0) 40%, rgba(28,18,12,.92) 62%, #2A1C15 100%) }
  .hero-text { padding-top: var(--s2) }
}
.login .code { width: calc(6 * var(--cell) + (var(--cell) - 1ch) / 2 + 4px); padding-right: 0; overflow: hidden }
.login .code { background-size: calc(6 * var(--cell) - 6px) 100%; background-repeat: no-repeat; background-position: 0 0 }
@media (max-width: 759px) { .hero-art { background: radial-gradient(70% 62% at 50% 50%, #5A3E2D, rgba(42,28,21,0) 75%) } }

/* =====================================================================
   IDENTITÉ OFFICIELLE — logo TAMASINI « la boulangerie »
   Référence : losange doré + T noir, TAMASINI en noir, LA BOULANGERIE en doré.
   Le logo complet est toujours posé sur fond clair (le texte noir y reste lisible).
   Le doré du logo remplace le cuivre ; le losange arrondi remplace l'arche.
   ===================================================================== */
:root {
  --or: #C9AC6F;            /* doré moyen relevé sur le logo */
  --or-clair: #EACF8B;      /* reflet clair du losange */
  --or-fonce: #977D38;      /* ombre du losange */
  --or-texte: #7E6124;      /* doré lisible pour du texte sur ivoire (≥ 5:1) */
  --noir: #0B0907;          /* noir du logo */
  --accent: var(--or);
  --accent-ink: var(--or-texte);
  --gold-line: color-mix(in srgb, var(--or) 70%, transparent);
  --arch: 18px;             /* cadres photo : coins arrondis comme le losange */
  --line: #E6DCCB;
}
/* Logo dans l'en-tête */
.top { background: color-mix(in srgb, var(--bg) 94%, transparent) }
.top .logo { display: flex; align-items: center; min-height: 48px }
.brand-logo { height: 38px; width: auto; display: block }
@media (min-width: 760px) { .brand-logo { height: 46px } }
.logo-mini { position: absolute; left: 50%; transform: translateX(-50%); display: grid; place-items: center; width: 44px; height: 44px }
.top.lined { position: sticky }
.logo-mini .brand-symbol { width: 30px; height: 30px }
.monogram { display: none }

/* Accueil : photo immersive + losange doré officiel */
.hero { border-radius: 0 0 28px 28px; margin-top: 2px }
.hero-arch { display: none }
.hero-diamond { position: absolute; z-index: -1; left: 50%; top: 92px; width: 230px; height: 230px; transform: translateX(-50%) rotate(45deg); border: 1px solid var(--gold-line); border-radius: 26px; pointer-events: none }
.hero-diamond::after { content: ""; position: absolute; inset: 14px; border: 1px solid color-mix(in srgb, var(--or) 30%, transparent); border-radius: 18px }
.hero.has-photo .hero-diamond { opacity: .5 }
@media (min-width: 760px) { .hero-diamond { left: auto; right: 12%; top: 50%; width: 300px; height: 300px; transform: translateY(-50%) rotate(45deg) } }
@media (max-width: 759px) { .hero { padding-top: 360px } .hero-art { height: 380px; padding: 70px 22% 60px } }
.hero-symbol { width: 54px; height: 54px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)) }
.hero-kicker { color: var(--or-clair) }
.hero .btn-light { background: linear-gradient(135deg, var(--or-clair), var(--or) 55%, var(--or-fonce)); color: var(--noir); font-weight: 500 }
.hero .btn-light:hover { filter: brightness(1.05) }
.hero-more { color: var(--or-clair) }

/* Boutons et détails dorés */
.btn-gold { background: linear-gradient(135deg, var(--or-clair), var(--or) 55%, var(--or-fonce)); color: var(--noir) }
.nav button.on svg { color: var(--or-texte) }
.nav button.on::after { background: var(--or) }
.badge, .nav .nav-count, .cartbar .count { background: var(--or); color: var(--noir) }
.add:hover { background: var(--or-fonce) }
.filter.on { color: var(--or-texte); border-color: var(--or); background: color-mix(in srgb, var(--or) 12%, var(--surface)) }
.progress li.done::before { background: var(--or) }
.progress li.on::before { background: linear-gradient(90deg, var(--or) 50%, var(--line) 50%) }
.timeline li.done::before { background: var(--or); border-color: var(--or) }
.prog i { background: linear-gradient(90deg, var(--or-fonce), var(--or-clair)) }
.steps li::before, .step-n { border-color: var(--or); color: var(--or-texte) }
.p-conf { background: color-mix(in srgb, var(--or) 18%, var(--surface)); color: var(--or-texte) }
.ladder b, .palier b, .reward .val, .offer .seal, .hours .today { color: var(--or-texte) }
.offer .seal, .univers-tile .ph.tile { border-color: var(--or) }
.offer.on { border-color: var(--or); background: color-mix(in srgb, var(--or) 9%, var(--surface)) }
.tag.gold { background: var(--noir); color: var(--or-clair) }
.univers-tile .ph.tile, .univers-tile:first-child .ph.tile { border-radius: var(--r) }
@media (min-width: 760px) { .univers-tile .ph.tile, .univers-tile:first-child .ph.tile { border-radius: var(--r) } }
.fiche .ph { border-radius: 0 0 var(--r-lg) var(--r-lg) }
.tbl-wrap .ph.flat { border-radius: 10px }

/* Carte TAMASINI CLUB : noir chocolat et or du logo */
.club-card { background: radial-gradient(120% 90% at 100% 0%, rgba(201,172,111,.28) 0%, rgba(201,172,111,0) 55%), linear-gradient(150deg, #3A2A20 0%, #1F1510 70%, #140D09 100%);
  box-shadow: 0 0 0 1px rgba(201,172,111,.35) inset, 0 24px 40px -22px rgba(20,13,9,.75) }
.club-card::before { background: repeating-radial-gradient(circle at 110% -10%, transparent 0 9px, rgba(234,207,139,.9) 9px 10px) }
.club-card::after { border-color: rgba(201,172,111,.3) }
.cc-brand { background: linear-gradient(90deg, var(--or-clair), var(--or) 50%, var(--or-clair)); -webkit-background-clip: text; background-clip: text; color: transparent }
.cc-seal { border: 0; width: 40px; height: 40px; padding: 0 }
.cc-symbol { width: 40px; height: 40px }
.cc-name { color: var(--or-clair) }

/* Connexion, profil, administration */
.login-brand { display: grid; place-items: center; padding: var(--s4) 0 var(--s5); border-bottom: 1px solid var(--line); margin-bottom: var(--s2) }
.login-logo { width: min(260px, 72vw); height: auto }
.login .code:focus { outline-color: var(--or) }
.avatar { position: relative; border-radius: 18px; background: var(--noir); color: var(--or-clair) }
.avatar-symbol { position: absolute; right: -8px; bottom: -8px; width: 26px; height: 26px }
.adm-logo { height: 42px; width: auto }
.adm-tabs button.on { background: var(--noir); color: var(--or-clair) }
.kpi.hot { border-color: var(--or); background: color-mix(in srgb, var(--or) 10%, var(--surface)) }
.kcard { border-left-color: var(--or) }
.pin .login-logo { margin-bottom: var(--s3) }
.boot img { margin: 0 auto }

/* ---------- Connexion par SMS ---------- */
.login-alt { border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; background: var(--surface); display: flex; flex-direction: column; gap: 10px; align-items: flex-start }
.login-alt p { margin: 0 }
.login .row.between { gap: 12px; flex-wrap: wrap }
.link:disabled { color: var(--muted); text-decoration: none; cursor: default }
.preview-band.env-test { background: #E9F0E4; color: #2F4A23 }
[aria-busy="true"] { opacity: .55; pointer-events: none }