html {
  --maxwidth: 45em;
  scroll-behavior: smooth;
}

:root[data-force-color-mode="light"] {
  color-scheme: light;
  --textcolor: rgb(48.534% 0% 29.692%);
  --bordercolor:rgb(48.534% 0% 29.692%);
  --accentcolor: rgb(48.534% 0% 29.692%);
  --backgroundcolor:  rgb(89.567% 93.293% 75.902%);
  --font-wght: 400;
}

/* Thème sombre automatique (media query) */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --textcolor: rgb(48.534% 0% 29.692%);
  --bordercolor:rgb(48.534% 0% 29.692%);
  --accentcolor: rgb(48.534% 0% 29.692%);
  --backgroundcolor: white;
    --font-wght: 280;
  }
}

/* Thème sombre forcé */
:root[data-force-color-mode="dark"] {
  color-scheme: dark;
  --textcolor: rgb(89.567% 93.293% 75.902%);
  --bordercolor: rgb(89.567% 93.293% 75.902%);
  --accentcolor:rgb(89.567% 93.293% 75.902%);
  --backgroundcolor:  rgb(48.534% 0% 29.692%);

  --font-wght: 280;
}

/* Règles spécifiques au dark mode */
:root[data-force-color-mode="dark"] .epigraphe,
:root[data-force-color-mode="dark"] .text .quote {
  --font-wght: 900;
  max-width: max(75%, 23em);
  align-self: flex-end;
}

    
/* --------------------------------------------------------------------------------  */

body { 
  font-family:"Zaratustra";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    padding: 1em;
    color: var(--textcolor);
    background-color: var(--backgroundcolor);
    margin: 0;
  /* Thème clair par défaut */
}

.authors {
 font-style: italic;
 font-size: larger;
}

h3 {
 font-display:block;
    color: var(--textcolor);
   
   font-variant: small-caps;
   
  

}

  /*font-family: "ComputerModern Typewriter", ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;*/ 

header {
  background: var(--textcolor);
  color: var(--backgroundcolor);
  margin: 0 -1em;
  padding: 1em;
}

.text {
  max-width: 35em;
  margin: auto;
  
}
@media(min-width:700px) {
  body {
    font-size: 1.1em
  }
}

h1 {
  font-family:"Crozet" ;
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  line-height: 1.2;
  margin: 1.5em 0;
    
}
@media(min-width:700px) {
  h1 {
    font-size: 3.5em;
  }
}

h2 {
  
  font-family:"Zaratustra";
    font-weight: 600;
    font-style: normal;
    font-display:block;
    color: rgb(89.567% 93.293% 75.902%);
    background-color:rgb(48.534% 0% 29.692%);
}
@media(min-width:700px) {
  h2 {
    font-size: 1.1em
  }
}

a {
 font-family:"Zaratustra" ;
  font-weight: 600;
  font-style: italic;
  font-display:block;
  color:rgb(48.534% 0% 29.692%);
  background-color:rgb(89.567% 93.293% 75.902%);
  text-decoration: none;
 text-shadow: 0 0 10px rgb(89.567% 93.293% 75.902%);
}


a:hover {
    color:rgb(249, 255, 228);
    filter:blur(.07em);
    background-color:rgb(147, 4, 92);
    border-radius:5px;
    transition:filter .3s,color .3s
}



/*nav a {
  /* animation: clignotter 4s infinite alternate; */


@keyframes clignotter {
  0% {opacity: 1;}
  100% {opacity: 0;}
}
    


nav { 
    font-family:"Crozet" ;
    font-weight: 600;
    font-size: 1.1em;
    
    text-align:center;
    font-style: normal;
    font-display: swap;
    position:sticky; 
    top: 0;
    color: rgb(48.534% 0% 29.692%);;
    display: flex;
    justify-content: end;
}
.top-nav a {
  padding: .15em .5em;
}
@media(min-width:800px) {
  nav {
    font-size: 1.4em;
    align-self: flex-end;
    text-orientation: sideways-right;
    font-style: italic;
  }
}


main {
  line-height: 1.45;
}

main > * {
  padding: 1rem;
}

header { 
  border-bottom: 1px solid var(--bordercolor);
  padding: 4rem 1rem 1rem;
}

header h1 strong { 
  display: block;
  font-weight: inherit;
}

.authors { 
  text-transform: uppercase;
  letter-spacing: .02em;
  align-self: flex-end;
  font-style: italic;
  
}



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


.readmore { 
    font-family:"Zaratustra";
    font-weight: 500;
    font-style: italic;
    font-display: swap;}
.biography {
  font-family:"Zaratustra";
    font-weight: 500;
    font-size: smaller;
    font-style: italic;
    font-display: swap;
  }



.epigraphe,
.text .quote { 
  /* color: var(--accentcolor); */
  --font-wght: 900;
  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);
  
}

.footnotes { 
  border-bottom: 1px solid var(--bordercolor);
  padding: 4rem 1rem 1rem;
  transition: transform 0.3s ease, color 0.3s ease, font-family 0.3s ease; 
}

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


#footnotes li {
  block-size: auto;
  font-style: italic;
  text-decoration:none;
  color:rgb(89.567% 93.293% 75.902%);
  max-width: fit-content;
  text-shadow: 0 0 10px rgb(243, 236, 240);
}
  

#footnotes li:hover{
    color: rgb(89.567% 93.293% 75.902%);
    filter:blur(.07em);
    background-color:rgb(144, 138, 142);
    border-radius:5px;
    transition:filter .3s,color .3s
}


.head {
    font-family:"LinotypeUnivers-CondExtraBlack";
    text-decoration:none;
    color:rgb(48.534% 0% 29.692%);
    max-width: fit-content;
    text-shadow: 0 0 10px rgb(89.567% 93.293% 75.902%);
}

.header:hover {
    color:rgb(249, 255, 228);
    filter:blur(.07em);
    background-color:rgb(147, 4, 92);
    border-radius:5px;
    transition:filter .3s,color .3s;
}

/* cursor: help; */