/* ==========================================================================
   MOLÉCULES — petits groupes d'atomes qui forment une unité fonctionnelle.
   Rendues côté JS par scripts/ui/molecules.js.
   ========================================================================== */

/* --- En-têtes ----------------------------------------------------------- */

.screen-header{display:flex;align-items:center;gap:8px}
.screen-header h1{flex:1;text-align:center;font-size:1.2rem;font-weight:600;margin:0}
.screen-header__spacer{width:40px}

.page-title{margin-top:8px}
.pill-row{gap:8px;padding-bottom:4px}
.section-title--split{display:flex;justify-content:space-between;align-items:baseline}

/* En-tête de carte : pastille + sur-titre + titre. */
.card-head{display:flex;gap:12px;align-items:center}
.card-head h3{font-size:1.1rem}
.card-head__badge{width:58px;height:58px;border-radius:var(--r-lg);display:grid;place-items:center;flex:none}
.card-head__badge--logo{background:#fff;border:1px solid var(--line)}
.card-head__badge--logo img{width:44px;height:auto}
.card-head__badge--leaf{background:var(--leaf-soft);color:var(--leaf);font-size:26px}
.card-head--lg{gap:14px}
.card-head--lg h3{font-size:1.15rem}
.card-head--lg .card-head__badge{width:64px;height:64px;border-radius:var(--r-2xl);background:var(--orange);color:#fff;font-size:30px}

/* --- Mascotte ----------------------------------------------------------- */
.mascot-halo{position:relative;margin:8px auto 4px;width:min(300px,82%);aspect-ratio:1}
.mascot-halo--sm{width:min(180px,50%)}
.mascot-halo--xs{width:92px;flex:none;margin:0}
.mascot-halo--xs .mascot-halo__ring{border-width:6px}
.mascot-halo--xs .mascot-halo__dot{display:none}
.home-hero{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mascot-halo__ring{position:absolute;inset:8%;border-radius:50%;border:14px solid var(--blue)}
.mascot-halo__dot{position:absolute;border-radius:50%}
.mascot-halo .mascot{position:absolute;inset:16%;width:68%;height:68%;padding:14%}

/* --- Conversation ------------------------------------------------------- */
.bubble{display:flex;gap:10px;align-items:flex-end;margin-top:14px}
.bubble .mascot{width:48px;height:48px;flex:none;padding:6px}
.bubble p{margin:0;background:var(--soft);padding:12px 14px;border-radius:18px 18px 18px 4px;font-size:14px;line-height:1.45}
.chat-me{margin:10px 0 0 auto;max-width:80%;background:var(--blue);color:#fff;padding:10px 14px;border-radius:18px 18px 4px 18px;font-size:14px;width:fit-content}

.suggestions{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.suggestion{font-size:13px;padding:9px 14px;border-radius:var(--r-pill);border:1.5px solid var(--line);display:flex;align-items:center;gap:6px}

/* --- Formulaires -------------------------------------------------------- */
.prompt{display:flex;gap:8px;margin-top:12px;background:var(--soft);border-radius:var(--r-lg);padding:6px 6px 6px 14px;align-items:center}
.prompt .bare-field{flex:1;font-size:14px}

.chat-input{display:flex;gap:8px;position:sticky;bottom:calc(96px + var(--safe-b));background:#fff;padding:8px 0}
.chat-input .field{flex:1;min-width:0;padding:12px 14px}

.search-field{display:flex;align-items:center;gap:10px;background:var(--soft);border-radius:var(--r-lg);padding:12px 14px;margin:10px 0 12px}
.search-field .bare-field{flex:1;font-size:15px}

.range-field{background:var(--soft);border-radius:var(--r-xl);padding:14px 16px;margin:4px 0 14px}
.range-field label{display:flex;justify-content:space-between;font-size:12px;font-weight:600;color:var(--ink-2)}
.range-field input{width:100%;accent-color:var(--blue);margin-top:8px}

.item-list{display:grid;gap:8px;margin-top:14px}
.item-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px;align-items:center;background:var(--soft);border-radius:var(--r-md);padding:6px 6px 6px 12px}
.item-row .bare-field{font-size:14px}
.item-row button{font-size:12px;padding:6px 10px;border-radius:var(--r-xs);background:#fff}
.item-row button.is-urgent{background:var(--urgent-bg);color:var(--urgent-ink);font-weight:600}

.add-row{display:flex;gap:6px}
.add-row .field{flex:1;min-width:0;padding:10px 12px}
.add-row button{padding:0 16px;border-radius:var(--r-md);background:var(--blue);color:#fff;font-weight:700}

.rating{display:flex;gap:4px}
.rating button{font-size:26px;color:var(--star-off);line-height:1}
.rating button.on{color:var(--yellow)}
.rating button:focus-visible{border-radius:6px}
.rating-avg{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:4px}
.rating-avg b{color:var(--ink)}

.photo-picker{display:flex;align-items:center;justify-content:center;gap:8px;border:1.5px dashed var(--dash);border-radius:var(--r-md);height:110px;
  color:var(--blue);font-weight:600;font-size:14px;background:#fff;overflow:hidden;width:100%;box-sizing:border-box}
.photo-picker img{width:100%;height:100%;object-fit:cover}

/* --- Encarts ------------------------------------------------------------ */
.callout{background:var(--tip-bg);border-radius:var(--r-lg);padding:12px 14px;font-size:13px;margin-top:12px}
.callout--leaf{margin:0;background:var(--leaf-tint)}
.callout--prize{display:flex;align-items:center;gap:10px;border-radius:var(--r-md);padding:10px 12px;margin-top:0}
.callout--prize .fi{font-size:20px;color:var(--gold)}

.qr-note{display:flex;gap:12px;align-items:center;font-size:12px;color:var(--muted);margin:16px 0}
.qr-note canvas{width:76px;height:76px;image-rendering:pixelated;border-radius:8px;border:1px solid var(--line);flex:none}

.tag-list{display:flex;flex-wrap:wrap;gap:6px}
.tag-list span{font-size:11px;background:rgba(255,255,255,.7);padding:4px 10px;border-radius:var(--r-pill)}

/* --- Données ------------------------------------------------------------ */
.fact-list{display:flex;justify-content:space-around;margin-top:58px;font-size:12px;font-variant-numeric:tabular-nums}
.fact-list div{display:flex;align-items:center;gap:6px}
.fact-list b{font-size:14px}

.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center;font-size:11px}
.stat-row b{display:block;font-size:1.2rem}

.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:12px 0}
.stat-tile{background:var(--soft);border-radius:var(--r-xl);padding:14px}
.stat-tile b{display:block;font-size:1.35rem;font-weight:800;font-variant-numeric:tabular-nums}
.stat-tile small{font-size:12px;color:var(--muted)}

.info-list{display:grid;gap:8px;font-size:13px}
.info-list div{display:flex;gap:10px;align-items:flex-start}
.info-list .fi{color:var(--leaf);font-size:16px;margin-top:2px}

.progress-label{display:flex;justify-content:space-between;font-size:12px;margin-bottom:6px}

.day-track{display:flex;gap:6px;position:relative;z-index:1}
.day-track i{flex:1;height:34px;border-radius:var(--r-xs);background:rgba(255,255,255,.18);display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:700}
.day-track i.done{background:#fff;color:var(--blue)}
.day-track i.today{outline:2px solid #fff}

.step-card{background:var(--soft);border-radius:var(--r-3xl);padding:18px;margin-top:8px}
.step-card .step-card__kicker{font-size:12px;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.08em}
.step-card p{margin:6px 0 0;font-size:16px;line-height:1.5;font-weight:500}

/* --- Listes d'éléments sélectionnables --------------------------------- */
.dish-options{display:grid;gap:8px}
.dish-options__hint{font-size:12px;color:var(--muted)}
.dish-option{display:flex;gap:10px;align-items:center;padding:8px;border-radius:var(--r-md);border:2px solid var(--line)}
.dish-option[aria-pressed="true"]{border-color:var(--leaf);background:var(--leaf-tint)}
.dish-option .thumb{width:48px;height:48px;border-radius:var(--r-xs);flex:none}
.dish-option .thumb svg{width:42px;height:42px}
.dish-option b{font-size:13px;display:block}
.dish-option small{font-size:11px;color:var(--muted)}

.season-dish{flex:none;width:150px;background:#fff;border-radius:var(--r-lg);padding:8px;display:grid;gap:6px}
.season-dish .thumb{height:90px;border-radius:var(--r-sm);overflow:hidden}
.season-dish .thumb svg{width:80px;height:80px}
.season-dish b{font-size:12px;line-height:1.25}
.season-dish small{font-size:11px;color:var(--muted)}

.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.gallery-item{position:relative;aspect-ratio:1;border-radius:var(--r-md);overflow:hidden}
.gallery-item svg{width:80%;height:80%}
.gallery-item .gallery-item__vote{position:absolute;bottom:6px;right:6px;background:#fff;border-radius:var(--r-pill);padding:3px 8px;font-size:11px;font-weight:700;display:flex;gap:4px;align-items:center}
.gallery-item .gallery-item__vote[aria-pressed="true"]{background:var(--orange);color:#fff}
.gallery-item .gallery-item__me{position:absolute;top:6px;left:6px;background:var(--blue);color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:var(--r-pill)}

.review{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.review img,.review .review__ph{width:64px;height:64px;border-radius:var(--r-sm);object-fit:cover;background:#fff;display:grid;place-items:center;color:var(--muted)}
.review .review__stars{color:var(--yellow);font-size:13px;letter-spacing:1px}
.review p{margin:2px 0 0;font-size:13px;color:var(--ink)}
.review small{color:var(--muted);font-size:11px}

.share-options{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;text-align:center;font-size:12px}
.share-option{display:grid;gap:6px;justify-items:center}
.share-option span{width:56px;height:56px;border-radius:var(--r-xl);display:grid;place-items:center;color:#fff;font-size:24px}
.share-option:focus-visible{border-radius:12px}

.friend-list{display:grid;gap:8px}
.friend{display:flex;align-items:center;gap:12px;padding:10px;border-radius:var(--r-md);background:var(--soft)}
.friend[aria-pressed="true"]{outline:2px solid var(--blue)}

.btn-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.btn-pair--flush{margin-bottom:0}

/* --- Bilan du repas ------------------------------------------------------ */
.meal-lines{display:grid;gap:8px;margin:12px 0}
.meal-line{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;background:var(--soft);border-radius:var(--r-md);padding:8px 8px 8px 12px}
.meal-line__main{min-width:0}
.meal-line__name{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meal-line small{font-size:11px;color:var(--muted)}
.stepper{display:flex;align-items:center;gap:6px;font-size:13px;font-variant-numeric:tabular-nums}
.stepper button{width:28px;height:28px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:16px}
.food-results{display:grid;gap:6px;margin:8px 0}
.food-result{display:flex;justify-content:space-between;gap:8px;align-items:baseline;padding:10px 12px;border:1.5px solid var(--line);border-radius:var(--r-md);font-size:13px}
.food-result small{color:var(--muted);white-space:nowrap}
.delta-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px;font-variant-numeric:tabular-nums}
.delta-row__vals{color:var(--muted)}
.delta-row__vals b{color:var(--ink)}
.delta{font-weight:700;min-width:84px;text-align:right}
.delta--good{color:var(--leaf)}
.delta--bad{color:var(--orange)}
.goal-picker{display:grid;gap:10px}
.goal-option{display:grid;grid-template-columns:48px minmax(0,1fr) 28px;gap:12px;align-items:center;text-align:left;padding:12px;border-radius:var(--r-lg);border:2px solid var(--line);background:#fff;transition:border-color .2s,background-color .2s}
.goal-option__icon{width:48px;height:48px;border-radius:var(--r-md);background:var(--soft);color:var(--blue);display:grid;place-items:center;transition:background-color .2s,color .2s}
.goal-option b{display:block;font-size:14px}
.goal-option small{font-size:12px;color:var(--muted)}
.goal-option__check{width:24px;height:24px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-size:12px;color:transparent;transition:background-color .2s,border-color .2s,color .2s}
.goal-option[aria-pressed="true"]{border-color:var(--blue);background:var(--soft)}
.goal-option[aria-pressed="true"] .goal-option__icon{background:var(--blue);color:#fff}
.goal-option[aria-pressed="true"] .goal-option__check{background:var(--blue);border-color:var(--blue);color:#fff}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.setting-row b{display:block;font-size:14px}
.setting-row small{font-size:12px;color:var(--muted)}