*{box-sizing:border-box;}

#blackbox{

width:95%;
margin:2.5%;
}
#box_connexion {
        width: 100%;


        margin: auto;
        margin-bottom:8em;
        max-width: 1100px;
font-size:1.2em;

    }
#box_connexion h2{
font-size:1.9em;
margin-bottom:0.5em;
}

    #blackbox #module_connexion input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.8em 0.3em 0.8em 0.3em;
    font-size: 1em;
    margin-top: 0.8em;
    border: 2px solid #ccc;
    transition: border-width 0.3s, border-color 0.3s;20px;

    border-radius: 5px;
}
#blackbox #module_connexion input[type="submit"]  {
    background-color:#dda642;
    border:0;
    font-weight:bold;color:white;
    transition: background-color 0.3s ease;
}
#blackbox #module_connexion input[type="submit"]:hover  {
    background-color:#b07e22;

}

.mdpoublie{
 width:100%;text-align:right;display:block;
}
.buttoncreer{
    text-align:center;margin-top:1em;
    width: 80%;
    margin-left:10%;
    box-sizing: border-box;
    padding: 0.5em 0.3em 0.5em 0.3em;
    font-size: 1.05em;
border-radius: 5px;
border:2px solid #dda642;
background-color:none;color:#dda642 !important;font-weight:bold;display:block;
margin-top:2em;

}

#actionconfid{
cursor: pointer; /* Changement de curseur */
    transition: color 0.3s ease;
    color:#fe831b;
}
#actionconfid:hover{
text-decoration:underline;
color:#333;

}
a.minibouton{
 text-align:right;
 display:block;
 float:right;
     color: #ff8f06;
     background-color: #f5f5f5;
    border-radius: 12px;
    padding: 0 7px 0 7px;
    transition: color 0.3s ease;
    margin:2em 0 2em 0;
    padding:8px;
}
a.minibouton:hover{
text-decoration:underline;
color:#333;

}



#module_connexion .blocpswd #togglePassword, .blocpswd #togglePassword2 {
    position: absolute;
    right: 5%;
    color: grey;
    top: 1.8em;
}
#module_connexion .blocpswd {
    width: 100%;
    position: relative;
}
#regles_validite
{
     width: 100%;
    box-sizing: border-box;
    padding: 1.5em;
    font-size: 1.05em;
    margin-top: 0.8em;
     border: 1px solid black;
      transition: border-width 0.3s, border-color 0.3s;
    border-radius: 5px;
    margin-bottom:1em;
}

#menu_c {
    width: 100%;
}


.content{
 font-size:1.3em;
}

#monmenu_c {
    width: 100%;
    box-sizing: border-box;
    padding: 3%;
    margin-top:2em;
    font-size:1.1em;
    border:1px solid grey;
    border-radius:18px;
}

#listing_c {
    display: none;
}

#listing_c a {
    width: 100%;
    display: block;
    border-top: 0;
    box-sizing: border-box;
    padding: 5%;
    font-size: 1.1em;
    text-decoration: none;
    color: black;
    border-radius:5px;
}




#listing_c a:hover,#listing_c a.selected {
    font-weight: bold;
    background-color:#f2f4f9;
    color:#e1c54e;
}

#listing_c a.deconnecte {
    color: red;
}
#ariane {
    margin-bottom: 2em;

    color: #61b1b2;
}
#ariane a {
    color: #61b1b2;
}

#monformulaire {
            width: 100%;
            margin: 0 auto;
            margin-top:50px;
            padding: 20px;
            background-color: #f9f9f9;
            border-radius: 10px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);

        }

     #monformulaire   label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
        }

     #monformulaire   input[type="text"], input[type="file"] {
            width: 100%;
            padding: 8px;box-sizing:border-box;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

    #monformulaire    input[type="submit"],.boutonsubmit {
            background-color: #28a745;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            width:100%;box-sizing:border-box;
            max-width:480px;
        }

     #monformulaire   input[type="submit"]:hover,.boutonsubmit:hover {
            background-color: #218838;
        }



        #monformulaire2 {
    margin: 20px auto;
    margin-top: 50px;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

#monformulaire2 label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

#monformulaire2 input[type="text"],
#monformulaire2 input[type="file"],
#monformulaire2 select,
#monformulaire2 textarea {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#monformulaire2 input[type="number"],
#monformulaire2 input[type="date"]{
    padding: 8px;
    box-sizing: border-box;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
#monformulaire2 input[type="checkbox"] {
    margin-right: 5px;
}

#monformulaire2 input[type="submit"] {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
}

#monformulaire2 input[type="submit"]:hover {
    background-color: #218838;
}



#monformulaire2 input[type="submit"]:hover {
    background-color: #218838;
}

/* Cacher les boutons radio */
#monformulaire2 input[type="radio"] {
    display: none;
}





#monformulaire2 .radio-label {
    background-color: white; /* Fond blanc par défaut */
    color: inherit; /* Texte selon la couleur de bordure */
    border-color: inherit; /* Bordure selon la couleur de texte */
    display: inline-block;
    padding: 10px 15px;
    margin: 5px;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    font-weight: bold;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

/* Bouton sélectionné (checked) */
#monformulaire2 input[type="radio"]:checked + .radio-label.brouillon {
    background-color: #ffc107;
    color: white;
    border-color: #ffc107;
}

#monformulaire2 input[type="radio"]:checked + .radio-label.en_preparation {
    background-color: #17a2b8;
    color: white;
    border-color: #17a2b8;
}

#monformulaire2 input[type="radio"]:checked + .radio-label.effectue {
    background-color: #28a745;
    color: white;
    border-color: #28a745;
}

#monformulaire2 input[type="radio"]:checked + .radio-label.prive {
    background-color: #6c757d;
    color: white;
    border-color: #6c757d;
}

#monformulaire2 input[type="radio"]:checked + .radio-label.public {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

/* Effet au survol */
#monformulaire2 .radio-label:hover {
    opacity: 0.8;
}

/* Par défaut, la couleur de fond pour les radio non sélectionnés */
#monformulaire2 input[type="radio"] + .radio-label {
    background-color: white;
    color: grey;
    border-color: grey; /* Bordure selon la couleur de texte */
}
#monformulaire2 .moitie_label{
width:50% !important;
float:left;

}
label.moitie_label{
 padding:11px 7px;
 text-align:right;
}

#monformulaire2 .txtarea_intro{
height:250px;
}
#monprofil{
width: 100%;
            margin: 0 auto;
            margin-top:50px;

            padding: 20px;
}
.resultat {
            background-color: #d4edda; /* Vert pâle pour le succès */
            color: #155724;            /* Texte vert foncé */
            border: 1px solid #c3e6cb; /* Bordure verte légère */
            padding: 15px;
            border-radius: 5px;
            margin: 20px auto;
            width: 50%;
            text-align: center;
            font-family: Arial, sans-serif;
            font-size: 16px;
        }
.profil-photo {
    width: 100px;              /* Largeur de l'image (taille ajustable selon besoin) */
    height: 100px;             /* Hauteur de l'image égale à la largeur pour obtenir un cercle */
    border-radius: 50%;        /* Le border-radius de 50% crée le cercle */
    object-fit: cover;         /* Assure que l'image couvre toute la zone sans être déformée */
    border: 2px solid #ddd;    /* Bordure fine autour de l'image */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  /* Légère ombre pour un effet élégant */
    display: block;
    float:left;
}

.profil-photo-3{

    width: 40px;              /* Largeur de l'image (taille ajustable selon besoin) */
    height: 40px;             /* Hauteur de l'image égale à la largeur pour obtenir un cercle */
    border-radius: 50%;        /* Le border-radius de 50% crée le cercle */
    object-fit: cover;         /* Assure que l'image couvre toute la zone sans être déformée */
    border: 2px solid #ddd;    /* Bordure fine autour de l'image */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  /* Légère ombre pour un effet élégant */
    display: block;
    float:left;
    margin-right:20px;
}
a.voirleprofil{
 clear:both;
 display:block;
 width:100%;
    border-radius: 15px;

    color: black !important;
    padding:5px;
    margin-top:5px;
    font-size:1.2em;


}
h2.dodoville{
 display:block;
 font-size:1.6em !important;
 text-align:center;
 width:100%;
}
  .liste_title {
    display: flex;
    align-items: center;
    margin-bottom:5px;
    font-size:1.6em;
}
.liste_title .voirname{
 font-size:1.1em;  float:left;width: calc(100% - 60px);
}

.liste_title .voirprofil{
 font-size:0.55em;
 background-color:#e2e5e9;
 border-radius:5px;
  float:left;
  box-sizing:border-box;padding:0px 4px 0px 4px;
}
.leaflet-popup-content{
 min-width:245px;
 margin: 10px !important;
}
.lien_facebook a{
    text-transform:lowercase;
    font-weight:bold;
}
.lien_facebook a:hover{
    text-decoration:underline;
}
.lien_facebook i{
  margin-right:10px;
}

.profil-photo-3,
.bi-person-circle {
    margin-right: 10px; /* Ajustez la marge selon votre besoin */
}
.profil-sans-photo{
display: block;
  float: left;
  margin-right: 10px;
    margin-top: -5px;
}
.liste_title i{
    font-size:40px;
}
#profilCard {
    width: 100%;
    margin: 20px auto;
    max-width: 1100px;
    background-color: #f9f9f9;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}
.card-title {
    font-size: 1.5em;
    font-weight: bold;
}

.card-body p, .card-body ul {
    margin-bottom: 8px;
    font-size: 1.05em;
}

.card-body h4, .card-body h5 {
    color: #61b1b2;
    margin-top: 25px;
    font-size: 1.2em;
    margin-bottom:5px;
}

#card-intro h4, #card-intro h5 {
    color: #dd5762;
}
#leprofil h4, #leprofil h5 {
    color: #4f6ee2;
}
#lecontact h4, #lecontact h5 {
    color: #f4cb73;
}


.profil-photo-2 {
    width: 130px;              /* Largeur de l'image (taille ajustable selon besoin) */
    height: 130px;             /* Hauteur de l'image égale à la largeur pour obtenir un cercle */
    border-radius: 50%;        /* Le border-radius de 50% crée le cercle */
    object-fit: cover;         /* Assure que l'image couvre toute la zone sans être déformée */
    border: 2px solid #ddd;    /* Bordure fine autour de l'image */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  /* Légère ombre pour un effet élégant */
    display: block;
    margin:0 auto;
}

.mamotivation{
 font-size:1.2em;
 text-align:center;
}
.iconprofil{
 display:block;
 text-align:center;
 width:center;font-size:2.5em;
}

.card-tiers {
    display: flex;
    width: 100%;
}

/* Style de chaque boîte */
.box {
    flex: 1;
    padding: 20px;
    text-align: center;
    border:0;

}
.box i{
 font-size:2em;
  color: #888;
    cursor: pointer;
    transition: color 0.3s;
}


.box i:hover {
    color: #333;
}

.box:first-child i {
    color: #dd5762;
}
.box:first-child i:hover {
    color: #888;
}


#container_miniwh {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px; /* pour ajouter un espace entre les blocs */
}
#container_miniwh .modeyellow{
 background-color: #fff9c4; /* Jaune clair pastel */
  color: #444;
  border: 1px solid #f0e68c;
  transition: background-color 0.3s ease;
}
#container_miniwh .bi-star-fill{
color: #ffc107;

}

#container_miniwh .modegris {
  background-color: #f0f0f0;
  color: #666;
  border: 1px solid #ccc;
  transition: background-color 0.3s ease;
}
#container_miniwh .moderedfill {
  background-color: #f8d7da; /* Rouge clair pastel (alerte) */
  color: #721c24; /* Rouge foncé pour le texte */
  border: 1px solid #f5c6cb;
  transition: background-color 0.3s ease;
}

#container_miniwh .bi-slash-circle-fill {
  color: #dc3545; /* Rouge Bootstrap */
}
.specialAPP h1{
  display:none;

}
#container_miniwh .modered {
   background-color: #f0f0f0;
  color: #666;
  border: 1px solid #ccc;
  transition: background-color 0.3s ease;
}
.miniwh{
 border:1x solid black;
 width:100%;
 display:inline-block;
 max-width:200px;
 color:black;
 font-size:1em;
 border:1px solid black;
 border-radius:15px;
 text-align:center;
 padding:3px;margin-top:30px;

}

.lescards {
    display: block;
    width: 100%;
    padding: 2em;
    border: 0;
    transition: transform 0.3s, box-shadow 0.3s; /* Transition douce */
    margin: 20px 0; /* Espacement externe */
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
}

.lescards:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Ombre plus marquée au survol */
}
.lescards h5 i{
 font-size:1.55em;
 margin-right:10px;
}
#intro-profil{

    padding-bottom: 60px;
    border-bottom: 2px solid #ccc;
    margin-bottom:40px;
}
#intro-profil p{

 font-size: 1.4em;
    color: #555;
    margin-top: 10px;
    line-height: 1.6;
    font-style: italic;
    text-align: center;
}
#intro-profil p::before {
    content: '" '; /* Ajoute un guillemet ouvrant */
}

#intro-profil p::after {
    content: ' "'; /* Ajoute un guillemet fermant */
}
.coloryellow { color: #FFD54F !important; }
 .colorgreen{color:#5bb85d !important;}
 .colorblueclair{color:#689dc7 !important;}
 .colorblue{color:#347ab6 !important;}
 .colorred{color:#d9544f !important;}
 .colorblack{color:#000000 !important;}
 .colorgrey{color:#5A5A5A !important;}
 .colorviolet{color:#7c78b5 !important;}
 .colororange{color:#efad4d !important;}
 .colorwhite{color:#FFFFFF !important;}

.bgcoloryellow { background-color: #FFD54F !important; color: #000 !important; }
 .bgcolorgreen{background-color:#5bb85d !important;}
 .bgcolorgreenclair{background-color:#d1e9d5 !important;}
 .bgcolorblueclair{background-color:#689dc7 !important;}
 .bgcolorgrisclair{background-color:#ececef !important;}
 .bgcolorblue{background-color:#347ab6 !important;}
 .bgcolorred{background-color:#d9544f !important;}
 .bgcolorblack{background-color:#000000 !important;}
 .bgcolorgrey{background-color:#5A5A5A !important;}
 .bgcolorgreyclair{background-color:#e4e4e4 !important;}
 .bgcolorviolet{background-color:#7c78b5 !important;}
 .bgcolororange{background-color:#efad4d !important;}
 .bgcolororangeclair{background-color:#facb86 !important;}

.alignleft{ text-align:left !important;}
.alignright{ text-align:right !important;}
.aligncenter{text-align:center !important;}

  table.laravel{
width:100%;
font-size:1.1em;
}
 table.tableflex{
    overflow-x: auto;
    display: flex;
    padding-bottom: 1em;
}
 .laravel td{
box-sizing:border-box;
padding:10px;
font-size:0.9em;
min-width:90px;
text-align:center;
border-bottom: 1px solid #ddd;
}

 .laravel th{
box-sizing:border-box;
font-weight:normal;
padding:5px;
}

 .laravel a{
color:black;

text-decoration:none;
}
 .laravel a:hover{
text-decoration:underline;
}


#mestraces {
    margin-top: 20px; /* Espacement entre le formulaire et la liste */
    padding: 20px; /* Ajoute un peu de remplissage autour de la liste */
    background-color: #ffffff; /* Couleur de fond pour le bloc */
    border-radius: 10px; /* Coins arrondis */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Ombre légère */
}
#mesinfos {
    width:100%;
      font-size: 1.3em;
padding:20px}
#mestraces h2 {
    margin-bottom: 15px; /* Espacement sous le titre */
    font-size: 24px; /* Taille de police du titre */
    color: #333; /* Couleur du texte du titre */
}



.trace-item {
    display: flex; /* Utilisation de flexbox pour aligner les éléments */
    justify-content: space-between; /* Espace entre les éléments */
    align-items: center; /* Centrer verticalement les éléments */
    padding: 10px; /* Ajoute du remplissage autour de chaque élément */
    border-bottom: 1px solid #e0e0e0; /* Ligne de séparation entre les éléments */
    font-size: 18px; /* Taille de police pour les éléments */
    color: #555; /* Couleur du texte */
}




.trace-item:last-child {
    border-bottom: none; /* Supprime la ligne de séparation pour le dernier élément */
}

.trace-name {
    color: #333; /* Couleur pour le nom de la trace */
    flex: 1; /* Permet au nom de prendre l'espace restant */
}

.trace-distance {
    font-weight: bold; /* Gras pour la distance */
    color: #007BFF; /* Couleur pour la distance (modifiable selon vos préférences) */
    margin-right: 20px; /* Espace à droite de la distance */
}

.trace-item:hover {
    background-color: #f1f1f1; /* Change la couleur de fond au survol */
    cursor: pointer; /* Change le curseur au survol */
}



.trace-remove {
    color: red; /* Couleur rouge pour la croix */
    cursor: pointer; /* Change le curseur en pointeur */
    margin-left: 20px; /* Espacement à gauche de la croix */
    white-space: nowrap; /* Empêche le retour à la ligne */
}

#mademandedecontact {
    font-family: Arial, sans-serif;
    color: #333;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #ddd;
    max-width: 100%;
    margin: auto;
}

#mademandedecontact p {
line-height:1.2em;
}
#mademandedecontact .conseil{
font-size:0.9em;
display:block;
width:100%;
}
#mademandedecontact ul {
    list-style-type: none;
    padding: 0;
    font-size:0.95em;
}

#mademandedecontact li {

    margin-bottom: 12px;
}

#mademandedecontact li i {
    color: #efad4d;
    margin-right: 8px;
    font-size: 1.2em;
}

#mademandedecontact label {
    font-weight: bold;
    margin: 10px 0 5px;
    display: block;
}

#mademandedecontact input[type="date"],
#mademandedecontact input[type="number"],
#mademandedecontact textarea,#mademandedecontact select {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
    background-color:white;
}

#mademandedecontact textarea {
    min-height: 200px;
    resize: vertical;
}

#mademandedecontact input[type="submit"],#monguestbook input[type="submit"] {
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 12px 20px;
    font-size: 1em;
    cursor: pointer;
    width: 100%;
    transition: background-color 0.3s;
}

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

#monimgintro{
position:relative;
width:100%;
margin-bottom:1em;
}
#monimgintro img{
width:100%;
height:auto;
border-radius:25px;
}
#monimgintro h2{
color:white;
position:absolute;
left:5%;
bottom:8%;
margin:0;
padding:0;
text-transform:uppercase;
font-size:1.6em;
font-family:'Helvetica','Arial',sans-serif;
letter-spacing: -0.02em;
}
#monimgintro::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%; /* Ajustez la hauteur du dégradé si nécessaire */
    border-radius: 0 0 25px 25px; /* Coin inférieur arrondi pour s'aligner avec l'image */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
    pointer-events: none; /* Le dégradé n'interfère pas avec les clics */
}
.btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: .375rem .85rem .375rem .85rem;
    font-size: 0.8em;
    line-height: 1.3;
    border-radius: .25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.btn:hover{color:white;}
.btn-1 {
    color: #fff !important;
    background-color: #f4cb73;
    border-color: #f4cb73;
}
.btn-outline-1 {
    color: #f4cb73 !important;
    background-color: transparent;
    border-color: #f4cb73;
}

.btn-2 {
    color: #fff !important;
    background-color: #efa05d;
    border-color: #efa05d;
}
.btn-outline-2 {
    color: #efa05d !important;
    background-color: transparent;
    border-color: #efa05d;
}

.btn-3 {
    color: #fff !important;
    background-color: #e97b4e;
    border-color: #e97b4e;
}
.btn-outline-3 {
    color: #e97b4e !important;
    background-color: transparent;
    border-color: #e97b4e;
}

.btn-4 {
    color: #fff !important;
    background-color: #dd5762;
    border-color: #dd5762;
}
.btn-outline-4 {
    color: #dd5762 !important;
    background-color: transparent;
    border-color: #dd5762;
}
.btn-5 {
    color: #fff !important;
    background-color: #b2436c;
    border-color: #b2436c;
}
.btn-outline-5 {
    color: #b2436c !important;
    background-color: transparent;
    border-color: #b2436c;
}

.btn-6 {
    color: #fff !important;
    background-color: #5bc0de;
    border-color: #5bc0de;
}
.btn-outline-6 {
    color: #5bc0de !important;
    background-color: transparent;
    border-color: #5bc0de;
}
#approximation_poi{
width:100%;
text-align:right;
}
#approximation_poi .btn{
margin-left:0.3em;
}
/* Style de base des boutons */
a.btn:hover {
    cursor: pointer;
}
#blackbox h2{
font-size:1.4em;
}
#blackbox h3{
font-size:1.3em;
}
.legend {
  font-family: Arial, sans-serif;
  color: #333;
}
.legend-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;font-size: 0.9em;
}

.legend-icon {
  width: 24px;
  height: auto;
  margin-right: 10px;
}
.legend-icon-tent {

  width: 30px;
    height: auto;
    margin-right: 10px;
}

.legend .highlight {
  font-weight: bold;
  color: #f97300; /* Couleur de mise en évidence */
  margin-right:10px;
  font-size: 1em;
}
.legend i{
  margin-left:10px;
}
.voirmoncyclo{
background-color:#e1f745;
width:100%;
display:block;
text-align:center;
border-radius: 15px;
font-size:1.4em;
font-weight:normal;color:black !important;
padding:10px;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.voirmoncyclo:hover{
    background-color:#c2d72f;
    color:black!important;
}
#monformulairecycliste {
    background-color: #f9f9f9; /* Fond clair */
    border: 2px solid #e1f745; /* Bordure jaune */
    padding: 20px;
    border-radius: 10px;
    max-width: 600px;
    margin: 30px auto;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    font-family: Arial, sans-serif;
    color: #333; /* Texte sombre pour contraste */
}

#monformulairecycliste label {
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
    display: block;
}

#monformulairecycliste input,
#monformulairecycliste select,
#monformulairecycliste textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: white;
    font-size: 1em;
    color: #333;
}

#monformulairecycliste input[type="checkbox"],
#monformulairecycliste input[type="radio"] {
    width: auto;
    margin-right: 8px;
}
#monformulairecycliste input[type="radio"],
#monformulairecycliste label[for="partage_oui"],
#monformulairecycliste label[for="partage_non"],
#monformulairecycliste label[for="profil_oui"],
#monformulairecycliste label[for="profil_non"] {
    display: inline-block;
    margin-right: 10px;
}

#monformulairecycliste div[style*="inline-flex"] {
    gap: 10px; /* Espacement entre les éléments */
    align-items: center; /* Aligne verticalement */
}


#monformulairecycliste input:focus,
#monformulairecycliste select:focus,
#monformulairecycliste textarea:focus {
    outline: none;
    border-color: #e1f745;
    box-shadow: 0 0 5px #e1f745;
}

#monformulairecycliste input[type="submit"] {
 background-color: #f4f76e; /* Légèrement différent de #e1f745 */
    color: black; /* Texte blanc */
    border: none; /* Pas de bordure */
    padding: 10px 20px; /* Espacement interne */
    border-radius: 5px; /* Coins arrondis */
    cursor: pointer; /* Curseur pointeur */
    width: 100%; /* Bouton large */
    box-sizing: border-box; /* Inclut les bordures et les paddings */
    font-size: 1.1em; /* Taille de texte légèrement plus grande */
    font-weight: normal; /* Texte en gras */
    text-align: center; /* Centre le texte */
    transition: background-color 0.3s ease; /* Transition douce */
}

#monformulairecycliste input[type="submit"]:hover {
    background-color: #c2d72f;
}

#monformulairecycliste textarea {
    resize: vertical;
}

/* Spécifique aux groupes de boutons radio et checkbox */
#monformulairecycliste div#hebergement label {
    display: inline-block;
    margin-bottom: 10px;
    cursor: pointer;
}
#list_voyages {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espacement entre les lignes */
    padding: 10px;
}

.ligne_voyage {
    display: flex;
    flex-direction: column;
    background-color: #f9f9f9; /* Fond clair */
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Ombre légère */
    font-size: 1em; /* Taille de police adaptée */
    line-height: 1.5; /* Meilleure lisibilité */
}

.ligne_voyage div {
    margin-bottom: 8px; /* Espacement entre les éléments */
}

.ligne_voyage a {
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1em;
}

.ligne_voyage a:hover {
    text-decoration: underline;
}

.ligne_voyage:last-child {
    margin-bottom: 0;
}
.storage-bar {
  font-family: sans-serif;
  width: 100%;
}

.storage-bar .label {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 4px;
}

.storage-bar .label span {
  color: #888;
  font-size: 12px;
}

.storage-bar .bar {
  width: 100%;
  height: 10px;
  background-color: #eee;
  border-radius: 6px;
  overflow: hidden;
}

.storage-bar .fill {
  height: 100%;
  background-color: #5e4bff; /* violet style */
  width: 0%;
  border-radius: 6px 0 0 6px;
  transition: width 0.4s ease;
}