/* ===========================================================================
   AEC TaskPlan — logotype « La ligne de temps »
   ---------------------------------------------------------------------------
   Le nom composé en géométrique contemporaine — le sigle appuyé et vert, le
   nom allégé et or — surmontant une règle dont une partie seulement est
   remplie : le temps consommé sur le temps prévu.

   Le logotype est du TEXTE, pas une image. Il reste donc net à toute
   résolution, se sélectionne, se lit par un lecteur d'écran, et suit la
   couleur qu'on lui donne.

   Emploi :
     <span class="logotype">
       <span class="logotype-mot"><span class="logotype-aec">AEC</span> TaskPlan</span>
       <span class="logotype-regle"><i></i></span>
     </span>

   La taille se règle par font-size sur .logotype : tout le reste est en em et
   suit proportionnellement.

   Sur fond sombre, ajouter la classe .logotype--clair.
   =========================================================================== */

.logotype {
  display: inline-flex;
  flex-direction: column;
  gap: 0.28em;
  font-size: 28px;          /* valeur par défaut, à surcharger au cas par cas */
  line-height: 1;
  user-select: none;
}

.logotype-mot {
  /* Une géométrique contemporaine : ses formes rondes répondent au carré
     arrondi de la marque, et le mot se lit d'un bloc. Le slab serif employé
     d'abord donnait au nom un air de registre ancien. */
  font-family: "Outfit", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  /* « TaskPlan » porte l'or du cabinet, celui de la marque : le mot et le
     symbole appartiennent ainsi à la même identité, et le vert-or réveille
     l'ensemble là où le quasi-noir l'éteignait.

     C'est un or approfondi, pas l'or vif #E2AA03 de l'aplat, qui ne donnerait
     que 2,1 de contraste sur blanc et paraîtrait délavé. Celui-ci se tient au
     plus près de l'éclat : 3,2, juste au-dessus du seuil des grands textes.
     En montant davantage vers l'or vif, le mot commence visiblement à pâlir.

     La graisse compense ce que la teinte perd en densité : 600 plutôt que 500,
     pour que le mot garde du corps en devenant plus clair. */
  font-weight: 600;
  /* Une géométrique demande une chasse resserrée en grand corps : sans cela
     les lettres flottent et le mot se délite. */
  letter-spacing: -0.028em;
  color: #BA8602;
  white-space: nowrap;
  /* Les en-têtes de l'application portent une ombre portée sur leurs titres.
     Héritée ici, elle empâte les lettres et salit le mot. */
  text-shadow: none;
}

/* Posé seul comme titre d'écran : centré, avec sa respiration.
   Sans cela le logotype se cale à gauche et colle au champ suivant. */
.logotype--bloc {
  display: flex;
  width: fit-content;
  margin: 0 auto 26px;
}

/* Le logo sur sa plaque.
   ---------------------------------------------------------------------------
   L'en-tête de l'accueil est un dégradé qui va du bleu foncé au bleu clair.
   Aucun vert ne se lit correctement sur toute son étendue : sur le foncé il
   faudrait un vert clair, sur le clair un vert foncé. Employer deux verts
   selon l'écran donnait au logo deux visages — ce qui se remarque, et à juste
   titre.
   La plaque règle le problème à la racine : le logotype se pose toujours sur
   du blanc, donc ses couleurs ne changent jamais d'un écran à l'autre. C'est
   la solution retenue par la plupart des identités confrontées à des fonds
   qu'elles ne maîtrisent pas. */
.logotype--plaque {
  background: #FFFFFF;
  padding: 0.5em 0.78em 0.6em;
  border-radius: 0.28em;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

/* Le nom du cabinet passe devant : c'est son outil avant d'être un produit.
   Plus gras et plus coloré que le reste du mot, il porte le regard. */
.logotype-aec {
  color: #1D6F42;
  font-weight: 700;
}

.logotype-regle {
  height: 0.1em;
  min-height: 2px;
  border-radius: 0.05em;
  background: #DBE1E7;
  display: flex;
  overflow: hidden;
}

/* La portion remplie. 62 % : assez pour qu'on lise une mesure en cours,
   pas assez pour qu'on croie l'échéance atteinte. */
.logotype-regle > i {
  display: block;
  height: 100%;
  width: 62%;
  background: #1D6F42;
}

/* --- sur fond sombre --- */
.logotype--clair .logotype-mot { color: #FFFFFF; }
.logotype--clair .logotype-aec { color: #7CC79B; }
.logotype--clair .logotype-regle { background: rgba(255, 255, 255, 0.22); }
.logotype--clair .logotype-regle > i { background: #7CC79B; }

/* --- baseline sous le logotype, quand il sert de titre d'écran --- */
.logotype-baseline {
  margin: 0.5em 0 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.46em;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: #5A6B78;
}

.logotype--clair + .logotype-baseline,
.logotype--clair ~ .logotype-baseline { color: #9FB0BE; }

/* La police vient d'un service extérieur. Si elle n'arrive pas — poste hors
   ligne, service indisponible — la pile de repli prend le relais : le
   logotype s'affiche alors dans une autre lettre, mais il s'affiche. */