: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;

  /* -------------------- variables de couleur globales -------------------- */
  --body-bg: rgb(25, 70, 229);
  --body-text: lab(76.25% 0 -0.01);
  --nav-bg: rgb(25, 70, 229);
  --h1-border: lab(76.25% 0 -0.01);
  --h1-text: lab(76.25% 0 -0.01);
  --h234-text: lab(76.25% 0 -0.01);
  --link-color: currentColor;
  --p-link: lab(76.25% 0 -0.01);
  --authors-text: lab(12.99% 36.44 -50.4);
  --keywords-text: lab(12.99% 36.44 -50.4);
  --textblock-text: lab(76.25% 0 -0.01);
  --epigraphe-text: lab(12.99% 36.44 -50.4);
  --table-border: var(--bordercolor);
  --readmore-text: lab(76.25% 0 -0.01);
  --biography-text: lab(76.25% 0 -0.01);
  --footnotes-text: lab(12.99% 36.44 -50.4);
  --fn-color: rgb(255, 255, 255);
}

:root {
  --size: 8px;       /* espacement horizontal entre points */
  --dot-radius: 2px;  /* rayon des points */
  --line-height: 4px; /* épaisseur "visuelle" de la bordure */
  --speed: 0.8s;      /* durée de l'animation */
}

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

  background: var(--body-bg);
  color: var(--body-text);
  box-shadow: inset 0 0 80px rgba(0,0,0,0.15);
  font-family: "ComputerModern Typewriter", ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  line-height: 1.60em;
  margin: 0;
  accent-color: rgb(123,175,123);
  transition: background-color 0.4s ease, color 0.4s ease;
}
*, *::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[data-force-color-mode="light"] {
  color-scheme: light dark;
  --textcolor: rgb(33, 33, 33);
  --bordercolor:  rgb(48, 28, 199);
  --accentcolor: rgb(48, 28, 199);
  --backgroundcolor: rgb(255, 249, 218);
  --backgroungcolorbutton: lab(12.99% 36.44 -50.4);
  --link-text:lab(12.99% 36.44 -50.4);
  --body-bg: rgb(255, 249, 218);
  --body-text:  rgb(48, 28, 199);
  --nav-bg: rgb(255, 249, 218);
  --h1-border:  rgb(48, 28, 199);
  --h1-text:  rgb(48, 28, 199);
  --h234-text:  rgb(48, 28, 199);
  --p-link:  rgb(48, 28, 199);
  --authors-text:  rgb(48, 28, 199);
  --keywords-text:  rgb(48, 28, 199);
  --textblock-text:  rgb(48, 28, 199);
  --epigraphe-text:  rgb(48, 28, 199);
  --readmore-text:  rgb(48, 28, 199);
  --biography-text:  rgb(48, 28, 199);
  --footnotes-text:  rgb(48, 28, 199);
  --fn-color:  rgb(48, 28, 199);
}


/* Thème sombre */
@media (prefers-color-scheme: dark) {
  :root {
    --textcolor: rgb(209, 209, 209);
    --bordercolor: rgb(99, 99, 99);
    --accentcolor: lab(76.25% 0 -0.01);
    --backgroundcolor: rgb(48, 28, 199);
      --backgroungcolorbutton: lab(76.25% 0 -0.01);
    --font-wght: 280;
    --link-text:lab(12.99% 36.44 -50.4);
    --body-bg: rgb(25, 70, 229);
    --body-text: lab(76.25% 0 -0.01);
    --nav-bg: rgb(25, 70, 229);
    --h1-border: lab(76.25% 0 -0.01);
    --h1-text: lab(76.25% 0 -0.01);
    --h234-text: lab(76.25% 0 -0.01);
    --p-link: lab(12.99% 36.44 -50.4);
    --authors-text: lab(12.99% 36.44 -50.4);
    --keywords-text: lab(12.99% 36.44 -50.4);
    --textblock-text: lab(76.25% 0 -0.01);
    --epigraphe-text: lab(76.25% 0 -0.01);
    --readmore-text: lab(76.25% 0 -0.01);
    --biography-text: lab(76.25% 0 -0.01);
    --footnotes-text: lab(12.99% 36.44 -50.4);
    --fn-color: rgb(255,255,255);
  }
}

/* Thème sombre forcé */
:root[data-force-color-mode="dark"] {
  --textcolor: rgb(209, 209, 209);
  --bordercolor: rgb(99, 99, 99);
  --accentcolor: lab(76.25% 0 -0.01);
  --backgroundcolor: rgb(48, 28, 199);
  --backgroungcolorbutton: lab(76.25% 0 -0.01);
  --font-wght: 280;

  --body-bg: rgb(25, 70, 229);
  --body-text: lab(76.25% 0 -0.01);
  --nav-bg: rgb(25, 70, 229);
  --h1-border: lab(76.25% 0 -0.01);
  --h1-text: lab(76.25% 0 -0.01);
  --h234-text: lab(76.25% 0 -0.01);
  --p-link: lab(12.99% 36.44 -50.4);
  --authors-text: lab(12.99% 36.44 -50.4);
  --keywords-text: lab(12.99% 36.44 -50.4);
  --textblock-text: lab(76.25% 0 -0.01);
  --epigraphe-text: lab(12.99% 36.44 -50.4);
  --readmore-text: lab(76.25% 0 -0.01);
  --biography-text: lab(76.25% 0 -0.01);
  --footnotes-text: lab(12.99% 36.44 -50.4);
  --fn-color: rgb(255,255,255);
}



/* ------------------------------------------------------------ liens */
a {
  font-family: "Mattone";
  font-size: 1em;
  line-height: 1em;
  color: var(--li);
}
p a {
  margin: 0px 3px 0px 3px;

}
nav {
  font-size: 1.2em;
}
nav a {
  color: var(--body-text);
}

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

h1:hover {
  filter: blur(0);
}
h1 {
  font-weight: 900;
  margin: 0px 5px 0px 5px;
  border: 10px dotted var(--h1-border);
  padding: 0.5em;
  line-height: 1.20em;
  font-family: "Mattone";
  font-size: clamp(2em, 4vw, 8em);
  text-align: center;
  color: var(--h1-text);
  margin-bottom: 0.8em;
  text-wrap: balance;
  filter: blur(2px);
  transition: filter 4s ease;
}
h2, h3 {
  font-family: "Mattone";
  color: var(--h234-text);
  font-size: 1.75rem;
  --font-wght: 400;
  line-height: 1.3;
  text-wrap: balance;
}
p {
  font-family: "Mattone";
  margin-bottom: 1.6em;
}
ul {
  padding: 0;
  list-style-type: none;
  font-family: 'ED Lavonia';
  font-size: 1.3em;
}
ul li::before {
  content: "— ";
}

/* ------------------------------------------------------------ navigation */
.top-nav { 
  padding: 1em;
  font-weight: 900;
  text-transform: uppercase;
  text-align: center;
  position: sticky;
  top: 0;
  background: var(--nav-bg);
  display: block;              /* s'assurer que ça occupe une ligne */
  padding-bottom: 1em;        /* espace pour le "trait" */
  background-image: radial-gradient(circle, var(--h1-border) var(--dot-radius), transparent calc(var(--dot-radius) + 0px));
  background-repeat: repeat-x;
  background-size: var(--size) var(--line-height);
  background-position: 0 calc(100% - var(--line-height)); /* aligner en bas */
  animation: moveDotsLeft var(--speed) linear infinite;
}

@keyframes moveDotsRight {
  from { background-position: 0 100%; }
  to   { background-position: 16px 100%; }
}

@keyframes moveDotsLeft {
  from { background-position: 16px 100%; }
  to   { background-position: 0 100%; }
}

.top-nav a {
  text-decoration: none;
  letter-spacing: .05em;
}

/* ------------------------------------------------------------ main */
main > * {
  padding: 1rem;
}

/* ------------------------------------------------------------ header */
header { 
  padding: 4rem 1rem 1rem;
    display: block;              /* s'assurer que ça occupe une ligne */
  padding-bottom: 1em;        /* espace pour le "trait" */
  background-image: radial-gradient(circle, var(--h1-border) var(--dot-radius), transparent calc(var(--dot-radius) + 0px));
  background-repeat: repeat-x;
  background-size: var(--size) var(--line-height);
  background-position: 0 calc(100% - var(--line-height)); /* aligner en bas */
  animation: moveDotsRight var(--speed) linear infinite;
}
header p {
  text-align: center;
}
.authors { 
  margin-top: 1em;
  font-size: 3em;
  text-align: center;
  max-width: 66ch;
  margin: 0px 20px;
  font-family: 'ED Lavonia';
  line-height: 1em;
  color: var(--authors-text);
  letter-spacing: .02em;
}
.keywords {
  text-align: center;
  font-family: "Rubik";
  font-style: italic;
  font-size: 0.8em;
  color: var(--keywords-text);
}
.keywords a {
  max-width: 2000ch;
  font-family: "Rubik";
  text-align: center;
  color: var(--keywords-text);
}

/* ------------------------------------------------------------ texte */
.text { 
  font-size: 1em;
  max-width: 66ch;
  margin: auto;
  padding: 20px;
  color: var(--textblock-text);
  margin-bottom: 4em;
  display: flex;
  flex-direction: column;
  gap: 1.6em;

}
.text p { 
  max-width: 85ch;
  font-size: 1.25em;
  margin: 0;
}

.epigraphe {
  color: var(--epigraphe-text);
}
.text .quote { 
  margin: 0px 15px;
  font-family: 'ED Lavonia';
  font-size: 1.70em;
  line-height: 1em;
  text-align: justify;
  --font-wght: 900;
  max-width: max(75%, 23em);
  align-self: flex-end;
  color: var(--epigraphe-text);
}

.text,
.readmore > *,
.biography > *,
.footnotes > * {
  margin-inline: auto;
  max-width: var(--maxwidth);

}

/* ------------------------------------------------------------ tableau ! */
table {
  border-collapse: collapse;
}
th { --font-wght: 600}
td, th {
  padding-block: .5em;
  vertical-align: top;  
  text-align: left;
  border-bottom: 4px dotted var(--h1-border);
}
td:not(:first-child),
th:not(:first-child) { padding-left: .5em; border-bottom: 4px dotted var(--h1-border);;}
td:not(:last-child),
th:not(:last-child) { padding-right: .5em; border-bottom: 4px dotted var(--h1-border);}
tbody tr:last-child td, tbody tr:last-child th {
  border-bottom: none;
}

/* ------------------------------------------------------------ texte + */
.readmore {
  font-family: "Mattone";
  text-align: center;
  font-style: italic;
  font-size: 1.2em;
  color: var(--readmore-text);
  margin-bottom: 4em;
  padding: 40px;
  margin: auto;
  display: block;             
  padding-bottom: 1em;      
  background-image: radial-gradient(circle, var(--h1-border) var(--dot-radius), transparent calc(var(--dot-radius) + 0px));
  background-repeat: repeat-x;
  background-size: var(--size) var(--line-height);
  background-position: 0 calc(100% - var(--line-height));
  animation: moveDotsRight var(--speed) linear infinite;
}
.readmore p {
  margin: auto;
  text-align: left;
  font-family: "Rubik";
  font-style: italic;
  font-size: 0.8em;
  line-height: 1.4em;
  max-width: 66ch;
  color: var(--readmore-text);
  margin-bottom: 1em;
}
.readmore a {
  color: var(--readmore-text);
}
.readmore,
.biography,
.footnotes { 
  display: block;       
  padding-bottom: 1em;        
  background-image: radial-gradient(circle, var(--h1-border) var(--dot-radius), transparent calc(var(--dot-radius) + 0px));
  background-repeat: repeat-x;
  background-size: var(--size) var(--line-height);
  background-position: 0 calc(100% - var(--line-height)); 
  animation: moveDotsRight var(--speed) linear infinite;
}
.biography {
  font-family: "Rubik";
  font-style: italic;
  font-size: 0.8em;
  max-width: 66ch;
  margin: auto;
  color: var(--biography-text);
  line-height: 1.1em;
  text-align: justify;
  margin-bottom: 4em;
}
.footnotes {
  font-family: "Mattone";
  font-style: italic;
  text-align: justify;
  font-size: 1em;
  line-height: 1em;
  margin-top: 3cm;
  color: var(--footnotes-text);
}
.footnotes ol { 
  padding: 0em 0em 3em;
  list-style-position: inside;
}
.footnotes li {
  text-indent: -2em;
  padding-left: 2em;
}
.fn {
  font-size: 0.7em;
  color: var(--fn-color);
  vertical-align: super;
}

/* effet sur les liens */
a:hover {
  color: var(--link-text);      
  transition: all 0.8s ease;
}

/* ------------------------------------------------------------ footer */
#footer {
  display: flex;
  flex-direction: column;
}
#footer > * {
  padding: 1em 1em;
}
.articles-prev-next {
  position: fixed;
  bottom: 0;
  width: 98%;

  display: flex;
  gap: 1em;
  justify-content: space-between;

  background-color: var(--nav-bg);
  padding: 1em 0; /* espace pour le contenu */
}

.articles-prev-next::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0; /* haut de la pseudo-bordure */
  height: var(--line-height); /* hauteur des points */
  
  background-image: radial-gradient(circle, var(--h1-border) var(--dot-radius), transparent calc(var(--dot-radius) + 0px));
  background-repeat: repeat-x;
  background-size: var(--size) var(--line-height);
  animation: moveDotsRight var(--speed) linear infinite;
}

blockquote footer {
  font-family: "Mattone";
  font-style: italic;
}

label {

}

.theme {
  position: fixed;
  top: 0;
}

.theme input, 

.theme span {
  display: none;
}


.theme label::before {
  content: "◐";
  font-size: 3em;
}

@media screen and (prefers-color-scheme: dark) {
  .theme label::before {content: "◐";}
}

html[data-force-color-mode="dark"] {
  .theme label::before {content: "◑";}
}