@viewport {
	width: device-width;
	zoom: 1;
}
:root {
	--blue: #1153AD; //#1051AD;
	--pink: #B60009;
	--bg-blue: #4A84BD;
	--bg-green: #93D152;
	--bg-pink: #FF7B82;
	--bg-yellow: #FFFF01;
	--bg-orange: #FFCC01;
}

/* general rules */

html {
	/*overflow: hidden;*/
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto; /* Désactive l'effet de défilement doux */
  }
}


body {
	/*scroll-snap-type: y mandatory;
	scroll-snap-stop: always;
	height: 100vh;
	overflow-y: scroll;*/
	font-family: Verdana, Helvetica, Arial, sans-serif;
	line-height: 1.5em;
	font-size: 1.1em;
	margin: 0;
	letter-spacing:.03em; /* .12em */
	word-spacing:0.16em;
}

p{margin-bottom: 2em}

a {
	color: var(--blue);
	text-decoration: underline;
}

a:hover, a:focus {
	color:var(--pink);
	text-decoration: none;
}

div.button {
	text-align: center;
}
a.button {
	min-height: 44px;
	line-height: 44px;
	clear: both;
	display: inline-block;
	margin-left: auto;
	padding: 5px 20px;
}

.pink-emphasis {
	border-radius: 30px;
	border-left: solid var(--bg-pink) 5px;
	border-right: solid var(--bg-pink) 5px;
}
.blue-emphasis {
	border-radius: 30px;
	border-left: solid var(--bg-blue) 5px;
	border-right: solid var(--bg-blue) 5px;
}
.green-emphasis {
	border-radius: 30px;
	border-left: solid var(--bg-green) 5px;
	border-right: solid var(--bg-green) 5px;
}
.yellow-emphasis {
	border-radius: 30px;
	border-left: solid var(--bg-orange) 5px;
	border-right: solid var(--bg-orange) 5px;
}

a.button:hover {
	text-decoration: none;
}


/* navigation */

/*
nav#skip ul {
	flex: 1 1 auto;
}*/

nav ul {
	flex-wrap: wrap;
	list-style-type: none;
	padding: 0;
	margin: 0;
	display: inline-flex;
}

nav li {
	/*flex: 0 0; pourquoi supprimer?
	align-self: flex-end;*/
	white-space: nowrap;
	display: block;
	padding-right: 1em;
}

#accessibility, #language {
	flex: 0 1;
	font-size: 0.9rem;
}

#lang {
	padding-right: 10px;
	text-align: right;
}

header div.row {
	border-left: solid var(--bg-green) 50px;
	padding: 0 0 3px 10px;
}

main {
	border-left: solid var(--bg-blue) 50px;
}

.blue-spacer {
	content: "";
	display: block;
	background: var(--bg-blue);
	margin-left: 50px;
	height: 10px;
}

.pink-spacer {
	display: block;
	background: var(--bg-pink);
	height: 10px;
}


.row {
	display: flex;
	flex-wrap: wrap;
	/*justify-content: center;*/
	justify-content: space-around;
}

.col {
	flex: 1 0 0;
}

header #skip, header #lang {
	flex: 1 1;
}
header #lang {
	margin-right: 0;
}

header #logo {
	flex: 0 1 200px;
	margin-left: 10px;
	margin-right: auto;
	min-height: 40px;
	padding: 4px 10px 0 0;
}
header #logo img {
	width: 200px;
	max-width: 60vw;
	margin: 0;
	padding: 0;
	vertical-align: middle;
}

header #btnmenu {
	min-height: 44px;
	min-width: 44px;
	margin-left: auto;
	margin-right: 5px;
	border: solid white 2px;
	background-color: #DAE6F2;
	padding: 0 10px;
	height: 2em;
	font-size: 1.3em;
	border-radius: 5px;
	flex-basis: min-content;
	white-space: nowrap;
	display: none;
}

/* menu haut */

.fixed-nav #nav-bar {
	position: fixed;
	top: 0;
	width: 100%;
	background:white;
}

#nav-menu {
	display: contents;
}

#top-menu {
	flex: 1 1 auto;
	margin-right: auto;
	margin-left: 10px;
	align-self: flex-end;
	font-size: 1rem;
}

#top-menu ul {
	flex-wrap: wrap;
}

/* #top-menu a::before {
	content:'';
	position: absolute;
	width: 100%;
	height: 44px;
	border: solid red 1px;
}*/

#top-menu a {
	margin-top: 10px;
	margin-bottom: -10px;
	min-height: 44px;
	display: inline-block;
}

#top-menu a span {
	background: white;
	font-weight: bold;
	text-decoration: none;
	padding: 3px 5px 0;
	display: inline-block;
	border: solid transparent;
	border-width: 1px 1px 3px 1px;
	border-radius: 4px;
}

#top-menu a[aria-current] span {
	padding: 3px 5px 0;
	border: solid #FF5B63;
	border-width: 1px 1px 3px 1px;
	font-weight: bold;
}

#top-menu a:hover:not([aria-current]) span, #top-menu a:focus span {
	border-bottom: solid var(--bg-blue) 3px;
}

/* langues */
#language li a {
	display: inline-block;
	min-height: 44px;
/*	padding-bottom: 20px;
	margin-bottom: -22px;*/
}

#language li a span {
	border: solid transparent 2px;
	padding: 0 0px;
	display: inline-block;
	border: solid transparent 2px;
}

#language li a[aria-current] span {
	border: solid var(--blue) 2px;
	background: var(--blue);
	color: white;
	border-radius: 0 0 4px 4px;
	text-decoration: none;
	padding: 0 10px;
}


#language li a[aria-current] {
}

/* wrappers */

.bg-grey {
	background: #fafafa;
}

/* hero */

h1, h2 {
	color: var(--blue);
}
h1 {
	font-size: 2.1rem;
	line-height: 1.5em;
	font-weight: normal;
	margin-top: 0;
}

.hero {
	background-position: right;
	background-color: #E3E9F3;
	background-image: url('img/hero.jpg');
	background-size: contain;
	background-size: 550px;

	background-repeat: no-repeat;
	/*max-height: 100vh;*/
}

.training .hero {
	background-image: url('img/trainingb.jpg');
}

.audit .hero {
	background-image: url('img/audit.jpg');
}

.advices .hero {
	background-image: url('img/advicesb.jpg');
}

.hero .content {
	padding: 1em;
	/*background: hsla(0,0%,0%,0.65);*/
	/*background: hsla(0,0%,0%,0.65);*/
	width: auto;
	color: white;
	word-wrap: break-word;
}

.hero-inner {
	background: hsla(0,0%,100%,0.95);
	border-radius: 20px;
	width: 50%;
	color: black;
	padding: 50px;
	line-height: 1.5em;
	font-size: 1.5rem;
	font-weight: normal;
}

.hero em {
	display: block;
	text-align:right;
	margin-top:1em
}

/*
header, main, footer, h2, .row {
	scroll-snap-align: start;
}*/

h2 {
	margin: 2em 0;
	text-align: center;
	font-weight: normal;
	font-size: 2rem;
	line-height: 1.5em;
	color: var(--blue);
}

h2 {
	background-image: url('img/logo-square.svg');
	background-size: 30px;
	background-repeat: no-repeat;
	padding-bottom: 40px;
	background-position: bottom center;
}

.full-page {
	padding: 20px;
}
.full-page h2 {
	padding: 0 0 0 40px;
	margin: 1em 0 0 0;
	background-position: center left;
	text-align: left;
}


.midhero-text {
	text-align:center;
	margin: 0 auto 50px;
	width: 50%;
	font-size: 1.3rem;
	line-height: 1.5em;
}


/* blocs */
.col-4 {
	flex: 1;
	width: 25%;
	max-width: 500px;
	margin-bottom: 50px;
}

.col-3 {
	flex: 1;
	width: 33%;
	margin: 0 50px 50px;
}

.block {
	border-radius: 3px;
	margin: 0 20px;
	box-shadow: 0 5px 32px rgba(0,0,0,0.2);
	background: white;
	height: 100%;
}

.services {
	max-width: 1500px;
	margin: 0 auto;
}

.service:before {
	display: block;
	width: 100%;
	content:"";
	height: 0;
	padding-top: 66%;
	background-size: 100%;
	background-repeat: no-repeat;
}

.service ul {
	margin-bottom: 4em;
}

.audit:before {
	background-image: url('img/audit.jpg');
}

.management:before {
	background-image: url('img/advicesb.jpg');
}

.training:before {
	background-image: url('img/trainingb.jpg');
}

.tools:before {
	background-image: url('img/home/seo.png');
}

.audit .block-1:before {
	background-image: url('img/sprite-audit1.jpg');
}
.audit .block-2:before {
	background-image: url('img/sprite-audit2.jpg');
}
.audit .block-3:before {
	background-image: url('img/sprite-audit3.jpg');
}
.audit .block-4:before {
	background-image: url('img/sprite-audit4.jpg');
}

.advices .block-1:before {
	background-image: url('img/advices1.jpg');
}
.advices .block-2:before {
	background-image: url('img/advices2.jpg');
}
.advices .block-3:before {
	background-image: url('img/advices3.jpg');
}
.advices .block-4:before {
	background-image: url('img/advices4.jpg');
}

.training .block-1:before {
	background-image: url('img/training1.jpg');
}
.training .block-2:before {
	background-image: url('img/training2.jpg');
}
.training .block-3:before {
	background-image: url('img/training3.jpg');
}
.training .block-4:before {
	background-image: url('img/training4.jpg');
}


.block h3 {
	color: var(--blue);
	font-weight: normal;
	font-size: 1.5rem;
	line-height: 1.5em;
	margin: 0;
}


.block .text-content {
	padding: 20px;
}

.block .text-content p {
	min-height: 10.5em;
}
.title {
	color: var(--blue);
	font-size: 1.5rem;
	line-height: 1.5em;
}

/* deco */
.square {
	margin: 20px auto;
	display: block;
	height: 6px;
	width: auto;
	border-radius: 10px;
}

.green {
	background-image: linear-gradient(to right, var(--bg-green), var(--bg-blue));
}
.yellow {
	background-image: linear-gradient(to right, var(--bg-yellow), var(--bg-green));
}
.pink {
	background-image: linear-gradient(to right, var(--bg-pink), var(--bg-yellow));
}
.blue {
	background-image: linear-gradient(to right, var(--bg-blue), var(--bg-pink));
}



/* media query */

@media screen and (max-width: 1200px) {
	.col-4 {
		min-width: 50%;
	}

	.col-3 {
		min-width: 30%;
	}
}
@media screen and (max-width: 800px) {
	.midhero-text {
		width: 90%;
	}
	.col-4 {
		min-width: 100%;
	}

	.col-3 {
		margin: 0;
		padding: 0 10px;
		min-width: 90%;
	}
	.col-4 .block {
		box-shadow: inherit;
		margin: 0 0 20px 0;
	}

	header, main {
		border-left-width: 5px;
	}
	.blue-spacer {
		margin-left: 5px;
	}

	nav li {
		padding-right: 5px;
	}

	.hero-inner {
		padding: 10px;
		width: auto;
	}

	/*#language li.active {
		border: solid black 2px;
	}*/
	.block .text-content p {
		min-height: 0;
	}
	header div.row {
		border-left:  solid var(--bg-green) 5px;
		padding-left: 10px;
		margin: 0 0 0 0;
	}

	header #btnmenu {
		display: block;
	}

	header #top-menu {
		display: none;
		min-width: 100%;
	}

	header #top-menu[aria-hidden="false"] {
		display: unset;
		transition-delay: 1s;
	}

}
@media screen and (max-width: 600px) {
	.help-links {
		background:  #DAE6F2;
	}
	.help-links a {
		color: black;
	}
}
@media screen and (max-width: 600px) {
	.help-links a {
		font-size: 0.7em;
	}
}


            /* formulaires */
            label {
                display: block;
                margin-bottom: 5px;
                font-weight: bold;
                clear: right;
            }

            input,textarea {
                font-family: inherit;
                font-size: inherit;
                line-height: inherit;
            }

            .form-control {
                display: block;
                width: 90%;
                height: 2em;
                padding: 6px 12px;
                font-size: 1em;
                color: #555555;
                vertical-align: middle;
                background-color: hsl(354, 100%, 98%);
                background-image: none;
                border: 2px solid var(--blue);
                border-radius: 4px;
                -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
                box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
                -webkit-transition: border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s;
                transition: border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s;
            }

		/*.form-control[required]:invalid {
			background-color: hsl(354, 100%, 93%);
		}*/
	    .token {
		position:absolute;
		left: -500px;
	    }

            .form-control:focus, .form-control:hover {
                -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(102,175,233,0.6);
                box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(102,175,233,0.6);
            }

            textarea {
                overflow: auto;
                vertical-align: top;
                min-height: 6em;
            }

            textarea.form-control {
                height: auto;
            }

            /* boutons */
            .btn {
                display: inline-block;
                padding: 6px 12px;
                margin-bottom: 0;
                font-weight: normal;
                text-align: center;
                white-space: nowrap;
                vertical-align: middle;
                cursor: pointer;
                background-image: none;
                border: 1px solid transparent;
                border-radius: 4px;
            }

            .btn:focus {
                outline: thin dotted;
                outline: 5px auto -webkit-focus-ring-color;
                outline-offset: -2px;
            }

            .btn:hover,.btn:focus {
                color: #333333;
                text-decoration: none;
            }

            .btn:active,.btn.active {
                background-image: none;
                -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
                box-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
            }

            .btn-default {
                color: white;
                background-color: var(--blue);
                border-color: var(--blue);
		border-size:3px;
            }

            .btn-default:hover,.btn-default:focus,.btn-default:active,.btn-default.active,.open .dropdown-toggle.btn-default {
                color: #333333;
                background-color: #ebebeb;
                border-color: #adadad;
            }
	    .submit-button { margin-top: 15px; }