/* ============================================================
   STRATES — structure de lecture continue
   L'Impasse du Dragon / Bruocsella

   À charger APRÈS css/dragon.min.css, qui reste en place : il
   habille encore les boutons de langue, la Mise en garde, le
   formulaire de contact, le bandeau RGPD, le menu de saut et le
   bouton de remontée. Cette feuille ne reprend que la mise en
   page de lecture.

   panel-budget.css et panel-budget.js ne sont plus chargés :
   l'accordéon n'existe plus.
   ============================================================ */

:root {
  --or: #9b763f;
  --or-chaud: #ad835a;
  --encre: #c6aa81;
  --encre-basse: #a99a80;
  --sol: #0d0d0d;
  --strate: rgba(18, 27, 36, 0.92);

  --titrage: "Trajan Pro 3 Light", serif;
  --courant: Spectral, Georgia, serif;

  --mesure: 62ch;
  --marge: clamp(1.25rem, 4vw, 3.5rem);
  --rythme: clamp(2.25rem, 4.5vw, 3.75rem);

  /* IMAGES — les deux seuls réglages à toucher.
     --fig-h plafonne la HAUTEUR : c'est lui qui commande la longueur
     de la page, bien plus que la largeur. --fig-max autorise un léger
     débord au-delà de la colonne de texte ; mets-le à var(--mesure)
     pour un alignement strict. */
  --fig-h: 58vh;
  --fig-max: 46rem;

  /* Rail élargi (dragon.min.css le posait à 92px). */
  --rail-w: 122px;
}

/* ------------------------------------------------------------
   1 — NEUTRALISER L'HABILLAGE DE L'ANCIENNE MISE EN PAGE

   Chaque section portait un cadre : fond, bordure or, rayon de
   20px, padding. C'était l'emballage d'un panneau d'accordéon
   haut de 700 à 900 px. Déplié, le même cadre entoure 2 000 à
   3 000 px : le rayon devient invisible et la bordure n'encadre
   plus rien. Le cadre devient la strate elle-même.

   Sélecteurs par id pour égaler la spécificité d'origine, sans
   recourir à !important.
   ------------------------------------------------------------ */
#section00,
#section8,
#section2,
#section2_2,
#section2_3,
#section4_4,
#section3,
#section4,
#section5_6,
#section5,
#section5_5,
#section5_7,
#section5_8,
#section6,
#section6_1,
#section6_2,
#section6_3 {
  background-color: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  overflow: visible;
}

/* Le fondu au défilement laissait la moitié des sections à
   opacity:0 si l'observateur ne passait pas. En lecture continue,
   tout est lisible d'emblée. */
.contenu,
.contenu.visible {
  opacity: 1;
  transform: none;
  overflow: visible;
}
.contenu::before {
  display: none;
}

/* ------------------------------------------------------------
   2 — LA STRATE ET SES COUCHES

   Une strate = une section datée. Une couche = un sous-chapitre,
   c'est-à-dire un ancien onglet. L'alternance de fond se joue à
   chaque titre : c'est elle qui remplace les bordures.
   ------------------------------------------------------------ */
body {
  background: var(--sol);
}

.strate {
  position: relative;
}

.contact {
  background: var(--strate);
  padding: calc(var(--rythme) * 1.4) var(--marge) var(--rythme);
  text-align: right;
  border-top: 1px solid rgba(155, 118, 63, 0.45);
}
.contact .cote {
  display: block;
  font-family: var(--titrage);
  font-size: clamp(1.7rem, 4.5vw, 2.9rem);
  line-height: 1;
  color: var(--or);
  letter-spacing: 0.06em;
  opacity: 0.85;
  font-variant-numeric: lining-nums tabular-nums;
}
.contact h2 {
  margin: 0.6rem 0 0;
  font-family: var(--titrage);
  font-size: clamp(1.25rem, 2.6vw, 1.85rem);
  color: var(--or-chaud);
  letter-spacing: 0.09em;
  line-height: 1.3;
  text-transform: none;
  text-shadow: 0 0 3px #000;
}

.couche {
  padding: var(--rythme) var(--marge);
  background: var(--sol);
}
.couche:nth-of-type(even) {
  background: var(--strate);
}

.couche__titre {
  max-width: var(--mesure);
  margin: 0 auto 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(155, 118, 63, 0.28);
  font-family: var(--titrage);
  font-size: clamp(1.15rem, 2.2vw, 1.35rem);
  font-weight: 400;
  color: var(--or-chaud);
  letter-spacing: 0.07em;
  text-align: left;
  text-shadow: 0 0 2px #000;
}

/* Corps de texte : retour à la taille du site. Le 0.93rem
   d'origine n'était pas un choix, c'était une concession au
   budget de hauteur du panneau. */
.couche .contenu_para,
.couche p {
  max-width: var(--mesure);
  margin: 0 auto 1.35em;
  font-size: 1.09rem;
  line-height: 1.75;
  color: var(--encre);
}
.couche ul,
.couche ol {
  max-width: var(--mesure);
  margin: 0 auto 1.35em;
  padding-left: 1.3em;
}
.couche .invite {
  max-width: var(--mesure);
  margin: 0 auto 1.35em;
  padding: 0;
}


/* ------------------------------------------------------------
   3 — IMAGES

   Le frein au scroll est la hauteur, pas la largeur : une image
   portrait de 848 × 1264 ramenée à la colonne occupe encore près
   de 900 px. On plafonne donc par --fig-h.
   ------------------------------------------------------------ */
.couche figure {
  position: relative;
  width: fit-content;
  max-width: min(var(--fig-max), 100%);
  margin: calc(var(--rythme) * 0.85) auto;
}
.couche figure img,
.couche figure video {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: var(--fig-h);
  height: auto;
  background: #14181d;
}
/* Logo des fées Dryas : image plus petite que la photo qui
   l'entoure, ramenée à la moitié de sa taille native (688px).
   Sélecteur aussi spécifique que la règle générale ci-dessus,
   pour l'emporter sans !important. */
.couche figure img.reduite {
  max-width: 344px;
}

/* « Gardiennes du grand ordre » : portrait plafonné par la
   hauteur (cf. note ci-dessus), donc 30 % de plus se joue sur
   --fig-h, pas sur la largeur. */
.couche figure img.agrandie {
  max-height: calc(var(--fig-h) * 1.3);
}

/* Lien vers la Bruxelloise, transformé en bouton dans le fil du
   texte : même langage visuel que les boutons de formulaire
   (bordure et texte or, fond sombre, inversion au survol). */
.link-bouton {
  display: inline-block;
  margin: 0 0.15em;
  padding: 0.25em 0.9em;
  border: 1px solid var(--or);
  border-radius: 3px;
  background-color: rgba(18, 27, 36, 0.7);
  color: var(--or);
  font-family: Spectral, serif;
  text-shadow: none;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}
.link-bouton:hover,
.link-bouton:focus-visible {
  background-color: var(--or);
  color: #c2bfa9;
  text-shadow: none;
}

.couche figcaption {
  max-width: var(--mesure);
  margin: 0.85rem auto 0;
  font-size: 0.64rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--encre-basse);
}

/* Deux figures voisines passent côte à côte : autant de contenu,
   moitié moins de défilement. */
.duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(0.75rem, 2vw, 1.5rem);
  max-width: min(82rem, 100%);
  margin: calc(var(--rythme) * 0.85) auto;
  align-items: start;
}
.duo figure {
  width: auto;
  max-width: none;
  margin: 0;
}
.duo figure img {
  width: 100%;
  max-height: calc(var(--fig-h) * 0.8);
  object-fit: cover;
}

.couche video {
  display: block;
  width: 100%;
  max-width: min(82rem, 100%);
  height: auto;
  margin: calc(var(--rythme) * 0.85) auto;
}

/* Bouton loupe, posé par strates.js en haut à gauche de chaque
   figure : c'est le point de départ de l'agrandissement. */
.loupe {
  position: absolute;
  top: 0.55rem;
  left: 0.55rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border: 1px solid rgba(155, 118, 63, 0.55);
  background: rgba(13, 13, 13, 0.72);
  color: var(--or-chaud);
  cursor: pointer;
  opacity: 0.6;
  transition:
    opacity 0.2s,
    background 0.2s;
}
.loupe:hover,
.loupe:focus-visible {
  opacity: 1;
  background: rgba(13, 13, 13, 0.92);
}
.loupe svg {
  width: 1rem;
  height: 1rem;
}

/* Vignette floutée : le flou se lève définitivement au premier
   agrandissement (voir ouvrir() dans strates.js), la version
   plein écran restant toujours nette. */
.floute {
  filter: blur(14px);
  transition: filter 0.6s ease;
}

/* Pastille d'avertissement, posée par strates.js sous la loupe
   des images floutées : rappel visuel façon "interdit -16". */
.age-badge {
  position: absolute;
  top: calc(0.55rem + 2.1rem + 0.4rem);
  left: 0.55rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  border: 2px solid #d43a3a;
  background: rgba(13, 13, 13, 0.72);
  color: #d43a3a;
  font-family: var(--courant);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  pointer-events: none;
}

.visionneuse {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(6, 8, 10, 0.94);
  opacity: 0;
  transition: opacity 0.28s ease-out;
}
.visionneuse[hidden] {
  display: none;
}
.visionneuse.ouverte {
  opacity: 1;
}
.visionneuse figure {
  margin: 0;
  width: auto;
  max-width: none;
}
.visionneuse img {
  max-width: 92vw;
  max-height: 84vh;
  width: auto;
  height: auto;
  transform-origin: top left; /* grandit vers le bas à droite */
}
.visionneuse img.anime {
  transition: transform 0.42s cubic-bezier(0.22, 0.68, 0.35, 1);
}
.visionneuse figcaption {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.86rem;
  font-style: italic;
  color: var(--encre-basse);
}
.visionneuse__fermer {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid rgba(155, 118, 63, 0.5);
  background: none;
  color: var(--or-chaud);
  font-size: 1.1rem;
  cursor: pointer;
}

/* ------------------------------------------------------------
   4 — APARTÉS

   Mécanisme prêt, appliqué à aucun passage pour l'instant : le
   choix de ce qui devient facultatif t'appartient. Pour activer
   un aparté, il faut deux choses.

   1. Dans le texte, un bouton :
      <button class="aparte" type="button" data-cible="betes"
              data-fr="trois bêtes" data-en="three beasts"
              data-es="tres bestias"></button>

   2. En fin de page, la source, dans une div CACHÉE mais bien
      présente dans le DOM — c'est indispensable pour que le
      sélecteur de langue de dragon.min.js la traduise, ce que
      ne permettrait pas un <template> :
      <div class="aparte-source" id="aparte-betes">
        <h4 data-fr="…" data-en="…" data-es="…"></h4>
        <p class="contenu_para" data-fr="…" data-en="…" data-es="…"></p>
      </div>

   RÈGLE : le texte principal doit se lire en entier sans jamais
   ouvrir un aparté. Sinon on reconstruit l'accordéon.
   ------------------------------------------------------------ */
.aparte-source {
  display: none;
}

.aparte {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--or-chaud);
  cursor: pointer;
  border-bottom: 1px dotted rgba(173, 131, 90, 0.75);
  transition: color 0.2s;
}
.aparte::after {
  content: "\00a0›";
  font-size: 0.85em;
  opacity: 0.7;
}
.aparte:hover,
.aparte:focus-visible {
  color: #d4b86e;
}

.tiroir {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1550;
  width: min(30rem, 92vw);
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(2rem, 4vw, 3rem);
  background: #10161d;
  border-left: 1px solid rgba(155, 118, 63, 0.5);
  box-shadow: -20px 0 50px rgba(0, 0, 0, 0.55);
  transform: translateX(100%);
  transition: transform 0.42s cubic-bezier(0.22, 0.68, 0.35, 1);
}
.tiroir[hidden] {
  display: none;
}
.tiroir.ouvert {
  transform: translateX(0);
}
.tiroir h4 {
  margin: 0 0 1.5rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(155, 118, 63, 0.3);
  font-family: var(--titrage);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--or-chaud);
  letter-spacing: 0.07em;
}
.tiroir p {
  margin: 0 0 1.2em;
  font-family: var(--courant);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--encre);
}
.tiroir__fermer {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid rgba(155, 118, 63, 0.4);
  background: none;
  color: var(--or-chaud);
  cursor: pointer;
}
.voile {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: rgba(6, 8, 10, 0.6);
  opacity: 0;
  transition: opacity 0.42s;
}
.voile[hidden] {
  display: none;
}
.voile.ouvert {
  opacity: 1;
}

/* ------------------------------------------------------------
   5 — RAIL

   dragon.min.css le plaçait déjà à gauche. On l'élargit et on
   rend les dates lisibles : Trajan au lieu du monospace, corps
   relevé, années à l'intérieur du filet. Le JS d'origine n'est
   pas touché — il continue de positionner marques et curseur.
   ------------------------------------------------------------ */
.rail {
  background: rgba(13, 13, 13, 0.82);
  border-right: 1px solid rgba(155, 118, 63, 0.4);
}
.rail__ticks {
  opacity: 0.5;
}
.rail__mark {
  left: 10px;
  right: 20px;
  height: 1px;
  background: rgba(155, 118, 63, 0.4);
}
.rail__mark span {
  left: 2px;
  top: -15px;
  font-family: var(--titrage);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  color: var(--or);
  opacity: 0.65;
  font-variant-numeric: lining-nums tabular-nums;
}
.rail__mark:hover span,
.rail__mark[aria-current="true"] span {
  opacity: 1;
  color: var(--or-chaud);
}
.rail__cursor .y {
  right: 12px;
  top: 4px;
  font-family: var(--titrage);
  font-size: 0.95rem;
  color: var(--or-chaud);
  font-variant-numeric: lining-nums tabular-nums;
}
.rail__cursor .e {
  right: 12px;
  top: 24px;
  font-family: var(--titrage);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
}
.rail__foot {
  font-family: var(--titrage);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
}

/* ------------------------------------------------------------
   6 — SEUIL, CHAPEAU, COMPLÉMENTS, CLÔTURE
   ------------------------------------------------------------ */
.seuil {
  padding: clamp(3rem, 8vh, 6rem) var(--marge) var(--rythme);
  text-align: right;
}
.seuil h1 {
  font-family: var(--titrage);
  /*font-size: clamp(1.9rem, 6vw, 3.6rem);*/
  color: var(--or-chaud);
  letter-spacing: 0.12em;
  line-height: 1.25;
  text-align: right;
  font-weight: 200;
}
.seuil .titsortie {
  color: var(--encre-basse);
  font-family: var(--courant);
  font-style: italic;
}

.chapeau {
  padding: 0 var(--marge) var(--rythme);
}
.chapeau video {
  display: block;
  width: 100%;
  max-width: min(82rem, 100%);
  height: auto;
  margin: 0 auto var(--rythme);
}
.chapeau__texte h2 {
  max-width: var(--mesure);
  margin: 0 auto 1.5rem;
  font-family: var(--titrage);
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  color: var(--or-chaud);
  letter-spacing: 0.09em;
  text-transform: none;
  text-align: right;
  font-weight: 200;
}
.chapeau__texte .contenu_para {
  max-width: var(--mesure);
  margin: 0 auto 1.35em;
  font-size: 1.09rem;
  line-height: 1.8;
  color: var(--encre);
}

/* Les rubriques sans date ferment le parcours : « Ce qui vit dans
   l'eau », « Sources », « Postface ». Un filet double annonce le
   changement de registre. */
.complement {
  border-top: 1px solid rgba(155, 118, 63, 0.25);
}
.complement:first-of-type {
  margin-top: var(--rythme);
}
.complement .contact {
  border-top-width: 3px;
  border-top-style: double;
}
.complement .contact .cote {
  display: none;
}

.clore {
  padding: var(--rythme) var(--marge) calc(var(--rythme) * 1.5);
  background: var(--strate);
  border-top: 1px solid rgba(155, 118, 63, 0.45);
}
.clore h2 {
  max-width: var(--mesure);
  margin: 0 auto 1rem;
  text-align: left;
  text-transform: none;
}
.clore .contenu_para {
  max-width: var(--mesure);
  margin: 0 auto 1.5rem;
}
.clore .contact-form,
.clore #contactform {
  max-width: var(--mesure);
  margin: 0 auto;
}


@media (max-width: 480px) {
.couche .contenu_para,
.couche p {
  max-width: var(--mesure);
  margin: 0 auto 1.35em;
  font-size: 0.7rem;
  line-height: 1.75;
  color: var(--encre);
}
.couche figure img.reduite {
  max-width: 172px;
}
.chapeau__texte .contenu_para {
    max-width: var(--mesure);
    margin: 0 auto 1.35em;
    font-size: 0.7rem;
    line-height: 1.8;
    color: var(--encre);
    text-align: justify;
}

}

/* ------------------------------------------------------------
   7 — CONFORT
   ------------------------------------------------------------ */
@media (max-width: 1023px) {
  .contact {
    text-align: left;
  }
  .seuil,
  .seuil h1 {
    text-align: left;
  }

  /* #section00 reste en display:flex (héritage du bandeau
     d'accueil, cf. dragon.min.css) : sans cette règle, la Mise
     en garde se retrouve second enfant de la rangée flex, écrasée
     dans la moitié droite de l'écran avec son texte tronqué. */
  #section00 {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }
  #section00 .couche {
    width: 100%;
    padding: var(--rythme) 0 0;
  }
  .songbox {
    max-width: 100%;
    padding: 1.1rem 1.25rem;
  }
  .songbox__title {
    font-size: 0.95rem;
  }
  .songbox__tip {
    font-size: 1rem;
    max-width: 16rem;
  }
  .songbox__scroll {
    max-height: 22rem;
    font-size: 0.9rem;
    line-height: 1.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tiroir,
  .voile,
  .visionneuse,
  .visionneuse img,
  .loupe {
    transition: none !important;
  }
}

.couche__titre:focus-visible,
.aparte:focus-visible,
.loupe:focus-visible,
.rail__mark:focus-visible {
  outline: 2px solid var(--or-chaud);
  outline-offset: 3px;
}

/* ============================================================
   À AJOUTER EN FIN DE css/strates.css

   Fichier séparé pour ne pas écraser tes retouches cosmétiques.
   Habille le menu de saut construit par strates.js : l'année en
   colonne à gauche, et un filet avant les rubriques
   complémentaires.
   ============================================================ */

#sectionJumpMenu a {
  display: grid;
  grid-template-columns: 4.2em 1fr;
  align-items: baseline;
  gap: 0.6em;
}

/* Les entrées sans année (Introduction, Contact) gardent
   l'alignement de la colonne des titres. */
#sectionJumpMenu a > span:only-child {
  grid-column: 2;
}

.jump__an {
  font-family: var(--titrage, "Trajan Pro 3 Light", serif);
  font-size: 0.78em;
  text-align: right;
  color: var(--or, #9b763f);
  opacity: 0.75;
  font-variant-numeric: lining-nums tabular-nums;
}

/* Passage de la chronologie aux rubriques complémentaires. */
.jump--coupure {
  margin-top: 0.45rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(155, 118, 63, 0.3);
}

/* Dix-huit entrées : le menu doit pouvoir défiler sur les petits
   écrans, où il est la seule navigation puisque le rail est
   masqué sous 1024px. */
#sectionJumpMenu {
  max-height: 70vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #9b763f rgba(230, 224, 208, 0.08);
}
#sectionJumpMenu::-webkit-scrollbar {
  width: 6px;
}
#sectionJumpMenu::-webkit-scrollbar-track {
  background: rgba(230, 224, 208, 0.08);
}
#sectionJumpMenu::-webkit-scrollbar-thumb {
  background: #9b763f;
}