/* ============================================================
   Dire pour se Lire — feuille de style
   Palette : blanc rosé, encre prune, magenta CC0066, plum profond
   Typo : Fraunces (display) / Work Sans (texte) / Space Mono (repères)
   ============================================================ */

:root{
  --paper: #FBF4F7;
  --paper-deep: #F3E1EA;
  --ink: #211B22;
  --ink-soft: #4A3F47;
  --indigo: #4A1338;
  --indigo-deep: #4A133850;
  --gold: #CC0066;
  --gold-soft: #F0B8D2;
  --sage: #A83D71;
  --line: #E8D3DE;
  --radius: 2px;
  --max: 1120px;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Space Mono", "Courier New", monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
img{max-width:100%;display:block;}

.wrap{max-width:var(--max); margin:0 auto; padding:0 28px;}

/* ---------- Ruban de lien (motif signature) ---------- */
.thread{
  width:100%;
  height:34px;
  display:block;
}
.thread path{
  fill:none;
  stroke:var(--gold);
  stroke-width:1.4;
  opacity:.75;
}

/* ---------- En-tête ---------- */
header.site{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:40;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 28px;
  max-width:var(--max);
  margin:0 auto;
  gap:24px;
}
.brand{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:var(--ink);
}
.brand-mark{
  font-family:var(--serif);
  font-weight:600;
  font-size:1.55rem;
  letter-spacing:.01em;
}
.brand-mark em{
  font-style:italic;
  color:var(--gold);
}
.brand-sub{
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-top:2px;
}

nav.primary{
  display:flex;
  flex-wrap:wrap;
  gap:2px 22px;
}
nav.primary a{
  text-decoration:none;
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-soft);
  padding:6px 0;
  border-bottom:1px solid transparent;
  transition:color .15s, border-color .15s;
  white-space:nowrap;
}
nav.primary a:hover{color:var(--ink); border-color:var(--gold-soft);}
nav.primary a.active{color:var(--ink); border-color:var(--gold);}

.nav-toggle{
  display:none;
  background:none;
  border:1px solid var(--line);
  padding:8px 12px;
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  color:var(--ink);
}

/* ---------- Hero ---------- */
.hero{
  padding:64px 0 40px;
  border-bottom:1px solid var(--line);
}
.hero .eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--sage);
  display:block;
  margin-bottom:18px;
}
.hero h1{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2.1rem, 4.6vw, 3.4rem);
  line-height:1.12;
  margin:0 0 22px;
  max-width:15ch;
}
.hero h1 em{color:var(--gold); font-style:italic;}
.hero .lede{
  max-width:56ch;
  font-size:1.12rem;
  color:var(--ink-soft);
}

.page-hero{
  padding:52px 0 34px;
  border-bottom:1px solid var(--line);
}
.page-hero .eyebrow{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--sage);
  display:block;
  margin-bottom:14px;
}
.page-hero h1{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.9rem, 3.6vw, 2.7rem);
  margin:0;
}

/* ---------- Sections générales ---------- */
main{padding:52px 0 90px;}
.section{padding:36px 0;}
.grid-2{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:56px;
  align-items:start;
}
.portrait{
  border:1px solid var(--line);
  padding:10px;
  background:#fff;
  max-width:320px;
}
.portrait img{width:100%; height:auto;}
.portrait figcaption{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.06em;
  color:var(--ink-soft);
  padding:10px 4px 2px;
  text-transform:uppercase;
}

.prose p{margin:0 0 18px;}
.prose h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.7rem;
  margin:0 0 20px;
}
.prose h3{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.25rem;
  margin:28px 0 12px;
}

blockquote.pull{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.3rem;
  line-height:1.5;
  color:var(--indigo);
  border-left:2px solid var(--gold);
  padding:6px 0 6px 26px;
  margin:36px 0;
}
blockquote.pull cite{
  display:block;
  font-family:var(--mono);
  font-style:normal;
  font-size:.68rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-top:12px;
}

/* ---------- Cartes / listes ---------- */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px,1fr));
  gap:22px;
  margin-top:30px;
}
.card{
  background:#fff;
  border:1px solid var(--line);
  padding:26px 24px;
}
.card .num{
  font-family:var(--mono);
  font-size:.68rem;
  color:var(--gold);
  letter-spacing:.1em;
}
.card h3{
  font-family:var(--serif);
  font-size:1.15rem;
  font-weight:500;
  margin:10px 0 8px;
}
.card p{margin:0; color:var(--ink-soft); font-size:.95rem;}

table.tarifs{
  width:100%;
  border-collapse:collapse;
  margin-top:26px;
  background:#fff;
  border:1px solid var(--line);
}
table.tarifs th, table.tarifs td{
  text-align:left;
  padding:14px 18px;
  border-bottom:1px solid var(--line);
  font-size:.96rem;
}
table.tarifs th{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
  background:var(--paper-deep);
}
table.tarifs td.price{
  font-family:var(--serif);
  font-size:1.1rem;
  color:var(--indigo);
}

.link-list{list-style:none; margin:26px 0 0; padding:0;}
.link-list li{
  border-bottom:1px solid var(--line);
  padding:16px 0;
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:baseline;
}
.link-list a{
  font-family:var(--serif);
  font-size:1.08rem;
  text-decoration:none;
  color:var(--indigo);
}
.link-list a:hover{color:var(--gold);}
.link-list span{
  font-family:var(--mono);
  font-size:.66rem;
  color:var(--ink-soft);
  text-transform:uppercase;
  white-space:nowrap;
}

/* ---------- Formulaire de contact ---------- */
.form-field{margin-bottom:20px;}
.form-field label{
  display:block;
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:8px;
}
.form-field input, .form-field textarea{
  width:100%;
  border:1px solid var(--line);
  background:#fff;
  padding:12px 14px;
  font-family:var(--sans);
  font-size:.98rem;
  color:var(--ink);
}
.form-field textarea{min-height:140px; resize:vertical;}
.btn{
  display:inline-block;
  background:var(--indigo);
  color:#fff;
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:14px 26px;
  border:none;
  cursor:pointer;
  text-decoration:none;
}
.btn:hover{background:var(--gold); color:var(--ink);}
.btn.secondary{background:transparent; color:var(--indigo); border:1px solid var(--indigo);}
.btn.secondary:hover{background:var(--indigo); color:#fff;}

.contact-meta{margin-top:34px;}
.contact-meta dt{
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--sage);
  margin-top:18px;
}
.contact-meta dd{margin:4px 0 0; font-family:var(--serif); font-size:1.1rem;}

/* ---------- Espace privé ---------- */
.locked{
  background:#fff;
  border:1px solid var(--line);
  padding:40px;
  max-width:440px;
}
.locked p{color:var(--ink-soft);}

/* ---------- Pied de page ---------- */
footer.site{
  border-top:1px solid var(--line);
  padding:40px 0 60px;
  background:var(--paper-deep);
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:24px;
  align-items:flex-start;
}
.footer-quote{
  font-family:var(--serif);
  font-style:italic;
  max-width:44ch;
  color:var(--ink-soft);
  font-size:.98rem;
}
.footer-nav{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.footer-nav a{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink-soft);
}
.footer-nav a:hover{color:var(--indigo);}
.copyright{
  font-family:var(--mono);
  font-size:.65rem;
  color:var(--ink-soft);
  margin-top:30px;
  letter-spacing:.04em;
}
.admin-link{opacity:.55;}

/* ---------- Éditable (marqueur discret en mode normal) ---------- */
[data-editable]{ }

/* ---------- Responsive ---------- */
@media (max-width: 880px){
  .grid-2{grid-template-columns:1fr; gap:34px;}
  nav.primary{
    display:none;
    flex-direction:column;
    gap:14px;
    position:absolute;
    top:100%; left:0; right:0;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    padding:20px 28px 26px;
  }
  nav.primary.open{display:flex;}
  .nav-toggle{display:block;}
  header.site{position:sticky;}
}

/* ---------- Admin ---------- */
body.admin-body{background:var(--paper);}
.admin-shell{max-width:900px; margin:0 auto; padding:50px 28px 100px;}
.admin-gate{
  max-width:420px;
  margin:90px auto;
  background:#fff;
  border:1px solid var(--line);
  padding:40px;
}
.admin-gate h1{font-family:var(--serif); font-size:1.6rem; margin-top:0;}
.tab-panel{
  background:#fff;
  border:1px solid var(--line);
  padding:26px 28px;
  margin-bottom:22px;
}
.tab-panel h2{
  font-family:var(--serif);
  font-size:1.25rem;
  margin:0 0 4px;
}
.tab-panel .slug{
  font-family:var(--mono);
  font-size:.65rem;
  color:var(--ink-soft);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:16px;
  display:block;
}
.tab-panel textarea{
  width:100%;
  min-height:220px;
  font-family:var(--mono);
  font-size:.86rem;
  line-height:1.6;
  padding:14px;
  border:1px solid var(--line);
  color:var(--ink);
}
.tab-panel .row-actions{
  display:flex;
  gap:10px;
  margin-top:12px;
  align-items:center;
}
.status-msg{
  font-family:var(--mono);
  font-size:.68rem;
  color:var(--sage);
  letter-spacing:.04em;
}
.admin-topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:34px;
  flex-wrap:wrap;
  gap:14px;
}
.admin-note{
  font-size:.9rem;
  color:var(--ink-soft);
  background:var(--paper-deep);
  border:1px solid var(--line);
  padding:16px 18px;
  margin-bottom:30px;
}