/* Allie — Appel animé
   Carte d'appel : en-tête, ruban de voix, conversation bulle par bulle, puces.

   Polices auto-hébergées sous des noms propres au plugin : un thème qui charge
   déjà « Sen » ne peut pas remplacer celles-ci, et aucun visiteur n'est envoyé
   chez Google Fonts. */

@font-face {
  font-family: 'Allie Megan';
  src: url('../fonts/allie-megan.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Allie Sen';
  src: url('../fonts/sen-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Allie Sen';
  src: url('../fonts/sen-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Allie Sen';
  src: url('../fonts/sen-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* La carte suit la largeur de sa COLONNE Elementor, pas celle de l'écran :
   la même carte peut vivre dans une section pleine largeur sur mobile et dans
   une colonne étroite sur ordinateur. */
.aa-cadre {
  container-type: inline-size;
  width: 100%;
}

.allie-appel {
  /* Jetons, repris de la charte Allie. */
  --aa-fond: #0F3A40;
  --aa-bord: rgba(255, 255, 255, .12);
  --aa-bulle: rgba(255, 255, 255, .07);
  --aa-texte: #F4F1EA;
  --aa-muet: #9FB3B5;
  --aa-allie: #0A7A8F;
  --aa-ecru: #FFF4E3;
  --aa-orange: #C96A00;          /* formes seulement (point du monogramme) */
  --aa-orange-vif: #E0852A;      /* point d'état, lisible sur le fond sombre */
  --aa-orange-texte: #F0A36B;    /* étiquette ALLIE : 4,7:1 sur la bulle */
  --aa-ok: #41B95A;
  /* Ruban : la palette de marque, éclaircie pour le fond sombre. Avec le teal
     d'origine, les deux bouts du ruban disparaissaient dans le fond. */
  --aa-ruban-0: #2BA3B8;
  --aa-ruban-1: #E0852A;
  --aa-ruban-2: #7FD3E2;
  --aa-ruban-3: #2BA3B8;
  --aa-ease: cubic-bezier(.22, 1, .36, 1);

  box-sizing: border-box;
  position: relative;
  display: block;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 18px;
  border: 1px solid var(--aa-bord);
  border-radius: 18px;
  background: var(--aa-fond);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
  color: var(--aa-texte);
  font-family: 'Allie Sen', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-size: clamp(13.5px, 12px + .7cqi, 15.5px);
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  /* Le tableau « liga » de Sen abîme certains mots (« instantanément »). */
  font-variant-ligatures: no-common-ligatures;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
.allie-appel *,
.allie-appel *::before,
.allie-appel *::after {
  box-sizing: border-box;
}
.allie-appel:focus {
  outline: none;
}
.allie-appel:focus-visible {
  outline: 2px solid var(--aa-ruban-2);
  outline-offset: 3px;
}

/* Les thèmes stylent souvent p, ul et li : on repart de zéro dans la carte. */
.allie-appel p,
.allie-appel ul,
.allie-appel li {
  margin: 0;
  padding: 0;
  list-style: none;
  font: inherit;
  color: inherit;
  letter-spacing: normal;
}
.allie-appel li::before,
.allie-appel li::marker {
  content: none;
}

/* ── En-tête ─────────────────────────────────────────── */
.aa-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2px 12px;
  margin-bottom: 14px;
}
.aa-etat {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .93em;
  font-weight: 700;
}
.aa-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--aa-orange-vif);
  transition: background-color .32s var(--aa-ease);
}
.allie-appel[data-etat="sonne"] .aa-dot {
  animation: aa-sonne 1.1s ease-in-out infinite;
}
.allie-appel[data-etat="fini"] .aa-dot {
  background: var(--aa-ok);
}
.aa-ou {
  color: var(--aa-muet);
  font-size: .87em;
  white-space: nowrap;
}

@keyframes aa-sonne {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 133, 42, .55); }
  50%      { box-shadow: 0 0 0 6px rgba(224, 133, 42, 0); }
}

/* ── Voix : monogramme + ruban + geste ──────────────── */
.aa-voix {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.aa-mono {
  flex: none;
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--aa-allie);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 4px 14px rgba(0, 0, 0, .28);
  line-height: 0;
}
.aa-mono svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* Megan : graisse unique, jamais en gras ni en italique. */
.aa-mono-a {
  font-family: 'Allie Megan', Georgia, serif;
  font-size: 58px;
  font-weight: 400;
  font-style: normal;
  fill: var(--aa-ecru);
}
.aa-mono-dot {
  fill: var(--aa-orange);
}
.aa-voix-txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.aa-ruban {
  display: block;
  width: 100%;
  height: 30px;
}
.aa-geste {
  display: block;
  min-height: 1.5em;
  overflow: hidden;
  color: var(--aa-ecru);
  font-size: .66em;
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1.5;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.aa-geste.aa-change {
  animation: aa-geste .35s var(--aa-ease);
}
@keyframes aa-geste {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}

/* ── Scènes ─────────────────────────────────────────── */
/* Toutes les scènes occupent la même cellule : la carte garde la hauteur de la
   plus longue, rien ne saute sous la carte pendant la rotation. */
.aa-scenes {
  display: grid;
}
.aa-scene {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.aa-scene:not(.aa-active) {
  visibility: hidden;
}
.aa-lignes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.aa-ligne {
  min-width: 0;
}
.aa-qui {
  display: block;
  margin-bottom: 3px;
  color: var(--aa-muet);
  font-size: .68em;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.5;
  text-transform: uppercase;
}
.allie-appel .aa-texte {
  color: var(--aa-texte);
  font-size: 1em;
  line-height: 1.5;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
.aa-allie {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--aa-bulle);
}
.aa-allie .aa-qui {
  color: var(--aa-orange-texte);
}

/* ── Puces de résultat ──────────────────────────────── */
.allie-appel .aa-puces {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 2px;
}
.allie-appel .aa-puce {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 11px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  font-size: .78em;
  font-weight: 700;
  line-height: 1.3;
}
.aa-coche {
  flex: none;
  width: 12px;
  height: 12px;
}

/* ── Animation (le script ajoute .aa-js) ────────────── */
/* Une bulle qui n'a pas encore été dite est invisible mais garde sa place :
   la conversation remplit la carte vers le bas sans faire bouger la page. */
.aa-js .aa-scene {
  transition: opacity .45s var(--aa-ease);
}
.aa-js .aa-scene.aa-sort {
  opacity: 0;
}
.aa-js .aa-ligne {
  opacity: 0;
  transform: translateY(10px) scale(.98);
  transform-origin: 0 0;
  transition: opacity .45s var(--aa-ease), transform .5s var(--aa-ease);
}
.aa-js .aa-ligne.aa-on {
  opacity: 1;
  transform: none;
}
/* Les mots arrivent au rythme de la parole (délai --d posé par le script). */
.aa-js .aa-texte .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(.22em);
  transition: opacity .32s var(--aa-ease), transform .42s var(--aa-ease);
  transition-delay: var(--d, 0ms);
}
.aa-js .aa-ligne.aa-on .w {
  opacity: 1;
  transform: none;
}
.aa-js .aa-puce {
  opacity: 0;
  transform: translateY(6px) scale(.96);
  transition: opacity .4s var(--aa-ease), transform .45s var(--aa-ease), border-color .4s var(--aa-ease);
}
.aa-js .aa-puce.aa-on {
  opacity: 1;
  transform: none;
}
/* Remise à zéro d'une scène : sans transition, sinon les mots repartiraient
   un par un pendant que la scène suivante commence. */
.aa-js .aa-sans-transition,
.aa-js .aa-sans-transition * {
  transition: none !important;
}
/* En pause (survol, focus, toucher) : le point d'état arrête de clignoter. */
.allie-appel.aa-pause .aa-dot {
  animation-play-state: paused;
}

/* ── Colonnes de 420 px et plus : la carte de référence ─ */
@container (min-width: 420px) {
  .allie-appel {
    padding: 26px 28px 28px;
    border-radius: 22px;
  }
  .aa-tete {
    margin-bottom: 18px;
  }
  .aa-voix {
    gap: 14px;
    margin-bottom: 20px;
  }
  .aa-mono {
    width: 52px;
    height: 52px;
  }
  .aa-ruban {
    height: 40px;
  }
  .aa-scene {
    gap: 16px;
  }
  .aa-lignes {
    gap: 14px;
  }
  .aa-allie {
    padding: 14px 16px;
    border-radius: 14px;
  }
  .allie-appel .aa-puce {
    padding: 6px 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .allie-appel,
  .allie-appel * {
    animation: none !important;
    transition: none !important;
  }
}