/*
 * apps/patrimoine/static/outil.css
 * --------------------------------
 * PÉRIMÈTRE : tout l'habillage de l'APPLICATION Patrimoine et budget (la
 * page `/patrimoine-et-budget/outil/`), classes préfixées `pt-` (contrat §3.5).
 * Les pages publiques ont leur propre feuille (`patrimoine.css`, lot 1).
 *
 * L'outil vit DANS le cadre du site d'A Free Lunch : en-tête, pied, largeur
 * de page et police viennent de `apps/_shared/templates/afl/base.html`. Cette
 * feuille RELIT ses variables (`--corail-dark`, `--rose`, `--noir`, `--gris`,
 * `--gris-bord`, `--font-heading`, `--font-body`, et les neutres du cadre
 * commun) au lieu d'en inventer. Un repli en dur suit chaque variable, pour
 * que l'outil reste lisible même servi hors du cadre.
 *
 * POURQUOI tous les sélecteurs commencent par `:where(#outil)` : rien ne doit
 * déborder sur le cadre du site (aucune règle sur `body`, `a`, `h1`...), et
 * `:where()` ne pèse rien dans la priorité : un écran qui pose son propre
 * style `pt-<ecran>-...` (contrat §3.5) l'emporte sans avoir à surenchérir.
 *
 * POURQUOI l'accent de l'outil est un corail ASSOMBRI et pas `--corail-dark`
 * tel quel : le corail foncé de la marque (#E04045) ne fait que 4,2:1 sur
 * blanc, sous le seuil de 4,5:1 exigé pour un texte ou un bouton. On le
 * fonce de 15 % ici, sans toucher à la couleur de marque du bandeau.
 *
 * POURQUOI ces six couleurs de série, dans cet ordre : l'ordre a été contrôlé
 * pour que deux voisines restent distinguables par un lecteur daltonien, et
 * chacune fait au moins 3:1 sur blanc. La première est le corail de la
 * marque. On ne les réarrange pas, on n'en ajoute pas une septième.
 *
 * Mise en page pensée d'abord pour 390 px de large : une colonne, cibles de
 * 44 px, tableaux qui défilent DANS leur cadre et jamais la page.
 */

#outil {
  --pt-encre: var(--marque-encre, var(--noir, #1a1a1a));
  --pt-encre-2: var(--neutre-texte-2, #555555);
  --pt-surface: var(--neutre-surface, #ffffff);
  --pt-fond-doux: var(--color-primary-light, var(--rose, #fff5f5));
  --pt-filet: var(--marque-filet, var(--gris-bord, #eeeeee));
  /* Le contour d'un champ doit se voir : 4,5:1 sur blanc. */
  --pt-filet-champ: #767676;
  --pt-accent: #be363b;
  --pt-accent: color-mix(in srgb, var(--corail-dark, #e04045) 85%, #000);
  --pt-accent-fort: #92292d;
  --pt-accent-fort: color-mix(in srgb, var(--corail-dark, #e04045) 65%, #000);
  --pt-sur-accent: #ffffff;
  --pt-positif: #146c2e;
  --pt-negatif: var(--pt-accent-fort);
  --pt-rayon: 10px;
  --pt-ombre: var(--m-carte-ombre, 0 1px 4px rgba(31, 78, 121, 0.06));

  --pt-serie-1: var(--corail-dark, #e04045);
  --pt-serie-2: #2a78d6;
  --pt-serie-3: #c98500;
  --pt-serie-4: #199e70;
  --pt-serie-5: #6250d6;
  --pt-serie-6: #008300;

  color: var(--pt-encre);
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 1rem;
  line-height: 1.5;
  padding: 20px 0 48px;
  /* Un mot trop long (un libellé bancaire) se coupe au lieu d'élargir la page. */
  overflow-wrap: anywhere;
  min-width: 0;
}

:where(#outil) *,
:where(#outil) *::before,
:where(#outil) *::after { box-sizing: border-box; }

:where(#outil) [hidden] { display: none !important; }

/* ── Focus : toujours visible, sur tout ce qui se manipule ─────────────── */
:where(#outil) :focus-visible {
  outline: 3px solid var(--pt-accent);
  outline-offset: 2px;
  border-radius: 4px;
}
:where(#outil) .pt-ecran:focus { outline: none; }
/* Le titre d'écran reçoit le focus par programme (changement d'écran, après
   une modification) : pas de contour à la souris, un contour au clavier. */
:where(#outil) h2[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

/* ── Textes et liens ───────────────────────────────────────────────────── */
:where(#outil) a { color: var(--pt-accent); text-decoration: underline; text-underline-offset: 2px; }
:where(#outil) a:hover { color: var(--pt-accent-fort); }
:where(#outil) p { margin: 0 0 0.75rem; }
:where(#outil) p:last-child { margin-bottom: 0; }

:where(#outil) .pt-entete {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end;
  gap: 4px 16px; margin-bottom: 8px;
}
/* En démonstration, l'en-tête ne porte que le titre réservé aux lecteurs d'écran. */
:where(#outil) .pt-entete:has(> .pt-sr:only-child) { margin-bottom: 0; }
:where(#outil) .pt-entete__titre {
  font-family: var(--font-heading, inherit); font-size: 1.5rem; font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.2; margin: 0; color: var(--pt-encre);
}
:where(#outil) .pt-entete__note { margin: 0; font-size: 0.8rem; color: var(--pt-encre-2); }

:where(#outil) .pt-titre {
  font-family: var(--font-heading, inherit); font-size: 1.3rem; font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.25; margin: 0 0 1rem; color: var(--pt-encre);
}
:where(#outil) .pt-sous-titre {
  font-family: var(--font-heading, inherit); font-size: 1rem; font-weight: 700;
  line-height: 1.3; margin: 0 0 0.6rem; color: var(--pt-encre);
}
:where(#outil) .pt-note { font-size: 0.875rem; color: var(--pt-encre-2); }
:where(#outil) .pt-liste { margin: 0 0 0.75rem; padding-left: 1.2rem; }
:where(#outil) .pt-liste li { margin-bottom: 0.35rem; }

/* Texte réservé aux lecteurs d'écran. */
:where(#outil) .pt-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Bandeau de démonstration ──────────────────────────────────────────── */
/* Une ligne : il rappelle le mode, il ne doit pas pousser l'écran vers le bas. */
:where(#outil) .pt-bandeau-demo {
  background: var(--pt-fond-doux); color: var(--pt-encre);
  border: 1px solid var(--pt-filet); border-left: 4px solid var(--pt-accent);
  border-radius: 6px; padding: 3px 8px; margin: 0 0 8px; font-size: 0.8125rem; line-height: 1.4;
  border-left-width: 3px;
}
:where(#outil) .pt-bandeau-demo a { display: inline-block; padding: 2px 0; }

/* ── Navigation entre les écrans ───────────────────────────────────────── */
/* POURQUOI collants : sur un écran de 390 px, Budget ou Simulation font
   plusieurs milliers de pixels, et changer d'écran obligeait à tout remonter.
   Le fond est celui de la page, pour que le contenu ne se lise pas dessous. */
:where(#outil) .pt-nav {
  display: flex; gap: 2px; margin: 0 0 20px;
  border-bottom: 1px solid var(--pt-filet-champ);
  position: sticky; top: 0; z-index: 5;
  background: var(--marque-fond, #ffffff);
}
:where(#outil) .pt-nav__lien {
  flex: 1 1 0; min-width: 0; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  padding: 8px 4px; text-align: center;
  /* Un nom d'écran ne se coupe jamais au milieu d'un mot (sous 360 px, la
     grille 2 x 2 plus bas lui donne la place). */
  overflow-wrap: normal; word-break: normal; hyphens: manual;
  font-family: var(--font-heading, inherit); font-size: 0.9rem; font-weight: 600;
  color: var(--pt-encre-2); text-decoration: none;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
  border-radius: 6px 6px 0 0;
}
:where(#outil) .pt-nav__lien:hover { color: var(--pt-encre); background: var(--pt-fond-doux); }
:where(#outil) .pt-nav__lien[aria-current="page"] {
  color: var(--pt-encre); font-weight: 700; border-bottom-color: var(--pt-accent);
}

/* ── Boutons ───────────────────────────────────────────────────────────── */
:where(#outil) .pt-bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 9px 18px;
  font: inherit; font-family: var(--font-heading, inherit); font-size: 0.95rem; font-weight: 700; line-height: 1.2;
  color: var(--pt-sur-accent); background: var(--pt-accent);
  border: 2px solid var(--pt-accent); border-radius: 8px;
  text-decoration: none; text-align: center; cursor: pointer;
}
:where(#outil) .pt-bouton:hover { background: var(--pt-accent-fort); border-color: var(--pt-accent-fort); color: var(--pt-sur-accent); }
:where(#outil) .pt-bouton--secondaire { color: var(--pt-accent); background: var(--pt-surface); }
:where(#outil) .pt-bouton--secondaire:hover { color: var(--pt-accent-fort); background: var(--pt-fond-doux); border-color: var(--pt-accent-fort); }
:where(#outil) .pt-bouton--discret {
  color: var(--pt-encre-2); background: transparent; border-color: transparent;
  text-decoration: underline; text-underline-offset: 2px; font-weight: 600; padding-inline: 8px;
}
:where(#outil) .pt-bouton--discret:hover { color: var(--pt-encre); background: var(--pt-fond-doux); border-color: transparent; }
:where(#outil) .pt-bouton--danger { background: var(--pt-accent-fort); border-color: var(--pt-accent-fort); }
:where(#outil) .pt-bouton--danger:hover { background: var(--pt-encre); border-color: var(--pt-encre); }
:where(#outil) .pt-bouton--petit { min-height: 44px; padding: 6px 12px; font-size: 0.875rem; }
:where(#outil) .pt-bouton:disabled,
:where(#outil) .pt-bouton[aria-disabled="true"] {
  color: #5c5c5c; background: #e6e6e6; border-color: #e6e6e6; cursor: not-allowed;
}
:where(#outil) .pt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
:where(#outil) .pt-actions--centre { justify-content: center; }

/* ── Cartes, grilles ───────────────────────────────────────────────────── */
:where(#outil) .pt-carte {
  background: var(--pt-surface); border: 1px solid var(--pt-filet);
  border-radius: var(--pt-rayon); box-shadow: var(--pt-ombre);
  padding: 16px; min-width: 0;
}
:where(#outil) .pt-carte__titre {
  font-family: var(--font-heading, inherit); font-size: 1.05rem; font-weight: 700;
  line-height: 1.3; margin: 0 0 0.75rem; color: var(--pt-encre);
}
:where(#outil) .pt-pile { display: grid; gap: 16px; }
:where(#outil) .pt-pile > * { min-width: 0; }
:where(#outil) .pt-grille {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
:where(#outil) .pt-grille > * { min-width: 0; }
:where(#outil) .pt-grille--2 { grid-template-columns: 1fr; }
:where(#outil) .pt-grille--3 { grid-template-columns: 1fr; }

/* ── Chiffres clés ─────────────────────────────────────────────────────── */
:where(#outil) .pt-chiffres {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
}
:where(#outil) .pt-chiffre {
  background: var(--pt-surface); border: 1px solid var(--pt-filet);
  border-radius: var(--pt-rayon); padding: 14px 16px; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
:where(#outil) .pt-chiffre__libelle { font-size: 0.85rem; font-weight: 600; color: var(--pt-encre-2); }
:where(#outil) .pt-chiffre__valeur {
  font-family: var(--font-heading, inherit); font-size: 1.6rem;
  font-weight: var(--m-stat-graisse, 800); letter-spacing: var(--m-stat-espacement, -0.02em);
  line-height: 1.15; color: var(--pt-encre); font-variant-numeric: tabular-nums;
}
:where(#outil) .pt-chiffre__note { font-size: 0.8rem; color: var(--pt-encre-2); }
/* Le chiffre principal prend toute la ligne : à 390 px, une demi-colonne le couperait en deux. */
:where(#outil) .pt-chiffre--principal { background: var(--pt-fond-doux); grid-column: 1 / -1; }
:where(#outil) .pt-chiffre--principal .pt-chiffre__valeur { font-size: 2rem; }
/* Hausse et baisse : la couleur double un signe écrit, elle ne le remplace pas. */
:where(#outil) .pt-positif { color: var(--pt-positif); }
:where(#outil) .pt-negatif { color: var(--pt-negatif); }

/* ── Tableaux ──────────────────────────────────────────────────────────── */
/* Le cadre défile horizontalement à la place de la page. */
:where(#outil) .pt-tableau-cadre { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
:where(#outil) .pt-tableau {
  width: 100%; border-collapse: collapse; font-size: var(--m-tableau-taille, 0.9rem);
  font-variant-numeric: tabular-nums;
}
:where(#outil) .pt-tableau th,
:where(#outil) .pt-tableau td {
  padding: 0.5rem 0.6rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--pt-filet); overflow-wrap: normal;
}
:where(#outil) .pt-tableau thead th {
  font-weight: 700; color: var(--pt-encre); white-space: nowrap;
  border-bottom: 2px solid var(--pt-filet-champ);
}
:where(#outil) .pt-tableau tbody th { font-weight: 600; }
:where(#outil) .pt-tableau tfoot td,
:where(#outil) .pt-tableau tfoot th { font-weight: 700; border-top: 2px solid var(--pt-filet-champ); border-bottom: 0; }
:where(#outil) .pt-tableau .pt-num,
:where(#outil) .pt-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── Formulaires ───────────────────────────────────────────────────────── */
:where(#outil) .pt-formulaire { display: grid; gap: 12px; }
:where(#outil) .pt-champ { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
:where(#outil) .pt-champ__libelle,
:where(#outil) .pt-champ > label { font-size: 0.9rem; font-weight: 600; color: var(--pt-encre); }
:where(#outil) .pt-champ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
:where(#outil) .pt-champ select,
:where(#outil) .pt-champ textarea {
  width: 100%; min-height: 44px; padding: 8px 10px;
  /* 16 px au moins : en dessous, un téléphone zoome dans la page au focus. */
  font: inherit; font-size: 1rem; color: var(--pt-encre); background: var(--pt-surface);
  border: 1px solid var(--pt-filet-champ); border-radius: 6px;
}
:where(#outil) .pt-champ textarea { min-height: 120px; resize: vertical; }
:where(#outil) .pt-champ input[type="file"] { padding: 7px; }
/* Une liste déroulante hors champ (un filtre, le choix du mois) : même cible de 44 px. */
:where(#outil) select { min-height: 44px; }
:where(#outil) .pt-champ input:focus-visible,
:where(#outil) .pt-champ select:focus-visible,
:where(#outil) .pt-champ textarea:focus-visible { outline-offset: 0; border-color: var(--pt-accent); }
:where(#outil) .pt-champ__aide { margin: 0; font-size: 0.82rem; color: var(--pt-encre-2); }
:where(#outil) .pt-champ__erreur { margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--pt-negatif); }
:where(#outil) .pt-champ--ligne { flex-direction: row; align-items: center; gap: 8px; }
:where(#outil) .pt-champ--ligne input[type="checkbox"],
:where(#outil) .pt-champ--ligne input[type="radio"] { width: 20px; height: 20px; accent-color: var(--pt-accent); flex: none; }

/* ── Messages, erreurs, états vides ────────────────────────────────────── */
:where(#outil) .pt-messages:not(:empty) { margin-bottom: 16px; }
:where(#outil) .pt-message {
  position: relative; margin: 0; padding: 12px 14px; border-radius: 8px;
  border: 1px solid var(--pt-filet); border-left-width: 4px;
  background: var(--pt-fond-doux); color: var(--pt-encre); font-size: 0.95rem;
}
:where(#outil) .pt-message__texte { margin: 0 0 0.4rem; }
:where(#outil) .pt-message__texte:last-child { margin-bottom: 0; }
:where(#outil) .pt-message__liste { margin: 0.25rem 0 0; padding-left: 1.2rem; }
:where(#outil) .pt-message__liste li { margin-bottom: 0.25rem; }
:where(#outil) .pt-message--info { background: var(--neutre-pied, #f8f8f8); border-left-color: var(--pt-encre-2); }
:where(#outil) .pt-message--erreur {
  background: var(--etat-erreur-fond, #fef2f2); color: var(--etat-erreur-texte, #7f1d1d);
  border-color: #f0b4b4; border-left-color: #b42318;
}
:where(#outil) .pt-message--succes {
  background: var(--etat-ok-fond, #e7faf0); color: var(--etat-ok-texte, #085229);
  border-color: #a9dfc0; border-left-color: #146c2e;
}
:where(#outil) .pt-message--alerte {
  background: var(--etat-alerte-fond, #fffbeb); color: var(--etat-alerte-texte, #7a350b);
  border-color: #f0d48a; border-left-color: #a15c07;
}
:where(#outil) .pt-messages .pt-message { padding-right: 52px; }
:where(#outil) .pt-message__fermer {
  position: absolute; top: 2px; right: 2px; width: 44px; height: 44px;
  font: inherit; font-size: 1.4rem; line-height: 1; color: inherit;
  background: transparent; border: 0; border-radius: 6px; cursor: pointer;
}
:where(#outil) .pt-message__fermer:hover { background: rgba(0, 0, 0, 0.07); }
:where(#outil) .pt-message--ecran { padding: 18px; }
:where(#outil) .pt-message__technique { margin-top: 0.4rem; font-size: 0.85rem; }
:where(#outil) .pt-message__technique > summary { cursor: pointer; padding: 6px 0; text-decoration: underline; text-underline-offset: 2px; }

:where(#outil) .pt-vide {
  padding: 24px 16px; text-align: center; color: var(--pt-encre-2);
  background: var(--pt-surface); border: 1px dashed var(--pt-filet-champ); border-radius: var(--pt-rayon);
}
:where(#outil) .pt-vide--accueil { padding: 36px 18px; color: var(--pt-encre); background: var(--pt-fond-doux); border-style: solid; border-color: var(--pt-filet); }
:where(#outil) .pt-vide--accueil > p { max-width: 56ch; margin-inline: auto; }
:where(#outil) .pt-vide--accueil .pt-actions { margin: 18px 0; }
:where(#outil) .pt-vide--graphique { padding: 28px 12px; font-size: 0.9rem; }

/* Pastille de texte (un type de compte, une catégorie). */
:where(#outil) .pt-pastille {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 0.78rem; font-weight: 600; line-height: 1.4; white-space: nowrap;
  color: var(--pt-encre); background: var(--pt-fond-doux); border: 1px solid var(--pt-filet);
}

/* ── Graphiques (tracés par `js/graphiques.js`) ────────────────────────── */
:where(#outil) .pt-graphique { min-width: 0; }
:where(#outil) .pt-graphique__cadre { position: relative; line-height: 0; }
:where(#outil) .pt-graphique__cadre--anneau { display: flex; justify-content: center; }
:where(#outil) .pt-graphique__svg { display: block; max-width: 100%; height: auto; touch-action: pan-y; }
:where(#outil) .pt-graphique__axe { font-family: var(--font-body, sans-serif); font-size: 11px; fill: var(--pt-encre-2); }
:where(#outil) .pt-graphique__grille { stroke: var(--pt-filet); stroke-width: 1; }
:where(#outil) .pt-graphique__zero { stroke: var(--pt-filet-champ); stroke-width: 1; }
:where(#outil) .pt-graphique__ligne { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
:where(#outil) .pt-graphique__bande { opacity: 0.35; stroke: none; }
:where(#outil) .pt-graphique__point { stroke: var(--pt-surface); stroke-width: 2; pointer-events: none; }
:where(#outil) .pt-graphique__repere { stroke: var(--pt-filet-champ); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
:where(#outil) .pt-graphique__barre,
:where(#outil) .pt-graphique__secteur { stroke: var(--pt-surface); stroke-width: 1; }
:where(#outil) .pt-graphique__secteur { stroke-width: 2; }
:where(#outil) .pt-graphique__barre:hover,
:where(#outil) .pt-graphique__secteur:hover { opacity: 0.8; }
:where(#outil) .pt-graphique__total {
  font-family: var(--font-heading, sans-serif); font-size: 17px; font-weight: 800; fill: var(--pt-encre);
}

:where(#outil) .pt-legende {
  list-style: none; margin: 10px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.85rem; line-height: 1.4; color: var(--pt-encre);
}
:where(#outil) .pt-legende__entree { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }
:where(#outil) .pt-legende__pastille {
  flex: none; width: 12px; height: 12px; border-radius: 3px; align-self: center;
  background: var(--pt-pastille, var(--pt-encre-2));
}
:where(#outil) .pt-legende__pastille--pointille {
  background: repeating-linear-gradient(90deg, var(--pt-pastille) 0 4px, transparent 4px 6px);
}
:where(#outil) .pt-legende__valeur { color: var(--pt-encre-2); font-variant-numeric: tabular-nums; }

:where(#outil) .pt-infobulle {
  position: absolute; z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; gap: 2px; max-width: 240px;
  padding: 8px 10px; border-radius: 6px; font-size: 0.8rem; line-height: 1.35;
  color: var(--pt-encre); background: var(--pt-surface);
  border: 1px solid var(--pt-filet-champ); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
:where(#outil) .pt-infobulle__ligne { display: flex; align-items: baseline; gap: 6px; }
:where(#outil) .pt-infobulle__ligne b { margin-left: auto; padding-left: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }

:where(#outil) .pt-graphique__donnees { margin-top: 8px; font-size: 0.85rem; }
:where(#outil) .pt-graphique__donnees > summary {
  display: inline-block; cursor: pointer; padding: 10px 0; color: var(--pt-accent);
  text-decoration: underline; text-underline-offset: 2px;
}
:where(#outil) .pt-graphique__donnees .pt-tableau-cadre { max-height: 320px; overflow-y: auto; }

/* ── Écran Réglages ────────────────────────────────────────────────────── */
:where(#outil) .pt-reglages-membres { list-style: none; margin: 12px 0 16px; padding: 0; display: grid; gap: 12px; }
:where(#outil) .pt-reglages-membres > li { padding-bottom: 12px; border-bottom: 1px solid var(--pt-filet); }
:where(#outil) .pt-reglages-membre,
:where(#outil) .pt-reglages-ajout { display: grid; gap: 8px; }
:where(#outil) .pt-reglages-membre .pt-actions,
:where(#outil) .pt-reglages-ajout .pt-actions { margin-top: 0; }
:where(#outil) .pt-reglages-membre .pt-note { margin: 0; }
:where(#outil) .pt-reglages-retour:not(:empty) { margin-top: 12px; }

/* ── Très petit écran : les quatre onglets en grille 2 x 2 ─────────────── */
@media (max-width: 359px) {
  :where(#outil) .pt-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── À partir de la tablette ───────────────────────────────────────────── */
@media (min-width: 640px) {
  #outil { padding-top: 28px; }
  :where(#outil) .pt-nav { gap: 6px; }
  :where(#outil) .pt-nav__lien { flex: 0 0 auto; padding: 8px 18px; font-size: 1rem; }
  :where(#outil) .pt-carte { padding: 20px 22px; }
  :where(#outil) .pt-entete__titre { font-size: 1.75rem; }
  :where(#outil) .pt-reglages-membre,
  :where(#outil) .pt-reglages-ajout { grid-template-columns: minmax(0, 320px) auto; align-items: end; column-gap: 12px; }
  :where(#outil) .pt-reglages-membre .pt-note { grid-column: 1 / -1; }
  :where(#outil) .pt-chiffre--principal .pt-chiffre__valeur { font-size: 2.4rem; }
}
@media (min-width: 860px) {
  :where(#outil) .pt-grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :where(#outil) .pt-grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: no-preference) {
  :where(#outil) .pt-bouton,
  :where(#outil) .pt-nav__lien { transition: background-color 0.12s, color 0.12s, border-color 0.12s; }
}

/* À l'impression : les données, sans la navigation ni les boutons. */
@media print {
  :where(#outil) .pt-nav,
  :where(#outil) .pt-actions,
  :where(#outil) .pt-message__fermer { display: none; }
}