/* GENERAL */

* {
    font-family: 'Segoe UI', sans-serif;
}

/* nuances de vert du site */
:root {
    --color-green-dark: #178c19;
    --color-green: #88cfa1;
    --color-green-light: #edf8f2;
}

body {
    padding-top: 0.75rem;
    padding-right: 2rem;
    padding-bottom: 2rem;
    padding-left: 2rem;
}

/* modifs pr overall */
a {
    text-decoration: none;
    color: var(--color-green-dark)
}

/* moins de padding sur petit écran */
@media (max-width: 768px) {
    .container {
        padding-left: 0px;
        padding-right: 0px;
    }
}

.container-fluid {
    padding: 1rem 0rem;
    margin-bottom: 1rem;
}

/* Broad working area with margins that scale with the viewport. */
.page-container-wide {
    width: min(96vw, 100%);
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 992px) {
    .analysis-input-grid>[class*="col-"] {
        padding-right: 1.5rem;
        padding-left: 1.5rem;
    }
}

/* style des boutons */
/* boutons généraux (verts) */
.btn-beige {
    background-color: var(--color-green);
    color: #2c2c2c;
    border: 1px solid var(--color-green);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

/* bordure verte tout le temps */
.btn-beige:hover,
.btn-beige:focus,
.btn-beige:active {
    border: 1px solid var(--color-green) !important;
}

/* bouton clear */
.btn-orange {
    background-color: #FAA18F;
    color: #2c2c2c;
    border: 1px solid #FAA18F;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

/* bordure orange tout le temps */
.btn-orange:hover,
.btn-orange:focus,
.btn-orange:active {
    border: 1px solid #FAA18F !important;
}


/* TABLEAU RESULTATS */

/* aligner verticalement les textes du tableau */
table th,
table td {
    vertical-align: middle;
}

/* style entêtes tableau */
.table thead th {
    background-color: var(--color-green);
    color: #2c2c2c;
}

/* surlignage entêtes qd hover */
th:hover {
    text-decoration: underline;
}

/* style texte colonnes tableau */
.table tbody td {
    color: #2f2f2f;
}

/* enjambment level colors */

.enj-level-2 {
    //color: #9f1d20;
    color: #dc3545;
}

.enj-level-3 {
    //color: #0a58ca;    
    color: #0d6efd;
}

.enj-level-4 {
    //color: #146c43;
    color: #0dcaf0;
}

/* style backgrd colonnes tableau */
.table {
    --bs-table-bg: var(--color-green-light);
    --bs-table-hover-bg: #c9e9d4;
}

/* colonnes 5-6 contenant chiffres (métrique) sur 1 lg */
td:nth-child(5),
td:nth-child(6) {
    white-space: nowrap;
}

/* modifs pr analysis template */
table.dataTable thead th {
    text-align: center !important;
    white-space: normal !important;
    word-wrap: break-word;
    table-layout: auto !important;
}

/* style afficher/cacher Preprocessing */
.form-check-label {
    font-style: italic;
    color: #3a3a3a;
    cursor: pointer;
}

/* espace entre tableau et fct Search */
.dataTables_filter {
    margin-bottom: 0.5rem;
}

/*Poem type section.*/
.poem-type {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

/* For having a different table on mobile */

.mobile-table {
    display: none;
}

@media (max-width: 768px) {
    .desktop-table {
        display: none;
    }

    .mobile-table {
        display: block;
    }

    #myTableMobile {
        table-layout: fixed;
        width: 100% !important;
    }

    #myTableMobile th:first-child,
    #myTableMobile td:first-child {
        width: 2.75rem;
        padding-right: 0.5rem;
        padding-left: 0.25rem;
        white-space: nowrap;
    }

    #myTableMobile th:nth-child(2),
    #myTableMobile td:nth-child(2) {
        padding-left: 0.9rem;
    }

    #myTableMobile td {
        min-width: 0;
    }

    .rhyme-mobile-metrics {
        display: grid;
        grid-template-columns: 1.1rem minmax(3.25rem, 4.25rem) minmax(0, 1fr) max-content;
        align-items: center;
        column-gap: 0.35rem;
        width: 100%;
    }

    .rhyme-mobile-scheme,
    .rhyme-mobile-score {
        flex: 0 0 auto;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .rhyme-mobile-vowels,
    .rhyme-mobile-stanza {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .rhyme-mobile-vowels {
        border-left: 1px solid lightgray;
        padding-left: 0.35rem;
    }

    .rhyme-mobile-stanza {
        flex: 1 1 auto;
        padding-left: 0.25rem;
        text-align: left;
    }

    .rhyme-mobile-score {
        text-align: right;
    }
}

/* Smaller DataTable controls on mobile */
@media (max-width: 768px) {
    #myTableMobile_length select {
        height: 25px;
        font-size: 14px;
        padding: 2px 6px;
        width: auto;
    }

    /* Target the search box */
    #myTableMobile_filter input[type="search"] {
        height: 25px;
        padding: 2px 6px;
        width: 90px;
    }
}

/* thinner border between line with the text and line with the metrics on mobile table */
#myTableMobile tbody tr:nth-child(odd) {
    border-bottom: 1px solid lightgray;
}

/* DataTable controls side by side */
@media (max-width: 768px) {

    #myTableMobile_wrapper .dataTables_length,
    #myTableMobile_wrapper .dataTables_filter {
        display: inline-block;
    }

    #myTableMobile_wrapper {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        /* wrap to next line if too tight */
        align-items: center;
    }
}



/* TITRES */

/* style titre h2 */
h2 {
    font-size: 1.6rem;
    font-weight: bold;
    border-bottom: 2.5px solid var(--color-green);
    padding-bottom: 0.5rem;
}

/* style titre h3 */
h3 {
    text-align: left;
    font-size: 1.5rem;
    margin-bottom: 1.2rem;
    color: #222;
    position: relative;
    padding-bottom: 0.3rem;
}

/* court soulignage vert sous h3 */
h3::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0rem;
    width: 3rem;
    height: 2.5px;
    background-color: var(--color-green);
    border-radius: 1px;
}

/* Style of the tabs. */
.analysis-tabs {
    justify-content: space-between;
    width: 100%;
}

#tabscansion,
#tabenj,
#tabrhyme {
    text-align: left;
    font-size: 1em;
    margin-bottom: 1rem;
    color: #222;
    padding-bottom: 0.2rem;
    left: 0rem;
    right: 0rem;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
    position: relative;
    display: inline
}

@media (min-width: 768px) {

    #tabscansion,
    #tabenj,
    #tabrhyme {
        display: none
    }
}

#tabscansion::after,
#tabenj::after,
#tabrhyme::after {
    content: "";
    position: absolute;
    left: 0.2rem;
    bottom: 0;
    width: 3rem;
    height: 2.5px;
    background: #e4e4e4;
}

#tabscansion[aria-current="true"]::after,
#tabenj[aria-current="true"]::after,
#tabrhyme[aria-current="true"]::after,
#tabscansion:hover::after,
#tabenj:hover::after,
#tabrhyme:hover::after {
    background: var(--color-green);
}

#tabscansion:hover,
#tabenj:hover,
#tabrhyme:hover {
    text-decoration: none
}

.about-tabs .nav-link {
    text-align: center;
    font-size: calc(1.275rem + .3vw);
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: #777;
    padding-bottom: 0.45rem;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
    position: relative;
    display: block;
    width: 100%;
}

.about-tabs .nav-link::after {
    content: "";
    position: absolute;
    left: 0.75rem;
    bottom: 0;
    width: calc(100% - 1.5rem);
    height: 2.5px;
    background: #e4e4e4;
}

.about-tabs .nav-item {
    flex: 1 1 0;
}

.about-tabs .nav-link[aria-current="true"] {
    color: #222;
}

.about-tabs .nav-link[aria-current="true"]::after,
.about-tabs .nav-link:hover::after {
    background: var(--color-green);
}

.about-tabs .nav-link:hover {
    text-decoration: none;
}

.about-tab-panel h4 {
    font-size: 1.1em;
    margin-top: 1.25rem;
}

.about-table {
    max-width: 760px;
    margin-right: auto;
    margin-left: auto;
}

@media (max-width: 768px) {
    .about-tabs {
        display: block;
        margin-bottom: 1.75rem;
        padding-left: 1.25rem;
        list-style: disc;
    }

    .about-tabs .nav-item {
        display: list-item;
    }

    .about-tabs .nav-link {
        display: inline;
        width: auto;
        text-align: left;
        font-size: 1.1rem;
        line-height: 1.35;
        margin-bottom: 0.45rem;
        padding: 0;
    }

    .about-tabs .nav-link::after {
        content: none;
    }

    .about-tabs .nav-link[aria-current="true"] {
        color: var(--color-green-dark);
    }

    .about-tab-marker {
        margin-left: 0.35rem;
        color: var(--color-green-dark);
        white-space: nowrap;
    }
}


/* HEADER */

/* modifs pr base template */
/* Titre GALAPAGOS header */
.site-title {
    color: var(--color-green-dark) !important;
    font-size: 1.8rem;
}

/* bordure bottom header */
.navbar-border {
    border-bottom: 1px solid var(--color-green-dark);
}

/* style menu langues */
.lang-link {
    color: rgba(23, 140, 25, 1);
    text-decoration: none;
    transition: text-decoration 0.3s ease;
    font-size: 1rem;
}

.lang-link:hover {
    color: rgba(23, 140, 25, 0.7);
    text-decoration: underline;
    cursor: pointer;
}

.lang-link:active {
    color: rgba(23, 140, 25, 0.7);
    /* reste vert quand actif et non blanc */
}

/* Icône */
.lang-icon {
    color: var(--color-green-dark);
    transition: color 0.3s ease;
    cursor: pointer;
}

/* fond */
#langDropdown {
    background-color: #ffffff;
    /* blanc pur */
    border: none;
}

.dropdown-item:active,
.dropdown-item:focus {
    background-color: var(--color-green-light);
    /* fond vert pâle au clic */
}

/* flèche descendante */
#langDropdown::after {
    color: var(--color-green-dark);
}

/* Retire la shadow (focus + hover) du bouton langue */
#langDropdown:focus,
#langDropdown:hover,
#langDropdown:active,
#langDropdown.show {
    box-shadow: none !important;
    outline: none !important;
}

/* largeur menu déroulant */
.dropdown-lang {
    min-width: auto;
    width: auto;
}

/* liens navigation header (About) */
.navig-link {
    color: rgba(23, 140, 25, 1);
    text-decoration: none;
    transition: text-decoration 0.3s ease;
    font-size: 1rem;
}

.navig-link:hover {
    color: rgba(23, 140, 25, 0.7);
    text-decoration: underline;
    cursor: pointer;
}


/* FOOTER */

.footer {
    position: fixed;
    bottom: 0;
    background-color: #f8f9fa;
    font-size: 0.875rem;
    color: #6c757d;
    border-top: 1px solid #dee2e6;
}

/* liens footer */
.footer a {
    color: white;
}

.footer a:hover {
    color: #178C19;
}

/*    pour éléments sous footer  */

@media (max-width: 650px) {
    .small-text-mobile {
        gap: 0.05rem !important;
        padding-top: 0.05rem !important;
        padding-bottom: 0.05rem !important;
        font-size: 0.75em;
    }
}

#funded-eu {
    height: 50px !important;
}

@media (max-width: 650px) {
    #funded-eu {
        height: 30px !important;
    }
}


/* OFFCANVAS */

/* taille + couleur */
.custom-offcanvas {
    width: 240px !important;
    background-color: var(--color-green-light);
}

/* style titre GALAPAGOS */
.offcanvas-title {
    font-size: 1.8rem;
    color: #585964;
}

/* style liens navigation */
.nav-link {
    font-weight: bold;
    color: #585964;
}

.nav-link:hover {
    text-decoration: underline;
    color: black;
}

/* croix fermeture offcanvas shadow grise */
.btn-close {
    --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(51, 51, 51, 0.25);
}

/* bouton latéral droit ouverture offcanvas */
.custom-tog {
    background-color: var(--color-green)
}


/* CHAMPS INDEX */

/* shadow champs verte */
.form-control:focus {
    box-shadow: 0 0 0 0.2rem rgba(136, 207, 161, 0.4);
}

/* shadow verte selector exemple poème */
.form-select:focus {
    box-shadow: 0 0 0 0.2rem rgba(136, 207, 161, 0.4);
}

/* modifs pr index template */
.left-border-gr {
    border-left: 5px solid var(--color-green);
}

/* bordure champs verte qd focus */
.left-border-gr:focus {
    outline: none;
    border-top: 1px solid var(--color-green);
    border-bottom: 1px solid var(--color-green);
    border-right: 1px solid var(--color-green);
    border-left: 5px solid var(--color-green);
}

/* for 'loading' gif (location changes c/o screen size) */
@media (max-width: 768px) {
    #loading-gif-desktop {
        display: none !important;
    }
}

@media (min-width: 769px) {
    #loading-gif-mobile {
        display: none !important;
    }
}

/* Section Multi-file analysis
/* Bouton "Parcourir" personnalisé */
/* Cacher le bouton par défaut input file visuellement en le laissant focusable */
#zip_file {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
}

/* Conteneur global champ personnalisé (label + nom fichier) */
.custom-file-upload {
    display: flex;
    /* pour aligner label "Parcourir" + nom fichier sur la même ligne */
    width: 100%;
    /* prend toute la largeur de son parent */
    max-width: 100%;
    /* s'assure que ça ne dépasse pas */
    height: 38px;
    /* hauteur alignée sur les autres champs */
    border: 1px solid #ced4da;
    border-radius: 4px;
    overflow: hidden;
    /* masque les dépassements */
    background-color: white;
    cursor: pointer;
}

/* Effet de focus vert sur tout le conteneur */
.custom-file-upload:focus-within {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 128, 0, 0.25);
    /* ombre verte comme Bootstrap */
    border-color: var(--color-green-dark);
    /* vert aussi sur la bordure */
}

/* Bordure intérieure */
.custom-file-upload:focus-within .custom-file-label {
    border-right-color: var(--color-green-dark);
}

/* Bouton "Parcourir" personnalisé */
.custom-file-label {
    background-color: #e9ecef;
    padding: 0 12px;
    /* espace texte-bordure */
    display: flex;
    align-items: center;
    color: #495057;
    border-right: 1px solid #ced4da;
    /* bordure visuelle droite (avant nom fichier) */
    height: 100%;
    white-space: nowrap;
    flex-shrink: 0;
    /* ne pas rétrécir */
}

/* Zone affichant le nom du fichier choisi */
.custom-file-name {
    padding: 0 12px;
    /* espace interne (texte-bordure) */
    color: #6c757d;
    white-space: nowrap;
    /* sur une seule ligne */
    overflow: hidden;
    /* masque dépassement */
    text-overflow: ellipsis;
    /* si texte dépasse [...] */
    flex-grow: 1;
    /* prend toute la place restante */
    height: 100%;
    display: flex;
    align-items: center;
    background: white;
}

/* CONTENU ANALYSIS */

/* style bloc metadata page analysis */
.text-info-block {
    background-color: var(--color-green-light);
    border-left: 5px solid var(--color-green);
    border-radius: 0.3rem;
    padding: 1rem 0;
}

/* style texte bloc metadata page analysis */
.metad {
    margin-left: 1.5rem;
    color: #333;
}

/* moins de marge gauche petit écran */
@media (max-width: 768px) {
    .metad {
        margin-left: 0rem;
    }
}

/* marge contenu textuel page analysis (pas collé bordure metadata) */
.inner-content {
    padding-left: 1rem;
    padding-right: 1rem;
}


/* ABOUT */

/* pr 'about' template */

.text-110 {
    font-size: 110%;
}

.vertical-separator {
    width: 2px;
    height: 30px;
    background-color: var(--color-green-dark);
}