/* ============================================================
   École de Musique Harmonie — feuille unique
   Bleu nuit profond + laiton chaud. Playfair Display / Nunito Sans.
   Dispositif signature : LA NOTE QUI COURT (bord bas horizontal).
   ============================================================ */

:root {
  --encre: #060B14;
  --nuit: #0B1220;
  --nuit-2: #111C2E;
  --nuit-3: #1B2942;
  --craie: #E9EDF4;
  --craie-2: #A6B4C8;
  --papier: #EDE7DA;
  --laiton: #C9A24B;
  --laiton-clair: #E4CB8D;

  --t-mega: clamp(2.9rem, 7.4vw, 6.4rem);
  --t-h1: clamp(2.2rem, 4.6vw, 3.8rem);
  --t-h2: clamp(1.6rem, 2.9vw, 2.5rem);
  --t-h3: clamp(1.15rem, 1.5vw, 1.42rem);
  --t-corps: clamp(1rem, 0.95vw, 1.1rem);
  --t-petit: 0.83rem;

  --e1: 0.5rem;
  --e2: 1rem;
  --e3: 2rem;
  --e4: 3.25rem;
  --e5: 5.5rem;
  --e6: 8.5rem;

  --gouttiere: clamp(1.25rem, 5vw, 4.5rem);
  --display: "Playfair Display", Georgia, serif;
  --texte: "Nunito Sans", "Trebuchet MS", sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--nuit);
  color: var(--craie);
  font-family: var(--texte);
  font-size: var(--t-corps);
  font-weight: 300;
  line-height: 1.72;
  padding-bottom: 6.5rem;
  overflow-x: hidden;
}

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

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.08;
  margin: 0;
  letter-spacing: -0.012em;
  overflow-wrap: break-word;
}

p { margin: 0 0 var(--e2); }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

/* ---------- utilitaires typographiques ---------- */

.sur {
  font-size: var(--t-petit);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--craie-2);
  margin: 0 0 var(--e2);
  display: block;
}

.sur--accent { color: var(--laiton); }

.chapo {
  font-size: clamp(1.1rem, 1.5vw, 1.32rem);
  line-height: 1.6;
  color: var(--craie);
  font-weight: 300;
}

.doux { color: var(--craie-2); }

.ital { font-style: italic; }

.saut {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--craie);
  color: var(--nuit);
  padding: var(--e1) var(--e2);
  z-index: 200;
}
.saut:focus { left: var(--e2); top: var(--e2); }

/* ---------- en-tête ---------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e2) var(--gouttiere);
  background: rgba(11, 18, 32, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--nuit-3);
}

.marque {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.marque__nom {
  font-family: var(--display);
  font-size: 1.6rem;
  letter-spacing: 0.01em;
}

.marque__sous {
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--craie-2);
  margin-top: 0.42rem;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 2rem);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nav a {
  text-decoration: none;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--craie-2);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color 0.25s, border-color 0.25s;
}

.nav a:hover,
.nav a:focus-visible { color: var(--craie); border-bottom-color: var(--nuit-3); }

.nav a[aria-current="page"] { color: var(--craie); border-bottom-color: var(--craie-2); }

.nav__cta {
  border: 1px solid var(--laiton);
  color: var(--laiton) !important;
  padding: 0.5rem 0.95rem;
  border-bottom-color: var(--laiton) !important;
}

.nav__cta:hover,
.nav__cta:focus-visible {
  background: var(--laiton);
  color: var(--encre) !important;
}

/* ---------- grille ---------- */

.bloc {
  padding: var(--e6) var(--gouttiere);
  position: relative;
}

.bloc--serre { padding-top: var(--e5); padding-bottom: var(--e5); }

.bloc--clair {
  background: var(--papier);
  color: #1A1A18;
}

.bloc--clair .doux { color: #4B4F49; }
.bloc--clair .sur { color: #5C6058; }
.bloc--clair .sur--accent { color: #8A6A1B; }

.bloc--nuit2 { background: var(--nuit-2); }

.grille {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--e3);
  max-width: 1360px;
  margin: 0 auto;
  width: 100%;
}

.filet {
  height: 1px;
  background: var(--nuit-3);
  border: 0;
  margin: 0;
}

.bloc--clair .filet { background: #C9C0AC; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 82svh;
  display: flex;
  align-items: flex-end;
  padding: var(--e6) var(--gouttiere) var(--e5);
  overflow: hidden;
  border-bottom: 1px solid var(--nuit-3);
}

.hero__fond {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__fond img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}

.hero__voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(105deg, rgba(6, 11, 20, 0.95) 8%, rgba(6, 11, 20, 0.72) 44%, rgba(6, 11, 20, 0.28) 78%),
    linear-gradient(to top, rgba(6, 11, 20, 0.92), rgba(6, 11, 20, 0) 42%);
}

.hero .grille { position: relative; z-index: 2; }

.hero__titre {
  font-size: var(--t-mega);
  max-width: 15ch;
}

.hero__note {
  font-size: 0.86rem;
  color: var(--craie-2);
  border-left: 1px solid var(--laiton);
  padding-left: var(--e2);
}

.hero--court { min-height: 56svh; align-items: flex-end; }
.hero--court .hero__titre { font-size: var(--t-h1); max-width: 18ch; }

/* ---------- textes longs ---------- */

.mesure { max-width: 62ch; }

.tit-section {
  font-size: var(--t-h2);
  max-width: 20ch;
}

.tit-page {
  font-size: var(--t-h1);
  max-width: 16ch;
}

main h1 + p,
main h2 + p,
main h2 + ul,
main h2 + ol,
main h2 + .tarifs-enveloppe,
main .sur + h2 + p { margin-top: var(--e3); }

main .sur + h2 { margin-top: 0; }

/* ---------- listes de propos ---------- */

.propos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e3);
}

.propos li {
  border-top: 1px solid var(--nuit-3);
  padding-top: var(--e2);
}

.bloc--clair .propos li { border-top-color: #C9C0AC; }

.propos h3 {
  font-size: var(--t-h3);
  margin-bottom: var(--e1);
}

.propos p { font-size: 0.97rem; color: var(--craie-2); }
.bloc--clair .propos p { color: #4B4F49; }

/* ---------- cadre image ---------- */

.cadre { overflow: hidden; }

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

.cadre__legende {
  font-size: var(--t-petit);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--craie-2);
  margin-top: var(--e2);
  display: block;
}

.cadre--haut { aspect-ratio: 4 / 5; }
.cadre--large { aspect-ratio: 16 / 9; }
.cadre--carre { aspect-ratio: 1 / 1; }

/* ---------- pupitre (encart) ---------- */

.pupitre {
  border: 1px solid var(--nuit-3);
  padding: var(--e3);
  background: var(--nuit-2);
}

.bloc--clair .pupitre {
  border-color: #C9C0AC;
  background: #E4DCC9;
}

.pupitre h3 {
  font-size: var(--t-h3);
  margin-bottom: var(--e2);
}

/* ---------- tableau de tarifs ---------- */

.tarifs-enveloppe { overflow-x: auto; }

.tarifs {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  min-width: 32rem;
}

.tarifs caption {
  text-align: left;
  font-size: var(--t-petit);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--craie-2);
  padding-bottom: var(--e2);
}

.bloc--clair .tarifs caption { color: #5C6058; }

.tarifs th,
.tarifs td {
  text-align: left;
  padding: 0.85rem var(--e2) 0.85rem 0;
  border-bottom: 1px solid var(--nuit-3);
  vertical-align: top;
}

.bloc--clair .tarifs th,
.bloc--clair .tarifs td { border-bottom-color: #C9C0AC; }

.tarifs thead th {
  font-size: var(--t-petit);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--craie-2);
}

.bloc--clair .tarifs thead th { color: #5C6058; }

.tarifs tbody th { font-weight: 400; }

.tarifs .prix {
  font-family: var(--display);
  font-size: 1.16rem;
  white-space: nowrap;
}

.tarifs .duree { color: var(--craie-2); white-space: nowrap; }
.bloc--clair .tarifs .duree { color: #4B4F49; }

/* ---------- profils (équipe) ---------- */

.profil {
  border-top: 1px solid var(--nuit-3);
  padding-top: var(--e2);
}

.profil__role {
  font-family: var(--display);
  font-size: var(--t-h3);
  margin: 0 0 var(--e1);
}

.profil__disc {
  font-size: var(--t-petit);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--craie-2);
  display: block;
  margin-bottom: var(--e2);
}

.profil p { font-size: 0.97rem; color: var(--craie-2); }

/* ---------- étapes numérotées ---------- */

.etapes {
  list-style: none;
  counter-reset: pas;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e3);
}

.etapes li {
  counter-increment: pas;
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: var(--e2);
  border-top: 1px solid var(--nuit-3);
  padding-top: var(--e2);
}

.bloc--clair .etapes li { border-top-color: #C9C0AC; }

.etapes li::before {
  content: counter(pas, decimal-leading-zero);
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--craie-2);
  line-height: 1;
}

.bloc--clair .etapes li::before { color: #8A6A1B; }

.etapes h3 { font-size: var(--t-h3); margin-bottom: var(--e1); }
.etapes p { font-size: 0.97rem; color: var(--craie-2); }
.bloc--clair .etapes p { color: #4B4F49; }

/* ---------- calendrier ---------- */

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

.calendrier li {
  display: grid;
  grid-template-columns: minmax(7.5rem, 12rem) minmax(0, 1fr);
  gap: var(--e2);
  padding: var(--e2) 0;
  border-bottom: 1px solid var(--nuit-3);
}

.bloc--clair .calendrier li { border-bottom-color: #C9C0AC; }

.calendrier__quand {
  font-family: var(--display);
  font-size: 1.05rem;
}

.calendrier p { font-size: 0.95rem; color: var(--craie-2); }
.bloc--clair .calendrier p { color: #4B4F49; }

/* ---------- liens et boutons ---------- */

.lien-fleche {
  display: inline-block;
  text-decoration: none;
  font-size: 0.86rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  transition: opacity 0.25s;
}

.lien-fleche:hover,
.lien-fleche:focus-visible { opacity: 0.62; }

.bouton {
  display: inline-block;
  text-decoration: none;
  font-size: 0.86rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.85rem 1.6rem;
  border: 1px solid var(--craie);
  transition: background-color 0.25s, color 0.25s;
}

.bouton:hover,
.bouton:focus-visible { background: var(--craie); color: var(--nuit); }

.bouton--accent {
  border-color: var(--laiton);
  color: var(--laiton);
}

.bouton--accent:hover,
.bouton--accent:focus-visible { background: var(--laiton); color: var(--encre); }

.bloc--clair .bouton { border-color: #1A1A18; }
.bloc--clair .bouton:hover { background: #1A1A18; color: var(--papier); }

/* ---------- pied de page ---------- */

.pied {
  background: var(--encre);
  padding: var(--e5) var(--gouttiere) var(--e4);
  border-top: 1px solid var(--nuit-3);
}

.pied h2 {
  font-size: var(--t-h3);
  margin-bottom: var(--e2);
}

.pied p,
.pied address {
  font-size: 0.93rem;
  color: var(--craie-2);
  font-style: normal;
}

.pied a { color: var(--craie-2); }

.pied a:hover { color: var(--craie); }

.pied__nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e1);
}

.pied__nav a { text-decoration: none; font-size: 0.93rem; }
.pied__nav a:hover { text-decoration: underline; }

.pied__bas {
  font-size: 0.78rem;
  color: #64748B;
  border-top: 1px solid var(--nuit-3);
  padding-top: var(--e2);
  margin-top: var(--e4);
}

/* ============================================================
   DISPOSITIF SIGNATURE — LA NOTE QUI COURT
   ============================================================ */

.portee {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 96px;
  z-index: 90;
  pointer-events: none;
}

.portee__voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 11, 20, 0.96), rgba(6, 11, 20, 0.78) 46%, rgba(6, 11, 20, 0));
  transition: background 0.4s linear;
}

.portee--sur-clair .portee__voile {
  background: linear-gradient(to top, rgba(237, 231, 218, 0.97), rgba(237, 231, 218, 0.8) 46%, rgba(237, 231, 218, 0));
}

.portee__scene {
  position: absolute;
  left: var(--gouttiere);
  right: var(--gouttiere);
  bottom: 20px;
  height: 56px;
}

.portee__ligne {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(166, 180, 200, 0.34);
  transition: background 0.4s linear;
}

.portee--sur-clair .portee__ligne { background: rgba(26, 26, 24, 0.28); }

.portee__ligne--1 { top: 8px; }
.portee__ligne--2 { top: 18px; }
.portee__ligne--3 { top: 28px; }
.portee__ligne--4 { top: 38px; }
.portee__ligne--5 { top: 48px; }

.portee__barre {
  position: absolute;
  left: 0;
  top: 8px;
  width: 1px;
  height: 41px;
  background: rgba(166, 180, 200, 0.5);
}

.portee--sur-clair .portee__barre { background: rgba(26, 26, 24, 0.4); }

.portee__fin,
.portee__fin::after {
  position: absolute;
  top: 8px;
  height: 41px;
  background: rgba(166, 180, 200, 0.5);
  transition: background 0.5s ease, width 0.5s ease;
}

.portee__fin {
  right: 0;
  width: 3px;
}

.portee__fin::after {
  content: "";
  right: 6px;
  width: 1px;
}

.portee--sur-clair .portee__fin,
.portee--sur-clair .portee__fin::after { background: rgba(26, 26, 24, 0.4); }

.portee.est-complete .portee__fin,
.portee.est-complete .portee__fin::after { background: var(--laiton); }

.portee__etat {
  position: absolute;
  left: 0;
  bottom: -16px;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(166, 180, 200, 0.55);
  transition: color 0.5s ease;
}

.portee--sur-clair .portee__etat { color: rgba(26, 26, 24, 0.5); }

.portee__etat::after { content: "mesure en cours"; }
.portee.est-complete .portee__etat::after { content: "mesure complète"; }
.portee.est-complete .portee__etat { color: var(--laiton); }

/* nombre de temps de la mesure (une classe par page) */
.mes-5 { --n: 5; }
.mes-6 { --n: 6; }
.mes-7 { --n: 7; }
.mes-8 { --n: 8; }

/* rang du temps dans la mesure */
.tps-1 { --i: 1; }
.tps-2 { --i: 2; }
.tps-3 { --i: 3; }
.tps-4 { --i: 4; }
.tps-5 { --i: 5; }
.tps-6 { --i: 6; }
.tps-7 { --i: 7; }
.tps-8 { --i: 8; }

/* hauteur sur la portée : 0 = ligne du haut, 8 = ligne du bas */
.h0 { --h: 0; }
.h1 { --h: 1; }
.h2 { --h: 2; }
.h3 { --h: 3; }
.h4 { --h: 4; }
.h5 { --h: 5; }
.h6 { --h: 6; }
.h7 { --h: 7; }
.h8 { --h: 8; }

/* les notes : position horizontale par le temps, verticale par la hauteur */

.portee__note,
.portee__tete {
  position: absolute;
  width: 11px;
  height: 8px;
  border-radius: 50%;
  transform: rotate(-18deg);
  margin-left: -5.5px;
}

.portee__note {
  left: calc((var(--i) - 0.5) * 100% / var(--n));
  top: calc(3px + var(--h) * 5px);
  background: rgba(166, 180, 200, 0.42);
  opacity: 1;
}

.portee__note::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 3px;
  width: 1px;
  height: 17px;
  background: rgba(166, 180, 200, 0.42);
}

.portee--sur-clair .portee__note { background: rgba(26, 26, 24, 0.34); }
.portee--sur-clair .portee__note::after { background: rgba(26, 26, 24, 0.34); }

.portee__note.est-jouee { background: var(--laiton); }
.portee__note.est-jouee::after { background: var(--laiton); }

.portee__tete {
  left: calc(var(--course, 0) * 100%);
  top: calc(3px + var(--tete-h, 4) * 5px);
  background: var(--laiton-clair);
  box-shadow: 0 0 0 3px rgba(201, 162, 75, 0.18);
}

.portee__tete::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 3px;
  width: 1px;
  height: 17px;
  background: var(--laiton-clair);
}

.portee--posee .portee__tete { display: none; }

/* ============================================================
   ÉTATS FERMÉS — uniquement avec JS et hors mouvement réduit
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  .js [data-rev] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.85s cubic-bezier(0.22, 1, 0.32, 1),
                transform 0.85s cubic-bezier(0.22, 1, 0.32, 1);
  }

  .js [data-rev="cote"] { transform: translateX(-30px); }

  .js [data-rev="lent"] {
    transform: translateY(40px);
    transition-duration: 1.15s;
  }

  .js [data-rev].est-ouvert {
    opacity: 1;
    transform: none;
  }

  .js [data-rev].d1 { transition-delay: 80ms; }
  .js [data-rev].d2 { transition-delay: 160ms; }
  .js [data-rev].d3 { transition-delay: 240ms; }

  /* le clip-path ne vit QUE sur l'enfant image, jamais sur l'élément observé */
  .js [data-rev] .cadre__img {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1.1s cubic-bezier(0.22, 1, 0.32, 1) 0.08s;
  }

  .js [data-rev].est-ouvert .cadre__img { clip-path: inset(0 0 0 0); }

  .js .portee__tete {
    transition: left 0.18s linear, top 0.55s cubic-bezier(0.22, 1, 0.32, 1);
  }

  .js .portee__note,
  .js .portee__note::after {
    transition: background 0.5s ease;
  }
}

/* ============================================================
   RÉPONSES AUX TAILLES
   ============================================================ */

@media (max-width: 900px) {
  .grille > * {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  .bloc { padding: var(--e5) var(--gouttiere); }
  .bloc--serre { padding: var(--e4) var(--gouttiere); }

  .hero { min-height: 74svh; }
  .hero__fond img { object-position: 70% 50%; }

  .entete {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--e2);
  }

  .nav { justify-content: flex-start; }

  .portee { height: 78px; }
  .portee__scene { bottom: 16px; height: 52px; }
  .portee__etat { font-size: 0.55rem; letter-spacing: 0.16em; }
}

@media (max-width: 520px) {
  .calendrier li { grid-template-columns: minmax(0, 1fr); gap: var(--e1); }
  .etapes li { grid-template-columns: 2.4rem minmax(0, 1fr); }
  .nav a { font-size: 0.74rem; }
  .nav__cta { padding: 0.42rem 0.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

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