/* ---- Général pour remplacer class mdl----*/
/* RESET + BASE */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  font-family: Roboto, Arial, sans-serif;
  background: #f5f5f5;
  color: #616161;
}
.title {
  flex: 1 1 auto;
  font-size: 1.7em ;
  text-align: center;
  margin: auto; 
}

.mdl-rando{
/* 
background-color: #F5F5F5; /* gris 100 */

 background-color: #E0E0E0; /* gris 300 */
 color: #616161; /* gris 700 */

}

/* Base générale (remplace mdl-base) */
.app {
  min-height: 100%;
  font-family: Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background-color: #f5f5f5;   /* grey-100 */
  color: #616161;              /* grey-700 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* LAYOUT */
.layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* HEADER */
.header {
  background: #607d8b;
  color: white;
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Header top (logo + titre) */
.header-top {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: #e0e0e0;
}

.header-top .title {
  font-size: 1.8rem;
  font-weight: 500;
  color: #000;
}

.logo {
  max-height: 70px;
}

/* NAV / TABS */
.tabs {
  display: flex;
  flex-wrap: wrap;
  background: #455a64;
}

.tabs a {
  padding: 1rem 1.2rem;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.85rem;
  transition: background 0.2s;
}

.tabs a:hover,
.tabs a:focus {
  background: rgba(255, 255, 255, 0.15);
}

/* CONTENT */
.content {
  flex: 1;
  padding: 2rem;
  background: #e0e0e0;
}

/* FOOTER */
.footer {
  background: #455a64;
  color: white;
  text-align: center;
  padding: 1rem;
  font-size: 0.85rem;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .header-top {
    flex-direction: column;
    text-align: center;
  }

  .tabs {
    justify-content: center;
  }
}





/* ---- Général ----*/



 
.divRandos{
    border: 2px solid #A2A2A2 ;   
    padding : 10px;  
    width : 1000px;
    margin:auto; 
    margin-top: 10px;
    font-size:14pt;     
}

.titre {
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    padding:5px;
    text-align: center;
    font-weight: bold;
    font-size:14pt; 
    background-color:lightslategrey;
    color : white;
}

.titreinfos {
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    padding:5px;
    text-align: center;
    font-weight: bold;
    font-size:12pt; 
    background-color:lightslategrey;
    color : white;
}

#commentaire {
    font-style: italic;
    text-align: center;
    width : 400px;
}


span {
    margin-left: 10px;
    color: #555;
    font-size:12pt;
    span.text12Gris {
    color: #555;    
    }
}


div.text12Gris {
    color: #555;              /* texte gris foncé */
    font-size:12pt;
    margin-top:8px;
}


label.EvtGris180{
    width:180px;
    color: #A0A070;
    font-size:12pt;
    margin-top:8px;
    display: inline-block;
} 

label.EvtGris100{
    width:100px;
    color: #A0A070;
    font-size:12pt;
    margin-top:8px;
    display: inline-block;
} 

label.Message{
    width:auto;
    color: #A0A070;
    font-size:12pt;
    margin-top:8px;
    display: inline-block;
} 
#span10 {
    font-style: italic;
    color: #A2A2A2;
    font-size:10pt;
}

.button {
    display: flex;
    justify-content: center;
}

.centre {
    text-align: center;
}
/*---- Vue list.twig -------------*/
/* Cadre autour des deux blocs */

.encadrement {
    border: 2px solid #A2A2A2;
    padding: 20px;
    max-width: 1150px;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    align-items: stretch;
}

.deuxblocs {
    display: flex;
    flex-direction: row; /* IMPORTANT */
    gap: 20px;
}

/* Même dimensions */
.bloc-image,
.bloc-texte {
    flex: 1;
    height: 300px;
}

/* Image */
.bloc-image {
    background: #f2f2f2;
}

.bloc-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Texte */
.bloc-texte {
    background: #eaeaea;
    padding: 20px;
    box-sizing: border-box;
}



/* ---- responsive ----*/
@media (max-width: 700px) {
    .encadrement {
        flex-direction: column;
    }

    .bloc-image,
    .bloc-texte {
        height: auto;
        min-height: 250px;
    }
}



/* ---- Tableau -----*/

table {  
  width : 1000px; 
  height: 200px;
  margin:auto;
  overflow: scroll;  
}

.tableInterne {  
  width : 1000px;  
  margin:auto;  
} 

th, td {
  border: 2px solid lightslategrey;
  padding : 4px;
  font-weight: bold;
  background-color:white;
  overflow-x: auto;
}
 
.tableInterne  td {
  border: 0;
  padding : 4px;
  font-weight: bold;
  background-color:white;
}

/*------------- Vues Longe Côte --------------*/

/* encadrement du bloc image et du bloc texte */
.cadrelongecote {
    margin:auto;
    margin-top: 10px;
    display: flex ;
    box-sizing: border-box;
    height: auto;
    gap: 10px;

}
/* Conteneur image contraint Longe Côte */
.detailimagelongecote {
    flex: 0 0 200px;
    max-width: 200px;    
    overflow: hidden;
    background: #f5f5f5; /* fond neutre */
    display: flex;
    align-items: center;      /* centre verticalement */
    justify-content: center;  /* centre horizontalement */
}
/* Ne pas afficher "detailimagelongecote" sur petits écrans (< 600px) */
@media (max-width: 600px) {
    .detailimagelongecote {
        display: none;
    }
}

.texteLongeCote{
    flex : 1 ;
    min-width: 0;
    padding: 10px;
    margin: 0 auto;
    /*align-items: center;      /* centre verticalement */
    /*justify-content: center;  /* centre horizontalement */
    background: #f5f5f5; /* fond neutre */
    text-align: left;
    display: block;
}
.titreLCinfos {
    margin: auto;
    padding:5px;
    text-align: center;
    font-weight: bold;
    font-size:12pt; 
    background-color:lightslategrey;
    color : white;
    writing-mode: horizontal-tb !important;
    text-orientation: initial !important;
    transform: none !important;
    white-space: normal;
}

.LCtext12Gris {
    display: grid;
    place-items: center;
    color: #555;              /* texte gris foncé */
    font-size:12pt;
    margin-top:8px;   
}

.QuestionLongeCote{
    background-color:white;
    margin:auto;
    width: auto;
    height: 150px !important;
    box-sizing: border-box;
    text-align: center;
}
.detailLongeCote{
    background-color:white;
    margin-bottom:20px; 
    margin-right:20px;
    width: auto;
    height: 380px !important;
    box-sizing: border-box;
    text-align: center;
}


img#randoslongecote {
  height: 80%;
  width: 100%;
  margin: auto ;  
  display: none;
}

@media (max-width: 600px) {
    img#randoslongecote {
        display: block;;
    }
}


.detailimagelongecote img#listlongecote {          
    
    width: 100%;
    height: 100%; 
    object-fit: cover;
    align-items: center;      /* centre verticalement */
    justify-content: center;  /* centre horizontalement */
    object-position: center ;
    /*display: block;*/
}
 /* Ne pas afficher "listlongecote" sur  petits écrans (< 600px) */
@media (max-width: 600px) {
    .detailimagelongecote img#listlongecote {
        display: none;;
    }
}

/* ------ Vue Randonnées ---------*/

/* encadrement du bloc image et du bloc texte */
.cadrepourrando {
    margin:auto;
    margin-top: 10px;
    display: flex ;
    box-sizing: border-box;
    height: auto;
    align-items: stretch;
    flex-direction: row; 
    gap: 10px;
    border: 2px solid #A2A2A2;

}

.blocimagetexte {
    margin:auto;
    margin-top: 10px;
    display: flex ;
    box-sizing: border-box;
    height: 420px;
    gap: 10px;
}


/* Conteneur image contraint Randonnée */
.detailimage {    
    max-width: 400px;
    max-height: 400px;
    overflow: hidden;
    margin: 0 auto;
    display: flex;
    align-items: center;      /* centre verticalement */
    justify-content: center;  /* centre horizontalement */
    background: #f5f5f5; /* fond neutre */
   
}


  .detailimage img#list {
    max-width: 100%;
    width: auto;
    height: auto; 
    object-fit: contain;
    object-position: center ;
  }
}

/*
.detailimage {
    outline: 2px solid blue;
}

.detailimage img#list {
    outline: 2px dashed red;
}
*/

@media (max-width: 460px) {

  .cadrepourrando {
    flex-direction: column !important;
    align-items: stretch; /* important */
  }

  .detailimage,
  .detailinfospropose {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  .detailimage img {
    max-width: 100%;
    height: auto;
  }
}



/*--------- Colonne Infos -------------*/

#detailFrameR{
    flex : 1 ;
    background-color:white;
    min-width: 0;
    padding: 10px;
    margin: 0 auto;
    text-align: left; 
    display: block;
}
.detailinfospropose{
    flex : 1 ;
    background-color:white;
    min-width: 0;
    padding: 10px;
    margin: 0 auto;
    text-align: left; 
}

@media (max-width: 460px) {
  .detailinfospropose {
     flex : none ;
    width: 100%;
    max-width: 100%;
    margin: 0;          /* annule le centrage */
    flex: none;         /* optionnel mais propre en colonne */
  }
}


#detailFrameR2{
    background-color:white;
    margin-bottom:20px;
    display: flex; 
    height: 80px !important;
    margin-left: 5%;
    justify-content: center;  /* centre horizontalement */
}



.detailfichiers{
    background-color:white;
    margin:auto;
    display: flex; 
    height: 80px ;
    width: auto ;
    /*margin-left: 5%;*/
    justify-content: center;  /* centre horizontalement */
}
/* Tablette */
@media (max-width: 768px) {
    .detailinfos {
        width: 350px;
        height: 350px;
    }
}

/* Mobile */
@media (max-width: 450px) {
    .detailinfos {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
    }
}



.texteR,
.texteDL {
    background-color: grey;
    margin-bottom: 20px;
    box-shadow: none;   /* important */
    border-radius: 0;  /* optionnel */
}

.texteR {
    font-size: 0.95em;
    line-height: 1.4;
    padding: 12px 16px;
}


/*-----colonne téléchargements-------*/

img#detailillust{
    width: 100px;
    height: 70px;     
}

/* ---Affichage des activités pédestres proposées 
en fonction taille de l'écran */
/* ---Affichage ou Non de la carte dans resultat-propose.twig----*/
/* Masqué par défaut */
.bloc-desktop { display: none; }

/* Affiché pour tablettes ou desktops */
@media (min-width: 700px) {
    .bloc-desktop { display: block; }
}

/* ---Affichage ou Non de la liste des propositions dans resultat-propose.twig----*/
/* Masqué par défaut */
.bloc-liste-mobile { display: none; }

/* Affiché pour les petits écrans */
@media (max-width: 700px) {
    .bloc-liste-mobile { display: block; }
}
/* ------ Vue randos pour mobile ------*/

.cadrepourrandomobile {
    margin:auto;
    margin-top: 10px;
    display: flex ;
    box-sizing: border-box;
    height: auto;
    flex-direction: column; /* IMPORTANT */
    gap: 10px;
    border: 2px solid #A2A2A2;

}

/* Conteneur image contraint Randonnée */
.detailimagemobile {    
    max-width: 300px;
    max-height: 300px;
    overflow: hidden;
    margin: 0 auto;
    display: flex;
    align-items: center;      /* centre verticalement */
    justify-content: center;  /* centre horizontalement */
    background: #f5f5f5; /* fond neutre */
   
}

.detailimagemobile img#listmobile {          
    max-width: 300px;
    width: auto;
    height: auto; 
    object-fit: contain;
    object-position: center ;
   
}

/*
.detailimage {
    outline: 2px solid blue;
}

.detailimage img#list {
    outline: 2px dashed red;
}
*/


/* Tablette */
@media (max-width: 768px) {
    .detailimagemobile {
        width: 300px;
        height: 300px;
    }
}

/* Mobile */
@media (max-width: 450px) {
    .detailimagemobile {
        width: auto;
        height: auto;
        aspect-ratio: 4 / 3;
    }
}
.detailinfosmobile{

    max-width: 300px;
    max-height: 500px;
    overflow: hidden;
    margin: 0 auto;
    display: flex;
    align-items: center;      /* centre verticalement */
    justify-content: center;  /* centre horizontalement */
    background: #f5f5f5; /* fond neutre */
    text-align: center;
}

/* Suppression d'une rando avec demande de confirmation */
/* Le form ne casse pas la ligne */
.delete-form {
    display: inline;
}

/* Le bouton ressemble à un lien */
.delete-link {
    background: none;
    border: none;
    padding: 0;

    color: #c0392b;        /* rouge discret */
    text-decoration: underline;
    cursor: pointer;

    font: inherit;        /* même police que le reste */
}

/* Effet au survol */
.delete-link:hover {
    color: #e74c3c;
}