/* TASHKENT — sections.css
   Rubriques ajoutées : Consortium, Nous soutenir, Explorer les fils,
   facettes de l'Atlas, chaîne relationnelle des fiches, barre de langues.
   Même vocabulaire que le reste du site : filets d'un pixel, pas de carte
   arrondie, pas d'ombre portée décorative, survol uniquement sur ce qui
   est réellement cliquable. */

/* ======================================================================
   1. En-tête : une piste de plus, et tout sur une seule ligne
   ======================================================================
   La grille d'origine était dimensionnée pour trois enfants. `.header-tail`
   en ajoute un quatrième : sous 1050 px la navigation et l'appel à soutien
   disparaîssent, mais le sélecteur de langue reste visible, ce qui laisse
   trois éléments dans deux pistes — et fait passer le bouton de menu à la
   ligne. On déclare donc trois pistes et on épingle tous les enfants sur la
   première rangée. */
@media (max-width: 1050px) {
  .site-header {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .site-header > * {
    grid-row: 1;
  }
}

/* Sous 720 px, la barre n'a plus la largeur : le choix de langue descend
   dans le menu, où il retrouve des libellés entiers et 50 px de hauteur.
   Le nombre de pistes doit suivre le nombre d'éléments restants, sinon la
   gouttière qui précède la piste vide décale le bouton de menu vers l'intérieur. */
@media (max-width: 720px) {
  .header-tail {
    display: none;
  }

  .site-header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .site-header .brand,
  .brand-lockup {
    min-width: 0;
  }
}

/* La ligne de base du lockup est retirée du bandeau sous 900 px (voir plus
   bas) ; elle reste présente dans le hero et sur la carte du pied de page. */

.mobile-menu-lang {
  margin-top: clamp(28px, 5vw, 44px);
  padding-top: clamp(20px, 4vw, 30px);
  border-top: 1px solid var(--line);
}

.mobile-menu-lang .eyebrow {
  margin-bottom: 14px;
}

.lang-switch--menu {
  gap: 10px;
}

.lang-switch--menu button {
  min-width: 0;
  min-height: var(--touch);
  padding: 0 18px;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: max(0.86rem, 13px);
  letter-spacing: 0.1em;
  opacity: 1;
  text-transform: none;
}

.lang-switch--menu button[aria-pressed="true"] {
  border-color: var(--uzbek-green);
  background: var(--uzbek-green);
  color: #fff;
}

@media (min-width: 721px) {
  .mobile-menu-lang {
    display: none;
  }
}

/* ======================================================================
   2. Barre de langues
   ====================================================================== */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
}

.lang-switch button {
  min-width: 46px;
  min-height: 44px;
  padding: 0 9px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: 600 max(0.76rem, 12px)/1 var(--sans);
  letter-spacing: 0.13em;
  opacity: 0.6;
  text-transform: uppercase;
  transition: opacity 200ms ease, color 200ms ease;
}

.lang-switch button:hover {
  opacity: 1;
}

.lang-switch button[aria-pressed="true"] {
  color: var(--gold-light);
  opacity: 1;
}

.site-header.is-scrolled .lang-switch button[aria-pressed="true"] {
  color: var(--uzbek-green);
}

.header-tail {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: clamp(8px, 1.4vw, 20px);
}

/* L'appel à soutien est devenu un élément flex, en concurrence de largeur avec
   le sélecteur de langue : sans cela il se comprime, « Nous soutenir » passe
   sur deux lignes et l'en-tête grandit de 5 px. */
.header-tail > .header-cta {
  flex: 0 0 auto;
  white-space: nowrap;
}

.lang-switch button {
  white-space: nowrap;
}

/* ======================================================================
   3. Consortium
   ====================================================================== */
.consortium-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(126px, 15vh, 166px) 0 clamp(64px, 8vw, 100px);
  background:
    radial-gradient(96% 80% at 82% 22%, rgba(22, 143, 139, 0.1) 0%, transparent 62%),
    linear-gradient(180deg, #fbf7ef 0%, var(--ivory) 52%, var(--paper) 100%);
  color: var(--ink);
}

.consortium-hero-serai {
  height: auto;
  position: absolute;
  z-index: 0;
  bottom: -12%;
  left: 50%;
  width: min(120vw, 1500px);
  opacity: 0.22;
  mix-blend-mode: multiply;
  transform: translateX(-50%);
  pointer-events: none;
}

.consortium-hero .container {
  position: relative;
  z-index: 1;
}

.consortium-hero h1 {
  max-width: 21ch;
  margin: 22px 0 0;
  font-size: clamp(2.4rem, 4.4vw, 4.6rem);
  line-height: 1.03;
  letter-spacing: -0.035em;
  text-wrap: pretty;
}

.consortium-hero h1 em {
  color: var(--gold-deep);
  font-style: italic;
}

.consortium-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr);
  gap: clamp(32px, 5vw, 78px);
  align-items: center;
}

/* La figure du corpus : ce que vaut une preuve, dessiné. */
.corpus-figure {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: clamp(20px, 2.4vw, 32px);
  background: rgba(255, 253, 248, 0.72);
  border: 1px solid var(--line);
}

.corpus-figure svg { display: block; width: 100%; height: auto; overflow: visible; }

.corpus-orbits { stroke: rgba(111, 84, 32, 0.3); stroke-width: 1; }
.corpus-orbits circle:nth-child(2) { stroke-dasharray: 3 7; }
.corpus-threads { stroke: rgba(111, 84, 32, 0.42); stroke-width: 1; }
.corpus-threads path:nth-child(n+7) { stroke: var(--turquoise); stroke-width: 1.4; opacity: 0.72; }
.corpus-nodes circle { fill: var(--gold-deep); }
.corpus-nodes circle:nth-child(n+7) { fill: var(--turquoise); }
.corpus-core { fill: #fffdf8; stroke: var(--gold-deep); stroke-width: 1.4; }
.corpus-core-label { fill: var(--gold-deep); font: 700 11px var(--sans); letter-spacing: 0.14em; }
.corpus-labels text { fill: var(--readable-on-light-soft); font: 700 10.5px var(--sans); letter-spacing: 0.17em; }

.corpus-figure figcaption {
  color: var(--readable-on-light-soft);
  font: 400 max(0.82rem, 13.5px)/1.56 var(--sans);
  text-wrap: pretty;
}

@media (max-width: 900px) {
  .consortium-hero-grid { grid-template-columns: minmax(0, 1fr); }
}

.consortium-status {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 30px 0 0;
  padding: 11px 16px;
  border: 1px solid rgba(111, 84, 32, 0.38);
  color: var(--gold-deep);
  font: 700 max(0.78rem, 12px)/1.3 var(--sans);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.consortium-status::before {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--turquoise);
  content: "";
}

.consortium-hero-lede {
  max-width: 62ch;
  margin: 30px 0 0;
  color: var(--readable-on-light-soft);
  font-size: clamp(1.08rem, 1.3vw, 1.3rem);
  line-height: 1.66;
}

/* -- manifeste -- */
.consortium-manifesto {
  padding: clamp(78px, 9vw, 140px) 0;
  background: var(--ivory);
}

.consortium-manifesto-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: clamp(38px, 6vw, 96px);
}

.consortium-manifesto h2 {
  margin: 0;
  font-size: clamp(1.8rem, 2.7vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: pretty;
}

.consortium-manifesto-copy > p {
  max-width: 66ch;
  margin: 22px 0 0;
}

.consortium-rule {
  margin: 38px 0 0;
  padding: 26px 30px;
  border-left: 2px solid var(--uzbek-green);
  background: var(--paper);
}

.consortium-rule strong {
  display: block;
  margin-bottom: 9px;
  color: var(--uzbek-green);
  font: 700 max(0.8rem, 12px)/1.4 var(--sans);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.consortium-rule p {
  margin: 0;
  color: var(--readable-on-light);
}

/* -- cartographie des savoirs -- */
.knowledge-map-section {
  position: relative;
  overflow: hidden;
  padding: clamp(78px, 9vw, 132px) 0 clamp(60px, 7vw, 100px);
  background: var(--ink-night);
  color: var(--ivory);
}

.knowledge-map-head {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 90px);
  margin-bottom: clamp(34px, 4vw, 56px);
}

.knowledge-map-head h2 {
  margin: 0;
  font-size: clamp(1.8rem, 2.7vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.knowledge-map-head p:not(.section-number) {
  max-width: 60ch;
  margin: 20px 0 0;
  color: var(--readable-on-dark);
}

.knowledge-map {
  position: relative;
  width: 100%;
  aspect-ratio: 1600 / 780;
}

.knowledge-map-earth {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.4;
  object-fit: contain;
}

.knowledge-map-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.knowledge-node {
  cursor: pointer;
}

.knowledge-node-hit {
  fill: transparent;
}

.knowledge-node circle:not(.knowledge-node-hit) {
  fill: var(--gold-light);
  stroke: rgba(9, 11, 10, 0.9);
  stroke-width: 1.5;
  transition: r 220ms ease, fill 220ms ease;
}

.knowledge-node:hover circle:not(.knowledge-node-hit),
.knowledge-node:focus-visible circle:not(.knowledge-node-hit) {
  r: 8;
  fill: var(--turquoise-light);
}

.knowledge-node--live circle:not(.knowledge-node-hit) {
  r: 9;
  fill: var(--turquoise-light);
  stroke: rgba(255, 250, 238, 0.9);
}

.knowledge-node--live text {
  fill: var(--turquoise-light);
}

.knowledge-node text {
  fill: rgba(255, 250, 238, 0.9);
  font: 600 11px/1 var(--sans);
  letter-spacing: 0.06em;
  paint-order: stroke;
  stroke: rgba(9, 11, 10, 0.85);
  stroke-width: 3.5;
  pointer-events: none;
}

.knowledge-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 34px;
  margin-top: clamp(24px, 3vw, 40px);
  color: var(--readable-on-dark-soft);
  font: 600 max(0.8rem, 12px)/1.4 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.knowledge-map-legend span {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}

.knowledge-map-legend i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold-light);
}

.knowledge-map-legend i.is-live {
  background: var(--turquoise-light);
}

.knowledge-map-readout {
  margin: 22px 0 0;
  color: var(--readable-on-dark);
  font-size: 1.02rem;
}

.knowledge-readout-intro {
  max-width: 78ch;
  margin: 0;
  color: var(--readable-on-dark-soft);
}

.knowledge-readout-intro b {
  color: var(--gold-light);
  font-weight: 600;
}

.knowledge-readout-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  margin: 0 0 16px;
}

.knowledge-readout-head strong {
  color: var(--gold-light);
  font: 400 1.5rem/1.1 var(--serif);
}

.knowledge-readout-head span {
  color: var(--readable-on-dark-soft);
  font: 600 max(0.78rem, 12px)/1.4 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.knowledge-readout-list {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
  margin-bottom: 22px;
}

.knowledge-readout-list a {
  display: grid;
  gap: 5px;
  min-height: var(--touch);
  align-content: center;
  padding: 12px 15px;
  border: 1px solid rgba(245, 240, 231, 0.2);
  transition: border-color 200ms ease, background-color 200ms ease;
}

.knowledge-readout-list a:hover,
.knowledge-readout-list a:focus-visible {
  border-color: var(--turquoise-light);
  background: rgba(127, 201, 193, 0.1);
}

.knowledge-readout-list b {
  color: var(--readable-on-dark);
  font: 400 1.02rem/1.25 var(--serif);
}

.knowledge-readout-list span {
  color: var(--readable-on-dark-soft);
  font: 600 0.65rem/1 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.knowledge-index {
  margin-top: clamp(32px, 4vw, 54px);
  padding-top: clamp(22px, 3vw, 34px);
  border-top: 1px solid rgba(245, 240, 231, 0.16);
}

.knowledge-index-label {
  margin: 0 0 18px;
  color: var(--readable-on-dark-soft);
  font: 600 max(0.78rem, 12px)/1.4 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.knowledge-index ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.knowledge-index button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 9px 15px;
  border: 1px solid rgba(245, 240, 231, 0.2);
  background: transparent;
  color: var(--readable-on-dark);
  font: 500 max(0.82rem, 13px)/1 var(--sans);
  cursor: pointer;
  transition: border-color 200ms ease, background-color 200ms ease, color 200ms ease;
}

.knowledge-index button b {
  color: var(--gold-light);
  font: 600 0.72rem/1 var(--sans);
  letter-spacing: 0.06em;
}

.knowledge-index button:hover {
  border-color: var(--gold-light);
}

.knowledge-index button[aria-pressed="true"] {
  border-color: var(--turquoise-light);
  background: rgba(127, 201, 193, 0.14);
  color: #fffaee;
}

/* -- familles d'expertise, toutes sur la même ligne de base -- */
.consortium-families {  padding: clamp(78px, 9vw, 140px) 0;
  background: var(--paper);
}

.consortium-families-head {
  max-width: 62ch;
  margin-bottom: clamp(36px, 4.6vw, 64px);
}

.consortium-families-head h2 {
  margin: 20px 0 0;
  font-size: clamp(1.8rem, 2.7vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.consortium-families-head p {
  max-width: 60ch;
  margin: 20px 0 0;
  color: var(--readable-on-light);
}

.consortium-family-grid {
  display: grid;
  align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(266px, 1fr));
  gap: 1px;
  background: var(--line);
}

.consortium-family {
  display: grid;
  align-content: start;
  gap: 15px;
  padding: clamp(28px, 3vw, 40px);
  background: var(--paper);
}

.consortium-family > span {
  color: var(--uzbek-green);
  font: 700 max(0.8rem, 12px)/1.3 var(--sans);
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.consortium-family h3 {
  margin: 0;
  font-size: clamp(1.28rem, 1.6vw, 1.6rem);
  line-height: 1.16;
  text-wrap: pretty;
}

.consortium-family p {
  margin: 0;
  color: var(--readable-on-light-soft);
}

.consortium-family ul {
  display: grid;
  gap: 10px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.consortium-family li {
  display: flex;
  align-items: baseline;
  gap: 11px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--readable-on-light);
  font-size: 1rem;
  line-height: 1.5;
}

.consortium-family li::before {
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  margin-top: 0.55em;
  border: 1px solid var(--gold);
  content: "";
  transform: rotate(45deg);
}

.seat-open {
  display: inline-block;
  margin-top: 4px;
  color: var(--readable-on-light-soft);
  font: 700 max(0.74rem, 11px)/1.4 var(--sans);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* -- éthique -- */
.consortium-ethics {
  padding: clamp(78px, 9vw, 140px) 0;
  background: var(--ink);
  color: var(--ivory);
}

.consortium-ethics-head {
  max-width: 60ch;
  margin-bottom: clamp(36px, 4.6vw, 60px);
}

.consortium-ethics-head h2 {
  margin: 20px 0 0;
  font-size: clamp(1.8rem, 2.7vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.consortium-ethics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: clamp(28px, 3vw, 48px);
}

.consortium-ethics-grid article {
  display: grid;
  align-content: start;
  gap: 13px;
  padding-top: 22px;
  border-top: 1px solid rgba(224, 199, 132, 0.36);
}

.consortium-ethics-grid h3 {
  margin: 0;
  font-size: clamp(1.2rem, 1.5vw, 1.48rem);
  line-height: 1.18;
}

.consortium-ethics-grid p {
  margin: 0;
  color: var(--readable-on-dark);
}

.consortium-ethics-grid span {
  color: var(--turquoise-light);
  font: 700 max(0.78rem, 12px)/1 var(--sans);
  letter-spacing: 0.17em;
}

/* -- appel -- */
.consortium-join {
  position: relative;
  overflow: hidden;
  padding: clamp(78px, 9vw, 140px) 0;
  background: var(--ivory);
}

.consortium-join-frieze {
  height: auto;
  position: absolute;
  right: -4vw;
  bottom: 8%;
  width: min(48vw, 660px);
  opacity: 0.16;
  pointer-events: none;
}

.consortium-join-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: clamp(34px, 5vw, 80px);
}

.consortium-join h2 {
  margin: 20px 0 0;
  font-size: clamp(1.9rem, 3vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: pretty;
}

.consortium-join p {
  max-width: 58ch;
  margin: 20px 0 0;
}

.consortium-join-form {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: clamp(26px, 3vw, 38px);
  border: 1px solid var(--line);
  background: var(--paper);
}

.consortium-join-form strong {
  font: 700 max(0.8rem, 12px)/1.4 var(--sans);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.consortium-join-form ol {
  display: grid;
  gap: 11px;
  margin: 0;
  padding-left: 1.3em;
  color: var(--readable-on-light);
}

.consortium-join-form li {
  font-size: 1rem;
  line-height: 1.55;
}

/* ======================================================================
   4. Nous soutenir
   ====================================================================== */
.support-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(132px, 17vh, 200px) 0 clamp(74px, 9vw, 116px);
  background: var(--ink-night);
  color: var(--ivory);
}

.support-hero-image {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: url("../assets/route-night-alt.webp") center / cover no-repeat;
  opacity: 0.6;
}

.support-hero-veil {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 8, 7, 0.95), rgba(6, 8, 7, 0.6)),
    linear-gradient(0deg, rgba(6, 8, 7, 0.9), transparent 62%);
}

.support-hero .container {
  position: relative;
  z-index: 2;
}

.support-hero h1 {
  max-width: 22ch;
  margin: 22px 0 0;
  font-size: clamp(2.4rem, 4.4vw, 4.6rem);
  line-height: 1.03;
  letter-spacing: -0.035em;
  text-wrap: pretty;
}

.support-hero h1 em {
  color: var(--gold-light);
  font-style: italic;
}

.support-hero-lede {
  max-width: 60ch;
  margin: 28px 0 0;
  color: var(--readable-on-dark);
  font-size: clamp(1.08rem, 1.3vw, 1.3rem);
  line-height: 1.66;
}

.support-ways {
  padding: clamp(78px, 9vw, 140px) 0;
  background: var(--ivory);
}

.support-ways-head {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 90px);
  margin-bottom: clamp(38px, 4.6vw, 64px);
}

.support-ways-head h2 {
  margin: 0;
  font-size: clamp(1.8rem, 2.7vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.support-ways-head p:not(.section-number) {
  max-width: 60ch;
  margin: 20px 0 0;
  color: var(--readable-on-light);
}

.support-way-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

/* Chaque voie est un lien réel : le survol est donc légitime. */
.support-way {
  display: grid;
  align-items: baseline;
  grid-template-columns: 62px minmax(0, 1fr) minmax(0, 1.1fr) auto;
  gap: clamp(16px, 2.4vw, 40px);
  padding: clamp(26px, 3.2vw, 42px) 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  transition: background-color 240ms ease, padding-inline 240ms ease;
}

.support-way:hover,
.support-way:focus-visible {
  background: var(--paper);
  padding-inline: 18px;
}

.support-way > span:first-child {
  color: var(--gold);
  font: 400 1.9rem/1 var(--serif);
}

.support-way h3 {
  margin: 0;
  font-size: clamp(1.34rem, 1.9vw, 1.78rem);
  line-height: 1.14;
  text-wrap: pretty;
}

.support-way-note {
  margin: 9px 0 0;
  color: var(--uzbek-green);
  font: 700 max(0.78rem, 12px)/1.4 var(--sans);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.support-way p:not(.support-way-note) {
  margin: 0;
  color: var(--readable-on-light-soft);
}

.support-way .arrow {
  align-self: center;
  color: var(--uzbek-green);
}

.support-transparency {
  padding: clamp(74px, 9vw, 132px) 0;
  background: var(--ink);
  color: var(--ivory);
}

.support-transparency-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(28px, 3vw, 52px);
}

.support-transparency-grid article {
  display: grid;
  align-content: start;
  gap: 12px;
  padding-top: 22px;
  border-top: 1px solid rgba(224, 199, 132, 0.36);
}

.support-transparency-grid h3 {
  margin: 0;
  font-size: clamp(1.16rem, 1.4vw, 1.4rem);
  line-height: 1.2;
}

.support-transparency-grid p {
  margin: 0;
  color: var(--readable-on-dark);
}

.support-transparency-head {
  max-width: 60ch;
  margin-bottom: clamp(34px, 4vw, 56px);
}

.support-transparency-head h2 {
  margin: 20px 0 0;
  font-size: clamp(1.8rem, 2.7vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

/* ======================================================================
   5. Explorer les fils — vue d'ensemble relationnelle
   ====================================================================== */
.threads-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(126px, 16vh, 190px) 0 clamp(60px, 7vw, 96px);
  background: var(--ink-night);
  color: var(--ivory);
}

.threads-hero h1 {
  max-width: 24ch;
  margin: 22px 0 0;
  font-size: clamp(2.3rem, 4vw, 4.1rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.threads-hero p {
  max-width: 62ch;
  margin: 26px 0 0;
  color: var(--readable-on-dark);
  font-size: clamp(1.06rem, 1.25vw, 1.26rem);
}

.threads-section {
  padding: clamp(64px, 8vw, 116px) 0;
  background: var(--ivory);
}

.threads-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 0 0 clamp(30px, 3.6vw, 48px);
  padding: 0;
  list-style: none;
  color: var(--readable-on-light-soft);
  font: 700 max(0.78rem, 12px)/1.4 var(--sans);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.threads-legend li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.threads-legend b {
  width: 6px;
  height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
}

.thread-chain-list {
  display: grid;
  gap: 1px;
  background: var(--line);
}

.thread-chain {
  display: grid;
  grid-template-columns: minmax(0, 0.3fr) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 48px);
  padding: clamp(24px, 3vw, 38px) 0;
  background: var(--ivory);
}

.thread-chain-title {
  display: grid;
  align-content: start;
  gap: 8px;
}

.thread-chain-title h3 {
  margin: 0;
  font-size: clamp(1.3rem, 1.8vw, 1.7rem);
  line-height: 1.14;
}

.thread-chain-title span {
  color: var(--readable-on-light-soft);
  font: 700 max(0.78rem, 12px)/1.4 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.chain-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chain-steps > li {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.chain-steps > li::after {
  align-self: center;
  color: var(--gold);
  content: "→";
  font-size: 1.05rem;
}

.chain-steps > li:last-child::after {
  content: "";
}

.chain-step {
  display: grid;
  align-content: center;
  gap: 4px;
  min-height: 50px;
  padding: 10px 15px;
  border: 1px solid var(--line);
  color: inherit;
  transition: border-color 200ms ease, background-color 200ms ease;
}

a.chain-step:hover,
a.chain-step:focus-visible {
  border-color: var(--uzbek-green);
  background: var(--paper);
}

.chain-step > span {
  color: var(--readable-on-light-soft);
  font: 700 max(0.72rem, 11px)/1.2 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.chain-step > strong {
  font: 400 1.06rem/1.2 var(--serif);
}

.chain-step--unesco {
  border-color: rgba(13, 91, 87, 0.42);
  background: rgba(22, 143, 139, 0.07);
}

.chain-step--unesco > span {
  color: var(--uzbek-green);
}

.chain-step--institution {
  border-style: dashed;
}

/* chaîne affichée en pied de fiche */
.entry-chain-section {
  padding: clamp(60px, 7vw, 104px) 0;
  background: var(--paper);
}

.entry-chain-head {
  max-width: 58ch;
  margin-bottom: clamp(26px, 3vw, 40px);
}

.entry-chain-head h2 {
  margin: 18px 0 0;
  font-size: clamp(1.6rem, 2.3vw, 2.3rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
}

.entry-chain-head p {
  margin: 16px 0 0;
  color: var(--readable-on-light-soft);
}

.entry-chain-section .chain-step {
  background: var(--ivory);
}

/* ======================================================================
   6. Facettes de l'Atlas
   ====================================================================== */
.facet-bar {
  display: grid;
  gap: clamp(18px, 2vw, 26px);
  margin-top: clamp(24px, 3vw, 38px);
  padding: clamp(20px, 2.4vw, 30px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.facet-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}

.facet {
  display: grid;
  gap: 7px;
}

.facet > label {
  color: var(--readable-on-light-soft);
  font: 700 max(0.76rem, 12px)/1.3 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.facet select {
  width: 100%;
  min-height: var(--touch);
  padding: 0 38px 0 14px;
  border: 1px solid var(--line);
  border-radius: 0;
  appearance: none;
  background: var(--ivory) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%230d5b57' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 8px;
  color: var(--ink);
  font: 400 1rem/1.4 var(--sans);
}

.facet select:hover {
  border-color: var(--uzbek-green);
}

.facet-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.facet-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.facet-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--uzbek-green);
  background: rgba(22, 143, 139, 0.08);
  color: var(--uzbek-green);
  cursor: pointer;
  font: 700 max(0.78rem, 12px)/1 var(--sans);
  letter-spacing: 0.08em;
}

.facet-chip::after {
  content: "×";
  font-size: 1.1rem;
  line-height: 1;
}

.facet-chip:hover {
  background: rgba(22, 143, 139, 0.16);
}

.facet-note {
  max-width: 74ch;
  margin: 0;
  color: var(--readable-on-light-soft);
  font-size: 1rem;
}

.facet-note b {
  color: var(--uzbek-green);
  font-weight: 700;
}

/* ======================================================================
   7. Crédits photographiques
   ====================================================================== */
.photo-credit {
  display: grid;
  gap: 3px;
  margin: 12px 0 0;
  color: var(--readable-on-light-soft);
  font: 500 max(0.78rem, 12px)/1.5 var(--sans);
}

.photo-credit--light {
  color: var(--readable-on-dark-soft);
}

.photo-credit b {
  font-weight: 700;
  letter-spacing: 0.06em;
}

.field-gallery {
  padding: clamp(70px, 8vw, 124px) 0;
  background: var(--ink);
  color: var(--ivory);
}

.field-gallery-head {
  max-width: 60ch;
  margin-bottom: clamp(32px, 4vw, 52px);
}

.field-gallery-head h2 {
  margin: 20px 0 0;
  font-size: clamp(1.8rem, 2.7vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.field-gallery-head p {
  max-width: 58ch;
  margin: 18px 0 0;
  color: var(--readable-on-dark);
}

.field-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: clamp(20px, 2.4vw, 34px);
}

.field-gallery figure {
  margin: 0;
}

.field-gallery img {
  width: 100%;
  height: clamp(210px, 26vw, 300px);
  object-fit: cover;
}

.field-gallery figcaption {
  display: grid;
  gap: 4px;
  margin-top: 13px;
  color: var(--readable-on-dark-soft);
  font: 500 max(0.8rem, 12px)/1.55 var(--sans);
}

.field-gallery figcaption b {
  color: var(--ivory);
  font: 400 1.06rem/1.3 var(--serif);
  letter-spacing: 0;
}

/* ======================================================================
   8. Responsive
   ====================================================================== */
@media (max-width: 1050px) {
  .consortium-manifesto-grid,
  .knowledge-map-head,
  .support-ways-head,
  .consortium-join-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .support-way {
    grid-template-columns: 44px minmax(0, 1fr) auto;
  }

  .support-way > div:nth-child(3) {
    grid-column: 2 / -1;
  }

  .thread-chain {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .knowledge-map {
    aspect-ratio: 1600 / 980;
  }

  .knowledge-map-earth {
    object-fit: cover;
  }

  .knowledge-node text {
    display: none;
  }

  .knowledge-node circle:not(.knowledge-node-hit) {
    r: 7;
  }

  .support-way {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
  }

  .support-way > span:first-child {
    grid-column: 1;
    font-size: 1.5rem;
  }

  .support-way > div:nth-child(2),
  .support-way > div:nth-child(3) {
    grid-column: 1 / -1;
  }

  .support-way .arrow {
    grid-row: 1;
    grid-column: 2;
  }

  .support-way:hover,
  .support-way:focus-visible {
    padding-inline: 12px;
  }

  .chain-steps > li::after {
    display: none;
  }

  .chain-steps > li {
    width: 100%;
  }

  .chain-step {
    width: 100%;
  }

  .consortium-join-frieze {
    display: none;
  }
}

/* ======================================================================
   9. Chiffres de section — garde-fou : toute règle de couleur écrite sur un
   descendant `p` d'un bloc de titre le capture et le fait passer au premier
   plan. On réaffirme donc sa couleur en fin de feuille.
   ====================================================================== */
.section-number {
  color: rgba(17, 19, 18, 0.16);
}

.section-number--dark {
  color: rgba(245, 240, 231, 0.11);
}

/* ======================================================================
   10. Arabe — sens de lecture inversé
   ====================================================================== */
[dir="rtl"] .eyebrow::before {
  margin-right: 0;
  margin-left: 12px;
}

[dir="rtl"] .arrow,
[dir="rtl"] .chain-steps > li::after {
  transform: scaleX(-1);
}

[dir="rtl"] .arrow--diagonal {
  transform: scaleX(-1) rotate(-45deg);
}

[dir="rtl"] a:hover .arrow {
  transform: scaleX(-1) translateX(5px);
}

[dir="rtl"] .consortium-rule {
  border-left: 0;
  border-right: 2px solid var(--uzbek-green);
}

[dir="rtl"] .hero-baseline,
[dir="rtl"] .hero-foundation {
  padding-right: clamp(4px, 1.6vw, 26px);
  padding-left: 0;
}

[dir="rtl"] .hero-stage,
[dir="rtl"] .hero-mark {
  justify-items: end;
}

[dir="rtl"] .consortium-join-form ol {
  padding-right: 1.3em;
  padding-left: 0;
}

[dir="rtl"] .scroll-cue {
  display: none;
}


/* ======================================================================
   Projet en préparation — FIL DE VIE (Bess Nielsen)
   Espace volontairement réduit : une note sur l'accueil, une carte compacte
   sur la page Actions. Le visuel emprunte au site du symposium
   (fil-de-vie.com) sa seule idée forte : un fil continu, sans ornement.
   ====================================================================== */
.project-note {
  display: grid;
  gap: 10px 34px;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
  align-items: baseline;
  margin-top: clamp(34px, 4vw, 56px);
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid rgba(34, 31, 24, 0.22);
}

.project-note .eyebrow--turquoise {
  color: var(--uzbek-green);
}

.project-note-copy {
  max-width: 78ch;
  margin: 0;
  color: var(--readable-on-light);
  font-size: max(1rem, 15.5px);
  line-height: 1.62;
}

.project-note-copy strong {
  font: 600 max(1rem, 15.5px)/1.62 var(--sans);
  letter-spacing: 0.14em;
}

.project-card-section {
  padding: clamp(56px, 7vw, 92px) 0;
  background: var(--ivory);
}

.project-card {
  display: grid;
  gap: clamp(26px, 4vw, 54px);
  grid-template-columns: minmax(0, 232px) minmax(0, 1fr);
  align-items: center;
}

.project-card-visual {
  position: relative;
  display: grid;
  min-height: 232px;
  align-content: center;
  justify-items: center;
  gap: 20px;
  padding: 30px 22px;
  border: 1px solid rgba(34, 31, 24, 0.2);
  background: linear-gradient(168deg, #fbf7ee, var(--paper));
  overflow: hidden;
  transition: border-color 220ms ease;
}

.project-card-visual:hover,
.project-card-visual:focus-visible {
  border-color: var(--uzbek-green);
}

/* le fil de vie : une seule ligne, ininterrompue, du haut au bas de la carte */
.project-card-thread {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--gold) 18%, var(--gold) 82%, transparent);
}

.project-card-wordmark {
  position: relative;
  padding: 14px 18px;
  background: var(--ivory);
  color: var(--ink);
  font: 400 clamp(1.5rem, 2.2vw, 1.9rem)/1.16 var(--serif);
  letter-spacing: 0.24em;
  text-align: center;
}

.project-card-url {
  position: relative;
  color: var(--gold-deep);
  font: 600 0.66rem/1 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.project-card-copy .eyebrow--turquoise {
  color: var(--uzbek-green);
}

.project-card-copy h2 {
  max-width: 22ch;
  margin: 16px 0 0;
  font: 400 clamp(1.7rem, 2.5vw, 2.5rem)/1.1 var(--serif);
  letter-spacing: -0.02em;
}

.project-card-copy p {
  max-width: 62ch;
  margin: 18px 0 0;
  color: var(--readable-on-light-soft);
  font-size: max(1rem, 15.5px);
  line-height: 1.66;
}

.project-card-copy .text-link {
  margin-top: 22px;
}

@media (max-width: 860px) {
  .project-note {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .project-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-card-visual {
    min-height: 186px;
  }
}


/* ======================================================================
   Illustration des cartels — photographies documentées uniquement
   ====================================================================== */
.entry-image figcaption {
  display: grid;
  gap: 5px;
}

.entry-image figcaption b {
  font-weight: 600;
}

.entry-image figcaption span {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  opacity: 0.76;
  text-transform: none;
}

.encyclopedia-card-thumb[width][height] {
  width: 100%;
  height: clamp(150px, 17vw, 190px);
  margin-bottom: 20px;
  object-fit: cover;
  filter: saturate(0.86) contrast(1.03);
}


/* Sur petit écran, le logo tient seul : la ligne de base du bandeau est
   retirée pour laisser respirer le sélecteur de langue et le menu. */
@media (max-width: 900px) {
  .site-header .brand-lockup-line {
    display: none;
  }

  .site-header .brand-lockup > img[width][height] {
    height: 30px;
  }
}


/* ======================================================================
   9. La collection associative
   ====================================================================== */
.collection-section {
  position: relative;
  overflow: hidden;
  background: var(--paper);
}

.collection-ornament {
  position: absolute;
  z-index: 0;
  top: 30%;
  right: -12%;
  width: min(40vw, 460px);
  color: rgba(111, 84, 32, 0.11);
  pointer-events: none;
}

.collection-ornament svg { display: block; width: 100%; height: auto; }

.collection-heading,
.collection-registry,
.collection-rule { position: relative; z-index: 1; }

.collection-heading {
  display: grid;
  grid-template-columns: minmax(190px, 0.62fr) minmax(0, 1.7fr);
  gap: clamp(28px, 5vw, 74px);
  align-items: start;
}

.collection-heading h2 {
  margin: 0 0 22px;
  color: var(--ink);
  font: 400 clamp(2.4rem, 4.4vw, 4.1rem)/1.04 var(--serif);
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

.collection-heading h2 em { color: var(--gold-deep); font-style: italic; }

.collection-heading > div:last-child > p:last-child {
  max-width: 680px;
  margin: 0;
  color: var(--readable-on-light-soft);
  font: 400 1.02rem/1.62 var(--sans);
}

.collection-registry {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(44px, 6vw, 78px);
  background: var(--line);
  border: 1px solid var(--line);
}

.collection-registry article {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: clamp(24px, 2.6vw, 36px);
  background: #fbf7ef;
}

.collection-family {
  margin: 0;
  color: var(--gold-deep);
  font: 700 max(0.66rem, 11.5px)/1 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.collection-registry h3 {
  margin: 0;
  color: var(--ink);
  font: 400 clamp(1.32rem, 1.9vw, 1.72rem)/1.16 var(--serif);
}

.collection-registry article > p:last-of-type {
  margin: 0;
  color: var(--readable-on-light-soft);
  font: 400 max(0.92rem, 15px)/1.6 var(--sans);
}

.collection-registry ul {
  display: grid;
  gap: 7px;
  margin: 6px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.collection-registry li {
  position: relative;
  padding-left: 18px;
  color: var(--readable-on-light);
  font: 600 max(0.78rem, 13px)/1.4 var(--sans);
}

.collection-registry li::before {
  position: absolute;
  top: 0.56em;
  left: 0;
  width: 8px;
  height: 1px;
  background: var(--gold);
  content: "";
}

.collection-rule {
  display: grid;
  grid-template-columns: minmax(190px, 0.62fr) minmax(0, 1.7fr);
  gap: clamp(20px, 5vw, 74px);
  margin-top: clamp(34px, 4vw, 54px);
  padding-top: clamp(24px, 3vw, 38px);
  border-top: 1px solid var(--line);
}

.collection-rule p {
  max-width: 760px;
  margin: 0;
  color: var(--readable-on-light-soft);
  font: 400 max(0.94rem, 15px)/1.66 var(--sans);
}

.collection-note {
  margin-top: 14px !important;
  color: rgba(17, 19, 18, 0.5) !important;
  font-style: italic;
}

/* ======================================================================
   10. Le cartel du patrimoine immatériel
   ====================================================================== */
.ich-section { background: var(--ivory); }

.ich-grid {
  display: grid;
  grid-template-columns: minmax(200px, 0.58fr) minmax(0, 1.7fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: start;
}

.ich-seal { position: sticky; top: 120px; }
.ich-seal svg { display: block; width: min(100%, 260px); height: auto; }
.ich-seal-outer, .ich-seal-inner { fill: none; stroke: var(--gold); stroke-width: 1; opacity: 0.75; }
.ich-seal-inner { stroke-dasharray: 2 6; }
.ich-seal-ring { fill: var(--gold-deep); font: 700 10.4px var(--sans); letter-spacing: 0.2em; }
.ich-seal-year { fill: var(--ink); font: 400 40px var(--serif); }
.ich-seal-word { fill: var(--gold-deep); font: 700 10px var(--sans); letter-spacing: 0.3em; }
.ich-seal-thread { stroke: var(--turquoise); stroke-width: 1.6; stroke-linecap: round; }

.ich-copy h2 {
  margin: 14px 0 24px;
  color: var(--ink);
  font: 400 clamp(2.1rem, 3.6vw, 3.4rem)/1.08 var(--serif);
  text-wrap: pretty;
}

.ich-copy h2 em { color: var(--gold-deep); font-style: italic; }

.ich-copy > p {
  max-width: 780px;
  margin: 0 0 18px;
  color: var(--readable-on-light-soft);
  font: 400 max(0.98rem, 16px)/1.68 var(--sans);
}

.ich-copy > p b { color: var(--ink); font-weight: 600; }

.ich-actions {
  display: grid;
  gap: 1px;
  margin: clamp(30px, 4vw, 44px) 0 0;
  padding: 0;
  background: var(--line);
  border: 1px solid var(--line);
  list-style: none;
}

.ich-actions li {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 8px 18px;
  padding: clamp(20px, 2.4vw, 30px);
  background: #fffdf8;
}

.ich-actions > li > span {
  color: var(--gold);
  font: 400 1.6rem/1 var(--serif);
}

.ich-actions h3 {
  margin: 0 0 8px;
  color: var(--ink);
  font: 600 max(0.94rem, 15px)/1.3 var(--sans);
  letter-spacing: 0.01em;
}

.ich-actions p {
  margin: 0 0 12px;
  color: var(--readable-on-light-soft);
  font: 400 max(0.9rem, 14.5px)/1.58 var(--sans);
}

.ich-source {
  margin: 26px 0 0;
  color: rgba(17, 19, 18, 0.55);
  font: 400 max(0.82rem, 13.5px)/1.55 var(--sans);
}

/* ======================================================================
   11. Le cartel de l'astrolabe — vers alirakib.com
   ====================================================================== */
.astrolabe-band {
  margin-top: clamp(40px, 5vw, 66px);
  padding-top: clamp(30px, 4vw, 46px);
  border-top: 1px solid var(--line-light);
}

.astrolabe-card {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
  padding: clamp(20px, 2.6vw, 30px) clamp(20px, 3vw, 38px);
  border: 1px solid rgba(245, 240, 231, 0.14);
  color: inherit;
  text-decoration: none;
  transition: border-color 340ms ease, background 340ms ease;
}

.astrolabe-card:hover { background: rgba(245, 240, 231, 0.04); border-color: rgba(201, 163, 92, 0.44); }

.astrolabe-stage { display: block; perspective: 900px; }

.astrolabe-slab {
  position: relative;
  display: block;
  transform: rotateY(-19deg) rotateX(7deg);
  transform-style: preserve-3d;
  transform-origin: 70% 50%;
  transition: transform 620ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.astrolabe-card:hover .astrolabe-slab { transform: rotateY(-6deg) rotateX(2deg); }

.astrolabe-screen {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  padding: 16px 14px 18px;
  background: radial-gradient(120% 100% at 50% 20%, #33253c 0%, #241a2c 62%, #17101d 100%);
  color: var(--gold-light);
  box-shadow: 0 26px 44px -22px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(224, 199, 132, 0.22);
}

.astrolabe-screen svg { display: block; width: 100%; height: auto; }

.astrolabe-screen-label {
  font: 700 max(0.62rem, 10.5px)/1 var(--sans);
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.astrolabe-screen-sub {
  color: rgba(224, 199, 132, 0.6);
  font: 400 max(0.58rem, 10px)/1 var(--sans);
  letter-spacing: 0.16em;
}

/* la tranche : ce qui donne l'épaisseur au cartel */
.astrolabe-edge {
  position: absolute;
  top: 4px;
  right: -9px;
  bottom: -4px;
  width: 9px;
  background: linear-gradient(90deg, #1d1526, #0f0a15);
  transform: skewY(-38deg);
  transform-origin: left center;
}

.astrolabe-copy { display: grid; gap: 8px; }

.astrolabe-eyebrow {
  color: var(--turquoise-light);
  font: 700 max(0.64rem, 11px)/1 var(--sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.astrolabe-copy strong {
  color: var(--gold-light);
  font: 400 clamp(1.6rem, 2.6vw, 2.3rem)/1.05 var(--serif);
}

.astrolabe-line {
  max-width: 620px;
  color: var(--readable-on-dark-soft);
  font: 400 max(0.88rem, 14.5px)/1.6 var(--sans);
}

.astrolabe-go {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  color: var(--gold-light);
  font: 600 max(0.76rem, 13px)/1 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.astrolabe-go .arrow { width: 26px; height: auto; }
.astrolabe-go .arrow path { fill: none; stroke: currentColor; stroke-width: 1.6; }

@media (max-width: 900px) {
  .collection-heading,
  .collection-rule,
  .ich-grid { grid-template-columns: minmax(0, 1fr); }
  .collection-registry { grid-template-columns: minmax(0, 1fr); }
  .ich-seal { position: static; justify-self: start; }
  .ich-seal svg { width: 168px; }
  .astrolabe-card { grid-template-columns: minmax(0, 1fr); }
  .astrolabe-slab { transform: rotateY(-10deg) rotateX(4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .astrolabe-slab { transform: none; transition: none; }
  .astrolabe-card:hover .astrolabe-slab { transform: none; }
}


/* ======================================================================
   12. Enseigner, former, transmettre
   ====================================================================== */
.teaching-section { background: var(--ivory); }

.teaching-heading,
.editions-heading {
  display: grid;
  grid-template-columns: minmax(190px, 0.62fr) minmax(0, 1.7fr);
  gap: clamp(28px, 5vw, 74px);
  align-items: start;
}

.teaching-heading h2,
.editions-heading h2 {
  margin: 0 0 22px;
  color: var(--ink);
  font: 400 clamp(2.3rem, 4.2vw, 3.9rem)/1.05 var(--serif);
  text-wrap: pretty;
}

.teaching-heading h2 em,
.editions-heading h2 em { color: var(--gold-deep); font-style: italic; }

.teaching-heading > div:last-child > p:last-child,
.editions-heading > div:last-child > p:last-child {
  max-width: 720px;
  margin: 0;
  color: var(--readable-on-light-soft);
  font: 400 1.02rem/1.64 var(--sans);
}

.teaching-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(44px, 6vw, 78px);
  background: var(--line);
  border: 1px solid var(--line);
}

.teaching-card {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: clamp(24px, 2.8vw, 40px);
  background: #fffdf8;
}

.teaching-card--wide { grid-column: span 2; }

.teaching-card--accent {
  background: linear-gradient(180deg, #f2f7f5 0%, #eef4f2 100%);
  box-shadow: inset 3px 0 0 var(--turquoise);
}

.teaching-kind {
  margin: 0;
  color: var(--gold-deep);
  font: 700 max(0.66rem, 11.5px)/1 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.teaching-card--accent .teaching-kind { color: var(--uzbek-green); }

.teaching-card h3 {
  margin: 0;
  color: var(--ink);
  font: 400 clamp(1.36rem, 2.1vw, 1.94rem)/1.14 var(--serif);
  text-wrap: pretty;
}

.teaching-card > p:not(.teaching-kind):not(.teaching-note) {
  margin: 0;
  max-width: 74ch;
  color: var(--readable-on-light-soft);
  font: 400 max(0.94rem, 15px)/1.62 var(--sans);
}

.teaching-card b { color: var(--ink); font-weight: 600; }

.teaching-schools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.teaching-schools li {
  padding: 7px 13px;
  border: 1px solid rgba(111, 84, 32, 0.3);
  color: var(--gold-deep);
  font: 600 max(0.72rem, 12px)/1 var(--sans);
  letter-spacing: 0.06em;
}

.teaching-note {
  margin: 4px 0 0;
  color: rgba(17, 19, 18, 0.5);
  font: 400 max(0.82rem, 13.5px)/1.5 var(--sans);
  font-style: italic;
}

/* ---- Éditions ---- */
.editions-section { background: var(--paper); }

.editions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 26px);
  margin-top: clamp(40px, 5vw, 70px);
}

.edition {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: clamp(24px, 2.8vw, 38px);
  background: #fbf7ef;
  border: 1px solid var(--line);
}

.edition--book {
  grid-column: span 2;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(26px, 3.4vw, 52px);
  align-items: center;
}

.edition-kind {
  margin: 0;
  color: var(--gold-deep);
  font: 700 max(0.66rem, 11.5px)/1 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.edition h3 {
  margin: 0;
  color: var(--ink);
  font: 400 clamp(1.4rem, 2.2vw, 2rem)/1.12 var(--serif);
}

.edition p:not(.edition-kind) {
  margin: 0;
  color: var(--readable-on-light-soft);
  font: 400 max(0.94rem, 15px)/1.62 var(--sans);
}

.edition-copy { display: grid; gap: 12px; align-content: start; }

.edition-links { display: flex; flex-wrap: wrap; gap: 14px 30px; margin-top: 6px; }

/* Les quatre couvertures, posées comme sur un rayon. */
.edition-shelf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
  gap: clamp(10px, 1.2vw, 18px);
  align-items: end;
}

.edition-cover {
  display: grid;
  gap: 9px;
  text-decoration: none;
  transition: transform 420ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.edition-cover:hover { transform: translateY(-6px); }

.edition-cover img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 18px 34px -20px rgba(17, 19, 18, 0.62), 0 0 0 1px rgba(111, 84, 32, 0.16);
}

.edition-cover-tag {
  color: var(--gold-deep);
  font: 700 max(0.6rem, 10.5px)/1 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
}

/* ---- Les photographies de terrain ---- */
.collection-plate,
.teaching-plate,
.ich-plate {
  display: grid;
  gap: 12px;
  margin: clamp(34px, 4vw, 52px) 0 0;
}

.collection-plate img,
.teaching-plate img,
.ich-plate img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--line);
}

.collection-plate img { aspect-ratio: 21 / 9; object-position: center 42%; }
.teaching-plate img { aspect-ratio: 16 / 9; }
.ich-plate img { aspect-ratio: 16 / 9; object-position: center 40%; }

.teaching-plate {
  grid-column: span 2;
  margin: 0;
  padding: clamp(24px, 2.8vw, 40px);
  background: #fffdf8;
}

.collection-plate figcaption,
.teaching-plate figcaption,
.ich-plate figcaption {
  max-width: 74ch;
  color: var(--readable-on-light-soft);
  font: 400 max(0.86rem, 14px)/1.56 var(--sans);
  font-style: italic;
  text-wrap: pretty;
}

.ich-plate { margin-top: clamp(28px, 3vw, 40px); }

/* ---- Démarche qualité ---- */
.quality-section { background: var(--ink-night); color: var(--ivory); }

.quality-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
}

.quality-heading h2 {
  margin: 14px 0 0;
  color: var(--gold-light);
  font: 400 clamp(2rem, 3.4vw, 3.2rem)/1.08 var(--serif);
  text-wrap: pretty;
}

.quality-heading > p {
  margin: 0;
  color: var(--readable-on-dark-soft);
  font: 400 max(0.94rem, 15px)/1.66 var(--sans);
}

.quality-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(38px, 5vw, 62px);
  background: rgba(245, 240, 231, 0.14);
  border: 1px solid rgba(245, 240, 231, 0.14);
}

.quality-grid article {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: clamp(20px, 2.2vw, 30px);
  background: var(--ink-night);
}

.quality-grid span {
  color: var(--turquoise-light);
  font: 400 1.5rem/1 var(--serif);
}

.quality-grid h3 {
  margin: 0;
  color: var(--ivory);
  font: 600 max(0.9rem, 14.5px)/1.32 var(--sans);
}

.quality-grid p {
  margin: 0;
  color: var(--readable-on-dark-soft);
  font: 400 max(0.86rem, 14px)/1.56 var(--sans);
}

@media (max-width: 1080px) {
  .quality-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .teaching-heading,
  .editions-heading,
  .quality-heading { grid-template-columns: minmax(0, 1fr); }
  .teaching-grid,
  .editions-grid { grid-template-columns: minmax(0, 1fr); }
  .teaching-card--wide,
  .teaching-plate,
  .edition--book { grid-column: auto; }
  .edition--book { grid-template-columns: minmax(0, 1fr); }
  .edition-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quality-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .edition-cover, .edition-cover:hover { transform: none; transition: none; }
}

@media (max-width: 560px) {
  .edition-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.footer-contacts {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.footer-contacts a {
  display: grid;
  gap: 3px;
  color: var(--gold-light);
  font: 400 max(0.9rem, 14.5px)/1.35 var(--sans);
  text-decoration: none;
  word-break: break-word;
}

.footer-contacts a:hover { color: var(--ivory); }

.footer-contacts span {
  color: rgba(245, 240, 231, 0.52);
  font: 700 max(0.62rem, 10.5px)/1 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ======================================================================
   11. Arabe — les fonds suivent le sens de lecture

   En arabe le texte passe à droite. Trois règles, dans cet ordre :

   1. Une photographie de personne ne se retourne JAMAIS. C'est son
      CADRE qui traverse : le bloc image passe du côté opposé au texte
      et le recadrage suit, pour que le visage reste dégagé et lisible.
   2. Les dégradés de lisibilité s'inversent : la masse sombre — ou le
      voile ivoire — doit toujours se trouver SOUS le texte.
   3. Les artworks décoratifs se retournent ET changent d'ancrage. Leur
      composition est libre, mais leur masque de fondu doit suivre.

   Restent intacts : le logo, la carte du monde, les couvertures de
   livres, les codes QR, et toute image déjà centrée sans parti pris
   horizontal (le velours de la section « Nous soutenir »).
   ====================================================================== */

/* -- 11.1 Le hero : le voile ivoire passe à droite, sous la typographie -- */
[dir="rtl"] .hero-land img[width][height] {
  object-position: 38% 58%;
  transform: scaleX(-1);
}

[dir="rtl"] .hero-haze {
  background:
    linear-gradient(180deg, rgba(245, 240, 231, 0.94) 0%, rgba(245, 240, 231, 0.42) 26%, rgba(245, 240, 231, 0) 58%),
    linear-gradient(270deg, rgba(250, 246, 238, 0.94) 0%, rgba(250, 246, 238, 0.74) 34%, rgba(250, 246, 238, 0.24) 62%, rgba(250, 246, 238, 0) 84%);
}

/* -- 11.2 Présidence fondatrice : le cadre traverse, le visage jamais --
   Ali est dans la moitié gauche du cliché. En français le cadre occupe
   la droite de l'écran et le noir couvre la gauche, sous le texte. En
   arabe tout s'échange : le cadre part à gauche, recadré en miroir
   (78 % → 22 %) pour que le visage reste au bord gauche, loin du texte,
   et le noir vient couvrir la droite. Aucun scaleX sur la photo. */
[dir="rtl"] .founder-image {
  right: 42%;
  left: 0;
  background-position: 22% center;
  transform: none;
  -webkit-mask-image: linear-gradient(270deg, transparent 0%, black 24%, black 86%, transparent 100%);
  mask-image: linear-gradient(270deg, transparent 0%, black 24%, black 86%, transparent 100%);
}

[dir="rtl"] .founder-fade {
  transform: none;
  background:
    linear-gradient(270deg, #030403 0%, rgba(3, 4, 3, 0.98) 38%, rgba(3, 4, 3, 0.6) 56%, rgba(3, 4, 3, 0.08) 76%),
    linear-gradient(0deg, rgba(3, 4, 3, 0.9) 0%, transparent 42%);
}

[dir="rtl"] .founder-silk {
  background-position: right center;
  -webkit-mask-image: linear-gradient(270deg, black, transparent 64%);
  mask-image: linear-gradient(270deg, black, transparent 64%);
}

[dir="rtl"] .watermark--founder-caravan {
  right: auto;
  left: -3%;
  transform: scaleX(-1);
  -webkit-mask-image: linear-gradient(270deg, transparent, black 35%);
  mask-image: linear-gradient(270deg, transparent, black 35%);
}

/* -- 11.3 Page « Rejoindre & soutenir » : le noir sous le texte -- */
[dir="rtl"] .support-hero-veil {
  background:
    linear-gradient(270deg, rgba(6, 8, 7, 0.95), rgba(6, 8, 7, 0.6)),
    linear-gradient(0deg, rgba(6, 8, 7, 0.9), transparent 62%);
}

/* -- 11.4 Les matières : les rouleaux passent à gauche --
   material-velvet porte déjà une rotation : on la compose, sans l'écraser. */
[dir="rtl"] .material-roll {
  right: auto;
  left: -2%;
  transform: scaleX(-1);
  -webkit-mask-image: linear-gradient(270deg, transparent, black 35%);
  mask-image: linear-gradient(270deg, transparent, black 35%);
}

[dir="rtl"] .material-velvet {
  right: auto;
  left: 25%;
  transform: rotate(4deg) scaleX(-1);
}

[dir="rtl"] .material-weave {
  right: auto;
  left: 3%;
  transform: scaleX(-1);
}

/* -- 11.5 Les filigranes : retournés, ré-ancrés, masques suivis -- */
[dir="rtl"] .watermark {
  transform: scaleX(-1);
}

[dir="rtl"] .watermark--caravan {
  left: auto;
  right: -2%;
  transform: scaleX(-1);
  -webkit-mask-image: linear-gradient(270deg, black 50%, transparent 100%);
  mask-image: linear-gradient(270deg, black 50%, transparent 100%);
}

/* -- 11.6 Consortium : le caravansérail reste centré (translateX préservé) -- */
[dir="rtl"] .consortium-hero-serai {
  transform: translateX(-50%) scaleX(-1);
}

[dir="rtl"] .consortium-join-frieze {
  right: auto;
  left: -4vw;
  transform: scaleX(-1);
}

/* -- 11.7 Décors géométriques : l'ancrage traverse, la forme reste -- */
[dir="rtl"] .atlas-pattern {
  right: auto;
  left: -190px;
}

[dir="rtl"] .route-art {
  right: auto;
  left: -6vw;
}

@media (max-width: 860px) {
  [dir="rtl"] .watermark--caravan { left: auto; right: -28%; }
  [dir="rtl"] .watermark--founder-caravan { right: auto; left: -35%; }
  [dir="rtl"] .atlas-pattern { right: auto; left: -160px; }
  [dir="rtl"] .route-art { right: auto; left: -60%; }
}

/* Sur mobile la photo du fondateur repasse en fond plein : le cadre
   décalé n'a plus de sens quand le texte occupe toute la largeur. */
@media (max-width: 860px) {
  [dir="rtl"] .founder-image {
    right: 0;
    left: 0;
    background-position: 30% center;
  }
}