/* ==========================================================================
   Page de vente de l'accompagnement IA (/accompagnement-ia), après menu-qr.css :
   l'avis et la réponse préparée du haut de page, les trois formules, les étapes.
   ========================================================================== */

/* Haut de page : un avis Google et la réponse proposée, en cartes superposées */
.ia-scene { position: relative; display: grid; gap: 14px; max-width: 440px; margin: 0 auto; }
.ia-carte { padding: 18px 20px; border-radius: 20px; background: #fff; box-shadow: 0 20px 50px rgba(29, 29, 31, 0.12), 0 0 0 1px rgba(29, 29, 31, 0.05); }
#mq .ia-carte p { margin: 0; font-size: 0.97rem; line-height: 1.5; }
.ia-carte__tete { display: flex; align-items: center; gap: 10px; margin-bottom: 8px !important; }
.ia-carte__tete b { display: block; font-size: 0.95rem; }
.ia-carte__tete small { display: block; color: var(--doux); font-size: 0.8rem; }
.ia-avatar, .ia-etincelle { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-weight: 700; }
.ia-avatar { background: #e8eefa; color: #2457a6; }
.ia-etincelle { background: linear-gradient(135deg, #1d1d1f, #3a3a3c); color: #fff; }
#mq .ia-etoiles { margin-bottom: 6px; color: #f5a623; letter-spacing: 2px; font-size: 1.05rem; }
.ia-etoiles span { color: #d9d5cf; }
.ia-carte--avis { transform: rotate(-1.2deg); }
.ia-carte--reponse { position: relative; margin-left: 28px; border-left: 3px solid var(--accent); transform: rotate(0.6deg); }
#mq .ia-bulle { position: absolute; right: 16px; top: -14px; margin: 0; padding: 8px 14px; border-radius: 999px; background: var(--vert); color: #fff; font-size: 0.85rem; font-weight: 600;
  box-shadow: 0 10px 24px rgba(31, 122, 69, 0.3); }
.ia-scene .mq-legende { margin-top: 6px; }
/* La réponse arrive sans rebond (rien ne l'a lancée, elle ne doit pas dépasser sa place),
   en sortant de l'avis auquel elle répond ; la bulle suit une fois la carte posée */
@media (prefers-reduced-motion: no-preference) {
  .ia-carte--reponse { animation: ia-arrive 600ms cubic-bezier(0.22, 1, 0.36, 1) 300ms both; }
  .ia-bulle { animation: ia-bulle 400ms cubic-bezier(0.22, 1, 0.36, 1) 800ms both; }
}
@media (prefers-reduced-motion: reduce) {
  .ia-carte--reponse, .ia-bulle { animation: ia-fondu 300ms ease 200ms both; }
}
@keyframes ia-arrive { from { opacity: 0; transform: translateY(-18px) scale(0.98) rotate(0.6deg); } }
@keyframes ia-bulle { from { opacity: 0; transform: scale(0.9); } }
@keyframes ia-fondu { from { opacity: 0; } }
#mq .ia-bulle { transform-origin: 85% 100%; }
@media (max-width: 575.98px) {
  .ia-carte--reponse { margin-left: 12px; }
}

/* Les trois formules */
.ia-formules { display: grid; gap: 18px; margin-top: 28px; align-items: stretch; }
@media (min-width: 900px) { .ia-formules { grid-template-columns: 1fr 1.12fr 1fr; align-items: center; } }
.ia-formule { position: relative; display: flex; flex-direction: column; padding: 30px 26px; border-radius: 24px; background: var(--fond-alt); }
.ia-formule .mq-coches { flex: 1; margin: 14px 0 22px; }
.ia-formule .mq-btn { align-self: flex-start; }
#mq .ia-formule__prix { margin: 0; font-size: 2.6rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
.ia-formule__prix small { font-size: 1rem; font-weight: 600; color: var(--doux); letter-spacing: 0; }
#mq .ia-formule__duree { margin: 4px 0 0; color: var(--doux); font-size: 0.98rem; }
.ia-formule--phare { padding: 38px 30px; background: #1d1d1f; color: #f5f5f7; box-shadow: 0 24px 60px rgba(29, 29, 31, 0.25); }
.ia-formule--phare .ia-formule__prix small, #mq .ia-formule--phare .ia-formule__duree { color: #a1a1a6; }
.ia-formule--phare .mq-coches li { color: #f5f5f7; }
#mq .ia-formule__badge { position: absolute; top: -13px; left: 30px; margin: 0; padding: 4px 12px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.8rem; font-weight: 700; }

/* Comment ça se passe */
.ia-etapes { counter-reset: etape; display: grid; gap: 12px; max-width: 620px; margin: 24px 0 0; padding: 0; list-style: none; }
.ia-etapes li { counter-increment: etape; position: relative; padding: 22px 22px 22px 70px; border-radius: 20px; background: #fff; font-size: 1.05rem; line-height: 1.55; }
.ia-etapes li::before { content: counter(etape); position: absolute; left: 22px; top: 20px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent); color: #fff; font-weight: 700; }

/* L'illustration de la séance, à côté des étapes */
.ia-illustration { margin: 0; }
.ia-illustration img { display: block; width: 100%; height: auto; }

.ia-qui { align-items: flex-start; }
.ia-btn-choisir { border: 1px solid var(--accent); color: var(--accent) !important; background: #fff; }
.ia-btn-choisir:hover { background: var(--accent); color: #fff !important; }
#mq .ia-mention { margin: 10px 0 0; color: var(--doux); font-size: 0.9rem; }

/* lien vers la formation en ligne, sous les formules (seulement quand elle est ouverte) */
#mq .ia-formation { display: grid; gap: 6px; margin-top: 28px; padding: 22px 26px; border: 1px solid var(--accent); border-radius: 20px; background: #fff; color: inherit; text-decoration: none; }
#mq .ia-formation .mq-sur { margin: 0; }
.ia-formation__titre { font-weight: 700; font-size: 1.15rem; }
#mq .ia-formation__texte { color: var(--doux); }
.ia-formation__lien { color: var(--accent); font-weight: 700; }
#mq .ia-formation:hover .ia-formation__lien { text-decoration: underline; }