/* Palette du site (octobre 2026)
   1. Bleu #4060e4 : couleur principale (boutons, pied de page, liens, titres de hero)
   2. Jaune #f3b26b : couleur secondaire (bande « Faire un don », bouton Adhérer, soulignés)
   3. Vert : troisième couleur
   4. Rouge : seulement quand une série a besoin de plus de trois couleurs
      (bureau de l'association, antennes, agenda…).
   Le brun ne fait plus partie de la charte (octobre 2026) : « brun » et les anciens noms
   (ciel, lagon, pétrole, safran, émeraude, feuille) pointent vers la nouvelle palette,
   pour que les composants du design system suivent sans être réécrits. */

:root {
  --bleu: #4060e4;
  --bleu-fonce: #2f4bc4;
  --jaune: #f3b26b;
  --jaune-fonce: #d98c33;
  --vert: #409e7e;
  --vert-fonce: #24715a;
  --rouge: #df503f;
  --rouge-fonce: #b5372a;

  --teinte: #eef2fd;
  --focus: var(--bleu);

  --ciel: var(--bleu);
  --lagon: var(--bleu);
  --lagon-fonce: var(--bleu-fonce);
  --petrole: var(--bleu);
  --safran: var(--jaune);
  --safran-fonce: var(--jaune-fonce);
  --emeraude: var(--vert);
  --emeraude-fonce: var(--vert-fonce);
  --feuille: var(--vert);
  --feuille-fonce: var(--vert-fonce);
  --corail: var(--rouge);
  --corail-fonce: var(--rouge-fonce);
}

/* ---------- Tons (cartes, étiquettes, portraits, dates) ---------- */
.tf-ton--bleu { --ton-trait: var(--bleu); --ton-encre: var(--bleu); }
.tf-ton--jaune { --ton-trait: var(--jaune); --ton-encre: var(--jaune); --ton-fond: var(--jaune); --ton-texte: var(--encre); }
.tf-ton--vert { --ton-trait: var(--vert); --ton-encre: var(--vert-fonce); }
.tf-ton--brun { --ton-trait: var(--rouge); --ton-encre: var(--rouge); }
.tf-ton--rouge { --ton-trait: var(--rouge); --ton-encre: var(--rouge-fonce); }
.tf-ton--safran { --ton-fond: var(--jaune); --ton-texte: var(--encre); }

.tf-c-bleu { color: var(--bleu); }
.tf-c-vert { color: var(--vert-fonce); }
.tf-c-brun { color: var(--rouge); }
.tf-c-rouge { color: var(--rouge-fonce); }
.tf-c-jaune { color: var(--encre); }

/* Étiquettes des photos : texte foncé sur le jaune */
.tf-etiquette span { background: var(--ton-fond, var(--ton-encre, var(--bleu))); color: var(--ton-texte, var(--papier-blanc)); }

/* ---------- Boutons ---------- */
.tf-btn { background: var(--bleu); }
.tf-btn--chaud { background: var(--jaune); color: var(--encre); }
.tf-btn--contour { background: transparent; }
.tf-btn--blanc { background: var(--papier-blanc); color: var(--bleu); }

/* ---------- Liens ---------- */
.tf-lien { color: var(--bleu-fonce); text-decoration-color: var(--jaune); }
.tf-lien:hover { color: var(--bleu); text-decoration-color: var(--bleu); }
.tf-lien-tout:hover { color: var(--bleu); border-color: var(--jaune); }

/* ---------- Soulignés dessinés : jaune ---------- */
.tf-tete-section__titre {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 7 C 30 2, 52 11, 82 6 S 130 2, 160 7 S 190 5, 197 6' fill='none' stroke='%23f3b26b' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.tf-nav .tf-nav__lien[aria-current] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C 18 2, 30 9, 46 5 S 76 2, 92 6 S 112 4, 118 5' fill='none' stroke='%23f3b26b' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.tf-nav a:hover { color: var(--bleu); }

/* ---------- Bande jaune (Faire un don) ---------- */
.tf-bande--jaune { --bande: var(--jaune); color: var(--encre); }
.tf-bande--jaune .tf-bande-appel__phrase { color: var(--encre); }
.tf-bande--jaune .tf-btn--blanc { background: var(--bleu); color: var(--papier-blanc); }
.tf-bande--bleu { --bande: var(--bleu); color: var(--papier-blanc); }
.tf-bande--bleu .tf-btn--blanc { color: var(--bleu); }

/* La dernière bande de la page file sous le pied de page : pas de blanc entre les deux. */
main > .tf-bande:last-child {
  margin-bottom: 0;
  padding-bottom: calc(var(--espace-8) + var(--hauteur-dechirure));
}
main > .tf-bande:last-child::after { display: none; }
main:has(> .tf-bande:last-child) + .tf-pied { margin-top: 0; }

/* ---------- Pied de page bleu ---------- */
.tf-pied, .tf-pied::before { background: var(--bleu); }
.tf-pied a:hover, .tf-pied a:focus-visible { text-decoration-color: var(--jaune); }
.tf-pied .tf-btn--blanc { color: var(--bleu); }
.tf-pied__formulaire input { background: rgba(255, 255, 255, 0.14); }