/* ══════════════════════════════════════════════════════════════════════
   Téléphone du Copilote (page 10)

   Il remplace la capture d'écran qui était utilisée jusqu'ici : le texte
   est du vrai texte, il reste net à toutes les échelles, et les messages
   peuvent arriver un par un.

   La boîte est posée par `.s10__tel` dans slides.css ; tout ce qui suit
   est relatif à cette boîte, en pourcentages ou en points de la scène.
   ══════════════════════════════════════════════════════════════════════ */

.tel{
  --tel-vert:#e2f7cd;          /* bulle sortante */
  --tel-fil:#f3f1ee;           /* fond du fil de discussion */
  --tel-encre:#111d2e;
  --tel-gris:#8d97a6;
  --tel-chassis:#2b2f36;

  border-radius:29px;
  background:
    linear-gradient(150deg,#f2f3f5 0%,#9aa0a8 12%,#4a4f57 30%,#2b2f36 55%,#5b6068 82%,#e9eaec 100%);
  padding:3.4px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 18px 44px rgba(7,26,60,.22),
    0 3px 10px rgba(7,26,60,.12);
}

/* Les deux tranches de boutons, purement décoratives */
.tel::before,
.tel::after{
  content:""; position:absolute; width:1.6px; border-radius:2px;
  background:linear-gradient(180deg,#6d727a,#3a3e45);
}
/* Volume + / − à gauche (deux barres identiques), bouton latéral à droite */
.tel::before{ left:-1.3px; top:92px;  height:28px; box-shadow:0 36px 0 #575c64; }
.tel::after { right:-1.3px; top:112px; height:46px; }

.tel__ecran{
  position:relative; width:100%; height:100%;
  border-radius:26px; overflow:hidden;
  background:#fff;
  display:flex; flex-direction:column;
}

/* ---------- Barre d'état ---------- */
.tel__statut{
  position:relative; flex:none; height:21px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 12px 0 14px;
  font-size:7.4px; font-weight:700; color:var(--tel-encre); letter-spacing:.01em;
}
.tel__ile{
  position:absolute; left:50%; top:4.5px; translate:-50% 0;
  width:52px; height:14px; border-radius:7px; background:#0b0d10;
}
.tel__ile::after{
  content:""; position:absolute; right:4px; top:50%; translate:0 -50%;
  width:5.4px; height:5.4px; border-radius:50%;
  background:radial-gradient(circle at 34% 32%,#1e3a63 0%,#0d1826 70%);
}
.tel__jauges{ display:flex; align-items:center; gap:3.4px; }

.tel__reseau{ display:flex; align-items:flex-end; gap:.9px; height:6.4px; }
.tel__reseau b{ width:1.5px; background:var(--tel-encre); border-radius:.5px; }
.tel__reseau b:nth-child(1){ height:2.4px; }
.tel__reseau b:nth-child(2){ height:3.7px; }
.tel__reseau b:nth-child(3){ height:5px; }
.tel__reseau b:nth-child(4){ height:6.4px; }

/* L'antenne wifi : trois arcs, dessinés au masque conique */
.tel__wifi{
  width:7.6px; height:6.4px; background:var(--tel-encre);
  -webkit-mask:radial-gradient(circle at 50% 100%,#000 0 26%,transparent 27% 44%,#000 45% 62%,transparent 63% 80%,#000 81% 100%)
        no-repeat 50% 100% / 100% 100%;
          mask:radial-gradient(circle at 50% 100%,#000 0 26%,transparent 27% 44%,#000 45% 62%,transparent 63% 80%,#000 81% 100%)
        no-repeat 50% 100% / 100% 100%;
  clip-path:polygon(0 0,100% 0,50% 100%);
}
.tel__batt{
  position:relative; width:12.4px; height:6.4px; border-radius:2px;
  border:.7px solid rgba(17,29,46,.45);
}
.tel__batt::before{
  content:""; position:absolute; inset:1px; width:8.2px; border-radius:1px;
  background:var(--tel-encre);
}
.tel__batt::after{
  content:""; position:absolute; left:100%; top:50%; translate:.7px -50%;
  width:1.2px; height:2.6px; border-radius:0 1px 1px 0;
  background:rgba(17,29,46,.45);
}

/* ---------- En-tête de la conversation ---------- */
.tel__entete{
  flex:none; height:35px; display:flex; align-items:center; gap:6px;
  padding:0 10px 0 8px;
  background:#fff; border-bottom:.5px solid #e9ebef;
}
.tel__retour{ width:10.5px; height:10.5px; flex:none; fill:none;
  stroke:var(--tel-encre); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.tel__avatar{
  flex:none; width:20.5px; height:20.5px; border-radius:50%;
  background:var(--rose); color:#fff;
  display:grid; place-items:center;
  font-size:7.6px; font-weight:800; letter-spacing:.02em; padding-bottom:.4px;
}
.tel__ident{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:.5px; }
.tel__ident b{
  display:flex; align-items:center; gap:3px;
  font-size:8.6px; font-weight:700; line-height:10px; color:var(--tel-encre);
  letter-spacing:-.005em; white-space:nowrap;
}
.tel__verif{
  flex:none; width:8px; height:8px; border-radius:50%; background:#22b64a;
  display:grid; place-items:center;
}
.tel__verif svg{ width:5.4px; height:5.4px; fill:none; stroke:#fff; stroke-width:3.4;
  stroke-linecap:round; stroke-linejoin:round; }
.tel__ident em{ font-style:normal; font-size:6.4px; line-height:7.5px; color:var(--tel-gris); }
.tel__appel{ width:11px; height:11px; flex:none; fill:none;
  stroke:var(--tel-encre); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- Fil de discussion ---------- */
.tel__fil{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column; justify-content:flex-end; gap:5px;
  padding:8px 8px 3px;
  background:var(--tel-fil);
}

.tel__msg{
  position:relative; max-width:88%;
  padding:5px 6.5px 9px;
  border-radius:8px;
  font-family:var(--font-alt);
  font-size:7.05px; line-height:9.8px; color:var(--tel-encre);
}
.tel__msg p{ margin:0; }
.tel__h{
  position:absolute; right:6px; bottom:3px;
  display:flex; align-items:center; gap:2px;
  font-size:5.6px; line-height:6px; color:var(--tel-gris);
}
.tel__lu{ display:block; width:7.5px; height:5.2px; }
.tel__lu svg{ width:100%; height:100%; fill:none; stroke:#3fa4f5;
  stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }

.tel__msg--moi{
  align-self:flex-end; background:var(--tel-vert);
  border-radius:8px 8px 2px 8px;
  padding-right:30px;
}
.tel__msg--lui{
  align-self:flex-start; background:#fff;
  border-radius:8px 8px 8px 2px;
  padding-right:24px;
  box-shadow:0 1px 2px rgba(7,26,60,.07);
}
/* Message illustré d'un picto : le texte s'écarte pour lui laisser la place */
.tel__msg--ico{ display:flex; align-items:center; gap:7px; padding-left:6px; }
.tel__pic{
  flex:none; width:17px; height:17px;
  fill:none; stroke:var(--rose); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}

/* ---------- Barre de saisie ---------- */
.tel__saisie{
  flex:none; display:flex; align-items:center; gap:4.5px;
  padding:4px 6px 8px; background:var(--tel-fil);
}
.tel__champ{
  flex:1 1 auto; height:20px; border-radius:10px; background:#fff;
  display:flex; align-items:center; gap:5px; padding:0 7px;
  box-shadow:0 1px 2px rgba(7,26,60,.07);
}
.tel__champ span{ flex:1 1 auto; font-family:var(--font-alt); font-size:7.4px; color:var(--tel-gris); }
.tel__champ svg{ flex:none; width:9.4px; height:9.4px; fill:none;
  stroke:#5d6774; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.tel__micro{
  flex:none; width:20px; height:20px; border-radius:50%; background:#17a44a;
  display:grid; place-items:center;
}
.tel__micro svg{ width:9.6px; height:9.6px; fill:none; stroke:#fff; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round; }

.tel__barre{
  position:absolute; left:50%; bottom:3.4px; translate:-50% 0;
  width:70px; height:2.6px; border-radius:2px; background:#0b0d10;
}