/* onecub.com v0.7 (base v0.6). Charte Onecub Prism v1.0, palette B, surfaces graphite. Thème sombre unique, choisi.
   Un seul moment fort : l'horizon de l'accueil, animé une fois. Le reste reste calme. */

@font-face { font-family: "Archivo"; font-weight: 100 900; font-display: swap;
  src: url("fonts/archivo-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; font-weight: 100 900; font-display: swap;
  src: url("fonts/archivo-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: dark;
  /* Prism, palette B */
  --yellow: #F4FF00;
  --blue: #0047FF;
  --pink: #FF389E;
  --cyan: #00E5F2;
  --green: #64E600;
  --black: #080B10;
  /* Surfaces */
  --bg: #23262D;
  --panel: #30343D;
  --deep: #14171D;
  --ink: #F7F8FA;
  --muted: #C3C8D1;
  --line: rgba(255, 255, 255, .2);
  --line-strong: #A2A8B2;
  /* Couleur d'accent locale : --tone pour les traits, --tone-text pour le texte (contraste AA sur toutes les surfaces) */
  --tone: var(--cyan);
  --tone-text: var(--cyan);
  /* Échelle typographique */
  --t-small: .875rem;
  --t-body: 1.0625rem;
  --t-lead: clamp(1.125rem, 1.6vw, 1.3125rem);
  --t-h3: clamp(1.25rem, 1.9vw, 1.5rem);
  --t-h2: clamp(1.9rem, 3.2vw, 2.9rem);
  --t-h1: clamp(2.5rem, 5.4vw, 4.9rem);
  /* Espacements */
  --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2.5rem; --s5: 4rem; --s6: 6rem;
  --wrap: 80rem;
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
}

.cyan { --tone: var(--cyan); --tone-text: var(--cyan); }
.yellow { --tone: var(--yellow); --tone-text: var(--yellow); }
.pink { --tone: var(--pink); --tone-text: #FF7AB8; }
.green { --tone: var(--green); --tone-text: var(--green); }
.blue { --tone: #3D6DFF; --tone-text: #8FADFF; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-size: var(--t-body); line-height: 1.6; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.nw { white-space: nowrap; }
/* Read by screen readers, not shown */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:is(a, button, summary, video, label):focus-visible { outline: 3px solid var(--pink); outline-offset: 4px; border-radius: 2px; }
[id] { scroll-margin-top: 1.5rem; }

h1, h2, h3 { margin: 0; font-weight: 640; line-height: 1.08; letter-spacing: -.025em; text-wrap: balance; }
h1 { font-size: var(--t-h1); max-width: 17ch; letter-spacing: -.035em; }
h2 { font-size: var(--t-h2); max-width: 22ch; }
h3 { font-size: var(--t-h3); letter-spacing: -.015em; line-height: 1.15; }
p { margin: 0; color: var(--muted); max-width: 65ch; text-wrap: pretty; }
sup { font-size: .7em; line-height: 0; }
dl, dd { margin: 0; }
.lead { font-size: var(--t-lead); color: var(--ink); max-width: 52ch; }
.note { font-size: var(--t-small); }
.meta { font-size: var(--t-small); color: var(--cyan); display: flex; flex-wrap: wrap; gap: .15rem .9rem; }
.meta span { color: var(--muted); }
.sector { font-size: var(--t-small); color: var(--tone-text); font-weight: 560; }

.wrap { max-width: var(--wrap); margin-inline: auto;
  padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.wrap.narrow { max-width: 56rem; }
.section { padding-block: var(--s6); }
.section > .wrap { display: flex; flex-direction: column; gap: var(--s3); }
.section > .wrap + .wrap { margin-top: var(--s4); }
.band { background: var(--panel); }
.deep { background: var(--deep); }

.skip { position: absolute; left: 1rem; top: -4rem; background: var(--yellow); color: var(--black); padding: .8rem 1rem; z-index: 50; font-weight: 650; }
.skip:focus { top: 1rem; }

/* En-tête */
.masthead { background: var(--deep); border-bottom: 1px solid var(--line); position: relative; z-index: 40; }
.masthead-in { display: flex; align-items: center; gap: var(--s3); min-height: 5.25rem; }
.brand { flex: none; }
.brand img { width: 150px; }
.masthead nav { margin-left: auto; }
.menu { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.menu > li { position: relative; }
.menu a { display: block; text-decoration: none; font-size: .9375rem; white-space: nowrap; }
.menu .top { padding-block: 1.6rem; border-bottom: 2px solid transparent; }
.menu .has-sub::after { content: ""; display: inline-block; width: .36rem; height: .36rem; margin: 0 0 .2rem .5rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: .65; }
.menu .top[aria-current] { border-bottom-color: var(--cyan); }
.menu a:hover { color: var(--cyan); }
.sub { position: absolute; top: 100%; left: -1.1rem; z-index: 60; min-width: 15.5rem; margin: 0; padding: .4rem 0; list-style: none;
  background: var(--deep); border: 1px solid var(--line); border-top: 2px solid var(--cyan); box-shadow: 0 1.2rem 2.4rem rgba(0, 0, 0, .45);
  opacity: 0; visibility: hidden; transform: translateY(.4rem); transition: opacity .16s, transform .16s, visibility .16s; }
.menu > li:is(:hover, :focus-within) > .sub { opacity: 1; visibility: visible; transform: none; }
.sub a { padding: .65rem 1.1rem; }
.sub a:hover, .sub a[aria-current="page"] { color: var(--cyan); background: rgba(255, 255, 255, .04); }
.menu-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; display: none; }
.menu-btn { display: none; }
.masthead-actions { display: flex; align-items: center; gap: var(--s2); flex: none; }
.lang { display: inline-grid; place-items: center; min-width: 2.75rem; min-height: 2.75rem; text-decoration: none;
  font-size: var(--t-small); font-weight: 650; letter-spacing: .06em; }
.lang:hover { color: var(--cyan); }
.cta-short { display: none; }

.crumbs { padding-top: var(--s3); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; font-size: var(--t-small); color: var(--muted); }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: "/"; margin-right: .5rem; color: #8C939F; }
.crumbs a { text-decoration: none; display: inline-block; padding-block: .35rem; }
.crumbs a:hover { color: var(--cyan); text-decoration: underline; }
.crumbs + .pagehero { padding-top: var(--s4); }

/* Boutons et liens */
.actions { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; }
.btn { display: inline-block; min-height: 3.25rem; padding: .9rem 1.5rem;
  background: var(--yellow); color: var(--black); font: inherit; font-weight: 650; line-height: 1.25; text-align: center;
  text-decoration: none; border: 1px solid transparent; align-self: flex-start; cursor: pointer; }
.btn:hover { background: #fff; }
.btn.secondary { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
.entry .btn.secondary, .pillars .btn.secondary { border-color: var(--tone); }
.btn.secondary:hover { border-color: var(--cyan); color: var(--cyan); }
.btn.small { min-height: 2.75rem; padding: .7rem 1.1rem; font-size: .9375rem; }
.btn.big { min-height: 3.75rem; padding: 1.15rem 2rem; font-size: 1.125rem; }
.textlink { align-self: flex-start; display: inline-block; padding-block: .6rem; font-size: .9375rem; font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .35em; }
.textlink:hover { color: var(--cyan); text-decoration-thickness: 2px; }
.ext { white-space: nowrap; }

/* Accueil : le texte, et à côté cinq cubes Prism avec les cinq verbes, au-dessus d'un horizon au crépuscule.
   L'animation se joue une fois, puis la scène reste immobile. */
.hero { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column;
  background: radial-gradient(65% 55% at 80% 100%, rgba(0, 71, 255, .16), transparent 70%), var(--deep); }
.hero-in { position: relative; z-index: 2; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: var(--s4); align-items: center; padding-top: clamp(3rem, 8vh, 5.5rem); padding-bottom: var(--s3); }
.hero-text { display: flex; flex-direction: column; gap: var(--s3); }
.hero h1 { font-size: clamp(2.6rem, 5.3vw, 4.8rem); max-width: 15ch; }
.hero .lead { max-width: 46ch; }
.hero .actions { margin-top: var(--s1); }
.hero-fig { margin: 0; display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.hero-fig figcaption { align-self: flex-end; max-width: 34ch; min-height: 2.9em; text-align: right; text-wrap: balance; font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  line-height: 1.45; color: #DCE6FF; padding-right: .25rem; border-right: 2px solid var(--k); padding-left: 0; animation: sc-fade .8s ease-out 1.9s both;
  transition: border-color .2s; }
.fig-box { position: relative; }
/* With script, a discreet hint says the cubes can be explored (point 11). */
.hero-fig .hint:not([hidden]) { display: block; margin-top: .3rem; font-size: var(--t-small); color: var(--muted); }
.hero-fig[data-step] .hint { display: none; }
.fig { display: block; width: 100%; height: auto; overflow: visible; --t0: .3s; }
.fig .w { font-size: 25px; font-weight: 620; letter-spacing: -.01em; fill: var(--ink);
  paint-order: stroke; stroke: var(--deep); stroke-width: 6px; stroke-linejoin: round; }
.fig .lns { fill: none; stroke: #9BEFFF; stroke-opacity: .45; stroke-width: 1.6; stroke-linecap: round; }
.fig .pulse { fill: none; stroke: #FFFFFF; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 5 100; stroke-dashoffset: 5; opacity: 0;
  animation: sc-pulse 1.2s ease-in-out 2.6s both; }
.fig .rise { fill: none; stroke-width: 1.6; stroke-linecap: round; animation: sc-fade 1s ease-out 1.6s both; }
.scene { position: relative; z-index: 0; display: block; width: 100%; height: clamp(11rem, 26vh, 16rem); margin-top: -2rem; }
.scene .grid { animation: sc-fade 1.4s ease-out both; }
.fig .halo { transform-box: fill-box; transform-origin: center; animation: sc-halo 1.2s ease-out both; }
.fig .cube { transform-box: fill-box; transform-origin: center; animation: fig-rise 1s cubic-bezier(.2, .8, .2, 1) both; }
.fig .w { animation: sc-fade .8s ease-out both; }
.fig :is(.c0, .h0, .w0) { --i: 0; } .fig :is(.c1, .h1, .w1) { --i: 1; } .fig :is(.c2, .h2, .w2) { --i: 2; }
.fig :is(.c3, .h3, .w3) { --i: 3; } .fig :is(.c4, .h4, .w4) { --i: 4; }
.fig :is(.cube, .halo) { animation-delay: calc(var(--t0) + var(--i) * .25s); }
.fig .w { animation-delay: calc(var(--t0) + .3s + var(--i) * .25s); }
@keyframes sc-fade { from { opacity: 0; } }
@keyframes sc-halo { from { opacity: 0; transform: scale(.2); } }
@keyframes fig-rise { from { opacity: 0; transform: translateY(28px); } }
@keyframes sc-pulse { 0% { opacity: 0; stroke-dashoffset: 5; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: -100; } }
/* Chaque cube a sa phrase. Au survol, au toucher ou au clavier (site.js pose [data-step]), elle remplace la légende,
   précédée du verbe dans la couleur du cube, et le cube s'entoure de cette couleur. Sans script, la légende reste. */
.hero-fig { --k: #3D6DFF; }
.hero-fig[data-step="0"] { --k: color-mix(in srgb, var(--yellow) 65%, #fff); }
.hero-fig[data-step="1"] { --k: color-mix(in srgb, var(--cyan) 65%, #fff); }
.hero-fig[data-step="2"] { --k: color-mix(in srgb, var(--pink) 65%, #fff); }
.hero-fig[data-step="3"] { --k: color-mix(in srgb, var(--green) 65%, #fff); }
.hero-fig[data-step="4"] { --k: color-mix(in srgb, var(--blue) 65%, #fff); }
.fig-hits { position: absolute; inset: 0; width: 100%; height: 100%; }
.fig-hits .hit { fill: transparent; outline: none; }
.fig :is(.glow, .ring) { opacity: 0; transition: opacity .2s ease-out; }
.fig .ring { fill: none; stroke-width: 2.5; stroke-linejoin: round; }
.hero-fig[data-step="0"] .s0, .hero-fig[data-step="1"] .s1, .hero-fig[data-step="2"] .s2,
.hero-fig[data-step="3"] .s3, .hero-fig[data-step="4"] .s4 { opacity: 1; }
.hero-fig .say { animation: sc-fade .3s ease-out; }
.hero-fig .say:not(.say-d), .hero-fig[data-step] .say-d { display: none; }
.hero-fig[data-step="0"] .say0, .hero-fig[data-step="1"] .say1, .hero-fig[data-step="2"] .say2,
.hero-fig[data-step="3"] .say3, .hero-fig[data-step="4"] .say4 { display: inline; }
.hero-fig .say b { font-weight: 650; color: var(--k); }

.intro { display: flex; align-items: end; justify-content: space-between; gap: var(--s2) var(--s3); flex-wrap: wrap; }
.section-lead { font-size: 1.125rem; max-width: 70ch; }
.pagehero { padding-block: var(--s5) var(--s4); }
.pagehero > .wrap { gap: var(--s2); }
.pagehero h1 { font-size: clamp(2.2rem, 4.2vw, 3.6rem); max-width: 22ch; }
/* Official project logo at the top of a project page, on white, never filtered */
.plogo { display: inline-grid; place-items: center; background: #fff; padding: .55rem .8rem; line-height: 0; }
.plogo img { max-height: 40px; width: auto; max-width: 13rem; }
.plogo.square img { max-height: 52px; }
.pagehero .plogo { align-self: flex-start; margin-bottom: var(--s1); }
.pagehero .lead { margin-top: var(--s1); }
.pagehero .hero-act { margin-top: var(--s1); }
.statement { font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1.2; font-weight: 600; letter-spacing: -.02em; color: var(--ink); max-width: 30ch; text-wrap: balance; }
.statement.small { font-size: clamp(1.25rem, 1.9vw, 1.5rem); }

/* Repères en tête de page : statut, porteur, rôle de Onecub */
.keyfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: var(--s3) var(--s4); margin-top: var(--s3); border-top: 1px solid var(--line); padding-top: var(--s3); }
.keyfacts > div { display: flex; flex-direction: column; gap: .2rem; padding-left: var(--s2); border-left: 2px solid var(--line-strong); min-width: 0; }
.keyfacts dt { font-size: var(--t-small); color: var(--muted); }
.keyfacts dd { color: var(--ink); font-weight: 600; line-height: 1.4; }
.case .keyfacts { margin-top: 0; }
/* Home, MyTravelConnect case: the navy of the demo video runs across the section, so the video blends in (Olivier, 27/10). */
.section.case { background: linear-gradient(#1D2E60, #0B1530); }
.case .demo video { background: transparent; }
/* Project pages: the project's colour on the key facts (PROJECT_TONE in build.py). */
.pagehero:is(.cyan, .yellow, .pink, .green, .blue) .keyfacts { border-top: 3px solid var(--tone); }
/* Pages of a verb (Créer, Développer, Gouverner): its colour on the hero, the headings and the markers */
.toned .pagehero { border-top: 4px solid var(--tone); }
.toned .pagehero h1, .toned h2 { color: var(--tone-text); }
.toned .end h2 { color: inherit; }
.toned .checks li::before { background: var(--tone); }
.pagehero:is(.cyan, .yellow, .pink, .green, .blue) .keyfacts > div { border-left-color: var(--tone); }

/* Chiffres clés */
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.metrics > div { display: flex; flex-direction: column; gap: .35rem; border-top: 3px solid var(--tone); padding-top: var(--s2); min-width: 0; }
.metrics .num { order: -1; font-size: clamp(2.4rem, 4.2vw, 3.5rem); font-weight: 700; line-height: 1; letter-spacing: -.04em; color: var(--tone-text); font-variant-numeric: tabular-nums; }
.metrics dt { color: var(--ink); font-weight: 600; line-height: 1.35; max-width: 26ch; }
.metrics .note { color: var(--muted); max-width: 34ch; }
.metrics .more a { display: inline-block; padding-block: .35rem; font-size: .9375rem; font-weight: 600; text-underline-offset: .3em; }
.metrics .more a:hover { color: var(--cyan); }
.pagehero .metrics { margin-top: var(--s4); }

/* Grilles et cartes */
.tri, .quad, .duo, .trio { display: grid; gap: var(--s4); margin-top: var(--s2); }
.tri, .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tri.six { row-gap: var(--s5); }
.quad { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.quad.two, .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.duo.single { grid-template-columns: 1fr; gap: var(--s3); margin-top: 0; }
.card { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.linkcard, .duo .card, .quad > .card { padding: var(--s3); background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.band :is(.linkcard, .duo .card, .quad > .card), .deep .duo .card { background: var(--bg); }
.linkcard { text-decoration: none; transition: border-color .2s; }
.linkcard:hover { border-color: var(--cyan); }
.linkcard:hover h3 { color: var(--cyan); }
.more { margin-top: auto; font-size: .9375rem; font-weight: 600; text-decoration: underline; text-underline-offset: .35em; }
.status { font-size: var(--t-small); color: var(--ink); font-weight: 560; display: inline-flex; align-items: center; gap: .5rem; }
.status::before { content: ""; width: .5rem; height: .5rem; background: var(--yellow); transform: rotate(45deg); flex: none; }
.card:is(.cyan, .yellow, .pink, .green, .blue) .status::before { background: var(--tone); }
.cardhead { display: flex; align-items: center; gap: var(--s2); }
.cardhead .icon { width: 44px; height: 44px; }
.bullets { margin: 0; padding-left: 1.1rem; color: var(--muted); display: flex; flex-direction: column; gap: .35rem; font-size: .9875rem; }
.bullets li::marker { color: var(--cyan); }
.icon { width: 52px; height: 52px; flex: none; }
.icon.large { width: 100%; max-width: 180px; height: auto; justify-self: center; }
.iso { width: 40px; height: 44px; flex: none; }
.cluster { display: inline-flex; align-items: flex-end; }
.cluster .iso { width: 30px; height: 33px; }
.cluster .iso + .iso { margin-left: -4px; }
.split { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5); align-items: center; }
.split.align-top { align-items: start; }
.split > div, .split > ul, .split > ol, .split > figure, .split > dl { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; margin: 0; }

.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s2); }
.pillars article { display: flex; flex-direction: column; gap: var(--s2); padding-top: var(--s3); border-top: 3px solid var(--tone); min-width: 0; }
.pillars h3 { color: var(--tone-text); font-size: clamp(1.5rem, 2.3vw, 2rem); }
.pillar-head { display: flex; align-items: center; gap: var(--s2); }
.pillar-head .iso { flex: none; }
.trio article { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3); background: var(--bg); border-top: 3px solid var(--tone); min-width: 0; }
.trio .textlink { margin-top: auto; }
.aside-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s1) var(--s3);
  margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); }
.aside-line p { color: var(--ink); }

.rows { display: flex; flex-direction: column; }
.rows article { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s4); padding-block: var(--s3); border-top: 1px solid var(--line); align-items: start; }
.deliverables { list-style: none; margin: 0; padding: var(--s2) 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .4rem .5rem; }
.deliverables li { font-size: var(--t-small); color: var(--tone-text); border: 1px solid color-mix(in srgb, var(--tone) 50%, transparent); padding: .2rem .6rem; }
.step { border-top: 3px solid var(--tone); padding-top: var(--s3); display: flex; flex-direction: column; gap: var(--s2); }

.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.checks li { position: relative; padding-left: 1.6rem; color: var(--muted); }
.checks li::before { content: ""; position: absolute; left: 0; top: .55em; width: .6rem; height: .6rem; background: var(--cyan); transform: rotate(45deg); }
.checks strong { color: var(--ink); font-weight: 620; }

.nudge { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3);
  padding: var(--s3); border: 1px solid var(--line); border-left: 4px solid var(--yellow); margin-top: var(--s2); }
.nudge p { color: var(--ink); font-size: 1.0625rem; font-weight: 560; }
.nudge .btn { align-self: center; }

/* Séquences : étapes numérotées, et chaîne de gouvernance */
.flow { list-style: none; margin: 0; padding: 0; counter-reset: f; display: flex; flex-direction: column; gap: var(--s3); }
.flow li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: var(--s2); align-items: start; align-content: start; }
.flow .n { grid-row: span 2; display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border: 2px solid var(--tone); color: var(--tone-text); font-weight: 700; font-size: 1.1rem; }
.flow strong { font-size: 1.125rem; color: var(--ink); font-weight: 620; line-height: 1.3; padding-top: .55rem; }
.flow span { color: var(--muted); }
.flow.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--s3); position: relative; }
.flow.row li { grid-template-columns: 1fr; row-gap: var(--s2); }
.flow.row .n { grid-row: auto; }
.flow.row strong { padding-top: 0; }
.flow.row.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.flow-title { font-size: 1.125rem; letter-spacing: 0; margin-top: var(--s2); max-width: none; }
.flow.chain { gap: 0; position: relative; }
.flow.chain::before { content: ""; position: absolute; left: calc(1.375rem - 1px); top: 1.4rem; bottom: 1.4rem; width: 2px;
  background: linear-gradient(var(--cyan), var(--yellow), var(--pink), var(--green), #3D6DFF, var(--cyan)); opacity: .55; }
.flow.chain li { position: relative; padding-block: .55rem; grid-template-columns: 2.75rem minmax(0, 1fr); }
.flow.chain li::before { content: ""; grid-row: span 2; width: .95rem; height: .95rem; margin: .45rem auto 0; background: var(--tone); transform: rotate(45deg);
  box-shadow: 0 0 0 5px var(--deep); }
.band .flow.chain li::before { box-shadow: 0 0 0 5px var(--panel); }
.flow.chain strong { padding-top: .2rem; color: var(--tone-text); }
.flow.chain li:last-child::after { content: "↺"; position: absolute; left: 0; width: 2.75rem; bottom: -1.6rem; text-align: center; color: var(--cyan); font-size: 1.1rem; }
.flow.chain.compact strong { font-size: 1.0625rem; }
.flow.chain.compact span { font-size: .9375rem; }
.flow.chain.compact li { padding-block: .35rem; }

.levels { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.levels li { display: flex; flex-direction: column; gap: var(--s1); padding-top: var(--s3); border-top: 1px solid var(--line); min-width: 0; }
.levels .cluster { min-height: 2.6rem; margin-bottom: var(--s1); }
.levels h3 { font-size: clamp(1.4rem, 2.1vw, 1.75rem); }
.level-rule { color: var(--ink); font-weight: 600; }
.controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.controls > div { border-top: 2px solid var(--line-strong); padding-top: var(--s1); display: flex; flex-direction: column; gap: .25rem; }
.controls dt { color: var(--ink); font-weight: 620; }
.controls dd { color: var(--muted); font-size: .9375rem; }

/* Accompagnement */
.entries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s2); }
.entry { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3); background: var(--bg); border-top: 3px solid var(--tone); min-width: 0; }
.entry h3 { color: var(--tone-text); }
.entry dl { display: flex; flex-direction: column; gap: .35rem; }
.entry dt { font-size: var(--t-small); color: var(--ink); font-weight: 620; margin-top: var(--s1); }
.entry dd { color: var(--muted); }
.entry .deliverables { border-top: 0; padding-top: .25rem; }
.entry .textlink, .pillars .textlink, .entry-act { margin-top: auto; }
.money { background: var(--bg); border-top: 3px solid var(--yellow); padding: var(--s4); }
.money .num { font-size: clamp(2.6rem, 4.6vw, 3.75rem); font-weight: 700; line-height: 1; letter-spacing: -.04em; color: var(--yellow); }
.money .label { color: var(--ink); font-size: 1.25rem; font-weight: 600; margin-top: -.75rem; }
.money .note { font-size: var(--t-small); line-height: 1.5; }

/* Gen4Travel : ce qui est fait, ce qui est prévu */
.status-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.status-cols > div { display: flex; flex-direction: column; gap: var(--s2); padding-left: var(--s2); min-width: 0; }
.status-cols .done { border-left: 3px solid var(--green); }
.status-cols .planned { border-left: 3px dashed #8FADFF; }
.status-cols .done h3 { color: var(--green); }
.status-cols .planned h3 { color: #8FADFF; }
.status-cols h3 { font-size: 1.125rem; }

/* Projets et photos */
.projects { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s4) var(--s3); }
.project { grid-column: span 2; min-width: 0; }
.project.main { grid-column: span 3; }
.project .media { position: relative; }
.project .plogo { position: absolute; left: .75rem; bottom: .75rem; z-index: 3; padding: .4rem .6rem; }
.project .plogo img { max-height: 30px; max-width: 9rem; }
.project .plogo.square img { max-height: 40px; }
.project.main h3 { font-size: clamp(1.5rem, 2.3vw, 1.9rem); }
.project a { display: flex; flex-direction: column; gap: var(--s1); text-decoration: none; height: 100%; }
.project h3 { margin-top: var(--s1); }
.project .media { border-bottom: 3px solid var(--tone); }
.project a:hover h3 { color: var(--tone-text); text-decoration: underline; text-underline-offset: .2em; }
.project .photo .frame, .project .tile { aspect-ratio: 3 / 2; }
.credits { font-size: var(--t-small); }
.photo { margin: 0; display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.photo .frame { position: relative; overflow: hidden; background: #263746; }
.photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
/* Années 80, en touche : un grain fin et, sur quelques photos datées, le tampon d'appareil */
.photo .frame::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .07;
  background: url("img/grain-soft.webp"); }
.photo figcaption, .demo figcaption, .li-video figcaption, .device figcaption { font-size: var(--t-small); color: var(--muted); max-width: 70ch; }
.stamp { position: absolute; right: .9rem; bottom: .7rem; z-index: 3; font-family: "Courier New", ui-monospace, monospace; font-size: .95rem;
  font-weight: 700; letter-spacing: .14em; color: #FFA040; text-shadow: 0 0 .3rem rgba(255, 110, 20, .95), 0 0 1rem rgba(255, 80, 0, .55); }
.visual { padding-block: 0 var(--s5); }
.visual .photo img { height: auto; max-height: min(72vh, 42rem); }
.tile { display: grid; place-items: center; border-top: 3px solid var(--tone); position: relative;
  background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--tone) 22%, transparent), transparent 62%), var(--panel); }
.tile .cluster .iso { width: 44px; height: 48px; }
.tile .cluster .iso + .iso { margin-left: -6px; }

.feature { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--s4); align-items: center; }
.feature-text { border-top: 3px solid var(--tone); padding-top: var(--s2); display: flex; flex-direction: column; gap: var(--s2); }
.feature-text h3 { font-size: clamp(1.6rem, 2.6vw, 2.25rem); }
.feature-text h3 a { text-decoration: none; }
.feature-text h3 a:hover { color: var(--tone-text); text-decoration: underline; text-underline-offset: .2em; }
.refs { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.refs li { display: flex; flex-direction: column; gap: var(--s1); padding-top: var(--s2); border-top: 3px solid var(--tone); min-width: 0; }
.refs .ref-pic { margin: 0 0 var(--s1); }
.photo .badge { position: absolute; right: .6rem; bottom: .6rem; z-index: 3; display: flex; padding: .35rem .55rem;
  background: #fff; border-radius: .5rem; box-shadow: 0 2px 10px rgb(0 0 0 / .25); }
.photo .badge img, .refs .ref-pic .badge img { display: block; width: auto; height: 1.6rem; max-width: 8rem; aspect-ratio: auto; object-fit: contain; }
.refs .ref-pic img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.refs h3 a { text-decoration: none; }
.refs h3 a:hover { color: var(--tone-text); text-decoration: underline; text-underline-offset: .2em; }

.role { background: var(--panel); padding: var(--s4); }
.linklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.linklist li { border-top: 1px solid var(--line); }
.linklist li:last-child { border-bottom: 1px solid var(--line); }
.linklist .textlink { display: block; padding-block: .8rem; text-decoration: none; }
.linklist .textlink:hover { text-decoration: underline; }

.facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--s3); }
.facts > div { display: flex; flex-direction: column; gap: var(--s1); border-top: 3px solid var(--cyan); padding-top: var(--s2); }
.facts > div:nth-child(2) { border-top-color: var(--yellow); }
.facts dt { font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; color: var(--ink); }
.facts dd { color: var(--muted); font-size: .9875rem; max-width: 30ch; }

/* Vidéos : hébergées sur le site, ou LinkedIn au clic seulement */
.demo { margin: 0; display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.demo-label { align-self: flex-start; font-size: var(--t-small); color: var(--ink); font-weight: 600; border: 1px solid var(--line-strong); padding: .2rem .65rem; }
.demo video { width: 100%; background: var(--black); }
.demo.tall { width: min(100%, 22rem); margin-inline: auto; }
.demo.tall video { max-height: min(78vh, 40rem); }
.device { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.device img { width: 100%; max-width: 19rem; }
.device figcaption { text-align: center; }
.li-video { margin: 0; display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.li-frame { position: relative; aspect-ratio: 16 / 11; background: radial-gradient(70% 90% at 50% 100%, rgba(0, 71, 255, .3), transparent 70%), var(--deep);
  border: 1px solid var(--line); display: grid; place-items: center; }
.li-frame.live { background: var(--black); }
.li-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.li-face { display: flex; flex-direction: column; align-items: center; gap: var(--s2); padding: var(--s3); text-align: center; }
.li-mark { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; background: #0A66C2; color: #fff; font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; border-radius: 4px; }
.li-title { color: var(--ink); font-weight: 620; font-size: 1.125rem; }
.li-play.btn { align-self: center; }
.li-note { font-size: var(--t-small); max-width: 40ch; }
.li-video figcaption .textlink { padding-block: .2rem; }

/* Actualités et publications */
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.news-item { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.news-item .textlink { margin-top: auto; }
/* One picture per news item, in the same frame: an event photo, a publication cover or the logos concerned. */
.thumb { aspect-ratio: 16 / 9; overflow: hidden; background: var(--panel); margin-bottom: .25rem; }
.band .thumb { background: var(--bg); }
.thumb.photo img, .thumb.still img { width: 100%; height: 100%; object-fit: cover; }
.thumb.cover { display: grid; grid-template-rows: 100%; place-items: center; padding-block: .9rem; }
.thumb.cover img { height: 100%; width: auto; box-shadow: 0 .6rem 1.4rem rgba(0, 0, 0, .45); }
.thumb.logos { display: flex; align-items: center; justify-content: center; gap: 1.75rem; padding: 1rem 1.5rem; background: #fff; }
.thumb.logos img { max-height: 46px; max-width: 40%; width: auto; height: auto; object-fit: contain; }
.thumb.logos img.square { max-height: 76px; }
.thumb.logos img.compact { max-height: 58px; }
.recent { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 2fr); gap: var(--s4); align-items: start; }
.recent .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pub-feature { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--s3); align-items: start; border-top: 1px solid var(--line); padding-top: var(--s3); }
.pub-feature > div { display: flex; flex-direction: column; gap: var(--s2); }
.cover { width: 100%; height: auto; box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .45); }
.pubs-featured { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s4) var(--s3); margin-top: var(--s2); }
.pub { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.pub > div { display: flex; flex-direction: column; gap: var(--s1); flex: 1; }
.pub h3 { font-size: 1.1875rem; }
.pub-sub { color: var(--ink); font-size: .9375rem; }
.pub p:not(.pub-sub, .meta) { font-size: .9375rem; }
.pub .role-line { color: var(--cyan); font-size: var(--t-small); }
.pub .textlink { margin-top: auto; }
.pubs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pubs li { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: var(--s2); padding-block: .9rem; border-top: 1px solid var(--line); }
.pubs .year { color: var(--cyan); font-weight: 650; font-variant-numeric: tabular-nums; }
.pubs a { font-weight: 560; text-decoration: none; }
.pubs a:hover { color: var(--cyan); text-decoration: underline; }
.pubs .src { display: block; font-size: var(--t-small); color: var(--muted); margin-top: .15rem; }

.sectors { list-style: none; margin: var(--s2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; max-width: 62rem; }
.sectors li { display: inline-flex; align-items: center; gap: .55rem; padding: .45rem .95rem; font-size: var(--t-small); font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--tone) 55%, transparent); background: color-mix(in srgb, var(--tone) 8%, transparent); }
.sectors li::before { content: ""; width: .55rem; height: .55rem; background: var(--tone); }
/* A linked sector: the whole chip, past the square, takes the click */
.sectors a { display: block; margin: -.45rem -.95rem -.45rem 0; padding: .45rem .95rem .45rem 0; text-decoration: underline;
  text-decoration-color: var(--tone); text-underline-offset: .3em; }
.sectors a:hover { color: var(--tone-text); }
.names { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.names li { font-size: var(--t-small); color: var(--ink); background: rgba(255, 255, 255, .07); padding: .35rem .75rem; }
.names.linked li { padding: 0; background: none; }
.names.linked a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .45rem .9rem; border: 1px solid var(--line); text-decoration: none; font-size: .9375rem; }
.names.linked a:hover { border-color: var(--cyan); color: var(--cyan); }
.prose-columns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }

/* Logos : chaque logo dit sa relation avec Onecub */
.logo-groups { display: flex; flex-direction: column; gap: var(--s4); margin-top: var(--s2); }
.logo-groups.home { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s5); }
.logo-groups.home .logo-group:nth-child(-n+2) { grid-column: 1 / -1; }
.logo-group { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.logo-group h3 { font-size: 1.0625rem; font-weight: 620; color: var(--ink); letter-spacing: 0; }
.logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.75rem, 1fr)); gap: .75rem; }
.logos.partners { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.logos.projects-row { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s2); }
.logos.projects-row .logo-img { height: 92px; }
.logos.projects-row .logo-img img { max-height: 44px; }
.logos.projects-row .logo-img.square img { max-height: 62px; }
.logos.projects-row .logo-img.compact img { max-height: 52px; }
.logos.projects-row .logo-cap { font-size: .875rem; }
.logo-group > .note { color: var(--muted); }
.logo { display: flex; flex-direction: column; gap: .4rem; text-decoration: none; height: 100%; }
.logo-img { display: grid; place-items: center; height: 72px; padding: .7rem .85rem; background: #fff; border: 2px solid transparent; transition: border-color .15s; }
.logo-img img { max-height: 34px; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.logo-img.small img { max-height: 25px; }
.logo-img.square img { max-height: 50px; }
.logo-img.compact img { max-height: 42px; }
.logo-img.text { padding-inline: .5rem; }
.logo-name { color: #14171D; font-weight: 680; font-size: 1rem; line-height: 1.15; text-align: center; letter-spacing: -.01em; }
.logo-cap { font-size: .8125rem; line-height: 1.35; color: var(--muted); }
.logo-cap strong { display: block; color: var(--ink); font-size: .9375rem; font-weight: 650; }
a.logo:hover .logo-img { border-color: var(--cyan); }
a.logo:hover .logo-cap { color: var(--cyan); }
a.logo:focus-visible { outline-offset: 2px; }
.logos.plain { margin-top: var(--s2); }

.contactbox { background: var(--panel); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); }
.deep .contactbox, .band .contactbox { background: var(--bg); }
.contactbox .btn { margin-top: var(--s1); }
.choices { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1); }
.choice { display: inline-flex; min-height: 2.75rem; align-items: center; padding: .5rem 1rem; border: 1px solid #8C939F; text-decoration: none; }
.choice:hover, .choice[aria-current] { background: var(--cyan); border-color: var(--cyan); color: var(--black); }
.topic-note { color: var(--ink); font-weight: 560; padding: .6rem .9rem; border-left: 3px solid var(--cyan); background: rgba(0, 229, 242, .08); }
.mailbox { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); margin-top: var(--s3); padding: var(--s4); background: var(--panel); max-width: 40rem; }
.email { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 620; color: var(--ink); letter-spacing: -.01em; overflow-wrap: anywhere; }
.prose { gap: var(--s2) !important; }
.prose h2 { font-size: var(--t-h3); margin-top: var(--s3); }
.prose h3 { font-size: 1.125rem; margin-top: var(--s2); }
.prose a { color: var(--cyan); }
.prose ul { color: var(--muted); }

/* Ressources */
.cookbook { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s5); }
.cookbook li { display: flex; flex-direction: column; gap: var(--s1); padding-top: var(--s2); border-top: 3px solid var(--tone); }
.cookbook .n { color: var(--tone-text); font-weight: 700; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.cookbook .out { font-size: var(--t-small); color: var(--ink); }
.faq { gap: var(--s5) !important; }
.faq-group { display: flex; flex-direction: column; }
.faq-group h2 { font-size: var(--t-h3); color: var(--tone-text); margin-bottom: var(--s2); }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 1rem 2.5rem 1rem 0; position: relative; font-weight: 600; font-size: 1.0625rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .25rem; top: .7rem; font-size: 1.5rem; line-height: 1; color: var(--cyan); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--cyan); }
.faq details p { padding-bottom: var(--s3); }

/* Équipe et historique */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr)); gap: var(--s4); margin-top: var(--s2); }
.people.board { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--s3); }
.person { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s3); align-items: start; }
.person > div { display: flex; flex-direction: column; gap: var(--s1); }
.person .deliverables { border-top: 0; padding-top: 0; }
.person .textlink { padding-block: .35rem; }
.portrait { width: 120px; height: 120px; object-fit: cover; border-radius: 50%; }
.person.small { grid-template-columns: 80px minmax(0, 1fr); align-items: center; }
.person.small .portrait { width: 80px; height: 80px; }
.role { color: var(--ink); font-weight: 560; }
.person .role { display: flex; flex-direction: column; background: none; padding: 0; }
.person .role span { color: var(--muted); font-weight: 400; font-size: var(--t-small); }
.faces { display: flex; }
.faces .portrait { width: 56px; height: 56px; border: 2px solid var(--panel); border-radius: 50%; margin-right: -12px; }
.deep .faces .portrait { border-color: var(--bg); }
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 7.4rem; top: .6rem; bottom: .6rem; width: 2px; background: var(--line); }
.timeline li { position: relative; display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--s4); padding-block: var(--s3); }
.timeline li::before { content: ""; position: absolute; left: calc(7.4rem - 6px); top: calc(var(--s3) + .35rem); width: 14px; height: 14px; background: var(--tone); transform: rotate(45deg); }
.timeline .year { color: var(--tone-text); font-weight: 700; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.timeline li > div { display: flex; flex-direction: column; gap: var(--s1); }
.milestones { list-style: none; margin: var(--s4) 0 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s3); }
.milestones::before { content: ""; position: absolute; left: 0; right: 0; top: .45rem; height: 2px; opacity: .75;
  background: linear-gradient(90deg, var(--cyan), var(--yellow), var(--pink), var(--green), #3D6DFF, var(--cyan)); }
.milestones li { position: relative; display: flex; flex-direction: column; gap: .4rem; padding-top: var(--s4); min-width: 0; }
.milestones li::before { content: ""; position: absolute; top: 0; left: 0; width: 1rem; height: 1rem; background: var(--tone); transform: rotate(45deg); }
.milestones .year { color: var(--tone-text); font-weight: 700; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.milestones strong { font-size: 1rem; font-weight: 600; line-height: 1.4; }

/* La vision, seule zone en dégradé */
.zone { background: linear-gradient(118deg, var(--blue) 0%, #2F35E0 45%, #6A2BD0 78%, #B02FB4 100%); color: #fff; position: relative; isolation: isolate; }
.zone::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .13; background: url("img/grain-soft.webp"); }
.zone p { color: #fff; }
.zone .textlink { color: #fff; }
.zone :focus-visible { outline-color: var(--yellow); }

/* v0.6 : aperçus de livrables. Chacun est signalé comme un exemple ou un schéma, jamais présenté comme un vrai document. */
.specimen { margin: 0; display: flex; flex-direction: column; gap: var(--s3); padding: var(--s3); min-width: 0;
  background: var(--deep); border: 1px dashed var(--line-strong); }
.deep .specimen { background: var(--bg); }
.specimen.pilot { margin-top: var(--s2); }
.specimen-label { align-self: flex-start; font-size: var(--t-small); font-weight: 600; color: var(--ink); border: 1px solid var(--line-strong); padding: .2rem .65rem; }

/* Cartographie d'acteurs : six rôles autour d'un cas d'usage commun */
.amap { position: relative; }
.amap-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; width: clamp(11rem, 20vw, 16rem);
  display: flex; flex-direction: column; gap: .4rem; padding: var(--s3) var(--s2); text-align: center; background: var(--deep); border: 2px solid var(--yellow); max-width: none; }
.amap-core strong { color: var(--yellow); font-size: 1.125rem; line-height: 1.25; }
.amap-core span { font-size: .9375rem; }
.amap-roles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(13rem, 24vw, 19rem); row-gap: var(--s3); }
.amap-roles li { position: relative; display: flex; flex-direction: column; gap: .2rem; padding: var(--s2); background: rgba(255, 255, 255, .04);
  border-left: 3px solid var(--tone); min-width: 0; }
.amap-roles li:nth-child(even) { border-left: 0; border-right: 3px solid var(--tone); text-align: right; }
.amap-roles li::after { content: ""; position: absolute; top: 50%; width: 3.5rem; border-top: 2px dashed color-mix(in srgb, var(--tone) 70%, transparent); }
.amap-roles li:nth-child(odd)::after { left: 100%; }
.amap-roles li:nth-child(even)::after { right: 100%; }
.amap-roles strong { color: var(--tone-text); font-weight: 650; }
.amap-roles span { font-size: .9375rem; color: var(--muted); }

/* Feuille de route d'un pilote : des segments proportionnels aux mois, une décision, puis la suite */
.roadmap { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 2fr 4fr 1.3fr 1.5fr 2fr; gap: .4rem; }
.roadmap li { position: relative; display: flex; flex-direction: column; gap: .3rem; padding: var(--s3) var(--s1) 0 0; min-width: 0; }
.roadmap li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--green); }
.roadmap li:nth-child(odd)::before { background: color-mix(in srgb, var(--green) 55%, var(--deep)); }
.roadmap li.gate::before { right: auto; top: -4px; width: 16px; height: 16px; background: var(--yellow); transform: rotate(45deg); }
.roadmap li:last-child::before { height: 0; background: none; border-top: 8px dotted color-mix(in srgb, var(--green) 55%, transparent); }
.roadmap .when { font-size: var(--t-small); color: var(--muted); font-variant-numeric: tabular-nums; }
.roadmap strong { color: var(--ink); font-size: 1.0625rem; }
.roadmap li.gate strong { color: var(--yellow); }
.roadmap li > span:last-child { font-size: .9375rem; color: var(--muted); }

/* Fiche de règle : les six champs reprennent les couleurs des six maillons */
.rule-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem var(--s2); padding-bottom: var(--s2); border-bottom: 1px solid var(--line); }
.rule-id { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: var(--t-small); font-weight: 600; color: #8FADFF; }
.rule-title { flex: 1 1 14rem; color: var(--ink); font-size: 1.125rem; font-weight: 650; line-height: 1.3; }
.rule-ver { font-size: var(--t-small); color: var(--green); border: 1px solid color-mix(in srgb, var(--green) 55%, transparent); padding: .1rem .55rem; }
.rule-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2) var(--s3); }
.rule-fields > div { display: flex; flex-direction: column; gap: .15rem; padding-left: .8rem; border-left: 2px solid var(--tone); min-width: 0; }
.rule-fields dt { font-size: var(--t-small); font-weight: 650; color: var(--tone-text); }
.rule-fields dd { color: var(--ink); font-size: .9875rem; line-height: 1.45; }
.rule-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); padding-top: var(--s2); border-top: 1px solid var(--line); }
.rule-sub { font-size: var(--t-small); font-weight: 650; color: var(--ink); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .5rem; }
.rule-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; font-size: .9375rem; color: var(--muted); }
.rule-log strong { color: var(--ink); font-weight: 600; }

/* Délégation : quatre temps, reliés par des chevrons */
.handoff { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
.handoff li { position: relative; display: flex; flex-direction: column; gap: .3rem; padding: var(--s2); background: rgba(255, 255, 255, .04);
  border-top: 3px solid var(--tone); min-width: 0; }
.handoff li + li::before { content: ""; position: absolute; left: calc(var(--s4) / -2 - .45rem); top: 50%; width: .75rem; height: .75rem;
  border-top: 2px solid var(--line-strong); border-right: 2px solid var(--line-strong); transform: translateY(-50%) rotate(45deg); }
.handoff strong { color: var(--tone-text); font-size: 1.0625rem; }
.handoff span { font-size: .9375rem; color: var(--muted); }

/* Standards rangés par rôle */
.std { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.std > div { display: flex; flex-direction: column; gap: var(--s1); padding-top: var(--s2); border-top: 2px solid var(--line-strong); min-width: 0; }
.std h3 { font-size: 1.125rem; letter-spacing: 0; }
.std p { font-size: .9375rem; }
.std .names { margin-top: .35rem; }

/* Références vérifiables sous une offre */
.evidence { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .9rem; font-size: .9375rem; max-width: none; }
.evidence span { font-size: var(--t-small); color: var(--muted); }
.evidence a { display: inline-block; padding-block: .35rem; color: var(--ink); font-weight: 600; text-decoration-color: var(--tone); text-underline-offset: .3em; }
.evidence a:hover { color: var(--cyan); }

/* Résultats documentés d'un projet */
.outcomes { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3) var(--s4); border-left: 4px solid var(--green); background: rgba(100, 230, 0, .06); }
.outcomes h3 { font-size: 1.125rem; color: var(--green); letter-spacing: 0; }
.outcomes .checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--s2) var(--s4); }
.outcomes .checks li::before { background: var(--green); }

/* La démo décrite écran par écran : la vidéo est muette */
.demo-steps { margin: 0; padding-left: 1.5rem; display: flex; flex-direction: column; gap: var(--s2); color: var(--muted); }
.demo-steps li { padding-left: .35rem; }
.demo-steps li::marker { color: var(--cyan); font-weight: 700; }
.demo-steps strong { color: var(--ink); font-weight: 620; }

/* Accueil : trois convictions, et publications à côté des actualités */
.convictions { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.convictions li { display: flex; flex-direction: column; gap: var(--s1); padding-top: var(--s2); border-top: 2px solid rgba(255, 255, 255, .7); min-width: 0; }
.convictions strong { color: #fff; font-size: var(--t-h3); font-weight: 640; line-height: 1.2; letter-spacing: -.015em; text-wrap: balance; }
.convictions span { color: #fff; }
.recent-col { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }

/* Fin de page : l'appel à l'échange */
.end { background: var(--panel); border-top: 1px solid var(--line); padding-block: var(--s5); }
.section > .wrap.end-in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s3) var(--s5); align-items: center; }
.end-text { display: flex; flex-direction: column; gap: var(--s2); }
.end-text h2 { font-size: clamp(1.75rem, 2.8vw, 2.5rem); }
.end-act { display: flex; flex-direction: column; gap: var(--s2); align-items: flex-start; }
.end-act p { font-size: .9375rem; }
.end-act p a { color: var(--ink); font-weight: 600; text-underline-offset: .25em; display: inline-block; padding-block: .25rem; }
.end-act p a:hover { color: var(--cyan); }

/* Rubrique */
.related { padding-block: var(--s4); border-top: 1px solid var(--line); }
.related nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.related h2 { white-space: nowrap; font-size: 1rem; letter-spacing: 0; color: var(--muted); font-weight: 600; }
.related ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.related a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .5rem .9rem; border: 1px solid var(--line); text-decoration: none; font-size: .9375rem; }
.related a:hover { border-color: var(--cyan); color: var(--cyan); }
.related a[aria-current="page"] { background: var(--ink); color: var(--black); border-color: var(--ink); }

/* Pied de page */
.foot { background: var(--black); padding-block: var(--s5) var(--s3); }
.foot-in { display: grid; grid-template-columns: 1.2fr repeat(4, minmax(0, 1fr)); gap: var(--s4); }
.foot-brand { display: flex; flex-direction: column; gap: var(--s1); }
.foot-brand img { width: 110px; margin-bottom: var(--s2); }
.foot h2 { font-size: .9375rem; letter-spacing: 0; font-weight: 600; margin-bottom: var(--s1); }
.foot h2 a { color: var(--muted); padding-block: 0; }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.foot a { text-decoration: none; display: inline-block; padding-block: .45rem; }
.foot a:hover { color: var(--cyan); text-decoration: underline; }
.foot p { font-size: .9375rem; }
.foot .foot-mail { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: .25em; text-decoration-color: var(--cyan); }
.foot-legal { margin-top: var(--s4); }
.foot-legal p { font-size: .8125rem; color: #A7AFBA; max-width: none; padding-top: var(--s3); border-top: 1px solid var(--line); }

@media (max-width: 1240px) {
  .cta-long { display: none; }
  .cta-short { display: inline; }
  .menu { gap: 1.15rem; }
  .quad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pubs-featured { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .milestones { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s4); }
  .milestones::before { display: none; }
  .foot-in { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
  .recent { grid-template-columns: 1fr; }
  .flow.row.six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .logos.partners { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .feature { grid-template-columns: 1fr; }
  .entries, .refs { grid-template-columns: 1fr; gap: var(--s3); }
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .controls { grid-template-columns: 1fr; }
  .rule-more { grid-template-columns: 1fr; }
  .logo-groups.home { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .metrics { grid-template-columns: 1fr; gap: var(--s3); }
  .status-cols { grid-template-columns: 1fr; }
}
/* Touch screens have no hover to open the submenus: tablets get the phone menu, whatever their width. */
@media (max-width: 860px), (hover: none) {
  .masthead-in { flex-wrap: wrap; gap: 0 var(--s2); min-height: 4.5rem; }
  .menu-btn { display: inline-flex; align-items: center; gap: .6rem; order: 3; min-height: 2.75rem; padding: .5rem .25rem; cursor: pointer;
    font-size: .9375rem; font-weight: 650; }
  .menu-btn span, .menu-btn span::before, .menu-btn span::after { display: block; width: 1.15rem; height: 2px; background: currentColor; position: relative; }
  .menu-btn span::before, .menu-btn span::after { content: ""; position: absolute; left: 0; }
  .menu-btn span::before { top: -6px; }
  .menu-btn span::after { top: 6px; }
  .menu-toggle { display: block; }
  .menu-toggle:focus-visible + .menu-btn { outline: 3px solid var(--pink); outline-offset: 2px; }
  .masthead-actions { order: 2; margin-left: auto; gap: var(--s1); }
  .masthead nav { order: 4; width: 100%; margin: 0; display: none; padding-bottom: var(--s3); }
  .menu-toggle:checked ~ nav { display: block; }
  .menu { flex-direction: column; gap: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--line); }
  .menu .top { padding-block: .4rem; font-size: 1.125rem; font-weight: 650; border: 0; }
  .menu .has-sub::after { display: none; }
  .menu .top[aria-current] { color: var(--cyan); }
  .sub { position: static; opacity: 1; visibility: visible; transform: none; min-width: 0; padding: 0 0 0 var(--s2); border: 0;
    border-left: 2px solid var(--line); box-shadow: none; background: none; display: flex; flex-wrap: wrap; gap: 0 var(--s3); }
  .sub a { padding: .55rem 0; color: var(--muted); }
}
@media (max-width: 860px) {
  .section { padding-block: var(--s5); }
  .hero-in { grid-template-columns: minmax(0, 1fr); gap: var(--s3); padding-top: var(--s5); }
  /* Phones and tablets: the buttons right after the lead, then the cubes (ChatGPT audit, point 8, validated by Olivier). */
  .hero-text { display: contents; }
  .hero .actions { order: 1; margin-top: 0; }
  .hero-fig { order: 2; }
  /* Tablets: the drawing stays in proportion with the text (point 9). */
  .fig-box { width: min(100%, 27rem); }
  /* The caption keeps one height whatever the sentence, and reads from the left (point 16). */
  .hero-fig figcaption { align-self: stretch; max-width: 40ch; min-height: 4.4em; text-align: left; border-right: 0; border-left: 2px solid var(--k);
    padding: 0 0 0 .6rem; }
  .scene { height: 9rem; margin-top: -2.5rem; }
  .tri, .trio, .pillars, .projects, .split, .prose-columns, .quad.two, .duo, .cookbook, .levels, .pubs-featured,
  .std, .convictions, .handoff, .roadmap { grid-template-columns: 1fr; }
  .project, .project.main { grid-column: auto; }
  .split { gap: var(--s4); }
  .logos.projects-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .logos.partners { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .amap-core { position: static; transform: none; width: auto; margin-bottom: var(--s2); }
  .amap-roles { grid-template-columns: 1fr; row-gap: var(--s2); }
  .amap-roles li:nth-child(even) { border-right: 0; border-left: 3px solid var(--tone); text-align: left; }
  .amap-roles li::after { display: none; }
  .roadmap { gap: var(--s2); }
  .roadmap li { padding: 0 0 0 var(--s3); }
  .roadmap li::before { right: auto; bottom: 0; width: 8px; height: auto; }
  .roadmap li.gate::before { top: .3rem; left: -4px; bottom: auto; }
  .roadmap li:last-child::before { height: auto; border-top: 0; border-left: 8px dotted color-mix(in srgb, var(--green) 55%, transparent); width: 0; }
  .handoff { gap: var(--s3); }
  .handoff li + li::before { left: 50%; top: calc(var(--s3) / -2 - .45rem); transform: translateX(-50%) rotate(135deg); }
  .outcomes { padding: var(--s3); }
  .icon.large { max-width: 120px; justify-self: start; }
  .split > .device, .split > .demo { order: 1; }
  .device img { max-width: 15rem; }
  .rows article { grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--s2) var(--s3); }
  .rows article > p { grid-column: 2; }
  .rows .icon { width: 44px; height: 44px; }
  .flow.row, .flow.row.six { grid-template-columns: 1fr; }
  .flow.row li { grid-template-columns: 2.75rem minmax(0, 1fr); row-gap: 0; }
  .flow.row .n { grid-row: span 2; }
  .flow.row strong { padding-top: .55rem; }
  .end-in { grid-template-columns: 1fr !important; }
  .pub { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--s3); align-items: start; }
  .milestones { grid-template-columns: 1fr; gap: var(--s2); padding-left: 2rem; }
  .milestones li { padding-top: 0; }
  .milestones li::before { left: -2rem; top: .3rem; }
  .timeline::before { left: .45rem; }
  .timeline li { grid-template-columns: 1fr; gap: var(--s1); padding-left: 2rem; }
  .timeline li::before { left: 0; top: calc(var(--s3) + .3rem); }
  .role, .money, .mailbox, .contactbox { padding: var(--s3); }
}
@media (max-width: 560px) {
  /* The section's link comes after its content on a phone, not between the title and the text (review, 28/10) */
  .section > .wrap > .intro { display: contents; }
  .section > .wrap > .intro > .btn { order: 99; align-self: flex-start; }
  .crumbs a { padding-block: .7rem; }
  .crumbs { padding-top: var(--s1); }
  .fig .w { font-size: 34px; }
  /* Phones: the buttons now come first, so the figure takes the width; each cube's target is then about 46 px high (point 12). */
  .fig-box { width: 100%; }
  .quad, .news-grid, .recent .news-grid { grid-template-columns: 1fr; }
  .foot-in { grid-template-columns: 1fr 1fr; }
  .person { grid-template-columns: 88px minmax(0, 1fr); }
  .person .portrait { width: 88px; height: 88px; }
  .section { padding-block: var(--s4); }
  .logos, .logos.projects-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .logos.partners { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .logos.partners .logo-img { height: 56px; padding: .4rem; }
  .logos.partners .logo-img img { max-height: 24px; }
  .logos.partners .logo-img.square img { max-height: 38px; }
  .logos.partners .logo-img.compact img { max-height: 30px; }
  .rule-fields { grid-template-columns: 1fr; }
  .logo-img { height: 64px; padding: .5rem .6rem; }
  .logo-img img { max-height: 28px; }
  .logo-img.square img { max-height: 44px; }
  .logo-img.compact img { max-height: 36px; }
  .pub-feature { grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--s2); }
  .refs .ref-pic img { aspect-ratio: 2 / 1; }
  /* Phones, home news: a small picture beside the text, like the publications above. */
  .recent .news-item { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .4rem var(--s2); align-items: start; }
  .recent .news-item > :is(.meta, h3) { grid-column: 2; }
  .recent .news-item > :is(p:not(.meta), .textlink) { grid-column: 1 / -1; }
  .recent .news-item > .thumb { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: 4 / 3; margin: 0; }
  .recent .news-item > .thumb.logos { padding: .5rem; gap: .5rem; }
  .recent .news-item > .thumb.logos img { max-width: 100%; }
  .refs { gap: var(--s3); }
}
@media (max-width: 420px) {
  .brand img { width: 120px; }
  .btn.small { padding-inline: .8rem; }
  .menu-btn { font-size: 0; gap: 0; padding-inline: .5rem; min-width: 2.75rem; justify-content: center; }
  h1, .hero h1 { font-size: clamp(2.1rem, 10.5vw, 2.6rem); }
  .foot-in { column-gap: 1.25rem; }
  .foot ul { font-size: .9375rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Les cubes apparaissent quand même, en fondu, sans déplacement ni trait lumineux. */
  .fig :is(.halo, .cube) { animation-name: sc-fade; }
  .fig .pulse { animation: none; }
  .hero-fig figcaption, .fig .w, .fig .rise, .scene .grid, .hero-fig .say { animation: none; }
  .sub, .linkcard, .logo-img, .faq summary::after { transition: none; }
}

/* LinkedIn links: the LinkedIn mark before the text, so they stand out (Olivier, 28/10) */
a[href*="linkedin.com/"]:not(.btn):not(.li-play) { font-weight: 650; }
a[href*="linkedin.com/"]:not(.btn):not(.li-play)::before { content: ""; display: inline-block; width: 1.15em; height: 1.15em; margin-right: .45em;
  vertical-align: -.2em; background: url("img/linkedin-in.svg") center / contain no-repeat; }
.consortium-head { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.consortium-head .plogo img { max-height: 44px; }
/* Contact address with its copy icon (Olivier, 28/10) */
.mail-copy { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.copy-icon { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-block: -.75rem; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; opacity: .8; }
.copy-icon:hover, .copy-icon:focus-visible { opacity: 1; color: var(--cyan); }
.copy-icon { position: relative; }
.copy-icon.copied { color: var(--green); opacity: 1; }
.copy-icon.copied svg { display: none; }
.copy-icon.copied::before { content: "✓"; font-weight: 700; font-size: 1.1rem; }
/* The confirmation also shows on screen, floating beside the icon so nothing moves (ChatGPT audit, point 6). */
.copy-icon.copied::after { content: attr(data-done); position: absolute; left: 100%; top: 50%; transform: translateY(-50%); white-space: nowrap;
  font-size: var(--t-small); font-weight: 600; color: var(--black); background: var(--green); padding: .15rem .5rem; pointer-events: none; }
/* Team page: the LinkedIn mark takes the page's green, like the portraits and tags (Olivier, 28/10) */
.person a[href*="linkedin.com/"]:not(.btn)::before { background-image: url("img/linkedin-in-green.svg"); }

.dnd-note { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); padding-block: var(--s3); border-block: 1px solid var(--line); }
.dnd-item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1); min-width: 0; }
.dnd-item p { margin: 0; font-size: var(--t-small); color: var(--muted); max-width: 52ch; }
.dnd-item .plogo img { max-height: 40px; }
@media (max-width: 560px) { .dnd-note { grid-template-columns: 1fr; } }

/* v0.6.15, remarques validées par Olivier (audit ChatGPT du 28/10) */
[hidden] { display: none !important; }
/* Demo video: an invitation in the middle of the poster, gone once the video plays (point 37). */
.demo-box { position: relative; }
.demo-start { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: .6rem;
  padding: .75rem 1.1rem; border: 0; background: var(--yellow); color: var(--black); font: inherit; font-weight: 650; cursor: pointer;
  white-space: nowrap; box-shadow: 0 .6rem 1.6rem rgba(0, 0, 0, .45); }
.demo-start:hover, .demo-start:focus-visible { background: #fff; }
.demo-play { width: 0; height: 0; border-block: .45rem solid transparent; border-left: .75rem solid currentColor; }
/* A news photo that does not show the event itself says so on the picture (point 4). */
.thumb { position: relative; }
.thumb-note { position: absolute; left: .5rem; bottom: .5rem; font-size: .75rem; font-weight: 600; color: var(--ink); background: rgba(8, 11, 16, .82);
  padding: .15rem .5rem; }
.specimen-wrap { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
/* Logos on an off-white ground, softer than a wall of white rectangles; a logo's own white blends into it (point 18). */
.logo-img, .thumb.logos, .plogo { background: #F2F1EC; }
.logo-img img, .thumb.logos img, .plogo img { mix-blend-mode: multiply; }
.logo-img.large { padding-block: .3rem; }
.logo-img.large img { max-height: 60px; }
@media (max-width: 560px) {
  .logo-img.large img, .logos.partners .logo-img.large img { max-height: 46px; }
}
/* Ressources: the chronological list, which repeats the five publications above, is more compact (point 34). */
.pubs li { padding-block: .6rem; }
.pubs .src { margin-top: .1rem; }
@media (max-width: 560px) {
  /* Footer on a phone: same links, tighter, and a lighter legal paragraph (point 42). */
  .foot { padding-block: var(--s4) var(--s2); }
  .foot-in { row-gap: var(--s3); }
  .foot a { padding-block: .4rem; }
  .foot-legal { margin-top: var(--s3); }
  .foot-legal p { font-size: .75rem; line-height: 1.5; color: #949CA8; }
  .demo-start { padding: .6rem .9rem; font-size: .9375rem; }
}
@media (max-width: 380px) {
  /* Small phones (360 px): logo, language, contact and menu stay on one line (point 10). */
  .masthead-in { column-gap: .5rem; }
  .brand img { width: 108px; }
  .masthead-actions { gap: .35rem; }
  .masthead .lang { padding-inline: .45rem; }
  .btn.small { padding-inline: .65rem; }
}
.logos.projects-row .logo-img.large img { max-height: 64px; }
@media (max-width: 560px) {
  /* Home news on a phone: the picture is a small square, too small for its note; its text alternative keeps the date. */
  .recent .news-item > .thumb .thumb-note { display: none; }
}

/* v0.7 « Horizon net » (Olivier, 15/11/2026) : plus net, même contenu, même logo, mêmes couleurs Prism.
   Deux surfaces sombres, une bande claire pour les logos, titres en Archivo large, jaune réservé aux actions.
   Ces règles complètent celles du dessus et l'emportent sur elles. */
@font-face { font-family: "Archivo W"; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  src: url("fonts/archivo-latin-wdth-wght-normal.woff2") format("woff2"); }

:root {
  --bg: #0E1117; --panel: #151920; --deep: #0A0C11; --black: #07090D;
  --muted: #B3BAC6; --line: rgba(255, 255, 255, .11); --line-strong: rgba(255, 255, 255, .34);
  --paper: #F3F4EF; --paper-ink: #12151B; --paper-muted: #525A66; --paper-line: #DADCD3;
  --r: 8px; --r-s: 5px;
  --t-body: 1.0625rem; --t-small: .9rem;
  --t-h2: clamp(1.9rem, 3.1vw, 2.75rem);
  --s6: 7.5rem;
  font-family: "Archivo W", "Archivo", "Helvetica Neue", Arial, sans-serif;
}
body { line-height: 1.62; }
h2 { max-width: 25ch; }
h1, h2 { font-stretch: 112%; font-weight: 660; letter-spacing: -.03em; line-height: 1.04; }
h3 { font-stretch: 106%; font-weight: 640; }
p { max-width: 62ch; }

/* En-tête : fixe, plus fin, translucide */
.masthead { position: sticky; top: 0; background: rgba(10, 12, 17, .82); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); border-bottom-color: var(--line); }
.masthead-in { min-height: 4.5rem; }
[id] { scroll-margin-top: 5.5rem; }
.brand img { width: 138px; }
.menu { gap: 1.9rem; }
.menu a { font-size: .9375rem; font-weight: 520; color: #E4E7EC; }
.menu .top { padding-block: 1.45rem; }
.menu a:hover, .lang:hover, .sub a:hover, .sub a[aria-current="page"] { color: #fff; }
.menu .top[aria-current] { border-bottom-color: var(--yellow); color: #fff; }
.sub { border-radius: 0 0 var(--r) var(--r); border-top-color: var(--yellow); background: #10131A; }

/* Boutons : le jaune sert à l'action, et seulement à elle */
.btn { border-radius: var(--r-s); font-weight: 660; letter-spacing: -.005em; min-height: 3.1rem; padding: .85rem 1.45rem; transition: background .15s, transform .15s; }
.btn:hover { background: #fff; transform: translateY(-1px); }
.btn.secondary { border: 1px solid var(--line-strong); background: rgba(255, 255, 255, .03); }
.btn.secondary:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .08); }
.btn.small { min-height: 2.6rem; padding: .6rem 1.05rem; }
.textlink { text-decoration-color: var(--line-strong); }
.textlink:hover, .metrics .more a:hover, .end-act p a:hover, .foot a:hover, .crumbs a:hover { color: #fff; text-decoration-color: var(--yellow); }

/* Sections : deux surfaces sombres seulement, séparées par l'espace */
.section.band { background: var(--panel); }
.section.deep { background: var(--bg); }
.intro h2 { max-width: 20ch; }

/* Accueil, l'horizon : le titre et les cubes prennent la scène */
.hero { background: radial-gradient(70% 60% at 82% 100%, rgba(0, 71, 255, .22), transparent 70%), var(--deep); min-height: min(52rem, calc(100vh - 4.5rem)); }
.hero-in { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); padding-top: clamp(3.5rem, 9vh, 6.5rem); flex: 1; }
.hero h1 { font-size: clamp(2.9rem, 5.2vw, 4.9rem); font-stretch: 118%; font-weight: 680; letter-spacing: -.04em; line-height: .98; max-width: 11ch; }
.hero .lead { font-size: clamp(1.15rem, 1.55vw, 1.35rem); max-width: 40ch; color: #DDE1E8; }
.hero-text { gap: 1.9rem; }
.hero-fig { transform: scale(1.06); transform-origin: 100% 60%; }
.hero-fig figcaption { color: #E7ECFF; }
.scene { height: clamp(13rem, 30vh, 19rem); margin-top: -4.5rem; }

/* Projets */
.proof { padding-top: var(--s6); }
.project .media, .photo .frame, .thumb, .refs .ref-pic, .demo video, .cover { border-radius: var(--r); overflow: hidden; }
.project .media { border-bottom: 0; }
.project .photo .frame { border-radius: var(--r); }
.project h3 { margin-top: .9rem; }
.sector { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink); font-weight: 540; }
.sector::before { content: ""; width: .55rem; height: .55rem; background: var(--tone); transform: rotate(45deg); flex: none; }
.feature { gap: var(--s5); }
.feature-text { border-top: 0; padding-top: 0; gap: 1.1rem; }
.feature-text h3 { font-size: clamp(1.9rem, 3vw, 2.6rem); font-stretch: 114%; }
.refs li { border-top: 0; padding-top: 0; }
.photo .badge { border-radius: var(--r-s); }

/* Bande claire : les logos sont chez eux sur fond clair, sans tuiles */
.section.band:has(.logo-groups) { background: var(--paper); color: var(--paper-ink); }
.section.band:has(.logo-groups) p, .section.band:has(.logo-groups) .logo-cap, .section.band:has(.logo-groups) .metrics .note,
.section.band:has(.logo-groups) .logo-group > .note { color: var(--paper-muted); }
.section.band:has(.logo-groups) :is(.metrics dt, .logo-cap strong, .logo-group h3) { color: var(--paper-ink); }
.section.band:has(.logo-groups) .metrics > div { border-top: 1px solid var(--paper-ink); padding-top: 1.25rem; }
.section.band:has(.logo-groups) .metrics .num { color: var(--paper-ink); font-stretch: 118%; font-size: clamp(3rem, 5.4vw, 4.6rem); }
.section.band:has(.logo-groups) .metrics .more a:hover, .section.band:has(.logo-groups) .textlink:hover { color: #000; text-decoration-color: var(--paper-ink); }
.section.band:has(.logo-groups) .textlink { text-decoration-color: var(--paper-ink); }
.section.band:has(.logo-groups) .logo-group h3 { font-size: .95rem; font-weight: 600; color: var(--paper-muted); padding-bottom: .7rem; border-bottom: 1px solid var(--paper-line); }
.section.band:has(.logo-groups) .logo-img { background: #fff; border: 1px solid var(--paper-line); border-radius: var(--r-s); }
.section.band:has(.logo-groups) a.logo:hover .logo-img { border-color: var(--paper-ink); }
.section.band:has(.logo-groups) :focus-visible { outline-color: var(--blue); }
.logo-groups.home { gap: 3rem var(--s5); margin-top: var(--s4); }
.logos { gap: .9rem; }

/* Expertises : trois cartes calmes, la couleur ne marque que le verbe */
.pillars { gap: var(--s3); }
.pillars article { border: 1px solid var(--line); border-top: 1px solid var(--line); border-radius: var(--r); padding: 2rem; background: rgba(255, 255, 255, .03); gap: 1.1rem; }
.pillars h3 { color: var(--ink); font-stretch: 114%; }
.pillars .btn.secondary { border-width: 1px; margin-top: auto; }
.pillars .btn.secondary:hover { border-color: var(--tone); color: var(--tone-text); }

/* Cartes et encadrés : un seul rayon, un seul filet */
.linkcard, .duo .card, .quad > .card, .role, .trio article, .entry, .money, .nudge, .mailbox { border-radius: var(--r); }
.trio article, .entry { border: 1px solid var(--line); border-top: 2px solid var(--tone); background: rgba(255, 255, 255, .03); }
.band :is(.linkcard, .duo .card, .quad > .card), .deep .duo .card { background: rgba(255, 255, 255, .035); }
.linkcard:hover { border-color: var(--line-strong); }
.linkcard:hover h3 { color: #fff; }
.role { background: rgba(255, 255, 255, .045); border: 1px solid var(--line); }
.money { background: rgba(255, 255, 255, .04); border: 1px solid var(--line); border-top: 1px solid var(--line); padding: 2.75rem; }
.money .num { color: var(--ink); font-stretch: 118%; font-size: clamp(3.2rem, 5.6vw, 4.8rem); }
.metrics .num, .facts dt { font-stretch: 116%; }
.flow .n { border-radius: var(--r-s); border-width: 1.5px; }
.deliverables li, .demo-label, .thumb-note { border-radius: 99px; padding-inline: .8rem; }
.keyfacts > div { border-left-width: 1px; }
.plogo { border-radius: var(--r-s); }

/* Pages intérieures : titres en blanc, la couleur du verbe reste sur les repères */
.toned .pagehero h1, .toned h2 { color: var(--ink); }
.toned .pagehero { border-top: 0; }
.pagehero { padding-block: var(--s5) var(--s5); background: radial-gradient(55% 90% at 88% 100%, color-mix(in srgb, var(--tone) 16%, transparent), transparent 70%), var(--deep); border-bottom: 1px solid color-mix(in srgb, var(--tone) 55%, transparent); }
.pagehero h1 { font-size: clamp(2.3rem, 4.2vw, 3.7rem); max-width: 26ch; }
.crumbs { background: var(--deep); }
.crumbs a:hover { text-decoration-color: var(--yellow); }
.bullets li::marker, .demo-steps li::marker { color: var(--muted); }

/* Cas concret et convictions */
.section.case { background: linear-gradient(#17254F, #0B1530); }
.zone { background: var(--bg); padding-inline: max(12px, calc((100vw - 80rem) / 2 + 24px - 3rem)); padding-block: 0 var(--s6); }
.zone::after { display: none; }
.zone > .wrap { position: relative; isolation: isolate; overflow: hidden; max-width: none; margin: 0; padding: 3.5rem 3rem; border-radius: 14px;
  background: linear-gradient(118deg, #0039D6 0%, #2A2FCB 45%, #5B25B8 78%, #9A2A9E 100%); }
.zone > .wrap::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .13; background: url("img/grain-soft.webp"); }
.convictions li { border-top: 1px solid rgba(255, 255, 255, .55); padding-top: 1.25rem; }
.section.case + .zone { padding-top: var(--s6); }

/* Publications, actualités */
.pub-feature { border-top-color: var(--line); }
.meta { color: var(--muted); }
.meta span { color: var(--muted); }

/* Fin de page : l'horizon revient, en écho */
.end { position: relative; background: radial-gradient(60% 140% at 78% 0%, rgba(255, 56, 158, .2), transparent 62%), radial-gradient(50% 120% at 60% 0%, rgba(0, 71, 255, .22), transparent 70%), var(--deep); border-top: 0; padding-block: var(--s6); }
.end::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1.5px; background: linear-gradient(90deg, transparent, rgba(255, 56, 158, .25) 35%, #FFC2E0 78%, rgba(255, 56, 158, .4)); }
.end-text h2 { font-size: clamp(2rem, 3.4vw, 3rem); }
.foot { border-top: 1px solid var(--line); }
.foot .foot-mail { text-decoration-color: var(--line-strong); }

@media (max-width: 860px) {
  :root { --s6: 4.5rem; }
  .hero { min-height: 0; }
  .hero-in { grid-template-columns: minmax(0, 1fr); padding-top: var(--s5); }
  .pagehero h1 { font-size: clamp(2rem, 8.5vw, 2.6rem); }
  h1, h2 { font-stretch: 108%; }
  .hero h1 { font-size: clamp(2rem, 9.3vw, 3.2rem); font-stretch: 112%; max-width: none; }
  .brand img { width: 122px; }
  .hero-fig { transform: none; }
  .scene { margin-top: -2rem; }
  .pillars article { padding: 1.5rem; }
  .zone { padding-inline: 12px; }
  .zone > .wrap { padding: 2rem 1.25rem; }
  .money { padding: 1.75rem; }
}

/* Tablette : les cubes à droite, à leur taille, plutôt que perdus à gauche */
@media (min-width: 561px) and (max-width: 860px) {
  .hero-fig { width: min(100%, 33rem); margin-left: auto; }
  .hero h1 { max-width: 12ch; font-size: 3.6rem; }
}

/* Téléphone et tablette : l'en-tête reste visible, le menu ouvert défile en lui-même */
@media (max-width: 860px), (hover: none) {
  .masthead nav { max-height: calc(100dvh - 5rem); overflow-y: auto; overscroll-behavior: contain; }
  .masthead:has(.menu-toggle:checked) { background: var(--deep); }
  .masthead:has(.menu-toggle:checked) .masthead-in { padding-top: .75rem; }
  .sub { background: none; border-radius: 0; }
}