/* =================== THEME =================== */
:root{
  --brand:      #9B8BD1;   /* violet du logo */
  --brand-700:  #6F63C0;   /* violet plus soutenu (titres) */
  --gold:       #E6D79B;   /* doré fin (si besoin pour marquer l'actif) */
  --bg-tint:    #F1ECFA;   /* lavande très clair (bandes + navbar) */
  --text:       #212121;   /* texte courant */
  --text-strong:#1f1f1f;   /* noir pour titres sur fond lavande */
  --title-color: var(--brand-700); /* TITRES par défaut (violet) */
}

/* =================== BASE =================== */
html,body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body{
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;
  color: var(--text);
  background:#fff;
  line-height:1.6;
  font-size:16px;
}
h1,h2,h3,h4,h5,h6{
  color: var(--title-color);
  font-weight:700;
  line-height:1.25;
  margin:0 0 1rem;
}
.lead{ font-size:1.125rem; line-height:1.7; }
p{ margin-bottom:1rem; }

/* =================== HEADER =================== */
.site-header{ padding:14px 0 12px; }
.header-logo{ display:block; margin:0 auto; height:auto; max-height:170px; }
@media (max-width:576px){ .header-logo{ max-height:120px; } }

/* =================== NAVBAR =================== */
/* Même fond que les sections : lavande clair */
.navbar,
.navbar.bg-light,
.navbar.navbar-light{
  background-color: var(--bg-tint) !important;
  border-bottom: 1px solid rgba(111,99,192,.22);
  --bs-navbar-padding-y: .55rem;
}
.navbar .navbar-brand{
  font-weight:700; font-size:1.05rem;
  color: var(--brand-700) !important;
}
.navbar .nav-link{
  color: #3E3A55 !important;           /* violet sombre lisible */
  font-size:1rem; padding:.45rem .8rem; 
  background:transparent !important;   /* pas de “bulles” */
  border-radius:0 !important;
}
.navbar .nav-link:hover{ color: var(--brand-700) !important; opacity:.95; }
.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"]{
  color: var(--brand-700) !important;  /* tu peux passer à var(--gold) si tu préfères */
  font-weight:700;
  background:transparent !important;
  box-shadow:none !important;
}
.navbar-nav{ gap:.65rem; }

/* =================== BANDES / SECTIONS =================== */
section{ padding:3rem 0; }

/* Alternance de fond + bascule auto des titres */
.section-alt,
#consultations,
#deroulement{
  background: var(--bg-tint) !important;
  --title-color: var(--text-strong);   /* TITRES NOIRS ici */
}

/* Section blanche -> titres restent violets */
#disponibilites{
  background:#fff !important;
  --title-color: var(--brand-700);
}

hr.separator{
  border:none; border-top:2px solid rgba(123,106,194,.22);
  margin:3rem auto; max-width:1200px;
}

/* =================== ICONES =================== */
.icon{ font-size:2rem; color: var(--brand) !important; }

/* =================== CARTES GÉNÉRIQUES =================== */
.encadre, .bloc-psy, .consult-card, .avis-card, .step-card .encadre{
  background:#fff; border:1px solid #e8e5df; border-radius:12px;
  box-shadow:0 4px 14px rgba(0,0,0,.06);
}

/* Tous les titres de cartes prennent la variable */
.card-title, 
.bloc-psy h5, 
.step-card h5, 
#consultations .consult-card .card-title,
#disponibilites .encadre h5,
#deroulement .step-card h5,
.avis-card h5{
  color: var(--title-color);
}

/* ====== Accueil — “Ce que peut apporter…” ====== */
#benefices-intro .portrait{
  width:100%; max-width:320px; aspect-ratio:1/1;
  border-radius:9999px; object-fit:cover; object-position:50% 22%;
  box-shadow:0 6px 22px rgba(0,0,0,.08);
}
.bloc-psy{
  min-height:280px; padding:18px 16px; text-align:center;
  display:flex; flex-direction:column; justify-content:flex-start;
}
.bloc-psy p{ font-size:.98rem; line-height:1.65; text-align:justify; }

/* ====== Types de consultation ====== */
#consultations .consultations-grid{
  display:flex; flex-wrap:wrap; gap:1.25rem; justify-content:space-between;
}
#consultations .consult-card{
  flex:0 1 45%; max-width:45%; overflow:hidden; display:flex; flex-direction:column;
}
#consultations .consult-card img{
  width:100%; height:150px; object-fit:cover; object-position:50% 40%;
  border-top-left-radius:12px; border-top-right-radius:12px;
}
#consultations .consult-card .card-body{ padding:1rem 1.25rem 1.2rem; }
#consultations .consult-card .card-title{ margin-bottom:.55rem; }
#consultations .consult-card .card-text{ text-align:justify; color: var(--text); }
@media (max-width:768px){
  #consultations .consult-card{ flex:1 1 100%; max-width:100%; }
  #consultations .consultations-grid{ gap:1rem; }
}

/* ====== Mes disponibilités ====== */
#disponibilites .encadre{ padding:1.5rem; }
#disponibilites .encadre h5{ margin:.25rem 0 .5rem; }

/* ====== Déroulement d’une consultation ====== */
.step-card .encadre{ padding:18px; }
.step-card p{ font-size:.98rem; }

/* ====== Carte “Coordonnées” (accueil) ====== */
.coordonnees-box{
  background:#fff; border:1px solid #ddd; border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.08); padding:1.5rem;
}

/* ====== QUI SUIS-JE — frise horizontale ====== */
.timeline-h{ position:relative; margin:.75rem 0 1.5rem; }
.timeline-h-list{ display:flex; gap:12px; align-items:flex-start; justify-content:space-between;
  list-style:none; padding:0; margin:0; position:relative; }
.timeline-h::before{ content:""; position:absolute; left:0; right:0; top:34px; height:2px; background:rgba(93,88,73,.35); }
.timeline-h-item{ flex:1 1 0; text-align:center; min-width:120px; }
.timeline-h-year{ font-weight:700; color:var(--title-color); font-size:.95rem; margin-bottom:.35rem; }
.timeline-h-dot{ width:10px; height:10px; display:inline-block; border-radius:50%; background:var(--title-color); position:relative; top:-2px; box-shadow:0 0 0 3px #fff; }
.timeline-h-desc{ margin-top:.4rem; font-size:.95rem; background:#fff; border:1px solid #e8e5df; border-radius:10px; padding:.5rem .65rem; box-shadow:0 4px 12px rgba(0,0,0,.05); }
@media (max-width:992px){ .timeline-h::before{ top:30px; } .timeline-h-item{ min-width:140px; } }
@media (max-width:768px){ .timeline-h-list{ flex-wrap:wrap; row-gap:16px; } .timeline-h::before{ display:none; } .timeline-h-item{ flex:1 1 calc(50% - 12px); } }
@media (max-width:480px){ .timeline-h-item{ flex-basis:100%; } }

/* ====== AVIS ====== */
.avis-grid{ display:grid; gap:1.25rem; }
@media (min-width:768px){ .avis-grid{ grid-template-columns:repeat(2,minmax(280px,1fr)); } }
@media (min-width:1200px){ .avis-grid{ grid-template-columns:repeat(3,minmax(280px,1fr)); } }
.avis-card{ padding:1.25rem; }
.avis-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.35rem; }
.avis-author{ color:var(--brand-700); }
.avis-date{ color:#7a7366; font-size:.95rem; }
.avis-stars{ letter-spacing:2px; margin-bottom:.5rem; color:#c8a86b; }
.avis-text{ text-align:justify; }

/* ====== MAP (page contact) ====== */
.map-container{ height:100%; min-height:100%; }
.map-container iframe{ width:100%; height:100%; border-radius:8px; }

/* ====== UTILS ====== */
.object-fit-cover{ width:100%; height:100%; object-fit:cover; display:block; }
/* Consultations : même ratio pour les 2 images, sans déformer */
#consultations .consult-card .card-img-top,
#consultations .consult-card img{
 
  width: 100%;
  height: auto !important;
  object-fit: contain !important; /* pas de coupe */
  background: #fff;
  display: block;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
/* === Hotfix : titres & gras violets partout (accueil inclus) === */

/* 1) Remet la variable de titre en violet dans les sections alternées */
.section-alt,
#consultations,
#deroulement {
  --title-color: var(--brand-700) !important;
}

/* 2) Par sécurité, force les titres clés en violet */
#consultations h2,
#consultations .card-title,
#deroulement h2,
#deroulement .step-card h5 {
  color: var(--brand-700) !important;
}

/* 3) Tout le texte en gras en violet */
strong, b { color: var(--brand-700) !important; }