/* Ambiguïtés : laboratoire des perceptions. */
:root { --lab-night: #101014; --lab-paper: #f7f5ef; --lab-line: rgba(255,255,255,.16); }
body.lab-index, body.lab-section { background: var(--lab-night) !important; color: #fff; }
body.lab-index::before, body.lab-section::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size: 3.5rem 3.5rem; opacity: .5; }
body.lab-images { --lab-accent: #ffe15a; --lab-ink: #16151a; --lab-wash: #195ed8; }
body.lab-objects { --lab-accent: #ff714d; --lab-ink: #16151a; --lab-wash: #26c7c2; }
body.lab-distortions { --lab-accent: #ff4fa3; --lab-ink: #16151a; --lab-wash: #9b67ff; }
body.lab-letters { --lab-accent: #baff37; --lab-ink: #16151a; --lab-wash: #ff705d; }
body.lab-section { --lab-accent: #31e0de; --lab-ink: #16151a; --lab-wash: #4056b9; }
body.lab-tone-1 { --lab-accent: #ffe15a; --lab-wash: #195ed8; }
body.lab-tone-2 { --lab-accent: #ff714d; --lab-wash: #26c7c2; }
body.lab-tone-3 { --lab-accent: #ff4fa3; --lab-wash: #9b67ff; }
body.lab-tone-4 { --lab-accent: #baff37; --lab-wash: #ff705d; }
body.lab-tone-5 { --lab-accent: #9d7bff; --lab-wash: #ffb14c; }
body.lab-tone-6 { --lab-accent: #31e0de; --lab-wash: #e43c70; }
body.lab-section.lab-images { --lab-accent: #ffe15a; --lab-wash: #195ed8; }
body.lab-section.lab-objects { --lab-accent: #ff714d; --lab-wash: #26c7c2; }
body.lab-section.lab-distortions { --lab-accent: #ff4fa3; --lab-wash: #9b67ff; }
body.lab-section.lab-letters { --lab-accent: #baff37; --lab-wash: #ff705d; }

body.lab-index #header, body.lab-section #header { padding-top: 1.5rem; }
body.lab-index #header .logo, body.lab-section #header .logo { color: #fff !important; }
body.lab-index #header nav ul li a, body.lab-section #header nav ul li a { border-color: var(--lab-line); background: rgba(255,255,255,.04); color: #fff !important; }
body.lab-index #menu, body.lab-section #menu { background: #17171e !important; color: #fff !important; }

/* Le retour accueil devient un repère explicite sous le logo. */
body.lab-section #header .logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  text-align: center;
}
body.lab-section #header .logo .symbol { margin: 0; }
body.lab-section #header .logo .title {
  display: block;
  margin: 0;
  color: rgba(255,255,255,.82);
  font-family: 'DM Sans',sans-serif;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1;
  text-transform: uppercase;
}
/* Sur les anciennes pages, le logo est placé au début du contenu : même repère, même centrage. */
body.lab-section .amb-article-body > .logo {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: max-content;
  margin: 0 auto 2rem;
  border: 0;
  color: #172d73 !important;
  text-align: center;
}
body.lab-section .amb-article-body > .logo .symbol { display: block; margin: 0; }
body.lab-section .amb-article-body > .logo .title {
  display: block;
  margin: .45rem 0 0;
  color: #172d73;
  font-family: 'DM Sans',sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1;
  text-transform: uppercase;
}

body.lab-index #main > .inner { max-width: 78rem; }
body.lab-index .amb-hero, body.lab-section .amb-hero {
  position: relative; overflow: hidden; margin: 3rem 0 1.2rem; padding: clamp(2rem,6vw,5.5rem); border: 1px solid var(--lab-line); border-radius: 1.8rem; background: #181820 !important; box-shadow: none;
}
body.lab-index .amb-hero::before, body.lab-section .amb-hero::before { content: ''; position: absolute; width: 30rem; height: 30rem; right: -16rem; top: -18rem; border: 2.2rem solid #31e0de; border-radius: 50%; }
body.lab-index .amb-hero::after, body.lab-section .amb-hero::after { content: ''; position: absolute; width: 8rem; height: 8rem; left: 9%; bottom: -4rem; background: #ff4fa3; transform: rotate(45deg); }
body.lab-index .amb-hero h1, body.lab-section .amb-hero h1 { position: relative; z-index: 1; max-width: 12ch; margin: 0; color: #fff !important; font-family: 'Space Grotesk',sans-serif; font-size: clamp(3.1rem,8vw,7.3rem); font-weight: 700; letter-spacing: -.095em; line-height: .84; }
body.lab-index .amb-hero h2, body.lab-section .amb-hero h2 { position: relative; z-index: 1; max-width: 38rem; margin: 1.8rem 0 0; color: rgba(255,255,255,.78) !important; font-family: 'DM Sans',sans-serif; font-size: 1.08rem; letter-spacing: 0; line-height: 1.6; text-transform: none; }
body.lab-index .amb-kicker, body.lab-section .amb-kicker { position: relative; z-index: 1; color: #31e0de !important; }

/* Les quatre séries deviennent des zones de perception, et non des tuiles. */
body.lab-index #main .tiles { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 1rem; width: min(100%,68rem); margin: 0 auto 1rem; }
body.lab-index #main .tiles article { width: auto; max-width: none; min-height: 21rem; margin: 0; border: 0; border-radius: 1.4rem; box-shadow: none; overflow: hidden; transform: none !important; }
body.lab-index #main .tiles article > .image { height: 100%; border-radius: 0; opacity: .28; transition: transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s ease; }
body.lab-index #main .tiles article > .image::before { opacity: .1 !important; }
body.lab-index #main .tiles article > a { align-items: flex-start; justify-content: flex-end; height: 100%; padding: 1.8rem; text-align: left; }
body.lab-index #main .tiles article > a h2 { max-width: 10ch; margin: 0; padding: 0; border-radius: 0; background: none; color: #fff !important; font-family: 'Space Grotesk',sans-serif; font-size: clamp(2.4rem,4.5vw,4.8rem); font-weight: 700; letter-spacing: -.09em; line-height: .84; box-shadow: none; text-shadow: none; }
body.lab-index #main .tiles article > a .content { display: none; }
body.lab-index #main .tiles:first-of-type article:first-child { grid-column: span 7; background: #195ed8; }
body.lab-index #main .tiles:first-of-type article:last-child { grid-column: span 5; background: #ff714d; }
body.lab-index #main .tiles:last-of-type article:first-child { grid-column: span 5; background: #a348d3; }
body.lab-index #main .tiles:last-of-type article:last-child { grid-column: span 7; background: #d1aa00; }
body.lab-index #main .tiles:last-of-type article:last-child > a h2 { color: #16151a !important; }
body.lab-index #main .tiles article > a::before { position: absolute; top: 1.7rem; left: 1.8rem; color: rgba(255,255,255,.85); font: 700 .7rem/1 'DM Sans',sans-serif; letter-spacing: .14em; text-transform: uppercase; content: 'Série à expérimenter'; }
body.lab-index #main .tiles:last-of-type article:last-child > a::before { color: #16151a; }
body.lab-index #main .tiles article:hover > .image, body.lab-index #main .tiles article:focus-within > .image { opacity: .55; transform: scale(1.08) rotate(1deg); }
body.lab-index #main .tiles article:hover { box-shadow: 0 1.4rem 3.2rem rgba(0,0,0,.3); }

/* Les rubriques : un mur de spécimens colorés, lisible et tactile. */
body.lab-section #main > .inner { max-width: 78rem; }
body.lab-section .amb-hero { border-color: color-mix(in srgb,var(--lab-accent) 65%,white); }
body.lab-section .amb-hero::before { border-color: var(--lab-accent); }
body.lab-section .amb-hero::after { background: var(--lab-wash); }
body.lab-section .amb-kicker { color: var(--lab-accent) !important; }
body.lab-section #main .tiles { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: .85rem; width: 100%; margin: 0 0 5rem; }
body.lab-section #main .tiles article { grid-column: span 4; width: auto; min-height: 15rem; margin: 0; border: 1px solid rgba(255,255,255,.2); border-radius: 1rem; box-shadow: none; overflow: hidden; transform: none !important; }
body.lab-section #main .tiles article:nth-child(5n + 1) { grid-column: span 5; }
body.lab-section #main .tiles article:nth-child(5n + 2) { grid-column: span 3; }
body.lab-section #main .tiles article > .image { height: 100%; border-radius: 0; opacity: .35; transition: opacity .3s ease,transform .4s ease; }
body.lab-section #main .tiles article > .image::before { background: var(--lab-wash) !important; opacity: .3 !important; }
body.lab-section #main .tiles article > a { align-items: flex-start; justify-content: flex-end; height: 100%; padding: 1.25rem; text-align: left; }
body.lab-section #main .tiles article > a h2 { max-width: 14ch; margin: 0; padding: .55rem .65rem; border-radius: .35rem; background: var(--lab-accent); color: var(--lab-ink) !important; font-family: 'Space Grotesk',sans-serif; font-size: clamp(1rem,2vw,1.5rem); font-weight: 700; letter-spacing: -.045em; line-height: 1; box-shadow: none; text-shadow: none; }
body.lab-section #main .tiles article > a .content { display: block; max-width: 23rem; max-height: none; margin: .55rem 0 0; padding: .55rem .65rem; border-radius: .35rem; background: rgba(16,16,20,.83); color: #fff !important; font-size: .82rem; line-height: 1.35; opacity: 1; }
body.lab-section #main .tiles article:hover > .image, body.lab-section #main .tiles article:focus-within > .image { opacity: .62; transform: scale(1.08); }
body.lab-section #main .tiles article:hover { box-shadow: 0 1.1rem 2.4rem rgba(0,0,0,.32); }

body.lab-index #form { display: flex; align-items: center; justify-content: center; gap: .65rem; margin: 2.5rem 0; color: #fff; font-family: 'DM Sans',sans-serif; }
body.lab-index #form input { border: 1px solid var(--lab-line); border-radius: .5rem; background: #20212a; color: #fff; padding: .75rem; }
body.lab-index #form input[type="text"] { width: min(20rem, 50%); }
body.lab-index #form input[type="submit"] { background: #31e0de; color: #101014; font-weight: 700; cursor: pointer; }
body.lab-index hr, body.lab-index h6 { color: rgba(255,255,255,.62); border-color: var(--lab-line); }

/* Les pages d'observation : une fiche de laboratoire plutôt qu'une page classique. */
body.lab-section .amb-article { overflow: visible; max-width: 68rem; margin: 2.8rem auto 5rem; padding: 0; border: 0; border-radius: 1.5rem; background: transparent; color: var(--lab-ink); box-shadow: none; }
body.lab-section .amb-article-hero { position: relative; overflow: hidden; min-height: 24rem; margin: 0; padding: clamp(2rem,6vw,5.4rem); border: 1px solid color-mix(in srgb,var(--lab-accent) 60%,white); border-radius: 1.5rem; background: #181820 !important; box-shadow: none; }
body.lab-section .amb-article-hero::before { content: ''; position: absolute; width: 21rem; height: 21rem; right: -8rem; top: -9rem; border: 2.2rem solid var(--lab-accent); border-radius: 50%; }
body.lab-section .amb-article-hero h1 { position: relative; z-index: 1; max-width: 12ch; color: #fff !important; font-family: 'Space Grotesk',sans-serif; font-size: clamp(3rem,7vw,6.5rem); font-weight: 700; letter-spacing: -.09em; line-height: .85; }
body.lab-section .amb-article-hero h2 { position: relative; z-index: 1; color: rgba(255,255,255,.76) !important; }
body.lab-section .amb-article-hero .amb-kicker { position: relative; z-index: 1; color: var(--lab-accent) !important; }
body.lab-section .amb-article-body { width: min(100% - 3rem,56rem); margin: -2.4rem auto 0; padding: clamp(1.6rem,5vw,4.5rem); border-radius: 1.1rem; background: var(--lab-paper); box-shadow: 0 1rem 3rem rgba(0,0,0,.28); color: #182038; font-family: 'DM Sans',sans-serif; font-size: 1.06rem; line-height: 1.9; }
body.lab-section .amb-article-body > p:first-of-type::first-letter { float: left; margin: .05em .1em 0 0; color: var(--lab-wash); font-family: 'Space Grotesk',sans-serif; font-size: 4.2em; font-weight: 700; line-height: .7; }
body.lab-section .amb-article-body h2, body.lab-section .amb-article-body h3 { color: #182038; font-family: 'Space Grotesk',sans-serif; }
body.lab-section .amb-article-body a { color: #172d73; text-decoration-color: var(--lab-accent); }

body.lab-section .amb-search { max-width: 58rem; border: 1px solid var(--lab-line); border-radius: 1.5rem; background: #181820; color: #fff; box-shadow: none; }
body.lab-section .amb-search h1, body.lab-section .amb-search h1 em, body.lab-section .amb-search p, body.lab-section .amb-search label { color: #fff !important; }
body.lab-section .amb-search h1 { font-family: 'Space Grotesk',sans-serif; font-size: clamp(2.5rem,6vw,5rem); }
body.lab-section .amb-search-form button { background: var(--lab-accent); color: var(--lab-ink) !important; }

@media (max-width: 736px) {
  body.lab-index .amb-hero, body.lab-section .amb-hero { margin-top: 1.4rem; border-radius: 1.1rem; }
  body.lab-index #main .tiles, body.lab-section #main .tiles { display: block; }
  body.lab-index #main .tiles article, body.lab-section #main .tiles article { width: 100%; min-height: 17rem; margin: .85rem 0; }
  body.lab-index #main .tiles article > a h2 { font-size: clamp(2.4rem,13vw,4rem); }
  body.lab-section #main .tiles article > a .content { font-size: .78rem; }
  body.lab-section .amb-article-hero { min-height: 19rem; border-radius: 1rem; }
  body.lab-section .amb-article-body { width: calc(100% - 1.5rem); margin-top: -1.4rem; padding: 1.5rem 1.2rem 2.5rem; }
  body.lab-index #form { flex-wrap: wrap; }
  body.lab-index #form input[type="text"] { width: min(100%,20rem); }
}

@media (prefers-reduced-motion: reduce) { body.lab-index #main .tiles article > .image, body.lab-section #main .tiles article > .image { transition: none; } }