/* css/style.css */
body {
    font-family: 'Arial', sans-serif;
	width:100%;
	margin: 0 auto;
    padding: 0;
	background: #f7fafd;
}

.header {
    background : #fff;
    padding: 10px;
    text-align: center;
}


.container {
			
			width: 90%;
			margin: auto;
			padding: 20px 0;
			
			
            /*display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin: 20px auto;  */
            
}



/* Header centré : logo au dessus, titres centrés */
.header-top { text-align: center; padding: 12px 10px; }
.site-logo { max-width: 960px; width: 100%; height: auto; display: inline-block; }

/* --- Ajustements logo et CTA --- */
/* Espace au-dessus et en dessous du logo */
.logo-wrap { display: inline-block; margin: 22px 0; }
.site-logo { margin-top: 18px; margin-bottom: 18px; }

/* Style global des boutons CTA (restaure "Ouvrir mon compte") */
.cta-btn {
  background: #1e90ff;
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(30,144,255,0.12);
  transition: transform .12s ease, box-shadow .12s ease, background .12s;
}

.cta-btn:hover,
.open-account-cta .cta-btn:hover {
  background: #0d6efd;
  transform: translateY(-1px);
}

/* S'assure que le CTA global garde une largeur raisonnable */
.open-account-cta .cta-btn {
  width: auto;
  max-width: 420px;
  margin: 8px auto 0;
}

 
 .accroche {
            text-align: center;
            margin: 40px 0 10px 0;
            font-size: 1.2em;
            color: #444;
        }
.categories-section {
            max-width: 1100px;
            margin: 0 auto;
            padding: 30px 0 60px 0;
        }
.categories-title {
            font-size: 1.5em;
            color: #1e90ff;
            margin-bottom: 24px;
            text-align: center;
            font-weight: 600;
        }
.grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 28px;
        }		
		


/* Grille fluide pour affichage moderne */
.grid_OLD {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Grille fluide */
    gap: 15px;
    justify-items: center;
}

/* Cartes des familles */
.card {
    width: 100%;
    max-width: 250px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
}

.card:hover {
    transform: scale(1.05);
	background-position: center 20%;
}

/* Image de la carte avec effet de fond */
.card-image {
   
    height: 240px;
    background-size: cover;
    background-position: center 30%;
    border-radius: 10px;
    position: relative;
    display: flex;
	
    
}

/* Overlay avec couleur de la famille */

.card-overlay {
    position: absolute;  
    bottom: 0;
    left: 0; right: 0;
    background: linear-gradient(0deg, rgba(30,144,255,0.85) 0%, rgba(255,255,255,0) 100%);
    padding: 12px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 56px;
    box-sizing: border-box;
    border-radius: 0 0 10px 10px;
    color: #fff;
}

/* Texte du titre */
.card-title {
    margin: 0;
    padding: 0;
    font-weight: 600;
    line-height: 1.2;
    display: block;
    width: 100%;
}



.card-link {
    display: block;
    text-decoration: none; /* Supprime le soulignement des liens */
    color: inherit; /* Garde la couleur du texte */
}


.overlay-text {
	text-align: center;
	color: black;
	text-shadow: 1px 1px 1px white, -1px -1px 1px white, -1px 1px 1px white, 1px -1px 1px white; 
}




/************************ MENU HAUT ICONES NAVIGATION  ***************************/


/* Style the navigation bar */
.navbar {
	width:100%;
    display: flex;
    align-items: center;
    
    
    padding: 10px;
	
    justify-content: center; 
    position: relative; /* Ajout de la position relative */
}


.menu-link {
    color: #1e90ff;
    text-decoration: none;
    margin-right: 20px;
    cursor: pointer;
}

.menu-link:hover {
  color: #0d6efd;
  transition: color 0.2s;
}


/************************************** fenetre connexion /deconnexion *************************************/

/* Modale */
.modal {
  display: none; /* Masque la modale par défaut */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4); /* Couleur de fond avec transparence */
}

.modal-content {
  background-color: #333;
  color: #fff;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 500px;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0px 5px 15px rgba(0,0,0,0.5);
}

.modal-content form {
  flex-direction: column;
  align-items: center;
}


.modal-content input {
  
  padding: 10px;
  margin-bottom: 15px;
  border-radius: 5px;
  border: 1px solid #ccc;
  font-size: 18px;
  
}

.modal-content button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.modal-content button:hover {
  background-color: #1e90ff;;
}

/* Styles pour les liens supplémentaires */
.additional-links {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 15px;
}

.additional-links a {
  color: #bbb;
  font-size: 12px;
  text-decoration: none;
  margin: 0 5px;
}

.additional-links a:hover {
  text-decoration: underline;
}

.separator {
  color: #bbb;
  margin: 0 5px;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: white;
  text-decoration: none;
  cursor: pointer;
}


.signup-container {
  display: flex;
  justify-content: center; /* Centre les éléments horizontalement */
  align-items: center;
  margin: 10px;
  padding: 10px 20px;
  text-decoration: none;
  background-color: #f0f0f0;
  color: black;
  border-radius: 5px;
  width: calc(100% - 20px); /* Même largeur que les boutons Google/Facebook */
  max-width: 400px; /* Aligné sur la largeur max */
}
.signup-container input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 10px;
  font-size: 16px;
}
.signup-container button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}
.signup-container button:hover {
  background-color: #1e90ff;
}

.separator_line {
  display: inline-block;
  margin: 0 20px;
}

.form-control {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    margin-bottom: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    background: #fff;
}

/************************************** bouton recherche *************************************/

.search-container {
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: relative; /* Position relative pour permettre au contenu interne d'être absolument positionné */
}

.search-container input[type="text"] {
    width: 100%;
    font-size: 16px;
    border: none;
    outline: none;
    padding: 10px;
    box-sizing: border-box;
}

.search-results {
    display: none; /* Masqué par défaut */
    background-color: #fff;
    border: 1px solid #ccc;
    border-top: none; /* Pour enlever la bordure supérieure */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    max-height: 200px; /* Limite la hauteur maximale */
    overflow-y: auto; /* Ajoute une barre de défilement si nécessaire */
    position: absolute; /* Position absolue pour le placer par-dessus le reste du contenu */
    top: 100%; /* Positionner juste en dessous de l'input */
    left: 0; /* Aligner à gauche */
    right: 0; /* Étendre jusqu'à la largeur du conteneur parent */
    z-index: 1000; /* S'assure que les résultats soient au-dessus des autres éléments */
}

.result {
    padding: 10px;
    cursor: pointer;
    text-decoration: none;
    display: block;
    color: #333;
}

.result:hover {
    background-color: #f1f1f1;
}

.result a {
    color: inherit;
    text-decoration: none;
    display: block;
}

.result a:hover {
    color: #1e90ff;
}

/******************************** dashboard **********************************/

/* Améliorations visuelles pour le bloc "Prochains services" */
.dashboard-card .service-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto; /* laisse le navigateur adapter les colonnes sur grand écran */
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.dashboard-card .service-table th,
.dashboard-card .service-table td {
  padding: 14px 18px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
  text-align: left;
}

.dashboard-card .service-table th {
  background: #fbfdff;
  color: #1e2f50;
  font-weight: 700;
  font-size: 0.95rem;
}

.dashboard-card .service-table tbody tr:hover {
  background: #fbfcff;
}

/* Alternance légère */
.dashboard-card .service-table tbody tr:nth-child(odd) {
  background: #ffffff;
}

/* Ajustement pour très grand écran : espacer colonnes */
@media (min-width: 1400px) {
  .dashboard-card .service-table th,
  .dashboard-card .service-table td {
    padding: 16px 22px;
  }
}
.dashboard-card {
    background:#fff;
    border-radius:10px;
    padding:16px;
    border:1px solid #eee;
    box-shadow:0 4px 12px rgba(0,0,0,0.03);
    width:100%;
    box-sizing:border-box;
}
.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(260px, 380px) 1fr;
  gap: 20px;
  max-width: 1200px;
  width: 100%;
  margin: 18px auto;
  padding: 0 16px;
}

.hero-small { background:#f8fbff;padding:28px 0;border-bottom:1px solid #eee; }
.hero-small .container { max-width:1200px; width:100%;margin:0 auto;padding:0 16px; }
.dashboard-grid { display:grid; grid-template-columns: 300px 1fr; gap:20px; max-width:1200px; width:100%;margin:18px auto;padding:0 16px; }
    .dashboard-card { background:#fff;border-radius:10px;padding:16px;border:1px solid #eee; box-shadow:0 4px 12px rgba(0,0,0,0.03); }
.stats { display:flex; gap:12px; }
.stat { flex:1; padding:12px;border-radius:8px;background:linear-gradient(90deg,#fff,#fbfdff); text-align:center; }
.stat h3{ margin:6px 0; font-size:1.1em; }
.list-compact { list-style:none;padding:0;margin:0; }
.list-compact li { padding:10px 8px;border-bottom:1px solid #f0f0f0; display:flex; justify-content:space-between; align-items:center; }
.list-compact li:last-child{ border-bottom:none; }
.muted{ color:#666;font-size:0.95em; }
.cta-row{ display:flex; gap:8px; margin-top:12px; }
.btn.small{ padding:8px 10px; font-size:0.95em }


/*************************************** services ********************/

.service-container {
            width: 80%;
            max-width: 1200px;
            margin: 20px auto;
            padding: 10px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            background-color: #fff;
        }

        .service-item {
			display: flex; 
            padding: 15px;
            margin-bottom: 10px;
            border-bottom: 1px solid #eee;
        }

        .service-image {
            flex: 0 0 120px; /* Taille fixe pour l'image */
            margin-right: 15px;
        }

        .service-image img {
            width: 100%;
            border-radius: 5px; /* Arrondir les coins de l'image */
        }

        .service-details {
            flex: 1; /* Prend l'espace restant */
            margin-right: 15px;
        }

        .service-title {
            font-size: 1.5em;
            margin-bottom: 5px;
            color: #333;
        }

        .service-description {
            color: #666;
            font-size: 1em;
        }

        .service-link {
            display: inline-block;
            margin-top: 10px;
            color: #3498db;
            text-decoration: none;
            font-weight: bold;
        }

        .service-link:hover {
			color: #1e90ff;
        }
		.service-toggle {
            flex: 0 0 60px; /* Taille fixe pour le toggle */
        }

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

/* Hide the default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px; /* Rounded corners */
}

/* The circle inside the slider */
.slider::before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%; /* Make it a circle */
}

/* When the checkbox is checked, the background color of the slider */
input:checked + .slider {
    background-color: #4CAF50; /* Green */
}

/* Move the slider circle when the checkbox is checked */
input:checked + .slider::before {
    transform: translateX(26px);
}

/* Rounded slider */
.slider.round {
    border-radius: 34px;
}

.slider.round::before {
    border-radius: 50%;
}


.display-modes {
    text-align: right;
    margin-bottom: 15px;
}
.display-modes a {
    margin: 0 8px;
    color: #888;
    font-size: 1.5em;
    text-decoration: none;
    transition: color 0.2s;
}
.display-modes a:hover {
    color: #1e90ff;
}
.card.favorite .fav-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    color: gold;
    font-size: 1.2em;

}

/*************************************** profil ********************/

.btn-action {
  background-color: #1e90ff;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 7px 16px;
  font-size: 15px;
  margin-left: 10px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  display: inline-block;
  vertical-align: middle;
}
.btn-action:hover {
  background-color: #4CAF50;
  color: #fff;
}

.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}
.info-row .inputs-group {
  flex: 1;
  display: flex;
  gap: 10px;
}
.info-row .form-control {
  flex: 1 1 0;
  margin-bottom: 0;
}
.info-row .btn-action {
  margin-left: 16px;
  margin-bottom: 0;
  white-space: nowrap;
  align-self: stretch;
}
    
/*************************************** bas de page ********************/
 .footer {
            width: 100%;
            background-color: #333;
            color: #fff;
            padding: 20px 0;
            text-align: center;
            position: relative;
        }

        .footer .navbar {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }

        .footer .navbar h3 {
            font-size: 1.2em;
            margin-bottom: 10px;
        }

        .footer .navbar ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .footer .navbar ul li {
            margin-bottom: 10px;
        }

        .footer .navbar ul li a {
            color: #fff;
            text-decoration: none;
            font-size: 1em;
            transition: color 0.3s;
        }

        .footer .navbar ul li a:hover {
            color: #1e90ff; 
        }

        .footer .navbar ul.social-links {
            display: flex;
        }

        .footer .navbar ul.social-links li {
            margin-right: 15px;
        }

        .footer .navbar ul.social-links li a {
            font-size: 1.5em;
        }

        .footer p {
            margin-top: 20px;
            font-size: 0.9em;
            color: #bbb;
        }



/* Styles pour la page ouverture.php - cartes catégories modernes */
.categories-grid {
    display: grid;
    grid-template-columns: 1fr; /* chaque carte prend toute la largeur (empêche 2 cartes côte à côte) */
    gap: 20px;
    max-width: 900px;
    margin: 20px auto;
    padding: 0 10px 30px 10px;
    align-items: start;
    align-content: start;
}

.category-card {
    display: flex;
    gap: 18px;
    align-items: flex-start; /* aligner contenu en haut */
    align-self: start;      /* empêcher l'étirement vertical depuis la grille */
    margin-bottom: 14px;
}

.category-card:hover { 
    transform: translateY(-6px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); }
    .category-image {
        width: 160px;
        height: 110px;
        background-size: cover;
        background-position: center;
        border-radius: 10px;
        flex-shrink: 0;
        box-shadow: inset 0 -20px 40px rgba(0,0,0,0.08);
    }
    
.category-info h3 {
    margin: 0 0 8px 0;
    font-size: 1.2em;
    font-weight: 700;
}

.category-desc {
    margin: 0 0 12px 0;
    color: #444;
    line-height: 1.35;
}
.category-actions {
  display: flex;
  gap: 10px;
}

.category-actions .cta-btn { padding: 8px 14px; font-size: 0.95em; border-radius: 8px; }
.category-actions .btn-action { padding: 8px 12px; font-size: 0.95em; border-radius: 8px; background:#fff; border:1px solid #e0e0e0; color:#333; }


/* image en balise <img> avec hauteur fixe identique */
.category-image-img {
    width: 320px;
    height: 180px;
    object-fit: cover;
    border-radius: 10px;
    flex: 0 0 320px;
    align-self: flex-start; /* forcer l'image en haut de la carte */
    display: block;
    box-shadow: inset 0 -10px 20px rgba(0,0,0,0.06);
}
.category-card > img,
.category-card .category-image-img {
    max-height: 180px;
    height: 180px;
    width: 320px;
    object-fit: cover;
}

/* info textuelle */
.category-info {
    flex: 1;
    min-width: 0;
    align-self: center; /* empêche le texte de s'étirer verticalement */


}


/* layout alterné : image à gauche / droite */
.category-card.layout-left { flex-direction: row; }
.category-card.layout-right { flex-direction: row; }

/* info textuelle */
.category-info { flex: 1; min-width: 0; }
.category-subtitle {
    margin: 6px 0 10px 0;
    font-size: 0.95em;
    color: #666;
    font-weight: 600;
}
.subrubriques {
    margin: 0 0 10px 0;
    padding-left: 18px;
    color: #444;
}
.subrubriques li {
    margin: 4px 0;
    line-height: 1.35;
}
.category-desc {
    margin: 8px 0 0 0;
    color: #444;
    line-height: 1.4;
}

/* Footer - centrer icônes sociales et taille */
.footer .social-links{
  display:flex;
  gap:12px;
  justify-content:center;
  align-items:center;
  padding:0;
  margin:0;
  list-style:none;
}
.footer .social-links img,
.footer .social-links .social-icon-img {
  width:28px;
  height:28px;
  display:block;
}


/*************************************** mediaquery ********************/


/* Effet tactile pour mobile */
@media (hover: none) {
    .card:active {
        transform: scale(1.05);
    }
}


@media (max-width: 460px) {
            /* Pour les écrans d'au moins 460 pixels de large (tablettes en mode paysage, etc.) */

            .site-logo { max-width: 220px; }
            .grid {grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));} 
			.card {max-width: 100%; }
			.card-image {height: 150px;}
			.card-overlay {font-size: 14px;padding: 8px;}
			.menu-link { font-size: 0; } /* Masquer le texte du menu haut  */
			.navbar {  justify-content: space-around; } /* Espacement égal entre les éléments du menu haut */
			.service-image { flex: 0 0 75px; /* Taille fixe pour l'image */}
			.footer .navbar {flex-direction: column;align-items: center;}
			.footer .navbar ul {text-align: center;}
			.info-block form > div[style*="display:flex"] { flex-direction: column !important; align-items: stretch !important; gap: 0 !important; }
			.info-block .btn-action { margin-left: 0 !important;  margin-top: 12px !important;  width: 100%;  min-width: 0;   float: none;  align-self: flex-end;  }
            
            /* dashboard */
            .stats { flex-direction:column; }
            .stat { width:100%; }
            .cta-row { flex-direction:column; gap:8px; }
            .btn.small { width:100%; }
            .muted { font-size:0.9em; }


}           
   
@media (max-width: 768px) {
            /* Pour les écrans d'au moins 768 pixels de large (tablettes en mode paysage, etc.) */
            
            .header-top { flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 12px; }
            .logo-wrap { margin: 18px 0; }
            .site-logo { margin-top: 12px; margin-bottom: 12px; }
            .cta-buttons .cta-btn { padding: 10px 14px; border-radius: 10px; }
            .hero-inline { text-align: center; padding-top: 8px; }
            .header-top .cta-buttons { justify-content: center; width: 100%; }
            .header-top .cta-buttons .cta-btn { width: 100%; max-width: 360px; }
            
            .hero h1 { font-size: 1.5em; }
            .categories-section { padding: 10px 0 30px 0; }
            .card-image { height: 80px; }
            .grid {grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));} 
			.card {max-width: 100%; }
			.card-image {height: 150px;}
			.card-overlay {font-size: 14px;padding: 8px;}
			.menu-link { font-size: 0; } /* Masquer le texte du menu haut  */
			.navbar {  justify-content: space-around; } /* Espacement égal entre les éléments du menu haut */
			.menu-link i { font-size: 24px; }/* Augmenter la taille de l'icône */
			.service-image { flex: 0 0 75px; /* Taille fixe pour l'image */}
            .footer .navbar {flex-direction: column;align-items: center;}
			.footer .navbar ul {text-align: center;}
            .category-card { flex-direction: column; align-items: stretch; } 
            .category-image { width: 100%; height: 160px; }
            .category-card { flex-direction: column; align-items: stretch; }
            .category-image-img { width: 100%; height: 180px; }
            .category-info { padding-top: 10px; }
            /* Hero */
            .hero { padding: 18px 12px; max-width: 100%; }
            .hero h1 { font-size: 1.2rem; line-height: 1.15; margin-bottom: 6px; text-align:center; }
            .hero h2 { font-size: 1rem; margin-bottom: 12px; color: #444; text-align:center; font-weight:500; }

            /* CTA buttons : colonne et centré */
            .cta-buttons { flex-direction: column; gap: 12px; align-items: center; justify-content: center; }
            .cta-buttons .cta-btn { width: 100%; max-width: 380px; padding: 10px 14px; font-size: 1rem; border-radius: 10px; box-sizing: border-box; }

            /* Grid / cartes : une carte par ligne, image au-dessus */
            .categories-grid { grid-template-columns: 1fr; padding: 0 12px 20px; max-width: 100%; }
            .category-card { flex-direction: column; align-items: stretch; gap: 12px; padding: 12px; }
            .category-card.layout-right, .category-card.layout-left { flex-direction: column; } /* override alternance en empilant sur mobile */

            /* Images : pleine largeur, hauteur contrôlée */
            .category-image-img { width: 100% !important; height: 160px !important; object-fit: cover; border-radius: 10px; flex: 0 0 auto; align-self: stretch; order: 0 !important;}

            /* dashboard */
            .dashboard-grid { grid-template-columns: 1fr; gap:14px; padding:0 12px; }
            .hero-small .container { padding:0 12px; }
            .dashboard-card { padding:14px; }
            .stats { gap:8px; flex-wrap:wrap; }
            .stat { flex:1 1 48%; min-width:140px; }
            .cta-row { justify-content:flex-start; flex-wrap:wrap; }
            .service-table { display:block; width:100%; overflow-x:auto; }
            .service-table thead, .service-table tbody, .service-table tr { display:table; width:100%; table-layout:fixed; }
           
            /* Texte */
            .category-info { padding: 8px 0 0 0; order: 1 !important; }
            .category-info h3 { font-size: 1.05rem; text-align:left; }
            .category-subtitle { display:none; } /* supprimer sous-titre si présent */
            .subrubriques { padding-left: 18px; margin: 8px 0; }
            .subrubriques li { font-size: 0.95rem; line-height: 1.4; }

             /* s'assurer que les deux layouts empilent image puis texte */
            .category-card.layout-left, .category-card.layout-right { flex-direction: column !important; }

            /* CTA global en bas : plein écran */
            .open-account-cta { padding: 16px 12px; }
            .open-account-cta .cta-btn { width: 100%; max-width: 420px; display: block; margin: 8px auto 0; }

            /* petits ajustements généraux */
            body { padding: 0; }
            .categories-section { padding: 8px 0 20px; }

        }

@media (max-width: 992px) {
            /* Pour les écrans d'au moins 992 pixels de large (écrans d'ordinateur, etc.) */
            .item { width: calc(50% - 20px);  }
			

}      
@media (max-width: 1281px) {
            /* Pour les écrans d'au moins 1200 pixels de large (écrans d'ordinateur plus larges, etc.) */
            
			.item { width: calc(25% - 20px); } /* images des articles  */
			
}

@media (min-width: 1282px) {
            /* Pour les écrans d'au moins 1200 pixels de large (écrans d'ordinateur plus larges, etc.) */
            
			.item { width: calc(20% - 20px); } /* images des articles  */
}			


/* Footer additional rules added to support footer.php layout */
.footer .footer-section{flex:1 1 220px;min-width:180px;padding:0 12px;}
.footer .footer-section h3{margin:0 0 10px 0;font-size:1.05rem}
.footer .footer-section ul{list-style:none;padding:0;margin:0}
.footer .footer-section ul li{margin:6px 0}
.footer .footer-section a{color:inherit;text-decoration:none}
.footer .footer-section a:hover{text-decoration:underline}
.footer .contact p{margin:6px 0;color:#bbb}
.footer .footer-legal{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding-top:18px;border-top:1px solid rgba(255,255,255,0.06);margin-top:18px}
.footer .footer-legal p{margin:0;color:#bbb}
.footer .legal-links{display:flex;gap:12px;flex-wrap:wrap}
.rgpd-banner{display:block;position:fixed;bottom:12px;left:12px;right:12px;background:#222;color:#fff;padding:12px 14px;border-radius:8px;text-align:center;z-index:9999;box-shadow:0 8px 24px rgba(0,0,0,0.2)}
.rgpd-banner a{color:#1e90ff;text-decoration:underline;margin-left:8px}
.rgpd-banner button{margin-left:16px;padding:8px 12px;border-radius:6px;border:0;background:#1e90ff;color:#fff;cursor:pointer}
@media (max-width:720px){.footer .navbar{flex-direction:column}.footer .footer-section{min-width:unset}}
/* Social login buttons in modals - scoped to avoid affecting other icon uses */
.modal .social-login { display:flex; flex-direction:column; gap:10px; margin-bottom:12px; }
.modal .social-login a { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; text-decoration:none; color:inherit; background:#fff; border:1px solid rgba(0,0,0,0.06); box-shadow:0 6px 18px rgba(0,0,0,0.06); font-weight:600 }
.modal .social-login a img { width:28px; height:28px; display:block; border-radius:6px }
.modal .social-login a.google-login { background:#ffffff; color:#333; }
.modal .social-login a.facebook-login { background:#1877f2; color:#fff; border-color:rgba(24,119,242,0.9) }
.modal .social-login a.facebook-login img { filter:none }
@media (min-width:600px){ .modal .social-login { flex-direction:row } .modal .social-login a{ flex:1 } }
/* Modal separator with centered "ou" */
.modal .separator_line{width:100%;text-align:center;margin:18px 0;position:relative;height:20px}
.modal .separator_line::before,.modal .separator_line::after{content:"";position:absolute;top:50%;height:1px;background:rgba(0,0,0,0.12);width:40%}
.modal .separator_line::before{left:0;transform:translateY(-50%)}
.modal .separator_line::after{right:0;transform:translateY(-50%)}
.modal .separator_line span{display:inline-block;padding:0 12px;background:transparent;color:#999;font-size:0.95rem;position:relative;z-index:1}
@media (prefers-color-scheme: dark){.modal .separator_line::before,.modal .separator_line::after{background:rgba(255,255,255,0.06)}.modal .separator_line span{color:#ccc}}
/* Caption under modal separator */
.modal .separator_caption{width:100%;text-align:center;color:#888;font-size:0.95rem;margin-top:6px;margin-bottom:6px}
@media (prefers-color-scheme: dark){.modal .separator_caption{color:#ccc}}

/* --- messages.php extracted styles --- */
/* layout */
    .messages-page { max-width:1100px; margin:28px auto; display:flex; gap:20px; }
    .conversations { width:360px; }
    .thread { flex:1; }
    .conv-item { display:flex; gap:12px; align-items:center; padding:12px; border-radius:8px; background:#fff; margin-bottom:10px; cursor:pointer; border:1px solid #eee; }
    .conv-item.unread { box-shadow:0 0 0 3px rgba(30,144,255,0.06); }
    .avatar { width:48px; height:48px; border-radius:50%; background:#ddd; display:flex; align-items:center; justify-content:center; font-weight:700; color:#555; }
    .conv-meta { flex:1; }
    .conv-subject { font-weight:600; }
    .conv-last { font-size:0.9em; color:#666; }
    .badge { background:#1e90ff; color:#fff; padding:4px 8px; border-radius:12px; font-size:0.85em; }
    .important { color:#b22222; font-weight:700; }
    .thread-messages { background:#fff; border-radius:8px; padding:16px; min-height:320px; border:1px solid #eee; overflow:auto; }
    .msg { margin-bottom:14px; max-width:75%; padding:10px 12px; border-radius:8px; }
    .msg.me { background:#1e90ff; color:#fff; margin-left:auto; }
    .msg.other { background:#f1f1f1; color:#222; }
    .msg .meta { font-size:0.85em; color:#666; margin-bottom:6px; }
    .thread-actions { margin-top:12px; display:flex; gap:8px; align-items:center; }
    .btn { background:#1e90ff; color:#fff; padding:8px 12px; border-radius:6px; border:none; cursor:pointer; }
    .btn.secondary { background:#f0f0f0; color:#222; }
    .no-conv { color:#666; }

/* --- messages responsive tweaks --- */
@media (max-width: 900px) {
  .messages-page { flex-direction: column; gap:12px; margin:16px auto; }
  .conversations { width:100%; }
  .thread { width:100%; }
  .conv-item { padding:10px; }
  .thread-actions { flex-direction:column; gap:8px; }
  .thread-actions textarea { width:100%; min-height:90px; }
}
@media (max-width: 600px) {
  .avatar { width:40px; height:40px; }
  .msg { max-width:100%; }
  .conv-subject { font-size:0.95em; }
}

/* Formulaire création_service — améliorations visuelles */
.service-container form {
max-width: 820px;
margin: 0 auto;
display: block;
gap: 14px;
}
.service-container label {
display: block;
font-weight: 600;
margin: 12px 0 6px;
color: #333;
}
.service-container input[type="text"],
.service-container input[type="tel"],
.service-container input[type="email"],
.service-container input[type="datetime-local"],
.service-container input[type="number"],
.service-container select,
.service-container textarea {
width: 100%;
box-sizing: border-box;
padding: 10px 12px;
border: 1px solid #e3e6ea;
border-radius: 8px;
background: #fff;
transition: border-color .12s ease, box-shadow .12s ease;
font-size: 15px;
color: #222;
}
.service-container textarea { min-height: 140px; resize: vertical; }
.service-container input[type="file"] {
display: block;
width: 100%;
padding: 8px 6px;
border-radius: 8px;
border: 1px dashed #e6e9ec;
background: #fafafa;
color: #444;
}
.service-container .cta-btn,
.service-container button[type="submit"] {
display: inline-block;
padding: 12px 18px;
border-radius: 10px;
background: #1e90ff;
color: #fff;
font-weight: 700;
text-decoration: none;
border: none;
cursor: pointer;
box-shadow: 0 8px 20px rgba(30,144,255,0.12);
}
.service-container .cta-btn:hover,
.service-container button[type="submit"]:hover {
transform: translateY(-2px);
background: #0d6efd;
}
.service-container .muted { color:#666; font-size:0.95rem; margin-top:6px; }

/* Group small inputs on one row (adresse / ville / cp) when space allows */
@media (min-width: 880px) {
.service-container .address-row { display: grid; grid-template-columns: 1fr 220px 140px; gap:12px; align-items:start; }
.service-container .address-row input { margin:0; }
}

/* Focus accessibility */
.service-container input:focus,
.service-container select:focus,
.service-container textarea:focus {
outline: none;
border-color: #9fd1ff;
box-shadow: 0 6px 18px rgba(30,144,255,0.08);
}

/* Small helper for inline hints */
.service-container small { display:block; color:#777; margin-top:6px; }

/* Make file input clickable area friendlier on mobile */
@media (max-width:600px){
.service-container input[type="file"]{ padding:12px; font-size:0.95rem; }
}

/* Création d'annonce — titre plus grand et adresses responsives */
.service-container input[name="titre"] {
  width: 100%;
  min-width: 0;
  font-size: 1.15rem;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #e6e9ec;
  box-sizing: border-box;
  color: #222;
  transition: box-shadow .12s, border-color .12s;
}

.service-container input[name="adresse"],
.service-container input[name="ville"],
.service-container input[name="code_postal"] {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #e6e9ec;
  border-radius: 8px;
  margin-top: 8px;
}

/* Mise en ligne sur grand écran : adresse = large, ville + cp à droite */
@media (min-width: 880px) {
  .service-container input[name="adresse"] { width: calc(100% - 380px); display: inline-block; margin-right:12px; vertical-align: top; }
  .service-container input[name="ville"]   { width: 220px; display: inline-block; margin-right:12px; vertical-align: top; }
  .service-container input[name="code_postal"] { width: 140px; display: inline-block; vertical-align: top; }
}

/* Focus */
.service-container input[name="titre"]:focus,
.service-container input[name="adresse"]:focus,
.service-container input[name="ville"]:focus,
.service-container input[name="code_postal"]:focus {
  outline: none;
  border-color: #9fd1ff;
  box-shadow: 0 8px 20px rgba(30,144,255,0.08);
}

.sousfamille-block { display:none; margin-top:8px; transition:opacity .12s ease; opacity:0; }
.sousfamille-block.visible { display:block; opacity:1; }
.radio-inline { display:flex; align-items:center; gap:8px; margin:0; }
.fieldset-inline { display:flex; gap:12px; align-items:center; margin:0 0 8px 0; border:0; padding:0; }