:root{--olive:#59634A;--sage:#A8B29A;--mist:#DDE2D5;--ivory:#F5F3EC;--ink:#292B26;--max:1240px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--ivory);line-height:1.6}a{color:inherit;text-decoration:none}img{width:100%;display:block}.container{width:min(var(--max),calc(100% - 40px));margin:auto}.serif{font-family:Georgia,'Times New Roman',serif;font-weight:400}.kicker{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--olive)}.site-header{position:fixed;inset:0 0 auto;z-index:10;background:rgba(245,243,236,.92);backdrop-filter:blur(10px);border-bottom:1px solid rgba(89,99,74,.15)}.header-inner{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{color:var(--olive);letter-spacing:.14em}.nav{display:flex;gap:28px;font-size:.78rem;letter-spacing:.13em;text-transform:uppercase}.nav a{padding:8px 0}.hero{min-height:100vh;display:grid;align-items:end;position:relative;overflow:hidden}.hero:before{content:'';position:absolute;inset:0;background:linear-gradient(rgba(245,243,236,.28),rgba(245,243,236,.28)),linear-gradient(90deg,rgba(41,43,38,.25),rgba(41,43,38,.06));z-index:1}.hero img{position:absolute;inset:0;height:100%;object-fit:cover}.hero-copy{position:relative;z-index:2;color:white;padding:160px 0 90px;text-align:center;width:100%}.hero h1{margin:0 0 18px;white-space:nowrap;font-size:clamp(3rem,8vw,7rem);line-height:.9;text-shadow:0 2px 18px rgba(41,43,38,.2)}.hero p{margin:0;letter-spacing:.12em;text-transform:uppercase}.intro{padding:80px 0 42px}.observation{display:grid;grid-template-columns:.92fr 1.08fr;gap:70px;align-items:center}.observation-text p{font-family:Georgia,'Times New Roman',serif;font-size:clamp(1.2rem,2vw,1.75rem);line-height:1.55;margin:0}.observation-sketch{mix-blend-mode:multiply;filter:contrast(.92) brightness(1.12);max-height:460px;object-fit:contain}.button-link{display:inline-flex;gap:14px;margin-top:20px;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--olive)}.section{padding:64px 0}.section-title-row{display:flex;align-items:center;gap:20px;margin-bottom:24px}.section-title-row h2{font-size:1rem;letter-spacing:.15em;text-transform:uppercase;color:var(--olive);white-space:nowrap}.line{height:1px;background:var(--sage);flex:1}.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.project-card{background:rgba(255,255,255,.38);transition:.25s}.project-card:hover{transform:translateY(-4px);box-shadow:0 18px 45px rgba(41,43,38,.08)}.project-card .media{background:#ebe9e1}.project-card img{height:auto;max-height:520px;object-fit:contain}.project-meta{padding:18px}.project-meta h3{margin:5px 0 2px;font-size:1.6rem;color:var(--olive)}.project-meta p{margin:0;font-size:.88rem}.about-strip{margin-top:24px;background:var(--mist);display:grid;grid-template-columns:.58fr 1.42fr}.about-strip .portrait{height:100%;min-height:420px;object-fit:cover}.about-copy{padding:48px;display:flex;flex-direction:column;justify-content:center}.about-copy h2{color:var(--olive);letter-spacing:.16em;text-transform:uppercase;font-size:1rem}.site-footer{padding:34px 0 42px;border-top:1px solid rgba(89,99,74,.2)}.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:22px}.page-hero{padding:150px 0 58px}.page-hero .kicker{margin-bottom:24px}.page-hero h1{font-size:clamp(3rem,7vw,6.8rem);margin:0;line-height:.92;color:var(--olive)}.about-page-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:64px;align-items:start}.about-page-grid .portrait{max-height:720px;object-fit:cover;object-position:center 35%}.about-page-copy p{margin:0 0 22px;font-size:1.03rem}.cv-card{background:var(--mist);padding:28px;margin-top:28px;display:flex;justify-content:space-between;gap:20px}.travel-section{margin-top:72px;padding:64px 0;background:var(--mist)}.travel-intro{display:grid;grid-template-columns:.75fr 1.25fr;gap:70px;margin-bottom:38px}.travel-intro h2{margin:0;color:var(--olive);font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(2rem,4vw,3.6rem)}.sketch-gallery{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:18px;align-items:end}.sketch-gallery figure{margin:0}.sketch-gallery img{background:var(--ivory);max-height:480px;object-fit:contain;mix-blend-mode:multiply}.sketch-gallery figcaption{margin-top:8px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--olive)}.project-hero-img{max-height:74vh;object-fit:contain;background:#ebe9e1}.project-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;padding:58px 0 80px}.project-facts{border-top:1px solid var(--sage);padding-top:18px}.back{display:inline-block;margin-top:28px;color:var(--olive);font-size:.8rem;text-transform:uppercase}@media(max-width:800px){.observation,.about-page-grid,.travel-intro,.about-strip,.footer-grid,.project-layout{grid-template-columns:1fr}.project-grid,.sketch-gallery{grid-template-columns:1fr}.hero h1{white-space:normal}.nav{gap:12px;font-size:.67rem}}
/* V3 refinements */
.hero h1{letter-spacing:.14em;font-kerning:normal;text-rendering:geometricPrecision}
.observation-sketch{background:transparent!important;mix-blend-mode:multiply;opacity:.58;filter:grayscale(1) contrast(1.75) brightness(1.48);max-height:430px;object-fit:contain;box-shadow:none!important;border:0!important}
.project-card{background:transparent;box-shadow:none}
.project-card:hover{box-shadow:none}
.project-card .media{background:transparent;overflow:hidden}
.project-card img{display:block;width:100%;height:auto;max-height:none;object-fit:cover}
.project-meta{padding:14px 0 24px}
.project-hero-img{background:transparent;width:min(var(--max),calc(100% - 40px));margin:0 auto;height:auto;max-height:none;object-fit:contain}
@media(max-width:800px){.hero h1{letter-spacing:.08em}.project-hero-img{width:calc(100% - 24px)}}

/* V4 */
.hero h1{letter-spacing:.055em!important;font-kerning:none;font-feature-settings:"kern" 0;text-rendering:geometricPrecision}
.observation-sketch{background:transparent!important;opacity:.82!important;filter:none!important;mix-blend-mode:multiply;width:100%;max-height:440px;object-fit:contain;border:0!important;box-shadow:none!important}
.project-card .media{width:100%;aspect-ratio:16/9;overflow:hidden;background:transparent}
.project-card .media img{width:100%;height:100%;max-height:none;object-fit:cover;display:block}
.project-hero-img{display:block;width:min(var(--max),calc(100% - 40px));height:auto;max-height:none;object-fit:contain;margin:0 auto;background:transparent}
@media(max-width:800px){.hero h1{letter-spacing:.035em!important}}

/* ---- V5 refinements ---- */

/* Hero name: every glyph gets the same explicit spacing. */
.hero h1{
  letter-spacing:0 !important;
  font-kerning:none !important;
  font-feature-settings:"kern" 0 !important;
}
.hero-name{
  display:inline-flex;
  justify-content:center;
  gap:.055em;
}
.hero-name .name-space{width:.34em}

/* Homepage: project titles use body text colour, with tighter subtitle spacing. */
.project-card .project-meta h3{color:var(--ink) !important;margin:4px 0 0}
.project-card .project-meta p{margin-top:-2px}

/* Intro copy now matches project-title scale. */
.observation-text p{
  font-size:1.6rem;
  line-height:1.48;
}

/* Aurore's transparent sketch: no image processing, no blend/filter. */
.observation-sketch{
  opacity:.58 !important;
  filter:none !important;
  mix-blend-mode:normal !important;
  background:transparent !important;
}

/* Active top navigation */
.page-projets .nav a[href$="#projets"],
.page-projets .nav a[href$="index.html#projets"],
.page-about .nav a[href$="about.html"]{
  border-bottom:1px solid var(--olive);
}

/* Project detail pages: title only above image, olive. */
.project-page-heading{padding-bottom:36px}
.project-page-heading h1{color:var(--olive);font-size:clamp(2.8rem,6vw,5.6rem)}
.project-hero-img{
  width:min(980px,calc(100% - 80px)) !important;
  max-height:62vh !important;
  object-fit:contain !important;
}
.project-layout{padding-top:44px}
.project-description p{margin-top:0;margin-bottom:18px}
.project-description .back{
  margin-top:20px;
  padding:0;
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* About: smaller portrait with text aligned beside it. */
.about-page-grid{
  grid-template-columns:minmax(260px,390px) 1fr;
  gap:58px;
  align-items:start;
}
.about-page-grid .portrait{
  width:100%;
  max-width:390px;
  height:auto;
  max-height:560px;
  object-fit:cover;
  object-position:center 35%;
}
.about-page-copy{padding-top:0}
.cv-card{display:none !important}

@media(max-width:800px){
  .observation-text p{font-size:1.35rem}
  .project-hero-img{width:calc(100% - 32px) !important;max-height:none !important}
  .about-page-grid{grid-template-columns:1fr}
  .about-page-grid .portrait{max-width:330px}
}


/* ---- V6 refinements ---- */

/* White project cards like V1 */
.project-card{
  background:rgba(255,255,255,.72) !important;
}
.project-card:hover{
  box-shadow:0 14px 34px rgba(41,43,38,.07) !important;
}
.project-meta{
  padding:16px 18px 18px !important;
}

/* Project page facts spacing, like V1 */
.project-layout{
  padding-top:58px !important;
  gap:70px !important;
}
.project-facts{
  border-top:1px solid var(--sage);
  padding-top:22px !important;
  line-height:1.7;
  font-size:.92rem;
}
.project-description{
  padding-top:22px;
}

/* Back link V1 style */
.project-description .back{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--olive);
  margin-top:24px;
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* About portrait: slightly shorter, aligned with text end */
.about-page-grid{
  grid-template-columns:minmax(240px,350px) 1fr !important;
  gap:56px !important;
}
.about-page-grid .portrait{
  max-width:350px !important;
  max-height:500px !important;
  object-fit:cover !important;
}

/* Active navigation underline */
.nav a.active{
  border-bottom:1px solid var(--olive);
}
.nav a.active::after{
  right:0 !important;
}

/* Footer identical on every page */
.site-footer{
  padding:34px 0 40px;
}
.footer-grid{
  grid-template-columns:1.3fr 1fr 1fr;
  align-items:center;
}
.footer-grid > div{
  min-height:46px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.footer-grid > div:not(:first-child){
  border-left:1px solid var(--sage);
  padding-left:26px;
}
.footer-linkedin{
  color:var(--olive);
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.8rem;
}

/* Contact active state */
body.contact-active .nav a[href="#contact"]{
  border-bottom:1px solid var(--olive);
}

@media(max-width:800px){
  .about-page-grid{
    grid-template-columns:1fr !important;
  }
  .about-page-grid .portrait{
    max-width:320px !important;
    max-height:460px !important;
  }
  .footer-grid > div:not(:first-child){
    border-left:0;
    padding-left:0;
  }
}


/* ---- V7 refinements ---- */

/* Ensure long project text never gets clipped on wide/fullscreen layouts */
.project-description{
  overflow:visible !important;
  min-width:0;
  max-width:100%;
}
.project-description p{
  overflow:visible !important;
  white-space:normal !important;
  word-break:normal;
  overflow-wrap:break-word;
}

/* Smaller portrait on About */
.about-page-grid{
  grid-template-columns:minmax(210px,300px) 1fr !important;
  gap:52px !important;
}
.about-page-grid .portrait{
  width:100% !important;
  max-width:300px !important;
  max-height:430px !important;
  height:auto !important;
  object-fit:cover !important;
  object-position:center 32% !important;
}

/* Footer: centered cells, compact name/email spacing, identical typography */
.footer-grid{
  display:grid !important;
  grid-template-columns:1fr 1fr 1fr !important;
  align-items:stretch !important;
  text-align:center;
}
.footer-grid > .footer-item{
  min-height:58px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-direction:row !important;
  gap:8px;
  padding:0 24px !important;
  font-size:.88rem;
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
}
.footer-grid > .footer-item:not(:first-child){
  border-left:1px solid var(--sage);
}
.footer-identity{
  flex-direction:column !important;
  gap:0 !important;
  line-height:1.15 !important;
}
.footer-identity strong{
  font-weight:600;
  margin:0;
  line-height:1.15;
}
.footer-identity a{
  margin:1px 0 0;
  line-height:1.15;
  font-size:.88rem;
}
.footer-linkedin{
  color:var(--ink) !important;
  font-size:.88rem !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}
.linkedin-logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:21px;
  height:21px;
  border:1px solid #9d9f99;
  border-radius:2px;
  color:#9d9f99;
  font-family:Arial,Helvetica,sans-serif;
  font-size:12px;
  font-weight:700;
  line-height:1;
}

/* Active Contact underline when footer hash is active */
.nav a.active{
  border-bottom:1px solid var(--olive) !important;
}

/* Scroll target leaves footer clearly visible */
#contact{
  scroll-margin-top:90px;
}

@media(max-width:800px){
  .about-page-grid{
    grid-template-columns:1fr !important;
  }
  .about-page-grid .portrait{
    max-width:280px !important;
    max-height:400px !important;
  }
  .footer-grid{
    grid-template-columns:1fr !important;
  }
  .footer-grid > .footer-item:not(:first-child){
    border-left:0;
    border-top:1px solid var(--sage);
  }
}

/* V8 final general-layout fixes */
.footer-identity{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:1px !important;
}
.footer-identity strong,
.footer-identity a{
  display:block !important;
  width:100%;
  text-align:center;
}

/* Hash-based Contact underline: works immediately when #contact is targeted */
body:has(#contact:target) .nav a[href="#contact"]{
  border-bottom:1px solid var(--olive) !important;
}
body:has(#contact:target) .nav a[href="#projets"]{
  border-bottom:0 !important;
}

/* ---- V9: restore V1-style footer/contact behaviour ---- */

/* Higher specificity than the generic footer-item rule:
   name and email are unambiguously stacked. */
.footer-grid > .footer-identity{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:0 !important;
  line-height:1.15 !important;
}
.footer-grid > .footer-identity strong,
.footer-grid > .footer-identity a{
  display:block !important;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1.15 !important;
  text-align:center !important;
}

/* V1-style active navigation: only the selected item is underlined. */
body.contact-active .nav a{
  border-bottom:0 !important;
}
body.contact-active .nav a[href="#contact"]{
  border-bottom:1px solid var(--olive) !important;
}


/* ---- V10: navigation exactly in V1 spirit ---- */
.nav a{
  position:relative !important;
  padding:8px 0 !important;
  border-bottom:0 !important;
}

.nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:0;
  height:1px;
  background:var(--olive);
  transition:right .25s ease;
}

.nav a:hover::after,
.nav a.active::after{
  right:0;
}

/* Remove later border-based active rules so only the V1 animation remains. */
body.contact-active .nav a,
body.contact-active .nav a[href="#contact"],
.page-projets .nav a[href$="#projets"],
.page-projets .nav a[href$="index.html#projets"],
.page-about .nav a[href$="about.html"],
.nav a.active{
  border-bottom:0 !important;
}