/* ==========================================================================
   Orchestre Arkanciel — Feuille de styles principale
   Palette : bleu nuit, doré, blanc, touches lumineuses
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* ------------------------------------------------------------------
     Direction artistique
     ------------------------------------------------------------------
     Le logo Arkanciel est déjà multicolore (rouge dominant, arcs bleus,
     « ORCHESTRE » en jaune) sur fond noir. L'interface reste donc
     volontairement neutre — noir profond et crème — pour que le logo et
     les photos de scène soient les seules sources de couleur.

     Le doré d'origine entrait en conflit direct avec le jaune du logo :
     il est remplacé par du crème. La référence à l'arc-en-ciel passe par
     --spectrum, un dégradé réservé aux accents typographiques et aux
     filets fins : jamais en aplat, jamais sur de grandes surfaces.
     ------------------------------------------------------------------ */

  /* Fonds : noir légèrement bleuté, en écho aux arcs du logo */
  --ink:        #05060B;
  --navy-900:   #0A0C14;
  --navy-800:   #11141F;
  --navy-700:   #1A1F30;
  --navy-600:   #232A41;

  /* Accent neutre : remplace le doré sur toute l'interface */
  --accent:       #F0EDE5;
  --accent-soft:  #F5F3EE;
  --accent-pale:  #FFFFFF;
  --cream:      #F5F3EE;
  --white:      #FFFFFF;

  /* Touche spectrale — usage rare et volontaire */
  --spectrum: linear-gradient(100deg, #FF5A63 0%, #FFB347 30%, #4FD1A5 64%, #5AA9FF 100%);

  --text:       #F5F3EE;
  --text-muted: rgba(245, 243, 238, 0.66);
  --text-dim:   rgba(245, 243, 238, 0.44);
  --line:       rgba(245, 243, 238, 0.20);
  --line-soft:  rgba(245, 243, 238, 0.09);

  /* Typographie */
  --font-display: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-hero: clamp(2.6rem, 7.2vw, 5.6rem);
  --fs-h1:   clamp(2.2rem, 5.4vw, 4rem);
  --fs-h2:   clamp(1.85rem, 3.9vw, 3rem);
  --fs-h3:   clamp(1.2rem, 2.1vw, 1.55rem);
  --fs-body: clamp(1rem, 1.05vw, 1.075rem);

  /* Espacements & rythme */
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --section-y: clamp(4.5rem, 10vw, 9rem);
  --maxw: 1240px;
  --maxw-narrow: 820px;

  /* Divers */
  --radius: 4px;
  --radius-lg: 10px;
  --shadow-soft: 0 24px 60px -30px rgba(0, 0, 0, 0.85);
  --shadow-card: 0 30px 70px -40px rgba(0, 0, 0, 0.95);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --header-h: 84px;
}

/* --------------------------------------------------------------------------
   2. Reset & bases
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.72;
  color: var(--text);
  background: var(--navy-900);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.is-locked { overflow: hidden; }

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 0.6em;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

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

::selection { background: var(--accent); color: var(--navy-900); }

:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 999;
  padding: 0.75rem 1.25rem;
  background: var(--accent);
  color: var(--navy-900);
  font-weight: 600;
  border-radius: var(--radius);
  transition: top 0.25s var(--ease);
}
.skip-link:focus { 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;
}

/* --------------------------------------------------------------------------
   3. Utilitaires de mise en page
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--maxw-narrow); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

.section-head { max-width: 720px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--spectrum);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000);
  mask-image: linear-gradient(90deg, transparent, #000);
}
.section-head--center .eyebrow::after {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--spectrum);
  -webkit-mask-image: linear-gradient(270deg, transparent, #000);
  mask-image: linear-gradient(270deg, transparent, #000);
}

.lead {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--text-muted);
  line-height: 1.8;
}

.accent { color: var(--accent-soft); }

/* Accent typographique : le dégradé spectral appliqué au texte lui-même.
   Réservé à un ou deux mots par titre — au-delà, l'effet se banalise. */
.italic-accent {
  font-style: italic;
  font-weight: 500;
  background: var(--spectrum);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Fonds ambiants */
.bg-glow { position: relative; isolation: isolate; }
.bg-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 55% at 12% 0%, rgba(24, 42, 92, 0.55), transparent 70%),
    radial-gradient(60% 50% at 95% 100%, rgba(245, 243, 238, 0.10), transparent 70%);
  pointer-events: none;
}

.bg-deep { background: var(--ink); }
.bg-navy { background: var(--navy-800); }

.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

/* --------------------------------------------------------------------------
   4. Boutons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--navy-900);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 1.05rem 2.1rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
              background-color 0.35s var(--ease), color 0.35s var(--ease),
              border-color 0.35s var(--ease);
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 0.75s var(--ease);
}
.btn:hover::after { transform: translateX(120%); }

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px -18px rgba(245, 243, 238, 0.75);
}
.btn:active { transform: translateY(0); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--cream);
  border-color: rgba(248, 245, 236, 0.35);
  backdrop-filter: blur(4px);
}
.btn--ghost:hover {
  --btn-fg: var(--navy-900);
  background: var(--cream);
  border-color: var(--cream);
  box-shadow: 0 18px 38px -18px rgba(248, 245, 236, 0.4);
}

.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--accent-soft);
  border-color: rgba(245, 243, 238, 0.5);
}
.btn--outline:hover {
  --btn-bg: var(--accent);
  --btn-fg: var(--navy-900);
  border-color: var(--accent);
}

.btn--block { width: 100%; }
.btn--lg { padding: 1.2rem 2.6rem; font-size: 0.86rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}
.btn-row--center { justify-content: center; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-soft);
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(245, 243, 238, 0.35);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), gap 0.3s var(--ease);
}
.link-arrow:hover { color: var(--accent-pale); border-color: var(--accent); gap: 0.9rem; }

/* --------------------------------------------------------------------------
   5. En-tête / navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: height 0.4s var(--ease), background-color 0.4s var(--ease),
              box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 7, 15, 0.75), transparent);
  opacity: 1;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}

.site-header.is-stuck {
  height: 68px;
  background: rgba(7, 12, 28, 0.9);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 18px 40px -30px rgba(0, 0, 0, 1);
}
.site-header.is-stuck::before { opacity: 0; }

.nav {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  position: relative;
  z-index: 2;
}

/* Mot-symbole typographique.
   Le logo d'origine, fourni en image sur fond noir, occupait 244 px de large
   et ne rétrécissait pas sur mobile. Composé en Baloo 2 — dont les lettres
   rondes et pleines rappellent le lettrage du logo, mais droites — il tombe
   à 117 px sur ordinateur et 92 px sur mobile, et reste net à toute taille.
   Le dégradé spectral porte seul la référence à l'arc-en-ciel. */
.brand {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  flex-shrink: 0;
}

.brand__name {
  font-family: "Baloo 2", var(--font-display);
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: -0.015em;
  background: var(--spectrum);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: font-size 0.4s var(--ease), opacity 0.35s var(--ease);
}

.brand__tag {
  margin-top: 3px;
  font-family: var(--font-body);
  font-size: 0.53rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(245, 243, 238, 0.55);
  transition: font-size 0.4s var(--ease);
}

.site-header.is-stuck .brand__name { font-size: 1.5rem; }
.site-header.is-stuck .brand__tag { font-size: 0.48rem; }
.brand:hover .brand__name { opacity: 0.82; }

.nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.5vw, 2.3rem);
}

.nav__link {
  position: relative;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(248, 245, 236, 0.82);
  padding-block: 0.35rem;
  transition: color 0.3s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--spectrum);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease);
}
.nav__link:hover { color: var(--white); }
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__link.is-active { color: var(--accent-soft); }
.nav__link.is-active::after { transform: scaleX(1); }

.nav__actions { display: flex; align-items: center; gap: 0.75rem; }
.nav__cta { padding: 0.85rem 1.6rem; font-size: 0.72rem; }

.nav__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--cream);
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}
/* Le logo occupe désormais toute la largeur d'un mot-symbole : sous 1150 px,
   le téléphone laisse la place plutôt que de comprimer la navigation. */
@media (max-width: 1150px) {
  .nav__phone { display: none; }
}
.nav__phone svg { width: 15px; height: 15px; color: var(--accent-soft); }
.nav__phone:hover { color: var(--accent-soft); }

/* Burger */
.burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 0;
}
.burger span {
  display: block;
  position: relative;
  width: 20px; height: 1.5px;
  background: var(--cream);
  transition: background-color 0.2s var(--ease);
}
.burger span::before,
.burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px; height: 1.5px;
  background: var(--cream);
  transition: transform 0.35s var(--ease), top 0.35s var(--ease);
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* Panneau mobile */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: linear-gradient(160deg, var(--navy-900), var(--ink));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--header-h) + 2rem) var(--gutter) 3rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease), visibility 0.4s;
}
.nav-drawer.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

.nav-drawer__list { display: flex; flex-direction: column; gap: 0.35rem; }
.nav-drawer__list a {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  padding-block: 0.35rem;
  border-bottom: 1px solid var(--line-soft);
  opacity: 0;
  transform: translateY(18px);
}
.nav-drawer.is-open .nav-drawer__list a {
  animation: drawerIn 0.55s var(--ease) forwards;
}
/* Le décalage porte sur les <li> : chaque <a> étant seul dans son <li>,
   un :nth-child sur le <a> vaudrait toujours 1 et les liens apparaîtraient
   tous en même temps. */
.nav-drawer.is-open .nav-drawer__list li:nth-child(1) a { animation-delay: 0.08s; }
.nav-drawer.is-open .nav-drawer__list li:nth-child(2) a { animation-delay: 0.14s; }
.nav-drawer.is-open .nav-drawer__list li:nth-child(3) a { animation-delay: 0.20s; }
.nav-drawer.is-open .nav-drawer__list li:nth-child(4) a { animation-delay: 0.26s; }
.nav-drawer.is-open .nav-drawer__list li:nth-child(5) a { animation-delay: 0.32s; }
.nav-drawer__list a.is-active { color: var(--accent-soft); }

@keyframes drawerIn {
  to { opacity: 1; transform: translateY(0); }
}

.nav-drawer__footer {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.nav-drawer__footer .btn { width: 100%; }
.nav-drawer__phone {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent-soft);
  letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  /* Photo de scène volontairement éclaircie : le cliché d'origine est très
     sombre, et le titre étant désormais court, le voile peut être allégé. */
  filter: brightness(1.32) contrast(0.94) saturate(1.05);
  animation: kenburns 26s ease-in-out infinite alternate;
}

@keyframes kenburns {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.18) translate3d(-1.5%, -1.5%, 0); }
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(4, 7, 15, 0.62) 0%, rgba(4, 7, 15, 0.18) 35%, rgba(4, 7, 15, 0.55) 78%, var(--navy-900) 100%),
    linear-gradient(90deg, rgba(4, 7, 15, 0.62) 0%, transparent 66%);
}

.hero__grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.28;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  pointer-events: none;
}

.hero__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: calc(var(--header-h) + 3rem) var(--gutter) clamp(6rem, 12vh, 9rem);
}

.hero__content { max-width: 880px; }

/* Le nom prime sur le mot « Orchestre », réduit au rang de surtitre.
   La photo de fond ayant été éclaircie, le nom a besoin d'un halo sombre
   pour s'en détacher : le dégradé spectral est appliqué au texte, donc un
   text-shadow classique ne suffit pas et c'est un drop-shadow qui prend
   le relais. */
.hero__title {
  font-size: var(--fs-hero);
  line-height: 1.04;
  margin-bottom: 1.4rem;
}

.hero__title-over {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(0.72rem, 1.5vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(245, 243, 238, 0.82);
  margin-bottom: clamp(0.6rem, 1.4vw, 1rem);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85);
}

.hero__title em {
  display: block;
  font-style: italic;
  font-size: clamp(3.4rem, 12vw, 8.5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  background: var(--spectrum);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(0 2px 6px rgba(0, 0, 0, 0.85))
    drop-shadow(0 10px 40px rgba(0, 0, 0, 0.7));
}

.hero__sub {
  font-size: clamp(1.02rem, 1.6vw, 1.28rem);
  color: rgba(248, 245, 236, 0.86);
  max-width: 640px;
  margin-bottom: 2.4rem;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
}

.hero__meta {
  margin-top: 3.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-top: 1.8rem;
  border-top: 1px solid var(--line-soft);
  max-width: 700px;
}
.hero__meta div strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.85rem;
  color: var(--accent-soft);
  line-height: 1;
}
.hero__meta div span {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-dim);
  z-index: 3;
}
.hero__scroll i {
  display: block;
  width: 1px;
  height: 52px;
  background: var(--spectrum);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent);
  mask-image: linear-gradient(180deg, #000, transparent);
  position: relative;
  overflow: hidden;
}
.hero__scroll i::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 16px;
  background: var(--accent-pale);
  animation: scrollDot 2.2s var(--ease) infinite;
}
@keyframes scrollDot {
  0%   { transform: translateY(-16px); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(52px); opacity: 0; }
}

/* Hero secondaire (pages internes) */
.page-hero {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  animation: kenburns 30s ease-in-out infinite alternate;
}
.page-hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(4, 7, 15, 0.88) 0%, rgba(4, 7, 15, 0.34) 34%, rgba(7, 12, 28, 0.97) 100%),
    linear-gradient(90deg, rgba(4, 7, 15, 0.7) 0%, transparent 72%);
}
.page-hero__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: calc(var(--header-h) + 4rem) var(--gutter) clamp(3rem, 7vw, 5rem);
}
.page-hero__title {
  font-size: var(--fs-h1);
  margin-bottom: 1rem;
  max-width: 16ch;
  text-shadow: 0 6px 32px rgba(0, 0, 0, 0.6);
}
.page-hero__sub {
  max-width: 58ch;
  color: rgba(248, 245, 236, 0.85);
  font-size: 1.08rem;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.65);
}

.breadcrumb {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 1.4rem;
}
.breadcrumb a:hover { color: var(--accent-soft); }
.breadcrumb span[aria-hidden] { color: var(--accent); }

/* --------------------------------------------------------------------------
   7. Animations d'apparition
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }

[data-reveal="left"]  { transform: translateX(-28px); }
[data-reveal="right"] { transform: translateX(28px); }
[data-reveal="zoom"]  { transform: scale(0.96); }

.hero [data-reveal] { transition-duration: 1.1s; }

/* --------------------------------------------------------------------------
   8. Présentation de l'orchestre
   --------------------------------------------------------------------------
   Section sans image : la composition repose entièrement sur la typographie.
   Un énoncé large et centré porte l'identité de la formation, puis trois
   points pratiques sont posés en colonnes, séparés par un filet plutôt
   qu'encadrés — plus léger qu'une carte, et sans rappeler les blocs retirés.
   -------------------------------------------------------------------------- */
.intro-lead {
  max-width: 64ch;
  margin-inline: auto;
  text-align: center;
}

.intro-lead__main {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.7vw, 1.95rem);
  line-height: 1.45;
  color: var(--cream);
  margin-bottom: 1.3rem;
}

.intro-lead__text {
  font-size: clamp(1rem, 1.35vw, 1.1rem);
  line-height: 1.85;
  color: var(--text-muted);
  margin: 0;
}

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: clamp(1.8rem, 3.6vw, 3.2rem);
  margin-top: clamp(3rem, 6vw, 4.5rem);
}

.fact {
  position: relative;
  padding-top: 1.7rem;
}
/* Filet neutre sur toute la largeur… */
.fact::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--line-soft);
}
/* …et segment spectral qui s'étend au survol. */
.fact::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: var(--spectrum);
  transform: scaleX(0.3);
  transform-origin: left;
  transition: transform 0.7s var(--ease);
}
.fact:hover::after { transform: scaleX(1); }

.fact__icon {
  display: block;
  width: 26px; height: 26px;
  margin-bottom: 1.2rem;
  color: var(--accent-soft);
  transition: transform 0.5s var(--ease);
}
.fact__icon svg { width: 100%; height: 100%; }
.fact:hover .fact__icon { transform: translateY(-3px); }

.fact h3 {
  font-size: clamp(1.08rem, 1.6vw, 1.25rem);
  margin-bottom: 0.6rem;
}

.fact p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--text-muted);
}
/* --------------------------------------------------------------------------
   9. Répertoire
   --------------------------------------------------------------------------
   Chaque catégorie est un <details> replié : la liste ne s'ouvre qu'au clic,
   ce qui évite de dérouler soixante titres à la suite. Le mécanisme est natif,
   donc sans JavaScript, accessible au clavier, et le contenu reste lu par
   Google même replié.

   Le filet spectral reprend celui des blocs de présentation de l'accueil,
   pour que les deux pages partagent le même langage.
   -------------------------------------------------------------------------- */
.repertoire {
  display: grid;
  gap: 0.7rem;
}

.rep {
  position: relative;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: rgba(245, 243, 238, 0.02);
  overflow: hidden;
  transition: border-color 0.4s var(--ease), background-color 0.4s var(--ease);
}
.rep:hover { border-color: var(--line); }
.rep[open] {
  border-color: var(--line);
  background: rgba(245, 243, 238, 0.035);
}

/* Filet spectral en tête de bloc, révélé à l'ouverture. */
.rep::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--spectrum);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease);
  pointer-events: none;
}
.rep[open]::after { transform: scaleX(1); }

.rep__head {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 1.5rem);
  padding: clamp(1.15rem, 2.4vw, 1.6rem) clamp(1.2rem, 2.5vw, 1.9rem);
  cursor: pointer;
  list-style: none;
  transition: color 0.3s var(--ease);
}
.rep__head::-webkit-details-marker { display: none; }
.rep__head:hover .rep__cat { color: var(--white); }

.rep__cat {
  flex: 1;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.3vw, 1.6rem);
  font-weight: 700;
  line-height: 1.2;
  transition: color 0.3s var(--ease);
}

.rep__count {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}

.rep__chevron {
  flex-shrink: 0;
  width: 11px; height: 11px;
  border-right: 1.6px solid var(--accent-soft);
  border-bottom: 1.6px solid var(--accent-soft);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.4s var(--ease);
}
.rep[open] .rep__chevron { transform: rotate(-135deg) translate(-2px, -2px); }

.rep__body {
  padding: 0 clamp(1.2rem, 2.5vw, 1.9rem) clamp(1.4rem, 2.8vw, 2rem);
}

.rep__list {
  columns: 3;
  column-gap: clamp(1.4rem, 3vw, 2.6rem);
  margin: 0;
}
.rep__list li {
  break-inside: avoid;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.97rem;
  line-height: 1.4;
  color: var(--text-muted);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.rep__list li:hover { color: var(--cream); border-bottom-color: var(--line); }


/* --------------------------------------------------------------------------
   10. Chiffres clés
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.stat {
  background: var(--navy-800);
  padding: clamp(2rem, 4vw, 3rem) clamp(1.2rem, 2.5vw, 2rem);
  text-align: center;
  position: relative;
  transition: background-color 0.45s var(--ease);
}
.stat:hover { background: var(--navy-700); }
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1;
  background: var(--spectrum);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 0.6rem;
  font-variant-numeric: tabular-nums;
}
.stat__label {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   11. Cartes "Pourquoi nous choisir"
   -------------------------------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(1.2rem, 2.4vw, 1.8rem);
}

.card {
  position: relative;
  padding: clamp(1.9rem, 3vw, 2.6rem);
  background: linear-gradient(165deg, rgba(24, 42, 92, 0.35), rgba(7, 12, 28, 0.5));
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease),
              box-shadow 0.5s var(--ease);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 0%, rgba(245, 243, 238, 0.13), transparent 65%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.card:hover {
  transform: translateY(-6px);
  border-color: var(--line);
  box-shadow: var(--shadow-soft);
}
.card:hover::before { opacity: 1; }
.card > * { position: relative; z-index: 1; }

.card__icon {
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  margin-bottom: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--accent-soft);
  background: rgba(245, 243, 238, 0.06);
  transition: transform 0.5s var(--ease), background-color 0.5s var(--ease);
}
.card:hover .card__icon { transform: translateY(-3px) rotate(-6deg); background: rgba(245, 243, 238, 0.14); }
.card__icon svg { width: 22px; height: 22px; }

.card h3 { font-size: var(--fs-h3); margin-bottom: 0.7rem; }
.card p { color: var(--text-muted); font-size: 0.97rem; margin: 0; }

.card__num {
  position: absolute;
  top: 1rem; right: 1.4rem;
  font-family: var(--font-display);
  font-size: 3.6rem;
  line-height: 1;
  color: rgba(248, 245, 236, 0.05);
  z-index: 0;
}

/* --------------------------------------------------------------------------
   12. Prestations (liste bandeaux)
   -------------------------------------------------------------------------- */
.offers { display: grid; gap: 1px; background: var(--line-soft); border-block: 1px solid var(--line-soft); }

.offer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.6rem, 3vw, 2.3rem) clamp(0.5rem, 2vw, 1.5rem);
  background: var(--navy-900);
  transition: background-color 0.45s var(--ease), padding-left 0.45s var(--ease);
}
.offer:hover { background: var(--navy-800); padding-left: clamp(1rem, 3vw, 2.5rem); }

.offer__index {
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--accent);
  letter-spacing: 0.1em;
  min-width: 2.5rem;
}
.offer__body h3 { font-size: clamp(1.25rem, 2.4vw, 1.75rem); margin-bottom: 0.35rem; }
.offer__body p { color: var(--text-muted); font-size: 0.95rem; margin: 0; max-width: 62ch; }
.offer__arrow {
  color: var(--accent-soft);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.offer:hover .offer__arrow { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   13. Bandeau parallaxe
   -------------------------------------------------------------------------- */
.banner {
  position: relative;
  min-height: 58vh;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.banner__media { position: absolute; inset: -10%; z-index: -2; }
.banner__media img { width: 100%; height: 100%; object-fit: cover; }
.banner__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(7, 12, 28, 0.88), rgba(4, 7, 15, 0.78));
}
.banner__inner { padding: clamp(3.5rem, 8vw, 6rem) var(--gutter); max-width: 900px; }
.banner blockquote {
  margin: 0 0 1.6rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  font-style: italic;
  line-height: 1.35;
}
.banner cite {
  font-style: normal;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-soft);
}

/* --------------------------------------------------------------------------
   14. Témoignages
   -------------------------------------------------------------------------- */
.testimonials { position: relative; }

.testi-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(320px, 1fr);
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 1.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.testi-track::-webkit-scrollbar { height: 4px; }
.testi-track::-webkit-scrollbar-track { background: var(--line-soft); }
.testi-track::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 10px; }

.testi {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: clamp(1.9rem, 3vw, 2.5rem);
  background: linear-gradient(165deg, rgba(24, 42, 92, 0.32), rgba(7, 12, 28, 0.55));
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.testi:hover { border-color: var(--line); transform: translateY(-4px); }

.testi__stars { display: flex; gap: 0.25rem; color: var(--accent); margin-bottom: 1.2rem; }
.testi__stars svg { width: 15px; height: 15px; }

.testi__quote {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--cream);
  margin-bottom: 1.6rem;
  flex: 1;
}

.testi__author { display: flex; align-items: center; gap: 0.9rem; padding-top: 1.2rem; border-top: 1px solid var(--line-soft); }
.testi__avatar {
  width: 42px; height: 42px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--accent), var(--navy-600));
  color: var(--navy-900);
  font-weight: 700;
  font-size: 0.9rem;
}
.testi__author strong { display: block; font-size: 0.95rem; font-weight: 600; }
.testi__author span { font-size: 0.78rem; color: var(--text-dim); }

.testi-nav { display: flex; gap: 0.6rem; margin-top: 1.5rem; justify-content: flex-end; }
.testi-nav button {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  color: var(--cream);
  cursor: pointer;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.testi-nav button:hover { background: var(--accent); border-color: var(--accent); color: var(--navy-900); }
.testi-nav svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   15. Galerie
   -------------------------------------------------------------------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.filter {
  padding: 0.65rem 1.35rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 100px;
  cursor: pointer;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.filter:hover { color: var(--cream); border-color: var(--line); }
.filter[aria-pressed="true"] {
  color: var(--navy-900);
  background: var(--accent);
  border-color: var(--accent);
}

/* Mosaïque en colonnes : chaque photo conserve ses proportions d'origine,
   ce qui évite les trous d'une grille à hauteurs fixes. */
.gallery {
  columns: 3;
  column-gap: clamp(0.6rem, 1.4vw, 1rem);
}

.shot {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 clamp(0.6rem, 1.4vw, 1rem);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: zoom-in;
  background: var(--navy-800);
  border: 0;
  padding: 0;
  break-inside: avoid;
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}

.shot img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 1s var(--ease), filter 0.6s var(--ease);
  filter: saturate(0.95);
}
.shot:hover img { transform: scale(1.08); filter: saturate(1.12); }

.shot__veil {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.3rem;
  text-align: left;
  background: linear-gradient(180deg, transparent 40%, rgba(4, 7, 15, 0.88));
  opacity: 0.35;
  transition: opacity 0.45s var(--ease);
}
.shot:hover .shot__veil { opacity: 1; }

.shot__cat {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 0.3rem;
  transform: translateY(10px);
  opacity: 0;
  transition: transform 0.45s var(--ease) 0.05s, opacity 0.45s var(--ease) 0.05s;
}
.shot__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--white);
  transform: translateY(10px);
  opacity: 0;
  transition: transform 0.45s var(--ease) 0.1s, opacity 0.45s var(--ease) 0.1s;
}
.shot:hover .shot__cat,
.shot:hover .shot__title { transform: none; opacity: 1; }

.shot__zoom {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(4, 7, 15, 0.55);
  border: 1px solid var(--line);
  color: var(--accent-soft);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.shot:hover .shot__zoom { opacity: 1; transform: none; }
.shot__zoom svg { width: 15px; height: 15px; }

.shot.is-hidden { display: none; }

/* Variante "aperçu" en page d'accueil : la vignette renvoie vers la galerie. */
.shot--link { cursor: pointer; display: block; }

/* L'aperçu compte peu d'images : une grille régulière s'équilibre mieux
   qu'une mosaïque, qui laisserait une colonne à moitié vide. */
.gallery--preview {
  columns: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.6rem, 1.4vw, 1rem);
}
.gallery--preview .shot { margin: 0; aspect-ratio: 4 / 3; }
.gallery--preview .shot img { height: 100%; object-fit: cover; }

/* Sur écran tactile, il n'y a pas de survol : les légendes restent lisibles. */
@media (hover: none) {
  .shot__veil { opacity: 1; }
  .shot__cat, .shot__title { opacity: 1; transform: none; }
  .shot__zoom { opacity: 1; transform: none; }
}

.shot-cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  margin-bottom: clamp(0.6rem, 1.4vw, 1rem);
  padding: clamp(1.8rem, 3vw, 2.4rem);
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, rgba(24, 42, 92, 0.3), transparent);
  break-inside: avoid;
}
.shot-cta h3 { font-size: 1.35rem; margin: 0; }
.shot-cta p { font-size: 0.92rem; color: var(--text-muted); margin: 0; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(3, 5, 12, 0.96);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox__figure {
  margin: 0;
  max-width: min(1200px, 100%);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transform: scale(0.96);
  transition: transform 0.5s var(--ease);
}
.lightbox.is-open .lightbox__figure { transform: none; }

.lightbox__figure img {
  max-height: 78vh;
  width: auto;
  margin-inline: auto;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 40px 100px -40px rgba(0, 0, 0, 1);
}
.lightbox__caption {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.lightbox__caption strong { display: block; font-family: var(--font-display); font-size: 1.15rem; color: var(--cream); font-weight: 500; }

.lightbox__btn {
  position: absolute;
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  background: rgba(248, 245, 236, 0.07);
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  color: var(--cream);
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.lightbox__btn:hover { background: var(--accent); color: var(--navy-900); border-color: var(--accent); }
.lightbox__btn svg { width: 18px; height: 18px; }
.lightbox__close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lightbox__prev { left: clamp(0.6rem, 3vw, 2.5rem); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: clamp(0.6rem, 3vw, 2.5rem); top: 50%; transform: translateY(-50%); }
.lightbox__counter {
  position: absolute;
  bottom: clamp(1rem, 3vw, 2rem);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--text-dim);
}

/* --------------------------------------------------------------------------
   16. Vidéos
   --------------------------------------------------------------------------
   Les vidéos sont hébergées sur YouTube, mais l'iframe n'est jamais chargée
   au démarrage : la page n'affiche qu'un panneau sobre portant le type
   d'événement, le lieu et un bouton de lecture. Cela évite le mégaoctet de
   scripts d'un lecteur intégré et, surtout, tout appel à Google avant que
   le visiteur ne l'ait explicitement demandé.
   -------------------------------------------------------------------------- */
.videos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(1.2rem, 2.4vw, 1.8rem);
}

.video {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(158deg, var(--navy-700), var(--navy-900));
  border: 1px solid var(--line-soft);
  transition: border-color 0.45s var(--ease), transform 0.45s var(--ease),
              box-shadow 0.45s var(--ease), background-color 0.45s var(--ease);
}
.video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 0%, rgba(245, 243, 238, 0.06), transparent 68%);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  pointer-events: none;
}
.video:not(.is-soon):hover {
  transform: translateY(-4px);
  border-color: var(--line);
  box-shadow: var(--shadow-soft);
}
.video:not(.is-soon):hover::after { opacity: 1; }

.video__trigger {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.video__play {
  width: 74px; height: 74px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(10, 12, 20, 0.55);
  border: 1px solid rgba(245, 243, 238, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform 0.45s var(--ease), background-color 0.45s var(--ease),
              border-color 0.45s var(--ease);
}
.video__play::before {
  content: "";
  width: 0; height: 0;
  margin-left: 5px;
  border-left: 19px solid var(--cream);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  transition: border-left-color 0.45s var(--ease);
}
.video__trigger:hover .video__play,
.video__trigger:focus-visible .video__play {
  transform: scale(1.09);
  background: var(--cream);
  border-color: var(--cream);
}
.video__trigger:hover .video__play::before,
.video__trigger:focus-visible .video__play::before { border-left-color: var(--navy-900); }

.video__meta {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.4rem;
  text-align: left;
  pointer-events: none;
}
.video__cat {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.video__title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--white);
}

/* État d'attente : tant qu'aucun identifiant YouTube n'est renseigné,
   la vignette reste présentable au lieu d'ouvrir un lecteur vide. */
.video.is-soon { cursor: default; opacity: 0.55; }
.video__soon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.video__soon span {
  padding: 0.6rem 1.3rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px dashed var(--line);
  border-radius: 100px;
  background: rgba(5, 6, 11, 0.5);
}

/* Lecteur une fois chargé */
.video.is-playing { aspect-ratio: 16 / 9; border-color: var(--line); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.videos__note {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  max-width: 70ch;
  margin: clamp(1.8rem, 3vw, 2.4rem) 0 0;
  padding: 1.1rem 1.3rem;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--text-muted);
  background: rgba(245, 243, 238, 0.03);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.videos__note svg { width: 19px; height: 19px; flex-shrink: 0; margin-top: 3px; color: var(--accent-soft); }
.videos__note strong { color: var(--cream); font-weight: 600; }
.videos__note a { color: var(--accent-soft); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   17. Formulaires
   -------------------------------------------------------------------------- */
.form-layout {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.form-panel {
  padding: clamp(1.8rem, 4vw, 3.2rem);
  background: linear-gradient(170deg, rgba(24, 42, 92, 0.3), rgba(7, 12, 28, 0.6));
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.15rem 1.25rem;
}
.field--full { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; gap: 0.5rem; }

.field label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.field label .req { color: var(--accent); margin-left: 0.15rem; }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.95rem 1.1rem;
  font-family: inherit;
  font-size: 0.97rem;
  color: var(--cream);
  background: rgba(4, 7, 15, 0.5);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
  appearance: none;
}
.field textarea { resize: vertical; min-height: 140px; line-height: 1.65; }

.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F0EDE5' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 16px;
  padding-right: 2.6rem;
  cursor: pointer;
}
.field select option { background: var(--navy-800); color: var(--cream); }

.field input::placeholder,
.field textarea::placeholder { color: rgba(248, 245, 236, 0.28); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(4, 7, 15, 0.75);
  box-shadow: 0 0 0 3px rgba(245, 243, 238, 0.14);
}

.field input[type="date"] { color-scheme: dark; }

.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: #E2685C; box-shadow: 0 0 0 3px rgba(226, 104, 92, 0.14); }

.field__error {
  font-size: 0.78rem;
  color: #F0958B;
  min-height: 0;
  display: none;
}
.field.has-error .field__error { display: block; }

.field__hint { font-size: 0.78rem; color: var(--text-dim); }

/* Case à cocher RGPD */
.consent {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 1.1rem 1.2rem;
  background: rgba(4, 7, 15, 0.4);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.consent input {
  appearance: none;
  flex-shrink: 0;
  width: 20px; height: 20px;
  margin-top: 2px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.consent input::after {
  content: "";
  width: 10px; height: 6px;
  border-left: 2px solid var(--navy-900);
  border-bottom: 2px solid var(--navy-900);
  transform: rotate(-45deg) scale(0);
  transition: transform 0.25s var(--ease);
}
.consent input:checked { background: var(--accent); border-color: var(--accent); }
.consent input:checked::after { transform: rotate(-45deg) scale(1); }
.consent label { font-size: 0.85rem; line-height: 1.6; color: var(--text-muted); text-transform: none; letter-spacing: 0; font-weight: 400; }
.consent label a { color: var(--accent-soft); text-decoration: underline; text-underline-offset: 3px; }
.consent.has-error { border-color: #E2685C; }
.consent .field__error { flex-basis: 100%; }
.consent.has-error .field__error { display: block; }

/* Anti-spam (pot de miel) */
.hp-field {
  position: absolute !important;
  left: -9999px;
  opacity: 0;
  height: 0;
  overflow: hidden;
}

.form-foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
  justify-content: space-between;
  margin-top: 0.6rem;
}
.form-foot .note { font-size: 0.78rem; color: var(--text-dim); max-width: 34ch; margin: 0; }

.form-status {
  grid-column: 1 / -1;
  display: none;
  gap: 0.8rem;
  align-items: flex-start;
  padding: 1.1rem 1.3rem;
  border-radius: var(--radius);
  font-size: 0.92rem;
  line-height: 1.6;
}
.form-status.is-visible { display: flex; }
.form-status--ok { background: rgba(88, 176, 128, 0.12); border: 1px solid rgba(88, 176, 128, 0.4); color: #A9E2C2; }
.form-status--ko { background: rgba(226, 104, 92, 0.1); border: 1px solid rgba(226, 104, 92, 0.4); color: #F0958B; }
.form-status svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.form-status a { color: inherit; text-decoration: underline; }

.btn[data-loading="true"] { pointer-events: none; opacity: 0.65; }
.btn[data-loading="true"] .btn__label::after {
  content: "";
  display: inline-block;
  width: 12px; height: 12px;
  margin-left: 0.6rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: -1px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Colonne rassurante */
.aside-card {
  padding: clamp(1.6rem, 3vw, 2.2rem);
  background: linear-gradient(170deg, rgba(245, 243, 238, 0.09), rgba(7, 12, 28, 0.5));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.aside-card + .aside-card { margin-top: 1.2rem; }
.aside-card h3 { font-size: 1.3rem; margin-bottom: 0.9rem; }
.aside-card p { font-size: 0.94rem; color: var(--text-muted); }

.trust-list { display: grid; gap: 1.1rem; margin-top: 1.4rem; }
.trust-list li { display: flex; gap: 0.85rem; align-items: flex-start; font-size: 0.93rem; color: var(--text-muted); line-height: 1.6; }
.trust-list svg { width: 19px; height: 19px; flex-shrink: 0; margin-top: 3px; color: var(--accent); }
.trust-list strong { color: var(--cream); font-weight: 600; display: block; }

.contact-lines { display: grid; gap: 1rem; margin-top: 1.4rem; }
.contact-line {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 0.95rem 1.1rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  transition: border-color 0.35s var(--ease), background-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.contact-line:hover { border-color: var(--line); background: rgba(245, 243, 238, 0.06); transform: translateX(3px); }
.contact-line__icon {
  width: 40px; height: 40px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(245, 243, 238, 0.1);
  color: var(--accent-soft);
}
.contact-line__icon svg { width: 17px; height: 17px; }
.contact-line span { display: block; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); }
.contact-line strong { font-size: 1.02rem; font-weight: 600; letter-spacing: 0.01em; }

/* --------------------------------------------------------------------------
   18. Étapes
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: clamp(1.2rem, 2.5vw, 2rem);
  counter-reset: step;
}
.step { position: relative; padding-top: 2.6rem; }
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  position: absolute;
  top: 0; left: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--accent);
  letter-spacing: 0.1em;
}
.step::after {
  content: "";
  position: absolute;
  top: 0.75rem; left: 2.6rem; right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}
.step h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.step p { font-size: 0.93rem; color: var(--text-muted); margin: 0; }

/* --------------------------------------------------------------------------
   19. Appel à l'action final
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.cta__media { position: absolute; inset: 0; z-index: -2; }
.cta__media img { width: 100%; height: 100%; object-fit: cover; }
.cta__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(7, 12, 28, 0.93), rgba(4, 7, 15, 0.9));
}
.cta__inner { padding-block: clamp(4.5rem, 10vw, 8rem); }
.cta h2 { font-size: var(--fs-h2); max-width: 20ch; margin-inline: auto; }
.cta p { max-width: 56ch; margin-inline: auto; color: var(--text-muted); margin-bottom: 2.2rem; }
.cta__phone {
  display: block;
  margin-top: 2rem;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.cta__phone a { color: var(--accent-soft); font-weight: 600; }

/* --------------------------------------------------------------------------
   20. FAQ
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: 0.6rem; }
.faq details {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: rgba(24, 42, 92, 0.16);
  overflow: hidden;
  transition: border-color 0.35s var(--ease), background-color 0.35s var(--ease);
}
.faq details[open] { border-color: var(--line); background: rgba(24, 42, 92, 0.3); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem clamp(1.1rem, 2.5vw, 1.8rem);
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.9vw, 1.22rem);
  cursor: pointer;
  list-style: none;
  transition: color 0.3s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-soft); }
.faq summary::after {
  content: "";
  flex-shrink: 0;
  width: 11px; height: 11px;
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.35s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq .faq__body { padding: 0 clamp(1.1rem, 2.5vw, 1.8rem) 1.5rem; }
.faq .faq__body p { color: var(--text-muted); font-size: 0.96rem; margin: 0; }

/* --------------------------------------------------------------------------
   21. Pied de page
   -------------------------------------------------------------------------- */
.site-footer {
  padding-top: clamp(3.5rem, 7vw, 5.5rem);
  background: var(--ink);
  border-top: 1px solid var(--line-soft);
}

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

.footer-brand__mark {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  margin-bottom: 1.3rem;
}
.footer-brand__mark .brand__name { font-size: 2.15rem; }
.footer-brand__mark .brand__tag { font-size: 0.6rem; margin-top: 4px; }
.footer-brand p { font-size: 0.93rem; color: var(--text-muted); max-width: 38ch; }

.footer-col h4 {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 1.2rem;
}
.footer-col ul { display: grid; gap: 0.65rem; }
.footer-col a, .footer-col li { font-size: 0.92rem; color: var(--text-muted); transition: color 0.3s var(--ease); }
.footer-col a:hover { color: var(--accent-soft); }

.socials { display: flex; gap: 0.6rem; margin-top: 1.4rem; }
.socials a {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  color: var(--text-muted);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease), background-color 0.3s var(--ease);
}
.socials a:hover { color: var(--navy-900); background: var(--accent); border-color: var(--accent); transform: translateY(-3px); }
.socials svg { width: 17px; height: 17px; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.6rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.8rem;
  color: var(--text-dim);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.footer-bottom a:hover { color: var(--accent-soft); }

/* Signature de l'agence : présente mais discrète, elle ne doit pas
   concurrencer les liens légaux ni la mention de copyright. */
.footer-credit { margin: 0; }
.footer-credit a {
  color: var(--text-muted);
  border-bottom: 1px solid transparent;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.footer-credit a:hover {
  color: var(--cream);
  border-bottom-color: var(--line);
}

/* Bouton retour en haut */
.to-top {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 90;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  background: rgba(245, 243, 238, 0.14);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--accent-soft);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  backdrop-filter: blur(10px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0.4s,
              background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--accent); color: var(--navy-900); }
.to-top svg { width: 16px; height: 16px; }

/* Barre d'action mobile */
.mobile-bar {
  position: fixed;
  inset: auto 0 0;
  z-index: 95;
  display: none;
  gap: 1px;
  background: var(--line-soft);
  border-top: 1px solid var(--line-soft);
  backdrop-filter: blur(14px);
}
.mobile-bar a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 0.5rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(7, 12, 28, 0.94);
  color: var(--cream);
}
.mobile-bar a.is-primary { background: var(--accent); color: var(--navy-900); }
.mobile-bar svg { width: 15px; height: 15px; }

/* --------------------------------------------------------------------------
   22. Pages légales
   -------------------------------------------------------------------------- */
.legal { max-width: 780px; }
.legal h2 { font-size: 1.6rem; margin-top: 2.8rem; }
.legal h2:first-of-type { margin-top: 0; }
.legal h3 { font-size: 1.15rem; margin-top: 1.8rem; }
.legal p, .legal li { color: var(--text-muted); font-size: 0.97rem; }
.legal ul { list-style: disc; padding-left: 1.3rem; display: grid; gap: 0.5rem; margin-bottom: 1.2rem; }
.legal a { color: var(--accent-soft); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   23. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .form-layout { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  :root { --header-h: 72px; }

  .nav__menu, .nav__actions .nav__cta, .nav__phone { display: none; }
  .burger { display: flex; }

  /* Mot-symbole resserré : 92 px de large, contre 244 px pour l'ancien logo */
  .brand__name,
  .site-header.is-stuck .brand__name { font-size: 1.375rem; }
  .brand__tag,
  .site-header.is-stuck .brand__tag { font-size: 0.44rem; letter-spacing: 0.3em; }


  .gallery { columns: 2; }
  .rep__list { columns: 2; }
  .gallery--preview { grid-template-columns: repeat(2, 1fr); }

  .banner { min-height: 46vh; }
  .page-hero { min-height: 54vh; }

  .mobile-bar { display: flex; }
  body { padding-bottom: 52px; }
  .to-top { bottom: calc(52px + 1rem); }
}

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .gallery { columns: 1; }
  .rep__list { columns: 1; }
  .gallery--preview { grid-template-columns: 1fr; }
  .offer { grid-template-columns: auto 1fr; }
  .offer__arrow { display: none; }
  .hero__meta { gap: 1.4rem 2rem; }
  .hero__meta div strong { font-size: 1.5rem; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
  .testi-nav { justify-content: center; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   24. Accessibilité — mouvement réduit & impression
   -------------------------------------------------------------------------- */
@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;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero__media img, .page-hero__media img, .banner__media img { animation: none; transform: none; }
}

@media print {
  .site-header, .nav-drawer, .mobile-bar, .to-top, .hero__scroll, .lightbox { display: none !important; }
  body { background: #fff; color: #111; }
  .hero, .page-hero { min-height: auto; }
}