/* ============================= */
/*     MISSION-CONSOLIDATION     */
/* ============================= */

/* ──────────────────────────────────────────────────────────────── */
/* SECTION 1 — Introduction (bloc hero du haut)                    */
/* ──────────────────────────────────────────────────────────────── */
.section-consolidation-intro {
  padding: 4rem 1rem;
  background-color: var(--gris-fond);
  color: var(--bleu);
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}
.section-consolidation-intro.visible {
  opacity: 1;
  transform: translateY(0);
}
.section-consolidation-intro h1 {
  font-size: 2rem;
  color: var(--bleu-clair);
  margin-bottom: 2rem;
  text-align: center;
}
.section-consolidation-intro .intro-lead {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
  text-align: center;
  color: #333;
}
.section-consolidation-intro p {
  max-width: 800px;
  margin: 0 auto 1.5rem auto;
  font-size: 1rem;
  line-height: 1.8;
  color: #444;
}

/* ──────────────────────────────────────────────────────────────── */
/* SECTION 2 — Pourquoi la consolidation ?                         */
/* ──────────────────────────────────────────────────────────────── */

/* Titres */
.consolidation-essentiel .section-title{
  text-align:center;
  font-size:2.3rem;
  font-weight:800;
  color:var(--bleu-clair);
  margin-bottom:3rem;
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  letter-spacing:.3px;
}

/* (Conservé pour la section 3 si tu l'as ici) */
.consolidation-process .section-title{
  text-align:center;
  font-size:2.4rem;
  font-weight:800;
  color:var(--bleu-clair);
  margin-bottom:3.5rem;
  display:inline-block;
  padding-bottom:.5rem;
  border-bottom:2px solid var(--bleu-clair);
}

/* Conteneur de la section 2 */
.consolidation-essentiel {
  background-color: #f2f2f2;
  padding: 4rem 0;
}

/* Liste verticale des blocs */
.importance-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 1000px;
  margin: auto;
}

/* Cartes accordéon (état initial : cachées jusqu'à .visible) */
.accordion-item.expander{
  background: #ffffff;
  border-left: 6px solid var(--bleu-clair);
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.07);
  overflow: hidden;
  cursor: pointer;

  opacity:0;
  transform:translateY(30px);
  transition:opacity .6s ease-out, transform .6s ease-out, box-shadow .25s ease;
}

/* Apparition au scroll (ton JS ajoute .visible) */
.accordion-item.expander.visible{ 
  opacity:1; 
  transform:translateY(0); 
}

/* Neutralise un éventuel 2e système .fade-up pour éviter la double anim */
.accordion-item.expander.fade-up{ opacity:0; transform:translateY(30px); }
.accordion-item.expander.fade-up.fade-visible{ opacity:1; transform:translateY(0); }

/* Header cliquable */
.accordion-item.expander .accordion-toggle {
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  font-weight: 600;
  font-size: 1.1rem;
  background-color: #ffffff;
  transition: background-color 0.25s ease;
}
.accordion-item.expander .accordion-toggle:hover {
  background-color: var(--bleu-glacier);
}

/* Titre interne dans le header (au cas où) */
.accordion-item.expander .accordion-toggle h3{
  margin:0;
  font-size:1.15rem;
  color:#2c3e50;
}

/* Flèche */
.accordion-item.expander .arrow {
  font-size: 1.4rem;
  margin-left: auto;
  transition: transform 0.3s ease;
}
.accordion-item.expander.active .arrow { transform: rotate(180deg); }

/* Contenu déroulant (fermé par défaut, ouvert quand .active est posé par le JS) */
.accordion-item.expander .accordion-content.content {
  display: none;
  padding: 0 2rem 2rem;
  font-size: 1rem;
  line-height: 1.6;
  background:#fff;
}
.accordion-item.expander.active .accordion-content.content { display: block; }

/* (Compatibilité si d’autres pages posent .expanded) */
.accordion-item.expander.expanded .accordion-content.content { display: block; }
.accordion-item.expander.expanded .arrow { transform: rotate(180deg); }


/* ──────────────────────────────────────────────────────────────── */
/* SECTION 3 — Processus de consolidation (bilan-process)          */
/* ──────────────────────────────────────────────────────────────── */

.bilan-process {
  background-color: #f9f9f9;
  padding: 4rem 0;
}

.bilan-process .section-title{
  font-weight: 800;
  font-size: clamp(2rem, 1.2rem + 2vw, 2.8rem);
  line-height: 1.3;
  letter-spacing: .5px;
  color: var(--bleu-clair);
  text-align: center;
  margin-bottom: 3rem;
  text-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* Grille des cartes */
.bilan-process .process-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
}

/* Cartes visibles par défaut (pas de dépendance à .visible) */
.bilan-process .process-step {
  flex: 1 1 320px;
  max-width: 420px;
  background-color: #fff;
  border-left: 5px solid var(--bleu-clair);
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  transition: transform .25s ease, box-shadow .25s ease;
  /* visibles par défaut */
  opacity: 1;
  transform: none;
}

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

.bilan-process .process-step p {
  font-size: 1rem;
  color: #333;
  line-height: 1.65;
}

/* Optionnel : si un jour tu ajoutes .scroll-section à la section,
   on garde une entrée douce sans jamais masquer complètement */
.bilan-process.visible .process-step {
  opacity: 1;
  transform: none;
}

/* (Tolérance) Si tu utilises .fade-up/.fade-visible sur les cartes,
   on active une légère translation sans jamais les rendre invisibles */
.bilan-process .process-step.fade-up { transform: translateY(10px); opacity: 1; }
.bilan-process .process-step.fade-up.fade-visible { transform: translateY(0); }

/* ──────────────────────────────────────────────────────────────── */
/* SECTION 4 — Prestations de consolidation (style carte bleutée)  */
/* ──────────────────────────────────────────────────────────────── */

.prestations-consolidation{
  background: #eaf6ff;                  /* fond bleu très clair */
  padding: 4rem 2rem;
  border-radius: 18px;
  max-width: 1200px;
  margin: 2rem auto;
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
  text-align: center;
}

.prestations-consolidation .section-title{
  color: var(--bleu, #2c3e50);
  font-size: 2.3rem;
  font-weight: 800;
  margin-bottom: 2.25rem;
}

/* Liste alignée à gauche, avec chevrons */
.prestations-consolidation .liste-prestations{
  list-style: none;
  padding: 0 1rem;
  max-width: 1000px;
  margin: 0 auto;
  text-align: left;
}

/* Chaque ligne : chevron à gauche + emoji (ton HTML existant) + texte */
.prestations-consolidation .liste-prestations li{
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .85rem;                          /* espace entre l’emoji et le texte */
  padding-left: 1.6rem;                 /* place pour le chevron */
  margin-bottom: 1.6rem;
  line-height: 1.7;
  font-size: 1.1rem;
  color: #1f2d3d;
}

.prestations-consolidation .liste-prestations li::before{
  content: "▸";
  position: absolute;
  left: 0;
  top: .15rem;
  font-size: 1.25rem;
  color: var(--bleu-clair, #3498db);
  font-weight: 700;
}

/* Emoji à gauche (déjà présent dans ton HTML) */
.prestations-consolidation .liste-prestations .icone{
  font-size: 1.6rem;
  margin-top: .15rem;                   /* meilleur alignement vertical */
  color: var(--bleu-clair, #3498db);
  flex-shrink: 0;
}

/* Met le texte sur toute la largeur restante (si tu as un <div> autour du texte) */
.prestations-consolidation .liste-prestations li > div{
  flex: 1;
}

.prestations-consolidation .liste-prestations strong{
  font-weight: 700;
  color: #243646;
}

/* Responsive doux */
@media (max-width: 640px){
  .prestations-consolidation{ padding: 3rem 1.2rem; border-radius: 14px; }
  .prestations-consolidation .section-title{ font-size: 2rem; }
  .prestations-consolidation .liste-prestations li{ font-size: 1.02rem; }
}

/* SECTION 5 — Conseils (cartes propres avec emoji à gauche) */
.conseils-consolidation {
  background-color: #f8fcff;
  padding: 4rem 1rem;
  color: #2c3e50;
  text-align: center;
}
.conseils-consolidation .titre-section {
  font-size: 2.3rem;
  font-weight: 700;
  margin-bottom: 3rem;
  color: #3498db;
}

/* Liste -> grille verticale de cartes */
.liste-conseils{
  list-style: none;
  padding: 0;
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  gap: 1.5rem;
  text-align: left;
}

/* Chaque carte = grille 2 colonnes : [emoji] [contenu] */
.liste-conseils li{
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  column-gap: 1rem;

  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  padding: 1.5rem;
  line-height: 1.7;
  font-size: 1.05rem;
}

/* Emoji à gauche */
.liste-conseils li .emoji{
  grid-column: 1;
  font-size: 1.8rem;
  line-height: 1;
  margin: 0;
  align-self: start;
  flex-shrink: 0;
}

/* Tout le texte dans un SEUL conteneur en colonne 2 */
.liste-conseils li .conseil-content{
  grid-column: 2;
}

/* Petites marges internes dans le texte */
.liste-conseils li .conseil-content p{ margin: 0 0 .5rem; }
.liste-conseils li .conseil-content p:last-child{ margin: 0; }

/* Emphases */
.liste-conseils .important{ color:#e74c3c; font-weight:700; }
.liste-conseils .norme{ font-weight:700; color:#2c3e50; padding:0 .3rem; border-radius:4px; }

@media (max-width: 680px){
  .liste-conseils li{ font-size: 1rem; padding: 1.25rem; }
  .liste-conseils li .emoji{ font-size: 1.6rem; }
}


/* ──────────────────────────────────────────────────────────────── */
/* RESPONSIVE règles mineures                                       */
/* ──────────────────────────────────────────────────────────────── */
@media screen and (max-width: 768px) {
  .accordion-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .accordion-header .arrow { align-self: flex-end; }
}