/* ============================================================
   TESSERACT — feuille de style du site (thème « Labo »)
   Nuit + violet + cyan, mise en page de carnet de laboratoire :
   grille en fond, cadres à repères, étiquettes en monospace.
   ============================================================ */

:root{
  /* Couleurs */
  --bg: #07080d;
  --bg-2: #0c0d15;
  --bg-3: #12131d;
  --line: rgba(255,255,255,0.08);
  --line-strong: rgba(255,255,255,0.18);
  --grid: rgba(255,255,255,0.035);
  --text: #ececf2;
  --text-soft: rgba(236,236,242,0.82);
  --muted: #8b90a6;
  --dim: #5d6178;
  --violet: #6c4cff;
  --cyan: #3fe8d0;
  --violet-soft: rgba(108,76,255,0.16);
  --cyan-soft: rgba(63,232,208,0.12);
  --ink: #05060a; /* texte posé sur le cyan */

  /* Typo */
  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Consolas', monospace;

  /* Mise en page */
  --container: 1200px;
  --gutter: 32px;
  --radius: 6px;
  --header-h: 72px;

  --ease: cubic-bezier(.16,.8,.24,1);
}

/* ---------- Base ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Grille de laboratoire, fixe, qui s'efface vers les bords */
body::before{
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 100%);
}
h1,h2,h3,h4,p,ul,ol,figure{ margin: 0; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; background: none; border: none; padding: 0; cursor: pointer; color: inherit; }
img{ max-width: 100%; display: block; }
::selection{ background: var(--cyan); color: var(--ink); }

.visually-hidden{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link{
  position: absolute; top: -48px; left: 16px;
  background: var(--cyan); color: var(--ink);
  padding: 8px 16px; border-radius: var(--radius);
  font-weight: 600; z-index: 300; transition: top .2s var(--ease);
}
.skip-link:focus{ top: 16px; }
:focus-visible{ outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 2px; }

.container{
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Filigrane de fond (tourne avec le scroll, voir script.js) ---------- */
.bg-watermark{
  position: fixed;
  inset: 0;
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}
.bg-watermark img{
  width: min(80vw, 980px);
  opacity: .035;
  filter: blur(14px);
  will-change: transform;
}

/* ---------- Typo utilitaire ---------- */
.mono{ font-family: var(--font-mono); }
.label{
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.label--accent{ color: var(--cyan); }
.tag{
  display: inline-flex;
  align-items: center;
  gap: .5em;
  width: fit-content;
  padding: .3em .7em;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(255,255,255,.02);
}
.tag--cyan{ border-color: rgba(63,232,208,.45); color: var(--cyan); }
.tag--violet{ border-color: rgba(108,76,255,.55); color: #a996ff; }
.dot{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 0 var(--cyan-soft);
  animation: pulse-dot 2.4s ease-in-out infinite;
}
.dot--violet{ background: var(--violet); }
@keyframes pulse-dot{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(63,232,208,.35); }
  50%{ box-shadow: 0 0 0 6px transparent; }
}

/* ---------- Boutons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 46px;
  padding: .75em 1.35em;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.2;
  transition: transform .3s var(--ease), background .25s, border-color .25s, color .25s, box-shadow .3s var(--ease);
}
.btn .arrow{ transition: transform .3s var(--ease); }
.btn:hover .arrow{ transform: translateX(4px); }
.btn-primary{ background: var(--cyan); color: var(--ink); }
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 12px 30px -10px rgba(63,232,208,.55); }
.btn-ghost{ border-color: var(--line-strong); color: var(--text); background: rgba(255,255,255,.02); }
.btn-ghost:hover{ border-color: var(--cyan); background: var(--cyan-soft); }
.link-arrow{
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-weight: 600;
  font-size: .95rem;
  color: var(--text);
  transition: color .25s;
}
.link-arrow .arrow{ transition: transform .3s var(--ease); }
.link-arrow:hover{ color: var(--cyan); }
.link-arrow:hover .arrow{ transform: translateX(4px); }
.actions{ display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- Cadre « spécimen » : repères aux coins ---------- */
.frame{
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
}
.frame::before,
.frame::after{
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border: 0 solid var(--cyan);
  pointer-events: none;
  z-index: 2;
}
.frame::before{ top: -1px; left: -1px; border-top-width: 1.5px; border-left-width: 1.5px; border-top-left-radius: var(--radius); }
.frame::after{ bottom: -1px; right: -1px; border-bottom-width: 1.5px; border-right-width: 1.5px; border-bottom-right-radius: var(--radius); }

.figure-media{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 16 / 10;
  background: var(--bg-3);
}
.figure-media img{ width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.figure-media--wide{ aspect-ratio: 21 / 8; }
.figcaption{
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- En-tête ---------- */
.site-header{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.site-header.is-scrolled{
  background: rgba(7,8,13,0.78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand{ display: flex; align-items: center; gap: 12px; }
.brand-mark{ width: 28px; height: auto; flex: none; }
.brand-name{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: .01em;
}
.brand-name small{
  margin-left: .5em;
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan);
  vertical-align: middle;
}
.site-nav{ display: flex; align-items: center; gap: 28px; }
.site-nav a{
  position: relative;
  font-size: .92rem;
  color: var(--muted);
  padding-block: 4px;
  transition: color .25s;
}
.site-nav a:not(.nav-cta)::after{
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.site-nav a:hover,
.site-nav a[aria-current="page"]{ color: var(--text); }
.site-nav a:not(.nav-cta):hover::after,
.site-nav a[aria-current="page"]::after{ transform: scaleX(1); }
.nav-cta{
  padding: .45em 1em !important;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text) !important;
  transition: border-color .25s, background .25s;
}
.nav-cta:hover,
.nav-cta[aria-current="page"]{ border-color: var(--cyan); background: var(--cyan-soft); }

.nav-toggle{
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px; height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
.nav-toggle span{
  display: block;
  width: 18px; height: 1.5px;
  margin-inline: auto;
  background: var(--text);
  transition: transform .3s var(--ease), opacity .3s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

.mobile-nav{
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h) + 24px) 16px 24px;
  background: var(--bg);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .4s var(--ease), visibility 0s linear .4s;
}
.mobile-nav.is-open{ transform: translateY(0); visibility: visible; transition: transform .4s var(--ease); }
.mobile-nav a{
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-block: 16px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
}
.mobile-nav a span{ font-family: var(--font-mono); font-size: .72rem; color: var(--cyan); }

/* ---------- Bloc d'introduction (accueil) : forêt de nuit plein écran ---------- */
.hero{
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--header-h) + 48px) 0 clamp(72px, 12vh, 128px);
  overflow: hidden;
  isolation: isolate;
}
.hero-bg{
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.hero-bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  filter: blur(1.5px) brightness(.62) saturate(.85);
  transform: scale(1.06);
  animation: hero-drift 40s ease-in-out infinite alternate;
}
/* Brume : on fond l'image dans la nuit du site, plus sombre en bas à gauche, sous le titre */
.hero-bg::after{
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 30%, rgba(7,8,13,.75) 100%),
    linear-gradient(100deg, rgba(7,8,13,.85) 0%, rgba(7,8,13,.35) 55%, transparent 80%),
    linear-gradient(to bottom, rgba(7,8,13,.55) 0%, transparent 22%, transparent 55%, var(--bg) 100%);
}
@keyframes hero-drift{
  from{ transform: scale(1.06) translate3d(0, 0, 0); }
  to{ transform: scale(1.14) translate3d(-1.5%, -1%, 0); }
}
.hero-title{
  max-width: 11ch;
  font-family: var(--font-display);
  font-size: clamp(3rem, 8.5vw, 7.5rem);
  line-height: .95;
  font-weight: 700;
  letter-spacing: -0.035em;
  text-shadow: 0 10px 60px rgba(0,0,0,.45);
}
.hero-foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 32px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.14);
}
.scroll-cue{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: color .25s;
}
.scroll-cue:hover{ color: var(--text); }
.scroll-cue i{
  position: relative;
  width: 1px; height: 36px;
  background: rgba(255,255,255,.18);
  overflow: hidden;
}
.scroll-cue i::after{
  content: '';
  position: absolute;
  left: 0; top: -40%;
  width: 1px; height: 40%;
  background: var(--cyan);
  animation: scroll-cue 2.2s var(--ease) infinite;
}
@keyframes scroll-cue{ to{ top: 100%; } }
.hero-title em{
  font-style: normal;
  background: linear-gradient(100deg, var(--violet), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- En-tête des sous-pages ---------- */
.page-head{
  position: relative;
  padding: calc(var(--header-h) + 72px) 0 56px;
  border-bottom: 1px solid var(--line);
}
.crumbs{
  display: flex;
  flex-wrap: wrap;
  gap: .6em;
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--dim);
}
.crumbs a{ color: var(--muted); transition: color .2s; }
.crumbs a:hover{ color: var(--cyan); }
.crumbs [aria-current]{ color: var(--cyan); }
.page-title{
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 5.4rem);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 20px 0 20px;
}
.page-lead{
  max-width: 62ch;
  color: var(--text-soft);
  font-size: 1.1rem;
  line-height: 1.7;
}
.page-head .actions, .lost .actions{ margin-top: 28px; }
.page-head .tag{ margin-top: 20px; }
.page-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-top: 32px;
}
.page-meta div{ display: flex; flex-direction: column; gap: 2px; }
.page-meta dd, .page-meta .val{ margin: 0; font-family: var(--font-display); font-weight: 600; }

/* ---------- Sections ---------- */
.section{ padding-block: 96px; }
.section + .section{ border-top: 1px solid var(--line); }
.section--tight{ padding-block: 64px; }
.sec-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 48px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.sec-head-text{ max-width: 680px; }
.sec-num{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.sec-num::after{
  content: '';
  width: 48px; height: 1px;
  background: var(--line-strong);
}
.sec-title{
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.sec-lead{
  margin-top: 16px;
  color: var(--muted);
  font-size: 1.04rem;
  line-height: 1.7;
}

/* ---------- Cartes ---------- */
.card-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.card-grid--3{ grid-template-columns: repeat(3, 1fr); }
.card{
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
  overflow: hidden;
  transition: border-color .35s var(--ease), transform .35s var(--ease), background .35s;
}
a.card:hover, .card--hover:hover{ border-color: rgba(63,232,208,.45); transform: translateY(-4px); background: var(--bg-3); }
a.card:hover .figure-media img, .card--hover:hover .figure-media img{ transform: scale(1.04); }
.card .figure-media{ border-radius: 0; border-bottom: 1px solid var(--line); }
.card-body{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  flex: 1;
}
.card-top{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.card-title{
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.2;
}
.card-text{ color: var(--muted); font-size: .95rem; line-height: 1.65; flex: 1; }
.card-foot{ margin-top: 4px; }
.card--text .card-body{ padding: 28px; }
.card--icon{ flex-direction: row; align-items: flex-start; gap: 4px; padding: 24px 0 0 24px; }
.card--icon .card-body{ padding: 0 24px 24px 20px; }
.card-icon{ width: 72px; height: 72px; object-fit: cover; transition: transform .35s var(--ease); }
a.card--icon:hover .card-icon{ transform: rotate(-3deg) scale(1.05); }

/* ---------- Bloc mis en avant (map vedette, Mirage) ---------- */
.feature{
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: center;
}
.feature--reverse{ grid-template-columns: 1fr 1.15fr; }
.feature--reverse .feature-media{ order: 2; }
.feature-body{ display: flex; flex-direction: column; gap: 16px; }
.feature-body h2, .feature-body h3{
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.feature-body p{ color: var(--muted); font-size: 1.02rem; line-height: 1.7; }
.feature-body .actions{ margin-top: 8px; }

/* ---------- Code d'île copiable (Maps) ---------- */
.map-code{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  padding: 10px 10px 10px 14px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: rgba(255,255,255,.015);
}
.map-code-label{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.map-code-label span:first-child{
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
}
.map-code-value{
  font-family: var(--font-mono);
  font-size: .95rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.map-code-copy{
  flex: none;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--muted);
  transition: color .25s, border-color .25s, background .25s;
}
.map-code-copy:hover{ color: var(--text); border-color: var(--cyan); }
.map-code-copy.is-copied{ color: var(--ink); background: var(--cyan); border-color: var(--cyan); }
.creator-code{ font-family: var(--font-mono); font-size: .78rem; color: var(--muted); }
.creator-code strong{ color: var(--text); font-weight: 500; }
.affiliate-note{
  margin-top: 32px;
  max-width: 640px;
  color: var(--dim);
  font-size: .8rem;
  line-height: 1.6;
}

/* ---------- Expériences ---------- */
.exp-list{ display: flex; flex-direction: column; gap: 32px; }
.exp{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 32px;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
  transition: border-color .35s var(--ease);
}
.exp:hover{ border-color: rgba(63,232,208,.4); }
/* Icône d'application de l'expérience, volontairement petite */
.exp-icon, .card-icon{
  display: block;
  flex: none;
  border-radius: 22%;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line-strong), 0 14px 30px -14px rgba(0,0,0,.8);
}
.exp-icon{ width: 112px; height: 112px; transition: transform .35s var(--ease); }
.exp-icon img{ width: 100%; height: 100%; object-fit: cover; }
.exp:hover .exp-icon{ transform: rotate(-3deg) scale(1.04); }
.exp-body{ display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.exp-meta{ display: flex; flex-wrap: wrap; gap: 8px 20px; }
.exp-meta span{ display: inline-flex; align-items: center; gap: 8px; }
.exp-title{
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.exp-text{ color: var(--text-soft); line-height: 1.7; }
.exp-notes{
  display: grid;
  gap: 8px;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.exp-notes li{
  position: relative;
  padding-left: 22px;
  color: var(--muted);
  font-size: .93rem;
  line-height: 1.6;
}
.exp-notes li::before{
  content: '→';
  position: absolute;
  left: 0; top: 0;
  font-family: var(--font-mono);
  color: var(--cyan);
}
.stack{ display: flex; flex-wrap: wrap; gap: 6px; }
.exp-body .actions{ margin-top: auto; padding-top: 8px; }

/* Encadré « laisse un retour » */
.callout{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px 48px;
  padding: 40px;
}
.callout h2{
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.15;
  font-weight: 700;
  margin: 10px 0 10px;
}
.callout p{ color: var(--muted); max-width: 56ch; }

/* ---------- Mirage ---------- */
.spec-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
}
.frame + .spec-grid{ margin-top: 24px; }
.video-frame video{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius) var(--radius) 0 0;
}
.spec-item{ padding: 20px 24px; }
.spec-item + .spec-item{ border-left: 1px solid var(--line); }
.spec-value{
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.35;
}
.quote-card{ max-width: 820px; padding: 40px; }
.quote-card p:not(.label){
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.6;
  color: var(--text);
}
.notes{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.note{ padding: 28px; }
.note h3{
  margin: 10px 0 10px;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
}
.note p{ color: var(--muted); line-height: 1.75; }

/* ---------- Manifeste ---------- */
.manifesto{ padding-block: 112px; text-align: center; border-top: 1px solid var(--line); }
.manifesto p{
  max-width: 900px;
  margin-inline: auto;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.2vw, 2.3rem);
  font-weight: 500;
  line-height: 1.4;
  color: var(--muted);
}
.manifesto span{ color: var(--text); }

/* ---------- Studio ---------- */
.letter{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 64px;
  align-items: start;
}
.letter-text .label{ margin-bottom: 24px; }
.letter-text p{ color: var(--text-soft); font-size: 1.12rem; line-height: 1.85; }
.letter-text p + p{ margin-top: 20px; }
.letter-text .signature{ margin-top: 32px; font-family: var(--font-mono); font-size: .9rem; color: var(--cyan); }
.letter-aside{ position: sticky; top: calc(var(--header-h) + 24px); }
.tesseract-box{ aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.tesseract-box svg{ width: 78%; height: 78%; overflow: visible; }
.tess-outer{ fill: none; stroke: rgba(255,255,255,.45); stroke-width: .6; }
.tess-inner{ fill: none; stroke: var(--cyan); stroke-width: .6; }
.tess-link{ stroke: rgba(255,255,255,.3); stroke-width: .4; }

/* ---------- Réseaux ---------- */
/* Hexagone qui tourne lentement ; chaque bulle tourne en sens inverse pour rester droite. */
.hex-diagram{
  position: relative;
  width: min(100%, 860px);
  aspect-ratio: 1;
  margin-inline: auto;
}
.hex-rotate{
  position: absolute;
  inset: 0;
  animation: hex-spin 110s linear infinite;
}
.hex-lines{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.hex-edge{ fill: none; stroke: rgba(255,255,255,.4); stroke-width: .5; }
.hex-edge--inner{ stroke: rgba(63,232,208,.45); stroke-width: .4; stroke-dasharray: 1.2 1.2; }
.hex-spoke{ stroke: rgba(255,255,255,.2); stroke-width: .35; }
.hex-core{ fill: none; stroke: rgba(108,76,255,.55); stroke-width: .4; }
.hex-center{
  position: absolute;
  top: 50%; left: 50%;
  width: 15%;
  transform: translate(-50%, -50%);
  opacity: .85;
}
.hex-center img{ width: 100%; animation: hex-counter-spin 110s linear infinite; }

.hex-node{ position: absolute; transform: translate(-50%, -50%); }
.hex-node--1{ top: 14%; left: 50%; }
.hex-node--2{ top: 32%; left: 81.18%; }
.hex-node--3{ top: 68%; left: 81.18%; }
.hex-node--4{ top: 86%; left: 50%; }
.hex-node--5{ top: 68%; left: 18.82%; }
.hex-node--6{ top: 32%; left: 18.82%; }
.hex-node-counter{ animation: hex-counter-spin 110s linear infinite; }
@keyframes hex-spin{ to{ transform: rotate(360deg); } }
@keyframes hex-counter-spin{ to{ transform: rotate(-360deg); } }

.social-bubble{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 172px;
  padding: 20px 10px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg-2);
  text-align: center;
  transition: transform .3s var(--ease), border-color .3s, background .3s, box-shadow .3s;
}
.social-bubble:hover{
  transform: scale(1.07);
  border-color: var(--social, var(--cyan));
  background: var(--bg-3);
  box-shadow: 0 18px 40px -18px var(--social, var(--cyan));
}
.social-icon{
  width: 48px; height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--text);
  transition: color .3s, border-color .3s;
}
.social-icon svg{ width: 22px; height: 22px; fill: currentColor; }
.social-bubble:hover .social-icon{ color: var(--social, var(--cyan)); border-color: var(--social, var(--cyan)); }
.social-name{ font-family: var(--font-display); font-weight: 600; font-size: .95rem; }
.social-handle{ max-width: 100%; font-family: var(--font-mono); font-size: .62rem; color: var(--muted); overflow-wrap: anywhere; }
.social-bubble--youtube{ --social: #ff3b3b; }
.social-bubble--tiktok{ --social: #25f4ee; }
.social-bubble--discord{ --social: #5865f2; }
.social-bubble--fortnite{ --social: var(--cyan); }
.social-bubble--patreon{ --social: #ff424d; }
.social-bubble--coffee{ --social: #ffdd00; }

@media (max-width: 760px){
  .social-bubble{ width: 120px; padding: 14px 8px 12px; }
  .social-icon{ width: 40px; height: 40px; }
  .social-handle{ display: none; }
}
@media (max-width: 560px){
  .hex-diagram{ aspect-ratio: auto; }
  .hex-lines, .hex-center{ display: none; }
  .hex-rotate{
    position: static;
    animation: none;
    display: grid;
    gap: 12px;
  }
  .hex-node{ position: static; transform: none; }
  .hex-node-counter{ animation: none; }
  .social-bubble{
    width: 100%;
    flex-direction: row;
    text-align: left;
    gap: 16px;
    padding: 14px 16px;
  }
  .social-bubble:hover{ transform: none; }
  .social-handle{ display: block; margin-left: auto; }
}

/* ---------- Contact ---------- */
.contact-grid{ display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; }
.contact-main{ padding: 40px; display: flex; flex-direction: column; gap: 16px; }
.contact-main p{ color: var(--muted); line-height: 1.7; }
.contact-email{
  font-family: var(--font-mono);
  font-size: clamp(1.05rem, 2.4vw, 1.5rem);
  color: var(--text);
  word-break: break-all;
  transition: color .25s;
}
.contact-email:hover{ color: var(--cyan); }
.contact-side{ padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.contact-side p{ color: var(--muted); font-size: .95rem; line-height: 1.65; }

/* ---------- Pages légales ---------- */
.prose{ max-width: 760px; }
.prose .label{ display: block; margin-bottom: 24px; }
.prose h2{
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
}
.prose h2:first-of-type{ margin-top: 0; }
.prose h3{ margin-top: 28px; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; }
.prose p, .prose li{ color: var(--text-soft); font-size: 1rem; line-height: 1.75; }
.prose p{ margin-top: 12px; }
.prose ul{ margin-top: 12px; padding-left: 1.2em; display: grid; gap: 6px; }
.prose a{ color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Page 404 ---------- */
.lost{ min-height: 80vh; display: flex; align-items: center; padding-top: var(--header-h); }
.lost .page-title{ font-family: var(--font-mono); font-weight: 500; }
.lost--maintenance .page-title{ font-family: var(--font-display); font-weight: 700; }

/* ---------- Pied de page ---------- */
.site-footer{ border-top: 1px solid var(--line); padding-top: 72px; background: linear-gradient(to bottom, transparent, rgba(12,13,21,.6)); }
.footer-inner{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 48px 72px; }
.footer-brand{ max-width: 340px; }
.footer-brand p{ color: var(--muted); font-size: .9rem; margin-top: 12px; }
.footer-disclosure{ font-size: .78rem !important; line-height: 1.6; color: var(--dim) !important; }
.social-inline{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.social-inline a{
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  color: var(--muted);
  transition: color .25s, border-color .25s;
}
.social-inline svg{ width: 15px; height: 15px; fill: currentColor; }
.social-inline a:hover{ color: var(--text); border-color: var(--cyan); }
.footer-nav{ display: flex; flex-wrap: wrap; gap: 40px 64px; }
.footer-col{ display: flex; flex-direction: column; gap: 10px; }
.footer-col .label{ margin-bottom: 4px; }
.footer-col a{ color: var(--muted); font-size: .92rem; transition: color .25s; }
.footer-col a:hover{ color: var(--text); }
.footer-bottom{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 56px;
  padding-block: 24px;
  border-top: 1px solid var(--line);
  font-size: .8rem;
  color: var(--dim);
}
.footer-legal{ display: flex; flex-wrap: wrap; gap: 20px; }
.footer-legal a:hover{ color: var(--text); }

/* ---------- Pages à blocs (Mirage, Dysforia, expériences vidéo) ---------- */
.blocks > * + *{ margin-top: 32px; }
.prose--page > :first-child{ margin-top: 0; }
.prose--page h2{
  margin-top: 0; padding-top: 0; border-top: 0;
  font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700; line-height: 1.15;
}
.prose--page h2 + p{ margin-top: 16px; }

/* ---------- Actus ---------- */
.post-list{ display: grid; gap: 24px; max-width: 960px; }
.post-card{
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
  overflow: hidden;
  transition: border-color .3s var(--ease);
}
.post-card:hover{ border-color: var(--line-strong); }
.post-card--text{ grid-template-columns: minmax(0, 1fr); }
.post-card-media{ position: relative; display: block; background: var(--bg-3); border-right: 1px solid var(--line); }
.post-card-media img{ width: 100%; height: 100%; min-height: 200px; object-fit: cover; transition: transform .8s var(--ease); }
.post-card:hover .post-card-media img{ transform: scale(1.03); }
.post-play{
  position: absolute; inset: 0; margin: auto;
  width: 54px; height: 54px; padding-left: 3px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--line-strong);
  background: rgba(7,8,13,.72); color: var(--text); font-size: .95rem;
}
.post-card-body{ display: flex; flex-direction: column; gap: 12px; padding: 26px 28px; }
.post-card-body .link-arrow{ margin-top: auto; padding-top: 4px; }
.post-meta{ display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; }
.post-meta--head{ margin-top: 4px; }
.post-title{ font-family: var(--font-display); font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
.post-title a{ transition: color .25s; }
.post-title a:hover{ color: var(--cyan); }
.post-excerpt{ color: var(--muted); line-height: 1.65; }
.author{ display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--text-soft); }
.author-avatar{
  width: 26px; height: 26px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; object-fit: cover;
  background: linear-gradient(135deg, var(--violet), var(--cyan));
  color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: .75rem;
}
.page-title--post{ font-size: clamp(2rem, 4.8vw, 3.4rem); line-height: 1.08; max-width: 24ch; }
.post-container{ display: grid; gap: 36px; max-width: 960px; }
.figure-media--auto{ aspect-ratio: auto; }
.figure-media--auto img{ height: auto; max-height: 80vh; object-fit: contain; background: var(--bg-3); }
.prose--post{ max-width: 720px; }
.prose--post p, .prose--post li{ font-size: 1.05rem; }
.prose--post h2{ margin-top: 40px; padding-top: 0; border-top: 0; }
.prose--post > :first-child{ margin-top: 0; }
.download{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 32px; padding: 26px 28px; }
.download-name{ margin: 6px 0 4px; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; word-break: break-all; }
.pager{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; max-width: 960px; margin-top: 40px; }

/* ---------- Banderole d'événement (en haut de toutes les pages) ---------- */
:root{ --banner-h: 0px; }
html.has-banner{ --banner-h: 48px; scroll-padding-top: calc(var(--header-h) + var(--banner-h) + 16px); }
html.has-banner body{ padding-top: var(--banner-h); }
html.has-banner .site-header{ top: var(--banner-h); }
html.has-banner .mobile-nav{ padding-top: calc(var(--header-h) + var(--banner-h) + 24px); }
html.banner-closed{ --banner-h: 0px; }
html.banner-closed .event-banner{ display: none; }
.event-banner{
  --tone: var(--cyan);
  --tone-soft: var(--cyan-soft);
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 110;
  min-height: 48px;
  display: flex;
  align-items: center;
  background: rgba(12,13,21,.95);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-strong);
  box-shadow: inset 0 2px 0 var(--tone);
}
.event-banner--nouveaute{ --tone: #a996ff; --tone-soft: var(--violet-soft); }
.event-banner--maintenance{ --tone: #ffb547; --tone-soft: rgba(255,181,71,.12); }
.event-banner--alerte{ --tone: #ff6b6b; --tone-soft: rgba(255,107,107,.12); }
.event-inner{ display: flex; align-items: center; gap: 8px 16px; padding-block: 8px; }
.event-tag{
  flex: none;
  padding: .3em .65em;
  border: 1px solid var(--tone);
  border-radius: 3px;
  background: var(--tone-soft);
  color: var(--tone);
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.event-text{ flex: 1 1 auto; min-width: 0; font-size: .93rem; line-height: 1.45; color: var(--text); }
.event-countdown{ margin-left: .35em; font-family: var(--font-mono); font-size: .86em; color: var(--tone); white-space: nowrap; font-variant-numeric: tabular-nums; }
.event-button{ display: inline-flex; align-items: center; gap: .4em; flex: none; font-size: .9rem; font-weight: 600; color: var(--tone); white-space: nowrap; }
.event-button:hover{ text-decoration: underline; text-underline-offset: 3px; }
.event-close{
  flex: none;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 1.35rem; line-height: 1;
  transition: color .2s, background .2s;
}
.event-close:hover{ color: var(--text); background: rgba(255,255,255,.06); }

/* Aperçu ouvert depuis le panneau admin */
.preview-bar{
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 300;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 10px 18px;
  border: 1px solid rgba(255,181,71,.5);
  border-radius: var(--radius);
  background: rgba(26,20,8,.94);
  box-shadow: 0 12px 40px -12px rgba(0,0,0,.7);
  font-size: .88rem;
  text-align: center;
}
.preview-bar strong{ color: #ffb547; }
.preview-bar a{ color: var(--cyan); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 680px){
  .post-card{ grid-template-columns: minmax(0, 1fr); }
  .post-card-media{ border-right: 0; border-bottom: 1px solid var(--line); }
  .post-card-media img{ min-height: 0; aspect-ratio: 16 / 9; }
  .post-card-body, .download{ padding: 20px; }
  .event-inner{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding-block: 10px; }
  .event-tag{ justify-self: start; }
  .event-close{ grid-column: 2; grid-row: 1; margin: -4px -6px 0 0; }
  .event-text, .event-button{ grid-column: 1 / -1; }
}

/* Accueil : Dysforia, le projet phare, avec sa propre identité (rose poudré, capitales espacées) */
.section--dysforia{ background: radial-gradient(55% 70% at 22% 50%, rgba(244,214,222,.07), transparent 72%); }
.feature--dysforia .feature-media{ border-color: rgba(244,214,222,.22); }
.feature--dysforia .feature-media::before, .feature--dysforia .feature-media::after{ border-color: #F4D6DE; }
.home-corridor{ background: #F4D6DE; }
.home-corridor svg{ display: block; width: 100%; height: 100%; }
.tag--rose{ border-color: rgba(244,214,222,.5); color: #F4D6DE; }
.dot--rose{ background: #E9A9BF; }
.feature--dysforia .dysforia-wordmark{
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-size: clamp(2.4rem, 5.2vw, 3.8rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #F4D6DE;
}
.feature--dysforia .dysforia-hook{ color: #EBC3CF; font-size: 1.1rem; font-style: italic; }
.btn-rose{ background: #F4D6DE; color: #1E1A24; }
.btn-rose:hover{ transform: translateY(-2px); box-shadow: 0 12px 30px -10px rgba(244,214,222,.55); }

/* Bloc « logo » des pages (badge, logo partenaire) : ni cadre ni recadrage */
.block-logo{ margin: 0; }
.block-logo img{ width: min(100%, 420px); height: auto; }
.block-logo figcaption{ margin-top: 10px; }

/* Blocs teaser, frise, petit texte et faits clés (pages du site) */
.teaser{ display: grid; gap: 48px; max-width: 760px; margin-inline: auto; text-align: center; font-family: var(--font-display); font-size: clamp(1.15rem, 2.2vw, 1.4rem); line-height: 1.6; }
.hand-label{ display: inline-block; padding: 0 .4em; border-radius: 3px; background: var(--bg-3); color: var(--cyan); font-style: italic; }
.small-print{ max-width: 760px; color: var(--muted); font-size: .88rem; line-height: 1.6; }
.small-print p + p{ margin-top: .5em; }
.facts{ display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.facts li{ padding: .3em .8em; border: 1px solid var(--line-strong); border-radius: 999px; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft); }
.frise{ position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }
.frise::before{ content: ''; position: absolute; top: 7px; left: calc(50% / var(--n)); right: calc(50% / var(--n)); height: 1px; background: var(--line-strong); }
.frise li{ position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0 6px; text-align: center; color: var(--text-soft); }
.frise-dot{ width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--cyan); background: var(--bg); }
.frise .is-fait .frise-dot, .frise .is-en_cours .frise-dot{ background: var(--cyan); }
.frise .is-en_cours .frise-dot{ animation: frise-pulse 2.6s ease-in-out infinite; }
.frise .is-a_venir{ color: var(--muted); }
.frise .is-a_venir .frise-dot{ border-color: var(--line-strong); }
@keyframes frise-pulse{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(63,232,208,.5); }
  50%{ box-shadow: 0 0 0 8px rgba(63,232,208,0); }
}

/* ============================================================
   Page Dysforia — d'après le « Guide de la page teaser » (25/10/2026)
   La page commence douce, claire et rassurante, comme la maison du
   niveau 974, puis s'assombrit sans qu'on remarque la bascule.
   Beaucoup de vide, peu d'éléments, rien de criard, rien qui clignote.
   ============================================================ */
body.theme-dysforia{
  --dy-rose: #F4D6DE;
  --dy-lilas: #E3D7F0;
  --dy-ciel: #D6E6F4;
  --dy-moulure: #FBF8F6;
  --dy-prune: #3B3340;
  --dy-accent: #C97A97;
  --dy-nuit: #1E1A24;
  --dy-casse: #EDE6EA;
  --dy-noir: #0E0C10;
  --dy-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --dy-round: 'Nunito', 'Segoe UI', sans-serif;
  --dy-mono: 'IBM Plex Mono', Consolas, monospace;
  --dy-hand: 'Caveat', 'Segoe Print', cursive;
  background: var(--dy-noir);
}
.theme-dysforia ::selection{ background: var(--dy-prune); color: var(--dy-moulure); }
.theme-dysforia .bg-watermark{ display: none; }
/* Grain très léger, immobile, sur toute la page */
body.theme-dysforia::before{
  z-index: 250;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  -webkit-mask-image: none;
  mask-image: none;
}
/* Vignettage sombre qui s'accentue en descendant (profondeur réglée par dysforia.js) */
body.theme-dysforia::after{
  content: '';
  position: fixed;
  inset: 0;
  z-index: 249;
  pointer-events: none;
  background: radial-gradient(ellipse 125% 105% at 50% 45%, transparent 52%, rgba(14,12,16,.9) 100%);
  opacity: calc(.14 + var(--dy-depth, 0) * .6);
  transition: opacity .9s ease;
}
body.theme-dysforia::before{ transition: opacity .9s ease; }
/* L'heure du coucher : la lumière baisse d'un coup, le grain monte */
body.theme-dysforia.dy-lights-out::after{ opacity: .97; }
body.theme-dysforia.dy-lights-out::before{ opacity: .14; }

/* En-tête du site : clair sur les pièces pastel, sombre en bas de la page */
body.theme-dysforia:not(.dy-dark) .site-header{
  --text: #3B3340;
  --muted: rgba(59,51,64,.74);
  --line: rgba(59,51,64,.12);
  --line-strong: rgba(59,51,64,.28);
  --cyan: #3B3340;
  --cyan-soft: rgba(59,51,64,.08);
}
body.theme-dysforia:not(.dy-dark) .site-header{ color: var(--text); }
body.theme-dysforia:not(.dy-dark) .site-header .brand-mark{ filter: brightness(0); opacity: .82; }
body.theme-dysforia .site-header.is-scrolled{ background: rgba(244,214,222,.82); }
body.theme-dysforia.dy-dark .site-header.is-scrolled{ background: rgba(14,12,16,.82); }
.theme-dysforia .site-footer{ background: var(--dy-noir); border-top-color: rgba(237,230,234,.08); }

/* Le contenu */
.dy-main{ color: var(--dy-prune); font-family: var(--dy-round); font-size: 18px; line-height: 1.7; }
.dy-main p + p{ margin-top: 1em; }
.dy-main a:not([class]){ color: inherit; text-decoration: underline; text-decoration-color: var(--dy-accent); text-underline-offset: 3px; }
.dy-main h2{
  margin: 0 0 .9em;
  font-family: var(--dy-serif);
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.js .theme-dysforia .reveal{ transform: none; transition: opacity .8s ease; }
.js .theme-dysforia .dy-rule.reveal{ transform: rotate(-3deg); }

/* 1. Écran d'accueil : rose poudré uni, le titre, l'accroche, « entrer » */
.dy-hero{
  position: relative;
  display: grid;
  place-items: end center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--header-h) + 40px) 16px clamp(48px, 9vh, 96px);
  overflow: hidden;
  background: var(--dy-rose);
  text-align: center;
}
/* Le couloir, dessiné en fond : au bout, une porte, et quelqu'un dedans */
.dy-corridor{ position: absolute; inset: 0; width: 100%; height: 100%; }
.dy-hero-inner{
  position: relative;
  z-index: 1;
  padding: clamp(28px, 5vw, 56px) clamp(16px, 6vw, 88px);
  background: radial-gradient(closest-side, rgba(244,214,222,.94), rgba(244,214,222,.8) 62%, rgba(244,214,222,0));
}
.dy-doors-ready .dy-door:not(.is-here) .dy-figure-far{ visibility: hidden; }
.dy-title{
  position: relative;
  display: inline-block;
  margin: 0;
  padding-left: .2em;               /* compense l'espacement laissé après la dernière lettre */
  font-family: var(--dy-serif);
  font-size: clamp(3rem, 12vw, 9rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dy-prune);
}
.dy-stitches{
  position: absolute;
  left: .12em;
  bottom: -.2em;
  width: calc(100% - .2em);
  height: .1em;
  overflow: visible;
}
.dy-stitches line{
  stroke: var(--dy-moulure);
  stroke-width: 1.8;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: 0 50%;
  transition: transform 3.2s cubic-bezier(.3, .6, .25, 1), opacity 3.2s ease;
}
.dy-stitches .dy-stitch--loose2{ transform-origin: 100% 50%; }
.dy-title.is-loose .dy-stitch--loose{ transform: translate(1px, 5px) rotate(38deg); opacity: .7; }
.dy-title.is-loose .dy-stitch--loose2{ transform: translate(-1px, 3px) rotate(-26deg); opacity: .8; }
.dy-hook{ margin-top: 1.8em; font-size: clamp(1.05rem, 2.3vw, 1.3rem); color: rgba(59,51,64,.86); }
.dy-enter{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 3.6em;
  font-family: var(--dy-mono);
  font-size: 14px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--dy-prune);
  opacity: .72;
  transition: opacity .3s;
}
.dy-enter:hover{ opacity: 1; }

/* Bandes pleine largeur : chacune part de la couleur de la précédente (aucune coupure nette) */
.dy-band{
  --pad: clamp(104px, 16vh, 176px);
  position: relative;
  padding: var(--pad) 0;
  background: linear-gradient(to bottom, var(--from) 0, var(--to) calc(var(--pad) * .85)) var(--to);
}
.dy-band[data-tone="dark"]{ color: var(--dy-casse); }
.dy-column{ max-width: 640px; }

/* 2. Description courte et infos de base */
.dy-intro{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "text side" "note side";
  gap: 0 clamp(40px, 7vw, 96px);
  align-items: start;
}
.dy-intro-text{ grid-area: text; max-width: 620px; }
.dy-intro-side{ grid-area: side; }
/* Le badge « In work with Unreal Engine 5 », sur un post-it collé à gauche de la fiche */
.dy-intro-note{ grid-area: note; justify-self: end; margin-top: 56px; }
.dy-postit{
  position: relative;
  width: 250px;
  padding: 34px 22px 30px;
  background: linear-gradient(to bottom, #FBF2BC, #F6EAA8);
  box-shadow: 0 2px 3px rgba(59,51,64,.08), 0 22px 26px -20px rgba(59,51,64,.55);
  transform: rotate(-4deg);
}
.dy-postit::before{ content: ''; position: absolute; top: 0; left: 0; right: 0; height: 24px; background: rgba(255,255,255,.22); }
.dy-postit::after{
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 26px;
  height: 26px;
  background: linear-gradient(135deg, transparent 50%, rgba(59,51,64,.12) 50%, #EEDF95 62%);
}
.dy-postit img{ display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.dy-postit img + img{ margin-top: 18px; }
.dy-specs{ margin: 0; font-family: var(--dy-mono); font-size: 14px; line-height: 1.5; letter-spacing: .05em; text-transform: uppercase; }
.dy-specs div{ display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 16px; padding: 11px 0; border-top: 1px solid var(--dy-moulure); }
.dy-specs div:last-child{ border-bottom: 1px solid var(--dy-moulure); }
.dy-specs dt{ color: rgba(59,51,64,.68); }
.dy-specs dd{ margin: 0; }
.dy-badge{ margin: 32px 0 0; }
.dy-badge img{ width: 210px; height: auto; mix-blend-mode: multiply; opacity: .88; }

/* 3. Teaser : lilas, une ligne après l'autre, beaucoup d'espace */
.dy-teaser{ display: grid; gap: clamp(72px, 16vh, 150px); max-width: 760px; margin: 0 auto; text-align: center; font-size: clamp(1.15rem, 2.4vw, 1.45rem); line-height: 1.6; }
.dy-teaser .hand-label{
  margin: .1em .15em;
  padding: .02em .55em .1em;
  border-radius: 3px;
  background: var(--dy-moulure);
  box-shadow: 0 8px 18px -12px rgba(59,51,64,.6);
  color: #8E4B68;
  font-family: var(--dy-hand);
  font-size: 1.5em;
  font-style: normal;
  font-weight: 500;
  line-height: 1.15;
  transform: rotate(-2deg);
}

/* 4. Sections approfondies : colonne étroite, alignement alterné, porte en marge */
.dy-band--deep{ display: flex; flex-direction: column; min-height: calc(100vh + var(--door, 0px)); min-height: calc(100lvh + var(--door, 0px)); }
.dy-band--deep > .container{ display: flex; flex: 1; }
.dy-deep{ display: flex; flex: 1; align-items: center; justify-content: space-between; gap: clamp(40px, 6vw, 96px); }
.dy-deep--right{ flex-direction: row-reverse; }
.dy-deep .dy-door{ align-self: flex-end; }
.dy-deep-text{ max-width: 640px; }
.dy-door{
  flex: none;
  width: calc(var(--h) * .44);
  height: var(--h);
  margin-bottom: calc(-1 * var(--pad));   /* la porte se tient au sol de la bande */
  padding: 9px 9px 0;
  border-radius: 2px 2px 0 0;
  background: var(--dy-moulure);
  box-shadow: 0 0 0 1px rgba(59,51,64,.06), 0 -18px 60px -20px rgba(255,255,255,.5);
}
/* Les portes sont floues comme le reste du décor */
.dy-door:not(.dy-door--far), .dy-bedroom-door{ filter: blur(1.6px); }
.dy-door-room{
  position: relative;
  height: 100%;
  overflow: hidden;
  background: rgba(14,12,16,.3);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--to) 72%, #0E0C10), color-mix(in srgb, var(--to) 48%, #0E0C10));
}
/* Depuis une pièce sombre, la porte ouvre sur la maison rose, éclairée : la silhouette s'y découpe à contre-jour */
.dy-band[data-tone="dark"] .dy-door-room{ background: linear-gradient(to bottom, #F7E3EA, #D9B3C2); }
.dy-figure{ position: absolute; left: 50%; bottom: 0; height: 93%; width: auto; transform: translateX(-50%); color: var(--dy-noir); }
.dy-doors-ready .dy-door:not(.is-here) .dy-figure{ visibility: hidden; }
.dy-shot{ flex: 0 1 46%; margin: 0; }
.dy-shot img, .dy-shot video{ display: block; width: 100%; height: auto; border-radius: 4px; }
.dy-shot figcaption{ margin-top: 10px; font-family: var(--dy-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.dy-quote{ margin: 0 auto; font-family: var(--dy-serif); font-size: 1.4rem; font-style: italic; }

/* Petits textes (avertissement) */
.dy-band--small{ padding: 48px 0 clamp(64px, 10vh, 112px); }
.dy-small{ max-width: 640px; margin: 0 auto; font-size: 14px; line-height: 1.6; text-align: center; opacity: .8; }

/* 5. Où en est le projet : fond sombre, texte clair, frise d'avancement */
.dy-frise{
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  margin: 64px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--dy-mono);
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.dy-frise::before{ content: ''; position: absolute; top: 7px; left: calc(50% / var(--n)); right: calc(50% / var(--n)); height: 1px; background: rgba(237,230,234,.28); }
.dy-frise li{ position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 0 8px; text-align: center; }
.dy-frise .frise-dot{ width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--dy-accent); background: var(--dy-nuit); }
.dy-frise .is-fait .frise-dot, .dy-frise .is-en_cours .frise-dot{ background: var(--dy-accent); }
.dy-frise .is-en_cours .frise-dot{ animation: dy-pulse 3s ease-in-out infinite; }
.dy-frise .is-a_venir{ opacity: .62; }
.dy-frise .is-a_venir .frise-dot{ border-color: var(--dy-casse); }
@keyframes dy-pulse{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(201,122,151,.5); }
  50%{ box-shadow: 0 0 0 9px rgba(201,122,151,0); }
}

/* 6. Suivre le développement : carte blanc moulure, épais cadre de porte */
.dy-band--follow{ padding-top: 0; }
.dy-card{
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px);
  border: 14px solid var(--dy-moulure);
  border-radius: 22px;
  background: #F5F0EE;
  box-shadow: inset 0 0 0 1px rgba(59,51,64,.1), 0 40px 90px -40px rgba(0,0,0,.8);
  color: var(--dy-prune);
  text-align: center;
}
.dy-card h2{ margin-bottom: .6em; }
.dy-kicker{ margin-bottom: 12px; font-family: var(--dy-mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.dy-facts{ display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; }
.dy-facts li{ padding: 6px 12px; border: 1px solid rgba(59,51,64,.22); border-radius: 999px; background: rgba(255,255,255,.65); font-family: var(--dy-mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; }
.dy-actions{ display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.dy-btn{ display: inline-flex; align-items: center; min-height: 46px; padding: .65em 1.4em; border-radius: 999px; font-weight: 700; font-size: 1rem; transition: transform .25s, box-shadow .25s; }
.dy-btn:hover{ transform: translateY(-1px); }
.dy-btn--main{ background: var(--dy-accent); color: var(--dy-nuit); }
.dy-btn--main:hover{ box-shadow: 0 10px 24px -12px rgba(201,122,151,.9); }
.dy-btn--alt{ border: 1.5px solid rgba(59,51,64,.35); color: var(--dy-prune); }

/* 7. Pied de page de Dysforia : noir presque pur */
.dy-band--credits{ padding: 88px 0 48px; }
.dy-credits{ font-size: 14px; line-height: 1.6; text-align: center; color: rgba(237,230,234,.72); }
.dy-credits p + p{ margin-top: .5em; }

/* ---------- Le décor de la maison ---------- */
.dy-band > .container{ position: relative; z-index: 1; }
/* Papier peint rayé, puis lambris à moulures blanches en bas du mur */
.dy-wall::before,
.dy-wall::after{ content: ''; position: absolute; left: 0; right: 0; pointer-events: none; }
.dy-wall::before{
  top: 0;
  bottom: 0;
  /* Rayures aux bords fondus : un papier peint un peu flou, comme vu sans lunettes */
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,.2) 7px, rgba(255,255,255,.2) 15px, rgba(255,255,255,0) 22px, rgba(255,255,255,0) 52px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--pad), #000 calc(100% - 150px), transparent calc(100% - 150px));
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--pad), #000 calc(100% - 150px), transparent calc(100% - 150px));
}
.dy-wall::after{
  bottom: 0;
  height: 150px;
  opacity: .62;
  /* Lambris dessiné avec un léger flou intégré (pas de filtre CSS : le défilement reste fluide) */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='150'%3E%3Cdefs%3E%3Cfilter id='b' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeGaussianBlur stdDeviation='1.6'/%3E%3C/filter%3E%3C/defs%3E%3Cg fill='none' stroke='white' filter='url(%23b)'%3E%3Cline x1='0' y1='6' x2='260' y2='6' stroke-width='6'/%3E%3Crect x='20' y='30' width='220' height='100' rx='3' stroke-width='2.5'/%3E%3Cline x1='0' y1='145' x2='260' y2='145' stroke-width='8'/%3E%3C/g%3E%3C/svg%3E") repeat-x left bottom / 260px 150px;
}
.dy-wall[data-tone="dark"]::before{ background: repeating-linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,.045) 7px, rgba(255,255,255,.045) 15px, rgba(255,255,255,0) 22px, rgba(255,255,255,0) 52px); }
.dy-wall[data-tone="dark"]::after{ opacity: .14; }
/* Le teaser sur une page de carnet */
.dy-ruled::before{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent calc(8% - 1px), rgba(201,122,151,.4) calc(8% - 1px) calc(8% + 1px), transparent calc(8% + 1px)),
    repeating-linear-gradient(to bottom, transparent 0 43px, rgba(59,51,64,.08) 43px 44px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--pad), #000 calc(100% - var(--pad)), transparent);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--pad), #000 calc(100% - var(--pad)), transparent);
}
/* La fiche d'inventaire, collée au mur */
.dy-sheet{
  position: relative;
  padding: 30px 30px 20px;
  border-radius: 2px;
  background: #FBF8F6;
  box-shadow: 0 1px 0 rgba(59,51,64,.05), 0 26px 44px -26px rgba(59,51,64,.5);
  transform: rotate(.8deg);
}
.dy-sheet::before{
  content: '';
  position: absolute;
  top: -13px;
  left: 50%;
  width: 116px;
  height: 28px;
  background: rgba(244,214,222,.78);
  box-shadow: 0 1px 3px rgba(59,51,64,.15);
  transform: translateX(-50%) rotate(-3deg);
}
.dy-sheet-head{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(59,51,64,.8);
  font-family: var(--dy-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.dy-sheet .dy-specs div{ border-top-color: rgba(59,51,64,.12); }
.dy-sheet .dy-specs div:first-child{ border-top: 0; }
.dy-sheet .dy-specs div:last-child{ border-bottom: 0; }
/* Numéro et petit dessin au trait des sections */
.dy-index{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  font-family: var(--dy-mono);
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .78;
}
.dy-icon{ width: 46px; height: 46px; flex: none; }
/* Frise numérotée */
.dy-frise{ counter-reset: dy-step; }
.dy-frise::before{ top: 35px; }
.dy-frise li{ gap: 12px; }
.dy-frise li::before{ counter-increment: dy-step; content: counter(dy-step, decimal-leading-zero); font-size: 12px; line-height: 16px; opacity: .55; }
/* « Où en est le projet » : le calme revient, lentement */
.dy-band--project{ background: linear-gradient(to bottom, var(--from) 0, var(--to) calc(var(--pad) * 2.4)) var(--to); }

/* ---------- L'heure du coucher : la page bascule dans l'horreur ---------- */
.dy-band--night{
  --pad: clamp(130px, 20vh, 220px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 118vh;
  overflow: hidden;
  color: var(--dy-casse);
  background: linear-gradient(to bottom, var(--from) 0, var(--to) 26px) var(--to);
}
/* Le papier peint de la pièce d'avant, arraché */
.dy-torn{ position: absolute; top: 0; left: 0; right: 0; z-index: 1; height: 96px; background: var(--from); }
/* Griffures sur le mur */
.dy-scratches{
  position: absolute;
  top: 18%;
  left: max(12px, calc((100% - var(--container)) / 2 - 60px));
  width: clamp(110px, 15vw, 210px);
  height: auto;
  color: rgba(237,230,234,.075);
  transform: rotate(-9deg);
}
.dy-night{ display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(48px, 8vw, 128px); align-items: center; }
.dy-night-text{ max-width: 600px; }
.dy-night-label{ margin-bottom: 16px; font-family: var(--dy-mono); font-size: 13px; letter-spacing: .26em; text-transform: uppercase; color: var(--dy-accent); }
.dy-main .dy-band--night h2{ margin-bottom: .7em; font-size: clamp(2.2rem, 5.2vw, 4rem); font-weight: 600; line-height: 1.05; letter-spacing: .14em; }
.dy-night-text p:not(.dy-night-label){ color: rgba(237,230,234,.86); }
.dy-main .dy-night-end{ margin-top: 1.4em; font-family: var(--dy-hand); font-size: 2rem; line-height: 1.2; color: var(--dy-accent); }
.dy-night-side{ display: flex; flex-direction: column; align-items: center; gap: 64px; }
/* La règle, écrite comme une consigne pour enfant, salie */
.dy-rule{
  position: relative;
  max-width: 340px;
  padding: 30px 30px 40px;
  background:
    radial-gradient(circle at 84% 80%, rgba(58,18,30,.38), rgba(58,18,30,0) 26%),
    radial-gradient(circle at 18% 14%, rgba(59,51,64,.1), transparent 40%),
    var(--dy-rose);
  color: var(--dy-prune);
  transform: rotate(-3deg);
  clip-path: polygon(0 0, 100% 0, 100% 91%, 94% 100%, 86% 93%, 76% 99%, 65% 92%, 53% 100%, 41% 93%, 29% 99%, 17% 92%, 7% 98%, 0 92%);
}
.dy-rule::before{ content: ''; position: absolute; top: 12px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--dy-prune); }
.dy-main .dy-rule-head{ margin-top: 8px; font-family: var(--dy-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; opacity: .7; }
.dy-main .dy-rule-text{ margin-top: 10px; font-family: var(--dy-hand); font-size: 1.8rem; line-height: 1.25; }
/* La porte de la chambre, lumière éteinte : sous la porte, le couloir est éclairé… et quelqu'un s'arrête devant */
.dy-bedroom{ position: relative; width: clamp(170px, 17vw, 230px); }
.dy-bedroom-door{
  position: relative;
  height: clamp(250px, 26vw, 330px);
  border: 2px solid rgba(237,230,234,.07);
  border-bottom: 0;
  background: linear-gradient(to bottom, #0D0B10, #131018);
}
.dy-bedroom-door::before,
.dy-bedroom-door::after{ content: ''; position: absolute; left: 14%; right: 14%; border: 1.5px solid rgba(237,230,234,.045); }
.dy-bedroom-door::before{ top: 9%; height: 34%; }
.dy-bedroom-door::after{ top: 52%; height: 38%; }
.dy-knob{ position: absolute; right: 9%; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: rgba(237,230,234,.14); }
.dy-gap{
  position: relative;
  height: 9px;
  overflow: hidden;
  background: var(--dy-rose);
  box-shadow: 0 0 18px 4px rgba(244,214,222,.42), 0 12px 42px 10px rgba(244,214,222,.14);
}
.dy-foot{ position: absolute; top: 0; bottom: 0; left: -30%; width: 13%; background: var(--dy-noir); transition: left 7s cubic-bezier(.3, .1, .3, 1); }
.dy-foot + .dy-foot{ left: -14%; }
.dy-bedroom.is-near .dy-foot{ left: 35%; }
.dy-bedroom.is-near .dy-foot + .dy-foot{ left: 53%; }
html:not(.js) .dy-foot{ left: 35%; }
html:not(.js) .dy-foot + .dy-foot{ left: 53%; }
.dy-bedroom::after{
  content: '';
  position: absolute;
  top: 100%;
  left: -25%;
  right: -25%;
  height: 70px;
  background: radial-gradient(ellipse 50% 100% at 50% 0%, rgba(244,214,222,.2), transparent 72%);
}

/* Autres pages : bloc « mise en garde » */
.warning-card{ max-width: 820px; padding: 40px; }
.warning-card h2{ margin: 10px 0 16px; font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.15; }
.warning-card p{ color: var(--text-soft); }
.warning-card p + p{ margin-top: 12px; }
.warning-rule{ margin-bottom: 16px; padding: 12px 18px; border-left: 2px solid var(--cyan); color: var(--text) !important; font-style: italic; }
.warning-end{ margin-top: 16px; color: var(--muted) !important; font-style: italic; }

/* Téléphone : une seule colonne, la silhouette réduite et placée entre les sections */
@media (max-width: 760px){
  .dy-sheet{ padding: 26px 20px 16px; transform: rotate(.4deg); }
  .dy-wall::after{ height: 112px; background-size: 200px 115px; }
  .dy-wall::before{
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--pad), #000 calc(100% - 112px), transparent calc(100% - 112px));
    mask-image: linear-gradient(to bottom, transparent 0, #000 var(--pad), #000 calc(100% - 112px), transparent calc(100% - 112px));
  }
  .dy-frise li::before{ display: none; }
  .dy-band--night{ min-height: 0; }
  .dy-night{ grid-template-columns: minmax(0, 1fr); }
  .dy-night-side{ gap: 48px; }
  .dy-scratches{ top: 4%; left: auto; right: 4%; width: 110px; }
  .dy-torn{ height: 64px; }
  .dy-rule-text{ font-size: 1.6rem; }
  .dy-main{ font-size: 17px; }
  .dy-intro{ grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "text" "side" "note"; row-gap: 40px; }
  .dy-intro-note{ justify-self: center; margin-top: 8px; }
  .dy-postit{ width: 220px; transform: rotate(-3deg); }
  .dy-specs div{ grid-template-columns: 7.6em minmax(0, 1fr); gap: 12px; }
  .dy-deep, .dy-deep--right{ flex-direction: column; align-items: stretch; }
  .dy-door, .dy-deep .dy-door{ width: calc(var(--h) * .27); height: calc(var(--h) * .62); padding: 6px 6px 0; align-self: center; margin-top: 32px; }
  .dy-shot{ flex: none; }
  .dy-frise{ grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 48px; }
  .dy-frise::before{ top: 8px; bottom: 8px; left: 7px; right: auto; width: 1px; height: auto; }
  .dy-frise li{ flex-direction: row; align-items: flex-start; gap: 16px; padding: 0; text-align: left; }
  .dy-frise .frise-dot{ flex: none; margin-top: 3px; }
  .dy-card{ border-width: 10px; border-radius: 18px; }
}

/* ---------- Apparition au scroll (classe posée par script.js) ---------- */
.js .reveal{ opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.is-visible{ opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px){
  .site-nav{ display: none; }
  .nav-toggle{ display: flex; }
  .feature, .feature--reverse, .letter, .contact-grid{ grid-template-columns: 1fr; }
  .feature--reverse .feature-media{ order: 0; }
  .letter-aside{ position: static; max-width: 260px; }
  .card-grid--3{ grid-template-columns: repeat(2, 1fr); }
  .exp{ grid-template-columns: 1fr; gap: 20px; }
  .exp-icon{ width: 88px; height: 88px; }
  .spec-grid{ grid-template-columns: repeat(2, 1fr); }
  .spec-item:nth-child(3){ border-left: none; }
  .spec-item:nth-child(n+3){ border-top: 1px solid var(--line); }
}
@media (max-width: 680px){
  :root{ --gutter: 16px; --header-h: 64px; }
  /* L'image est très large : sur téléphone on la garde en bandeau en haut, fondu vers le titre */
  .hero{ min-height: 0; display: block; padding: calc(var(--header-h) + 38vw) 0 56px; }
  .hero-bg{ bottom: auto; height: calc(var(--header-h) + 70vw); }
  .hero-bg img{ object-position: 50% 40%; filter: blur(.5px) brightness(.7) saturate(.85); }
  .hero-bg::after{
    background:
      linear-gradient(to bottom, rgba(7,8,13,.6) 0%, transparent 30%, transparent 45%, var(--bg) 100%);
  }
  .page-head{ padding: calc(var(--header-h) + 40px) 0 40px; }
  .section{ padding-block: 64px; }
  .card-grid, .card-grid--3, .notes{ grid-template-columns: 1fr; }
  .exp, .callout, .contact-main, .contact-side, .quote-card, .note{ padding: 24px; }
  .spec-grid{ grid-template-columns: 1fr; }
  .spec-item + .spec-item{ border-left: none; border-top: 1px solid var(--line); }
  .manifesto{ padding-block: 72px; }
  .footer-nav{ gap: 32px 48px; }
}

/* ---------- Accessibilité : mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal{ opacity: 1; transform: none; }
}