/* Maquette simplifiée du site artistocratie.fr
   Couleurs et polices reprises du thème actuel (Blocksy). */

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

@font-face {
  font-family: "MiralhFest";
  src: url("https://www.artistocratie.fr/wp-content/uploads/2024/03/MiralhFest-Regular.ttf") format("truetype");
  font-display: swap;
}

:root {
  /* Palette du thème actuel */
  --blanc: #ffffff;      /* couleur 1 : menu, textes sur fond sombre */
  --noir: #000000;       /* couleur 2 : texte courant */
  --gris: #555555;       /* couleur 3 : titres secondaires, horaires */
  --rouge: #ff0000;      /* couleur 4 : titres de section, liens */
  --rose: #ff8888;       /* couleur 5 : survols, boutons documents */
  --gris-clair: #f7f7f7; /* couleur 6 : fond des cartes et du pied de page */
  --bleu: #2d7bbf;       /* accent du programme Miralh */
  --orange: #ff6900;     /* "Buvette et restauration" */
  --nuit-1: #202124;     /* bande L'actu (dégradé) */
  --nuit-2: #35363a;

  --police: "Lexend", system-ui, sans-serif;
  --police-titre: "Lexend Deca", "Lexend", system-ui, sans-serif;
  --largeur: 750px;
  --largeur-entete: 1290px;   /* l'en-tête garde une largeur plus grande pour que le menu tienne */
  --marge-x: 40px;   /* marge gauche/droite : mobile 40px */
  --marge-y: 80px;   /* marge haut/bas des blocs : mobile 80px */
  --etroit: 750px;
  --header: 120px;
  --rayon: 15px;
}

/* Marges fixes par palier d'écran, haut et bas identiques partout (80px).
   Mobile : 40px à gauche/droite. Tablette et PC : 80px à gauche/droite. */
@media (min-width: 690px) {
  :root { --marge-x: 80px; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--police);
  font-size: 16px;
  line-height: 1.65;
  color: var(--noir);
  background: var(--blanc);
}
img, video { max-width: 100%; height: auto; display: block; }
.duo > *, .programme > *, .equipe > *, .poles > * { min-width: 0; }
a { color: var(--rouge); }
a:hover { color: var(--rose); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--police-titre);
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 .6em;
}
h2 { font-size: clamp(28px, 4vw, 35px); text-transform: uppercase; }
h3 { font-size: clamp(22px, 3vw, 30px); }
h4 { font-size: 25px; }
h5 { font-size: 20px; text-transform: uppercase; }

.conteneur { width: min(var(--largeur), 100% - 2 * var(--marge-x)); margin-inline: auto; }
.etroit { width: min(var(--etroit), 100% - 2 * var(--marge-x)); margin-inline: auto; }
.bande { padding-block: var(--marge-y); }
.lien-evitement { position: absolute; left: -999px; }
.lien-evitement:focus { left: 10px; top: 10px; z-index: 100; background: #fff; padding: 8px; }

/* ---------- En-tête ---------- */
.entete {
  position: absolute; inset: 0 0 auto 0; z-index: 20;
  height: var(--header);
  display: flex; align-items: center;
}
/* En-tête des pages autres que l'accueil : épinglé, fond blanc, logo et menu noirs, en haut de page comme au scroll */
.entete.sombre { position: fixed; inset: 0 0 auto 0; background: #fff; }
.entete:not(.entete-accueil) .logo img { filter: brightness(0); }
.entete:not(.entete-accueil) .burger span { background: var(--noir); }
.entete:not(.entete-accueil) .menu a { color: var(--noir); }
.entete:not(.entete-accueil) .menu a:hover, .entete:not(.entete-accueil) .menu a[aria-current="page"] { color: var(--rouge); }
/* Le contenu commence sous l'en-tête épinglé */
.entete:not(.entete-accueil) + main { padding-top: var(--header); }
.entete .conteneur { width: min(var(--largeur-entete), 100% - 2 * var(--marge-x)); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
/* En-tête de l'accueil (tous écrans) : épinglé, dégradé noir vers transparent en haut, fond blanc et textes noirs dès le scroll */
.entete-accueil { position: fixed; inset: 0 0 auto 0; background: transparent; transition: background .3s; }
.entete-accueil.defile { background: #fff; }
.entete-accueil .logo img, .entete-accueil .menu a { transition: filter .3s, color .3s; }
.entete-accueil.defile .logo img { filter: brightness(0); }
.entete-accueil.defile .menu a { color: var(--noir); }
.logo img { height: 100px; width: auto; }
.menu { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.menu a {
  color: var(--blanc); text-decoration: none;
  text-transform: uppercase; font-weight: 500; font-size: 15px;
}
/* Lien survolé ou en cours : texte rouge sur fond blanc translucide */
.menu a:hover, .menu a[aria-current="page"] { color: var(--rouge); }
/* Accueil en haut de page (fond transparent) : le lien actif reste blanc, il ne passe rouge qu'au scroll */
.entete-accueil:not(.defile) .menu a[aria-current="page"] { color: var(--blanc); }
.entete-accueil.defile .menu a:hover, .entete-accueil.defile .menu a[aria-current="page"] { color: var(--rouge); }
.menu .bouton-entete { background: none; padding: 0; position: relative; }
/* Icône « lien externe » à droite du texte : même hauteur que le texte, couleur du texte */
.menu .bouton-entete::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;
}
.burger {
  display: none; background: none; border: 0; cursor: pointer;
  width: 40px; height: 40px; padding: 8px;
}
.burger span { display: block; height: 2px; background: var(--blanc); margin: 6px 0; transition: .2s; }

/* ---------- Héros vidéo ---------- */
.heros { position: relative; min-height: 100vh; overflow: hidden; background: var(--noir); }
.heros video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.heros::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0) 33.333%), linear-gradient(to top, #000 0%, rgba(0,0,0,0) 33.333%), rgba(0,0,0,.3); }

/* ---------- Bloc texte + image ---------- */
.duo { display: grid; grid-template-columns: minmax(0,3fr) minmax(0,2fr); gap: 48px; align-items: end; }
.duo.inverse { grid-template-columns: minmax(0,2fr) minmax(0,3fr); align-items: center; }
.titre-rouge { color: var(--rouge); }
.duo img { border-radius: 10px; }

/* L'association : l'image couvre tout le bloc, le texte est posé dessus */
#l-association { position: relative; isolation: isolate; overflow: hidden; container-type: inline-size; }
#l-association { --off: calc((100cqw - min(var(--largeur), 100cqw - 2 * var(--marge-x))) / 2); }
/* Grand écran et tablette : h2 + 2 premiers paragraphes sur toute la largeur,
   dernier paragraphe à gauche de l'image, image collée en bas à droite de la section. */
#l-association { padding-bottom: 0; }
#l-association .duo { display: grid; grid-template-columns: minmax(0,1fr) calc(50cqw - var(--off)); column-gap: 24px; row-gap: 0; align-items: start; padding: 0; }
#l-association .duo > div { display: contents; }
#l-association .duo > div > * { margin: 0 0 1.65rem; }
#l-association .duo > div > h2 { grid-column: 1 / -1; grid-row: 1; }
#l-association .duo > div > p:nth-of-type(1) { grid-column: 1 / -1; grid-row: 2; }
#l-association .duo > div > p:nth-of-type(2) { grid-column: 1 / -1; grid-row: 3; }
#l-association .duo > div > .fin-texte { grid-column: 1; grid-row: 4; margin: 0; }
#l-association .fin-texte > p { margin: 0 0 1.65rem; }
#l-association .fin-texte > .bouton-action { margin-top: 0; }
.bouton.bouton-action { background: var(--blanc); color: var(--noir); border-color: var(--noir); border-radius: 12px; }
/* Icône qui apparaît au survol : chevron pour « En savoir plus », avion en papier pour « Envoyer ».
   Le bouton s'élargit pour l'accueillir. */
.bouton.bouton-action::after, .formulaire .bouton::after {
  content: ""; display: inline-block; width: 0; height: 1em; vertical-align: -.15em; margin-left: 0; opacity: 0;
  background-color: currentColor; transition: width .2s, opacity .2s, margin .2s;
  -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain;
}
.bouton.bouton-action::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}
.formulaire .bouton::after {
  -webkit-mask-image: 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='M22 12L2 4L6 12L2 20Z'/%3E%3Cpath d='M6 12H22'/%3E%3C/svg%3E");
          mask-image: 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='M22 12L2 4L6 12L2 20Z'/%3E%3Cpath d='M6 12H22'/%3E%3C/svg%3E");
}
.bouton.bouton-action:hover::after, .formulaire .bouton:hover::after { width: 1em; opacity: 1; margin-left: .5em; }
#l-association .duo > img { grid-column: 2; grid-row: 4; align-self: end; width: 50cqw; max-width: none; height: auto; margin-right: calc(-1 * var(--off)); border-radius: 0; z-index: auto; }
@media (min-width: 690px) and (max-width: 1023px) {
  #l-association .duo { grid-template-columns: minmax(0,1fr) calc(50cqw - var(--off)); }
  #l-association .duo > img { width: 50cqw; max-width: none; }
}
/* Espace sous le dernier paragraphe : porté par le texte, pas par la section.
   L'image reste collée au bas de la section. */
@media (min-width: 690px) {
  #l-association .fin-texte > .bouton-action { margin-bottom: var(--marge-y); }
}

/* ---------- L'actu (bande sombre) ---------- */
.actu { background: linear-gradient(10deg, var(--nuit-1), var(--nuit-2)); color: var(--blanc); }
.actu h2 { color: var(--blanc); }
.grille-insta {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 32px 0;
}
.grille-insta div {
  aspect-ratio: 1; border-radius: 6px;
  background: linear-gradient(135deg, #3c3d42, #2a2b2f);
  display: grid; place-items: center; color: #888; font-size: 13px;
}
.bouton-insta {
  display: inline-flex; align-items: center; gap: 8px;
  background: #408bd1; color: var(--blanc); padding: 10px 20px; border-radius: 4px; text-decoration: none;
}
.bouton-insta:hover { color: var(--blanc); filter: brightness(1.1); }

/* ---------- Formulaire ---------- */
.formulaire { display: grid; gap: 18px; }
.formulaire label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-weight: 500; }
.formulaire label input, .formulaire label textarea { flex: 0 0 100%; }
.formulaire label span { color: var(--rouge); }
.formulaire input, .formulaire textarea {
  font: inherit; padding: 10px 12px; border: 2px solid var(--noir); border-radius: 12px; background: var(--blanc);
}
.formulaire textarea { min-height: 170px; resize: vertical; }
.formulaire .bouton { border-radius: 12px; background: var(--blanc); color: var(--noir); border-color: var(--noir); transition: background .2s, color .2s, border-color .2s; }
.formulaire .bouton:hover { background: var(--rouge); border-color: var(--rouge); color: var(--blanc); }
.formulaire input:focus, .formulaire textarea:focus { outline: none; border-color: var(--rouge); }
.formulaire .mention { font-size: 13px; margin: 0; }
.formulaire .retour { font-size: 14px; color: var(--gris); min-height: 1.5em; margin: 0; }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-block; font: 500 15px var(--police);
  background: var(--noir); color: var(--blanc);
  padding: 10px 22px; border: 2px solid var(--noir); border-radius: 5px;
  text-decoration: none; cursor: pointer; text-align: center;
}
.bouton:hover { background: var(--rouge); border-color: var(--rouge); color: var(--blanc); }
.bouton.contour { background: transparent; border-color: var(--blanc); color: var(--blanc); font-size: 20px; padding: 12px 32px; border-radius: 999px; }
.bouton.contour:hover { background: var(--blanc); color: var(--noir); }
.bouton.rose { background: var(--rose); border-color: var(--rose); font-size: 18px; border-radius: 999px; padding: 12px 30px; }
.bouton.rose:hover { background: var(--rouge); border-color: var(--rouge); }

/* ---------- Pop-up Miralh (bouton flottant) ---------- */
.miralh-declencheur {
  position: fixed; right: 20px; bottom: 20px; z-index: 30;
  font-family: var(--police-titre); font-weight: 700; font-size: 18px; letter-spacing: normal; text-transform: capitalize;
  background: var(--blanc); color: var(--noir); border: 0; border-radius: 12px; transition: background .2s, color .2s;
  padding: 14px 24px; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
/* Survol uniquement sur les écrans qui ont une souris : sur mobile, le tap ne laisse pas le bouton en rouge */
@media (hover: hover) {
  .miralh-declencheur:hover { background: var(--rouge); color: #fff; }
}
/* Mini feu d'artifice au survol : 10 traits qui partent du centre du texte */
/* Feu d'artifice au survol : une vingtaine de traits qui partent du bord gauche/haut du bouton */
.miralh-declencheur .feu { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.miralh-declencheur .feu i {
  position: absolute; width: var(--len); height: var(--th); margin-top: calc(var(--th) / -2); border-radius: 2px;
  background: linear-gradient(to right, transparent 25%, var(--c)); transform-origin: 0 50%;
  transform: rotate(var(--a)); opacity: 0;
}
.miralh-declencheur:hover .feu i { animation: feu-trait var(--dur) cubic-bezier(0,.9,.6,.8) var(--delay) both; }
@keyframes feu-trait {
  0% { opacity: 0; transform: rotate(var(--a)) translateX(0) scaleX(.2); }
  25% { opacity: 1; }
  60% { opacity: 0; transform: rotate(var(--a)) translateX(calc(var(--d) * .85)) scaleX(1); }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) scaleX(1); }
}
.miralh-declencheur { text-decoration: none; display: inline-block; }
.miralh-popup {
  position: fixed; right: 20px; bottom: 84px; z-index: 31;
  width: min(300px, calc(100vw - 40px));
  background: var(--blanc); border-radius: var(--rayon); padding: 22px;
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
  opacity: 0; transform: translateY(10px); pointer-events: none; transition: .25s;
}
.miralh-popup.ouvert { opacity: 1; transform: none; pointer-events: auto; }
.miralh-popup h3 { font-family: "MiralhFest", var(--police-titre); font-weight: 400; font-size: 26px; }
.miralh-popup p { font-size: 14px; margin: 0 0 12px; }
.miralh-popup .bouton { display: block; margin-top: 10px; }
.miralh-popup .fermer {
  position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 18px; cursor: pointer;
}

/* ---------- Page L'association ---------- */
.equipe { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.carte-membre {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center;
  background: var(--gris-clair); border-radius: var(--rayon); padding: 24px;
}
.carte-membre img { border-radius: 10px; aspect-ratio: 1; object-fit: cover; width: 100%; }
.carte-membre h6 { font-size: 16px; text-transform: uppercase; margin-bottom: 8px; }
.carte-membre ul { margin: 0; padding-left: 1.1em; }
.photo-groupe { border-radius: 10px; width: 100%; }
.encadre { background: var(--gris-clair); }

.poles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 28px 0 40px; }
.pole { perspective: 900px; height: 230px; cursor: pointer; }
.pole-int {
  position: relative; width: 100%; height: 100%;
  transition: transform .6s; transform-style: preserve-3d;
}
.pole:hover .pole-int, .pole:focus-within .pole-int, .pole.retourne .pole-int { transform: rotateY(180deg); }
.pole-face, .pole-dos {
  position: absolute; inset: 0; border-radius: var(--rayon); padding: 20px;
  display: grid; place-items: center; text-align: center; backface-visibility: hidden;
}
.pole-face { background: var(--gris-clair); border: 2px solid var(--noir); }
.pole-face h3 { font-size: 20px; margin: 0; }
.pole-dos { background: var(--rouge); color: var(--blanc); transform: rotateY(180deg); font-size: 17px; }
.pole-dos p { margin: 0 0 .6em; }
.pole button { all: unset; position: absolute; inset: 0; }
.pole button:focus-visible { outline: 3px solid var(--rose); border-radius: var(--rayon); }

/* ---------- Page Bénévoles ---------- */
.heros-photo {
  position: relative; min-height: 50vh; display: grid; place-items: center; text-align: center;
  background: #333 center/cover no-repeat; color: var(--blanc);
}
.heros-photo::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.heros-photo > * { position: relative; }
.heros-photo p { font-size: clamp(28px, 5vw, 42px); text-transform: uppercase; font-weight: 700; margin: 0 0 24px; }
.documents { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }

/* ---------- Page Miralh Festival ---------- */
.programme { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; position: relative; }
/* Affiche : bord droit fixe (collé à la colonne de droite), elle s'étend à gauche et en bas
   jusqu'à remplir la hauteur visible, sans être limitée par sa colonne. */
.programme > div { grid-column: 2; }
/* Les unités cqw viennent de la section (container), donc l'affiche suit la largeur de la page :
   marge gauche de 48px (= espace affiche/texte), bord droit au bord de sa colonne, ratio conservé. */
section:has(> .conteneur > .programme) { container-type: inline-size; }
/* Affiche : collée à droite de sa colonne, taille max = largeur de l'espace (50cqw - 72px)
   et hauteur de la fenêtre moins les marges haut/bas. Elle reste collée en haut au scroll,
   jusqu'à la fin du programme. */
.conteneur:has(> .programme) { width: 100%; padding-inline: var(--marge-x); }
.conteneur:has(> .programme) > .titre-miralh { width: min(var(--largeur), 100%); margin-inline: auto; }
.programme .affiche { position: sticky; top: calc(var(--header) + 16px); grid-column: 1; grid-row: 1; justify-self: end; align-self: start; width: min(100%, calc((100vh - 2 * var(--marge-y)) * 1191 / 1682)); height: auto; max-width: none; aspect-ratio: 1191 / 1682; border-radius: 20px; }
.creneau { margin-bottom: 16px; }
/* Titre de journée : reste collé en haut pendant le scroll de sa journée, puis est poussé par la suivante */
/* Le fond blanc du titre couvre aussi la zone au-dessus de lui (padding-top), donc le texte qui passe
   dessous disparaît des deux côtés. Le titre colle en haut de l'écran (top: 0). */
.jour { position: sticky; top: var(--header); z-index: 2; background: rgba(255,255,255,.92); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); font-weight: 700; text-transform: uppercase; color: var(--rouge); font-size: 22px; margin: 0; padding: 16px 0; }
.journee > .creneau:last-child { margin-bottom: 0; }
.creneau .heure { color: var(--gris); font-size: 22px; margin: 0; }
.creneau h3 { font-size: 24px; margin: 0; text-transform: uppercase; }
.creneau .genre { color: var(--bleu); font-size: 20px; margin: 0; font-weight: 700; text-transform: uppercase; }
.creneau ul { margin: 6px 0 0; padding-left: 1.1em; font-weight: 700; }
.creneau .buvette { color: var(--orange); font-weight: 700; }
/* Même espace entre tous les éléments d'un bloc horaire (heure, spectacle, compagnie, texte, liste...) */
.creneau > p, .creneau > h3, .creneau > ul, .creneau > .heure, .creneau > .genre { margin: 0 0 8px; }
.creneau > *:last-child { margin-bottom: 0; }
.titre-miralh { font-family: "MiralhFest", var(--police-titre); font-weight: 400; font-size: clamp(36px, 6vw, 60px); }

/* ---------- Pied de page ---------- */
/* Contact : image en haut à gauche, même logique que L'association (collée au bord de la section, 40 % / 50 %). */
/* Les ancres s'alignent sous l'en-tête fixe (hauteur --header) */
#l-association, #contact { scroll-margin-top: var(--header); }
#contact { background: var(--gris-clair); position: relative; container-type: inline-size; overflow: hidden; padding-top: 0; padding-bottom: 0; --off: calc((100cqw - min(var(--largeur), 100cqw - 2 * var(--marge-x))) / 2); }
#contact .duo { display: grid; grid-template-columns: calc(40cqw - var(--off)) minmax(0,1fr); column-gap: 24px; align-items: start; }
#contact .duo > img { grid-column: 1; grid-row: 1; width: 40cqw; max-width: none; height: auto; margin-left: calc(-1 * var(--off)); border-radius: 0; }
#contact .duo > div { grid-column: 2; grid-row: 1; padding-top: var(--marge-y); }
@media (min-width: 690px) and (max-width: 1023px) {
  #contact .duo { grid-template-columns: calc(50cqw - var(--off)) minmax(0,1fr); }
  #contact .duo > img { width: 50cqw; }
}
@media (max-width: 689px) {
  #contact { padding-top: var(--marge-y); }
  #contact .duo { display: block; }
  #contact .duo > img { display: none; }
  #contact .duo > div { padding-top: 0; }
}
.pied { background: var(--gris-clair); padding: 60px 0 30px; font-size: 14px; }
.pied .conteneur { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; align-items: start; }
.pied h4 { font-size: 16px; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied ul a { color: var(--gris); text-transform: uppercase; font-size: 12px; font-weight: 500; text-decoration: none; }
.reseaux { display: flex; gap: 10px; justify-content: center; }
.reseaux a {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(218,222,228,.5); color: var(--gris);
}
.reseaux a:hover { background: var(--blanc); color: var(--rose); }
.reseaux svg { width: 18px; height: 18px; fill: currentColor; }
.pied .droite { text-align: right; }
.copyright { text-align: center; font-size: 12px; color: var(--rose); margin-top: 40px; }

/* ---------- Tablette et mobile ---------- */
@media (max-width: 999px) {
  :root { --header: 70px; }
  .logo img { height: 60px; }
  /* En-tête épinglé avec effet verre dépoli ; marge latérale = marge haute du logo (30px) */
  .entete .conteneur { width: calc(100% - 60px); }
  /* Accueil uniquement : en-tête épinglé, transparent en haut (logo et menu blancs),
     fond blanc et logo/menu noirs dès qu'on scrolle (classe .defile posée par main.js). */
  .entete-accueil { position: fixed; inset: 0 0 auto 0; background: transparent; transition: background .3s; }
  .entete-accueil.defile { background: #fff; }
  .entete-accueil .logo img { transition: filter .3s; }
  .entete-accueil.defile .logo img { filter: brightness(0); }
  .entete-accueil .burger span { transition: background .3s; }
  .entete-accueil.defile .burger span { background: var(--noir); }
  .burger { display: block; position: relative; z-index: 2; }
  .menu {
    position: fixed; inset: 0; flex-direction: column; align-items: flex-end; justify-content: center;
    gap: 22px; padding: 40px; background: var(--gris-clair);
    transform: translateX(100%); visibility: hidden; transition: transform .3s, visibility .3s; box-shadow: 0 0 70px rgba(0,0,0,.35);
  }
  .menu.ouvert { transform: none; visibility: visible; }
  .menu a { color: var(--noir); font-size: 20px; }
  .menu a:hover, .menu a[aria-current="page"] { color: var(--rouge); }
  .menu .bouton-entete { white-space: nowrap; }
  body.menu-ouvert .miralh-declencheur, body.menu-ouvert .miralh-popup { display: none; }
  .burger.ouvert span { background: var(--noir); }
  .burger.ouvert span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .burger.ouvert span:nth-child(2) { opacity: 0; }
  .burger.ouvert span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .duo, .duo.inverse, .programme, .equipe { grid-template-columns: minmax(0,1fr); }
  .duo.inverse img { order: -1; }
  .poles { grid-template-columns: 1fr 1fr; }
  .grille-insta { grid-template-columns: repeat(3, 1fr); }
  .programme .affiche { position: static; width: 100%; height: auto; justify-self: stretch; }
  .programme > div { grid-column: auto; }
  .jour { padding: 24px 0 8px; }
  .creneau { margin-bottom: 24px; }
  .pied .conteneur { grid-template-columns: 1fr; text-align: left; }
  .reseaux { justify-content: flex-start; }
  .copyright { text-align: left; padding-inline: var(--marge-x); }
  .pied .droite { text-align: left; }
}
@media (max-width: 689px) {
  .menu { inset: 0; }
  .bande { padding-block: var(--marge-y); }
  #l-association .duo { display: block; padding: 0; }
  #l-association { padding-bottom: calc(var(--marge-y) + 63.1cqw); }
  #l-association .duo > img { position: absolute; right: 0; bottom: 0; width: 90cqw; height: auto; max-width: none; max-height: none; margin: 0; z-index: -1; }
  #l-association .duo > div { display: block; padding: 0; }
  .poles { grid-template-columns: 1fr; }
  .carte-membre { grid-template-columns: 1fr 1fr; padding: 16px; gap: 16px; }
  .grille-insta { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pole-int, .menu, .miralh-popup { transition: none; }
}

/* Association : fonds des sections */
.gris { background: var(--gris-clair); }
.encadre, .blanc { background: #fff; }
.carte-membre { background: #fff; }
/* Équipe : 3 cartes côte à côte sur grand écran */
.equipe { grid-template-columns: repeat(3, 1fr); }
.equipe-piste { display: contents; }
.carte-membre { display: flex; flex-direction: column; gap: 16px; align-items: stretch; container-type: inline-size; }
/* Nom : prénom et nom sur deux lignes dès que la carte est trop étroite pour les afficher sur une seule */
@container (max-width: 240px) { .carte-membre h6 span { display: block; } }
.carte-membre > div { display: contents; }
.carte-membre h6 { order: 0; margin: 0; text-align: left; }
.carte-membre img { order: 1; flex-shrink: 0; }
.carte-membre ul { order: 2; margin: 0; }
.points-equipe { display: none; }
@media (max-width: 1023px) {
  .equipe { display: block; overflow: hidden; width: 100vw; margin-left: calc(50% - 50vw); touch-action: pan-y; user-select: none; }
  .equipe-piste { display: flex; gap: 12px; will-change: transform; }
  .carte-membre { flex: 0 0 min(75vw, 360px); box-sizing: border-box; }
  .points-equipe { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
  .points-equipe span { width: 8px; height: 8px; border-radius: 50%; background: var(--gris); opacity: .35; transition: opacity .2s, background .2s; }
  .points-equipe span.actif { opacity: 1; background: var(--rouge); }
}

/* Champ piège anti-spam (caché aux humains) */
.piege { display: none; }

/* Bouton Miralh : sur mobile, le texte passe à « Clique encore ! » après le premier clic (même largeur) */
.t-encore { display: none; }
.miralh-declencheur .t-titre { transition: opacity .15s; }
.miralh-declencheur .t-encore { transition: opacity .3s; }
@media (max-width: 689px) {
  .miralh-declencheur { display: inline-grid; }
  .miralh-declencheur .t-titre, .miralh-declencheur .t-encore { grid-area: 1 / 1; white-space: nowrap; text-align: center; }
  .miralh-declencheur .t-encore { display: block; opacity: 0; }
  .miralh-declencheur.encore .t-titre { opacity: 0; }
  .miralh-declencheur.encore .t-encore { opacity: 1; }
  .miralh-declencheur.encore { background: var(--rouge); color: #fff; }
}

/* Pied de page en tablette : plan du site à gauche ; réseaux et festival à droite ; copyright centré */
@media (min-width: 690px) and (max-width: 1023px) {
  .pied .conteneur { grid-template-columns: 1fr 1fr; }
  .pied .conteneur > ul { grid-column: 1; grid-row: 1; }
  .reseaux { grid-column: 2; grid-row: 1; justify-content: flex-end; }
  .pied .droite { grid-column: 2; grid-row: 2; text-align: right; }
  .copyright { text-align: center; padding-inline: var(--marge-x); }
}

/* Pied de page : le copyright sous le plan du site, aligné à gauche sur la marge, partout */
.pied .conteneur { row-gap: 0; }
.copyright { grid-column: 1; grid-row: 2; text-align: left; margin: 24px 0 0; font-size: 12px; color: var(--rose); }
@media (min-width: 690px) and (max-width: 1023px) {
  .pied .conteneur { grid-template-columns: 1fr 1fr; }
  .reseaux { grid-row: 1; align-self: start; }
  .pied .droite { grid-column: 2; grid-row: 1; align-self: start; text-align: right; margin-top: 62px; }
  .copyright { grid-column: 1; grid-row: 2; }
}
@media (max-width: 689px) {
  .pied .conteneur { grid-template-columns: 1fr; row-gap: 24px; }
  .pied .conteneur > ul { order: 0; }
  .copyright { order: 4; margin-top: 0; grid-row: auto; grid-column: auto; }
  .reseaux { order: 2; }
  .pied .droite { order: 3; }
}