Body {
    font-family: 'Roboto';
}
p {
    line-height: 20px;
    margin-block-start: 0.6em;
    margin-block-end: 0.6em;
}
#contener {
    width: 100%;
}
nav {
    background-color: #a7b6bf;
    color: #fff;
    margin-bottom: 1%;
    height: 290px;
}
#row{
    width: 96%;
    margin: 2% auto;
}

.col1 {
    display: inline-block;
    width: 16%;
    padding: 20px;
    height: 250px;
}
.col2 {
    display: inline-block;
    width: 74%;
    padding: 20px;
    vertical-align: top;
    margin-top: 50px;
}

h2 {
    font-size: 3.4em;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

h3 {
    font-size: 2em !important;
    font-family: roboto;
}

.modal h1 {
    color: #a0006d;
    font-size: 48px !important;
    margin-left: 20px;
}

.logo {
height: 100%;
}
.videos  {
    width: 21%;
    display: inline-block;
    text-align: center;    
    margin: 20px 20px 10px 40px;
    vertical-align: top;
}

.presentation {
    width: 62%;
    display: inline-block;
    margin: 20px 40px 2px 40px;
    font-family: "Roboto";
    font-weight: 300;
    line-height: 25px;
    /*font-style: italic;*/
    font-size: 16px;
    padding-top : 20px;
    padding-left: 60px;
    padding-right: 60px;
    padding-bottom: 30px;;
    background-color: #daf7fe;
    /*border: 2px solid #a7b6bf;*/
}

.imagette {
    width:90%;
    padding: 20px;
    margin: 0px;
    background-color:#fff;
    border: 2px solid rgb(57, 165, 168);
    border-radius: 15px;
    display: inline-block;
    vertical-align: top;
}

.imagette img {
      width: 220px; 
}

.comment {
    font-family: 'Open Sans';
    padding: 20px;
    margin: 0 0 0 50px;
    width: 70%;
    background-color:#fff;
    border: 2px solid rgb(57, 165, 168);
    display: inline-block;
    vertical-align: top;
    height: 194px;
    text-align: left;
}
.multicomment {
    font-family: 'Open Sans';
    padding: 20px;
    margin: 0 0 0 30px;
    width: 48%;
    background-color:#fff;
    border: 2px solid rgb(57, 165, 168);
    display: inline-block;
    vertical-align: top;
    height: 194px;
    text-align: left;
}
/*.multicomment li {
    font-size: 0.8em;
} */
.onetheme {
    vertical-align: top;
    text-align: center;
    height: auto !important;
}
.onethemerea {
    vertical-align: top;
    text-align: center;
    height: 265px !important;
}
.barbuttons {
    text-align: center;
}
button {
    background-color: rgb(147, 181, 182);
    font-family: 'Open Sans';
    font-size: 0.8em;
    font-weight: 600;
    color: #fff;
    padding: 8px;
}

button:hover {
    background-color: rgb(95, 140, 141);
    cursor: pointer;
}

button a {
    text-decoration: none;
    color: #000;
}
button a:hover {
    text-decoration: none;
    color: #fff;
}

.oneaction {
    font-family: "Open Sans", "Adobe Blank, arial";
    margin-block-start: 0em;
    margin-block-end: 0.5em;
    font-weight: 600;
    font-size: 1.2em;
    text-decoration: none !important;
    background:#063f94;
    color: #ffffff;
    border-radius:8px;
    line-height: 30px;
}

.descriptionaction {
    font-size: 1em;
    font-style: italic;
    text-decoration: none !important;
    text-align: left;
    background: #eefafd;
    color: #063f94;
    padding: 15px;
    border-radius: 6px;
    text-align: justify;
}

.oneBook a {
    text-decoration: none !important;
}

.imagette ul li {
    text-align: left;
    font-size: 0.9em;
    color: #a0006d;
}

.imagette img {
    min-height: 207px;
    margin-top: 20px;
}
.spaceH {
    width: 8%;
    display: inline-block;
}
.line {
    margin : 15px 0;
}
a.opaque:hover {
    opacity: 0.6;
}

a.lientexte {
    text-decoration: none;
}
a.lientexte:hover {
    opacity: 0.5;
    filter: alpha(opacity=50);
    color:#BFF4EF;
}

.remarq {
    font-style: italic;
    font-size: 12px;
    padding : 8px;
    background-color: rgba(57, 165, 168, 0.4);
}

.phototof {
    width: 300px;
    
}
figure {
    float: left;
    padding: 0 20px 20px 0;
    width: 300px;
}

figcaption {
  background-color: rgba(57, 165, 168, 0.4);
  color: #000;
  font: italic smaller sans-serif;
  padding:3px;
  text-align: center;
}

.contcarte, .contcarte1, .contcarte2, .contcarte3, .contcarte4, .contcarte5, .contcarte6, .contcarte7, .contcarte8, .contcarte9 {
    width: 300px;
    height: 210px;
    perspective: 210px;
    margin: 2rem;
    display: inline-block;
}

.typecart, .typecart1, .typecart2, .typecart3, .typecart4, .typecart5, .typecart6, .typecart7, .typecart8, .typecart9 {
    height: 100%;
    width: 100%;
    position: relative;
    transition: transform 1500ms;
    transform-style: preserve-3d;
}

.front, .back, .front1, .back1, .front2, .back2, .front3, .back3, .front4, .back4, .front5, .back5, .front6, .back6, .front7, .back7, .front8, .back8, .front9, .back9 {
    height: 100%;
    width: 100%;
    border-radius: 2rem;
    box-shadow: 0 0 5px 2px rgba(36, 130, 193, 0.50);
    position: absolute;
    backface-visibility: hidden;
}

.front {
    background-image: url('../../images/realisations-web2.jpg');
    background-repeat: no-repeat; 
    background-position: center;
    background-size: contain;
    color: #014471;
    text-align: center;
    vertical-align: middle;
}

.front1 {
    background-image: url('../../images/tablette-mobile.jpg');
    background-repeat: no-repeat; 
    background-position: center;
    background-size: contain;
    color: #014471;
    text-align: center;
    vertical-align: middle;
}

.front2 {
    background-image: url('../../images/redaction-specifications-techniques.jpg');
    background-repeat: no-repeat; 
    background-position: center;
    background-size: contain;
    color: #014471;
    text-align: center;
    vertical-align: middle;
}

.front3 {
    background-image: url('../../images/maquettes-et-prototypes-application-web.jpg');
    background-repeat: no-repeat; 
    background-position: center;    
    background-size: contain;
    color: #014471;
    text-align: center;
    vertical-align: middle;
}

.front4 {
    background-image: url('../../images/reseau_bleu_clavier.jpg');
    background-repeat: no-repeat; 
    background-position: center;    
    background-size: contain;
    color: #014471;
    text-align: center;
    vertical-align: middle;
}

.front5 {
    background-image: url('../../images/plannification-et-feuille-route-application-web.jpg');
    background-repeat: no-repeat; 
    background-position: center;    
    background-size: contain;
    color: #014471;
    text-align: center;
    vertical-align: middle;
}

.front6 {
    background-image: url('../../images/roadmap-et-planning-projet-web.jpg');
    background-repeat: no-repeat; 
    background-position: center;    
    background-size: contain;
    color: #014471;
    text-align: center;
    vertical-align: middle;
}

.front7 {
    background-image: url('../../images/maquettes-et-prototypes.jpg');
    background-repeat: no-repeat; 
    background-position: center;    
    background-size: contain;
    color: #014471;
    text-align: center;
    vertical-align: middle;
}

.front8 {
    background-image: url('../../images/presentations-partage-equipe.jpg');
    background-repeat: no-repeat; 
    background-position: center;    
    background-size: contain;
    color: #014471;
    text-align: center;
    vertical-align: middle;
}

.front9 {
    background-image: url('../../images/accessibilite-numerique.jpg');
    background-repeat: no-repeat; 
    background-position: center;    
    background-size: contain;
    color: #014471;
    text-align: center;
    vertical-align: middle;
}


.front h3, .front1 h3, .front2 h3, .front3 h3, .front4 h3, .front5 h3, .front6 h3, .front7 h3, .front8 h3, .front9 h3  {
    margin-top: 55px;
    background: rgba(250,250,250,0.75);
    font-size: 26px !important;
}

.contcarte:hover > .typecart, .contcarte1:hover > .typecart1, .contcarte2:hover > .typecart2, .contcarte3:hover > .typecart3, .contcarte4:hover > .typecart4, .contcarte5:hover > .typecart5, .contcarte6:hover > .typecart6, .contcarte7:hover > .typecart7, .contcarte8:hover > .typecart8, .contcarte9:hover > .typecart9 {
    cursor: pointer;
    transform: rotateY(180deg) rotateZ(180deg);
}

.back, .back1, .back2, .back3, .back4, .back5, .back6, .back7, .back8, .back9 {
    background-color: #4a8dde;
    color: #fff;
    transform: rotateY(180deg) rotateZ(180deg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
}

.back h1 {
    font-size: 22px;
}

.back1 h1, back2 h1, back3 h1, back4 h1, back5 h1, back6 h1, back7 h1, back8 h1, back9 h1 {
    font-size: 22px;
}

.back p, .back1 p, .back2 p, .back3 p  {
    font-size: 14px;
    color: #fff;
    text-align: center;
    justify-content: center;
}

.modal-btn {
    padding: 5px 10px;
    font-size: 14px;
    margin: 20px auto;
    display: block;
    cursor: pointer;
    border-radius: 12px;
    border: #fff solid 2px;
    background-color: rgb(160, 0, 109);
}
.modal-container {
    display: none;
    position: fixed;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 5;
}

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #333333d3;
}

.modal {
    width: 80%;
    max-height: 75%; /* Pour l'ascenseur */
    padding: 30px;
    background: #fff;
    border-radius: 5px;
    position: absolute;
    margin-top: 5%;
    margin-left: 8%;
    overflow: auto; /* Pour l'ascenseur */
}

.close-modal {
    padding: 8px 10px;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    background: #a0006d;
    color: #fff;
}

.close-modal:hover {
    background: #a0006d;
    color: #fff;
}

.modal h1 {
    margin-bottom: 10px;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
}

.modal p {
    line-height: 1.4;
    margin-bottom: 5px;
}

.oneBook {
    margin: 20px 30px;
    display: inline-block;
    height: 100%;
    width: 28%;
}

.commentaireTheme {
    padding: 30px;
    background-color: #eefafd;
    font-size: 16px;
    margin-bottom: 30px; 
    text-align: left;
}

.allcards { 
    text-align: center;
}

.bandeauTitre {
    background-color : #2ea3f2;
    width: 100%;
    vertical-align : top;
    height: 256px;    
}

.logochris {
    width: 15%;
    display: inline-block;
    height: 100%;
   vertical-align : top;    
}

.logochris img{
    max-height: 200px;
    margin: 20px 20px;
    border: 2px solid #fff;
    padding: 6px;
    height: 100%;    
}

.photoChris {
   width: 15%;
    display: inline-block;
    vertical-align : top;
    height: 240px;
    text-align: center;
}

.titreGeneral {
   width: 68%;
   height: 100%;
   display: inline-block;
   color: #fff;
   vertical-align : top;
   align-content: center; 
}

.monTextedebut {
;
    color: #063f94;
    margin-right: 20px;
    line-height: 50px;
    margin: 0;
    padding: 0;
    vertical-align: bottom;
}

.monTexteAvant::before {
    font-size: 200px;
    font-weight: 700;
    content: '"';
    vertical-align : bottom;
    display: inline-block;
    margin-bottom: -100px;
    color: #063f94;
    font-family: Helvetica, Open sans,Roboto,Times New Roman, Lucinda console, Georgia, sans-serif; 
}

.monTexteApres::after {
    font-size: 200px;
    font-weight: 700;
    font-family: Helvetica, palatino, trebuchet MS,Tahoma, Garamond, Georgia, sans-serif;
    width: 100%;
    content: '"';
   text-align: right;
   display: inline-block;
   color: #063f94;
   margin-top: -10px;
}

.decalDroite {
   margin-right: 80px;
}

.decalGauche {
   margin-left: 100px;
}

footer {
    margin-top : 60px;;
    width: 100%;
    color: #ffffff;
    background-color: #2ea3f2;
    height: 40px;;
}
.footClass{
    vertical-align: middle;
    align-content: center;
    display: inline-block;
    width: 24%;
    height: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
    line-height: 20px;
    border:none;
    color: #ffffff;
}

.quote {
    quotes: '"' '"';
}

.quote::before {
    content: open-quote;
    color: red;
    font-size: 50px;
}

.quote::after {
    content: close-quote;
    color: red;
    font-size: 100px;
    display: inline-block;
    margin-top: 50px;
}


.footClass a {
color:#fff;
cursor: pointer;
}

.footClass a:hover {
color:#a0006d;
}

.cotehaut {
    float: left;
    margin: 0 20px 0 20px;
}
.cotebas {
    float: right;
    height: 100%;
    display: flex;
    align-items: flex-end;
    margin-top: -60px;
    margin-left: -30px;
}
.decalDroite {
    width: 95%;
}


@media screen and (max-width: 840px) {
   .oneBook {
        margin: 12px 8px;
        display: block;
        height: 100%;
        width: 90%;
    }
    
.footClass{
    vertical-align: middle;
    align-content: center;
    display: inline-block;
    width: 100%;
    height: 40px;;
    text-align: center;
    margin: 0;
    padding: 0;
    border:none;
    color: #ffffff;
}

.modal {
    width: 70%;
    max-height: 75%; /* Pour l'ascenseur */
    padding: 30px;
    background: #fff;
    border-radius: 5px;
    position: absolute;
    margin-top: 5%;
    margin: auto;
    overflow: auto; /* Pour l'ascenseur */
}
h2 {
    font-family: roboto arial sans serif;
    font-size: 1.3em;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    text-align: center;    
}

.photoChris {
  display: none;  
} 
.bandeauTitre {
    background-color : #2ea3f2;
    width: 100%;
    vertical-align : top;
    height: 134px;    
}
.logochris {
    width: 25%;
    display: inline-block;
    height: 100%;
   vertical-align : top;    
}

.logochris img{
    max-height: 100px;
    margin: 10px 10px;
    border: 2px solid #fff;
    padding: 6px;
    height: 100%;    
}

.presentation {
    width: 80%;
    margin: 0 10px 2px 10px;
    text-align: left;
    font-family: "Roboto";
    font-weight: 300;
    line-height: 25px;
    /*font-style: italic;*/
    font-size: 16px;
    padding-top : 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 0;
    background-color: #daf7fe;
    /*border: 2px solid #a7b6bf;*/
}

.introBook {
    text-align : center;
}

iframe {
    width: 94%;
    height: 100%;
    border: 2px solid rgb(1, 68, 113);
    padding: 8px;
}

.videos {
    width: 92%;
    margin: 10px 0;
}

.monTexteAvant::before {
    font-size: 100px;
    font-weight: 700;
    line-height: 1px;
    content: '"';
    vertical-align : bottom;
    display: inline-block;
    margin-bottom: -40px;
    color: #063f94;
    font-family: Helvetica, Open sans,Roboto,Times New Roman, Lucinda console, Georgia, sans-serif; 
}
.decalGauche {
   margin-left: 50px;
   float: left;
}
q {
    font-size: 100px;
    font-weight: 700;
    color: #063f94;
}
.monTexteApres::after {
    font-size: 100px;
    font-weight: 700;
    font-family: Helvetica, palatino, trebuchet MS,Tahoma, Garamond, Georgia, sans-serif;
    width: 100%;
    content: '"';
   text-align: right;
   display: inline-block;

   margin-top: -10px;
}

.decalDroite {
   margin-right: 0;
      float: left;
}
.modal-trigger {}
.row {}