@charset "UTF-8";
/* CSS Document */


@font-face {
    font-family: 'caecilia_heavy';
    src: url('fonts/caecilialtpro85heavy-webfont.eot');
    src: url('fonts/caecilialtpro85heavy-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/caecilialtpro85heavy-webfont.woff2') format('woff2'),
         url('fonts/caecilialtpro85heavy-webfont.woff') format('woff'),
         url('fonts/caecilialtpro85heavy-webfont.ttf') format('truetype'),
         url('fonts/caecilialtpro85heavy-webfont.svg#caecilia_lt_pro85_heavy') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'caecilia_bold';
    src: url('fonts/caecilialtpro75bold-webfont.eot');
    src: url('fonts/caecilialtpro75bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/caecilialtpro75bold-webfont.woff2') format('woff2'),
         url('fonts/caecilialtpro75bold-webfont.woff') format('woff'),
         url('fonts/caecilialtpro75bold-webfont.ttf') format('truetype'),
         url('fonts/caecilialtpro75bold-webfont.svg#caecilia_lt_pro75_bold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'caecilia_roman';
    src: url('fonts/caecilialtpro55roman-webfont.eot');
    src: url('fonts/caecilialtpro55roman-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/caecilialtpro55roman-webfont.woff2') format('woff2'),
         url('fonts/caecilialtpro55roman-webfont.woff') format('woff'),
         url('fonts/caecilialtpro55roman-webfont.ttf') format('truetype'),
         url('fonts/caecilialtpro55roman-webfont.svg#caecilia_lt_pro55_roman') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'caecilia_light';
    src: url('fonts/caecilialtpro45light-webfont.eot');
    src: url('fonts/caecilialtpro45light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/caecilialtpro45light-webfont.woff2') format('woff2'),
         url('fonts/caecilialtpro45light-webfont.woff') format('woff'),
         url('fonts/caecilialtpro45light-webfont.ttf') format('truetype'),
         url('fonts/caecilialtpro45light-webfont.svg#caecilia_lt_pro45_light') format('svg');
    font-weight: normal;
    font-style: normal;
}


*{
    outline: none;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;}
body{
    background: #755d4f;
    color: #fff;
    font-family: caecilia_light, Helvetica, Arial, sans-serif;
    position: relative;
    letter-spacing: 0px;
    height: 100%;
    width: 100%;
    font-size: 0;
    outline: none;}
html{
    position: relative;
    height: 100%;
    width: 100%;}
p{ 
    margin-bottom: 20px;}
p:last-child{margin-bottom: 0;}
ul{
    list-style-position: inside;
    text-indent: -30px;
    margin-left: 27px;}
li{
    margin: 0 0 10px 0;
}

a{
    color: #fff;
    height: auto;
    display: block;
}

h1{
    position: relative;
    font-size: 60px;
    line-height: 80px;}
h2{
    font-size: 40px;
    line-height: 60px;
    margin-bottom: 30px;}
spam{
    position: absolute;
    left: -40px;
    top: 30px;
    font-size: 45px;}
.smallSize h1{
    font-size: 40px;
    line-height: 50px;}
.smallSize spam{
    left: -25px;
    top: 20px;
    font-size: 30px;}
.textCenterMe{
    display: flex;
    min-height: 100%;}
.textCenterMe p, .textCenterMe h1{
    margin: auto 0;}

/* caché par défaut, sinon il capte le hover */
#lightbox { display: none; }

/* quand il est ouvert */
#lightbox.open { display: flex; cursor: zoom-out; }



a.btn {
    -webkit-transition: all 0.3s; /* Safari */
    transition: all 0.3s;
    display: inline-block;
    background-color: #3c6a9b;
    color: #acc2d9;
    text-decoration: none;
    padding: 5px 15px 0px;
    border-radius: 50px;
    cursor: pointer;
    font-size: 16px;
    box-shadow: 3px 3px 6px #15406f, -3px -3px 6px #5684b7;
    vertical-align: text-top;
}

a.btn:hover {
  background-color: #417cbb;
  color: #fff;
}


.header .item:first-child{
    width: calc(35% - 100px);
    height: clamp( 560px, calc(65vw - 100px), 570px)}
.header .item:nth-child(2){
    width: calc(65% - 100px);
    height: clamp( 560px, calc(65vw - 100px), 570px);}


.giantSize .header .item:first-child, .giantSize .header .item:nth-child(2){
    height: calc(50vh - 100px);
    min-height: 330px;}

.megaGiantSize .header .item:first-child, .megaGiantSize .header .item:nth-child(2){
    height: clamp( 300px, calc(20vw - 100px), 520px);}

.item:nth-child(1) h1, .item:nth-child(20) h1{ 
    left: clamp(20px, 7vw, 170px);
    width: calc(100% - 5vw);}
.galaxy .item:nth-child(1) h1{
    font-size: 50px;
    line-height: 60px;}



.overContainer{
    font-size: 0;
    height: 100%;
    width: 100%;
    position: relative;}


.item{
    vertical-align: top;
    font-size: 14px;
    line-height: 23px;
    position: relative;
    width: calc(50% - 100px);
    height: calc(50vw - 100px);
    padding: 50px;
    display: inline-block;}

.item_1_1{
    vertical-align: top;
    font-size: clamp(18px, 1.7vw, 30px);
    line-height: clamp(26px, 2.7vw, 40px);
    position: relative;
    width: calc(100% - 100px);
    min-width: calc(100% - 100px);;
    height: auto;
    padding: 50px;
    display: inline-block;}

.item_2_3{
    vertical-align: top;
    font-size: 14px;
    line-height: 23px;
    position: relative;
    width: calc(50% - 100px);
    height: calc(50vw - 100px);
    padding: 50px;
    display: inline-block;}

.item_1_3{
    vertical-align: top;
    font-size: clamp(13px, 1.1vw, 50px);
    line-height: clamp(20px, 2vw, 60px);
    position: relative;
    width: calc(50% - 100px);
    height: calc(50vw - 100px);
    padding: 50px;
    display: inline-block;}

.item_1_2{
    vertical-align: top;
    font-size: clamp(13px, 1.1vw, 50px);
    line-height: clamp(20px, 2vw, 60px);
    position: relative;
    width: calc(50% - 100px);
    height: calc(50vw - 100px);
    padding: 50px;
    display: inline-block;}


.visual {
    padding: 0;
    font-size: 0;
    line-height: 0;}
.visual a, .visual img { cursor: pointer !important; }
.smallSize .visual a, .smallSize .visual img { cursor: auto !important; }

.item.visual, .item_2_3.visual{
    width: 50%;
    height: 50vw;}
.item_1_1.visual{
    width: 100%;
    height: auto;}
.item_1_2.visual{
    width: 50%;
    height: auto;}


.footer .item{
    width: calc(33.3% - 100px);
    height: calc(50vw - 100px);
    min-height: 100px;}

.footer .item h1{
    left: 2vw;
    width: calc(100% - 2vw);
    font-size: 40px;
    line-height: 60px;}

.footer .linkMe{
    line-height: 35px;}

.smallSize .footer .item:first-child{
    background-color: #423228 !important;}

.giantSize .item{
    width: calc(33.3% - 100px);
    height: calc(33.3vw - 100px);}
.giantSize .item.visual{
    width: 33.3%;
    height: 33.3vw;}
.giantSize .item_2_3{
    width: calc(66.6% - 100px);
    height: calc(66.6vw - 100px);}
.giantSize .item_2_3.visual{
    width: 66.6%;
    height: 66.6vw;}
.giantSize .item_1_3{
    width: calc(33.3% - 100px);
    height: calc(66.6vw - 100px);}
.giantSize .item_1_1.visual{
    width: 100%;
    height: auto;}
.giantSize .item_1_3.visual{
    width: 33.3%;
    height: 66.6vw;}
.giantSize .item_1_3.visual{
    width: 50%;
    height: 50vw;}


.megaGiantSize .item{
    width: calc(24.9% - 100px);
    height: calc(24.9vw - 100px);}


/* Styles pour la galerie */
    a img {
      cursor: pointer;
      transition: transform 0.2s;
    }

    /* Overlay plein écran */
    #lightbox {
      display: none; /* caché par défaut */
      position: fixed;
      top: 0; left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0,0,0,0.9);
      justify-content: center;
      align-items: center;
      z-index: 9999;
    }

    /* Image affichée */
    #lightbox img {
      max-width: 95vw;
      max-height: 95vh;
      object-fit: contain; /* couvre le viewport sans déformation */
      border-radius: 10px;
      box-shadow: 0 0 20px rgba(0,0,0,0.8);
    }

    /* Curseur pour fermer */
    #lightbox {
      cursor: zoom-out;
      text-align: center;
    }

/************/

.overContainer img{
    width: 100%;
    height: 100%;
    object-fit: cover;}
.item.footer{
    font-size: 20px;
    line-height: 40px;}



.giantSize .item.double{width: calc(66.6% - 100px);}

.bgdColor_01{background-color: #755d4f;}
.bgdColor_02{background-color: #423228;}
.bgdColor_03{background-color: #2d5784;}
.bgdColor_04{background-color: #ffffff; color: #000;}


.smallSize .item{
    width: calc(100vw - 100px);
    height: auto;
    display: block;}
.smallSize .header .item:nth-child(1), .smallSize .header .item:nth-child(2){
    width: calc(100vw - 100px);
    height: auto;}
.smallSize .header .item:nth-child(1){
    padding-bottom: 30px;}
.smallSize .header .item:nth-child(2){
    padding-top: 0;}
.smallSize .header .item h1{
    left: 0;
    width: auto;}
.smallSize .item_2_3, .smallSize .item_1_3, .smallSize .item_1_1, .smallSize .item_1_2{
    width: calc(100vw - 100px);
    height: auto;}
.smallSize .item_2_3.visual, .smallSize .item_1_3.visual, .smallSize .item_1_1.visual,.smallSize .item_1_2.visual{
    width: 100vw;
    padding: 0;}




/******* timeline div ***********/

.timeline{
    transition: all 220ms ease; /* animation du glissement */
    z-index: 9998;
    letter-spacing: 2px;
    font-size:14px;
    color: #000;
    background: #fff;
    padding: 7px 5px 5px;
    position: fixed;
    top: 0px;
    left: 0px;
    width: calc(100% - 10px);}

/* cachée en haut */
.timeline--hidden{
  transform: translateY(-100%);
}

.timeline ul{
    position: relative;
    text-align: left;
    line-height: 15px;
    width: 100%;
    text-indent: 0;
    margin-left: 0;}
    
.timeline li{
    list-style-type:none;
    display: inline-block;
    margin: 2px 10px 0;}

.smallSize .timeline li.hideMeIfItsTooSmall{
    display: none;}

.timeline li a{
    -webkit-transition: all 0.3s; /* Safari */
    transition: all 0.3s;
    text-transform: uppercase;
    color: #000;
    text-decoration: none;
    display: inline-table;
    font-weight: normal;
    font-size:14px;
    letter-spacing: 2px;
    background: transparent;}

.timeline li a:hover{
    color: #ee8c8e;}

.timeline li a.current{
    color: #9b2628;
    font-weight: bold;}


/*******************************/