/* Lire son chien — feuille de style commune */
:root{
  --ground:#FDF7EE; --panel:#F5EADA; --panel-warm:#FBE8D4; --plate:#EFE6D8;
  --ink:#2B211A; --ink-soft:#6B5A4A; --brun:#5B4636;
  --accent:#C46A2B; --accent-ink:#A0521D; --rule:#E2D4C0; --plate-line:#CFA277;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#191410; --panel:#241D17; --panel-warm:#2C2119; --plate:#221B15;
    --ink:#F1E7D9; --ink-soft:#AF9D89; --brun:#DCC7AE;
    --accent:#E28B49; --accent-ink:#EFA265; --rule:#3A2E25; --plate-line:#6B5137;
  }
}
:root[data-theme="dark"]{
  --ground:#191410; --panel:#241D17; --panel-warm:#2C2119; --plate:#221B15;
  --ink:#F1E7D9; --ink-soft:#AF9D89; --brun:#DCC7AE;
  --accent:#E28B49; --accent-ink:#EFA265; --rule:#3A2E25; --plate-line:#6B5137;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:"Newsreader",Georgia,"Times New Roman",serif;font-size:1.0625rem;line-height:1.68;
  -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Fraunces",Georgia,serif;font-weight:700;text-wrap:balance;margin:0;line-height:1.1}
p{margin:0}
img{display:block;max-width:100%}
a{color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:960px;margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem)}
.label{font-family:"Archivo",system-ui,sans-serif;font-size:.7rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent-ink)}
section{padding:clamp(3.25rem,6vw,5.5rem) 0;border-top:1px solid var(--rule)}
.cta{display:inline-block;margin-top:2rem;font-family:"Archivo",sans-serif;font-size:.85rem;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:.95rem 1.7rem;
  background:var(--accent);color:#FFF8EF;border:1px solid var(--accent);border-radius:2px;
  text-decoration:none;transition:background .18s ease}
.cta:hover{background:var(--accent-ink);border-color:var(--accent-ink);color:#FFF8EF}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(88vh,760px);display:flex;align-items:flex-start;
  overflow:hidden;background:#2B211A}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 65%}
.hero .scrim{position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(30,18,10,.78) 0%,rgba(30,18,10,.45) 38%,rgba(30,18,10,.05) 62%,rgba(30,18,10,.35) 100%)}
.hero .inner{position:relative;z-index:1;width:100%;padding:clamp(2.5rem,7vw,5rem) 0}
.hero .brand{font-family:"Archivo",sans-serif;font-size:.72rem;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;color:#F3D9BE}
.hero h1{margin-top:1.1rem;font-size:clamp(2.3rem,5.6vw,4.1rem);letter-spacing:-.022em;
  color:#FFF6E8;max-width:16ch;text-shadow:0 2px 24px rgba(20,10,4,.5)}
.hero .lede{margin-top:1.3rem;max-width:34rem;font-size:1.15rem;color:#F0DFCB;
  text-shadow:0 1px 14px rgba(20,10,4,.6)}
.hero .sub{margin-top:.9rem;font-family:"Archivo",sans-serif;font-size:.8rem;color:#E4CDB2}

/* ---------- blocs ---------- */
.story p{font-size:1.15rem;max-width:36rem}
.story p+p{margin-top:1.15rem}
.story .strong{color:var(--brun);font-family:"Fraunces",Georgia,serif;font-weight:500;
  font-size:1.3rem;line-height:1.45}
.pillars{background:var(--panel);border-bottom:1px solid var(--rule)}
.pillars h2{margin-top:.85rem;font-size:clamp(1.6rem,3vw,2.1rem);color:var(--brun)}
.pillars .list{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:baseline;margin-top:1.5rem}
.pillars .w{font-family:"Fraunces",Georgia,serif;font-weight:700;
  font-size:clamp(1.5rem,4vw,2.4rem);color:var(--brun)}
.pillars .dot{color:var(--accent);font-size:1.4rem;line-height:1}
.pillars .note{margin-top:1.5rem;color:var(--ink-soft);max-width:34rem}
.duo{display:grid;grid-template-columns:1fr;gap:clamp(1.75rem,4vw,3rem);align-items:center}
.duo img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px}
.meta{font-family:"Archivo",sans-serif;font-size:.82rem;color:var(--ink-soft);margin-top:1.1rem}
.book{background:var(--panel-warm)}
.book-grid{display:grid;grid-template-columns:1fr;gap:clamp(1.75rem,4vw,3rem);margin-top:1.5rem}
.cover-plate{aspect-ratio:2/3;background:var(--plate);border:2px solid var(--plate-line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;
  text-align:center;padding:1.25rem;color:var(--brun)}
.cover-plate .k{font-family:"Archivo",sans-serif;font-size:.64rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink)}
.cover-plate .d{font-size:.86rem;line-height:1.45;color:var(--ink-soft);max-width:20ch}
.book p+p{margin-top:1rem}
.book .date{font-family:"Archivo",sans-serif;font-size:.82rem;letter-spacing:.06em;
  color:var(--accent-ink);font-weight:600}
.closing{text-align:center;background:var(--panel)}
.closing p{font-family:"Fraunces",Georgia,serif;font-weight:500;
  font-size:clamp(1.6rem,3.6vw,2.3rem);line-height:1.3;color:var(--brun);max-width:20ch;margin:0 auto}
@media(min-width:820px){
  .duo{grid-template-columns:1.1fr .9fr}
  .duo.flip{grid-template-columns:.9fr 1.1fr}
  .duo.top{align-items:start}
  .book-grid{grid-template-columns:.62fr 1.38fr;align-items:start}
}

/* ---------- pages de texte ---------- */
.doc{padding:clamp(2.5rem,5vw,4rem) 0 clamp(3rem,6vw,5rem);border-top:none}
.doc .back{font-family:"Archivo",sans-serif;font-size:.8rem;text-decoration:none;
  display:inline-block;margin-bottom:2rem}
.doc h1{font-size:clamp(2rem,4vw,2.8rem);color:var(--brun);max-width:22ch}
.doc .maj{font-family:"Archivo",sans-serif;font-size:.8rem;color:var(--ink-soft);margin-top:.9rem}
.doc h2{font-size:1.35rem;color:var(--brun);margin-top:2.5rem}
.doc p,.doc li{max-width:38rem}
.doc p{margin-top:1rem}
.doc ul{margin:1rem 0 0;padding-left:1.2rem}
.doc li{margin-top:.5rem}
.doc .box{background:var(--panel);border-left:3px solid var(--accent);padding:1.1rem 1.25rem;
  margin-top:1.5rem;max-width:38rem}

/* ---------- pied de page ---------- */
footer{padding:2.75rem 0 3.5rem;border-top:1px solid var(--rule);
  font-family:"Archivo",sans-serif;font-size:.85rem;color:var(--ink-soft);text-align:center}
footer .social{display:flex;flex-wrap:wrap;gap:1.25rem;margin-bottom:1.1rem;justify-content:center}
footer .social a{color:var(--brun);font-weight:600;text-decoration:none}
footer .social a:hover{color:var(--accent-ink)}
footer .legal{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;margin-top:.5rem;justify-content:center}

.rise{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;transition:none}
  .cta{transition:none}
}

/* ---------- sélecteur interactif des piliers ---------- */
.pillars .selector{display:flex;height:440px;margin-top:1.75rem}
.pilier{position:relative;overflow:hidden;flex:1 1 0%;min-width:56px;padding:0;
  appearance:none;font:inherit;text-align:left;color:inherit;cursor:pointer;
  border:2px solid var(--rule);background-color:var(--plate);
  background-size:cover;background-position:center;
  display:flex;flex-direction:column;justify-content:flex-end;
  box-shadow:0 8px 24px rgba(30,18,10,.10);
  transition:flex .7s cubic-bezier(.4,0,.2,1),border-color .4s ease,box-shadow .7s ease}
.pilier.actif{flex:6 1 0%;border-color:var(--accent);box-shadow:0 16px 44px rgba(30,18,10,.22)}
.pilier .voile{position:absolute;left:0;right:0;bottom:0;height:55%;pointer-events:none;
  background:linear-gradient(180deg,rgba(30,18,10,0),rgba(30,18,10,.82));
  opacity:0;transition:opacity .7s ease}
.pilier.actif .voile{opacity:1}
.pilier .attente{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:1rem}
.pilier .attente span{font-family:"Archivo",system-ui,sans-serif;font-size:.64rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);text-align:center;
  border:2px solid var(--plate-line);padding:.7rem .9rem;line-height:1.6;max-width:11rem}
.pilier .etiquette{position:relative;display:flex;align-items:center;gap:.8rem;
  padding:0 1.05rem 1.1rem;pointer-events:none}
.pilier .pastille{flex:0 0 44px;width:44px;height:44px;border-radius:50%;
  background:var(--accent);border:2px solid #FFF8EF;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(30,18,10,.35)}
.pilier .pastille svg{width:21px;height:21px;stroke:#FFF8EF}
.pilier .texte{display:flex;flex-direction:column;overflow:hidden;white-space:nowrap}
.pilier .titre{font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:1.2rem;
  color:#FFF6E8;text-shadow:0 1px 4px rgba(20,10,4,.5);
  opacity:0;transform:translateX(22px);
  transition:opacity .55s ease .15s,transform .55s ease .15s}
.pilier .sous{font-style:italic;font-size:.95rem;color:#F0DFCB;
  text-shadow:0 1px 4px rgba(20,10,4,.5);
  opacity:0;transform:translateX(22px);
  transition:opacity .55s ease .25s,transform .55s ease .25s}
.pilier.actif .titre,.pilier.actif .sous{opacity:1;transform:none}
@media(max-width:719px){
  .pillars .selector{flex-direction:column;height:auto;min-height:540px}
  .pilier{min-width:0;min-height:62px}
  .pilier.actif{min-height:270px}
  .pilier .texte{white-space:normal}
  .pilier .titre{font-size:1.05rem}
  .pilier .sous{font-size:.88rem}
  .pilier .attente{transition:opacity .4s ease}
  .pilier:not(.actif) .attente{opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .pilier,.pilier .voile,.pilier .titre,.pilier .sous{transition:none}
}