/* Copyright (C) 2025
 * Calmel, Blaise (1)
 * Héraut, Louis (1) <louis.heraut@inrae.fr>
 * Vidal, Jean-Philippe (1) <jean-philippe.vidal@inrae.fr>
 *
 * (1) INRAE, UR RiverLy, Villeurbanne, France.
 *
 * This file is part of MEANDRE-TRACC.
 *
 * MEANDRE-TRACC is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * MEANDRE-TRACC is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 * General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with MEANDRE-TRACC.
 * If not, see https://www.gnu.org/licenses/.
 */


.gallery-item,
.gallery-item-small,
.gallery-arrow {
    border: 3px solid #ffffff;
    background-color: #ffffff;
    padding: 1rem 1rem;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    display: flex;
    width: fit-content;
    height: fit-content;
}
.gallery-item-small {
    padding: 0.5rem 1rem;
}
.gallery-arrow {
    padding: 0.1rem 0.1rem;
    cursor: pointer;
}
.gallery-item.no-fit {
    width: unset;
    height: unset;
}
.gallery-item.fill {
    width: 100%;
    height: 100%;
}
.gallery-item.full-width {
    width: 100%;
    height: unset;
}
.gallery-item a:hover {
    color: #70757A;
}
.gallery-item a img {
    transition: filter 0.05s ease;
}
.gallery-item a:hover img {
    filter: grayscale(100%);
}


.rapport_thumbnail {
    height: 10rem;
}


.grid-cross {
    cursor: pointer;
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    font-size: 0.9rem;
}

.gallery-item.warning {
    border: 3px solid #060508;
}
p.warning {
    font-weight: 600 !important;
}



.gallery h1 {
    font-family: "Zen Tokyo Zoo", sans-serif;
    font-weight: 400;
    font-size: 3rem;
    margin-top: 0rem;
    margin-bottom: 0rem;
    display: inline;
    text-wrap: balance;
    hyphens: manual;
    word-break: break-word;
    overflow-wrap: break-word;
}
.gallery-item .h1b {
    font-family: "Monoton", sans-serif;
    font-size: 2.5rem;
}
.gallery-item .nowrap {
    white-space: nowrap;
}
.gallery h2 {
    font-family: "Raleway", sans-serif;
    font-weight: 700;
    font-size: 2rem;
    margin-top: 0rem;
    margin-bottom: 0rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-wrap: balance;
    hyphens: manual;
    word-break: break-word;
    overflow-wrap: break-word;
}
.gallery h3 {
    font-family: "Raleway", sans-serif;
    font-weight: 400;
    font-size: 1.2rem;
    margin-top: 0rem;
    margin-bottom: 0rem;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    text-wrap: balance;
    hyphens: manual;
    word-break: break-word;
    overflow-wrap: break-word;
}

.gallery p {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size: 1rem;
    margin-top: 0rem;
    margin-bottom: 0rem;
    display: inline;
    max-width: 38rem;
}
.gallery ul {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
.gallery ul.last {
    margin-bottom: 0rem;
}


#grid-colorbar {
    width: 5rem;
    display: flex;
    justify-content: center;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    min-height: 14.8rem;
}

#grid-variable {
    max-width: 20rem;
}
#grid-variable_variable {
    font-family: "Raleway", sans-serif;
    font-weight: 300;
    font-size: 3rem;
    color: #3d3e3e;
}
#grid-variable_name {
    font-family: "Raleway", sans-serif;
    font-weight: 400;
    font-size: 1.1rem;
    color: #3d3e3e;
}
#grid-variable_sampling-period {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size: 0.8rem;
    color: #89898a;
}


#grid-horizon {
    max-width: 27rem;
}
#grid-horizon_name {
    font-family: "Raleway", sans-serif;
    /* font-weight: 400; */
    font-size: 2rem;
    color: #3d3e3e;
}
#grid-horizon_period-l1 {
    font-family: "Raleway", sans-serif;
    font-size: 1rem;
    color: #3d3e3e;
}
#grid-horizon_period-l2 {
    font-family: "Raleway", sans-serif;
    font-size: 1rem;
    color: #3d3e3e;
}


#grid-n_number {
    font-family: "Raleway", sans-serif;
    font-weight: 500;
    font-size: 1rem;
    color: #3d3e3e;
}
.grid-n_text {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size: 0.9rem;
    color: #89898a;
    line-height: 0.8rem;
}



.colorbar-unit {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size: 0.7rem;
    fill: #70757A;
    
}


#grid-point {
    max-width: 15rem;
}
#grid-point_code-value {
    margin-bottom: 0.1rem;
}
#grid-point_code {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 0.8rem;
    color: #89898a;
    margin-bottom: 0.4rem;
}
#grid-point_name {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: 1.7rem;
    color: #3d3e3e;
    line-height: 1.7rem;
    margin-bottom: 0.5rem;
}

.grid-point_info {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 0.9rem;
    color: #3d3e3e;
}
.text-light {
    color: #70757A !important;
}
.nowrap {
    white-space: nowrap;
}

#grid-point_surface {
    margin-bottom: 0.3rem;
}

#grid-point_n {
    margin-top: 0.3rem;
}


#grid-chain_drawer-RCP {
    max-width: 27rem;
}


.grid-element_title {
    font-family: "Raleway", sans-serif;
    font-weight: 400;
    font-size: 1.2rem;
    color: #3d3e3e;
    line-height: 1.3rem;
    margin-bottom: 0.4rem;
}


#grid-mini-map_map {
    aspect-ratio: 1;
    height: 15rem;
    width: 15rem;
    overflow: hidden;
    display: flex;
}

#container-gwl-fiche {
    height: 19rem;
}

#grid-gwl {
    width: 9rem;
    height: 13.5rem;
}


#grid-fiche {
    width: auto;
    padding: 0.3rem 0.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
}
#export-fiche {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 0.3rem;
}


#grid-narratif {
    min-width: 46rem;
}
#grid-narratif_bunch {
    display: flex;
    flex-direction: column;
    row-gap: 0.8rem;
    width: fit-content;
    max-width: 100%;  
}

.button-narratif {
    display: flex;
    flex-direction: row;
    align-items: stretch; 
    text-align: left;
    padding: 0 0rem;
    /* column-gap: 0.5rem; */
    /* width: 100%; */
    width: auto;
    text-align: left;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #89898a;
}


.button-narratif .cell-line {
    border-radius: 0.1rem;
    width: 0;
    margin-right: 0rem;
    background-color: transparent;
    transition: margin-right 0.25s ease, width 0.25s ease, background-color 0.25s ease;
}
.button-narratif.selected .cell-line {
    width: 0.6rem;
    margin-right: 0.5rem;
}

.button-narratif .narratif-name {
    font-family: "Raleway", sans-serif;
    font-size: 1.1rem;
    opacity: 0.7;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    /* text-align: start; */
    column-gap: 1.2rem;
}
.button-narratif:hover .narratif-name {
    /* font-weight: bold; */
    opacity: 1;
}
.button-narratif.selected .narratif-name {
    font-weight: normal;
    opacity: 1;
}

.button-narratif .narratif-name-id {
    font-weight: 700;
}

.button-narratif .narratif-description {
    font-size: 1rem;
    font-weight: normal;
    display: flex;
    flex-direction: column;
    align-items: start;
    text-align: start; 
    
}
.button-narratif:hover .narratif-description {
    font-weight: normal;
}
.button-narratif.selected .narratif-description {
    font-weight: normal;
}
.button-narratif .narratif-description-chain {
    font-size: 0.7rem;
    font-weight: 500;
    color: #acacad;
    line-height: 0.9rem;
}
.button-narratif:hover .narratif-description-chain {
    color: #89898a;
}
.button-narratif.selected .narratif-description-chain {
    color: #89898a;
}



.info-table {
  width: 100%;
  table-layout: fixed;  /* force le respect des largeurs */
  border-collapse: collapse;
}

.col-20 {
  width: 20%;
}

.col-80 {
  width: 80%;
}



.grid-gwl_drawer {
    font-family: "Raleway", sans-serif;
    font-weight: 600;
    font-size: 1.2rem;
    color: #3d3e3e;
    line-height: 1.5rem;
    margin-bottom: 0.2rem;
}
.grid-gwl_text {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 1.2rem;
    color: #3d3e3e;
}

#bunch-gwl {
  display: flex;
  justify-content: center;
  align-items: center;
  /* gap: 10px; */
  margin-top: 0.7rem;
  /* height: 60%;    */
}


.button-gwl {
    font-family: 'Raleway', sans-serif;
    /* font-weight: 400; */
    font-size: 1.2rem;
    text-align: center;
    border-radius: 1rem;
    width: calc(100% - 1rem);
    display: flex;
    justify-content: center;
    align-items: center;
    height: fit-content;
    line-height: 1.8rem;
}
.button-gwl.selected.gwl15 {
    color: #ffffff;
    background-color: #faa91a;
}
.button-gwl.selected.gwl20 {
    color: #ffffff;
    background-color: #f06426;
}
.button-gwl.selected.gwl30 {
    color: #ffffff;
    background-color: #732401;
}

.button-gwl.selected.gwl15:hover {
    color: #ffffff;
    background-color: #fbb53a;
}
.button-gwl.selected.gwl20:hover {
    color: #ffffff;
    background-color: #f27a44;
}
.button-gwl.selected.gwl30:hover {
    color: #ffffff;
    background-color: #aa3501;
}

.button-gwl_text-deg {
    font-size: 1.6rem;
}
.button-gwl.selected  {
    font-weight: bold;
}




.grid-narrative_drawer {
    font-family: "Raleway", sans-serif;
    font-weight: 600;
    font-size: 1.2rem;
    color: #3d3e3e;
    line-height: 1.5rem;
    margin-bottom: 0.2rem;
}


.vertical-label {
  writing-mode: vertical-rl;   /* texte vertical */
  transform: rotate(180deg);   /* optionnel pour l'orienter correctement */
  font-size: 14px;
  font-weight: bold;
  margin-right: 8px;           /* espace avec la colorbar */
  text-align: center;
}

#grid-line-container {
    box-sizing: border-box;
    width: calc(100% - 6px - 1rem); 
}

#grid-line {
    box-sizing: border-box;
    width: calc(100% - 6px - 1rem); 
    min-height: 10rem;
    max-height: 20rem;
}
#grid-line_title {
    font-family: "Raleway", sans-serif;
    font-size: 1rem;
    color: #3d3e3e;
}
#grid-line_tooltip {
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 0.8rem;
    color: #3d3e3e;
    height: 1rem;
    position: relative;
    opacity: 0;   
}

.gallery-item.text {
    display: inline;
    max-width: 38rem;
}

.gallery-item.small-text {
    display: inline;
    max-width: 20rem;
}
.gallery-item.screenshot {
    width: 15rem;
}
.gallery-item.source {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 1.4rem;
    width: fit-content;
    height: fit-content;
    color: #3d3e3e;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gallery-item.source b {
    font-weight: 800;
}
.gallery-item.source:hover {
    color: #70757A;
}



@media (max-width: 768px) {
    .gallery h1 {
	font-size: 2.2rem;
    }
    .gallery-item .h1b {
	font-size: 1.8rem;
    }
    .gallery h2 {
	font-size: 1.8rem;
    }

}

@media (max-width: 90rem) {
    #grid-narratif {
	min-width: unset;
    }

    .button-narratif .narratif-name {
	flex-direction: column;
    }
}