/* Pied de page, en-tête (ombre), boutons et formulaire. Chargé après style.css, donc ces règles l'emportent. */

/* En-tête sur fond blanc : même ombre que le bouton flottant Miralh Festival
   (pages autres que l'accueil, et accueil une fois qu'on a défilé) */
.entete-accueil { transition: background .3s, box-shadow .3s; }
.entete.sombre, .entete-accueil.defile { box-shadow: 0 6px 20px rgba(0,0,0,.25); }

/* Boutons « En savoir plus » et « Envoyer » : sans contour visible (la bordure reste transparente
   pour que la taille ne change pas), rouges seulement à l'appui.
   Fond : sur une zone blanche, le bouton prend le gris du pied de page ; sur une zone grise
   (celle du pied de page, du formulaire de contact...), il est blanc. */
.bouton.bouton-action, .formulaire .bouton,
.bouton.bouton-action:hover, .formulaire .bouton:hover {
  background: var(--gris-clair); color: var(--noir); border-color: transparent;
}
.gris .bouton.bouton-action, .pied .bouton.bouton-action, #contact .bouton,
.gris .bouton.bouton-action:hover, .pied .bouton.bouton-action:hover, #contact .bouton:hover {
  background: var(--blanc);
}
.bouton.bouton-action:active, .formulaire .bouton:active,
.gris .bouton.bouton-action:active, .pied .bouton.bouton-action:active, #contact .bouton:active {
  background: var(--rouge); color: var(--blanc); border-color: transparent;
}

/* Zones de saisie du formulaire : fond blanc, sans contour ; contour rouge léger quand la zone est active */
.formulaire input, .formulaire textarea { background: var(--blanc); border-color: transparent; }
.formulaire input:focus, .formulaire textarea:focus { border-color: rgba(255,0,0,.35); }

/* Tablette et mobile : le menu ouvert est sur fond gris clair, donc le lien actif y reste rouge,
   même tout en haut de l'accueil (où l'en-tête est encore transparent) */
@media (max-width: 999px) {
  .entete-accueil:not(.defile) .menu a[aria-current="page"] { color: var(--rouge); }
}

/* « Rejoins-nous » du pied de page : même icône « lien externe » que dans l'en-tête,
   à la hauteur du texte et de la couleur du texte */
.pied ul a[target="_blank"]::after {
  content: ""; display: inline-block; width: 1.08em; height: 1.08em; margin-left: .3em; vertical-align: -.14em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4l-9 9'/%3E%3Cpath d='M18 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4l-9 9'/%3E%3Cpath d='M18 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Réseaux sociaux : boutons blancs, arrondi de 12px comme le bouton « Envoyer »,
   icône puis nom à droite (le nom vient de l'attribut aria-label du lien).
   Les trois restent toujours sur une seule ligne : le texte et les marges se réduisent avec la largeur de l'écran. */
.pied .reseaux { flex-wrap: nowrap; gap: 6px; }
.pied .reseaux a {
  width: auto; height: auto; border-radius: 12px; background: var(--blanc); color: var(--noir);
  display: inline-flex; align-items: center; gap: 5px; padding: 8px 12px; white-space: nowrap;
  font-weight: 500; font-size: 13px; line-height: 1.3; text-decoration: none;
}
.pied .reseaux a svg { width: 16px; height: 16px; flex: none; }
.pied .reseaux a::after { content: attr(aria-label); }
.pied .reseaux a:hover { background: var(--blanc); color: var(--rouge); }
@media (max-width: 689px) {
  .pied .reseaux a { font-size: clamp(9px, 2.8vw, 13px); padding: 8px clamp(6px, 2vw, 12px); gap: 4px; }
  .pied .reseaux a svg { width: 15px; height: 15px; }
}
@media (min-width: 690px) and (max-width: 1023px) {
  .pied .reseaux a { font-size: clamp(9px, 1.5vw, 13px); padding: 8px clamp(6px, 1vw, 12px); gap: 4px; }
  .pied .reseaux a svg { width: 15px; height: 15px; }
}

/* Copyright : aligné à gauche, exactement au même niveau que le plan du site.
   Le conteneur a déjà ses marges : on retire donc celles que style.css ajoutait en plus. */
.pied .conteneur > .copyright { padding-inline: 0; text-align: left; }

/* « Notre festival » : titre rouge cliquable vers la page Miralh Festival */
.pied .droite h4 { margin: 0; }
.pied .droite h4 a { color: var(--rouge); text-decoration: none; }
.pied .droite h4 a:hover { color: var(--rose); }

/* Mobile : festival, puis plan du site, puis réseaux, puis copyright */
@media (max-width: 689px) {
  .pied .conteneur > .droite { order: 0; margin: 0 0 24px; }
  .pied .conteneur > ul { order: 1; }
  .pied .conteneur > .reseaux { order: 2; }
  .pied .conteneur > .copyright { order: 4; }
}

/* Tablette et ordinateur : plan du site à gauche ;
   à droite, « Notre festival » au-dessus des réseaux sociaux ; copyright sous le plan du site */
@media (min-width: 690px) {
  .pied .conteneur { grid-template-columns: 1fr 1fr; column-gap: 30px; row-gap: 0; }
  .pied .conteneur > ul { grid-column: 1; grid-row: 1 / 3; }
  .pied .conteneur > .droite { grid-column: 2; grid-row: 1; text-align: right; margin: 0 0 24px; }
  .pied .conteneur > .reseaux { grid-column: 2; grid-row: 2; justify-content: flex-end; align-self: start; }
  .pied .conteneur > .copyright { grid-column: 1 / -1; grid-row: 3; text-align: left; margin: 24px 0 0; }
}

/* Bouton flottant Miralh Festival : sa position (bas de l'écran au chargement, puis il monte avec la page
   et s'épingle 16px sous l'en-tête) est calculée par main.js sur la hauteur visible réelle.
   Sans JavaScript, il reste simplement en bas à droite (règle de style.css). */