/* ============================================================================
   SOUTIEN AU PROJET ET PARTAGE
   ----------------------------------------------------------------------------
   Ce bloc n'avait pas suivi la refonte du panneau : couleurs écrites en dur,
   aucune variante sombre, texte de 18 px dans un panneau réglé plus fin, et
   ombres propres. Il était de loin l'élément le plus criard de l'écran alors
   qu'il ne porte pas l'action principale.

   Tout est désormais exprimé avec les jetons de la feuille principale, donc
   suit automatiquement le thème clair comme le thème sombre. Le rouge du
   soutien est conservé — c'est l'identité de Tipeee et le repère des habitués —
   mais ramené à l'échelle du panneau : bouton de même hauteur et de même rayon
   que « Voir la carte », et non plus une pastille de 50 px.

   La classe `pulse` posée sur le bouton dans index.php n'était définie nulle
   part, dans aucune feuille : vestige d'une animation supprimée. Elle a été
   retirée du gabarit.
   ========================================================================== */

:root {
  /* Rouge du soutien. Contraste vérifié sur blanc : 4,84:1 avec du texte
     blanc en gras, au-dessus du seuil AA pour ce corps de texte. */
  --soutien: #c62828;
  --soutien-fonce: #a51f1f;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Plus clair en thème sombre : le rouge profond y perdait tout contraste
       avec le fond du panneau. */
    --soutien: #d4453f;
    --soutien-fonce: #b8352f;
  }
}

:root[data-theme="dark"] { --soutien: #d4453f; --soutien-fonce: #b8352f; }
:root[data-theme="light"] { --soutien: #c62828; --soutien-fonce: #a51f1f; }

/* --- Bloc de soutien ------------------------------------------------------ */

.tipeee-container {
  margin: var(--espace-md) 0 0;
}

.tipeee-button {
  /* Le projet n'applique pas box-sizing:border-box globalement : sans cette
     ligne, width:100% s'ajoute au rembourrage et aux bordures, et le bouton
     dépassait du panneau de 26 px. Mesuré, pas supposé. */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-sm);
  width: 100%;
  padding: var(--espace-sm) var(--espace-lg);
  font-size: 0.8rem;
  font-weight: 620;
  /* Un liseré, et non un aplat : posé en plein rouge sous les étapes, ce
     bouton était le seul appel à l'action visible du panneau et détournait du
     choix de l'indicateur (Jérôme, PAESI, 30 septembre 2026). Il reste
     présent et lisible — 5,9:1 en clair, 6,1:1 en sombre — mais il ne parle
     plus avant les étapes. */
  color: var(--soutien);
  text-align: center;
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--soutien);
  border-radius: var(--rayon-bouton, 9px);
  cursor: pointer;
  transition: background-color var(--duree-rapide), border-color var(--duree-rapide);
}

.tipeee-button:hover {
  background: color-mix(in srgb, var(--soutien) 10%, transparent);
  border-color: var(--soutien-fonce);
  color: var(--soutien-fonce);
}

.tipeee-button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.tipeee-button i {
  font-size: 0.95em;
}

.tipeee-text {
  margin-top: var(--espace-sm);
  font-size: 0.75rem;
  color: var(--encre-2);
}

/* --- Logos partenaires (instance suisse) ---------------------------------- */

.sponsor-logos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espace-md);
  margin: var(--espace-md) 0 0;
}

.sponsor-logos img {
  max-width: 180px;
  height: auto;
}

#valais {
  max-width: 90px;
}

/* --- Partage -------------------------------------------------------------- */

.social-share-container {
  box-sizing: border-box;   /* même raison que .tipeee-button */
  display: block;
  width: 100%;
  margin: var(--espace-md) 0 0;
  padding: var(--espace-md) var(--espace-lg);
  background: var(--panneau-2);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-bloc);
}

.share-text {
  display: block;
  margin-bottom: var(--espace-sm);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--encre-2);
}

.social-buttons {
  display: flex;
  gap: var(--espace-sm);
}

/* Au repos, les icônes sont neutres : cinq pastilles de couleurs vives
   attiraient l'œil plus que les filtres eux-mêmes. La couleur de chaque réseau
   n'apparaît qu'au survol, là où elle sert enfin à identifier la destination. */
.social-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--encre-2);
  text-decoration: none;
  background: var(--panneau);
  border: 1px solid var(--trait-fort);
  border-radius: 50%;
  transition: color var(--duree-rapide), background-color var(--duree-rapide),
              border-color var(--duree-rapide);
}

.social-button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.social-button:hover {
  color: #fff;
}

.facebook:hover  { background: #3b5998; border-color: #3b5998; }
.twitter:hover   { background: #1da1f2; border-color: #1da1f2; }
.linkedin:hover  { background: #0077b5; border-color: #0077b5; }
.email:hover     { background: #c62828; border-color: #c62828; }
.link:hover      { background: var(--encre-2); border-color: var(--encre-2); }

/* --- Confirmation de copie ------------------------------------------------ */
/* Ce message existait déjà et fonctionne : seule sa présentation est alignée
   sur le reste. */

.copy-message {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  padding: var(--espace-sm) var(--espace-lg);
  font-size: 0.84rem;
  color: var(--sur-accent);
  background: var(--accent);
  border-radius: var(--rayon-bouton, 9px);
  box-shadow: var(--ombre-carte);
  opacity: 0;
  transition: opacity var(--duree-moyenne) ease;
}

.copy-message.show {
  opacity: 1;
}

/* Cibles tactiles : 36 px au doigt reste juste. */
@media (max-width: 768px) {
  .social-button {
    width: 44px;
    height: 44px;
  }
}