:root {
  /* variables */
  /* https://radicalweb.design/ressources/css/plus/variables/ */
  --maxwidth: 60rem;
  /* variables pour fontes variables */
  /* https://radicalweb.design/ressources/typo/variables/ */
  --font-wght: 350;
  --font-wdth: 100;
}


/* ------------------------------------------------------------ body & reset */

body { 
  background: var(--backgroundcolor);
  color: var(--textcolor);
  line-height: 1.6;
  margin: 0;
  max-width: 100%;
  font-family: "Rubik";
  color:rgb(252, 202, 213);
  background-color: rgb(1, 63, 144);

}

*, *::before, *::after {
  /* dans le cas d’une fonte variable, on établit des variables (ici, graisse et chasse) pour tous les éléments: */
  font-variation-settings: "wght" var(--font-wght, 400), "wdth" var(--font-wdth, 112.5);
}


/* ------------------------------------------------------------ thème clair & sombre */
/* Thème clair */
:root,
:root[data-force-color-mode="light"] {
  color-scheme: light dark;
  --textcolor:rgb(252, 202, 213);
  --bordercolor: #58e6ff;
  --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: #1da840;
    --backgroundcolor: rgb(33, 33, 33);
    --font-wght: 280;
  }
}

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


/* ------------------------------------------------------------ liens */
a {
  color: currentColor;
}
















/* ------------------------------------------------------------ typographie */






.article h1 {
  font-size: 2.5rem;
  --font-wght: 400;
  --font-wdth: 90;
  line-height: 1.2;
  text-wrap: balance;
  text-transform: uppercase;
  
}
h2, h3 {
  font-size: 1.75rem;
  --font-wght: 400;
  line-height: 1.3;
  text-wrap: balance;
}
p {
  margin-bottom: 1.6em;
}
ul {
  padding: 0;
  list-style-type: none;
}
ul li {
  
}
ul li::before {
  content: "— ";
}
/* ------------------------------------------------------------ navigation */
.top-nav { 
  border-bottom: 1px solid ;
  padding: 0.5em;
  text-transform: uppercase;
  position: sticky;
  top: 0;
  background-color:rgb(1, 63, 144);
}
.top-nav a {
  text-decoration: none;
  letter-spacing: .05em;
}

/* ------------------------------------------------------------ main */
main { 

}
main > * {
  padding: 1rem;
}

/* ------------------------------------------------------------ header */
header { 
  border-bottom: 1px solid var(--bordercolor);
  padding: 4rem 1rem 1rem;
}
header h1 { }
header h1 strong { 
  /* display: block;
  font-weight: inherit; */
}


.keywords { }
.keywords a { }

/* ------------------------------------------------------------ texte */
.epigraphe { }

.text { 
  color: var(--textcolor);
  display: flex;
  flex-direction: column;
  gap: 1.6em;
  padding: 1.6em 1em;
}
.text p { 
  margin: 0;
}
.epigraphe,
.text .quote { 
  /* color: var(--accentcolor); */
  --font-wght: 90;
  max-width: max(75%, 23em);
  align-self: flex-end;
}

/* > * sélectionne tous les enfants directs des éléments */
.text,
.readmore > *,
.biography > *,
.footnotes > * {
  /* `margin-inline` cible les marges droite et gauche, en système d’écriture horizontal */
  margin-inline: auto;
  max-width: var(--maxwidth);
}
/* ------------------------------------------------------------ tableau ! (pages/03-mal-developpement.html) */
table {
  border-collapse: collapse;
}
th { --font-wght: 600}
td, th {
  padding-block: .5em;
  vertical-align: top;  
  text-align: left;
  border-bottom: 1px solid var(--bordercolor);
}
td:not(:first-child),
th:not(:first-child) { padding-left: .5em; border-left: 1px solid var(--bordercolor);}
td:not(:last-child),
th:not(:last-child) { padding-right: .5em; border-right: 1px solid var(--bordercolor);}
tbody tr:last-child td, tbody tr:last-child th {
  border-bottom: none;
}
/* ------------------------------------------------------------ texte + */
.readmore {
  border-top: 1px solid var(--bordercolor);
}
.readmore,
.biography,
.footnotes { 
  border-bottom: 1px solid var(--bordercolor);
}

.footnotes ol { 
  padding: 0;
  list-style-position: inside;
}

.footnotes li {
  text-indent: -2em;
  padding-left: 2em;
}

/* ------------------------------------------------------------ footer */
#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);
}


nav {
  font-family: "Squatina";
  font-size: 1.3em;
  letter-spacing: 2px;
  margin: 1em;
 }

main {
  hyphens:auto
 }










/*MOI___________________________________________________*/


 .accueil{
  background-color: rgb(252, 202, 213);
  color: rgb(1, 63, 144);
  
}

 .GrosTitre{
  font-family: "XCiero_Affigere" ;
  font-size: 4.5em;
  line-height: 1em;
  letter-spacing: 2px;
  color:  rgb(252, 202, 213);;
  background-color: rgb(1, 63, 144);
  padding: 9%;
  white-space: pre-line;

 }

 /*sont pas visible je sais pas pourquoi*/
 .authorsaccueil{
  margin: 3em;
 font-size: 1.5em;
font-family: "Martian Mono";
letter-spacing: 1px;
  color:  rgb(252, 202, 213);
  margin-top: 4em;
}

.avantpropos{
  margin: 3em;
 font-size: 2em;
font-family: "Squatina";
letter-spacing: 1px;
}

.Préface{
  margin: 3em;
  font-size: 2em;
  font-family: "Squatina";
  letter-spacing: 1px;
}

.Intro{
  margin: 3em;
  font-size: 2em;
  font-family: "Squatina";
  letter-spacing: 1px;

}


li{
  text-underline-offset: 0.27em;
  text-decoration-color: color-mix(in srgb, currentColor, transparent 0%);
  
}

header { 

}



  

.title{
  background-color:rgb(252, 202, 213);
  color: rgb(1, 63, 144);
  font-family: "XCiero_Affigere" ;
  font-size: 4em;
  line-height: 1em;
  letter-spacing: 2px;
  border-bottom: 1px solid ;
  padding: 0.75em 0.5em 0.5em 0.5em;
  text-transform: uppercase;
  position: sticky;
  top: 0;
  margin-top: 0;

  /* je comprend pas : permet de mettre le padding sans marge Mais ca enleve le sticky :') 

  margin: 0 -5vw;
  padding: 0.5em 5vw;*/

}



.authors {
  color: rgb(245, 215, 255);
  font-size: 1.5em;
  text-align: right;
font-family: "Martian Mono";
margin-top: 1em;
margin-right: 0.5em;
letter-spacing: .02em

}
 
.author p + p ::before {

  content: '';
  display: block;
  position: relative; /* la position relative permet de décaler l’élément vers le haut */
  top: 0.2em;
  height: 2.50em;
  width: 2.50em;
  float: left; 
  margin: 0 .75em 0 0;
  background: #cd58ff;
}


.keywords { 
  text-align: center;
  font-family: "Rubik";
  font-weight: 120;
  margin: 2em;
}

.keywords a {
  text-underline-offset: 0.17em;
  text-decoration-color: color-mix(in srgb, currentColor, transparent 70%);
}

.epigraphe { }


.text {
  font-size: 1.2em;
  font-family: "Rubik";
  line-height: 1.3em;
  line-height: 1.5;
  font-weight: 200em;
  margin: 0.5em;
  color: rgb(252, 202, 213);
  max-width: 38em;
  margin: auto;

 }


.text p { 
 
 padding-top:2em;
  margin: 0.4em;
} 

.text p::before {
    content: '';
    display: block;
    position: relative; /* la position relative permet de décaler l’élément vers le haut */
    top: 0.5em;
    height: 0.50em;
    width: 2.50em;
    float: left; 
    margin: 0 .75em 0 0;
    background: #58e6ff;
}



.text .quote { 
  margin: 1em;
  font-style: italic;
  font-weight: 100;
  font-size: 1em;
  padding-top: 1em;
}

h2{
  font-family: "XCiero_Affigere";
  font-style: normal;
  font-size: 2.2em;
  padding-top: 2em;
  letter-spacing: 2px;
 color: rgb(1, 63, 144);
  background-color:rgb(252, 202, 213);
padding: 1em;
}


h3{
  font-family: "XCiero_Affigere";
  font-style: normal;
  font-size: 2em;
  padding-top: 2em;
  letter-spacing: 2px;
  color: rgb(1, 63, 144);
  background-color:rgb(252, 202, 213);
  padding: 9%;

  margin: 0 -1rem;
  padding: 0.5em 6vw;

}


.readmore {
  font-family: "Rubik";
  font-weight: 120;
  font-style: italic;
  margin: 2em
 }


.biography {
  font-family: "Rubik";
  --font-wght: 500;
  padding-top: 1.5em;


 }



 /*
font-family: "Rubik";
 font-weight: 120;
 font-style: italic;
margin-left: 10em;
 padding-top: 2em;
 */


.footnotes { 
  font-family: "Rubik";
  font-weight: 120;
  font-size: 0.9em;



}


.hidden{
  font-size: 1em;
  font-family: "Rubik";
  line-height: 1.8em;
  font-weight: 200em;
  margin: 0.5em;
  color: rgb(252, 202, 213);
  max-width: 38em;
  margin: auto;

}


.intro{
  font-size: 1em;
  font-family: "Rubik";
  line-height: 1.3em;
  font-weight: 200em;
  margin: 0.5em;
  color: rgb(252, 202, 213);
  max-width: 38em;
  margin: auto;
  padding-bottom: 2em;
}

.preface{
  font-size: 1em;
  font-family: "Rubik";
  line-height: 1.3em;
 text-align: left;
  font-weight: 200em;
  margin: 0.5em;
  color: rgb(252, 202, 213);
  max-width: 38em;

}

.wildproject{
  font-size: 0.8em;
  font-family: "Rubik";
  line-height: 1.3em;
text-align: left;
  font-weight: 200em;
  margin: 0.5em;
  color: rgb(252, 202, 213);
  max-width: 38em;

}

.outro{
  font-size: 1em;
  font-family: "Rubik";
  line-height: 2em;
text-align: left;
  font-weight: 200em;
  margin: 0.5em;
  color: rgb(252, 202, 213);
  max-width: 38em;
   }

.tags-link{
  font-size: 0.8em;
  font-family: "Rubik";
  line-height: 1.3em;
text-align: left;
  font-weight: 200em;
  margin: 0.5em;
  color: rgb(252, 202, 213);
  max-width: 38em;
}


strong {
  font-family: "Rubik";
  line-height: 1.8em;
  --font-wght: 500;
  letter-spacing: 0.1em;


}

header h1 {
  font-family: "XCiero_Affigere" ;
  font-size: 4.5em;
  line-height: 1em;
  letter-spacing: 2px;
  background-color:rgb(252, 202, 213);
  padding: 9%;
  color: rgb(1, 63, 144);

  margin: 0 -5vw;
  padding: 0.5em 5vw;
 }



 #subtitle {
  font-family: "XCiero_Affigere" ;
  font-size: 4.5em;
  line-height: 1em;
  letter-spacing: 2px;
  background-color:rgb(252, 202, 213);
  color: rgb(1, 63, 144);
   /*position: sticky;*/
  position: fixed;

  margin: 0 -5vw;
  padding: 0.5em 100vw ;
  /*  padding: 0.5em 10vw 0.5em 500vw ;*/                     
  overflow: hidden;
  max-width: 100%;
 }



 .coulisseur {
  font-size: 4vw;
  animation: coulisse 30s linear infinite;
  white-space: nowrap;
}
.coulisseur::after {
  content: attr(data-text);
}
.coulisseur::after, 
.coulisseur span { 
  display: inline-block;
  padding-right: 2rem; }

@keyframes coulisse {
  100% { transform: translateX(-50%); }
}



/*
.coulisseur {
  font-size: 10vw;
  display: flex;             
  white-space: nowrap;
}

.coulisseur span {
  display: inline-block;
  padding-right: 2rem;      
  animation: defile 30s linear infinite;
}

@keyframes defile {
  100% { transform: translateX(-300%); }
}


/*