/* ==========================================================================
   Digigrowth - variante lisible

   Cette feuille ne contient QUE des couleurs. Toute la mise en page vient de
   `../digigrowth/styles.css`, importée ci-dessous : structure, grilles, rayons,
   rythme, composants restent partagés avec l'original, qui n'est pas touché.

   Corriger la palette ici, corriger la structure là-bas. Une seule source.

   Règle appliquée (skill « lisibilite ») : aucun texte atténué. Encre pleine
   partout ; la hiérarchie passe par la taille, la graisse et l'espacement.
   ========================================================================== */

@import url("../digigrowth/styles.css?v=4");

:root {
  /* Le template d'origine posait #686868 pour le corps et #a3a3a3 pour les
     métadonnées. Le premier passe tout juste la norme AA, le second est à
     2,52:1 - sous le seuil. Les deux passent en encre pleine. */
  --c-body:  #17120F;
  --c-muted: #17120F;

  /* L'accent est assombri pour rester lisible en texte sur fond clair.
     La teinte claire d'origine reste disponible pour les aplats. */
  --c-accent-text: #a8410f;
}

/* --------------------------------------------------------- hiérarchie ----
   Ce que la couleur ne fait plus, la forme doit le faire. Les niveaux
   secondaires se distinguent par une taille plus petite, une graisse plus
   forte et un interlettrage ouvert - pas par de la pâleur.
   ------------------------------------------------------------------------ */

.eyebrow {
  color: var(--c-body);
  font-weight: var(--w-bold);
  letter-spacing: .14em;
}

.meta {
  color: var(--c-body);
  font-weight: var(--w-semibold);
  letter-spacing: .06em;
}

.metric-label,
.testimonial-role {
  color: var(--c-body);
  font-weight: var(--w-semibold);
}

/* Un indice de saisie doit rester distinguable d'une valeur saisie sans être
   illisible : encre pleine, mais en italique. */
.subscribe input::placeholder {
  color: var(--c-body);
  font-style: italic;
  opacity: 1;
}

/* ------------------------------------------------------- pied de page ----
   L'original passait les liens en blanc à 62 % d'opacité : 18 éléments de
   texte semi-transparents. Tout repasse en blanc plein.
   ------------------------------------------------------------------------ */

.site-footer { color: #ffffff; }
.site-footer a { color: #ffffff; }
.subscribe--inverse input { color: #ffffff; }
.subscribe--inverse input::placeholder { color: #ffffff; font-style: italic; opacity: 1; }

/* Les filets gardent leur discrétion : ce sont des décorations, pas du texte. */
.footer-top,
.footer-bottom { border-color: rgba(255, 255, 255, .28); }

/* --------------------------------------------------------------- liens ----
   Un lien coloré doit lui aussi tenir le contraste.
   ------------------------------------------------------------------------ */

.link-arrow { color: var(--c-accent-text); font-weight: var(--w-semibold); }
.annexe-link:hover { color: var(--c-accent-text); }

/* La pastille d'étiquette : fond clair, encre pleine. */
.tag { background: #ededed; color: var(--c-body); font-weight: var(--w-semibold); }

/* ------------------------------------------------------- repère visuel ----
   Pour ne pas confondre les deux onglets pendant la comparaison.
   ------------------------------------------------------------------------ */

.mark-switch::after {
  content: "variante lisible";
  display: block;
  margin-top: var(--s-2);
  font-size: .68rem;
  font-weight: var(--w-semibold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-accent-text);
}