/* =========================================================================
   JAZZ AMBASSADOR 12 — Feuille de style unique
   Direction artistique : affiche de concert sérigraphiée
   Sommaire :
     01. Reset
     02. Variables (couleurs, typographie, espacements)
     03. Base & typographie
     04. Utilitaires (conteneurs, sur-titres, révélations)
     05. Boutons
     06. En-tête & navigation
     07. Pied de page
     08. Composants (second line, cartes, timeline, encarts)
     09. Sections de page
     10. Accessibilité & mouvement réduit
   ========================================================================= */


/* =========================================================================
   01. RESET
   ========================================================================= */

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

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

body,
h1, h2, h3, h4, p,
figure, blockquote,
ol, ul, dl, dd { margin: 0; }

ol[class], ul[class] { list-style: none; padding: 0; }

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

a { color: inherit; }

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

button { cursor: pointer; background: none; border: 0; }


/* =========================================================================
   02. VARIABLES
   ========================================================================= */

:root {

  /* --- Couleurs --------------------------------------------------------- */
  --nuit:        #131B2E;   /* fond dominant */
  --nuit-fonce:  #131B2E;   /* pied de page, aplats profonds */
  --papier:      #F4EFE4;   /* fond clair, texte sur fond sombre */
  --papier-ombre:#EDE6D6;   /* variante de papier (encarts) — éclaircie pour
                               garder la brique lisible en titre : 4,75:1 */
  --laiton:      #D4A03C;   /* accent principal — traits, icônes, aplats */
  --brique:      #A8452F;   /* accent secondaire — texte accentué sur papier */
  --bayou:       #2E5248;   /* accent tertiaire */
  --encre:       #1A1A1A;   /* texte sur papier */

  /* Règle de contraste :
     sur papier -> texte encre/nuit, accent texte brique (5.1:1)
     sur nuit   -> texte papier, accent texte laiton (8.2:1)
     le laiton ne sert jamais de couleur de texte sur fond papier. */

  /* --- Typographie ------------------------------------------------------ */
  --font-display: "Bevan", "Rockwell", "Bookman Old Style", Georgia, serif;
  --font-texte:   "Karla", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --fs-900: clamp(2.75rem, 8vw, 5.25rem);
  --fs-800: clamp(2rem, 4.6vw, 3.25rem);
  --fs-700: clamp(1.5rem, 3vw, 2.125rem);
  --fs-600: clamp(1.25rem, 2vw, 1.5rem);
  --fs-500: clamp(1.0625rem, 1.4vw, 1.25rem);
  --fs-400: 1.0625rem;
  --fs-300: 0.9375rem;
  --fs-mono: clamp(0.6875rem, 1vw, 0.8125rem);

  /* --- Espacements ------------------------------------------------------ */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 1rem;
  --e-4: 1.5rem;
  --e-5: 2.5rem;
  --e-6: 4rem;
  --e-7: 6rem;

  --gouttiere: clamp(1.25rem, 5vw, 4rem);
  --largeur-max: 1200px;
  --largeur-texte: 68ch;

  --entete-h: 68px;

  --transition: 200ms ease;
}


/* =========================================================================
   03. BASE & TYPOGRAPHIE
   ========================================================================= */

body {
  background: var(--papier);
  color: var(--encre);
  font-family: var(--font-texte);
  font-size: var(--fs-400);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.005em;
}

h1 { font-size: var(--fs-800); }
h2 { font-size: var(--fs-700); }
h3 { font-size: var(--fs-600); line-height: 1.15; }

p { max-width: var(--largeur-texte); }

p + p { margin-top: var(--e-3); }

strong { font-weight: 700; }

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--laiton);
  outline-offset: 3px;
  border-radius: 2px;
}


/* =========================================================================
   04. UTILITAIRES
   ========================================================================= */

.conteneur {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.section { padding-block: clamp(3.5rem, 9vw, var(--e-7)); }

.section--nuit    { background: var(--nuit);   color: var(--papier); }
.section--papier  { background: var(--papier); color: var(--encre); }
.ancre            { scroll-margin-top: calc(var(--entete-h) + 1rem); }

.section--nuit h2 { color: var(--papier); }

/* Sur-titre : petite capitale mono, toujours au-dessus d'un h2 */
.surtitre {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brique);
  margin-bottom: var(--e-3);
}

.section--nuit .surtitre,
.entete-page .surtitre,
.hero .surtitre { color: var(--laiton); }

.mesure { max-width: var(--largeur-texte); }

.chapeau {
  font-size: var(--fs-500);
  line-height: 1.5;
}

.entete-section { margin-bottom: var(--e-5); }

/* Lien d'évitement */
.saut-contenu {
  position: absolute;
  top: 0;
  left: var(--e-3);
  transform: translateY(-120%);
  z-index: 200;
  background: var(--laiton);
  color: var(--nuit);
  padding: var(--e-2) var(--e-3);
  font-family: var(--font-mono);
  font-size: var(--fs-300);
  text-decoration: none;
  transition: transform var(--transition);
}
.saut-contenu:focus { transform: translateY(0); }

/* Révélation au défilement (activée seulement si JS est disponible) */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.js .reveal.est-visible {
  opacity: 1;
  transform: none;
}


/* =========================================================================
   05. BOUTONS
   ========================================================================= */

.bouton {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: 0.85em 1.6em;
  font-family: var(--font-mono);
  font-size: var(--fs-300);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
}

.bouton:hover { transform: translateY(-2px); }

.bouton--primaire {
  background: var(--laiton);
  color: var(--nuit);
  border-color: var(--laiton);
}
.bouton--primaire:hover { background: #E4B255; border-color: #E4B255; }

.bouton--secondaire {
  background: transparent;
  color: var(--papier);
  border-color: var(--laiton);
}
.bouton--secondaire:hover { background: rgba(212, 160, 60, 0.16); }

/* Variante sur fond papier */
.section--papier .bouton--secondaire {
  color: var(--brique);
  border-color: var(--brique);
}
.section--papier .bouton--secondaire:hover { background: rgba(168, 69, 47, 0.09); }

/* Variante sur la bande CTA (fond brique) */
.bouton--clair {
  background: var(--papier);
  color: var(--brique);
  border-color: var(--papier);
}
.bouton--clair:hover { background: #fff; border-color: #fff; }

.groupe-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-4);
}


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

.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--nuit);
  border-bottom: 1px solid rgba(212, 160, 60, 0.22);
  transition: background-color var(--transition), box-shadow var(--transition);
}

.entete.est-defile {
  background: rgba(19, 27, 46, 0.94);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
}

.entete__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  min-height: var(--entete-h);
}

/* --- Logo --- */
.logo {
  display: inline-flex;
  align-items: center;
  color: var(--papier);
  text-decoration: none;
  flex: 0 0 auto;
}
.logo svg { height: 44px; width: auto; overflow: visible; }  /* jamais de lettre rognée,
                                                       quelles que soient les métriques de la police */
.logo:hover { color: var(--laiton); }

.logo__sigle   { fill: currentColor; font-family: var(--font-display); font-size: 30px; }
.logo__numero  { fill: var(--laiton); font-family: var(--font-mono); font-size: 20px; font-weight: 600; }
.logo__nom     { fill: currentColor; font-family: var(--font-mono); font-size: 8px;
                 letter-spacing: 2.2px; opacity: 0.75; }

@media (max-width: 420px) { .logo svg { height: 36px; } }

/* --- Navigation --- */
.nav__liste {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.25rem);
}

.nav__lien {
  display: inline-block;
  padding: var(--e-2) 0;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--papier);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.nav__lien:hover { color: var(--laiton); border-bottom-color: rgba(212, 160, 60, 0.5); }
.nav__lien[aria-current="page"] { color: var(--laiton); border-bottom-color: var(--laiton); }

/* --- Bouton burger --- */
.burger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--papier);
}
.burger__trait {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  position: relative;
  transition: background-color var(--transition);
}
.burger__trait::before,
.burger__trait::after {
  content: "";
  position: absolute;
  left: 0;
  width: 24px;
  height: 2px;
  background: currentColor;
  transition: transform var(--transition), top var(--transition);
}
.burger__trait::before { top: -7px; }
.burger__trait::after  { top: 7px; }

.burger[aria-expanded="true"] .burger__trait { background: transparent; }
.burger[aria-expanded="true"] .burger__trait::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__trait::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 899px) {
  .burger { display: inline-flex; }

  .nav {
    position: fixed;
    inset: var(--entete-h) 0 auto 0;
    background: var(--nuit-fonce);
    border-bottom: 2px solid var(--laiton);
    padding: var(--e-4) var(--gouttiere) var(--e-5);
    transform: translateY(-102%);
    visibility: hidden;
    transition: transform 280ms ease, visibility 280ms;
  }
  .nav.est-ouvert { transform: translateY(0); visibility: visible; }

  .nav__liste {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--e-3);
  }
  .nav__lien { font-size: 1rem; }
}


/* =========================================================================
   07. PIED DE PAGE
   ========================================================================= */

.pied {
  background: var(--nuit-fonce);
  color: var(--papier);
  padding-block: var(--e-6) var(--e-4);
}

.pied__grille {
  display: grid;
  gap: var(--e-5);
  padding-bottom: var(--e-5);
  border-bottom: 1px solid rgba(244, 239, 228, 0.14);
}

@media (min-width: 700px) {
  .pied__grille { grid-template-columns: 1.4fr 1fr 1fr; }
}

.pied h2 {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--laiton);
  margin-bottom: var(--e-3);
}

.pied address {
  font-style: normal;
  font-size: var(--fs-300);
  line-height: 1.9;
}

.pied a { color: var(--papier); text-decoration-color: rgba(212, 160, 60, 0.6); }
.pied a:hover { color: var(--laiton); }

.pied__liste li + li { margin-top: var(--e-2); }
.pied__liste a { font-size: var(--fs-300); text-decoration: none; }
.pied__liste a:hover { text-decoration: underline; }

.pied__legal {
  margin-top: var(--e-4);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: 1.9;
  color: rgba(244, 239, 228, 0.72);
}
.pied__legal p { max-width: none; }

.pied .logo svg { height: 40px; }
.pied__baseline {
  margin-top: var(--e-3);
  font-size: var(--fs-300);
  max-width: 34ch;
  color: rgba(244, 239, 228, 0.82);
}


/* =========================================================================
   08. COMPOSANTS
   ========================================================================= */

/* --- 8.1 Second line : le trait signature entre les sections ------------ */
.secondline {
  display: block;
  color: var(--laiton);          /* le fond est hérité de la section */
  margin-bottom: var(--e-5);
}
.secondline svg {
  width: min(100%, 620px);
  height: 40px;
  margin-inline: auto;
}

.secondline__trait {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  transition: stroke-dashoffset 1600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.secondline.est-visible .secondline__trait,
html:not(.js) .secondline__trait { stroke-dashoffset: 0; }

.secondline__marcheur {
  fill: currentColor;
  opacity: 0;
  transition: opacity 500ms ease;
}
.secondline.est-visible .secondline__marcheur,
html:not(.js) .secondline__marcheur { opacity: 1; }
.secondline.est-visible .secondline__marcheur:nth-of-type(2) { transition-delay: 700ms; }
.secondline.est-visible .secondline__marcheur:nth-of-type(3) { transition-delay: 900ms; }
.secondline.est-visible .secondline__marcheur:nth-of-type(4) { transition-delay: 1100ms; }

/* --- 8.2 Cartes d'action ------------------------------------------------ */
.cartes {
  display: grid;
  gap: var(--e-4);
}
@media (min-width: 700px)  { .cartes { grid-template-columns: repeat(3, 1fr); } }

.carte {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-4);
  background: rgba(244, 239, 228, 0.05);
  border: 1px solid rgba(212, 160, 60, 0.3);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--transition), border-color var(--transition),
              transform var(--transition);
}
.carte:hover {
  background: rgba(244, 239, 228, 0.09);
  border-color: var(--laiton);
  transform: translateY(-4px);
}
.carte__icone { color: var(--laiton); width: 48px; height: 48px; }
.carte h3 { font-size: var(--fs-600); }
.carte p { font-size: var(--fs-300); max-width: none; }
.carte__fleche {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--laiton);
}

/* Sur fond papier, le laiton ne passe pas en couleur de texte : on bascule
   sur la brique et sur des aplats sombres translucides. */
.section--papier .carte {
  background: rgba(26, 26, 26, 0.035);
  border-color: rgba(26, 26, 26, 0.2);
}
.section--papier .carte:hover {
  background: rgba(26, 26, 26, 0.06);
  border-color: var(--brique);
}
.section--papier .carte__icone  { color: var(--brique); }
.section--papier .carte__fleche { color: var(--brique); }

/* --- 8.3 Repères chiffrés (section Tremé) ------------------------------- */
.reperes {
  display: grid;
  gap: var(--e-4);
  margin-top: var(--e-5);
  padding-top: var(--e-4);
  border-top: 1px solid rgba(212, 160, 60, 0.3);
}
@media (min-width: 640px) { .reperes { grid-template-columns: repeat(3, 1fr); } }

.repere__annee {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-700);
  color: var(--laiton);
  line-height: 1;
  margin-bottom: var(--e-2);
}
.repere p {
  font-size: var(--fs-300);
  max-width: 32ch;
}

/* --- 8.4 Grille d'objectifs -------------------------------------------- */
.objectifs {
  display: grid;
  gap: var(--e-5);
  margin-top: var(--e-5);
}
@media (min-width: 800px) { .objectifs { grid-template-columns: repeat(2, 1fr); } }

.objectif { padding-top: var(--e-3); border-top: 3px solid var(--laiton); }
.objectif h3 { margin-bottom: var(--e-2); }
.objectif p { font-size: var(--fs-300); max-width: 44ch; }
.objectif__numero {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.16em;
  color: var(--brique);
  display: block;
  margin-bottom: var(--e-1);
}

/* --- 8.5 Timeline (axe = trait de la second line) ----------------------- */
.timeline {
  position: relative;
  margin-top: var(--e-6);
}
.timeline::before {
  content: "";
  position: absolute;
  top: 0.4em;
  bottom: 0;
  left: 8px;
  width: 2px;
  background: linear-gradient(to bottom,
              var(--laiton) 0%, var(--laiton) 92%, rgba(212, 160, 60, 0) 100%);
}

.timeline__item {
  position: relative;
  padding-left: 44px;
  padding-bottom: var(--e-5);
}
.timeline__item:last-child { padding-bottom: 0; }

.timeline__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--laiton);
  box-shadow: 0 0 0 5px var(--papier), 0 0 0 6px rgba(212, 160, 60, 0.35);
}
/* L'anneau des jalons reprend la couleur de fond de la section. */
.section--nuit .timeline__item::before {
  box-shadow: 0 0 0 5px var(--nuit), 0 0 0 6px rgba(212, 160, 60, 0.35);
}

.timeline__date {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brique);
  margin-bottom: var(--e-1);
}
/* Sur fond sombre, la date passe au laiton (la brique n'y est pas lisible). */
.section--nuit .timeline__date { color: var(--laiton); }
.timeline__titre { font-size: var(--fs-600); margin-bottom: var(--e-2); }
.timeline__item p { font-size: var(--fs-300); max-width: 46ch; }

@media (min-width: 900px) {
  .timeline::before { left: 50%; transform: translateX(-1px); }

  .timeline__item {
    width: 50%;
    padding-left: 0;
    padding-right: var(--e-5);
    text-align: right;
  }
  .timeline__item::before { left: auto; right: -9px; }
  .timeline__item p { max-width: 42ch; margin-left: auto; }

  .timeline__item:nth-child(even) {
    margin-left: 50%;
    padding-right: 0;
    padding-left: var(--e-5);
    text-align: left;
  }
  .timeline__item:nth-child(even)::before { left: -9px; right: auto; }
  .timeline__item:nth-child(even) p { margin-left: 0; margin-right: auto; }
}

/* --- 8.6 Encart d'informations pratiques -------------------------------- */
.encart {
  margin-top: var(--e-6);
  padding: var(--e-4);
  border: 1px solid rgba(26, 26, 26, 0.18);
  border-left: 4px solid var(--bayou);
  background: var(--papier-ombre);
}
.encart h2 {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brique);
  margin-bottom: var(--e-3);
}
.encart dl {
  display: grid;
  gap: var(--e-2) var(--e-4);
  font-family: var(--font-mono);
  font-size: var(--fs-300);
}
@media (min-width: 640px) { .encart dl { grid-template-columns: max-content 1fr; } }
.encart dt { color: rgba(26, 26, 26, 0.7); }
.encart dd { margin: 0; }

/* --- 8.7 Blocs d'action (page Nos actions) ------------------------------ */
.action { display: grid; gap: var(--e-4); align-items: center; }

@media (min-width: 900px) {
  .action { grid-template-columns: 1fr 1fr; gap: var(--e-6); }
  .action--inverse .action__media { order: 2; }
}

.action__media {
  border: 1px solid rgba(212, 160, 60, 0.35);
  background: var(--nuit-fonce);
}
.action__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 45%;   /* garde les mains et les visages dans le cadre */
}

.action__numero {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--e-2);
}
.section--papier .action__numero { color: var(--brique); }
.section--nuit  .action__numero { color: var(--laiton); }

.action h2 { margin-bottom: var(--e-3); }

.liste-exemples {
  margin-top: var(--e-4);
  padding-top: var(--e-3);
  border-top: 1px solid transparent;
}
.section--papier .liste-exemples { border-top-color: rgba(26, 26, 26, 0.2); }
.section--nuit   .liste-exemples { border-top-color: rgba(244, 239, 228, 0.25); }
.liste-exemples li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--fs-300);
}
.liste-exemples li + li { margin-top: var(--e-2); }
.liste-exemples li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--laiton);
}

/* --- 8.9 Galerie en colonnes (effet masonry) ---------------------------- */
.galerie {
  columns: 1;
  column-gap: var(--e-3);
}
@media (min-width: 560px)  { .galerie { columns: 2; } }
@media (min-width: 900px)  { .galerie { columns: 3; } }
@media (min-width: 1200px) { .galerie { columns: 4; } }

.galerie__item {
  break-inside: avoid;
  margin: 0 0 var(--e-3);
  overflow: hidden;
  border: 1px solid rgba(212, 160, 60, 0.28);
  background: var(--nuit-fonce);
}
.galerie__item img {
  width: 100%;
  transition: transform 500ms ease, filter 500ms ease;
}
.galerie__item:hover img { transform: scale(1.04); }

/* --- 8.8 Blocs de contact ----------------------------------------------- */
.contacts {
  display: grid;
  gap: var(--e-4);
  margin-top: var(--e-5);
}
@media (min-width: 700px) { .contacts { grid-template-columns: repeat(2, 1fr); } }

.contact-bloc {
  padding: var(--e-4);
  background: var(--nuit);
  color: var(--papier);
  border-left: 4px solid var(--laiton);
}
.contact-bloc__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--laiton);
  margin-bottom: var(--e-2);
}
.contact-bloc a {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  line-height: 1.2;
  text-decoration: none;
  word-break: break-word;
  border-bottom: 2px solid rgba(212, 160, 60, 0.45);
  transition: border-color var(--transition), color var(--transition);
}
.contact-bloc a:hover { color: var(--laiton); border-bottom-color: var(--laiton); }
.contact-bloc p {
  margin-top: var(--e-3);
  font-size: var(--fs-300);
  color: rgba(244, 239, 228, 0.8);
}

.adresse-bloc {
  margin-top: var(--e-5);
  display: grid;
  gap: var(--e-4);
}
@media (min-width: 700px) { .adresse-bloc { grid-template-columns: 1fr 1fr; } }

.adresse-bloc address {
  font-style: normal;
  font-family: var(--font-display);
  font-size: var(--fs-600);
  line-height: 1.4;
}

.orientation li { padding-block: var(--e-3); border-top: 1px solid rgba(26, 26, 26, 0.18); }
.orientation li:last-child { border-bottom: 1px solid rgba(26, 26, 26, 0.18); }
.orientation strong { display: block; font-size: var(--fs-300); }
.orientation span { font-size: var(--fs-300); color: rgba(26, 26, 26, 0.72); }


/* =========================================================================
   09. SECTIONS DE PAGE
   ========================================================================= */

/* --- 9.1 Hero (accueil) -------------------------------------------------- */
/* Le voile est un dégradé : opaque à gauche, où se pose le texte, presque
   transparent à droite, où la trompette reste visible. */
.hero {
  position: relative;
  background-color: var(--nuit);
  background-image:
    linear-gradient(100deg,
      rgba(19, 27, 46, 0.97) 0%,
      rgba(19, 27, 46, 0.93) 38%,
      rgba(19, 27, 46, 0.62) 68%,
      rgba(19, 27, 46, 0.38) 100%),
    url("../img/hero-trompette.jpg");
  background-size: cover;
  background-position: center right;
  color: var(--papier);
  overflow: hidden;
  padding-block: clamp(4rem, 12vw, 8.5rem);
}

/* Sous 900 px, le texte occupe toute la largeur : le voile devient uniforme. */
@media (max-width: 899px) {
  .hero {
    background-image:
      linear-gradient(rgba(19, 27, 46, 0.92), rgba(19, 27, 46, 0.94)),
      url("../img/hero-trompette.jpg");
  }
}

.hero__inner { position: relative; z-index: 1; }

.hero h1 {
  font-size: var(--fs-800);
  text-transform: uppercase;
  max-width: 16ch;
  margin-bottom: var(--e-4);
}
.hero h1 em {
  font-style: normal;
  color: var(--laiton);
}

.hero__sous-titre {
  font-size: var(--fs-500);
  max-width: 52ch;
  color: rgba(244, 239, 228, 0.9);
}

/* --- 9.2 En-tête de page (pages intérieures) ----------------------------- */
.entete-page {
  background: var(--nuit);
  color: var(--papier);
  padding-block: clamp(3rem, 8vw, 5.5rem);
  border-bottom: 3px solid var(--laiton);
}
.entete-page h1 {
  text-transform: uppercase;
  margin-bottom: var(--e-3);
}
.entete-page p {
  font-size: var(--fs-500);
  color: rgba(244, 239, 228, 0.88);
}

/* --- 9.3 Bande d'appel à l'action ---------------------------------------- */
.cta {
  background: var(--brique);
  color: var(--papier);
  padding-block: clamp(3rem, 8vw, 5rem);
}
.cta h2 {
  text-transform: uppercase;
  max-width: 20ch;
  margin-bottom: var(--e-3);
}
.cta p { color: rgba(244, 239, 228, 0.93); }
.cta__mail {
  display: inline-block;
  margin-top: var(--e-4);
  font-family: var(--font-mono);
  font-size: var(--fs-300);
  color: var(--papier);
  text-underline-offset: 4px;
}

/* --- 9.4 Deux colonnes texte (section association / Tremé) --------------- */
.duo {
  display: grid;
  gap: var(--e-4);
  align-items: start;
}
@media (min-width: 900px) {
  .duo { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--e-6); }
  .duo .entete-section { margin-bottom: 0; }
}


/* =========================================================================
   10. ACCESSIBILITÉ & MOUVEMENT RÉDUIT
   ========================================================================= */

/* Toutes les animations sont désactivées de façon ciblée : aucune règle
   universelle, aucun !important. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .js .reveal { opacity: 1; transform: none; transition: none; }

  .secondline__trait     { stroke-dashoffset: 0; transition: none; }
  .secondline__marcheur  { opacity: 1; transition: none; }

  .bouton        { transition: background-color 1ms linear, color 1ms linear; }
  .bouton:hover  { transform: none; }
  .carte         { transition: background-color 1ms linear, border-color 1ms linear; }
  .carte:hover   { transform: none; }
  .galerie__item img       { transition: none; }
  .galerie__item:hover img { transform: none; }

  .nav           { transition: none; }
  .entete        { transition: none; }
  .saut-contenu  { transition: none; }
  .nav__lien,
  .contact-bloc a { transition: none; }
}