/* ---------------------------------------------------------------------------
   Agent vocal IA
   ---------------------------------------------------------------------------
   La page hérite du système de refonte. Sa pièce propre est la transcription
   d'appel : l'artefact réel du métier, avec ses secondes. Elle sert deux fins
   à la fois, montrer le produit et prouver la conformité, puisqu'on y lit
   l'annonce du caractère automatisé et la sortie vers un humain.
   --------------------------------------------------------------------------- */

/* ── Transcription d'appel ───────────────────────────────────────────────── */

.aio-avo .avo-appel{
  background:var(--nuit);
  border:1px solid var(--filet);
  border-radius:var(--r);
  padding:clamp(20px,2.4vw,26px);
}

.aio-avo .avo-appel-tete{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding-block-end:16px;
  margin-block-end:18px;
  border-block-end:1px solid var(--filet);
}

.aio-avo .avo-appel-t,
.aio-avo .avo-appel-e{
  font-family:'AzeretMono',ui-monospace,monospace;
  font-size:11.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--texte-3);
}

.aio-avo .avo-appel-e{
  color:var(--vert);
  white-space:nowrap;
}

.aio-avo .avo-l{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:14px;
}

.aio-avo .avo-l li{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:12px;
  align-items:start;
}

/* L'horodatage est une colonne de lecture, pas une décoration : il garde la
   chasse fixe des chiffres pour que les secondes s'alignent. */
.aio-avo .avo-h{
  font-family:'AzeretMono',ui-monospace,monospace;
  font-size:11.5px;
  line-height:1.7;
  color:var(--texte-3);
  font-variant-numeric:tabular-nums;
}

.aio-avo .avo-l p{
  margin:0;
  font-size:14.5px;
  line-height:1.62;
  text-wrap:pretty;
}

/* Deux voix, deux traitements. L'agent parle dans le vert de la marque,
   l'interlocuteur dans le gris du texte courant : on suit la conversation
   sans avoir besoin d'étiquettes « agent » et « client » à chaque ligne. */
.aio-avo .avo-ag p{
  color:var(--texte);
  border-inline-start:2px solid var(--vert);
  padding-inline-start:12px;
}

.aio-avo .avo-in p{
  color:var(--texte-2);
  border-inline-start:2px solid var(--filet-fort);
  padding-inline-start:12px;
}

.aio-avo .avo-fin{
  margin:18px 0 0;
  padding-block-start:16px;
  border-block-start:1px solid var(--filet);
  font-size:13.5px;
  line-height:1.6;
  color:var(--texte-2);
}

.aio-avo .avo-fin strong{color:var(--texte);font-weight:600}

/* ── Les quatre briques ──────────────────────────────────────────────────── */

.aio-avo .avo-chaine{
  list-style:none;
  margin:clamp(28px,3.5vw,40px) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,2.6vw,28px);
}

.aio-avo .avo-chaine li{
  display:grid;
  gap:12px;
  align-content:start;
}

.aio-avo .avo-n{
  display:flex;
  align-items:center;
  justify-content:center;
  inline-size:30px;
  block-size:30px;
  border:1px solid var(--filet-fort);
  border-radius:50%;
  font-family:'AzeretMono',ui-monospace,monospace;
  font-size:13px;
  color:var(--vert);
}

.aio-avo .avo-chaine h3{
  margin-block-end:6px;
  font-size:16px;
}

.aio-avo .avo-chaine p{
  margin:0;
  font-size:14.5px;
  line-height:1.62;
  color:var(--texte-2);
}

/* ── Hors périmètre ──────────────────────────────────────────────────────── */

.aio-avo .avo-hors{
  margin-block-start:clamp(28px,3.5vw,40px);
  padding:clamp(22px,2.6vw,28px);
  background:var(--nuit);
  border:1px solid var(--filet);
  border-inline-start:2px solid var(--filet-fort);
  border-radius:var(--r);
}

.aio-avo .avo-hors h3{margin-block-end:14px}

/* ── Conformité ──────────────────────────────────────────────────────────── */

.aio-avo .avo-h3{
  margin-block-start:clamp(32px,4vw,44px);
  margin-block-end:18px;
  font-size:17px;
}

.aio-avo .avo-rgpd .liste-c li{
  grid-template-columns:132px minmax(0,1fr);
  align-items:start;
}

.aio-avo .avo-rgpd .liste-c li>span:last-child{
  font-size:14.5px;
  line-height:1.6;
  color:var(--texte-2);
}

/* ── Avant / après la loi ────────────────────────────────────────────────── */

.aio-avo #apres-demarchage .deux-col{
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
}

.aio-avo .avo-avant{border-inline-start:2px solid var(--filet-fort)}
.aio-avo .avo-apres{border-inline-start:2px solid var(--vert)}

.aio-avo #apres-demarchage>.wrap>p:last-child{
  margin-block-start:clamp(24px,3vw,32px);
  max-width:74ch;
}

/* ── Coûts et paliers ────────────────────────────────────────────────────── */

.aio-avo .avo-cout .reg tr:last-child td{
  color:var(--texte);
  font-weight:600;
}

.aio-avo .avo-paliers{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.2vw,24px);
  align-items:stretch;
}

.aio-avo .avo-p{
  display:flex;
  flex-direction:column;
  background:var(--nuit);
  border:1px solid var(--filet);
  border-radius:var(--r);
  padding:clamp(22px,2.6vw,28px);
}

/* Le palier du milieu est celui que la plupart des clients prennent : il porte
   le filet vert, sans badge « populaire » que personne ne croit. */
.aio-avo .avo-p-mid{border-color:rgba(52,211,153,.34)}

.aio-avo .avo-p-n{
  margin:0;
  font-family:'AzeretMono',ui-monospace,monospace;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--texte-3);
}

.aio-avo .avo-p-x{
  margin:10px 0 0;
  font-size:30px;
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--texte);
}

.aio-avo .avo-p-d{
  margin:10px 0 18px;
  padding-block-end:18px;
  border-block-end:1px solid var(--filet);
  font-size:14px;
  line-height:1.6;
  color:var(--texte-2);
}

.aio-avo .avo-p .liste{margin-block-end:0}

/* ── Comparatif ──────────────────────────────────────────────────────────── */

.aio-avo .avo-cmp{margin-block-start:clamp(24px,3vw,32px)}

/* ── Mention de fraîcheur ────────────────────────────────────────────────── */

.aio-avo .avo-maj{
  margin-block-start:clamp(28px,3.5vw,36px);
  font-family:'AzeretMono',ui-monospace,monospace;
  font-size:11.5px;
  letter-spacing:.03em;
  color:var(--texte-3);
  text-align:center;
}

/* ── Adaptations ─────────────────────────────────────────────────────────── */

@media (max-width:1100px){
  .aio-avo .avo-chaine{grid-template-columns:repeat(2,minmax(0,1fr));}
  .aio-avo .avo-paliers{grid-template-columns:1fr;}
}

@media (max-width:960px){
  .aio-avo #apres-demarchage .deux-col{grid-template-columns:1fr;}
}

@media (max-width:640px){
  .aio-avo .avo-chaine{grid-template-columns:1fr;}
  .aio-avo .avo-l li{grid-template-columns:36px minmax(0,1fr);gap:10px;}
  .aio-avo .avo-appel-tete{flex-direction:column;gap:6px;}
  .aio-avo .avo-rgpd .liste-c li{grid-template-columns:1fr;gap:4px;}
}