body {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: Cake-Mania, sans-serif;
}

header, nav, main {
    width: 80%;
    padding: 0px;
    margin: 10px; /* marge entre les Flexbox */
    /* border: 1px solid #ccc; */
    background-color: #fff; /* f0f0f0 pour voir les délimitation*/
}

/* ---------------------------------------------------------------------- */
/* Gestion du background sous le logo avec centrage de l'image par défaut */
/* ---------------------------------------------------------------------- */

.image-container {
    text-align: center;
    background-image: url(../img/background-img-color-logo.jpg);
}

/* ------------------------- */
/* Gestion du menu principal */
/* ------------------------- */

nav ul {
    list-style-type: none;       /* Suppression des puces */
    padding: 0;                  /* Suppression des marges internes */
    display: flex;               /* Transformation en flexbox */
    background-color: #fff; /* Couleur d'arrière-plan */
    justify-content: center      /* Alignements des liens dans le menu */
}

nav li {
    margin-right: 20px;
}

nav a {
    display:block;                /* Transformation en block */
    min-width: 150px;             /* Largeur minimale des liens */
    margin: 0.5rem;               /* Marges externes (1 valeurs = 4 directions) */
    padding: 0.4rem 0;            /* Marges internes (2 valeurs = haut/bas et gauche/droite)*/
    text-align: center;           /* Centrage du texte */   
    background-color: #f59d2a;  /* Couleur d'arrière-plan */
    color: #fff;                /* Couleur du texte */
    text-decoration: none;        /* Suppression du soulignement */
    border: 1px solid #fff;     /* Ajout d'une bordure */
    border-radius: 4px;           /* Arrondis des bordures */

    transition: all 1s ;          /* Ajout des effets de transition */
}

nav a:hover {
    background-color: #17850d;
    color: #fff;
    border-color: #ffe843;
  }

/* ------------------------------------------ */
/* Gestion des Flexbox dans les pages du site */
/* -------------------------------------------*/

/* Flexbox du contenu A+B */
main {
    display: flex;
    justify-content: space-between;
}

/* A : Flexbox de gauche */
.content {
    flex: 2;
    /* border: 1px solid #ccc; */
    padding: 0 0.4rem;            /* Marges internes (2 valeurs = haut/bas et gauche/droite)*/
    margin-right: 10px;
}

/* justify pour un paragraphe */
.parajustif {
    text-align: justify;
}

/* B : Flexbox de droite */
.sidebar {
    flex: 1;
    background-color: #fff;
}

/* A-contenu : Contenu de la Flexbox A */
.parent {
    display: flex;
    justify-content: center;
    align-items: center; /* Les éléments sont regroupés au centre de la Flexbox */
    text-align: center;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
}

.parent-contrats {
    justify-content: center;
    align-items: center; /* Les éléments sont regroupés au centre de la Flexbox */
    text-align: center;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
}

/* --------------------------------------------------------- */
/* Bouton Submit pour la rubrique choix de date de permanence*/
/* --------------------------------------------------------- */

button[type="submit"] {
    background-color: #007bff; /* Couleur de fond */
    color: #fff; /* Couleur du texte */
    padding: 10px 20px; /* Espacement interne (padding) */
    border: none; /* Supprime la bordure par défaut */
    font-size: 16px; /* Taille de police */
    font-weight: bold; /* Gras */
    cursor: pointer; /* Curseur au survol */
    border-radius: 5px; /* Coins arrondis */
    background: linear-gradient(to bottom, #007bff, #0056b3); /* Dégradé de couleurs */
    text-transform: uppercase; /* Texte en majuscules */
}

button[type="submit"]:hover {
    background-color: #0056b3; /* Couleur de fond au survol */
    background: linear-gradient(to bottom, #0056b3, #003d80);
}

button[type="submit"]:focus {
    outline: none; /* Supprime la bordure de focus par défaut */
    box-shadow: 0 0 5px #007bff; /* Ajoute une ombre douce */
}

/* ----------------------------------- */
/* Bouton PDF pour la rubrique contrat */
/* ----------------------------------- */

.pdf-button {
    background-color: #ff0000; /* Couleur de fond du bouton */
    color: #fff; /* Couleur du texte */
    padding: 5px 10px; /* Espacement intérieur du bouton (haut/bas, gauche/droite) */
    border: none; /* Supprimer la bordure */
    border-radius: 5px; /* Arrondir les coins */
    cursor: pointer; /* Curseur de souris */
}

/* Style lorsque la souris survole le bouton */
.pdf-button:hover {
    background-color: #cf2b2b; /* Nouvelle couleur de fond */
}

/* ----------------------------------- */
/* Bouton XLS pour la rubrique contrat */
/* ----------------------------------- */

.xls-button {
    background-color: #2d7c08; /* Couleur de fond du bouton */
    color: #fff; /* Couleur du texte */
    padding: 5px 10px; /* Espacement intérieur du bouton (haut/bas, gauche/droite) */
    border: none; /* Supprimer la bordure */
    border-radius: 5px; /* Arrondir les coins */
    cursor: pointer; /* Curseur de souris */
}

/* Style lorsque la souris survole le bouton */
.xls-button:hover {
    background-color: #4dac21; /* Nouvelle couleur de fond */
}

/* ------------------------------------------------ */
/* Bouton COMMANDE GROUPÉE pour la rubrique contrat */
/* ------------------------------------------------ */

.comgroup-button {
    background-color: #e9198b; /* Couleur de fond du bouton */
    color: #fff; /* Couleur du texte */
    padding: 5px 10px; /* Espacement intérieur du bouton (haut/bas, gauche/droite) */
    border: none; /* Supprimer la bordure */
    border-radius: 5px; /* Arrondir les coins */
    cursor: pointer; /* Curseur de souris */
}

/* Style lorsque la souris survole le bouton */
.comgroup-button:hover {
    background-color: #864888; /* Nouvelle couleur de fond */
}

/* ----------------------------------- */
/* Bouton PDF pour la rubrique contrat */
/* ----------------------------------- */

.doc-button {
    background-color: #0000FF; /* Couleur de fond du bouton */
    color: #fff; /* Couleur du texte */
    padding: 5px 10px; /* Espacement intérieur du bouton (haut/bas, gauche/droite) */
    border: none; /* Supprimer la bordure */
    border-radius: 5px; /* Arrondir les coins */
    cursor: pointer; /* Curseur de souris */
}

/* Style lorsque la souris survole le bouton */
.doc-button:hover {
    background-color: #3232f8; /* Nouvelle couleur de fond */
}

/* ------------------------------------------ */
/* Bouton EN ATTENTE pour la rubrique contrat */
/* ------------------------------------------ */

.att-button {
    background-color: #460fc7; /* Couleur de fond du bouton */
    color: #fff; /* Couleur du texte */
    padding: 5px 10px; /* Espacement intérieur du bouton (haut/bas, gauche/droite) */
    border: none; /* Supprimer la bordure */
    border-radius: 5px; /* Arrondir les coins */
    cursor: pointer; /* Curseur de souris */
}

/* ----------------------------------------------------- */
/* Gestion de la class 'container' dans la page contrats */
/* ----------------------------------------------------- */

/* Styles généraux pour le tableau */
.responsive-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 15px;
}
.responsive-table th, .responsive-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
}

/* Style des éléments individuels */
.item {
    display: flex; /* Utilisation de flexbox à l'intérieur des éléments */
    align-items: center; /* Centre les éléments verticalement */
    padding: 10px; /* Espacement interne des éléments */
}

/* Style de l'image */
.item img {
    max-width: 30%; /* Assurez-vous que l'image reste dans la largeur de son conteneur */
    height: auto; /* Permet à l'image de conserver son ratio hauteur/largeur */
}

/* Style du texte à droite */
.texte-droite {
    flex-grow: 1; /* Permet au texte de remplir l'espace restant dans le conteneur */
    padding-left: 20px; /* Espacement à gauche du texte pour créer de la séparation */
}

/* ----------------------- */
/* Gestion du bandeau RGPD */
/* ----------------------- */

.banner {
    background-color: #f0f0f0;
    padding: 10px 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    display: none;
}

.banner p {
    margin: 0;
    font-size: 14px;
}

.banner button {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 8px 15px;
    cursor: pointer;
    margin-left: 10px;
}

.banner button:hover {
    background-color: #0056b3;
}

/* -------------- */
/* Gestion autres */
/* -------------- */

.container img {
    max-width: 100%;
}

.affiche {
    width: jus;
}

footer {
    margin-top: 10px;
    text-align: center;
    font-size: 19px;
    color: #000;
}

.center-text {
    text-align: center;
}

.center-content {
    text-align: center;
}