/* ============================= */
/*     AUDIT LEGAL & SOCIAL      */
/* ============================= */

.section-audit-definition {
  background-color: #ffffff;
  padding: 4rem 2rem;
}

.section-audit-definition .section-title {
  text-align: center;
  color: var(--bleu);
  font-size: 2.2rem;
  margin-bottom: 3rem;
}

.audit-block {
  background-color: var(--gris-fond);
  padding: 2rem;
  border-radius: 1rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.audit-block h3 {
  color: var(--bleu-clair);
  margin-bottom: 1rem;
}

.audit-comparatif {
  margin-top: 1rem;
}

.audit-comparatif h3 {
  text-align: center;
  margin-bottom: 1rem;
  color: var(--bleu);
}

.audit-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0.5rem;
  overflow: hidden;
}

.audit-table th,
.audit-table td {
  padding: 1rem;
  text-align: left;
  background-color: var(--blanc);
  border-bottom: 1px solid #e0e0e0;
  vertical-align: top;
}

.audit-table th:first-child,
.audit-table td:first-child {
  border-top-left-radius: 0.5rem;
}

.audit-table th:last-child,
.audit-table td:last-child {
  border-top-right-radius: 0.5rem;
}

.audit-table th {
  background-color: var(--bleu-clair);
  color: white;
  font-weight: 600;
}

.audit-table td.separator,
.audit-table th.separator {
  width: 1px;
  background-color: #cccccc;
  padding: 0;
}

.section-importance {
  background-color: #f8f9fa;
  padding: 4rem 2rem;
}

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

.importance-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: 0 1rem;
}

.accordion-item {
  width: 100%;
  max-width: 900px;
  min-height: 80px;
  background: white;
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
  cursor: pointer;
  overflow: hidden;
  border-left: 6px solid var(--bleu-clair);
  opacity: 0;
  transform: translateY(20px);
  margin-bottom: 1rem;
}

.accordion-item.visible {
  opacity: 1;
  transform: translateY(0);
}

.accordion-item:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  background-color: #f8f9fa;
}

.accordion-toggle {
  padding: 1.8rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 1.1rem;
  background-color: transparent;
  transition: all 0.3s ease;
  border: none;
  width: 100%;
  text-align: left;
  min-height: 80px;
  box-sizing: border-box;
}

.accordion-toggle h3 {
  margin: 0;
  color: var(--bleu);
  transition: color 0.3s ease;
}

.accordion-item:hover .accordion-toggle h3 {
  color: var(--bleu-clair);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-in-out, padding 0.3s ease-in-out;
  padding: 0 2rem;
  font-size: 1rem;
  line-height: 1.6;
  opacity: 0;
}

.accordion-item.active .accordion-content {
  max-height: 1000px; /* suffisamment grand pour le contenu */
  padding-bottom: 2rem;
  opacity: 1;
}


.accordion-item .arrow {
  font-size: 1.4rem;
  margin-left: 1rem;
  transition: transform 0.3s ease;
  color: var(--bleu);
}

.accordion-item:hover .arrow {
  color: var(--bleu-clair);
}

.accordion-item.active .arrow {
  transform: rotate(180deg);
}

.scroll-section {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.scroll-section.visible {
  opacity: 1;
  transform: translateY(0);
}

.etape {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s ease-out, transform 1s ease-out;
  margin-bottom: 1.5rem;
}

.etape.visible {
  opacity: 1;
  transform: translateY(0);
}

.etape:last-child {
  margin-bottom: 0;
}

/* ========== SECTION 2 — Importance (Audit légal & social) ========== */
.section-importance{
  background-color:#f7f9fb;
  padding:2.4rem 1rem;                 /* section plus compacte */
}

.section-importance .section-title{
  text-align:center;
  color:var(--bleu, #2c3e50);
  font-weight:800;
  font-size:2rem;                      /* titre un peu plus petit */
  margin:0 0 1.6rem;
  letter-spacing:.2px;
}

/* Grille : une colonne centrée, espacement réduit */
.section-importance .importance-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:.6rem;                           /* ↓ espace entre cartes */
  max-width:950px;
  margin:0 auto;
}

/* Carte (accordion item) */
.section-importance .accordion-item{
  background:#fff;
  border-left:5px solid var(--bleu-clair, #3498db);
  border-radius:.7rem;
  box-shadow:0 1px 6px rgba(0,0,0,.06);
  overflow:hidden;
  transition:box-shadow .25s ease, transform .25s ease,
             opacity .35s ease, transform .35s ease;
  opacity:0;                           /* apparait au scroll */
  transform:translateY(10px);
}
.section-importance .accordion-item.visible{
  opacity:1;
  transform:translateY(0);
}
.section-importance .accordion-item:hover{
  box-shadow:0 4px 14px rgba(0,0,0,.08);
}

/* En-tête cliquable (réduit la hauteur) */
.section-importance .accordion-toggle{
  display:flex;
  align-items:center;
  gap:.6rem;
  justify-content:space-between;
  padding:.68rem 1rem;                 /* ← joue surtout sur la hauteur */
  cursor:pointer;
  background:#fff;
}
.section-importance .accordion-toggle h3{
  margin:0;
  font-size:1.1rem;                      /* titres de blocs plus petits */
  line-height:1.25;
  font-weight:700;
  color:var(--bleu, #2c3e50);
}
.section-importance .accordion-toggle .arrow{
  margin-left:.75rem;
  font-size:1rem;
  transition:transform .25s ease;
}

/* Zone déroulante (fermée par défaut, ouverte avec .active du JS) */
.section-importance .accordion-content{
  display:none;
  padding:.7rem 1rem .95rem;           /* contenu un peu plus serré */
  border-top:1px solid #eef2f6;
  font-size:.98rem;
  line-height:1.55;
  color:#334;
}
.section-importance .accordion-item.active .accordion-content{
  display:block;
}

/* État ouvert : flèche tournée */
.section-importance .accordion-item.active .arrow{
  transform:rotate(180deg);
}

/* Mobile */
@media (max-width:640px){
  .section-importance{ padding:2rem .8rem; }
  .section-importance .section-title{ font-size:1.85rem; margin-bottom:1.2rem; }
  .section-importance .importance-grid{ gap:.5rem; }
  .section-importance .accordion-toggle{ padding:.58rem .85rem; }
  .section-importance .accordion-toggle h3{ font-size:.95rem; }
  .section-importance .accordion-content{ padding:.6rem .85rem .85rem; font-size:.95rem; }
}

/* ========== SECTION 3 — Processus audit (cartes étapes) ========== */
.audit-process{
  background:#ffffff;
  padding:3rem 1rem;
}
.audit-process .section-title{
  text-align:center;
  font-size:2rem;
  font-weight:800;
  color:var(--bleu, #2c3e50);
  margin:0 0 1.6rem;
}

/* grille compacte */
.process-grid{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;                      /* écart réduit entre cartes */
  justify-content:center;
  max-width:1100px;
  margin:0 auto;
}

/* carte compacte */
.process-step{
  flex:1 1 280px;
  max-width:420px;
  background:#fff;
  border-left:5px solid var(--bleu-clair, #3498db);
  border-radius:.8rem;
  padding:1.2rem 1.25rem;        /* ↓ hauteur des cartes */
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.process-step h3{
  margin:0 0 .5rem;
  font-size:1.05rem;             /* titre plus petit */
  font-weight:700;
  color:var(--bleu, #2c3e50);
}
.process-step p{
  margin:.25rem 0 0;
  font-size:.97rem;
  line-height:1.5;
  color:#333;
}

/* ========== Utilitaire fade-up compatible avec le script.js ========== */
.fade-up{
  opacity:0;
  transform:translateY(18px);
  transition:all .6s ease-out;
}
/* le script ajoute .fade-visible ; garde aussi .visible pour compat */
.fade-up.fade-visible,
.fade-up.visible{
  opacity:1;
  transform:translateY(0);
}

@media (max-width:640px){
  .audit-process{ padding:2.2rem .8rem; }
  .audit-process .section-title{ font-size:1.85rem; margin-bottom:1.2rem; }
  .process-grid{ gap:.8rem; }
  .process-step{ padding:1rem; }
  .process-step h3{ font-size:1rem; }
  .process-step p{ font-size:.95rem; }
}


/* ========== SECTION EXPERTISE COMPTABLE ========== */
.prestations-expertise{
  padding: 4rem 2rem;
  background-color: #eaf2f8;
  border-radius: 12px;
  margin-top: 2rem;
  text-align: center;
}

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

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

/* Liste simple, alignée à gauche, avec chevron */
.prestations-expertise .liste-prestations{
  list-style: none;
  padding: 0;
  max-width: 1000px;   /* 800px dans l’exemple — ici un peu plus large, ajuste si besoin */
  margin: 0 auto;
  text-align: left;
}

/* On annule l’ancienne grille/cartes et on passe en bloc simple */
.prestations-expertise .liste-prestations li{
  display: block;                /* annule grid */
  font-size: 1.08rem;
  margin-bottom: 1.2rem;
  position: relative;
  padding-left: 2rem;            /* place pour le chevron */
  line-height: 1.6;

  /* annule les styles de carte précédents au cas où */
  background: transparent;
  box-shadow: none;
  border: 0;
  border-left: 0;
  border-radius: 0;
}

/* Chevron */
.prestations-expertise .liste-prestations li::before{
  content: "▸";
  color: #2980b9;
  position: absolute;
  left: 0;
  top: .15rem;
  font-size: 1.3rem;
  line-height: 1;
}

/* Titre à la suite du chevron (inline) */
.prestations-expertise .titre{
  display: inline;
  font-weight: 700;
  color: #2c3e50;
  margin-right: .25rem;
}

/* Emoji éventuel devant le titre */
.prestations-expertise .titre .emoji,
.prestations-expertise .emoji{
  font-size: 1.1rem;
  margin-right: .35rem;
}

/* Texte descriptif à la suite (inline) */
.prestations-expertise .texte{
  display: inline;
  color: #2c3e50;
}

/* Responsive léger */
@media (max-width: 650px){
  .prestations-expertise{ padding: 3rem 1rem; }
  .prestations-expertise h2{ font-size: 1.85rem; margin-bottom: 1.2rem; }
  .prestations-expertise .liste-prestations li{ font-size: 1rem; padding-left: 1.6rem; }
  .prestations-expertise .liste-prestations li::before{ top: .1rem; font-size: 1.2rem; }
}


/* ========== SECTION CONSEIL ========== */
.section-conseils-audit { padding: 4rem 2rem; background: #f8f9fa; }
.section-conseils-audit .section-title { text-align: center; color: var(--bleu); font-size: 2rem; margin-bottom: 2.5rem; }
.conseils-grid { display: grid; gap: 1.5rem; max-width: 1000px; margin: 0 auto; }
.conseil-box { display: flex; background: #fff; padding: 1.5rem; border-radius: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.conseil-box .emoji { font-size: 2.2rem; margin-right: 1rem; }
.conseil-box h3 { margin: 0 0 0.5rem; font-size: 1.2rem; color: var(--bleu-clair); }
.conseil-box p { margin: 0; font-size: 1rem; line-height: 1.6; }