/* =========================================================
   Pr. Lhabib Abelkassem — Psychiatre / Psychothérapeute
   Palette : encre teal profonde + parchemin chaud + laiton
   Signature : le "trait d'onde" — rythme bilatéral (EMDR)
   ========================================================= */

:root{
  --ink:        #1B2A2E;
  --ink-soft:   #3A4B4E;
  --paper:      #F5F2EA;
  --panel:      #FFFFFF;
  --teal-deep:  #1F4547;
  --teal-mid:   #4C7B76;
  --teal-pale:  #E4EDEA;
  --gold:       #A9812E;
  --gold-soft:  #D8C48F;
  --line:       #DEd6C3;
  --shadow:     0 18px 40px -22px rgba(27,42,46,.35);
  --radius:     2px;
  --maxw:       1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Public Sans", "Segoe UI", Arial, sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:"Fraunces", Georgia, serif;
  font-weight:600;
  color:var(--teal-deep);
  margin:0 0 .5em;
  letter-spacing:.2px;
}
p{margin:0 0 1em;}
a{color:var(--teal-deep); text-decoration:none;}
a:hover{color:var(--gold);}
img{max-width:100%; display:block;}
.container{max-width:var(--maxw); margin:0 auto; padding:0 28px;}

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

/* ---------- Bandeau utilitaire ---------- */
.topbar{
  background:var(--teal-deep);
  color:#EAF2F0;
  font-size:13.5px;
}
.topbar .container{
  display:flex; flex-wrap:wrap; gap:6px 26px;
  align-items:center; justify-content:space-between;
  padding-top:9px; padding-bottom:9px;
}
.topbar a{color:#EAF2F0;}
.topbar a:hover{color:var(--gold-soft);}
.topbar .topbar-item{display:flex; align-items:center; gap:7px;}
.topbar svg{width:14px; height:14px; flex:none; opacity:.85;}

/* ---------- Header / Nav ---------- */
header.site-header{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:40;
}
.brandbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:18px 0;
}
.brand{display:flex; align-items:center; gap:14px;}
.brand-mark{
  width:46px; height:46px; border-radius:50%;
  border:1.5px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-family:"Fraunces", serif; font-weight:600; color:var(--teal-deep);
  font-size:19px; flex:none;
}
.brand-text{line-height:1.25;}
.brand-text .name{
  font-family:"Fraunces", serif; font-weight:600; font-size:19px; color:var(--ink);
  display:block;
}
.brand-text .role{
  font-size:13px; color:var(--teal-mid); letter-spacing:.3px;
}

nav.mainnav ul{
  list-style:none; display:flex; gap:2px; margin:0; padding:0;
}
nav.mainnav a{
  display:inline-block; padding:10px 16px;
  font-size:14.5px; font-weight:600; color:var(--ink-soft);
  letter-spacing:.2px; border-radius:var(--radius);
}
nav.mainnav a:hover{color:var(--teal-deep); background:var(--teal-pale);}
nav.mainnav a.active{color:var(--teal-deep);}
nav.mainnav a.active{position:relative;}
nav.mainnav a.active::after{
  content:""; position:absolute; left:16px; right:16px; bottom:5px; height:2px;
  background:var(--gold);
}
.nav-toggle{display:none;}

/* ---------- Onde signature (motif bilatéral EMDR) ---------- */
.wave-divider{
  height:22px;
  background-repeat:repeat-x;
  background-size:64px 22px;
  background-position:center;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='22' viewBox='0 0 64 22'><path d='M0 11 C 8 1, 16 21, 32 11 S 56 1, 64 11' fill='none' stroke='%23A9812E' stroke-width='1.6'/></svg>");
  opacity:.8;
}
.wave-divider.dense{background-size:40px 16px; height:16px;}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(180deg, var(--teal-pale) 0%, var(--paper) 78%);
  padding:64px 0 46px;
}
.hero .container{
  display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center;
}
.eyebrow{
  font-size:13px; font-weight:700; letter-spacing:2.2px; text-transform:uppercase;
  color:var(--gold); margin-bottom:14px; display:block;
}
.hero h1{font-size:clamp(30px, 4vw, 44px); line-height:1.12; margin-bottom:10px;}
.hero .subtitle{
  font-family:"Fraunces", serif; font-size:19px; color:var(--teal-mid);
  margin-bottom:20px;
}
.hero .lede{font-size:16.5px; color:var(--ink-soft); max-width:46ch; margin-bottom:26px;}
.hero-portrait{
  position:relative; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow);
  aspect-ratio:4/5;
}
.hero-portrait img{width:100%; height:100%; object-fit:cover; object-position:top center;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap;}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 24px; border-radius:var(--radius);
  font-weight:700; font-size:14.5px; letter-spacing:.3px;
  border:1.5px solid transparent; cursor:pointer;
}
.btn-primary{background:var(--teal-deep); color:#fff;}
.btn-primary:hover{background:#163736; color:#fff;}
.btn-ghost{border-color:var(--teal-deep); color:var(--teal-deep); background:transparent;}
.btn-ghost:hover{background:var(--teal-deep); color:#fff;}

/* ---------- Sections génériques ---------- */
section{padding:56px 0;}
.section-head{max-width:640px; margin-bottom:36px;}
.section-head .eyebrow{margin-bottom:10px;}
.section-head h2{font-size:clamp(24px,3vw,32px);}
.section-head p{color:var(--ink-soft);}

/* ---------- Cartes 3 colonnes ---------- */
.cards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
}
.card{
  background:var(--panel); border:1px solid var(--line);
  padding:30px 26px; border-radius:var(--radius);
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
.card .card-icon{
  width:42px; height:42px; margin-bottom:18px;
  color:var(--teal-deep);
}
.card h3{font-size:19px; margin-bottom:10px;}
.card p{color:var(--ink-soft); font-size:15px; margin-bottom:14px;}
.card .card-link{font-weight:700; font-size:14px; color:var(--gold);}

/* ---------- Bande intro / bio courte ---------- */
.intro{background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.intro .container{max-width:840px; text-align:center;}
.intro p{font-size:18px; color:var(--ink-soft); font-family:"Fraunces", serif; font-weight:400; line-height:1.55;}

/* ---------- Page À propos ---------- */
.bio-grid{
  display:grid; grid-template-columns:.8fr 1.2fr; gap:52px; align-items:start;
}
.bio-portrait{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); position:sticky; top:110px;}
.credentials{list-style:none; margin:0; padding:0;}
.credentials li{
  padding:14px 0 14px 30px; border-bottom:1px solid var(--line);
  position:relative; color:var(--ink-soft); font-size:15.5px;
}
.credentials li:first-child{padding-top:0;}
.credentials li::before{
  content:""; position:absolute; left:0; top:19px;
  width:9px; height:9px; border:1.5px solid var(--gold); border-radius:50%;
}
.credentials strong{color:var(--ink); font-weight:600;}

/* ---------- Page Services ---------- */
.services-list{display:grid; grid-template-columns:repeat(2,1fr); gap:22px;}
.service-item{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 24px; display:flex; gap:18px; align-items:flex-start;
}
.service-item .num{
  font-family:"Fraunces", serif; font-size:15px; color:var(--gold);
  border:1.5px solid var(--gold-soft); border-radius:50%;
  width:34px; height:34px; flex:none;
  display:flex; align-items:center; justify-content:center;
}
.service-item h3{font-size:17px; margin-bottom:6px;}
.service-item p{font-size:14.5px; color:var(--ink-soft); margin:0;}

/* ---------- Page Contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start;}
.info-block{margin-bottom:26px;}
.info-block h3{font-size:14px; text-transform:uppercase; letter-spacing:1.4px; color:var(--gold); margin-bottom:8px;}
.info-block p{color:var(--ink-soft); margin:0;}
.map-frame{
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  aspect-ratio:4/3;
}
.map-frame iframe{width:100%; height:100%; border:0;}

.contact-form{background:var(--panel); border:1px solid var(--line); padding:30px; border-radius:var(--radius);}
.contact-form label{display:block; font-size:13.5px; font-weight:700; color:var(--ink-soft); margin-bottom:6px;}
.contact-form input, .contact-form textarea{
  width:100%; padding:11px 13px; margin-bottom:18px;
  border:1px solid var(--line); border-radius:var(--radius);
  font-family:inherit; font-size:15px; background:var(--paper); color:var(--ink);
}
.contact-form input:focus, .contact-form textarea:focus{
  outline:none; border-color:var(--teal-deep); background:#fff;
}
.contact-form textarea{min-height:130px; resize:vertical;}

/* ---------- CTA bande ---------- */
.cta-band{
  background:var(--teal-deep); color:#EAF2F0; text-align:center;
}
.cta-band h2{color:#fff;}
.cta-band p{color:#CFE1DD; max-width:52ch; margin:0 auto 24px;}
.cta-band .btn-primary{background:var(--gold); }
.cta-band .btn-primary:hover{background:#8F6A26;}
.cta-band .btn-ghost{border-color:#EAF2F0; color:#EAF2F0;}
.cta-band .btn-ghost:hover{background:#fff; color:var(--teal-deep);}

/* ---------- Footer ---------- */
footer.site-footer{
  background:var(--ink); color:#CBD6D3; padding:48px 0 20px; font-size:14.5px;
}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin-bottom:32px;
}
.footer-grid h4{color:#fff; font-size:15px; letter-spacing:.4px; margin-bottom:14px;}
.footer-grid p, .footer-grid a{color:#AEBDB9;}
.footer-grid a:hover{color:var(--gold-soft);}
.footer-nav{list-style:none; margin:0; padding:0;}
.footer-nav li{margin-bottom:9px;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12); padding-top:18px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:13px; color:#8AA09B;
}

/* ---------- Responsive ---------- */
@media (max-width:880px){
  .hero .container{grid-template-columns:1fr;}
  .hero-portrait{max-width:320px; margin:0 auto;}
  .cards{grid-template-columns:1fr;}
  .bio-grid{grid-template-columns:1fr;}
  .bio-portrait{position:static; max-width:320px; margin:0 auto 20px;}
  .services-list{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr; gap:26px;}
  nav.mainnav ul{flex-direction:column; gap:0;}
  nav.mainnav{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    box-shadow:var(--shadow);
  }
  nav.mainnav.open{display:block;}
  nav.mainnav a{display:block; padding:14px 24px; border-bottom:1px solid var(--line);}
  .nav-toggle{
    display:flex; align-items:center; justify-content:center;
    width:42px; height:42px; border:1px solid var(--line); background:none;
    border-radius:var(--radius); cursor:pointer;
  }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
    content:""; display:block; width:20px; height:2px; background:var(--ink);
    position:relative; transition:.2s;
  }
  .nav-toggle span::before{position:absolute; top:-6px;}
  .nav-toggle span::after{position:absolute; top:6px;}
}
@media (max-width:600px){
  .topbar .container{flex-direction:column; align-items:flex-start; gap:4px;}
}