/* tools.css — the free tools: hub (/outils, /en/tools) and the ToolShell of
   Le Miroir, Ce que vaut 1 %, Ton buffet. Builds on site.css (tokens, .btn,
   .kicker, .lede, .ctaband). Mobile first: one column, tables stacked as
   cards; 640 px and 960 px open the grids. Nothing here may make the page
   wider than the screen: wide content scrolls inside its own frame. */

/* ── hero and header ─────────────────────────────────────────────────────── */
.tl-hero{padding:36px 0 28px;background:linear-gradient(180deg,var(--fos-card-bg),var(--fos-white))}
.tl-hero h1{font-size:32px;max-width:820px}
.tl-hero .lede{margin-top:14px}
.tl-hero-tool{padding-top:20px}
.tl-crumb{font-size:13px;color:var(--fos-muted);margin-bottom:18px}
.tl-crumb a{color:var(--fos-blue);font-weight:600;text-decoration:none}
.tl-crumb a:hover{text-decoration:underline}
.tl-head{display:grid;gap:24px;align-items:center}
/* On a phone the tool comes first: the illustration stays small. */
.tl-head-img{width:100%;max-width:220px;border-radius:var(--fos-radius)}
.tl-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.tl-meta span{font-size:12px;font-weight:700;color:var(--fos-ink);background:var(--fos-white);border:1px solid var(--fos-card-border);border-radius:999px;padding:4px 10px}
.tl-privacy{font-size:14px;color:var(--fos-muted);margin-top:12px;max-width:620px}

/* ── the calculation zone ────────────────────────────────────────────────── */
.tl-body{padding:8px 0 64px}
.tl-calc{display:grid;gap:18px}
.tl-total{font-size:15px;color:var(--fos-body)}
.tl-total b{font-size:20px;color:var(--fos-ink);font-variant-numeric:tabular-nums;margin:0 4px}
.tl-total-n{color:var(--fos-muted);font-size:13px}
.tl-gauges{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tl-gauge{background:var(--fos-white);border:1px solid var(--fos-card-border);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:7px;min-width:0}
.tl-gauge-l{font-size:13px;font-weight:600;color:var(--fos-ink);line-height:1.3}
.tl-gauge-v{font-size:28px;font-weight:800;color:var(--fos-ink);font-variant-numeric:tabular-nums;line-height:1}
.tl-meter{display:block;height:6px;border-radius:6px;background:var(--fos-line);overflow:hidden}
.tl-meter span{display:block;height:100%;background:var(--fos-blue);transition:width .2s}
.tl-gauge-h{font-size:12px;color:var(--fos-muted);line-height:1.35}
/* A status is a word AND a colour: never the colour alone. */
.tl-st{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700}
.tl-st::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.tl-st[data-st="ok"]{color:#147A43}
.tl-st[data-st="warn"]{color:#9A5B00}
.tl-st[data-st="bad"]{color:#B42F2B}
.tl-st[data-st="none"]{color:var(--fos-muted)}
/* The bar takes the colour of its status (the word next to it says it too). */
.tl-gauge:has([data-st="ok"]) .tl-meter span{background:var(--fos-green)}
.tl-gauge:has([data-st="warn"]) .tl-meter span{background:var(--fos-amber)}
.tl-gauge:has([data-st="bad"]) .tl-meter span{background:var(--fos-red)}

/* tables: stacked cards on small screens, a real table from 960 px */
.tl-tablewrap{max-width:100%}
.tl-table{width:100%;border-collapse:collapse;font-size:15px}
.tl-table thead{display:none}
.tl-table tbody{display:block}
.tl-table tr{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 12px;background:var(--fos-white);border:1px solid var(--fos-card-border);border-radius:12px;padding:12px;margin-bottom:10px}
.tl-table td{display:flex;flex-direction:column;gap:4px;min-width:0}
.tl-table td::before{content:attr(data-l);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--fos-muted);font-weight:700}
.tl-table td.tl-wide,.tl-table td.tl-end{grid-column:1/-1}
/* « remove » sits in the card's top-right corner instead of taking a row */
.tl-table td.tl-end{position:absolute;top:2px;right:2px}
.tl-table td.tl-end::before{content:none}
.tl-table td.tl-out{font-weight:700;color:var(--fos-ink);font-variant-numeric:tabular-nums;justify-content:flex-start}
.tl-table input,.tl-table select{width:100%;min-width:0;font:400 16px/1.3 var(--fos-sans);color:var(--fos-ink);background:var(--fos-white);border:1px solid var(--fos-card-border);border-radius:8px;padding:8px 9px}
.tl-table input:focus,.tl-table select:focus{border-color:var(--fos-blue);outline:none;box-shadow:0 0 0 3px rgba(59,110,255,.15)}
.tl-calc [aria-invalid="true"]{border-color:var(--fos-red);background:#FFF6F5}
/* « remove »: a ✕ with a 44 × 44 px target; its name is in the aria-label */
.tl-rm{background:none;border:none;color:var(--fos-muted);cursor:pointer;font:600 18px/1 var(--fos-sans);min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px}
.tl-rm:hover{color:var(--fos-red);background:#FDF0EF}
.tl-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.tl-actions .btn{color:var(--fos-blue)}
.tl-example{font-size:13px;color:var(--fos-muted)}
.tl-verdict{background:var(--fos-ink);color:#DCE3F5;border-radius:var(--fos-radius);padding:22px;display:grid;gap:10px}
.tl-verdict .kicker{color:var(--fos-blue-soft);margin:0}
.tl-verdict h2{color:#fff;font-size:24px}
.tl-verdict ul{padding-left:18px;display:grid;gap:8px}

/* fields (1 %, decision) */
.tl-fields{display:grid;gap:14px}
.tl-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.tl-field label{font-size:14px;font-weight:600;color:var(--fos-ink)}
.tl-field input,.tl-field select{font:400 17px/1.3 var(--fos-sans);color:var(--fos-ink);padding:11px 12px;border:1px solid var(--fos-card-border);border-radius:10px;background:var(--fos-white);width:100%;min-width:0}
.tl-field input[inputmode="decimal"]{font-variant-numeric:tabular-nums;font-weight:600}
.tl-field input:focus,.tl-field select:focus{border-color:var(--fos-blue);outline:none;box-shadow:0 0 0 3px rgba(59,110,255,.15)}
.tl-hint{font-size:13px;color:var(--fos-muted);line-height:1.4}
.tl-invalid{font-size:13px;color:#B42F2B;font-weight:600}

/* 1 %: base line and the four levers */
.tl-base{display:flex;flex-wrap:wrap;gap:8px 24px;background:var(--fos-white);border:1px solid var(--fos-card-border);border-radius:12px;padding:14px 16px;font-size:15px}
.tl-base b{color:var(--fos-ink);font-variant-numeric:tabular-nums}
.tl-base b.neg{color:#B42F2B}
.tl-levers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tl-lever{background:var(--fos-white);border:1px solid var(--fos-card-border);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:5px;min-width:0}
.tl-lever-l{font-weight:700;font-size:14px;color:var(--fos-ink)}
.tl-lever-v{font-size:22px;font-weight:800;color:var(--fos-ink);font-variant-numeric:tabular-nums;line-height:1.1}
.tl-lever-e{font-size:13px;font-weight:600;color:var(--fos-blue-ink)}
.tl-lever-n{font-size:12px;color:var(--fos-muted);line-height:1.35}

/* buffet: map, legend, decision */
.tl-buf-grid{display:grid;gap:16px}
.tl-map svg{display:block;width:100%;height:auto;border:1px solid var(--fos-card-border);border-radius:12px;background:#fff}
/* The map is drawn at 560 px wide: on a phone, CSS (which beats the SVG's own
   font-size attribute) keeps its labels readable once scaled down. */
.tl-map .a{font-size:16px}
.tl-map .p{font-size:18px}
.tl-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tl-leg{background:var(--fos-white);border:1px solid var(--fos-card-border);border-radius:12px;padding:12px;font-size:13px;display:grid;gap:6px;align-content:start}
.tl-leg b{color:var(--fos-ink)}
.tl-badge{display:inline-block;padding:3px 8px;border-radius:6px;font-size:12px;font-weight:700;white-space:nowrap;justify-self:start;align-self:flex-start}
.tl-b-vip{background:#E3F5EA;color:#146B3C}
.tl-b-counter{background:#E6ECFF;color:var(--fos-blue-ink)}
.tl-b-buffet{background:#FDF1DE;color:#7A4800}
.tl-b-squatter{background:#FBE6E5;color:#9B2C25}
.tl-ini{max-width:110px}
.tl-buf-ex{margin:0}
.tl-decision{background:var(--fos-card-bg);border:1px solid var(--fos-card-border);border-radius:var(--fos-radius);padding:18px;display:grid;gap:14px}
.tl-decision .kicker{margin:0}
.tl-sentence{font-size:16px;font-weight:600;color:var(--fos-ink)}

/* ── the ToolShell foot ──────────────────────────────────────────────────── */
.tl-foot{display:grid;gap:16px;margin-top:28px}
.tl-blind,.tl-rules{border:1px solid var(--fos-card-border);border-radius:var(--fos-radius);padding:22px;display:grid;gap:12px;align-content:start}
.tl-blind{background:var(--fos-white);border-left:4px solid var(--fos-blue)}
.tl-blind .btn{justify-self:start}
.tl-blind .kicker,.tl-rules .kicker{margin:0}
.tl-week{font-size:14px;color:var(--fos-muted)}
.tl-rules{background:var(--fos-card-bg);font-size:14px}
.tl-rules ul{padding-left:18px;display:grid;gap:6px}

/* ── cards (hub and « the other tools ») ─────────────────────────────────── */
.tl-hub{padding:8px 0 64px}
.tl-cards{display:grid;gap:16px}
.tl-card{display:flex;flex-direction:column;background:var(--fos-white);border:1px solid var(--fos-card-border);border-radius:var(--fos-radius);overflow:hidden;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s}
.tl-card:hover{border-color:var(--fos-blue);box-shadow:0 18px 40px -28px rgba(11,14,20,.4)}
.tl-card img{width:100%;aspect-ratio:7/4;object-fit:cover;object-position:50% 25%;border-bottom:1px solid var(--fos-line)}
.tl-card-b{display:flex;flex-direction:column;gap:8px;padding:18px;flex:1}
.tl-card h2,.tl-card h3{font-size:21px}
.tl-card-p{font-size:15px;color:var(--fos-body)}
.tl-card .tl-meta{margin-top:auto;padding-top:6px}
.tl-card .tl-meta span{background:var(--fos-card-bg)}
.tl-how-p{font-size:15px;color:var(--fos-body);margin-top:20px;max-width:640px}
.tl-how-title{font-size:24px;margin:48px 0 16px}
.tl-how{display:grid;gap:14px}
.tl-how>div{border-top:2px solid var(--fos-blue);padding-top:12px}
.tl-how h3{font-size:17px;margin-bottom:6px}
.tl-how p{font-size:15px}
.tl-more{background:var(--fos-card-bg);padding:48px 0 56px;border-top:1px solid var(--fos-line)}
.tl-more h2{font-size:24px;margin-bottom:18px}

/* Phones: denser cards. Three fields per line, the first cell leaves room for
   the ✕ in the corner. Below 960 px only: from 960 px the rows are a table. */
@media (max-width:959px){
  .tl-mir .tl-table tr,.tl-buf .tl-table tr{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 10px}
  .tl-mir .tl-table td:nth-child(1){grid-column:1/-1;grid-row:1;padding-right:44px}
  .tl-mir .tl-table td:nth-child(2){grid-column:1/3;grid-row:2}
  .tl-mir .tl-table td:nth-child(5){grid-column:3;grid-row:2}
  .tl-mir .tl-table td:nth-child(3){grid-column:1;grid-row:3}
  .tl-mir .tl-table td:nth-child(4){grid-column:2;grid-row:3}
  .tl-mir .tl-table td:nth-child(6){grid-column:3;grid-row:3}
  .tl-buf .tl-table td:nth-child(1){grid-column:1/-1;padding-right:44px}
  .tl-buf .tl-table td:nth-child(8){grid-column:1/-1}
  .tl-mir .tl-table input,.tl-mir .tl-table select,.tl-buf .tl-table input{padding:7px 8px}
  /* a label on two lines must not push its field below its neighbours' */
  .tl-mir .tl-table td,.tl-buf .tl-table td{justify-content:space-between}
}
@media (max-width:639px){
  /* the tool comes first: on a phone the illustration of a tool page goes
     (the hub cards keep theirs) */
  .tl-hero-tool .tl-head-img{display:none}
}
@media (min-width:640px){
  .tl-hero h1{font-size:40px}
  .tl-head-img{max-width:320px}
  .tl-fields{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tl-cards,.tl-how{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tl-cards-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tl-legend{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tl-map .a{font-size:13px}
  .tl-map .p{font-size:14px}
}
@media (min-width:960px){
  .tl-hero{padding:48px 0 36px}
  .tl-hero h1{font-size:44px}
  .tl-head{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:40px}
  .tl-head-img{max-width:none}
  .tl-gauges,.tl-levers{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tl-buf-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:start}
  /* the client list back on top, the result under it */
  .tl-buf .tl-tablewrap{order:1}
  .tl-buf .tl-actions{order:2}
  .tl-buf .tl-buf-ex{order:3}
  .tl-buf .tl-buf-grid{order:4}
  .tl-buf .tl-decision{order:5}
  .tl-map .a{font-size:11px}
  .tl-map .p{font-size:12px}
  .tl-legend{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tl-foot{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
  /* A real table again. If the viewport is narrower than its content, it
     scrolls inside its frame — the page itself never widens. */
  .tl-tablewrap{overflow-x:auto;border:1px solid var(--fos-card-border);border-radius:12px;background:var(--fos-white)}
  .tl-table{display:table;min-width:820px}
  .tl-table thead{display:table-header-group}
  .tl-table tbody{display:table-row-group}
  .tl-table tr{display:table-row;border:none;border-radius:0;padding:0;margin:0;background:none}
  .tl-table td{display:table-cell;padding:6px 8px;border-bottom:1px solid var(--fos-line);vertical-align:middle}
  .tl-table tbody tr:last-child td{border-bottom:none}
  .tl-table td::before{content:none}
  .tl-table td.tl-end{position:static}
  .tl-table th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--fos-muted);font-weight:700;padding:10px 8px;border-bottom:1px solid var(--fos-line);background:var(--fos-card-bg);white-space:nowrap}
  .tl-table .tl-num{text-align:right}
  .tl-table td.tl-out{text-align:right;white-space:nowrap}
  .tl-table input,.tl-table select{font-size:15px;border-color:transparent;background:transparent;padding:7px}
  .tl-table input:hover,.tl-table select:hover{border-color:var(--fos-card-border)}
  .tl-table input:focus,.tl-table select:focus{background:var(--fos-white)}
  .tl-table td.tl-num input{text-align:right;font-variant-numeric:tabular-nums;min-width:64px}
  .tl-mir .tl-table td:first-child{width:30%}
  .tl-mir .tl-table select[data-f="category"]{min-width:196px}
  .tl-mir .tl-table select[data-f="runs"]{min-width:92px}
}
@media (prefers-reduced-motion:reduce){.tl-meter span,.tl-card{transition:none}}