/* Variables et Reset pour le Thème Dynatrace/Tech */
:root {
    /*--color-background: #414f6a;  Fond sombre / Nuit */
	--color-background: #414f6a; /* Fond plus clair, lisible avec texte blanc */
    --color-primary: #ffffff; /* Texte clair */
    --color-secondary: #f2f2f2; /* Texte secondaire / Gris */
    --color-accent: #0087ff; /* Bleu vif (couleur d'accent Dynatrace) */
    --color-accent-teal: #00b3b3; /* AJOUTÉ: Teal pour le contraste */
    --color-border: #2c3e50; /* Ligne de séparation sombre */
   /* --font-inter: 'Inter', sans-serif; */
	--font-main: 'Montserrat', sans-serif;
    --max-width: 1200px;
    --spacing-lg: 100px;
    --spacing-md: 50px;
    --color-box-background: #1a2333; /* Pour sélecteur/solution boxes */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-main), sans-serif; /* Force la police sur TOUS les éléments */
}

html {
  scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-main);
    color: var(--color-primary);
    background-color: var(--color-background);
    line-height: 1.6;
    text-align: center;
    
    /* --- CONFIGURATION PLEINE LARGEUR --- */
    width: 100%;
    max-width: none; /* Supprime la limite des 1200px */
    margin: 0;       /* Supprime le centrage forcé de la boîte */
    padding: 0;      /* On gérera les espaces internes dans les sections */
    
    /* --- BACKGROUND --- */
    background-image: url("final_background_all_logos_transparent.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

/*
h1, h2, h3 {
    color: var(--color-primary);
}
*/

h1, h2, h3, .hero-title, .intro-title {
    color: var(--color-primary);
    font-family: var(--font-main);
    font-weight: 900;           /* Le poids maximum chargé dans votre HTML */
    /*text-transform: uppercase;  /* Majuscules pour le look premium */ 
    letter-spacing: 2px;        /* Espacement des lettres pour plus d'élégance */
}

p {
    font-weight: 400; /* Assure que le texte normal n'est pas en gras */
}

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color 0.3s;
}

a:hover {
    color: var(--color-primary);
}

/* --- Header (Logo & Navigation) --- */
.main-header {
    /*max-width: var(--max-width);
    /margin: 0 auto;
    padding: 20px 0px;*/
	padding-left: 30px;
    padding-right: 30px;
	/* Annule toute contrainte de largeur */
	max-width: 100%; 
	/* Force l'élément à prendre 100% de la largeur disponible */
	width: 100%;
    margin-left: 0;
    margin-right: 0;
	width: 100%; /* S'assurer qu'il prend toute la largeur */
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--color-accent);
}

/* styles.css : Bloc .logo img (ligne 49 environ) */
.logo img {
    /* La hauteur standard du logo que vous utilisez dans vos pages est 70px */
    max-height: 70px;
    height: 70px;   /* Fixe la hauteur désirée */
    width: auto;    /* Garde les proportions */
    display: inline-block;
    vertical-align: middle;
}

.nav-container {
    display: flex; /* ALIGNE la navigation et le sélecteur côte à côte */
    align-items: center;
    gap: 30px; /* Espace entre les deux */
}

/*
.main-nav a {
    color: var(--color-secondary);
    text-decoration: none;
    font-weight: 500;
    margin-left: 30px;
    transition: color 0.3s;
    font-size: 1rem;
	
}*/

.main-nav a {
    font-family: var(--font-main); /* Force Montserrat */
    color: var(--color-secondary);
    text-decoration: none;
    font-weight: 500; /* Poids intermédiaire pour la lisibilité */
    margin-left: 30px;
    transition: color 0.3s;
    font-size: 1rem;
    text-transform: uppercase; /* Pour le look "Apogée" même dans le menu */
    letter-spacing: 1px;       /* Un léger espacement pour l'élégance */
}


.main-nav a:hover, .main-nav a.active {
    color: var(--color-accent);
}

/* --- SÉLECTEUR DE LANGUE (MODIFIÉ: Drapeau + Code, Compact, TOUT À DROITE) --- */
.language-selector {
    position: relative;
    cursor: pointer;
    user-select: none;
    z-index: 20; 
    /* AJOUT CLÉ POUR ÉVITER LA DISPARITION : S'ASSURER QUE LA ZONE DE SURVOL EST CONTINUE */
    padding: 10px; /* Augmente la zone de survol autour du drapeau */
    margin: -10px 0; /* Compense le padding pour ne pas décaler l'en-tête */
    /* La position "tout à droite" est assurée par le justify-content: space-between du .main-header */
}

/* Langue active affichée: FLAG + CODE */
.lang-display {
    padding: 8px 12px; /* Rendu plus compact */
    background-color: var(--color-box-background);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px; /* Espace entre le drapeau et le code */
    color: var(--color-primary);
    transition: all 0.2s;
    line-height: 1.2; 
}

.lang-display:hover {
    border-color: var(--color-accent);
    background-color: #242d3d;
}

.lang-display .flag,
.language-dropdown .flag {
    font-size: 1.1rem; 
    line-height: 1; /* Assure le bon alignement vertical de l'emoji */
}

/* Liste déroulante des langues */
.language-dropdown {
    display: none; 
    position: absolute;
    top: 100%; /* CLÉ: Assure que le menu colle au conteneur parent pour éviter le "gap" */
    right: 0; /* ALIGNEMENT TOUT A DROITE DU SÉLECTEUR */
    min-width: 160px; /* Légèrement plus large pour les langues */
    background-color: var(--color-box-background);
    border: 1px solid var(--color-border);
    border-top: none; /* Enlève la ligne de séparation en haut pour se fondre dans le hover */
    border-radius: 0 0 4px 4px; /* Arrondi seulement en bas */
    z-index: 1000; /* Z-index plus élevé */
    padding: 8px 0;
    list-style: none;
    text-align: left;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Règle essentielle : garde le menu visible au survol du conteneur parent */
.language-selector:hover .language-dropdown {
    display: block;
}

/* Style des éléments de la liste déroulante */
.language-dropdown li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 15px;
    text-decoration: none;
    color: var(--color-primary);
    font-size: 0.9rem;
    font-weight: 400;
    transition: background-color 0.2s;
}

.language-dropdown li a:hover {
    background-color: #2c3e50; /* Changement de couleur pour le hover de l'élément */
    color: var(--color-accent);
}

/* Style spécifique pour la langue active dans le menu déroulant */
.language-dropdown li a.lang-active {
    background-color: #0d121c; 
    color: var(--color-accent);
    font-weight: 600;
}

/* --- Section Héro (Accueil) --- */
.hero-section {
  /*  padding: var(--spacing-lg) 0 120px 0; */
  padding: 30px 0 80px 0; /* réduit l’espace en haut et en bas */
}

/*
.hero-title {
    font-size: 2.7rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 25px;
	
}*/

/* Style du titre principal (H1) */
.hero-title {
    font-size: 2.8rem;
    font-weight: 900; /* Poids Montserrat chargé */
    color: #ffffff;
    margin-bottom: 5px;
    letter-spacing: 2px; /* Espacement style Apogée */
    text-transform: uppercase;
}

/* Style du texte fin dans le H1 (le span) */
.hero-span {
    font-weight: 300;
    opacity: 0.9;
    text-transform: none; /* Optionnel : si vous voulez que "la puissance de l'IA" reste en minuscules */
}

/* Style du sous-titre (H2) */
.hero-subtitle {
    font-size: 1.2rem; 
    font-weight: 400; 
    color: #F4B942; /* Votre jaune/doré */
    margin-top: 0px;
	margin-bottom: 0px
    max-width: 700px; 
    margin-left: auto; 
    margin-right: auto; 
    line-height: 1.5;
    text-transform: none; /* Pas de majuscules pour le sous-titre */
}

.hero-slogan {
    font-size: 1.3rem;
    font-weight: 300;
    margin-bottom: var(--spacing-md);
    color: var(--color-secondary);
}

.cta-button {
    display: inline-block;
    padding: 14px 35px;
    background-color: var(--color-accent);
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    border: 2px solid var(--color-accent);
    transition: opacity 0.3s;
    letter-spacing: 0.5px;
    text-align: center; /* Centrage du texte pour tous les .cta-button */
}

.cta-button:hover {
    opacity: 0.8;
}

/* --- Section Solutions (Produits) --- */
.solutions-section {
    padding: var(--spacing-lg) 0;
    border-top: 1px solid var(--color-border);
}

.solution-grid {
    display: grid;
    /* On définit 4 colonnes sur les grands écrans */
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px;           /* Espace réduit pour compenser les boîtes plus petites */
    width: 100%;
    max-width: 1500px;   /* On élargit un peu le conteneur pour laisser de la place aux 4 blocs */
    margin: 50px auto;
    padding: 0 20px;
    align-items: stretch;
}

/* Version Tablette : On passe à 2 colonnes pour que ça reste lisible */
@media (max-width: 1024px) {
    .solution-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Version Mobile : 1 seule colonne */
@media (max-width: 600px) {
    .solution-grid {
        grid-template-columns: 1fr;
    }
}

.solution-item {
    padding: 30px 25px;
    background-color: rgba(26, 35, 51, 0.4); 
    border-radius: 8px;
    border: 1px solid rgba(44, 62, 80, 0.4);
    backdrop-filter: blur(6px);
    transition: transform 0.3s, border-color 0.3s, background-color 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;    /* Aligne les icônes et textes au centre */
    text-align: center;
    text-decoration: none;  /* Supprime le soulignement bleu des liens */
    color: #ffffff;         /* Force le texte en blanc */
    height: 100%;           /* Pour que toutes les boîtes fassent la même taille dans une ligne */
}



.solution-item:hover {
    transform: translateY(-5px);
    border-color: var(--color-accent);
}

.solution-item h2 {
    font-family: var(--font-main); /* Montserrat */
    font-size: 1.3rem;
    font-weight: 900;              /* Passé à 900 pour le style Apogée */
    margin-bottom: 5px;           /* Augmenté légèrement pour l'aération */
    color: var(--color-accent);
    text-align: center;
    text-transform: uppercase;     /* Majuscules pour le style Premium */
    letter-spacing: 1px;
}

.solution-item .icon {
    display: block;
    font-size: 3rem;
    margin-bottom: 15px;
    text-align: center;
}

.solution-item p {
    color: var(--color-secondary);
    text-align: center;
    /* AJOUT POUR L'ESPACEMENT AVANT LE BOUTON */
    margin-bottom: 20px;
	margin-top: 0px;	
	
}

/* --- Style uniforme des boutons dans la grille (Ressources) --- */
.solution-grid .solution-item .cta-button {
    margin-top: auto; /* Pousse le bouton au bas du bloc */
    width: 100%;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
    
    /* Styles pour uniformiser l'apparence et répondre à la demande */
    padding: 10px 0px; /* Padding réduit */
    font-size: 0.9rem; /* Taille de police réduite */
    background-color: var(--color-accent-teal); 
    box-shadow: none;
    text-decoration: none;
    border-radius: 4px;
    text-transform: none; /* Annule toute majuscule forcée */
    text-align: center; /* CENTRAGE DU TEXTE DU BOUTON (NOUVEAU) */
}

.solution-grid .solution-item .cta-button:hover {
    background-color: #008080; /* Darker teal on hover */
    box-shadow: 0 4px 10px rgba(0, 179, 179, 0.4);
}


/* --- Section Philosophie --- */
.philosophy-section {
    padding: var(--spacing-lg) 0;
    border-top: 1px solid var(--color-border);
}

.philosophy-section h2 {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: var(--spacing-md);
}

.philosophy-text {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.2rem;
    color: var(--color-secondary);
}

/* --- Section Outils --- */
.tools-section {
    padding: var(--spacing-lg) 0 100px 0;
    border-top: 1px solid var(--color-border);
}

.tools-section h2 {
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: var(--spacing-md);
    color: var(--color-accent);
}

.tools-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
}

.tool-tag {
    background-color: #1a2333;
    color: var(--color-primary);
    padding: 8px 18px;
    border-radius: 40px; /* Bordures arrondies pour un look moderne */
    font-size: 0.9rem;
    font-weight: 500;
    border: 1px solid #2c3e50;
}

/* --- Footer --- */
.main-footer {
    border-top: 1px solid var(--color-border);
    padding: 30px 20px;
    background-color: #111827; /* Fond du footer encore plus foncé */
    font-size: 0.9rem;
}

.main-footer nav a {
    color: var(--color-secondary);
    text-decoration: none;
    font-weight: 500;
    margin: 0 15px;
    transition: color 0.3s;
}

.main-footer nav a:hover {
    color: var(--color-accent);
}

.separator {
    color: var(--color-border);
}

.copyright {
    margin-top: 20px;
    color: #555;
}


/* --- CONTACT PAGE STYLES (Styles de la page contact.html) --- */
.contact-section {
   /* padding: 30px 0 80px 0;*/
   padding-top: 10px !important; /* Réduit l'espace sous le sous-titre */
}

.contact-title {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 10px;
}
/*
.contact-slogan {
    font-size: 1.2rem;
    font-weight: 300;
    margin-bottom: 50px;
    color: var(--color-secondary);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}*/

.contact-slogan {
    font-size: 1.2rem;        /* même taille que le texte de ressources */
    font-weight: 400;
    color: #F4B942;           /* même couleur dorée */
    text-align: center;
    max-width: 900px;
    margin: 30px auto 50px auto;  /* espace harmonisé au-dessus et au-dessous */
}


.contact-form-container {
    display: flex;
    justify-content: left; /* pour le bouton retour à la page Ressources, sur Contact ?
    gap: 80px;
    max-width: 800px;
    margin: 0 auto;
    text-align: left;*/
}



.contact-form {
    flex-basis: 35%; /* MODIFIÉ: Changé de 50% à 45% */
}

/* Nouvelle classe pour le centrage global du formulaire/contact */
.contact-form-center {
    /* Annule l'alignement flex: flex-start de la règle .contact-form-container existante */
    justify-content: center !important; 
    
    /* Centre le conteneur lui-même dans la page */
    margin-left: auto !important; 
    margin-right: auto !important;
}

.direct-contact {
    flex-basis: 45%; /* MODIFIÉ: Changé de 40% à 45% pour que l'email tienne sur une seule ligne */
    border-left: 1px solid var(--color-border);
    padding-left: 40px;
	margin-top: 25px; /* ajuste la valeur selon le rendu (ex. 40–80px) */
}

/* --- Lien WhatsApp dans la page Contact --- */
.whatsapp-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #25D366; /* vert officiel WhatsApp */
    font-weight: 500;
    text-decoration: none;
    transition: transform 0.2s ease, color 0.2s ease;
}

.whatsapp-link:hover {
    transform: scale(1.05);
    color: #1ebe57; /* vert légèrement plus clair au survol */
}

.whatsapp-link img {
    width: 24px;   /* même taille que LinkedIn */
    height: 24px;
    vertical-align: middle;
    margin-left: 8px;  /* même espacement */
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 5px;
    font-size: 0.9rem;
  /*  color: var(--color-secondary); */
	color: #F4B942; /* couleur du texte sur la page services */
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--color-border);
    background-color: #1a2333; /* Champ sombre */
    font-family: var(--font-inter);
    font-size: 1rem;
    color: var(--color-primary);
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--color-accent);
    outline: none;
}

.submit-button {
    width: 100%;
    padding: 15px;
    background-color: #007BFF;
    color: #FFFFFF;
    font-weight: 700;
    border: 1px solid #5CC8FF;
    border-radius: 8px;
	margin-top: 10px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: box-shadow 0.3s ease, color 0.3s ease;
}

.submit-button:hover {
    box-shadow: 0 0 20px #5CC8FF;
    color: #ffffff;
}


.direct-contact-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    padding-top: 5px;
}

.direct-contact-item {
    margin-bottom: 15px;
    font-size: 1rem;
	line-height: 2.6; /* ajoute un peu d’air vertical */
	text-align: left; 
}

.direct-contact-item a {
   /* color: var(--color-accent); */
	color: #5CC8FF; /* encore plus clair au survol */
    text-decoration: none;
    font-weight: 500;
	margin-left: 5px;
}
.direct-contact-item a:hover {
    color: #AEE8FF; /* encore plus clair au survol */
    text-shadow: 0 0 6px rgba(92, 200, 255, 0.7);
}

/* --- PARCOURS PAGE STYLES (Styles de la page parcours.html) --- */

.page-intro {
    padding: 80px 0 60px 0;
}

.intro-title {
    font-size: 2.7rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.intro-slogan {
    font-size: 1.2rem;
    font-weight: 300;
    color: var(--color-secondary);
    max-width: 700px;
    margin: 0 auto;
}

.timeline-section {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 0 100px 0;
    text-align: left;
}

.timeline-item {
    display: flex;
    margin-bottom: 50px;
    border-left: 2px solid var(--color-border);
    position: relative;
    padding-left: 30px;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 5px;
    width: 10px;
    height: 10px;
    background-color: var(--color-accent); /* Point de couleur vive */
    border-radius: 50%;
}

.timeline-year {
    flex-shrink: 0;
    width: 180px;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-secondary);
    margin-left: -210px;
    text-align: right;
}

.timeline-content {
    flex-grow: 1;
    margin-top: -5px;
}

.timeline-content h2 {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.timeline-content h3 {
    font-size: 1.1rem;
    font-weight: 300;
    color: var(--color-secondary);
    margin-bottom: 15px;
}

.timeline-content ul {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
    color: var(--color-secondary);
}

.timeline-content li {
    margin-bottom: 8px;
    padding-left: 1.2em;
    text-indent: -1.2em;
}

.timeline-content li::before {
    content: "→"; /* Une flèche pour un look tech */
    color: var(--color-accent);
    margin-right: 8px;
    font-weight: 600;
}

.timeline-cta {
    text-align: center;
    padding-top: 50px;
}

.timeline-cta p {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--color-primary);
}

/* --- 1. Styles de base pour le bureau --- */

/* Assurez-vous que le logo et le menu sont alignés */
header {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    padding: 20px 40px; /* Ajustez ce padding si nécessaire */
}

/* Rétablir les liens à l'horizontale (CLÉ) */
.main-nav ul {
    list-style: none;
    display: flex; /* Affiche les liens côte à côte */
    padding: 0;
    margin: 0;
}


/* Note: Si vos liens n'ont pas d'espace entre eux sur bureau, ajoutez : */
.main-nav ul li {
    margin-left: 30px; 
    margin-bottom: 0;
}


/* 2. FIX CRITIQUE : Suppression des puces bleues sur la navigation (même sur bureau, par précaution) */
.main-nav a::before {
    content: none !important; 
}



.language-dropdown .flag img,
.lang-display .flag img {
    width: 20px;
    height: 14px;
    object-fit: contain;
    vertical-align: middle;
}

.ressources-section {
    padding: 30px 0 80px 0;
}

.solution-item i {
    font-size: 3rem;       /* Ajouté pour remplacer le style du HTML */
    margin-bottom: 20px;   /* Ajouté pour remplacer le <br> du HTML */
    transition: transform 0.3s ease, color 0.3s ease;
}


.solution-item:hover i {
    transform: translateY(-5px) scale(1.1);
    filter: brightness(1.2);
}

/* Ajustement hauteur titre page Ressources */
.page-intro {
    padding: 30px 0 80px 0 !important;
}
/* --- Correction spécifique pour la page Ressources --- */
.page-intro .hero-slogan {
    font-size: 1.2rem;         /* texte plus grand */
    font-weight: 400;
    color:#F4B942;            /* bleu clair lisible */
    text-align: center;
    margin-top: 30px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
.service-section {
    padding: 60px 20px;
    max-width: 1000px;
    margin: 0 auto;
    text-align: justify;
    color: #f0f0f0;
	margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.service-section h2 {
    color: #5CC8FF;
    text-align: left 	;
    margin-bottom: 15px;
    font-size: 2rem;
}

/* --- Harmonisation du style hover des icônes sociales --- */
.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, color 0.2s ease;
}

.social-link:hover {
    transform: scale(1.05);
    color: #1ebe57; /* même vert clair que WhatsApp au survol */
}

/* Optionnel : pour les icônes SVG comme LinkedIn */
.social-link img,
.social-link svg {
    transition: transform 0.2s ease, filter 0.2s ease;
}

.social-link:hover img,
.social-link:hover svg {
    transform: scale(1.05);
    filter: brightness(1.2);
}

/* --- Harmonisation du style hover des icônes sociales --- */
.social-link,
.whatsapp-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, color 0.2s ease;
}

.social-link:hover,
.whatsapp-link:hover {
    transform: scale(1.05);
    color: #1ebe57; /* même vert clair que WhatsApp au survol */
}


/* Si LinkedIn utilise une image SVG ou PNG */
.social-link img,
.social-link svg {
    width: 24px;   /* même taille que WhatsApp */
    height: 24px;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.social-link:hover img,
.social-link:hover svg {
    transform: scale(1.05);
    filter: brightness(1.2);
}

/* --- Ajustement spécifique pour les sections de la page Ressources --- */
.ressources-solutions .solution-item {
    padding: 15px; /* au lieu de 30px */
    min-height: 200px; /* optionnel : réduit la hauteur minimale */
}

.ressources-solutions .solution-grid {
    gap: 25px; /* espace réduit entre les sections */
}

.ressources-solutions {
    padding-top: 20px !important;
    padding-bottom: 40px !important;
	margin-top: -30px; /* ajuste la valeur (-20 à -60px selon le rendu) */
}

/* Supprime toute bordure résiduelle entre les sections */
.ressources-section,
.ressources-solutions,
main,
section {
    border-top: none !important;
}


a[href="services.html#test-performance"] h2 {
    margin-bottom: 30px !important; /* espace augmenté entre le titre et le texte */
}

a[href="services.html#intelligence-artificielle"] h2 {
    margin-bottom: 30px !important;
}

a[href="services.html#audit-performance"] h2 {
    margin-bottom: 30px !important;
}

/* Espacement spécifique pour la section "Audit énergétique" de la page d'accueil */
a[href="services.html#audit-energetique"] h2 {
    margin-bottom: 65px !important; /* espace augmenté entre le titre et le texte */
}

/* Empêche les retours à la ligne pour les slogans de services et ressources 
.page-intro .hero-slogan {
    white-space: nowrap;
}*/

/* --- Correction footer pleine largeur --- */
.main-footer {
  width: 100vw; /* s'étend sur toute la largeur de la fenêtre */
  margin-left: calc(50% - 50vw); /* annule le centrage du body */
}



/* --- Centrage parfait pour le texte d’intro de la page Services --- */
.services-page .hero-slogan-wrapper {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 20px;
  margin-bottom: 40px; /* espace sous le texte */
}

.services-page .hero-slogan {
  white-space: nowrap !important; /* une seule ligne */
  max-width: none;
  margin: 0;
  text-align: center !important;
  line-height: 1.4;
  color: #F4B942; /* même doré que sur Ressources */
  font-size: 1.2rem;
  font-weight: 400;
}

/* --- Centrage parfait pour le texte d’intro de la page Référencement --- */
/* (Ce bloc est obligatoire pour centrer un élément avec 'white-space: nowrap') */
.referencement-page .hero-slogan-wrapper {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw; /* Utilise la pleine largeur de l'écran */
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 20px;
}

/* Réduction de la police pour que le texte rentre plus facilement sur une seule ligne */
.referencement-page .hero-slogan {
    font-size: 1 rem; /* Réduction de la taille de police pour le grand écran */
}


/* --- Centrage parfait pour le texte d’intro de la page Services --- */
/* (Réutilise la technique de centrage sur toute la largeur de l'écran) */
.services-page .hero-slogan-wrapper {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw; 
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 20px;
}

/* Vous pouvez ajuster la taille de police ici si vous le souhaitez */
.services-page .hero-slogan {
    font-size: 1 rem; /* Exemple : taille légèrement réduite, ajustez au besoin */
}


/* Amélioration de la lisibilité des listes */
ul {
	     line-height: 1.9;
		margin-bottom: 40px;
	  /*
      ** AJOUTEZ CETTE LIGNE **
      Supprime le padding par défaut de la liste. 
      C'est cet espace que l'ancienne puce occupait.
    */
    padding-left: 0 !important; 

    list-style-type: none; 
    text-align: left; /* Assure l'alignement à gauche */
}

ul li {
    margin-bottom: 15px;
    position: relative;
    padding-left: 0; /* Ajoute un espace pour la puce personnalisée */
   /* SOLUTION CLÉ : Masque de force l'espace de la puce par défaut sur l'élément de liste */
    list-style-position: inside; /* Peut aider si la puce était en "outside" */
    list-style-type: none !important; 
}

ul li::before {
    /* Ajout d'un point customisé de couleur accent (bleu) */
    /*content: "\2022";  Code pour une puce standard */
	content: none;
    color: var(--color-accent); /* Utilise la variable bleu vif définie dans :root */
    font-size: 1.2em;
    font-weight: bold;
    position: absolute;
    left: 0;
}

/* Limite la largeur du contenu principal pour améliorer la lisibilité */
.service-section {
    max-width: 850px; /* Limite la largeur du texte (ajustez cette valeur) */
    margin-left: auto; /* Centre le bloc de contenu */
    margin-right: auto;
    /* Conserve vos styles existants : padding-top: 60px; padding-bottom: 60px; */
}

/* Force tous les paragraphes et les listes à s'aligner à gauche à l'intérieur du conteneur centré */
.service-section p,
.service-section ul {
    text-align: left;
}

/* --- Correction Spécifique : Suppression des puces dans le sélecteur de langue --- */

/* 1. Neutralise l'héritage de la puce personnalisée (bleue) pour les <li> du menu déroulant */
.language-dropdown li {
	margin-bottom: 0 !important; /* CLÉ : Supprime l'espace après chaque langue */
    /* Annule l'espace de puce par défaut qui pourrait apparaître */
    list-style-type: none !important;
    padding-left: 0 !important;
}

/* 2. Neutralise la puce personnalisée (bleue) générée par le pseudo-élément ::before */
.language-dropdown li::before {
    content: none !important;
}

/* 3. Ajustement : remet le padding pour un alignement propre dans le menu */
.language-dropdown li a {
    padding-left: 15px !important; /* Rétablit le padding initial pour l'alignement */
}

/* Nouveau style pour aligner le bouton à gauche et le titre au centre */
.title-with-button {
  display: flex;
  align-items: center; /* Aligne verticalement */
  justify-content: flex-start; /* Aligne tous les éléments au début (à gauche) */
  margin-bottom: 30px;
  position: relative; /* Nécessaire pour positionner le titre absolument si nécessaire, mais ici on va utiliser les marges auto */
  padding: 0 40px; /* Ajoute un peu de padding pour que le bouton ne touche pas le bord */
}

/* Le titre doit prendre des marges automatiques pour se centrer par rapport à son parent, 
   indépendamment de la position du bouton. */
.title-with-button .intro-title {
    /* Marge auto à gauche et à droite pour le centrer */
    margin-left: auto; 
    margin-right: auto;
    
    /* La marge à droite est écrasée par le conteneur, on ajoute donc un padding sur le parent.
       La solution la plus fiable est souvent : */
    margin: 0 auto 0 0; /* Marge à droite auto */
}

/* Une méthode plus robuste (et la plus courante) : Centrer le H1 absolument et aligner le bouton avec flex-start */
/* Si les marges auto ne fonctionnent pas parfaitement avec flex-start, utilisez cette solution (plus simple à maintenir): */
.title-with-button {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Bouton à gauche */
  position: relative;
  padding: 0; /* Pour éviter que le bouton ne colle le bord */
}

.title-with-button .intro-title {
    position: absolute; /* Positionne le titre de façon absolue */
    left: 50%; /* Le positionne à 50% du conteneur */
    transform: translateX(-50%); /* Le décale de 50% de sa propre largeur vers la gauche (le centrant parfaitement) */
    width: auto;
    margin: 0; /* Supprime toutes les marges par défaut */
    padding: 0;
    z-index: 1; /* S'assure qu'il est au-dessus du bouton s'ils se chevauchent */
}

.title-with-button .back-link {
    z-index: 2; /* S'assure que le bouton reste cliquable au-dessus du titre */
    position: relative; /* Pour que le z-index fonctionne */
}

.ghost-link {
    /* Style de base */
    background: transparent;
    color: #5CC8FF; /* Couleur bleue claire de votre charte */
    border: 1px solid #5CC8FF; /* Contour léger */
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
}

.ghost-link:hover {
    /* Effet au survol */
    background-color: #5CC8FF;
    color: #1a1a1a; /* Texte plus foncé au survol */
    border-color: #5CC8FF;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Si vous voulez une image discrète en fond, décommentez la ligne suivante */
    /* background-image: url('../images/Accueil_Fond.png'); */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 0.1; 
    z-index: -1;
}
/* Couleurs des icônes de la grille */
.icon-blue { color: #3498db; }
.icon-purple { color: #9b59b6; }
.icon-orange { color: #f39c12; }
.icon-green { color: #2ecc71; }

}