@charset "utf-8";

/* =========================================================================
   Conseils & Mandats - couche de modernisation.
   Chargée APRÈS style.css et simple_menu.css.

   1. Reprend à l'identique les styles qui étaient écrits en attribut style=""
      dans le HTML, afin que le rendu desktop reste strictement inchangé.
   2. Ajoute le comportement responsive (le site était figé à 960 px).
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Équivalents des anciens styles en ligne (rendu desktop identique)
   ---------------------------------------------------------------------- */

/* Les <h2> de contenu sont devenus des <h1> : on reprend exactement
   l'apparence que style.css donnait aux <h2>. */
#panes h1 {
	font-family: 'Quicksand', sans-serif;
	font-size: 1.8em;
	margin: 20px 0;
	padding: 0;
	color: #000;
	font-weight: normal;
}

/* Les <h3> du pied de page sont devenus des <h2> (hiérarchie correcte). */
#footer h2 {
	color: #000;
	font-size: 1.4em;
}

/* Colonne de texte / colonne d'illustration des pages intérieures :
   anciennement style="float:left;width:400px" et
   style="float:left;width:500px;margin-left:450px".
   Les sélecteurs reprennent #panes, sinon la règle "#panes div" l'emporte. */
#panes div.page_text {
	float: left;
	width: 400px;
}

#panes div.page_media {
	float: left;
	width: 500px;
	margin-left: 450px;
}

/* Ancien style="margin-top:-150px" sur #footer.
   Le sélecteur reprend l'id, sinon la règle "margin" de #footer l'emporte. */
#footer.site_footer {
	margin-top: -150px;
}

/* Ancien style="float:left;font-size:11px;margin-left:670px;margin-top:-50px". */
.lang_switch {
	float: left;
	font-size: 11px;
	margin-left: 670px;
	margin-top: -50px;
}

/* Ancien style="width:200px" du bloc partenaires de la page d'accueil
   (élément inline : la largeur n'a jamais eu d'effet, on ne change rien). */
.home_partners {
	width: 200px;
}

/* <main> reste un simple bloc, comme les <div> qu'il remplace. */
main {
	display: block;
}

/* -------------------------------------------------------------------------
   2. Accessibilité
   ---------------------------------------------------------------------- */

.skip_link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: #EF3B24;
	color: #fff;
	padding: 10px 15px;
	z-index: 10000;
}

.skip_link:focus {
	left: 0;
	color: #fff;
}

#menu a:focus-visible,
#container a:focus-visible,
#footer a:focus-visible,
.contact_form input:focus-visible,
.contact_form textarea:focus-visible {
	outline: 2px solid #EF3B24;
	outline-offset: 2px;
}

/* Piège à robots du formulaire de contact : invisible pour les visiteurs. */
.cm_hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form_error {
	color: #EF3B24;
	font-weight: bold;
}

/* -------------------------------------------------------------------------
   3. Confort de lecture et formulaire
   ---------------------------------------------------------------------- */

img {
	max-width: 100%;
	height: auto;
}

/* Les champs gardent volontairement l'apparence native du navigateur,
   comme aujourd'hui : seul le curseur du libellé est ajouté. */
.contact_form label {
	cursor: pointer;
}

/* -------------------------------------------------------------------------
   4. Responsive - en dessous de 1020 px, la grille fixe est libérée.
      Au-dessus, aucune de ces règles ne s'applique : le design reste
      exactement celui d'origine.
   ---------------------------------------------------------------------- */

@media screen and (max-width: 1020px) {

	body {
		-webkit-text-size-adjust: 100%;
	}

	.header {
		width: auto;
		height: auto;
		padding: 0 15px;
		overflow: hidden;
	}

	#site_title {
		float: none;
		padding: 20px 0 10px;
		text-align: center;
	}

	#site_title img {
		float: none;
		display: inline-block;
	}

	/* Menu : passage en liste verticale, sous-menu toujours déplié
	   (pas de survol possible au doigt). */
	#menu {
		width: auto;
		float: none;
	}

	#menu li {
		float: none;
	}

	#menu a {
		float: none;
		display: block;
		padding: 12px 10px;
		border-bottom: 1px solid #ddd;
	}

	#menu ol {
		position: static;
		opacity: 1;
		visibility: visible;
		margin: 0;
		box-shadow: none;
		border-radius: 0;
		transition: none;
	}

	#menu ol a {
		width: auto;
		display: block;
		padding: 10px 10px 10px 30px;
		background: #f7f7f7;
		white-space: normal;
	}

	#menu ol li {
		box-shadow: none;
	}

	#menu ol li:first-child > a,
	#menu ol li:last-child > a {
		border-radius: 0;
	}

	#menu ol li:first-child > a:after {
		display: none;
	}

	.lang_switch {
		float: none;
		margin: 0;
		padding: 12px 0 0;
		text-align: center;
	}

	#container {
		width: auto;
		max-width: 960px;
		padding: 20px 15px;
	}

	#prod_wrapper {
		height: auto;
		margin-bottom: 20px;
	}

	#panes {
		width: auto;
		height: auto;
		margin-bottom: 0;
		padding-bottom: 0;
	}

	/* Les panneaux étaient superposés en absolu : ils se suivent désormais. */
	#panes div {
		position: static;
		width: auto;
		padding-right: 0;
	}

	#panes img {
		float: none;
		display: block;
		margin: 0 0 20px;
	}

	#panes div.page_text,
	#panes div.page_media {
		float: none;
		width: auto;
		margin-left: 0;
	}

	#panes div.page_media {
		margin-top: 25px;
	}

	.home_partners {
		display: block;
		width: auto;
		margin-top: 25px;
	}

	/* Formulaire de contact : les anciennes colonnes flottantes s'empilent. */
	.contact_form div {
		float: none !important;
		width: auto !important;
		margin: 0 !important;
		line-height: 1.8 !important;
	}

	.contact_form div div {
		text-align: left !important;
	}

	.contact_form input[type="text"],
	.contact_form input[type="email"],
	.contact_form textarea {
		box-sizing: border-box;
		width: 100% !important;
		max-width: 420px;
	}

	.contact_form textarea {
		height: 140px !important;
	}

	.contact_form label {
		display: inline-block;
		margin-top: 10px;
		font-weight: bold;
	}

	#footer.site_footer {
		width: auto;
		margin: 20px 15px;
	}

	#footer .one-fourth {
		float: none;
		width: auto;
		margin: 0 0 25px;
		padding-top: 0;
	}

	#footer .one-fourth:last-child {
		margin-bottom: 0;
	}
}

@media screen and (max-width: 600px) {

	#site_title img {
		max-width: 180px;
	}

	h1 {
		font-size: 26px;
		padding: 10px 0;
	}

	#panes h1 {
		font-size: 1.5em;
	}

	#container {
		padding: 15px 12px;
	}
}