/* ==========================================================================
   Danselia, feuille de style unique
   Vocabulaire de classes emprunte au plateau: rideau, plateau, regie,
   conduite, feuille, cartouche, loge, salut, billetterie, entracte, coulisse.
   ========================================================================== */

:root {
  --papier: #F8F5F0;
  --papier-encarte: #F1E9DE;
  --surface: #FFFFFF;
  --encre: #1E1A24;
  --encre-douce: #5A5266;
  --velours: #5C307E;
  --velours-dense: #46215F;
  --creme: #FDF7F1;
  --cinabre: #C43C1B;
  --cinabre-clair: #E05430;
  --filet: #DED4C6;

  --serif: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --sans: "Work Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "Roboto Mono", "Courier New", monospace;

  --gouttiere: 32px;
  --largeur: 1180px;
  --lisible: 720px;
  --courbe: cubic-bezier(0.22, 0.72, 0.24, 1);
}

/* --------------------------------------------------------------------------
   Bases
   -------------------------------------------------------------------------- */

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

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  background-color: var(--papier);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0 0 0.5em;
  text-transform: none;
}

h1 { font-size: 3.4rem; font-weight: 600; }
h2 { font-size: 2.3rem; font-weight: 600; }
h3 { font-size: 1.35rem; font-weight: 500; line-height: 1.25; }
h4 { font-size: 1.1rem; font-weight: 500; }

p { margin: 0 0 1.1em; max-width: 68ch; }

a { color: var(--velours); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--cinabre); }

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

ul, ol { margin: 0 0 1.2em; padding-left: 1.1em; }
li { margin-bottom: 0.45em; }

strong { font-weight: 600; }

:focus-visible {
  outline: 3px solid var(--cinabre);
  outline-offset: 3px;
}

.evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--velours);
  color: var(--creme);
  padding: 12px 20px;
  z-index: 200;
  font-family: var(--mono);
  font-size: 0.8125rem;
}
.evitement:focus { left: 12px; top: 12px; }

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

/* --------------------------------------------------------------------------
   Motif signature: filets gaufres
   -------------------------------------------------------------------------- */

.gaufre {
  display: block;
  width: 72px;
  height: 3px;
  border: 0;
  margin: 0 0 20px;
  background-image: linear-gradient(
    to bottom,
    var(--filet) 0, var(--filet) 1px,
    rgba(255, 255, 255, 0.6) 1px, rgba(255, 255, 255, 0.6) 2px,
    transparent 2px, transparent 3px
  );
}

.gaufre-large { width: 100%; }

.gaufre-coin {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 12px;
  height: 4px;
  background-image: linear-gradient(
    to bottom,
    var(--filet) 0, var(--filet) 1px,
    rgba(255, 255, 255, 0.75) 1px, rgba(255, 255, 255, 0.75) 2px,
    var(--filet) 2px, var(--filet) 3px,
    rgba(255, 255, 255, 0.75) 3px, rgba(255, 255, 255, 0.75) 4px
  );
}

/* Le cartouche a fente: bande cinabre interrompue sur le bord gauche */
.fente {
  position: relative;
}
.fente::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background-image: linear-gradient(
    to bottom,
    var(--cinabre) 0, var(--cinabre) calc(50% - 3px),
    transparent calc(50% - 3px), transparent calc(50% + 3px),
    var(--cinabre) calc(50% + 3px), var(--cinabre) 100%
  );
  transition: width 150ms var(--courbe);
}

/* --------------------------------------------------------------------------
   Rideau en filigrane
   -------------------------------------------------------------------------- */

.rideau-fond {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.rideau-fond path { fill: var(--velours); opacity: 0.03; }

/* --------------------------------------------------------------------------
   Enveloppes de section
   -------------------------------------------------------------------------- */

.enveloppe {
  width: min(100% - 48px, var(--largeur));
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

.acte {
  position: relative;
  padding: 104px 0;
  overflow: hidden;
}

.acte-encarte { background: var(--papier-encarte); }
.acte-serre { padding: 76px 0; }

.surtitre {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cinabre);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
}
.surtitre::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--cinabre);
  flex: 0 0 auto;
}

.chapeau {
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--encre-douce);
  max-width: 60ch;
  line-height: 1.55;
}

.tete-acte { max-width: 760px; margin-bottom: 56px; }

/* --------------------------------------------------------------------------
   En tete fixe
   -------------------------------------------------------------------------- */

.rideau-tete {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 72px;
  z-index: 100;
  background: var(--papier);
  transition: background-color 250ms var(--courbe), box-shadow 250ms var(--courbe);
  border-bottom: 2px solid transparent;
}

.rideau-tete .enveloppe {
  height: 72px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.rideau-tete.est-defile {
  background: var(--velours);
  box-shadow: 0 10px 30px rgba(30, 26, 36, 0.14);
  border-bottom-color: var(--cinabre);
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--encre);
  text-decoration: none;
  flex: 0 0 auto;
}
.marque:hover { color: var(--encre); }
.rideau-tete.est-defile .marque { color: var(--creme); }

.marque-carre { width: 26px; height: 26px; flex: 0 0 auto; display: block; }
.marque-pan {
  fill: var(--velours);
  transform-origin: 32px 8px;
  transition: transform 600ms var(--courbe);
}
.rideau-tete.est-defile .marque-pan { fill: var(--creme); }
.marque-fil { stroke: var(--cinabre); }
.marque-fond { fill: var(--papier); }
.rideau-tete.est-defile .marque-fond { fill: var(--velours); }
.marque.est-levee .marque-pan-gauche { transform: rotate(-3deg); }
.marque.est-levee .marque-pan-droit { transform: rotate(3deg); }

.tete-nav {
  margin-inline: auto;
  display: flex;
  gap: 26px;
  align-items: center;
}

.tete-lien {
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--encre);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.tete-lien:hover { color: var(--cinabre); border-bottom-color: var(--cinabre); }
.rideau-tete.est-defile .tete-lien { color: var(--creme); }
.rideau-tete.est-defile .tete-lien:hover { color: var(--creme); border-bottom-color: var(--cinabre); }

.tete-action { flex: 0 0 auto; }

.burger {
  display: none;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--filet);
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.burger span {
  display: block;
  width: 20px; height: 2px;
  background: var(--encre);
}
.rideau-tete.est-defile .burger span { background: var(--creme); }
.rideau-tete.est-defile .burger { border-color: rgba(253, 247, 241, 0.35); }

.panneau-coulisse {
  position: fixed;
  inset: 0;
  background: var(--velours);
  z-index: 150;
  padding: 96px 32px 48px;
  display: none;
  overflow-y: auto;
}
.panneau-coulisse[data-ouvert="oui"] { display: block; }
.panneau-coulisse a {
  display: block;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--creme);
  text-decoration: none;
  padding: 18px 0;
  border-bottom: 3px solid transparent;
  background-image: linear-gradient(
    to bottom,
    rgba(253, 247, 241, 0.32) 0, rgba(253, 247, 241, 0.32) 1px,
    rgba(92, 48, 126, 0.9) 1px, rgba(92, 48, 126, 0.9) 2px,
    transparent 2px
  );
  background-position: bottom left;
  background-repeat: repeat-x;
  background-size: 100% 2px;
}
.panneau-coulisse a:hover { color: var(--cinabre-clair); }
.fermer-coulisse {
  position: absolute;
  top: 20px; right: 24px;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid rgba(253, 247, 241, 0.4);
  color: var(--creme);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  font-family: var(--sans);
}

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

.bouton, .bouton-second {
  position: relative;
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
  padding: 14px 28px 14px 32px;
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  transition: background-color 150ms var(--courbe), transform 150ms var(--courbe), color 150ms var(--courbe);
}

.bouton {
  background: var(--velours);
  color: var(--creme);
}
.bouton:hover {
  background: var(--velours-dense);
  color: var(--creme);
  transform: perspective(600px) rotateX(2deg);
}
.bouton:hover::before { width: 6px; }
.bouton:active { transform: translateY(1px); }

.bouton-second {
  background: transparent;
  color: var(--velours);
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
  border-right: 1px solid var(--filet);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.7);
}
.bouton-second:hover {
  background: var(--papier-encarte);
  color: var(--velours-dense);
  border-color: var(--cinabre);
}
.bouton-second:hover::before { width: 6px; }
.bouton-second:active { transform: translateY(1px); }

.bouton-creme {
  background: var(--creme);
  color: var(--velours);
}
.bouton-creme:hover { background: #FFFFFF; color: var(--velours-dense); }

/* --------------------------------------------------------------------------
   Grille signature: cartes empilees en eventail decale
   -------------------------------------------------------------------------- */

.eventail {
  display: grid;
  gap: var(--gouttiere);
  perspective: 1200px;
}

.feuille {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--filet);
  padding: 30px 30px 30px 34px;
  transition: transform 300ms var(--courbe), box-shadow 300ms var(--courbe);
  box-shadow: 0 4px 14px rgba(30, 26, 36, 0.05);
}

.eventail > .feuille:nth-child(1) {
  transform: none;
}
.eventail > .feuille:nth-child(2) {
  transform: translate(24px, 16px) rotate(-1.5deg);
  box-shadow: 0 10px 26px rgba(30, 26, 36, 0.09);
}
.eventail > .feuille:nth-child(3) {
  transform: translate(48px, 32px) rotate(1deg);
  box-shadow: 0 16px 38px rgba(30, 26, 36, 0.13);
}
.eventail > .feuille:hover {
  transform: translateZ(6px) rotate(0deg);
  box-shadow: 0 20px 44px rgba(30, 26, 36, 0.16);
  z-index: 3;
}

.feuille h3 { margin-bottom: 8px; }
.feuille p:last-child { margin-bottom: 0; }

.feuille-etiquette {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-douce);
  display: block;
  margin-bottom: 10px;
}

/* --------------------------------------------------------------------------
   Hero, le plateau
   -------------------------------------------------------------------------- */

.plateau {
  padding: 148px 0 96px;
  position: relative;
  overflow: hidden;
}

.plateau-grille {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 56px;
  align-items: start;
}

.plateau h1 { margin-bottom: 20px; }

.plateau-sous {
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--encre-douce);
  max-width: 34ch;
  line-height: 1.55;
  margin-bottom: 32px;
}

.plateau-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 34px;
}

.plateau-reassurance {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.75), inset 0 -2px 0 rgba(255, 255, 255, 0.75);
  padding: 18px 0 18px 18px;
  max-width: 52ch;
}
.plateau-reassurance .chiffre-fort {
  font-family: var(--mono);
  font-size: 1.75rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--velours);
  line-height: 1.1;
  flex: 0 0 auto;
}
.plateau-reassurance p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--encre-douce);
}

.plateau-eventail { padding-right: 52px; }

.plateau-photo { margin-top: 76px; }

/* Cadre de photographie, marie louise de programme */
.cadre-photo {
  position: relative;
  background: var(--surface);
  padding: 8px;
  border: 1px solid var(--filet);
  box-shadow: 0 12px 34px rgba(30, 26, 36, 0.10);
}
.cadre-photo img { width: 100%; filter: grayscale(1) sepia(0.16) contrast(1.04); }
.cadre-photo::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background-image: linear-gradient(
    to bottom,
    var(--cinabre) 0, var(--cinabre) calc(50% - 4px),
    transparent calc(50% - 4px), transparent calc(50% + 4px),
    var(--cinabre) calc(50% + 4px), var(--cinabre) 100%
  );
}
.cadre-arche img {
  border-radius: 220px 220px 6px 6px;
}
.legende-photo {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--encre-douce);
  margin: 12px 0 0;
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   Probleme: trois pics
   -------------------------------------------------------------------------- */

.pics-grille {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--gouttiere);
  perspective: 1200px;
  margin-bottom: 64px;
}

.pic {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--filet);
  padding: 28px 26px 26px 32px;
  box-shadow: 0 6px 18px rgba(30, 26, 36, 0.06);
  transition: transform 300ms var(--courbe), box-shadow 300ms var(--courbe);
}
.pic:nth-child(2) { transform: translate(0, 22px) rotate(-1deg); }
.pic:nth-child(3) { transform: translate(0, 44px) rotate(0.8deg); }
.pic:hover { transform: translateZ(6px) rotate(0deg); box-shadow: 0 18px 40px rgba(30, 26, 36, 0.14); }

.pic-mois {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cinabre);
  display: block;
  margin-bottom: 12px;
}
.pic-note {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--velours);
  border-top: 1px solid var(--filet);
  padding-top: 12px;
  margin: 16px 0 0;
}

.addition {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
  margin-top: 82px;
}
.addition ul { list-style: none; padding: 0; }
.addition li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 14px;
}
.addition li::before {
  content: "";
  position: absolute;
  left: 0; top: 6px;
  width: 4px; height: 20px;
  background-image: linear-gradient(
    to bottom,
    var(--cinabre) 0, var(--cinabre) 7px,
    transparent 7px, transparent 13px,
    var(--cinabre) 13px, var(--cinabre) 20px
  );
}

/* --------------------------------------------------------------------------
   Solution: chronologie verticale, fil cinabre
   -------------------------------------------------------------------------- */

.conduite {
  position: relative;
  perspective: 1200px;
  padding: 8px 0;
}
.conduite::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 3px;
  margin-left: -1.5px;
  background: var(--cinabre);
}

.temps {
  position: relative;
  width: calc(50% - 46px);
  background: var(--surface);
  border: 1px solid var(--filet);
  padding: 28px 28px 26px 34px;
  margin-bottom: 40px;
  box-shadow: 0 8px 22px rgba(30, 26, 36, 0.07);
  transition: transform 300ms var(--courbe), box-shadow 300ms var(--courbe);
}
.temps:nth-child(odd) { margin-right: auto; transform: rotate(-0.8deg); }
.temps:nth-child(even) { margin-left: auto; transform: rotate(0.7deg); }
.temps:hover { transform: rotate(0deg) translateZ(6px); box-shadow: 0 18px 40px rgba(30, 26, 36, 0.14); }

.temps-numero {
  position: absolute;
  top: 26px;
  width: 44px; height: 44px;
  background: var(--velours);
  color: var(--creme);
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.temps:nth-child(odd) .temps-numero { right: -68px; }
.temps:nth-child(even) .temps-numero { left: -68px; }

.temps-quand {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cinabre);
  display: block;
  margin-bottom: 10px;
}
.temps p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Fonctionnalites: la regie
   -------------------------------------------------------------------------- */

.regie {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 38px var(--gouttiere);
  perspective: 1200px;
}

.pupitre {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--filet);
  padding: 30px 30px 28px 34px;
  box-shadow: 0 6px 18px rgba(30, 26, 36, 0.06);
  transition: transform 300ms var(--courbe), box-shadow 300ms var(--courbe);
}
.regie > .pupitre:nth-child(even) { transform: translate(18px, 22px) rotate(-1.2deg); }
.regie > .pupitre:nth-child(odd) { transform: rotate(0.5deg); }
.pupitre:hover { transform: rotate(0deg) translateZ(6px); box-shadow: 0 18px 40px rgba(30, 26, 36, 0.14); z-index: 2; }

.pupitre-index {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--encre-douce);
  display: block;
  margin-bottom: 10px;
}
.pupitre h3 { margin-bottom: 10px; }
.pupitre p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Avantages: quatre cartouches serres
   -------------------------------------------------------------------------- */

.loges {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  perspective: 1200px;
}

.loge {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--filet);
  padding: 26px 22px 24px 28px;
  transition: transform 300ms var(--courbe), box-shadow 300ms var(--courbe);
  box-shadow: 0 5px 16px rgba(30, 26, 36, 0.06);
}
.loge:hover { transform: translateZ(6px) translateY(-4px); box-shadow: 0 18px 38px rgba(30, 26, 36, 0.14); }
.loge-mesure {
  font-family: var(--mono);
  font-size: 1.55rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--velours);
  display: block;
  margin-bottom: 8px;
  line-height: 1.15;
}
.loge h3 { font-size: 1.1rem; margin-bottom: 8px; }
.loge p { font-size: 0.9375rem; color: var(--encre-douce); margin: 0; }

/* --------------------------------------------------------------------------
   Preuve: le salut
   -------------------------------------------------------------------------- */

.salut {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  perspective: 1200px;
  margin-bottom: 84px;
}

.temoin {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--filet);
  padding: 30px 28px 26px 34px;
  margin: 0;
  box-shadow: 0 6px 20px rgba(30, 26, 36, 0.06);
  transition: transform 300ms var(--courbe), box-shadow 300ms var(--courbe);
}
.salut > .temoin:nth-child(1) { transform: none; }
.salut > .temoin:nth-child(2) { transform: translate(0, 20px) rotate(-1.4deg); box-shadow: 0 12px 30px rgba(30, 26, 36, 0.10); }
.salut > .temoin:nth-child(3) { transform: translate(0, 40px) rotate(1deg); box-shadow: 0 18px 40px rgba(30, 26, 36, 0.13); }
.temoin:hover { transform: rotate(0deg) translateZ(6px); box-shadow: 0 22px 46px rgba(30, 26, 36, 0.16); z-index: 2; }

.temoin blockquote {
  margin: 0 0 18px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--encre);
}
.temoin blockquote p { margin: 0 0 0.7em; max-width: none; }
.temoin blockquote p:last-child { margin-bottom: 0; }

.temoin figcaption {
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--encre-douce);
  border-top: 1px solid var(--filet);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.8);
  padding-top: 14px;
}
.temoin figcaption strong {
  display: block;
  color: var(--encre);
  font-weight: 600;
  font-size: 0.9375rem;
}
.temoin figcaption .lieu {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--cinabre);
  display: block;
  margin-top: 5px;
}

.chiffrier {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--filet);
  background: var(--surface);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.85), inset 0 -2px 0 rgba(255, 255, 255, 0.85);
}
.chiffre {
  padding: 30px 24px;
  border-right: 1px solid var(--filet);
  text-align: left;
}
.chiffre:last-child { border-right: 0; }
.chiffre-valeur {
  display: block;
  font-family: var(--mono);
  font-size: 2.75rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--velours);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.chiffre-legende {
  display: block;
  font-size: 0.875rem;
  color: var(--encre-douce);
  margin-top: 10px;
}

.caution {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

/* --------------------------------------------------------------------------
   Tarifs: la billetterie
   -------------------------------------------------------------------------- */

.billetterie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gouttiere);
  align-items: start;
}

.place {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--filet);
  padding: 34px 28px 32px 34px;
  box-shadow: 0 8px 22px rgba(30, 26, 36, 0.07);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.place-vedette {
  margin-top: -20px;
  border-color: var(--velours);
  box-shadow: 0 20px 44px rgba(92, 48, 126, 0.18);
}
.place-vedette::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(92, 48, 126, 0.25);
  pointer-events: none;
}

.place-drapeau {
  position: absolute;
  top: -14px;
  right: 20px;
  background: var(--velours);
  color: var(--creme);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 12px;
}

.place h3 { font-size: 1.6rem; margin-bottom: 6px; }

.place-cible {
  font-size: 0.9375rem;
  color: var(--encre-douce);
  min-height: 3.4em;
  margin-bottom: 18px;
}

.place-prix {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}
.place-prix .montant {
  font-size: 2.75rem;
  font-weight: 500;
  color: var(--encre);
  letter-spacing: -0.03em;
}
.place-prix .devise { font-size: 1.25rem; color: var(--encre); }
.place-unite {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--encre-douce);
  margin-bottom: 22px;
  display: block;
}

.place-inclus {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  flex: 1 1 auto;
}
.place-inclus li {
  position: relative;
  padding: 12px 0 12px 22px;
  font-size: 0.9375rem;
  border-top: 1px solid var(--filet);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.85);
  margin: 0;
}
.place-inclus li:first-child { border-top: 0; box-shadow: none; }
.place-inclus li::before {
  content: "";
  position: absolute;
  left: 0; top: 18px;
  width: 3px; height: 16px;
  background-image: linear-gradient(
    to bottom,
    var(--cinabre) 0, var(--cinabre) 5px,
    transparent 5px, transparent 11px,
    var(--cinabre) 11px, var(--cinabre) 16px
  );
}

.place .bouton, .place .bouton-second { text-align: center; }

.note-tarifs {
  margin-top: 40px;
  font-size: 0.9375rem;
  color: var(--encre-douce);
  border-top: 1px solid var(--filet);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.85);
  padding-top: 20px;
  max-width: 76ch;
}

/* --------------------------------------------------------------------------
   FAQ: l entracte
   -------------------------------------------------------------------------- */

.entracte { max-width: var(--lisible); margin-inline: auto; }

.question {
  border-top: 1px solid var(--filet);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.9);
  background: transparent;
}
.question:last-of-type { border-bottom: 1px solid var(--filet); }

.question summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 44px 22px 20px;
  position: relative;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 1.0625rem;
  color: var(--encre);
}
.question summary::-webkit-details-marker { display: none; }
.question summary::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 12px; height: 12px;
  margin-top: -9px;
  border-right: 2px solid var(--cinabre);
  border-bottom: 2px solid var(--cinabre);
  transform: rotate(45deg);
  transition: transform 200ms var(--courbe);
}
.question[open] summary::after { transform: rotate(-135deg); margin-top: -4px; }
.question summary:hover { color: var(--velours); }

.question-corps { padding: 0 44px 24px 20px; }
.question-corps p { font-size: 1rem; color: var(--encre-douce); }
.question-corps p:last-child { margin-bottom: 0; }
.question-corps .reference {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--velours);
}

/* --------------------------------------------------------------------------
   Contact: la coulisse
   -------------------------------------------------------------------------- */

.coulisse-grille {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 56px;
  align-items: start;
}

.formulaire {
  background: var(--surface);
  border: 1px solid var(--filet);
  padding: 34px 32px 32px 36px;
  position: relative;
  box-shadow: 0 14px 36px rgba(30, 26, 36, 0.09);
}

.champ { margin-bottom: 18px; }
.champ label {
  display: block;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin-bottom: 7px;
}
.champ input[type="text"],
.champ input[type="email"],
.champ select,
.champ textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--encre);
  background: var(--papier);
  border: 1px solid var(--filet);
  border-radius: 0;
  padding: 12px 14px;
}
.champ textarea { resize: vertical; min-height: 120px; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: 3px solid var(--cinabre);
  outline-offset: 2px;
  background: var(--surface);
}

.champ-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.champ-accord {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9375rem;
  color: var(--encre-douce);
  margin: 22px 0 24px;
  line-height: 1.5;
}
.champ-accord input { margin-top: 4px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--velours); }

.apres-formulaire {
  font-size: 0.875rem;
  color: var(--encre-douce);
  margin-top: 18px;
}

.coulisse-arguments ul { list-style: none; padding: 0; }
.coulisse-arguments li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 16px;
  color: var(--encre-douce);
}
.coulisse-arguments li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 4px; height: 18px;
  background-image: linear-gradient(
    to bottom,
    var(--cinabre) 0, var(--cinabre) 6px,
    transparent 6px, transparent 12px,
    var(--cinabre) 12px, var(--cinabre) 18px
  );
}

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */

.pied {
  position: relative;
  background: var(--velours);
  color: var(--creme);
  padding: 72px 0 0;
  overflow: hidden;
}
.pied .rideau-fond path { fill: var(--creme); opacity: 0.05; }

.pied-grille {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: 40px;
  padding-bottom: 48px;
}

.pied h2, .pied h3 { color: var(--creme); }
.pied h3 {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(253, 247, 241, 0.72);
  margin-bottom: 16px;
}
.pied p { color: rgba(253, 247, 241, 0.82); font-size: 0.9375rem; }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: 10px; }
.pied a { color: var(--creme); text-decoration: none; font-size: 0.9375rem; }
.pied a:hover { color: var(--cinabre-clair); text-decoration: underline; }

.pied .marque { color: var(--creme); margin-bottom: 14px; }
.pied .marque-pan { fill: var(--creme); }
.pied .marque-fond { fill: var(--velours); }

.pied-social { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; }
.pied-social a {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid rgba(253, 247, 241, 0.3);
  padding: 7px 12px;
}
.pied-social a:hover { border-color: var(--cinabre-clair); text-decoration: none; }

.pied-bas {
  border-top: 1px solid rgba(253, 247, 241, 0.22);
  box-shadow: inset 0 2px 0 rgba(92, 48, 126, 0.8);
  padding: 22px 0 28px;
  font-size: 0.8125rem;
  color: rgba(253, 247, 241, 0.75);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
}
.pied-bas a { font-size: 0.8125rem; text-decoration: underline; }
.pied-editeur { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.04em; }

/* --------------------------------------------------------------------------
   Pages internes
   -------------------------------------------------------------------------- */

.page-interne { padding: 132px 0 88px; }
.page-interne .enveloppe { max-width: 860px; }
.page-interne h1 { font-size: 2.8rem; margin-bottom: 18px; }
.page-interne h2 {
  font-size: 1.7rem;
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid var(--filet);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.85);
}
.page-interne h3 { margin-top: 30px; font-size: 1.2rem; }
.page-interne p, .page-interne li { max-width: 72ch; }

.fil-ariane {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin-bottom: 18px;
}
.fil-ariane a { color: var(--velours); text-decoration: none; }
.fil-ariane a:hover { text-decoration: underline; }

.encadre {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--filet);
  padding: 24px 26px 22px 30px;
  margin: 28px 0;
  box-shadow: 0 6px 18px rgba(30, 26, 36, 0.06);
}
.encadre p:last-child { margin-bottom: 0; }
.encadre dl { margin: 0; }
.encadre dt {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin-top: 14px;
}
.encadre dt:first-child { margin-top: 0; }
.encadre dd { margin: 2px 0 0; }

.portrait-auteur {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 36px;
  align-items: start;
  margin-bottom: 40px;
}
.portrait-auteur .cadre-photo img { filter: grayscale(1) sepia(0.14) contrast(1.04); }

.liste-profils { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.liste-profils li { margin: 0; }
.liste-profils a {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--filet);
  padding: 9px 14px;
  color: var(--velours);
  text-decoration: none;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.8);
}
.liste-profils a:hover { border-color: var(--cinabre); color: var(--cinabre); }

.plan-liste { list-style: none; padding: 0; }
.plan-liste > li {
  position: relative;
  padding: 18px 0 18px 24px;
  border-top: 1px solid var(--filet);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.85);
  margin: 0;
}
.plan-liste > li::before {
  content: "";
  position: absolute;
  left: 0; top: 24px;
  width: 4px; height: 20px;
  background-image: linear-gradient(
    to bottom,
    var(--cinabre) 0, var(--cinabre) 7px,
    transparent 7px, transparent 13px,
    var(--cinabre) 13px, var(--cinabre) 20px
  );
}
.plan-liste a { font-weight: 500; text-decoration: none; }
.plan-liste a:hover { text-decoration: underline; }
.plan-liste span { display: block; color: var(--encre-douce); font-size: 0.9375rem; }

.page-etroite {
  min-height: 62vh;
  display: flex;
  align-items: center;
  padding: 140px 0 96px;
}
.page-etroite .enveloppe { max-width: 660px; }
.page-etroite .grand-numero {
  font-family: var(--mono);
  font-size: 4.5rem;
  font-weight: 500;
  color: var(--cinabre);
  line-height: 1;
  display: block;
  margin-bottom: 16px;
}

/* --------------------------------------------------------------------------
   Signature d animation: inclinaison en perspective a l apparition
   -------------------------------------------------------------------------- */

.entre-en-scene {
  opacity: 0;
  transform: perspective(1200px) rotateX(8deg) rotateY(-6deg) translateY(24px);
  transition: opacity 350ms var(--courbe), transform 350ms var(--courbe);
  will-change: transform, opacity;
}
.entre-en-scene.est-en-scene {
  opacity: 1;
  transform: none;
}
.conduite .temps.entre-en-scene { transform: perspective(1200px) rotateY(10deg) translateY(24px); }
.conduite .temps:nth-child(even).entre-en-scene { transform: perspective(1200px) rotateY(-10deg) translateY(24px); }
.conduite .temps.est-en-scene:nth-child(odd) { transform: rotate(-0.8deg); }
.conduite .temps.est-en-scene:nth-child(even) { transform: rotate(0.7deg); }

.eventail > .feuille.est-en-scene:nth-child(2) { transform: translate(24px, 16px) rotate(-1.5deg); }
.eventail > .feuille.est-en-scene:nth-child(3) { transform: translate(48px, 32px) rotate(1deg); }
.pics-grille > .pic.est-en-scene:nth-child(2) { transform: translate(0, 22px) rotate(-1deg); }
.pics-grille > .pic.est-en-scene:nth-child(3) { transform: translate(0, 44px) rotate(0.8deg); }
.regie > .pupitre.est-en-scene:nth-child(even) { transform: translate(18px, 22px) rotate(-1.2deg); }
.regie > .pupitre.est-en-scene:nth-child(odd) { transform: rotate(0.5deg); }
.salut > .temoin.est-en-scene:nth-child(2) { transform: translate(0, 20px) rotate(-1.4deg); }
.salut > .temoin.est-en-scene:nth-child(3) { transform: translate(0, 40px) rotate(1deg); }

/* --------------------------------------------------------------------------
   Adaptations
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  h1 { font-size: 2.9rem; }
  .plateau-grille { grid-template-columns: 1fr; gap: 64px; }
  .plateau-eventail { padding-right: 56px; max-width: 620px; }
  .plateau-sous { max-width: 48ch; }
  .loges { grid-template-columns: 1fr 1fr; }
  .chiffrier { grid-template-columns: 1fr 1fr; }
  .chiffre { border-bottom: 1px solid var(--filet); }
  .chiffre:nth-child(2n) { border-right: 0; }
  .caution, .addition { grid-template-columns: 1fr; gap: 36px; }
  .coulisse-grille { grid-template-columns: 1fr; gap: 44px; }
  .portrait-auteur { grid-template-columns: 200px 1fr; }
}

@media (max-width: 900px) {
  .eventail > .feuille,
  .eventail > .feuille:nth-child(2),
  .eventail > .feuille:nth-child(3),
  .pics-grille > .pic:nth-child(2),
  .pics-grille > .pic:nth-child(3),
  .regie > .pupitre:nth-child(even),
  .regie > .pupitre:nth-child(odd),
  .salut > .temoin:nth-child(2),
  .salut > .temoin:nth-child(3),
  .temps:nth-child(odd), .temps:nth-child(even) {
    transform: none;
  }
  .eventail > .feuille.est-en-scene:nth-child(2),
  .eventail > .feuille.est-en-scene:nth-child(3),
  .pics-grille > .pic.est-en-scene:nth-child(2),
  .pics-grille > .pic.est-en-scene:nth-child(3),
  .regie > .pupitre.est-en-scene:nth-child(even),
  .regie > .pupitre.est-en-scene:nth-child(odd),
  .salut > .temoin.est-en-scene:nth-child(2),
  .salut > .temoin.est-en-scene:nth-child(3),
  .conduite .temps.est-en-scene:nth-child(odd),
  .conduite .temps.est-en-scene:nth-child(even) {
    transform: none;
  }
  .plateau-eventail { padding-right: 0; }
  .pics-grille, .regie, .salut, .billetterie { grid-template-columns: 1fr; }
  .salut { gap: 24px; }
  .place-vedette { margin-top: 0; }
  .conduite::before { left: 22px; }
  .temps { width: 100%; padding-left: 68px; margin-left: 0 !important; margin-right: 0 !important; }
  .temps:nth-child(odd) .temps-numero,
  .temps:nth-child(even) .temps-numero { left: 6px; right: auto; top: 24px; }
}

@media (max-width: 840px) {
  .tete-nav, .tete-action { display: none; }
  .burger { display: flex; margin-left: auto; }
}

@media (max-width: 640px) {
  h1 { font-size: 2.4rem; }
  h2 { font-size: 1.85rem; }
  .acte { padding: 72px 0; }
  .plateau { padding: 120px 0 72px; }
  .enveloppe { width: calc(100% - 32px); }
  .loges { grid-template-columns: 1fr; }
  .chiffrier { grid-template-columns: 1fr; }
  .chiffre { border-right: 0; }
  .champ-duo { grid-template-columns: 1fr; }
  .pied-grille { grid-template-columns: 1fr; gap: 34px; }
  .portrait-auteur { grid-template-columns: 1fr; }
  .cadre-arche img { border-radius: 120px 120px 4px 4px; }
  .formulaire { padding: 26px 20px 24px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .entre-en-scene {
    transform: none !important;
    transition: opacity 100ms linear;
  }
  .entre-en-scene.est-en-scene { transform: none !important; }
  .feuille, .pic, .temps, .pupitre, .loge, .temoin, .bouton, .bouton-second, .marque-pan {
    transition: none !important;
  }
  .feuille:hover, .pic:hover, .temps:hover, .pupitre:hover, .loge:hover, .temoin:hover,
  .bouton:hover, .bouton-second:hover {
    transform: none !important;
  }
}

@media print {
  .rideau-tete, .panneau-coulisse, .rideau-fond, .burger { display: none !important; }
  body { background: #FFFFFF; }
  .entre-en-scene { opacity: 1; transform: none; }
}

/* ==========================================================================
   Magazine: La Conduite de Saison
   Section ajoutee a la suite de la feuille du site, sans toucher une seule
   regle existante. Meme papier creme, meme velours, meme fil cinabre, meme
   cartouche a fente, memes filets gaufres et meme inclinaison en perspective
   a l apparition. Vocabulaire de classes: sommaire, affiche, exergue, corps,
   rappel, dans la continuite du plateau.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Magazine: tete de la page d index
   -------------------------------------------------------------------------- */

.magazine { padding: 140px 0 96px; position: relative; overflow: hidden; }

.magazine-tete { max-width: 780px; margin-bottom: 64px; }
.magazine-tete h1 { font-size: 3.1rem; margin-bottom: 18px; }
.magazine-tete .chapeau { max-width: 66ch; }

.magazine-reperes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--filet);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.85);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-douce);
  max-width: none;
}
.magazine-reperes span { display: inline-block; }

/* Dans une page d article, les intitules de colonne du pied de page ne peuvent
   pas etre des h3: la hierarchie des intertitres appartient au corps redactionnel.
   Ce cartouche rend exactement la meme composition sans balise de titre. */
.pied .pied-rubrique {
  display: block;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(253, 247, 241, 0.72);
  margin: 0 0 16px;
}

/* --------------------------------------------------------------------------
   Sommaire: grille de cartes d article en eventail decale
   -------------------------------------------------------------------------- */

.sommaire {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px var(--gouttiere);
  perspective: 1200px;
  margin-bottom: 60px;
}

.affiche {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--filet);
  padding: 0 0 26px;
  box-shadow: 0 6px 18px rgba(30, 26, 36, 0.06);
  transition: transform 300ms var(--courbe), box-shadow 300ms var(--courbe);
}
.sommaire > .affiche:nth-child(3n+2) {
  transform: translate(0, 20px) rotate(-1.2deg);
  box-shadow: 0 12px 30px rgba(30, 26, 36, 0.10);
}
.sommaire > .affiche:nth-child(3n) {
  transform: translate(0, 40px) rotate(0.9deg);
  box-shadow: 0 18px 40px rgba(30, 26, 36, 0.13);
}
.affiche:hover {
  transform: translateZ(6px) rotate(0deg);
  box-shadow: 0 22px 46px rgba(30, 26, 36, 0.16);
  z-index: 3;
}
.sommaire > .affiche.est-en-scene:nth-child(3n+2) { transform: translate(0, 20px) rotate(-1.2deg); }
.sommaire > .affiche.est-en-scene:nth-child(3n) { transform: translate(0, 40px) rotate(0.9deg); }

.affiche-cadre {
  position: relative;
  margin: 0;
  padding: 8px 8px 0;
  background: var(--surface);
}
.affiche-cadre img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--filet);
  filter: grayscale(1) sepia(0.16) contrast(1.04);
}

.affiche-texte {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 22px 26px 0 30px;
}

.affiche-angle {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cinabre);
  display: block;
  margin-bottom: 12px;
}

.affiche h2, .affiche h3 {
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 12px;
}
.affiche h2 a, .affiche h3 a { color: var(--encre); text-decoration: none; }
.affiche h2 a:hover, .affiche h3 a:hover {
  color: var(--velours);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.affiche-extrait {
  font-size: 0.9375rem;
  color: var(--encre-douce);
  margin: 0 0 20px;
  max-width: none;
  flex: 1 1 auto;
}

.affiche-pied {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--encre-douce);
  border-top: 1px solid var(--filet);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.85);
  padding-top: 14px;
  margin: 0;
  max-width: none;
}
.affiche-pied time { font-variant-numeric: tabular-nums; }
.affiche-pied .duree { color: var(--velours); font-variant-numeric: tabular-nums; }

.sommaire-suite {
  border-top: 1px solid var(--filet);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.85);
  padding-top: 26px;
  margin-top: 66px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  align-items: center;
}
.sommaire-suite p { margin: 0; color: var(--encre-douce); font-size: 0.9375rem; max-width: 64ch; }

/* --------------------------------------------------------------------------
   Article: entete, fil d Ariane, angle, dates, duree de lecture
   -------------------------------------------------------------------------- */

.article { padding: 132px 0 0; position: relative; }

.article-tete { max-width: var(--lisible); margin: 0 auto 40px; }
.article-tete h1 { font-size: 2.9rem; margin: 0 0 22px; }

.article-fil {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin: 0 0 18px;
  max-width: none;
}
.article-fil ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.article-fil li { margin: 0; }
.article-fil li + li::before { content: "/"; color: var(--filet); margin-right: 8px; }
.article-fil a { color: var(--velours); text-decoration: none; }
.article-fil a:hover { color: var(--cinabre); text-decoration: underline; }
.article-fil [aria-current="page"] { color: var(--encre-douce); }

.article-etiquettes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin: 0 0 22px;
  max-width: none;
}
.article-etiquettes .angle {
  color: var(--creme);
  background: var(--velours);
  padding: 6px 12px;
  letter-spacing: 0.14em;
}
.article-etiquettes .duree { color: var(--cinabre); font-variant-numeric: tabular-nums; }
.article-etiquettes time { font-variant-numeric: tabular-nums; }

.article-exergue {
  position: relative;
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--encre-douce);
  margin: 0;
  padding: 4px 0 4px 26px;
  max-width: none;
}
.article-exergue::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background-image: linear-gradient(
    to bottom,
    var(--cinabre) 0, var(--cinabre) calc(50% - 8px),
    transparent calc(50% - 8px), transparent calc(50% + 8px),
    var(--cinabre) calc(50% + 8px), var(--cinabre) 100%
  );
}

.article-visuel { margin: 44px auto 48px; max-width: 980px; }
.article-visuel .cadre-photo img { width: 100%; }
.article-visuel figcaption {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--encre-douce);
  margin-top: 12px;
  max-width: 68ch;
}

/* --------------------------------------------------------------------------
   Corps d article: balises nues, aucune classe, mesure de lecture confortable
   Le corps redactionnel n emploie que h2, h3, p, ul, ol, li, strong, em, a,
   table, thead, tbody, tr, th, td, blockquote, aside, figure et figcaption.
   Chacune est mise en forme ici, en tant que descendante du conteneur.
   -------------------------------------------------------------------------- */

.corps-article {
  max-width: 68ch;
  margin: 0 auto;
  padding-bottom: 12px;
}

.corps-article p { margin: 0 0 1.25em; max-width: none; }

.corps-article h2 {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin: 58px 0 18px;
}
.corps-article h2::before {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  margin-bottom: 20px;
  background-image: linear-gradient(
    to bottom,
    var(--filet) 0, var(--filet) 1px,
    rgba(255, 255, 255, 0.6) 1px, rgba(255, 255, 255, 0.6) 2px,
    transparent 2px, transparent 3px
  );
}

.corps-article h3 {
  position: relative;
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 36px 0 12px;
  padding-left: 18px;
}
.corps-article h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  width: 4px;
  height: 1.1em;
  background-image: linear-gradient(
    to bottom,
    var(--cinabre) 0, var(--cinabre) 40%,
    transparent 40%, transparent 60%,
    var(--cinabre) 60%, var(--cinabre) 100%
  );
}

.corps-article a {
  color: var(--velours);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.corps-article a:hover { color: var(--cinabre); }

.corps-article strong { font-weight: 600; color: var(--encre); }
.corps-article em { font-style: italic; }

.corps-article ul {
  list-style: none;
  padding-left: 0;
  margin: 0 0 1.4em;
}
.corps-article ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 12px;
}
.corps-article ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 4px;
  height: 18px;
  background-image: linear-gradient(
    to bottom,
    var(--cinabre) 0, var(--cinabre) 6px,
    transparent 6px, transparent 12px,
    var(--cinabre) 12px, var(--cinabre) 18px
  );
}

.corps-article ol {
  list-style: none;
  counter-reset: conduite;
  padding-left: 0;
  margin: 0 0 1.4em;
}
.corps-article ol > li {
  position: relative;
  counter-increment: conduite;
  padding-left: 40px;
  margin-bottom: 12px;
}
.corps-article ol > li::before {
  content: counter(conduite, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--cinabre);
}
.corps-article ul ul, .corps-article ul ol,
.corps-article ol ul, .corps-article ol ol { margin: 12px 0 0; }

.corps-article table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--filet);
  margin: 32px 0 36px;
  font-size: 0.9375rem;
  box-shadow: 0 6px 18px rgba(30, 26, 36, 0.05);
}
.corps-article thead th {
  background: var(--velours);
  color: var(--creme);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  padding: 13px 16px;
  vertical-align: bottom;
}
.corps-article tbody th { text-align: left; font-weight: 600; color: var(--encre); }
.corps-article tbody th,
.corps-article td {
  padding: 13px 16px;
  border-top: 1px solid var(--filet);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.85);
  vertical-align: top;
}
.corps-article tbody tr:first-child th,
.corps-article tbody tr:first-child td { box-shadow: none; }

.corps-article blockquote {
  position: relative;
  margin: 34px 0;
  padding: 6px 0 6px 26px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--encre);
}
.corps-article blockquote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background-image: linear-gradient(
    to bottom,
    var(--cinabre) 0, var(--cinabre) calc(50% - 6px),
    transparent calc(50% - 6px), transparent calc(50% + 6px),
    var(--cinabre) calc(50% + 6px), var(--cinabre) 100%
  );
}
.corps-article blockquote p { margin-bottom: 0.7em; }
.corps-article blockquote p:last-child { margin-bottom: 0; }

.corps-article aside {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--filet);
  padding: 26px 28px 24px 32px;
  margin: 36px 0;
  box-shadow: 0 6px 18px rgba(30, 26, 36, 0.06);
  font-size: 1rem;
}
.corps-article aside::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background-image: linear-gradient(
    to bottom,
    var(--cinabre) 0, var(--cinabre) calc(50% - 3px),
    transparent calc(50% - 3px), transparent calc(50% + 3px),
    var(--cinabre) calc(50% + 3px), var(--cinabre) 100%
  );
}
.corps-article aside::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 12px;
  height: 4px;
  background-image: linear-gradient(
    to bottom,
    var(--filet) 0, var(--filet) 1px,
    rgba(255, 255, 255, 0.75) 1px, rgba(255, 255, 255, 0.75) 2px,
    var(--filet) 2px, var(--filet) 3px,
    rgba(255, 255, 255, 0.75) 3px, rgba(255, 255, 255, 0.75) 4px
  );
}
.corps-article aside p:last-child { margin-bottom: 0; }
.corps-article aside ul:last-child,
.corps-article aside ol:last-child { margin-bottom: 0; }

.corps-article figure { margin: 34px 0; }
.corps-article figure img {
  width: 100%;
  border: 1px solid var(--filet);
  filter: grayscale(1) sepia(0.16) contrast(1.04);
}
.corps-article figcaption {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--encre-douce);
  margin-top: 10px;
}

/* --------------------------------------------------------------------------
   Appel a l action de fin d article
   -------------------------------------------------------------------------- */

.appel-rideau {
  position: relative;
  max-width: var(--lisible);
  margin: 56px auto 0;
  background: var(--velours);
  color: var(--creme);
  padding: 34px 34px 32px 38px;
  overflow: hidden;
}
.appel-rideau .rideau-fond path { fill: var(--creme); opacity: 0.05; }
.appel-rideau .surtitre { color: var(--cinabre-clair); position: relative; z-index: 1; }
.appel-rideau .surtitre::before { background: var(--cinabre-clair); }
.appel-rideau .titre-bloc {
  position: relative;
  z-index: 1;
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--creme);
  display: block;
  margin: 0 0 14px;
}
.appel-rideau p {
  position: relative;
  z-index: 1;
  color: rgba(253, 247, 241, 0.88);
  max-width: 62ch;
}
.appel-rideau p:last-of-type { margin-bottom: 24px; }
.appel-rideau .bouton-creme { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   Encart auteur
   -------------------------------------------------------------------------- */

.encart-auteur {
  position: relative;
  max-width: var(--lisible);
  margin: 48px auto 0;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 24px;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--filet);
  padding: 28px 30px 26px 34px;
  box-shadow: 0 6px 18px rgba(30, 26, 36, 0.06);
}
.encart-auteur img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border: 1px solid var(--filet);
  filter: grayscale(1) sepia(0.14) contrast(1.04);
}
.encart-auteur .auteur-role {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cinabre);
  display: block;
  margin-bottom: 8px;
}
.encart-auteur .auteur-nom {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--encre);
  display: block;
  margin-bottom: 10px;
}
.encart-auteur p {
  font-size: 0.9375rem;
  color: var(--encre-douce);
  margin-bottom: 0.8em;
  max-width: 62ch;
}
.encart-auteur p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Bloc A lire aussi
   -------------------------------------------------------------------------- */

.lire-aussi {
  max-width: var(--largeur);
  margin: 76px auto 0;
  padding-top: 34px;
  border-top: 1px solid var(--filet);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.85);
}
.lire-aussi .titre-bloc {
  font-family: var(--serif);
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.02em;
  display: block;
  margin: 0 0 26px;
}

.rappels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gouttiere);
  perspective: 1200px;
}

.rappel {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--filet);
  padding: 0 0 22px;
  text-decoration: none;
  color: var(--encre);
  box-shadow: 0 6px 18px rgba(30, 26, 36, 0.06);
  transition: transform 300ms var(--courbe), box-shadow 300ms var(--courbe);
}
.rappel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  z-index: 2;
  background-image: linear-gradient(
    to bottom,
    var(--cinabre) 0, var(--cinabre) calc(50% - 3px),
    transparent calc(50% - 3px), transparent calc(50% + 3px),
    var(--cinabre) calc(50% + 3px), var(--cinabre) 100%
  );
}
.rappel:hover {
  transform: translateZ(6px) translateY(-4px);
  box-shadow: 0 20px 44px rgba(30, 26, 36, 0.15);
  color: var(--encre);
}
.rappel img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-bottom: 1px solid var(--filet);
  filter: grayscale(1) sepia(0.16) contrast(1.04);
}
.rappel-texte { display: block; padding: 20px 24px 0 28px; }
.rappel-titre {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: 10px;
}
.rappel:hover .rappel-titre { color: var(--velours); }
.rappel-accroche {
  display: block;
  font-size: 0.9375rem;
  color: var(--encre-douce);
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Derniers articles mis en avant sur la page d accueil
   -------------------------------------------------------------------------- */

.derniers .sommaire { margin-bottom: 0; }
.acte.derniers {
  border-bottom: 1px solid var(--filet);
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.8);
}
.derniers-suite {
  border-top: 1px solid var(--filet);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.85);
  padding-top: 26px;
  margin-top: 66px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 32px;
  align-items: center;
}
.derniers-suite p { margin: 0; color: var(--encre-douce); font-size: 0.9375rem; max-width: 62ch; }

/* --------------------------------------------------------------------------
   Liste datee des parutions, page de l auteur et plan du site
   -------------------------------------------------------------------------- */

.parutions { list-style: none; padding: 0; margin: 0; }
.parutions > li {
  position: relative;
  padding: 18px 0 18px 26px;
  border-top: 1px solid var(--filet);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.85);
  margin: 0;
}
.parutions > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24px;
  width: 4px;
  height: 20px;
  background-image: linear-gradient(
    to bottom,
    var(--cinabre) 0, var(--cinabre) 7px,
    transparent 7px, transparent 13px,
    var(--cinabre) 13px, var(--cinabre) 20px
  );
}
.parutions a { font-weight: 500; text-decoration: none; }
.parutions a:hover { text-decoration: underline; }
.parutions .parution-note {
  display: block;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin-top: 6px;
}
.parutions .parution-note time { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Adaptations du magazine
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .magazine-tete h1 { font-size: 2.7rem; }
  .article-tete h1 { font-size: 2.5rem; }
  .sommaire { grid-template-columns: repeat(2, 1fr); }
  .sommaire > .affiche:nth-child(3n+2),
  .sommaire > .affiche:nth-child(3n),
  .sommaire > .affiche.est-en-scene:nth-child(3n+2),
  .sommaire > .affiche.est-en-scene:nth-child(3n) { transform: none; }
  .sommaire > .affiche:nth-child(even),
  .sommaire > .affiche.est-en-scene:nth-child(even) { transform: translate(0, 22px) rotate(-1deg); }
  .rappels { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .sommaire, .rappels { grid-template-columns: 1fr; }
  .sommaire { gap: 24px; }
  .sommaire > .affiche,
  .sommaire > .affiche:nth-child(even),
  .sommaire > .affiche:nth-child(3n+2),
  .sommaire > .affiche:nth-child(3n),
  .sommaire > .affiche.est-en-scene:nth-child(even),
  .sommaire > .affiche.est-en-scene:nth-child(3n+2),
  .sommaire > .affiche.est-en-scene:nth-child(3n) { transform: none; }
  .article-visuel { margin: 34px auto 40px; }
}

@media (max-width: 640px) {
  .magazine { padding: 116px 0 72px; }
  .magazine-tete h1 { font-size: 2.2rem; }
  .article { padding: 112px 0 0; }
  .article-tete h1 { font-size: 2.05rem; }
  .corps-article h2 { font-size: 1.65rem; margin-top: 44px; }
  .corps-article table { display: block; overflow-x: auto; }
  .encart-auteur { grid-template-columns: 1fr; gap: 18px; padding: 24px 20px 22px 24px; }
  .appel-rideau { padding: 26px 22px 24px 26px; }
  .lire-aussi .titre-bloc { font-size: 1.55rem; }
}

@media (prefers-reduced-motion: reduce) {
  .affiche, .rappel { transition: none !important; }
  .affiche:hover, .rappel:hover { transform: none !important; }
}

@media print {
  .sommaire > .affiche, .rappel { transform: none !important; box-shadow: none; }
  .appel-rideau { background: #FFFFFF; color: #1E1A24; }
  .appel-rideau .titre-bloc, .appel-rideau p { color: #1E1A24; }
}