/*

Theme Name: Incognito 2.0

Author: Antoine Boiteux

Description: an original responsive theme using 'Fancybox for WP' plugin and 'Photospace Responsive' plugin

Version : 2.0

Author URI: http://btx.free.fr

*/



/*---GENERAL---*/



html, body {

  height: 100%;

  margin: 0;

  word-wrap: break-word;

}



body{

  font-family: 'calibri_light', sans-serif;

  font-size: 14px;

  font-weight: 100;

  color: #000;

}



@font-face {

  font-family: 'calibri';

  src: url('font/calibri.ttf');

}



@font-face {

  font-family: 'calibri_light';

  src: url('font/calibril.ttf');

}



p{

  font-family: 'calibri_light', sans-serif;

  font-size: 14px;

  font-weight: 100;

  color: #000;

}



ul{

  font-family: 'calibri_light', sans-serif;

}



li{

  font-family: 'calibri_light', sans-serif;

}



h1{

  font-family: 'calibri', sans-serif;

  font-size: 1.5em;

  color: #434750;

  font-weight: normal;

  text-transform: uppercase;

  margin-bottom: 0;

}



h2{

  font-family: 'calibri_light', sans-serif;

  font-size: 1em;

  font-weight: normal;

  color: #434750;

  margin-top: 0;

}



h3{

  font-family: 'calibri_light', sans-serif;

  font-size: 1.2em;

  color: #000;

  font-weight: normal;

  text-align: center;

  text-transform: uppercase;

  margin: 0;

}



h4{

  font-family: 'calibri', sans-serif;

  font-size: 1.2em;

  color: #434750;

  font-weight: normal;

  margin-bottom: 0;

}



h5 {

  font-family: 'calibri_light', sans-serif;

  font-size: 1.2em;

  color: #434750;

  font-weight: normal;

  margin: 20px 0 5px 0;

  text-align: left;

  text-transform: uppercase;

}



#slogan a{text-decoration: none;}



.group a:link {color: #000; text-decoration: none}

.group a:visited {color: #000; text-decoration: none}

.group a:hover {color: #848484; text-decoration: underline;}

.group a:active {color: #848484; text-decoration: none}



/* Gradient transparent - color - transparent */  

hr {

    border: 0;

    height: 1px;

    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 

    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 

    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 

    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 

}



/*=== ibrahimjabbari.com hr style ===*/

hr.style11 {

  height: 6px;

  background: url(img/hr-11.png) repeat-x 0 0;

    border: 0;

}

/*=== end of hr style ===*/



.clear {

  clear: both;

}



/*---HEADER---*/



header{

  margin: 0;

}



header a{

  text-decoration: none;

}



#slogan{

  margin-left: auto;

  margin-right: auto;

  text-align: center;

  background-color: #FFF;

}



div#enTete{

  position: absolute;

  width: 200px;

  margin: 10px 0 0 0;

  height: auto;

  top: 0;

  left:0;

  display:block;

  min-height: 100% !important;

}



div#enTete img{

  margin: 0 0 0 10px;

}



/*--- MENU ---*/



#menu {

  list-style: none;

  text-align: center;

  margin: 0;

  padding: 0;

  width: 80%;

  margin-left: auto;

  margin-right: auto;

  font-size: larger;

}



#menu ul{

  -webkit-margin-before: 0em;

  -webkit-margin-after: 0em;

  -webkit-margin-start: 0px;

  -webkit-margin-end: 0px;

  -webkit-padding-start: 0px;

}



#menu li {

  display: inline-block;

  background: #FFF ;

  border: none ;

  margin: 0;

}



@media only screen and (max-width: 880px) {

    #menu li {  

    display: block;

    margin: auto;

    width: 50%;

    font-size: 0.9em;}

}



@media all and (min-width: 880px){

  #menu li{

    width: 19.5%;

  }

}



#menu li a{

    display: block;

  color: #000;

    border-bottom: solid 4px #FFF;

    background: #FFF ;

    font: 1em 'calibri_light', sans-serif ;

    text-transform: uppercase;

    line-height: 1em ;

    text-align: center ;

    text-decoration: none ;

    padding: 2%;

/*    margin: 0 20px;     */

}



#menu li a:hover, #menu li a:focus, #menu li a:active {

    background-color: #FFF;

    text-decoration: none ;

    -webkit-transition: all 300ms ease-out;

    -moz-transition: all 300ms ease-out;

    -o-transition: all 300ms ease-out;

    -ms-transition: all 300ms ease-out;

    transition: all 300ms ease-out;

}



#menu li:first-child a:hover, #menu li:first-child a:focus, #menu li:first-child a:active {

  border-bottom: solid 4px #434750;

  opacity:0.7;

}



#menu li:first-child.current-menu-item > a{

  border-bottom: solid 4px #434750;

}



#menu li:nth-child(2) a:hover, #menu li:nth-child(2) a:focus, #menu li:nth-child(2) a:active{

  border-bottom: solid 4px #FAD201;

  opacity:0.7;

}



#menu li:nth-child(2).current-menu-item > a{

  border-bottom: solid 4px #FAD201;

}



#menu li:nth-child(3) a:hover, #menu li:nth-child(3) a:focus, #menu li:nth-child(3) a:active{

  border-bottom: solid 4px #D11E14;

  opacity:0.7;

}



#menu li:nth-child(3).current-menu-item > a{

  border-bottom: solid 4px #D11E14;

}



#menu li:nth-child(4) a:hover, #menu li:nth-child(4) a:focus, #menu li:nth-child(4) a:active{

  border-bottom: solid 4px #111d93;

  opacity:0.7;

}



#menu li:nth-child(4).current-menu-item > a{

  border-bottom: solid 4px #111d93;

}



#menu li:nth-child(5) a:hover, #menu li:nth-child(5) a:focus, #menu li:nth-child(5) a:active{

  border-bottom: solid 4px #33cc33;

  opacity:0.7;

}



#menu li:nth-child(5).current-menu-item > a{

  border-bottom: solid 4px #33cc33;

}







/*--- FIN MENU ---*/





.content{

  min-height: 100%;

  margin: 0 auto -80px;

}



.push{

  height: 80px;

}



section{

/*  min-height: 480px;

  width: 80%;

  margin-left: auto;

  margin-right: auto;   */



    width: 80%;

    margin: 0 auto;

    clear: both;

}



@media screen and (max-width: 480px) {

  section { width: 100%; }

}



#headsection{

  min-height: 18px;

  position: relative;

}



.grouparchi{

  height: 600px;

  position: relative;

}



.groupsceno{

  height: 600px;

}



.groupaccueil{

  height: 600px;

}



/*  SECTIONS ---------------- RESPONSIVE GRID SYSTEM */

.section {

  clear: both;

  padding: 0px;

  margin: 0px;

}



/*  COLUMN SETUP  */

.col {

  display: block;

  float:left;

  margin: 1% 0 1% 1.6%;

}



.col:first-child { margin-left: 0; }



/*  GROUPING  */

.group:before,

.group:after { content:""; display:table; }

.group:after { clear:both;}

.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF EIGHT  */

.span_8_of_8 {

  width: 100%;

}



.span_7_of_8 {

    width: 87.3%;

}



.span_6_of_8 {

    width: 74.6%;

}



.span_5_of_8 {

    width: 61.9%;

}



.span_4_of_8 {

    width: 49.2%;

}



.span_3_of_8 {

    width: 36.5%;

}



.span_2_of_8 {

    width: 23.8%;

}



.span_1_of_8 {

    width: 11.1%;

}



/*  GO FULL WIDTH BELOW 480 PIXELS */

@media only screen and (max-width: 480px) {

  .col {  margin: 1% 0 1% 0%; }

  .span_1_of_8, .span_2_of_8, .span_3_of_8, .span_4_of_8, .span_5_of_8, .span_6_of_8, .span_7_of_8, .span_8_of_8 { width: 100%; }

}





/*  GRID OF THREE  */

.span_3_of_3 { width: 100%; }

.span_2_of_3 { width: 66.13%; }

.span_1_of_3 { width: 32.26%; }





/*  GO FULL WIDTH BELOW 730 PIXELS */

@media only screen and (max-width: 730px) {

  .col {  margin: 1% 0 1% 0%; height: 2em; }

  .span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }

}



.colarchi{

  border: solid 1px #000; 

  position: absolute;

  bottom: 0;

}



/* FIN SECTIONS ---------------- RESPONSIVE GRID SYSTEM */





/* --- ARCHIVE BOX --- */



.boxheader{

  text-align: center;

  margin-right: auto;

  margin-left: auto;

  margin-bottom: 12px;

  font-family: 'calibri', sans-serif;

  font-size: 1em;

}



.box{

    cursor: pointer;

    text-align: center;

    width: 80px;

    height: 80px;

    margin-right: auto;

    margin-left: auto;

}



.container a{

    text-decoration: none;

}



.box-agence p{

  font-family: 'calibri', sans-serif;

  font-size: 1em;

  margin-top: 8px;

}



.box-agence img{

    width: 40px;

    height: 40px;

    padding: 10px;

    border-bottom: solid 6px #434750;

    border-top: solid 1px #434750;

    border-left: solid 1px #434750;

    border-right: solid 1px #434750;

    -webkit-transition: all 300ms ease-out;

    -moz-transition: all 300ms ease-out;

    -o-transition: all 300ms ease-out;

    -ms-transition: all 300ms ease-out;

    transition: all 300ms ease-out;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    -o-border-radius: 5px;

    -ms-border-radius: 5px;

    border-radius: 5px;

}



.box-archi img{

    border-bottom: solid 6px #FAD201;

    border-top: solid 1px #FAD201;

    border-left: solid 1px #FAD201;

    border-right: solid 1px #FAD201;

    -webkit-transition: all 300ms ease-out;

    -moz-transition: all 300ms ease-out;

    -o-transition: all 300ms ease-out;

    -ms-transition: all 300ms ease-out;

    transition: all 300ms ease-out;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    -o-border-radius: 5px;

    -ms-border-radius: 5px;

    border-radius: 5px;

}



.box-sceno img{

  /*

  border-bottom: solid 6px #A52019;

    border-top: solid 1px #A52019;

    border-left: solid 1px #A52019;

    border-right: solid 1px #A52019;

    */

  border-bottom: solid 6px #D11E14;

    border-top: solid 1px #D11E14;

    border-left: solid 1px #D11E14;

    border-right: solid 1px #D11E14;  

    -webkit-transition: all 300ms ease-out;

    -moz-transition: all 300ms ease-out;

    -o-transition: all 300ms ease-out;

    -ms-transition: all 300ms ease-out;

    transition: all 300ms ease-out;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    -o-border-radius: 5px;

    -ms-border-radius: 5px;

    border-radius: 5px;

}



.box-amo img{

  /*

  border-bottom: solid 6px #1E2460;

    border-top: solid 1px #1E2460;

    border-left: solid 1px #1E2460;

    border-right: solid 1px #1E2460;

    */

    border-bottom: solid 6px #111d93;

    border-top: solid 1px #111d93;

    border-left: solid 1px #111d93;

    border-right: solid 1px #111d93;

    -webkit-transition: all 300ms ease-out;

    -moz-transition: all 300ms ease-out;

    -o-transition: all 300ms ease-out;

    -ms-transition: all 300ms ease-out;

    transition: all 300ms ease-out;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    -o-border-radius: 5px;

    -ms-border-radius: 5px;

    border-radius: 5px;

}



.box-transmettre img{

  border-bottom: solid 6px #33cc33;

    border-top: solid 1px #33cc33;

    border-left: solid 1px #33cc33;

    border-right: solid 1px #33cc33;

    -webkit-transition: all 300ms ease-out;

    -moz-transition: all 300ms ease-out;

    -o-transition: all 300ms ease-out;

    -ms-transition: all 300ms ease-out;

    transition: all 300ms ease-out;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    -o-border-radius: 5px;

    -ms-border-radius: 5px;

    border-radius: 5px;

}



.box:hover img{

    -webkit-transform:scale(1.30); /* Safari and Chrome */

    -moz-transform:scale(1.30); /* Firefox */

    -ms-transform:scale(1.30); /* IE 9 */

    -o-transform:scale(1.30); /* Opera */

     transform:scale(1.30);

}



#various{

  width: 600px;
  height: 400px;
  text-decoration: none;

}



.box .caption {

    font-family: 'calibri_light', sans-serif;

    font-weight: lighter;

    font-size: 1em;

  display: block;

  width: 80px;

  height: 80px;

  top: -80px;

    background-color: rgba(0,0,0,0.3);

    position: relative;

    color: #fff;

    z-index: 100;

    -webkit-transition: all 700ms ease-out;

    -moz-transition: all 700ms ease-out;

    -o-transition: all 700ms ease-out;

    -ms-transition: all 700ms ease-out;

    transition: all 700ms ease-out;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    -o-border-radius: 5px;

    -ms-border-radius: 5px;

    border-radius: 5px;

    /*display: table-cell;*/

    /*vertical-align: bottom;*/

}



@media only screen and (max-width: 1024px) {

  .box {  font-size: 0.8em; }

}



.box .fade-caption {

    opacity: 0;

}



.box:hover .fade-caption {

    opacity: 1;

}



/* --- FIN ARCHIVE BOX --- */



/* --- FLEX BOX --- */



.container {

  float: left;

  width: 11.1%;

  display: flex;

  flex-direction: column;

  align-self: flex-start;

}



@media only screen and (max-width: 800px) {

  .container {  width: 25%; min-height: 80px;}

}



.container-accueil {

  margin-top: 15px;

  display: inline-flex;

  flex-direction: row;

  flex-wrap: wrap;

  align-self: flex-start;

}



/*

Samsung Galaxy S4mini media query

@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3){

  .container-accueil{

width: 100%;}

}

*/



.container-archi{

  float: left;

  width: 20%;

  display: inline-flex;

  flex-direction: row;

  flex-wrap: wrap;

  align-self: flex-start;

  justify-content: center;

}





.container-sceno{

  float: left;

  width: 20%;

  display: inline-flex;

  flex-direction: row;

  flex-wrap: wrap;

  align-self: flex-start;

  justify-content: center;

}



@media screen and (max-width: 480px) {

.container-sceno h2 {height:50px; font-size:0.8em;}

}



@media screen and (max-width: 1024px) {

.container-sceno h2 {height:36px; font-size:0.8em;}

}



.container-transmettre {

  display: inline-flex;

  flex-direction: row;

  flex-wrap: wrap;

  align-self: flex-start;

}



.postmeta a {display: none}



/*--- POST : PHOTOSPACE GALLERY RESPONSIVE ---*/



#articleSeul{

  width: 820px;

}



#post_content{

  min-width: 240px;

}



#post_content p{

  font-size: 1em;

  padding: 0 10px;

}



@media screen and (max-width: 768px) {

  #articleSeul{width:100%; }

  #post_content p{font-size: 0.9em; }

  #post_content ul{font-size: 0.9em; }

}



@media screen and (max-width: 480px) {

  #articleSeul{width:100%; }

  #post_content p{font-size: 0.9em; }

  #post_content ul{font-size: 0.9em; }

}



@media screen and (max-width: 768px) {

  

  .photospace_res .gal_content {

    float: none;

    width: 100%; }



  .photospace_res .thumbs_wrap2 {

    float: none;

    width: 100%; }



  .photospace_res .slideshow img {

    width: 100%; }



  #post_content h3{

    font-size: 0.9em; }

}



.image-caption{

padding-right: 10px;

}





/*--- FIN POST ---*/



/*--- PAGES AGENCE ---*/



#bloc-equipe {

  width: 60%;

  border: 2px solid #E6E6E6;

  margin-top: 0;

  margin-left: auto;

  margin-right: auto;

  padding: 1em 1em 3em 1em;

}



#bloc-local {

  width: 100%;

  border: 2px solid #E6E6E6;

  margin-top: 0;

  margin-left: auto;

  margin-right: auto;

  padding: 1em 1em 3em 1em;

}



@media screen and (max-width: 800px) {

  #bloc-equipe { width: 70%; }

  #bloc-local { width: 70%; }

}



@media screen and (max-width: 640px) {

  #bloc-equipe { width: 80%; }

  #bloc-local { width: 80%; }

}



@media screen and (max-width: 480px) {

  #bloc-equipe { width: 90%; }

  #bloc-local { width: 90%; }

}





.container-agence {

  margin-top: 200px;

  display: flex;

}



.container-agence a {

  text-decoration: none;

  color: #434750;

}



@media only screen and (min-width: 800px) {

  .container-agence {  

     width: 50%;   

     margin-left: 25%;

     margin-right: 25%;

  }

}



@media only screen and (max-width: 730px) {

.container-agence {margin-top: 80px;}

}



.menu-agence{

    min-height: 32px;

    line-height: 36px;

}



.menu-agence a{

  color: #000;

  text-decoration: none;

}



.menu-agence a:hover{

  border-bottom: 2px solid #434750;

}



.select-agence{

  border-bottom: 2px solid #434750;

}



.title-agence{

  color: #434750;

}



.title-archi{

  color: #FAD201;

}



.title-sceno{

/*  color: #A52019;  */

  color: #D11E14;

}



.title-amo{

  color: #111d93;

}



.title-transmettre{

  color: #33cc33;

}





/*--- FIN PAGES AGENCE ---*/



/*--- FOOTER ---*/



#footer{

  height: 90px;

  background: url(img/bodyback.png) left bottom;

  clear: both;

}



@media screen and (max-width: 480px) {

  #footer{height: auto; bottom: -80px; background: url(img/bodyback.png); position: relative;}

}



@media screen and (max-width: 750px) {

  #footer{height: auto; bottom: -80px; background: url(img/bodyback.png); position: relative;}

}



#footer p{

  font-size: 0.9em;

}



.sidebar{

  text-align:center;

  font-family: 'calibri', sans-serif;

}



.adresse {

  text-align:center;

  font-family: 'calibri', sans-serif;

  background:#FFF;

  height:250px;

  opacity:0.5;

}





/*--- PLUG IN : SLIDESHOW RESPONSIVE ---*/



.slideshow-container{

    font-family: 'calibri', sans-serif;

    margin: 0;

    color: #000;

}



/* --- FIN PLUG IN --- */





/* --- VUE LOCAL --- */

@media screen and (max-width: 1024px) {

#vue-local img{

width: 90%; 

height: 90%;

}



@media screen and (min-width: 1024px) {

width: 70%;}

}

/* --- fin VUE LOCAL --- */





/* --- FANCYBOX --- */



#fancybox-loading div {

  display: none;

}





/* --- PAGE AGENCE > ACTUALITES  (pour masquer les vignettes et le "pages suivantes") --- */

.section .photospace_res a.thumb{

    display : none !important; }



.section .photospace_res .psr_paging{

    display : none; }




/* --- Styles de la Modale (Pop-up) --- */
.modal {
    display: none; /* C'est la clé, cachée par défaut */
    position: fixed;
    z-index: 1000; /* Assurez-vous que c'est au-dessus de tout */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: scroll; /* Permet le défilement du contenu de la modale */
    background-color: rgba(0,0,0,0.8); /* Fond obscurci */
    padding-top: 25px; /* Espace pour le haut */
}

.modal-content {
    background-color: #fff;
    margin: auto; /* Centrage horizontal */
    padding: 30px;
    border-radius: 5px;
    width: 90%;
    max-width: 800px; /* Taille maximale de la modale */
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    position: relative;
    /* Vous pouvez ajouter une animation CSS d'ouverture ici si vous le souhaitez */
}

.close-btn {
    color: #aaa;
    float: right;
    font-size: 30px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
    line-height: 1;
}

.close-btn:hover,
.close-btn:focus {
    color: #333;
}

/* Assurez-vous que le contenu injecté est bien stylisé (titres, images, etc.) */
#modalContentArea {
    /* Utiliser Flexbox ou Grid si vous le pouvez pour le contrôle global de la modale */
    display: flex;
    flex-direction: column;
    /* Assurez-vous que modal-content a une hauteur définie (ex: max-height: 90vh) */
    overflow-y: auto; /* Le scroll est géré par la modale, pas par le contenu principal */
}

/* 4. Gestion de la hauteur de l'image principale */
#article-content-wrapper {
    /* Permet au contenu de s'étendre verticalement */
    display: flex;
    flex-direction: column;
    min-height: 100%; /* S'assure qu'il prend toute la hauteur disponible */
}

.responsive-main-image {
    /* La clé est de limiter la hauteur de l'image pour qu'elle ne force pas le scroll */
    max-height: 50vh; /* Vous pouvez ajuster cette valeur (par exemple 60vh ou 70vh) */
    width: auto;      /* Permet à la largeur de s'adapter proportionnellement */
    object-fit: contain; /* S'assure que l'image est entièrement visible sans être coupée */
}

/* Styles pour les miniatures */
.gallery-thumbnail {
    opacity: 0.7; /* Style de base */
    transition: opacity 0.2s, border 0.2s;
}

.gallery-thumbnail:hover {
    opacity: 1;
    border-color: #999 !important; /* Mettre un effet au survol */
}

/* La miniature active doit être bien visible */
.gallery-thumbnail.active {
    opacity: 1;
    border: 1px solid #000 !important; /* Bordure pour l'image sélectionnée */
}

/* Styles des textes (pour centraliser le contrôle) */
#article-content-wrapper h3 {
    font-family: 'calibri_light', sans-serif;
    font-size: 1.2em;
    color: #000;
    text-align: center;
}

#article-content-wrapper h2 {
    font-family: 'calibri_light', sans-serif;
    font-size: 1em;
    color: #434750;
    text-align: left;
}