/* Ligne 125 — temps 1 : la phrase. Téléphone d'abord, élargie au-delà de 1 024 px. */
.phrase {
  /* 36 px : le bandeau de démonstration, au-dessus */
  position: relative; display: flex; flex-direction: column; min-height: calc(100svh - 36px);
  padding: 92px var(--marge) 24px;
}
.titre { font-size: 17px; font-weight: 500; line-height: 1.35; max-width: 34ch; }
.titre b { font-weight: 800; }
.corps { display: flex; flex-direction: column; flex: 1; }

.grande { margin-top: 22px; font-weight: 700; line-height: .95; --fs: 13.4vw; font-stretch: calc(var(--wd) * 1%); }
.ligne { display: contents; }
.g {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 12px;
  font-size: var(--fs);
}
.gt {
  display: inline-block; white-space: nowrap;
  font-size: calc(var(--fs) * var(--k, 1));
  font-stretch: calc(var(--wd-l, var(--wd)) * 1%);
}
.l4 { --fs: 44vw; }
.g4 { line-height: .9; margin-top: .04em; }
.g4 .remplie { --photo-pos: 50% 58%; }
.grande .lien-court { line-height: 1.2; }
.g4 .lien-court { margin-top: 18px; }
.d-seul { display: none; }
.sans-photo { color: var(--blanc) !important; -webkit-text-fill-color: var(--blanc) !important; background: none !important; -webkit-text-stroke: 0 !important; }

/* Champs : sélecteur natif transparent par-dessus le mot, à l'ordinateur un bouton qui ouvre le rouleau */
.champ__sel {
  position: absolute; inset: -12px -2px; width: calc(100% + 4px); height: calc(100% + 24px);
  opacity: 0; font-size: 16px; border: 0; background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.champ__btn { display: none; }
@media (min-width: 1024px) and (hover: hover) {
  .champ__sel { display: none; }
  .champ__btn {
    display: block; position: absolute; inset: 0; width: 100%; height: 100%;
    border: 0; padding: 0; background: transparent; color: transparent; border-radius: 6px;
  }
}
.sans-js .champ__val, .sans-js .champ__btn { display: none; }
.sans-js .champ__sel { position: static; opacity: 1; width: auto; height: auto; font: inherit; color: var(--blanc); background: var(--repli); }

.seconde { margin-top: 26px; font-size: 17px; font-weight: 500; line-height: 1.5; max-width: 30em; }
.seconde .champ { font-weight: 800; }

.resultat { display: grid; gap: 14px; margin-top: 26px; }
.resultat__faits { font-size: 16px; line-height: 1.45; color: var(--gris); max-width: 30em; }
.resultat__faits span { display: block; }
.resultat__faits [data-faits] { color: var(--blanc); }
.total { font-size: 64px; font-weight: 800; font-stretch: 125%; line-height: 1; white-space: nowrap; }
.continuer { width: 100%; }

/* Total : chaque chiffre vit dans une case de la largeur du plus large */
.cs { display: inline-block; height: 1em; overflow: hidden; vertical-align: top; width: .62em; text-align: center; }
.bande { display: block; transition: transform .5s var(--courbe); }
.bande > span { display: block; height: 1em; }

/* Rouleau (ordinateur) : valeurs voisines au-dessus et au-dessous, dans le même corps */
.rouleau {
  position: absolute; z-index: 45; transform: translateY(calc(var(--h) * -2));
  font-weight: 800; line-height: 1; color: var(--blanc);
  background: var(--asphalte); box-shadow: 0 0 0 14px var(--asphalte), 0 40px 80px 10px rgb(0 0 0 / .65);
  border-radius: 2px; outline: none;
}
.rouleau__o, .rouleau__vide { height: var(--h); display: flex; align-items: center; gap: .35em; white-space: nowrap; }
.rouleau__o { color: var(--gris2); cursor: pointer; }
.rouleau__o:nth-child(1), .rouleau__o:nth-child(5) { opacity: .45; }
.rouleau__o.est-actif { color: var(--blanc); }
.rouleau__o.est-actif .rouleau__t {
  background: var(--m-plein) no-repeat 0 .96em / 100% max(4px, .1em);
}
.rouleau:focus-visible .rouleau__o.est-actif { outline: 2px solid var(--blanc); outline-offset: 6px; }
.est-ferme .rouleau__t { text-decoration: line-through; text-decoration-thickness: .06em; }
.rouleau__n { font-size: 15px; font-weight: 500; font-stretch: 100%; line-height: 1.2; color: var(--gris); white-space: normal; max-width: 18ch; }

/* Ordinateur : quatre lignes sans retour automatique, ligne de résultat au bord bas */
@media (min-width: 1024px) {
  .phrase { padding: 112px var(--marge) 28px; }
  .titre { font-size: 22px; max-width: none; }
  .grande { margin-top: clamp(16px, 3svh, 40px); line-height: .92; --fs: min(7.6vw, 9.6svh); }
  .ligne {
    display: block; width: max-content; white-space: nowrap;
    font-size: calc(var(--fs) * var(--k, 1));
    font-stretch: calc(var(--wd-l, var(--wd)) * 1%);
  }
  .l4 { --fs: max(120px, min(10.5vw, 13svh)); }
  .g, .gt { display: inline; font-size: inherit; font-stretch: inherit; }
  .g4 { margin: 0; }
  .grande .lien-court, .t-seul { display: none; }
  .d-seul { display: inline; }
  .seconde { margin-top: clamp(18px, 3svh, 36px); font-size: 22px; max-width: 29em; }
  .resultat {
    margin-top: auto; padding-top: 24px;
    grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; column-gap: clamp(24px, 3vw, 48px);
  }
  .total { font-size: min(9vw, 10svh); }
  .continuer { width: auto; min-width: 180px; }
}