/* =========================
   RESET / BASE
========================= */


body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    color: var(--texte);
    background: var(--gris-fond);
    line-height: 1.6;
    font-size:1.2rem;
}



/* =========================
   VARIABLES
========================= */


/* --- Styles de base conformes W3C --- */
:root {
    --vert-principal: #3d9970;
    --gris-fond: #fafafa;
    --texte: #333;
    --couleur1:#993D66;
    --couleur2:#3D6699;
    --couleur3:#94993D;
    --couleur4:#99703D;
    --couleur5:rgba(111,43,85,79); /* vert très clair */
    --couleur6:#5b384c;
}


/* =========================
   STYLES GLOBAUX
========================= */


a {
    color: inherit;
    text-decoration: none;
    padding:3px 5px;
}

hr {
	color:var(--couleur1);
	width:85%;
	text-align:center;
}

li > a:hover {
    background-color:var(--couleur1);
    background-clip:padding-box;
    border-radius:4px;
    color:white;
}



/* =========================
   LAYOUT
========================= */

 header {
  position: relative; /* ✅ indispensable pour que ::after se base sur le header */
  background: var(--vert-principal);
  color: white;
  overflow: hidden; /* optionnel, selon ce que tu veux faire */
  min-height: 200px;
  padding-bottom:38px;
  z-index:0; 
}

header::after {
  content: "";
  position:absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: var(--gris-fond);
  /* 1300 px seulement clip-path: path("M0,64 C150,128 350,0 600,64 C850,128 1050,0 1300,64 L1300,120 L0,120 Z"); */
  clip-path: path("M0,64 C230,128 540,0 920,64 C1300,128 1600,0 2000,64 L2000,120 L0,120 Z");
  z-index:0;
}

main {
    padding: 1rem;
    background-image:url('../assets/spacer.svg');
    background-repeat:no-repeat;
    background-position:top 270px right 22px;
    background-attachment:fixed;
    z-index:39;
}

@media (min-width: 768px) {
  main {
    padding: 2rem;
  }
}

footer {
    background: var(--vert-principal);
    color: white;
    text-align: center;
    padding-top:12px;
    padding-bottom:12px;
}

footer p {
    font-size: 1rem;
    background-color:#993D66;
    color:white;
    background-clip:padding-box;
    padding:3px 8px;
    border-radius:4px;
    display:inline-block;
    margin:0 auto;
}

footer a {
	color:var(--texte);
	font-size:1rem;
}

footer ul {
	list-style-type:none;
	text-align:left;
}

footer ul > a:hover {
	background-color:transparent;
	text-transform:none;
}




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

.menu {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  padding: 0;
  margin: 0;
}

.menu-toggle {
  display: none;
  font-size: 2rem;
  background: none;
  border: none;
  cursor: pointer;
}

@media (max-width: 768px) {

  .menu-toggle {
    display: block;
  }

  .menu {
    display: none;
    flex-direction: column;
    margin-top: 1rem;
  }

  .menu li {
    padding: 0.5rem 0;
  }

  /* Menu visible */
  .menu.active {
    display: flex;
  }
}
.message {
    background-color: var(--couleur1);
    border-radius:5px;
    color:white;
    padding:14px 28px;
}

.buttonDroit {
	position:relative;
	top:30px;
	right:10px;
}

.btn-principal {
    display: inline-block;
    background: var(--vert-principal);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 5px;
}

.gradient-btn {
    padding: 12px 24px;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;

    background: linear-gradient(90deg, #008000, #fafafa, #008000);
    background-size: 300% 100%; /* important : permet le mouvement */
    
    animation: moveGradient 2s ease-in-out infinite alternate;
}

div.spacer {
	height:54px;  
	background: 
	  linear-gradient(to right, rgba(153, 61, 102, 0.7), rgba(153, 61, 102, 0.3)),
	  url('../assets/image-fond.jpg') center center / cover no-repeat;
	 border-radius:8px;
	 margin-bottom:12px;
  }
  
 
@media (min-width: 768px) {
	div.spacer {
		height:120px;
		margin-bottom:20px;
	}
}

/* lien actif  */
#page-contact #lien-contact,
#page-board #lien-board,
#page-about #lien-about,
#page-params #lien-params,
#page-admin #lien-admin  {
   background-color: var(--couleur1);
   border-radius:4px;
   color:white;
}

.avatar {
	width:74px;
	height:74px;
	margin-bottom:6px;
}

.form_input_classic {
	height:30px;
	font-size:1em;
	padding:4px 8px 8px 8px;
	color:var(--couleur4);
	border-radius:18px;
	border:1px solid forestgreen;
}

.form_textarea_classic {
	height:190px;
	width:420px;
	border-radius:18px;
	border:1px solid forestgreen;
	color:var(--couleur4);
	font-family: 'Inter', sans-serif;
	font-size:1.2em;
	padding:8px;
}

.form_checkbox_classic {
	transform:scale(2.4);
	margin-right:20px;
}

.form_submit_classic {
	font-size:1.3em;
	background-color:forestgreen;
	padding:6px 12px;
	margin:25px;
	border-radius:8px;
	border:1px solid var(--couleur1);
	color:white;
	cursor:pointer;
    box-shadow: 0 12px 25px rgba(0, 150, 80, 0.4);
    transition: 0.25s ease;
    }
    
  
.target-input {
  font-size:1.7rem;
  padding: 12px 16px;
  width:280px;
  border:2px solid #ccc;
  border-radius:10px;
  outline:none;
  text-align:left;
  }

ul.menu {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 1rem;
    margin-left:20px;
}

ul.profil {
	list-style:none;
	padding:6px;
	margin:0;
	display:block;
	margin-left:0;
	text-align:center;
	line-height:180%;
}

#partofme {
  float:right;
  width:10rem;
  background-color:var(--couleur1);
  filter:opacity(85%);
  margin-top:12px;
  margin-right:15px;
  padding-bottom:35px;
  border-radius:3px 14px 14px 14px;
  text-align:center;
  z-index:36;
  }
  
@media (min-width:768px) {
 ul.profil {
 padding:22px; 
 }

 #partofme {
 width: 200px;
 margin-top:20px;
 border-radius:3px 311px 311px 311px;
 }
}
 
#joinus {
	margin-left:95px;
	padding:8px 20px;
	border-radius:12px;
	border:3px dashed var(--couleur1);
}
  
.falseinput {
	border:0;
	background-color:var(--couleur1);
	border-radius:8px;
	color:white;
	font-size:1.2em;
}

.falselink {
	cursor:pointer;
}

.falselink img {
	width:32px;
	cursor:pointer;
}

.option {
  width: 50%;
  text-align: center;
  z-index: 2;
  padding: 8px 0;
  border-radius: 20px;
  cursor: pointer;
  font-weight: 600;
  color: #666;
  transition: color 0.2s ease;
}

.chiffre_angle {
	float:right;
    position: relative;
    display: inline-block; /* la box prend la taille du contenu */
    padding: 20px;
}

.ribbon, .ribbon_termine {
    position: absolute;
    top: 10px;
    right: -40px;
    color: white;
    padding: 5px 40px;
    transform: rotate(38deg);
    font-weight: bold;
    border-radius:28px 8px 28px 8px;
}

.ribbon {
	background-color: var(--couleur5);
}
.ribbon_termine {
	background-color: rgb(189, 183, 107);
}

.agreen { /*pour les petits éléments verts*/
	color:var(--couleur4);
	font-size:0.9em;
	font-style:italic;
	margin-left:12px;
}

.imagetoclic {
	cursor:pointer;
	  width: 200px;           /* largeur de l'image */
	  height: 200px;          /* hauteur de l'image */
	  border-radius: 25%;     /* 50% rend l'image circulaire */
	  object-fit: cover;      /* ajuste l'image pour remplir le cercle */
	  border: 4px solid #333;
}
.partited {
	display:inline-block;
	vertical-align:top;
	margin-right:25px;
}
  .money-input {
    font-size: 1.7rem;
    padding: 12px 16px;
    width: 280px;
    border: 2px solid #ccc;
    border-radius: 10px;
    outline: none;
    text-align: right;
    transition: 0.2s;
  }
  .money-input:focus {
    border-color: #4A90E2;
  }
  
 .objectifs {
	 width:280px;
	 margin:10px 15px;
	 display:inline-block;
 }
 
.objectifs {
	border:2px solid #191970;
	border-radius:4px;
	padding:0 15px 10px 15px;
	display:inline-block;
	vertical-align:top;
}

.add_objectif {
	background-color:#191970;
	width:450px;
	height:380px;
	color:white;
	margin:0 auto;
	border-radius:4px;
	padding:8px 15px 10px 15px;
	margin-bottom:40px;
	margin-top:30px;
}
.titre_objectifs {
	padding:3px 6px 0px 6px;
	margin-top:14px;
	color:var(--couleur1);
}
.pourcentage_objectifs {
	width:150px;
	height:25px;
	border-radius:8px;
	border:1px solid var(--couleur5);
	position:relative;
}

.progress-bar {
  background: rgba(243,156,18);
  color: white;
  text-align: center;
  line-height: 25px;
  border-radius:8px 0 0 8px;
  position:absolute;
  top:0;
  left:0;
    background-image: url('../assets/stries-background.png');
 }

.imgPourcentage_objectifs {
	position: absolute;
    top: 0;                  /* même origine */
    left: 0;                 /* même origine */
 width: 100%;
    height: 100%;
    background-image: url('../assets/stries-background.png');
    background-size: cover;
}

.parametres_objectifs {
margin-top:25px;
}
p.manque {
margin-bottom:0px;
}

.prive {
border: 10px double firebrick;
}

.icone_modif {
   display:inline-block;
   width:48px;
}
.icone_lien {
height:48px;
 background:url('../assets/icone-lien.png');
 background-repeat:no-repeat;
 background-size:contain;
  background-position: -22px -20px;
  padding-left:24px;
  text-decoration:underline;
  text-decoration-style:dashed;
 }

.halo {
  position: relative;
  display: inline-block;
  cursor:pointer;
}

.halo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle,#7A3A59, rgba(122,58,89,0.1) 30%);
  /* background: radial-gradient(circle, rgba(255,0,150,0.5), rgba(255,0,150,0.1) 70%);*/
  filter: blur(20px);
}

.modify_objectif {
	width:100%;
	display:none;
}

#showFastTracks {
	max-width:550px;
	border:3px dashed var(--couleur1);
	padding:10px;
}

#objectifs_annules {
	border-collapse:collapse;
}
#objectifs_annules td, #objectifs_annules th {
	border:1px solid var(--couleur5);
	padding:2px 8px;
}

#frise {
	margin-bottom:35px;
	width:100%;
}

#graph {
  width: 100%;
  max-width: 600px;
}

#wrap_canvas  {
  height:280px;
}

#wrap_stats {
	 display:inline-block;
	 margin-left:33px;
	 margin-bottom:18px;
	 border-radius:3px;
	 border:3px solid var(--couleur4);
	 background-color:#ebebeb;
 padding:5px 9px;
}

#allTransactions {
	border-collapse:collapse;
}
#allTransactions td, #allTransactions th {
	border:1px solid var(--couleur5);
	padding:5px 9px 3px 7px;
}

#showFastTracks h3 {
margin:0;
}
#showFastTracks  button {
font-size:1em;
}

#detail_contact {
	height:300px;
	border:3px dashed var(--couleur5);
	border-radius:5px;
	padding:5px 8px;
	min-width:280px;
	position:relative;
}

#detail_contact h2 {
	margin-top:0;
}

.affiche_demande_ami {
	padding:4px 12px 8px 22px;
	background-color:#7A3A59;
	width:85%;
	border-radius:12px;
	color:var(--gris-fond);
	cursor:pointer;
}

.new_something {
	 font-weight:bolder;
	 color:black;
	   background-color:var(--gris-fond);
	   border-radius:4px;
	  padding-bottom: 4px; 
	  position:relative;
}
.new_something::after {
	content: " *";
}

.wave-separator { 
	position: relative; 
	width: 100%; 
	background-color: #fafafa; /* couleur du haut */ 
	line-height: 0; 
}
 
.wave-separator svg { 
	display: block; 
	width: 100%; 
	height: 240px; 
} 

.wave-separator path { 
	fill: #3d9970; /* couleur du bas */ 
}





/* =========================
   PAGES
========================= */

#table_for_contact, #table_for_login {
	font-size:1.4rem;
	padding:4px 8px;
	vertical-align:top;
}

#table_for_contact td, #table_for_login td {
line-height:1em;
padding:4px;
vertical-align:top;
}

#table_params, #table_notifs {
	border-collapse : collapse;
}

#table_params td, #table_notifs td {
	padding:8px 12px;
	border:1px solid black;
}

.ligne_tableau:hover {
	background-color:#ddd;
}


@media (max-width: 768px) {

  #table_for_contact,
  #table_for_contact tr,
  #table_for_contact td,
  #table_for_login, 
  #table_for_login tr,
  #table_for_login td {
    display: block;
    width: 100%;
  }
  
  #table_for_contact, #table_for_login {
	padding-left:0;
}

  #table_for_contact tr, #table_for_login tr {
    margin-bottom: 1.2rem;
    border: 1px solid #ddd;
    padding: 0.8rem;
    border-radius: 6px;
    background: #fafafa;
  }

  /* Labels au-dessus */
  #table_for_contact label, #table_for_login label {
    display: block !important;
    margin-bottom: 0.4rem;
    font-weight: 600;
  }

  /* Suppression de la première colonne "vide" */
  #table_for_contact td:first-child, #table_for_login td:first-child {
    padding-bottom: 0.2rem;
  }

  /* Bouton */
  .form_submit_classic {
    width: 70%;
    padding: 0.8rem;
  }

  /* Champ caché anti-spam */
  #contact_1, #no_contact_1 {
    display: none;
  }
}



/* =========================
   UTILITIES
========================= */

.colored {
color:var(--couleur5);
}

.affadi {
color:#6B7280;
}

.emphasis {
font-style:italic;
}

.emphasis2 {
text-decoration:underline;
}

.bolder {
font-weight:bolder;
}

.dontshow {
 display:none;
}

.cduinline {
display:inline-block;
vertical-align:middle;
}

.smaller {
font-size:0.8em;
}

  











/* =========================
   MOUVEMENTS / FONCTIONS SPECIALES
========================= */

.toggle-container {
  position: relative;
  width: 140px;
  background: #e5e5e5;
  border-radius: 25px;
  padding: 4px;
  display: flex;
  justify-content: space-between;
  font-family: sans-serif;
}

/* On masque les inputs */
.toggle-container input {
  display: none;
}

/* Curseur qui bouge */
.slider {
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 50%;
  background: #4c9fff;
  border-radius: 20px;
  transition: transform 0.25s ease;
  z-index: 1;
}

/* ON actif */
.toggle-1 #on:checked ~ .slider {
  transform: translateX(0);
}
.toggle-1 #on:checked + label {
  color: white;
}
/* OFF actif */
.toggle-1 #off:checked ~ .slider {
  transform: translateX(100%);
}
.toggle-1 #off:checked + label {
  color: white;
}


/* ON2 actif */
.toggle-2 #on_2:checked ~ .slider {
  transform: translateX(0);
}
.toggle-2 #on_2:checked + label {
  color: white;
}
/* OFF2 actif */
.toggle-2 #off_2:checked ~ .slider {
  transform: translateX(100%);
}
.toggle-2 #off_2:checked + label {
  color: white;
}


/* ON3 actif */
.toggle-3 #on_3:checked ~ .slider {
  transform: translateX(0);
}
.toggle-3 #on_3:checked + label {
  color: white;
}
/* OFF3 actif */
.toggle-3 #off_3:checked ~ .slider {
  transform: translateX(100%);
}
.toggle-3 #off_3:checked + label {
  color: white;
}


/* ON4 actif */
.toggle-4 #on_4:checked ~ .slider {
  transform: translateX(0);
}
.toggle-4 #on_4:checked + label {
  color: white;
}
/* OFF4 actif */
.toggle-4 #off_4:checked ~ .slider {
  transform: translateX(100%);
}
.toggle-4 #off_4:checked + label {
  color: white;
}

.toggle input:checked + .label {
  opacity: 1;
  border-color: #007bff;
  background: #007bff;
  color: white;
}


/* Animation */
@keyframes moveGradient {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}