@import './tokens/index.css';

/* ============================================================
   Inspiration — reprise avec le design system La Martinière
   (« Sels & Soleil »). Coque (sidebar + topbar + bottom-tabs)
   copiée à l'identique de apps/essais/styles.css / apps/retours ;
   composants propres au carnet d'inspiration (sections, cartes,
   modales, recherche, recettes) ajoutés en bas du fichier —
   traduits depuis le <style> inline de la source (variables
   --r/--rs/--rpill/--sh* mappées sur les tokens partagés
   --radius-*/--shadow-*, --font-d/-b/-m sur --font-display/
   -sans/-mono), palette et polices déjà correctes (pas de
   redesign).
   ============================================================ */

html, body { max-width: 100%; overflow-x: clip; }

/* --paon-700 n'existe pas dans tokens/colors.css (essais/retours n'en ont
   jamais eu besoin, seuls --paon-600/--paon-100 y sont définis) — extension
   locale reprenant la valeur exacte de la source (section "influences"),
   pas une modification du design system partagé. */
:root { --paon-700: #215965; }

/* ── LOADING ── */
#loadingOverlay { position: fixed; inset: 0; background: var(--overlay-scrim); z-index: 2000; display: flex; align-items: center; justify-content: center; }
#loadingOverlay.hidden { display: none; }
.spinner { width: 40px; height: 40px; border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── TOAST ── */
#toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px); z-index: 3000; padding: 12px 20px; border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: var(--weight-medium); opacity: 0; transition: var(--transition-base); white-space: nowrap; pointer-events: none; box-shadow: var(--shadow-lg); }
#toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
#toast.success { background: var(--status-success); color: #fff; }
#toast.error { background: var(--status-danger); color: #fff; }
#toast.info { background: var(--status-info); color: #fff; }

/* ============================================================
   COQUE — sidebar (PC/tablette) + barre haute + contenu + barre
   d'onglets basse (mobile). Copie de apps/retours/styles.css.
   ============================================================ */
.app-shell { display: flex; min-height: 100vh; background: var(--surface-page); }

.sidebar {
  width: var(--width-sidebar);
  flex-shrink: 0;
  background: var(--surface-card);
  border-right: var(--border-width) solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  transition: width var(--dur-base) var(--ease-standard);
  overflow: hidden;
}
.app-shell.is-sidebar-collapsed .sidebar { width: var(--width-sidebar-collapsed); }
.app-shell.is-mobile .sidebar { display: none; }

.sidebar__brand { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-4); min-height: 76px; border-bottom: var(--border-width) solid var(--border-subtle); }
.sidebar__brand-mark { width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--action-primary); color: var(--text-on-accent); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: var(--weight-bold); flex-shrink: 0; }
.sidebar__brand-name { font-family: var(--font-display); font-weight: var(--weight-semibold); color: var(--text-strong); white-space: nowrap; }
.app-shell.is-sidebar-collapsed .sidebar__brand-name,
.app-shell.is-sidebar-collapsed .nav-item__label,
.app-shell.is-sidebar-collapsed .sidebar__group-label,
.app-shell.is-sidebar-collapsed .sidebar__footer-info { display: none; }

.sidebar__nav { flex: 1; overflow-y: auto; padding: var(--space-3) var(--space-2); display: flex; flex-direction: column; gap: var(--space-4); }
.sidebar__group { display: flex; flex-direction: column; gap: var(--space-1); }
.sidebar__group-label { padding: 0 var(--space-3); margin-bottom: var(--space-1); }

.nav-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); color: var(--text-body); background: none; border: none; width: 100%; text-align: left; cursor: pointer; font-size: var(--text-sm); font-family: inherit; }
.nav-item:hover { background: var(--surface-hover); }
.nav-item.is-active { background: var(--surface-active); color: var(--action-primary-active); font-weight: var(--weight-semibold); }
.nav-item__icon { flex-shrink: 0; display: flex; }
.nav-item__label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sidebar__footer { padding: var(--space-4); border-top: var(--border-width) solid var(--border-subtle); display: flex; align-items: center; gap: var(--space-3); }
.app-shell.is-sidebar-collapsed .sidebar__footer { flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-2); }
.avatar { width: 36px; height: 36px; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--text-body); display: flex; align-items: center; justify-content: center; font-weight: var(--weight-semibold); font-size: var(--text-sm); flex-shrink: 0; }
.sidebar__footer-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sidebar__footer-name { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar__footer-role { font-size: var(--text-xs); color: var(--text-muted); }
.signout-btn { flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--radius-md); border: var(--border-width) solid var(--border-subtle); background: var(--surface-card); color: var(--text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.signout-btn:hover { background: var(--status-danger-soft); color: var(--status-danger); border-color: var(--status-danger-soft); }
.sidebar__version { text-align: center; font-size: var(--text-2xs); color: var(--text-muted); padding: 0 var(--space-4) var(--space-3); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar { min-height: 76px; flex-shrink: 0; display: flex; align-items: center; gap: var(--space-4); padding: 0 var(--space-6); border-bottom: var(--border-width) solid var(--border-subtle); background: var(--surface-card); position: sticky; top: 0; z-index: 100; padding-top: env(safe-area-inset-top); }
.icon-btn { width: 40px; height: 40px; border-radius: var(--radius-md); border: var(--border-width) solid var(--border-subtle); background: var(--surface-card); color: var(--text-body); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; position: relative; }
.icon-btn:hover { background: var(--surface-hover); }
.app-shell.is-mobile .topbar__toggle, .app-shell.is-tablet .topbar__toggle { display: none; }

.topbar__brand { display: none; align-items: center; gap: var(--space-2); flex: 1; min-width: 0; }
.topbar__brand img { height: 28px; display: block; }
.topbar__brand span { font-family: var(--font-display); font-weight: var(--weight-semibold); color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-shell.is-mobile .topbar__brand, .app-shell.is-tablet .topbar__brand { display: flex; }

.topbar__spacer { flex: 1; }
.topbar__version { display: none; flex-shrink: 0; font-size: var(--text-2xs); color: var(--text-muted); }
.app-shell.is-mobile .topbar__version { display: block; }
.topbar__home { display: none; }
.app-shell.is-mobile .topbar__home { display: flex; }

.content { flex: 1; overflow-y: auto; padding: var(--space-6); max-width: var(--width-content-max); width: 100%; margin: 0 auto; }

.bottom-tabs { display: none; position: fixed; bottom: 0; left: 0; right: 0; height: 64px; background: var(--surface-card); border-top: var(--border-width) solid var(--border-subtle); z-index: 150; padding-bottom: env(safe-area-inset-bottom, 0); }
.app-shell.is-mobile .bottom-tabs { display: flex; }
.app-shell.is-mobile .main { padding-bottom: 64px; }
.bottom-tabs__item { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: var(--text-2xs); color: var(--text-muted); background: none; border: none; cursor: pointer; font-family: inherit; }
.bottom-tabs__item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bottom-tabs__item.is-active { color: var(--action-primary); }
.bottom-tabs__item svg { width: 20px; height: 20px; }

@media (max-width: 1039px) { .content { padding: var(--space-5); } }
@media (max-width: 759px) {
  .content { padding: var(--space-4); }
  .topbar { padding: 0 var(--space-4); min-height: 60px; }
}

/* ── RESPONSIVE TABLES (mobile card layout) ── */
@media(max-width:640px){
  .table-wrap{overflow-x:visible}
  .data-table,.data-table thead,.data-table tbody,.data-table th,.data-table td,.data-table tr{display:block;width:100%}
  .data-table thead{display:none}
  .data-table tr{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);margin-bottom:10px;padding:8px 12px;background:var(--surface-card);box-shadow:var(--shadow-sm)}
  .data-table tr:hover td{background:transparent}
  .data-table td{border:none;padding:4px 0;font-size:13px;display:flex;justify-content:space-between;align-items:flex-start;gap:8px;min-height:28px}
  .data-table td:before{content:attr(data-label);color:var(--text-subtle);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;flex-shrink:0;padding-top:2px;min-width:90px}
  .data-table td:empty{display:none}
  .data-table td[data-label=""],.data-table td[data-label=" "]{justify-content:flex-end}
  .btn-icon{min-height:36px}
}
@media(max-width:600px){.check-item{padding:12px 14px}.btn{padding:13px 20px;font-size:15px}input[type=text],input[type=date],input[type=number],input[type=password],select,textarea{font-size:16px;padding:11px 12px}.data-table{font-size:12px}.data-table th,.data-table td{padding:7px 6px}}

/* ── MAIN LAYOUT ── */
.app-page{display:none}
.app-page.active{display:block}
main{max-width:720px;margin:0 auto;padding:0 0 calc(24px + env(safe-area-inset-bottom))}
main.wide{max-width:960px}
.page-title{font-family:var(--font-display);font-size:28px;color:var(--text-strong);margin-bottom:4px;letter-spacing:-.5px}
.page-sub{font-size:13px;color:var(--text-muted);margin-bottom:24px}

/* ── HOME ── */
.home-banner{background:var(--creme-200);border-radius:var(--radius-lg);padding:20px;margin-bottom:20px}
.home-banner .page-title{margin-bottom:4px}
.home-banner .page-sub{margin-bottom:0}
.slabel{font-size:11px;font-weight:600;color:var(--text-muted);margin:16px 0 8px;text-transform:uppercase;letter-spacing:.08em}
.quick-add{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px}
.qa-btn{border-radius:var(--radius-sm);padding:12px;min-height:var(--tap-comfortable);border:1px solid var(--border-default);background:var(--surface-card);cursor:pointer;text-align:left;font-size:13px;color:var(--text-muted);font-family:var(--font-sans);box-shadow:var(--shadow-sm)}
.qa-btn strong{display:block;font-size:14px;color:var(--text-strong);margin-bottom:2px}

/* ── SECTION GRID (accueil) ── */
.sec-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
@media(min-width:640px){.sec-grid{grid-template-columns:1fr 1fr 1fr}}
.sec-tile{border-radius:var(--radius-lg);padding:16px 14px;cursor:pointer;border:none;text-align:left;transition:transform .12s;box-shadow:var(--shadow-sm)}
.sec-tile:active{transform:scale(.97)}
.tile-icon{font-size:22px;margin-bottom:8px}
.tile-title{font-size:13px;font-weight:600;margin-bottom:2px}
.tile-count{font-family:var(--font-mono);font-size:11px;opacity:.8}

/* ── ENTRÉES (section) ── */
.section-hdr{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.section-hdr-dot{width:10px;height:10px;border-radius:50%}
.section-hdr-title{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;font-size:20px;color:var(--text-strong)}
.section-hdr-count{margin-left:auto;font-family:var(--font-mono);font-size:12px;color:var(--text-muted);background:var(--surface-sunken);padding:3px 10px;border-radius:var(--radius-pill)}
.section-hdr-pdf{font-size:12px;padding:5px 10px;min-height:32px;border-radius:var(--radius-pill);border:1px solid var(--border-default);background:transparent;color:var(--text-muted);cursor:pointer;font-family:var(--font-sans)}

.entries-list{display:flex;flex-direction:column;gap:10px}
.ecard{background:var(--surface-card);border-radius:var(--radius-lg);padding:14px;position:relative;box-shadow:var(--shadow-sm),var(--ring-card);cursor:pointer}
.ecard-photos{display:grid;gap:6px;margin-bottom:10px}
.ecard-photos img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-sm)}
.card-tag{display:inline-block;font-size:11px;font-weight:600;padding:3px 9px;border-radius:var(--radius-pill);margin-bottom:8px}
.ecard h3{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--text-strong);margin-bottom:4px}
.ecard-badges{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.status-badge{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:var(--radius-pill)}
.status-idee{background:var(--dore-100);color:var(--dore-700)}
.status-encours{background:var(--paon-100);color:var(--paon-700)}
.status-valide{background:var(--sauge-100);color:var(--sauge-700)}
.status-planifie{background:var(--prune-100);color:var(--prune-700)}
.status-esquisse{background:var(--brique-100);color:var(--brique-700)}
.stars-disp{color:var(--dore-600);font-size:13px}
.meta{margin-top:10px;font-size:11px;color:var(--text-muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.meta-date{margin-left:auto}
.author-tag{font-weight:500;color:var(--text-body)}
.edesc{font-size:13px;color:var(--text-muted);line-height:1.5}
.edel{position:absolute;top:10px;right:10px;background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:18px;padding:4px;line-height:1}

/* ── VUE DÉTAIL (modale moDetail) ── */
.detail-head{display:flex;align-items:flex-start;gap:10px;justify-content:space-between}
.detail-title{margin-top:10px}
.detail-badges{margin-bottom:12px}
.detail-desc{margin-top:12px}
.detail-kw{margin-top:10px}
.detail-files{margin-top:12px}
.detail-meta{margin-top:16px}

/* ── COMMENTAIRES — intégrés dans la vue détail (pas de modale séparée). ── */
.detail-comments{margin-top:18px;padding-top:14px;border-top:1px solid var(--border-subtle)}
.detail-comments-hdr{font-size:13px;font-weight:600;color:var(--text-strong);display:flex;align-items:center;gap:6px;margin-bottom:8px}
.detail-comments-count{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);background:var(--surface-sunken);padding:1px 8px;border-radius:var(--radius-pill)}
.comment-item{padding:10px 0;border-bottom:1px solid var(--border-subtle)}
.comment-item:last-child{border-bottom:none}
.comment-head{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.comment-author{font-size:13px;font-weight:600;color:var(--text-strong)}
.comment-date{font-size:11px;color:var(--text-subtle)}
.comment-del{margin-left:auto;background:none;border:none;color:var(--text-subtle);cursor:pointer;font-size:14px}
.comment-text{font-size:13px;color:var(--text-body);line-height:1.5}
.comment-empty{text-align:center;padding:24px 12px;color:var(--text-muted);font-size:13px}
.comment-input-row{display:flex;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border-subtle)}
.comment-input-row input{flex:1}

/* ── RECETTES ── */
.rcard{background:var(--surface-card);border-radius:var(--radius-lg);padding:14px;position:relative;margin-bottom:10px;box-shadow:var(--shadow-sm),var(--ring-card);scroll-margin-top:80px}
.rcard-actions{display:flex;justify-content:flex-end;gap:6px;margin-bottom:8px}
.rcard.highlight{box-shadow:0 0 0 2px var(--action-primary),var(--shadow-sm),var(--ring-card)}
.rcard-header{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}
.rcard-img{width:64px;height:64px;border-radius:var(--radius-sm);flex-shrink:0;background:var(--surface-sunken);display:flex;align-items:center;justify-content:center;font-size:28px;overflow:hidden}
.rcard-img img{width:100%;height:100%;object-fit:cover;cursor:pointer}
.rcard-info h3{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--text-strong);margin-bottom:2px}
.rcard-info p{font-size:12px;color:var(--text-muted)}
.rating-row{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.rtag{font-size:11px;padding:3px 8px;border-radius:var(--radius-pill);font-weight:600}
.rtag-note{background:var(--dore-100);color:var(--dore-700)}
.diff-facile{background:var(--sauge-100);color:var(--sauge-700)}
.diff-moyen{background:var(--dore-100);color:var(--dore-700)}
.diff-difficile{background:var(--brique-100);color:var(--brique-700)}
.rcard-reussite-label{font-size:12px;color:var(--text-muted);margin-bottom:4px}
.pbar{height:4px;background:var(--surface-sunken);border-radius:2px;overflow:hidden;margin-top:8px}
.pbar-fill{height:100%;background:var(--dore-600);border-radius:2px}
.notes-row{font-size:12px;color:var(--text-muted);margin-top:6px;line-height:1.5}

/* ── VIDE ── */
.empty{text-align:center;padding:48px 20px;color:var(--text-muted)}
.empty-icon{font-size:40px;margin-bottom:12px}
.empty p{font-size:14px;line-height:1.6}

/* ── RECHERCHE ── */
.sbar{display:flex;align-items:center;gap:8px;background:var(--surface-sunken);border-radius:var(--radius-sm);padding:10px 12px;border:1px solid var(--border-subtle);margin-bottom:16px}
.sbar svg{flex-shrink:0;color:var(--text-muted)}
.sbar input{flex:1;border:none;background:none;font-size:15px;color:var(--text-strong);outline:none;font-family:var(--font-sans)}
.search-layout{display:flex;align-items:stretch}
.search-rail{flex:none;width:84px;display:flex;flex-direction:column;background:var(--creme-100);border-radius:var(--radius-sm) 0 0 var(--radius-sm);overflow:hidden}
.rail-item{width:100%;border:none;background:transparent;cursor:pointer;padding:12px 4px;display:flex;flex-direction:column;align-items:center;gap:5px;font-family:var(--font-sans);border-left:3px solid transparent}
.rail-item .rail-dot{width:18px;height:18px;border-radius:50%;background:var(--rail-color,var(--action-primary));flex:none}
.rail-item.active{background:var(--rail-color,var(--action-primary));border-left-color:var(--rail-color,var(--action-primary))}
.rail-item.active .rail-dot{background:rgba(255,255,255,.35);border:2px solid #fff}
.rail-item .rail-label{font-size:10.5px;font-weight:600;color:var(--text-body);line-height:1.15;text-align:center}
.rail-item.active .rail-label{color:#fff}
.rail-item .rail-count{font-family:var(--font-mono);font-size:10px;color:var(--text-subtle)}
.rail-item.active .rail-count{color:rgba(255,255,255,.9)}
.search-body{flex:1;min-width:0;padding:0 0 16px 14px}

/* ── STATS ── */
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.stat{background:var(--surface-card);border-radius:var(--radius-lg);padding:16px;text-align:center;box-shadow:var(--shadow-sm),var(--ring-card)}
.stat-n{font-family:var(--font-mono);font-weight:500;font-size:28px;color:var(--text-strong)}
.stat-l{font-size:12px;color:var(--text-muted);margin-top:2px}
.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.bar-label{font-size:12px;color:var(--text-muted);width:120px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{flex:1;height:6px;background:var(--surface-sunken);border-radius:3px;overflow:hidden}
.bar-fill{height:100%;border-radius:3px;transition:width .4s}
.bar-cnt{font-family:var(--font-mono);font-size:12px;color:var(--text-muted);width:20px;text-align:right;flex-shrink:0}

/* ── MODALES (bottom-sheet mobile-first : mo/modal) ── */
.mo{display:none;position:fixed;inset:0;background:var(--overlay-scrim);z-index:200;align-items:flex-end;justify-content:center;backdrop-filter:blur(6px)}
.mo.open{display:flex}
.modal{background:var(--surface-card);border-radius:var(--radius-xl) var(--radius-xl) 0 0;width:100%;max-width:560px;max-height:92vh;overflow-y:auto;padding:20px 16px calc(env(safe-area-inset-bottom) + 20px)}
@media(min-width:640px){.mo{align-items:center}.modal{border-radius:var(--radius-xl)}}
.modal-handle{width:36px;height:4px;background:var(--border-default);border-radius:2px;margin:0 auto 16px}
.modal h2{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;font-size:20px;margin-bottom:16px;color:var(--text-strong)}
.modal label{display:block;font-size:13px;font-weight:500;color:var(--text-body);margin-bottom:5px;margin-top:14px}
.modal label .req{color:var(--status-danger);margin-left:2px}
.label-hint{font-weight:400;color:var(--text-muted)}
.modal input,.modal textarea,.modal select{width:100%;border:1px solid var(--border-default);border-radius:var(--radius-sm);padding:10px 12px;min-height:var(--tap-comfortable);font-size:15px;font-family:var(--font-sans);color:var(--text-strong);background:var(--surface-page);outline:none}
.modal input:focus,.modal textarea:focus,.modal select:focus{border-color:var(--action-primary);box-shadow:var(--focus-ring)}
.modal textarea{resize:vertical;min-height:80px}
.star-picker{display:flex;gap:8px;margin-top:4px}
.sbtn{font-size:22px;background:none;border:none;cursor:pointer;opacity:.3;transition:opacity .1s;padding:4px}
.sbtn.on{opacity:1}
.btn-row{display:flex;gap:10px;margin-top:20px}
.btn-save{flex:1;padding:12px;min-height:var(--tap-comfortable);background:var(--action-primary);color:#fff;border:none;border-radius:var(--radius-sm);font-size:15px;font-weight:600;cursor:pointer;font-family:var(--font-sans);transition:background .15s}
.btn-save:hover{background:var(--action-primary-hover)}
.btn-save:disabled{opacity:.6;cursor:not-allowed}
.btn-cancel{padding:12px 18px;min-height:var(--tap-comfortable);background:var(--surface-sunken);color:var(--text-strong);border:none;border-radius:var(--radius-sm);font-size:15px;cursor:pointer;font-family:var(--font-sans)}
.range-val{text-align:right;font-size:13px;color:var(--text-muted);margin-top:2px}

/* ── PHOTOS / FICHIERS (dans les modales) ── */
.photo-source-btns{display:flex;gap:8px;margin-top:4px}
.photo-src-btn{flex:1;padding:10px 8px;min-height:var(--tap-comfortable);border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--surface-page);font-size:13px;color:var(--text-body);cursor:pointer;font-family:var(--font-sans)}
.photo-src-btn:active{background:var(--surface-hover)}
.photo-grid-modal{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.photo-thumb{position:relative;width:100%;padding-top:100%;border-radius:var(--radius-sm);overflow:hidden;background:var(--surface-sunken)}
.photo-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;cursor:pointer}
.photo-thumb .del-ph{position:absolute;top:4px;right:4px;width:22px;height:22px;background:rgba(43,38,32,.65);color:#fff;border:none;border-radius:50%;cursor:pointer;font-size:14px;line-height:22px;text-align:center;padding:0}

.keywords-container{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.kw-tag{display:inline-flex;align-items:center;gap:4px;background:var(--surface-sunken);border:1px solid var(--border-subtle);border-radius:var(--radius-pill);padding:3px 10px;font-size:12px;color:var(--text-body)}
.kw-tag button{background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:14px;line-height:1;padding:0}
.kw-disp{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.kw-disp span{background:var(--surface-sunken);border-radius:var(--radius-pill);padding:2px 8px;font-size:11px;color:var(--text-body)}

.files-list{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.file-item{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--surface-sunken);border-radius:var(--radius-sm);font-size:13px}
.file-item-icon{font-size:18px;flex-shrink:0}
.file-item-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-strong)}
.file-item-size{font-size:11px;color:var(--text-muted);flex-shrink:0}
.file-item-del{background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:16px;padding:2px;flex-shrink:0}
.file-add{display:flex;align-items:center;gap:8px;padding:8px 10px;min-height:var(--tap-comfortable);border:1.5px dashed var(--border-default);border-radius:var(--radius-sm);cursor:pointer;color:var(--text-muted);font-size:13px;position:relative;overflow:hidden}
.file-add input{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0}

/* ── LIGHTBOX (réutilise .modal-overlay générique) ── */
.modal-overlay{display:none;position:fixed;inset:0;background:var(--overlay-scrim);z-index:500;align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{display:flex}

/* ── BOUTONS UTILITAIRES (petits, hors modale : bandeau détail, commentaires) ── */
.banner-icon{display:inline-flex;flex-shrink:0}
.btn-sm{font-size:12px;padding:6px 12px;min-height:32px;border-radius:var(--radius-pill);border:1px solid var(--border-default);background:var(--surface-page);color:var(--text-body);cursor:pointer;font-family:var(--font-sans)}
.btn-sm:hover{background:var(--surface-hover)}
.btn-sm.primary{background:var(--text-strong);color:var(--creme-050);border-color:var(--text-strong)}
.btn-sm.danger{background:var(--status-danger-soft);color:var(--brique-700);border-color:transparent}

/* ── HORS LIGNE ── */
.offline-banner{display:none;position:fixed;top:0;left:0;right:0;z-index:2500;background:var(--status-warning);color:var(--text-strong);text-align:center;font-size:12px;font-weight:600;padding:7px 12px;padding-top:calc(7px + env(safe-area-inset-top))}
.offline-banner.visible{display:block}

/* ── FIL D'ACTIVITÉ (accueil) ── */
.feed-list{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.feed-item{display:flex;align-items:center;gap:10px;background:var(--surface-card);border-radius:var(--radius-sm);padding:8px 10px;cursor:pointer;box-shadow:var(--shadow-sm)}
.feed-thumb{width:40px;height:40px;border-radius:var(--radius-sm);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:18px;overflow:hidden}
.feed-thumb img{width:100%;height:100%;object-fit:cover}
.feed-info{flex:1;min-width:0}
.feed-title{font-size:13px;font-weight:600;color:var(--text-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feed-meta{font-size:11px;color:var(--text-muted);display:flex;align-items:center;gap:5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feed-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}

/* ── RECHERCHE — commutateur Inspirations/Recettes ── */
.search-seg{display:flex;background:var(--surface-sunken);border-radius:var(--radius-pill);padding:3px;margin-bottom:10px}
.search-seg span{flex:1;text-align:center;font-size:13px;font-weight:600;padding:8px 0;border-radius:var(--radius-pill);color:var(--text-muted);cursor:pointer;transition:background .15s,color .15s}
.search-seg span.on{background:var(--surface-card);color:var(--text-strong);box-shadow:var(--shadow-sm)}

/* ── TRI DES RECETTES ── */
.recipe-sort-select{font-size:12px;padding:5px 8px;border-radius:var(--radius-pill);border:1px solid var(--border-default);background:transparent;color:var(--text-muted);font-family:var(--font-sans);cursor:pointer}

/* ── ADMINISTRATION — catégories de recettes ── */
.admin-cat-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--border-subtle);flex-wrap:wrap}
.admin-cat-row:last-child{border-bottom:none}
.cat-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.admin-cat-label{flex:1;min-width:120px;font-size:13px;font-weight:600;color:var(--text-strong)}
.admin-cat-count{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);background:var(--surface-sunken);padding:2px 8px;border-radius:var(--radius-pill)}

/* ── SÉLECTEUR D'EMOJI (modale catégorie) ── */
.emoji-picker-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;border:1px solid var(--border-default);border-radius:var(--radius-sm);padding:10px 12px;background:var(--surface-page);cursor:pointer;font-size:22px}
.emoji-picker-trigger .emoji-picker-caret{font-size:13px;color:var(--text-muted)}
.emoji-picker-grid{display:none;grid-template-columns:repeat(6,1fr);gap:4px;margin-top:8px;padding:8px;background:var(--surface-sunken);border-radius:var(--radius-sm);max-height:180px;overflow-y:auto}
.emoji-picker-grid.open{display:grid}
.emoji-opt{font-size:20px;background:none;border:none;border-radius:var(--radius-sm);padding:6px 0;cursor:pointer;line-height:1}
.emoji-opt:hover,.emoji-opt:active{background:var(--surface-hover)}

/* ── UPDATE BANNER ── */
.update-banner{display:none;align-items:center;gap:10px;padding:10px 16px;background:var(--status-info);color:#fff;font-size:13px;font-weight:500}
.update-banner.visible{display:flex}
.update-banner strong{flex:1}
.update-btn{font-size:12px;padding:5px 14px;border-radius:100px;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;cursor:pointer;font-weight:500}
.update-btn:hover{background:rgba(255,255,255,.15)}

/* ── FAB ── */
.fab{position:fixed;bottom:24px;right:24px;width:52px;height:52px;border-radius:50%;background:var(--action-primary);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);transition:transform .12s;z-index:90}
.fab:active{transform:scale(.92)}
.fab.hidden{display:none}
.app-shell.is-mobile .fab{bottom:80px}