body {
        background-color: rgb(177, 169, 169);
        font-family: "Lora";
        color: rgb(50, 49, 49);
        margin: 0;
        padding: 40px;
        line-height: 1.45;
        font-size: 1.25em;/* taille adapter a l"utilisateur*/
      }


      h1, h2 {
line-height: 1.1;
font-family: "Ductus";
      }

      main {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 40px;
      }

      .text {
        display: flex;
        flex-direction: column;
        gap: 40px;
        width: 100%;
        max-width: 85ch; 
       
      }
      

      .text p  {
  color: rgb(0, 0, 0);
  padding: 20px;
  border-radius: 10px;
  width: 45%;
  transform: rotate(35deg);
  
  display: -webkit-box;
  -webkit-line-clamp: 10;   /* Limite à 10 lignes */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.readmore {
font-size: 15px;
 color: rgb(0, 0, 0);
  padding: 20px;
  border-radius: 10px;
  width: 45%;
  transform: rotate(-35deg);
  
  display: -webkit-box;
  -webkit-line-clamp: 10;   /* Limite à 10 lignes */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

      /* Alternance gauche / droite */
      .text p:nth-child(odd) {
        align-self: flex-start; /* gauche */
      }

      .text p:nth-child(even) {
        align-self: flex-end; /* droite */
      }

      /* Responsive : sur téléphone, les blocs gardent leur position mais se réduisent */
      @media (max-width: 700px) {
        .text p {
          width: 70%;
          font-size: 0.9em;
          padding: 15px;
        }
      }

      @media (max-width: 450px) {
        .text p {
          width: 90%;
          font-size: 0.85em;
        }
      }
a {
  color: currentColor;
}
.authors{
  font-weight: 600;
  font-size: 20px;
  font-family: "Ductus";
  
}

.biography{
  font-size: 15px;
  font-size: 15px;
 color: rgb(0, 0, 0);
  padding: 20px;
  border-radius: 10px;
  width: 45%;
  transform: rotate(-45deg);
  
  display: -webkit-box;
  -webkit-line-clamp: 10;   
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.footnotes{
  font-size: 15px;
  font-size: 15px;
 color: rgb(0, 0, 0);
  padding: 20px;
  border-radius: 10px;
  width: 45%;
  transform: rotate(-15deg);
  
  display: -webkit-box;
  -webkit-line-clamp: 10;   
  -webkit-box-orient: vertical;
  overflow: hidden;
}
nav {
  font-family: "Ductus";
 }
.hashtags { 

 }
main { }

header {
 
 }
header h1 { }

.keywords { 
  font-family: "Ductus";
}
.keywords a { }

.epigraphe { }
.text .quote { }




/* Alternance gauche / droite comme les textes */
.text img:nth-child(odd) {
  align-self: flex-start;
  transform: rotate(15deg);
}

.text img:nth-child(even) {
  align-self: flex-end;
  transform: rotate(-35deg);
}

/* Ajuste la taille et le placement sur mobile */
@media (max-width: 700px) {
  .text img {
    width: 70%;
  }
}
@media (max-width: 450px) {
  .text img {
    width: 90%;
  }
}
.text img {
  width: 65%;
  border-radius: 10px;
  display: block;
}

/*PANNEAU D'IMAGE RANDOM */
.monimage {
  margin: 2em -1em;
  width: 100%;
  aspect-ratio: 16/4;
  width: calc(100% + 2em);
}
.monimage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}   

/* ------------------------------------------------------------ thème clair & sombre */
/* Thème clair */
:root,
:root[data-force-color-mode="light"] {
  color-scheme: light dark;
  --textcolor: rgb(33, 33, 33);
  --bordercolor: rgb(99, 99, 99);
  --accentcolor: #1da840;
  --backgroundcolor: white;
}


/* Thème sombre : obligation de dupliquer dans @media les règles ci-dessus */
@media (prefers-color-scheme: dark) {
  :root {
    --textcolor: rgb(209, 209, 209);
    --bordercolor: rgb(99, 99, 99);
    --accentcolor: #8f8f8f;
    --backgroundcolor: rgb(33, 33, 33);
    --font-wght: 280;
  }
}

/* Thème sombre */
:root[data-force-color-mode="dark"] {
  --textcolor: rgb(209, 209, 209);
  --bordercolor: rgb(99, 99, 99);
  --accentcolor:#8f8f8f;
  --backgroundcolor: rgb(33, 33, 33);
  --font-wght: 280;
}