/* ================================
   VAL COACH — styles.css
   Design premium, chaleureux & lisible
   ================================ */

/* --- Typos Google Fonts (facultatif mais conseillé) --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=Playfair+Display:wght@600;700&display=swap');

/* --- Variables de thème --- */
:root{
  --brand: #ffc800;           /* Or chaleureux */
  --brand-600: #e6b400;
  --text: #222;               /* Texte principal */
  --muted: #5a5a5a;           /* Texte secondaire */
  --bg: #ffffff;              /* Fond clair */
  --bg-soft: #f6f7fb;         /* Fond alterné */
  --card: #ffffff;            /* Fond carte */
  --stroke: rgba(0,0,0,.06);  /* Lignes subtiles */
  --shadow: 0 14px 34px rgba(0,0,0,.10);
  --shadow-hover: 0 22px 50px rgba(0,0,0,.18);
  --radius: 16px;
  --pace: .28s;
}
:root {
  --nav-h: 80px;
}

/* --- Reset doux --- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  color: var(--text);
  background: var(--bg);
  line-height: 1.58;
    padding-top: var(--nav-h);
}


/* --- Titres --- */
h1,h2{font-family:"Playfair Display", Georgia, serif}
h2.section-heading{
  font-weight:800;
  letter-spacing:.3px;
  color: var(--brand);
  margin-bottom: 1.6rem;
  text-align:center;
}

/* --- Navbar --- */
/* --- Navbar (fixe) --- */
#siteNav {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: rgba(255,255,255,.95) !important;
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--stroke);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  z-index: 1030; /* au-dessus du contenu */
}

#siteNav .navbar-brand{
  color: var(--brand);
  font-weight:800;
  letter-spacing:.3px;
}

#siteNav .nav-link{
  font-weight:600;
  color:#444;
  padding:.75rem 1rem;
  border-radius: 999px;
}
#siteNav .nav-link:hover{ background: rgba(255,200,0,.12); color:#222; }
#siteNav .nav-link.active{ color:#111; background: rgba(255,200,0,.22); }

/* Les ancres ne passent pas sous la nav */
.page-section{ scroll-margin-top: calc(var(--nav-h) + 12px); }
#hero{ scroll-margin-top: calc(var(--nav-h) + 12px); }


/* --- Boutons --- */
.btn{
  font-weight:700;
  border-radius: 999px;
  padding: .8rem 1.2rem;
  transition: transform var(--pace) ease, box-shadow var(--pace) ease;
}
.btn-warning{
  background: var(--brand);
  border: 0;
  box-shadow: 0 8px 18px rgba(255,200,0,.35);
}
.btn-warning:hover{
  transform: translateY(-2px);
  background: var(--brand-600);
  box-shadow: 0 12px 28px rgba(255,200,0,.45);
}
.btn-outline-warning{
  border:2px solid var(--brand);
  color:#222;
}
.btn-outline-warning:hover{
  background: var(--brand);
  color:#111;
  box-shadow: 0 10px 24px rgba(255,200,0,.35);
}

/* --- Sections --- */
.page-section{
  padding-top: clamp(2.8rem, 6vw, 4.2rem);
  padding-bottom: clamp(2.6rem, 5.5vw, 4rem);
  scroll-margin-top: 84px; /* ancre agréable sous navbar */
}
#hero{
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(255,200,0,.12), rgba(255,200,0,0) 50%),
    linear-gradient(180deg, #fff 0%, var(--bg-soft) 100%);
  padding-top: clamp(3rem, 7vw, 5rem);
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
}
#hero .lead p{
  font-size: clamp(1.02rem, 1.4vw, 1.15rem);
  color: var(--muted);
}

/* --- Alternance de fonds --- */
.bg-soft{
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(255,200,0,.12), rgba(255,200,0,0) 50%),
    linear-gradient(180deg, #ffffff 0%, #f6f7fb 100%);
}
.bg-plain{ background:#ffffff; }

/* --- Cartes génériques --- */
.card-like,
.service-card,
.contact-card,
.calendly-card{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform var(--pace), box-shadow var(--pace), border-color var(--pace);
}
.card-like:hover,
.service-card:hover,
.contact-card:hover,
.calendly-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(255,200,0,.35);
}
.card-like h5,
.service-card h5{font-weight:800; color:var(--brand); margin-bottom:1rem}
.card-like p,
.service-card p{color:var(--muted)}

/* --- Services (Option B = encarts directs) --- */
#services .row > .col{display:flex}
#services .row > .col > *{width:100%}
.service-card{
  padding:1.4rem;
  display:flex; flex-direction:column; justify-content:center; text-align:center;
}

/* --- Services (Option A = flip cards) --- */
.flip-card{ perspective:1000px; border-radius:var(--radius); }
.flip-inner{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.flip-card:hover .flip-inner,
.flip-card:focus-within .flip-inner{ transform:rotateY(180deg); }
.flip-face{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:#fff;
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  padding:1.4rem;
  backface-visibility:hidden;
  text-align:center;
}
.flip-back{ transform:rotateY(180deg); }
.flip-face h5{ color:var(--brand); font-weight:800; margin-bottom:.35rem }
.flip-face p{ color:var(--muted); margin:0 }

/* --- Tarifs --- */
#tarifs .card-like p{
  margin: .35rem 0;
  font-size: 1.02rem;
}
#tarifs .card-like p strong{color:#111}

/* --- Contact & Calendly --- */
.contact-card, .calendly-card{padding: 1.25rem}
.contact-card p{margin:.35rem 0}
.calendly-card{overflow:hidden}
.calendly-card h5{margin-bottom:.6rem}

/* --- Communication consciente --- */
#commconsciente .card-like{min-height:260px}
#commconsciente .card-like p{margin-bottom:.6rem}

/* --- Footer --- */
footer{
  border-top: 1px solid var(--stroke);
  background: #fff;
}
footer .small{color:#666}

/* --- Responsive --- */
@media (max-width: 991px){
  .navbar .nav-link{padding:.6rem .8rem}
}
@media (max-width: 575px){
  .btn{width:100%}
  .container-narrow{padding-left: .75rem; padding-right: .75rem}
}
/* Logo + texte navbar alignés */
.navbar-brand {
  display: flex;
  align-items: center;   /* centre verticalement */
}

.navbar-brand .logo {
  height: 55px;          /* augmente la taille (essaie 64px, ajuste 60–70px) */
  width: auto;
  display: block;
}

.navbar-brand span {
  font-size: 1.4rem;     /* grossit un peu le texte pour l’équilibre */
  line-height: 1;        /* aligne verticalement avec le logo */
  display: inline-block;
}
/* Photo Héros */
.hero-photo img {
  max-width: 280px;   /* taille maxi sur desktop */
  border: 6px solid #fff;  /* petit liseré blanc élégant */
  border-radius: 50%;      /* cercle parfait */
  box-shadow: 0 12px 28px rgba(0,0,0,.15); /* relief */
  transition: transform .3s ease, box-shadow .3s ease;
}

.hero-photo img:hover {
  transform: scale(1.03);
  box-shadow: 0 18px 36px rgba(0,0,0,.25);
}

@media (max-width: 767px) {
  .hero-photo img {
    max-width: 200px;  /* un peu plus petit sur mobile */
    margin-top: 1.5rem;
  }
}
.footer .social-link {
  color: #555;
  transition: color .3s ease;
}
.footer .social-link:hover {
  color: var(--brand); /* ton jaune */
}
#contact .btn {
  font-size: 1.1rem;
  padding: .75rem 1.5rem;
}
/* Cartes À propos — titres centrés, texte justifié */
#apropos .card-like h5 {
  text-align: center;
  margin-bottom: 1rem; /* un peu d’air sous le titre */
}

#apropos .card-like p {
  text-align: justify;
}
/* Témoignages */
.testimonial-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
  padding:1.25rem 1.25rem 1.1rem;
  height: 100%;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.testimonial-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 50px rgba(0,0,0,.18);
  border-color: rgba(255,200,0,.28);
}
.testimonial-meta{
  display:flex; align-items:center; gap:.75rem; margin-bottom:.65rem;
}
.testimonial-meta .src-icon{
  width: 26px; height: 26px; opacity:.75;
}
.testimonial-meta .name{
  font-weight: 700;
}
.testimonial-text{
  margin:0;
  color:#4e4e4e;
  font-size: 1.02rem;
  line-height: 1.65;
  text-align: justify;          /* joli bloc propre */
  quotes: "«" "»" "‹" "›";
}
.testimonial-text:before,
.testimonial-text:after{
  color:#ffc800; font-size:1.3rem; font-weight:800; line-height:0;
}
.testimonial-text:before{ content: open-quote; margin-right:.25rem;}
.testimonial-text:after { content: close-quote; margin-left:.15rem;}