/* ==========================================================================
   Pascale Roudier — Graphothérapeute
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&display=swap');

:root{
  --cream:      #F7F3EC;
  --cream-soft:  #EFE8DA;
  --ink:         #2B3A55;
  --ink-soft:    #4C5A73;
  --clay:        #A34A4A;
  --clay-soft:   #C97C6D;
  --sage:        #7C9070;
  --sage-soft:   #DCE3D4;
  --paper:       #FFFFFF;

  --serif: 'Fraunces', Georgia, serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

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

a{ color:var(--clay); text-decoration:none; }
a:hover{ text-decoration:underline; }

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

h1,h2,h3{
  font-family:var(--serif);
  font-weight:600;
  color:var(--ink);
  line-height:1.15;
  margin:0 0 0.5em;
}

h1{ font-size:clamp(2.1rem, 4vw, 3.2rem); }
h2{ font-size:clamp(1.6rem, 3vw, 2.3rem); }
h3{ font-size:1.3rem; }

p{ margin:0 0 1em; }

.container{
  max-width:1080px;
  margin:0 auto;
  padding:0 24px;
}

/* ---------- header / nav ---------- */

.site-header{
  background:var(--cream);
  border-bottom:1px solid rgba(43,58,85,0.08);
  position:sticky;
  top:0;
  z-index:50;
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 24px;
  max-width:1080px;
  margin:0 auto;
  gap:24px;
}

.brand{
  font-family:var(--serif);
  font-size:1.25rem;
  font-weight:600;
  color:var(--ink);
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:10px;
}
.brand-logo{
  width:34px;
  height:34px;
  flex-shrink:0;
}
.brand:hover{ text-decoration:none; }
.brand span{ color:var(--clay); }

.nav-toggle{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  padding:8px;
}
.nav-toggle svg{ width:26px; height:26px; }

nav.main-nav ul{
  list-style:none;
  display:flex;
  gap:28px;
  margin:0;
  padding:0;
  flex-wrap:wrap;
}

nav.main-nav a{
  color:var(--ink-soft);
  font-size:0.97rem;
  font-weight:500;
  padding:6px 2px;
  border-bottom:2px solid transparent;
  transition:border-color .2s, color .2s;
}
nav.main-nav a:hover,
nav.main-nav a.active{
  color:var(--ink);
  border-bottom-color:var(--clay);
  text-decoration:none;
}

@media (max-width: 780px){
  .nav-toggle{ display:block; }
  nav.main-nav{
    display:none;
    width:100%;
    order:3;
  }
  nav.main-nav.open{ display:block; }
  nav.main-nav ul{
    flex-direction:column;
    gap:2px;
    padding:12px 0 18px;
  }
  nav.main-nav a{
    display:block;
    padding:10px 4px;
    border-bottom:1px solid rgba(43,58,85,0.08);
  }
  .header-inner{ flex-wrap:wrap; }
}

/* ---------- hero ---------- */

.hero{
  padding:72px 0 56px;
  text-align:center;
}
.hero .eyebrow{
  font-family:var(--serif);
  font-style:italic;
  color:var(--clay);
  font-size:1.3rem;
  margin-bottom:0.2em;
}
.hero .eyebrow small{
  display:block;
  font-family:var(--sans);
  font-style:normal;
  font-size:0.85rem;
  color:var(--ink-soft);
  margin-top:6px;
  letter-spacing:0.03em;
  text-transform:uppercase;
}

.page-hero{
  padding:56px 0 36px;
  text-align:center;
  border-bottom:1px solid rgba(43,58,85,0.08);
}
.page-hero p{
  color:var(--ink-soft);
  max-width:620px;
  margin:0 auto;
}

/* ---------- sections / feature rows ---------- */

.section{ padding:64px 0; }
.section.alt{ background:var(--cream-soft); }

.feature-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
  padding:48px 0;
}
.feature-row.reverse .feature-media{ order:2; }
.feature-row.reverse .feature-text{ order:1; }

.feature-media img{
  border-radius:6px;
  box-shadow:0 18px 40px -18px rgba(43,58,85,0.35);
}

.feature-text .kicker{
  display:inline-block;
  font-size:0.78rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--sage);
  font-weight:600;
  margin-bottom:10px;
}

@media (max-width: 780px){
  .feature-row,
  .feature-row.reverse{
    grid-template-columns:1fr;
  }
  .feature-row.reverse .feature-media,
  .feature-row.reverse .feature-text{ order:initial; }
}

/* ---------- signs / symptoms table ---------- */

.signs-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:rgba(43,58,85,0.1);
  border:1px solid rgba(43,58,85,0.1);
  border-radius:8px;
  overflow:hidden;
  margin-top:32px;
}
.signs-grid div{
  background:var(--paper);
  padding:18px 22px;
  font-size:0.97rem;
}
@media (max-width: 620px){
  .signs-grid{ grid-template-columns:1fr; }
}

/* ---------- steps ---------- */

.steps{
  display:grid;
  gap:36px;
  margin-top:40px;
}
.step{
  display:grid;
  grid-template-columns:64px 1fr;
  gap:22px;
}
.step-num{
  font-family:var(--serif);
  font-size:1.5rem;
  color:var(--clay);
  border:1.5px solid var(--clay-soft);
  border-radius:50%;
  width:56px; height:56px;
  display:flex; align-items:center; justify-content:center;
}
.step h3{ margin-bottom:8px; }
.step p{ color:var(--ink-soft); }

@media (max-width: 560px){
  .step{ grid-template-columns:48px 1fr; }
  .step-num{ width:44px; height:44px; font-size:1.15rem; }
}

/* ---------- cards ---------- */

.card{
  background:var(--paper);
  border-radius:10px;
  padding:32px;
  box-shadow:0 12px 30px -20px rgba(43,58,85,0.4);
}

.pricing-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  margin-top:40px;
}
.price-card{
  background:var(--paper);
  border-radius:12px;
  padding:36px;
  border:1px solid rgba(43,58,85,0.08);
  box-shadow:0 16px 34px -22px rgba(43,58,85,0.4);
}
.price-card .amount{
  font-family:var(--serif);
  font-size:2.4rem;
  color:var(--clay);
  margin:6px 0 14px;
}
.price-card .amount sup{ font-size:1rem; margin-left:2px; color:var(--ink-soft); }
.price-card ul{ margin:0; padding-left:1.1em; color:var(--ink-soft); }
.price-card li{ margin-bottom:6px; }

@media (max-width: 720px){
  .pricing-grid{ grid-template-columns:1fr; }
}

.note-box{
  margin-top:32px;
  padding:20px 26px;
  background:var(--sage-soft);
  border-radius:8px;
  color:var(--ink);
  font-size:0.96rem;
}

/* ---------- CTA buttons ---------- */

.btn{
  display:inline-block;
  background:var(--clay);
  color:#fff;
  font-weight:600;
  font-size:0.98rem;
  padding:14px 30px;
  border-radius:100px;
  border:none;
  cursor:pointer;
  transition:background .2s, transform .2s;
}
.btn:hover{
  background:#8a3c3c;
  text-decoration:none;
  transform:translateY(-1px);
}
.btn.outline{
  background:transparent;
  color:var(--ink);
  border:1.5px solid var(--ink);
}
.btn.outline:hover{ background:var(--ink); color:#fff; }

.cta-band{
  text-align:center;
  padding:64px 24px;
  background:var(--ink);
  color:#fff;
  border-radius:16px;
  margin:64px auto;
  max-width:1080px;
}
.cta-band h2{ color:#fff; }
.cta-band p{ color:#D9DEE7; max-width:520px; margin:0 auto 28px; }

/* ---------- contact page ---------- */

.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:start;
}
.contact-info h3{ margin-top:28px; }
.contact-info h3:first-child{ margin-top:0; }
.contact-info p{ color:var(--ink-soft); }

.copy-btn{
  display:inline-block;
  margin-left:8px;
  padding:2px 12px;
  font-size:0.8rem;
  font-weight:600;
  color:var(--ink);
  background:var(--cream-soft);
  border:1px solid rgba(43,58,85,0.15);
  border-radius:100px;
  cursor:pointer;
  vertical-align:middle;
  transition:background .2s, color .2s;
}
.copy-btn:hover{ background:var(--sage-soft); }
.copy-btn.copied{ background:var(--sage); color:#fff; border-color:var(--sage); }

html[data-theme="dark"] .copy-btn{ border-color:rgba(255,255,255,0.15); }

.form-group{ margin-bottom:20px; }
.form-group label{
  display:block;
  font-weight:600;
  font-size:0.9rem;
  margin-bottom:6px;
}
.form-group input,
.form-group textarea{
  width:100%;
  padding:12px 14px;
  border:1.5px solid rgba(43,58,85,0.2);
  border-radius:6px;
  font-family:var(--sans);
  font-size:1rem;
  background:var(--paper);
  color:var(--ink);
}
.form-group input:focus,
.form-group textarea:focus{
  outline:none;
  border-color:var(--clay);
}
.form-group.hp{ position:absolute; left:-9999px; }

.form-status{
  margin-top:18px;
  padding:14px 16px;
  border-radius:8px;
  font-size:0.92rem;
  line-height:1.5;
}
.form-status.success{ background:var(--sage-soft); color:var(--ink); }
.form-status.error{ background:#F5DCD8; color:#7A2E2E; }

#submit-btn:disabled{ opacity:0.7; cursor:default; }

@media (max-width: 780px){
  .contact-grid{ grid-template-columns:1fr; }
}

/* ---------- CGV ---------- */

.cgv-block{ margin-bottom:40px; }
.cgv-block h2{ font-size:1.4rem; }
.cgv-block p{ color:var(--ink-soft); }

/* ---------- footer ---------- */

footer{
  border-top:1px solid rgba(43,58,85,0.1);
  padding:36px 24px;
  text-align:center;
  color:var(--ink-soft);
  font-size:0.9rem;
}
footer a{ color:var(--ink-soft); text-decoration:underline; }
footer .socials{ margin-top:10px; }

/* ==========================================================================
   Mode sombre
   ========================================================================== */

html[data-theme="dark"]{
  --cream:      #1B2230;
  --cream-soft: #232B3D;
  --ink:        #EEF1F6;
  --ink-soft:   #B7C0D1;
  --clay:       #E3937E;
  --clay-soft:  #C97C6D;
  --sage:       #A7C398;
  --sage-soft:  #2B3A2A;
  --paper:      #232B3D;
}

html[data-theme="dark"] body{ background:var(--cream); }

html[data-theme="dark"] .site-header{
  background:var(--cream);
  border-bottom-color:rgba(255,255,255,0.08);
}

html[data-theme="dark"] nav.main-nav a:hover,
html[data-theme="dark"] nav.main-nav a.active{
  border-bottom-color:var(--clay);
}

html[data-theme="dark"] .page-hero{ border-bottom-color:rgba(255,255,255,0.08); }

html[data-theme="dark"] .feature-media img{
  box-shadow:0 18px 40px -18px rgba(0,0,0,0.6);
}

html[data-theme="dark"] .signs-grid{
  background:rgba(255,255,255,0.08);
  border-color:rgba(255,255,255,0.08);
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .price-card{
  box-shadow:0 16px 34px -22px rgba(0,0,0,0.6);
}
html[data-theme="dark"] .price-card{ border-color:rgba(255,255,255,0.08); }

html[data-theme="dark"] .btn{ color:#1B2230; }
html[data-theme="dark"] .btn:hover{ background:#EFA893; }
html[data-theme="dark"] .btn.outline{ color:var(--ink); border-color:var(--ink); }
html[data-theme="dark"] .btn.outline:hover{ background:var(--ink); color:var(--cream); }

html[data-theme="dark"] .cta-band{ background:#12161F; color:#EEF1F6; }
html[data-theme="dark"] .cta-band p{ color:#B7C0D1; }

html[data-theme="dark"] .form-group input,
html[data-theme="dark"] .form-group textarea{
  border-color:rgba(255,255,255,0.18);
}

html[data-theme="dark"] .form-status.error{ background:#3A2323; color:#F2B8B0; }

html[data-theme="dark"] footer{ border-top-color:rgba(255,255,255,0.08); }

/* ==========================================================================
   Mode dyslexie
   ========================================================================== */

@font-face{
  font-family:'OpenDyslexic';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('https://cdn.jsdelivr.net/fontsource/fonts/opendyslexic@latest/latin-400-normal.woff2') format('woff2'),
      url('https://cdn.jsdelivr.net/fontsource/fonts/opendyslexic@latest/latin-400-normal.woff') format('woff');
}
@font-face{
  font-family:'OpenDyslexic';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('https://cdn.jsdelivr.net/fontsource/fonts/opendyslexic@latest/latin-700-normal.woff2') format('woff2'),
      url('https://cdn.jsdelivr.net/fontsource/fonts/opendyslexic@latest/latin-700-normal.woff') format('woff');
}

html[data-dyslexia="on"] body,
html[data-dyslexia="on"] h1,
html[data-dyslexia="on"] h2,
html[data-dyslexia="on"] h3,
html[data-dyslexia="on"] .brand{
  font-family:'OpenDyslexic', var(--sans);
}

html[data-dyslexia="on"] body{
  line-height:1.9;
  letter-spacing:0.01em;
  word-spacing:0.08em;
}

html[data-dyslexia="on"] p{
  max-width:70ch;
}

html[data-dyslexia="on"] h1,
html[data-dyslexia="on"] h2,
html[data-dyslexia="on"] h3{
  letter-spacing:0.01em;
  line-height:1.3;
}

html[data-dyslexia="on"] .hero .eyebrow{
  font-style:normal;
}

/* ==========================================================================
   Widget d'accessibilité
   ========================================================================== */

.a11y-widget{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:200;
  font-family:var(--sans);
}

.a11y-btn{
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--ink);
  color:var(--cream);
  border:none;
  border-radius:100px;
  padding:12px 18px;
  font-size:0.9rem;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 10px 24px -10px rgba(0,0,0,0.4);
}
.a11y-btn svg{ width:18px; height:18px; flex-shrink:0; }
.a11y-btn:hover{ opacity:0.92; }

.a11y-panel{
  position:absolute;
  right:0;
  bottom:calc(100% + 12px);
  background:var(--paper);
  border:1px solid rgba(43,58,85,0.12);
  border-radius:12px;
  padding:16px 18px;
  width:220px;
  box-shadow:0 20px 44px -18px rgba(43,58,85,0.45);
}
html[data-theme="dark"] .a11y-panel{ border-color:rgba(255,255,255,0.1); }

.a11y-title{
  margin:0 0 12px;
  font-size:0.82rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--ink-soft);
}

.a11y-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 0;
  font-size:0.95rem;
  color:var(--ink);
  cursor:pointer;
}
.a11y-row input{
  width:38px;
  height:22px;
  accent-color:var(--clay);
  cursor:pointer;
}

@media (max-width: 480px){
  .a11y-widget{ right:14px; bottom:14px; }
  .a11y-btn span{ display:none; }
  .a11y-btn{ padding:12px; }
}