/* Le formulaire de parrainage [equilibre_parrainage] (2.2.0). Dessin de la maquette du
   2026-10-21 (Marketing/Acquisition/2026-10-parrainage/maquette/) : une invitation qu'on
   poste, pas un formulaire d'inscription. Fond violet du site, enveloppe crème, étiquettes
   vert et jaune, titres au marqueur (la police des titres du site), texte du site.
   Tout est sous .eqp ; la police vient de la page, les couleurs des couleurs globales. */
.eqp {
  --eqp-violet: var(--e-global-color-primary, #774FA0);
  --eqp-violet-fonce: #4b2a72;
  --eqp-vert: #A0D39E; --eqp-jaune: #F4C764; --eqp-sarcelle: #59B3BE;
  --eqp-creme: #FFFFED; --eqp-encre: #241a33; --eqp-doux: #5f5470; --eqp-trait: #e4dcc8; --eqp-erreur: #b3261e;
  --eqp-titre: var(--e-global-typography-primary-font-family, 'LUMIOS'), 'Gochi Hand', cursive;
  max-width: 620px; margin: 0 auto; color: var(--eqp-encre); font-family: inherit; line-height: 1.55; text-align: left;
}
.eqp *, .eqp *::before, .eqp *::after { box-sizing: border-box; }
.eqp [hidden] { display: none !important; }

/* clip et non hidden : un focus ou un défilement vers un élément ne fait jamais glisser la scène sur ses formes */
.eqp-scene { position: relative; overflow: hidden; overflow: clip; background: var(--eqp-violet); color: #fff; border-radius: 30px; padding: 30px 18px 18px; isolation: isolate; }
.eqp-scene::before, .eqp-scene::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; }
.eqp-scene::before { width: 260px; height: 260px; right: -90px; top: -110px; background: var(--eqp-sarcelle); opacity: .55; }
.eqp-scene::after { width: 220px; height: 220px; left: -110px; bottom: -150px; background: var(--eqp-violet-fonce); opacity: .55; }

.eqp .eqp-titre { font-family: var(--eqp-titre); font-weight: normal; font-size: clamp(34px, 9vw, 50px); line-height: 1.02; letter-spacing: 0; margin: 0 6px; padding: 0; color: var(--eqp-creme); text-wrap: balance; text-transform: none; }
.eqp-souligne { display: block; width: 190px; height: 14px; margin: 6px 6px 0; color: var(--eqp-jaune); }
.eqp .eqp-chapeau { margin: 14px 6px 0; font-size: 17px; line-height: 1.5; color: #f6f0ff; max-width: 34ch; }

/* Les deux étiquettes-cadeaux */
.eqp-cadeaux { display: flex; flex-wrap: wrap; gap: 14px 12px; margin: 22px 4px 0; }
.eqp-etiquette { position: relative; flex: 1 1 138px; padding: 11px 12px 12px 30px; color: var(--eqp-encre); border-radius: 6px 16px 16px 6px;
  clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 50%); box-shadow: 0 6px 14px rgba(25, 6, 50, .22); }
.eqp-etiquette::before { content: ""; position: absolute; left: 14px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--eqp-violet); box-shadow: inset 0 0 0 2px rgba(0,0,0,.08); }
.eqp-etiquette--ami { background: var(--eqp-vert); transform: rotate(-1.6deg); }
.eqp-etiquette--vous { background: var(--eqp-jaune); transform: rotate(1.2deg); }
.eqp-pour { display: block; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; opacity: .8; }
.eqp-montant { display: block; font-family: var(--eqp-titre); font-size: 30px; line-height: 1; margin: 4px 0 3px; }
.eqp-precision { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.3; }

/* L'enveloppe : le formulaire se lit comme une adresse, De puis À */
.eqp-enveloppe { position: relative; margin: 24px 0 0; background: var(--eqp-creme); color: var(--eqp-encre); border-radius: 22px; padding: 22px 18px 18px; box-shadow: 0 22px 44px -12px rgba(25, 6, 50, .45); }
.eqp-rangee { display: grid; grid-template-columns: 44px 1fr; gap: 4px 10px; align-items: start; }
.eqp-mot { font-family: var(--eqp-titre); font-size: 26px; line-height: 1; color: var(--eqp-violet); padding-top: 33px; }
.eqp-champ { display: grid; gap: 6px; min-width: 0; }
.eqp .eqp-etiq { display: block; margin: 0; font-weight: 800; font-size: 15px; line-height: 1.25; color: var(--eqp-encre); }
.eqp-aide { font-weight: 600; color: var(--eqp-doux); font-size: 13.5px; }
.eqp .eqp-saisie { width: 100%; max-width: none; margin: 0; font: inherit; font-size: 17px; line-height: 1.4; color: var(--eqp-encre); background: #fff; border: 2px solid var(--eqp-trait); border-radius: 14px; padding: 12px 14px; min-height: 52px; box-shadow: none; transition: border-color .2s, box-shadow .2s; }
.eqp .eqp-saisie::placeholder { color: #8a8096; opacity: 1; }
.eqp .eqp-saisie:hover { border-color: #d3c8ae; }
.eqp .eqp-saisie:focus { outline: none; border-color: var(--eqp-violet); box-shadow: 0 0 0 4px rgba(89, 179, 190, .45); }
.eqp .eqp-saisie[aria-invalid="true"] { border-color: var(--eqp-erreur); background: #fff8f7; }
.eqp-duo { display: grid; grid-template-columns: 1fr; gap: 12px; }
.eqp-message-err { display: flex; gap: 6px; align-items: flex-start; color: var(--eqp-erreur); font-size: 14px; font-weight: 700; line-height: 1.35; }
.eqp-message-err svg { flex: none; margin-top: 1px; }

/* Le trajet de la lettre entre les deux adresses */
.eqp-trajet { position: relative; height: 46px; margin: 4px 0 2px 21px; }
.eqp-trajet svg.eqp-ligne { position: absolute; left: 0; top: 0; height: 100%; width: 24px; overflow: visible; color: #c9bfdc; }
.eqp-lettre { position: absolute; left: -11px; top: 9px; width: 26px; height: 20px; color: var(--eqp-violet); transform-origin: center; }
.eqp--envoi .eqp-lettre { animation: eqp-vol 1.25s cubic-bezier(.16, 1, .3, 1) infinite; }
@keyframes eqp-vol { 0% { transform: translateY(-6px) rotate(-8deg); opacity: 0; } 25% { opacity: 1; } 70% { transform: translateY(18px) rotate(6deg); opacity: 1; } 100% { transform: translateY(26px) rotate(0); opacity: 0; } }

.eqp-mot-perso { margin: 14px 0 0 54px; }
.eqp .eqp-lien { font: inherit; font-size: 15px; font-weight: 800; color: var(--eqp-violet); background: none; border: 0; border-radius: 0; padding: 4px 0; min-height: 0; cursor: pointer; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: rgba(119, 79, 160, .35); box-shadow: none; text-transform: none; letter-spacing: 0; }
.eqp textarea.eqp-saisie { min-height: 84px; resize: vertical; margin-top: 6px; }
.eqp-compte { font-size: 12.5px; color: var(--eqp-doux); text-align: right; font-weight: 700; }
.eqp-robot { margin-top: 14px; }

.eqp-actions { margin-top: 20px; }
.eqp .eqp-bouton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; margin: 0; font: inherit; font-size: 18px; font-weight: 900; line-height: 1.2; color: #fff; background: var(--eqp-violet); border: 0; border-radius: 999px; padding: 14px 26px; cursor: pointer; text-transform: none; letter-spacing: 0;
  box-shadow: 0 10px 22px -8px rgba(83, 0, 168, .65); transition: background .2s, transform .2s cubic-bezier(.16, 1, .3, 1), box-shadow .2s; }
.eqp .eqp-bouton[disabled] { cursor: progress; background: #8f72b3; box-shadow: none; transform: none; }
.eqp .eqp-bouton--second { background: #fff; color: var(--eqp-violet); box-shadow: inset 0 0 0 2px var(--eqp-violet); }
.eqp .eqp-petit { margin: 14px 2px 0; font-size: 13.5px; line-height: 1.45; color: var(--eqp-doux); }
/* La case « nous indiquerons à votre proche… », en bas et en petit, cochée d'office (Olivier, 2026-10-23) */
.eqp .eqp-partager { display: flex; gap: 10px; align-items: flex-start; margin: 10px 2px 0; font-size: 13.5px; line-height: 1.45; font-weight: 400; color: var(--eqp-doux); cursor: pointer; }
.eqp .eqp-partager input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--eqp-violet); cursor: pointer; }
.eqp .eqp-partager input:focus-visible { outline: 3px solid var(--eqp-sarcelle); outline-offset: 2px; }
.eqp-alerte { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: #fde9e6; color: #7a1a14; font-size: 14.5px; font-weight: 700; display: flex; gap: 8px; }
.eqp-alerte svg { flex: none; margin-top: 2px; }

/* Les conditions, sous la scène, sur le fond violet */
.eqp-conditions { margin: 16px 6px 0; color: #f1e9ff; font-size: 14.5px; }
.eqp-conditions summary { cursor: pointer; font-weight: 800; list-style: none; display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; color: #f1e9ff; }
.eqp-conditions summary::-webkit-details-marker { display: none; }
.eqp-conditions summary svg { transition: transform .25s cubic-bezier(.16, 1, .3, 1); }
.eqp-conditions[open] summary svg { transform: rotate(90deg); }
.eqp-conditions summary:focus-visible { outline: 3px solid var(--eqp-jaune); outline-offset: 3px; border-radius: 6px; }
.eqp .eqp-conditions ul { margin: 6px 0 4px; padding-left: 20px; line-height: 1.5; max-width: 60ch; list-style: disc; color: #f1e9ff; }
.eqp .eqp-conditions li { margin: 0; color: #f1e9ff; }
.eqp .eqp-conditions li + li { margin-top: 4px; }

/* Réussite */
.eqp-enveloppe.eqp-reussite { padding: 24px 20px 20px; outline: none; }
.eqp .eqp-reussite-titre { font-family: var(--eqp-titre); font-size: clamp(30px, 8.5vw, 40px); line-height: 1; color: var(--eqp-violet); margin: 0 0 10px; display: flex; align-items: center; gap: 12px; }
.eqp .eqp-reussite p { margin: 0 0 12px; color: var(--eqp-encre); }
.eqp-timbre { flex: none; width: 54px; height: 54px; color: var(--eqp-violet); animation: eqp-tampon .6s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes eqp-tampon { from { transform: scale(1.6) rotate(-18deg); opacity: 0; } to { transform: scale(1) rotate(-8deg); opacity: 1; } }
.eqp-reussite .eqp-bouton { margin-top: 6px; }

@media (min-width: 640px) {
  .eqp-scene { padding: 42px 38px 26px; }
  .eqp .eqp-chapeau { font-size: 18px; }
  .eqp-etiquette { padding: 12px 16px 13px 34px; }
  .eqp-pour { font-size: 12px; }
  .eqp-montant { font-size: 34px; }
  .eqp-precision { font-size: 14.5px; }
  .eqp-enveloppe { padding: 28px 30px 24px; transform: rotate(-.6deg); }
  .eqp-rangee { grid-template-columns: 56px 1fr; }
  .eqp-mot { font-size: 30px; }
  .eqp-trajet { margin-left: 27px; }
  .eqp-mot-perso { margin-left: 66px; }
  .eqp-duo { grid-template-columns: 1.6fr 1fr; }
  .eqp .eqp-bouton { width: auto; }
  .eqp-actions { display: flex; justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
  .eqp *, .eqp *::before, .eqp *::after { animation: none !important; transition: none !important; }
}

/* Les boutons gardent leurs couleurs au survol et au focus. Le thème peint tout `button:hover`
   et `button:focus` (Genesis : rouge au focus ; naada.ca : orange au survol), plus fort qu'une
   seule classe : chaque état est repris ici, préfixé de `.eqp` (leçon de la 2.1.12). */
.eqp button.eqp-bouton:is(:hover, :focus) { background: var(--eqp-violet); color: #fff; }
.eqp button.eqp-bouton:not([disabled]):hover { background: var(--eqp-violet-fonce); transform: translateY(-1px); box-shadow: 0 14px 26px -10px rgba(83, 0, 168, .7); }
.eqp button.eqp-bouton:not([disabled]):active { transform: translateY(1px); }
.eqp button.eqp-bouton--second:is(:hover, :focus) { background: #fff; color: var(--eqp-violet); box-shadow: inset 0 0 0 2px var(--eqp-violet); }
.eqp button.eqp-bouton--second:hover { background: #f4eefb; box-shadow: inset 0 0 0 2px var(--eqp-violet-fonce); transform: none; }
.eqp button.eqp-lien:is(:hover, :focus) { background: none; color: var(--eqp-violet); text-decoration-color: currentColor; }
.eqp button.eqp-bouton:focus-visible, .eqp button.eqp-lien:focus-visible { outline: 3px solid var(--eqp-sarcelle); outline-offset: 3px; }