:root{
  --primary:#f97316; --primary-dark:#ea580c;
  --ink:#0f172a; --muted:#6b7280; --bg:#f8fafc; --card:#ffffff; --primaire: #ffa500;
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
html{scroll-behavior:smooth;}
body{font-family:Inter,Segoe UI,Roboto,Arial,Helvetica,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6; overflow: hidden;overflow-y: auto;}
.container{max-width:1120px;margin:0 auto;padding:24px}
header{background:#fff;border-bottom:1px solid #ffedd5;position:sticky;top:0;z-index:50}
nav{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:nowrap}
.orange{color:var(--primary)}
.link:hover{
	cursor:pointer;
}
.logo{font-weight:600;color:var(--ink);letter-spacing:.2px}
.logo img {width:48px}
.logo span {position: absolute;margin-left: 15px;font-size: 28px;}
.menu{display:flex;gap:14px;list-style:none;margin:0;padding:0}
.logo:hover{cursor:pointer;}
.menu a{color:var(--ink);text-decoration:none;font-weight:600;transition: all 0.2s ease;}
.menu a:hover{color:var(--primary);}
.burger{display:none;background:#fff;border:1px solid #ffedd5;border-radius:10px;padding:8px 12px;font-weight:800;color:var(--primary);cursor:pointer}
.hero{background:linear-gradient(90deg,#fff,#fff7ed);border-radius:12px;padding:36px;margin-top:20px;box-shadow:0 8px 24px rgba(15,23,42,.06)}
.hero img{border-radius:10px}
h1{font-size:34px;line-height:1.2;margin:0 0 10px}
h2{font-size:26px;margin-top:28px}
h3{font-size:18px;margin-top:0}
p.lead{color:var(--muted);margin:6px 0 0}
.grid{display:grid;gap:16px}
.cols-2{grid-template-columns:1fr}
.cols-3{grid-template-columns:1fr}
@media(min-width:900px){ .cols-2{grid-template-columns:1.2fr .8fr} .cols-3{grid-template-columns:repeat(3,1fr)}}
.card{background:#fff;min-width:120px;border:1px solid #ffe4d5;border-radius:10px;padding:16px;box-shadow:0 8px 24px rgba(15,23,42,.04)}
.cta{display:inline-block;background:var(--primary);color:#fff;text-decoration:none;padding:10px 16px;border-radius:8px;font-weight:800}
.cta.secondary{background:transparent;border:2px solid var(--primary);color:var(--primary)}
ul{padding-left:18px}
.small{color:var(--muted);font-size:14px}
.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.kpi .card{text-align:center;padding: 0;padding-top: 16px;padding-bottom: 16px;}
.kpi2 img{width:48px}
/* .kpi2 .card{text-align:center} */
@media (min-width: 900px) {
.kpi2{display: inline-block;overflow: hidden;width: 1076px;height: 140px;margin-left:0px;transition: all 0.3s ease;}
.kpi2 .card {
	text-align: center;
    width: 120px;
    height: 140px;
    display: inline-block;
	vertical-align: top;
	padding: 0;
    padding-top: 15px;
}
}
footer{border-top:1px solid #ffedd5;background:#fff}
footer .container{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
table{width:100%;border-collapse:collapse} th,td{padding:10px;border-bottom:1px solid #ffe4d5;text-align:left;font-size:14px}
blockquote{border-left:4px solid var(--primary);padding-left:12px;background:#fff7ed;border-radius:4px}
section{scroll-margin-top:80px}
form label{display:block;font-weight:700;margin-top:12px}
input,textarea,select{width:100%;padding:10px;border:1px solid #ffedd5;border-radius:8px;margin-top:6px}
button{padding:10px 16px;border-radius:8px;background:var(--primary);color:#fff;border:none;font-weight:800;cursor:pointer}
.hero-split{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:900px){.hero-split{grid-template-columns:1fr 1fr}}
img.resp{max-width:100%;height:auto;display:block;border: 1px solid #ffe4d5;}
.badge{display:inline-block;background:#ffedd5;color:var(--primary);border-radius:999px;padding:6px 10px;font-weight:800;font-size:13px}
.center{text-align:center}
.notice{margin-top:8px;padding:10px;border-radius:8px}
.notice.ok{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0}
.notice.err{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
.anchor-nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.anchor-nav a{color:var(--primary);text-decoration:none;background:#fff; border:1px solid #ffedd5; padding:6px 10px; border-radius:999px; font-weight:700}
#accueil img {
	/* margin-top:40px; */
}
/* Responsive & burger */
@media (max-width: 900px) {
  .burger{display:block}
  .menu{display:none;position:absolute;top:64px;right:16px;background:#fff;border:1px solid #ffedd5;border-radius:12px;padding:12px;flex-direction:column;gap:8px;min-width:220px;box-shadow:0 12px 24px rgba(15,23,42,.1)}
  .menu.open{display:flex}
  .kpi2{display:grid;grid-template-columns:repeat(1fr);gap:10px}
  .kpi2 .card{text-align:center}
}
@media (max-width: 768px) {
  h1 { font-size: 24px; }
  h2 { font-size: 20px; }
  .hero { padding: 20px; }
  .grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr !important; }
  .kpi { grid-template-columns: repeat(2, 1fr); }
  .kpi2{display:grid;grid-template-columns:repeat(1fr);gap:10px}
  .kpi2 .card{text-align:center}
}
@media (max-width: 480px) {
  h1 { font-size: 20px; }
  h2 { font-size: 18px; }
  .kpi { grid-template-columns: 1fr; }
  .kpi2 { grid-template-columns: 3fr; }
  nav { flex-direction: row; align-items: center; }
  .welcomeScreen { display:none; }
  #accueil img { display:none; }
  .kpi2{display:grid;grid-template-columns:repeat(1fr);gap:10px}
  .kpi2 .card{text-align:center}
}
.welcomeScreen {
	margin: auto;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    overflow: auto;
    background: linear-gradient(315deg, var(--primaire) 3%, var(--primaire) 28%, var(--primaire) 48%, var(--primaire) 78%);
    animation: gradient 5s ease infinite;
    background-size: 400% 400%;
    background-attachment: fixed;
	position: absolute;
    width: 460px;
	height:260px;
	/* margin-top:40px; */
	z-index:1;
	border-radius:10px;
	overflow:hidden;
	transition: all 1s ease;
}
.welcomeScreen img {
	height:48px;
}
@keyframes gradient {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}

.wave {
    background: rgb(255 255 255 / 25%);
    border-radius: 1000% 1000% 0 0;
    position: absolute;
    width: 200%;
    height: 20em;
    animation: wave 10s -3s linear infinite;
    transform: translate3d(0, 0, 0);
    opacity: 0.8;
    bottom: -250px; 
    left: 0;
    z-index: -1;
}

.wave:nth-of-type(2) {
    bottom: -230px;
    animation: wave 18s linear reverse infinite;
    opacity: 0.8;
}

.wave:nth-of-type(3) {
    bottom: -210px;
    animation: wave 20s -1s reverse infinite;
    opacity: 0.9;
}

@keyframes wave {
    2% {
        transform: translateX(1);
    }

    25% {
        transform: translateX(-25%);
    }

    50% {
        transform: translateX(-50%);
    }

    75% {
        transform: translateX(-25%);
    }

    100% {
        transform: translateX(1);
    }
}

	#do {

		margin: auto;
		font-family:arial;
		color: #000;
		padding: 65px 20px 0px 20px;
		text-align: center;
	}
	#do div {
	font-size: 24px;
	}
	#do span {
	letter-spacing: 7px;
	}
.flip-card {
	background-color: transparent;
    width: 346px;
    height: 268px;
    border: none;
	padding: 0;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip {
  transform: rotateY(180deg);
} 

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  background:white;
  border: 1px solid #ffe4d5;
  border-radius:10px;
  padding:16px;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  
}

/* Style the back side */
.flip-card-back {
  /* background: linear-gradient(180deg, #fff, #fff7ed); */
  transform: rotateY(180deg);
}
.flip-card-back .fa-circle-xmark {
	position: absolute;
    right: 16px;
    font-size: 18px;
    color: var(--muted);
}
.flip-card-back .fa-circle-xmark:hover {
	color: var(--primary);
	cursor:pointer;
}
.backFlipContent {
	display:none;
}
.backFlipContent p {
	text-align: justify;
}
.cardInfo {
	width:0px;
	height:	0px;
	display:inline-block;
	opacity:0;
	background: linear-gradient(180deg, #fff, #fff7ed);
	border-radius: 10px;
	border: 1px solid #ffe4d5;
	transition: all 0.5s ease;
}
.open{
	opacity:1;
	width:945px;
	height: 140px;
	padding:10px;
    vertical-align: top;
}
.cardInfo .fa-circle-xmark {
	position: absolute;
    margin-left: 900px;
    margin-top: 5px;
    font-size: 18px;
    color: var(--muted);
}
.cardInfo .fa-circle-xmark:hover {
	color: var(--primary);
	cursor:pointer;
}
#fonctionnalites {
	overflow:hidden;
}
.kpi2 .card:hover {
	cursor:pointer;
	color:var(--primary);
}
.cardInfo h4 {
	margin-top: 0px;
    margin-bottom: 5px;
}
.cardInfo span {
	font-weight: normal;	
}