/* ==========================================================================
   Marie-France Binette Psychologue — feuille de style
   Refonte légère (HTML/CSS/JS standards) du site exporté de WordPress/Divi.
   ========================================================================== */

:root {
  --accent: #c17065;        /* terracotta */
  --accent-hover: #e0c588;  /* doré (survol des boutons) */
  --text: #1e1e1e;
  --heading: #000000;
  --nav-text: #3a3a3c;
  --bg-light: #f7f7f7;
  --footer-bg: #303030;
  --divider: rgba(58, 58, 60, 0.13);
  --serif-heading: 'Gilda Display', Georgia, "Times New Roman", serif;
  --serif-body: 'Merriweather', Georgia, "Times New Roman", serif;
  --container: 1080px; /* rangée Divi : width 80%, max-width 1080px */
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--serif-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.9;
  color: var(--text);
  background: #fff;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif-heading);
  font-weight: 300;
  color: var(--heading);
  letter-spacing: -2px;
  line-height: 1.3;
  margin: 0 0 10px;
}

h2 {
  font-size: 32px;
}

p {
  margin: 0 0 1em;
}

ul {
  margin: 0 0 1em;
  padding-left: 1.2em;
}

li {
  margin-bottom: 0.3em;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: rgba(0, 0, 0, 0.99);
}

a:hover {
  opacity: 0.85;
}

.container {
  max-width: var(--container);
  width: 80%;
  margin: 0 auto;
}

.accent {
  color: var(--accent);
}

.text-center {
  text-align: center;
}

/* Filet horizontal discret entre les blocs */
hr.divider {
  border: 0;
  border-top: 1px solid var(--divider);
  margin: 25px 0;
}

hr.divider-light {
  border-top-color: rgba(255, 255, 255, 0.28);
}

/* Bouton pilule (cartes de la page d'accueil) */
.btn {
  display: inline-block;
  padding: 16px 30px;
  border-radius: 100px;
  background: var(--accent);
  color: #f7f3ee;
  font-size: 15px;
  font-weight: 300;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 300ms ease;
}

.btn:hover {
  background: var(--accent-hover);
  opacity: 1;
}

/* ---------- En-tête / navigation ---------- */

/* Comme l'original (Divi « fullwidth nav ») : l'en-tête occupe toute la
   largeur de l'écran — logo à 30px du bord gauche, menu à 32px du bord
   droit. Hauteur de menu Divi : 128px, logo plafonné à 45 % (≈58px). */
.site-header {
  background: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 10;
}

.site-header .container {
  max-width: 100%;
  width: 100%;
  padding-left: 30px;
  padding-right: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 128px;
}

.site-logo {
  line-height: 0;
}

.site-logo img {
  height: 57.6px; /* 45 % de 128px, comme #logo dans Divi */
  width: auto;
  max-width: 50vw;
  object-fit: contain;
}

.site-nav ul {
  list-style: none;
  display: flex;
  gap: 22px;
  margin: 0;
  padding: 0;
}

.site-nav a {
  font-size: 14px;
  font-weight: 700;
  color: var(--nav-text);
  text-decoration: none;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.site-nav a:hover {
  opacity: 0.7;
}

.site-nav .current a {
  color: var(--accent);
}

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}

.nav-toggle .bars {
  display: block;
  width: 24px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
  position: relative;
}

.nav-toggle .bars::before,
.nav-toggle .bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 24px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
}

.nav-toggle .bars::before { top: -8px; }
.nav-toggle .bars::after  { top: 8px; }

@media (max-width: 980px) {
  .site-header .container {
    min-height: 80px;
  }

  .site-logo img {
    height: 43px; /* 54 % de 80px, comme Divi en mobile */
  }

  .nav-toggle {
    display: block;
  }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }

  .site-nav.open {
    display: block;
  }

  .site-nav ul {
    flex-direction: column;
    gap: 0;
    padding: 5%;
  }

  .site-nav li {
    margin: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }

  .site-nav a {
    display: block;
    padding: 10px 5px;
  }
}

/* ---------- Bandeau d'introduction (diaporama) ---------- */

.hero {
  position: relative;
  overflow: hidden;
}

/* Seuls les arrière-plans tournent ; le texte reste fixe par-dessus. */
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
  background-size: cover;
  background-position: 50% 50%;
}

.hero-slide.active {
  opacity: 1;
}

.hero-content {
  position: relative;
  z-index: 1;
}

/* Divi anime le texte à chaque changement de diapositive : fondu montant
   (fadeBottom) de 0,7 s après un délai de 0,9 s. */
@keyframes fadeBottom {
  0%   { opacity: 0; transform: translateY(10%); }
  100% { opacity: 1; transform: translateY(0); }
}

.hero-content.animate {
  animation: fadeBottom 0.7s ease-in-out 0.9s both;
}

@media (prefers-reduced-motion: reduce) {
  .hero-content.animate {
    animation: none;
  }

  .hero-slide {
    transition: none;
  }
}

/* Voile blanc dégradé sur les photos, comme l'original */
.hero-slide-1 {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.5) 100%),
    url(/assets/images/champ-fleur.jpg);
}

.hero-slide-2 {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.5) 100%),
    url(/assets/images/lac-paisible.jpg);
}

.hero-slide-3 {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.5) 100%),
    url(/assets/images/fleur-jaune.jpg);
}

/* L'original applique padding 16% 8% de la rangée (1080px max) → ~173px
   verticalement et ~86px latéralement, réduits sur petits écrans. */
.hero-content {
  padding: min(173px, 12.8vw) min(86px, 6.4vw);
}

.hero h1 {
  font-size: 46px;
  line-height: 1;
  margin-bottom: 10px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.hero .hero-text {
  font-size: 18px;
  font-style: italic;
  font-weight: 300;
  color: #000;
}

.hero-dots {
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  text-align: center;
}

.hero-dots button {
  width: 10px;
  height: 10px;
  margin: 0 4px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.hero-dots button.active {
  background: rgba(0, 0, 0, 0.7);
}

@media (max-width: 767px) {
  .hero h1 {
    font-size: 36px;
  }

  .hero .hero-text {
    font-size: 17px;
  }
}

/* ---------- Animations d'entrée ----------
   Reprend les animations Divi du contenu au défilement : les boutons
   « en savoir plus » glissent depuis la gauche (slideLeft, 10 %), les images
   de cartes grossissent depuis le bas (zoomBottom), les liens texte glissent
   à 20 %. Une seule fois, 1 s, ease-in-out. Les éléments ne sont masqués
   que lorsque le JS est actif (classe .anim-ready). */

.anim-ready {
  opacity: 0;
}

.anim-ready.in-view {
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
}

.anim-slide-left.in-view { animation-name: slideLeft; }
.anim-slide-left-5.in-view { animation-name: slideLeft5; }
.anim-slide-left-20.in-view { animation-name: slideLeft20; }

/* Icônes de coordonnées : fondu descendant (et_pb_animation_top de Divi) */
.anim-fade-top.in-view {
  animation-name: fadeTop;
  animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
}

.anim-zoom-bottom.in-view {
  animation-name: zoomBottom;
  transform-origin: bottom;
}

@keyframes slideLeft {
  from { opacity: 1; transform: translate3d(-10%, 0, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes slideLeft5 {
  from { opacity: 1; transform: translate3d(-5%, 0, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes slideLeft20 {
  from { opacity: 1; transform: translate3d(-20%, 0, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes fadeTop {
  from { opacity: 0; transform: translateY(-10%); }
  to   { opacity: 1; transform: none; }
}

@keyframes zoomBottom {
  from { opacity: 0; transform: scale3d(0.9, 0.9, 0.9); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .anim-ready {
    opacity: 1;
  }

  .anim-ready.in-view {
    animation: none;
  }
}

/* ---------- Sections ---------- */

.section {
  padding: 60px 0;
}

.section-light {
  background: var(--bg-light);
}

/* Bandes terracotta : Divi additionne 60px (section) + 30px (rangée). */
.section-accent {
  background: var(--accent);
  color: #fff;
  padding: 90px 0;
  line-height: 1.8;
}

.section-accent h1,
.section-accent h2,
.section-accent h3 {
  color: #fff;
}

.section-accent h2 {
  margin-bottom: 30px; /* marge de module 20px + padding 10px du h2 Divi */
  line-height: 1.3;
}

.section-accent a {
  color: #fff;
}

/* Colonnes */

.cols {
  display: grid;
  gap: 5.5%;
  align-items: start;
}

.cols-2 { grid-template-columns: 1fr 1fr; }
.cols-3 { grid-template-columns: 1fr 1fr 1fr; }

@media (max-width: 980px) {
  .cols-2,
  .cols-3 {
    grid-template-columns: 1fr;
  }

  .cols > * + * {
    margin-top: 30px;
  }
}

/* ---------- Page d'accueil ---------- */

/* Les trois cartes de services */
.service-card {
  text-align: center;
}

.service-card .label {
  font-size: 17px;
  margin-bottom: 1em;
}

.service-card img {
  width: 100%;
  margin-bottom: 1.6em;
}

/* Encadré blanc avec ombre portée (« Je suis une psychologue… »).
   Rangée Divi élargie : 80 % de l'écran, plafonnée à 1280px — plus large
   que la colonne de contenu de 960px. */
.panel {
  background: #fff;
  box-shadow: 0 40px 110px 0 rgba(131, 146, 167, 0.5);
  width: 80%;
  max-width: 1280px;
  margin: 60px auto 0;
  padding: 60px 45px 60px 60px;
}

@media (max-width: 767px) {
  .panel {
    padding: 60px 20px;
  }
}

/* Portrait encadré */
.framed img {
  border: 14px solid rgba(123, 124, 127, 0.12);
}

.read-more {
  font-weight: 700;
  color: var(--accent) !important;
  text-decoration: none;
}

.read-more:hover {
  text-decoration: underline;
}

/* ---------- Bandeau « Prenez rendez-vous » / coordonnées ---------- */

.contact-item {
  text-align: center;
  font-weight: 300;
}

.contact-item .icon {
  display: inline-block;
  margin-bottom: 12px;
}

.contact-item .icon svg {
  width: 45px;
  height: 45px;
  fill: #fff;
}

.contact-item a {
  color: #fff;
}

/* Variante page Contact : icône dans une pastille blanche */
.contact-item.badge .icon {
  background: #fff;
  border-radius: 50%;
  padding: 25px;
  line-height: 0;
}

.contact-item.badge .icon svg {
  width: 25px;
  height: 25px;
  fill: #30303d;
}

.contact-item.badge {
  font-size: 15px;
}

/* ---------- Page À propos ---------- */

/* Portrait à cheval entre la section grise et la section terracotta.
   Divi : marge -180px + 30px de rangée = 150px au-dessus de la section,
   soit ≈ un tiers de l'image sur fond gris, deux tiers sur terracotta. */
.overlap-portrait {
  margin-top: -150px;
  max-width: 600px;
}

.overlap-portrait img {
  border: 8px solid rgba(255, 255, 255, 0.48);
}

.section-about-bottom {
  padding-top: 0;
}

.section-about-top {
  padding-top: 45px;
  padding-bottom: 160px;
}

@media (max-width: 767px) {
  .section-about-top {
    padding-bottom: 120px;
  }
}

/* ---------- Page Contact ---------- */

.contact-hero {
  padding: 100px 0;
  background-image: linear-gradient(90deg, #f4f0e9 30%, rgba(244, 240, 233, 0) 100%),
    url(/assets/images/champ-fleur.jpg);
  background-size: cover;
  background-position: 50% 50%;
}

.contact-hero h1 {
  font-family: 'Alice', Georgia, "Times New Roman", serif;
  font-size: 56px;
  letter-spacing: -3px;
  line-height: 1.1;
  max-width: 500px;
}

@media (max-width: 767px) {
  .contact-hero h1 {
    font-size: 36px;
  }
}

/* ---------- Pied de page ---------- */

.site-footer {
  background: var(--footer-bg);
  padding: 15px 0;
  font-size: 13px;
  color: #fff;
}

.site-footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.site-footer a {
  color: #fff;
}

.site-footer .social a {
  display: inline-block;
  line-height: 0;
}

.site-footer .social svg {
  width: 18px;
  height: 18px;
  fill: #fff;
}

@media (max-width: 767px) {
  .site-footer .container {
    justify-content: center;
    text-align: center;
  }
}