/* ==========================================================================
   Section 3 - la grille des quatre outils

   Refonte sur la maquette de reference validee par le client. Quatre panneaux
   gris cote a cote, chacun titre puis description puis schema pose en bas sous
   forme de carte blanche ombree.

   Toutes les classes sont prefixees .outils pour ne pas entrer en collision
   avec les autres feuilles de section. Les seules classes empruntees a
   base.css sont .section, .conteneur, .section__entete, les primitives
   typographiques, .pastille et .chiffre : base.css declare explicitement
   .pastille comme mutualisee entre les schemas.

   ---------------------------------------------------------------------------
   Le dimensionnement de toute la section se joue a 992px de fenetre, premiere
   largeur ou les quatre colonnes coexistent :
     conteneur 944px, gouttiere 15,9px, panneau 224px,
     carte blanche 186px, contenu utile 168px.
   C'est ce chiffre de 168px, et non les 1440px de confort, qui fixe les
   corps, les chasses de colonne et les libelles. Tout ce qui tient a 168px
   tient partout ailleurs.
   ========================================================================== */

.outils {
  /* Le fond reste blanc : les panneaux gris suffisent a detacher la grille, et
     la section reste neutre quelle que soit la couleur de ses voisines. */
  background-color: var(--white);

  /* ------------------------------------------------- palette de la maquette
     Trois valeurs relevees sur la maquette et absentes de base.css. Elles ne
     servent qu'ici, elles n'ont donc pas leur place dans les fondations.
     Le gris des panneaux est a peine plus froid que --cream : c'est voulu,
     la section est la seule de la page a poser des aplats jointifs sur du
     blanc et le creme y virait au beige. */
  --outils-panneau: #f4f4f2;
  --outils-titre: #273328;
  --outils-texte: #555752;

  /* Fond et liseré des tuiles internes aux schemas, releves eux aussi. */
  --outils-tuile: #fafaf9;

  /* ================================================ couleurs de la maquette

     Toutes les valeurs ci-dessous sont celles du dictionnaire COL du script
     qui a produit la maquette de reference, scratchpad/pil/gen.py. Le client a
     compare la recoloration precedente, faite avec les tokens --vif-* tires du
     degrade de la banniere, et a prefere sa maquette : la section revient donc
     a ces teintes. Elles ne valent QUE pour cette section, les autres gardent
     les --vif-* de base.css.

     Deux exceptions, mesurees et non supposees. La maquette pose du texte sur
     deux de ses fonds clairs, et ces deux couples tombent sous le seuil de 4,5
     pour 1 exige des corps inferieurs a 24px :

       vert   #4A9D78 sur #E8F8EF : 2,99 pour 1
       violet #7E64C7 sur #F1EDFA : 4,02 pour 1

     Les fonds sont conserves tels quels, ce sont eux qui donnent l'aspect. Ce
     sont les deux teintes de TEXTE qui sont assombries, a teinte et saturation
     constantes, jusqu'a repasser le seuil avec la meme marge que le reste de
     la page (le pire contraste de la page est de 4,97) :

       vert   #38765A sur #E8F8EF : 4,89 pour 1  (maquette assombrie de 25 %)
       violet #6F58AF sur #F1EDFA : 4,94 pour 1  (assombrie de 12 %)

     Partout ailleurs, c'est-a-dire sous les aplats sans texte, le vert et le
     violet de la maquette sont repris sans retouche. */

  --outils-vert: #4a9d78;         /* COL green : produit, histogramme */
  --outils-vert-fond: #e8f8ef;    /* COL green_bg : fond de pastille */
  --outils-vert-texte: #38765a;   /* le vert de la maquette, lisible en texte */

  --outils-bleu: #4b8cf7;         /* COL blue : trace de tresorerie */
  --outils-citron: #86e84f;       /* COL accent : jauge de progression */

  --outils-violet-fond: #f1edfa;  /* COL purple_bg : bandeau de la note */
  --outils-violet-texte: #6f58af; /* COL purple, lisible en texte */

  /* Fond de la pastille de statut neutre, "A lancer" : le gris de la maquette,
     ou le texte courant de la section tient a 6,45 pour 1. */
  --outils-neutre-fond: #f0f1ee;

  /* Les quatre postes de cout du graphique P&L, du plus lourd au plus leger,
     dans l'ordre ou la maquette les empile sous la ligne de zero. Quatre
     teintes distinctes et non une rampe d'opacite sur une seule couleur : la
     maquette montre quatre postes, pas une masse degradee.
     Aucun texte n'est pose dessus, ce sont des aplats. */
  --outils-cout-a: #b62017;       /* COL dark_red, au contact de la ligne */
  --outils-cout-b: #ef3a26;       /* COL red */
  --outils-cout-c: #ff7354;       /* COL orange */
  --outils-cout-d: #eb58a4;       /* COL pink, en bas de la pile */

  /* Echelle de texte des schemas. 11px est le plancher absolu du projet,
     reserve aux libelles et aux legendes. La maquette descend a 9px pour un
     panneau de 451px, soit 6px transposes : ces corps-la ne sont pas repris. */
  --outils-mini: 11px;
  --outils-donnee: 11.5px;

  /* Unite de hauteur du graphique P&L. Les barres portent des hauteurs sans
     unite relevees sur la maquette, multipliees par cette unite : un seul
     reglage redimensionne tout le graphique aux ruptures.
     0,68px ramene la plus haute barre (139) a 94px. */
  --outils-u: 0.68px;

  /* Unite du petit histogramme du schema Economics, meme principe. */
  --outils-u-spark: 0.5px;

  /* ------------------------------------------------------------- geometrie
     Rembourrages fluides plutot que par palier : entre 992px et 1268px de
     fenetre le conteneur s'elargit de 944 a 1220px, et une valeur fixe qui
     tiendrait a 992px gaspillerait la place a 1268px. Les deux clamp
     plafonnent vers 1263px, exactement la ou le conteneur cesse de grandir :
     au-dela, plus rien ne bouge. */
  --outils-pad-panneau: clamp(14px, 1.9vw, 26px);
  --outils-pad-ecran: clamp(9px, 0.95vw, 12px);
}

/* En-tete de section. Le chapo reste cale a gauche, non centre : l'alignement
   a gauche tient mieux la grille qui suit. */
.outils__entete {
  max-width: 760px;
}

/* Mention de demonstration, dans l'en-tete de section donc avant le premier
   chiffre. Encadre creme et liseré : la phrase doit se detacher du chapo,
   sinon elle se lit comme la suite de l'argumentaire et se laisse sauter.
   Le bloc reste sobre, ce n'est pas un avertissement de danger. */
.outils__demo {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background-color: var(--cream);
  border: 1px solid var(--trait-fort);
  border-radius: var(--r-md);
}

.outils__demo-marque {
  flex: 0 0 auto;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  background-color: var(--white);
  border: 1px solid var(--trait-fort);
  font-size: var(--outils-mini);
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--ink-strong);
  white-space: nowrap;
}

/* min-width: 0 et flex: 1 : sans eux la phrase, plus large que la piste, ne
   se coupe pas et pousse la marque hors du cadre a 375px. */
.outils__demo-texte {
  flex: 1 1 240px;
  min-width: 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--ink-soft);
}

/* ==========================================================================
   LA GRILLE ET LE PANNEAU DE COLONNE
   ========================================================================== */

/* Quatre colonnes cote a cote, comme la maquette.

   Trois pistes de lignes pour une seule rangee de panneaux : titre,
   description, schema. Chaque panneau en occupe les trois et reprend les
   pistes de la grille parente par subgrid. C'est ce qui aligne les quatre
   titres entre eux, les quatre descriptions entre elles et surtout les quatre
   cartes blanches, alors qu'une description fait trois lignes ici et quatre
   la. Sans subgrid la mise en page tient toujours, les cartes cessent
   seulement d'etre alignees.

   La troisieme piste est en 1fr : la grille n'ayant pas de hauteur definie,
   1fr se comporte comme auto et prend la hauteur de la plus haute carte, que
   les trois autres rejoignent par etirement. Les quatre schemas font donc
   exactement la meme hauteur, comme dans la maquette. */
.outils__grille {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(12px, 1.6vw, var(--sp-grille));
  row-gap: var(--sp-4);
}

.outils__panneau {
  grid-row: span 3;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: var(--sp-3);
  min-width: 0;
  padding: var(--outils-pad-panneau);
  /* Le rayon de la maquette vaut 48px pour 451px de panneau, soit 10,6 % de
     sa largeur. Transpose aux 287px du site, cela donne 30px : c'est
     --r-xl, un rayon deja present dans les fondations. */
  border-radius: var(--r-xl);
  background-color: var(--outils-panneau);
  /* Pas de liseré : la maquette n'en a pas, l'aplat suffit a poser le bloc. */
}

/* Titre de colonne. La maquette le donne a 31px pour 451px de panneau, soit
   6,9 % de sa largeur : 20px une fois transpose. Graisse semi-bold, la seule
   de la page a depasser 500, parce que ces quatre titres sont les reperes de
   navigation de la section et doivent tenir face a quatre schemas denses. */
.outils__titre {
  font-family: var(--font-sans);
  /* Fluide plutot que fixe : a 20px, trois des quatre titres passaient sur
     deux lignes des que le panneau descendait a 186px de contenu, vers 992px
     de fenetre. Le clamp les ramene a une ligne chacun sans jamais depasser
     les 20px de la transposition. */
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.4px;
  color: var(--outils-titre);
  align-self: start;
}

.outils__phrase {
  font-size: var(--t-petit);
  line-height: 22px;
  color: var(--outils-texte);
  align-self: start;
}

/* ==========================================================================
   LE SCHEMA : CARTE BLANCHE ET NOTE DE PIED
   ========================================================================== */

/* La figure occupe toute la troisieme piste, la carte blanche prend la
   hauteur libre et la note se pose dessous, sur le gris du panneau.

   Placer la note hors de la carte plutot qu'a l'interieur repond a deux
   choses a la fois : elle ne mange pas les 168px de contenu utile du schema,
   et elle occupe l'espace vide que la maquette laisse sous les cartes (84px,
   soit un cinquieme de la hauteur du panneau). La mention de demonstration
   devient donc le pied du bloc au lieu d'etre un vide. */
.outils__figure {
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-top: var(--sp-2);
}

.outils__ecran {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  padding: var(--outils-pad-ecran);
  background-color: var(--white);
  /* Rayon 14px pour 328px de carte dans la maquette, soit 4,3 % : 10px une
     fois transpose. Arrondi a 12px, la valeur --r-sm des fondations. */
  border-radius: var(--r-sm);
  /* Ombre portee douce, sans liseré : c'est elle qui pose la carte sur le
     gris du panneau. */
  box-shadow: var(--ombre-carte);
}

.outils__note {
  padding-top: var(--sp-2);
  font-size: var(--outils-mini);
  line-height: 15px;
  color: var(--grey-texte);
}

/* ------------------------------------------------- primitives des schemas */

/* Ligne de cartouche : un libelle a gauche, une pastille ou une valeur a
   droite. Elle sert au titre du graphique P&L, a l'en-tete du tableau
   Economics et aux deux lignes de l'encart du dashboard.
   min-width: 0 sur le libelle : sans lui, un titre plus large que la piste
   pousse la pastille hors de la carte au lieu de passer a la ligne. */
.outils__cartouche {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

.outils__cartouche-titre {
  min-width: 0;
  font-size: var(--outils-mini);
  font-weight: 500;
  line-height: 16px;
  color: var(--grey-texte);
}

.outils__cartouche-titre--fort {
  font-size: var(--outils-donnee);
  font-weight: 600;
  color: var(--ink-strong);
}

/* Les pastilles des schemas sont plus petites que celles du reste de la page :
   elles cohabitent avec du texte de 11,5px dans des colonnes de 42px. */
.outils__ecran .pastille {
  font-size: var(--outils-mini);
  line-height: 16px;
  padding: 1px 5px;
  gap: 2px;
}

/* Retour aux pastilles de la maquette, vert sur vert tres clair, la ou
   base.css pose un fond menthe et du texte en encre. La regle est portee par
   .outils__ecran et non par .pastille seule : les autres sections gardent les
   pastilles de base.css. */
.outils__ecran .pastille--positive {
  background-color: var(--outils-vert-fond);
  color: var(--outils-vert-texte);
}

/* Le statut qui n'est ni engage ni acquis, "A lancer". La maquette le laisse
   gris, sur le meme ton que le texte courant : ce n'est pas une troisieme
   categorie de donnee mais l'absence de mouvement. Le bleu du degrade que
   base.css lui donne ailleurs ne s'applique donc pas ici. */
.outils__ecran .pastille--tierce {
  background-color: var(--outils-neutre-fond);
  color: var(--outils-texte);
}

/* Le triangle est dessine en bordures plutot qu'avec un caractere geometrique
   (U+25B2 / U+25BC) : ces glyphes sont absents des sous-ensembles Inter
   auto-heberges et provoqueraient une substitution de police visible. */
.outils__fleche {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
}

.outils__fleche--haut {
  border-bottom: 5px solid currentColor;
}

/* Tableau commun aux schemas Economics et Dashboard.

   table-layout: fixed, et non automatique. En automatique un tableau ne
   descend jamais sous sa largeur de contenu minimal : mesure faite a 992px de
   fenetre, le tableau reclamait 175px la ou la carte n'en offre que 168, et
   c'est la carte qui cedait, passant a 194px et faisant deborder son panneau.
   En fixe, les chasses sont celles declarees sur la ligne d'en-tete, la
   largeur du tableau est celle de la carte quoi qu'il arrive, et c'est le
   libelle qui passe a la ligne. Les pourcentages ci-dessous sont calcules
   pour le cas dimensionnant, 168px de contenu utile. */
.outils__tableau {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: var(--outils-donnee);
  line-height: 16px;
  /* Le tableau absorbe la hauteur libre de la carte, ses lignes s'aerant
     ensemble. Sans cela, un schema plus court que son voisin le plus haut
     laissait un vide de 70px au milieu de la carte, au lieu d'une respiration
     repartie entre les lignes. */
  flex: 1 1 auto;
}

.outils__tableau th,
.outils__tableau td {
  padding: 8px 0;
  text-align: left;
  font-weight: 400;
  vertical-align: middle;
  border-bottom: 1px solid #eceded;
}

.outils__tableau thead th {
  padding-top: 0;
  font-size: var(--outils-mini);
  font-weight: 500;
  line-height: 15px;
  color: var(--grey-texte);
  border-bottom-color: var(--trait);
}

.outils__tableau tbody th {
  color: var(--ink-strong);
  font-weight: 500;
  padding-right: 6px;
}

.outils__tableau tbody tr:last-child th,
.outils__tableau tbody tr:last-child td {
  border-bottom: 0;
}

.outils__tableau td {
  color: var(--outils-texte);
}

/* Les colonnes de chiffres ne se coupent jamais : elles sont calibrees pour
   tenir d'un bloc, et une valeur cassee en deux ne se lit plus. */
/* Selecteur descendant obligatoire : la regle de rembourrage ci-dessus vise
   ".outils__tableau th", plus specifique qu'une classe seule, et ecraserait ce
   padding-left. C'est lui qui separe les colonnes de chiffres, puisqu'elles
   sont calees sur leur contenu. */
.outils__tableau .outils__nombre {
  text-align: right;
  white-space: nowrap;
  padding-left: clamp(6px, 0.8vw, 14px);
}

/* Chasses des colonnes, lues sur la ligne d'en-tete par le mode fixe.
   Economics, pour 168px de contenu utile : 74px au libelle, dont 66 utiles
   apres le rembourrage, ce qui laisse passer "CAC blended" d'un seul tenant ;
   49px au realise, dont 41 utiles pour "254 k€" ; 45px a l'ecart, dont 39
   utiles pour une pastille qui en mesure 35. */
.outils__tableau--kpi th:nth-child(1) { width: 45%; }
.outils__tableau--kpi th:nth-child(2) { width: 29%; }
.outils__tableau--kpi th:nth-child(3) { width: 26%; }

/* Dashboard : le nom de l'action peut passer sur deux lignes, la pastille de
   statut jamais. On lui reserve donc de quoi loger "En cours" au large. */
.outils__tableau--actions th:nth-child(1) { width: 60%; }
.outils__tableau--actions th:nth-child(2) { width: 40%; }

.outils__nombre--fort {
  font-weight: 600;
  color: var(--ink-strong);
}

/* ==========================================================================
   SCHEMA 1 - tuiles et cascade produit / couts
   ========================================================================== */

.outils__tuiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}

/* Trois informations empilees : libelle, valeur, ecart.
   La maquette pose le libelle et la pastille sur une meme ligne. A 992px de
   fenetre une tuile ne mesure plus que 79px utiles quand "CA net" et sa
   pastille en demandent 80 : la ligne debordait. Les empiler tient a toutes
   les largeurs et garde les deux tuiles rigoureusement symetriques, ce qu'un
   simple flex-wrap n'aurait pas fait ("54 k€" etant plus court que "254 k€",
   une seule des deux tuiles serait passee a la ligne. */
.outils__tuile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
  padding: 8px 9px;
  background-color: var(--outils-tuile);
  border: 1px solid var(--trait);
  border-radius: 9px;
}

.outils__tuile-libelle {
  font-size: var(--outils-mini);
  line-height: 15px;
  color: var(--grey-texte);
}

.outils__tuile-valeur {
  font-size: 19px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.5px;
  color: var(--ink-strong);
}

/* Cascade produit / couts.
   Trois pistes de lignes : le produit au-dessus de la ligne de zero, les
   couts en dessous, le nom du mois en pied. Chaque mois reprend ces pistes
   par subgrid, c'est ce qui donne aux cinq colonnes une ligne de zero commune
   quelle que soit la hauteur de leurs barres.
   margin-top: auto plaque le graphique au bas de la carte : quand une carte
   voisine est plus haute, l'air excedentaire se loge au-dessus des barres et
   non entre les barres et les noms de mois. */
.outils__barres {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: calc(139 * var(--outils-u)) calc(104 * var(--outils-u)) auto;
  column-gap: clamp(8px, 1.3vw, 18px);
  margin-top: auto;
  padding-top: var(--sp-1);
}

.outils__mois {
  grid-row: span 3;
  display: grid;
  grid-template-rows: subgrid;
  min-width: 0;
}

/* La ligne de zero traverse tout le graphique, gouttieres comprises : elle est
   donc posee en absolu sur le conteneur et non en bordure d'une colonne. */
.outils__zero {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--sp-1) + 139 * var(--outils-u));
  height: 1px;
  background-color: #d9dad6;
}

/* Ce qui est produit prend le vert de la maquette. C'est un aplat de 94px de
   haut sans texte dessus : sa couleur n'a pas de seuil de contraste a tenir,
   elle doit seulement se detacher du blanc de la carte, ce que ce vert fait a
   3,29 pour 1. */
.outils__produit {
  align-self: end;
  height: calc(var(--h) * var(--outils-u));
  background-color: var(--outils-vert);
  border-radius: 4px 4px 0 0;
}

.outils__couts {
  align-self: start;
  display: flex;
  flex-direction: column;
  border-radius: 0 0 4px 4px;
  overflow: hidden;
}

.outils__cout {
  display: block;
  height: calc(var(--h) * var(--outils-u));
  min-height: 2px;
}

/* Les quatre postes, du rouge sombre au rose, de la ligne de zero vers le bas.
   Quatre couleurs pleines : c'est ainsi que la maquette les distingue. */
.outils__cout--a { background-color: var(--outils-cout-a); }
.outils__cout--b { background-color: var(--outils-cout-b); }
.outils__cout--c { background-color: var(--outils-cout-c); }
.outils__cout--d { background-color: var(--outils-cout-d); }

.outils__mois-nom {
  align-self: end;
  padding-top: 6px;
  font-size: var(--outils-mini);
  line-height: 14px;
  text-align: center;
  color: var(--grey-texte);
}

/* ==========================================================================
   SCHEMA 2 - courbe de tresorerie
   ========================================================================== */

.outils__solde {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.outils__solde-libelle {
  font-size: var(--outils-mini);
  line-height: 15px;
  color: var(--grey-texte);
}

.outils__solde-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

.outils__solde-valeur {
  font-size: 22px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: -0.6px;
  color: var(--ink-strong);
}

/* La boite absorbe la hauteur libre de la carte : c'est la courbe qui s'etire
   quand une carte voisine est plus haute, pas les blancs entre les blocs. */
.outils__courbe-boite {
  flex: 1 1 auto;
  min-height: 68px;
}

.outils__courbe {
  display: block;
  width: 100%;
  height: 100%;
}

/* L'aire sous la courbe est un aplat uni et non un degrade : la maquette la
   peint en une seule passe, le bleu du trace pose a 28 sur 255, soit 0,11
   d'opacite. Le degrade vertical qui la remplissait auparavant est donc
   supprime, du SVG comme d'ici. */
.outils__aire {
  fill: var(--outils-bleu);
  fill-opacity: 0.11;
  stroke: none;
}

/* non-scaling-stroke : le SVG est etire en largeur comme en hauteur par
   preserveAspectRatio="none", sans cette propriete le trait s'epaissirait a
   1440px et s'amincirait a 375px.
   Le trace et l'aire sont la MEME couleur, seule l'opacite les separe : c'est
   la construction de la maquette, et un bleu plein a 3,29 pour 1 sur le blanc
   se voit sans peine en trait de 2px. */
.outils__trace {
  fill: none;
  stroke: var(--outils-bleu);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.outils__axe {
  display: flex;
  justify-content: space-between;
  padding-top: 4px;
  border-top: 1px solid var(--trait);
  font-size: var(--outils-mini);
  line-height: 15px;
  color: var(--grey-texte);
}

.outils__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}

.outils__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 8px 9px;
  background-color: var(--outils-tuile);
  border: 1px solid var(--trait);
  border-radius: 9px;
}

.outils__stat-libelle {
  font-size: var(--outils-mini);
  line-height: 15px;
  color: var(--grey-texte);
}

.outils__stat-valeur {
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: -0.3px;
  color: var(--ink-strong);
}

/* ==========================================================================
   SCHEMA 3 - atterrissage du mois
   ========================================================================== */

/* Le pied ferme la carte. C'est le tableau au-dessus de lui qui absorbe la
   hauteur libre, le pied garde donc sa taille naturelle. */
.outils__pied {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--trait);
}

.outils__pied-texte {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.outils__pied-libelle {
  font-size: var(--outils-mini);
  line-height: 15px;
  color: var(--grey-texte);
}

.outils__pied-valeur {
  font-size: 19px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.5px;
  color: var(--ink-strong);
}

/* Le nom du KPI et sa cible sont empiles dans la cellule, en bloc et non en
   flex : display: flex sur un th lui ferait perdre sa nature de cellule. */
.outils__kpi-nom {
  display: block;
}

.outils__kpi-cible {
  display: block;
  margin-top: 1px;
  font-size: var(--outils-mini);
  font-weight: 400;
  line-height: 14px;
  color: var(--grey-texte);
}

/* Histogramme de rappel. Il n'a pas d'echelle et ne porte aucun chiffre :
   c'est une silhouette de tendance, le montant est ecrit a cote. */
.outils__spark {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  flex: 0 1 auto;
  height: calc(65 * var(--outils-u-spark));
}

/* Le vert de la maquette, celui des barres de produit du premier schema : la
   marge contributive et le produit du mois sont la meme famille de grandeur,
   ce qui reste. Les 6px de large sont gardes tels quels, c'est la largeur qui
   tenait deja aux trois ruptures. */
.outils__spark-barre {
  display: block;
  width: 6px;
  flex: 0 1 6px;
  min-width: 2px;
  height: calc(var(--h) * var(--outils-u-spark));
  border-radius: 2px;
  background-color: var(--outils-vert);
}

/* ==========================================================================
   SCHEMA 4 - plan d'action
   ========================================================================== */

.outils__encart {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px 10px 11px;
  background-color: var(--outils-tuile);
  border: 1px solid var(--trait);
  border-radius: 9px;
}

.outils__jauge-libelle {
  font-size: var(--outils-mini);
  line-height: 15px;
  color: var(--grey-texte);
}

.outils__jauge-valeur {
  font-size: var(--outils-mini);
  font-weight: 600;
  line-height: 15px;
  color: var(--ink-strong);
}

/* Jauge de progression : le citron de la maquette sur un rail gris, la seule
   apparition de cette teinte dans la section. Le rail donne sa forme a la
   jauge, la part remplie donne la valeur. Elle garde ses 9px de haut : une
   part claire dans un rail de 7px se lisait comme un liseré, a 9px c'est un
   aplat. Le pourcentage reste ecrit juste au-dessus, la couleur ne porte donc
   aucune information a elle seule. */
.outils__jauge {
  display: block;
  height: 9px;
  border-radius: var(--r-pill);
  background-color: #e7e8e4;
  overflow: hidden;
}

.outils__jauge-part {
  display: block;
  width: 63%;
  height: 100%;
  border-radius: var(--r-pill);
  background-color: var(--outils-citron);
}

/* Le nom de l'action et son pole sont empiles dans la cellule. Ils sont mis en
   bloc plutot que la cellule en flex : display: flex sur un th lui fait perdre
   sa nature de cellule, le navigateur en fabrique une anonyme et la ligne se
   desaligne de sa pastille de statut. */
.outils__action-nom {
  display: block;
  font-size: var(--outils-donnee);
  font-weight: 500;
  line-height: 16px;
  color: var(--ink-strong);
}

.outils__action-pole {
  display: block;
  margin-top: 1px;
  font-size: var(--outils-mini);
  font-weight: 400;
  line-height: 14px;
  color: var(--grey-texte);
}

/* Note de pied du quatrieme schema, retablie d'apres la maquette : un bandeau
   arrondi violet tres clair qui ferme la carte sous le tableau des actions.
   C'est le tableau au-dessus qui absorbe la hauteur libre, le bandeau reste
   donc plaque au bas de la carte quelle que soit la hauteur des trois autres.
   Le fond est celui de la maquette ; le violet du texte en est la version
   assombrie, voir la palette en tete de fichier. */
.outils__reco {
  padding: 3px 8px;
  border-radius: 6px;
  background-color: var(--outils-violet-fond);
  font-size: var(--outils-mini);
  font-weight: 500;
  line-height: 15px;
  color: var(--outils-violet-texte);
}

/* ==========================================================================
   RUPTURES
   ========================================================================== */

@media screen and (max-width: 991px) {
  /* Deux colonnes. Le panneau passe de 224 a 460px, les schemas cessent d'etre
     le facteur limitant : les corps remontent d'un demi-point, les graphiques
     grandissent, les rembourrages se relachent. */
  .outils {
    --outils-donnee: 12px;
    --outils-u: 0.82px;
    --outils-u-spark: 0.62px;
    --outils-pad-panneau: var(--sp-5);
    --outils-pad-ecran: var(--sp-4);
  }

  .outils__grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Six pistes pour deux rangees de panneaux. */
    grid-template-rows: repeat(2, auto auto 1fr);
    column-gap: var(--sp-grille);
    row-gap: var(--sp-grille);
  }

  .outils__ecran {
    gap: var(--sp-3);
  }

  .outils__tuile,
  .outils__stat,
  .outils__encart {
    padding: 10px 12px;
  }

  .outils__tuile-valeur,
  .outils__pied-valeur {
    font-size: 22px;
    line-height: 28px;
  }

  .outils__solde-valeur {
    font-size: 26px;
    line-height: 32px;
  }

  .outils__stat-valeur {
    font-size: 19px;
    line-height: 25px;
  }

  .outils__spark-barre {
    flex-basis: 7px;
    width: 7px;
  }

  .outils__courbe-boite {
    min-height: 90px;
  }
}

@media screen and (max-width: 767px) {
  /* Une seule colonne. Le panneau occupe toute la largeur du conteneur : le
     titre et la description reprennent le corps du texte courant, le schema
     s'etale. Douze pistes pour quatre panneaux empiles. */
  .outils__grille {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(4, auto auto 1fr);
  }

  .outils__titre {
    font-size: 22px;
    line-height: 28px;
  }

  .outils__phrase {
    max-width: 62ch;
  }

  /* Une carte de 680px de large etirerait la courbe et les barres jusqu'a la
     caricature : le schema est borne, cale a gauche comme le texte. */
  .outils__figure {
    max-width: 520px;
  }
}

@media screen and (max-width: 479px) {
  /* 375px de fenetre laissent 343px de conteneur, donc 315px de carte et
     291px de contenu utile : plus que les 168px du cas dimensionnant a 992px.
     Rien n'a besoin d'etre reduit, seuls les rembourrages se resserrent pour
     que le schema ne mange pas toute la largeur. */
  .outils {
    --outils-pad-panneau: var(--sp-4);
    --outils-pad-ecran: var(--sp-3);
    --outils-u: 0.7px;
    --outils-u-spark: 0.55px;
  }

  .outils__panneau {
    border-radius: var(--r-lg);
  }

  /* La mention de demonstration se resserre comme les panneaux, mais son texte
     garde ses 13px : c'est elle qui doit rester lue. */
  .outils__demo {
    padding: var(--sp-3);
    border-radius: var(--r-sm);
  }

  .outils__titre {
    font-size: 20px;
    line-height: 26px;
  }

  .outils__tuile-valeur,
  .outils__pied-valeur {
    font-size: 19px;
    line-height: 25px;
  }

  .outils__solde-valeur {
    font-size: 22px;
    line-height: 28px;
  }

  .outils__stat-valeur {
    font-size: 17px;
    line-height: 23px;
  }

  .outils__spark-barre {
    flex-basis: 5px;
    width: 5px;
  }

  .outils__courbe-boite {
    min-height: 76px;
  }
}