/* ============================================================
   NATHALIE PERRIER — Psychothérapeute
   Charte : Beige #DBD3C9 / Noir #000 / Burgundy #4E0303 / Vert #012F09
   Style : Simple and Minimal
   ============================================================ */

/* ---------- FONT FACE ---------- */
@font-face {
  font-family: 'The Seasons';
  src: url('fonts/the-seasons.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ---------- CUSTOM PROPERTIES ---------- */
:root {
  --color-beige: #DBD3C9;
  --color-beige-dark: #DEC7A9;
  --color-burgundy: #4E0303;
  --color-black: #000000;
  --color-white: #FFFFFF;

  --font-display: 'The Seasons', 'Georgia', serif;
  --font-body: 'Alkalami', 'Georgia', serif;
  --font-ui: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

  --max-width: 1200px;
  --header-height: 90px;
  --section-padding: clamp(3rem, 7vw, 6rem);
  --gap: clamp(1.5rem, 3vw, 2.5rem);
  --transition: 0.3s ease;

  --image-ambiance-url: url('images/approche_ambiance.jpg');
  --image-portrait-url: url('images/portrait.jpg');
  --image-lampe-url: url('images/lampe.jpg');
  --image-tableau-url: url('images/tableau.jpg');
  --image-coucher_soleil-url: url('images/coucher_soleil.jpg');
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.65rem);
  line-height: 1.75;
  color: var(--color-black);
  background-color: var(--color-beige);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
abbr[title] { text-decoration: none; border-bottom: none; }
address { font-style: normal; }

/* ---------- SKIP LINK ---------- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 1000;
  padding: 0.75rem 1.5rem;
  background: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 700;
  transition: top var(--transition);
}
.skip-link:focus { top: 0; outline: 3px solid var(--color-burgundy); outline-offset: 2px; }

/* ---------- FOCUS ---------- */
:focus-visible { outline: 3px solid var(--color-burgundy); outline-offset: 3px; }

/* ---------- SR-ONLY ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ============================================================
   HEADER — Nom à gauche, nav à droite, fond beige
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--color-beige);
  height: var(--header-height);
  transition: box-shadow var(--transition);
}
.site-header--scrolled {
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.06);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2rem);
  height: 100%;
}

.nav__logo-img { display: flex; align-items: center; flex-shrink: 0; transform: translateY(0.35em); }
.nav__logo-icon { height: clamp(4rem, 7vw, 5.5rem); width: auto; }

.nav__identity { display: flex; flex-direction: column; gap: 0; line-height: 1.2; margin-left: 0.5rem; margin-right: auto; }

.nav__logo { display: flex; gap: 0.4em; }
.nav__name, .nav__surname {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.4vw, 1.55rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-black);
}
.nav__profession {
  font-family: var(--font-display);
  font-size: clamp(0.8rem, 1vw, 1.1rem);
  font-style: italic;
  color: var(--color-black);
}
.nav__location {
  font-family: var(--font-display);
  font-size: clamp(0.75rem, 0.9vw, 1rem);
  font-style: italic;
  color: var(--color-black);
  opacity: 0.7;
}

/* Hamburger */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 10px;
  background: none; border: none; cursor: pointer;
}
.nav__toggle-bar {
  display: block; width: 24px; height: 2px;
  background: var(--color-black); border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 4vw, 3.5rem);
}
.nav__link {
  font-family: var(--font-ui);
  font-size: clamp(0.95rem, 1.2vw, 1.35rem);
  font-weight: 700;
  color: var(--color-black);
  letter-spacing: 0.02em;
  padding: 0.25rem 0;
  position: relative;
  transition: color var(--transition);
}
.nav__link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 2px;
  background: var(--color-black);
  transition: width var(--transition);
}
.nav__link:hover::after, .nav__link--active::after { width: 100%; }

/* ============================================================
   HERO — Image pleine largeur, texte en overlay à gauche
   ============================================================ */
.hero {
  margin-top: var(--header-height);
  position: relative;
  min-height: calc(100vh - var(--header-height));
  background: var(--color-beige);
  overflow: hidden;
}

.hero__image {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
  object-position: center 30%;
}

.hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - var(--header-height));
  max-width: var(--max-width);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
}

.hero__tagline {
  font-family: var(--font-body);
  font-size: clamp(1.8rem, 3.5vw, 3.4rem);
  line-height: 1.25;
  color: var(--color-black);
  margin-bottom: 1.5rem;
  font-weight: normal;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.hero__description {
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 1.2vw, 1.25rem);
  line-height: 1.8;
  color: var(--color-black);
  max-width: 500px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

/* ============================================================
   APPROCHE — Citation centrée + images à gauche, texte à droite
   ============================================================ */
.section {
  padding: var(--section-padding) 0;
  background: var(--color-beige);
}

.section__container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2rem);
}

.section__quote {
  text-align: center;
  margin-bottom: 3rem;
}
.section__quote-line {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(1.8rem, 2.8vw, 2.7rem);
  line-height: 1.35;
  color: var(--color-black);
}

.section__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: start;
}

.approche__images {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 15px;
    border-radius: 25px;
    width: 100%;
    aspect-ratio: 3060 / 2743;
}

.panneau {
    width: 100%;
    background-image: var(--image-ambiance-url);
    border-radius: 20px;
    background-repeat: no-repeat;
}

/* Bloc du haut : occupe les 3 colonnes — moitié haute de l'image */
.haut {
    grid-column: 1 / span 3;
    background-size: 100% 200%;
    background-position: center top;
}

/* Bloc bas gauche — quart bas-gauche de l'image */
.bas-gauche {
    grid-column: 1 / span 2;
    background-size: 150% 200%;
    background-position: left bottom;
}

/* Bloc bas droite — quart bas-droit de l'image */
.bas-droite {
    background-size: 300% 200%;
    background-position: right bottom;
}

.section__text {
    gap: 15px;
    padding: 15px;
    padding-inline: 20px;
    box-sizing: border-box;
    border-radius: 25px;
    background-color: var(--color-beige-dark);
    width: 100%;
    height: 100%;
    text-align: justify;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#pour-qui .section__container {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

#pour-qui .section__text {
    text-align: center;
    justify-content: space-evenly;
    aspect-ratio: 1 / 1;
}

.section__title {
  font-family: var(--font-body);
  font-size: clamp(1.4rem, 2.8vw, 2.7rem);
  color: var(--color-black);
  line-height: 1.3;
  margin-bottom: 1rem;
}

.section__description {
  margin-bottom: 1.5rem;
  line-height: 1.8;
}

.approche__cta {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.2vw, 1.3rem);
  color: var(--color-black);
  text-decoration: none;
  border-bottom: none;
  border: 1px solid var(--color-black);
  padding: 0.6em 1.5em;
  border-radius: 50px;
  padding-bottom: 0.15em;
  transition: opacity var(--transition);
}
.approche__cta:hover { opacity: 0.6; }


.section__intro {
  text-align: center;
  line-height: 1.6;
}

.pour_qui__images {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-image: var(--image-portrait-url);
    background-size: cover;
    background-position: top center;
    border-radius: 20px;
    background-repeat: no-repeat;
}

/* ============================================================
   SECTIONS 4-6 — Images en background (même pattern que 2-3)
   ============================================================ */
.objectifs__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-image: var(--image-lampe-url);
  background-size: cover;
  background-position: center;
  border-radius: 20px;
  background-repeat: no-repeat;
}

.demarche__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-image: var(--image-tableau-url);
  background-size: cover;
  background-position: center;
  border-radius: 20px;
  background-repeat: no-repeat;
}

.formations__images {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 15px;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.formations__image {
  width: 100%;
  background-image: var(--image-coucher_soleil-url);
  border-radius: 20px;
  background-repeat: no-repeat;
  background-size: 100% 200%;
}

/* Moitié haute de l'image */
.formations__image--haut {
  background-position: center top;
}

/* Moitié basse de l'image */
.formations__image--bas {
  background-position: center bottom;
}

#formations .section__text {
  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.35rem);
  line-height: 1.5;
}

.formations__list { padding: 0; }
.formations__list li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.35rem;
  line-height: 1.5;
}
.formations__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-black);
}

.formations__separator {
  margin-top: 0.75rem;
  line-height: 1.5;
}

.formations__public {
  margin-top: 1.5rem;
  font-weight: 600;
  font-family: var(--font-ui);
  font-size: clamp(0.9rem, 0.85rem + 0.25vw, 1.1rem);
}

/* ============================================================
   CONTACT — Centré, fond beige, texte noir
   ============================================================ */
.contact {
  position: relative;
  padding: var(--section-padding) 0 0;
  background: var(--color-beige);
  text-align: center;
  overflow: hidden;
}

.contact__image {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
  object-position: center 30%;
}

.contact__container {
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
  background-color: rgba(219, 211, 201, 0.55);
  border-radius: 25px;
  backdrop-filter: blur(3px);
}

.contact__title {
  font-family: var(--font-body);
  font-size: clamp(1.6rem, 3vw, 3rem);
  margin-bottom: 0.75rem;
  color: var(--color-black);
}

.contact__phone {
  margin-bottom: 2rem;
}
.contact__phone a {
  font-family: var(--font-body);
  font-size: clamp(1.3rem, 2.5vw, 2.2rem);
  color: var(--color-black);
  transition: opacity var(--transition);
}
.contact__phone a:hover { opacity: 0.6; }

.contact__address {
  line-height: 1.8;
}
.contact__name {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.5vw, 1.45rem);
  margin-bottom: 0.15rem;
}
.contact__role {
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.15rem);
  opacity: 0.75;
  margin-bottom: 0.5rem;
}
.contact__street {
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.15rem);
  opacity: 0.75;
}

.contact__footer {
  position: relative;
  z-index: 1;
  margin-top: 3rem;
  padding: 1.25rem clamp(1rem, 3vw, 2rem);
  border-top: 1px solid var(--color-beige-dark);
  text-align: center;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  opacity: 0.5;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .hero { min-height: 70vh; }
  .hero__content { min-height: 70vh; }

  .section__body {
    grid-template-columns: 1fr;
   }
  .approche__images { max-width: 100%; }

  .formations__images {
    grid-template-rows: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  :root { --header-height: 80px; }

  .nav__toggle { display: flex; }
  .nav__list {
    position: fixed;
    top: var(--header-height);
    left: 0; right: 0; bottom: 0;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    background: var(--color-beige);
    transform: translateX(100%);
    transition: transform var(--transition);
    padding: 2rem;
  }
  .nav__list--open { transform: translateX(0); }
  .nav__link { font-size: 1.15rem; }
}

@media (max-width: 480px) {
  :root { --header-height: 72px; }
  .nav__profession, .nav__location { display: none; }
}

/* ---------- PRINT ---------- */
@media print {
  .site-header, .nav__toggle, .skip-link { display: none; }
  .hero { margin-top: 0; }
  body { font-size: 11pt; }
}