/* ==========================================================================
   K.concept — Feuille de style principale
   Direction artistique : imprimé sérigraphié, magazine de mode ancien,
   étiquette de vêtement, ticket de vestiaire, tampon encreur.
   ========================================================================== */

/* --------------------------------------------------------- 1. TOKENS ----- */
:root {
  /* Encres */
  --encre:        #17140F;
  --encre-doux:   #2E2820;
  --papier:       #EDE4D2;
  --papier-clair: #F6F0E2;
  --papier-fonce: #DFD3BB;
  --rouge:        #B3372B;
  --bordeaux:     #5E1A22;
  --moutarde:     #E0A32B;
  --olive:        #4E5A35;
  --gris:         #7C7264;
  --gris-clair:   #B6AC9B;

  /* Typographies */
  --titre: "Bodoni Moda", "Bodoni MT", "Didot", "Times New Roman", serif;
  --texte: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --meta:  "Courier Prime", "Courier New", ui-monospace, monospace;

  /* Échelle typographique */
  --t-geant: clamp(2.9rem, 9.2vw, 7.4rem);
  --t-xxl:   clamp(2.3rem, 6vw, 4.6rem);
  --t-xl:    clamp(1.9rem, 4.2vw, 3.1rem);
  --t-l:     clamp(1.4rem, 2.6vw, 1.95rem);
  --t-m:     clamp(1.08rem, 1.5vw, 1.2rem);
  --t-s:     0.95rem;
  --t-xs:    0.78rem;

  /* Rythme */
  --gouttiere: clamp(1.15rem, 4vw, 2.6rem);
  --section:   clamp(3.6rem, 9vw, 7.5rem);
  --largeur:   1280px;

  --filet: 1px solid var(--encre);
  --ombre-imprime: 6px 6px 0 var(--encre);
}

/* ---------------------------------------------------------- 2. BASE ------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background-color: var(--papier);
  color: var(--encre);
  font-family: var(--texte);
  font-size: var(--t-m);
  line-height: 1.62;
  overflow-x: hidden;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Grain papier : une seule tuile légère sur toute la page */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  background-image: url("../img/grain.png");
  background-size: 220px 220px;
  opacity: .5;
  mix-blend-mode: multiply;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

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

::selection { background: var(--moutarde); color: var(--encre); }

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  background: var(--encre);
  color: var(--papier-clair);
  padding: .8rem 1.2rem;
  font-family: var(--meta);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.saut-contenu:focus { left: .6rem; top: .6rem; }

.visuellement-cache {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------------------------------------------------- 3. TYPOGRAPHIE ----- */
h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

.titre-geant { font-size: var(--t-geant); line-height: .9; letter-spacing: -.03em; }
.titre-xxl   { font-size: var(--t-xxl); }
.titre-xl    { font-size: var(--t-xl); }
.titre-l     { font-size: var(--t-l); line-height: 1.1; }

.titre-italique { font-style: italic; font-weight: 400; }
.titre-rouge    { color: var(--rouge); }

p { margin: 0 0 1.1em; max-width: 66ch; }
p:last-child { margin-bottom: 0; }

.chapeau {
  font-size: clamp(1.12rem, 2vw, 1.42rem);
  line-height: 1.5;
  max-width: 52ch;
}

.surtitre {
  font-family: var(--meta);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--rouge);
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 1.4rem;
}
.surtitre::before {
  content: "";
  width: 2.2rem;
  height: 2px;
  background: var(--rouge);
  flex: none;
}
.surtitre--encre { color: var(--encre-doux); }
.surtitre--encre::before { background: var(--encre-doux); }

.mono {
  font-family: var(--meta);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .14em;
}

.lettrine::first-letter {
  font-family: var(--titre);
  font-size: 3.6em;
  line-height: .78;
  float: left;
  padding: .06em .12em 0 0;
  color: var(--rouge);
}

/* -------------------------------------------------------- 4. LAYOUT ----- */
.enveloppe {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
.enveloppe--etroite { max-width: 880px; }

.bande { padding-block: var(--section); position: relative; }
.bande--serre { padding-block: calc(var(--section) * .58); }
.bande--encre { background: var(--encre); color: var(--papier-clair); }
.bande--encre .surtitre { color: var(--moutarde); }
.bande--encre .surtitre::before { background: var(--moutarde); }
.bande--clair { background: var(--papier-clair); }

.filet-double {
  border: 0;
  height: 6px;
  margin: 0;
  background:
    linear-gradient(var(--encre), var(--encre)) top/100% 3px no-repeat,
    linear-gradient(var(--encre), var(--encre)) bottom/100% 1px no-repeat;
}
.filet-fin { border: 0; height: 1px; background: var(--encre); opacity: .28; margin: 0; }

.duo {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (min-width: 900px) {
  .duo { grid-template-columns: 1fr 1fr; }
  .duo--large-droite { grid-template-columns: 0.85fr 1.15fr; }
  .duo--large-gauche { grid-template-columns: 1.15fr 0.85fr; }
}

.entete-bande {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: clamp(1.8rem, 4vw, 3rem);
}
.entete-bande h2 { margin-bottom: 0; }

/* ------------------------------------------------------- 5. BOUTONS ----- */
.bouton {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 1.6rem;
  min-height: 48px;
  background: var(--encre);
  color: var(--papier-clair);
  border: 2px solid var(--encre);
  font-family: var(--meta);
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
  box-shadow: 4px 4px 0 rgba(23, 20, 15, .22);
}
.bouton:hover, .bouton:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--rouge);
}
.bouton:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--rouge); }

.bouton--rouge { background: var(--rouge); border-color: var(--rouge); }
.bouton--rouge:hover, .bouton--rouge:focus-visible { box-shadow: 7px 7px 0 var(--encre); }

.bouton--vide {
  background: transparent;
  color: var(--encre);
  box-shadow: 4px 4px 0 rgba(23, 20, 15, .14);
}
.bouton--vide:hover, .bouton--vide:focus-visible {
  background: var(--encre);
  color: var(--papier-clair);
  box-shadow: 7px 7px 0 var(--moutarde);
}

.bouton--clair {
  background: var(--papier-clair);
  color: var(--encre);
  border-color: var(--papier-clair);
}
.bouton--clair:hover, .bouton--clair:focus-visible { box-shadow: 7px 7px 0 var(--moutarde); }

.groupe-boutons { display: flex; flex-wrap: wrap; gap: .9rem 1rem; }

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--meta);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .16em;
  text-decoration: none;
  border-bottom: 2px solid var(--rouge);
  padding-bottom: .25rem;
  transition: gap .18s ease, color .18s ease;
}
.lien-fleche:hover, .lien-fleche:focus-visible { gap: 1rem; color: var(--rouge); }

/* --------------------------------------- 6. SIGNATURES : TAMPON, TICKET -- */
.tampon {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  padding: .55rem 1.1rem;
  border: 2px solid currentColor;
  box-shadow: inset 0 0 0 1px currentColor;
  color: var(--rouge);
  font-family: var(--meta);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  line-height: 1.15;
  transform: rotate(-6deg);
  mix-blend-mode: multiply;
  opacity: .92;
  text-align: center;
}
.tampon--olive   { color: var(--olive); }
.tampon--gris    { color: var(--gris); transform: rotate(4deg); }
.tampon--encre   { color: var(--encre); }
.tampon--exemple { color: var(--bordeaux); transform: rotate(-3deg); }

.etiquette {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .8rem .3rem .55rem;
  background: var(--papier-fonce);
  border: 1px solid var(--encre);
  font-family: var(--meta);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.etiquette::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 1px solid var(--encre);
  background: var(--papier-clair);
  flex: none;
}

/* Bandeau défilant */
.bandeau-defilant {
  background: var(--encre);
  color: var(--papier-clair);
  border-block: 3px solid var(--encre);
  overflow: hidden;
  padding-block: .7rem;
}
.bandeau-defilant__piste {
  display: flex;
  width: max-content;
  gap: 2.4rem;
  animation: defilement 38s linear infinite;
}
.bandeau-defilant__piste span {
  font-family: var(--meta);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .3em;
  white-space: nowrap;
}
.bandeau-defilant__piste span::after {
  content: "✶";
  margin-left: 2.4rem;
  color: var(--moutarde);
}
@keyframes defilement { to { transform: translateX(-50%); } }

/* ------------------------------------------------------- 7. ENTÊTE ------ */
.entete {
  position: sticky;
  top: 0;
  z-index: 800;
  background: var(--papier);
  border-bottom: 3px solid var(--encre);
}
.entete::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: var(--encre);
}
.entete__interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 74px;
  padding-block: .6rem;
}

.marque { text-decoration: none; display: block; line-height: 1; }
.marque__nom {
  font-family: var(--titre);
  font-size: clamp(1.5rem, 3.4vw, 1.95rem);
  font-weight: 700;
  letter-spacing: -.02em;
  display: block;
}
.marque__nom em { font-style: italic; color: var(--rouge); }
.marque__baseline {
  font-family: var(--meta);
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--gris);
  display: block;
  margin-top: .25rem;
}

.nav-bureau { display: none; }
@media (min-width: 1000px) {
  .nav-bureau { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
}
.nav-bureau__lien {
  position: relative;
  font-family: var(--meta);
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  text-decoration: none;
  padding: .55rem 0;
  transition: color .18s ease;
}
.nav-bureau__lien::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: .1rem;
  height: 2px;
  background: var(--rouge);
  transition: right .22s ease;
}
.nav-bureau__lien:hover::after,
.nav-bureau__lien:focus-visible::after { right: 0; }
.nav-bureau__lien[aria-current="page"] { color: var(--rouge); }
.nav-bureau__lien[aria-current="page"]::after { right: 0; }

.entete__actions { display: flex; align-items: center; gap: .7rem; }
.entete__cta { display: none; }
@media (min-width: 1000px) { .entete__cta { display: inline-flex; } }

.bouton-menu {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 50px; height: 48px;
  padding: 0 8px;
  background: transparent;
  border: 2px solid var(--encre);
  cursor: pointer;
}
@media (min-width: 1000px) { .bouton-menu { display: none; } }
.bouton-menu span {
  display: block;
  height: 2px;
  background: var(--encre);
  transition: transform .25s ease, opacity .2s ease;
}
.bouton-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bouton-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.bouton-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menu mobile plein écran */
.nav-mobile {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: var(--papier);
  display: flex;
  flex-direction: column;
  padding: 1.1rem var(--gouttiere) 2rem;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .38s cubic-bezier(.2, .8, .25, 1), visibility .38s;
  overflow-y: auto;
}
.nav-mobile.est-ouvert { transform: translateY(0); visibility: visible; }
.nav-mobile__haut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 74px;
  border-bottom: 3px solid var(--encre);
  margin-bottom: 1.6rem;
}
.nav-mobile__liste { list-style: none; margin: 0; padding: 0; flex: 1; }
.nav-mobile__liste li { border-bottom: 1px solid rgba(23, 20, 15, .22); }
.nav-mobile__lien {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: .85rem 0;
  font-family: var(--titre);
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  text-decoration: none;
  line-height: 1.1;
}
.nav-mobile__lien span {
  font-family: var(--meta);
  font-size: .7rem;
  color: var(--rouge);
  letter-spacing: .1em;
}
.nav-mobile__lien[aria-current="page"] { color: var(--rouge); font-style: italic; }
.nav-mobile__pied { margin-top: 2rem; display: grid; gap: 1rem; }

/* --------------------------------------------------------- 8. HERO ------ */
.hero { position: relative; padding-block: clamp(2.4rem, 6vw, 4.4rem) 0; }
.hero__grille {
  display: grid;
  gap: clamp(1.8rem, 4vw, 3.4rem);
  align-items: end;
}
@media (min-width: 980px) {
  .hero__grille { grid-template-columns: 1.02fr .98fr; align-items: center; }
}
.hero__titre { margin-bottom: 1.2rem; }
.hero__titre .ligne { display: block; }
.hero__titre .ligne--decale { padding-left: clamp(0rem, 6vw, 4.6rem); }
.hero__chapeau { margin-bottom: 1.9rem; }

.hero__visuel { position: relative; }
.hero__cadre {
  position: relative;
  border: 3px solid var(--encre);
  background: var(--papier-fonce);
  box-shadow: var(--ombre-imprime);
}
.hero__cadre img { width: 100%; aspect-ratio: 14/10; object-fit: cover; }
.hero__legende {
  position: absolute;
  left: -3px; bottom: -3px;
  background: var(--encre);
  color: var(--papier-clair);
  padding: .5rem .9rem;
  font-family: var(--meta);
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .16em;
}
.hero__tampon {
  position: absolute;
  top: -1.1rem; right: -.6rem;
  background: var(--papier);
  z-index: 2;
}
.hero__reperes {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem .9rem;
  margin-top: 1.7rem;
}

/* ---------------------------------------------- 9. PROCHAINE ÉDITION ---- */
.ticket {
  position: relative;
  background: var(--papier-clair);
  border: 3px solid var(--encre);
  display: grid;
  box-shadow: var(--ombre-imprime);
}
@media (min-width: 780px) { .ticket { grid-template-columns: 1fr 250px; } }

.ticket__corps { padding: clamp(1.5rem, 4vw, 2.6rem); }
.ticket__souche {
  position: relative;
  padding: clamp(1.3rem, 3vw, 1.9rem);
  border-top: 2px dashed var(--encre);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .9rem;
  text-align: center;
  background:
    repeating-linear-gradient(45deg, transparent 0 9px, rgba(23,20,15,.045) 9px 18px);
}
@media (min-width: 780px) {
  .ticket__souche { border-top: 0; border-left: 2px dashed var(--encre); }
}
/* encoches de perforation */
.ticket__souche::before,
.ticket__souche::after {
  content: "";
  position: absolute;
  width: 22px; height: 22px;
  background: var(--papier);
  border: 3px solid var(--encre);
  border-radius: 50%;
}
.ticket__souche::before { top: -14px; left: -14px; }
.ticket__souche::after  { top: -14px; right: -14px; }
@media (min-width: 780px) {
  .ticket__souche::before { top: -14px; left: -14px; right: auto; }
  .ticket__souche::after  { top: auto; bottom: -14px; left: -14px; right: auto; }
}
.ticket__numero {
  font-family: var(--titre);
  font-size: clamp(3.2rem, 8vw, 4.6rem);
  line-height: .85;
  color: var(--rouge);
}
.ticket__meta { display: grid; gap: .9rem; margin: 1.5rem 0; }
.ticket__ligne {
  display: grid;
  grid-template-columns: 7.4rem 1fr;
  gap: .5rem 1rem;
  align-items: baseline;
  padding-bottom: .7rem;
  border-bottom: 1px solid rgba(23, 20, 15, .18);
}
.ticket__ligne dt {
  font-family: var(--meta);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--gris);
}
.ticket__ligne dd { margin: 0; font-weight: 500; }
.ticket__ligne dd em { font-style: italic; color: var(--gris); font-weight: 400; }

/* --------------------------------------------- 10. CARTES ÉVÉNEMENTS ---- */
.grille-evenements {
  display: grid;
  gap: clamp(1.6rem, 3.4vw, 2.6rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.carte-evt {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--papier-clair);
  border: 2px solid var(--encre);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 4px 4px 0 rgba(23, 20, 15, .18);
}
.carte-evt:hover, .carte-evt:focus-within {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--rouge);
}
.carte-evt__visuel { position: relative; border-bottom: 2px solid var(--encre); background: var(--papier-fonce); }
.carte-evt__visuel img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.carte-evt__num {
  position: absolute;
  top: 0; left: 0;
  background: var(--encre);
  color: var(--papier-clair);
  font-family: var(--meta);
  font-size: .68rem;
  letter-spacing: .16em;
  padding: .35rem .7rem;
}
.carte-evt__tampon { position: absolute; right: .6rem; bottom: .6rem; background: var(--papier-clair); }
.carte-evt__corps { padding: 1.3rem 1.3rem 1.5rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.carte-evt__titre { font-size: var(--t-l); margin: 0; }
.carte-evt__infos {
  font-family: var(--meta);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gris);
  display: grid;
  gap: .25rem;
}
.carte-evt__pied {
  margin-top: auto;
  padding-top: .9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  border-top: 1px solid rgba(23, 20, 15, .2);
  font-family: var(--meta);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.carte-evt__pied .fleche { color: var(--rouge); transition: transform .2s ease; }
.carte-evt:hover .fleche { transform: translateX(5px); }

/* Filtres */
.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  padding: 0;
  margin: 0 0 clamp(1.8rem, 4vw, 2.6rem);
  border: 0;
}
.filtres__legende {
  font-family: var(--meta);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--gris);
  width: 100%;
  padding: 0;
  margin-bottom: .8rem;
}
.filtre {
  min-height: 44px;
  padding: .55rem 1.15rem;
  background: transparent;
  border: 2px solid var(--encre);
  font-family: var(--meta);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.filtre:hover { background: var(--papier-fonce); }
.filtre[aria-pressed="true"] { background: var(--encre); color: var(--papier-clair); }

/* État vide */
.etat-vide {
  border: 2px dashed var(--encre);
  padding: clamp(1.8rem, 5vw, 3rem);
  text-align: center;
  background: var(--papier-clair);
}
.etat-vide h3 { margin-bottom: .6rem; }
.etat-vide p { margin-inline: auto; }

/* ------------------------------------------- 11. FICHE ÉVÉNEMENT -------- */
.fil-ariane {
  font-family: var(--meta);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--gris);
  padding-block: 1.2rem;
}
.fil-ariane a { text-decoration: none; border-bottom: 1px solid var(--rouge); }
.fil-ariane span { margin-inline: .5rem; }

.fiche__entete { border-bottom: 3px solid var(--encre); padding-bottom: clamp(1.6rem, 4vw, 2.6rem); }
.fiche__affiche {
  border: 3px solid var(--encre);
  box-shadow: var(--ombre-imprime);
  background: var(--papier-fonce);
}
.fiche__affiche img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

.grille-infos {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  margin: 0;
}
.grille-infos__bloc {
  border-top: 3px solid var(--encre);
  padding-top: .8rem;
}
.grille-infos__bloc dt {
  font-family: var(--meta);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--gris);
  margin-bottom: .35rem;
}
.grille-infos__bloc dd { margin: 0; font-size: 1.06rem; font-weight: 500; }

.programme { list-style: none; margin: 0; padding: 0; }
.programme li {
  display: grid;
  grid-template-columns: 5.6rem 1fr;
  gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid rgba(23, 20, 15, .2);
}
.programme .heure { font-family: var(--meta); font-size: .8rem; color: var(--rouge); letter-spacing: .1em; }

.liste-simple { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.liste-simple li { display: flex; gap: .7rem; align-items: baseline; }
.liste-simple li::before { content: "—"; color: var(--rouge); flex: none; }

/* Prestataires : étiquettes de vêtement */
.grille-prestataires {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}
.carte-presta {
  position: relative;
  background: var(--papier-clair);
  border: 2px solid var(--encre);
  padding: 1.1rem 1.2rem 1.2rem 2.1rem;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 18px);
}
.carte-presta::before {
  content: "";
  position: absolute;
  top: 1.15rem; left: .75rem;
  width: 11px; height: 11px;
  border: 2px solid var(--encre);
  border-radius: 50%;
}
.carte-presta::after {
  content: "";
  position: absolute;
  top: 1.62rem; left: .95rem;
  width: 1px; height: calc(100% - 2.4rem);
  background: rgba(23, 20, 15, .28);
}
.carte-presta__type {
  font-family: var(--meta);
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--rouge);
  display: block;
  margin-bottom: .3rem;
}
.carte-presta__nom { font-family: var(--titre); font-size: 1.28rem; line-height: 1.1; margin: 0 0 .4rem; }
.carte-presta__desc { font-size: .92rem; color: var(--encre-doux); margin: 0 0 .6rem; }
.carte-presta__lien {
  font-family: var(--meta);
  font-size: .7rem;
  letter-spacing: .1em;
  text-decoration: none;
  border-bottom: 1px solid var(--rouge);
}
.carte-presta__vide { font-family: var(--meta); font-size: .68rem; color: var(--gris-clair); letter-spacing: .08em; }

/* ------------------------------------------------------ 12. GALERIE ----- */
.grille-galerie {
  display: grid;
  gap: clamp(.8rem, 2vw, 1.4rem);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 760px)  { .grille-galerie { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) { .grille-galerie { grid-template-columns: repeat(4, 1fr); } }

.vignette {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 2px solid var(--encre);
  background: var(--papier-fonce);
  cursor: zoom-in;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
a.vignette { cursor: pointer; }
.vignette:hover, .vignette:focus-visible { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--rouge); }
.vignette img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.vignette:hover img { transform: scale(1.04); }
.vignette--haute { grid-row: span 2; }
@media (max-width: 519px) { .vignette--haute { grid-row: span 1; } }
.vignette__ref {
  position: absolute;
  left: 0; bottom: 0;
  background: var(--encre);
  color: var(--papier-clair);
  font-family: var(--meta);
  font-size: .6rem;
  letter-spacing: .14em;
  padding: .25rem .5rem;
}

/* Lightbox */
.visionneuse {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(23, 20, 15, .95);
}
.visionneuse.est-ouverte { display: flex; }
.visionneuse__figure { margin: 0; max-width: min(1000px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: .9rem; }
.visionneuse__figure img {
  max-height: 74vh;
  width: auto;
  margin-inline: auto;
  border: 3px solid var(--papier-clair);
  background: var(--papier);
}
.visionneuse__legende {
  color: var(--papier-clair);
  font-family: var(--meta);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  text-align: center;
}
.visionneuse__btn {
  position: absolute;
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 2px solid var(--papier-clair);
  color: var(--papier-clair);
  font-size: 1.3rem;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.visionneuse__btn:hover, .visionneuse__btn:focus-visible { background: var(--papier-clair); color: var(--encre); }
.visionneuse__fermer { top: clamp(.8rem, 3vw, 1.6rem); right: clamp(.8rem, 3vw, 1.6rem); }
.visionneuse__prec { left: clamp(.4rem, 2vw, 1.6rem); top: 50%; transform: translateY(-50%); }
.visionneuse__suiv { right: clamp(.4rem, 2vw, 1.6rem); top: 50%; transform: translateY(-50%); }

/* ----------------------------------------------------- 13. FORMULAIRES -- */
.formulaire {
  background: var(--papier-clair);
  border: 3px solid var(--encre);
  padding: clamp(1.4rem, 4vw, 2.6rem);
  box-shadow: var(--ombre-imprime);
}
.champs { display: grid; gap: 1.3rem; }
@media (min-width: 720px) { .champs--duo { grid-template-columns: 1fr 1fr; } }

.champ { display: flex; flex-direction: column; gap: .45rem; }
.champ--pleine-largeur { grid-column: 1 / -1; }
.champ label {
  font-family: var(--meta);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.champ label .facultatif { color: var(--gris); letter-spacing: .08em; }
.champ label .requis { color: var(--rouge); }

.champ input,
.champ select,
.champ textarea {
  font-family: var(--texte);
  font-size: 16px;
  line-height: 1.5;
  padding: .8rem .9rem;
  min-height: 50px;
  color: var(--encre);
  background: var(--papier);
  border: 2px solid var(--encre);
  border-radius: 0;
  width: 100%;
  transition: box-shadow .18s ease, background-color .18s ease;
  appearance: none;
}
.champ textarea { min-height: 150px; resize: vertical; }
.champ select {
  background-image: linear-gradient(45deg, transparent 50%, var(--encre) 50%),
                    linear-gradient(135deg, var(--encre) 50%, transparent 50%);
  background-position: right 1.1rem center, right .75rem center;
  background-size: 7px 7px, 7px 7px;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
}
.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: 3px solid var(--rouge);
  outline-offset: 2px;
  background: var(--papier-clair);
}
.champ input[aria-invalid="true"],
.champ select[aria-invalid="true"],
.champ textarea[aria-invalid="true"] { border-color: var(--rouge); background: rgba(179, 55, 43, .07); }

.champ__erreur {
  font-family: var(--meta);
  font-size: .72rem;
  color: var(--bordeaux);
  min-height: 0;
  display: none;
}
.champ__erreur.est-visible { display: block; }

.champ-case {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  grid-column: 1 / -1;
}
.champ-case input {
  width: 24px; height: 24px;
  min-height: 0;
  margin-top: .18rem;
  flex: none;
  accent-color: var(--rouge);
  border: 2px solid var(--encre);
  appearance: auto;
}
.champ-case label { font-family: var(--texte); font-size: .93rem; text-transform: none; letter-spacing: 0; line-height: 1.5; }
.champ-case a { color: var(--rouge); }

.pot-de-miel { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.message-formulaire {
  display: none;
  margin-bottom: 1.4rem;
  padding: 1rem 1.2rem;
  border: 2px solid var(--rouge);
  background: rgba(179, 55, 43, .08);
  font-size: .95rem;
}
.message-formulaire.est-visible { display: block; }

/* --------------------------------------------------------- 14. FAQ ----- */
.faq { border-top: 3px solid var(--encre); }
.faq__item { border-bottom: 1px solid rgba(23, 20, 15, .25); }
.faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.2rem 0;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--titre);
  font-size: clamp(1.12rem, 2.2vw, 1.35rem);
  line-height: 1.25;
}
.faq__question .signe { font-family: var(--meta); color: var(--rouge); font-size: 1.3rem; flex: none; transition: transform .22s ease; }
.faq__question[aria-expanded="true"] .signe { transform: rotate(45deg); }
.faq__reponse { display: none; padding: 0 0 1.3rem; }
.faq__reponse.est-ouverte { display: block; }

/* ------------------------------------------------- 15. BANDEAU DÉMO ---- */
.bandeau-demo {
  background: var(--moutarde);
  color: var(--encre);
  border-bottom: 3px solid var(--encre);
  font-family: var(--meta);
  font-size: .74rem;
  letter-spacing: .06em;
  text-align: center;
  padding: .6rem var(--gouttiere);
}
.bandeau-demo strong { text-transform: uppercase; letter-spacing: .14em; }

/* ------------------------------------------------------- 16. PIED ------ */
.pied {
  background: var(--encre);
  color: var(--papier-clair);
  padding-block: clamp(2.8rem, 6vw, 4.4rem) 1.6rem;
}
.pied a { color: var(--papier-clair); }
/* Les boutons gardent leur propre couleur de texte : sans cette règle,
   « .pied a » l'emporte et le bouton clair devient crème sur crème. */
.pied a.bouton { color: var(--papier-clair); }
.pied a.bouton--clair { color: var(--encre); }
.pied__haut {
  display: grid;
  gap: clamp(2rem, 5vw, 3.4rem);
  padding-bottom: clamp(2rem, 5vw, 3rem);
  border-bottom: 1px solid rgba(246, 240, 226, .3);
}
@media (min-width: 860px) { .pied__haut { grid-template-columns: 1.25fr .75fr .75fr; } }
.pied__marque .marque__nom { color: var(--papier-clair); }
.pied__marque .marque__nom em { color: var(--moutarde); }
.pied__titre {
  font-family: var(--meta);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--moutarde);
  margin-bottom: 1rem;
}
.pied__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.pied__liste a { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .18s ease; font-size: .95rem; }
.pied__liste a:hover, .pied__liste a:focus-visible { border-bottom-color: var(--moutarde); }
.pied__bas {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.6rem;
  justify-content: space-between;
  padding-top: 1.4rem;
  font-family: var(--meta);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--gris-clair);
}
.pied__bas a { text-decoration: none; border-bottom: 1px solid rgba(246, 240, 226, .35); }

.bloc-instagram {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem 2rem;
  justify-content: space-between;
  border: 3px solid currentColor;
  padding: clamp(1.3rem, 3.5vw, 2.2rem);
}

/* ------------------------------------------------- 17. RETOUR EN HAUT -- */
.retour-haut {
  position: fixed;
  right: clamp(.9rem, 3vw, 1.8rem);
  bottom: clamp(.9rem, 3vw, 1.8rem);
  z-index: 700;
  width: 50px; height: 50px;
  display: grid;
  place-items: center;
  background: var(--encre);
  color: var(--papier-clair);
  border: 2px solid var(--encre);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.retour-haut.est-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.retour-haut:hover, .retour-haut:focus-visible { background: var(--rouge); border-color: var(--rouge); }

/* ------------------------------------------------------ 18. MOTION ----- */
/* Le contenu est visible par défaut. Il n'est masqué avant apparition que si
   le navigateur sait animer (classe posée par un script en tête de page) :
   sans JS, sur un moteur ancien ou en mouvement réduit, tout reste lisible. */
.anim-actives .apparait {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.2, .7, .3, 1), transform .7s cubic-bezier(.2, .7, .3, 1);
}
.anim-actives .apparait.est-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .anim-actives .apparait { opacity: 1; transform: none; }
  .bandeau-defilant__piste { animation: none; transform: none; }
  .vignette:hover img { transform: none; }
}

/* ------------------------------------------------- 19. PAGE D'ERREUR --- */
.page-erreur { min-height: 62vh; display: grid; place-items: center; text-align: center; }
.page-erreur .code {
  font-family: var(--titre);
  font-size: clamp(5rem, 22vw, 12rem);
  line-height: .8;
  color: var(--rouge);
  margin-bottom: 1rem;
}

/* ------------------------------------------------ 20. AJUSTEMENTS S --- */
@media (max-width: 359px) {
  .marque__baseline { display: none; }
}

@media (max-width: 419px) {
  .hero__tampon { top: -.8rem; right: -.2rem; transform: rotate(-6deg) scale(.86); }
  .ticket__ligne { grid-template-columns: 1fr; }
  .programme li { grid-template-columns: 1fr; gap: .2rem; }
  .bouton { width: 100%; justify-content: center; }
  .groupe-boutons { flex-direction: column; align-items: stretch; }
}