/*Début layout ------------------------------------------------------- */
div.accordion-option+div.accordion-option {margin-top: 1em;}
.DIVSOUSAccordeon {display: flex; flex-flow: row wrap;}
.DIVSOUSAccordeon {justify-content: flex-start; align-content: stretch; align-items: stretch; }
.DIVSOUSAccordeon {/*height: 55%;*/ width: 98%;}
         .DIVSAImage {display: flex; flex-flow: row nowrap; align-items: flex-start;}
         .DIVSAImage {margin-top: 0%; width: 100%;}
              .Fonctionnalite-TImages {flex: 1, 1, 66%; height: 400px; width: auto; margin: 0% 0% 0% 0%;} /*Top Right Bottom Left*/
                          .DIVSATexte {flex: 0, 2, 32%; height: 400px; width: auto; margin: 0% 0% 0% 1%;} /*Top Right Bottom Left*/
                          .DIVSATexte {overflow-y: auto;}

/*.accordionMixedContent*/
.accordionMixedContent {list-style: none; margin: 0; padding: 0;}
.accordionMixedContent {display: flex; flex-wrap: wrap;}
.outerULHorizontal, .accordionMixedContent {flex-direction: row;}


.accordionLeftContent {margin: .5em 0 auto; flex: 1 1 66%;}
  .accordionImageContent {min-width: 300px; width: 98%; margin: auto;}

.accordionRightContent {margin: .5em 0 auto; flex: 1 1 33%;}
  .accordionTextContent {width: 98%; margin: auto;}

  .accordionSingleContent {margin: .5em 0 auto; flex: 1 1 100%;}


/* fin Layout -------------------------------------------------------- */

/* Début Content */
h1 {color: #fff;
    font-weight: normal;
    font-size: 2.5rem;
    text-align: center;
   }

/* #43010E : Rouge orthassis */   
h1.surFondClair {font-size: 125%; color: #FF0032; text-align: center; } /* #43010E version shiny, selon https://paletton.com*/

/*.readme {color: #fff; margin: 0 auto; width: 80%; a {color: #00a486;} }*/
/* fin Content --------------------------------------------------------- */

/*____________________________  Accordion  ______________________________*/

  .accordion {position: relative;
              margin: 30px auto; 
              width: 90%;
              /*margin: 60px auto; width: 80%;*/
              }
  
  [id*="open-accordion"], [id*="close-accordion"] {
    background: rgb(2, 129, 19);
    border-bottom: 1px solid #fff;
    line-height: 40px;
    height: 40px;
    display: block;
    margin: 0 auto;
    position: relative;
    width: 99%;
  }

  [id*="close-accordion"] {
    display: none;
  }

.accordion a {font-size: 1.25em; font-weight: normal; padding-left: 2%; text-shadow: none;}
.accordion a:link {color: #0000EE; text-decoration: underline; cursor: pointer;}
.accordion a:hover {color:#00ff00; text-decoration: none;}
.accordion a:visited {color: #FFA500; text-decoration: underline; cursor: pointer;}
.accordion a:link:active, .accordion a:visited:active {color: #FF0000; }

a.lienHorsBande {font-size: 100%; padding-left: 0%;}
a.lienHorsBande:link {color: #00ffff; text-decoration: underline;}
a.lienHorsBande:visited {color:orangered;}
a.lienHorsBande:hover {color:#00ff00; text-decoration: none;}
a.lienHorsBande:active, a.lienHorsBande:focus {color: red;}
  
  [id*="open-accordion"]:after, [id*="close-accordion"]:after {
    content: "";
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(255, 255, 255, 0.6);
    position: absolute;
    right: 5px;
    top: 15px;
    z-index: 9;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
  }
  
  .target-fix {
    display: block;
    top: 0;
    left: 0;
    position: fixed;
  }

  /* Accordéon fermé */
  .accordion-content {
    background: #fff;
    height: 0;
    margin: -1px auto 0;
    padding: 0 2.5%;
    position: relative;
    overflow: hidden;
    width: 90%;
    transition: all 0.1s ease;
    -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
  }

  /* Accordéon ouvert*/
  .accordion span:target ~ .accordion-content 
  {
    display: block;
    height: auto;
    padding-bottom: 25px;
    padding-top: 10px;
  }
  
  .accordion span:target ~ [id*="close-accordion"] {
    display: block;
  }
  
  .accordion span:target ~ [id*="open-accordion"] {
    display: none;
  }
  
  .accordion span:target ~ [id*="close-accordion"]:after {
    border-top: 10px solid #333;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }