/* ===========================================================
   Lucie Serrano — Psychologue / Neuropsychologue / TCC
   Feuille de style partagée à toutes les pages du site
   =========================================================== */

:root{
  /* Palette extraite du logo (fond blush, traits bruns) */
  --blush:        #F7EFED;
  --blush-deep:   #EFDFD8;
  --card:         #FDF9F7;
  --white:        #FFFFFF;
  --ink:          #34302D;
  --ink-soft:     #4A4644;
  --text:         #433E3B;
  --text-muted:   #6B615A;
  --accent:       #A9694F;
  --accent-deep:  #8B5540;
  --line:         #E4D2C9;
  --line-soft:    #EEE2DC;

  --font-display: 'Newsreader', Georgia, serif;
  --font-body:    'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --container: 1120px;
  --radius: 3px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--text);
  background:var(--blush);
  line-height:1.68;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
img{max-width:100%; display:block;}
ul,ol{list-style:none;}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 2.4rem;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--ink);
  font-weight:500;
  line-height:1.22;
}

h1{font-size:3rem;}
h2{font-size:2.1rem;}
h3{font-size:1.35rem;}

p{max-width:62ch;}
.text-muted{color:var(--text-muted);}

a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  text-decoration:none;
  background:var(--ink);
  color:var(--blush);
  padding:0.85rem 1.7rem;
  border-radius:var(--radius);
  font-size:0.94rem;
  font-weight:600;
  letter-spacing:0.2px;
  border:1px solid var(--ink);
  transition:background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn:hover{background:var(--accent-deep); border-color:var(--accent-deep);}

.btn-ghost{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  text-decoration:none;
  color:var(--ink);
  padding:0.85rem 0.2rem;
  font-size:0.94rem;
  font-weight:600;
  border-bottom:1px solid var(--ink);
}
.btn-ghost:hover{color:var(--accent-deep); border-color:var(--accent-deep);}

.btn-outline{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  text-decoration:none;
  color:var(--blush);
  border:1px solid var(--blush);
  padding:0.8rem 1.6rem;
  border-radius:var(--radius);
  font-size:0.94rem;
  font-weight:600;
}
.btn-outline:hover{background:rgba(255,255,255,0.1);}

/* ---------- En-tête / navigation ---------- */
.site-header{
  position:sticky;
  top:0;
  background:rgba(247,239,237,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
  z-index:200;
}
.nav-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.3rem 2.4rem;
  max-width:var(--container);
  margin:0 auto;
  gap:1.5rem;
}
.brand{
  display:flex;
  align-items:center;
  gap:0.9rem;
  text-decoration:none;
  flex-shrink:0;
}
.brand img{
  width:64px;
  height:64px;
  object-fit:contain;
}
.brand-text{line-height:1.2;}
.brand-text .name{
  font-family:var(--font-display);
  font-size:1.3rem;
  color:var(--ink);
  font-weight:600;
  display:block;
}
.brand-text .role{
  font-size:0.7rem;
  color:var(--text-muted);
  letter-spacing:0.4px;
  line-height:1.5;
  display:block;
  margin-top:0.15rem;
}

.main-nav{
  display:flex;
  align-items:center;
  gap:1.1rem;
  flex:1;
  justify-content:center;
  min-width:0;
}
.main-nav a{
  text-decoration:none;
  color:var(--text);
  font-size:0.82rem;
  font-weight:500;
  padding:0.3rem 0;
  border-bottom:1px solid transparent;
  transition:border-color 0.2s ease, color 0.2s ease;
  white-space:nowrap;
}
.main-nav a:hover{color:var(--accent-deep);}
.main-nav > a.active{
  color:var(--ink);
  border-bottom:1px solid var(--accent);
  font-weight:600;
}
.nav-dropdown{position:relative; border-bottom:0; padding:0;}
.nav-dropdown summary{list-style:none; cursor:pointer; color:var(--text); font-size:0.82rem; font-weight:500; padding:0.3rem 0; white-space:nowrap;}
.nav-dropdown summary::-webkit-details-marker{display:none;}
.nav-dropdown summary span{font-size:0.9rem; margin-left:0.15rem;}
.nav-dropdown[open] summary,.nav-dropdown summary:hover{color:var(--accent-deep);}
.nav-dropdown-menu{position:absolute; top:calc(100% + 0.75rem); left:50%; transform:translateX(-50%); min-width:220px; padding:0.45rem; background:var(--card); border:1px solid var(--line); box-shadow:0 10px 24px rgba(52,48,45,0.12); z-index:210;}
.nav-dropdown-menu a{display:block; padding:0.65rem 0.8rem; border-bottom:0; white-space:normal;}
.nav-dropdown-menu a:hover{background:var(--blush-deep);}

.nav-cta{flex-shrink:0;}
.nav-toggle{display:none;}

@media (max-width:1100px){
  .main-nav{
    position:absolute;
    top:100%; left:0; right:0;
    background:var(--card);
    border-bottom:1px solid var(--line);
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:0.5rem 2rem 1rem;
    display:none;
  }
  .main-nav.open{display:flex;}
  .main-nav a{width:100%; padding:0.75rem 0; border-bottom:1px solid var(--line-soft);}
  .nav-dropdown{width:100%;}
  .nav-dropdown summary{padding:0.75rem 0; border-bottom:0;}
  .nav-dropdown-menu{position:static; transform:none; min-width:0; padding:0 0 0 1rem; border:0; box-shadow:none; background:transparent;}
  .nav-dropdown-menu a{padding:0.65rem 0; border-bottom:1px solid var(--line-soft);}
  .nav-toggle{
    display:block;
    background:none;
    border:1px solid var(--ink);
    border-radius:var(--radius);
    width:40px; height:36px;
    font-size:1.1rem;
    color:var(--ink);
  }
  .nav-cta{display:none;}
}

/* ---------- Pied de page ---------- */
.site-footer{
  background:var(--ink);
  color:var(--blush);
  margin-top:6rem;
}
.footer-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:3.4rem 2.4rem 2.2rem;
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:2.5rem;
}
.footer-inner h4{
  font-family:var(--font-body);
  color:var(--blush);
  font-size:0.82rem;
  text-transform:uppercase;
  letter-spacing:0.8px;
  font-weight:600;
  margin-bottom:0.9rem;
  opacity:0.75;
}
.footer-inner p, .footer-inner a{
  font-size:0.88rem;
  color:rgba(247,239,237,0.78);
  margin-bottom:0.4rem;
  text-decoration:none;
}
.footer-inner a:hover{color:var(--blush);}
.footer-brand{
  font-family:var(--font-display);
  font-size:1.2rem;
  color:var(--blush);
  margin-bottom:0.6rem;
}
.footer-bottom{
  border-top:1px solid rgba(247,239,237,0.14);
  padding:1.2rem 2.4rem;
  text-align:center;
  font-size:0.78rem;
  color:rgba(247,239,237,0.55);
}

/* ---------- Motif décoratif (arc du logo, réutilisé sobrement) ---------- */
.motif-arc{
  position:absolute;
  pointer-events:none;
  opacity:0.5;
}

/* ---------- Hero (accueil) ---------- */
.hero{
  position:relative;
  padding:5.5rem 0 5rem;
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:3.5rem;
  align-items:center;
}
.hero-kicker{
  font-size:0.95rem;
  color:var(--accent-deep);
  font-weight:600;
  margin-bottom:1rem;
}
.hero h1{
  font-size:3.1rem;
  margin-bottom:1.4rem;
  max-width:14ch;
}
.hero-lede{
  font-size:1.12rem;
  color:var(--text);
  max-width:46ch;
  margin-bottom:2.1rem;
}
.hero-ctas{display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap;}

.hero-visual{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-visual .hero-logo{
  width:88%;
  max-width:440px;
}

@media (max-width:880px){
  .hero-grid{grid-template-columns:1fr; gap:2.5rem;}
  .hero h1{font-size:2.3rem; max-width:none;}
  .hero-visual{order:-1; max-width:280px; margin:0 auto;}
}

/* ---------- Sections générales ---------- */
section{padding:4.5rem 0;}
.section-head{margin-bottom:2.6rem; max-width:56ch;}
.section-head .tag{font-size:0.78rem; color:var(--accent-deep); font-weight:600; margin-bottom:0.7rem; display:block;}
.section-head h2{margin-bottom:0.9rem;}
.section-alt{background:var(--blush-deep);}

/* ---------- Orientation depuis l'accueil ---------- */
.intent-section{background:var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.intent-grid{display:grid; grid-template-columns:repeat(2, 1fr); border-top:1px solid var(--line);}
.intent-link{display:grid; grid-template-columns:2rem 1fr auto; gap:1rem; align-items:start; padding:1.6rem 1.6rem 1.6rem 0; text-decoration:none; border-bottom:1px solid var(--line);}
.intent-link + .intent-link{border-left:1px solid var(--line); padding-left:1.6rem;}
.intent-link:hover strong,.intent-link:hover .intent-arrow{color:var(--accent-deep);}
.intent-number{font-family:var(--font-display); color:var(--accent-deep); font-size:1.1rem;}
.intent-link strong{display:block; color:var(--ink); font-family:var(--font-display); font-size:1.28rem; font-weight:500; line-height:1.25;}
.intent-link small{display:block; color:var(--text-muted); font-size:0.88rem; line-height:1.5; margin-top:0.45rem;}
.intent-arrow{color:var(--ink); font-size:1.2rem; transition:color 0.2s ease;}

/* ---------- Motifs de consultation (liste asymétrique, pas des cards identiques) ---------- */
.motif-list{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:0;
  border-top:1px solid var(--line);
}
.motif-item{
  padding:1.6rem 1.8rem 1.6rem 0;
  border-bottom:1px solid var(--line);
}
.motif-item:nth-child(odd){border-right:1px solid var(--line); padding-right:1.8rem;}
.motif-item:nth-child(even){padding-left:1.8rem;}
.motif-item h3{font-size:1.08rem; margin-bottom:0.4rem;}
.motif-item p{font-size:0.94rem; color:var(--text-muted); max-width:42ch;}

@media (max-width:700px){
  .motif-list{grid-template-columns:1fr;}
  .motif-item:nth-child(odd){border-right:none; padding-right:0;}
  .motif-item:nth-child(even){padding-left:0;}
}

/* ---------- Aperçu prestations (accueil) ---------- */
.services-preview{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.service-tile{
  background:var(--card);
  padding:2.2rem 2rem;
  text-decoration:none;
  display:block;
  transition:background-color 0.2s ease;
}
.service-tile:hover{background:var(--white);}
.service-tile .tag{font-size:0.78rem; color:var(--accent-deep); font-weight:600; margin-bottom:0.7rem; display:block;}
.service-tile h3{font-size:1.2rem; margin-bottom:0.6rem;}
.service-tile p{font-size:0.9rem; color:var(--text-muted); margin-bottom:1.2rem;}
.service-tile .arrow{font-size:0.86rem; color:var(--ink); font-weight:600;}

@media (max-width:880px){
  .services-preview{grid-template-columns:1fr;}
}

/* ---------- Bandeau CTA ---------- */
.cta-band{
  background:var(--ink);
  color:var(--blush);
  border-radius:6px;
  padding:3.2rem 3rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  flex-wrap:wrap;
}
.cta-band h2{color:var(--blush); font-size:1.7rem; max-width:22ch;}
.cta-band p{color:rgba(247,239,237,0.72); margin-top:0.5rem;}

/* ---------- Page interne : en-tête de page ---------- */
.page-header{padding:3.6rem 0 2.6rem; border-bottom:1px solid var(--line);}
.page-header .eyebrow-plain{font-size:0.94rem; color:var(--accent-deep); font-weight:600; margin-bottom:0.8rem;}
.page-header h1{font-size:2.5rem; max-width:20ch; margin-bottom:1rem;}
.page-header .lede{font-size:1.05rem; color:var(--text-muted); max-width:56ch;}

/* ---------- Bio / approche ---------- */
.bio-grid{
  display:grid;
  grid-template-columns:0.8fr 1.2fr;
  gap:3.5rem;
  align-items:start;
}
.bio-portrait{
  border-radius:6px;
  border:1px solid var(--line);
  background:var(--card);
  aspect-ratio:4/5;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.bio-portrait img{width:58%; object-fit:contain;}
.bio-credentials{
  margin-top:1.6rem;
  padding-top:1.4rem;
  border-top:1px solid var(--line);
}
.bio-credentials li{
  font-size:0.88rem;
  color:var(--text-muted);
  padding-left:1.1rem;
  position:relative;
  margin-bottom:0.55rem;
}
.bio-credentials li::before{
  content:'';
  position:absolute; left:0; top:0.5em;
  width:5px; height:5px;
  background:var(--accent);
  border-radius:50%;
}
.bio-copy p{margin-bottom:1.15rem; font-size:1.02rem; text-align:justify; max-width:none; hyphens:auto;}

.values-list{
  margin-top:1rem;
  border-top:1px solid var(--line);
}
.values-item{
  display:grid;
  grid-template-columns:2.6rem 1fr;
  gap:1rem;
  padding:1.5rem 0;
  border-bottom:1px solid var(--line);
}
.values-item .mark{
  font-family:var(--font-display);
  font-size:1.15rem;
  color:var(--accent-deep);
}
.values-item h3{font-size:1.05rem; margin-bottom:0.35rem;}
.values-item p{font-size:0.94rem; color:var(--text-muted);}

@media (max-width:880px){
  .bio-grid{grid-template-columns:1fr;}
  .bio-portrait{max-width:260px; margin:0 auto;}
}

/* ---------- Prestations & tarifs ---------- */
.modalites{
  display:flex;
  gap:1.6rem;
  margin-bottom:3rem;
  flex-wrap:wrap;
}
.modalite-chip{
  display:flex;
  align-items:center;
  gap:0.6rem;
  background:var(--card);
  border:1px solid var(--line);
  padding:0.7rem 1.1rem;
  border-radius:30px;
  font-size:0.86rem;
  color:var(--text);
}
.modalite-chip svg{width:16px; height:16px; stroke:var(--accent-deep); flex-shrink:0;}

.price-list{border-top:1px solid var(--ink);}
.price-row{
  display:grid;
  grid-template-columns:1fr minmax(150px, 230px);
  gap:2rem;
  padding:2.3rem 0;
  border-bottom:1px solid var(--line);
  align-items:start;
}
.price-row .tag{font-size:0.78rem; color:var(--accent-deep); font-weight:600; margin-bottom:0.5rem; display:block;}
.price-row h3{font-size:1.4rem; margin-bottom:0.7rem;}
.price-row p.desc{font-size:0.98rem; color:var(--text); max-width:54ch; margin-bottom:0.9rem;}
.price-row .modes{display:flex; gap:0.6rem; flex-wrap:wrap;}
.mode-badge{
  font-size:0.76rem;
  color:var(--ink-soft);
  border:1px solid var(--line);
  padding:0.28rem 0.7rem;
  border-radius:20px;
  background:var(--blush-deep);
}
.price-figure{
  text-align:right;
  white-space:nowrap;
  padding-top:0.1rem;
}
.price-figure .amount{
  font-family:var(--font-display);
  font-size:2rem;
  color:var(--ink);
  font-weight:600;
}
.price-figure .unit{
  display:block;
  font-size:0.78rem;
  color:var(--text-muted);
  margin-top:0.2rem;
  max-width:100%;
  margin-left:auto;
}

.price-note{
  margin-top:2.2rem;
  padding:1.3rem 1.6rem;
  background:var(--blush-deep);
  border-radius:6px;
  font-size:0.9rem;
  color:var(--ink-soft);
}

.support-note{
  margin-top:2rem;
  padding:1.3rem 1.6rem;
  background:var(--blush-deep);
  border-left:3px solid var(--accent);
  font-size:0.96rem;
  color:var(--ink-soft);
}
.optional-step p{font-style:italic;}

@media (max-width:700px){
  .price-row{grid-template-columns:1fr;}
  .price-figure{text-align:left;}
  .price-figure .unit{margin-left:0;}
}

/* ---------- Déroulé (étapes) ---------- */
.steps{counter-reset:step; margin-top:1rem;}
.steps li{
  counter-increment:step;
  display:grid;
  grid-template-columns:2.6rem 1fr;
  gap:1.2rem;
  padding:1.5rem 0;
  border-bottom:1px solid var(--line);
}
.steps li:first-child{border-top:1px solid var(--line);}
.steps li::before{
  content:counter(step, decimal-leading-zero);
  font-family:var(--font-display);
  font-size:1.1rem;
  color:var(--accent-deep);
}
.steps h4{font-size:1.03rem; margin-bottom:0.3rem; color:var(--ink);}
.steps p{font-size:0.94rem; color:var(--text-muted);}

.track-label{
  font-size:0.92rem;
  font-weight:600;
  color:var(--ink);
  margin:3rem 0 0.4rem;
  scroll-margin-top:110px;
}
.track-label:first-of-type{margin-top:0;}

/* ---------- FAQ ---------- */
.faq-list{border-top:1px solid var(--line);}
details{       
  border-bottom:1px solid var(--line);
  padding:1.3rem 0;
}
.nav-dropdown{border-bottom:0; padding:0;}
.nav-dropdown > summary{border-bottom:0;}
summary{
  cursor:pointer;
  font-weight:600;
  color:var(--ink);
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  font-size:1.02rem;
}
summary::-webkit-details-marker{display:none;}
summary .plus{
  font-family:var(--font-display);
  font-size:1.3rem;
  color:var(--accent-deep);
  flex-shrink:0;
  transition:transform 0.2s ease;
}
details[open] summary .plus{transform:rotate(45deg);}
details p{margin-top:0.9rem; color:var(--text-muted); font-size:0.96rem; max-width:64ch;}

/* ---------- Contact ---------- */
.contact-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3.5rem;
  align-items:start;
}
.booking-panel{display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:1.8rem 2rem; background:var(--blush-deep); border:1px solid var(--line);}
.booking-panel .tag{display:block; color:var(--accent-deep); font-weight:600; font-size:0.78rem; margin-bottom:0.35rem;}
.booking-panel h2{font-size:1.5rem; margin-bottom:0.35rem;}
.booking-panel p{font-size:0.92rem; color:var(--text-muted);}
.contact-block{margin-bottom:2rem;}
.contact-block h3{font-size:1rem; margin-bottom:0.7rem; color:var(--ink);}
.contact-block p{font-size:0.96rem; color:var(--text-muted); margin-bottom:0.25rem;}
.contact-block a{color:var(--accent-deep); text-decoration:none; font-weight:600;}
.contact-block a:hover{text-decoration:underline;}

.map-wrap{
  border-radius:6px;
  overflow:hidden;
  border:1px solid var(--line);
  margin-bottom:1rem;
}
.map-wrap iframe{width:100%; height:320px; border:0; display:block;}
.map-note{font-size:0.8rem; color:var(--text-muted);}

@media (max-width:880px){
  .main-nav{overflow-y:auto; max-height:calc(100vh - 80px);}
  .contact-layout{grid-template-columns:1fr;}
  .booking-panel{align-items:flex-start; flex-direction:column;}
}

@media (max-width:700px){
  .nav-row{padding:0.9rem 1rem; gap:0.6rem;}
  .brand{gap:0.55rem; min-width:0;}
  .brand img{width:48px; height:48px;}
  .brand-text .name{font-size:1.08rem;}
  .brand-text .role{font-size:0.58rem; letter-spacing:0;}
  .nav-toggle{width:36px; height:34px; flex-shrink:0;}
  .intent-grid{grid-template-columns:1fr;}
  .intent-link + .intent-link{border-left:0; padding-left:0;}
}

/* ---------- Utilitaires ---------- */
.mt-lg{margin-top:3rem;}
.mt-md{margin-top:1.4rem;}
.mt-sm{margin-top:1.2rem;}
.mb-xl{margin-bottom:3rem;}
.mb-md{margin-bottom:1rem;}
.skip-link{
  position:absolute;
  left:1rem; top:-3rem;
  background:var(--ink);
  color:var(--blush);
  padding:0.6rem 1rem;
  border-radius:var(--radius);
  font-size:0.85rem;
  font-weight:600;
  text-decoration:none;
  z-index:500;
  transition:top 0.15s ease;
}
.skip-link:focus{top:1rem;}

/* ---------- Mentions légales ---------- */
.legal-container{max-width:80ch;}
.legal-container h3{margin-bottom:0.8rem;}
.legal-container p{margin-bottom:1.8rem; color:var(--text);}
.legal-container p.no-mb{margin-bottom:0;}

/* ---------- Portrait photo (Qui suis-je) ---------- */
.bio-portrait img.bio-photo{width:100%; height:100%; object-fit:cover;}

.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;
}