:root{

--dark:#0B1220;
--blue:rgb(59, 130, 246);
--yellow:rgb(240,195,0);
--light:#F8FAFC;
--text:#1E293B;

}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Inter,sans-serif;
}

body{
background:var(--light);
color:var(--text);
}

/* NAVBAR */

.navbar{

position:fixed;
top:0;
width:100%;

background:white;

display:flex;
justify-content:space-between;
align-items:center;

padding:20px 40px;

box-shadow:0 3px 10px rgba(0,0,0,0.05);

z-index:1000;

}

.logo img{
height:40px;
}

.menu{

display:flex;
gap:30px;
list-style:none;

}

.menu a{
text-decoration:none;
color:var(--dark);
font-weight:500;
}

.demo{

background:rgb(240,195,0);
color:white;

border:none;

padding:10px 18px;

border-radius:8px;

cursor:pointer;

}

/* HERO */

.hero{

padding-top:140px;
padding-bottom:120px;

text-align:center;

background:linear-gradient(120deg,#0B1220,#1E3A8A);

color:white;

}

.hero h1{
line-height: 1.2;
font-size:52px;
max-width:850px;
margin:auto;

}

.hero h1 span{

color:var(--yellow);

}

.hero p{
line-height: 1;
margin-top:25px;

font-size:20px;

max-width:700px;
margin-left:auto;
margin-right:auto;

}

.hero-buttons{

margin-top:35px;

display:flex;
gap:20px;
justify-content:center;

}

.primary{

background:var(--yellow);
color:white;

border:none;

padding:14px 28px;

border-radius:8px;

font-size:16px;

}

.secondary{

background:transparent;
border:2px solid white;
color:white;

padding:14px 28px;

border-radius:8px;

}

/* PROBLEM */

.problem{
line-height: 1;
padding:100px 20px;
max-width:1100px;
margin:auto;
text-align:center;

}

.problem h2 span{
  color:var(--yellow)
}

.problem-grid{
line-height: 1.1;
margin-top:50px;

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:40px;

}

/* SOLUTION */

.solution{

background:linear-gradient(120deg,#0B1220,#1E3A8A);

padding:100px 20px;
color:white;
text-align:center;

}
.solution h2 span{
  color:var(--yellow)
}

.solution-intro{

max-width:700px;
margin:auto;
margin-bottom:50px;
color:white;
}

.solution-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
color:black;
max-width:1000px;
margin:auto;

}

.solution-card{

background:var(--light);

padding:30px;

border-radius:12px;

}

/* FEATURES */
/* Layout de base */
.features {
  padding: 30px 10px;
}

.features h2 {
  text-align: center;
  margin-bottom: 50px;
}

.features-container {
  display: flex;
  max-width: 1000px;
  margin: auto;
  min-height: 400px;
  
}

.features-titles {
  width: 35%;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.feature-title h3 {
  cursor: pointer;
  transition: color 0.3s;
}

.feature-title:hover h3 {
  color: #f0c300;
}

.features-details {
  flex: 1;
  padding-left: 60px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* alignement en haut */
  gap: 10px; /* plus haut pour accueillir le grand SVG */
}

.features-details p {
  margin-bottom: 20px;
  font-size: 18px;
}

#featureImgContainer svg {
  max-width: 800px; /* ou width: 100% pour qu’il prenne tout l’espace disponible */
  height: auto;
  display: block;
  position: relative;
  top: -40px; 
 
}
/* Animation barres Projection par service */
.bar {
  transform-origin: bottom;
  animation: grow 1s ease forwards;
}
@keyframes grow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

/* Animation engrenage Projection automatique */
.gear {
  transform-origin: 48px 16px;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Animation Multi sociétés : pop */
.multi-group {
  transform: scale(0);
  animation: pop 0.5s ease forwards;
}
@keyframes pop {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Animation Hypothèses RH : clignotement des blocs */
.hyp-block {
  opacity: 0.5;
  animation: blink 1s infinite alternate;
}
@keyframes blink {
  from { opacity: 0.5; }
  to { opacity: 1; }
}
/* CTA */

.cta{

padding-top:140px;
padding-bottom:120px;

text-align:center;

background:linear-gradient(120deg,#0B1220,#1E3A8A);

color:white;

}
.cta h2 span{

color:var(--yellow);

}

.cta button{

margin-top:25px;

background:rgb(240,195,0);
color:white;

border:none;

padding:14px 30px;

border-radius:8px;

font-size:16px;

}

/* CONTACT */

.contact{

padding:100px 20px;

text-align:center;

}

.contact form{

max-width:500px;
margin:auto;

display:flex;
flex-direction:column;
gap:15px;

}

.contact input,
.contact textarea{

padding:12px;

border-radius:6px;

border:1px solid #ddd;

}

.contact button{

background:var(--dark);
color:white;

border:none;

padding:14px;

border-radius:6px;

}

/* FOOTER */

footer{

text-align:center;

padding:40px;

color:#64748B;

}

/* OFFRE */
.offre {
  background: #f4f6f8; /* léger gris pour démarquer la section */
  padding: 80px 20px;
  text-align: center;
}

.offre h2 {
  font-size: 36px;
  color: var(--primary);
  margin-bottom: 20px;
}

.offre-intro {
  font-size: 18px;
  color: var(--text);
  max-width: 800px;
  margin: 0 auto 50px;
}

.offre-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  max-width: 1100px;
  margin: auto;
}

.offre-card {
  background: white;
  border-radius: 16px;
  padding: 30px 20px;
  box-shadow: 0 12px 25px rgba(0,0,0,0.08);
  transition: transform 0.3s, box-shadow 0.3s;

  display: flex;            /* active flexbox */
  flex-direction: column;   /* empile verticalement */
  align-items: center;      /* centre horizontalement le contenu */
  text-align: center;       /* centre le texte */
}

.offre-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 35px rgba(0,0,0,0.12);
}

.offre-card h3 {
  font-size: 22px;
  margin-bottom: 12px;
  color: var(--primary);
}

.offre-card p {
  font-size: 16px;
  color: var(--subtext);
}

/* Conteneur triangle */
.solution-triangle {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 500px;
  margin: auto;
}

/* Cartes */
.solution-card {
  position: absolute;
  width: 220px;
  padding: 30px;
  border-radius: 12px;
  background: var(--light);
  color: var(--text);
  text-align: center;
  z-index: 2; /* devant le SVG et texte central */
  transition: transform 0.3s;
}

.solution-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 18px 35px rgba(0,0,0,0.12);
}

/* SVG lignes */
.triangle-lines {
  position: absolute;
  top: 0;
  left: 0;
  color: white;
  z-index: 1; /* derrière les cartes */
  width: 100%;
  height: 100%;
}

/* Texte central */
.triangle-center-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 20px;
  text-align: center;
  transition: opacity 0.3s ease;
  z-index: 3;
  max-width: 300px;
  opacity: 0; /* invisible par défaut */
  pointer-events: none;
}

/* Faire apparaître le texte au survol du conteneur */
.solution-triangle:hover .triangle-center-text {
  opacity: 1;
}

.projection-triangle-container {
  display: flex;
  justify-content: center;
  margin: 50px 0;
}

.projection-triangle-container svg text {
  font-weight: bold;
}

.cgu-body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    background: #f9fafb;
    color: #1f2937;
    line-height: 1.6;
}

.cgu-container {
    max-width: 900px;
    margin: 60px auto;
    padding: 40px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.cgu-header {
    margin-bottom: 30px;
}

.cgu-back {
    text-decoration: none;
    color: #6b7280;
    font-size: 14px;
}

.cgu-back:hover {
    color: #111827;
}

.cgu-h1 {
    font-size: 32px;
    margin-bottom: 10px;
}

.cgu-update {
    color: #6b7280;
    font-size: 14px;
    margin-bottom: 30px;
}

.cgu-h2 {
    margin-top: 35px;
    font-size: 20px;
    border-left: 4px solid #6366f1;
    padding-left: 10px;
}

.cgu-p {
    margin: 10px 0;
}

.cgu-ul {
    padding-left: 20px;
}

.cgu-li {
    margin-bottom: 8px;
}

.cgu-highlight {
    background: #f3f4f6;
    padding: 15px;
    border-radius: 8px;
    margin-top: 10px;
}

.cgu-h3 {
    margin-top: 35px;
    font-size: 15px;
    border-left: 4px solid #6366f1;
    padding-left: 10px;
}

/* =========================
   CAS PRATIQUES CLEAN
========================= */

.cas-main {
  margin-top: 50px;
  padding: 60px 20px;
    background: #f9fafb;
}

/* HERO */
.cas-hero {
    text-align: center;
    margin-bottom: 60px;
}

.cas-hero h1 {
    font-size: 36px;
    margin-bottom: 10px;
}

.cas-hero p {
    color: #6b7280;
}

/* SECTIONS */
.cas-section {
    max-width: 1100px;
    margin: 0 auto 80px;
    text-align: center;
}

.cas-title {
    font-size: 28px;
    margin-bottom: 30px;
}

/* SUBTITLE */
.cas-subtitle {
    color: #6b7280;
    margin-bottom: 40px;
}

/* =========================
   GRIDS
========================= */

.cas-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.cas-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

/* =========================
   CARDS (VERSION UNIQUE)
========================= */

.cas-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);

    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* VIDEO */
.cas-card video {
    width: 100%;
    display: block;
}

/* TEXTES */
.cas-caption {
    padding: 15px;
    text-align: center;
}

.cas-caption h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.cas-caption p {
    margin-top: 8px;
    font-size: 14px;
    color: #6b7280;
    line-height: 1.4;
}

/* CTA */
.cas-cta {
    padding: 0 15px 20px;
    text-align: center;
}

.cas-cta .demo {
    padding: 10px 16px;
    border-radius: 8px;
    border: none;
    background: #111827;
    color: white;
    cursor: pointer;
    font-size: 14px;
}

.cas-cta .demo:hover {
    background: #374151;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 768px) {
    .cas-grid-3,
    .cas-grid-2 {
        grid-template-columns: 1fr;
    }
}