:root {
  /* Le creme est celui de l'application du livre (--papier), pour que la
     vitrine et le produit se lisent comme une seule chose. */
  --paper:#f4ecd8; --paper-clair:#fbf6ea;
  --ink:#171713; --muted:#6f6c62; --line:#d3cfc3;
  /* Deux verts, pas quatre : l'acide pour les accents, l'olive pour les
     mots mis en avant. #87a800 et #768c0c ont ete ramenes a l'olive. */
  --acid:#d8ff3e; --olive:#7b920e;
  --white:#fffef9; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial, Helvetica, sans-serif; }
a { color:inherit; text-decoration:none; }
.shell { width:min(1240px, calc(100% - 64px)); margin:0 auto; }
.nav { height:90px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid var(--line); }
.brand { font-size:22px; font-weight:800; letter-spacing:-1.6px; width:max-content; }
.brand>span:first-child { font-weight:400; font-family:Georgia, serif; font-style:italic; }
.brand-dot { color:var(--olive); }
.nav-links { display:flex; gap:34px; font-size:13px; }
.nav-links a { transition:opacity .2s; }
.nav-links a:hover { opacity:.5; }
.nav-cta { justify-self:end; border:1px solid var(--ink); padding:13px 18px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; transition:.2s; }
.nav-cta:hover { background:var(--ink); color:var(--paper); }
.hero { min-height:calc(100vh - 90px); padding:54px 0 34px; position:relative; }
.eyebrow,.section-index { display:flex; gap:22px; align-items:center; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.eyebrow span,.section-index span { color:var(--muted); font-family:Georgia,serif; font-style:italic; font-weight:400; }
.hero-grid { display:grid; grid-template-columns:1.08fr .92fr; align-items:center; min-height:620px; }
h1 { margin:0; font-family:Georgia, 'Times New Roman', serif; font-weight:400; font-size:clamp(68px,7.7vw,116px); line-height:.83; letter-spacing:-.065em; }
h1 em,.method-intro h2 em,.principle h2 em,.closing h2 em { font-weight:400; color:var(--olive); }
.hero-lead { max-width:510px; margin:42px 0 0 7px; color:#4e4c45; font-size:17px; line-height:1.7; }
.hero-actions { margin:33px 0 0 7px; display:flex; align-items:center; gap:30px; }
.primary,.closing-button { display:inline-flex; align-items:center; justify-content:space-between; gap:34px; background:var(--ink); color:var(--white); padding:18px 20px; min-width:260px; text-transform:uppercase; font-weight:700; font-size:11px; letter-spacing:.08em; transition:.25s; }
.primary:hover { transform:translateY(-3px); box-shadow:0 9px 0 var(--acid); }
.primary span,.closing-button span { font-size:18px; font-weight:400; }
.text-link { font-size:12px; font-weight:700; border-bottom:1px solid var(--ink); padding-bottom:4px; }
.book-scene { position:relative; height:570px; display:flex; align-items:center; justify-content:center; perspective:1000px; }
.book { width:326px; height:475px; padding:28px 30px; background:#20201c; color:var(--paper); position:relative; transform:rotateY(-10deg) rotateZ(2.5deg); box-shadow:-12px 10px 0 #ccc5b7,-19px 16px 35px rgba(24,22,15,.2); z-index:2; transition:transform .5s; }
.book-scene:hover .book { transform:rotateY(-3deg) rotateZ(.8deg) translateY(-8px); }
.book:before { content:""; position:absolute; left:14px; top:0; bottom:0; border-left:1px solid #3d3d36; }
.book-topline,.book-footer { font-size:9px; letter-spacing:.17em; text-transform:uppercase; color:#b6b1a5; }
.book-mark { margin-top:52px; font-size:23px; font-weight:800; line-height:.8; letter-spacing:-.08em; }
.book-mark span { color:var(--acid); }
.book-title { position:absolute; bottom:74px; left:30px; font:italic 34px/1.02 Georgia,serif; letter-spacing:-.04em; }
.book-footer { position:absolute; bottom:29px; left:30px; }
.book-shadow { position:absolute; width:320px; height:65px; background:rgba(21,20,15,.17); filter:blur(23px); bottom:32px; border-radius:50%; transform:rotate(-2deg); }
.margin-note { position:absolute; right:0; bottom:-24px; max-width:150px; text-align:right; z-index:3; font:italic 12px/1.5 Georgia,serif; color:var(--muted); transform:rotate(-3deg); }
.scroll-note { position:absolute; bottom:26px; left:-26px; font-size:9px; text-transform:uppercase; letter-spacing:.18em; writing-mode:vertical-rl; transform:rotate(180deg); color:var(--muted); }
.manifesto { background:var(--paper-clair); padding:120px 0; }
.manifesto-grid,.principle-grid,.closing-grid { display:grid; grid-template-columns:240px 1fr; gap:70px; }
.big-copy { max-width:900px; margin:0; font:400 clamp(34px,3.8vw,54px)/1.08 Georgia,serif; letter-spacing:-.045em; }
.big-copy em { color:var(--olive); }
.reason-grid { margin-top:90px; padding-top:30px; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(3,1fr); gap:60px; }
.reason-number { font:italic 12px Georgia,serif; color:#8d897d; }
.reason-grid h2 { font:400 26px/1.25 Georgia,serif; margin:28px 0 14px; }
.reason-grid p { color:var(--muted); font-size:15px; line-height:1.7; margin:0; }
.method { padding:120px 0 135px; }
.method-intro { margin:70px 0 80px 25%; display:grid; grid-template-columns:1.3fr .7fr; align-items:end; gap:60px; }
.method-intro h2,.principle h2,.closing h2 { font:400 clamp(38px,4.2vw,60px)/1.02 Georgia,serif; letter-spacing:-.05em; margin:0; }
.method-intro p { color:var(--muted); line-height:1.7; font-size:16px; max-width:330px; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.steps article { background:var(--paper); padding:34px 36px 45px; min-height:330px; }
.step-head { display:flex; align-items:center; gap:15px; font:italic 12px Georgia,serif; color:var(--muted); }
.step-head i { height:1px; background:var(--line); flex:1; }
.steps h3 { margin:90px 0 13px; font:400 28px Georgia,serif; }
.steps p { margin:0; color:var(--muted); font-size:14px; line-height:1.65; }
.quote-section { background:var(--acid); padding:105px 0; }
.quote-wrap { display:grid; grid-template-columns:140px 1fr; align-items:start; }
.quote-mark { font:140px/.7 Georgia,serif; }
blockquote { margin:0; font:400 clamp(38px,5vw,68px)/1.1 Georgia,serif; letter-spacing:-.04em; }
blockquote em { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:9px; }
.value { padding:120px 0; }
.value-grid { margin-top:70px; display:grid; grid-template-columns:.8fr 1.2fr; gap:100px; }
.value-grid>h2 { font:400 54px/1.02 Georgia,serif; letter-spacing:-.045em; margin:0; }
.value-list article { display:grid; grid-template-columns:50px 1fr; gap:20px; border-top:1px solid var(--line); padding:25px 0; }
.value-list article:last-child { border-bottom:1px solid var(--line); }
.value-list span { color:var(--muted); font:italic 12px Georgia,serif; }
.value-list h3 { font:400 23px Georgia,serif; margin:0 0 7px; }
.value-list p { color:var(--muted); margin:0; font-size:14px; line-height:1.5; }
.principle { background:#20201c; color:var(--paper); padding:120px 0; }
.section-index.light span { color:#9b978d; }
.principle h2 em { color:var(--acid); }
.principle-grid>div:last-child { max-width:850px; }
.principle-grid>div:last-child>p { max-width:700px; color:#bcb8ad; font-size:16px; line-height:1.8; margin:45px 0 0; }
.principle .privacy { border-left:2px solid var(--acid); padding-left:20px; color:var(--paper) !important; font-family:Georgia,serif; font-style:italic; }
.trust { background:var(--paper-clair); padding:120px 0; }
.trust-grid { display:grid; grid-template-columns:240px 1fr; gap:70px; }
.trust-kicker { color:var(--olive); font-size:10px; font-weight:800; letter-spacing:.16em; margin:0 0 28px; }
.trust h2 { font:400 clamp(38px,4.2vw,60px)/1.02 Georgia,serif; letter-spacing:-.055em; margin:0; }
.trust h2 em { color:var(--olive); }
.trust-lead { max-width:700px; color:var(--muted); font-size:16px; line-height:1.75; margin:38px 0 55px; }
.trust-cards { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); background:var(--line); gap:1px; }
.trust-cards article { background:var(--paper-clair); min-height:310px; padding:30px; }
.trust-cards article>span { display:inline-flex; width:48px; height:48px; border-radius:50%; background:var(--acid); align-items:center; justify-content:center; font:700 13px Arial,sans-serif; }
.trust-cards h3 { font:400 24px/1.15 Georgia,serif; margin:55px 0 14px; }
.trust-cards p { color:var(--muted); font-size:13px; line-height:1.65; margin:0; }
.act-note { max-width:850px; margin:32px 0 0; padding:21px 24px; border-left:3px solid var(--acid); background:var(--paper); color:var(--muted); font:italic 14px/1.6 Georgia,serif; }
.act-note strong { color:var(--ink); }
.faq { padding:120px 0; display:grid; grid-template-columns:240px 1fr; gap:70px; }
.faq-list { border-top:1px solid var(--line); }
details { border-bottom:1px solid var(--line); }
summary { list-style:none; cursor:pointer; padding:30px 0; display:flex; justify-content:space-between; gap:30px; font:400 25px Georgia,serif; }
summary::-webkit-details-marker { display:none; }
summary span { font:300 24px Arial,sans-serif; transition:transform .2s; }
details[open] summary span { transform:rotate(45deg); }
details p { color:var(--muted); max-width:650px; line-height:1.7; margin:-5px 0 28px; }
.closing { background:#20201c; color:var(--paper); padding:110px 0 125px; border-top:1px solid #414139; }
.closing-copy>p { color:var(--acid); text-transform:uppercase; font-size:10px; font-weight:700; letter-spacing:.16em; }
.closing h2 { font-size:clamp(42px,4.8vw,68px); margin:28px 0 55px; }
.closing h2 em { color:var(--acid); }
.closing-button { background:var(--acid); color:var(--ink); min-width:310px; }
.closing-button:hover { transform:translateX(8px); }
.closing small { color:#8e8b82; margin-left:20px; font-size:11px; }
.footer { background:#20201c; color:var(--paper); border-top:1px solid #414139; }
.footer-inner { height:110px; display:flex; justify-content:space-between; align-items:center; }
.brand-light .brand-dot { color:var(--acid); }
.footer p { margin:0; color:#8e8b82; font-size:10px; text-transform:uppercase; letter-spacing:.13em; }

@media (max-width:900px) {
  .shell { width:min(100% - 36px, 760px); }
  .nav { grid-template-columns:1fr auto; height:72px; }
  .nav-links { display:none; }
  .nav-cta { font-size:9px; padding:10px 12px; }
  .hero { padding-top:35px; min-height:auto; }
  .hero-grid { grid-template-columns:1fr; padding-top:55px; }
  h1 { font-size:clamp(60px,18vw,98px); }
  .hero-lead { margin-top:32px; }
  .book-scene { height:540px; margin-top:35px; overflow:hidden; }
  .margin-note,.scroll-note { display:none; }
  .manifesto,.method,.value,.trust,.faq { padding:80px 0; }
  .manifesto-grid,.principle-grid,.trust-grid,.closing-grid,.faq { grid-template-columns:1fr; gap:50px; }
  .reason-grid,.steps { grid-template-columns:1fr; gap:0; }
  .reason-grid { gap:38px; }
  .method-intro { margin:55px 0; grid-template-columns:1fr; gap:25px; }
  .steps article { min-height:250px; }
  .steps h3 { margin-top:55px; }
  .quote-wrap { grid-template-columns:70px 1fr; }
  .quote-mark { font-size:90px; }
  .value-grid { grid-template-columns:1fr; gap:55px; }
  .principle,.closing { padding:80px 0; }
  .trust-cards { grid-template-columns:1fr; }
  .trust-cards article { min-height:250px; }
  .trust-cards h3 { margin-top:38px; }
  .closing small { display:block; margin:18px 0 0; }
}

@media (max-width:560px) {
  .hero-actions { align-items:flex-start; flex-direction:column; }
  .book { width:280px; height:415px; }
  .book-scene { height:475px; }
  .big-copy { font-size:42px; }
  .method-intro h2,.principle h2 { font-size:46px; }
  .quote-section { padding:75px 0; }
  .quote-wrap { grid-template-columns:1fr; }
  .quote-mark { height:60px; }
  .closing h2 { font-size:56px; }
  .closing-button { min-width:100%; }
  .footer-inner { height:auto; padding:40px 0; flex-direction:column; align-items:flex-start; gap:24px; }
}

@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none !important; } }
