/* =========================================================================
   ISADORA, cahiers de la danse
   Systeme de design "la barre et le studio". Prefixe de classes : brr-
   Registre : blanc pur, angles francs, didone a fort contraste,
   sans etroite pour la lecture, une seule couleur d accent (prune profonde).
   Aucune requete externe : piles de polices systeme uniquement.
   ========================================================================= */

/* --- 1. Remise a zero ------------------------------------------------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: none; cursor: pointer; }

/* --- 2. Variables ----------------------------------------------------- */
:root {
  /* Palette : blanc pur + encre violacee + une prune profonde */
  --blanc:        #ffffff;
  --encre:        #17131a;
  --encre-tendre: #4a444f;
  --gris:         #6e6874;
  --gris-clair:   #98929f;
  --filet:        #e3dfe6;
  --filet-fort:   #c9c3ce;
  --prune:        #4a0e2e;
  --prune-vive:   #6b1642;
  --prune-pale:   #f4ecf0;

  /* Polices : deux familles, aucune police web */
  --didone:  Didot, "Didot LT Pro", "Bodoni 72", "Bodoni MT", "Hoefler Text", "Times New Roman", Times, serif;
  --etroite: "Arial Narrow", "Liberation Sans Narrow", "Nimbus Sans Narrow", "PT Sans Narrow", "Avenir Next Condensed", Tahoma, sans-serif;

  /* Angles francs : rayon nul partout */
  --angle:    0px;
  --angle-sm: 0px;

  /* Echelle d ombres a trois niveaux, volontairement discrete */
  --ombre-1: 0 1px 2px rgba(23, 19, 26, 0.05);
  --ombre-2: 0 10px 28px rgba(23, 19, 26, 0.07);
  --ombre-3: 0 30px 70px rgba(23, 19, 26, 0.11);

  /* Mouvement */
  --glisse:      0.32s cubic-bezier(0.2, 0.6, 0.2, 1);
  --glisse-lent: 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);

  /* Mesures */
  --largeur:   1200px;
  --marge-lat: 22px;
  --respire:   80px;
}

@media (min-width: 900px) {
  :root { --marge-lat: 40px; --respire: 120px; }
}

/* --- 3. Socle typographique ------------------------------------------- */
body {
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--etroite);
  font-size: 17.5px;
  line-height: 1.78;
  letter-spacing: 0.014em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--didone);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--encre);
}
h1 { font-size: clamp(36px, 5vw, 60px); }
h2 { font-size: clamp(28px, 3.6vw, 44px); }
h3 { font-size: clamp(21px, 2.2vw, 28px); }
h4 { font-size: clamp(18px, 1.6vw, 21px); }

p { line-height: 1.78; }

::selection { background: var(--prune); color: var(--blanc); }

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

/* --- 4. Ossature ------------------------------------------------------ */
.brr-parquet {
  width: 100%;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 var(--marge-lat);
}

.brr-scene { padding: var(--respire) 0; }
.brr-scene--serree { padding: calc(var(--respire) * 0.62) 0; }
.brr-scene--filet { border-top: 1px solid var(--filet); }

.brr-invisible {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.brr-saut {
  position: absolute; top: -200px; left: 16px; z-index: 999;
  background: var(--prune); color: var(--blanc);
  padding: 12px 20px; font-size: 13px; letter-spacing: 0.1em;
  text-transform: uppercase; transition: top var(--glisse);
}
.brr-saut:focus { top: 0; }

/* Etiquette de section : petite capitale espacee + filet decoratif */
.brr-mesure {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--etroite);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--prune);
  margin-bottom: 18px;
}
.brr-mesure::before {
  content: ""; width: 40px; height: 1px;
  background: var(--prune); flex: none;
}

.brr-titre-scene { max-width: 22ch; }
.brr-sous-scene {
  margin-top: 16px; max-width: 62ch;
  font-size: 17px; color: var(--gris);
}

.brr-tete-scene {
  display: grid; gap: 18px;
  align-items: end;
  padding-bottom: 34px;
  margin-bottom: 44px;
  border-bottom: 1px solid var(--filet);
}
@media (min-width: 900px) {
  .brr-tete-scene { grid-template-columns: 1.35fr 1fr; gap: 48px; }
  .brr-tete-scene .brr-sous-scene { margin-top: 0; padding-bottom: 6px; }
}

/* Lien de lecture */
.brr-lire {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--prune);
  border-bottom: 1px solid var(--filet-fort);
  padding-bottom: 3px;
  transition: border-color var(--glisse), gap var(--glisse);
}
.brr-lire::after { content: "\2192"; font-size: 14px; letter-spacing: 0; }
.brr-lire:hover { border-color: var(--prune); gap: 14px; }

.brr-lien {
  color: var(--prune);
  border-bottom: 1px solid var(--filet-fort);
  transition: border-color var(--glisse), color var(--glisse);
}
.brr-lien:hover { border-color: var(--prune); color: var(--prune-vive); }

/* --- 5. Barre d en-tete ----------------------------------------------- */
.brr-barre {
  position: sticky; top: 0; z-index: 60;
  background: var(--blanc);
  border-bottom: 1px solid var(--filet);
}
.brr-barre__prise {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 70px; padding-top: 11px; padding-bottom: 11px;
  flex-wrap: wrap;
}

.brr-enseigne { display: block; }
.brr-enseigne__nom {
  font-family: var(--didone);
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.brr-enseigne__ligne {
  display: block; margin-top: 8px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--gris);
}

.brr-coulisses { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.brr-coulisses__pas {
  position: relative;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--encre-tendre);
  padding: 6px 0;
  transition: color var(--glisse);
}
.brr-coulisses__pas::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--prune);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--glisse);
}
.brr-coulisses__pas:hover { color: var(--prune); }
.brr-coulisses__pas:hover::after { transform: scaleX(1); }
.brr-coulisses__pas.est-en-scene { color: var(--prune); }
.brr-coulisses__pas.est-en-scene::after { transform: scaleX(1); }

@media (max-width: 899px) {
  .brr-barre { position: static; }
  .brr-barre__prise { min-height: 0; }
  .brr-coulisses { gap: 2px 16px; padding-bottom: 6px; }
  .brr-coulisses__pas { font-size: 11px; letter-spacing: 0.12em; }
}

/* --- 6. La glace (heros pleine largeur) ------------------------------- */
.brr-glace {
  position: relative;
  min-height: clamp(250px, 28vh, 280px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: #17131a;
}
.brr-glace__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 32%;
}
.brr-glace__voile {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(12, 9, 14, 0.52) 0%, rgba(12, 9, 14, 0.20) 34%, rgba(12, 9, 14, 0.76) 100%),
    linear-gradient(90deg, rgba(74, 14, 46, 0.34) 0%, rgba(74, 14, 46, 0.00) 62%);
}
.brr-glace__texte {
  position: relative; z-index: 2;
  width: 100%;
  padding-top: 20px; padding-bottom: 18px;
  color: var(--blanc);
}
.brr-glace__sur {
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 8px;
}
.brr-glace__sur::before {
  content: ""; width: 40px; height: 1px;
  background: rgba(255, 255, 255, 0.7); flex: none;
}
.brr-glace__titre {
  color: var(--blanc);
  font-size: clamp(32px, 3.4vw, 44px);
  max-width: 26ch;
}
.brr-glace__titre em { font-style: italic; }
.brr-glace__chapo {
  margin-top: 12px; max-width: 100ch;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
}

/* Les trois appuis : chiffres du site */
.brr-appuis {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}
.brr-appui {
  padding: 12px 18px 0 0;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  min-width: 0;
}
.brr-appui:last-child { border-right: none; }
.brr-appui__nombre {
  font-family: var(--didone);
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1; color: var(--blanc);
  letter-spacing: -0.01em;
}
.brr-appui__quoi {
  display: block; margin-top: 6px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.35;
}
/* En large, les trois chiffres tiennent sur une seule ligne : bande fine. */
@media (min-width: 900px) {
  .brr-appui { display: flex; align-items: baseline; gap: 10px; }
  .brr-appui__nombre { flex: none; }
  .brr-appui__quoi { margin-top: 0; min-width: 0; }
}
@media (max-width: 640px) {
  .brr-appui__quoi { letter-spacing: 0.1em; font-size: 10px; }
  .brr-appui { padding-right: 10px; }
}

/* --- 7. Les positions (grille des rubriques) -------------------------- */
.brr-positions {
  display: grid; gap: 34px 26px;
  grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .brr-positions { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .brr-positions { grid-template-columns: repeat(4, 1fr); gap: 40px 26px; } }

/* Remontee du premier ecran : la grille des rubriques doit etre visible
   sans derouler, juste sous la bande du heros. */
.brr-glace + .brr-scene { padding-top: 34px; }
.brr-glace + .brr-scene .brr-mesure { margin-bottom: 12px; }
.brr-glace + .brr-scene .brr-tete-scene {
  padding-bottom: 20px; margin-bottom: 24px;
}
@media (min-width: 1000px) {
  .brr-glace + .brr-scene .brr-tete-scene { grid-template-columns: 1.6fr 1fr; gap: 44px; }
  .brr-glace + .brr-scene .brr-titre-scene { max-width: 30ch; }
  .brr-glace + .brr-scene .brr-position__cadre { aspect-ratio: 16 / 9; margin-bottom: 14px; }
}

.brr-position { display: block; }
.brr-position__cadre {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--prune-pale);
  margin-bottom: 18px;
}
.brr-position__photo {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--glisse-lent), filter var(--glisse);
}
.brr-position:hover .brr-position__photo { transform: scale(1.035); }
.brr-position__rang {
  position: absolute; top: 0; left: 0; z-index: 2;
  background: var(--blanc);
  font-family: var(--didone);
  font-size: 15px; line-height: 1;
  padding: 10px 13px 9px;
  color: var(--prune);
}
.brr-position__nom {
  font-family: var(--didone);
  font-size: 24px; line-height: 1.15;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--filet);
  transition: color var(--glisse), border-color var(--glisse);
}
.brr-position:hover .brr-position__nom { color: var(--prune); border-color: var(--prune); }
.brr-position__note {
  margin-top: 12px;
  font-size: 15px; line-height: 1.62; color: var(--gris);
}

/* --- 8. Le cahier (flux date) ----------------------------------------- */
.brr-cahier {
  display: grid; gap: 0 56px;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--filet);
}
@media (min-width: 900px) { .brr-cahier { grid-template-columns: repeat(2, 1fr); } }

.brr-variation {
  display: grid; grid-template-columns: 92px 1fr;
  gap: 20px;
  padding: 26px 0;
  border-bottom: 1px solid var(--filet);
  align-items: start;
}
@media (min-width: 620px) { .brr-variation { grid-template-columns: 116px 1fr; gap: 26px; } }

.brr-variation__vignette {
  aspect-ratio: 3 / 4; overflow: hidden;
  background: var(--prune-pale);
}
.brr-variation__photo {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--glisse-lent);
}
.brr-variation:hover .brr-variation__photo { transform: scale(1.04); }

.brr-variation__ligne {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 10px; flex-wrap: wrap;
}
.brr-variation__rubrique {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--blanc); background: var(--prune);
  padding: 4px 9px 3px;
}
.brr-variation__date {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--gris-clair);
}
.brr-variation__titre {
  font-family: var(--didone);
  font-size: clamp(20px, 2vw, 25px);
  line-height: 1.16;
  transition: color var(--glisse);
}
.brr-variation:hover .brr-variation__titre { color: var(--prune); }
.brr-variation__chapo {
  margin-top: 10px;
  font-size: 15px; line-height: 1.6; color: var(--gris);
}

/* --- 9. Fil d Ariane et tete de page ---------------------------------- */
.brr-fil {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding-top: 34px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gris-clair);
}
.brr-fil__pas { transition: color var(--glisse); }
.brr-fil__pas:hover { color: var(--prune); }
.brr-fil__sep { color: var(--filet-fort); }

.brr-tete { padding: 40px 0 var(--respire); }
.brr-tete__titre { max-width: 20ch; }
.brr-tete__ligne {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-bottom: 24px;
}
.brr-tete__chapo {
  margin-top: 26px; max-width: 60ch;
  font-size: clamp(17px, 1.7vw, 20px);
  color: var(--encre-tendre);
}
.brr-tete__signature {
  margin-top: 30px; padding-top: 18px;
  border-top: 1px solid var(--filet);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gris-clair);
  display: flex; flex-wrap: wrap; gap: 18px;
}

/* --- 10. La planche (image d article) --------------------------------- */
.brr-planche { margin: 0 0 var(--respire); }
.brr-planche__cadre {
  aspect-ratio: 4 / 5; overflow: hidden; background: var(--prune-pale);
  max-width: 760px;
}
@media (min-width: 900px) { .brr-planche__cadre { aspect-ratio: 16 / 10; max-width: none; } }
.brr-planche__photo { width: 100%; height: 100%; object-fit: cover; }
.brr-planche__legende {
  margin-top: 12px; padding-left: 14px;
  border-left: 2px solid var(--prune);
  font-size: 13px; line-height: 1.6; color: var(--gris);
  max-width: 70ch;
}

/* --- 11. La partition (corps d article) ------------------------------- */
.brr-partition {
  display: grid; grid-template-columns: 1fr; gap: 56px;
  padding-bottom: var(--respire);
}
@media (min-width: 1000px) {
  .brr-partition { grid-template-columns: minmax(0, 1fr) 300px; gap: 72px; }
}

.brr-texte { max-width: 68ch; }
.brr-texte p { margin-bottom: 20px; font-size: 17.5px; line-height: 1.8; }
.brr-texte h2 {
  font-size: clamp(24px, 2.6vw, 32px);
  margin: 48px 0 16px;
}
.brr-texte h3 { margin: 34px 0 12px; }
.brr-texte ul { margin: 0 0 24px; }
.brr-texte li {
  position: relative; padding: 9px 0 9px 26px;
  border-bottom: 1px solid var(--filet);
  font-size: 16px; color: var(--encre-tendre);
}
.brr-texte li::before {
  content: ""; position: absolute; left: 0; top: 19px;
  width: 12px; height: 1px; background: var(--prune);
}
.brr-texte strong { font-weight: 700; color: var(--encre); }

.brr-attaque::first-letter {
  float: left;
  font-family: var(--didone);
  font-size: 76px; line-height: 0.78;
  padding: 6px 12px 0 0;
  color: var(--prune);
}
.brr-attaque { font-size: 19px; }

.brr-releve {
  margin: 40px 0;
  padding: 4px 0 4px 26px;
  border-left: 2px solid var(--prune);
  font-family: var(--didone);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.26;
  color: var(--encre);
}
.brr-releve cite {
  display: block; margin-top: 14px;
  font-family: var(--etroite); font-style: normal;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gris-clair);
}

.brr-encadre {
  margin: 40px 0;
  padding: 26px 28px;
  background: var(--prune-pale);
  box-shadow: var(--ombre-1);
}
.brr-encadre__titre {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--prune); margin-bottom: 12px;
}
.brr-encadre p { font-size: 16px; margin-bottom: 0; color: var(--encre-tendre); }

/* Colonne laterale de l article */
.brr-appoint { align-self: start; }
@media (min-width: 1000px) { .brr-appoint { position: sticky; top: 120px; } }
.brr-appoint__bloc { margin-bottom: 40px; padding-top: 16px; border-top: 2px solid var(--encre); }
.brr-appoint__titre {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  margin-bottom: 16px;
}
.brr-renvoi { display: block; padding: 14px 0; border-bottom: 1px solid var(--filet); }
.brr-renvoi__date {
  display: block; font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; color: var(--gris-clair); margin-bottom: 6px;
}
.brr-renvoi__titre {
  font-family: var(--didone); font-size: 19px; line-height: 1.2;
  transition: color var(--glisse);
}
.brr-renvoi:hover .brr-renvoi__titre { color: var(--prune); }

/* --- 12. Liste d une rubrique ----------------------------------------- */
.brr-repertoire { border-top: 1px solid var(--filet); }
.brr-entree {
  display: grid; grid-template-columns: 1fr; gap: 20px;
  padding: 30px 0; border-bottom: 1px solid var(--filet);
}
@media (min-width: 700px) {
  .brr-entree { grid-template-columns: 190px 1fr; gap: 34px; align-items: start; }
}
.brr-entree__cadre { aspect-ratio: 3 / 4; overflow: hidden; background: var(--prune-pale); max-width: 260px; }
.brr-entree__photo {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--glisse-lent);
}
.brr-entree:hover .brr-entree__photo { transform: scale(1.035); }
.brr-entree__date {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; color: var(--gris-clair);
  display: block; margin-bottom: 10px;
}
.brr-entree__titre {
  font-family: var(--didone);
  font-size: clamp(23px, 2.4vw, 30px); line-height: 1.14;
  transition: color var(--glisse);
}
.brr-entree:hover .brr-entree__titre { color: var(--prune); }
.brr-entree__chapo { margin-top: 12px; max-width: 66ch; color: var(--gris); font-size: 16px; }
.brr-entree__pied { margin-top: 16px; }

/* --- 13. Le portant (pied de page) ------------------------------------ */
.brr-portant {
  border-top: 2px solid var(--encre);
  padding: 64px 0 34px;
}
.brr-portant__grille {
  display: grid; grid-template-columns: 1fr; gap: 40px;
  padding-bottom: 48px;
}
@media (min-width: 640px)  { .brr-portant__grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .brr-portant__grille { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; } }

.brr-portant__mot { max-width: 40ch; margin-top: 18px; color: var(--gris); font-size: 15px; }
.brr-portant__titre {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--encre); margin-bottom: 18px;
  padding-bottom: 10px; border-bottom: 1px solid var(--filet);
}
.brr-portant__liens li { margin-bottom: 10px; }
.brr-portant__liens a {
  font-size: 15px; color: var(--gris);
  transition: color var(--glisse);
}
.brr-portant__liens a:hover { color: var(--prune); }
.brr-portant__pied {
  border-top: 1px solid var(--filet);
  padding-top: 22px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px;
  font-size: 12px; letter-spacing: 0.08em; color: var(--gris-clair);
}

/* --- 14. Preferences d accessibilite ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@media (pointer: coarse) {
  .brr-coulisses__pas { min-height: 40px; display: flex; align-items: center; }
}

/* --- 15. Impression --------------------------------------------------- */
@media print {
  .brr-barre, .brr-portant, .brr-appoint { display: none; }
  body { font-size: 12pt; }
}