/*liens pas soulignés
a:not([class]) {
  text-decoration:none;
}
*/
/* définition des couleurs du module */
:root {
  --bleucnlr: #003366; /* bleu marine du logo */
  --bleucnlr: #004c85;
  --bleucnlr: #0c314c;
  --bleucnlr: #02355a;
  --bleuboutonclair:#2a69b8;
  --bleubouton:  var(--bleuboutonclair);
  --bleubouton:  var(--bleucnlr);
  --bleubouton: #004c85;
  --bleuboutonhover: #0056b3;
  --link-color:  var(--bleubouton);
  --body-color:  var(--bleucnlr);
  --textclair : white;
  --texttableau : var(--bleucnlr);
  --fondtableau : #eeeeee;
  --iconefiletype:  #888888;
  --textbouton : white; 
}
/*couleur bandeau*/
.container-header {
background: var(--bleucnlr);
}
/* ========================================
   PERSONNALISATION HEADER CNLR - CASSIOPEIA
   VARIANTE : Logo 20% + Slogans 80%
   ======================================== */

/* Container principal du header */
.header {
 /*PP   padding: 20px 0;*/
background: var(--bleucnlr);
}
.container-nav .grid-child {
  padding-bottom: 0em;
  padding: 0em;
}
/* Container logo + slogans en ligne */
.header .container-header {
    display: flex;
    align-items: center;
    gap: 2em;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1em 1em;
    margin-bottom: 0px;
    padding-bottom: 0em;
}

/* Logo 25% à gauche */
.header .header-logo {
    flex: 0 0 25%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header .header-logo a {
    display: block;
    width: 100%;
}

.header .header-logo img {
    max-width: 100%;
    height: auto;
    max-height: 150px;
}

/* Slogans 80% à droite */
.header-slogan {
    flex: 0 0 calc(50% - 2em);
    text-align: left;
    text-align: center;
}

.header-slogan .slogan1 {
    font-size: 2em;
    font-weight: 600;
    color: white;
    margin: 0 0 10px 0;
    line-height: 1.3;
}

.header-slogan .slogan2 {
    font-size: 1.3em;
    font-weight: 400;
    color: white;
    margin: 0;
    line-height: 1.4;
}

.header-slogan .slogan3 {
    font-size: 1.3em;
    font-weight: 400;
    color: #D4A017;
    margin: 0;
    line-height: 1.4;
}
/* ========================================
   RESPONSIVE - Tablette
   ======================================== */
@media (max-width: 992px) {
    .header .container-header {
        gap: 1em;
    }
    
    .header-slogan .slogan1 {
        font-size: 1.6em;
    }
    
    .header-slogan .slogan2 {
        font-size: 1.1em;
    }
  
    .header-slogan .slogan3 {
        font-size: 1.1em;
    }
}
/* ========================================
   RESPONSIVE - Smartphone
   ======================================== */
@media (max-width: 600px) {
    .header .container-header {
        gap: 1em;
    }
    
    .header-slogan {
       flex: 0 0 calc(75% - 2em);
       text-align: left;
       text-align: center;
}
    .header-slogan .slogan1 {
        font-size: 1.0em;
    }
    
    .header-slogan .slogan2 {
        font-size: 0.90em;
    }
  
    .header-slogan .slogan3 {
        font-size: 0.90em;
    }
}

/* ========================================
   RESPONSIVE - Smartphone
   Slogans passent en dessous du logo
   ======================================== 
@media (max-width: 768px) {
    .header .container-header {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    
    .header .header-logo {
        flex: 0 0 auto;
        width: 100%;
    }
    
    .header .header-logo img {
        max-height: 100px;
    }
    
    .header-slogan {
        flex: 0 0 auto;
        width: 100%;
        text-align: center;
    }
    
    .header-slogan .slogan1 {
        font-size: 1.4em;
    }
    
    .header-slogan .slogan2 {
        font-size: 1em;
    }
}

@media (max-width: 480px) {
    .header-slogan .slogan1 {
        font-size: 1.2em;
    }
    
    .header-slogan .slogan2 {
        font-size: 0.9em;
    }
    
    .header .header-logo img {
        max-height: 80px;
    }
}
*/
/*couleur PIED*/
.container-footer {
background: var(--bleucnlr);
}

.btn-inscription  {
    background-color:#0c3149;
  width : 40%;
  display: d-flex;
  margin: 0.5em;
  text-align: center;
  border-radius:  1em
}
.btn-avis-ic {
    background-color:#2a69b8;
  width : 40%;
  display: d-flex;
  margin: 0.5em;
  text-align: center;
  border-radius:  1em
}
.btn-1col {
    background-color:#2a69b8;
  width : 81%;
  display: d-flex;
  margin: 0.5em;
  text-align: center;
  border-radius:  1em
}
.btn-resultat {
    background-color:gray;
  width : 40%;
  display: d-flex;
  margin: 0.5em;
  text-align: center;
  border-radius:  1em
}
 h1, .h1 {
  color:var(--link-color);
  margin-top: 0;
  margin-bottom: .5em;
  font-weight: 700;
  line-height: 1.5;
}
 h2, .h2 {
  color:var(--link-color);
  margin-top: 0;
  margin-bottom: .5em;
  font-weight: 700;
  line-height: 1.0;
}
 h3, .h3 {
  color:var(--link-color);
  margin-top: 0;
  margin-bottom: .5em;
  font-weight: 700;
  line-height: 0.8;
}
.fa-brands, .fa-regular {
    padding: 8px;
}
/* ==========================================
   Styles pour le plugin Custom Display
   ========================================== */

/* --- Boutons personnalisés --- */
.custom-buttons-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
/*PP    margin: 20px 0;
    padding: 15px;
    background: #f8f9fa;*/
    border-radius: 8px;
}

.custom-button {
    display: inline-flex;
    align-items: center;
    padding: 0.5em;
    background: var(--bleubouton);
    color: var(--textclair);
    text-decoration: none;
    border-radius: 0.5em;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  /*PP ajout test 
  width : 25%;
  display: d-flex;
  text-align: center;
  border-radius:  1em*/
}

.custom-button:hover {
    background: var(--bleuboutonhover);
    color: var(--textclair);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.custom-button i { /* fontawsome icon */
    margin-right: 8px;
    font-size: 1.1em;
}

/* --- Tableau Officiel --- */
.tableau-officiel-container {
    margin: 1em 0;
    padding: 0.5em;
    background: var(--fondtableau);
    background: none;
   /* background: var(--bleubouton);*/
    border: 1px solid #dee2e6;
    border-radius: 8px;
}

.tableau-officiel-container h3 {
    margin-top: 0;
    margin-bottom: 0;
 /*    color: #333;
    color: white;
   border-bottom: 2px solid #007bff;*/
    background: var(--fondtableau);
    padding: 0.5em;
}

/* --- Arborescence des fichiers --- */
.fa {
     font-weight: 400;
}
.file-tree {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.file-tree[data-level="0"] {
    padding-left: 0;
}

.file-tree[data-level="1"],
.file-tree[data-level="2"],
.file-tree[data-level="3"] {
    padding-left: 2em;
    display: none;
}

.file-item,
.folder-item {
    padding: 0 0;
/*    border-bottom: 1px solid #f0f0f0;*/
}

.file-item:last-child,
.folder-item:last-child {
    border-bottom: none;
}

.file-item i {
/* PP   color: #6c757d;
    color: white;
    color: var(--texttableau);*/
    margin-right: 0.25em;
}

.file-item a {
    color: #007bff;
    color: white;
    color: var(--texttableau);
    text-decoration: none;
    transition: color 0.2s;
}

.file-item a:hover {
    color: #0056b3;
    color: var(--bleuboutonclair);
    text-decoration: underline;
}

/* --- Dossiers --- */
.folder-item {
    position: relative;
}

.folder-toggle {
    cursor: pointer;
    user-select: none;
    display: block;
    padding: 0.25em 0;
    color: #333;
    color: white;
    color: var(--texttableau);
    font-weight: 500;
}

.folder-toggle:hover {
    color: #007bff;
}

.folder-toggle i {
    color: #ffc107;
    color: white;
    color: var(--texttableau);
    color: #ff9800;
    margin-right: 8px;
    transition: transform 0.2s;
}

.folder-item.open > .folder-toggle i {    
    color: white;
    color: var(--texttableau);
    color: #ff9800;
}

.folder-item.open > .folder-toggle i.fa-folder::before {
    content: "\f07c"; /* Code FontAwesome pour fa-folder-open */
}

.folder-item.open > .file-tree {
    display: block;
}

/* --- Dossiers vides (grisés) --- */
.folder-item.folder-empty .folder-toggle {
    color: #999;
    opacity: 0.6;
}

.folder-item.folder-empty .folder-toggle i {
    color: #bbb;
}

.folder-item.folder-empty .folder-toggle:hover {
    color: #666;
}

/* --- Boutons de gestion (pour ComiteCourse) --- */
.delete-file-btn {
    cursor: pointer;
    color: #dc3545;
    color: #dddddd;
    margin-left: 8px;
    transition: color 0.2s;
}

.delete-file-btn:hover {
    color: #a71d2a;
    color: #dc3545;
}

.delete-file-btn i {
    font-size: 1.1em;
}

.upload-btn {
    cursor: pointer;
    color: #28a745;
    color: white;
  /*  margin-left: 10px;*/
    transition: all 0.2s;
    display: inline-block;
    padding: 3px 8px;
    border-radius: 3px;
}

.upload-btn:hover {
    background: var(--bleuboutonhover);
    color: #ffffff;
}

.upload-btn-root, .upload-btn-folder {
    margin-left: 15px;
    padding: 5px 12px;
    background: var(--bleubouton);
    color: #ffffff;
    color: var(--bleubouton);
    background: white;
    border-radius: 5px;
    font-size: 0.95em;
}
.upload-btn-root {
    margin-left: 0;
}
.upload-btn-root:hover, .upload-btn-folder:hover {
    background: #218838;
    background: var(--bleubouton);
}

.upload-btn i {
    font-size: 1em;
    margin-right: 15px;
}

.folder-toggle {
    display: inline-block;
}

/* --- Icônes de fichiers spécifiques --- */
.fa-file-pdf, .fa-file-word, .fa-file-excel, .fa-file-image, .fa-file-archive, .fa-file-code {
    color:var(--iconefiletype);
}
/* --- Responsive --- */
@media (max-width: 768px) {
    .custom-buttons-container {
        flex-direction: column;
    }
    
    .custom-button {
        width: 100%;
        justify-content: center;
    }
    
    .tableau-officiel-container {
        padding: 15px;
    }
}

/* --- Alert pour erreurs --- */
.alert {
    padding: 15px;
    margin: 20px 0;
    border-radius: 5px;
}

.alert-warning {
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    color: #856404;
}