/* GENERAL */

body {
  font-family: Arial, Helvetica, sans-serif;
  }

.container-fluid {
  margin:0;
  padding: 0;
}

h1,h2,h3,h4,h5,h6 {
  font-weight: bold;
}


/* SECTION 1 */
.header-font {
  background: linear-gradient(to bottom, #9afcff, #0259cd);
  height: auto;
  padding-bottom: 30px;
}

.header {
  text-align: center;
}

.section h1 {
  margin-top: 100px;
  color: white;
  font-size: 25px;
}

.header .bold-header {
  font-weight: bold;
  color: #004aad;
}

.header p {
  font-size: 20px;
  color: white;
}

/* Logos alignés proprement */
.header-right {
  margin-top: 120px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.header-right img {
  width: 100px;
  height: auto;
}

/* Bouton vert */
.header .btn-success {
  font-size: 18px;
  padding: 10px 20px;
  border-radius: 8px;
}


/* SECTION 2 */
/* ===== SECTION 2 : Services ===== */
.section1{
  text-align:center;
  padding-top:20px;
  padding-bottom:50px;
}
.section1 h3{
  font-size:20px;
  color:#fff;
  margin-bottom:12px;
}
.section1 p{
  font-size:15px;
  color:#fff;
  margin-bottom:1rem;
}
.section1 .noir{ color:#000; }

/* Cartes */
.cadre{
  background:#4f91cd;
  border-radius:20px;
  display:flex;
  flex-direction:column;
  padding:20px;
  gap:12px;              /* espace entre les éléments internes */
  
}

.cadre img{
  width:80px; height:auto; margin:0 auto 12px;
}
.cadre1 {
  margin-top: 20px;
}

/* Boutons : texte bien blanc */
.cadre .btn{
  border-radius:20px;
  margin-top:auto;
  align-self:center;
  color:#fff !important;
}

/* Appel à l'action */
.appelaction1{
  background:#4f91cd;
  border-radius:20px;
}
.appelaction1 p{
  font-size:25px;
  color:#fff;
  margin-bottom:15px;
}

/* Mobile : cartes centrées et largeur confortable */
@media (max-width:575.98px){
  .section1 .col-12.d-flex{ justify-content:center; }
  .section1 .cadre{ max-width:360px; width:100%; }
}


/* SECTION 2 */

  :root{
    --step-bg: #ff6b4a;     /* couleur du badge */
    --step-size: 58px;      /* diamètre du badge desktop */
    --step-ring: 6px;       /* anneau blanc autour */
  }

  .section2 { background:#004aad; }
  .section2 h2 { color:#fff; margin-bottom:2rem; }

  .methode{
    position: relative;
    margin-top: calc(var(--step-size)/2); /* place pour le badge qui déborde */
    background:#fff;
    border-radius:20px;
    padding:16px 16px 24px;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    height:100%;
  }

  /* Badge rond centré */
  .methode::before{
    content: attr(data-step);
    position:absolute;
    left:50%;
    top:0;
    transform: translate(-50%,-50%);
    width:var(--step-size);
    height:var(--step-size);
    border-radius:50%;
    background:var(--step-bg);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    font-size:26px;
    line-height:1;
    border: var(--step-ring) solid #fff;
    box-shadow:0 6px 14px rgba(0,0,0,.18);
    z-index:2;
  }

  .methode h3{ font-size:1.05rem; margin-top:.25rem; }
  .methode p{ margin-bottom:0; }

  /* Mobile : badge un peu plus petit */
  @media (max-width: 767.98px){
    :root{ --step-size:46px; --step-ring:5px; }
    .methode::before{ font-size:22px; }
  }
  .section2 h3 {
    padding-top: 20px;
  }

  /* Fond bleu déjà utilisé pour la section 2 */
.section2{ background:#004aad; }
.section2 h2{ color:#fff; }

/* Cartes blanches arrondies + centrage */
.info-panel{
  background:#fff;
  border-radius:28px;        /* gros arrondi comme sur ta capture */
  padding:10px 24px 28px;
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}

.info-panel h3{
  font-weight:800;
  margin-bottom:.5rem;
}

.info-panel p{
  margin:0 0 .75rem;
  max-width:60ch;            /* confort de lecture */
}

/* Bouton orange en pilule */
.btn-cta{
  background:#ff8a4d;
  border:none;
  color:#fff;
  padding:.5rem 1.1rem;
  border-radius:999px;
  font-weight:600;
  box-shadow:0 6px 14px rgba(255,138,77,.35);
}
.btn-cta:hover{
  background:#ff7a32;
}

/* Fond section */


/* Grand panneau gris arrondi */
.impact-wrap{
  background:#e9ecef;           /* gris doux */
  border-radius:24px;
}

/* Colonne chiffres : effet « carte bleue décalée » */
.stats-shell{ position:relative; }
.stats-shell::before{
  content:"";
  position:absolute;
  left:-12px; top:12px;
  width:100%; height:100%;
  background:#dfe3ea;           /* ombre claire décalée */
  border-radius:24px;
  z-index:0;
}
.stats-card{
  position:relative; z-index:1;
  background:#004aad;           /* bleu foncé */
  color:#fff;
  border-radius:24px;
  padding:28px 20px;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:28px;
  height:100%;
}
.stat{ display:flex; flex-direction:column; gap:.25rem; }
.stat-number{
  font-size:2.6rem;             /* chiffre bien visible */
  line-height:1;
  font-weight:800;
  color:#ff8a4d;                /* orange */
}
.stat-label{
  font-weight:600;
}

/* Colonne texte */
.impact-text p{
  margin-bottom:1rem;
  color:#333;
  max-width:70ch;
  margin-left:auto; margin-right:auto;
}

/* Responsive : un peu plus d’air en mobile */
@media (max-width: 767.98px){
  .impact-wrap{ border-radius:18px; }
  .stats-shell::before{ left:-8px; top:8px; }
  .stat-number{ font-size:2.2rem; }
}
.couleurfond {
  background-color: white;
  padding-top: 24px;
  padding-bottom: 24px;
}

/* FAQ */

 .faq {
  background:#4c8ec0;
  padding-top: 20px;
  padding-bottom: 20px;
 }
    .faq-wrap {
      max-width: 920px;
      margin: 48px auto;
    }
    .faq-card {
      background:#e9ecef;
      border:0;
      border-radius: 18px;
      padding: 14px 22px;
      box-shadow: 0 8px 26px rgba(0,0,0,.08);
    }
    .accordion-button {
      border-radius: 999px !important;
      margin: 8px 0;
      background:#f8f9fa;
      border: none !important; /* enlève les contours */
      box-shadow: none !important; /* enlève l’effet au focus */
    }
    .accordion-button:not(.collapsed) {
      background:#ffffff;
      box-shadow: inset 0 -1px 0 rgba(0,0,0,.05);
    }
    .accordion-body {
      background:#ffffff;
      border-radius: 14px;
      margin: 0 0 8px 0;
      box-shadow: 0 4px 16px rgba(0,0,0,.04);
    }
    .cta {
      background:#0d6efd;
      color:#fff;
      border-radius: 999px;
      padding: 10px 18px;
      text-decoration:none;
      display:inline-block;
      margin-top:6px;
    }
    .cta:hover { opacity:.92; color:#fff; }

    /* SECTION BLOG */

/* SECTION FOOTER */

 footer.footer {
    font-size: 14px;
    color: #fff;
  }

  .footer-top {
    background-color: #005bbb; /* bleu principal */
    padding: 30px 0;
  }

  .footer h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
  }

  .footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .footer ul li {
    margin-bottom: 6px;
  }

  .footer ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
  }

  .footer ul li a:hover {
    text-decoration: underline;
  }

  .newsletter input[type="email"] {
    border-radius: 20px;
    border: none;
    padding: 8px 14px;
    width: 100%;
    margin-bottom: 8px;
    font-size: 14px;
  }

  .newsletter button {
    border: none;
    border-radius: 20px;
    padding: 8px 18px;
    background: #3c8dbc; /* bouton bleu clair */
    color: #fff;
    font-size: 14px;
    cursor: pointer;
  }

  .newsletter button:hover {
    background: #337ab7;
  }

  .footer-bottom {
    background-color: #2208a0; /* bandeau violet/bleu foncé */
    text-align: center;
    padding: 10px 0;
    font-size: 13px;
  }

  .footer-bottom a {
    color: #fff;
    text-decoration: none;
  }

  .footer-bottom a:hover {
    text-decoration: underline;
  }

  /* MENU HEADER */

    /* ===== BARRE & COULEURS ===== */
  .navbar-custom{
    background: linear-gradient(90deg,#9cf6ff,#b3f0ff);
    padding: 8px 20px; position: relative;
  }
  .navbar-custom .navbar-brand{
    background:#bdbdbd; border-radius:6px; padding:5px 14px;
    color:#333 !important; font-weight:600; font-size:16px;
  }

  /* Capsule (desktop) */
  @media (min-width:992px){
    .navbar-custom .navbar-nav{
      background:#fff; border-radius:999px; padding:6px 24px;
    }
  }

  /* Liens + hover */
  .navbar-custom .nav-link{
    color:#000 !important; font-size:15px; padding:6px 14px;
    border-radius:20px; transition:.2s;
  }
  .navbar-custom .nav-link:hover{ background:#ffd6e8; }
  .navbar-custom .nav-link.active{ font-weight:700; text-decoration:underline; }

  /* Bouton */
  .btn-ticket{
    background:#f97316; color:#fff !important; border-radius:6px;
    padding:6px 14px; font-weight:500;
  }
  .btn-ticket:hover{ background:#ea580c; color:#fff !important; }

  /* Hamburger visible */
  .navbar-custom .navbar-toggler{
    border:2px solid #222; border-radius:10px; padding:6px 8px; z-index:1040;
  }
  .navbar-custom .navbar-toggler-icon{
    width:1.3rem;height:1.3rem;
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,0.85)' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }

  /* ===== MEGA-MENU ===== */
  .dropdown-mega .dropdown-menu{
    border:0; border-radius:16px; padding:18px;
    box-shadow:0 18px 40px rgba(0,0,0,.15);
    min-width:min(1080px,96vw);
  }
  .mega-item{display:flex; gap:14px; align-items:flex-start; padding:12px; border-radius:12px; transition:.2s;}
  .mega-item:hover{background:#f7f7f9;}
  .mega-icon{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.07);}
  .mega-title{font-weight:700;margin:0 0 4px;}
  .mega-text{margin:0;color:#495057;font-size:14px;line-height:1.35;}

  /* Desktop : dropdown au survol + centré sous la barre */
  @media (min-width:992px){
    .dropdown-mega:hover>.dropdown-menu{display:block;}
    .dropdown-mega .dropdown-toggle::after{display:none;}
    .navbar-collapse{position:static;}
    .dropdown-mega .dropdown-menu{ left:50% !important; transform:translateX(-50%) !important; }
  }

  /* Mobile : menu rectangulaire plein + sous-menus largeur 100% */
  @media (max-width:991.98px){
    .navbar-collapse{
      position:absolute; left:0; right:0; top:100%;
      background:#fff; border-radius:0; padding:10px 12px; margin-top:8px;
      box-shadow:0 8px 20px rgba(0,0,0,.08); z-index:1030;
    }
    .navbar-nav{background:transparent;border-radius:0;padding:0;}
    .navbar-nav .nav-link{padding:10px 6px;border-radius:8px;}
    .navbar-nav .nav-link:hover{background:#ffd6e8;}
    .dropdown-mega .dropdown-menu{
      position:static; left:auto !important; transform:none !important;
      width:100%; min-width:100%; border-radius:12px; margin-top:.5rem;
    }
  }

  /* CORPS DES PAGES */

  /* --- Section 1 (Hero) --- */
.bug-prestashop {
  background: linear-gradient(to bottom, #7bd2f6, #0054b4);
}
.bug-prestashop .content-texte {
  max-width: 600px;
}
.bug-prestashop h1 {
  font-size: 33px;
 
}
.bug-prestashop h2 {
  font-size: 20px;
  padding-bottom: 20px;
}
.accordion-button {
  font-size: 17px;
   font-weight: bold;
}
.form-bug {
  max-width: 600px;
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
.form-control,
.form-select,
textarea {
  border: 1px solid #ddd;
  transition: all 0.2s ease;
}
.form-control:focus,
.form-select:focus,
textarea:focus {
  border-color: #ff7b00;
  box-shadow: 0 0 0 0.2rem rgba(255,123,0,0.25);
}
.btn-orange {
  background-color: #ff7b00;
  border-radius: 30px;
}
.btn-orange:hover {
  background-color: #e56f00;
}

/* --- Section 2 --- */
.bug-prestashop-section2 img {
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* --- Section 3 --- */
.bug-prestashop-section3 {
  background-color: #2200aa;
}
.section3-image {
  min-height: 350px;
  width: 100%;
  max-width: 500px;
}

/* --- Section 4 --- */
.section4-image {
  background-color: #2200aa !important;
  min-height: 350px;
  width: 100%;
  max-width: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
}

/* --- Section 5 --- */
.bug-prestashop-section5 {
  background-color: #4a90e2;
}
.cta-text {
  font-size: 1.6rem;
  line-height: 1.5;
}