/* ============================================================
   GESTACLIC — Outils (calendrier, glossaire, fiches)
   ============================================================ */

.tools-hero{ padding:44px 0 8px; }
.tools-hero .crumb{ display:flex; align-items:center; gap:8px; font-size:.84rem; color:var(--ink-faint); margin-bottom:14px; }
.tools-hero .crumb a{ color:var(--ink-soft); font-weight:600; }
.tools-hero .crumb a:hover{ color:var(--teal-700); }
.tools-hero .crumb .sep{ color:var(--line); }
.tools-hero h1{ font-size:clamp(2rem,3vw,2.7rem); margin:.2em 0 .35em; }
.tools-hero p{ color:var(--ink-soft); font-size:1.06rem; max-width:60ch; }

/* sub-nav tabs */
.tabbar{ position:sticky; top:78px; z-index:30; background:var(--bg); border-bottom:1px solid var(--line-soft); }
.tabbar .wrap{ display:flex; gap:6px; padding-top:10px; padding-bottom:10px; }
.tabbar a{
  padding:.6em 1.1em; border-radius:999px; font-weight:700; font-size:.92rem; color:var(--ink-soft);
  display:inline-flex; align-items:center; gap:.5em; transition:.15s; white-space:nowrap;
}
.tabbar a:hover{ background:var(--surface-2); color:var(--ink); }
.tabbar a.active{ background:var(--teal-700); color:#fff; }

.tool-section{ padding:54px 0; scroll-margin-top:150px; }
.tool-section + .tool-section{ border-top:1px solid var(--line-soft); }
.ts-head{ display:flex; align-items:flex-end; gap:16px; justify-content:space-between; flex-wrap:wrap; margin-bottom:28px; }
.ts-head h2{ margin:.2em 0 .3em; }
.ts-head .sub{ color:var(--ink-soft); max-width:58ch; }
.ts-head .ico-badge{
  width:54px; height:54px; border-radius:16px; flex:none; display:grid; place-items:center;
  background:var(--teal-100); color:var(--teal-700);
}
.ts-head.rose .ico-badge{ background:var(--rose-100); color:var(--rose-600); }

/* ---------- Calendar ---------- */
.cal{ display:grid; grid-template-columns:340px 1fr; gap:30px; align-items:start; }
.cal-form{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); padding:26px; }
.cal-form label.fl{ display:block; font-weight:700; font-size:.86rem; margin-bottom:8px; color:var(--ink); }
.cal-form .hint{ font-size:.82rem; color:var(--ink-faint); margin:0 0 18px; }
.cal-form input[type=date]{
  width:100%; padding:.8em .9em; font-family:inherit; font-size:1rem; color:var(--ink);
  border:1.5px solid var(--line); border-radius:var(--r-md); background:var(--bg); margin-bottom:14px;
}
.cal-form input[type=date]:focus{ outline:none; border-color:var(--teal-600); box-shadow:0 0 0 3px var(--teal-100); }
.cal-form .btn{ width:100%; justify-content:center; }

.cal-result{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); padding:28px 30px; min-height:200px; }
.cal-result[hidden]{ display:none; }
.cal-term{ display:flex; align-items:baseline; gap:14px; padding-bottom:18px; margin-bottom:6px; border-bottom:1px solid var(--line-soft); }
.cal-term-v{ font-family:var(--font-head); font-size:2.4rem; color:var(--teal-800); line-height:1; }
.cal-term-l{ font-weight:700; color:var(--rose-600); font-size:.9rem; letter-spacing:.04em; text-transform:uppercase; }
.cal-rows{ display:flex; flex-direction:column; }
.cal-row{ display:flex; justify-content:space-between; align-items:baseline; gap:18px; padding:12px 0; border-top:1px solid var(--line-soft); }
.cal-row:first-child{ border-top:0; }
.cal-k{ color:var(--ink-soft); font-size:.94rem; }
.cal-v{ font-weight:700; text-align:right; }
.cal-v em{ font-style:normal; font-weight:600; color:var(--ink-faint); font-size:.8rem; font-family:ui-monospace,Menlo,monospace; margin-left:6px; }
.cal-err{ color:var(--risk); font-weight:600; margin:0; }
.cal-placeholder{ color:var(--ink-faint); font-size:.95rem; display:flex; align-items:center; gap:10px; }

/* ---------- Glossary ---------- */
.gloss-search{ position:relative; max-width:420px; margin-bottom:6px; }
.gloss-search input{
  width:100%; padding:.8em 1em .8em 2.6em; font-family:inherit; font-size:1rem;
  border:1.5px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink);
}
.gloss-search input:focus{ outline:none; border-color:var(--teal-600); box-shadow:0 0 0 3px var(--teal-100); }
.gloss-search .si{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--ink-faint); }
.gloss-count{ font-size:.82rem; color:var(--ink-faint); margin:10px 0 22px; font-weight:600; }
.gloss-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.gloss-item{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:18px 20px; box-shadow:var(--shadow-sm); }
.gloss-item .abbr{ font-family:var(--font-head); font-size:1.15rem; color:var(--teal-800); margin-bottom:2px; }
.gloss-item .full{ font-size:.82rem; font-weight:700; color:var(--rose-600); margin-bottom:7px; letter-spacing:.01em; }
.gloss-item .def{ font-size:.92rem; color:var(--ink-soft); margin:0; line-height:1.5; }
.gloss-empty{ color:var(--ink-faint); padding:24px 0; }
.gloss-empty[hidden]{ display:none; }

/* ---------- Fiches ---------- */
.fiche-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.fiche{
  display:flex; flex-direction:column; gap:12px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; box-shadow:var(--shadow-sm); transition:.2s;
}
.fiche:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.fiche .ft{ display:flex; align-items:center; gap:12px; }
.fiche .fi{ width:40px; height:40px; border-radius:11px; background:var(--rose-100); color:var(--rose-600); display:grid; place-items:center; flex:none; }
.fiche h3{ font-size:1.05rem; }
.fiche p{ font-size:.9rem; color:var(--ink-soft); margin:0; flex:1; }
.fiche .dl{ font-size:.84rem; font-weight:700; color:var(--teal-700); display:inline-flex; align-items:center; gap:.4em; }
.fiche:hover .dl .arrow{ transform:translateX(3px); }

@media (max-width:980px){
  .cal{ grid-template-columns:1fr; }
  .gloss-grid{ grid-template-columns:1fr; }
  .fiche-grid{ grid-template-columns:1fr; }
  .tabbar{ top:0; overflow-x:auto; }
}