/* ==========================================================================
   ATOMES — plus petits éléments d'interface, autonomes et réutilisables.
   Rendus côté JS par scripts/ui/atoms.js.
   ========================================================================== */

/* --- Utilitaires -------------------------------------------------------- */
/* Remet un bouton (ou tout élément cliquable) à zéro : les composants partent de là. */
.btn-reset{all:unset;cursor:pointer}
/* Rangée horizontale défilante sans barre visible. */
.hscroll{display:flex;overflow-x:auto;scrollbar-width:none}
.spacer-8{height:8px}.spacer-10{height:10px}.spacer-12{height:12px}
.spacer-14{height:14px}.spacer-16{height:16px}.spacer-18{height:18px}
.ta-center{text-align:center}

/* Anneau de focus clavier, unique pour toute l'appli.
   Un composant ajuste via --ring-color / --ring-offset. */
.ring:focus-visible{outline:2px solid var(--ring-color,var(--blue));outline-offset:var(--ring-offset,0px)}

/* Décor : cercle translucide dans le coin haut droit d'une carte colorée. */
.orb{position:relative;overflow:hidden}
.orb::after{content:"";position:absolute;border-radius:50%;width:var(--orb-size);height:var(--orb-size);
  right:var(--orb-offset);top:var(--orb-offset);background:rgba(255,255,255,var(--orb-alpha))}

/* --- Texte -------------------------------------------------------------- */
.text-sub{color:var(--muted);font-size:14px;margin:0}
.text-count{font-size:12px;color:var(--muted)}
.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.eyebrow--muted{color:var(--muted);font-weight:400}
.eyebrow--season{color:var(--season-ink)}
.eyebrow--leaf{color:var(--leaf)}
.note{font-size:11px;color:var(--muted);background:var(--soft);border-radius:var(--r-xs);padding:6px 10px}
.star{color:var(--yellow)}

/* --- Icône (glyphes : styles/vendor/uicons.css) ------------------------- */
/* Glyphes absents du sous-ensemble de police : dessinés en masque, ils suivent la couleur du texte. */
.fi-settings:before{content:"";display:block;width:1em;height:1em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E") center/contain no-repeat}
.fi--lg{font-size:22px}
.fi--muted{color:var(--muted)}
.fi--orange{color:var(--orange)}
.fi--gold{color:var(--gold)}

/* --- Boutons ------------------------------------------------------------ */
.btn{box-sizing:border-box;display:block;width:100%;text-align:center;padding:16px;border-radius:var(--r-lg);
  background:var(--orange);color:#fff;font-weight:600;font-size:16px;--ring-offset:2px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn--blue{background:var(--blue)}
.btn--leaf{background:var(--leaf)}
.btn--outline{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.btn--danger{background:var(--danger-soft);color:var(--danger)}

.ghost-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;box-sizing:border-box;padding:12px;
  border-radius:var(--r-md);border:1.5px solid var(--line);font-weight:600;font-size:14px;margin-bottom:12px}

.icon-btn{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-sm);--ring-offset:2px}
.icon-btn.is-active{color:var(--orange)}

.send-btn{width:40px;height:40px;border-radius:var(--r-sm);background:var(--orange);color:#fff;display:grid;place-items:center;flex:none;font-size:18px}

.link-btn{display:block;text-align:center;font-size:13px;color:var(--blue);font-weight:600;margin-top:10px;text-decoration:underline}
.link-btn--inline{margin:0}

.pill{white-space:nowrap;padding:8px 16px;border-radius:var(--r-pill);background:var(--soft);font-size:13px;color:var(--ink-2);--ring-offset:2px}
.pill[aria-pressed="true"]{background:var(--blue);color:#fff}

.heart-toggle{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;background:#fff;
  display:grid;place-items:center;color:var(--muted);box-shadow:var(--shadow-chip)}
.heart-toggle[aria-pressed="true"]{background:var(--orange);color:#fff}

/* --- Champs ------------------------------------------------------------- */
.field{border:1.5px solid var(--line);border-radius:var(--r-md);font:inherit;font-size:14px;background:#fff;color:var(--ink);-webkit-text-fill-color:var(--ink);color-scheme:light}
.field::placeholder{color:var(--muted);-webkit-text-fill-color:var(--muted);opacity:1}
.field--dashed{border-style:dashed}
.field--area{width:100%;resize:none}
.bare-field{all:unset;min-width:0;color:var(--ink);-webkit-text-fill-color:var(--ink)}
.bare-field::placeholder{color:var(--muted);-webkit-text-fill-color:var(--muted);opacity:1}

/* --- Médias ------------------------------------------------------------- */
/* Mascotte Tofu : conteneur monté par le bundle React (scripts/vendor/tofu-mascot.js). */
.mascot{display:block;background:radial-gradient(circle at 50% 40%,var(--mascot-light),var(--blue) 70%);border-radius:50%;padding:12%;box-sizing:border-box}
/* Vignette : centre une illustration ou recadre une photo. */
.thumb{display:grid;place-items:center;background:var(--soft)}
.thumb img{width:100%;height:100%;object-fit:cover}
/* Assiette blanche ronde portant l'illustration d'un plat. */
.plate{border-radius:50%;background:#fff;display:grid;place-items:center}
.plate--lg{margin:14px auto -40px;width:220px;height:220px;box-shadow:var(--shadow-float)}
.plate--lg svg{width:190px;height:190px}
.plate--md{width:150px;height:150px;margin:0 auto 12px}
.plate--md svg{width:130px;height:130px}
.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;flex:none}

/* --- Indicateurs -------------------------------------------------------- */
.typing{display:inline-flex;gap:4px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:tp 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
@keyframes tp{50%{opacity:.25}}

.progress{height:8px;border-radius:4px;background:var(--leaf-soft);overflow:hidden}
.progress i{display:block;height:100%;background:var(--leaf);border-radius:4px}

.segments{display:flex;gap:6px;margin-top:12px}
.segments i{flex:1;height:5px;border-radius:3px;background:var(--track)}
.segments i.on{background:var(--blue)}

/* Cadre de détection posé sur la photo du frigo. */
.detect-tag{position:absolute;border:2.5px solid var(--blue);border-radius:var(--r-sm);opacity:0;transform:scale(.8);transition:.35s}
.detect-tag.on{opacity:1;transform:none}
.detect-tag span{position:absolute;top:-24px;left:-3px;background:var(--blue);color:#fff;font-size:11px;font-weight:600;padding:3px 8px;border-radius:8px;white-space:nowrap}
.detect-tag.is-urgent{border-color:var(--orange)}
.detect-tag.is-urgent span{background:var(--orange)}

/* --- Interrupteur ------------------------------------------------------- */
.switch{display:block;flex:none;width:46px;height:28px;border-radius:var(--r-pill);background:var(--star-off);position:relative;transition:background .15s;--ring-offset:2px}
.switch i{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:var(--shadow-chip);transition:transform .15s}
.switch[aria-checked="true"]{background:var(--leaf)}
.switch[aria-checked="true"] i{transform:translateX(18px)}