:root {
    --primary: #f6c63e;
    --secondary: #2B3445;
    --dark: #121826;
    --white: #ffffff;
}

html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      font-family: 'Segoe UI', sans-serif;
      /*background: #fff;*/
      color: white;
	   background: #302e2d;
      overflow-x: hidden; /* seulement horizontal */
    }

    canvas#matrix {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
	  /*background: #302e2d;*/
	  pointer-events: none; /* important pour ne pas bloquer les clics */
    }

    .content {
      position: relative;
      z-index: 1;
      text-align: center;
      padding: 40px 20px;
	  /*background: #302e2d;*/
    }

    .logo {
      width: 100px;
      height: auto;
      margin-bottom: 10px;
	  /*background-color:black;*/
    }

    h1 {
      font-size: 2em;
      margin-bottom: 10px;
    }

    p.accroche {
      font-size: 1.2em;
      margin-bottom: 40px;
    }

    .chatbox {
      max-width: 600px;
      margin: 0 auto;
      background: rgba(0, 0, 0, 0.7);
      border: 1px solid #f6c63e;
      border-radius: 10px;
      padding: 20px;
    }

    .chatbox textarea {
      width: 95%;
      height: 100px;
      border-radius: 5px;
      border: none;
      padding: 10px;
      resize: none;
    }

    .chatbox button {
      margin-top: 10px;
      padding: 10px 20px;
      background: #f6c63e;
      border: none;
      color: white;
      font-weight: bold;
      border-radius: 5px;
      cursor: pointer;
    }
	.chatbox button:hover {
      
      background: #00ff88;
      color: black;

    }
    
	 .bot-message {
  		background-color: #3a3a3a;
  		color: #f6c63e;
  		padding: 12px 16px;
  		margin: 10px auto;
  		max-width: 80%;
  		border-radius: 10px;
  		box-shadow: 0 0 5px rgba(0,0,0,0.3);
  		font-size: 1rem;
  		white-space: pre-line; /* pour les sauts de ligne \n */
  		animation: fadeIn 0.5s ease-in-out;
  		border-left: 4px solid #f6c63e;
  		font-size: 120%;
		}
		
		.bot-message a{
			text-decoration: none;
		}
		.bot-message a:hover {
  		text-decoration: none !important;
  		color: #fff !important;
		}
		
		.message {
  		padding: 10px;
  		margin: 10px 0;
  		border-radius: 8px;
  		animation: fadein 0.5s ease-in;
		}

		.message.user {
  		/*background: #444;*/
  		color: #fff;
  		text-align: right;
		}

		.message.bot {
  		background: #1f1f1f;
  		border: 1px solid #f6c63e;
  		color: #f6c63e;
		}

		.message.bot a {
  		text-decoration: underline;
  		color: #f6c63e;
		}
		
		.message.bot a:hover {
  		text-decoration: underline;
  		color: #fff;
		}

		@keyframes fadein {
  		from { opacity: 0; transform: translateY(5px); }
  		to { opacity: 1; transform: translateY(0); }
		}

	
		@keyframes fadeIn {
  		from { opacity: 0; transform: translateY(10px); }
  		to { opacity: 1; transform: translateY(0); }
		}
	

	/* FEATER ----------------------------- */

	.features {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		gap: 3rem;
		max-width: 1200px;
		margin: 0 auto;
		padding-top: 130px;
	}
	.feature {
		text-align: center;
		/*background-color: var(--white);
		background-color: var(--secondary);*/
		padding: 1rem;
		border-radius: 15px;     /* Coins arrondis */
		border:5px solid transparent;
	}
	.feature:hover {
		border-color:#f6c63e;
		background-color: #302e2d;
	}
	.feature a {
		color:#2B3445;
	}
	.feature a:hover {
		color:#f6c63e;
		text-decoration:none;
		
	}
	.feature-icon {
		width: 64px;
		height: 64px;
		margin: 0 auto 1.5rem;
		color: var(--primary);
	}
	.feature-icon .icon {
		width: 60px;                     /* Largeur de l'icône */
		height: 60px;                    /* Hauteur de l'icône */
		//*stroke: #007BFF;                 /* Couleur du trait de l'icône */
		transition: stroke 0.3s, transform 0.3s; /* Transition pour les animations */
	}

	.feature-icon:hover .icon {
		stroke: #fff;                 /* Changer la couleur au survol */
		transform: scale(1.1);           /* Légère mise en avant au survol */
		
	}

	/* ----------------------------------------------- 
	MODAL */
	.modal-overlay {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.7);
      display: none;
      z-index: 1000;
    }

    .modal-content {
      position: fixed;
      top: 10%;
      left: 50%;
      transform: translateX(-50%);
      max-width: 90%;
      max-height: 80%;
      overflow-y: auto;
      background: #302e2d;
      color: white;
      border: 1px solid #f6c63e;
      padding: 20px;
      z-index: 1001;
      display: none;
      border-radius: 10px;
    }
    .modal-content a {
    	color: #fff;
    	text-decoration: none;
    }

    .modal-section {
      display: none;
    }
    
    .modal-close {
  		position: absolute;
  		top: 10px;
  		right: 15px;
  		background: transparent;
  		border: none;
  		font-size: 1.5rem;
  		color: #f6c63e;
  		cursor: pointer;
		}
		.modal-close:hover {
  		color: #ffffff;
		}
	/* ----------------------------------------------- 
	COOKIES */
		.cookie-banner {
  		position: fixed;
  		bottom: -100%;
  		left: 0;
  		width: 100%;
  		background: #302e2d;
  		color: white;
  		padding: 15px;
  		text-align: center;
  		font-size: 0.9rem;
  		border-top: 2px solid #f6c63e;
  		z-index: 10000;
  		transition: bottom 0.5s ease-in-out;
		}

		.cookie-banner.show {
  		bottom: 0;
		}

		.cookie-banner button {
  		margin: 0 10px;
  		padding: 6px 12px;
  		border: none;
  		background: #f6c63e;
  		color: black;
  		font-weight: bold;
  		cursor: pointer;
  		border-radius: 4px;
		}

	
	/* ----------------------------------------------- 
	FOOTER */
	.site-footer {
		background-color: #302e2d;
		color: var(--white);
		text-align: center;
		padding: 10px 0;
		margin-bottom: 200px;
		margin-top: 200px;
		font-size: 75%;
	}

	.site-footer a {
		color: var(--white);
		margin: 0 10px;
		text-decoration:none;
	}
	.site-footer a:hover {
		color:#f6c63e;
	}