@charset "utf-8";

/* ═══════════════════════════════════════════════════════════════════
   LES MAQUETTES D'ÉCRAN
   Les quatre écrans de l'app, redessinés au pixel à partir du design
   system (planche « Écrans » + palette « L'Aube »). Ce sont les mêmes
   jetons, les mêmes composants et les mêmes chiffres de démonstration
   que l'application.

   COMMENT ÇA TIENT : chaque écran est dessiné à sa taille native
   (390 × 844, la taille d'un iPhone), puis RÉDUIT par `scale()`. On
   garde ainsi le dessin exact de l'app — les 0,5 px de filet, les
   rayons de 24 px — au lieu de le réinventer en plus petit.

   Les maquettes gardent le thème NUIT même quand la page est en mode
   jour : c'est un produit qu'on montre, pas une surface de la page.
   ═══════════════════════════════════════════════════════════════════ */

.tel {
  --ech: 0.8;
  --n-canvas: #080d1a;
  --n-surface: #0e1526;
  --n-raised: #172136;
  --n-border: #25304b;
  --n-ink: #f3f5fa;
  --n-soft: #9aa6c0;
  --n-faint: #7e8aa8;
  --n-dim: #5b6684;
  --n-or: #e7b252;
  --n-deep: #c9902f;
  --n-pos: #4cc38a;
  --n-neg: #f27362;

  width: calc(390px * var(--ech));
  height: calc(844px * var(--ech));
  flex: none;
  position: relative;
  border-radius: calc(52px * var(--ech));
  padding: calc(10px * var(--ech));
  background: linear-gradient(160deg, #2b3450, #141b2b);
  box-shadow:
    0 46px 90px -30px rgba(0, 0, 0, 0.85),
    0 0 0 0.5px rgba(243, 245, 250, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

@media (max-width: 1100px) {
  .tel {
    --ech: 0.72;
  }
}

@media (max-width: 620px) {
  .tel {
    --ech: 0.66;
  }
}

/* L'écran lui-même : dessiné en 390×844, puis réduit. */
.tel > article {
  width: 390px;
  height: 844px;
  transform: scale(var(--ech));
  transform-origin: 0 0;
  background: var(--n-canvas);
  border-radius: 42px;
  overflow: hidden;
  position: relative;
  color: var(--n-ink);
  font: 400 14px / 1.45 var(--sans);
  display: flex;
  flex-direction: column;
}

/* L'encoche. Sans elle, la maquette ne se lit pas comme un téléphone. */
.tel > article::before {
  content: '';
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 108px;
  height: 30px;
  border-radius: 99px;
  background: #04070e;
  z-index: 6;
}

/* ── Chrome d'écran ─────────────────────────────────────────────── */
.tel .statut {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 26px 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.tel .statut span:last-child {
  display: flex;
  gap: 4px;
  align-items: center;
  color: var(--n-soft);
  font-size: 11px;
}

.tel .ecran {
  flex: 1;
  overflow: hidden;
  padding: 0 16px;
}

.tel .haut {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 4px 16px;
}

.tel .marque {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  letter-spacing: 2.5px;
  font-size: 16px;
}

.tel .titre-ecran {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.tel .jeton {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--n-raised);
  border: 0.5px solid var(--n-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--n-soft);
}

/* ── Éléments communs ───────────────────────────────────────────── */

/* Les maquettes n'emploient QUE des éléments sémantiques — donc
   beaucoup de `span`, qui sont en ligne par défaut. Sans cette
   déclaration, « Livret A » et « Épargne » se collent sur la même
   ligne au lieu de s'empiler, et les jauges disparaissent. C'est la
   contrepartie du choix « pas de div » : il faut redire ce qu'un
   `div` donnait gratuitement. */
.tel .nom,
.tel .det,
.tel .enveloppe,
.tel .jauge,
.tel .etiq,
.tel .tuile span,
.tel .du span,
.tel .resultat span,
.tel .pousse {
  display: block;
}

/* Sauf celles qui doivent rester des boîtes flexibles. */
.tel .enveloppe header,
.tel .ecart {
  display: flex;
}

.tel .etiq {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--n-faint);
  text-transform: uppercase;
}

.tel .somme {
  display: block;
  font-size: 30px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  margin-top: 3px;
}

.tel .apropos {
  font-size: 12.5px;
  color: var(--n-soft);
  margin-top: 2px;
}

.tel .carte {
  background: var(--n-surface);
  border: 0.5px solid var(--n-border);
  border-radius: 22px;
  padding: 13px 14px;
}

.tel .entete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 18px 4px 9px;
}

.tel .entete b {
  font-size: 15px;
}

.tel .entete i {
  font-style: normal;
  color: var(--n-or);
  font-size: 12.5px;
  font-weight: 700;
}

.tel .ligne {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 50px;
}

.tel .past {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--n-raised);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tel .past svg {
  stroke: var(--n-soft);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tel .pousse {
  flex: 1;
  min-width: 0;
}

.tel .nom {
  font-weight: 600;
  font-size: 13px;
}

.tel .det {
  font-size: 11px;
  color: var(--n-faint);
}

.tel .val {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

.tel .plus {
  color: var(--n-pos);
}

.tel .bouton {
  height: 46px;
  margin-top: 12px;
  border-radius: 99px;
  background: linear-gradient(103deg, #f0c878, var(--n-deep));
  color: #191002;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13.5px;
}

/* ── Tuiles ─────────────────────────────────────────────────────── */
.tel .tuiles {
  display: flex;
  gap: 9px;
  margin-top: 13px;
}

.tel .tuile {
  flex: 1;
  background: var(--n-surface);
  border: 0.5px solid var(--n-border);
  border-radius: 22px;
  padding: 13px;
}

.tel .tuile b {
  display: block;
  font-size: 16px;
  font-weight: 800;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}

.tel .tuile span {
  font-size: 10.5px;
  color: var(--n-faint);
}

/* ── Jauges ─────────────────────────────────────────────────────── */
.tel .jauge {
  height: 6px;
  border-radius: 99px;
  background: var(--n-raised);
  overflow: hidden;
  margin-top: 7px;
}

.tel .jauge i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--n-deep), var(--n-or));
}

/* Valeurs de démonstration versionnées : les styles en ligne sont interdits
   par la CSP du domaine. */
.tel .jauge .w-48 {
  width: 48%;
}
.tel .jauge .w-56 {
  width: 56%;
}
.tel .jauge .w-58 {
  width: 58%;
}
.tel .jauge .w-73 {
  width: 73%;
}
.tel .jauge .w-77 {
  width: 77%;
}
.tel .carte-compacte {
  margin-top: 4px;
}
.tel .ligne-40 {
  min-height: 40px;
}
.tel .ligne-42 {
  min-height: 42px;
}
.tel .det-bloc {
  display: block;
  padding-bottom: 9px;
}
.tel .val-neutre {
  color: #f3f5fa;
}
.tel .val-negative {
  color: #f27362;
}
.tel .nuance-1 {
  background: #e7b252;
}
.tel .nuance-2 {
  background: #c9902f;
}
.tel .nuance-3 {
  background: #9aa6c0;
}
.tel .nuance-4 {
  background: #7e8aa8;
}
.tel .nuance-5 {
  background: #5b6684;
}

.tel .enveloppe {
  padding: 11px 0;
  border-bottom: 0.5px solid var(--n-border);
}

.tel .enveloppe:last-child {
  border-bottom: none;
}

.tel .enveloppe header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12.5px;
  padding: 0;
  border: none;
  position: static;
  background: none;
  backdrop-filter: none;
}

.tel .enveloppe header b {
  font-weight: 600;
}

.tel .enveloppe header span {
  font-variant-numeric: tabular-nums;
  color: var(--n-soft);
  font-size: 11.5px;
}

/* ── La carte « on vous doit » : le seul or plein de l'écran ────── */
.tel .du {
  margin-top: 13px;
  background: linear-gradient(150deg, #1d2739, var(--n-surface));
  border: 0.5px solid rgba(231, 178, 82, 0.42);
  border-radius: 22px;
  padding: 13px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.tel .du b {
  display: block;
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--n-or);
}

.tel .du span {
  font-size: 11px;
  color: var(--n-soft);
}

/* ── Répartition ────────────────────────────────────────────────── */
.tel .part {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
}

.tel .part i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  flex: none;
}

.tel .part .nom {
  flex: 1;
  font-size: 12.5px;
  font-weight: 500;
}

.tel .part .val {
  font-size: 12.5px;
}

.tel .part .pc {
  width: 40px;
  text-align: right;
  font-size: 11.5px;
  color: var(--n-faint);
  font-variant-numeric: tabular-nums;
}

/* ── Résultat de simulateur ─────────────────────────────────────── */
.tel .resultat {
  background: linear-gradient(155deg, #17203a, var(--n-surface));
  border: 0.5px solid var(--n-border);
  border-radius: 24px;
  padding: 17px;
  margin-top: 4px;
}

.tel .resultat .somme {
  font-size: 34px;
}

.tel .ecart {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 9px;
  font-size: 12px;
  color: var(--n-soft);
}

.tel .ecart b {
  color: var(--n-neg);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}

.tel .levier {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 0.5px solid var(--n-border);
  font-size: 12.5px;
}

.tel .levier:last-child {
  border-bottom: none;
}

.tel .levier em {
  font-style: normal;
  margin-left: auto;
  color: var(--n-pos);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
}

.tel .rang {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--n-raised);
  color: var(--n-or);
  font-size: 10.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

/* L'hypothèse est TOUJOURS à l'écran — c'est la règle du produit,
   donc elle est dans la maquette. */
.tel .hypothese {
  margin-top: 12px;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--n-faint);
  padding-left: 9px;
  border-left: 1.5px solid var(--n-border);
}

/* ── Barre de navigation ────────────────────────────────────────── */
.tel .barre {
  margin-top: auto;
  background: rgba(10, 16, 30, 0.86);
  backdrop-filter: blur(14px);
  border-top: 0.5px solid rgba(243, 245, 250, 0.09);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 9px 8px 26px;
}

.tel .barre span {
  font-size: 9.5px;
  color: var(--n-faint);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 56px;
}

.tel .barre svg {
  stroke: var(--n-faint);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tel .barre .actif {
  color: var(--n-or);
  font-weight: 700;
}

.tel .barre .actif svg {
  stroke: var(--n-or);
}

.tel .rond {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--n-or), var(--n-deep));
  margin-top: -24px;
  box-shadow: 0 10px 24px rgba(201, 144, 47, 0.34);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.tel .rond svg {
  stroke: #191002;
  stroke-width: 2.4;
  fill: none;
  stroke-linecap: round;
}

/* ── Le halo derrière les téléphones ────────────────────────────── */
.scene {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.scene::before {
  content: '';
  position: absolute;
  inset: -14% -20%;
  background: radial-gradient(
    52% 46% at 50% 42%,
    rgba(231, 178, 82, 0.16),
    rgba(231, 178, 82, 0) 68%
  );
  pointer-events: none;
}

/* Deux téléphones qui se chevauchent, pour le héros. */
.scene.duo {
  gap: 0;
}

.scene.duo .tel:first-child {
  transform: translateY(22px) rotate(-4deg);
  z-index: 1;
}

.scene.duo .tel:last-child {
  margin-left: -78px;
  transform: translateY(-16px) rotate(3.5deg);
  z-index: 2;
}

@media (max-width: 620px) {
  .scene.duo .tel:first-child {
    display: none;
  }
  .scene.duo .tel:last-child {
    margin-left: 0;
    transform: none;
  }
}