/* ==========================================================================
   Section "Les objectifs" : Planifier, Piloter, Decider

   Squelette : le bloc a trois colonnes du modele. Trois colonnes egales
   separees par la gouttiere de 24px, titre de carte en 24px sur 28,8px avec
   interlettrage negatif, jamais de graisse 700.

   Habillage Numbers, et une inversion volontaire par rapport a la section
   "outils" : la section porte le creme et les cartes sont blanches, la ou les
   outils posent des cartes creme sur fond blanc. Cela evite deux bandes
   blanches de suite et donne un appui visuel au milieu de la page. Le schema,
   lui, est un panneau creme clair enfonce dans la carte blanche.

   Toutes les classes sont prefixees .objectifs pour ne pas entrer en collision
   avec les feuilles des autres sections.
   ========================================================================== */

/* Couleur des trois schemas, en un mot : chaque panneau porte une teinte
   dominante du degrade de la banniere, pour qu'on les distingue d'un coup
   d'oeil sans qu'ils cessent d'appartenir au meme outil.
     Planifier : vert et menthe, une seule grandeur en deux etats ;
     Piloter   : menthe a droite de l'axe, corail a gauche ;
     Decider   : bleu, des mesures situees par rapport a un seuil.
   Regle commune, imposee par les contrastes mesures dans base.css : ces
   teintes ne servent que d'aplats, jamais de texte ni de trait fin. Tous les
   chiffres restent en encre ou en accent sombre. */
.objectifs {
  /* Le fond creme vient de .section--creme, pose dans le fragment. */
  color: var(--ink-soft);
}

/* Le chapo est plus court que la mesure par defaut de .t-chapo : sur trois
   colonnes il ne doit pas depasser la moitie de la largeur du conteneur, sinon
   l'en-tete ecrase la grille. */
.objectifs__entete .t-chapo {
  max-width: 52ch;
}

/* Mention de demonstration, portee de section.
   Elle doit se voir sans crier : un filet vert a gauche la detache du chapo,
   le fond blanc la pose sur le creme de la section. Meme formulation que la
   section "outils", "donnees de demonstration", pour qu'un lecteur qui
   descend la page lise deux fois la meme phrase et non deux avertissements
   differents. Coin gauche droit, coins droits arrondis : la pilule tenait mal
   des que la phrase passait a deux lignes. */
.objectifs__mention {
  max-width: 60ch;
  margin-top: 18px;
  padding: 10px 14px;
  background-color: var(--white);
  border: 1px solid var(--trait);
  border-left: 3px solid var(--vert);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--t-micro);
  line-height: var(--t-micro-lh);
  color: var(--ink-soft);
}

/* Graisse 500, jamais 700 : c'est la regle typographique de la page. */
.objectifs__mention strong {
  font-weight: 500;
  color: var(--ink-strong);
}

/* ==========================================================================
   GRILLE DES TROIS CARTES
   ========================================================================== */

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

/* La carte est une colonne : texte en haut, schema colle en bas par
   margin-top auto. Les trois cartes ayant la meme hauteur (etirement par
   defaut de la grille) et le schema une hauteur fixe, les trois schemas
   s'alignent exactement, en haut comme en bas, malgre des textes de longueurs
   tres inegales. */
.objectifs__carte {
  display: flex;
  flex-direction: column;
  padding: 28px;
  background-color: var(--white);
  /* Blanc sur creme ne fait que 3 % d'ecart de luminosite : le liseré est ce
     qui donne son arete a la carte. Pas d'ombre, on ne veut pas d'effet
     flottant. */
  border: 1px solid var(--trait);
  border-radius: var(--r-2xl);
}

.objectifs__contenu {
  margin-bottom: 28px;
}

/* Ordinal en Hw Cigars, prolonge par un filet qui traverse la carte. C'est le
   seul marqueur de sequence : Planifier, Piloter et Decider se suivent dans
   cet ordre et se repetent chaque mois. */
.objectifs__rang {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.5px;
  color: var(--vert-texte);
}

.objectifs__rang::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--trait);
}

.objectifs__titre {
  margin-bottom: 10px;
}

.objectifs__texte {
  font-size: var(--t-petit);
  line-height: var(--t-petit-lh);
  color: var(--ink-soft);
}

/* ==========================================================================
   PANNEAU DE SCHEMA, GABARIT COMMUN AUX TROIS
   ========================================================================== */

/* Meme boite pour les trois schemas : une tete, un corps qui prend la place
   restante, un pied d'une ligne. La hauteur fixe est ce qui les fait lire
   comme trois vues d'un meme outil et non comme trois illustrations. */
.objectifs__schema {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: auto;
  /* Hauteur commune aux trois panneaux, calee sur le plus charge des trois
     (Decider : trois indicateurs, leur jauge et leur seuil). Les deux autres
     centrent leur contenu dans cette hauteur. Passee de 290 a 320px quand le
     pied a gagne la ligne d'etiquette "Donnees de demonstration" : a 290 le
     panneau de Decider debordait a 317px et les trois cessaient d'etre a la
     meme hauteur. */
  min-height: 320px;
  padding: 18px;
  background-color: var(--cream-light);
  border: 1px solid var(--trait);
  border-radius: var(--r-lg);
}

.objectifs__schema-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--t-micro);
  line-height: var(--t-micro-lh);
}

.objectifs__schema-titre {
  font-weight: 500;
  color: var(--ink-strong);
}

.objectifs__schema-note {
  color: var(--grey-texte);
}

/* min-height a zero : sans cela un enfant en flex refuse de se comprimer et
   le corps deborde la hauteur du panneau. */
.objectifs__schema-corps {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  justify-content: center;
}

/* Pied de panneau en deux lignes : l'etiquette de demonstration d'abord, puis
   la phrase de lecture. Empilees plutot que cote a cote, car a 249px de
   panneau utile les deux se chevauchaient des le premier repli. */
.objectifs__schema-pied {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  font-size: 11px;
  line-height: 15px;
  color: var(--grey-texte);
}

/* Etiquette portee par chaque schema. La mention de section ne suffit pas :
   un panneau se lit seul, se capture seul, et doit donc dire seul qu'il ne
   montre les chiffres d'aucun client. */
.objectifs__demo {
  padding: 2px 8px;
  background-color: var(--white);
  border: 1px solid var(--trait-fort);
  border-radius: var(--r-pill);
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* ==========================================================================
   SCHEMA 1 : PLANIFIER, HORIZON A 12 MOIS
   ========================================================================== */

/* Legende de tete, reprise en pastilles minuscules. */
.objectifs__legende {
  display: flex;
  gap: 12px;
  color: var(--grey-texte);
}

.objectifs__cle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.objectifs__puce {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.objectifs__puce--reel {
  background-color: var(--vert);
}

.objectifs__puce--prevu {
  background-color: var(--vif-menthe);
}

.objectifs__mois {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  gap: 5px;
  /* Barres hautes : c'est ce qui remplit la hauteur commune des panneaux sans
     laisser un grand vide sous le titre. */
  height: 150px;
}

/* Frontiere entre le realise et le projete. Douze colonnes de largeur egale
   et onze gouttieres identiques : le centre de la sixieme gouttiere tombe
   exactement a 50 % de la boite, aucun calcul n'est necessaire. */
.objectifs__frontiere {
  position: absolute;
  top: -6px;
  bottom: 0;
  left: 50%;
  border-left: 1px dashed var(--trait-fort);
}

.objectifs__col {
  display: flex;
  align-items: flex-end;
  height: 100%;
}

.objectifs__barre {
  width: 100%;
  height: var(--h);
  min-height: 4px;
  border-radius: 3px 3px 0 0;
}

.objectifs__barre--reel {
  background-color: var(--vert);
}

/* Le realise et le projete sont la MEME grandeur, l'un constate et l'autre
   pas : deux etats d'une meme famille, pas deux teintes concurrentes. Le
   projete etait --vert pose a 0,34 d'opacite, soit un gris-vert eteint sur le
   creme du panneau ; il prend la menthe du degrade, c'est-a-dire le meme vert
   monte en clarte, en couleur cette fois.
   Aplat de 150px de haut, aucun texte dessus. */
.objectifs__barre--prevu {
  background-color: var(--vif-menthe);
}

.objectifs__axe {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 5px;
  margin-top: 8px;
  /* Plancher de lisibilite de la page : 11px. Les initiales etaient a 10px,
     ce qui les mettait sous le plancher a toutes les largeurs. A 11px les
     douze initiales tiennent encore : dans le pire cas, 375px de fenetre, le
     panneau offre 275px utiles et chaque colonne fait environ 20px pour une
     seule lettre. */
  font-size: 11px;
  line-height: 15px;
  text-align: center;
  color: var(--grey-texte);
}

/* ==========================================================================
   SCHEMA 2 : PILOTER, ECARTS AUTOUR D'UN AXE ZERO
   ========================================================================== */

.objectifs__ecarts {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.objectifs__ecart {
  display: grid;
  /* 92px : "Ventes nettes" tient sur une seule ligne, sinon la rangee grandit
     et les quatre ecarts cessent d'etre a pas regulier. */
  grid-template-columns: 92px minmax(0, 1fr) 54px;
  align-items: center;
  gap: 8px;
  font-size: var(--t-micro);
  line-height: var(--t-micro-lh);
}

.objectifs__ecart-nom {
  color: var(--ink-soft);
}

/* La piste passe de 8 a 10px. Les deux barres qu'elle contient sont
   desormais des teintes claires du degrade : a 8px, moins le liseré, il ne
   restait que 6px de couleur reelle et l'aplat se lisait comme un filet.
   Deux pixels suffisent a lui rendre son epaisseur d'aplat. */
.objectifs__piste {
  position: relative;
  display: block;
  height: 10px;
  background-color: var(--white);
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--trait);
}

/* Axe zero, au centre de la piste. */
.objectifs__piste::before {
  content: "";
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: 50%;
  width: 1px;
  background-color: var(--trait-fort);
}

/* --w est l'ecart rapporte au plus grand ecart du lot. Une barre qui vaut
   100 % occupe donc une demi-piste, d'ou la division par deux. */
.objectifs__ecart-barre {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(var(--w) / 2);
}

/* Richesse produite a droite, richesse detruite a gauche : la menthe et le
   corail du degrade, deux aplats de meme poids visuel de part et d'autre de
   l'axe. Ils ne portent aucun texte, le pourcentage est ecrit a cote. */
.objectifs__ecart-barre--plus {
  left: 50%;
  background-color: var(--vif-menthe);
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
}

.objectifs__ecart-barre--moins {
  right: 50%;
  background-color: var(--vif-corail);
  border-radius: var(--r-pill) 0 0 var(--r-pill);
}

.objectifs__ecart-val {
  text-align: right;
  font-weight: 500;
}

.objectifs__ecart-val--plus {
  color: var(--vert-texte);
}

/* Le corail plein tombe a 2,3 pour 1 sur le creme : c'est un aplat, pas une
   couleur de texte. Le chiffre prend donc la declinaison sombre, 5,7 pour 1,
   pendant que la barre juste a cote garde le corail plein. */
.objectifs__ecart-val--moins {
  color: var(--corail-sombre);
}

/* ==========================================================================
   SCHEMA 3 : DECIDER, INDICATEURS ET SEUILS
   ========================================================================== */

.objectifs__direct {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: var(--ink-strong);
}

/* Le point respire pour dire "en continu". L'animation est neutralisee par la
   regle prefers-reduced-motion de base.css.
   L'onde etait une box-shadow dont la couleur etait ecrite en rgba, donc un
   vert fige hors des tokens. Elle passe par un ::after qui porte --vert et
   dont on anime l'echelle et l'opacite : meme rendu, plus aucune couleur en
   dur, et l'onde suit desormais l'accent si celui-ci change. */
.objectifs__point {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--vert);
}

.objectifs__point::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: var(--vert);
  animation: objectifs-pouls 2.4s ease-out infinite;
}

@keyframes objectifs-pouls {
  0% {
    transform: scale(1);
    opacity: 0.45;
  }
  70% {
    transform: scale(3);
    opacity: 0;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

.objectifs__kpis {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.objectifs__kpi {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.objectifs__kpi-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--t-micro);
  line-height: var(--t-micro-lh);
}

.objectifs__kpi-nom {
  color: var(--ink-soft);
}

.objectifs__kpi-val {
  font-weight: 500;
  color: var(--ink-strong);
  white-space: nowrap;
}

/* Meme epaississement que la piste des ecarts, et pour la meme raison : la
   part remplie est maintenant une teinte claire, il lui faut l'epaisseur d'un
   aplat et non celle d'un filet. */
.objectifs__jauge {
  position: relative;
  display: block;
  height: 10px;
  background-color: var(--white);
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--trait);
}

/* Le bleu du degrade, et non le jaune reserve ailleurs aux jauges.
   Essai fait avec le jaune : trois barres pleine largeur de la couleur la
   plus saturee de la palette, empilees dans le meme panneau, ecrasaient les
   deux cartes voisines et donnaient au panneau un air de signal d'alerte,
   d'autant plus que le seuil pose dessus est noir. Ces trois jauges ne sont
   d'ailleurs pas des mises en avant : ce sont des mesures situees par rapport
   a un seuil, ni bonnes ni mauvaises en soi, donc la voix tierce de la
   palette. Le jaune reste sur la jauge de progression du plan d'action, qui
   est seule et petite.
   Le seuil, lui, reste en encre : seule couleur assez sombre pour se lire
   par-dessus le remplissage. */
.objectifs__jauge-part {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--x);
  background-color: var(--vif-bleu);
  border-radius: var(--r-pill);
}

/* Le seuil deborde la jauge en hauteur pour rester lisible par-dessus le
   remplissage. */
.objectifs__jauge-seuil {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: var(--seuil);
  width: 2px;
  border-radius: 1px;
  background-color: var(--ink);
}

.objectifs__kpi-note {
  font-size: 11px;
  line-height: 15px;
  color: var(--grey-texte);
}

/* ==========================================================================
   REPLIS
   ========================================================================== */

/* Sous 992px, trois colonnes tomberaient a 290px et les schemas deviendraient
   illisibles. La carte bascule alors sur le modele du site actuel : le texte
   a gauche, le schema a droite, une carte par rangee. */
@media screen and (max-width: 991px) {
  .objectifs__grille {
    grid-template-columns: minmax(0, 1fr);
  }

  .objectifs__carte {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: center;
    gap: 32px;
  }

  .objectifs__contenu {
    margin-bottom: 0;
  }

  .objectifs__schema {
    margin-top: 0;
  }
}

/* Sous 768px il n'y a plus la place pour deux colonnes : la carte redevient
   une pile, texte puis schema. */
@media screen and (max-width: 767px) {
  .objectifs__carte {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding: 24px;
  }

  .objectifs__schema {
    min-height: 244px;
  }
}

@media screen and (max-width: 479px) {
  .objectifs__carte {
    padding: 20px;
  }

  .objectifs__schema {
    gap: 12px;
    padding: 14px;
  }

  /* Douze barres dans 275px utiles : la gouttiere passe a 3px pour garder des
     barres d'une vingtaine de pixels, encore lisibles. */
  .objectifs__mois,
  .objectifs__axe {
    gap: 3px;
  }

  .objectifs__mois {
    height: 100px;
  }

  /* Les gouttieres se resserrent plutot que la colonne des libelles : sous
     86px, "Ventes nettes" passe a la ligne et la rangee grandit. */
  .objectifs__ecart {
    grid-template-columns: 86px minmax(0, 1fr) 50px;
    gap: 6px;
  }

  .objectifs__ecarts {
    gap: 12px;
  }

  .objectifs__kpis {
    gap: 14px;
  }
}