/* Section constat : un paragraphe éteint que le visiteur allume en le lisant (PLAN 7.2).
   Sans JS, en mouvement réduit et en contraste renforcé, tout est en --encre, sans halo ni consigne. */

.constat {
  padding-block: var(--pas);
  overflow-x: clip; /* le halo peut dépasser du bloc près des bords : jamais de défilement horizontal */
}

.constat__titre {
  grid-column: 1 / -1;
}

.constat__consigne {
  display: none;
  grid-column: 1 / -1;
  margin-top: clamp(24px, 2.4vw, 40px);
  color: var(--texte);
}

.constat__consigne-tactile {
  display: none;
}

.constat__bloc {
  display: grid;
  grid-column: 1 / -1;
  margin-top: clamp(48px, 6vw, 104px);
}

/* Texte réel et calque partagent la même cellule : même largeur, mêmes retours à la ligne. */
.constat__texte {
  grid-area: 1 / 1;
}

/* v3 : trois phrases courtes, en grand ; le calcul en petit ; le montant écrase tout. */
.constat__paragraphe {
  max-width: 17em;
  font-size: clamp(2rem, 4.4vw, 4.75rem);
  font-variation-settings: "opsz" 60;
  font-weight: 320;
  line-height: 1.04;
  letter-spacing: -0.025em;
}

.constat__paragraphe--chiffre {
  max-width: none;
  margin-top: clamp(40px, 5vw, 80px);
  font-family: var(--grotesque);
  font-size: clamp(.9375rem, 1.2vw, 1.25rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
}

/* La chute : le calcul se refait de tête, mais le vrai coût déborde du calcul. Écrite en italique,
   comme les annotations ailleurs sur le site, et non en encre pleine : elle referme le paragraphe,
   elle n'a pas à crier plus fort que le chiffre. */
.constat__paragraphe--reste {
  max-width: 26em;
  margin-top: clamp(28px, 3.4vw, 48px);
  font-size: var(--t-grand);
  font-variation-settings: "opsz" 28;
  font-weight: 380;
  font-style: italic;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--texte);
}

.constat__phrase {
  color: var(--encre);
}

.constat__titre {
  max-width: 13ch;
}

/* v2 : le montant en grotesque, sur toute la largeur. C’est la chute du paragraphe et l’élément le
   plus lourd de la page après l’éclair. */
.constat__chiffre {
  display: block;
  margin: .08em 0 .02em -.045em;
  font-family: var(--grotesque);
  font-size: min(21vw, 22rem);
  font-weight: 400;
  line-height: .82;
  letter-spacing: -0.07em;
  white-space: nowrap;
}

/* Calque du halo, créé par JS sur pointeur fin uniquement. */
.constat__calque {
  --halo: clamp(160px, 16vw, 280px);
  display: none;
  position: relative;
  grid-area: 1 / 1;
  container-type: inline-size;
  pointer-events: none;
}

.constat__halo {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--halo);
  height: var(--halo);
  -webkit-mask-image: radial-gradient(closest-side, var(--encre) 45%, transparent);
  mask-image: radial-gradient(closest-side, var(--encre) 45%, transparent);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: 0;
  transition: opacity .45s var(--courbe-sortie);
  will-change: transform, opacity;
}

.constat__halo.est-visible {
  opacity: 1;
  transition-duration: .25s;
}

.constat__clone {
  position: absolute;
  top: 0;
  left: 0;
  width: 100cqi;
  color: var(--encre);
  user-select: none;
  will-change: transform;
}

/* État animé : seulement avec JS, mouvement autorisé et contraste standard. */
@media (prefers-reduced-motion: no-preference) and (prefers-contrast: no-preference) and (forced-colors: none) {
  .js .constat__consigne {
    display: block;
  }

  .js .constat__phrase {
    color: var(--eteint);
    transition: color .4s ease;
  }

  .constat__phrase.est-lue {
    color: var(--encre);
  }

  .constat__calque {
    display: block;
  }
}

@media not all and (hover: hover) and (pointer: fine) {
  .constat__consigne-bureau {
    display: none;
  }

  .constat__consigne-tactile {
    display: inline;
  }
}

@media (min-width: 1080px) {
  .constat__titre {
    grid-column: 1 / span 10;
    max-width: none;
  }

  /* Un mur de texte : toute la largeur, la densité est voulue face au vide du manifeste qui suit. */
  .constat__bloc {
    grid-column: 1 / -1;
  }
}