/* =====================================================
   RESET & BASE
===================================================== */

:root{
  /* Brand */
  --blue-brand: #4AA5FF;
  --blue-secondary: #1C2A40;
  --blue-deep: #0D1526;

  --gold-brand: #D3B36A;
  --gold-hover: #B8944E;
  --beige-soft: #F1E4C7;

  /* Backgrounds */
  --bg-main: #0A0F1C;     /* fond principal site / hero */
  --bg-mid: #111A2A;      /* sections informatives */
  --bg-soft: #1B2536;     /* sections plus “claires” ex: formulaires */
  --card-bg: #0F172A;     /* cartes */
  --border-soft: rgba(255,255,255,0.06);

  /* Text */
  --text-main: #FFFFFF;
  --text-soft: #BFC7D1;
  --text-muted: #90A4BD;

  /* Status (optionnel) */
  --success: #5BC77B;
  --warning: #FFCE73;
  --error: #FF6B6B;
}


*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body{
  background: var(--bg-main);
  color: var(--text-main);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
}

a{ color: inherit; text-decoration: none; }

.container{
  width: min(1200px, 90%);
  margin: 0 auto;
}


/* Container global */
.container {
  width: min(1200px, 90%);
  margin: 0 auto;
}

/* Liens */
a {
  text-decoration: none;
  color: inherit;
}

/* Boutons */
.btn{
  display: inline-block;
  padding: 12px 22px;
  border-radius: 50px;
  font-weight: 700;
  transition: 0.2s ease;
}

.btn-primary{
  background: var(--gold-brand);
  color: #000;
}
.btn-primary:hover{
  background: var(--gold-hover);
}

.btn-outline{
  border: 2px solid var(--gold-brand);
  color: var(--gold-brand);
  background: transparent;
}
.btn-outline:hover{
  background: var(--gold-brand);
  color: #000;
}


/* Animations reveal (facultatif) */
/* Apparition douce SANS utiliser transform */
.reveal-soft {
  opacity: 0;
  animation: fadeInSoft 0.6s ease forwards;
}

@keyframes fadeInSoft {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* =====================================================
   HEADER + MENU
===================================================== */

/* =========================
   HEADER / NAV - ENTREPRISES
   ========================= */

.header{
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  padding: 12px 0;
  background: rgba(10,15,28,0.9);
  backdrop-filter: blur(6px);
}


/* Conteneur header */
.header-container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Logo = image + texte sur la même ligne */
.logo{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.logo-img{
  height: 48px;
  width: auto;
  display: block;
}

/* Groupe texte du logo : sur 2 lignes "EUREKA" + "Mayotte" */
.logo-text-group{
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.logo-main{
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--blue-brand);          /* ✅ bleu EUREKA */
}


.logo-sub{
  font-size: 13px;
  font-weight: 600;
  color: var(--gold-brand);         /* ✅ doré Mayotte */
  margin-top: 2px;
}

/* NAV */
.navbar{ display: flex; align-items: center; }


.nav-list{
  list-style: none;
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-link{
  font-size: 16px;
  color: var(--text-main);
  opacity: 0.9;
  transition: 0.2s;
}
.nav-link:hover{ color: var(--gold-brand); opacity: 1; }
.nav-link.active{ color: var(--gold-brand); font-weight: 700; }

/* Toggle mobile */
/* Toggle mobile */
.nav-toggle{
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle-bar{
  width: 26px; height: 3px;
  background: var(--text-main);
  margin: 4px 0; border-radius: 2px;
}

/* RESPONSIVE MENU */
@media (max-width: 780px) {
  .nav-list {
    position: absolute;
    top: 74px;
    right: 0;
    background: #0e1528;
    flex-direction: column;
    padding: 20px;
    gap: 20px;
    width: 200px;
    display: none;
  }

  .nav-list.open {
    display: flex;
  }

  .nav-toggle {
    display: block;
  }
}

/* ===== HEADER MOBILE (même système que la page Candidats) ===== */

.nav-toggle {
  display: none;
}

.nav-toggle-btn {
  display: none;
  padding: 6px;
  cursor: pointer;
  z-index: 2000;
}

.nav-toggle-btn span {
  display: block;
  width: 24px;
  height: 3px;
  background: #ffffff;
  border-radius: 2px;
  margin: 4px 0;
}

/* Menu desktop */
.main-nav ul {
  list-style: none;
  display: flex;
  gap: 24px;
}

/* Menu mobile */
@media (max-width: 900px) {

  .nav-toggle-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .main-nav ul {
    position: absolute;
    top: 60px;
    right: 16px;
    background: #0e1528;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    display: none; /* hidden by default */
    z-index: 1500;
  }

  .nav-toggle:checked ~ .main-nav ul {
    display: flex;
  }
}


/* =====================================================
   HERO ENTREPRISES
===================================================== */

.hero-entreprises{
  background: var(--bg-main); /* ✅ Hero sombre */
  padding: 150px 0 80px;
}

.hero-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: center;
}

.hero-title{
  font-size: clamp(28px, 3.5vw, 48px);
  line-height: 1.2;
  margin-bottom: 14px;
  color: var(--text-main);
}

.hero-subtitle{
  font-size: clamp(15px, 1.5vw, 20px);
  color: var(--text-soft);
  margin-bottom: 22px;
}

.hero-badges {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  list-style: none;
}

.hero-badges li{
  background: rgba(255,255,255,0.08);
  color: var(--text-main);
}

.hero-visual {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Responsive Hero */
@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
}


/* ===============================
   SECTION - SERVICES ENTREPRISES
   =============================== */

.section-services{
  background: var(--bg-mid); /* ✅ pas trop sombre */
  padding: 70px 0;
}

.section-header{
  text-align: center;
  max-width: 820px;
  margin: 0 auto 36px;
}

.section-title {
  font-size: clamp(22px, 2.4vw, 32px);
  color: var(--text-main);
  margin-bottom: 18px;
  position: relative;
  display: inline-block;
}

/* Trait doré sous les titres */
.section-title::after {
  content: "";
  width: 60px;
  height: 3px;
  background: var(--gold-brand);  /* ton doré */
  display: block;
  margin: 10px auto 0;
  border-radius: 2px;
}


.section-intro{
  font-size: 16px;
  color: var(--text-soft);
}

.services-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 32px;
}

.service-card{
  background: var(--card-bg);          /* ✅ cartes */
  border: 1px solid var(--border-soft);
  padding: 22px;
  border-radius: 16px;
  transition: 0.25s ease;
}

.service-card:hover{
  transform: translateY(-5px);
  border-color: rgba(255,255,255,0.18);
}

.service-title{
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .2px;
  margin-bottom: 4px;
}

.service-text{
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.6;
}


.service-card{
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.service-card::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:100%;
  height:3px;
  background: linear-gradient(90deg, var(--blue-brand), var(--gold-brand));
  opacity: .9;
}


.service-card:hover{
  transform: translateY(-6px);
  border-color: rgba(211,179,106,0.55); /* doré */
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}

@media (max-width:1024px){
  .service-card{ padding: 18px; }
}
@media (max-width:640px){
  .service-card{ padding: 16px; }
}


/* RESPONSIVE */
@media (max-width: 1024px){
  .hero-grid{ grid-template-columns: 1fr; }
  .services-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px){
  .nav-toggle{ display: block; }

  .nav-list{
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--bg-deep);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 14px;
    min-width: 210px;
    display: none;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  }

  .nav-list.open{ display: flex; }
  .services-grid{ grid-template-columns: 1fr; }
}


@media (max-width: 640px){
  .services-grid{
    grid-template-columns: 1fr;
  }
}


/* ===============================
   SECTION - PROCESSUS
   =============================== */

.section-process{
  background: var(--bg-main);  /* sombre premium (ok car section courte) */
  padding: 70px 0;
}

.process-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 32px;
}

/* La carte entière */
.process-step {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  overflow: hidden;        /* pour que l'image suive les coins arrondis */
  padding: 0;              /* ✅ aucun padding = pas d'espace autour de l'image */
}



.process-step:hover{
  transform: translateY(-5px);
  border-color: rgba(211,179,106,0.55); /* doré léger */
}

/* Numéro */
.process-number{
  display: inline-flex;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  color: #000;
  background: var(--gold-brand);
  margin-bottom: 12px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
}

.process-step-title{
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--text-main);
}

.process-step-text{
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-soft);
}







/* ===============================
   HOVER GÉNÉRAL POUR LES CARTES
   (Services + Processus)
   =============================== */

.service-card,
.process-step {
  transition: transform 0.25s ease,
              box-shadow 0.25s ease,
              border-color 0.25s ease;
}

/* Animation au survol */
.service-card:hover,
.process-step:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  border-color: rgba(211, 179, 106, 0.55); /* doré */
}

/* Gros numéro en arrière-plan */
.process-content::before {
  content: attr(data-step);
  position: absolute;

  /* Positionnement bas droite à l’intérieur du padding */
  bottom: 0;
  right: 0;

  /* Taille watermark */
  font-size: 110px;
  font-weight: 900;
  line-height: 1;

  /* Couleur watermark */
  color: rgba(255, 255, 255, 0.10);

  /* IMPORTANT -> pas de transform qui déplace hors de la carte */
  transform: none;

  z-index: 0;
  pointer-events: none;
}

.process-step:hover .process-content::before {
  color: rgba(255, 255, 255, 0.16);
  transform: scale(1.04);
}

.process-step:hover::before {
  color: rgba(255, 255, 255, 0.12); /* un peu plus visible au survol */
}


/* Contenu de la carte au-dessus du chiffre */
.process-step-title,
.process-step-text {
  position: relative;
  z-index: 1;
}

/* Image dans les cartes du processus */
/* Effet zoom sur image dans les cartes du processus */
.process-img {
  overflow: hidden;        /* indispensable pour masquer le zoom */
  border-radius: 0;        /* l'arrondi est géré par la carte */
  width: 100%;
  height: 160px;
  display: block;
}

.process-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease; /* animation fluide */
  transform: scale(1);            /* état initial */
}

/* Zoom au survol de la carte */
.process-step:hover .process-img img {
  transform: scale(1.08);        /* zoom léger et élégant */
}


.process-content {
  padding: 22px;           /* le padding vient ICI */
  position: relative;
  z-index: 1;
}

.process-content:hover::before {
  color: rgba(255, 255, 255, 0.12);
  transform: scale(1.05);
}




/* RESPONSIVE */
@media (max-width: 1024px){
  .process-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px){
  .process-grid{
    grid-template-columns: 1fr;
  }
  .process-step{
    min-height: auto;
  }
}

/* ===============================
   SECTION - DÉPOSER UNE DEMANDE
   =============================== */

.section-demande{
  background: var(--bg-soft); /* plus clair que le hero et le process */
  padding: 70px 0;
}

.demande-form{
  max-width: 960px;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  padding: 24px 22px 26px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.demande-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 18px;
}

.form-group{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group-full{
  grid-column: 1 / -1;
}

.form-group label{
  font-size: 14px;
  color: var(--text-soft);
}

.required{
  color: var(--gold-brand);
  margin-left: 2px;
}

.form-group input,
.form-group textarea{
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(5, 10, 20, 0.8);
  color: var(--text-main);
  font-size: 14px;
  outline: none;
}

.form-group input::placeholder,
.form-group textarea::placeholder{
  color: var(--text-muted);
  font-size: 13px;
}

.form-group input:focus,
.form-group textarea:focus{
  border-color: var(--blue-brand);
  box-shadow: 0 0 0 1px rgba(74,165,255,0.4);
}

/* Bas du formulaire : note + bouton */
.demande-footer{
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.form-note{
  font-size: 13px;
  color: var(--text-muted);
}

.btn-submit{
  padding-inline: 28px;
}

/* Responsive */
@media (max-width: 900px){
  .demande-grid{
    grid-template-columns: 1fr;
  }
  .demande-form{
    padding: 20px 16px 22px;
  }
}

@media (max-width: 480px){
  .demande-footer{
    flex-direction: column;
    align-items: flex-start;
  }
  .btn-submit{
    width: 100%;
    text-align: center;
  }
}


/* ===========================
   FOOTER
   =========================== */

/* ===== Footer ===== */
.site-footer {
  background: var(--bg-main); /* sombre premium */
  color: #f5efe7;
  padding-top: 60px;
  padding-bottom: 20px;
  font-size: 0.95rem;
}


.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-logo {
  width: 120px;
  margin-bottom: 10px;
}
.footer-brand p {
  color: #ddd0c4;
  line-height: 1.6;
}
.footer-nav h3,
.footer-contact h3 {
  color: #f0cfa3;
  font-size: 1.05rem;
  margin-bottom: 10px;
}
.footer-nav ul,
.footer-contact ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-nav ul li,
.footer-contact ul li {
  margin: 6px 0;
}
.footer-nav a,
.footer-contact a {
  color: #f5efe7;
  text-decoration: none;
}
.footer-nav a:hover,
.footer-contact a:hover {
  color: #f0cfa3;
}

/* Réseaux dans le footer : texte clair */
.site-footer .social-links li a {
  color: #f0cfa3;
}
.site-footer .social-links li a:hover {
  color: #ffffff;
}

/* Ligne du bas */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.2);
  color: #d8cfc4;
  text-align: center;
  font-size: 0.9rem;
}
.footer-bottom a {
  color: #f0cfa3;
  text-decoration: none;
}
.footer-bottom a:hover {
  color: #fff;
}

.social-links li a {
  display: flex;
  align-items: center;
  gap: 6px;
}


.social-inline {
  display: flex;
  flex-direction: row; /* ← tu peux passer à row si tu veux */
  gap: 10px;
}

/* Taille fixe et cohérente pour les logos sociaux */
.social-icon {
  width: 22px;         /* Taille idéale */
  height: 22px;        /* Garde le ratio carré */
  object-fit: contain; /* Empêche la déformation */
  margin-right: 6px;   /* Petit espace entre l'icône et le texte */
  vertical-align: middle;
}

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

/* Grand écran */
@media (min-width: 1400px){
  .logo-img{ height: 56px; }
  .logo-main{ font-size: 20px; }
  .nav-link{ font-size: 17px; }
  .nav-list{ gap: 32px; }
}

/* Desktop standard */
@media (max-width: 1200px){
  .logo-img{ height: 46px; }
  .nav-list{ gap: 22px; }
}

/* Tablette */
@media (max-width: 900px){
  .header-container{
    gap: 10px;
  }
  .logo-img{ height: 42px; }
  .logo-main{ font-size: 17px; }
  .logo-sub{ font-size: 12px; }
  .nav-link{ font-size: 15px; }
}

/* Smartphone : menu burger */
@media (max-width: 720px){
  .nav-toggle{
    display: block;
  }

  .nav-list{
    position: absolute;
    top: 100%;
    right: 0;
    background: #0e1528;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 14px;
    min-width: 210px;

    display: none;          /* caché par défaut */
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  }

  /* Ouvert via JS (class .open) */
  .nav-list.open{
    display: flex;
  }
}

/* Petit smartphone */
@media (max-width: 420px){
  .logo-img{ height: 38px; }
  .logo-main{ font-size: 16px; }
  .logo-sub{ font-size: 11px; }
}