/* ═══════════════════════════════════════════════════════════════════════════
   UNIVERS V6 — tout est préfixé .ud6 · canvas Origin, palette de l'univers
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── PALETTE DE L'UNIVERS · Textural Minimal ───────────────────────────────
   Reprise mot pour mot du bloc de style de EMOTION_UNIVERS_TEXTURAL-MINIMAL.html
   (« Seul contenu propre à cette page : palette + image hero »), préfixée.
   --ud6-accent EST la couleur officielle du cahier §6, ligne 03. */
:root{
  --ud6-ink-deep:     #1F1F1F;
  --ud6-ink:          #2A2A2A;
  --ud6-ink-soft:     #363636;
  --ud6-accent:       #A3A3A3;              /* cahier §6 · Textural Minimal   */
  --ud6-accent-soft:  #D4D4D4;
  --ud6-accent-faint: rgba(163,163,163,.16);
  --ud6-glow:         rgba(163,163,163,.30);
  --ud6-breath:       #737373;
  --ud6-light:        #F5F5F5;
  --ud6-hero: url('https://assets.alsemotion.com/univers/textural-minimal-hero.webp?v=2');
}
/* le monde déborde du conteneur principal : toute la page baigne dans l'univers
   (repris tel quel de la page source) */
html,body{background:var(--ud6-ink-deep)}

/* ─── Niveaux dérivés — NE PAS TOUCHER d'un univers à l'autre ───────────── */
.ud6{
  --ud6-t2:      color-mix(in srgb, var(--ud6-light) 78%, transparent); /* corps       */
  --ud6-line:    color-mix(in srgb, var(--ud6-light) 12%, transparent); /* filet neutre */
  --ud6-filet:   color-mix(in srgb, var(--ud6-accent-soft) 35%, transparent);
  --ud6-bord:    color-mix(in srgb, var(--ud6-accent-soft) 22%, transparent);
  --ud6-bord-f:  color-mix(in srgb, var(--ud6-accent-soft) 45%, transparent);
  --ud6-bord-h:  color-mix(in srgb, var(--ud6-accent-soft) 62%, transparent);
  --ud6-carte:   color-mix(in srgb, var(--ud6-ink-deep) 55%, transparent);
  --ud6-carte-h: color-mix(in srgb, var(--ud6-ink-soft) 78%, transparent);
  --ud6-voile:   color-mix(in srgb, var(--ud6-accent-soft) 10%, transparent);
}

/* ─── Base ──────────────────────────────────────────────────────────────── */
.ud6{position:relative;background:var(--ud6-ink-deep);color:var(--ud6-t2);font-family:var(--font-body);font-weight:300;line-height:1.75;overflow-x:hidden}
.ud6 p{text-wrap:pretty}
.ud6 a{color:var(--ud6-accent-soft);text-decoration:none;transition:color .25s ease}
.ud6 a:hover{color:var(--ud6-light)}
.ud6 b,.ud6 strong{font-weight:500;color:var(--ud6-light)}
.ud6 img{max-width:100%}
.ud6 ::selection{background:var(--ud6-accent);color:var(--ud6-ink-deep)}

/* ─── Le monde : un fond. Le rail : la ligne qui les traverse. ───────────── */
.ud6__monde{position:relative;z-index:1}
.ud6__rail{position:absolute;top:0;bottom:0;left:max(20px,calc(50vw - 600px));width:1px;pointer-events:none;animation:breathGlow var(--breath) ease-in-out infinite}
.ud6__noeud{position:absolute;top:118px;left:max(20px,calc(50vw - 600px));width:9px;height:9px;margin-left:-4px;border-radius:50%;background:var(--ud6-accent-soft);box-shadow:0 0 10px 2px var(--ud6-glow);animation:breathSquare var(--breath) ease-in-out infinite;pointer-events:none}
.ud6__in{position:relative;z-index:1;max-width:900px;margin:0 auto;padding:118px 24px 110px 64px}
.ud6__in--large{max-width:1180px}
@media (max-width:780px){
  .ud6__rail,.ud6__noeud{display:none}
  .ud6__in{padding-left:24px;padding-top:96px;padding-bottom:84px}
}

/* Ciel d'étoiles (ouverture et fermeture seulement) + halo d'accent */
.ud6__ciel{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.ud6__ciel span{position:absolute;border-radius:50%}
@keyframes ud6-scintille{0%,100%{opacity:.05}50%{opacity:.75}}
.ud6__halo{position:absolute;z-index:0;pointer-events:none;border-radius:50%;background:radial-gradient(circle,var(--ud6-glow) 0%,transparent 70%);animation:breathGlow var(--breath) ease-in-out infinite}
.ud6__halo--haut{top:-16%;left:-8%;width:min(820px,96vw);height:min(820px,96vw)}
.ud6__halo--bas{bottom:-26%;left:0;right:0;margin:0 auto;width:min(680px,92vw);height:min(680px,92vw)}

/* ─── Typographie éditoriale, à gauche du rail ──────────────────────────── */
.ud6__eti{margin:0 0 14px;font-size:11.5px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--ud6-accent-soft)}
.ud6__h1{margin:0;max-width:20ch;font-family:var(--font-display);font-weight:300;font-size:clamp(38px,6.4vw,68px);line-height:1.08;letter-spacing:-.01em;color:var(--ud6-light)}
.ud6__h2{margin:0;max-width:700px;font-family:var(--font-display);font-weight:300;font-size:clamp(30px,4.4vw,46px);line-height:1.16;color:var(--ud6-light)}
.ud6__h3{margin:0;max-width:460px;font-family:var(--font-display);font-weight:300;font-size:clamp(25px,3.2vw,33px);line-height:1.2;color:var(--ud6-light)}
.ud6__h1 em,.ud6__h2 em,.ud6__h3 em{font-style:italic;color:var(--ud6-accent-soft)}
.ud6__phrase{margin:26px 0 0;max-width:34ch;font-family:var(--font-display);font-style:italic;font-size:clamp(20px,2.4vw,27px);line-height:1.5;color:var(--ud6-accent-soft)}
.ud6__mots{margin:20px 0 0;font-size:11.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--ud6-t2)}
.ud6__chapo{margin:28px 0 0;max-width:640px;font-family:var(--font-display);font-size:clamp(18px,2vw,21px);line-height:1.8;color:var(--ud6-t2)}
.ud6__txt{margin:26px 0 0;max-width:640px;font-size:15.5px;line-height:1.85;color:var(--ud6-t2)}
.ud6__chapo em,.ud6__txt em{font-style:italic;color:var(--ud6-accent-soft)}
.ud6__exergue{margin:26px 0 0;max-width:640px;font-family:var(--font-display);font-style:italic;font-size:clamp(19px,2.1vw,23px);line-height:1.65;color:var(--ud6-accent-soft)}
.ud6__exergue em{font-style:italic;color:var(--ud6-light)}

/* ─── Boutons-portes (rectangulaires, à la Origin — pas de pills) ────────── */
.ud6__portes{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(28px,4vw,40px)}
.ud6__porte{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:14px 26px;border:1px solid var(--ud6-bord-f);border-radius:2px;font-family:var(--font-body);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ud6-accent-soft);background:transparent;transition:background .25s ease,border-color .25s ease,color .25s ease}
.ud6__porte:hover{background:var(--ud6-voile);border-color:var(--ud6-accent-soft);color:var(--ud6-light)}
/* variante fine : les plateformes d'écoute restent sous le nom de la trajectoire,
   jamais au même poids que l'atelier (cahier §0) */
.ud6__porte--fin{min-height:38px;padding:10px 16px;font-size:10.5px;letter-spacing:.16em;border-color:var(--ud6-bord)}
.ud6__porte--fin:hover{background:var(--ud6-accent-faint)}
.ud6__porte--fin svg{opacity:.85}

/* ─── M1 · Le seuil ─────────────────────────────────────────────────────── */
.ud6__m1{background:radial-gradient(ellipse 120% 70% at 50% -10%,var(--ud6-ink-soft) 0%,var(--ud6-ink-deep) 62%);overflow:hidden}
.ud6__m1 .ud6__rail{background:linear-gradient(to bottom,transparent,var(--ud6-accent-soft) 20%,var(--ud6-accent))}
.ud6__m1 .ud6__in{padding-top:clamp(136px,16vw,180px)}
/* image de hero de l'univers, fondue dans le monde */
.ud6__m1-img{position:absolute;top:0;left:0;right:0;height:min(76vh,720px);z-index:0;background-image:var(--ud6-hero);background-size:cover;background-position:center;opacity:.42;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 0%,rgba(0,0,0,.5) 58%,rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 0%,rgba(0,0,0,.5) 58%,rgba(0,0,0,0) 100%)}
.ud6__m1-voile{position:absolute;top:0;left:0;right:0;height:min(76vh,720px);z-index:0;pointer-events:none;
  background:linear-gradient(to right,var(--ud6-ink-deep) 0%,color-mix(in srgb,var(--ud6-ink-deep) 80%,transparent) 44%,color-mix(in srgb,var(--ud6-ink-deep) 28%,transparent) 100%)}

/* ─── M2 · Ce que l'univers provoque / Pour quels moments ───────────────── */
.ud6__m2{background:linear-gradient(to bottom,var(--ud6-ink-deep),var(--ud6-ink) 22%,var(--ud6-ink))}
.ud6__m2 .ud6__rail{background:linear-gradient(to bottom,var(--ud6-accent),var(--ud6-breath) 30%,var(--ud6-breath))}
.ud6__m2 .ud6__noeud{background:var(--ud6-breath)}
.ud6__deux{display:flex;flex-wrap:wrap;gap:clamp(28px,4.4vw,54px)}
.ud6__deux>div{flex:1 1 320px;min-width:0}
.ud6__filet{border-top:1px solid var(--ud6-filet);padding-top:22px}
.ud6__filet-eti{margin:0 0 16px;font-size:11.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--ud6-accent-soft)}
.ud6__liste{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.ud6__liste li{display:flex;align-items:flex-start;gap:12px;font-size:15px;line-height:1.7;color:var(--ud6-t2)}
.ud6__liste li::before{content:"";flex:0 0 5px;width:5px;height:5px;border-radius:50%;background:var(--ud6-accent);margin-top:.62em}
.ud6__usage{margin:22px 0 0;font-size:15px;line-height:2;color:var(--ud6-t2)}

/* ─── M3 · Les trois trajectoires (blocs à filets, pas des cartes) ──────── */
.ud6__m3{background:linear-gradient(to bottom,var(--ud6-ink),var(--ud6-ink-soft) 24%,var(--ud6-ink-soft))}
.ud6__m3 .ud6__rail{background:linear-gradient(to bottom,var(--ud6-breath),var(--ud6-accent-soft) 26%,var(--ud6-accent-soft))}
.ud6__m3 .ud6__noeud{background:var(--ud6-accent-soft)}
.ud6__traj{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:clamp(26px,3.4vw,40px);margin-top:clamp(38px,5vw,54px)}
.ud6__bloc{border-top:1px solid var(--ud6-filet);padding-top:22px}
/* petites capitales : toujours en accent-soft, jamais en ivoire dilué — c'est
   le seul niveau qui reste lisible sur les huit univers, clair compris */
.ud6__bloc-num{margin:0 0 12px;font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--ud6-accent-soft)}
.ud6__bloc-nom{margin:0;font-family:var(--font-display);font-style:italic;font-weight:500;font-size:clamp(23px,2.6vw,28px);line-height:1.25;color:var(--ud6-light)}
.ud6__bloc-phrase{margin:10px 0 0;font-family:var(--font-display);font-style:italic;font-size:clamp(16px,1.8vw,18.5px);line-height:1.55;color:var(--ud6-accent-soft)}
.ud6__bloc-txt{margin:16px 0 0;font-size:14.5px;line-height:1.8;color:var(--ud6-t2)}
.ud6__bloc-eti{margin:24px 0 0;font-size:10.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ud6-accent-soft)}
.ud6__bloc .ud6__portes{margin-top:12px;gap:10px}

/* ─── M4 · Comment choisir entre les trois ──────────────────────────────── */
.ud6__m4{background:linear-gradient(to bottom,var(--ud6-ink-soft),var(--ud6-ink) 26%,var(--ud6-ink))}
.ud6__m4 .ud6__rail{background:linear-gradient(to bottom,var(--ud6-accent-soft),var(--ud6-accent) 28%,var(--ud6-accent))}
.ud6__m4 .ud6__noeud{background:var(--ud6-accent)}

/* ─── M5 · Si cet univers vous parle (les deux chemins) ─────────────────── */
.ud6__m5{background:linear-gradient(to bottom,var(--ud6-ink),var(--ud6-ink-deep) 26%,var(--ud6-ink-deep));overflow:hidden}
.ud6__m5 .ud6__rail{background:linear-gradient(to bottom,var(--ud6-accent),var(--ud6-breath) 30%,var(--ud6-accent-soft))}
/* cartes : réservées aux objets cliquables (kit §2) */
.ud6__chemins{display:flex;flex-wrap:wrap;gap:clamp(14px,2vw,22px);margin-top:clamp(30px,4vw,42px)}
.ud6__chemin{flex:1 1 300px;display:block;padding:24px 26px;border:1px solid var(--ud6-bord);border-radius:3px;background:var(--ud6-carte);color:inherit;transition:border-color .25s ease,background .25s ease,transform .5s var(--ease)}
.ud6__chemin:hover{border-color:var(--ud6-bord-h);background:var(--ud6-carte-h);transform:translateY(-3px)}
.ud6__chemin--vif{border-color:var(--ud6-bord-f);background:var(--ud6-carte-h)}
.ud6__chemin-num{display:block;margin:0 0 10px;font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--ud6-accent-soft)}
.ud6__chemin-nom{margin:0;font-family:var(--font-display);font-style:italic;font-weight:500;font-size:clamp(23px,2.6vw,29px);line-height:1.25;color:var(--ud6-light)}
.ud6__chemin-txt{margin:14px 0 18px;font-size:14px;line-height:1.75;color:var(--ud6-t2)}
.ud6__chemin-suite{display:inline-block;font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ud6-accent-soft)}
.ud6__faits{margin:clamp(30px,4vw,42px) 0 0;padding-top:24px;border-top:1px solid var(--ud6-line);max-width:820px;font-size:14px;line-height:1.85;color:var(--ud6-t2)}

/* ─── M6 · Les voisins, puis la sortie ──────────────────────────────────── */
.ud6__m6{background:radial-gradient(ellipse 120% 80% at 50% 110%,var(--ud6-ink-soft) 0%,var(--ud6-ink-deep) 58%)}
.ud6__m6 .ud6__rail{background:linear-gradient(to bottom,var(--ud6-accent-soft),var(--ud6-accent) 40%,transparent)}
.ud6__m6 .ud6__in{padding-bottom:clamp(110px,14vw,160px)}
.ud6__voisins{display:grid;grid-template-columns:repeat(auto-fit,minmax(282px,1fr));gap:clamp(14px,2vw,20px);margin-top:clamp(34px,4.6vw,48px)}
.ud6__voisin{position:relative;display:block;overflow:hidden;border:1px solid var(--ud6-bord);border-radius:3px;background:var(--ud6-carte);color:inherit;transition:border-color .25s ease,transform .5s var(--ease)}
.ud6__voisin:hover{border-color:var(--ud6-bord-h);transform:translateY(-3px)}
.ud6__voisin img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6}
.ud6__voisin-voile{position:absolute;inset:0;background:linear-gradient(to top,var(--ud6-ink-deep) 4%,color-mix(in srgb,var(--ud6-ink-deep) 62%,transparent) 52%,color-mix(in srgb,var(--ud6-ink-deep) 12%,transparent) 100%)}
.ud6__voisin-corps{position:relative;padding:clamp(150px,20vw,210px) 22px 22px}
.ud6__voisin-num{display:block;font-size:10.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--ud6-accent-soft)}
.ud6__voisin-nom{margin:8px 0 0;font-family:var(--font-display);font-style:italic;font-weight:500;font-size:clamp(21px,2.3vw,25px);line-height:1.25;color:var(--ud6-light)}
.ud6__voisin-phrase{margin:8px 0 0;font-family:var(--font-display);font-style:italic;font-size:.98rem;line-height:1.5;color:var(--ud6-accent-soft)}
.ud6__voisin-suite{display:inline-block;margin-top:16px;font-size:11.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ud6-accent-soft)}
.ud6__sortie{margin:clamp(34px,4.6vw,48px) 0 0}

@media (prefers-reduced-motion:reduce){
  .ud6 *,.ud6 *::before,.ud6 *::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}