/* Fondation de l'ITAQ, site de dons 20924 : CSS complet de l'onglet Avancée.
   Version 1.2 (2026-10-16)
   Historique :
   1.2  « Faire un don » du menu redevient un lien de menu (Catherine : il avait l'air d'un
        bouton) ; souligné vert sur la page active. Le bouton de la campagne reste une pilule.
   1.1  La ligne du logo Yapla ne se cache plus que si l'en-tête maison est sur la page :
        la 1.0 la cachait toujours, et le site s'est retrouvé sans logo avant le collage de l'en-tête.
   1.0  Habillage aux couleurs du logo FITAQ, sur le modèle d'Ékip Jeunesse en plus simple :
        en-tête réduit (entete.html), bande des quatre feuilles, menu marine où « Faire un don »
        est un bouton, bouton « Faire un don » de la campagne en pilule verte, pied de page
        marine (pied-de-page.html). Le logo et le pied de page Yapla sont masqués, pas supprimés.
   Charte relevée le 2026-10-16 sur le logo FITAQ et itaq.ca : DM Sans, marine #1c2a3c,
   vert #9fc53a, vert foncé #3a5500 ; feuilles rouge #c35866, turquoise #56c1c7, jaune #ebd544. */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');

:root {
  --ft-marine: #1c2a3c;
  --ft-vert: #9fc53a;
  --ft-vert-fonce: #3a5500;
  --ft-rouge: #c35866;
  --ft-turquoise: #56c1c7;
  --ft-jaune: #ebd544;
  --ft-fond: #f5f7f0;
  --ft-police: "DM Sans", Arial, sans-serif;
}

/* 1. Texte : la police et la couleur d'itaq.ca. Le gabarit pose Montserrat par ses variables
   --font et --g-font (onglet Guidé) : on les redéfinit, en plus de la règle directe. */
:root { --font: "DM Sans", Arial, sans-serif; --g-font: "DM Sans", Arial, sans-serif; }
body, #site-wrapper p, #site-wrapper li, #site-wrapper a, #site-wrapper .btn { font-family: var(--ft-police) !important; }
#site-wrapper h1, #site-wrapper h2, #site-wrapper h3, #site-wrapper h4 { font-family: var(--ft-police) !important; color: var(--ft-marine); font-weight: 700; }

/* 2. En-tête réduit (entete.html, zone Contenu personnalisé du haut) */
#site-wrapper .line:has(.ft-top) { padding: 0 !important; }
#site-wrapper .line:has(.ft-top) .container { width: 100%; max-width: none; padding: 0; }
#site-wrapper .line:has(.ft-top) .row { margin: 0; }
#site-wrapper .zone-html:has(.ft-top) { padding: 0; }
.ft-top { background: #fff; border-bottom: 1px solid #e7e7e7; }
.ft-top__inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  max-width: 1140px; margin: 0 auto; padding: 14px 16px;
}
.ft-top__retour { justify-self: start; white-space: nowrap; color: var(--ft-vert-fonce) !important; font-size: 15px; font-weight: 500; text-decoration: none !important; }
.ft-top__retour:hover { text-decoration: underline !important; }
/* Le gabarit étire les images (img { width: 100% ; height: 100% }) : taille fixée ici. */
#site-wrapper .ft-top__logo img { display: block; height: 72px !important; width: auto !important; max-width: none; object-fit: contain; }
.ft-bande { display: flex; height: 5px; }
.ft-bande span { flex: 1; }
.ft-bande span:nth-child(1) { background: var(--ft-rouge); }
.ft-bande span:nth-child(2) { background: var(--ft-turquoise); }
.ft-bande span:nth-child(3) { background: var(--ft-jaune); }
.ft-bande span:nth-child(4) { background: var(--ft-vert); }
@media (max-width: 600px) {
  .ft-top__inner { grid-template-columns: 1fr; justify-items: center; gap: 8px; }
  .ft-top__logo { order: -1; }
  .ft-top__retour { justify-self: center; font-size: 14px; }
}

/* La ligne du logo Yapla est remplacée par l'en-tête réduit : masquée, pas supprimée. */
#site-wrapper .site-inner:has(.ft-top) .line-header:has(.zone-header) { display: none !important; }

/* 3. Menu : bande marine, liens blancs */
#site-wrapper .line-menu { background: var(--ft-marine); padding: 0 !important; }
#site-wrapper .zone-menu {
  --navlink-color: #fff;
  --navlink-color-active: #fff;
  --navlink-background: transparent;
}
#site-wrapper .zone-menu .navbar { background: transparent; border: 0; margin: 0; min-height: 0; }
#site-wrapper .zone-menu .nav.navbar-nav > li > a {
  font-family: var(--ft-police); font-weight: 700 !important; font-size: 16px;
  color: #fff !important; padding: 18px 0; margin-right: 28px;
}
/* Un lien de menu, pas un bouton (Catherine, 16/10) : souligné vert sur la page active et au survol. */
#site-wrapper .zone-menu .nav.navbar-nav > li > a {
  background: transparent !important; border-bottom: 3px solid transparent;
}
#site-wrapper .zone-menu .nav.navbar-nav > li.active > a,
#site-wrapper .zone-menu .nav.navbar-nav > li > a:hover,
#site-wrapper .zone-menu .nav.navbar-nav > li > a:focus {
  border-bottom-color: var(--ft-vert); color: #fff !important;
}
#site-wrapper .zone-menu .navbar-toggle .icon-bar { background: #fff; }

/* 4. Page de la campagne */
#site-wrapper .line-main { background: var(--ft-fond); }
.don .campaign-image { border-radius: 10px; }
.don .campaign-title { font-size: 36px; line-height: 1.15; }
/* « Faire un don » : un .btn-default que le gabarit 00050 dessine en lien. */
.don .campaign-details-cta a.campaign-make-donations,
.don .campaign-details-cta a.campaign-make-donations:visited {
  display: inline-flex !important; align-items: center; justify-content: center;
  background: var(--ft-vert) !important; border: 2px solid var(--ft-vert) !important;
  color: var(--ft-marine) !important; border-radius: 999px !important;
  font-family: var(--ft-police); font-weight: 700; font-size: 17px; line-height: 1;
  padding: 15px 34px !important; text-decoration: none !important; box-shadow: none !important;
}
.don .campaign-details-cta a.campaign-make-donations:hover,
.don .campaign-details-cta a.campaign-make-donations:focus {
  background: var(--ft-vert-fonce) !important; border-color: var(--ft-vert-fonce) !important; color: #fff !important;
}
/* Boutons du formulaire de don et de la liste des campagnes */
#site-wrapper .btn-primary {
  background: var(--ft-vert) !important; border-color: var(--ft-vert) !important;
  color: var(--ft-marine) !important; border-radius: 999px; font-weight: 700;
}
#site-wrapper .btn-primary:hover { background: var(--ft-vert-fonce) !important; border-color: var(--ft-vert-fonce) !important; color: #fff !important; }

/* 5. Pied de page (pied-de-page.html, zone Contenu personnalisé du pied) */
#site-wrapper .line-footer:has(.ft-pied) { padding: 0 !important; background: var(--ft-marine) !important; }
#site-wrapper .line-footer:has(.ft-pied) .container { width: 100%; max-width: none; padding: 0; }
#site-wrapper .line-footer:has(.ft-pied) .row { margin: 0; }
#site-wrapper .line-footer .zone-html:has(.ft-pied) { padding: 0; }
/* Le pied de page Yapla (adresse, courriel) est remplacé : masqué, pas supprimé. */
#site-wrapper .line-footer:has(.ft-pied) .footer-classic { display: none !important; }
.ft-pied { background: var(--ft-marine); color: #fff; font-family: var(--ft-police); padding: 36px 16px; }
.ft-pied__inner {
  max-width: 1140px; margin: 0 auto;
  display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; text-align: left;
}
#site-wrapper .ft-pied__logo { height: 64px !important; width: auto !important; max-width: none; background: #fff; padding: 6px; border-radius: 6px; object-fit: contain; }
.ft-pied p { margin: 0; line-height: 1.6; }
.ft-pied a { color: var(--ft-vert) !important; }
@media (max-width: 760px) {
  .ft-pied__inner { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 16px; }
}