@charset "utf-8";
/* Cahn Wilson, propositions de synthèse. Socle commun aux cinq versions.
   Deux univers : la nuit (fond #060c11 de l'ancien site) et le papier (grège
   du site actuel). Le jaune de marque est le seul accent. Un geste : la coupe,
   à l'angle de la barre du logotype. */

@font-face { font-family: 'Playfair Display'; src: url('/assets/fonts/playfair-display-latin-700-italic.woff2') format('woff2'); font-weight: 600 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Author'; src: url('/assets/fonts/author-latin-600-italic.woff2') format('woff2'); font-weight: 600 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('/assets/fonts/playfair-display-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('/assets/fonts/playfair-display-latin-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('/assets/fonts/playfair-display-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('/assets/fonts/playfair-display-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
/* Author (Indian Type Foundry, via Fontshare, licence libre pour usage commercial, auto-hébergée) : la sans du gabarit de l'ancien site */
@font-face { font-family: 'Author'; src: url('/assets/fonts/author-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Author'; src: url('/assets/fonts/author-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Author'; src: url('/assets/fonts/author-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --night: #060c11;
  --night-2: #0b131a;
  --ink: #221f20;
  --paper: #ece8e3;
  --paper-high: #e4dfd9;

  --serif: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --sans: 'Author', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --gutter: clamp(1.25rem, 3.4vw, 4rem);
  --lead: clamp(3.5rem, 9vw, 7.5rem);
  --head: 84px;
  --coupe: 13deg;
  --t: .28s cubic-bezier(.22, .61, .36, 1);
  --lame: cubic-bezier(.62, 0, .16, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* thème par défaut : la nuit */
  --bg: var(--night);
  --fg: var(--paper);
  --fg-70: rgba(229, 225, 222, .72);
  --fg-55: rgba(229, 225, 222, .56);
  --fg-38: rgba(229, 225, 222, .38);
  --rule: rgba(229, 225, 222, .16);
  --rule-strong: rgba(229, 225, 222, .34);
  --accent: var(--fg);
  --surface: rgba(255, 255, 255, .04);
}
.t-paper, .band--paper {
  --bg: var(--paper); --fg: var(--ink);
  --fg-70: #514e50; --fg-55: #625e60; --fg-38: rgba(34, 31, 32, .42);
  --rule: rgba(34, 31, 32, .18); --rule-strong: rgba(34, 31, 32, .4);
  --surface: rgba(255, 255, 255, .42);
}
.band--paper-high { --bg: var(--paper-high); }
.t-ink, .band--ink { --bg: var(--ink); --fg: var(--paper); }
.band--night { --bg: var(--night); --fg: var(--paper); }
.band--paper, .band--paper-high, .band--ink, .band--night { background: var(--bg); color: var(--fg); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--sans); font-size: clamp(1.02rem, .98rem + .2vw, 1.09rem); font-weight: 400; line-height: 1.6;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color .9s var(--ease-out), color .9s var(--ease-out);
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.1; }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }

.wrap { padding-inline: var(--gutter); }
.band { padding-block: var(--lead); }
.band--tight { padding-block: calc(var(--lead) * .55); }

/* Typographie */
.display { font-family: var(--serif); font-size: clamp(2.6rem, 1rem + 6.8vw, 8rem); line-height: .96; letter-spacing: -.028em; text-wrap: balance; }
.h-lg { font-family: var(--serif); font-size: clamp(1.9rem, 1.1rem + 2.8vw, 3.6rem); line-height: 1.06; letter-spacing: -.016em; text-wrap: balance; }
.h-md { font-family: var(--serif); font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2rem); line-height: 1.16; letter-spacing: -.01em; }
.lede { font-family: var(--serif); font-size: clamp(1.2rem, 1.02rem + .72vw, 1.7rem); line-height: 1.42; letter-spacing: -.008em; max-width: 46rem; }
.prose { max-width: 36rem; color: var(--fg-70); }
.prose em, .display em, .h-lg em { font-family: var(--serif); font-style: italic; }
.small { font-size: .94rem; color: var(--fg-70); }
.label {
  display: block; font-family: var(--serif); font-size: 1.125rem; font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--fg); padding-top: 0; border-top: 0; margin-bottom: 1.5rem; line-height: 1.3;
}
.kicker { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-55); }
.num { font-variant-numeric: lining-nums tabular-nums; font-feature-settings: 'lnum' 1, 'tnum' 1; }

/* La barre du logotype, en séparateur et en signe */
.bar { display: inline-block; width: 3px; height: .88em; background: currentColor; opacity: .5; transform: skewX(calc(-1 * var(--coupe))); vertical-align: -.08em; margin-inline: .46em; }
.bar--y { background: currentColor; opacity: 1; }
.signe { display: inline-block; width: .32em; height: 1.05em; background: currentColor; transform: skewX(calc(-1 * var(--coupe))); vertical-align: -.12em; }

/* En-tête */
.masthead {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--head);
  display: flex; align-items: center; padding-inline: var(--gutter);
  color: var(--fg);
  transition: background-color var(--t), border-color var(--t), transform .5s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.masthead.is-stuck { background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border-bottom-color: var(--rule); }
.masthead.is-hidden { transform: translateY(-100%); }
.masthead__in { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.wordmark { display: inline-block; font-family: var(--serif); font-size: 1.02rem; font-weight: 500; letter-spacing: .1em; white-space: nowrap; }
.wordmark .bar { opacity: .95; }
@supports (mask-image: url('/assets/images/brand/logotype-cw.svg')) or (-webkit-mask-image: url('/assets/images/brand/logotype-cw.svg')) {
  .wordmark { height: 40px; width: 171px; background-color: currentColor; -webkit-mask: url('/assets/images/brand/logotype-cw.svg') no-repeat center / contain; mask: url('/assets/images/brand/logotype-cw.svg') no-repeat center / contain; font-size: 0; letter-spacing: 0; }
  .wordmark * { display: none; }
  .foot__wm { height: 50px; width: 214px; margin-bottom: 1.5rem; background-color: currentColor; -webkit-mask: url('/assets/images/brand/logotype-cw.svg') no-repeat left center / contain; mask: url('/assets/images/brand/logotype-cw.svg') no-repeat left center / contain; font-size: 0; }
  .foot__wm * { display: none; }
  @media (max-width: 560px) { .wordmark { height: 32px; width: 137px; } }
}
.nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2.2rem); }
.nav a { font-size: .8rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-70); padding-block: .35rem; border-bottom: 1px solid transparent; transition: color var(--t), border-color var(--t); }
.nav a:hover { color: var(--fg); border-bottom-color: var(--fg); }
.nav .lang { color: var(--fg-38); }
.burger { display: none; background: none; border: 0; padding: .4rem .1rem; cursor: pointer; font-size: .8rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--fg); }
@media (max-width: 880px) {
  .burger { display: block; }
  .nav { position: fixed; inset: var(--head) 0 auto 0; flex-direction: column; align-items: flex-start; gap: 0; background: var(--bg); border-bottom: 1px solid var(--rule); padding: .5rem var(--gutter) 2rem; max-height: calc(100dvh - var(--head)); overflow-y: auto; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity var(--t), transform var(--t), visibility var(--t); }
  .nav.is-open { transform: none; opacity: 1; visibility: visible; }
  .nav a { width: 100%; font-size: 1rem; padding-block: .95rem; border-bottom: 1px solid var(--rule); }
}
.skip { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--ink); color: var(--paper); padding: .8rem 1.2rem; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.skip:focus { left: 0; }

/* Boutons et liens */
.btn { display: inline-flex; align-items: center; gap: .8rem; background: var(--fg); color: var(--bg); border: 1px solid var(--fg); padding: .95rem 1.9rem; cursor: pointer; font-size: .8rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; transition: background var(--t), color var(--t), border-color var(--t), transform .4s var(--ease-out); }
.btn:hover { background: transparent; border-color: var(--fg); color: var(--fg); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--fg); }
.btn--ghost:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn--round { width: clamp(7rem, 12vw, 10rem); height: clamp(7rem, 12vw, 10rem); border-radius: 50%; padding: 0; justify-content: center; letter-spacing: .2em; font-size: .72rem; }
.link { display: inline-block; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; padding-bottom: .35rem; border-bottom: 1px solid var(--rule-strong); transition: border-color var(--t), color var(--t); }
.link:hover { border-bottom-color: currentColor; }
.arrow { display: inline-block; transition: transform var(--t); }
a:hover .arrow { transform: translateX(6px); }

/* Portraits : noir et blanc dessous, couleur dessus révélée par la coupe */
.pf { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface); }
.pf img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pf__c { clip-path: polygon(0 0, 0 0, calc(-1 * var(--cut, 18%)) 100%, calc(-1 * var(--cut, 18%)) 100%); transition: clip-path .62s var(--lame); }
a:hover .pf__c, a:focus-visible .pf__c, .is-on .pf__c { clip-path: polygon(0 0, calc(100% + var(--cut, 18%)) 0, 100% 100%, calc(-1 * var(--cut, 18%)) 100%); }
.p-michael-cahn img { object-position: center 68%; }
.p-thomas-alho-antunes img { object-position: center 33%; }
.p-sarah-mincel img { object-position: center 56%; }
.p-gerard-fohlen-weill img { object-position: center 20%; }
.p-leslie-mankikian img { object-position: center 52%; }
.p-nathalie-malazdra img { object-position: center 15%; }

/* Image cadrée, avec voile et zoom lent */
.fig { position: relative; overflow: hidden; background: var(--night-2); }
.fig img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.4s var(--ease-out); will-change: transform; }
.fig:hover img { transform: scale(1); }
.fig--veil::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6, 12, 17, .7), rgba(6, 12, 17, 0) 55%); pointer-events: none; }

/* La coupe, en panneau survolé : l'encre balaie à l'angle du logotype */
.coupe { position: relative; isolation: isolate; transition: color var(--t); }
.coupe::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--fg); clip-path: polygon(0 0, 0 0, calc(-1 * var(--cut, 18%)) 100%, calc(-1 * var(--cut, 18%)) 100%); transition: clip-path .55s var(--lame); }
.coupe:hover, .coupe:focus-visible { color: var(--bg); }
.coupe:hover::after, .coupe:focus-visible::after { clip-path: polygon(0 0, calc(100% + var(--cut, 18%)) 0, 100% 100%, calc(-1 * var(--cut, 18%)) 100%); }
.coupe:hover .small, .coupe:hover .kicker { color: rgba(6, 12, 17, .7); }

/* Pied de page */
.foot { padding: clamp(3rem, 7vw, 5rem) var(--gutter) 2rem; border-top: 1px solid var(--rule); }
.foot__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 2.5rem 3rem; }
.foot__wm { font-family: var(--serif); font-size: 1.05rem; letter-spacing: .1em; margin-bottom: 1.2rem; }
.foot h3 { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-55); margin-bottom: 1rem; }
.foot li { margin-bottom: .55rem; }
.foot li a, .foot address a { font-size: .93rem; color: var(--fg-70); transition: color var(--t); }
.foot li a:hover, .foot address a:hover { color: var(--fg); }
.foot address { font-style: normal; font-size: .93rem; color: var(--fg-70); line-height: 1.75; }
.foot__base { display: flex; flex-wrap: wrap; gap: .6rem 2rem; justify-content: space-between; margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: 1.5rem; border-top: 1px solid var(--rule); font-size: .78rem; color: var(--fg-55); }
.foot__base a:hover { color: var(--fg); }

/* Mouvement. Les états d'attente ne s'appliquent que si JS tourne. */
html.js [data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: var(--d, 0s); will-change: opacity, transform; }
html.js [data-reveal="left"] { transform: translate3d(-40px, 0, 0); }
html.js [data-reveal="right"] { transform: translate3d(40px, 0, 0); }
html.js [data-reveal="scale"] { transform: scale(.94); }
html.js [data-reveal="none"] { transform: none; }
html.js [data-reveal="clip"] { transform: none; clip-path: polygon(0 -.3em, 0 -.3em, calc(-1 * var(--cut, 18%)) calc(100% + .3em), calc(-1 * var(--cut, 18%)) calc(100% + .3em)); transition: clip-path .8s var(--lame), opacity .4s; }
html.js [data-reveal].is-in { opacity: 1; transform: none; clip-path: none; }
html.js [data-reveal="clip"].is-in { clip-path: polygon(0 -.3em, calc(100% + var(--cut, 18%)) -.3em, 100% calc(100% + .3em), calc(-1 * var(--cut, 18%)) calc(100% + .3em)); }
html.js [data-reveal="line"] { transform: scaleX(0); transform-origin: left; }
html.js [data-reveal="line"].is-in { transform: scaleX(1); }
html.js .split .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .12em 0 .24em; margin: -.12em 0 -.24em; }
html.js .split .w > span { display: inline-block; transform: translateY(135%); transition: transform 1s var(--ease-out); transition-delay: calc(var(--i, 0) * 55ms + var(--d, 0s)); }
html.js .split.is-in .w > span { transform: none; }
[data-parallax] { will-change: transform; }
.marquee { overflow: hidden; white-space: nowrap; }
.marquee__track { display: inline-flex; gap: 3rem; animation: marquee var(--marquee-t, 40s) linear infinite; padding-right: 3rem; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.progress { position: fixed; top: 0; left: 0; z-index: 110; height: 2px; width: 100%; transform-origin: left; transform: scaleX(0); background: var(--fg); pointer-events: none; }
.cursor { position: fixed; top: 0; left: 0; z-index: 200; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--paper); pointer-events: none; mix-blend-mode: difference; transform: translate3d(var(--x, -100px), var(--y, -100px), 0) scale(var(--s, 1)); transition: transform .12s linear, opacity .3s; opacity: 0; }
body.has-cursor .cursor { opacity: 1; }
body.has-cursor.cursor-big .cursor { --s: 4; }
@media (pointer: coarse) { .cursor { display: none; } }

html.nomotion [data-reveal], html.nomotion .split .w > span { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
html.nomotion .marquee__track { animation: none; }
html.nomotion .cursor, html.nomotion .progress { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html.js [data-reveal], html.js .split .w > span { opacity: 1; transform: none; clip-path: none; }
  .marquee__track { animation: none; }
}

/* Utilitaires : remplacent les anciens attributs style="" bloqués par la CSP (style-src self) */
[data-d="10"] { --d: .1s; } [data-d="20"] { --d: .2s; } [data-d="25"] { --d: .25s; } [data-d="30"] { --d: .3s; } [data-d="35"] { --d: .35s; }
.u-mt16 { margin-top: 1.6rem !important; } .u-mt2 { margin-top: 2rem !important; } .u-mt24 { margin-top: 2.4rem !important; } .u-mt25 { margin-top: 2.5rem !important; } .u-mt3 { margin-top: 3rem !important; }
.u-mb07 { margin-bottom: .7rem !important; } .u-mb1 { margin-bottom: 1rem !important; } .u-mb12 { margin-bottom: 1.2rem !important; } .u-mb16 { margin-bottom: 1.6rem !important; } .u-mb22 { margin-bottom: 2.2rem !important; } .u-mb24 { margin-bottom: 2.4rem !important; }
.u-pt0 { padding-top: 0 !important; } .band--flush { padding-top: 0 !important; border-top: 0 !important; }
.u-mw22 { max-width: 22rem; } .u-minh52 { min-height: 52vh; }
.u-note { margin-top: 2rem !important; max-width: 44rem; font-size: .875rem; }
.actions { margin-top: 3rem; display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center; }
.foot__ordre { font-size: .93rem; color: var(--paper-70); max-width: 22rem; }

/* Pied de page découvert : sur les écrans où il tient entier, le pied de page reste fixe derrière la page, qui glisse
   et le découvre en fin de défilement. motion.js mesure sa hauteur et pose html.foot-reveal ; sinon il suit la page.
   Le logotype en très grand, presque transparent, occupe le fond. */
.foot { position: relative; overflow: hidden; isolation: isolate; }
.foot::before { content: ''; position: absolute; z-index: -1; left: var(--gutter); right: var(--gutter); bottom: -.6vw; aspect-ratio: 214 / 50; background-color: currentColor; opacity: .06; -webkit-mask: url('/assets/images/brand/logotype-cw.svg') no-repeat left bottom / contain; mask: url('/assets/images/brand/logotype-cw.svg') no-repeat left bottom / contain; pointer-events: none; }
html.foot-reveal body { padding-bottom: var(--foot-h, 0px); }
html.foot-reveal main { position: relative; z-index: 1; background: inherit; box-shadow: 0 2.5rem 4rem -1.5rem rgba(0, 0, 0, .5); }
html.foot-reveal .foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 0; border-top: 1px solid rgba(236, 232, 227, .14); }
@media (max-width: 700px) { .foot { padding-bottom: calc(23vw + 1.5rem); } }
/* Pied de page plus haut que l'écran (téléphones) : il s'accroche sous l'en-tête pendant que la page glisse et le découvre,
   puis défile normalement pour montrer sa fin. La place où il reste accroché est un vrai bloc (body::after). */
html.foot-tall main { position: relative; z-index: 1; background: inherit; box-shadow: 0 2.5rem 4rem -1.5rem rgba(0, 0, 0, .5); }
html.foot-tall .foot { position: sticky; top: var(--mast-h, 0px); z-index: 0; margin-top: calc(var(--mast-h, 0px) - 100svh); border-top: 1px solid rgba(236, 232, 227, .14); }
html.foot-tall body::after { content: ''; display: block; height: calc(100svh - var(--mast-h, 0px)); }
/* Pied de page masqué le temps que motion.js choisisse son mode (rideau ou flux) : le changement de mode n'est plus compté comme un saut d'affichage (CLS). Sans script, il reste visible ; si le script tarde, il s'affiche après 2,5 s. */
@media (scripting: enabled) { html:not(.foot-ready) .foot { visibility: hidden; animation: foot-montre 0s 2.5s forwards; } }
@keyframes foot-montre { to { visibility: visible; } }