* { box-sizing: border-box; }
html { margin:0; padding:0; }
.clear { clear:both; }
.blochref, .blochrefpopin { cursor:pointer; }

body { font-family:gilroy, sans-serif; background-color:#ffffff; color:#000000; font-size:1.8rem; font-weight:300; text-align:left; overflow-y:scroll; }

/* Liens par défaut */
a, a:link, a:active, a:visited, a:focus { color:inherit; text-decoration:inherit; outline-color:transparent; }
a:hover { color:inherit; text-decoration:underline; }

a.form { clear:both; margin: 2% 0 2% 0;  }
a.btn { color:#ffffff; }

a.ancre { display:block !important; position:absolute !important; margin:0 !important; padding:0 !important; width:0 !important; height:30rem !important; overflow:hidden !important; top:-5rem !important; z-index:100000 !important; }
body.scroll a.ancre { top:-5rem !important; }

img { padding:0; margin:0; border:0; }

/* Paragraphes par défaut */
p { word-wrap:break-word; text-align:left; margin:0; padding-bottom:1em; }
span { font-size:inherit; }

/* La largeur de la classe liquide est définie dans la feuille de style RESPONSIVE */
.liquide { display:block; clear:both; position:relative; margin:0 auto; padding:0; }

/* AJAX LOADER */
.ajaxloading { width:100% !important; background:transparent url('../../_chartes_/letellier/ressources/images/ajax-loader.gif') center 5rem no-repeat !important; min-height:20rem !important; }
.ajaxloading.white { background-image:url('../../_chartes_/letellier/ressources/images/ajax-loader.gif') !important; }
.popin .ajaxloading { background-image:url('../../_chartes_/letellier/ressources/images/ajax-loader.gif') !important; }

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/*    Mise en forme spécifique des formulaires   */
/*----------------------------------------------------------------------------------------------------------------------------------------------*/

input, textarea, select { font-size:inherit; display:inline-block; background-color:#363636; color:#161616; line-height:2em; height:2em; vertical-align:middle; padding:0.1em 0.3em 0 0.3em; margin:0; width:100%; border:0; border-radius:0; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; -webkit-appearance:none; -moz-appearance:none; -o-appearance:none; appearance:none; }
textarea { height:6em; }
select { background-image:url(https://www.letellier-architectes.com/_chartes_/letellier/ressources/images/dropdown.png) !important; background-position: right center !important; background-repeat: no-repeat !important; padding-right:30px !important; }
select::-ms-expand { display: none; }
select option { color:#161616; }
select.placeholder { color:rgba(54,54,54,0.55) !important; }

/* Mise en forme des boutons radio et des checkboxes */
input[type="radio"] + span:before, input[type="checkbox"] + span:before, input[type="radio"] + span:after, input[type="checkbox"] + span:after {
	content:'' !important; position:absolute !important;
	left:0.1em !important; top:0.1em !important; /* on décale la case de 10% de sa taille pour bien la centrer en hauteur */
	width:1em !important; height:1em !important; /* on définit la taille de référence de la case à la même taille que la font du span */
	transform-origin: 50% 50% !important; /* pour être certain du point d'origine du scale pour la case et la coche */
	transition:all .2s !important; /* on prévoit une animation */
}
input[type="radio"], input[type="checkbox"] { position:absolute !important; left:0 !important; top:1em !important; opacity:0 !important; transform: scale(0) !important; height:1em !important; width:1em !important; } /* On masque le champ input (opacité 0) */
input[type="radio"] + span, input[type="checkbox"] + span { position:relative !important; cursor:pointer !important; padding-top:0 !important; padding-bottom:0 !important; padding-left:1.6em !important; } /* on prépare le label (balise span située à côté du champ input) */
input[type="radio"] + span:before, input[type="checkbox"] + span:before { border:1px solid #363636 !important; background-color:transparent !important; } /* Aspect général de la case */
input[type="radio"] + span:after, input[type="checkbox"] + span:after { background-color:#ededed !important; } /* Aspect général de la coche */
input[type="checkbox"] + span:before, input[type="checkbox"] + span:after { border-radius: 5% !important; } /* angles arrondis */
input[type="radio"] + span:before, input[type="radio"] + span:after { border-radius: 50% !important; } /* cases circulaires */
input[type="radio"] + span:before, input[type="checkbox"] + span:before { transform: scale(1.2) !important; } /* élargissement à 120% */
input[type="radio"]:not(:checked) + span:after, input[type="checkbox"]:not(:checked) + span:after { opacity: 0 !important; transform: scale(0) !important; } /* Aspect si "pas cochée" */
input[type="radio"]:checked + span:after, input[type="checkbox"]:checked + span:after { opacity: 1 !important; transform: scale(0.6) !important; } /* Aspect si "cochée" */

.linefeed { padding-top:1rem; }

label { font-weight:200; position:relative; }

button, a.button { display:inline-block; font-size:1.5rem; text-transform:uppercase; text-align:center; background-color:#161616; border:1px solid #161616; color:#ffffff; margin:0; padding:0.5rem 1.5rem; width:auto; }
button:hover, a.button:hover { color:#161616; background-color:#ffffff; text-decoration:none; }

button.btn-primary, button.btn-primary:focus, button.btn-primary:hover { background-color:#161616; border-color:#161616; color:#ffffff; }
button.btn { margin-top:1em; }

.asterisque { display:block !important; float:none !important; font-size:0.8rem !important; font-weight:100 !important; clear:both !important; text-transform:none !important; }

.reponse { text-transform:uppercase; text-align:center; margin:0 2rem; }
.reponse.succes { font-size:1rem; color:#222222; padding:1rem 0; }
.reponse.erreur { font-size:1rem; color:#ab2727; padding:0.5rem 0 2.5rem 0; }
.reponse li { font-size:0.8rem; text-transform:none; text-align:center; margin:1em 0 0 0; }


/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* HEADER */

/* La durée de la transition doit être cohérente avec la valeur utilisée dans _charte_.js */
header { z-index:400; position:fixed; top:0; left:0; display:block; width:100%; height:4rem; padding:0; margin:0; overflow:hidden; background-color:#ffffff; transition: top 1s linear 1s; }
body.preload header { top:-4rem; transition: top 0s linear 0s; }
.interne header { height:5rem; }

#nav-home, #nav-button, #nav-toggle { display:none; }

/* LOGO */
header #logo { z-index:430; display:block; position:absolute; margin:0; left:1.5rem; top:0.7rem; padding:0; text-align:center; width:11.96rem; height:2.6rem; }
header #logo a { z-index: 1; display:block; margin:0; padding:0; position:relative; width:100%; height:100%; }
header #logo a img, header #logo a svg, header #logo a object { z-index:-1; display:block; margin:0; padding:0; position:relative; width:100%; height:100%; opacity:1; }

/* NAVIGATION PRINCIPALE */
header nav { z-index:410; position:absolute; top:0; left:0; right:0; bottom:0; display:block; text-align:left; font-size:0; }
header nav.liquide { position:absolute; }

/* MENU & SOUS-MENU */
ul#menu { z-index:415; display:block; position:absolute; top:0.6rem; right:0; margin:0; padding:0; width:auto; max-width:80%; font-size:0; }
ul#menu > li { position:relative; display:inline-block; margin:0.1rem 0; padding:0; text-transform:uppercase; font-size:0; vertical-align:baseline;  }
ul#menu > li:after { content:"|"; display:inline-block; color:#d8d8d8; font-weight:200; font-size:1.2rem; }
ul#menu > li:last-child:after { content:""; }
ul#menu > li a { font-size:0.8rem; color:#000000; display:inline-block; padding:0 1rem; font-weight:400; transition: all 300ms linear; vertical-align:baseline; }
ul#menu > li a:hover, ul#menu > li > a.hover, ul#menu li.current > a { color:#9e885a; text-decoration:none; transition: all 300ms linear; }

ul#menu > li > ul { overflow:hidden; display:block; position:absolute; right:1rem; top:1.3rem; width:20rem; height:auto; margin:0; padding:0; max-height:0; transition: max-height 0s linear; text-align:right; font-size:0; }
ul#menu > li.realisations > ul { width:60rem; }
ul#menu > li:hover > ul, ul#menu > li > a.hover ~ ul, ul#menu > li.current > a ~ ul { z-index:2; max-height:10rem; padding-top:0.5rem; transition: max-height 2s linear; }
ul#menu > li.current.hidecurrent > a ~ ul { z-index:1; padding-top:0; max-height:0; transition: max-height 0s linear; }
ul#menu > li > ul > li { position:relative; display:inline-block; margin:0; padding:0; list-style-type:none; text-transform:uppercase; text-align:left; border-top:1px solid #d8d8d8; font-size:0; }
ul#menu > li > ul > li a {  font-size:0.6rem; display:block; margin:0; padding:0.2rem 1rem 1rem 1rem; text-align:left; font-size:0.6rem; font-weight:400; }
ul#menu > li > ul > li:first-of-type a { padding-left:0; }
ul#menu > li > ul > li:last-of-type a { padding-right:0; }
 


/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* FOOTER */
body.preload footer { display:none; }
footer { font-size:1.2rem; position:relative; height:auto; width:100%; margin:0 auto; padding:0; z-index:100; transition: all 0.3s linear; }

footer .liquide { position:relative; padding:2.35rem 0 5rem 14.7rem; color:#d4d4d4; background-color:#2e2e2e; }
	
footer h2 { display:inline-block; width:auto; padding:0 5rem 1.2rem 0; margin:0 2rem 1.2rem 0; text-transform:uppercase; font-size:1.2rem; color:#d4d4d4; font-weight:400; border-bottom:1px solid #505050; }
footer h2 span { font-weight:400; }

ul#menusecondaire { padding:0; margin:0; margin-bottom:2.35rem; }
ul#menusecondaire > li { position:relative; display:block; margin:0 0 0.5rem 0; padding:0; text-transform:uppercase; font-size:0.8rem; }
ul#menusecondaire > li a { color:#d4d4d4; display:inline-block; padding:0; font-weight:200; transition: all 300ms linear; }
ul#menusecondaire > li a:hover, ul#menusecondaire > ul > li a.current { color:#9e885a; text-decoration:none; transition: all 300ms linear; }

ul#menusecondaire > li > ul { overflow:hidden; display:block; position:absolute; left:0; top:1rem; width:auto; height:auto; margin:0; padding:0; max-height:0; transition: max-height 0s linear; text-align:right; font-size:0; }
ul#menusecondaire > li:hover > ul, ul#menusecondaire > li > a.hover ~ ul { z-index:2; max-height:10rem; padding-top:0.5rem; transition: max-height 2s linear; }
ul#menusecondaire > li > ul > li { position:relative; display:inline-block; margin:0; padding:0; list-style-type:none; text-transform:uppercase; text-align:left; border-top:1px solid #505050; font-size:0; }
ul#menusecondaire > li > ul > li a {  font-size:0.6rem; display:block; margin:0; padding:0.2rem 1rem 1rem 1rem; text-align:left; font-size:0.6rem; font-weight:400; }
ul#menusecondaire > li > ul > li:first-of-type a { padding-left:0; }
ul#menusecondaire > li > ul > li:last-of-type a { padding-right:0; }


#sociaux { position:absolute; left:5rem; top:2.35rem; margin:0; padding:0; display:inline-block; width:auto; vertical-align:top; font-size:0; }
#sociaux > li { position:relative; display:inline-block; margin:0 0 0 0.5rem; padding:0; list-style-type:none; }
#sociaux > li a { display:inline-block; font-size:1rem; width:2rem; height:2rem; text-align:center; color:#959595; border:0.15rem solid #959595; border-radius:50%; margin:0; padding:0.2rem 0 0 0; transition: all 300ms linear; }
#sociaux > li a:hover { color:#9e885a; border-color:#9e885a; text-decoration:none; transition: all 300ms linear; }

#copyright { font-size:0.7rem; padding:0.6rem 0 0.6rem 1rem; position:absolute; bottom:0; left:0; right:0; height:2.35rem; background-color:#ffffff; color:#2e2e2e; }


/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* CONTENU */
main { margin:0; padding:0; background-color:#ffffff; margin-top:2.35rem; }
main:after { content:""; display:table; clear:both; }

main .liquide { overflow:hidden; }

h1, h2, h3 { margin:0; padding:0; text-align:left; text-transform:none; font-weight:500; }
h1 { text-transform:uppercase; font-weight:100; font-size:2.5rem; margin:0 5%; padding:2rem 0; text-align:center; color:#535353; }
h2 { font-size:2rem; }
h3 { font-size:1.6rem; }

section, aside { position:relative; margin:0; padding:0; }
section:first-of-type { padding-top:1.65rem; }

img { max-width:100%; }

.hovergray {-webkit-filter: grayscale(100%); -webkit-filter: grayscale(1); filter: grayscale(100%); filter: url('https://www.letellier-architectes.com/_chartes_/letellier/ressources/images/gray.svg#grayscale'); filter: gray; }


/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* ACCUEIL */
#preload { z-index:100; position:absolute; opacity:1; background-color:#000; width:100%; height:100%; line-height:100%; border:2.35rem solid #fff; color:#000;  }
#preload img, #preload svg, #preload object { position:absolute; display:inline-block; vertical-align:middle; left:50%; top:50%; transform: translateX(-50%) translateY(-50%); width:25rem; height:25rem; }
#preload .loadingbar { margin:0 auto; position:absolute; display:block; bottom:3rem; left:50%; transform:translateX(-50%); }
#preload .ldBar-label { color:#ccc; margin:0 auto; position:absolute; display:block; bottom:1rem; left:50%; transform:translateX(-50%); font-size:0.8rem; }

#site { z-index:1; position:relative; background-color:#ffffff; height:auto; overflow:hidden; }
body.preload #site { height:0; }

.zone { position:relative; z-index:6; display:block; width:100%; padding:0; margin:0; }

.scrolldown { position:absolute; z-index:100; left:50%; transform:translateX(-50%); bottom:-2rem; width:auto; height:30%; width:5%; opacity:1; background-color:transparent; padding:0; margin:0; cursor:pointer; }
#scrolldown_realisations.scrolldown { bottom:-1rem; z-index:1; }
#scrolldown_realisations.scrolldown g > g:nth-child(3), #scrolldown_realisations.scrolldown g > g:nth-child(4), #scrolldown_realisations.scrolldown g > g:nth-child(5) { opacity:0; display:none; }
#scrolldown_agence.scrolldown { z-index:1; }
#scrolldown_agence.scrolldown g > g:nth-child(3), #scrolldown_agence.scrolldown g > g:nth-child(4), #scrolldown_agence.scrolldown g > g:nth-child(5) { opacity:0; display:none; }

/* Diaporama */
#slider-container { z-index:5; position:relative; display:block; width:100%; height:100%; padding:0; margin:0; overflow:hidden; background-color:#000000; }

#slider-container ul#slider-slides { position:absolute; top:0; left:0; display:block; width:100%; height:100%; padding:0; margin:0; }

#slider-container .slide { z-index:5; position:absolute; top:0; left:0; display:block; width:100%; height:100%; padding:0; margin:0; opacity:0; transition: opacity 1s linear; }
#slider-container .fadein { opacity:1; }
#slider-container .slide span { position:absolute; text-align:right; max-width:40%; display:inline-block; right:2rem; bottom:1rem; margin:0; padding:0.3rem 0.5rem; color:#ffffff; font-size:0.8rem; opacity:0; transition: opacity 200ms linear 2000ms; }
#slider-container .slide span.sombre { color:#000000; }
#slider-container .fadein span { opacity:1; }

.media-cover-wrapper { position: relative; overflow: hidden; width:100%; height:100%; }
.media-cover-wrapper img { max-width:none; }
.media-cover-wrapper .media-cover { position: absolute; z-index: -1; top: 50%; left: 50%; transform: translate(-50%, -50%); display:block; margin:0; padding:0; background-color:transparent; }

#slider-container ul#slider-bullets { position:absolute; z-index:10; left:2rem; bottom:1.5rem; font-size:0; margin:0; padding:0; }
#slider-container ul#slider-bullets li { position:relative; display:inline-block; padding:0; margin:0 1rem 0 0; width:0.5rem; height:0.5rem; background-color:#fff; border-radius:50%; transition:background-color 0.3s ease; }
#slider-container ul#slider-bullets li:hover, #slider-container ul#slider-bullets li.current { cursor:pointer; background-color:rgb(159,37,26); }

/* Réalisations */
body.preload #bgrealisations { display:none; }
#bgrealisations { position:relative; top:0; left:0; display:block; width:100%; height:50rem; padding:0; margin:0; background-color:#000000; }
		
#accueil-realisations { position:relative; top:0; left:0; display:block; width:40%; height:100%; padding:4rem 0 0 0; margin:0 auto; background-color:#ffffff; opacity:1; overflow:hidden; }
#accueil-realisations.show { width:100%; }

#accueil-realisations > h2 { position:absolute; top:50%; left:50%; transform: translateX(-50%) translateY(-50%); display:block; width:auto; height:auto; padding:0; margin:0 auto; opacity:1; transition: opacity 0.5s linear 0.8s; text-align:center; text-transform:uppercase; font-weight:100; font-size:3rem; }
#accueil-realisations.show > h2 { opacity:0; transition: opacity 0.5s linear 0.3s; }

#accueil-realisations > div.bandeau-realisations a { opacity:0; transition: opacity 0.5s ease 0s; }
#accueil-realisations.show > div.bandeau-realisations a { opacity:1; transition: opacity 0.5s ease 1.2s; }
#accueil-realisations.show > div.bandeau-realisations a.sante { transition: opacity 0.5s ease 1.4s; }
#accueil-realisations.show > div.bandeau-realisations a.habitat { transition: opacity 0.5s ease 1.0s; }
#accueil-realisations.show > div.bandeau-realisations a.urbanisme_paysager { transition: opacity 0.5s ease 1.6s; }
#accueil-realisations.show > div.bandeau-realisations a.culture_enseignement { transition: opacity 0.5s ease 1.8s; }
#accueil-realisations.show > div.bandeau-realisations a.patrimoine { transition: opacity 0.5s ease 0.8s; }
#accueil-realisations.show > div.bandeau-realisations a.tertiaire { transition: opacity 0.5s ease 1.5s; }
#accueil-realisations.show > div.bandeau-realisations a.interieurs { transition: opacity 0.5s ease 1.2s; }

#accueil-realisations > div.bandeau-realisations { z-index:2; position:absolute; display:block; padding:0; margin:0 auto; top:50%; left:50%; transform: translateX(-50%) translateY(-50%); width:85rem; height:32.3rem; margin:0 auto; padding:0; font-size:0; }
#accueil-realisations > div.bandeau-realisations a { display:inline-block; position:absolute; margin:0; padding:0; }
#accueil-realisations > div.bandeau-realisations a.sante { left:0; top:0; width:12%; }
#accueil-realisations > div.bandeau-realisations a.habitat { left:14%; top:0; width:18%; }
#accueil-realisations > div.bandeau-realisations a.urbanisme_paysager { left:34%; top:0; width:26%; }
#accueil-realisations > div.bandeau-realisations a.culture_enseignement { left:14%; bottom:0; width:46%; }
#accueil-realisations > div.bandeau-realisations a.patrimoine { left:62%; top:0; width:18%; }
#accueil-realisations > div.bandeau-realisations a.tertiaire { right:0; top:0; width:18%; }
#accueil-realisations > div.bandeau-realisations a.interieurs { right:0; bottom:0; width:18%; }

#accueil-realisations > div.bandeau-realisations a.sante { left:0; top:0; width:12%; }
#accueil-realisations > div.bandeau-realisations a.habitat_individuel { left:calc(100% * 1 / 7); top:0; width:12%; }
#accueil-realisations > div.bandeau-realisations a.habitat_collectif { left:calc(100% * 1 / 7); top:0; width:12%; }
#accueil-realisations > div.bandeau-realisations a.urbanisme_paysager { left:calc(100% * 2 / 7); top:0; width:12%; }
#accueil-realisations > div.bandeau-realisations a.culture_enseignement { left:calc(100% * 3 / 7); top:0; width:12%; }
#accueil-realisations > div.bandeau-realisations a.patrimoine { left:calc(100% * 4 / 7); top:0; width:12%; }
#accueil-realisations > div.bandeau-realisations a.tertiaire { left:calc(100% * 5 / 7); top:0; width:12%; }
#accueil-realisations > div.bandeau-realisations a.interieurs { left:calc(100% * 6 / 7); top:0; width:12%; }

#accueil-realisations > div.bandeau-realisations a h3 { z-index:21; position:absolute; left:0; top:70%; width:auto; max-width:90%; height:auto; padding:1rem 1.5rem 1rem 1rem; background-color:rgba(255,255,255,0.9); color:#000000; font-weight:100; font-size:1rem; text-transform:uppercase; transition: all 300ms linear; }
#accueil-realisations > div.bandeau-realisations a:hover h3 { z-index:21; background-color:rgba(0,0,0,0.8); color:#9e885a; }

#accueil-realisations > div.bandeau-realisations a img { z-index:20; transition: all 300ms linear; width:100%; }
#accueil-realisations > div.bandeau-realisations a:hover img { z-index:20; filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); }

/* Agence */
body.preload #accueil-agence { display:none; }
#accueil-agence { position:relative; display:block; margin:0; padding:4rem 0 0 0; width:100%; height:auto; }
#accueil-agence > div.bandeau-agence { z-index:2; position:absolute; margin:0; padding:0; left:0; width:100%; height:auto; top:50%; transform:translateY(-50%); }
#accueil-agence > div.bandeau-agence > div { font-size:0; position:relative; margin:0; padding:0; overflow:hidden; background-color:#000; }
#accueil-agence div.visuels > img { position:relative; width:100%; height:auto; margin:0; padding:0; }
#accueil-agence div.visuels > img:nth-child(2) { position:absolute; left:3%; top:50%; transform:translateY(-50%); width:28%; }
#accueil-agence div.visuels > img:nth-child(3) { position:absolute; right:1.5%; bottom:1.5rem; width:25.5%; }
#accueil-agence div.visuels > div { position:absolute; left:36%; right:33%; top:50%; transform:translateY(-50%); height:auto; }
#accueil-agence div.visuels > div h2 { color:#d4d4d4; text-transform:uppercase; font-size:2.4rem; font-weight:100; }
#accueil-agence div.visuels > div h2 span { font-weight:400; }
#accueil-agence div.visuels > div div { color:#d4d4d4; text-transform:uppercase; font-size:1.1rem; font-weight:200; margin:2rem 0 2rem 0; }
#accueil-agence div.visuels > div a { display:inline-block; font-size:0.7rem; font-weight:600; margin:0; padding:0.5rem 1.5rem; color:#9e885a; border:1px solid #afafaf; text-transform:uppercase; text-align:center; transition: all 0.3s linear; }
#accueil-agence div.visuels > div a:hover { background-color:#9e885a; border-color:#9e885a; color:#2e2e2e; text-decoration:none }
#accueil-agence div.citation { height:8rem; }
#accueil-agence div.citation > div.content { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:37%; height:auto; font-size:0; }
#accueil-agence div.citation > div.content > img.svg, #accueil-agence div.citation > div > svg { position:relative; display:inline-block; height:auto; vertical-align:top; }
#accueil-agence div.citation > div.content > img.svg:first-of-type, #accueil-agence div.citation > div > svg:first-of-type { width:4.7%; left:0; }
#accueil-agence div.citation > div.content > img.svg:last-of-type, #accueil-agence div.citation > div > svg:last-of-type { width:90%; left:5%; }
#accueil-agence div.citation > div.content > svg path { fill:#fff; fill-rule:evenodd; }

#accueil-agence div.citation > img { position:relative; width:100%; height:auto; margin:0; padding:0; left:50%; top:50%; transform:translate(-50%, -50%); }
#accueil-agence div.citation > div.parallax { position:relative; width:100%; height:100%; background-size:100%; background-position:center center; background-repeat: no-repeat; background-clip:border-box; }


/* Actu */
body.preload #actu { display:none; }
#actu { display:block; padding:4rem 0 0 0; margin:0; position:relative; min-height:11rem; font-size:0; }

#actu h2 { position:relative; padding:0.8rem 3.5rem 0.8rem 3.5rem; margin-bottom:2rem; text-transform:uppercase; background-color:#2a2a2a; color:#000000; font-weight:200; font-size:1.6rem; line-height:1em; text-align:left; }

#actu > div { position:relative; width:100%; margin-bottom:2rem; }

#actu .visuel { vertical-align:top; display:inline-block; width:38.5%; position:relative; left:0; top:0; padding:0; padding:0; margin:0; background-color:#705f3b; }
#actu .visuel > img { width:100%; position:relative; }
/* Suppression du masque mordoré
.accueil #actu .visuel > img { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); mix-blend-mode: multiply; }
#actu .visuel:after { content:""; background-color:#705f3b; opacity:0.4; position:absolute; left:0; right:0; top:0; bottom:0; }
#actu .visuel.ie:after { opacity:0.7; }
*/

#actu .infos { vertical-align:top; display:inline-block; width:54.5%; position:relative; left:0; top:0; padding:0; padding:0; margin:0 0 0 7%; }

#actu .infos h3 { margin:0; display:block; width:100%; padding-right:15rem; padding-top:2rem; padding-bottom:1rem; text-transform:uppercase; font-size:1rem; }
#actu .infos .date { float:none; font-family:"Playfair Display", serif; position:absolute; width:auto; right:6.5rem; top:1.8rem; font-size:1.1rem; color:#bd8a89; padding:0; margin:0; }
#actu .infos .date span { font-size:1.6rem; padding-left:0.2rem; }
#actu .infos .intro { width:100%; }
#actu .infos div {  margin:0; display:inline-block; width:auto; padding-right:15rem; font-size:0.8rem; }
#actu .infos div > p:last-of-type { padding-bottom:0; }
#actu .infos a { margin:1rem 0; display:inline-block; width:auto; padding-right:15rem; font-family:"Playfair Display", serif; font-style:italic; font-size:0.8rem; color:#9e885a; }


/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* CONTACT */

body.showcontact header { position:relative; display:block; }
body.showcontact main { margin-top:0 !important; }
body.showcontact section:first-of-type { padding-top:0; }

body.showcontact #sousmenu-realisation { position:absolute; display:block; top:-3.5rem; left:0; right:0; }
body.showcontact #infos-realisation { opacity:0; }
body.showcontact #infos-mask { display:none; }

		
#contact { z-index:150; display:none; position:relative; height:auto; width:100%; overflow:hidden; background-color:#272727; }
#contact a.closecontact { position:absolute; right:2rem; width:1.5rem; height:1.5rem; top:2rem; transition: all 0.2s linear; }
#contact a.closecontact img, #contact a.closecontact svg { position:relative; width:100%; height:100%; transition: all 0.2s linear; }
#contact a.closecontact svg { transform:rotate(45deg); transform-origin: 50% 50%; }
#contact a.closecontact svg polygon { stroke:#f0f0f0; }
#contact a.closecontact:hover svg polygon { stroke:#9e885a; }

#contact > div { padding:3rem 8rem 2rem 8rem; font-size:0; vertical-align:top; }

#contact h2 { color:#fff; margin:0 0 4.5rem 0; font-size:1.8rem; font-weight:600; font-style:italic; }
#contact h3 { color:#fff; margin:0 0 1rem 0; font-size:0.8rem; font-weight:600; text-transform:uppercase; }
#contact h4 { color:#757575; margin:0 0 0.3rem 0; font-size:0.6rem; font-weight:600; text-transform:uppercase; }
#contact ul { margin:0; padding:0 0 0 3rem; display:inline-block; width:20%; font-size:0.8rem; list-style-type:none; vertical-align:top; }
#contact ul li { margin:0; padding:0 0 1.5rem 0; display:block; width:100%; font-size:0.7rem; list-style-type:none; color:#fff; }
#contact ul li a { position:relative; display:block; padding-top:0.3rem; font-size:0.6rem; font-style:italic; }
#contact ul li a i { display:inline-block; color:#9e885a; padding-right:0.3rem; font-size:0.7rem; }
#contact ul li a:hover { color:#9e885a; text-decoration:none; }

#contact ul#agences li:first-of-type { padding-bottom:3rem; }

#contact > div #coordonnees { margin:0; padding:0 0 0 3rem; display:inline-block; width:30%; font-size:0.8rem; vertical-align:top; color:#fff; }
#contact > div #coordonnees a:hover { color:#9e885a; text-decoration:none; }
#contact > div #coordonnees .email a { font-size:0.8em; }
#contact > div #coordonnees .telephone { margin-bottom:1rem; }

#contact > div #form-contact { margin:0; padding:0 10rem 0 3rem; display:inline-block; width:50%; vertical-align:top; color:#fff; }
#contact > div #form-contact h3 { margin-bottom:3rem; }

#contact .simform  { font-size:0.9rem; }
#contact .simform ol:before { background-color:#363636; }
#contact .simform .questions li > label span { text-transform:uppercase; color:#ffffff; }
#contact .simform .error-message { color:#ffffff; }
#contact .simform i { color:#ea6b74; }
#contact .simform .asterisque { color:#ea6b74; padding-right:10rem; top:4.6rem; }
#contact .simform .next { color:#9e885a; border-color:#9e885a; }
#contact .simform .next:after { color:#9e885a; }
#contact .simform button.next.last { width:5em; color:#9e885a; top:2.5em; right:0.1em; }
#contact .simform button.next.last:hover { background-color:#9e885a !important; color:#272727; }
#contact .simform button.next.last:after { content: "envoyer"; font-family:gilroy, sans-serif; font-size:0.6em; position:absolute; top:50%; left:50%; width:auto; height:auto; transform:translate(-50%,-50%); text-transform:uppercase; color:inherit; }
#contact .simform .fs-nav-dots { margin-top:1rem; }
#contact .simform .fs-nav-dots button::before,
#contact .simform .fs-nav-dots button.double::after { background-color: #ffffff; }
#contact .simform .fs-nav-dots button.fs-dot-current::before,
#contact .simform .fs-nav-dots button.double.fs-dot-current::after { background-color: #9e885a; }
#contact .simform .fs-nav-dots button:disabled::before,
#contact .simform .fs-nav-dots button.double:disabled::after { background-color: #363636; }
#contact .consentementrgpd { margin-top:0; background-color:#272727; }
#contact input[type="checkbox"] + span:before { border:1px solid #fff !important; } 
#contact .consentementrgpd  span { padding-left:1.5rem !important; font-size:0.7rem; display:block !important; padding-right:0.3rem !important; }

#contact .reponse.succes { color:#ffffff; }

#contact > div#googlemap { background-color:#272727; position:relative; margin:0; padding:0; display:inline-block; width:100%; height:11rem; min-height:11rem; vertical-align:top; }

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
ul#menu-agence { margin:1rem 0 2rem 0; padding:0; width:100%; position:relative; display:block; font-size:0; }
ul#menu-agence > li { position:relative; display:inline-block; margin:0; border-right:1px solid #fff; padding:0; text-transform:uppercase; font-size:0; vertical-align:baseline; width:33.33%;  }
ul#menu-agence > li:last-of-type { border-right:0; }
ul#menu-agence > li a { position:relative; margin:0; padding:0.8rem 0; text-transform:uppercase; background-color:#2a2a2a; color:#c5c5c5; font-size:1.6rem; line-height:1em; text-align:center; font-weight:200; display:block; }
ul#menu-agence > li a:hover { color:#9e885a; text-decoration:none; transition: all 300ms linear; }
ul#menu-agence > li a h1 { color:#9e885a; text-decoration:none; font-size:1em; margin:0; padding:0; display:inline-block; position:relative; line-height:1em;  }

#page-agence h2 { margin:0; padding:1rem 0; text-transform:uppercase; background-color:#2a2a2a; color:#c5c5c5; font-size:2.4rem; text-align:center; font-weight:200; }

a.btn-savoirplus { font-size:0.7rem !important; display:inline-block !important; width:auto !important; border:0 !important; color:#9e885a !important; cursor:pointer !important; text-transform:uppercase !important; margin-bottom:1rem !important; }
a.btn-savoirplus:hover { background-color:transparent !important;  }
.savoirplus { overflow:hidden !important; max-height:0 !important; height:auto !important; transition:max-height 300ms ease !important; }
.savoirplus.showdiv { max-height:40rem !important; }
.savoirplus p { font-size:0.8rem !important; line-height:1.2rem !important; }

strong { font-weight:600; }
#page-philosophie #philosophie { position:relative; font-size:0; }
#page-philosophie #philosophie > img { position:relative; display:inline-block; margin:1rem 0 0 0; padding:0; width:45%; vertical-align:top; }
#page-philosophie #philosophie > div { position:relative; display:inline-block; margin:0; padding:2.5rem 5rem 0 9rem; width:55%; vertical-align:top;  }
#page-philosophie #philosophie > div h2 { text-transform:uppercase; font-size:2.4rem; font-weight:100; padding-bottom:2.5rem; }
#page-philosophie #philosophie > div h2 span { display:block; }
#page-philosophie #philosophie > div p { font-size:0.8rem; line-height:1.2rem; }
#page-philosophie #philosophie > div ul { padding:0 0 0 1rem; margin:0 0 1rem 0; }
#page-philosophie #philosophie > div li { font-size:0.8rem; list-style-type: disc; list-style-position: outside; padding:0; margin:0;  }
#page-philosophie #philosophie > div .signature { margin-top:0.5rem; width:25rem; height:4rem; float:right; }

#page-philosophie #exigences { position:relative; display:block; margin:2rem 0 0 0; }
#page-philosophie #exigences h2 { display:block; margin:0; padding:0.8rem 3.5rem 0.6rem 3.5rem;  text-transform:uppercase; background-color:#2a2a2a; color:#c5c5c5; font-size:1.6rem; line-height:1em; text-align:left; font-weight:200; }
#page-philosophie #exigences > ul { position:relative; margin:1rem 2.5% 0 2.5%; padding:0; font-size:0; }
#page-philosophie #exigences > ul > li { position:relative; display:inline-block; list-style-type: none; width:33.33%; vertical-align:top; margin:3rem 0 3rem 0; }
#page-philosophie #exigences > ul > li:nth-of-type(4) { margin-left:10%; width:40%; }
#page-philosophie #exigences > ul > li:nth-of-type(5) { width:40%; }
#page-philosophie #exigences div.picto { vertical-align:top; display:inline-block; width:5rem; height:5rem; margin:0 2.5rem 0 1.5rem; position:relative; background-color:#9e885a; border-radius:50%; border:0.25rem solid #9e885a; }
#page-philosophie #exigences div.picto img, #page-philosophie #exigences div.picto svg { position:absolute; width:100%; height:100%; left:50%; top:50%; transform:translate(-50%,-50%); }
#page-philosophie #exigences div.picto path { fill:#fff; }

#page-philosophie #exigences div.picto { background-color:rgb(252,251,249); border-color:rgb(252,251,249); }
#page-philosophie #exigences div.picto path { fill:#9e885a; }

#page-philosophie #exigences div.content { vertical-align:top; display:inline-block; width:19rem; }
#page-philosophie #exigences > ul > li:nth-of-type(4) div.content, #page-philosophie #exigences > ul > li:nth-of-type(5) div.content { width:25rem; }
#page-philosophie #exigences div.content h3 { padding:0 0 0.8rem 0; text-transform:uppercase; font-size:1.1rem; font-weight:400; color:rgb(128,97,34); }
#page-philosophie #exigences div.content p { padding:0 0 0 0; font-size:0.7rem; line-height:1.4em; text-align:left; }
#page-philosophie #exigences div.content ul { padding:0.5rem 0 0 0; margin:0; margin-left:1.2rem; }
#page-philosophie #exigences div.content li { list-style-position:outside; padding:0 0 0 0; font-size:0.7rem; line-height:1.4em; list-style-type:disc; margin:0; padding:0; vertical-align:top; text-align:left; }

#page-philosophie #villa { position:relative; display:block; margin:2rem 0; }
#page-philosophie #villa > h2 { display:block; margin:0; padding:0.8rem 3.5rem 0.6rem 3.5rem;  text-transform:uppercase; background-color:#2a2a2a; color:#c5c5c5; font-size:1.6rem; line-height:1em; text-align:left; font-weight:200; }
#page-philosophie #villa > h2 span { font-size:0.7em; padding-left:1rem; }
#page-philosophie #villa > h2 span:before { content:'-'; padding-right:1rem; }
#page-philosophie #villa > div.mozaic { position:relative; font-size:0; display:block; margin:2rem 0; padding:2rem 0 0 0; width:100%; height:0; padding-top:26%; }
#page-philosophie #villa > div.mozaic > div { display:inline-block; position:absolute; margin:0; padding:0; }
#page-philosophie #villa > div.mozaic > div.mozaic1 { left:0; top:0; width:26%; }
#page-philosophie #villa > div.mozaic > div.mozaic2 { left:42%; top:0; width:44%; }
#page-philosophie #villa > div.mozaic > div.mozaic3 { left:28%; bottom:0; width:44%; }
#page-philosophie #villa > div.mozaic > div.mozaic4 { right:14%; bottom:0; width:12%; }
#page-philosophie #villa > div.mozaic > div.mozaic5 { right:0; top:0; width:12%; }
#page-philosophie #villa > div.mozaic > div.mozaiclien { left:28%; top:0; width:12%; padding-top:12%; background-color:#16273a; }
#page-philosophie #villa > div.mozaic > div.mozaiclien > div { position:absolute; top:0; left:0; bottom:0; right:0; text-align:center; }
#page-philosophie #villa > div.mozaic > div.mozaiclien > div img { max-width:70%; margin:2.5rem 0 0.5rem 0; }
#page-philosophie #villa a { font-size:0.7rem; font-weight:600; margin:1rem 0; padding:0.5rem 1.5rem; color:#8d715a; border:1px solid #afafaf; text-transform:uppercase; text-align:center; transition: all 0.3s linear; }
#page-philosophie #villa a:hover { background-color:#8d715a; border-color:#8d715a; color:#16273a; text-decoration:none }
#page-philosophie #villa a.inside { display:inline-block; }
#page-philosophie #villa a.outside { display:none; }

#page-philosophie #shadoks { position:relative; display:block; margin:2rem 0; }
#page-philosophie #shadoks > h2 { display:block; margin:0; padding:0.8rem 3.5rem 0.6rem 3.5rem; text-transform:uppercase; background-color:#2a2a2a; color:#c5c5c5; font-size:1.6rem; line-height:1em; text-align:left; font-weight:200; }
#page-philosophie #shadoks > h2 span { font-size:0.7em; padding-left:1rem; }
#page-philosophie #shadoks > h2 sup { font-size:0.7em; text-transform:none; }
#page-philosophie #shadoks > h2 span:before { content:'-'; padding-right:1rem; }
#page-philosophie #shadoks > div.mozaic { position:relative; font-size:0; display:block; margin:2rem 0; padding:2rem 0 0 0; width:100%; height:0; padding-top:26%; }
#page-philosophie #shadoks > div.mozaic > div { display:inline-block; position:absolute; margin:0; padding:0; }
#page-philosophie #shadoks > div.mozaic > div.mozaic1 { left:0; top:0; width:46%; }
#page-philosophie #shadoks > div.mozaic > div.mozaic2 { left:48%; top:0; width:12%; }
#page-philosophie #shadoks > div.mozaic > div.mozaic3 { left:62%; top:0; width:26%; }
#page-philosophie #shadoks > div.mozaic > div.mozaic4 { left:90%; top:0; width:10%; }


#page-marguerite { background-color:#16273a; margin:0 0 2rem 0; padding:4rem 5rem; background-image:url('https://www.letellier-architectes.com/_chartes_/letellier/ressources/images/Marguerite.svg'); background-position:top right; background-size:50%; background-repeat:no-repeat; }
#page-marguerite a.retour { position:absolute; bottom:4rem; left:3.5rem; width:auto; height:1.5em; font-size:0.8rem; margin:0; padding:0; color:#d4d4d4; }
#page-marguerite a.retour span { margin:0 0 0 2.5em; padding:0; position:absolute; font-size:1em; font-weight:200; left:0; top:50%; transform:translateY(-50%); width:20rem; display:block; }
#page-marguerite a.retour img, #page-marguerite a.retour svg { position:absolute; height:1.5em; width:1.5em; left:0; top:50%; transform:translateY(-50%); }
#page-marguerite a.retour svg polyline { stroke:#d4d4d4; transition: all 0.2s linear; }
#page-marguerite a.retour:hover svg polyline { stroke:#d4d4d4; }
#page-marguerite a.retour:hover { color:#8d715a; }
#page-marguerite h2 { position:relative; width:30%; margin:2rem auto 4rem auto; }
#page-marguerite h2 img { position:relative; width:100%; height:auto; margin:0; padding:0; }
#page-marguerite div.intro { position:relative; display:block; width:80%; margin:2rem auto; }
#page-marguerite div.intro p { font-size:0.9rem; font-weight:200; }
#page-marguerite div.anciensplans { position:relative; display:block; width:100%; height:auto; padding:0; margin:3rem 0 4rem 0; }
#page-marguerite div.anciensplans > div { display:inline-block; position:absolute; margin:0; padding:0; }
#page-marguerite div.anciensplans > div:first-of-type { position:relative; padding:4rem 56% 30.5rem 8%; width:100%; }
#page-marguerite div.anciensplans > div.anciensplans1 { right:0; top:0; width:48%; }
#page-marguerite div.anciensplans > div.anciensplans2 { left:0; bottom:0; width:37.5%; }
#page-marguerite div.anciensplans > div.anciensplans3 { left:39.5%; bottom:0; width:21%; }
#page-marguerite div.anciensplans > div.anciensplans4 { right:0; bottom:0; width:37.5%; }
#page-marguerite div.mozaic { position:relative; display:block; width:100%; height:auto; margin:3rem 0; }
#page-marguerite div.mozaic > div a { position:relative; margin:1rem 0; display:inline-block; width:auto; font-size:0.7rem; font-weight:600; margin:1rem 0; padding:0.5rem 1.5rem; color:#8d715a; border:1px solid #afafaf; text-transform:uppercase; text-align:center; transition: all 0.3s linear; }
#page-marguerite div.mozaic > div a:hover { background-color:#8d715a; border-color:#8d715a; color:#16273a; text-decoration:none }
#page-marguerite div.mozaic > div { display:inline-block; position:absolute; margin:0; padding:0; }
#page-marguerite div.mozaic > div:first-of-type { position:relative; padding:0 4% 23rem 48%; width:100%; }
#page-marguerite div.mozaic > div.mozaic1 { left:0; bottom:0; width:40%; }
#page-marguerite div.mozaic > div.mozaic2 { left:43%; bottom:11.4rem; width:43.5%; }
#page-marguerite div.mozaic > div.mozaic3 { left:43%; bottom:0; width:30%; }
#page-marguerite div.mozaic > div.mozaic4 { right:13.5%; bottom:0; width:12%; }
#page-marguerite div.mozaic > div.mozaic5 { right:0; bottom:0; width:12%; }
#page-marguerite div.nouveauxplans { position:relative; display:block; width:100%; height:auto; font-size:0; margin:3rem 0; }
#page-marguerite div.nouveauxplans > div { display:inline-block; position:relative; margin:0; padding:0; vertical-align:top; }
#page-marguerite div.nouveauxplans > div.nouveauxplans1 { width:40%; }
#page-marguerite div.nouveauxplans > div.nouveauxplans2 { width:24%; margin-left:3%; }
#page-marguerite div.nouveauxplans > div.esquisse { width:28%; margin-left:5%; margin-top:4rem; }
#page-marguerite p { line-height:2em; color:#d4d4d4; font-size:0.8rem; font-weight:100; text-align:justify; }



#bandeau-parcours { font-size:0; position:relative; display:block; margin:2rem 0; padding:0; overflow:hidden; background-color:#2e2e2e; }
#bandeau-parcours img:first-of-type { position:relative; left:0; top:0; width:56.83%; height:auto; }
#bandeau-parcours img:last-of-type { position:absolute; right:0; bottom:0; width:100%; height:auto; }
#bandeau-parcours > div { position:absolute; left:55%; top:50%; transform:translateY(-50%); }
#bandeau-parcours > div h2 { color:#d4d4d4; font-size:2rem; font-weight:200; margin:0; padding:0; }
#bandeau-parcours > div div { color:#d4d4d4; font-size:1.1rem; font-weight:200; margin:1rem 0 2rem 0; padding:0; }
#bandeau-parcours > div a { display:inline-block; font-size:0.7rem; font-weight:600; margin:0; padding:0.5rem 1.5rem; color:#9e885a; border:1px solid #afafaf; text-transform:uppercase; text-align:center; transition: all 0.3s linear; }
#bandeau-parcours > div a:hover { background-color:#9e885a; border-color:#9e885a; color:#2e2e2e; text-decoration:none }

#page-parcoursaxel { position:relative; background-color:#2e2e2e; color:#d4d4d4; margin:0 0 2rem 0; padding:6rem 18rem 6rem 18rem; }
#page-parcoursaxel:before { content:''; position:absolute; left:0; top:78rem; width:18rem; height:60rem; background: transparent url('https://www.letellier-architectes.com/_chartes_/letellier/ressources/images/parcours-filaire-gauche.png') no-repeat top left; background-size:contain; }
#page-parcoursaxel:after { content:''; position:absolute; right:0; top:120rem; width:18rem; height:60rem; background: transparent url('https://www.letellier-architectes.com/_chartes_/letellier/ressources/images/parcours-filaire-droite.png') no-repeat top right; background-size:contain; }
#page-parcoursaxel a.retour { position:absolute; bottom:2rem; left:3.5rem; width:auto; height:1.5em; font-size:0.8rem; margin:0; padding:0; }
#page-parcoursaxel a.retour span { margin:0 0 0 2.5em; padding:0; position:absolute; font-size:1em; font-weight:200; left:0; top:50%; transform:translateY(-50%); width:20rem; display:block; }
#page-parcoursaxel a.retour img, #page-parcoursaxel a.retour svg { position:absolute; height:1.5em; width:1.5em; left:0; top:50%; transform:translateY(-50%); }
#page-parcoursaxel a.retour svg polyline { stroke:#d4d4d4; transition: all 0.2s linear; }
#page-parcoursaxel a.retour:hover svg polyline { stroke:#d4d4d4; }
#page-parcoursaxel a.retour:hover { color:#9e885a; }
#page-parcoursaxel > div:nth-of-type(1), #page-parcoursaxel > div:nth-of-type(2) { column-count: 2; column-gap:5rem; }
#page-parcoursaxel > div h1 { color:#d4d4d4; font-size:2.4rem; text-transform:uppercase; font-weight:200; margin:0; padding:3rem 0 3rem 0; text-align:left; }
#page-parcoursaxel > div h2 { color:#d4d4d4; font-size:1.5rem; text-transform:none; font-weight:200; margin:0; padding:0 0 6rem 0; text-align:left; line-height:1.4em; }
#page-parcoursaxel > div p { position:relative; text-align:justify; font-size:0.8rem; line-height:1.6em; font-weight:200; }
#page-parcoursaxel > div p img { width:100%; margin-bottom:4rem; }
#page-parcoursaxel > img { position:relative; margin:3rem 0; width:100%; }
#page-parcoursaxel > h2 { color:#d4d4d4; font-size:1.2rem; text-transform:uppercase; font-weight:200; margin:0; padding:4rem 0 2rem 0; text-align:left; line-height:1.4em; }
#page-parcoursaxel > div.mozaicreferences { position:relative; display:block; width:100%; height:0; padding-bottom:81%; }
#page-parcoursaxel > div.mozaicreferences > div { position:absolute; overflow:hidden; height:0; }
#page-parcoursaxel > div.mozaicreferences > div img { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); min-width:100%; min-height:100%; max-width:110%; max-height:110%; }
#page-parcoursaxel > div.mozaicreferences > div > span { position:absolute; left:0; top:0; right:0; bottom:0; background-color:rgba(159,37,26,0.80); opacity:0; transition:opacity 0.3s linear; }
#page-parcoursaxel > div.mozaicreferences > div:hover > span, #page-parcoursaxel > div.mozaicreferences > div.hover > span { opacity:1; }
#page-parcoursaxel > div.mozaicreferences > div > span > span { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:0; }
#page-parcoursaxel > div.mozaicreferences > div:hover > span > span, #page-parcoursaxel > div.mozaicreferences > div.hover > span > span { position:absolute; width:80%; height:auto; top:50%; left:50%; transform:translate(-50%, -50%); color:#fff; font-weight:200; text-align:center; vertical-align:middle; text-transform:uppercase; font-size:0.9rem; }
#page-parcoursaxel > div.mozaicreferences > div:nth-of-type(1) { right:0; top:0; width:20%; padding-bottom:25%; }
#page-parcoursaxel > div.mozaicreferences > div:nth-of-type(2) { left:0; top:0; width:37%; padding-bottom:25%; }
#page-parcoursaxel > div.mozaicreferences > div:nth-of-type(3) { left:40%; top:0; width:37%; padding-bottom:25%; }
#page-parcoursaxel > div.mozaicreferences > div:nth-of-type(4) { left:0; top:50%; transform:translateY(-50%); width:44%; padding-bottom:25%; }
#page-parcoursaxel > div.mozaicreferences > div:nth-of-type(5) { left:47%; top:50%; transform:translateY(-50%); width:25%; padding-bottom:25%; }
#page-parcoursaxel > div.mozaicreferences > div:nth-of-type(6) { right:0; top:50%; transform:translateY(-50%); width:25%; padding-bottom:25%; }
#page-parcoursaxel > div.mozaicreferences > div:nth-of-type(7) { left:23%; bottom:0; width:37%; padding-bottom:25%; }
#page-parcoursaxel > div.mozaicreferences > div:nth-of-type(8) { right:0; bottom:0; width:37%; padding-bottom:25%; }
#page-parcoursaxel > div.mozaicreferences > div:nth-of-type(9) { left:0; bottom:0; width:20%; padding-bottom:25%; }
#page-parcoursaxel a.fichepdf { position:relative; left:50%; margin:1rem 0 1rem 2.5rem; display:inline-block; width:auto; font-size:0.7rem; font-weight:200; padding:0.5rem 1.5rem; color:#9e885a; border:1px solid #d4d4d4; text-transform:uppercase; text-align:center; transition: all 0.3s linear; }
#page-parcoursaxel a.fichepdf:hover { background-color:#9e885a; border-color:#9e885a; color:#16273a; text-decoration:none }


#trombinoscope-filtres { margin:2rem 0; }
#trombinoscope-filtres h2 { color:#2a2a2a; display:inline-block; font-weight:400; font-size:1.1rem; width:14%; border-right:1px solid #d8d8d8; text-align:right; padding:1rem 3.2% 1rem 0; text-transform:uppercase; }
#trombinoscope-filtres ul { display:inline-block; margin:0; padding:0 0 0 3.2%; font-size:0; }
#trombinoscope-filtres ul > li { position:relative; display:inline-block; margin:0.1rem 0; padding:0; text-transform:uppercase; font-size:0; vertical-align:baseline;  }
#trombinoscope-filtres ul > li a { font-size:0.7rem; color:#000000; display:inline-block; padding:0; margin:0 0 0 2rem; font-weight:400; transition: all 300ms linear; vertical-align:baseline; }
#trombinoscope-filtres ul > li a:hover, #trombinoscope-filtres ul > li a.current { color:#9e885a; text-decoration:none; transition: all 300ms linear; }
#trombinoscope-filtres ul > li:first-child a { padding:0; }

ul#trombinoscope { position:relative; width:100%; font-size:0; margin:0; padding:0; text-align:left; }
ul#trombinoscope li { display:inline-block; position:relative; overflow:hidden; width:14%; padding-top:14%; height:0; margin-left:3.2%; margin-bottom:3.2%; background-color:#eeeeee; font-size:1.1rem; }
ul#trombinoscope li:nth-child(6n+1) { margin-left:0; }
ul#trombinoscope li > div { z-index:6; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background-color:rgba(159,37,26,0.80); color:#fff; font-weight:200; opacity:0; transition:opacity 0.3s linear 0s; text-align:center; vertical-align:middle; }
ul#trombinoscope li > div:hover, ul#trombinoscope li > div.hover { opacity:1; text-decoration:none; transition:opacity 300ms linear 500ms; }
ul#trombinoscope li > div span { margin:auto; padding:0; display:block; position:absolute; top:50%; left:50%; width:100%; transform: translateX(-50%) translateY(-50%); }
ul#trombinoscope li > div span span { display:block; position:relative; padding:0 1rem; text-transform:none; transform: translateX(-50%) translateY(0%); font-size:1rem; font-weight:600; }
ul#trombinoscope li > div span span.fonction { margin-top:1rem; font-size:0.8rem; font-weight:100; }
ul#trombinoscope li > div span span.fonction p { text-align:center; }
ul#trombinoscope img { z-index:5; position:absolute; top:0; bottom:0; left:0; right:0; width:100%; height:100%; opacity:1; transition:opacity 0ms ease; }
ul#trombinoscope li > div:hover ~ img:last-of-type, ul#trombinoscope li > div.hover ~ img:last-of-type { opacity:0; transition:opacity 500ms ease; }

ul#trombinoscope li { display:inline-block; opacity:0.2; transition:opacity 0.3s linear 0s; }
ul#trombinoscope li > div { display:none; }
ul#trombinoscope.show_toutes li { opacity:1; }
ul#trombinoscope.show_toutes li > div { display:block; }
ul#trombinoscope li.vide { opacity:0.2; }

ul#trombinoscope li.tritrombi { opacity:0; }
ul#trombinoscope li.tritrombi { opacity:0; }
ul#trombinoscope.show_toutes li.tritrombi { opacity:0; }
ul#trombinoscope.show_equipe_dirigeante li.equipe_dirigeante { opacity:1; }
ul#trombinoscope.show_equipe_dirigeante li.equipe_dirigeante.tritrombi { opacity:0; }
ul#trombinoscope.show_equipe_dirigeante li.equipe_dirigeante > div { display:block; }
ul#trombinoscope.show_architectes li.architectes { opacity:1; }
ul#trombinoscope.show_architectes li.architectes.tritrombi { opacity:0; }
ul#trombinoscope.show_architectes li.architectes > div { display:block; }
ul#trombinoscope.show_equipe_terrain li.equipe_terrain { opacity:1; }
ul#trombinoscope.show_equipe_terrain li.equipe_terrain.tritrombi { opacity:0; }
ul#trombinoscope.show_equipe_terrain li.equipe_terrain > div { display:block; }
ul#trombinoscope.show_equipe_developpement li.equipe_developpement { opacity:1; }
ul#trombinoscope.show_equipe_developpement li.equipe_developpement.tritrombi { opacity:0; }
ul#trombinoscope.show_equipe_developpement li.equipe_developpement > div { display:block; }
ul#trombinoscope.show_equipe_gestion_interne li.equipe_gestion_interne { opacity:1; }
ul#trombinoscope.show_equipe_gestion_interne li.equipe_gestion_interne.tritrombi { opacity:0; }
ul#trombinoscope.show_equipe_gestion_interne li.equipe_gestion_interne > div { display:block; }

#page-equipe #recrutement { position:relative; font-size:0; background-color:#eaeaea; }
#page-equipe #recrutement > img { position:relative; display:inline-block; margin:0; padding:0; width:50%; vertical-align:top; }
#page-equipe #recrutement > div { position:relative; background-color:#eaeaea; display:inline-block; margin:0; padding:3rem 4rem 3rem 6rem; width:50%; vertical-align:top; }
#page-equipe #recrutement > div h2 { display:block; font-size:1.3rem; text-transform:uppercase; font-weight:400; text-align:left; padding-bottom:1.5em; }
#page-equipe #recrutement > div h3 { display:block; font-size:1.1rem; text-transform:uppercase; font-weight:400; text-align:left; padding-top:1.5em; padding-bottom:0.5em; }
#page-equipe #recrutement > div p { font-size:0.8rem; line-height:1.2rem; }
#page-equipe #recrutement > div > span { display:inline-block; font-size:0; width:48%; margin: 1rem 0 0 0; padding:0; position:relative; }
#page-equipe #recrutement > div > span:first-of-type { margin-right:4%; }
#page-equipe #recrutement > div a { display:block; font-size:0.8rem; margin:0; padding:0.3rem 0; position:relative; border:1px solid #000000; text-align:center; transition: all 200ms linear; }
#page-equipe #recrutement > div a:hover { background-color:#000000; color:#eaeaea; text-decoration:none; }

#page-equipe #offres { position:relative; background-color:#eaeaea; display:inline-block; margin:0; padding:0 4rem 3rem 6rem; width:100%; vertical-align:top; }
#page-equipe #offres h2 { display:block; font-size:1.1rem; text-transform:uppercase; font-weight:400; text-align:left; padding-bottom:1.5em; }
#page-equipe #offres ul { padding-left:1em; }
#page-equipe #offres li { font-size:0.8rem; line-height:1.2rem; text-transform:uppercase; padding-bottom:1em; }
#page-equipe #offres li span { display:block; }
#page-equipe #offres a { display:inline-block; width:auto; color:#9e885a; text-transform:none; font-family:"Playfair Display", serif; font-style:italic; font-size:0.8rem; margin-right:3em; }
#page-equipe #offres a:hover { text-decoration:underline; }

#page-equipe #actu { padding:2rem 0 0 0; margin-bottom:2rem;  background-color:#eaeaea; min-height:0; }
#page-equipe #actu a { margin-bottom:0; }
#page-equipe #actu h2 { position:absolute; padding:0; left:39.5%; text-transform:uppercase; font-size:1.25rem; font-weight:700; color:#705f3b; background-color:transparent; }
#page-equipe #actu .visuel { background-color:transparent; }
#page-equipe #actu .visuel:after { opacity:0; }


#page-partenaires #partenaires { position:relative; font-size:0; margin-bottom:2rem; }
#page-partenaires #partenaires > img { position:relative; display:inline-block; margin:0; padding:0; width:50%; vertical-align:top; }
#page-partenaires #partenaires > div { position:relative; display:inline-block; margin:0; padding:3rem 10rem 3rem 7rem; width:50%; vertical-align:top; }
#page-partenaires #partenaires > div h2 { font-size:1rem; padding-bottom:1.5rem; text-transform:uppercase; font-weight:200; color:#000000; }
#page-partenaires #partenaires > div p { font-size:0.8rem; }

#page-partenaires #partenaires h2.mecenat { font-size:1.4rem; padding-left:4rem; padding-top:2rem; padding-bottom:1.5rem; text-transform:uppercase; font-weight:200; color:#000000; }

#page-partenaires #partenaires > ul { margin:0; padding:0.5rem 1rem 0 1rem; font-size:0; background-color:#eaeaea; }
#page-partenaires #partenaires > ul > li { margin:1rem 0; padding:0 0 1rem 0; font-size:0; display:block; position:relative; border-bottom:1px solid #c6c6c6; }
#page-partenaires #partenaires > ul > li:last-of-type { border-bottom:0; }
#page-partenaires #partenaires > ul > li > div { position:relative; display:inline-block; margin:0; padding:0; min-height:10rem; vertical-align:middle; text-align:center; }

#page-partenaires #partenaires > ul > li > div.logo { width:15%; border-right:1px solid #c6c6c6; }
#page-partenaires #partenaires > ul > li > div.logo img, #page-partenaires #partenaires > ul > li > div.logo svg, #page-partenaires #partenaires > ul > li > div.logo object { position:absolute; max-width:80%; max-height:8rem; top:50%; left:50%; transform: translateX(-50%) translateY(-50%); }
#page-partenaires #partenaires > ul > li > div.nom { padding:2rem 3rem 0.5rem 3rem; width:35%;  }
#page-partenaires #partenaires > ul > li > div.nom h3 { display:block; font-size:1.4rem; text-transform:uppercase; font-weight:600; text-align:left; }
#page-partenaires #partenaires > ul > li > div.nom div { display:block; font-size:0.8rem; padding-top:0.5rem; text-transform:uppercase; font-weight:400; text-align:left; }
#page-partenaires #partenaires > ul > li > div.nom div span { text-transform:none; }
#page-partenaires #partenaires > ul > li > div.nom a { display:block; font-size:0.8rem; padding-top:1rem; text-align:left; }
#page-partenaires #partenaires > ul > li > div.descriptif { padding:2rem 15rem 0.5rem 0; width:50%; }
#page-partenaires #partenaires > ul > li > div.descriptif p { font-size:0.8rem; }
#page-partenaires #partenaires > ul > li a:hover { text-decoration:none; color:#9e885a; }

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
#page-actu h1 { margin:1rem 0 0 38.5%; padding:0.8rem 1% 0.8rem 7%; text-transform:uppercase; background-color:#2a2a2a; color:#9e885a; font-size:1.6rem; line-height:1em; text-align:left; }

#actu-filtres { margin:0 0 0 38.5%; padding:0 0 0 7%; font-size:0; }
#actu-filtres > li { position:relative; display:inline-block; margin:0.1rem 0; padding:0; text-transform:uppercase; font-size:0; vertical-align:baseline;  }
#actu-filtres > li:first-child:after { content:"|"; display:inline-block; color:#d8d8d8; font-weight:200; font-size:1.2rem; }
#actu-filtres > li a { font-size:0.8rem; color:#000000; display:inline-block; padding:0 0 0 2rem; font-weight:400; transition: all 300ms linear; vertical-align:baseline; }
#actu-filtres > li a:hover, #actu-filtres > li a.current { color:#9e885a; text-decoration:none; transition: all 300ms linear; }
#actu-filtres > li:first-child a { padding:0 1.5rem 0 0; }

#actu-vide { margin:10rem 0 15rem 38.5%; text-transform:uppercase; font-size:1.2rem; font-weight:200; }

.actu-pagination { position:relative; width:100%; font-size:0; margin:0; padding:0; height:2.2rem; }
.actu-pagination:after { content:""; display:table; clear:both; }
.actu-pagination .count { float:left; position:relative; font-size:0.8rem; height:100%; padding:0.6rem 1rem 0.6rem 1rem; position:relative; color:#000000; display:inline-block; width:auto; text-transform:uppercase; text-align:left; }
.actu-pagination .pages { float:right; position:relative; font-size:0; height:100%; padding:0.6rem 1rem 0.6rem 1rem; position:relative; color:#000000; display:inline-block; width:auto; text-transform:uppercase; text-align:right; }
.actu-pagination .pages span { vertical-align:middle; position:relative; display:inline-block; width:auto; height:auto; font-size:0.8rem; margin:0; padding:0 0.3rem; }
.actu-pagination .pages a { vertical-align:middle; position:relative; display:inline-block; width:auto; height:auto; font-size:0.8rem; margin:0; padding:0 0.3rem; }
.actu-pagination .pages a img { display:inline-block; margin:0; padding:0; position:relative; width:auto; }
.actu-pagination .pages a svg { display:inline-block; margin:0; padding:0; position:relative; width:auto; transition: all 0.2s linear; }
.actu-pagination .pages a img, .actu-pagination .pages a svg { height:0.6rem; }
.actu-pagination .pages a svg polyline { stroke:#000000; }
.actu-pagination .pages a.inactive { opacity:0.2; cursor:default; }

#actu-liste { margin:0; padding:0; font-size:0; }
#actu-liste > li { margin:0 0 2rem 0; position:relative; min-height:11rem; font-size:0; list-style-type:none; }

#actu-liste > li .images { vertical-align:top; display:inline-block; width:38.5%; min-height:11rem; position:relative; padding:0; margin:0; font-size:0; }
#actu-liste > li img { vertical-align:top; width:100%; position:relative; height:auto; }
#actu-liste > li img:first-of-type { vertical-align:top; width:100%; position:absolute; height:auto; left:0; top:0; }

#actu-liste > li .infos { vertical-align:top; display:inline-block; width:54.5%; position:relative; padding:0 0 4rem 0; margin:0 0 0 7%; height:auto; }

#actu-liste > li h2 { margin:0; display:block; width:auto; padding-right:15rem; padding-top:2rem; padding-bottom:1rem; text-transform:uppercase; font-size:1rem; }
#actu-liste > li .date { float:none; font-family:"Playfair Display", serif; position:absolute; width:auto; right:6.5rem; top:1.8rem; font-size:1.1rem; color:#bd8a89; padding:0; margin:0; }
#actu-liste > li .date span { font-size:1.6rem; padding-left:0.2rem; }
#actu-liste > li div {  margin:0; display:block; width:auto; height:auto; padding-right:15rem; font-size:0.8rem; overflow:hidden; font-weight:200; }
#actu-liste > li div > p:last-of-type { padding-bottom:0; }
#actu-liste > li .infos a.link { position:relative; margin:1rem 0; display:block; width:auto; padding-right:0; font-weight:400; font-size:0.8rem; color:#9e885a; }
#actu-liste > li .infos > a { position:absolute; left:0; bottom:2rem; margin:0; display:inline-block; width:auto; padding-right:0; font-family:"Playfair Display", serif; font-style:italic; font-size:0.8rem; color:#9e885a; height:auto; }

#actu-liste > li {  background-color:#ffffff; color:#000000; cursor:pointer; transition: all 0.2s linear 0s; }
#actu-liste > li.detail { cursor:default; }
#actu-liste > li .vignette { opacity:1; }
#actu-liste > li .visuel { opacity:0; max-height:0; }
#actu-liste > li .controls { opacity:0; height:0; padding-bottom:0; padding-right:0; }

#actu-liste > li .intro { opacity:1; max-height:50rem; }
#actu-liste > li .texte { opacity:0; max-height:0; }

#actu-liste > li .suite { opacity:1; max-height:2rem; }
#actu-liste > li .fermer { opacity:0; max-height:0; }
#actu-liste > li .modifier { display:none; opacity:0; max-height:0; }
#actu-liste > li .supprimer { display:none; opacity:0; max-height:0; }


#actu-liste > li.detail { background-color:#151515; color:#c5c5c5; }

#actu-liste > li.detail .vignette { z-index:-1; opacity:0; }
#actu-liste > li.detail .visuel { opacity:1; max-height:50rem; }
#actu-liste > li.detail .controls { opacity:1; height:0; padding-bottom:60%; }

#actu-liste > li.detail .intro { opacity:0; max-height:0; }
#actu-liste > li.detail .texte { opacity:1; max-height:50rem; }

#actu-liste > li.detail .suite { opacity:0; max-height:0; }
#actu-liste > li.detail .fermer { opacity:1; max-height:2rem; }

#actu-liste > li.detail .modifier { display:inline-block; opacity:1; max-height:2rem; bottom:2rem; left:unset; right:15rem; }
#actu-liste > li.detail .supprimer { display:inline-block; opacity:1; max-height:2rem; bottom:2rem; left:unset; right:20rem; }


/* VIDEO */
div.controls { position:relative; width:100%; height:0; padding:0 0 60% 0; overflow:hidden; background-color:#000; }
div.controls > iframe { position:absolute; left:0; top:0; width:100%; height:100%; padding:0; margin:0; border:0; }

div.controls > img { z-index:1; position:relative; width:100%; height:auto; left:0; top:0; vertical-align:top; }
div.controls > video ~ img { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
div.controls video { z-index:2; position:relative; width:100%; height:auto; left:0; top:0; vertical-align:top; }

div.controls > .play { z-index:3; position:absolute; width:100%; height:100%; left:0; top:0; }
div.controls > .play img, div.controls > .play svg { position:absolute; width:4rem; height:4rem; left:50%; top:50%; transform:translate(-50%,-50%); }
div.controls > .play path { fill:#ffffff; }
div.controls:hover > .play path { fill:#ffffff; }

#actu-liste > li div.controls > .play { z-index:3; position:absolute; width:100%; height:100%; left:0; top:0; margin:0; padding:0; }


/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* REALISATIONS - SELECTION */

#realisations-selection { z-index:5; position:relative; display:block; width:75rem; padding:0; margin:1rem auto 1.5rem auto; min-height:45rem; overflow:hidden; text-align:center; }
#realisations-selection .loadingbar { position:absolute; top:30rem; left:50%; transform:translate(-50%); }

#realisations-criteres { width:100%; position:relative; margin-top:2rem; }
#realisations-criteres h1 { position:absolute; left:0; top:0; width:17rem; height:calc(100% - 1.5rem); border-right:1px solid #494949; font-size:2.5rem; font-weight:100; margin:0; padding:0; text-transform:uppercase; color:#000000; text-align:left; }
#realisations-criteres > div { display:block; margin:0; padding:0.2rem 0; font-size:1.1rem; text-align:left; max-height:unset; }
#realisations-criteres > div:first-of-type { margin:3rem 0 0 0; padding-bottom:1.5rem; border-bottom:1px solid #494949; }
#realisations-criteres > div.count { position:absolute; width:16.731rem; bottom:0; margin:1rem 0 2rem 0; padding-top:1rem; border-top:1px solid #494949; text-transform:uppercase; font-size:0.8rem; }
#realisations-criteres.avancee > div:first-of-type { padding:0.2rem 0 1rem 0; margin-bottom:0; }
#realisations-criteres.avancee > div.rechavancee { height:26rem; padding:1rem 0 0.2rem 0; margin-top:0; border-top:0; }
#realisations-criteres.avancee > div.count { height:auto; padding-top:1rem; }
#realisations-criteres > span { font-size:0.8rem; font-weight:100; margin:0; padding:0; text-transform:uppercase; color:#000000; transition: color 0.2s linear; }
#realisations-criteres a { font-size:1.1rem; font-weight:100; margin:0; padding:0; text-transform:uppercase; color:#000000; transition: color 0.2s linear; }
#realisations-criteres > div.habitat a { font-size:0.8rem; }
#realisations-criteres > div.habitat a:first-of-type { font-size:1.1rem; padding-right:1rem; }
#realisations-criteres span.current, #realisations-criteres a.current, #realisations-criteres a:hover { text-decoration:none; color:#9e885a; }

#realisations-criteres span.soustitre { cursor:pointer; display:block; position:relative; font-size:1.1rem; font-weight:100; margin:0; padding:0; text-transform:uppercase; color:#000000; transition: color 0.2s linear; width:100%; }
#realisations-criteres span.soustitre.current, #realisations-criteres span.soustitre:hover { text-decoration:none; color:#9e885a; }
#realisations-criteres span.soustitre:after { content:'+'; font-family:Helvetica; position:absolute; right:0.5rem; font-size:1.5rem; top:-0.3rem; }
#realisations-criteres span.soustitre.btn-close:after { content:'-'; top:-0.5rem; right:0.6rem; }

#realisations-carte { position:relative; }
#realisations-carte > button { cursor:pointer; background-color:transparent; outline:0; display:block; position:absolute; top:-1.5rem; transform:translateY(-100%); left:0; width:auto; margin:0; padding:0.5rem 0; font-size:0.8rem; border:0; color:#9e885a; font-weight:normal; text-transform:none; font-style:italic; }
#realisations-carte > button > svg { display:inline;vertical-align:middle; margin-right:0.5em; height:0.7em; width:auto; stroke-width:10; transform:rotate(-90deg); }
#realisations-carte > button > span { vertical-align:middle; }
#realisations-carte > button > span:nth-of-type(1) { display:inline-block; }
#realisations-carte > button > span:nth-of-type(2) { display:none; }
#realisations-carte.open > button > span:nth-of-type(1) { display:none; }
#realisations-carte.open > button > span:nth-of-type(2) { display:inline-block; }
#realisations-carte > button:hover { color:#000000; background-color:transparent; }

#realisations-carte #searchmap { overflow:hidden; position:relative; margin:0 0 2rem 0; padding:0; display:inline-block; width:100%; height:0; vertical-align:top; transition:height ease 300ms; }
#realisations-carte.open #searchmap { height:60vh; }
#realisations-carte .infowdw { font-family:gilroy, sans-serif; display:block; position:relative; text-align:left; }
#realisations-carte .infowdw img { display:inline-block; vertical-align:top; width:4rem; height:4rem; margin-right:0.5rem; }
#realisations-carte .infowdw > div { display:inline-block; vertical-align:top; }
#realisations-carte .infowdw > div > span { z-index:1; position:relative; display:block; text-align:left; min-width:16rem; max-width:20rem; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#realisations-carte .infowdw > div > span:nth-of-type(1) { padding-right:1rem; font-size:1rem; text-transform:uppercase; }
#realisations-carte .infowdw > div > span:nth-of-type(2) { position:absolute; left:4.5rem; bottom:0; color:#9e885a; font-style:italic; }
#realisations-carte .gm-style-iw-ch { padding-top:12px !important; }
#realisations-carte .gm-style-iw-chr button { z-index:10; position:absolute !important; right:0 !important; top:0 !important;  transform: translate(0.5rem,-0.5rem) !important; }
#realisations-carte .gm-style .gm-style-iw-tc { display:none !important; }
body.desktop #realisations-carte .gm-style > div:first-of-type > div > div > div > div:hover { box-shadow: 0 0 3rem rgba(159,37,26,1); }
#searchmap { position:relative; margin:0; padding:0; display:block; width:100%; height:100%; }



form#realisations-recherche-avancee { font-size:0; position:relative; width:100%; height:auto; margin:0; padding:0; padding-bottom:3rem; }
form#realisations-recherche-avancee label { display:inline-block; position:relative; width:20.5%; margin:0 6% 0.5rem 0; padding:0; font-size:0; vertical-align:top; }
form#realisations-recherche-avancee div { text-transform:none; }
form#realisations-recherche-avancee span { text-transform:none; }
form#realisations-recherche-avancee span.mylabel { display:block; position:relative; border-bottom:1px solid #000000; margin:0; padding:0.2rem 0; font-size:0.8rem; vertical-align:top; color:#000000; text-transform:uppercase; }
form#realisations-recherche-avancee div.cs-select { width:100% !important; font-size:0.8rem; display:inline-block !important; background-color: #ffffff !important; color:#000000 !important; }
form#realisations-recherche-avancee div.cs-select .cs-options { z-index:9999 !important; background-color: #ffffff !important; color:#000000 !important; overflow-y:auto; overflow-x:hidden; max-height:15rem; box-shadow: 0 0 0.6rem rgba(0, 0, 0, 0.2); border-radius:0.3rem; }
form#realisations-recherche-avancee div.cs-select .cs-options ul span:hover, form#realisations-recherche-avancee div.cs-select .cs-options .cs-selected { background-color: #ffffff !important; color:#9e885a !important; }
form#realisations-recherche-avancee input { outline:0; display:inline-block; position:relative; width:100%; margin:0; padding:0; font-size:0.8rem; padding-left:0.25rem; line-height:1.4em; vertical-align:top; color:#000000; background-color:#ffffff; }
form#realisations-recherche-avancee select { outline:0; display:inline-block; position:relative; width:100%; margin:0; padding:0 0.5rem; font-size:0.8rem; padding-left:0.25rem; line-height:1.4em; vertical-align:top; color:#000000; background-color:#ffffff; }
form#realisations-recherche-avancee select option { padding:1rem !important; background-color: #ffffff !important; color:#000000 !important; }
form#realisations-recherche-avancee select option:hover, form#realisations-recherche-avancee select option:selected { background-color: #000000 !important; color:#ffffff !important; }
form#realisations-recherche-avancee input::placeholder { color:#000000; opacity:1; }
form#realisations-recherche-avancee button:first-of-type { cursor:pointer;  background-color:transparent; outline:0; display:block; position:absolute; bottom:0; right:10rem; width:auto; margin:0; padding-left:0; padding-right:0; font-size:0.6rem; border:0; color:#9e885a; font-weight:normal; text-transform:none; font-style:italic; }
form#realisations-recherche-avancee button:first-of-type > svg { display:inline; margin-right:0.5em; height:0.7em; width:auto; stroke-width:10; }
form#realisations-recherche-avancee button:first-of-type:hover { color:#000000; background-color:transparent; }
form#realisations-recherche-avancee button:last-of-type { cursor:pointer; outline:0; display:block; position:absolute; bottom:0; right:0; width:auto; margin:0; font-size:0.8rem; border:1px solid #494949; color:#9e885a; background-color:#ffffff; font-weight:normal; }

form#realisations-recherche-avancee div.cs-select { background-image:url(https://www.letellier-architectes.com/_chartes_/letellier/ressources/images/contribution/dropdown.svg) !important; background-size:1em; background-position: right center !important; background-repeat: no-repeat !important; }
form#realisations-recherche-avancee span.cs-placeholder {  padding-right:1.5em !important;}
	

ul#selection-mosaique { position:relative; width:100%; font-size:0; margin:2rem 0 0 0; padding:0; text-align:center; }
ul#selection-mosaique li { display:inline-block; position:relative; height:0; overflow:hidden; margin-left:1.5%; margin-right:1.5%; margin-top:3%; background-color:transparent; font-size:1.3rem; }
ul#selection-mosaique a { z-index:6; display:block; position:absolute; top:0; left:0; height:0; width:0; background-color:rgba(159,37,26,0.80); color:#fff; font-weight:200; opacity:0; transition:opacity 0.3s linear; text-align:center; vertical-align:middle; }
ul#selection-mosaique li:hover a, ul#selection-mosaique li.hover a { top:0; left:0; height:100%; width:100%; opacity:1; text-decoration:none; }
ul#selection-mosaique a span { margin:auto; padding:0; display:block; position:absolute; top:50%; left:50%; width:100%; transform: translateX(-50%) translateY(-50%); }
ul#selection-mosaique a span span { opacity:0; display:block; position:relative; padding:0 1rem; text-transform:none; transform: translateX(-50%) translateY(0%); }
ul#selection-mosaique li:hover a span span { opacity:1; }
ul#selection-mosaique a span span.soustitre { font-size:0.9rem; }
ul#selection-mosaique img { z-index:5; position:absolute; top:0; bottom:0; left:0; right:0; width:100%; height:100%; }
ul#selection-mosaique li:hover a + img, ul#selection-mosaique li.hover a + img { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); }

.selection-pagination { display:block; position:relative; width:100%; font-size:0; margin:0; padding:0; height:2.2rem; }
.selection-pagination:after { content:""; display:table; clear:both; }
.selection-pagination .count { float:left; position:relative; font-size:0.8rem; height:100%; padding:0.6rem 1rem 0.6rem 1rem; position:relative; color:#000000; display:inline-block; width:auto; text-transform:uppercase; text-align:left; }
.selection-pagination .pages { display:none; float:right; position:relative; font-size:0; height:100%; padding:0.6rem 1rem 0.6rem 1rem; position:relative; color:#000000; display:inline-block; width:auto; text-transform:uppercase; text-align:right; }
.selection-pagination .pages span { vertical-align:middle; position:relative; display:inline-block; width:auto; height:auto; font-size:0.8rem; margin:0; padding:0 0.3rem; }
.selection-pagination .pages a { vertical-align:middle; position:relative; display:inline-block; width:auto; height:auto; font-size:0.8rem; margin:0; padding:0 0.3rem; }
.selection-pagination .pages a img { display:inline-block; margin:0; padding:0; position:relative; width:1em; }
.selection-pagination .pages a svg { display:inline-block; margin:0; padding:0; position:relative; width:1em; transition: all 0.2s linear; }
.selection-pagination .pages a img, .selection-pagination .pages a svg { height:0.6rem; }
.selection-pagination .pages a svg polyline { stroke:#000000; }
.selection-pagination .pages a.inactive { opacity:0.2; cursor:default; }

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* REALISATIONS - FICHE */

#sousmenu-realisation { z-index:10; position:fixed; border-bottom:1px solid #d8d8d8; top:4rem; left:50%; transform:translateX(-50%); width:calc(75rem + 2px); display:block; height:5rem; padding:0; margin:0; overflow:hidden; background-color:#ffffff; color:#000000; font-size:0; border-top:1rem solid #fff; }
#sousmenu-realisation a { vertical-align:middle; position:relative; display:inline-block; width:auto; height:auto; top:0; font-size:1rem; margin:0; padding:0; }
#sousmenu-realisation a:hover { text-decoration:none; }
#sousmenu-realisation a img { vertical-align:middle; display:inline-block; margin:0; padding:0; position:relative; width:1em; }
#sousmenu-realisation a svg { vertical-align:middle; display:inline-block; margin:0; padding:0; position:relative; width:1em; transition: all 0.2s linear; }

#sousmenu-realisation a.retour { margin:0; padding:0.2rem 1.9rem 0 0; margin-right:1.9rem; border-right:1px solid #d8d8d8; text-transform:uppercase; font-size:0; }
#sousmenu-realisation a.retour span { vertical-align:middle; display:inline-block; margin:0 0 0 0.7rem; padding:0; position:relative; font-size:1.1rem; font-weight:200; }
#sousmenu-realisation a.retour img, #sousmenu-realisation a.retour svg { height:0.7rem; width:auto; margin-top:0.1rem; }
#sousmenu-realisation a.retour svg polyline { stroke:#000000; stroke-width:10; transition: all 0.2s linear; }
#sousmenu-realisation a.retour:hover svg polyline { stroke:#9e885a; }

#sousmenu-realisation div { vertical-align:middle; position:relative; display:inline-block; width:auto; height:3.5rem; top:0; font-size:1rem; margin:0; padding:0; font-size:0; }

#sousmenu-realisation div#navselection { max-width:55%; height:3.5rem; margin:0; padding:1.35rem 0; font-size:0; text-transform:uppercase; }
#sousmenu-realisation div#navselection span { display:inline-block; vertical-align:bottom; font-size:0.7rem; color:#c5c5c5; font-style:italic; }
#sousmenu-realisation div#navselection span span { text-transform:none; padding:0 0 0 0.5rem; margin:0; color:#9e885a; }
#sousmenu-realisation div#navselection a.habitat { padding-right:0.5rem; color:#f0f0f0; }
#sousmenu-realisation div#navselection span.separateur { font-size:0.55rem; padding: 0 0.2rem; color:#f0f0f0; }
#sousmenu-realisation div#navselection a { display:inline-block; vertical-align:middle; font-size:0.7rem; padding-left:0.8rem; }
#sousmenu-realisation div#navselection a.sousmenu-habitat { font-size:0.55rem; padding:0.1rem 0.2rem 0 0.2rem; color:#f0f0f0; }
#sousmenu-realisation div#navselection a:first-of-type { padding-left:0; }
#sousmenu-realisation div#navselection span.current, #sousmenu-realisation div#navselection a.current, #sousmenu-realisation div#navselection a:hover { color:#9e885a; text-decoration:none; }

#sousmenu-realisation div#navprojet { position:absolute; right:0; width:auto; font-size:0; }
#sousmenu-realisation div#navprojet div { vertical-align:middle; display:inline-block; position:relative; height:2.5rem; margin:0.5rem 0; padding:0.2rem 0; }
#sousmenu-realisation div#navprojet div span { display:block; font-size:0.7rem; text-align:center; text-transform:uppercase; margin:0; padding:0; font-weight:600; }
#sousmenu-realisation div#navprojet div span:first-of-type { font-size:1rem; font-weight:200; }
#sousmenu-realisation div#navprojet a { vertical-align:middle; display:inline-block; position:relative; height:2.5rem; margin:0.5rem 0.5rem; }
#sousmenu-realisation div#navprojet a img, #sousmenu-realisation div#navprojet a svg { height:0.7rem; width:auto; margin-top:0.6rem; }
#sousmenu-realisation div#navprojet a svg polyline { stroke:#000000; stroke-width:10; transition: all 0.2s linear; }
#sousmenu-realisation div#navprojet a:hover svg polyline { stroke:#9e885a; }

#infos-realisation { width:75rem; padding:0 0 2rem 0; margin:0 auto; font-size:0; }

#infos-realisation > div { width:100%; position:relative; display:inline-block; margin:2.5rem auto; vertical-align:top; color:#000000; }
#infos-realisation > div h2 { text-transform:uppercase; font-size:1.3rem; margin:0; padding:0; padding-bottom:1.5rem; font-weight:200; }
#infos-realisation > div ul { font-size:1rem; margin:0; padding:0; font-size:1rem; }

div.ressources a.fichepdf { position:relative; display:inline-block; width:auto; vertical-align:top; border-left:1px solid #c5c5c5; padding:0.4rem 2.5rem 0.4rem 5rem; margin:0; font-size:0.8rem; text-transform:uppercase; transition: color linear 0.3s; }
div.ressources a.fichepdf:first-of-type { border-left:0; padding-left:2.5rem; }
div.ressources a.fichepdf svg { position:absolute; fill:#9e885a; height:1.3rem; width:1.3rem; left:2.5rem; top:0.35rem; }
div.ressources a.fichepdf:first-of-type svg { left:0; }
div.ressources a.fichepdf:hover { color:#9e885a; text-decoration:none; transition: color linear 0.3s; }
div.ressources > div { margin-top:2rem; }
#infos-realisation > div.ressources h2 { display:inline-block; width:auto; vertical-align:top; padding-right:2.5rem; }
div.ressources ul.plans { display:inline-block; vertical-align:top; width:calc(100% - 8rem); position:relative; margin:2rem 0 2rem 0; padding:0; font-size:0; }
div.ressources ul.plans li { position:relative; display:inline-block; margin:0; padding:0; list-style-type:none; height:3rem; margin-right:2%; margin-bottom:0.5rem; }
div.ressources ul.plans li img { height:100%; width:auto; }


#infos-realisation > div.informations { margin:2.5rem 0; }
div.informations li { color:#9e885a; position:relative; display:block; font-size:0.8rem; margin:0; padding:0; list-style-type:none; border-bottom:1px solid #c5c5c5; padding-left:40%; padding-bottom:0.4rem; margin-bottom:0.4rem; }
div.informations li span { position:absolute; display:inline-block; vertical-align:middle; text-transform:uppercase; width:40%; left:0; top:0; color:#000000;  }
div.informations li.moe { padding-left:0; padding-top:1.3rem; }
div.informations li.moe > span { width:100%; }
div.informations li > ul { height:auto; }
div.informations li > ul > li { border-bottom:0; padding-bottom:0; margin-bottom:0; }
div.informations li > ul > li svg { position:absolute; display:inline-block; vertical-align:middle; left:0.1rem; top:50%; transform:translateY(-50%); height:0.7rem; width:auto; }
div.informations li > ul > li svg polyline { stroke:#000000; stroke-width:5; transition: all 0.2s linear; }
div.informations li > ul > li span { padding-left:1rem; }

#infos-realisation > div.specificites { margin:2.5rem 0; }
div.specificites ul { position:relative; margin:0 0 2rem 0; padding:0; }
div.specificites ul li { font-size:1rem; font-size:0.8rem; list-style-type:disc; margin-left:1rem; width:100%; }

div#intro { position:relative; width:90%; margin:0 5% 2rem 5%; padding:2rem 0 0 0; border-top:1px solid #494949; font-size:0.8rem; font-weight:300; color:#000000; text-align:center; }
div#intro p { text-align:justify; position:relative; }

#fiche-realisation { z-index:5; position:relative; display:block; width:75rem; padding:0; margin:0 auto; margin-top:3.5rem; }
#fiche-realisation h1 { text-transform:uppercase; font-weight:100; font-size:2.5rem; margin:0 15%; padding:4rem 0 0 0; text-align:center; color:#000000; line-height:1.4em; }
#fiche-realisation h2 { text-transform:none; font-weight:100; font-size:1.3rem; margin:0 5%; padding:1rem 0 0 0; text-align:center; color:#000000; }
#fiche-realisation .intro { font-size:1rem; margin:0; padding:2rem 0 0 0; font-weight:100; color:#000000; text-align:left; }
#fiche-realisation .intro p { text-align:justify; position:relative; }
#fiche-realisation a.infosplus { font-size:0.8rem; z-index:10; text-align:center; text-transform:uppercase; position:relative; display:inline-block; vertical-align:top; padding:0.5rem 2rem; margin:0 0 0 0; height:auto; width:auto; color:#9e885a; border:1px solid #9e885a; bottom:0; }
#fiche-realisation a.infosplus:hover { text-decoration:none; background-color:#9e885a; color:#fff; }

#video-realisation { text-align:center; padding:4% 0 0 0; margin:0 auto; width:100%; max-width:1200px; }

#firstline-realisation { text-align:center; padding:4% 0 0 0; margin:0; }
#mosaique-realisation { text-align:center; min-height:20rem; padding:4% 0 0 0; margin:0; }
#mosaique-realisation .loadingbar { margin:0 auto; position:relative; display:block; width:40%; }

#fiche-realisation .ligne { position:relative; font-size:0; margin:0; padding:0 0 4% 0; }
#firstline-realisation .ligne { padding-bottom:0; }
#fiche-realisation .ligne img { position:relative;  display:inline-block; margin:0; padding:0; margin-left:4%; }
#fiche-realisation .ligne img.full { width:100%; }
#fiche-realisation .ligne img.half { width:48%; }
#fiche-realisation .ligne img.portrait { width:27%; }
#fiche-realisation .ligne img.landscape { width:69%; }
#fiche-realisation .ligne img.tiers { width:calc(92% / 3); }
#fiche-realisation .ligne img:first-of-type { margin-left:0; }

#fiche-realisation .credits { font-size:0.6rem; padding:0; position:absolute; color:#2e2e2e; bottom:0.8rem; right:0.5rem; }

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
#fliplist { position relative; margin:2rem 5% 6rem 5%; }
#fliplist li { text-transform:uppercase; font-weight:200; font-size:1.4rem; }
#fliplist li a:hover { text-decoration:none; color:#9e885a; }

iframe.flipbook { position:relative; border:0; width:100%; height:40rem; padding:0; margin:0; overflow:hidden; }

/*----------------------------------------------------------------------------------------------------------------------------------------------*/

#page-mentionslegales { font-family:Helvetica,Arial,sans-serif; padding:0 0 2rem 0; font-size:0.8rem; text-align:left; }
#page-mentionslegales h1 { padding-top:5rem; padding-bottom:2rem; font-size:1.2rem; text-transform:uppercase; }
#page-mentionslegales h2 { padding-bottom:0.5rem; font-size:1rem; text-transform:uppercase; }
#page-mentionslegales h2, #page-mentionslegales p, #page-mentionslegales ul { margin:0 auto 1em auto; width:60%; }
#page-mentionslegales p, #page-mentionslegales ul { font-size:0.8rem; }


/*----------------------------------------------------------------------------------------------------------------------------------------------*/
legend span.asterisque { display:inline-block !important; font-size:1em !important; }
#fieldset_titre span.asterisque { display:inline-block !important; font-size:1em !important; }
#div-auth input { height:1.4em; font-size:1rem; }

#page-authentification { margin:4rem auto 8rem auto; }

#page-authentification #div-auth { width:20%; margin:0 auto; padding:0; }
	
#ul-auth { clear:both; display:block; width:20%; margin:0 auto; padding:0; padding-top:2rem; }
#ul-auth li { clear:both; display:block; width:auto; padding-top:0.5rem; list-style-type:none; margin:0; padding:0; }
#ul-auth li a { padding-top:0.5rem; font-size:1.1rem; font-style:italic; opacity:0.9; }

div.connected { font-size:1.2rem; }

#page-changepassword { margin:4rem auto 8rem auto; }
#page-changepassword #div-changepwd { width:40%; margin:0 auto; padding:0; }
#page-changepassword .retour { width:40%; margin:0 auto; padding-bottom:2rem; font-size:1.2rem; }


.litebox-overlay .litebox-inline-html { transform:translateY(-50%); }
/* ------------------------------------------------------------------------------------------------------------- */
/* RESPONSIVE */

html { font-size:10px; font-size:1vw; }
.liquide { width:95.3%; transition: all 0.5s linear; }

#site { background-color:#ffffff; width:100%; max-width:2560px; margin:0 auto; position:relative; }





/* AFFICHAGE PANORAMIC */

/* Attention, le style panoramic n'est pas ajouté sur body mais sur html
html.panoramic { left:calc( ( 100% - 2.5 * 100vh ) / 2); width:calc(2.5 * 100vh); font-size:2vh; text-align:center; }
*/


/* AFFICHAGE FONT MAXI */
@media (min-width:2000px) { 

	html { font-size:20px; }

}

/* AFFICHAGE MAXI */
@media (min-width:2560px) { 

	.litebox-overlay .litebox-container { margin-left:auto; margin-right:auto; }
	.litebox-overlay .litebox-inline-html { width:960px; }

}
/* AFFICHAGE NORMAL */
@media (orientation:portrait) and (min-width:801px), (orientation:landscape) and (min-width:501px) {

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* Reinit font-size après un font-size:0; */
body
 { font-size:0.8rem; }
/*----------------------------------------------------------------------------------------------------------------------------------------------*/


ul#selection-mosaique li { width:29%; margin-left:1.5%; margin-right:1.5%; margin-top:3%; padding-top:29%; }
ul#selection-mosaique li:nth-child(3n+1) { }
ul#selection-mosaique li:nth-child(-n+3) { margin-top:0; }

form#realisations-recherche-avancee label:nth-of-type(4n+4) { margin-right:0; }
form#realisations-recherche-avancee label:last-of-type { width:calc(2 * 20.5% + 6%); width:20.5%; }

#infos-realisation > div.informations { width:60%; margin:2.5rem 5% 2.5rem 0; }
#infos-realisation > div.specificites { width:30%; margin:2.5rem 0 2.5rem 5%; }

#fiche-realisation .intro.twocols { column-count: 2; column-gap:3%; }




}
/* AFFICHAGE TABLETTE et PETIT ECRAN */
@media (orientation:portrait) and (min-width:801px) and (max-width:1600px), (orientation:landscape) and (min-width:501px) and (max-width:1200px), {

	html { font-size:10px; font-size:1vw; }

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* Reinit font-size après un font-size:0; */
body
 { font-size:1.1rem; }
/*----------------------------------------------------------------------------------------------------------------------------------------------*/



}
/* AFFICHAGE MOBILE */
@media (orientation:portrait) and (max-width:800px), (orientation:landscape) and (max-width:500px) {

	html { font-size:24px; font-size:3vw; }
	.liquide { width:92%; }

	a.ancre { top:-10rem; }

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* Reinit font-size après un font-size:0; */
body
 { font-size:1.2rem; }
/*----------------------------------------------------------------------------------------------------------------------------------------------*/

	div.nosmartphone br { display: none; content: ' '; clear:none; }


	header .liquide { width:100%; }

	#preload { border:1.33rem solid #fff;  }

	header #logo { z-index:500; padding:0; margin:1rem 0 1rem 1rem; width:15.2rem; height:4rem; top:0; }
	.scroll header #logo { margin:1rem 0 1rem 1rem; }

	#nav-button { z-index:500; font-size:3rem; max-height:3rem; cursor:pointer; display:block; color:#000000; position:absolute; right:1.5rem; top:1.5rem; transition: all 0.5s linear; }
	#nav-button:hover { color:#000000; }
	#nav-toggle:checked ~ ul#menu { max-height:60rem; transition: all 0.5s linear; }

	header { position:fixed; height:auto; min-height:5.5rem; background-color:#fff; font-size:0; overflow:visible; }
	body.preload header { top:-5.5rem; }
	header nav { background-color:#fff; font-size:0; }
	header nav ul#menu { z-index:400 !important; max-height:0; overflow:hidden !important; position:absolute !important; top:0 !important; width:100% !important; left:0 !important; margin:0 !important; transition: all 0.5s linear !important; padding-top:5.5rem !important; background-color:#2e2e2e; font-size:0; max-width:100%; }
header nav ul#menu:before { content:''; display:block; position:absolute; left:50%; transform:translate(-50%); top:0; width:105vw; height:5.5rem; background-color:#fff; }
	header nav ul > li { background-color:#2e2e2e; display:block !important; width:100% !important; padding:0 1em !important; margin:0 !important; text-align:center !important; border:0 !important; }
	header nav ul > li a { padding:0; border-left:0; color:#d4d4d4 !important; display:block !important; padding:0.5em !important; font-size:2.4rem !important; text-align:center !important; }
	header nav ul > li a:hover, header nav ul > li a.hover, header nav ul > li.current a { color:#d4d4d4 !important; text-decoration:none !important; }
	header nav ul > li:before { content:'' !important; margin:0 auto 0 auto !important; display:block !important; width:60% !important; height:2px !important; background-image:radial-gradient(#d4d4d4,rgba(255,255,255,0)) !important; }
	header nav ul > li:first-child:before { height:0 !important; background-image:none !important; }
	header nav ul > li:after { content:"" !important; display:none !important; }
ul#menu > li.realisations > ul { width:100%; }

	header nav ul#menu > li > ul { position:relative; top:0; width:100%; background-color:#2e2e2e; max-height:0; height:auto; display:block; border-bottom:0; margin:0; padding:0; left:0; right:0; transition: max-height 1s linear; }
	header nav ul#menu > li:hover > ul, ul#menu > li > a.hover ~ ul, ul#menu > li.current > a ~ ul { max-height:40rem; transition: max-height 1s linear; padding:0 0 0 0; border-bottom:0; }
	ul#menu  li > a:hover, ul#menu  li > a.hover, ul#menu  li.current > a { color:#9e885a !important; }
	header nav ul#menu > li > ul li { display:block; width:100%; padding:0 2%; margin:0.7rem 0; border-left:0; background-color:#2e2e2e; }
	header nav ul#menu > li > ul li a { font-size:1.6rem !important; }
	header nav ul#menu > li > ul li a:hover { color:#9e885a !important; }
	header nav ul#menu > li > ul > li:before { background-image:none !important; }
	header nav ul#menu > li > ul li:last-child { padding-bottom:2.5rem !important; }

.scrolldown { width:8%; height:40%; }

#contact > div { padding:1rem 1rem 0.5rem 1rem; text-align:center; }
#contact h2 { margin:1rem 6rem 3rem 2rem; font-size:1.8rem; line-height:1.3em; text-align:left; }
#contact h3 { position:relative; display:inline-block; font-size:2.4rem; width:100%; margin:0 auto; padding-top:2rem; }
#contact h3:before { position:absolute; top:0; left:50%; transform:translateX(-50%); content:'' !important; margin:0 auto 0 auto !important; display:block !important; width:60% !important; height:1px !important; background-image:radial-gradient(#d4d4d4,rgba(255,255,255,0)) !important; }
#contact #agences h3 { font-weight:400; }
#contact #agences li:nth-of-type(2) h3:before { background-image:none !important; }
#contact ul { padding:0; width:100%; font-size:0; }
#contact ul li { padding:0 0 1.5rem 0; width:100%; font-size:2rem; text-align:center; }
#contact ul li a { font-size:1.5rem; }
#contact ul li a i { font-size:1.8rem; }
#contact > div #coordonnees { margin-top:2rem; padding:0; width:100%; font-size:2rem; text-align:center; }
#contact > div #coordonnees h3 { margin-top:1rem; }
#contact h4 { margin-top:3.5rem; font-size:1.8rem; }
#contact > div #coordonnees .email { font-size:2rem; }
#contact > div #coordonnees .email a { font-size:1.4rem; position:relative; width:100%; display:inline-block; }
#contact > div #form-contact { margin-top:4rem; padding:0; width:100%; text-align:center; }
#contact > div #form-contact h3 { margin-bottom:3rem; }
#contact .simform .questions li > label span { text-align:left; font-size:1.4rem; }
#contact .simform ol:before { top:3.3em; }
#contact .simform i { font-size:1.8rem; }
#contact .simform .asterisque { padding-right:0.5rem; top:unset; font-size:1.2rem !important; color:rgba(252,159,166,1) !important;}
#contact .simform .controls { height:9em; }
#contact .simform button.next { width:1.2em; height:1.2em; }
#contact .simform button.next.last:after { content:''; }
#contact .simform button.next.last { background-color:#000!important; }
#contact .consentementrgpd  span { font-size:1.1rem; text-align:left; padding-left:3rem !important; }
#contact input[type="checkbox"] + span:before { padding-left:0.5rem; padding-top:0.5rem; transform: scale(1.8) !important; }
#contact input[type="checkbox"] + span:before, #contact input[type="checkbox"] + span:after { left: 0.6em !important; top: 0.5em !important; }
#contact .reponse.succes { font-size:1.4rem; line-height:1.4em; padding:3rem 0; }
#contact .simform .error-message { font-size:1rem; bottom: 2rem; right: 0; padding-right: 0.5rem;  text-align: right; }

#contact > div#googlemap {width:100%; height:50rem; min-height:50rem; }
	
	main { z-index:200; position:relative; margin-top:1.33rem; }

	#slider-container .slide span { font-size:1rem; right:1rem; }


	#accueil-realisations > div.bandeau-realisations { width:100%; height:auto; padding-top:1rem; }
	#accueil-realisations > div.bandeau-realisations a { display:block; position:relative; margin:0.2rem 0; padding:0; width:100% !important; height:10rem !important; left:0 !important; right:0 !important; overflow:hidden; }
	#accueil-realisations > div.bandeau-realisations a img { position:absolute; left:0; width:100%; }

	#accueil-realisations > div.bandeau-realisations a h3 { font-size:1.5rem; color:#1d1d1d; font-weight:200; }
#scrolldown_realisations.scrolldown { display:none !important; }
	
#accueil-agence { padding-top:5.5rem; }
#accueil-agence > div.bandeau-agence > div.visuels { padding:40% 0 40% 0; }
#accueil-agence > div.bandeau-agence > div.visuels > img:nth-child(1) { z-index:3; width:160%; max-width:160%; left:50%; transform:translateX(-50%); }
#accueil-agence > div.bandeau-agence > div.visuels > img:nth-child(2) { z-index:2; position:absolute; left:0; top:-20%; transform:none; width:100%; }
#accueil-agence > div.bandeau-agence > div.visuels > img:nth-child(3) { z-index:1; position:absolute; right:0; bottom:-10%; width:100%; }
#accueil-agence > div.bandeau-agence > div.visuels > div { z-index:4; left:1%; right:1%; text-align:center; }
#accueil-agence > div.bandeau-agence > div.citation > img { width:200%; max-width:200%; }
#accueil-agence > div.bandeau-agence > div.citation > div { width:90%; }
#accueil-agence div.citation { height:6rem; }
#accueil-agence div.citation > div.parallax { width:110% !important; }
#accueil-agence div.visuels > div div { font-size:1.2rem; margin-bottom:1.5rem; }
#accueil-agence div.visuels > div a { font-size:1rem; }
#scrolldown_agence.scrolldown { display:none !important; }

	section:first-of-type { padding-top:3rem; }

	#actu { padding-top:5.5rem; }
	#actu h2 { padding:0.8rem 0.5rem; text-align:center; font-size:2rem; }
	#actu .visuel { width:100%; }
	#actu .infos { width:100%; margin:0; }
	#actu .infos h3 { text-align:left; padding-right:0; padding-top:4rem; font-size:1.4rem; line-height:1.4em; }
	#actu .infos .intro { padding-right:0; font-size:1.3rem; }
	#actu .infos .date { right:0.5rem; top:0.7rem; font-size:1.5rem; }
	#actu .infos .date span { font-size:2rem; }
	#actu .infos a { font-size:1.3rem; }


	ul#menu-agence { height:3rem; }
	ul#menu-agence > li { display:none; position:relative; border-right:0; width:100%; }
	ul#menu-agence > li.current { display:block;  }
	ul#menu-agence > li a { position:relative; display:block; }
	ul#menu-agence > li a h1 { color:#c5c5c5; font-size:2rem; font-weight:200; position:relative; display:block; margin:0; padding:0; }

a.btn-savoirplus { font-size:1.2rem !important; }
.savoirplus p { font-size:1.4rem !important; line-height:1.4em !important; }


#page-philosophie #philosophie > div h2 { font-size:3.2rem; }
#page-philosophie #philosophie > img { margin:1rem 0 1rem 0; width:100%; }
#page-philosophie #philosophie > div { margin:1rem 0 1rem 0; padding:0; width:100%; }
#page-philosophie #philosophie > div p { font-size:1.4rem; line-height:1.4em; text-align:justify; }
#page-philosophie #philosophie > div ul { padding:0 0 0 2rem; }
#page-philosophie #philosophie > div li { font-size:1.4rem; line-height:1.4em; text-align:justify; }
#page-philosophie #exigences h2 { text-align:center; line-height:1.4em; }
#page-philosophie #exigences > ul { text-align:center; font-size:0; margin-left:0; padding-left:0; }
#page-philosophie #exigences > ul > li {  margin:2rem auto !important; width:95% !important; }
#page-philosophie #exigences div.picto { position:absolute; top:0; width:5.5rem !important; height:5.5rem !important; margin:0 !important; }
#page-philosophie #exigences div.content { width:100% !important;  }
#page-philosophie #exigences > ul > li:nth-child(odd) div.picto { left:0; }
#page-philosophie #exigences > ul > li:nth-child(even) div.picto { left:0; }
#page-philosophie #exigences > ul > li:nth-child(odd) div.content { padding-left:25%; }
#page-philosophie #exigences > ul > li:nth-child(even) div.content { padding-left:25%; }
#page-philosophie #exigences > ul > li:nth-child(odd) div.content h3 { font-size:1.4rem; text-align:left; }
#page-philosophie #exigences > ul > li:nth-child(even) div.content h3 { font-size:1.4rem; text-align:left; }
#page-philosophie #exigences div.content p, #page-philosophie #exigences div.content li { font-size:1.2rem; line-height:1.4em; text-align:justify; }
#page-philosophie #villa > h2 { text-align:center; line-height:1.8em; }
#page-philosophie #villa > h2 span { display:block; padding-left:0; line-height:1.2em; }
#page-philosophie #villa > h2 span:before { display:none; }
#page-philosophie #villa > div.mozaic { margin-bottom:1.3rem; }
#page-philosophie #villa > div.mozaic > div.mozaiclien { left:0; top:0; width:26%; padding-top:26%; }
#page-philosophie #villa > div.mozaic > div.mozaic1 { left:28%; top:0; width:12%; }
#page-philosophie #villa > div.mozaic > div.mozaiclien > div img { max-width:90%; margin:2.5rem 0 0.5rem 0; }
#page-philosophie #villa a { font-size:1.4rem; position:relative; left:50%; transform:translateX(-50%); margin:0; }
#page-philosophie #villa a.inside { display:none; }
#page-philosophie #villa a.outside { display:inline-block; }
#page-philosophie #shadoks > h2 { text-align:center; line-height:1.8em; }
#page-philosophie #shadoks > h2 span { display:block; padding-left:0; line-height:1.2em; }
#page-philosophie #shadoks > h2 span:before { display:none; }

#page-marguerite { padding:2rem 2rem 6rem 2rem; }
#page-marguerite a.retour { bottom:4rem; left:2rem; }
#page-marguerite a.retour span { font-size:1.2rem; }
#page-marguerite h2 { width:60%; }
#page-marguerite div.intro { width:100%; }
#page-marguerite div.intro p { font-size:1.4rem; line-height:1.4em; text-align:justify; }
#page-marguerite p { font-weight:200; font-size:1.4rem; line-height:1.4em; text-align:justify; }
#page-marguerite div.anciensplans { height:auto; padding-bottom:0; margin:3rem 0; }
#page-marguerite div.anciensplans > div:first-of-type { padding:18rem 0 8rem 0; }
#page-marguerite div.anciensplans > div.anciensplans1 { width:100%; }
#page-marguerite div.mozaic { margin-bottom:1.5rem; }
#page-marguerite div.mozaic > div a { font-size:1.2rem; }
#page-marguerite div.mozaic > div:first-of-type { padding:29rem 0 50% 0;  }
#page-marguerite div.mozaic > div.mozaic1 { top:0; bottom:unset; width:100%; }
#page-marguerite div.mozaic > div.mozaic2 { left:0; bottom:6.38rem; width:76.32%; }
#page-marguerite div.mozaic > div.mozaic3 { left:0; width:52.63%; }
#page-marguerite div.mozaic > div.mozaic4 { right:23.68%; width:21.05%; }
#page-marguerite div.mozaic > div.mozaic5 { right:0; width:21.05%; }
#page-marguerite div.nouveauxplans { margin-top:1.5rem; }
#page-marguerite div.nouveauxplans > div.nouveauxplans1 { width:57%; }
#page-marguerite div.nouveauxplans > div.nouveauxplans2 { width:40%; margin-left:3%; }
#page-marguerite div.nouveauxplans > div.esquisse { width:80%; margin-right:10%; margin-left:10%; margin-top:0; }

#bandeau-parcours img:first-of-type { width:100%; padding-bottom:13rem; }
#bandeau-parcours img:last-of-type { width:200%; max-width:200%; }
#bandeau-parcours > div { top:11rem; left:50%; transform:translateX(-50%); text-align:center; }
#bandeau-parcours > div h2 { font-size:2.2rem; text-align:center; width:auto; margin-left:auto; margin-right:auto; }
#bandeau-parcours > div div { font-size:1.2rem; text-align:center; width:auto; margin-bottom:1.2rem; margin-left:auto; margin-right:auto; }
#bandeau-parcours > div a { font-size:1rem; text-align:center; width:auto; margin-left:auto; margin-right:auto; }

#page-parcoursaxel { padding:2rem 2rem 6rem 2rem; }
#page-parcoursaxel:before { background: none; }
#page-parcoursaxel:after {background: none; }
#page-parcoursaxel > h2 { font-size:1.8rem; }
#page-parcoursaxel a.retour { bottom:2rem; left:2rem; }
#page-parcoursaxel a.retour span { font-size:1.2rem; }
#page-parcoursaxel > div:nth-of-type(1), #page-parcoursaxel > div:nth-of-type(2) { column-count: 1; column-gap:0; }
#page-parcoursaxel > div h1 { padding:2rem 0 3rem 0; }
#page-parcoursaxel > div p img { width:100%; margin-top:2rem; margin-bottom:2rem; }
#page-parcoursaxel > div p { font-size:1.4rem; line-height:1.4em; text-align:justify; }
#page-parcoursaxel a.fichepdf { font-size:1.2rem; left:0; margin:1rem 0 1rem 0; }
#page-parcoursaxel > div.mozaicreferences > div:hover > span > span, #page-parcoursaxel > div.mozaicreferences > div.hover > span > span { font-size:0.8rem; width:98%; font-weight:300; }


#trombinoscope-filtres h2 { font-size:2.2rem; font-weight:200; width:100%; border-right:0; text-align:center; padding:1rem 0 1rem 0; }
#trombinoscope-filtres ul { display:block; margin:0; padding:0; font-size:0; }
#trombinoscope-filtres ul > li { position:relative; display:inline-block; margin:1rem 0 0 0; padding:0; width:50%; text-align:center;  vertical-align:top; }
#trombinoscope-filtres ul > li a:first-child { padding:1rem 0; }
#trombinoscope-filtres ul > li a { position:relative; display:inline-block; font-size:1rem; margin:0; vertical-align:middle; text-align:center; border:1px solid #000; width:90%; padding:1rem 0;  }
ul#trombinoscope li { width:48.4%; padding-top:48.4%; margin-left:3.2%; margin-bottom:3.2%; }
ul#trombinoscope li:nth-child(2n+1) { margin-left:0; }
ul#trombinoscope li.lignevide { display:none; }
ul#trombinoscope li > div span span { font-size: 1.2rem; }
ul#trombinoscope li > div span span.fonction  { font-size: 1rem; font-weight:200; }

#page-equipe #recrutement > img { z-index:1; position:absolute; top:0; left:0; width:100%; }
#page-equipe #recrutement > div { z-index:2; margin-top:15rem; padding:1rem 2rem 1rem 2rem; width:100%; }
#page-equipe #recrutement > div h2 { padding-top:1rem; font-size:1.8rem; line-height:1.4em; }
#page-equipe #recrutement > div h3 { padding-top:1rem; font-size:1.6rem; }
#page-equipe #recrutement > div p { font-size:1.4rem; line-height:1.4em; text-align:justify; }
#page-equipe #recrutement > div > span { width:100%; }
#page-equipe #recrutement > div > span:first-of-type { margin-right:0; }
#page-equipe #recrutement > div a { font-size:1.2rem; padding:0.8rem 0; }
#page-equipe #recrutement > div a:first-child { margin-bottom:1rem; }

#page-equipe #offres { padding:0 2rem 1rem 2rem; }
#page-equipe #offres h2 { font-size:1.6rem; }
#page-equipe #offres li { font-size:1.2rem; line-height:1.4em; padding-bottom:1em; }


#page-equipe #actu { padding:6rem 0 0 0; }
#page-equipe #actu h2 { position:absolute; padding:0; left:0; right:0; top:2rem; height:auto; font-size:2.2rem; font-weight:200; color:#2a2a2a; text-align:center; }
#page-equipe #actu .infos { width:90%; margin:0 5%; padding-bottom:2rem; }


#page-partenaires #partenaires > img { position:absolute; top:0; left:0; margin:0; padding:0; width:100%; }
#page-partenaires #partenaires > div { padding:12rem 0 3rem 0; width:100%; }
#page-partenaires #partenaires > div h2 { padding-top:2rem; font-size:2rem; line-height:1.4em; }
#page-partenaires #partenaires > div p { font-size:1.4rem; line-height:1.4em; text-align:justify; }
#page-partenaires #partenaires > ul > li > div { min-height:0; }
#page-partenaires #partenaires > ul > li > div.logo { width:100%; border-right:0; min-height:16rem; }
#page-partenaires #partenaires > ul > li > div.logo img, #page-partenaires #partenaires > ul > li > div.logo svg, #page-partenaires #partenaires > ul > li > div.logo object { max-width:90%; max-height:13rem; }
#page-partenaires #partenaires > ul > li > div.nom { padding:0.5rem 0 0.5rem 0; width:100%;  }
#page-partenaires #partenaires > ul > li > div.nom h3 { font-size:1.8rem; line-height:1.4em;  }
#page-partenaires #partenaires > ul > li > div.nom div { font-size:1.4rem; line-height:1.4em;  }
#page-partenaires #partenaires > ul > li > div.nom a { font-size:1.4rem; line-height:1.4em; }
#page-partenaires #partenaires > ul > li > div.descriptif { padding:1.5rem 0 4rem 0; width:100%; }
#page-partenaires #partenaires > ul > li > div.descriptif p { font-size:1.4rem; line-height:1.4em; text-align:justify; }



#realisations-selection { padding:0 0 0 0; width:100%; }
.selection-pagination { height:auto; }
.selection-pagination .count { font-size:1.4rem; padding-top:2rem; width:100%; }
.selection-pagination .pages span { padding:1rem 1rem 1rem 1rem; font-size:1rem; }
.selection-pagination .pages a { padding:1rem 1rem 1rem 1rem; font-size:1rem; }

#realisations-criteres { position:relative; width:100%; left:0; top:0; bottom:auto; padding:0; }
#realisations-criteres > div:first-of-type { margin-top:2rem; }
#realisations-criteres a { font-weight:300; font-size:1.5rem; }
#realisations-criteres > div.habitat a { font-size:1.2rem; }
#realisations-criteres > div.habitat a:first-of-type { font-size:1.5rem; }
#realisations-criteres > div { }
#realisations-criteres span.soustitre { font-size:1.5rem; font-weight:200; }
#realisations-criteres span.soustitre:after { font-size:1.8rem; }
#realisations-criteres span.soustitre.btn-close:after { font-size:2.2rem; }
#realisations-criteres.avancee > div:last-of-type { margin-bottom:2rem; height:auto; max-height:unset; }
#realisations-criteres > div.count { width:87%; }
form#realisations-recherche-avancee label { width:100%; margin-right:0; }
form#realisations-recherche-avancee span.mylabel { font-size:1.1rem; }
form#realisations-recherche-avancee div.cs-select { font-size:1rem; }
.cs-select ul span { font-size:1.2rem; }

#realisations-carte .infowdw > div > span { min-width:10rem; max-width:10rem; }

ul#selection-mosaique { padding-top:2rem; text-align:left; }
ul#selection-mosaique li { width:47%; padding-top:47%; }
ul#selection-mosaique li:nth-child(2n+1) { }
ul#selection-mosaique li:nth-child(-n+2) { margin-top:0; }

#sousmenu-realisation { width:calc(92% + 2px); }
#sousmenu-realisation a.retour { padding:0.5rem 0.5rem 0 0.5rem; height:auto; top:50%; transform:translateY(-50%); border-right:0; }
#sousmenu-realisation a.retour span { }
#sousmenu-realisation a.infos { padding: 1.4rem 0; }
#sousmenu-realisation a.infos span { display:none; }
#sousmenu-realisation div#navselection { display:none; }
#sousmenu-realisation div#navprojet { padding-top:0.3rem; }
#fiche-realisation { width:100%; }
#fiche-realisation h1 { margin:0; }
#fiche-realisation .intro { font-size:1.1rem; margin:0; }
#infos-realisation { width:100%; }
#infos-realisation div#intro p { font-size:1.4rem; line-height:1.4em; font-weight:200; }
.litebox-overlay .litebox-nav { display:none !important; }

#mosaique-realisation { padding-top:10%; padding-bottom:2rem; }
#fiche-realisation .credits { font-size:0.8rem; }

#page-actu h1 { margin:1rem 0 0 0; padding:0.8rem 1% 0.8rem 1%; text-align:center; font-size:2rem; font-weight:200; }
#actu-filtres { margin:0; padding:0 0 2rem 0; position:relative; left:50%; transform:translateX(-50%); display:inline-block; width:auto; }
#actu-filtres > li a { font-size:1rem; padding:0 1rem 1rem 0; }
#actu-filtres > li:first-child { width:100%; }
#actu-filtres > li:first-child a { padding:2rem 1rem 1rem 0; }

.actu-pagination { height:auto; }
.actu-pagination .pages span { padding:1rem 1rem 1rem 1rem; font-size:1rem; }
.actu-pagination .pages a { padding:1rem 1rem 1rem 1rem; font-size:1rem; }

#actu-liste li .images { width:100%; min-height:9rem; }
#actu-liste li .infos { width:100%; padding:0 0 4rem 0; margin:0; }
#actu-liste li h2 { text-align:left; padding-left:1.5rem; padding-right:1.5rem; padding-top:4rem; padding-bottom:1rem; font-size:1.4rem;  }
#actu-liste li .date { right:1.5rem; top:0; font-size:1.5rem; }
#actu-liste li .date span { font-size:2rem; }
#actu-liste li.detail .infos { padding-left:0; padding-right:0; }
#actu-liste li.detail .fermer { padding-left:0; }
#actu-liste li div { font-size:1rem; padding-right:0; }
#actu-liste li .infos a.link { font-size:1.3rem; }
#actu-liste li .infos > a { font-size:1.3rem; bottom:1rem; left:1.5rem; }
#actu-liste li .infos .intro { padding-left:1.5rem; padding-right:1.5rem; font-size:1.3rem; }
#actu-liste li .infos .texte { padding-left:1.5rem; padding-right:1.5rem; font-size:1.3rem; }

#actu-liste > li.detail .modifier { bottom:1rem; left:unset; right:1rem; }
#actu-liste > li.detail .supprimer { bottom:1rem; left:unset; right:7rem; }

	footer { z-index:150; position:relative; text-align:center; }
	footer .liquide { padding:2.35rem 0 7rem; text-align:center; }
	footer.realisations .liquide { margin-left:auto; width:92%; }
	#sociaux { position:relative; margin:0 auto; left:0; top:0; display:block; }
	#sociaux > li a { position:relative; width:3rem; height:3rem; }
	#sociaux > li a span { font-size:1.5rem; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
	footer h2 { font-size:1.8rem; position:relative; margin:0 auto 2rem auto; text-align:center; left:0; top:0; padding:2rem 4rem; }
	ul#menusecondaire { display:block; position:relative; margin:0 auto; padding:0; text-align:center; left:0; top:0; }
	ul#menusecondaire > li { font-size:1.4rem; }
#copyright { font-size:1rem; }

	#page-mentionslegales h2, #page-mentionslegales p, #page-mentionslegales ul { width:100%; }

	h1 { text-align:center; font-size:3rem; }
	h2 { text-align:center; font-size:3rem; }
	h3 { text-align:center; }
	
	#form-contact label { width:100%; padding:0; }
	
	#div-auth { width:100%; }


	/* Pour éviter un zoom sur l'iphone qd on clique sur un champ de saisie */
	@media screen and (-webkit-min-device-pixel-ratio:0) { 
		textarea,input,select { font-size: 16px !important; padding:0 5px !important; line-height:20px !important; }
		input,select { height:28px !important; }
	}



}
/* AFFICHAGE MINI */
@media (max-width:300px) { 
	html { font-size:9px; }
	#en2mots { width:300px; }
	header { width:300px; }
}