:root{

--vert:    #66bb6a;

--bleu:#1565c0;

--fond:#f4f6f8;

--ombre:
0 4px 12px rgba(0,0,0,.15);

}



*{
box-sizing:border-box;
}


html,
body{

margin:0;

height:100%;

font-family:
Segoe UI,Arial;

background:
var(--fond);

}




header{

background:
linear-gradient(
135deg,
    #388e3c,
    #66bb6a
);

color:white;

text-align:center;

padding:20px 20px;


}



header h1{

    margin:0;

    font-size:28px;

}


header p{

    margin:4px 0 0;

}



#barreBoutons{

    height:50px;

    display:flex;

       justify-content:left; /* position des boutons */

    align-items:center;

    gap:15px;               /* espace entre les boutons */

    padding:0 20px;

    background:white;

    box-shadow:0 3px 10px rgba(0,0,0,.08);

}




#application{

display:grid;

grid-template-columns:

3fr 1fr;

gap:15px;

height:
calc(100vh - 160px);

padding:15px;

}



#mapContainer{

background:white;

border-radius:12px;

box-shadow:var(--ombre);

overflow:hidden;

}



#map{

height:100%;

width:100%;

}



#panneauDroite{

overflow:auto;

}



.bloc{

background:white;

padding:20px;

border-radius:12px;

box-shadow:var(--ombre);

}



label{

display:block;

margin-top:15px;

font-weight:bold;

}



select,
textarea{


width:100%;


padding:10px;


margin-top:5px;


border-radius:8px;


border:1px solid #ccc;


font-size:15px;


}



textarea{

height:90px;

resize:none;

}




button{


width:100%;


margin-top:15px;


padding:12px;


border:none;


border-radius:8px;


background:

var(--vert);


color:white;


font-size:16px;


cursor:pointer;


}

buttonsup{


  width:250px;          /* largeur du bouton */


margin-top:5px;

margin-bottom: 5px;

padding:5px;


    border:1px solid #c5c3c3; /* bordure grise */
    border-radius:8px;


    background:#ffffff; 
    color:#000000; /* Texte noir pour être visible */


font-size:16px;


cursor:pointer;

    text-align:center;

}



button:hover{

opacity:.85;

}




#etat{


margin-top:15px;


background:#eee;


padding:10px;


border-radius:8px;


}




.pointListe{


background:#fafafa;


border-left:

5px solid

var(--bleu);


padding:10px;


margin-bottom:10px;


border-radius:8px;


}



.pointListe button{

background:#c62828;

font-size:14px;

margin-top:8px;

}



footer{

height:40px;

background:white;

text-align:center;

padding:10px;

}




@media(max-width:900px){


#application{

grid-template-columns:1fr;

height:auto;

}


#mapContainer{

height:60vh;

}


}

#notePoint {

    width:100%;

    min-height:25px;

    max-height:45px;

    resize:vertical;

}

#textePoint {

    width:100%;

    min-height:80px;

    max-height:250px;

    resize:vertical;

}

.pointAnnexe{

    background:transparent;

    border:none;

    font-size:28px;

    text-align:center;

}

.marqueurPoint {

    display:flex;

    align-items:center;

    gap:2px;

    font-size:18px;

    background:none;

    padding:3px 6px;

    border-radius:0;

    box-shadow:
    none;

}


.numeroPoint {

   
  

    font-weight:bold;

    width:52px;            /* diamètre */

    height:22px;

    border-radius:50%;    /* forme ronde */

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;       /* taille du chiffre */

        margin-left:0px;
        
}


.iconePoint {

    font-size:24px;

}

/* =====================================================
   ACCORDEON PANNEAU DROIT
===================================================== */


.titreAccordeon {

    cursor:pointer;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:#f1f8e9;

    padding:12px;

    border-radius:10px;

    user-select:none;

}


.titreAccordeon span {

    transition:.3s;

}




.contenuAccordeon {
    overflow: hidden;
    transition: max-height .35s ease;
    max-height: 1000px;
}

.accord.ferme .contenuAccordeon {
    max-height: 0;
}



.accord.ferme .contenuAccordeon {

    max-height:0;

}



.accord.ferme .titreAccordeon span {

    transform:rotate(-90deg);

}

.titreListe {

    display:flex;
    justify-content:space-between;
    align-items:center;

}


#distanceTotale {

    background:#e3f2fd;

    color:#1565c0;

    padding:8px 12px;

    border-radius:10px;

    font-weight:bold;

    font-size:14px;

}

.ligne {

    display:grid;

    grid-template-columns:
    25px
    80px
    90px
    20px
    160px
    140px
    auto;


    align-items:center;

    gap:8px;


    background:#fafafa;

    border-left: none;


     padding:2px 6px;

    margin-bottom:4px;

    border-radius:4px;

    cursor:pointer;
    
    line-height:1.1;

    font-size:14px;

}


.ligne:hover {

    background:#e3f2fd;

}


.colNumero {

    font-weight:bold;

}


.colTitre {

    font-weight:bold;

}


.colDirection,
.colNote {

    font-size:14px;

}


.colCoordonnees {

    color:#555;

    font-size:13px;

}


header {
    position: relative;
}

.header-actions {
    position: absolute;
    right: 15px;
    top: 12px;

    display: flex;
    gap: 8px;
}

.header-actions a {
    text-decoration: none;
    font-size: 22px;
    opacity: 0.65;
    transition: opacity 0.2s, transform 0.2s;
}

.header-actions a:hover {
    opacity: 1;
    transform: scale(1.1);
}

#map.mode-creation .leaflet-marker-icon {
    pointer-events: none;
}


.header-parcours {
    position: absolute;
    left: 15px;
    top: 12px;

    display: flex;
    gap: 8px;
}

.header-parcours a {
    text-decoration: none;
    font-size: 22px;
    opacity: 0.65;
    transition: opacity 0.2s, transform 0.2s;
}

.header-parcours a:hover {
    opacity: 1;
    transform: scale(1.1);
}

.fenetre-parcours {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.fenetre-parcours-contenu {
    background: white;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.3);
}

.fenetre-parcours-titre {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
}

.ligne-parcours {
    padding: 12px;
    margin-bottom: 8px;
    background: #f2f2f2;
    border-radius: 6px;
}