/* ==========================================================================
   Festiv'Lab — feuille de style unique du site
   --------------------------------------------------------------------------
    1. Polices de la charte
    2. Couleurs et réglages : c'est ici qu'on modifie la charte
    3. Bases
    4. Mise en page
    5. Textes
    6. Boutons et liens
    7. En-tête et menu
    8. Bannière d'accueil et bandeaux de page
    9. Cartes, grilles et galerie
   10. Prestations
   11. Agenda
   12. Réservation
   13. Contact
   14. À propos
   15. Bandeau d'appel et pied de page
   16. Utilitaires
   ========================================================================== */


/* 1. Polices de la charte (hébergées sur le site, licences libres : voir le dossier fonts/)
   Charte V2 (octobre 2026) : Ultra pour les titres, Nunito pour les sous-titres et informations, Comfortaa pour le
   texte (ici « FestivLab Texte » : la licence de Comfortaa demande de renommer une version modifiée, voir
   fonts/LISEZMOI.txt). Trois polices libres et gratuites, aucune licence à acheter.
   ========================================================================== */

/* Titres (Ultra) : une seule graisse, déclarée pour toutes pour éviter un faux gras */
@font-face {
  font-family: "Ultra";
  src: url("../fonts/ultra.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Sous-titres et informations (Nunito) */
@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito.woff2") format("woff2");
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

/* Texte */
@font-face {
  font-family: "FestivLab Texte";
  src: url("../fonts/festivlab-texte.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}


/* 2. Couleurs et réglages
   ========================================================================== */

:root {
  /* Charte Festiv'Lab : noir et blanc (logo, texte), bleu (texte), rose et violet */
  --noir: #000000;
  --blanc: #FFFFFF;
  --bleu: #1800AD;
  --rose: #E76366;
  --violet: #8355EB;

  /* Nuances tirées de la charte (contrastes vérifiés pour la lecture) */
  --violet-fonce: #6A3FD6;
  --violet-clair: #F2EEFD;
  --violet-moyen: #C4B2F5;  /* « en attente » dans l'espace direction (texte noir dessus) */
  --rose-clair: #FDECEC;
  --rose-pale: #F6A9AB;     /* texte rose sur fond noir ou bleu */
  --bleu-clair: #A399DE;    /* texte « bleu » sur fond noir ou bleu (textes mis en forme dans l'espace direction) */
  --rouge: #C81E1E;         /* évènement complet, erreurs */

  /* Couleurs d'usage */
  --texte: var(--noir);
  --texte-doux: #4D4B5E;
  --texte-sur-fonce: #E9E7F5;
  --bordure: #E4E1EE;
  --bordure-champ: #85819A;
  --degrade: linear-gradient(110deg, var(--rose) 0%, var(--violet) 100%);

  /* Polices : titres, sous-titres et informations, texte */
  --police-titres: "Ultra", "Rockwell Extra Bold", "Rockwell", Georgia, serif;
  --police-infos: "Nunito", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --police-texte: "FestivLab Texte", "Nunito", "Segoe UI", system-ui, sans-serif;

  /* Mesures */
  --marge: 20px;
  --largeur-max: 1160px;
  --hauteur-entete: 68px;
  --rayon: 20px;
  --ombre: 0 1px 2px rgb(0 0 0 / .06), 0 18px 40px -22px rgb(0 0 0 / .4);
}

@media (min-width: 48em) {
  :root {
    --marge: 32px;
    --hauteur-entete: 76px;
  }
}


/* 3. Bases
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--hauteur-entete) + 16px);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--blanc);
  color: var(--texte);
  font: 500 1rem/1.7 var(--police-texte);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

/* Titres en police de titre (Ultra), sous-titres en police d'information (Nunito) */
h1,
h2,
h3 {
  margin: 0;
  line-height: 1.12;
  text-wrap: balance;
  overflow-wrap: break-word;
}

h1,
h2 {
  font-family: var(--police-titres);
  font-weight: 400;
  letter-spacing: 0;
}

h1 {
  font-size: clamp(2.05rem, 1.25rem + 3.4vw, 3.7rem);
  line-height: 1.06;
}

h2 {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem);
}

h3 {
  font-family: var(--police-infos);
  font-size: 1.375rem;
  font-weight: 800;
}

p,
ul,
ol,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
}

a {
  color: var(--bleu);
  text-decoration-thickness: .08em;
  text-underline-offset: .2em;
}

a:hover {
  color: var(--violet);
}

:focus-visible {
  outline: 3px solid var(--bleu);
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

::selection {
  background: var(--rose);
  color: var(--noir);
}


/* 4. Mise en page
   ========================================================================== */

.conteneur {
  width: min(100% - 2 * var(--marge), var(--largeur-max));
  margin-inline: auto;
}

.section {
  padding-block: clamp(56px, 3.5rem + 4vw, 112px);
}

.section-lilas {
  background: var(--violet-clair);
}

.section-entete {
  display: grid;
  gap: 14px;
  max-width: 48rem;
  margin-bottom: clamp(32px, 2rem + 1.5vw, 52px);
}

.section-entete p:not(.surtitre) {
  font-size: 1.125rem;
  color: var(--texte-doux);
}

.section-entete-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 40px;
  margin-bottom: clamp(32px, 2rem + 1.5vw, 52px);
}

.section-entete-ligne .section-entete {
  margin-bottom: 0;
}


.pile {
  display: grid;
  gap: clamp(24px, 1rem + 1.5vw, 36px);
}


/* 5. Textes
   ========================================================================== */

.surtitre {
  font-family: var(--police-infos);
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bleu);
}

.chapeau {
  max-width: 42rem;
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  line-height: 1.6;
}

/* Mot en dégradé rose et violet : uniquement sur fond foncé, pour les grands titres */
.degrade {
  background: var(--degrade);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Mise en forme des textes modifiés dans l'espace direction (rubrique « Site public »), choisie dans la charte :
   mêmes noms que MISES_EN_FORME (functions/_contenu.js), vérifié par outils/tests/site.js */
.mf-souligne {
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
}

.mf-police-titres {
  font-family: var(--police-titres);
  font-weight: 400; /* Ultra n'a qu'une graisse, déjà épaisse */
}

.mf-police-infos {
  font-family: var(--police-infos);
}

.mf-police-texte {
  font-family: var(--police-texte);
}

.mf-couleur-bleu {
  color: var(--bleu);
}

.mf-couleur-violet {
  color: var(--violet-fonce);
}

/* Surligné rose : texte noir sur le rose de la charte (blanc sur rose : contraste insuffisant) */
.mf-couleur-rose {
  padding-inline: .12em;
  border-radius: .15em;
  background: var(--rose);
  color: var(--noir);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.mf-taille-petit {
  font-size: .85em;
}

.mf-taille-grand {
  font-size: 1.25em;
}

/* Bandeaux foncés (accueil, haut des pages) : bleu et violet éclaircis, pour rester lisibles */
.banniere .mf-couleur-bleu,
.bandeau-page .mf-couleur-bleu {
  color: var(--bleu-clair);
}

.banniere .mf-couleur-violet,
.bandeau-page .mf-couleur-violet {
  color: var(--violet-moyen);
}

/* Éditeur de l'espace direction : la page s'affiche dans un cadre (classe edition-site), ses textes modifiables sont
   encadrés en pointillés ; les parties qui ne s'affichent que dans certains cas sont montrées, avec une étiquette */
.edition-site [data-texte] {
  outline: 2px dashed rgb(131 85 235 / .6);
  outline-offset: 3px;
  cursor: text;
}

.edition-site [data-texte]:hover {
  outline-color: var(--violet);
}

.edition-site [data-texte]:focus {
  outline: 3px solid var(--violet);
}

.edition-site [data-texte].edition-modifie {
  outline-color: var(--rose);
}

.edition-site [data-edition-cache][hidden] {
  display: block !important;
}

.edition-site [data-edition-cache] {
  outline: 2px dotted var(--texte-doux);
  outline-offset: -2px;
}

.edition-site [data-edition-cache]::before {
  content: "Partie affichée seulement dans certains cas (après l'envoi d'un formulaire, avec des évènements ou des photos)";
  display: block;
  margin-bottom: 8px;
  padding: 4px 10px;
  background: var(--violet-clair);
  color: var(--noir);
  font-family: var(--police-infos);
  font-size: .8125rem;
  font-weight: 700;
}

.texte-long {
  display: grid;
  gap: 18px;
  max-width: 44rem;
}

.texte-long p:not(.surtitre),
.texte-long li {
  color: var(--texte-doux);
}

.texte-long ul {
  display: grid;
  gap: 6px;
  padding-left: 1.2em;
}

/* Page Mentions légales : titres plus discrets */
.texte-legal h2 {
  margin-top: 20px;
  font-size: clamp(1.45rem, 1.25rem + .8vw, 1.85rem);
}

.texte-long strong {
  color: var(--noir);
}

.note {
  font-size: .9375rem;
  color: var(--texte-doux);
}


/* 6. Boutons et liens
   ========================================================================== */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 26px;
  border: 2px solid transparent;
  border-radius: 999px;
  font: 800 1rem/1.2 var(--police-infos);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, transform .2s;
}

.bouton:hover {
  transform: translateY(-2px);
}

.bouton:active {
  transform: translateY(0);
}

.bouton svg {
  flex: none;
  width: 20px;
  height: 20px;
}

.bouton-principal {
  background: var(--violet);
  color: var(--blanc);
}

.bouton-principal:hover {
  background: var(--violet-fonce);
  color: var(--blanc);
}

.bouton-contour {
  border-color: var(--noir);
  background: transparent;
  color: var(--noir);
}

.bouton-contour:hover {
  background: var(--noir);
  color: var(--blanc);
}

.bouton-contour-clair {
  border-color: rgb(255 255 255 / .6);
  background: transparent;
  color: var(--blanc);
}

.bouton-contour-clair:hover {
  border-color: var(--blanc);
  background: var(--blanc);
  color: var(--noir);
}

.bouton-petit {
  min-height: 44px;
  padding: 8px 18px;
  font-size: .9375rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Sur téléphone, les boutons prennent toute la largeur : plus faciles à toucher */
@media (max-width: 35.99em) {
  .actions .bouton {
    flex: 1 1 100%;
  }
}

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--police-infos);
  font-weight: 800;
  color: var(--bleu);
  text-decoration: none;
}

.lien-fleche::after {
  content: "→";
  content: "→" / "";
  transition: transform .2s;
}

.lien-fleche:hover::after {
  transform: translateX(4px);
}


/* 7. En-tête et menu
   ========================================================================== */

.lien-evitement {
  position: absolute;
  top: -200px;
  left: 12px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--noir);
  color: var(--blanc);
  font-family: var(--police-infos);
  font-weight: 800;
  text-decoration: none;
}

.lien-evitement:focus {
  top: 12px;
  color: var(--blanc);
}

.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--bordure);
  background: rgb(255 255 255 / .94);
  -webkit-backdrop-filter: saturate(1.5) blur(12px);
  backdrop-filter: saturate(1.5) blur(12px);
}

/* Sur un écran très bas (téléphone à l'horizontale, fort zoom), l'en-tête ne reste pas collé en haut */
@media (max-height: 30em) {
  .entete {
    position: relative;
  }

  html {
    scroll-padding-top: 16px;
  }
}

.entete-interieur {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--hauteur-entete);
}

.logo {
  display: block;
  margin-right: auto;
  border-radius: 8px;
}

/* Fonctionne avec n'importe quel logo : il est réduit pour tenir dans l'en-tête */
.logo img {
  width: auto;
  height: 40px;
  max-width: min(150px, 40vw);
  object-fit: contain;
  object-position: left center;
}

@media (min-width: 48em) {
  .logo img {
    height: 46px;
    max-width: 220px;
  }
}

.entete-reserver {
  order: 2;
}

.navigation {
  order: 3;
}

.menu-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: var(--violet-clair);
  color: var(--noir);
  font: 800 .9375rem/1 var(--police-infos);
  cursor: pointer;
}

.menu-icone,
.menu-icone::before,
.menu-icone::after {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .25s, background-color .25s;
}

.menu-icone {
  position: relative;
}

.menu-icone::before,
.menu-icone::after {
  content: "";
  position: absolute;
  left: 0;
}

.menu-icone::before {
  top: -6px;
}

.menu-icone::after {
  top: 6px;
}

.menu-bouton[aria-expanded="true"] .menu-icone {
  background: transparent;
}

.menu-bouton[aria-expanded="true"] .menu-icone::before {
  transform: translateY(6px) rotate(45deg);
}

.menu-bouton[aria-expanded="true"] .menu-icone::after {
  transform: translateY(-6px) rotate(-45deg);
}

.menu-bouton-texte {
  display: none;
}

@media (min-width: 30em) {
  .menu-bouton-texte {
    display: inline;
  }
}

.menu {
  list-style: none;
}

.menu a {
  text-decoration: none;
}

/* Très petits écrans : le bouton « Réserver » reste accessible dans le menu */
@media (max-width: 22.49em) {
  .entete-reserver {
    display: none;
  }
}

/* Téléphone et tablette : menu déroulant */
@media (max-width: 59.99em) {
  .js .menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--hauteur-entete));
    max-height: calc(100dvh - var(--hauteur-entete));
    overflow-y: auto;
    padding: 8px var(--marge) 24px;
    border-bottom: 1px solid var(--bordure);
    background: var(--blanc);
    box-shadow: 0 30px 40px -30px rgb(0 0 0 / .45);
  }

  .js .navigation.est-ouvert .menu {
    display: grid;
  }

  .menu a {
    display: flex;
    align-items: center;
    min-height: 54px;
    border-bottom: 1px solid var(--bordure);
    color: var(--noir);
    font: 800 1.2rem/1.2 var(--police-infos);
  }

  .menu a[aria-current="page"] {
    color: var(--bleu);
  }

  .menu a[aria-current="page"]::before {
    content: "";
    width: 8px;
    height: 8px;
    margin-right: 12px;
    border-radius: 50%;
    background: var(--violet);
  }

  .menu .menu-reservation a {
    justify-content: center;
    margin-top: 20px;
    border: 0;
    border-radius: 999px;
    background: var(--violet);
    color: var(--blanc);
    font: 800 1rem/1.2 var(--police-infos);
  }

  .menu .menu-reservation a::before {
    content: none;
  }

  /* Sans JavaScript : les liens s'affichent sous le logo */
  .no-js .entete-interieur {
    flex-wrap: wrap;
    padding-block: 10px;
  }

  .no-js .navigation {
    order: 4;
    flex-basis: 100%;
  }

  .no-js .menu-bouton {
    display: none;
  }

  .no-js .menu {
    display: flex;
    flex-wrap: wrap;
    gap: 0 18px;
  }

  .no-js .menu a {
    min-height: 44px;
    border: 0;
    font-size: 1rem;
  }

  .no-js .menu .menu-reservation a {
    margin-top: 0;
    padding: 0 18px;
  }
}

/* Ordinateur : menu en ligne */
@media (min-width: 60em) {
  .menu-bouton,
  .entete-reserver {
    display: none;
  }

  .navigation {
    order: 1;
  }

  .menu {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .menu a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    color: var(--noir);
    font-family: var(--police-infos);
    font-size: .975rem;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color .2s, color .2s;
  }

  .menu a:hover {
    background: var(--violet-clair);
    color: var(--noir);
  }

  .menu a[aria-current="page"] {
    background: var(--violet-clair);
    color: var(--bleu);
  }

  .menu .menu-reservation {
    margin-left: 10px;
  }

  .menu .menu-reservation a {
    min-height: 48px;
    padding: 0 24px;
    background: var(--violet);
    color: var(--blanc);
    font-weight: 800;
  }

  .menu .menu-reservation a:hover,
  .menu .menu-reservation a[aria-current="page"] {
    background: var(--violet-fonce);
    color: var(--blanc);
  }
}


/* Écrans d'ordinateur étroits : onglets un peu plus serrés (7 onglets, l'espace direction et « Réserver ») */
@media (min-width: 60em) and (max-width: 69.99em) {
  .menu {
    gap: 0;
  }

  .menu a {
    padding: 0 8px;
  }
}

/* Onglet « Espace direction » */
.menu-direction svg {
  flex: none;
  width: 20px;
  height: 20px;
}

@media (max-width: 59.99em) {
  .menu .menu-direction a {
    gap: 10px;
    color: var(--texte-doux);
    font: 800 1rem/1.2 var(--police-infos);
  }
}

@media (min-width: 60em) {
  .menu .menu-direction a {
    justify-content: center;
    width: 44px;
    padding: 0;
    border-radius: 50%;
  }

  .menu-direction-texte {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}


/* 8. Bannière d'accueil et bandeaux de page
   ========================================================================== */

/* Ruban de l'accueil : les occasions que nous animons, sur une bande rose juste sous la bannière
   (il glisse quand on fait défiler la page) */
.ruban {
  overflow: hidden;
  overflow: clip; /* coupe les bouts de la bande sans créer de zone de défilement (sinon le ruban ne suit pas la page) */
  background: var(--rose);
  pointer-events: none;
}

.ruban-texte {
  display: flex;
  align-items: center;
  gap: 26px;
  width: max-content;
  margin-left: -40px;
  padding: 16px 0 14px;
  color: var(--noir);
  font: 400 clamp(1.1rem, .95rem + .8vw, 1.55rem)/1 var(--police-titres);
  white-space: nowrap;
}

/* Petite étoile noire entre les mots */
.ruban-etoile {
  flex: none;
  width: .7em;
  height: .7em;
  background: var(--noir);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

@keyframes ruban-defile {
  from {
    translate: 0 0;
  }

  to {
    translate: -22% 0;
  }
}

/* Le ruban avance au rythme du défilement de la page (jamais tout seul), si le navigateur le permet */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .ruban-texte {
      animation: ruban-defile linear both;
      animation-timeline: view();
    }
  }
}

.banniere {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--noir);
  color: var(--blanc);
}

.banniere-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Voile noir sur la photo, avec une touche de violet et de rose : garde le texte lisible quelle que soit l'image */
.banniere::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 50% at 90% 0%, rgb(131 85 235 / .4), transparent 70%),
    radial-gradient(50% 40% at 0% 100%, rgb(231 99 102 / .25), transparent 70%),
    rgb(0 0 0 / .72);
}

@media (min-width: 48em) {
  .banniere::after {
    background:
      radial-gradient(45% 80% at 90% 10%, rgb(131 85 235 / .4), transparent 70%),
      radial-gradient(35% 60% at 55% 110%, rgb(231 99 102 / .25), transparent 70%),
      linear-gradient(90deg, rgb(0 0 0 / .9) 0%, rgb(0 0 0 / .72) 55%, rgb(0 0 0 / .35) 100%);
  }
}

.banniere-contenu {
  display: grid;
  justify-items: start;
  gap: 20px;
  padding-block: clamp(96px, 5rem + 6vw, 168px) clamp(72px, 4rem + 5vw, 136px);
}

.banniere h1 {
  max-width: 15ch;
}

.banniere .surtitre,
.bandeau-page .surtitre {
  color: var(--rose-pale);
}

.banniere .chapeau,
.bandeau-page .chapeau {
  color: var(--texte-sur-fonce);
}

.banniere .actions {
  margin-top: 12px;
}

/* Bandeau des pages intérieures : bleu de la charte, reflets violet et rose */
.bandeau-page {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(40% 100% at 94% 0%, rgb(131 85 235 / .7), transparent 70%),
    radial-gradient(32% 90% at 72% 115%, rgb(231 99 102 / .45), transparent 70%),
    var(--bleu);
  color: var(--blanc);
}

.bandeau-page-contenu {
  display: grid;
  justify-items: start;
  gap: 16px;
  padding-block: clamp(80px, 4.5rem + 4vw, 136px) clamp(52px, 3rem + 3vw, 92px);
}

.bandeau-page h1 {
  max-width: 20ch;
}

.banniere .chapeau a,
.bandeau-page .chapeau a,
.bandeau-appel p a {
  color: var(--blanc);
}

.banniere .chapeau a:hover,
.bandeau-page .chapeau a:hover,
.bandeau-appel p a:hover {
  color: var(--rose-pale);
}

/* Sur fond foncé, le repère de focus passe en rose clair pour rester visible */
.banniere :focus-visible,
.bandeau-page :focus-visible,
.bandeau-appel :focus-visible,
.encadre-lab :focus-visible {
  outline-color: var(--rose-pale);
}


/* 9. Cartes, grilles et galerie
   ========================================================================== */

.grille {
  display: grid;
  gap: 20px;
}

@media (min-width: 40em) {
  .grille-2,
  .grille-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 56em) {
  .grille-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .grille-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.carte {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: clamp(24px, 1.2rem + 1vw, 32px);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--blanc);
}

.section-lilas .carte {
  border-color: transparent;
}

.carte p {
  color: var(--texte-doux);
}

.carte .lien-fleche {
  margin-top: 6px;
}

.carte-icone {
  display: grid;
  flex: none;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 6px;
  border-radius: 16px;
}

.carte-icone svg {
  width: 28px;
  height: 28px;
}

/* Pastilles d'icônes aux couleurs de la charte */
.icone-violet {
  background: var(--violet);
  color: var(--blanc);
}

.icone-rose {
  background: var(--rose);
  color: var(--noir);
}

.icone-bleu {
  background: var(--bleu);
  color: var(--blanc);
}

.icone-noir {
  background: var(--noir);
  color: var(--rose);
}

/* Points forts, sans cadre */
.point {
  display: grid;
  align-content: start;
  gap: 10px;
}

.point p {
  color: var(--texte-doux);
}

.point .carte-icone {
  width: 48px;
  height: 48px;
  margin-bottom: 4px;
  border-radius: 14px;
}

.point .carte-icone svg {
  width: 24px;
  height: 24px;
}

/* Galerie photos (accueil et page Galerie) : rangées de même hauteur qui remplissent la largeur, chaque photo
   dans un cadre à ses proportions (classe .format-… choisie par le site, functions/_contenu.js) : toujours entière */
.galerie {
  --rangee: 13rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
}

@media (min-width: 48em) {
  .galerie {
    --rangee: 15rem;
    gap: 16px;
  }
}

/* Dernière rangée : les photos gardent leur taille au lieu de s'étirer sur toute la largeur */
.galerie::after {
  content: "";
  flex: 1000 1 0;
}

.galerie figure {
  flex: var(--format, 1.3333) 1 calc(var(--format, 1.3333) * var(--rangee));
  min-width: 0;
  aspect-ratio: var(--format, 1.3333);
  overflow: hidden;
  border-radius: 16px;
  background: var(--violet-clair);
}

.galerie img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Proportions des cadres (largeur / hauteur) : même liste que FORMATS_GALERIE dans functions/_contenu.js */
.format-1-2 { --format: .5; }
.format-9-16 { --format: .5625; }
.format-3-5 { --format: .6; }
.format-2-3 { --format: .6667; }
.format-a4 { --format: .7071; }
.format-3-4 { --format: .75; }
.format-4-5 { --format: .8; }
.format-9-10 { --format: .9; }
.format-1-1 { --format: 1; }
.format-10-9 { --format: 1.1111; }
.format-5-4 { --format: 1.25; }
.format-4-3 { --format: 1.3333; }
.format-a4-paysage { --format: 1.4143; }
.format-3-2 { --format: 1.5; }
.format-16-10 { --format: 1.6; }
.format-16-9 { --format: 1.7778; }
.format-40-21 { --format: 1.9048; }
.format-2-1 { --format: 2; }
.format-21-9 { --format: 2.3333; }
.format-5-2 { --format: 2.5; }
.format-3-1 { --format: 3; }


/* 10. Prestations
   ========================================================================== */

.liste-prestations {
  display: grid;
  gap: 24px;
}

.prestation {
  display: grid;
  gap: 24px 56px;
  padding: clamp(24px, 1rem + 3vw, 56px);
  border: 1px solid var(--bordure);
  border-radius: 28px;
  background: var(--blanc);
  scroll-margin-top: calc(var(--hauteur-entete) + 20px);
}

@media (min-width: 56em) {
  .prestation {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: start;
  }
}

.prestation-texte {
  display: grid;
  align-content: start;
  gap: 16px;
}

.prestation-titre {
  display: flex;
  align-items: center;
  gap: 16px;
}

.prestation-titre .carte-icone {
  margin: 0;
}

/* Titres longs : ils passent à la ligne au lieu de déborder (espacement du texte agrandi) */
.prestation-titre h2 {
  min-width: 0;
}

/* Téléphone : l'icône au-dessus du titre, qui garde toute la largeur (police des titres assez large) */
@media (max-width: 35.99em) {
  .prestation-titre {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

.prestation h2 {
  font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.25rem);
}

.prestation-intro {
  font-size: 1.125rem;
  color: var(--texte-doux);
}

.prestation-ideal {
  color: var(--texte-doux);
}

.prestation-ideal strong {
  color: var(--noir);
}

.prestation-details {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 22px;
  padding: clamp(22px, 1rem + 1.5vw, 32px);
  border-radius: 22px;
  background: var(--violet-clair);
}

.liste-coches {
  display: grid;
  gap: 12px;
  list-style: none;
}

.liste-coches li {
  position: relative;
  padding-left: 34px;
}

.liste-coches li::before {
  content: "";
  position: absolute;
  top: .2em;
  left: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4 4 9-9'/%3E%3C/svg%3E") center / 13px no-repeat;
}


/* 11. Agenda
   ========================================================================== */

.liste-billets {
  display: grid;
  gap: 20px;
}

@media (min-width: 56em) {
  .liste-billets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Un évènement = un billet, avec son talon daté et ses encoches */
@media (min-width: 64em) {
  .liste-billets-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.billet {
  --talon: 92px;
  --encoche: 10px;
  display: grid;
  grid-template-columns: var(--talon) minmax(0, 1fr);
  min-height: 128px;
  overflow: hidden;
  border-radius: 18px;
  background: var(--fond-billet, var(--blanc));
  -webkit-mask:
    radial-gradient(circle var(--encoche) at var(--talon) 0, #0000 97%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--encoche) at var(--talon) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
  mask:
    radial-gradient(circle var(--encoche) at var(--talon) 0, #0000 97%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--encoche) at var(--talon) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
}

@media (min-width: 30em) {
  .billet {
    --talon: 104px;
  }
}

/* Billet avec l'affiche de l'évènement, entre la date et les informations */
.billet-avec-affiche {
  grid-template-columns: var(--talon) 92px minmax(0, 1fr);
}

.billet-affiche {
  display: block;
  padding: 12px 0 12px 12px;
}

.billet-affiche img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 240px;
  object-fit: contain;
  object-position: top;
  border-radius: 8px;
}

.billet-affiche:focus-visible {
  outline: 3px solid var(--bleu);
  outline-offset: -3px;
}

@media (min-width: 48em) {
  .billet-avec-affiche {
    grid-template-columns: var(--talon) 150px minmax(0, 1fr);
  }

  .billet-affiche {
    padding: 14px 0 14px 16px;
  }
}

/* Sur fond blanc, les billets passent en violet clair pour rester visibles */
.section:not(.section-lilas) {
  --fond-billet: var(--violet-clair);
}

.billet-talon {
  display: grid;
  place-content: center;
  gap: 2px;
  padding: 18px 6px;
  border-right: 2px dashed rgb(255 255 255 / .45);
  background: var(--violet);
  color: var(--blanc);
  font-family: var(--police-infos);
  text-align: center;
}

.billet-jour {
  font: 400 2.4rem/1 var(--police-titres);
}

.billet-mois {
  font-size: .8125rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.billet-annee {
  font-size: .75rem;
  font-weight: 800;
}

.billet-infos {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 6px;
  padding: 20px clamp(18px, 1rem + 1vw, 28px);
}

.billet-titre {
  font-size: 1.3rem;
}

.billet-quand {
  font-family: var(--police-infos);
  font-size: .975rem;
  font-weight: 800;
}

.billet-lieu,
.billet-description {
  font-size: .975rem;
  color: var(--texte-doux);
}

.billet-prix {
  font-family: var(--police-infos);
  font-size: .975rem;
  font-weight: 800;
}

.billet .lien-fleche {
  margin-top: 4px;
  font-size: .975rem;
}

.billet-passe .billet-talon {
  border-right-color: rgb(0 0 0 / .2);
  background: #E6E4EE;
  color: var(--texte-doux);
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--police-infos);
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.badge-aujourdhui {
  background: var(--rose);
  color: var(--noir);
}

.badge-complet {
  background: var(--rouge);
  color: var(--blanc);
}

/* Évènement complet : talon rouge */
.billet-complet .billet-talon {
  background: var(--rouge);
  color: var(--blanc);
}

.agenda-vide {
  display: grid;
  justify-items: start;
  gap: 14px;
  max-width: 44rem;
  padding: clamp(28px, 1.2rem + 2vw, 44px);
  border: 2px dashed #CFC4F2;
  border-radius: 24px;
  background: var(--blanc);
}

/* Agenda : le message « aucun évènement » garde sa place, invisible, pendant le chargement (pas de saut de page) */
.agenda-vide.est-en-attente {
  visibility: hidden;
}

.no-js .agenda-vide {
  display: none;
}

.agenda-vide h3 {
  font-size: 1.5rem;
}

.agenda-vide p {
  color: var(--texte-doux);
}


/* 12. Réservation
   ========================================================================== */

/* Les 4 étapes, numérotées automatiquement */
.etapes {
  display: grid;
  gap: 20px;
  list-style: none;
  counter-reset: etape;
}

@media (min-width: 40em) {
  .etapes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .etapes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.etape {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 28px 24px;
  border-radius: var(--rayon);
  background: var(--violet-clair);
  counter-increment: etape;
}

.etape::before {
  content: counter(etape);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: var(--noir);
  color: var(--blanc);
  font: 400 1.3rem/1 var(--police-titres);
}

.etape p {
  color: var(--texte-doux);
}

/* Formulaire de demande, aligné sur le titre de la section */
.assistant {
  display: grid;
  gap: 24px;
  max-width: 48rem;
}

.formulaire {
  display: grid;
  gap: 20px;
  padding: clamp(22px, 1rem + 2vw, 40px);
  border-radius: 24px;
  background: var(--blanc);
}

.formulaire h3 {
  font-size: 1.5rem;
}

.champs-2 {
  display: grid;
  gap: 20px;
}

@media (min-width: 36em) {
  .champs-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.champ {
  display: grid;
  align-content: start;
  gap: 8px;
}

.champ label {
  font-family: var(--police-infos);
  font-weight: 800;
}

.facultatif {
  font-family: var(--police-texte);
  font-weight: 500;
  color: var(--texte-doux);
}

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1.5px solid var(--bordure-champ);
  border-radius: 12px;
  background-color: var(--blanc);
  color: var(--noir);
  font: 700 1rem/1.4 var(--police-infos);
}

.champ input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
}

.champ input::-webkit-date-and-time-value {
  text-align: left;
}

.champ textarea {
  min-height: 120px;
  resize: vertical;
}

.champ select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 44px;
  background: var(--blanc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center / 18px no-repeat;
}

.champ input::placeholder,
.champ textarea::placeholder {
  color: #6E6B80;
  font-weight: 600;
  opacity: 1;
}

.champ [aria-invalid="true"] {
  border-color: var(--rouge);
  box-shadow: 0 0 0 1px var(--rouge);
}

/* Champ piège pour les robots : invisible pour les visiteurs */
.champ-piege {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.envoi {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.envoi .bouton {
  width: 100%;
}

/* Adresse postale en quatre cases (js/adresse.js) : numéro et rue, puis code postal et ville, sur deux lignes */
.cases-adresse {
  display: grid;
  grid-template-columns: minmax(5.5rem, 1fr) minmax(0, 3fr);
  gap: 16px;
}

.groupe-adresse .note {
  margin: 0 0 10px;
}

.cases-adresse + .note {
  margin: 10px 0 0;
}

.champ-rue {
  position: relative;
}

/* Adresses proposées : liste sous la case « rue », grandes lignes faciles à toucher */
.propositions-adresse {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 18rem;
  margin: 4px 0 0;
  padding: 4px;
  overflow-y: auto;
  list-style: none;
  border: 1.5px solid var(--bordure-champ);
  border-radius: 12px;
  background: var(--blanc);
  box-shadow: var(--ombre);
}

.propositions-adresse[hidden] {
  display: none;
}

.propositions-adresse [role="option"] {
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--noir);
  font: 700 1rem/1.4 var(--police-infos);
  cursor: pointer;
}

.propositions-adresse [role="option"]:hover,
.propositions-adresse .est-active {
  background: var(--violet-clair);
  outline: 2px solid var(--violet);
  outline-offset: -2px;
}

@media (min-width: 36em) {
  .cases-adresse {
    grid-template-columns: minmax(6.5rem, 1fr) minmax(0, 4fr);
  }
}

/* Cases à cocher (formulaire d'adhésion) : grandes zones cliquables, cochées en violet */
.groupe-cases {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.groupe-cases legend {
  margin-bottom: 10px;
  padding: 0;
  font-family: var(--police-infos);
  font-weight: 800;
}

.cases {
  display: grid;
  gap: 10px;
}

@media (min-width: 36em) {
  .cases {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.case {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 12px 14px;
  border: 1.5px solid var(--bordure-champ);
  border-radius: 12px;
  background: var(--blanc);
  font: 700 1rem/1.3 var(--police-infos);
  cursor: pointer;
}

.case input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--violet);
}

.case:has(input:checked) {
  border-color: var(--violet);
  background: var(--violet-clair);
}

.case input:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 2px;
}

/* Une seule case par ligne (droit à l'image) */
@media (min-width: 36em) {
  .cases.cases-1 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.demande-statut {
  min-height: 1.5em;
  font-family: var(--police-infos);
  font-weight: 800;
}

/* Erreur affichée sous un champ, reliée à lui par aria-describedby */
.champ-erreur,
.note.est-erreur {
  font-family: var(--police-infos);
  font-weight: 800;
  color: var(--rouge);
}

.champ-erreur {
  font-size: .9375rem;
}

/* Bouton pendant un envoi : reste atteignable au clavier, mais inactif */
.bouton[aria-disabled="true"] {
  opacity: .6;
  cursor: progress;
}

.demande-statut.est-erreur {
  color: var(--rouge);
}

.demande-envoyee {
  display: grid;
  justify-items: start;
  gap: 14px;
  padding: clamp(24px, 1.2rem + 2vw, 44px);
  border-radius: 24px;
  background: var(--blanc);
}

.demande-envoyee p {
  max-width: 40rem;
  color: var(--texte-doux);
}

.champ input:focus-visible,
.champ select:focus-visible,
.champ textarea:focus-visible {
  border-color: var(--violet);
  outline: 3px solid rgb(131 85 235 / .35);
  outline-offset: 1px;
}

/* Questions fréquentes */
.faq {
  display: grid;
  gap: 12px;
  max-width: 52rem;
}

.faq details {
  border: 1px solid var(--bordure);
  border-radius: 16px;
  background: var(--blanc);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  list-style: none;
  font: 800 1.125rem/1.35 var(--police-infos);
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  content: "+" / "";
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--violet-clair);
  color: var(--bleu);
  font: 900 1.35rem/1 var(--police-infos);
  transition: transform .2s;
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq details > p {
  padding: 0 22px 22px;
  color: var(--texte-doux);
}


/* Page de connexion à l'espace direction */
.connexion {
  max-width: 28rem;
  margin-inline: auto;
}

.connexion .bouton {
  width: 100%;
}

.connexion-message {
  padding: 12px 16px;
  border-radius: 12px;
  font-family: var(--police-infos);
  font-weight: 700;
}

.connexion-message.est-erreur {
  background: var(--rose-clair);
  color: var(--rouge);
}

.connexion-message.est-info {
  background: var(--violet-clair);
  color: var(--noir);
}

/* Mot de passe avec son bouton « Afficher » (ajouté par js/connexion.js) */
.champ-secret {
  position: relative;
}

.champ .champ-secret input {
  padding-right: 6.75rem;
}

.bouton-afficher {
  position: absolute;
  top: 50%;
  right: 8px;
  min-height: 36px;
  padding: 6px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--violet-clair);
  color: var(--noir);
  font: 800 .875rem/1 var(--police-infos);
  cursor: pointer;
  transform: translateY(-50%);
  -webkit-tap-highlight-color: transparent;
}

.bouton-afficher:hover {
  background: var(--bordure);
}

.bouton-afficher:focus-visible {
  outline: 3px solid var(--bleu);
  outline-offset: 2px;
}


/* 13. Contact
   ========================================================================== */

.grille-contact {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 20px;
}

.carte-contact {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: clamp(24px, 1.2rem + 1vw, 32px);
  border: 1px solid var(--bordure);
  border-radius: 24px;
  background: var(--blanc);
  color: var(--noir);
  text-decoration: none;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}

.carte-contact:hover {
  border-color: transparent;
  box-shadow: var(--ombre);
  color: var(--noir);
  transform: translateY(-3px);
}

.carte-contact .carte-icone {
  margin-bottom: 10px;
}

.carte-contact-titre {
  font: 400 1.35rem/1.2 var(--police-titres);
}

.carte-contact-valeur {
  font-size: 1.125rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.carte-contact-action {
  margin-top: 10px;
  font-family: var(--police-infos);
  font-weight: 800;
  color: var(--bleu);
}

.carte-contact-action::after {
  content: " →";
  content: " →" / "";
}

.zones {
  display: grid;
  gap: 20px;
}

@media (min-width: 48em) {
  .zones {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.zone {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: clamp(24px, 1.2rem + 1vw, 32px);
  border-radius: 24px;
  background: var(--blanc);
}

.zone h3 {
  display: flex;
  align-items: center;
  gap: 12px;
}

.code-dep {
  display: inline-grid;
  place-items: center;
  min-width: 46px;
  height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--noir);
  color: var(--blanc);
  font: 400 .95rem/1 var(--police-titres);
  letter-spacing: 0;
}

.liste-villes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}

.liste-villes li {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--violet-clair);
  font-family: var(--police-infos);
  font-size: .95rem;
  font-weight: 700;
}


/* 14. À propos
   ========================================================================== */

.deux-colonnes {
  display: grid;
  align-items: center;
  gap: 40px 72px;
}

@media (min-width: 56em) {
  .deux-colonnes {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }
}

/* Encadré « Imaginer, organiser, animer » */
.encadre-lab {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 10px;
  padding: clamp(28px, 1.2rem + 2vw, 44px) clamp(24px, 1rem + 2vw, 40px);
  border-radius: 28px;
  background:
    radial-gradient(60% 80% at 100% 0%, rgb(131 85 235 / .6), transparent 70%),
    radial-gradient(50% 70% at 0% 100%, rgb(231 99 102 / .4), transparent 70%),
    var(--noir);
  color: var(--blanc);
}

.encadre-lab .surtitre {
  margin-bottom: 6px;
  color: var(--rose-pale);
}

.formule {
  display: grid;
  gap: 4px;
  list-style: none;
}

.formule li {
  display: flex;
  align-items: center;
  gap: 16px;
  font: 400 clamp(1.8rem, 1.3rem + 2.2vw, 2.7rem)/1.15 var(--police-titres);
}

.formule li::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--rose);
}

.formule li:nth-child(2)::before {
  background: var(--violet);
}

.formule li:nth-child(3)::before {
  background: var(--blanc);
}

.encadre-lab p:not(.surtitre) {
  margin-top: 12px;
  color: var(--texte-sur-fonce);
}


/* 15. Bandeau d'appel et pied de page
   ========================================================================== */

.bandeau-appel {
  background:
    radial-gradient(45% 150% at 100% 0%, rgb(131 85 235 / .7), transparent 70%),
    radial-gradient(35% 130% at 0% 100%, rgb(231 99 102 / .4), transparent 70%),
    var(--bleu);
  color: var(--blanc);
}

.bandeau-appel-contenu {
  display: grid;
  align-items: center;
  gap: 28px 56px;
  padding-block: clamp(56px, 3.5rem + 3vw, 100px);
}

@media (min-width: 56em) {
  .bandeau-appel-contenu {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.bandeau-appel p {
  max-width: 38rem;
  margin-top: 12px;
  font-size: 1.125rem;
  color: var(--texte-sur-fonce);
}

.pied {
  background: var(--noir);
  color: #CFCDD9;
}

.pied a {
  color: var(--blanc);
  text-decoration: none;
}

.pied a:hover {
  color: var(--rose-pale);
  text-decoration: underline;
}

.pied :focus-visible {
  outline-color: var(--rose-pale);
}

.pied-grille {
  display: grid;
  gap: 40px;
  padding-block: 64px 44px;
}

@media (min-width: 48em) {
  .pied-grille {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  }
}

.pied-marque {
  display: grid;
  align-content: start;
  gap: 14px;
  max-width: 24rem;
}

/* Logo blanc de la charte (version pour fond noir) */
.pied-logo img {
  width: 220px;
  height: auto;
}

.pied-titre {
  margin-bottom: 16px;
  font: 900 .8125rem/1.2 var(--police-infos);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rose-pale);
}

.pied ul {
  display: grid;
  gap: 10px;
  list-style: none;
}

.pied-bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 22px 30px;
  border-top: 1px solid rgb(255 255 255 / .1);
  font-size: .9rem;
}


/* 16. Utilitaires
   ========================================================================== */

/* Texte lu par les lecteurs d'écran mais invisible à l'écran */
.visuellement-cache {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Empêche un retour à la ligne au milieu d'un nom (ex. « Bas-Rhin ») */
.insecable {
  white-space: nowrap;
}

/* Surligne les informations à compléter (page Mentions légales) */
.a-completer {
  padding: 0 .35em;
  border-radius: 4px;
  background: var(--rose-clair);
  color: var(--noir);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

@media (prefers-reduced-motion: reduce) {
  .bouton,
  .carte-contact,
  .lien-fleche::after,
  .faq summary::after,
  .menu-icone,
  .menu-icone::before,
  .menu-icone::after {
    transition: none;
  }

  .bouton:hover,
  .carte-contact:hover {
    transform: none;
  }
}

/* Mode contraste élevé de Windows */
@media (forced-colors: active) {
  .degrade {
    background: none;
    color: CanvasText;
  }

  .billet {
    border: 1px solid CanvasText;
    -webkit-mask: none;
    mask: none;
  }

  /* Bouton Menu : ses barres sont des fonds, invisibles dans ce mode sans ces règles */
  .menu-bouton {
    border: 2px solid ButtonText;
  }

  .menu-icone,
  .menu-icone::before,
  .menu-icone::after {
    forced-color-adjust: none;
    background: ButtonText;
  }

  /* Étoiles du ruban : dessinées par un fond, gardées visibles */
  .ruban-etoile {
    forced-color-adjust: none;
    background: CanvasText;
  }

  /* Logo foncé : lisible même avec un thème à fond noir */
  .logo img {
    forced-color-adjust: none;
    border-radius: 6px;
    background: #FFFFFF;
  }
}

/* Page Galerie : message « les photos arrivent bientôt » affiché aussi sans JavaScript */
.no-js .agenda-vide.galerie-vide {
  display: grid;
}


/* Tarifs de la cotisation (page Adhésion) */
.carte-tarif h3 {
  color: var(--texte-doux);
}

.tarif-prix {
  font: 400 clamp(2rem, 1.6rem + 1.5vw, 2.6rem)/1.1 var(--police-titres);
  color: var(--noir);
}

.carte .tarif-prix {
  color: var(--noir);
}

.tarif-periode {
  font: 800 1rem/1.3 var(--police-infos);
  color: var(--texte-doux);
}

.tarifs-note {
  margin-top: 20px;
}

/* Serveur Discord (page Adhésion) */
.adhesion-discord {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 28px;
}

.adhesion-discord p {
  margin: 0;
  max-width: 40rem;
}

/* Cotisation et impôts (page Adhésion) */
.adhesion-impots {
  margin-top: 24px;
  max-width: 48rem;
}

/* Page Don : bloc « Donner en ligne » (bouton vers la collecte, ou invitation à écrire) */
.don-en-ligne,
.don-bientot {
  max-width: 40rem;
}

.don-en-ligne .actions,
.don-bientot .actions {
  margin-top: 20px;
}

/* « Être prévenu des prochains concerts » (page Agenda) et page Désinscription */
.note-nouvelles {
  max-width: 48rem;
  margin-top: 16px;
}


/* Accessibilité : bouton en bas à gauche et réglages d'affichage (js/main.js, classes acc-… sur <html>)
   ========================================================================== */

.accessibilite {
  display: none;
}

.js .accessibilite {
  display: block;
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 60;
}

.accessibilite-bouton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 16px 0 12px;
  border: 2px solid var(--blanc);
  border-radius: 999px;
  background: var(--bleu);
  color: var(--blanc);
  font: 800 .95rem/1 var(--police-infos);
  box-shadow: 0 6px 20px -6px rgb(0 0 0 / .45);
  cursor: pointer;
}

.accessibilite-bouton svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.accessibilite-bouton svg circle {
  fill: currentColor;
  stroke: none;
}

.accessibilite-bouton:focus-visible {
  outline: 3px solid var(--noir);
  outline-offset: 2px;
}

/* Sur téléphone, seulement l'icône (le texte reste lu par les lecteurs d'écran) */
@media (max-width: 29.99em) {
  .accessibilite-bouton {
    padding: 0 11px;
  }

  .accessibilite-bouton-texte {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.accessibilite-panneau {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  display: grid;
  gap: 14px;
  width: min(22rem, calc(100vw - 32px));
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  padding: 20px;
  border: 2px solid var(--noir);
  border-radius: 18px;
  background: var(--blanc);
  color: var(--noir);
  box-shadow: var(--ombre);
}

.accessibilite-panneau[hidden] {
  display: none;
}

.accessibilite-panneau h2 {
  margin: 0;
  font-size: 1.5rem;
}

.accessibilite-groupe {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.accessibilite-groupe legend {
  margin-bottom: 8px;
  font: 800 1rem/1.3 var(--police-infos);
}

.accessibilite-groupe .case {
  min-height: 44px;
  padding: 8px 12px;
}

.accessibilite-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.accessibilite-note {
  margin: 0;
  font-size: .9rem;
}

.pied-bas-liens {
  margin: 0;
}

/* Taille du texte : tout le site est en rem, il suit la taille de base */
html.acc-texte-grand {
  font-size: 118.75%;
}

html.acc-texte-tres-grand {
  font-size: 137.5%;
}

/* Contraste renforcé : texte noir sur fond blanc, couleurs foncées, bordures marquées */
html.acc-contraste {
  --texte-doux: #000000;
  --texte-sur-fonce: #FFFFFF;
  --bordure: #000000;
  --bordure-champ: #000000;
  --violet: #3E1A9E;
  --violet-fonce: #2A0F73;
  --violet-clair: #FFFFFF;
  --violet-moyen: #FFFFFF;
  --rose-clair: #FFFFFF;
  --rose-pale: #FFFFFF;
  --rose: #FFD9DA;
  --degrade: var(--bleu);
}

html.acc-contraste .carte,
html.acc-contraste .case,
html.acc-contraste .formulaire,
html.acc-contraste .faq details {
  border: 2px solid #000000;
}

html.acc-contraste .section-lilas {
  border-block: 2px solid #000000;
}

html.acc-contraste .note {
  color: #000000;
}

/* Police simple et texte espacé (aide aussi en cas de dyslexie) */
html.acc-police {
  --police-titres: Verdana, Tahoma, "Segoe UI", Arial, sans-serif;
  --police-infos: Verdana, Tahoma, "Segoe UI", Arial, sans-serif;
  --police-texte: Verdana, Tahoma, "Segoe UI", Arial, sans-serif;
}

html.acc-police body {
  letter-spacing: .03em;
  word-spacing: .12em;
  line-height: 1.9;
}

html.acc-police h1,
html.acc-police h2,
html.acc-police h3 {
  font-weight: 700;
  letter-spacing: 0;
}

/* Liens soulignés (les boutons gardent leur forme) */
html.acc-liens a:not(.bouton):not(.logo) {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Plus rien ne bouge */
html.acc-calme,
html.acc-calme *,
html.acc-calme *::before,
html.acc-calme *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* Le bouton « Accessibilité » ne cache jamais le bas du pied de page */
.js .pied-bas {
  padding-bottom: 84px;
}

/* Page « Payer ma cotisation » : montant à régler, bien visible */
.payer-montant {
  margin: 4px 0 20px;
  font-family: var(--police-infos);
  font-size: 2rem;
  font-weight: 800;
}

/* Agenda : billetterie en ligne (bouton « Réserver mes billets », places restantes) */
.billet-places {
  font-family: var(--police-infos);
  font-weight: 800;
  color: var(--rouge);
}

.bouton-billets {
  margin-top: 12px;
  align-self: flex-start;
}

/* Page « Billets » : un tarif par ligne, nombre de billets à droite, total */
.tarifs-billets {
  display: grid;
  gap: 12px;
  margin: 0 0 16px;
}

.tarif-billet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6rem;
  align-items: center;
  gap: 12px;
}

.tarif-billet input {
  width: 100%;
}

.billets-total {
  font-family: var(--police-infos);
  font-size: 1.25rem;
  font-weight: 800;
}

/* Conditions générales de vente : articles numérotés */
.cgv h2 {
  margin-top: 32px;
}