body,
 h1,
 h2,
 h3,
 p,
 a,
 ul,
 li,
 strong,
 table,
 thead,
 tbody,
 tr,
 td,
 th,
 td,
 button {
   all: unset;
 }

 /* ------------ Variables ------------ */
 :root {

   --color-background: rgb(245, 247, 251);
   --color-background-element: rgb(255, 255, 255);
   --color-border-element: rgb(215, 214, 220);
   --color-purple: rgb(102, 55, 244);
   --color-purple-light: rgb(137, 123, 255);
   --color-purple-dark: rgb(60, 54, 186);
   --color-purple-super-light: rgb(240, 235, 254);
   --color-gradient: linear-gradient(360deg,
       var(--color-purple-dark) 0%,
       var(--color-purple-light) 100%);


   --color-primary: rgb(105, 111, 253);
   --color-primary-transparent: rgba(var(--color-primary), 0.4);
   --color-second: #e6e6f9;
   --color-bleu-fonce: #484dc6;
   --color-bleu-moyen-2: rgb(220, 220, 255);
   --color-bleu-moyen-rgba: rgb(150, 155, 254);
   --color-bleu-moyen-transparent: rgba(var(--color-bleu-moyen-rgba), 0.2);

   --color-bleu-clair: #d0d0fa;
   --color-sombre: #0f162e;
   --color-light: #fcfaf8;
   --color-black: #0f162e;
   /* --color-white: #FBF6EF; */
   /* --color-white: #FCFAF8; */
   --color-white: rgb(255, 255, 255);
   --color-gray: #c1c1c1;
   --color-gray-light: #ebebeb;
   --color-red: #ff0000;
   --color-gradient-1: linear-gradient(-90deg,
       var(--color-primary) 0%,
       #3b3fbf 100%);
   --color-gradient-2: linear-gradient(0deg,
       var(--color-bleu-moyen-transparent) 0%,
       var(--color-primary) 84%);

   --color-gradient-3: linear-gradient(0deg,
       var(--color-primary-transparent) 0%,
       var(--color-bleu-moyen-transparent) 84%);

   --font-family: 'PT Sans', sans-serif;

   --border-radius: 15px;
   --border: 1px solid var(--color-border-element);

   --transition-curve: ease-in-out;
   --transition-duration: 0.2s;

   --small-percent: 1%;
   --medium-percent: 3%;
   --large-percent: 5%;
 }

 /* ------------ Balise HTML / Style base ------------ */
 * {
   box-sizing: border-box;
   font-family: var(--font-family);
 }

 body {
   height: 100vh;
   margin: 0;
   padding: 0;
   font-family: 'PT Sans', sans-serif;
   font-weight: 400;
   font-style: normal;
   background-color: var(--color-background);
   /* overflow: hidden; */
 }

 img {
   object-fit: contain;
 }

 h1 {
   font-size: 32px;
   font-weight: bold;
 }

 h2 {
   font-size: 20px;
   font-weight: bold;
 }

 h3 {
   font-size: 1.5rem;
   font-weight: bold;
 }

 p,
 a {
   font-size: 14px;
 }

 a,
 .button {
   cursor: pointer;
 }

 /* ------------------------ Class ------------------------ */
 /* ------------ Non Classé ------------ */
 .box-border {
   box-sizing: border-box;
 }

 .cursor-pointer {
   cursor: pointer;
 }

 .overflow-hidden {
   overflow: hidden;
 }

 .overflow-y-scroll {
   overflow-y: scroll;
 }

 /* ------------ Width ------------ */
 .width-100 {
   width: 100%;
 }

 .width-75 {
   width: 75%;
 }

 .width-50 {
   width: 50%;
 }

 .width-15 {
   width: 15%;
 }

 .width-80 {
   width: 80%;
 }

 .width-350 {
   width: 350px;
 }

 .width-content {
   width: fit-content;
 }

 /* ------------ Height ------------ */
 .height-screen {
   height: 100vh;
 }

 .height-100 {
   height: 100%;
 }

 .height-90 {
   height: 90%;
 }

 .height-50 {
   height: 50%;
 }

 .height-10 {
   height: 10%;
 }

 .height-content {
   height: fit-content;
 }

 /* ------------ Position ------------ */
 .position-relative {
   position: relative;
 }

 .position-absolute {
   position: absolute;
 }

 .top-0 {
   top: 0;
 }

 .left-0 {
   left: 0;
 }

 /* ------------ Display ------------ */
 /* Flex */
 .display-flex {
   display: flex;
 }

 .flex-1 {
   flex: 1;
 }

 .wrap {
   flex-wrap: wrap;
 }

 .column {
   flex-direction: column;
 }

 .row {
   flex-direction: row;
 }

 .align-items-center {
   align-items: center;
 }

 .align-items-end {
   align-items: flex-end;
 }

 .justify-content-center {
   justify-content: center;
 }

 .justify-content-between {
   justify-content: space-between;
 }

 .justify-content-end {
   justify-content: flex-end;
 }

 /* Grid */
 .display-grid {
   display: grid;
 }

 .grid-template-columns-2 {
   grid-template-columns: repeat(2, 1fr);
 }

 /* None */
 .display-none {
   display: none;
 }

 /* Block */
 .display-block {
   display: block;
 }

 /* ------------ Gap ------------ */
 .gap-medium {
   gap: 2rem;
 }

 .gap-small {
   gap: 1rem;
 }

 .gap-0 {
   gap: 0;
 }

 /* ------------ Padding ------------ */
 .padding-large {
   padding: 3rem;
 }

 .padding-medium {
   padding: 1rem;
 }

 .padding-left-medium {
   padding-left: 5%;
 }

 .padding-small {
   padding: 0.5rem;
 }

 .padding-left-small {
   padding-left: 2%;
 }

 .padding-left-large {
   padding-left: 7%;
 }

 .padding-top-small {
   padding-top: var(--small-percent);
 }

 .padding-top-medium {
   padding-top: var(--medium-percent);
 }

 .padding-top-large {
   padding-top: var(--large-percent);
 }

 .padding-bottom-large {
   padding-bottom: var(--large-percent);
 }

 .padding-x-medium {
   padding-left: 1rem;
   padding-right: 1rem;
 }

 .padding-y-small {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }

 .padding-05-1 {
   padding: 0.5rem 1rem;
 }

 /* ------------ Margin ------------ */
 .margin-top-auto {
   margin-top: auto;
 }

 .margin-top-minus-2 {
   margin-top: -2px;
 }

 .margin-large {
   margin: var(--large-percent);
 }

 .margin-medium {
   margin: var(--medium-percent);
 }

 .margin-small {
   margin: var(--small-percent);
 }

 .margin-bot {
   margin-bottom: 3.5rem;
 }

 .margin-right-small {
   margin-right: 1rem;
 }

 /* ------------ Border ------------ */
 .border-radius {
   border-radius: var(--border-radius);
 }

 .border-top-left-10 {
   border-top-left-radius: 10px;
 }

 .border-top-right-10 {
   border-top-right-radius: 10px;
 }

 .border-bottom-left-10 {
   border-bottom-left-radius: 10px;
 }

 .border-bottom-right-10 {
   border-bottom-right-radius: 10px;
 }

 .border-bottom-left-0 {
   border-bottom-left-radius: 0px;
 }

 .border-bottom-right-0 {
   border-bottom-right-radius: 0px;
 }

 .border-top-left-0 {
   border-top-left-radius: 0px;
 }

 .border-top-right-0 {
   border-top-right-radius: 0px;
 }

 /* Taille */
 .border-1 {
   border-width: 1px;
 }

 .border-2 {
   border-width: 2px;
 }

 .border-3 {
   border-width: 3px;
 }

 .border-12 {
   border-width: 12px;
 }

 /* Position */
 .border-top {
   border-top-style: solid;
 }

 .border-right {
   border-right-style: solid;
 }

 .border-bottom {
   border-bottom-style: solid;
 }

 .border-bottom-none {
   border-bottom-style: none;
 }

 .border-left {
   border-left-style: solid;
 }

 .border-all {
   border-style: solid;
 }

 /* Couleurs */
 .border-color-gray {
   border-color: var(--color-gray);
 }

 .border-color-gray-light {
   border-color: var(--color-gray-light);
 }

 .border-color-primary {
   border-color: var(--color-primary);
 }

 .border-color-transparent {
   border-color: transparent;
 }

 .border-color-gray-hover:hover {
   border-color: var(--color-gray);
 }

 .border-color-white-hover:hover {
   border-color: var(--color-white);
 }

 /* Style */
 .border-style-solid {
   border-style: solid;
 }

 /* ------------ Background ------------ */
 /* Color */
 .bg-primary {
   background-color: var(--color-primary);
 }

 .bg-primary-hover:hover {
   background-color: var(--color-primary);
 }

 .bg-white {
   background-color: var(--color-white);
 }

 .bg-gray-light {
   background-color: var(--color-gray-light);
 }

 .bg-gray {
   background-color: var(--color-gray);
 }

 /* Gradient */
 .gradient-1,
 .gradient-2-hover {
   position: relative;
   overflow: hidden;
 }

 .gradient-1:after,
 .gradient-2-hover:before {
   content: '';
   position: absolute;
   inset: 0;
 }

 .gradient-1 {
   background-image: var(--color-gradient-1);
 }

 .gradient-2-hover:before {
   background-image: var(--color-gradient-2);
   opacity: 0;
   transition: opacity var(--transition-duration) var(--transition-curve);
 }

 .gradient-2-hover:hover:before {
   opacity: 1;
 }

 /* ------------ Img / SVG ------------ */
 .icon-small {
   width: 15px;
   height: 15px;
 }

 .icon {
   width: 30px;
   height: 30px;
 }

 .icon-40 {
   width: 40px;
   height: 40px;
 }

 .icon-inline-primary svg {
   width: 1em;
   height: 1em;
   vertical-align: middle;
   fill: var(--color-bleu-moyen-2);
   color: var(--color-bleu-moyen-2);
   stroke: var(--color-bleu-moyen-2);
   stroke-width: 2;
 }

 .icon-stroke-white svg path {
   stroke: var(--color-white);
 }

 .icon-stroke-white-hover:hover svg path {
   stroke: var(--color-white);
 }

 .icon-stroke-primary svg path {
   stroke: var(--color-primary);
 }

 .icon-stroke-primary-hover:hover svg path {
   stroke: var(--color-primary);
 }

 .list .icon:hover {
   transition: transform var(--transition-duration) var(--transition-curve),
     opacity var(--transition-duration) var(--transition-curve);
 }

 .list .icon:hover {
   transform: scale(1.1);
   opacity: 0.8;
 }

 /* ------------ Text ------------ */
 /* Align */
 .text-center {
   text-align: center;
 }

 .text-color-white {
   color: var(--color-white);
 }

 .text-color-primary {
   color: var(--color-primary);
 }

 .text-color-white-hover:hover {
   color: var(--color-white);
 }

 .text-color-gray {
   color: var(--color-gray);
 }

 .text-bold,
 strong {
   font-weight: bold;
 }

 .text-italic {
   font-style: italic;
 }

 .text-16 {
   font-size: 16px;
 }

 .text-21 {
   font-size: 21px;
 }

 .text-24 {
   font-size: 24px;
 }

 .text-40 {
   font-size: 40px;
 }

 /* ------------ Z-Index ------------ */
 .z-index-1 {
   z-index: 1;
 }

 .z-index-2 {
   z-index: 2;
 }

 /* ------------ Transition ------------ */
 .transition {
   transition: background-color var(--transition-duration) var(--transition-curve),
     color var(--transition-duration) var(--transition-curve);
 }

 /* -------------- Table with onglets ------ */

 .tab-content {
   display: none;
 }

 .tab-content.active {
   display: block;
 }

 .session-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-template-rows: auto auto;
   gap: 2rem;
   grid-template-areas:
     'denomination pedagogy duration clients'
     'status status status status';
 }

 .session-grid> :nth-child(1) {
   grid-area: denomination;
 }

 .session-grid> :nth-child(2) {
   grid-area: pedagogy;
 }

 .session-grid> :nth-child(3) {
   grid-area: duration;
 }

 .session-grid> :nth-child(4) {
   grid-area: clients;
 }

 .session-status-form {
   grid-area: status;
 }

 .modal-overlay {
   backdrop-filter: blur(4px);
 }

 .side-modal {
   animation: slideInRight 0.3s;
 }

 .side-modal.slide-out {
   animation: slideOutRight 0.3s;
 }

 @keyframes slideInRight {
   from {
     transform: translateX(100%);
     opacity: 0;
   }

   to {
     transform: translateX(0);
     opacity: 1;
   }
 }

 @keyframes slideOutRight {
   from {
     transform: translateX(0);
     opacity: 1;
   }

   to {
     transform: translateX(100%);
     opacity: 0;
   }
 }

 /* --- Style pour le select du formulaire formateur --- */
 .side-modal label[for*='trainer'] {
   font-weight: bold;
   color: var(--color-primary);
   font-size: 1.1rem;
   margin-bottom: 0.5rem;
   display: block;
 }

 .side-modal select {
   width: 100%;
   padding: 0.75rem 1.5rem 0.75rem 1rem;
   border: 2px solid #d1d1d1;
   border-radius: 12px;
   background: #fff;
   font-size: 1rem;
   color: #181c3a;
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   outline: none;
   transition: border-color 0.2s;
   box-sizing: border-box;
   margin-bottom: 1.5rem;
   background-image: url("data:image/svg+xml;utf8,<svg fill='696ffd' height='16' viewBox='0 0 20 20' width='16' xmlns='http://www.w3.org/2000/svg'><polygon points='5,8 10,13 15,8'/></svg>");
   background-repeat: no-repeat;
   background-position: right 1rem center;
   background-size: 1.2em;
 }

 .side-modal select:focus {
   border-color: var(--color-primary);
 }

 .side-modal option {
   color: #181c3a;
 }

 .custom-notification {
   position: fixed;
   top: 2rem;
   right: 2rem;
   min-width: 320px;
   max-width: 90vw;
   background: #fcfaf7;
   border: 2px solid;
   border-radius: 18px;
   padding: 1.2em 2em 1.2em 3em;
   display: flex;
   align-items: center;
   gap: 1em;
   z-index: 2000;
   font-size: 1.25em;
   font-weight: bold;
   transition: opacity 0.2s;
   opacity: 0;
   transform: translateX(100%);
   transition: none;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
 }

 /* Style pour les notifications d'erreur */
 .notification-error {
   border-color: #dc2626;
   background-color: #fee2e2;
   color: #991b1b;
   box-shadow: 0 2px 12px rgba(220, 38, 38, 0.15);
 }

 /* Style pour les notifications de succès */
 .notification-success {
   border-color: #059669;
   background-color: #d1fae5;
   color: #065f46;
   box-shadow: 0 2px 12px rgba(5, 150, 105, 0.15);
 }

 .custom-notification .notif-close {
   color: #181c3a;
 }

 .custom-notification.show {
   animation: notifSlideIn 0.3s cubic-bezier(0.4, 2, 0.6, 1) forwards;
 }

 .custom-notification.hide {
   animation: notifSlideOut 0.3s cubic-bezier(0.4, 2, 0.6, 1) forwards;
 }

 @keyframes notifSlideIn {
   from {
     opacity: 0;
     transform: translateX(100%);
   }

   to {
     opacity: 1;
     transform: translateX(0);
   }
 }

 @keyframes notifSlideOut {
   from {
     opacity: 1;
     transform: translateX(0);
   }

   to {
     opacity: 0;
     transform: translateX(100%);
   }
 }

 /* ----------- Form Style ----------- */
 .form-container {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   max-width: 500px;
   margin: 40px auto;
   background: transparent;
 }

 .form-container>h1 {
   font-size: 2rem;
   font-weight: bold;
   color: var(--color-sombre);
   margin-bottom: 2rem;
 }

 .form-field-container {
   display: flex;
   flex-direction: column;
   gap: 12px;
   min-height: 44px;
 }


 .form-label {
   font-weight: 600;
   color: var(--color-sombre);
   margin-bottom: 0.2rem;
   display: block;
 }

 .form-field {
   width: 100%;
   border: 1.5px solid var(--color-gray);
   border-radius: 10px;
   padding: 0.7rem 1rem;
   font-size: 1rem;
   background: #fff;
   box-sizing: border-box;
 }

 .form-field:focus {
   outline: none;
   border-color: var(--color-primary);
 }

 .form-link {
   color: var(--color-primary);
   font-weight: 600;
   text-decoration: none;
   margin-bottom: 1.2rem;
   display: inline-flex;
   align-items: center;
   gap: 0.3em;
   font-size: 1rem;
 }

 .form-link:hover {
   text-decoration: underline;
 }

 .form-plus {
   font-size: 1.3em;
   font-weight: bold;
 }

 .form-submit {
   background: var(--color-gradient-1);
   color: #fff;
   border: none;
   border-radius: 10px;
   padding: 0.7rem 2.5rem;
   font-size: 1.1rem;
   font-weight: 600;
   cursor: pointer;
   margin-top: 1.5rem;
   transition: background 0.2s;
   box-shadow: none;
   display: inline-block;
   text-align: center;
   width: 33%
 }

 .form-submit:disabled {
   background: var(--color-gray);
   color: #bdbdbd;
   cursor: not-allowed;
 }

 .user-create-form-group {
   display: flex;
   flex-direction: column;
   gap: 8px;
   width: 20%;
 }

 .user-create-form-group label {
   font-weight: 600;
   color: var(--color-sombre);
   font-size: 14px;
 }

 .user-create-form-group input {
   padding: 10px 12px;
   border: 1px solid var(--color-gray);
   border-radius: 10px;
   font-size: 14px;
   width: 100%;
   transition: all var(--transition-duration) var(--transition-curve);
   background-color: var(--color-white);
 }

 .user-create-form-group input:focus {
   outline: none;
   border-color: var(--color-primary);
   box-shadow: 0 0 0 2px var(--color-second);
 }

 .user-create-form-group input::placeholder {
   color: var(--color-gray);
 }

 .create-user-btn {
   background: var(--color-gradient-1);
   color: var(--color-white);
   padding: 12px 24px;
   border: none;
   border-radius: 10px;
   font-weight: 600;
   font-size: 14px;
   cursor: pointer;
   transition: all var(--transition-duration) var(--transition-curve);
   margin-top: 16px;
 }

 .create-user-btn:hover {
   transform: translateY(-1px);
   box-shadow: 0 4px 6px -1px var(--color-second);
 }

 .create-user-btn:active {
   transform: translateY(0);
   box-shadow: none;
 }

 .create-user-btn:focus {
   outline: none;
   box-shadow: 0 0 0 3px var(--color-second);
 }

 .create-user-btn:disabled {
   background: var(--color-gray);
   cursor: not-allowed;
   transform: none;
 }


 *

 /* Style de base pour les conteneurs d'erreur */
 .error-container {
   padding: 1rem 1.5rem;
   margin: 1rem 0;
   border-radius: 8px;
   font-size: 0.95rem;
   position: relative;
   animation: slideIn 0.3s ease-in-out;
   display: flex;
   align-items: center;
   gap: 1rem;
 }

 /* Animation d'entrée */
 @keyframes slideIn {
   from {
     transform: translateX(-10px);
     opacity: 0;
   }

   to {
     transform: translateX(0);
     opacity: 1;
   }
 }

 /* Styles spécifiques pour chaque type d'erreur */
 .validation-error {
   background-color: #FEE2E2;
   border: 1px solid #FCA5A5;
   color: #DC2626;
 }

 .auth-error {
   background-color: #FEF3C7;
   border: 1px solid #FCD34D;
   color: #B45309;
 }

 .general-error {
   background-color: #F3F4F6;
   border: 1px solid #D1D5DB;
   color: #374151;
 }

 /* Icônes pour chaque type d'erreur */
 .error-container::before {
   content: '';
   width: 20px;
   height: 20px;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
 }

 .validation-error::before {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23DC2626'%3E%3Cpath d='M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z'%3E%3C/path%3E%3C/svg%3E");
 }

 .auth-error::before {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23B45309'%3E%3Cpath d='M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z'%3E%3C/path%3E%3C/svg%3E");
 }

 .general-error::before {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z'%3E%3C/path%3E%3C/svg%3E");
 }

 /* Bouton de fermeture */
 .error-container .close-button {
   position: absolute;
   right: 1rem;
   top: 50%;
   transform: translateY(-50%);
   cursor: pointer;
   opacity: 0.6;
   transition: opacity 0.2s ease;
 }

 .error-container .close-button:hover {
   opacity: 1;
 }

 /* Styles responsifs */
 @media (max-width: 640px) {
   .error-container {
     margin: 0.75rem;
     padding: 0.75rem 1rem;
     font-size: 0.875rem;
   }
 }

 /* Animation de sortie */
 .error-container.hiding {
   animation: slideOut 0.3s ease-in-out forwards;
 }

 @keyframes slideOut {
   to {
     transform: translateX(10px);
     opacity: 0;
   }
 }

 .container {
   padding: 1rem;
   background-color: rgb(255, 255, 255);
   border-radius: 1rem;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
   height: 100%;
 }

 /* ------------ Proof Section ------------ */

 /* Deposit proof */

 #document div {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }

 input[type=file] {
   width: 100%;
   height: 200px;
   border: 6px dashed var(--color-bleu-fonce);
   background: var(--color-gradient-3);
   border-radius: var(--border-radius);
   padding: 1rem;
 }

 input[type=file]:hover {
   background: var(--color-gradient-2);
   cursor: pointer;
   transition: background-color var(--transition-duration) var(--transition-curve);
 }


 input[type=file]::file-selector-button {
   display: none;
 }

 input[type="file"].custom-file-box {
   position: relative;
   width: 100%;
   height: 200px;
   border: 6px dashed var(--color-bleu-fonce);
   background: var(--color-gradient-3);
   border-radius: var(--border-radius);
   padding: 1rem;
   cursor: pointer;
   color: transparent;
   font-size: 0;
   text-align: center;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }

 input[type="file"].custom-file-box::before {
   content: attr(data-placeholder);
   display: block;
   font-size: 1.2rem;
   color: var(--color-bleu-fonce);
   white-space: pre-line;
   margin-top: 2.5rem;
   pointer-events: none;
   text-align: center;
 }

 input[type="file"].custom-file-box::after {
   content: '';
   display: block;
   width: 40px;
   height: 40px;
   margin: 1rem auto 0 auto;
   background-image: url('/images/icons/icon-depot-doc.svg');
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   pointer-events: none;
 }

 /* Hover effect */
 input[type="file"].custom-file-box:hover {
   background: var(--color-gradient-2);
   transition: background-color var(--transition-duration) var(--transition-curve);
 }


 /*        Details proof         */

 .section-proof {
   display: flex;
   flex-direction: row;
   width: 100%;
   height: 90%;
 }

 .info-proof {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   margin: 1rem;
   padding: 1rem;
   width: 50%;
   background-color: var(--color-white);
   border-radius: var(--border-radius);
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
 }

 .proof-description {
   font-size: 1rem;
   color: var(--color-gray);
   width: 50%;
   display: flex;
   flex-direction: row;
   gap: 1rem;
   margin: 1rem;
   padding: 1rem;
 }

 .proof-description-content {
   font-size: 1rem;
   color: var(--color-gray);
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }

 .proof-description-content a {
   word-break: break-all;
   overflow-wrap: anywhere;
   display: inline-block;
   max-width: 100%;
 }

 .proof-description-content a {
   color: var(--color-primary, #0055ff);
   text-decoration: underline;
   word-break: break-all;
   overflow-wrap: anywhere;
   display: inline-block;
   max-width: 100%;
   transition: color 0.2s ease;
 }

 .proof-description-content a:hover,
 .proof-description-content a:focus {
   color: var(--color-primary-dark, #0033cc);
   text-decoration: none;
   outline: none;
 }

 .proof-description iframe {
   height: 60vh;
   width: 100%;
   border: none;
 }

 .text-w-button {
   display: flex;
   flex-direction: row;
   gap: 1rem;
   align-items: center;
 }


 .modal-content {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 2em;
 }

 .other-modal {
   display: stretch;
   height: 100em;
 }

 .label-form-modal {
   font-weight: bold;
   color: var(--color-bleu-fonce);
   margin-right: 1rem;
   padding-bottom: 0.5rem;
 }

 .scroll-checkbox {
   overflow-y: auto;
   max-height: 200px;
   border: 2px solid var(--color-primary);
   border-radius: 10px;
   overflow-y: scroll;
   scrollbar-color: red;
   margin-bottom: 1em;
   display: grid;
   grid-template-columns: auto 1fr;
 }

 .checkbox-item {
   display: flex;
   align-items: center;
   padding: 0.5rem;
 }

 #link_indicator_qualiopiIndicatorIds label {
   display: inline-block;
   margin-right: 1px;
 }

 #link_indicator_qualiopiIndicatorIds input[type="checkbox"] {
   display: inline-block;
   vertical-align: middle;
 }

 .scroll-checkbox::-webkit-scrollbar {
   width: 8px;
 }

 .scroll-checkbox::-webkit-scrollbar-track {
   background: var(--color-bleu-clair);
   border-radius: 10px;
 }

 .scroll-checkbox::-webkit-scrollbar-thumb {
   background-color: var(--color-primary);
   border-radius: 10px;
 }

 .scroll-checkbox label {
   display: flex;
   align-items: center;
   padding: 0.5rem;
   cursor: pointer;
 }

 .button-add-modal {
   background-color: var(--color-primary);
   color: var(--color-white);
   padding: 0.5rem;
   border-radius: var(--border-radius);
   font-weight: bold;
   font-size: 16px;
 }

 .list-indicators li {
   display: flex;
   align-items: center;
   padding: 0.5rem;
   border: 1px solid var(--color-gray);
   border-radius: var(--border-radius);
 }

 .button-open-modal {
   background-color: var(--color-primary);
   color: var(--color-white);
   padding: 0.75rem 1rem;
   border-radius: var(--border-radius);
   font-weight: bold;
   font-size: 1rem;
   cursor: pointer;
   transition: background-color var(--transition-duration) var(--transition-curve);
   width: 100%;
   max-width: 300px;
   box-sizing: border-box;
   text-align: center;
   line-height: 1.4;
   display: inline-block;
 }

 .infoContainer {
   display: flex;
   flex-direction: column;
   padding-top: var(--small-percent);
 }

 .infoHeader {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   padding: 0rem 1.5rem;
   gap: var(--small-percent);
   background-color: var(--color-background-element);
   border: var(--border);
   border-radius: 16px;
 }

 .infoTitle {
   display: flex;
   align-items: center;
   gap: 1rem;
 }

 .infoButtonEdit {
   display: flex;
 }

 .infoButtonEdit button {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   border: 2px solid var(--color-purple);
   border-radius: 20px;
   padding: 0.25rem 0.6rem;
   color: var(--color-purple);
   font-weight: bold;
   user-select: none;
   cursor: pointer;
 }

 .infoButtonEdit button:hover {
   transition-duration: 1s;
   background-color: var(--color-purple);
   color: var(--color-background-element);

 }

 .custom-form-style {
   display: flex;
   flex-direction: column;
   gap: 5em;
 }

 .custom-form-style label {
   font-weight: bold;
   margin-bottom: 0.25rem;
 }

 .custom-form-style input,
 .custom-form-style select,
 .custom-form-style textarea {
   width: 100%;
   padding: 0.6rem;
   border: 1px solid #ccc;
   border-radius: 8px;
   font-size: 1rem;
 }

 .custom-form-style button {
   background-color: var(--color-purple);
   color: white;
   padding: 0.6rem 1.2rem;
   border: none;
   border-radius: 20px;
   cursor: pointer;
   font-weight: bold;
   align-self: center;
   transition: background-color 0.3s;
 }

 .custom-form-style button:hover {
   background-color: #512dd1;
 }

 .custom-form-style .form-group,
 .custom-form-style div:not(.form-actions) {
   display: flex;
   flex-direction: column;
   gap: 0.1rem;
   margin-bottom: 1rem;
 }

 header {
   margin-top: 1.5rem;
   ;
 }

 .breadcrumb {
   display: flex;
   align-items: center;
   flex-wrap: nowrap;
   gap: 0.5rem;
 }

 .breadcrumb a,
 .breadcrumb span.current {
   display: inline-flex;
   align-items: center;
   gap: 0.25rem;
 }


 .breadcrumb a.dimmed {
   color: #aaa;
   /* grisé */
 }

 .breadcrumb a.dimmed:hover {
   color: #555;
   /* un peu plus visible au survol */
 }

 .icon-wrapper {
   width: 24px;
   height: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .icon-wrapper svg {
   width: 24px;
   height: 24px;
 }

 .separator {
   margin: 0 0.25rem;
   color: #aaa;
 }

 .form-widget-with-extra {
   display: grid;
   align-items: center;
   gap: 0.5rem;
 }

 .form-extra {
   font-size: 0.9rem;
 }

 .form-extra a {
   text-decoration: none;
   color: var(--color-purple-light);
 }

 .form-extra .form-plus {
   font-weight: bold;
   font-size: 1.2rem;
   margin-left: 0.2rem;
 }






 /* Style page erreur */
 .error-container {
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .error-card {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 2rem;
   background: var(--color-white);
   padding: 3rem;
   border-radius: 1.5rem;
   box-shadow: 0 10px 30px var(--color-gray);
   max-width: 900px;
   width: 100%;
 }

 .error-content {
   display: flex;
   flex-direction: column;
   align-items: left;
 }



 .error-content .status-code {
   font-size: 1.2rem;
   color: var(--color-gray);
   margin-bottom: 1.5rem;
 }

 .error-content p {
   margin-bottom: 1rem;
   line-height: 1.5;
 }

 .error-content a {
   display: inline-block;
   margin-top: 1.5rem;
   padding: 0.75rem 1.5rem;
   background-color: var(--color-purple);
   color: var(--color-white);
   text-decoration: none;
   border-radius: 0.5rem;
   transition: background 0.2s;
   font-weight: bold;
   font-size: medium;
   width: fit-content;
 }

 .error-content a:hover {
   background-color: var(--color-purple-super-light);
   color: var(--color-purple);
 }

 .error-illustration {
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .error-illustration img {
   max-width: 70%;
   height: auto;
 }