/* =========================================================
   De l'intelligence — Version 2
   Light. A pale lilac ground taken from the "i" of the logo,
   night-blue ink from the cover sky, amber from the open door.
   One typeface (Archivo) used from normal width to extra-wide.
   No header bar: the menu floats at the bottom of the screen.
   ========================================================= */
@font-face { font-family: "Archivo"; src: url(fonts/archivo.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url(fonts/archivo-italic.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: italic; font-display: swap; }

:root {
  --fog: #eeebf2;        /* page ground */
  --paper: #ffffff;
  --ink: #171a33;        /* text, the night sky */
  --slate: #5e6380;      /* secondary text */
  --lilac: #d8cfde;      /* the sign-off field */
  --lilac-deep: #b7a6bf;
  --door: #e8893a;       /* the light through the door */

  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --site-width: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  min-height: 100vh; display: flex; flex-direction: column;
  background: var(--fog); color: var(--ink);
  font-family: var(--font); font-size: 18px; line-height: 1.6; font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 96px;                  /* room for the floating menu */
}
main { flex: 1 0 auto; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--door); outline-offset: 4px; }
.container { width: min(var(--site-width), 100% - 48px); margin: 0 auto; }

/* display type: extra-wide black, like a poster */
.display, h1, h2 {
  font-stretch: 125%; font-weight: 900; letter-spacing: -0.035em; line-height: .9; margin: 0;
}
h1 { font-size: clamp(46px, 9vw, 132px); }
h2 { font-size: clamp(34px, 5vw, 64px); }
h3 { font-stretch: 112%; font-weight: 800; font-size: 20px; line-height: 1.2; margin: 0; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
.lede { font-size: 21px; line-height: 1.5; color: var(--slate); max-width: 32em; }

/* small top mark (the logo) — the only thing at the top of the page */
.top-mark { position: absolute; top: 28px; left: 50%; transform: translateX(-50%); z-index: 5; }
.top-mark img { height: 40px; width: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; font-family: var(--font); font-stretch: 112%;
  font-size: 16px; font-weight: 700; padding: 15px 28px; border-radius: 999px; text-decoration: none;
  transition: background .25s, color .25s, transform .25s;
}
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--door); color: var(--ink); }
.btn-line { box-shadow: inset 0 0 0 2px var(--ink); color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--paper); }

/* ---------- Floating menu (bottom of the screen) ---------- */
.dock {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 60;
  display: flex; align-items: center; gap: 4px; padding: 6px;
  background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-radius: 999px; box-shadow: 0 10px 40px rgba(23,26,51,.16), 0 0 0 1px rgba(23,26,51,.06);
  max-width: calc(100% - 24px);
}
.dock .mark { display: flex; align-items: center; padding: 0 14px 0 12px; }
.dock .mark img { height: 26px; width: auto; }
.dock ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.dock a.item {
  display: block; padding: 10px 16px; border-radius: 999px; font-stretch: 105%; font-size: 15px; font-weight: 600;
  color: var(--ink); text-decoration: none; white-space: nowrap; transition: background .2s, color .2s;
}
.dock a.item:hover { background: var(--fog); }
.dock a.item.current { background: var(--ink); color: var(--paper); }
.dock .menu-btn { display: none; }

/* full-screen menu for phones */
.menu-overlay {
  position: fixed; inset: 0; z-index: 70; background: var(--fog);
  display: flex; flex-direction: column; justify-content: center; padding: 40px 28px 120px;
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.menu-overlay.open { opacity: 1; pointer-events: auto; }
.menu-overlay ul { list-style: none; margin: 0; padding: 0; }
.menu-overlay a {
  display: block; padding: 8px 0; font-stretch: 125%; font-weight: 900; letter-spacing: -0.03em;
  font-size: clamp(30px, 9vw, 52px); line-height: 1.05; color: var(--ink); text-decoration: none;
}
.menu-overlay a.current { color: var(--door); }
.menu-overlay .close { position: absolute; top: 22px; right: 22px; background: var(--paper); border: 0; border-radius: 50%; width: 48px; height: 48px; cursor: pointer; color: var(--ink); display: flex; align-items: center; justify-content: center; }
.menu-overlay .social-text { margin-top: 36px; }

/* ---------- Home: poster hero ---------- */
.hero { position: relative; padding: 110px 0 60px; overflow: hidden; }
.poster { position: relative; }
.poster .line {
  display: block; position: relative; z-index: 2;
  font-size: clamp(52px, 11.5vw, 170px);
  color: #fff; mix-blend-mode: difference;    /* dark on the page, light where it crosses the picture */
}
.poster .line-1 { text-align: left; }
.poster .line-2 { text-align: right; margin-top: -0.08em; }
.poster .arch {
  position: relative; z-index: 1; width: clamp(220px, 28vw, 380px); margin: -0.55em auto -0.5em;
  font-size: clamp(52px, 11.5vw, 170px);        /* lets the negative margins follow the type size */
}
.poster .arch img { width: 100%; border-radius: 999px 999px 0 0; box-shadow: 0 40px 80px -30px rgba(23,26,51,.45); }
.hero-foot { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; margin-top: 56px; }
.hero-foot p { font-size: 22px; line-height: 1.45; max-width: 26em; margin: 0; }
.hero-foot .actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

@media (prefers-reduced-motion: no-preference) {
  .poster .arch img { animation: open-door 1.4s cubic-bezier(.2,.7,.2,1) both; }
  .poster .line-1 { animation: slide-in-l 1s .15s cubic-bezier(.2,.7,.2,1) both; }
  .poster .line-2 { animation: slide-in-r 1s .3s cubic-bezier(.2,.7,.2,1) both; }
}
@keyframes open-door { from { clip-path: inset(100% 0 0 0 round 999px 999px 0 0); } to { clip-path: inset(0 0 0 0 round 999px 999px 0 0); } }
@keyframes slide-in-l { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@keyframes slide-in-r { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }

/* ---------- Home: books on a shelf ---------- */
.shelf { padding: 90px 0 110px; }
.shelf-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 60px; }
.shelf-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; align-items: end; border-bottom: 3px solid var(--ink); padding: 0 30px; }
.shelf-row a { display: flex; justify-content: center; align-items: flex-end; height: 380px; }
.shelf-row img { max-height: 100%; width: auto; box-shadow: 0 18px 30px -12px rgba(23,26,51,.45); transform-origin: bottom center; transition: transform .35s ease; }
.shelf-row a:hover img { transform: rotate(-3deg) translateY(-6px); }
.shelf-labels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding: 22px 30px 0; text-align: center; }
.shelf-labels p { color: var(--slate); font-size: 16px; margin: 6px 0 0; }
.shelf-labels a { text-decoration: none; }

/* ---------- Home: author ---------- */
.meet { padding: 30px 0 120px; }
.meet-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
.meet img { width: 100%; border-radius: 28px; }
.meet h2 { margin-bottom: 26px; }
.meet p { font-size: 20px; max-width: 30em; }

/* ---------- Inner pages ---------- */
.page-head { padding: 120px 0 56px; }
.page-head h1 { margin-bottom: 24px; }

/* books */
.books { padding-bottom: 120px; }
.books-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.book-panel { background: var(--paper); border-radius: 32px; padding: 44px 44px 40px; display: flex; flex-direction: column; }
.book-panel .lang { font-stretch: 125%; font-weight: 900; font-size: 34px; letter-spacing: -0.03em; line-height: 1; }
.book-panel .meta { color: var(--slate); font-size: 16px; margin: 10px 0 30px; }

.book-open { display: block; cursor: pointer; }
.book-open.df-popup-button, .book-open.df-popup-button:hover { display: block; background: none; padding: 0; margin: 0; border-radius: 0; width: auto; }
.book-open .stage {
  height: 480px; display: flex; align-items: center; justify-content: center;
  background: var(--fog); border-radius: 22px; margin-bottom: 26px; padding: 30px;
}
.book-open .cover { max-height: 100%; width: auto; box-shadow: 0 24px 40px -16px rgba(23,26,51,.5); transition: transform .4s ease; }
.book-open:hover .cover, .book-open:focus-visible .cover { transform: perspective(900px) rotateY(-12deg) translateX(6px); }
.book-open .btn { pointer-events: none; }
.book-open:hover .btn-ink { background: var(--door); color: var(--ink); }
.book-open.is-loading { cursor: progress; opacity: .7; }

/* Future Ready */
.feature { padding: 120px 0 120px; }
.feature h1 { font-size: clamp(56px, 12vw, 180px); }
.feature-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 60px; align-items: start; margin-top: 48px; }
.feature .subtitle { font-style: italic; font-stretch: 100%; font-weight: 400; font-size: 30px; margin: 0 0 8px; }
.feature .authors { font-weight: 700; font-stretch: 112%; font-size: 18px; margin-bottom: 30px; }
.feature .blurb { font-size: 22px; line-height: 1.55; max-width: 28em; }
.feature .publisher { color: var(--slate); font-size: 15px; margin-top: 30px; }
.feature .book-open .stage { height: 560px; background: var(--paper); }

/* author */
.author-head { padding: 120px 0 50px; }
.author-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; padding-bottom: 60px; }
.author-grid img { width: 100%; border-radius: 28px; }
.author-grid .role { font-stretch: 112%; font-weight: 700; font-size: 18px; margin: 20px 0 0; }
.bio p { font-size: 19px; line-height: 1.7; max-width: 34em; }
.timeline { padding: 70px 0 120px; }
.timeline h2 { margin-bottom: 40px; }
.timeline ol { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--ink); }
.timeline li { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid rgba(23,26,51,.18); }
.timeline .year { font-stretch: 125%; font-weight: 900; font-size: 48px; letter-spacing: -0.03em; line-height: 1; color: var(--lilac-deep); }
.timeline .title { font-size: 24px; font-weight: 600; }
.timeline a { text-decoration: none; background-image: linear-gradient(var(--door), var(--door)); background-size: 100% 2px; background-repeat: no-repeat; background-position: 0 100%; }
.timeline a:hover { color: var(--door); }

/* video */
.video-wrap { padding-bottom: 120px; }
.video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--ink); border-radius: 28px; overflow: hidden; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-note { margin-top: 24px; }
.text-link { font-weight: 700; font-stretch: 112%; text-decoration: none; border-bottom: 2px solid var(--door); padding-bottom: 2px; }
.video-fallback { position: absolute; inset: 0; display: block; }
.video-fallback img { width: 100%; height: 100%; object-fit: cover; }
.video-fallback .play { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; background: var(--paper); border-radius: 50%; }
.video-fallback .play::after { content: ""; position: absolute; left: 34px; top: 27px; border-style: solid; border-width: 15px 0 15px 24px; border-color: transparent transparent transparent var(--ink); }

/* ---------- Sign-off (footer) ---------- */
.signoff { flex-shrink: 0; background: var(--lilac); padding: 70px 0 40px; overflow: hidden; }
.signoff .big {
  display: block; font-stretch: 125%; font-weight: 900; letter-spacing: -0.045em; line-height: .82;
  font-size: clamp(54px, 13.4vw, 200px); white-space: nowrap; margin: 0 0 40px;
}
.signoff-row { display: flex; flex-wrap: wrap; gap: 18px 34px; justify-content: space-between; align-items: center; font-size: 15px; }
.signoff-row nav { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.signoff-row a { text-decoration: none; font-weight: 600; }
.signoff-row a:hover { color: var(--door); }
.social-text { display: flex; gap: 22px; }
.social-text a { font-weight: 700; font-stretch: 112%; text-decoration: none; border-bottom: 2px solid currentColor; }

/* ---------- Phones & tablets ---------- */
@media (max-width: 1020px) {
  .dock ul { display: none; }
  .dock .menu-btn {
    display: block; background: var(--ink); color: var(--paper); border: 0; border-radius: 999px;
    padding: 11px 22px; font-family: var(--font); font-stretch: 112%; font-weight: 700; font-size: 15px; cursor: pointer;
  }
  .dock .here { font-weight: 600; font-size: 15px; padding: 0 12px 0 0; white-space: nowrap; }
}
@media (min-width: 1021px) { .dock .here { display: none; } }
@media (max-width: 820px) {
  body { font-size: 17px; }
  .top-mark { top: 20px; }
  .top-mark img { height: 32px; }
  .hero { padding: 84px 0 40px; }
  .hero-foot { grid-template-columns: 1fr; gap: 24px; margin-top: 40px; }
  .hero-foot p { font-size: 19px; }
  .hero-foot .actions { justify-content: flex-start; }
  .shelf { padding: 60px 0 80px; }
  .shelf-head { flex-direction: column; align-items: flex-start; }
  .shelf-row, .shelf-labels { gap: 14px; padding: 0 6px; }
  .shelf-row a { height: 170px; }
  .shelf-labels { padding-top: 14px; }
  .shelf-labels h3 { font-size: 14px; }
  .shelf-labels p { font-size: 13px; }
  .meet-grid, .feature-grid, .author-grid, .books-grid { grid-template-columns: 1fr; gap: 36px; }
  .page-head, .author-head, .feature { padding-top: 90px; }
  .book-panel { padding: 26px 22px 28px; border-radius: 24px; }
  .book-open .stage, .feature .book-open .stage { height: 400px; padding: 22px; }
  .timeline li { grid-template-columns: 1fr; gap: 6px; }
  .timeline .year { font-size: 34px; }
  .timeline .title { font-size: 20px; }
  .signoff { padding-top: 50px; }
}

/* fitted sizes: each big line fills the column exactly (measured: ~8 em wide) */
.poster { --fit: min(146px, calc((100vw - 48px) / 8.05)); }
.poster .line { font-size: var(--fit); white-space: nowrap; }
.poster .arch { display: block; font-size: var(--fit); width: clamp(200px, 27vw, 380px); margin: -0.42em auto -0.4em; }
.signoff .big { font-size: min(146px, calc((100vw - 48px) / 8.05)); }
/* the words cut into the picture: ink letters with a page-coloured outline */
.poster .line { color: var(--ink); mix-blend-mode: normal; -webkit-text-stroke: .07em var(--fog); paint-order: stroke fill; }
body { padding-bottom: 0; }
.signoff { padding-bottom: 120px; }      /* room for the floating menu */

/* =========================================================
   Update: white background, new homepage opening
   ========================================================= */
:root { --fog: #ffffff; --mist: #f4f2f7; }
.book-panel { background: var(--mist); }
.book-open .stage { background: var(--paper); }
.feature .book-open .stage { background: var(--mist); }
.dock a.item:hover { background: var(--mist); }
.menu-overlay .close { background: var(--mist); }

/* homepage opening: words on the left, the arched picture on the right */
.hero { padding: 96px 0 40px; }
.hero-grid {
  display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: center;
  min-height: calc(100vh - 136px);
}
.hero-title {
  font-size: clamp(44px, 6.4vw, 92px); line-height: .92; letter-spacing: -0.035em; margin: 0 0 26px;
}
.hero-title span { display: block; white-space: nowrap; }
.hero-second { font-stretch: 112%; font-weight: 300; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 22px; }
.hero-sub { font-size: 20px; line-height: 1.55; color: var(--slate); max-width: 27em; margin: 0 0 36px; }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-arch { margin: 0; justify-self: end; width: min(430px, 100%); position: relative; }
.hero-arch::before {                      /* soft glow from the door */
  content: ""; position: absolute; inset: 18% -14% 4% -14%; z-index: 0;
  background: radial-gradient(closest-side, rgba(232,137,58,.22), rgba(183,166,191,.18) 55%, transparent);
  filter: blur(24px);
}
.hero-arch img { position: relative; z-index: 1; width: 100%; border-radius: 999px 999px 26px 26px; box-shadow: 0 40px 70px -30px rgba(23,26,51,.45); }
@media (prefers-reduced-motion: no-preference) {
  .hero-arch img { animation: open-door 1.4s cubic-bezier(.2,.7,.2,1) both; }
  .hero-title span:nth-child(1) { animation: slide-in-l 1s .1s cubic-bezier(.2,.7,.2,1) both; }
  .hero-title span:nth-child(2) { animation: slide-in-l 1s .25s cubic-bezier(.2,.7,.2,1) both; }
  .hero-second, .hero-sub, .hero .actions { animation: slide-in-l 1s .45s cubic-bezier(.2,.7,.2,1) both; }
}
@keyframes open-door { from { clip-path: inset(100% 0 0 0 round 999px 999px 26px 26px); } to { clip-path: inset(0 0 0 0 round 999px 999px 26px 26px); } }
@media (max-width: 820px) {
  .hero { padding: 78px 0 30px; }
  .hero-grid { grid-template-columns: 1fr; gap: 32px; min-height: 0; }
  .hero-arch { order: -1; justify-self: center; width: min(280px, 78%); }
  .hero-title { font-size: calc((100vw - 48px) / 7.6); }
  .hero-sub { font-size: 18px; }
}

/* footer: option B — white, thin line on top, smaller name, no repeated menu */
.signoff { background: #fff; border-top: 1px solid #e6e3ec; padding: 48px 0 120px; }
.signoff .big { font-size: 40px; letter-spacing: -0.03em; margin: 0 0 26px; white-space: normal; }
.signoff-row { display: grid; grid-template-columns: 1fr auto auto; gap: 18px 36px; align-items: center; color: var(--slate); }
.signoff-row a { color: var(--ink); }
.signoff-row a:hover { color: var(--door); }
.social-text a { border-color: var(--door); }
@media (max-width: 820px) {
  .signoff { padding-top: 40px; }
  .signoff .big { font-size: 32px; }
  .signoff-row { grid-template-columns: 1fr auto; }
  .signoff-row > span:first-child { grid-column: 1 / -1; }
}

/* =========================================================
   Thin lines drawn from the arched picture:
   concentric doorways and an orbit with a small amber planet
   ========================================================= */
.hero-arch { overflow: visible; }
.hero-arch .ring {
  position: absolute; z-index: 0; pointer-events: none;
  border: 1px solid var(--lilac-deep); border-bottom: 0;
  border-radius: 999px 999px 0 0;
}
.hero-arch .ring-1 { inset: -22px -22px 0 -22px; }
.hero-arch .ring-2 { inset: -48px -48px -30px -48px; opacity: .55; }
.hero-arch .ring-3 { inset: -76px -76px -60px -76px; opacity: .28; }
.hero-arch .orbit {
  position: absolute; z-index: 2; pointer-events: none;
  left: -26%; right: -26%; top: 12%; height: 34%;
  border: 1px solid var(--door); border-radius: 50%; opacity: .85;
  transform: rotate(-14deg);
}
.hero-arch .planet {
  position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--door);
  left: 6%; top: 74%;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-arch .ring { animation: fade-in 1.6s .6s ease both; }
  .hero-arch .orbit { animation: orbit-in 1.6s .9s cubic-bezier(.2,.7,.2,1) both; }
}
@keyframes fade-in { from { opacity: 0; } }
@keyframes orbit-in { from { opacity: 0; transform: rotate(-40deg) scale(.9); } }

/* the same drawing, quietly, at the top of the other pages */
.page-head, .author-head, .feature { position: relative; overflow: hidden; }
.page-head::after, .author-head::after, .feature::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: 40px; right: max(24px, calc((100% - var(--site-width)) / 2 - 40px));
  width: 300px; height: 390px;
  background: url(../images/arches.svg) no-repeat center top / contain;
}
.page-head .container, .author-head .container, .feature .container { position: relative; }
main { position: relative; z-index: 0; }

/* the shelf line gets a small planet at its end */
.shelf-row { position: relative; }
.shelf-row::after {
  content: ""; position: absolute; right: -6px; bottom: -7px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--door);
}

@media (max-width: 820px) {
  .hero-arch .ring-3 { display: none; }
  .hero-arch .ring-2 { inset: -36px -36px -20px -36px; }
  .hero-arch .ring-1 { inset: -16px -16px 0 -16px; }
  .page-head::after, .author-head::after, .feature::after { width: 170px; height: 220px; top: 70px; right: 8px; opacity: .7; }
}
.author-head::after { display: none; }
.page-head::after, .feature::after { width: 250px; height: 325px; right: max(8px, calc((100% - var(--site-width)) / 2 - 120px)); top: 34px; }

/* calmer titles on De l'intelligence, Future Ready and Table Ronde */
.page-head h1, .feature h1 { font-size: clamp(34px, 4.6vw, 64px); line-height: .98; }
.page-head { padding: 110px 0 44px; }
.feature-grid { margin-top: 36px; }

/* book panels take the lilac of the years in "Ses livres" */
.book-panel { background: var(--lilac-deep); }
.book-panel .meta { color: var(--ink); opacity: .78; }
.feature .book-open .stage { background: var(--lilac-deep); }