* {
	padding:0px;
	margin:0px;
}

body {
    background-color: #f0f0c9;
    font-family: 'Arial', 'Chalkboard SE', 'Comic Neue', sans-serif;
   
}

p{
  font-family: 'Arial', 'Chalkboard SE', 'Comic Neue', sans-serif;
}

table {
    background-color: #ffffff;
}

#container {
  overflow: hidden;
  background-color:#f2bb05 ;
}

#container a {
position: top;
width: auto;
font-weight: bold;
 margin:auto;
float: left;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
 font-size: 17px;
}

#container a:hover {
  background-color: #3423A6;
  color: white;
}

.piedaccueil{
  justify-content: center;
  background-color: #f2bb05;
  color: black;
  position: fixed; 
  left: 0; 
  right: 0;
  text-align: center;
  width: 100%;
  bottom: 0;
  padding: 10px;
font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', sans-serif;
}

h1 {
    text-align: center;
    color: #3423A6;
    top:2px
}

.video-container {
  display: flex;
  justify-content: center; /* centre horizontalement */
  margin-top: 30px;        /* espace au-dessus */
}

body{
    font-family: Arial;
}

#paragraphe {
  width: 80vw;
  place-self: center;
}

#graphiquesvg{
  height: 5vh;
}

/* Redimensionne le graphique*/
svg {
    display: block;
    margin: 0 auto;
    width: 56%;
    height: auto; 
}

#BarreHorizontale {
    stroke-dasharray: 955.91;      
    stroke-dashoffset: 955.91;    
    opacity: 0;           
    transition: stroke-dashoffset 1.5s ease-out, 
                opacity 0.5s ease;
}

#FlècheHorizontale {
    stroke-dasharray: 955.91;      
    stroke-dashoffset: 955.91;    
    opacity: 0;           
    transition: stroke-dashoffset 1.5s ease-out, 
                opacity 0.5s ease;
}

#Annee {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#BarreVerticale {
    stroke-dasharray: 955.91;      
    stroke-dashoffset: 955.91;    
    opacity: 0;           
    transition: stroke-dashoffset 1.5s ease-out, 
                opacity 0.5s ease;
}

#FlècheVerticale {
    stroke-dasharray: 955.91;      
    stroke-dashoffset: 955.91;    
    opacity: 0;           
    transition: stroke-dashoffset 1.5s ease-out, 
                opacity 0.5s ease;
}

/* obj: faire disparaitre l'element pour prevoir son apparition plus tard */
#TWh {
    width: 0; 
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease; /* definit l'animation */
}

#BarreElec {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#EclairHaut {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#EclairMid {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#EclairBas {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#Barre2018 {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#A2018 {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#Barre2020 {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#A2020 {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#Barre2022 {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#A2022 {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#Barre2024 {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#A2024 {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#Barre2026 {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#A2026 {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#Barre2028 {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#A2028 {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#Barre2030 {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#A2030 {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#Barre0 {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#V0 {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#Barre100 {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#V100 {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#Barre200 {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#V200 {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#Barre300 {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#V300 {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#Barre400 {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#V400 {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#Barre500 {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#V500 {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#Barre600 {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#V600 {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#Barre700 {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#V700 {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#Barre800 {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#V800 {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#Barre900 {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#V900 {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#Barre1000 {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#V1000 {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#Barre1100 {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#V1100 {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#Cheminee1 {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#BasC1 {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#ChemineeD {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#basCD {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#ChemineeG {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#BasCG {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#HautGauchePicto {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#HautDroitPicto {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#BasPicto {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#PointPicto {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#ContourHG {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#ContourHD {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#ContourBas {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#FlècheVerticaleIA {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#HautAI {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#MidAI {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#CoprsAI {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#CorpsA {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease; 
}

#BarreGraph2020{
    stroke-dasharray: 260;  /* indique la longuer du trait en px */
    stroke-dashoffset: 260; /* ce qu'on cache */
    opacity: 1;
    transition: stroke-dashoffset 2s ease-out; /* definit l'animation */
}

#BarreGraph2022{
    stroke-dasharray: 260;
    stroke-dashoffset: 260;
    opacity: 1;
    transition: stroke-dashoffset 2s ease-out;
}

#BarreGraph2024{
    stroke-dasharray: 260;
    stroke-dashoffset: 260;
    opacity: 1;
    transition: stroke-dashoffset 2s ease-out;
}

#BarreGraph2026{
    stroke-dasharray: 345;
    stroke-dashoffset: 345;
    opacity: 1;
    transition: stroke-dashoffset 2s ease-out;
}

#BarreGraph2028{
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    opacity: 1;
    transition: stroke-dashoffset 2s ease-out;
}

#BarreGraph2030{
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    opacity: 1;
    transition: stroke-dashoffset 2s ease-out;
}

#BarreGraph200{
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    opacity: 1;
    transition: stroke-dashoffset 2s ease-out;
}

#BarreGraph300{
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    opacity: 1;
    transition: stroke-dashoffset 2s ease-out;
}

#BarreGraph480{
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    opacity: 1;
    transition: stroke-dashoffset 2s ease-out;
}

#BarreGraph620{
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    opacity: 1;
    transition: stroke-dashoffset 2s ease-out;
}

#BarreGraph900{
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    opacity: 1;
    transition: stroke-dashoffset 2s ease-out;
}

#BarreGraph1050{
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
    opacity: 1;
    transition: stroke-dashoffset 2s ease-out;
}

#V200IA {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#V300IA {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#V480IA {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#V620IA {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#V900IA {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#V1050IA {
    width: 0;
    opacity: 0;
    transition: width 2s ease-out, opacity 0.5s ease;
}

#copilot{
  padding-left: 30px;
  width: 80wv;
  display: flex;
  justify-content: baseline;
  gap: 30px;
  align-items: center;
  align-self: center;

}

#copilotp{
text-align: left;
}

#gemini{
  padding-left: 30px;
  width: 80wv;
  display: flex;
  justify-content: baseline;
  gap: 30px;
  align-items: center;
  align-self: center;
}

#geminip{
text-align: left;
}

#hera{
  padding-left: 30px;
  width: 80wv;
  display: flex;
  justify-content: baseline;
  gap: 30px;
  align-items: center;
  align-self: center;
}

#herap{
text-align: left;
}

#after{
    text-align: center;
}

.main-svg{
    height: 1000px;
    width: 650px;
}