/* RESET */
/**********/
#total-energies-provenances h1,
#total-energies-provenances h2,
#total-energies-provenances h3,
#total-energies-provenances h4,
#total-energies-provenances h5,
#total-energies-provenances h6,
#total-energies-provenances p,
#total-energies-provenances ul,
#total-energies-provenances li,
#total-energies-provenances a {
   margin: 0;
   padding: 0;
   text-decoration: none;
   list-style: none;
}


/* INITIAL */
/**********/
#total-energies-provenances {
   box-sizing: border-box;
   max-width: 900px;
   margin: 0;
   font-family: 'Lato', sans-serif;
   font-size: 1em;
   margin: 0 auto;
}
#total-energies-provenances .visually-hidden {
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;
}


/* CONTAINER */
/*************/
#total-energies-provenances header {
   padding: 20px;
   background-color: #75418e;
   color: white;
   margin: 0;
   font-size: 1.4em;
   text-align: left;
   font-weight: bold;
}
#total-energies-provenances main {
   display: block;
   position: relative;
}
#total-energies-provenances .pages { position: relative; }


/* HOME SVG */
/************/
#total-energies-provenances .homeSvg {
    padding: 60px 20px;
}

#total-energies-provenances .conteneur, #total-energies-provenances .conteneur2, #total-energies-provenances .conteneur3 {
	position: relative;
}

#total-energies-provenances .conteneur:after {
	display: block;
	content: "";
	padding-bottom: 100%;
}

#total-energies-provenances .conteneur2:after{
	display: block;
	content: "";
	padding-bottom: 68%;
}

#total-energies-provenances .conteneur3:after {
	display: block;
	content: "";
	padding-bottom: 83%;
}

#total-energies-provenances div img {
	position: absolute;
}
	
#total-energies-provenances .homeSvg svg {
	position: absolute;
	max-width: 100%;
	height: auto;
}
	
#total-energies-provenances .homeSvg #ROLLOVER > g {
   cursor: pointer;
   -webkit-transition: transform 0.5s;
   -ms-transition: transform 0.5s;
   -moz-transition: transform 0.5s;
   transition: transform 0.5s;
}

#total-energies-provenances .homeSvg svg #ROLLOVER > g:not(#autres):hover {
   -webkit-transform: scale(1.03);
   -ms-transform: scale(1.03);
   -moz-transform: scale(1.03);
   transform: scale(1.03);
}
#total-energies-provenances .homeSvg #ROLLOVER > g#petrole,
#total-energies-provenances .homeSvg #ROLLOVER > g#gaz,
#total-energies-provenances .homeSvg #ROLLOVER > g#bois,
#total-energies-provenances .homeSvg #ROLLOVER > g#charbon {
   -webkit-transform-origin: right center;
   transform-origin: right center;
}
#total-energies-provenances .homeSvg #ROLLOVER > g#nucleaire {
   -webkit-transform-origin: left center;
   transform-origin: left center;
}
#total-energies-provenances .homeSvg #ROLLOVER > g#hydraulique {
   -webkit-transform-origin: center bottom;
   transform-origin: center bottom;
}
#total-energies-provenances .homeSvg #ROLLOVER > g#solaire {
   -webkit-transform-origin: left top;
   transform-origin: left top;
}
#total-energies-provenances .homeSvg #ROLLOVER > g#eolien,
#total-energies-provenances .homeSvg #ROLLOVER > g#agrocarburants {
   -webkit-transform-origin: left bottom;
   transform-origin: left bottom;
}
#total-energies-provenances .homeSvg #ROLLOVER #autres { cursor: inherit; }


/* POPIN */
/*********/
#total-energies-provenances .popin {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0,0,0,.5);
}
#total-energies-provenances .popin_wrapper {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 50%;
   transform: translateX(-50%) translateY(-50%);
   border-radius: 5px;
   padding: 20px 30px;
   background-color: white;
   text-align: center;
}
#total-energies-provenances .popin_wrapper_title {
   font-weight: bold;
   color: #3d3d3d;
}
#total-energies-provenances .popin_wrapper_button {
   display: inline-block;
   margin: 30px auto 20px;
   padding: 15px 20px;
   background-color: #75418e;
   border-radius: 5px;
   text-transform: uppercase;
   color: white;
}


/* PAGES NAVIGATION */
/********************/
/* Menu */
#total-energies-provenances .pages_nav { position: relative; }
#total-energies-provenances .menu {
   display: flex;
   align-items: stretch;
   flex-wrap: wrap;
   font-size: 0.7em;
   font-weight: 200;
   color: white;
   width: 100%;
}
#total-energies-provenances .menu_item {
   flex: 1 1%;
   min-width: 0;
   border: none;
   line-height: 1;
   font-size: 1em;
}
/* Menu --> rubric */
#total-energies-provenances .menu--rubric { background-color: #3d3d3d; }
#total-energies-provenances .menu--rubric .menu_item { padding: 5px 8px; }
#total-energies-provenances .menu--rubric .menu_item:not(:first-child) { border-left: 1px solid white; }
#total-energies-provenances .menu--rubric .menu_item:nth-child(1) { flex-grow: 3; }
#total-energies-provenances .menu--rubric .menu_item:nth-child(2) { flex-grow: 1; }
#total-energies-provenances .menu--rubric .menu_item:nth-child(3) { flex-grow: 5; }
/* Menu --> thematic */
#total-energies-provenances .menu--thematic .menu_item {
   box-sizing: border-box;
   position: relative;
   padding: 20px 5px 10px;
   cursor: pointer;
   text-align: center;
}
#total-energies-provenances .menu--thematic .menu_item div {
   display: block;
   padding-top: 60%;
   opacity: 0.8;
}
#total-energies-provenances .menu--thematic .menu_item::after {
   content: '';
   position: absolute;
   bottom: -22px;
   left: 0;
   right: 0;
   margin: auto;
   width: 0;
   height: 0;
   border: 10px solid white;
}
#total-energies-provenances .menu--thematic .menu_item.petrole div {
   background: url('../svg/energies/petrole.svg') top center/50% no-repeat;
}
#total-energies-provenances .menu--thematic .menu_item.gaz div {
   background: url('../svg/energies/gaz.svg') top center/50% no-repeat;
}
#total-energies-provenances .menu--thematic .menu_item.charbon div {
   background: url('../svg/energies/charbon.svg') top center/50% no-repeat;
}
#total-energies-provenances .menu--thematic .menu_item.nucleaire div {
   background: url('../svg/energies/nucleaire.svg') top center/50% no-repeat;
}
#total-energies-provenances .menu--thematic .menu_item.hydraulique div {
   background: url('../svg/energies/hydraulique.svg') top center/50% no-repeat;
}
#total-energies-provenances .menu--thematic .menu_item.solaire div {
   background: url('../svg/energies/solaire.svg') top center/50% no-repeat;
}
#total-energies-provenances .menu--thematic .menu_item.eolien div {
   background: url('../svg/energies/eolien.svg') top center/50% no-repeat;
}
#total-energies-provenances .menu--thematic .menu_item.bois div {
   background: url('../svg/energies/bois.svg') top center/50% no-repeat;
}
#total-energies-provenances .menu--thematic .menu_item.agrocarburants div {
   background: url('../svg/energies/agrocarburants.svg') top center/50% no-repeat;
}
@media screen and (min-width: 601px) { /*376*/
   #total-energies-provenances .menu--thematic .menu_item.menu_item--noactive { background-color: #a6a6a6; }
}
@media screen and (max-width: 600px) { /*375*/
   #total-energies-provenances .menu--rubric { display: none; }
   #total-energies-provenances .menu--thematic {
      position: absolute;
      bottom: 0;
      transform: translateY(100%);
      left: 0; right: 0;
      margin: auto;
      width: 100%;
   }
   #total-energies-provenances .menu--thematic .menu_item::after { content: none; }
   #total-energies-provenances .menu--thematic .menu_item { flex-basis: 33%; }
   #total-energies-provenances nav { z-index: 1; }
}

/* Control */
#total-energies-provenances .control {
   display: flex;
   justify-content: space-between;
   align-items: stretch;
   padding: 50px;
}
#total-energies-provenances .control.control--active {
   background-color: black;
}
/* Control --> Link back to home */
#total-energies-provenances .control_link-back {
   position: relative;
   padding: 5px;
   padding-left: 25px;
   color: #a6a6a6;
   line-height: 1em;
}
#total-energies-provenances .control_link-back:hover {
   color: #3d3d3d;
   font-weight: bold;
}
#total-energies-provenances .control_link-back::before {
   content: '';
   position: absolute;
   top: 0; bottom: 0;
   margin: auto;
   left: 0;
   width: 20px;
   height: 20px;
   background: url(../svg/fleche.svg) center no-repeat, #3d3d3d;
   border-radius: 50%;
}
/* Control --> toggle menu */
#total-energies-provenances .control_toggle-menu {
   display: inline-block;
   width: 40px;
   height: 40px;
   background-image: url(../svg/menu-open.svg);
   background-position: center;
   background-repeat: no-repeat;
}
#total-energies-provenances .control_toggle-menu.control_toggle-menu--active {
   background-image: url(../svg/menu-close.svg);
}
@media screen and (max-width: 600px) { /*600*/
   #total-energies-provenances .control { padding: 20px; }
}
@media screen and (max-width: 600px) { /*375*/
   #total-energies-provenances .control_link-back span { display: none; }
}
@media screen and (min-width: 601px) { /*376*/
   #total-energies-provenances .control_toggle-menu { display: none; }
}


/* PAGES CONTENT */
/*****************/
#total-energies-provenances .pages_content {
   padding: 50px;
   padding-top: 0 !important;
   color: #3d3d3d;
}
@media screen and (max-width: 600px) { /*600*/
   #total-energies-provenances .pages_content { padding: 20px; }
}

/* Gauge */
#total-energies-provenances .gauge {
   position: absolute;
   top: 175px;
   right: 50px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 33%;
}
#total-energies-provenances .gauge_title {
   max-width: 55%;
   text-align: right;
   color: #3d3d3d;
}
#total-energies-provenances .gauge_title_percent { font-size: 1.4em; }
#total-energies-provenances .gauge_title_text { font-size: 0.8em; font-weight: bold; }
#total-energies-provenances .gauge_line {
   width: 30px;
   margin: 0 10px;
   height: 2px;
   background-color: #3d3d3d;
}
#total-energies-provenances .gauge_graph {
   width: 60px;
   height: 60px;
   transform: rotate(-90deg);
}
@media screen and (max-width: 600px) { /*600*/
   #total-energies-provenances .gauge {
      position: relative;
      top: 0; bottom:0;
      left: 0; right: 0;
      width: 100%;
      padding: 20px 0;
   }
   #total-energies-provenances .gauge_title { text-align: left;}
}

/* Content */
#total-energies-provenances .thematic { position: relative; }
#total-energies-provenances .thematic > * { margin-bottom: 10px; }
#total-energies-provenances .thematic_title { font-size: 2.5em; }
#total-energies-provenances .thematic_map { margin: 30px 0; height: 85%; }
#total-energies-provenances .thematic_source {
   margin-top: 50px;
   font-size: 0.7em;
}
#total-energies-provenances .thematic_extras {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}
#total-energies-provenances .thematic_extras div:not(:nth-child(n+3)) { flex: 1; }
#total-energies-provenances .thematic_extras div:nth-child(n+3) { width: 100%; }
#total-energies-provenances .thematic_extras div:first-child { padding-right: 70px; }
#total-energies-provenances .thematic_extras h3 { font-size: 2em; margin-bottom: 10px; }
#total-energies-provenances .thematic_extras h4 { font-size: 1.5em; }
#total-energies-provenances .thematic_extras h5 { font-size: 1em; }
#total-energies-provenances .thematic_extras--agro div {
   height: 140px;
}
#total-energies-provenances .thematic_extras--agro div img {
   height: 100%;
   max-width: 100%;
   margin-left: -10px;
}
#total-energies-provenances .thematic_extras--agro h4 { font-size: 1em; font-weight: normal; }
@media screen and (max-width: 600px) { /*600*/
   #total-energies-provenances .thematic_extras div:not(:nth-child(n+3)) { flex-basis: 100%; }
}