html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
background: transparent;
border: 0;
margin: 0;
padding: 0;
vertical-align: baseline;
list-style:none; list-style-position:outside; 
}   body {
padding: 0;
margin: 0;
font-size: 17px;
font-family: "Source Sans 3", Arial, Helvetica, sans-serif;
font-weight: 400;
color: #000;
}
* {
box-sizing: border-box;
}
.content-listing:after, .clear { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
#wrapper {
width:100%;
max-width: 1300px;
background:#fff;
margin:0 auto;
}
#main, #footer { width: 100%; }
#header {
position: relative;
margin: 65px 0 60px 0;
width: 75%;
float: right;
}
#header .logo {
width: 380px;
display: block;
margin: 0 auto;
}
#header .logo a {
width: 100%;
display: block;
transition: transform .2s linear, color .2s linear;
}
.logocil img {
width: 100%;
}
.header_menu {
display: none;
position: absolute;
top: -1.5vw;
right: 0;
}
#menu-pad {
float: right;
height: 0;
width: 0;
}
#simple-menu svg {
display: block;
fill: none;
stroke: currentColor;
stroke-width: 1;
stroke-linecap: round;
}
#content { float: right; width: 75%; }
.page-template-page-extra-php #content { float: none;  width: 100%;}
.page-template-page-extra-php #content .post-content { margin: 0 auto; max-width: 700px;}
.projet-details {
width: 100%;
display: flex;
gap: 30px;
}
.projet-details-container {
width: 65%;
}
.projet-details-titre h1,
#menu ul.nav > li > a {
font-weight: 700;
font-size: 24px;
cursor: default;
letter-spacing: 1px;
text-transform: uppercase;
}
.projet-details-titre h1::after,
#menu ul.nav > li > a::after {
content: "";
display: block;
border: 4px solid black;
width: 25px;
border-radius: 6px;
margin: 7px 0 0 0;
}
.projet-details-texte {
margin: 16px 0 0 0;
font-size: 16px;
line-height: 1.8;
}
.projet-details-carte {
width: 35%;
}
.projet-details-carte-image {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1/1;
object-fit: cover;
}
.projet-detail {
display: flex;
margin: 0 0 8px 0;
line-height: 1.2;
}
.projet-detail-label {
width: 170px;
flex-shrink: 0;
font-weight: 600;
}
.projet-detail-valeur {
flex: 1;
color: #333;
} .projet-galerie {
width: 100%;
margin: 30px 0 0 0;
} .projet-galerie-principale {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 0;
border: 0;
background: #fff;
overflow: hidden;
cursor: pointer;
}
.projet-galerie-principale img {
display: block;
width: 100%;
height: auto;
}
.projet-galerie-principale.horizontal img {
object-fit: cover;
}
.projet-galerie-principale.vertical img {
object-fit: contain;
} .projet-galerie-miniatures {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
margin-top: 45px;
}
.projet-miniature {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
height: auto;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
overflow: hidden;
transform: scale(1);
transition: all .2s ease-in-out;
}
.projet-miniature:hover {
transform: scale(1.1);
transition: all .2s ease-in-out;
}
.projet-miniature img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
} .projet-lightbox {
position: fixed;
inset: 0;
z-index: 99999;
background: rgba(255, 255, 255, 0.92);
display: flex;
align-items: center;
justify-content: center;
padding: 30px;
box-sizing: border-box;
} .projet-lightbox[hidden] {
display: none;
}
.projet-lightbox-contenu {
position: relative;
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
max-height: 100%;
}
.projet-lightbox-image {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: calc(100vh - 60px);
max-height: calc(100dvh - 60px);
object-fit: contain;
}
.projet-lightbox-compteur {
position: fixed;
right: 40px;
bottom: 35px;
color: #000;
font-size: 24px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.02em;
pointer-events: none;
z-index: 100002;
}
.projet-lightbox-precedent,
.projet-lightbox-suivant {
position: absolute;
top: 0;
width: 50%;
height: 100%;
padding: 0;
border: 0;
background: transparent;
z-index: 2;
cursor: pointer;
}
.projet-lightbox-precedent {
left: 0;
}
.projet-lightbox-suivant {
right: 0;
}
.projet-lightbox {
opacity: 0;
visibility: hidden;
transition: all 300ms ease-in-out;
}
.projet-lightbox.is-visible {
opacity: 1;
visibility: visible;
}
.projet-lightbox-image {
opacity: 1;
transition: opacity 150ms ease-in-out;
}
.projet-lightbox-image.is-changing {
opacity: 0;
}
.post-content img.noresize { max-width: 100%; width: auto; height: auto;}
.post-content .entry-content p {margin-bottom: 12px; text-align:justify;}
.page-template-page-extra-php .post-content img {margin-bottom: 20px; width: 100%;}
.post-content .entry-content .texte-noir {color:#000;}
.post-content .entry-content .texte-gris {color: #808080;}
.post-content .entry-meta {text-align:right;}
.entry-content {
line-height: 1.5;
margin: 35px 0 0 0;
color: #333;
}
.archive.category .post-content { padding-bottom: 60px;} a { color: #000; text-decoration: none;}
a:focus { outline: none;}   #sidebar {
position: -webkit-sticky;
position: sticky;
top: 40px;
float: left;
width: 25%;
will-change: min-height;
}
#menu {
width: 100%;
}
#menu-menu > li {
margin: 0 0 20px 0;
}
#menu .sub-menu {
margin: 11px 0 0 0;
}
ul.nav { list-style:none; margin:0;}
#menu ul.nav li ul li a {
font-size: 17px;
transform: scale(1);
transform-origin: left center;
transition: transform .2s linear, color .2s linear;
text-transform: uppercase;
text-decoration: none;
display: block;
line-height: 2;
letter-spacing: 0.5px;
color: #333;
}
#menu ul.nav li ul li a:hover,
#menu ul.nav li ul li.current-menu-item > a,
#menu ul.nav li ul li.current_page_item > a {
color: #000;
transform: scale(1.12);
font-weight: 600;
transition: transform .2s linear, color .2s linear;
}
ul.nav li.current_page_cat a, 
#sidebar ul.nav li.current_page_cat a:hover { font-weight: 400;  color: #111; background-color: #ebebeb;}
.nav img { width: 175px; max-width: 100%; height:auto;}	
ul.nav li.current-menu-item ul.children { display:block;}
#sidebar ul.menu2 .cat_item.current-menu-item { background:url(//cil-architecture.com/wp-content/themes/cilarchitecture/images/background-nav.png) no-repeat left bottom; padding-bottom: 15px; margin-bottom: 15px;}
#sidebar ul.menu2 .cat_item:last-child { background:url(//cil-architecture.com/wp-content/themes/cilarchitecture/images/background-nav.png) no-repeat left bottom; padding-bottom: 15px; margin-bottom: 15px;}
.current-menu-item ul li { }
.lowercase{
text-transform : lowercase;
}
.nav li.page_home a strong { font-weight: 600;} .projets-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 40px 50px;
width: 100%;
}
.projet-item {
min-width: 0;
}
.projet-lien {
display: block;
width: 100%;
height: auto;
color: inherit;
text-decoration: none;
text-align: left;
}
.projet-lien:hover .projet-titre {
font-size: 16px;
transition: all .2s ease-in-out;
}
.projet-lien:hover .projet-localisation {
font-size: 14px;
transition: all .2s ease-in-out;
}
.projet-infos {
margin-top: 10px;
}
.projet-image {
display: block;
position: relative;
}
.projet-image img {
display: block;
width: 100%;
height: auto;
position: relative;
z-index: 100;
}
.free-form-1 {
display: none;
opacity: 0.6;
position: absolute;
right: 0;
top: 0;
z-index: 200;
transition: all .3s ease-in-out;
fill: #e1fb2a;
height: 100%;
width: auto;
transform-origin: 100% 50%;
}
.free-form-2 {
display: none;
opacity: 0.6;
position: absolute;
left: 0;
top: 0;
z-index: 200;
transition: all .3s ease-in-out;
fill: #e1fb2a;
height: 100%;
width: auto;
transform-origin: 0 50%;
}
.free-form-3 {
display: none;
opacity: 0.6;
position: absolute;
z-index: 200;
transition: all .3s ease-in-out;
fill: #e1fb2a;
top: 0;
left: 0;
height: 100%;
width: auto;
transform-origin: 0 0;
}
.free-form-4 {
display: none;
opacity: 0.6;
position: absolute;
right: 0;
top: 0;
z-index: 200;
transition: all .3s ease-in-out;
fill: #e1fb2a;
height: 100%;
width: auto;
transform-origin: 50% 50%;
}
.projet-item:nth-child(12n+4) .free-form-1 {
display: block;
}
.projet-item:nth-child(24n+9) .free-form-2,
.projet-item:nth-child(24n+22) .free-form-2 {
display: block;
}
.projet-item:nth-child(24n+1) .free-form-3,
.projet-item:nth-child(24n+12) .free-form-3 {
display: block;
}
.projet-item:nth-child(12n+5) .free-form-4 {
display: block;
}
.projet-lien:hover .free-form-1 {
transform: rotate(-90deg);
transition: all .3s ease-in-out;
}
.projet-lien:hover .free-form-2 {
transform: rotate(-90deg);
transition: all .3s ease-in-out;
}
.projet-lien:hover .free-form-3 {
transform: scaleX(-1);
transition: all .3s ease-in-out;
}
.projet-lien:hover .free-form-4 {
transform: rotate(-90deg);
transition: all .3s ease-in-out;
}
.projet-lien .projet-titre {
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
display: inline-block;
transition: all .2s ease-in-out;
}
.projet-lien .projet-localisation {
font-size: 12px;
display: inline-block;
transition: all .2s ease-in-out;
}   .pages { float: right; margin-top: 5px;}
.pagination { text-align: center;}
.pagination a { display: inline-block; }
.pagination a, .pagination span.current, .pagination span.ellipsis { margin-right: 2px; padding: 4px 7px 2px 7px; border: 1px solid #b4b4b3; color: #000; }
.pagination a:hover { background-color: #b4b4b3; border-color: #b4b4b3; text-decoration: none; color: #FFF;}
.pagination span.current { font-weight: bold; background-color: #b4b4b3; border-color: #b4b4b3; color: #fff;}
.pagination span.ellipsis { border: none; padding: 5px 0 3px 2px;} .sidr.fullwidth { width: 100%;}
.sidr.left.fullwidth {left: -100%;}
.sidr.right.fullwidth {right: -100%;}   .footer-actions {
display: flex;
margin: 50px 0 0 0;
padding: 0 0 35px 0;
color: #000;
width: 100%;
height: 165px;
border-top: 1px solid #000;
}
.footer-icons {
width: 25%;
padding: 20px 0 0 0;
}
.footer-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
height: 45px;
margin: 0 0 0 15px;
padding: 0;
border: 0;
color: #000;
cursor: pointer;
background: transparent;
transition: all .2s ease-in-out;
}
.footer-icon:first-child {
margin: 0;
}
.footer-icon svg {
display: block;
width: 45px;
height: 45px;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.footer-icon .instagram-point,
.footer-icon .info-point {
fill: currentColor;
stroke: none;
}
.footer-icon:hover,
.footer-icon:focus-visible {
transform: scale(1.2);
transition: all .2s ease-in-out;
}
.footer-text-zone {
width: 75%;
}
.footer-contact,
.footer-legal {
grid-area: 1 / 1;
align-self: center;
text-align: left;
transition: all .2s ease-in-out;
}
.footer-contact {
opacity: 1;
visibility: visible;
font-size: 16px;
line-height: 1.5;
position: absolute;
padding: 20px 0 0 0;
}
.footer-contact strong {
line-height: 2.2;
font-size: 20px;
font-weight: 700;
}
.footer-legal {
opacity: 0;
visibility: hidden;
pointer-events: none;
font-size: 11px;
line-height: 1.3;
padding: 20px 0 0 0;
position: relative;
}
.footer-legal strong {
font-weight: 700;
}
.footer-legal p {
margin: 0 0 5px 0;
}
.footer-text-zone.is-legal .footer-contact {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.footer-text-zone.is-legal .footer-legal {
opacity: 1;
visibility: visible;
pointer-events: auto;
} @media only screen and (max-width: 1499px) {
body {
font-size: 1.12vw;
}
#wrapper {
max-width: 86vw;
}
#header {
margin: 4.5vw 0 4vw 0;
}
#header .logo {
width: 25vw;
}
.projet-details-titre h1, #menu ul.nav > li > a {
font-size: 1.6vw;
}
.projet-details-titre h1::after, #menu ul.nav > li > a::after {
width: 1.7vw;
margin: 0.5vw 0 0 0;
}
#menu .sub-menu {
margin: 0.8vw 0 0 0;
}
#menu-menu > li {
margin: 0 0 1.5vw 0;
}
#menu ul.nav li ul li a {
font-size: 1.1vw;
}
.projets-grid {
gap: 2.9vw 3.5vw;
}
.projet-infos {
margin-top: 0.5vw;
}
.projet-lien .projet-titre {
font-size: 0.9vw;
}
.projet-lien:hover .projet-titre {
font-size: 1.05vw;
}
.projet-lien .projet-localisation {
font-size: 0.8vw;
}
.projet-lien:hover .projet-localisation {
font-size: 0.95vw;
}
.projet-detail {
margin: 0 0 0.5vw 0;
}
.projet-details-texte {
margin: 1.2vw 0 0 0;
font-size: 1vw;
}
.projet-detail-label {
width: 10.5vw;
}
.projet-galerie {
margin: 2.2vw 0 0 0;
}
.projet-galerie-miniatures {
gap: 1.3vw;
margin-top: 3.5vw;
}
.entry-content {
margin: 2.5vw 0 0 0;
}
.post-content .entry-content p {
margin-bottom: 0.9vw;
text-align: justify;
}
} @media only screen and (max-width: 1099px) {
body {
font-size: 2vw;
}
#header {
width: 100%;
margin: 6.5vw 0 6vw 0;
}
#header .logo {
width: 38vw;
}
.header_menu {
display: block;
}
.projet-details-titre h1, #menu ul.nav > li > a {
font-size: 2.5vw;
}
.projet-details-titre h1::after, #menu ul.nav > li > a::after {
width: 2.6vw;
margin: 0.8vw 0 0 0;
}
#menu-menu > li {
margin: 0 0 2.2vw 0;
}
#menu ul.nav li ul li a {
font-size: 1.8vw;
}
#menu ul.nav li ul li a:hover {
color: #333;
transform: none;
font-weight: 400;
}
#menu .sub-menu {
margin: 1.1vw 0 0 0;
}
#menu-pad {
height: 5.5vw;
width: 5.5vw;
}
#simple-menu svg {
width: 100%;
height: auto;
}
#content {
width: 100%;
}
#sidebar {
display: none;
}
.projet-lien:hover .free-form-1,
.projet-lien:hover .free-form-2,
.projet-lien:hover .free-form-3,
.projet-lien:hover .free-form-4 {
transform: none;
}
} @media screen and (max-width: 499px) {
#wrappad { padding: 0 15px; }
.btontop {display: block;}
.projets-grid {
grid-template-columns: 1fr;
gap: 35px 0;
}
.projet-lightbox {
padding: 12px;
}
.projet-lightbox-image {
max-height: calc(100vh - 24px);
max-height: calc(100dvh - 24px);
}
.projet-galerie-miniatures {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.free-form-4 {
left: 0;
}
}