/* ============================================================
   LAHOUAZI — feuille de style partagée
   ============================================================ */

:root{
  --ink:#1c1a1e;
  --ink-soft:#4a454c;
  --bone:#eae6dc;
  --bone-soft:#f4f1e9;
  --prune:#4b1942;
  --prune-light:#7a3d6e;
  --gold:#a9824f;
  --line: rgba(28,26,30,0.14);
  --mood:#4b1942;
  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:'IBM Plex Mono', 'SF Mono', Consolas, monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:96px;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}

body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  position:relative;
}

/* subtle paper grain — keeps flat colour fields from feeling synthetic */
body::before{
  content:"";
  position:fixed; inset:0; z-index:999;
  pointer-events:none;
  opacity:0.035;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

a{color:inherit;}
img{max-width:100%; display:block;}
::selection{background:var(--prune); color:var(--bone-soft);}
a:focus-visible, button:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:2px;}

/* ---------- skip link ---------- */
.skip-link{
  position:fixed; top:-60px; left:16px; z-index:1000;
  background:var(--ink); color:var(--bone-soft);
  padding:12px 18px; border-radius:8px; font-size:14px; text-decoration:none;
  transition:top .2s ease;
}
.skip-link:focus{top:16px;}

h1, h2, h3{text-wrap:balance;}

.wrap{width:100%; max-width:1180px; margin:0 auto; padding:0 32px;}

/* ---------- mood glow ---------- */
.mood-glow{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60vw 60vw at 88% -8%, color-mix(in srgb, var(--mood) 22%, transparent), transparent 60%),
    radial-gradient(50vw 50vw at -10% 60%, color-mix(in srgb, var(--mood) 14%, transparent), transparent 65%);
  transition: background 1.4s cubic-bezier(.22,.61,.36,1);
}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--bone) 82%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:20px 0;}
.logo{display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:14px; letter-spacing:0.18em; text-decoration:none; font-weight:500; color:var(--ink);}
.logo-mark{color:var(--prune); flex-shrink:0; transition:transform .4s cubic-bezier(.22,.61,.36,1);}
.logo:hover .logo-mark{transform:rotate(-8deg);}
.nav{display:flex; gap:32px; align-items:center;}
.nav a{font-size:14px; text-decoration:none; color:var(--ink-soft); letter-spacing:0.02em; transition:color .25s ease;}
.nav a:hover, .nav a[aria-current="page"]{color:var(--prune);}

/* ---------- mobile nav toggle ---------- */
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:38px; height:38px; background:none; border:none; cursor:pointer; padding:0;
}
.nav-toggle span{width:20px; height:1.5px; background:var(--ink); transition:transform .3s ease, opacity .3s ease;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
.nav-backdrop{display:none;}

@media (max-width:720px){
  .nav-toggle{display:flex;}
  .nav{
    position:fixed; top:0; right:0; height:100vh; width:min(78vw,320px);
    background:var(--bone-soft); flex-direction:column; align-items:flex-start;
    padding:96px 32px 40px; gap:26px;
    box-shadow:-20px 0 60px rgba(0,0,0,0.12);
    transform:translateX(100%); transition:transform .45s cubic-bezier(.22,.61,.36,1);
    z-index:39;
  }
  .nav.is-open{transform:translateX(0);}
  .nav a{font-size:17px;}
  .nav-backdrop{
    display:block; position:fixed; inset:0; z-index:38;
    background:rgba(20,18,20,0.28);
    opacity:0; pointer-events:none; transition:opacity .35s ease;
  }
  .nav-backdrop.is-open{opacity:1; pointer-events:auto;}
}

.breadcrumb{
  font-family:var(--mono); font-size:12.5px; color:var(--ink-soft); text-decoration:none;
  display:inline-flex; align-items:center; gap:6px; margin-bottom:28px;
}
.breadcrumb:hover{color:var(--prune);}

/* ---------- hero (home) ---------- */
.hero{padding:min(16vw,140px) 0 96px;}
.eyebrow{font-family:var(--mono); font-size:12.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--prune); margin:0 0 28px;}
h1{font-family:var(--serif); font-weight:600; font-size:clamp(34px,6.4vw,76px); line-height:1.06; letter-spacing:-0.01em; margin:0 0 30px; max-width:16ch;}
h1 .accent{color:var(--prune); font-style:italic; font-weight:500;}
.hero-sub{font-size:clamp(16px,1.6vw,19px); color:var(--ink-soft); max-width:52ch; margin:0 0 44px;}
.scroll-cue{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:13px; text-decoration:none; color:var(--ink); border-bottom:1px solid var(--ink); padding-bottom:4px; transition:opacity .25s ease, gap .25s ease;}
.scroll-cue:hover{gap:14px; opacity:.75;}

/* ---------- intro ---------- */
.intro{padding:0 0 120px;}
.intro-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; border-top:1px solid var(--line); padding-top:48px;}
.intro-label{font-family:var(--mono); font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft);}
.intro-text{font-family:var(--serif); font-size:clamp(20px,2.3vw,27px); font-weight:400; line-height:1.42; margin:0;}
.intro-text b{font-weight:600; font-style:italic; color:var(--prune);}

/* ---------- section titles ---------- */
.section-title{font-family:var(--serif); font-weight:600; font-size:clamp(26px,3vw,36px); margin:0 0 8px;}
.section-kicker{font-family:var(--mono); font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 64px; display:block;}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1);}
.reveal.is-visible{opacity:1; transform:translateY(0);}

/* ---------- project blocks (home list) ---------- */
.project{padding:64px 0; border-top:1px solid var(--line); position:relative; overflow-x:hidden;}
.project::before{content:""; position:absolute; top:-1px; left:0; width:64px; height:3px; background:var(--accent, var(--prune));}
.project-inner{display:grid; grid-template-columns:1.05fr 0.95fr; gap:64px; align-items:center;}
.project--reverse .project-inner{grid-template-columns:0.95fr 1.05fr;}
.project--reverse .project-media{order:2;}
.project--reverse .project-copy{order:1;}
.project-tag{display:inline-block; font-family:var(--mono); font-size:12px; letter-spacing:0.06em; color:var(--accent, var(--prune)); margin-bottom:16px;}
.project-copy h3{font-family:var(--serif); font-weight:600; font-size:clamp(24px,2.6vw,32px); margin:0 0 16px;}
.project-copy h3 a{text-decoration:none; color:inherit;}
.project-copy h3 a:hover{color:var(--accent,var(--prune));}
.project-copy p{color:var(--ink-soft); font-size:15.5px; max-width:46ch; margin:0 0 22px;}
.tech-tags{list-style:none; margin:0 0 26px; padding:0; display:flex; flex-wrap:wrap; gap:8px;}
.tech-tags li{font-family:var(--mono); font-size:11.5px; letter-spacing:0.02em; padding:5px 10px; border:1px solid var(--line); border-radius:20px; color:var(--ink-soft);}
.project-link{font-size:14px; text-decoration:none; font-weight:500; border-bottom:1px solid currentColor; padding-bottom:3px; color:var(--ink); transition:color .25s ease;}
.project-link:hover{color:var(--accent, var(--prune));}
.project-note{font-family:var(--mono); font-size:12.5px; color:var(--ink-soft);}

/* ---------- browser frame (screenshot wrapper) ---------- */
.browser{border-radius:12px; overflow:hidden; box-shadow:0 30px 60px -20px rgba(28,26,30,0.35), 0 2px 8px rgba(28,26,30,0.06); transform:rotate(var(--tilt,0deg)); transition:transform .5s ease; background:#111;}
.project-media:hover .browser, .figure:hover .browser{transform:rotate(0deg) scale(1.015);}
.browser__bar{display:flex; align-items:center; gap:7px; padding:11px 14px; background:#dedad0;}
.browser--dark .browser__bar, .browser--tech .browser__bar{background:rgba(255,255,255,0.06);}
.dot{width:8px; height:8px; border-radius:50%; background:#ed6a5e;}
.dot:nth-child(2){background:#f4bf4f;}
.dot:nth-child(3){background:#61c454;}
.browser--dark .dot, .browser--tech .dot{opacity:0.85;}
.browser__url{font-family:var(--mono); font-size:11.5px; color:var(--ink-soft); margin-left:6px;}
.browser--dark .browser__url, .browser--tech .browser__url{color:rgba(255,255,255,0.55);}
.browser__body{aspect-ratio:16/10; overflow:hidden; position:relative;}
.browser__body img{width:100%; height:100%; object-fit:cover; object-position:top; cursor:zoom-in; transition:filter .3s ease;}
.browser__body img:hover{filter:brightness(1.03);}

/* ---------- editorial project index numeral ---------- */
.project-index{
  position:absolute; top:36px; right:32px;
  font-family:var(--serif); font-size:clamp(64px,10vw,140px); font-weight:600;
  color:var(--ink); opacity:0.045; line-height:1; user-select:none; pointer-events:none;
}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(15,14,15,0.92);
  display:flex; align-items:center; justify-content:center; padding:5vw;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.lightbox.is-open{opacity:1; pointer-events:auto;}
.lightbox img{max-width:100%; max-height:88vh; border-radius:8px; box-shadow:0 30px 80px rgba(0,0,0,0.5); cursor:default;}
.lightbox__close{
  position:absolute; top:26px; right:32px; background:none; border:none; color:#fff;
  font-family:var(--mono); font-size:13px; letter-spacing:0.08em; cursor:pointer;
  display:flex; align-items:center; gap:8px; opacity:.8; transition:opacity .2s ease;
}
.lightbox__close:hover{opacity:1;}

/* ---------- approche ---------- */
.approche{padding:120px 0;}
.principles{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.principle{background:var(--bone); padding:36px 30px;}
.principle h4{font-family:var(--serif); font-weight:600; font-size:19px; margin:0 0 12px;}
.principle p{color:var(--ink-soft); font-size:14.5px; margin:0;}

/* ============================================================
   PAGE PROJET (détail)
   ============================================================ */
.project-hero{padding:56px 0 40px;}
.project-hero .project-tag{margin-bottom:18px;}
.project-hero h1{max-width:20ch; font-size:clamp(32px,5.5vw,58px); margin-bottom:22px;}
.project-hero p{font-size:clamp(16px,1.4vw,18px); color:var(--ink-soft); max-width:60ch; margin:0 0 30px;}
.project-hero .actions{display:flex; align-items:center; gap:24px; flex-wrap:wrap;}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--ink); color:var(--bone-soft); text-decoration:none;
  font-size:14px; font-weight:500; padding:12px 22px; border-radius:30px;
  transition:background .25s ease, transform .25s ease;
}
.btn:hover{background:var(--accent, var(--prune)); transform:translateY(-1px);}

.figure{margin:48px 0 64px;}
.figure figcaption{font-family:var(--mono); font-size:12.5px; color:var(--ink-soft); margin-top:14px; max-width:60ch;}

.detail-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; padding:40px 0; border-top:1px solid var(--line);}
.detail-grid h2{font-family:var(--serif); font-weight:600; font-size:22px; margin:0 0 18px;}
.feature-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px;}
.feature-list li{position:relative; padding-left:20px; font-size:15px; color:var(--ink-soft);}
.feature-list li::before{content:"—"; position:absolute; left:0; color:var(--accent, var(--prune));}

.subtool{border-top:1px solid var(--line); padding:64px 0;}
.subtool-head{display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:26px;}
.subtool-head h2{font-family:var(--serif); font-weight:600; font-size:clamp(22px,2.6vw,28px); margin:0;}
.subtool-head span{font-family:var(--mono); font-size:12px; color:var(--ink-soft);}
.subtool p.lead{color:var(--ink-soft); font-size:15.5px; max-width:60ch; margin:0 0 28px;}

.prevnext{display:flex; justify-content:space-between; padding:56px 0; border-top:1px solid var(--line); gap:20px; flex-wrap:wrap;}
.prevnext a{text-decoration:none; font-family:var(--mono); font-size:12.5px; color:var(--ink-soft);}
.prevnext a span{display:block; font-family:var(--serif); font-size:20px; color:var(--ink); margin-top:6px;}
.prevnext a:hover span{color:var(--prune);}
.prevnext .next{text-align:right; margin-left:auto;}

/* ============================================================
   CONTACT / MENTIONS LÉGALES
   ============================================================ */
.simple-page{padding:80px 0 120px;}
.simple-page h1{max-width:none; font-size:clamp(30px,5vw,48px);}
.simple-page .lead{font-size:18px; color:var(--ink-soft); max-width:56ch; margin:0 0 48px;}
.contact-card{
  border:1px solid var(--line); border-radius:16px; padding:40px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px;
  background:var(--bone-soft);
}
.contact-card a.big{font-family:var(--serif); font-size:clamp(22px,3vw,30px); text-decoration:none; border-bottom:2px solid var(--prune);}
.contact-meta{font-family:var(--mono); font-size:13px; color:var(--ink-soft); line-height:1.9;}

.legal{max-width:70ch;}
.legal h2{font-family:var(--serif); font-size:20px; margin:36px 0 12px;}
.legal p, .legal li{color:var(--ink-soft); font-size:15px;}
.legal .placeholder{background:#fff3cd; color:#5c4a13; padding:1px 6px; border-radius:4px; font-family:var(--mono); font-size:13px;}

/* ---------- footer ---------- */
footer{padding:80px 0 56px; border-top:1px solid var(--line);}
.footer-inner{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:24px;}
.footer-text{max-width:38ch; color:var(--ink-soft); font-size:14.5px; margin:14px 0 0;}
.footer-links{display:flex; gap:20px; flex-wrap:wrap;}
.footer-links a{font-size:13.5px; text-decoration:none; color:var(--ink-soft);}
.footer-links a:hover{color:var(--prune);}
.footer-contact{text-align:right;}
.footer-contact a{font-family:var(--serif); font-size:20px; text-decoration:none; border-bottom:1px solid var(--line);}
.footer-meta{font-family:var(--mono); font-size:11.5px; color:var(--ink-soft); margin-top:10px;}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .intro-grid{grid-template-columns:1fr; gap:22px;}
  .project-inner, .project--reverse .project-inner{grid-template-columns:1fr; gap:32px;}
  .project--reverse .project-media, .project--reverse .project-copy{order:initial;}
  .principles{grid-template-columns:1fr;}
  .detail-grid{grid-template-columns:1fr; gap:32px;}
  .footer-inner{flex-direction:column; align-items:flex-start;}
  .footer-contact{text-align:left;}
  .nav{gap:20px;}
  .contact-card{flex-direction:column; align-items:flex-start;}
}
@media (max-width:520px){
  .wrap{padding:0 22px;}
}