/* v4, Signe. Nuit et jaune, la diagonale du logotype structure la page. */
:root { --sk: 5.5vw; --dx: min(11.5vh, 7rem); --cx: 54%; --hero-pad: calc(var(--head) + 3.5rem) var(--gutter) clamp(3rem, 7vw, 6rem); }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: min(100svh, 60rem); display: grid; align-items: end; padding: var(--hero-pad); isolation: isolate; overflow: hidden; }
.hero__content { position: relative; width: 100%; }
.hero__layer { z-index: 1; }
.hero__pan {
  position: absolute; inset: 0; z-index: 2; display: grid; align-items: end; padding: var(--hero-pad);
  background: var(--yellow); color: var(--night);
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  pointer-events: none;
}
html.js .hero__pan[data-reveal] { opacity: 1; transform: none; transition: clip-path 1.4s var(--lame) .15s; }
.hero__pan.is-in, html.nomotion .hero__pan { clip-path: polygon(0 0, calc(var(--cx) + var(--dx)) 0, calc(var(--cx) - var(--dx)) 100%, 0 100%) !important; }
.hero__pan .kicker, .hero__pan .hero__sub, .hero__pan .hero__claim { color: rgba(6, 12, 17, .72); }
.hero__pan .btn { background: var(--night); color: var(--yellow); border-color: var(--night); }
.hero__t { font-size: clamp(3.2rem, 1rem + 10.5vw, 12rem); line-height: .92; letter-spacing: -.035em; margin: 1.4rem 0 0; max-width: 11ch; }
.hero__sub, .hero__claim { margin-bottom: 0; }
.hero__t em { font-style: italic; }
.hero__sub { font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, .9rem + 1.1vw, 1.9rem); line-height: 1.3; margin-top: 1.6rem; max-width: 32ch; color: var(--fg-70); }
.hero__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-top: clamp(2rem, 4vw, 3.5rem); }
.hero__claim { max-width: 40rem; color: var(--fg-70); font-size: .98rem; margin: 0; }
.hero__scroll { position: absolute; right: var(--gutter); bottom: 2rem; z-index: 3; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-55); display: flex; align-items: center; gap: .8rem; }
.hero__scroll i { display: block; width: 1px; height: 3.2rem; background: var(--yellow); transform-origin: top; animation: v4scroll 2.2s var(--ease-out) infinite; }
@keyframes v4scroll { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- Bandeau des matières ---------- */
.matieres { border-block: 1px solid var(--rule); padding-block: clamp(1.2rem, 2.5vw, 2.2rem); --marquee-t: 70s; }
.matieres .marquee__track { gap: 0; padding-right: 0; align-items: baseline; }
.matieres span { font-family: var(--serif); font-size: clamp(2.6rem, 1rem + 6.5vw, 7.5rem); line-height: 1; letter-spacing: -.025em; white-space: nowrap; padding-inline: .35em; color: var(--fg); }
.matieres span:nth-child(even) { color: var(--fg-38); }
.matieres .signe { margin-inline: .1em .35em; height: .78em; vertical-align: -.02em; }

/* ---------- Obliques entre les sections ---------- */
.skew { clip-path: polygon(0 var(--sk), 100% 0, 100% calc(100% - var(--sk)), 0 100%); padding-block: calc(var(--lead) + var(--sk)); margin-block: calc(var(--sk) * -.5); }
.skew--r { clip-path: polygon(0 0, 100% var(--sk), 100% 100%, 0 calc(100% - var(--sk))); }
.oblique { position: relative; }
.oblique::before { content: ''; position: absolute; left: -10%; right: -10%; top: 50%; height: 2px; background: var(--yellow); transform: rotate(-13deg); opacity: .55; pointer-events: none; }

/* ---------- Le cabinet ---------- */
.cab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 42%); gap: clamp(2rem, 6vw, 6rem); align-items: center; padding: var(--lead) var(--gutter); }
.cab__t { margin-top: .6rem; }
.cab__t .signe { margin-right: .18em; }
.cab .prose { margin-top: 1.8rem; }
.cab__fig { position: relative; clip-path: polygon(0 0, 100% 0, 100% 82%, 0 100%); overflow: hidden; background: var(--night-2); aspect-ratio: 3 / 4; }
.cab__fig img { width: 100%; height: 112%; object-fit: cover; }
.cab__fig::after { content: ''; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(to top, rgba(6, 12, 17, .55), transparent); }

/* ---------- Engagements ---------- */
.engs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
.eng { background: var(--bg); padding: clamp(1.8rem, 3.5vw, 3.2rem) var(--gutter); }
.eng__n { font-family: var(--serif); font-size: clamp(3rem, 2rem + 4vw, 6rem); line-height: 1; color: var(--yellow); letter-spacing: -.03em; }
.eng__t { display: block; margin-top: 1.4rem; }
.eng__d { font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 1rem + .8vw, 1.7rem); line-height: 1.28; margin: .9rem 0 0; }
.eng__d strong { font-weight: 600; font-style: italic; font-size: 1.14em; }

/* ---------- Pratiques ---------- */
.pans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule); border-bottom: 1px solid var(--rule); }
.pan-p { display: flex; flex-direction: column; min-height: clamp(20rem, 30vw, 30rem); background: var(--bg); padding: clamp(1.8rem, 3.5vw, 3.2rem) var(--gutter); }
.pan-p__n { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--yellow); }
.pan-p:hover .pan-p__n { color: rgba(6, 12, 17, .6); }
.pan-p__t { font-family: var(--serif); font-size: clamp(1.6rem, 1rem + 1.8vw, 2.9rem); line-height: 1.04; letter-spacing: -.018em; margin-top: 1.2rem; }
.pan-p__d { margin-top: 1.2rem; font-size: .95rem; color: var(--fg-70); }
.pan-p .arrow { margin-top: auto; padding-top: 1.6rem; font-size: 1.4rem; color: var(--fg-38); }
.pan-p:hover .arrow { color: var(--night); }

/* ---------- Chiffres, bande jaune ---------- */
.chiffres { background: var(--yellow); color: var(--night); }
.chiffres__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem var(--gutter); padding-inline: var(--gutter); }
.chiffre__v { display: block; font-family: var(--serif); font-size: clamp(3rem, 1.5rem + 6vw, 8rem); line-height: .95; letter-spacing: -.035em; }
.chiffre__l { display: block; margin-top: .9rem; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(6, 12, 17, .66); border-top: 1px solid rgba(6, 12, 17, .25); padding-top: .8rem; }

/* ---------- Équipe ---------- */
.team { padding: var(--lead) var(--gutter); }
.team__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2.5rem) clamp(1rem, 2vw, 2rem); margin-top: 1rem; }
.fiche { display: block; }
.fiche .pf { clip-path: polygon(0 0, 100% 0, 100% 82%, 0 100%); transition: clip-path .7s var(--lame); }
.fiche:nth-child(even) .pf { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 82%); }
.fiche:hover .pf, .fiche:focus-visible .pf { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.fiche .pf img { transition: transform 1.1s var(--lame); }
.fiche:hover .pf img { transform: scale(1.05); }
.fiche__nom { display: block; margin-top: 1rem; font-family: var(--serif); font-size: clamp(1.25rem, 1rem + 1vw, 1.9rem); line-height: 1.08; }
.fiche__role { display: block; margin-top: .4rem; font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; color: var(--fg-55); }
.fiche:hover .fiche__role { color: var(--yellow); }

/* ---------- Références ---------- */
.refs { padding: var(--lead) var(--gutter); }
.refs__list { list-style: none; margin: 1rem 0 0; padding: 0; border-top: 1px solid var(--rule); }
.ref { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) 2.5rem; gap: clamp(1rem, 3vw, 3rem); align-items: center; padding: clamp(1.2rem, 2.4vw, 2rem) 0; border-bottom: 1px solid var(--rule); }
.ref__n { font-family: var(--serif); font-size: 1.6rem; color: var(--yellow); }
.ref:hover .ref__n { color: var(--night); }
.ref__cat { display: block; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-55); }
.ref__t { display: block; margin-top: .45rem; font-family: var(--serif); font-size: clamp(1.15rem, 1rem + .9vw, 1.85rem); line-height: 1.16; max-width: 52rem; }
.ref .arrow { justify-self: end; font-size: 1.3rem; color: var(--fg-38); }
.ref:hover .arrow { color: var(--night); }
.ref.coupe { padding-inline: 1rem; margin-inline: -1rem; }

/* ---------- Citation ---------- */
.cite { padding: calc(var(--lead) * 1.2) var(--gutter); text-align: center; overflow: hidden; }
.cite .display { font-size: clamp(3rem, 1rem + 9vw, 10rem); position: relative; z-index: 1; }
.cite__sub { font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 1rem + 1.2vw, 2.1rem); color: var(--fg-70); margin-top: 1.4rem; position: relative; z-index: 1; }

/* ---------- Revendications, sur papier ---------- */
.revend { padding-inline: var(--gutter); }
.revend .trois { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); }
.revend .trois p { font-size: clamp(1rem, .92rem + .5vw, 1.28rem); line-height: 1.5; }
.revend strong { font-weight: 600; font-style: italic; text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: .16em; text-underline-offset: .12em; }

/* ---------- Contact ---------- */
.joindre { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2rem, 5vw, 5rem); align-items: center; padding: var(--lead) var(--gutter); }
.joindre .lede { max-width: 30ch; }
.joindre__coord { margin-top: 2rem; font-size: .93rem; font-style: normal; color: var(--fg-70); line-height: 1.8; }
.joindre__coord a:hover { color: var(--yellow); }
.btn--y { background: var(--yellow); color: var(--night); border-color: var(--yellow); }
.btn--y:hover { background: var(--fg); border-color: var(--fg); color: var(--night); }
.btn--round { transition: transform .5s var(--ease-out), background var(--t), color var(--t), border-color var(--t); }

.autres { padding: 1.2rem var(--gutter); font-size: .78rem; color: var(--fg-55); border-top: 1px solid var(--rule); }
.autres a { color: var(--fg); border-bottom: 1px solid var(--rule-strong); }
.autres a:hover { border-bottom-color: var(--yellow); }

/* ---------- Écrans étroits ---------- */
@media (max-width: 1000px) {
  .engs, .pans, .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chiffres__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .revend .trois { grid-template-columns: 1fr; }
  .cab { grid-template-columns: 1fr; }
  .cab__fig { max-width: 32rem; aspect-ratio: 4 / 5; }
}
@media (max-width: 700px) {
  :root { --sk: 4vw; --cx: 100%; }
  .engs, .pans, .team__grid { grid-template-columns: 1fr; }
  .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__pan.is-in, html.nomotion .hero__pan { clip-path: polygon(0 0, 100% 0, 100% 44%, 0 58%) !important; }
  .hero { min-height: min(100svh, 46rem); }
  .hero__t { max-width: none; font-size: clamp(2.6rem, 1rem + 12vw, 6rem); }
  .hero__scroll { display: none; }
  .joindre { grid-template-columns: 1fr; }
  .ref { grid-template-columns: 3rem minmax(0, 1fr); }
  .ref .arrow { display: none; }
  .oblique::before { transform: rotate(-9deg); }
}