body {
    padding: 0;
margin: 0 auto;
text-align: center;
margin-top: 9px;
    overflow-x: hidden;
    font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace; 
       height: fit-content;
       height: 100%;
         overflow: scroll;
}
.head 
{

position: fixed;
height: 10px;
 z-index: 20;
    top: 0;
   
}


/*Footer position*/
.footer
{
 flex: 20%;

margin-right: 0px;

height: 10px;
    margin-bottom: 0px;
   
}
/*position des rangées de fiche ministerielle*/
.row_fiche {
  display: flex;
  flex-wrap: wrap-reverse;
  padding: 0 2px;
  position: static;
  margin-bottom: 5px;          
}
   img.fd1,
img.fd2,
img.fd3 {
  width: 33%;
 height: auto;
  padding: 5px;
  float: left;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}

    img.fd4,
img.fd5,
img.fd6,
img.fd7,
img.fd8
{
  width: 19%;
  height: auto;
  padding: 2px;
transform: translateX(-8%);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
  margin: 0;
 
}

.holder {
  width: 100%;
    margin-left: 7px;
}
.holder_petitefiche {
  width: 103%;
}

/*position des rangées des images en lightbox*/


.row {
  display: flex;
  flex-wrap: wrap-reverse;
  padding: 0 4px;

    position: static;
    margin-bottom: 5px;
            
}



.row_steno{
  display: flex;
  flex-wrap: wrap-reverse;
  padding: 0 4px;
justify-content: center;
    position: static;
    margin-bottom: 5px;
       width: 70%;   
    margin-left: 15%;
}

/* Create four equal columns that sits next to each other */

/* Create four equal columns that sits next to each other */
.column {
  
  flex: 20%;
  max-width: 30%;
  padding: 0 2px;
    margin-right: auto;
width: 100%;
}

.column img {
   
  margin-top: 4px;
  vertical-align: middle;
  width: 100%;
 cursor: pointer;
    
}

/*Papier peint */
img.superbg {
    position:fixed;
    top:0;
    left:0;
    z-index:-1;
    background-image: cover;
    background-attachment: fixed;
    width:100%; 
    height:100%;
    background-size: cover;
}
/*placement de l'image bannière*/
.header_image
{
position: fixed;
  opacity: 0.8;
  max-height:25px;
 
}

.header_image img
{
    top:0;
  vertical-align: middle;
  width: 100%;
 cursor: pointer;
     background-image: cover;
      background-size: cover;
    position:fixed;
    max-height:25px;
    opacity: 0.7;
    
}

/*Placement image de titre*/
.wrapper{
    padding-top: 45px;
}


/*Placement des lightbox*/

.lightbox-target {
position: fixed;
     
top: -100%;
width: 100%;
width: 100%;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
overflow: hidden;
}



.lightbox-target img {
margin: auto;
    z-index: 2;
position: absolute; /*absolute*/
top: 0;
left:0;
right:0;
bottom: 0;
max-height: 0%;
max-width: 0%;
    height:90vh;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}

/* Styles the close link, adds the slide down transition */

a.lightbox-close {
background:url(../background_test/dingle_back-1.gif)no-repeat center center; width:100%; height:100%;
    background-image: cover;
    background-attachment: fixed;
    position: absolute;
    background-size: cover;
    opacity: 0.95;
    right:0px;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
    cursor:alias;
}

/* Provides part of the "X" to eliminate an image from the close link */

a.lightbox-close:before {
content: "";

-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}

/* Provides part of the "X" to eliminate an image from the close link */

a.lightbox-close:after {
content: "";

-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}

/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */

.lightbox-target:target {
opacity: 1;
top: 0;
bottom: 0;
}

.lightbox-target img {
max-height: 100%;
max-width: 100%;
}



/*contenu du header avec le texte INDEX CHAPITRES ET @MAILTO:*/
.header-content {
    position: sticky;
width: 100vw;
    height:auto;
    
  top: 0;
    z-index: 99999;
     
}
.mailto
{
   transform: translateX(59.6%);
}
   
   .banner {
            width: 100%;
           
            height: 30px; /* Ajustez la hauteur selon vos besoins */
            position: fixed;

            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 2; /* Pour que la bannière soit au-dessus du contenu */
        }

   .banner_bottom {
            width: 100%;
           
            height: 30px; /* Ajustez la hauteur selon vos besoins */
            position: absolute;

            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 2; /* Pour que la bannière soit au-dessus du contenu */
        }

/*Gestion caractéristiques du menu de la bannière*/
        .colored-text {
 font-family: "Courier New" ,monospace;
    text-align: center;
     font-size: 1.4em;
           
            position: relative;
            display: inline-block;
        }

          .red-text {
            display: inline-block;
            cursor: pointer;
 
            color: red;
             opacity: 0.3;
             margin-left: 3px;
         background: rgb(9,95,134);
background: -moz-linear-gradient(90deg, rgba(9,95,134,1) 4%, rgba(21,113,89,1) 15%, rgba(142,148,50,1) 29%, rgba(176,84,66,1) 43%, rgba(92,78,106,1) 51%, rgba(40,47,98,1) 57%, rgba(47,184,127,1) 65%, rgba(156,149,8,1) 75%, rgba(55,41,36,1) 88%, rgba(255,0,0,1) 255%);
background: -webkit-linear-gradient(90deg, rgba(9,95,134,1) 4%, rgba(21,113,89,1) 15%, rgba(142,148,50,1) 29%, rgba(176,84,66,1) 43%, rgba(92,78,106,1) 51%, rgba(40,47,98,1) 57%, rgba(47,184,127,1) 65%, rgba(156,149,8,1) 75%, rgba(55,41,36,1) 88%, rgba(255,0,0,1) 255%);
background: linear-gradient(90deg, rgba(9,95,134,1) 4%, rgba(21,113,89,1) 15%, rgba(142,148,50,1) 29%, rgba(176,84,66,1) 43%, rgba(92,78,106,1) 51%, rgba(40,47,98,1) 57%, rgba(47,184,127,1) 65%, rgba(156,149,8,1) 75%, rgba(55,41,36,1) 88%, rgba(255,0,0,1) 255%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#095f86",endColorstr="#ff0000",GradientType=1);
                        line-height: 12px;
            
        }

        .green-text {
            display: inline-block;
            cursor: pointer;
            
            color: greenyellow;
             opacity: 0.8;
             margin-left: 2px;
                      background: rgb(9,95,134);
background: -moz-linear-gradient(90deg, rgba(9,95,134,1) 4%, rgba(21,113,89,1) 15%, rgba(142,148,50,1) 29%, rgba(176,84,66,1) 43%, rgba(92,78,106,1) 51%, rgba(40,47,98,1) 57%, rgba(47,184,127,1) 65%, rgba(156,149,8,1) 75%, rgba(55,41,36,1) 88%, rgba(255,0,0,1) 255%);
background: -webkit-linear-gradient(90deg, rgba(9,95,134,1) 4%, rgba(21,113,89,1) 15%, rgba(142,148,50,1) 29%, rgba(176,84,66,1) 43%, rgba(92,78,106,1) 51%, rgba(40,47,98,1) 57%, rgba(47,184,127,1) 65%, rgba(156,149,8,1) 75%, rgba(55,41,36,1) 88%, rgba(255,0,0,1) 255%);
background: linear-gradient(90deg, rgba(9,95,134,1) 4%, rgba(21,113,89,1) 15%, rgba(142,148,50,1) 29%, rgba(176,84,66,1) 43%, rgba(92,78,106,1) 51%, rgba(40,47,98,1) 57%, rgba(47,184,127,1) 65%, rgba(156,149,8,1) 75%, rgba(55,41,36,1) 88%, rgba(255,0,0,1) 255%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#095f86",endColorstr="#ff0000",GradientType=1);
                        line-height: 3px;
        }

        .blue-text {
            display: inline-block;
            cursor: pointer;
            
            color: blue;
            opacity: 0.9;
             margin-left: 0px;
            background: rgb(9,95,134);
background: -moz-linear-gradient(90deg, rgba(9,95,134,1) 4%, rgba(21,113,89,1) 15%, rgba(142,148,50,1) 29%, rgba(176,84,66,1) 43%, rgba(92,78,106,1) 51%, rgba(40,47,98,1) 57%, rgba(47,184,127,1) 65%, rgba(156,149,8,1) 75%, rgba(55,41,36,1) 88%, rgba(255,0,0,1) 255%);
background: -webkit-linear-gradient(90deg, rgba(9,95,134,1) 4%, rgba(21,113,89,1) 15%, rgba(142,148,50,1) 29%, rgba(176,84,66,1) 43%, rgba(92,78,106,1) 51%, rgba(40,47,98,1) 57%, rgba(47,184,127,1) 65%, rgba(156,149,8,1) 75%, rgba(55,41,36,1) 88%, rgba(255,0,0,1) 255%);
background: linear-gradient(90deg, rgba(9,95,134,1) 4%, rgba(21,113,89,1) 15%, rgba(142,148,50,1) 29%, rgba(176,84,66,1) 43%, rgba(92,78,106,1) 51%, rgba(40,47,98,1) 57%, rgba(47,184,127,1) 65%, rgba(156,149,8,1) 75%, rgba(55,41,36,1) 88%, rgba(255,0,0,1) 255%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#095f86",endColorstr="#ff0000",GradientType=1);
            line-height: 7px;
        }
        /*classes pour le menu situé à droite dans le header nécessite un décalage par la droite plutôt par la gauche*/
        .green-text-right{
            display: inline-block;
            cursor: pointer;
            color: greenyellow;
             opacity: 0.8;
             margin-right: 12px;
            line-height: 3px;
background: rgb(9,95,134);
background: -moz-linear-gradient(90deg, rgba(9,95,134,1) 4%, rgba(21,113,89,1) 15%, rgba(142,148,50,1) 29%, rgba(176,84,66,1) 43%, rgba(92,78,106,1) 51%, rgba(40,47,98,1) 57%, rgba(47,184,127,1) 65%, rgba(156,149,8,1) 75%, rgba(55,41,36,1) 88%, rgba(255,0,0,1) 255%);
background: -webkit-linear-gradient(90deg, rgba(9,95,134,1) 4%, rgba(21,113,89,1) 15%, rgba(142,148,50,1) 29%, rgba(176,84,66,1) 43%, rgba(92,78,106,1) 51%, rgba(40,47,98,1) 57%, rgba(47,184,127,1) 65%, rgba(156,149,8,1) 75%, rgba(55,41,36,1) 88%, rgba(255,0,0,1) 255%);
background: linear-gradient(90deg, rgba(9,95,134,1) 4%, rgba(21,113,89,1) 15%, rgba(142,148,50,1) 29%, rgba(176,84,66,1) 43%, rgba(92,78,106,1) 51%, rgba(40,47,98,1) 57%, rgba(47,184,127,1) 65%, rgba(156,149,8,1) 75%, rgba(55,41,36,1) 88%, rgba(255,0,0,1) 255%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#095f86",endColorstr="#ff0000",GradientType=1);
            
        }
        .blue-text-right{
            display: inline-block;
            cursor: pointer;
            color: blue;
             opacity: 0.9;
             margin-right: 10px;
             line-height: 7px;
           background: rgb(9,95,134);
background: -moz-linear-gradient(90deg, rgba(9,95,134,1) 4%, rgba(21,113,89,1) 15%, rgba(142,148,50,1) 29%, rgba(176,84,66,1) 43%, rgba(92,78,106,1) 51%, rgba(40,47,98,1) 57%, rgba(47,184,127,1) 65%, rgba(156,149,8,1) 75%, rgba(55,41,36,1) 88%, rgba(255,0,0,1) 255%);
background: -webkit-linear-gradient(90deg, rgba(9,95,134,1) 4%, rgba(21,113,89,1) 15%, rgba(142,148,50,1) 29%, rgba(176,84,66,1) 43%, rgba(92,78,106,1) 51%, rgba(40,47,98,1) 57%, rgba(47,184,127,1) 65%, rgba(156,149,8,1) 75%, rgba(55,41,36,1) 88%, rgba(255,0,0,1) 255%);
background: linear-gradient(90deg, rgba(9,95,134,1) 4%, rgba(21,113,89,1) 15%, rgba(142,148,50,1) 29%, rgba(176,84,66,1) 43%, rgba(92,78,106,1) 51%, rgba(40,47,98,1) 57%, rgba(47,184,127,1) 65%, rgba(156,149,8,1) 75%, rgba(55,41,36,1) 88%, rgba(255,0,0,1) 255%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#095f86",endColorstr="#ff0000",GradientType=1);
            
        }

        .red-text-right{
            
            cursor: pointer;
            color: red;
             opacity: 0.5;
             margin-right: 13px;
             line-height: 12px;
           background: rgb(9,95,134);
background: -moz-linear-gradient(90deg, rgba(9,95,134,1) 4%, rgba(21,113,89,1) 15%, rgba(142,148,50,1) 29%, rgba(176,84,66,1) 43%, rgba(92,78,106,1) 51%, rgba(40,47,98,1) 57%, rgba(47,184,127,1) 65%, rgba(156,149,8,1) 75%, rgba(55,41,36,1) 88%, rgba(255,0,0,1) 255%);
background: -webkit-linear-gradient(90deg, rgba(9,95,134,1) 4%, rgba(21,113,89,1) 15%, rgba(142,148,50,1) 29%, rgba(176,84,66,1) 43%, rgba(92,78,106,1) 51%, rgba(40,47,98,1) 57%, rgba(47,184,127,1) 65%, rgba(156,149,8,1) 75%, rgba(55,41,36,1) 88%, rgba(255,0,0,1) 255%);
background: linear-gradient(90deg, rgba(9,95,134,1) 4%, rgba(21,113,89,1) 15%, rgba(142,148,50,1) 29%, rgba(176,84,66,1) 43%, rgba(92,78,106,1) 51%, rgba(40,47,98,1) 57%, rgba(47,184,127,1) 65%, rgba(156,149,8,1) 75%, rgba(55,41,36,1) 88%, rgba(255,0,0,1) 255%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#095f86",endColorstr="#ff0000",GradientType=1);
            
        }
/*option de surlignement lorsque la souris passe sur les éléments du menu*/
.red-text:hover{
               
 line-height: 10px;
    visibility: visible;
     opacity: 0.8;  
filter: drop-shadow(0 0 0.3rem #efff08);
    }

.blue-text:hover{
               
line-height: 12px;
    visibility: visible;
     opacity: 0.8;  
filter: drop-shadow(0 0 0.3rem #efff08);
    }

.green-text:hover{
           
line-height: 2px;
    visibility: visible;
     opacity: 0.8;  
filter: drop-shadow(0 0 0.3rem #efff08);
    }
        
.red-text-right:hover{
    
line-height: 10px;
    visibility: visible;
     opacity: 0.8;  
filter: drop-shadow(0 0 0.3rem #efff08);    }

.blue-text-right:hover{
            
line-height: 10px;
    visibility: visible;
     opacity: 0.8;  
filter: drop-shadow(0 0 0.3rem #efff08);    }


.green-text-right:hover{
             
line-height: 10px;
    visibility: visible;
     opacity: 0.8;  
filter: drop-shadow(0 0 0.3rem #efff08);    }

/*MENU CHAPITRE MINISTERE*/
a.chapitre{

    font-size: 1.2em;

  position: relative;
    opacity: 1;
    font-family: "Courier New" ,monospace;
    text-align: center;
    color: white;
    background-color: black;
    
    text-decoration: underline overline white;
    }
a.titre_chapitre{

    font-size: 18px;

  position: relative;
    opacity: 1;
    font-family: "Courier New" ,monospace;
    text-align: center;
    color: white;
    background-color: black;
    
    text-decoration: underline overline white;
    }
.description_chapitres
{

font-size: 1.4em;

  position: relative;
    opacity: 0.8;
    font-family: "Courier New" ,monospace;
    text-align: center;
    color: white;
    text-decoration: none;
    text-decoration: none;
   padding: 0.5em 0;
    background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(6,87,10,1) 17%, rgba(9,34,121,1) 35%, rgba(7,148,11,1) 48%, rgba(171,6,26,1) 67%, rgba(74,202,4,1) 81%, rgba(0,74,255,1) 100%);
    color: #ffffff;
}
.chapitre:hover

{
    visibility: visible;
     opacity: 0.8;  
background: rgb(255,0,0);
background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(6,87,10,1) 17%, rgba(9,34,121,1) 35%, rgba(7,148,11,1) 48%, rgba(171,6,26,1) 67%, rgba(74,202,4,1) 81%, rgba(0,74,255,1) 100%);
    
}


/* Placemement des images sur la page*/

.camera_big 
{
 flex: 50%;
    max-width: 45%;
    width: 55%;
    height: auto;
    opacity: 0.95;
      }



.camera_big_steno
{
 flex: 100%;
    max-width: 45%;
    width: 55%;
    height: auto;
    opacity: 0.8;
 }


.camera_lens
{
 flex: 20%;
    height: auto;
    max-width: 35%;
    padding-bottom: 20px;
    padding-top: 20px;
        padding-right: 20px;
            opacity:0.8;
  margin-left: 10%;
}

/*Placement et caracteristiques du texte et des titres de la page*/
.camera_title
{
   
         text-shadow: -1px 1px 0 #000, 
                          1px 1px 0 #000, 
                         1px -1px 0 #000, 
                        -1px -1px 0 #000; 
   

    font-family: "Courier New" ,monospace;
    text-align: center;
    opacity: 0.9;
    font-size: 34px;
      position: relative;
    left: 2px;

 
}


.description_camera
{

font-size: 1.2em;
line-height: 25px;
  position: relative;
    opacity: 0.9;
   font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace; 
    text-align: center;
            text-shadow: -1px 1px 0 #000, 
                          1px 1px 0 #000, 
                         1px -1px 0 #000, 
                        -1px -1px 0 #000; 
font-weight: normal;
    font-size-adjust: none;
    font-style: normal; 
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    
}


.container{
    padding-top: 0px;
    max-width: 70vw;
     margin: 0 auto;
        display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 3%;
    padding-bottom: 2%;
    
}
  mark{
   background-color: black;
      background-color: rgba(0,0,0,0.4);
            border-image: url('../background_test/dingle_text.gif')4 fill / 4px /6px space;
     -webkit-border-image: url('../background_test/dingle_text.gif')4 fill / 4px /6px space;
-o-border-image: url('../background_test/dingle_text.gif')4 fill / 4px /6px space;
         
      color: white;
line-height:30px; 
    }


.lightbox img{
 opacity:0.95;
    z-index: 65;
}





/*Cible tous les phones en portrait*/
@media (pointer:coarse) {
    
       .lightbox-target img {

    width:90vw;
        height: auto;
}
   
    .mailto{
        transform: translateX(15%);
    }
    
    .container{
        
        max-width: 98vw;
    }
.row{
  display: flex;
  padding: 0 4px;
    
    margin-bottom: 0px;
       width: 95vw;   
    margin-left: 1.5%;
    max-width: 100vw;
}



/* Create four equal columns that sits next to each other */

.column{
  
  flex: 33.333%;
  max-width: 100%;
  padding: 0 2px;
   
width: 100%;
}


.column img {
   
  margin-top: 4px;
  vertical-align: middle;
width: 100%;
 cursor: not-allowed;
    
}
    
    .row img{
      width: 100%;
    }


    .camera_big 
{
 flex: 50%;
    max-width: 80%;
    width: 90%;
    height: auto;
    
      }
    
    .camera_big_steno
{
 flex: 100%;
    max-width: 95%;
    width: 100%;
    height: auto;
   
 }

    
.camera_title
{
   

   
    font-family: "Courier New" ,monospace;
    text-align: center;

    font-size: 1.8em;
      position: relative;
    left: 2px;
         text-shadow: -1px 1px 0 #000, 
                          1px 1px 0 #000, 
                         1px -1px 0 #000, 
                        -1px -1px 0 #000; 

}


.description_camera
{

font-size: 0.9em;
line-height: 2px;
  position: relative;

    font-family: "Courier New" ,monospace;
    text-align: center;
            text-shadow: -1px 1px 0 #000, 
                          1px 1px 0 #000, 
                         1px -1px 0 #000, 
                        -1px -1px 0 #000; 
font-weight: normal;
    font-size-adjust: none;
    font-style: normal; 
}
  mark{
   background-color: black;
      background-color: rgba(0,0,0,0.6);


         
    text-decoration: none;
}
.colored-text {
    font-size:1em;
}
       .header_image img
{
    top:0;
  vertical-align: middle;
  width: 100%;
 cursor: pointer;
     background-image: cover;
      background-size: cover;
    position:fixed;
    max-height:280px!important;
    height: 25px;
    opacity: 0.7;
    
}
 
}

@media (orientation: landscape) and (hover: none) and (pointer: coarse) {
      .banner {
            width:100vw;
    
    }
        .description_camera
{

font-size: 0.9em;
line-height: 23px;
  position: relative;

    font-family: "Courier New" ,monospace;
    text-align: center;
    font-weight: normal;
    text-decoration: none;
    font-size-adjust: none;
    font-style: normal; 
}
    
    .mailto{
        transform: translateX(55%);
    }
    
    .camera_title
{
   

   
    font-family: "Courier New" ,monospace;
    text-align: center;
    
    font-size: 1.9em;
      position: relative;
    left: 2px;
         text-shadow: -1px 1px 0 #000, 
                          1px 1px 0 #000, 
                         1px -1px 0 #000, 
                        -1px -1px 0 #000; 

}
    
        .camera_big 
{
 flex: 50%;
    max-width: 50%;
    width: 55%;
    height: auto;

      }
        .camera_big_steno
{
 flex: 100%;
    max-width: 60%;
    width: 65%;
    height: auto;
   
 }

      mark{
   background-color: black;
      background-color: rgba(0,0,0,0.6);


    text-decoration: none;
}
           .lightbox-target img {

    width:auto;
        height: 90vh;
}
    }