/* ══════════════════════════════════════
   ENTÊTES DES PAGES INTERNES (MINI-HERO)
══════════════════════════════════════ */
.hero-interne {
  position: relative;
  min-height: 45vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: 100px;
  overflow: hidden;
}

.hero-interne-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background:
    linear-gradient(135deg, rgba(8,8,20,.75) 0%, rgba(15,10,30,.60) 50%, rgba(8,8,20,.80) 100%),
    url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1800&q=85') center/cover no-repeat;
  transform: translateZ(0); /* Sécurisation GPU */
}

.hero-interne-contenu {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ══════════════════════════════════════
   UTILITAIRES DE MISE EN PAGE
══════════════════════════════════════ */
.marge-bas-20 { margin-bottom: 20px; }
.marge-nulle { margin-bottom: 0; }
.texte-centre { text-align: center; }
.flex-centre { justify-content: center; }

.btn-avec-icone {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* ══════════════════════════════════════
   CORRECTIFS SUPERPOSITION & CONSTELLATION
══════════════════════════════════════ */
/* Force la constellation à rester tout au fond */
.bg-anim-tech {
  z-index: 0 !important;
}
/* Force le contenu à passer par-dessus les lignes de la constellation */
.section .container, .bento-section .container {
  position: relative;
  z-index: 10;
}

/* ══════════════════════════════════════
   DESIGN PREMIUM - PAGE "À PROPOS"
══════════════════════════════════════ */

/* ── 1. BENTO GRID (L'Entreprise) ── */
.bento-section {
  padding: 100px 0;
  /* Fond transparent pour laisser voir la constellation */
  background: transparent; 
  position: relative;
  z-index: 20;
}
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 24px;
  margin-top: -120px; 
  position: relative;
  z-index: 25; /* CRUCIAL : Place les cartes au-dessus des lignes rouges du hero */
}
.bento-item {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-radius: 24px;
  padding: 40px;
  border: 1px solid rgba(0,0,0,0.03);
  box-shadow: 0 15px 35px rgba(0,0,0,0.04);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s;
  overflow: hidden;
  position: relative;
}
.bento-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(0,0,0,0.08);
}
.bento-large { grid-column: span 2; }
.bento-image { padding: 0; display: flex; }
.bento-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s ease;
}
.bento-item:hover .bento-image img { transform: scale(1.05); }

.bento-titre { font-family: var(--f1); font-size: 24px; font-weight: 800; color: var(--txt); margin-bottom: 15px; }
.bento-ico { font-size: 32px; color: var(--rouge); margin-bottom: 24px; display: inline-block; }

/* ── 2. GALERIE ÉQUIPE (Carrousel Défilant Automatique) ── */
.team-slider-container {
  width: 100%;
  overflow: hidden;
  padding: 20px 0 60px 0;
  position: relative;
}
.team-track {
  display: flex;
  gap: 24px;
  width: max-content;
  /* L'animation linéaire infinie */
  animation: scrollTeam 30s linear infinite;
}
/* Met le défilement en pause quand on survole avec la souris */
.team-slider-container:hover .team-track {
  animation-play-state: paused; 
}
.team-card {
  flex: 0 0 320px;
  height: 420px;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  filter: grayscale(100%); /* Effet N&B d'origine */
  transition: all 0.6s ease;
  cursor: pointer;
}
.team-card:hover { 
  filter: grayscale(0%); 
  transform: translateY(-10px); 
  box-shadow: 0 20px 40px rgba(204,0,0,0.15); 
}
.team-card img { width: 100%; height: 100%; object-fit: cover; }
.team-overlay {
  position: absolute; bottom: 0; left: 0; width: 100%;
  padding: 40px 24px 24px 24px;
  background: linear-gradient(to top, rgba(10,10,20,0.95), transparent);
  color: #fff;
  transform: translateY(20px); transition: transform 0.4s ease;
}
.team-card:hover .team-overlay { transform: translateY(0); }
.team-role { color: var(--rouge); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; }
.team-name { font-size: 20px; font-weight: 600; }

@keyframes scrollTeam {
  0% { transform: translateX(0); }
  /* Translate de la moitié exacte pour boucler de manière invisible */
  100% { transform: translateX(calc(-50% - 12px)); }
}

/* ── 3. SECTION FONDATEUR (Cinématique & Dark Mode) ── */
.founder-cinematic {
  background: #05050A; /* Noir très profond */
  color: #fff;
  padding: 140px 0;
  position: relative;
  overflow: hidden;
}
.founder-grid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 80px;
  align-items: center;
}
.founder-portrait {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}
.founder-portrait img { width: 100%; display: block; }
/* Fondu noir en bas de l'image pour l'intégrer au fond */
.founder-portrait::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, #05050A 0%, transparent 30%);
}
.founder-name { font-family: var(--f1); font-size: 48px; font-weight: 800; line-height: 1.1; margin-bottom: 10px; }
.founder-title { color: var(--rouge); font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 40px; display: block; }
.founder-text { font-size: 16px; color: rgba(255,255,255,0.7); line-height: 1.8; margin-bottom: 24px; text-align: justify; }

/* Responsif */
@media(max-width: 1024px) {
  .bento-grid { grid-template-columns: 1fr 1fr; margin-top: -60px; }
  .bento-large { grid-column: span 1; }
  .founder-grid { grid-template-columns: 1fr; gap: 40px; }
  .founder-portrait { max-width: 500px; margin: 0 auto; }
}
@media(max-width: 768px) {
  .bento-grid { grid-template-columns: 1fr; }
}
/* ══════════════════════════════════════
   4. SECTION PARTENAIRES (RUBAN INFINI)
══════════════════════════════════════ */
.partner-section {
  background: var(--blanc);
  padding: 80px 0;
  border-top: 1px solid rgba(0,0,0,0.03);
  position: relative;
  z-index: 10;
}

.partner-slider-container {
  width: 100%;
  overflow: hidden;
  padding: 20px 0 40px 0;
  position: relative;
}

/* Fondu blanc sur les bords pour un effet d'apparition/disparition magique */
.partner-slider-container::before,
.partner-slider-container::after {
  content: '';
  position: absolute;
  top: 0;
  width: 150px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.partner-slider-container::before {
  left: 0;
  background: linear-gradient(to right, #ffffff, transparent);
}
.partner-slider-container::after {
  right: 0;
  background: linear-gradient(to left, #ffffff, transparent);
}

.partner-track {
  display: flex;
  gap: 40px;
  width: max-content;
  align-items: center;
  /* Animation un peu plus lente que l'équipe (40s) */
  animation: scrollPartners 40s linear infinite; 
}

/* Pause au survol */
.partner-slider-container:hover .partner-track {
  animation-play-state: paused;
}

.partner-card {
  flex: 0 0 220px;
  height: 110px;
  background: #ffffff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.02);
  border: 1px solid rgba(0,0,0,0.04);
  /* Logos discrets par défaut */
  filter: grayscale(100%) opacity(0.5);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.partner-card:hover {
  /* Le logo prend vie */
  filter: grayscale(0%) opacity(1);
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(204,0,0,0.08);
  border-color: rgba(204,0,0,0.15);
}

.partner-card img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

@keyframes scrollPartners {
  0% { transform: translateX(0); }
  /* La translation prend en compte l'espace (gap) pour une boucle invisible */
  100% { transform: translateX(calc(-50% - 20px)); } 
}
/* ══════════════════════════════════════
   PAGE "ACTUALITÉS" (MAGAZINE GRID)
══════════════════════════════════════ */
.news-section {
  padding: 80px 0;
  background: var(--bg);
  position: relative;
  z-index: 10;
}

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

/* ── Article à la Une (Featured) ── */
.news-featured {
  grid-column: span 3;
  display: flex;
  background: var(--blanc);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.04);
  margin-bottom: 20px;
  border: 1px solid rgba(0,0,0,0.03);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  cursor: pointer;
}
.news-featured:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}
.news-featured-img {
  flex: 0 0 55%;
  position: relative;
  overflow: hidden;
}
.news-featured-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s ease;
}
.news-featured:hover .news-featured-img img { transform: scale(1.05); }
.news-featured-content {
  padding: 50px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ── Cartes d'articles classiques ── */
.news-card {
  background: var(--blanc);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.03);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.news-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.08);
}
.news-card-img {
  height: 240px;
  position: relative;
  overflow: hidden;
}
.news-card-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s ease;
}
.news-card:hover .news-card-img img { transform: scale(1.08); }
.news-card-content {
  padding: 30px 25px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

/* ── Typographie et détails ── */
.news-tag {
  position: absolute;
  top: 20px; left: 20px;
  background: var(--rouge);
  color: white;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 6px;
  letter-spacing: 1px;
  z-index: 2;
  box-shadow: 0 4px 10px var(--rouge-glow);
}
.news-date {
  font-size: 13px;
  color: var(--txt3);
  font-weight: 600;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.news-date i { color: var(--rouge); }
.news-title {
  font-family: var(--f1);
  font-size: 22px;
  font-weight: 800;
  color: var(--txt);
  line-height: 1.3;
  margin-bottom: 15px;
  transition: color 0.3s ease;
}
.news-featured .news-title { font-size: 32px; }
.news-card:hover .news-title, .news-featured:hover .news-title { color: var(--rouge); }
.news-excerpt {
  color: var(--txt2);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 25px;
}
.news-link {
  margin-top: auto;
  color: var(--txt);
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.3s ease;
}
.news-link i { font-size: 12px; transition: transform 0.3s; }
.news-card:hover .news-link, .news-featured:hover .news-link { color: var(--rouge); }
.news-card:hover .news-link i, .news-featured:hover .news-link i { transform: translateX(5px); }

/* Responsif */
@media(max-width: 900px) {
  .news-grid { grid-template-columns: 1fr; }
  .news-featured { flex-direction: column; grid-column: span 1; }
  .news-featured-img { flex: 0 0 250px; }
  .news-featured-content { padding: 30px; }
  .news-featured .news-title { font-size: 24px; }
}
/* ══════════════════════════════════════
   CONTRÔLES ACTUALITÉS (RECHERCHE, FILTRES, PAGINATION)
══════════════════════════════════════ */

/* ── Barre de recherche et Filtres ── */
.news-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 40px;
  background: var(--blanc);
  padding: 15px 25px;
  border-radius: 16px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.02);
  border: 1px solid rgba(0,0,0,0.03);
}

.news-search {
  position: relative;
  flex: 1;
  min-width: 250px;
  max-width: 350px;
}
.news-search input {
  width: 100%;
  padding: 12px 20px 12px 45px;
  border-radius: 50px;
  border: 1px solid rgba(0,0,0,0.1);
  background: var(--bg);
  font-family: var(--f2);
  font-size: 14px;
  color: var(--txt);
  outline: none;
  transition: all 0.3s ease;
}
.news-search input:focus {
  border-color: var(--rouge);
  box-shadow: 0 0 0 3px rgba(204,0,0,0.1);
}
.news-search i {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--txt3);
}

.news-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.filter-btn {
  padding: 8px 18px;
  border-radius: 50px;
  border: 1px solid rgba(0,0,0,0.1);
  background: transparent;
  color: var(--txt2);
  font-family: var(--f1);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}
.filter-btn:hover {
  border-color: var(--rouge);
  color: var(--rouge);
}
.filter-btn.actif {
  background: var(--rouge);
  border-color: var(--rouge);
  color: white;
  box-shadow: 0 4px 10px var(--rouge-glow);
}

/* ── Pagination ── */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 50px;
}
.page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 15px;
  border-radius: 8px;
  background: var(--blanc);
  color: var(--txt2);
  font-weight: 600;
  font-size: 14px;
  border: 1px solid rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}
.page-link:hover {
  background: var(--bg);
  color: var(--rouge);
  transform: translateY(-2px);
}
.page-link.actif {
  background: var(--rouge);
  color: white;
  border-color: var(--rouge);
  box-shadow: 0 4px 10px var(--rouge-glow);
}
.page-link.prev-next {
  gap: 8px;
}
/* ══════════════════════════════════════
   EFFET TEXTE ANIMÉ (HERO PLATEFORMES)
══════════════════════════════════════ */
.reveal-mask {
  display: inline-flex;
  overflow: hidden; 
  vertical-align: bottom;
  padding-bottom: 5px;
}
.reveal-text {
  display: inline-block;
  transform: translateY(100%);
  opacity: 0;
  animation: slideUpReveal 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.d-1 { animation-delay: 0.2s; }
.d-2 { animation-delay: 0.4s; }
.d-3 { animation-delay: 0.6s; }
.d-4 { animation-delay: 0.8s; }

@keyframes slideUpReveal {
  0% { transform: translateY(100%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ══════════════════════════════════════
   PORTFOLIO: STACKING CARDS 3D (LIGHT MODE)
══════════════════════════════════════ */
.portfolio-section {
  background: var(--bg); /* On utilise le fond clair standard du site */
  padding: 50px 0 150px 0;
  position: relative;
  z-index: 10;
}

.portfolio-stack {
  display: flex;
  flex-direction: column;
  gap: 80px; 
}

.portfolio-card {
  position: sticky;
  top: 120px; 
  background: var(--blanc); /* Carte parfaitement blanche */
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-top: 3px solid var(--rouge); /* Ligne rouge distinctive en haut */
  border-radius: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0,0,0,0.05); /* Ombre douce */
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.portfolio-content {
  padding: 80px;
}

.portfolio-num {
  font-family: var(--f1);
  font-size: 80px;
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 2px rgba(0,0,0,0.05); /* Numéro en contour gris très clair */
  line-height: 1;
  margin-bottom: 20px;
  transition: all 0.4s ease;
}
.portfolio-card:hover .portfolio-num {
  -webkit-text-stroke: 2px var(--rouge);
  color: rgba(204,0,0,0.05);
  transform: translateX(10px);
}

.portfolio-title {
  font-family: var(--f1);
  font-size: 46px;
  font-weight: 800;
  color: var(--txt); /* Texte sombre standard */
  margin-bottom: 20px;
}

.portfolio-desc {
  font-size: 16px;
  color: var(--txt2); /* Gris moyen pour la lecture */
  line-height: 1.8;
  margin-bottom: 40px;
}

.portfolio-tags {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.ptag {
  padding: 8px 20px;
  border-radius: 50px;
  border: 1px solid rgba(0,0,0,0.05);
  background: rgba(0,0,0,0.02);
  color: var(--txt2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.portfolio-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--rouge);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: gap 0.3s ease;
}
.portfolio-card:hover .portfolio-btn { gap: 15px; }

.portfolio-visual {
  position: relative;
  height: 100%;
  min-height: 500px;
  /* Halo lumineux rouge très léger en fond */
  background: radial-gradient(circle at center, rgba(204,0,0,0.03) 0%, transparent 60%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.portfolio-visual img {
  width: 85%;
  height: auto;
  border-radius: 12px;
  box-shadow: -20px 30px 60px rgba(0,0,0,0.15); /* Ombre ajustée pour fond clair */
  transform: perspective(1200px) rotateY(-18deg) rotateX(8deg) rotateZ(-2deg);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.portfolio-card:hover .portfolio-visual img {
  transform: perspective(1200px) rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(1.05);
  box-shadow: 0 30px 60px rgba(0,0,0,0.1);
}

@media(max-width: 1024px) {
  .portfolio-card { grid-template-columns: 1fr; top: 90px; }
  .portfolio-content { padding: 40px; }
  .portfolio-visual { min-height: 350px; }
  .portfolio-visual img { transform: none; width: 90%; }
}
/* ══════════════════════════════════════
   LOGICIELS : SHOWCASE SAAS LUMINEUX
══════════════════════════════════════ */
.saas-section {
  padding: 100px 0;
  background: var(--bg);
  position: relative;
  z-index: 10;
}

.saas-container {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.saas-card {
  display: flex;
  align-items: center;
  gap: 50px;
  background: var(--blanc);
  border-radius: 24px;
  padding: 50px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.04);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.saas-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}

/* Alterne le sens des cartes (Image à droite, puis à gauche) */
.saas-card:nth-child(even) {
  flex-direction: row-reverse;
}

.saas-content {
  flex: 1;
}

.saas-visual {
  flex: 1;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  /* Un léger effet de flottement sur l'image */
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.saas-card:hover .saas-visual {
  transform: scale(1.02);
}

.saas-visual img, 
.saas-visual video {
  width: 100%;
  height: auto;
  display: block;
}

/* Typographie claire et impactante */
.saas-badge {
  display: inline-block;
  padding: 8px 16px;
  background: rgba(204,0,0,0.08);
  color: var(--rouge);
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  border-radius: 50px;
  margin-bottom: 20px;
  letter-spacing: 1.5px;
}

.saas-title {
  font-family: var(--f1);
  font-size: 36px;
  font-weight: 800;
  color: var(--txt);
  margin-bottom: 20px;
  line-height: 1.2;
}

.saas-desc {
  font-size: 16px;
  color: var(--txt2);
  line-height: 1.6;
  margin-bottom: 30px;
}

/* Liste de fonctionnalités bien visible */
.saas-features {
  list-style: none;
  padding: 0;
  margin-bottom: 40px;
}

.saas-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-weight: 600;
  color: var(--txt);
}

.saas-features li i {
  color: #28a745;
  background: rgba(40,167,69,0.1);
  padding: 6px;
  border-radius: 50%;
  font-size: 12px;
}

/* Responsif Mobile */
@media(max-width: 900px) {
  .saas-card, .saas-card:nth-child(even) {
    flex-direction: column-reverse;
    padding: 30px;
    gap: 30px;
  }
  .saas-title { font-size: 28px; }
}
/* ══════════════════════════════════════
   LOGICIELS : MOCKUP SAAS & VIDÉOS
══════════════════════════════════════ */
/* Le conteneur visuel global */
.saas-visual {
  flex: 1;
  position: relative;
  perspective: 1000px;
}

/* La fausse fenêtre de navigateur (Mockup) */
.browser-mockup {
  background: var(--blanc);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 25px 50px rgba(0,0,0,0.1);
  border: 1px solid rgba(0,0,0,0.05);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s;
}

.saas-card:hover .browser-mockup {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 35px 60px rgba(204,0,0,0.1);
}

/* L'en-tête du navigateur avec les 3 points */
.browser-header {
  height: 36px;
  background: #f8f9fc;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 8px;
}
.browser-dot {
  width: 12px; height: 12px; border-radius: 50%;
}
.dot-red { background: #ff5f56; }
.dot-yellow { background: #ffbd2e; }
.dot-green { background: #27c93f; }

/* La vidéo intégrée */
.saas-video {
  width: 100%;
  display: block;
  object-fit: cover;
  background: #f0f0f0; /* Fond si la vidéo met du temps à charger */
}

/* ── Badges Flottants (L'idée de génie) ── */
.floating-badge {
  position: absolute;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: 12px 20px;
  border-radius: 12px;
  font-family: var(--f2);
  font-weight: 700;
  font-size: 14px;
  color: var(--txt);
  box-shadow: 0 15px 30px rgba(0,0,0,0.1);
  border: 1px solid rgba(255,255,255,1);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 5;
  animation: floatBadge 4s ease-in-out infinite;
}

.floating-badge i { font-size: 16px; }
.badge-rouge i { color: var(--rouge); }
.badge-vert i { color: #28a745; }
.badge-bleu i { color: #007bff; }

/* Positions asymétriques pour déborder légèrement du mockup */
.b-top-right { top: 40px; right: -20px; animation-delay: 0s; }
.b-bottom-left { bottom: 40px; left: -20px; animation-delay: 2s; }
.b-bottom-right { bottom: 30px; right: -20px; animation-delay: 1s; }

@keyframes floatBadge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@media(max-width: 1024px) {
  .floating-badge { display: none; /* On cache les badges sur mobile pour ne pas surcharger */ }
}
/* ══════════════════════════════════════
   PÔLES D'EXPERTISE : ACCORDÉON IMMERSIF
══════════════════════════════════════ */
.consulting-section {
  padding: 100px 0;
  background: var(--bg);
  position: relative;
  z-index: 10;
}

.expertise-accordion {
  display: flex;
  gap: 15px;
  height: 600px;
  width: 100%;
  margin-top: 40px;
}

.expert-panel {
  position: relative;
  flex: 1; /* Taille de base */
  border-radius: 30px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.7s cubic-bezier(0.25, 1, 0.5, 1);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 40px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.05);
}

/* L'expansion magique au survol */
.expert-panel:hover {
  flex: 3.5; /* Le panneau s'élargit massivement */
  box-shadow: 0 25px 50px rgba(204,0,0,0.15);
}

/* Les images en arrière-plan */
.expert-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease, filter 0.7s ease;
  filter: brightness(0.4) grayscale(50%); /* Sombre et gris par défaut */
}

.expert-panel:hover .expert-bg {
  transform: scale(1.05);
  filter: brightness(0.3) grayscale(0%); /* Laisse exploser les couleurs, mais garde le fond sombre pour lire */
}

/* Le dégradé pour que le texte soit lisible */
.expert-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
  pointer-events: none;
}

/* Le contenu au-dessus de l'image */
.expert-content {
  position: relative;
  z-index: 2;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
}

.expert-icon {
  width: 70px; height: 70px;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: white;
  margin-bottom: 20px;
  transition: all 0.5s ease;
}

.expert-panel:hover .expert-icon {
  background: var(--rouge);
  color: white;
  border-color: var(--rouge);
  transform: translateY(-10px) rotate(10deg);
  box-shadow: 0 10px 20px var(--rouge-glow);
}

.expert-title {
  font-family: var(--f1);
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 0;
  white-space: nowrap; /* Empêche le texte de se casser sur 2 lignes quand c'est rétréci */
  transition: all 0.5s ease;
}

/* Ce qui est caché par défaut */
.expert-details {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.expert-panel:hover .expert-details {
  opacity: 1;
  max-height: 300px;
  margin-top: 15px;
  transition-delay: 0.1s;
}

.expert-panel:hover .expert-title {
  white-space: normal; /* Autorise le retour à la ligne */
  font-size: 32px;
  color: #fff;
}

.expert-details p {
  color: rgba(255,255,255,0.8);
  line-height: 1.6;
  margin-bottom: 15px;
  font-size: 15px;
  max-width: 600px;
}

.expert-details ul {
  list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}

.expert-details li {
  position: relative;
  padding-left: 20px;
  font-weight: 600;
  font-size: 14px;
}

.expert-details li::before {
  content: '→';
  color: var(--rouge);
  position: absolute; left: 0; font-weight: bold;
}

/* Adaptation pour Mobile */
@media(max-width: 1024px) {
  .expertise-accordion { flex-direction: column; height: auto; }
  .expert-panel { height: 120px; }
  .expert-panel:hover { height: 450px; }
  .expert-details ul { grid-template-columns: 1fr; }
}

/* ── Timeline de la Méthodologie ── */
.method-section {
  padding: 100px 0;
  background: var(--blanc);
  border-top: 1px solid rgba(0,0,0,0.03);
}

.method-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  position: relative;
  margin-top: 60px;
}

.method-timeline::before {
  content: '';
  position: absolute;
  top: 35px;
  left: 50px;
  right: 50px;
  height: 2px;
  background: rgba(0,0,0,0.05);
  z-index: 0;
}

.method-step { position: relative; z-index: 2; text-align: center; }
.method-num {
  width: 70px; height: 70px; background: var(--blanc);
  border: 2px solid rgba(0,0,0,0.1); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 25px auto; font-family: var(--f1); font-size: 24px; font-weight: 800;
  color: var(--txt2); transition: all 0.4s ease; box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}
.method-step:hover .method-num {
  border-color: var(--rouge); background: var(--rouge); color: white;
  transform: scale(1.1); box-shadow: 0 10px 25px var(--rouge-glow);
}
.method-title { font-family: var(--f1); font-size: 20px; font-weight: 800; margin-bottom: 15px; }
.method-desc { font-size: 14px; color: var(--txt2); line-height: 1.6; }

@media(max-width: 900px) {
  .method-timeline { grid-template-columns: 1fr; gap: 50px; }
  .method-timeline::before { top: 0; left: 35px; width: 2px; height: 100%; bottom: auto; right: auto; }
  .method-step { display: flex; text-align: left; align-items: flex-start; gap: 20px; }
  .method-num { margin: 0; flex-shrink: 0; }
}
/* ══════════════════════════════════════
   PAGE "FORMATION" (CROMMIX ACADEMY)
══════════════════════════════════════ */
.academy-section {
  padding: 100px 0;
  background: var(--bg);
  position: relative;
  z-index: 10;
}

/* ── Bandeau des Chiffres Clés ── */
.academy-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  background: #fff;
  border-radius: 24px;
  padding: 50px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.02);
  margin-top: -150px; /* Remonte sur le Hero */
  position: relative;
  z-index: 20;
  margin-bottom: 80px;
}

.stat-item {
  text-align: center;
  position: relative;
}
.stat-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 10%; right: -15px;
  height: 80%; width: 1px;
  background: rgba(0,0,0,0.05);
}

.stat-num {
  font-family: var(--f1);
  font-size: 48px;
  font-weight: 900;
  color: #ff0000; /* Rouge vif exigé */
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.stat-num span { font-size: 24px; color: var(--txt); margin-left: 5px; }
.stat-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--txt2);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ── Grille des Formations (Effet Bordure Magnétique) ── */
.course-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.course-card {
  position: relative;
  background: var(--blanc);
  border-radius: 24px;
  padding: 40px;
  z-index: 1;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.03);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

/* L'effet de bordure lumineuse (Glow) caché par défaut */
.course-card::before {
  content: '';
  position: absolute;
  inset: -2px; /* Dépasse légèrement pour faire la bordure */
  background: linear-gradient(135deg, #ff0000, #ff4b4b, transparent, transparent);
  z-index: -2;
  opacity: 0;
  transition: opacity 0.5s ease;
}
/* Un fond blanc juste au-dessus du gradient pour creuser l'intérieur */
.course-card::after {
  content: '';
  position: absolute;
  inset: 2px;
  background: var(--blanc);
  border-radius: 22px;
  z-index: -1;
  transition: background 0.4s ease;
}

.course-card:hover {
  transform: translateY(-8px);
}
.course-card:hover::before {
  opacity: 1; /* Le gradient s'allume au survol */
  animation: rotateGlow 3s linear infinite;
}

@keyframes rotateGlow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.course-icon {
  width: 60px;
  height: 60px;
  background: rgba(255, 0, 0, 0.05);
  color: #ff0000;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: 25px;
  transition: all 0.4s ease;
}
.course-card:hover .course-icon {
  background: #ff0000;
  color: white;
  transform: scale(1.1) rotate(-5deg);
}

.course-title {
  font-family: var(--f1);
  font-size: 22px;
  font-weight: 800;
  color: var(--txt);
  margin-bottom: 15px;
  line-height: 1.3;
}

.course-desc {
  font-size: 15px;
  color: var(--txt2);
  line-height: 1.6;
  margin-bottom: 30px;
}

.course-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(0,0,0,0.05);
  padding-top: 20px;
  font-size: 14px;
  font-weight: 700;
  color: var(--txt);
}
.course-meta i {
  color: #ff0000;
  margin-right: 6px;
}

/* Format large pour la carte "MaintCare / Développement" */
.course-large {
  grid-column: span 2;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 0;
}
.course-large::after {
  inset: 0; /* Pas de bordure interne sur la grande carte */
  background: transparent;
}
.course-large-img {
  flex: 0 0 45%;
  height: 100%;
  position: relative;
}
.course-large-img img {
  width: 100%; height: 100%; object-fit: cover;
  border-top-left-radius: 24px; border-bottom-left-radius: 24px;
}
.course-large-content {
  padding: 40px 40px 40px 0;
}

@media(max-width: 1024px) {
  .course-grid { grid-template-columns: repeat(2, 1fr); }
  .course-large { grid-column: span 2; flex-direction: column; }
  .course-large-img { flex: none; height: 250px; width: 100%; }
  .course-large-img img { border-radius: 24px 24px 0 0; }
  .course-large-content { padding: 30px; }
  .academy-stats { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .stat-item:nth-child(2)::after { display: none; }
}
@media(max-width: 768px) {
  .course-grid { grid-template-columns: 1fr; }
  .course-large { grid-column: span 1; }
  .academy-stats { grid-template-columns: 1fr; }
  .stat-item::after { display: none; }
}
/* ══════════════════════════════════════
   PAGE "RECRUTEMENT" (CAREERS & JOB BOARD)
══════════════════════════════════════ */
.culture-section {
  padding: 100px 0;
  background: var(--blanc);
  position: relative;
  z-index: 10;
}

.culture-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 50px;
}

.culture-card {
  padding: 50px 40px;
  border-radius: 24px;
  background: var(--bg); /* Gris très clair */
  border: 1px solid rgba(0,0,0,0.02);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.culture-card:hover {
  background: var(--blanc);
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.06);
  border-color: rgba(204,0,0,0.1);
}

.culture-icon {
  font-size: 32px;
  color: var(--txt);
  margin-bottom: 25px;
  transition: color 0.3s ease, transform 0.4s ease;
}

.culture-card:hover .culture-icon {
  color: var(--rouge);
  transform: scale(1.1) rotate(5deg);
}

.culture-title {
  font-family: var(--f1);
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 15px;
  color: var(--txt);
}

.culture-desc {
  font-size: 15px;
  color: var(--txt2);
  line-height: 1.6;
}

/* ── Le Job Board Interactif ── */
.jobs-section {
  padding: 100px 0;
  background: var(--bg);
}

.job-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 50px;
}

.job-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 35px 45px;
  background: var(--blanc);
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.03);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 5px 15px rgba(0,0,0,0.02);
}

/* L'effet WOW : La ligne entière devient rouge au survol */
.job-row:hover {
  background: var(--rouge);
  transform: scale(1.02);
  box-shadow: 0 20px 40px var(--rouge-glow);
  border-color: var(--rouge);
}

.job-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.job-title {
  font-family: var(--f1);
  font-size: 24px;
  font-weight: 800;
  color: var(--txt);
  transition: color 0.3s ease;
}

.job-meta {
  display: flex;
  gap: 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--txt3);
  transition: color 0.3s ease;
}
.job-meta span { display: flex; align-items: center; gap: 6px; }

/* Inversion des couleurs du texte au survol (pour rester lisible sur fond rouge) */
.job-row:hover .job-title,
.job-row:hover .job-meta {
  color: white;
}

.job-action {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--txt);
  font-size: 18px;
  transition: all 0.4s ease;
}

.job-row:hover .job-action {
  background: white;
  color: var(--rouge);
  transform: translateX(10px);
}

@media(max-width: 900px) {
  .culture-grid { grid-template-columns: 1fr; }
  .job-row { flex-direction: column; align-items: flex-start; gap: 20px; padding: 25px; }
  .job-row:hover { transform: scale(1); }
  .job-action { align-self: flex-end; }
}
/* ══════════════════════════════════════
   PAGE "CONTACT" (BENTO GRID LIGHT MODE)
══════════════════════════════════════ */
.contact-bento-section {
  padding: 80px 0 150px 0;
  background: var(--bg); /* Fond gris très clair standard du site */
  position: relative;
  z-index: 10;
}

.bento-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto auto;
  gap: 24px;
}

/* La base des cartes Bento - CLAIR ET ÉPURÉ */
.bento-box {
  background: var(--blanc);
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 32px;
  padding: 50px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0,0,0,0.03);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.bento-box:hover {
  box-shadow: 0 25px 50px rgba(0,0,0,0.08);
  border-color: rgba(204, 0, 0, 0.15);
  transform: translateY(-5px);
}

/* ── Boîte 1 : Le Formulaire ── */
.bento-form {
  grid-row: span 2;
}
.bento-form h3 {
  font-family: var(--f1);
  font-size: 36px;
  font-weight: 800;
  color: var(--txt);
  margin-bottom: 10px;
}
.bento-form > p {
  color: var(--txt2);
  margin-bottom: 40px;
  font-size: 16px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}
.form-group.full { grid-column: span 2; }

.form-label {
  display: block; font-size: 12px; font-weight: 700;
  color: var(--txt2); margin-bottom: 10px;
  text-transform: uppercase; letter-spacing: 1px;
}

/* Inputs design Lumineux */
.form-input-light {
  width: 100%;
  padding: 18px 24px;
  background: var(--bg);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 16px;
  font-family: var(--f2);
  font-size: 15px;
  color: var(--txt);
  outline: none;
  transition: all 0.4s ease;
}
.form-input-light::placeholder { color: var(--txt3); }
.form-input-light:focus {
  background: var(--blanc);
  border-color: var(--rouge);
  box-shadow: 0 0 0 4px rgba(204,0,0,0.1);
}
textarea.form-input-light { height: 160px; resize: none; }

/* ── Boîte 2 : Infos Directes ── */
.bento-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}
.c-item-light {
  display: flex; align-items: center; gap: 20px;
  text-decoration: none; color: var(--txt);
  padding: 20px; border-radius: 20px;
  background: var(--bg);
  border: 1px solid rgba(0,0,0,0.03);
  transition: all 0.4s ease;
}
.c-item-light:hover {
  background: var(--rouge);
  border-color: var(--rouge);
  color: white;
  transform: translateX(-10px);
  box-shadow: 0 10px 30px var(--rouge-glow);
}
.c-icon-light {
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--blanc);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--rouge);
  transition: all 0.4s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.c-item-light:hover .c-icon-light { 
  background: rgba(255,255,255,0.2); 
  color: white; 
  box-shadow: none;
}
.c-text-light h4 { 
  font-size: 13px; color: var(--txt2); margin-bottom: 5px; 
  font-weight: 700; text-transform: uppercase; letter-spacing: 1px; 
  transition: color 0.4s ease;
}
.c-item-light:hover .c-text-light h4 { color: rgba(255,255,255,0.8); }
.c-text-light p { font-size: 18px; font-weight: 800; margin: 0; }

/* ── Boîte 3 : La Carte Interactive ── */
.bento-map {
  padding: 0;
  display: flex;
  align-items: flex-end;
  min-height: 280px;
}
.map-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.bento-map:hover .map-bg { transform: scale(1.08); }

.map-pin {
  position: absolute; top: 50%; left: 50%; width: 20px; height: 20px;
  background: var(--rouge); border-radius: 50%; transform: translate(-50%, -50%);
  box-shadow: 0 0 20px var(--rouge);
}
.map-pin::after {
  content: ''; position: absolute; inset: -15px; border: 2px solid var(--rouge); border-radius: 50%;
  animation: radarPulse 2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.map-label {
  position: relative; z-index: 2;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  width: 100%; padding: 25px;
  border-top: 1px solid rgba(0,0,0,0.05);
  display: flex; align-items: center; justify-content: space-between;
}
.map-label h4 { color: var(--txt); margin: 0; font-size: 18px; font-family: var(--f1); font-weight: 800;}
.map-label p { color: var(--txt2); margin: 5px 0 0 0; font-size: 14px; font-weight: 600;}

@media(max-width: 1024px) {
  .bento-grid { grid-template-columns: 1fr; }
  .bento-form { grid-row: auto; }
  .bento-map { min-height: 300px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-group.full { grid-column: span 1; }
}
/* ══════════════════════════════════════
   LAYOUT DE LECTURE DES ARTICLES 
══════════════════════════════════════ */
.article-view-section {
  padding: 80px 0 120px 0;
  background: var(--bg);
}

.article-read-wrapper {
  max-width: 840px;
  margin: 0 auto;
  background: var(--blanc);
  border-radius: 32px;
  padding: 60px;
  border: 1px solid rgba(0,0,0,0.04);
  box-shadow: 0 15px 45px rgba(0,0,0,0.02);
}

.article-meta-info {
  display: flex;
  gap: 24px;
  align-items: center;
  font-size: 14px;
  color: var(--txt2);
  margin-bottom: 30px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  padding-bottom: 20px;
}
.article-meta-info span i { color: var(--rouge); margin-right: 6px; }

.article-rich-text {
  font-family: var(--f2);
  font-size: 16px;
  color: var(--txt2);
  line-height: 1.8;
}

.article-rich-text h2 {
  font-family: var(--f1);
  font-size: 26px;
  font-weight: 800;
  color: var(--txt);
  margin: 45px 0 20px 0;
}

.article-rich-text p {
  margin-bottom: 24px;
}

.article-rich-text blockquote {
  border-left: 4px solid var(--rouge);
  padding: 10px 0 10px 30px;
  margin: 40px 0;
  font-family: var(--f1);
  font-style: italic;
  font-size: 20px;
  font-weight: 700;
  color: var(--txt);
  line-height: 1.5;
}

.article-rich-text .img-container {
  border-radius: 20px;
  overflow: hidden;
  margin: 40px 0;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.back-to-news {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--txt);
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 40px;
  transition: all 0.3s;
}
.back-to-news:hover { color: var(--rouge); transform: translateX(-5px); }

@media(max-width: 768px) {
  .article-read-wrapper { padding: 35px 25px; border-radius: 20px; }
  .article-meta-info { flex-wrap: wrap; gap: 12px; }
}