:root {
  --clr-primary: #f38020;
  --clr-dark: #0a0f2e;
  --clr-light: #ffffff;
  --font-sans: 'Inter', sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: var(--font-sans); background:var(--clr-dark); color:var(--clr-light); }
header { position: fixed; top:0; left:0; width:100%; background: rgba(10,15,46,0.8); backdrop-filter: blur(8px); padding:1rem 2rem; display:flex; justify-content:space-between; align-items:center; z-index:1000; }
.logo { color:var(--clr-primary); font-size:1.5rem; text-decoration:none; }

/* 1. Burger fixe, visible et harmonieux */
#burger {
  font-size: 1.8rem;
  color: var(--clr-light);
  background: none;
  border: none;
  cursor: pointer;
  z-index: 2000;
}

/* Desktop (≥769px) : nav en ligne classique */
@media (min-width: 769px) {
  nav {
    position: static;
    display: flex !important;
    flex-direction: row;
    background: none;
    height: auto;
    width: auto;
    transform: none !important;
    justify-content: flex-end;
    gap: 1.5rem;
    padding: 0;
  }
  nav a {
    font-size: 1.125rem;      /* un peu plus gros qu’avant */
    text-decoration: none;     /* plus de soulignement */
    padding: 0.75rem 0;        /* espace vertical plus généreux */
    color: var(--clr-light);               /* blanc de base */
    transition: color 0.3s ease-in-out;    /* transition douce */
  }
  nav a:hover {
    color: var(--clr-primary);             /* couleur finale */
    text-decoration: none;
  }
  #burger {
    display: none;
  }
}

/* 2. Nav en overlay plein écran */
@media (max-width: 768px) {
  nav {
    position: fixed;
    top: 0; right: 0;
    width: 100vw; height: 100vh;
    background: rgba(10,15,46,0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    z-index: 1500;
  }
  nav.show {
    transform: translateX(0);
  }
  /* 3. Liens centrés, gros et espacés */
  nav a {
    font-size: 1.25rem;
    padding: 1rem 0;
    width: 100%;
    text-align: center;
    color: var(--clr-light);
    text-decoration: none;
    transition: color 0.2s;
  }
  nav a:hover {
    color: var(--clr-primary);
  }
}

.section { padding:6rem 2rem; margin-top:4rem; }
.hero { text-align:center; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:2rem; }
.card { background: rgba(255,255,255,0.1); padding:1.5rem; border-radius:0.5rem; box-shadow:0 4px 8px rgba(0,0,0,0.2); transition: transform .3s; }
.card:hover { transform: translateY(-5px) scale(1.02); }
.partner-badge { width:80px; margin-top:0.5rem; display:inline-block; }
form { max-width:600px; margin:0 auto; display:flex; flex-direction:column; gap:1rem; background:rgba(255,255,255,0.05); padding:2rem; border-radius:0.5rem; box-shadow:0 4px 10px rgba(0,0,0,0.2); }
form input, form select, form textarea { width:100%; padding:0.75rem; border-radius:0.5rem; border:1px solid #ccc; background:#fff; color:#333; }
form button { align-self:flex-start; padding:0.75rem 1.5rem; border:none; border-radius:0.5rem; background:var(--clr-primary); color:var(--clr-light); font-weight:600; cursor:pointer; transition:background .3s; }
form button:hover { background:#d66e1c; }
#apropos p { margin-bottom:1.25rem; line-height:1.6; }
.video-container { position: relative; max-width:640px; margin:2rem auto; }
.video-container video { width:100%; border-radius:0.5rem; }





/* Partner logos background for visibility */
.card img {
  max-width: 120px;
  height: auto;
  display: block;
  margin: 0 auto 1rem;
  background: white;
  padding: 0.5rem;
  border-radius: 0.25rem;
}


/* Homepage specific styles */
.hero {
  text-align: center;
  padding: 6rem 2rem;
  background: linear-gradient(135deg, #0a0f2e 0%, #19204a 100%);
  color: var(--clr-light);
}
.features, .expertise-teaser, .partners-teaser, .references-teaser, .cta-footer {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 2rem;
}
.features .grid, .expertise-teaser .grid, .partners-teaser .grid, .references-teaser .cards {
  display: grid;
  gap: 2rem;
}
.features .grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.expertise-teaser .grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.partners-teaser .grid {
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  align-items: center;
}
.references-teaser .cards {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.card svg {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.btn-primary {
  background: var(--clr-primary);
  color: var(--clr-light);
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  text-decoration: none;
  display: inline-block;
  margin-top: 1rem;
}
.btn-primary:hover {
  background: #d66e1c;
}


/* Ensure visibility for logos in partners teaser */
.partners-teaser .grid img {
  max-width: 120px;
  background: white;
  padding: 0.5rem;
  border-radius: 0.25rem;
  margin: 0 auto;
  display: block;
}


/* Certifications & Récompenses section */
.certs-teaser {
  background: rgba(255,255,255,0.05);
  padding: 4rem 2rem;
}
.certs-teaser h2 {
  text-align: center;
  margin-bottom: 2rem;
  color: var(--clr-primary);
}
.certs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 2rem;
  max-width: 800px;
  margin: 0 auto;
}
.cert-badge {
  background: white;
  padding: 1rem;
  border-radius: 0.5rem;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.cert-badge img {
  max-width: 80px;
  margin-bottom: 1rem;
}
.cert-badge p {
  margin: 0;
  color: #333;
  font-weight: 600;
}


/* Center align footer content */
footer {
  text-align: center;
  padding: 2rem 0;
}
footer p, footer {
  margin: 0;
}


/* Ensure partners-teaser logos use local assets and styled */
.partners-teaser .grid img {
  max-width: 120px;
  background: white;
  padding: 0.5rem;
  border-radius: 0.25rem;
  margin: 0 auto;
  display: block;
}

/* Espacements pour Mentions légales */
main.legal {
  max-width: 800px;
  margin: 4rem auto;
  padding: 0 1rem;
}
.legal-section {
  margin-bottom: 2.5rem;
}
.legal-section h2 {
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}
.legal-section p {
  margin-bottom: 0.75rem;
  line-height: 1.6;
}

/* Styles pour page Informations Utiles */
#infos .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
  gap: 2rem;
}
#infos .card {
  background: rgba(255,255,255,0.1);
  padding: 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
#infos .card h3 {
  margin-bottom: 0.75rem;
}

/* Styles pour la page Informations Utiles */

/* 🌟 Table FortiOS */
#fortios-info {
  margin-bottom: 3rem;
}
#fortios-table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(255,255,255,0.05);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  border-radius: 0.5rem;
  overflow: hidden;
}
#fortios-table th,
#fortios-table td {
  padding: 0.75rem 1rem;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
#fortios-table thead {
  background: var(--clr-dark);
}
#fortios-table th {
  color: var(--clr-light);
  font-weight: 600;
  font-size: 1rem;
}
#fortios-table tr:nth-child(even) {
  background: rgba(255,255,255,0.02);
}
#fortios-table tr:last-child td {
  border-bottom: none;
}

/* 🌟 Cartes WALLIX & F5 */
#other-info {
  margin-top: 2rem;
}
#eol-other-cards .card {
  background: rgba(255,255,255,0.05);
  padding: 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transition: transform .3s, background .3s;
}
#eol-other-cards .card:hover {
  transform: translateY(-5px);
  background: rgba(255,255,255,0.1);
}
#eol-other-cards .card h3 {
  margin-bottom: 0.75rem;
  font-size: 1.125rem;
  color: var(--clr-primary);
}
#eol-other-cards .card p {
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

/* 🌟 Responsive (affinage) */
@media(max-width: 768px) {
  #fortios-table th,
  #fortios-table td {
    padding: 0.5rem;
    font-size: 0.9rem;
  }
  #eol-other-cards .card {
    padding: 1rem;
  }
}

/* === Table FortiOS – Style SamHan === */
#fortios-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--clr-dark);           /* ton fond sombre */
  border-radius: 0.5rem;
  overflow: hidden;
  margin-bottom: 3rem;
}

#fortios-table thead {
  background: var(--clr-darker);          /* nuance un peu plus foncée */
}

#fortios-table th,
#fortios-table td {
  padding: 0.75rem 1rem;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  color: var(--clr-light);
  font-size: 0.95rem;
}

#fortios-table tr:nth-child(even) {
  background: rgba(255,255,255,0.03);
}

/* Cellules “statut” cohérentes avec ta charte */
.status-green {
  background: rgba(255,255,255,0.1);
  color: var(--clr-primary);              /* orange accent pour positif */
}

.status-yellow {
  background: rgba(255,255,255,0.05);
  color: var(--clr-secondary);            /* ou une couleur moins vive */
}

.status-red {
  background: rgba(220,53,69,0.2);         /* rouge un peu plus doux */
  color: #dc3545;
}

/* Texte relatif + date absolue */
#fortios-table td p {
  margin: 0;
  line-height: 1.3;
}
#fortios-table td .relative {
  display: block;
  font-weight: 600;
}
#fortios-table td .absolute {
  display: block;
  color: rgba(255,255,255,0.6);
  font-size: 0.85rem;
}

/* Table WALLIX & F5 – cohérence SamHan */
#wallix-table, #f5-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--clr-dark);
  border-radius: 0.5rem;
  overflow: hidden;
  margin-bottom: 2rem;
}
#wallix-table th, #f5-table th {
  background: var(--clr-darker);
  color: var(--clr-light);
  padding: 0.75rem 1rem;
  text-align: center;
}
#wallix-table td, #f5-table td {
  color: var(--clr-light);
  padding: 0.75rem 1rem;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
#wallix-table tr:nth-child(even), #f5-table tr:nth-child(even) {
  background: rgba(255,255,255,0.03);
}
#wallix-table tr:last-child td, #f5-table tr:last-child td {
  border-bottom: none;
}

/* === Page Outils – SamHan === */
.tools-section {
  background: var(--clr-dark);
  color: var(--clr-light);
  padding: 6rem 2rem;
  margin-top: 4rem;
}
.tools-section h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}
.tools-section .intro {
  font-size: 1.125rem;
  color: rgba(255,255,255,0.7);
  margin-bottom: 2rem;
}

/* Grid responsive */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* Cartes Outils */
.tools-grid .card {
  background: rgba(255,255,255,0.05);
  color: var(--clr-light);
  border-radius: 0.5rem;
  padding: 1.5rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  transition: transform .3s, box-shadow .3s;
}
.tools-grid .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.4);
}
.tools-grid .card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}
.tools-grid .card p {
  color: rgba(255,255,255,0.7);
  margin-bottom: 1rem;
}

/* Bouton “Accéder” */
.btn-outline {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 2px solid var(--clr-primary);
  color: var(--clr-primary);
  border-radius: 0.375rem;
  text-decoration: none;
  font-weight: 600;
  transition: background .3s, color .3s;
}
.btn-outline:hover {
  background: var(--clr-primary);
  color: var(--clr-light);
}

/* Footer de la page Outils */
.site-footer p {
  color: rgba(255,255,255,0.7);
}