:root {
  /* variables */
  /* https://radicalweb.design/ressources/css/plus/variables/ */
  --maxwidth: 80ch;
  /* variables pour fontes variables */
  /* https://radicalweb.design/ressources/typo/variables/ */
  --font-wght: 350;
  --font-wdth: 100;
  --color:  #967f94;
  --background-color:#0c2251;
  --vert: #86967f;
  --basesize: clamp(0.875rem, 1.5vw, 1.15rem);
  --basesize: clamp(10px, 1.5vw, 50px)
}

html {
  
}


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

body { 
  background: var(--backgroundcolor);
  color: var(--textcolor);
  font-family: 'Panamera';
  color: var(--color);
  background-color:var(--background-color);
  line-height: 1.45;
  letter-spacing: 0.05em;
  
  /*font-family: "ComputerModern Typewriter", ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;  */
}

*, *::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:  #0c2251;
  --background-color:#967f94; 
   --vert: #3d4d37;
}


/* Thème sombre : obligation de dupliquer dans @media les règles ci-dessus */
@media (prefers-color-scheme: dark) {
  :root {
  --color:  #967f94;
  --background-color:#0c2251;
    --font-wght: 280;
  --vert: #86967f;
  }
}

/* Thème sombre */
:root[data-force-color-mode="dark"] {
  --color:  #967f94;
  --background-color:#0c2251;
  --vert: #86967f;
  --font-wght: 280;
}


/* ------------------------------------------------------------ liens */
a {
  color: currentColor;
  text-decoration: none;
  color: var(--vert);
}

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

nav { 
  font-weight: bold;
  text-align:center;
  letter-spacing: 4em;
  font-size: 0.8em;
}

h1{
  font-family: 'Panchang-Bold';
  font-size: 1.5em;
  text-align: center;
  line-height: 1.5;
}

h1 strong {
  font-size: min(6rem, 12vw);
  text-align: center;
  display: block;
}

h1 .subtitle{
  font-size: 0.5em;

}

@media (min-width:800px) {
  h1 {
    font-size: 2em;
    margin: 40px;
    line-height: 1.5;
  }
}

header { }
.article h1 {
  font-family: 'Panchang-Bold';
  text-align: center;
  position: sticky;
  top: 0;
  background-color: var(--background-color);
    max-width: none;
 }

h2, h3 {
  font-family: 'Panchang-Bold';
  font-size: 1.5em;
  text-align: center;
  line-height: 1.5;
}

.preface{
  text-align: left;
  font-size: 0.8em;
  text-align: right;
  margin-right: 60px;
}

.declaration{
    font-weight: 200;
  color: var(--vert);
  max-width: 60ch;
  margin: auto;
  margin-bottom: 40px;
}

p {
  margin-bottom: 1.6em;
}
ul {
  padding: 0;
  list-style-type: none;
}
ul li {
  
}
ul li::before {
  content: "— ";
}
/* ------------------------------------------------------------ navigation */


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

}
main > * {
  padding: 1rem;
}

/* ------------------------------------------------------------ header */

.authors { 

  /* font-size: 20px; */
  font-size: 0.8em;
  text-align: right;
  margin-right: 60px;
}

.keywords { 
  max-width: 80ch;
  margin: auto;  
  font-size: 0.85em;
  font-family: "Hubot Sans";
  text-align: center;
}

.keywords a {
  font-weight: bold;
 }

.keywords a { }

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

.text {
  font-size: var(--basesize);
  max-width: 80ch;
  margin: auto;
 }

.text p {
  margin-bottom: 40px;
  
 }

.epigraphe,

.text .quote {
  font-weight: 200;
  color: var(--vert);
  max-width: 60ch;
  margin: auto;
  margin-bottom: 40px;
 }

/* > * sélectionne tous les enfants directs des éléments */
.text,
.readmore > *,
.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 {
  font-size: 15px;
  max-width: 80ch;
  margin: auto;
  margin-bottom: 60px;
 }

 .readmore h3{
  font-size: 30px;
  max-width: 80ch;
  margin: auto;
  font-family: 'Panchang-Bold';
  font-size: 25px;
  text-align: center;
  margin-bottom: 40px;
 }

.readmore p{
  font-size: clamp(0.775rem, 1vw, 1.25rem);
  max-width: 60ch;
  padding: 0px 3% 0px 3%;
  text-align: left;
  margin-left: right;
 }

.biography {
  margin-bottom: 40px;
  color: var(--vert);
  font-weight: bold;
  font-size: clamp(0.775rem, 1vw, 1.25rem);
  max-width: 60ch;
  padding: 0px 3% 0px 3%;
  text-align: right;
  margin-left: 30em;
}

.text p + p::before {
  content: '●';
  display: block;
  text-align: center;
  font-size: 1em;
  color: var(--textcolor);
  margin-bottom: 2em;
}

.footnotes {
  font-size: clamp(0.775rem, 1vw, 1.25rem);
  max-width: 80ch;
  margin: auto;
}


.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);
}

.subtitle {
  font-family: 'Panchang-Bold';
  font-size: 1em;
  text-align: center;
  line-height: 1.5;
    color: var(--vert);
}

.h2 {
  font-family: 'Panchang-Bold';
  font-size: 1em;
  text-align: center;
  line-height: 1.5;
}

.theme input, 
.theme span {
  display: none;
}
.theme label {
 position: relative;
 top: .25em;
}
.theme label::before {
  content: "◐";
  display: block;
  width: 1.2em;
  height: 1.2em;
  font-size: 2em;
}


@media screen and (prefers-color-scheme: dark) {
  .theme label::before {content: "◑";}
}
html[data-force-color-mode="dark"] {
  .theme label::before {content: "◑";}
  
}