@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Big+Shoulders+Stencil+Display:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=ZCOOL+QingKe+HuangYou&display=swap');

:root {

/*------------------------------------------------------------Variables DB - Variables non imbriquées---*/

/* Variables DB - Catégorie : Bordures */
--border-radius-large: 15px;
--border-radius-medium: 10px;
--border-radius-small: 5px;

/* Variables DB - Catégorie : Couleurs de bases */
--bg-lighter: #fff;
--bg-darker: #000;
--grey: #969999;

/* Variables DB - Catégorie : Couleurs de personnalisation de la WPA */
--colorA_dark: #242C3C;
--colorB_medium: #A69D8B;
--colorA_deepDark: #111726;
--colorA_medium: #515C6C;
--colorA_light: #7E8C9C;
--colorB_light: #A8A696;
--colorB_strong: #A69285;

/* Variables DB - Catégorie : Dimensions */
--sidebar-width: 85px;
--button-height: 30px;
--content-padding: 20px;
--header-height: 72px;
--footer-height: 20px;

/* Variables DB - Catégorie : Mises en Page */
--padding: 5px;

/* Variables DB - Catégorie : Opacité */
--opacity-xstrong: 0.48;
--opacity-strong: 0.24;
--opacity-xlite: 0.015;
--opacity-lite: 0.03;
--opacity-soft: 0.06;
--opacity-medium: 0.12;

/* Variables DB - Catégorie : Polices */
--base-font-size: 14px;
--font-family: 'Comfortaa', sans-serif;
--hand-font-family: 'Architects Daughter', cursive;
--bigger-font-family: 'Anton', sans-serif;
--secondary-font-family: 'ZCOOL QingKe HuangYou', sans-serif;

/*------------------------------------------------------------Variables DB - Variables imbriquées---*/

/* Variables DB - Catégorie : Bordures (Variables imbriquées) */

--box-border-radius: var(--border-radius-medium);
--input-border-radius: var(--border-radius-small);

/* Variables DB - Catégorie : Couleurs de bases (Variables imbriquées) */


/* Variables DB - Catégorie : Couleurs de personnalisation de la WPA (Variables imbriquées) */

--text-btn-color: var(--colorB_strong);
--bg-input-color: var(--colorA_light);
--bg-hover-btn-color: var(--colorA_light);
--bg-btn-color: var(--colorA_medium);

/* Variables DB - Catégorie : Dimensions (Variables imbriquées) */


/* Variables DB - Catégorie : Mises en Page (Variables imbriquées) */


/* Variables DB - Catégorie : Opacité (Variables imbriquées) */


/* Variables DB - Catégorie : Polices (Variables imbriquées) */

}

/* Included from 0.reset.css */

/* Réinitialisation des marges et paddings */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: var(--colorA_deepDark);
    overflow: hidden;
    font-family: var(--font-family);
    font-size: var(--base-font-size);
    color: var(--grey);
}

h1, h2, h3, h4, h5, h6, p {
    text-decoration: none;
    padding: 0;
    margin: 0;
}

/* Included from 1.layout.css */

.body {  
    width: 100%;
    height: 100%;
    /*
    background: 
    linear-gradient(100deg, rgba(0, 0, 0, 0.1) 25%, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.015) 26%, rgba(255, 255, 255, 0.008) 30%, transparent 100%) -35% 0,
    linear-gradient(200deg, rgba(0, 0, 0, 0.1) 25%, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.015) 26%, rgba(255, 255, 255, 0.008) 30%, transparent 100%) 0 -20%,
    linear-gradient(35deg, rgba(0, 0, 0, 0.1) 25%, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.015) 26%, rgba(255, 255, 255, 0.008) 30%, transparent 100%),
    linear-gradient(345deg, rgba(0, 0, 0, 0.1) 25%, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.015) 26%, rgba(255, 255, 255, 0.008) 30%, transparent 100%) -35% 0;
    */
    display: grid;
    grid-template-columns: 60px 1fr 1fr 1fr 1fr 224px;
    grid-template-rows: 24px 48px 48px 24px 72px 1fr 1fr 1fr 20px;
    gap: 0px 0px;
    grid-auto-flow: row;
} /* redéfinir les grid-template avec les varibles DB */

    /*Adaptation du body pour smartphones et tablettes portrait */
    @media (max-width: 780px) {
      .body {
        grid-template-columns: 1fr 2fr 1fr;
        grid-template-rows: 24px 48px 48px minmax(0, 24px) minmax(0, 72px) 1fr 48px 24px;
      }
    }

/* Styles globaux pour les balises spécifiques */

blockquote {
    border-left: 2px solid var(--colorA_light);
    margin: 20px 0;
    padding: 10px 20px;
    background-color: var(--colorA_dark);
    font-style: italic;
    border-radius: var(--border-radius-medium);
    color: var(--grey);
}

details {
    background-color: var(--colorA_medium);
    border: 1px solid var(--colorA_light);
    padding: 10px;
    border-radius: var(--border-radius-medium);
}

summary {
    cursor: pointer;
    font-weight: bold;
    color: var(--colorB_medium);
}

.annotation {
    font-style: italic;
    color: var(--colorB_light);
    background-color: var(--colorA_dark);
    padding: 2px 4px;
    border-radius: var(--border-radius-small);
}

mark {
    background-color: var(--colorB_light);
    color: var(--colorA_deepDark);
    padding: 0 4px;
    border-radius: var(--border-radius-small);
}


.proj-grid {
    display: grid;
    gap: 40px; /* Ajuste l'espacement entre les éléments */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    justify-content: center; /* Pour centrer les éléments sur la grille */
    align-items: start; /* Pour aligner les éléments au début de chaque ligne */
    overflow-y: auto;
    height: calc(100% - 10px);
}

/* Partie page phases & services */
.ServForPhases {
    width: 65%;
    float: left;
}

.phase {
    background-color: var(--colorA_dark);
    border-radius: var(--border-radius-medium);
    border: none;
    padding: 3px;
    margin-bottom: 10px;
}

.services {
    background-color: var(--colorA_deepDark);
    border-radius: calc(var(--border-radius-medium) - 3px);
    margin-top: 10px;
    padding: 10px;
}

.service {
    margin-bottom: 5px;
}

.serv-list {
    border: 1px solid var(--grey);
    padding: 10px;
    margin-left: 20px;
    margin-bottom: 20px;
    float: right;
    width: 30%;
}

.textNbutton {
    display: flex;
    flex-direction: row;
    align-items: center; /* Centre verticalement les enfants */
    width: 100%; /* Fait en sorte que le conteneur occupe toute la largeur */
    margin-top: 10px;
    padding: 5px;
}

.left-textNbutton {
    vertical-align: middle;
    /* Pas besoin de vertical-align si on utilise align-items sur le parent */
}

.right-textNbutton {
    margin-left: auto; /* Pousse cet élément à l'extrême droite */
}




/* Included from 2.fonts-links-scrollbar.css */

  /* Styles communs pour les liens */
  
  a {
    color: var(--colorB_medium);
    text-decoration: none;
  }
  
  a:hover {
    color: var(--colorB_light);
  }
  
  /* Styles communs pour les titres et les paragraphes */
  h1, h2, h3, h4, h5, h6, p {
    color: var(--grey);
    font-family: var(--font-family);
  }
  
  h1 {
    font-size: calc(1.5 * var(--base-font-size));
    font-weight: bold;
  }
  
  h2 {
    font-size: calc(1.25 * var(--base-font-size));
    font-weight: bold;
  }
  
  h3 {
    font-size: calc(1.125 * var(--base-font-size)); /* Taille intermédiaire entre h2 (1.25) et h4 (1) */
    font-weight: bold;
  }
  
  /* Classe personnalisée pour l'ancien style de h3 */
  .h3-special {
    font-family: var(--bigger-font-family);
    font-size: 35px;
    color: var(--colorA_deepDark);
    text-shadow: 0px -1px 0px rgb(0, 0, 0, 0.7),
                 0px 1px 0px rgba(255, 255, 255, 0.7);
  }
  
  h4 {
    font-size: calc(1 * var(--base-font-size));
    font-weight: bold;
    text-transform: uppercase;
  }
  
  h5 {
    font-size: calc(0.75 * var(--base-font-size));
    font-weight: bold;
    color: var(--colorB_strong);
  }
  
  h6 {
    font-size: calc(0.625 * var(--base-font-size));
    font-weight: bold;
  }
  
  p {
    font-size: var(--base-font-size);
    text-align: justify;
  }
  
  
  /* Définir la largeur de la scrollbar */
  ::-webkit-scrollbar {
    width: 10px; /* largeur de la scrollbar verticale */
    height: 10px; /* hauteur de la scrollbar horizontale */
  }
  
  /* Style pour la partie de la scrollbar que l'on fait défiler */
  ::-webkit-scrollbar-track {
    background: var(--colorA_deepDark); /* Couleur de fond de la piste de la scrollbar */
  }
  
  /* Style pour le curseur de la scrollbar */
  ::-webkit-scrollbar-thumb {
    background-color: var(--colorA_dark); /* Couleur du curseur de la scrollbar */
    border-radius: 10px; /* Coins arrondis du curseur */
    border: 4px solid var(--colorA_deepDark); /* Bordure autour du curseur */
  }
  
  /* Style lorsque le curseur est survolé */
  ::-webkit-scrollbar-thumb:hover {
    background-color: var(--colorA_medium); /* Couleur du curseur au survol */
  }
  
  /* Style pour le coin de la scrollbar */
  ::-webkit-scrollbar-corner {
    background: transparent; /* Couleur du coin de la scrollbar */
  }
/* Included from 3.specif-content-grid.css */

/* Styles communs pour la vue complète */

/* Grille de contenu - 12x12 */
.specif-content {
    height: 100%;
    width: 100%;
    grid-column: 2 / 7;
    grid-row: 6 / 9;
    display: grid;
    grid-template-columns: repeat(12, calc((100% - (11 * 0.5%) - (2 * 0.5%)) / 12));
    grid-template-rows: repeat(12, calc((100% - (11 * 0.5%) - (2 * 0.5%)) / 12));
    grid-auto-flow: dense; /* Remplissage automatique en mode compact */
    gap: 0.5%;
    padding: 0 5px 10px 0;
  }

  /* Classes pour chaque élément */
.grid-item {
  background: transparent;
}

.grid-subitem {
    height: calc(100% - 15px);
    width: 100%;
    margin-top: 10px;
    overflow-y: auto; 
    overflow-x: hidden;
   }



.grid-item-01x01 { grid-column: span 1; grid-row: span 1; }
.grid-item-01x02 { grid-column: span 1; grid-row: span 2; }
.grid-item-01x03 { grid-column: span 1; grid-row: span 3; }
.grid-item-01x04 { grid-column: span 1; grid-row: span 4; }
.grid-item-01x05 { grid-column: span 1; grid-row: span 5; }
.grid-item-01x06 { grid-column: span 1; grid-row: span 6; }
.grid-item-01x07 { grid-column: span 1; grid-row: span 7; }
.grid-item-01x08 { grid-column: span 1; grid-row: span 8; }
.grid-item-01x09 { grid-column: span 1; grid-row: span 9; }
.grid-item-01x10 { grid-column: span 1; grid-row: span 10; }
.grid-item-01x11 { grid-column: span 1; grid-row: span 11; }
.grid-item-01x12 { grid-column: span 1; grid-row: span 12; }

.grid-item-02x01 { grid-column: span 2; grid-row: span 1; }
.grid-item-02x02 { grid-column: span 2; grid-row: span 2; }
.grid-item-02x03 { grid-column: span 2; grid-row: span 3; }
.grid-item-02x04 { grid-column: span 2; grid-row: span 4; }
.grid-item-02x05 { grid-column: span 2; grid-row: span 5; }
.grid-item-02x06 { grid-column: span 2; grid-row: span 6; }
.grid-item-02x07 { grid-column: span 2; grid-row: span 7; }
.grid-item-02x08 { grid-column: span 2; grid-row: span 8; }
.grid-item-02x09 { grid-column: span 2; grid-row: span 9; }
.grid-item-02x10 { grid-column: span 2; grid-row: span 10; }
.grid-item-02x11 { grid-column: span 2; grid-row: span 11; }
.grid-item-02x12 { grid-column: span 2; grid-row: span 12; }

.grid-item-03x01 { grid-column: span 3; grid-row: span 1; }
.grid-item-03x02 { grid-column: span 3; grid-row: span 2; }
.grid-item-03x03 { grid-column: span 3; grid-row: span 3; }
.grid-item-03x04 { grid-column: span 3; grid-row: span 4; }
.grid-item-03x05 { grid-column: span 3; grid-row: span 5; }
.grid-item-03x06 { grid-column: span 3; grid-row: span 6; }
.grid-item-03x07 { grid-column: span 3; grid-row: span 7; }
.grid-item-03x08 { grid-column: span 3; grid-row: span 8; }
.grid-item-03x09 { grid-column: span 3; grid-row: span 9; }
.grid-item-03x10 { grid-column: span 3; grid-row: span 10; }
.grid-item-03x11 { grid-column: span 3; grid-row: span 11; }
.grid-item-03x12 { grid-column: span 3; grid-row: span 12; }

.grid-item-04x01 { grid-column: span 4; grid-row: span 1; }
.grid-item-04x02 { grid-column: span 4; grid-row: span 2; }
.grid-item-04x03 { grid-column: span 4; grid-row: span 3; }
.grid-item-04x04 { grid-column: span 4; grid-row: span 4; }
.grid-item-04x05 { grid-column: span 4; grid-row: span 5; }
.grid-item-04x06 { grid-column: span 4; grid-row: span 6; }
.grid-item-04x07 { grid-column: span 4; grid-row: span 7; }
.grid-item-04x08 { grid-column: span 4; grid-row: span 8; }
.grid-item-04x09 { grid-column: span 4; grid-row: span 9; }
.grid-item-04x10 { grid-column: span 4; grid-row: span 10; }
.grid-item-04x11 { grid-column: span 4; grid-row: span 11; }
.grid-item-04x12 { grid-column: span 4; grid-row: span 12; }

.grid-item-05x01 { grid-column: span 5; grid-row: span 1; }
.grid-item-05x02 { grid-column: span 5; grid-row: span 2; }
.grid-item-05x03 { grid-column: span 5; grid-row: span 3; }
.grid-item-05x04 { grid-column: span 5; grid-row: span 4; }
.grid-item-05x05 { grid-column: span 5; grid-row: span 5; }
.grid-item-05x06 { grid-column: span 5; grid-row: span 6; }
.grid-item-05x07 { grid-column: span 5; grid-row: span 7; }
.grid-item-05x08 { grid-column: span 5; grid-row: span 8; }
.grid-item-05x09 { grid-column: span 5; grid-row: span 9; }
.grid-item-05x10 { grid-column: span 5; grid-row: span 10; }
.grid-item-05x11 { grid-column: span 5; grid-row: span 11; }
.grid-item-05x12 { grid-column: span 5; grid-row: span 12; }

.grid-item-06x01 { grid-column: span 6; grid-row: span 1; }
.grid-item-06x02 { grid-column: span 6; grid-row: span 2; }
.grid-item-06x03 { grid-column: span 6; grid-row: span 3; }
.grid-item-06x04 { grid-column: span 6; grid-row: span 4; }
.grid-item-06x05 { grid-column: span 6; grid-row: span 5; }
.grid-item-06x06 { grid-column: span 6; grid-row: span 6; }
.grid-item-06x07 { grid-column: span 6; grid-row: span 7; }
.grid-item-06x08 { grid-column: span 6; grid-row: span 8; }
.grid-item-06x09 { grid-column: span 6; grid-row: span 9; }
.grid-item-06x10 { grid-column: span 6; grid-row: span 10; }
.grid-item-06x11 { grid-column: span 6; grid-row: span 11; }
.grid-item-06x12 { grid-column: span 6; grid-row: span 12; }

.grid-item-07x01 { grid-column: span 7; grid-row: span 1; }
.grid-item-07x02 { grid-column: span 7; grid-row: span 2; }
.grid-item-07x03 { grid-column: span 7; grid-row: span 3; }
.grid-item-07x04 { grid-column: span 7; grid-row: span 4; }
.grid-item-07x05 { grid-column: span 7; grid-row: span 5; }
.grid-item-07x06 { grid-column: span 7; grid-row: span 6; }
.grid-item-07x07 { grid-column: span 7; grid-row: span 7; }
.grid-item-07x08 { grid-column: span 7; grid-row: span 8; }
.grid-item-07x09 { grid-column: span 7; grid-row: span 9; }
.grid-item-07x10 { grid-column: span 7; grid-row: span 10; }
.grid-item-07x11 { grid-column: span 7; grid-row: span 11; }
.grid-item-07x12 { grid-column: span 7; grid-row: span 12; }

.grid-item-08x01 { grid-column: span 8; grid-row: span 1; }
.grid-item-08x02 { grid-column: span 8; grid-row: span 2; }
.grid-item-08x03 { grid-column: span 8; grid-row: span 3; }
.grid-item-08x04 { grid-column: span 8; grid-row: span 4; }
.grid-item-08x05 { grid-column: span 8; grid-row: span 5; }
.grid-item-08x06 { grid-column: span 8; grid-row: span 6; }
.grid-item-08x07 { grid-column: span 8; grid-row: span 7; }
.grid-item-08x08 { grid-column: span 8; grid-row: span 8; }
.grid-item-08x09 { grid-column: span 8; grid-row: span 9; }
.grid-item-08x10 { grid-column: span 8; grid-row: span 10; }
.grid-item-08x11 { grid-column: span 8; grid-row: span 11; }
.grid-item-08x12 { grid-column: span 8; grid-row: span 12; }

.grid-item-09x01 { grid-column: span 9; grid-row: span 1; }
.grid-item-09x02 { grid-column: span 9; grid-row: span 2; }
.grid-item-09x03 { grid-column: span 9; grid-row: span 3; }
.grid-item-09x04 { grid-column: span 9; grid-row: span 4; }
.grid-item-09x05 { grid-column: span 9; grid-row: span 5; }
.grid-item-09x06 { grid-column: span 9; grid-row: span 6; }
.grid-item-09x07 { grid-column: span 9; grid-row: span 7; }
.grid-item-09x08 { grid-column: span 9; grid-row: span 8; }
.grid-item-09x09 { grid-column: span 9; grid-row: span 9; }
.grid-item-09x10 { grid-column: span 9; grid-row: span 10; }
.grid-item-09x11 { grid-column: span 9; grid-row: span 11; }
.grid-item-09x12 { grid-column: span 9; grid-row: span 12; }

.grid-item-10x01 { grid-column: span 10; grid-row: span 1; }
.grid-item-10x02 { grid-column: span 10; grid-row: span 2; }
.grid-item-10x03 { grid-column: span 10; grid-row: span 3; }
.grid-item-10x04 { grid-column: span 10; grid-row: span 4; }
.grid-item-10x05 { grid-column: span 10; grid-row: span 5; }
.grid-item-10x06 { grid-column: span 10; grid-row: span 6; }
.grid-item-10x07 { grid-column: span 10; grid-row: span 7; }
.grid-item-10x08 { grid-column: span 10; grid-row: span 8; }
.grid-item-10x09 { grid-column: span 10; grid-row: span 9; }
.grid-item-10x10 { grid-column: span 10; grid-row: span 10; }
.grid-item-10x11 { grid-column: span 10; grid-row: span 11; }
.grid-item-10x12 { grid-column: span 10; grid-row: span 12; }

.grid-item-11x01 { grid-column: span 11; grid-row: span 1; }
.grid-item-11x02 { grid-column: span 11; grid-row: span 2; }
.grid-item-11x03 { grid-column: span 11; grid-row: span 3; }
.grid-item-11x04 { grid-column: span 11; grid-row: span 4; }
.grid-item-11x05 { grid-column: span 11; grid-row: span 5; }
.grid-item-11x06 { grid-column: span 11; grid-row: span 6; }
.grid-item-11x07 { grid-column: span 11; grid-row: span 7; }
.grid-item-11x08 { grid-column: span 11; grid-row: span 8; }
.grid-item-11x09 { grid-column: span 11; grid-row: span 9; }
.grid-item-11x10 { grid-column: span 11; grid-row: span 10; }
.grid-item-11x11 { grid-column: span 11; grid-row: span 11; }
.grid-item-11x12 { grid-column: span 11; grid-row: span 12; }

.grid-item-12x01 { grid-column: span 12; grid-row: span 1; }
.grid-item-12x02 { grid-column: span 12; grid-row: span 2; }
.grid-item-12x03 { grid-column: span 12; grid-row: span 3; }
.grid-item-12x04 { grid-column: span 12; grid-row: span 4; }
.grid-item-12x05 { grid-column: span 12; grid-row: span 5; }
.grid-item-12x06 { grid-column: span 12; grid-row: span 6; }
.grid-item-12x07 { grid-column: span 12; grid-row: span 7; }
.grid-item-12x08 { grid-column: span 12; grid-row: span 8; }
.grid-item-12x09 { grid-column: span 12; grid-row: span 9; }
.grid-item-12x10 { grid-column: span 12; grid-row: span 10; }
.grid-item-12x11 { grid-column: span 12; grid-row: span 11; }
.grid-item-12x12 { grid-column: span 12; grid-row: span 12; }



      /*Adaptation du body pour smartphones et tablettes portrait */
      @media (max-width: 780px) {
        .specif-content {
          grid-area: 6 / 1 / 7 / 4; /* De la 6ème ligne à la 7ème, et de la 1ère colonne à la 4ème */
          grid-template-columns: repeat(2, calc((100% - (1 * 2%) - (2 * 2%)) / 2));
          grid-template-rows: auto;
          grid-auto-flow: dense; /* Remplissage automatique en mode compact */
          gap: 2%;
          padding: 2%;
          overflow-y: auto;
        }     
        /* Éléments occupant 3 colonnes ou moins */
        .grid-item-01x01 { grid-column: span 1; grid-row: span 1; }
        .grid-item-01x02 { grid-column: span 1; grid-row: span 1; }
        .grid-item-01x03 { grid-column: span 1; grid-row: span 1; }
        .grid-item-01x04 { grid-column: span 1; grid-row: span 1; }
        .grid-item-01x05 { grid-column: span 1; grid-row: span 1; }
        .grid-item-01x06 { grid-column: span 1; grid-row: span 1; }
        .grid-item-01x07 { grid-column: span 1; grid-row: span 1; }
        .grid-item-01x08 { grid-column: span 1; grid-row: span 1; }
        .grid-item-01x09 { grid-column: span 1; grid-row: span 1; }
        .grid-item-01x10 { grid-column: span 1; grid-row: span 1; }
        .grid-item-01x11 { grid-column: span 1; grid-row: span 1; }
        .grid-item-01x12 { grid-column: span 1; grid-row: span 1; }

        .grid-item-02x01 { grid-column: span 1; grid-row: span 1; }
        .grid-item-02x02 { grid-column: span 1; grid-row: span 1; }
        .grid-item-02x03 { grid-column: span 1; grid-row: span 1; }
        .grid-item-02x04 { grid-column: span 1; grid-row: span 1; }
        .grid-item-02x05 { grid-column: span 1; grid-row: span 1; }
        .grid-item-02x06 { grid-column: span 1; grid-row: span 1; }
        .grid-item-02x07 { grid-column: span 1; grid-row: span 1; }
        .grid-item-02x08 { grid-column: span 1; grid-row: span 1; }
        .grid-item-02x09 { grid-column: span 1; grid-row: span 1; }
        .grid-item-02x10 { grid-column: span 1; grid-row: span 1; }
        .grid-item-02x11 { grid-column: span 1; grid-row: span 1; }
        .grid-item-02x12 { grid-column: span 1; grid-row: span 1; }

        .grid-item-03x01 { grid-column: span 1; grid-row: span 1; }
        .grid-item-03x02 { grid-column: span 1; grid-row: span 1; }
        .grid-item-03x03 { grid-column: span 1; grid-row: span 1; }
        .grid-item-03x04 { grid-column: span 1; grid-row: span 1; }
        .grid-item-03x05 { grid-column: span 1; grid-row: span 1; }
        .grid-item-03x06 { grid-column: span 1; grid-row: span 1; }
        .grid-item-03x07 { grid-column: span 1; grid-row: span 1; }
        .grid-item-03x08 { grid-column: span 1; grid-row: span 1; }
        .grid-item-03x09 { grid-column: span 1; grid-row: span 1; }
        .grid-item-03x10 { grid-column: span 1; grid-row: span 1; }
        .grid-item-03x11 { grid-column: span 1; grid-row: span 1; }
        .grid-item-03x12 { grid-column: span 1; grid-row: span 1; }

        /* Éléments occupant plus de 3 colonnes */
        .grid-item-04x01 { grid-column: span 2; grid-row: span 1; }
        .grid-item-04x02 { grid-column: span 2; grid-row: span 1; }
        .grid-item-04x03 { grid-column: span 2; grid-row: span 1; }
        .grid-item-04x04 { grid-column: span 2; grid-row: span 1; }
        .grid-item-04x05 { grid-column: span 2; grid-row: span 1; }
        .grid-item-04x06 { grid-column: span 2; grid-row: span 1; }
        .grid-item-04x07 { grid-column: span 2; grid-row: span 1; }
        .grid-item-04x08 { grid-column: span 2; grid-row: span 1; }
        .grid-item-04x09 { grid-column: span 2; grid-row: span 1; }
        .grid-item-04x10 { grid-column: span 2; grid-row: span 1; }
        .grid-item-04x11 { grid-column: span 2; grid-row: span 1; }
        .grid-item-04x12 { grid-column: span 2; grid-row: span 1; }
        
        .grid-item-05x01 { grid-column: span 2; grid-row: span 1; }
        .grid-item-05x02 { grid-column: span 2; grid-row: span 1; }
        .grid-item-05x03 { grid-column: span 2; grid-row: span 1; }
        .grid-item-05x04 { grid-column: span 2; grid-row: span 1; }
        .grid-item-05x05 { grid-column: span 2; grid-row: span 1; }
        .grid-item-05x06 { grid-column: span 2; grid-row: span 1; }
        .grid-item-05x07 { grid-column: span 2; grid-row: span 1; }
        .grid-item-05x08 { grid-column: span 2; grid-row: span 1; }
        .grid-item-05x09 { grid-column: span 2; grid-row: span 1; }
        .grid-item-05x10 { grid-column: span 2; grid-row: span 1; }
        .grid-item-05x11 { grid-column: span 2; grid-row: span 1; }
        .grid-item-05x12 { grid-column: span 2; grid-row: span 1; }
        
        .grid-item-06x01 { grid-column: span 2; grid-row: span 1; }
        .grid-item-06x02 { grid-column: span 2; grid-row: span 1; }
        .grid-item-06x03 { grid-column: span 2; grid-row: span 1; }
        .grid-item-06x04 { grid-column: span 2; grid-row: span 1; }
        .grid-item-06x05 { grid-column: span 2; grid-row: span 1; }
        .grid-item-06x06 { grid-column: span 2; grid-row: span 1; }
        .grid-item-06x07 { grid-column: span 2; grid-row: span 1; }
        .grid-item-06x08 { grid-column: span 2; grid-row: span 1; }
        .grid-item-06x09 { grid-column: span 2; grid-row: span 1; }
        .grid-item-06x10 { grid-column: span 2; grid-row: span 1; }
        .grid-item-06x11 { grid-column: span 2; grid-row: span 1; }
        .grid-item-06x12 { grid-column: span 2; grid-row: span 1; }
        
        .grid-item-07x01 { grid-column: span 2; grid-row: span 1; }
        .grid-item-07x02 { grid-column: span 2; grid-row: span 1; }
        .grid-item-07x03 { grid-column: span 2; grid-row: span 1; }
        .grid-item-07x04 { grid-column: span 2; grid-row: span 1; }
        .grid-item-07x05 { grid-column: span 2; grid-row: span 1; }
        .grid-item-07x06 { grid-column: span 2; grid-row: span 1; }
        .grid-item-07x07 { grid-column: span 2; grid-row: span 1; }
        .grid-item-07x08 { grid-column: span 2; grid-row: span 1; }
        .grid-item-07x09 { grid-column: span 2; grid-row: span 1; }
        .grid-item-07x10 { grid-column: span 2; grid-row: span 1; }
        .grid-item-07x11 { grid-column: span 2; grid-row: span 1; }
        .grid-item-07x12 { grid-column: span 2; grid-row: span 1; }
        
        .grid-item-08x01 { grid-column: span 2; grid-row: span 1; }
        .grid-item-08x02 { grid-column: span 2; grid-row: span 1; }
        .grid-item-08x03 { grid-column: span 2; grid-row: span 1; }
        .grid-item-08x04 { grid-column: span 2; grid-row: span 1; }
        .grid-item-08x05 { grid-column: span 2; grid-row: span 1; }
        .grid-item-08x06 { grid-column: span 2; grid-row: span 1; }
        .grid-item-08x07 { grid-column: span 2; grid-row: span 1; }
        .grid-item-08x08 { grid-column: span 2; grid-row: span 1; }
        .grid-item-08x09 { grid-column: span 2; grid-row: span 1; }
        .grid-item-08x10 { grid-column: span 2; grid-row: span 1; }
        .grid-item-08x11 { grid-column: span 2; grid-row: span 1; }
        .grid-item-08x12 { grid-column: span 2; grid-row: span 1; }
        
        .grid-item-09x01 { grid-column: span 2; grid-row: span 1; }
        .grid-item-09x02 { grid-column: span 2; grid-row: span 1; }
        .grid-item-09x03 { grid-column: span 2; grid-row: span 1; }
        .grid-item-09x04 { grid-column: span 2; grid-row: span 1; }
        .grid-item-09x05 { grid-column: span 2; grid-row: span 1; }
        .grid-item-09x06 { grid-column: span 2; grid-row: span 1; }
        .grid-item-09x07 { grid-column: span 2; grid-row: span 1; }
        .grid-item-09x08 { grid-column: span 2; grid-row: span 1; }
        .grid-item-09x09 { grid-column: span 2; grid-row: span 1; }
        .grid-item-09x10 { grid-column: span 2; grid-row: span 1; }
        .grid-item-09x11 { grid-column: span 2; grid-row: span 1; }
        .grid-item-09x12 { grid-column: span 2; grid-row: span 1; }
        
        .grid-item-10x01 { grid-column: span 2; grid-row: span 1; }
        .grid-item-10x02 { grid-column: span 2; grid-row: span 1; }
        .grid-item-10x03 { grid-column: span 2; grid-row: span 1; }
        .grid-item-10x04 { grid-column: span 2; grid-row: span 1; }
        .grid-item-10x05 { grid-column: span 2; grid-row: span 1; }
        .grid-item-10x06 { grid-column: span 2; grid-row: span 1; }
        .grid-item-10x07 { grid-column: span 2; grid-row: span 1; }
        .grid-item-10x08 { grid-column: span 2; grid-row: span 1; }
        .grid-item-10x09 { grid-column: span 2; grid-row: span 1; }
        .grid-item-10x10 { grid-column: span 2; grid-row: span 1; }
        .grid-item-10x11 { grid-column: span 2; grid-row: span 1; }
        .grid-item-10x12 { grid-column: span 2; grid-row: span 1; }
        
        .grid-item-11x01 { grid-column: span 2; grid-row: span 1; }
        .grid-item-11x02 { grid-column: span 2; grid-row: span 1; }
        .grid-item-11x03 { grid-column: span 2; grid-row: span 1; }
        .grid-item-11x04 { grid-column: span 2; grid-row: span 1; }
        .grid-item-11x05 { grid-column: span 2; grid-row: span 1; }
        .grid-item-11x06 { grid-column: span 2; grid-row: span 1; }
        .grid-item-11x07 { grid-column: span 2; grid-row: span 1; }
        .grid-item-11x08 { grid-column: span 2; grid-row: span 1; }
        .grid-item-11x09 { grid-column: span 2; grid-row: span 1; }
        .grid-item-11x10 { grid-column: span 2; grid-row: span 1; }
        .grid-item-11x11 { grid-column: span 2; grid-row: span 1; }
        .grid-item-11x12 { grid-column: span 2; grid-row: span 1; }
        
        .grid-item-12x01 { grid-column: span 2; grid-row: span 1; }
        .grid-item-12x02 { grid-column: span 2; grid-row: span 1; }
        .grid-item-12x03 { grid-column: span 2; grid-row: span 1; }
        .grid-item-12x04 { grid-column: span 2; grid-row: span 1; }
        .grid-item-12x05 { grid-column: span 2; grid-row: span 1; }
        .grid-item-12x06 { grid-column: span 2; grid-row: span 1; }
        .grid-item-12x07 { grid-column: span 2; grid-row: span 1; }
        .grid-item-12x08 { grid-column: span 2; grid-row: span 1; }
        .grid-item-12x09 { grid-column: span 2; grid-row: span 1; }
        .grid-item-12x10 { grid-column: span 2; grid-row: span 1; }
        .grid-item-12x11 { grid-column: span 2; grid-row: span 1; }
        .grid-item-12x12 { grid-column: span 2; grid-row: span 1; }
      }


/* Included from 4.fixed-views.css */

/* Styles communs pour la vue double liste */
  
.A-2listView-container {
    grid-column: 1 / 7;
    grid-row: 1 / 13;
    overflow-y: auto;
  }
  
.B-2listView-container {
    grid-column: 7 / 13;
    grid-row: 1 / 13;
    overflow-y: auto;
  }

/* Styles communs pour la vue triple liste */
  
 .A-3listView-container {
  grid-column: 1 / 4;
  grid-row: 1 / 13;
}

.B-3listView-container {
  grid-column: 4 / 8;
  grid-row: 1 / 13;
}

.C-3listView-container {
  grid-column: 8 / 13;
  grid-row: 1 / 13;
}

/* Styles communs pour la vue dashboard */
  
.A-dashView-container {
  grid-column: 1 / 8;
  grid-row: 1 / 7;
}

.B-dashView-container {
  grid-column: 8 / 13;
  grid-row: 1 / 7;
}

.C-dashView-container {
  grid-column: 1 / 5;
  grid-row: 7 / 13;
}

.D-dashView-container {
  grid-column: 5 / 13;
  grid-row: 7 / 13;
}
/* Included from address_form.css */

.address-form-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.address-form-container label {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.address-form-container input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.address-form-container button {
    padding: 10px;
    border: none;
    background-color: #5cb85c;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}

.address-form-container button:hover {
    background-color: #4cae4c;
}

/* Included from buttons-forms.css */

/* Styles généraux pour le formulaire */
.form-input {
  height: var(--button-height); /* Ajuste la hauteur selon les besoins */
  border-radius: calc(0.5 * var(--button-height)); /* Demi-cercle : rayon = hauteur / 2 */
  border: none;
  font-family: var(--font);
  font-size: calc(0.45 * var(--button-height));
  padding: 0 15px;
  margin: 0 20px;
  text-align: center; /* Centre le texte */
  color: var(--colorB_light);
  background-color: rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3),
              inset 0 -1px 1px rgba(255, 255, 255, 0.2); /* Ombre intérieure */
  cursor: text;
}

.form-input:focus {
  background-color: var(--colorA_deepDark);
  color: var(--colorB_light);
  border: none;
}

.textarea-input {
  border-radius: calc(0.5 * var(--button-height)); /* Demi-cercle : rayon = hauteur / 2 */
  border: none;
  font-family: var(--font);
  font-size: calc(0.45 * var(--button-height));
  padding: 0 15px;
  margin: 0 20px;
  text-align: center; /* Centre le texte */
  color: var(--colorB_light);
  background-color: rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3),
              inset 0 -1px 1px rgba(255, 255, 255, 0.2); /* Ombre intérieure */
  cursor: text;
}

/* Styles pour les éléments select */
.form-select {
  height: var(--button-height);
  border-radius: calc(0.5 * var(--button-height));
  border: none;
  font-family: var(--font);
  font-size: calc(0.45 * var(--button-height));
  padding: 0 15px;
  margin: 0 20px;
  text-align: center;
  color: var(--grey);
  background-color: var(--colorA_deepDark);
  box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.5),
              inset 0 -2px 1px rgba(255, 255, 255, 0.5); /* Ombre intérieure */
  cursor: text;
}

.form-select:focus {
  background-color: var(--colorA_deepDark);
  color: var(--grey);
  border: none;
}

/* Styles pour les boutons */
.button {
  height: var(--button-height);
  border-radius: calc(0.5 * var(--button-height));
  border: none;
  font-family: var(--font);
  font-size: calc(0.45 * var(--button-height));
  padding: 0 15px;
  margin: 0 20px;
  background-color: rgba(255, 255, 255, 0.25); /* Couleur de fond */
  color: var(--colorB_strong); /* Couleur du texte */
  display: flex; /* Utilisation de flexbox */
  align-items: center; /* Centre verticalement */
  justify-content: center; /* Centre horizontalement */
  text-align: center;
  text-decoration: none; /* Supprime le soulignement du lien */
  box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.5),
              inset 0 1px 1px rgba(255, 255, 255, 0.2); /* Ombre intérieure */
  cursor: pointer;
  transition: background-color 0.3s ease; /* Transition pour l'effet de survol */
}

.button:hover {
  background-color: var(--colorA_light); /* Couleur de fond au survol */
  color: var(--colorA_deepDark); /* Couleur du texte */
}

.button:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4); /* Ombre intérieure pour simuler un clic */
  background-color: var(--colorA_deepDark); /* Couleur plus foncée au clic */
}

/* Styles pour les messages d'erreur */
.error {
  color: var(--colorB_strong);
  margin-bottom: 15px;
}

/* Styles pour les groupes de champs de formulaire */
.form-group {
  margin: 20px;
  padding: 5px;
  background-color: rgba(255, 255, 255, 0.015);
  border-radius: var(--border-radius-medium);
}

/* Ajouter des classes de flexbox si nécessaire pour la mise en page */
.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* Classe pour les labels associés à un champ de formulaire */
.form-label {
  font-family: var(--font);
  font-size: 16px;
  margin-bottom: 5px;
  color: var(--colorB_light);
}

/* Style de base pour l'élément range */
.range-input {
  -webkit-appearance: none;  /* Désactive le style par défaut sur Webkit (Chrome, Safari) */
  appearance: none;          /* Désactive le style par défaut */
  width: 50%;               /* L'élément prend toute la largeur disponible */
  height: 3px;               /* Hauteur de la barre */
  background: rgba(255, 255, 255, 0.1);          /* Couleur de fond de la barre */
  border-radius: 5px;        /* Coins arrondis */
  outline: none;             /* Retirer le contour par défaut */
}

/* Style du curseur de range (thumb) */
.range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;               /* Largeur du curseur */
  height: 20px;              /* Hauteur du curseur */
  background: var(--colorB_strong);       /* Couleur du curseur */
  border-radius: 50%;        /* Forme ronde */
  cursor: pointer;          /* Curseur pointeur sur le curseur */
}

/* Style de base pour l'élément color picker */
.color-input {
  width: 150px;           /* Largeur de la palette de couleurs */
  height: 50px;          /* Hauteur de l'input */
  border: none;          /* Bordure légère */
  border-radius: 25px;     /* Coins arrondis pour un effet circulaire */
  padding: 0;            /* Aucun padding */
  margin: 0;
  appearance: none;      /* Enlève l'apparence par défaut du navigateur */
  -webkit-appearance: none; /* Pour Safari */
  -moz-appearance: none; /* Pour Firefox */
  cursor: pointer;       /* Le curseur devient une main pour un effet cliquable */
}

/* Style de remplacement pour pour l'élément input file */

.file-input-wrapper {
  display: inline-block;
  position: relative;

}

.file-input {
  opacity: 0; /* Masque le champ natif */
  position: absolute;
  z-index: -1; /* Place en arrière-plan pour éviter les interactions */
}

.file-label {
  height: var(--button-height);
  display: inline-block;
  padding: 0px 15px;
  background-color: rgba(255, 255, 255, 0.25);
  color: white;
  border-radius: calc(var(--button-height)/2);
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s ease;
}

.file-label:hover {
  background-color: var(--colorA_light); /* Couleur de fond au survol */
}

.file-name {
  margin-left: 10px;
  font-size: 14px;
  color: #555;
}

/* Style de remplacement pour la checkbox - effet toggle */


input[type="checkbox"].checkbox-input {
  display: none;
}
input[type="checkbox"].checkbox-input + label {
  box-sizing: border-box;
  display: inline-block;
  width: 2.5rem;
  height: 1.25rem;
  border-radius: 1.25rem;
  padding:2px;
  background-color: rgba(0, 0, 0, 0.25) ;
  transition: all 0.35s ;
  cursor: pointer;
}
input[type="checkbox"].checkbox-input + label::before {
  box-sizing: border-box;
  display: block;
  content: "";
  height: calc(1.25rem - 4px);
  width: calc(1.25rem - 4px);
  border-radius: 50%;
  background-color: var(--grey);
  transition: all 0.5s ;
}
input[type="checkbox"].checkbox-input:checked + label {
  background-color: var(--colorB_strong) ;
}
input[type="checkbox"].checkbox-input:checked + label::before {
  margin-left: 1.25rem ;
}


/* Style de remplacement pour les boutons radios */

input[type="radio"].radio-input {
  display: none;
}
input[type="radio"].radio-input + label {
  position: relative;
  padding-left: 1.3rem;
}
input[type="radio"].radio-input + label::before,
input[type="radio"].radio-input + label::after {
  display: block;
  position: absolute;
  box-sizing: border-box;
  content:'';
  border-radius: 1rem;
}
input[type="radio"].radio-input + label::before {
  bottom: 0;
  left: 0;
  border: 1px solid var(--grey);
  background-color: rgba(0, 0, 0, 0.25) ;
  width: 1rem;
  height: 1rem; 
}
input[type="radio"].radio-input + label::after {
  bottom: 3px;
  left: 3px;
  width: calc(1rem - 6px);
  height: calc(1rem - 6px);
}
input[type="radio"].radio-input:checked + label::after {
  background-color: var(--colorB_strong);
}

/* Included from checkbox.css */

.checkbox-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
}

.checkbox-container input[type="checkbox"] {
    margin: 0;
}

.checkbox-container label {
    margin: 0;
    display: inline;
} 

.checkbox-label {
    font-size: 1rem;
    font-weight: 500;
    color: inherit;
}
/* Included from content-container.css */

 /* Styles communs pour la zone de contenu */
 .containerViewArea {
    background-color: var(--colorA_deepDark);
    margin: 10px;
    padding: 0px;
    border-radius: var(--border-radius-medium);
    position: relative; /* Assurez-vous que la position est relative pour permettre un positionnement absolu des enfants si nécessaire */
    border: 1px solid var(--colorA_dark); /* Bord fin par défaut */
  }
  
  .containerViewArea h2 {
    margin: 0; /* Enlever les marges par défaut */
    padding: 10px; /* Ajouter du padding pour le titre */
    background-color: var(--colorA_dark); /* Couleur de fond pour le titre */
    color: var(--colorB_strong); /* Couleur du texte pour le titre */
    border-top-left-radius: 8px; /* Radius pour le coin supérieur gauche */
    border-top-right-radius: 8px; /* Radius pour le coin supérieur droit */
  }
  
  /* Assurez-vous que la hauteur est calculée correctement */
  .contentViewArea {
    background-color: var(--colorA_deepDark);
    border-radius: var(--border-radius-medium);
    padding: 8px;
    height: calc(100% - 2 * 10px - 2 * 3px - 35px); /* Ajustez la hauteur en fonction des marges et du padding */
    overflow-y: auto;
  }



/* Gestion des cadres arrondis avec titres flottants */
  .radius-border {
    position: relative;
    border: 1px solid var(--grey); /* Ajustez */
    margin-top:20px; /* Ajustez */
    border-radius: var(--border-radius-medium); /* Ajustez */
    padding-left: 5px;
    padding-right: 5px;
  }
  .float-title {
    position: absolute;
    top:-10px;
    background: var(--colorA_deepDark); /* Ajustez */
    left:10px;
    padding:0 10px;
  }


  .div-space_before-after {
    margin-top: 10px;
    margin-bottom: 20px;
  }
/* Included from content-header.css */

/* Entête du comntenu principal */

/* Définition des conteneurs */

  .content-title {
    grid-column: 2 / 6;
    grid-row: 3 / 4;
    padding-top: 10px;
  }
  
  .content-addInfo {
    grid-column: 2 / 4;
    grid-row: 4 / 5;
  }
  
  .content-shortDesc {
    grid-column: 2 / 4;
    grid-row: 5 / 6;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }

  .details-imgProj {
    grid-column: 6 / 7;
    grid-row: 3 / 6;
    padding: 5%;
  }

  .content-decription {
    grid-column: 4 / 6;
    grid-row: 4 / 6;
    overflow-y: auto;
  }

/* Mise en forme des contenus */

.img-detailProj {
    height: 100%;
    width: 100%;
    object-fit: contain;
    border-radius: var(--border-radius-medium);
}

    /*Adaptation du body pour smartphones et tablettes portrait */

    @media (max-width: 780px) {
      .content-title {
        grid-area: 3 / 1 / 4 / 4; /* De la 3ème ligne à la 4ème, et de la 1ère colonne à la 3ème */
        padding-left: 4px;
      }
      
      .content-addInfo {
        grid-area: 4 / 1 / 5 / 3; /* De la 4ème ligne à la 5ème, et de la 1ère colonne à la 3ème */
        padding-left: 4px;
      }
      
      .content-shortDesc {
        grid-area: 5 / 1 / 6 / 3; /* De la 5ème ligne à la 6ème, et de la 1ère colonne à la 3ème */
        padding-left: 4px;
      }
      
      .details-imgProj {
        grid-area: 4 / 3 / 6 / 4; /* De la 3ème ligne à la 6ème, et de la 3ème colonne à la 4ème */
      }
    }
/* Included from footer.css */

/* Définition des conteneurs */

.left-footer {
    grid-column: 1 / 4;
    grid-row: 9 / 10;
    background-color: var(--colorA_dark);
    text-align: start;
    vertical-align: middle;
  }
  
  .right-footer {
    grid-column: 4 / 7;
    grid-row: 9 / 10;
    background-color: var(--colorA_dark);
    text-align: end;
    vertical-align: middle;
  }

 /* Mise en forme des contenus */ 




     /*Adaptation du body pour smartphones et tablettes portrait */
     @media (max-width: 780px) {
      .left-footer {
        grid-area: 8 / 1 / 9 / 4; /* De la 8ème ligne à la 9ème, et de la 1ère colonne à la 4ème */
      }
      .right-footer {
        display: none;
      }
     }
/* Included from ftp_list.css */

.ftp-list {
    width: fit-content;
    border: 1px;
    border-radius: var(--border-radius-medium);
    border-color: var(--grey);
    padding: 8px;
}

.ftp-directory {
    padding-bottom: 8px;
}

.ftp-file {
    padding-bottom: 8px;
    padding-left: 6px;
}
/* Included from header.css */

/* Définition des conteneurs */

.logo {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    background-color: var(--colorA_dark);
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-items: center;
  }
  
  .user-info {
    grid-column: 3 / 7;
    grid-row: 1 / 2;
    background-color: var(--colorA_dark);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    padding-top: 5px;
    padding-right: 5px;
  }
  
  .header-nav {
    grid-column: 3 / 7;
    grid-row: 2 / 3;
    background-color: var(--colorA_dark);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
    padding-right: 24px;
  }
  
/* Mise en forme des contenus */

.logo-container {
  height: calc(0.96 * 72px);  /* repasser en variable DB */
  width: 100%;
  display: flex;            /* Active le flexbox */
  flex-direction: row;      /* Aligne les éléments horizontalement (par défaut) */
  justify-content: flex-start; /* Aligne les éléments à gauche (début de la ligne) */
  align-items: center;      /* Centre les éléments verticalement dans le conteneur */
}


.img-logo {
    height : 100%;
    max-width: 100%;
    object-fit: contain;
}


    /*Adaptation du body pour smartphones et tablettes portrait */
    @media (max-width: 780px) {
      .header-nav {
        grid-area: 2 / 1 / 3 / 4; /* De la 2ème ligne à la 3ème, et de la 1ère colonne à la 4ème */
        justify-content: space-around;
        padding-top: unset;
        gap: unset;
      }
      .user-info {
        grid-area: 1 / 1 / 2 / 4; /* De la 1ère ligne à la 2ème, et de la 1ère colonne à la 4ème */
      }
      .logo {
        display: none;
      }
    }
/* Included from icons_view.css */

.ico-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); /* 200px minimum par colonne */
    gap: 10px; /* Espacement entre les icônes */
}

.icon-group {
    display: flex;
    flex-direction: column; /* Changez ceci si vous voulez que les groupes soient en ligne */
    margin-bottom: 20px; /* Espacement entre les groupes */
    border: 1px solid var(--grey);
    border-radius: var(--border-radius-medium);
    padding: 10px; /* Espacement interne */
    gap: 10px;
}

.icon-card {
    display: flex;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: var(--border-radius-small);
    padding: 10px; /* Espacement interne pour chaque carte */
    transition: background-color 0.5s; /* Animation au survol */
    gap: 5px;
}

.icon-card:hover {
    background-color: rgba(0, 0, 0, 0.8); /* Couleur au survol */
}

/* Included from img-crop-handler.css */

.crop-preview-container {
  max-height: 90%;
  max-width: 90%;
  align-items: center;
  vertical-align: middle;
}
/* Included from modals.css */

/* Style de base pour les modals */
.modal {
    display: none; /* Masquer les modals par défaut */
    position: fixed; /* Reste en place pendant le défilement */
    z-index: 1; /* Au-dessus du contenu */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Activer le défilement si nécessaire */
    background-color: var(--colorA_dark);
}

/* Contenu du modal */
.modal-content {
    background-color: var(--colorA_deepDark);
    margin: 15% auto; /* Centrer le modal */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Largeur du modal */
}

/* Bouton de fermeture */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

/* Changer la couleur du bouton de fermeture au survol */
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Included from sidebar.css */

/* Définition des conteneurs */

.sidebar {
    grid-column: 1 / 2;
    grid-row: 3 / 9;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Aligne les éléments en haut du conteneur */
    align-items: center;      /* Centre les éléments horizontalement */
    padding-top: 35px;
    gap: 35px;
  }

/* Mise en forme des contenus */



    /*Adaptation du body pour smartphones et tablettes portrait */
    @media (max-width: 780px) {
      .sidebar {
        grid-area: 7 / 1 / 8 / 4; /* De la 7ème ligne à la 8ème, et de la 1ère colonne à la 4ème */
        flex-direction: row;
        justify-content: space-around;
        padding-top: unset;
        gap: unset;
      }
    }
/* Included from tasks.css */

.tasks-grid{
	display: grid;
	gap : 5px;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* Colonne flexible */
}

.tasks-groupTitle {
    grid-column: 1 / -1; /* Occupe toutes les colonnes */
	position: sticky;
	top: 0;
	background: var(--colorA_deepDark);
	z-index: 10;
	padding: 5px;
}

.task-group {
	background-color: rgba(255,255,255,0.05);
	border-radius: 15px;
	display: flex;
	padding: 20px;
	 
}

.task-check {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-right: 20px;
}



.task-content {
	display: flex;
	flex-direction: column;
	
}
/* Included from tile.css */

.tile {
    width: 200px;
    height: 250px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    background-color: #00000030;
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
}

.tile .image-container {
    width: 100%;
    height: 66.67%;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-sizing: border-box;
}

.id-img-container {
    position: absolute;
    bottom: 0;
    vertical-align: bottom;
    padding: 5px;
}

.tile-content {
    padding: 5px;
    height: 33.33%;
    background-color: var(--colorA_dark);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
}

.tile .content a {
    color: #0066cc;
    text-decoration: none;
    font-size: 0.9em;
}

.tile .content a:hover {
    text-decoration: underline;
}

/* Included from login.css */

/* Partie index & connexion */

.index {  display: grid;
    grid-template-columns: 1fr minmax(300px, 25%) 1fr;
    grid-template-rows: 1fr minmax(500px, 60%) 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      ". . ."
      ". index-box ."
      ". . .";
  }

.index-box, .login-box {
    grid-area: index-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--colorA_dark);
    padding: 20px;
    border-radius: var(--box-border-radius);
}

.login-logo {
    width: 100%;
    height: auto;
    display: block;
}

.log-img {
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.log-title {
    height: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.log-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    width: 100%;
}

.form-login {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    width: 100%;
} 






/* Included from responsive.css */

@media (max-width: 768px) {
    .header-container,
    .footer-container {
        flex-direction: column;
        text-align: center;
    }

    #sidebar {
        width: 100%;
        height: auto;
        position: relative;
    }

    .content-header {
        flex-direction: column;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .content-header {
        flex-direction: column;
        gap: 10px;
    }

    .content-actions ul {
        flex-direction: column;
        gap: 10px;
    }
}