/* ============================================================
   service-styles.css — CCFA
   Charte couleur unifiée pour toutes les pages services
   Remplace les gradients criards (#f093fb, #f5576c, etc.)
   par une palette professionnelle dérivée de la marque CCFA.

   PALETTE DE BASE (identique à styles.css et ccfa-blog.html)
   --navy        : #1a2b4a  (bleu nuit profond — dominant)
   --terracotta  : #C0572A  (terracotta — accent principal)
   --gold        : #b8963e  (or — accent secondaire)
   --cream       : #f8f5f0  (fond chaud)
   --gray-light  : #f2f0ec  (fond alternatif)
   --gray-mid    : #e0ddd7  (bordures)
   --gray-text   : #6b6560  (corps de texte secondaire)

   ACCENTUATION PAR SERVICE (subtile, dérivée de la palette)
   service-audit.html       → terracotta #C0572A / #d4693c
   service-ingenierie.html  → gold #b8963e / #c9a84c
   service-essms.html       → vert sauge #4a7c6b / #5a9480
   service-bilan.html       → bleu slate #3d5a80 / #4e6d96
   service-management.html  → bronze #8b6340 / #a07550
   service-territorial.html → vert forêt #3d6b4f / #4d7f61
   ============================================================ */

/* ============================================================
   0. RESET DES GRADIENTS CRIARDS (toutes pages)
   On écrase les anciennes valeurs sans toucher à la structure
   ============================================================ */

/* Suppression du gradient rose/fuchsia (#f093fb, #f5576c) */
.service-hero,
.intro-visual,
.feature-icon,
.step-number,
.benefit-icon {
  background-image: none !important;
}

/* ============================================================
   1. HERO — fond navy + accent terracotta (commun à tous)
   ============================================================ */

.service-hero {
  background-color: #1a2b4a !important;
  background-image: none !important;
  position: relative;
  overflow: hidden;
}

/* Légère texture géométrique subtile en overlay */
.service-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 80% 20%, rgba(192,87,42,0.12) 0%, transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(184,150,62,0.08) 0%, transparent 40%);
  pointer-events: none;
}

.service-hero h1 {
  color: #ffffff;
  position: relative;
  z-index: 1;
}

.service-hero .service-hero-subtitle {
  color: rgba(255,255,255,0.75);
  position: relative;
  z-index: 1;
}

/* Ligne de couleur en bas du hero — change par service via classes body */
.service-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #C0572A;
}

/* ============================================================
   2. INTRO VISUAL — remplace le gros carré gradient criard
   ============================================================ */

.intro-visual {
  background-color: #1a2b4a !important;
  background-image: none !important;
  border-radius: 12px;
  font-size: 96px !important;
  box-shadow: 0 8px 32px rgba(26,43,74,0.18);
  position: relative;
  overflow: hidden;
}

.intro-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(192,87,42,0.2) 0%, transparent 60%);
}

/* ============================================================
   3. FEATURE ICONS — petits blocs d'icône
   ============================================================ */

.feature-icon {
  background-color: #f8f5f0 !important;
  background-image: none !important;
  border: 1px solid #e0ddd7;
  font-size: 36px !important;
  border-radius: 10px;
}

/* ============================================================
   4. PROCESS STEPS — numéros de cercle
   ============================================================ */

.step-number {
  background-color: #1a2b4a !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 2px solid rgba(192,87,42,0.4);
  font-size: 28px !important;
}

/* Flèche entre les étapes */
.process-step::after {
  color: #C0572A !important;
}

/* ============================================================
   5. BENEFIT ICONS
   ============================================================ */

.benefit-icon {
  background-color: #1a2b4a !important;
  background-image: none !important;
  font-size: 26px !important;
  border-radius: 8px;
}

/* ============================================================
   6. HIGHLIGHT BOX — bordure gauche terracotta
   ============================================================ */

.highlight-box {
  background: #f8f5f0 !important;
  border-left-color: #C0572A !important;
}

.highlight-box strong {
  color: #C0572A !important;
}

/* ============================================================
   7. SECTIONS ALTERNÉES — fonds sobres
   ============================================================ */

.features-section,
.benefits-section {
  background-color: #f8f5f0 !important;
}

.process-section,
.references-section,
.service-intro {
  background-color: #ffffff !important;
}

/* ============================================================
   8. CTA SECTION — navy profond avec accent
   ============================================================ */

.cta-section {
  background: linear-gradient(135deg, #1a2b4a 0%, #0f1d35 100%) !important;
}

.cta-section h2,
.cta-section p {
  color: rgba(255,255,255,0.9) !important;
}

/* ============================================================
   9. FEATURE CARDS — hover discret
   ============================================================ */

.feature-card {
  border: 1px solid #e0ddd7;
  transition: all 0.25s ease;
}

.feature-card:hover {
  border-color: rgba(192,87,42,0.3);
  box-shadow: 0 8px 28px rgba(26,43,74,0.10) !important;
  transform: translateY(-3px) !important;
}

.feature-card h3 {
  color: #1a2b4a;
}

/* ============================================================
   10. REFERENCE CARDS
   ============================================================ */

.reference-card {
  background: #f8f5f0 !important;
  border-left: 3px solid #e0ddd7;
  transition: border-color 0.2s;
}

.reference-card:hover {
  border-left-color: #C0572A;
}

.reference-logo {
  color: #1a2b4a !important;
  font-size: 16px !important;
}

/* ============================================================
   11. BENEFIT ITEMS
   ============================================================ */

.benefit-item {
  border: 1px solid #e0ddd7;
  transition: box-shadow 0.2s;
}

.benefit-item:hover {
  box-shadow: 0 4px 16px rgba(26,43,74,0.08) !important;
}

.benefit-item h4 {
  color: #1a2b4a;
}

/* ============================================================
   12. DIFFÉRENCIATION PAR SERVICE
   Chaque service a une couleur d'accent légère — subtile,
   appliquée uniquement sur les éléments clés (hero line,
   step numbers, feature icons border, highlight box border)
   ============================================================ */

/* --- AUDIT QUALIOPI : terracotta (couleur principale CCFA) --- */
body.page-audit .service-hero::after { background: #C0572A; }
body.page-audit .step-number { border-color: rgba(192,87,42,0.5) !important; }
body.page-audit .feature-icon { background-color: rgba(192,87,42,0.08) !important; border-color: rgba(192,87,42,0.2); }
body.page-audit .highlight-box { border-left-color: #C0572A !important; }
body.page-audit .reference-card:hover { border-left-color: #C0572A; }

/* --- INGÉNIERIE DE FORMATION : gold/ambre --- */
body.page-ingenierie .service-hero::after { background: #b8963e; }
body.page-ingenierie .step-number { border-color: rgba(184,150,62,0.5) !important; }
body.page-ingenierie .feature-icon { background-color: rgba(184,150,62,0.08) !important; border-color: rgba(184,150,62,0.2); }
body.page-ingenierie .highlight-box { border-left-color: #b8963e !important; }
body.page-ingenierie .highlight-box strong { color: #8a6e28 !important; }
body.page-ingenierie .reference-card:hover { border-left-color: #b8963e; }
body.page-ingenierie .process-step::after { color: #b8963e !important; }

/* --- ÉVALUATION ESSMS : vert sauge (soin, humanité) --- */
body.page-essms .service-hero::after { background: #4a7c6b; }
body.page-essms .step-number { border-color: rgba(74,124,107,0.5) !important; }
body.page-essms .feature-icon { background-color: rgba(74,124,107,0.08) !important; border-color: rgba(74,124,107,0.2); }
body.page-essms .highlight-box { border-left-color: #4a7c6b !important; }
body.page-essms .highlight-box strong { color: #3a6358 !important; }
body.page-essms .reference-card:hover { border-left-color: #4a7c6b; }
body.page-essms .process-step::after { color: #4a7c6b !important; }

/* --- BILAN DE COMPÉTENCES : bleu slate (sérénité, projection) --- */
body.page-bilan .service-hero::after { background: #3d5a80; }
body.page-bilan .step-number { border-color: rgba(61,90,128,0.5) !important; }
body.page-bilan .feature-icon { background-color: rgba(61,90,128,0.08) !important; border-color: rgba(61,90,128,0.2); }
body.page-bilan .highlight-box { border-left-color: #3d5a80 !important; }
body.page-bilan .highlight-box strong { color: #2d4570 !important; }
body.page-bilan .reference-card:hover { border-left-color: #3d5a80; }
body.page-bilan .process-step::after { color: #3d5a80 !important; }

/* --- MANAGEMENT DE TRANSITION : bronze (expérience, solidité) --- */
body.page-management .service-hero::after { background: #8b6340; }
body.page-management .step-number { border-color: rgba(139,99,64,0.5) !important; }
body.page-management .feature-icon { background-color: rgba(139,99,64,0.08) !important; border-color: rgba(139,99,64,0.2); }
body.page-management .highlight-box { border-left-color: #8b6340 !important; }
body.page-management .highlight-box strong { color: #7a5230 !important; }
body.page-management .reference-card:hover { border-left-color: #8b6340; }
body.page-management .process-step::after { color: #8b6340 !important; }

/* --- DÉVELOPPEMENT TERRITORIAL : vert forêt (territoire, ancrage) --- */
body.page-territorial .service-hero::after { background: #3d6b4f; }
body.page-territorial .step-number { border-color: rgba(61,107,79,0.5) !important; }
body.page-territorial .feature-icon { background-color: rgba(61,107,79,0.08) !important; border-color: rgba(61,107,79,0.2); }
body.page-territorial .highlight-box { border-left-color: #3d6b4f !important; }
body.page-territorial .highlight-box strong { color: #2d5840 !important; }
body.page-territorial .reference-card:hover { border-left-color: #3d6b4f; }
body.page-territorial .process-step::after { color: #3d6b4f !important; }

/* ============================================================
   13. BOUTONS CTA — cohérence avec styles.css
   ============================================================ */

.btn-primary-large,
.btn-primary {
  background-color: #C0572A !important;
  background-image: none !important;
  color: #ffffff !important;
  border: none;
  transition: background-color 0.2s ease;
}

.btn-primary-large:hover,
.btn-primary:hover {
  background-color: #d4693c !important;
}

/* ============================================================
   14. FLOATING CTA BUTTONS
   ============================================================ */

.floating-btn-phone {
  background-color: #1a2b4a !important;
  background-image: none !important;
}

.floating-btn-rdv {
  background-color: #C0572A !important;
  background-image: none !important;
}

.floating-btn-rdv:hover {
  background-color: #d4693c !important;
}

.floating-btn-phone:hover {
  background-color: #253d68 !important;
}

/* ============================================================
   15. SECTION TITLES — filet de soulignement discret
   ============================================================ */

.section-title {
  color: #1a2b4a;
  position: relative;
  display: inline-block;
}

.section-title::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: #C0572A;
  margin: 12px auto 0;
  border-radius: 2px;
}

/* ============================================================
   16. TYPOGRAPHIE — cohérence avec le reste du site
   ============================================================ */

.intro-text h2 {
  color: #1a2b4a;
}

.process-step h4,
.benefit-item h4,
.feature-card h3 {
  color: #1a2b4a;
}

.intro-text p,
.feature-card p,
.process-step p,
.benefit-item p,
.reference-card p {
  color: #6b6560;
}