/* public/css/layout.css */ /* --- Contenu Principal --- */ main { padding: 25px; /* Garder les paddings pour l'espace intérieur */ width: 90%; /* 'main' prendra 90% de la largeur de son conteneur parent (probablement ) */ max-width: 1880px; /* Optionnel : Limite maximale pour éviter que ce soit TROP large sur des écrans géants. Ajuste cette valeur. */ /* margin: 20px auto; */ /* Commente ou supprime cette ligne */ margin-top: 20px; /* Garde seulement les marges verticales si besoin */ margin-bottom: 20px; margin-left: auto; /* Centre le bloc 'main' (qui fait 90% de large) dans son parent */ margin-right: auto; /* Centre le bloc 'main' */ /* width: 100%; Position apres le max oblige le max en premier Assure qu'il prend toute la largeur */ background-color: #3b4446; background-color: #3b4446; /* Ton fond actuel */ border-radius: 8px; /* Tes coins arrondis actuels */ box-shadow: 0 0 20px rgba(0,0,0,0.25); /* Ton ombre actuelle */ } /* --- Styles des Liens spécifiques au main et footer --- */ main a, main a:link, main a:visited { color: #55efc4; text-decoration: none; transition: color 0.2s ease-in-out, text-decoration 0.2s ease-in-out; } main a:hover, main a:focus { color: #2ecc71; text-decoration: underline; } main a:active { color: #27ae60; } /* Patch Work Boutton retour "GO TO HOME" a ameliorer*/ main a form button[type="submit"], .button-link{ /* Classe générique pour les liens stylés comme des boutons */ color: #212628 !important; text-decoration: none; border: 1px solid rgba(0,0,0,0.0)!important; box-shadow: 0 0 8px rgba(0,0,0,0.5); } main a form button[type="submit"], .button-link:hover, .button-link:active { /* Classe générique pour les liens stylés comme des boutons */ color: #fff !important; text-decoration: none; box-shadow: 0 0 5px rgba(0,0,0,0.8); /* transform: translateY(-1px) scale(1.00); */ border: 1px solid #55efc4 !important; } /* ========================================================================== Footer Styles ========================================================================== */ footer#page-footer { /* Ajout d'un ID au footer dans layout.php si vous voulez plus de spécificité */ background-color: #212628; /* Fond plus foncé, similaire au header */ color: #b2bec3; /* Texte gris clair par défaut pour le footer */ padding: 30px 20px 20px 20px; border-top: 3px solid #2ecc71; /* Ligne verte comme le header */ margin-top: 40px; /* Espace au-dessus du footer */ } footer { text-align: center; padding: 25px 20px; margin-top: 40px; font-size: 0.9em; /* color: #b2bec3; OLD */ /* border-top: 1px solid #525d60; OLD */ background-color: #212628; /* Même fond que le header pour consistance */ border-top: 3px solid #2ecc71; /* Ligne verte comme le header */ } footer a, footer a:link, footer a:visited { color: #81ecec; } footer a:hover, footer a:focus { color: #00cec9; text-decoration: underline; } footer a:active { color: #00b894; } .footer-columns-container { display: flex; flex-wrap: wrap; /* Permet aux colonnes de passer à la ligne sur petits écrans */ justify-content: space-between; /* Distribue l'espace, utile si moins de 4 colonnes */ gap: 20px; /* Espace entre les colonnes */ max-width: 1600px; /* Ou votre largeur de site principale */ margin: 0 auto 30px auto; /* Centrer et espacer avant copyright */ } .footer-column { flex: 1; /* Chaque colonne essaie de prendre une part égale */ min-width: 200px; /* Largeur minimale avant de passer à la ligne (ajustez selon contenu) */ padding: 0 10px; /* Petit padding interne pour ne pas coller le texte aux bords */ box-sizing: border-box; /* Pour que padding ne s'ajoute pas à la largeur/min-width */ } /* Styles pour le logo dans la première colonne */ .footer-column[data-column-id="footer_col1_logo"] { display: flex; /* Active Flexbox pour la colonne du logo */ flex-direction: column;/* Si vous avez du texte sous le logo, sinon pas crucial */ justify-content: center;/* Centre verticalement le contenu flex (le logo) */ align-items: center; /* Centre horizontalement si la colonne est plus large que le logo */ flex-basis: 150px; /* Conserver la taille de base si vous l'aviez */ flex-grow: 0; /* Empêcher de grandir */ text-align: center; /* Centrer le logo si la colonne est plus large que l'image */ } .footer-logo-img { max-width: 100%; /* Rendre le logo responsive à la taille de sa colonne */ height: auto; /* margin-bottom: 15px; Espace sous le logo */ } /* Titres principaux de chaque colonne (ex: "Navigation", "Suivez-nous") */ .footer-column h4 { color: #dfe6e9; /* Texte plus clair pour les titres de colonne */ font-size: 1.1em; margin-top: 0; margin-bottom: 18px; /* Espace sous le titre de colonne */ padding-bottom: 8px; border-bottom: 1px solid #525d60; /* Ligne de séparation */ } .footer-column h5 { margin-top: 0; } /* Conteneur spécifique pour les sous-colonnes de la Colonne 2 (Navigation) */ .footer-col2-subcategories { display: flex; flex-wrap: nowrap; /* Pour que les sous-colonnes restent côte à côte si possible */ gap: 25px; /* Espace entre "Plan du Site" et "Liens Utiles" */ } .footer-subcategory-block { flex: 1; min-width: 120px; /* Ajustez si besoin pour le contenu de chaque sous-colonne */ display: flex; /* Peut aider à centrer la ul si elle a width: fit-content */ flex-direction: column; /* Pour que le titre h5 et la ul soient l'un sous l'autre */ align-items: center; /* Centre la ul horizontalement si elle a width: fit-content */ } /* Titres des sous-catégories (ex: "Plan du Site", "Liens Utiles") */ .footer-subcategory-title { /* Si c'est un h5 ou une div stylée comme un titre */ font-weight: bold; color: #ced6e0; /* Couleur distincte pour les sous-titres */ margin-bottom: 10px; /* Espace avant la liste de liens de la sous-catégorie */ font-size: 1em; display: block; } /* Listes de liens dans le footer */ .footer-column ul { list-style: none; padding-left: 0; margin: 0; } .footer-column ul ul { /* Pour les listes imbriquées (si jamais) */ margin-top: 5px; } /* Spécifiquement pour les listes de liens SOUS les titres de sous-catégories */ .footer-subcategory-block ul.footer-links-list-sub { list-style: none; /* Garder pour enlever les puces par défaut */ padding-left: 0; margin-top: 0 auto; /* display: inline-block; 3. Permet à la liste de prendre la largeur de son contenu */ /* et d'être centrée par text-align: center; du parent */ /* text-align: center; 4. Ré-aligne le texte des items de liste à gauche (pour la puce + lien) */ } .footer-subcategory-block ul.footer-links-list-sub li { display: flex; /* Garder flex pour aligner puce et texte */ align-items: center; /* Aligne verticalement la puce et le texte au centre de leur hauteur combinée */ /* justify-content: flex-start; /* Par défaut, aligne puce et texte à gauche à l'intérieur du li */ margin-bottom: 0; padding: 1px 0; /* Léger padding vertical pour l'espacement des lignes */ width: fit-content; /* Le li prend la largeur de son contenu (puce+lien) */ margin-left: auto; /* Centre le li dans son parent ul (si ul est plus large) */ margin-right: auto; /* Centre le li dans son parent ul (si ul est plus large) */ } .footer-subcategory-block ul.footer-links-list-sub a { font-size: 0.87em; line-height: 1.3; display: inline-block; padding: 1px ; transition: transform 0.2s ease-in-out, font-size 0.2s ease-in-out; flex-grow: 1; /* Permet au lien de prendre l'espace restant si besoin */ padding-bottom: 1px; text-decoration: none; transition: transform 0.2s ease-in-out, font-size 0.2s ease-in-out; } /* Effet de hover sur les liens */ .footer-subcategory-block ul.footer-links-list-sub a:hover, .footer-subcategory-block ul.footer-links-list-sub a:focus { /* color: #2ecc71; déjà géré par la règle générale .footer-column a:hover */ transform: translateX(5px) scale(1.00); /* Décalage à droite et léger grossissement */ font-size: 0.9em; /* Optionnel: si vous voulez que le texte lui-même grossisse un peu plus */ } /* Items de liste (liens ou texte) */ .footer-column li { margin-bottom: 6px; /* Espacement vertical réduit entre les liens */ } .footer-column li.footer-text-item { font-size: 0.9em; line-height: 1.5; color: #b2bec3; /* Même couleur que le texte général du footer */ } /* Liens dans le footer */ .footer-column a { color: #81ecec; /* Cyan clair pour les liens */ text-decoration: none; font-size: 0.9em; transition: color 0.2s; } .footer-column a:hover, .footer-column a:focus { color: #2ecc71; /* Vert au survol pour cohérence */ text-decoration: underline; } /* Icônes sociales */ /* Conteneur de la colonne des icônes sociales */ .footer-column[data-column-id="footer_col3_title"] { /* Si vous voulez que le titre "Suivez-nous" et les icônes soient centrés ensemble */ /* display: flex; */ /* flex-direction: column; */ /* align-items: center; */ /* Cela centrerait le h4 aussi */ } ul.footer-social-icons-list { /* La