/*
 * Site de D2CLO : d'après la maquette validée par Jacques le 05/11/2026 (maquette/index.html).
 * Aucune police ni image n'est chargée depuis un autre site.
 */

/* ---------- Polices (copies hébergées avec le site) ---------- */

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url('../medias/polices/oswald-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url('../medias/polices/oswald-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../medias/polices/roboto-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../medias/polices/roboto-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Couleurs et réglages ---------- */

:root {
  --nuit: #0d111c;
  --nuit-2: #151a28;
  --texte: #e9ecf2;
  --doux: #a4acba;
  --rouge: #e0344f;
  --rouge-fonce: #c92a43;
  --magenta: #c2306e;
  --trait: rgba(255, 255, 255, 0.1);
  /* Couleurs du reggae (nom du haut de page, barre de séparation) */
  --reggae-vert: #1fa34a;
  --reggae-jaune: #f7c600;
  --reggae-rouge: #e03a3e;
  --entete: 64px;
  --ressort: cubic-bezier(0.2, 0.8, 0.2, 1);
  color-scheme: dark;
}

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

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

body {
  background: var(--nuit);
  color: var(--texte);
  font: 400 1.0625rem/1.65 Roboto, system-ui, sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }

/* Règle de Jacques : 1140 px de contenu sur toutes les pages (les marges de 24 px s'ajoutent autour). */
.conteneur { width: 100%; max-width: calc(1140px + 48px); margin: 0 auto; padding: 0 24px; }

h1, h2, h3 { font-family: Oswald, 'Arial Narrow', sans-serif; font-weight: 500; line-height: 1.05; letter-spacing: -0.01em; }

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

.lien-evitement {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: #fff; color: #111; padding: 10px 16px; border-radius: 8px;
}
.lien-evitement:focus { top: 12px; }

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

.icone { width: 1em; height: 1em; fill: currentColor; flex: none; }

/* ---------- Boutons ---------- */

.bouton {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: 99px;
  font: 500 1rem/1 Roboto, sans-serif; white-space: nowrap;
  transition: background-color 0.2s, border-color 0.2s, transform 0.1s ease-out;
}
.bouton .icone { width: 14px; height: 14px; }
.bouton:active { transform: scale(0.97); }
.bouton--plein { background: var(--rouge); color: #fff; }
.bouton--plein:hover { background: var(--rouge-fonce); }
.bouton--verre {
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.bouton--verre:hover { background: rgba(255, 255, 255, 0.2); }

/* ---------- En-tête translucide ---------- */

.entete { position: fixed; inset: 0 0 auto; z-index: 50; border-bottom: 1px solid var(--trait); }
/* Le verre est sur un calque à part : un backdrop-filter sur .entete enfermerait le voile du menu mobile (position fixed) dans l'en-tête. */
.entete::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(13, 17, 28, 0.55);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
}
.entete__interieur { display: flex; align-items: center; gap: 24px; height: var(--entete); }
.entete__logo img { width: 40px; height: 40px; border-radius: 6px; }
.entete__nav { margin-left: auto; }
.menu { display: flex; gap: 26px; list-style: none; padding: 0; font: 500 0.95rem/1 Roboto, sans-serif; }
.menu a { display: block; padding: 14px 0; opacity: 0.85; transition: opacity 0.2s, color 0.2s; }
.menu a:hover { opacity: 1; color: var(--rouge); }
.entete__reseaux { display: flex; gap: 4px; }
.reseau {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  transition: background-color 0.2s, transform 0.1s ease-out;
}
.reseau .icone { width: 18px; height: 18px; }
.reseau:hover { background: rgba(255, 255, 255, 0.1); }
.reseau:active { transform: scale(0.94); }
.entete__burger {
  display: none; width: 44px; height: 44px; place-items: center;
  background: none; border: 0; cursor: pointer; font-size: 1.3rem;
}
.entete__burger .icone--fermer { display: none; }

/* Sélecteur de langue : drapeau + code */
.selecteur-langue { position: relative; }
.selecteur-langue summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--trait);
  font: 600 0.8rem/1 Roboto, sans-serif; transition: background-color 0.2s;
}
.selecteur-langue summary::-webkit-details-marker { display: none; }
.selecteur-langue summary:hover { background: rgba(255, 255, 255, 0.08); }
.selecteur-langue ul {
  position: absolute; right: 0; top: calc(100% + 8px); list-style: none; padding: 6px; min-width: 120px;
  background: rgba(21, 26, 40, 0.92); border: 1px solid var(--trait); border-radius: 14px;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}
.selecteur-langue ul a {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 10px;
  font: 600 0.85rem/1 Roboto, sans-serif;
}
.selecteur-langue ul a:hover, .selecteur-langue ul a[aria-current] { background: rgba(255, 255, 255, 0.08); }
.drapeau { width: 20px; height: 14px; border-radius: 2px; }

/* ---------- Haut de page ---------- */

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: grid; align-items: center;
  padding: calc(var(--entete) + 32px) 0 72px;
}
/* Même photo, très floutée : la lumière de scène remplit tout l'écran. */
.hero__ambiance {
  position: absolute; inset: -80px; z-index: -3;
  background: url('../medias/images/concert.webp') center / cover;
  filter: blur(70px) saturate(140%);
}
/* Photo nette sur toute la hauteur, bords fondus dans l'ambiance. */
.hero__photo {
  position: absolute; z-index: -2; top: 0; bottom: 0; left: 70%;
  height: 100%; aspect-ratio: 3 / 4; transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 28%, #000 72%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 28%, #000 72%, transparent 100%);
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(13, 17, 28, 0.78) 0%, rgba(13, 17, 28, 0.45) 38%, transparent 62%),
    linear-gradient(180deg, rgba(13, 17, 28, 0.35) 0%, transparent 18%, transparent 72%, var(--nuit) 100%);
}
.hero__contenu > * { max-width: 560px; }

.sortie-mini {
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 26px;
  padding: 6px 18px 6px 6px; border-radius: 99px;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font: 500 0.9rem/1.25 Roboto, sans-serif;
  transition: background-color 0.2s, transform 0.1s ease-out;
}
.sortie-mini:hover { background: rgba(255, 255, 255, 0.18); }
.sortie-mini:active { transform: scale(0.97); }
.sortie-mini img { width: 40px; height: 40px; border-radius: 50%; }
.sortie-mini small { display: block; color: var(--doux); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }

.hero__titre {
  font-size: clamp(4.5rem, 11vw, 9.5rem); font-weight: 600; letter-spacing: -0.025em; line-height: 0.95;
  text-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
}
.hero__role { font: 500 clamp(1rem, 2vw, 1.25rem)/1.3 Roboto, sans-serif; letter-spacing: 0.04em; margin: 10px 0 4px; }
.hero__styles { color: #c9cfda; }
/* Barre de séparation aux couleurs du reggae : vert, jaune, rouge fondus l'un dans l'autre, puis la transparence. */
.corde {
  height: 3px; width: min(340px, 70%); margin: 26px 0; border-radius: 2px;
  background: linear-gradient(90deg, var(--reggae-vert) 0%, var(--reggae-jaune) 35%, var(--reggae-rouge) 68%, transparent 100%);
  transform-origin: left;
}

/*
 * Les couleurs du reggae traversent le nom, une fois au chargement (comme sur le site de Tony).
 * Le dégradé blanc → vert, jaune, rouge → blanc est découpé dans les lettres et glisse de gauche à droite.
 * Au repos, seule la partie blanche est visible. L'ombre passe par « filter » : une ombre de texte
 * se dessinerait par-dessus le dégradé et griserait les lettres.
 */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .hero__titre { text-shadow: none; }
  .hero__nom {
    display: inline-block;
    background: linear-gradient(100deg, #fff 0 38%, var(--reggae-vert) 44%, var(--reggae-jaune) 50%, var(--reggae-rouge) 56%, #fff 62% 100%) 0 0 / 300% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 8px 30px rgba(0, 0, 0, 0.35));
    animation: couleurs-reggae 1.6s cubic-bezier(0.45, 0, 0.2, 1) 0.9s both;
  }
}
@keyframes couleurs-reggae { from { background-position: 100% 0; } to { background-position: 0 0; } }
.corde:hover { animation: vibre 0.5s ease-out; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__descendre {
  position: absolute; left: 50%; bottom: 22px; width: 26px; height: 42px; margin-left: -13px;
  border: 2px solid rgba(255, 255, 255, 0.35); border-radius: 99px;
}
.hero__descendre::after {
  content: ''; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px;
  border-radius: 2px; background: #fff;
}

/* Animations du chargement : une seule fois. La lumière s'allume, la photo apparaît, le texte se pose. */
.hero__ambiance { animation: allume 1.8s var(--ressort) both; }
.hero__photo { animation: fondu 1.6s 0.1s var(--ressort) both; }
.hero__photo img { animation: recule 2.6s var(--ressort) both; }
.sortie-mini { animation: pose 1.1s var(--ressort) both; }
.hero__titre { animation: pose 1.1s 0.1s var(--ressort) both; }
.hero__role { animation: pose 1.1s 0.25s var(--ressort) both; }
.hero__styles { animation: pose 1.1s 0.35s var(--ressort) both; }
.corde { animation: etire 1s 0.5s var(--ressort) both; }
.hero__actions { animation: pose 1.1s 0.6s var(--ressort) both; }
.hero__descendre::after { animation: goutte 1.8s 2s ease-in-out 3; }

@keyframes allume { from { opacity: 0.25; transform: scale(1.15); } }
@keyframes fondu { from { opacity: 0.2; } }
@keyframes recule { from { transform: scale(1.12); } }
@keyframes pose { from { opacity: 0.2; transform: translateY(18px); filter: blur(6px); } }
@keyframes etire { from { transform: scaleX(0); } }
@keyframes vibre { 25% { transform: translateY(-2px); } 50% { transform: translateY(2px); } 75% { transform: translateY(-1px); } }
@keyframes goutte { 50% { transform: translateY(12px); opacity: 0; } }

/* ---------- Plateformes ---------- */

.plateformes { border-block: 1px solid var(--trait); padding: 22px 0; }
.plateformes__interieur { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: center; }
.plateformes p { color: var(--doux); font-size: 0.9rem; }
.plateformes ul { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; list-style: none; padding: 0; }
.pastille {
  min-height: 44px; padding: 0 18px; display: flex; align-items: center; border-radius: 99px;
  background: var(--nuit-2); border: 1px solid var(--trait); font: 500 0.92rem/1 Roboto, sans-serif;
  transition: border-color 0.2s, transform 0.1s ease-out;
}
.pastille:hover { border-color: var(--rouge); }
.pastille:active { transform: scale(0.97); }

/* ---------- Sections ---------- */

.section { padding: 110px 0; }

/*
 * Halos : lumières de scène aux couleurs du reggae (vert, jaune, rouge) derrière le contenu.
 * overflow: clip (et non hidden) pour ne pas casser la photo collante de la biographie.
 */
/* Rogné sur les côtés seulement : en hauteur, la lumière se fond dans la section voisine, sans coupure nette. */
[data-halo] { position: relative; isolation: isolate; overflow-x: clip; overflow-y: visible; }
[data-halo]::before, [data-halo]::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%;
}
/* Couleurs du reggae, en alternance d'une section à l'autre. Le jaune, plus lumineux, est un peu plus discret. */
#sorties::before, #biographie::after {
  background: radial-gradient(circle, rgba(31, 163, 74, 0.24) 0%, rgba(31, 163, 74, 0.08) 40%, transparent 68%);
}
#sorties::after, #videos::before {
  background: radial-gradient(circle, rgba(247, 198, 0, 0.17) 0%, rgba(247, 198, 0, 0.05) 40%, transparent 68%);
}
#biographie::before, #contact::before {
  background: radial-gradient(circle, rgba(224, 58, 62, 0.24) 0%, rgba(224, 58, 62, 0.08) 40%, transparent 68%);
}
#sorties::before { width: 760px; height: 760px; top: -260px; left: -280px; }
#sorties::after { width: 680px; height: 680px; bottom: -300px; right: -220px; }
#biographie::before { width: 820px; height: 820px; top: 0; left: -340px; }
#biographie::after { width: 640px; height: 640px; bottom: -200px; right: -200px; }
#videos::before { width: 1100px; height: 620px; top: 20%; left: 50%; margin-left: -550px; border-radius: 50%; }
#contact::before { width: 900px; height: 520px; top: -60px; left: 50%; margin-left: -450px; }

/* Les halos s'allument quand la section arrive à l'écran (seulement avec JavaScript, jamais éteints). */
.js [data-halo]::before, .js [data-halo]::after { opacity: 0.35; transform: scale(0.85); transition: opacity 1.4s var(--ressort), transform 1.8s var(--ressort); }
.js [data-halo].est-visible::before, .js [data-halo].est-visible::after { opacity: 1; transform: none; }
.js #sorties.est-visible::after, .js #biographie.est-visible::after { transition-delay: 0.3s; }
.section--contact { padding-top: 0; }
.surtitre {
  font: 600 0.8rem/1 Roboto, sans-serif; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--rouge); margin-bottom: 14px;
}
.titre-section { font-size: clamp(2rem, 4vw, 2.75rem); margin-bottom: 0.5em; }

/* Sorties */
.sorties { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin-top: 40px; }
.sortie {
  display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: center;
  padding: 20px; border-radius: 20px; background: var(--nuit-2); border: 1px solid var(--trait);
}
.sortie__pochette {
  display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 1;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); transition: transform 0.45s var(--ressort);
}
.sortie__pochette img { width: 100%; height: 100%; object-fit: cover; }
.sortie:hover .sortie__pochette { transform: translateY(-8px); }
.badge {
  display: inline-block; margin-bottom: 10px; padding: 6px 10px; border-radius: 99px;
  background: var(--rouge); color: #fff; font: 700 0.7rem/1 Roboto, sans-serif; letter-spacing: 0.1em; text-transform: uppercase;
}
.sortie__type { color: var(--doux); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; }
.sortie__titre { font-size: 2rem; margin: 6px 0 12px; }
.sortie__dispo { color: var(--doux); font-size: 0.95rem; margin-bottom: 18px; }

/* Biographie */
.bio { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.bio__photo {
  position: sticky; top: calc(var(--entete) + 32px);
  border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--nuit-2);
}
.bio__photo img { width: 100%; height: 100%; object-fit: cover; }
.bio__photo figcaption {
  position: absolute; left: 16px; bottom: 16px; padding: 6px 12px; border-radius: 99px;
  font-size: 0.8rem; color: #fff; background: rgba(13, 17, 28, 0.6);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.bio__chapo { font-size: 1.3rem; line-height: 1.5; margin-bottom: 28px; }
.bio__chapo strong { color: #fff; }
.frise { list-style: none; padding: 0; margin: 36px 0; position: relative; }
.frise::before {
  content: ''; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(var(--rouge), var(--magenta) 70%, transparent);
}
.frise li { position: relative; padding: 0 0 26px 36px; }
.frise li::before {
  content: ''; position: absolute; left: 0; top: 8px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--nuit); border: 2px solid var(--rouge);
}
.frise b { display: block; margin-bottom: 6px; font: 600 1.15rem/1 Oswald, sans-serif; letter-spacing: 0.02em; color: var(--rouge); }
.frise p { color: var(--doux); }
.frise em { font-style: normal; font-weight: 500; color: var(--texte); }
.bio__fin { font-style: italic; }

/* Vidéos */
.videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.video {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; cursor: pointer;
  border-radius: 16px; overflow: hidden; background: var(--nuit-2); text-align: left;
}
.video img, .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.video__lecture {
  position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform 0.2s var(--ressort), background-color 0.2s;
}
.video__lecture .icone { width: 20px; height: 20px; margin-left: 3px; }
.video:hover .video__lecture { transform: scale(1.08); background: var(--rouge); }
.video__titre {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 16px 12px; font-size: 0.9rem;
  background: linear-gradient(transparent, rgba(13, 17, 28, 0.85));
}

/* Contact */
.contact {
  display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap;
  padding: 56px; border-radius: 24px; border: 1px solid var(--trait);
  background: linear-gradient(135deg, rgba(224, 52, 79, 0.14), rgba(194, 48, 110, 0.08));
}
.contact .titre-section { margin-bottom: 0.3em; }
.contact__texte { color: var(--doux); max-width: 46ch; }

/* Pied de page */
.pied { border-top: 1px solid var(--trait); padding: 28px 0; color: var(--doux); font-size: 0.9rem; }
.pied__interieur { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.pied a { text-decoration: underline; text-underline-offset: 3px; }
.pied a:hover { color: #fff; }

/* Pages simples (mentions, confidentialité, 404) */
.page-simple { padding: calc(var(--entete) + 64px) 0 96px; min-height: 70vh; }
.page-simple h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); margin-bottom: 32px; }
.page-simple h2 { font-size: 1.5rem; margin: 36px 0 12px; }
.page-simple p { color: #c9cfda; margin-bottom: 12px; }
.page-simple a { text-decoration: underline; text-underline-offset: 3px; }
.page-simple .bouton { text-decoration: none; margin-top: 16px; }

/* ---------- Apparitions au défilement (seulement avec JavaScript, jamais invisibles au départ) ---------- */

.js [data-apparition] {
  opacity: 0.4; transform: translateY(30px);
  transition: opacity 0.9s var(--ressort), transform 0.9s var(--ressort);
}
.js [data-apparition].est-visible { opacity: 1; transform: none; }
.js .frise li[data-apparition]::before { transform: scale(0.4); transition: transform 0.6s 0.2s var(--ressort); }
.js .frise li[data-apparition].est-visible::before { transform: none; }

/* ---------- Tablette et mobile ---------- */

@media (max-width: 860px) {
  .entete__interieur { gap: 8px; }
  .entete__reseaux { margin-left: auto; }
  .entete__burger { display: grid; }
  .entete__nav {
    position: absolute; left: 0; right: 0; top: 100%; margin: 0;
    background: rgba(13, 17, 28, 0.96); border-bottom: 1px solid var(--trait);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity 0.3s, transform 0.45s var(--ressort), visibility 0s 0.45s;
  }
  .menu { flex-direction: column; gap: 0; padding: 8px 24px 16px; font-size: 1.1rem; }
  .menu a { padding: 14px 0; border-bottom: 1px solid var(--trait); }
  .entete--ouvert .entete__nav { transform: none; opacity: 1; visibility: visible; transition: opacity 0.3s, transform 0.45s var(--ressort); }
  .entete--ouvert .icone--ouvrir { display: none; }
  .entete--ouvert .icone--fermer { display: block; }
  /* Voile sombre derrière le menu ouvert : le toucher ferme le menu. */
  .entete::after {
    content: ''; position: fixed; inset: var(--entete) 0 0; z-index: -2; background: rgba(0, 0, 0, 0.5);
    opacity: 0; pointer-events: none; transition: opacity 0.3s;
  }
  .entete--ouvert::after { opacity: 1; pointer-events: auto; }

  /* L'écran est en portrait comme la photo : elle remplit le fond, texte centré par-dessus. */
  .hero { padding: calc(var(--entete) + 24px) 0 80px; text-align: center; }
  .hero__ambiance { inset: 0; filter: none; background-position: 45% 35%; }
  .hero__photo { display: none; }
  .hero::before {
    background: linear-gradient(180deg, rgba(13, 17, 28, 0.25) 0%, rgba(13, 17, 28, 0.55) 55%, rgba(13, 17, 28, 0.92) 100%);
  }
  .hero__contenu > * { margin-left: auto; margin-right: auto; }
  .corde { transform-origin: center; }
  .hero__actions { justify-content: center; }

  .section { padding: 80px 0; }
  #sorties::before, #biographie::before { width: 520px; height: 520px; left: -260px; }
  #sorties::after, #biographie::after { width: 480px; height: 480px; right: -240px; }
  #videos::before, #contact::before { width: 600px; margin-left: -300px; }
  .sorties, .bio, .videos { grid-template-columns: 1fr; }
  .bio { gap: 40px; }
  .bio__photo { position: relative; top: 0; aspect-ratio: 1; }
  .contact { padding: 32px; }
}

/* Smartphone : dans les sorties, la pochette en haut sur toute la largeur, le texte en dessous. */
@media (max-width: 600px) {
  .sortie { grid-template-columns: 1fr; gap: 20px; padding: 16px 16px 24px; }
  .sortie__infos { padding: 0 4px; }
}

@media (max-width: 480px) {
  .entete__reseaux .reseau { width: 40px; }
  .sortie__titre { font-size: 1.75rem; }
  .bouton { padding: 0 18px; }
}

/* ---------- Mouvement réduit : tout est affiché, sans animation ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-apparition] { opacity: 1; transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .entete::before { background: var(--nuit); -webkit-backdrop-filter: none; backdrop-filter: none; }
}