/* ============================================================
   PARRAINAGE (12/10/2026) — « toute personne qui ramène un nouveau client
   empoche 100 000 FCFA dès l'ouverture de son dossier » (Alex).

   Feuille à part, chargée par les seules pages qui en ont besoin : la page
   parrainage.html (et sa jumelle), le bandeau de l'accueil, des témoignages,
   des services, et la carte de fin du dossier client (/mon-dossier).
   styles.css n'est pas touchée : changer sa ?v= obligerait à reprendre les
   159 pages, Prépa comprises.

   L'or (--amber-light / --amber-ink) est la couleur de la récompense : il
   distingue ce bandeau du rose du livre (.eval-banner) et du vert du groupe
   WhatsApp (.community). Les deux variables basculent d'elles-mêmes la nuit.
   ============================================================ */

/* ---------- Le bandeau, posé sur les pages existantes ---------- */
.parrain-bandeau {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-4) var(--sp-5);
  max-width: 900px; margin: var(--sp-7) auto 0;
  padding: var(--sp-5) var(--sp-6);
  background: var(--amber-light);
  border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent);
  border-radius: var(--r);
  text-align: left;
}
.parrain-bandeau > div { flex: 1 1 360px; min-width: 0; }
.parrain-titre {
  text-wrap: balance;
  font-family: Sora, sans-serif; font-weight: 700; font-size: var(--fs-lg);
  line-height: 1.3; color: var(--navy-dark); letter-spacing: var(--tracking-title);
  display: flex; gap: var(--sp-3); align-items: flex-start;
}
.parrain-titre .ico-t { color: var(--red-dark); margin: .12em 0 0; width: 1.2em; height: 1.2em; }
.parrain-titre b { color: var(--red-dark); font-weight: 700; white-space: nowrap; }
.parrain-bandeau p:not(.parrain-titre) {
  color: var(--amber-ink); font-size: var(--fs-sm); margin-top: var(--sp-1);
  /* aligné sur le texte du titre, pas sur son icône : le décalage se
     compte dans la taille du TITRE (icône de 1,2 em + écart). */
  padding-left: calc(1.2 * var(--titre-fs, var(--fs-lg)) + var(--sp-3));
}
.parrain-bandeau .btn { flex: none; }

/* Accueil (demande d'Alex : « bien visible ») : posé juste après les services,
   à la largeur des cartes au-dessus, titre d'un cran plus grand. */
.parrain-bandeau-large { max-width: none; margin-top: var(--sp-8); }
@media (min-width: 900px) {
  .parrain-bandeau-large { padding: var(--sp-6) var(--sp-7); gap: var(--sp-5) var(--sp-7); }
  .parrain-bandeau-large { --titre-fs: var(--fs-xl); }
  .parrain-bandeau-large .parrain-titre { font-size: var(--fs-xl); }
  .parrain-bandeau-large p:not(.parrain-titre) { font-size: var(--fs-md); }
  .parrain-bandeau-large .btn { padding: 12px 24px; font-size: var(--fs-base); }
}

/* Dans la carte verte de fin du dossier client (/mon-dossier) : pas de
   seconde carte dans la première, un simple filet et deux lignes. */
.parrain-merci {
  margin-top: var(--sp-5); padding-top: var(--sp-5);
  border-top: 1px solid color-mix(in srgb, var(--teal) 30%, transparent);
}
.parrain-merci .parrain-titre { justify-content: center; font-size: var(--fs-md); }
.parrain-merci p:not(.parrain-titre) { margin-top: var(--sp-2); font-size: var(--fs-sm); }
.parrain-merci p a { color: var(--teal-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 600px) {
  .parrain-bandeau { padding: var(--sp-4); }
  .parrain-bandeau p:not(.parrain-titre) { padding-left: 0; }
  .parrain-bandeau .btn { width: 100%; }
}

/* ---------- La page parrainage.html ---------- */
.parrain-chapeau {
  margin-top: var(--sp-3); max-width: 60ch;
  color: var(--muted); font-size: var(--fs-md);
}
.parrain-chapeau b { color: var(--navy-dark); }

/* Le message prêt : ce que la personne recevra, montré tel quel, dans une
   bulle de messagerie. Le texte est le même que celui du lien du bouton. */
.parrain-message {
  display: grid; gap: var(--sp-6); align-items: center;
  max-width: 1000px; margin: 0 auto;
}
/* Au téléphone : le titre, le message, puis le bouton qui l'envoie. Sur grand
   écran : texte et bouton à gauche, le message à droite. */
@media (min-width: 900px) {
  .parrain-message { grid-template-columns: 1fr minmax(0, 440px); grid-template-areas: "texte bulle" "action bulle"; column-gap: var(--sp-8); row-gap: 0; }
  .parrain-message .texte { grid-area: texte; align-self: end; }
  .parrain-message .action { grid-area: action; align-self: start; }
  .parrain-message .parrain-bulle { grid-area: bulle; }
}
.parrain-message h2 {
  font-size: var(--fs-h2); font-weight: 700; color: var(--navy-dark);
  letter-spacing: var(--tracking-title); line-height: 1.15;
}
.parrain-message .texte p { color: var(--muted); font-size: var(--fs-md); margin-top: var(--sp-4); max-width: 52ch; }
.parrain-message .action .btn { margin-top: var(--sp-5); }
@media (max-width: 899px) { .parrain-message .action .btn { margin-top: 0; width: 100%; } }
.parrain-bulle {
  position: relative; justify-self: end; width: 100%; max-width: 440px;
  padding: var(--sp-4) var(--sp-5);
  background: var(--teal-light); color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--teal) 28%, transparent);
  border-radius: var(--r-lg) var(--r-sm) var(--r-lg) var(--r-lg);
  box-shadow: var(--shadow-sm);
  font-size: var(--fs-base); line-height: 1.55;
}
.parrain-bulle p + p { margin-top: var(--sp-2); }
.parrain-bulle .lien { color: var(--teal-ink); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }

/* Les conditions : le cadre « Ce que nous garantissons » des services. */
.parrain-conditions { margin-top: 0; }
.parrain-conditions ul { list-style: disc; }
.parrain-conditions li { margin: var(--sp-2) 0; }
.parrain-conditions li::marker { color: var(--red-dark); }