/* Styles propres aux pages d'activité (conseil, ingénierie de formation, méthode 5 briques).
   Complète site.css, qui porte la charte commune du site. */

/* ---- Bandeau de titre ---- */
.page-hero {
  background: var(--bg-light);
  padding: 7.5rem 0 3rem;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) { .page-hero { padding: 9.5rem 0 4rem; } }
.page-hero .container { position: relative; z-index: 2; }
.fil { font-size: .85rem; color: var(--muted); margin-bottom: 1.25rem; }
.fil a { color: var(--primary); font-weight: 600; }
.fil a:hover { text-decoration: underline; }
.page-hero h1 { font-size: 1.9rem; max-width: 44rem; margin: .75rem 0 1rem; }
@media (min-width: 768px) { .page-hero h1 { font-size: 2.6rem; } }
.page-hero .chapo { font-size: 1.1rem; color: var(--muted); max-width: 42rem; }
@media (min-width: 768px) { .page-hero .chapo { font-size: 1.2rem; } }

/* ---- Corps de texte ---- */
.prose { max-width: 46rem; }
.prose > p { margin-bottom: 1.1rem; }
.prose h2 { font-size: 1.5rem; margin: 2.75rem 0 1rem; }
@media (min-width: 768px) { .prose h2 { font-size: 1.75rem; } }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.1rem; margin: 1.75rem 0 .5rem; }
.prose ul { padding-left: 1.25rem; margin-bottom: 1.1rem; }
.prose li { margin-bottom: .5rem; }
.prose strong { color: var(--navy); }

/* ---- Tableau des dimensions ---- */
.dim-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0 2rem; font-size: .95rem; }
.dim-table th, .dim-table td {
  text-align: left; padding: .8rem .9rem;
  border-bottom: 1px solid var(--border); vertical-align: top;
}
.dim-table td:first-child { white-space: nowrap; }
@media (max-width: 520px) {
  .dim-table, .dim-table tbody, .dim-table tr, .dim-table td { display: block; width: 100%; }
  .dim-table thead { display: none; }
  .dim-table tr { border-bottom: 1px solid var(--border); padding: .4rem 0; }
  .dim-table td { border: 0; padding: .2rem .2rem; }
  .dim-table td:first-child { margin-bottom: .15rem; }
}
.dim-table th {
  font-family: 'Montserrat', sans-serif; font-weight: 500;
  font-size: .75rem; letter-spacing: 1px; text-transform: uppercase; color: var(--muted);
}
.dim-table .lettre {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; border-radius: .4rem;
  background: var(--bg-light); color: var(--navy);
  font-family: 'Montserrat', sans-serif; font-weight: 500; margin-right: .6rem;
}

/* ---- Étapes numérotées (briques, cycle) ---- */
.etape { display: flex; gap: 1.1rem; margin-bottom: 1.9rem; }
.etape-num {
  flex-shrink: 0; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--navy); color: #fff;
  font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: .95rem;
  display: flex; align-items: center; justify-content: center;
}
.etape h3 { margin: .25rem 0 .4rem; font-size: 1.1rem; }
.etape p { color: var(--muted); }
.etape p strong { color: var(--text); }

/* ---- Encart ---- */
.encart {
  background: var(--bg-light); border-left: 3px solid var(--human);
  border-radius: .5rem; padding: 1.25rem 1.5rem; margin: 2rem 0;
}
.encart p { margin: 0; }
.encart p + p { margin-top: .75rem; }

/* ---- Cartes de repères ---- */
.reperes { display: grid; gap: 1rem; margin: 1.5rem 0 2rem; }
@media (min-width: 700px) { .reperes { grid-template-columns: repeat(2, 1fr); } }
.repere {
  border: 1px solid var(--border); border-radius: .75rem;
  padding: 1.25rem 1.4rem; background: var(--card);
}
.repere h3 { margin: 0 0 .4rem; font-size: 1rem; }
.repere p { color: var(--muted); font-size: .95rem; margin: 0; }

/* ---- Appel à l'action de bas de page ---- */
.cta-page { background: var(--navy); color: #fff; text-align: center; }
.cta-page h2 { font-size: 1.6rem; margin-bottom: .9rem; }
@media (min-width: 768px) { .cta-page h2 { font-size: 2rem; } }
.cta-page .sous { color: var(--light-blue); max-width: 34rem; margin: 0 auto 1.9rem; }
.cta-page .note { color: var(--light-blue); font-size: .85rem; margin-top: 1rem; }
.cta-page .btn { background: #fff; color: var(--navy); }
.cta-page .btn:hover { background: var(--light-blue); }
.cta-page .btn .btn-arrow { border-color: var(--human); color: var(--human); }

/* ---- Navigation entre les pages d'activité ---- */
.autres { border-top: 1px solid var(--border); }
.autres-grid { display: grid; gap: 1rem; }
@media (min-width: 700px) { .autres-grid { grid-template-columns: repeat(2, 1fr); } }
.autre-lien {
  display: block; border: 1px solid var(--border); border-radius: .75rem;
  padding: 1.25rem 1.4rem; transition: border-color .2s, box-shadow .2s;
}
.autre-lien:hover { border-color: var(--primary); box-shadow: 0 2px 10px rgba(30,50,100,.08); }
.autre-lien .who {
  font-family: 'Montserrat', sans-serif; font-size: .7rem;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted);
}
.autre-lien h3 { margin: .35rem 0 .3rem; font-size: 1.05rem; }
.autre-lien .go { font-size: .85rem; color: var(--primary); font-weight: 600; }