/* ============================= */
/*        MISSION-GESTION        */
/* ============================= */

/* ─────────────────────────────────────────────── */
/* 0) GÉNÉRAL / BASE                               */
/* ─────────────────────────────────────────────── */
.section { padding: 4rem 2rem; background-color: #ffffff; }
.section:nth-child(even) { background-color: #f7f9fa; }

.container { max-width: 1100px; margin: auto; }

.titre-section {
  font-size: 2.5rem;
  text-align: center;
  color: var(--bleu, #2c3e50);
  margin-bottom: 1.5rem;
}

/* ─────────────────────────────────────────────── */
/* 1) INTRO MISSION                                */
/* ─────────────────────────────────────────────── */
.intro-mission { background-color: #f9fbfd; padding: 5rem 2rem 4rem; text-align: center; }
.titre-intro { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.icone-titre { width: 50px; height: 50px; object-fit: contain; }
.sous-titre { font-size: 1.2rem; color: #666; margin-bottom: 1.5rem; }

/* ─────────────────────────────────────────────── */
/* 2) POURQUOI LA GESTION COMPTABLE… (ACCORDÉONS)  */
/*    .utilite-mission                              */
/* ─────────────────────────────────────────────── */

.utilite-mission {
  background-color: #f7f9fa;
  padding: 4rem 2rem;
}
.utilite-mission .titre-section {
  text-align: center;
  font-size: 2rem;
  color: var(--bleu, #2c3e50);
  margin-bottom: 3rem;
}

/* Grille des cartes */
.utilite-mission .avantages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1rem;
  justify-content: center;
  align-items: start;
}

/* Carte (le script attend .accordion-item) */
.utilite-mission .accordion-item {
  background-color: #fff;
  padding: 2rem .7rem;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,.06);
  cursor: pointer;
  transition: background-color .25s ease, box-shadow .25s ease;
  /* apparition au scroll (le JS ajoute .visible) */
  opacity: 0;
  transform: translateY(20px);
}
.utilite-mission .accordion-item.visible {
  opacity: 1;
  transform: translateY(0);
}
.utilite-mission .accordion-item:hover {
  background-color: #f2f8ff;
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

/* En-tête cliquable (le JS écoute .accordion-toggle) */
.utilite-mission .accordion-toggle {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.utilite-mission .emoji { font-size: 2rem; margin-bottom: .8rem; }
.utilite-mission .arrow { margin-left: auto; font-size: 1.2rem; transition: transform .3s ease; }

/* Contenu déroulant (le JS pose .active sur .accordion-item) */
.utilite-mission .accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, padding-top .2s ease;
  will-change: max-height;
  text-align: left;
  padding: 0 .6rem;
}
.utilite-mission .accordion-item.active .accordion-content {
  max-height: 1200px;   /* large pour afficher tout le texte */
  padding-top: .6rem;
}

/* État “ouvert” + rotation flèche */
.utilite-mission .accordion-item.active {
  background-color: #eaf6ff;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
.utilite-mission .accordion-item.active .arrow {
  transform: rotate(180deg);
}

/* Texte dans les cards */
.utilite-mission .accordion-item p {
  font-size: 1rem;
  color: #444;
  line-height: 1.6;
}

/* ─────────────────────────────────────────────── */
/* 3) COMMENT ÇA FONCTIONNE (ÉTAPES)               */
/* ─────────────────────────────────────────────── */
.comment-ca-fonctionne { background-color: #f7f9fa; padding: 4rem 0; animation-delay: .5s !important;}

.etapes-grid { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; margin-bottom: 3rem; }
.etapes-grid.bas { justify-content: center; gap: 2rem; }

.etape {
  background-color: #ffffff;
  border-left: 5px solid var(--bleu-clair);
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  border-radius: 10px;
  padding: 2rem;
  width: calc(33.333% - 1.5rem);

  opacity: 0;
  transform: translateY(40px);
}
.etapes-grid.bas .etape { width: calc(50% - 1rem); }

.etape h3 { font-size: 1.2rem; color: #2c3e50; margin-bottom: 1rem; }
.etape p { font-size: 1rem; color: #444; line-height: 1.8; }
.etape.visible { animation: fade-in 1s ease forwards; }
@keyframes fade-in { to { opacity: 1; transform: translateY(0); } }

/* ─────────────────────────────────────────────── */
/*  SECTION — Nos prestations en gestion comptable */
/* ─────────────────────────────────────────────── */

 .gestion-comptable-section{
   background: #eaf6ff;                 /* bleu très clair */
   max-width: 1200px;
   margin: 2rem auto;
   padding: 3rem 2rem;
   border-radius: 18px;
   box-shadow: 0 6px 24px rgba(0,0,0,.06);
   /* PAS d'animation */
 }

 .gestion-comptable-section.visible{      /* neutre si le JS ajoute .visible */
   opacity: 1;
   transform: none;
 }

 .gestion-comptable-section .titre-section{
   text-align: center;
   font-size: 2.4rem;
   font-weight: 800;
   color: var(--bleu, #2c3e50);
   margin-bottom: 2.25rem;
 }

 /* Liste à chevrons */
 .gestion-comptable-section .liste-prestations{
   list-style: none;
   padding: 0 1rem;
   max-width: 1000px;
   margin: 0 auto;
   text-align: left;
 }
 .gestion-comptable-section .liste-prestations li{
   position: relative;
   padding-left: 2.2rem;
   margin-bottom: 1.15rem;
   line-height: 1.7;
   font-size: 1.1rem;
   color: #1f2d3d;
 }
 .gestion-comptable-section .liste-prestations li::before{
   content: "▸";
   position: absolute;
   left: .35rem;
   top: 0;
   font-size: 1.25rem;
   color: var(--bleu-clair, #3498db);
   font-weight: 700;
 }

 .gestion-comptable-section .liste-prestations strong{
   color: #243646;
   font-weight: 700;
 }

 @media (max-width: 640px){
   .gestion-comptable-section{ padding: 2.4rem 1.2rem; border-radius: 14px; }
   .gestion-comptable-section .titre-section{ font-size: 2rem; }
   .gestion-comptable-section .liste-prestations li{ font-size: 1.02rem; }
 }

/* ───────────────────────────────────────────────
   5) CHECKLIST  → style cartes (comme image 2)
   ─────────────────────────────────────────────── */
.checklist-section{
  background:#f8f9fa;
  padding:4rem 2rem;
}

.checklist-section .titre-section{
  text-align:center;
  color:var(--bleu);
  font-size:2rem;
  margin-bottom:2.5rem;
}

/* Liste en grille verticale de cartes */
.checklist-amelioree{
  list-style:none;
  padding-left:0;
  max-width:1000px;
  margin:0 auto;
  display:grid;
  gap:1.5rem;
}

/* Carte */
.checklist-amelioree li{
  display:flex;
  align-items:flex-start;
  background:#fff;
  padding:1.5rem;
  border-radius:1rem;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
  transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease;
  border-left:none;                 /* supprime le liseré bleu de l’ancienne version */
}

/* Icône à gauche */
.checklist-amelioree .emoji{
  font-size:2.2rem;
  margin-right:1rem;
  margin-top:.2rem;
  flex-shrink:0;
}

/* Titre + contenu dans la carte */
.checklist-amelioree li p{
  margin:0;
  font-size:1rem;
  line-height:1.6;
}

/* Si tu as un <strong> au début de l’item, on l’utilise comme “titre” */
.checklist-amelioree li strong:first-of-type{
  display:inline-block;
  color:var(--bleu-clair);
  font-size:1.2rem;
  margin-bottom:.35rem;
}

/* Note en bas */
.note-info{
  margin-top:2rem;
  text-align:center;
  font-style:italic;
  font-size:1rem;
  color:#444;
  max-width:700px;
  margin-left:auto;
  margin-right:auto;
}


/* ─────────────────────────────────────────────── */
/* 6) RESPONSIVE                                   */
/* ─────────────────────────────────────────────── */
@media screen and (max-width: 768px) {
  .etapes-grid { flex-direction: column; }
  .etape, .etapes-grid.bas .etape { width: 100%; }
  .section { padding: 3rem 1rem; }
  .chapeau { font-size: 1rem; }
  .titre-section { font-size: 2.2rem; }
  .sous-titre { font-size: 1rem; }
  .icone-titre { width: 40px; height: 40px; }
}