:root {
  --beigecolor: #9a3412;  
  --briquecolor: #ffedd5;
}

body { 
  font-family: "Faune";
  background-color: var(--briquecolor);
  color: var(--beigecolor);
  /*margin: 2% 7%;*/
  margin: 0px;
  line-height: 1.45; 
  font-size: clamp (1.1rem, 2vw, 1.5em);
}

/* @media (prefers-color-scheme: dark) { 
  
}

@media (prefers-color-scheme: light) {
  :root {
    --beigecolor: #9a3412; 
    --briquecolor: #ffedd5;
  }
} */

@media screen and (prefers-color-scheme: dark) {
  :root {
    --beigecolor: #ffedd5; 
    --briquecolor: #9a3412;
    --color-t: #dadada;
    --color-b: #222224;
    --black: white
  }
}

html[data-dark="true"] {
  --beigecolor: #ffedd5;   
  --briquecolor: #9a3412; 
}

#toggle-mode {
  position: fixed;
  top: 20px;
  left: 20px;
  border: none;
  background: none;
  color: var(--beigecolor);
  font-size: 1.5em;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease, color 0.4s ease;
}

#toggle-mode:hover {
  opacity: 1;
}


h1, h2, h3 {
  line-height: 1.1; 
}

h1 {
  text-align: center ;
  font-size: 3.3em ;
  font-style: italic;
  padding: 20px;
}

h2 {
  font-size: 1.5 em;
  padding: 0px 0px 0px 10%;
}

strong {
  font-family: 'Source Serif 4 18pt';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

ul a {
  text-decoration: none;
}

span {
  font-family: 'Source Serif 4 18pt';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

a {
  color: currentColor; 
  /*text-decoration: none;*/
}

a:hover {
  color: var(--briquecolor);
  background-color: var(--beigecolor);
}

nav { 
  font-family: 'Source Serif 4 18pt';
  color: var(--briquecolor);
  background-color: var(--beigecolor);
  padding: 10px ;
  text-align: right;
  position: sticky;
  top:0;
  font-size: 1.4em;
}

nav a, nav a:visited, nav a:hover, nav a:active {
  text-decoration: none;
}

header {
  
 }

header h1 { 
  font-size: 2.2em;
  /* hyphens: auto; */
  text-align: center;
  font-family: 'Faune Display';
  font-style: italic;
  text-transform: uppercase;
  margin-bottom: 1em;
  margin-top: 60px;
 }

.authors {
  font-family: 'Faune Display';
  text-align: right;
  max-width: 150ch;
  padding: 10px 50px 20px;
 }

 p { 
  font-family: 'Source Serif 4 18pt';
  padding: 0px 9px;
 }
 
/* .text p {
  padding: 0 0 1em; /* la marge inférieure sera occupée par le filet 
  line-height: 1.5;
} 
.text p + p::before {
  content: '';
  display: block;
  position: relative; /* la position relative permet de décaler l’élément vers le haut 
  top: -.55em;
  height: .25em;
  width: 4em;
  background: var(--beigecolor);
} */

.text p + p::before {
  content: '✿ ✿ ✿';
  display: block;
  text-align: center;
  font-size: 1.4em;
  color: var(--beigecolor);
  margin-bottom: 0.5em;
}


.keywords { 
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  font-family: 'Source Serif 4 18pt';
  max-width: 85ch;
  padding: 0px 0px 0px 10%;
}

.keywords a {
  text-decoration: none;
}

.keywords a::before { 
  content: "#";
  text-decoration: none;
}

.epigraphe {
  font-family: 'Source Serif 4 18pt';
  max-width: 40ch;
  padding: 0px 0px 0px 10%;
  font-weight: 300;
  font-style: italic;
  font-display: swap;
  text-align: right;
}

.quote {
  font-family: 'Source Serif 4 18pt';
  max-width: 70ch;
  padding: 0px 0px 0px 10%;
  font-weight: 300;
  font-style: italic;
  font-display: swap;
  text-align: right;
}

.text { 
  max-width: 70ch;
  padding: 0px 0px 0px 15%;
}
@media (max-width: 640px) {
  .text { padding: 0 }
  .text { max-width: 90 ch;}
} 


@media (min-width: 640px) {
  body { font-size: 1.25em; }
  .text { max-width: 90 ch;}
} 

.text p { }
.text .quote { }

h3 {
  padding: 40px 0px 0px;
}

.readmore { 
  font-family: 'Source Serif 4 18pt';
  max-width: 70ch;
  padding: 0px 0px 0px 10%;
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  text-align: left;
}

.biography {
  font-family: 'Source Serif 4 18pt';
  font-style: italic;
  font-display: swap;
  text-align: right;
  max-width: 85ch;
  padding: 0px 9px 0px 15%;
  
 }

ul {
  padding: 0px 0px 0px 15%;
}


.footnotes { }


body:not(:has(header)) p:not(.authors) {
  padding: 0px 0px 0px 5%;
}