/* ==========================================================================
   Festiv'Lab — feuille de style unique du site
   --------------------------------------------------------------------------
    1. Police des titres
    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. Police des titres (hébergée sur le site, licence libre SIL OFL)
   ========================================================================== */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}


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

:root {
  /* Charte Festiv'Lab */
  --nuit: #1E1238;
  --nuit-profond: #150C29;
  --fuchsia: #DC0077;
  --fuchsia-fonce: #B8005F;
  --orange: #FF6B1A;
  --jaune: #FFC53D;
  --turquoise: #00BFA6;
  --lilas: #F4F0FA;
  --blanc: #FFFFFF;

  /* Couleurs d'usage */
  --texte: var(--nuit);
  --texte-doux: #5B5470;
  --texte-sur-nuit: #E6DFF2;
  --bordure: #E7E0F0;
  --bordure-champ: #8E83A6;
  --degrade: linear-gradient(110deg, var(--fuchsia) 0%, var(--orange) 55%, var(--jaune) 100%);

  /* Polices */
  --police-titres: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --police-texte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Mesures */
  --marge: 20px;
  --largeur-max: 1160px;
  --hauteur-entete: 68px;
  --rayon: 20px;
  --ombre: 0 1px 2px rgb(30 18 56 / .06), 0 18px 40px -22px rgb(30 18 56 / .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: 1.0625rem/1.65 var(--police-texte);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

img {
  height: auto;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--police-titres);
  line-height: 1.1;
  letter-spacing: -.02em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.4rem, 1.5rem + 4vw, 4.4rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.03em;
}

h2 {
  font-size: clamp(1.8rem, 1.35rem + 1.9vw, 2.75rem);
  font-weight: 800;
}

h3 {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

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

ul,
ol {
  padding: 0;
}

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

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

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

[hidden] {
  display: none !important;
}

::selection {
  background: var(--jaune);
  color: var(--nuit);
}


/* 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(--lilas);
}

.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-size: .8125rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fuchsia-fonce);
}

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

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

.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(--nuit);
}

.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: 700 1rem/1.2 var(--police-texte);
  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(--fuchsia);
  color: var(--blanc);
}

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

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

.bouton-contour:hover {
  background: var(--nuit);
  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(--nuit);
}

.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-weight: 700;
  color: var(--fuchsia-fonce);
  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(--nuit);
  color: var(--blanc);
  font-weight: 700;
  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);
}

.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(--lilas);
  color: var(--nuit);
  font: 700 .9375rem/1 var(--police-texte);
  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(30 18 56 / .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(--nuit);
    font: 700 1.2rem/1.2 var(--police-titres);
  }

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

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

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

  .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(--nuit);
    font-size: .975rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .2s, color .2s;
  }

  .menu a:hover {
    background: var(--lilas);
    color: var(--nuit);
  }

  .menu a[aria-current="page"] {
    background: rgb(220 0 119 / .09);
    color: var(--fuchsia-fonce);
  }

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

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

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


/* Écrans d'ordinateur étroits : onglets un peu plus serrés */
@media (min-width: 60em) and (max-width: 69.99em) {
  .menu {
    gap: 0;
  }

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

/* 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: 700 1rem/1.2 var(--police-texte);
  }
}

@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
   ========================================================================== */

/* Guirlande de fanions en haut des bandeaux */
.guirlande {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  height: 30px;
  background: url("../images/guirlande.svg") repeat-x left top / 120px 30px;
  pointer-events: none;
}

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

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

/* Voile « nuit » sur la photo : 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(220 0 119 / .35), transparent 70%),
    rgb(30 18 56 / .72);
}

@media (min-width: 48em) {
  .banniere::after {
    background:
      radial-gradient(45% 80% at 90% 10%, rgb(220 0 119 / .35), transparent 70%),
      linear-gradient(90deg, rgb(30 18 56 / .9) 0%, rgb(30 18 56 / .72) 55%, rgb(30 18 56 / .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(--jaune);
}

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

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

.bandeau-page {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(40% 100% at 94% 0%, rgb(220 0 119 / .55), transparent 70%),
    radial-gradient(32% 90% at 72% 115%, rgb(255 107 26 / .38), transparent 70%),
    radial-gradient(26% 70% at 0% 100%, rgb(0 191 166 / .26), transparent 70%),
    var(--nuit);
  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(--jaune);
}


/* 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;
}

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

.icone-orange {
  background: var(--orange);
  color: var(--nuit);
}

.icone-jaune {
  background: var(--jaune);
  color: var(--nuit);
}

.icone-turquoise {
  background: var(--turquoise);
  color: var(--nuit);
}

.icone-nuit {
  background: var(--nuit);
  color: var(--jaune);
}

/* 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 (à activer dans index.html quand les photos seront prêtes) */
.galerie {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (min-width: 48em) {
  .galerie {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}

.galerie figure {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  background: var(--lilas);
}

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


/* 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;
}

.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(--nuit);
}

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

.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(--fuchsia) 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;
  }
}

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

.billet-talon {
  display: grid;
  place-content: center;
  gap: 2px;
  padding: 18px 6px;
  border-right: 2px dashed rgb(30 18 56 / .28);
  background: var(--jaune);
  color: var(--nuit);
  text-align: center;
}

.billet-jour {
  font: 800 2.6rem/1 var(--police-titres);
  letter-spacing: -.03em;
}

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

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

.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-size: .975rem;
  font-weight: 600;
}

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

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

.billet-passe .billet-talon {
  background: #E2DAEE;
}

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

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

.badge-aujourdhui {
  background: var(--orange);
  color: var(--nuit);
}

.badge-complet {
  background: var(--turquoise);
  color: var(--nuit);
}

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

.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(--lilas);
  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(--nuit);
  color: var(--jaune);
  font: 800 1.3rem/1 var(--police-titres);
}

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

/* Assistant de demande : formulaire à gauche, message à droite */
.no-js .assistant {
  display: none;
}

.assistant {
  display: grid;
  align-items: start;
  gap: 24px;
}

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

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

.formulaire h3,
.apercu 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-weight: 700;
}

.facultatif {
  font-weight: 400;
  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(--nuit);
  font: 1rem/1.4 var(--police-texte);
}

.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='%231E1238' 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: #756D8C;
  opacity: 1;
}

.champ input:focus-visible,
.champ select:focus-visible,
.champ textarea:focus-visible {
  border-color: var(--fuchsia);
  outline: 3px solid rgb(220 0 119 / .3);
  outline-offset: 1px;
}

.apercu {
  display: grid;
  gap: 18px;
  padding: clamp(22px, 1rem + 2vw, 36px);
  border-radius: 24px;
  background: var(--nuit);
  color: var(--blanc);
}

@media (min-width: 60em) {
  .apercu {
    position: sticky;
    top: calc(var(--hauteur-entete) + 20px);
  }
}

.apercu p {
  color: var(--texte-sur-nuit);
}

.apercu-message {
  margin: 0;
  padding: 18px 20px;
  border: 1px solid rgb(255 255 255 / .14);
  border-radius: 14px;
  background: rgb(255 255 255 / .06);
  color: var(--texte-sur-nuit);
  font: .975rem/1.65 var(--police-texte);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.apercu .actions .bouton {
  flex: 1 1 100%;
}

.apercu .apercu-statut {
  min-height: 1.5em;
  font-weight: 700;
  color: var(--jaune);
}

.apercu .apercu-note {
  font-size: .875rem;
}

.apercu :focus-visible {
  outline-color: var(--jaune);
}

/* 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: 700 1.125rem/1.35 var(--police-titres);
  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(--lilas);
  color: var(--fuchsia-fonce);
  font: 800 1.35rem/1 var(--police-texte);
  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-weight: 600;
}

.connexion-message.est-erreur {
  background: #FDE4F0;
  color: var(--fuchsia-fonce);
}

.connexion-message.est-info {
  background: var(--lilas);
  color: var(--nuit);
}


/* 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(--nuit);
  text-decoration: none;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}

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

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

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

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

.carte-contact-action {
  margin-top: 10px;
  font-weight: 700;
  color: var(--fuchsia-fonce);
}

.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(--nuit);
  color: var(--jaune);
  font: 800 .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(--lilas);
  font-size: .95rem;
  font-weight: 600;
}


/* 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: 72px clamp(24px, 1rem + 2vw, 40px) clamp(28px, 1.2rem + 2vw, 44px);
  border-radius: 28px;
  background:
    radial-gradient(60% 80% at 100% 0%, rgb(220 0 119 / .5), transparent 70%),
    radial-gradient(50% 70% at 0% 100%, rgb(0 191 166 / .3), transparent 70%),
    var(--nuit);
  color: var(--blanc);
}

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

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

.formule li {
  display: flex;
  align-items: center;
  gap: 16px;
  font: 800 clamp(2rem, 1.4rem + 2.5vw, 3rem)/1.15 var(--police-titres);
  letter-spacing: -.03em;
}

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

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

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

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


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

.bandeau-appel {
  background:
    radial-gradient(45% 150% at 100% 0%, rgb(220 0 119 / .5), transparent 70%),
    radial-gradient(35% 130% at 0% 100%, rgb(255 197 61 / .2), transparent 70%),
    var(--nuit);
  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-nuit);
}

.pied {
  background: var(--nuit-profond);
  color: #C9BFDD;
}

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

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

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

.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;
}

.pied-logo {
  font: 800 1.9rem/1 var(--police-titres);
  letter-spacing: -.02em;
  color: var(--blanc);
}

.pied-logo span {
  color: #FF3D9A;
}

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

.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: #FFF0C2;
  color: var(--nuit);
  -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;
  }
}