/* police Atkinson Hyperlegible */
@font-face { font-family: sbb; font-weight: normal; font-style:normal; src: url("../../fonts/SBB-Fonts/SBBWeb-Light.ttf"); }
@font-face { font-family: sbb; font-weight: bold; font-style:normal; src: url('../../fonts/SBB-Fonts/SBBWeb-Bold.ttf');}
@font-face { font-family: sbb; font-weight: normal; font-style:italic; src: url('../../fonts/SBB-Fonts/SBBWeb-Italic.ttf');}

body /* style général pour le document */
{
  font-size: 1.2em;
  font-family: "sbb";
  font-style: normal;
  font-weight: normal;
  color: #000000; /* couleur de police par défaut */
  background-color: #FFFFFF; /* couleur de fond */
}

#wrapper { /* bloc principal centrer sur la page */
  width: 800px;
  margin: 0 auto;
}

.titre {
  font-size: 2.2rem;
  font-family: "sbb";
  font-style: normal;
  font-weight: bold;
  text-align: center;
}

.soustitre {
  font-size: 2rem;
  font-family: "sbb";
  font-style: normal;
  font-weight: bold;
  text-align: center;
}

h1, .menu {
  font-size: 1.8rem;
  font-family: "sbb";
  font-style: normal;
  font-weight: bold;
}

h2 {
  font-size: 1.6rem;
  font-family: "sbb";
  font-style: normal;
  font-weight: bold;
}

h3 {
  font-size: 1.4rem;
  font-family: "sbb";
  font-style: normal;
  font-weight: bold;
}

a { color: #0000CC;
  text-decoration: none;
}

.check {
  list-style-type: '\2713';
}

.todo {
  list-style-type: '\27A4';
}

.sign {
  list-style-type: '\270D';
  font-size: 1.2rem;
}

li > a {
  line-height: 2rem;
}

li:not(:last-child) {
  /*line-height: 2rem;*/
  margin-bottom: 10px;
}

li:last-child {
  /*line-height: 2rem;*/
  margin-bottom: 20px;
}

p {
  /*font-size: 1.2rem;*/
}

/* Numérotation des lignes du tableau et des chapitres */
body{ counter-reset:nref chapter li } /* remise à zéro des compteurs */

.ref{ counter-increment:nref } /* compteurs pour ligne du tableau */
.ref:before{ content: counter(nref) }

h1:before { /* chapitre */
  content: counter(chapter) ". ";
  counter-increment: chapter;
}

h1 {
  counter-reset: section; /* remise à zéro du compteur section */
}

h2:before { /* chapitre.section */
  content: counter(chapter) "." counter(section) " ";
  counter-increment: section;
}

h2 {
  counter-reset: soussection; /* remise à zéro du compteur sous section */
}

h3:before { /* chapitre.section.sous-section */
  content: counter(chapter) "." counter(section) "." counter(soussection) " ";
  counter-increment: soussection;
}

.tab_resume { /* tableau resumé */
  width: 750px;
  border: 1px solid black;
}

.tab_resume > .ligne {
  display: grid;
  grid-template-areas:
  'col1 col2';
  height: fit-content;
  width: 100%;

  border-width: 0 0 1px 0 ;
  border-style: solid;
  border-color: black;
}

/* couleur de fond des entêtes de lignes */
.couleur_a { background-color: #dac100;}
.couleur_b { background-color: #ffde88;}
.couleur_c { background-color: #eea59d;}
.couleur_d { background-color: #dcc0c3;}
.couleur_e { background-color: #e5e2e1;}
.couleur_f { background-color: #e0ac60;}

.tab_resume > .ligne > .col1 {
  grid-area: col1;
  padding: 5px;
  width: 30px ;
  text-align: center;
  font-weight: bold;
}

.tab_resume > .ligne > .col2 {
  grid-area: col2;
  padding: 4px;
  width: 720px;
}

.tableau { /* tableau principal */
  width: 795px;
  border: 1px solid black;
}

.tableau > .ligne {
  display: grid;
  grid-template-areas:
  'col1 col2 col3';
  height: fit-content;
  min-height: 60px;
  width: 100%;
  border-width: 0 0 1px 0 ;
  border-style: solid;
  border-color: black;
}

.tableau > .ligne > .col1 { /* numéro de ligne */
  grid-area: col1;
  padding: 4px ;
  width: 30px;
  text-align: center;
  font-weight: bold;
}

.tableau > .ligne > .col2 { /* texte */
  grid-area: col2;
  padding: 5px;
  width: 653px;
}

.tableau > .ligne > .col3 { /* image */
  grid-area: col3;
  padding: 2px;
  width: 94px;
}

.tableau > .ligne > .col3 > img { /* taille de l'image */
  width: 90px;
 max-height: 90px;
}

summary { /* texte principal */
  font-size: 1.2rem;
  background-color: #FFFFFF;
}

.explications { /* zone pour les explications */
  font-size: 1rem;
  background-color: #FFEDD4;
  padding: 5px;
}
.explications:empty { /* n'affiche pas le bloc "explications" si il est vide */
  display:none;
}

.note { /* zone pour les explications */
  font-size: 1rem;
  background-color: #FFDCAC;
  padding: 5px;
  border-style: solid;
  border-width: 1px;
  border-color: red;
}
.note:before {
  content: '\261D';
  font-size: 1.8em;
  padding-right: 10px;
}
.note:empty { /* n'affiche pas le bloc "explications" si il est vide */
  display:none;
}

summary:after { /* ajoute un symbole pour indiquer une explication */
  content: '++';
}
details:has(.explications:empty) > summary:after { /* enlève le symbole si le bloc "explications" est vide */
  content: '';
}

details > summary { /* enlève la petite flèche au titre du menu depliant */
  list-style: none;
  line-break: normal;

}
details > summary::-webkit-details-marker { /* enlève la petite flèche au titre du menu  depliant*/
  display: none;
}

.selecteurs {
  position: fixed;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  z-index: 2;
  height: 550px;
/*   width: 80px; */
  background-color: #FFFFFF;
  writing-mode: sideways-lr;
  line-height: 32px;
  color: #d39607;
}

.bouton {
  border: 1px solid red;
  background-color: #F0F0F0;
  padding: 4px;
  border-radius: 20px;
}

.btn_retour { /* bouton retour */
  position: fixed;
  top: 40px;
  right: 10px;
  z-index: 3;
  height: 40px;
  width: 40px;
  background-color: #FFFFFF;
  color: #eb00ff;
  font-weight: bold;
  font-size: 40px;
  line-height: 40px;
  text-align: center;
  border: 2px solid #eb00ff;
  border-radius: 40px;
  text-decoration: none;
}