/* Page d'accueil : en-tête, bandeau « À faire », barre de filtres, grille de cartes. */
/* header */
header.top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px}
.brand p{margin:4px 0 0;color:var(--muted)}
/* Bannière : logo horizontal à gauche, boutons à droite (en dessous sur téléphone) */
header.banner{align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 20px}
.brand h1{margin:0;line-height:0}
.brand p{font-size:.8rem}
.logo{height:96px;width:auto;max-width:100%;margin:-10px 0} /* le dessin a des marges internes : on les compense */
@media (max-width:600px){ header.banner{padding:12px 14px} .logo{height:68px} }
/* Téléphone : interrupteur clair/sombre en haut à droite de la bannière, les trois boutons sur une seule ligne */
@media (max-width:600px){
  header.banner{position:relative;gap:10px}
  .brand{padding-right:62px}
  .logo{height:58px}
  .theme-switch{position:absolute;top:14px;right:14px}
  /* « header.banner » devant : sinon la règle .top-actions{display:flex} plus bas dans ce fichier l'emporte */
  header.banner .top-actions{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,auto));gap:5px} /* l'interrupteur, en absolu, n'y prend pas de place */
  header.banner .top-actions .btn{padding:7px 6px;font-size:.76rem;justify-content:center;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* Contenu de l'onglet (même espacement que la page) */
/* Le contenu de l'onglet prend toute la hauteur restante de la page (bannière, onglets, contenu) :
   quand la page garde sa hauteur (filtre Archives), le bloc du calendrier s'étire aussi et le calendrier continue de suivre. */
#app{grid-template-rows:auto auto 1fr}
.view-body{display:flex;flex-direction:column;gap:22px;min-width:0}
.view-body > .with-cal{flex:1}
/* Interrupteur Mode sombre (bannière) : piste arrondie, pastille ronde avec l'icône, qui glisse à droite en sombre */
.theme-switch{display:grid;align-items:center;border:0;background:none;padding:0;color:var(--ink)}
.theme-switch::before{content:"";grid-area:1/1;width:54px;height:30px;border-radius:999px;background:var(--sunken);border:1.5px solid var(--line);box-sizing:border-box}
.theme-switch .knob{grid-area:1/1;justify-self:start;width:24px;height:24px;margin:3px;border-radius:50%;background:var(--surface);
  color:var(--ink);display:grid;place-items:center;box-shadow:0 1px 3px rgb(0 0 0 / .25);transition:transform .35s cubic-bezier(.4,0,.2,1)}
/* soleil et lune l'un sur l'autre : le soleil tourne en s'effaçant, la lune apparaît */
.theme-switch .knob svg{grid-area:1/1;width:16px;height:16px;transition:opacity .35s, rotate .35s}
.theme-switch .ico-lune{opacity:0;rotate:-90deg}
.theme-switch[aria-checked="true"] .knob{transform:translateX(24px);background:var(--ink);color:var(--bg)} /* pastille crème, bien visible sur fond sombre */
.theme-switch[aria-checked="true"] .ico-soleil{opacity:0;rotate:90deg}
.theme-switch[aria-checked="true"] .ico-lune{opacity:1;rotate:0deg}
.theme-switch:hover::before{border-color:var(--moss)}
.top-actions{align-items:center}
/* Ligne des onglets, avec le bouton d'ajout de l'onglet (+ Ajouter, + Souhait…) à droite */
.viewbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
/* une seule version du logo à la fois, selon le thème (mêmes règles que theme.css) */
.logo-dark{display:none}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .logo-light{display:none} :root:not([data-theme="light"]) .logo-dark{display:inline} }
:root[data-theme="dark"] .logo-light{display:none}
:root[data-theme="dark"] .logo-dark{display:inline}
.counts{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:.9rem}
.counts b{color:var(--ink);font-family:var(--mono);font-weight:500;font-size:1.05rem}
.top-actions{display:flex;gap:8px;flex-wrap:wrap}

/* todo strip */
.todo{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:grid;gap:10px}
.todo-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.todo-list{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.task{flex:0 0 auto;display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:8px;padding:7px 8px 7px 12px;background:var(--bg);max-width:320px}
.task .t-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
.task .t-what{font-size:.82rem;color:var(--muted)}
.task.late{border-color:var(--warn);background:var(--warn-soft)}
.todo-empty{color:var(--muted);font-size:.92rem}

/* toolbar */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}
.seg button{border:0;background:transparent;padding:7px 14px;font-weight:600;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--surface)}
.search{display:flex;gap:8px;flex-wrap:wrap;flex:1 1 280px;justify-content:flex-end}
.search input,.search select{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:7px 11px;min-width:0}
.search input{flex:1 1 180px;max-width:320px}
/* Téléphone : recherche sur toute la largeur, les listes (groupe, tri) côte à côte en dessous */
@media (max-width:600px){
  .search{flex-basis:100%}
  .search input{flex-basis:100%;max-width:none}
  .search select{flex:1 1 0;min-width:0;white-space:nowrap;text-overflow:ellipsis}
}

/* grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
/* Cartes hors de l'écran : le navigateur ne les met en page qu'en s'en approchant (l'encyclopédie en a des centaines) */
.grid > .card{content-visibility:auto;contain-intrinsic-size:auto 260px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:grid;grid-template-rows:auto 1fr;text-align:left;padding:0;transition:border-color .15s, transform .15s}
.card:hover{border-color:var(--moss);transform:translateY(-1px)}
.thumb{aspect-ratio:16/10;max-width:100%;background:var(--sunken);position:relative;display:grid;place-items:center;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb svg{width:44px;height:44px;opacity:.55}
.thumb.plante svg{color:var(--moss)} .thumb.reptile svg{color:var(--sand)}
.kindtag{position:absolute;left:10px;top:10px;font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:99px}
.kindtag.plante{background:var(--moss-soft);color:var(--moss)} .kindtag.reptile{background:var(--sand-soft);color:var(--sand)}
.extag{position:absolute;right:10px;top:10px;font-size:.7rem;padding:3px 8px;border-radius:99px;background:var(--surface);color:var(--muted);border:1px dashed var(--line)}
.card-body{padding:12px 14px 14px;display:grid;gap:6px;align-content:start;min-width:0}
.card-body .name{font-family:var(--display);font-size:1.12rem;font-weight:700;line-height:1.2}
.sci{font-style:italic;color:var(--muted);font-size:.9rem}
.specs{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.chip{font-size:.78rem;border:1px solid var(--line);border-radius:6px;padding:2px 7px;color:var(--muted);background:var(--bg)}
.due{font-size:.82rem;display:flex;align-items:center;gap:6px;margin-top:4px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:0 0 auto}
.dot.warn{background:var(--warn)} .dot.bad{background:var(--bad)} .dot.mute{background:var(--line)}
.pill{font-size:.74rem;font-weight:600;padding:2px 8px;border-radius:99px;background:var(--moss-soft);color:var(--moss)}
.pill.warn{background:var(--warn-soft);color:var(--warn)} .pill.bad{background:var(--bad-soft);color:var(--bad)} .pill.mute{background:var(--sunken);color:var(--muted)}

/* Téléphone : cartes en liste (vignette à gauche, texte à droite) pour voir plusieurs plantes par écran */
@media (max-width:600px){
  .grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .grid > .card{grid-template-rows:none;grid-template-columns:104px minmax(0,1fr);contain-intrinsic-size:auto 120px}
  .grid > .card .thumb{aspect-ratio:auto;height:100%;min-height:104px}
  .grid > .card .thumb svg{width:32px;height:32px}
  .grid > .card .extag{top:auto;bottom:6px;right:6px}
  .grid > .card .kindtag{left:6px;top:6px}
  .card-body{padding:10px 12px}
  .card-body .name{font-size:1.02rem}
  /* bouton d'ajout flottant en bas à droite, sous le pouce */
  .viewbar > [data-act="new"]{position:fixed;z-index:15;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));
    border-radius:999px;padding:12px 18px;box-shadow:0 4px 14px rgb(0 0 0 / .25)}
}

.empty{background:var(--surface);border:1px dashed var(--line);border-radius:var(--r);padding:36px 22px;text-align:center;display:grid;gap:12px;justify-items:center}
.empty p{margin:0;color:var(--muted);max-width:52ch}