@charset "UTF-8";
/* ==========================================================================
   Jazz Swing & Co — Feuille de style principale
   Structure pensée pour une conversion en thème WordPress :
   chaque bloc correspond à un template-part / composant réutilisable.
   --------------------------------------------------------------------------
   01. Design tokens
   02. Reset & base
   03. Typographie
   04. Utilitaires de mise en page
   05. Ornements Art Déco
   06. Boutons
   07. En-tête & navigation
   08. Hero
   09. Bandeau défilant (standards)
   10. Composants de section
   11. Cartes (prestations, formules, ambiances, musiciens)
   12. Répertoire
   13. Zone d'intervention
   14. FAQ (accordéon)
   15. Formulaire de contact
   16. Bandeau d'appel à l'action
   17. Pied de page
   18. Retour en haut
   19. Animations & états
   20. Responsive
   ========================================================================== */

/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */

:root {
  /* — Couleurs : un club de jazz sous les projecteurs, pas dans la pénombre.
       Les noirs sont chauds (ils tirent vers le brun), et le laiton est
       franchement lumineux : c'est lui qui porte l'énergie de la page. — */
  --ink:            #0A0806;  /* noir chaud, fond principal */
  --ink-2:          #14100C;  /* noir légèrement relevé */
  --ink-3:          #1F1811;  /* surface de carte sur fond sombre */
  --ink-4:          #3A2E20;  /* bordure discrète sur fond sombre */

  --ivory:          #FBF5E9;  /* touches de piano */
  --ivory-2:        #F3EAD7;
  --ivory-3:        #E2D4B8;

  --brass:          #F0B429;  /* laiton du saxophone, plein soleil */
  --brass-lt:       #FFD470;
  --brass-dk:       #A9741A;  /* déclinaison lisible sur fond ivoire */

  --ember:          #E2571E;  /* cuivre chaud, second accent */
  --velvet:         #B01B2E;  /* rideau de scène */
  --velvet-lt:      #D4344A;

  --midnight:       #16232F;  /* bleu Blue Note */

  /* — Rôles sémantiques (mode sombre par défaut : c'est un club) — */
  --bg:             var(--ink);
  --bg-alt:         var(--ink-2);
  --surface:        var(--ink-3);
  --border:         var(--ink-4);
  --text:           var(--ivory);
  --text-muted:     #A79C89;
  --accent:         var(--brass);

  /* — Typographie — */
  --font-display: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, "Times New Roman", serif;
  --font-body:    "Jost", "Futura", "Century Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Le titre du bandeau plafonne volontairement bien en deçà de la taille
     « affiche » : au-delà de ~4,5rem sur un grand écran, la ligne se casse en
     trois morceaux de longueurs inégales et le bloc paraît décentré. */
  --fs-hero:    clamp(2.5rem, 4.6vw, 4.5rem);
  --fs-h1:      clamp(2.4rem, 6vw, 4.6rem);
  --fs-h2:      clamp(2rem, 4.4vw, 3.4rem);
  --fs-h3:      clamp(1.35rem, 2.2vw, 1.75rem);
  --fs-lead:    clamp(1.05rem, 1.5vw, 1.3rem);
  --fs-body:    clamp(1rem, 1.1vw, 1.075rem);
  --fs-small:   0.875rem;
  --fs-eyebrow: 0.75rem;

  /* — Rythme vertical & largeurs — */
  --wrap:       1240px;
  --wrap-tight: 900px;
  --wrap-text:  68ch;
  --gutter:     clamp(1.25rem, 4vw, 3rem);
  --section-y:  clamp(4.5rem, 9vw, 8.5rem);

  /* — Divers — */
  --radius:     2px;   /* le jazz n'aime pas les angles trop mous */
  --radius-lg:  4px;
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --dur:        0.55s;
  --shadow:     0 24px 60px -18px rgba(0, 0, 0, 0.75);
  --shadow-sm:  0 8px 24px -10px rgba(0, 0, 0, 0.6);

  /* — Grain de papier réutilisable (SVG inline, aucun asset externe) — */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}

/* Sections claires : on inverse les rôles, jamais les valeurs brutes. */
.is-light {
  --bg:         var(--ivory);
  --bg-alt:     var(--ivory-2);
  --surface:    #FFFFFF;
  --border:     #D8CCB6;
  --text:       var(--ink);
  --text-muted: #6B6155;
  --accent:     var(--brass-dk);
}

/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px; /* compense l'en-tête fixe lors des ancres */
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Voile de grain sur toute la page : donne la texture « papier d'affiche ». */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.035;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: overlay;
}

img,
picture,
video,
iframe { max-width: 100%; display: block; }

img { height: auto; }

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s var(--ease);
}

ul, ol { margin: 0; padding: 0; list-style: none; }

/* Les navigateurs appliquent « margin: 1em 40px » aux <figure> : sans ce
   rappel, chaque image encadrée perdait 80 px de largeur dans sa colonne. */
figure, figcaption { margin: 0; }

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

::selection {
  background: var(--brass);
  color: var(--ink);
}

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

/* Lien d'évitement pour la navigation au clavier */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  background: var(--brass);
  color: var(--ink);
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  letter-spacing: 0.05em;
}
/* :focus-visible et non :focus — le retour en haut déplace le focus ici pour
   les utilisateurs clavier ; avec :focus, le lien surgissait aussi après un
   simple clic à la souris, ce qui n'a aucun sens pour ce visiteur-là. */
.skip-link:focus-visible { left: 1rem; top: 1rem; }

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

/* ==========================================================================
   03. TYPOGRAPHIE
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.2; }

p { margin: 0 0 1.25em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

/* Mot mis en valeur dans un titre : italique Bodoni + couleur laiton.
   C'est la signature typographique du site. */
.accent {
  color: var(--brass);
  font-style: italic;
}
.is-light .accent { color: var(--brass-dk); }

/* Sur-titre de section : petites capitales espacées, précédées d'un filet. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.5rem;
}
.eyebrow::before {
  content: "";
  width: 36px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: "";
  width: 36px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: var(--text-muted);
  max-width: var(--wrap-text);
}

.text-center { text-align: center; }
/* Le sélecteur vise aussi bien l'élément porteur de .text-center que ses
   descendants : .lead est borné en largeur, sans marge auto il resterait
   collé à gauche malgré le texte centré. */
.text-center .lead,
.text-center .section__intro,
.lead.text-center,
.section__intro.text-center { margin-inline: auto; }

/* ==========================================================================
   04. UTILITAIRES DE MISE EN PAGE
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--tight { max-width: var(--wrap-tight); }

.section {
  position: relative;
  padding-block: var(--section-y);
  background: var(--bg);
  color: var(--text);
}

/* Troisième ton, entre le fond principal et les sections claires.
   ------------------------------------------------------------------
   Les sections alternent sombre et clair de « Nos prestations » à « Avis »,
   pour finir claire juste avant le bandeau d'appel à l'action, qui est sombre
   par sa photographie. Cet enchaînement demande un nombre impair de sections :
   en retirer une rend l'alternance stricte arithmétiquement impossible, et
   deux fonds sombres finissent par se toucher.

   Plutôt que de tout basculer — ce qui ne ferait que déplacer le heurt sur le
   bandeau final, là où le contraste compte le plus — on donne à la section
   concernée le ton intermédiaire déjà prévu par les tokens. C'est celui du
   bandeau défilant : le vocabulaire du thème, pas une exception.

   Le ton seul ne suffit pas : dix unités d'écart entre les deux noirs ne se
   voient pas à l'œil. On lui adjoint le filet, exactement comme le bandeau
   défilant qui combine déjà ces deux ingrédients. */
.section--alt {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(3rem, 6vw, 4.5rem);
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, currentColor 55%, transparent);
  border-radius: 50%;
  transform: translateX(-50%);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.scroll-cue:hover {
  background: var(--accent);
  color: var(--bg);
}
.scroll-cue svg { animation: scrollCue 1.8s ease-in-out infinite; }
@keyframes scrollCue {
  0%, 100% { transform: translateY(-3px); }
  50% { transform: translateY(3px); }
}

/* Sur desktop, chaque volet occupe au moins une fenêtre complète. Le contenu
   reste naturellement plus haut si une section nécessite davantage d'espace. */
@media (min-width: 961px) {
  .section,
  .page-hero {
    min-height: 100svh;
  }
}

.section__head { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.section__intro { max-width: var(--wrap-text); }

.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Deux colonnes texte / image, avec inversion possible. */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.split--reverse .split__media { order: 2; }

/* Contenu nettement plus haut que l'image : sans cela, la colonne média
   flotte au centre et laisse un grand vide en bas. On la fait accompagner
   le défilement plutôt que de l'étirer. */
@media (min-width: 961px) {
  .split--sticky { align-items: start; }
  .split--sticky .split__media {
    position: sticky;
    top: 120px;
  }
}

/* ==========================================================================
   05. ORNEMENTS ART DÉCO
   ========================================================================== */

/* Filet horizontal interrompu par un losange : séparateur maison. */
.deco-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--accent);
  opacity: 0.55;
}
.deco-rule::before,
.deco-rule::after {
  content: "";
  height: 1px;
  flex: 1;
  max-width: 140px;
  background: linear-gradient(90deg, transparent, currentColor);
}
.deco-rule::after { background: linear-gradient(90deg, currentColor, transparent); }
.deco-rule__gem {
  width: 7px;
  height: 7px;
  background: currentColor;
  transform: rotate(45deg);
  flex: none;
}

/* Égaliseur animé : la signature « musique live » du site. */
.equalizer {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 18px;
}
.equalizer span {
  width: 2px;
  background: var(--accent);
  animation: eq 1.1s ease-in-out infinite alternate;
  transform-origin: bottom;
}
.equalizer span:nth-child(1) { height: 40%; animation-delay: -0.5s; }
.equalizer span:nth-child(2) { height: 100%; animation-delay: -0.2s; }
.equalizer span:nth-child(3) { height: 65%; animation-delay: -0.8s; }
.equalizer span:nth-child(4) { height: 85%; animation-delay: -0.35s; }

@keyframes eq {
  from { transform: scaleY(0.28); }
  to   { transform: scaleY(1); }
}

/* Cadre en liseré doré, posé en retrait sur une image ou un hero. */
/* Liseré en retrait, souligné par deux équerres d'angle façon affiche encadrée.
   Le retrait haut est nettement plus grand que les autres : l'en-tête est fixe
   et se superpose au hero, le cadre doit donc passer sous le logo, pas derrière. */
.deco-frame {
  position: absolute;
  inset: clamp(84px, 11vh, 124px) clamp(16px, 2.4vw, 30px) clamp(16px, 2.4vw, 30px);
  border: 1px solid rgba(240, 180, 41, 0.28);
  pointer-events: none;
}
.deco-frame::before,
.deco-frame::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  border: 2px solid var(--brass);
}
.deco-frame::before {
  top: -2px; left: -2px;
  border-right: 0; border-bottom: 0;
}
.deco-frame::after {
  bottom: -2px; right: -2px;
  border-left: 0; border-top: 0;
}

/* ==========================================================================
   06. BOUTONS
   ========================================================================== */

.btn {
  --btn-bg: var(--brass);
  --btn-fg: var(--ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 1rem 2.1rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  border-radius: var(--radius);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  transition: color 0.4s var(--ease), background 0.4s var(--ease), border-color 0.4s var(--ease);
}

/* Remplissage qui monte depuis le bas au survol. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ivory);
  transform: translateY(101%);
  transition: transform 0.45s var(--ease);
  z-index: 0;
}
.btn > * { position: relative; z-index: 1; }
.btn:hover::before,
.btn:focus-visible::before { transform: translateY(0); }
.btn:hover { color: var(--ink); border-color: var(--ivory); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  border-color: rgba(201, 162, 75, 0.5);
}
.btn--ghost::before { background: var(--brass); }
.btn--ghost:hover { color: var(--ink); border-color: var(--brass); }

.btn--sm { padding: 0.7rem 1.4rem; font-size: 0.72rem; }
.btn--wide { width: 100%; }

/* Lien texte souligné à l'animation « rideau ». */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: 4px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: left bottom;
  background-repeat: no-repeat;
  transition: background-size 0.45s var(--ease);
}
.link-arrow:hover { background-size: 100% 1px; }
.link-arrow svg { transition: transform 0.4s var(--ease); }
.link-arrow:hover svg { transform: translateX(5px); }

/* ==========================================================================
   07. EN-TÊTE & NAVIGATION
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding-block: 1.15rem;
  transition: background 0.45s var(--ease), padding 0.45s var(--ease), border-color 0.45s var(--ease);
  border-bottom: 1px solid transparent;
}
/* État « décollé » : le fond apparaît une fois la page défilée. */
.site-header.is-stuck {
  background: rgba(11, 10, 9, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(201, 162, 75, 0.18);
  padding-block: 0.7rem;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* — Logo — */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex: none;
}
/* Le logo historique du groupe : la silhouette du saxophoniste.
   Le PNG est utilisé comme masque alpha plutôt que comme image, ce qui permet
   de le recolorer en CSS — il suit donc le thème de la section où il se trouve. */
.brand__mark {
  width: 48px;
  height: 48px;
  flex: none;
  background-color: var(--brass);
  -webkit-mask: url("../img/logo-mask.png") center / contain no-repeat;
          mask: url("../img/logo-mask.png") center / contain no-repeat;
  transition: background-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.brand:hover .brand__mark {
  background-color: var(--brass-lt);
  transform: scale(1.07);
}
/* Sans support des masques, un aplat doré s'afficherait à la place de la
   silhouette : mieux vaut alors ne rien montrer, le nom suffit. */
@supports not ((-webkit-mask: none) or (mask: none)) {
  .brand__mark { display: none; }
}

.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.28rem;
  color: var(--ivory);
  letter-spacing: 0.01em;
}
.brand__tag {
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--brass);
  font-weight: 400;
}

/* — Navigation principale — */
.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.1rem); }

.nav__link {
  position: relative;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ivory-3);
  padding-block: 0.4rem;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease);
}
.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--ivory); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header__actions { display: flex; align-items: center; gap: 1rem; flex: none; }

.header__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--ivory);
  white-space: nowrap;
}
.header__phone:hover { color: var(--brass); }
.header__phone svg { color: var(--brass); flex: none; }

/* — Bouton hamburger — */
.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  background: none;
  border: 1px solid rgba(201, 162, 75, 0.4);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 0;
  place-items: center;
}
.nav-toggle__bars {
  display: block;
  position: relative;
  width: 20px; height: 1.5px;
  background: var(--ivory);
  transition: background 0.25s var(--ease);
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px; height: 1.5px;
  background: var(--ivory);
  transition: transform 0.4s var(--ease);
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   08. HERO
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: clamp(6.5rem, 12vh, 9rem) clamp(2.5rem, 5.5vh, 3.75rem);
  overflow: hidden;
  isolation: isolate;
}

/* Le contenu et la barre de repères forment une colonne unique, calée sur le
   même bord gauche. C'est cette barre, filant jusqu'au bord droit du conteneur,
   qui donne son assise à l'ensemble : sans elle, le bloc de texte flottait
   dans l'angle et l'on croyait à un défaut de centrage. */
.hero__inner {
  display: grid;
  align-content: center;
  gap: clamp(1.75rem, 4.5vh, 3rem);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  /* Aucune désaturation : c'est elle qui donnait un rendu terne. On assombrit
     juste ce qu'il faut pour le texte, en saturant légèrement les cuivres. */
  filter: saturate(1.2) contrast(1.06) brightness(0.72);
  transform: scale(1.06);
  animation: heroDrift 26s ease-in-out infinite alternate;
}
@keyframes heroDrift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-1.5%, -1.5%, 0); }
}

/* Double dégradé : assombrit le bas pour le texte, teinte l'ensemble en nuit. */
/* Deux halos colorés simulent les projecteurs de scène : un ambré côté texte,
   un rouge velours à l'opposé. Ils réchauffent l'image au lieu de l'éteindre. */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* Halos de projecteurs : ambré côté texte, rouge velours à l'opposé. */
    radial-gradient(ellipse 70% 60% at 20% 45%, rgba(240,180,41,0.22), transparent 70%),
    radial-gradient(ellipse 60% 70% at 88% 30%, rgba(176,27,46,0.30), transparent 68%),
    /* Voile latéral : assombrit la moitié gauche où se pose le texte, et laisse
       la droite de l'image pleinement colorée. C'est lui qui rend le titre et
       le chapô lisibles sans éteindre la photo. */
    linear-gradient(100deg, rgba(10,8,6,0.94) 0%, rgba(10,8,6,0.82) 38%, rgba(10,8,6,0.34) 64%, rgba(10,8,6,0.06) 90%),
    linear-gradient(180deg, rgba(10,8,6,0.60) 0%, transparent 30%, rgba(10,8,6,0.92) 100%),
    /* Vignettage léger : referme les quatre coins et concentre le regard. */
    radial-gradient(ellipse 120% 100% at 50% 50%, transparent 45%, rgba(10,8,6,0.45) 100%);
}

/* Colonne de texte volontairement courte : le titre ne doit jamais dépasser
   la moitié assombrie de la photographie. */
.hero__content {
  position: relative;
  max-width: 41rem;
  padding-left: clamp(1.1rem, 1.8vw, 1.75rem);
}

/* Filet de laiton : il matérialise le bord gauche de la colonne et rattache
   le texte à la marge du site. */
.hero__content::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  background: linear-gradient(180deg, var(--brass) 0%, rgba(240, 180, 41, 0.35) 45%, rgba(240, 180, 41, 0) 100%);
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.5rem 1.1rem 0.5rem 0.9rem;
  border: 1px solid rgba(201, 162, 75, 0.4);
  border-radius: 100px;
  background: rgba(11, 10, 9, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ivory-2);
  margin-bottom: 2rem;
}

.hero__title {
  font-size: var(--fs-hero);
  line-height: 1.02;
  letter-spacing: -0.022em;
  margin-bottom: 1.4rem;
  /* Sans cela, le navigateur remplit chaque ligne au maximum et abandonne
     deux mots sur la dernière : c'est ce déséquilibre qui donnait au titre
     son air bancal. `balance` répartit les lignes à longueur égale. */
  text-wrap: balance;
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.55);
}
.hero__title .accent { display: block; }

.hero__lead {
  font-size: clamp(1.02rem, 1.15vw, 1.2rem);
  line-height: 1.65;
  color: var(--ivory-2);
  /* Volontairement plus étroit que le titre : le chapô doit rester dans la
     moitié gauche assombrie, sans déborder sur la partie claire de la photo. */
  max-width: 46ch;
  margin-bottom: 1.85rem;
  font-weight: 400;
  text-shadow: 0 2px 18px rgba(10, 8, 6, 0.85);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 0;
}

/* — Barre de repères, au pied du bandeau — */
.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 3.5vw, 3.25rem);
  margin: 0;
  padding: clamp(1.15rem, 2.4vh, 1.75rem) 0 0 clamp(1.1rem, 1.8vw, 1.75rem);
  /* Le filet part du bord du conteneur, pas du texte : c'est lui qui donne
     la largeur de référence et corrige l'impression de décentrage. */
  border-top: 1px solid rgba(251, 245, 233, 0.16);
  list-style: none;
}

.hero__proof-item { max-width: 22ch; }

.hero__proof-value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2vw, 1.9rem);
  line-height: 1;
  color: var(--brass);
}

/* Signes isolés par jsc_esc_signs(). Repris dans la fonte de texte, dont
   l'épaisseur est constante : le « + » et le « / » cessent de s'effacer
   derrière les chiffres en Bodoni. */
.signe {
  font-family: var(--font-body);

  /* Un signe doit se voir, jamais dominer : son trait reste sous celui des
     chiffres qu'il relie. Le réglage a été choisi à la mesure, en comparant
     l'épaisseur du trait du signe au fût d'un chiffre en Bodoni, aux trois
     tailles où cette classe sert :

                            stats réf.   repères hero   note globale
       Jost 500 @0.8em         92 %          94 %           98 %   ← trop près
       Jost 400 @1em           89 %          85 %           81 %   ← retenu

     Attention si l'on est tenté d'alourdir : le Bodoni est une fonte à taille
     optique variable, ses fûts s'affinent à mesure que le corps grandit. Un
     réglage jugé correct sur les grands chiffres passe au-dessus de la limite
     sur les petits. Toute modification se vérifie aux trois tailles. */
  font-weight: 400;
  font-size: 1em;
  padding-inline: 0.04em;
}

.hero__proof-label {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-transform: uppercase;
  color: rgba(251, 245, 233, 0.62);
}

/* Entrée en cascade : le bandeau se compose sous les yeux du visiteur plutôt
   que d'apparaître d'un bloc. Réservé aux navigateurs avec JS, comme le reste
   des animations du site, pour que le contenu reste visible sans script. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__badge,
  .js .hero__title,
  .js .hero__lead,
  .js .hero__actions,
  .js .hero__proof {
    animation: heroIn 0.85s var(--ease) backwards;
  }
  .js .hero__badge   { animation-delay: 0.05s; }
  .js .hero__title   { animation-delay: 0.14s; }
  .js .hero__lead    { animation-delay: 0.26s; }
  .js .hero__actions { animation-delay: 0.36s; }
  .js .hero__proof   { animation-delay: 0.46s; }
}
@keyframes heroIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* Retour depuis une autre page restaurée par le cache arrière/avant du
   navigateur (bfcache) : le texte est déjà visible, l'animation ne doit
   pas rejouer. Classe posée par main.js sur l'événement pageshow. */
.hero--no-anim .hero__badge,
.hero--no-anim .hero__title,
.hero--no-anim .hero__lead,
.hero--no-anim .hero__actions,
.hero--no-anim .hero__proof {
  animation: none !important;
}

/* — Variante « hero de page intérieure » — */
.page-hero {
  position: relative;
  padding-block: clamp(9rem, 16vw, 13rem) clamp(3.5rem, 7vw, 6rem);
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--ink-4);
}
.page-hero__bg { position: absolute; inset: 0; z-index: -2; }
.page-hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.1) brightness(0.5);
}
.page-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,10,9,0.9), rgba(11,10,9,0.72) 60%, var(--ink));
}
.page-hero__title { margin-bottom: 1.25rem; }
.page-hero__stats {
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid rgba(246, 241, 231, 0.14);
}

/* La section qui suit un hero de page intérieure démarre plus haut : le hero
   fait déjà office de respiration, et un padding plein y créait une large
   bande noire vide qui donnait l'impression d'une page sans contenu. */
.page-hero + .section { padding-top: clamp(2.5rem, 4.5vw, 4rem); }

/* Fil d'Ariane */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}
.breadcrumb li { display: flex; align-items: center; gap: 0.6rem; }
.breadcrumb li:not(:last-child)::after {
  content: "";
  width: 4px; height: 4px;
  background: var(--brass);
  transform: rotate(45deg);
  opacity: 0.7;
}
.breadcrumb a:hover { color: var(--brass); }
.breadcrumb [aria-current="page"] { color: var(--ivory-3); }

/* ==========================================================================
   09. BANDEAU DÉFILANT (standards du jazz)
   ========================================================================== */

.marquee {
  position: relative;
  padding-block: 1.6rem;
  background: var(--ink-2);
  border-block: 1px solid var(--ink-4);
  overflow: hidden;
  /* Estompe les deux extrémités pour éviter la coupe nette. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 42s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding-right: 2.5rem;
  flex: none;
}
.marquee__item {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 1.8vw, 1.5rem);
  color: var(--ivory-3);
  white-space: nowrap;
  opacity: 0.75;
}
.marquee__sep {
  width: 6px; height: 6px;
  background: var(--brass);
  transform: rotate(45deg);
  flex: none;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* le groupe est dupliqué une fois */
}

/* ==========================================================================
   10. COMPOSANTS DE SECTION
   ========================================================================== */

/* Image encadrée avec liseré décalé — utilisée dans les blocs « split ». */
/* Cadre façon affiche encadrée : un liseré doré et un léger passe-partout
   autour de la photo. L'ancien filet décalé n'affleurait que sur deux côtés et
   se lisait comme une bordure cassée dès que le format changeait ; ce cadre-ci
   reste cohérent en carré, en portrait comme en bandeau. */
.framed {
  --mat: clamp(8px, 1vw, 14px);
  position: relative;
  padding: var(--mat);
  border: 1px solid rgba(240, 180, 41, 0.38);
  border-radius: var(--radius);
}
/* Par défaut l'image garde ses proportions d'origine : aucun recadrage subi.
   Les photos du client vont du carré au portrait étroit ; leur imposer un
   ratio unique tronquait le sujet. Les recadrages sont donc opt-in ci-dessous. */
.framed img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  filter: saturate(1.12) contrast(1.04);
}
/* Recadrages volontaires — à n'appliquer qu'à une image qui s'y prête. */
.framed--square img   { aspect-ratio: 1 / 1;   object-fit: cover; }
.framed--portrait img { aspect-ratio: 3 / 4;   object-fit: cover; }
.framed--wide img     { aspect-ratio: 16 / 10; object-fit: cover; }

/* Étiquette posée sur une image (ex. « Trio · Ancenis »). */
/* Calée dans le coin inférieur gauche de la photo, à l'intérieur du passe-partout. */
.framed__caption {
  position: absolute;
  left: var(--mat); bottom: var(--mat);
  background: var(--ink);
  color: var(--ivory);
  padding: 0.6rem 1.2rem;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-left: 2px solid var(--brass);
}

/* Liste à puces « losange » pour les arguments. */
.checklist { display: grid; gap: 0.9rem; }
.checklist li {
  position: relative;
  padding-left: 1.9rem;
  color: var(--text-muted);
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 7px; height: 7px;
  background: var(--accent);
  transform: rotate(45deg);
}
.checklist strong { color: var(--text); font-weight: 500; }

/* ==========================================================================
   11. CARTES
   ========================================================================== */

/* — Carte prestation : grand chiffre fantôme + titre + texte — */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.45s var(--ease), transform 0.45s var(--ease);
}
/* Voile doré qui monte au survol. */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(201, 162, 75, 0.09));
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.card:hover {
  border-color: rgba(201, 162, 75, 0.55);
  transform: translateY(-5px);
}
.card:hover::before { opacity: 1; }
.card > * { position: relative; }

.card__num {
  font-family: var(--font-display);
  font-size: 3.2rem;
  line-height: 1;
  color: var(--accent);
  opacity: 0.55;
  margin-bottom: 1.1rem;
  transition: opacity 0.45s var(--ease);
}
.card:hover .card__num { opacity: 1; }

.card__title { font-size: 1.4rem; margin-bottom: 0.6rem; }
.card__text { color: var(--text-muted); font-size: 0.96rem; margin: 0; }

/* — Carte formule (Duo / Trio / Quartet) — */
/* La carte est une colonne flex : la description occupe l'espace disponible,
   ce qui repousse la rangée d'instruments en pied de carte. Les rangées
   s'alignent alors d'une carte à l'autre quelle que soit la longueur des
   textes — sans cela, chaque carte posait ses pastilles à une hauteur
   différente et la grille paraissait bancale. */
.formule {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 2.5vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* Aligné à gauche, et non centré : dans une colonne de 260 px, un texte
     centré se brise en lignes courtes de longueurs inégales, pénible à lire. */
  text-align: left;
  transition: transform 0.45s var(--ease), border-color 0.45s var(--ease), background 0.45s var(--ease);
}
.formule:hover { transform: translateY(-6px); border-color: rgba(201, 162, 75, 0.55); }

/* Formule mise en avant. */
.formule--featured {
  background: linear-gradient(180deg, rgba(240, 180, 41, 0.10), rgba(240, 180, 41, 0.02));
  border-color: rgba(240, 180, 41, 0.55);
  box-shadow: 0 0 0 1px rgba(240, 180, 41, 0.16);
}
.formule__ribbon {
  position: absolute;
  top: 0;
  left: clamp(1.5rem, 2.5vw, 2rem);
  transform: translateY(-50%);
  background: var(--brass);
  color: var(--ink);
  padding: 0.3rem 0.9rem;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Porte tantôt le numéro d'ordre (formules), tantôt une icône d'instrument
   (page « Le groupe ») : la taille de police ne concerne que le premier cas. */
.formule__count {
  font-family: var(--font-display);
  font-size: clamp(2rem, 2.6vw, 2.5rem);
  line-height: 1;
  color: var(--accent);
  margin-bottom: 0.4rem;
}
.formule__name {
  font-size: clamp(1.3rem, 1.8vw, 1.55rem);
  margin-bottom: 0.7rem;
}
.formule__text {
  color: var(--text-muted);
  font-size: 0.94rem;
  line-height: 1.65;
  margin-bottom: 1.4rem;
  flex: 1 1 auto;
}
.formule__insts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.4rem;
  /* Pas de filet de séparation ici : les pastilles s'alignant par le bas, une
     formation portant deux rangées d'instruments remonterait son filet plus
     haut que les autres. Les capsules se distinguent déjà assez du texte pour
     marquer la zone sans trait. */
  padding-top: 0.35rem;
}

/* — Répertoire d'une formule —
   Les titres de morceaux sont bien plus longs que des noms d'instruments :
   des capsules les feraient déborder. Une liste sobre en deux colonnes tient
   dix titres sans allonger démesurément la carte. */
/* — Vignette vidéo d'une formule —
   Le lecteur YouTube n'est inséré qu'au clic (voir jsc_video_facade et
   initVideos) : ce qui suit habille la vignette qui le remplace d'ici là. */
/* Fond noir : plusieurs de ces vidéos sont tournées en 4/3 et leurs vignettes
   arrivent avec des bandes noires incrustées. Sur un cadre noir elles se
   lisent comme le bord du film, et non comme un défaut de calage — mieux vaut
   cela que rogner l'image et couper les musiciens. */
.formule__video {
  margin-bottom: 1.4rem;
  background: #000;
}

.video-facade {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  cursor: pointer;
}
.video-facade__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* La vignette est en retrait tant qu'on ne la survole pas : elle annonce la
     vidéo sans voler la vedette au texte de la formule. */
  filter: saturate(0.9) brightness(0.72);
  transform: scale(1.01);
  transition: filter 0.45s var(--ease), transform 0.6s var(--ease);
}
.video-facade:hover .video-facade__img,
.video-facade:focus-visible .video-facade__img {
  filter: saturate(1.05) brightness(0.88);
  transform: scale(1.05);
}

.video-facade__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  padding-left: 4px; /* recentre optiquement le triangle */
  border-radius: 50%;
  background: rgba(10, 8, 6, 0.55);
  border: 1px solid rgba(240, 180, 41, 0.7);
  color: var(--brass);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), transform 0.35s var(--ease);
}
.video-facade:hover .video-facade__play,
.video-facade:focus-visible .video-facade__play {
  background: var(--brass);
  color: var(--ink);
  transform: translate(-50%, -50%) scale(1.08);
}

.formule__prog {
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

/* Le flex:1 posé sur la description sert à plaquer les pastilles d'instruments
   en pied de carte (page « Le groupe »). Sur une carte à répertoire il produit
   l'effet inverse : le filet s'éloigne du texte d'une distance qui varie selon
   la longueur du répertoire. On rend donc la description à sa hauteur
   naturelle — le filet suit la description qu'il sépare, et l'espace résiduel
   retombe en pied de carte, invisible sur un fond plein. */
.formule:has(.formule__prog) .formule__text { flex: 0 1 auto; }
.formule__prog-title {
  margin: 0 0 0.75rem;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.formule__titres {
  columns: 2;
  column-gap: 1.5rem;
}
.formule__titre {
  break-inside: avoid;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}

@media (max-width: 620px) {
  .formule__titres { columns: 1; }
}
.formule__inst {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 100px;
  color: var(--text-muted);
}

/* — Encart « sur mesure » : posé sous la grille des formules, il porte le
     message principal de la section. Volontairement distinct des cartes
     (pas de bordure pleine, fond dégradé) pour ne pas se lire comme une
     formule supplémentaire. — */
/* Deux colonnes : le propos à gauche, la palette d'instruments et l'appel à
   l'action à droite. Le pavé centré qu'on avait auparavant s'étalait sur
   toute la largeur et cassait les phrases au milieu — jusqu'à séparer un
   groupe de mots en gras d'une ligne à l'autre. */
.sur-mesure {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  column-gap: clamp(2rem, 4vw, 3.5rem);
  row-gap: 1.5rem;
  align-items: start;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding: clamp(1.75rem, 3.5vw, 3rem);
  background: linear-gradient(135deg, rgba(240, 180, 41, 0.10), rgba(176, 27, 46, 0.08));
  border: 1px solid rgba(240, 180, 41, 0.28);
  border-radius: var(--radius);
  text-align: left;
}
.sur-mesure__body { max-width: 54ch; }
.sur-mesure__title {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  margin-bottom: 0.85rem;
}
.sur-mesure__text {
  color: var(--text-muted);
  font-size: 0.98rem;
}
.sur-mesure__text strong { color: var(--text); font-weight: 500; }

.sur-mesure__cta { margin: 1.75rem 0 0; }

/* Deux palettes — les couleurs, les instruments — donnent à voir concrètement
   ce qui est modulable. Elles ont remplacé la section « Nos ambiances », qui
   redisait les formules sous un autre angle. */
.sur-mesure__palettes {
  display: grid;
  gap: 1.75rem;
}
.sur-mesure__palette-title {
  margin: 0 0 0.7rem;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.sur-mesure__insts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.45rem;
  margin: 0;
}

/* Sous 860 px, les deux colonnes n'ont plus la place de cohabiter : la
   palette passerait à deux mots par ligne. */
@media (max-width: 860px) {
  .sur-mesure { grid-template-columns: 1fr; }
  .sur-mesure__body { max-width: none; }
}

/* — Avis clients —
     Les textes proviennent de Mariages.net et sont reproduits littéralement,
     avec mention de la source et lien vers le profil : le visiteur doit pouvoir
     les vérifier. Aucun balisage Review/AggregateRating n'est posé côté site —
     voir la note dans le README. */
.note-globale {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
  background: linear-gradient(135deg, rgba(240, 180, 41, 0.10), rgba(176, 27, 46, 0.07));
  border: 1px solid rgba(240, 180, 41, 0.3);
  border-radius: var(--radius);
}
.note-globale__score {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-family: var(--font-display);
  line-height: 1;
}
.note-globale__val { font-size: clamp(2.4rem, 4.5vw, 3.2rem); color: var(--accent); }
.note-globale__sur { font-size: 1.1rem; color: var(--text-muted); }
.note-globale__detail { text-align: left; }
.note-globale__detail p { margin: 0; font-size: 0.9rem; color: var(--text-muted); }
.note-globale__detail strong { color: var(--text); font-weight: 500; }

/* Rangée d'étoiles ; les étoiles vides restent visibles pour rester honnête. */
.etoiles { display: inline-flex; gap: 2px; vertical-align: middle; }
.etoiles svg { width: 15px; height: 15px; }
.etoiles .pleine { color: var(--accent); }
.etoiles .vide   { color: var(--border); }

.avis {
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 3vw, 2.25rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.avis:hover { border-color: rgba(240, 180, 41, 0.5); transform: translateY(-4px); }

.avis__note { margin-bottom: 0.9rem; }
.avis__titre {
  font-size: 1.15rem;
  line-height: 1.3;
  margin-bottom: 0.7rem;
}
/* Guillemet ouvrant en gros Bodoni : signale la citation sans alourdir. */
.avis__texte {
  position: relative;
  color: var(--text-muted);
  font-size: 0.96rem;
  margin-bottom: 1.4rem;
  flex: 1;
}
.avis__texte::before {
  content: "«";
  font-family: var(--font-display);
  font-size: 2.2rem;
  line-height: 0;
  color: var(--accent);
  opacity: 0.5;
  margin-right: 0.3rem;
  vertical-align: -0.35em;
}
.avis__auteur {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  margin: 0;
}
.avis__nom {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--text);
}
.avis__date {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* — Mur de références (aperçu sur l'accueil) —
     Faute de logos exploitables, les noms sont traités typographiquement, en
     Bodoni discret, comme le seraient des logotypes sur un mur de références. */
.logo-wall {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}
.logo-wall__item {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.5vw, 1.2rem);
  color: var(--text-muted);
  padding: 0.7rem 1.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.logo-wall__item:hover {
  color: var(--text);
  border-color: var(--accent);
  transform: translateY(-3px);
}

/* — Chiffres clés — */
.stat { text-align: center; }
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 3.8rem);
  line-height: 1;
  color: var(--accent);
  margin-bottom: 0.4rem;
}
.stat__label {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

/* — Références clients —
     Présentation typographique plutôt que logotypée : les logos disponibles
     sont de formats et de qualités trop hétérogènes pour cohabiter proprement,
     et une liste de noms se lit mieux qu'une mosaïque disparate. */
.ref-group {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  height: 100%;
}
.ref-group__title {
  font-size: 1.25rem;
  padding-bottom: 0.9rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--accent);
}
.ref-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--text);
}
.ref-list__item:last-child { border-bottom: 0; padding-bottom: 0; }
/* Ville ou précision, en retrait typographique du nom principal. */
.ref-list__place {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* — Carte ambiance : liseré coloré à gauche — */
.ambiance {
  position: relative;
  padding: 1.6rem 1.6rem 1.6rem 2.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius);
  transition: transform 0.4s var(--ease), background 0.4s var(--ease);
}
.ambiance:hover { transform: translateX(5px); }
.ambiance__name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  margin-bottom: 0.4rem;
}
/* Sur-titre d'une carte « ambiance » : sert à annoncer les instruments
   d'un musicien dans la section « Les musiciens ». */
.ambiance__inst {
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.ambiance__text { font-size: 0.92rem; color: var(--text-muted); margin: 0; }

/* — Carte musicien — */
.musicien { position: relative; }
.musicien__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
  background: var(--ink-2);
}
.musicien__media img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.05) brightness(0.95);
  transition: filter 0.6s var(--ease), transform 0.7s var(--ease);
}
/* Le noir et blanc reprend des couleurs au survol : la scène s'allume. */
.musicien:hover .musicien__media img {
  filter: saturate(1.15) contrast(1.05) brightness(1.02);
  transform: scale(1.04);
}
.musicien__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(11, 10, 9, 0.85));
}
.musicien__inst {
  position: absolute;
  left: 1.1rem; bottom: 1.1rem;
  z-index: 1;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
}
.musicien__name { font-size: 1.5rem; margin-bottom: 0.3rem; }
.musicien__role { color: var(--text-muted); font-size: 0.92rem; margin: 0; }

/* — Carte média (écoute / vidéo) — */
.media-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  isolation: isolate;
}
.media-card img {
  width: 100%;
  /* Les deux visuels sont carrés : un 16/10 en amputait plus d'un tiers.
     Le 4/3 garde les cartes homogènes en ne rognant que le strict nécessaire. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(1.1) brightness(0.62);
  transition: transform 0.7s var(--ease), filter 0.7s var(--ease);
}
.media-card:hover img { transform: scale(1.05); filter: saturate(1.25) brightness(0.78); }
.media-card__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: linear-gradient(180deg, transparent, rgba(11, 10, 9, 0.92));
}
/* Ces éléments sont des <span> (la carte entière est un lien, qui ne peut pas
   contenir de <p> ou de <h3>) : il faut donc les repasser en bloc à la main. */
.media-card__title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.2;
  margin-bottom: 0.4rem;
  color: var(--ivory);
}
.media-card__text {
  display: block;
  color: var(--ivory-3);
  font-size: 0.92rem;
  margin-bottom: 1rem;
}
.media-card__body .link-arrow { display: inline-flex; }

/* Bouton lecture circulaire centré. */
.media-card__play {
  position: absolute;
  top: 42%; left: 50%;
  transform: translate(-50%, -50%);
  width: 72px; height: 72px;
  display: grid;
  place-items: center;
  border: 1px solid var(--brass);
  border-radius: 50%;
  background: rgba(11, 10, 9, 0.45);
  color: var(--brass);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.4s var(--ease), color 0.4s var(--ease), transform 0.4s var(--ease);
}
.media-card:hover .media-card__play {
  background: var(--brass);
  color: var(--ink);
  transform: translate(-50%, -50%) scale(1.08);
}

/* Conteneur d'iframe responsive (SoundCloud, YouTube). */
.embed {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-2);
}
.embed--video { aspect-ratio: 16 / 9; }
.embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Le lecteur audio n'a pas de ratio fixe : sa hauteur est pilotée par
   --embed-h, réglable au cas par cas (piste seule vs playlist). */
.embed--audio { min-height: var(--embed-h, 320px); }
.embed--audio iframe { position: relative; height: var(--embed-h, 320px); }

/* ==========================================================================
   12. RÉPERTOIRE
   ========================================================================== */

.repertoire {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0;
  border-top: 1px solid var(--border);
}
.repertoire__item {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 1rem 0.5rem;
  border-bottom: 1px solid var(--border);
  transition: background 0.35s var(--ease), padding-left 0.35s var(--ease);
}
.repertoire__item:hover { background: rgba(201, 162, 75, 0.06); padding-left: 1rem; }
.repertoire__idx {
  font-family: var(--font-display);
  font-size: 0.78rem;
  color: var(--accent);
  opacity: 0.6;
  flex: none;
  min-width: 1.6rem;
}
.repertoire__title {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-style: italic;
  color: var(--text);
}

/* ==========================================================================
   13. ZONE D'INTERVENTION
   ========================================================================== */

.zones { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }

.zone {
  padding: 1.5rem 1.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.4s var(--ease);
}
.zone:hover { border-color: rgba(201, 162, 75, 0.5); }
.zone__dept {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin-bottom: 0.7rem;
}
.zone__num {
  font-family: var(--font-display);
  font-size: 1.9rem;
  color: var(--accent);
  line-height: 1;
}
.zone__name {
  font-family: var(--font-display);
  font-size: 1.22rem;
  color: var(--text);
}
.zone__cities { font-size: 0.88rem; color: var(--text-muted); margin: 0; }

/* Nuage de communes : dense, discret, mais lisible par les moteurs. */
/* — Carte de la zone d'intervention —
   ---------------------------------------------------------------------------
   Le tracé est en SVG dans la page, et non en image : il se colore avec les
   jetons de la section, donc il reste juste que le fond soit clair ou sombre.
   Une image aurait figé un des deux cas.

   Trois plans, et c'est tout le propos de la carte : le pays sert de fond
   presque blanc, les régions voisines s'annoncent, les Pays de la Loire
   s'imposent. */
.carte {
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  max-width: 640px;
}

.carte__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Le reste du pays : un blanc cassé, à peine détaché du fond.
   ---------------------------------------------------------------------------
   Le blanc pur a été écarté : contre l'ivoire chaud du site, il tire au bleu
   et le pays semble découpé dans une autre matière. Les trois teintes sont
   donc mélangées à partir du fond et de l'encre de la section, ce qui les
   garde dans la même famille chaude — et fonctionne aussi bien sur fond
   sombre, où le mélange s'inverse de lui-même.

   La première déclaration de chaque paire est un repli : sans elle, un
   navigateur ignorant color-mix() n'afficherait rien du tout. */
.carte__region.is-fond {
  fill: #F4EDDD;
  fill: color-mix(in srgb, var(--text) 5%, var(--bg));
  stroke: #E7DAC2;
  stroke: color-mix(in srgb, var(--text) 13%, var(--bg));
  stroke-width: 1.1;
}

/* Les régions limitrophes : présentes, sans revendiquer la vedette. */
.carte__region.is-proche {
  fill: #E7D5AE;
  fill: color-mix(in srgb, var(--accent) 28%, var(--bg));
  stroke: var(--bg);
  stroke-width: 1.4;
}

.carte__region.is-coeur {
  fill: var(--accent);
  stroke: var(--bg);
  stroke-width: 1.4;
}

.carte__region {
  stroke-linejoin: round;
}

/* Les villes : la SURFACE du point est proportionnelle à la population,
   pas son rayon — voir inc/carte-france.php. */
.carte__ville {
  fill: var(--text);
  fill-opacity: 0.5;
}

/* Dans les Pays de la Loire, le fond est doré : le point y passe en encre
   pleine pour rester lisible. */
.carte__ville.is-coeur {
  fill: var(--text);
  fill-opacity: 0.85;
}

/* Le liseré de la couleur du fond détache le nom des tracés qu'il croise :
   sans lui, « Rennes » posé sur une frontière devient illisible. */
.carte__ville-nom {
  font-family: var(--font-body);
  font-size: 19px;
  fill: var(--text);
  fill-opacity: 0.8;
  stroke: var(--bg);
  stroke-width: 4;
  paint-order: stroke fill;
  stroke-linejoin: round;
}

.carte__ville-nom.is-coeur {
  fill-opacity: 1;
  font-weight: 500;
  stroke: var(--accent);
}

.carte__legende {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.75rem;
  margin-top: 1.25rem;
}

.carte__cle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.carte__cle::before {
  content: "";
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 2px;
  background: var(--border);
}

.carte__cle--coeur::before { background: var(--accent); }
.carte__cle--proche::before {
  background: #E7D5AE;
  background: color-mix(in srgb, var(--accent) 28%, var(--bg));
}

/* Sous 620 px, les noms de villes se chevauchent : la carte reste lisible,
   la légende continue de dire ce que montrent les couleurs. */
@media (max-width: 620px) {
  .carte__ville-nom { display: none; }
}

.city-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2.5rem;
}
.city-cloud li {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 100px;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.city-cloud li:hover { color: var(--accent); border-color: var(--accent); }

/* ==========================================================================
   14. FAQ (accordéon)
   ========================================================================== */

.faq { border-top: 1px solid var(--border); }

.faq__item { border-bottom: 1px solid var(--border); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.4rem 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  color: var(--text);
  transition: color 0.3s var(--ease);
}
.faq__q:hover { color: var(--accent); }

/* Icône « + » qui pivote en « × » à l'ouverture. */
.faq__icon {
  position: relative;
  flex: none;
  width: 20px; height: 20px;
  transition: transform 0.45s var(--ease);
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
}
.faq__icon::before { width: 16px; height: 1.5px; }
.faq__icon::after  { width: 1.5px; height: 16px; transition: opacity 0.35s var(--ease); }

.faq__q[aria-expanded="true"] .faq__icon { transform: rotate(180deg); }
.faq__q[aria-expanded="true"] .faq__icon::after { opacity: 0; }

/* L'animation de hauteur est pilotée en JS via max-height. */
.faq__a {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s var(--ease);
}
.faq__a-inner {
  padding-bottom: 1.6rem;
  padding-right: 3rem;
  color: var(--text-muted);
  max-width: var(--wrap-text);
}

/* ==========================================================================
   15. FORMULAIRE DE CONTACT
   ========================================================================== */

.form { display: grid; gap: 1.35rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.35rem; }
.form__field { display: flex; flex-direction: column; gap: 0.5rem; }

.form__label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.form__label .req { color: var(--brass); }

.form__input,
.form__select,
.form__textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--ivory);
  font-size: 0.98rem;
  font-weight: 300;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.form__input::placeholder,
.form__textarea::placeholder { color: #6C6355; }

.form__input:focus,
.form__select:focus,
.form__textarea:focus {
  outline: none;
  border-color: var(--brass);
  background: var(--ink-3);
}

.form__textarea { resize: vertical; min-height: 150px; }

/* Flèche personnalisée du select (l'apparence native est masquée). */
.form__select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C9A24B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}
.form__select option { background: var(--ink-2); color: var(--ivory); }

.form__consent {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.84rem;
  color: var(--text-muted);
}
.form__consent input {
  margin-top: 0.3rem;
  accent-color: var(--brass);
  width: 16px; height: 16px;
  flex: none;
}
.form__consent a { color: var(--brass); text-decoration: underline; text-underline-offset: 3px; }

.form__note { font-size: 0.8rem; color: var(--text-muted); }

/* Bloc coordonnées à côté du formulaire. */
.contact-info { display: grid; gap: 1.75rem; }
.contact-info__item { display: flex; gap: 1.1rem; align-items: flex-start; }
.contact-info__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid rgba(201, 162, 75, 0.4);
  border-radius: var(--radius);
  color: var(--brass);
}
.contact-info__label {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}
.contact-info__value {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--text);
  word-break: break-word;
}
a.contact-info__value:hover { color: var(--brass); }

/*
 * Lien vers le dépliant PDF.
 *
 * Discret : ni bouton ni couleur pleine, il ne dispute rien au téléphone ni
 * au formulaire, qui restent les deux gestes attendus de cette page. Visible
 * quand même : un filet en pointillé le détache du bloc de coordonnées, et
 * l'icône signale un téléchargement avant le clic.
 */
.lien-depliant {
  display: flex;
  align-items: center;
  /*
   * Le repli dépend de la place réellement disponible, pas d'une largeur de
   * fenêtre décidée à l'avance : le poids passe sous le libellé quand la
   * carte devient étroite, quelle qu'en soit la raison.
   */
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px dashed rgba(201, 162, 75, 0.28);
  font-size: 0.9rem;
  color: var(--text-muted);
  transition: color 0.2s ease;
}
.lien-depliant__icone {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--brass);
}
/*
 * Pas de mise en capitales ici : elle transformerait « Ko » en « KO », qui
 * n'est pas l'abréviation française du kilo-octet.
 */
.lien-depliant__poids {
  margin-left: auto;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  opacity: 0.75;
  white-space: nowrap;
}
.lien-depliant:hover { color: var(--brass); }
.lien-depliant:hover span:nth-child(2) { text-decoration: underline; text-underline-offset: 4px; }

/*
 * Le code QR des coordonnées.
 *
 * Il garde son fond clair : un code QR se lit par le contraste entre ses
 * modules et son fond, l'inverser ou le teinter le rendrait illisible pour
 * une partie des appareils. C'est la seule tache claire de la carte, et un
 * liseré de laiton l'y rattache.
 */
.qr-contact {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.25rem;
}

.qr-contact__vignette {
  flex: none;
  display: block;
  padding: 5px;
  background: var(--ivory, #FBF5E9);
  border: 1px solid rgba(201, 162, 75, 0.35);
  border-radius: var(--radius);
  line-height: 0;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.qr-contact__vignette:hover,
.qr-contact__vignette:focus-visible {
  border-color: var(--brass);
  transform: scale(1.04);
}

.qr-contact__vignette img { display: block; width: 78px; height: 78px; }

.qr-contact__titre {
  margin: 0 0 0.2rem;
  font-size: 0.86rem;
  color: var(--text);
}

.qr-contact__aide {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Un bouton qui se donne l'air d'un lien : l'action ouvre une boîte de
   dialogue, ce n'est pas une navigation — mais elle doit se lire comme telle. */
.qr-contact__loupe {
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  color: var(--brass);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.qr-contact__loupe:hover { color: var(--brass-lt); }

/* Le téléchargement de la fiche : plus petit encore que l'aide au-dessus,
   c'est le second recours et non la proposition principale. */
.qr-contact__vcard {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.35rem;
  font-size: 0.74rem;
  color: var(--text-muted);
  transition: color 0.2s var(--ease);
}

.qr-contact__vcard:hover { color: var(--brass); }
.qr-contact__vcard:hover span:nth-child(2) { text-decoration: underline; text-underline-offset: 3px; }

.qr-contact__vcard-icone {
  display: grid;
  place-items: center;
  color: var(--brass);
}

.qr-contact__format {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  padding: 0.1rem 0.3rem;
  border: 1px solid rgba(201, 162, 75, 0.3);
  border-radius: 2px;
  opacity: 0.8;
}

/* — L'agrandissement — */

.qr-modale {
  width: min(92vw, 380px);
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
  color: var(--text);
}

.qr-modale::backdrop {
  background: rgba(10, 8, 6, 0.82);
  backdrop-filter: blur(3px);
}

.qr-modale img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--ivory, #FBF5E9);
  padding: 10px;
  border-radius: var(--radius);
}

.qr-modale__legende {
  margin: 1rem 0 0;
  font-size: 0.82rem;
  text-align: center;
  color: var(--text-muted);
}

.qr-modale__fermer {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.qr-modale__fermer:hover {
  color: var(--brass);
  background: rgba(201, 162, 75, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .qr-contact__vignette { transition: none; }
  .qr-contact__vignette:hover { transform: none; }
}

/* ==========================================================================
   16. BANDEAU D'APPEL À L'ACTION
   ========================================================================== */

.cta-band {
  position: relative;
  padding-block: clamp(4rem, 8vw, 7rem);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.cta-band__bg { position: absolute; inset: 0; z-index: -2; }
.cta-band__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Sources carrées coupées en bandeau très large : on cadre légèrement haut
     pour garder les musiciens plutôt que le sol. */
  object-position: center 38%;
  filter: saturate(1.15) brightness(0.4);
}
.cta-band__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11,10,9,0.86), rgba(11,10,9,0.78)),
    radial-gradient(ellipse at center, rgba(124,43,43,0.28), transparent 68%);
}
.cta-band__title { margin-bottom: 1.25rem; }
.cta-band__text {
  color: var(--ivory-2);
  font-size: var(--fs-lead);
  max-width: 58ch;
  margin: 0 auto 2.25rem;
}
.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* ==========================================================================
   17. PIED DE PAGE
   ========================================================================== */

.site-footer {
  background: var(--ink-2);
  border-top: 1px solid var(--ink-4);
  padding-block: clamp(3.5rem, 6vw, 5rem) 2rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 3rem;
}

.footer__about { max-width: 40ch; }
.footer__about .brand { margin-bottom: 1.25rem; }

.footer__title {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivory);
  margin-bottom: 1.25rem;
}

.footer__list { display: grid; gap: 0.65rem; }
.footer__list a:hover { color: var(--brass); }

.footer__socials { display: flex; gap: 0.6rem; margin-top: 1.5rem; }
.footer__social {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--ink-4);
  border-radius: var(--radius);
  color: var(--ivory-3);
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease), background 0.35s var(--ease);
}
.footer__social:hover {
  color: var(--ink);
  background: var(--brass);
  border-color: var(--brass);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--ink-4);
  font-size: 0.8rem;
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.footer__legal a:hover { color: var(--brass); }

/* ==========================================================================
   18. RETOUR EN HAUT
   ========================================================================== */

/* Les deux pastilles du coin bas-droit : le partage, toujours présent, et le
   retour en haut, qui apparaît au-dessus une fois la page défilée.
   z-index sous l'en-tête (1000) pour ne jamais passer par-dessus le menu. */
.flottants {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 950;
}

/* Hors du flux : son apparition ne doit pas déplacer le bouton de partage. */
.back-to-top {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.65rem);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: var(--brass);
  color: var(--ink);
  border: 1px solid var(--brass);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  /* visibility masquée : la sort aussi de l'ordre de tabulation tant qu'elle
     n'est pas utile, plutôt que de laisser un bouton invisible focalisable. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease),
              visibility 0.4s, background-color 0.3s var(--ease);
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.back-to-top:hover {
  background: var(--brass-lt);
  border-color: var(--brass-lt);
}
.back-to-top:active { transform: translateY(2px); }
.back-to-top svg { display: block; }

@media (max-width: 720px) {
  .back-to-top { width: 44px; height: 44px; }
}

/* ==========================================================================
   18 bis. PARTAGE
   ========================================================================== */

/*
 * La pastille de partage est volontairement en creux là où le retour en haut
 * est en plein : deux disques de laiton côte à côte se disputeraient l'œil, et
 * le partage est une proposition, pas l'action attendue de la page.
 */
.partage { position: relative; }

.partage__btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: var(--bg-alt);
  color: var(--brass);
  border: 1px solid rgba(201, 162, 75, 0.45);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease),
              color 0.3s var(--ease), transform 0.3s var(--ease);
}
.partage__btn:hover,
.partage__btn[aria-expanded="true"] {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--ink);
}
.partage__btn:active { transform: translateY(2px); }
.partage__btn svg { display: block; }

/* Le panneau s'ouvre vers la gauche, et non vers le haut : au-dessus se
   trouve le retour en haut de page, qu'il recouvrirait. À gauche il reste de
   la place jusqu'à 320 pixels de large, soit en deçà de tout téléphone. */
.partage__panneau {
  position: absolute;
  right: calc(100% + 0.65rem);
  bottom: 0;
  width: max-content;
  min-width: 208px;
  padding: 1rem 0.9rem 0.8rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px -12px rgba(0, 0, 0, 0.7);
}
.partage__panneau[hidden] { display: none; }

.partage__titre {
  margin: 0 0 0.7rem 0.55rem;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.partage__liste { list-style: none; margin: 0; padding: 0; }

.partage__lien {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.5rem 0.55rem;
  background: none;
  border: 0;
  border-radius: calc(var(--radius) * 0.6);
  font: inherit;
  font-size: 0.88rem;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.partage__lien:hover { background: rgba(201, 162, 75, 0.1); color: var(--brass); }
.partage__icone { flex: none; display: grid; place-items: center; color: var(--brass); }

/* Repli discret après la copie : le libellé dit ce qui s'est passé, sans
   fenêtre d'alerte ni pastille qui recouvrirait le panneau. */
.partage__lien.est-copie { color: var(--brass); }

@media (max-width: 720px) {
  .partage__btn { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .partage__btn { transition: none; }
}

/* ==========================================================================
   19. ANIMATIONS & ÉTATS
   ========================================================================== */

/* Apparition au défilement, activée par IntersectionObserver (main.js).
   Sans JS, .reveal reste visible : le contenu n'est jamais masqué durablement. */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* Décalages en cascade pour les grilles. */
.js .reveal[data-delay="1"] { transition-delay: 0.09s; }
.js .reveal[data-delay="2"] { transition-delay: 0.18s; }
.js .reveal[data-delay="3"] { transition-delay: 0.27s; }
.js .reveal[data-delay="4"] { transition-delay: 0.36s; }
.js .reveal[data-delay="5"] { transition-delay: 0.45s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   20. RESPONSIVE
   ========================================================================== */

@media (max-width: 1080px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__about { grid-column: 1 / -1; }
}

@media (max-width: 960px) {
  html { scroll-padding-top: 80px; }

  /* Le backdrop-filter de l'en-tête créerait un conteneur pour le menu fixe
     après défilement : le panneau se limiterait alors à la hauteur du header. */
  .site-header.is-stuck {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .scroll-cue { display: none; }

  /* Le menu passe en panneau plein écran. */
  .nav-toggle { display: grid; }

  .nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    flex-direction: column;
    justify-content: center;
    gap: 1.75rem;
    background: var(--ink);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0.4s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav-toggle { position: relative; z-index: 2; }
  .nav__link { font-size: 1.05rem; letter-spacing: 0.2em; }
  .nav__link::after { display: none; }

  .header__phone span { display: none; }
  .header__phone {
    width: 46px; height: 46px;
    justify-content: center;
    border: 1px solid rgba(201, 162, 75, 0.4);
    border-radius: var(--radius);
  }

  /* Le texte occupe désormais toute la largeur : le voile latéral ne protège
     plus rien. On repasse à un assombrissement uniforme. */
  .hero__bg::after {
    background:
      radial-gradient(ellipse 90% 50% at 50% 30%, rgba(240,180,41,0.18), transparent 72%),
      linear-gradient(180deg, rgba(10,8,6,0.86) 0%, rgba(10,8,6,0.72) 45%, rgba(10,8,6,0.94) 100%);
  }

  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }

  .split { grid-template-columns: 1fr; gap: 2.5rem; }
  .split--reverse .split__media { order: 0; }
  /* Une fois les colonnes empilées, une photo portrait à pleine largeur
     occuperait tout l'écran en hauteur : on borne la colonne et on la centre. */
  .split__media {
    width: 100%;
    max-width: 480px;
    margin-inline: auto;
  }
  .framed::before { inset: -10px -10px 10px 10px; }
}

@media (max-width: 720px) {
  .hero { min-height: auto; padding-block: 7.5rem 3.5rem; }
  .hero__lead { max-width: none; }

  /* Deux repères par ligne plutôt qu'une colonne interminable. */
  .hero__proof {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 1.5rem;
  }
  .hero__proof-item { max-width: none; }

  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: 1fr; }

  .form__row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .btn { width: 100%; }
  .hero__actions .btn,
  .cta-band__actions .btn { width: auto; flex: 1 1 auto; }
}

@media (max-width: 420px) {
  .brand__name { font-size: 1.1rem; }
  .brand__tag { font-size: 0.52rem; letter-spacing: 0.22em; }
  .repertoire { grid-template-columns: 1fr; }
}

/* ==========================================================================
   IMPRESSION
   ========================================================================== */

@media print {
  .site-header,
  .marquee,
  .cta-band,
  .nav-toggle { display: none !important; }
  body { background: #fff; color: #000; }
  body::after { display: none; }
  .section { padding-block: 1.5rem; background: #fff; color: #000; }
  a { text-decoration: underline; }
}

/* Date de mise à jour des mentions légales.
   Détachée du texte par un filet : ce n'est pas une clause de plus, c'est un
   renseignement sur le document lui-même. */
.mentions-maj {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-size: 0.82rem;
  color: var(--text-muted);
}