/* GENERATED by build/v7/render.py from site/css/v7src/*.css. Do not edit: edit the source files. */
/* ---- 00-base.css ------------------------------------------------------------------------------- */
/* 00-base.css (v7 base): brand tokens, reset, type scale, pills, chapter chips, the shared chapter opener
   (.interlude*, M.opener: chapter II since v7) and the global reduced-motion rules. Source: the deployed concept
   (zaim-archi-concept.vercel.app, styles.css). Owned by the base: section agents add rules in their own file. */
/* ZAIM Architecture, v3 one-page. Brand board tokens only: Noir #111111, Gris clair #F2F2F2, Anthracite #333333,
   Or profond #C8A24A (scarce), derived deep #0B0B0B and dark gold #846728 (gold text on light, AA). */

:root {
  --noir: #111111;
  --deep: #0b0b0b;
  --paper: #f2f2f2;
  --anthra: #333333;
  --or: #c8a24a;
  --or-dark: #846728;
  --muted: rgba(242, 242, 242, 0.68);
  --dim: rgba(242, 242, 242, 0.46);
  --line: rgba(242, 242, 242, 0.16);
  --fd: "Montserrat", "Gotham", "Helvetica Neue", Arial, sans-serif;
  --fb: "Poppins", "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --gut: clamp(20px, 2.8vw, 40px);
  --hdr: 92px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
/* overflow-x: clip on html AND body (sops/qa-preview.md): with body alone, Chrome on phones still widened the layout
   viewport to the widest transformed element (cards arriving tilted: 398 px at 390). clip never makes a scroll
   container, so position: sticky and the vertical scroll are untouched. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
html.lenis { scroll-behavior: auto !important; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: hidden; }
[id] { scroll-margin-top: 0; }
body {
  margin: 0;
  background: var(--noir);
  color: var(--paper);
  font: 300 16px/1.6 var(--fb);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
::selection { background: var(--or); color: var(--noir); }
:focus-visible { outline: 1px solid var(--or); outline-offset: 4px; }
a, button, input, select, textarea, label { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
a, button, input, select, textarea { scroll-margin-block: calc(var(--hdr) + 16px) 96px; }
h1, h2, h3, .svc__t { text-wrap: balance; }
.about__p, .services__intro, .talks__intro, .contact__intro, .post__q { text-wrap: pretty; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: var(--gut); top: -100px; z-index: 200; background: var(--paper); color: var(--noir); padding: 12px 18px; font-size: 13px; }
.skip:focus { top: 16px; }
/* in-page anchors move focus to their target (00-core.js) so the next Tab continues there: the target is a section,
   not a control, so it shows no ring */
main:focus, .hero-wrap:focus, .chapter:focus { outline: none; }

/* ---- type ---------------------------------------------------------------------------------------- */
.display {
  font-family: var(--fd);
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: -0.055em;
  line-height: 0.92;
  font-kerning: normal;
}
.big { font-size: clamp(44px, 6.4vw, 104px); }
.big--svc { font-size: clamp(40px, 4.7vw, 78px); }
.is-gold { color: var(--or); }
.eyebrow {
  font: 400 12px/1.4 var(--fb);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--dim);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--or); }
.eyebrow--dim { margin: 34px 0 14px; }
.arr { display: inline-block; transition: transform 0.35s var(--ease); }

/* ---- pills -------------------------------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid rgba(242, 242, 242, 0.24);
  border-radius: 999px;
  font: 500 12px/1 var(--fb);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), background-color 0.3s var(--ease);
  cursor: pointer;
}
.pill:hover { border-color: var(--or); color: var(--or); }
.pill:hover .arr { transform: translateX(4px); }
.pill--gold { background: var(--or); border-color: var(--or); color: var(--noir); }
.pill--gold:hover { background: transparent; color: var(--or); }
.pill--dark { border-color: rgba(17, 17, 17, 0.28); color: var(--noir); }
.pill--dark:hover { border-color: var(--noir); background: var(--noir); color: var(--paper); }
.pill--dark:hover .arr { transform: translate(3px, -3px); }

/* ---- chapter chips ------------------------------------------------------------------------------ */
.chip-ch { display: flex; gap: 14px; font: 400 11px/1 var(--fb); text-transform: uppercase; letter-spacing: 0.1em; color: var(--dim); }
.chip-ch span:first-child { color: var(--or); }
.chip-ch--dark { color: rgba(17, 17, 17, 0.55); margin-bottom: 9vh; }
.chip-ch--dark span:first-child { color: var(--or-dark); }

/* ---- interludes (chapter openers) --------------------------------------------------------------- */
.interlude { position: relative; height: 200vh; background: var(--deep); }
.interlude__sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.interlude__frame { position: absolute; inset: 0; overflow: hidden; }
.interlude__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 11, 11, 0.45), rgba(11, 11, 11, 0.15) 40%, rgba(11, 11, 11, 0.7)); }
.interlude__frame picture { display: block; width: 100%; height: 100%; }
.interlude__img { width: 100%; height: 100%; object-fit: cover; }
.interlude__label {
  position: absolute; left: var(--gut); top: 50%; z-index: 2;
  display: flex; flex-direction: column; gap: 6px;
  font: 400 12px/1.3 var(--fb); text-transform: uppercase; letter-spacing: 0.1em;
  /* legibility aid only (the label sits on the bright glass once the photo is full bleed): a soft dark halo */
  text-shadow: 0 0 18px rgba(11, 11, 11, 0.85), 0 0 2px rgba(11, 11, 11, 0.6);
}
.interlude__label span:first-child { color: var(--or); }
/* and a soft vignette from the screen's left edge behind it (it fades in and out with the label), so it reads as the
   photo's own edge falloff, not a spot: the thin gold « Chapitre II » on bright glass was 1.2:1 */
.interlude__label::before {
  content: ""; position: absolute; z-index: -1; left: calc(-1 * var(--gut)); width: 330px; top: -110px; bottom: -110px;
  background: radial-gradient(farthest-side at 0% 50%, rgba(11, 11, 11, 0.66), rgba(11, 11, 11, 0.42) 45%, rgba(11, 11, 11, 0));
  pointer-events: none;
}
.interlude__word {
  position: absolute; left: var(--gut); right: var(--gut); bottom: 9vh; z-index: 2;
  font-weight: 100; font-size: clamp(56px, 11.5vw, 190px); letter-spacing: -0.06em;
  color: var(--paper); text-align: right;
}

/* ---- responsive --------------------------------------------------------------------------------- */
@media (max-width: 899.98px) {
  .interlude { height: 150vh; }
}

/* ---- reduced motion ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .interlude { height: 100svh; }
  .interlude__sticky { position: relative; }
}

/* ---- 10-header-hero.css ------------------------------------------------------------------------ */
/* 10-header-hero.css: the fixed header (.hdr, .burger) and the cover (.hero). Owner: header-hero agent.
   v7 (2026-10-13): decision 1 = the full logo (ZAIM + ARCHITECTURE) in the header; decision 2 = the v6 cover
   ("BÂTIR AVEC LE CLIMAT") in the concept's tokens. Row layout from 1100 px (the header docks in the cover row and
   glides up, 10-hero.js); below it the title sits under the header. */

/* ---- header ------------------------------------------------------------------------------------- */
.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: var(--hdr);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 0 max(var(--gut), env(safe-area-inset-right)) 0 max(var(--gut), env(safe-area-inset-left));
  color: var(--paper);
  transition: color 0.4s var(--ease);
  pointer-events: none;
}
.hdr > * { pointer-events: auto; }
.hdr--static { position: absolute; }
.hdr__logo { display: block; justify-self: start; }
.hdr__logo img { transition: filter 0.4s var(--ease); }
/* the full logo: "ARCHITECTURE" is 47/801 of its width, so 140 px gives 8 px capitals (legible at DPR1) */
.hdr__logo .hdr__full { width: clamp(118px, 9.72vw, 150px); height: auto; }
.hdr__name {
  font: 400 12px/1.25 var(--fb);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.hdr__end { display: flex; align-items: center; gap: 18px; justify-self: end; }
.hdr__lang { font: 500 12px/1 var(--fb); letter-spacing: 0.08em; padding: 14px 6px; opacity: 0.8; transition: color 0.3s, opacity 0.3s; }
.hdr__lang:hover { color: var(--or); opacity: 1; }
.hdr .pill { background: rgba(11, 11, 11, 0.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.burger { width: 46px; height: 46px; display: inline-flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 7px; }
.burger__l { display: block; width: 36px; height: 1px; background: currentColor; transition: width 0.35s var(--ease); }
.burger__l + .burger__l { width: 24px; }
.burger:hover .burger__l + .burger__l { width: 36px; }
/* the band behind the header once the cover is passed: near-solid down to the foot of the full logo ("ARCHITECTURE"
   sits low in the bar), then a short fade, so copy scrolling under it never crosses the logo */
.hdr::before { content: ""; position: absolute; inset: 0 0 -28px; z-index: -1; background: linear-gradient(rgba(17, 17, 17, 0.94), rgba(17, 17, 17, 0.86) calc(100% - 36px), rgba(17, 17, 17, 0)); opacity: 0; transition: opacity 0.5s var(--ease); pointer-events: none; }
.hdr.is-scrolled::before { opacity: 1; }
.hdr.is-light::before { background: linear-gradient(rgba(242, 242, 242, 0.96), rgba(242, 242, 242, 0.88) calc(100% - 36px), rgba(242, 242, 242, 0)); }
/* over a full-bleed photo (the chapter II opener: 00-core.js sets .is-photo while it sits under the header) the band
   cross-fades to the concept's own soft gradient, so the sky of the photo shows as the client saw it */
.hdr::after { content: ""; position: absolute; inset: 0 0 -24px; z-index: -1; background: linear-gradient(rgba(17, 17, 17, 0.9), rgba(17, 17, 17, 0)); opacity: 0; transition: opacity 0.5s var(--ease); pointer-events: none; }
.hdr.is-scrolled.is-photo::before { opacity: 0; }
.hdr.is-scrolled.is-photo::after { opacity: 1; }
/* without JS nothing sets .is-scrolled / .is-light: the band stays on (the white logo stays legible over the paper
   chapter), the burger (a JS menu) goes and the contact pill shows on phones too */
.no-js .hdr::before { opacity: 1; }
.no-js .burger { display: none; }
.hdr.is-light { color: var(--noir); }
.hdr.is-light .hdr__logo img { filter: brightness(0); }
.hdr.is-light .pill { background: rgba(242, 242, 242, 0.6); border-color: rgba(17, 17, 17, 0.25); }
.hdr.is-light .pill:hover { border-color: var(--noir); color: var(--noir); }

/* ---- hero: the scene ---------------------------------------------------------------------------- */
/* .hero-wrap = the scroll length of the scene (the cover stays while the header glides up and the cover fades to
   the page black); one screen when JS or motion is off. */
.hero-wrap { position: relative; height: 100svh; min-height: 560px; background: var(--noir); }
html.js .hero-wrap { height: 190vh; }
.hero { position: sticky; top: 0; height: 100vh; height: 100lvh; min-height: 560px; overflow: hidden; background: var(--deep); }
.hero__media { position: absolute; inset: 0; transform-origin: 50% 50%; }
.hero__slat { position: absolute; inset: 0; overflow: hidden; }
.hero__slat picture, .hero__img { display: block; width: 100%; height: 100%; }
.hero__img { object-fit: cover; object-position: 50% 50%; }
.hero__slat--2, .hero__slat--3 { display: none; }
/* flat neutral scrim, a touch deeper at the top (header) and at the foot (scroll cue): never a colour grade */
.hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(11, 11, 11, 0.34) 0%, rgba(11, 11, 11, 0) 22%, rgba(11, 11, 11, 0) 70%, rgba(11, 11, 11, 0.5) 100%),
    rgba(11, 11, 11, 0.5);
}

/* ---- hero: the copy (row layout, >= 1100 px) ------------------------------------------------------ */
.hero__frame { position: absolute; left: 0; right: 0; top: 0; height: 100svh; min-height: 560px; }
.hero__row { position: absolute; inset: 0; }
.hero__name, .hero__main { position: absolute; top: 50%; translate: 0 -50%; }
.hero__name {
  left: 15.5vw;
  font: 500 12px/1.3 var(--fb); text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap;
  color: var(--paper);
}
.hero__main { left: 30vw; display: flex; align-items: center; gap: clamp(44px, calc(12.94vw - 98px), 120px); }
.hero__title { font-size: clamp(60px, min(6.95vw, 11.6vh), 136px); color: var(--paper); }
.hero__title--long { font-size: clamp(56px, min(6.3vw, 10.5vh), 124px); }
/* masked lines: the mask reaches above the capitals so the circumflex of BÂTIR is never clipped */
.line { display: block; overflow: hidden; padding: 0.16em 0 0.06em; margin: -0.16em 0 -0.06em; }
.line__in { display: block; }
.hero__roles {
  display: flex; flex-direction: column;
  font: 400 12px/1.4 var(--fb); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap;
  color: rgba(242, 242, 242, 0.88);   /* 12 px caps over mid-grey concrete: --muted (0.68) fell under 4.5:1 */
}
.hero__scroll {
  position: absolute; left: 30vw; bottom: 30px;
  display: flex; flex-direction: column;
  font: 400 12px/1.35 var(--fb); text-transform: uppercase; letter-spacing: 0.06em;
}
.hero__scroll span:first-child { font-weight: 500; }
.hero__scroll::after { content: ""; width: 1px; height: 44px; margin-top: 14px; background: linear-gradient(var(--or), transparent); animation: drip 2.4s var(--ease) infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

@media (min-width: 1100px) {
  .hero.is-intro .hero__slat--2, .hero.is-intro .hero__slat--3 { display: block; }
}
@media (max-width: 1099.98px) {
  /* stacked layout (the v6 phone layout): title under the header, name | roles below it, cue at the foot */
  .hero__row {
    inset: auto var(--gut) auto var(--gut);
    top: calc(var(--hdr) + 8svh);
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px;
  }
  .hero__name, .hero__main { position: static; translate: none; }
  .hero__main { display: contents; }
  .hero__title { grid-column: 1 / -1; grid-row: 1; font-size: clamp(46px, min(14.4vw, 11svh), 128px); margin-bottom: clamp(36px, 7svh, 72px); }
  .hero__title--long { font-size: clamp(44px, min(13.2vw, 10svh), 118px); }
  .hero__name { grid-column: 1; grid-row: 2; white-space: normal; }
  .hero__roles { grid-column: 2; grid-row: 2; white-space: normal; }
  .hero__scroll { left: var(--gut); bottom: 26px; }
}
@media (max-width: 899.98px) {
  :root { --hdr: 76px; }
  .hdr { gap: 12px; }
  .hdr__logo .hdr__full { width: clamp(100px, 28vw, 116px); }
  .hdr__name { display: none; }
  .hdr .pill { display: none; }
  .no-js .hdr .pill { display: inline-flex; min-height: 40px; padding: 0 16px; }
  .hero-wrap { min-height: 520px; }
  html.js .hero-wrap { height: 170vh; }
  /* phones: the title sits on the brightest part of the wall, so the top of the flat scrim reaches lower (still a
     neutral scrim, never a grade) and the thin gold « CLIMAT » keeps 3:1 on its brightest pixels */
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(11, 11, 11, 0.4) 0%, rgba(11, 11, 11, 0.24) 30%, rgba(11, 11, 11, 0.16) 46%, rgba(11, 11, 11, 0) 62%, rgba(11, 11, 11, 0) 72%, rgba(11, 11, 11, 0.5) 100%),
      rgba(11, 11, 11, 0.5);
  }
  .hero, .hero__frame { min-height: 520px; }
}
@media (max-height: 520px) and (orientation: landscape) and (max-width: 1099.98px) {
  /* phones held sideways: the title shares the row with the name and roles, the cue goes */
  .hero__row { top: calc(var(--hdr) + 4svh); grid-template-columns: auto auto 1fr; align-items: end; column-gap: 32px; }
  .hero__title { grid-column: 1; margin-bottom: 0; font-size: clamp(36px, 11svh, 64px); }
  .hero__title--long { font-size: clamp(34px, 10svh, 60px); }
  .hero__name { grid-column: 2; grid-row: 1; }
  .hero__roles { grid-column: 3; grid-row: 1; }
  .hero__scroll { display: none; }
}

/* ---- cover -> chapter I (integrator) ---------------------------------------------------------------
   The cover fades to the page black over its sticky scene; without an overlap that left up to half a screen of empty
   black before chapter I. Chapter I now rises over the last part of the scene (its top edge softened by a gradient,
   .manifesto::before in 20-ch1.css), so the photo dims under it. Motion + JS only: the still cover is one screen. */
@media (prefers-reduced-motion: no-preference) {
  html.js .hero-wrap { margin-bottom: -40vh; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 899.98px) {
  html.js .hero-wrap { margin-bottom: -25vh; }
}

/* ---- reduced motion: a still first screen, the header at the top --------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.js .hero-wrap { height: 100svh; }
  .hero__scroll::after { animation: none; transform: none; }
}

/* ---- 20-ch1.css -------------------------------------------------------------------------------- */
/* 20-ch1.css: chapter I. Owner: chapter I agent.
   v7 (decision 3): the manifesto scene (sticky, his sentence lit word by word) composed like the v6 statement: side
   labels and the small side-profile portrait in the left columns; About (cuff portrait, text, facts); the « Basé au
   MAROC / FÈS DAKHLA / 4 LANGUES » block (giant vertical words on desktop, stacked on phones). Concept tokens only. */

/* ---- chapter I: manifesto ----------------------------------------------------------------------- */
.manifesto { position: relative; height: 260vh; background: var(--noir); }
/* the soft top edge of chapter I where it rises over the fading cover (10-header-hero.css, motion + JS only) */
@media (prefers-reduced-motion: no-preference) {
  html.js .manifesto::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 30vh; background: linear-gradient(rgba(17, 17, 17, 0), var(--noir)); pointer-events: none; }
}
.manifesto__sticky {
  position: sticky; top: 0; height: 100svh;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px;
  align-content: center;
  padding: var(--hdr) var(--gut) 80px;
}
/* the chip clears the full logo (its foot is ~80 px down): 56 px under the header line, so it never reads as a third
   line of the logo */
.manifesto .chip-ch { position: absolute; left: var(--gut); top: calc(var(--hdr) + 56px); }
/* left columns: the two labels at the top of the sentence, the portrait at its foot (bottom on the source line) */
.manifesto__aside { grid-column: 1 / 4; grid-row: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding-top: 0.6em; }
.manifesto__side { font: 400 12px/1.35 var(--fb); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.manifesto__side span { display: block; }
.manifesto__portrait { position: relative; width: clamp(150px, 15vw, 240px); aspect-ratio: 1760 / 2048; overflow: hidden; background: var(--noir); }
.manifesto__img { width: 100%; height: 100%; object-fit: cover; }
.manifesto__q { grid-column: 4 / 13; grid-row: 1; }
.manifesto__text { font-size: clamp(34px, 5.3vw, 88px); line-height: 0.98; }
.manifesto__text .w { display: inline-block; }
.js .manifesto__text .w { color: rgba(242, 242, 242, 0.14); }
/* U+202F before « ? » (|nnb): its own advance plus a hair, so « DONNÉES ? » reads as two marks, as on the concept */
.manifesto__text .nnb { letter-spacing: 0; padding-left: 0.06em; }
.manifesto__text .nnb-run { white-space: nowrap; }
.manifesto__src { margin-top: 34px; font: 400 12px/1.4 var(--fb); text-transform: uppercase; letter-spacing: 0.1em; color: var(--dim); }
.manifesto__src::before { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--or); vertical-align: middle; margin-right: 14px; }

/* ---- chapter I: about --------------------------------------------------------------------------- */
.about {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px;
  padding: 6vh var(--gut) 14vh;   /* the statement's sticky screen already ends in black: no second band before About */
  overflow-x: clip;   /* the signature arrives from x +24 px: never wider than the screen on phones */
}
.about__visual { grid-column: 1 / 6; position: relative; align-self: start; }
/* the cuff portrait is flattened onto the page colour (build/v7/prep_ch1.py): no frame, he comes out of the dark */
.about__visual::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--or), transparent); }
.about__portrait { position: relative; width: 100%; margin: 0 auto; max-height: 86vh; object-fit: contain; object-position: bottom; }
.about__sig { position: absolute; right: 2%; bottom: 7%; width: clamp(120px, 13vw, 200px); }
.about__text { grid-column: 7 / 12; align-self: center; padding-top: 6vh; }
.about__name { font-size: clamp(46px, 5.6vw, 92px); }
.about__cred { margin: 22px 0 36px; font: 400 12px/1.4 var(--fb); letter-spacing: 0.24em; text-transform: uppercase; color: var(--or); }
.about__lead { font-size: clamp(20px, 1.65vw, 26px); line-height: 1.45; color: var(--paper); margin-bottom: 26px; }
.about__p { color: var(--muted); font-size: 16px; max-width: 54ch; }
.about__p + .about__p { margin-top: 16px; }
.facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; margin-top: 14vh; border-top: 1px solid var(--line); }
.facts__i { padding-top: 30px; }
.facts__n { display: block; font-weight: 100; font-size: clamp(72px, 9vw, 150px); letter-spacing: -0.06em; line-height: 0.85; font-variant-numeric: tabular-nums; }
.facts__l { display: block; margin-top: 18px; max-width: 26ch; font-size: 14px; color: var(--muted); }
.facts__i:first-child .facts__n { color: var(--or); }

/* ---- chapter I: based (MAROC / FÈS DAKHLA / 4 LANGUES) ------------------------------------------ */
/* --fs: the giant words' size (the v6 14.375rem at 1440 = 16vw). Each word scales down past 6 letters (--n, from the
   template) so EN MOROCCO keeps about DAKHLA's length. Vertical words read bottom to top (writing-mode + 180deg),
   GSAP moves the .based__col wrappers (parallax) and unfolds the letters (.ch), never the rotated word itself. */
/* --fs is capped by the height too: the longest word (DAKHLA, about 3.95 x --fs at weight 100) always fits whole
   between the header and the chapter bar (170 px together), on 16:10 and 16:9 screens alike */
.based { --fs: min(clamp(150px, 16vw, 300px), calc((100svh - 170px) / 3.95)); position: relative; overflow: clip; padding: 6vh var(--gut) 20vh; }
.based__stage { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; align-items: start; }
.based__col { grid-row: 1; }
.based__col--1 { grid-column: 3 / span 2; margin-top: calc(var(--fs) * 0.42); }
.based__col--2 { grid-column: 6 / span 2; margin-top: 0; }
.based__col--3 { grid-column: 8 / span 2; margin-top: calc(var(--fs) * 0.62); }
.based__w {
  font-family: var(--fd); font-weight: 100; text-transform: uppercase; white-space: nowrap;
  font-size: calc(var(--fs) * min(1, 6 / var(--n, 5))); line-height: 1; letter-spacing: -0.06em;
  color: var(--paper); font-kerning: normal;
}
.based__stage .based__w { writing-mode: vertical-lr; transform: rotate(180deg); }
/* the gold word is cut at weight 300 (about 15 % longer per letter): past 5 letters (EN MOROCCO) it scales down a
   little more, so it stays inside the same height as DAKHLA; FR MAROC is unchanged */
.based__stage .based__w--gold { font-size: calc(var(--fs) * min(1, 5.3 / var(--n, 5))); }
.based__w .ch { display: inline-block; }
/* MAROC: the concept's heavier display cut, white with one gold shine (20-ch1.js moves the band along the word) */
.based__w--gold {
  --sd: 180deg;
  font-weight: 300;
  background-image: linear-gradient(var(--sd), var(--paper) 0%, var(--paper) 40%, var(--or) 50%, var(--paper) 60%, var(--paper) 100%);
  background-size: 100% 300%; background-position: 0 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  padding-bottom: 0.08em;   /* the last letter overruns its box by the negative tracking: keep it inside the clip */
}
.based__row {
  position: absolute; left: 0; right: 0; top: 54%;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; align-items: center;
}
.based__t { font: 400 12px/1.35 var(--fb); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); white-space: nowrap; }
.based__t--1 { grid-column: 1 / 3; display: flex; align-items: center; gap: 14px; }
.based__t--1::before { content: ""; width: 28px; height: 1px; background: var(--or); }
.based__t--2 { grid-column: 4 / 6; justify-self: end; }
.based__t--3 { grid-column: 10 / 12; }
.based__t--4 { grid-column: 12 / 13; justify-self: end; color: var(--paper); font-weight: 500; }
.based__stack { display: none; }

@media (max-width: 1099.98px) {
  .based__t--2 { grid-column: 3 / 6; }
  .based__t--3 { grid-column: 10 / 13; justify-self: start; }
  .based__t--4 { grid-column: 10 / 13; justify-self: start; margin-top: 2.4em; }
  .based__row { align-items: start; }
}
@media (max-width: 899.98px) {
  .manifesto { height: auto; }
  .manifesto__sticky { position: relative; height: auto; min-height: 0; display: flex; flex-direction: column; padding: 14vh var(--gut) 10vh; }
  .manifesto .chip-ch { position: static; margin-bottom: 8vh; }
  /* phones: the sentence first, then the labels beside the portrait (the v6 phone order) */
  .manifesto__q { order: 1; }
  .manifesto__aside { order: 2; display: grid; grid-template-columns: minmax(0, 1fr) 46%; align-items: start; gap: 16px; padding-top: 0; margin-top: 7vh; }
  .manifesto__portrait { width: 100%; }
  .manifesto__text { font-size: clamp(32px, 9vw, 60px); }
  .about { padding-top: 12vh; }
  .about__visual, .about__text { grid-column: 1 / -1; }
  .about__visual { max-width: 520px; width: 100%; justify-self: center; padding-top: 4vh; }
  .about__portrait { max-height: none; }
  .about__sig { right: 0; }
  .about__text { padding-top: 8vh; }
  .facts { grid-template-columns: 1fr; row-gap: 0; margin-top: 10vh; }
  .facts__i { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--line); }
  .facts__n { font-size: clamp(56px, 16vw, 96px); min-width: 1.2em; }
  .facts__l { margin-top: 0; }
  /* based, phones: the words stacked horizontally, centred; each word sized to its length so it fits the column */
  .based { padding: 4vh var(--gut) 14vh; }
  .based__stage { display: none; }
  .based__stack { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .based__stack .based__w { --sd: 90deg; font-size: min(26vw, calc((100vw - 2 * var(--gut)) / (var(--n, 5) * 0.76))); background-size: 300% 100%; background-position: 100% 0; }
  .based__stack .based__w + .based__w { margin-top: -0.06em; }
  .based__stack .based__t { margin: 22px 0 14px; }
  .based__stack .based__t:first-child { margin-top: 0; }
  .based__stack .based__t:last-child { margin-top: 26px; }
  .based__stack strong { font-weight: 500; color: var(--paper); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .js .manifesto__text .w { color: inherit; }
  .js .manifesto__text .w.is-gold { color: var(--or); }
  .manifesto { height: auto; }
  .manifesto__sticky { position: relative; height: auto; padding-top: 16vh; padding-bottom: 12vh; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 900px) {
  .manifesto__sticky { padding-top: max(16vh, calc(var(--hdr) + 112px)); }   /* under the absolute chip */
}

/* ---- 30-ch2.css -------------------------------------------------------------------------------- */
/* 30-ch2.css: chapter II, « Concevoir, accompagner, innover. » (services list + domains). The opener is the shared
   .interlude of 00-base.css. Owner: chapter II agent (decision 4: keep as the client saw it). */

/* ---- chapter II: services ----------------------------------------------------------------------- */
.services { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; padding: 16vh var(--gut) 16vh; }
.services__head { grid-column: 1 / 6; align-self: start; position: sticky; top: calc(var(--hdr) + 4vh); }
.services__intro { margin-top: 36px; max-width: 38ch; color: var(--muted); }
.services__list { grid-column: 7 / 13; border-top: 1px solid var(--line); margin-top: 8px; }
.svc { position: relative; display: grid; grid-template-columns: 64px 1fr; column-gap: 12px; padding: 34px 0 32px; }
.svc__n { font: 400 12px/2.4 var(--fb); letter-spacing: 0.1em; color: var(--or); }
.svc__t { font: 300 clamp(24px, 2.3vw, 36px)/1.15 var(--fd); letter-spacing: -0.02em; transition: transform 0.6s var(--ease); }
.svc__d { grid-column: 2; margin-top: 12px; color: var(--muted); font-size: 15px; max-width: 52ch; }
.svc__rule { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); transform-origin: left; }
.svc:hover .svc__t { transform: translateX(10px); }
.domains { grid-column: 7 / 13; margin-top: 56px; display: grid; grid-template-columns: 64px 1fr; column-gap: 12px; }
.domains__l { grid-column: 1 / -1; font: 400 12px/1.4 var(--fb); text-transform: uppercase; letter-spacing: 0.14em; color: var(--dim); margin-bottom: 14px; }
.domains__list { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 15px; }
.domains__list li:not(:last-child)::after { content: "·"; color: var(--or); margin: 0 12px; }

@media (max-width: 899.98px) {
  .services__head, .services__list, .domains { grid-column: 1 / -1; }
  .services__head { position: static; margin-bottom: 8vh; }
}
@media (max-width: 599.98px) {
  .svc { grid-template-columns: 40px 1fr; }
  .domains { grid-template-columns: 1fr; }
  .domains__list { grid-column: 1; }
}

/* ---- 40-ch3.css -------------------------------------------------------------------------------- */
/* 40-ch3.css: chapter III. v7 (decision 5): the concept's « L’innovation se nourrit du partage. » head (now opening the
   chapter with its chip, the Conférences opener and the photo collage are gone), the "Invité par" marquee, then
   « Prises de parole » (.tk*): the v6 talks design (big title, framing line, rows date + type | title | host | city)
   redrawn in the concept's tokens (Montserrat 200 caps titles, Poppins labels, 1px paper lines, scarce gold).
   Rows sit on the 12-column grid: the list starts at column 3, the row titles on column 5 under the big title.
   Owner: chapter III agent. */

/* ---- chapter III: « L’innovation se nourrit du partage. » ----------------------------------------- */
/* the chapter break: chapter III has no opener any more, so a hairline in the gutters closes chapter II above its chip */
.talks { position: relative; padding: 16vh var(--gut) 10vh; }
.talks::before { content: ""; position: absolute; top: 0; left: var(--gut); right: var(--gut); height: 1px; background: var(--line); }
.talks__chip { margin-bottom: 11vh; }
.talks__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; align-items: end; }
.talks__head .eyebrow { grid-column: 1 / -1; }
.talks__head .big { grid-column: 1 / 8; }
.talks__aside { grid-column: 9 / 13; }
.talks__intro { color: var(--muted); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 12px; letter-spacing: 0.02em; }

/* ---- the "Invité par" marquee (the concept's, unchanged) -------------------------------------------- */
.marquee { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 34px 0; overflow: hidden; display: flex; align-items: center; gap: 0; }
.marquee__label { flex: none; padding: 0 28px 0 var(--gut); font: 400 11px/1.3 var(--fb); text-transform: uppercase; letter-spacing: 0.12em; color: var(--or); position: relative; z-index: 2; background: var(--noir); }
.marquee__track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee__row { display: flex; align-items: center; gap: 64px; padding-right: 64px; flex: none; }
.marquee__logo img { height: 46px; width: auto; opacity: 0.9; }
.marquee__logo .logo-uit, .marquee__logo .logo-cra { height: 58px; }
.marquee__txt { font: 300 20px/1 var(--fd); text-transform: uppercase; letter-spacing: 0.02em; color: var(--muted); white-space: nowrap; }
@keyframes marquee { to { transform: translateX(-50%); } }
/* integrator: the label's black only covered its own text line, so the taller logos showed above and below « Invité
   par »; it now covers the whole band (padding included, the borders stay the marquee's) and fades into the track */
.marquee__label { align-self: stretch; display: flex; align-items: center; margin-block: -34px; }
.marquee__label::after { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: 40px; background: linear-gradient(90deg, var(--noir), rgba(17, 17, 17, 0)); pointer-events: none; }

/* ---- « Prises de parole » (v6 design, concept tokens) ---------------------------------------------- */
.tk { padding: 15vh var(--gut) 18vh; }
.tk__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; align-items: end; margin-bottom: clamp(56px, 10vh, 104px); }
.tk__side { grid-column: 1 / 5; padding-bottom: 0.6em; }
.tk__side .eyebrow { margin-bottom: 20px; }
.tk__intro { max-width: 31ch; color: var(--muted); font-size: 15px; line-height: 1.65; text-wrap: pretty; }
.tk__title { grid-column: 5 / -1; }

/* the list starts on column 3 (2 columns + 2 gaps in), its 10 columns line up with the page grid */
.tk__list, .tk__foot { margin-left: calc((100% - 220px) / 6 + 40px); }
.tk__list { border-bottom: 1px solid var(--line); }
.tk-row { position: relative; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); column-gap: 20px; align-items: start; padding: 26px 0 30px; }
.tk-row__line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); transform-origin: 0 50%; }
.tk-row__when { grid-column: 1 / 3; display: flex; flex-direction: column; gap: 7px; padding-top: 4px; }
.tk-row__date { font: 500 12px/1.3 var(--fb); text-transform: uppercase; letter-spacing: 0.1em; color: var(--paper); }
.tk-row__kind { font: 400 11px/1.4 var(--fb); text-transform: uppercase; letter-spacing: 0.1em; color: var(--dim); }
.tk-row__t {
  grid-column: 3 / 8; padding-right: 12px;
  font: 200 clamp(20px, 1.8vw, 27px)/1.1 var(--fd); text-transform: uppercase; letter-spacing: -0.03em;
  color: var(--paper); hyphens: manual; text-wrap: balance;
}
.tk-row__t .nnb { letter-spacing: 0; }
.tk-row__t .nnb-run { white-space: nowrap; }
.tk-row__host { grid-column: 8 / 10; display: flex; flex-direction: column; gap: 3px; padding-top: 3px; font: 400 13.5px/1.45 var(--fb); }
.tk-row__org { font-weight: 500; color: rgba(242, 242, 242, 0.9); }
.tk-row__org2 { font-weight: 300; color: var(--muted); }
.tk-nw { white-space: nowrap; }
.tk-row__city { grid-column: 10 / 11; justify-self: end; padding-top: 4px; white-space: nowrap; text-align: right; font: 400 11px/1.3 var(--fb); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.tk-row:focus { outline: none; }
.tk-row:focus-visible { outline: 1px solid var(--or); outline-offset: 6px; }

.tk__foot { display: flex; flex-wrap: wrap; align-items: center; column-gap: 36px; row-gap: 24px; margin-top: 44px; }
.tk__foot .link-arrow { margin-top: 0; }
/* the "see all" pill: hidden unless JS runs and motion is allowed (then the rows behind it are hidden too, below) */
.tk__btn { display: none; }
.tk__plus { position: relative; width: 11px; height: 11px; flex: none; }
.tk__plus::before, .tk__plus::after { content: ""; position: absolute; left: 0; top: 5px; width: 11px; height: 1px; background: currentColor; transition: transform 0.35s var(--ease); }
.tk__plus::after { transform: rotate(90deg); }
.tk__btn:hover .tk__plus::after { transform: rotate(180deg); }
@media (prefers-reduced-motion: no-preference) {
  html.js .tk__list:not(.is-open) > [data-more] { display: none; }
  html.js .tk__btn { display: inline-flex; }
  html.js .tk__list.is-open + .tk__foot .tk__btn { display: none; }
}

.link-arrow { display: inline-flex; gap: 12px; align-items: center; margin-top: 44px; padding-bottom: 6px; border-bottom: 1px solid var(--or); font: 500 12px/1.4 var(--fb); text-transform: uppercase; letter-spacing: 0.08em; }
.link-arrow:hover { color: var(--or); }
.link-arrow:hover .arr { transform: translateX(5px); }

/* ---- responsive --------------------------------------------------------------------------------- */
@media (max-width: 1099.98px) {
  /* the list takes the full width; the city joins the date column */
  .tk__list, .tk__foot { margin-left: 0; }
  .tk__side { grid-column: 1 / 6; }
  .tk__title { grid-column: 6 / -1; }
  .tk-row { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; }
  .tk-row__when { grid-column: 1 / 3; grid-row: 1; }
  .tk-row__t { grid-column: 3 / 9; grid-row: 1 / span 2; }
  .tk-row__host { grid-column: 9 / 13; grid-row: 1 / span 2; }
  .tk-row__city { grid-column: 1 / 3; grid-row: 2; justify-self: start; text-align: left; padding-top: 7px; color: var(--dim); }
}
@media (max-width: 899.98px) {
  .talks__head .big, .talks__aside { grid-column: 1 / -1; }
  .talks__aside { margin-top: 40px; }
  .talks { padding-top: 11vh; }
  .talks__chip { margin-bottom: 8vh; }
  .tk { padding: 12vh var(--gut) 14vh; }
  .tk__head { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 30px; margin-bottom: 48px; }
  .tk__side { padding-bottom: 0; }
  .tk__intro { max-width: 36ch; font-size: 15px; }
  /* phones (v6): date + type on the left, city on the right, then the title, then the host */
  .tk-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: none; column-gap: 16px; row-gap: 12px; padding: 22px 0 24px; }
  .tk-row__when { grid-column: 1; grid-row: 1; flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 4px; padding-top: 0; }
  .tk-row__city { grid-column: 2; grid-row: 1; justify-self: end; text-align: right; padding-top: 0; color: var(--muted); }
  .tk-row__t { grid-column: 1 / -1; grid-row: 2; padding-right: 0; font-size: clamp(19px, 5.2vw, 23px); line-height: 1.12; font-weight: 300; letter-spacing: -0.025em; }
  .tk-row__host { grid-column: 1 / -1; grid-row: 3; padding-top: 2px; font-size: 13px; }
  .tk__foot { margin-top: 36px; }
}
@media (max-width: 599.98px) {
  .marquee__txt { font-size: 16px; }
  .marquee__logo img { height: 36px; }
  .marquee__logo .logo-uit, .marquee__logo .logo-cra { height: 44px; }
  .marquee__label { padding-right: 16px; }
  .tk__foot { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  /* a still marquee: every institution shows as a wrapped list (no hidden horizontal scroller); the label sits beside
     it on wide screens and above it on phones */
  .marquee { overflow: visible; flex-wrap: wrap; row-gap: 24px; }
  .marquee__label { margin-block: 0; }
  .marquee__label::after { display: none; }
  .marquee__track { animation: none; width: auto; flex: 1 1 520px; min-width: 0; padding: 0 var(--gut); }
  .marquee__row { flex: 1 1 auto; flex-wrap: wrap; gap: 24px 48px; padding-right: 0; }
  .marquee__row[aria-hidden="true"] { display: none; }
}

/* ---- 50-ch4.css -------------------------------------------------------------------------------- */
/* 50-ch4.css: chapter IV, the light chapter: « Réflexions & actualités » (LinkedIn cards) and the socials list.
   Owner: chapter IV agent. v7 (decision 6): the profile row with the « Suivre » pill in the panel head (.li-pro,
   .li-follow), the LinkedIn mark in the pill after the cards, the note under a translated quote (.post__note) and the
   network marks of « Retrouvez-moi » (.soc__ico). Brand colours only: black, paper, white cards, dark gold on paper. */

/* ---- chapter IV: light ---------------------------------------------------------------------------- */
.chapter--light { background: var(--paper); color: var(--noir); }
.chapter--light .eyebrow { color: rgba(17, 17, 17, 0.55); }
.chapter--light .is-gold { color: var(--or-dark); }
.posts { padding: calc(var(--hdr) + 8vh) var(--gut) 12vh; overflow-x: clip; }   /* cards arrive tilted: never wider than the screen */
.posts__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; align-items: end; }
.posts__head .chip-ch, .posts__head .eyebrow { grid-column: 1 / -1; }
.posts__head .big { grid-column: 1 / 9; }
.posts__aside { grid-column: 9 / 13; display: flex; flex-direction: column; gap: 26px; container-type: inline-size; }
.posts__intro { color: rgba(17, 17, 17, 0.7); }

/* the profile row (his LinkedIn cue, in brand colours): avatar, name, handle, black « Suivre » pill */
.li-pro { display: flex; align-items: center; gap: 14px; padding-top: 22px; border-top: 1px solid rgba(17, 17, 17, 0.14); }
.li-pro__av { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; }
.li-pro__who { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; margin-right: auto; }
.li-pro__who strong { font-weight: 500; font-size: 15px; }
.li-pro__who span { font-size: 12px; color: rgba(17, 17, 17, 0.62); overflow-wrap: anywhere; }
.li-follow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 20px 0 17px;
  border: 1px solid var(--noir);
  border-radius: 999px;
  background: var(--noir);
  color: var(--paper);
  font: 500 12px/1 var(--fb);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex: none;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.li-follow__in { width: 15px; height: 15px; flex: none; }
.li-follow:hover { background: transparent; color: var(--noir); }
/* a narrow column (about 1100 to 1380 px and 900 to 1010 px screens, phones) shows the handle without the domain */
@container (max-width: 399.98px) { .li-pro__dom { display: none; } }

.posts__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 10vh 0 7vh; align-items: start; }
.post article { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid rgba(17, 17, 17, 0.1); padding: 18px 18px 16px; box-shadow: 0 30px 60px -40px rgba(17, 17, 17, 0.35); transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease); }
.post:nth-child(even) { margin-top: 7vh; }
.post article:hover { transform: translateY(-6px); box-shadow: 0 40px 70px -40px rgba(17, 17, 17, 0.45); }
.post__hd { display: flex; align-items: center; gap: 12px; }
.post__av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.post__who { display: flex; flex-direction: column; line-height: 1.3; }
.post__who strong { font-weight: 500; font-size: 14px; }
.post__who time { font-size: 12px; color: rgba(17, 17, 17, 0.6); }
.post__in { margin-left: auto; color: var(--noir); }
.post__tag { margin: 18px 0 8px; font: 500 12px/1 var(--fb); color: var(--or-dark); }
.post__q { font-size: 14.5px; line-height: 1.6; color: rgba(17, 17, 17, 0.86); }
.post__note { margin-top: 10px; font: 400 10.5px/1.4 var(--fb); text-transform: uppercase; letter-spacing: 0.1em; color: rgba(17, 17, 17, 0.62); }
.post__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin-top: 18px; }
.post__link { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(17, 17, 17, 0.12); font: 500 12px/1.4 var(--fb); text-transform: uppercase; letter-spacing: 0.08em; }
.post__link:hover { color: var(--or-dark); }
.post__link:hover .arr { transform: translate(3px, -3px); }
.pill__in { width: 15px; height: 15px; flex: none; }

/* ---- Retrouvez-moi: one row per network, its mark in a thin ring before the name ------------------ */
.socials { padding: 6vh var(--gut) 18vh; }
.socials__title { font-size: clamp(40px, 5vw, 80px); margin-bottom: 7vh; }
.socials__list { border-bottom: 1px solid rgba(17, 17, 17, 0.14); }
.soc { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 28px; padding: 18px 0 14px; border-top: 1px solid rgba(17, 17, 17, 0.14); }
.soc__ico {
  display: grid;
  place-items: center;
  width: clamp(38px, 4.6vw, 76px);
  aspect-ratio: 1;
  border: 1px solid rgba(17, 17, 17, 0.24);
  border-radius: 50%;
  color: var(--noir);
  transition: background-color 0.45s var(--ease), border-color 0.45s var(--ease), color 0.45s var(--ease);
}
.soc__mark { width: 36%; height: 36%; }
.soc__net { font-size: clamp(44px, 7.4vw, 124px); transition: color 0.4s var(--ease), transform 0.6s var(--ease); }
.soc__h { font-size: 15px; color: rgba(17, 17, 17, 0.7); }
.soc__arr { font-size: 30px; font-weight: 200; transition: transform 0.4s var(--ease), color 0.4s var(--ease); }
.soc:hover .soc__ico { background: var(--noir); border-color: var(--noir); color: var(--paper); }
.soc:hover .soc__net { color: var(--or-dark); transform: translateX(14px); }
.soc:hover .soc__arr { transform: translate(6px, -6px); color: var(--or-dark); }

@media (max-width: 1099.98px) {
  .posts__head .big { grid-column: 1 / 8; }
  .posts__aside { grid-column: 8 / 13; }
  .posts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post:nth-child(even) { margin-top: 5vh; }
}
@media (max-width: 899.98px) {
  .posts__head .big, .posts__aside { grid-column: 1 / -1; }
  .posts__aside { margin-top: 26px; gap: 22px; max-width: 560px; }
  .soc { gap: 20px; }
}
@media (max-width: 599.98px) {
  .posts__grid { grid-template-columns: 1fr; gap: 28px; }
  .post:nth-child(even) { margin-top: 0; }
  .li-pro__av { width: 46px; height: 46px; }
  .soc { grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; }
  .soc__h { display: none; }
  .soc__arr { font-size: 26px; }
  /* phones: a 44 px ring (the touch size) with a 19 px mark, so the logo reads as a logo next to the 40 px name */
  .soc__ico { width: 44px; height: 44px; }
  .soc__mark { width: 44%; height: 44%; }
  /* the ring takes room from the name: the longest one (INSTAGRAM, ~6 em) keeps its row down to 320 px */
  .soc__net { font-size: min(44px, calc((100vw - 122px) / 6.1)); }
}

/* ---- 60-ch5-footer.css ------------------------------------------------------------------------- */
/* 60-ch5-footer.css: chapter V, contact (portrait, stage, details, the CRM form) and the footer (home + legal pages).
   Owner: chapter V agent (contact) and footer agent (.foot*).
   v7 decision 7: the stairs opener is gone; the section is composed around his side-profile portrait.
     desktop (>= 900px): 12-column grid; .contact__media spans columns 6-12 + the right gutter and both rows, sticky
     (CSS only, the concept's way), 100svh tall; the portrait (square) is flattened onto the page black in its file
     (ch5-profile-noir, prep_ch5.py), so no box edge shows and no blend mode is needed; he looks left, toward .contact__stage
     (chip, giant « Contact », intro, the two request buttons, the details) and .contact__write (« Parlons de votre
     projet. » + the form). The media releases with the end of the form; nothing reaches the footer.
     phones: a full-bleed portrait band under the header, the chip and the giant word set over its faded bottom.
   v7 decision 8: the footer logo centred, the bottom row balanced on the same axis (.foot--home). */

/* ---- chapter V: contact ------------------------------------------------------------------------- */
.contact {
  position: relative;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px;
  padding: 0 var(--gut) 16vh;
}

/* the portrait: sticky panel on the right, he looks left toward the text */
.contact__media {
  grid-column: 6 / 13; grid-row: 1 / 3; align-self: start;
  position: sticky; top: 0; z-index: 0;
  height: 100vh; height: 100svh;
  margin-right: calc(-1 * var(--gut));
  overflow: hidden; background: var(--noir);
  pointer-events: none;
}
/* size: the viewport height minus half the header, capped by the width; position: his nose lands ~48px right of the
   text column (columns 1-6), whatever the viewport (the media box starts at column 6; 0.255 = the nose tip in the
   square). Overflow at the right only ever cuts black or the back of the head. */
.contact__img {
  --ph: min(calc(100svh - var(--hdr) * 0.55), 64vw);
  --col: calc((100vw - 2 * var(--gut) - 220px) / 12);
  position: absolute; bottom: 0; left: calc(var(--col) + 48px - var(--ph) * 0.255);
  height: var(--ph); width: auto; max-width: none; aspect-ratio: 1 / 1;
  object-fit: cover;
  transform-origin: 42% 46%;
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 22%);
  mask-image: linear-gradient(to top, transparent 0%, #000 22%);
}

/* the stage: chapter chip, the giant word (h2), intro, request buttons, details */
.contact__stage {
  grid-column: 1 / 7; grid-row: 1; position: relative; z-index: 1;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--hdr) + 4vh) 0 12vh;
}
.contact__chip { margin-bottom: 26px; }
.contact__word {
  font-weight: 100; font-size: clamp(64px, 10vw, 176px); letter-spacing: -0.06em; line-height: 0.84;
  margin-left: -0.05em;
}
.contact__intro { margin-top: 38px; color: var(--muted); max-width: 40ch; }
.contact__cta { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }
.contact__dl { margin-top: 54px; display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 24px clamp(36px, 5vw, 80px); }
.contact__dl dt { font: 400 12px/1.4 var(--fb); text-transform: uppercase; letter-spacing: 0.1em; color: var(--dim); }
.contact__dl dd { font-size: 18px; margin-top: 4px; }
.contact__dl a { background: linear-gradient(var(--or), var(--or)) 0 100% / 0 1px no-repeat; transition: background-size 0.5s var(--ease), color 0.3s var(--ease); }
.contact__dl a:hover { background-size: 100% 1px; }
.contact__nets { display: flex; flex-wrap: wrap; gap: 4px 20px; }
/* each network carries its mark (the same Simple Icons marks as « Retrouvez-moi »); the underline stays on the name */
.contact__dl .contact__nets a { display: inline-flex; align-items: center; gap: 9px; background: none; }
.contact__nets a > span { background: linear-gradient(var(--or), var(--or)) 0 100% / 0 1px no-repeat; transition: background-size 0.5s var(--ease); }
.contact__nets a:hover > span { background-size: 100% 1px; }
.net__mark { width: 15px; height: 15px; flex: none; transition: color 0.3s var(--ease); }
.contact__nets a:hover .net__mark { color: var(--or); }

/* the form block (#contact-form, the target of both request buttons) */
.contact__write { grid-column: 1 / 7; grid-row: 2; position: relative; z-index: 1; padding-top: 12vh; max-width: 760px; }
.contact__write:focus { outline: none; }
.contact__title { margin-bottom: 9vh; }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 20px; align-content: start; position: relative; }
.form__title { grid-column: 1 / -1; font: 400 12px/1.4 var(--fb); text-transform: uppercase; letter-spacing: 0.14em; color: var(--dim); }
.form__chips { grid-column: 1 / -1; border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.form__chips legend { font: 400 12px/1.4 var(--fb); color: var(--muted); margin-bottom: 12px; padding: 0; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border: 1px solid rgba(242, 242, 242, 0.24); border-radius: 999px; font-size: 13px; transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.6s var(--ease); }
.chip input:checked + span { background: var(--paper); color: var(--noir); border-color: var(--paper); }
.chip input:focus-visible + span { outline: 1px solid var(--or); outline-offset: 3px; }
.chip:hover span { border-color: var(--or); }
/* a request button picked this chip: one gold ring that fades (60-ch5.js adds .is-picked) */
.chip.is-picked span { animation: chip-picked 1.4s var(--ease) both; }
@keyframes chip-picked { 0% { box-shadow: 0 0 0 0 rgba(200, 162, 74, 0.75); } 100% { box-shadow: 0 0 0 12px rgba(200, 162, 74, 0); } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field label { font: 400 12px/1.4 var(--fb); color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; background: transparent; color: var(--paper);
  border: 0; border-bottom: 1px solid rgba(242, 242, 242, 0.28); border-radius: 0;
  padding: 10px 0 12px; font: 300 16px/1.4 var(--fb);
  transition: border-color 0.3s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.field textarea { resize: vertical; min-height: 110px; }
.field select { cursor: pointer; background-color: var(--noir); background: var(--noir) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C8A24A'/%3E%3C/svg%3E") right 4px center no-repeat; padding-right: 26px; }
.field select option { background: var(--noir); color: var(--paper); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--or); }
.field input[aria-invalid="true"] { border-bottom-color: #e5917b; }
.field__err { min-height: 0; font-size: 12px; color: #e5917b; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__end { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 6px; }
.form__consent { flex: 1 1 260px; font-size: 12px; color: var(--dim); }
.form__consent a { text-decoration: underline; text-underline-offset: 3px; }
.form__consent a:hover { color: var(--or); }
.form__live { grid-column: 1 / -1; font-size: 14px; color: var(--or); min-height: 1.4em; }
.form__live:focus { outline: none; }
/* without JavaScript the form cannot reach the CRM: the button is disabled in the HTML and this line says how to write */
.form > noscript { grid-column: 1 / -1; display: block; }
.form__nojs { font-size: 14px; color: var(--muted); }
.form__nojs a { color: var(--paper); text-decoration: underline; text-decoration-color: var(--or); text-underline-offset: 3px; }
.form button[disabled] { opacity: 0.85; cursor: default; }

/* ---- footer ------------------------------------------------------------------------------------- */
.foot { padding: 12vh var(--gut) 104px; border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: flex-start; }
.foot__logo { width: min(420px, 70vw); height: auto; }
.foot__tag { margin-top: 26px; font: 400 12px/1.4 var(--fb); text-transform: uppercase; letter-spacing: 0.34em; color: var(--or); }
.foot__bar { width: 100%; margin-top: 12vh; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; font-size: 13px; color: var(--muted); }
.foot__bar ul { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.foot__bar a { display: inline-block; padding: 6px 0; }
.foot__bar a:hover { color: var(--or); }
.foot__top { display: inline-flex; gap: 10px; text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; }
.foot--legal { padding: 0 var(--gut) 40px; border: 0; }
.foot--legal .foot__bar { margin-top: 0; }

/* home footer: everything on the centre axis (decision 8) */
.foot--home { align-items: center; text-align: center; padding-top: 14vh; }
.foot--home .foot__logo { width: min(400px, 64vw); }
.foot--home .foot__tag { margin-top: 30px; padding-left: 0.34em; }   /* the trailing tracking, so the line centres */
.foot--home .foot__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px 32px; margin-top: 11vh; }
.foot--home .foot__rights { justify-self: start; text-align: left; }
.foot--home .foot__legal { justify-self: center; justify-content: center; }
.foot--home .foot__top { justify-self: end; }
/* .foot__bar a (inline-block) used to win over .foot__top's inline-flex, so « Haut de page » lost the gap before its arrow */
.foot__bar .foot__top { display: inline-flex; align-items: center; }
.foot__top:hover .arr { transform: translateY(-3px); }
/* the agency credit (every WeDevelopz site carries it; the Polytel / Neomar pattern in this page's tokens) */
.foot__bar .foot__by {
  display: inline-flex; align-items: center; gap: 12px; padding: 6px 0;
  font: 400 11px/1.4 var(--fb); text-transform: uppercase; letter-spacing: 0.1em; color: var(--dim);
}
.foot__by img { display: block; height: 14px; width: auto; opacity: 0.72; transition: opacity 0.3s var(--ease); }
.foot__by:hover img, .foot__by:focus-visible img { opacity: 1; }
.foot--home .foot__by { grid-column: 1 / -1; justify-self: center; margin-top: 18px; }

/* ---- responsive --------------------------------------------------------------------------------- */
@media (max-width: 1099.98px) {
  .form { grid-template-columns: 1fr; }
  .contact__dl { column-gap: 28px; }
  .contact__dl dd { font-size: 16px; }
  .foot--home .foot__bar { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 12px; }
  .foot--home .foot__legal { order: -1; }
  .foot--home .foot__rights, .foot--home .foot__top { justify-self: center; text-align: center; }
}

@media (max-width: 899.98px) {
  .contact { padding: var(--hdr) var(--gut) 12vh; }
  .contact__media {
    grid-column: 1 / -1; grid-row: 1; position: relative; top: auto;
    height: min(118vw, 74svh); margin: 0 calc(-1 * var(--gut));
  }
  .contact__img {
    left: 3vw; height: 100%;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 40%);
    mask-image: linear-gradient(to top, transparent 0%, #000 40%);
  }
  .contact__stage { grid-column: 1 / -1; grid-row: 2; min-height: 0; padding: 0; margin-top: calc(-1 * clamp(96px, 27vw, 150px)); }
  .contact__word { font-size: clamp(64px, 19.5vw, 120px); }
  .contact__intro { margin-top: 30px; }
  .contact__dl { margin-top: 44px; }
  .contact__write { grid-column: 1 / -1; grid-row: 3; padding-top: 12vh; max-width: none; }
  .contact__title { margin-bottom: 7vh; }
  .foot { padding-bottom: 72px; }
  .foot--home { padding-top: 11vh; }
  /* the centred gold logo already carries « ARCHITECTURE » and its own tagline: on phones, where the footer tagline
     stacked into three more lines right under it, the logo stands alone */
  .foot--home .foot__tag { display: none; }
}

@media (max-width: 599.98px) {
  /* the tagline would wrap with a dangling « · »: one word per line instead */
  .foot__tag span { display: block; line-height: 2; }
  .foot__tag .foot__dot { display: none; }
  .foot--home .foot__by { margin-top: 10px; }
  .contact__cta { display: grid; grid-template-columns: minmax(0, 1fr); }
  .contact__cta .pill { justify-content: space-between; }
  .contact__dl { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  /* the four links as a centred 2 x 2 grid (one line left « English » alone) */
  .foot--home .foot__legal { display: grid; grid-template-columns: auto auto; justify-content: center; justify-items: center; gap: 2px 28px; }
}

/* ---- reduced motion ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .chip.is-picked span { animation: none; }
}

/* ---- 90-overlays.css --------------------------------------------------------------------------- */
/* 90-overlays.css: the fixed layers (loader, menu, chapter bar) and the legal pages. Owned by the base. */

/* ---- loader ------------------------------------------------------------------------------------- */
.loader {
  position: fixed; inset: 0; z-index: 150;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  background: var(--deep);
  transition: opacity 0.8s var(--ease), visibility 0.8s;
  animation: loader-safety 0.6s 3.2s forwards;
}
.loader__mark { width: 120px; height: auto; }
.loader__line { width: 140px; height: 1px; background: rgba(242, 242, 242, 0.14); overflow: hidden; }
.loader__line span { display: block; height: 100%; background: var(--or); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease); }
.loader.is-out { opacity: 0; visibility: hidden; }
.no-js .loader { display: none; }
@keyframes loader-safety { to { opacity: 0; visibility: hidden; } }

/* ---- menu --------------------------------------------------------------------------------------- */
.menu { position: fixed; inset: 0; z-index: 90; }
.menu[hidden] { display: none; }
.menu__veil { position: absolute; inset: 0; background: rgba(11, 11, 11, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.5s var(--ease); }
.menu__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(860px, 60vw);
  background: var(--paper); color: var(--noir);
  padding: 30px clamp(24px, 3vw, 48px) 32px;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.7s var(--ease);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu.is-open .menu__veil { opacity: 1; }
.menu.is-open .menu__panel { transform: none; }
.menu__close { align-self: flex-end; display: inline-flex; align-items: center; gap: 14px; min-height: 46px; font: 500 12px/1 var(--fb); text-transform: uppercase; letter-spacing: 0.08em; }
.menu__x { position: relative; width: 28px; height: 28px; }
.menu__x::before, .menu__x::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transform: rotate(45deg); }
.menu__x::after { transform: rotate(-45deg); }
.menu__list { margin-top: 4vh; }
.menu__list li { border-bottom: 1px solid rgba(17, 17, 17, 0.14); }
.menu__list a { display: grid; grid-template-columns: minmax(110px, 0.32fr) 1fr; align-items: baseline; padding: 14px 0 12px; }
.menu__ch { font: 500 11px/1 var(--fb); text-transform: uppercase; letter-spacing: 0.08em; }
.menu__word { font: 200 clamp(38px, 5vw, 76px)/0.95 var(--fd); text-transform: uppercase; letter-spacing: -0.055em; transition: color 0.3s var(--ease), transform 0.5s var(--ease); }
.menu__list a:hover .menu__word, .menu__list a:focus-visible .menu__word { color: var(--or-dark); transform: translateX(10px); }
.menu__foot { margin-top: auto; padding-top: 6vh; display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 28px; align-items: end; font-size: 14px; }
.menu__dl div + div { margin-top: 12px; }
.menu__dl dt, .menu__dt { font: 400 12px/1.4 var(--fb); color: rgba(17, 17, 17, 0.6); margin-bottom: 2px; }
.menu__dl dd, .menu__social li { font-weight: 500; }
.menu__social li + li { margin-top: 2px; }
.menu__social a { display: inline-flex; align-items: center; gap: 9px; }
.menu__social .net__mark { width: 14px; height: 14px; flex: none; }
.menu__foot a:hover { color: var(--or-dark); }
.menu__lang a { font: 500 12px/1 var(--fb); text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 1px solid currentColor; padding-bottom: 4px; }

/* ---- chapter bar -------------------------------------------------------------------------------- */
.chbar { position: fixed; left: var(--gut); right: var(--gut); bottom: 0; z-index: 55; padding: 0 0 calc(18px + env(safe-area-inset-bottom)); color: var(--paper); opacity: 0; transform: translateY(10px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), color 0.4s var(--ease); pointer-events: none; }
.chbar.is-on { opacity: 1; transform: none; pointer-events: auto; }
/* the scrim under the labels: tall enough that copy scrolling under « Chapitre III Conférences » is covered, not
   showing through at a fifth of its contrast (00-core.js switches dark / light where its fade is half opaque) */
.chbar::before { content: ""; position: absolute; left: calc(-1 * var(--gut)); right: calc(-1 * var(--gut)); bottom: 0; height: 110px; background: linear-gradient(rgba(17, 17, 17, 0) 0, rgba(17, 17, 17, 0.96) 55%); pointer-events: none; z-index: -1; transition: background 0.4s var(--ease); }
.chbar.is-light::before { background: linear-gradient(rgba(242, 242, 242, 0) 0, rgba(242, 242, 242, 0.96) 55%); }
.chbar ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.chbar a { display: block; padding-top: 14px; }
.chbar__t { display: block; font: 400 11px/1 var(--fb); text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.45; transition: opacity 0.4s var(--ease); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chbar__w { opacity: 0.7; }
.chbar a.is-active .chbar__t, .chbar a:hover .chbar__t { opacity: 1; }
.chbar__track { display: block; height: 1px; margin-top: 9px; background: rgba(242, 242, 242, 0.22); overflow: hidden; }
.chbar__fill { display: block; height: 100%; background: var(--or); transform: scaleX(0); transform-origin: left; }
.chbar.is-light { color: var(--noir); }
.chbar.is-light .chbar__track { background: rgba(17, 17, 17, 0.18); }
.chbar.is-light .chbar__fill { background: var(--or-dark); }

/* ---- legal pages -------------------------------------------------------------------------------- */
.page-legal .hdr { grid-template-columns: auto 1fr auto; }
.legal { max-width: 880px; margin: 0 auto; padding: calc(var(--hdr) + 10vh) var(--gut) 12vh; }
.legal__h1 { font-size: clamp(40px, 6vw, 84px); }
.legal__lede { margin-top: 26px; font-size: clamp(18px, 1.5vw, 22px); color: var(--muted); }
.legal__nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 40px 0 64px; }
.legal__nav a { border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px; font-size: 13px; }
.legal__nav a[aria-current="page"], .legal__nav a:hover { border-color: var(--or); color: var(--or); }
.legal__s { padding: 34px 0; border-top: 1px solid var(--line); }
.legal__s h2 { font: 300 22px/1.3 var(--fd); margin-bottom: 14px; }
.legal__s h2 span { color: var(--or); font: 400 12px/1 var(--fb); letter-spacing: 0.1em; margin-right: 10px; vertical-align: middle; }
.legal__s p { color: var(--muted); }
.legal__s p + p { margin-top: 12px; }
.legal__s dl { margin-top: 16px; display: grid; gap: 8px; }
.legal__s dl div { display: grid; grid-template-columns: 120px 1fr; }
.legal__s dt { color: var(--dim); font-size: 14px; }
.legal__s a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(200, 162, 74, 0.6); }
.legal__s a:hover { color: var(--or); }
.legal__credits { margin-top: 20px; display: grid; gap: 14px; counter-reset: c; }
.legal__credits li { display: grid; gap: 2px; font-size: 14px; }
.legal__credits strong { font-weight: 400; }
.legal__credits span { color: var(--dim); }
.legal__upd { margin-top: 30px; font-size: 13px; color: var(--dim); }

@media (max-width: 899.98px) {
  .menu__panel { width: 100%; }
  /* phones: « Chapitre III » above its word, so the longest words (CONFÉRENCES, PUBLICATIONS) get the full width */
  .menu__list a { grid-template-columns: minmax(0, 1fr); row-gap: 6px; padding: 12px 0 10px; }
  .menu__word { font-size: clamp(30px, 10vw, 38px); }
  .menu__foot { grid-template-columns: 1fr 1fr; }
  .menu__lang { grid-column: 1 / -1; }
  .chbar__t { display: none; }
  .chbar ol { gap: 8px; }
  .chbar { padding-bottom: 14px; }
  /* phones: the links are only their tracks; a 44 px tall hit area around each one, the look unchanged */
  .chbar a { padding: 24px 0 10px; margin: -10px 0; }
  .chbar::before { height: 84px; background: linear-gradient(rgba(17, 17, 17, 0), rgba(17, 17, 17, 0.92) 70%); }
  .chbar.is-light::before { background: linear-gradient(rgba(242, 242, 242, 0), rgba(242, 242, 242, 0.94) 70%); }
}
@media (max-width: 599.98px) {
  .legal__s dl div { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .loader { display: none; }
}