/* Pages secondaires d'Artiste Performance (documents, formation vidéo, espace abonnés).
   Mêmes couleurs et polices que la page d'accueil (styles en ligne dans index.html). */
:root {
  --scene: #000;
  --ivoire: #eeeae2;
  --encre: #1c1a17;
  --nuit: #1b2a3d;
  --laiton: #b39a62;
  --brume: #8c857a;
  --titre: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --texte: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --large: 1240px;
  --lecture: 46rem;
  --gouttiere: clamp(20px, 5vw, 64px);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--ivoire); color: var(--encre); font-family: var(--texte); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a:focus-visible, .bouton:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--laiton); outline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--titre); font-weight: 400; line-height: 1.12; letter-spacing: -.01em; margin: 1.8em 0 .6em; }
p { margin: 0 0 1em; }
.cadre { max-width: var(--large); margin: 0 auto; padding: 0 var(--gouttiere); }
.sombre { background: var(--scene); color: var(--ivoire); }
.nuit { background: var(--nuit); color: var(--ivoire); }

/* En-tête */
.entete { background: var(--scene); color: var(--ivoire); }
.entete .cadre { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 22px; padding-bottom: 22px; }
.entete .marque { font-family: var(--titre); font-size: 1.35rem; text-decoration: none; }
.entete nav { display: flex; gap: 22px; font-size: .92rem; }
.entete nav a { text-decoration: none; color: #cfc8bb; }
.entete nav a:hover { color: var(--laiton); }

/* Boutons */
.bouton { display: inline-block; padding: .85em 1.6em; border: 1px solid currentColor; border-radius: 999px; background: none; color: inherit; font: inherit; font-weight: 500; font-size: .95rem; text-decoration: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.bouton.plein { background: var(--scene); color: var(--ivoire); border-color: var(--scene); }
.sombre .bouton.plein, .nuit .bouton.plein { background: var(--ivoire); color: var(--scene); border-color: var(--ivoire); }
.bouton:hover { background: var(--laiton); border-color: var(--laiton); color: var(--scene); }

/* Pages de texte (documents légaux) */
.document { padding: clamp(48px, 8vw, 110px) 0; }
.document .cadre > * { max-width: var(--lecture); }
.document h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin-top: 0; }
.document h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.document h3 { font-size: 1.25rem; }
.document .maj { color: var(--brume); font-size: .9rem; }

/* Pied de page */
.pied { background: var(--scene); color: #bdb6a8; font-size: .88rem; }
.pied .cadre { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px 28px; padding-top: 28px; padding-bottom: 28px; }
.pied nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pied a { text-decoration: none; }
.pied a:hover { color: var(--laiton); }

@media (max-width: 640px) {
  body { font-size: 16px; }
  .entete .cadre { flex-direction: column; align-items: flex-start; gap: 8px; }
}