/* ══════════════════════════════════════════════════════════════════════════
   Ctrl+Alt+Create — charte claire.
   Feuille écrite pour cette charte, non dérivée de la précédente : le fond est
   crème, le contraste vient de la typographie, et les blocs sombres sont des
   rectangles arrondis.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --creme:   #F6F6F3;
  --encre:   #0B0B0B;
  --gris:    #6B6B66;
  --gris-c:  #9B9B94;
  --filet:   #DBDBD4;
  --filet-s: rgba(255,255,255,.14);
  --blanc:   #FFFFFF;
  --bleu:    #0A5CFF;
  --bleu-c:  #3B82FF;
  --t1: #5B95FF; --t2: #8F7DFF; --t3: #2BC0C8; --t4: #F2A33C; --t5: #E07A9B;

  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-ar:      "Noto Sans Arabic", "Geeza Pro", "Segoe UI", Tahoma, sans-serif;

  --wrap: 1320px;
  --gut:  clamp(20px, 4vw, 56px);
  --sect: clamp(54px, 7vw, 110px);

  --fs-hero: clamp(2.6rem, 7.4vw, 6rem);
  --fs-h2:   clamp(1.85rem, 4.8vw, 3.7rem);
  --fs-h3:   clamp(1.06rem, 1.6vw, 1.34rem);
  --fs-kpi:  clamp(2.9rem, 6.4vw, 5rem);
  --fs-eyebrow: .72rem;

  /* Compatibilité avec les gabarits hérités. */
  --ink: var(--encre); --ink-2: #141412; --ink-3: #1D1D1A;
  --paper: var(--creme); --paper-2: #EDEDE6;
  --blue: var(--bleu); --blue-lift: var(--bleu-c); --white: var(--blanc);
  --mute: #3A3A36; --mute-dark: var(--gris);
  --line: var(--filet); --line-dark: var(--filet);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--creme); color: var(--encre);
  font-family: var(--font-body); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: hidden; }
html[lang="ar"] body { font-family: var(--font-ar); }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; margin: 0; }
h1 { font-size: var(--fs-hero); letter-spacing: -.048em; line-height: .92; }
h2 { font-size: var(--fs-h2); letter-spacing: -.035em; line-height: 1.03; }
h3 { font-size: var(--fs-h3); letter-spacing: -.02em; line-height: 1.25; }
p { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut);
  position: relative; z-index: 2; }
.sect { padding-block: var(--sect); }
.mid { text-align: center; }
.hl { color: var(--bleu); }
.ar { display: inline-block; transition: transform .2s; }
a:hover .ar, button:hover .ar { transform: translateX(4px); }
html[dir="rtl"] .ar { transform: scaleX(-1); }
html[dir="rtl"] a:hover .ar { transform: scaleX(-1) translateX(4px); }

.eyebrow { font-size: var(--fs-eyebrow); font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gris); margin-bottom: 22px; }
html[lang="ar"] .eyebrow { letter-spacing: 0; font-size: .86rem; }
.lede { font-size: clamp(.98rem, 1.5vw, 1.16rem); color: #3A3A36; max-width: 62ch; }
.sect-head { margin-bottom: 34px; }
.sect-head.mid { margin-inline: auto; max-width: 46rem; }

/* ── Blocs sombres ────────────────────────────────────────────────────── */
.sect.on-ink, .band-ink, .statement {
  background: var(--encre); color: var(--creme); border-radius: 18px;
  margin: clamp(24px, 3.4vw, 50px) var(--gut); padding-block: clamp(36px, 5vw, 80px);
  position: relative; overflow: hidden; isolation: isolate; }
.sect.on-ink .wrap, .statement .wrap { padding-inline: clamp(18px, 3vw, 46px);
  max-width: calc(var(--wrap) - 2 * var(--gut)); }
.sect.on-ink h1, .sect.on-ink h2, .sect.on-ink h3 { color: var(--creme); }
.sect.on-ink p, .sect.on-ink .lede { color: #C4C4BD; }
.sect.on-ink .eyebrow { color: #8C8C85; }
.sect.on-paper { background: transparent; }

/* Masses de couleur dérivant lentement derrière les blocs sombres. */
.sect.on-ink::before, .sect.on-ink::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(72px);
  opacity: .3; z-index: 0; mix-blend-mode: screen; pointer-events: none; }
.sect.on-ink::before { width: 42%; height: 130%; left: -8%; top: -30%;
  background: var(--t1); animation: derive-a 30s ease-in-out infinite alternate; }
.sect.on-ink::after { width: 34%; height: 120%; right: -6%; top: -14%;
  background: var(--t2); animation: derive-b 38s ease-in-out infinite alternate; }
@keyframes derive-a { to { transform: translate(22%, 16%) scale(1.18); } }
@keyframes derive-b { to { transform: translate(-18%, 20%) scale(.86); } }

/* ── Révélations au défilement ────────────────────────────────────────── */
.rv { opacity: 0; transform: translateY(22px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.16,1,.3,1); }
.rv.on { opacity: 1; transform: none; }
html:not(.js) .rv { opacity: 1; transform: none; }

/* ── Boutons ──────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px;
  border: 1px solid var(--encre); border-radius: 10px; color: var(--encre);
  font-size: .76rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  cursor: pointer; background: none; transition: background .18s, color .18s,
  transform .18s; }
html[lang="ar"] .btn { letter-spacing: 0; font-size: .9rem; }
.btn:hover { background: var(--encre); color: var(--creme); transform: translateY(-2px); }
.btn-p { background: var(--encre); color: var(--creme); }
.btn-p:hover { background: var(--bleu); border-color: var(--bleu); }
.on-ink .btn { border-color: rgba(255,255,255,.42); color: var(--creme); }
.on-ink .btn:hover { background: var(--creme); color: var(--encre); }
.on-ink .btn-p { background: var(--creme); color: var(--encre); border-color: var(--creme); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 14px 20px;
  background: var(--bleu); color: #fff; font-weight: 800; }
.skip:focus { left: 0; }

/* ── En-tête ──────────────────────────────────────────────────────────── */
.hdr { position: sticky; top: 0; z-index: 40; background: rgba(246,246,243,.9);
  backdrop-filter: blur(10px); border-block-end: 1px solid var(--filet); }
.hdr-in { display: flex; align-items: center; gap: 22px; height: 68px;
  max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.mark { font-family: var(--font-display); font-weight: 800; font-size: 1.02rem;
  letter-spacing: -.02em; color: var(--encre); }
.mark span { color: var(--bleu); }
.hdr-end { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }
.lang { display: flex; gap: 2px; }
.lang a { padding: 7px 10px; border-radius: 7px; font-size: .7rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.lang a:hover, .lang a[aria-current] { background: var(--encre); color: var(--creme); }
.hdr-cta { display: inline-flex; align-items: center; padding: 11px 20px;
  border-radius: 9px; background: var(--encre); color: var(--creme);
  font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.hdr-cta:hover { background: var(--bleu); }
html[lang="ar"] .hdr-cta, html[lang="ar"] .lang a { letter-spacing: 0; font-size: .86rem; }
.burger { width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--filet); border-radius: 9px; background: none; cursor: pointer; }
.burger { flex-direction: column; gap: 3px; }
.burger span { display: block; width: 19px; height: 2px; border-radius: 2px;
  background: var(--encre); }

/* ── Menu tiroir ──────────────────────────────────────────────────────── */
.nav-back { position: fixed; inset: 0; z-index: 45; background: rgba(11,11,11,.45);
  backdrop-filter: blur(4px); }
.nav-back[hidden], .drawer[hidden] { display: none; }
.drawer { position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 46;
  width: min(460px, 100vw); background: var(--creme); overflow-y: auto;
  border-inline-start: 1px solid var(--filet); }
.drawer-in { padding: 74px 34px 34px; display: flex; flex-direction: column; min-height: 100%; }
.drawer-x { position: absolute; top: 18px; inset-inline-end: 20px; width: 42px; height: 42px;
  border: 1px solid var(--filet); border-radius: 9px; background: none; color: var(--encre);
  font-size: 1.6rem; line-height: 1; cursor: pointer; }
.drawer-x:hover { border-color: var(--encre); }
.nav { list-style: none; margin: 0; padding: 0; }
.nav-grp { border-block-end: 1px solid var(--filet); }
.nav-a, .nav-head { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; width: 100%; padding: 20px 0; background: none; border: 0; cursor: pointer;
  font-family: var(--font-display); font-weight: 800; font-size: 1.02rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--encre); text-align: start; }
html[lang="ar"] .nav-a, html[lang="ar"] .nav-head { letter-spacing: 0; }
.nav-home .nav-a { justify-content: flex-start; padding: 16px 0; }
.nav-home svg { width: 24px; height: 24px; flex: none; stroke: currentColor; fill: none;
  stroke-width: 1.7; }
.chev { width: 15px; height: 15px; flex: none; stroke: currentColor; fill: none;
  stroke-width: 2; transition: transform .22s; }
.nav-head[aria-expanded="true"] .chev { transform: rotate(180deg); }
.mega { list-style: none; margin: 0; padding: 0 0 16px; }
.mega a { display: block; padding: 12px 0 12px 16px; border-inline-start: 2px solid var(--filet); }
.mega a:hover { border-color: var(--bleu); }
.m-desc { display: block; font-size: .8rem; font-weight: 400; letter-spacing: 0;
  text-transform: none; color: var(--gris); margin-top: 4px; }
.drawer-act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-top: auto; padding-top: 28px; }
.drawer-icons { display: flex; gap: 9px; margin-inline-start: auto; }
.drawer-icons .soc { width: 44px; height: 44px; }
.drawer-icons button.soc { cursor: pointer; }
.soc { display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 1px solid var(--filet); border-radius: 9px;
  color: var(--gris); }
.soc:hover { border-color: var(--encre); color: var(--encre); }
.soc svg { width: 18px; height: 18px; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero { padding-block: clamp(58px, 10vw, 140px) clamp(34px, 5vw, 72px); }
.hero-grid { display: grid; gap: clamp(28px, 4vw, 52px); }
.hero h1 em { font-style: normal; color: var(--bleu); }
.hero p { margin-top: 24px; max-width: 56ch; font-size: clamp(.98rem, 1.6vw, 1.16rem);
  color: #3A3A36; }
.globe { display: none; }

/* ── Chiffres clés ────────────────────────────────────────────────────── */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 34px 24px; list-style: none; margin: clamp(46px, 6vw, 88px) 0 0; padding: 0; }
.kpis li { text-align: center; }
.kpi { text-align: center; }
.kpi-n { display: block; font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-kpi); letter-spacing: -.05em; line-height: .92;
  font-variant-numeric: tabular-nums; color: var(--encre); }
.statement .kpi-n, .on-ink .kpi-n { color: #fff; }
.kpi-l { display: block; margin-top: 12px; font-size: .72rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; color: var(--gris); }
.statement .kpi-l, .on-ink .kpi-l { color: rgba(255,255,255,.76); }
html[lang="ar"] .kpi-l { letter-spacing: 0; font-size: .86rem; }

/* ── Grilles de cartes ────────────────────────────────────────────────── */
.aud, .studios, .plats, .hubs, .posts, .people, .tp-grid, .sv-grid, .pk-grid,
.pl-grid, .ss-grid, .kai-grid, .models, .tp-steps, .tp-stages {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 24px; list-style: none; margin: 34px 0 0; padding: 0; }
.tp-card, .pl-card, .pk-card, .hub-c, .ss-card, .sv-group, .ec-door, .plat, .st, .tp {
  background: var(--blanc); border: 1px solid var(--filet); border-radius: 12px;
  padding: 26px; transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .2s; }
.tp-card:hover, .pl-card:hover, .hub-c:hover, .ss-card:hover, .ec-door:hover,
.plat:hover, .st:hover { transform: translateY(-5px); border-color: var(--encre); }
.on-ink .tp-card, .on-ink .ss-card, .on-ink .plat, .on-ink .st, .on-ink .hub-c {
  background: rgba(255,255,255,.05); border-color: var(--filet-s); }
.on-ink .tp-card h3, .on-ink .ss-card h3, .on-ink .plat h3, .on-ink .st h3 { color: var(--creme); }
.on-ink .tp-card p, .on-ink .plat p, .on-ink .st p { color: #C4C4BD; }
.role, .ss-role, .oc-sec { font-size: .74rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--bleu); margin-top: 7px; }
html[lang="ar"] .role, html[lang="ar"] .ss-role { letter-spacing: 0; font-size: .88rem; }
.tp-card p, .pl-card p, .plat p, .st p, .hub-c p { margin-top: 13px; font-size: .92rem;
  color: #3A3A36; }
.tp-num { font-family: var(--font-display); font-weight: 800; font-size: 2rem;
  color: var(--bleu); letter-spacing: -.04em; }
.tp-head { margin-bottom: 30px; }
.tp-h2 { font-size: var(--fs-h2); letter-spacing: -.035em; line-height: 1.03; }
.tp-after, .tp-notice, .hub-note, .org-hint, .fld-hint { margin-top: 20px;
  font-size: .86rem; color: var(--gris); }
.tp-cta { margin-top: clamp(40px, 6vw, 80px); text-align: center; }
.tp-cta h2 { margin-inline: auto; max-width: 22ch; }
.tp-cta p { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: center; }
.tp-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; list-style: none;
  padding: 0; }
.tp-tags span { display: inline-block; font-size: .76rem; font-weight: 600; padding: 5px 12px;
  border: 1px solid var(--filet); border-radius: 999px; background: #FAFAF7; }
.tp-sect { padding-block: var(--sect); }
.tp-sect + .tp-sect { border-block-start: 1px solid var(--filet); }
.ss-n, .pl-list b, .index-list b { font-weight: 800; }
.ss-n b { color: var(--bleu); font-family: var(--font-display); font-size: 1.4rem; }
.go, .pk-go, .oc-url { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  font-size: .74rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--bleu); }
.ic { width: 22px; height: 22px; stroke: var(--bleu); fill: none; stroke-width: 1.6; }
.step, .flow-s { text-align: center; }
.ring { display: inline-grid; place-items: center; width: 54px; height: 54px;
  border: 1px solid var(--filet); border-radius: 50%; background: var(--blanc);
  margin-bottom: 16px; }
.ring svg { width: 22px; height: 22px; stroke: var(--bleu); fill: none; stroke-width: 1.6; }
.on-ink .ring { background: rgba(255,255,255,.06); border-color: var(--filet-s); }
.flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 26px; margin-top: 36px; }
.st-logo { width: auto; margin-bottom: 18px; object-fit: contain; }
.st-logo-solal { height: 30px; } .st-logo-inaya { height: 46px; }
.st-logo-limitless { height: 34px; } .st-logo-allblue { height: 26px; }
.st-logo-maje { height: 42px; }
.plat-parent, .pl-parent { font-size: .64rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gris); margin-bottom: 10px; padding-bottom: 9px;
  border-block-end: 1px solid var(--filet); }
.plat-child, .pl-child { border-style: dashed; }
.pl-wide { grid-column: span 2; }
.kai-c { padding: 19px 0; border-block-start: 1px solid var(--filet); }
.kai-c b { display: block; font-weight: 800; font-size: 1.02rem; }
.kai-c span { display: block; font-size: .88rem; color: #3A3A36; margin-top: 6px; }
.on-ink .kai-c { border-color: var(--filet-s); }
.on-ink .kai-c b { color: var(--creme); }
.on-ink .kai-c span { color: #C4C4BD; }
@media (max-width: 900px) { .pl-wide { grid-column: span 1; } }

/* ── Explorateur d'architecture ───────────────────────────────────────── */
.org { margin-top: 34px; }
.org-stage { position: relative; min-height: 340px; }
.org-card { background: rgba(255,255,255,.06); border: 1px solid var(--filet-s);
  border-radius: 12px; padding: 20px; color: var(--creme); }
.org-card-x { position: absolute; top: 12px; inset-inline-end: 14px; width: 32px; height: 32px;
  border: 1px solid var(--filet-s); border-radius: 7px; background: none; color: var(--creme);
  cursor: pointer; }
.oc-name { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem;
  letter-spacing: -.02em; }
.oc-loc { font-size: .82rem; color: var(--gris-c); margin-top: 5px; }
.oc-bl { font-size: .9rem; color: #C4C4BD; margin-top: 12px; }
.org-tools { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.org-more { margin-top: 26px; }

/* ── Carte du monde ───────────────────────────────────────────────────── */
.wm-wrap { margin-top: 30px; border: 1px solid var(--filet-s); border-radius: 14px;
  padding: 18px; background: #101B36; }
.worldmap { width: 100%; height: auto; }
.wm-grat path { fill: none; stroke: #24334f; stroke-width: 1; }
.wm-land path { fill: #24334f; stroke: #4C6796; stroke-width: 1; }
.wm-open { fill: var(--bleu-c); } .wm-soon { fill: #7C879E; }
.wm-halo { fill: var(--bleu-c); opacity: .22; }
.wm-dot { r: 4; } .wm-city { font-size: 11px; fill: #C9D2E4; }
.wm-key { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
  margin: 16px 0 0; font-size: .84rem; color: #C9D2E4; }
.wm-k { display: inline-block; width: 11px; height: 11px; border-radius: 50%; }
.wm-k-open { background: var(--bleu-c); } .wm-k-soon { background: #7C879E; }
.pl-list { list-style: none; margin: 34px 0 0; padding: 0; columns: 2; column-gap: 44px; }
.pl-list li { break-inside: avoid; display: flex; align-items: baseline; gap: 12px;
  padding: 13px 0; border-block-end: 1px solid var(--filet); }
.pl-list i { font-style: normal; font-size: .78rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--bleu); }
.pl-list .clock, .clock { margin-inline-start: auto; font-variant-numeric: tabular-nums;
  font-weight: 700; direction: ltr; color: var(--encre); }
.pl-soon b { color: var(--gris); } .pl-soon .clock { opacity: .55; }
.reg, .coord { font-size: .82rem; color: var(--gris); }
@media (max-width: 760px) { .pl-list { columns: 1; } }

/* ── Photographies ────────────────────────────────────────────────────── */
.board { margin-top: 34px; overflow: hidden; border-radius: 14px; }
.board img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain;
  background: #EFEFE9; transform: scale(1.04);
  animation: zoom 26s ease-in-out infinite alternate; }
@keyframes zoom { to { transform: scale(1); } }
.board figcaption { margin-top: 14px; font-size: .86rem; color: var(--gris);
  text-align: center; }
.person { text-align: start; }
.person .ph { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover;
  object-position: 50% 0; border-radius: 11px; filter: grayscale(1) contrast(1.04);
  transition: filter .5s ease, transform .55s cubic-bezier(.16,1,.3,1); }
.person:hover .ph, .person.on .ph { filter: none; transform: scale(1.03); }
.p-body { margin-top: 13px; }
.p-ceo { font-size: .8rem; color: var(--gris); margin-top: 3px; }

/* ── Articles ─────────────────────────────────────────────────────────── */
.art { padding-block: clamp(40px, 6vw, 84px); }
.art-head { max-width: 62rem; }
.art-head h1 { margin: 14px 0 18px; font-size: clamp(2rem, 5vw, 3.5rem); }
.art-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: .78rem;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
html[lang="ar"] .art-meta { letter-spacing: 0; }
.crumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gris); margin-bottom: 26px; }
html[lang="ar"] .crumb { letter-spacing: 0; }
.art-body { max-width: 40rem; font-size: 1.06rem; }
.art-body p { margin-top: 22px; }
.art-body h2 { margin-top: 46px; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.art-body ul { margin-top: 20px; padding-inline-start: 22px; }
.art-body li { margin-top: 9px; }
blockquote { margin: 34px 0; padding-inline-start: 22px;
  border-inline-start: 3px solid var(--encre); font-family: var(--font-display);
  font-weight: 800; font-size: clamp(1.15rem, 2.2vw, 1.5rem); letter-spacing: -.02em;
  line-height: 1.3; }
.art-hero, .art-fig { margin: clamp(28px, 4vw, 44px) 0; }
.art-hero img, .art-fig img { width: 100%; height: auto; aspect-ratio: var(--ar, 3 / 2);
  object-fit: contain; background: #EFEFE9; border: 1px solid var(--filet);
  border-radius: 12px; }
.art-hero figcaption, .art-fig figcaption { margin-top: 13px; font-size: .86rem;
  color: var(--gris); text-align: center; }
.art-next { margin-top: 60px; padding-top: 34px; border-block-start: 1px solid var(--filet); }
.post { display: block; padding-top: 20px; border-block-start: 2px solid var(--encre);
  background: none; border-inline: 0; border-block-end: 0; border-radius: 0;
  transition: transform .3s cubic-bezier(.16,1,.3,1); }
.post:hover { transform: translateY(-6px); }
.post h3 { margin: 13px 0 9px; font-size: 1.16rem; }
.post p { font-size: .89rem; color: var(--gris); }
.post-img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  object-position: 50% 0; border-radius: 8px; margin-bottom: 16px; }
.post-img-on { padding-top: 0; }
.tag { font-size: .64rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
  color: var(--bleu); }
html[lang="ar"] .tag { letter-spacing: 0; font-size: .8rem; }
.meta { font-size: .74rem; color: var(--gris); margin-top: 6px; }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 48px;
  padding-top: 26px; border-block-start: 1px solid var(--filet); }
.share-l { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gris); margin-inline-end: 6px; }
html[lang="ar"] .share-l { letter-spacing: 0; }
.share-b { display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border: 1px solid var(--filet); border-radius: 9px;
  background: none; color: var(--gris); cursor: pointer; transition: all .16s; }
.share-b:hover, .share-b.is-done { border-color: var(--encre); color: var(--encre);
  background: var(--blanc); }
.share-b svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.share-copy { font: inherit; }
.press-kit { margin-top: 40px; }
.pk-figs { display: flex; gap: 10px; margin-top: 14px; }
.pk-figs img { width: 54px; height: 80px; object-fit: cover; border-radius: 6px; }
.index-list { list-style: none; margin: 26px 0 0; padding: 0; }
.index-list li { padding: 14px 0; border-block-end: 1px solid var(--filet); }

/* ── Formulaires ──────────────────────────────────────────────────────── */
.form-panel { background: var(--blanc); border: 1px solid var(--filet); border-radius: 14px;
  padding: clamp(24px, 3vw, 40px); }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0 16px; }
.fld { margin-bottom: 18px; }
.fld label { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gris); margin-bottom: 8px; }
html[lang="ar"] .fld label { letter-spacing: 0; font-size: .84rem; }
.fld input, .fld select, .fld textarea { width: 100%; font: inherit; font-size: .96rem;
  padding: 13px 15px; border: 1px solid #D8D8D0; border-radius: 9px; background: var(--blanc);
  color: var(--encre); }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: 2px solid var(--bleu);
  outline-offset: 1px; }
.fld input[type="file"] { padding: 11px 12px; font-size: .88rem; cursor: pointer; }
.fld input[type="file"]::file-selector-button { margin-inline-end: 12px; padding: 7px 14px;
  border: 1px solid var(--filet); border-radius: 5px; background: none; color: var(--encre);
  font: inherit; font-size: .82rem; cursor: pointer; }
.form-msg { margin-top: 14px; font-size: .88rem; }
.consent { display: flex; gap: 10px; font-size: .84rem; color: var(--gris); }
.progress { height: 3px; background: var(--filet); border-radius: 2px; overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--bleu); }

/* ── Bandeau cookies, lettre d'information, accessibilité ─────────────── */
.cookie { display: none; position: fixed; inset-inline: 16px; bottom: 16px; z-index: 70; max-width: 620px;
  margin-inline: auto; background: var(--blanc); color: var(--encre);
  border: 1px solid var(--filet); border-radius: 14px; padding: 22px 24px;
  box-shadow: 0 20px 48px rgba(0,0,0,.14); }
.cookie h3 { font-size: 1.06rem; margin-bottom: 8px; }
.cookie p { font-size: .88rem; color: var(--gris); }
.cookie-act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.cookie-prefs { display: none; margin-top: 16px; gap: 10px; }
.cookie-row, .a11y-row { display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 10px 0; border-block-start: 1px solid var(--filet); }
.tgl { position: relative; width: 44px; height: 24px; border-radius: 999px;
  background: var(--filet); border: 0; cursor: pointer; flex: none; }
.tgl[aria-checked="true"] { background: var(--bleu); }
.tgl::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; }
.tgl[aria-checked="true"]::after { transform: translateX(20px); }
html[dir="rtl"] .tgl[aria-checked="true"]::after { transform: translateX(-20px); }
.nl-back { display: none; position: fixed; inset: 0; z-index: 80;
  background: rgba(11,11,11,.5); backdrop-filter: blur(4px);
  place-items: center; padding: 20px; }
.nl { background: var(--blanc); border-radius: 16px; padding: clamp(26px, 4vw, 44px);
  max-width: 480px; width: 100%; position: relative; }
.nl h3 { font-size: 1.4rem; margin-bottom: 10px; }
.nl p { font-size: .92rem; color: var(--gris); }
.nl-close { position: absolute; top: 14px; inset-inline-end: 16px; width: 36px; height: 36px;
  border: 1px solid var(--filet); border-radius: 8px; background: none; cursor: pointer;
  font-size: 1.4rem; line-height: 1; color: var(--gris); }
.a11y-btn { position: fixed; inset-inline-end: 18px; bottom: 18px; z-index: 60;
  width: 48px; height: 48px; border: 1px solid var(--filet); border-radius: 50%;
  background: var(--blanc); color: var(--encre); cursor: pointer;
  box-shadow: 0 10px 26px rgba(0,0,0,.12); display: grid; place-items: center; }
.a11y-btn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.a11y-panel { display: none; position: fixed; inset-inline-end: 18px; bottom: 78px; z-index: 61;
  width: min(320px, calc(100vw - 36px)); background: var(--blanc);
  border: 1px solid var(--filet); border-radius: 14px; padding: 22px;
  box-shadow: 0 20px 48px rgba(0,0,0,.14); }

.a11y-reset { margin-top: 14px; font-size: .8rem; color: var(--gris); background: none;
  border: 0; cursor: pointer; text-decoration: underline; }
.todo { color: #B4761A; font-weight: 700; }

/* ── Pied de page ─────────────────────────────────────────────────────── */
.ftr { background: var(--encre); color: var(--creme); margin-top: clamp(40px, 6vw, 80px); }
.ftr-edge { height: 3px; background: linear-gradient(90deg, var(--t1), var(--t2),
  var(--t3), var(--t4), var(--t5)); }
.ftr-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 34px; padding-block: clamp(40px, 5vw, 70px); }
.ftr h4 { font-size: .7rem; letter-spacing: .13em; text-transform: uppercase;
  color: #8C8C85; margin-bottom: 14px; }
html[lang="ar"] .ftr h4 { letter-spacing: 0; font-size: .84rem; }
.ftr ul { list-style: none; margin: 0; padding: 0; }
.ftr li { margin-bottom: 10px; }
.ftr a { color: #C4C4BD; font-size: .9rem; }
.ftr a:hover { color: var(--creme); }
.ftr-brand .mark { color: var(--creme); }
.ftr-soc { display: flex; gap: 9px; margin-top: 16px; }
.ftr-soc .soc { border-color: var(--filet-s); color: #C4C4BD; }
.ftr-soc .soc:hover { border-color: var(--creme); color: var(--creme); }
.ftr-nl .row { display: flex; gap: 8px; margin-top: 12px; }
.ftr-cities { font-size: .84rem; color: #8C8C85; }
.ftr-bot { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center;
  padding-block: 22px; border-block-start: 1px solid var(--filet-s); font-size: .8rem;
  color: #8C8C85; }
.ftr-lang { display: flex; gap: 10px; margin-inline-start: auto; }
.ftr-credit, .credits { font-size: .8rem; color: #8C8C85; }

/* ── Divers ───────────────────────────────────────────────────────────── */
.final { text-align: center; }
.sg-code, .sg-res { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .84rem; }
.hub-c .reg { margin-top: 8px; }
.oc-url { word-break: break-all; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  .sect.on-ink::before, .sect.on-ink::after, .board img { animation: none !important; }
  .post:hover, .tp-card:hover, .pl-card:hover, .person:hover .ph { transform: none; }
}
.wm-cities { pointer-events: none; }
.pl-open b { color: var(--encre); }

/* ── Composants pilotés par data-open ─────────────────────────────────── */
/* Le script bascule cet attribut : sans ces règles, ils restent affichés en
   permanence et leur bouton de fermeture ne produit aucun effet visible. */
.cookie[data-open="true"] { display: block; }
.cookie-prefs[data-open="true"] { display: grid; }
.nl-back[data-open="true"] { display: grid; }
.a11y-panel[data-open="true"] { display: block; }

/* ── Hero de la charte claire ─────────────────────────────────────────── */
.wordmark { font-size: clamp(2.9rem, 12.4vw, 10.6rem); letter-spacing: -.05em;
  line-height: .86; }
.wordmark em { font-style: normal; color: var(--bleu); }
.hero-est { display: flex; flex-wrap: wrap; gap: 12px 38px;
  margin-top: clamp(24px, 3.6vw, 48px); font-weight: 800; letter-spacing: .14em;
  font-size: clamp(.71rem, 1.35vw, .88rem); text-transform: uppercase; color: var(--gris); }
html[lang="ar"] .hero-est { letter-spacing: 0; font-size: .88rem; }
.hero-claim { margin-top: clamp(28px, 3.6vw, 50px); max-width: 24ch;
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em;
  line-height: 1.06; font-size: clamp(1.45rem, 4vw, 3rem); }
.hero-sub { margin-top: 24px; }
.hero .hero-cta { margin-top: 32px; }

/* ── Galaxie : le groupe au centre, les studios en orbite ─────────────── */
.galaxie { position: relative; height: min(80vw, 540px); margin-top: 38px; }
.gx-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 5; text-align: center; }
.gx-core b { display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(.92rem, 2vw, 1.4rem); letter-spacing: -.03em; color: var(--creme); }
.gx-core span { display: block; font-size: .64rem; letter-spacing: .14em;
  text-transform: uppercase; color: #8C8C85; margin-top: 5px; }
html[lang="ar"] .gx-core span { letter-spacing: 0; font-size: .78rem; }
.ring-o { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  border: 1px solid rgba(255,255,255,.10); border-radius: 50%; }
.ring-0 { width: 34%; height: 34%; } .ring-1 { width: 50%; height: 50%; }
.ring-2 { width: 66%; height: 66%; } .ring-3 { width: 82%; height: 82%; }
.ring-4 { width: 98%; height: 98%; }
.orb { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  animation: tourne var(--d) linear infinite; }
.orb-0 { width: 34%; height: 34%; } .orb-1 { width: 50%; height: 50%; }
.orb-2 { width: 66%; height: 66%; } .orb-3 { width: 82%; height: 82%; }
.orb-4 { width: 98%; height: 98%; }
@keyframes tourne { to { transform: translate(-50%, -50%) rotate(360deg); } }
.orb-dot { position: absolute; left: 50%; top: -11px; transform: translateX(-50%);
  width: 22px; height: 22px; border-radius: 50%; background: var(--t); border: 0;
  padding: 0; box-shadow: 0 0 24px var(--t); cursor: pointer; transition: transform .25s; }
.orb-dot:hover, .orb-dot.on { transform: translateX(-50%) scale(1.45); }
.orb-dot b { position: absolute; inset-inline-start: 30px; top: 0; white-space: nowrap;
  font-size: .77rem; font-weight: 800; color: var(--creme);
  animation: contre var(--d) linear infinite; }
@keyframes contre { to { transform: rotate(-360deg); } }
.galaxie:hover .orb, .galaxie:hover .orb-dot b,
.galaxie.stop .orb, .galaxie.stop .orb-dot b { animation-play-state: paused; }
.gx-pan { margin-top: 26px; border-block-start: 1px solid var(--filet-s); padding-top: 24px; }
.gx-h { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; }
.gx-h b { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem;
  letter-spacing: -.03em; color: var(--t); }
.gx-h em { font-style: normal; font-size: .72rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: #8C8C85; }
html[lang="ar"] .gx-h em { letter-spacing: 0; font-size: .86rem; }
.gx-grp { margin-bottom: 16px; }
.gx-grp u { display: block; text-decoration: none; font-size: .7rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--t); margin-bottom: 8px; }
html[lang="ar"] .gx-grp u { letter-spacing: 0; font-size: .84rem; }
.gx-grp span { display: inline-block; font-size: .86rem; font-weight: 600; color: #D8D8D2;
  padding: 5px 12px; margin: 0 6px 6px 0; border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px; }
@media (max-width: 600px) { .orb-dot b { font-size: .64rem; inset-inline-start: 24px; } }
@media (prefers-reduced-motion: reduce) { .orb, .orb-dot b { animation: none !important; } }
/* ── Startups à la une ────────────────────────────────────────────────── */
.vits { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 24px; margin-top: 34px; }
.vit { border-block-start: 3px solid var(--t); padding-top: 19px;
  transition: transform .3s cubic-bezier(.16,1,.3,1); }
.vit:hover { transform: translateY(-6px); }
.vit h3 { font-size: 1.28rem; }
.vit .role { color: var(--t); }

/* ── Colonnes à filet fin ─────────────────────────────────────────────── */
/* Les publics et la chaîne de valeur se lisent mieux en colonnes séparées
   par un filet qu'en cartes encadrées : moins de bordures, plus d'air. */
.aud, .flow { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0 40px; margin-top: 40px; }
.aud > *, .flow-s { display: block; padding: 22px 0 0;
  border-block-start: 1px solid var(--filet); background: none; border-inline: 0;
  border-block-end: 0; border-radius: 0; text-align: start; }
.aud > *:hover, .flow-s:hover { transform: none; border-color: var(--encre); }
.aud h3, .flow-s h3 { margin-top: 10px; font-size: 1.12rem; }
.aud p, .flow-s p { margin-top: 8px; font-size: .92rem; color: var(--gris); }
.aud .go { margin-top: 12px; }
.flow-s .ring { display: none; }
/* La chaîne de valeur porte ses étapes numérotées. */
.flow { counter-reset: etape; }
.flow-s { counter-increment: etape; }
.flow-s::before { content: "0" counter(etape); display: block; font-family: var(--font-display);
  font-weight: 800; font-size: .8rem; letter-spacing: .1em; color: var(--bleu); }
.on-ink .aud > *, .on-ink .flow-s { border-block-start-color: var(--filet-s); }
.on-ink .aud p, .on-ink .flow-s p { color: #9B9B94; }

/* ── Lisibilité des cartes de ville sur fond sombre ───────────────────── */
.on-ink .hub-c .reg, .on-ink .hub-c .coord, .on-ink .hub-c .kpi-l { color: #9B9B94; }
.on-ink .hub-c h3 { color: var(--creme); }
.on-ink .hub-c .clock { color: var(--creme); font-size: 1.16rem; }
.hub-c .clock { display: block; margin: 2px 0 8px; font-family: var(--font-display);
  font-weight: 800; font-size: 1.16rem; letter-spacing: -.02em; }
.hub-c .coord { font-variant-numeric: tabular-nums; }

/* ── Pictogrammes des publics ─────────────────────────────────────────── */
/* Traits fins et bleu unique : ils flottaient. Chacun prend une pastille
   pleine à la couleur d'un studio, et son tracé s'épaissit. */
.aud .ic { width: 42px; height: 42px; padding: 10px; border-radius: 12px;
  background: var(--t, var(--bleu)); stroke: #fff; stroke-width: 2;
  margin-bottom: 16px; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.aud > *:nth-child(1) .ic { --t: var(--t1); }
.aud > *:nth-child(2) .ic { --t: var(--t2); }
.aud > *:nth-child(3) .ic { --t: var(--t3); }
.aud > *:nth-child(4) .ic { --t: var(--t4); }
.aud > *:nth-child(5) .ic { --t: var(--t5); }
.aud > *:hover .ic { transform: translateY(-3px) rotate(-4deg); }
.aud > *:nth-child(1) .go { color: var(--t1); }
.aud > *:nth-child(2) .go { color: var(--t2); }
.aud > *:nth-child(3) .go { color: var(--t3); }
.aud > *:nth-child(4) .go { color: var(--t4); }
.aud > *:nth-child(1):hover { border-block-start-color: var(--t1); }
.aud > *:nth-child(2):hover { border-block-start-color: var(--t2); }
.aud > *:nth-child(3):hover { border-block-start-color: var(--t3); }
.aud > *:nth-child(4):hover { border-block-start-color: var(--t4); }
@media (prefers-reduced-motion: reduce) { .aud > *:hover .ic { transform: none; } }

/* ── Cartes de studio : alignement par le haut ────────────────────────── */
/* Le surtitre tient sur une ou deux lignes selon le studio, ce qui décalait
   les noms. Chaque carte devient une colonne dont les blocs s'alignent. */
.studios { align-items: stretch; }
.st { display: flex; flex-direction: column; }
.st .st-logo { height: 40px; margin-bottom: 20px; }
.st .role { min-height: 2.6em; margin-top: 0; display: flex; align-items: flex-end; }
.st h3 { margin-top: 12px; }
.st p { flex: 1 1 auto; }
.st .ar { margin-top: 18px; align-self: flex-start; }

/* ── Phrase mise en avant ─────────────────────────────────────────────── */
/* Un paragraphe perdu dans une bande bleue : la phrase devient un moment
   typographique, coupée en deux temps, avec la bascule mise en valeur. */
.statement { background: var(--encre); color: var(--creme); text-align: center; }
.statement::before, .statement::after { opacity: .34; }
.statement p { font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.5rem, 4.4vw, 3.4rem); letter-spacing: -.035em; line-height: 1.08;
  max-width: 20ch; margin-inline: auto; color: var(--creme); }
.statement .st-2 { display: block; margin-top: .35em; color: var(--bleu-c); }

/* ── Corrections d'ergonomie ──────────────────────────────────────────── */
/* Traits du menu resserrés. */
.burger { flex-direction: column; gap: 2px; }
.burger span { width: 18px; height: 2px; }

/* Le bouton d'accessibilité passait sous le menu ouvert. */
.a11y-btn { z-index: 44; }
.drawer[data-open="true"] ~ .a11y-btn,
body:has(.drawer:not([hidden])) .a11y-btn { opacity: 0; pointer-events: none; }

/* Deux blocs sombres consécutifs : le second prend un bleu nuit, plus une
   respiration entre eux, pour qu'on lise deux sections et non un seul pavé. */
#studios.sect.on-ink { background: #101B36; margin-top: clamp(30px, 4vw, 60px); }
#studios.sect.on-ink::before { background: var(--t3); }
#studios.sect.on-ink::after { background: var(--t2); }

/* Cartes de studio : le vide en tête venait du logo réservé sans être posé. */
.st { padding-top: 24px; }
.st .st-logo { display: none; }
.st .role { min-height: 0; margin-bottom: 6px; }
.st h3 { margin-top: 0; font-size: 1.42rem; }
/* Le nom du studio porte un filet à sa couleur, plus lisible qu'un logo blanc
   réduit à trente pixels. */
.studios > *:nth-child(1) { --t: var(--t1); }
.studios > *:nth-child(2) { --t: var(--t2); }
.studios > *:nth-child(3) { --t: var(--t3); }
.studios > *:nth-child(4) { --t: var(--t4); }
.studios > *:nth-child(5) { --t: var(--t5); }
/* La carte garde son filet coloré, mais son texte respire de tous les côtés. */
.st { border-block-start: 3px solid var(--t, var(--bleu)); border-inline: 0;
  border-block-end: 0; border-radius: 0; background: none;
  padding: 22px clamp(16px, 1.6vw, 24px) 4px; }
.st:hover { background: rgba(255,255,255,.04); border-color: var(--t); }
#studios .studios { padding-inline: 0; gap: 20px clamp(16px, 2vw, 30px); }
.st .role { color: var(--t); }

/* ── Corrections d'usage ──────────────────────────────────────────────── */
/* Les orbites sont des boîtes carrées empilées : la plus grande interceptait
   les clics destinés aux plus petites. Seule la pastille reste cliquable. */
.orb, .ring-o, .galaxie { pointer-events: none; }
.orb-dot { pointer-events: auto; }

/* Les cartes des studios touchaient le bord du bloc sombre. */
.sect.on-ink .wrap { padding-inline: clamp(22px, 3.6vw, 52px); }
#studios .studios { padding-inline: 2px; }

/* Menu sandwich : quatre traits équidistants. Le quatrième est ajouté par le
   style, le balisage n'en portant que trois, et il suit le même écart. */
.burger { display: flex; flex-direction: column; justify-content: center;
  align-items: center; gap: 3px; }
.burger span, .burger::after { content: ""; display: block; width: 19px; height: 2px;
  border-radius: 2px; background: var(--encre); box-shadow: none; }

/* Bouton Kaïro dans l'en-tête, à côté de Contact. */
.hdr-kairo { display: inline-flex; align-items: center; padding: 11px 18px;
  border-radius: 9px; border: 1px solid var(--encre); color: var(--encre);
  font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.hdr-kairo:hover { background: var(--encre); color: var(--creme); }
html[lang="ar"] .hdr-kairo { letter-spacing: 0; font-size: .86rem; }
@media (max-width: 860px) { .hdr-kairo { display: none; } }

/* La lettre d'information se détache du reste du pied de page. */
.ftr-nl { background: rgba(255,255,255,.06); border: 1px solid var(--filet-s);
  border-radius: 14px; padding: 26px; }
.ftr-nl h4 { color: var(--creme); font-size: .95rem; letter-spacing: -.01em;
  text-transform: none; margin-bottom: 8px; }
.ftr-nl p { font-size: .86rem; color: #9B9B94; }
.ftr-nl .row { margin-top: 16px; }
.ftr-nl input { flex: 1 1 auto; min-width: 0; }
.ftr-cities { margin-top: 26px; padding-top: 20px;
  border-block-start: 1px solid var(--filet-s); }

/* La lettre d'information prend le fond du site : elle ressort franchement
   sur le pied de page sombre au lieu de s'y fondre. */
.ftr-nl { background: var(--creme); border-color: var(--creme); color: var(--encre); }
.ftr-nl h4 { color: var(--encre); }
.ftr-nl p { color: var(--gris); }
.ftr-nl .fld input { background: var(--blanc); border-color: #D8D8D0; color: var(--encre); }
.ftr-nl .btn { border-color: var(--encre); color: var(--encre); }
.ftr-nl .btn:hover { background: var(--encre); color: var(--creme); }
.ftr-nl .btn-p { background: var(--encre); color: var(--creme); }
.ftr-nl .consent, .ftr-nl .form-msg { color: var(--gris); }
/* Le bouton principal de la lettre d'information redevient bleu au survol :
   la règle du pied de page l'emportait par priorité de sélecteur. */
.ftr-nl .btn-p:hover, .nl .btn-p:hover { background: var(--bleu); border-color: var(--bleu);
  color: #fff; }
/* Même correction pour les blocs sombres : le bouton principal y reste bleu. */
.on-ink .btn-p:hover, .statement .btn-p:hover { background: var(--bleu);
  border-color: var(--bleu); color: #fff; }

/* ── Cartes de studio sur la page Écosystème ──────────────────────────── */
/* Les cinq logos sont blancs : sur une carte claire ils disparaissaient. La
   carte passe en sombre, et le rôle comme le compte deviennent des blocs,
   sans quoi ils s'enchaînent sur la même ligne. */
.ss-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px; margin-top: 34px; }
.ss-card { display: flex; flex-direction: column; align-items: flex-start;
  background: var(--blanc); color: var(--encre); border: 0;
  border-block-start: 3px solid var(--tone, var(--bleu)); border-radius: 0;
  padding: 24px 22px 26px; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.ss-card:hover { transform: translateY(-5px); background: var(--blanc); }
.ss-card .st-logo { height: 38px; width: auto; margin: 0 0 20px; object-fit: contain;
  object-position: left center; }
.ss-card .st-logo-inaya { height: 46px; }
.ss-card .st-logo-solal { height: 30px; }
.ss-card .st-logo-limitless { height: 34px; }
.ss-card .st-logo-allblue { height: 26px; }
.ss-card .st-logo-maje { height: 42px; }
.ss-role { display: block; margin: auto 0 0; font-size: .72rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tone, var(--bleu-c));
  line-height: 1.5; }
html[lang="ar"] .ss-role { letter-spacing: 0; font-size: .86rem; }
.ss-n { display: block; margin-top: 12px; font-size: .92rem; color: var(--encre); }
.ss-n b { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem;
  letter-spacing: -.03em; color: var(--tone, var(--bleu-c)); margin-inline-end: 6px; }
html[dir="rtl"] .ss-card .st-logo { object-position: right center; }

/* Sur un bloc sombre, les cartes reprennent la version blanche des logos. */
.on-ink .ss-card { background: rgba(255,255,255,.05); color: var(--creme); }
.on-ink .ss-n { color: var(--creme); }

/* Logos couleur fournis par le groupe : hauteurs réglées une à une pour qu'ils
   pèsent optiquement pareil, leurs proportions étant très différentes. */
.st-logo-inaya { height: 50px; }
.st-logo-solal { height: 26px; }
.ss-card .st-logo-inaya { height: 52px; }
.ss-card .st-logo-solal { height: 28px; }