/* ==========================================================================
   Julie Granger — site personnel
   Une seule colonne éditoriale façon magazine, un fil horizontal (la barre)
   qui traverse le hero. Identité perso noir & blanc ; seul le bloc final
   reprend la charte The Studio (brun/crème) pour faire la transition.
   ========================================================================== */

@font-face { font-family: "Bodoni Moda"; src: url("../fonts/BodoniModa.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("../fonts/BodoniModa-Italic.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Jost"; src: url("../fonts/Jost.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fonts/Newsreader-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fonts/Newsreader-LightItalic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/CormorantGaramond.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/CormorantGaramond-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

/* Intro « La barre » (assets/js/intro-julie-granger.js) : fond posé dès le premier affichage pour que la page
   n'apparaisse pas avant l'intro. Retiré par le script au lancement de l'animation ; disparaît seul après 4 s si le script échoue. */
html.jg-intro::before { content: ""; position: fixed; inset: 0; z-index: 2147482999; background: #EFE8DD; animation: jg-intro-cover 0s 4s forwards; }
@keyframes jg-intro-cover { to { visibility: hidden; } }

:root {
  --cream: #FAFAF7;
  --cream-deep: #EFEFEB;
  --brown: #111111;
  --brown-soft: #5F5F5B;
  --line: rgba(17, 17, 17, .14);
  --gold: #111111;
  --studio-brown: #474040;
  --studio-cream: #FFFDE2;
  --serif: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --studio-serif: "Newsreader", Georgia, serif;
  --sans: "Jost", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --wrap: 1120px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}
body { margin: 0; background: var(--cream); color: var(--brown); font-family: var(--sans); font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: inherit; }
img { max-width: 100%; display: block; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: clamp(16px, 4vw, 40px); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; text-wrap: balance; margin: 0; line-height: 1.08; }
p { margin: 0; }
.eyebrow { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--brown-soft); }
:focus-visible { outline: 2px solid var(--brown); outline-offset: 3px; }

.skip-link { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--brown); color: var(--cream); padding: 10px 16px; font-size: 13px; text-decoration: none; }
.skip-link:focus { top: 16px; }

/* Boutons ---------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; padding: 16px 28px; border: 1px solid var(--brown); transition: background .2s, color .2s; }
.btn-primary { background: var(--brown); color: var(--cream); }
.btn-primary:hover { background: transparent; color: var(--brown); }
.btn-ghost { background: transparent; color: var(--brown); }
.btn-ghost:hover { background: var(--brown); color: var(--cream); }
.btn .arrow { transition: transform .2s; }
.btn:hover .arrow { transform: translateX(4px); }

/* Barre du haut ---------------------------------------------------------- */
.top { position: sticky; top: 0; z-index: 10; background: var(--cream); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; }
.logo { font-family: var(--serif); font-size: 22px; font-weight: 400; text-decoration: none; letter-spacing: .01em; }
.top nav { display: flex; gap: 28px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.top nav a { text-decoration: none; color: var(--brown-soft); }
.top nav a:hover { color: var(--brown); }
.top .btn { padding: 10px 18px; font-size: 12px; }
@media (max-width: 860px) { .top nav { display: none; } }

/* Hero ------------------------------------------------------------------- */
.hero { padding-block: clamp(48px, 8vw, 96px) 0; }
.hero-grid { display: grid; grid-template-columns: 1.25fr .9fr; gap: clamp(32px, 5vw, 72px); align-items: end; }
.hero-text { min-width: 0; display: flex; flex-direction: column; gap: 28px; padding-bottom: clamp(24px, 4vw, 56px); }
.hero h1 { font-size: clamp(64px, 11vw, 148px); letter-spacing: -.02em; line-height: .92; }
.hero h1 em { font-style: italic; font-weight: 300; display: block; }
.hero .lede { font-family: var(--serif); font-size: clamp(21px, 2.2vw, 26px); line-height: 1.45; max-width: 30ch; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.portrait { position: relative; margin: 0; aspect-ratio: 4/5; max-width: 100%; background: linear-gradient(160deg, #E4E4E0, #BDBDB8); overflow: hidden; }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait figcaption { position: absolute; left: 0; bottom: 0; background: var(--cream); padding: 10px 16px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
/* la barre : un fil horizontal sur toute la largeur */
.barre { height: 0; border: 0; border-top: 1px solid var(--brown); margin: 0; }
@media (max-width: 820px) { .hero-grid { grid-template-columns: 1fr; } .portrait { max-width: 440px; } }

/* Bandeau de preuves ----------------------------------------------------- */
.proof { border-bottom: 1px solid var(--line); }
.proof ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.proof li { padding: 28px 20px 28px 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.proof li + li { padding-left: 20px; border-left: 1px solid var(--line); }
.proof strong { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 3vw, 36px); line-height: 1.1; font-variant-numeric: tabular-nums; }
.proof span { font-size: 13px; color: var(--brown-soft); line-height: 1.45; }
@media (max-width: 820px) {
  .proof ul { grid-template-columns: 1fr 1fr; }
  .proof li:nth-child(3) { padding-left: 0; border-left: 0; }
  .proof li:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* Sections --------------------------------------------------------------- */
section.block { padding-block: clamp(72px, 10vw, 128px); }
section.block--flush { padding-top: 0; }
.head { display: grid; grid-template-columns: 220px 1fr; gap: clamp(24px, 4vw, 64px); margin-bottom: clamp(40px, 5vw, 64px); }
.head h2 { font-size: clamp(38px, 5vw, 60px); }
.head h2 em { font-style: italic; }
.head--spaced { margin-top: clamp(72px, 9vw, 112px); }
@media (max-width: 820px) { .head { grid-template-columns: 1fr; gap: 12px; } }

/* Photos célébrités ------------------------------------------------------ */
.celeb { padding-block: clamp(56px, 8vw, 96px) 0; }
.celeb .head { margin-bottom: clamp(28px, 4vw, 48px); }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 28px); }
.shot { margin: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.shot.wide { grid-column: 1 / -1; }
.shot .frame { position: relative; aspect-ratio: 4/5; max-width: 100%; background: linear-gradient(160deg, #E4E4E0, #BDBDB8); overflow: hidden; }
.shot.wide .frame { aspect-ratio: 16/7; }
.shot .frame img { width: 100%; height: 100%; object-fit: cover; }
.shot.wide .frame img { object-position: 50% 20%; }
.shot figcaption { display: flex; flex-direction: column; gap: 2px; }
.shot .who { font-family: var(--serif); font-size: 19px; line-height: 1.35; }
.shot .where { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--brown-soft); }
@media (max-width: 820px) { .gallery { grid-template-columns: 1fr; } .shot.wide .frame { aspect-ratio: 3/2; } }

/* Presse ----------------------------------------------------------------- */
.press-names { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: clamp(28px, 4vw, 56px); row-gap: 12px; font-family: var(--serif); font-size: clamp(28px, 4vw, 48px); font-weight: 300; line-height: 1.2; padding-block: 8px 40px; border-bottom: 1px solid var(--line); }
.press-names span:nth-child(even) { font-style: italic; }
.podcasts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; margin-top: 8px; }
.podcasts a { display: flex; justify-content: space-between; gap: 16px; padding-block: 20px; border-bottom: 1px solid var(--line); text-decoration: none; min-width: 0; }
.podcasts a:hover .pt { text-decoration: underline; text-underline-offset: 4px; }
.pt { font-family: var(--serif); font-size: 22px; }
.pm { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--brown-soft); white-space: nowrap; align-self: center; }
@media (max-width: 700px) { .podcasts { grid-template-columns: 1fr; } }

/* Parcours --------------------------------------------------------------- */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--brown); }
.timeline li { padding: 24px 20px 0 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; position: relative; }
.timeline li::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--brown); }
.timeline .yr { font-family: var(--serif); font-size: 30px; font-weight: 400; font-variant-numeric: tabular-nums; }
.timeline p { font-size: 15px; line-height: 1.6; }
@media (max-width: 900px) {
  .timeline { grid-template-columns: 1fr; border-top: 0; border-left: 1px solid var(--brown); padding-left: 28px; gap: 32px; }
  .timeline li { padding: 0; }
  .timeline li::before { top: 12px; left: -33px; }
}

/* Méthodes --------------------------------------------------------------- */
.methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 40px); }
.method { display: flex; flex-direction: column; gap: 14px; padding-top: 20px; border-top: 1px solid var(--brown); min-width: 0; }
.method h3 { font-size: 30px; }
.method sup { font-size: .45em; vertical-align: super; font-family: var(--sans); }
.method p { font-size: 15px; }
@media (max-width: 820px) { .methods { grid-template-columns: 1fr; } }

/* Livre ------------------------------------------------------------------ */
.book { background: var(--brown); color: var(--cream); }
.book .eyebrow { color: rgba(250, 250, 247, .65); }
.book-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.cover { aspect-ratio: 2/3; max-width: 320px; width: 100%; margin-inline: auto; background: var(--cream); color: var(--brown); padding: 36px 28px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 24px 24px 0 rgba(250, 250, 247, .12); }
.cover .ct { font-family: var(--serif); font-size: 44px; line-height: 1; font-weight: 300; }
.cover .ct em { font-style: italic; }
.cover .ca { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
.book-text { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.book h2 { font-size: clamp(40px, 5vw, 64px); }
.book h2 em { font-style: italic; }
.book p { max-width: 52ch; color: rgba(250, 250, 247, .85); }
.book .btn { border-color: var(--cream); color: var(--cream); align-self: flex-start; }
.book .btn:hover { background: var(--cream); color: var(--brown); }
@media (max-width: 820px) { .book-grid { grid-template-columns: 1fr; } }

/* Communauté ------------------------------------------------------------- */
.comms { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.comm { background: var(--cream); padding: clamp(28px, 3vw, 40px); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.comm .eyebrow { color: var(--gold); }
.comm h3 { font-size: 30px; }
.comm p { font-size: 15px; }
@media (max-width: 820px) { .comms { grid-template-columns: 1fr; } }

/* Avis ------------------------------------------------------------------- */
.reviews-top { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-bottom: 40px; }
.score { font-family: var(--serif); font-size: 72px; line-height: 1; font-weight: 300; font-variant-numeric: tabular-nums; }
.stars { color: var(--gold); font-size: 22px; letter-spacing: 4px; }
.score-note { font-size: 14px; color: var(--brown-soft); max-width: 36ch; }
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 36px); }
.review { margin: 0; display: flex; flex-direction: column; gap: 16px; padding: 28px; background: var(--cream-deep); min-width: 0; }
.review blockquote { margin: 0; font-family: var(--serif); font-size: 20px; line-height: 1.5; font-style: italic; }
.review cite { font-style: normal; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--brown-soft); margin-top: auto; }
@media (max-width: 900px) { .reviews { grid-template-columns: 1fr; } }

/* CTA final -------------------------------------------------------------- */
.final { background: var(--studio-brown); color: var(--studio-cream); text-align: left; }
.final h2 { font-family: var(--studio-serif); font-weight: 300; font-size: clamp(48px, 7vw, 96px); letter-spacing: -.01em; }
.final h2 em { font-style: italic; }
.final .eyebrow { color: rgba(255, 253, 226, .7); }
.final .btn { border-color: var(--studio-cream); }
.final .btn-primary { background: var(--studio-cream); color: var(--studio-brown); }
.final .btn-primary:hover { background: transparent; color: var(--studio-cream); }
.final .btn-ghost { color: var(--studio-cream); }
.final .btn-ghost:hover { background: var(--studio-cream); color: var(--studio-brown); }
.final-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: end; }
.final-side { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.final-side .ctas { flex-direction: column; align-items: stretch; }
.final-side .btn { justify-content: space-between; }
@media (max-width: 820px) { .final-grid { grid-template-columns: 1fr; } }

/* Footer ----------------------------------------------------------------- */
footer { border-top: 1px solid var(--line); padding-block: 32px; font-size: 13px; color: var(--brown-soft); }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
footer a { text-decoration: none; }
footer a:hover { color: var(--brown); }
footer .credit { margin-top: 16px; margin-bottom: 0; font-size: 11px; opacity: .7; }