/* ═══════════════════════════════════════════════════════════════════════════
   ABONNEMENT « DEVIS EXACT IMMÉDIAT »

   Feuille à part : la fenêtre de souscription s'ouvre depuis l'assistant, et
   pourra s'ouvrir depuis n'importe quelle autre page demain. Ses styles vivaient
   dans la feuille du configurateur — la modale s'affichait donc sans aucune
   mise en forme partout ailleurs, réduite à une suite de paragraphes.
   ═══════════════════════════════════════════════════════════════════════════ */

.abo-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9996;
  display:flex;align-items:center;justify-content:center;padding:16px}
.abo-box{background:#fff;border-radius:18px;max-width:440px;width:100%;
  box-shadow:0 24px 64px rgba(0,0,0,.34);overflow:hidden;font-family:Outfit,sans-serif}
.abo-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:18px 22px 14px;border-bottom:1px solid #eef2ee;
  background:linear-gradient(90deg,rgba(5,167,5,.07),transparent)}
.abo-head strong{font-size:1rem;color:#0d2a10}
.abo-sub{font-size:.74rem;color:#6b7a70;margin-top:3px}
.abo-close{border:none;background:#f0f0f0;border-radius:50%;width:30px;height:30px;
  cursor:pointer;font-size:1.1rem;line-height:1;color:#444;flex-shrink:0}
.abo-body{padding:18px 22px 6px}
.abo-prix{font-size:1.6rem;font-weight:900;color:#037a03;text-align:center;margin-bottom:4px}
.abo-prix b{font-size:2.1rem}
.abo-prix span{font-size:.82rem;font-weight:700;color:#6b7a70}
.abo-liste{list-style:none;padding:0;margin:12px 0 15px;display:flex;flex-direction:column;gap:6px}
.abo-liste li{font-size:.8rem;line-height:1.55;color:#3a463d;padding-left:22px;position:relative}
.abo-liste li::before{content:"";position:absolute;left:4px;top:.45em;width:8px;height:8px;
  border-radius:50%;background:rgba(5,167,5,.9)}
.abo-champ label{display:block;font-size:.74rem;font-weight:700;color:#3a463d;margin-bottom:6px}
.abo-champ input{width:100%;border:1.5px solid #dde8de;border-radius:11px;padding:11px 13px;
  font:700 .95rem Outfit,sans-serif;color:#1d2421;outline:none;letter-spacing:.5px}
.abo-champ input:focus{border-color:#05a705}
/* ── Choix de l'opérateur ──
   Deux cartes plutôt que deux étiquettes inertes : la marque se reconnaît d'un
   coup d'œil, et celle qui correspond au numéro tapé s'allume toute seule. Le
   client n'a rien à choisir — on lui montre ce qu'on a compris. */
.abo-lbl{font-size:.74rem;font-weight:700;color:#3a463d;margin:2px 0 7px}
.abo-ops{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:15px}
.abo-op{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:12px;
  border:1.5px solid #e6ece6;background:#fff;transition:border-color .18s,opacity .18s,box-shadow .18s}
.abo-op-m{width:30px;height:30px;flex:0 0 30px;border-radius:5px;display:block}
.abo-op-n{font-size:.76rem;font-weight:700;color:#3a463d;line-height:1.2}
.abo-op{cursor:pointer;user-select:none}
.abo-op:hover{border-color:#b9ccbc}
.abo-op:focus-visible{outline:2px solid #05a705;outline-offset:2px}
.abo-op.actif{border-color:#05a705;box-shadow:0 0 0 3px rgba(5,167,5,.13)}
/* Estompée, mais jamais éteinte : elle reste cliquable pour corriger. */
.abo-op.pale{opacity:.5}
.abo-op.pale:hover{opacity:.85}

/* Le numéro : l'indicatif est fixe, le client ne tape que ses neuf chiffres. */
.abo-tel{display:flex;align-items:stretch;border:1.5px solid #dde8de;border-radius:11px;
  overflow:hidden;background:#fff}
.abo-tel:focus-within{border-color:#05a705}
.abo-ind{display:flex;align-items:center;padding:0 11px;background:#f4f6f4;
  border-right:1.5px solid #dde8de;font:700 .86rem Outfit,sans-serif;color:#6b7a70}
.abo-tel input{border:none!important;border-radius:0!important;flex:1;min-width:0}
.abo-tel input:focus{border-color:transparent}
.abo-aide{min-height:15px;margin-top:6px;font-size:.71rem;font-weight:600;color:#6b7a70}
.abo-aide-ok{color:#037a03}
.abo-aide-ko{color:#b91c1c}
.abo-primaire[disabled]{opacity:.45;cursor:not-allowed;filter:none}
.abo-note{background:rgba(5,167,5,.06);border-left:3px solid #05a705;padding:8px 12px;
  border-radius:0 8px 8px 0;font-size:.72rem;line-height:1.55;color:#3a463d;margin:13px 0 2px}
/* Fenêtre haute sur petit écran : elle défile en elle-même plutôt que de
   déborder, et le pied reste accessible. */
.abo-box{max-height:92vh;display:flex;flex-direction:column}
.abo-body{overflow-y:auto}
.abo-foot{display:flex;gap:9px;justify-content:flex-end;padding:13px 22px 18px;
  border-top:1px solid #eef2ee}
.abo-btn{border:1.5px solid #dde8de;background:#fff;border-radius:10px;padding:10px 15px;
  font:700 .82rem Outfit,sans-serif;color:#1d2421;cursor:pointer}
.abo-btn:hover{border-color:#b9ccbc}
.abo-primaire{background:linear-gradient(135deg,#05a705,#30d158);border-color:transparent;color:#fff}
.abo-primaire:hover{filter:brightness(1.06)}
.abo-primaire[disabled]{opacity:.6;cursor:progress}
/* Attente du paiement : le client compose son code, l'écran patiente avec lui. */
.abo-attente{text-align:center;padding:14px 0 6px}
.abo-attente-t{font-size:.92rem;font-weight:800;color:#1d2421;margin-top:12px}
.abo-attente-d{font-size:.78rem;line-height:1.6;color:#6b7a70;margin-top:6px}
.abo-spin{display:inline-block;width:30px;height:30px;border-radius:50%;
  border:3px solid rgba(5,167,5,.18);border-top-color:#05a705;animation:aboTourne .9s linear infinite}
@keyframes aboTourne{to{transform:rotate(360deg)}}
.abo-echec{text-align:center;padding:12px 0 4px}
.abo-echec-t{font-size:.95rem;font-weight:800;color:#b91c1c}
.abo-echec-d{font-size:.79rem;line-height:1.6;color:#6b7a70;margin-top:6px}
@media(prefers-reduced-motion:reduce){.abo-spin{animation-duration:2.4s}}

/* ── Le code d'accès remis après paiement ──
   Il doit se lire d'un coup d'œil et se recopier sans erreur : gros, espacé,
   en chasse fixe. C'est la seule chose que le client emporte. */
.abo-code{
  margin:14px 0 4px; padding:16px 12px; border-radius:12px; text-align:center;
  background:linear-gradient(135deg,rgba(255,176,32,.14),rgba(255,176,32,.05));
  border:1px dashed rgba(255,176,32,.55);
}
.abo-code-e{ display:block; font-size:.78rem; letter-spacing:.06em;
  text-transform:uppercase; opacity:.75; margin-bottom:6px; }
.abo-code-v{
  display:block; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:1.9rem; font-weight:800; letter-spacing:.16em; line-height:1.2;
  word-break:break-all;
}
.abo-copier{
  margin-top:10px; padding:6px 16px; border-radius:999px; cursor:pointer;
  font:inherit; font-size:.82rem; border:1px solid rgba(255,176,32,.6);
  background:transparent; color:inherit;
}
.abo-copier:hover{ background:rgba(255,176,32,.16); }

/* Le lien discret vers la reprise par code : présent sans encombrer l'offre. */
.abo-lien{
  display:block; margin:12px auto 0; padding:6px 4px; border:0; background:none;
  font:inherit; font-size:.85rem; cursor:pointer; color:inherit; opacity:.72;
  text-decoration:underline; text-underline-offset:3px;
}
.abo-lien:hover{ opacity:1; }

/* Message d'erreur de la reprise. */
.abo-err{ color:#e2574c; }

@media (max-width:420px){
  .abo-code-v{ font-size:1.5rem; letter-spacing:.12em; }
}

/* ── L'autre entrée : identifiant et mot de passe ── */
.abo-sep{
  display:flex; align-items:center; gap:10px; margin:16px 0 10px;
  font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; opacity:.6;
}
.abo-sep::before,.abo-sep::after{
  content:""; flex:1; height:1px; background:currentColor; opacity:.25;
}
.abo-ident{ display:grid; gap:8px; }
.abo-ident-l{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:6px 10px;
  padding:10px 12px; border-radius:10px; background:rgba(127,127,127,.10);
}
.abo-ident-l span{
  grid-column:1/-1; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.06em; opacity:.65;
}
.abo-ident-l b{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.95rem; font-weight:700; word-break:break-all; letter-spacing:.02em;
}
.abo-copier-s{ margin-top:0; padding:4px 12px; font-size:.75rem; white-space:nowrap; }