/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* RESET */

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html { position:relative; display:block; }

body { position:relative; display:block; width:100%; margin:0; padding:0; font-family:Ubuntu, sans-serif; font-size:0.8rem; font-weight:300; line-height:1.4; background-color:rgba(255,255,255,1); color:#4a4a4a; text-align:left; overflow-x:clip; overflow-y:scroll; }
body.noscrollbar { overflow-y:hidden; }
#en2mots { display:block; width:100vw;  overflow-y:visible; overflow-x:clip; }

header, main, section, article, aside, footer { position:relative; display:block; width:100%; margin:0; padding:0; overflow-y:visible; overflow-x:clip; }

h1, h2, h3, h4, h5, h6 { position:relative; margin:0; padding:0; font-family:Ubuntu, sans-serif; font-size:1.5em; font-weight:300; color:inherit; }
main h1, main h2, main h3, main h4, main h5, main h6 { color:#4a4a4a; }

div { position:relative; margin:0; padding:0; }

a, a:link, a:active, a:visited, a:focus { font-size:inherit; color:inherit; text-decoration:inherit; outline-color:transparent; }
body.desktop a:hover { color:inherit; text-decoration:underline; outline-color:transparent; }
body.desktop .fromrte a { text-decoration:none; color:inherit; }
body.desktop .fromrte a:hover { text-decoration:underline; color:inherit; }

img { margin:0; padding:0; border:0; }
main img { max-width:100vw; }
svg { position:relative; display:inline-block; vertical-align:top; height:100%; width:100%; margin:0; padding:0; }

p { font-size:inherit; word-wrap:break-word; text-align:left; margin:0; padding:1em 0 0 0; }
p:first-of-type, h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p { padding-top:0; }
span { position:relative; display:inline; font-size:inherit; margin:0; padding:0; }

b, strong, i, span { word-wrap:break-word; }

ul { position:relative; margin:0; padding:0; }
li { position:relative; font-size:inherit; word-wrap:break-word; text-align:left; margin:0; padding:0; }
.fromrte ul { margin-left:1em; }

.wrap { display:block; position:absolute; overflow:hidden; left:0; top:0; width:100%; height:100%; }
.cover { position:absolute; top:50%; left:50%; width:auto; height:auto; transform:translate(-50%, -50%); display:block; margin:0; padding:0; background-color:transparent; }
.cover.top { top:0; transform:translate(-50%,0); }
.cover.bottom { top:100%; transform:translate(-50%,-100%); }
.cover.left { left:0; transform:translate(0,-50%); }
.cover.topleft { left:0; top:0; transform:translate(0,0); }
.cover.bottomleft { left:0; top:100%; transform:translate(0,-100%); }
.cover.right { left:100%; transform:translate(-100%,-50%); }
.cover.topright { left:100%; top:0; transform:translate(-100%,0); }
.cover.bottomright { left:100%; top:100%; transform:translate(-100%,-100%); }
.cover > img, .cover > video, .cover > div, .cover > span { position:absolute; display:inline-block; width:100%; height:100%; left:0; top:0; }

.clear { clear:both; }
.blochref { cursor:pointer; }

pre, code { position:relative; font-size:13px; text-align:left; color:#c7254e; background-color: #f9f2f4; border-radius:0.5em; padding:0.8em; display:block; margin:0 0 1em 0; border:0; }

.ajaxloader { z-index:999999; position:fixed; left:0; top:0; width:100vw; height:100vh; background-color:rgba(0,0,0,0.4); }
.ajaxloader svg { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:8%; height:auto; color:rgba(0,0,0,1); }

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

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

input, textarea, select { position:relative; display:inline-block; vertical-align:top; width:100%; font-size:inherit; display:inline-block; background-color:rgba(221,221,221,1); border-color:rgba(22,22,22,1); color:rgba(22,22,22,1); line-height:2; height:2em; vertical-align:middle; margin:0; padding:0.1em 0.3em 0 0.3em; 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; resize:none; }
select { background-image:url(https://www.centurion-search.fr/_chartes_/centurion/ressources/images/contribution/dropdown.svg) !important; background-size:1.5em; background-position: right center !important; background-repeat: no-repeat !important; padding-right:30px !important; }
select::-ms-expand { display: none; }
select option { color:rgba(22,22,22,1); }
select.placeholder { color:rgba(54,54,54,0.55) !important; }

::placeholder { font-style:normal; color: rgba(54,54,54,0.55); opacity: 1; }
:-ms-input-placeholder { font-style:normal; color: rgba(54,54,54,0.55); }
::-ms-input-placeholder { font-style:normal; color: rgba(54,54,54,0.55); }

:-webkit-autofill,
:-webkit-autofill:hover, 
:-webkit-autofill:focus, 
:-webkit-autofill:active  { font-size:1em !important; -webkit-background-clip:text; }


/* 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 !important; top:0 !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 rgba(22,22,22,1) !important; background-color:transparent !important; } /* Aspect général de la case */
input[type="radio"] + span:after, input[type="checkbox"] + span:after { border:1px solid transparent !important; background-color:rgba(221,221,221,1) !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"]: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.5) !important; } /* Aspect si "cochée" */

label { position:relative; display:inline-block; vertical-align:top; font-weight:300; }

button, a.button { position:relative; display:inline-block; vertical-align:top; font-family:Ubuntu, sans-serif; font-size:inherit; font-weight:300; text-align:center; background-color:rgba(22,22,22,1); border:1px solid rgba(22,22,22,1); color:rgba(255,255,255,1); margin:0; padding:0.5em 1em; width:auto; outline:0; }
body.desktop button:hover, body.desktop a.button:hover { color:rgba(22,22,22,1); background-color:rgba(255,255,255,1); border-color:rgba(22,22,22,1); text-decoration:none; outline:0; }


/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* ANIMATION SCROLL */

.scrollanim.init { opacity:0; transition:opacity 300ms ease 0ms, transform 300ms ease 0ms; }
.scrollanim { opacity:1; transition:opacity 500ms ease 0ms, transform 300ms ease 0ms; }

.scrollanim.frombottom.init { opacity:0; transform:translateY(50%); }
.scrollanim.frombottom { opacity:1; transform:translateY(0); }
.scrollanim.fromtop.init { opacity:0; transform:translateY(-50%); }
.scrollanim.fromtop { opacity:1; transform:translateY(0); }
.scrollanim.fromleft.init { opacity:0; transform:translateX(-50%); }
.scrollanim.fromleft { opacity:1; transform:translateX(0); }
.scrollanim.fromright.init { opacity:0; transform:translateX(50%);  }
.scrollanim.fromright { opacity:1; transform:translateX(0); }

.scrollanim.typescript span.word { opacity:0; }


/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* BURGER */

button#showhidemenu { z-index:1200; position:absolute; display:inline-block; top:2em; right:0; width:3em; height:3em; margin:0; padding:0; background-color:transparent; border:0; }
button#showhidemenu > svg { position:absolute; left:0; top:0; width:100%; height:100%; transition:color 300ms linear 0ms; }

button#showhidemenu > svg line { transition:transform 300ms linear 0ms; stroke-width:3; stroke-linecap:round; transform-origin: 40% 50%; }
button#showhidemenu > svg line:nth-of-type(1) { transform: translate(0,0) scaleX(1) rotate(0deg); }
button#showhidemenu > svg line:nth-of-type(2) { transform: translate(-18.75%,0) scaleX(0.625); }
button#showhidemenu > svg line:nth-of-type(3) { transform: translate(12.5%,0) scaleX(1.25) rotate(0deg); }
body.desktop button#showhidemenu:hover > svg line:nth-of-type(1) { transform: translate(0,0) scaleX(1) rotate(0deg); }
body.desktop button#showhidemenu:hover > svg line:nth-of-type(2) { transform: translate(0,0) scaleX(1); }
body.desktop button#showhidemenu:hover > svg line:nth-of-type(3) { transform: translate(0,0) scaleX(1) rotate(0deg); }
body.showmenu button#showhidemenu > svg line:nth-of-type(1), body.desktop.showmenu button#showhidemenu:hover > svg line:nth-of-type(1) { transform: translate(0,14%) scaleX(1) rotate(45deg); }
body.showmenu button#showhidemenu > svg line:nth-of-type(2), body.desktop.showmenu button#showhidemenu:hover > svg line:nth-of-type(2) { transform: translate(-40%,0) scaleX(0); }
body.showmenu button#showhidemenu > svg line:nth-of-type(3), body.desktop.showmenu button#showhidemenu:hover > svg line:nth-of-type(3) { transform: translate(0,-14%) scaleX(1) rotate(-45deg); }

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* Reinit font-size après un font-size:0; */
body,
header nav ul > li,
main,
.home-raisons ul > li, .home-metiers ul > li, .home-offres ul > li,
ul.blocliste > li,
ul.blocchiffres > li,
#page-secteurs ul > li,
.exemples ul > li,
#listemag-liste > ul > li,
.contactform label, .contactform fieldset > div
 { font-size:1rem; }
/*----------------------------------------------------------------------------------------------------------------------------------------------*/

#en2mots { opacity:0; }

.liquide { margin:0 auto; padding:0; }

body.noscrollbar { height:0; overflow-y:hidden; }
body.windows.noscrollbar, body.windows.noscrollbar header, body.windows.noscrollbar header nav > div { max-width:calc(100% - 17px); }


button.mainbtn { cursor:pointer; overflow:hidden; min-width:12em; text-align:left; border:0; border-radius:0.5em; overflow:hidden; background-color:transparent; color:#4a4a4a; margin:0 0 0 1em; padding:0.8em 3em 0.8em 1em; }
button.mainbtn:first-of-type { margin-left:0; }
body.desktop button.mainbtn:hover, button.mainbtn.hover { background-color:transparent; color:rgba(255,255,255,1); }
button.mainbtn:before { z-index:1; content:''; position:absolute; left:0; top:0; right:0; bottom:0; border-bottom:1px solid #4b7991; background-color:transparent; overflow:hidden; transition:all 1200ms cubic-bezier(.19,1,.22,1) 0ms; }
button.mainbtn.cadre:before { border:1px solid #4a4a4a; border-radius:0.5em; }
button.mainbtn:after { z-index:2; content:''; position:absolute; right:0; top:50%; transform:translate(1em, -50%); background-color:#4b7991; border-radius:50%; width:0; height:0; transition:all 1200ms cubic-bezier(.19,1,.22,1) 0ms; }
body.desktop button.mainbtn:hover:after, button.mainbtn.hover:after { width:25em; height:25em; }
button.mainbtn > span { z-index:3; }
button.mainbtn > svg { color:inherit; z-index:4; position:absolute; height:0.6em; width:auto; right:0.5em; top:50%; transform:translate(-50%, -50%); }

button.mainbtn.back { min-width:8em; margin:0 1em 2em 0; padding:0.8em 1em 0.8em 3em; }
button.mainbtn.back > svg { left:0.5em; right:initial; transform:scaleX(-1) translate(-50%, -50%); }

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

header { z-index:1000; position:fixed; left:0; top:0; width:100%; height:auto; background-color:transparent; color:#4a4a4a; overflow:hidden; padding-bottom:0.6em; }
body.showmenu header { height:100%; transition:color 300ms ease; }

#logo { z-index:2; font-size:1em; position:relative; display:inline-block; vertical-align:top; margin:1em 0 0.5em 0; padding:0; }
#logo svg { height:2.5em; width:auto; }

#logo path { transition: fill 300ms ease; }
body:not(.scroll):not(.showmenu) #logo path { fill:rgba(255,255,255,1); }
body:not(.scroll) header { background-color:transparent; color:rgba(255,255,255,1); }
header .bg { background-color:transparent; position:absolute; left:0; top:0; width:100%; height:8.65em; transition: background-color 300ms ease;  }
body.scroll:not(.showmenu) header .bg { content:''; background-color:rgba(255,255,255,1); box-shadow:0 0.6em 1em -0.8em rgba(0,0,0,.19); }
body.showmenu header:before { content:''; position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(255,255,255,1); height:100%; }

body:not(.scroll):not(.showmenu) header button.mainbtn { color:rgba(255,255,255,1); }
body.desktop:not(.scroll):not(.showmenu) header button.mainbtn:hover, body:not(.scroll):not(.showmenu) header button.mainbtn.hover { color:#4a4a4a; }
body:not(.scroll):not(.showmenu) header button.mainbtn:before { border-color:rgba(255,255,255,1); }
body:not(.scroll):not(.showmenu) header button.mainbtn:after { background-color:rgba(255,255,255,1); }

button#showhidemenu { z-index:1200; position:absolute; display:inline-block; top:1.2em; right:1em; width:3em; height:3em; margin:0; padding:0; background-color:transparent; border:0; }
button#showhidemenu > svg { color:rgba(255,255,255,1); position:absolute; left:0; top:0; width:100%; height:100%; transition:color 300ms linear 0ms; }
body.scroll button#showhidemenu > svg { color:#4a4a4a; }
body.showmenu button#showhidemenu > svg { color:#4a4a4a; }

button#showhidemenu { display:none; }

button#showhidemenu > svg line { transition:transform 300ms linear 0ms; stroke-width:3; stroke-linecap:round; transform-origin: 40% 50%; }
button#showhidemenu > svg line:nth-of-type(1) { transform: translate(0,0) scaleX(1) rotate(0deg); }
button#showhidemenu > svg line:nth-of-type(2) { transform: translate(-18.75%,0) scaleX(0.625); }
button#showhidemenu > svg line:nth-of-type(3) { transform: translate(12.5%,0) scaleX(1.25) rotate(0deg); }
body.desktop button#showhidemenu:hover > svg line:nth-of-type(1) { transform: translate(0,0) scaleX(1) rotate(0deg); }
body.desktop button#showhidemenu:hover > svg line:nth-of-type(2) { transform: translate(0,0) scaleX(1); }
body.desktop button#showhidemenu:hover > svg line:nth-of-type(3) { transform: translate(0,0) scaleX(1) rotate(0deg); }
body.showmenu button#showhidemenu > svg line:nth-of-type(1), body.desktop.showmenu button#showhidemenu:hover > svg line:nth-of-type(1) { transform: translate(0,14%) scaleX(1) rotate(45deg); }
body.showmenu button#showhidemenu > svg line:nth-of-type(2), body.desktop.showmenu button#showhidemenu:hover > svg line:nth-of-type(2) { transform: translate(-40%,0) scaleX(0); }
body.showmenu button#showhidemenu > svg line:nth-of-type(3), body.desktop.showmenu button#showhidemenu:hover > svg line:nth-of-type(3) { transform: translate(0,-14%) scaleX(1) rotate(-45deg); }

header nav { z-index:1100; position:relative; display:inline-block; width:100%; height:100%; margin:0; padding:0; }
header nav ul { font-size:0; z-index:1110; position:relative; width:100%; display:block; padding:0; background-color:transparent; text-align:right; }
header nav ul > li { position:relative; display:inline-block; vertical-align:top; width:auto; list-style:none;  }
header nav ul > li > button { font-size:1.1em; text-align:left; display:block; width:calc(100% - 0.5em); cursor:pointer; padding:1em 1em; background-color:transparent; color:rgba(255,255,255,1); border:0; }
body.scroll header nav ul > li > button { color:#4a4a4a; }
body.desktop header nav ul > li:hover > button, header nav ul > li.hover > button { background-color:transparent; color:#4a4a4a; }
header nav ul > li > button > svg { position:absolute; height:0.6em; width:auto; right:0.5em; top:50%; transform:translate(-50%, -50%); transition:transform 300ms ease 0ms; }
body.desktop header nav ul > li:hover > button > svg, header nav ul > li.hover > button > svg { transform-origin:center center; transform: translate(-50%, -50%) rotate(90deg); }

header nav ul#menu > li:before { content:''; position:absolute; border-top:1px solid rgba(255,255,255,1); background-color:rgba(255,255,255,1); left:0; top:0; width:calc(100% - 0.5em); height:100%; max-height:0; transition:max-height 300ms ease; }
body.scroll header nav ul#menu > li:before { border-color:#4a4a4a; }
header nav ul#menu > li:last-of-type:before { width:100%; }
body.desktop header nav ul#menu > li:hover:before, header nav ul#menu > li.hover:before { max-height:100%; }

header nav ul > li { width:calc(100% / 5); }

header nav > ul#menu > li > ul { display:block; height:0; transition:height 100ms ease 0ms, opacity 100ms ease 0ms; overflow:hidden; opacity:0; }
body.desktop header nav > ul#menu > li:hover > ul, header nav > ul#menu > li.hover > ul { height:fit-content; transition:height 300ms ease 100ms, opacity 100ms ease 100ms; opacity:1; }
header nav > ul#menu > li > ul > li { display:block; width:100%;  }
header nav > ul#menu > li > ul > li > button { font-size:0.9em; color:rgba(74,74,74,0.8); padding:0.5em 1em; }
header nav > ul#menu > li > ul > li:last-of-type { margin-bottom:1em; }



header nav > ul#menu > li > ul > li > ul { display:block; height:fit-content; }
header nav > ul#menu > li > ul > li > ul > li { display:block; width:100%; padding-left:1.2em;  }
header nav > ul#menu > li > ul > li > ul > li > button { font-size:0.8em; color:rgba(74,74,74,0.8); padding:0.5em 1em; }
header nav > ul#menu > li > ul > li > ul > li:last-of-type { margin-bottom:0.5em; }


header nav > ul#menu li.current > button { }
body.desktop header nav > ul#menu li:hover > button, header nav > ul#menu li.hover > button { color:#4a4a4a; }

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* MAIN */
main { z-index:1; margin:0; padding:0; display:block; position:relative; width:100%; overflow-x:hidden; overflow-y:hidden; transition:margin 300ms linear 0ms; }
.scroll main { }

article { z-index:1; overflow:visible; }

article.defaut { text-align:center; padding-bottom:3rem; }
article.defaut img { max-width:100%; }

main h2, main h3, main h4, main h5, main h6 { color:#4a4a4a; }

.fromrte strong, .fromrte b { font-weight:600; }


/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* ACCUEIL */

.bloc-titre { width:100%; height:70vh; background-color:rgba(0,0,0,1); background-size:cover; background-position:center center; }
.bloc-titre:before { content:''; position:absolute; left:0; top:0; right:0; bottom:0; background-color:rgba(0,0,0,0.3); }
.bloc-titre .liquide { height:100%; }
main h1 { position:absolute; display:inline-block; left:0; bottom:3.5em; font-size:4em; font-weight:300; color:rgba(255,255,255,1); text-shadow:0.05em 0.05em 0.2em rgba(0,0,0,1); }

main h1 > span { display:block; font-size:0.7em; }

.accueil main h1 { bottom:2em; }
.accueil main h1 > span { font-weight:500; font-size:1em; }
.accueil main h1 > span:last-of-type { font-size:0.5em; font-style:italic; }

.home-synergie { margin:4em 0; overflow:hidden; }
.home-synergie img { width:100%; height:auto; }
.home-synergie div.content { margin-left:40%; padding-left:5%; border-left:1px solid rgba(220,220,220,1); padding-top:4em; padding-bottom:4em; }
.home-synergie h2 { font-size:2.5em;  margin-bottom:1.5em; display:inline-block; width:auto; background: linear-gradient(45deg,#d8d8d8,#5ca4a8 50%,#4b7991); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.home-synergie button { margin-top:2em; }

.home-raisons > .liquide { text-align:center; }
.home-raisons { position:relative; display:block; margin:4em 0; overflow:hidden; text-align:center; }
.home-raisons h2 { font-size:2.5em; text-align:center; margin-bottom:1.5em; display:inline-block; width:auto; background: linear-gradient(45deg,#d8d8d8,#5ca4a8 50%,#4b7991); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.home-raisons ul { display:flex; }
.home-raisons ul > li { position:relative; display:inline-block; vertical-align:top; text-align:center; }
.home-raisons ul > li > span { display:inline-block; width:8em; height:8em; border-radius:50%; background-color:rgba(240,240,240,1); color:#007AAA; }
.home-raisons ul > li > span svg { color:#007AAA; position:absolute; top:50%; left:50%; width:65%; height:65%; transform:translate(-50%, -50%); }
.home-raisons h3 { margin:2em 0 1em 0; font-size:1.2em; font-weight:500; }
.home-raisons p { text-align:center; font-size:0.9em; }
.home-raisons button { width:calc(100% - 2em); position:absolute; bottom:0; left:50%; transform:translateX(-50%); }

.home-raisons ul > li { width:20%;  padding:0 1em 6em 1em; }

.home-metiers { position:relative; display:block; margin:4em 0 0 0; overflow:hidden; padding:5em 0; color:rgba(255,255,255,1); background-size:cover; }
.home-metiers:before { content:''; position:absolute; left:0; top:0; right:0; bottom:0; background-color:rgba(0,0,0,0.5); }
.home-metiers .content { display:inline-block; vertical-align:top; width:calc(45% - 5px); padding-right:5%; }
.home-metiers h2 { font-size:2.5em; margin-bottom:1.5em; color:rgba(255,255,255,1); }
.home-metiers p { text-align:left; }
.home-metiers .content button { color:rgba(255,255,255,1); margin-top:2em; }
.home-metiers .content button.mainbtn:before { border-color:rgba(255,255,255,1); }

.home-metiers ul { font-size:0; display:inline-block; vertical-align:top; width:55%; }
.home-metiers ul > li { list-style-type:none; display:inline-block; vertical-align:top; text-align:left; width:50%; margin-bottom:1em; }
.home-metiers ul > li button { height:5em; font-size:1.4em; background-color:rgba(255,255,255,1); color:#4a4a4a; width:90%; padding-top:0; padding-bottom:0; }
.home-metiers ul > li button.mainbtn > svg { top:100%; transform:translate(-50%, calc(-100% - 1em)); }
.home-metiers ul > li button.mainbtn.cadre:before { border-color:rgba(255,255,255,1); }
.home-metiers ul > li button.mainbtn:after { top:100%; }
body.desktop .home-metiers ul > li button:hover, .home-metiers ul > li button.hover { background-color:rgba(255,255,255,1); }
.home-metiers ul > li button.mainbtn > span { position:absolute; left:0; margin:1em 3em 1em 1em; }
.home-metiers ul > li button.mainbtn > span:nth-of-type(1) { opacity:1; bottom:0; }
.home-metiers ul > li button.mainbtn > span:nth-of-type(2) { height:calc(4 * 1.2em); line-height:1.2; max-width:100%; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-size:0.7em; margin:1em 4.2em 1em 1.4em; opacity:0; top:0; }
body.desktop .home-metiers ul > li button:hover > span:nth-of-type(1), .home-metiers ul > li button.hover > span:nth-of-type(1) { opacity:0; }
body.desktop .home-metiers ul > li button:hover > span:nth-of-type(2), .home-metiers ul > li button.hover > span:nth-of-type(2) { opacity:1; }

.home-references { padding:4em 0; background-color:#eee; }
.home-references > img { z-index:1; position:absolute; opacity:1; width:20%; height:auto; }
.home-references > img:nth-of-type(1) { top:0; right:0; }
.home-references > img:nth-of-type(2) { bottom:0; left:0; }
.home-references .liquide { z-index:2; margin:0 auto; text-align:center; padding-bottom:2em; }
.home-references h2 { max-width:80%; width:auto; font-size:2.5em; text-align:center; margin-bottom:0.5em; display:inline-block; width:auto; background: linear-gradient(45deg,#d8d8d8,#5ca4a8 50%,#4b7991); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.home-references p { font-size:1.1em; text-align:center; margin-bottom:1.5em; }
.home-references .genially { width:60%; margin:0 auto; }

.home-offres { margin:4em 0; overflow:hidden; text-align:center; }
.home-offres > .liquide { text-align:center; }
.home-offres h2 { font-size:2.5em; text-align:center; margin:0 auto 1.5em auto; display:inline-block; width:auto; background: linear-gradient(45deg,#d8d8d8,#5ca4a8 50%,#4b7991); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.home-offres p { text-align:center; }

.home-offres .filtre label { width:30%; margin:0 1em; }

.home-offres ul { font-size:0; text-align:left; }
.home-offres ul > li { display:inline-block; vertical-align:top; text-align:center; }

.home-offres ul > li { width:50%; padding:0 1em; margin-top:2em; }
.home-offres ul > li > button { overflow:hidden; display:block; width:100%; border:1px solid #4a4a4a; background-color:transparent; color:#4a4a4a; border-radius:0.5em; padding:2em 4em 2em 2em; text-align:left; }
.home-offres ul > li > button > span { display:inline-block; vertical-align:middle; }
.home-offres ul > li > button > div { display:block; vertical-align:middle; }
.home-offres ul > li span.soussecteur { z-index:3; font-size:0.9em; padding:0.4em 1em; margin:0 2em 0.5em 0; text-transform:uppercase; color:rgba(255,255,255,1); background-color:#62a594; border-radius:0.2em; white-space: nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.home-offres ul > li span.localisation { z-index:3; font-size:0.9em; color:rgba(153,153,153,1); white-space: nowrap; overflow:hidden; text-overflow:ellipsis; max-width:50%; }
.home-offres ul > li span.date { z-index:3; font-size:0.9em; color:rgba(153,153,153,1); white-space: nowrap; margin-left:0.5em; }
.home-offres ul > li span.date:before { content:'•'; position:relative; display:inline-block; padding-right:0.6em; }
.home-offres ul > li h3 { z-index:3; font-size:1.1em; white-space: nowrap; text-overflow: ellipsis; overflow:hidden; margin:1em 0 0 0; max-width:100%; }
.home-offres ul > li svg { z-index:3; color:inherit; z-index:4; position:absolute; height:0.8em; width:auto; right:2em; top:50%; transform:translateY(-50%);  color:#62a594;}

.home-offres ul > li > button:after { z-index:2; content:''; position:absolute; right:0; top:50%; transform:translate(5em, -50%); background-color:#4b7991; border-radius:50%; width:0; height:0; transition:all 1200ms cubic-bezier(.19,1,.22,1) 0ms; }
body.desktop .home-offres ul > li > button:hover:after { width:70em; height:70em; }
body.desktop .home-offres ul > li > button:hover span.localisation { color:rgba(240,240,240,1); }
body.desktop .home-offres ul > li > button:hover span.date { color:rgba(240,240,240,1); }
body.desktop .home-offres ul > li > button:hover h3 { color:rgba(255,255,255,1); }
body.desktop .home-offres ul > li > button:hover svg { color:rgba(255,255,255,1); }

.home-offres div.vide { text-transform:uppercase; text-align:center; margin:4em 0; }

.home-offres button.mainbtn { margin:2em 1em 0 1em; }

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* ENTETE */

article > .liquide { padding:4em; text-align:left; }
article ul.blocliste { list-style-type:none; }
article h3 { margin-top:1em; font-size:1.2em; }

article.entete { z-index:2; }
article.entete img.visuel { width:100%; height:auto; }
article.entete .intro { padding-left:50%; }
article.entete h2 { font-size:2.5em; text-align:left; margin-bottom:0.7em; display:inline-block; width:auto; background: linear-gradient(45deg,#d8d8d8,#5ca4a8 50%,#4b7991); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

article h2 { margin-bottom:1em; }
article h3 { margin-bottom:0.5em; }
article .mainbtn { margin-top:2em; }
article .fromrte p, article .fromrte li { line-height:1.5; }
article .fromrte ul, article .fromrte ol { margin-top:0.5em; margin-bottom:0.5em; }
article .fromrte ul > li > ul { margin-bottom:1em; }
article .fromrte ul > li { list-style-type:disc; }
article .fromrte ol > li { margin-bottom:1.5em; }

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* CABINET */


article#page-cabinet h2 { font-size:4em; }

article#page-valeurs { padding:9em 0 4em 0; background-color:#0097b2; background:linear-gradient(45deg,#d8d8d8,#5ca4a8 50%,#4b7991) }
article#page-valeurs h2 { color:#fff; font-size:3em; text-align:left; margin-bottom:1em; }
article#page-valeurs p { color:#fff; text-align:left; }
article#page-valeurs img.visuel { display:inline-block; vertical-align:top; width:calc(45% - 5px); height:auto; margin-left:5%; margin-top:4em; }
article#page-valeurs .liste { display:inline-block; vertical-align:top; width:50%;  }
article#page-valeurs ul.blocliste { margin-top:2em; }
article#page-valeurs ul.blocliste h3 { text-transform:uppercase; color:#fff; font-size:1.4em; font-weight:700; }

article#page-equipe .intro { text-align:center; }
article#page-equipe h2 { font-size:3em; margin-bottom:1em; display:inline-block; width:auto; background: linear-gradient(45deg,#d8d8d8,#5ca4a8 50%,#4b7991); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

article#page-equipe ul.blocliste { font-size:0; display:inline-block; vertical-align:top; width:100%; text-align:center; }
article#page-equipe ul.blocliste > li { background-color:#fff; list-style-type:none; display:inline-block; vertical-align:top; text-align:left; width:30%; margin: 2em 2.5% 2em 2.5%; }
article#page-equipe ul.blocliste > li:nth-of-type(3n + 1) { margin-left:0; }
article#page-equipe ul.blocliste > li:nth-of-type(3n) { margin-right:0; }

article#page-equipe ul.blocliste img.visuel { position:relative; left:0; top:0; width:100%; height:auto; }
article#page-equipe ul.blocliste .back > div { position:absolute; left:0; top:0; width:100%; height:0; padding-bottom:100%; }
article#page-equipe ul.blocliste .detail { position:absolute; left:0; top:0; width:100%; height:100%; }
article#page-equipe ul.blocliste .detail .hashtags { position:absolute; bottom:0; left:0; width:100%; padding:1em; color:#fff; background-color:rgba(0,0,0,0.5); }
article#page-equipe ul.blocliste h3 { font-size:1.8em; color:#4b7991; margin-bottom:0.5em;}
article#page-equipe ul.blocliste .email { margin-top:0.5em; }
article#page-equipe ul.blocliste svg { display:inline-block; vertical-align:middle; width:1em; height:auto; color:#4b7991; margin-right:1em; }
article#page-equipe ul.blocliste span, article#page-equipe ul.blocliste a { display:inline-block; vertical-align:middle; }

article#page-bureaux { background-color:#f5f5f5; }
article#page-bureaux .intro { text-align:center; }
article#page-bureaux h2 { font-size:3em; margin-bottom:1em; }

article#page-bureaux ul.blocliste { font-size:0; display:inline-block; vertical-align:top; width:100%; text-align:center; }
article#page-bureaux ul.blocliste > li { background-color:rgba(255,255,255,1); overflow:hidden; background-color:#fff; list-style-type:none; display:inline-block; vertical-align:top; text-align:left; width:30%; height:0; padding-bottom:30%; margin: 2em 1% 2em 1%; }
article#page-bureaux ul.blocliste > li:nth-of-type(2n + 1) { margin-left:0; }
article#page-bureaux ul.blocliste > li:nth-of-type(2n) { margin-right:0; }

article#page-bureaux ul.blocliste > li:before { z-index:2; opacity:0; content:''; position:absolute; left:0; top:0; right:0; bottom:0; background-color:rgba(0,0,0,0.5); transition:all 1000ms ease 100ms, opacity 300ms ease 0ms; }
article#page-bureaux ul.blocliste > li:hover:before { opacity:1;}

article#page-bureaux ul.blocliste > li > img { z-index:1; position:absolute; width:100%; height:100%; left:50%; top:50%; transform:translate(-50%,-50%) scale(1.2); opacity:0; transition: all 3000ms cubic-bezier(.19,1,.22,1) 0ms; }
article#page-bureaux ul.blocliste > li:hover > img { transform:translate(-50%,-50%) scale(1); opacity:1; }

article#page-bureaux ul.blocliste > li > div { z-index:3; position:absolute; left:0; top:0; width:100%; height:auto; padding:0 3em; }
article#page-bureaux ul.blocliste > li:hover > div { color:rgba(255,255,255,1); }

article#page-bureaux ul.blocliste h3 { text-align:left; font-size:2.8em; color:#4b7991; margin-top:1.8em; margin-bottom:1.2em; transition:color 300ms ease 0ms; }
article#page-bureaux ul.blocliste > li:hover h3 { color:rgba(255,255,255,1); }
article#page-bureaux ul.blocliste .adresse { margin-top:2.5em; padding-left:3em }
article#page-bureaux ul.blocliste .email { margin-top:1.5em; padding-left:3em }
article#page-bureaux ul.blocliste svg { position:absolute; left:0; top:0; display:inline-block; vertical-align:middle; width:1em; height:auto; color:#4b7991; margin-right:1em; transition:color 300ms ease 0ms; }
article#page-bureaux ul.blocliste > li:hover svg { color:rgba(255,255,255,1); }
article#page-bureaux ul.blocliste .adresse svg { width:2em; }
article#page-bureaux ul.blocliste .adresse a { display:inline-block; width:auto; margin-top:1em; }
article#page-bureaux ul.blocliste .adresse svg path { fill:#4b7991; transition:fill 300ms ease 0ms; }
article#page-bureaux ul.blocliste > li:hover svg path { fill:rgba(255,255,255,1); }
article#page-bureaux ul.blocliste .email svg { width:1.5em; margin-left:0.25em; }
article#page-bureaux ul.blocliste span, article#page-bureaux ul.blocliste a { display:inline-block; vertical-align:middle; }


article#page-postulez { margin:0; overflow:hidden; }
article#page-postulez img { width:100%; height:auto; }
article#page-postulez div.intro { margin-left:40%; padding-left:5%; border-left:1px solid rgba(220,220,220,1); padding-top:4em; padding-bottom:4em; }
article#page-postulez h2 { font-size:2.5em;  margin-bottom:1.5em; display:inline-block; width:auto; background: linear-gradient(45deg,#d8d8d8,#5ca4a8 50%,#4b7991); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }


/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* METIERS */

article#page-fonctions { padding:9em 0 4em 0; overflow:hidden; background-color:#dbe4e9; }
article#page-fonctions h2 { font-size:2.5em;  margin-bottom:2em; }

article#page-fonctions ul.blocliste li { position:initial; }
article#page-fonctions ul.blocliste li h3 { cursor:pointer; position:relative; display:inline-block; width:auto; padding:0.5em; margin:0 0 1em 0; }
article#page-fonctions ul.blocliste li h3:after { transition:opacity 300ms ease; z-index:1; content:''; opacity:0; position:absolute; left:0; top:0; width:100%; height:100%; display:inline-block; background-color:#fff; border-radius:9px; box-shadow: 0 9px 11px rgba(0,0,0,.15); }
article#page-fonctions ul.blocliste li h3:before { transition:width 300ms ease; z-index:2; content:''; position:relative; width:0; height:2px; display:inline-block; vertical-align:middle; background-color:#4b7991; }
article#page-fonctions ul.blocliste li.current h3:after { opacity:1; }
article#page-fonctions ul.blocliste li.current h3:before { width:1em; }
body.desktop article#page-fonctions ul.blocliste li h3:hover:before { width:1em; }
article#page-fonctions ul.blocliste li span { z-index:3; display:inline-block; vertical-align:middle; padding:0 0.5em; }
article#page-fonctions ul.blocliste li .detail { z-index:1; transition:opacity 150ms ease 150ms, transform 0ms ease 300ms; transform:translateY(100%); opacity:0; position:absolute; right:0; top:0; width:66%; }
article#page-fonctions ul.blocliste li.current .detail { z-index:2; opacity:1; transform:translateY(0); transition:opacity 300ms ease 0ms, transform 300ms ease 0ms; }
article#page-fonctions ul.blocliste li .visuel { width:100%; height:auto; margin-top:1.5em; }
article#page-fonctions ul.blocliste li .descriptif { position:relative; display:inline-block; vertical-align:top; width:60%; background-color:#fff; padding:1em; }
article#page-fonctions ul.blocliste li .postes { position:relative; display:inline-block; vertical-align:top; width:35%; margin-left:calc(5% - 5px); background-color:#fff; padding:1em; }
article#page-fonctions ul.blocliste li h4 { font-size:1.4em; color:#4b7991; margin-bottom:1em; }

#page-secteurs h2 { font-size:2.5em; display:inline-block; width:auto; background: linear-gradient(45deg,#d8d8d8,#5ca4a8 50%,#4b7991); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
#page-secteurs ul { font-size:0; display:inline-block; vertical-align:top; }
#page-secteurs ul > li { list-style-type:none; display:inline-block; vertical-align:top; text-align:left; width:100%; margin-bottom:1em; }
#page-secteurs ul > li button { height:5em; font-size:1.4em; background-color:rgba(255,255,255,1); color:#4a4a4a; width:90%; padding-top:0; padding-bottom:0; }
body.desktop #page-secteurs ul > li button:hover, #page-secteurs ul > li button.hover { color:rgba(255,255,255,1); }

#page-references { background-color:#eee; }
#page-references .liquide { z-index:2; width:100%; margin:0 auto; text-align:center; padding-bottom:2em; }
#page-references h2 { font-size:2.5em; text-align:center; margin-bottom:0.5em; display:inline-block; width:auto; background: linear-gradient(45deg,#d8d8d8,#5ca4a8 50%,#4b7991); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
#page-references p { font-size:1.1em; text-align:center; margin-bottom:1.5em; }
#page-references .genially { width:60%; margin:0 auto; }

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* EXPERTISE */

article#page-chasse { padding:9em 0 4em 0; background-color:#eee; }
article#page-chasse h2 { font-size:2.5em; }

article#page-transition { z-index:2; }
article#page-transition img.visuel { width:100%; height:auto; }
article#page-transition .intro { padding-right:40%; padding-top:4em; padding-bottom:4em; }
article#page-transition h2 { font-size:3.6em; text-align:left; margin-bottom:1.2em; display:inline-block; width:auto; background: linear-gradient(45deg,#d8d8d8,#5ca4a8 50%,#4b7991); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

article.blocprocess { padding:4em 0 4em 0; color:#fff; background-color:#0097b2; background:linear-gradient(45deg,#d8d8d8,#5ca4a8 50%,#4b7991) }
article.blocprocess h2 { font-size:3em; color:#fff; }
article.blocprocess h3 { color:#fff; }
article.blocprocess ul.blocliste { min-height:40em; }
article.blocprocess ul.blocliste li { position:initial; }
article.blocprocess ul.blocliste li h3 { cursor:pointer; position:relative; display:inline-block; width:auto; max-width:50%; padding:0.5em; margin:0 0 1em 0; }
article.blocprocess ul.blocliste li span { z-index:3; display:inline-block; vertical-align:middle; padding:0 0.5em; }
article.blocprocess ul.blocliste li h3 > span { white-space:nowrap; }
article.blocprocess ul.blocliste li .detail { transition:opacity 300ms ease; height:auto; opacity:0; position:absolute; right:0; top:0; width:50%; padding-top:0.6em; }
article.blocprocess ul.blocliste li.current .detail { opacity:1; }
article.blocprocess ul.blocliste li h3:before { transition:width 300ms ease; z-index:2; content:''; position:relative; width:0; height:2px; display:inline-block; vertical-align:middle; background-color:#fff; }
article.blocprocess ul.blocliste li.current h3:before { width:1em; }
body.desktop article.blocprocess ul.blocliste li h3:hover:before { width:1em; }
article.blocprocess ul.blocliste li .visuel { transition:opacity 300ms ease; opacity:0; width:100%; height:auto; position:absolute; left:0; }
article.blocprocess ul.blocliste li.current .visuel { opacity:1; }

article#page-mobilite-recrutement { margin:0; overflow:hidden; }
article#page-mobilite-recrutement img { width:100%; height:auto; }
article#page-mobilite-recrutement div.intro { margin-left:40%; padding-left:5%; border-left:1px solid rgba(220,220,220,1); padding-top:4em; padding-bottom:4em; }
article#page-mobilite-recrutement h2 { font-size:1.7em; margin-top:2em; margin-bottom:0.7em; display:inline-block; width:auto; background: linear-gradient(45deg,#d8d8d8,#5ca4a8 50%,#4b7991); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
article#page-mobilite-recrutement .mobilite h2 { margin-top:0; }

article#page-coaching h2 { font-size:3em; text-align:left; margin-bottom:1.2em; display:inline-block; width:auto; background: linear-gradient(45deg,#d8d8d8,#5ca4a8 50%,#4b7991); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

article#page-coaching ul.blocliste li { margin-top:4em; }
article#page-coaching ul.blocliste img.visuel { position:absolute; left:0; top:0; width:10em; height:auto; border-radius:50%; }
article#page-coaching ul.blocliste .detail { position:relative; padding-left:14em; }
article#page-coaching ul.blocliste h3 { font-size:1.8em; color:#4b7991; margin-bottom:0.5em;}
article#page-coaching ul.blocliste .linkedin { margin-top:1em; }
article#page-coaching ul.blocliste svg { display:inline-block; vertical-align:middle; width:1em; height:auto; color:#4b7991; margin-right:1em; }
article#page-coaching ul.blocliste span, article#page-coaching ul.blocliste a { display:inline-block; vertical-align:middle; }


/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* CANDIDAT */

article#page-postes { background-color:#eee; }
article#page-postes h2 { font-size:3.2em; }

article#page-spontanee { padding:4em 0 4em 0; color:#fff; background-color:#0097b2; background:linear-gradient(45deg,#d8d8d8,#5ca4a8 50%,#4b7991) }
article#page-spontanee h2 { font-size:3em; color:#fff; }
article#page-spontanee h3 { color:#fff; }
article#page-spontanee .mainbtn { color:rgba(255,255,255,1); }
article#page-spontanee .mainbtn:hover { color:#4a4a4a; }
article#page-spontanee .mainbtn:before { border-color:rgba(255,255,255,1); }
article#page-spontanee .mainbtn:after { background-color:rgba(255,255,255,1); }

article#page-rejoindre { margin:0; overflow:hidden; }
article#page-rejoindre img { width:100%; height:auto; }
article#page-rejoindre div.intro { margin-left:40%; padding-left:5%; border-left:1px solid rgba(220,220,220,1); padding-top:4em; padding-bottom:4em; }
article#page-rejoindre h2 { font-size:2.5em;  margin-bottom:1.5em; display:inline-block; width:auto; background: linear-gradient(45deg,#d8d8d8,#5ca4a8 50%,#4b7991); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }


/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* JOB */

article#page-job div.carte { z-index:2; background-color:#fff; display:block; padding:2em; box-shadow:0 1.9em 5em -1em rgba(0, 0, 0, .2); border-radius:1em; text-align:center; margin-bottom:4em; }
article#page-job div.carte h2 { font-size:1.6em; font-weight:600; margin-top:1em; margin-bottom:1.5em; }
article#page-job div.carte h2 > span { display:block; font-size:0.5em; font-weight:300; text-transform:uppercase; }
article#page-job div.carte > span { display:block; }
article#page-job div.carte span.date { color:#4b7991; font-size:1em; }
article#page-job div.carte span.localisation { color:#999999; font-size:0.9em; }
article#page-job div.carte span.soussecteur { display:inline-block; font-size:0.9em; width:auto; padding:0.4em 1em; margin:0 auto 0.5em auto; text-transform:uppercase; color:rgba(255,255,255,1); background-color:#62a594; border-radius:0.2em; }

article#page-job div.carte .mainbtn { min-width:9em; margin:2em auto 0 auto; }


article#page-job div.detail > div:not(.carte) { z-index:1; margin-bottom:4em; }
article#page-job div.detail > div:not(.carte):nth-of-type(2n+1) { padding-top:4em; padding-bottom:4em; }
article#page-job div.detail > div:not(.carte):nth-of-type(2n+1):before { content:''; position:absolute; left:50%; top:0; bottom:0; width:100vw; transform:translateX(-50%); background-color:#dbe4e9; }

article#page-job div.detail > div:not(.carte):nth-of-type(2) h3 { font-size:2.5em; margin-top:0; margin-bottom:0.5em; display:inline-block; width:auto; background: linear-gradient(45deg,#d8d8d8,#5ca4a8 50%,#4b7991); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
article#page-job div.detail > div:not(.carte) h3 { margin-top:0; font-size:2em; }

article#page-job div.detail > .mainbtn { min-width:9em; margin:0 1em 2em 0; }


/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* CLIENT */

article#page-besoin { background-color:#eee; }

article#page-confier { padding:9em 0 4em 0; background-color:#fff; }
article#page-confier h2 { font-size:2.5em; }


/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* GOLF */

article#page-golf h2 { display:none; }
article#page-golf .mainbtn { margin-top:0.5em; margin-bottom:0.5em; }

article#page-golf-client { padding:4em 0 4em 0; color:#fff; background-color:#0097b2; background:linear-gradient(45deg,#d8d8d8,#5ca4a8 50%,#4b7991) }
article#page-golf-client h2 { font-size:3em; color:#fff; }
article#page-golf-client h3 { color:#fff; }
article#page-golf-client .mainbtn { color:rgba(255,255,255,1); }
article#page-golf-client .mainbtn:hover { color:#4a4a4a; }
article#page-golf-client .mainbtn:before { border-color:rgba(255,255,255,1); }
article#page-golf-client .mainbtn:after { background-color:rgba(255,255,255,1); }

article#page-golf-candidat { padding:4em 0 4em 0; }
article#page-golf-candidat h2 { font-size:3em; display:inline-block; width:auto; background: linear-gradient(45deg,#d8d8d8,#5ca4a8 50%,#4b7991); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

article#page-golf-contact { margin:0; overflow:hidden; background-color:rgba(240,240,240,1); }
article#page-golf-contact img { width:100%; height:auto; }
article#page-golf-contact div.intro { margin-left:40%; padding-left:5%; border-left:1px solid rgba(220,220,220,1); padding-top:4em; padding-bottom:4em; }
article#page-golf-contact h2 { font-size:2.5em;  margin-bottom:1.5em; display:inline-block; width:auto; background: linear-gradient(45deg,#d8d8d8,#5ca4a8 50%,#4b7991); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* LANDING PAGES */

article.titrelanding h1 { font-size:4em; }

article.entetelanding { background-color:#eee; }

article.specificiteslanding { margin-top:10em; }
article.specificiteslanding h2 { font-size:3em; display:inline-block; width:auto; background: linear-gradient(45deg,#d8d8d8,#5ca4a8 50%,#4b7991); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
article.specificiteslanding h3 { font-weight:700; }

article.metierslanding { background-color:#dbe4e9; }
article.metierslanding > .liquide{ text-align:center; }
article.metierslanding h2 { font-size:3em; }
article.metierslanding ul.blocliste { font-size:0; }
article.metierslanding ul.blocliste > li { margin:2em 0; overflow:hidden; display:inline-block; width:100%; list-style-type:none; cursor:pointer; }
article.metierslanding ul.blocliste > li img { z-index:1; width:100%; height:auto; }
article.metierslanding ul.blocliste > li:before { z-index:2; content:''; position:absolute; left:-5em; right:-5em; bottom:-5em; height:10em; background-color:#5ca6a9; transform:rotate(3deg); }
article.metierslanding ul.blocliste > li .detail { transition:1s ease 0s; transform:translateY(100%); color:#fff; z-index:3; position:absolute; left:0; bottom:0; width:100%; height:17.5em; vertical-align:bottom; }
article.metierslanding ul.blocliste > li .detail:before { transition:1s ease .4s; z-index:2; content:''; position:absolute; background-color:#5ca6a9; opacity:0.8; width:200%; padding-bottom:200%; border-radius:100%; top:100%; right:0; transform:translate(0, 0); }
article.metierslanding ul.blocliste > li .detail:after { transition:1s ease .2s; z-index:3; content:''; position:absolute; background-color:#4b7991; opacity:0.9; width:150%; padding-bottom:150%; border-radius:100%; top:100%; right:0; transform:translate(0, 0); }
article.metierslanding ul.blocliste > li .detail > h3 { z-index:11; margin:0; transform:translateY(-100%); color:#fff; text-align:center; vertical-align:middle; height:4em; font-size:1.6em; padding:1em; }
article.metierslanding ul.blocliste > li .detail > div { z-index:12; color:#fff; padding:0 2em 5em 2em; }
article.metierslanding ul.blocliste > li:hover .detail, article.metierslanding ul.blocliste > li.hover .detail { transition:1s cubic-bezier(.19,1,.22,1) .2s; transform:translateY(0); }
article.metierslanding ul.blocliste > li:hover .detail:before, article.metierslanding ul.blocliste > li.hover .detail:before { transition:1s cubic-bezier(.19,1,.22,1) 0s; transform:translate(26%, -67%); }
article.metierslanding ul.blocliste > li:hover .detail:after, article.metierslanding ul.blocliste > li.hover .detail:after { transition:1s cubic-bezier(.19,1,.22,1) .2s; transform:translate(10%, -65%); }

article.enjeuxlanding { background-color:#eee; }
article.enjeuxlanding .col { display:inline-block; width:100%; vertical-align:top; }
article.enjeuxlanding h2 { font-size:1.6em;  }

article.chiffreslanding { color:#fff; background-position:center center; background-size:cover; background-repeat:no-repeat; }
article.chiffreslanding:before { z-index:2; content:''; position:absolute; left:50%; top:0; height:100%; width:100vw; transform:translate(-50%); background-color:#4b7991; opacity:0.8; }
article.chiffreslanding > .liquide{ z-index:10; text-align:center; }
article.chiffreslanding h2 { font-size:3.2em; color:#fff; }
article.chiffreslanding ul.blocchiffres { font-size:0; }
article.chiffreslanding ul.blocchiffres > li { text-align:center; margin:2em 0; overflow:hidden; display:inline-block; width:100%; list-style-type:none; }
article.chiffreslanding ul.blocchiffres > li > span { display:block; margin:0 auto; }
article.chiffreslanding ul.blocchiffres > li > span:first-of-type { font-size:4em; font-weight:700; }
article.chiffreslanding ul.blocchiffres > li > span:last-of-type { max-width:15em; }
article.chiffreslanding .fromrte { margin-top:4em; }
article.chiffreslanding .fromrte p { text-align:right; }

article.recrutementlanding { overflow:hidden; }
article.recrutementlanding > .liquide { padding-top:0; }
article.recrutementlanding .visuel { position:relative; width:100vw; height:17em; left:50%; transform:translateX(-50vw); }
article.recrutementlanding .intro h2 { font-size:2em; margin-top:2em; display:inline-block; width:auto; background: linear-gradient(45deg,#d8d8d8,#5ca4a8 50%,#4b7991); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
article.recrutementlanding .exemples h2 { font-size:1.2em; text-transform:uppercase; margin-top:3em; margin-bottom:1.5em; }
article.recrutementlanding .exemples ul { font-size:0; }
article.recrutementlanding .exemples ul > li { display:inline-block; width:100%; padding:0.8em 0; border-top:1px solid #dedede; list-style-type:none; }
	

/* */
/* Le mag */
#listemag-liste { margin-bottom:5em; }

.filtre input, .filtre select { background-color:rgba(255,255,255,1); color:#4a4a4a; border:0; border-bottom:1px solid #4b7991; }

#listemag-liste > ul { font-size:0; text-align:left; }
#listemag-liste > ul > li { display:inline-block; vertical-align:top; text-align:center; }

#listemag-liste > ul > li { width:100%; padding:0 1em; margin-top:2em; margin-bottom:2em; }
#listemag-liste > ul > li > button { overflow:hidden; display:block; width:100%; border:1px solid #4a4a4a; background-color:transparent; color:#4a4a4a; border-radius:0.5em; padding:2em 4em 2em 2em; text-align:left; }
#listemag-liste > ul > li > button > span { display:inline-block; vertical-align:middle; }
#listemag-liste > ul > li span.date { z-index:3; font-size:0.9em; padding:0.4em 1em; margin:0 2em 0.5em 0; text-transform:uppercase; color:rgba(255,255,255,1); background-color:#62a594; border-radius:0.2em; white-space: nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
#listemag-liste > ul > li div.fromrte { z-index:3; }
#listemag-liste > ul > li h2,
#listemag-liste > ul > li h3 { z-index:3; font-size:1.3em; margin:1em 0 0.5em 0; max-width:100%; }
#listemag-liste > ul > li svg { z-index:3; color:inherit; z-index:4; position:absolute; height:0.8em; width:auto; right:2em; top:50%; transform:translateY(-50%);  color:#62a594;}

#listemag-liste > ul > li > button:after { z-index:2; content:''; position:absolute; right:0; top:50%; transform:translate(5em, -50%); background-color:#4b7991; border-radius:50%; width:0; height:0; transition:all 1200ms cubic-bezier(.19,1,.22,1) 0ms; }
body.desktop #listemag-liste > ul > li > button:hover { cursor:pointer; }
body.desktop #listemag-liste > ul > li > button:hover:after { width:120em; height:120em; }
body.desktop #listemag-liste > ul > li > button:hover span.date { color:rgba(255,255,255,1); }
body.desktop #listemag-liste > ul > li > button:hover div.fromrte { color:rgba(255,255,255,1); }
body.desktop #listemag-liste > ul > li > button:hover h2,
body.desktop #listemag-liste > ul > li > button:hover h3 { color:rgba(255,255,255,1); }
body.desktop #listemag-liste > ul > li > button:hover svg { color:rgba(255,255,255,1); }


#listemag-liste .pagination { font-size:0.7em; position:absolute; right:2em; padding:0 2em; text-align:center; margin-top:2em; }
#listemag-liste .pagination div.currpage { line-height:1; position:relative; display:inline-block; white-space:nowrap; margin:0; padding:0; }
#listemag-liste .pagination div.currpage > span { padding:0.2em 0.2em; display:inline-block; vertical-align:middle; }
#listemag-liste .pagination div.currpage > input { position:relative; text-align:center; display:inline-block; vertical-align:middle; width:2.2em; padding:0.1em 0.5em; line-height:1; border-radius:0.6em; }
#listemag-liste .pagination a { display:block; color:rgba(100,100,100,1); position:absolute; top:50%; transform:translateY(-50%); }
#listemag-liste .pagination a svg { position:relative; display:inline-block; }
#listemag-liste .pagination a svg { height:1.2em; width:auto; }
#listemag-liste .pagination a polyline { stroke-width:10; }
#listemag-liste .pagination a.prevpage { left:0; }
#listemag-liste .pagination a.prevpage polyline { transform:scaleX(-1); transform-origin:center; }
#listemag-liste .pagination a.nextpage { right:0; }
body.desktop #listemag-liste .pagination a:hover { color:#4b7991; }

article.titremag h1 { font-size:3em; }

#page-detailmag .back { margin:2em 0 2em 10%; }
#page-detailmag > div { margin:2em auto 4em auto; width:80%; }
#page-detailmag div.date { display:inline-block; font-size:0.9em; padding:0.4em 1em; margin:0 2em 1.5em 0; text-transform:uppercase; color:rgba(255,255,255,1); background-color:#62a594; border-radius:0.2em; white-space: nowrap; overflow:hidden; text-overflow:ellipsis; width:auto; max-width:100%; }
#page-detailmag div.fromrte { margin-bottom:1em; }
#page-detailmag > div > img { width:100%; height:auto; margin-bottom:1em; }
#page-detailmag div.fromrte img { max-width:100%; }
#page-detailmag h2 { margin-top:1em; font-size:1.2em; }
#page-detailmag h3 { margin-top:1em; font-size:1.1em; }
#page-detailmag h4 { margin-top:1em; font-size:1em; }

div.fromrte.conclusionall { margin-top:2em; }
button.mainbtn.conclusionall { margin-top:0; }

/* VIDEO */
div.controls { margin-bottom:1em; 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; }

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

article#page-contact { overflow:visible; background-color:rgba(240,240,240,1); padding-bottom:0; }
article#page-contact > .liquide { min-height:20em; background-color:rgba(255,255,255,1); transform:translateY(-8em); padding:4em; text-align:left; }

article#page-contact > .liquide > div { display:inline-block; vertical-align:top; }
article#page-contact > .liquide > div:nth-of-type(1) { width:calc(35% - 5px); }
article#page-contact > .liquide > div:nth-of-type(2) { width:65%; }

article#page-contact h2 { font-size:3em; margin-bottom:0.5em; display:inline-block; width:auto; background: linear-gradient(45deg,#d8d8d8,#5ca4a8 50%,#4b7991); -webkit-background-clip: text; -webkit-text-fill-color: transparent;  }

.contactform fieldset { font-size:0; border:0; }
.contactform label { display:inline-block; vertical-align:top; width:100%; margin-bottom:1em; }
.contactform input, .contactform select { background-color:rgba(255,255,255,1); color:#4a4a4a; border:0; border-bottom:1px solid #4b7991; }
.contactform textarea { background-color:rgba(255,255,255,1); color:#4a4a4a; border:1px solid #4b7991; }

.contactform label.objet { margin-bottom:3em; }
.contactform label.cv { margin-top:2em; margin-bottom:2em; }

.contactform div.consentementrgpd { margin-bottom:1em; }
.contactform label.consentementrgpd > span { font-size:0.9em; }

.contactform input[type="checkbox"] + span:before, section.contact input[type="checkbox"] + span:after { top:0 !important; border-radius:3px !important; }
.contactform input[type="checkbox"] + span:before { border-color:#4b7991 !important; }
.contactform input[type="checkbox"] + span:after { background-color:#4b7991 !important; }

.contactform input[type="checkbox"] { position:absolute !important; padding-top:1em !important; padding-bottom: 0 !important; left: 0 !important; top:0 !important; transform: scale(1) !important; }


.contactform span.help { font-size:0.8em; color:rgba(100,100,100,1); display:block; padding-top:0.5em; }

.contactform span.asterisque { font-size:0.8em; color:rgba(100,100,100,1); display:block; padding-bottom:1.2em; }

.jconfirm .jconfirm-holder { max-width:80%; margin:0 auto; }

.reponse { padding-top:2em; min-height:20em; }

.succes { font-size:1.2em; }
.erreur { color:#ff0000; margin:2em 0 3em 0; }
.erreur ul { list-style-type:none; }

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* GOOGLEMAPS */

.mapwrap { display:block; position:relative; overflow:hidden; aspect-ratio:3/1; width:100%; cursor:pointer; }
.mapwrap:before { z-index:2; content:''; position:absolute; left:10px; top:50%; transform:translateY(-50%); width:40px; height:81px; background:transparent url('https://www.centurion-search.fr/_chartes_/centurion/ressources/images/map/map-zoom.jpg') no-repeat top left; background-size:contain; box-shadow:rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; border-radius:2px; }
.mapwrap > picture { z-index:1; position:absolute; inset:0; width:100%; height:100%; }
.mapwrap > picture > img { position:absolute; inset:0; left:50%; top:50%; transform:translate(-50%,-50%); max-width:initial; min-width:100%; object-fit:cover; }
.mapwrap > div { z-index:3; height:100%; width:100%; opacity:0; transition:opacity 0.5s linear 0.5s; }
.mapwrap > div > div { background-color:transparent !important; }
.mapwrap > div.active { opacity:1; }

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* ANIMATION SCROLL */

.scrollanim.init { opacity:0; transition:opacity 300ms ease 0ms, transform 300ms ease 0ms; }
.scrollanim { opacity:1; transition:opacity 500ms ease 0ms, transform 300ms ease 0ms; }

.scrollanim.frombottom.init { opacity:0; transform:translateY(50%); }
.scrollanim.frombottom { opacity:1; transform:translateY(0); }
.scrollanim.fromtop.init { opacity:0; transform:translateY(-50%); }
.scrollanim.fromtop { opacity:1; transform:translateY(0); }
.scrollanim.fromleft.init { opacity:0; transform:translateX(-50%); }
.scrollanim.fromleft { opacity:1; transform:translateX(0); }
.scrollanim.fromright.init { opacity:0; transform:translateX(50%);  }
.scrollanim.fromright { opacity:1; transform:translateX(0); }

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* MENTIONS LEGALES */

article.mentionslegales { overflow:visible; font-family:Verdana, sans-serif; color:#4a4a4a; font-size:0.9em; font-weight:300; display:block; margin:0 auto; padding:0; }

article.mentionslegales { background-color:rgba(240,240,240,1); padding-bottom:0; }
article.mentionslegales > .liquide { background-color:rgba(255,255,255,1); transform:translateY(-8em); padding:4em 6em; }

article.mentionslegales h2 { font-size:1.4em; text-transform:uppercase; font-weight:600; padding-top:2.5em; padding-bottom:1em; }
article.mentionslegales h3 { font-size:1.1em; text-transform:uppercase; font-weight:600; padding-top:1.5em; padding-bottom:0.5em; }
article.mentionslegales p { text-align:justify; }
article.mentionslegales li { text-align:justify; }
article.mentionslegales strong { font-weight:600; }

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* AUTHENTIFICATION */

article#page-authentification { width:30%; margin:0 auto; }
article#page-authentification h1 { margin:7rem 0 2rem 0; }

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* FOOTER */
footer { z-index:900; width:100%; min-height:50vh; margin:0; padding:3em 0; position:relative; background-color:rgba(0,0,0,1); text-align:left; background-size:cover; background-position:center center; }
footer:before { content:''; position:absolute; left:0; top:0; right:0; bottom:0; background-color:rgba(0,0,0,0.3); }
footer .liquide { height:100%; }

footer aside.contact { margin:0 0 10em 0; text-align:center; }
footer aside.contact h2 { font-size:4em; font-weight:300; color:rgba(255,255,255,1); margin:0 0 1em 0; text-align:center; }
footer aside.contact div { font-size:1.2em; color:rgba(255,255,255,1); margin:0 0 4em 0; text-align:center; }
footer aside.contact p { text-align:center; }
footer aside.contact .mainbtn { font-size:1.2em; color:rgba(255,255,255,1); }
footer aside.contact .mainbtn:before { border-color:rgba(255,255,255,1); }

footer nav { position:relative; margin:0; padding:3em 3em 0 3em; background-color:rgba(255,255,255,1); color:#4a4a4a; }

footer .logo { width:15em; height:auto; margin-right:5em; margin-bottom:8em; display:inline-block; vertical-align:top; }

footer ul.menu { width:calc(100% - 20em - 5px - 10em - 5px); height:auto; display:inline-block; vertical-align:top; }
footer ul.menu > li { display:inline-block; vertical-align:top; position:relative; list-style-type:none; width:calc( (100% / 3) - 5px); margin:1em 0 0.5em 0; }
footer ul.menu > li > button { border:0; background-color:transparent; color:#4a4a4a; transition:color 300ms ease 0ms; }
body.desktop footer ul.menu > li > button:hover { color:#62a594; }

footer .coords { width:calc(100% - 20em - 5px - 10em - 5px); height:auto; display:inline-block; vertical-align:top; }
footer .coords > div:nth-of-type(1) { font-size:1.2em; font-weight:500; padding:1em 0 0 0; }
footer .coords > div:nth-of-type(2) { font-size:1em; font-weight:300; padding:0 0 1em 0; }
footer .coords > div:nth-of-type(3) { }

footer ul.sociaux { position:absolute; left:3em; top:8em; width:auto; height:auto; display:inline-block; vertical-align:top; }
footer ul.sociaux > li { display:inline-block; vertical-align:top; position:relative; list-style-type:none; width:auto; margin-right:1em;  }
footer ul.sociaux > li:not(.frenchfab) > a { display:inline-block; width:2.5em; height:2.5em; background-color:rgba(240,240,240,1); color:#007AAA; border-radius:50%; transition:background-color 300ms ease 0ms; }
footer ul.sociaux > li:not(.frenchfab) > a > svg { position:absolute; left:50%; top:45%; width:40%; height:40%; transform:translate(-50%, -50%); transition:color 300ms ease 0ms; }
body.desktop footer ul.sociaux > li:not(.frenchfab) > a:hover { background-color:#007AAA; }
body.desktop footer ul.sociaux > li:not(.frenchfab) > a:hover > svg { color:rgba(255,255,255,1); }

footer ul.certifications { position:absolute; right:3em; top:3em; width:auto; height:auto; display:inline-block; vertical-align:top; }
footer ul.certifications > li { display:block; vertical-align:top; text-align:center; position:relative; list-style-type:none; margin-bottom:1em; }
footer ul.certifications > li.frenchfab > a { position:relative; display:inline-block; width:auto; height:9em; }
footer ul.certifications > li.frenchfab > a > svg { position:relative; width:auto; height:100%; }
footer ul.certifications > li.ecovadis > img { position:relative; display:inline-block; width:auto; height:6em; }


footer .copyright { margin:0; padding:1.5em 0; border-top:1px solid rgba(200,200,200,1); text-align:left; line-height:1; }
footer .copyright span, footer .copyright a { padding:0 0 0 4em; line-height:1; display:inline-block; vertical-align:top; color:#4a4a4a; }
footer .copyright span:first-of-type { padding-left:0; }
body.desktop footer .copyright a:hover { color:#62a594; text-decoration:none; }

footer .copyright ul {  }
footer .copyright ul > li { list-style-type:none; display:inline-block; vertical-align:top; }
footer .copyright ul a { padding-left:0; transition:color 300ms ease 0ms; }
footer .copyright ul a svg { display:inline-block; vertical-align:top; height:1.1em; width:auto; margin-left:0.5em; }
body.desktop footer .copyright span a:hover { text-decoration:none; color:#62a594; }
/* ------------------------------------------------------------------------------------------------------------- */
/* RESPONSIVE */

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

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* Reinit font-size après un font-size:0; */
body,
header nav ul > li,
main,
.home-raisons ul > li, .home-metiers ul > li, .home-offres ul > li,
ul.blocliste > li,
ul.blocchiffres > li,
#page-secteurs ul > li,
.exemples ul > li,
#listemag-liste > ul > li,
.contactform label, .contactform fieldset > div
 { font-size:1rem; }
/*----------------------------------------------------------------------------------------------------------------------------------------------*/

#en2mots { background-color:rgba(255,255,255,1); width:100%; max-width:100%; 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; }

	.liquide { max-width:calc(0.8 * 2000px); }
}

/* 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,
header nav ul > li,
main,
.home-raisons ul > li, .home-metiers ul > li, .home-offres ul > li,
ul.blocliste > li,
ul.blocchiffres > li,
#page-secteurs ul > li,
.exemples ul > li,
#listemag-liste > ul > li,
.contactform label, .contactform fieldset > div
 { font-size:0.8rem; }
/*----------------------------------------------------------------------------------------------------------------------------------------------*/

button#showhidemenu { display:none; }

	.liquide { width:80%; }

	header .mainlinks { position:absolute; right:0; top:1em; }
	
	.home-synergie img { position:absolute; left:0; top:50%; transform:translateY(-50%); width:35%; }

	article.entete img.visuel { position:absolute; left:0; top:50%; transform:translateY(-50%); width:45%; }

	article#page-cabinet img.visuel { width:38%; }

	article#page-postulez img { position:absolute; left:0; top:50%; transform:translateY(-50%); width:35%; }

	article#page-transition img.visuel { position:absolute; right:0; top:50%; transform:translateY(-50%); width:35%; }

	article.blocprocess ul.blocliste li .visuel { bottom:0; width:33%; }

	article#page-mobilite-recrutement img { position:absolute; left:0; top:50%; transform:translateY(-50%); width:35%; }

	article#page-rejoindre img { position:absolute; left:0; top:50%; transform:translateY(-50%); width:35%; }

	article#page-job div.carte { position:absolute; left:0; top:0; width:26em; }
	article#page-job div.detail > div:not(.carte) { padding-left:30em; }
	article#page-job div.detail > .mainbtn {margin-left:30em; }

	article#page-golf img.visuel { width:38%; }
	article#page-golf-client { padding-top:9em; }
	article#page-golf-contact img { position:absolute; left:0; top:50%; transform:translateY(-50%); width:35%; }

#page-secteurs ul > li { width:calc(100% / 3); }

	#listemag-liste > ul > li h2,
	#listemag-liste > ul > li h3 { white-space: nowrap; text-overflow: ellipsis; overflow:hidden; }
	.bloc-titre.titremag { height:50vh; }


	article.metierslanding ul.blocliste > li { margin:2em 0 2em 8em; width:calc((100% / 3) - (8em * 2 / 3)); }
	article.metierslanding ul.blocliste > li:nth-of-type(3n+1) { margin-left:0; }

	article.enjeuxlanding .col { width:calc(50% - 5px); }
	article.enjeuxlanding .col:first-of-type { padding-right:4em; }
	article.enjeuxlanding .col:last-of-type { padding-left:4em; }

	article.chiffreslanding ul.blocchiffres > li { margin:2em 0 2em 8em; width:calc((100% / 3) - (8em * 2 / 3)); }
	article.chiffreslanding ul.blocchiffres > li:nth-of-type(3n+1) { margin-left:0; }

	article.recrutementlanding .visuel { position:absolute; left:50%; top:50%; width:50vw; height:100%; transform:translate(-50vw, -50%); }
	article.recrutementlanding > div > div { padding-left:calc(50% + 4em); }
	article.recrutementlanding .exemples ul > li { width:calc(50% - 1em); padding:0.8em 1em 0.8em 0; }
	article.recrutementlanding .exemples ul > li:nth-of-type(2n+1) { margin-right:1em; }
	article.recrutementlanding .exemples ul > li:nth-of-type(2n+2) { margin-left:1em; }

	.contactform label.nom, .contactform label.prenom, .contactform label.email, .contactform label.telephone { width:48%; }
	.contactform label.nom, .contactform label.email { margin-right:2%; }
	.contactform label.prenom, .contactform label.telephone { margin-left:2%; }

	footer .contactform { position:relative; padding-top:1em; padding-left:50%; padding-bottom:3em; }
	footer .contactform label.nom { position:absolute; left:0; top:0.6em; width:45%; margin:0; }
	footer .contactform label.prenom { position:absolute; left:0; top:3.4em; width:45%; margin:0; }
	footer .contactform label.email { position:absolute; left:0; top:6.2em; width:45%; margin:0; }
	footer .contactform label.message { margin-bottom:1.7em; }
	footer .contactform label.consentementrgpd { position:absolute; left:0; top:10em; width:45%; margin:0; }

	footer .copyright ul { display:inline-block; vertical-align:top; width:auto; position:absolute; right:0;  }
	footer .copyright ul > li { margin-left:4em; }
}
/* 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:1600px) {

	html { font-size:11px; font-size:1.1vw; }
	.liquide { width:90%; }

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* Reinit font-size après un font-size:0; */
body,
header nav ul > li,
main,
.home-raisons ul > li, .home-metiers ul > li, .home-offres ul > li,
ul.blocliste > li,
ul.blocchiffres > li,
#page-secteurs ul > li,
.exemples ul > li,
#listemag-liste > ul > li,
.contactform label, .contactform fieldset > div
 { font-size:1.1rem; }
/*----------------------------------------------------------------------------------------------------------------------------------------------*/
	
header nav > ul#menu > li > ul > li > button { font-size:0.9em; }
header nav > ul#menu > li > ul > li > ul > li > button { font-size:0.7em; }

article > .liquide { padding:3em 2em; }

main h1 { bottom:2em; }

article.entete img.visuel { width:50%; }
article.entete .intro { padding-left:55%; }

article#page-cabinet h2 { font-size:2.6em; margin-bottom:0.7em; }
article#page-cabinet img.visuel { width:45%; }
article#page-cabinet .intro { padding-left:50%; }

article#page-bureaux ul.blocliste > li > div { padding:0 0.2em 0 1.2em; }
article#page-bureaux ul.blocliste h3 { font-size: 2.2em; margin-top:1.4em;  }

article#page-valeurs { padding-top:6em; }
article#page-valeurs img.visuel { margin-top:6em; }

article#page-transition .intro { padding-top:3em; padding-bottom:3em; }
article#page-transition h2 { font-size:2.5em; margin-bottom:0.7em; }

article#page-contact > .liquide { transform:translateY(-6em); }

article#page-golf h2 { font-size:2.6em; margin-bottom:0.7em; }
article#page-golf img.visuel { width:45%; }
article#page-golf .intro { padding-left:50%; }

article.titrelanding h1 { font-size:3.5em; }

article.enjeuxlanding .col:first-of-type { padding-right:2em; }
article.enjeuxlanding .col:last-of-type { padding-left:2em; }
article.enjeuxlanding h2 { font-size:1.4em; }

article.metierslanding ul.blocliste > li .detail > h3 { font-size:1.2em; padding-bottom:1em; }
}
/* AFFICHAGE MOBILE */
@media (orientation:portrait) and (max-width:800px), (max-width:500px) {

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

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* Reinit font-size après un font-size:0; */
body,
header nav ul > li,
main,
.home-raisons ul > li, .home-metiers ul > li, .home-offres ul > li,
ul.blocliste > li,
ul.blocchiffres > li,
#page-secteurs ul > li,
.exemples ul > li,
#listemag-liste > ul > li,
.contactform label, .contactform fieldset > div
 { font-size:1.2rem; }
/*----------------------------------------------------------------------------------------------------------------------------------------------*/

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


	
header .bg { height:5em; }

header .mainlinks { display:none; border-top:1px solid #007AAA; margin-top:2em; padding-top:2em; }
header .mainlinks button { display:block; margin-left:0; margin-bottom:2em; }
header nav { max-height:0; opacity:0; overflow:hidden; margin-top:2em; }
button#showhidemenu { display:inline-block; }

body.showmenu header .mainlinks { display:block; }
body.showmenu header nav { max-height:100vh; height:calc(100vh - 25em); opacity:1; overflow:scroll; }
body.showmenu.scroll header nav ul#menu > li:before {border-color:transparent; }

header nav  { }
header nav ul > li { width:100%; }
header nav ul > li > button { color:#4a4a4a; }
header nav > ul#menu > li > ul > li > button { padding-left:2em; }
header nav > ul#menu > li > ul > li > ul > li > button { padding-left:2em; }

article > .liquide { padding:1em 1em; }

.bloc-titre { height:90vh; }
main h1 { font-size:3em; bottom:1.5em; }

.home-synergie { margin-top:0; margin-bottom:0; }
.home-synergie img { width:100%; }
.home-synergie div.content { margin-left:0; padding-left:0; border-left:0; }
.home-synergie h2 { font-size:2.2em; }

.home-raisons { margin-top:0; margin-bottom:0; }
.home-raisons h2 { font-size:2.2em; }
.home-raisons h3 { font-size:1.8em; }
.home-raisons ul { display:block; }
.home-raisons ul > li { width:100%; margin-bottom:4em; }
.home-raisons button { width:auto; white-space: nowrap; }

.home-metiers .content { width:100%; padding-right:0; }
.home-metiers ul { width:100%; }
.home-metiers ul > li { width:100%; }
.home-metiers ul > li:first-of-type { margin-top:2em; }
.home-metiers ul > li button { margin-top:1em; height:4.5em; width:100%; }

.home-references > img { width:30%; }
.home-references h2 { max-width:100%; font-sizez:2.2em; }
.home-references .genially { width:100%; }

.home-offres { margin-top:0; }
.home-offres .filtre label { width:100%; margin:0 0 1em 0; }
.home-offres ul > li { width:100%; padding:0; }
.home-offres ul > li span.localisation { max-width:50%; }


article.entete .intro { padding-left:0; }
article.entete img.visuel { width:100% !important; }
article.entete .mainbtn { margin-bottom:2em; }


article#page-contact > .liquide { padding:2em 1em; transform:translateY(-4em); }
article#page-contact > .liquide > div:nth-of-type(1) { width:100%; }
article#page-contact > .liquide > div:nth-of-type(2) { width:100%; }


.contactform label { text-align:left; }
.contactform span.asterisque { text-align:left; }

.mapwrap { aspect-ratio:1/1; }


article#page-cabinet h2 { font-size:2.5em; }

article#page-fonctions { padding-top:2em; }
article#page-fonctions h2 { font-size:2em; }
article#page-fonctions ul.blocliste { min-height:90em; }
article#page-fonctions ul.blocliste li .detail { width:100%; top:35em; width:100%; }
article#page-fonctions ul.blocliste li .descriptif { width:100%; }
article#page-fonctions ul.blocliste li .postes { width:100%; margin-left:0; }

#page-references .liquide { padding-top:2em; }
#page-references .genially { width:100%; }

article#page-valeurs { padding:2em 0; }
article#page-valeurs .liste { width:100%; }
article#page-valeurs img.visuel { width:100%; margin-left:0; }

article#page-postulez div.intro { margin-left:0; padding-left:0; border-left:0; }

article#page-equipe ul.blocliste > li { width:100%; margin:2em 0; }
article#page-bureaux ul.blocliste > li { width:100%; padding-bottom:100%; margin:2em 0; }
article#page-bureaux ul.blocliste > li > div { padding:0 2em; }
article#page-bureaux ul.blocliste h3 { font-size: 2.2em; margin-top:1.4em;  }

article#page-chasse { padding:2em 0; }

article#page-transition .intro { padding-right:0; padding-top:2em; }
article#page-transition h2 { font-size:2.5em; }

article.blocprocess { padding-top:2em; padding-bottom:1em; }
article.blocprocess h2 { font-size:2.5em; }
article.blocprocess ul.blocliste { min-height:78em; }
article.blocprocess ul.blocliste li h3 { max-width:100%; }
article.blocprocess ul.blocliste li span { max-width:calc(100% - 1em); }
article.blocprocess ul.blocliste li .detail { width:100%; top:36em; width:100%; }
article.blocprocess ul.blocliste li .descriptif { width:100%; }
article.blocprocess ul.blocliste li .visuel { top:17em; }

article#page-mobilite-recrutement div.intro { padding-top:2em; margin-left:0; padding-left:0; border-left:0; }

article#page-coaching h2 { font-size:2.5em; }
article#page-coaching ul.blocliste img.visuel { left:50%; transform:translateX(-50%); width:15em; }
article#page-coaching ul.blocliste .detail { padding-left:0; padding-top:15em; }

article#page-postes h2 { font-size:2.5em; }

.interne.job main h1 { bottom:2.5em; font-size:2em; }
article#page-job div.detail > div:not(.carte):nth-of-type(2) h3 { font-size:2em; }

article#page-spontanee h2 { font-size:2.5em; }

article#page-rejoindre div.intro { margin-left:0; padding-left:0; border-left:0; }

article#page-confier { padding-top:2em; }

article#page-golf { padding-top:2em; }
article#page-golf .mainbtn:last-of-type { margin-left:0; margin-bottom:4em; }
article#page-golf-client h2 { font-size:2.5em; }
article#page-golf-candidat h2 { font-size:2.5em; }
article#page-golf-contact div.intro { margin-left:0; padding-left:0; border-left:0; }

article.titrelanding h1 { font-size:3em; }

article.entetelanding h2 { font-size:2.2em; padding-top:1em; }

article.specificiteslanding { margin-top:2em; margin-bottom:2em; }
article.specificiteslanding h2 { font-size: 2em; }

article.metierslanding h2 { font-size:2.2em; padding-top:1em; }

article.chiffreslanding h2 { font-size:2.2em; padding-top:1em; }

article.enjeuxlanding { padding-bottom:2em; }
article.enjeuxlanding .col { margin-top:2em; }

#page-detailmag .back { margin:2em 0 2em 5%; }
#page-detailmag > div { width:90%; }


article.mentionslegales > .liquide { padding:4em 2em; }

	/* FOOTER */
	footer { text-align:center; }

footer ul.certifications { right:1em; }
footer ul.certifications > li.frenchfab > a { height:5em; }
footer ul.certifications > li.ecovadis > img { height:3.5em; }

footer aside.contact { margin-bottom:4em; }
footer aside.contact h2 { font-size: 2.2em; }
footer aside.contact div { margin-bottom:2em; }

footer .coords { width:100%; }
footer nav { padding-left:1em; padding-right:1em; }


	footer .copyright { margin-top:3em; padding-bottom:3em; }
	footer .copyright > span, footer .copyright > a { display:block; text-align:center; padding-bottom:2em; padding-left:0; }
	footer .copyright > span:first-of-type { padding-bottom:4em; }
	footer .copyright ul > li { display:block; text-align:center; }
	

	section#page-authentification { width:80%; }
}

/* AFFICHAGE MINI */
@media (max-width:300px) { 
	body { overflow-x:scroll; }
	html { font-size:9px; }
	#en2mots { width:300px; }
	header { width:300px; position:relative; }
	main { width:300px; margin-top:0 !important; }
	footer { width:300px; }
}