/* ===== Base ===== */
html { font-size: 100%; }

body{
  margin: 0;
  padding: 0;
  background: #2e342a;
  font: 400 1em/1.5 Helvetica, Arial, sans-serif;
  color: rgba(0,0,0,.8);
}

/* Liens */
a{ color: blue; text-decoration: underline; }
a:hover{ color: red; }

/* Typo contenu */
p{
  margin: 0 0 1em;
  color: #555;
  font-size: 22px;
  font-family: Georgia, serif;
}

/* ===== Structure ===== */
#container{
  max-width: 1000px;
  margin: 0 auto;
  border-left: 1px solid #222;
  border-right: 1px solid #222;
  box-shadow: 0 0 10px #000;
  background: #fff;
}

#main{ background: #fff; }

#content{
  line-height: 1.5;
  overflow: hidden;
}

#inner-content{
  padding: 1em 2em 2em;
}

/* ===== Header (image + titre) ===== */
#header{
  position: relative;
  background-color: #171c1a;
}

#header a.logo{
  display: block;
  box-shadow: 0 5px 10px #000;
  position: relative;
}

#header img{
  display: block;
  width: 100%;
  height: auto;
  border: 0;
}

#header .banner-title{
  position: absolute;
  top: 61%;
  left: 58%;
  transform: translate(-50%, -50%);
  font-size: 1.9em;
  color: #F6DECB;
  text-shadow: 1px 1px 1px #000;
  font-weight: 700;
  z-index: 10;
  text-align: center;
  white-space: nowrap;
}

/* ===== Titres (si tu en ajoutes) ===== */
h1{
  font-family: Times, "Times New Roman", Georgia, serif;
  color: #444;
  margin: 0;
  padding-top: 10px;
  font-size: 50px;
  line-height: 44px;
  letter-spacing: -2px;
  font-weight: 700;
}

h2{
  font-family: "Times New Roman", Georgia, serif;
  color: #444;
  font-size: 30px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.5px;
  margin: 2.2rem 0 0.8rem;
  padding: 0;
}

/* ===== Utilitaires ===== */
.text-center{ text-align: center; }

.size{
  max-width: 100%;
  height: auto;
}

/* ===== Encadrés Watchtower ===== */
.wt{
  position: relative;
  max-width: 95%;
  margin: 1.4rem auto 1.8rem;
  padding: 2.5rem 1.2rem 1.1rem;
  background: #ECECEC;
  border-radius: 6px;
  border: 3px solid #C3CBD5;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  font-size: 1.25em;
  color: #5a4a32;
}

.wt::before{
  opacity: 0.3;
  content: "";
  position: absolute;
  top: 0;
  left: 1.1rem;

  transform: translateY(-10px);
  width: 60px;
  height: 60px;

  background: no-repeat center / contain url("watchtower.svg");
}

/* ===== Bloc verset ===== */
.verse-box{
  position: relative;
  margin: 1.5rem auto;
  padding: 1.4rem 1.6rem 1.2rem;
  background: #f7f7f9;
  border-radius: 6px;
  border: 1px solid #d4d7dd;
  border-left: 4px solid #4b5a73;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  color: #444;
  font-size: 22px;
  font-family: Georgia, serif;
}

.verse-box p{ margin: .4em 0; }

.verse-ref{
  margin-top: .8em;
  font-size: .95em;
  text-align: right;
  font-style: italic;
  font-weight: 700;
}

.verse-icon{
  position: absolute;
  top: -16px;
  left: 18px;
  padding: 3px 6px;
  background: rgba(247,247,249,.9);
  border-radius: 999px;
}

.verse-icon-svg{
  width: 28px;
  height: 18px;
  fill: none;
  stroke: #4b5a73;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .7;
}

/* ===== Effets texte ===== */
.underline{ border-bottom: 2px solid red; }

.vagues{
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: wavy;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.ombre{ text-shadow: 1px 1px 1px #000; color:#000; }
.ombreRed{ text-shadow: 1px 1px 1px #000; color:red; }
.ombreBlue{ text-shadow: 1px 1px 1px #000; color:#005580; }
.ombreBrown{ text-shadow: 1px 1px 1px #000; color:#802A00; }
.ombreGreen{ text-shadow: 1px 1px 1px #000; color:green; }
.ombreMaroon{ text-shadow: 1px 1px 1px #000; color:purple; }

/* ===== Bouton ===== */
.button{
  display: inline-block;
  margin: 10px;
  border-radius: 8px;
  box-shadow: 0 8px 0 silver, 0 15px 20px rgba(0,0,0,.35);
  transition: box-shadow .1s ease-in-out;
  font-size: 40px;
  color: #000;
}

.button span{
  display: inline-block;
  padding: 20px;
  background-color: #FFF2B7;
  border-radius: 8px;
  box-shadow: inset 0 -1px 1px rgba(255,255,255,.15);
  font-family: Arial, sans-serif;
  text-shadow: 0 -1px 1px rgba(175,49,95,.7);
  transition: background-color .2s ease-in-out, transform .1s ease-in-out;
}

.button:hover span{
  background-color: #F5F6CE;
  text-shadow: 0 -1px 1px rgba(175,49,95,.9), 0 0 5px rgba(255,255,255,.8);
}

.button:active,
.button:focus{
  box-shadow: 0 8px 0 #000, 0 12px 10px rgba(0,0,0,.3);
}

.button:active span{ transform: translateY(4px); }

/* ===== Footer ===== */
footer{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 20px 0;
  background: #131313;
}

.footer-actions{
  display: flex;
  justify-content: center;
}

.back-link{
  display: inline-block;
  padding: .6em 1.4em;
  border-radius: 999px;
  border: 1px solid #e7e5e4;
  background: #131313;
  color: #e7e5e4;
  font-family: "Avant Garde","Century Gothic",system-ui,sans-serif;
  font-size: 1.1rem;
  text-decoration: none;
  letter-spacing: .02em;
  transition: background .2s ease, transform .1s ease, box-shadow .2s ease;
}

.back-link:hover{
  background: #1f1f1f;
  box-shadow: 0 4px 10px rgba(0,0,0,.4);
  transform: translateY(-1px);
}

.back-link:active{
  transform: translateY(1px);
  box-shadow: none;
}

/* ===== Responsive ===== */
@media (max-width: 900px){
  #inner-content{ padding: 1em 1.25em 1.5em; }
  p{ font-size: 20px; }
  .verse-box{ font-size: 20px; }
}

@media (max-width: 640px){
  #container{
    max-width: 100%;
    border: 0;
    box-shadow: none;
  }

  #inner-content{ padding: 1em; }

  #header .banner-title{
    top: 40%;
    left: 50%;
    font-size: 1.35em;
    white-space: normal;
    width: 92%;
  }
}

/* Liste ordonnée (ol > li) : propre, lisible, responsive */
ol{
  margin: 0.6rem 0 1.2rem;
  padding-left: 1.4rem;         /* espace pour les numéros */
  color: #555;
  font-family: Georgia, serif;
  font-size: 22px;
  line-height: 1.45;
}

ol li{
  margin: 0.45rem 0;
  padding: 0.35rem 0.7rem;
  background: #f7f7f7;
  border: 1px solid #e2e2e2;
  border-radius: 10px;
}

/* Liens dans la liste */
ol li a{
  display: inline-block;
  color: #0a58ca;
  text-decoration: none;
  font-weight: 600;
}

ol li a:hover{
  text-decoration: underline;
  color: #c1121f;
}

/* Mobile : texte un peu plus compact */
@media (max-width: 640px){
  ol{ font-size: 20px; }
  ol li{ padding: 0.35rem 0.6rem; }
}

/* ===== Graphique Babylonien (CSS only) ===== */
.babylon-chart{
  max-width: 980px;
  margin: 1.4rem auto 2rem;
  padding: 14px 14px 18px;
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}

.babylon-caption{
  margin: 6px 0 12px;
  text-align: center;
  color: #444;
  font-family: Georgia, serif;
  font-size: 18px;
}

.babylon-axis{
  display: flex;
  justify-content: space-between;
  font-family: Georgia, serif;
  font-weight: 700;
  color: #333;
  margin: 0 0 10px;
  opacity: .9;
}

.babylon-rows{
  position: relative;
  display: grid;
  gap: 10px;
  padding: 10px 10px 14px;
  border-radius: 10px;

  /* petit quadrillage optionnel */
  background:
    linear-gradient(to right, rgba(0,0,0,.05) 1px, transparent 1px) 0 0/22px 22px,
    linear-gradient(to bottom, rgba(0,0,0,.05) 1px, transparent 1px) 0 0/22px 22px,
    #fbfbfc;
  border: 1px solid #e3e3e3;
}

/* Repère -587 */
.babylon-marker{
  position: absolute;
  top: 8px;
  bottom: 10px;
  left: var(--mark);
  transform: translateX(-1px);
  pointer-events: none;
  z-index: 3;
}

.marker-line{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(180, 0, 0, .65);
  box-shadow: 0 0 0 1px rgba(255,255,255,.55);
}

.marker-label{
  position: absolute;
  top: 6px;
  left: 10px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(180,0,0,.35);
  border-left: 4px solid rgba(180,0,0,.65);
  padding: 6px 10px;
  border-radius: 8px;
  font-family: Georgia, serif;
  color: #b00000;
  line-height: 1.1;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}

/* Rangées */
.row{
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: center;
  gap: 10px;
}

.dur{
  font-family: Georgia, serif;
  font-weight: 700;
  color: #333;
  text-align: right;
  padding-right: 6px;
}

.track{
  height: 40px;
  position: relative;
  border-left: 3px solid #222;
  border-radius: 6px;
  background: rgba(255,255,255,.65);
  overflow: hidden;
}

/* Barres */
.seg{
  height: 100%;
  width: var(--w);
  display: flex;
  align-items: center;
  padding-left: 12px;
  font-family: Arial, sans-serif;
  font-weight: 700;
  color: #0a2a6a;
  border-right: 1px solid rgba(0,0,0,.25);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  white-space: nowrap;
}

/* Couleurs proches de ton image */
.nabonide{ background: #ead6d6; }
.labashi{ background: #cfe0f7; }
.neriglissar{ background: #cfe6dd; }
.evil{ background: #f6dfc8; }
.nabouka{
  background: #f2ecaa;
  position: relative;
}

/* Ligne “19 ans →” à l’intérieur du règne de Naboukadnetsar */
.nabouka .inside-note{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-family: Georgia, serif;
  font-weight: 700;
  color: rgba(0,0,0,.65);
}

/* Ligne plus haute pour le gros bloc */
.row.big .track{ height: 56px; }
.row.big .seg{ font-size: 20px; }

/* ===== Responsive ===== */
@media (max-width: 620px){
  .babylon-caption{ font-size: 16px; }
  .row{
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .dur{
    text-align: left;
    padding-right: 0;
    opacity: .9;
  }
  .track{ height: 44px; }
  .row.big .track{ height: 60px; }
  .marker-label{
    left: 6px;
    top: auto;
    bottom: 6px;
    white-space: normal;
    width: 170px;
  }
}

/* ===== Timeline verticale (CSS) ===== */
.vt{
  max-width: 980px;
  margin: 1.6rem auto 2rem;
  padding: 14px 14px 18px;
  background: #fff;
  border: 1px solid #dedede;
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
}

/* titre */
.vt__title{
  text-align:center;
  margin: 6px 0 12px;
  color:#444;
  font-family: Georgia, serif;
  font-size: 18px;
}

/* mini “axe” */
.vt__axis{
  display:flex;
  justify-content: space-between;
  margin: 0 0 12px;
  font-family: Georgia, serif;
  font-weight: 800;
  color:#333;
  opacity:.9;
}

/* réglage de l'échelle (hauteur) :
   1 an = 12px (tu peux monter/descendre) */
.vt__grid{
  --py: 12px;
  display:grid;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  background:
    linear-gradient(to right, rgba(0,0,0,.05) 1px, transparent 1px) 0 0/22px 22px,
    linear-gradient(to bottom, rgba(0,0,0,.05) 1px, transparent 1px) 0 0/22px 22px,
    #fbfbfc;
  border: 1px solid #e7e7e7;
}

/* rangée = colonne durée + bloc */
.vt__row{
  display:grid;
  grid-template-columns: 88px 1fr;
  align-items: stretch;
  gap: 10px;
}

.vt__dur{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding-right: 6px;
  font-family: Georgia, serif;
  font-weight: 800;
  color:#222;
}

/* bloc “règne” */
.vt__block{
  position: relative;
  min-height: 28px;
  height: calc(var(--years) * var(--py));
  border-left: 4px solid #222;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  display:flex;
  align-items:flex-start;
  padding: 10px 12px;
}

/* nom */
.vt__name{
  font-family: Arial, sans-serif;
  font-weight: 800;
  color:#0a2a6a;
  font-size: 20px;
}

/* couleurs proches de ton image */
.vt__block--nabonide{ background:#ead6d6; }
.vt__block--labashi{ background:#cfe0f7; }
.vt__block--neriglissar{ background:#cfe6dd; }
.vt__block--evil{ background:#f6dfc8; }
.vt__block--nabouka{ background:#f2ecaa; }

/* =========================
   Repères années -539 / -606
   ========================= */

/* le figcaption (-539) devient "tick" avec petit trait */
.vt__title{
  position: relative;
  padding-bottom: 6px;
}

.vt__title::after{
  content:"";
  display:block;
  width: 220px;
  height: 2px;
  margin: 10px auto 0;
  background: rgba(0,0,0,.55);
  border-radius: 999px;
}

/* note du bas (-606) devient aussi un "tick" */
.vt__note{
  position: relative;
  margin: 12px 0 0;
  color:#555;
  font-family: Georgia, serif;
  font-size: 16px;
  text-align:center;
  padding-top: 10px;
}

.vt__note::before{
  content:"";
  display:block;
  width: 220px;
  height: 2px;
  margin: 0 auto 8px;
  background: rgba(0,0,0,.55);
  border-radius: 999px;
}

/* =========================
   Ligne rouge “Destruction”
   ========================= */
.vt__block--nabouka .vt__event{
  position:absolute;
  left: 0;
  right: 0;
  top: var(--event-top);          /* position depuis le haut */
  transform: translateY(-1px);
  height: 0;
  border-top: 3px solid rgba(190,0,0,.9);
  z-index: 5;
}

.vt__block--nabouka .vt__eventLabel{
  position:absolute;
  right: 10px;
  top: -18px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(190,0,0,.35);
  border-left: 4px solid rgba(190,0,0,.9);
  padding: 6px 10px;
  border-radius: 10px;
  font-family: Georgia, serif;
  font-weight: 700;
  color: #b00000;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
  line-height: 1.05;
  white-space: nowrap;
}

/* =========================
   34 ans au-dessus / 19 ans en-dessous
   ========================= */
.vt__years{
  position: absolute;
  left: 12px;
  transform: translateY(-50%);
  font-family: Georgia, serif;
  font-weight: 900;
  color: rgba(0,0,0,.65);
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 999px;
  padding: 4px 10px;
  z-index: 6;
  pointer-events: none;
}

.vt__years--above{
  top: -18px; /* au-dessus de la ligne rouge */
}

.vt__years--below{
  top: 18px;  /* en-dessous de la ligne rouge */
}

/* petit repère “19 ans” (optionnel) */
.vt__insideNote{
  position:absolute;
  left: 12px;
  bottom: 10px;
  font-family: Georgia, serif;
  font-weight: 800;
  color: rgba(0,0,0,.65);
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 999px;
  padding: 4px 10px;
}

/* ===== Responsive ===== */
@media (max-width: 640px){
  .vt__row{
    grid-template-columns: 1fr;
  }
  .vt__dur{
    justify-content:flex-start;
    padding-right:0;
  }
  .vt__name{
    font-size: 18px;
  }
  .vt__block--nabouka .vt__eventLabel{
    white-space: normal;
    width: 170px;
    right: 6px;
  }

  /* repères plus courts sur mobile */
  .vt__title::after,
  .vt__note::before{
    width: 160px;
  }
}