/* misc.css — category tiles, generic section, footer, cart FAB, loading
   overlay (split from storefront.css, move-only). */

/* category tiles */
.grid--cats { grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); }
.cat-tile { position:relative; border-radius:var(--radius-lg); overflow:hidden;
  aspect-ratio:4/3; background:var(--kraft); box-shadow:var(--shadow);
  transition:transform .15s, box-shadow .15s; }
.cat-tile:hover { transform:translateY(-3px); box-shadow:0 12px 26px rgba(0,0,0,.16); }
.cat-tile img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.cat-tile:hover img { transform:scale(1.05); }
.cat-tile__label { position:absolute; inset:auto 0 0 0; padding:.9rem 1rem;
  background:linear-gradient(transparent, rgba(0,0,0,.68)); color:#fff;
  font-family:var(--font-head); font-weight:700;
  display:flex; flex-direction:column; align-items:flex-start; gap:.45rem; }
.cat-tile__name { display:inline-flex; align-items:center; gap:.5rem; }
.cat-tile__cta { font-size:.72rem; font-weight:700; white-space:nowrap;
  background:rgba(255,255,255,.94); color:var(--green);
  padding:.22rem .6rem; border-radius:999px; }
.cat-tile__label svg { width:22px; height:22px; fill:#fff; }

/* generic section */
.section { padding:2.5rem 0; }
.section--kraft { background:var(--kraft); }
.section h2 { font-size:clamp(1.4rem,3vw,2rem); }
.steps { display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); }
.step { text-align:center; }
.step svg { width:56px; height:56px; fill:var(--green); }

/* footer */
.site-footer { background:var(--ink); color:#e9e4da; margin-top:3rem; }
.site-footer .wrap { padding-top:2.5rem; padding-bottom:2.5rem; display:grid; gap:var(--gap);
  grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); }
.site-footer a:hover { color:var(--green-2); }

/* owner-edited rich text (/gerer/accueil/ -> home.html). The allow-list in
   apps/core/richtext.py is exactly p, br, strong, em, u, a, ul, ol, li, h2,
   h3, so these are all the elements that can ever land inside .rich. The
   first/last-child margin reset keeps a paragraph-wrapped block flush with
   the surrounding layout, which used to rely on a bare <p>. */
.rich > :first-child { margin-top:0; }
.rich > :last-child { margin-bottom:0; }
.rich ul, .rich ol { margin:0 0 1rem; padding-left:1.3rem; }
.rich li { margin-bottom:.3rem; }
.rich a { color:var(--green); text-decoration:underline; }
/* the login card's own link styling (flows.css) predates .rich and has equal
   specificity, so restate it here rather than let cascade order silently
   underline « Créer un compte » */
.brand-card__alt.rich a { text-decoration:none; }
.rich h2, .rich h3 { margin:1.2rem 0 .5rem; }
.home-lead { color:var(--muted); margin:-.25rem auto 1.5rem; max-width:520px; }

/* about badges */
.about-badges { display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; padding:0;
  margin:0 0 1.25rem; }
.about-badges li { background:var(--green-tint); color:#3f7a12; font-family:var(--font-head);
  font-weight:700; font-size:.85rem; padding:.35rem .8rem; border-radius:999px; }

/* home login card inputs */
#connexion input { width:100%; padding:.7rem .85rem; border:1px solid var(--line);
  border-radius:12px; font-family:var(--font-body); font-size:1rem; }

/* floating cart bubble */
.cart-fab { position:fixed; right:1.1rem; bottom:1.1rem; z-index:50; width:60px; height:60px;
  border-radius:999px; background:var(--green); color:#fff; display:flex; align-items:center;
  justify-content:center; box-shadow:0 10px 28px rgba(43,43,40,.3); transition:transform .15s; }
.cart-fab:hover { transform:translateY(-2px); }
.cart-fab svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:2; }
.cart-fab__count { position:absolute; top:-4px; right:-4px; min-width:22px; height:22px;
  padding:0 6px; border-radius:999px; background:var(--action); color:#fff; font-size:12px;
  font-weight:700; display:inline-flex; align-items:center; justify-content:center; }

/* home category tiles: centered auto-fit on desktop, 2-up on mobile */
.grid--cats-home { grid-template-columns:repeat(auto-fit, minmax(160px, 200px));
  justify-content:center; }
@media (max-width:640px) {
  .grid--cats-home { grid-template-columns:repeat(2, 1fr); }
}

/* --- Loading overlay: logo centred, dotted brand ring, one orbiting dot --- */
.loading-screen { position:fixed; inset:0; z-index:1000; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1.2rem; background:rgba(250,247,242,.94); }
.loading-screen[hidden] { display:none; }
.loading-screen__ring { position:relative; width:150px; height:150px; }
.loading-screen__ring > span:not(.loading-screen__orbit) { position:absolute; top:50%; left:50%;
  width:12px; height:12px; margin:-6px; border-radius:50%;
  transform:rotate(calc(var(--i) * 30deg)) translateY(-66px); }
.loading-screen__ring > span:nth-child(odd):not(.loading-screen__orbit)  { background:var(--green); }
.loading-screen__ring > span:nth-child(even):not(.loading-screen__orbit) { background:var(--action); }
.loading-screen__ring > span:nth-child(1)  { --i:0; }  .loading-screen__ring > span:nth-child(2)  { --i:1; }
.loading-screen__ring > span:nth-child(3)  { --i:2; }  .loading-screen__ring > span:nth-child(4)  { --i:3; }
.loading-screen__ring > span:nth-child(5)  { --i:4; }  .loading-screen__ring > span:nth-child(6)  { --i:5; }
.loading-screen__ring > span:nth-child(7)  { --i:6; }  .loading-screen__ring > span:nth-child(8)  { --i:7; }
.loading-screen__ring > span:nth-child(9)  { --i:8; }  .loading-screen__ring > span:nth-child(10) { --i:9; }
.loading-screen__ring > span:nth-child(11) { --i:10; } .loading-screen__ring > span:nth-child(12) { --i:11; }
.loading-screen__orbit { position:absolute; inset:0; animation:ok-orbit 1.6s linear infinite; }
.loading-screen__orbit i { position:absolute; top:50%; left:50%; width:16px; height:16px; margin:-8px;
  border-radius:50%; background:var(--green); transform:translateY(-66px);
  box-shadow:0 0 0 4px rgba(107,182,47,.15); }
.loading-screen__logo { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:76px; height:auto; }
.loading-screen__text { font-family:var(--font-head); font-weight:700; color:var(--ink); margin:0; }
@keyframes ok-orbit { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .loading-screen__orbit { animation:none; } }

/* Réseaux sociaux (propriétaire, 2026-07-27). Cibles de 44px, comme partout
   ailleurs sur le site : ces icônes se touchent au pouce, en bas de page. */
.socials { display: flex; gap: .5rem; list-style: none; padding: 0; margin: .75rem 0 .5rem; }
.socials__link { display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25); color: inherit; }
.socials__link svg { width: 20px; height: 20px; fill: none;
  stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.socials__link:hover, .socials__link:focus-visible { background: rgba(255, 255, 255, .12); }