/***********************************************************************************************
 *     LAURENT'S CARS
 * Site : laurents-cars.fr
 * Gestion de mise en forme
 * version 1
 * *********************************************************************************************/
 
 /* PARTIES COMMUNES A TOUTES LES PAGES 
  * - Header + Menu principal
  * - barre de navigation
  * - footer + menus d'informations
  * 
  * Mise en page sur PC
  */
 
 
 /***** container global ************/
.container-nav {
    display: flex;
    align-items: center;
}

/******* HEADER * Container + Logo + menu principal */

.container-header {
	height: 90px;
	
}
	
.logo-menu {	/* Logo LSC*/
    width: 180px;
    height: auto;
    display: block;
    margin-right: 30px;
}

.mod-menu {
    display: flex;
    align-items: start;
    font-size: 10px;
    line-height: 1;
    
}

/*******  Indicateur de navigation *****************/

.breadcrumbs {	/* barre de nagigation */
	padding-top: 0rem !important;
	padding-bottom: 0rem !important;
}

/****** PIED DE PAGE : Footer :container + menus de footer *****/

/* Ciblage du conteneur du footer Cassiopeia */
.container-footer {
  display: flex;
  flex-direction: row;
  gap: 30px;                      /* Espace minimum de sécurité entre deux menus */
  flex-wrap: wrap;                /* Permet de passer à la ligne proprement si l'écran est trop petit */
}
.grid-child {
	justify-content: left !important;
	
}
.footer {
	background-image: none;
}

/* Ciblage de chaque bloc de menu (actuels et futurs) dans le footer */
.container-footer .card,
.container-footer [class^="mod-"] {
  flex: 1;                        /* Force une répartition strictement identique de la largeur */
  min-width: 180px;               /* Empêche les menus de devenir trop étroits et illisibles */
}
.titre_basdepage {					/* Titre des menus de bas de page */
	font-size: 12px;
	font-weight: bold;
	margin-bottom: 0px;
}
.mod-menu-footer {					/* modules contenant les menus de bas de page */
	font-size: 10px;
	align-items: left !important;
}


body.itemid-101 {
    min-height: auto !important;	/* A VOIR L'UTILITE */
}


body.itemid-101 .site-grid {
    margin-bottom: 0 !important;	/* A VOIR L'UTILITE */
}

/*******************************************************
 * DESCRIPTEUR PAR PAGE WEB
 * 
 * Mise en page sur PC
 *******************************************************/


/********** PAGE ACCUEIL ********************/

/* Module : titre sur l'image */
.accueil-bloc-principal {
    width: 100%;
}

/* Message superposé sur la photo de home page */
#mod-custom115 {
	position: absolute;
	top: 30%;
	width: 50%;
	text-align: center;
	color: white;
	font-size: 52px !important;
	font-weight: bold;
}

.accueil-row {
	display: flex;
    flex-wrap: wrap;       /* passe en colonne si pas assez de place */
    align-items: flex-start;
    gap: 20px;
    width: 100%;
}

/* Module : Message d'accueil */
.accueil-module-113 {
	border: 2px solid red;
    width: 48%;
    padding: 10px;
    min-width: 0;      /* ajouté : autorise le flex item à se compresser sous son contenu */
    overflow: hidden;  /* ajouté : masque tout débordement du carrousel à 620px */
}

/* Image de façade du garage */
.image-facade {
    height: auto;
    padding: 5px;
 }

/* Module : bandeau icônes prestations */

/* TABLEAU DES PRESTATIONS */
.prestations-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin: 20px 0 0 0;
    background-color: #000000;
    border: none;
}

.prestations-table td {
    width: auto;
    border-collapse: collapse;
    table-layout: fixed;
    padding: 5px;
    text-align: center;
    vertical-align: bottom;
    border: none;
	color: red;
	font-weight: bold;
}

.prestations-table img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* A SUPPRIMER ???? */
/*}
#accueil-module-113 {
		border: 2px solid red;
		width: 100%;
		padding: 5px;
}

	.image-facade {
		width: 100%;
		height: auto;
		padding: 5px;
		position: static;
		transform: none;
		
	}

	.prestations-table {
		font-size: 10px;
	}

/********** PAGE ENTREPRISE ********************/
  
/******* module Affichage des horaires *****/
body.itemid-3 .com-content-article__body {
	display: flex;
}
#mod-custom120 {
	position: relative;
	font-size: 20px;
	width: 30%;	
}

table.moduletable.mod-horaires {
	position: relative;
	font-size: 12px;
	width: 30%;	
}
.OpeningHoursTimetable_timetable__oHG4F {
	font-size: 14px;
	width: 100%;
}

/*** Carte google Maps - Localisation ****/
#mod-custom121 {
	position: relative;
	width: 600px;
	height: 400px;
}
.maps-google {
	width: 100%;
	height: 380px;
}
/******************************************/
/* module prestation
 */
.mod-prestation {
	position: relative;
	align-items: center !important;
	display: flex;
	font-family: arial;
	font-size: 16px;
	text-align: justify;
	width: 100%;
	margin-bottom: 45px;	
}
.img-presta_i {			/* image cadrée à gauche sur ligne Impaire*/
	width: 80%;
	padding-left: 5px;
	box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.25);
}

.img-presta_p {			/* image cadrée à droite  sur ligne paire*/
	display: block;
	margin-left: auto;
  	width: 80%;
	box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.25);
}
/******************************************/


	








/* ================================
   FORMULAIRE DE CONTACT
   ================================ */
.site-grid {
	background-color: beige;
}
.com-customizableform {
    position: relative;
}

/* Création d'une zone à droite pour le logo */
.com-customizableform form {
    position: relative;
    padding-right: 360px;
}

/* Affichage du logo */
.com-customizableform form::after {
    content: "";
    position: absolute;
    top: -25px;
    right: 370px;
    width: 370px;
    height: 300px;
    background-image: url("/images/logos/Logo%20Laurents%20Cars%20V2.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Sur tablette et mobile :
   le logo revient au-dessus du formulaire */
@media (max-width: 900px) {
    .com-customizableform form {
        padding-right: 0;
    }

    .com-customizableform form::after {
        position: absolute;
        display: block;
        top: -152px;
        right: 30px;
        width: 140px;
        height: 220px;
        margin: 20px auto 30px;
        
    }
}


	

 
 
 
/**********************************************************************/
/* ***************************
 * Propriétés sur smartphone *
 * ***************************/
@media (max-width: 768px) {
	.container-header {
		height: 90px;
	}
	
	/*************************************
	*   HEADER 
	* commun à toutes les pages
	*************************************/
	/**** logo header *************/
	#mod-custom119 {
		position: relative;
		font-size: 12px;
		width: 30%;	
	}
	.mod-menu {
		position: absolute;
		display: flex;
		margin-left: 200px !important;
		align-items: center;
		Padding-left: 200px;
		font-size: 10px;
		line-height: 1;
	}

	.accueil-bloc-principal {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
	}
	/*************************************
	*   FOOTER 
	* commun à toutes les pages
	*************************************/
	.container-footer {
		width: 100%;
/*
		flex-direction: column;       /* Empile les menus verticalement sur mobile 
*/
		gap: 20px;
	}
	
	.footer .grid-child {
		align-items: start !important;
		width: 100%;
		flex-direction: row !important;
	}
	
	.footer {
		background-image: none;
		width: 100%;
	}
	.no-card {
		width: 30%;
	}
	  
	.nav-item {
		width: 150px;
	}
	.titre_basdepage {					/* Titre des menus de bas de page */
		font-size: 10px;
		font-weight: bold;
		margin-bottom: 0px;
	}
	.mod-menu-footer {					/* modules contenant les menus de bas de page */
		font-size: 10px;
		align-items: left !important;
	}
	#mod-menu131 {
		width:50%;
		left: -400px;
		Align-items: last-baseline;
	}
	#mod-menu133 {
		width:50%;
		left: -400px;
		Align-items: last-baseline;
	}
/************ PAGE ACCUEIL ****************	  
	/* Page Accueil: Module : Message d'accueil */
	.accueil-module-113 {
		border: 2px solid red;
		width: 100%;
		padding: 5px;
	}

	.image-facade {
		width: 100%;
		height: auto;
		padding: 5px;
		position: static;
		transform: none;
		
	}
	#mod-custom115 {
		position: absolute;
		margin-top: -80px;
		top: 30%;
		left: 20%;
		transform: translate(-30%, -42%);
		width: 90%;
		z-index: 10;
		text-align: center;
		color: white;
		font-size: 21px !important;
		font-weight: bold;
	}
	.prestations-table {
		font-size: 10px;
	}
	
	/***** PAGE ENTREPRISE **********/
	/* module Horaires */
	#mod-custom120 {
		font-size: 9px;
		position: relative;
		width: 100%;
	}
	/* Carte google Maps - Localisation */
	#mod-custom121 {
		position: relative;
		width: 100%;
		height: 150px;
	}
	/***** PAGE PRESTATIONS **********/
	/* module prestation */
	
	.mod-prestation {
		position: relative;
		display: flex;
		flex-direction:column;
		font-size: 10px;
		width: 100%;	
	}
	.img-presta {
		padding-left: 5px;
		padding-right: 5px;
		width: 100%;
	}	
}
/**************************************/