/* ============================= */
/*            BILAN            */
/* ============================= */

/* ========== SECTION BILAN - INTRO ========== */
.bilan-page {
  font-family: 'Segoe UI', sans-serif;
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem 1rem;
  color: #333;
  background-color: transparent;
}

.bilan-intro {
  background: linear-gradient(to right, #2c3e50, #3498db);
  color: white;
  text-align: center;
  padding: 2rem 1rem;
  border-radius: 12px;
  animation: fadeInUp 1s ease-out;
}

.bilan-intro h1 {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
}

.bilan-intro p {
  font-size: 1.2rem;
  line-height: 1.8;
  max-width: 800px;
  margin: auto;
}

.bilan-objectifs {
  text-align: center;
  padding: 4rem 2rem;
  background-color: #ffffff;
  border-radius: 12px;
  margin-top: 2rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.bilan-objectifs h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
  color: #2c3e50;
}

/* ========== Important ========== */
.accordion-section {
  width: 96%;
  max-width: 1000px;
  margin: 2rem auto;
  padding: 2rem 0 3rem 0;
}
.accordion-section h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2.2rem;
  color: #2c3e50;
}
.accordion-item {
  margin-bottom: 1.3rem;
  border-radius: 12px;
}

.accordion-toggle::before {
  content: "▼";
  margin-right: 10px;
  color: #3498db;
}

.accordion-item.active .accordion-toggle::before {
  content: "▲";
}

.accordion-toggle {
  width: 100%;
  text-align: left;
  padding: 1.1rem 1.5rem;
  background: #ffffff;
  border: none;
  font-size: 1.25rem;
  font-weight: 700;
  color: #2c3e50;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  border-radius: 8px;
  transition: 
    background 0.25s, 
    color 0.25s, 
    transform 0.18s cubic-bezier(.45,1.9,.47,.99);
  box-shadow: none;
  outline: none;
  cursor: pointer;
}

.accordion-toggle .titre-accordeon {
  color: #2471a3;
  font-weight: 700;
}

.accordion-item.active .accordion-toggle {
  background: #f4faff;
  color: #2c3e50;
  transform: none;
}
.accordion-toggle:hover {
  background: #f4faff;
  color: #217dbb;
  transform: scale(1.03);
  z-index: 2;
}

.accordion-content {
  display: none;
  background: #f4faff;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 4px 18px 0 rgba(44,62,80,0.04);
  padding: 1.5rem 2rem 2rem 2rem;
  animation: fadeIn 0.5s;
  margin-top: -4px;
}
.accordion-item.active .accordion-content {
  display: block;
  background: #f4faff;
}
.accordion-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}
.illustration {
  display: block;
  margin: 0 auto 2rem auto;
  width: 400px;
  max-width: 90%;
  border-radius: 24px;
  box-shadow: 0 6px 24px rgba(44, 62, 80, 0.10), 0 1.5px 3px rgba(44,62,80,0.08);
  transition: box-shadow 0.4s, filter 0.4s;
}
.accordion-content p {
  font-size: 1.15rem;
  color: #333;
  margin: 0;
  line-height: 1.7;
}
.accordion-content i {
  margin-right: 0.7rem;
  color: #3498db;
  font-size: 1.2em;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-8px);}
  to   { opacity: 1; transform: translateY(0);}
}

/* ========== SECTION BILAN - PROCESSUS ========== */
.bilan-process {
  background-color: #f7f9fa;
  padding: clamp(3rem, 5vw, 5rem) 0;
}

.bilan-process .section-title {
  text-align: center;
  font-size: clamp(2.2rem, 1.6rem + 1.4vw, 2.6rem);
  margin-bottom: 3rem;
  color: var(--bleu, #2c3e50);
  font-weight: 700;
}

/* élargit seulement cette section, sans toucher aux autres .container */
.bilan-process .container {
  width: min(96%, 1280px);
  margin: 0 auto;
}

/* Grille large : 3 blocs en haut / 2 blocs en bas */
.process-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(1.25rem, 2vw, 2rem);
}

/* Cartes */
.process-step {
  position: relative;
  background: #ffffff;
  border-left: 6px solid transparent;   /* dégradé sur la bordure gauche */
  border-image: linear-gradient(180deg, var(--bleu-clair), #8fd3fe) 1;
  border-radius: 14px;
  padding: clamp(1.25rem, 2.2vw, 2rem);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
  outline: 1px solid rgba(44, 62, 80, 0.06);
  min-height: 320px;                    /* cartes visuellement équilibrées */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  will-change: transform;
}

.process-step h3 {
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  color: var(--bleu, #2c3e50);
  margin: 0 0 0.8rem;
  font-weight: 700;
  line-height: 1.4;
}

.process-step p {
  font-size: 1rem;
  color: #3f3f3f;
  line-height: 1.85;
}

/* Animation optionnelle si tu ajoutes .fade-up dans le HTML */
.fade-up { opacity: 0; transform: translateY(20px); transition: all 0.6s ease-out; }
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* Mise en page desktop : 3 cartes (2 colonnes chacune) puis 2 larges (3 colonnes) */
.process-step:nth-child(1),
.process-step:nth-child(2),
.process-step:nth-child(3) { grid-column: span 2; }

.process-step:nth-child(4),
.process-step:nth-child(5) { grid-column: span 3; }

/* ===== Responsive ===== */

/* Laptop / tablettes paysage : 2 colonnes fluides */
@media (max-width: 1200px) {
  .process-grid { grid-template-columns: repeat(2, minmax(280px, 1fr)); }
  .process-step { grid-column: auto !important; min-height: initial; }
}

/* Mobile : 1 colonne */
@media (max-width: 680px) {
  .bilan-process .container { width: min(94%, 640px); }
  .process-grid { grid-template-columns: 1fr; }
}


/* ========== SECTION PRESTATIONS ========== */
.bilan-prestations {
  padding: 4rem 2rem;
  background-color: #eaf2f8;
  border-radius: 12px;
  margin-top: 2rem;
  animation: fadeInUp 1.4s ease-out;
  text-align: center;
}

.bilan-prestations h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: #2c3e50;
}

.liste-prestations {
  list-style: none;
  padding: 0;
  max-width: 800px;
  margin: auto;
  text-align: left;
}

.liste-prestations li {
  font-size: 1.1rem;
  margin-bottom: 1.2rem;
  position: relative;
  padding-left: 2rem;
  line-height: 1.6;
}

.liste-prestations li::before {
  content: "▸";
  color: #2980b9;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1.3rem;
}

.bilan-lecture {
  text-align: center;
  padding: 4rem 2rem;
  background-color: #ffffff;
  border-radius: 12px;
  margin-top: 2rem;
  animation: fadeInUp 1.6s ease-out;
}

.bilan-lecture h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: #2c3e50;
}

.bilan-lecture p {
  font-size: 1.2rem;
  line-height: 1.8;
  max-width: 850px;
  margin: auto;
}

@media (max-width: 650px) {
  .accordion-section { padding: 1.1rem 0.1rem; }
  .accordion-content { padding: 1rem 0.5rem 1.3rem 0.5rem;}
  .illustration { max-width: 100%; }
  .accordion-toggle { font-size: 1rem;}
}

/* ===== SECTION CONSEILS BILAN COMPTABLE ===== */

.conseils-bilan .section-title {
  text-align: center;
  font-size: 2.2rem;
  margin-bottom: 3rem;
  color: var(--bleu);
  font-weight: 700;
}

.grid-conseils {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}

.conseil-bloc {
  background-color: #ffffff;
  border-left: 5px solid var(--bleu-clair);
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
}

.conseil-bloc h3 {
  font-size: 1.2rem;
  color: var(--bleu);
  font-weight: 700;
  margin-bottom: 1rem;
}

.conseil-bloc p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: #333;
}


.section-conseils-bilan {
  background-color: #ffffff;
  padding: 4rem 0;
}

.section-conseils-bilan .section-title {
  text-align: center;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--bleu);
  margin-bottom: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}

.conseils-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}

.conseil-item {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  padding: 1.5rem 1.8rem;
  border-radius: 1rem;
  background-color: #f9f9f9;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.conseil-item .icone {
  font-size: 2rem;
  flex-shrink: 0;
  margin-top: 0.4rem;
}

.conseil-item .texte h3 {
  font-size: 1.2rem;
  color: var(--bleu);
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.conseil-item .texte p {
  font-size: 1.05rem;
  color: #333;
  line-height: 1.6;
}