/* ==================================================================
   NotaQo Boutique — styles des pages ajoutées (tarifs, espace client).

   Le CSS du builder est filtré page par page : on ne peut compter sur
   aucune de ses classes ici. Tout est préfixé .nq- pour ne rien percuter.
   ================================================================== */

:root{
  --nq-accent:#85255b;
  --nq-accent-fonce:#4d0b30;
  --nq-navy:#1c1c38;
  --nq-texte:#353535;
  --nq-gris:#6b6b74;
  --nq-bord:#e4e4ea;
  --nq-fond:#faf9fb;
  --nq-erreur:#b3261e;
  --nq-alerte:#b45309;
  --nq-succes:#16704a;
}

.nq{font-family:'Montserrat',sans-serif;color:var(--nq-texte);
  background:var(--nq-fond);padding:64px 16px 80px}
.nq-wrap{max-width:1224px;margin:0 auto}
.nq-wrap--etroit{max-width:560px}
.nq-wrap--moyen{max-width:860px}

.nq-entete{text-align:center;max-width:720px;margin:0 auto 48px}
.nq-entete h1{font-size:40px;line-height:1.2;font-weight:700;color:var(--nq-navy);margin:0 0 16px}
.nq-entete p{font-size:17px;line-height:1.6;color:var(--nq-gris);margin:0}

/* ---------------- Tarifs ---------------- */
.nq-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.nq-carte{display:flex;flex-direction:column;background:#fff;border:1px solid var(--nq-bord);
  border-radius:16px;padding:32px 28px;position:relative}
.nq-carte--phare{border:2px solid var(--nq-accent);box-shadow:0 12px 32px rgba(133,37,91,.12)}
.nq-ruban{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--nq-accent);color:#fff;font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:5px 14px;border-radius:999px;white-space:nowrap}

.nq-nom{font-size:22px;font-weight:700;color:var(--nq-navy);margin:0 0 6px}
.nq-pitch{font-size:14px;line-height:1.5;color:var(--nq-gris);margin:0 0 24px;min-height:42px}
.nq-prix{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.nq-montant{font-size:44px;font-weight:700;color:var(--nq-accent-fonce);line-height:1}
.nq-unite{font-size:15px;font-weight:600;color:var(--nq-gris)}
.nq-ttc{font-size:13px;color:var(--nq-gris);margin:8px 0 0}
.nq-sep{border:0;border-top:1px solid var(--nq-bord);margin:24px 0}

.nq-liste{list-style:none;margin:0 0 28px;padding:0;flex:1}
.nq-liste li{position:relative;padding:0 0 0 26px;margin-bottom:11px;font-size:14.5px;line-height:1.5}
.nq-liste li::before{content:"";position:absolute;left:0;top:6px;width:14px;height:8px;
  border-left:2px solid var(--nq-accent);border-bottom:2px solid var(--nq-accent);
  transform:rotate(-45deg)}
.nq-liste .nq-heritage{font-weight:600;color:var(--nq-navy)}
/* Lignes à compléter avec le contenu réel des forfaits. */
.nq-liste .nq-adefinir{color:var(--nq-alerte)}
.nq-liste .nq-adefinir::before{border-color:var(--nq-alerte)}

.nq-mentions{max-width:900px;margin:48px auto 0;font-size:13px;line-height:1.7;color:var(--nq-gris)}
.nq-mentions p{margin:0 0 10px}
.nq-mentions strong{color:var(--nq-texte)}

/* ---------------- Boutons ---------------- */
.nq-cta,.nq-btn{display:inline-block;text-align:center;text-decoration:none;font-weight:700;
  font-size:15px;padding:14px 22px;border-radius:10px;border:2px solid var(--nq-accent);
  background:#fff;color:var(--nq-accent);cursor:pointer;font-family:inherit;
  transition:background .15s,color .15s}
.nq-cta{display:block}
.nq-cta:hover,.nq-btn:hover{background:var(--nq-accent);color:#fff}
.nq-btn--plein{background:var(--nq-accent);color:#fff}
.nq-btn--plein:hover{background:var(--nq-accent-fonce);border-color:var(--nq-accent-fonce)}
.nq-btn--large{width:100%}
.nq-btn--discret{border-color:var(--nq-bord);color:var(--nq-gris)}
.nq-btn--discret:hover{background:var(--nq-bord);color:var(--nq-texte)}
.nq-btn--danger{border-color:var(--nq-erreur);color:var(--nq-erreur)}
.nq-btn--danger:hover{background:var(--nq-erreur);color:#fff}
.nq-carte--phare .nq-cta{background:var(--nq-accent);color:#fff}
.nq-carte--phare .nq-cta:hover{background:var(--nq-accent-fonce);border-color:var(--nq-accent-fonce)}
.nq-btn[disabled]{opacity:.45;cursor:not-allowed}
.nq-btn[disabled]:hover{background:#fff;color:var(--nq-accent)}

/* ---------------- Formulaires ---------------- */
.nq-panneau{background:#fff;border:1px solid var(--nq-bord);border-radius:16px;padding:32px 28px}
.nq-panneau h1{font-size:26px;font-weight:700;color:var(--nq-navy);margin:0 0 8px}
.nq-panneau h2{font-size:17px;font-weight:700;color:var(--nq-navy);margin:28px 0 14px}
.nq-panneau h2:first-of-type{margin-top:18px}
.nq-intro{font-size:14.5px;line-height:1.6;color:var(--nq-gris);margin:0 0 8px}

.nq-champ{margin-bottom:16px}
.nq-champ label{display:block;font-size:13.5px;font-weight:600;color:var(--nq-navy);margin-bottom:6px}
.nq-champ input,.nq-champ select,.nq-champ textarea{width:100%;box-sizing:border-box;
  font-family:inherit;font-size:15px;color:var(--nq-texte);background:#fff;
  border:1px solid var(--nq-bord);border-radius:9px;padding:11px 13px}
.nq-champ textarea{resize:vertical;line-height:1.55}
.nq-champ input:focus,.nq-champ select:focus,.nq-champ textarea:focus{outline:none;
  border-color:var(--nq-accent);box-shadow:0 0 0 3px rgba(133,37,91,.12)}
/* Leurre anti-robot : hors écran plutôt que display:none, que certains
   robots détectent pour ignorer le champ. */
.nq-leurre{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.nq-champ .nq-aide{display:block;font-size:12.5px;color:var(--nq-gris);margin-top:5px;line-height:1.5}
.nq-champ--erreur input,.nq-champ--erreur select{border-color:var(--nq-erreur)}
.nq-champ--erreur .nq-aide{color:var(--nq-erreur)}
.nq-requis{color:var(--nq-accent)}

.nq-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.nq-duo .nq-champ{margin-bottom:0}
.nq-duo+.nq-champ,.nq-duo+.nq-duo{margin-top:16px}
.nq-aide--duo{display:block;font-size:12.5px;color:var(--nq-gris);
  line-height:1.5;margin:-8px 0 16px}

.nq-cases{margin:20px 0}
.nq-case{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.55;margin-bottom:10px}
.nq-case input{margin-top:2px;flex:none;width:16px;height:16px;accent-color:var(--nq-accent)}

/* ---------------- Messages ---------------- */
.nq-msg{border-radius:10px;padding:13px 16px;font-size:14px;line-height:1.55;margin-bottom:20px;
  border:1px solid}
.nq-msg--erreur{background:#fdf0ef;border-color:#f1c7c3;color:var(--nq-erreur)}
.nq-msg--succes{background:#eef7f2;border-color:#bfe0ce;color:var(--nq-succes)}
.nq-msg--info{background:#f4f2f8;border-color:#ded8e6;color:var(--nq-navy)}
.nq-msg--alerte{background:#fdf6ec;border-color:#f0dcbc;color:var(--nq-alerte)}
.nq-msg ul{margin:8px 0 0;padding-left:20px}

.nq-liens{margin-top:22px;font-size:13.5px;text-align:center;line-height:1.9}
.nq-liens a{color:var(--nq-accent);text-decoration:none;font-weight:600}
.nq-liens a:hover{text-decoration:underline}

/* ---------------- Espace client ---------------- */
.nq-compte-tete{display:flex;justify-content:space-between;align-items:flex-start;
  gap:20px;margin-bottom:28px;flex-wrap:wrap}
.nq-compte-tete h1{font-size:30px;font-weight:700;color:var(--nq-navy);margin:0 0 4px}
.nq-compte-tete p{margin:0;font-size:14px;color:var(--nq-gris)}

.nq-cartes-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px;margin-bottom:28px}
.nq-info{background:#fff;border:1px solid var(--nq-bord);border-radius:14px;padding:20px 22px}
.nq-info h3{margin:0 0 10px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--nq-gris);font-weight:700}
.nq-info p{margin:0;font-size:15px;line-height:1.6}
.nq-info .nq-gros{font-size:22px;font-weight:700;color:var(--nq-navy)}

.nq-tableau{width:100%;border-collapse:collapse;background:#fff;font-size:14px}
.nq-tableau th,.nq-tableau td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--nq-bord)}
.nq-tableau th{font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--nq-gris);font-weight:700;background:#fbfafc}
.nq-tableau tr:last-child td{border-bottom:0}
.nq-scroll-x{overflow-x:auto;border:1px solid var(--nq-bord);border-radius:14px}

.nq-etat{display:inline-block;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px}
.nq-etat--ok{background:#eef7f2;color:var(--nq-succes)}
.nq-etat--attente{background:#fdf6ec;color:var(--nq-alerte)}
.nq-etat--ko{background:#fdf0ef;color:var(--nq-erreur)}
.nq-etat--neutre{background:#f1f0f4;color:var(--nq-gris)}

.nq-vide{text-align:center;padding:40px 20px;color:var(--nq-gris);font-size:14.5px}

/* ---------------- Responsive ---------------- */
@media (max-width:1024px){
  .nq-grille{grid-template-columns:1fr;max-width:520px;margin:0 auto;gap:32px}
  .nq-entete h1{font-size:32px}
  .nq-pitch{min-height:0}
}
@media (max-width:600px){
  .nq{padding:40px 16px 56px}
  .nq-entete h1{font-size:26px}
  .nq-montant{font-size:36px}
  .nq-duo{grid-template-columns:1fr;gap:0}
  .nq-duo .nq-champ{margin-bottom:16px}
  .nq-panneau{padding:24px 20px}
}


/* ==================================================================
   Formulaire de paiement Krypton (Lyra / PayZen)

   Le thème neon est repris tel quel pour la mécanique des champs ; on
   ne redéfinit que ce qui touche à la charte. Les règles restent
   cosmétiques : couleurs, rayons, espacements. Toucher au placement
   des champs casserait le comportement du formulaire, qui gère seul
   la saisie de carte dans une iframe sécurisée.
   ================================================================== */

.nq-paiement{margin-top:8px}
.nq-paiement .kr-embedded{width:100%;max-width:none}

/* Champs */
.nq-paiement .kr-field,
.nq-paiement .kr-payment-method{margin-bottom:12px}
.nq-paiement .kr-input-field{border-radius:9px !important;border-color:var(--nq-bord) !important}
.nq-paiement .kr-input-field.kr-focus{border-color:var(--nq-accent) !important;
  box-shadow:0 0 0 3px rgba(133,37,91,.12) !important}
.nq-paiement .kr-input-field.kr-invalid{border-color:var(--nq-erreur) !important}

/* Bouton de paiement : couleur de la marque, pas le bleu du thème */
.nq-paiement .kr-payment-button{background-color:var(--nq-accent) !important;
  border-radius:10px !important;font-family:inherit !important;font-weight:700 !important;
  font-size:16px !important;height:52px !important;margin-top:6px !important;
  transition:background-color .15s}
.nq-paiement .kr-payment-button:hover{background-color:var(--nq-accent-fonce) !important}

/* Message d erreur : meme traitement que les autres messages du site */
.nq-paiement .kr-form-error{background:#fdf0ef !important;border:1px solid #f1c7c3 !important;
  border-radius:10px !important;color:var(--nq-erreur) !important;
  padding:11px 14px !important;font-size:13.5px !important;margin:4px 0 12px !important}
.nq-paiement .kr-form-error span{color:var(--nq-erreur) !important}

/* Rappel du montant, au-dessus du formulaire */
.nq-recap{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  background:#fff;border:1px solid var(--nq-bord);border-radius:12px;
  padding:16px 18px;margin:0 0 18px}
.nq-recap .nq-recap-libelle{font-size:13.5px;color:var(--nq-gris)}
.nq-recap .nq-recap-montant{font-size:22px;font-weight:700;color:var(--nq-accent-fonce);
  white-space:nowrap}
.nq-securite{display:flex;align-items:center;gap:8px;margin-top:16px;
  font-size:12.5px;color:var(--nq-gris);line-height:1.5}
.nq-securite svg{flex:none}


/* ==================================================================
   Pied de page collé au bas de la fenêtre

   Le gabarit du builder ne prévoit pas de page courte : ses pages
   d'origine sont toutes plus hautes que l'écran. Sur une page de
   connexion, le pied de page s'arrêtait au milieu, laissant du blanc
   en dessous. Le conteneur principal est déjà en flex-column, il ne
   manquait qu'une hauteur minimale et un élément qui s'étire.

   Ces règles ne s'appliquent qu'aux pages qui chargent cette feuille :
   les 26 pages d'origine gardent leur CSS intégré.
   ================================================================== */
.preview__content{min-height:100vh}
.nq-corps{display:flex;flex-direction:column;flex:1 0 auto}
.nq-corps > .nq{flex:1 0 auto}