/* Réinitialisation des marges et paddings */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%; /* Assure que le body et html occupent toute la hauteur de l'écran */
    min-height: 100%; /* Assure qu'ils grandissent pour des pages plus longues */
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif; /* Applique Montserrat par défaut */
    line-height: 1.6;
    overflow-y: auto; /* Permet le défilement */
}

/* ===================
   BODY & BACKGROUND
   =================== */
body {
    background-image: url("../img/background.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Garde l'image fixe au défilement */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Espace entre le contenu et le footer */
    align-items: center;
    color: #ffffff; /* Texte blanc */
}

.container {
    width: 80%;
    margin: auto;
    padding: 20px;
    flex: 1; /* Cela permet à .container de prendre tout l'espace vertical disponible */
}

/* ===================
   HEADER STYLES
   =================== */

header {
    background: rgba(53, 66, 74, 0.8);
    color: #ffffff;
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
    height: 50px;
    width: auto;
    display: block;
}

.orange {
    color: #e8491d;
}

.italic {
    display: inline-block;
    transform: skewY(-15deg);
}

header a {
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 16px;
    transition: color 0.3s ease;
    padding: 0 15px;
}

header a:hover {
    color: #e8491d;
}

header a:focus {
    outline: 2px solid #e8491d;
}

header ul {
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    width: 100%;
}

header ul li {
    display: inline;
    padding: 0 20px;
}

header h1 {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    margin: 0;
    display: inline-block;
    flex-grow: 1;
}

/* Logo */

.logoEIT {
    position: fixed; /* Fixe le logo en haut à gauche */
    top: 50px; /* Décale le logo de 25px du haut de l'écran */
    left: 10px; /* Décale le logo de 20px du côté gauche */
    width: 100px; /* Taille du logo réduite */
    height: auto; /* Garde les proportions du logo */
    z-index: 1000; /* Assure que le logo est au-dessus du contenu */
    transform: translateY(-50%); /* Ajuste le logo pour qu'il soit parfaitement centré verticalement */
}

header .container {
    position: relative; /* Cela permet au contenu du header de se positionner au-dessus du logo si nécessaire */
    padding-left: 50px; /* Ajoute de l'espace à gauche pour éviter que le logo chevauche le texte du menu */
}

nav {
    position: relative; /* Assure que le menu de navigation se trouve bien en dessous du logo */
}

/* ===================
   SECTION "INDEX"
   =================== */
.about {
    width: 80%;
    max-width: 1200px;
    margin: 40px auto;
    background-color: rgba(53, 66, 74, 0.8);
    color: #ffffff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.about .section-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
}

.about .section-description {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    line-height: 1.6;
    text-align: justify;
    margin-bottom: 20px;
}

/* ===================
   SECTION "LOCATOR"
   =================== */

gmpx-store-locator {
  width: 100%;
  height: 100%;

  /* These parameters customize the appearance of Locator Plus. See the documentation at
     https://github.com/googlemaps/extended-component-library/blob/main/src/store_locator/README.md
     for more information. */
  --gmpx-color-surface: #fff;
  --gmpx-color-on-surface: #212121;
  --gmpx-color-on-surface-variant: #757575;
  --gmpx-color-primary: #1967d2;
  --gmpx-color-outline: #e0e0e0;
  --gmpx-fixed-panel-width-row-layout: 28.5em;
  --gmpx-fixed-panel-height-column-layout: 65%;
  --gmpx-font-family-base: "Roboto", sans-serif;
  --gmpx-font-family-headings: "Roboto", sans-serif;
  --gmpx-font-size-base: 0.875rem;
  --gmpx-hours-color-open: #188038;
  --gmpx-hours-color-closed: #d50000;
  --gmpx-rating-color: #ffb300;
  --gmpx-rating-color-empty: #e0e0e0;
}

/* ===================
   SECTION "QUI SUIS-JE"
   =================== */
.ME {
    width: 80%;
    max-width: 1200px; /* Uniformisé avec "À propos" */
    margin: 40px auto;
    background-color: rgba(53, 66, 74, 0.8);
    color: #ffffff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    text-align: center; /* Optionnel : dépend du style souhaité */
}

.ME .section-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 36px; /* Uniformisé avec "À propos" */
    font-weight: 700;
    text-align: center; /* Assure la cohérence */
    margin-bottom: 20px;
}

.ME .section-description {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px; /* Uniformisé avec "À propos" */
    line-height: 1.6;
    text-align: justify; /* Cohérent avec "À propos" */
    margin-bottom: 20px;
}

/* Conteneur pour l'image */
.ME .image-container {
    position: relative;
    width: 80%; /* L'image occupe 80% du conteneur */
    margin: 0 auto;
    cursor: pointer;
}

/* Image */
.ME .timeline-image {
    width: auto; /* Garde les proportions naturelles */
    height: 400px; /* Hauteur fixe */
    max-width: 100%; /* S'assure que l'image ne dépasse pas la largeur du conteneur */
    object-fit: cover; /* Ajuste l'image pour remplir sans déformer */
    transition: transform 0.3s ease; /* Effet de zoom au clic */
}

/* Agrandissement au clic */
.ME .image-container.clicked .timeline-image {
    width: 100vw; /* Prendre toute la largeur de l'écran */
    height: 100vh; /* Prendre toute la hauteur de l'écran */
    object-fit: contain; /* Conserver les proportions de l'image */
    position: fixed; /* Fixer l'image à l'écran */
    top: 0;
    left: 0;
    z-index: 1000; /* Passer au-dessus de tout autre contenu */
}
/* ===================
   SECTION "WHY CHOOSE EFFICACIT"
   =================== */

/* Uniformiser la police sur toute la page */
body {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px; /* Taille par défaut */
    line-height: 1.6; /* Espacement pour le confort de lecture */
    color: #333; /* Couleur par défaut pour le texte */
    margin: 0;
    padding: 0;
}

.benefits-list {
    list-style: none; /* Supprime les points par défaut */
    padding: 0;
    margin: 0;
}

.benefits-list li {
    margin: 10px 0; /* Espacement entre les éléments */
    display: flex; /* Aligne les icônes et le texte */
    align-items: center; /* Centre verticalement */
    font-size: 18px; /* Taille du texte */
}

.benefits-list li span.checkmark {
    line-height: 1; /* Assure un bon alignement vertical */
}

.benefits-list .checkmark {
	color: #e60000; /* Couleur du checkmark */
    font-size: 20px; /* Augmente la taille */
	font-weight: bold;
    margin-right: 10px; /* Ajuste l'espacement avec le texte */
    vertical-align: middle; /* Aligne verticalement avec le texte */
}

/* ===================
   SECTION "SERVICES"
   =================== */
.services {
    margin: 40px 0;
}

.services h2 {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    text-align: center;
    margin-bottom: 40px;
    color: #ffffff;
    background-color: rgba(53, 66, 74, 0.8);
    font-size: 36px;
    font-weight: bold;
    padding: 15px 30px;
    border-radius: 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    border-bottom: 4px solid #e8491d;
}

.service-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.service-item {
    background: rgba(255, 255, 255, 0.7);
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    color: #000000;
}

.service-item h3 {
    color: #007bff;
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    text-align: center;
}

.service-item p {
    color: #000000;
    font-size: 18px;
}

/* Aligner le dernier rectangle sur la colonne du milieu */
.service-list .service-item:last-child {
    grid-column: 2 / 3;
}
/* ===================
   SECTION "CONTACT"
   =================== */
.contact-section {
    width: 60%;
    max-width: 1000px;
    margin: 40px auto;
    background-color: rgba(53, 66, 74, 0.8);
    color: #ffffff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.contact-form {
    display: flex;
    flex-direction: column;
}

.contact-form label {
    color: #ffffff;
    margin-top: 10px;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
    width: 100%;
    padding: 10px;
    margin: 10px 0 20px 0;
    border: 1px solid #A39480;
    border-radius: 4px;
    font-size: 16px;
    background-color: rgba(255, 255, 255, 0.9);
    color: #000000;
}

.contact-form textarea {
    resize: vertical;
}

.contact-form input[type="submit"] {
    background-color: #e8491d;
    color: #ffffff;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.contact-form input[type="submit"]:hover {
    background-color: #ff7f50;
}

/* ===================
   SECTION "LEGAL"
   =================== */
.legal a {
    color: #e8491d !important;
    text-decoration: none;
    transition: color 0.3s ease;
}

.legal a:hover {
    color: #ff7f50 !important;
}

/* Pour cibler les adresses e-mail (mailto) */
.legal a[href^="mailto:"] {
    color: #e8491d !important;
}

/* ===================
   FOOTER ST
   =================== */

footer {
    background: rgba(53, 66, 74, 0.8); /* Couleur de fond avec transparence (80%) */
    color: #ffffff; /* Couleur du texte dans le footer, ici blanc */
    font-family: "Montserrat", sans-serif; /* Police utilisée pour le texte du footer */
    text-align: center; /* Centre le texte horizontalement */
    padding: 10px 0; /* Ajoute un espace interne en haut et en bas */
    width: 100%; /* La largeur du footer est de 100% */
    height: auto; /* Ajuste la hauteur */
    margin-top: auto; /* Pousse le footer vers le bas de la page */
    
    display: flex; /* Active le modèle de mise en page Flexbox */
    justify-content: center; /* Centre horizontalement le contenu dans le footer */
    align-items: center; /* Centre verticalement le contenu dans le footer */
}

a:hover {
    color: #ffffff; /* Les liens deviennent blancs au survol */
}

/* Styles responsives */
@media (max-width: 768px) {
    .container {
        width: 90%; /* Utiliser une largeur plus grande pour les petits écrans */
    }

    header {
        flex-direction: column; /* Empiler les éléments dans le header */
        height: auto; /* Ajuster la hauteur */
    }

    header ul {
        flex-direction: column; /* Menu vertical */
        align-items: center; /* Centrer les éléments */
    }

    header ul li {
        margin-bottom: 10px; /* Espacement entre les éléments du menu */
    }

    .section-title, .subsection-title {
        font-size: 28px; /* Réduire la taille des titres */
    }

    .section-description, .why-us-content p {
        font-size: 18px; /* Réduire la taille du texte */
    }

    .service-list {
        grid-template-columns: 1fr; /* Une colonne pour les petits écrans */
    }

    header a {
        font-size: 14px; /* Réduire la taille des liens du menu */
    }
}