* {
  margin:0;
  padding:0;
}

body {
  background-color: #f3eff5;
  font-family: "Nunito, Rubik, Inter, Lato";
}

main {
  width: 90%;
	margin: auto;
}

footer {
  text-align: center;
  margin: 10px;
  margin-top: 20px;
  font-size: small;
}


/*Titres*/
h1 {
  text-align: center;
  box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
  background-color: #f3eff5;
  padding: 25px;
  padding-bottom: 0px;
  font-family: Garamond, Cochin, Georgia, Times, 'Times New Roman' ;
}
h2 {
  padding-top: 5px;
  padding: 15px;
  padding-bottom: 25px;
  background-color: #f3eff5;
  font-family: Garamond, Cochin, Georgia, Times, 'Times New Roman' ;
  text-align: center;
}

h3.h3_dépôt{
  background-color: #000000;
  border-radius: 10px;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
  margin-top: 10px;
  text-align: center;
  

}

h3{
  padding: 5px;
  background-color: #080708;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
  padding-left: 10px;
  padding-bottom: 10px;
  padding-top: 10px;
  padding-right: 10px;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.966);
  border-bottom-left-radius: 0%;
  border-bottom-right-radius: 0%;
}

h4 {
  text-align: center;
  padding-bottom: 5px;
}
.h4_dans_p{
  text-align: left;
  padding-top: 10px;
  padding-bottom: 1px;
}

/*Container*/
.container {
  display: flex;
  column-gap: 10px;
  justify-content: center;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
  padding-left: 10px;
  padding-bottom: 10px;
  padding-right: 10px;
  border-radius: 10px;
  background-color: #87c71a;
  text-align: justify;
  border-top-left-radius: 0%;
  border-top-right-radius: 0%;
  margin-bottom: 10px;
  }

.indent {
  text-indent: 25px;
  padding: 2px;
}

.subContainer {
  padding: 3px;
  flex: 1;
  padding: 5px;
  padding-top: 10px;
}


/*Menu*/
.menu{
  position:sticky;
  top:0;
  left:0;
  background-color: #87c71a;
  border-bottom-style: solid;
  border-bottom-width: 0.1px;
}

.menu > ul{
  display: flex;
  list-style: none;
  justify-content: center;
}

.menu li a{
  text-decoration: none;
  color: black;
  display: block;
  padding: 20px 20px;
}

.menu li a:hover{
  background: #7bb517;
}

.base_sous_menu{
  position: relative;
}

.sous_menu{
  list-style: none;
  display: none;
  position: absolute;
  top: 58px;
  left: 0;
  width: max-content;
  background: white;
  border-style:solid;
  border-top-style: none;
  border-width: 0.1px;
}

.sous_menu li a:hover{
  background: #7bb517;
}

.base_sous_menu:hover .sous_menu{
  display: block;
}

/*Autres*/
p a:link {
  text-decoration: none;
  color: rgb(27, 79, 92);
  font-style: italic;
}
p a:hover {
	font-weight: bold;
}
p a:visited {
  color: rgba(19, 55, 65, 0.842);
}
section div div ul li a:link {
  text-decoration: none;
  color: rgba(34, 130, 156, 0.842);
}
section div div ul li a:hover {
	font-weight: bold;
}
section div div ul li a:visited {
  color: rgba(26, 102, 122, 0.842);
}


/* Mise en forme des transformations */

.top {
  --offset: 50px; 
  position: sticky;
  bottom: 20px;      
  margin-right:10px; 
  place-self: end;
  margin-top: calc(100vh + var(--offset));
  text-decoration: none;
  padding: 10px;
  font-family: sans-serif;
  color: #fff;
  background: #000;
  border-radius: 100px;
  white-space: nowrap;
}

/*Spécifique aux segments :*/
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}

td, th {
  border: 1px solid #000000;
  text-align: left;
  padding: 5px;
  width: 100px;
  overflow: hidden;
}

th {
  text-align: center;
  padding-top: 10px;
  background-color: #8fd11c;
}

tr:nth-child(even) {
  background-color: #6b9c15;
}
tr:nth-child(odd) {
  background-color: #8fd11c;
}

.titre_tab {
  margin-top: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: #000;
  color: rgba(255, 255, 255, 0.966);
}

/*Spécifique aux citations :*/
.titre_cit{
  text-align: left;
  padding: 5px;
  background-color: #5d8812;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
  padding-left: 10px;
  padding-bottom: 10px;
  padding-top: 10px;
  padding-right: 10px;
  color: rgba(0, 0, 0, 0.966);
  margin-bottom: 10px;
  margin-top: 10px;
}
.tableau_cit ul li {
  margin-left: 35px;
}

.cit_dir { 
  font-style: italic; 
} 
                        
.cit_indir {
  font-weight: bold; 
} 

.intertitre_cit {
  margin-top: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: #ffffff;
  color: rgba(0, 0, 0, 0.966);
  margin-bottom: 2px;
}

/*Spécifique aux acteurs : */

.transfo_act ul li {
  margin-left: 35px;
}
.titre_act{
  text-align: left;
  padding: 5px;
  background-color: #000000;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
  padding-left: 10px;
  padding-bottom: 10px;
  padding-top: 10px;
  padding-right: 10px;
  color: rgba(255, 255, 255, 0.966);
  margin-bottom: 10px;
  margin-top: 10px;
}

/*Page observation - méthode GRID */
.container_grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  text-align: justify;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
  padding-left: 10px;
  padding-bottom: 20px;
  padding-right: 10px;
  padding-top: 20px;
  border-radius: 10px;
  background-color: #87c71a;
  margin-bottom: 10px;
}
#item1 {
  grid-row: 1;
  grid-column: 1/3;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
  border-radius: 10px;
  padding: 10px;

}
#item2 {
  grid-row: 1;
  grid-column: 3/4;
}
#item3 {
  grid-row: 2;
  grid-column: 1/4;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
  border-radius: 10px;
  padding: 10px;
}
#item4 {
  grid-row: 3;
  grid-column: 2/4;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
  border-radius: 10px;
  padding: 10px;
}
#item5 {
  grid-row: 3;
  grid-column: 1/2;
}
#item6 {
  grid-row: 4;
  grid-column: 1/4;
  border-radius: 10px;
  padding: 10px;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;

}
.container_grid img{
  width: 100%;
  height: auto;
  display: block;
}
figure{
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;

}

/*Pour le tooltip*/
.tooltip {
  position:relative;
  cursor: help;
  color:blue;
  text-decoration: none;
}
.tooltip:link {
  font-style: normal;
}
.tooltip-boite {
  font-style: normal;
  font-weight: normal;
  position: absolute;
  bottom: 125%;
  left:50%;
  width: 260px;
  background: white;
  color:#000;
  font-size: 14px;
  line-height: 1.5;
  border: 1px solid white;
  border-radius: 4px;
  padding: 10px;
  box-shadow: 0 2px 8px gray;
  transition: opacity 0.2s ease;
  z-index: 10;
  transform: translateX(-50%);
  visibility: hidden;
  opacity: 0;
}
.tooltip-boite::after{
  content:"";
  position: absolute;
  top: 100%;
  left:50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: white transparent transparent transparent;
}
.tooltip:hover .tooltip-boite{
  opacity: 1;
  visibility: visible ;
}