/* Le Haricot Volant : la charte « Mille et une nuits ».
   Toutes les pages du tunnel chargent ce fichier. */

:root {
  --c-page: #F5F9FE;        /* blanc nuage */
  --c-surface: #FFFFFF;
  --c-sky: #D9EAF9;         /* ciel */
  --c-primary: #1C3F94;     /* bleu lapis */
  --c-night: #0F1E4A;       /* bleu nuit */
  --c-accent: #C42A2F;      /* rouge carmin */
  --c-accent-dark: #8E1B20;
  --c-gold: #D39B2C;        /* or */
  --c-gold-light: #F4D57E;
  --c-gold-dark: #8A5A12;   /* or foncé : texte doré sur fond clair */
  --c-ink: #16214A;         /* encre */
  --c-ink-soft: #4B5679;
  --c-line: #D3DFEF;
  --c-on-night: #FFF6E3;

  --hero-bg: linear-gradient(180deg, #A9D0F2 0%, #D9EAF9 55%, #F5F9FE 100%);
  --night-bg: radial-gradient(120% 90% at 50% 0%, #22449A 0%, #0F1E4A 72%);
  --gold-gradient: linear-gradient(180deg, #FFF0B8 0%, #F2C24E 42%, #B27718 100%);

  --f-display: "Aladin", "Alegreya Sans", serif;
  --f-text: "Alegreya Sans", system-ui, sans-serif;

  --radius-card: 18px;
  --radius-btn: 999px;
  --card-border: 1px solid var(--c-line);
  --card-shadow: 0 18px 40px -24px rgba(15, 30, 74, 0.45);

  --trail-color: var(--c-gold);
  --trail-dash: 0.1 9;
  --trail-width: 3.5;
}

/* ---------- Titres ---------- */

.titre {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--c-primary);
  line-height: 1.05;
  text-wrap: balance;
}

/* Titre doré, pour les fonds sombres et les inscriptions.
   Le dégradé se répète à chaque ligne. */
.titre-or {
  background: var(--gold-gradient);
  background-size: 100% 1.05em;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.05;
}

/* ---------- Boutons ----------
   Rouge : réserver sa place au webinaire.
   Doré : s'inscrire au club (voyageur, ambassadeur). */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.8em 1.5em;
  border-radius: var(--radius-btn);
  border: 2px solid var(--c-gold-light);
  background: var(--c-accent);
  color: #FFFFFF;
  box-shadow: 0 4px 0 var(--c-accent-dark);
  font-family: var(--f-text);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.btn-2 {
  background: transparent;
  color: var(--c-primary);
  border: 2px solid var(--c-primary);
  box-shadow: none;
}
.btn-or {
  background: linear-gradient(180deg, #FFF0B8 0%, #F2C24E 45%, #C98A1E 100%);
  color: var(--c-night);
  border: 1px solid #FFF3C4;
  box-shadow: 0 4px 0 var(--c-gold-dark), 0 12px 30px -10px rgba(242, 194, 78, 0.6);
}
.btn-or-2 {
  background: transparent;
  color: var(--c-gold-light);
  border: 2px solid var(--c-gold);
  box-shadow: none;
}

/* ---------- Le losange (repris de la carte de visite) ---------- */

.regle {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--c-gold);
}
.regle::before,
.regle::after {
  content: "";
  flex: 1;
  height: 1.5px;
  background: currentColor;
}
.regle span {
  width: 11px;
  height: 11px;
  transform: rotate(45deg);
  background: var(--c-accent);
  outline: 1.5px solid currentColor;
  outline-offset: 2px;
}

/* ---------- Le fil d'or : la traînée de la lampe ---------- */

.trainee path {
  fill: none;
  stroke: var(--trail-color);
  stroke-width: var(--trail-width);
  stroke-dasharray: var(--trail-dash);
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* ---------- L'écrin doré : tout ce qui touche aux inscriptions ---------- */

.ecrin {
  border: 1px solid var(--c-gold);
  outline: 1px solid rgba(211, 155, 44, 0.45);
  outline-offset: -8px;
}