/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS 
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/
/* Cacher le logo SVG original */
#surveys-list-jumbotron svg.ls-logo {
    display: none !important; 
}

/* Ajouter votre logo ADF en tant qu'image de fond */
#surveys-list-jumbotron::before {
    content: "";
    display: block;
    width: 200px; /* Ajustez selon la taille souhaitée */
    height: 300px;
    background-image: url('../files/Logo-ADF.svg'); /* Chemin relatif dans le thème */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto 20px auto;
}

.question-container .question-valid-container {
  margin-top: 0px;
  margin-bottom: 0px;
}

li.radio-item {
  margin-bottom: 0.5em;
}

.question-container {
  margin-bottom: 2em;
}

.label-question {
font-size: 24px;
  font-weight: 600;
}

/*
**********************************
**** Modifications Numéricité ****
**********************************
*/
.ls-answers ul li:last-child {
    margin-bottom: 0 !important;
}

.item-unanswered {
    border-left: solid 10px orange;
}

.item-error {
    border-left: solid 10px darkred;
}

#survey-nav #main-dropdown .index-item-seen:not(.index-item-unanswered) a.dropdown-item {
    background-color: #14AE5C;
}

#survey-nav #main-dropdown .list-group-item a.disabled { 
    font-weight: bold;
}

#survey-nav #main-dropdown .list-group-item:not(.index-item-unanswered) a.disabled:not(.index-danger) { 
    color: white;
}

/** Grossir la barre de progression sur toutes les pages **/
.top-container .progress {
    margin-top: 2rem;
    height: 30px;
}

#outerframeContainer {
    padding-left: 2rem;
    padding-right: 2rem;
}

/** Réduire les espaces vides sur les pages */
.group-container .group-title {
    margin-top: 0;
}

/*** CUSTOM - Welcome page ***/
#welcome-container {
    max-width: none;
    padding: 0 50px;
}

.survey-name {
    margin: 0 auto 10px auto;
    width: 80%;
    text-align: center;
}

.survey-description {
    text-align: center; 
}

.survey-welcome {
    hyphens: none;
    text-align: justify;
}

/*** CUSTOM - Navigator container (sticky to the bottom of the page) ***/
#navigator-container {
    position: fixed;
    left: 279px;
    width: calc(100% - 279px);
    bottom: 0;
    background-color: #1D61AD;
    padding: 0;
    margin-bottom: 0;
    margin: auto;
    box-shadow: 0px -1px 12px -4px #595959;
}

#navigator-container .text-start, #navigator-container .text-end {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    flex-direction: row;
    align-content: center;
    flex-wrap: wrap;
    padding: 10px 0;
}

#survey-nav {
    display: none;
}


.question-container {
    margin: auto;
}


.main-container {
    display: flex;
    min-height: 100vh;
}

article {
    flex-grow: 1; /* Remplace flex: 4, c'est plus standard */
    min-width: 0; /* Astuce pour éviter les bugs de débordement flex */
}


body {
    padding-top: 0px !important;
    background-color: #ededed;
    overflow-x: hidden;
}

/** CUSTOM - Questions **/

.group-container .group-title {
    text-align: center;
    font-size: 2rem;
    margin-top: 0;
    margin-bottom: 50px;
}

.question-container .ls-label-question {
    font-size: 20px;
}

.answer-container {
    margin-top: 10px;
}

.ls-answers label, .answer-item label, .control-label
 {
    font-size: 1rem;
}

.question-container {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    border-radius: 5px;
    padding: 15px 0;
    background-color: white;
    margin-bottom: 2em;
}

.ls-answers {
    margin-bottom: 0 !important;
}

.ls-answers ul {
    margin-bottom: 0;
}


/** SIDEBAR **/
/* --- 1. Conteneur Principal (Sidebar) --- */
.sidebar {
    width: 280px; /* Largeur fixe confortable */
    height: 100vh;
    background-color: #1D61AD; /* Bleu "DF" */
    border-right: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    font-family: 'Inter', system-ui, sans-serif; /* Police moderne */
    position: sticky !important; /* Fixe à gauche */
    flex-shrink: 0;
    top: 0;
    left: 0;
    z-index: 100;
}

/* --- 2. En-tête (Branding) --- */
.sidebar-top {
    padding: 1.5rem 1.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a; /* Bleu nuit foncé */
    border-bottom: 1px solid #e2e8f0;
    background: white;
    text-align:center;
}

/* --- 3. Zone de Navigation (Scrollable) --- */
.sidebar-nav {
    flex: 1;
    overflow-y: auto; /* Scroll si la liste est longue */
    padding: 1rem 0;
}

.sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-menu li {
    margin-bottom: 2px;
}

/* --- 4. Liens Parents (Catégories) --- */
.sidebar-menu > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    /*color: #334155;*/
    color: white;
    text-decoration: none;
    transition: all 0.2s ease;
}

.sidebar-menu > li > a:hover {
    background-color: #e2e8f0;
    color: #0f172a;
}

.sidebar-menu > li.active .sidebar-title-dropdown::after {
    transform: rotate(225deg); /* Rotation vers le haut */
    margin-bottom: -2px;
}

/* Petite flèche CSS pour indiquer le dropdown sur les parents */
/* --- La flèche du parent (rotative) --- */
.sidebar-title-dropdown {
    cursor: pointer;
    position: relative;
}

.sidebar-title-dropdown::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 2px solid #94a3b8;
    border-bottom: 2px solid #94a3b8;
    transform: rotate(45deg);
    margin-left: 10px;
    margin-bottom: 2px;
    transition: transform 0.3s ease; /* Animation de rotation */
}

/* --- 5. Sous-menus (Items enfants) --- */
.nav-flyout {
    max-height: 0; /* Hauteur nulle = caché */
    overflow: hidden; /* Cache le contenu qui dépasse */
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease; /* Animation fluide (Slide down) */
    background-color: white;
    border-left: 1px solid #e2e8f0; /* Ligne de repère visuel à gauche */
}

.nav-flyout li a {
    display: block;
    padding: 0.6rem 0.6rem 0.6rem 2.5rem; /* Indentation forte (padding-left) */
    font-size: 0.9rem;
    color: #64748b;
    text-decoration: none;
    border-left: 2px solid transparent; /* Prépare la bordure active */
    transition: all 0.2s;
}

.nav-flyout li a:hover {
    background-color: #f8fafc;
    color: #334155;
}

/* --- 6. Gestion des États (Logique Twig) --- */

/* Item Actif / Courant (Votre classe 'item-disabled') */
.nav-flyout li a.item-disabled { 
    background-color: #eff6ff; /* Fond bleu très pâle */
    color: #2563eb; /* Bleu vif */
    border-left-color: #2563eb; /* Bordure bleue à gauche */
    font-weight: 600;
    cursor: default; /* Montre qu'on est déjà dessus */
}

/* Item Erreur */
.nav-flyout li a.item-error {
    color: #ef4444; /* Rouge */
}
.nav-flyout li a.item-error::before {
    content: '• ';
    color: #ef4444;
    margin-right: 4px;
}

/* Item Vu mais non répondu (Optionnel) */
.nav-flyout li a.item-seen-but-unanswered {
    color: rgb(203 119 11); /* Orange */
}

.sidebar-menu > li.active .nav-flyout {
    max-height: 1500px; /* Une valeur assez grande pour tout contenir */
    opacity: 1;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Ajustement des liens enfants pour le nouveau design dropdown */
.nav-flyout li a {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    border-left: 2px solid transparent;
}

table {
    width: 100%;
}

tbody, td, tfoot, th, thead, tr, .table > :not(:first-child) {
    border: 1px solid black;
    padding: 10px;
}

#welcome-container + * + #navigator-container {
  left: 0px;
  width: 100%;
  margin: auto;
}