@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/DMSans-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/InstrumentSerif-italic.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/InstrumentSerif-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --bg:#F6F1E7; --paper:#FFFCF6; --ink:#1D1A17; --ink-2:#4A443D; --line:rgba(29,26,23,.12);
  --lavande:#D2C4F1; --rose:#F2BCCB; --tilleul:#D6E3A0; --jaune:#F6DA7F; --orange:#F3B387; --bleu:#BDD0DE; --creme:#EFE6D3;
  --r:30px; --gap:16px;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0 0.05 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:8px}

.top{max-width:1240px;margin:0 auto;padding:22px 24px;display:flex;align-items:center;justify-content:flex-end;gap:16px}
.top__actions{display:flex;gap:10px}

.bento{max-width:1240px;margin:0 auto;padding:8px 24px 24px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);grid-auto-flow:row dense}
.card{border-radius:var(--r);padding:30px;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:14px;min-width:0}
.card--paper{background:var(--paper);box-shadow:0 0 0 1px var(--line) inset}
.card--creme{background:var(--creme)}
.card--lavande{background:var(--lavande)}.card--rose{background:var(--rose)}.card--tilleul{background:var(--tilleul)}
.card--jaune{background:var(--jaune)}.card--orange{background:var(--orange)}.card--bleu{background:var(--bleu)}
.card--ink{background:var(--ink);color:#F6F1E7}

h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;line-height:1.02}
h1{font-size:clamp(44px,5.6vw,76px)}
h2{font-size:clamp(34px,3.4vw,46px)}
h3{font-size:30px}
.eyebrow{font-size:12.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.card--ink .eyebrow{color:rgba(246,241,231,.7)}
.lead{font-size:clamp(18px,1.6vw,21px);line-height:1.45;max-width:36ch}
.lead a{text-decoration-thickness:1px;text-underline-offset:3px}
.body{color:var(--ink-2);max-width:56ch}
.card--ink .body{color:rgba(246,241,231,.78)}
.small{font-size:14px;color:var(--ink-2)}
.card--ink .small{color:rgba(246,241,231,.6)}

.pill{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 22px;border-radius:999px;font-weight:500;font-size:15px;text-decoration:none;transition:transform .15s ease,background .15s ease;white-space:nowrap}
.pill:hover{transform:translateY(-1px)}
.pill--dark{background:var(--ink);color:#F6F1E7}
.pill--light{background:#FFFCF6;color:var(--ink);box-shadow:0 0 0 1px var(--line) inset}
.pill--outline{color:#F6F1E7;box-shadow:0 0 0 1px rgba(246,241,231,.35) inset}
.pill--outline:hover{background:rgba(246,241,231,.08)}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:8px}
.link{margin-top:auto;font-weight:500;text-decoration:none}
.link:hover{text-decoration:underline;text-underline-offset:3px}

/* Placement desktop */
.hero{grid-column:span 2;grid-row:span 2;padding:36px;gap:18px}
.v28{grid-column:span 2}
.cases-head{grid-column:span 2}
.path{grid-column:span 2;grid-row:span 2}
.refs{grid-column:span 2}
.contact{grid-column:span 3;flex-direction:row;align-items:flex-end;justify-content:space-between;gap:28px;padding:36px}
.contact .actions{margin-top:0;justify-content:flex-end;max-width:420px}


.pillars{list-style:none;display:grid;gap:12px;margin:4px 0}
.pillars li{display:flex;gap:12px;align-items:flex-start;color:var(--ink-2)}
.pillars b{color:var(--ink);font-weight:600}
.pillars svg{width:26px;height:26px;flex:none;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.v28 .pill{align-self:flex-start;margin-top:auto}

.quote{justify-content:center}
.said{font:400 clamp(32px,2.9vw,42px)/1.08 var(--serif);letter-spacing:-.01em;color:#FFF6E2}

.fan{position:relative;height:120px;margin-top:auto}
.chip{position:absolute;bottom:0;padding:14px 18px 40px;border-radius:18px;font:400 22px/1 var(--serif);color:var(--ink);box-shadow:0 1px 0 rgba(0,0,0,.06),0 8px 20px -12px rgba(29,26,23,.35);white-space:nowrap}
.chip:nth-child(1){left:2%;transform:rotate(-9deg)}
.chip:nth-child(2){left:24%;transform:rotate(-3deg);bottom:6px}
.chip:nth-child(3){left:47%;transform:rotate(3deg);bottom:4px}
.chip:nth-child(4){left:70%;transform:rotate(9deg)}

.case h3,.project h3{margin-top:6px}
.case .eyebrow,.project .eyebrow{color:rgba(29,26,23,.66)}
.case .body,.project .body{color:rgba(29,26,23,.82)}

.label{font:500 12.5px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-top:6px}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.tags li{padding:7px 14px;border-radius:999px;background:var(--bg);font-size:14.5px;box-shadow:0 0 0 1px var(--line) inset}
.tags small{color:var(--ink-2);font-size:12.5px;margin-left:4px}

.timeline{list-style:none;display:grid;gap:0;margin:4px 0 6px}
.timeline li{display:grid;grid-template-columns:84px 1fr;gap:14px;padding:11px 0;border-top:1px solid var(--line);font-size:15.5px}
.timeline li:last-child{border-bottom:1px solid var(--line)}
.yr{font:400 20px/1.1 var(--serif);color:var(--ink-2)}
.timeline .now{font-weight:600}
.timeline .now .yr{color:var(--ink)}
.path .small{margin-top:auto}
.path .timeline{flex:1;grid-auto-rows:1fr}
.timeline li{align-items:center}

.projects-head{justify-content:flex-end}

.foot{max-width:1240px;margin:0 auto;padding:12px 24px 40px;font-size:13px;color:var(--ink-2);display:grid;gap:6px}
.foot p{max-width:110ch}
.foot details{display:grid;gap:6px}
.foot summary{cursor:pointer;font-weight:500;color:var(--ink);list-style:none;display:inline-flex;align-items:center;gap:6px;width:max-content}
.foot summary::-webkit-details-marker{display:none}
.foot summary::after{content:"+";font-weight:400}
.foot details[open] summary::after{content:"−"}
.foot details p{margin-top:4px}

@media (max-width:1020px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero,.path{grid-row:auto}
  .contact{grid-column:span 2;flex-direction:column;align-items:flex-start}
  .contact .actions{justify-content:flex-start;max-width:none}
}
@media (max-width:640px){
  :root{--r:26px;--gap:12px}
  .top{padding:16px}
  .brand span:last-child{font-size:15px}
  .bento{grid-template-columns:1fr;padding:4px 16px 16px}
  .bento>*{grid-column:auto !important}
  .card,.hero,.contact{padding:24px}
  .foot{padding:8px 16px 32px}
  .fan{display:none}
  .timeline li{grid-template-columns:70px 1fr}
  .pill{white-space:normal;text-align:left}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;scroll-behavior:auto !important}}

.card--link{text-decoration:none;color:inherit;transition:transform .2s ease}
.card--link:hover{transform:translateY(-3px)}
.card--link:hover .link{text-decoration:underline;text-underline-offset:3px}
.timeline a{text-underline-offset:3px;text-decoration-thickness:1px}

/* Apparition des cartes (seulement si le JS tourne) */
.js .bento>.card{opacity:0;translate:0 24px;scale:.98;transition:opacity .6s ease,translate .7s cubic-bezier(.2,.7,.2,1),scale .7s cubic-bezier(.2,.7,.2,1),transform .2s ease;transition-delay:var(--d,0s)}
.js .bento>.card.is-in{opacity:1;translate:0 0;scale:1}
@media (prefers-reduced-motion:reduce){.js .bento>.card{opacity:1;translate:none;scale:none}}