:root {
  --hhs: 6px;
  --hs:  12px;
  --rs:  24px;
  --ds:  48px;
  --dds: 96px;
  --3ds: 144px;
  --4ds: 192px;
}

/*
============================================================================================================
  GLOBAL CONTENT
============================================================================================================
*/

body { background: #f9f9f9; }

h2 { font-size: 2.2rem; }

button {
	background-color: #c0022c;
  color: white!important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border: 0 solid red;
  border-radius: 0 !important;
}

.flex { display: flex; width: 100%; }
.flex.jcsb { justify-content: space-between; }

.flex .col { display: flex; flex-direction: column; }

/*
============================================================================================================
  BUTTONS
============================================================================================================
*/

.forward-button { display: flex; align-items: center; font-weight: 600; transition: all .5s ease-in-out; }
.forward-button .icon { font-size: .9rem; margin-left: var(--hs); }
.forward-button:hover { opacity: .6; }

.back-button { display: flex; align-items: center; font-weight: 600; transition: all .5s ease-in-out; }
.back-button .icon { font-size: .9rem; margin-right: var(--hs); }
.back-button:hover { opacity: .6; }

/*
============================================================================================================
  ANIMATIONS
============================================================================================================
*/

/* *   
   *
   * -- > TOGGLE CONTENT
   *
   * */

.toggle-content-container .the_content {
	display: none; /* fermé par défaut */
}

.toggle-content-container .toggle-content-btn {
	position: relative;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	transition: all .5s ease-in-out;
	margin: 0;
}

.toggle-content-container .toggle-content-btn:hover { opacity: .6; }


.toggle-content-container .toggle-content-btn .icon {
	font-size: 1.5rem;
	margin-left: var(--hs);
	transition: all .3s ease-in-out;
}

.toggle-content-container.open .toggle-content-btn .icon {
	transform: rotate(180deg);
}


/*
============================================================================================================
  COMPONENTS
============================================================================================================
*/

/* *   
   *
   * -- > COHORTE POPUP FORM
   *
   * */

.dgtl-popup-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.5);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}

.dgtl-popup-content {
	background: #fff;
	padding: 30px 40px;
	border-radius: 12px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
	max-width: 520px;
	width: 90%;
	position: relative;
	font-family: system-ui, sans-serif;
}

.dgtl-popup-content h2 {
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 24px;
}

.dgtl-popup-content label {
	display: block;
	font-weight: bold;
	margin: 15px 0 5px;
}

.dgtl-popup-content input[type="text"],
.dgtl-popup-content input[type="date"] {
	width: 100%;
	padding: 10px;
	border-radius: 6px;
	border: 1px solid #ccc;
	font-size: 15px;
}

.dgtl-date-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 10px;
}

.dgtl-form-actions {
	margin-top: 25px;
	display: flex;
	gap: 20px;
}


/*
============================================================================================================
  DASHBOARD
============================================================================================================
*/


/* *   
   *
   * -- > WRAPPER
   *
   * */

.dgtl-dashboard-wrapper {
	max-width: 1200px;
	margin: 50px auto;
	background: #fff;
	padding: 40px;
	border: 1px solid #ddd;
	border-radius: 8px;
	font-family: system-ui, sans-serif;
}

/* *   
   *
   * -- > TABLE
   *
   * */

.dgtl-table-wrapper {
	overflow-x: auto;
	border: 1px solid #ccc;
	border-radius: 6px;
	margin-bottom: 20px;
}

.dgtl-cohorte-table {
	width: 100%;
	border-collapse: collapse;
}

.dgtl-cohorte-table .date { width: 160px; }

.dgtl-cohorte-table th,
.dgtl-cohorte-table td {
	padding: 15px;
	border-bottom: 1px solid #ddd;
	text-align: left;
	font-size: 15px;
}

.dgtl-cohorte-table th {
	font-weight: bold;
	color: #444;
}

/*
============================================================================================================
  SINGLE COHORTE
============================================================================================================
*/


/* *   
   *
   * -- > HEAD
   *
   * */

#single-cohorte .cohorte-head { display: flex; align-items: flex-start; margin: var(--hs) 0 var(--rs); }
#single-cohorte .cohorte-head .left .title { margin: 0; }
#single-cohorte .cohorte-head .right { display: flex; flex-direction: column; align-items: flex-end; }
#single-cohorte .cohorte-head .right .info-cohorte { gap: var(--rs); margin-bottom: var(--rs); }

/* *   
   *
   * -- > BODY
   *
   * */

#single-cohorte .cohorte-body {}
#single-cohorte .cohorte-body > div { padding: var(--rs) 0; border-top: solid 1px rgba(0,0,0,.25); }
#single-cohorte .cohorte-body > div:last-child { border-bottom: solid 1px rgba(0,0,0,.25); }

/* *   
   *
   * -- > TABLES
   *
   * */

#single-cohorte table { border: none; }

#single-cohorte table thead {}
#single-cohorte table thead th { border: none; height: 40px; vertical-align: middle; }

#single-cohorte table tbody {}
#single-cohorte table tbody tr { border-style: solid; border-width: 1px 0 1px 0; border-color: rgba(0,0,0,0.3); height: 40px; }
#single-cohorte table tbody tr td { border: none; height: 40px; vertical-align: middle; }

#single-cohorte table tbody tr td label { margin: 0 var(--rs) 0 0; font-weight: 500; }
#single-cohorte table tbody tr td input[type=checkbox] { margin: 0 var(--hhs) 0 0; }

/*
============================================================================================================
  SIGNUP PAGE
============================================================================================================
*/

#single-signup { padding: var(--dds) 0; }


/* *   
   *
   * -- > FORM
   *
   * */

.dgtl-form {}

.dgtl-form section h2 {
	position: sticky;
	top: 94px; /* colle au haut de la fenêtre */
	background: #fff; /* fond blanc pour masquer le contenu derrière */
	padding: var(--rs) 0;
	margin: var(--rs) 0;
	z-index: 10; /* pour rester au-dessus des inputs */
	border-bottom: 1px solid #ddd; /* petite séparation visuelle */
}

.dgtl-form section h3 { font-size: 1.5rem; margin-bottom: var(--rs); }
.dgtl-form section legend { margin: var(--rs) 0 var(--hs); line-height: 1.2em; }

/* *   
   *
   * -- > FORM NAV
   *
   * */