/* --- Styles Généraux --- */
.outil-assiste {
    /* Nuance intermédiaire de bleu-vert */
    background-color: #008080; /* Teal - Un bleu-vert bien équilibré */
    /* Assurez-vous que la couleur de la police est bien blanche */
    color: #FFFFFF; /* Blanc */
    
    /* Autres styles pour l'esthétique */
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid #009688; /* Une bordure légèrement plus claire pour le contraste */
}

/* Pour un effet au survol, avec un fond légèrement plus clair ou plus dynamique */
.outil-assiste:hover {
    background-color: #009688; /* Un vert d'eau plus clair pour le survol */
    color: #FFFFFF; /* Toujours blanc */
}
.outil-assiste2 {
    /* Un orange vif pour le fond */
    background-color: #E64A19; /* Deep Orange */
    /* Assurez-vous que la couleur de la police est bien blanche */
    color: #FFFFFF; /* Blanc */
    
    /* Autres styles pour l'esthétique */
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid #FF7043; /* Une bordure légèrement plus claire pour le contraste */
}

/* Pour un effet au survol, avec un fond légèrement plus clair ou plus dynamique */
.outil-assiste2:hover {
    background-color: #FF5722; /* Un orange plus clair pour le survol */
    color: #FFFFFF; /* Toujours blanc */
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}

.wrapper {
    max-width: 960px;
    margin: 10px auto;
    padding: 15px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	font-size: 14px;
}

h1, h2, h3 {
    color: #0056b3; /* Bleu institutionnel */
    margin-bottom: 15px;
}

a {
    color: #007bff; /* Bleu standard pour les liens */
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* --- Boutons --- */
input[type="submit"],
button,
.button { /* Pour les liens stylisés en bouton */
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
    display: inline-block;
    text-align: center;
    margin-right: 5px; /* Petit espace entre les boutons */
    margin-bottom: 5px; /* La marge que vous voulez appliquer */
    box-sizing: border-box;
    -webkit-appearance: none; /* Désactive l'apparence par défaut sur Webkit (Chrome, Safari) */
    -moz-appearance: none;    /* Désactive l'apparence par défaut sur Mozilla (Firefox) */
    appearance: none;         /* Standard */
    line-height: normal;      /* S'assure que la hauteur de ligne est la même */
    vertical-align: middle;   /* Aligne verticalement les éléments de manière cohérente */
    text-decoration: none;    /* S'assure qu'il n'y a pas de soulignement par défaut sur les liens */
}

input[type="submit"]:hover,
button:hover,
.button:hover {
    background-color: #0056b3;
}

/* --- Formulaires --- */
form label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

form input[type="text"],
form input[type="date"],
form input[type="email"],
form input[type="tel"],
form input[type="password"],
form input[type="number"],
form input[type="datetime-local"],
form textarea,
form select {
    width: calc(100% - 22px); /* 100% moins padding + border */
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box; /* Inclut padding et border dans la largeur */
}

form textarea {
    resize: vertical; /* Permet de redimensionner verticalement */
    min-height: 80px;
}

/* --- Tables --- */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

table th, table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
}

table th {
    background-color: #999999;
    color: #333;
}

table tr:nth-child(even) {
    background-color: #e9e9e9;
}

/* --- Messages d'erreur/succès --- */
.error {
    color: #dc3545; /* Rouge pour les erreurs */
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 5px;
}

.success {
    color: #28a745; /* Vert pour le succès */
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 5px;
}

/* --- Navigation Principale (Menu Responsive) --- */
.main-nav {
    background-color: #333;
    /* Supprimez ou commentez la ligne suivante : */
    /* overflow: hidden; */ 
    border-radius: 5px;
    margin-bottom: 20px;
    display: flex; /* Utilise flexbox pour aligner le bouton, le titre et la liste */
    justify-content: space-between; /* Espace entre les éléments */
    align-items: center; /* Centre verticalement */
    padding: 0 20px; /* Padding pour le conteneur nav */
}

/* Titres de navigation - Desktop par défaut */
.nav-title-desktop {
    display: inline-block; /* Visible par défaut sur desktop */
    font-size: 1.5em;
    font-weight: bold;
    color: #AAA;
    margin-right: 20px;
    flex-grow: 1; /* Le titre prend l'espace restant */
    text-align: center;
}

.nav-title-mobile {
    display: none; /* Masqué par défaut sur desktop */
}

/* Liste de navigation principale */
.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* Les liens du menu s'alignent horizontalement sur desktop */
    justify-content: center;
    flex-wrap: wrap;
}

/* Liens de navigation */
.nav-list li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    white-space: nowrap;
}

/* Effet de survol et page active */
.nav-list li a:hover,
.nav-list li a.active { /* 'active' pour la page courante */
    background-color: #007bff;
    text-decoration: none;
}

/* --- Styles pour le Bouton Hamburger --- */
.hamburger {
    display: none; /* Caché par défaut sur les grands écrans */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    position: relative;
    z-index: 1001; /* Pour s'assurer qu'il est au-dessus du menu */
}

.hamburger .bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: white;
    transition: all 0.3s ease-in-out;
    border-radius: 2px;
}

/* Animation de l'icône hamburger quand le menu est ouvert */
.hamburger.is-active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger.is-active .bar:nth-child(2) {
    opacity: 0;
}

.hamburger.is-active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Conteneur de l'élément de menu avec sous-menu */
.nav-list .has-submenu {
    position: relative; /* Nécessaire pour positionner le sous-menu par rapport à son parent */
}

/* Flèche indiquant la présence d'un sous-menu */
.arrow {
    border: solid white;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    margin-left: 5px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transition: transform 0.3s ease; /* Pour une animation douce de la flèche */
}

/* Rotation de la flèche quand le sous-menu est ouvert (par JS ou active hover) */
.has-submenu.open .arrow,
.has-submenu:hover .arrow { /* La flèche tourne aussi au survol sur desktop */
    transform: rotate(-135deg); /* Flèche vers le haut quand ouvert */
    -webkit-transform: rotate(-135deg);
}

/* Styles par défaut du sous-menu (caché sur desktop) */
.submenu {
    display: none !important;      /* Force le sous-menu à être caché par défaut */
    opacity: 0 !important;         /* Force l'opacité à 0 par défaut */
    visibility: hidden !important; /* Force la visibilité à hidden par défaut */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Transition douce */

    position: absolute;
    background-color: #444 !important;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 9999 !important;
    list-style: none;
    padding: 0;
    margin: 0;
    top: 100%;
    left: 0;
    border-radius: 0 0 5px 5px;
}

/* Styles des liens dans le sous-menu */
/* Styles des liens dans le sous-menu */
.submenu li a {
    color: white !important;        /* Force le texte à être BLANC */
    /* font-size: 16px !important;     /* S'assure d'une taille de police lisible (16px est une bonne base) */
    line-height: 1.5 !important;    /* Assure un espacement de ligne normal */
    padding: 12px 16px !important;  /* Assure un padding pour la zone cliquable et visuelle */
    text-decoration: none !important; /* Pas de soulignement */
    display: block !important;      /* Le lien prend toute la largeur du li */
    text-align: left !important;    /* Aligne le texte à gauche */
    white-space: nowrap !important; /* Empêche le texte de passer à la ligne */
    overflow: hidden !important;    /* Cache tout texte qui déborderait */
    text-overflow: ellipsis !important; /* Affiche "..." si le texte est trop long */
}

/* Effet de survol et page active pour les liens de sous-menu */
.submenu li a:hover,
.submenu li a.active {
    background-color: #0056b3; /* Couleur de survol plus foncée pour les éléments du sous-menu */
}

/* Afficher le sous-menu au clic (géré par JavaScript, pour mobile et/ou desktop si désiré) */
/* Cette règle est activée par JS en ajoutant la classe 'open' au LI parent */
.has-submenu.open > .submenu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}


/* --- Styles pour la Page d'Accueil (Dashboard) --- */
.dashboard-grid {
    display: grid; /* Utilise CSS Grid pour une mise en page flexible */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Crée des colonnes automatiques */
    gap: 20px; /* Espace entre les cartes */
    margin-top: 30px;
}

.card {
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex; /* Permet au contenu de la carte de s'aligner */
    flex-direction: column; /* Les éléments s'empilent */
}

.card:hover {
    transform: translateY(-5px); /* Effet léger au survol */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.card h3 {
    color: #0056b3;
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.3em;
}

.card p {
    font-size: 0.95em;
    color: #666;
    margin-bottom: 20px;
    flex-grow: 1; /* Permet au paragraphe de prendre l'espace restant pour uniformiser la hauteur des cartes */
}

.card .button {
    margin-top: auto; /* Pousse le bouton vers le bas dans la carte */
    width: auto; /* Réinitialise la largeur du bouton si elle est mise à 100% sur mobile */
}


/* --- Responsive menu pour les smartphones et tablettes (max-width: 768px) --- */
@media screen and (max-width: 870px) {

    .main-nav {
        flex-direction: row; /* Alignement horizontal sur mobile pour titre/hamburger */
        justify-content: space-between;
        padding: 10px 20px;
    }

    .hamburger {
        display: block; /* Affiche le bouton hamburger */
        order: 1; /* Place le hamburger en premier */
    }

    .nav-title-desktop {
        display: none; /* Masque le titre desktop sur mobile */
    }
    .nav-title-mobile {
        display: inline-block; /* Affiche le titre mobile */
        font-size: 1.2em; /* Taille plus petite pour mobile */
        font-weight: bold;
        color: #AAA;
        order: 2; /* Place le titre mobile après le hamburger */
        text-align: center;
        flex-grow: 1;
        margin-left: 10px; /* Espace entre hamburger et titre */
    }

    .nav-list {
        display: none; /* Caché par défaut sur mobile (JS le rendra 'active') */
        flex-direction: column;
        position: absolute; /* Positionnement absolu par rapport au body pour le menu mobile */
        top: 60px; /* Ajustez selon la hauteur de votre .main-nav */
        left: 0;
        width: 100%;
        background-color: #333;
        z-index: 1000;
        box-shadow: 0 8px 16px rgba(0,0,0,0.2);
        padding: 0;
        border-radius: 0 0 5px 5px; /* Arrondi les coins inférieurs du menu mobile */
    }

    .nav-list.active {
        display: flex; /* Affiche le menu mobile quand la classe 'active' est ajoutée */
    }

    .nav-list li {
        width: 100%;
        border-bottom: 1px solid #444;
    }

    .nav-list li:last-child {
        border-bottom: none;
    }

    .nav-list li a {
        padding: 15px 20px;
        text-align: left;
    }

    /* Styles pour le sous-menu sur mobile */
    .has-submenu {
        position: static; /* Retire le positionnement absolu pour le sous-menu sur mobile */
    }

    .submenu {
        position: static; /* Le sous-menu s'affiche sous l'élément parent sur mobile */
        display: none; /* Toujours caché par défaut sur mobile (sera affiché par JS) */
        width: 100%;
        background-color: #555; /* Couleur plus foncée pour le sous-menu sur mobile */
        box-shadow: none;
        border-radius: 0;
        border-top: 1px solid #666; /* Ajoute une bordure supérieure pour séparer le sous-menu du parent */
        z-index: auto;
    }

    /* Affiche le sous-menu quand la classe 'open' est ajoutée par JS */
    .has-submenu.open .submenu {
        display: block;
    }

	/* Styles des liens dans le sous-menu */
	.submenu li a {
		color: white !important; /* Force la couleur du texte à BLANC */
		padding: 12px 16px;
		text-decoration: none;
		display: block;
		text-align: left; /* Aligne le texte à gauche dans le sous-menu */
		white-space: nowrap;
	}
	
    .submenu li:last-child a {
        border-bottom: none;
    }
}

/* --- Responsive pour les smartphones et tablettes (max-width: 768px) --- */
@media screen and (max-width: 768px) {
    .wrapper {
        margin: 10px;
        padding: 15px;
    }

    h1, h2 {
        font-size: 1.5em;
    }

    /* Tables sur mobile */
    table, thead, tbody, th, td, tr {
        display: block;
    }

    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    table tr {
        border: 1px solid #ddd;
        margin-bottom: 10px;
        border-radius: 5px;
        background-color: #fff;
    }

    table td {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
        text-align: right;
    }

    table td:before {
        content: attr(data-label);
        position: absolute;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
        color: #0056b3;
    }

    /* Les actions dans les tableaux pour mobile */
    table td:last-child {
        text-align: center;
        padding-left: 6px;
    }

    table td:last-child a.button {
        display: block;
        margin: 5px auto;
        width: calc(100% - 10px);
        font-size: 0.9em;
        padding: 8px 10px;
        white-space: normal;
    }

    table td:last-child .button + span {
        display: none;
    }

    /* Page d'Accueil (Dashboard) sur mobile */
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .card {
        padding: 15px;
    }

    .card p {
        min-height: auto;
        flex-grow: 0;
    }

    .card .button {
        width: 100%;
    }

    /* --- GESTION DES BOUTONS GÉNÉRAUX HORS TABLEAU SUR MOBILE --- */
    .form-actions input[type="submit"],
    .form-actions .button,
    .form-group input[type="submit"],
    .form-group .button {
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px;
    }
}

/* Styles pour l'impression */
@media print {
    /* Paramètres de la page imprimée */
    @page {
        size: A4 portrait; /* Définit le format (A4) et l'orientation (paysage) */
        margin: 1cm; /* Marges uniformes pour la page imprimée */
        margin-bottom: 1.5cm; /* Marge inférieure légèrement plus grande pour le numéro de page */
        -webkit-print-color-adjust: exact; /* Assure un rendu fidèle des couleurs (pour les navigateurs basés sur WebKit) */

            font-family: Arial, sans-serif;
			font-size: 10pt;font-size: 10pt;
			
        /* Masquage des en-têtes et pieds de page par défaut du navigateur,
            et affichage du numéro de page au centre du pied de page. */
        @top-left { content: ""; }
        @top-center { content: ""; }
        @top-right { content: ""; }
        @bottom-left { content: ""; }
        @bottom-center { content: "Page " counter(page) " / " counter(pages); } /* Affiche le numéro de page */
        @bottom-right { content: ""; }
    }
    /* Cacher les éléments non nécessaires à l'impression */
    .print-button, .print-cacher,
    .main-nav, /* Cache la navigation entière lors de l'impression */
    .wrapper > .form-actions, /* Cache les boutons d'action du formulaire en bas de page */
    .button-group /* Si vous avez des groupes de boutons à cacher */
    {
        display: none !important;
    }

    /* Supprimer les marges par défaut du corps */
    body {
        margin: 0;
    }

    /* Afficher le contenu spécifique à l'impression */
    .content-print-only {
        display: block;
    }

    /* Forcer les sauts de page si nécessaire */
    .page-break {
        page-break-after: always;
    }
}