/* Katoying, the ultimate version (maquette of 18.10.2026, Cristallo Team).
   Loaded after styles.css (identical to the live site) and katoying-plus.css (the v3.4 maquette).
   New here: eight doors and their loop, the three houses, the figures of the door pages, the path of what we wait for,
   the next door at the end of each page, and a way to write to us with no address in the page.
   Nothing moves by itself: images, not animations. Colours: the night of Katoying, its ice, and our orange (--amber). */

:root {
  --orange-doux: rgba(255, 156, 74, 0.14);
  --orange-ligne: rgba(255, 156, 74, 0.46);
}

/* 1. The bar: eight doors fit between 901 and 1240 px. */
@media (min-width: 901px) and (max-width: 1240px) {
  .site-nav { gap: 15px; font-size: 11px; letter-spacing: 0.12em; }
  .nav-shell { gap: 24px; }
}

/* 2. Eight doors on the home page. */
.system-doors.huit { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.system-doors.huit .system-door { min-width: 0; padding: 18px 12px; gap: 10px; border-right: 1px solid var(--line-soft); border-bottom: 0; }
.system-doors.huit .system-door:last-child { border-right: 0; }
.system-doors.huit .system-door .system-symbol { width: 40px; height: 40px; }
/* On a wide screen, the eight doors stand in one row: the emblem above its name, so each name keeps its width. */
@media (min-width: 1241px) {
  .system-doors.huit .system-door { flex-direction: column; align-items: flex-start; justify-content: flex-start; min-height: 132px; padding: 18px 16px 20px; }
  .system-doors.huit .system-door .system-symbol { width: 44px; height: 44px; }
  .system-doors.huit .door-arrow { position: absolute; top: 18px; right: 14px; }
}
@media (max-width: 1240px) {
  .system-doors.huit { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .system-doors.huit .system-door:nth-child(4n) { border-right: 0; }
  .system-doors.huit .system-door:nth-child(-n+4) { border-bottom: 1px solid var(--line-soft); }
}
@media (max-width: 900px) {
  .system-doors.huit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .system-doors.huit .system-door { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .system-doors.huit .system-door:nth-child(odd) { border-right: 1px solid var(--line-soft); }
  .system-doors.huit .system-door:nth-last-child(-n+2) { border-bottom: 0; }
  .system-doors.huit .system-door .system-symbol { width: 36px; height: 36px; }
}

/* The loop of the doors, under the heading: the same rail as « Simulate → Fabricate ». */
.boucle-portes p { font-size: clamp(0.66rem, 1vw, 0.8rem); }
.boucle-portes a { color: rgba(243, 248, 251, 0.86); border-bottom: 1px solid transparent; }
.boucle-portes a:hover, .boucle-portes a:focus-visible { color: var(--ice); border-bottom-color: var(--cyan); }
.boucle-portes .retour { color: var(--amber); }

/* A panel's way into its page. */
.system-content .entrer { margin-top: 8px; }

/* 3. The three houses: one loop, Katoying at its heart. */
.trois-maisons {
  width: var(--content);
  margin: 0 auto;
  padding: 110px 0 100px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 84px);
  scroll-margin-top: 90px;
}
.trois-maisons h2 {
  margin: 0 0 26px;
  font-family: var(--display);
  font-size: clamp(2.6rem, 4.4vw, 4.6rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.96;
  text-transform: uppercase;
}
.trois-maisons .texte > p:not(.eyebrow) { max-width: 560px; color: var(--muted); font-size: 17px; line-height: 1.7; }
.maisons { margin: 30px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.maisons li {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-soft);
}
.maisons strong {
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.maisons strong span { display: block; margin-top: 4px; color: var(--amber); font-size: 11px; letter-spacing: 0.18em; }
.maisons p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.maisons a { color: var(--ice); border-bottom: 1px solid var(--line); }
.maisons a:hover, .maisons a:focus-visible { border-bottom-color: var(--cyan); }
.dessin-maisons { width: 100%; height: auto; display: block; }
.dessin-maisons text {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
@media (max-width: 900px) {
  .trois-maisons { grid-template-columns: 1fr; padding: 80px 0 70px; }
  .trois-maisons .dessin { order: -1; }
}
@media (max-width: 600px) {
  .maisons li { grid-template-columns: 1fr; gap: 6px; }
}

/* 4. The door pages: a figure after the principles, one or two images, with a caption. */
.figure-porte { margin: 84px 0 0; padding-top: 30px; border-top: 1px solid var(--line); }
.figure-porte .section-label { margin: 0 0 22px; }
.figure-porte img, .figure-porte svg.dessin-page {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line-soft);
}
.figure-porte img { aspect-ratio: 3 / 2; object-fit: cover; }
.figure-porte figcaption { margin-top: 12px; color: var(--note); font-size: 12px; letter-spacing: 0.03em; }
.figure-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.figure-duo figure { margin: 0; min-width: 0; }
@media (max-width: 760px) { .figure-duo { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .figure-porte { margin-top: 64px; padding-top: 24px; } }

/* Drawings painted by code (inline SVG): the same letters and colours as the site. */
svg.dessin-page { background: linear-gradient(180deg, #020711 0%, #06111f 80%, #020711 100%); }
svg.dessin-page text { font-family: var(--display); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
svg.dessin-page .lib { fill: var(--muted); font-size: 13px; }
svg.dessin-page .lib-fort { fill: var(--ice); font-size: 14px; }
svg.dessin-page .lib-ambre { fill: var(--amber); font-size: 13px; }
svg.dessin-page .trait { fill: none; stroke: rgba(216, 238, 248, 0.22); stroke-width: 1.2; }
svg.dessin-page .trait-fort { fill: none; stroke: rgba(216, 238, 248, 0.5); stroke-width: 1.4; }

/* The hero of a door page shows its image whole on a phone (no text over it). */
@media (max-width: 600px) {
  .detail-hero .detail-media img { object-position: var(--cadre-tel, center); }
}

/* 5. The 4D model of the next Foundry: a picture, and a visit that opens only on demand. */
.visite {
  margin: 84px 0 0;
  padding-top: 30px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 60px);
  align-items: start;
}
.visite .section-label { margin: 0 0 18px; }
.visite-images { display: grid; gap: 14px; }
.visite-images img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border: 1px solid var(--line-soft); }
.visite-images .petites { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.visite-texte h3 {
  margin: 0 0 16px;
  font-family: var(--display);
  font-size: clamp(1.7rem, 2.6vw, 2.5rem);
  letter-spacing: -0.03em;
  line-height: 1;
  text-transform: uppercase;
}
.visite-texte p { color: var(--muted); font-size: 15px; line-height: 1.7; }
.visite-texte ul { margin: 0 0 22px; padding: 0; list-style: none; border-top: 1px solid var(--line-soft); }
.visite-texte li { padding: 11px 0; border-bottom: 1px solid var(--line-soft); color: rgba(243, 248, 251, 0.86); font-size: 14px; }
.visite-texte li b { color: var(--cyan); font-family: var(--display); font-size: 11px; letter-spacing: 0.16em; margin-right: 10px; }
.visite-texte .note-labo { margin-top: 14px; }
@media (max-width: 900px) { .visite { grid-template-columns: 1fr; } }

/* 6. What we are waiting for: the path of the next Foundry, done in ice, open in orange. */
.attente {
  width: var(--content);
  margin: 0 auto;
  padding: 110px 0 120px;
  scroll-margin-top: 90px;
}
.attente-tete {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 6vw, 100px);
  align-items: end;
  margin-bottom: 46px;
}
.attente h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.6rem, 4.4vw, 4.6rem);
  letter-spacing: -0.04em;
  line-height: 0.96;
  text-transform: uppercase;
}
.attente-tete p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.7; }
.chemin {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.chemin li { position: relative; padding: 26px 20px 30px 0; border-right: 1px solid var(--line-soft); }
.chemin li + li { padding-left: 20px; }
.chemin li:last-child { border-right: 0; }
.chemin li::before {
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(140, 236, 255, 0.7);
  content: "";
}
.chemin li + li::before { left: 20px; }
.chemin .etat {
  display: block;
  margin-bottom: 10px;
  color: var(--cyan);
  font-family: var(--display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.chemin h3 { margin: 0 0 8px; font-family: var(--display); font-size: clamp(1.1rem, 1.6vw, 1.4rem); line-height: 1.15; text-transform: uppercase; letter-spacing: -0.01em; }
.chemin p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.chemin li.ouvert::before { background: var(--amber); box-shadow: 0 0 12px rgba(255, 156, 74, 0.8); }
.chemin li.ouvert .etat { color: var(--amber); }
.chemin li.ouvert { background: linear-gradient(180deg, var(--orange-doux), transparent 70%); }
.chemin li.loin::before { background: transparent; box-shadow: inset 0 0 0 1.4px var(--muted); }
.chemin li.loin .etat { color: var(--note); }
.attente-pied { display: flex; flex-wrap: wrap; gap: 18px 34px; align-items: center; margin-top: 40px; }
.attente-pied p { margin: 0; max-width: 620px; color: var(--note); font-size: 13px; line-height: 1.6; }
@media (max-width: 1100px) {
  .chemin { grid-template-columns: 1fr 1fr; }
  .chemin li, .chemin li + li { padding: 24px 18px 26px 0; border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .chemin li::before, .chemin li + li::before { left: 0; }
  .chemin li:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--line-soft); }
  .chemin li:nth-child(even)::before { left: 18px; }
}
@media (max-width: 900px) { .attente-tete { grid-template-columns: 1fr; } .attente { padding: 80px 0 90px; } }
@media (max-width: 600px) {
  .chemin { grid-template-columns: 1fr; }
  .chemin li:nth-child(even) { padding-left: 0; border-left: 0; }
  .chemin li:nth-child(even)::before { left: 0; }
}

/* The same path on the Nourish page, and what the help would open. */
.ouvre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 26px; }
.ouvre article { padding: 34px 28px 38px 0; }
.ouvre article + article { padding-left: 28px; border-left: 1px solid var(--line-soft); }
.ouvre h3 { margin: 0 0 14px; font-family: var(--display); font-size: clamp(1.4rem, 2.1vw, 2rem); line-height: 1.04; text-transform: uppercase; letter-spacing: -0.02em; }
.ouvre p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.ouvre .fact-index { margin-bottom: 14px; }
@media (max-width: 900px) {
  .ouvre { grid-template-columns: 1fr; }
  .ouvre article, .ouvre article + article { padding: 28px 0; border-left: 0; border-bottom: 1px solid var(--line-soft); }
  .ouvre article:last-child { border-bottom: 0; }
}

/* 7. The next door, at the end of every door page: the loop goes on. */
.porte-suivante {
  display: grid;
  grid-template-columns: minmax(160px, 0.35fr) 1fr;
  gap: 8vw;
  padding-top: 84px;
}
.porte-suivante h2 { margin: 0; font-family: var(--display); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; }
.porte-suivante .lien-porte {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 22px 0 24px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.porte-suivante .lien-porte:hover, .porte-suivante .lien-porte:focus-visible { background: linear-gradient(90deg, #0c1b29, transparent 70%); }
.porte-suivante .lien-porte img { width: 64px; height: 64px; flex: 0 0 auto; }
.porte-suivante .lien-porte strong {
  display: block;
  font-family: var(--display);
  font-size: clamp(2rem, 3.6vw, 3.6rem);
  letter-spacing: -0.03em;
  line-height: 1;
  text-transform: uppercase;
}
.porte-suivante .lien-porte span { display: block; margin-top: 8px; color: var(--muted); font-size: 15px; }
.porte-suivante .lien-porte .fleche { margin-left: auto; color: var(--amber); font-family: var(--display); font-size: 28px; }
.porte-suivante .edge-links { margin-top: 28px; }
@media (max-width: 900px) { .porte-suivante { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 600px) { .porte-suivante .lien-porte img { width: 48px; height: 48px; } .porte-suivante .lien-porte { gap: 14px; } }

/* 8. Write to us: a button; the address is put together only when someone presses it. */
.ecrire {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.ecrire:hover, .ecrire:focus-visible { color: var(--ice); }
.ecrire-adresse { margin-left: 6px; color: var(--ice); text-transform: none; letter-spacing: 0.04em; }

/* 9. Air after a figure, and the next door's name in full light. */
.figure-porte + .field-notes, .visite + .field-notes { margin-top: 72px; }
.porte-suivante .lien-porte strong { color: var(--ice); }
@media (max-width: 600px) { .figure-porte + .field-notes, .visite + .field-notes { margin-top: 52px; } }

/* 10. Phone review of 18/10 (peint/RELECTURE_TELEPHONE.md). */
/* Headings and small labels break into balanced lines: no lone word, no article left at a line's end. */
h1, h2, h3, .section-label, .detail-kicker, .system-kicker, .hero-kicker { text-wrap: balance; }
/* Flow lines: each arrow travels with the word after it. */
.relation-rail p { text-wrap: balance; }
.relation-rail span.pas { margin: 0; color: inherit; white-space: nowrap; }
.relation-rail span.pas > span { margin: 0 clamp(8px, 1.8vw, 26px); color: var(--amber); }
/* The Foundry's white model sits under the title on a phone: it dims there, the words stay clear (about 8:1). */
@media (max-width: 600px) {
  .detail-hero[aria-labelledby="foundry-title"] .detail-media img { filter: brightness(0.32); }
}
/* Drawings keep their size on a phone and scroll sideways inside their frame: labels stay about 10 px tall. */
.dessin-defile { position: relative; }
@media (max-width: 640px) {
  .dessin-defile { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .dessin-defile svg.dessin-page { width: 760px; max-width: none; }
  .dessin-defile + .defile-aide { display: block; }
}
.defile-aide { display: none; margin: 8px 0 0; color: var(--note); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
/* Breathing on a phone: the first list after the flow line, and the end of a page before its footer. */
@media (max-width: 480px) {
  .relation-rail + .detail-body { padding-top: 48px; }
  .detail-body { padding-bottom: 72px; }
}

/* 11. The visit page: the weight of the 3D, said before the click. */
.visite-note { margin: 22px 0 0; color: var(--muted); font-size: 12px; letter-spacing: 0.03em; }
.detail-content .edge-links { display: flex; flex-wrap: wrap; gap: 14px 28px; }