/* Variables globales : thème clair par défaut */
:root  {
  color-scheme:light;
  --orange:#ff5a1f;
  --black:#111;
  --ink:#222;
  --muted:#696969;
  --line:#e9e9e9;
  --soft:#f6f6f6;
  --white:#fff;
  --header-bg:rgba(255,255,255,.88);
  --header-line:rgba(17,17,17,.08);
  --panel:#111;
  --panel-ink:#fff;
  --img-bg:#f6f6f6;
  --logo-bg:#fff;
  --on-accent:#fff;
  --hero-bg:radial-gradient(circle at 88% 20%,rgba(255,90,31,.22),transparent 32%),linear-gradient(135deg,#fff 0%,#f9f9f9 100%);
  --real-hero-bg:radial-gradient(circle at 18% 14%,rgba(255,90,31,.16),transparent 30%),linear-gradient(135deg,#fff 0%,#f7f7f7 100%);
  --page-hero-bg:linear-gradient(180deg,#fff 0%,#f7f7f7 100%);
  --radius-md:16px;
  --radius-lg:24px;
  --shadow:0 24px 70px rgba(17,17,17,.12);
  --font-title:"Manrope","IBM Plex Sans Arabic",system-ui,sans-serif;
  --font-body:"Manrope","IBM Plex Sans Arabic",system-ui,sans-serif
}

/* Mode sombre automatique : suit le réglage de l'appareil,
   sauf si le visiteur a explicitement choisi le mode clair. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme:dark;
  --orange:#ff6a35;
  --black:#f2f2f0;
  --ink:#d5d5d8;
  --muted:#9b9ba1;
  --line:#2b2b2e;
  --soft:#1a1a1d;
  --white:#141416;
  --header-bg:rgba(20,20,22,.86);
  --header-line:rgba(255,255,255,.09);
  --panel:#1e1e21;
  --panel-ink:#f2f2f0;
  --img-bg:#1e1e21;
  --logo-bg:#fff;
  --on-accent:#141416;
  --hero-bg:radial-gradient(circle at 88% 20%,rgba(255,90,31,.16),transparent 32%),linear-gradient(135deg,#141416 0%,#0e0e10 100%);
  --real-hero-bg:radial-gradient(circle at 18% 14%,rgba(255,90,31,.14),transparent 30%),linear-gradient(135deg,#141416 0%,#0e0e10 100%);
  --page-hero-bg:linear-gradient(180deg,#141416 0%,#0e0e10 100%);
  --shadow:0 24px 70px rgba(0,0,0,.45)
}

}

/* Mode sombre choisi manuellement via le bouton (prioritaire) */
:root[data-theme="dark"] {
  color-scheme:dark;
  --orange:#ff6a35;
  --black:#f2f2f0;
  --ink:#d5d5d8;
  --muted:#9b9ba1;
  --line:#2b2b2e;
  --soft:#1a1a1d;
  --white:#141416;
  --header-bg:rgba(20,20,22,.86);
  --header-line:rgba(255,255,255,.09);
  --panel:#1e1e21;
  --panel-ink:#f2f2f0;
  --img-bg:#1e1e21;
  --logo-bg:#fff;
  --on-accent:#141416;
  --hero-bg:radial-gradient(circle at 88% 20%,rgba(255,90,31,.16),transparent 32%),linear-gradient(135deg,#141416 0%,#0e0e10 100%);
  --real-hero-bg:radial-gradient(circle at 18% 14%,rgba(255,90,31,.14),transparent 30%),linear-gradient(135deg,#141416 0%,#0e0e10 100%);
  --page-hero-bg:linear-gradient(180deg,#141416 0%,#0e0e10 100%);
  --shadow:0 24px 70px rgba(0,0,0,.45)
}
html,body {
  transition:background-color .25s ease,color .25s ease
}

/* Bouton mode sombre */
.theme-toggle {
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  padding:0;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--white);
  color:var(--black);
  cursor:pointer;
  transition:.2s ease
}
.theme-toggle:hover {
  border-color:var(--orange);
  color:var(--orange)
}
.theme-toggle svg {
  width:19px;
  height:19px;
  grid-area:1/1
}
.theme-toggle .icon-moon {
  display:none
}
/* L'icone suit le mode reellement affiche, y compris en automatique. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun {
  display:none
}
:root:not([data-theme="light"]) .theme-toggle .icon-moon {
  display:block
}

}
:root[data-theme="dark"] .theme-toggle .icon-sun {
  display:none
}
:root[data-theme="dark"] .theme-toggle .icon-moon {
  display:block
}

/* Base */
*  {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.6
}
img {
  display:block;
  width:100%;
  height:auto
}
a {
  color:inherit;
  text-decoration:none
}
.container {
  width:min(1140px,calc(100% - 32px));
  margin-inline:auto
}

/* Navbar commune */
.site-header  {
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:1px solid var(--header-line);
  background:var(--header-bg);
  backdrop-filter:blur(18px)
}
.navbar {
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-title);
  font-weight:800;
  color:var(--black)
}
.brand-mark {
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:var(--orange);
  color:var(--white);
  box-shadow:0 12px 28px rgba(255,90,31,.34)
}
.brand-text {
  font-size:1.12rem
}
.nav-panel {
  display:flex;
  align-items:center;
  gap:20px
}
.nav-links {
  display:flex;
  align-items:center;
  gap:6px;
  padding:0;
  margin:0;
  list-style:none
}
.nav-links a {
  display:inline-flex;
  padding:10px 14px;
  border-radius:999px;
  color:var(--muted);
  font-weight:700;
  font-size:.92rem;
  transition:.18s ease
}
.nav-links a:hover,.nav-links a.active {
  background:var(--black);
  color:var(--white);
  transform:translateY(-1px)
}
.language-selector {
  position:relative
}
.language-button {
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--white);
  color:var(--black);
  font:800 .88rem var(--font-body);
  cursor:pointer
}
.flag {
  display:inline-flex;
  align-items:center;
  flex:none;
  line-height:1
}
/* Drapeaux SVG : un liseré assure le contraste du blanc (France,
   Royaume-Uni) aussi bien sur fond clair que sombre. */
.flag-svg {
  display:block;
  width:22px;
  height:15px;
  border-radius:3px;
  object-fit:cover;
  box-shadow:0 0 0 1px rgba(17,17,17,.16)
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .flag-svg {
  box-shadow:0 0 0 1px rgba(255,255,255,.22)
}

}
:root[data-theme="dark"] .flag-svg {
  box-shadow:0 0 0 1px rgba(255,255,255,.22)
}
.language-menu .flag-svg {
  width:24px;
  height:16px
}
.language-menu {
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  width:190px;
  margin:0;
  padding:8px;
  list-style:none;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--white);
  box-shadow:var(--shadow);
  opacity:0;
  pointer-events:none;
  transform:translateY(8px);
  transition:.18s ease
}
.language-selector.is-open .language-menu {
  opacity:1;
  pointer-events:auto;
  transform:translateY(0)
}
.language-menu a {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border-radius:10px;
  font-weight:700
}
.language-menu a:hover {
  background:var(--soft)
}
.nav-toggle {
  display:none;
  width:44px;
  height:44px;
  border:0;
  border-radius:999px;
  background:var(--black);
  cursor:pointer
}
.nav-toggle span {
  display:block;
  width:18px;
  height:2px;
  margin:4px auto;
  border-radius:99px;
  background:var(--white)
}

/* Page accueil : hero */
.hero  {
  min-height:calc(100vh - 78px);
  display:grid;
  align-items:center;
  overflow:hidden;
  background:var(--hero-bg)
}
.hero-grid {
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);
  align-items:center;
  gap:64px;
  padding-block:76px
}
.eyebrow {
  margin:0 0 14px;
  color:var(--orange);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:0;
  font-size:.78rem
}
h1,h2,h3 {
  margin:0;
  color:var(--black);
  font-family:var(--font-title);
  letter-spacing:0;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none
}
h1 {
  max-width:900px;
  font-size:clamp(3.2rem,8vw,6.9rem);
  line-height:1.04
}
h2 {
  font-size:clamp(2.1rem,4.2vw,4.4rem);
  line-height:1.08
}
h3 {
  font-size:clamp(1.35rem,2vw,2rem);
  line-height:1.15
}
p {
  margin:0;
  overflow-wrap:break-word;
  word-break:break-word
}

/* Cadres de texte : jamais de recouvrement/débordement */
.bento-card,.value-card,.press-card,.member-card,.stat-row div,.event-meta div,
.sound-card,.hero-badge,.event-card-content,.detail-content,.story-content,
.clipping-card,.clipping-info,.press-event-header,.press-instructions,
.patronage-inner,.gallery-credit {
  overflow-wrap:break-word;
  word-break:break-word
}
h4,h5,h6 {
  margin:0;
  overflow-wrap:break-word;
  word-break:break-word
}
.event-card-content h2,.press-card h2,.bento-card h3 {
  line-height:1.12
}
.hero-lead,.page-hero-inner p,.split-heading p {
  max-width:650px;
  color:var(--muted);
  font-size:1.08rem
}
.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px
}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:14px 18px;
  border-radius:999px;
  font-weight:900;
  transition:.18s ease
}
.btn:hover {
  transform:translateY(-2px)
}
.btn-primary {
  background:var(--orange);
  color:var(--on-accent);
  box-shadow:0 16px 36px rgba(255,90,31,.32)
}
.btn-ghost {
  background:var(--black);
  color:var(--white)
}
.hero-visual {
  position:relative;
  min-height:560px;
  border-radius:32px;
  background:linear-gradient(135deg,rgba(17,17,17,.92),rgba(17,17,17,.78)),url("../images/hero-music.svg") center/cover;
  box-shadow:var(--shadow);
  isolation:isolate
}
.vinyl-disc {
  position:absolute;
  width:330px;
  aspect-ratio:1;
  top:50%;
  left:50%;
  border:28px solid #1c1c1c;
  border-radius:50%;
  background:radial-gradient(circle,var(--orange) 0 15%,#fff 16% 19%,#0d0d0d 20% 100%);
  transform:translate(-50%,-50%);
  animation:spin 14s linear infinite
}
.sound-card {
  position:absolute;
  z-index:2;
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--radius-lg);
  background:rgba(255,255,255,.12);
  color:var(--white);
  backdrop-filter:blur(18px)
}
.sound-card-main {
  top:30px;
  left:30px;
  padding:24px
}
.sound-card-main strong {
  display:block;
  font:800 4rem/1 var(--font-title)
}
.sound-card-main small,.sound-card-main span {
  color:rgba(255,255,255,.74);
  font-weight:800
}
.sound-card-note {
  right:24px;
  bottom:24px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px
}
.sound-card-note span {
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--orange);
  font-size:1.4rem
}
.equalizer {
  position:absolute;
  left:30px;
  bottom:34px;
  display:flex;
  align-items:end;
  gap:8px;
  height:96px
}
.equalizer span {
  width:13px;
  min-height:24px;
  border-radius:999px;
  background:var(--orange);
  animation:bounce 1s ease-in-out infinite alternate
}
.equalizer span:nth-child(2) {
  animation-delay:.12s
}
.equalizer span:nth-child(3) {
  animation-delay:.24s
}
.equalizer span:nth-child(4) {
  animation-delay:.36s
}
.equalizer span:nth-child(5) {
  animation-delay:.48s
}

.patronage-section {
  padding-bottom:24px
}
.patronage-inner {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  text-align:center
}
.patronage-inner .eyebrow {
  margin:0
}
.patronage-logo {
  display:grid;
  place-items:center;
  width:min(100%,488px);
  min-height:220px;
  padding:32px 44px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--logo-bg)
}
.patronage-logo img {
  width:min(100%,400px);
  max-height:176px;
  object-fit:contain
}
.sponsors-section .patronage-inner {
  margin-bottom:38px
}

/* Sections et grilles */
.section  {
  padding-block:92px
}
.section-tight {
  padding-top:76px
}
.section-muted {
  background:var(--soft)
}
.section-heading {
  margin-bottom:34px
}
.gallery-credit {
  margin-top:10px;
  color:var(--muted);
  font-size:.86rem;
  font-weight:600;
  letter-spacing:.02em
}
.split-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px
}
.bento-grid {
  display:grid;
  grid-template-columns:1.25fr .8fr .8fr;
  grid-auto-rows:minmax(230px,auto);
  gap:16px
}
.bento-card {
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:230px;
  padding:26px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--white);
  transition:.22s ease
}
.bento-card:after {
  content:"";
  position:absolute;
  inset:auto 22px 22px auto;
  width:54px;
  aspect-ratio:1;
  border-radius:50%;
  background:var(--orange);
  opacity:.12;
  transition:.22s ease
}
.bento-card:hover {
  border-color:rgba(255,90,31,.45);
  box-shadow:var(--shadow);
  transform:translateY(-5px)
}
.bento-card:hover:after {
  opacity:1;
  transform:scale(1.9)
}
.bento-large {
  grid-row:span 2;
  background:var(--panel)
}
.bento-large h3,.bento-large p,.bento-large .card-kicker {
  color:var(--panel-ink)
}
/* Specificite volontairement haute : sans cela, .bento-card p (plus bas)
   repasse le texte en gris muet, illisible sur l'aplat orange. */
.bento-card.bento-accent h3,.bento-card.bento-accent p,.bento-card.bento-accent .card-kicker {
  color:var(--on-accent)
}
.bento-accent {
  background:var(--orange)
}
.card-kicker {
  color:var(--orange);
  font-weight:900
}
.bento-card p {
  position:relative;
  z-index:1;
  max-width:460px;
  color:var(--muted)
}
.sponsor-grid {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:12px
}
.sponsor-logo {
  min-height:116px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--white)
}
.sponsor-logo span {
  font-family:var(--font-title);
  font-size:1.2rem;
  font-weight:800
}

/* Pages internes */
.page-hero  {
  padding-block:92px 54px;
  background:var(--page-hero-bg)
}
.page-hero-inner {
  display:grid;
  gap:18px
}
.story-layout {
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:46px;
  align-items:center
}
.story-image {
  overflow:hidden;
  border-radius:28px;
  box-shadow:var(--shadow)
}
.story-image-col {
  display:flex;
  flex-direction:column;
  gap:20px
}
.story-stacked {
  grid-template-columns:minmax(0,1fr)
}
.story-stacked .story-content {
  max-width:880px;
  margin-inline:auto
}
.story-content {
  display:grid;
  gap:22px
}
.story-content p {
  color:var(--muted)
}
.stat-row {
  display:grid;
  grid-template-columns:1fr;
  gap:12px
}
.stat-row div,.value-card,.press-card,.event-meta {
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--white)
}
.stat-row div {
  padding:18px
}
.stat-row strong {
  display:block;
  color:var(--orange);
  font:800 2.4rem/1 var(--font-title)
}
.stat-row span {
  color:var(--muted);
  font-weight:800
}
.values-grid,.press-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px
}
.value-card,.press-card {
  padding:26px
}
.value-card span,.press-card span {
  color:var(--orange);
  font-weight:900
}
.value-card p,.press-card p {
  margin-top:14px;
  color:var(--muted)
}

/* Événements */
.event-grid  {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px
}
.event-card {
  position:relative;
  min-height:430px;
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:var(--black);
  box-shadow:0 16px 40px rgba(17,17,17,.12)
}
.event-card img {
  height:100%;
  min-height:430px;
  object-fit:cover;
  transition:.36s ease
}
.event-card:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 20%,rgba(0,0,0,.82) 100%)
}
/* Texte pose sur le voile noir de .event-card:after : blanc dans les deux themes. */
.event-card-content {
  position:absolute;
  z-index:1;
  left:20px;
  right:20px;
  bottom:20px;
  color:#fff
}
.event-card-content span {
  color:var(--orange);
  font-weight:900
}
.event-card-content h2 {
  margin-top:8px;
  color:#fff;
  font-size:1.62rem
}
.event-card:hover img {
  opacity:.78;
  transform:scale(1.07)
}
.detail-hero {
  padding-block:70px;
  background:var(--panel);
  color:var(--panel-ink)
}
.detail-hero-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:48px;
  align-items:center
}
.detail-hero h1,.detail-hero p {
  color:var(--panel-ink)
}
.detail-hero p {
  max-width:650px;
  margin-top:18px;
  color:rgba(255,255,255,.76)
}
.detail-hero img {
  border-radius:var(--radius-lg);
  box-shadow:0 24px 70px rgba(0,0,0,.35)
}
.back-link {
  display:inline-flex;
  margin-bottom:24px;
  color:var(--orange);
  font-weight:900
}
.detail-content {
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:42px
}
.detail-content article {
  display:grid;
  gap:20px
}
.detail-content p {
  color:var(--muted)
}
.event-meta {
  display:grid;
  gap:1px;
  overflow:hidden;
  align-self:start
}
.event-meta div {
  padding:18px;
  background:var(--white)
}
.event-meta span {
  display:block;
  color:var(--muted);
  font-size:.82rem;
  font-weight:800;
  text-transform:uppercase
}
.event-meta strong {
  color:var(--black)
}
.gallery-featured {
  margin:0 0 5px;
  border-radius:10px;
  overflow:hidden;
  background:var(--img-bg)
}
.gallery-featured[hidden] {
  display:none
}
.gallery-featured img {
  display:block;
  width:100%;
  height:auto
}
.gallery-grid {
  columns:4 240px;
  column-gap:5px;
}
.gallery-grid img {
  display:block;
  width:100%;
  height:auto;
  margin-bottom:5px;
  border-radius:10px;
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  page-break-inside:avoid;
}

/* Membres */
.members-grid  {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px
}
.member-card {
  text-align:center
}
.member-card img {
  width:100%;
  height:auto;
  border-radius:28px;
  background:var(--soft);
  box-shadow:0 18px 50px rgba(17,17,17,.1);
  transition:.22s ease
}
.member-card:hover img {
  transform:translateY(-5px)
}
.member-card h2 {
  margin-top:18px;
  font-size:1.45rem;
  color:var(--black)
}
.member-card p {
  margin-top:2px;
  color:var(--orange);
  font-weight:900
}

/* Presse et footer */
.press-card  {
  min-height:270px;
  display:flex;
  flex-direction:column;
  justify-content:space-between
}
.press-card a {
  width:fit-content;
  margin-top:22px;
  color:var(--orange);
  font-weight:900
}
.press-contact {
  background:var(--black)
}
.press-contact h2,.press-contact p {
  color:var(--white)
}

/* Revue de presse */
.press-event-block {
  margin-top:48px
}
.press-event-block:first-of-type {
  margin-top:8px
}
.press-event-header {
  margin-bottom:18px
}
.press-event-tag {
  display:inline-block;
  margin-bottom:6px;
  color:var(--orange);
  font-weight:800;
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.02em
}
.press-event-header h3 {
  font-size:clamp(1.25rem,2.4vw,1.7rem)
}
.press-clippings-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  grid-auto-rows:1fr;
  gap:16px
}
.clipping-card {
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--white);
  overflow:hidden;
  transition:.2s ease;
  color:inherit
}
.clipping-card:hover {
  transform:translateY(-3px);
  box-shadow:0 18px 40px rgba(17,17,17,.1)
}
.clipping-scan img {
  width:100%;
  height:180px;
  object-fit:cover;
  background:var(--img-bg)
}
/* Meme hauteur que les vignettes images, pour que toutes les cartes
   d'une rangee s'alignent, qu'elles portent une image ou une icone. */
.clipping-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
  height:180px;
  font-weight:900;
  font-size:1.1rem;
  color:var(--orange);
  background:var(--soft)
}
.clipping-scan img {
  flex:none
}
/* La zone de texte occupe le reste et pousse la date en bas. */
.clipping-info {
  flex:1;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:16px
}
.clipping-source {
  color:var(--orange);
  font-weight:800;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.02em
}
.clipping-info h4 {
  font-size:1rem;
  line-height:1.3;
  color:var(--black)
}
.clipping-date {
  margin-top:auto;
  padding-top:6px;
  color:var(--muted);
  font-size:.82rem
}
.press-videos-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:16px;
  margin-top:16px
}
.clipping-video-item {
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--white);
  overflow:hidden
}
.clipping-video-wrap {
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#000
}
.clipping-video-wrap iframe,
.clipping-video-wrap video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block
}
.clipping-video-wrap video {
  object-fit:contain;
  background:#000
}
.clipping-fallback-link {
  margin-top:4px;
  width:fit-content;
  color:var(--orange);
  font-weight:800;
  font-size:.85rem
}
.site-footer {
  border-top:1px solid var(--line);
  padding-block:28px
}
.footer-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  color:var(--muted)
}
.brand-footer .brand-mark {
  width:34px;
  height:34px;
  border-radius:10px
}

/* Animations */
@keyframes spin {
  to {
  transform:translate(-50%,-50%) rotate(360deg)
}

}
@keyframes bounce {
  from {
  height:28px
}
to {
  height:92px
}

}

/* Responsive tablette */
@media (max-width: 980px) {
  .nav-toggle {
  display:block
}
.nav-panel {
  position:absolute;
  top:78px;
  left:16px;
  right:16px;
  display:grid;
  gap:14px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--white);
  box-shadow:var(--shadow);
  opacity:0;
  pointer-events:none;
  transform:translateY(-10px);
  transition:.18s ease
}
.nav-panel.is-open {
  opacity:1;
  pointer-events:auto;
  transform:translateY(0)
}
.nav-links {
  display:grid;
  gap:4px
}
.nav-links a {
  width:100%
}
.language-selector {
  width:fit-content
}
.nav-panel {
  grid-template-columns:1fr auto
}
.nav-links {
  grid-column:1 / -1
}
.language-selector {
  grid-column:1;
  justify-self:start
}
/* Le bouton de langue est colle au bord du panneau : on ancre le menu sur
   ce bord au lieu de le centrer, sinon il sort de l'ecran (voir RTL plus bas). */
.language-menu {
  left:0;
  right:auto;
  max-width:calc(100vw - 48px);
  transform:translateY(8px)
}
.language-selector.is-open .language-menu {
  transform:translateY(0)
}
.theme-toggle {
  grid-column:2;
  justify-self:end
}
.hero-grid,.story-layout,.detail-hero-grid,.detail-content {
  grid-template-columns:1fr
}
.hero-visual {
  min-height:460px
}
.bento-grid {
  grid-template-columns:1fr 1fr
}
.bento-large {
  grid-row:span 1;
  grid-column:span 2
}
.sponsor-grid,.event-grid {
  grid-template-columns:repeat(2,1fr)
}
.gallery-grid {
  columns:2 200px
}
.values-grid,.press-grid,.members-grid {
  grid-template-columns:1fr 1fr
}

}

/* Responsive mobile */
@media (max-width: 640px) {
  body {
  overflow-x:hidden
}
  .container {
  width:min(100% - 24px,1140px)
}
.navbar {
  min-height:70px
}
.nav-panel {
  top:70px;
  left:12px;
  right:12px
}
.hero {
  min-height:auto
}
.hero-grid {
  padding-block:50px
}
h1 {
  font-size:clamp(2.1rem,9vw,3.2rem)
}
.hero-actions,.footer-inner,.split-heading {
  align-items:stretch;
  flex-direction:column
}
.btn {
  width:100%
}
.hero-visual {
  min-height:390px;
  border-radius:24px
}
.vinyl-disc {
  width:240px
}
.sound-card-main {
  top:18px;
  left:18px
}
.sound-card-main strong {
  font-size:3rem
}
.equalizer {
  left:20px
}
.section,.page-hero {
  padding-block:58px
}
.bento-grid,.sponsor-grid,.event-grid,.values-grid,.press-grid,.members-grid,.stat-row {
  grid-template-columns:1fr
}
.press-clippings-grid,.press-videos-grid {
  grid-template-columns:1fr
}
.gallery-grid {
  columns:1
}
.bento-large {
  grid-column:span 1
}
.event-card,.event-card img {
  min-height:390px
}
.detail-hero {
  padding-block:48px
}
.detail-hero-grid {
  gap:28px
}

}


/* Intégration des fichiers fournis */
.brand-logo{width:44px;height:44px;border-radius:12px;object-fit:cover;box-shadow:0 12px 28px rgba(255,90,31,.24)}
.brand-footer .brand-logo{width:36px;height:36px}
.real-hero{background:var(--real-hero-bg)}
.real-hero h1{font-size:clamp(2.8rem,5.4vw,5.6rem)}
.hero-photo-stack{position:relative;min-height:570px;margin-left:20px}
.hero-photo{position:absolute;object-fit:cover;border-radius:28px;box-shadow:var(--shadow)}
.hero-photo-main{inset:0 58px 72px 0;height:calc(100% - 72px)}
.hero-photo-small{right:0;bottom:0;width:60%;aspect-ratio:4/5;border:8px solid var(--white)}
.hero-badge{position:absolute;left:24px;bottom:24px;max-width:260px;padding:18px;border-radius:20px;background:rgba(17,17,17,.86);color:#fff;backdrop-filter:blur(16px)}
.hero-badge strong{display:block;font-family:var(--font-title);font-size:1.3rem}.hero-badge span{color:rgba(255,255,255,.72);font-weight:800}
.sponsor-logo{padding:18px;background:var(--logo-bg)}.sponsor-logo img{max-width:150px;max-height:74px;object-fit:contain}
.story-content p+p{margin-top:12px}.event-card img{object-position:center}
.press-card img{height:260px;object-fit:cover;border-radius:18px;margin-bottom:18px}.press-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
@media (max-width:980px){.hero-photo-stack{min-height:500px}.hero-photo-main{right:20px}.hero-photo-small{width:52.5%}}
@media (max-width:640px){.brand-text{font-size:1rem}.hero-photo-stack{min-height:430px}.hero-photo-main{inset:0 0 92px 0}.hero-photo-small{width:58%;right:12px}.hero-badge{left:12px;bottom:12px}}


/* Google Traduction : moteur invisible, seul notre bouton reste visible */
#google_translate_element {
  position:absolute;
  top:-9999px;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden
}

/* Masque complètement la bande bleue du haut, le tooltip au survol
   et le halo bleu sous les mots traduits, sur toutes les pages */
.goog-te-banner-frame,
iframe.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
body > .skiptranslate.goog-te-banner-frame,
.goog-te-balloon-frame,
#goog-gt-tt,
.goog-tooltip,
.goog-tooltip:hover,
.goog-te-gadget-icon {
  display:none !important;
  visibility:hidden !important;
  height:0 !important;
  opacity:0 !important
}
.goog-text-highlight {
  background:none !important;
  box-shadow:none !important
}

/* Empêche Google de repousser la page vers le bas quand la bande
   apparaît, pour que le header/menu reste cliquable normalement */
html,
html body,
body {
  top:0 !important;
  margin-top:0 !important;
  position:static !important
}

/* Traduction et mode arabe */
.active-language{background:var(--soft)}
html[dir="rtl"] body{font-family:var(--font-body);text-align:right}
html[dir="rtl"] .navbar,html[dir="rtl"] .hero-actions,html[dir="rtl"] .footer-inner,html[dir="rtl"] .sound-card-note{direction:rtl}
html[dir="rtl"] .language-menu{right:auto;left:0}
html[dir="rtl"] .hero-grid,html[dir="rtl"] .story-layout,html[dir="rtl"] .detail-hero-grid,html[dir="rtl"] .detail-content{direction:rtl}
html[dir="rtl"] .hero-photo-main{inset:0 0 72px 58px}
html[dir="rtl"] .hero-photo-small{right:auto;left:0}
html[dir="rtl"] .hero-badge{left:auto;right:24px}
html[dir="rtl"] .event-card-content{right:20px;left:20px;text-align:right}
html[dir="rtl"] .bento-card:after{right:auto;left:22px}
html[dir="rtl"] .back-link{direction:rtl}
html[dir="rtl"] .press-card a{margin-left:auto}
@media (max-width:640px){html[dir="rtl"] .hero-photo-main{inset:0 0 92px 0}html[dir="rtl"] .hero-photo-small{left:12px;right:auto}html[dir="rtl"] .hero-badge{right:12px;left:auto}}


/* Images complètes sans recadrage forcé */
.hero-photo,.story-image img,.event-card img,.detail-hero img,.press-card img{object-fit:contain;background:var(--img-bg)}
.hero-photo-main{height:auto;max-height:calc(100% - 72px)}
.event-card{background:var(--img-bg)}
.event-card img{padding:10px}
.detail-hero img{background:var(--img-bg);padding:10px}
.press-card img{height:auto;max-height:320px;background:var(--img-bg);border:1px solid var(--line);padding:8px}

/* Correctif définitif : bouton mode sombre toujours à droite du bouton de langue, en version PC uniquement */
@media (min-width: 981px) {
  .nav-panel {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  .language-selector,
  .theme-toggle {
    flex: 0 0 auto !important;
  }
}

/* Menu des langues sur mobile/tablette, en arabe : le bouton passe a droite
   du panneau, le menu s'ancre donc sur son bord droit et s'ouvre vers la gauche.
   Place apres la regle RTL generale pour la surcharger. */
@media (max-width: 980px) {
  html[dir="rtl"] .language-menu {
    left: auto;
    right: 0;
  }
}

/* « Organisme artistique » est plus long que l'ancien « Association » :
   un lien ne passe jamais sur deux lignes, et juste au-dessus du menu mobile
   (981-1100 px) la barre se resserre pour tout garder sur une ligne. */
.nav-links a {
  white-space: nowrap;
}
@media (min-width: 981px) and (max-width: 1100px) {
  .navbar { gap: 14px; }
  .nav-panel { gap: 10px; }
  .nav-links { gap: 2px; }
  .nav-links a { padding: 10px; font-size: .88rem; }
}

/* Nom a cote du logo en haut de page : « Crescendo » en grand, « Art & Culture »
   en petit dessous, pour tenir a cote du menu a toutes les largeurs. La virgule
   reste dans le HTML (lecteurs d'ecran, affichage sans CSS). */
.site-header .brand {
  flex-shrink: 0;
}
.site-header .brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  white-space: nowrap;
  direction: ltr;
  unicode-bidi: isolate;
}
.site-header .brand-comma {
  display: none;
}
.site-header .brand-sub {
  margin-top: 3px;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange);
}
/* ===================================================================
   Typographie (refonte 2026) : Manrope, graisses adoucies, titres
   resserrés. Plus minimaliste et plus reposant que l'ancien couple
   Syne / Inter. L'arabe s'affiche en IBM Plex Sans Arabic.
   =================================================================== */
h1,h2,h3 {
  font-weight: 600;
  letter-spacing: -.025em;
}
.brand { font-weight: 700; }
.site-header .brand-sub { font-weight: 600; }
.eyebrow {
  font-weight: 600;
  letter-spacing: .14em;
}
.btn,
.language-button,
.nav-links a,
.language-menu a { font-weight: 600; }
.card-kicker,
.value-card span,
.press-card span,
.event-card-content span,
.back-link,
.member-card p,
.press-card a,
.clipping-icon { font-weight: 700; }
.stat-row strong,
.sound-card-main strong {
  font-weight: 600;
  letter-spacing: -.03em;
}
.stat-row span,
.event-meta span,
.press-event-tag,
.clipping-source,
.clipping-fallback-link,
.hero-badge span,
.sound-card-main small,
.sound-card-main span,
.sponsor-logo span { font-weight: 600; }
.hero-badge strong { font-weight: 600; letter-spacing: -.01em; }
/* L'espacement des lettres casse les liaisons de l'écriture arabe. */
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] .eyebrow, html[dir="rtl"] .stat-row strong,
html[dir="rtl"] .hero-badge strong, html[dir="rtl"] .sc-stat strong,
html[dir="rtl"] .sc-country, html[dir="rtl"] .sc-date {
  letter-spacing: 0;
}

/* ===================================================================
   Accueil : section « Les Six Cordes »
   =================================================================== */
.sc-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.sc-copy { display: grid; gap: 18px; }
.sc-copy .eyebrow { margin: 0; }
.sc-copy p:not(.eyebrow) { color: var(--muted); }
.sc-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 56px;
}
.sc-stat {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
}
.sc-stat strong {
  display: block;
  color: var(--orange);
  font: 600 2.6rem/1 var(--font-title);
  letter-spacing: -.03em;
}
.sc-stat span {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-weight: 500;
  line-height: 1.45;
}
.sc-block { margin-top: 72px; }
.sc-block h3 { margin-bottom: 22px; }
.sc-jury {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.sc-juror {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
}
.sc-juror strong {
  display: block;
  color: var(--black);
  font-weight: 600;
  font-size: 1.02rem;
}
.sc-country {
  display: inline-block;
  margin: 6px 0 10px;
  color: var(--orange);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.sc-juror p {
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.5;
}
.sc-timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sc-timeline li {
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-top: 2px solid var(--orange);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--white);
}
.sc-date {
  display: block;
  color: var(--orange);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sc-timeline strong {
  display: block;
  margin: 10px 0 4px;
  color: var(--black);
  font-weight: 600;
  font-size: 1.05rem;
}
.sc-place {
  display: block;
  color: var(--ink);
  font-size: .88rem;
  font-weight: 500;
}
.sc-timeline p {
  margin-top: 10px;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.5;
}
.sc-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 72px;
}
.sc-gallery img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--img-bg);
}
.sc-press {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 56px;
}
.sc-press .eyebrow { margin: 0 8px 0 0; }
.sc-chip {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-size: .86rem;
  font-weight: 500;
}
.sc-actions { margin-top: 40px; }
@media (max-width: 980px) {
  .sc-intro { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .sc-stats, .sc-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sc-stats, .sc-timeline { grid-template-columns: minmax(0, 1fr); }
  .sc-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 48px; }
  .sc-block { margin-top: 52px; }
  .sc-stat strong { font-size: 2.2rem; }
}
/* Respiration entre le grand titre et le chapeau du bandeau d'accueil. */
.hero-copy .hero-lead { margin-top: 24px; }
/* Dates en casse normale : « 1er mai » plutôt que « 1ER MAI ». */
.sc-date {
  text-transform: none;
  letter-spacing: .01em;
  font-size: .9rem;
}
@media (max-width: 640px) {
  .sc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sc-stat { padding: 18px; }
}

/* Presse : capture de l'article en vignette sur les cartes de liens,
   cadrée sur le haut pour montrer le logo du média et le titre. */
.clipping-thumb {
  flex: none;
  width: 100%;
  height: 180px;
  object-fit: cover;
  object-position: top center;
  border-bottom: 1px solid var(--line);
  background: var(--img-bg);
  transition: transform .35s ease;
}
.clipping-link { position: relative; }
.clipping-link:hover .clipping-thumb { transform: scale(1.03); }

/* Page détail : remerciements et lettre d'égide (Six Cordes) */
.egide-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 56px;
  align-items: center;
}
.egide-copy { display: grid; gap: 18px; }
.egide-copy .eyebrow { margin: 0; }
.egide-text { display: grid; gap: 14px; }
.egide-text p { color: var(--muted); }
.egide-open {
  justify-self: start;
  color: var(--orange);
  font-weight: 600;
}
.egide-open:hover { text-decoration: underline; }
.egide-letter { margin: 0; }
.egide-letter a {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow);
  transition: transform .25s ease;
}
.egide-letter a:hover { transform: translateY(-4px); }
.egide-letter img { width: 100%; height: auto; }
.egide-letter figcaption {
  margin-top: 12px;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.5;
}
@media (max-width: 980px) {
  .egide-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .egide-letter { max-width: 460px; }
}


/* Crédit photo sous les images (voir decoratePhotoCredits dans main.js) */
.photo-fig { margin: 0; }
.photo-credit {
  margin: 6px 2px 0;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.3;
}
.gallery-grid .photo-fig {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 10px;
}
.gallery-grid .photo-fig img { margin-bottom: 0; }
.gallery-featured .photo-credit,
.story-image .photo-credit {
  margin: 0;
  padding: 8px 12px 10px;
  background: var(--white);
}
.member-card .photo-credit { text-align: center; }
.hero-credit {
  position: absolute;
  right: 0;
  bottom: -26px;
  margin: 0;
}
html[dir="rtl"] .hero-credit { right: auto; left: 0; }
html[dir="rtl"] .photo-credit { letter-spacing: 0; }

/* Protection des images : pas de glisser-déposer, pas de sélection,
   pas de menu « Enregistrer l'image » à l'appui long sur iPhone. */
img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}