html {
--texte-color: rgb(22, 129, 143);
--back-color: rgb(255, 255, 255);
}
body{
  background: var(--back-color);
  color: var(--texte-color);
  margin: 0;
   font-family: "Labrada";
}

a {
  color: currentColor;
  padding: 0.04em;
}

.top-nav { 
font-size: 21.vw;
margin: 0em;
  font-family: "Blackout";
background-color: white;
position: sticky;
top: 0;
}
.top-nav :hover {
  transform: scale(1.1);
  background-color: var(--topnav-hover-color);
  color: white;
}

@media (orientation: landscape) {
  .top-nav {
    position: fixed;
    transform: rotate(-90deg) translateX(-100%);
    transform-origin: 0 0;
    font-size: 21vh;
    width: 100vh;
    text-align: center;
    box-sizing: border-box;
    left: 0;
  }
  body {
    margin-left: 22vh;
  }
}

.articles-prev-next{
  text-align: center;
}

header {
  padding: 2em;
  background-color: rgb(22, 129, 143);
   color:white;
   text-align: center;
 }
 
header h1 {
  font-weight: 900; 
   font-size: 2em;
 }

.authors { 
    font-weight: 300;
}


.keywords a { 
  display: inline-block;
  color:rgb(22, 129, 143);
  font-size: 1em;
  background-color: rgb(255, 255, 255) ;
  padding: 0.4em;
  border-radius: 0.5em;
  text-decoration: none;
}


.keywords a:hover {
  transform: scale(1.05);
}


.text { 
   font-family: "Labrada";
  font-size: 1.1em;
  font-weight: 400;
  max-width: 65%;
  line-height: 1.45;
   margin: 2em;
}  


.text .quote { 
    font-style: italic;
     font-weight: 300;
}

.readmore { 
    padding: 4em;
  background-color: rgb(133, 160, 174);
   color:white;
}

.biography {
  padding: 2em;
    color:white;
    background-color:rgb(22, 129, 143);
 }

.footnotes { 
  padding: 2em;
    color:white;
    background-color: rgb(22, 129, 143);
}

/* === BARRE DE LECTURE === */
.scroll-progress {
  position: fixed;
  right: 1em;
  width: 0.8em;
  background: rgba(0,0,0,0.1);
  border-radius: 3px;
  z-index: 9999;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  top: 1em;
  height: calc(100vh - 2em);
}

@media (orientation: portrait) {
  
  .scroll-progress {
    height: calc(100vh - 2em - 20vw)  ;
    top: auto;
    bottom: 1em;
  }
}

/* Remplissage interne de la barre */
.scroll-progress-fill {
  position: absolute;
  top: 0;       /* Remplissage commence du haut */
  bottom: auto; /* Désactive le bottom */
  width: 100%;
   background: linear-gradient(180deg,rgb(22, 129, 143), rgb(133, 160, 174) );
  height: 0%;
  border-radius: 3px;
  transition: height 0.15s linear;
}

/* Curseur (triangle indicateur) */
.scroll-indicator {
  position: fixed;
  right: 1.5em;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 10px solid  rgb(22, 129, 143);
  transform: translateY(-50%);
  z-index: 10000;
  transition: top 0.1s linear;
}

/* Pourcentage en bas */
.scroll-percent {
  position: fixed;
  bottom:2em;
  right: 3em;
  color: rgb(22, 129, 143);
  font-weight: bold;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  z-index: 10000;
  font-family: sans-serif;
}








#footer{
  display: flex;
  flex-direction: column;
}
#footer > * {
  padding: 1.6em 1em;
}

.articles-prev-next {
  display: flex;
  gap: 1em;
  justify-content: space-between;
  border-bottom: 1px solid var(--bordercolor);
}











#gallery {
  position: absolute;
  top: 0;
  right: 0;
  width: 30%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
}

.random-img {
  width: 100%;
  height: auto;
}




@media (max-width: 768px) {
  #gallery {
    position: static;
    width: 100%;
    height: auto;
    flex-direction: row;
  }

  body {
    margin-right: 0;
  }

  .random-img {
    width: 25%;
  }
}










:root {
  --back-color: #ffffff;
  --text-color: #16818f;
    --text-color2: #ffffff;
  --accent-color: #16818f;
  --readmore-bg: #85a0ae;
  --footer-bg: #16818f;
    --header-bg: #16818f;       /* couleur header claire par défaut */
  --topnav-color: #16818f;     /* couleur texte top-nav claire par défaut */
   --topnav-hover-color: #16818f; /* hover en mode clair */
}

html[data-theme="dark"] {
  --back-color: #1e1e1e;
  --text-color: #c3d8e1;
  --text-color2: #c3d8e1;
  --accent-color: #0a454d;
  --readmore-bg: #37474f;
  --footer-bg: #0a454d;
   --header-bg: #0a454d;      /* header rouge en dark mode */
  --topnav-color: #0a454d;     /* texte top-nav rouge en dark mode */
    --topnav-hover-color: #0a454d;  /* couleur hover différente en dark mode */
}

/* Appliquer les variables */
.keywords a { 
color: var(--text-color);
   background-color: var(--back-color);
}

header {
  background-color: var(--header-bg);
}

.top-nav a {
  color: var(--topnav-color);
  background-color: var(--back-color)
}
.top-nav {
  background-color: var(--back-color)
}

body {
  background-color: var(--back-color);
  color: var(--text-color);
}

a {
  color: var(--accent-color);
}

.readmore {
  background-color: var(--readmore-bg);
 color: var(--text-color2);
}

.biography,.header, .footnotes {
  background-color: var(--footer-bg);
color: var(--text-color2);
}

body, .readmore, .biography, .footnotes, a {
  transition: background-color 0.3s ease, color 0.3s ease;
}






/* ===============================
   BOUTON DARK MODE — ÉDITORIAL
================================ */

/* Cacher la checkbox */
#toggle-darkmode {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Label = bouton */
#toggle-darkmode + label {
  --size: 46px;

  width: var(--size);
  height: var(--size);
  border-radius: 50%;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  border: 1.5px solid var(--accent-color);
  color: var(--accent-color);

  cursor: pointer;
  position: relative;
  overflow: hidden;

  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.25s ease;
}

/* Texte caché mais accessible */
#toggle-darkmode + label span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* Icône */
#toggle-darkmode + label::before {
  content: "☾";
  font-size: 1.2rem;
  line-height: 1;
  transition:
    transform 0.4s ease,
    opacity 0.3s ease,
    content 0.3s ease;
}

/* Hover — respiration */
#toggle-darkmode + label:hover {
  transform: scale(1.08);
  box-shadow: 0 0 0 6px rgba(0,0,0,0.04);
}

/* ===============================
   MODE SOMBRE ACTIF
================================ */

#toggle-darkmode:checked + label {
  border-color: var(--accent-color);
  box-shadow:
    0 0 12px rgba(143, 188, 212, 0.35),
    inset 0 0 0 1px rgba(255,255,255,0.1);
}

#toggle-darkmode:checked + label::before {
  content: "◐";
  transform: rotate(180deg);
}

/* Hover en dark */
html[data-force-color-mode="dark"]
#toggle-darkmode + label:hover {
  box-shadow: 0 0 0 6px rgba(255,255,255,0.05);
}












/* Conteneur texte + galerie */
.text-and-gallery {
  display: flex;
  gap: 1em;          /* espace entre texte et images */
  align-items: flex-start;
}

/* Texte */
.text-and-gallery .text {
  flex: 1;            /* prend tout l'espace restant */
}

/* Galerie à droite */
.text-and-gallery #gallery {
  flex: 0 0 30%;      /* largeur de la colonne */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* répartir les images sur toute la hauteur du texte */
  position: relative; /* reste dans le flux */
}

/* Images */
.text-and-gallery #gallery img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Responsive mobile : images par groupe de deux */
@media (max-width: 768px) {
  .text-and-gallery {
    flex-direction: column;  /* texte au-dessus, galerie en dessous */
  }

  .text-and-gallery #gallery {
    flex: none;               /* pas de largeur fixe */
    height: auto !important;  /* hauteur automatique */
    flex-direction: row;
    flex-wrap: wrap;          /* permet de passer à la ligne */
    justify-content: flex-start;
    gap: 10px;                /* petit espace entre images */
  }

  .text-and-gallery #gallery img {
    width: 48%;               /* 2 images par ligne avec petit gap */
    height: auto;
    margin-bottom: 10px;      /* espace vertical entre lignes */
  }
}







.text-and-gallery #gallery {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* maintenant ça fonctionne */
  gap: 0; /* inutile, space-between gère l'espacement */
}






/* === Masquer les éléments non nécessaires à l'impression === */
@media print {
  
}