/*	-------------------------------------------------------------
	OXALI DESIGN 2026 — ajouts pour le site « compagnie fermée »
	web.css (2006) reste intact ; ce fichier passe après lui.
	-------------------------------------------------------------	*/

		/* MENU DU HAUT : 4 liens, largeur selon le texte */
		#header_right { width: 560px; }

		#menu a.haut {
			display: block;
			float: left;
			height: 70px;
			padding: 0 12px;
			margin: 60px 0 0 0; }

		#menu a.actif { color: #383838; }

		a.mainlevel.actif:link, a.mainlevel.actif:visited { color: #383838; background: #e3e3e3; }

		/* TEXTE */
		#right-col h2 {
			font: 20px "trebuchet ms", verdana, sans-serif;
			color: #5D4E37;
			margin: 25px 0 0 0; }

		p.en {
			margin-top: 20px;
			padding-top: 15px;
			border-top: 1px solid #e3e3e3;
			color: #666; }

		#right-col ol { margin: 10px 0 0 30px; }

		#right-col li { padding: 2px 0; }

		/* BOÎTE « APPELEZ LE GARS DES STORES » */
		.appel {
			margin: 20px 0 10px 0;
			padding: 15px 20px;
			border: 1px solid #e3e3e3;
			background: #f2f2f2; }

			.appel h2 { margin-top: 0 !important; }

			.appel p { padding: 4px 0; }

		.tel a {
			font: 28px "trebuchet ms", verdana, sans-serif;
			color: #5D4E37;
			text-decoration: none; }

		.tel a:hover { text-decoration: underline; }

		/* CARTE DE LA COLONNE DE GAUCHE */
		.carte {
			width: 170px;
			margin: 0 0 30px 0;
			padding: 12px 15px;
			border-left: 3px solid #bbbf33;
			background: #f7f7f7;
			font-size: 0.9em;
			line-height: 150%; }

			.carte p { padding: 2px 0; }

			.carte .titre { font-weight: bold; color: #383838; }

			.carte .carte-tel a {
				font-size: 1.3em;
				color: #5D4E37;
				text-decoration: none; }

/*	-------------------------------------------------------------
	CELLULAIRE ET TABLETTE DEBOUT (899 px et moins)
	Une colonne, le texte garde sa taille, liens de 44 px au doigt.
	-------------------------------------------------------------	*/

@media (max-width: 899px) {

		#alignment, #container, #header, #header_right, #menu, #index_img,
		#footer, #footer_wapper, #left-col, #right-col {
			float: none;
			width: auto;
			height: auto; }

		#alignment { padding: 0 16px; }

		#container img { float: none; }

		#header { margin: 0 0 12px 0; }

		#header img { margin: 12px 0 0 0; }

		#header_right { padding: 0; text-align: left; }

		#menu { margin: 8px 0 0 0; height: auto; overflow: hidden; }

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

		#menu a.haut {
			height: 44px;
			line-height: 44px;
			margin: 0;
			padding: 0 10px; }

		#menu ul img { display: none; }

		#index_img { height: auto; }

		#index_img img { display: block; width: 100%; height: auto; }

		#content { display: flex; flex-direction: column; }

		#right-col { order: 1; padding: 20px 0 0 0; }

		#left-col { order: 2; padding: 0; }

		/* le menu du haut suffit au cellulaire ; la carte du Gars des Stores reste */
		#navigation { display: none; }

		.carte { margin-top: 10px; }

		/* zones au doigt : 44 px */
		.appel p a, .carte p a { display: inline-block; min-height: 44px; line-height: 44px; }

		#header > a { display: inline-block; }

		p.notice { font-size: 0.9em; }

		.carte { width: auto; }

		#footer { padding: 10px 16px 0 16px; }

		#footer_wapper { height: auto; padding: 8px 0; font-size: 12px; }

		#footer .left { float: none; padding: 0 15px; }
}