/* ==========================================================================
   Memoires du Colonel Jacques JAUBERT
   Feuille de style unique. Aucune dependance externe : le site fonctionne
   hors ligne, sans internet, sans police a telecharger.
   ========================================================================== */

:root{
  --papier:#faf8f5;
  --papier-2:#f2ede5;
  --encre:#1b1917;
  --encre-2:#4a453e;
  --discret:#7a736a;
  --filet:#ded6ca;
  --accent:#8a2f1e;
  --accent-clair:#b5573f;
  --mesure:34rem;
  --serif: Iowan Old Style, Palatino Linotype, Palatino, Georgia, Cambria, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark){
  :root{
    --papier:#161513; --papier-2:#1f1d1a; --encre:#eae5dc; --encre-2:#c3bcb1;
    --discret:#948c81; --filet:#33302b; --accent:#d4715a; --accent-clair:#e08a72;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papier); color:var(--encre);
  font-family:var(--serif); font-size:1.0625rem; line-height:1.72;
  text-rendering:optimizeLegibility;
}

a{color:var(--accent); text-underline-offset:.18em; text-decoration-thickness:.06em}
a:hover{color:var(--accent-clair)}
img{max-width:100%; height:auto}

.saut-contenu{position:absolute; left:-9999px}
.saut-contenu:focus{
  left:1rem; top:1rem; z-index:99; background:var(--accent); color:#fff;
  padding:.6rem 1rem; border-radius:.3rem; font-family:var(--sans)
}

/* ------------------------------------------------------------- en-tete */
.barre{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--papier) 92%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--filet);
}
.barre-i{
  max-width:72rem; margin:0 auto; padding:.7rem 1.25rem;
  display:flex; align-items:center; gap:1rem;
  font-family:var(--sans); font-size:.8125rem;
}
.barre a{text-decoration:none; color:var(--encre-2)}
.barre a:hover{color:var(--accent)}
.barre-titre{
  font-weight:600; letter-spacing:.02em; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.barre-chap{color:var(--discret); margin-left:auto; white-space:nowrap}
@media (max-width:34rem){ .barre-chap{display:none} }

.jauge{height:2px; background:transparent}
.jauge span{display:block; height:100%; width:0; background:var(--accent)}

/* ------------------------------------------------------------- couverture */
.couverture{
  max-width:52rem; margin:0 auto; padding:5rem 1.5rem 3rem; text-align:center;
}
.couverture .sur{
  font-family:var(--sans); font-size:.75rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--discret); margin:0 0 1.4rem;
}
.couverture h1{
  font-size:clamp(2.4rem,7vw,4rem); line-height:1.06; margin:0;
  font-weight:400; letter-spacing:-.015em;
}
.couverture .auteur{
  margin:1.6rem 0 0; font-size:1.15rem; color:var(--encre-2); font-style:italic;
}
.couverture .periode{
  margin:.4rem 0 0; font-family:var(--sans); font-size:.8125rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--discret);
}
.ornement{
  width:4rem; height:1px; background:var(--filet); margin:2.6rem auto; border:0;
}
.couverture .chapo{
  max-width:32rem; margin:0 auto; color:var(--encre-2); font-size:1.05rem;
}

/* ------------------------------------------------------------- sommaire */
.sommaire{max-width:46rem; margin:0 auto; padding:1rem 1.5rem 5rem}
.sommaire h2{
  font-family:var(--sans); font-size:.75rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--discret); font-weight:600;
  margin:3rem 0 1.2rem; padding-bottom:.7rem; border-bottom:1px solid var(--filet);
}
.entree{
  display:flex; gap:1.25rem; align-items:baseline;
  padding:1.05rem .5rem; border-bottom:1px solid var(--filet);
  text-decoration:none; color:inherit; transition:background .15s, padding .15s;
}
.entree:hover{background:var(--papier-2); padding-left:.9rem}
.entree .num{
  font-family:var(--sans); font-size:.75rem; font-variant-numeric:tabular-nums;
  color:var(--accent); min-width:1.9rem; font-weight:600; letter-spacing:.06em;
}
.entree .lib{flex:1; font-size:1.12rem}
.entree .meta{
  font-family:var(--sans); font-size:.75rem; color:var(--discret); white-space:nowrap;
}
.entree:hover .lib{color:var(--accent)}

/* ------------------------------------------------------------- chapitre */
.chapitre{max-width:var(--mesure); margin:0 auto; padding:3.5rem 1.5rem 2rem}
.chapitre-tete{margin:0 0 3rem; text-align:center}
.chapitre-tete .num{
  font-family:var(--sans); font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--accent); margin:0 0 .9rem;
}
.chapitre-tete h1{
  font-size:clamp(1.9rem,5.5vw,2.7rem); line-height:1.12; margin:0;
  font-weight:400; letter-spacing:-.012em;
}
.chapitre-tete .date{
  margin:.9rem 0 0; font-family:var(--sans); font-size:.8125rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--discret);
}

.texte p{margin:0 0 1.35em; hyphens:auto}
.texte > p:first-of-type::first-letter{
  float:left; font-size:3.4em; line-height:.82; padding:.06em .09em 0 0;
  color:var(--accent); font-weight:400;
}
.texte figure{margin:2.6rem 0; text-align:center}
.texte figure img{
  border-radius:2px; box-shadow:0 1px 2px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.10);
}
.texte figcaption{
  margin-top:.85rem; font-family:var(--sans); font-size:.8rem; line-height:1.5;
  color:var(--discret); font-style:normal;
}
/* ------------------------------------------------------------- cartes */
/* Les cartes sont de grande taille et annotees a la main : elles doivent
   pouvoir depasser la largeur du texte et s'ouvrir en taille reelle. */
.large{max-width:84rem; margin:0 auto; padding:3.5rem 1.5rem 2rem}

.texte figure.carte, .carte-bloc{margin:2.6rem 0}
/* La largeur est pilotee par .carte-cadre et non par .texte figure.carte,
   sinon la seconde regle, plus specifique, empeche le passage en taille
   reelle. Ne pas remettre width sur un selecteur plus long. */
.carte-cadre{overflow:auto; -webkit-overflow-scrolling:touch}
.carte-cadre img{
  display:block; width:100%; height:auto; cursor:zoom-in;
  border:1px solid var(--filet); background:#fff;
  box-shadow:none; border-radius:0;
}
.texte figure.carte img{box-shadow:none; border-radius:0}
.carte-cadre.zoom{cursor:grab; max-height:80vh}
.carte-cadre.zoom img{width:auto; max-width:none; cursor:zoom-out}
.carte-outils{
  display:flex; gap:1rem; justify-content:center; align-items:center;
  margin-top:.9rem; font-family:var(--sans); font-size:.8rem;
}
.carte-outils button{
  font:inherit; color:var(--encre); background:none; cursor:pointer;
  border:1px solid var(--filet); border-radius:.3rem; padding:.45rem .9rem;
}
.carte-outils button:hover{border-color:var(--accent); color:var(--accent)}

/* ------------------------------------------------------------- pied */
.pied-chap{
  max-width:var(--mesure); margin:0 auto; padding:2rem 1.5rem 5rem;
  border-top:1px solid var(--filet);
}
.nav-chap{display:flex; gap:1rem; font-family:var(--sans); font-size:.85rem}
.nav-chap a{
  flex:1; text-decoration:none; padding:1rem 1.1rem; border:1px solid var(--filet);
  border-radius:.35rem; color:var(--encre); transition:border-color .15s, background .15s;
}
.nav-chap a:hover{border-color:var(--accent); background:var(--papier-2)}
.nav-chap .sens{display:block; font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--discret); margin-bottom:.3rem}
.nav-chap .droite{text-align:right}

.pied{
  border-top:1px solid var(--filet); margin-top:4rem;
  padding:2.5rem 1.5rem 3.5rem; text-align:center;
  font-family:var(--sans); font-size:.78rem; color:var(--discret); line-height:1.8;
}
.pied a{color:var(--discret)}

/* ------------------------------------------------------------- integrale */
.integrale{max-width:var(--mesure); margin:0 auto; padding:3rem 1.5rem}
.integrale h2{
  font-size:1.8rem; font-weight:400; margin:4.5rem 0 2rem; text-align:center;
  padding-top:2.5rem; border-top:1px solid var(--filet);
}
.integrale h2:first-of-type{border-top:0; padding-top:0; margin-top:1rem}

/* ------------------------------------------------------------- impression */
@media print{
  :root{--papier:#fff; --encre:#000; --encre-2:#222; --discret:#555; --filet:#bbb; --accent:#000}
  .barre,.nav-chap,.saut-contenu,.jauge{display:none !important}
  body{font-size:11pt; line-height:1.5}
  .chapitre,.integrale{max-width:none; padding:0}
  .integrale h2{page-break-before:always}
  .texte figure{page-break-inside:avoid}
  a{color:#000; text-decoration:none}
}